需求文档

哒哒哒_Cat
6 阅读14分钟

二、月度汇报管理系统

1. 文档信息

文档名称：月度汇报管理系统功能需求文档
版本号：V1.0
作者：Jessie Tang
日期：2026-02-14

2. 需求概述

背景与目标： 普通用户登录当前系统进行月度工作报告填写，admin用户可以查看所有人每个月的月度汇报内容，并且可以依据不同的筛选条件导出为excel表

用户故事：

1.作为普通用户我可以登录系统填写我当月的工作汇报，我可以查看我过往月份的工作汇报；

2.作为前端开发的管理者，我可以查看当前月份下所有组员的报告，以及过往月份的报告，我可以去分析模块里一键分析当月大家的工作情况，统计哪些人的工作处于饱和，哪些人不饱和;

3.作为后端开发管理者以及测试管理者拥有和前端管理者同样的操作；

4.作为超级管理员，我可以查看前端，后端，测试三个组下的当月和过往月度汇报。

3. 功能需求

3.1 登录

Name:登录
Description:用户登录页面.

逻辑

  • 1.使用工号和密码登录系统
  • 2.把JWT token存储在web浏览器的localstorage里
  • 3.只使用Access Token，过期时间:480 min(8 hours),如果过期，直接登出
  • 4.除了/openApi/*外的其他接口都需要校验token

校验

  • 工号必填
  • 密码必填

Field/Function Summary

SectionField / LabelTypeDescription
 工号TextMandatory
 密码TextMandatory
 登录ButtonLogin system

3.2 用户角色

Name:用户角色
Description:不同角色的用户登录可以查看和操作不同的功能

逻辑

  • 只在DB里配置用户角色，不提供可视化页面配置
  • 提供3种角色，分别是admin, team_lead, report_viewer
  • 提供3种Team,分别FE,BE，QA,每个team可以指定team_leader，指向对应的user_id
  • 用户登录后返回关键字段，user_id，role_id，team_id，team_ship_id(如果是team Lead才返回)

Role and Permission

****Role
Menu & FunctionsAll UsersAdminteam_leadreport_viewer
Dashboard   ✔  ✔
Submit Report   ✔  ✔
Report Detail✔   
Team Manager   ✔  
Admin Manager  ✔    
Admin Setting  ✔    

3.3 通用

Name:通用
Description:每个页面都是通用的;顶部导航栏上有用户名和登出按钮；左侧边栏放置菜单按钮

Field/Function Summary

SectionField / LabelTypeDescription
Nav BarCollapse IconButton 
User NameHyperlink
LogoutButtonLogout System
Menu BarDashboardHyperlink
Team ManagerHyperlink 
Admin ManagerHyperlink 
Admin SettingHyperlink 

3.4 DashBorad

Name:DashBorad
Description:允许用户提交，编辑当月的汇报表单以及按年份查看过往的提交记录

逻辑

  • 页面Header的最右侧放置功能按钮，用于提交当前月份的汇报，点击跳转到表单提交页面，提交后不能编辑和删除，如果当前月份在后续的Admin setting功能里开启了提交状态才能允许提交，否则禁用，允许提交的状态下有草稿或者提交成功的记录，按钮也要禁用，确保每月只能有一份草稿和一份提交成功的记录
  • Header下方放置提交历史列表，列出当前年份所有的提交记录，按月份降序排列，列头有：操作，月份，状态

校验

  • 当前月份已经存在草稿或者已提交两种状态的记录就禁用提交按钮，保证每月只能提交一份记录
  • 列表的操作那一列，如果这条记录的月份是当月且状态是草稿状态，展示编辑按钮，点击可以跳转到详情页面进行编辑和提交

3.4 汇报

Name:Report
Description:用户填写并提交当前月份汇报的内容

逻辑
整张表单分为7个section，表单可以直接提交，提交后转为只读状态，也可以save为草稿，下次继续编辑

  • Section 1 - 基本信息
    基本信息内显示当前登录用户的基本信息，包括姓名，工号，所属项目，汇报月份，其中只有所属项目是需要用户自行填写，其他都是只读，从登陆信息里获取用户信息
  • Section 2 - 任务交付明细
    任务交付明细的内容分成两种，一种是开发人员填写，另一种是测试人员填写
开发人员的任务列表的方式显示,如下
Column / LabelTypeLimitDescription
项目名称InputmaxSize 100Mandatory
模块描述Mutiple InputmaxSize 1000 ;最多为3行Mandatory
任务类型DropdownMandatory
复杂度DropdownMandatory
计划完成日期DatePickerMandatory
实际完成日期DatePickerMandatory
状态DropdownMandatory
UAT/QA打回次数InputNumber <100Mandatory
备注Mutiple InputmaxSize 1000 ;最多为3行
操作Delete ButtonMandatory
测试人员的任务列表的方式显示,如下:
Column / LabelTypeLimitDescription
项目名称InputmaxSize 100Mandatory
模块描述Mutiple InputmaxSize 1000 ;最多为3行Mandatory
测试类型DropdownMandatory
复杂度DropdownMandatory
Test Case数InputNumber <200Mandatory
计划完成日期DatePickerMandatory
实际完成日期DatePickerMandatory
状态DropdownMandatory
发现Bug数/打回次数InputNumber <100Mandatory
备注Mutiple InputmaxSize 1000 ;最多为3行
操作Delete ButtonMandatory

校验

  • 列表默认带有一行空行，方便用户第一次进来填写内容

  • 每一行的操作列都有删除按钮，用于删除当前行

  • 列表的下方依据不同的角色显示不同的tips：
    开发人员显示：复杂度定义 → S: 纯样式/文案/单接口/简单配置 M: 现有模板开发/联调2-5个接口/常规CRUD L: 从零构建/联调>5个接口/跨系统交互.
    测试人员显示:复杂度定义 → S: 简单回归/单模块/已有case执行 M: 多模块关联/需设计新case/需造测试数据 L: 跨系统E2E/复杂业务场景/需搭建环境.

  • tips下方显示两个按钮，新增按钮和重置按钮，新增按钮用户在列表最下面新增空行，重置用于一次性清空列表内容

  • 任务类型列的options：新需求开发;旧需求改动；BUG修复;技术优化;接口联调;其他。从DB里获取

  • 测试类型列的options：功能测试 / 回归测试 / UAT支持 / 自动化测试 / 性能测试 / 探索性测试 / 其他。从DB里获取

  • 复杂度的options:S; M; L。从DB里获取

  • 开发人员的状态列的options:未开始;开发中;已提测;已上线;挂起。从DB里获取

  • 测试人员的状态列的options:未开始;测试;待验证;已通过；已上线;挂起。从DB里获取

  • Section 3 - 工时占比统计
    这张表格的分类列是固定的，所有分类占比总计是100%，开发和测试两种角色拥有不同的分类 以列表的方式显示,如下:

Column / LabelTypeLimitDescription
分类TextMandatory
占比(%)Number Input,支持小数点后一位数<=100; Unit:%
备注Mutiple InputmaxSize 1000 ;最多为3行
合计Text<=100%

校验

  • 在列表下方显示tips:"所有分类占比之和应为100%。如有未列出的工作类型，请在备注中说明。"

  • 所有分类占比总和是100%

  • 分类从DB里获取，开发人员的类别固定为:新需求开发,BUG修复/维护,接口联调/沟通,需求评审/技术方案,会议/Stand-up,支援其他项目,自我学习

  • 分类从DB里获取，测试人员的类别固定为:功能/回归测试执行,Test Case设计/维护,Bug验证/跟踪,测试数据准备/环境搭建,需求评审/测试方案,支援其他项目,自动化脚本开发,自我学习

  • 每个类别是一行，显示所有类别到当前列表里

  • Section 4 - 全月工作量饱和度
    从左到右显示饱和度的Select选项框和备注Mutiple Input，其中饱和度的option从DB里获取，默认为:低,适中,高,过载。
    饱和度上加tip描述，内容：低=空闲较多，适中=正常节奏，高=偶尔加班(≤2天/周)，过载=持续加班(>3天/周)

校验
饱和度为必填，备注选填，备注的maxSize：1000，最大行数:3行

  • Section 5 - 阻力项描述
    以列表的方式显示,且是选填，如下:
Column / LabelTypeLimitDescription
阻力类型Dropdown
详细描述Mutiple InputmaxSize 1000 ;最多为3行
影响范围Mutiple InputmaxSize 1000 ;最多为3行
操作Delete ButtonMandatory

校验

  • 列表默认带有一行空行，方便用户第一次进来填写内容

  • 每一行的操作列都有删除按钮，用于删除当前行

  • 列表下方显示tips："请如实填写遇到的困难，TL会优先协调解决。阻力项越具体越好。"

  • tips下方显示两个按钮，新增按钮和重置按钮，新增按钮用户在列表最下面新增空行，重置用于一次性清空列表内容

  • 阻力类型列的options：需求/Case不清晰,测试数据不足,环境不稳定,依赖开发修复,工具/权限问题,人力不足,其他.从DB获取

  • Section 6 - TL支持
    以列表的方式显示,且是选填，如下:

Column / LabelTypeLimitDescription
阻力类型Dropdown
详细描述Mutiple InputmaxSize 1000 ;最多为3行
影响范围Mutiple InputmaxSize 1000 ;最多为3行
操作Delete ButtonMandatory

校验

  • 列表默认带有一行空行，方便用户第一次进来填写内容

  • 每一行的操作列都有删除按钮，用于删除当前行

  • 列表下方显示tips："这是双向沟通渠道。任何需要TL协调、争取资源、沟通上级的事项都可以填写。"

  • tips下方显示两个按钮，新增按钮和重置按钮，新增按钮用户在列表最下面新增空行，重置用于一次性清空列表内容

  • 阻力类型列的options：需求/Case不清晰,测试数据不足,环境不稳定,依赖开发修复,工具/权限问题,人力不足,其他.从DB获取

  • Section 7 - 主动学习
    以列表的方式显示,且是选填，如下:

Column / LabelTypeLimitDescription
事项描述Mutiple InputmaxSize 1000 ;最多为3行
期望支持的方式Mutiple InputmaxSize 1000 ;最多为3行
紧急程度Dropdown
操作Delete ButtonMandatory

校验

  • 列表默认带有一行空行，方便用户第一次进来填写内容
  • 每一行的操作列都有删除按钮，用于删除当前行
  • 列表下方显示tips："仅在工作不饱和时鼓励自主学习。学习内容不限，但建议与项目相关。"
  • tips下方显示两个按钮，新增按钮和重置按钮，新增按钮用户在列表最下面新增空行，重置用于一次性清空列表内容
  • 紧急程度列的options：低，中高，紧急.从DB获取
表单底部

在表单的底部最右侧显示3个按钮：取消,保存和提交按钮 ，且底部的框要固定在下方，不随滚动条滚动

校验
  • 点击取消按钮回到Dashboard页面，如果当前表单有任何改动，拦截当前路由并弹框询问用户是否保存再退出，点击Yes，保存为草稿并退出，点击No，不保存直接退出
  • 点击保存按钮保存当前表单为草稿，不做任何校验，保存成功后继续停留在当前页
  • 点击提交按钮提交当前表单，在前端使用react-hook-form对所有必填项做必填校验，校验通过才能提交到后端，提交成功后跳转到Dashboard页面
  • 校验的错误提示显示在field下方，用红色文字标识，重新编辑后如果校验通过，提示文字立即消失

3.5 Team Mangement

Name:Team Mangement
Description:Team leader查看具体月份下其所在组的所有成员的汇报记录

逻辑

  • 不同Team的teamleader只能查看自己组内成员的汇报记录
  • 切换不同的月份查看所选月份下所有组员的提交记录，点击具体的记录可以查看详情
  • 页面Header的最右侧放置下拉框，用于筛选当年不同月份下的记录，默认选中当前月份
  • Header下方放置记录列表，列出所选月份下所有组员的提交记录，提交状态是已提交，而不是草稿，按工号降序排列，列头有：操作，工号，姓名，月份，提交时间

校验

  • 月份下拉框的内容是1-12个月，选中月份后立即刷新记录列表
  • 每次查询所选月份下的已提交状态的记录
  • 操作列里显示查看按钮，点击跳转到汇报的详情页，详情页只读

3.6 Admin Mangement

Name:Admin Mangement
Description:管理员查看所有人的汇报记录并对月度提交截止日之前的人

逻辑

  • 按照月份查看所有组的提交记录，使用列表分开展示三个组的记录，且未提交的排在最前面，草稿的状态也属于未提交，整行使用橙色高亮标识
  • 页面Header的最右侧放置下拉框，用于筛选当年不同月份下三个组的汇报记录
  • Header下方从上到下依次展示前端组，后端组，测试组三个列表
  • 每个列表展示一样的列头，列头有：工号，姓名，组名，月份，状态，提交时间

校验

  • 月份下拉框的内容是1-12个月，选中月份后立即刷新记录列表
  • 未创建或者是草稿状态都归于未提交，未提交的一行使用橙色背景高亮显示
  • 未提交的记录排在最前面，再按照工号升序排列
  • 只有已提交的状态显示提交时间，其他状态留空显示

3.6 Admin Setting

Name:Admin Setting
Description:管理员配置当前年份内的每个月的填写时间范围，配置每个月是否开启提交，开启提交后Dashboard页面的提交按钮为active，否则为disabled状态

逻辑
提供一个列表，显示当前年份1-12个月的配置，每一行显示4列，分别是月份,汇报日期，开启提交，最后更新时间，月份显示yyyy-MM格式，汇报日期显示yyyy-MM-dd - yyyy-MM-dd格式,只有当前月份允许用户选择时间范围，其他月份都是只读，开启提交列显示switch按钮，是否开启提交状态，默认未开启，最后更新时间显示yyyy-MM-dd HH:mm格式，只有当前月份这一行允许编辑，其他月份都是已读状态

校验
汇报日期的日期选择器校验规则：开始时间小于结束时间；开始时间大于前一个月份汇报日期的结束时间； 只允许当前月份可以编辑汇报日期和操作开启提交的switch按钮，其他月份都是已读 汇报日期列在当前月份里显示DateRangepicker选择器，其他月份显示已填写的文字，使用"---"代替空值

4. 非功能需求

类型要求
性能查询响应时间 ≤ 2秒
可用性系统可用性 ≥ 99.5%
兼容性支持主流浏览器（Chrome, Firefox, Safari, Edge）
可维护性代码需有单元测试覆盖

5. 技术栈

  • 前端使用react 19.x,UI框架使用@mui/material 5.x的版本，其他UI相关的优先使用mui生态相关的库，例如Table使用@mui/x-data-grid，表单使用react-hook-form 7.x，代码规则符合eslint
  • 前端开发中请复用组件，提取公共组件，遵循最优的组件设计规则，多用复合组件的理念
  • 后端使用nestjs，数据库使用MongoDB，使用jwt作为权限认证的方式，只使用accesstoken，token过期时间为8个小时，过期后直接登出，数据库最新性能最优的方式，
avatar
文章
阅读
粉丝