wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
ccdi/doc/plans/2026-02-27-项目管理首页优化-design.md
wkc 982b82e95b docs: 添加项目管理首页优化设计文档 
- 搜索栏添加重置按钮并优化布局
- 状态列宽度调整为 160px 并添加图标
- 操作按钮根据项目状态条件显示
- 表格样式优化以匹配参考设计
2026-02-27 09:32:30 +08:00

9.3 KiB
Raw Permalink Blame History

项目管理首页优化设计文档

日期: 2026-02-27 状态: 已批准 方案: 混合方案（方案3）

概述

本文档描述项目管理首页的用户界面优化设计，包括搜索栏、表格样式和操作按钮的改进。目标是提升用户体验，使界面更符合现代设计标准，并增强功能性。

需求总结

  1. 搜索栏优化：添加独立的重置按钮，调整布局
  2. 状态列优化：增加宽度至 160px，添加图标
  3. 操作按钮条件显示：根据项目状态显示不同操作
  4. 表格视觉优化：按照参考截图实现现代化样式

设计方案

1. 搜索栏设计

布局结构：

┌────────────────────────────────────────────────────────────────┐
│  [🔍 项目名称]  [状态选择]  [搜索] [重置]         [新建项目] [导入历史] │
└────────────────────────────────────────────────────────────────┘

具体实现：

元素 说明
项目名称输入框 宽度约占25%，带搜索图标前缀，支持回车搜索
状态下拉框 宽度约占15%，选项：全部/进行中/已完成/已归档
搜索按钮 蓝色主按钮（#1890ff），从输入框内移出独立显示
重置按钮 默认按钮样式（白底灰边），点击清空所有搜索条件并刷新
新建项目 蓝色主按钮，右对齐
导入历史项目 默认按钮，右对齐

2. 表格设计

2.1 状态列设计（宽度 160px）

视觉效果：圆点图标 + 文字标签

