style: 完成京东风格整体改造

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

doc/京东风格改造计划.md

@@ -0,0 +1,347 @@
+# 京东风格前端改造计划
+
+## 一、设计目标
+将现有系统改造为京东订单中心风格，采用红白灰配色，提升专业感和用户体验。
+
+## 二、配色方案
+
+| 颜色名称 | 色值 | 用途 |
+|---------|------|------|
+| 京东红 | `#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天  
+**负责人**: 前端开发工程师