681 lines
14 KiB
Markdown
681 lines
14 KiB
Markdown
# 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`
|