ccdi/assets/plans/2026-02-27-Material-Design-表格样式优化-design.md

# Material Design 表格样式优化设计文档

**日期**: 2026-02-27
**状态**: 已批准
**方案**: 纯扁平卡片式（方案 1）

## 概述

本文档描述项目管理表格的 Material Design 风格优化设计。通过移除边框、使用阴影和留白来分隔内容，实现现代、简洁的视觉体验。

## 设计目标

1. **全面 Material Design 改版**：采用 Material Design 的核心设计语言
2. **扁平化表头**：移除表头背景色，使用排版和留白区分
3. **阴影和留白**：用视觉层次代替边框分隔
4. **中等阴影效果**：`box-shadow: 0 2px 8px rgba(0,0,0,0.1)`

## 设计方案

### 整体设计理念

采用 **纯扁平卡片式** 设计，核心特征：

- 表格整体作为一张浮动卡片
- 使用阴影创造视觉层次
- 移除所有边框和分隔线
- 通过留白分隔行与行
- 表头扁平化，无背景色

---

## 详细设计

### 1. 整体卡片容器和阴影

**样式定义：**

```scss
.project-table-container {
  margin-top: 16px;

  :deep(.el-table) {
    // 移除边框，使用阴影
    border: 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);
    }
  }
}
```

**视觉效果：**

- 表格作为浮动的独立卡片
- 圆角：8px（更柔和）
- 默认阴影：`0 2px 8px rgba(0,0,0,0.1)`
- 悬停阴影：`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)` |

---

### 2. 扁平化表头设计

**样式定义：**

```scss
:deep(.el-table) {
  // 表头样式 - 扁平化，无背景色
  th {
    background-color: transparent;  // 移除背景色
    color: #333;
    font-weight: 600;  // 加粗字体
    font-size: 14px;
    height: 56px;  // 从 48px 增加到 56px
    padding: 16px 12px;  // 从 12px 增加到 16px

    // 只保留底部一条分隔线
    border-bottom: 2px solid #e0e0e0;
  }

  // 表头单元格内部
  .cell {
    border-right: none;  // 移除垂直分隔线
  }
}
```

**设计理念：**

- 通过字体粗细、留白和底线区分表头
- 不依赖背景色
- 简洁、现代

**变更对比：**
| 属性 | 旧值 | 新值 |
|------|------|------|
| background-color | `#f5f5f5` | `transparent` |
| height | `48px` | `56px` |
| padding | `12px` | `16px 12px` |
| border-bottom | 无 | `2px solid #e0e0e0` |

---

### 3. 数据行设计（留白和悬停）

**样式定义：**

```scss
:deep(.el-table) {
  // 数据行样式 - 增加留白，移除分隔线
  td {
    color: #333;
    font-size: 14px;
    height: 64px;  // 从 50px 增加到 64px
    padding: 20px 12px;  // 从 12px 增加到 20px
    border-bottom: none;  // 完全移除行分隔线
  }

  // 悬停效果
  .el-table__row {
    transition: background-color 0.2s ease;

    &:hover > td {
      background-color: #fafafa !important;  // 浅灰色背景
    }
  }

  // 移除表格内容的额外边框
  .el-table__body-wrapper {
    .cell {
      border-right: none;
    }
  }

  &::before,
  &::after {
    display: none;  // 完全移除伪元素边框
  }
}
```

**关键变化：**

1. **行高增加**：50px → 64px（+28%）
2. **垂直内边距**：12px → 20px（+67%）
3. **移除行分隔线**：`border-bottom: none`
4. **悬停效果**：浅灰色背景 `#fafafa` + 过渡 0.2s

**变更对比：**
| 属性 | 旧值 | 新值 |
|------|------|------|
| height | `50px` | `64px` |
| padding | `12px` | `20px 12px` |
| border-bottom | `1px solid #f0f0f0` | `none` |
| 悬停背景 | `#f5f5f5` | `#fafafa` |

---

### 4. 操作按钮样式

**样式定义：**

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

**改进点：**

1. **增加内边距**：更符合 Material Design 的"点击区域"理念
2. **悬停背景色**：用浅蓝色背景代替下划线
3. **减少间距**：背景色会在视觉上分隔按钮

**变更对比：**
| 属性 | 旧值 | 新值 |
|------|------|------|
| padding | `0 8px` | `8px 12px` |
| border-radius | 无 | `4px` |
| hover background | 无 | `rgba(24, 144, 255, 0.08)` |
| hover text-decoration | `underline` | `none` |

---

### 5. 分页组件样式

**样式定义：**

```scss
// 分页样式优化
: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
  }
}
```

**改进点：**

