Files

王文昊 41954f6ef1 style: 完成京东风格整体改造

1.  启用京东红主题，替换全局主色调为#e4393c
2.  调整侧边栏宽度为200px，优化导航样式
3.  重构顶部导航、侧边菜单、表格、卡片等全局组件样式
4.  新增JdStatusTabs和JdFilterBar通用组件
5.  统一业务页面配色风格为红白灰配色方案
6.  修复物料列表空数据展示问题，优化表格样式
7.  新增京东风格改造文档说明

2026-06-15 16:04:10 +08:00

8.0 KiB

Raw Blame History

京东风格前端改造计划

一、设计目标

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

二、配色方案

颜色名称	色值	用途
京东红	`#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

// 京东配色
$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 新建文件

ruoyi-ui/src/styles/jd-variables.scss - 变量定义
ruoyi-ui/src/styles/jd-theme.scss - 全局样式覆盖
ruoyi-ui/src/components/JdStatusTabs/index.vue - 状态Tab组件
ruoyi-ui/src/components/JdFilterBar/index.vue - 筛选栏组件

5.2 修改文件

ruoyi-ui/src/styles/index.scss - 引入新主题
ruoyi-ui/src/layout/components/Navbar.vue - 顶部导航
ruoyi-ui/src/layout/components/Sidebar/index.vue - 侧边菜单
ruoyi-ui/src/views/bid/order/*.vue - 订单页面
ruoyi-ui/src/views/bid/material/*.vue - 物料页面
ruoyi-ui/src/views/bid/clientquote/*.vue - 甲方报价页面
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. 进入前端目录
cd ruoyi-ui

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

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

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

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

8.0 KiB Raw Blame History Unescape Escape

京东风格前端改造计划

一、设计目标

二、配色方案

三、改造范围

3.1 全局样式（影响所有页面）

3.2 订单模块页面（重点改造）

3.3 其他业务页面（同步调整）

四、详细改造清单

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

4.1.1 创建主题变量文件

4.1.2 顶部导航栏改造

4.1.3 左侧菜单改造

4.1.4 页面内容区改造

4.1.5 按钮样式覆盖

4.1.6 表格样式覆盖

4.1.7 分页器样式

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

4.2.1 页面布局结构调整

4.2.2 状态Tab组件

4.2.3 筛选栏样式

4.2.4 表格内容优化

4.2.5 空状态样式

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

4.3.1 物料管理页面

4.3.2 报价页面（甲方/供应商）

4.3.3 客户管理页面

五、文件创建清单

5.1 新建文件

5.2 修改文件

六、改造顺序建议

七、验收标准

7.1 视觉验收

7.2 功能验收

7.3 兼容性验收

八、注意事项

九、快速开始命令

8.0 KiB

Raw Blame History