wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8a75a34242f228fa9dd6b1fba107ab41017d8278
ccdi/docs/plans/2026-02-27-project-management-implementation.md
wkc 6311f7975b docs: 添加项目管理页面重构详细实施计划 
- 10个详细任务，包含完整代码和验证步骤
- 遵循 TDD、DRY、YAGNI 原则
- 包含验收标准和注意事项
2026-02-27 13:49:40 +08:00

20 KiB
Raw Blame History

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

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:

cp ruoyi-ui/src/views/ccdiProject/index.vue ruoyi-ui/src/views/ccdiProject/index.vue.backup

Expected: 文件已复制

Step 2: 备份 SearchBar 组件

Run:

cp ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue.backup

Expected: 文件已复制

Step 3: 备份 QuickEntry 组件

Run:

cp ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue.backup

Expected: 文件已复制

Step 4: 提交备份

Run:

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:

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

Replace with:

<!-- 页面标题 -->
<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:

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

cd ruoyi-ui && npm run dev

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

Step 4: 提交修改

Run:

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:

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

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

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

cd ruoyi-ui && npm run dev

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

Step 5: 提交修改

Run:

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:

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

Replace with:

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

Step 2: 添加 tabCounts 数据

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

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

Step 3: 更新 getList 方法

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

/** 查询项目列表 */
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:

cd ruoyi-ui && npm run dev

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

Step 5: 提交修改

Run:

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:

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

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

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

cd ruoyi-ui && npm run dev

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

Step 5: 提交修改

Run:

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:

cat ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue

Expected: 查看当前表格结构

Step 2: 调整列顺序

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

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

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

<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 中添加：

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:

cd ruoyi-ui && npm run dev

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

Step 5: 提交修改

Run:

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:

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

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

cd ruoyi-ui && npm run dev

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

Step 4: 提交修改

Run:

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

Expected: 提交成功

Task 8: 验证整体功能

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

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

Run:

cd ruoyi-ui && npm run dev

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

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

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

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

Step 3: 功能测试

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

Step 4: 拍摄截图对比

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

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

Step 5: 创建验证报告

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

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

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

## 视觉一致性验证

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

## 功能完整性验证

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

## 交互流畅性验证

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

## 总结

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

Run:

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

Expected: 验证报告已提交

Task 9: 清理备份文件

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

Step 1: 删除备份文件

Run:

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:

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

Expected: 清理提交成功

Task 10: 创建最终提交

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

Step 1: 查看所有提交

Run:

git log --oneline -10

Expected: 查看最近的提交记录

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

Run:

git status

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

Step 3: 推送到远程仓库

Run:

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
Reference in New Issue View Git Blame Copy Permalink