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

---

## 功能扩展计划（待实施）

### 一、仓储物流模块

- [ ] **仓库管理页（新建 WarehouseView.vue）**
  - [ ] 仓库列表：仓库名称、仓库类型、地址、联系人、电话、状态
  - [ ] 新建/编辑仓库：仓库名称、类型（自有/第三方）、地址、联系人、联系方式、备注
  - [ ] 启用/停用仓库
  - [ ] 仓库调拨单：调出仓库、调入仓库、SKU、数量、调拨时间、操作人
  - [ ] 库位管理：库区、库位编码、库位类型（存储/拣货/退货）、容量

- [ ] **物流渠道配置页（新建 LogisticsChannelView.vue）**
  - [ ] 物流商列表：物流商名称、承运渠道、运费结算方式、状态
  - [ ] 新建/编辑物流商：物流商名称、承运渠道、运费模板、时效配置、追踪URL模板
  - [ ] 运费模板：按重量/件数计费、首重续重、偏远地区附加费
  - [ ] 物流渠道绑定：仓库-物流商-渠道关联配置

- [ ] **打包规则配置页（新建 PackingRuleView.vue）**
  - [ ] 打包规则列表：规则名称、适用仓库、适用渠道、商品类型、装箱策略
  - [ ] 新建/编辑规则：规则名称、仓库、渠道、SKU范围、最大装箱数、是否合包
  - [ ] 装箱策略：按订单/按SKU/混装规则

- [ ] **退件管理页（新建 ReturnPackageView.vue）**
  - [ ] 退件列表：退件单号、原运单号、退件原因、退件状态、仓库、创建时间
  - [ ] 退件认领：扫描运单号、选择退件原因、录入包裹状态
  - [ ] 退件处理：可售/不可售、重新上架/销毁、质检结果
  - [ ] 退件统计：退件率分析、原因分类

### 二、财务模块

- [ ] **收款管理页（新建 PaymentView.vue）**
  - [ ] 收款列表：收款单号、渠道订单号、收款金额、币种、收款时间、渠道、店铺、对账状态
  - [ ] 筛选区：订单号、渠道、收款时间、对账状态、店铺
  - [ ] 对账确认：对账单下载、确认/驳回、差异说明
  - [ ] 收款汇总：按渠道/店铺/时间维度汇总

- [ ] **退款管理页（新建 RefundView.vue）**
  - [ ] 退款流水：退款单号、原订单号、退款金额、退款方式、退款时间、退款状态、渠道
  - [ ] 退款原因分析：退款原因分类统计、退款率趋势
  - [ ] 异常退款处理：退款失败重试、渠道回调异常

- [ ] **供应商结算页（新建 SupplierSettlementView.vue）**
  - [ ] 结算单列表：结算单号、供应商、结算周期、应付金额、已付金额、状态
  - [ ] 创建结算单：选择供应商、采购单、付款条件
  - [ ] 应付账款：未结清账单、付款计划、付款凭证上传
  - [ ] 结算确认：核对金额、确认付款

- [ ] **成本分析页（新建 CostAnalysisView.vue）**
  - [ ] SKU成本追踪：SKU、成本价、历史价格、成本趋势图
  - [ ] 利润分析：销售额、成本、毛利、利润率、按渠道/SPU/供应商维度
  - [ ] 成本异常预警：成本波动超过阈值自动预警

- [ ] **发票管理页（新建 InvoiceView.vue）**
  - [ ] 发票列表：发票号、发票类型（增票/普票）、购买方、销售方、金额、税率、状态
  - [ ] 开票申请：关联订单/采购单、选择开票类型、填写抬头信息
  - [ ] 发票抬头管理：企业信息维护、税号、开户行、账号

### 三、营销模块

- [ ] **促销活动配置页（新建 PromotionView.vue）**
  - [ ] 促销活动列表：活动名称、活动类型（折扣/满减/买赠）、渠道、店铺、时间范围、状态
  - [ ] 创建活动：活动名称、类型、时间、适用商品/类目/渠道、优惠规则
  - [ ] 折扣叠加规则：与优惠券/会员价等的叠加逻辑
  - [ ] 活动效果分析：参与率、销售额提升、ROI

- [ ] **优惠券管理页（新建 CouponView.vue）**
  - [ ] 优惠券列表：优惠券名称、类型（满减/折扣）、面值、发行量、核销量、有效时间、状态
  - [ ] 创建优惠券：名称、类型、面值/折扣率、使用条件、发放数量、领取方式
  - [ ] 优惠券发放：指定用户/用户等级、渠道/商品限制
  - [ ] 核销统计：核销率、核销金额、来源渠道分析

- [ ] **价格预警页（新建 PriceWatchView.vue）**
  - [ ] 价格监控列表：SKU、商品标题、渠道、店铺、本系统价格、竞品价格、差价、预警状态
  - [ ] 竞品价格源配置：渠道平台URL、爬虫规则、刷新频率
  - [ ] 预警规则：差价阈值、降幅阈值、通知方式
  - [ ] 价格调整建议：根据竞品自动计算建议售价

### 四、采购模块

