王文昊
41954f6ef1
1. 启用京东红主题，替换全局主色调为#e4393c 2. 调整侧边栏宽度为200px，优化导航样式 3. 重构顶部导航、侧边菜单、表格、卡片等全局组件样式 4. 新增JdStatusTabs和JdFilterBar通用组件 5. 统一业务页面配色风格为红白灰配色方案 6. 修复物料列表空数据展示问题，优化表格样式 7. 新增京东风格改造文档说明
348 lines
8.0 KiB
Markdown
348 lines
8.0 KiB
Markdown
# 京东风格前端改造计划
|
||
|
||
## 一、设计目标
|
||
将现有系统改造为京东订单中心风格，采用红白灰配色，提升专业感和用户体验。
|
||
|
||
## 二、配色方案
|
||
|
||
| 颜色名称 | 色值 | 用途 |
|
||
|---------|------|------|
|
||
| 京东红 | `#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天
|
||
**负责人**: 前端开发工程师
|