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

**日期**: 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. 搜索栏重置功能

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

#### 2. 操作按钮条件渲染

```vue
<!-- 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. 状态列图标渲染

```vue
<!-- 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. 表格样式优化

```scss
// 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 文件