四端分开交付
不再挤在同一个页面

电脑版与手机版、买家端与卖家端各自独立成页 —— 四个目录、四套导航外壳、四套版式，互不混杂。同一个职能在四端各有自己的入口与信息层级：买家端围绕「找货—比价—询价」，卖家端围绕「接单—发品—管人」。手机版不是电脑版的缩放，而是重新排布的移动版式。

拆分依据

电脑版 / 手机版：版式与导航形态完全不同 —— 电脑版是顶栏 + 巨幕分类 + 多栏栅格；手机版是移动顶栏 + 底部标签栏 + 单栏卡片流。
买家端 / 卖家端：业务目标完全不同 —— 买家买货，卖家经营。栏目、数据、动作、权限模型都不共用。

实现方式

一份语义化 DOM，由 <body data-platform data-role> 声明端类型，外壳脚本按声明注入对应导航，样式按端叠加。因此四端功能完全对齐、不会各写一套而逐渐走样。

Platform 01 · Desktop

电脑版 · 买家端

面向全球中小采购商。顶栏 + 巨幕分类导航，首屏是搜索与供应链入口，核心链路为 找货 → 看规格 → 比价 → 询价。信息密度高，适合大表格与多栏对比。

首页 F06 货源列表 F06 货源详情 F06 会员中心 F07

进入电脑版买家端

Platform 02 · Desktop

电脑版 · 卖家端

面向工厂与供应商。顶栏 + 左侧后台导航，首屏是经营数据与今日待办，核心链路为 接询盘 → 管线索 → 跟订单 → 配权限。四页各司其职，不把后台堆成一长条。

经营工作台 F09 商机与订单 F11 商品管理 F14 团队与权限 F10

进入电脑版卖家端

Platform 03 · H5 Mobile

手机版 · 买家端

移动顶栏 + 底部四标签栏（首页 / 货源 / 询盘 / 我的）。首屏让给搜索与入口，商品列表收成两列卡片流，筛选栏移入底部抽屉，表格改为横向滚动而不拍扁。

首页 F06 货源列表 F06 货源详情 F06 我的 · 会员 F07 我的询盘 F08

进入手机版买家端

Platform 04 · H5 Mobile

手机版 · 卖家端

移动顶栏 + 底部四标签栏（工作台 / 商机 / 商品 / 我的）。看板改成纵向滚动卡片，待办置顶，返回键与拇指区全部重排 —— 让卖家在外出差或车间里也能接单。

经营工作台 F09 商机与订单 F11 商品管理 F14 团队与权限 F10 询盘消息 F08

进入手机版卖家端

四端差异对照

同一件功能在四端各有形态 —— 拆分的意义不是换个皮，而是让每端按自己的使用场景重新排布。

四个平台在导航、首屏、高频动作等维度的差异对照
对比维度	电脑版 · 买家端	电脑版 · 卖家端	手机版 · 买家端	手机版 · 卖家端
导航形态	顶栏 + 巨幕分类下拉	顶栏 + 左侧分组后台栏	移动顶栏 + 底部 4 标签栏	移动顶栏 + 底部 4 标签栏
首屏焦点	搜索框与供应链入口	KPI 与今日待办	搜索框与金刚区入口	待办清单与关键数字
高频动作	找货、看规格、比价、询价	接询盘、指派线索、发货	搜型号、加购、发起询盘	回消息、看商机、改库存
商品列表	5 列栅格 + 左侧常驻筛选栏	表格 + 批量操作列	2 列卡片流 + 底部筛选抽屉	卡片列表（图 + 价 + 状态）
数据表格	完整多列表格	完整多列表格 + 分页	横向滚动，不拍扁列宽	横向滚动 + 关键列前置
IM 形态	三栏：会话 + 聊天 + 资料	三栏：询盘池 + 会话 + 买家资料	列表与聊天互斥切换，带返回键	列表与聊天互斥切换，带返回键
会员入口	独立会员中心页	侧栏 VIP 卡片 + 团队额度	合并进「我的」，档案卡置顶	合并进「我的」，团队与额度
触摸目标	按钮 40px 起	按钮 34px 起（可密集）	按钮 44px 起，符合移动规范	按钮 44px 起，符合移动规范

交付清单

纯静态、零构建、零第三方运行时依赖，双击任意 HTML 即可离线打开。

Styles · 5 层

CSS 令牌与表现层

◆ tokens.css — 设计令牌唯一来源
◆ base.css — 重置 / 排版 / 氛围层
◆ pc.css — 电脑版组件与版式
◆ console.css — 电脑版卖家端专属
◆ h5.css — 手机版表现层
◆ portal.css — 本入口页

Scripts · 2 文件

数据层与交互层

◆ data.js — 图标 / 图纸工厂 / 业务数据
◆ main.js — 端外壳注入 + 页面装配

端外壳分派

◆ pc + buyer → 细条 + 巨幕导航 + 页脚
◆ pc + seller → 细条 + 侧栏后台
◆ h5 → 移动顶栏 + 底部标签栏

Pages · 20 个页面

四端物理隔离

◆ pc/buyer/ — 5 页
◆ pc/seller/ — 5 页
◆ h5/buyer/ — 5 页
◆ h5/seller/ — 5 页

需求覆盖

◆ F06 F07 F08 买家端
◆ F09 F10 F11 F14 卖家端
◆ F05 F12 注册与导航规划