1. **移除边框**：扁平化所有按钮
2. **激活页码**：蓝色背景 + 圆角
3. **增加上边距**：24px（原 16px）

---

### 6. 空状态设计

**样式定义：**

```scss
// 空状态（无数据时）
:deep(.el-table__empty-block) {
  padding: 48px 0;  // 增加垂直留白

  .el-table__empty-text {
    color: #999;
    font-size: 14px;
  }
}
```

---

## 完整样式代码

```scss
<style lang="scss" scoped>
.project-table-container {
  margin-top: 16px;

  :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;
    }
  }
}

// 操作按钮样式
: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;
  }
}

// 分页样式
: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;
  }
}

// 保留现有样式
.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;
}
</style>
```

---

## 视觉对比

### 旧设计 vs 新设计

| 元素       | 旧设计                 | 新设计       | 改进          |
|----------|---------------------|-----------|-------------|
| **表格边框** | `1px solid #eee`    | 无边框 + 阴影  | 更轻盈         |
| **圆角**   | 4px                 | 8px       | 更柔和         |
| **表头背景** | `#f5f5f5`           | 透明        | 扁平化         |
| **表头高度** | 48px                | 56px      | 更舒适         |
| **行高**   | 50px                | 64px      | 更透气         |
| **行内边距** | 12px                | 20px      | 留白充足        |
| **行分隔线** | `1px solid #f0f0f0` | 无         | 纯留白         |
| **悬停背景** | `#f5f5f5`           | `#fafafa` | 更微妙         |
| **按钮悬停** | 下划线                 | 背景色       | Material 风格 |

---

## 设计规范

### 阴影层级

- **默认卡片阴影**：`0 2px 8px rgba(0, 0, 0, 0.1)`（Elevation 2）
- **悬停卡片阴影**：`0 4px 12px rgba(0, 0, 0, 0.15)`（Elevation 4）

### 间距规范

- **卡片上边距**：16px
- **表头高度**：56px
- **表头内边距**：16px 12px
- **数据行高度**：64px
- **数据行内边距**：20px 12px
- **按钮内边距**：8px 12px
- **分页上边距**：24px

### 颜色规范

- **卡片背景**：#ffffff
- **表头文字**：#333
- **表头底线**：#e0e0e0
- **数据行文字**：#333
- **悬停背景**：#fafafa
- **操作按钮**：#1890ff
- **按钮悬停**：#096dd9
- **按钮悬停背景**：`rgba(24, 144, 255, 0.08)`
- **激活页码**：#1890ff
- **空状态文字**：#999

### 圆角规范

- **卡片圆角**：8px
- **按钮圆角**：4px
- **页码圆角**：4px

---

## 响应式考虑

### 大屏幕（≥1920px）

- 保持设计不变
- 可以考虑增加卡片间距

### 中等屏幕（1366px - 1919px）

- 当前设计最佳适配

### 小屏幕（<1366px）

- 表格可能需要横向滚动
- 考虑固定关键列（如操作列）

---

## 浏览器兼容性

### 现代浏览器

- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+

### 潜在问题

- `box-shadow` 在所有现代浏览器中都支持良好
- `border-radius` 无兼容性问题
- `transition` 在现代浏览器中完全支持

---

## 实现步骤

1. 修改 `ProjectTable.vue` 的 `<style>` 部分
2. 替换所有边框样式为阴影
3. 调整表头、数据行的高度和内边距
4. 更新操作按钮和分页样式
5. 测试视觉效果和交互体验
6. 提交代码

---

## 文件修改

**修改文件：**

- `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`

**影响范围：**

- 仅影响样式，不影响功能
- 不影响其他组件
- 向后兼容

---

## 风险评估

**风险等级：** 🟢 **低风险**

- ✅ 纯样式优化，无业务逻辑变更
- ✅ 组件职责单一，影响范围可控
- ✅ 样式使用 scoped，不污染其他组件
- ✅ 可以快速回滚（只需恢复旧样式）

---

## 后续优化建议

**可选增强（非必需）：**

1. **添加 Ripple 效果**：操作按钮点击时的水波纹动画
2. **暗色模式**：提供暗色主题支持
3. **动画效果**：行展开/折叠的平滑动画
4. **可访问性**：添加高对比度模式支持
5. **响应式优化**：移动端的特殊处理

---

## 参考资源

- **Material Design 官方文档**: https://material.io/design
- **Element UI 文档**: https://element.eleme.cn/
- **当前设计文档**: `doc/plans/2026-02-27-项目管理首页优化-design.md`
- **当前实现计划**: `doc/plans/2026-02-27-项目管理首页优化.md`

---

**设计完成日期**: 2026-02-27
**设计状态**: ✅ 已批准
**下一步**: 创建实现计划