# 项目管理页面重构实施计划

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 重构项目管理页面，100%匹配原型图设计，包括简化标题、标签页筛选、圆形图标快捷方式、调整列表列顺序和背景色。

**Architecture:** 完全重写前端组件，采用 Vue 2 + Element UI，严格遵循设计规范。页面分为四个区域：标题区、搜索筛选区、项目列表区、快捷方式区。

**Tech Stack:** Vue 2.6.12, Element UI 2.15.14, Sass 1.32.13

---

## Task 1: 备份现有文件

**目的：** 创建当前文件的备份，以便在需要时恢复。

**Step 1: 备份主组件文件**

Run:
```bash
cp ruoyi-ui/src/views/ccdiProject/index.vue ruoyi-ui/src/views/ccdiProject/index.vue.backup
```

Expected: 文件已复制

**Step 2: 备份 SearchBar 组件**

Run:
```bash
cp ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue.backup
```

Expected: 文件已复制

**Step 3: 备份 QuickEntry 组件**

Run:
```bash
cp ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue.backup
```

Expected: 文件已复制

**Step 4: 提交备份**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/*.backup ruoyi-ui/src/views/ccdiProject/components/*.backup
git commit -m "chore: 备份项目管理页面相关组件"
```

Expected: 备份文件已提交

---

## Task 2: 修改页面标题区域

**目的：** 移除副标题，简化页面标题区域。

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue:4-7`

**Step 1: 修改页面标题HTML**

Open `ruoyi-ui/src/views/ccdiProject/index.vue`, find lines 4-7:

```vue
<!-- 页面标题 -->
<div class="page-header">
  <h2 class="page-title">初核项目管理</h2>
  <p class="page-subtitle">管理纪检初核排查项目，跟踪预警信息</p>
</div>
```

Replace with:

```vue
<!-- 页面标题 -->
<div class="page-header">
  <h2 class="page-title">初核项目管理</h2>
  <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建项目</el-button>
</div>
```

**Step 2: 修改页面标题样式**

In the same file, find the `<style>` section (lines 228-255), replace `.page-header` style:

```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);

  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #303133;
  }
}
```

**Step 3: 验证修改**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 浏览器中页面标题区域只显示"初核项目管理"和"新建项目"按钮，无副标题

**Step 4: 提交修改**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/index.vue
git commit -m "feat: 简化项目管理页面标题，移除副标题"
```

Expected: 提交成功

---

## Task 3: 重写 SearchBar 组件 - 创建标签页筛选

**目的:** 重写搜索栏，添加标签页筛选功能，移除状态筛选下拉框。

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`

**Step 1: 重写 SearchBar 模板**

Replace entire `<template>` section in `SearchBar.vue` (lines 1-61) with:

```vue
<template>
  <div class="search-filter-bar">
    <el-input
      v-model="searchKeyword"
      placeholder="请输入关键词搜索项目"
      prefix-icon="el-icon-search"
      clearable
      size="small"
      class="search-input"
      @keyup.enter.native="handleSearch"
      @clear="handleSearch"
    />
    <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>
</template>
```

**Step 2: 更新 SearchBar 脚本**

Replace entire `<script>` section (lines 63-114) with:

```vue
<script>
export default {
  name: 'SearchBar',
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    tabCounts: {
      type: Object,
      default: () => ({
        all: 0,
        ongoing: 0,
        completed: 0,
        archived: 0
      })
    }
  },
  data() {
    return {
      searchKeyword: '',
      activeTab: 'all',
      tabs: [
        { label: '全部项目', value: 'all', count: 0 },
        { label: '进行中', value: 'ongoing', count: 0 },
        { label: '已完成', value: 'completed', count: 0 },
        { label: '已归档', value: 'archived', count: 0 }
      ]
    }
  },
  watch: {
    tabCounts: {
      handler(newVal) {
        this.tabs = this.tabs.map(tab => ({
          ...tab,
          count: newVal[tab.value] || 0
        }))
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /** 搜索 */
    handleSearch() {
      this.emitQuery()
    },
    /** 标签页切换 */
    handleTabChange(tabValue) {
      this.activeTab = tabValue
      this.emitQuery()
    },
    /** 发送查询 */
    emitQuery() {
      this.$emit('query', {
        projectName: this.searchKeyword || null,
        status: this.activeTab === 'all' ? null : this.activeTab
      })
    },
    /** 新增 */
    handleAdd() {
      this.$emit('add')
    },
    /** 导入 */
    handleImport() {
      this.$emit('import')
    }
  }
}
</script>
```

**Step 3: 更新 SearchBar 样式**

Replace entire `<style>` section (lines 117-140) with:

```vue
<style lang="scss" scoped>
.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 {
  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;
  }
}
</style>
```

**Step 4: 验证 SearchBar 组件**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 搜索框和标签页在同一行，标签页显示"全部项目(0)"、"进行中(0)"等

**Step 5: 提交修改**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue
git commit -m "feat: 重写搜索栏组件，添加标签页筛选功能"
```

