539 lines
20 KiB
Markdown
539 lines
20 KiB
Markdown
# 项目管理模块 - 页面原型设计
|
||
|
||
## 设计概述
|
||
|
||
本文档定义项目管理模块的页面原型设计，基于若依框架 + 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
|