ccdi/doc/plans/2026-02-28-project-list-ui-optimization-design.md

# 项目列表页面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`