139 lines
4.7 KiB
Bash
Executable File
139 lines
4.7 KiB
Bash
Executable File
#!/bin/bash
|
||
|
||
echo "=========================================="
|
||
echo "📋 VPS Price - v3.4 滑动模式对比功能测试"
|
||
echo "=========================================="
|
||
echo ""
|
||
|
||
echo "✅ 检查文件完整性..."
|
||
echo ""
|
||
|
||
# 检查 JS 文件
|
||
if [ -f /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js ]; then
|
||
echo "✓ JS: main-comparison-slide.js 已创建"
|
||
|
||
if grep -q "toggleComparisonPanel" /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js; then
|
||
echo "✓ JS: 面板切换功能已实现"
|
||
fi
|
||
|
||
if grep -q "isComparisonVisible" /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js; then
|
||
echo "✓ JS: 显示状态管理已实现"
|
||
fi
|
||
|
||
if grep -q "renderComparisonTable" /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js; then
|
||
echo "✓ JS: 表格渲染已实现"
|
||
fi
|
||
else
|
||
echo "✗ JS: main-comparison-slide.js 未找到"
|
||
fi
|
||
|
||
echo ""
|
||
|
||
# 检查 CSS 文件
|
||
if grep -q "comparison-panel.hidden" /Users/ddrwode/code/vps_price/static/css/style.css; then
|
||
echo "✓ CSS: 隐藏状态样式已添加"
|
||
fi
|
||
|
||
if grep -q "floating-toggle-btn" /Users/ddrwode/code/vps_price/static/css/style.css; then
|
||
echo "✓ CSS: 浮动按钮样式已添加"
|
||
fi
|
||
|
||
if grep -q "transform: translateX" /Users/ddrwode/code/vps_price/static/css/style.css; then
|
||
echo "✓ CSS: 滑动动画已添加"
|
||
fi
|
||
|
||
if grep -q "grid-template-columns.*transition" /Users/ddrwode/code/vps_price/static/css/style.css; then
|
||
echo "✓ CSS: 布局过渡动画已添加"
|
||
fi
|
||
|
||
echo ""
|
||
|
||
# 检查 HTML 引用
|
||
if grep -q "main-comparison-slide.js" /Users/ddrwode/code/vps_price/templates/index.html; then
|
||
echo "✓ HTML: JS 引用已更新为滑动版本"
|
||
else
|
||
echo "✗ HTML: JS 引用未更新"
|
||
fi
|
||
|
||
if grep -q "floating-toggle-btn" /Users/ddrwode/code/vps_price/templates/index.html; then
|
||
echo "✓ HTML: 浮动按钮已添加"
|
||
else
|
||
echo "✗ HTML: 浮动按钮未添加"
|
||
fi
|
||
|
||
echo ""
|
||
echo "=========================================="
|
||
echo "📊 文件统计"
|
||
echo "=========================================="
|
||
echo ""
|
||
|
||
if [ -f /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js ]; then
|
||
JS_SIZE=$(wc -c < /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js)
|
||
JS_LINES=$(wc -l < /Users/ddrwode/code/vps_price/static/js/main-comparison-slide.js)
|
||
echo "JS 文件大小: $JS_SIZE bytes ($JS_LINES 行)"
|
||
fi
|
||
|
||
CSS_SIZE=$(wc -c < /Users/ddrwode/code/vps_price/static/css/style.css)
|
||
CSS_LINES=$(wc -l < /Users/ddrwode/code/vps_price/static/css/style.css)
|
||
echo "CSS 文件大小: $CSS_SIZE bytes ($CSS_LINES 行)"
|
||
|
||
echo ""
|
||
echo "=========================================="
|
||
echo "🎯 新增功能"
|
||
echo "=========================================="
|
||
echo ""
|
||
echo "1. 🎯 向右滑出收起"
|
||
echo " - 对比面板向右滑出隐藏"
|
||
echo " - 平滑的滑动动画（300ms）"
|
||
echo " - 左侧列表自动占满空间"
|
||
echo ""
|
||
echo "2. 🔘 浮动切换按钮"
|
||
echo " - 收起后显示浮动图标按钮"
|
||
echo " - 固定在右侧中间位置"
|
||
echo " - 显示对比方案数量徽章"
|
||
echo ""
|
||
echo "3. 📊 表格列表样式"
|
||
echo " - 像左侧 VPS 列表一样的布局"
|
||
echo " - 清晰的表头和数据行"
|
||
echo " - 行悬停高亮效果"
|
||
echo ""
|
||
echo "4. ✅ 修复按钮错位"
|
||
echo " - 星标按钮正确对齐"
|
||
echo " - 访问按钮正确对齐"
|
||
echo " - 统一的按钮样式"
|
||
echo ""
|
||
echo "5. 📱 响应式设计"
|
||
echo " - 桌面端：侧边滑出"
|
||
echo " - 移动端：全屏抽屉"
|
||
echo " - 平滑的过渡动画"
|
||
echo ""
|
||
echo "=========================================="
|
||
echo "🚀 测试步骤"
|
||
echo "=========================================="
|
||
echo ""
|
||
echo "请访问: http://127.0.0.1:5001"
|
||
echo "强制刷新: Cmd + Shift + R (Mac) 或 Ctrl + Shift + R (Windows)"
|
||
echo ""
|
||
echo "测试清单："
|
||
echo "1. ⭐ 点击 2-3 个方案的星标"
|
||
echo "2. 👀 查看右侧对比面板（表格模式）"
|
||
echo "3. ➡️ 点击标题栏右侧的 → 按钮收起面板"
|
||
echo "4. 🔘 查看右侧浮动按钮（显示数量徽章）"
|
||
echo "5. ⬅️ 点击浮动按钮展开面板"
|
||
echo "6. 🖱️ 鼠标悬停在表格行上查看高亮"
|
||
echo "7. 🔗 点击'访问'按钮测试跳转"
|
||
echo "8. ❌ 点击'✕'按钮移除单个方案"
|
||
echo "9. 🗑️ 点击右上角'✕'清空所有对比"
|
||
echo "10. 📱 调整窗口测试响应式"
|
||
echo ""
|
||
echo "=========================================="
|
||
echo "💡 使用技巧"
|
||
echo "=========================================="
|
||
echo ""
|
||
echo "• 收起面板：点击标题栏的 → 按钮"
|
||
echo "• 展开面板：点击右侧浮动按钮"
|
||
echo "• 浮动按钮：显示当前对比方案数量"
|
||
echo "• 自动布局：收起后左侧列表占满空间"
|
||
echo "• 平滑动画：300ms 滑动过渡效果"
|
||
echo ""
|