initial-ui-requirements.md 4.9 KB

你是一名前端设计师,现在要做一个文档管理系统,主要页面及要求如下

前端风格要求

  1. 尺寸为1920x1080;
  2. 整体风格上,为蓝色调;
  3. 背景:最上方约100px高度为天蓝色,放软件标题,标题为白色,居中;下方50px高度,从天蓝色渐变到非常浅的浅蓝色;最下方200px高度,从浅蓝色渐变到浅灰色;背景上还覆盖一层军事相关的图片,透明度非常高,稍稍能显示出来即可;
  4. 所有文字呈深蓝色,黑体,高端大气;图标可以有其他颜色,商务风;

各页面及交互

  1. 页面P1。登录页,浅色风格,登录框包含用户名和密码,支持记住密码;

  2. 页面P2。 首页,上方中间显示方案计划系统,贯穿屏幕;下侧屏幕左侧为组织机构目录树,支持按层级展开,树上侧为搜索框,框内提示词为搜索名称、内容; 下侧右侧为文档列表,展示序号、文档名称、文档概述、级别、标签、操作(查看详情、下载); 列表上的菜单切换卡为主案列表、全部方案和最近更新; 文档列表模拟数据包括3个,序号1中的文档支持子文档,包含3个子文档,文档名称为人员组织子案、资源组织子案、重点任务子案,概述中模拟方案内容。 点击查看详情按钮,可查看当前文档的详情信息,展示方式为一个word浏览器。 点击下载按钮,可下载当前的文件。 点击搜索,列表中展示内容同右侧文档列表内容,需将方案概述标题改为方案内容,搜索命中的关键词使用高亮表示。

  3. 页面P3. 上方中间显示方案计划系统后台,贯穿屏幕;下侧屏幕左侧为组织机构目录树,支持按层级展开,树上侧为搜索框,框内提示词为搜索名称、内容; 列表上侧显示文档情况,包括已上传文档64个、主案数目21个、子案数目数目43个、今日查看人数12人。 右侧最上面靠右,显示上传文档、批量导入。 文档列表中展示内容为 序号、文档名称、类型、级别、可见范围、操作。操作包括编辑、权限和删除。 文档列表模拟数据包括3个,序号1中的文档支持子文档,包含3个子文档,文档名称为人员组织子案、资源组织子案、重点任务子案,概述中模拟方案内容。 点击查看详情按钮,可查看当前文档的详情信息,展示方式为一个word浏览器。 点击上传文档按钮,显示上传按钮,需要同步录入相关元信息。 点击权限按钮,弹框权限配置功能。包括组织树权限、人员权限,支持权限信息的保存和重置。

  4. 页面P4 操作日志审计页面 风格同P3,搜索框位置相同,支持日志搜索。 审计页面按照标准进行输出。 右侧页面需要有比较好的统计展示。


修改问题如下:

  1. 页面下侧不需要再展示4个菜单;
  2. 页面整体显示字号调大2号;
  3. 按钮点击后的界面风格要保持一致;
  4. 管理页面中的批量导入,支持拖入多个文件;
  5. 在上述成果的基础上,你作为一个顶级设计师重新设计一下展示,所有的颜色不要超过3种;

修改问题如下:

  1. 删除综合管理平台。
  2. 页面整体显示字号调大2号;
  3. 按钮点击后的界面风格要保持一致;
  4. 管理页面中的批量导入,支持拖入多个文件;
  5. 在上述成果的基础上,你作为一个顶级设计师重新设计一下展示,所有的颜色不要超过3种;

二、逻辑设计 你是一名系统架构师,基于上述的前端交互设计,需要进行后端设计开发,请结合你的理解,先进行数据库逻辑设计。同时提供E-R图。设计原则。 1、简化系统设计。 2、数据库增加适当的冗余设计,不用非得遵守数据库设计的第三范式; 3、使用最小化的数据库设计,先满足界面展示需求,同时扩展每个字段的更新时间、新增时间和删除时间,设计为逻辑删除。



三、系统架构 你是一名系统架构师,基于上述的前端交互设计,需要进行后端设计开发

1、架构要求 基础架构: 数据库: 前端: 后端:


四、后端实现 1、每个前端页面均异步调用后端接口进行数据访问; 2、每个接口校验数据的准确性。 3、按照功能实现: 3.1 页面P1后端,使用MD5加密存储密码,支持JWT的访问方式。 3.2