# 项目管理模块 - 页面原型设计

## 设计概述

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