场景 1：采购商采购流程
浏览首页 → 搜索型号 → 查看商品详情 → 加入购物车 →
上传 BOM 清单 → 智能匹配替代料 → 提交采购需求 →
等待平台审核发布 → 线下完成交易
场景 2：供应商入驻经营
申请入驻 → 资质审核 → 发布商品 → 上传 PDF 规格书 →
客服审核修订 → 前台展示销售 → 接收 BOM 询价 →
提交报价 → 等待订单匹配 → 结算回款
场景 3：平台运营管理
商家入驻审核 → 商品审核发布 → 订单审核分发 →
BOM 配单管理 → 内容配置 → 数据分析 → 违规处理
前台商城 (frontend/)
功能 说明
商品展示 首页轮播、分类导航、产品卡片、详情页
搜索功能 支持型号/品牌/描述搜索
BOM 智能配单 上传 Excel/CSV，自动解析匹配替代料
购物车 采购清单管理
用户中心 订单管理、需求管理
解决方案 工业控制、嵌入式方案展示
技术服务 账期服务、发货时效、PCBA 服务
⚙️ 平台管理后台 (backend/)
功能模块 核心职责
商品与类目 全平台商品治理、类目体系、审核发布
商家与审核 入驻资质审核、违规处理、商家库管理
订单管理 采购需求审核、人工跟进、线下对接留痕
BOM 配单 导入 BOM、匹配供应商、RFQ 分发、报价汇总
数据中心 销售分析、线索转化、经营报表
内容与站点 公告管理、栏目配置、前台映射
系统与权限 管理员、角色、菜单、日志审计
🏪 商家管理后台 (merchant/)
功能模块 商家视角
商品管理 发布商品、维护 SKU、价格库存、PDF 规格书
BOM 询价/报价 接收 RFQ、提交报价、参与配单
结算中心 对账单、回款进度、发票管理
店铺设置 资质维护、Logo/Banner、店铺资料
工作台 经营概览、待办提醒、快捷入口
1. 原型设计层面
✅ 高保真交互：
轮播图、弹窗、进度条、模态框均有 JS 交互
模拟上传 BOM、PDF 文件的动态效果
表单验证、状态切换、数据渲染全部可点击演示
✅ 信息架构清晰：
三大系统职责边界明确（平台 vs 商家 vs 买家）
每个页面有"原型说明"卡片，便于甲方理解设计意图
角色分工、数据范围、关注重点都有标注
✅ 视觉设计规范：
CSS Variables 统一定义主题色（--primary-blue: #0f62d1）
响应式布局支持移动端（@media 断点：1024px/768px/480px）
统一的卡片、按钮、表格、表单样式
2. 技术实现层面
✅ 原生 JS 实现所有交互：
DOM 操作、事件监听、动画过渡
本地数据模拟（如商品数组、新闻列表）
路由跳转模拟（location.href）
✅ 组件化思维：
可复用的 modal 组件、table 组件、form 组件
统一的 class 命名规范（.el-button、.prototype-card）
3. 业务逻辑层面
✅ BOM 配单创新：
支持上传 BOM 自动解析
智能匹配替代料（国产替代）
RFQ 询价机制（多家供应商报价）
✅ PDF 技术规格书管理：
按商品独立维护 PDF 文件
商家上传原始版本 → 客服修订完善 → 前台提供下载
版本控制、状态追踪
评论