# CrossBorder OS 前端实施计划

## 现状总结

### 已完成的基础设施（100%）
- Vue 3 + TS + Vite + Element Plus + Pinia + Vue Router
- 中后台布局（侧边栏、顶栏、角色菜单过滤）
- Mock API 系统（完整的 mock 数据 + API 路由）
- 登录认证 + RBAC 权限控制
- API 请求封装层（request.ts + services.ts）
- TypeScript 类型定义（page.ts）
- 全局样式系统

### 各页面实现程度

| 页面 | 实现度 | 说明 |
|------|--------|------|
| 登录页 | 100% | 完整的登录 + 角色切换 |
| 运营看板 | 100% | 指标卡片 + 告警 + 工作提示 |
| 商品编辑 | 60% | 分步表单骨架，缺实际保存 |
| 订单详情 | 70% | 有拆单/合单弹窗，缺真实逻辑 |
| 其他列表页 | 30-40% | 只有基础表格 + SpecPageRenderer 占位 |

---

## 实施任务

### 一、商品中心（4 页）

- [ ] **商品列表页（ProductListView.vue）**
  - [ ] 完整筛选区：关键词、SPU 编号、SKU 编号、类目、品牌、渠道、上架状态、更新时间
  - [ ] 表格列：主图、商品标题、SPU、SKU 数量、类目、渠道发布状态、总库存、价格区间、负责人、更新时间
  - [ ] 行内操作：查看、编辑、复制商品、上下架、进入映射、查看发布日志
  - [ ] 批量操作：批量上架、批量下架、批量导出
  - [ ] 批量导入弹窗（CSV 上传 + 结果反馈）
  - [ ] 移除底部 SpecPageRenderer 占位

- [ ] **商品编辑页（ProductEditorView.vue）**
  - [ ] 完善基础信息表单：商品标题、副标题、类目、品牌、标签、简介
  - [ ] 类目选择后自动带出属性模板
  - [ ] 规格组合区：新增规格项 → 自动生成 SKU 组合表格
  - [ ] SKU 编辑：编码、条码、成本价、建议售价、重量、尺寸
  - [ ] 图片/视频上传区：主图、附图、详情图排序、视频
  - [ ] 多语言区：语言版本选择、标题翻译、卖点翻译、详情翻译
  - [ ] 保存草稿 / 保存并继续编辑 / 提交校验
  - [ ] 离开未保存页面弹出确认提示
  - [ ] 必填字段校验（主图必填）

- [ ] **渠道映射页（新建 ProductMappingView.vue）**
  - [ ] 映射列表：内部 SKU、渠道 SKU、渠道类目、店铺、映射状态、最近同步时间、校验结果
  - [ ] 筛选区：商品标题、内部 SKU、渠道、店铺、映射状态、校验状态
  - [ ] 新增/编辑映射弹窗：目标渠道、店铺、类目、属性映射、标题、描述、主图、价格
  - [ ] 渠道切换后动态刷新类目和属性模板
  - [ ] 自动映射按钮 + 人工修正
  - [ ] 执行校验 → 展示校验结果（失败字段旁显示错误原因）
  - [ ] 发布到渠道操作

- [ ] **定价与库存规则页（新建 ProductPricingView.vue）**
  - [ ] 规则列表：SKU、币种、基准售价、渠道售价、折扣价、生效时间、安全库存、规则状态、最近修改人
  - [ ] 筛选区：SKU、渠道、币种、仓库、规则状态
  - [ ] 新增/编辑规则弹窗：币种、基础售价、渠道加减价规则、促销价、汇率来源、仓库、安全库存阈值、预警接收人、生效/失效时间
  - [ ] 批量调价：按百分比或固定金额
  - [ ] 促销价不可高于渠道售价校验
  - [ ] 启用/停用规则
  - [ ] 每次保存生成变更记录

### 二、订单中心（3 页）

- [ ] **订单列表页（OrderListView.vue）**
  - [ ] 完整筛选区：订单号、渠道订单号、渠道、买家姓名、订单状态、支付状态、发货状态、异常标签、下单时间、仓库
  - [ ] 表格列：订单号、渠道、买家、订单金额、商品件数、支付状态、订单状态、发货状态、仓库、异常标签、下单时间
  - [ ] 异常订单行高亮显示
  - [ ] 行内操作：查看详情、分配处理人、添加标签、导出、进入售后
  - [ ] 勾选后显示批量操作栏（批量标记、导出）
  - [ ] 保存常用视图功能
  - [ ] 刷新同步提示新增/更新数量
  - [ ] 移除 SpecPageRenderer 占位

