teapot_system/前端页面UI方案.md

# 铜壶管理系统前端页面 UI 方案

## 1. 设计定位
本系统虽然是后台管理端，但不建议做成普通灰白色表格后台。UI 视觉建议围绕“铜器仓储 + 茶纸账册”展开，整体风格稳重、清晰、带一点材质感，既符合铜壶业务，也能让商品图片和订单信息更有辨识度。

设计关键词：
* 铜色质感
* 纸感底色
* 深青色信息层
* 大块留白与清晰分区
* 商品图优先、数据次级、操作明确

适用目标：
* 管理员快速维护商品、订单和用户权限
* 客户用户清楚浏览商品详情，不误触编辑功能
* 打包工用户专注查看和完成订单，减少无关干扰

---

## 2. 视觉风格建议

### 2.1 整体风格方向
建议采用“暖铜主色 + 米白背景 + 深青辅助色”的组合：
* 页面大背景使用偏米白、纸张感的浅暖色，不要纯白。
* 核心按钮和高亮区域使用铜棕色，形成品牌识别。
* 目录栏、头部栏和统计图表辅助色使用深青灰，增强层次和稳定感。
* 卡片边框与分割线使用浅铜灰色，避免机械式的纯灰边框。

### 2.2 字体建议
* 页面标题：Source Han Serif SC
* 正文与表单：Source Han Sans SC
* 数字和价格：IBM Plex Sans

建议规则：
* 页面一级标题偏稳重，使用衬线字体提升识别度。
* 表格、表单、按钮和筛选区域统一使用无衬线字体，保证后台信息密度下的可读性。

### 2.3 颜色系统
建议使用以下色板：

```text
主背景色       #F4EFE8   米白纸感
面板背景色     #FBF8F3   温和浅底
主标题文字     #2F2923   深墨褐
常规正文       #5B544D   暖灰褐
主品牌色       #A66536   铜棕色
主品牌悬停色   #8F552C   深铜色
辅助深色       #24353A   深青灰
边框颜色       #D9CABB   浅铜灰
成功状态       #56735D   茶绿色
警告状态       #C68A35   琥珀色
危险状态       #B5533D   砖红色
信息状态       #4F6D7A   蓝灰色
```

### 2.4 背景与材质建议
* 登录页和系统首页可使用轻微的铜色渐变背景，叠加低透明度斜向纹理。
* 主工作区不建议大面积重纹理，避免影响表格和商品图片识别。
* 卡片和弹层可加入非常轻的毛玻璃感或半透明浅底，但透明度应克制。

### 2.5 动效建议
* 页面切换：150ms 到 220ms 的淡入上移。
* 卡片 hover：图片轻微放大 1.02 倍，边框从浅铜灰过渡到铜棕色。
* 订单入口：待处理订单数变化时可有一次短促脉冲效果。
* 权限切换或按钮禁用：避免突然消失，使用淡出或骨架切换。

---

## 3. 全局布局方案

### 3.1 整体框架
系统主框架建议保持固定左侧导航，不使用遮挡式弹窗作为主编辑方式。

推荐尺寸：
* 左侧目录栏宽度：260px 到 280px
* 顶部功能栏高度：68px 到 72px
* 主内容区左右内边距：24px 到 32px
* 主卡片圆角：16px 到 20px

布局结构如下：

```text
+-----------------------------------------------------------------------------------+
| 顶部功能栏：面包屑 | 全局搜索 | 待处理订单胶囊 | 当前用户 | 退出登录              |
+---------------------------+-------------------------------------------------------+
| 左侧目录树                | 右侧主内容区                                          |
| 型号 / 类目 / 款式        | 根据路由显示：商品墙 / 商品详情 / 订单 / 统计 / 用户   |
| 可折叠、可滚动            | 内容区以卡片分块，保留统一标题与操作区                |
+---------------------------+-------------------------------------------------------+
```

### 3.2 顶部功能栏设计
顶部栏不只承担导航作用，还承担身份与任务提示：
* 左侧：页面标题、面包屑、当前模块说明
* 中间：全局搜索，可快速搜索 SKU、商品名、订单号
* 右侧：订单胶囊、通知预留位、当前用户头像和用户名、退出登录
* 管理员额外显示“用户管理”快捷入口

