wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 添加项目管理首页优化设计文档

Browse Source 
- 搜索栏添加重置按钮并优化布局
- 状态列宽度调整为 160px 并添加图标
- 操作按钮根据项目状态条件显示
- 表格样式优化以匹配参考设计
This commit is contained in:
wkc
2026-02-27 09:32:30 +08:00
parent 474dcab396
commit 982b82e95b
1 changed files with 358 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
doc/plans/2026-02-27-项目管理首页优化-design.md Normal file
View File

@@ -0,0 +1,358 @@
# 项目管理首页优化设计文档
**日期**: 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 文件