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 布局和间距

样式对比：

修改前：

.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);  // 移除
}

修改后：

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

结构对比：

修改前：

<el-input v-model="searchKeyword" placeholder="请输入关键词搜索项目" clearable>
  <i slot="suffix" class="el-icon-search search-icon" @click="handleSearch" />
</el-input>

修改后：

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

样式调整：

.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 样式修改

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  // 移除背景、圆角、阴影
}

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