161 lines
6.1 KiB
Markdown
161 lines
6.1 KiB
Markdown
# 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 实调与关键词增强分析
|