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-表格样式优化.md

14 KiB
Raw Permalink Blame History

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) 样式：

.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. 启动前端开发服务器：

    cd ruoyi-ui && npm run dev

  2. 访问项目管理页面：http://localhost:80

  3. 使用浏览器开发者工具检查表格：

    • 确认 border 为 none
    • 确认 border-radius 为 8px
    • 确认有阴影效果
    • 鼠标悬停时阴影加深

Step 4: 提交更改

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 样式：

// 表头样式 - 扁平化，无背景色
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 样式中已有：

.cell {
  border-right: none;  // 确认这行存在
}

Step 3: 验证表头样式

在浏览器中检查表头：

  • 表头背景应为透明（白色）
  • 表头文字应加粗
  • 底部应有一条 2px 的灰色线
  • 高度应增加到 56px

Step 4: 提交更改

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 样式：

// 数据行样式 - 增加留白，移除分隔线
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 样式：

// 悬停效果
.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: 确认移除额外边框

确认已有以下样式（如果不存在则添加）：

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

&::before,
&::after {
  display: none;  // 或 height: 0; width: 0;
}

Step 4: 验证数据行样式

在浏览器中检查：

  • 行高应增加到 64px
  • 行之间应无分隔线（纯留白）
  • 悬停时背景应为浅灰色 #fafafa
  • 过渡动画应平滑

Step 5: 提交更改

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 行），修改为：

// 操作按钮样式 - 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: 提交更改

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 行），修改为：

// 分页样式优化 - 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: 提交更改

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: 更新最终验收报告

创建或更新验收报告，记录所有改进：

# 如果需要更新验收报告
git add doc/implementation/final_acceptance_report.md
git commit -m "docs: 更新验收报告 - Material Design 样式优化"

Step 7: 最终提交

git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
git commit -m "feat: 完成 Material Design 表格样式优化

- 移除表格边框，使用阴影和圆角
- 扁平化表头，移除背景色
- 移除行分隔线，增加留白
- 优化操作按钮悬停效果
- 扁平化分页组件
- 全面视觉测试通过
"

完整样式代码参考

以下是完整的 <style> 部分代码，供参考：

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

验收标准

完成所有任务后，验证以下内容：

视觉验收

  • 表格作为浮动卡片，有阴影效果
  • 表格圆角为 8px
  • 鼠标悬停时阴影加深
  • 表头扁平化，无背景色
  • 表头高度 56px
  • 数据行高度 64px
  • 行之间无分隔线，纯留白
  • 悬停时行背景为 #fafafa
  • 操作按钮悬停有浅蓝色背景
  • 分页组件扁平化，激活页码有圆角

交互验收

  • 悬停效果平滑
  • 所有操作按钮点击正常
  • 分页功能正常
  • 表格滚动正常

代码质量验收

  • 样式使用 scoped
  • 无冗余代码
  • 遵循 Material Design 规范
  • 每个改进有独立提交

风险与注意事项

  1. 视觉冲击：变化较大，用户可能需要适应时间
  2. 数据密集场景：留白增加可能需要更多滚动
  3. 浏览器兼容：现代浏览器都支持，无兼容性问题
  4. 回滚方案：如有问题，可以通过 git revert 快速回滚

参考资源

Reference in New Issue View Git Blame Copy Permalink