From 45d0207654423886f456ef205950891f5e1423de Mon Sep 17 00:00:00 2001 From: ddrwode <34234@3来 34> Date: Mon, 9 Feb 2026 18:09:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=88=E5=93=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- COMPARISON_FEATURE.md | 278 ---------------------- DESIGN_SYSTEM_SUMMARY.md | 304 ------------------------ ENHANCED_COMPARISON.md | 409 ------------------------------- FEATURES_IMPLEMENTED.md | 292 ----------------------- FEATURE_IMPROVEMENTS.md | 428 --------------------------------- IMPLEMENTATION_SUMMARY.md | 292 ----------------------- LIST_COMPARISON.md | 430 --------------------------------- QUICK_START.md | 191 --------------- README.md | 195 --------------- SLIDE_COMPARISON.md | 462 ------------------------------------ TABLE_COMPARISON.md | 410 -------------------------------- UI_OPTIMIZATION.md | 259 -------------------- test_comparison.sh | 109 --------- test_enhanced_comparison.sh | 127 ---------- test_list_comparison.sh | 137 ----------- test_simple.sh | 148 ------------ test_slide_comparison.sh | 138 ----------- test_table_comparison.sh | 144 ----------- 18 files changed, 4753 deletions(-) delete mode 100644 COMPARISON_FEATURE.md delete mode 100644 DESIGN_SYSTEM_SUMMARY.md delete mode 100644 ENHANCED_COMPARISON.md delete mode 100644 FEATURES_IMPLEMENTED.md delete mode 100644 FEATURE_IMPROVEMENTS.md delete mode 100644 IMPLEMENTATION_SUMMARY.md delete mode 100644 LIST_COMPARISON.md delete mode 100644 QUICK_START.md delete mode 100644 README.md delete mode 100644 SLIDE_COMPARISON.md delete mode 100644 TABLE_COMPARISON.md delete mode 100644 UI_OPTIMIZATION.md delete mode 100755 test_comparison.sh delete mode 100755 test_enhanced_comparison.sh delete mode 100755 test_list_comparison.sh delete mode 100755 test_simple.sh delete mode 100755 test_slide_comparison.sh delete mode 100755 test_table_comparison.sh diff --git a/COMPARISON_FEATURE.md b/COMPARISON_FEATURE.md deleted file mode 100644 index bf4e8f8..0000000 --- a/COMPARISON_FEATURE.md +++ /dev/null @@ -1,278 +0,0 @@ -# 🎯 VPS Price - 分屏对比功能 - -## ✨ 新功能概览 - -### 分屏布局设计 -- **左侧（60%）**：服务器列表表格 -- **右侧（40%）**：实时对比面板（固定悬浮） -- **响应式**：移动端自动切换为上下布局 - ---- - -## 🚀 核心功能 - -### 1. 实时对比面板 -- ✅ 点击星标按钮收藏方案 -- ✅ 右侧面板实时显示已收藏方案 -- ✅ 最多同时对比 4 个方案 -- ✅ 超过限制时显示提示 - -### 2. 智能高亮 -- ✅ **最低价格**：绿色高亮显示 -- ✅ **最高配置**：绿色高亮（CPU、内存、存储） -- ✅ 一目了然看出最优方案 - -### 3. 对比维度 -- 厂商名称 -- 配置名称 -- vCPU 核心数 -- 内存大小 -- 存储空间 -- 带宽速度 -- 流量限制 -- 区域位置 -- 月付价格 - -### 4. 交互功能 -- ✅ 点击星标添加/移除对比 -- ✅ 对比卡片上的 ✕ 按钮快速移除 -- ✅ "清空对比" 按钮一键清空所有 -- ✅ 收藏状态保存到 localStorage - ---- - -## 📖 使用指南 - -### 基础操作 - -#### 1. 添加对比方案 -``` -1. 在左侧表格中浏览服务器方案 -2. 点击任意方案行末的星标按钮 ☆ -3. 星标变为 ★，右侧对比面板立即显示该方案 -4. 该行背景变为浅橙色高亮 -``` - -#### 2. 查看对比结果 -``` -右侧对比面板会显示： -- 每个方案的详细配置 -- 最优值用绿色高亮标注 -- 最低价格有绿色背景 -``` - -#### 3. 移除对比方案 -``` -方法 1：再次点击表格中的星标按钮 -方法 2：点击对比卡片右上角的 ✕ 按钮 -方法 3：点击对比面板标题栏的"清空"按钮 -``` - -#### 4. 对比限制 -``` -- 最多同时对比 4 个方案 -- 超过限制时会显示橙色提示 -- 需要先移除现有方案才能添加新的 -``` - ---- - -## 🎨 设计特点 - -### 视觉设计 -- **专业商务风格**：基于 Data-Dense Dashboard 设计系统 -- **配色方案**： - - 主色：#0369A1（专业蓝） - - 强调色：#F59E0B（琥珀黄） - - 成功色：#059669（绿色） - - 警告色：#EA580C（橙色） -- **字体**：Fira Code（等宽）+ Noto Sans SC（中文） - -### 交互设计 -- **平滑动画**：150-300ms 过渡效果 -- **悬停反馈**：所有可交互元素有明确反馈 -- **固定悬浮**：对比面板始终可见（桌面端） -- **响应式**：完美适配移动端 - -### 可访问性 -- ✅ 键盘导航支持 -- ✅ 焦点状态清晰可见 -- ✅ 颜色对比度 4.5:1 以上 -- ✅ 语义化 HTML 结构 - ---- - -## 💻 技术实现 - -### 前端架构 -```javascript -// 核心数据结构 -let favorites = []; // 收藏的方案 ID 数组 -const MAX_COMPARISON = 4; // 最多对比数量 - -// 关键函数 -toggleFavorite(planId) // 切换收藏状态 -renderComparison() // 渲染对比面板 -clearAllFavorites() // 清空所有收藏 -``` - -### 智能高亮算法 -```javascript -// 计算最优值 -const bestPrice = Math.min(...prices); -const bestVcpu = Math.max(...vcpus); -const bestMemory = Math.max(...memories); - -// 应用高亮样式 -if (price === bestPrice) { - addClass('highlight-best'); -} -``` - -### 数据持久化 -```javascript -// 保存到 localStorage -localStorage.setItem('vps_favorites', JSON.stringify(favorites)); - -// 页面刷新后自动恢复 -favorites = JSON.parse(localStorage.getItem('vps_favorites') || '[]'); -``` - ---- - -## 📱 响应式设计 - -### 桌面端（> 1024px） -- 分屏布局：左侧表格 + 右侧对比面板 -- 对比面板固定悬浮（sticky） -- 最佳浏览体验 - -### 平板端（768px - 1024px） -- 对比面板宽度缩小到 350px -- 表格列宽自适应 - -### 移动端（< 768px） -- 上下布局：对比面板在上，表格在下 -- 对比卡片单列显示 -- 规格信息单列排列 - ---- - -## 🎯 使用场景 - -### 场景 1：预算有限，找性价比最高的方案 -``` -1. 设置价格区间：¥100-300 -2. 选择内存：≥ 4 GB -3. 收藏 3-4 个候选方案 -4. 对比面板自动高亮最低价格 -5. 一眼看出最优选择 -``` - -### 场景 2：对比不同厂商的同配置方案 -``` -1. 搜索：4核 8G -2. 收藏阿里云、腾讯云、AWS 的方案 -3. 对比价格、带宽、流量差异 -4. 选择最适合的厂商 -``` - -### 场景 3：多区域对比 -``` -1. 筛选区域：中国香港 -2. 收藏多个方案 -3. 对比不同厂商在香港的价格 -4. 选择性价比最高的 -``` - ---- - -## 🔧 文件清单 - -### 新增文件 -- `static/js/main-comparison.js` - 对比功能 JS（470+ 行） -- `COMPARISON_FEATURE.md` - 功能说明文档 - -### 修改文件 -- `templates/index.html` - 添加分屏布局和对比面板 HTML -- `static/css/style.css` - 添加对比面板样式（200+ 行） - -### 备份文件 -- `static/js/main-enhanced.backup.js` - 原始 JS 备份 - ---- - -## 🎉 立即体验 - -### 启动服务 -```bash -cd /Users/ddrwode/code/vps_price -python app.py -``` - -### 访问地址 -**http://127.0.0.1:5001** - -### 强制刷新 -- Mac: `Cmd + Shift + R` -- Windows: `Ctrl + Shift + R` - ---- - -## 📊 性能优化 - -### 已实施 -- ✅ 虚拟 DOM 最小化更新 -- ✅ 事件委托减少监听器 -- ✅ CSS transform 硬件加速 -- ✅ 防抖搜索（300ms） -- ✅ localStorage 缓存收藏 - -### 性能指标 -- 对比面板渲染：< 50ms -- 添加/移除方案：< 30ms -- 页面初始加载：< 500ms - ---- - -## 🐛 已知限制 - -1. **收藏数据仅本地存储** - - 使用 localStorage - - 清除浏览器数据会丢失 - - 不同设备不同步 - -2. **最多对比 4 个方案** - - 避免界面过于拥挤 - - 保持对比清晰度 - -3. **移动端体验** - - 小屏幕下对比面板在上方 - - 需要滚动查看表格 - ---- - -## 🚀 未来改进 - -### 短期（1-2周） -- [ ] 导出对比结果（PDF/图片） -- [ ] 分享对比链接 -- [ ] 对比历史记录 - -### 中期（1个月） -- [ ] 用户账号系统（云端同步） -- [ ] 自定义对比维度 -- [ ] 对比结果评分 - -### 长期（3个月） -- [ ] AI 推荐最优方案 -- [ ] 价格趋势对比图 -- [ ] 用户评价对比 - ---- - -**实现时间**：2026-02-09 -**版本**：v3.0 Comparison -**开发者**：Claude Sonnet 4.5 - -🎊 **分屏对比功能已完成！立即体验吧！** diff --git a/DESIGN_SYSTEM_SUMMARY.md b/DESIGN_SYSTEM_SUMMARY.md deleted file mode 100644 index ff6a10e..0000000 --- a/DESIGN_SYSTEM_SUMMARY.md +++ /dev/null @@ -1,304 +0,0 @@ -# 🎨 VPS Price - 专业设计系统总结 - -基于 UI/UX Pro Max 设计智能分析，为 VPS 价格对比网站生成的专业设计系统。 - ---- - -## 📊 设计系统概览 - -### 🎯 产品定位 -- **类型**: 云服务器价格对比工具 -- **目标用户**: 开发者、企业 IT、个人站长 -- **核心价值**: 快速对比多家云厂商 VPS 价格和配置 - -### 🎨 设计风格：Trust & Authority（信任与权威） - -**为什么选择这个风格？** -- ✅ 适合技术产品和专业服务 -- ✅ 强调数据准确性和可信度 -- ✅ 符合 B2B/企业级产品调性 -- ✅ WCAG AAA 级别无障碍访问 - -**风格特征：** -- 专业的深色调配色 -- 清晰的数据展示 -- 权威的视觉层次 -- 简洁的交互设计 - ---- - -## 🎨 配色方案 - -### 主色调（Professional Navy + Blue） - -```css -/* 主色 - 深海军蓝 */ ---primary: #0F172A; /* 导航栏、标题 */ - -/* 次要色 - 中性灰蓝 */ ---secondary: #334155; /* 副标题、辅助文本 */ - -/* CTA 色 - 专业蓝 */ ---cta: #0369A1; /* 按钮、链接、强调元素 */ - -/* 背景色 - 浅灰白 */ ---background: #F8FAFC; /* 页面背景 */ - -/* 文本色 - 深黑 */ ---text: #020617; /* 正文文本 */ -``` - -### 语义化颜色 - -```css -/* 成功/价格 */ ---success: #10B981; /* 价格高亮 */ - -/* 警告 */ ---warning: #F59E0B; /* 提示信息 */ - -/* 错误 */ ---error: #EF4444; /* 错误状态 */ - -/* 信息 */ ---info: #3B82F6; /* 信息提示 */ -``` - ---- - -## 📝 字体系统 - -### 字体配对：Space Grotesk + DM Sans - -**为什么选择这个组合？** -- ✅ 现代科技感，适合 SaaS/技术产品 -- ✅ 优秀的可读性 -- ✅ 支持中英文混排 -- ✅ Google Fonts 免费使用 - -### 字体使用规则 - -```css -/* 标题字体 - Space Grotesk */ -font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif; -/* 用于：Logo、大标题、数据标签 */ - -/* 正文字体 - DM Sans */ -font-family: 'DM Sans', 'Noto Sans SC', sans-serif; -/* 用于：正文、按钮、表单 */ - -/* 等宽字体 - JetBrains Mono */ -font-family: 'JetBrains Mono', monospace; -/* 用于：价格、代码、数据 */ -``` - -### 字号层级 - -```css -/* 移动端优先 */ ---text-xs: 0.75rem; /* 12px - 辅助文本 */ ---text-sm: 0.875rem; /* 14px - 小文本 */ ---text-base: 1rem; /* 16px - 正文（最小） */ ---text-lg: 1.125rem; /* 18px - 大正文 */ ---text-xl: 1.25rem; /* 20px - 小标题 */ ---text-2xl: 1.5rem; /* 24px - 标题 */ ---text-3xl: 1.875rem; /* 30px - 大标题 */ ---text-4xl: 2.25rem; /* 36px - 主标题 */ -``` - ---- - -## 🎭 关键视觉效果 - -### 1. Badge Hover Effects（徽章悬停效果） -- 厂商标签悬停时轻微放大 -- 添加阴影增强层次感 -- 过渡时间：200ms - -### 2. Metric Pulse Animations（数据脉冲动画） -- 价格数字加载时的脉冲效果 -- 仅在数据更新时触发 -- 尊重 `prefers-reduced-motion` - -### 3. Smooth Stat Reveal（平滑数据展示） -- 表格数据逐行淡入 -- 延迟递增：每行 +50ms -- 总时长不超过 500ms - -### 4. Certificate Carousel（信任标识轮播） -- 可选：展示云厂商官方认证 -- 自动轮播，可暂停 -- 移动端友好 - ---- - -## 📐 布局模式：Comparison Table + CTA - -### 页面结构 - -``` -1. Hero Section（英雄区） - - 主标题 + 副标题 - - 简短价值主张 - - 可选：快速筛选入口 - -2. Problem Intro（问题引入） - - 说明对比的必要性 - - 突出核心优势 - -3. Comparison Table（对比表格）★ 核心 - - 多厂商价格对比 - - 实时筛选功能 - - 响应式设计 - -4. Pricing（可选） - - 如果有付费功能 - - 清晰的定价层级 - -5. CTA（行动号召） - - 引导用户下一步操作 - - 联系方式/订阅 -``` - -### CTA 位置策略 -- **表格内**：每行右侧"查看官网"按钮 -- **表格下方**：整体 CTA（如：订阅更新、联系咨询） - ---- - -## ✅ 设计检查清单 - -### 视觉质量 -- [x] 使用 SVG 图标（Heroicons/Lucide），不用 emoji -- [x] 所有可点击元素添加 `cursor: pointer` -- [x] 悬停状态有明确视觉反馈 -- [x] 过渡动画 150-300ms -- [x] 文本对比度 ≥ 4.5:1 - -### 交互体验 -- [x] 表格支持横向滚动（移动端） -- [x] 筛选器实时响应 -- [x] 加载状态有骨架屏 -- [x] 错误状态有友好提示 -- [x] 键盘导航可用 - -### 响应式设计 -- [x] 测试断点：375px, 768px, 1024px, 1440px -- [x] 移动端字体 ≥ 16px -- [x] 触摸目标 ≥ 44x44px -- [x] 表格在移动端可滚动 - -### 性能优化 -- [x] 图片使用 WebP + srcset -- [x] 字体使用 font-display: swap -- [x] 尊重 prefers-reduced-motion -- [x] 避免布局偏移（CLS） - -### 无障碍访问 -- [x] 所有图片有 alt 文本 -- [x] 表单有 label 标签 -- [x] 聚焦状态清晰可见 -- [x] 语义化 HTML 标签 -- [x] ARIA 标签适当使用 - ---- - -## 🚫 避免的反模式 - -### 1. 混乱的定价展示 -- ❌ 不要：隐藏真实价格 -- ❌ 不要：复杂的计算公式 -- ✅ 要：清晰的月付价格 -- ✅ 要：统一的货币单位 - -### 2. 缺少信任信号 -- ❌ 不要：没有数据来源说明 -- ❌ 不要：过时的价格信息 -- ✅ 要：标注数据更新时间 -- ✅ 要：链接到官方网站 - -### 3. AI 风格的紫粉渐变 -- ❌ 不要：使用 AI 产品常见的紫色/粉色渐变 -- ❌ 不要：过度使用霓虹色 -- ✅ 要：使用专业的蓝色系 -- ✅ 要：保持商务风格 - ---- - -## 🎯 实施优先级 - -### P0 - 必须实现（核心体验） -1. ✅ 响应式表格布局 -2. ✅ 实时筛选功能 -3. ✅ 清晰的价格展示 -4. ✅ 移动端适配 -5. ✅ 加载状态反馈 - -### P1 - 应该实现（提升体验） -1. ✅ 平滑动画效果 -2. ✅ 悬停状态反馈 -3. ✅ 骨架屏加载 -4. ✅ 错误状态处理 -5. ⬜ 数据排序功能 - -### P2 - 可以实现（锦上添花） -1. ⬜ 价格趋势图表 -2. ⬜ 收藏对比功能 -3. ⬜ 分享功能 -4. ⬜ 暗色模式 -5. ⬜ 多语言支持 - ---- - -## 📚 参考资源 - -### 设计系统文档 -- 完整设计系统：`design-system/vps-price-comparison/MASTER.md` -- 页面特定规则：`design-system/vps-price-comparison/pages/` - -### 字体资源 -- Google Fonts: https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700|Space+Grotesk:wght@400;500;600;700 -- 中文字体：Noto Sans SC（Google Fonts） - -### 图标库 -- Heroicons: https://heroicons.com/ -- Lucide Icons: https://lucide.dev/ -- Simple Icons（品牌 Logo）: https://simpleicons.org/ - -### 无障碍指南 -- WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/ -- WebAIM 对比度检查: https://webaim.org/resources/contrastchecker/ - ---- - -## 🎨 当前实现状态 - -### ✅ 已完成 -- [x] 深色主题优化 -- [x] 渐变视觉效果 -- [x] 响应式布局 -- [x] 加载动画 -- [x] 交互反馈 - -### 🔄 待优化（基于新设计系统） -- [ ] 切换到浅色背景（#F8FAFC） -- [ ] 更新字体为 Space Grotesk + DM Sans -- [ ] 调整配色为专业蓝色系 -- [ ] 添加信任标识 -- [ ] 优化移动端表格体验 - ---- - -## 📝 下一步行动 - -1. **评估当前设计**：对比现有深色主题 vs 新设计系统 -2. **用户测试**：收集用户对配色和布局的反馈 -3. **渐进式优化**：可以保留深色主题，添加浅色主题切换 -4. **数据验证**：确保价格数据准确性和更新频率 - ---- - -**设计系统版本**: v1.0 -**生成时间**: 2026-02-09 -**设计工具**: UI/UX Pro Max Design Intelligence -**适用范围**: VPS 价格对比网站前端界面 diff --git a/ENHANCED_COMPARISON.md b/ENHANCED_COMPARISON.md deleted file mode 100644 index a5ddee6..0000000 --- a/ENHANCED_COMPARISON.md +++ /dev/null @@ -1,409 +0,0 @@ -# 🎨 VPS Price - 增强对比功能说明 - -## ✨ v3.1 Enhanced Comparison - -### 实现时间 -**2026-02-09** - ---- - -## 🎯 核心优化 - -### 问题 -原版对比功能虽然能显示多个方案，但**差异不够直观**： -- ❌ 需要用户自己心算差异 -- ❌ 无法快速识别最优方案 -- ❌ 缺少视觉化对比 - -### 解决方案 -**一眼看出差异**的增强对比系统： -- ✅ 差异百分比自动计算 -- ✅ 进度条可视化对比 -- ✅ 颜色编码快速识别 -- ✅ 横向表格直接对比 -- ✅ 性价比智能评分 - ---- - -## 🚀 新增功能详解 - -### 1. 差异百分比显示 📊 - -**功能说明** -- 自动计算与最优值的差距 -- 显示百分比（+15% 或 -20%） -- 红色表示更差，绿色表示更好 - -**示例** -``` -方案A: 2核 4GB 价格 ¥88 (最优) -方案B: 2核 4GB 价格 ¥95 +8% ← 比最低贵8% -方案C: 2核 4GB 价格 ¥120 +36% ← 比最低贵36% -``` - -**计算公式** -```javascript -差异百分比 = (当前值 - 最优值) / 最优值 × 100% -``` - ---- - -### 2. 视觉对比进度条 📈 - -**功能说明** -- 每个配置项下方显示进度条 -- 进度条长度代表相对大小 -- 配置越高，进度条越长 - -**颜色编码** -- 🟢 **绿色**：最优值（0-10% 差距） -- 🔵 **蓝色**：良好值（10-30% 差距） -- 🟡 **橙色**：一般值（30-50% 差距） -- 🔴 **红色**：较差值（>50% 差距） - -**视觉示例** -``` -方案A: 8GB ████████████████████ 100% (绿色) -方案B: 4GB ██████████ 50% (蓝色) -方案C: 2GB █████ 25% (橙色) -``` - ---- - -### 3. 颜色编码系统 🎨 - -**设计原则** -基于 Data-Dense Dashboard 设计系统： -- 使用颜色快速传达信息 -- 符合用户直觉（绿=好，红=差） -- 保持 WCAG AA 可访问性标准 - -**颜色方案** -```css -最优值：#059669 (绿色) - 背景高亮 -良好值：#0369A1 (蓝色) - 文字高亮 -一般值：#EA580C (橙色) - 警告色 -较差值：#DC2626 (红色) - 危险色 -``` - -**应用场景** -- 价格：最低价格绿色背景 -- 配置：最高配置绿色文字 -- 进度条：根据差距显示颜色 - ---- - -### 4. 横向对比表格 📋 - -**功能说明** -- 当收藏 2 个以上方案时自动显示 -- 列对列直接对比 -- 最优值绿色高亮 - -**表格结构** -``` -┌─────────┬──────────┬──────────┬──────────┐ -│ 指标 │ 阿里云 │ 腾讯云 │ Vultr │ -├─────────┼──────────┼──────────┼──────────┤ -│ vCPU │ 2 核 │ 2 核 │ 2 核 │ -│ 内存 │ 4 GB ✓ │ 4 GB ✓ │ 2 GB │ -│ 存储 │ 40 GB │ 50 GB ✓ │ 40 GB │ -│ 价格 │ ¥88 ✓ │ ¥95 │ ¥78 ✓ │ -└─────────┴──────────┴──────────┴──────────┘ -``` - -**优势** -- 一眼看出所有差异 -- 无需上下滚动 -- 适合打印和截图分享 - ---- - -### 5. 性价比评分 ⭐ - -**功能说明** -- 综合价格和配置计算评分 -- 5 星评分系统 -- 帮助快速决策 - -**评分算法** -```javascript -总分 = 价格得分(40%) + 内存得分(30%) + CPU得分(20%) + 存储得分(10%) - -价格得分： -- 比最低价贵 ≤10% → 4分 -- 比最低价贵 10-30% → 3分 -- 比最低价贵 30-50% → 2分 -- 比最低价贵 >50% → 1分 - -配置得分（CPU/内存/存储）： -- 达到最高配置 ≥90% → 满分 -- 达到最高配置 70-90% → 中等分 -- 达到最高配置 <70% → 低分 -``` - -**评分示例** -``` -方案A: ⭐⭐⭐⭐⭐ (5星) - 价格低，配置高 -方案B: ⭐⭐⭐⭐ (4星) - 价格中等，配置高 -方案C: ⭐⭐⭐ (3星) - 价格低，配置中等 -方案D: ⭐⭐ (2星) - 价格高，配置低 -``` - ---- - -## 📖 使用指南 - -### 基础操作 - -#### 1. 查看差异百分比 -``` -1. 收藏 2-3 个方案 -2. 查看对比面板 -3. 每个配置项下方显示差异百分比 -4. 红色 +X% 表示比最优值差 -``` - -#### 2. 理解进度条 -``` -1. 进度条长度 = 配置相对大小 -2. 进度条颜色 = 与最优值的差距 -3. 绿色 = 最优，红色 = 较差 -``` - -#### 3. 使用横向表格 -``` -1. 收藏 2 个以上方案 -2. 对比面板底部自动显示表格 -3. 列对列直接对比 -4. 绿色高亮 = 该列最优值 -``` - -#### 4. 参考性价比评分 -``` -1. 每个方案底部显示星级 -2. 5星 = 性价比最高 -3. 1星 = 性价比最低 -4. 综合考虑价格和配置 -``` - ---- - -## 🎨 视觉设计 - -### 设计系统 -基于 UI/UX Pro Max 推荐的 **Data-Dense Dashboard** 风格： -- 信息密度高 -- 数据可视化清晰 -- 专业商务风格 - -### 配色方案 -```css -/* 主色调 */ ---accent: #0369A1 /* 专业蓝 */ ---green: #059669 /* 成功绿 */ ---orange: #EA580C /* 警告橙 */ ---red: #DC2626 /* 危险红 */ - -/* 背景色 */ ---bg-card: #FFFFFF /* 卡片背景 */ ---bg-elevated: #F1F5F9 /* 高亮背景 */ ---border: #E2E8F0 /* 边框 */ -``` - -### 字体系统 -```css -/* 数据字体 */ -font-family: "JetBrains Mono", "Fira Code", monospace; - -/* 界面字体 */ -font-family: "Noto Sans SC", -apple-system, sans-serif; -``` - ---- - -## 💻 技术实现 - -### 核心算法 - -#### 差异计算 -```javascript -function calculateDiff(value, bestValue, isLowerBetter) { - if (value === bestValue) return 0; - - const diff = isLowerBetter - ? ((value - bestValue) / bestValue * 100) - : ((bestValue - value) / bestValue * 100); - - return Math.round(diff); -} -``` - -#### 颜色编码 -```javascript -function getDiffBadge(diff, isLowerBetter) { - if (diff === 0) return 'best'; - const absDiff = Math.abs(diff); - - if (absDiff <= 10) return 'good'; - if (absDiff <= 30) return 'average'; - return 'poor'; -} -``` - -#### 进度条宽度 -```javascript -function getProgressBarWidth(value, maxValue) { - if (maxValue === 0) return 0; - return Math.min((value / maxValue * 100), 100); -} -``` - -#### 性价比评分 -```javascript -function calculateValueScore(plan, bestPrice, bestVcpu, bestMemory, bestStorage) { - let score = 0; - - // 价格权重 40% - const priceDiff = (price - bestPrice) / bestPrice; - if (priceDiff <= 0.1) score += 4; - else if (priceDiff <= 0.3) score += 3; - else if (priceDiff <= 0.5) score += 2; - else score += 1; - - // CPU 权重 20% - const cpuRatio = plan.vcpu / bestVcpu; - if (cpuRatio >= 0.9) score += 2; - else if (cpuRatio >= 0.7) score += 1.5; - else score += 1; - - // 内存权重 30% - const memRatio = plan.memory_gb / bestMemory; - if (memRatio >= 0.9) score += 3; - else if (memRatio >= 0.7) score += 2; - else score += 1; - - // 存储权重 10% - const storageRatio = plan.storage_gb / bestStorage; - if (storageRatio >= 0.9) score += 1; - else if (storageRatio >= 0.7) score += 0.5; - - return Math.min(Math.round(score), 5); -} -``` - ---- - -## 📊 性能优化 - -### 已实施 -- ✅ 差异计算缓存 -- ✅ 进度条 CSS transform 硬件加速 -- ✅ 表格视图按需渲染 -- ✅ 颜色编码预计算 - -### 性能指标 -- 差异计算：< 10ms -- 进度条渲染：< 20ms -- 表格视图渲染：< 50ms -- 性价比评分：< 15ms - ---- - -## 🎯 使用场景 - -### 场景 1：快速找出性价比最高的方案 -``` -1. 收藏 3-4 个候选方案 -2. 查看性价比星级评分 -3. 选择 5 星或 4 星方案 -4. 点击"官网"购买 -``` - -### 场景 2：对比同价位不同配置 -``` -1. 筛选价格区间：¥100-300 -2. 收藏 2-3 个方案 -3. 查看横向对比表格 -4. 对比 CPU、内存、存储差异 -5. 选择配置最高的方案 -``` - -### 场景 3：找出价格最优方案 -``` -1. 收藏多个方案 -2. 查看价格差异百分比 -3. 绿色高亮 = 最低价格 -4. 红色 +X% = 比最低贵多少 -5. 根据预算选择 -``` - ---- - -## 📁 文件变更 - -### 新增文件 -``` -static/js/main-comparison-enhanced.js (33 KB, 808 行) -ENHANCED_COMPARISON.md (本文件) -test_enhanced_comparison.sh (测试脚本) -``` - -### 修改文件 -``` -static/css/style.css (新增 400+ 行样式) -templates/index.html (更新 JS 引用) -``` - -### 备份文件 -``` -static/js/main-comparison.js (原版对比功能) -``` - ---- - -## 🎉 功能对比 - -### v3.0 → v3.1 - -| 功能 | v3.0 | v3.1 | -|------|------|------| -| 分屏布局 | ✅ | ✅ | -| 实时对比 | ✅ | ✅ | -| 智能高亮 | ✅ | ✅ | -| **差异百分比** | ❌ | ✅ | -| **进度条可视化** | ❌ | ✅ | -| **颜色编码** | ❌ | ✅ | -| **横向表格** | ❌ | ✅ | -| **性价比评分** | ❌ | ✅ | - ---- - -## 🚀 立即体验 - -### 访问地址 -``` -http://127.0.0.1:5001 -``` - -### 强制刷新 -``` -Mac: Cmd + Shift + R -Windows: Ctrl + Shift + R -``` - -### 测试步骤 -1. ⭐ 点击 2-3 个方案的星标 -2. 👀 查看右侧对比面板 -3. 📊 观察进度条和颜色 -4. 🔢 查看差异百分比 -5. 📋 查看横向对比表格 -6. ⭐ 查看性价比评分 - ---- - -**开发者**：Claude Sonnet 4.5 -**版本**：v3.1 Enhanced Comparison -**实现日期**：2026-02-09 - -🎊 **一眼看出差异，快速做出决策！** diff --git a/FEATURES_IMPLEMENTED.md b/FEATURES_IMPLEMENTED.md deleted file mode 100644 index 6220025..0000000 --- a/FEATURES_IMPLEMENTED.md +++ /dev/null @@ -1,292 +0,0 @@ -# 🎉 VPS Price - 功能实现完成报告 - -## ✅ 已实现功能（第一阶段） - -### 1. **表格排序功能** ⭐⭐⭐⭐⭐ -- ✅ 点击表头可排序（vCPU、内存、存储、价格） -- ✅ 支持升序/降序切换 -- ✅ 显示排序指示器（↑↓） -- ✅ 排序状态高亮显示 -- ✅ 悬停效果优化 - -**使用方法**：点击表头的"vCPU"、"内存"、"存储"、"月付价格"即可排序 - ---- - -### 2. **搜索功能** ⭐⭐⭐⭐⭐ -- ✅ 实时搜索（300ms 防抖） -- ✅ 搜索厂商名、配置名、区域 -- ✅ 搜索框样式优化 -- ✅ 聚焦状态高亮 - -**使用方法**：在顶部搜索框输入关键词，如"阿里云"、"2核"、"香港" - ---- - -### 3. **价格区间筛选** ⭐⭐⭐⭐⭐ -- ✅ 预设价格区间（<¥50、¥50-100、¥100-300、¥300-500、>¥500） -- ✅ 与其他筛选器联动 -- ✅ 实时更新结果 - -**使用方法**：在筛选器中选择"价格区间" - ---- - -### 4. **收藏功能** ⭐⭐⭐⭐⭐ -- ✅ 点击星标收藏方案 -- ✅ 收藏数据保存到 localStorage -- ✅ 收藏的行高亮显示（橙色边框） -- ✅ 星标动画效果 -- ✅ 刷新页面后收藏保持 - -**使用方法**：点击每行最后的星标按钮（☆/★） - ---- - -### 5. **URL 参数同步** ⭐⭐⭐⭐ -- ✅ 筛选条件同步到 URL -- ✅ 支持 URL 分享 -- ✅ 刷新页面保持筛选状态 -- ✅ 浏览器前进/后退支持 - -**示例 URL**： -``` -/?provider=阿里云&memory=4&price=100-300&sort=price&order=asc -``` - ---- - -### 6. **结果计数** ⭐⭐⭐⭐ -- ✅ 实时显示筛选结果数量 -- ✅ 位置：筛选器右侧 -- ✅ 动态更新 - ---- - -## 📊 代码统计 - -| 文件 | 行数 | 说明 | -|------|------|------| -| `main-enhanced.js` | 470 行 | 增强版 JavaScript | -| `style.css` | 580 行 | 包含新功能样式 | -| `index.html` | 已更新 | 添加搜索框和可排序表头 | - ---- - -## 🎨 UI/UX 改进 - -### 视觉优化 -- ✅ 搜索框：现代化设计，聚焦光晕效果 -- ✅ 可排序表头：悬停高亮，排序指示器 -- ✅ 收藏按钮：星标图标，悬停放大 -- ✅ 收藏行：橙色边框，浅色背景 -- ✅ 操作列：Flex 布局，按钮优化 - -### 交互优化 -- ✅ 搜索防抖：避免频繁渲染 -- ✅ 平滑动画：淡入效果 -- ✅ 悬停反馈：所有可交互元素 -- ✅ 响应式设计：移动端适配 - ---- - -## 🚀 使用指南 - -### 基础操作 - -#### 1. 搜索方案 -``` -在搜索框输入：阿里云 -结果：显示所有阿里云的方案 -``` - -#### 2. 按价格排序 -``` -点击"月付价格"表头 -第一次点击：价格从低到高 -第二次点击：价格从高到低 -``` - -#### 3. 组合筛选 -``` -1. 选择厂商：阿里云 -2. 选择区域：中国香港 -3. 选择内存：≥ 4 GB -4. 选择价格：¥100-300 -5. 点击"月付价格"排序 -``` - -#### 4. 收藏方案 -``` -1. 找到心仪的方案 -2. 点击行末的星标按钮 ☆ -3. 星标变为 ★，行变为橙色 -4. 再次点击取消收藏 -``` - -#### 5. 分享筛选结果 -``` -1. 设置好筛选条件 -2. 复制浏览器地址栏的 URL -3. 分享给他人 -4. 他人打开链接会看到相同的筛选结果 -``` - ---- - -## 🔧 技术实现 - -### 核心功能 - -#### 排序算法 -```javascript -function sortPlans(plans, column, order) { - return plans.slice().sort(function (a, b) { - let valA = column === 'price' ? getPriceValue(a) : a[column]; - let valB = column === 'price' ? getPriceValue(b) : b[column]; - - // 处理 null 值 - if (valA == null && valB == null) return 0; - if (valA == null) return 1; - if (valB == null) return -1; - - return order === 'asc' - ? (valA > valB ? 1 : -1) - : (valA < valB ? 1 : -1); - }); -} -``` - -#### 搜索过滤 -```javascript -// 搜索厂商、配置名、区域 -const searchableText = [ - plan.provider, - plan.name, - getDisplayRegion(plan), - plan.vcpu ? plan.vcpu + '核' : '', - plan.memory_gb ? plan.memory_gb + 'G' : '' -].join(' ').toLowerCase(); - -if (searchableText.indexOf(searchTerm) === -1) return false; -``` - -#### 收藏持久化 -```javascript -// 保存到 localStorage -localStorage.setItem('vps_favorites', JSON.stringify(favorites)); - -// 读取收藏 -let favorites = JSON.parse(localStorage.getItem('vps_favorites') || '[]'); -``` - -#### URL 同步 -```javascript -// 更新 URL -const params = new URLSearchParams(); -if (filterProvider.value) params.set('provider', filterProvider.value); -window.history.replaceState({}, '', '?' + params.toString()); - -// 从 URL 加载 -const params = new URLSearchParams(window.location.search); -if (params.get('provider')) filterProvider.value = params.get('provider'); -``` - ---- - -## 📱 响应式设计 - -### 移动端优化 -- ✅ 搜索框占满宽度 -- ✅ 操作列垂直排列 -- ✅ 收藏按钮尺寸调整 -- ✅ 表格横向滚动 - -### 断点 -- 768px：平板和手机 -- 1024px：小屏笔记本 -- 1440px：桌面显示器 - ---- - -## 🎯 性能优化 - -### 已实施 -- ✅ 搜索防抖（300ms） -- ✅ 事件委托（收藏按钮） -- ✅ 虚拟 DOM 最小化（只更新必要部分） -- ✅ CSS 动画使用 transform（GPU 加速） - -### 性能指标 -- 搜索响应：< 50ms -- 排序响应：< 100ms -- 渲染 100 条数据：< 200ms - ---- - -## 🐛 已知问题和限制 - -### 当前限制 -1. 收藏功能仅在本地浏览器有效（localStorage） -2. 清除浏览器数据会丢失收藏 -3. 不同浏览器/设备的收藏不同步 - -### 未来改进 -- [ ] 用户账号系统（云端同步收藏） -- [ ] 对比功能（并排对比多个方案） -- [ ] 价格趋势图 -- [ ] 导出筛选结果（Excel/PDF） - ---- - -## 📖 浏览器兼容性 - -### 支持的浏览器 -- ✅ Chrome 90+ -- ✅ Firefox 88+ -- ✅ Safari 14+ -- ✅ Edge 90+ -- ✅ 移动端浏览器 - -### 使用的现代 API -- `URLSearchParams`：URL 参数处理 -- `localStorage`：本地存储 -- `Array.prototype.filter/map/sort`：数组操作 -- CSS Variables：主题颜色 -- CSS Flexbox：布局 - ---- - -## 🎉 立即体验 - -### 刷新浏览器查看新功能！ - -访问：**http://127.0.0.1:5001** - -按 `Cmd + Shift + R`（Mac）或 `Ctrl + Shift + R`（Windows）强制刷新。 - ---- - -## 📝 下一步计划 - -### 第二阶段功能（可选） -1. ⬜ 对比功能（选择多个方案并排对比） -2. ⬜ 移动端卡片布局 -3. ⬜ 性价比计算（每GB内存价格） -4. ⬜ 价格趋势图（Chart.js） -5. ⬜ 用户评分系统 - -### 第三阶段功能（长期） -1. ⬜ 用户账号系统 -2. ⬜ 价格提醒（邮件通知） -3. ⬜ API 接口开放 -4. ⬜ 多语言支持 -5. ⬜ 暗色/亮色主题切换 - ---- - -**实现时间**：2026-02-09 -**版本**：v2.0 Enhanced -**开发者**：Claude Sonnet 4.5 - -🎊 **恭喜！所有核心功能已成功实现！** diff --git a/FEATURE_IMPROVEMENTS.md b/FEATURE_IMPROVEMENTS.md deleted file mode 100644 index f2a239c..0000000 --- a/FEATURE_IMPROVEMENTS.md +++ /dev/null @@ -1,428 +0,0 @@ -# 🚀 VPS Price - 功能改进建议 - -基于对当前项目的全面分析，提供可添加和优化的功能建议。 - ---- - -## 📊 当前功能概览 - -### ✅ 已实现功能 - -#### 前台功能 -- ✅ VPS 方案展示（表格形式） -- ✅ 多维度筛选（厂商、区域、内存） -- ✅ 货币切换（人民币/美元） -- ✅ 响应式设计 -- ✅ SEO 优化（sitemap、robots.txt、JSON-LD） -- ✅ 广告位预留（3个位置） - -#### 后台功能 -- ✅ 管理员登录/登出 -- ✅ 厂商管理（增删改查） -- ✅ VPS 方案管理（增删改查） -- ✅ Excel 导入/导出 -- ✅ 数据预览和匹配 - ---- - -## 🎯 优先级分类 - -### P0 - 高优先级（强烈建议） -用户体验提升明显，实现成本低 - -### P1 - 中优先级（建议实现） -增强功能性，提升竞争力 - -### P2 - 低优先级（可选） -锦上添花，长期规划 - ---- - -## 🔥 P0 - 高优先级功能 - -### 1. **表格排序功能** ⭐⭐⭐⭐⭐ -**问题**：用户无法按价格、配置等排序 -**建议**： -- 点击表头可排序（价格、内存、CPU、存储） -- 支持升序/降序切换 -- 显示排序指示器（↑↓） - -**实现难度**：⭐ 简单 -**用户价值**：⭐⭐⭐⭐⭐ 极高 - -```javascript -// 前端实现示例 -function sortTable(column, order) { - allPlans.sort((a, b) => { - if (order === 'asc') return a[column] - b[column]; - return b[column] - a[column]; - }); - renderTable(allPlans); -} -``` - ---- - -### 2. **价格区间筛选** ⭐⭐⭐⭐⭐ -**问题**：用户只能按内存筛选，无法按预算筛选 -**建议**： -- 添加价格区间滑块（如：¥50-500） -- 或下拉选择（<¥100、¥100-300、¥300-500、>¥500） -- 实时显示符合条件的方案数量 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐⭐⭐ 极高 - ---- - -### 3. **收藏/对比功能** ⭐⭐⭐⭐ -**问题**：用户无法保存感兴趣的方案 -**建议**： -- 每行添加"收藏"按钮 -- 收藏的方案保存到 localStorage -- 添加"我的收藏"页面 -- 支持多个方案并排对比 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐⭐⭐ 极高 - ---- - -### 4. **搜索功能** ⭐⭐⭐⭐ -**问题**：数据多时难以快速找到特定方案 -**建议**： -- 添加搜索框（搜索厂商名、配置名） -- 实时搜索，高亮匹配结果 -- 支持模糊搜索 - -**实现难度**：⭐ 简单 -**用户价值**：⭐⭐⭐⭐ 高 - ---- - -### 5. **数据更新时间显示** ⭐⭐⭐⭐ -**问题**：用户不知道价格是否最新 -**建议**： -- 在页面底部显示"最后更新时间" -- 数据库添加 `updated_at` 字段 -- 后台编辑时自动更新时间戳 - -**实现难度**：⭐ 简单 -**用户价值**：⭐⭐⭐⭐ 高（增强信任度） - ---- - -### 6. **移动端表格优化** ⭐⭐⭐⭐ -**问题**：移动端表格列太多，体验不佳 -**建议**： -- 移动端改为卡片式布局 -- 或隐藏次要列（带宽、流量） -- 添加"展开详情"按钮 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐⭐ 高 - ---- - -## 💡 P1 - 中优先级功能 - -### 7. **性价比计算** ⭐⭐⭐⭐ -**建议**： -- 计算"每GB内存价格"、"每核CPU价格" -- 添加"性价比"列，显示综合评分 -- 支持按性价比排序 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐⭐ 高 - -```python -# 后端计算示例 -@property -def price_per_gb(self): - if self.price_cny and self.memory_gb: - return round(self.price_cny / self.memory_gb, 2) - return None -``` - ---- - -### 8. **价格趋势图** ⭐⭐⭐ -**建议**： -- 记录历史价格数据 -- 显示价格变化趋势图（Chart.js） -- 标注涨价/降价 - -**实现难度**：⭐⭐⭐ 较难 -**用户价值**：⭐⭐⭐ 中等 - ---- - -### 9. **用户评分/评论** ⭐⭐⭐ -**建议**： -- 允许用户对方案评分（1-5星） -- 添加简短评论功能 -- 显示平均评分 - -**实现难度**：⭐⭐⭐ 较难 -**用户价值**：⭐⭐⭐⭐ 高 - ---- - -### 10. **优惠信息标注** ⭐⭐⭐⭐ -**建议**： -- 添加"促销"、"新用户优惠"标签 -- 数据库添加 `promotion` 字段 -- 高亮显示有优惠的方案 - -**实现难度**：⭐ 简单 -**用户价值**：⭐⭐⭐⭐ 高 - ---- - -### 11. **批量操作** ⭐⭐⭐ -**建议**： -- 后台支持批量删除 -- 批量修改价格（如：统一涨价10%） -- 批量导出选中方案 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐ 中等（管理员） - ---- - -### 12. **数据统计面板** ⭐⭐⭐ -**建议**： -- 后台首页显示统计数据 - - 总方案数、总厂商数 - - 价格分布图 - - 最受欢迎的配置 -- 使用 Chart.js 可视化 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐ 中等（管理员） - ---- - -## 🎨 P2 - 低优先级功能 - -### 13. **暗色/亮色主题切换** ⭐⭐⭐ -**建议**： -- 添加主题切换按钮 -- 保存用户偏好到 localStorage -- 尊重系统主题设置 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐⭐ 中等 - ---- - -### 14. **多语言支持** ⭐⭐ -**建议**： -- 支持中文/英文切换 -- 使用 Flask-Babel -- 数据库存储多语言内容 - -**实现难度**：⭐⭐⭐⭐ 困难 -**用户价值**：⭐⭐ 低（取决于目标用户） - ---- - -### 15. **API 接口开放** ⭐⭐⭐ -**建议**： -- 提供公开 API（需要 API Key） -- 支持 JSON 格式数据导出 -- 限流保护 - -**实现难度**：⭐⭐⭐ 较难 -**用户价值**：⭐⭐⭐ 中等 - ---- - -### 16. **价格提醒** ⭐⭐ -**建议**： -- 用户订阅特定方案 -- 价格变动时邮件通知 -- 需要用户注册系统 - -**实现难度**：⭐⭐⭐⭐ 困难 -**用户价值**：⭐⭐⭐ 中等 - ---- - -### 17. **社交分享** ⭐⭐ -**建议**： -- 添加分享按钮（微信、微博、Twitter） -- 生成分享卡片（Open Graph） -- 统计分享次数 - -**实现难度**：⭐⭐ 中等 -**用户价值**：⭐⭐ 低 - ---- - -## 🔧 现有功能优化建议 - -### 1. **筛选器优化** -**当前问题**： -- 筛选器重置后，URL 参数未清除 -- 无法通过 URL 分享筛选结果 - -**建议**： -- 筛选条件同步到 URL（如：`?provider=阿里云&memory=4`） -- 支持 URL 参数预设筛选 -- 添加"分享筛选结果"按钮 - ---- - -### 2. **表格性能优化** -**当前问题**： -- 数据量大时（>100条）渲染慢 -- 全量渲染影响性能 - -**建议**： -- 实现虚拟滚动（只渲染可见行） -- 或分页显示（每页20-50条） -- 添加"加载更多"按钮 - ---- - -### 3. **后台体验优化** -**当前问题**： -- 编辑后需要手动返回列表 -- 无操作确认提示 - -**建议**： -- 保存后显示 Toast 提示 -- 删除前二次确认（模态框） -- 添加"保存并继续编辑"选项 - ---- - -### 4. **数据验证增强** -**当前问题**： -- 前端缺少输入验证 -- 可能输入无效数据 - -**建议**： -- 添加前端表单验证 -- 价格必须 > 0 -- URL 格式验证 -- 实时错误提示 - ---- - -### 5. **Excel 导入优化** -**当前问题**： -- 导入失败时错误信息不明确 -- 无法批量修正错误 - -**建议**： -- 详细的错误提示（第几行、什么问题） -- 支持部分导入（跳过错误行） -- 提供 Excel 模板下载 - ---- - -## 📈 数据库优化建议 - -### 1. **添加索引** -```sql --- 提升查询性能 -CREATE INDEX idx_price_cny ON vps_plans(price_cny); -CREATE INDEX idx_memory_gb ON vps_plans(memory_gb); -CREATE INDEX idx_provider_price ON vps_plans(provider_id, price_cny); -``` - -### 2. **添加时间戳字段** -```python -# models.py -created_at = db.Column(db.DateTime, default=datetime.utcnow) -updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow) -``` - -### 3. **添加软删除** -```python -# 不真正删除，只标记 -is_deleted = db.Column(db.Boolean, default=False) -deleted_at = db.Column(db.DateTime, nullable=True) -``` - ---- - -## 🎯 快速实施路线图 - -### 第一阶段（1-2天）- 立即见效 -1. ✅ 表格排序功能 -2. ✅ 搜索功能 -3. ✅ 数据更新时间显示 -4. ✅ 价格区间筛选 - -### 第二阶段（3-5天）- 核心功能 -5. ✅ 收藏/对比功能 -6. ✅ 移动端卡片布局 -7. ✅ 性价比计算 -8. ✅ 优惠信息标注 - -### 第三阶段（1-2周）- 增强功能 -9. ✅ 价格趋势图 -10. ✅ 用户评分系统 -11. ✅ 数据统计面板 -12. ✅ 批量操作 - ---- - -## 💻 技术栈建议 - -### 前端增强 -- **Chart.js** - 图表可视化 -- **Sortable.js** - 拖拽排序 -- **Tippy.js** - 工具提示 -- **Day.js** - 日期处理 - -### 后端增强 -- **Flask-Caching** - 缓存优化 -- **Flask-Limiter** - API 限流 -- **Celery** - 异步任务（价格提醒） -- **APScheduler** - 定时任务 - ---- - -## 📊 预期效果 - -### 用户体验提升 -- ⬆️ 页面停留时间 +50% -- ⬆️ 转化率（点击官网）+30% -- ⬆️ 移动端用户满意度 +40% - -### SEO 提升 -- ⬆️ 页面加载速度优化 -- ⬆️ 用户互动增加（评分、收藏） -- ⬆️ 页面停留时间增加 - -### 管理效率 -- ⬇️ 数据维护时间 -50% -- ⬆️ 批量操作效率 +80% -- ⬆️ 数据准确性提升 - ---- - -## 🚀 下一步行动 - -### 立即可做（今天） -1. 添加表格排序功能 -2. 添加搜索框 -3. 显示数据更新时间 - -### 本周可做 -4. 实现价格区间筛选 -5. 优化移动端布局 -6. 添加收藏功能 - -### 本月可做 -7. 实现对比功能 -8. 添加性价比计算 -9. 开发数据统计面板 - ---- - -**需要我帮你实现哪些功能？我可以立即开始编码！** 🚀 diff --git a/IMPLEMENTATION_SUMMARY.md b/IMPLEMENTATION_SUMMARY.md deleted file mode 100644 index c36745c..0000000 --- a/IMPLEMENTATION_SUMMARY.md +++ /dev/null @@ -1,292 +0,0 @@ -# 🎉 VPS Price - 分屏对比功能实现总结 - -## ✅ 实现完成 - -### 实现时间 -**2026-02-09** - -### 功能版本 -**v3.0 Comparison** - ---- - -## 📋 实现清单 - -### 1. HTML 结构 ✅ -- [x] 添加分屏布局容器 `.split-layout` -- [x] 创建对比面板 `.comparison-panel` -- [x] 添加对比面板标题和清空按钮 -- [x] 添加空状态提示 -- [x] 更新 JS 引用为 `main-comparison.js` - -### 2. CSS 样式 ✅ -- [x] 分屏布局样式（Grid 布局） -- [x] 对比面板样式（固定悬浮） -- [x] 对比卡片样式 -- [x] 智能高亮样式（最优值绿色） -- [x] 响应式布局（桌面/平板/移动） -- [x] 动画效果（滑入动画） -- [x] 滚动条美化 -- [x] 限制提示样式 - -**新增样式行数**：约 200 行 - -### 3. JavaScript 功能 ✅ -- [x] 对比面板渲染函数 `renderComparison()` -- [x] 收藏切换函数 `toggleFavorite()` -- [x] 清空对比函数 `clearAllFavorites()` -- [x] 最优值计算逻辑 -- [x] 智能高亮算法 -- [x] 对比数量限制（最多 4 个） -- [x] localStorage 持久化 -- [x] 事件监听和绑定 -- [x] 货币切换联动 - -**新增代码行数**：约 470 行 - -### 4. 文档 ✅ -- [x] `COMPARISON_FEATURE.md` - 详细功能说明 -- [x] `QUICK_START.md` - 快速开始指南 -- [x] `IMPLEMENTATION_SUMMARY.md` - 实现总结 -- [x] `test_comparison.sh` - 测试脚本 - ---- - -## 🎨 设计系统 - -### 基于 UI/UX Pro Max 推荐 -- **模式**：Comparison Table + CTA -- **风格**：Data-Dense Dashboard -- **配色**：专业蓝 + 琥珀黄强调 -- **字体**：Fira Code + Noto Sans SC - -### 颜色方案 -```css ---accent: #0369A1 /* 主色 - 专业蓝 */ ---green: #059669 /* 成功色 - 最优值 */ ---orange: #EA580C /* 警告色 - 收藏 */ ---bg-card: #FFFFFF /* 卡片背景 */ ---border: #E2E8F0 /* 边框 */ -``` - ---- - -## 🚀 核心功能 - -### 1. 分屏布局 -``` -桌面端：左侧 60% 表格 + 右侧 40% 对比面板 -移动端：上下布局，对比面板在上 -``` - -### 2. 实时对比 -- 点击星标立即显示 -- 最多对比 4 个方案 -- 超限自动提示 - -### 3. 智能高亮 -- 最低价格：绿色背景 -- 最高配置：绿色文字 -- 自动计算最优值 - -### 4. 灵活操作 -- 星标按钮：添加/移除 -- ✕ 按钮：快速移除 -- 清空按钮：一键清空 - ---- - -## 📊 技术指标 - -### 性能 -- 对比面板渲染：< 50ms -- 添加/移除方案：< 30ms -- 页面初始加载：< 500ms - -### 兼容性 -- Chrome 90+ -- Firefox 88+ -- Safari 14+ -- Edge 90+ -- 移动端浏览器 - -### 可访问性 -- WCAG AA 标准 -- 键盘导航支持 -- 颜色对比度 4.5:1+ -- 语义化 HTML - ---- - -## 📁 文件变更 - -### 新增文件 -``` -static/js/main-comparison.js (24 KB) -static/js/main-enhanced.backup.js (备份) -COMPARISON_FEATURE.md (6 KB) -QUICK_START.md (5 KB) -IMPLEMENTATION_SUMMARY.md (本文件) -test_comparison.sh (测试脚本) -``` - -### 修改文件 -``` -templates/index.html (添加对比面板 HTML) -static/css/style.css (添加 200+ 行样式) -``` - -### 文件大小统计 -``` -HTML: 9,210 bytes -CSS: 18,017 bytes -JS: 24,548 bytes -``` - ---- - -## 🎯 功能对比 - -### v2.0 Enhanced → v3.0 Comparison - -| 功能 | v2.0 | v3.0 | -|------|------|------| -| 表格排序 | ✅ | ✅ | -| 搜索功能 | ✅ | ✅ | -| 价格筛选 | ✅ | ✅ | -| 收藏功能 | ✅ | ✅ | -| URL 同步 | ✅ | ✅ | -| **分屏布局** | ❌ | ✅ | -| **实时对比** | ❌ | ✅ | -| **智能高亮** | ❌ | ✅ | -| **对比面板** | ❌ | ✅ | - ---- - -## 🧪 测试结果 - -### 自动化测试 -```bash -✓ HTML: 对比面板结构已添加 -✓ HTML: JS 引用已更新 -✓ CSS: 分屏布局样式已添加 -✓ CSS: 对比面板样式已添加 -✓ CSS: 主容器宽度已调整 -✓ JS: main-comparison.js 已创建 -✓ JS: 对比渲染函数已实现 -✓ JS: 对比数量限制已设置 -✓ JS: 收藏切换功能已实现 -✓ 备份: 原始文件已备份 -✓ 文档: 功能说明文档已创建 -``` - -### 手动测试清单 -- [ ] 点击星标添加对比 -- [ ] 右侧面板显示对比信息 -- [ ] 最优值绿色高亮 -- [ ] 点击 ✕ 移除对比 -- [ ] 清空按钮清空所有 -- [ ] 超过 4 个显示提示 -- [ ] 刷新页面保持收藏 -- [ ] 移动端响应式布局 - ---- - -## 🎓 技术亮点 - -### 1. 分块写入策略 -使用 Bash `cat >>` 命令分块追加内容，避免大文件写入失败 - -### 2. ES5 兼容性 -使用 ES5 语法确保旧浏览器兼容 - -### 3. 事件委托 -使用事件委托减少监听器数量 - -### 4. 虚拟 DOM -最小化 DOM 更新，提升性能 - -### 5. CSS 硬件加速 -使用 `transform` 和 `opacity` 实现动画 - ---- - -## 📖 使用指南 - -### 启动服务 -```bash -cd /Users/ddrwode/code/vps_price -python app.py -``` - -### 访问地址 -``` -http://127.0.0.1:5001 -``` - -### 强制刷新 -``` -Mac: Cmd + Shift + R -Windows: Ctrl + Shift + R -``` - -### 测试步骤 -1. 点击任意方案的星标按钮 ☆ -2. 查看右侧对比面板是否显示 -3. 添加 2-3 个方案进行对比 -4. 检查最优值是否绿色高亮 -5. 点击对比卡片的 ✕ 按钮移除 -6. 测试移动端响应式布局 - ---- - -## 🚀 下一步计划 - -### 短期优化（1-2周） -- [ ] 导出对比结果（PDF/图片） -- [ ] 分享对比链接 -- [ ] 对比历史记录 -- [ ] 键盘快捷键支持 - -### 中期功能（1个月） -- [ ] 用户账号系统 -- [ ] 云端同步收藏 -- [ ] 自定义对比维度 -- [ ] 对比结果评分 - -### 长期规划（3个月） -- [ ] AI 推荐最优方案 -- [ ] 价格趋势对比图 -- [ ] 用户评价对比 -- [ ] 多语言支持 - ---- - -## 🎉 总结 - -### 实现成果 -✅ 完整实现分屏对比功能 -✅ 智能高亮最优方案 -✅ 响应式设计完美适配 -✅ 性能优化流畅体验 -✅ 详细文档完善支持 - -### 用户价值 -⭐ 提升选型效率 50%+ -⭐ 降低决策时间 60%+ -⭐ 增强用户体验 80%+ -⭐ 提高转化率 30%+ - -### 技术质量 -🏆 代码规范清晰 -🏆 性能优化到位 -🏆 兼容性良好 -🏆 可维护性强 - ---- - -**开发者**：Claude Sonnet 4.5 -**实现日期**：2026-02-09 -**版本**：v3.0 Comparison - -🎊 **分屏对比功能实现完成！** diff --git a/LIST_COMPARISON.md b/LIST_COMPARISON.md deleted file mode 100644 index 96a3281..0000000 --- a/LIST_COMPARISON.md +++ /dev/null @@ -1,430 +0,0 @@ -# 📋 VPS Price - 列表模式对比功能 - -## ✨ v3.3 List Comparison - -### 实现时间 -**2026-02-09** - ---- - -## 🎯 设计理念 - -### 用户需求 -> "优化价格比对界面，我希望是像左侧vps列表一样的列表，然后对比价格整个模块能收起来，不是单个收起来" - -### 解决方案 -**整体可折叠的表格列表**： -- ✅ 像左侧 VPS 列表一样的表格样式 -- ✅ 整个对比模块可以收起/展开 -- ✅ 清晰的表头和数据行 -- ✅ 行悬停高亮效果 -- ✅ 紧凑的数据展示 - ---- - -## 🚀 核心功能 - -### 1. 整体可折叠 🔽 - -**设计特点** -- 整个对比面板可以收起/展开 -- 点击"收起对比"按钮折叠 -- 收起后显示"展开对比 (N)" -- 按钮文字和图标动态切换 - -**视觉示例** -``` -┌─────────────────────────────────────────┐ -│ 📋 方案对比 [▼ 收起对比] [✕] │ ← 展开状态 -├─────────────────────────────────────────┤ -│ ┌─────────────────────────────────────┐ │ -│ │ 厂商 │ 配置 │ CPU │ 内存 │ 价格 │ │ │ -│ ├─────────────────────────────────────┤ │ -│ │ 阿里云 │ 2核4G │ 2 │ 4GB │ ¥88 │ │ │ -│ │ 腾讯云 │ 2核4G │ 2 │ 4GB │ ¥95 │ │ │ -│ └─────────────────────────────────────┘ │ -└─────────────────────────────────────────┘ - -┌─────────────────────────────────────────┐ -│ 📋 方案对比 [▶ 展开对比 (2)] [✕] │ ← 收起状态 -└─────────────────────────────────────────┘ -``` - ---- - -### 2. 表格列表样式 📊 - -**显示内容** -- **厂商**：阿里云、腾讯云等（加粗高亮） -- **配置**：2核4G香港 -- **vCPU**：2 核 -- **内存**：4 GB -- **存储**：40 GB -- **带宽**：5 Mbps -- **流量**：不限 -- **区域**：中国香港 -- **价格**：¥88（绿色高亮） -- **操作**：访问、移除 - -**优势** -- 像左侧 VPS 列表一样的布局 -- 清晰的表头和数据行 -- 一目了然的对比信息 -- 紧凑高效的数据展示 - ---- - -### 3. 行悬停高亮 🎨 - -**交互方式** -- 鼠标悬停在表格行上 -- 整行背景色变化 -- 平滑过渡动画（150ms） - -**视觉效果** -``` -┌─────────────────────────────────────────┐ -│ 阿里云 │ 2核4G │ 2 │ 4GB │ ¥88 │ [访问] │ ← 普通状态 -├─────────────────────────────────────────┤ -│ 腾讯云 │ 2核4G │ 2 │ 4GB │ ¥95 │ [访问] │ ← 悬停高亮 -├─────────────────────────────────────────┤ -│ Vultr │ 2核4G │ 2 │ 4GB │ ¥78 │ [访问] │ ← 普通状态 -└─────────────────────────────────────────┘ -``` - ---- - -### 4. 快速操作 ⚡ - -**操作按钮** -- **访问官网**：跳转到厂商官网 -- **移除对比**：从对比列表移除 -- **清空所有**：清空所有对比方案 - -**按钮位置** -- 访问按钮：每行右侧 -- 移除按钮：每行最右侧 -- 清空按钮：标题栏右侧 - ---- - -### 5. 响应式设计 📱 - -**桌面端（> 768px）** -- 完整表格显示所有列 -- 横向操作按钮 -- 宽松的间距 - -**移动端（< 768px）** -- 纵向操作按钮 -- 紧凑的间距 -- 优化的字体大小 - -**小屏幕（< 640px）** -- 隐藏带宽和流量列 -- 更小的字体 -- 最小化间距 - ---- - -## 📖 使用指南 - -### 基础操作 - -#### 1. 添加对比方案 -``` -1. 在左侧表格点击星标 ☆ -2. 右侧对比面板显示表格 -3. 默认状态：展开 -``` - -#### 2. 收起对比面板 -``` -1. 点击"收起对比"按钮 -2. 对比面板折叠 -3. 按钮变为"展开对比 (N)" -``` - -#### 3. 展开对比面板 -``` -1. 点击"展开对比 (N)"按钮 -2. 对比面板展开 -3. 显示完整表格 -``` - -#### 4. 查看详情 -``` -1. 鼠标悬停在表格行上 -2. 整行高亮显示 -3. 查看完整信息 -``` - -#### 5. 访问官网 -``` -1. 点击行右侧的"访问"按钮 -2. 新标签页打开官网 -``` - -#### 6. 移除方案 -``` -方法 1：点击行右侧的 ✕ 按钮 -方法 2：点击左侧表格的星标 ★ -``` - -#### 7. 清空所有 -``` -点击标题栏右侧的 ✕ 按钮 -``` - ---- - -## 🎨 视觉设计 - -### 布局结构 -``` -┌─────────────────────────────────────────┐ -│ 📋 方案对比 [▼ 收起对比] [✕] │ ← 标题栏 -├─────────────────────────────────────────┤ -│ ┌─────────────────────────────────────┐ │ -│ │ 表头行 │ │ ← 表头 -│ ├─────────────────────────────────────┤ │ -│ │ 数据行 1 │ │ ← 数据 -│ │ 数据行 2 │ │ -│ │ 数据行 3 │ │ -│ └─────────────────────────────────────┘ │ -└─────────────────────────────────────────┘ -``` - -### 颜色方案 -```css -/* 表头背景 */ ---bg-elevated: #F1F5F9 - -/* 行悬停 */ ---bg-elevated: #F1F5F9 - -/* 边框 */ ---border: #E2E8F0 - -/* 厂商名称 */ ---accent: #0369A1 - -/* 价格 */ ---green: #059669 - -/* 按钮悬停 */ ---accent-dark: #075985 -``` - -### 动画效果 -```css -/* 行悬停动画 */ -transition: background-color 0.15s; - -/* 按钮悬停 */ -transition: all 0.2s; -transform: translateY(-1px); - -/* 折叠动画 */ -display: none; /* 收起状态 */ -``` - ---- - -## 💻 技术实现 - -### 核心数据结构 -```javascript -var isComparisonExpanded = true; // 对比面板展开状态 - -// 切换展开状态 -function toggleComparisonPanel() { - isComparisonExpanded = !isComparisonExpanded; - updateComparison(); -} -``` - -### 表格渲染逻辑 -```javascript -function renderComparisonTable() { - var html = ''; - - // 表头 - html += ''; - html += '...'; - html += ''; - - // 表体 - html += ''; - comparisonPlans.forEach(function(plan) { - html += ''; - html += ''; - // ... - html += ''; - }); - html += '
厂商配置
' + plan.provider + '
'; - - return html; -} -``` - -### 折叠控制 -```javascript -function updateComparison() { - var panel = document.getElementById('comparison-panel'); - var toggleBtn = document.getElementById('btn-toggle-comparison'); - - if (isComparisonExpanded) { - panel.classList.remove('collapsed'); - toggleBtn.innerHTML = '▼ 收起对比'; - } else { - panel.classList.add('collapsed'); - toggleBtn.innerHTML = '▶ 展开对比 (' + count + ')'; - } -} -``` - -### CSS 折叠实现 -```css -/* 默认展开 */ -.comparison-content { - display: block; -} - -/* 收起状态 */ -.comparison-panel.collapsed .comparison-content { - display: none; -} -``` - ---- - -## 📊 性能优化 - -### 已实施 -- ✅ 简单的 display 切换（无动画开销） -- ✅ 事件委托减少监听器 -- ✅ 按需渲染表格内容 -- ✅ CSS transform 硬件加速 - -### 性能指标 -- 折叠/展开：< 10ms -- 表格渲染：< 50ms -- 行悬停响应：< 20ms - ---- - -## 🎯 使用场景 - -### 场景 1：快速对比价格 -``` -1. 收藏 2-3 个方案 -2. 查看表格对比价格 -3. 选择最优方案 -``` - -### 场景 2：节省屏幕空间 -``` -1. 收起对比面板 -2. 专注浏览左侧列表 -3. 需要时再展开对比 -``` - -### 场景 3：详细查看配置 -``` -1. 展开对比面板 -2. 鼠标悬停查看详情 -3. 点击访问官网 -``` - ---- - -## 📱 响应式设计 - -### 桌面端（> 768px） -- 表格：10列完整显示 -- 操作按钮：横向排列 -- 间距：宽松舒适 - -### 移动端（< 768px） -- 表格：自适应宽度 -- 操作按钮：纵向排列 -- 间距：紧凑高效 - -### 小屏幕（< 640px） -- 表格：隐藏带宽和流量列 -- 字体：更小的尺寸 -- 间距：最小化 - ---- - -## 📁 文件变更 - -### 新增文件 -``` -static/js/main-comparison-list.js (25 KB, 520 行) -LIST_COMPARISON.md (本文件) -test_list_comparison.sh (测试脚本) -``` - -### 修改文件 -``` -static/css/style.css (新增 200+ 行样式) -templates/index.html (添加折叠按钮，更新 JS 引用) -``` - -### 备份文件 -``` -static/js/main-comparison-table.js (v3.2 表格版) -static/js/main-comparison-enhanced.js (v3.1 增强版) -``` - ---- - -## 🎉 功能对比 - -### v3.2 → v3.3 - -| 功能 | v3.2 表格版 | v3.3 列表版 | -|------|------------|------------| -| 分屏布局 | ✅ | ✅ | -| 实时对比 | ✅ | ✅ | -| 智能高亮 | ✅ | ✅ | -| 可折叠布局 | ✅ 单个行 | ✅ 整体面板 | -| 表格样式 | ❌ | ✅ | -| 行悬停高亮 | ❌ | ✅ | -| 快速预览 | ✅ | ✅ | -| 紧凑展示 | ✅ | ✅ | - ---- - -## 🚀 立即体验 - -### 访问地址 -``` -http://127.0.0.1:5001 -``` - -### 强制刷新 -``` -Mac: Cmd + Shift + R -Windows: Ctrl + Shift + R -``` - -### 测试步骤 -1. ⭐ 点击 2-3 个方案的星标 -2. 👀 查看右侧对比面板（表格模式） -3. 🔽 点击"收起对比"按钮 -4. 🔼 点击"展开对比 (N)"按钮 -5. 🖱️ 鼠标悬停在表格行上查看高亮 -6. 🔗 点击"访问"按钮测试跳转 -7. ❌ 点击"✕"按钮移除单个方案 -8. 🗑️ 点击右上角"✕"清空所有对比 - ---- - -**开发者**：Claude Sonnet 4.5 -**版本**：v3.3 List Comparison -**实现日期**：2026-02-09 - -🎊 **整体折叠，表格清晰！** diff --git a/QUICK_START.md b/QUICK_START.md deleted file mode 100644 index abca6ab..0000000 --- a/QUICK_START.md +++ /dev/null @@ -1,191 +0,0 @@ -# 🚀 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 - -🎉 **享受全新的对比体验！** diff --git a/README.md b/README.md deleted file mode 100644 index bf17230..0000000 --- a/README.md +++ /dev/null @@ -1,195 +0,0 @@ -# 云服务器价格对比 (VPS Price) - -云服务器 VPS 价格对比网站：支持后台手动添加/编辑数据、广告位（Google AdSense）、SEO 优化、每条数据跳转官网。 - -## 功能 - -- **前台**：多厂商 VPS 方案对比表，按厂商/区域/内存筛选，人民币/美元切换，每条可点击「官网」跳转 -- **后台**：登录后添加、编辑、删除云服务器方案，支持填写官网链接 -- **广告位**：页头、表格上方、页脚三处占位，可接入 Google AdSense -- **SEO**：meta 描述/关键词、canonical、Open Graph、sitemap.xml、robots.txt、JSON-LD 结构化数据 - -## 运行 - -```bash -# 安装依赖 -pip install -r requirements.txt - -# 首次运行：初始化数据库并导入示例数据 -python init_db.py - -# 开发时直接跑 -python app.py -# 或 -python main.py -``` - -- 前台： -- 后台：（默认密码见下方环境变量） - -### 生产环境：Gunicorn 后台常驻（Ubuntu systemd） - -让 gunicorn 一直在后台运行，断线自启、开机自启： - -**1. 安装 gunicorn** -```bash -cd /opt/vps_price # 或你的项目目录 -python3 -m venv venv -source venv/bin/activate -pip install -r requirements.txt -pip install gunicorn -``` - -**2. 创建 systemd 服务** -```bash -sudo nano /etc/systemd/system/vps_price.service -``` - -粘贴下面内容，**把 `/opt/vps_price` 和 `/opt/vps_price/venv` 改成你实际的项目路径**（若用 root 跑可把 `User=www-data` 改为 `User=root`）： - -```ini -[Unit] -Description=VPS Price Gunicorn -After=network.target - -[Service] -Type=notify -User=www-data -Group=www-data -WorkingDirectory=/opt/vps_price -Environment="PATH=/opt/vps_price/venv/bin" -ExecStart=/opt/vps_price/venv/bin/gunicorn -w 4 -b 127.0.0.1:5001 app:app -ExecReload=/bin/kill -s HUP $MAINPID -Restart=always -RestartSec=3 - -[Install] -WantedBy=multi-user.target -``` - -**3. 启用并启动** -```bash -sudo systemctl daemon-reload -sudo systemctl enable vps_price -sudo systemctl start vps_price -sudo systemctl status vps_price -``` - -之后 gunicorn 会一直后台运行，重启服务器也会自动起来。常用命令： -- 查看状态：`sudo systemctl status vps_price` -- 重启：`sudo systemctl restart vps_price` -- 看日志：`journalctl -u vps_price -f` - -## 环境变量（可选） - -| 变量 | 说明 | 默认 | -|------|------|------| -| `ADMIN_PASSWORD` | 后台登录密码 | `admin123` | -| `SECRET_KEY` | Flask 会话密钥 | 开发用固定值 | -| `SITE_URL` | 站点完整 URL（SEO、sitemap） | `https://example.com` | -| `DB_HOST` | MySQL 主机 | `199.168.137.123` | -| `DB_PORT` | MySQL 端口 | `3309` | -| `DB_USER` | MySQL 用户名 | `vps` | -| `DB_NAME` | MySQL 数据库名 | `vps` | -| `DB_PASSWORD` | MySQL 密码 | （见 config.py） | -| `DATABASE_URL` | 完整数据库连接串（若设置则优先于上述 DB_*） | 由 DB_* 拼成 MySQL URI | - -生产环境请务必设置 `ADMIN_PASSWORD`、`SECRET_KEY`、`SITE_URL`，并妥善保管 `DB_PASSWORD`。 - -当前默认站点域名：`https://vps.ddrwode.cn`（可通过环境变量 `SITE_URL` 覆盖）。 - -### Ubuntu：Nginx + HTTPS（Let's Encrypt） - -在 **Ubuntu 服务器**上按顺序执行即可为 `vps.ddrwode.cn` 启用 HTTPS。 - -**1. 安装 Nginx 和 Certbot** - -```bash -sudo apt update -sudo apt install nginx certbot python3-certbot-nginx -y -sudo systemctl enable nginx -sudo systemctl start nginx -``` - -**2. 先写 Nginx 配置（只开 80，方便 Certbot 验证域名）** - -```bash -sudo nano /etc/nginx/sites-available/vps.ddrwode.cn -``` - -写入（确保本机 Flask/gunicorn 已监听 5001 端口）： - -```nginx -server { - listen 80; - server_name vps.ddrwode.cn; - location / { - proxy_pass http://127.0.0.1:5001; - proxy_set_header Host $host; - proxy_set_header X-Real-IP $remote_addr; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Proto $scheme; - } -} -``` - -保存后启用并检查、重载： - -```bash -sudo ln -sf /etc/nginx/sites-available/vps.ddrwode.cn /etc/nginx/sites-enabled/ -sudo nginx -t -sudo systemctl reload nginx -``` - -**3. 申请 HTTPS 证书（自动改 Nginx 为 443）** - -```bash -sudo certbot --nginx -d vps.ddrwode.cn -``` - -按提示输入邮箱、同意条款；选「重定向 HTTP 到 HTTPS」即可。Certbot 会自动加上 443 和证书路径。 - -**4. 确认访问** - -- 打开：`https://vps.ddrwode.cn` -- 证书会自动续期（`certbot renew`），可加定时任务：`sudo certbot renew --dry-run` - -项目根目录下的 `deploy/nginx-vps.ddrwode.cn.conf` 为上述配置的参考副本，便于你复制到服务器。 - -## 接入 Google 广告 - -1. 在 [Google AdSense](https://www.google.com/adsense/) 注册并获取广告代码。 -2. 打开模板 `templates/index.html`，找到三个 `ad-slot` 区域（`id="ad-slot-1"`、`ad-slot-2`、`ad-slot-3`）。 -3. 将注释中的示例替换为你的 AdSense 代码，或把获得的 `