wkc/ccdi

Files

wkc ef4cdb26d1 docs: 添加项目列表页面UI优化设计文档

- 简化页面标题样式，移除卡片背景
- 优化搜索区域，添加独立搜索按钮
- 保持表格表头现有样式

2026-02-28 10:40:35 +08:00

5.5 KiB

Raw Blame History

项目列表页面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 开发任务

修改 index.vue 的页面标题样式
修改 SearchBar.vue 的搜索区域结构和样式
本地测试验证

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

5.5 KiB Raw Blame History Unescape Escape

项目列表页面UI优化设计文档

1. 概述

1.1 背景

1.2 目标

1.3 影响范围

2. 设计方案

2.1 方案选择

2.2 详细设计

2.2.1 页面标题修改

2.2.2 搜索按钮修改

2.2.3 表格表头样式

3. 用户体验改进

3.1 视觉层次

3.2 交互优化

4. 技术实现

4.1 文件修改清单

4.2 关键代码

index.vue 样式修改

SearchBar.vue 结构修改

5. 测试要点

5.1 功能测试

5.2 样式测试

5.3 兼容性测试

6. 风险评估

6.1 技术风险

6.2 兼容性风险

7. 实施计划

7.1 开发任务

7.2 预计工作量

8. 参考资料

5.5 KiB

Raw Blame History