justin
b73db1b193
- Introduce `productCode` for API submissions, differentiating it from `productCodeUnique`. - Remove `actualTradeDate` and `orderStatus` from the execution records table, adding `filledQty`, `filledAmount`, and `avgFilledPrice` instead. - Implement responsive design adjustments for the execution records display across devices. - Update internationalization files to reflect new column names and hints for table navigation. - Document changes in `IMPACT_ANALYSIS.md` and `TASK_SUMMARY.md` for clarity on the updates.
301 lines
12 KiB
Markdown
301 lines
12 KiB
Markdown
# TASK_SUMMARY
|
||
|
||
## 任务基本信息
|
||
|
||
- **任务名称**：实现定期投资页面（对齐 V5 demo）
|
||
- **相关项目**：schedule_invest_plan
|
||
- **改动类型**：功能新增
|
||
|
||
## 改动说明
|
||
|
||
- 首页改为定期投资：我的计划列表、创建表单（资产晶片搜索、开始日期、金额、间隔、结束日期/期数）、注意事项、确认弹窗、终止计划。
|
||
- 行为对齐 demo：必填校验、确认后再写入列表、新建状态为「已建立」、终止后状态为「已终止」。
|
||
- 三语文案（zh-TW / zh-CN / en-US）；语言与主题仍仅通过 URL `lang`/`theme` 控制。
|
||
- 视觉令牌对齐 demo 青绿主色与涨跌语义色；移动端计划列表使用卡片。
|
||
|
||
## 影响与风险
|
||
|
||
- 参见 `IMPACT_ANALYSIS.md`；无破坏性变更，风险低。
|
||
- 计划数据仅存 Pinia 内存，刷新页面恢复为示例一条。
|
||
|
||
## 测试与验证
|
||
|
||
- `npm run build`：通过。
|
||
- 浏览器：创建/重设/确认/终止、校验失败提示、深浅色与语言切换。
|
||
|
||
## 后续事项
|
||
|
||
- 对接真实计划查询/创建/终止 API（经 `src/api/http.ts`）。
|
||
- 资产搜索已对接 `getSimpleStockPage`（交易所 → `exchangeCodes`）；创建计划 API 待接。
|
||
|
||
---
|
||
|
||
## 补充：getSimpleStockPage 资产搜索
|
||
|
||
- 交易所下拉选中后请求标的；`exchangeCodes: [exchangeCode]`。
|
||
- 晶片搜索框防抖调用同一接口并传 `searchName`。
|
||
- 映射字段含 `productKey`、`productCodeUnique` 等，便于后续创建计划入参。
|
||
|
||
---
|
||
|
||
## 补充：交易所与资产同一行
|
||
|
||
- 创建表单在 `md+` 将交易所与资产晶片各占 12 列并排；`xs` 仍上下堆叠。
|
||
|
||
---
|
||
|
||
## 补充（顶栏与表单控件样式）
|
||
|
||
- 顶栏 `AppHeader`（含标题「投資計劃排期」）已从壳层移除。
|
||
- Element Plus 日期、下拉框 hover/focus 边框与背景对齐项目主色与 `--color-control-*`（见 `src/styles/element-plus-theme.scss`）。
|
||
|
||
---
|
||
|
||
## 补充：Token、代理与服务端多语言
|
||
|
||
- URL 参数 `token` 写入请求头 `token`（参考 Order-H5）；路由跳转保留 query（含 token）。
|
||
- 开发代理：`/base/*` → `getAllList` 等；`/trade/*` → `schedule-investment/exchanges` 等（目标 `192.168.3.233`，可改 `.env.development`）。
|
||
- 有 token 时启动加载 `getSystemI18nAllList`；组件内用 `useServiceI18n().si18n('I18N_ID')` 解析服务端文案。
|
||
- `getScheduleInvestmentExchanges()` 已封装，待业务页面对接。
|
||
- `npm run build` 通过。
|
||
|
||
## 补充：创建表单交易所下拉
|
||
|
||
- 在「資產」上方增加必填「交易所」下拉，接口 `POST /api/admin/exchange/getSelectItemList`；选项文案优先 `nameI18nId` + `useServiceI18n`。
|
||
- 未选择交易所时资产晶片选择器禁用；切换交易所清空已选资产。
|
||
- 开发环境新增 Vite 代理 `/api`。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
## 补充：URL accountId / clientId
|
||
|
||
- 入口 URL 需携带 `clientId`、`accountId`（与 `token`、`lang`、`theme` 同级 query）。
|
||
- 示例：`?token=xxx&clientId=2016410736418492416&accountId=2016410907965526016&lang=tw&theme=dark`（详见 `README.md`）
|
||
- 值仅存于 Pinia（来自 URL，不写 localStorage）；`useRouteWithPreferences().linkTo` 会保留 query。
|
||
- `src/api/http.ts` 对 POST 请求体自动合并 `clientId`、`accountId`（与 Order-H5 交易接口一致）。
|
||
|
||
## 补充：资产晶片单选与样式
|
||
|
||
- `AssetChipPicker` 限制为单资产；高度、边框、占位色与交易所等 `el-select`/`el-input` 一致。
|
||
- 未选交易所时禁用态显示 `recurring.pleaseSelect`，避免 disabled input 占位符发灰不一致。
|
||
|
||
---
|
||
|
||
## 补充：定期投资页文字加大
|
||
|
||
- 区块标题 `16px`、表格表头与表单标签 `13px`、结束方式（日期/期数）按钮 `15px`。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：创建表单对齐接口字段
|
||
|
||
- 新增投资类型（AMOUNT/QUANTITY）、订单价格类型、定投周期与执行日、交易时间偏移（0–240 分钟）；提交时组装 `ScheduleInvestmentCreateBody` 并调用 `createScheduleInvestmentPlan`。
|
||
- `exchangeCode`、资产 `productCode`、`startDate`、结束日期/期数与既有表单项对应；`clientId`/`accountId` 由 HTTP 拦截器注入。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：创建表单控件宽度统一
|
||
|
||
- 平板及以上（`≥768px`）表单项控件宽度统一为列宽的 70%；移动端保持 100%。
|
||
- 移除原 `340px` 上限，使 `el-select`、`el-input`、`AssetChipPicker`、日期与结束方式切换条一致。
|
||
- 详见 `IMPACT_ANALYSIS.md`「创建表单控件宽度统一」补充。
|
||
|
||
---
|
||
|
||
## 补充：创建定投 API 路径
|
||
|
||
- `createScheduleInvestmentPlan` 使用 `POST /trade/schedule-investment/plan/create`。
|
||
- 请求体仍由 `buildScheduleInvestmentCreateBody` 生成；`clientId` / `accountId` 由 HTTP 拦截器合并。
|
||
|
||
---
|
||
|
||
## 补充：交易所下拉接口
|
||
|
||
- 使用 `POST /trade/schedule-investment/exchanges`，字段 `exchangeCode` / `nameI18nId` / `tradeDate`。
|
||
- 已移除 `src/api/exchange.ts`（原 `getAllExchanges`）。
|
||
|
||
---
|
||
|
||
## 补充：计划列表 plan/page
|
||
|
||
- `POST /trade/schedule-investment/plan/page`，请求仅使用 `current: 1`、`size: 50`，其余筛选字段为空。
|
||
- 列表字段映射 `productCode`、金额/数量、周期、状态 `ACTIVE` 等；创建成功后 `loadPlans` 刷新。
|
||
- 终止计划仍为前端演示（待接终止接口）。
|
||
|
||
---
|
||
|
||
## 补充：限价 limitPrice
|
||
|
||
- 订单价格类型为「限价」时展示限价输入，校验大于 0，创建请求携带 `limitPrice`；市价不传。
|
||
|
||
---
|
||
|
||
## 补充：创建计划产品名称
|
||
|
||
- 选股时保留 `engName` / `localName`，创建 body 传 `productEngName`、`productLocalName`。
|
||
|
||
---
|
||
|
||
## 补充：资产选择展示 productCodeUnique
|
||
|
||
- 下拉与晶片展示 `1.HK`（`productCodeUnique`），名称 trim 全角空格；去重键使用 `productKey`。
|
||
|
||
---
|
||
|
||
## 补充：投资类型与金额/数量合一控件
|
||
|
||
- 移除独立「投资类型」切换行；左侧小下拉（按金额/按数量）与右侧输入同一输入框样式一行展示。
|
||
|
||
---
|
||
|
||
## 补充：结束类型合一控件
|
||
|
||
- 「特定日期 / 期數」与结束日期或期数输入合并为 `field-combo`；日期模式下保留「无结束日期」勾选。
|
||
|
||
---
|
||
|
||
## 补充：计划详情弹窗（2026-10-09）
|
||
|
||
- 我的计划表格与移动卡片「操作」增加「详情」；请求 `POST /trade/schedule-investment/plan/detail`（`planNo`）。
|
||
- 弹窗展示计划编号、交易所、产品、每次投资、订单价格、周期、偏移、起止、下次执行、进度、状态、创建时间、渠道；下方为最近执行记录表或空态。
|
||
- 三语文案见 `recurring.planDetail.*`；详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
- 详情弹窗隐藏渠道；交易所名称与创建表单下拉同源反显（`exchangeSelectOptions`）。
|
||
- 产品名称按 `lang` 在 `productLocalName` / `productEngName` 间切换（详情与计划列表一致）。
|
||
- 终止计划：`el-dialog` 确认 + 选填原因，接口 `plan/terminate`；成功提示并刷新列表（`recurring.terminate*` / `cancelConfirm*`）。
|
||
|
||
---
|
||
|
||
## 补充：预览下次执行（2026-10-09）
|
||
|
||
- 创建表单「重设 / 繼續」之间增加「预览下次执行」；请求 `POST /trade/schedule-investment/plan/next-execution`（`exchangeCode`、`frequencyType`、`frequencyDay`、`ctOffsetMinutes`、可选 `startDate`）。
|
||
- 弹窗展示周期日期、执行日期、执行时间、是否顺延、CT 偏移；文案见 `recurring.previewNextExecution*`。
|
||
- 校验范围小于「继续」：不要求标的与金额；详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：计划列表金额/数量展示（2026-10-09）
|
||
|
||
- 移动计划卡片：`investmentType === 'QUANTITY'` 时 meta 标签为「数量」，否则为「金额」；数值逻辑不变。
|
||
- 桌面计划列表表头 `recurring.colAmount` 改为「金额/数量」（三语与详情执行记录表头一致）。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：计划列表资产列省略与 Tooltip（2026-10-09）
|
||
|
||
- 桌面计划表资产列固定约 220px，超出省略；`el-tooltip` 展示完整代码与名称。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：移动计划卡片操作按钮样式（2026-10-09）
|
||
|
||
- 移动卡片「详情 / 终止」复用 `detail-link`、`cancel-link`，无边框纯文字；字号 15px、紧凑内边距（与桌面表操作一致）。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：清理脚手架示例（2026-10-09）
|
||
|
||
- 删除：`SampleChart.vue`、`HomeView.vue`、`AboutView.vue`、`investAssets.ts`、默认 `assets/*.svg`。
|
||
- 路由仅保留 `/`（定期投资）；移除 `echarts` 与图表相关 CSS/i18n。
|
||
- 金额输入 placeholder 国际化为 `recurring.amountPlaceholder`。
|
||
- 验证：`npm run build`。
|
||
|
||
---
|
||
|
||
## 补充：README 与 URL `lang` 短码（2026-10-10）
|
||
|
||
- **目标**：完善 `README.md`；`lang` 查询参数文档与写入统一为 `zh` / `tw` / `en`（缺省 `tw`）。
|
||
- **代码**：`resolveLocaleFromLangParam` / `localeToUrlLang`；兼容读取 `zh-CN`、`zh-TW`、`en-US`。
|
||
- **验证**：`npm run build`；参见 `IMPACT_ANALYSIS.md` 本节补充。
|
||
|
||
---
|
||
|
||
## 补充：Vite 可局域网访问（2026-10-10）
|
||
|
||
- `vite.config.ts`：`server` / `preview` 增加 `host: true`、`allowedHosts: true`。
|
||
- `README.md` 开发节补充 Network 访问说明。
|
||
|
||
---
|
||
|
||
## 补充：CT 时间偏移下拉（2026-10-10）
|
||
|
||
- 创建表单在选定交易所与资产后请求 `POST /trade/schedule-investment/options/ct-time`（`productCode` 与创建计划一致：`productCodeUnique` 或 `code`）。
|
||
- 偏移字段改为 `el-select`（`displayName` / `offsetMinutes`）；未选资产时禁用并提示先选交易所与资产。
|
||
- 详见 `IMPACT_ANALYSIS.md` 本节补充；验证：`npm run build`。
|
||
|
||
---
|
||
|
||
## 补充：frequencyDay 回显归一化（2026-10-10）
|
||
|
||
- 新增 `src/utils/frequencyDay.ts`，将接口 `1`/`MONDAY`/`MON` 等 weekly 值与带前导零的 monthly 值规范后用于列表与详情展示。
|
||
- 创建/预览提交：`WEEKLY` 为 `1`–`7`，`MONTHLY` 为 `1`–`31`；`DAILY` 不传 `frequencyDay`。界面仍显示星期中文名。
|
||
- 验证：`npm run build`；参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：VITE_BASE_URL 子路径（2026-10-10）
|
||
|
||
- `vite.config.ts` 将 `VITE_BASE_URL` 映射为 Vite `base`；新增 `.env.production`。
|
||
- 开发/预览入口：`/recurring-investment/`。
|
||
- 验证：`npm run build`。
|
||
|
||
---
|
||
|
||
## 补充：HTTP 不再全局注入 clientId / accountId（2026-10-10）
|
||
|
||
- 移除 `src/api/http.ts` 对全部 POST 请求体的自动合并；仅 `POST /trade/schedule-investment/plan/create` 在 `buildScheduleInvestmentCreateBody` 中携带 URL 的 `clientId`、`accountId`。
|
||
- 验证：`npm run build`；参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：资产下拉滚动分页（2026-10-10）
|
||
|
||
- `getSimpleStockPage` 每页 50 条；下拉触底 `loadMore` 追加，搜索仍防抖并重置页码。
|
||
- 验证：`npm run build`；参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：下次执行预览去掉执行时间（2026-10-10）
|
||
|
||
- 预览弹窗移除 `previewExecutionDateTime` / `executionDateTime` 展示行。
|
||
- 参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：下次执行预览新接口字段与 loading（2026-10-12）
|
||
|
||
- `next-execution` 响应改为 `nextExecutionDate`、`nextExecutionTime`；弹窗仅展示「下次执行日」「执行时间」。
|
||
- 请求期间仅按钮 `:loading`；数据返回后再打开弹窗。
|
||
- 参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：创建计划使用 productCode（2026-10-12）
|
||
|
||
- `InvestAsset` 区分 `productCode`（接口）与 `productCodeUnique`（展示）；创建与 CT 选项请求提交 `productCode`（如 `1`）。
|
||
- 参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：计划详情执行记录去掉委托状态列（2026-10-12）
|
||
|
||
- 详情弹窗「最近执行」表格移除「委托状态」列及 `colOrderStatus` 文案。
|
||
- 参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：计划详情执行记录成交三列（2026-10-13）
|
||
|
||
- 移除「实际交易日」列；新增成交数量、成交金额、成交均价（`filledQty` / `filledAmount` / `avgFilledPrice`）。
|
||
- 参见 `IMPACT_ANALYSIS.md` 对应补充。
|
||
|
||
---
|
||
|
||
## 补充：最近执行表响应式（2026-10-13）
|
||
|
||
- 详情弹窗按断点加宽；移动端执行记录卡片列表，平板/桌面表格横滑 + 首列 sticky + 滑动提示。
|
||
- 参见 `IMPACT_ANALYSIS.md` 对应补充。
|