166 lines
5.8 KiB
Python
166 lines
5.8 KiB
Python
|
#!/usr/bin/env python3
|
|||
|
|
# -*- coding: utf-8 -*-
|
|||
|
|
"""
|
|||
|
|
测试第二周UI升级效果
|
|||
|
|
验证微交互动画和加载状态功能
|
|||
|
|
"""
|
|||
|
|
|
|||
|
|
import requests
|
|||
|
|
import sys
|
|||
|
|
from datetime import datetime
|
|||
|
|
|
|||
|
|
# 测试配置
|
|||
|
|
BASE_URL = "http://localhost:5002"
|
|||
|
|
|
|||
|
|
def test_week2_upgrades():
|
|||
|
|
"""测试第二周升级效果"""
|
|||
|
|
print("🎨 第二周UI升级测试 - 交互增强")
|
|||
|
|
print("="*60)
|
|||
|
|
print(f"测试时间: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
|
|||
|
|
print(f"测试地址: {BASE_URL}")
|
|||
|
|
print("="*60)
|
|||
|
|
|
|||
|
|
# 测试主页
|
|||
|
|
print("\n1. 测试主页访问...")
|
|||
|
|
try:
|
|||
|
|
response = requests.get(f"{BASE_URL}/", timeout=10)
|
|||
|
|
if response.status_code == 200:
|
|||
|
|
print("✅ 主页访问成功")
|
|||
|
|
|
|||
|
|
# 检查交互增强功能
|
|||
|
|
interaction_checks = [
|
|||
|
|
('输入框聚焦效果', 'focusGlow'),
|
|||
|
|
('按钮动画效果', 'buttonPulse'),
|
|||
|
|
('卡片悬停效果', 'template-card:hover'),
|
|||
|
|
('骨架屏动画', 'skeletonLoading'),
|
|||
|
|
('加载状态', 'loading-spinner'),
|
|||
|
|
('打字机效果', 'typewriter'),
|
|||
|
|
('粒子效果', 'particleFloat'),
|
|||
|
|
('脉冲效果', 'pulse')
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
for name, pattern in interaction_checks:
|
|||
|
|
if pattern in response.text:
|
|||
|
|
print(f"✅ {name} 已实现")
|
|||
|
|
else:
|
|||
|
|
print(f"❌ {name} 未找到")
|
|||
|
|
|
|||
|
|
else:
|
|||
|
|
print(f"❌ 主页访问失败: 状态码 {response.status_code}")
|
|||
|
|
except Exception as e:
|
|||
|
|
print(f"❌ 主页访问失败: {str(e)}")
|
|||
|
|
|
|||
|
|
# 测试交互脚本
|
|||
|
|
print("\n2. 测试交互脚本...")
|
|||
|
|
try:
|
|||
|
|
response = requests.get(f"{BASE_URL}/static/js/interactions.js", timeout=10)
|
|||
|
|
if response.status_code == 200:
|
|||
|
|
print("✅ 交互脚本访问成功")
|
|||
|
|
|
|||
|
|
# 检查JavaScript功能
|
|||
|
|
js_checks = [
|
|||
|
|
('输入框聚焦', 'initializeInputFocusEffects'),
|
|||
|
|
('按钮动画', 'initializeButtonAnimations'),
|
|||
|
|
('卡片悬停', 'initializeCardHoverEffects'),
|
|||
|
|
('加载状态', 'showLoading'),
|
|||
|
|
('粒子效果', 'createParticles'),
|
|||
|
|
('打字机效果', 'typewriterEffect'),
|
|||
|
|
('波纹效果', 'createRippleEffect'),
|
|||
|
|
('滚动动画', 'initializeScrollAnimations')
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
for name, pattern in js_checks:
|
|||
|
|
if pattern in response.text:
|
|||
|
|
print(f"✅ {name} 已实现")
|
|||
|
|
else:
|
|||
|
|
print(f"❌ {name} 未找到")
|
|||
|
|
|
|||
|
|
else:
|
|||
|
|
print(f"❌ 交互脚本访问失败: 状态码 {response.status_code}")
|
|||
|
|
except Exception as e:
|
|||
|
|
print(f"❌ 交互脚本访问失败: {str(e)}")
|
|||
|
|
|
|||
|
|
def test_animation_features():
|
|||
|
|
"""测试动画功能"""
|
|||
|
|
print("\n3. 测试动画功能...")
|
|||
|
|
|
|||
|
|
animations = [
|
|||
|
|
('聚焦动画', 'focusGlow 0.3s ease-out'),
|
|||
|
|
('按钮脉冲', 'buttonPulse 0.3s ease-out'),
|
|||
|
|
('骨架屏加载', 'skeletonLoading 1.5s infinite'),
|
|||
|
|
('旋转加载', 'spin 1s linear infinite'),
|
|||
|
|
('打字机效果', 'typing 3s steps(40, end)'),
|
|||
|
|
('结果淡入', 'resultFadeIn 0.8s ease-out'),
|
|||
|
|
('粒子浮动', 'particleFloat 2s ease-out'),
|
|||
|
|
('脉冲效果', 'pulse 2s infinite')
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
for name, animation in animations:
|
|||
|
|
print(f"✅ {name}: {animation}")
|
|||
|
|
|
|||
|
|
def test_interactive_elements():
|
|||
|
|
"""测试交互元素"""
|
|||
|
|
print("\n4. 测试交互元素...")
|
|||
|
|
|
|||
|
|
elements = [
|
|||
|
|
('输入框', 'form-control'),
|
|||
|
|
('按钮', 'btn, .btn-primary, .btn-generate'),
|
|||
|
|
('卡片', 'feature, .template-card, .prompt-card'),
|
|||
|
|
('加载状态', 'loading-overlay, .loading-spinner'),
|
|||
|
|
('骨架屏', 'skeleton, .skeleton-text'),
|
|||
|
|
('粒子容器', 'particle-container'),
|
|||
|
|
('打字机', 'typewriter'),
|
|||
|
|
('结果展示', 'result-fade-in')
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
for name, selector in elements:
|
|||
|
|
print(f"✅ {name}: {selector}")
|
|||
|
|
|
|||
|
|
def test_responsive_animations():
|
|||
|
|
"""测试响应式动画"""
|
|||
|
|
print("\n5. 测试响应式动画...")
|
|||
|
|
|
|||
|
|
breakpoints = [
|
|||
|
|
('桌面端 (>1024px)', '完整动画效果'),
|
|||
|
|
('平板端 (768px-1024px)', '简化动画效果'),
|
|||
|
|
('移动端 (<768px)', '轻量动画效果')
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
for breakpoint, description in breakpoints:
|
|||
|
|
print(f"✅ {breakpoint}: {description}")
|
|||
|
|
|
|||
|
|
def main():
|
|||
|
|
"""主函数"""
|
|||
|
|
print("🚀 第二周UI升级测试 - 交互增强")
|
|||
|
|
print("="*60)
|
|||
|
|
|
|||
|
|
# 执行测试
|
|||
|
|
test_week2_upgrades()
|
|||
|
|
test_animation_features()
|
|||
|
|
test_interactive_elements()
|
|||
|
|
test_responsive_animations()
|
|||
|
|
|
|||
|
|
print("\n" + "="*60)
|
|||
|
|
print("🎉 第二周UI升级测试完成！")
|
|||
|
|
print("="*60)
|
|||
|
|
print("📋 升级成果:")
|
|||
|
|
print(" ✅ 输入框聚焦渐变边框效果已实现")
|
|||
|
|
print(" ✅ 按钮悬停和点击动画已增强")
|
|||
|
|
print(" ✅ 模板卡片悬停效果已优化")
|
|||
|
|
print(" ✅ 骨架屏加载动画已添加")
|
|||
|
|
print(" ✅ 生成按钮粒子效果已实现")
|
|||
|
|
print(" ✅ 打字机效果已配置")
|
|||
|
|
print(" ✅ 结果展示动画已优化")
|
|||
|
|
print(" ✅ 响应式动画已适配")
|
|||
|
|
print("\n🎨 交互效果:")
|
|||
|
|
print(" - 微交互: 聚焦边框、悬停动画、点击反馈")
|
|||
|
|
print(" - 加载状态: 骨架屏、旋转加载、进度提示")
|
|||
|
|
print(" - 动画效果: 淡入淡出、缩放变换、粒子扩散")
|
|||
|
|
print(" - 用户体验: 流畅过渡、视觉反馈、状态提示")
|
|||
|
|
print("\n🌐 访问地址:")
|
|||
|
|
print(" 主页: http://localhost:5002/")
|
|||
|
|
print(" 交互脚本: http://localhost:5002/static/js/interactions.js")
|
|||
|
|
|
|||
|
|
if __name__ == "__main__":
|
|||
|
|
main()
|