### 3.3 左侧目录栏设计
目录栏建议采用深青灰背景，内容区域使用浅色节点卡片：
* 顶部显示系统 Logo 与“铜壶管理系统”名称
* 中部为树形目录
* 当前选中型号或款式采用铜棕色高亮边条
* 子节点悬停时显示淡铜背景
* 非商品类目使用独立图标，避免和商品类目混淆

---

## 4. 关键页面 UI 图方案

### 4.1 登录页
登录页采用左右分栏，不做普通表单居中页。左侧负责品牌表达，右侧负责登录操作。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 左侧品牌视觉区                                  | 右侧登录区                         |
| 铜色渐变背景 + 铜壶主视觉                        | 标题：欢迎进入铜壶管理系统          |
| 文案：商品、订单、标签、权限统一管理              | 账号输入框                         |
| 小字：内部业务系统                               | 密码输入框                         |
|                                                 | 记住登录状态                       |
|                                                 | 登录按钮                           |
|                                                 | 底部：系统版本 / 技术支持          |
+-----------------------------------------------------------------------------------+
```

设计要点：
* 左侧可放置半透明铜壶轮廓图、铜纹理和一句品牌文案。
* 右侧登录卡片宽度建议 420px 左右，表单区上紧下松，减少压迫感。
* 登录按钮使用铜棕色实底，按钮宽度铺满表单区。

### 4.2 商品中心页
这是系统访问频率最高的页面，视觉重点应放在“筛选效率”和“商品图浏览效率”上。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 顶部功能栏                                                                      |
+---------------------------+-------------------------------------------------------+
| 左侧目录树                | 页面标题：商品中心            [新增商品] [批量导入]    |
| 1号普通壶                 +-------------------------------------------------------+
|   |- 花纹A                | 筛选栏：关键词 | 状态 | 类目 | 价格区间 | 重置       |
|   |- 花纹B                +-------------------------------------------------------+
| 2号锤纹壶                 | 商品卡片网格                                        |
| 宣传物料                  | +-----------+ +-----------+ +-----------+            |
|                           | | 缩略图     | | 缩略图     | | 缩略图     |            |
|                           | | 名称 SKU   | | 名称 SKU   | | 名称 SKU   |            |
|                           | | 价格 库存  | | 价格 库存  | | 价格 库存  |            |
|                           | | 状态 +加购 | | 状态 +加购 | | 状态 +加购 |            |
|                           | +-----------+ +-----------+ +-----------+            |
|                           | 分页 / 懒加载区                                     |
+---------------------------+-------------------------------------------------------+
```

设计要点：
* 卡片图片区域占比高于文字区，建议图片区高度 170px 到 190px。
* 卡片底部操作固定，避免每张卡片按钮高度不一致。
* 状态标签使用实色小胶囊，不要做成大面积色块。
* “加入订单”按钮建议做成圆角小按钮，使用铜色描边或实底。

### 4.3 商品详情页
商品详情页是管理员维护商品的核心区域，同时也是客户用户查看商品的只读页面，因此必须兼顾编辑态和只读态。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 顶部功能栏                                                                      |
+---------------------------+-------------------------------------------------------+
| 左侧目录树                | 返回商品中心  /  商品详情                             |
|                           +-------------------------------------------------------+
|                           | 标题：1号普通壶 - 花纹A       状态标签   只读/可编辑   |
|                           +---------------------------+---------------------------+
|                           | 基础资料卡                 | 图片管理卡               |
|                           | SKU                        | 主图预览                 |
|                           | 名称                       | 原图上传                 |
|                           | 价格                       | 详情图列表               |
|                           | 库存                       | 主图设置 / 排序 / 删除    |
|                           | 状态                       |                           |
|                           +---------------------------+---------------------------+
|                           | 标签文件卡                 | 操作卡                   |
|                           | 已上传模板                 | 保存                     |
|                           | 下载模板                   | 返回                     |
|                           | 重新上传                   | 加入订单                 |
+---------------------------+-------------------------------------------------------+
```

设计要点：
* 页面使用双列卡片布局，左侧偏业务字段，右侧偏图片和附件。
* 管理员模式显示完整表单和上传按钮。
* 客户用户进入时，右上角显示“只读查看”标签，页面切换为单列图片画廊，不展示基础资料、标签文件和下载按钮。
* 管理员与可编辑用户的商品图片区支持主图大图预览，下方横向缩略图切换，并可直接拖动缩略图调整多图顺序。

### 4.4 订单列表页
订单列表页以效率为主，避免过多视觉装饰，但需要通过卡片统计和状态标签增强可读性。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 顶部功能栏                                                                      |
+-----------------------------------------------------------------------------------+
| 页面标题：订单中心      [全部订单] [未完成] [已完成] [月度统计] [年度统计]        |
+-----------------------------------------------------------------------------------+
| 汇总卡片：未完成订单数 | 今日出货数 | 本月订单金额 | 待下载标签订单数             |
+-----------------------------------------------------------------------------------+
| 筛选栏：订单号 | 快递单号 | 日期范围 | 状态 | 关键字 | 搜索 | 重置                 |
+-----------------------------------------------------------------------------------+
| 订单表格                                                                          |
| 订单号 | 创建时间 | 款式数 | 总数量 | 总价 | 状态 | 快递单号 | 操作                 |
| 查看详情 | 编辑 | 删除 | 完成订单                                                   |
+-----------------------------------------------------------------------------------+
```

