commit 9ed161d93ebdf29799f34c2d08221d54769edd51
Author: justin <justin.cai@afe.hk>
Date:   Sat Oct 10 09:21:25 2026 +0800

    Initial commit: G3FO recurring investment schedule frontend
    
    Co-authored-by: Cursor <cursoragent@cursor.com>

diff --git a/.cursor/rules/project-core.mdc b/.cursor/rules/project-core.mdc
new file mode 100644
index 0000000..225805d
--- /dev/null
+++ b/.cursor/rules/project-core.mdc
@@ -0,0 +1,22 @@
+---
+description: schedule-invest-plan 技术栈与全局约定（URL 语言/主题、文档）
+alwaysApply: true
+---
+
+# 项目核心约定
+
+- 栈：Vue 3 + TypeScript + Vite、Vue Router、Pinia、Axios、vue-i18n、Sass、ECharts、Element Plus（按需自动导入）。
+- 代码修改须同步维护 `IMPACT_ANALYSIS.md`、`TASK_SUMMARY.md`（团队规范）。
+
+## 语言与主题（仅 URL）
+
+- 查询参数：`lang`（或 `locale`）、`theme`；**禁止**用 `localStorage` 持久化语言/主题。
+- 缺省：`lang=zh-TW`、`theme=dark`；`theme` 支持别名 `light`/`day`、`dark`/`night`。
+- 解析与写入：`src/config/urlPreferences.ts`；切换语言/主题用 `useUrlPreferences()`（更新 `router.replace` 的 query）。
+- 路由跳转保留 query：`useRouteWithPreferences().linkTo(path)` 或等价 `{ path, query: route.query }`。
+- i18n：`src/i18n/`（简/繁/英）；Element Plus 语言：`getElementPlusLocale` + 根节点 `el-config-provider`。
+- 深色：`applyTheme` 设置 `data-theme` 与 `html.dark`（Element Plus 深色变量）。
+
+## 详细规范文档
+
+- 响应式：`docs/RESPONSIVE_SPEC.md`（断点、布局、禁止事项以该文档为准）。
diff --git a/.cursor/rules/responsive-layout.mdc b/.cursor/rules/responsive-layout.mdc
new file mode 100644
index 0000000..dfc2110
--- /dev/null
+++ b/.cursor/rules/responsive-layout.mdc
@@ -0,0 +1,51 @@
+---
+description: PC/移动端响应式与布局（Mobile First）
+globs: src/**/*.{vue,scss}
+alwaysApply: false
+---
+
+# 响应式与布局
+
+完整条文见 `docs/RESPONSIVE_SPEC.md`。实现时必须遵守：
+
+## 断点（勿私自改数值）
+
+| 令牌 | 宽度 |
+|------|------|
+| sm | 576px |
+| md | 768px |
+| lg | 1024px |
+| xl | 1280px |
+
+- TS 真相：`src/constants/breakpoints.ts`；SCSS：`src/styles/breakpoints.scss`（两处数值一致）。
+
+## 样式
+
+- **移动优先**：默认小屏样式，用 `@include respond-up(md|lg)` 增强。
+- **禁止**业务里手写零散 `@media (max-width: 750px)`；Vite 已全局注入 `respond-up/down/between`。
+- 颜色/背景用 `var(--color-*)`；页面边距用 `var(--page-padding-x/y)`，勿写死 `padding: 32px`。
+- 可点击区域最小 **44×44px**。
+
+## 壳层结构
+
+```
+.app-shell > .app-container > AppHeader + 页面
+```
+
+- 路由视图根节点包 **`AppPage`**（`src/components/layout/AppPage.vue`）。
+- 内容最大宽度 `--layout-max-width`（1280px）。
+
+## 脚本
+
+```ts
+import { useBreakpoint } from '@/composables/useBreakpoint'
+const { isMobile, isDesktop } = useBreakpoint()
+```
+
+- 仅用于布局/组件属性（如表单 `label-position`）；勿用 `width` 驱动业务逻辑。
+- 勿在页面重复 `window.addEventListener('resize')`（图表等组件内除外）。
+
+## Element Plus
+
+- 栅格默认 `xs="24"`，再 `sm`/`lg` 分列；`gutter` 移动 12、PC 20 为宜。
+- 移动：`label-position="top"`；表格移动优先卡片或 `.app-table-scroll` 横滚。
diff --git a/.cursor/rules/vue-sfc-patterns.mdc b/.cursor/rules/vue-sfc-patterns.mdc
new file mode 100644
index 0000000..8f2b12a
--- /dev/null
+++ b/.cursor/rules/vue-sfc-patterns.mdc
@@ -0,0 +1,38 @@
+---
+description: Vue 单文件组件与本仓库写法
+globs: src/**/*.vue
+alwaysApply: false
+---
+
+# Vue SFC 约定
+
+## 结构
+
+- 路由页：`views/*` 根节点使用 `<AppPage>`；标题/导语可用 `.app-page__title`、`.app-page__lead`。
+- 样式：`<style scoped lang="scss">`；需要断点时用 `respond-up` / `respond-down` mixin。
+- 路径别名：`@/` → `src/`。
+
+## 导航与 URL 参数
+
+```vue
+<script setup lang="ts">
+import { useRouteWithPreferences } from '@/composables/useRouteWithPreferences'
+const { linkTo } = useRouteWithPreferences()
+</script>
+<RouterLink :to="linkTo('/')">...</RouterLink>
+```
+
+## 表单示例（响应式）
+
+```vue
+<script setup lang="ts">
+import { useBreakpoint } from '@/composables/useBreakpoint'
+const { isMobile } = useBreakpoint()
+</script>
+<el-form :label-position="isMobile ? 'top' : 'right'">
+```
+
+## 禁止
+
+- 不要复制 PC/H5 两套页面文件。
+- 不要绕过 URL 直接改 `i18n.global.locale` 或 `applyTheme`（应走 store + query 同步链路）。
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..08b8a3d
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+# 开发环境 API：留空则请求同源路径，由 vite proxy 转发到 VITE_API_PROXY_TARGET
+VITE_API_BASE_URL=
+VITE_API_PROXY_TARGET=http://192.168.3.230:18000
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..a7cea0b
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/IMPACT_ANALYSIS.md b/IMPACT_ANALYSIS.md
new file mode 100644
index 0000000..6fd3911
--- /dev/null
+++ b/IMPACT_ANALYSIS.md
@@ -0,0 +1,608 @@
+# Impact Analysis Report
+
+## 1. 改动概览
+
+- **背景与目标**：按 V5 demo `hkex-trade/recurring-investment.html` 落地「定期投资」页面（计划列表、创建表单、确认弹窗、终止计划），作为应用首页。
+- **涉及模块**：路由首页、顶栏导航、i18n、全局主题色、定期投资视图/组件/Store。
+- **改动类型**：功能新增 + 视觉令牌对齐。
+
+## 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `src/router/index.ts` | `/` 由 `HomeView` 改为 `RecurringInvestmentView`；`meta.titleKey` 改为 `recurring.title`。 |
+| `src/stores/recurringPlans.ts` | 新增 `addPlan` / `cancelPlan` / `runningCount`；内存示例数据，无接口。 |
+| `src/views/RecurringInvestmentView.vue` | 新增列表、表单校验、确认弹窗、移动端卡片。 |
+| `src/components/recurring/AssetChipPicker.vue` | 新增资产晶片多选与搜索下拉。 |
+| `src/composables` / `useUrlPreferences` | 未改；语言主题仍仅走 URL query。 |
+| `src/styles/main.scss` / `variables.scss` | 主色与语义色对齐 demo（`--color-primary` 等）；新增 `--color-up/down/warn` 等令牌。 |
+| `src/i18n/locales/*` | 新增 `recurring.*` 文案（繁/简/英）。 |
+| `src/components/AppHeader.vue` | 已自 `App.vue` 移除引用并删除组件文件；壳层不再展示顶栏标题与导航。 |
+| `src/App.vue` | 去掉 `<AppHeader />`，页面内容由 `RouterView` 直接渲染。 |
+| `src/styles/element-plus-theme.scss` | 新增：对齐 `--el-*` 输入/选择框 hover、focus 与 `--color-*` 令牌（含 `html.dark` 下 primary RGB）。 |
+
+与原逻辑差异：首页不再展示 ECharts 示例（`HomeView.vue` 仍保留，未挂路由）。表单提交仅写入 Pinia 内存，不调用后端。
+
+## 3. 调用方与影响范围分析
+
+- **路由 `/`**：所有默认入口进入定期投资页。
+- **顶栏**：`common.home` 不再作为首页标签；关于页路由不变。
+- **主题变量**：`--color-bg` / `--color-muted` / `--color-primary` 变化会影响顶栏与关于页观感（非接口行为）。
+- **破坏性变更**：否（无对外 API；旧首页组件文件仍在仓库中）。
+
+## 4. 风险与回滚
+
+- **风险级别**：低。纯前端示例页，计划数据刷新即丢失。
+- **主要风险**：移动端表格改为卡片，与 demo 桌面表有布局差异（符合本仓库响应式规范）。
+- **回滚**：将 `/` 指回 `HomeView.vue`，并还原主题变量与顶栏文案。
+- **回滚方式是否简单**：是。
+
+## 5. 验证与测试
+
+- `npm run build`（vue-tsc + Vite）通过。
+- 浏览器冒烟：列表展示、资产搜索选择、校验、确认建立、终止计划、语言/主题 URL 切换、移动端卡片。
+
+## 配置变更
+
+无环境变量或配置中心变更。
+
+---
+
+## 补充：Token、开发代理与服务端多语言（2025-10-08）
+
+### 1. 改动概览
+
+- **背景与目标**：与 Order-H5 一致，支持 URL `token` 写入请求头；本地开发代理到 `192.168.3.230:18000`；通过 `getAllList` 加载服务端多语言。
+- **涉及模块**：`vite.config.ts`、`src/api/http.ts`、`src/stores/auth.ts`、`src/stores/serviceI18n.ts`、`src/api/base.ts`、`src/api/scheduleInvestment.ts`、`src/main.ts`、`src/App.vue`。
+- **改动类型**：配置变更 + 基础设施。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `vite.config.ts` | `/base`、`/trade` 代理至 `VITE_API_PROXY_TARGET`（默认 `http://192.168.3.230:18000`）。 |
+| `.env.development` | `VITE_API_BASE_URL` 置空；新增 `VITE_API_PROXY_TARGET`。 |
+| `src/api/http.ts` | 请求头 `token`、`Accept-Language`；统一 `code === '0'` 成功处理。 |
+| `src/utils/token.ts` / `stores/auth.ts` | URL 优先解析 token 并持久化（localStorage）。 |
+| `stores/serviceI18n.ts` | 拉取 `/base/systemI18n/getAllList` 并按 zh-CN/zh-TW/en-US 映射。 |
+| `src/api/scheduleInvestment.ts` | 封装 `POST /trade/schedule-investment/exchanges`。 |
+| `src/main.ts` / `App.vue` | 启动与 query 变化时加载服务端 i18n（有 token 时）。 |
+
+语言/主题仍仅 URL 控制，未使用 localStorage。
+
+### 3. 调用方与影响范围
+
+- 所有经 `http` 的请求需有效 token（与后端约定一致）。
+- `useServiceI18n().si18n(id)` 供后续对接接口返回的 `*I18nId` 字段。
+- **破坏性变更**：否（定期投资页仍用本地 vue-i18n 文案）。
+
+### 4. 风险与回滚
+
+- **风险级别**：低；无 token 时多语言接口可能失败，前端仍可用本地 messages。
+- **回滚**：还原 `vite.config.ts`、`.env.development` 与 `http.ts` 拦截器。
+
+### 5. 验证与测试
+
+- `npm run build` 通过。
+
+### 配置变更（本节）
+
+| 配置项 | 含义 | Dev 默认 |
+|--------|------|----------|
+| `VITE_API_PROXY_TARGET` | Vite 代理目标主机 | `http://192.168.3.230:18000` |
+| `VITE_API_BASE_URL` | Axios baseURL，空则同源 | 空 |
+
+---
+
+## 补充：URL accountId / clientId
+
+- **模块**：`src/config/urlContext.ts`、`stores/auth.ts`、`api/http.ts`、`composables/useAccountContext.ts`、`App.vue`
+- **行为**：从 query 解析 `clientId`、`accountId`；POST 体自动附带；仅 URL 来源，不持久化 localStorage
+- **破坏性变更**：否
+
+---
+
+## 补充：创建表单交易所下拉（2025-10-08）
+
+### 1. 改动概览
+
+- **背景与目标**：在「创建定期投资」表单中，于「資產」字段上方增加交易所代码下拉，数据来自 `POST /api/admin/exchange/getSelectItemList`。
+- **涉及模块**：`src/api/exchange.ts`、`src/views/RecurringInvestmentView.vue`、`src/components/recurring/AssetChipPicker.vue`、`vite.config.ts`、i18n。
+- **改动类型**：功能新增。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `src/api/exchange.ts` | 新增 `getExchangeSelectItemList()`。 |
+| `vite.config.ts` | 开发代理增加 `/api` → `VITE_API_PROXY_TARGET`。 |
+| `RecurringInvestmentView.vue` | 挂载时拉取交易所列表；`isEnabled === false` 的项不展示；必填校验；切换交易所清空已选资产；未选交易所时禁用资产选择器。 |
+| `AssetChipPicker.vue` | 支持 `disabled` 属性。 |
+| `src/i18n/locales/*` | 新增 `recurring.exchange`。 |
+
+### 3. 调用方与影响范围
+
+- 创建表单提交仍写 Pinia 内存，`exchangeCode` 暂未写入 `RecurringPlanDraft`（待对接创建 API 时扩展）。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低；接口需登录 token，失败时下拉为空且表单校验拦截。
+- **回滚**：移除交易所字段与 `exchange.ts`，还原 `vite.config.ts` 代理项。
+
+### 5. 验证与测试
+
+- `npm run build` 通过。
+
+### 配置变更（本节）
+
+| 配置项 | 含义 |
+|--------|------|
+| Vite `server.proxy['/api']` | 转发 admin 等 `/api/*` 接口至后端 |
+
+---
+
+## 补充：资产列表对接 getSimpleStockPage（2025-10-08）
+
+### 1. 改动概览
+
+- **背景与目标**：创建表单在选定交易所后，从 `POST /product/product/getSimpleStockPage` 拉取可投标的，请求体 `exchangeCodes` 为交易所下拉选中值；支持 `searchName` 与 `isUpdatedToday: true`。
+- **涉及模块**：`src/api/product.ts`、`vite.config.ts`（`/product` 代理）、`RecurringInvestmentView.vue`、`AssetChipPicker.vue`、`InvestAsset` 类型、i18n。
+- **改动类型**：功能新增。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `src/api/product.ts` | 新增 `getSimpleStockPage`、`extractSimpleStockRecords`。 |
+| `vite.config.ts` | 开发代理增加 `/product`。 |
+| `RecurringInvestmentView.vue` | 交易所变更时请求标的列表；搜索框防抖 300ms 带 `searchName` 重查；映射 `productCode`/`localName`/`productKey` 等到 `InvestAsset`。 |
+| `AssetChipPicker.vue` | `loading`、`search` 事件。 |
+| `investAssets.ts` | 不再作为创建表单数据源（文件保留）。 |
+
+### 3. 调用方与影响范围
+
+- 资产选择依赖 token 与产品服务可用性；失败时列表为空。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低；`size: 100000` 单次体量较大，需关注后端与网络耗时。
+- **回滚**：恢复 `INVEST_ASSETS` 与旧 `AssetChipPicker` 用法，移除 `/product` 代理。
+
+### 5. 验证与测试
+
+- `npm run build` 通过。
+
+---
+
+## 补充：交易所与资产并排布局（2025-10-08）
+
+- **模块**：`RecurringInvestmentView.vue` 表单栅格与 `.field--exchange` / `.field--asset` 样式。
+- **行为**：`md+` 同一行各 `12` 列平分；`xs` 仍为两行堆叠。交易所下拉在该行内 `max-width: none` 铺满列宽。
+- **破坏性变更**：否。
+
+---
+
+## 补充：资产选择器单选与控件样式对齐（2025-10-08）
+
+- **模块**：`AssetChipPicker.vue`。
+- **行为**：资产仅能选一项（新选替换旧选）；未选交易所时展示与 `el-select` 一致的「請選擇」占位文案与 `--color-muted` 色；控件高度与边框/背景对齐 Element Plus 默认输入框（32px、`--color-control-*`）。
+- **调用方**：`RecurringInvestmentView.vue` 仍使用 `InvestAsset[]`，最多一项。
+- **破坏性变更**：否（原多选 UI 改为单选，业务表单语义仍为单资产创建）。
+
+---
+
+## 补充：定期投资页标题/标签字号加大（2026-10-08）
+
+### 1. 改动概览
+
+- **背景与目标**：表头「資產」、表单标题「創建定期投資」、字段标签「交易所 *」、结束方式切换「期數」等文字偏小，提升可读性。
+- **涉及模块**：`src/views/RecurringInvestmentView.vue` 样式。
+- **改动类型**：视觉调整（无逻辑变更）。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `.panel-head h2` / `.panel-head--notes h2` | `13px` → `16px`（含「創建定期投資」「我的計劃」等区块标题）。 |
+| `.plan-table th` | `10px` → `13px`，字距略收（`0.12em` → `0.08em`）。 |
+| `.field label` | `10.5px` → `13px`，字距略收（`0.1em` → `0.06em`）。 |
+| `.end-toggle button` | `13px` → `15px`。 |
+
+### 3. 调用方与影响范围
+
+- 仅本页 scoped 样式；表格表头、表单标签、区块标题、结束方式按钮同步变大。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是（还原上述字号即可）。
+
+### 5. 验证与测试
+
+- 浏览器核对桌面列表表头、创建表单标题/标签/期数切换按钮字号。
+
+---
+
+## 补充：创建表单对齐 schedule-investment 入参（2026-10-08）
+
+### 1. 改动概览
+
+- **背景与目标**：创建定期投资表单字段与交易接口入参一致（投资类型、价格类型、定投周期/执行日、结束类型、交易时间偏移等）；`clientId`/`accountId` 仍由 `http` 拦截器从 Pinia 合并。
+- **涉及模块**：`RecurringInvestmentView.vue`、`src/types/scheduleInvestment.ts`、`src/utils/scheduleInvestmentPayload.ts`、`src/api/scheduleInvestment.ts`、`src/types/recurringInvestment.ts`、i18n。
+- **改动类型**：功能新增。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| 表单 | 新增 `investmentType`、`orderPriceType`、`frequencyType`、`frequencyDay`、`ctOffsetMinutes`；按金额/数量切换输入；周期仅 DAILY/WEEKLY/MONTHLY。 |
+| `buildScheduleInvestmentCreateBody` | 将表单映射为 `ScheduleInvestmentCreateBody`（含 `endType` DATE/COUNT/NONE、`totalExecutionCount`、`productCode`）。 |
+| `createScheduleInvestmentPlan` | `POST /trade/schedule-investment/plan/create`；确认建立时调用，成功后仍写入本地示例列表。 |
+
+### 3. 调用方与影响范围
+
+- 创建流程依赖 URL `token`、`clientId`、`accountId` 及后端 create 接口可用。
+- **破坏性变更**：否（列表仍用本地 Pinia；表单原「间隔」细粒度选项改为与接口一致的三种周期）。
+
+### 4. 风险与回滚
+
+- **风险级别**：中（create 路径或字段名若与后端不一致需调整 API 封装）。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- `npm run build`；表单校验与确认弹窗预览。
+
+---
+
+## 补充：创建表单控件宽度统一（≥768px 为 70%）
+
+### 1. 改动概览
+
+- **背景与目标**：宽屏下 `el-select` 被 `max-width: 340px` 限制，而 `el-input`、资产选择框为 100% 列宽，视觉不一致；统一为平板及以上宽度占字段区域 70%，移动端仍为 100%。
+- **涉及模块**：`RecurringInvestmentView.vue`（`.form-body` 样式）。
+- **改动类型**：缺陷修复 / UI。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `.form-body` | 新增 CSS 变量 `--form-control-width`：`100%`（默认）、`respond-up(md)` 时为 `70%`。 |
+| `.control-*` / `.end-toggle` / `.asset-wrap` | 移除 `max-width: 340px`，统一使用 `--form-control-width`。 |
+
+### 3. 调用方与影响范围
+
+- 仅定期投资创建表单面板内控件宽度；无脚本与 API 变更。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是（还原样式块即可）。
+
+### 5. 验证与测试
+
+- 宽屏（≥768px）下交易所、资产、金额/数量、下拉、日期、结束方式切换条宽度一致为 70%；窄屏仍为全宽。
+
+---
+
+## 补充：创建定投接口路径更正
+
+### 1. 改动概览
+
+- **背景与目标**：后端创建计划路径为 `POST /trade/schedule-investment/plan/create`，与前端原 `/trade/schedule-investment/create` 不一致导致 404。
+- **涉及模块**：`src/api/scheduleInvestment.ts`。
+- **改动类型**：缺陷修复。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `createScheduleInvestmentPlan` | URL 改为 `/trade/schedule-investment/plan/create`；入参 `ScheduleInvestmentCreateBody` 不变。 |
+
+### 3. 调用方与影响范围
+
+- 调用方：`RecurringInvestmentView.vue` 确认建立流程。
+- **破坏性变更**：否（仅修正路径）。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- 带 `token`、`clientId`、`accountId` 提交创建；确认网络请求路径与响应 `code === 0`。
+
+---
+
+## 补充：交易所下拉改用 schedule-investment/exchanges
+
+### 1. 改动概览
+
+- **背景与目标**：创建表单交易所选项改为 `POST /trade/schedule-investment/exchanges`，不再调用 `/base/exchange/getAllExchanges`。
+- **涉及模块**：`scheduleInvestment.ts`、`scheduleInvestment.ts`（类型）、`RecurringInvestmentView.vue`；删除 `src/api/exchange.ts`。
+- **改动类型**：缺陷修复 / 接口对齐。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `getScheduleInvestmentExchanges` | 返回类型 `ScheduleInvestmentExchangeItem[]`（`exchangeCode`、`nameI18nId`、`tradeDate`）。 |
+| `loadExchangeOptions` | 调用上述接口；展示文案仍经 `si18n(nameI18nId)`。 |
+| `exchange.ts` | 已删除。 |
+
+### 3. 调用方与影响范围
+
+- 仅定期投资页交易所下拉；资产搜索仍用 `getSimpleStockPage` + `exchangeCodes`。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低（若 `data` 非数组需再适配分页结构）。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- 打开创建表单，交易所下拉有数据且标签为 i18n 名称；切换后资产列表正常加载。
+
+---
+
+## 补充：我的计划列表对接 plan/page
+
+### 1. 改动概览
+
+- **背景与目标**：「我的定期投資計劃」由 `POST /trade/schedule-investment/plan/page` 拉取，仅传分页 `current`/`size`，其余筛选项传空字符串；移除 Pinia 内存示例数据。
+- **涉及模块**：`scheduleInvestment.ts`（API/类型）、`scheduleInvestmentPlanMapper.ts`、`recurringPlans.ts`、`RecurringInvestmentView.vue`、i18n。
+- **改动类型**：功能新增。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `getScheduleInvestmentPlanPage` | `current`+`size` 及空筛选字段请求；映射 `records` → `RecurringPlan`。 |
+| `loadPlans` | 挂载与创建成功后刷新列表；`runningCount` 按非终止状态统计。 |
+| `recurringPlans` store | 去掉 `addPlan` 与种子数据，改为 `setPlans`。 |
+
+### 3. 调用方与影响范围
+
+- 列表展示金额/数量、周期+执行日、结束日期/期数/无结束；终止按钮仍为本地状态（待对接终止 API）。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低（分页暂取第一页 `size=50`；若 `current` 须从 0 起需再对齐）。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- 进入页面请求 `plan/page`；创建成功后列表刷新；`ACTIVE` 计入进行中数量。
+
+---
+
+## 补充：创建入参字段 qtyPerExecution
+
+- **改动**：`ScheduleInvestmentCreateBody` 与 `buildScheduleInvestmentCreateBody` 中按数量定投字段由 `quantityPerExecution` 改为 `qtyPerExecution`，与接口及列表 `records` 一致。
+- **破坏性变更**：否（仅请求 JSON 字段名）。
+- **风险**：低。
+
+---
+
+## 补充：限价单 limitPrice
+
+- **改动**：`orderPriceType === 'LIMIT'` 时表单展示「限价」输入，校验 `> 0`，创建请求体附带 `limitPrice`；市价单不传该字段。
+- **涉及**：`RecurringInvestmentView.vue`、`scheduleInvestmentPayload.ts`、`ScheduleInvestmentCreateBody`、i18n。
+- **破坏性变更**：否。
+- **风险**：低。
+
+---
+
+## 补充：创建计划 productEngName / productLocalName
+
+- **改动**：`getSimpleStockPage` 映射保留 `engName`、`localName`；`buildScheduleInvestmentCreateBody` 写入 `productEngName`、`productLocalName`。
+- **破坏性变更**：否。
+- **风险**：低。
+
+---
+
+## 补充：计划列表「详情」弹窗（2026-10-09）
+
+### 1. 改动概览
+
+- **背景与目标**：我的计划列表「操作」列增加「详情」，调用 `POST /trade/schedule-investment/plan/detail`（`planNo`）弹窗展示计划要点与最近执行记录。
+- **涉及模块**：`src/api/scheduleInvestment.ts`、`src/types/scheduleInvestment.ts`、`RecurringInvestmentView.vue`、i18n（zh-TW / zh-CN / en-US）。
+- **改动类型**：功能新增。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `getScheduleInvestmentPlanDetail` | 新增详情接口封装。 |
+| 类型 `ScheduleInvestmentPlanDetailData` 等 | 描述 `plan` + `recentExecutions` 响应结构。 |
+| `openPlanDetail` / 详情 `el-dialog` | 加载详情、格式化周期/结束/投资方式等字段；执行记录表格或空态。 |
+| 列表操作列 / 移动卡片 | 「详情」与「终止」并列。 |
+
+### 3. 调用方与影响范围
+
+- 依赖列表项 `planNo`（来自 `plan/page` 映射）；无 `planNo` 时前端提示，不发起请求。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低（只读查询；失败由 http 拦截器提示）。
+- **回滚方式是否简单**：是（移除按钮与 API 封装即可）。
+
+### 5. 验证与测试
+
+- `npm run build`；列表点击详情，核对弹窗字段与空执行记录文案。
+
+### 补充（2026-10-09）
+
+- 详情弹窗不再展示「渠道」；「交易所」通过 `getScheduleInvestmentExchanges` 缓存与创建表单相同逻辑（`si18n(nameI18nId)`）反显文案，无匹配时回退 `exchangeCode`。
+- 产品行 `productLocalName` / `productEngName`：`en-US` 优先英文，简繁优先本地名（`investAssetDisplay.ts`）；列表映射保留双语字段，切换 URL `lang` 后名称随语言更新。
+- 计划「終止」：`el-dialog` 二次确认 + 选填 `terminateReason`，调用 `POST /trade/schedule-investment/plan/terminate`（`planNo`），成功后 `loadPlans` 刷新列表。
+
+---
+
+## 补充：创建表单「预览下次执行」（2026-10-09）
+
+### 1. 改动概览
+
+- **背景与目标**：创建计划表单底部增加「预览下次执行」，调用 `POST /trade/schedule-investment/plan/next-execution`，在弹窗展示节假日调整后的执行日与时点。
+- **涉及模块**：`src/api/scheduleInvestment.ts`、`src/types/scheduleInvestment.ts`、`RecurringInvestmentView.vue`、i18n（zh-TW / zh-CN / en-US）。
+- **改动类型**：功能新增。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `previewScheduleInvestmentNextExecution` | 新增 next-execution 接口封装。 |
+| `ScheduleInvestmentNextExecutionRequest` / `Data` | 描述请求与响应字段。 |
+| `validateNextExecutionPreview` / `openNextExecutionPreview` | 校验交易所、周期、执行日（周/月）、CT 偏移；`startDate` 选填传入。 |
+| 创建表单 `form-actions` | 增加按钮与预览 `el-dialog`（`ri-preview` 样式）。 |
+
+### 3. 调用方与影响范围
+
+- 仅创建表单使用；不改动「继续」全流程校验（仍要求标的、金额等）。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低（只读预览；失败由 http 拦截器提示）。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- `npm run build`；填写交易所与周期后点击预览，核对弹窗字段与 `deferred` 文案。
+
+---
+
+## 补充：计划列表金额/数量展示（2026-10-09）
+
+### 1. 改动概览
+
+- **背景与目标**：移动卡片按 `investmentType` 区分「金额」「数量」标签；桌面列表表头统一为「金额/数量」。
+- **涉及模块**：`RecurringInvestmentView.vue`、`src/i18n/locales/*`（`recurring.colAmount`）。
+- **改动类型**：缺陷修复 / 文案对齐。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `planInvestmentLabel` | 新增：`QUANTITY` → `recurring.quantity`，否则 `recurring.amount`；用于移动卡片 meta 的 `<dt>`。 |
+| `recurring.colAmount`（三语） | 由单一「金额」改为「金额/数量」（与 `planDetail.colAmount` 一致），用于计划列表表头。 |
+
+### 3. 调用方与影响范围
+
+- 计划列表移动卡片与桌面表头文案；单元格数值仍由 `planInvestmentDisplay` 输出。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- `npm run build`；列表含 AMOUNT / QUANTITY 计划时核对卡片标签与表头。
+
+---
+
+## 补充：计划列表资产列省略与 Tooltip（2026-10-09）
+
+### 1. 改动概览
+
+- **背景与目标**：桌面计划表「资产」列限制宽度，长名称单行省略，悬停 `el-tooltip` 展示全文。
+- **涉及模块**：`RecurringInvestmentView.vue`（`planAssetCellText`、表样式 `plan-table__asset-*`）。
+- **改动类型**：体验优化。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| `planAssetCellText` | 拼接代码、名称与 `+N` 多标的后缀，供 tooltip 与展示一致。 |
+| `plan-table` | `table-layout: fixed`；资产列宽约 220px；内层 `text-overflow: ellipsis`。 |
+
+### 3. 调用方与影响范围
+
+- 仅「我的计划」桌面表格首列；移动卡片不变。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- `npm run build`；长产品名悬停可见完整 tooltip。
+
+---
+
+## 补充：移动计划卡片操作按钮样式（2026-10-09）
+
+### 1. 改动概览
+
+- **背景与目标**：移动卡片「详情 / 终止」与桌面表一致，纯文字链接、无边框。
+- **涉及模块**：`RecurringInvestmentView.vue`（复用 `detail-link` / `cancel-link`）。
+- **改动类型**：体验优化。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| 计划卡片 `plan-card__actions` | 按钮类名改为 `detail-link`、`cancel-link`；移除 `plan-card__detail` / `plan-card__cancel` 边框样式。 |
+
+### 3. 调用方与影响范围
+
+- 仅移动端计划卡片底部操作区。
+- **破坏性变更**：否。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是。
+
+### 5. 验证与测试
+
+- 移动断点下核对详情（主色）、终止（跌色）文字与悬停下划线。
+
+---
+
+## 补充：清理脚手架示例（2026-10-09）
+
+### 1. 改动概览
+
+- **背景与目标**：接口已全部对接，移除未使用的 ECharts 示例、关于页、静态资产列表与相关依赖/文案。
+- **涉及模块**：路由、视图/组件删除、`i18n`、`main.scss`、`package.json`、文档。
+- **改动类型**：重构 / 清理。
+
+### 2. 方法级改动分析
+
+| 位置 | 差异 |
+|------|------|
+| 删除 `SampleChart.vue`、`HomeView.vue`、`AboutView.vue` | 不再保留未挂路由或纯技术栈展示的页面。 |
+| 删除 `constants/investAssets.ts` | 创建表单资产已由 `getSimpleStockPage` 提供，静态列表无引用。 |
+| `router/index.ts` | 移除 `/about`；首页路由名改为 `recurring-investment`。 |
+| `package.json` | 移除 `echarts` 依赖。 |
+| `main.scss` | 移除仅示例图表使用的 `--chart-height`、`--color-chart-*`。 |
+| `i18n` | 移除 `home.*`、`common.home`/`common.about`；新增 `recurring.amountPlaceholder`。 |
+| `RecurringInvestmentView.vue` | 金额输入 placeholder 改为 i18n。 |
+
+### 3. 调用方与影响范围
+
+- 无对外 API；用户若曾收藏 `/about` 将 404（本应用此前无入口链至该页）。
+- **破坏性变更**：否（功能面仅删除未使用示例）。
+
+### 4. 风险与回滚
+
+- **风险级别**：低。
+- **回滚方式是否简单**：是（自 Git 恢复删除文件与依赖）。
+
+### 5. 验证与测试
+
+- `npm run build`。
+- 冒烟：定期投资列表/创建/详情/终止、语言切换。
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..db95484
--- /dev/null
+++ b/README.md
@@ -0,0 +1,62 @@
+# Schedule Invest Plan
+
+Vue 3 + TypeScript 前端项目，技术栈：Vite、Vue Router、Pinia、Axios、vue-i18n、Sass、Element Plus。
+
+## 开发
+
+```bash
+npm install
+npm run dev
+```
+
+## 构建
+
+```bash
+npm run build
+npm run preview
+```
+
+## 目录说明
+
+| 路径 | 说明 |
+|------|------|
+| `src/api/http.ts` | Axios 实例与拦截器 |
+| `src/i18n/` | 国际化配置（简体 / 繁体 / 英文） |
+| `src/router/` | 路由 |
+| `src/stores/` | Pinia 状态 |
+| `src/styles/` | 全局 Sass 与变量 |
+| `src/views/RecurringInvestmentView.vue` | 定期投资首页 |
+| `src/element-plus/locale.ts` | Element Plus 语言与 URL `lang` 映射 |
+| `src/types/components.d.ts` | 组件自动导入类型（构建生成） |
+
+### Element Plus
+
+- 通过 `unplugin-vue-components` + `unplugin-auto-import` 按需引入组件。
+- 根节点 `el-config-provider` 语言随 URL `lang` 同步（简/繁/英）。
+- 深色模式：`theme=dark` 时为 `html` 增加 `dark` 类，并加载 Element Plus 深色 CSS 变量。
+
+## 环境变量
+
+开发环境见 `.env.development`：`VITE_API_BASE_URL` 为接口基础路径（默认 `/api`）。
+
+## URL 参数（语言与主题）
+
+语言与主题**仅通过 URL 查询参数**控制（不再使用 `localStorage`）。
+
+| 参数 | 取值 | 缺省 |
+|------|------|------|
+| `lang` | `zh-TW` / `zh-CN` / `en-US`（亦支持 `locale`） | `zh-TW` |
+| `theme` | `dark` / `light`（亦支持 `night` / `day`） | `dark` |
+
+示例：
+
+- `http://localhost:5173/?lang=zh-TW&theme=dark`
+- `http://localhost:5173/?lang=en-US&theme=light`
+
+顶栏切换语言或主题时会同步更新当前地址栏中的 `lang`、`theme`。
+
+## PC / 移动端适配
+
+开发与评审须遵循 **[docs/RESPONSIVE_SPEC.md](./docs/RESPONSIVE_SPEC.md)**（断点、布局壳层、Sass mixin、`useBreakpoint`、Element Plus 栅格与表单约定）。
+
+Cursor 已配置项目规则：`.cursor/rules/`（核心约定、响应式、Vue SFC 写法）。
diff --git a/TASK_SUMMARY.md b/TASK_SUMMARY.md
new file mode 100644
index 0000000..2694177
--- /dev/null
+++ b/TASK_SUMMARY.md
@@ -0,0 +1,204 @@
+# 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]`，`isUpdatedToday: true`。
+- 晶片搜索框防抖调用同一接口并传 `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.230:18000`，可改 `.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=zh-TW&theme=dark`
+- 值仅存于 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`。
diff --git a/docs/RESPONSIVE_SPEC.md b/docs/RESPONSIVE_SPEC.md
new file mode 100644
index 0000000..10e111b
--- /dev/null
+++ b/docs/RESPONSIVE_SPEC.md
@@ -0,0 +1,217 @@
+# PC / 移动端响应式规范
+
+> 适用项目：`schedule-invest-plan`  
+> 版本：v1.0  
+> 策略：**Mobile First（移动优先）** + 单代码库适配 PC 与移动端浏览器
+
+---
+
+## 1. 目标与原则
+
+| 原则 | 说明 |
+|------|------|
+| 一套代码 | 不维护独立 H5 仓库，通过断点与布局组件适配 |
+| 移动优先 | 默认样式面向小屏；使用 `min-width` 媒体查询逐级增强 |
+| 流式布局 | 宽度优先 `%` / `fr` / `max-width`，避免写死大屏像素宽度 |
+| 触控友好 | 可点击区域最小 **44×44px**（含按钮、图标按钮） |
+| 与 Element Plus 一致 | 栅格、表单 `label-position`、对话框宽度遵循 EP 响应式用法 |
+| 主题无关 | 深浅色只改 CSS 变量，不改变断点与间距阶梯 |
+
+---
+
+## 2. 视口与设备范围
+
+- **最小支持宽度**：320px（`body` 已设置 `min-width: 320px`）
+- **主要适配对象**：
+  - 移动端：竖屏手机（320–767px）
+  - 平板：768–1023px
+  - PC：≥1024px
+- **HTML**：保留 `viewport` meta，禁止用户缩放锁死（不设 `user-scalable=no`），以保证无障碍与系统字体缩放。
+
+---
+
+## 3. 断点定义（统一来源）
+
+断点数值以 **`src/constants/breakpoints.ts`** 为 JS/TS 唯一真相；SCSS 使用 **`src/styles/breakpoints.scss`**（数值须与 TS 保持一致）。
+
+| 令牌 | 宽度 | 典型场景 |
+|------|------|----------|
+| `sm` | ≥576px | 大屏手机横屏、小平板 |
+| `md` | ≥768px | 平板竖屏 |
+| `lg` | ≥1024px | 笔记本 / PC 主内容区 |
+| `xl` | ≥1280px | 宽屏，内容区达到 `max-width` |
+
+### 3.1 语义化设备类型（业务判断用）
+
+在脚本中通过 **`useBreakpoint()`** 获取（勿在各页面重复 `resize` 监听）：
+
+| 字段 | 条件 | 用途示例 |
+|------|------|----------|
+| `isMobile` | 宽度 &lt; 768px | 表单单列、`label-position="top"` |
+| `isTablet` | 768px ≤ 宽度 &lt; 1024px | 双列栅格 |
+| `isDesktop` | 宽度 ≥ 1024px | 侧栏 + 主内容 |
+| `isWide` | 宽度 ≥ 1280px | 宽表、多列看板 |
+
+---
+
+## 4. 布局规范
+
+### 4.1 页面壳层
+
+```
+#app
+ └── .app-shell          （min-height: 100vh）
+      └── .app-container （max-width + 水平居中 + 内边距）
+           ├── AppHeader
+           └── AppPage / 页面内容
+```
+
+- **内容最大宽度**：`1280px`（`--layout-max-width`）
+- **页面内边距**：使用 CSS 变量，禁止在业务页写死 `padding: 32px`：
+
+| 变量 | 移动端（&lt;768） | 平板（≥768） | PC（≥1024） |
+|------|------------------|--------------|--------------|
+| `--page-padding-x` | 16px | 24px | 32px |
+| `--page-padding-y` | 16px | 24px | 32px |
+
+### 4.2 页面组件
+
+- 路由级视图根节点使用 **`AppPage`**（`src/components/layout/AppPage.vue`），类名 `app-page`。
+- 需要全宽区块（如顶栏下横幅）时，在 `AppPage` 内再包一层 `.app-page__section`，通过负 margin 拉满（见组件注释，慎用）。
+
+### 4.3 Element Plus 栅格
+
+```vue
+<el-row :gutter="gutter">
+  <el-col :xs="24" :sm="12" :lg="8">...</el-col>
+</el-row>
+```
+
+- **gutter**：移动端 `12`，PC `20`（可用 `useBreakpoint().isMobile` 计算）。
+- 默认单列：`xs="24"`，再按 `sm` / `md` / `lg` 递增列数。
+
+### 4.4 表单
+
+| 场景 | 规范 |
+|------|------|
+| 移动端 | `label-position="top"`，`size="default"` 或 `large` |
+| PC | `label-position="right"`，`label-width` 统一（如 `100px`） |
+| 按钮区 | 移动端主按钮 `width: 100%` 或 `el-button` 块级排列 |
+
+### 4.5 表格
+
+- 移动端：优先 **卡片列表** 或 **横向滚动**（`el-table` 外包 `.app-table-scroll`），避免压缩到不可读。
+- PC：常规表格；列过多时使用 `fixed` 与 `min-width`。
+
+---
+
+## 5. 样式编写规范（Sass）
+
+### 5.1 媒体查询
+
+统一使用 **`src/styles/mixins/_respond.scss`** 中的 mixin（已在 Vite 中全局注入）：
+
+```scss
+.app-card {
+  padding: 12px;
+
+  @include respond-up(md) {
+    padding: 16px;
+  }
+
+  @include respond-up(lg) {
+    padding: 20px;
+  }
+}
+
+.app-toolbar {
+  @include respond-down(md) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+```
+
+| Mixin | 含义 |
+|-------|------|
+| `respond-up($name)` | `min-width`，从该断点起生效 |
+| `respond-down($name)` | `max-width`，小于该断点生效 |
+| `respond-between($from, $to)` | 闭开区间，用于仅平板样式 |
+
+**禁止**在业务组件中手写零散 `@media (max-width: 750px)`，除非规范文档修订并同步 `breakpoints.scss`。
+
+### 5.2 尺寸与字体
+
+- 间距使用 **4px 基准**：4、8、12、16、24、32、48。
+- 正文字号：移动 **14px**，PC **14–16px**（`--font-size-base`）。
+- 标题：移动比 PC 小一级（如 `h1` 移动 20px，PC 24px）。
+
+### 5.3 颜色与主题
+
+- 业务样式只引用 **`var(--color-*)`**，不写死 `#fff` / `#000`（图表等特殊场景除外）。
+
+---
+
+## 6. 脚本与组合式 API
+
+```ts
+import { useBreakpoint } from '@/composables/useBreakpoint'
+
+const { isMobile, isDesktop, width } = useBreakpoint()
+```
+
+- 仅当 **布局结构** 或 **组件属性** 需要切换时使用（如 `label-position`）。
+- 不要用 `width` 做业务权限或接口参数。
+
+---
+
+## 7. 导航与顶栏
+
+- **PC**：标题与导航同一行，控件横向排列。
+- **移动**：标题独占一行；导航与语言/主题控件换行，选择器 **等分或 100% 宽**。
+- 路由跳转须保留 URL 上的 `lang`、`theme`（`useRouteWithPreferences`）。
+
+---
+
+## 8. 测试与验收
+
+| 类型 | 要求 |
+|------|------|
+| 浏览器 | Chrome 最新 + Safari iOS / Android Chrome 各一 |
+| 断点抽测 | 375、414、768、1024、1280 宽度无横向滚动条（除表格滚动容器） |
+| 横竖屏 | 图表与弹层在旋转后 `resize` 正常 |
+| 无障碍 | 焦点可见；表单控件具备 `aria-label` 或可见 label |
+
+---
+
+## 9. 禁止事项
+
+- 禁止为 PC / H5 复制两套页面文件（除非产品明确要求独立路由）。
+- 禁止 `position: fixed` 大面积遮挡而不留安全区（刘海屏注意 `env(safe-area-inset-*)` 后续扩展）。
+- 禁止在 &lt;768px 使用 hover 作为唯一交互提示。
+- 禁止未读规范即新增断点数值。
+
+---
+
+## 10. 相关文件索引
+
+| 文件 | 职责 |
+|------|------|
+| `src/constants/breakpoints.ts` | 断点像素、设备语义 |
+| `src/composables/useBreakpoint.ts` | 响应式设备状态 |
+| `src/styles/breakpoints.scss` | Sass 断点 Map |
+| `src/styles/mixins/_respond.scss` | 媒体查询 mixin |
+| `src/styles/layout.scss` | 壳层与工具类 |
+| `src/components/layout/AppPage.vue` | 页面根布局 |
+| `docs/RESPONSIVE_SPEC.md` | 本文档 |
+
+---
+
+## 11. 变更流程
+
+修改断点或间距阶梯时须：
+
+1. 同步更新 `breakpoints.ts` 与 `breakpoints.scss`；
+2. 更新本文档版本号与变更说明；
+3. 在 `IMPACT_ANALYSIS.md` 中注明是否影响既有页面布局；
+4. 回归测试 §9 所列宽度。
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..265ea52
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="zh-TW" data-theme="dark" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <title>Recurring Investment</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..fe1d23f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2752 @@
+{
+  "name": "schedule-invest-plan",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "schedule-invest-plan",
+      "version": "0.0.0",
+      "dependencies": {
+        "axios": "^1.13.2",
+        "element-plus": "^2.14.7",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.42",
+        "vue-i18n": "^11.2.8",
+        "vue-router": "^4.6.4"
+      },
+      "devDependencies": {
+        "@types/node": "^24.13.3",
+        "@vitejs/plugin-vue": "^6.0.8",
+        "@vue/tsconfig": "^0.9.1",
+        "sass": "^1.97.1",
+        "typescript": "~6.0.2",
+        "unplugin-auto-import": "^21.1.0",
+        "unplugin-vue-components": "^32.1.0",
+        "vite": "^8.3.0",
+        "vue-tsc": "^3.3.11"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.9",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.9.tgz",
+      "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-4.2.1.tgz",
+      "integrity": "sha512-Vh5uy9Y1JBMId6J1f68TMXnZrTCvNdo9Fu2k0d1YnJngR+sM5kWTKl441c/3TFs+cG0NWOjRWgQ/iaWhbYx+7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.4.13",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.4.13.tgz",
+      "integrity": "sha512-3qGv1/j0fl6ZSeehGaznE78A4i3hCaOeOyDh7jq7SV6ch/XGoy96xIrYuALTV3xhIqj2rktsIKcwlLZ3CbOhkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/devtools-types": "11.4.13",
+        "@intlify/message-compiler": "11.4.13",
+        "@intlify/shared": "11.4.13"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.4.13",
+      "resolved": "https://registry.npmmirror.com/@intlify/devtools-types/-/devtools-types-11.4.13.tgz",
+      "integrity": "sha512-f38d2yvjNc1/c+BnTLsxTB0729clTtyy7kTxHu4FFlvI6FpmBOp7b9sLYtsKJpXSZ70kIEexvNwDSzLkIlYnlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.13",
+        "@intlify/shared": "11.4.13"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.4.13",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.4.13.tgz",
+      "integrity": "sha512-cjKsDeWUD/i3mj0QtC8hydLCFP5mgZtTU1xZZaN9/O3FG94EXc0rTbecYpifglp26rpoJoIjSlW137VejLKsZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.4.13",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.4.13",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.4.13.tgz",
+      "integrity": "sha512-ZjcNgEED1FtTCFb+ohWBdR21k5kvleKtM9peobQtLB83mNIfEhJK86dEbhfk+OcUrybrEbc4eDeE9UbFUVHsjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.153.0",
+      "resolved": "https://registry.npmmirror.com/@oxc-project/types/-/types-0.153.0.tgz",
+      "integrity": "sha512-jSNrRIyvPVLL5E1z/tS5zLAprosGz/FuI1PWwEOz59j3E4TTTzSpqKb/RDGqJhhW0QHYISGXxq582wGx6T11Tw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.6.0.tgz",
+      "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.6.0",
+        "@parcel/watcher-darwin-arm64": "2.6.0",
+        "@parcel/watcher-darwin-x64": "2.6.0",
+        "@parcel/watcher-freebsd-x64": "2.6.0",
+        "@parcel/watcher-linux-arm-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm-musl": "2.6.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm64-musl": "2.6.0",
+        "@parcel/watcher-linux-x64-glibc": "2.6.0",
+        "@parcel/watcher-linux-x64-musl": "2.6.0",
+        "@parcel/watcher-win32-arm64": "2.6.0",
+        "@parcel/watcher-win32-x64": "2.6.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz",
+      "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz",
+      "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz",
+      "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz",
+      "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz",
+      "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz",
+      "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz",
+      "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz",
+      "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz",
+      "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz",
+      "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz",
+      "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz",
+      "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.8.tgz",
+      "integrity": "sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.13.tgz",
+      "integrity": "sha512-Vu/NICrgdRvUOeaJZIyB2FP63s6fO/4ud5l8dXmxDx9yDyn+mN0y+gsvsVviSli+T361Aqo0h46EuMoobrwawA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.13.tgz",
+      "integrity": "sha512-6LEoIrGy5vvCd2boNnv2soPSUZj/PRvhp8R/t9KlX+mIZxThIE/ZqxrGXxmuNX0FuvQFvLdZr7S4HrYpYBVhEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.13.tgz",
+      "integrity": "sha512-CaJSRzlQ6Q+zkDMVA9OkVxBjVoPRCDEE3v0FSJ9kIQBgRjFApA3Si4ijhbNVUji7ZJt+PfO0e46qy4nPInHUPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.13.tgz",
+      "integrity": "sha512-e4r340I5hxSzJkD3YJBxgzq/rJ3wwxwdLLb2FPt1Zpyem20nrQPT11DDEEkazwxaHumH8wpglsp/Ozgj/wT6mw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.13.tgz",
+      "integrity": "sha512-hoBWDZ4/K/mJKVMbsgUd1jfpA2DiOrJ54mpegObU9TBHBBrtX4FLIXJJQRDPZ/2Dn91GvPob+Z2hwKJzf4E5SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.13.tgz",
+      "integrity": "sha512-oF9fZu3vTWnTiVAkDFxU9PJLt1nh20K9RRpuHsR7ZnE2L7XookBbDBVLojCVSLGbvtSlxeUNnjAj6DbNsKyzbg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.13.tgz",
+      "integrity": "sha512-DTpb/+jMiqWMPgphn4ksW1zW+XLJ6dJJ9FMvnIk9I291LhCctMPhMYJrP5t9p6C9qa3KXadDdUEZHBaPh3kNxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.13.tgz",
+      "integrity": "sha512-xU+Kvv9N2A3SY35zFh1FWWNjxbadE/BKeqnkXe7vScU4GZsw757BlVmDLITZEq8DPpk6m7uoDYkK7P+x/uU5Ow==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.13.tgz",
+      "integrity": "sha512-XMk/hnhh25oQ756Lclb1Q11h4ll0xC0Esa5w4Vzp+mAE2S3AGJgeM0SonrIgY8fHhjarb6hcoTuwoFG0VVP2ig==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.13.tgz",
+      "integrity": "sha512-U1BoTHYmlywE2n3HUWjzZ+8EQsKr+OwpxYuDWaubx42tUL8QSL7nOqRz/NVHanibbFP3M1Rxuprz/wNcbMKjqw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.13.tgz",
+      "integrity": "sha512-J4cm80Pc6wEwV5AZ42o62sIQgDk+Y7R2s646jIwuvO+4V46QB58N4vVuMPWCBaNgursXLpmUWJV//WQAkPvHBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.13.tgz",
+      "integrity": "sha512-W0euZS40U4V6JkmEnVCIX9mcsL6cbXQ4X8c2w+MMOIjFg68TXUW+u3RT+2e1t1pv9mg/EP3pDtK3POXdQ7Rxyw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.13.tgz",
+      "integrity": "sha512-do/AF/4n9MRshia3a5aXoy8xM2c6mgfT6D7H/dY6my5z+hfCIR4ab7mk4IRj++nsEQpKy39kd0DQnDq+r692tw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.13.tgz",
+      "integrity": "sha512-6FtUf2cJZobutJdxnGYX8z0vtbgqU0b2v8vfBhkXb9wp2MppMFtkunE+IaOntyi01rkIQoPW2GHABtfzsC0BRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.13.tgz",
+      "integrity": "sha512-UKhFaZTeTcbKrb3iU82m17jVcPEAoqDkCN5MBqgPyZSwp/cQmib21crTS0DdH7T1B7wZRWEI89YQAOJMet5yhg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.25",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.25.tgz",
+      "integrity": "sha512-+K1NIO8I+F9/wNulfVvu23QYd0Pe9/OCqRrim4NoYIf1VoEDL90Ve4ClzpyqBLc7NpGGWRvYNCKZ1BE/Jpf8dQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "24.19.1",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-24.19.1.tgz",
+      "integrity": "sha512-aS3/DG0oM05K0RIXXP+hKjinGG5IgSSVGzswZxW3O0sS3pH4/fycXundUC9XsszgKCk4gHXylTEK6hyFxVxnoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.9.tgz",
+      "integrity": "sha512-rD/MORlhaZMlXWW0rEn4FB4wMinWC0z/D7Ye160S5+Rs1mC8ZDAdcDp4SjKfUhG5t8q1ktcPVw4xuTkPRlzrSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/language-core/-/language-core-2.4.28.tgz",
+      "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.28"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/source-map/-/source-map-2.4.28.tgz",
+      "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.28",
+      "resolved": "https://registry.npmmirror.com/@volar/typescript/-/typescript-2.4.28.tgz",
+      "integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.43.tgz",
+      "integrity": "sha512-zdiLhnbe1QQqgDT8xZMpNmyqZ3qlI+/Q/FHQco57Kwl/b05HhCzN6eVGN9QU9rbga4CrS0H5SYY8VGHZCt/1Hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.43",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.43.tgz",
+      "integrity": "sha512-PEZoAk3NQmsn/ejMzSOCyTYqwGqczrWm70PuhBKjjv1+TCoQAaO/zOqNwjV+honlNstT5ILxtc+8r8UUfj+iEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.43",
+        "@vue/shared": "3.5.43"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.43.tgz",
+      "integrity": "sha512-FCbrG3XNCRl+js3huuKx4IVHBLTvMkJhVepjbxSPu1gn4yWLaYtGNQdjJGZaMytXB6qb76qQDDmDSLy/vkmleQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.43",
+        "@vue/compiler-dom": "3.5.43",
+        "@vue/compiler-ssr": "3.5.43",
+        "@vue/shared": "3.5.43",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.28",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.43.tgz",
+      "integrity": "sha512-GF62orf7KiJX9RqrHNGrYBudsQGD0OhJ5nDs90O8UiDuS40+YMYomiXu6w6EuvtXuRDc3MSNis3EaaSKAVSWpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.43",
+        "@vue/shared": "3.5.43"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.10.tgz",
+      "integrity": "sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.10"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.10.tgz",
+      "integrity": "sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.10",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.10.tgz",
+      "integrity": "sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-3.3.12.tgz",
+      "integrity": "sha512-k7uIKR0n4CBidk233y7cac9osnDQ5WRidTl6nsrNvpZ3nf8cx9iJxRVsRzVsoPRHbowT/iKgGMTS9RGov3jeIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.28",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.2.1",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.4"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.43.tgz",
+      "integrity": "sha512-G/c9GyOZNI2jVaaS6OX1EF1SSFSv7H0ERqNTl4+DTFMlZmB5eVAB53aLQNam/7NL2NPtaDD7RdVrzf8uJzMuOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.43"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.43.tgz",
+      "integrity": "sha512-hU6U6VnVhBGQDpvlnnDlIB8ZGJBiOcgk2lh/0InltHiz3D8oSkluvuvY+do1G2H3+udeKFsmaBlgVYP7gXQzEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.43",
+        "@vue/shared": "3.5.43"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.43.tgz",
+      "integrity": "sha512-Bb2Jc0YjjJdMt1SJmb9b2L/IWd3I8lIT9x9eS/xvvP9CiVgna0ffua74xKRmt4/uSJ+0r4iN8ex1jrqkhQGWQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.43",
+        "@vue/runtime-core": "3.5.43",
+        "@vue/shared": "3.5.43",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.43.tgz",
+      "integrity": "sha512-l2Ygjv9NehV94PSBxNWsAHC0j/eIIKbn92mBuWXAPGLnn6HfJ6MH5ubsd+Nk0YoZ5FRuxWI1P2VSoh+dbPQhCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.43",
+        "@vue/runtime-dom": "3.5.43",
+        "@vue/shared": "3.5.43"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.43.tgz",
+      "integrity": "sha512-uksS7YGMR5NZyr4JNq0Rp+QyLns0ueaz20KwzIPW9R0LH1Vnt4E+XUM29PNseEbf1www2gOuhuDi5AKOIXag9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/tsconfig": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/@vue/tsconfig/-/tsconfig-0.9.1.tgz",
+      "integrity": "sha512-buvjm+9NzLCJL29KY1j1991YYJ5e6275OiK+G4jtmfIb+z4POywbdm0wXusT9adVWqe0xqg70TbI7+mRx4uU9w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">= 5.8",
+        "vue": "^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-15.0.0.tgz",
+      "integrity": "sha512-Zv67h5mrk7YHDJsRObx+DXaCBz6RKBUpxqLesJ+3xZNPG6yuQs7ja7kg3veFrrouYLWAqydQ7CwGEbLVxB43Ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "15.0.0",
+        "@vueuse/shared": "15.0.0"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-15.0.0.tgz",
+      "integrity": "sha512-sfWE5LADAKJ0KnjtGliMdSN8Ij/L7uP6rXIZlgPloAI4zvvefbw6H5Lt7KJA6RqQOYgVqWF5Guj50HHMIzygBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-15.0.0.tgz",
+      "integrity": "sha512-vbNXhGrbV53xPOMSyOzMHQRvhMgZf7oNDw2RChUetVxwTIEkInQ1joZ9JbT0G3z2n2AJNjvmCWeM9ySYrnvogA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.19.0.tgz",
+      "integrity": "sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/alien-signals/-/alien-signals-3.2.1.tgz",
+      "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.20.0.tgz",
+      "integrity": "sha512-r8aOh8j9cGKpgQAqpzrUHnSIc6a59Y3Xf/cv8sy1DrHCkZHzQGEuoq1tARk6qSyDdtQGSDgpb9kFlruzPvrgwg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.6",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/confbox": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.3.1.tgz",
+      "integrity": "sha512-cKUSoKa8YxFZZSmraVi7onONx3amu77ngK3kGpsYHDH7drPwCRkQE1RYMPlLRrMtnciRj274XNRxcHxnKmDSnA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/copy-anything": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-4.1.5.tgz",
+      "integrity": "sha512-vePst2VLTSqPglW7Q98VwFpGiGpOHTyXIo81MO5VyLecA5zMbZw/P/V1vmwD1jksa2iJpn/YkDrJ3XhTfzUyhQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.23",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.23.tgz",
+      "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/element-plus": {
+      "version": "2.14.7",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.14.7.tgz",
+      "integrity": "sha512-lrG7pZyCS+mpCNVpzxxyu5r35+T6V0hzkAeIwn7HA6to772XSTHKuYCZG51OfzlqaxGbNegLxs650zAF1j43gA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^4.2.1",
+        "@element-plus/icons-vue": "^2.3.2",
+        "@floating-ui/dom": "^1.8.0",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.8",
+        "@types/lodash": "^4.17.24",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "15.0.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.20",
+        "lodash": "^4.18.1",
+        "lodash-es": "^4.18.1",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0",
+        "vue-component-type-helpers": "^3.3.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.7"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/exsolve/-/exsolve-1.1.3.tgz",
+      "integrity": "sha512-kuzL9zherLQoqDeQaS55AiiIg1kb4KYXaSusTtgZTPlvKP2gGCI82LNmBNh5RjDVUXIcmgx+/Mx7vPwRzBbhJA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.16.1.tgz",
+      "integrity": "sha512-FNvFGzoMLWmE6Yj9spb/zjd7yiNCHiAW9/Tg9CXrQ8wuu32HtlJOwWO11OJafl5FfY3DxTdQ0vj42zU1kvv5jg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-5.1.9.tgz",
+      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmmirror.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.20",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.20.tgz",
+      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/obug": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/obug/-/obug-2.2.1.tgz",
+      "integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.3.3.tgz",
+      "integrity": "sha512-j/lCFdcppV0JxWpCEITdbDltBxPP6cHT+yNJ6Go2OgoSA9518X847X9z0p6LtA4Nc16+eQzCZjRrWanTGvHJ5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.3.1",
+        "exsolve": "^1.1.1",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.29",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.29.tgz",
+      "integrity": "sha512-49cGhUbXj8Qenv0iTMxA1cFBzxXoctpC9Ujd77t1WcbJIr6nF/eI7g/8MgxrYldFRuAXvja7xQRwavoW7kgrxQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.19",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-5.1.1.tgz",
+      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.2.13.tgz",
+      "integrity": "sha512-/5apOkwWxtACcQtZ5WlrAsKS4JwXVThQPJZ3RqIruRY9UG9M8e0VlXN068xum/JRKA4aIUoJ13ghe/kGCvidiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.153.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.13",
+        "@rolldown/binding-android-arm64": "1.2.13",
+        "@rolldown/binding-darwin-arm64": "1.2.13",
+        "@rolldown/binding-darwin-x64": "1.2.13",
+        "@rolldown/binding-freebsd-x64": "1.2.13",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.13",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.13",
+        "@rolldown/binding-linux-arm64-musl": "1.2.13",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.13",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.13",
+        "@rolldown/binding-linux-x64-gnu": "1.2.13",
+        "@rolldown/binding-linux-x64-musl": "1.2.13",
+        "@rolldown/binding-openharmony-arm64": "1.2.13",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.13",
+        "@rolldown/binding-win32-x64-msvc": "1.2.13"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.105.1",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.105.1.tgz",
+      "integrity": "sha512-1CnAWPyrrnVQzXGB/DUep1vYCKCm1CIBr+YxjjiW6wk9qtzemnGP4qicH56T2F9S4Hjtv/Ne3jDz8JqfdDU4oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-literal": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-4.0.0.tgz",
+      "integrity": "sha512-PaqAvfUZKBwc/SLmNZtHmzK+v19Z4O4eS3cKPeGvbIv/U3pnyEq4Tuw3/4v/FwfM8VQaEawsyCcOQ0P+kpwWWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^10.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "7.24.6",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unimport": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-6.5.0.tgz",
+      "integrity": "sha512-t0KLJLRbebz3f7NrQe+vy2ObeugVeM1XqI2oeYnauddmHSglYj3U6bxOJ65IbXmOFkcAGFJK2OyGH7aqHPM6Ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.18.0",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.2.1",
+        "magic-string": "^1.2.3",
+        "mlly": "^1.8.2",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.7",
+        "pkg-types": "^2.3.3",
+        "scule": "^1.3.0",
+        "strip-literal": "^4.0.0",
+        "tinyglobby": "^0.2.17",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "oxc-parser": "*",
+        "rolldown": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/unimport/node_modules/magic-string": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.4.3.tgz",
+      "integrity": "sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-3.4.0.tgz",
+      "integrity": "sha512-9skdIFlCsPdFV7wUfZxNsFInlW+7nJmGu2gkTu0OUhF56aXGsHab9x52/QhdJ4lC7ZDPWTxbiC4ANqVlsuaW3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.7",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rsbuild/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rsbuild/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-21.1.0.tgz",
+      "integrity": "sha512-EzrSqWIBulEqCuP7idADXH+tVKYrbwKlR5+r/lOWik0o+Ksny1kitmtryHGNSv7puzzORlcIwT/x2JStiszlHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "local-pkg": "^1.2.1",
+        "magic-string": "^1.1.0",
+        "picomatch": "^4.0.5",
+        "unimport": "^6.4.0",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^4.0.0",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/magic-string": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-1.4.3.tgz",
+      "integrity": "sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
+      "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "32.1.0",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-32.1.0.tgz",
+      "integrity": "sha512-YiUkSxuRjab18XFOrX5VsIxXzccrfmHVGsGeJgSgklb829DQmCy9E4vvDUE4tuvZZdxyFJZX0Oc4TPnnxiiMyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "local-pkg": "^1.2.0",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.2",
+        "obug": "^2.1.1",
+        "picomatch": "^4.0.4",
+        "tinyglobby": "^0.2.16",
+        "unplugin": "^3.0.0",
+        "unplugin-utils": "^0.3.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.2.2 || ^4.0.0",
+        "vue": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-8.3.3.tgz",
+      "integrity": "sha512-cTAldKPImjg6c+gk48U19POPn3GCBzZwpdsN8ZMEEcbpes+6/wvfqUd0C2y3qYY4wsj8PwgFwrZ/1jBPVttMSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.7",
+        "postcss": "^8.5.28",
+        "rolldown": "~1.2.11",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.7.1",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.2.0.tgz",
+      "integrity": "sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.43",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.43.tgz",
+      "integrity": "sha512-o5qZoksdnjIKvW1srZ3ab7pcDNYAerBjRe54D0LBLfRdCYFrSgBHVXokMas35czQc0//lmx4/tuY4ZNQ+Rf2Ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.43",
+        "@vue/compiler-sfc": "3.5.43",
+        "@vue/runtime-dom": "3.5.43",
+        "@vue/server-renderer": "3.5.43",
+        "@vue/shared": "3.5.43"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-component-type-helpers": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-3.3.12.tgz",
+      "integrity": "sha512-HwCqmgTfLFskQc4P5TRnbduCMyPat2Ezu0elLWOGn0dD/6BKHP15B5bxce6aDi+E4kblPtru8amIBQzu0Di3qQ==",
+      "license": "MIT"
+    },
+    "node_modules/vue-i18n": {
+      "version": "11.4.13",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-11.4.13.tgz",
+      "integrity": "sha512-2G7LC9XcdZ0IljFib7lKGHNiBBOTv6HO+2bnBaOiQgDYZ+uUnqSpuED5DbBo1t7su50o/WRGn+ZfDQTGd26xEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.13",
+        "@intlify/devtools-types": "11.4.13",
+        "@intlify/shared": "11.4.13",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/vue-tsc": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-3.3.12.tgz",
+      "integrity": "sha512-kbpaz18O9jPVkXVHD1BEjpUXM6WhXSu+62L1sGGr6Wbzd8GbvkBQWjoj3KZ/C0aq2MZllce7UdtWzwCIYsBMGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.28",
+        "@vue/language-core": "3.3.12"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..25b8758
--- /dev/null
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "schedule-invest-plan",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "element-plus": "^2.14.7",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.42",
+    "vue-i18n": "^11.2.8",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "sass": "^1.97.1",
+    "typescript": "~6.0.2",
+    "unplugin-auto-import": "^21.1.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.3.0",
+    "vue-tsc": "^3.3.11"
+  }
+}
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/schedule_invest_plan_design_v1.3.html b/schedule_invest_plan_design_v1.3.html
new file mode 100644
index 0000000..6e008ac
--- /dev/null
+++ b/schedule_invest_plan_design_v1.3.html
@@ -0,0 +1,1178 @@
+<!DOCTYPE html>
+<html lang="zh-HK">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PRP (Periodic Recurring Program) v1.2 — System Design Document | N2N-AFE</title>
+<style>
+:root {
+  --bg: #0f1117;
+  --surface: #161822;
+  --surface2: #1c1f2e;
+  --border: #2a2d3c;
+  --text: #d0d3e0;
+  --text2: #9094a8;
+  --text3: #686b7d;
+  --accent: #5b8def;
+  --accent2: #7b61ff;
+  --green: #34d399;
+  --red: #f87171;
+  --amber: #fbbf24;
+  --cyan: #22d3ee;
+  --pink: #f472b6;
+  --orange: #fb923c;
+  --radius: 8px;
+  --radius-lg: 12px;
+}
+* { margin:0; padding:0; box-sizing:border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK", "Microsoft JhengHei", sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.7;
+  font-size: 14px;
+}
+.container { max-width: 1040px; margin:0 auto; padding: 32px 24px 80px; }
+header {
+  text-align: center;
+  padding: 48px 0 32px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 40px;
+}
+header .badge {
+  display: inline-block;
+  background: var(--accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 12px;
+  border-radius: 20px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin-bottom: 16px;
+}
+header h1 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 8px; }
+header .sub { color: var(--text2); font-size: 14px; }
+header .meta { margin-top: 20px; display:flex; justify-content:center; gap:32px; flex-wrap:wrap; }
+header .meta span { color: var(--text3); font-size:12px; }
+header .meta b { color: var(--text2); }
+nav.toc {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px 28px;
+  margin-bottom: 40px;
+}
+nav.toc h2 { font-size: 15px; color: #fff; margin-bottom: 12px; }
+nav.toc ol { padding-left: 20px; }
+nav.toc li { margin: 6px 0; }
+nav.toc a { color: var(--accent); text-decoration:none; }
+nav.toc a:hover { color: #fff; }
+.section { margin-bottom: 48px; }
+.section h2 {
+  font-size: 20px; color: #fff;
+  padding-bottom: 8px; border-bottom: 2px solid var(--accent);
+  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
+}
+.section h2 .num {
+  background: var(--accent); color: #fff; font-size: 13px;
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 6px; flex-shrink: 0;
+}
+.section h3 { font-size: 16px; color: #fff; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
+.info-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px;
+}
+.info-card .label { color: var(--text2); font-size: 12px; margin-bottom: 4px; }
+.info-card .value { color: #fff; font-size: 18px; font-weight: 600; }
+table {
+  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px;
+}
+thead th {
+  background: var(--surface2); color: var(--text2); font-weight: 600;
+  text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border);
+  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
+}
+tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
+tbody tr:hover { background: var(--surface2); }
+td code, th code { background: var(--surface2); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); }
+td .tag {
+  display: inline-block; padding: 2px 8px; border-radius: 4px;
+  font-size: 11px; font-weight: 600;
+}
+.tag-green { background: #064e3b; color: #34d399; }
+.tag-blue { background: #1e3a5f; color: #60a5fa; }
+.tag-amber { background: #78350f; color: #fbbf24; }
+.tag-red { background: #7f1d1d; color: #f87171; }
+.tag-purple { background: #4c1d95; color: #c084fc; }
+.tag-cyan { background: #164e63; color: #22d3ee; }
+.code-block {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 20px 24px; margin: 16px 0;
+  overflow-x: auto;
+  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
+  font-size: 12px; line-height: 1.8;
+}
+.code-block .kw { color: #c084fc; }
+.code-block .str { color: #34d399; }
+.code-block .cm { color: var(--text3); }
+.code-block .fn { color: #fbbf24; }
+.code-block .var { color: #60a5fa; }
+.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
+.flow-step {
+  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px;
+}
+.flow-step .step-num {
+  width: 28px; height: 28px; background: var(--accent); color: #fff;
+  border-radius: 50%; display: flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
+}
+.flow-step .step-body { flex: 1; }
+.flow-step .step-title { color: #fff; font-weight: 600; margin-bottom: 2px; }
+.flow-step .step-desc { color: var(--text2); font-size: 13px; }
+.arch-layer {
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 16px 20px; margin-bottom: 12px; position: relative;
+}
+.arch-layer.layer-front { border-left: 4px solid var(--accent); }
+.arch-layer.layer-trade { border-left: 4px solid var(--green); }
+.arch-layer.layer-settle { border-left: 4px solid var(--amber); }
+.arch-layer h4 { font-size:13px; color:#fff; margin-bottom:4px; }
+.arch-layer p { font-size:12px; color:var(--text2); }
+.ui-widget {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
+}
+.ui-widget .widget-header {
+  background: var(--surface2); padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; gap: 8px;
+}
+.ui-widget .widget-header .dot { width:10px; height:10px; border-radius:50%; background: var(--text3); }
+.ui-widget .widget-header .dot.active { background: var(--green); }
+.ui-widget .widget-title { color: var(--text2); font-size: 12px; flex:1; }
+.ui-widget .widget-body { padding: 20px; }
+.ui-widget .mock-row {
+  display: flex; gap: 12px; align-items: center;
+  padding: 10px 0; border-bottom: 1px solid var(--border);
+}
+.ui-widget .mock-field {
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 6px; padding: 10px 14px; flex: 1;
+  font-size: 12px; color: var(--text2);
+}
+.ui-widget .mock-field.required { border-color: var(--amber); }
+.ui-widget .mock-btn {
+  background: var(--accent); color: #fff; border: none;
+  border-radius: 6px; padding: 8px 16px; font-size: 12px; cursor: pointer;
+}
+.ui-widget .mock-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text2); }
+.ui-widget .mock-btn.danger { background: var(--red); }
+.ui-widget .field-hint { font-size: 10px; color: var(--text3); margin-top: 2px; }
+.ui-widget .field-hint.warn { color: var(--amber); }
+.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 20px; padding: 8px 0; }
+.note {
+  background: #1e3a5f; border-left: 4px solid var(--accent);
+  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 16px 0; font-size: 13px; color: #bfdbfe;
+}
+.note strong { color: #fff; }
+.note.amber { background: #78350f; border-left-color: var(--amber); color: #fde68a; }
+.resp-grid {
+  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; font-size: 12px;
+}
+.resp-grid .resp-header { color: var(--text3); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--border); }
+.resp-grid .resp-cell { padding: 6px 0; border-bottom: 1px solid var(--border); }
+.forecast-box {
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 16px 20px; text-align: center;
+}
+.forecast-box .fv { font-size: 20px; color: var(--green); font-weight: 700; }
+.forecast-box .fl { font-size: 11px; color: var(--text3); margin-top: 2px; }
+footer {
+  text-align: center; padding: 40px 0 20px;
+  border-top: 1px solid var(--border); margin-top: 60px;
+  color: var(--text3); font-size: 12px;
+}
+.toggle-group {
+  display: flex; gap: 4px; background: var(--surface2); border-radius: 6px; padding: 3px;
+}
+.toggle-opt {
+  padding: 6px 12px; border-radius: 4px; font-size: 12px;
+  color: var(--text2); cursor: pointer; border: none; background: transparent;
+}
+.toggle-opt.active { background: var(--accent); color: #fff; }
+</style>
+</head>
+<body>
+<div class="container">
+
+<header>
+  <div class="badge">System Design Document</div>
+  <h1>PRP (Periodic Recurring Program)</h1>
+  <p class="sub">定期投资 — 系统设计方案</p>
+  <div class="meta">
+    <span>项目: <b>G3SF / G3SB</b></span>
+    <span>版本: <b>v1.3</b></span>
+    <span>日期: <b>2026-08-03</b></span>
+    <span>分类: <b>Internal</b></span>
+    <span>作者: <b>Jagon Li</b></span>
+  </div>
+</header>
+
+<nav class="toc">
+  <h2>目录</h2>
+  <ol>
+    <li><a href="#c1">项目概述 & 集成全景</a></li>
+    <li><a href="#c2">功能需求规格</a></li>
+    <li><a href="#c3">数据模型设计</a></li>
+    <li><a href="#c4">UI/UX 设计建议</a></li>
+    <li><a href="#c5">技术架构 & 集成方案</a></li>
+    <li style="list-style:none;padding-left:20px;font-size:12px;color:var(--text3);">5.3 错误处理与重试机制（新增）</li>
+  </ol>
+</nav>
+
+<div class="section" id="c1">
+<h2><span class="num">1</span> 项目概述 & 集成全景</h2>
+
+<h3>1.1 业务背景</h3>
+<p>N2N-AFE 为券商和银行提供一体化交易解决方案已超过 43 年。随着零售投资者对「被动定投」和「自动化理财」需求的快速增长，券商客户迫切需要一套内嵌于现有交易系统的<strong>PRP（Periodic Recurring Program，定期投资）</strong>功能。</p>
+<p>该模块允许投资者设定自动化定额定期投资，系统按设定频率通过券商自有交易通道执行下单，并由结算系统自动更新持仓，全程可追踪、可修改、可审计。</p>
+
+<h3>1.2 N2N-AFE 产品集成全景</h3>
+<div class="grid2" style="margin: 20px 0;">
+  <div class="info-card">
+    <div class="label">投资者入口</div>
+    <div class="value" style="font-size:14px;">eServices</div>
+    <div style="color:var(--text2);font-size:12px;">Web 门户</div>
+  </div>
+  <div class="info-card">
+    <div class="label">员工操作</div>
+    <div class="value" style="font-size:14px;">ProX</div>
+    <div style="color:var(--text2);font-size:12px;">专业交易终端</div>
+  </div>
+  <div class="info-card">
+    <div class="label">员工操作</div>
+    <div class="value" style="font-size:14px;">OMC</div>
+    <div style="color:var(--text2);font-size:12px;">运营管理中心</div>
+  </div>
+  <div class="info-card">
+    <div class="label">后端处理</div>
+    <div class="value" style="font-size:14px;">G3SF + G3SB</div>
+    <div style="color:var(--text2);font-size:12px;">前台交易 + 后台结算</div>
+  </div>
+</div>
+
+<h3>1.3 设计原则</h3>
+<div class="grid2">
+  <div class="info-card">
+    <div class="label" style="color:var(--accent);">01</div>
+    <div class="value" style="font-size:14px;">嵌入式 Widget 架构</div>
+    <div style="color:var(--text2);font-size:12px;">同一组件，跨 5 个宿主产品复用，响应式自适应</div>
+  </div>
+  <div class="info-card">
+    <div class="label" style="color:var(--green);">02</div>
+    <div class="value" style="font-size:14px;">零外部依赖</div>
+    <div style="color:var(--text2);font-size:12px;">不接入 IBKR 或第三方 API，完全走券商自有 OMS 通道</div>
+  </div>
+  <div class="info-card">
+    <div class="label" style="color:var(--amber);">03</div>
+    <div class="value" style="font-size:14px;">现有系统无缝集成</div>
+    <div style="color:var(--text2);font-size:12px;">G3SF 管理计划/订单，G3SB 处理成交/结算(Settlement)/持仓更新 — 复用现有交易与结算基础设施</div>
+  </div>
+  <div class="info-card">
+    <div class="label" style="color:var(--purple);">04</div>
+    <div class="value" style="font-size:14px;">专业级 UI/UX</div>
+    <div style="color:var(--text2);font-size:12px;">简洁、大气、信息密度适中，适配金融场景</div>
+  </div>
+</div>
+
+<h3>1.4 核心业务流程图</h3>
+<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin:16px 0;text-align:center;line-height:2.2;">
+  <span class="tag tag-blue">投资者</span> → <span style="color:var(--accent);">创建 PRP 计划</span> → <span class="tag tag-purple">G3SF 存储</span> → <span style="color:var(--amber);">Scheduler 定时触发</span> → <span class="tag tag-green">G3SF 生成订单</span> → <span class="tag tag-cyan">券商 OMS</span> → <span class="tag tag-amber">G3SB 结算</span> → <span style="color:var(--green);">更新持仓</span> → <span class="tag tag-purple">邮件通知</span> → <span class="tag tag-blue">投资者</span>
+</div>
+</div>
+
+<div class="section" id="c2">
+<h2><span class="num">2</span> 功能需求规格</h2>
+
+<h3>2.1 角色定义</h3>
+<table>
+<thead><tr><th>角色</th><th>描述</th><th>权限范围</th></tr></thead>
+<tbody>
+<tr><td><span class="tag tag-blue">Investor</span></td><td>券商终端投资者</td><td>创建/修改/查看/暂停/恢复/取消 自己的 PRP 计划</td></tr>
+<tr><td><span class="tag tag-green">Staff</span></td><td>券商运营/客服人员</td><td>监控全部计划、系统配置、报表导出、手动干预</td></tr>
+<tr><td><span class="tag tag-purple">Admin</span></td><td>系统管理员</td><td>市场规则配置、费率模板、通知模板、数据维护</td></tr>
+</tbody>
+</table>
+
+<h3>2.2 投资者端功能（A 模块）</h3>
+
+<div class="info-card" style="margin-top:16px;">
+  <div class="value" style="font-size:15px;">A1 — 创建 PRP 投资计划</div>
+  <table>
+  <thead><tr><th>步骤</th><th>字段</th><th>类型</th><th>说明</th></tr></thead>
+  <tbody>
+  <tr><td>1</td><td>标的代码</td><td>搜索框</td><td>支持代码/名称搜索，自动补全，显示交易所+币种</td></tr>
+  <tr><td>2</td><td>每次投入金额</td><td>数值</td><td>按币种单位</td></tr>
+  <tr><td>3</td><td>投资频率</td><td>下拉</td><td>每日 / 每周 / 每月</td></tr>
+  <tr>
+    <td>4</td><td>频率日</td><td>选择器</td>
+    <td>每周=选周一到周五；每月=选 1-28 号<br><span style="color:var(--amber);font-size:11px;">如果所选日期为非交易日，订单将于下一个交易日执行</span></td>
+  </tr>
+  <tr><td>5</td><td>开始日期</td><td>日期选择</td><td>必须大于当前日期（最小为 T+1）</td></tr>
+  <tr>
+    <td>6</td><td>结束方式</td><td>切换</td>
+    <td>
+      选项 A: 设定结束日期（日期选择）<br>
+      选项 B: 设定投资次数（输入轮数，如 12 次 = 一年）<br>
+      <span style="color:var(--text2);font-size:11px;">如选择"无截止日期"(Good Till Cancel)，请将结束日期留空</span>
+    </td>
+  </tr>
+  <tr><td>7</td><td>碎股/零股处理</td><td>单选</td><td>向上取整 / 向下取整 / 四舍五入 / 允许碎股</td></tr>
+  </tbody>
+  </table>
+  <div style="color:var(--text2);font-size:12px;padding-top:8px;">确认前实时预览 → 展示预估执行次数、总投资额、费用估算</div>
+</div>
+
+<div class="info-card">
+  <div class="value" style="font-size:15px;">A2 — 查看和管理计划</div>
+  <ul style="padding-left:20px;color:var(--text2);font-size:13px;line-height:2;">
+    <li>计划列表，卡片式布局，显示：标的名称/代码、频率、累计投入、当前市值、盈亏%</li>
+    <li>状��标签：<span class="tag tag-green">进行中</span> <span class="tag tag-amber">已暂停</span> <span class="tag tag-blue">已完成</span> <span class="tag tag-red">已取消</span></li>
+    <li>计划详情页：参数完整展示 + 投资曲线图（累计投入 vs 市值/盈亏）</li>
+    <li>执行历史明细表（分页、日期筛选、导出 CSV）</li>
+    <li>投资进度条（已执行次数 / 总计划次数）</li>
+    <li style="color:var(--text);"><strong>持仓不足时的 PnL 展示逻辑：</strong>
+      如果系统内持有的该标的股数 < PRP 累计购入的总股数（即部分股票已被卖出），PnL 按「当前持仓部分 + PRP 交易历史总盈亏」分别列示：
+      <br>① 当前持仓市值 vs 当前持仓成本 → 持仓 PnL
+      <br>② PRP 历史累计：总买入金额 vs 总卖出金额 + 剩余持仓市值 → PRP 总回报
+    </li>
+  </ul>
+</div>
+
+<div class="info-card">
+  <div class="value" style="font-size:15px;">A3 — 修改计划（进行中）</div>
+  <table>
+  <thead><tr><th>可修改字段</th><th>不可修改字段</th></tr></thead>
+  <tbody>
+  <tr><td>每次投入金额、频率、频率日、结束方式（日期/次数）、碎股处理方式</td><td>标的代码、开始日期（若需改=取消重建）</td></tr>
+  </tbody>
+  </table>
+  <div style="color:var(--text2);font-size:12px;padding-top:8px;">修改即时生效（下次执行使用新参数），全部修改记录到审计表</div>
+</div>
+
+<div class="grid2">
+  <div class="info-card">
+    <div class="value" style="font-size:15px;">A4 — 暂停/恢复/取消</div>
+    <div style="color:var(--text2);font-size:12px;">暂停：计划保留，停止后续执行。恢复：继续按原参数执行。取消：永久终止。</div>
+  </div>
+  <div class="info-card">
+    <div class="value" style="font-size:15px;">A5 — 投资预测</div>
+    <div style="color:var(--text2);font-size:12px;">输入预估年化回报率 → 输出总投资额、预估终值、预估收益、DCA 成本摊平曲线图</div>
+  </div>
+</div>
+
+<div class="note">
+  <strong>A5 示例：</strong>投资者设定每月投入 $1,000 买入 NVDA，持续 30 年（360 次），预估年化回报 12%。系统计算：总投资额 = $360,000；按 DCA + 复利计算，预估投资组合终值约 $3,520,000（约为总投入的 <strong>9.8 倍</strong>）；累计收益约 $3,160,000。下方的双线图直观展示：即使每笔投入金额不大，透过长期纪律性定投 + 复利效应，30 年后投资组合价值可达总投入的 8-10 倍。系统计算：总投资额 = $36,000；按 10% 复利计算预估终值 ≈ $41,780；预估收益 ≈ $5,780；并展示「累计投入 vs 预估市值」累积曲线图。
+</div>
+
+<h3>2.3 员工端功能（B 模块）</h3>
+
+<div class="grid2">
+  <div class="info-card">
+    <div class="value" style="font-size:15px;">B1 — 计划监控</div>
+    <ul style="padding-left:16px;color:var(--text2);font-size:12px;line-height:2;">
+      <li>全部计划总览（按状态/交易所/投资者筛选）</li>
+      <li>今日待执行清单</li>
+      <li>执行结果监控（成功/失败/异常）</li>
+      <li>异常即时告警</li>
+    </ul>
+  </div>
+  <div class="info-card">
+    <div class="value" style="font-size:15px;">B2 — 系统配置</div>
+    <ul style="padding-left:16px;color:var(--text2);font-size:12px;line-height:2;">
+      <li>市场参数管理</li>
+      <li>交易时间窗口配置</li>
+      <li>通知模板编辑</li>
+      <li>风控规则设置</li>
+    </ul>
+  </div>
+</div>
+
+<div class="info-card">
+  <div class="value" style="font-size:15px;">B3 — 报表中心</div>
+  <div style="color:var(--text2);font-size:12px;">日度执行汇总 · 月度计划统计 · 费用/佣金明细 · 异常/失败清单</div>
+</div>
+</div>
+
+<div class="section" id="c3">
+<h2><span class="num">3</span> 数据模型设计</h2>
+
+<div class="note">
+  <strong>说明：</strong>投资者与账户管理 (investors / investor_accounts) 由现有系统处理，PRP 模块不重复设计。以下仅列 PRP 特有数据表。
+</div>
+
+<h3>3.1 投资计划主表 — plans</h3>
+<table>
+<thead><tr><th>字段</th><th>类型</th><th>约束</th><th>说明</th></tr></thead>
+<tbody>
+<tr><td><code>plan_id</code></td><td>VARCHAR(32)</td><td>PK</td><td>如 PRP-20260801-0001</td></tr>
+<tr><td><code>client_id</code></td><td>VARCHAR(32)</td><td>NOT NULL</td><td>关联投资者（沿用现有系统 client_id）</td></tr>
+<tr><td><code>account_id</code></td><td>VARCHAR(32)</td><td>NOT NULL</td><td>关联交易账户</td></tr>
+<tr><td><code>instrument_code</code></td><td>VARCHAR(20)</td><td>NOT NULL</td><td>标的代码（G3SF 标准格式）</td></tr>
+<tr><td><code>exchange_id</code></td><td>VARCHAR(10)</td><td>NOT NULL</td><td>交易所代码（沿用现有系统）</td></tr>
+<tr><td><code>amount_per_time</code></td><td>DECIMAL(18,4)</td><td>NOT NULL</td><td>每次投入金额</td></tr>
+<tr><td><code>frequency</code></td><td>ENUM</td><td>NOT NULL</td><td>DAILY / WEEKLY / MONTHLY</td></tr>
+<tr><td><code>frequency_day</code></td><td>TINYINT</td><td></td><td>WEEKLY=1-5(周一到周五), MONTHLY=1-28</td></tr>
+<tr><td><code>start_date</code></td><td>DATE</td><td>NOT NULL</td><td>计划开始日期</td></tr>
+<tr><td><code>end_date</code></td><td>DATE</td><td>NULL</td><td>NULL=无限期；非空=指定结束日期</td></tr>
+<tr><td><code>total_rounds</code></td><td>INT</td><td>NULL</td><td>计划执行总次数（与 end_date 互斥，二选一）</td></tr>
+<tr><td><code>fractional_handling</code></td><td>ENUM</td><td>NOT NULL</td><td>ROUND_UP / ROUND_DOWN / NEAREST / ALLOW_FRACTIONAL</td></tr>
+<tr><td><code>status</code></td><td>ENUM</td><td>NOT NULL</td><td>ACTIVE / PAUSED / COMPLETED / CANCELLED</td></tr>
+<tr><td><code>total_invested</code></td><td>DECIMAL(18,4)</td><td>DEFAULT 0</td><td>累计已投入金额</td></tr>
+<tr><td><code>total_units</code></td><td>DECIMAL(18,6)</td><td>DEFAULT 0</td><td>累计已购份额</td></tr>
+<tr><td><code>avg_cost</code></td><td>DECIMAL(18,6)</td><td>DEFAULT 0</td><td>平均成本价</td></tr>
+<tr><td><code>execution_count</code></td><td>INT</td><td>DEFAULT 0</td><td>已执行次数</td></tr>
+<tr><td><code>created_at</code></td><td>DATETIME</td><td>NOT NULL</td><td></td></tr>
+<tr><td><code>updated_at</code></td><td>DATETIME</td><td>NOT NULL</td><td></td></tr>
+<tr><td><code>created_by</code></td><td>VARCHAR(32)</td><td>NOT NULL</td><td>client_id 或 staff_id</td></tr>
+</tbody>
+</table>
+
+<div class="note">
+  <strong>公司行动处理：</strong>若标的发生公司行动产生并行交易代码（如供股产生供股权、拆股产生临时代码等），PRP 计划仅跟踪原 <code>instrument_code</code>，不自动切换至新代码。因公司行动产生的持仓或权益变化由 G3SB 结算系统按常规公司行动流程处理，不影响 PRP 的定投执行。
+</div>
+
+<h3>3.2 执行记录表 — plan_executions</h3>
+<table>
+<thead><tr><th>字段</th><th>类型</th><th>说明</th></tr></thead>
+<tbody>
+<tr><td><code>execution_id</code></td><td>VARCHAR(32) PK</td><td>如 EXEC-20260801-0001</td></tr>
+<tr><td><code>plan_id</code></td><td>VARCHAR(32) FK</td><td>关联计划</td></tr>
+<tr><td><code>scheduled_date</code></td><td>DATE</td><td>计划执行日期</td></tr>
+<tr><td><code>actual_time</code></td><td>DATETIME</td><td>实际执行时间</td></tr>
+<tr><td><code>amount</code></td><td>DECIMAL(18,4)</td><td>本次投入金额</td></tr>
+<tr><td><code>execution_price</code></td><td>DECIMAL(18,6)</td><td>实际成交均价</td></tr>
+<tr><td><code>quantity_full</code></td><td>INT</td><td>整股数量</td></tr>
+<tr><td><code>quantity_fractional</code></td><td>DECIMAL(18,6)</td><td>碎股数量（如有）</td></tr>
+<tr><td><code>total_quantity</code></td><td>DECIMAL(18,6)</td><td>总份额</td></tr>
+<tr><td><code>commission</code></td><td>DECIMAL(18,4)</td><td>佣金</td></tr>
+<tr><td><code>other_fees</code></td><td>DECIMAL(18,4)</td><td>其他费用</td></tr>
+<tr><td><code>status</code></td><td>ENUM</td><td>PENDING / EXECUTED / PARTIAL / FAILED / SKIPPED</td></tr>
+<tr><td><code>g3sf_order_id</code></td><td>VARCHAR(32)</td><td>G3SF 订单编号（可通过订单 ID 追溯全部关联信息）</td></tr>
+<tr><td><code>trade_remark</code></td><td>VARCHAR(100)</td><td>成交备注标记为 PRP 投资计划</td></tr>
+<tr><td><code>error_code</code></td><td>VARCHAR(20)</td><td>失败错误码：SHORTFUND / SUSPENDED / PRICE_REJECTED / SYSTEM_ERROR</td></tr>
+<tr><td><code>error_msg</code></td><td>TEXT</td><td>失败详情</td></tr>
+<tr><td><code>notification_sent</code></td><td>BOOLEAN</td><td>邮件通知是否已发送</td></tr>
+</tbody>
+</table>
+
+<div class="note">
+  <strong>停牌处理：</strong>若计划执行日标的股票处于停牌状态，系统将标记执行记录为 REJECTED（error_code=<code>SUSPENDED</code>），发送邮件通知投资者"标的已停牌"，该笔执行不会补单。系统在下一个计划执行周期继续按正常流程处理。
+</div>
+
+<h3>3.3 修改审计表 — plan_modifications</h3>
+<table>
+<thead><tr><th>字段</th><th>类型</th><th>说明</th></tr></thead>
+<tbody>
+<tr><td><code>mod_id</code></td><td>VARCHAR(32) PK</td><td>修改编号</td></tr>
+<tr><td><code>plan_id</code></td><td>VARCHAR(32) FK</td><td>关联计划</td></tr>
+<tr><td><code>field_changed</code></td><td>VARCHAR(50)</td><td>修改字段名</td></tr>
+<tr><td><code>old_value</code></td><td>TEXT</td><td>旧值（JSON）</td></tr>
+<tr><td><code>new_value</code></td><td>TEXT</td><td>新值（JSON）</td></tr>
+<tr><td><code>modified_by</code></td><td>VARCHAR(32)</td><td>修改人</td></tr>
+<tr><td><code>modified_by_role</code></td><td>ENUM</td><td>INVESTOR / STAFF / SYSTEM</td></tr>
+<tr><td><code>modified_at</code></td><td>DATETIME</td><td>修改时间</td></tr>
+<tr><td><code>reason</code></td><td>VARCHAR(200)</td><td>修改原因</td></tr>
+</tbody>
+</table>
+
+<h3>3.4 系统配置表 — system_config</h3>
+<div class="note amber">
+  <strong>说明：</strong>系统配置相关表结构及字段细节由开发团队根据具体实现需求自行设计。本表仅供概念参考，不作为强制规范。
+</div>
+<table>
+<thead><tr><th>字段</th><th>类型</th><th>说明</th></tr></thead>
+<tbody>
+<tr><td><code>config_key</code></td><td>VARCHAR(100) PK</td><td>配置键</td></tr>
+<tr><td><code>config_value</code></td><td>TEXT</td><td>配置值（JSON）</td></tr>
+<tr><td><code>updated_by</code></td><td>VARCHAR(32)</td><td>更新人</td></tr>
+<tr><td><code>updated_at</code></td><td>DATETIME</td><td>更新时间</td></tr>
+</tbody>
+</table>
+</div>
+
+<div class="section" id="c4">
+<h2><span class="num">4</span> UI/UX 设计建议</h2>
+
+<h3>4.1 嵌入环境概览</h3>
+<table>
+<thead><tr><th>宿主产品</th><th>用户</th><th>设备</th><th>分辨率参考</th><th>布局策略</th></tr></thead>
+<tbody>
+<tr><td>eServices</td><td><span class="tag tag-blue">Investor</span></td><td>Desktop Browser</td><td>1280-1920px</td><td>侧栏 / 全宽卡片式</td></tr>
+<tr><td>ProX</td><td><span class="tag tag-green">Staff</span></td><td>Desktop</td><td>1440-2560px</td><td>全宽表格 + 侧栏筛选</td></tr>
+<tr><td>OMC</td><td><span class="tag tag-green">Staff</span></td><td>Desktop</td><td>1280-1920px</td><td>全宽控制面板</td></tr>
+</tbody>
+</table>
+
+<h3>4.2 投资者 Widget — 创建 PRP 计划页面</h3>
+
+<div class="ui-widget">
+  <div class="widget-header">
+    <div class="dot active"></div><div class="dot"></div><div class="dot"></div>
+    <div class="widget-title">eServices — PRP 定期投资</div>
+  </div>
+  <div class="widget-body">
+    <div style="font-size:13px;color:#fff;margin-bottom:12px;font-weight:600;">创建 PRP 定期投资计划</div>
+    <div style="display:flex;gap:12px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">Step 1: 选择标的</div>
+        <div class="mock-field">搜索股票代码... NVDA</div>
+      </div>
+      <div style="flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 14px;">
+        <div style="font-size:10px;color:var(--text3);margin-bottom:2px;">标的资料 (Instrument Master)</div>
+        <div style="font-size:14px;color:#fff;font-weight:600;">NVIDIA Corp</div>
+      </div>
+    </div>
+    <div style="display:flex;gap:12px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">每次金额</div>
+        <div class="mock-field">$ 1,000 USD</div>
+      </div>
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">频率</div>
+        <div class="toggle-group">
+          <button class="toggle-opt">每日</button>
+          <button class="toggle-opt active">每周</button>
+          <button class="toggle-opt">每月</button>
+        </div>
+      </div>
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">执行日</div>
+        <div class="mock-field">周三 ▼</div>
+        <div class="field-hint warn">如遇非交易日，自动顺延至下一个交易日</div>
+      </div>
+    </div>
+    <div style="display:flex;gap:12px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">开始日期 *</div>
+        <div class="mock-field required">2026-08-03 (必须 &gt; 今日)</div>
+      </div>
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">结束日期</div>
+        <div class="mock-field">2027-08-03</div>
+        <div style="display:flex;align-items:center;gap:6px;margin-top:6px;">
+          <input type="checkbox" checked style="accent-color:var(--green);width:14px;height:14px;cursor:pointer;margin:0;" id="gtc-cb">
+          <label for="gtc-cb" style="font-size:11px;color:var(--text2);cursor:pointer;">Good Till Cancel (勾选后结束日期自动禁用)</label>
+        </div>
+      </div>
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">碎股处理</div>
+        <div class="mock-field">允许碎股 ▼</div>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;justify-content:space-between;">
+      <div style="font-size:12px;color:var(--text2);">
+        预估: <span style="color:#fff;">52次/年</span> · 年投入 <span style="color:#fff;">$52,000</span> · 费用约 <span style="color:#fff;">$26/年</span>
+      </div>
+      <button class="mock-btn">确认创建</button>
+    </div>
+  </div>
+</div>
+
+<table style="font-size:12px;margin-top:8px;">
+<thead><tr><th colspan="2" style="text-align:center;background:var(--surface);color:var(--accent);">UI 字段中英对照 (Bilingual Reference) — 创建 PRP 计划</th></tr></thead>
+<tbody>
+<tr><td>选择标的</td><td>Select Instrument</td></tr>
+<tr><td>搜索股票代码...</td><td>Search stock code...</td></tr>
+<tr><td>标的资料 (Instrument Master)</td><td>Instrument Master</td></tr>
+<tr><td>每次金额</td><td>Amount per Time</td></tr>
+<tr><td>频率</td><td>Frequency</td></tr>
+<tr><td>每日 / 每周 / 每月</td><td>Daily / Weekly / Monthly</td></tr>
+<tr><td>执行日</td><td>Execution Day</td></tr>
+<tr><td>如遇非交易日，自动顺延至下一个交易日</td><td>If non-trading day, deferred to next trading day</td></tr>
+<tr><td>开始日期 *</td><td>Start Date *</td></tr>
+<tr><td>必须 > 今日</td><td>Must be > today</td></tr>
+<tr><td>结束日期</td><td>End Date</td></tr>
+<tr><td>Good Till Cancel (勾选后结束日期自动禁用)</td><td>Good Till Cancel (Checking disables end date)</td></tr>
+<tr><td>碎股处理</td><td>Fractional Share Handling</td></tr>
+<tr><td>允许碎股</td><td>Allow Fractional Shares</td></tr>
+<tr><td>确认创建</td><td>Confirm Creation</td></tr>
+<tr><td>预估</td><td>Estimate</td></tr>
+</tbody>
+</table>
+
+<h3>4.3 投资者 Widget — 计划列表页</h3>
+
+<div class="ui-widget">
+  <div class="widget-header">
+    <div class="dot active"></div><div class="dot"></div><div class="dot"></div>
+    <div class="widget-title">我的 PRP 投资计划</div>
+  </div>
+  <div class="widget-body">
+    <div class="mock-row" style="color:var(--text2);font-size:11px;border-bottom:2px solid var(--border);">
+      <div style="flex:2;">标的</div><div style="flex:1;">频率</div><div style="flex:1;">累计投入</div><div style="flex:1;">持仓市值 / 盈亏</div><div style="flex:1;">PRP 总回报</div><div style="flex:0.5;"></div>
+    </div>
+    <div class="mock-row" style="cursor:pointer;">
+      <div style="flex:2;"><span style="color:#fff;font-weight:600;">NVDA</span> <span style="color:var(--text2);font-size:11px;">NVIDIA Corp</span></div>
+      <div style="flex:1;font-size:12px;">每周三</div>
+      <div style="flex:1;font-size:12px;">$8,000</div>
+      <div style="flex:1;"><span style="color:var(--green);">$9,240</span> <span style="color:var(--green);font-size:11px;">+15.5%</span></div>
+      <div style="flex:1;"><span style="color:var(--green);">+$1,240</span> <span style="color:var(--green);font-size:10px;">(+15.5%)</span></div>
+      <div style="flex:0.5;"><span class="tag tag-green">进行中</span></div>
+    </div>
+    <div class="mock-row" style="cursor:pointer;">
+      <div style="flex:2;"><span style="color:#fff;font-weight:600;">QQQ</span> <span style="color:var(--text2);font-size:11px;">Invesco QQQ</span></div>
+      <div style="flex:1;font-size:12px;">每周一</div>
+      <div style="flex:1;font-size:12px;">$12,500</div>
+      <div style="flex:1;"><span style="color:var(--green);">$13,800</span> <span style="color:var(--green);font-size:11px;">+10.4%</span></div>
+      <div style="flex:1;"><span style="color:var(--green);">+$1,300</span> <span style="color:var(--green);font-size:10px;">(+10.4%)</span></div>
+      <div style="flex:0.5;"><span class="tag tag-green">进行中</span></div>
+    </div>
+    <div class="mock-row" style="cursor:pointer;opacity:0.6;">
+      <div style="flex:2;"><span style="color:#fff;font-weight:600;">0700</span> <span style="color:var(--text2);font-size:11px;">Tencent</span></div>
+      <div style="flex:1;font-size:12px;">每月 1 号</div>
+      <div style="flex:1;font-size:12px;">HK$15,000</div>
+      <div style="flex:1;"><span style="color:var(--red);">HK$13,200</span> <span style="color:var(--red);font-size:11px;">-12.0%</span></div>
+      <div style="flex:1;">
+        <div style="font-size:10px;color:var(--text3);">已卖出部分</div>
+        <span style="color:var(--amber);">HK$-1,800</span> <span style="color:var(--amber);font-size:10px;">(-12%)</span>
+      </div>
+      <div style="flex:0.5;"><span class="tag tag-amber">已暂停</span></div>
+    </div>
+  </div>
+</div>
+
+<table style="font-size:12px;margin-top:8px;">
+<thead><tr><th colspan="2" style="text-align:center;background:var(--surface);color:var(--accent);">UI 字段中英对照 (Bilingual Reference) — 计划列表</th></tr></thead>
+<tbody>
+<tr><td>我的 PRP 投资计划</td><td>My PRP Investment Plans</td></tr>
+<tr><td>标的</td><td>Instrument</td></tr>
+<tr><td>频率</td><td>Frequency</td></tr>
+<tr><td>累计投入</td><td>Total Invested</td></tr>
+<tr><td>持仓市值 / 盈亏</td><td>Position Value / P&L</td></tr>
+<tr><td>PRP 总回报</td><td>PRP Total Return</td></tr>
+<tr><td>每周三 / 每周一 / 每月 1 号</td><td>Every Wednesday / Every Monday / 1st of month</td></tr>
+<tr><td>已卖出部分</td><td>Partially Sold</td></tr>
+<tr><td>进行中</td><td>Active</td></tr>
+<tr><td>已暂停</td><td>Paused</td></tr>
+</tbody>
+</table>
+
+<h3>4.4 投资者 Widget — 修改 PRP 计划页面</h3>
+
+<div class="ui-widget">
+  <div class="widget-header">
+    <div class="dot active"></div><div class="dot"></div><div class="dot"></div>
+    <div class="widget-title">修改 PRP 计划 — NVDA (NVIDIA Corp)</div>
+  </div>
+  <div class="widget-body">
+    <div style="font-size:12px;color:var(--text2);margin-bottom:16px;">
+      计划编号: <span style="color:#fff;">PRP-20260801-0001</span> · 创建于: <span style="color:#fff;">2026-07-15</span> · 已执行: <span style="color:#fff;">2次</span>
+    </div>
+
+    <div style="display:flex;gap:12px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">标的代码（不可修改）</div>
+        <div class="mock-field" style="opacity:0.5;">NVDA</div>
+      </div>
+      <div style="flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 14px;">
+        <div style="font-size:10px;color:var(--text3);margin-bottom:2px;">标的���料 (Instrument Master)</div>
+        <div style="font-size:14px;color:#fff;font-weight:600;">NVIDIA Corp</div>
+      </div>
+    </div>
+    <div style="display:flex;gap:12px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">每次金额</div>
+        <div class="mock-field">$ 2,000 USD (原: $1,000)</div>
+        <div class="field-hint">修改后下次执行生效</div>
+      </div>
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">频率</div>
+        <div class="toggle-group">
+          <button class="toggle-opt">每日</button>
+          <button class="toggle-opt">每周</button>
+          <button class="toggle-opt active">每月</button>
+        </div>
+      </div>
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">碎股处理</div>
+        <div class="mock-field">向下取整 ▼ (原: 允许碎股)</div>
+      </div>
+    </div>
+    <div style="display:flex;gap:12px;margin-bottom:12px;">
+      <div style="flex:1;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">修改原因</div>
+        <div class="mock-field">增加每月投资金额</div>
+        <div class="field-hint warn">全部修改将记录至审计日志</div>
+      </div>
+    </div>
+
+    <div style="display:flex;gap:12px;align-items:center;justify-content:space-between;">
+      <div style="font-size:12px;color:var(--text2);">
+        修改后预估: <span style="color:#fff;">12次/年</span> · 年投入 <span style="color:#fff;">$24,000</span>
+      </div>
+      <div style="display:flex;gap:8px;">
+        <button class="mock-btn ghost">取消</button>
+        <button class="mock-btn">确认修改</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<table style="font-size:12px;margin-top:8px;">
+<thead><tr><th colspan="2" style="text-align:center;background:var(--surface);color:var(--accent);">UI 字段中英对照 (Bilingual Reference) — 修改 PRP 计划</th></tr></thead>
+<tbody>
+<tr><td>修改 PRP 计划</td><td>Modify PRP Plan</td></tr>
+<tr><td>计划编号</td><td>Plan ID</td></tr>
+<tr><td>创建于</td><td>Created</td></tr>
+<tr><td>已执行</td><td>Executed</td></tr>
+<tr><td>标的代码（不可修改）</td><td>Instrument Code (Non-modifiable)</td></tr>
+<tr><td>标的资料 (Instrument Master)</td><td>Instrument Master</td></tr>
+<tr><td>每次金额</td><td>Amount per Time</td></tr>
+<tr><td>修改后下次执行生效</td><td>Takes effect on next execution</td></tr>
+<tr><td>频率</td><td>Frequency</td></tr>
+<tr><td>每日 / 每周 / 每月</td><td>Daily / Weekly / Monthly</td></tr>
+<tr><td>碎股处理</td><td>Fractional Share Handling</td></tr>
+<tr><td>向下取整 / 允许碎股</td><td>Round Down / Allow Fractional</td></tr>
+<tr><td>修改原因</td><td>Reason for Modification</td></tr>
+<tr><td>全部修改将记录至审计日志</td><td>All modifications recorded in audit log</td></tr>
+<tr><td>修改后预估</td><td>Revised Estimate</td></tr>
+<tr><td>取消</td><td>Cancel</td></tr>
+<tr><td>确认修改</td><td>Confirm Modification</td></tr>
+</tbody>
+</table>
+
+<h3>4.5 投资者 Widget — A5 投资预测</h3>
+
+<div class="ui-widget">
+  <div class="widget-header">
+    <div class="dot active"></div><div class="dot"></div><div class="dot"></div>
+    <div class="widget-title">投资预测 — PRP 定期投资模拟</div>
+  </div>
+  <div class="widget-body">
+    <div style="display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;">
+      <div style="flex:1;min-width:180px;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">计划参数</div>
+        <div class="mock-field" style="margin-bottom:2px;">NVDA · 每月 $1,000</div>
+        <div class="field-hint">30 年 · 360 次执行</div>
+      </div>
+      <div style="flex:1;min-width:180px;">
+        <div style="font-size:11px;color:var(--text3);margin-bottom:4px;">预估年化回报率</div>
+        <div style="display:flex;align-items:center;gap:8px;">
+          <div class="mock-field" style="flex:1;">12%</div>
+          <button class="mock-btn ghost" style="padding:8px 10px;font-size:11px;">更新</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid3" style="margin-bottom:16px;">
+      <div class="forecast-box">
+        <div class="fl">总投资额</div>
+        <div class="fv" style="color:var(--accent);">$360,000</div>
+        <div style="font-size:10px;color:var(--text3);">(30年 x $12,000/年)</div>
+      </div>
+      <div class="forecast-box">
+        <div class="fl">预估组合市值</div>
+        <div class="fv">$3,520,000</div>
+        <div style="font-size:10px;color:var(--green);">9.8x 总投入</div>
+      </div>
+      <div class="forecast-box">
+        <div class="fl">累计复利收益</div>
+        <div class="fv" style="color:var(--green);">+$3,160,000</div>
+        <div style="font-size:10px;color:var(--green);">+878%</div>
+      </div>
+    </div>
+
+    <div style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 12px 16px;">
+      <div style="color:var(--text3);font-size:11px;margin-bottom:4px;text-align:center;">Demostration — DCA vs Portfolio Value (30-Year Projection)</div>
+
+      <svg viewBox="0 0 660 400" width="100%" style="display:block;">
+        <defs>
+          <linearGradient id="shadowAccent" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#5b8def" stop-opacity="0.15"/>
+            <stop offset="100%" stop-color="#5b8def" stop-opacity="0"/>
+          </linearGradient>
+          <linearGradient id="shadowGreen" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#34d399" stop-opacity="0.12"/>
+            <stop offset="100%" stop-color="#34d399" stop-opacity="0"/>
+          </linearGradient>
+        </defs>
+
+        <g transform="translate(0, 20)">
+          <line x1="72" y1="340" x2="648" y2="340" stroke="#2a2d3c" stroke-width="1"/>
+          <line x1="72" y1="340" x2="72" y2="20" stroke="#2a2d3c" stroke-width="1"/>
+
+          <line x1="72" y1="291" x2="648" y2="291" stroke="#1c1f2e" stroke-width="0.5" stroke-dasharray="4 4"/>
+          <line x1="72" y1="242" x2="648" y2="242" stroke="#1c1f2e" stroke-width="0.5" stroke-dasharray="4 4"/>
+          <line x1="72" y1="193" x2="648" y2="193" stroke="#1c1f2e" stroke-width="0.5" stroke-dasharray="4 4"/>
+          <line x1="72" y1="144" x2="648" y2="144" stroke="#1c1f2e" stroke-width="0.5" stroke-dasharray="4 4"/>
+          <line x1="72" y1="95" x2="648" y2="95" stroke="#1c1f2e" stroke-width="0.5" stroke-dasharray="4 4"/>
+          <line x1="72" y1="46" x2="648" y2="46" stroke="#1c1f2e" stroke-width="0.5" stroke-dasharray="4 4"/>
+
+          <text x="64" y="344" text-anchor="end" font-size="10" fill="#686b7d">$0</text>
+          <text x="64" y="295" text-anchor="end" font-size="10" fill="#686b7d">$0.5M</text>
+          <text x="64" y="246" text-anchor="end" font-size="10" fill="#686b7d">$1.0M</text>
+          <text x="64" y="197" text-anchor="end" font-size="10" fill="#686b7d">$1.5M</text>
+          <text x="64" y="148" text-anchor="end" font-size="10" fill="#686b7d">$2.0M</text>
+          <text x="64" y="99" text-anchor="end" font-size="10" fill="#686b7d">$2.5M</text>
+          <text x="64" y="50" text-anchor="end" font-size="10" fill="#686b7d">$3.0M</text>
+
+          <text x="72" y="360" text-anchor="middle" font-size="10" fill="#686b7d">0</text>
+          <text x="168" y="360" text-anchor="middle" font-size="10" fill="#686b7d">5</text>
+          <text x="264" y="360" text-anchor="middle" font-size="10" fill="#686b7d">10</text>
+          <text x="360" y="360" text-anchor="middle" font-size="10" fill="#686b7d">15</text>
+          <text x="456" y="360" text-anchor="middle" font-size="10" fill="#686b7d">20</text>
+          <text x="552" y="360" text-anchor="middle" font-size="10" fill="#686b7d">25</text>
+          <text x="648" y="360" text-anchor="middle" font-size="10" fill="#686b7d">30</text>
+          <text x="360" y="382" text-anchor="middle" font-size="10" fill="#686b7d">年份</text>
+
+          <polyline points="72,340 168,334 264,328 360,322 456,317 552,311 648,305" fill="none" stroke="#5b8def" stroke-width="2.5" stroke-linejoin="round"/>
+          <polygon points="72,340 168,334 264,328 360,322 456,317 552,311 648,305 648,340 72,340" fill="url(#shadowAccent)"/>
+
+          <polyline points="72,340 168,332 264,317 360,291 456,244 552,156 648,0" fill="none" stroke="#34d399" stroke-width="2.5" stroke-linejoin="round"/>
+          <polygon points="72,340 168,332 264,317 360,291 456,244 552,156 648,0 648,340 72,340" fill="url(#shadowGreen)"/>
+
+          <circle cx="648" cy="0" r="4" fill="#34d399"/>
+          <text x="654" y="4" font-size="10" fill="#34d399" font-weight="600">$3.52M</text>
+
+          <circle cx="648" cy="305" r="3" fill="#5b8def"/>
+          <text x="654" y="309" font-size="10" fill="#5b8def" font-weight="600">$360K</text>
+
+          <text x="516" y="120" font-size="10" fill="#34d399" font-weight="600">投资组合市值 (12% CAGR)</text>
+          <text x="516" y="296" font-size="10" fill="#5b8def" font-weight="600">累计投入 (Cost Basis)</text>
+
+          <line x1="500" y1="116" x2="470" y2="135" stroke="#34d399" stroke-width="0.8"/>
+          <line x1="500" y1="292" x2="470" y2="310" stroke="#5b8def" stroke-width="0.8"/>
+        </g>
+      </svg>
+
+      <div style="display:flex;justify-content:center;gap:40px;margin-top:4px;font-size:11px;">
+        <div style="display:flex;align-items:center;gap:6px;">
+          <div style="width:12px;height:3px;background:#5b8def;border-radius:2px;"></div>
+          <span style="color:#9094a8;">累计投入 (30年共 $360K)</span>
+        </div>
+        <div style="display:flex;align-items:center;gap:6px;">
+          <div style="width:12px;height:3px;background:#34d399;border-radius:2px;"></div>
+          <span style="color:#9094a8;">投资组合市值 (终值 $3.52M, 9.8x)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="note amber" style="margin-top:12px;">
+      <strong>关键洞察：</strong>即使每笔只需 $1,000/月，经过 30 年纪律性定投 + 12% 年化复利，投资组合市值可达总投入的 <strong>9.8 倍</strong>。这正是 DCA 定投的核心价值 — 时间 + 复利 = 财富增长的最大杠杆。
+    </div>
+  </div>
+</div>
+
+<table style="font-size:12px;margin-top:8px;">
+<thead><tr><th colspan="2" style="text-align:center;background:var(--surface);color:var(--accent);">UI 字段中英对照 (Bilingual Reference) — 投资预测</th></tr></thead>
+<tbody>
+<tr><td>投资预测 — PRP 定期投资模拟</td><td>Investment Forecast — PRP Recurring Investment Simulation</td></tr>
+<tr><td>计划参数</td><td>Plan Parameters</td></tr>
+<tr><td>预估年化回报率</td><td>Estimated Annualized Return</td></tr>
+<tr><td>更新 / 计算</td><td>Update / Calculate</td></tr>
+<tr><td>总投资额</td><td>Total Investment</td></tr>
+<tr><td>预估组合市值</td><td>Estimated Portfolio Value</td></tr>
+<tr><td>累计复利收益</td><td>Cumulative Compound Returns</td></tr>
+<tr><td>投资组合市值 (12% CAGR)</td><td>Portfolio Value (12% CAGR)</td></tr>
+<tr><td>累计投入 (Cost Basis)</td><td>Total Invested (Cost Basis)</td></tr>
+<tr><td>关键洞察</td><td>Key Insight</td></tr>
+</tbody>
+</table>
+
+<h3>4.6 员工 Widget — 计划监控 (ProX / OMC)</h3>
+
+<div class="ui-widget">
+  <div class="widget-header">
+    <div class="dot active"></div><div class="dot"></div><div class="dot"></div>
+    <div class="widget-title">ProX / OMC — PRP 计划监控面板</div>
+  </div>
+  <div class="widget-body">
+    <div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
+      <div class="mock-field" style="max-width:140px;">全部交易所 ▼</div>
+      <div class="mock-field" style="max-width:140px;">全部状态 ▼</div>
+      <div class="mock-field" style="max-width:200px;">搜索客户/代码...</div>
+      <button class="mock-btn">刷新</button>
+      <button class="mock-btn ghost">导出 CSV</button>
+    </div>
+    <div style="font-size:12px;color:var(--text2);margin-bottom:12px;">
+      活跃计划: <b style="color:#fff;">1,247</b> · 今日待执行: <b style="color:var(--accent);">83</b> · 异常: <b style="color:var(--red);">2</b>
+    </div>
+    <table style="margin:0;">
+    <thead><tr><th>计划编号</th><th>客户ID</th><th>标的</th><th>金额</th><th>频率</th><th>状态</th><th>操作</th></tr></thead>
+    <tbody>
+    <tr><td>PRP-0001</td><td>C12034</td><td>NVDA</td><td>$1,000</td><td>每月</td><td><span class="tag tag-green">ACTIVE</span></td><td><button class="mock-btn ghost" style="padding:4px 10px;font-size:11px;">详情</button> <button class="mock-btn ghost" style="padding:4px 10px;font-size:11px;">代客修改</button></td></tr>
+    <tr style="background:var(--surface2);"><td>PRP-0042</td><td>C08712</td><td>0700</td><td>HK$5,000</td><td>每周</td><td><span class="tag tag-green">ACTIVE</span></td><td><button class="mock-btn ghost" style="padding:4px 10px;font-size:11px;">详情</button> <button class="mock-btn ghost" style="padding:4px 10px;font-size:11px;">代客修改</button></td></tr>
+    <tr><td>PRP-0103</td><td>C29105</td><td>AAPL</td><td>$500</td><td>每日</td><td><span class="tag tag-amber">PAUSED</span></td><td><button class="mock-btn ghost" style="padding:4px 10px;font-size:11px;">详情</button> <button class="mock-btn ghost" style="padding:4px 10px;font-size:11px;">代客修改</button></td></tr>
+    </tbody>
+    </table>
+    <div class="field-hint" style="margin-top:8px;">支持双击表格行快速进入修改模式，员工可代投资者修改计划参数。修改操作记录审计日志并标记 modified_by_role=STAFF。</div>
+  </div>
+</div>
+
+<table style="font-size:12px;margin-top:8px;">
+<thead><tr><th colspan="2" style="text-align:center;background:var(--surface);color:var(--accent);">UI 字段中英对照 (Bilingual Reference) — 员工计划监控</th></tr></thead>
+<tbody>
+<tr><td>计划监控面板</td><td>Plan Monitoring Dashboard</td></tr>
+<tr><td>全部交易所</td><td>All Exchanges</td></tr>
+<tr><td>全部状态</td><td>All Statuses</td></tr>
+<tr><td>搜索客户/代码...</td><td>Search client/code...</td></tr>
+<tr><td>刷新</td><td>Refresh</td></tr>
+<tr><td>导出 CSV</td><td>Export CSV</td></tr>
+<tr><td>活跃计划</td><td>Active Plans</td></tr>
+<tr><td>今日待执行</td><td>Today Pending</td></tr>
+<tr><td>异常</td><td>Anomalies</td></tr>
+<tr><td>计划编号</td><td>Plan ID</td></tr>
+<tr><td>客户ID</td><td>Client ID</td></tr>
+<tr><td>标的</td><td>Instrument</td></tr>
+<tr><td>金额</td><td>Amount</td></tr>
+<tr><td>频率</td><td>Frequency</td></tr>
+<tr><td>状态</td><td>Status</td></tr>
+<tr><td>操作</td><td>Actions</td></tr>
+<tr><td>详情</td><td>Details</td></tr>
+<tr><td>代客修改</td><td>Modify on Behalf</td></tr>
+<tr><td>支持双击表格行快速进入修改模式...</td><td>Double-click row to enter modification mode...</td></tr>
+</tbody>
+</table>
+
+<h3>4.7 员工 Widget — B3 报表样本</h3>
+
+<div class="ui-widget">
+  <div class="widget-header">
+    <div class="dot active"></div><div class="dot"></div><div class="dot"></div>
+    <div class="widget-title">OMC — PRP 月度报表 (2026年7月)</div>
+  </div>
+  <div class="widget-body">
+    <div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
+      <div class="mock-field" style="max-width:140px;">2026 年 7 月</div>
+      <div class="mock-field" style="max-width:140px;">全部交易所 ▼</div>
+      <button class="mock-btn">导出 PDF</button>
+      <button class="mock-btn ghost">导出 Excel</button>
+    </div>
+
+    <div class="grid3" style="margin-bottom:16px;">
+      <div class="forecast-box">
+        <div class="fl">活跃计划数</div>
+        <div class="fv" style="color:#fff;">1,247</div>
+        <div style="font-size:10px;color:var(--green);">+38 vs 上月</div>
+      </div>
+      <div class="forecast-box">
+        <div class="fl">月执行次数</div>
+        <div class="fv" style="color:#fff;">18,962</div>
+        <div style="font-size:10px;color:var(--green);">成功率 99.2%</div>
+      </div>
+      <div class="forecast-box">
+        <div class="fl">月总投入金额</div>
+        <div class="fv" style="color:#fff;">US$8.3M</div>
+        <div style="font-size:10px;color:var(--text2);">折合 HK$64.7M / CNY59.6M</div>
+      </div>
+    </div>
+
+    <table style="margin:0;">
+    <thead><tr><th>交易所</th><th>活跃计划</th><th>执行次数</th><th>成功</th><th>失败</th><th>总金额</th><th>平均每笔</th></tr></thead>
+    <tbody>
+    <tr><td>US</td><td>852</td><td>13,440</td><td>13,350</td><td style="color:var(--red);">90</td><td>$6.2M</td><td>$464</td></tr>
+    <tr><td>HK</td><td>298</td><td>4,312</td><td>4,288</td><td style="color:var(--red);">24</td><td>HK$16.4M</td><td>HK$3,820</td></tr>
+    <tr><td>CN</td><td>97</td><td>1,210</td><td>1,196</td><td style="color:var(--red);">14</td><td>CNY5.8M</td><td>CNY4,849</td></tr>
+    </tbody>
+    </table>
+
+    <div style="margin-top:12px;font-size:12px;color:var(--text2);">
+      失败清单 (TOP 3): <span style="color:var(--red);">资金不足 (62)</span> · <span style="color:var(--red);">停牌 (38)</span> · <span style="color:var(--red);">系统超时 (28)</span>
+    </div>
+  </div>
+</div>
+
+<table style="font-size:12px;margin-top:8px;">
+<thead><tr><th colspan="2" style="text-align:center;background:var(--surface);color:var(--accent);">UI 字段中英对照 (Bilingual Reference) — 月度报表</th></tr></thead>
+<tbody>
+<tr><td>月度报表</td><td>Monthly Report</td></tr>
+<tr><td>导出 PDF</td><td>Export PDF</td></tr>
+<tr><td>导出 Excel</td><td>Export Excel</td></tr>
+<tr><td>活跃计划数</td><td>Active Plans</td></tr>
+<tr><td>月执行次数</td><td>Monthly Executions</td></tr>
+<tr><td>月总投入金额</td><td>Monthly Total Investment</td></tr>
+<tr><td>交易所</td><td>Exchange</td></tr>
+<tr><td>成功</td><td>Success</td></tr>
+<tr><td>失败</td><td>Failed</td></tr>
+<tr><td>总金额</td><td>Total Amount</td></tr>
+<tr><td>平均每笔</td><td>Avg per Trade</td></tr>
+<tr><td>失败清单 (TOP 3)</td><td>Failure List (TOP 3)</td></tr>
+</tbody>
+</table>
+
+<h3>4.8 设计风格</h3>
+<div class="note">
+  <strong>说明：</strong>PRP Widget 的视觉风格（配色、字体、间距、组件样式）应与嵌入的宿主产品（eServices / ProX / OMC）保持一致，由开发团队按各产品现有 Design System 实现。本报告中的 Wireframe 仅供布局参考。
+</div>
+</div>
+
+<div class="section" id="c5">
+<h2><span class="num">5</span> 技术架构 & 集成方案</h2>
+
+<h3>5.1 N2N-AFE 系统集成架构</h3>
+
+<div class="arch-layer layer-front">
+  <h4>展示层 — Embedded Widget</h4>
+  <p>投资者端 (eServices) + 员工端 (ProX / OMC) — 同一组件，通过 G3SF API 通信。</p>
+</div>
+
+<div class="flow-arrow">▼</div>
+
+<div class="arch-layer layer-trade">
+  <h4>G3SF — 前台交易系统</h4>
+  <p>
+    <strong>存储:</strong> 计划数据 (plans)、执行记录 (executions)、审计日志 (modifications)<br>
+    <strong>调度:</strong> 08:00 HKT（亚洲市场）/ 20:00 HKT（美股市场）定时扫描待执行计划<br>
+    <strong>订单生成:</strong> 根据计划参数 + 市场规则计算股数、生成订单发送至券商 OMS<br>
+    <strong>API:</strong> RESTful API 供 Widget 调用
+  </p>
+</div>
+
+<div class="flow-arrow">▼</div>
+
+<div class="arch-layer layer-settle">
+  <h4>G3SB — 后台结算系统</h4>
+  <p>
+    PRP 成交数据基于现有 G3SB 与券商 OMS 之间的数据交换机制处理，无需新增接口。成交回报中标记 <code>trade_remark</code> 为 PRP 投资计划，G3SB 据此更新投资者持仓并将执行结果回写 execution 记录。
+  </p>
+</div>
+
+<div class="flow-arrow">▼</div>
+
+<div class="arch-layer layer-data">
+  <h4>数据层 — 使用现有数据库</h4>
+  <p>
+    PRP 数据表 (plans / plan_executions / plan_modifications) 存放于现有 G3SF 数据库实例中，无需新建独立数据库。通过 <code>g3sf_order_id</code> 与订单系统关联追踪。
+  </p>
+</div>
+
+<h3>5.2 数据流详解</h3>
+
+<div class="flow-step">
+  <div class="step-num">1</div>
+  <div class="step-body">
+    <div class="step-title">投资者创建 PRP 计划 → Widget 调用 G3SF API</div>
+    <div class="step-desc">POST /api/prp/plans → G3SF 校验参数 → 存入 plans 表 → 返回 plan_id</div>
+  </div>
+</div>
+<div class="flow-step">
+  <div class="step-num">2</div>
+  <div class="step-body">
+    <div class="step-title">Scheduler 定时扫描 → 生成执行记录</div>
+    <div class="step-desc">08:00 / 20:00 HKT → 查询 ACTIVE 计划，判断今天是否为执行日 → INSERT INTO plan_executions (PENDING)</div>
+  </div>
+</div>
+<div class="flow-step">
+  <div class="step-num">3</div>
+  <div class="step-body">
+    <div class="step-title">计算股数 → 生成订单 → 发送至券商 OMS</div>
+    <div class="step-desc">G3SF 根据 fractional_handling 计算 quantity → 创建 G3SF 订单（trade_remark="PRP"） → 路由至券商 OMS</div>
+  </div>
+</div>
+<div class="flow-step">
+  <div class="step-num">4</div>
+  <div class="step-body">
+    <div class="step-title">OMS 成交 → G3SB 结算 → 更新持仓</div>
+    <div class="step-desc">基于现有 G3SB-OMS 数据交换 → 结算处理 → 更新投资者持仓 → 回写 execution（EXECUTED, price, fees）</div>
+  </div>
+</div>
+<div class="flow-step">
+  <div class="step-num">5</div>
+  <div class="step-body">
+    <div class="step-title">更新计划累计统计 + 发送邮件通知</div>
+    <div class="step-desc">更新 plans（total_invested / total_units / avg_cost / execution_count） → 发送执行成功邮件给投资者</div>
+  </div>
+</div>
+
+
+<h3>5.3 错误处理与重试机制</h3>
+
+<div class="info-card">
+  <div class="value" style="font-size:15px;">5.3.1 资金不足处理 (SHORTFUND)</div>
+  <ul style="padding-left:20px;color:var(--text2);font-size:13px;line-height:2;">
+    <li>系统在生成订单前，通过 G3SF 尝试<strong>预留/冻结</strong>购买所需资金（金额 + 预估费用）</li>
+    <li>若账户可用资金不足 → 执行记录标记为 <span class="tag tag-red">REJECTED</span>（error_code=<code>SHORTFUND</code>）</li>
+    <li>发送邮件通知客户：<strong>PRP 执行失败 — 账户资金不足</strong>，邮件包含：计划详情、所需金额、账户可用余额</li>
+    <li>客户需自行手动补购该期份额（系统<strong>不追溯补单</strong>）</li>
+    <li>系统在<strong>下一执行周期</strong>自动重新触发（按正常计划参数执行，不累积失败期数）</li>
+  </ul>
+</div>
+
+<div class="info-card">
+  <div class="value" style="font-size:15px;">5.3.2 标的停牌处理 (SUSPENDED)</div>
+  <ul style="padding-left:20px;color:var(--text2);font-size:13px;line-height:2;">
+    <li>执行日扫描时，校验标的交易状态</li>
+    <li>若标的处于停牌状态 → 执行记录标记为 <span class="tag tag-amber">REJECTED</span>（error_code=<code>SUSPENDED</code>）</li>
+    <li>发送邮件通知客户：<strong>PRP 执行失败 — 标的已停牌</strong></li>
+    <li>该笔不补单，系统在<strong>下一执行周期</strong>按正常流程重新尝试</li>
+  </ul>
+</div>
+
+<div class="info-card">
+  <div class="value" style="font-size:15px;">5.3.3 无效订单��格重试 (PRICE_REJECTED)</div>
+  <ul style="padding-left:20px;color:var(--text2);font-size:13px;line-height:2;">
+    <li>若订单提交至交易所后因<strong>无效价格</strong>（如超出涨跌停范围、报价单位不符等）被拒绝</li>
+    <li>系统自动重试，重试次数 <strong>X</strong> 由系统配置（默认 3 次），每次间隔 <strong>Y 秒</strong>（默认 30 秒）</li>
+    <li>每次重试时重新获取最新市价并调整订单价格</li>
+    <li>重试 X 次后仍全部失败 → 执行记录标记为 <span class="tag tag-red">FAILED</span>（error_code=<code>PRICE_REJECTED</code>）</li>
+    <li>发送邮件通知客户：<strong>PRP 执行失败 — 订单价格无效，已重试 X 次</strong></li>
+  </ul>
+</div>
+
+<h4 style="color:#fff;font-size:13px;margin-top:20px;">5.3.4 拒绝邮件清单</h4>
+<table>
+<thead><tr><th>error_code</th><th>邮件主题</th><th>触发条件</th><th>后续动作</th></tr></thead>
+<tbody>
+<tr><td><span class="tag tag-red">SHORTFUND</span></td><td>PRP 执行失败 — 账户资金不足</td><td>预扣资金时账户余额不足</td><td>客户手动补购；下周期自动重试</td></tr>
+<tr><td><span class="tag tag-amber">SUSPENDED</span></td><td>PRP 执行失败 — 标的已停牌</td><td>执行日标的处于停牌状态</td><td>下周期自动重试</td></tr>
+<tr><td><span class="tag tag-purple">PRICE_REJECTED</span></td><td>PRP 执行失败 — 订单价格无效</td><td>交易所拒单，重试 X 次后仍失败</td><td>标记 FAILED，不再重试</td></tr>
+<tr><td><span class="tag tag-blue">SYSTEM_ERROR</span></td><td>PRP 执行失败 — 系统异常</td><td>G3SF/G3SB 内部错误或超时</td><td>员工人工介入</td></tr>
+</tbody>
+</table>
+
+<h4 style="color:#fff;font-size:13px;margin-top:20px;">5.3.5 系统配置参数</h4>
+<div class="code-block">
+<span class="kw">execution</span>:
+  <span class="cm"># 价格重试</span>
+  <span class="var">price_retry_count</span>: <span class="str">3</span>             <span class="cm"># 无效价格最大重试次数</span>
+  <span class="var">price_retry_interval_sec</span>: <span class="str">30</span>    <span class="cm"># 每次重试间隔（秒）</span>
+
+  <span class="cm"># 资金预扣</span>
+  <span class="var">prehold_fund_check</span>: <span class="str">true</span>         <span class="cm"># 执行前是否预扣资金检查</span>
+  <span class="var">prehold_buffer_pct</span>: <span class="str">5</span>          <span class="cm"># 预扣金额缓冲百分比（覆盖费用波动）</span>
+
+  <span class="cm"># 交易状态检查</span>
+  <span class="var">check_trading_status</span>: <span class="str">true</span>      <span class="cm"># 执行前检查标的是否可交易</span>
+</div>
+
+<h3>5.4 API 接口规范（建议）</h3>
+<table>
+<thead><tr><th>方法</th><th>路径</th><th>说明</th><th>调用方</th></tr></thead>
+<tbody>
+<tr><td><span class="tag tag-green">POST</span></td><td><code>/api/v1/prp/plans</code></td><td>创建 PRP 计划</td><td>Investor Widget</td></tr>
+<tr><td><span class="tag tag-blue">GET</span></td><td><code>/api/v1/prp/plans?client_id=...</code></td><td>查询客户计划列表</td><td>Investor Widget</td></tr>
+<tr><td><span class="tag tag-blue">GET</span></td><td><code>/api/v1/prp/plans/{plan_id}</code></td><td>计划详情</td><td>Investor & Staff Widget</td></tr>
+<tr><td><span class="tag tag-amber">PUT</span></td><td><code>/api/v1/prp/plans/{plan_id}</code></td><td>修改计划</td><td>Investor Widget</td></tr>
+<tr><td><span class="tag tag-amber">PATCH</span></td><td><code>/api/v1/prp/plans/{plan_id}/status</code></td><td>暂停/恢复/取消</td><td>Investor & Staff Widget</td></tr>
+<tr><td><span class="tag tag-blue">GET</span></td><td><code>/api/v1/prp/plans/{plan_id}/executions</code></td><td>执行历史</td><td>Investor Widget</td></tr>
+<tr><td><span class="tag tag-blue">GET</span></td><td><code>/api/v1/prp/staff/executions/today</code></td><td>今日执行清单</td><td>Staff Widget</td></tr>
+<tr><td><span class="tag tag-blue">GET</span></td><td><code>/api/v1/prp/staff/plans?status=...&exchange=...</code></td><td>员工计划总览</td><td>Staff Widget</td></tr>
+<tr><td><span class="tag tag-blue">GET</span></td><td><code>/api/v1/prp/staff/reports/monthly</code></td><td>月度报表</td><td>Staff Widget</td></tr>
+</tbody>
+</table>
+</div>
+
+<footer>
+  N2N-AFE — PRP (Periodic Recurring Program) System Design v1.3<br>
+  Prepared by Jagon Li · 2026-08-03 · Internal Document
+</footer>
+
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..fba1a55
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { getElementPlusLocale } from '@/element-plus/locale'
+import { useAppStore } from '@/stores/app'
+import { useAuthStore } from '@/stores/auth'
+import { useServiceI18nStore } from '@/stores/serviceI18n'
+
+const route = useRoute()
+const appStore = useAppStore()
+const authStore = useAuthStore()
+const serviceI18nStore = useServiceI18nStore()
+
+const elementLocale = computed(() => getElementPlusLocale(appStore.locale))
+
+watch(
+  () => route.query,
+  (query) => {
+    appStore.syncFromRouteQuery(query)
+    authStore.syncContextFromQuery(query)
+  },
+  { immediate: true },
+)
+
+/** 首屏由 main.ts 拉取多语言；仅 URL token 变更时再 reload，避免重复请求 */
+watch(
+  () => {
+    const raw = route.query.token
+    return Array.isArray(raw) ? raw[0] : raw
+  },
+  (token, prevToken) => {
+    if (!token) {
+      return
+    }
+    authStore.setTokenManually(token)
+    if (prevToken !== undefined && token !== prevToken) {
+      serviceI18nStore.reload().catch(() => undefined)
+    }
+  },
+)
+</script>
+
+<template>
+  <el-config-provider :locale="elementLocale">
+    <div class="app-shell">
+      <div class="app-container">
+        <RouterView />
+      </div>
+    </div>
+  </el-config-provider>
+</template>
diff --git a/src/api/base.ts b/src/api/base.ts
new file mode 100644
index 0000000..d4c40de
--- /dev/null
+++ b/src/api/base.ts
@@ -0,0 +1,15 @@
+import http from '@/api/http'
+import type { ApiResponse } from '@/types/api'
+
+export interface SystemI18n {
+  id: string
+  scDescription: string
+  tcDescription: string
+  enDescription: string
+  vnDescription?: string
+  remark?: string
+}
+
+export function getSystemI18nAllList(): Promise<ApiResponse<SystemI18n[]>> {
+  return http.post('/base/systemI18n/getAllList', {})
+}
diff --git a/src/api/http.ts b/src/api/http.ts
new file mode 100644
index 0000000..ed71e2c
--- /dev/null
+++ b/src/api/http.ts
@@ -0,0 +1,89 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { useAppStore } from '@/stores/app'
+import { useAuthStore } from '@/stores/auth'
+import { getToken, removeToken } from '@/utils/token'
+
+function resolveBaseURL(): string {
+  const configured = import.meta.env.VITE_API_BASE_URL?.trim()
+  if (configured) {
+    return configured.replace(/\/+$/, '')
+  }
+  return ''
+}
+
+const http = axios.create({
+  baseURL: resolveBaseURL(),
+  timeout: 15000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+http.interceptors.request.use(
+  (config) => {
+    const token = getToken()
+    if (token) {
+      config.headers.token = token
+    }
+    try {
+      const appStore = useAppStore()
+      config.headers['Accept-Language'] = appStore.locale
+    } catch {
+      config.headers['Accept-Language'] = 'zh-TW'
+    }
+    try {
+      const authStore = useAuthStore()
+      const { clientId, accountId } = authStore
+      if (clientId || accountId) {
+        const base =
+          config.data !== undefined &&
+          typeof config.data === 'object' &&
+          config.data !== null &&
+          !(config.data instanceof FormData)
+            ? { ...(config.data as Record<string, unknown>) }
+            : {}
+        if (clientId) {
+          base.clientId = clientId
+        }
+        if (accountId) {
+          base.accountId = accountId
+        }
+        config.data = base
+      }
+    } catch {
+      // pinia 未就绪时跳过
+    }
+    return config
+  },
+  (error) => Promise.reject(error),
+)
+
+http.interceptors.response.use(
+  (response) => {
+    const { data } = response
+    if (data?.code === '0' || data?.code === 0) {
+      return data
+    }
+    if (data?.code === '401' || data?.code === 401 || data?.code === '403' || data?.code === 403) {
+      removeToken()
+      ElMessage.error(data?.message || '登录已过期，请重新登录')
+      return Promise.reject(new Error(data?.message || 'Unauthorized'))
+    }
+    if (data?.message) {
+      ElMessage.error(data.message)
+    }
+    return Promise.reject(new Error(data?.message || '请求失败'))
+  },
+  (error) => {
+    if (error.response?.status === 401 || error.response?.status === 403) {
+      removeToken()
+      ElMessage.error('登录已过期，请重新登录')
+    } else if (error.response?.data?.message) {
+      ElMessage.error(error.response.data.message)
+    }
+    return Promise.reject(error)
+  },
+)
+
+export default http
diff --git a/src/api/product.ts b/src/api/product.ts
new file mode 100644
index 0000000..217ae3d
--- /dev/null
+++ b/src/api/product.ts
@@ -0,0 +1,50 @@
+import http from '@/api/http'
+import type { ApiResponse } from '@/types/api'
+
+/** `getSimpleStockPage` 单条标的 */
+export interface SimpleStockItem {
+  engName: string
+  exchangeCode: string
+  fractionalBase: number | null
+  isin: string
+  lastActiveDate: string
+  localName: string
+  productCode: string
+  productCodeUnique: string
+  productKey: string
+  productType: string
+}
+
+export interface SimpleStockPageRequest {
+  current: number
+  size: number
+  searchName: string
+  exchangeCodes: string[]
+  isUpdatedToday: boolean
+}
+
+export interface SimpleStockPageData {
+  records: SimpleStockItem[]
+  total?: number
+  current?: number
+  size?: number
+}
+
+/** 简易股票分页（定期投资资产搜索） */
+export function getSimpleStockPage(
+  params: SimpleStockPageRequest,
+): Promise<ApiResponse<SimpleStockPageData | SimpleStockItem[]>> {
+  return http.post('/product/product/getSimpleStockPage', params)
+}
+
+export function extractSimpleStockRecords(
+  data: SimpleStockPageData | SimpleStockItem[] | null | undefined,
+): SimpleStockItem[] {
+  if (!data) {
+    return []
+  }
+  if (Array.isArray(data)) {
+    return data
+  }
+  return Array.isArray(data.records) ? data.records : []
+}
diff --git a/src/api/scheduleInvestment.ts b/src/api/scheduleInvestment.ts
new file mode 100644
index 0000000..a2baba6
--- /dev/null
+++ b/src/api/scheduleInvestment.ts
@@ -0,0 +1,70 @@
+import http from '@/api/http'
+import type { ApiResponse } from '@/types/api'
+import type {
+  ScheduleInvestmentCreateBody,
+  ScheduleInvestmentExchangeItem,
+  ScheduleInvestmentPlanDetailData,
+  ScheduleInvestmentPlanDetailRequest,
+  ScheduleInvestmentPlanPageData,
+  ScheduleInvestmentNextExecutionData,
+  ScheduleInvestmentNextExecutionRequest,
+  ScheduleInvestmentPlanPageRequest,
+  ScheduleInvestmentPlanTerminateRequest,
+} from '@/types/scheduleInvestment'
+
+/** 定期投资可选交易所列表 */
+export function getScheduleInvestmentExchanges(): Promise<
+  ApiResponse<ScheduleInvestmentExchangeItem[]>
+> {
+  return http.post('/trade/schedule-investment/exchanges', {})
+}
+
+/** 创建定期投资计划 */
+export function createScheduleInvestmentPlan(
+  body: ScheduleInvestmentCreateBody,
+): Promise<ApiResponse<unknown>> {
+  return http.post('/trade/schedule-investment/plan/create', body)
+}
+
+const EMPTY_PLAN_PAGE_FILTERS = {
+  accountCode: '',
+  exchangeCode: '',
+  productCode: '',
+  status: '',
+  investmentType: '',
+  orderPriceType: '',
+  startDate: '',
+  endDate: '',
+} as const
+
+/** 定期投资计划分页列表 */
+export function getScheduleInvestmentPlanPage(
+  params: Pick<ScheduleInvestmentPlanPageRequest, 'current' | 'size'> &
+    Partial<Omit<ScheduleInvestmentPlanPageRequest, 'current' | 'size'>>,
+): Promise<ApiResponse<ScheduleInvestmentPlanPageData>> {
+  return http.post('/trade/schedule-investment/plan/page', {
+    ...EMPTY_PLAN_PAGE_FILTERS,
+    ...params,
+  })
+}
+
+/** 定期投资计划详情（含最近执行记录） */
+export function getScheduleInvestmentPlanDetail(
+  body: ScheduleInvestmentPlanDetailRequest,
+): Promise<ApiResponse<ScheduleInvestmentPlanDetailData>> {
+  return http.post('/trade/schedule-investment/plan/detail', body)
+}
+
+/** 终止定期投资计划 */
+export function terminateScheduleInvestmentPlan(
+  body: ScheduleInvestmentPlanTerminateRequest,
+): Promise<ApiResponse<unknown>> {
+  return http.post('/trade/schedule-investment/plan/terminate', body)
+}
+
+/** 预览下次计划执行（节假日调整后的执行日与时点） */
+export function previewScheduleInvestmentNextExecution(
+  body: ScheduleInvestmentNextExecutionRequest,
+): Promise<ApiResponse<ScheduleInvestmentNextExecutionData>> {
+  return http.post('/trade/schedule-investment/plan/next-execution', body)
+}
diff --git a/src/assets/hero.png b/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/src/assets/hero.png differ
diff --git a/src/components/layout/AppPage.vue b/src/components/layout/AppPage.vue
new file mode 100644
index 0000000..dd97491
--- /dev/null
+++ b/src/components/layout/AppPage.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  /** 是否使用更窄的标题区（表单页等） */
+  dense?: boolean
+}>()
+</script>
+
+<template>
+  <main class="app-page" :class="{ 'app-page--dense': dense }">
+    <slot />
+  </main>
+</template>
+
+<style scoped lang="scss">
+.app-page--dense {
+  max-width: 48rem;
+}
+</style>
diff --git a/src/components/recurring/AssetChipPicker.vue b/src/components/recurring/AssetChipPicker.vue
new file mode 100644
index 0000000..0c57f7b
--- /dev/null
+++ b/src/components/recurring/AssetChipPicker.vue
@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { InvestAsset } from '@/types/recurringInvestment'
+import {
+  investAssetDisplayCode,
+  investAssetDisplayName,
+  investAssetOptionKey,
+  resolveAppLocale,
+} from '@/utils/investAssetDisplay'
+
+const props = defineProps<{
+  assets: InvestAsset[]
+  modelValue: InvestAsset[]
+  invalid?: boolean
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: InvestAsset[]]
+  search: [keyword: string]
+}>()
+
+const { t, locale } = useI18n()
+
+function assetDisplayName(asset: InvestAsset) {
+  return investAssetDisplayName(asset, resolveAppLocale(locale.value))
+}
+const query = ref('')
+const open = ref(false)
+const wrapRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const pickedCodes = computed(
+  () => new Set(props.modelValue.map((item) => investAssetOptionKey(item))),
+)
+
+const filtered = computed(() => {
+  const keyword = query.value.trim().toLowerCase()
+  return props.assets.filter((item) => {
+    if (pickedCodes.value.has(investAssetOptionKey(item))) {
+      return false
+    }
+    if (!keyword) {
+      return true
+    }
+    const code = investAssetDisplayCode(item).toLowerCase()
+    const name = investAssetDisplayName(item).toLowerCase()
+    const eng = item.engName?.trim().toLowerCase() ?? ''
+    const raw = item.code.toLowerCase()
+    return (
+      code.includes(keyword) ||
+      raw.includes(keyword) ||
+      name.includes(keyword) ||
+      (eng && eng.includes(keyword))
+    )
+  })
+})
+
+const hasSelection = computed(() => props.modelValue.length > 0)
+
+function focusInput() {
+  if (props.disabled) {
+    return
+  }
+  if (hasSelection.value) {
+    open.value = true
+    return
+  }
+  inputRef.value?.focus()
+}
+
+function pick(asset: InvestAsset) {
+  if (props.disabled) {
+    return
+  }
+  emit('update:modelValue', [asset])
+  query.value = ''
+  open.value = false
+}
+
+function removeAt(index: number) {
+  const next = props.modelValue.slice()
+  next.splice(index, 1)
+  emit('update:modelValue', next)
+}
+
+function onInputFocus() {
+  if (!props.disabled) {
+    open.value = true
+  }
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Backspace' && !query.value && props.modelValue.length) {
+    removeAt(props.modelValue.length - 1)
+  }
+  if (event.key === 'Escape') {
+    open.value = false
+  }
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!wrapRef.value?.contains(event.target as Node)) {
+    open.value = false
+  }
+}
+
+watch(query, (value) => {
+  if (!props.disabled) {
+    emit('search', value.trim())
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+})
+</script>
+
+<template>
+  <div ref="wrapRef" class="asset-wrap">
+    <div
+      class="asset-box"
+      :class="{ 'asset-box--err': invalid, 'asset-box--disabled': disabled }"
+      @click="focusInput"
+    >
+      <span v-for="(asset, index) in modelValue" :key="investAssetOptionKey(asset)" class="asset-chip">
+        {{ investAssetDisplayCode(asset) }}
+        <button
+          type="button"
+          class="asset-chip__remove"
+          :aria-label="t('recurring.removeAsset', { code: investAssetDisplayCode(asset) })"
+          @click.stop="removeAt(index)"
+        >
+          <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M2.5 2.5l7 7M9.5 2.5l-7 7" />
+          </svg>
+        </button>
+      </span>
+      <span
+        v-if="disabled && !modelValue.length"
+        class="asset-placeholder"
+      >
+        {{ t('recurring.pleaseSelect') }}
+      </span>
+      <input
+        v-else-if="!hasSelection"
+        ref="inputRef"
+        v-model="query"
+        class="asset-input"
+        :placeholder="t('recurring.assetPlaceholder')"
+        autocomplete="off"
+        @focus="onInputFocus"
+        @keydown="onKeydown"
+      />
+    </div>
+    <div v-show="open" class="asset-drop" role="listbox">
+      <button
+        v-for="asset in filtered"
+        :key="investAssetOptionKey(asset)"
+        type="button"
+        class="asset-opt"
+        @click="pick(asset)"
+      >
+        <span class="asset-opt__code">{{ investAssetDisplayCode(asset) }}</span>
+        <span class="asset-opt__name">{{ assetDisplayName(asset) }}</span>
+        <span class="asset-opt__type">{{ t(`recurring.assetType.${asset.type}`) }}</span>
+      </button>
+      <div v-if="loading" class="asset-none">{{ t('recurring.assetLoading') }}</div>
+      <div v-else-if="!filtered.length" class="asset-none">{{ t('recurring.assetEmpty') }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.asset-wrap {
+  position: relative;
+}
+
+.asset-box {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 6px;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--el-component-size, 32px);
+  padding: 1px 11px;
+  border: 1px solid var(--color-control-border);
+  border-radius: var(--radius);
+  background: var(--color-control-bg);
+  cursor: text;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:focus-within {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-soft);
+  }
+
+  &--err {
+    border-color: var(--color-down);
+    box-shadow: 0 0 0 3px var(--color-down-soft);
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    background: var(--color-control-bg);
+
+    &:focus-within {
+      border-color: var(--color-control-border);
+      box-shadow: none;
+    }
+  }
+}
+
+.asset-placeholder {
+  flex: 1;
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.asset-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 2px 4px 2px 8px;
+  border-radius: 20px;
+  background: var(--color-text);
+  color: var(--color-bg);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+
+  [data-theme='dark'] & {
+    background: var(--color-primary);
+    color: #0a0f16;
+  }
+}
+
+.asset-chip__remove {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 25%);
+  color: inherit;
+  cursor: pointer;
+
+  [data-theme='dark'] & {
+    background: rgb(0 0 0 / 20%);
+  }
+}
+
+.asset-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--color-text);
+
+  &::placeholder {
+    color: var(--color-muted);
+    opacity: 1;
+  }
+
+  @include respond-down(md) {
+    min-width: 0;
+  }
+}
+
+.asset-drop {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  left: 0;
+  z-index: 30;
+  max-height: 220px;
+  overflow-y: auto;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
+}
+
+.asset-opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 44px;
+  padding: 9px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-primary-soft);
+  }
+}
+
+.asset-opt__code {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 12.5px;
+}
+
+.asset-opt__name {
+  color: var(--color-muted);
+  font-size: 12px;
+}
+
+.asset-opt__type {
+  margin-left: auto;
+  color: var(--color-primary-ink);
+  font-size: 10.5px;
+  font-weight: 600;
+}
+
+.asset-none {
+  padding: 12px;
+  color: var(--color-muted);
+  font-size: 12.5px;
+  text-align: center;
+}
+</style>
diff --git a/src/composables/useAccountContext.ts b/src/composables/useAccountContext.ts
new file mode 100644
index 0000000..9e30be2
--- /dev/null
+++ b/src/composables/useAccountContext.ts
@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+/** 当前 URL 中的 clientId / accountId（路由跳转经 useRouteWithPreferences 会保留） */
+export function useAccountContext() {
+  const authStore = useAuthStore()
+
+  const clientId = computed(() => authStore.clientId)
+  const accountId = computed(() => authStore.accountId)
+  const hasAccountContext = computed(() => !!authStore.clientId && !!authStore.accountId)
+
+  return {
+    clientId,
+    accountId,
+    hasAccountContext,
+  }
+}
diff --git a/src/composables/useBreakpoint.ts b/src/composables/useBreakpoint.ts
new file mode 100644
index 0000000..3730324
--- /dev/null
+++ b/src/composables/useBreakpoint.ts
@@ -0,0 +1,38 @@
+import { BREAKPOINTS_PX } from '@/constants/breakpoints'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+function readWidth() {
+  return window.innerWidth
+}
+
+export function useBreakpoint() {
+  const width = ref(readWidth())
+
+  const update = () => {
+    width.value = readWidth()
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', update, { passive: true })
+    update()
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', update)
+  })
+
+  const isMobile = computed(() => width.value < BREAKPOINTS_PX.md)
+  const isTablet = computed(
+    () => width.value >= BREAKPOINTS_PX.md && width.value < BREAKPOINTS_PX.lg,
+  )
+  const isDesktop = computed(() => width.value >= BREAKPOINTS_PX.lg)
+  const isWide = computed(() => width.value >= BREAKPOINTS_PX.xl)
+
+  return {
+    width,
+    isMobile,
+    isTablet,
+    isDesktop,
+    isWide,
+  }
+}
diff --git a/src/composables/useRouteWithPreferences.ts b/src/composables/useRouteWithPreferences.ts
new file mode 100644
index 0000000..299c8a1
--- /dev/null
+++ b/src/composables/useRouteWithPreferences.ts
@@ -0,0 +1,12 @@
+import { useRoute } from 'vue-router'
+
+/** 路由跳转时保留当前 URL 中的 lang / theme 等查询参数 */
+export function useRouteWithPreferences() {
+  const route = useRoute()
+
+  function linkTo(path: string) {
+    return { path, query: route.query }
+  }
+
+  return { linkTo }
+}
diff --git a/src/composables/useServiceI18n.ts b/src/composables/useServiceI18n.ts
new file mode 100644
index 0000000..10836fe
--- /dev/null
+++ b/src/composables/useServiceI18n.ts
@@ -0,0 +1,17 @@
+import { useAppStore } from '@/stores/app'
+import { useServiceI18nStore } from '@/stores/serviceI18n'
+
+/** 服务端多语言 ID 解析（参考 Order-H5 localeStore.getI18n） */
+export function useServiceI18n() {
+  const appStore = useAppStore()
+  const serviceI18nStore = useServiceI18nStore()
+
+  function si18n(id: string | undefined) {
+    return serviceI18nStore.getText(id, appStore.locale)
+  }
+
+  return {
+    si18n,
+    reloadServiceI18n: serviceI18nStore.reload,
+  }
+}
diff --git a/src/composables/useUrlPreferences.ts b/src/composables/useUrlPreferences.ts
new file mode 100644
index 0000000..8362f68
--- /dev/null
+++ b/src/composables/useUrlPreferences.ts
@@ -0,0 +1,26 @@
+import { useRoute, useRouter } from 'vue-router'
+import type { AppPreferences } from '@/config/urlPreferences'
+import type { AppLocale } from '@/i18n/locale'
+import { useAppStore } from '@/stores/app'
+import type { AppTheme } from '@/theme/types'
+
+export function useUrlPreferences() {
+  const route = useRoute()
+  const router = useRouter()
+  const appStore = useAppStore()
+
+  function replacePreferences(partial: Partial<AppPreferences>) {
+    const query = appStore.buildQueryForPreferences(partial, route.query)
+    router.replace({ path: route.path, hash: route.hash, query })
+  }
+
+  function setLocale(next: AppLocale) {
+    replacePreferences({ locale: next })
+  }
+
+  function setTheme(next: AppTheme) {
+    replacePreferences({ theme: next })
+  }
+
+  return { setLocale, setTheme }
+}
diff --git a/src/config/appLocale.ts b/src/config/appLocale.ts
new file mode 100644
index 0000000..3b1e7a7
--- /dev/null
+++ b/src/config/appLocale.ts
@@ -0,0 +1,9 @@
+export const APP_LOCALES = ['zh-CN', 'zh-TW', 'en-US'] as const
+
+export type AppLocale = (typeof APP_LOCALES)[number]
+
+export const DEFAULT_LOCALE: AppLocale = 'zh-TW'
+
+export function isAppLocale(value: string | null): value is AppLocale {
+  return value !== null && (APP_LOCALES as readonly string[]).includes(value)
+}
diff --git a/src/config/urlContext.ts b/src/config/urlContext.ts
new file mode 100644
index 0000000..feb80f7
--- /dev/null
+++ b/src/config/urlContext.ts
@@ -0,0 +1,41 @@
+import type { LocationQuery } from 'vue-router'
+
+export const URL_PARAM_CLIENT_ID = 'clientId'
+export const URL_PARAM_ACCOUNT_ID = 'accountId'
+
+export interface UrlAccountContext {
+  clientId: string | null
+  accountId: string | null
+}
+
+function readQueryValue(query: LocationQuery, key: string): string | null {
+  const raw = query[key]
+  if (raw === undefined || raw === null) {
+    return null
+  }
+  const value = Array.isArray(raw) ? raw[0] : raw
+  if (value === undefined || value === null || value === '') {
+    return null
+  }
+  return value
+}
+
+function readSearchParam(search: string, key: string): string | null {
+  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search)
+  const value = params.get(key)
+  return value && value.trim() !== '' ? value : null
+}
+
+export function parseAccountContextFromSearch(search: string): UrlAccountContext {
+  return {
+    clientId: readSearchParam(search, URL_PARAM_CLIENT_ID),
+    accountId: readSearchParam(search, URL_PARAM_ACCOUNT_ID),
+  }
+}
+
+export function parseAccountContextFromQuery(query: LocationQuery): UrlAccountContext {
+  return {
+    clientId: readQueryValue(query, URL_PARAM_CLIENT_ID),
+    accountId: readQueryValue(query, URL_PARAM_ACCOUNT_ID),
+  }
+}
diff --git a/src/config/urlPreferences.ts b/src/config/urlPreferences.ts
new file mode 100644
index 0000000..9a67dea
--- /dev/null
+++ b/src/config/urlPreferences.ts
@@ -0,0 +1,88 @@
+import type { LocationQuery } from 'vue-router'
+import { DEFAULT_LOCALE, isAppLocale, type AppLocale } from '@/config/appLocale'
+import { APP_THEMES, DEFAULT_THEME, type AppTheme } from '@/theme/types'
+
+export const URL_PARAM_LANG = 'lang'
+export const URL_PARAM_THEME = 'theme'
+
+export interface AppPreferences {
+  locale: AppLocale
+  theme: AppTheme
+}
+
+function readQueryValue(query: LocationQuery, key: string): string | undefined {
+  const raw = query[key]
+  if (raw === undefined || raw === null) {
+    return undefined
+  }
+  const value = Array.isArray(raw) ? raw[0] : raw
+  if (value === undefined || value === null || value === '') {
+    return undefined
+  }
+  return value
+}
+
+function normalizeTheme(value: string | undefined): AppTheme {
+  if (!value) {
+    return DEFAULT_THEME
+  }
+  const lower = value.toLowerCase()
+  if (lower === 'day' || lower === 'light') {
+    return 'light'
+  }
+  if (lower === 'night' || lower === 'dark') {
+    return 'dark'
+  }
+  return APP_THEMES.includes(lower as AppTheme) ? (lower as AppTheme) : DEFAULT_THEME
+}
+
+function normalizeLocale(value: string | undefined): AppLocale {
+  if (!value) {
+    return DEFAULT_LOCALE
+  }
+  const normalized = value.replace('_', '-')
+  if (isAppLocale(normalized)) {
+    return normalized
+  }
+  return DEFAULT_LOCALE
+}
+
+export function parsePreferencesFromSearch(search: string): AppPreferences {
+  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search)
+  const lang = params.get(URL_PARAM_LANG) ?? params.get('locale')
+  const theme = params.get(URL_PARAM_THEME)
+  return {
+    locale: normalizeLocale(lang ?? undefined),
+    theme: normalizeTheme(theme ?? undefined),
+  }
+}
+
+export function parsePreferencesFromQuery(query: LocationQuery): AppPreferences {
+  const lang = readQueryValue(query, URL_PARAM_LANG) ?? readQueryValue(query, 'locale')
+  const theme = readQueryValue(query, URL_PARAM_THEME)
+  return {
+    locale: normalizeLocale(lang),
+    theme: normalizeTheme(theme),
+  }
+}
+
+export function preferencesToQuery(
+  preferences: AppPreferences,
+  existing: LocationQuery = {},
+): Record<string, string> {
+  const next: Record<string, string> = {}
+  for (const [key, value] of Object.entries(existing)) {
+    if (key === URL_PARAM_LANG || key === 'locale' || key === URL_PARAM_THEME) {
+      continue
+    }
+    if (value !== undefined && value !== null) {
+      const v = Array.isArray(value) ? value[0] : value
+      if (v !== undefined && v !== null && v !== '') {
+        next[key] = v
+      }
+    }
+  }
+  next[URL_PARAM_LANG] = preferences.locale
+  next[URL_PARAM_THEME] = preferences.theme
+  return next
+}
diff --git a/src/constants/breakpoints.ts b/src/constants/breakpoints.ts
new file mode 100644
index 0000000..8f8c50a
--- /dev/null
+++ b/src/constants/breakpoints.ts
@@ -0,0 +1,20 @@
+/** 与 `src/styles/breakpoints.scss` 保持数值一致 */
+export const BREAKPOINTS_PX = {
+  sm: 576,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const
+
+export type BreakpointToken = keyof typeof BREAKPOINTS_PX
+
+export const LAYOUT_MAX_WIDTH_PX = 1280
+
+/** 小于 md 视为移动端 */
+export const MOBILE_MAX_PX = BREAKPOINTS_PX.md - 1
+
+/** 平板：md ≤ width < lg */
+export const TABLET_MIN_PX = BREAKPOINTS_PX.md
+export const TABLET_MAX_PX = BREAKPOINTS_PX.lg - 1
+
+export const DESKTOP_MIN_PX = BREAKPOINTS_PX.lg
diff --git a/src/element-plus/locale.ts b/src/element-plus/locale.ts
new file mode 100644
index 0000000..7a31c4e
--- /dev/null
+++ b/src/element-plus/locale.ts
@@ -0,0 +1,15 @@
+import type { Language } from 'element-plus/es/locale'
+import en from 'element-plus/es/locale/lang/en'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import zhTw from 'element-plus/es/locale/lang/zh-tw'
+import type { AppLocale } from '@/config/appLocale'
+
+const elementPlusLocaleMap: Record<AppLocale, Language> = {
+  'zh-CN': zhCn,
+  'zh-TW': zhTw,
+  'en-US': en,
+}
+
+export function getElementPlusLocale(locale: AppLocale): Language {
+  return elementPlusLocaleMap[locale]
+}
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..8851d27
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+  readonly VITE_API_PROXY_TARGET?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..89d507b
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,18 @@
+import { createI18n } from 'vue-i18n'
+import { DEFAULT_LOCALE, resolveInitialLocale } from './locale'
+import enUS from './locales/en-US'
+import zhCN from './locales/zh-CN'
+import zhTW from './locales/zh-TW'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: resolveInitialLocale(),
+  fallbackLocale: DEFAULT_LOCALE,
+  messages: {
+    'zh-CN': zhCN,
+    'zh-TW': zhTW,
+    'en-US': enUS,
+  },
+})
+
+export default i18n
diff --git a/src/i18n/locale.ts b/src/i18n/locale.ts
new file mode 100644
index 0000000..c2748c2
--- /dev/null
+++ b/src/i18n/locale.ts
@@ -0,0 +1,7 @@
+export { APP_LOCALES, DEFAULT_LOCALE, isAppLocale, type AppLocale } from '@/config/appLocale'
+import { parsePreferencesFromSearch } from '@/config/urlPreferences'
+
+/** 首屏 i18n 初始化：仅从 URL 读取，缺省为繁体 */
+export function resolveInitialLocale() {
+  return parsePreferencesFromSearch(window.location.search).locale
+}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
new file mode 100644
index 0000000..f9d7eac
--- /dev/null
+++ b/src/i18n/locales/en-US.ts
@@ -0,0 +1,170 @@
+export default {
+  common: {
+    appName: 'Schedule Invest Plan',
+    language: 'Language',
+    theme: 'Theme',
+    themeLight: 'Light',
+    themeDark: 'Dark',
+  },
+  recurring: {
+    title: 'Recurring Investment',
+    lead: 'Set up a recurring investment plan. The system will place buy orders automatically at the interval you choose.',
+    myPlans: 'My recurring plans',
+    runningCount: '{n} active',
+    planEmpty: 'No recurring investment plans yet',
+    colAsset: 'Asset',
+    colAmount: 'Amount / qty',
+    colInterval: 'Interval',
+    colStart: 'Start date',
+    colEnd: 'End date',
+    colStatus: 'Status',
+    colAction: 'Action',
+    cancel: 'Stop',
+    cancelConfirmTitle: 'Stop this recurring investment plan?',
+    cancelConfirmOk: 'Confirm stop',
+    cancelConfirmBack: 'Cancel',
+    terminateDialogTitle: 'Stop recurring plan',
+    terminateDialogLead: 'No further buys will be scheduled. Past executions are not affected.',
+    terminateReasonLabel: 'Reason (optional)',
+    terminateReasonPlaceholder: 'Enter a reason if you wish',
+    terminateReasonHint: 'You may leave this blank and confirm.',
+    planDetail: {
+      detail: 'Details',
+      title: 'Plan details',
+      planNo: 'Plan no.',
+      exchange: 'Exchange',
+      product: 'Product',
+      investment: 'Per execution',
+      orderPrice: 'Order price',
+      frequency: 'Schedule',
+      ctOffset: 'Market open offset',
+      startDate: 'Start date',
+      endCondition: 'End condition',
+      nextExecution: 'Next execution',
+      progress: 'Progress',
+      progressValue: '{done} of {total} executed',
+      progressOpen: '{done} executed',
+      status: 'Status',
+      createdAt: 'Created at',
+      channel: 'Channel',
+      recentExecutions: 'Recent executions',
+      executionEmpty: 'No execution records',
+      colScheduledDate: 'Scheduled date',
+      colActualDate: 'Trade date',
+      colExecutionStatus: 'Execution',
+      colOrderStatus: 'Order',
+      colAmount: 'Amount / qty',
+      missingPlanNo: 'Plan number is missing',
+    },
+    createTitle: 'Create recurring investment',
+    createHint: 'Stocks and ETFs',
+    exchange: 'Exchange',
+    asset: 'Asset',
+    assetPlaceholder: 'Search by code',
+    assetSupport: 'Supported: stocks, ETFs',
+    assetEmpty: 'No matching assets',
+    assetLoading: 'Loading…',
+    removeAsset: 'Remove {code}',
+    startDate: 'Start date',
+    amount: 'Amount',
+    amountHint: 'Amount to invest on each execution (HKD)',
+    quantity: 'Quantity',
+    amountPlaceholder: 'e.g. 10,000',
+    quantityPlaceholder: 'e.g. 100',
+    quantityHint: 'Shares to buy on each execution',
+    investmentTypeLabel: 'Investment type',
+    investmentType: {
+      AMOUNT: 'By amount',
+      QUANTITY: 'By quantity',
+    },
+    orderPriceTypeLabel: 'Order price type',
+    orderPriceType: {
+      MARKET: 'Market',
+      LIMIT: 'Limit',
+    },
+    limitPrice: 'Limit price',
+    limitPricePlaceholder: 'e.g. 350.5',
+    limitPriceHint: 'Required for limit orders; must be greater than 0',
+    frequencyLabel: 'Frequency',
+    frequency: {
+      DAILY: 'Daily',
+      WEEKLY: 'Weekly',
+      MONTHLY: 'Monthly',
+    },
+    frequencyDayLabel: 'Execution day',
+    frequencyDayWeeklyHint: 'Fixed weekday each week',
+    frequencyDayMonthlyHint: 'Fixed calendar day each month (1–31)',
+    monthDayOption: 'Day {day} of month',
+    weekday: {
+      MON: 'Monday',
+      TUE: 'Tuesday',
+      WED: 'Wednesday',
+      THU: 'Thursday',
+      FRI: 'Friday',
+      SAT: 'Saturday',
+      SUN: 'Sunday',
+    },
+    ctOffsetLabel: 'Trading time offset (minutes)',
+    ctOffsetHint: '0–240 minutes relative to market open',
+    ctOffsetPreview: '{n} min',
+    previewInvestmentLabel: 'Each investment',
+    previewQuantity: '{n} shares',
+    intervalLabel: 'Interval',
+    pleaseSelect: 'Please select',
+    endModeLabel: 'End type',
+    endByDate: 'Specific date',
+    endByCount: 'Periods',
+    endDate: 'End date',
+    noEndDate: 'No end date',
+    endCount: 'Periods',
+    endCountPlaceholder: 'e.g. 12',
+    endCountHint: 'The plan stops automatically after the specified number of executions',
+    endCountValue: '{n} periods',
+    notesTitle: 'Notes',
+    notes: {
+      n1: 'Recurring orders are placed as market orders at the open on each execution date; fills follow actual trades.',
+      n2: 'Fractional shares are not supported. Quantity is rounded down to whole shares, which may leave residual cash.',
+      n3: 'If the execution date is a non-trading day, the order is deferred to the next trading day.',
+      n4: 'If available funds are insufficient, that period’s order will not be executed; the plan continues.',
+      n5: 'You may stop the plan at any time. Executed buys cannot be cancelled.',
+    },
+    reset: 'Reset',
+    previewNextExecution: 'Preview next run',
+    previewNextExecutionTitle: 'Next execution preview',
+    previewNextExecutionFill: 'Select exchange, frequency, and CT offset first',
+    previewScheduledDate: 'Scheduled date',
+    previewExecutionDate: 'Execution date',
+    previewExecutionDateTime: 'Execution time',
+    previewDeferred: 'Deferred from holiday',
+    previewDeferredYes: 'Yes',
+    previewDeferredNo: 'No',
+    continue: 'Continue',
+    confirmTitle: 'Confirm recurring plan',
+    eachAmount: 'Amount each time',
+    endPreview: 'End',
+    confirmNote: 'Once created, funds will be deducted and shares bought on each execution date. Please keep sufficient available balance.',
+    back: 'Back',
+    confirmCreate: 'Confirm',
+    fillRequired: 'Please complete all required fields',
+    createdToast: 'Recurring plan created',
+    cancelledToast: 'Plan stopped. Executed buys are not affected',
+    interval: {
+      daily: 'Daily',
+      weekly: 'Weekly',
+      biweekly: 'Biweekly',
+      monthly: 'Monthly',
+      quarterly: 'Quarterly',
+      semiannual: 'Semiannual',
+      annual: 'Annual',
+    },
+    status: {
+      active: 'Active',
+      created: 'Created',
+      cancelled: 'Stopped',
+    },
+    assetType: {
+      etf: 'ETF',
+      stock: 'Stock',
+    },
+  },
+}
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
new file mode 100644
index 0000000..84c7a12
--- /dev/null
+++ b/src/i18n/locales/zh-CN.ts
@@ -0,0 +1,170 @@
+export default {
+  common: {
+    appName: '投资计划排期',
+    language: '语言',
+    theme: '主题',
+    themeLight: '浅色',
+    themeDark: '深色',
+  },
+  recurring: {
+    title: '定期投资',
+    lead: '设定定期定额投资计划，系统将按设定间隔自动执行买入指示。',
+    myPlans: '我的定期投资计划',
+    runningCount: '{n} 项进行中',
+    planEmpty: '暂无定期投资计划',
+    colAsset: '资产',
+    colAmount: '金额/数量',
+    colInterval: '间隔',
+    colStart: '开始日期',
+    colEnd: '结束日期',
+    colStatus: '状态',
+    colAction: '操作',
+    cancel: '终止',
+    cancelConfirmTitle: '确定要终止此定期投资计划？',
+    cancelConfirmOk: '确认终止',
+    cancelConfirmBack: '取消',
+    terminateDialogTitle: '终止定期投资计划',
+    terminateDialogLead: '终止后将不再执行新的买入指示，已执行之买入不受影响。',
+    terminateReasonLabel: '终止原因（选填）',
+    terminateReasonPlaceholder: '可填写终止原因',
+    terminateReasonHint: '可不填，直接确认终止。',
+    planDetail: {
+      detail: '详情',
+      title: '计划详情',
+      planNo: '计划编号',
+      exchange: '交易所',
+      product: '产品',
+      investment: '每次投资',
+      orderPrice: '订单价格',
+      frequency: '定投周期',
+      ctOffset: '交易时间偏移',
+      startDate: '开始日期',
+      endCondition: '结束条件',
+      nextExecution: '下次执行日',
+      progress: '执行进度',
+      progressValue: '已执行 {done} / 共 {total} 期',
+      progressOpen: '已执行 {done} 期',
+      status: '状态',
+      createdAt: '创建时间',
+      channel: '渠道',
+      recentExecutions: '最近执行',
+      executionEmpty: '暂无执行记录',
+      colScheduledDate: '计划执行日',
+      colActualDate: '实际交易日',
+      colExecutionStatus: '执行状态',
+      colOrderStatus: '委托状态',
+      colAmount: '金额/数量',
+      missingPlanNo: '缺少计划编号，无法查询详情',
+    },
+    createTitle: '创建定期投资',
+    createHint: '支持股票及 ETF',
+    exchange: '交易所',
+    asset: '资产',
+    assetPlaceholder: '输入代号搜索',
+    assetSupport: '支持的: 股票、ETF',
+    assetEmpty: '没有匹配的资产',
+    assetLoading: '加载中…',
+    removeAsset: '移除 {code}',
+    startDate: '开始日期',
+    amount: '金额',
+    amountHint: '每次执行买入之金额（HKD）',
+    quantity: '数量',
+    amountPlaceholder: '例如 10,000',
+    quantityPlaceholder: '例如 100',
+    quantityHint: '每次执行买入之股数',
+    investmentTypeLabel: '投资类型',
+    investmentType: {
+      AMOUNT: '按金额',
+      QUANTITY: '按数量',
+    },
+    orderPriceTypeLabel: '订单价格类型',
+    orderPriceType: {
+      MARKET: '市价',
+      LIMIT: '限价',
+    },
+    limitPrice: '限价',
+    limitPricePlaceholder: '例如 350.5',
+    limitPriceHint: '限价单须填写大于 0 的价格',
+    frequencyLabel: '定投周期',
+    frequency: {
+      DAILY: '每日',
+      WEEKLY: '每周',
+      MONTHLY: '每月',
+    },
+    frequencyDayLabel: '执行日',
+    frequencyDayWeeklyHint: '每周固定星期执行',
+    frequencyDayMonthlyHint: '每月固定日期执行（1–31）',
+    monthDayOption: '每月 {day} 日',
+    weekday: {
+      MON: '星期一',
+      TUE: '星期二',
+      WED: '星期三',
+      THU: '星期四',
+      FRI: '星期五',
+      SAT: '星期六',
+      SUN: '星期日',
+    },
+    ctOffsetLabel: '交易时间偏移（分钟）',
+    ctOffsetHint: '范围 0–240，相对开市时间的偏移',
+    ctOffsetPreview: '{n} 分钟',
+    previewInvestmentLabel: '每次投资',
+    previewQuantity: '{n} 股',
+    intervalLabel: '间隔',
+    pleaseSelect: '请选择',
+    endModeLabel: '结束类型',
+    endByDate: '特定日期',
+    endByCount: '期数',
+    endDate: '结束日期',
+    noEndDate: '无结束日期',
+    endCount: '期数',
+    endCountPlaceholder: '例如 12',
+    endCountHint: '计划执行满指定期数后自动终止',
+    endCountValue: '期数 {n} 期',
+    notesTitle: '注意事项',
+    notes: {
+      n1: '定期投资指示于执行日开市时以市价单执行，成交价以实际成交为准。',
+      n2: '本功能不支持不足一股的股份。定期投资的买入股数将向下取整至整股，因此可能产生碎股（零股）。',
+      n3: '如执行日为非交易日，将顺延至下一个交易日执行。',
+      n4: '账户可用资金不足时，该期指示将不获执行，计划仍会继续。',
+      n5: '计划可随时终止，已执行之买入不可撤回。',
+    },
+    reset: '重设',
+    previewNextExecution: '预览下次执行',
+    previewNextExecutionTitle: '下次执行预览',
+    previewNextExecutionFill: '请先选择交易所、定投周期与时间偏移',
+    previewScheduledDate: '周期日期',
+    previewExecutionDate: '执行日期',
+    previewExecutionDateTime: '执行时间',
+    previewDeferred: '非交易日顺延',
+    previewDeferredYes: '是',
+    previewDeferredNo: '否',
+    continue: '继续',
+    confirmTitle: '确认定期投资计划',
+    eachAmount: '每次金额',
+    endPreview: '结束',
+    confirmNote: '计划建立后将于每个执行日自动扣除资金并买入，请确保账户有足够可用结余。',
+    back: '返回',
+    confirmCreate: '确认建立',
+    fillRequired: '请填妥所有必填栏位',
+    createdToast: '定期投资计划已建立',
+    cancelledToast: '计划已终止，已执行之买入不受影响',
+    interval: {
+      daily: '每日',
+      weekly: '每周',
+      biweekly: '每两周',
+      monthly: '月度',
+      quarterly: '季度',
+      semiannual: '每半年',
+      annual: '每年',
+    },
+    status: {
+      active: '进行中',
+      created: '已建立',
+      cancelled: '已终止',
+    },
+    assetType: {
+      etf: 'ETF',
+      stock: '股票',
+    },
+  },
+}
diff --git a/src/i18n/locales/zh-TW.ts b/src/i18n/locales/zh-TW.ts
new file mode 100644
index 0000000..c1b1ba0
--- /dev/null
+++ b/src/i18n/locales/zh-TW.ts
@@ -0,0 +1,170 @@
+export default {
+  common: {
+    appName: '投資計劃排期',
+    language: '語言',
+    theme: '主題',
+    themeLight: '淺色',
+    themeDark: '深色',
+  },
+  recurring: {
+    title: '定期投資',
+    lead: '設定定期定額投資計劃，系統將按設定間隔自動執行買入指示。',
+    myPlans: '我的定期投資計劃',
+    runningCount: '{n} 項進行中',
+    planEmpty: '暫無定期投資計劃',
+    colAsset: '資產',
+    colAmount: '金額/數量',
+    colInterval: '間隔',
+    colStart: '開始日期',
+    colEnd: '結束日期',
+    colStatus: '狀態',
+    colAction: '操作',
+    cancel: '終止',
+    cancelConfirmTitle: '確定要終止此定期投資計劃？',
+    cancelConfirmOk: '確認終止',
+    cancelConfirmBack: '取消',
+    terminateDialogTitle: '終止定期投資計劃',
+    terminateDialogLead: '終止後將不再執行新的買入指示，已執行之買入不受影響。',
+    terminateReasonLabel: '終止原因（選填）',
+    terminateReasonPlaceholder: '可填寫終止原因',
+    terminateReasonHint: '可不填，直接確認終止。',
+    planDetail: {
+      detail: '詳情',
+      title: '計劃詳情',
+      planNo: '計劃編號',
+      exchange: '交易所',
+      product: '產品',
+      investment: '每次投資',
+      orderPrice: '訂單價格',
+      frequency: '定投週期',
+      ctOffset: '交易時間偏移',
+      startDate: '開始日期',
+      endCondition: '結束條件',
+      nextExecution: '下次執行日',
+      progress: '執行進度',
+      progressValue: '已執行 {done} / 共 {total} 期',
+      progressOpen: '已執行 {done} 期',
+      status: '狀態',
+      createdAt: '建立時間',
+      channel: '渠道',
+      recentExecutions: '最近執行',
+      executionEmpty: '暫無執行記錄',
+      colScheduledDate: '計劃執行日',
+      colActualDate: '實際交易日',
+      colExecutionStatus: '執行狀態',
+      colOrderStatus: '委託狀態',
+      colAmount: '金額/數量',
+      missingPlanNo: '缺少計劃編號，無法查詢詳情',
+    },
+    createTitle: '創建定期投資',
+    createHint: '支援股票及 ETF',
+    exchange: '交易所',
+    asset: '資產',
+    assetPlaceholder: '輸入代號搜尋',
+    assetSupport: '支持的: 股票、ETF',
+    assetEmpty: '沒有匹配的資產',
+    assetLoading: '載入中…',
+    removeAsset: '移除 {code}',
+    startDate: '開始日期',
+    amount: '金額',
+    amountHint: '每次執行買入之金額（HKD）',
+    quantity: '數量',
+    amountPlaceholder: '例如 10,000',
+    quantityPlaceholder: '例如 100',
+    quantityHint: '每次執行買入之股數',
+    investmentTypeLabel: '投資類型',
+    investmentType: {
+      AMOUNT: '按金額',
+      QUANTITY: '按數量',
+    },
+    orderPriceTypeLabel: '訂單價格類型',
+    orderPriceType: {
+      MARKET: '市價',
+      LIMIT: '限價',
+    },
+    limitPrice: '限價',
+    limitPricePlaceholder: '例如 350.5',
+    limitPriceHint: '限價單須填寫大於 0 的價格',
+    frequencyLabel: '定投週期',
+    frequency: {
+      DAILY: '每日',
+      WEEKLY: '每周',
+      MONTHLY: '每月',
+    },
+    frequencyDayLabel: '執行日',
+    frequencyDayWeeklyHint: '每周固定星期執行',
+    frequencyDayMonthlyHint: '每月固定日期執行（1–31）',
+    monthDayOption: '每月 {day} 日',
+    weekday: {
+      MON: '星期一',
+      TUE: '星期二',
+      WED: '星期三',
+      THU: '星期四',
+      FRI: '星期五',
+      SAT: '星期六',
+      SUN: '星期日',
+    },
+    ctOffsetLabel: '交易時間偏移（分鐘）',
+    ctOffsetHint: '範圍 0–240，相對開市時間的偏移',
+    ctOffsetPreview: '{n} 分鐘',
+    previewInvestmentLabel: '每次投資',
+    previewQuantity: '{n} 股',
+    intervalLabel: '間隔',
+    pleaseSelect: '請選擇',
+    endModeLabel: '結束類型',
+    endByDate: '特定日期',
+    endByCount: '期數',
+    endDate: '結束日期',
+    noEndDate: '無結束日期',
+    endCount: '期數',
+    endCountPlaceholder: '例如 12',
+    endCountHint: '計劃執行滿指定期數後自動終止',
+    endCountValue: '期數 {n} 期',
+    notesTitle: '注意事項',
+    notes: {
+      n1: '定期投資指示於執行日開市時以市價單執行，成交價以實際成交為準。',
+      n2: '本功能不支援不足一股的股份。定期投資的買入股數將向下取整至整股，因此可能產生碎股（零股）。',
+      n3: '如執行日為非交易日，將順延至下一個交易日執行。',
+      n4: '帳戶可用資金不足時，該期指示將不獲執行，計劃仍會繼續。',
+      n5: '計劃可隨時終止，已執行之買入不可撤回。',
+    },
+    reset: '重設',
+    previewNextExecution: '預覽下次執行',
+    previewNextExecutionTitle: '下次執行預覽',
+    previewNextExecutionFill: '請先選擇交易所、定投週期與時間偏移',
+    previewScheduledDate: '週期日期',
+    previewExecutionDate: '執行日期',
+    previewExecutionDateTime: '執行時間',
+    previewDeferred: '非交易日順延',
+    previewDeferredYes: '是',
+    previewDeferredNo: '否',
+    continue: '繼續',
+    confirmTitle: '確認定期投資計劃',
+    eachAmount: '每次金額',
+    endPreview: '結束',
+    confirmNote: '計劃建立後將於每個執行日自動扣除資金並買入，請確保帳戶有足夠可用結餘。',
+    back: '返回',
+    confirmCreate: '確認建立',
+    fillRequired: '請填妥所有必填欄位',
+    createdToast: '定期投資計劃已建立',
+    cancelledToast: '計劃已終止，已執行之買入不受影響',
+    interval: {
+      daily: '每日',
+      weekly: '每周',
+      biweekly: '每兩周',
+      monthly: '月度',
+      quarterly: '季度',
+      semiannual: '每半年',
+      annual: '每年',
+    },
+    status: {
+      active: '進行中',
+      created: '已建立',
+      cancelled: '已終止',
+    },
+    assetType: {
+      etf: 'ETF',
+      stock: '股票',
+    },
+  },
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..cc35c72
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,35 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { parsePreferencesFromSearch } from '@/config/urlPreferences'
+import { useAuthStore } from '@/stores/auth'
+import { useServiceI18nStore } from '@/stores/serviceI18n'
+import { hasToken } from '@/utils/token'
+import App from './App.vue'
+import i18n from './i18n'
+import router from './router'
+import { applyTheme } from './theme/applyTheme'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import 'element-plus/es/components/message/style/css'
+import './styles/main.scss'
+
+const bootstrapPreferences = parsePreferencesFromSearch(window.location.search)
+applyTheme(bootstrapPreferences.theme)
+document.documentElement.lang = bootstrapPreferences.locale
+
+async function bootstrap() {
+  const app = createApp(App)
+  const pinia = createPinia()
+
+  app.use(pinia)
+  useAuthStore().initFromUrl()
+
+  if (hasToken()) {
+    await useServiceI18nStore().reload().catch(() => undefined)
+  }
+
+  app.use(router)
+  app.use(i18n)
+  app.mount('#app')
+}
+
+bootstrap()
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..4b3d099
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'recurring-investment',
+      component: () => import('@/views/RecurringInvestmentView.vue'),
+      meta: { titleKey: 'recurring.title' },
+    },
+  ],
+})
+
+router.beforeEach((to) => {
+  const appStore = useAppStore()
+  appStore.syncFromRouteQuery(to.query)
+})
+
+export default router
diff --git a/src/stores/app.ts b/src/stores/app.ts
new file mode 100644
index 0000000..155f2fa
--- /dev/null
+++ b/src/stores/app.ts
@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { LocationQuery } from 'vue-router'
+import {
+  parsePreferencesFromQuery,
+  preferencesToQuery,
+  type AppPreferences,
+} from '@/config/urlPreferences'
+import i18n from '@/i18n'
+import { APP_LOCALES, type AppLocale } from '@/config/appLocale'
+import { applyTheme } from '@/theme/applyTheme'
+import { APP_THEMES, type AppTheme } from '@/theme/types'
+
+export const useAppStore = defineStore('app', () => {
+  const initial = parsePreferencesFromQuery({})
+  const locale = ref<AppLocale>(initial.locale)
+  const theme = ref<AppTheme>(initial.theme)
+
+  function applyPreferences(preferences: AppPreferences) {
+    locale.value = preferences.locale
+    i18n.global.locale.value = preferences.locale
+    document.documentElement.lang = preferences.locale
+
+    theme.value = preferences.theme
+    applyTheme(preferences.theme)
+  }
+
+  function syncFromRouteQuery(query: LocationQuery) {
+    applyPreferences(parsePreferencesFromQuery(query))
+  }
+
+  function buildQueryForPreferences(
+    partial: Partial<AppPreferences>,
+    existing: LocationQuery,
+  ): Record<string, string> {
+    return preferencesToQuery(
+      {
+        locale: partial.locale ?? locale.value,
+        theme: partial.theme ?? theme.value,
+      },
+      existing,
+    )
+  }
+
+  return {
+    locale,
+    theme,
+    localeOptions: APP_LOCALES,
+    themeOptions: APP_THEMES,
+    applyPreferences,
+    syncFromRouteQuery,
+    buildQueryForPreferences,
+  }
+})
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
new file mode 100644
index 0000000..75df7b2
--- /dev/null
+++ b/src/stores/auth.ts
@@ -0,0 +1,56 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { LocationQuery } from 'vue-router'
+import {
+  parseAccountContextFromQuery,
+  parseAccountContextFromSearch,
+  type UrlAccountContext,
+} from '@/config/urlContext'
+import { getToken, getTokenFromUrl, removeToken, setToken } from '@/utils/token'
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref<string | null>(getToken())
+  const clientId = ref<string | null>(null)
+  const accountId = ref<string | null>(null)
+
+  function applyAccountContext(context: UrlAccountContext) {
+    clientId.value = context.clientId
+    accountId.value = context.accountId
+  }
+
+  /** URL 优先，其次沿用本地已存 token；账户上下文仅来自 URL */
+  function initFromUrl() {
+    const urlToken = getTokenFromUrl()
+    if (urlToken) {
+      setToken(urlToken)
+      token.value = urlToken
+    } else if (token.value) {
+      setToken(token.value)
+    }
+    applyAccountContext(parseAccountContextFromSearch(window.location.search))
+  }
+
+  function syncContextFromQuery(query: LocationQuery) {
+    applyAccountContext(parseAccountContextFromQuery(query))
+  }
+
+  function setTokenManually(value: string) {
+    setToken(value)
+    token.value = value
+  }
+
+  function clearToken() {
+    removeToken()
+    token.value = null
+  }
+
+  return {
+    token,
+    clientId,
+    accountId,
+    initFromUrl,
+    syncContextFromQuery,
+    setTokenManually,
+    clearToken,
+  }
+})
diff --git a/src/stores/recurringPlans.ts b/src/stores/recurringPlans.ts
new file mode 100644
index 0000000..32fba34
--- /dev/null
+++ b/src/stores/recurringPlans.ts
@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import type { RecurringPlan } from '@/types/recurringInvestment'
+import { isPlanRunningStatus } from '@/utils/scheduleInvestmentPlanMapper'
+
+export const useRecurringPlansStore = defineStore('recurringPlans', () => {
+  const plans = ref<RecurringPlan[]>([])
+
+  const runningCount = computed(
+    () =>
+      plans.value.filter((plan) =>
+        plan.apiStatus ? isPlanRunningStatus(plan.apiStatus) : plan.status !== 'cancelled',
+      ).length,
+  )
+
+  function setPlans(items: RecurringPlan[]) {
+    plans.value = items
+  }
+
+  function cancelPlan(id: string) {
+    const plan = plans.value.find((item) => item.id === id)
+    if (!plan || plan.status === 'cancelled') {
+      return false
+    }
+    plan.status = 'cancelled'
+    plan.apiStatus = 'TERMINATED'
+    return true
+  }
+
+  return {
+    plans,
+    runningCount,
+    setPlans,
+    cancelPlan,
+  }
+})
diff --git a/src/stores/serviceI18n.ts b/src/stores/serviceI18n.ts
new file mode 100644
index 0000000..db214c3
--- /dev/null
+++ b/src/stores/serviceI18n.ts
@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { getSystemI18nAllList, type SystemI18n } from '@/api/base'
+import type { AppLocale } from '@/config/appLocale'
+
+type ServiceLangKey = 'sc' | 'tc' | 'en'
+
+const localeToMapKey: Record<AppLocale, ServiceLangKey> = {
+  'zh-CN': 'sc',
+  'zh-TW': 'tc',
+  'en-US': 'en',
+}
+
+let reloadingPromise: Promise<void> | null = null
+const loadingIds: string[] = []
+
+export const useServiceI18nStore = defineStore('serviceI18n', () => {
+  const maps = ref<Record<ServiceLangKey, Map<string, string>>>({
+    sc: new Map(),
+    tc: new Map(),
+    en: new Map(),
+  })
+
+  function initFromList(list: SystemI18n[]) {
+    list.forEach((item) => {
+      maps.value.sc.set(item.id, item.scDescription)
+      maps.value.tc.set(item.id, item.tcDescription)
+      maps.value.en.set(item.id, item.enDescription)
+    })
+  }
+
+  function getText(id: string | undefined, locale: AppLocale): string {
+    if (!id) {
+      return ''
+    }
+    const key = localeToMapKey[locale] ?? 'en'
+    const text = maps.value[key].get(id)
+    if (text) {
+      return text
+    }
+    if (import.meta.env.DEV) {
+      console.warn('No service i18n:', id)
+    }
+    if (!loadingIds.includes(id)) {
+      loadingIds.push(id)
+      reload().finally(() => {
+        const index = loadingIds.indexOf(id)
+        if (index > -1) {
+          loadingIds.splice(index, 1)
+        }
+      })
+    }
+    return id
+  }
+
+  async function reload() {
+    if (reloadingPromise) {
+      return reloadingPromise
+    }
+    reloadingPromise = (async () => {
+      try {
+        const result = await getSystemI18nAllList()
+        if (result?.data) {
+          initFromList(result.data)
+        }
+      } catch (e) {
+        console.error('Failed to load service i18n:', e)
+      } finally {
+        reloadingPromise = null
+      }
+    })()
+    return reloadingPromise
+  }
+
+  return {
+    maps,
+    getText,
+    reload,
+    initFromList,
+  }
+})
diff --git a/src/styles/breakpoints.scss b/src/styles/breakpoints.scss
new file mode 100644
index 0000000..6815915
--- /dev/null
+++ b/src/styles/breakpoints.scss
@@ -0,0 +1,19 @@
+@use 'sass:map';
+
+// 数值须与 src/constants/breakpoints.ts 一致
+$breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+);
+
+$layout-max-width: 1280px;
+
+@function breakpoint($name) {
+  $value: map.get($breakpoints, $name);
+  @if $value == null {
+    @error "Unknown breakpoint `#{$name}`.";
+  }
+  @return $value;
+}
diff --git a/src/styles/element-plus-theme.scss b/src/styles/element-plus-theme.scss
new file mode 100644
index 0000000..5c13133
--- /dev/null
+++ b/src/styles/element-plus-theme.scss
@@ -0,0 +1,26 @@
+// Align Element Plus form controls with app semantic tokens (incl. hover/focus borders).
+
+@mixin ep-form-control-vars {
+  --el-color-primary: var(--color-primary);
+  --el-fill-color-blank: var(--color-control-bg);
+  --el-border-color: var(--color-control-border);
+  --el-border-color-hover: var(--color-primary);
+  --el-text-color-regular: var(--color-text);
+  --el-text-color-placeholder: var(--color-muted);
+  --el-input-bg-color: var(--color-control-bg);
+  --el-input-border-color: var(--color-control-border);
+  --el-input-hover-border-color: var(--color-primary);
+  --el-input-focus-border-color: var(--color-primary);
+}
+
+:root,
+[data-theme='light'] {
+  @include ep-form-control-vars;
+  --el-color-primary-rgb: 14, 124, 123;
+}
+
+html.dark,
+[data-theme='dark'] {
+  @include ep-form-control-vars;
+  --el-color-primary-rgb: 47, 191, 174;
+}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
new file mode 100644
index 0000000..8e5e18c
--- /dev/null
+++ b/src/styles/layout.scss
@@ -0,0 +1,38 @@
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-container {
+  width: 100%;
+  max-width: var(--layout-max-width);
+  margin-inline: auto;
+  padding-inline: var(--page-padding-x);
+  padding-block: var(--page-padding-y);
+  flex: 1;
+}
+
+.app-page {
+  width: 100%;
+}
+
+.app-page__title {
+  margin: 0 0 1rem;
+  font-size: var(--font-size-title);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.app-page__lead {
+  margin: 0 0 1.5rem;
+  font-size: var(--font-size-lead);
+  line-height: 1.6;
+  color: var(--color-muted);
+}
+
+.app-table-scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..f984215
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,124 @@
+@use './variables' as *;
+@use './layout';
+@use './element-plus-theme';
+
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+  --color-bg: #f2f2f2;
+  --color-text: #082d4f;
+  --color-text-2: #3d546e;
+  --color-border: #e2e7ec;
+  --color-border-strong: #cfd8e0;
+  --color-surface: #ffffff;
+  --color-surface-2: #f7f9fa;
+  --color-muted: #7186a0;
+  --color-primary: #{$color-primary};
+  --color-primary-soft: rgb(14 124 123 / 9%);
+  --color-primary-ink: #0a5c5b;
+  --color-up: #0f9d6e;
+  --color-up-soft: rgb(15 157 110 / 10%);
+  --color-down: #e03e46;
+  --color-down-soft: rgb(224 62 70 / 9%);
+  --color-warn: #c77414;
+  --color-warn-soft: rgb(199 116 20 / 10%);
+  --color-control-bg: #ffffff;
+  --color-control-border: #cfd8e0;
+  --radius: 4px;
+  --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Consolas, monospace;
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+  --color-bg: #0a0f16;
+  --color-text: #e9eef4;
+  --color-text-2: #b8c5d4;
+  --color-border: #1d2a3a;
+  --color-border-strong: #28394d;
+  --color-surface: #101824;
+  --color-surface-2: #16202e;
+  --color-muted: #7d8ea0;
+  --color-primary: #2fbfae;
+  --color-primary-soft: rgb(47 191 174 / 12%);
+  --color-primary-ink: #2fbfae;
+  --color-up: #34d399;
+  --color-up-soft: rgb(52 211 153 / 12%);
+  --color-down: #f87171;
+  --color-down-soft: rgb(248 113 113 / 12%);
+  --color-warn: #fbbf24;
+  --color-warn-soft: rgb(251 191 36 / 12%);
+  --color-control-bg: #101824;
+  --color-control-border: #28394d;
+  --radius: 4px;
+  --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Consolas, monospace;
+}
+
+:root {
+  --layout-max-width: #{$layout-max-width};
+  --page-padding-x: 16px;
+  --page-padding-y: 16px;
+  --font-size-base: 14px;
+  --font-size-lead: 16px;
+  --font-size-title: 20px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --page-padding-x: 24px;
+    --page-padding-y: 24px;
+    --font-size-lead: 17px;
+    --font-size-title: 22px;
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --page-padding-x: 32px;
+    --page-padding-y: 32px;
+    --font-size-base: 15px;
+    --font-size-lead: 18px;
+    --font-size-title: 24px;
+  }
+}
+
+html {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: var(--font-size-base);
+  line-height: 1.5;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+a {
+  color: var(--color-muted);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+}
diff --git a/src/styles/mixins/_respond.scss b/src/styles/mixins/_respond.scss
new file mode 100644
index 0000000..f074eab
--- /dev/null
+++ b/src/styles/mixins/_respond.scss
@@ -0,0 +1,22 @@
+@use '../breakpoints' as bp;
+
+@mixin respond-up($name) {
+  @media (min-width: bp.breakpoint($name)) {
+    @content;
+  }
+}
+
+@mixin respond-down($name) {
+  $width: bp.breakpoint($name);
+  @media (max-width: ($width - 0.02px)) {
+    @content;
+  }
+}
+
+@mixin respond-between($from, $to) {
+  $min: bp.breakpoint($from);
+  $max: bp.breakpoint($to);
+  @media (min-width: $min) and (max-width: ($max - 0.02px)) {
+    @content;
+  }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..e382654
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,2 @@
+$color-primary: #0e7c7b;
+$layout-max-width: 1280px;
diff --git a/src/theme/applyTheme.ts b/src/theme/applyTheme.ts
new file mode 100644
index 0000000..68b6966
--- /dev/null
+++ b/src/theme/applyTheme.ts
@@ -0,0 +1,7 @@
+import type { AppTheme } from './types'
+
+export function applyTheme(theme: AppTheme) {
+  document.documentElement.setAttribute('data-theme', theme)
+  document.documentElement.style.colorScheme = theme
+  document.documentElement.classList.toggle('dark', theme === 'dark')
+}
diff --git a/src/theme/types.ts b/src/theme/types.ts
new file mode 100644
index 0000000..af671f7
--- /dev/null
+++ b/src/theme/types.ts
@@ -0,0 +1,5 @@
+export const APP_THEMES = ['light', 'dark'] as const
+
+export type AppTheme = (typeof APP_THEMES)[number]
+
+export const DEFAULT_THEME: AppTheme = 'dark'
diff --git a/src/types/api.ts b/src/types/api.ts
new file mode 100644
index 0000000..c2d57a1
--- /dev/null
+++ b/src/types/api.ts
@@ -0,0 +1,5 @@
+export interface ApiResponse<T = unknown> {
+  code: string | number
+  message: string
+  data: T
+}
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
new file mode 100644
index 0000000..193bc01
--- /dev/null
+++ b/src/types/auto-imports.d.ts
@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* prettier-ignore */
+/* oxlint-disable */
+/* oxfmt-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
new file mode 100644
index 0000000..511c031
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,34 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppPage: typeof import('./../components/layout/AppPage.vue')['default']
+    AssetChipPicker: typeof import('./../components/recurring/AssetChipPicker.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface GlobalDirectives {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
diff --git a/src/types/recurringInvestment.ts b/src/types/recurringInvestment.ts
new file mode 100644
index 0000000..efef19e
--- /dev/null
+++ b/src/types/recurringInvestment.ts
@@ -0,0 +1,79 @@
+export type AssetType = 'etf' | 'stock'
+
+export type IntervalKey =
+  | 'daily'
+  | 'weekly'
+  | 'biweekly'
+  | 'monthly'
+  | 'quarterly'
+  | 'semiannual'
+  | 'annual'
+
+export type EndMode = 'date' | 'count'
+
+export type PlanStatus = 'active' | 'created' | 'cancelled'
+
+export interface InvestAsset {
+  code: string
+  name: string
+  type: AssetType
+  /** 产品英文名称（来自 getSimpleStockPage） */
+  engName?: string
+  /** 产品本地名称（来自 getSimpleStockPage） */
+  localName?: string
+  /** 对接产品接口时的主键，如 SZMK-2728 */
+  productKey?: string
+  exchangeCode?: string
+  productCodeUnique?: string
+}
+
+export interface RecurringPlan {
+  id: string
+  /** 接口计划编号，如 SI-2026-10-08-… */
+  planNo?: string
+  assets: InvestAsset[]
+  amount: number
+  /** 按数量定投时的每次股数 */
+  quantity?: number | null
+  investmentType?: 'AMOUNT' | 'QUANTITY'
+  frequencyType?: 'DAILY' | 'WEEKLY' | 'MONTHLY'
+  frequencyDay?: string
+  interval: IntervalKey
+  startDate: string
+  endMode: EndMode
+  endDate: string
+  endCount: number | null
+  noEnd: boolean
+  endDisplay: string
+  status: PlanStatus
+  /** 接口原始状态，如 ACTIVE */
+  apiStatus?: string
+}
+
+export interface RecurringPlanDraft {
+  assets: InvestAsset[]
+  amount: number
+  interval: IntervalKey
+  startDate: string
+  endDisplay: string
+  endMode: EndMode
+  endDate: string
+  endCount: number | null
+  noEnd: boolean
+  investmentType?: 'AMOUNT' | 'QUANTITY'
+  quantity?: number
+  orderPriceType?: 'MARKET' | 'LIMIT'
+  limitPrice?: number
+  frequencyDay?: string
+  ctOffsetMinutes?: number
+}
+
+export const INTERVAL_KEYS: IntervalKey[] = [
+  'daily',
+  'weekly',
+  'biweekly',
+  'monthly',
+  'quarterly',
+  'semiannual',
+  'annual',
+]
diff --git a/src/types/scheduleInvestment.ts b/src/types/scheduleInvestment.ts
new file mode 100644
index 0000000..8e5831d
--- /dev/null
+++ b/src/types/scheduleInvestment.ts
@@ -0,0 +1,205 @@
+/** 创建定期投资计划 — 与交易接口字段对齐 */
+
+export type InvestmentType = 'AMOUNT' | 'QUANTITY'
+
+export type OrderPriceType = 'MARKET' | 'LIMIT'
+
+export type FrequencyType = 'DAILY' | 'WEEKLY' | 'MONTHLY'
+
+export type ScheduleEndType = 'DATE' | 'COUNT' | 'NONE'
+
+export type WeekdayCode = 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT' | 'SUN'
+
+export const FREQUENCY_TYPE_KEYS: FrequencyType[] = ['DAILY', 'WEEKLY', 'MONTHLY']
+
+export const WEEKDAY_CODES: WeekdayCode[] = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']
+
+export const INVESTMENT_TYPE_KEYS: InvestmentType[] = ['AMOUNT', 'QUANTITY']
+
+export const ORDER_PRICE_TYPE_KEYS: OrderPriceType[] = ['MARKET', 'LIMIT']
+
+/** `POST /trade/schedule-investment/exchanges` 单条 */
+export interface ScheduleInvestmentExchangeItem {
+  exchangeCode: string
+  nameI18nId: string
+  tradeDate: string
+}
+
+/** `POST /trade/schedule-investment/plan/page` 查询条件（筛选项可传空，仅用分页） */
+export interface ScheduleInvestmentPlanPageRequest {
+  current: number
+  size: number
+  accountCode?: string
+  exchangeCode?: string
+  productCode?: string
+  status?: string
+  investmentType?: string
+  orderPriceType?: string
+  startDate?: string
+  endDate?: string
+}
+
+export interface ScheduleInvestmentPlanPageData {
+  current: number
+  maxId: string | null
+  records: ScheduleInvestmentPlanRecord[]
+  size: number
+  total: number | string
+  totalPages: number
+}
+
+/** 计划列表单条（字段以接口为准） */
+export interface ScheduleInvestmentPlanRecord {
+  id: string
+  planNo: string
+  accountId: string
+  accountCode?: string
+  clientId: string
+  clientCode?: string
+  exchangeCode: string
+  productCode: string
+  productEngName?: string
+  productLocalName?: string
+  investmentType: InvestmentType
+  amountPerExecution: string | null
+  qtyPerExecution: string | null
+  orderPriceType: OrderPriceType
+  frequencyType: FrequencyType
+  frequencyDay?: string | null
+  startDate: string
+  endDate?: string | null
+  endType: ScheduleEndType
+  totalExecutionCount?: number | null
+  executedCount?: number
+  ctOffsetMinutes: number
+  status: string
+  nextExecutionDate?: string | null
+  currencyCode?: string
+  channelCode?: string
+  createOn?: string
+  updateOn?: string
+}
+
+/** `POST /trade/schedule-investment/plan/detail` 请求体 */
+export interface ScheduleInvestmentPlanDetailRequest {
+  planNo: string
+}
+
+/** `POST /trade/schedule-investment/plan/terminate` 请求体 */
+export interface ScheduleInvestmentPlanTerminateRequest {
+  planNo: string
+  /** 选填 */
+  terminateReason?: string
+}
+
+/** `POST /trade/schedule-investment/plan/next-execution` 请求体 */
+export interface ScheduleInvestmentNextExecutionRequest {
+  exchangeCode: string
+  frequencyType: FrequencyType
+  /** WEEKLY / MONTHLY 时必填 */
+  frequencyDay?: string
+  /** 空或 0 表示 CT 开市时刻；最大 240 */
+  ctOffsetMinutes?: number
+  /** 空表示交易所交易日 */
+  startDate?: string
+}
+
+/** `POST /trade/schedule-investment/plan/next-execution` 响应 data */
+export interface ScheduleInvestmentNextExecutionData {
+  scheduledDate: string
+  executionDate: string
+  executionDateTime: string
+  deferred: boolean
+  ctOffsetMinutes: number
+}
+
+/** 计划详情 — plan 字段（比列表项更全） */
+export interface ScheduleInvestmentPlanDetailPlan {
+  id: string | number
+  planNo: string
+  accountId?: string | number
+  accountCode?: string
+  clientId?: string | number
+  clientCode?: string
+  exchangeCode: string
+  marketId?: string | number | null
+  productCode: string
+  productEngName?: string
+  productLocalName?: string
+  currencyCode?: string
+  investmentType: InvestmentType
+  amountPerExecution?: string | number | null
+  qtyPerExecution?: string | number | null
+  orderPriceType: OrderPriceType
+  limitPrice?: string | number | null
+  frequencyType: FrequencyType
+  frequencyDay?: string | null
+  startDate: string
+  endType: ScheduleEndType
+  endDate?: string | null
+  totalExecutionCount?: number | string | null
+  executedCount?: number | string
+  ctOffsetMinutes: number
+  nextExecutionDate?: string | null
+  status: string
+  lastExecutionStatus?: string
+  lastExecutionTime?: string | null
+  terminateTime?: string | null
+  terminateBy?: string
+  terminateReason?: string
+  channelCode?: string
+  createBy?: string
+  createOn?: string
+  updateBy?: string
+  updateOn?: string
+  userId?: string | number
+  userCode?: string
+}
+
+export interface ScheduleInvestmentPlanExecutionRecord {
+  id?: string | number
+  executionNo?: string
+  planNo?: string
+  scheduledExecutionDate?: string
+  actualTradeDate?: string
+  scheduledSubmitTime?: string
+  actualSubmitTime?: string
+  investmentType?: InvestmentType
+  amount?: string | number | null
+  inputQty?: string | number | null
+  calculatedQty?: string | number | null
+  referencePrice?: string | number | null
+  orderPriceType?: OrderPriceType
+  limitPrice?: string | number | null
+  orderStatus?: string
+  executionStatus?: string
+  failureCode?: string
+  failureMessage?: string
+}
+
+export interface ScheduleInvestmentPlanDetailData {
+  plan: ScheduleInvestmentPlanDetailPlan
+  recentExecutions: ScheduleInvestmentPlanExecutionRecord[]
+}
+
+export interface ScheduleInvestmentCreateBody {
+  accountId: number | string
+  exchangeCode: string
+  productCode: string
+  productEngName?: string
+  productLocalName?: string
+  clientId: number | string
+  investmentType: InvestmentType
+  amountPerExecution?: number
+  qtyPerExecution?: number
+  orderPriceType: OrderPriceType
+  /** 限价单必填，须大于 0 */
+  limitPrice?: number
+  frequencyType: FrequencyType
+  frequencyDay?: string
+  startDate: string
+  endType: ScheduleEndType
+  endDate?: string
+  totalExecutionCount?: number
+  ctOffsetMinutes: number
+}
diff --git a/src/utils/formatMoney.ts b/src/utils/formatMoney.ts
new file mode 100644
index 0000000..c9697f3
--- /dev/null
+++ b/src/utils/formatMoney.ts
@@ -0,0 +1,11 @@
+export function parseAmountInput(raw: string): number {
+  const value = Number.parseFloat(raw.replace(/,/g, '').trim())
+  return Number.isFinite(value) ? value : Number.NaN
+}
+
+export function formatHkd(amount: number): string {
+  return `HKD ${amount.toLocaleString('en-HK', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`
+}
diff --git a/src/utils/investAssetDisplay.ts b/src/utils/investAssetDisplay.ts
new file mode 100644
index 0000000..9dc4bc6
--- /dev/null
+++ b/src/utils/investAssetDisplay.ts
@@ -0,0 +1,65 @@
+import { DEFAULT_LOCALE, isAppLocale, type AppLocale } from '@/config/appLocale'
+import type { InvestAsset } from '@/types/recurringInvestment'
+
+export function resolveAppLocale(locale: string | undefined): AppLocale {
+  if (locale && isAppLocale(locale)) {
+    return locale
+  }
+  return DEFAULT_LOCALE
+}
+
+/** 按界面语言在本地名与英文名之间选取 */
+export function pickProductBilingualName(
+  locale: AppLocale,
+  productLocalName?: string,
+  productEngName?: string,
+): string {
+  const local = productLocalName?.trim() ?? ''
+  const eng = productEngName?.trim() ?? ''
+  if (locale === 'en-US') {
+    return eng || local
+  }
+  return local || eng
+}
+
+/** 界面展示用产品代号（优先交易所唯一码，如 1.HK） */
+export function investAssetDisplayCode(asset: Pick<InvestAsset, 'code' | 'productCodeUnique'>): string {
+  const unique = asset.productCodeUnique?.trim()
+  if (unique) {
+    return unique
+  }
+  return asset.code.trim()
+}
+
+export function investAssetDisplayName(
+  asset: Pick<InvestAsset, 'name' | 'localName' | 'engName' | 'code'>,
+  locale?: AppLocale,
+): string {
+  const picked = locale
+    ? pickProductBilingualName(locale, asset.localName, asset.engName)
+    : asset.localName?.trim() || asset.engName?.trim() || ''
+  if (picked) {
+    return picked
+  }
+  const name = asset.name?.trim()
+  return name || asset.code
+}
+
+/** 计划详情等：`代号 · 名称` */
+export function scheduleProductLineDisplay(
+  locale: AppLocale,
+  productCode: string,
+  productLocalName?: string,
+  productEngName?: string,
+): string {
+  const code = productCode.trim()
+  const name = pickProductBilingualName(locale, productLocalName, productEngName)
+  if (name && name !== code) {
+    return `${code} · ${name}`
+  }
+  return code
+}
+
+export function investAssetOptionKey(asset: InvestAsset): string {
+  return asset.productKey || investAssetDisplayCode(asset)
+}
diff --git a/src/utils/scheduleInvestmentPayload.ts b/src/utils/scheduleInvestmentPayload.ts
new file mode 100644
index 0000000..16e1dff
--- /dev/null
+++ b/src/utils/scheduleInvestmentPayload.ts
@@ -0,0 +1,97 @@
+import type { InvestAsset } from '@/types/recurringInvestment'
+import type {
+  FrequencyType,
+  InvestmentType,
+  OrderPriceType,
+  ScheduleEndType,
+  ScheduleInvestmentCreateBody,
+} from '@/types/scheduleInvestment'
+import type { IntervalKey } from '@/types/recurringInvestment'
+
+export interface ScheduleFormPayloadInput {
+  exchangeCode: string
+  asset: InvestAsset
+  investmentType: InvestmentType
+  amountPerExecution: number | null
+  qtyPerExecution: number | null
+  orderPriceType: OrderPriceType
+  limitPrice: number | null
+  frequencyType: FrequencyType
+  frequencyDay: string
+  startDate: string
+  endMode: 'date' | 'count'
+  endDate: string
+  noEnd: boolean
+  endCount: number | null
+  ctOffsetMinutes: number
+  clientId: string | null
+  accountId: string | null
+}
+
+export function resolveEndType(input: Pick<ScheduleFormPayloadInput, 'endMode' | 'noEnd' | 'endDate'>): ScheduleEndType {
+  if (input.endMode === 'count') {
+    return 'COUNT'
+  }
+  if (input.noEnd || !input.endDate.trim()) {
+    return 'NONE'
+  }
+  return 'DATE'
+}
+
+export function buildScheduleInvestmentCreateBody(
+  input: ScheduleFormPayloadInput,
+): ScheduleInvestmentCreateBody {
+  const endType = resolveEndType(input)
+  const productCode = input.asset.productCodeUnique || input.asset.code
+
+  const body: ScheduleInvestmentCreateBody = {
+    accountId: input.accountId ?? '',
+    exchangeCode: input.exchangeCode,
+    productCode,
+    productEngName: input.asset.engName?.trim() ?? '',
+    productLocalName: input.asset.localName?.trim() ?? '',
+    clientId: input.clientId ?? '',
+    investmentType: input.investmentType,
+    orderPriceType: input.orderPriceType,
+    frequencyType: input.frequencyType,
+    startDate: input.startDate,
+    endType,
+    ctOffsetMinutes: input.ctOffsetMinutes,
+  }
+
+  if (input.investmentType === 'AMOUNT' && input.amountPerExecution != null) {
+    body.amountPerExecution = input.amountPerExecution
+  }
+  if (input.investmentType === 'QUANTITY' && input.qtyPerExecution != null) {
+    body.qtyPerExecution = input.qtyPerExecution
+  }
+
+  if (input.orderPriceType === 'LIMIT' && input.limitPrice != null && input.limitPrice > 0) {
+    body.limitPrice = input.limitPrice
+  }
+
+  if (input.frequencyType === 'WEEKLY' || input.frequencyType === 'MONTHLY') {
+    body.frequencyDay = input.frequencyDay
+  }
+
+  if (endType === 'DATE') {
+    body.endDate = input.endDate
+  } else {
+    body.endDate = ''
+  }
+
+  if (endType === 'COUNT' && input.endCount != null) {
+    body.totalExecutionCount = input.endCount
+  }
+
+  return body
+}
+
+export function frequencyTypeToInterval(frequencyType: FrequencyType): IntervalKey {
+  const map: Record<FrequencyType, IntervalKey> = {
+    DAILY: 'daily',
+    WEEKLY: 'weekly',
+    MONTHLY: 'monthly',
+  }
+  return map[frequencyType]
+}
diff --git a/src/utils/scheduleInvestmentPlanMapper.ts b/src/utils/scheduleInvestmentPlanMapper.ts
new file mode 100644
index 0000000..6b6db82
--- /dev/null
+++ b/src/utils/scheduleInvestmentPlanMapper.ts
@@ -0,0 +1,109 @@
+import type { InvestAsset, PlanStatus, RecurringPlan } from '@/types/recurringInvestment'
+import type {
+  FrequencyType,
+  ScheduleEndType,
+  ScheduleInvestmentPlanRecord,
+} from '@/types/scheduleInvestment'
+import { frequencyTypeToInterval } from '@/utils/scheduleInvestmentPayload'
+
+function parseDecimal(value: string | null | undefined): number {
+  if (value == null || value === '') {
+    return 0
+  }
+  const n = Number.parseFloat(value)
+  return Number.isNaN(n) ? 0 : n
+}
+
+export function mapApiPlanStatus(status: string): PlanStatus {
+  const normalized = status.trim().toUpperCase()
+  if (
+    normalized === 'TERMINATED' ||
+    normalized === 'CANCELLED' ||
+    normalized === 'CANCELED' ||
+    normalized === 'STOPPED'
+  ) {
+    return 'cancelled'
+  }
+  if (normalized === 'CREATED' || normalized === 'PENDING') {
+    return 'created'
+  }
+  return 'active'
+}
+
+export function isPlanRunningStatus(status: string): boolean {
+  return mapApiPlanStatus(status) !== 'cancelled'
+}
+
+function resolveEndFields(record: ScheduleInvestmentPlanRecord): Pick<
+  RecurringPlan,
+  'endMode' | 'endDate' | 'endCount' | 'noEnd' | 'endDisplay'
+> {
+  const endType = record.endType as ScheduleEndType
+  if (endType === 'COUNT' && record.totalExecutionCount != null) {
+    return {
+      endMode: 'count',
+      endDate: '',
+      endCount: record.totalExecutionCount,
+      noEnd: false,
+      endDisplay: '',
+    }
+  }
+  if (endType === 'NONE' || !record.endDate) {
+    return {
+      endMode: 'date',
+      endDate: '',
+      endCount: null,
+      noEnd: true,
+      endDisplay: '',
+    }
+  }
+  return {
+    endMode: 'date',
+    endDate: record.endDate ?? '',
+    endCount: null,
+    noEnd: false,
+    endDisplay: '',
+  }
+}
+
+export function mapSchedulePlanRecordToRecurringPlan(
+  record: ScheduleInvestmentPlanRecord,
+): RecurringPlan {
+  const code = record.productCode
+  const resolvedName =
+    record.productLocalName?.trim() || record.productEngName?.trim() || ''
+  const name = resolvedName && resolvedName !== code ? resolvedName : ''
+  const asset: InvestAsset = {
+    code,
+    name,
+    type: 'stock',
+    engName: record.productEngName?.trim() ?? '',
+    localName: record.productLocalName?.trim() ?? '',
+    exchangeCode: record.exchangeCode,
+    productCodeUnique: record.productCode,
+  }
+  const amount =
+    record.investmentType === 'AMOUNT'
+      ? parseDecimal(record.amountPerExecution)
+      : parseDecimal(record.qtyPerExecution)
+  const quantity =
+    record.investmentType === 'QUANTITY' ? parseDecimal(record.qtyPerExecution) : null
+  const endFields = resolveEndFields(record)
+  const frequencyType = record.frequencyType as FrequencyType
+
+  return {
+    id: record.id,
+    planNo: record.planNo,
+    assets: [asset],
+    amount,
+    quantity,
+    investmentType: record.investmentType,
+    frequencyType,
+    frequencyDay: record.frequencyDay ?? undefined,
+    interval: frequencyTypeToInterval(frequencyType),
+    startDate: record.startDate,
+    ...endFields,
+    status: mapApiPlanStatus(record.status),
+    apiStatus: record.status,
+  }
+}
diff --git a/src/utils/token.ts b/src/utils/token.ts
new file mode 100644
index 0000000..60451c5
--- /dev/null
+++ b/src/utils/token.ts
@@ -0,0 +1,23 @@
+const TOKEN_KEY = 'auth_token'
+
+/** 从 URL 查询参数读取 token（例如 ?token=xxx） */
+export function getTokenFromUrl(): string | null {
+  const urlParams = new URLSearchParams(window.location.search)
+  return urlParams.get('token')
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token)
+}
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+export function removeToken(): void {
+  localStorage.removeItem(TOKEN_KEY)
+}
+
+export function hasToken(): boolean {
+  return !!getToken()
+}
diff --git a/src/views/RecurringInvestmentView.vue b/src/views/RecurringInvestmentView.vue
new file mode 100644
index 0000000..2405b94
--- /dev/null
+++ b/src/views/RecurringInvestmentView.vue
@@ -0,0 +1,2111 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import AppPage from '@/components/layout/AppPage.vue'
+import AssetChipPicker from '@/components/recurring/AssetChipPicker.vue'
+import {
+  createScheduleInvestmentPlan,
+  getScheduleInvestmentExchanges,
+  getScheduleInvestmentPlanDetail,
+  getScheduleInvestmentPlanPage,
+  previewScheduleInvestmentNextExecution,
+  terminateScheduleInvestmentPlan,
+} from '@/api/scheduleInvestment'
+import {
+  extractSimpleStockRecords,
+  getSimpleStockPage,
+  type SimpleStockItem,
+} from '@/api/product'
+import { useBreakpoint } from '@/composables/useBreakpoint'
+import { useServiceI18n } from '@/composables/useServiceI18n'
+import { useAuthStore } from '@/stores/auth'
+import { useRecurringPlansStore } from '@/stores/recurringPlans'
+import type {
+  AssetType,
+  EndMode,
+  InvestAsset,
+  RecurringPlan,
+  RecurringPlanDraft,
+} from '@/types/recurringInvestment'
+import {
+  FREQUENCY_TYPE_KEYS,
+  INVESTMENT_TYPE_KEYS,
+  ORDER_PRICE_TYPE_KEYS,
+  WEEKDAY_CODES,
+  type FrequencyType,
+  type InvestmentType,
+  type OrderPriceType,
+  type ScheduleInvestmentExchangeItem,
+  type ScheduleInvestmentNextExecutionData,
+  type ScheduleInvestmentPlanDetailPlan,
+  type ScheduleInvestmentPlanExecutionRecord,
+} from '@/types/scheduleInvestment'
+import { formatHkd, parseAmountInput } from '@/utils/formatMoney'
+import {
+  investAssetDisplayName,
+  resolveAppLocale,
+  scheduleProductLineDisplay,
+} from '@/utils/investAssetDisplay'
+import {
+  mapApiPlanStatus,
+  mapSchedulePlanRecordToRecurringPlan,
+} from '@/utils/scheduleInvestmentPlanMapper'
+import {
+  buildScheduleInvestmentCreateBody,
+  frequencyTypeToInterval,
+} from '@/utils/scheduleInvestmentPayload'
+
+interface FormState {
+  exchangeCode: string
+  investmentType: InvestmentType
+  startDate: string
+  amount: string
+  quantity: string
+  orderPriceType: OrderPriceType
+  limitPrice: string
+  frequencyType: FrequencyType | ''
+  frequencyDay: string
+  ctOffsetMinutes: number
+  endMode: EndMode
+  endDate: string
+  noEnd: boolean
+  endCount: string
+}
+
+const { t, locale } = useI18n()
+const { si18n } = useServiceI18n()
+const { isMobile } = useBreakpoint()
+const plansStore = useRecurringPlansStore()
+const authStore = useAuthStore()
+
+const exchangeOptions = ref<ScheduleInvestmentExchangeItem[]>([])
+const exchangeLoading = ref(false)
+const exchangeAssets = ref<InvestAsset[]>([])
+const assetLoading = ref(false)
+let assetSearchTimer: ReturnType<typeof setTimeout> | undefined
+const picked = ref<InvestAsset[]>([])
+const assetInvalid = ref(false)
+const confirmVisible = ref(false)
+const draft = ref<RecurringPlanDraft | null>(null)
+const submitting = ref(false)
+const plansLoading = ref(false)
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const detailPlan = ref<ScheduleInvestmentPlanDetailPlan | null>(null)
+const detailExecutions = ref<ScheduleInvestmentPlanExecutionRecord[]>([])
+const terminateVisible = ref(false)
+const terminateTarget = ref<RecurringPlan | null>(null)
+const terminateReason = ref('')
+const terminateSubmitting = ref(false)
+const nextExecutionPreviewVisible = ref(false)
+const nextExecutionPreviewLoading = ref(false)
+const nextExecutionPreview = ref<ScheduleInvestmentNextExecutionData | null>(null)
+
+const PLAN_PAGE_SIZE = 50
+
+const form = reactive<FormState>({
+  exchangeCode: '',
+  investmentType: 'AMOUNT',
+  startDate: '',
+  amount: '',
+  quantity: '',
+  orderPriceType: 'MARKET',
+  limitPrice: '',
+  frequencyType: '',
+  frequencyDay: '',
+  ctOffsetMinutes: 30,
+  endMode: 'date',
+  endDate: '',
+  noEnd: false,
+  endCount: '',
+})
+
+const fieldError = reactive({
+  exchangeCode: false,
+  startDate: false,
+  amount: false,
+  quantity: false,
+  orderPriceType: false,
+  limitPrice: false,
+  frequencyType: false,
+  frequencyDay: false,
+  ctOffsetMinutes: false,
+  endCount: false,
+})
+
+const exchangeSelectOptions = computed(() =>
+  exchangeOptions.value.map((item) => ({
+    value: item.exchangeCode,
+    label: item.nameI18nId ? si18n(item.nameI18nId) : item.exchangeCode,
+  })),
+)
+
+const gutter = computed(() => (isMobile.value ? 12 : 20))
+
+const frequencyOptions = computed(() =>
+  FREQUENCY_TYPE_KEYS.map((key) => ({
+    value: key,
+    label: t(`recurring.frequency.${key}`),
+  })),
+)
+
+const orderPriceOptions = computed(() =>
+  ORDER_PRICE_TYPE_KEYS.map((key) => ({
+    value: key,
+    label: t(`recurring.orderPriceType.${key}`),
+  })),
+)
+
+const investmentTypeOptions = computed(() =>
+  INVESTMENT_TYPE_KEYS.map((key) => ({
+    value: key,
+    label: t(`recurring.investmentType.${key}`),
+  })),
+)
+
+const investmentValueFieldError = computed(() =>
+  form.investmentType === 'AMOUNT' ? fieldError.amount : fieldError.quantity,
+)
+
+const investmentValueHint = computed(() =>
+  form.investmentType === 'AMOUNT' ? t('recurring.amountHint') : t('recurring.quantityHint'),
+)
+
+const endModeOptions = computed(() => [
+  { value: 'date' as EndMode, label: t('recurring.endByDate') },
+  { value: 'count' as EndMode, label: t('recurring.endByCount') },
+])
+
+const endValueFieldError = computed(() =>
+  form.endMode === 'count' ? fieldError.endCount : false,
+)
+
+const endValueHint = computed(() =>
+  form.endMode === 'count' ? t('recurring.endCountHint') : t('recurring.noEndDate'),
+)
+
+const weekdayOptions = computed(() =>
+  WEEKDAY_CODES.map((code) => ({
+    value: code,
+    label: t(`recurring.weekday.${code}`),
+  })),
+)
+
+const monthDayOptions = computed(() =>
+  Array.from({ length: 31 }, (_, i) => {
+    const day = String(i + 1)
+    return { value: day, label: t('recurring.monthDayOption', { day }) }
+  }),
+)
+
+const showFrequencyDay = computed(
+  () => form.frequencyType === 'WEEKLY' || form.frequencyType === 'MONTHLY',
+)
+
+watch(
+  () => form.noEnd,
+  (checked) => {
+    if (checked) {
+      form.endDate = ''
+    }
+  },
+)
+
+watch(
+  () => form.frequencyType,
+  (type) => {
+    form.frequencyDay = ''
+    fieldError.frequencyDay = false
+    if (type === 'WEEKLY') {
+      form.frequencyDay = 'MON'
+    }
+    if (type === 'MONTHLY') {
+      form.frequencyDay = '1'
+    }
+  },
+)
+
+watch(
+  () => form.investmentType,
+  () => {
+    fieldError.amount = false
+    fieldError.quantity = false
+  },
+)
+
+watch(
+  () => form.orderPriceType,
+  (type) => {
+    fieldError.limitPrice = false
+    if (type !== 'LIMIT') {
+      form.limitPrice = ''
+    }
+  },
+)
+
+watch(
+  () => form.endMode,
+  () => {
+    fieldError.endCount = false
+  },
+)
+
+watch(picked, () => {
+  if (picked.value.length) {
+    assetInvalid.value = false
+  }
+})
+
+function mapSimpleStockToAsset(item: SimpleStockItem): InvestAsset {
+  const type: AssetType = item.productType === '1' ? 'stock' : 'etf'
+  const engName = item.engName?.trim() ?? ''
+  const localName = item.localName?.trim() ?? ''
+  const productCodeUnique = item.productCodeUnique?.trim() || ''
+  return {
+    code: productCodeUnique || item.productCode,
+    name: localName || engName || productCodeUnique || item.productCode,
+    engName,
+    localName,
+    type,
+    productKey: item.productKey,
+    exchangeCode: item.exchangeCode,
+    productCodeUnique: productCodeUnique || item.productCode,
+  }
+}
+
+async function loadExchangeAssets(exchangeCode: string, searchName = '') {
+  assetLoading.value = true
+  try {
+    const res = await getSimpleStockPage({
+      current: 0,
+      size: 100000,
+      searchName,
+      exchangeCodes: [exchangeCode],
+      isUpdatedToday: true,
+    })
+    exchangeAssets.value = extractSimpleStockRecords(res.data).map(mapSimpleStockToAsset)
+  } catch {
+    exchangeAssets.value = []
+  } finally {
+    assetLoading.value = false
+  }
+}
+
+function onAssetSearch(keyword: string) {
+  if (!form.exchangeCode) {
+    return
+  }
+  if (assetSearchTimer) {
+    clearTimeout(assetSearchTimer)
+  }
+  assetSearchTimer = setTimeout(() => {
+    loadExchangeAssets(form.exchangeCode, keyword)
+  }, 300)
+}
+
+watch(
+  () => form.exchangeCode,
+  (code) => {
+    picked.value = []
+    assetInvalid.value = false
+    if (!code) {
+      exchangeAssets.value = []
+      return
+    }
+    loadExchangeAssets(code)
+  },
+)
+
+async function loadExchangeOptions() {
+  exchangeLoading.value = true
+  try {
+    const res = await getScheduleInvestmentExchanges()
+    exchangeOptions.value = Array.isArray(res.data) ? res.data : []
+  } catch {
+    exchangeOptions.value = []
+  } finally {
+    exchangeLoading.value = false
+  }
+}
+
+async function loadPlans() {
+  plansLoading.value = true
+  try {
+    const res = await getScheduleInvestmentPlanPage({ current: 1, size: PLAN_PAGE_SIZE })
+    const records = res.data?.records
+    plansStore.setPlans(
+      Array.isArray(records) ? records.map(mapSchedulePlanRecordToRecurringPlan) : [],
+    )
+  } catch {
+    plansStore.setPlans([])
+  } finally {
+    plansLoading.value = false
+  }
+}
+
+onMounted(() => {
+  loadExchangeOptions()
+  loadPlans()
+})
+
+function planInvestmentLabel(plan: RecurringPlan) {
+  return plan.investmentType === 'QUANTITY' ? t('recurring.quantity') : t('recurring.amount')
+}
+
+function planInvestmentDisplay(plan: RecurringPlan) {
+  if (plan.investmentType === 'QUANTITY') {
+    const qty = plan.quantity ?? plan.amount
+    return t('recurring.previewQuantity', { n: qty })
+  }
+  return formatHkd(plan.amount)
+}
+
+function intervalTextForPlan(plan: RecurringPlan) {
+  if (plan.frequencyType) {
+    let text = t(`recurring.frequency.${plan.frequencyType}`)
+    if (plan.frequencyDay) {
+      const dayLabel =
+        plan.frequencyType === 'WEEKLY'
+          ? t(`recurring.weekday.${plan.frequencyDay}`)
+          : t('recurring.monthDayOption', { day: plan.frequencyDay })
+      text = `${text} · ${dayLabel}`
+    }
+    return text
+  }
+  return t(`recurring.interval.${plan.interval}`)
+}
+
+function endTextForPlan(plan: RecurringPlan) {
+  if (plan.endMode === 'count' && plan.endCount) {
+    return t('recurring.endCountValue', { n: plan.endCount })
+  }
+  if (plan.noEnd || !plan.endDate) {
+    return t('recurring.noEndDate')
+  }
+  return plan.endDate
+}
+
+function buildEndDisplay() {
+  if (form.endMode === 'count') {
+    return t('recurring.endCountValue', { n: Number.parseInt(form.endCount, 10) })
+  }
+  if (form.noEnd || !form.endDate) {
+    return t('recurring.noEndDate')
+  }
+  return form.endDate
+}
+
+function clearErrors() {
+  assetInvalid.value = false
+  fieldError.exchangeCode = false
+  fieldError.startDate = false
+  fieldError.amount = false
+  fieldError.quantity = false
+  fieldError.orderPriceType = false
+  fieldError.limitPrice = false
+  fieldError.frequencyType = false
+  fieldError.frequencyDay = false
+  fieldError.ctOffsetMinutes = false
+  fieldError.endCount = false
+}
+
+function validate(): boolean {
+  clearErrors()
+  let ok = true
+
+  if (!form.exchangeCode) {
+    fieldError.exchangeCode = true
+    ok = false
+  }
+  if (!picked.value.length) {
+    assetInvalid.value = true
+    ok = false
+  }
+  if (!form.startDate) {
+    fieldError.startDate = true
+    ok = false
+  }
+  if (form.investmentType === 'AMOUNT') {
+    const amount = parseAmountInput(form.amount)
+    if (!form.amount.trim() || Number.isNaN(amount) || amount <= 0) {
+      fieldError.amount = true
+      ok = false
+    }
+  } else {
+    const qty = parseAmountInput(form.quantity)
+    if (!form.quantity.trim() || Number.isNaN(qty) || qty <= 0) {
+      fieldError.quantity = true
+      ok = false
+    }
+  }
+  if (!form.orderPriceType) {
+    fieldError.orderPriceType = true
+    ok = false
+  }
+  if (form.orderPriceType === 'LIMIT') {
+    const limit = parseAmountInput(form.limitPrice)
+    if (!form.limitPrice.trim() || Number.isNaN(limit) || limit <= 0) {
+      fieldError.limitPrice = true
+      ok = false
+    }
+  }
+  if (!form.frequencyType) {
+    fieldError.frequencyType = true
+    ok = false
+  }
+  if (showFrequencyDay.value && !form.frequencyDay) {
+    fieldError.frequencyDay = true
+    ok = false
+  }
+  const offset = form.ctOffsetMinutes
+  if (
+    offset === null ||
+    offset === undefined ||
+    Number.isNaN(offset) ||
+    offset < 0 ||
+    offset > 240
+  ) {
+    fieldError.ctOffsetMinutes = true
+    ok = false
+  }
+  if (form.endMode === 'count') {
+    const count = Number.parseInt(form.endCount, 10)
+    if (!form.endCount.trim() || Number.isNaN(count) || count < 1) {
+      fieldError.endCount = true
+      ok = false
+    }
+  }
+
+  return ok
+}
+
+function validateNextExecutionPreview(): boolean {
+  fieldError.exchangeCode = false
+  fieldError.frequencyType = false
+  fieldError.frequencyDay = false
+  fieldError.ctOffsetMinutes = false
+  let ok = true
+
+  if (!form.exchangeCode) {
+    fieldError.exchangeCode = true
+    ok = false
+  }
+  if (!form.frequencyType) {
+    fieldError.frequencyType = true
+    ok = false
+  }
+  if (showFrequencyDay.value && !form.frequencyDay) {
+    fieldError.frequencyDay = true
+    ok = false
+  }
+  const offset = form.ctOffsetMinutes
+  if (
+    offset === null ||
+    offset === undefined ||
+    Number.isNaN(offset) ||
+    offset < 0 ||
+    offset > 240
+  ) {
+    fieldError.ctOffsetMinutes = true
+    ok = false
+  }
+
+  return ok
+}
+
+function buildNextExecutionPreviewBody() {
+  const frequencyType = form.frequencyType as FrequencyType
+  const body: {
+    exchangeCode: string
+    frequencyType: FrequencyType
+    frequencyDay?: string
+    ctOffsetMinutes: number
+    startDate?: string
+  } = {
+    exchangeCode: form.exchangeCode,
+    frequencyType,
+    ctOffsetMinutes: form.ctOffsetMinutes,
+  }
+  if (showFrequencyDay.value && form.frequencyDay) {
+    body.frequencyDay = form.frequencyDay
+  }
+  if (form.startDate) {
+    body.startDate = form.startDate
+  }
+  return body
+}
+
+function closeNextExecutionPreview() {
+  nextExecutionPreviewVisible.value = false
+}
+
+function onNextExecutionPreviewClosed() {
+  nextExecutionPreview.value = null
+}
+
+async function openNextExecutionPreview() {
+  if (nextExecutionPreviewLoading.value) {
+    return
+  }
+  if (!validateNextExecutionPreview()) {
+    ElMessage.warning(t('recurring.previewNextExecutionFill'))
+    return
+  }
+  nextExecutionPreviewLoading.value = true
+  try {
+    const res = await previewScheduleInvestmentNextExecution(buildNextExecutionPreviewBody())
+    nextExecutionPreview.value = res.data ?? null
+    if (nextExecutionPreview.value) {
+      nextExecutionPreviewVisible.value = true
+    }
+  } catch {
+    // http 拦截器已提示错误
+  } finally {
+    nextExecutionPreviewLoading.value = false
+  }
+}
+
+function resetForm() {
+  picked.value = []
+  exchangeAssets.value = []
+  form.exchangeCode = ''
+  form.investmentType = 'AMOUNT'
+  form.startDate = ''
+  form.amount = ''
+  form.quantity = ''
+  form.orderPriceType = 'MARKET'
+  form.limitPrice = ''
+  form.frequencyType = ''
+  form.frequencyDay = ''
+  form.ctOffsetMinutes = 30
+  form.endMode = 'date'
+  form.endDate = ''
+  form.noEnd = false
+  form.endCount = ''
+  clearErrors()
+}
+
+function onSubmit() {
+  if (!validate()) {
+    ElMessage.warning(t('recurring.fillRequired'))
+    return
+  }
+
+  const amount =
+    form.investmentType === 'AMOUNT' ? parseAmountInput(form.amount) : parseAmountInput(form.quantity)
+  const quantity =
+    form.investmentType === 'QUANTITY' ? parseAmountInput(form.quantity) : undefined
+  draft.value = {
+    assets: picked.value.map((item) => ({ ...item })),
+    amount,
+    interval: frequencyTypeToInterval(form.frequencyType as FrequencyType),
+    startDate: form.startDate,
+    endDisplay: buildEndDisplay(),
+    endMode: form.endMode,
+    endDate: form.endDate,
+    endCount: form.endMode === 'count' ? Number.parseInt(form.endCount, 10) : null,
+    noEnd: form.endMode === 'date' && (form.noEnd || !form.endDate),
+    investmentType: form.investmentType,
+    quantity,
+    orderPriceType: form.orderPriceType,
+    limitPrice:
+      form.orderPriceType === 'LIMIT' ? parseAmountInput(form.limitPrice) : undefined,
+    frequencyDay: showFrequencyDay.value ? form.frequencyDay : undefined,
+    ctOffsetMinutes: form.ctOffsetMinutes,
+  }
+  confirmVisible.value = true
+}
+
+function buildCreateRequestBody(): ReturnType<typeof buildScheduleInvestmentCreateBody> | null {
+  if (!picked.value[0] || !form.frequencyType) {
+    return null
+  }
+  const amountPerExecution =
+    form.investmentType === 'AMOUNT' ? parseAmountInput(form.amount) : null
+  const qtyPerExecution =
+    form.investmentType === 'QUANTITY' ? parseAmountInput(form.quantity) : null
+  const limitPrice =
+    form.orderPriceType === 'LIMIT' ? parseAmountInput(form.limitPrice) : null
+  return buildScheduleInvestmentCreateBody({
+    exchangeCode: form.exchangeCode,
+    asset: picked.value[0],
+    investmentType: form.investmentType,
+    amountPerExecution,
+    qtyPerExecution,
+    orderPriceType: form.orderPriceType,
+    limitPrice,
+    frequencyType: form.frequencyType,
+    frequencyDay: form.frequencyDay,
+    startDate: form.startDate,
+    endMode: form.endMode,
+    endDate: form.endDate,
+    noEnd: form.noEnd,
+    endCount: form.endMode === 'count' ? Number.parseInt(form.endCount, 10) : null,
+    ctOffsetMinutes: form.ctOffsetMinutes,
+    clientId: authStore.clientId,
+    accountId: authStore.accountId,
+  })
+}
+
+function closeConfirm() {
+  confirmVisible.value = false
+}
+
+async function confirmCreate() {
+  if (!draft.value || submitting.value) {
+    return
+  }
+  const body = buildCreateRequestBody()
+  if (!body) {
+    ElMessage.warning(t('recurring.fillRequired'))
+    return
+  }
+  submitting.value = true
+  try {
+    await createScheduleInvestmentPlan(body)
+    await loadPlans()
+    ElMessage.success(t('recurring.createdToast'))
+    confirmVisible.value = false
+    draft.value = null
+    resetForm()
+  } catch {
+    // http 拦截器已提示错误
+  } finally {
+    submitting.value = false
+  }
+}
+
+function openTerminateDialog(plan: RecurringPlan) {
+  const planNo = plan.planNo?.trim()
+  if (!planNo) {
+    ElMessage.warning(t('recurring.planDetail.missingPlanNo'))
+    return
+  }
+  terminateTarget.value = plan
+  terminateReason.value = ''
+  terminateVisible.value = true
+}
+
+function closeTerminateDialog() {
+  terminateVisible.value = false
+}
+
+function onTerminateDialogClosed() {
+  terminateTarget.value = null
+  terminateReason.value = ''
+}
+
+async function confirmTerminate() {
+  const planNo = terminateTarget.value?.planNo?.trim()
+  if (!planNo || terminateSubmitting.value) {
+    return
+  }
+  terminateSubmitting.value = true
+  try {
+    await terminateScheduleInvestmentPlan({
+      planNo,
+      terminateReason: terminateReason.value.trim(),
+    })
+    await loadPlans()
+    ElMessage.success(t('recurring.cancelledToast'))
+    terminateVisible.value = false
+  } catch {
+    // http 拦截器已提示错误
+  } finally {
+    terminateSubmitting.value = false
+  }
+}
+
+function parsePlanDecimal(value: string | number | null | undefined): number {
+  if (value == null || value === '') {
+    return 0
+  }
+  const n = typeof value === 'number' ? value : Number.parseFloat(value)
+  return Number.isNaN(n) ? 0 : n
+}
+
+function formatDetailInvestment(plan: ScheduleInvestmentPlanDetailPlan) {
+  if (plan.investmentType === 'QUANTITY') {
+    return t('recurring.previewQuantity', { n: parsePlanDecimal(plan.qtyPerExecution) })
+  }
+  return formatHkd(parsePlanDecimal(plan.amountPerExecution))
+}
+
+function formatDetailOrderPrice(plan: ScheduleInvestmentPlanDetailPlan) {
+  const typeLabel = t(`recurring.orderPriceType.${plan.orderPriceType}`)
+  if (plan.orderPriceType === 'LIMIT') {
+    const limit = parsePlanDecimal(plan.limitPrice)
+    if (limit > 0) {
+      return `${typeLabel} · ${formatHkd(limit)}`
+    }
+  }
+  return typeLabel
+}
+
+function formatDetailFrequency(plan: ScheduleInvestmentPlanDetailPlan) {
+  let text = t(`recurring.frequency.${plan.frequencyType}`)
+  if (plan.frequencyDay) {
+    const dayLabel =
+      plan.frequencyType === 'WEEKLY'
+        ? t(`recurring.weekday.${plan.frequencyDay}`)
+        : t('recurring.monthDayOption', { day: plan.frequencyDay })
+    text = `${text} · ${dayLabel}`
+  }
+  return text
+}
+
+function formatDetailEndCondition(plan: ScheduleInvestmentPlanDetailPlan) {
+  if (plan.endType === 'COUNT') {
+    const total = plan.totalExecutionCount
+    if (total != null && total !== '') {
+      return t('recurring.endCountValue', { n: Number(total) })
+    }
+  }
+  if (plan.endType === 'NONE' || !plan.endDate) {
+    return t('recurring.noEndDate')
+  }
+  return plan.endDate
+}
+
+function formatDetailProgress(plan: ScheduleInvestmentPlanDetailPlan) {
+  const done = Number(plan.executedCount ?? 0)
+  const total = plan.totalExecutionCount
+  if (plan.endType === 'COUNT' && total != null && total !== '') {
+    return t('recurring.planDetail.progressValue', { done, total: Number(total) })
+  }
+  return t('recurring.planDetail.progressOpen', { done })
+}
+
+function exchangeLabelForCode(exchangeCode: string) {
+  const code = exchangeCode.trim()
+  if (!code) {
+    return '—'
+  }
+  const option = exchangeSelectOptions.value.find((row) => row.value === code)
+  return option?.label ?? code
+}
+
+function formatDetailProduct(plan: ScheduleInvestmentPlanDetailPlan) {
+  return scheduleProductLineDisplay(
+    resolveAppLocale(locale.value),
+    plan.productCode,
+    plan.productLocalName,
+    plan.productEngName,
+  )
+}
+
+function formatDetailStatus(plan: ScheduleInvestmentPlanDetailPlan) {
+  const uiStatus = mapApiPlanStatus(plan.status)
+  return t(`recurring.status.${uiStatus}`)
+}
+
+function formatExecutionAmount(row: ScheduleInvestmentPlanExecutionRecord) {
+  if (row.investmentType === 'QUANTITY') {
+    const qty = parsePlanDecimal(row.inputQty ?? row.calculatedQty)
+    return t('recurring.previewQuantity', { n: qty })
+  }
+  const amount = parsePlanDecimal(row.amount)
+  return amount > 0 ? formatHkd(amount) : '—'
+}
+
+function closePlanDetail() {
+  detailVisible.value = false
+}
+
+function onDetailDialogClosed() {
+  detailPlan.value = null
+  detailExecutions.value = []
+}
+
+async function openPlanDetail(plan: RecurringPlan) {
+  const planNo = plan.planNo?.trim()
+  if (!planNo) {
+    ElMessage.warning(t('recurring.planDetail.missingPlanNo'))
+    return
+  }
+  detailVisible.value = true
+  detailLoading.value = true
+  detailPlan.value = null
+  detailExecutions.value = []
+  try {
+    const res = await getScheduleInvestmentPlanDetail({ planNo })
+    detailPlan.value = res.data?.plan ?? null
+    detailExecutions.value = Array.isArray(res.data?.recentExecutions)
+      ? res.data.recentExecutions
+      : []
+    if (!detailPlan.value) {
+      detailVisible.value = false
+    }
+  } catch {
+    detailVisible.value = false
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function statusClass(status: RecurringPlan['status']) {
+  if (status === 'active') {
+    return 'tag--ok'
+  }
+  if (status === 'created') {
+    return 'tag--info'
+  }
+  return 'tag--gray'
+}
+
+function extraAssetCount(plan: RecurringPlan) {
+  return Math.max(plan.assets.length - 1, 0)
+}
+
+function planAssetDisplayName(plan: RecurringPlan) {
+  const asset = plan.assets[0]
+  if (!asset) {
+    return ''
+  }
+  const name = investAssetDisplayName(asset, resolveAppLocale(locale.value)).trim()
+  return name && name !== asset.code ? name : ''
+}
+
+function planAssetCellText(plan: RecurringPlan) {
+  const code = plan.assets[0]?.code?.trim() ?? ''
+  const name = planAssetDisplayName(plan)
+  const extra = extraAssetCount(plan)
+  const main = [code, name].filter(Boolean).join(' ')
+  if (extra > 0) {
+    return main ? `${main} +${extra}` : `+${extra}`
+  }
+  return main || '—'
+}
+
+const previewAsset = computed(() => draft.value?.assets.map((item) => item.code).join('、') ?? '')
+const previewInvestment = computed(() => {
+  if (!draft.value) {
+    return ''
+  }
+  if (draft.value.investmentType === 'QUANTITY' && draft.value.quantity != null) {
+    return t('recurring.previewQuantity', { n: draft.value.quantity })
+  }
+  return formatHkd(draft.value.amount)
+})
+const previewInterval = computed(() => {
+  if (!draft.value) {
+    return ''
+  }
+  const freqKey = draft.value.interval === 'daily'
+    ? 'DAILY'
+    : draft.value.interval === 'weekly'
+      ? 'WEEKLY'
+      : 'MONTHLY'
+  let text = t(`recurring.frequency.${freqKey}`)
+  if (draft.value.frequencyDay) {
+    const dayLabel =
+      freqKey === 'WEEKLY'
+        ? t(`recurring.weekday.${draft.value.frequencyDay}`)
+        : t('recurring.monthDayOption', { day: draft.value.frequencyDay })
+    text = `${text} · ${dayLabel}`
+  }
+  return text
+})
+const previewOrderPrice = computed(() => {
+  if (!draft.value?.orderPriceType) {
+    return ''
+  }
+  const typeLabel = t(`recurring.orderPriceType.${draft.value.orderPriceType}`)
+  if (draft.value.orderPriceType === 'LIMIT' && draft.value.limitPrice != null) {
+    return `${typeLabel} · ${formatHkd(draft.value.limitPrice)}`
+  }
+  return typeLabel
+})
+const previewOffset = computed(() =>
+  draft.value?.ctOffsetMinutes != null
+    ? t('recurring.ctOffsetPreview', { n: draft.value.ctOffsetMinutes })
+    : '',
+)
+</script>
+
+<template>
+  <AppPage>
+    <div class="ri-page">
+      <div class="page-intro">
+        <h1 class="app-page__title">{{ t('recurring.title') }}</h1>
+        <p class="app-page__lead">{{ t('recurring.lead') }}</p>
+      </div>
+
+      <section v-loading="plansLoading" class="panel">
+        <div class="panel-head">
+          <h2>{{ t('recurring.myPlans') }}</h2>
+          <span class="microlabel">{{ t('recurring.runningCount', { n: plansStore.runningCount }) }}</span>
+        </div>
+
+        <div
+          v-if="!plansLoading && !plansStore.plans.length"
+          class="plan-empty"
+        >
+          {{ t('recurring.planEmpty') }}
+        </div>
+
+        <div v-else-if="isMobile && plansStore.plans.length" class="plan-cards">
+          <article v-for="plan in plansStore.plans" :key="plan.id" class="plan-card">
+            <div class="plan-card__top">
+              <div>
+                <span class="code">{{ plan.assets[0]?.code }}</span>
+                <span v-if="planAssetDisplayName(plan)">{{ planAssetDisplayName(plan) }}</span>
+                <span v-if="extraAssetCount(plan)" class="microlabel">
+                  +{{ extraAssetCount(plan) }}
+                </span>
+              </div>
+              <span class="tag" :class="statusClass(plan.status)">
+                {{ t(`recurring.status.${plan.status}`) }}
+              </span>
+            </div>
+            <dl class="plan-card__meta">
+              <div>
+                <dt>{{ planInvestmentLabel(plan) }}</dt>
+                <dd class="num">{{ planInvestmentDisplay(plan) }}</dd>
+              </div>
+              <div>
+                <dt>{{ t('recurring.colInterval') }}</dt>
+                <dd>{{ intervalTextForPlan(plan) }}</dd>
+              </div>
+              <div>
+                <dt>{{ t('recurring.colStart') }}</dt>
+                <dd class="num">{{ plan.startDate }}</dd>
+              </div>
+              <div>
+                <dt>{{ t('recurring.colEnd') }}</dt>
+                <dd>{{ endTextForPlan(plan) }}</dd>
+              </div>
+            </dl>
+            <div class="plan-card__actions">
+              <button type="button" class="detail-link" @click="openPlanDetail(plan)">
+                {{ t('recurring.planDetail.detail') }}
+              </button>
+              <button
+                v-if="plan.status !== 'cancelled'"
+                type="button"
+                class="cancel-link"
+                @click="openTerminateDialog(plan)"
+              >
+                {{ t('recurring.cancel') }}
+              </button>
+            </div>
+          </article>
+        </div>
+
+        <div v-else-if="plansStore.plans.length" class="app-table-scroll">
+          <table class="plan-table">
+            <thead>
+              <tr>
+                <th class="l plan-table__asset-col">{{ t('recurring.colAsset') }}</th>
+                <th>{{ t('recurring.colAmount') }}</th>
+                <th class="l">{{ t('recurring.colInterval') }}</th>
+                <th class="l">{{ t('recurring.colStart') }}</th>
+                <th class="l">{{ t('recurring.colEnd') }}</th>
+                <th class="l">{{ t('recurring.colStatus') }}</th>
+                <th class="l">{{ t('recurring.colAction') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="plan in plansStore.plans" :key="plan.id">
+                <td class="l plan-table__asset-col">
+                  <el-tooltip
+                    :content="planAssetCellText(plan)"
+                    placement="top"
+                    :show-after="200"
+                    :disabled="!planAssetCellText(plan) || planAssetCellText(plan) === '—'"
+                  >
+                    <div class="plan-table__asset-ellipsis">
+                      <span class="code">{{ plan.assets[0]?.code }}</span>
+                      <template v-if="planAssetDisplayName(plan)">
+                        {{ planAssetDisplayName(plan) }}
+                      </template>
+                      <span v-if="extraAssetCount(plan)" class="microlabel">
+                        +{{ extraAssetCount(plan) }}
+                      </span>
+                    </div>
+                  </el-tooltip>
+                </td>
+                <td class="num">{{ planInvestmentDisplay(plan) }}</td>
+                <td class="l">{{ intervalTextForPlan(plan) }}</td>
+                <td class="l"><span class="code">{{ plan.startDate }}</span></td>
+                <td class="l">{{ endTextForPlan(plan) }}</td>
+                <td class="l">
+                  <span class="tag" :class="statusClass(plan.status)">
+                    {{ t(`recurring.status.${plan.status}`) }}
+                  </span>
+                </td>
+                <td class="l">
+                  <div class="plan-actions">
+                    <button type="button" class="detail-link" @click="openPlanDetail(plan)">
+                      {{ t('recurring.planDetail.detail') }}
+                    </button>
+                    <button
+                      v-if="plan.status !== 'cancelled'"
+                      type="button"
+                      class="cancel-link"
+                      @click="openTerminateDialog(plan)"
+                    >
+                      {{ t('recurring.cancel') }}
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <form class="panel" novalidate @submit.prevent="onSubmit" @reset.prevent="resetForm">
+        <div class="panel-head">
+          <h2>{{ t('recurring.createTitle') }}</h2>
+          <span class="microlabel">{{ t('recurring.createHint') }}</span>
+        </div>
+
+        <div class="form-body">
+          <el-row :gutter="gutter">
+            <el-col :xs="24">
+              <div class="field" :class="{ 'field--err': fieldError.exchangeCode }">
+                <label>
+                  {{ t('recurring.exchange') }}
+                  <span class="req">*</span>
+                </label>
+                <el-select
+                  v-model="form.exchangeCode"
+                  class="control-select"
+                  :placeholder="t('recurring.pleaseSelect')"
+                  :loading="exchangeLoading"
+                  filterable
+                  @change="fieldError.exchangeCode = false"
+                >
+                  <el-option
+                    v-for="option in exchangeSelectOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </div>
+            </el-col>
+
+            <el-col :xs="24">
+              <div class="field">
+                <label>
+                  {{ t('recurring.asset') }}
+                  <span class="req">*</span>
+                </label>
+                <AssetChipPicker
+                  :key="form.exchangeCode || 'no-exchange'"
+                  v-model="picked"
+                  :assets="exchangeAssets"
+                  :invalid="assetInvalid"
+                  :disabled="!form.exchangeCode"
+                  :loading="assetLoading"
+                  @search="onAssetSearch"
+                />
+                <div class="hint">{{ t('recurring.assetSupport') }}</div>
+              </div>
+            </el-col>
+
+            <el-col :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': investmentValueFieldError }">
+                <label>
+                  {{ t('recurring.previewInvestmentLabel') }}
+                  <span class="req">*</span>
+                </label>
+                <div class="field-combo">
+                  <el-select
+                    v-model="form.investmentType"
+                    class="field-combo__type"
+                    :aria-label="t('recurring.investmentTypeLabel')"
+                  >
+                    <el-option
+                      v-for="option in investmentTypeOptions"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-select>
+                  <el-input
+                    v-if="form.investmentType === 'AMOUNT'"
+                    v-model="form.amount"
+                    class="field-combo__value"
+                    inputmode="decimal"
+                    :placeholder="t('recurring.amountPlaceholder')"
+                    @input="fieldError.amount = false"
+                  />
+                  <el-input
+                    v-else
+                    v-model="form.quantity"
+                    class="field-combo__value"
+                    inputmode="decimal"
+                    :placeholder="t('recurring.quantityPlaceholder')"
+                    @input="fieldError.quantity = false"
+                  />
+                </div>
+                <div class="hint">{{ investmentValueHint }}</div>
+              </div>
+            </el-col>
+
+            <el-col :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': fieldError.orderPriceType }">
+                <label>
+                  {{ t('recurring.orderPriceTypeLabel') }}
+                  <span class="req">*</span>
+                </label>
+                <el-select
+                  v-model="form.orderPriceType"
+                  class="control-select"
+                  :placeholder="t('recurring.pleaseSelect')"
+                  @change="fieldError.orderPriceType = false"
+                >
+                  <el-option
+                    v-for="option in orderPriceOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </div>
+            </el-col>
+
+            <el-col v-if="form.orderPriceType === 'LIMIT'" :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': fieldError.limitPrice }">
+                <label>
+                  {{ t('recurring.limitPrice') }}
+                  <span class="req">*</span>
+                </label>
+                <el-input
+                  v-model="form.limitPrice"
+                  class="control-input"
+                  inputmode="decimal"
+                  :placeholder="t('recurring.limitPricePlaceholder')"
+                  @input="fieldError.limitPrice = false"
+                />
+                <div class="hint">{{ t('recurring.limitPriceHint') }}</div>
+              </div>
+            </el-col>
+
+            <el-col :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': fieldError.frequencyType }">
+                <label>
+                  {{ t('recurring.frequencyLabel') }}
+                  <span class="req">*</span>
+                </label>
+                <el-select
+                  v-model="form.frequencyType"
+                  class="control-select"
+                  :placeholder="t('recurring.pleaseSelect')"
+                  @change="fieldError.frequencyType = false"
+                >
+                  <el-option
+                    v-for="option in frequencyOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </div>
+            </el-col>
+
+            <el-col v-if="showFrequencyDay" :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': fieldError.frequencyDay }">
+                <label>
+                  {{ t('recurring.frequencyDayLabel') }}
+                  <span class="req">*</span>
+                </label>
+                <el-select
+                  v-if="form.frequencyType === 'WEEKLY'"
+                  v-model="form.frequencyDay"
+                  class="control-select"
+                  :placeholder="t('recurring.pleaseSelect')"
+                  @change="fieldError.frequencyDay = false"
+                >
+                  <el-option
+                    v-for="option in weekdayOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+                <el-select
+                  v-else
+                  v-model="form.frequencyDay"
+                  class="control-select"
+                  :placeholder="t('recurring.pleaseSelect')"
+                  @change="fieldError.frequencyDay = false"
+                >
+                  <el-option
+                    v-for="option in monthDayOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+                <div class="hint">
+                  {{
+                    form.frequencyType === 'WEEKLY'
+                      ? t('recurring.frequencyDayWeeklyHint')
+                      : t('recurring.frequencyDayMonthlyHint')
+                  }}
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': fieldError.startDate }">
+                <label>
+                  {{ t('recurring.startDate') }}
+                  <span class="req">*</span>
+                </label>
+                <el-date-picker
+                  v-model="form.startDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  :placeholder="t('recurring.startDate')"
+                  class="control-date"
+                  @change="fieldError.startDate = false"
+                />
+              </div>
+            </el-col>
+
+            <el-col :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': fieldError.ctOffsetMinutes }">
+                <label>
+                  {{ t('recurring.ctOffsetLabel') }}
+                  <span class="req">*</span>
+                </label>
+                <el-input-number
+                  v-model="form.ctOffsetMinutes"
+                  class="control-input control-input-number"
+                  :min="0"
+                  :max="240"
+                  :step="1"
+                  controls-position="right"
+                  @change="fieldError.ctOffsetMinutes = false"
+                />
+                <div class="hint">{{ t('recurring.ctOffsetHint') }}</div>
+              </div>
+            </el-col>
+
+            <el-col :xs="24" :md="12">
+              <div class="field" :class="{ 'field--err': endValueFieldError }">
+                <label>
+                  {{ t('recurring.endPreview') }}
+                  <span v-if="form.endMode === 'count'" class="req">*</span>
+                </label>
+                <div class="field-combo">
+                  <el-select
+                    v-model="form.endMode"
+                    class="field-combo__type field-combo__type--end"
+                    :aria-label="t('recurring.endModeLabel')"
+                  >
+                    <el-option
+                      v-for="option in endModeOptions"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-select>
+                  <el-date-picker
+                    v-if="form.endMode === 'date'"
+                    v-model="form.endDate"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    :disabled="form.noEnd"
+                    :placeholder="t('recurring.endDate')"
+                    class="field-combo__value field-combo__date"
+                    :class="{ 'is-dimmed': form.noEnd }"
+                  />
+                  <el-input
+                    v-else
+                    v-model="form.endCount"
+                    class="field-combo__value"
+                    inputmode="numeric"
+                    :placeholder="t('recurring.endCountPlaceholder')"
+                    @input="fieldError.endCount = false"
+                  />
+                </div>
+                <el-checkbox
+                  v-if="form.endMode === 'date'"
+                  v-model="form.noEnd"
+                  class="no-end-check"
+                >
+                  {{ t('recurring.noEndDate') }}
+                </el-checkbox>
+                <div v-else class="hint">{{ endValueHint }}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+
+        <div class="panel-head panel-head--notes">
+          <h2>{{ t('recurring.notesTitle') }}</h2>
+        </div>
+        <ol class="ri-note-list">
+          <li>{{ t('recurring.notes.n1') }}</li>
+          <li>{{ t('recurring.notes.n2') }}</li>
+          <li>{{ t('recurring.notes.n3') }}</li>
+          <li>{{ t('recurring.notes.n4') }}</li>
+          <li>{{ t('recurring.notes.n5') }}</li>
+        </ol>
+
+        <div class="form-actions">
+          <el-button native-type="reset">{{ t('recurring.reset') }}</el-button>
+          <el-button
+            type="default"
+            :loading="nextExecutionPreviewLoading"
+            @click="openNextExecutionPreview"
+          >
+            {{ t('recurring.previewNextExecution') }}
+          </el-button>
+          <el-button type="primary" native-type="submit">{{ t('recurring.continue') }}</el-button>
+        </div>
+      </form>
+
+      <el-dialog
+        v-model="terminateVisible"
+        :title="t('recurring.terminateDialogTitle')"
+        width="440px"
+        align-center
+        class="ri-dialog"
+        @closed="onTerminateDialogClosed"
+      >
+        <p class="terminate-lead">{{ t('recurring.terminateDialogLead') }}</p>
+        <p class="terminate-question">{{ t('recurring.cancelConfirmTitle') }}</p>
+        <div v-if="terminateTarget" class="field terminate-reason-field">
+          <label for="terminate-reason-input">{{ t('recurring.terminateReasonLabel') }}</label>
+          <el-input
+            id="terminate-reason-input"
+            v-model="terminateReason"
+            type="textarea"
+            :rows="3"
+            maxlength="200"
+            show-word-limit
+            :placeholder="t('recurring.terminateReasonPlaceholder')"
+          />
+          <div class="hint">{{ t('recurring.terminateReasonHint') }}</div>
+        </div>
+        <template #footer>
+          <el-button @click="closeTerminateDialog">{{ t('recurring.cancelConfirmBack') }}</el-button>
+          <el-button type="danger" :loading="terminateSubmitting" @click="confirmTerminate">
+            {{ t('recurring.cancelConfirmOk') }}
+          </el-button>
+        </template>
+      </el-dialog>
+
+      <el-dialog
+        v-model="detailVisible"
+        :title="t('recurring.planDetail.title')"
+        width="min(520px, 92vw)"
+        align-center
+        class="ri-dialog"
+        @closed="onDetailDialogClosed"
+      >
+        <div v-loading="detailLoading">
+          <dl v-if="detailPlan" class="ri-preview">
+            <dt>{{ t('recurring.planDetail.planNo') }}</dt>
+            <dd class="num">{{ detailPlan.planNo }}</dd>
+            <dt>{{ t('recurring.planDetail.exchange') }}</dt>
+            <dd>{{ exchangeLabelForCode(detailPlan.exchangeCode) }}</dd>
+            <dt>{{ t('recurring.planDetail.product') }}</dt>
+            <dd>{{ formatDetailProduct(detailPlan) }}</dd>
+            <dt>{{ t('recurring.planDetail.investment') }}</dt>
+            <dd class="num">{{ formatDetailInvestment(detailPlan) }}</dd>
+            <dt>{{ t('recurring.planDetail.orderPrice') }}</dt>
+            <dd>{{ formatDetailOrderPrice(detailPlan) }}</dd>
+            <dt>{{ t('recurring.planDetail.frequency') }}</dt>
+            <dd>{{ formatDetailFrequency(detailPlan) }}</dd>
+            <dt>{{ t('recurring.ctOffsetLabel') }}</dt>
+            <dd class="num">{{ t('recurring.ctOffsetPreview', { n: detailPlan.ctOffsetMinutes }) }}</dd>
+            <dt>{{ t('recurring.planDetail.startDate') }}</dt>
+            <dd class="num">{{ detailPlan.startDate }}</dd>
+            <dt>{{ t('recurring.planDetail.endCondition') }}</dt>
+            <dd class="num">{{ formatDetailEndCondition(detailPlan) }}</dd>
+            <dt>{{ t('recurring.planDetail.nextExecution') }}</dt>
+            <dd class="num">{{ detailPlan.nextExecutionDate || '—' }}</dd>
+            <dt>{{ t('recurring.planDetail.progress') }}</dt>
+            <dd class="num">{{ formatDetailProgress(detailPlan) }}</dd>
+            <dt>{{ t('recurring.planDetail.status') }}</dt>
+            <dd>{{ formatDetailStatus(detailPlan) }}</dd>
+            <dt v-if="detailPlan.createOn">{{ t('recurring.planDetail.createdAt') }}</dt>
+            <dd v-if="detailPlan.createOn" class="num">{{ detailPlan.createOn }}</dd>
+          </dl>
+
+          <template v-if="detailPlan && !detailLoading">
+            <h3 class="detail-exec-title">{{ t('recurring.planDetail.recentExecutions') }}</h3>
+            <p v-if="!detailExecutions.length" class="detail-exec-empty">
+              {{ t('recurring.planDetail.executionEmpty') }}
+            </p>
+            <div v-else class="app-table-scroll detail-exec-scroll">
+              <table class="plan-table detail-exec-table">
+                <thead>
+                  <tr>
+                    <th class="l">{{ t('recurring.planDetail.colScheduledDate') }}</th>
+                    <th class="l">{{ t('recurring.planDetail.colActualDate') }}</th>
+                    <th>{{ t('recurring.planDetail.colAmount') }}</th>
+                    <th class="l">{{ t('recurring.planDetail.colExecutionStatus') }}</th>
+                    <th class="l">{{ t('recurring.planDetail.colOrderStatus') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, index) in detailExecutions" :key="row.id ?? row.executionNo ?? index">
+                    <td class="l num">{{ row.scheduledExecutionDate || '—' }}</td>
+                    <td class="l num">{{ row.actualTradeDate || '—' }}</td>
+                    <td class="num">{{ formatExecutionAmount(row) }}</td>
+                    <td class="l">{{ row.executionStatus || '—' }}</td>
+                    <td class="l">{{ row.orderStatus || '—' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </template>
+        </div>
+        <template #footer>
+          <el-button @click="closePlanDetail">{{ t('recurring.back') }}</el-button>
+        </template>
+      </el-dialog>
+
+      <el-dialog
+        v-model="nextExecutionPreviewVisible"
+        :title="t('recurring.previewNextExecutionTitle')"
+        width="min(440px, 92vw)"
+        align-center
+        class="ri-dialog"
+        @closed="onNextExecutionPreviewClosed"
+      >
+        <dl v-if="nextExecutionPreview" class="ri-preview">
+          <dt>{{ t('recurring.previewScheduledDate') }}</dt>
+          <dd class="num">{{ nextExecutionPreview.scheduledDate || '—' }}</dd>
+          <dt>{{ t('recurring.previewExecutionDate') }}</dt>
+          <dd class="num">{{ nextExecutionPreview.executionDate || '—' }}</dd>
+          <dt>{{ t('recurring.previewExecutionDateTime') }}</dt>
+          <dd class="num">{{ nextExecutionPreview.executionDateTime || '—' }}</dd>
+          <dt>{{ t('recurring.previewDeferred') }}</dt>
+          <dd>
+            {{
+              nextExecutionPreview.deferred
+                ? t('recurring.previewDeferredYes')
+                : t('recurring.previewDeferredNo')
+            }}
+          </dd>
+          <dt>{{ t('recurring.ctOffsetLabel') }}</dt>
+          <dd class="num">
+            {{ t('recurring.ctOffsetPreview', { n: nextExecutionPreview.ctOffsetMinutes }) }}
+          </dd>
+        </dl>
+        <template #footer>
+          <el-button @click="closeNextExecutionPreview">{{ t('recurring.back') }}</el-button>
+        </template>
+      </el-dialog>
+
+      <el-dialog
+        v-model="confirmVisible"
+        :title="t('recurring.confirmTitle')"
+        width="440px"
+        align-center
+        class="ri-dialog"
+        @closed="draft = null"
+      >
+        <dl v-if="draft" class="ri-preview">
+          <dt>{{ t('recurring.asset') }}</dt>
+          <dd class="num">{{ previewAsset }}</dd>
+          <dt>{{ t('recurring.startDate') }}</dt>
+          <dd class="num">{{ draft.startDate }}</dd>
+          <dt>{{ t('recurring.previewInvestmentLabel') }}</dt>
+          <dd class="num">{{ previewInvestment }}</dd>
+          <dt>{{ t('recurring.orderPriceTypeLabel') }}</dt>
+          <dd>{{ previewOrderPrice }}</dd>
+          <dt>{{ t('recurring.frequencyLabel') }}</dt>
+          <dd>{{ previewInterval }}</dd>
+          <dt>{{ t('recurring.ctOffsetLabel') }}</dt>
+          <dd class="num">{{ previewOffset }}</dd>
+          <dt>{{ t('recurring.endPreview') }}</dt>
+          <dd>{{ draft.endDisplay }}</dd>
+        </dl>
+        <div class="modal-note">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="8" cy="8" r="6.2" />
+            <path d="M8 7.2v3.4M8 4.6v.2" />
+          </svg>
+          <span>{{ t('recurring.confirmNote') }}</span>
+        </div>
+        <template #footer>
+          <el-button @click="closeConfirm">{{ t('recurring.back') }}</el-button>
+          <el-button type="primary" :loading="submitting" @click="confirmCreate">
+            {{ t('recurring.confirmCreate') }}
+          </el-button>
+        </template>
+      </el-dialog>
+    </div>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.ri-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.page-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .app-page__title,
+  .app-page__lead {
+    margin: 0;
+  }
+}
+
+.panel {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+
+.panel-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--color-border);
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+
+  .microlabel {
+    margin-right: auto;
+  }
+
+  &--notes {
+    border-top: 1px solid var(--color-border);
+    border-bottom: none;
+
+    h2 {
+      font-size: 16px;
+    }
+  }
+}
+
+.microlabel {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.code {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 12.5px;
+}
+
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.plan-table {
+  width: 100%;
+  min-width: 720px;
+  table-layout: fixed;
+  border-collapse: collapse;
+
+  th {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-surface-2);
+    color: var(--color-muted);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 11px 14px;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 13px;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  th:first-child,
+  td:first-child,
+  .l {
+    text-align: left;
+  }
+
+  tbody tr:hover {
+    background: var(--color-surface-2);
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  &__asset-col {
+    width: 220px;
+    max-width: 220px;
+  }
+
+  &__asset-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: default;
+  }
+}
+
+.tag {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  &--ok {
+    color: var(--color-up);
+    background: var(--color-up-soft);
+  }
+
+  &--info {
+    color: var(--color-warn);
+    background: var(--color-warn-soft);
+  }
+
+  &--gray {
+    color: var(--color-muted);
+    background: var(--color-surface-2);
+    border: 1px solid var(--color-border);
+  }
+}
+
+.plan-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+}
+
+.terminate-lead {
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-text-2);
+}
+
+.terminate-question {
+  margin: 0 0 14px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.terminate-reason-field {
+  margin-bottom: 0;
+}
+
+.detail-link,
+.cancel-link {
+  min-height: 0;
+  padding: 2px 4px;
+  border: none;
+  background: none;
+  font-size: 15px;
+  line-height: 1.35;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.detail-link {
+  color: var(--color-primary);
+}
+
+.cancel-link {
+  color: var(--color-down);
+}
+
+.plan-empty {
+  padding: 24px 18px;
+  color: var(--color-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.plan-cards {
+  display: flex;
+  flex-direction: column;
+}
+
+.plan-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &__top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 13px;
+
+    .code {
+      margin-right: 6px;
+    }
+  }
+
+  &__meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px 16px;
+    margin: 0;
+
+    dt {
+      color: var(--color-muted);
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    dd {
+      margin: 2px 0 0;
+      font-size: 13px;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 12px;
+  }
+}
+
+.detail-exec-title {
+  margin: 18px 0 8px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.detail-exec-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-muted);
+}
+
+.detail-exec-scroll {
+  margin: 0 -4px;
+}
+
+.detail-exec-table {
+  min-width: 480px;
+}
+
+.form-body {
+  --form-control-width: 100%;
+  padding: 18px;
+
+  @include respond-up(md) {
+    --form-control-width: 70%;
+  }
+
+  @include respond-down(md) {
+    padding: 14px;
+  }
+}
+
+.field {
+  margin-bottom: 8px;
+
+  label {
+    display: block;
+    margin-bottom: 6px;
+    color: var(--color-muted);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .req {
+    margin-left: 2px;
+    color: var(--color-down);
+  }
+}
+
+.hint {
+  margin-top: 5px;
+  color: var(--color-muted);
+  font-size: 11.5px;
+}
+
+.control-date,
+.control-select,
+.control-input,
+.control-input-number,
+.end-toggle {
+  width: var(--form-control-width);
+  max-width: none;
+}
+
+.field :deep(.asset-wrap) {
+  width: var(--form-control-width);
+}
+
+:deep(.control-date.el-date-editor) {
+  width: var(--form-control-width);
+  max-width: none;
+}
+
+.control-input-number {
+  :deep(.el-input__wrapper) {
+    width: 100%;
+  }
+}
+
+.field-combo {
+  --el-input-border-color: transparent;
+  --el-input-hover-border-color: transparent;
+  --el-input-focus-border-color: transparent;
+
+  display: flex;
+  align-items: stretch;
+  width: var(--form-control-width);
+  max-width: none;
+  overflow: hidden;
+  border: 1px solid var(--color-control-border);
+  border-radius: var(--radius);
+  background: var(--color-control-bg);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:focus-within {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-soft);
+  }
+
+  &__type {
+    width: 108px;
+    flex-shrink: 0;
+
+    &--end {
+      width: 120px;
+    }
+
+    :deep(.el-select__wrapper) {
+      min-height: var(--el-component-size, 32px);
+      border: none;
+      border-radius: 0;
+      box-shadow: none !important;
+      border-right: 1px solid var(--color-border);
+    }
+  }
+
+  &__value {
+    flex: 1;
+    min-width: 0;
+    width: auto !important;
+    max-width: none !important;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+
+    :deep(.el-input__wrapper) {
+      min-height: var(--el-component-size, 32px);
+      border: none !important;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none !important;
+    }
+
+    :deep(.el-input__wrapper:hover),
+    :deep(.el-input__wrapper.is-focus) {
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  // 日期选择器根节点即 field-combo__value，需单独压过 EP 默认 inset 描边（子选择器须写在 :deep 内）
+  :deep(.el-date-editor.field-combo__date) {
+    flex: 1;
+    min-width: 0;
+    width: auto !important;
+    max-width: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent;
+    vertical-align: top;
+  }
+
+  :deep(.el-date-editor.field-combo__date .el-input__wrapper),
+  :deep(.el-date-editor.field-combo__date .el-input__wrapper:hover),
+  :deep(.el-date-editor.field-combo__date .el-input__wrapper.is-focus),
+  :deep(.el-date-editor.field-combo__date.is-active .el-input__wrapper),
+  :deep(.el-date-editor.field-combo__date.is-active:hover .el-input__wrapper) {
+    width: 100%;
+    min-height: var(--el-component-size, 32px);
+    border: none !important;
+    border-radius: 0;
+    background-color: transparent !important;
+    box-shadow: none !important;
+  }
+}
+
+.field--err {
+  .field-combo {
+    border-color: var(--color-down);
+    box-shadow: 0 0 0 3px var(--color-down-soft);
+
+    &:focus-within {
+      border-color: var(--color-down);
+      box-shadow: 0 0 0 3px var(--color-down-soft);
+    }
+  }
+
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper),
+  :deep(.el-date-editor) {
+    box-shadow: 0 0 0 1px var(--color-down) inset;
+  }
+
+  .field-combo :deep(.el-input__wrapper),
+  .field-combo :deep(.el-select__wrapper),
+  .field-combo :deep(.el-date-editor),
+  .field-combo :deep(.el-date-editor .el-input__wrapper) {
+    box-shadow: none !important;
+  }
+}
+
+.is-dimmed {
+  opacity: 0.5;
+}
+
+.no-end-check {
+  margin-top: 8px;
+  font-weight: 500;
+}
+
+.end-toggle {
+  display: flex;
+  overflow: hidden;
+  border: 1.5px solid var(--color-primary);
+  border-radius: var(--radius);
+
+  button {
+    flex: 1;
+    min-height: 44px;
+    padding: 9px 10px;
+    border: none;
+    background: var(--color-surface);
+    color: var(--color-primary-ink);
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &.on {
+      background: var(--color-primary);
+      color: #fff;
+
+      [data-theme='dark'] & {
+        color: #0a0f16;
+      }
+    }
+  }
+}
+
+.ri-note-list {
+  margin: 0;
+  padding: 4px 18px 14px 34px;
+  color: var(--color-text-2);
+  font-size: 12.5px;
+  line-height: 1.9;
+
+  li::marker {
+    color: var(--color-muted);
+  }
+}
+
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+  padding: 14px 18px;
+  border-top: 1px solid var(--color-border);
+
+  @include respond-down(md) {
+    .el-button {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
+
+.ri-preview {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 9px 18px;
+  margin: 0;
+  font-size: 13px;
+
+  dt {
+    color: var(--color-muted);
+  }
+
+  dd {
+    margin: 0;
+    font-weight: 600;
+    text-align: right;
+  }
+}
+
+.modal-note {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-left: 3px solid var(--color-primary);
+  border-radius: 3px;
+  background: var(--color-surface-2);
+  color: var(--color-text-2);
+  font-size: 12px;
+
+  svg {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--color-primary);
+  }
+}
+</style>
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..2d28a9a
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..5298209
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,66 @@
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { defineConfig, loadEnv } from 'vite'
+
+const DEFAULT_PROXY_TARGET = 'http://192.168.3.230:18000'
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const proxyTarget = (env.VITE_API_PROXY_TARGET || DEFAULT_PROXY_TARGET).trim().replace(/\/+$/, '')
+
+  return {
+    plugins: [
+      vue(),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+        dts: 'src/types/auto-imports.d.ts',
+      }),
+      Components({
+        resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
+        dts: 'src/types/components.d.ts',
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+    server: {
+      port: 5173,
+      open: true,
+      proxy: {
+        '/base': {
+          target: proxyTarget,
+          changeOrigin: true,
+          secure: false,
+        },
+        '/trade': {
+          target: proxyTarget,
+          changeOrigin: true,
+          secure: false,
+        },
+        '/product': {
+          target: proxyTarget,
+          changeOrigin: true,
+          secure: false,
+        },
+        '/api': {
+          target: proxyTarget,
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "@/styles/mixins/respond" as *;\n`,
+        },
+      },
+    },
+  }
+})