AI 实时交易辅助系统 — 框架与 UI 设计

日期： 2026-07-21
阶段： Phase 1 — 框架搭建 + UI 布局（Mock 数据）
状态： 已口头确认，待书面复核

1. 背景与目标

个人投资者在期货等高频场景中易受情绪影响。本系统提供行情、深度、新闻、机构持仓与 AI 操作建议的统一界面，降低非理性交易。

本阶段目标： 用 Vue3 搭好可运行的单页布局与组件骨架，数据全部写死；真实数据源与 DeepSeek 调用后续接入。

2. 已确认决策

项	选择
主题	统一浅色
AI 建议入口	底部可折叠抽屉（默认收起）
页面结构	单页分区滚动：行情 → 新闻 → 持仓
架构风格	布局壳 + 业务模块组件 + mock 数据层
技术栈	Vue 3、Vite 7、Element Plus、Pinia、ECharts

3. 信息架构与布局

┌──────────────────────────────────────────────────────────┐
│ AppHeader：品种名 / 代码 / 现价·涨跌 / 休市状态 / 设置按钮   │
├────────────────────────────────┬─────────────────────────┤
│ QuoteSection                   │ MarketDepthSidebar        │
│  · 报价统计网格                 │  · 买卖力度条             │
│  · 分时/五日/日K/周K/月K Tab    │  · 五档盘口               │
│  · 主图（分时或 K 线）+ 成交量   │  · 分时成交明细           │
├────────────────────────────────┴─────────────────────────┤
│ NewsSection：相关新闻列表（来源·时间·标题·摘要·原文链接）     │
├──────────────────────────────────────────────────────────┤
│ PositionSection：总持仓 | 成交量 | 净持仓                   │
│  · 左：多单前 20（圆环图 + 表格）  右：空单前 20（同构）      │
├──────────────────────────────────────────────────────────┤
│ AiAdviceDrawer（固定底栏）：展开后显示建议/理由/刷新          │
└──────────────────────────────────────────────────────────┘
│ SettingsDialog（弹窗）：DeepSeek API Key、额外关键词         │

中文市场惯例：红涨绿跌。
持仓页按参考图做浅色改版（多单标题偏红、空单标题偏青，圆环图保留多色段）。

4. 目录结构

src/
  main.js
  App.vue
  styles/
    variables.css          # 主题色、涨跌色
    global.css
  layout/
    AppLayout.vue          # 滚动主区 + 底栏抽屉槽位
  components/
    header/
      AppHeader.vue
      SettingsDialog.vue
    quote/
      QuoteStats.vue
      ChartPanel.vue
      OrderBook.vue
      TradeTape.vue
    news/
      NewsList.vue
      NewsItem.vue
    position/
      PositionPanel.vue
      PositionDonut.vue
      PositionTable.vue
    ai/
      AiAdviceDrawer.vue
  composables/
    useQuote.js            # 先读 mock，日后换 API
    useNews.js
    usePositions.js
    useAiAdvice.js
  stores/
    settings.js            # apiKey、keywords（localStorage）
  mocks/
    quote.js
    news.js
    positions.js
    aiAdvice.js

5. 模块职责

5.1 行情区

展示合约名称、最新价、涨跌额/幅、开高低、持仓量、内外盘等（mock）。
ChartPanel：Element Plus Tabs 切换周期；ECharts 渲染分时面积图或蜡烛图 + 成交量柱。
右侧：力度条、卖5–买5、成交明细列表。

5.2 新闻区

列表项：来源 + 时间、标题、摘要、可选「查看原文」。
数据来自 mocks/news.js。

5.3 机构持仓

Tab：总持仓 / 成交量 / 净持仓（首版仅总持仓有完整 mock，其余 Tab 显示同结构占位或同一套 mock 并标注）。
双列：圆环图 + 前 20 名表格（名次、会员简称、数量、增减）。

5.4 AI 建议抽屉

底栏条：摘要一行 +「展开 / 一键获取建议」。
展开：建议方向（买/卖/观望）、置信度占位、简要理由列表、时间戳。
点击刷新时：若未配置 Key，提示打开设置；有 Key 时本阶段仍返回 mock 文案（真实调用后续）。

5.5 设置

DeepSeek API Key（密码输入框，存 Pinia + localStorage）。
额外关键词（多行或标签输入，供后续新闻/分析过滤）。
不提交到仓库的密钥；仅浏览器本地。

6. Mock 数据约定

默认品种：玻璃 2609 / FG609（与参考图一致，可改）。
分时点、五档、成交、新闻、持仓、AI 建议均静态 JSON/JS 模块。
composable 对外统一返回 { data, loading, error, refresh }，便于日后替换实现。

7. 非目标（本阶段不做）

真实行情 / WebSocket / 交易所接口
真实新闻、持仓数据源
DeepSeek HTTP 调用与流式输出
下单、账户、登录
深色主题切换、移动端专项适配（桌面优先，基础可用即可）

8. 验收标准

npm install && npm run dev 可启动，无控制台致命错误。
单页可滚动看到行情、新闻、持仓三块，视觉为统一浅色。
分时/K 线 Tab 可切换，图表有 mock 曲线/蜡烛。
五档与成交明细、新闻列表、持仓双列图表明示完整。
底部 AI 抽屉可展开/收起，刷新有反馈（mock）。
设置可保存 API Key 与关键词，刷新页面后仍在。

9. 后续阶段（备忘）

Phase 2：接入行情与深度数据
Phase 3：新闻 / 机构持仓 API
Phase 4：DeepSeek 实调与关键词增强分析

6.1 KiB Raw Blame History Unescape Escape