storlead-centre-platform/ui/sp-user-center/docs/sp-tems-ui-migration-plan.md

sp-tems-ui 迁移升级计划（Vue3 + TS + Element Plus）

目标与边界

• 迁移源仅使用 D:/workerspace/sp-tems/ui/sp-tems-ui。
• 不再继续使用旧 sp-user-center 业务页面作为迁移来源。
• 统一落地到当前新项目（Vite + Vue3 + TS + Element Plus）中的 OTR 模块。
• API 路径保持不变；接口不可达时继续走 mock/fallback。

模块拆分与优先级

1. P0：target、effect、task（核心业务）
2. P1：summary、notice、award、report、ai
3. P2：跨模块公共能力（utils、widgets、样式、权限点）

迁移方法

1. 路由对齐：按 sp-tems-ui/src/router/router.js 建立 OTR 路由映射。
2. 页面迁移：Vue2 Options API -> Vue3 <script setup lang="ts">。
3. 组件替换：
   • element-ui / view-design -> element-plus
   • 事件、插槽、v-model、表单校验规则按 Vue3 写法改造
4. 状态改造：vuex 依赖迁到 Pinia store（按业务切 store）。
5. 公共依赖替换：移除 sp-common，在新项目复用或重写等价工具。

分批执行清单

Batch A（已开始）

• 移除 OTR 中旧 sp-user-center 系统管理路由与页面（避免混源）。
• OTR 默认入口改为 target（/otr/target/mine）。

Batch B（进行中）

• 迁移 target 核心页面：company/depart/mine/targetTemplate/report。
• 先保证路由可达 + 页面可渲染，再逐页恢复交互。

Batch C

• 迁移 effect 核心页面：manage/mine/board/backlog/template。

Batch D

• 迁移 task 与 summary 主页面，补齐 widgets 依赖。

Batch E

• 迁移 notice/award/report/ai，统一样式与权限。

验收标准

• 模块路由全部可访问，无 404/白屏。
• 主流程可跑通（查询、分页、详情、保存）。
• 无新增 lint 报错；关键页面控制台无运行时异常。
• 关键 API 路径与旧系统一致。