# 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`