ljwx-stock/DASHBOARD_V2_QUICKSTART.md

Dashboard V2 快速启动指南

🎉 新版 Dashboard V2 已完成！

✅ 重构完成的功能

视觉系统

• ✅ 深色护眼主题 (#0f172a 背景)
• ✅ AI 质感紫青渐变 (#7c3aed → #22d3ee)
• ✅ 全局 CSS 变量体系
• ✅ 玻璃拟态效果

核心组件 (5 个)

1. HeroSection.vue - Hero 总览横幅
2. MarketPulse.vue - AI 市场脉搏
3. StockCard.vue - 增强版股票卡片
4. AIDock.vue - AI 投资顾问
5. DashboardV2.vue - 主页面

启动项目

方式 1: 本地开发

cd /root/work/stock/frontend
npm install  # 首次运行
npm run dev  # 启动开发服务器

访问: http://localhost:5173

方式 2: Docker (生产环境)

cd /root/work/stock
docker-compose up -d

访问: http://85.239.237.116:8090

页面路由

• / - 新版 Dashboard V2 ⭐
• /v1 - 旧版 Dashboard (对比参考)
• /analysis - 分析页面
• /backtest - 回测页面
• /settings - 设置页面

新增文件清单

frontend/src/
├── components/
│   ├── HeroSection.vue      ⭐ NEW
│   ├── MarketPulse.vue      ⭐ NEW
│   ├── StockCard.vue        ⭐ NEW
│   └── AIDock.vue           ⭐ NEW
├── views/
│   └── DashboardV2.vue      ⭐ NEW
├── App.vue                  ✏️ UPDATED (深色主题)
└── router.js                ✏️ UPDATED (新路由)

主要特性

🎨 深色护眼主题

--bg: #0f172a        /* 背景 */
--card: #1e293b      /* 卡片 */
--text: #e5e7eb      /* 文本 */
--pri: #7c3aed       /* 主色 */
--accent: #22d3ee    /* 强调色 */

📊 7 个核心区块

1. Hero 总览 - 4 个 KPI + 刷新 + 策略切换
2. AI 市场脉搏 - 4 卡实时数据
3. 今日推荐 - 股票卡片网格
4. 主题策略 - 4 个策略 Tab
5. 风险雷达 - 预警条 + AI 评估
6. AI 顾问 - 右下角悬浮
7. 错误提示 - Toast 通知

🤖 AI 参与感

• AI 徽章标识
• 综合评分 (0-100 环形图)
• 置信度显示
• 推荐理由 (Hover 显示)
• AI 对话 (快捷问题 + 证据引用)

📱 响应式设计

• ≥1280px: 4 列
• 1024-1279px: 3 列
• 640-1023px: 2 列
• <640px: 1 列

测试功能

1. 刷新推荐

点击 Hero 区域的"刷新推荐"按钮

2. 策略切换

使用策略下拉菜单切换:

• 综合推荐
• 低估优先
• 动量优先
• 稳健优先

3. 股票卡片

• Hover: 查看推荐理由
• 点击星标: 加入自选
• 点击卡片: 查看详情 (待开发)

4. AI 顾问

• 点击右下角机器人图标
• 尝试 4 个快捷问题:
  • 💡 解释推荐理由
  • ⚖️ 对比股票
  • 📊 生成投资计划
  • 🔄 回测策略

5. 主题策略

切换 Tab:

• AI 综合
• 低估精选
• 动量趋势
• 稳健防守

6. 风险雷达

点击"AI 评估"按钮

查看前端日志

# 查看后台运行的开发服务器日志
docker logs -f stock_frontend

# 或者本地开发时在终端查看

常见问题

Q1: 页面空白?

A:

1. 检查浏览器控制台 (F12)
2. 确保后端 API 正常运行: curl http://localhost:8001/health
3. 清除浏览器缓存

Q2: 没有推荐数据?

A:

1. 点击"刷新推荐"按钮
2. 检查 Network Tab 是否返回数据
3. 确认后端 API 有返回推荐: curl http://localhost:8001/api/recommendations

Q3: AI 顾问不回复?

A: 当前为 Mock 实现，1.5 秒后会自动返回模拟回复

Q4: 样式错乱?

A:

1. 确保 App.vue 的 CSS 变量已加载
2. 硬刷新浏览器 (Ctrl + Shift + R)
3. 检查控制台是否有 CSS 错误

性能指标

目标

• LCP (最大内容绘制): < 2.5s
• FID (首次输入延迟): < 100ms
• CLS (累积布局偏移): < 0.1

检查方式

# Chrome DevTools
# Lighthouse Tab → Generate report

开发工具

推荐 VS Code 插件

• Volar (Vue 3)
• ESLint
• Prettier
• Auto Rename Tag

调试技巧

// 在任意组件中
console.log('Props:', props)
console.log('State:', dashboardData.value)

下一步计划

本周

• 接入真实市场脉搏 API
• 完善股票详情抽屉 (多 Tab)
• 优化 AI 对话逻辑

下周

• 添加自选股功能
• 实现回测模块
• 性能优化 (虚拟滚动)

本月

• E2E 测试
• 埋点统计
• 用户手册

相关文档

• 📖 详细文档: DASHBOARD_V2_README.md
• 🚀 系统快速启动: QUICKSTART.md
• 🐛 问题反馈: GitHub Issues

技术栈

• Vue 3.3.4 - Composition API
• Vite 5.0.2 - 构建工具
• 原生 CSS - 无重型 UI 框架
• SVG - 图表绘制

版本信息

• Dashboard V2: 2.0.0
• 构建日期: 2025-11-11
• 开发状态: 🚧 活跃开发中

---

祝开发愉快！🚀

有问题随时查阅 DASHBOARD_V2_README.md 或提交 Issue。