- [ ] **订单详情页（OrderDetailView.vue）**
  - [ ] 订单摘要区：订单号、状态、渠道、金额、时间
  - [ ] 商品明细区：商品列表、SKU、数量、单价
  - [ ] 收货信息区：收货人、地址、联系方式
  - [ ] 支付信息区：支付方式、支付时间、金额
  - [ ] 物流信息区：物流公司、运单号、状态
  - [ ] 状态流转时间线
  - [ ] 拆单弹窗：选择 SKU + 数量归属
  - [ ] 合单弹窗：选择目标订单
  - [ ] 取消订单：二次确认 + 填写原因
  - [ ] 锁定/释放库存
  - [ ] 修改备注
  - [ ] 操作日志展示
  - [ ] 不同状态显示不同操作按钮

- [ ] **售后处理页（新建 OrderAfterSaleView.vue）**
  - [ ] 售后单列表：售后单号、订单号、买家、售后类型、申请金额、审核状态、退款状态、最近更新时间
  - [ ] 筛选区：售后单号、订单号、售后类型（退款/退货/换货）、审核状态、退款状态、申请时间
  - [ ] 审核弹窗：通过/拒绝 + 审核备注
  - [ ] 退款处理：退款金额（不超过实付）、退款方式、部分退款显示剩余额度
  - [ ] 退货处理：退货物流单号、入库状态确认
  - [ ] 换货处理：补发仓库、补发 SKU 选择
  - [ ] 拒绝售后必须填写原因
  - [ ] 关联原订单跳转

### 三、供应商中心（3 页）

- [ ] **供应商管理页（SupplierListView.vue）**
  - [ ] 完整列表：供应商名称、联系人、手机号、合作状态、结算方式、评级、关联 SKU 数、最后更新时间
  - [ ] 筛选区：供应商名称、联系人、合作状态、评级、创建时间
  - [ ] 新建/编辑抽屉：供应商名称、公司名称、联系人、电话、邮箱、地址、开户信息、税号、合同编号、结算方式、备注
  - [ ] 名称不可重复校验
  - [ ] 手机号和邮箱格式校验
  - [ ] 启用/停用（停用前检查未完成采购单）
  - [ ] 合同附件上传
  - [ ] 移除 SpecPageRenderer 占位

- [ ] **采购单管理页（PurchaseOrderView.vue）**
  - [ ] 采购单列表：采购单号、供应商、SKU 数、采购总额、预计交期、到货进度、采购状态、创建人
  - [ ] 筛选区：采购单号、供应商、采购状态、SKU、创建时间、预计交期
  - [ ] 创建采购单弹窗：供应商（带出默认交期和 MOQ）、仓库、采购 SKU、数量、单价、币种、税费、运费、预计交期、备注
  - [ ] 低于 MOQ 提示但允许提交
  - [ ] 到货确认弹窗：实到数量、良品数量、差异、原因、入库时间
  - [ ] 到货后自动更新库存
  - [ ] 状态流转：草稿 → 待审批 → 已审批 → 部分到货 → 已完成 → 已关闭
  - [ ] 关闭前校验未完成到货记录
  - [ ] 移除 SpecPageRenderer 占位

- [ ] **供货能力配置页（新建 SupplyCapabilityView.vue）**
  - [ ] 列表：供应商、SKU、标准交期、MOQ、采购单位、阶梯价格、默认供货标记、状态
  - [ ] 筛选区：供应商、SKU、默认供货标记、状态
  - [ ] 新增/编辑配置弹窗：标准交期、MOQ、阶梯价格（起始数量 + 价格，支持多档）、结算币种、采购单位、备注
  - [ ] 设置默认供货后取消其他默认项
  - [ ] 交期和 MOQ 不可小于 0
  - [ ] 停用配置
  - [ ] 移除 SpecPageRenderer 占位

### 四、渠道中心（1 页）

- [ ] **渠道接入配置页（ChannelConfigView.vue）**
  - [ ] 渠道账户卡片列表：渠道名称、店铺名称、授权状态、同步状态、最近同步时间、异常状态
  - [ ] 新增店铺授权弹窗/抽屉
  - [ ] 配置表单：店铺名称、App Key、App Secret、Access Token、Webhook 地址、Webhook Secret、同步开关、默认仓库、备注
  - [ ] 测试连接按钮（成功后才允许启用同步）
  - [ ] 重新授权（保留旧配置快照）
  - [ ] Webhook 地址一键复制
  - [ ] 同步状态展示 + 错误信息
  - [ ] 启用/停用同步
  - [ ] 移除 SpecPageRenderer 占位

### 五、库存与履约（2 页）

