CrossBorder_OS/TODO.md

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 组件及相关引用