- [ ] **备货计划页（新建 ReplenishmentPlanView.vue）**
  - [ ] 备货建议列表：SKU、日均销量、安全库存、当前库存、在途量、建议补货量、建议供应商
  - [ ] 智能补货计算：基于销售预测、历史数据、季节性因素、交期
  - [ ] 一键生成采购单：选中SKU、确认数量、选择供应商
  - [ ] 备货趋势图：库存覆盖率预测

- [ ] **采购需求申请页（新建 PurchaseRequestView.vue）**
  - [ ] 需求申请列表：申请单号、申请人、SKU、数量、原因、状态、申请时间
  - [ ] 提交采购需求：SKU、数量、期望交期、紧急程度、原因
  - [ ] 审批流程：申请人提交 → 主管审批 → 采购执行
  - [ ] 需求变更/撤销

- [ ] **来料质检页（新建 IQCView.vue）**
  - [ ] 质检单列表：质检单号、供应商、到货单号、质检标准、合格数、不合格数、质检结果
  - [ ] 质检标准配置：检验项目、检验方法、判定标准（AQL）
  - [ ] 质检执行：录入检验数据、自动判定合格/不合格
  - [ ] 不良品处理：退货、降价接收、报废

### 五、数据分析模块

- [ ] **销售分析页（新建 SalesAnalysisView.vue）**
  - [ ] 核心指标：GMV、订单数、客单价、转化率、同比环比
  - [ ] 多维度分析：按渠道/国家/店铺/类目/品牌/ SKU/时间段
  - [ ] 趋势分析：销售趋势、价格分布、销量排行
  - [ ] 异常分析：销量突变、异常订单、趋势异常

- [ ] **库存周转分析页（新建 InventoryTurnoverView.vue）**
  - [ ] 库存周转指标：周转天数、呆滞库存、动销率、库存覆盖天数
  - [ ] 滞销预警：设置滞销天数阈值、自动预警
  - [ ] 库龄分析：库存库龄分布、老库存预警
  - [ ] 优化建议：基于数据分析给出清仓/补货建议

- [ ] **供应商绩效页（新建 SupplierPerformanceView.vue）**
  - [ ] 绩效指标：交期率、合格率、响应时效、退货率、价格竞争力
  - [ ] 综合评分：多维度加权计算供应商评分
  - [ ] 绩效趋势：历史绩效对比分析
  - [ ] 供应商排名：按指标分类排名

### 六、客服模块

- [ ] **工单管理页（新建 TicketView.vue）**
  - [ ] 工单列表：工单号、标题、类型（咨询/投诉/售后/其他）、状态、优先级、创建人、创建时间
  - [ ] 创建工单：选择关联订单/售后单、填写问题描述、上传附件
  - [ ] 工单分配：按类型/渠道/优先级自动或手动分配
  - [ ] 工单处理：回复买家、处理记录、提交解决方案
  - [ ] 工单完结：满意度评价、处理结果确认

- [ ] **消息模板页（新建 MessageTemplateView.vue）**
  - [ ] 模板列表：模板名称、类型（邮件/短信/站内信）、渠道、状态
  - [ ] 创建模板：模板名称、类型、渠道、内容（支持变量占位符）
  - [ ] 变量配置：系统变量（订单号/买家名等）、自定义变量
  - [ ] 自动回复规则：触发条件、回复模板、延迟设置

- [ ] **满意度评价页（新建 SatisfactionView.vue）**
  - [ ] 评价列表：评价来源、订单号、买家、评分、评价内容、评价时间、客服
  - [ ] 评价分析：好评率、差评原因分类、评价趋势
  - [ ] 差评跟进：差评标记、处理状态、跟进记录
  - [ ] 评价来源配置：渠道平台、评价链接

### 七、组织管理

- [ ] **员工管理页（新建 EmployeeView.vue）**
  - [ ] 员工列表：工号、姓名、部门、岗位、角色、手机号、状态、入职时间
  - [ ] 新建/编辑员工：基本信息、岗位、角色、汇报线
  - [ ] 员工档案：教育背景、工作经历、绩效记录
  - [ ] 离职/转正/调动管理

- [ ] **部门管理页（新建 DepartmentView.vue）**
  - [ ] 组织架构图：树形展示部门层级
  - [ ] 部门管理：新建/编辑/删除部门、部门负责人
  - [ ] 部门权限：数据范围权限、部门内角色配置

- [ ] **消息中心页（新建 NotificationView.vue）**
  - [ ] 消息列表：消息类型（系统/业务/待办）、标题、内容、时间、状态（已读/未读）
  - [ ] 消息分类：系统通知、待办事项、站内信、公告
  - [ ] 消息订阅：按模块/类型订阅消息
  - [ ] 提醒设置：邮件提醒、短信提醒、站内信提醒

---

## 扩展优先级建议

### 高优先级（建议先实施）
1. 仓库管理 - 仓储基础模块，其他模块依赖
2. 物流渠道配置 - 发货作业依赖
3. 收款管理 - 财务基础
4. 备货计划 - 采购核心功能
5. 工单管理 - 客服核心功能

### 中优先级
1. 退件管理
2. 成本分析
3. 促销活动配置
4. 消息中心
5. 库存周转分析

### 低优先级
1. 发票管理
2. 员工管理
3. 满意度评价
4. 优惠券管理
5. 价格预警