From 982b82e95b3f23cc2fc66aa13cbffeb2161ae8c2 Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Fri, 27 Feb 2026 09:32:30 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A6=96=E9=A1=B5=E4=BC=98=E5=8C=96=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 搜索栏添加重置按钮并优化布局 - 状态列宽度调整为 160px 并添加图标 - 操作按钮根据项目状态条件显示 - 表格样式优化以匹配参考设计 --- .../2026-02-27-项目管理首页优化-design.md | 358 ++++++++++++++++++ 1 file changed, 358 insertions(+) create mode 100644 doc/plans/2026-02-27-项目管理首页优化-design.md diff --git a/doc/plans/2026-02-27-项目管理首页优化-design.md b/doc/plans/2026-02-27-项目管理首页优化-design.md new file mode 100644 index 0000000..af5faaa --- /dev/null +++ b/doc/plans/2026-02-27-项目管理首页优化-design.md @@ -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 + + +``` + +#### 3. 状态列图标渲染 + +```vue + + + + +``` + +#### 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 文件