Expected: 提交成功

---

## Task 4: 更新主组件 - 适配新的 SearchBar

**目的:** 更新主组件以适配新的 SearchBar 组件，传递标签页数量数据。

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue`

**Step 1: 更新 SearchBar 使用方式**

In `index.vue`, find line 10-15:

```vue
<search-bar
  :show-search="showSearch"
  @query="handleQuery"
  @add="handleAdd"
  @import="handleImport"
/>
```

Replace with:

```vue
<search-bar
  :show-search="showSearch"
  :tab-counts="tabCounts"
  @query="handleQuery"
/>
```

**Step 2: 添加 tabCounts 数据**

In the `data()` function (line 83-109), add after `currentArchiveProject`:

```javascript
// 标签页数量统计
tabCounts: {
  all: 0,
  ongoing: 0,
  completed: 0,
  archived: 0
}
```

**Step 3: 更新 getList 方法**

Find the `getList()` method (lines 116-126), add tabCounts calculation:

```javascript
/** 查询项目列表 */
getList() {
  this.loading = true
  listProject(this.queryParams).then(response => {
    this.projectList = response.rows
    this.total = response.total
    this.loading = false
    // 计算标签页数量
    this.calculateTabCounts()
  }).catch(() => {
    this.loading = false
  })
},
/** 计算标签页数量 */
calculateTabCounts() {
  // 注意：这里需要后端API返回所有状态的数量统计
  // 目前暂时使用当前页的数据进行计算
  this.tabCounts = {
    all: this.total,
    ongoing: this.projectList.filter(p => p.status === '0').length,
    completed: this.projectList.filter(p => p.status === '1').length,
    archived: this.projectList.filter(p => p.status === '2').length
  }
}
```

**Step 4: 验证标签页数量**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 标签页显示正确的项目数量

**Step 5: 提交修改**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/index.vue
git commit -m "feat: 添加标签页数量统计功能"
```

Expected: 提交成功

---

## Task 5: 重写 QuickEntry 组件 - 圆形图标

**目的:** 将快捷入口改为快捷方式，使用圆形图标，调整描述文字。

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue`

**Step 1: 重写 QuickEntry 模板**

Replace entire `<template>` section (lines 1-53) with:

```vue
<template>
  <div class="quick-shortcuts-container">
    <div class="section-title">快捷方式</div>
    <el-row :gutter="24">
      <el-col :span="6" v-for="(item, index) in shortcuts" :key="index">
        <div class="shortcut-card" @click="handleClick(item.action)">
          <div :class="['icon-circle', item.colorClass]">
            <i :class="item.icon"></i>
          </div>
          <div class="shortcut-text">{{ item.text }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
```

**Step 2: 更新 QuickEntry 脚本**

Replace entire `<script>` section (lines 56-73) with:

```vue
<script>
export default {
  name: 'QuickEntry',
  data() {
    return {
      shortcuts: [
        {
          text: '从历史项目中导入配置',
          icon: 'el-icon-folder-opened',
          colorClass: 'gray',
          action: 'import-history'
        },
        {
          text: '创建季度初核',
          icon: 'el-icon-date',
          colorClass: 'blue',
          action: 'create-quarterly'
        },
        {
          text: '创建新员工排查',
          icon: 'el-icon-user',
          colorClass: 'green',
          action: 'create-employee'
        },
        {
          text: '创建高风险专项',
          icon: 'el-icon-warning',
          colorClass: 'orange',
          action: 'create-highrisk'
        }
      ]
    }
  },
  methods: {
    handleClick(action) {
      this.$emit(action)
    }
  }
}
</script>
```

**Step 3: 更新 QuickEntry 样式**

Replace entire `<style>` section (lines 76-169) with:

```vue
<style lang="scss" scoped>
.quick-shortcuts-container {
  margin-top: 32px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 16px;
}

.shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  &:active {
    transform: translateY(0);
  }
}

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
  color: #ffffff;

  &.gray {
    background-color: #6B7280;
  }

  &.blue {
    background-color: #3B82F6;
  }

  &.green {
    background-color: #10B981;
  }

  &.orange {
    background-color: #F59E0B;
  }
}

