192 lines
6.1 KiB
Markdown
192 lines
6.1 KiB
Markdown
|
# 🚀 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 方案
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
步骤：
|
|||
|
|
1. 搜索框输入 "4核 8G"
|
|||
|
|
2. 点击 3-4 个方案的星标
|
|||
|
|
3. 右侧对比面板自动高亮最低价格
|
|||
|
|
4. 点击"官网"按钮购买
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 场景 2：对比不同厂商的香港节点
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
步骤：
|
|||
|
|
1. 筛选器选择：区域 = "中国香港"
|
|||
|
|
2. 收藏阿里云、腾讯云、AWS 的方案
|
|||
|
|
3. 对比价格、带宽、流量差异
|
|||
|
|
4. 选择最适合的方案
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 场景 3：预算内找最高配置
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
步骤：
|
|||
|
|
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` | 复制对比结果 |
|
|||
|
|
|
|||
|
|
## 📱 移动端使用
|
|||
|
|
|
|||
|
|
### 布局变化
|
|||
|
|
- 对比面板移到顶部
|
|||
|
|
- 表格在下方滚动
|
|||
|
|
- 卡片单列显示
|
|||
|
|
|
|||
|
|
### 操作优化
|
|||
|
|
- 更大的点击区域
|
|||
|
|
- 触摸友好的按钮
|
|||
|
|
- 滑动操作支持
|
|||
|
|
|
|||
|
|
## 🎯 最佳实践
|
|||
|
|
|
|||
|
|
### ✅ 推荐做法
|
|||
|
|
1. 先设置筛选条件缩小范围
|
|||
|
|
2. 对比 2-3 个方案即可
|
|||
|
|
3. 关注高亮的最优值
|
|||
|
|
4. 及时清空不需要的对比
|
|||
|
|
|
|||
|
|
### ❌ 避免做法
|
|||
|
|
1. 不要一次对比太多方案（> 4个）
|
|||
|
|
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
|
|||
|
|
|
|||
|
|
🎉 **享受全新的对比体验！**
|