Compare commits
8 Commits
e17f0bf42a
...
2190d2f2d1
| Author | SHA1 | Date | |
|---|---|---|---|
| 2190d2f2d1 | |||
| e388da627e | |||
| 897b5a39f0 | |||
| f9cf7e9f86 | |||
| bcabc2a240 | |||
| fa28351ac2 | |||
| 9b5f4d6a41 | |||
| ef4cdb26d1 |
245
doc/plans/2026-02-28-project-list-ui-optimization-design.md
Normal file
245
doc/plans/2026-02-28-project-list-ui-optimization-design.md
Normal file
@@ -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
|
||||
<el-input v-model="searchKeyword" placeholder="请输入关键词搜索项目" clearable>
|
||||
<i slot="suffix" class="el-icon-search search-icon" @click="handleSearch" />
|
||||
</el-input>
|
||||
```
|
||||
|
||||
修改后：
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
**样式调整：**
|
||||
```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
|
||||
<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>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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`
|
||||
474
doc/plans/2026-02-28-project-list-ui-optimization.md
Normal file
474
doc/plans/2026-02-28-project-list-ui-optimization.md
Normal file
@@ -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`
|
||||
197
doc/test-scripts/2026-02-28-project-list-ui-test-report.md
Normal file
197
doc/test-scripts/2026-02-28-project-list-ui-test-report.md
Normal file
@@ -0,0 +1,197 @@
|
||||
# 项目列表页面 UI 优化测试报告
|
||||
|
||||
**测试日期**: 2026-02-28
|
||||
**测试环境**: Chrome/Firefox/Edge
|
||||
**测试人员**: [待填写]
|
||||
|
||||
---
|
||||
|
||||
## 1. 测试环境
|
||||
|
||||
- 前端地址: http://localhost:80
|
||||
- 后端地址: http://localhost:8080
|
||||
- 测试账号: admin/admin123
|
||||
- 测试页面: 初核项目管理
|
||||
|
||||
---
|
||||
|
||||
## 2. 样式测试
|
||||
|
||||
### 2.1 页面标题
|
||||
- [ ] 无白色背景
|
||||
- [ ] 无圆角
|
||||
- [ ] 无阴影
|
||||
- [ ] 字体大小为 20px
|
||||
- [ ] 字体粗细为 500
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
### 2.2 搜索按钮
|
||||
- [ ] 输入框右侧有独立的"搜索"按钮
|
||||
- [ ] 输入框内无搜索图标
|
||||
- [ ] 按钮与输入框高度一致
|
||||
- [ ] 按钮与输入框间距为 8px
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
### 2.3 表格样式
|
||||
- [ ] 表格无白色卡片背景
|
||||
- [ ] 表格无圆角
|
||||
- [ ] 表格无阴影
|
||||
- [ ] 表头透明背景（显示页面灰色背景）
|
||||
- [ ] 表头深色加粗文字
|
||||
- [ ] 表头底部有分隔线
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
---
|
||||
|
||||
## 3. 功能测试
|
||||
|
||||
### 3.1 搜索功能
|
||||
- [ ] 点击搜索按钮触发搜索
|
||||
- [ ] 输入框回车触发搜索
|
||||
- [ ] 输入框清空触发搜索
|
||||
|
||||
**测试步骤**:
|
||||
1. 在搜索框输入关键词"测试"
|
||||
2. 点击"搜索"按钮
|
||||
3. 验证列表只显示包含"测试"的项目
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
### 3.2 标签页切换
|
||||
- [ ] 点击"全部项目"显示所有项目
|
||||
- [ ] 点击"进行中"显示进行中的项目
|
||||
- [ ] 点击"已完成"显示已完成的项目
|
||||
- [ ] 点击"已归档"显示已归档的项目
|
||||
|
||||
**测试步骤**:
|
||||
1. 点击"进行中"标签
|
||||
2. 验证列表只显示状态为"进行中"的项目
|
||||
3. 验证标签计数与实际数量一致
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
---
|
||||
|
||||
## 4. 兼容性测试
|
||||
|
||||
### 4.1 Chrome 浏览器
|
||||
- [ ] 页面正常显示
|
||||
- [ ] 功能正常工作
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
### 4.2 Firefox 浏览器
|
||||
- [ ] 页面正常显示
|
||||
- [ ] 功能正常工作
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
### 4.3 Edge 浏览器
|
||||
- [ ] 页面正常显示
|
||||
- [ ] 功能正常工作
|
||||
|
||||
**结果**: [待测试]
|
||||
|
||||
---
|
||||
|
||||
## 5. 浏览器截图
|
||||
|
||||
### 5.1 页面整体效果
|
||||
|
||||
[待添加截图：显示页面标题、搜索区域和表格]
|
||||
|
||||
### 5.2 搜索按钮特写
|
||||
|
||||
[待添加截图：显示搜索按钮与输入框的布局]
|
||||
|
||||
### 5.3 表格表头效果
|
||||
|
||||
[待添加截图：显示表格扁平化设计和透明表头]
|
||||
|
||||
---
|
||||
|
||||
## 6. 测试总结
|
||||
|
||||
**测试结果**: [待填写]
|
||||
|
||||
**发现问题**: [待填写]
|
||||
|
||||
**改进建议**: [待填写]
|
||||
|
||||
---
|
||||
|
||||
## 7. 附录
|
||||
|
||||
### 7.1 实施变更清单
|
||||
|
||||
**文件修改**:
|
||||
1. `ruoyi-ui/src/views/ccdiProject/index.vue`
|
||||
- 移除页面标题的卡片样式（背景、圆角、阴影）
|
||||
|
||||
2. `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`
|
||||
- 移除输入框内搜索图标
|
||||
- 添加独立搜索按钮
|
||||
- 移除输入框固定高度
|
||||
|
||||
3. `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
|
||||
- 移除表格卡片背景（背景、圆角、阴影）
|
||||
|
||||
**Git 提交记录**:
|
||||
- `fa28351` - refactor: 移除页面标题的卡片式样式
|
||||
- `bcabc2a` - feat: 添加独立搜索按钮，移除输入框内搜索图标
|
||||
- `f9cf7e9` - refactor: 移除表格卡片背景,实现扁平化设计
|
||||
|
||||
### 7.2 参考文档
|
||||
- 设计文档: `doc/plans/2026-02-28-project-list-ui-optimization-design.md`
|
||||
- 实施计划: `doc/plans/2026-02-28-project-list-ui-optimization.md`
|
||||
- 原型图: `doc/创建项目功能/ScreenShot_2026-02-27_111611_994.png`
|
||||
|
||||
---
|
||||
|
||||
## 8. 测试说明
|
||||
|
||||
### 8.1 如何开始测试
|
||||
|
||||
1. **启动后端服务**（如果未运行）:
|
||||
```bash
|
||||
cd D:/ccdi/ccdi
|
||||
mvn spring-boot:run
|
||||
# 或运行 ry.bat
|
||||
```
|
||||
|
||||
2. **启动前端服务**（如果未运行）:
|
||||
```bash
|
||||
cd ruoyi-ui
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **访问测试页面**:
|
||||
- 打开浏览器访问 http://localhost:80
|
||||
- 使用账号 admin/admin123 登录
|
||||
- 导航到"初核项目管理"页面
|
||||
|
||||
### 8.2 验收标准
|
||||
|
||||
**视觉验收**:
|
||||
- 页面标题扁平化，无卡片装饰
|
||||
- 搜索区域有独立按钮
|
||||
- 表格扁平化，无卡片背景
|
||||
- 表头透明，显示页面背景色
|
||||
- 整体风格统一，简洁现代
|
||||
|
||||
**功能验收**:
|
||||
- 搜索功能正常（按钮、回车、清空）
|
||||
- 标签页切换正常
|
||||
- 表格数据正常显示
|
||||
- 分页功能正常
|
||||
|
||||
### 8.3 测试完成标志
|
||||
|
||||
- [ ] 所有样式测试通过
|
||||
- [ ] 所有功能测试通过
|
||||
- [ ] 至少在一个浏览器中测试通过
|
||||
- [ ] 截图已添加到本报告
|
||||
- [ ] 测试总结已填写
|
||||
@@ -73,7 +73,7 @@
|
||||
>
|
||||
{{ isUploading ? '导入中...' : '开始导入' }}
|
||||
</el-button>
|
||||
<el-button icon="el-icon-close" @click="visible = false" :disabled="isUploading">
|
||||
<el-button :disabled="isUploading" icon="el-icon-close" @click="handleCancel">
|
||||
取 消
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -144,6 +144,10 @@ export default {
|
||||
this.isFileSelected = false;
|
||||
this.$emit("close");
|
||||
},
|
||||
handleCancel() {
|
||||
// 通过 $emit 通知父组件更新 visible 状态，而不是直接修改 prop
|
||||
this.$emit('update:visible', false);
|
||||
},
|
||||
handleImportTypeChange() {
|
||||
if (this.$refs.upload) {
|
||||
this.$refs.upload.clearFiles();
|
||||
|
||||
@@ -242,21 +242,13 @@ export default {
|
||||
.project-table-container {
|
||||
margin-top: 16px;
|
||||
|
||||
// 表格整体样式 - Material Design 卡片式
|
||||
// 表格整体样式 - 扁平化设计
|
||||
::v-deep .el-table {
|
||||
// 移除边框，使用阴影
|
||||
// 移除边框和卡片效果，设置透明背景
|
||||
border: none !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: transparent !important;
|
||||
overflow: hidden;
|
||||
|
||||
// 悬停时卡片阴影加深
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
// 表头样式 - 扁平化，无背景色
|
||||
th.el-table__cell {
|
||||
background-color: transparent !important;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="search-filter-bar">
|
||||
<div class="search-input-wrapper">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词搜索项目"
|
||||
@@ -8,13 +9,9 @@
|
||||
class="search-input"
|
||||
@keyup.enter.native="handleSearch"
|
||||
@clear="handleSearch"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
class="el-icon-search search-icon"
|
||||
@click="handleSearch"
|
||||
/>
|
||||
</el-input>
|
||||
<el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
<div class="tab-filters">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
@@ -102,20 +99,15 @@ export default {
|
||||
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;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
transition: color 0.2s;
|
||||
margin-right: 8px;
|
||||
|
||||
&:hover {
|
||||
color: #3B82F6;
|
||||
}
|
||||
// Let Element UI's size="small" control the height naturally
|
||||
}
|
||||
|
||||
.tab-filters {
|
||||
|
||||
@@ -268,10 +268,6 @@ export default {
|
||||
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);
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user