.shortcut-text {
  font-size: 14px;
  color: #374151;
  text-align: center;
  line-height: 20px;
}
</style>
```

**Step 4: 验证快捷方式组件**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 快捷方式标题显示为"快捷方式"，图标为圆形，描述文字匹配原型图

**Step 5: 提交修改**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue
git commit -m "feat: 重写快捷方式组件，使用圆形图标"
```

Expected: 提交成功

---

## Task 6: 调整项目列表表格列顺序

**目的:** 调整项目列表表格的列顺序，严格匹配原型图。

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`

**Step 1: 查看当前 ProjectTable 组件**

Run:
```bash
cat ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
```

Expected: 查看当前表格结构

**Step 2: 调整列顺序**

在 ProjectTable.vue 中，找到 `<el-table>` 部分，调整列的顺序为：

1. 项目名称
2. 更新/创建时间
3. 创建人
4. 状态
5. 目标人数
6. 预警人数
7. 操作

确保列定义如下（具体代码根据现有结构调整）：

```vue
<el-table-column label="项目名称" prop="projectName" min-width="180">
  <!-- 项目名称列内容 -->
</el-table-column>

<el-table-column label="更新/创建时间" prop="updateTime" width="180">
  <template slot-scope="scope">
    {{ scope.row.updateTime || scope.row.createTime }}
  </template>
</el-table-column>

<el-table-column label="创建人" prop="createBy" width="100">
</el-table-column>

<el-table-column label="状态" prop="status" width="100">
  <template slot-scope="scope">
    <el-tag :type="getStatusTagType(scope.row.status)" size="small">
      {{ getStatusLabel(scope.row.status) }}
    </el-tag>
  </template>
</el-table-column>

<el-table-column label="目标人数" prop="targetCount" width="100" align="right">
</el-table-column>

<el-table-column label="预警人数" prop="warningCount" width="100" align="right">
  <template slot-scope="scope">
    <span style="color: #F56C6C; font-weight: 500;">{{ scope.row.warningCount || 0 }}</span>
  </template>
</el-table-column>

<el-table-column label="操作" width="120" align="right">
  <template slot-scope="scope">
    <el-button type="text" size="small" @click="handleEnter(scope.row)">进入项目</el-button>
  </template>
</el-table-column>
```

**Step 3: 更新状态标签方法**

在 `methods` 中添加：

```javascript
methods: {
  getStatusTagType(status) {
    const typeMap = {
      '0': '', // 进行中 - 蓝色
      '1': 'success', // 已完成 - 绿色
      '2': 'info' // 已归档 - 灰色
    }
    return typeMap[status] || ''
  },
  getStatusLabel(status) {
    const labelMap = {
      '0': '进行中',
      '1': '已完成',
      '2': '已归档'
    }
    return labelMap[status] || '未知'
  },
  handleEnter(row) {
    this.$emit('enter', row)
  }
}
```

**Step 4: 验证表格列顺序**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 表格列顺序为：项目名称、更新/创建时间、创建人、状态、目标人数、预警人数、操作

**Step 5: 提交修改**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
git commit -m "feat: 调整项目列表表格列顺序，匹配原型图"
```

Expected: 提交成功

---

## Task 7: 调整页面背景色和整体样式

**目的:** 将页面背景色改为浅灰色，统一卡片样式。

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue`

**Step 1: 修改页面容器样式**

In `index.vue`, find `.dpc-project-container` style (lines 229-233), replace with:

```scss
.dpc-project-container {
  padding: 24px;
  background: #F8F9FA;
  min-height: calc(100vh - 140px);
}
```

**Step 2: 移除 page-header 的边框**

Find `.page-header` style (already modified in Task 2), ensure it has:

```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);

  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #303133;
  }
}
```

**Step 3: 验证页面背景色**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 页面背景为浅灰色（#F8F9FA），卡片为白色，有圆角和阴影

**Step 4: 提交修改**

Run:
```bash
git add ruoyi-ui/src/views/ccdiProject/index.vue
git commit -m "style: 调整页面背景色为浅灰色，统一卡片样式"
```

Expected: 提交成功

---

## Task 8: 验证整体功能

**目的:** 验证所有修改功能正常，样式匹配原型图。

**Step 1: 启动前端开发服务器**

Run:
```bash
cd ruoyi-ui && npm run dev
```

Expected: 前端服务启动成功，访问 http://localhost/ccdiProject

**Step 2: 使用浏览器工具验证样式**

打开浏览器开发者工具，检查以下元素：

- 页面背景色：#F8F9FA ✅
- 页面标题：仅显示"初核项目管理"和"新建项目"按钮 ✅
- 搜索框和标签页在同一行 ✅
- 标签页包含"已归档"选项 ✅
- 表格列顺序正确 ✅
- 快捷方式标题为"快捷方式"，图标为圆形 ✅

**Step 3: 功能测试**

- 点击标签页，验证筛选功能 ✅
- 输入搜索关键词，验证搜索功能 ✅
- 点击分页，验证分页功能 ✅
- 点击快捷方式卡片，验证点击事件 ✅

**Step 4: 拍摄截图对比**

在浏览器中打开项目管理页面，拍摄完整截图，与原型图对比：

```bash
# 打开浏览器访问 http://localhost/ccdiProject
# 使用截图工具拍摄完整页面截图
# 保存为 docs/plans/implementation-screenshot.png
```

**Step 5: 创建验证报告**

创建文件 `docs/plans/verification-report.md`，记录验证结果：

```markdown
# 项目管理页面重构验证报告