设计要点：
* 未完成订单使用浅琥珀标签，已完成订单使用茶绿色标签。
* 打包工用户登录后，页面只保留与订单处理相关的操作按钮。
* 管理员可见全部订单操作与统计入口。

### 4.5 订单详情页
订单详情页建议做成“上摘要、下明细、右操作”的三段结构，但在窄屏下改为纵向堆叠。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 返回订单列表  /  订单详情                                                      |
+-----------------------------------------------------------------------------------+
| 订单摘要卡：订单号 | 状态 | 创建时间 | 快递单号 | 完成时间 | 总金额                |
+-----------------------------------------------+-----------------------------------+
| 商品明细表                                     | 订单操作卡                        |
| 型号 | 款式 | SKU | 单价 | 数量 | 小计        | 标签下载                          |
| ...                                           | 填写快递单号                      |
| ...                                           | 完成订单                          |
| ...                                           | 删除订单（管理员可删已完成订单）   |
+-----------------------------------------------+-----------------------------------+
| 操作时间线：创建订单 -> 修改订单 -> 完成订单                                      |
+-----------------------------------------------------------------------------------+
```

设计要点：
* 右侧操作卡做成固定吸附区，方便打包工在查看商品明细时直接完成操作。
* 标签下载按钮放在操作卡顶部，突出业务关键性。
* 已完成订单时，普通用户的编辑类按钮禁用并替换为灰色只读提示；管理员保留删除按钮。

### 4.6 用户管理页
用户管理页仅管理员可见，界面需要更偏“系统管理”，减少商品图和装饰性内容。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 页面标题：用户与权限管理                                  [新增普通用户]          |
+-----------------------------------------------------------------------------------+
| 筛选栏：用户名 | 用户类型 | 状态 | 权限关键词 | 搜索 | 重置                      |
+-----------------------------------------------------------------------------------+
| 用户表格                                                                          |
| 用户名 | 显示名 | 用户类型 | 状态 | 最近登录时间 | 权限摘要 | 操作                 |
| 编辑 | 重置密码 | 启停 | 分配权限                                                   |
+-----------------------------------------------------------------------------------+
| 权限分配抽屉 / 侧栏                                                               |
| [商品查看] [商品编辑] [附件上传] [订单查看] [订单处理] [订单完成] [统计查看]      |
| [用户管理]                                                                        |
+-----------------------------------------------------------------------------------+
```

设计要点：
* 权限分配不要用过深层级树，建议使用分组复选框，更适合当前两类用户体系。
* 管理员账号默认不可删除，只可重置密码或停用普通用户。

### 4.7 统计页面
统计页面建议比订单页更“看板化”，但仍需保留数据明细表。

页面线框：

