vps_web/test_slide_comparison.sh

#!/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 ""