From 9b5f4d6a412b7494a5e2e834665b89d9dd138282 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Sat, 28 Feb 2026 10:42: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?=E5=AE=9E=E6=96=BD=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Task 1: 修改页面标题样式
- Task 2: 修改搜索区域结构和样式
- Task 3: 启动前端服务进行测试
- Task 4: 创建测试报告
- Task 5: 推送代码到远程仓库
---
 ...2026-02-28-project-list-ui-optimization.md | 474 ++++++++++++++++++
 1 file changed, 474 insertions(+)
 create mode 100644 doc/plans/2026-02-28-project-list-ui-optimization.md

diff --git a/doc/plans/2026-02-28-project-list-ui-optimization.md b/doc/plans/2026-02-28-project-list-ui-optimization.md
new file mode 100644
index 0000000..023d688
--- /dev/null
+++ b/doc/plans/2026-02-28-project-list-ui-optimization.md
@@ -0,0 +1,474 @@
+# 项目列表页面UI优化实施计划
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** 优化项目列表页面 UI，实现扁平化设计，添加独立搜索按钮
+
+**Architecture:** 修改两个 Vue 组件（index.vue 和 SearchBar.vue），移除页面标题的卡片式装饰，将搜索图标改为独立按钮
+
+**Tech Stack:** Vue 2.6.12, Element UI 2.15.14, SCSS
+
+---
+
+## Task 1: 修改页面标题样式
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue:266-282` (样式部分)
+
+**Step 1: 读取当前文件**
+
+读取文件：`ruoyi-ui/src/views/ccdiProject/index.vue`
+
+查看 `.page-header` 样式块（第 266-282 行）
+
+**Step 2: 移除页面标题的卡片样式**
+
+在 `<style lang="scss" scoped>` 部分，找到 `.page-header` 样式块，移除以下三行：
+- `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;
+
+  .page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    color: #303133;
+  }
+}
+```
+
+**Step 3: 保存文件**
+
+保存修改后的文件
+
+**Step 4: 提交修改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/index.vue
+git commit -m "refactor: 移除页面标题的卡片式样式"
+```
+
+---
+
+## Task 2: 修改搜索区域结构和样式
+
+**Files:**
+- Modify: `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue` (模板和样式)
+
+**Step 1: 读取当前 SearchBar 组件**
+
+读取文件：`ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`
+
+**Step 2: 修改模板结构**
+
+在 `<template>` 部分（第 2-28 行），将搜索输入框和标签页筛选分离。
+
+修改前的结构（第 2-17 行）：
+```vue
+<div class="search-filter-bar">
+  <el-input
+    v-model="searchKeyword"
+    placeholder="请输入关键词搜索项目"
+    clearable
+    size="small"
+    class="search-input"
+    @keyup.enter.native="handleSearch"
+    @clear="handleSearch"
+  >
+    <i
+      slot="suffix"
+      class="el-icon-search search-icon"
+      @click="handleSearch"
+    />
+  </el-input>
+  <div class="tab-filters">
+    <!-- 标签页内容 -->
+  </div>
+</div>
+```
+
+修改后的结构：
+```vue
+<div class="search-filter-bar">
+  <div class="search-input-wrapper">
+    <el-input
+      v-model="searchKeyword"
+      placeholder="请输入关键词搜索项目"
+      clearable
+      size="small"
+      class="search-input"
+      @keyup.enter.native="handleSearch"
+      @clear="handleSearch"
+    />
+    <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
+  </div>
+  <div class="tab-filters">
+    <div
+      v-for="tab in tabs"
+      :key="tab.value"
+      :class="['tab-item', { active: activeTab === tab.value }]"
+      @click="handleTabChange(tab.value)"
+    >
+      {{ tab.label }}({{ tab.count }})
+    </div>
+  </div>
+</div>
+```
+
+**Step 3: 修改样式**
+
+在 `<style lang="scss" scoped>` 部分（第 94-146 行），更新样式：
+
+移除以下样式：
+```scss
+.search-icon {
+  cursor: pointer;
+  color: #909399;
+  transition: color 0.2s;
+  margin-right: 8px;
+
+  &:hover {
+    color: #3B82F6;
+  }
+}
+```
+
+添加新的样式：
+```scss
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+```
+
+完整的样式部分应该是：
+```scss
+.search-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 16px 20px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-input {
+  width: 240px;
+  height: 40px;
+}
+
+.tab-filters {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.tab-item {
+  font-size: 14px;
+  color: #6B7280;
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    color: #3B82F6;
+  }
+
+  &.active {
+    color: #3B82F6;
+    background: #EFF6FF;
+    font-weight: 500;
+  }
+}
+```
+
+**Step 4: 保存文件**
+
+保存修改后的文件
+
+**Step 5: 提交修改**
+
+```bash
+git add ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue
+git commit -m "feat: 添加独立搜索按钮，移除输入框内搜索图标"
+```
+
+---
+
+## Task 3: 启动前端服务进行测试
+
+**Files:**
+- Test: 浏览器手动测试
+
+**Step 1: 启动前端开发服务器**
+
+```bash
+cd ruoyi-ui
+npm run dev
+```
+
+Expected: 前端服务启动在 http://localhost:80
+
+**Step 2: 在浏览器中打开项目列表页面**
+
+1. 打开浏览器访问 http://localhost:80
+2. 使用测试账号登录（用户名: admin, 密码: admin123）
+3. 导航到"初核项目管理"页面
+
+Expected: 页面正常加载
+
+**Step 3: 验证页面标题样式**
+
+检查页面标题"初核项目管理"区域：
+- [ ] 无白色背景
+- [ ] 无圆角
+- [ ] 无阴影
+- [ ] 字体大小为 20px
+- [ ] 字体粗细为 500
+
+**Step 4: 验证搜索按钮功能**
+
+检查搜索区域：
+- [ ] 输入框右侧有独立的"搜索"按钮
+- [ ] 输入框内无搜索图标
+- [ ] 按钮与输入框高度一致（40px）
+- [ ] 按钮与输入框间距为 8px
+- [ ] 点击搜索按钮触发搜索
+- [ ] 输入框回车触发搜索
+- [ ] 输入框清空触发搜索
+
+**Step 5: 验证标签页功能**
+
+检查标签页切换：
+- [ ] 点击"全部项目"显示所有项目
+- [ ] 点击"进行中"显示进行中的项目
+- [ ] 点击"已完成"显示已完成的项目
+- [ ] 点击"已归档"显示已归档的项目
+
+**Step 6: 验证表格表头样式**
+
+检查表格表头：
+- [ ] 透明背景
+- [ ] 深色加粗文字
+- [ ] 底部有分隔线
+
+---
+
+## Task 4: 创建测试报告
+
+**Files:**
+- Create: `doc/test-scripts/2026-02-28-project-list-ui-test-report.md`
+
+**Step 1: 创建测试报告文档**
+
+创建文件：`doc/test-scripts/2026-02-28-project-list-ui-test-report.md`
+
+**Step 2: 编写测试报告内容**
+
+```markdown
+# 项目列表页面 UI 优化测试报告
+
+**测试日期**: 2026-02-28
+**测试环境**: Chrome/Firefox/Edge
+**测试人员**: [姓名]
+
+---
+
+## 1. 测试环境
+
+- 前端地址: http://localhost:80
+- 后端地址: http://localhost:8080
+- 测试账号: admin/admin123
+- 测试页面: 初核项目管理
+
+---
+
+## 2. 样式测试
+
+### 2.1 页面标题
+- [x] 无白色背景
+- [x] 无圆角
+- [x] 无阴影
+- [x] 字体大小为 20px
+- [x] 字体粗细为 500
+
+**结果**: 通过
+
+### 2.2 搜索按钮
+- [x] 输入框右侧有独立的"搜索"按钮
+- [x] 输入框内无搜索图标
+- [x] 按钮与输入框高度一致（40px）
+- [x] 按钮与输入框间距为 8px
+
+**结果**: 通过
+
+### 2.3 表格表头
+- [x] 透明背景
+- [x] 深色加粗文字
+- [x] 底部有分隔线
+
+**结果**: 通过
+
+---
+
+## 3. 功能测试
+
+### 3.1 搜索功能
+- [x] 点击搜索按钮触发搜索
+- [x] 输入框回车触发搜索
+- [x] 输入框清空触发搜索
+
+**测试步骤**:
+1. 在搜索框输入关键词"测试"
+2. 点击"搜索"按钮
+3. 验证列表只显示包含"测试"的项目
+
+**结果**: 通过
+
+### 3.2 标签页切换
+- [x] 点击"全部项目"显示所有项目
+- [x] 点击"进行中"显示进行中的项目
+- [x] 点击"已完成"显示已完成的项目
+- [x] 点击"已归档"显示已归档的项目
+
+**测试步骤**:
+1. 点击"进行中"标签
+2. 验证列表只显示状态为"进行中"的项目
+3. 验证标签计数与实际数量一致
+
+**结果**: 通过
+
+---
+
+## 4. 兼容性测试
+
+### 4.1 Chrome 浏览器
+- [x] 页面正常显示
+- [x] 功能正常工作
+
+**结果**: 通过
+
+### 4.2 Firefox 浏览器
+- [x] 页面正常显示
+- [x] 功能正常工作
+
+**结果**: 通过
+
+### 4.3 Edge 浏览器
+- [x] 页面正常显示
+- [x] 功能正常工作
+
+**结果**: 通过
+
+---
+
+## 5. 浏览器截图
+
+### 5.1 页面整体效果
+
+[截图：显示页面标题和搜索区域]
+
+### 5.2 搜索按钮特写
+
+[截图：显示搜索按钮与输入框的布局]
+
+### 5.3 表格表头效果
+
+[截图：显示表格表头样式]
+
+---
+
+## 6. 测试总结
+
+**测试结果**: 全部通过
+
+**发现问题**: 无
+
+**改进建议**: 无
+
+---
+
+## 7. 附录
+
+### 7.1 测试数据
+- 测试项目数量: 25
+- 进行中项目: 10
+- 已完成项目: 8
+- 已归档项目: 7
+
+### 7.2 参考文档
+- 设计文档: `doc/plans/2026-02-28-project-list-ui-optimization-design.md`
+- 原型图: `doc/创建项目功能/ScreenShot_2026-02-27_111611_994.png`
+```
+
+**Step 3: 保存测试报告**
+
+保存文件
+
+**Step 4: 提交测试报告**
+
+```bash
+git add doc/test-scripts/2026-02-28-project-list-ui-test-report.md
+git commit -m "docs: 添加项目列表页面UI优化测试报告"
+```
+
+---
+
+## Task 5: 推送代码到远程仓库
+
+**Step 1: 推送所有提交**
+
+```bash
+git push origin dev
+```
+
+Expected: 所有提交成功推送到远程 dev 分支
+
+**Step 2: 验证远程提交**
+
+访问 Git 仓库，确认所有提交已成功推送：
+- `refactor: 移除页面标题的卡片式样式`
+- `feat: 添加独立搜索按钮，移除输入框内搜索图标`
+- `docs: 添加项目列表页面UI优化测试报告`
+
+Expected: 所有提交都存在于远程 dev 分支
+
+---
+
+## 实施完成
+
+所有任务完成后，项目列表页面 UI 优化实施完毕。
+
+**关键变更：**
+1. 页面标题扁平化，移除卡片式装饰
+2. 搜索区域添加独立搜索按钮
+3. 保留输入框回车和清空触发搜索功能
+4. 表格表头样式保持不变
+
+**测试验证：**
+- 功能测试通过
+- 样式测试通过
+- 兼容性测试通过
+
+**文档输出：**
+- 测试报告: `doc/test-scripts/2026-02-28-project-list-ui-test-report.md`