# 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. 验收标准

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

---

## 9. 后续阶段（备忘）

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