wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8a75a34242f228fa9dd6b1fba107ab41017d8278
ccdi/doc/plans/2026-02-28-project-list-ui-optimization.md
wkc 9b5f4d6a41 docs: 添加项目列表页面UI优化实施计划 
- Task 1: 修改页面标题样式
- Task 2: 修改搜索区域结构和样式
- Task 3: 启动前端服务进行测试
- Task 4: 创建测试报告
- Task 5: 推送代码到远程仓库
2026-02-28 10:42:35 +08:00

9.4 KiB
Raw Blame History

项目列表页面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);

修改后的样式：

.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: 提交修改

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 行）：

<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>

修改后的结构：

<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 行），更新样式：

移除以下样式：

.search-icon {
  cursor: pointer;
  color: #909399;
  transition: color 0.2s;
  margin-right: 8px;

  &:hover {
    color: #3B82F6;
  }
}

添加新的样式：

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

完整的样式部分应该是：

.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: 提交修改

git add ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue
git commit -m "feat: 添加独立搜索按钮，移除输入框内搜索图标"

Task 3: 启动前端服务进行测试

Files:

  • Test: 浏览器手动测试

Step 1: 启动前端开发服务器

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: 编写测试报告内容

# 项目列表页面 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: 提交测试报告

git add doc/test-scripts/2026-02-28-project-list-ui-test-report.md
git commit -m "docs: 添加项目列表页面UI优化测试报告"

Task 5: 推送代码到远程仓库

Step 1: 推送所有提交

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
Reference in New Issue View Git Blame Copy Permalink