wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d08782ae9eeb78718e4751bdd433dd6c4bddcd33
ccdi/doc/modules/01-项目管理模块/06-页面原型设计.md

529 lines
20 KiB
Markdown
Raw Normal View History

文件夹整理
2026-02-09 14:34:27 +08:00
# 项目管理模块 - 页面原型设计
## 设计概述
本文档定义项目管理模块的页面原型设计，基于若依框架 + Element UI组件库的设计规范。
## 设计规范
### 颜色规范
| 颜色类型 | 颜色值 | 用途 |
|---------|-------|------|
| 主题色 | #409EFF | 主按钮、链接、高亮 |
| 成功色 | #67C23A | 成功状态、已完成项目 |
| 警告色 | #E6A23C | 警告提示 |
| 危险色 | #F56C6C | 危险操作、删除 |
| 信息色 | #909399 | 次要信息、禁用状态 |
| 文字色 | #303133 | 主要文字 |
| 次要文字 | #606266 | 次要文字 |
| 边框色 | #DCDFE6 | 边框、分割线 |
| 背景色 | #F5F7FA | 页面背景 |
### 字体规范
| 类型 | 字体大小 | 字重 | 行高 |
|-----|---------|------|------|
| 页面标题 | 20px | 500 | 28px |
| 卡片标题 | 16px | 500 | 24px |
| 正文 | 14px | 400 | 22px |
| 小字 | 12px | 400 | 20px |
### 间距规范
| 间距类型 | 数值 |
|---------|------|
| 页面边距 | 20px |
| 卡片间距 | 16px |
| 元素间距 | 8px |
| 小间距 | 4px |
---
## 页面1: 项目管理首页
### 页面布局
```
+------------------------------------------------------------------+
| Logo | 纪检初核系统 首页 | 项目工作台 | 系统管理 | 用户▼ |
+------------------------------------------------------------------+
| 项目管理 |
| +------------------------------------------------------------+ |
| | 🔍 项目搜索: [________________] [新建项目] [导入历史项目] | |
| +------------------------------------------------------------+ |
| |
| +------------------------------------------------------------+ |
| | 项目列表 | |
| +------------------------------------------------------------+ |
| | 序号 | 项目名称 | 创建时间 | 状态 | 目标 | 预警 | 操作| |
| |------|--------------|------------|------|------|------|-----| |
| | 1 | 2024年Q1初核 | 2024-01-01 | ⏳进行中| 500 | 15 |[详情]| |
| | 2 | 2023年Q4初核 | 2023-10-01 | ✅已完成| 480 | 23 |[查看]| |
| +------------------------------------------------------------+ |
| |
| +------------------------------------------------------------+ |
| | 快捷入口 | |
| +------------------------------------------------------------+ |
| | [📋 导入历史项目] [📅 创建季度初核] [👤 创建新员工排查] | |
| +------------------------------------------------------------+ |
+------------------------------------------------------------------+
```
### 详细组件说明
#### 1. 顶部导航栏
**位置**: 固定在页面顶部
**组件**:
- 左侧: Logo + 系统名称
- 中间: 主导航菜单
- 右侧: 用户信息下拉菜单
**代码示例**:
```vue
<el-menu mode="horizontal" :default-active="activeIndex">
<el-menu-item index="/project">项目管理</el-menu-item>
<el-menu-item index="/workspace">项目工作台</el-menu-item>
<el-menu-item index="/system">系统管理</el-menu-item>
</el-menu>
```
#### 2. 搜索和操作区
**位置**: 导航栏下方，全宽度
**布局**:
```
+------------------------------------------------------------+
| 项目管理 [新建项目] [导入历史项目] |
+------------------------------------------------------------+
| 🔍 [搜索项目名称...................] 高级搜索 ▼ |
+------------------------------------------------------------+
```
**组件规格**:
- 搜索框: 宽度 300px, 高度 32px
- 按钮: 高度 32px, 内边距 12px
- 图标: 14px
**Element UI代码**:
```vue
<el-row :gutter="16">
<el-col :span="18">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
prefix-icon="el-icon-search"
clearable
@keyup.enter.native="handleQuery"
/>
</el-col>
<el-col :span="6" style="text-align: right">
<el-button
type="primary"
icon="el-icon-plus"
@click="handleAdd"
>新建项目</el-button>
<el-button
icon="el-icon-folder-opened"
@click="handleImport"
>导入历史项目</el-button>
</el-col>
</el-row>
```
#### 3. 项目列表表格
**位置**: 搜索区下方
**列定义**:
| 列名 | 宽度 | 对齐 | 说明 |
|-----|------|------|------|
| 序号 | 60px | 居中 | 自动编号 |
| 项目名称 | 200px | 左对齐 | 主标题+描述 |
| 创建时间 | 120px | 居中 | YYYY-MM-DD |
| 状态 | 100px | 居中 | 带颜色的标签 |
| 目标人数 | 80px | 居中 | 数字 |
| 预警人数 | 80px | 居中 | 数字+刷新图标 |
| 操作 | 200px | 左对齐 | 按钮组 |
**状态标签样式**:
```vue
<el-tag
:type="row.projectStatus === '0' ? 'primary' : (row.projectStatus === '1' ? 'success' : 'info')"
size="small"
>
{{ row.projectStatus === '0' ? '进行中' : (row.projectStatus === '1' ? '已完成' : '已归档') }}
</el-tag>
```
**操作按钮显示规则**:
```vue
<!-- 进行中项目 -->
<el-button size="mini" type="text" icon="el-icon-s-data">进入项目</el-button>
<!-- 已完成项目 -->
<el-button size="mini" type="text" icon="el-icon-view">查看结果</el-button>
<el-button size="mini" type="text" icon="el-icon-refresh">重新分析</el-button>
<el-button size="mini" type="text" icon="el-icon-folder">归档</el-button>
<!-- 已归档项目 -->
<el-button size="mini" type="text" icon="el-icon-document">查看详情</el-button>
```
**表格组件代码**:
```vue
<el-table
v-loading="loading"
:data="projectList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="60" align="center" />
<el-table-column label="项目名称" min-width="200" show-overflow-tooltip>
<template slot-scope="scope">
<div class="project-name">
<div class="name">{{ scope.row.projectName }}</div>
<div class="desc">{{ scope.row.projectDesc }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createTime" width="120" align="center" />
<el-table-column label="状态" prop="projectStatus" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="getStatusType(scope.row.projectStatus)" size="small">
{{ getStatusLabel(scope.row.projectStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="目标人数" prop="targetCount" width="80" align="center" />
<el-table-column label="预警人数" width="100" align="center">
<template slot-scope="scope">
<span v-if="scope.row.projectStatus === '0'">
{{ scope.row.warningCount }}
<i class="el-icon-refresh" @click="refreshWarningCount(scope.row)"></i>
</span>
<span v-else>{{ scope.row.warningCount }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center" fixed="right">
<template slot-scope="scope">
<!-- 根据状态显示不同按钮 -->
</template>
</el-table-column>
</el-table>
```
#### 4. 快捷入口区
**位置**: 表格下方
**布局**:
```
+------------------------------------------------------------+
| 快捷入口 |
+------------------------------------------------------------+
| ┌──────────┐ ┌──────────┐ ┌──────────┐ |
| │ 📋 导入 │ │ 📅 季度 │ │ 👤 新员工 │ |
| │ 历史项目 │ │ 初核 │ │ 排查 │ |
| └──────────┘ └──────────┘ └──────────┘ |
+------------------------------------------------------------+
```
**卡片样式**:
```css
.quick-entry-card {
width: 100%;
height: 120px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.quick-entry-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
```
---
## 页面2: 新建项目弹窗
### 对话框规格
```
+------------------------------------------------------------------+
| ┌──────────────────────────────────────────────────────────┐ |
| │ 新建项目 │ |
| ├──────────────────────────────────────────────────────────┤ |
| │ 项目名称: [________________________] * │ |
| │ 项目描述: [________________________] │ |
| │ [________________________________] │ |
| │ │ |
| │ 目标人员: [+ 添加人员] │ |
| │ ┌─────────────────────────────────────────┐ │ |
| │ │ ✗ 张三 (3301**********202101) [删除] │ │ |
| │ │ ✗ 李四 (3302**********202102) [删除] │ │ |
| │ └─────────────────────────────────────────┘ │ |
| │ │ |
| │ 时间范围: │ |
| │ 开始日期: [2024-01-01 📅] │ |
| │ 结束日期: [2024-03-31 📅] │ |
| │ │ |
| │ 项目配置: [展开高级设置 ▼] │ |
| │ │ |
| ├──────────────────────────────────────────────────────────┤ |
| │ [取消] [确定] │ |
| └──────────────────────────────────────────────────────────┘ |
+------------------------------------------------------------------+
```
### 表单验证规则
```javascript
rules: {
projectName: [
{ required: true, message: '请输入项目名称', trigger: 'blur' },
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
],
startDate: [
{ required: true, message: '请选择开始日期', trigger: 'change' }
],
endDate: [
{ required: true, message: '请选择结束日期', trigger: 'change' },
{
validator: (rule, value, callback) => {
if (value && this.form.startDate && value < this.form.startDate) {
callback(new Error('结束日期不能早于开始日期'));
} else {
callback();
}
},
trigger: 'change'
}
]
}
```
---
## 页面3: 导入历史项目弹窗
### 对话框规格
```
+------------------------------------------------------------------+
| ┌──────────────────────────────────────────────────────────┐ |
| │ 导入历史项目 │ |
| ├──────────────────────────────────────────────────────────┤ |
| │ 搜索: [________________] 📅 时间筛选 ▼ │ |
| │ │ |
| │ 历史项目列表: │ |
| │ ┌─────────────────────────────────────────────┐ │ |
| │ │ ☐ 2024年Q1初核 │ │ |
| │ │ 创建时间: 2024-01-01 人员: 500 [详情] │ │ |
| │ ├─────────────────────────────────────────────┤ │ |
| │ │ ☑ 2023年Q4初核 │ │ |
| │ │ 创建时间: 2023-10-01 人员: 480 [详情] │ │ |
| │ ├─────────────────────────────────────────────┤ │ |
| │ │ ☐ 2023年Q3初核 │ │ |
| │ │ 创建时间: 2023-07-01 人员: 450 [详情] │ │ |
| │ └─────────────────────────────────────────────┘ │ |
| │ │ |
| │ 新项目名称: [2024年Q2初核（复制）] * │ |
| │ 时间范围: │ |
| │ 开始: [2024-04-01] 结束: [2024-06-30] │ |
| │ │ |
| ├──────────────────────────────────────────────────────────┤ |
| │ [取消] [导入] │ |
| └──────────────────────────────────────────────────────────┘ |
+------------------------------------------------------------------+
```
### 项目列表项样式
```vue
<el-radio-group v-model="selectedProjectId">
<el-radio
v-for="item in historyProjects"
:key="item.projectId"
:label="item.projectId"
class="project-radio"
>
<div class="project-item">
<div class="project-header">
<span class="name">{{ item.projectName }}</span>
<el-button type="text" size="small" @click.stop="viewDetail(item)">
详情
</el-button>
</div>
<div class="project-info">
<span>创建时间: {{ item.createTime }}</span>
<span>人员: {{ item.targetCount }}</span>
<el-tag size="mini" :type="getStatusType(item.projectStatus)">
{{ getStatusLabel(item.projectStatus) }}
</el-tag>
</div>
</div>
</el-radio>
</el-radio-group>
```
---
## 页面4: 项目归档确认
### 确认对话框
```
+------------------------------------------------------------------+
| ┌──────────────────────────────────────────────────────────┐ |
| │ ⚠️ 归档确认 │ |
| ├──────────────────────────────────────────────────────────┤ |
| │ │ |
| │ 确定要归档项目"2024年Q1初核"吗？ │ |
| │ │ |
| │ 归档后将： │ |
| │ ✓ 项目状态变为"已归档" │ |
| │ ✓ 自动生成项目报告PDF │ |
| │ ✓ 移入归档库 │ |
| │ │ |
| │ ☐ 同时删除项目相关数据（不可恢复） │ |
| │ │ |
| │ 归档后可从"归档库"中查看和恢复 │ |
| │ │ |
| ├──────────────────────────────────────────────────────────┤ |
| │ [取消] [确认归档] │ |
| └──────────────────────────────────────────────────────────┘ |
+------------------------------------------------------------------+
```
---
## 交互规范
### 1. 加载状态
- 首次加载显示骨架屏
- 数据刷新显示loading遮罩
- 按钮操作后显示loading状态
### 2. 空状态
```
+------------------------------------------------------------------+
| ┌──────────────────────────────────────────────────────────┐ |
| │ 📂 │ |
| │ │ |
| │ 暂无项目数据 │ |
| │ │ |
| │ [新建项目] [导入历史项目] │ |
| └──────────────────────────────────────────────────────────┘ |
+------------------------------------------------------------------+
```
### 3. 错误提示
- 表单验证错误：红色边框 + 错误文字
- 网络错误：全屏错误提示
- 操作失败：右上角消息提示
### 4. 成功反馈
- 操作成功：右上角成功消息
- 删除成功：列表自动刷新
- 创建成功：跳转到详情页
---
## 响应式设计
### 断点定义
| 设备类型 | 屏幕宽度 | 布局调整 |
|---------|---------|---------|
| 大屏 | ≥1920px | 显示完整表格 |
| 标准 | ≥1200px | 标准布局 |
| 平板 | ≥768px | 隐藏次要列 |
| 手机 | <768px | 卡片式布局 |
### 移动端适配
```css
/* 移动端使用卡片式布局 */
@media (max-width: 768px) {
.project-list-table {
display: none;
}
.project-list-cards {
display: block;
}
}
```
---
## 可访问性
### 键盘导航
- Tab: 在元素间切换焦点
- Enter: 确认/提交
- Esc: 关闭对话框
- Space: 选中/取消选中
### ARIA标签
```html
<!-- 搜索框 -->
<input
aria-label="搜索项目名称"
role="searchbox"
/>
<!-- 表格 -->
<table role="table" aria-label="项目列表">
<caption>当前共5个项目</caption>
...
</table>
```
---
## 设计资源
### Figma设计稿
如需查看详细的设计稿，请联系设计团队。
### 墨刀原型
[在线查看原型](演示模式.html)
### 图标库
使用Element UI内置图标，文档：https://element.eleme.io/#/zh-CN/component/icon
---
## 版本信息
- **设计版本**: V1.0
- **设计日期**: 2026-01-27
- **设计师**: 待定
- **基于框架**: Vue 2.6 + Element UI 2.15
Reference in New Issue Copy Permalink