TODO.md 22 KB
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）
- 消息列表：消息类型（系统/业务/待办）、标题、内容、时间、状态（已读/未读）
- 消息分类：系统通知、待办事项、站内信、公告
- 消息订阅：按模块/类型订阅消息
- 提醒设置：邮件提醒、短信提醒、站内信提醒
扩展优先级建议
高优先级（建议先实施）
- 仓库管理 - 仓储基础模块，其他模块依赖
- 物流渠道配置 - 发货作业依赖
- 收款管理 - 财务基础
- 备货计划 - 采购核心功能
- 工单管理 - 客服核心功能
中优先级
- 退件管理
- 成本分析
- 促销活动配置
- 消息中心
- 库存周转分析
低优先级
- 发票管理
- 员工管理
- 满意度评价
- 优惠券管理
- 价格预警