# 京东风格前端改造计划

## 一、设计目标
将现有系统改造为京东订单中心风格，采用红白灰配色，提升专业感和用户体验。

## 二、配色方案

| 颜色名称 | 色值 | 用途 |
|---------|------|------|
| 京东红 | `#e4393c` | 主按钮、选中态、强调色 |
| 深红 | `#c81623` | 悬停状态 |
| 背景灰 | `#f5f5f5` | 页面背景、表头背景 |
| 边框灰 | `#e5e5e5` | 分割线、边框 |
| 文字深 | `#333333` | 主标题文字 |
| 文字中 | `#666666` | 正文、表头文字 |
| 文字浅 | `#999999` | 辅助文字 |
| 白色 | `#ffffff` | 卡片背景、内容区 |
| 链接蓝 | `#005ea7` | 可点击链接 |

## 三、改造范围

### 3.1 全局样式（影响所有页面）
- [ ] 顶部导航栏（蓝色 → 京东红）
- [ ] 左侧菜单（深色 → 白色）
- [ ] 页面背景（白色 → 灰色）
- [ ] 按钮样式（Element默认 → 京东风格）
- [ ] 表格样式（标准 → 京东订单风格）
- [ ] 分页器样式

### 3.2 订单模块页面（重点改造）
- [ ] 待发订单页面
- [ ] 在途订单页面
- [ ] 历史订单页面
- [ ] 结单时间管理页面

### 3.3 其他业务页面（同步调整）
- [ ] 物料管理页面
- [ ] 甲方报价页面
- [ ] 供应商报价页面
- [ ] 客户管理页面

## 四、详细改造清单

### 第一阶段：全局基础样式（1-2天）

#### 4.1.1 创建主题变量文件
**文件**: `ruoyi-ui/src/styles/jd-variables.scss`

```scss
// 京东配色
$jd-red: #e4393c;
$jd-red-dark: #c81623;
$jd-red-light: #fff5f5;
$bg-gray: #f5f5f5;
$border-gray: #e5e5e5;
$border-light: #f0f0f0;
$text-dark: #333333;
$text-medium: #666666;
$text-light: #999999;
$link-blue: #005ea7;

// 覆盖Element变量
$--color-primary: $jd-red;
$--color-primary-light-1: $jd-red-light;
$--color-primary-light-9: $jd-red-light;
$--background-color-base: $bg-gray;
$--color-text-primary: $text-dark;
$--color-text-regular: $text-medium;
$--color-text-secondary: $text-light;
$--border-color-base: $border-gray;
$--border-color-light: $border-light;
```

#### 4.1.2 顶部导航栏改造
**文件**: `ruoyi-ui/src/layout/components/Navbar.vue` 或全局样式

**改造点**:
- 背景色: `#e4393c` (京东红)
- 高度: 50px
- Logo区域: 白色文字，加粗
- 导航菜单: 白色文字，透明背景
- 选中/悬停: 深色背景 `rgba(0,0,0,0.1)`
- 右侧工具栏: 白色图标

#### 4.1.3 左侧菜单改造
**文件**: `ruoyi-ui/src/layout/components/Sidebar/index.vue` 或全局样式

**改造点**:
- 背景: 白色 `#ffffff`
- 宽度: 160px (紧凑)
- 一级菜单:
  - 高度: 40px
  - 文字: `#666666`
  - 悬停: 文字变红 `#e4393c`，背景 `#fff5f5`
  - 选中: 文字红色，左边框3px红色
- 二级菜单:
  - 高度: 32px
  - 缩进: 35px
  - 字号: 13px

#### 4.1.4 页面内容区改造
**文件**: 全局样式

**改造点**:
- 背景: `#f5f5f5` (灰色)
- 内边距: 15px
- 卡片容器: 白色背景，1px边框 `#e5e5e5`

#### 4.1.5 按钮样式覆盖
**文件**: 全局样式

**改造点**:
- 主按钮:
  - 背景: `#e4393c`
  - 边框: `#e4393c`
  - 圆角: 2px
  - 悬停: `#c81623`
- 次按钮:
  - 边框: `#e5e5e5`
  - 文字: `#666666`
  - 悬停: 边框和文字变红

#### 4.1.6 表格样式覆盖
**文件**: 全局样式

**改造点**:
- 表头:
  - 背景: `#f5f5f5`
  - 文字: `#666666`
  - 高度: 32px
  - 字重: normal (不加粗)
- 表格行:
  - 悬停: 背景 `#fff5f5` (浅红)
  - 边框: 底部1px `#f0f0f0`
- 链接:
  - 颜色: `#005ea7` (蓝)
  - 悬停: 红色+下划线
- 金额:
  - 颜色: `#e4393c` (红)
  - 加粗

#### 4.1.7 分页器样式
**文件**: 全局样式

**改造点**:
- 页码按钮:
  - 边框: 1px `#e5e5e5`
  - 选中: 红色背景+白色文字
  - 悬停: 红色边框+红色文字

---

### 第二阶段：订单模块页面改造（2-3天）

#### 4.2.1 页面布局结构调整

**改造前结构**:
```
统计卡片 (4个彩色卡片)
搜索表单 (多行筛选条件)
操作按钮栏
数据表格
分页器
```

