959 lines
20 KiB
Markdown
959 lines
20 KiB
Markdown
# 项目管理页面重构实施计划
|
||
|
||
> **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`
|