# 前端开发指导文档 > **基于业务语义的UI骨架设计指南** --- ## 🎯 开发目标 **不是“纯UI铺页面”，而是**带业务语义的UI骨架（Business Skeleton）** **目标**：所有页面结构完整 + 所有按钮有明确业务意义 + 能挂Service --- ## 🏗️ 标准开发流程 ### Step 1：定义菜单结构（全局） ```text Dashboard（总览） Product（商品 / 利润） Orders（订单） Ad（广告） Inventory（库存） B2B（贸易） Finance（结算 / 账单） Compliance（合规） Settings（配置） ``` **关键**：每个菜单 = 一个业务域（不是页面） --- ### Step 2：定义页面骨架 #### Product 页面骨架（标准结构） ```text 顶部：筛选区（店铺 / 分类 / 状态） 中间：核心表格（商品列表） 右侧/弹窗：操作面板（编辑 / AI / 定价） 底部/侧边：数据总结（利润 / ROI） ``` **目标**：把页面“分区”而不是写代码 --- ### Step 3：填按钮（重点） #### Product 页面按钮（标准版） **行级操作（每个商品）** ```text 编辑商品 修改价格 查看ROI AI优化定价 🔥 上下架 ``` **批量操作** ```text 批量改价 批量上架 批量分析 ``` **页面级操作** ```text 创建商品 导入商品 导出数据 ``` **关键**：每个按钮必须能回答“点了之后业务发生什么变化？” --- ### Step 4：绑定假行为 **点击 → mock数据变化 → UI更新** **示例**：点击【修改价格】 ```text 输入新价格 → 前端计算 ROI（假数据） → 表格实时更新 → ROI变红/变绿 ``` **意义**：验证UI是不是“活的”，而不是死页面 --- ### Step 5：统一交互规范 #### 1️⃣ 所有操作必须有反馈 ```text loading → success / error ``` #### 2️⃣ 所有“影响钱”的操作必须有提示 ```text 修改价格 → 显示 ROI变化 ``` #### 3️⃣ 所有列表必须支持： ```text 分页 / 筛选 / 排序 ``` #### 4️⃣ 所有弹窗统一： - 宽度 - 按钮位置 - 提交流程 **目的**：让AI和你写的代码风格一致 --- ### Step 6：输出前端任务模板 #### 页面：Product ```md # 页面：Product ## 页面结构 - 筛选区 - 商品表格 - 操作弹窗 ## 表格字段 - 商品名 - 成本 - 售价 - 利润 - ROI - 库存 ## 按钮 - 创建商品 - 修改价格 - AI定价 - 上下架 ## 交互 - 修改价格 → 更新ROI（mock） - AI定价 → loading → 返回建议价格 ## 状态 - loading - empty - error ``` --- ## 📚 参考产品结构 ### 1️⃣ Shopify（电商后台结构） **重点**： - 商品管理 - 订单管理 - 分析面板 ### 2️⃣ Google Analytics（数据驱动UI） **重点**： - 数据展示 - 图表交互 - 维度筛选 ### 3️⃣ Jungle Scout（赚钱导向） **重点**： - 利润 - ROI - 选品分析 **目标**：Shopify结构 + Analytics数据 + JungleScout赚钱逻辑 --- ## 📋 各页面详细设计 ### Dashboard（总览） **页面结构** - 顶部：时间范围选择 - 中间：核心KPI卡片 - 底部：趋势图表 **按钮** - 刷新数据 - 导出报告 - 自定义仪表盘 **交互** - 时间范围变化 → 所有数据更新 - 点击KPI → 跳转到详情页面 --- ### Product（商品 / 利润） **页面结构** - 顶部：筛选区（店铺 / 分类 / 状态） - 中间：商品表格 - 右侧：操作面板 - 底部：利润总结 **按钮** - 行级：编辑、修改价格、查看ROI、AI定价、上下架 - 批量：批量改价、批量上架、批量分析 - 页面级：创建商品、导入商品、导出数据 **交互** - 修改价格 → 更新ROI（mock） - AI定价 → loading → 返回建议价格 --- ### Orders（订单） **页面结构** - 顶部：筛选区（状态 / 时间 / 平台） - 中间：订单表格 - 右侧：订单详情 - 底部：订单统计 **按钮** - 行级：查看详情、处理订单、退款 - 批量：批量发货、批量取消、批量导出 - 页面级：创建订单、导入订单、导出数据 **交互** - 点击订单 → 显示详情 - 处理订单 → 状态更新 --- ### Ad（广告） **页面结构** - 顶部：筛选区（平台 / 状态 / 时间） - 中间：广告表格 - 右侧：广告详情 - 底部：ROI分析 **按钮** - 行级：编辑、投放、暂停、查看ROI - 批量：批量启停、批量分析 - 页面级：创建广告、导入广告、导出数据 **交互** - 投放广告 → loading → 显示投放结果 - 查看ROI → 显示详细分析 --- ### Inventory（库存） **页面结构** - 顶部：筛选区（仓库 / 状态 / 分类） - 中间：库存表格 - 右侧：库存详情 - 底部：库存预警 **按钮** - 行级：编辑、补货、调拨、查看详情 - 批量：批量调整、批量导出 - 页面级：创建库存、导入库存、导出数据 **交互** - 补货 → 显示补货建议 - 调拨 → 显示调拨选项 --- ### B2B（贸易） **页面结构** - 顶部：筛选区（客户 / 状态 / 时间） - 中间：订单表格 - 右侧：订单详情 - 底部：客户统计 **按钮** - 行级：查看详情、处理订单、生成合同 - 批量：批量处理、批量导出 - 页面级：创建订单、导入订单、导出数据 **交互** - 生成合同 → 显示合同预览 - 处理订单 → 状态更新 --- ### Finance（结算 / 账单） **页面结构** - 顶部：筛选区（时间 / 类型 / 状态） - 中间：账单表格 - 右侧：账单详情 - 底部：财务汇总 **按钮** - 行级：查看详情、对账、导出 - 批量：批量对账、批量导出 - 页面级：创建账单、导入账单、导出数据 **交互** - 对账 → 显示对账结果 - 查看详情 → 显示详细财务数据 --- ### Transactions（交易记录） **页面结构** - 顶部：筛选区（时间 / 类型 / 状态） - 中间：交易表格 - 右侧：交易详情 - 底部：交易统计 **按钮** - 行级：查看详情、导出 - 批量：批量导出 - 页面级：导入交易、导出数据 **交互** - 查看详情 → 显示详细交易信息 --- ### Reconciliation（对账记录） **页面结构** - 顶部：筛选区（时间 / 状态） - 中间：对账表格 - 右侧：对账详情 - 底部：对账统计 **按钮** - 行级：查看详情、重新对账、导出 - 批量：批量对账、批量导出 - 页面级：导入对账、导出数据 **交互** - 重新对账 → 显示对账结果 - 查看详情 → 显示详细对账信息 --- ### Warehouses（仓库管理） **页面结构** - 顶部：筛选区（状态 / 类型） - 中间：仓库表格 - 右侧：仓库详情 - 底部：仓库统计 **按钮** - 行级：查看详情、编辑、删除 - 批量：批量导出 - 页面级：创建仓库、导入仓库、导出数据 **交互** - 查看详情 → 显示详细仓库信息 - 编辑 → 显示编辑表单 --- ### InventoryForecast（库存预测） **页面结构** - 顶部：时间范围选择 - 中间：预测图表 - 右侧：预测详情 - 底部：预测建议 **按钮** - 刷新预测 - 导出预测 - 调整参数 **交互** - 时间范围变化 → 预测数据更新 - 调整参数 → 重新计算预测 --- ### Marketing（营销管理） **页面结构** - 顶部：时间范围选择 - 中间：营销概览卡片 - 底部：营销趋势图表 **按钮** - 查看广告管理 - 查看竞争对手分析 - 查看营销绩效报表 **交互** - 点击卡片 → 跳转到对应页面 - 时间范围变化 → 所有数据更新 --- ### Ads（广告管理） **页面结构** - 顶部：筛选区（平台 / 状态 / 时间） - 中间：广告表格 - 右侧：广告详情 - 底部：广告统计 **按钮** - 行级：编辑、启动、暂停、删除 - 批量：批量启停、批量导出 - 页面级：创建广告、导入广告、导出数据 **交互** - 启动/暂停 → 广告状态更新 - 查看详情 → 显示详细广告信息 --- ### Competitors（竞争对手分析） **页面结构** - 顶部：筛选区（类别 / 时间） - 中间：分析图表 - 右侧：竞争对手详情 - 底部：竞争对手列表 **按钮** - 刷新分析 - 导出分析 - 添加竞争对手 **交互** - 筛选变化 → 分析数据更新 - 查看详情 → 显示详细竞争对手信息 --- ### Suppliers（供应商管理） **页面结构** - 顶部：筛选区（类别 / 状态） - 中间：供应商表格 - 右侧：供应商详情 - 底部：供应商统计 **按钮** - 行级：查看详情、编辑、删除 - 批量：批量导出 - 页面级：添加供应商、导入供应商、导出数据 **交互** - 查看详情 → 跳转到供应商详情页面 - 编辑 → 显示编辑表单 --- ### SupplierDetail（供应商详情） **页面结构** - 左侧：供应商信息表单 - 右侧：供应商产品列表 - 底部：历史订单和绩效评估 **按钮** - 保存供应商信息 - 查看历史订单 - 查看绩效评估 **交互** - 保存 → 显示保存结果 - 切换标签页 → 显示对应内容 --- ### Reports（报表中心） **页面结构** - 顶部：报表类型卡片 - 中间：报表概览图表 - 底部：报表操作按钮 **按钮** - 查看利润报表 - 查看绩效报表 - 导出所有报表 **交互** - 点击卡片 → 跳转到对应报表页面 - 导出 → 下载报表文件 --- ### ProfitReport（利润报表） **页面结构** - 顶部：筛选区（时间范围 / 类别） - 中间：利润概览卡片 - 底部：利润明细表格和图表 **按钮** - 导出报表 - 刷新数据 - 调整参数 **交互** - 筛选变化 → 利润数据更新 - 查看详情 → 显示详细利润信息 --- ### PerformanceReport（绩效报表） **页面结构** - 顶部：筛选区（时间范围 / 渠道） - 中间：绩效概览卡片 - 底部：绩效明细表格和图表 **按钮** - 导出报表 - 刷新数据 - 调整参数 **交互** - 筛选变化 → 绩效数据更新 - 查看详情 → 显示详细绩效信息 --- ### Settings（设置） **页面结构** - 顶部：设置类型卡片 - 中间：设置概览 - 底部：设置操作按钮 **按钮** - 查看个人设置 - 查看租户设置 - 查看用户管理 **交互** - 点击卡片 → 跳转到对应设置页面 --- ### ProfileSettings（个人设置） **页面结构** - 顶部：头像上传 - 中间：个人信息表单 - 底部：密码修改表单 **按钮** - 保存个人信息 - 修改密码 **交互** - 保存 → 显示保存结果 - 修改密码 → 显示修改结果 --- ### TenantSettings（租户设置） **页面结构** - 顶部：基本信息表单 - 底部：功能设置开关 **按钮** - 保存基本信息 - 保存功能设置 **交互** - 保存 → 显示保存结果 - 切换开关 → 实时更新设置 --- ### UserManagement（用户管理） **页面结构** - 顶部：筛选区（角色 / 状态） - 中间：用户表格 - 底部：用户统计 **按钮** - 行级：编辑、删除 - 批量：批量导出 - 页面级：添加用户、导入用户、导出数据 **交互** - 添加用户 → 显示添加用户表单 - 编辑 → 显示编辑表单 - 删除 → 显示删除确认 --- ### Compliance（合规） **页面结构** - 顶部：筛选区（类型 / 状态 / 时间） - 中间：证书表格 - 右侧：证书详情 - 底部：合规统计 **按钮** - 行级：查看详情、更新、验证 - 批量：批量验证、批量导出 - 页面级：创建证书、导入证书、导出数据 **交互** - 验证证书 → 显示验证结果 - 更新证书 → 显示更新表单 --- ### Settings（配置） **页面结构** - 左侧：配置菜单 - 右侧：配置表单 **按钮** - 保存配置 - 重置配置 - 导出配置 **交互** - 保存 → 显示保存结果 - 重置 → 显示重置确认 --- ## 🎨 设计规范 ### 颜色系统 - 主色：#1890ff - 成功：#52c41a - 警告：#faad14 - 错误：#f5222d - 信息：#1890ff ### 字体系统 - 标题：16px / 20px - 正文：14px - 小文本：12px ### 布局规范 - 页面边距：16px - 卡片间距：16px - 按钮间距：8px - 输入框高度：32px ### 响应式设计 - 桌面端：1200px+ - 平板端：768px - 1199px - 移动端：< 768px --- ## 📝 前端任务模板 ### 页面任务模板 ```md # 页面：[页面名称] ## 页面结构 - [结构1] - [结构2] - [结构3] ## 表格字段 - [字段1] - [字段2] - [字段3] ## 按钮 - [按钮1] - [按钮2] - [按钮3] ## 交互 - [交互1] - [交互2] ## 状态 - loading - empty - error ``` ### 组件任务模板 ```md # 组件：[组件名称] ## 功能描述 [组件功能描述] ## 输入属性 - [属性1]: [类型] - [描述] - [属性2]: [类型] - [描述] ## 输出事件 - [事件1]: [描述] - [事件2]: [描述] ## 样式规范 - [样式1] - [样式2] ## 交互规范 - [交互1] - [交互2] ``` --- ## 🔄 开发流程 ### 第一步：搭建骨架 - 定义页面结构 - 创建基础组件 - 实现布局 ### 第二步：实现交互 - 绑定假数据 - 实现按钮功能 - 验证UI交互 ### 第三步：对接服务 - 替换假数据 - 对接后端API - 实现真实业务逻辑 ### 第四步：优化测试 - 性能优化 - 兼容性测试 - 用户体验优化 --- ## 📌 注意事项 1. **业务语义优先**：每个UI元素都要有明确的业务意义 2. **一致性**：保持交互规范的一致性 3. **可扩展性**：设计时考虑未来功能扩展 4. **性能**：注意前端性能优化 5. **用户体验**：关注用户操作流程的流畅性 --- ## 🎯 验收标准 - [ ] 页面结构完整 - [ ] 按钮功能明确 - [ ] 交互流畅 - [ ] 响应式适配 - [ ] 性能良好 - [ ] 代码规范 --- > **记住：你现在做的不是“页面开发”，而是在搭“业务操作台的骨架”。**