【前端开发】数据使用审批平台 - 基于 Ant Design Pro 的前端实现

[birdhan]

数据使用审批平台前端开发需求

项目概述

• 平台名称：数据使用审批平台
• 技术栈：Ant Design Pro
• 设计风格：高级感、统一的配色方案、专业的字体设计、统一的整体风格、突出的页头设计

功能模块

1. 文档管理

页面要求

• 展示规章制度的静态页面
• 需要合理、美观、大气的排版
• 子模块：
  • 数据管理规定
  • 数据使用规定
  • 平台使用手册

2. 产品线管理

产品线申请页面

• 分为两个区域：
  1. 已有权限产品线展示区
     • 使用边框隔离方式展示
     • 包含已有权限和申请中的产品线信息
  2. 申请表单区
     • 展示申请人信息（固定展示）
     • 产品线下拉选择
     • 提交按钮

产品线列表页面

• 搜索功能
• 分页列表（默认20条/页）
• 列表字段：
  • 产品线名称
  • 申请人（1-8人）

3. 数据申请

创建数据使用申请页面

三个主要部分：

1. 数据申请人信息
   • 申请人
   • 产品线
2. 数据使用方式
   • 使用场景
   • 操作方式
   • 使用目的
   • 数据字段
   • 数据等级
   • 使用数量
   • 使用频次
   • 使用时长
   • 安全措施
3. 数据审批方
   • 需求部门审批人
   • 数据所属部门审批人
   • 信息安全审批人

创建数据外发申请页面

• 与数据使用申请页面保持一致的布局和功能

4. 工单管理

工单列表页面

• 搜索功能：
  • 申请人
  • 申请产品线
  • 需求方审批人
  • 数据方审批人
  • 信息安全审批人
• 列表字段：
  • 邮箱前缀
  • 申请人
  • 申请产品线
  • 需求方审批人
  • 数据方审批人
  • 信息安全审批人
  • 状态
  • 申请时间
• 分页功能（默认20条/页）

我的审批页面

• 列表字段：
  • 邮箱前缀
  • 申请人
  • 申请产品线
  • 需求方审批人
  • 数据方审批人
  • 状态
  • 申请时间
  • 详情按钮
• 详情页面展示：
  1. 数据申请人信息
  2. 数据使用方式
  3. 数据审批方信息
  4. 附件下载功能

5. AI助手

数据安全AI助手页面

• 对话框界面
• 常见问题提示（5-10个）

6. 系统管理

权限管理

• 自定义实现权限管理功能

角色管理

• 自定义实现角色管理功能

安全审批页面

• 列表字段：
  • 邮箱前缀
  • 申请人
  • 申请产品线
  • 申请时间
  • 状态
  • 操作
• 分页功能（默认20条/页）

技术要求

1. 使用 Ant Design Pro 作为基础框架
2. 确保页面响应式设计
3. 实现统一的错误处理机制
4. 添加必要的加载状态和交互反馈
5. 实现数据的本地模拟（测试数据）

设计规范

1. 整体风格：
   • 保持高级感
   • 统一的配色方案
   • 专业的字体设计
   • 突出的页头设计
2. 布局：
   • 合理的留白
   • 清晰的信息层级
   • 统一的组件样式
3. 交互：
   • 流畅的页面切换
   • 友好的表单验证
   • 清晰的操作反馈