- [ ] **库存总览页（InventoryOverviewView.vue）**
  - [ ] 完整列表：SKU、商品标题、仓库、可用库存、锁定库存、在途库存、安全库存、预警状态、最近变动时间
  - [ ] 筛选区：SKU、仓库、渠道、预警状态、库存状态
  - [ ] 低于安全库存红色预警高亮
  - [ ] 点击库存数字进入变动明细抽屉：出入库来源、关联单号、操作人、变动数量、变动后库存
  - [ ] 手动调整库存弹窗（必须填写原因）
  - [ ] 创建补货建议（自动带入默认供应商和建议数量）
  - [ ] 导出库存
  - [ ] 移除 SpecPageRenderer 占位

- [ ] **发货作业页（ShippingWorkView.vue）**
  - [ ] 发货单列表：发货单号、订单号、仓库、SKU 数、应发件数、实发件数、物流公司、运单号、发货状态、回传状态
  - [ ] 筛选区：发货单号、订单号、仓库、发货状态、回传状态、创建时间
  - [ ] 发货单详情弹窗/抽屉
  - [ ] 拣货/打包/录入运单号流程
  - [ ] 确认发货前必须填写物流公司和运单号
  - [ ] 实发和应发不一致时差异提示
  - [ ] 确认发货 → 回传平台
  - [ ] 回传失败支持重试
  - [ ] 移除 SpecPageRenderer 占位

### 六、数据与报表（2 页）

- [ ] **运营看板页（ReportDashboardView.vue）**
  - [ ] 补充趋势图（引入 ECharts）：GMV、订单量趋势
  - [ ] 7 天 / 30 天切换
  - [ ] 指标卡点击下钻
  - [ ] 异常指标高亮
  - [ ] 点击低库存商品数跳转库存页（带筛选）

- [ ] **报表中心页（ReportCenterView.vue）**
  - [ ] 报表类型选择（销售、库存、采购、售后等）
  - [ ] 切换报表类型时动态加载筛选项
  - [ ] 查询条件区：统计口径、时间范围、渠道、店铺、SKU、供应商、仓库、国家
  - [ ] 结果表格：指标名称、指标值、环比、同比、维度分组值
  - [ ] 导出 Excel / CSV（保留当前筛选条件）
  - [ ] 保存个人常用视图
  - [ ] 移除 SpecPageRenderer 占位

### 七、系统与权限（3 页）

- [ ] **角色权限页（RolePermissionView.vue）**
  - [ ] 角色列表：角色名称、角色描述、用户数、启用状态、更新时间
  - [ ] 筛选区：角色名称、角色状态、更新时间
  - [ ] 新建角色 / 编辑权限弹窗
  - [ ] 权限矩阵树：页面访问权限、按钮权限、数据范围权限、特殊操作权限
  - [ ] 复制角色（带出原权限配置）
  - [ ] 停用前校验绑定用户
  - [ ] 高风险权限二次确认
  - [ ] 移除 SpecPageRenderer 占位

- [ ] **操作日志页（OperationLogView.vue）**
  - [ ] 完整列表：操作时间、操作人、模块、操作动作、对象 ID、结果状态、来源 IP
  - [ ] 筛选区：操作人、模块、操作类型、时间范围、对象 ID
  - [ ] 日志详情侧栏：变更前值、变更后值、请求来源、备注
  - [ ] 删除/取消/退款类操作标红
  - [ ] 按对象 ID 快速定位单据全链路日志
  - [ ] 导出日志（保留筛选条件）
  - [ ] 移除 SpecPageRenderer 占位

- [ ] **API Key 管理页（ApiKeyView.vue）**
  - [ ] Key 列表：Key 名称、所属系统、权限范围、状态、创建时间、过期时间、最近调用时间
  - [ ] 创建 Key 弹窗：Key 名称、所属系统、权限范围、IP 白名单、过期时间、备注
  - [ ] 明文 Key 仅创建成功时展示一次
  - [ ] 复制 Key 需再次确认
  - [ ] 停用/启用 Key
  - [ ] 轮换 Key（支持过渡失效时间）
  - [ ] 删除 Key 二次确认
  - [ ] 移除 SpecPageRenderer 占位

---

## 跨页面通用工作

- [ ] **补充 Mock API 路由** — 为所有 CRUD 操作补充 POST/PUT/DELETE 路由（在 mock/routes.ts 中）
- [ ] **补充 API Services** — 在 api/services.ts 中补充所有新增的接口调用方法
- [ ] **补充 TypeScript 类型** — 在 types/page.ts 中补充缺失的类型定义（渠道映射、定价规则、售后单、供货能力等）
- [ ] **引入 ECharts** — 为运营看板和报表中心添加图表支持（package.json 添加 echarts 依赖）
- [ ] **新增页面注册路由** — 在 router/routes.ts 中注册新建的页面路由（渠道映射、定价、售后、供货能力）
- [ ] **更新菜单配置** — 在 router/menu.ts 中添加新页面的菜单项
- [ ] **移除 SpecPageRenderer** — 所有页面完成后移除 SpecPageRenderer 组件及相关引用