From ef4cdb26d1dabe31a2b251bef5ff95df7c247cfa Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Sat, 28 Feb 2026 10:40:35 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2UI=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 简化页面标题样式，移除卡片背景 - 优化搜索区域，添加独立搜索按钮 - 保持表格表头现有样式 --- ...-28-project-list-ui-optimization-design.md | 245 ++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 doc/plans/2026-02-28-project-list-ui-optimization-design.md diff --git a/doc/plans/2026-02-28-project-list-ui-optimization-design.md b/doc/plans/2026-02-28-project-list-ui-optimization-design.md new file mode 100644 index 0000000..0cc9ca3 --- /dev/null +++ b/doc/plans/2026-02-28-project-list-ui-optimization-design.md @@ -0,0 +1,245 @@ +# 项目列表页面UI优化设计文档 + +**文档版本**: 1.0 +**创建日期**: 2026-02-28 +**创建人**: Claude Code +**状态**: 已确认 + +--- + +## 1. 概述 + +### 1.1 背景 +根据原型图 `ScreenShot_2026-02-27_111611_994.png`，对项目列表页面（`ccdiProject/index.vue`）进行 UI 优化，使其更符合扁平化设计风格。 + +### 1.2 目标 +- 简化页面标题样式，去掉卡片式装饰 +- 优化搜索区域，添加独立的搜索按钮 +- 保持表格表头现有样式 + +### 1.3 影响范围 +- 页面：`ruoyi-ui/src/views/ccdiProject/index.vue` +- 组件：`ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue` + +--- + +## 2. 设计方案 + +### 2.1 方案选择 +采用**最小改动方案**，只修改必要的样式和结构，降低风险。 + +### 2.2 详细设计 + +#### 2.2.1 页面标题修改 + +**当前实现：** +- 标题区域使用卡片式设计（白色背景、圆角、阴影） +- 字体大小：20px +- 字体粗细：500 + +**修改内容：** +- 移除白色背景 +- 移除圆角（border-radius） +- 移除阴影（box-shadow） +- 保留字体大小和粗细 +- 保留 flex 布局和间距 + +**样式对比：** + +修改前： +```scss +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + padding: 16px 20px; + background: #ffffff; // 移除 + border-radius: 8px; // 移除 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); // 移除 +} +``` + +修改后： +```scss +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + // 移除 background、border-radius、box-shadow +} +``` + +#### 2.2.2 搜索按钮修改 + +**当前实现：** +- 搜索图标位于输入框内部（suffix slot） +- 通过点击图标或回车触发搜索 + +**修改内容：** +- 移除输入框内的搜索图标 +- 在输入框外部添加独立的搜索按钮 +- 按钮与输入框使用 flex 布局组合 +- 按钮高度与输入框一致（40px） + +**结构对比：** + +修改前： +```vue + + + +``` + +修改后： +```vue +
+ + 搜索 +
+``` + +**样式调整：** +```scss +.search-input-wrapper { + display: flex; + align-items: center; + gap: 8px; +} + +.search-input { + width: 240px; + height: 40px; +} +``` + +#### 2.2.3 表格表头样式 + +**当前实现：** +- 透明背景（background-color: transparent） +- 深色加粗文字（font-weight: 600, color: #333） +- 底部 2px 分隔线 + +**修改内容：** +- 保持不变，已符合需求 + +--- + +## 3. 用户体验改进 + +### 3.1 视觉层次 +- 页面标题扁平化，减少视觉干扰 +- 搜索按钮独立显示，操作更明确 + +### 3.2 交互优化 +- 搜索按钮支持点击触发搜索 +- 保留回车和清空触发搜索的功能 + +--- + +## 4. 技术实现 + +### 4.1 文件修改清单 + +| 文件路径 | 修改类型 | 修改内容 | +|---------|---------|---------| +| `ccdiProject/index.vue` | 样式修改 | 移除 `.page-header` 的背景、圆角、阴影 | +| `ccdiProject/components/SearchBar.vue` | 结构+样式修改 | 移除搜索图标，添加独立搜索按钮 | + +### 4.2 关键代码 + +#### index.vue 样式修改 +```scss +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + // 移除背景、圆角、阴影 +} +``` + +#### SearchBar.vue 结构修改 +```vue +
+
+ + 搜索 +
+ +
+ +
+
+``` + +--- + +## 5. 测试要点 + +### 5.1 功能测试 +- [ ] 搜索按钮点击触发搜索 +- [ ] 输入框回车触发搜索 +- [ ] 输入框清空触发搜索 +- [ ] 标签页切换正常工作 + +### 5.2 样式测试 +- [ ] 页面标题扁平化，无背景、圆角、阴影 +- [ ] 搜索按钮与输入框同高（40px） +- [ ] 搜索按钮与输入框间距 8px +- [ ] 表格表头样式保持不变 + +### 5.3 兼容性测试 +- [ ] Chrome 浏览器 +- [ ] Firefox 浏览器 +- [ ] Edge 浏览器 + +--- + +## 6. 风险评估 + +### 6.1 技术风险 +- **低风险**：只修改样式和少量 HTML 结构 +- **无后端影响**：不涉及 API 调用 + +### 6.2 兼容性风险 +- **低风险**：使用标准的 Element UI 组件和 CSS flex 布局 + +--- + +## 7. 实施计划 + +### 7.1 开发任务 +1. 修改 `index.vue` 的页面标题样式 +2. 修改 `SearchBar.vue` 的搜索区域结构和样式 +3. 本地测试验证 + +### 7.2 预计工作量 +- 开发时间：0.5 小时 +- 测试时间：0.5 小时 + +--- + +## 8. 参考资料 + +- 原型图：`doc/创建项目功能/ScreenShot_2026-02-27_111611_994.png` +- 当前代码：`ruoyi-ui/src/views/ccdiProject/index.vue` +- 搜索组件：`ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue` +- 表格组件：`ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`