**验证日期：** 2026-02-27

## 视觉一致性验证

- ✅ 页面背景色为 #F8F9FA
- ✅ 页面标题简化（无副标题）
- ✅ 搜索框和标签页在同一行
- ✅ 列表列顺序完全符合原型图
- ✅ 快捷方式标题为"快捷方式"，圆形图标

## 功能完整性验证

- ✅ 标签页筛选功能正常（包含已归档选项）
- ✅ 搜索功能正常（防抖300ms）
- ✅ 分页功能正常
- ✅ 快捷方式卡片可点击
- ✅ 加载状态和错误状态正确显示

## 交互流畅性验证

- ✅ 标签切换流畅，数量实时更新
- ✅ 搜索响应及时
- ✅ 分页切换无延迟
- ✅ 悬停效果正常

## 总结

所有验收标准已通过，页面重构完成。
```

Run:
```bash
git add docs/plans/verification-report.md
git commit -m "docs: 添加项目管理页面重构验证报告"
```

Expected: 验证报告已提交

---

## Task 9: 清理备份文件

**目的:** 删除备份文件，保持代码库整洁。

**Step 1: 删除备份文件**

Run:
```bash
rm ruoyi-ui/src/views/ccdiProject/index.vue.backup
rm ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue.backup
rm ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue.backup
```

Expected: 备份文件已删除

**Step 2: 提交清理**

Run:
```bash
git add -A
git commit -m "chore: 清理备份文件"
```

Expected: 清理提交成功

---

## Task 10: 创建最终提交

**目的:** 创建最终的合并提交，包含所有修改。

**Step 1: 查看所有提交**

Run:
```bash
git log --oneline -10
```

Expected: 查看最近的提交记录

**Step 2: 确认所有修改已提交**

Run:
```bash
git status
```

Expected: 工作区干净，无未提交的修改

**Step 3: 推送到远程仓库**

Run:
```bash
git push origin dev
```

Expected: 代码已推送到远程仓库

---

## 验收标准

### 视觉一致性
- ✅ 页面背景色为 #F8F9FA
- ✅ 页面标题简化（无副标题）
- ✅ 搜索框和标签页在同一行
- ✅ 列表列顺序完全符合原型图
- ✅ 快捷方式标题为"快捷方式"，圆形图标

### 功能完整性
- ✅ 标签页筛选功能正常（包含已归档选项）
- ✅ 搜索功能正常（防抖300ms）
- ✅ 分页功能正常
- ✅ 快捷方式卡片可点击
- ✅ 加载状态和错误状态正确显示

### 交互流畅性
- ✅ 标签切换流畅，数量实时更新
- ✅ 搜索响应及时
- ✅ 分页切换无延迟
- ✅ 悬停效果正常

---

## 注意事项

1. **保留面包屑导航** - 面包屑导航是系统全局组件，不在修改范围内
2. **保留分页功能** - 虽然原型图无分页，但考虑到数据量，保留分页功能
3. **保留侧边栏** - 侧边栏是系统全局组件，不在修改范围内
4. **API兼容性** - 如后端API不支持"已归档"状态，需要与后端协调
5. **数据迁移** - 如现有项目数据缺少状态字段，需要添加数据迁移脚本

---

## 相关文件

- 设计文档：`docs/plans/2026-02-27-project-management-page-redesign.md`
- 原型图：`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`
- 快捷方式组件：`ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue`