gao/ljwx-stock

Fork 0

Files

T

bruno 34f81db95f new dashboard

2025-11-11 12:11:06 +01:00

8.0 KiB

Raw Permalink Blame History

AI 股票推荐 Dashboard V2 - 优化版

概述

这是一个 To-C 级别的 AI 股票推荐系统 Dashboard，采用深色护眼主题，具有高信息密度、强 AI 参与感和可解释性。

主要改进

🎨 视觉设计

深色护眼主题：使用 #0f172a 背景色，降低眼睛疲劳
AI 质感渐变：紫色 (#7c3aed) 到青色 (#22d3ee) 的渐变设计
玻璃拟态效果：半透明背景 + 背景模糊
流畅动画：200ms 过渡效果，提升交互体验

📊 信息架构

1. Hero 总览横幅

今日推荐数
市场热度 (0-1)
近7日命中率
策略收益 vs 沪深300
一键刷新按钮
策略切换下拉菜单

2. AI 市场脉搏 (4 卡片)

市场情绪：百分比 + 趋势 + 迷你折线图
行业热度榜：Top 5 行业 + 热度条形图
主力资金流：主力净流入 + 北向资金 + Sparkline
新闻/社媒情绪：正面/中性/负面占比条形图

3. 今日推荐卡片

每个卡片包含：

AI 徽章：标识 AI 推荐
收藏星标：支持加入自选
综合评分：0-100 分环形图
预期收益：百分比显示
置信度：模型信心度
信号标签：如"低估"、"RSI强势"、"黄金交叉"
迷你 K 线：近 30 日走势，标注高低点
风险徽章：估值分位、波动率等
悬浮理由：Hover 显示 3 条推荐理由 + "展开更多"按钮

4. 主题/策略分区

AI 综合：多维度平衡
低估精选：价值投资
动量趋势：短中期交易
稳健防守：低波动高分红

每个策略显示可解释的规则摘要 + Top 6 卡片

5. 风险雷达

市场/行业/个股三层预警
实时事件提示（如"今晚财报"、"高位放量"）
"AI 评估"按钮：点击获取影响强度分析

6. AI 投资顾问 Dock (右下角悬浮)

快捷问题：
- 解释推荐理由
- 对比股票
- 生成投资计划
- 回测策略
@引用功能：点击卡片自动填入上下文
证据锚点：每条回复显示数据来源 + 时间戳
打字动画：3 个跳动的圆点

组件清单

核心组件

frontend/src/components/
├── HeroSection.vue      # Hero 总览横幅
├── MarketPulse.vue      # AI 市场脉搏 (4 卡)
├── StockCard.vue        # 增强版股票卡片
└── AIDock.vue           # AI 投资顾问悬浮窗

页面

frontend/src/views/
├── DashboardV2.vue      # 新版主页面 (默认)
└── Dashboard.vue        # 旧版 (访问 /v1)

技术栈

Vue 3.3.4 - Composition API
Vite 5.0.2 - 构建工具
Vuex 4 - 状态管理
Vue Router 4 - 路由
原生 CSS - 无重型 UI 框架，完全自定义

CSS 变量体系

:root {
  /* 背景 */
  --bg: #0f172a;
  --card: #1e293b;
  --card-hover: #273548;

  /* 文本 */
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;

  /* 主色 */
  --pri: #7c3aed;
  --pri-light: #8b5cf6;
  --pri-dark: #6d28d9;
  --accent: #22d3ee;

  /* 语义色 */
  --up: #22c55e;      /* 上涨/正面 */
  --down: #ef4444;    /* 下跌/负面 */
  --warn: #f59e0b;    /* 警告 */
  --risk: #fb7185;    /* 风险 */

  /* 边框阴影 */
  --border: #334155;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 过渡 */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

数据格式

首页聚合数据

{
  "summary": {
    "todayPicks": 12,
    "marketHeat": 0.63,
    "winRate7d": 0.58,
    "alpha7d": 1.6
  },
  "pulse": {
    "sentiment": 0.54,
    "hotIndustries": [
      {"name":"银行","score":0.72},
      {"name":"煤炭","score":0.69}
    ],
    "fundFlow": {"main": 12.3, "north": 5.4},
    "newsMood": {"pos":0.61,"neg":0.18,"neu":0.21}
  },
  "picks": [
    {
      "symbol": "601988",
      "name": "中国银行",
      "industry": "银行",
      "score": 92,
      "expectedReturn": 7.6,
      "confidence": 94,
      "signals": ["低估", "RSI强势", "黄金交叉"],
      "riskBadges": ["估值分位低", "波动率低"],
      "sparkline": [5.4,5.2,5.6,5.8,5.7,5.9,6.1],
      "reasonBrief": [
        "PB 0.68 低于行业分位 20%",
        "资金净流入 3 日持续",
        "板块轮动至银行"
      ],
      "inWatchlist": false
    }
  ],
  "themes": {
    "comprehensive": [],
    "value": [],
    "momentum": [],
    "defensive": []
  },
  "risks": [
    {"level":"warn","text":"上证权重财报窗口期"},
    {"level":"risk","text":"北向资金连续3日净流出"}
  ]
}

启动项目

开发环境

cd frontend
npm install
npm run dev

访问 http://localhost:5173

生产构建

npm run build

页面路由

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

响应式设计

断点

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

移动端优化

Hero KPI 改为垂直堆叠
卡片网格改为单列
操作按钮改为全宽
导航菜单折叠

性能优化

已实现

✅ 骨架屏加载状态
✅ 组件懒加载 (路由级别)
✅ CSS 过渡优化 (GPU 加速)
✅ 图表轻量化 (SVG Sparkline)

待优化

⏳ 虚拟滚动 (长列表)
⏳ 图片懒加载
⏳ API 缓存策略
⏳ Service Worker (离线支持)

可访问性

✅ 色彩对比度 AA 级
✅ 键盘导航支持
✅ ARIA 标签
✅ 响应式字体

下一步计划

Phase 1 - 数据集成 (本周)

接入真实推荐 API
接入市场数据 API
完善 Mock Service

Phase 2 - AI 功能 (下周)

集成 Claude API
实现证据引用系统
添加回测功能
生成投资计划

Phase 3 - 高级功能 (2 周内)

股票详情抽屉 (多 Tab)
自选股管理
消息通知系统
用户偏好设置

Phase 4 - 优化打磨 (1 个月内)

性能优化 (LCP < 2.5s)
E2E 测试
埋点统计
多语言支持

目录结构

frontend/src/
├── components/
│   ├── HeroSection.vue       # Hero 横幅
│   ├── MarketPulse.vue       # 市场脉搏
│   ├── StockCard.vue         # 股票卡片
│   ├── AIDock.vue            # AI 顾问
│   └── AIAssistant.vue       # 旧版 AI 助手
├── views/
│   ├── DashboardV2.vue       # 新版主页 ⭐
│   ├── Dashboard.vue         # 旧版主页
│   ├── Analysis.vue          # 分析页
│   ├── Backtest.vue          # 回测页
│   └── Settings.vue          # 设置页
├── services/
│   └── api.js                # API 服务
├── store.js                  # Vuex 状态
├── router.js                 # 路由配置
├── App.vue                   # 根组件 (含主题变量)
└── main.js                   # 入口文件

贡献指南

Fork 项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

许可证

MIT License

联系方式

项目仓库: GitHub
问题反馈: Issues

版本: 2.0.0 最后更新: 2025-11-11 开发状态: 🚧 活跃开发中

截图预览

深色主题 + AI 质感

提示: 当前版本为 MVP (最小可行产品)，数据部分使用 Mock，后续会逐步接入真实 API。

8.0 KiB Raw Permalink Blame History Unescape Escape