260 lines
8.5 KiB
Markdown
260 lines
8.5 KiB
Markdown
# AI 交易辅助系统 Phase1 UI 框架 Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 搭建 Vue3 + Vite7 + Element Plus 单页交易辅助 UI（浅色），含行情/新闻/持仓/AI 抽屉/设置，数据全部 mock。
|
||
|
||
**Architecture:** `AppLayout` 滚动主区 + 固定底栏 AI 抽屉；业务拆为 header/quote/news/position/ai 组件；composable 读 `src/mocks/*`，对外 `{ data, loading, error, refresh }`；设置用 Pinia + localStorage。
|
||
|
||
**Tech Stack:** Vue 3、Vite 7、Element Plus、Pinia、ECharts、vue-echarts
|
||
|
||
**Spec:** `docs/superpowers/specs/2026-07-21-ai-trade-assistant-design.md`
|
||
|
||
---
|
||
|
||
## File Structure
|
||
|
||
```
|
||
package.json, vite.config.js, index.html
|
||
src/main.js, src/App.vue
|
||
src/styles/variables.css, src/styles/global.css
|
||
src/layout/AppLayout.vue
|
||
src/components/header/AppHeader.vue, SettingsDialog.vue
|
||
src/components/quote/QuoteStats.vue, ChartPanel.vue, OrderBook.vue, TradeTape.vue
|
||
src/components/news/NewsList.vue, NewsItem.vue
|
||
src/components/position/PositionPanel.vue, PositionDonut.vue, PositionTable.vue
|
||
src/components/ai/AiAdviceDrawer.vue
|
||
src/composables/useQuote.js, useNews.js, usePositions.js, useAiAdvice.js
|
||
src/stores/settings.js
|
||
src/mocks/quote.js, news.js, positions.js, aiAdvice.js
|
||
README.md
|
||
```
|
||
|
||
---
|
||
|
||
### Task 1: Scaffold Vite Vue 项目并安装依赖
|
||
|
||
**Files:**
|
||
- Create: `package.json`, `vite.config.js`, `index.html`, `src/main.js`（由 create-vite 生成后改）
|
||
- Modify: `README.md`
|
||
|
||
- [ ] **Step 1: 在仓库根目录用 create-vite 初始化 Vue 模板**
|
||
|
||
在 PowerShell、仓库根目录（已有 README，允许非空）：
|
||
|
||
```powershell
|
||
cd e:\Gitea\ai_trade_assistance
|
||
npm create vite@latest . -- --template vue
|
||
```
|
||
|
||
若提示目录非空，确认继续。期望生成 `package.json`、`vite.config.js`、`src/` 等。
|
||
|
||
- [ ] **Step 2: 安装运行时依赖**
|
||
|
||
```powershell
|
||
npm install
|
||
npm install element-plus @element-plus/icons-vue pinia echarts vue-echarts
|
||
```
|
||
|
||
确认 `package.json` 中 `vite` 主版本为 7.x（若为 6.x，执行 `npm install vite@7`）。
|
||
|
||
- [ ] **Step 3: 配置 main.js 接入 Element Plus + Pinia**
|
||
|
||
`src/main.js`:
|
||
|
||
```js
|
||
import { createApp } from 'vue'
|
||
import { createPinia } from 'pinia'
|
||
import ElementPlus from 'element-plus'
|
||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||
import 'element-plus/dist/index.css'
|
||
import './styles/variables.css'
|
||
import './styles/global.css'
|
||
import App from './App.vue'
|
||
|
||
const app = createApp(App)
|
||
app.use(createPinia())
|
||
app.use(ElementPlus, { locale: zhCn })
|
||
app.mount('#app')
|
||
```
|
||
|
||
- [ ] **Step 4: 验证能启动**
|
||
|
||
```powershell
|
||
npm run dev
|
||
```
|
||
|
||
期望：终端出现本地 URL，浏览器可打开默认 Vite 页。
|
||
|
||
- [ ] **Step 5: Commit（仅当用户明确要求时执行；本仓库默认跳过）**
|
||
|
||
---
|
||
|
||
### Task 2: 全局样式与 AppLayout 壳
|
||
|
||
**Files:**
|
||
- Create: `src/styles/variables.css`, `src/styles/global.css`, `src/layout/AppLayout.vue`
|
||
- Modify: `src/App.vue`
|
||
|
||
- [ ] **Step 1: 写入主题变量（浅色、红涨绿跌）**
|
||
|
||
`src/styles/variables.css`:
|
||
|
||
```css
|
||
:root {
|
||
--bg-page: #f5f6f8;
|
||
--bg-card: #ffffff;
|
||
--border: #e6e8eb;
|
||
--text-primary: #1f2329;
|
||
--text-secondary: #8a9199;
|
||
--up: #e54545;
|
||
--down: #12b37b;
|
||
--accent: #1677ff;
|
||
--header-height: 56px;
|
||
--ai-bar-height: 48px;
|
||
}
|
||
```
|
||
|
||
`src/styles/global.css`: 重置 body 背景 `--bg-page`、字体、链接色；`.price-up { color: var(--up) }` / `.price-down { color: var(--down) }`。
|
||
|
||
- [ ] **Step 2: AppLayout — 滚动主区 + 底栏插槽**
|
||
|
||
`src/layout/AppLayout.vue`：顶部 `#header` 插槽，中间 `.main-scroll` 放默认插槽，底部固定 `.ai-footer` 放 `#ai` 插槽；主区 `padding-bottom` 预留 AI 栏高度。
|
||
|
||
- [ ] **Step 3: App.vue 挂载壳（占位组件可先用空 section）**
|
||
|
||
```vue
|
||
<template>
|
||
<AppLayout>
|
||
<template #header><AppHeader /></template>
|
||
<!-- quote / news / position sections -->
|
||
<template #ai><AiAdviceDrawer /></template>
|
||
</AppLayout>
|
||
</template>
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Mock 数据与 Settings Store
|
||
|
||
**Files:**
|
||
- Create: `src/mocks/quote.js`, `src/mocks/news.js`, `src/mocks/positions.js`, `src/mocks/aiAdvice.js`, `src/stores/settings.js`
|
||
- Create: `src/composables/useQuote.js`, `useNews.js`, `usePositions.js`, `useAiAdvice.js`
|
||
|
||
- [ ] **Step 1: quote mock** — 合约 `玻璃2609`/`FG609`，最新价 936、涨跌 -13/-1.37%，开高低结算持仓量内外盘；`intraday` 点数数组；`orderBook` 卖5–买1；`trades` 若干条。
|
||
|
||
- [ ] **Step 2: news / positions / aiAdvice mock** — 新闻 5 条（source/time/title/summary/url）；持仓多空各 20 名含 qty/change/percent；AI 建议含 action/confidence/reasons/updatedAt。
|
||
|
||
- [ ] **Step 3: settings store**
|
||
|
||
```js
|
||
// src/stores/settings.js
|
||
import { defineStore } from 'pinia'
|
||
import { ref, watch } from 'vue'
|
||
|
||
const KEY = 'ai-trade-settings'
|
||
|
||
export const useSettingsStore = defineStore('settings', () => {
|
||
const saved = JSON.parse(localStorage.getItem(KEY) || '{}')
|
||
const apiKey = ref(saved.apiKey || '')
|
||
const keywords = ref(saved.keywords || '')
|
||
watch([apiKey, keywords], () => {
|
||
localStorage.setItem(KEY, JSON.stringify({ apiKey: apiKey.value, keywords: keywords.value }))
|
||
})
|
||
return { apiKey, keywords }
|
||
})
|
||
```
|
||
|
||
- [ ] **Step 4: composables** — 各 `useX` 返回 `data`（ref mock）、`loading`、`error`、`refresh`（模拟 300ms delay 后重置 mock）。
|
||
|
||
---
|
||
|
||
### Task 4: Header + SettingsDialog
|
||
|
||
**Files:**
|
||
- Create: `src/components/header/AppHeader.vue`, `src/components/header/SettingsDialog.vue`
|
||
|
||
- [ ] **Step 1: AppHeader** — 左：名称+代码；中：现价与涨跌（红绿 class）；右：设置按钮打开 dialog。
|
||
|
||
- [ ] **Step 2: SettingsDialog** — `el-dialog`；`el-input` type=password 绑定 apiKey；`el-input` type=textarea 绑定 keywords；保存即关（store 已 watch 持久化）。
|
||
|
||
---
|
||
|
||
### Task 5: 行情区（统计、图表、盘口、成交）
|
||
|
||
**Files:**
|
||
- Create: `src/components/quote/QuoteStats.vue`, `ChartPanel.vue`, `OrderBook.vue`, `TradeTape.vue`
|
||
- Modify: `src/App.vue` 组装行情两栏
|
||
|
||
- [ ] **Step 1: QuoteStats** — 多列网格展示开/高/低/昨结/持仓/量/内外盘等。
|
||
|
||
- [ ] **Step 2: ChartPanel** — `el-tabs`：分时/五日/日K/周K/月K；分时用 ECharts line+area + 成交量 bar；K 线 tab 用 candle + volume（可用简化 mock OHLC）。注册 `CanvasRenderer`、`LineChart`、`BarChart`、`CandlestickChart`。
|
||
|
||
- [ ] **Step 3: OrderBook** — 买卖力度条（红绿 flex 比例）；卖5→卖1、买1→买5。
|
||
|
||
- [ ] **Step 4: TradeTape** — 时间/价/量+方向（B/S 着色）。
|
||
|
||
- [ ] **Step 5: 在 App 中布局** — 左 70% 统计+图，右 30% 盘口+成交；卡片白底圆角边框。
|
||
|
||
---
|
||
|
||
### Task 6: 新闻区
|
||
|
||
**Files:**
|
||
- Create: `src/components/news/NewsList.vue`, `NewsItem.vue`
|
||
|
||
- [ ] **Step 1: NewsItem** — 上行 source+time 与「查看原文」；标题；摘要（多行省略）。
|
||
|
||
- [ ] **Step 2: NewsList** — 标题「相关新闻」+ `v-for` 渲染列表。
|
||
|
||
---
|
||
|
||
### Task 7: 机构持仓区（浅色）
|
||
|
||
**Files:**
|
||
- Create: `src/components/position/PositionPanel.vue`, `PositionDonut.vue`, `PositionTable.vue`
|
||
|
||
- [ ] **Step 1: PositionDonut** — vue-echarts pie（roseType 或标准 doughnut），legend 右侧。
|
||
|
||
- [ ] **Step 2: PositionTable** — 名次/会员简称/数量/增减（正红负青）。
|
||
|
||
- [ ] **Step 3: PositionPanel** — `el-tabs` 总持仓/成交量/净持仓；双列「多单前20」「空单前20」；非总持仓 Tab 复用同结构 mock 并在角标提示「占位数据」。
|
||
|
||
---
|
||
|
||
### Task 8: AI 抽屉 + README 收尾
|
||
|
||
**Files:**
|
||
- Create: `src/components/ai/AiAdviceDrawer.vue`
|
||
- Modify: `README.md`, `src/App.vue`
|
||
|
||
- [ ] **Step 1: AiAdviceDrawer** — 收起：一行摘要 + 展开/刷新；展开：方向、置信度、理由列表、时间；无 apiKey 时刷新用 `ElMessage.warning` 提示打开设置，仍可展示 mock。
|
||
|
||
- [ ] **Step 2: 更新 README** — 启动命令、技术栈、Phase1 范围说明。
|
||
|
||
- [ ] **Step 3: 全量验收**
|
||
|
||
```powershell
|
||
npm run build
|
||
npm run dev
|
||
```
|
||
|
||
对照 spec §8 验收清单逐项点检。
|
||
|
||
---
|
||
|
||
## Spec coverage (self-review)
|
||
|
||
| Spec 项 | Task |
|
||
|---|---|
|
||
| 浅色单页滚动 | 2, 5–7 |
|
||
| 行情+盘口+成交 | 3, 5 |
|
||
| 新闻 | 6 |
|
||
| 持仓双列浅色 | 7 |
|
||
| AI 底栏抽屉 | 8 |
|
||
| DeepSeek Key + 关键词 | 3, 4 |
|
||
| Mock composable | 3 |
|
||
| Vite7 + Vue3 + Element Plus | 1 |
|
||
|
||
无 TBD 占位；提交步骤遵循用户「未要求不 commit」规则。
|