wkc/ccdi

Fork 0

Files

wkc d08782ae9e 文件夹整理

2026-02-09 14:34:27 +08:00

20 KiB

Raw Blame History

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

设计概述

本文档定义项目管理模块的页面原型设计，基于若依框架 + 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 + 系统名称
中间: 主导航菜单
右侧: 用户信息下拉菜单

代码示例:

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

<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	左对齐	按钮组

状态标签样式:

<el-tag
  :type="row.projectStatus === '0' ? 'primary' : (row.projectStatus === '1' ? 'success' : 'info')"
  size="small"
>
  {{ row.projectStatus === '0' ? '进行中' : (row.projectStatus === '1' ? '已完成' : '已归档') }}
</el-tag>

操作按钮显示规则:

<!-- 进行中项目 -->
<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>

表格组件代码:

<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. 快捷入口区

位置: 表格下方

布局:

+------------------------------------------------------------+
|                      快捷入口                              |
+------------------------------------------------------------+
|  ┌──────────┐    ┌──────────┐    ┌──────────┐              |
|  │ 📋 导入  │    │ 📅 季度  │    │ 👤 新员工 │              |
|  │ 历史项目 │    │  初核    │    │  排查    │              |
|  └──────────┘    └──────────┘    └──────────┘              |
+------------------------------------------------------------+

卡片样式:

.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 📅]                           │   |
|  │                                                          │   |
|  │  项目配置: [展开高级设置 ▼]                            │   |
|  │                                                          │   |
|  ├──────────────────────────────────────────────────────────┤   |
|  │                    [取消]  [确定]                       │   |
|  └──────────────────────────────────────────────────────────┘   |
+------------------------------------------------------------------+

表单验证规则

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]              │   |
|  │                                                          │   |
|  ├──────────────────────────────────────────────────────────┤   |
|  │                    [取消]  [导入]                       │   |
|  └──────────────────────────────────────────────────────────┘   |
+------------------------------------------------------------------+

项目列表项样式

<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	卡片式布局

移动端适配

/* 移动端使用卡片式布局 */
@media (max-width: 768px) {
  .project-list-table {
    display: none;
  }
  .project-list-cards {
    display: block;
  }
}

可访问性

键盘导航

Tab: 在元素间切换焦点
Enter: 确认/提交
Esc: 关闭对话框
Space: 选中/取消选中

ARIA标签

<!-- 搜索框 -->
<input
  aria-label="搜索项目名称"
  role="searchbox"
/>

<!-- 表格 -->
<table role="table" aria-label="项目列表">
  <caption>当前共5个项目</caption>
  ...
</table>

设计资源

Figma设计稿

如需查看详细的设计稿，请联系设计团队。

墨刀原型

在线查看原型

图标库

使用Element UI内置图标，文档：https://element.eleme.io/#/zh-CN/component/icon

版本信息

设计版本: V1.0
设计日期: 2026-01-27
设计师: 待定
基于框架: Vue 2.6 + Element UI 2.15

20 KiB Raw Blame History Unescape Escape

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

设计概述

设计规范

颜色规范

字体规范

间距规范

页面1: 项目管理首页

页面布局

详细组件说明

1. 顶部导航栏

2. 搜索和操作区

3. 项目列表表格

4. 快捷入口区

页面2: 新建项目弹窗

对话框规格

表单验证规则

页面3: 导入历史项目弹窗

对话框规格

项目列表项样式

页面4: 项目归档确认

确认对话框

交互规范

1. 加载状态

2. 空状态

3. 错误提示

4. 成功反馈

响应式设计

断点定义

移动端适配

可访问性

键盘导航

ARIA标签

设计资源

Figma设计稿

墨刀原型

图标库

版本信息

20 KiB

Raw Blame History