wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
ccdi/doc/plans/2026-02-27-Material-Design-表格样式优化-design.md

588 lines
12 KiB
Markdown
Raw Permalink Normal View History

docs: 添加 Material Design 表格样式优化设计文档
2026-02-27 10:38:36 +08:00
# 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
**设计状态**: ✅ 已批准
**下一步**: 创建实现计划
Reference in New Issue Copy Permalink