359 lines
9.3 KiB
Markdown
359 lines
9.3 KiB
Markdown
# 项目管理首页优化设计文档
|
||
|
||
**日期**: 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 文件
|