diff --git a/docs/plans/2026-02-27-project-management-ux-improvements-design.md b/docs/plans/2026-02-27-project-management-ux-improvements-design.md
new file mode 100644
index 0000000..243e40c
--- /dev/null
+++ b/docs/plans/2026-02-27-project-management-ux-improvements-design.md
@@ -0,0 +1,250 @@
+# 项目管理页面交互改进设计文档
+
+**日期**: 2026-02-27
+**模块**: 初核项目管理 (ccdiProject)
+**作者**: Claude Code
+
+## 概述
+
+本文档描述了项目管理页面的三个交互改进：搜索框按钮、状态标签简约化和分页 loading 效果。
+
+## 改进项目
+
+### 1. 搜索框添加搜索按钮
+
+#### 当前状态
+- 搜索框只支持回车键搜索和清空按钮
+- 没有明确的搜索按钮，用户可能不知道如何触发搜索
+
+#### 改进方案
+- 在输入框内右侧添加一个可点击的搜索图标按钮
+- 使用 Element UI 的 `suffix` 插槽实现
+- 图标使用 `el-icon-search`
+- 点击图标触发 `handleSearch` 方法，与回车键效果一致
+
+#### 实现位置
+- 文件: `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`
+- 行数: 第 3-12 行（el-input 组件）
+
+#### 技术细节
+```vue
+
+
+
+```
+
+#### 样式
+```scss
+.search-icon {
+ cursor: pointer;
+ color: #909399;
+ transition: color 0.2s;
+
+ &:hover {
+ color: #3B82F6;
+ }
+}
+```
+
+---
+
+### 2. 状态标签简约化
+
+#### 当前状态
+- 使用 `el-tag` 组件显示状态
+- 有背景色：蓝色（进行中）、绿色（已完成）、灰色（已归档）
+- 视觉上较为突出，占用空间较大
+
+#### 改进方案
+- 移除 `el-tag` 组件，使用自定义简约样式
+- GitHub 风格标签：左侧彩色圆点 + 右侧文字
+- 无背景色，无边框
+- 圆点颜色：
+ - 进行中 (`status='0'`): 蓝色 `#1890ff`
+ - 已完成 (`status='1'`): 绿色 `#52c41a`
+ - 已归档 (`status='2'`): 灰色 `#8c8c8c`
+
+#### 实现位置
+- 文件: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+- 行数: 第 43-54 行（状态列）
+
+#### 技术细节
+```vue
+
+
+
+ ●
+
+
+
+
+```
+
+#### 新增方法
+```javascript
+getStatusColor(status) {
+ const colorMap = {
+ '0': '#1890ff', // 进行中 - 蓝色
+ '1': '#52c41a', // 已完成 - 绿色
+ '2': '#8c8c8c' // 已归档 - 灰色
+ }
+ return colorMap[status] || '#8c8c8c'
+}
+```
+
+#### 样式
+```scss
+.status-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+
+ .status-dot {
+ font-size: 10px;
+ line-height: 1;
+ }
+}
+```
+
+---
+
+### 3. 分页 loading 效果
+
+#### 当前状态
+- 分页切换时调用 `getList()` 方法
+- `getList()` 内部会设置 `loading = true`
+- `el-table` 有 `:loading="loading"` 属性绑定
+- 理论上应该显示 loading 效果
+
+#### 改进方案
+- 确认 `el-table` 的 loading 属性正确绑定
+- 确保分页切换时 loading 状态正确设置
+- Element UI 会自动显示表格遮罩层和加载动画
+
+#### 实现位置
+- 文件: `ruoyi-ui/src/views/ccdiProject/index.vue`
+ - `handlePagination` 方法（第 155-161 行）
+ - `getList` 方法（第 122-134 行）
+- 文件: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
+ - `el-table` 组件（第 3-7 行）
+
+#### 技术细节
+
+**index.vue - 分页处理**
+```javascript
+handlePagination(pagination) {
+ if (pagination) {
+ this.queryParams.pageNum = pagination.pageNum
+ this.queryParams.pageSize = pagination.pageSize
+ }
+ this.getList() // 开始加载，loading = true
+}
+```
+
+**index.vue - 数据加载**
+```javascript
+getList() {
+ this.loading = true // 立即显示 loading
+ listProject(this.queryParams).then(response => {
+ this.projectList = response.rows
+ this.total = response.total
+ this.loading = false // 加载完成，隐藏 loading
+ this.calculateTabCounts()
+ }).catch(() => {
+ this.loading = false // 加载失败，隐藏 loading
+ })
+}
+```
+
+**ProjectTable.vue - 表格绑定**
+```vue
+
+```
+
+#### 验证要点
+- 分页切换时，表格应立即显示半透明遮罩层
+- 遮罩层中央显示加载图标和"加载中..."文字
+- 数据加载完成后，遮罩层自动消失
+
+---
+
+## 视觉效果对比
+
+### 搜索框
+- **改进前**: 只有输入框，用户不知道如何触发搜索
+- **改进后**: 输入框右侧有可点击的搜索图标，鼠标悬停时变蓝色
+
+### 状态标签
+- **改进前**: 彩色背景标签，视觉突出
+- **改进后**: 简约的圆点+文字，更轻量现代
+
+### 分页 loading
+- **改进前**: 分页切换时无明显反馈
+- **改进后**: 表格显示 loading 遮罩，明确告知用户正在加载
+
+---
+
+## 兼容性
+
+- 所有改进基于现有 Element UI 组件，无需引入新的依赖
+- 保持与现有代码风格一致
+- 不影响其他功能模块
+
+---
+
+## 测试要点
+
+1. **搜索按钮**:
+ - 点击搜索图标，应触发搜索
+ - 图标悬停时变蓝色
+ - 回车键仍然有效
+
+2. **状态标签**:
+ - 三种状态显示正确的圆点颜色
+ - 文字显示正常
+ - 标签对齐居中
+
+3. **分页 loading**:
+ - 切换分页时，表格显示 loading
+ - 数据加载完成后，loading 消失
+ - 加载失败时，loading 也应消失
+
+---
+
+## 实施步骤
+
+1. 修改 `SearchBar.vue`，添加搜索图标按钮
+2. 修改 `ProjectTable.vue`，实现简约状态标签
+3. 验证 `index.vue` 和 `ProjectTable.vue` 的 loading 绑定
+4. 测试三个改进点的功能
+5. 生成测试报告
+
+---
+
+## 文件清单
+
+- `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue` - 搜索框改进
+- `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue` - 状态标签和 loading 验证
+- `ruoyi-ui/src/views/ccdiProject/index.vue` - loading 逻辑验证