物料解决方案

移动端与 PC 端的差异

移动端与 PC 端在设计规范与交互形式上各有侧重，直接复用一套组件难以同时满足两端体验：

维度	移动端	PC 端
交互方式	触控（点击、滑动、长按、缩放）	鼠标 + 键盘（悬停、右键、快捷键）
屏幕尺寸	窄屏（375–430px），信息密度低	宽屏（≥1280px），可容纳大信息密度
输入方式	虚拟键盘、语音、拍照上传	实体键盘、拖拽、文件系统
页面结构	单列流式、底部导航、抽屉	多栏布局、侧边栏、弹窗对话框
性能约束	弱网、低端机型、省电	网络与硬件相对充足
设计语言	平台风格（iOS / Android）、手势反馈	桌面软件惯例（右键菜单、状态栏）

前台系统自定义性更强，各有各的设计规范与交互形式；后台系统则更看重效率与一致性。直接用同一套组件铺平两端，会出现「移动端点不到、PC 端像手机」的问题。

为什么需要组件库 / 物料库

• 一致性：视觉、交互、文案统一，避免各页面自造轮子导致风格漂移
• 效率：沉淀高频能力（表格、表单、弹层、上传），减少重复开发
• 可维护：升级体验、修复缺陷只需改一处
• 可定制：物料库以「区块 / 模板」粒度而非单一原子组件交付，业务方能按需组装
• 两端差异隔离：同一业务逻辑、不同端壳，差异收敛在物料层而非业务层

设计方案

分层设计

业务页面
  └─ 页面物料（组合多个区块形成的业务页面模板）
      └─ 区块级物料（表格页、表单页、详情页、图表卡片…）
          └─ 基础组件（Button / Input / Select / Modal…）
              └─ 设计令牌（颜色 / 间距 / 圆角 / 字号 / 阴影）

• 底层是设计令牌与基础组件，上层是面向业务的区块与页面模板
• 移动端与 PC 端共用令牌，组件按端拆分实现，业务代码不感知差异

组件设计要点

• 按端拆壳：逻辑（hooks / 状态）抽到共享层，视觉结构按端实现
• 响应式适配：断点驱动（sm / md / lg / xl），而非仅靠媒体查询打补丁
• 主题可控：CSS 变量 / Tailwind 设计令牌暴露给业务定制（品牌色、圆角、深浅模式）
• 可组合优先：提供插槽与受控 props，避免「全配置一把梭」导致无法扩展

实施路线

1. 盘点现有页面，抽取复现率最高的区块（表格、筛选表单、上传、图表）
2. 先建即将用到的设计令牌与基础组件，边用边补
3. 以真实页面驱动物料沉淀，拒绝一次性造完再等业务接入
4. 建立文档与示例页（Storybook / 内部文档站），组件必须有示例与 props 说明
5. 版本发布与变更日志，保证下游可安全升级

相关笔记

• 项目骨架搭建（Vite / Tailwind 工程配置）