状态 图标颜色 标签颜色 文字
进行中 蓝色圆点 type="primary" (#1890ff) 进行中
已完成 绿色圆点 type="success" (#52c41a) 已完成
已归档 灰色圆点 type="info" (#909399) 已归档

2.2 操作列设计（宽度 200px）

条件渲染逻辑：

项目状态 显示的按钮
进行中（'0'） 进入项目
已完成（'1'） 查看结果、重新分析、归档
已归档（'2'） 查看结果

按钮样式：

  • 类型：文字按钮（type="text"）
  • 颜色：蓝色（#1890ff）
  • 悬停：深蓝色（#096dd9）+ 下划线
  • 间距：8px

2.3 表格整体样式

表头：

  • 背景色：#f5f5f5
  • 文字：深灰色粗体（#333）
  • 字号：14px
  • 高度：48px

数据行：

  • 高度：50-60px（根据内容自动调整）
  • 背景色：#fff
  • 文字颜色：#333
  • 内边距：12px
  • 悬停背景：#f5f5f5
  • 过渡时间：0.3s

边框：

  • 表格外边框：1px solid #eee
  • 行分隔线：1px solid #f0f0f0
  • 列分隔线：无或极浅（#fafafa）

列宽分布：

  • 项目名称：300px（左对齐）
  • 项目状态：160px（居中）
  • 目标人数：100px（居中）
  • 预警人数：120px（居中，保留悬停详情）
  • 创建人：120px（居中）
  • 创建时间：160px（居中）
  • 操作：200px（居中）

3. 样式规范

3.1 配色方案

用途 颜色 色值
主色调 蓝色 #1890ff
成功色 绿色 #52c41a
警告色 红色 #f5222d
主要文字 深灰色 #333333
次要文字 中灰色 #909399
背景色 浅灰色 #f5f5f5
卡片背景 白色 #ffffff

3.2 间距规范

  • 页面边距：16px
  • 卡片内边距：12px - 20px
  • 元素间距：12px
  • 按钮间距：8px
  • 表格单元格内边距：12px

3.3 字体规范

  • 标题：18px，font-weight: 500
  • 副标题：13px，font-weight: 400
  • 表头：14px，font-weight: 600
  • 正文：14px，font-weight: 400
  • 小文字：12px

3.4 圆角与阴影

  • 卡片圆角：4px
  • 按钮圆角：4px
  • 标签圆角：4px
  • 阴影：0 1px 4px rgba(0, 0, 0, 0.08)

3.5 交互效果

按钮悬停：

  • 蓝色按钮：背景色 → #096dd9
  • 文字链接：添加下划线，颜色 → #096dd9

表格行悬停：

  • 背景色 → #f5f5f5
  • 过渡时间：0.3s

技术实现方案

需要修改的文件

  1. SearchBar.vue

    • 路径：ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue
    • 修改内容：
      • 添加重置按钮
      • 调整布局结构（将搜索按钮移出输入框）
      • 优化样式和间距

  2. ProjectTable.vue

    • 路径：ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
    • 修改内容：
      • 状态列宽度调整为 160px
      • 状态列添加图标渲染
      • 操作列实现条件渲染逻辑
      • 优化表格样式（表头、行高、悬停效果）

  3. index.vue

    • 路径：ruoyi-ui/src/views/ccdiProject/index.vue
    • 修改内容：
      • 添加重置功能的处理方法（如果需要）
      • 确认所有操作按钮的事件处理已实现

关键代码逻辑

1. 搜索栏重置功能

// SearchBar.vue
handleReset() {
  this.searchKeyword = ''
  this.selectedStatus = ''
  this.$emit('query', {
    projectName: null,
    status: null
  })
}

2. 操作按钮条件渲染

<!-- ProjectTable.vue -->
<template slot-scope="scope">
  <!-- 进行中状态 -->
  <el-button
    v-if="scope.row.status === '0'"
    size="mini"
    type="text"
    icon="el-icon-right"
    @click="handleEnter(scope.row)"
  >进入项目</el-button>

  <!-- 已完成状态 -->
  <template v-if="scope.row.status === '1'">
    <el-button
      size="mini"
      type="text"
      icon="el-icon-view"
      @click="handleViewResult(scope.row)"
    >查看结果</el-button>
    <el-button
      size="mini"
      type="text"
      icon="el-icon-refresh"
      @click="handleReAnalyze(scope.row)"
    >重新分析</el-button>
    <el-button
      size="mini"
      type="text"
      icon="el-icon-folder"
      @click="handleArchive(scope.row)"
    >归档</el-button>
  </template>

  <!-- 已归档状态 -->
  <el-button
    v-if="scope.row.status === '2'"
    size="mini"
    type="text"
    icon="el-icon-view"
    @click="handleViewResult(scope.row)"
  >查看结果</el-button>
</template>

3. 状态列图标渲染

<!-- ProjectTable.vue -->
<el-table-column
  prop="status"
  label="项目状态"
  width="160"
  align="center"
>
  <template slot-scope="scope">
    <el-tag :type="getStatusType(scope.row.status)">
      <dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
    </el-tag>
  </template>
</el-table-column>

4. 表格样式优化

// ProjectTable.vue - scoped styles
.project-table-container {
  :deep(.el-table) {
    // 表头样式
    th {
      background-color: #f5f5f5;
      color: #333;
      font-weight: 600;
      font-size: 14px;
      height: 48px;
      padding: 12px;
    }

    // 数据行样式
    td {
      color: #333;
      font-size: 14px;
      height: 50px;
      padding: 12px;
    }

    // 悬停效果
    .el-table__row:hover > td {
      background-color: #f5f5f5 !important;
      transition: background-color 0.3s;
    }
  }
}

// 操作按钮样式
:deep(.el-button--text) {
  color: #1890ff;

  &:hover {
    color: #096dd9;
    text-decoration: underline;
  }
}

实现步骤

  1. 修改 SearchBar 组件

    • 添加重置按钮的模板和事件处理
    • 调整布局，将搜索按钮移出输入框
    • 优化样式和间距

  2. 修改 ProjectTable 组件

    • 调整状态列宽度为 160px
    • 实现操作按钮的条件渲染逻辑
    • 优化表格样式（表头、行高、悬停效果）

  3. 更新 index.vue

    • 确认所有操作按钮的事件处理方法已实现
    • 测试重置功能

  4. 统一调整样式

    • 确保所有组件的配色、间距、字体一致
    • 测试视觉效果是否匹配参考截图

测试要点

功能测试

  • 搜索功能正常（项目名称、状态筛选）
  • 重置按钮清空所有条件并刷新列表
  • 操作按钮根据状态正确显示
  • 所有操作按钮的点击事件正常触发

视觉测试

  • 表格行高、间距符合设计
  • 表头样式正确（背景色、字体、高度）
  • 悬停效果正常
  • 状态列图标和颜色正确
  • 操作按钮颜色、间距、悬停效果正确
  • 整体配色、圆角、阴影符合设计规范

兼容性测试

  • Chrome 浏览器测试
  • Edge 浏览器测试
  • 不同屏幕分辨率测试（1366x768、1920x1080）

风险评估

风险 影响 缓解措施
样式冲突 中 使用 scoped style，避免全局样式污染
现有功能受影响 低 只修改样式和条件渲染，不改变数据逻辑
浏览器兼容性 低 使用 Element UI 标准组件，兼容性好

后续优化建议

  1. 性能优化：如果项目列表数据量大，考虑添加虚拟滚动
  2. 用户体验：添加加载动画和空状态提示
  3. 响应式设计：适配移动端设备（如有需求）
  4. 无障碍访问：添加 ARIA 标签，提升可访问性

参考资源

  • 参考截图：doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png
  • Element UI 文档：https://element.eleme.cn/
  • 项目 CLAUDE.md 文件
Reference in New Issue View Git Blame Copy Permalink