6.1 KiB
6.1 KiB
🚀 VPS Price - 分屏对比功能快速开始
✨ 新功能亮点
📊 分屏对比界面
┌─────────────────────────────────────────────────────────────────┐
│ VPS Price - 云服务器价格对比 │
├─────────────────────────────────────────────────────────────────┤
│ [搜索框] │
│ [筛选器: 厂商 | 区域 | 内存 | 价格 | 货币] [重置] 共 X 条结果 │
├──────────────────────────────────┬──────────────────────────────┤
│ 左侧：服务器列表（60%） │ 右侧：对比面板（40%） │
│ │ │
│ ┌────────────────────────────┐ │ ┌──────────────────────┐ │
│ │ 厂商 | 区域 | 配置 | 价格 │ │ │ ⚖️ 方案对比 [✕] │ │
│ ├────────────────────────────┤ │ ├──────────────────────┤ │
│ │ 阿里云 | 香港 | 2核4G | ¥88│☆│ │ ┌────────────────┐ │ │
│ │ 腾讯云 | 香港 | 2核4G | ¥95│★│ │ │ 腾讯云 │✕ │ │
│ │ AWS | 香港 | 2核4G | ¥120│☆│ │ │ 2核4G 香港 │ │ │
│ │ ... │ │ │ │ 价格: ¥95 ✓ │ │ │
│ └────────────────────────────┘ │ │ └────────────────┘ │ │
│ │ │ ┌────────────────┐ │ │
│ │ │ │ Vultr │✕ │ │
│ │ │ │ 2核4G 香港 │ │ │
│ │ │ │ 价格: ¥78 ✓ │ │ │
│ │ │ └────────────────┘ │ │
│ │ └──────────────────────┘ │
└──────────────────────────────────┴──────────────────────────────┘
🎯 核心功能
1️⃣ 实时对比
- 点击 ☆ 星标按钮收藏方案
- 右侧面板立即显示对比信息
- 最多同时对比 4 个方案
2️⃣ 智能高亮
- 🟢 最低价格：绿色背景高亮
- 🟢 最高配置：绿色文字标注
- 一眼看出最优方案
3️⃣ 灵活操作
- 点击星标：添加/移除对比
- 点击 ✕ 按钮：快速移除
- 清空按钮：一键清空所有
📖 使用示例
场景 1：找最便宜的 4核8G 方案
步骤：
1. 搜索框输入 "4核 8G"
2. 点击 3-4 个方案的星标
3. 右侧对比面板自动高亮最低价格
4. 点击"官网"按钮购买
场景 2：对比不同厂商的香港节点
步骤：
1. 筛选器选择：区域 = "中国香港"
2. 收藏阿里云、腾讯云、AWS 的方案
3. 对比价格、带宽、流量差异
4. 选择最适合的方案
场景 3：预算内找最高配置
步骤：
1. 筛选器选择：价格区间 = "¥100-300"
2. 点击"内存"表头按降序排序
3. 收藏前 3 个高配方案
4. 对比面板显示配置差异
🎨 界面特点
视觉设计
- ✅ 专业商务风格
- ✅ 清晰的信息层级
- ✅ 舒适的配色方案
- ✅ 流畅的动画效果
交互体验
- ✅ 即点即显，无需等待
- ✅ 悬停反馈清晰
- ✅ 操作可撤销
- ✅ 状态持久化保存
响应式设计
- ✅ 桌面端：分屏布局
- ✅ 平板端：自适应宽度
- ✅ 移动端：上下布局
💡 使用技巧
技巧 1：快速对比同价位方案
1. 设置价格区间筛选
2. 按配置排序
3. 收藏配置最高的几个
4. 对比性价比
技巧 2：跨厂商对比
1. 不设置厂商筛选
2. 搜索特定配置（如"2核4G"）
3. 收藏不同厂商的方案
4. 对比价格和服务
技巧 3：区域性能对比
1. 筛选特定区域
2. 收藏多个方案
3. 对比带宽和流量
4. 选择网络最优的
🔧 快捷键（计划中）
| 快捷键 | 功能 |
|---|---|
Space |
收藏当前选中方案 |
Esc |
清空所有对比 |
←/→ |
切换对比方案 |
C |
复制对比结果 |
📱 移动端使用
布局变化
- 对比面板移到顶部
- 表格在下方滚动
- 卡片单列显示
操作优化
- 更大的点击区域
- 触摸友好的按钮
- 滑动操作支持
🎯 最佳实践
✅ 推荐做法
- 先设置筛选条件缩小范围
- 对比 2-3 个方案即可
- 关注高亮的最优值
- 及时清空不需要的对比
❌ 避免做法
- 不要一次对比太多方案（> 4个）
- 不要忘记清空旧的对比
- 不要只看价格忽略配置
- 不要在移动端对比太多
🚀 立即开始
1. 访问网站
http://127.0.0.1:5001
2. 强制刷新
Mac: Cmd + Shift + R
Windows: Ctrl + Shift + R
3. 开始对比
点击任意方案的星标按钮 ☆
📚 相关文档
COMPARISON_FEATURE.md- 详细功能说明FEATURES_IMPLEMENTED.md- 所有已实现功能FEATURE_IMPROVEMENTS.md- 功能改进建议
版本：v3.0 Comparison
更新时间：2026-02-09
开发者：Claude Sonnet 4.5
🎉 享受全新的对比体验！