wkc/ccdi

Fork 0

Files

wkc 521bb80b2f 修改目录

2026-03-03 16:14:16 +08:00

12 KiB

Raw Blame History

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

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

概述

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

设计目标

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

设计方案

整体设计理念

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

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

详细设计

1. 整体卡片容器和阴影

样式定义：

.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. 扁平化表头设计

样式定义：

: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. 数据行设计（留白和悬停）

样式定义：

: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;  // 完全移除伪元素边框
  }
}

关键变化：

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

变更对比：

属性	旧值	新值
height	`50px`	`64px`
padding	`12px`	`20px 12px`
border-bottom	`1px solid #f0f0f0`	`none`
悬停背景	`#f5f5f5`	`#fafafa`

4. 操作按钮样式

样式定义：

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

改进点：

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

变更对比：

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

5. 分页组件样式

样式定义：

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

改进点：

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

6. 空状态设计

样式定义：

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

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

完整样式代码

<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 在现代浏览器中完全支持

实现步骤

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

文件修改

修改文件：

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

影响范围：

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

风险评估

风险等级： 🟢 低风险

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

后续优化建议

可选增强（非必需）：

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

参考资源

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 设计状态: ✅ 已批准 下一步: 创建实现计划

12 KiB Raw Blame History Unescape Escape

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

概述

设计目标

设计方案

整体设计理念

详细设计

1. 整体卡片容器和阴影

2. 扁平化表头设计

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

4. 操作按钮样式

5. 分页组件样式

6. 空状态设计

完整样式代码

视觉对比

旧设计 vs 新设计

设计规范

阴影层级

间距规范

颜色规范

圆角规范

响应式考虑

大屏幕（≥1920px）

中等屏幕（1366px - 1919px）

小屏幕（<1366px）

浏览器兼容性

现代浏览器

潜在问题

实现步骤

文件修改

风险评估

后续优化建议

参考资源

12 KiB

Raw Blame History