```text
+-----------------------------------------------------------------------------------+
| 页面标题：经营统计       [月度] [年度]       年份选择 / 月份选择 / 类目筛选       |
+-----------------------------------------------------------------------------------+
| 指标卡：总销量 | 总销售额 | 销量最高款式 | 平均客单价                              |
+-----------------------------------------------------------------------------------+
| 左侧图表：销量趋势 / 类目占比              | 右侧图表：款式销量排行                 |
+-----------------------------------------------------------------------------------+
| 明细表：款式 | 数量 | 单价 | 小计 | 占比                                        |
+-----------------------------------------------------------------------------------+
```

设计要点：
* KPI 卡片用浅铜色与浅青色交错，不建议使用高饱和商务蓝。
* 图表建议用铜棕、茶绿、蓝灰三组主色，保证风格统一。

---

## 5. 不同用户的 UI 差异方案

### 5.1 管理员用户
管理员显示全部导航与全部操作：
* 商品中心
* 订单中心
* 统计页面
* 用户管理
* 商品编辑、图片上传、标签上传、删除操作全部可见

### 5.2 客户用户
客户用户建议采用明显的只读体验：
* 仅显示商品中心及被授权的只读页面
* 顶部显示“只读访问”小标签
* 商品详情中隐藏保存、上传、删除、加入订单等编辑按钮
* 页面风格仍保持完整，不要因为只读而显得残缺

### 5.3 打包工用户
打包工用户应减少商品管理干扰，只保留订单处理主路径：
* 左侧导航重点显示订单中心
* 商品相关页面如被授权访问，默认为只读
* 订单列表和订单详情中的“完成订单”按钮突出显示
* 快递单号输入框与标签下载区在视觉上应优先于次级信息

---

## 6. 组件级设计建议

### 6.1 卡片组件
* 使用 16px 到 20px 圆角
* 卡片头部与内容区之间留足 16px 到 20px 间距
* 卡片阴影不宜过深，建议采用浅阴影加浅边框

### 6.2 按钮体系
建议至少区分四类按钮：
* 主按钮：铜棕实底，用于保存、登录、完成订单
* 次按钮：白底铜边，用于返回、重置、重新上传
* 危险按钮：砖红色，用于删除
* 幽灵按钮：透明底，用于轻量级辅助操作

### 6.3 状态标签
* 可售：茶绿色
* 停产：深灰褐
* 库存多：蓝灰色
* 库存少：琥珀色
* 已完成订单：茶绿色
* 未完成订单：琥珀色
* 只读用户：浅蓝灰标签

### 6.4 表格设计
* 表头采用浅铜灰底色，不用纯灰。
* 行 hover 背景使用极浅米色。
* 金额字段右对齐，数量字段居中，文本字段左对齐。

---

## 7. 响应式与适配建议
虽然系统主要面向桌面端，但仍建议兼容常见笔记本与平板宽度：
* 1440px 以上：双列卡片与完整右侧操作区
* 1200px 到 1439px：商品详情页仍可双列，但图片区缩小
* 992px 到 1199px：订单详情页改为上下布局，右侧操作卡下沉到底部
* 768px 到 991px：左侧目录改为抽屉式切换，顶部功能区保留核心入口

移动端不建议作为一期重点，但登录页和订单详情页应避免完全不可用。

---

## 8. 推荐前端实现方式
为了让设计落地更顺畅，建议前端实现时先建立统一设计变量：

```text
颜色变量：背景色、品牌色、状态色、边框色、文字色
尺寸变量：顶部栏高度、侧栏宽度、卡片圆角、间距、阴影
权限变量：只读态、可编辑态、禁用态按钮样式
```

建议将以下部分优先组件化：
* 顶部功能栏
* 左侧树形导航
* 商品卡片
* 状态标签
* 订单状态栏
* 权限按钮包装组件
* 用户权限分配面板

---

## 9. 最终建议方案
如果只做一版第一期 UI，建议优先采用以下组合：
1. 登录页使用“品牌视觉区 + 登录卡片”的双栏布局。
2. 主系统采用“深色左侧栏 + 浅色内容区 + 铜色主按钮”的稳定结构。
3. 商品中心强调图片与筛选效率。
4. 商品详情页采用双列卡片结构，同时支持编辑态与只读态。
5. 订单详情页突出“标签下载”和“完成订单”两个核心操作。
6. 用户管理页采用清晰表格加权限抽屉，不做复杂权限树。

这套方案适合当前的业务复杂度，也方便后续直接落地到 Vue 组件开发。