docs: 添加 Material Design 表格样式优化实现计划

2026-02-27 10:41:12 +08:00
parent bfd6a4c89b
commit a062c7d715
1 changed files with 654 additions and 0 deletions
--- a/doc/plans/2026-02-27-Material-Design-表格样式优化.md
+++ b/doc/plans/2026-02-27-Material-Design-表格样式优化.md
@@ -0,0 +1,654 @@
+# Material Design 表格样式优化实现计划
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** 将项目管理表格优化为 Material Design 风格，移除边框，使用阴影和留白分隔内容
+
+**Architecture:** 纯样式优化，修改 ProjectTable 组件的 SCSS，采用扁平卡片式设计
+
+**Tech Stack:** Vue.js 2.6.12, Element UI 2.15.14, SCSS
+
+---
+
+## Task 1: 修改表格容器样式 - 添加阴影和圆角
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+
+**Step 1: 定位表格样式部分**
+
+找到 `<style lang="scss" scoped>` 中的 `.project-table-container` 部分（约第 245 行开始）。
+
+**Step 2: 修改表格容器样式**
+
+替换现有的 `:deep(.el-table)` 样式：
+
+```scss
+.project-table-container {
+  margin-top: 16px;
+
+  // 表格整体样式 - Material Design 卡片式
+  :deep(.el-table) {
+    // 移除边框，使用阴影
+    border: none;  // 从 1px solid #eee 改为 none
+    border-radius: 8px;  // 从 4px 增加到 8px
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  // 新增中等阴影
+
+    // 悬停时卡片阴影加深
+    transition: box-shadow 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+```
+
+**变更说明：**
+- `border`: `1px solid #eee` → `none`
+- `border-radius`: `4px` → `8px`
+- 新增 `box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)`
+- 新增悬停效果 `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)`
+- 新增过渡动画 `transition: box-shadow 0.3s ease`
+
+**Step 3: 验证样式应用**
+
+1. 启动前端开发服务器：
+   ```bash
+   cd ruoyi-ui && npm run dev
+   ```
+
+2. 访问项目管理页面：http://localhost:80
+
+3. 使用浏览器开发者工具检查表格：
+   - 确认 `border` 为 `none`
+   - 确认 `border-radius` 为 `8px`
+   - 确认有阴影效果
+   - 鼠标悬停时阴影加深
+
+**Step 4: 提交更改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+git commit -m "style: Material Design - 表格容器添加阴影和圆角"
+```
+
+---
+
+## Task 2: 扁平化表头样式
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+
+**Step 1: 修改表头样式**
+
+在 `:deep(.el-table)` 内修改 `th` 样式：
+
+```scss
+// 表头样式 - 扁平化，无背景色
+th {
+  background-color: transparent;  // 从 #f5f5f5 改为 transparent
+  color: #333;
+  font-weight: 600;
+  font-size: 14px;
+  height: 56px;  // 从 48px 增加到 56px
+  padding: 16px 12px;  // 从 12px 增加到 16px 垂直内边距
+
+  // 只保留底部一条分隔线
+  border-bottom: 2px solid #e0e0e0;  // 新增
+}
+```
+
+**变更说明：**
+- `background-color`: `#f5f5f5` → `transparent`
+- `height`: `48px` → `56px`
+- `padding`: `12px` → `16px 12px`
+- 新增 `border-bottom: 2px solid #e0e0e0`
+
+**Step 2: 移除表头单元格的垂直分隔线**
+
+确认 `.cell` 样式中已有：
+```scss
+.cell {
+  border-right: none;  // 确认这行存在
+}
+```
+
+**Step 3: 验证表头样式**
+
+在浏览器中检查表头：
+- 表头背景应为透明（白色）
+- 表头文字应加粗
+- 底部应有一条 2px 的灰色线
+- 高度应增加到 56px
+
+**Step 4: 提交更改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+git commit -m "style: Material Design - 扁平化表头，移除背景色"
+```
+
+---
+
+## Task 3: 优化数据行样式 - 移除分隔线，增加留白
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+
+**Step 1: 修改数据行样式**
+
+在 `:deep(.el-table)` 内修改 `td` 样式：
+
+```scss
+// 数据行样式 - 增加留白，移除分隔线
+td {
+  color: #333;
+  font-size: 14px;
+  height: 64px;  // 从 50px 增加到 64px
+  padding: 20px 12px;  // 从 12px 增加到 20px 垂直内边距
+  border-bottom: none;  // 从 1px solid #f0f0f0 改为 none
+}
+```
+
+**变更说明：**
+- `height`: `50px` → `64px` (+28%)
+- `padding`: `12px` → `20px 12px` (+67% 垂直内边距)
+- `border-bottom`: `1px solid #f0f0f0` → `none`
+
+**Step 2: 优化悬停效果**
+
+修改 `.el-table__row:hover > td` 样式：
+
+```scss
+// 悬停效果
+.el-table__row {
+  transition: background-color 0.2s ease;  // 新增过渡
+
+  &:hover > td {
+    background-color: #fafafa !important;  // 从 #f5f5f5 改为 #fafafa
+  }
+}
+```
+
+**变更说明：**
+- 悬停背景色：`#f5f5f5` → `#fafafa`（更浅）
+- 新增 `transition: background-color 0.2s ease`
+
+**Step 3: 确认移除额外边框**
+
+确认已有以下样式（如果不存在则添加）：
+
+```scss
+// 移除表格内容的额外边框
+.el-table__body-wrapper {
+  .cell {
+    border-right: none;
+  }
+}
+
+&::before,
+&::after {
+  display: none;  // 或 height: 0; width: 0;
+}
+```
+
+**Step 4: 验证数据行样式**
+
+在浏览器中检查：
+- 行高应增加到 64px
+- 行之间应无分隔线（纯留白）
+- 悬停时背景应为浅灰色 `#fafafa`
+- 过渡动画应平滑
+
+**Step 5: 提交更改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+git commit -m "style: Material Design - 移除行分隔线，增加留白"
+```
+
+---
+
+## Task 4: 优化操作按钮样式 - Material Design 风格
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+
+**Step 1: 修改操作按钮样式**
+
+找到或添加 `:deep(.el-button--text)` 样式部分（约第 338 行），修改为：
+
+```scss
+// 操作按钮样式 - Material Design 风格
+:deep(.el-button--text) {
+  color: #1890ff;
+  padding: 8px 12px;  // 从 0 8px 增加到 8px 12px
+  border-radius: 4px;  // 新增圆角
+  transition: all 0.2s ease;  // 从只过渡颜色改为过渡所有属性
+
+  &:hover {
+    color: #096dd9;
+    background-color: rgba(24, 144, 255, 0.08);  // 新增浅蓝色背景
+    text-decoration: none;  // 移除下划线
+  }
+
+  &:first-child {
+    padding-left: 0;  // 第一个按钮无左内边距
+  }
+
+  // 按钮间距
+  & + .el-button--text {
+    margin-left: 4px;  // 从 8px 减少到 4px
+  }
+}
+```
+
+**变更说明：**
+- `padding`: `0 8px` → `8px 12px`（增加点击区域）
+- 新增 `border-radius: 4px`
+- 新增悬停背景色 `rgba(24, 144, 255, 0.08)`
+- 移除悬停下划线 `text-decoration: none`
+- `transition`: 只过渡颜色 → 过渡所有属性
+- 按钮间距：`8px` → `4px`
+
+**Step 2: 验证按钮样式**
+
+在浏览器中测试：
+- 按钮内边距应增加
+- 悬停时应显示浅蓝色背景，无下划线
+- 过渡动画应平滑
+- 按钮之间应有适当间距
+
+**Step 3: 提交更改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+git commit -m "style: Material Design - 操作按钮添加悬停背景"
+```
+
+---
+
+## Task 5: 优化分页组件样式
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+
+**Step 1: 修改分页样式**
+
+找到或添加 `:deep(.el-pagination)` 样式部分（约第 352 行），修改为：
+
+```scss
+// 分页样式优化 - Material Design 风格
+:deep(.el-pagination) {
+  margin-top: 24px;  // 从 16px 增加到 24px
+  text-align: right;
+
+  // 扁平化按钮
+  .btn-prev,
+  .btn-next,
+  .el-pager li {
+    border: none;  // 移除边框
+    background-color: transparent;  // 透明背景
+
+    &:hover {
+      background-color: #f5f5f5;  // 悬停时浅灰背景
+    }
+  }
+
+  .el-pager li.active {
+    background-color: #1890ff;  // 激活页码蓝色背景
+    color: white;
+    border-radius: 4px;  // 添加圆角
+  }
+
+  .el-pagination__total,
+  .el-pagination__sizes,
+  .el-pagination__jump {
+    color: #666;  // 从 #606266 改为 #666
+  }
+}
+```
+
+**变更说明：**
+- `margin-top`: `16px` → `24px`
+- 移除分页按钮边框
+- 激活页码添加圆角 `border-radius: 4px`
+- 统一文字颜色为 `#666`
+
+**Step 2: 验证分页样式**
+
+在浏览器中检查分页组件：
+- 上边距应增加到 24px
+- 所有按钮应无边框
+- 激活页码应有蓝色背景 + 圆角
+- 悬停时按钮应有浅灰背景
+
+**Step 3: 提交更改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+git commit -m "style: Material Design - 扁平化分页组件"
+```
+
+---
+
+## Task 6: 全面测试和文档更新
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+
+**Step 1: 视觉测试清单**
+
+在浏览器中逐项检查：
+
+**卡片容器：**
+- [ ] 表格有圆角（8px）
+- [ ] 表格有阴影（`0 2px 8px rgba(0,0,0,0.1)`）
+- [ ] 鼠标悬停时阴影加深
+- [ ] 完全无边框
+
+**表头：**
+- [ ] 表头背景透明
+- [ ] 表头文字加粗
+- [ ] 底部有 2px 灰色分隔线
+- [ ] 高度为 56px
+
+**数据行：**
+- [ ] 行高增加到 64px
+- [ ] 行之间无分隔线
+- [ ] 悬停时背景为 `#fafafa`
+- [ ] 过渡动画平滑
+
+**操作按钮：**
+- [ ] 按钮内边距增加
+- [ ] 悬停时显示浅蓝色背景
+- [ ] 悬停时无下划线
+- [ ] 按钮之间有适当间距
+
+**分页组件：**
+- [ ] 所有按钮无边框
+- [ ] 激活页码有蓝色背景 + 圆角
+- [ ] 悬停时按钮有浅灰背景
+- [ ] 上边距为 24px
+
+**Step 2: 交互测试**
+
+测试以下交互：
+- [ ] 鼠标悬停在表格上，阴影加深
+- [ ] 鼠标悬停在行上，背景变化
+- [ ] 点击操作按钮，检查事件是否正常触发
+- [ ] 点击分页按钮，检查翻页功能
+- [ ] 改变每页条数，检查表格刷新
+- [ ] 表格横向滚动（如果内容超出）
+
+**Step 3: 响应式测试**
+
+在不同分辨率下测试：
+- [ ] 1920x1080 - 表格正常显示
+- [ ] 1366x768 - 表格正常显示
+- [ ] 小于 1366px - 表格应可横向滚动
+
+**Step 4: 浏览器兼容性测试**
+
+在以下浏览器中测试：
+- [ ] Chrome（主要浏览器）
+- [ ] Edge
+- [ ] Firefox（可选）
+
+**Step 5: 截图对比（可选）**
+
+拍摄优化前后的对比截图，保存到：
+```
+doc/screenshots/material-design-table-before.png
+doc/screenshots/material-design-table-after.png
+```
+
+**Step 6: 更新最终验收报告**
+
+创建或更新验收报告，记录所有改进：
+
+```bash
+# 如果需要更新验收报告
+git add doc/implementation/final_acceptance_report.md
+git commit -m "docs: 更新验收报告 - Material Design 样式优化"
+```
+
+**Step 7: 最终提交**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
+git commit -m "feat: 完成 Material Design 表格样式优化
+
+- 移除表格边框，使用阴影和圆角
+- 扁平化表头，移除背景色
+- 移除行分隔线，增加留白
+- 优化操作按钮悬停效果
+- 扁平化分页组件
+- 全面视觉测试通过
+"
+```
+
+---
+
+## 完整样式代码参考
+
+以下是完整的 `<style>` 部分代码，供参考：
+
+```scss
+<style lang="scss" scoped>
+.project-table-container {
+  margin-top: 16px;
+
+  // 表格整体样式 - Material Design 卡片式
+  :deep(.el-table) {
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    // 表头样式 - 扁平化
+    th {
+      background-color: transparent;
+      color: #333;
+      font-weight: 600;
+      font-size: 14px;
+      height: 56px;
+      padding: 16px 12px;
+      border-bottom: 2px solid #e0e0e0;
+    }
+
+    // 数据行样式 - 增加留白
+    td {
+      color: #333;
+      font-size: 14px;
+      height: 64px;
+      padding: 20px 12px;
+      border-bottom: none;
+    }
+
+    // 移除列分隔线
+    .el-table__body-wrapper .cell {
+      border-right: none;
+    }
+
+    // 悬停效果
+    .el-table__row {
+      transition: background-color 0.2s ease;
+
+      &:hover > td {
+        background-color: #fafafa !important;
+      }
+    }
+
+    // 移除额外边框
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+// 项目信息单元格
+.project-info-cell {
+  padding: 8px 0;
+  line-height: 1.5;
+
+  .project-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .project-desc {
+    font-size: 12px;
+    color: #909399;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// 预警人数包装器
+.warning-count-wrapper {
+  display: inline-block;
+}
+
+// 文字颜色类
+.text-danger {
+  color: #f56c6c;
+}
+
+.text-warning {
+  color: #e6a23c;
+}
+
+.text-info {
+  color: #909399;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+// 操作按钮样式 - Material Design
+:deep(.el-button--text) {
+  color: #1890ff;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #096dd9;
+    background-color: rgba(24, 144, 255, 0.08);
+    text-decoration: none;
+  }
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  & + .el-button--text {
+    margin-left: 4px;
+  }
+}
+
+// 分页样式 - Material Design
+:deep(.el-pagination) {
+  margin-top: 24px;
+  text-align: right;
+
+  .btn-prev,
+  .btn-next,
+  .el-pager li {
+    border: none;
+    background-color: transparent;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+
+  .el-pager li.active {
+    background-color: #1890ff;
+    color: white;
+    border-radius: 4px;
+  }
+
+  .el-pagination__total,
+  .el-pagination__sizes,
+  .el-pagination__jump {
+    color: #666;
+  }
+}
+
+// 空状态
+:deep(.el-table__empty-block) {
+  padding: 48px 0;
+
+  .el-table__empty-text {
+    color: #999;
+    font-size: 14px;
+  }
+}
+</style>
+```
+
+---
+
+## 验收标准
+
+完成所有任务后，验证以下内容：
+
+### 视觉验收
+
+- [x] 表格作为浮动卡片，有阴影效果
+- [x] 表格圆角为 8px
+- [x] 鼠标悬停时阴影加深
+- [x] 表头扁平化，无背景色
+- [x] 表头高度 56px
+- [x] 数据行高度 64px
+- [x] 行之间无分隔线，纯留白
+- [x] 悬停时行背景为 #fafafa
+- [x] 操作按钮悬停有浅蓝色背景
+- [x] 分页组件扁平化，激活页码有圆角
+
+### 交互验收
+
+- [x] 悬停效果平滑
+- [x] 所有操作按钮点击正常
+- [x] 分页功能正常
+- [x] 表格滚动正常
+
+### 代码质量验收
+
+- [x] 样式使用 scoped
+- [x] 无冗余代码
+- [x] 遵循 Material Design 规范
+- [x] 每个改进有独立提交
+
+---
+
+## 风险与注意事项
+
+1. **视觉冲击**：变化较大，用户可能需要适应时间
+2. **数据密集场景**：留白增加可能需要更多滚动
+3. **浏览器兼容**：现代浏览器都支持，无兼容性问题
+4. **回滚方案**：如有问题，可以通过 git revert 快速回滚
+
+---
+
+## 参考资源
+
+- 设计文档：`doc/plans/2026-02-27-Material-Design-表格样式优化-design.md`
+- Material Design 官方文档：https://material.io/design
+- Element UI 文档：https://element.eleme.cn/
+- 当前实现：`doc/plans/2026-02-27-项目管理首页优化.md`