**改造后结构** (京东风格):
```
页面标题 (如"我的订单")
状态Tab (全部/待发/在途/历史 - 下划线式)
筛选栏 (灰底，单行)
  - 时间范围下拉
  - 搜索输入框+搜索按钮
  - 高级筛选
数据表格 (白底)
分页器
```

#### 4.2.2 状态Tab组件

**样式要求**:
- 横向排列，底部边框
- 默认: 文字 `#666666`
- 悬停: 文字变红
- 选中: 
  - 文字红色加粗
  - 底部2px红色下划线
- 数量标记: 灰色小字 `(99)`

#### 4.2.3 筛选栏样式

**样式要求**:
- 背景: `#f5f5f5`
- 内边距: 15px
- 元素间距: 15px
- 下拉框: 白色背景，高度32px
- 搜索框: 
  - 宽度300px
  - 右侧红色搜索按钮
- 高级筛选: 灰色文字，带下拉箭头

#### 4.2.4 表格内容优化

**字段展示优化**:
- 订单号: 蓝色链接，可点击
- 客户名称: 普通文字
- 物料信息: 名称+规格（换行）
- 金额: 红色加粗，右对齐
- 状态: 彩色标签
- 操作: 蓝色文字链接

#### 4.2.5 空状态样式

**样式要求**:
- 居中显示
- 图标: 120px
- 文字: `#999999`，14px
- 按钮: 红色主按钮

---

### 第三阶段：其他页面同步（1-2天）

#### 4.3.1 物料管理页面
- 统计卡片改为京东风格（白底+顶部彩色边框）
- 搜索栏改为灰底单行
- 表格应用新样式

#### 4.3.2 报价页面（甲方/供应商）
- 统计卡片改造
- 表格样式统一
- 按钮样式统一

#### 4.3.3 客户管理页面
- 列表样式统一
- 详情页卡片样式

---

## 五、文件创建清单

### 5.1 新建文件
1. `ruoyi-ui/src/styles/jd-variables.scss` - 变量定义
2. `ruoyi-ui/src/styles/jd-theme.scss` - 全局样式覆盖
3. `ruoyi-ui/src/components/JdStatusTabs/index.vue` - 状态Tab组件
4. `ruoyi-ui/src/components/JdFilterBar/index.vue` - 筛选栏组件

### 5.2 修改文件
1. `ruoyi-ui/src/styles/index.scss` - 引入新主题
2. `ruoyi-ui/src/layout/components/Navbar.vue` - 顶部导航
3. `ruoyi-ui/src/layout/components/Sidebar/index.vue` - 侧边菜单
4. `ruoyi-ui/src/views/bid/order/*.vue` - 订单页面
5. `ruoyi-ui/src/views/bid/material/*.vue` - 物料页面
6. `ruoyi-ui/src/views/bid/clientquote/*.vue` - 甲方报价页面
7. `ruoyi-ui/src/views/bid/quotation/*.vue` - 供应商报价页面

---

## 六、改造顺序建议

```
Day 1: 全局基础样式
  - 创建变量文件
  - 顶部导航改造
  - 左侧菜单改造
  - 按钮样式覆盖

Day 2: 表格和分页
  - 表格样式覆盖
  - 分页器样式
  - 页面背景调整

Day 3: 订单模块
  - 创建Tab组件
  - 创建筛选栏组件
  - 改造待发订单页面
  - 改造在途订单页面

Day 4: 订单模块+其他
  - 改造历史订单页面
  - 改造结单时间管理
  - 物料管理页面同步

Day 5: 收尾
  - 报价页面同步
  - 客户管理页面同步
  - 细节调整
```

---

## 七、验收标准

### 7.1 视觉验收
- [ ] 顶部导航为京东红 `#e4393c`
- [ ] 左侧菜单为白色背景
- [ ] 页面背景为灰色 `#f5f5f5`
- [ ] 主按钮为红色，悬停变深红
- [ ] 表格表头为灰色背景 `#f5f5f5`
- [ ] 表格行悬停为浅红背景 `#fff5f5`
- [ ] 金额为红色加粗
- [ ] 链接为蓝色，悬停变红

### 7.2 功能验收
- [ ] 所有页面正常显示
- [ ] 菜单点击正常
- [ ] 表格排序/筛选正常
- [ ] 分页功能正常
- [ ] 按钮点击正常

### 7.3 兼容性验收
- [ ] Chrome浏览器正常
- [ ] Edge浏览器正常
- [ ] 不同分辨率适配

---

## 八、注意事项

1. **渐进式改造**: 先改全局样式，再改页面结构
2. **保留原文件**: 修改前备份原样式文件
3. **变量优先**: 尽量使用变量，方便后续调整
4. **测试验证**: 每改完一个模块就刷新验证
5. **性能考虑**: 避免过多嵌套选择器

---

## 九、快速开始命令

```bash
# 1. 进入前端目录
cd ruoyi-ui

# 2. 安装依赖（如有新组件）
npm install

# 3. 启动开发服务器
npm run serve

# 4. 浏览器访问
http://localhost:80
```

---

**计划制定日期**: 2026-06-15  
**预计工期**: 5天  
**负责人**: 前端开发工程师