我的工作数据工作台是个人工作入口聚合页,负责把消息中心、下载中心、问题反馈、系统需求等常用功能按菜单权限整理成可搜索、可跳转、可记忆最近使用的工作台。

在这里插入图片描述

本文基于 MenuViewSet.mywork_router、菜单权限树和 MyWorkWorkWorkbenche 组件,说明如何把个人菜单、最近使用、关键词检索和路由跳转,转换成 Codex 可执行的项目代码生成任务。

设计与需求

我的工作数据工作台不能按普通 CRUD 页面理解。它没有独立业务表,后端入口是 server_backend/dvadmin/system/views/menu.py 中的 mywork_router,该接口会读取当前用户可见菜单树,并优先返回“我的功能”节点;如果没有该节点,再回退到“我的工作”。前端入口为 server_vue3/src/views/system/Workbenches/MyWork/index.vue,实际渲染逻辑在 server_vue3/src/views/system/Workbenches/components/MyWorkWorkWorkbenche.vue

交给 Codex 的任务需要把它理解成“个人菜单工作台”。后端负责按角色权限返回菜单树,前端负责把树形菜单压平成可点击模块,提供分类 tab、关键词搜索、最近使用记录和路由跳转。最近使用和激活 tab 保存在 localStorage,这属于页面状态回显,不能写成后端业务字段。

验收阶段

生成阶段

设计阶段

输入阶段

个人入口

菜单权限

本地状态

菜单树

分组转换

搜索最近

路由跳转

读取源码

生成后端

生成前端

状态回显

PDD验收

需求层描述设计层转换Codex 代码生成方向
用户需要个人工作入口mywork_router 返回“我的功能”或“我的工作”菜单树。生成系统菜单接口说明、角色权限过滤和空树处理。
菜单树需要变成卡片toMyWorkGroups 把根节点 children 转成工作台分组。生成树形转换、叶子节点提取和分组渲染。
用户需要快速定位功能keyword 对当前分组的模块名称做搜索。生成关键词过滤、空结果提示和输入状态。
常用入口需要回显recentIds 使用 my_work_workbench_recent 存入 localStorage生成最近使用读取、写入、去重和数量限制。
页面需要记住位置activeName 使用 my_work_workbench_active_tab 保存激活 tab。生成激活分组读取、校验和回退策略。
卡片需要稳定跳转handleOpen 推入最近使用,再执行 router.push({ path })生成路由跳转、无 path 防护和键盘交互。

可以直接使用下面的Prompt进行模块功能的设计

请 Codex 基于教育管理系统真实源码设计“我的工作数据工作台”模块。

模块定位:
我的工作数据工作台用于聚合当前用户可访问的个人工作入口,支持菜单分组、关键词搜索、最近使用记录、激活 tab 记忆和路由跳转。

源码范围:
server_backend/dvadmin/system/views/menu.py
server_vue3/src/views/system/Workbenches/MyWork/index.vue
server_vue3/src/views/system/Workbenches/components/MyWorkWorkWorkbenche.vue
server_vue3/src/components/commonWorkbenches/api.ts

接口范围:
GET /api/system/menu/mywork_router/

关键状态:
systemList:工作台分组
activeName:当前激活分组
keyword:搜索关键词
recentIds:最近使用菜单 ID
my_work_workbench_recent:最近使用本地缓存 key
my_work_workbench_active_tab:激活 tab 本地缓存 key

设计要求:
1. 输出页面结构、后端菜单查询、权限规则、前端状态和验收标准。
2. 说明 mywork_router 如何选择“我的功能”或“我的工作”菜单树。
3. 说明前端如何把树形菜单转成分组和入口卡片。
4. 说明最近使用和激活 tab 只存在 localStorage,不进入后端模型。
5. 只允许设计源码中存在的数据联动和本地状态回显能力。

后端设计

后端设计重点不是新增我的工作模型,而是返回当前用户可见的个人菜单树。server_backend/dvadmin/system/views/menu.py 中的 mywork_router 会调用 _get_role_filtered_menu_queryset(request.user) 获取按角色过滤后的菜单,再通过 WebRouterSerializer_build_tree 构造成树。接口优先查找名称为“我的功能”的节点;如果不存在,再查找“我的工作”节点。

这个设计让工作台入口完全受菜单权限控制。后端只返回用户可访问的树,不需要在前端再判断角色,也不需要在工作台里写死消息中心或下载中心。Codex 补齐时应重点检查空树、无权限、菜单名称变化和树形序列化字段是否稳定。

后端设计项设计重点Codex 生成方向
接口入口GET /api/system/menu/mywork_router/保持系统菜单接口路径和 SuccessResponse 返回结构。
权限菜单_get_role_filtered_menu_queryset 返回当前用户可见菜单。生成角色权限过滤和越权菜单不可见测试。
树形构造WebRouterSerializer 后使用 _build_tree 构造菜单树。保持 children、path、name、image 等字段。
节点选择优先返回“我的功能”,缺失时回退“我的工作”。生成回退策略和空数组处理。
返回结构返回 data=[target_tree]total=len(target_tree)前端按根节点 children 转换分组。

可以直接使用下面的Prompt进行后端代码的设计

请 Codex 按“我的工作数据工作台”业务从零设计或补齐后端代码。

后端源码范围:
server_backend/dvadmin/system/views/menu.py

必须遵守的现有结构:
1. 接口为 MenuViewSet 的 mywork_router action。
2. 接口路径为 GET /api/system/menu/mywork_router/。
3. 菜单数据来自当前用户角色过滤后的 Menu 查询集。
4. 序列化使用 WebRouterSerializer。
5. 返回节点优先为“我的功能”,没有时回退“我的工作”。

需要实现或校准:
1. 保持角色权限过滤。
2. 保持树形菜单 children、path、name、image、component 字段。
3. 找不到目标节点时返回空数组,不报 500。
4. 返回 total 和 msg,便于前端处理空状态。
5. 不新增我的工作业务模型。

输出涉及文件、接口返回结构、权限规则、空状态处理和测试建议。

前端设计

前端设计重点不是静态卡片,而是把菜单树转换成个人工作台状态。server_vue3/src/views/system/Workbenches/MyWork/index.vue 只挂载 MyWorkWorkWorkbenche。组件内部使用 GetList(API_URL) 请求 /api/system/menu/mywork_router/,再通过 toMyWorkGroups 把根节点 children 转成分组。

MyWorkWorkWorkbenche.vue 提供完整页面状态:keyword 做模块名称搜索,activeName 记录当前 tab,recentIds 记录最近使用,RECENT_LIMIT=8 控制最近入口数量。flattenGroupChildren 会递归压平分组下的叶子菜单,保证深层菜单也能成为卡片;handleOpen 会先写入最近使用,再执行路由跳转。

前端设计项设计重点Codex 生成方向
页面入口MyWork/index.vue 挂载 MyWorkWorkWorkbenche保持入口轻量,不重复写业务逻辑。
接口调用组件请求 /api/system/menu/mywork_router/生成 loading、异常和空状态处理。
数据转换toMyWorkGroups 将根节点 children 转成分组。生成树形转换、叶子节点收集和分组回显。
搜索过滤keyword 对当前分组模块名称做过滤。生成搜索输入、清空状态和空结果提示。
最近使用recentIds 写入 localStorage,限制 8 条。生成去重、持久化和点击回显。
路由跳转handleOpen 写入最近使用并跳转。生成无 path 防护和键盘交互。

可以直接使用下面的Prompt进行前端代码的设计

请 Codex 按“我的工作数据工作台”业务生成或补齐前端页面代码。

前端源码范围:
server_vue3/src/views/system/Workbenches/MyWork/index.vue
server_vue3/src/views/system/Workbenches/components/MyWorkWorkWorkbenche.vue
server_vue3/src/components/commonWorkbenches/api.ts

页面现状:
1. MyWork/index.vue 挂载 MyWorkWorkWorkbenche。
2. MyWorkWorkWorkbenche 请求 /api/system/menu/mywork_router/。
3. toMyWorkGroups 将菜单树转换成工作台分组。
4. keyword 支持模块名称搜索。
5. recentIds 记录最近使用,使用 localStorage 持久化。
6. activeName 记录当前 tab,使用 localStorage 持久化。
7. handleOpen 负责写入最近使用并 router.push 跳转。

需要生成或修正:
1. 保持菜单树转换和叶子节点提取。
2. 保持最近使用去重和数量限制。
3. 保持激活 tab 本地记忆,保存的 tab 不存在时回退第一组。
4. 搜索结果为空时要有明确状态。
5. 图片缺失时使用图标回退。
6. 不新增源码中不存在的后端字段或业务接口。

输出页面结构、接口调用、状态管理、搜索过滤、最近使用、路由跳转和验收步骤。

扩展功能

我的工作数据工作台的扩展能力来自数据联动和本地状态回显。它超出静态导航页的地方,是后端菜单树、角色权限、前端搜索、最近使用和激活 tab 都参与同一个工作台体验。

扩展功能主要用途落地重点
数据联动将菜单树、分组、搜索、卡片和路由跳转串成稳定数据流。后端返回结构与前端分组转换必须一致。
本地状态回显记录最近使用和当前激活分组,提升重复访问效率。状态只保存在 localStorage,不能当作后端业务数据。

数据联动

数据联动从 mywork_router 返回的菜单树开始。前端先把根节点 children 转换成分组,再递归提取叶子菜单,搜索时过滤当前分组下的卡片,点击时把菜单 path 交给路由。任何一个字段缺失,都可能造成卡片无法显示或无法跳转。

结果阶段

处理阶段

输入阶段

菜单树

搜索词

当前分组

分组转换

叶子提取

过滤卡片

卡片列表

最近使用

路由跳转

交给 Codex 生成时,字段边界要明确。name 用于搜索和展示,path 用于跳转,image 用于卡片图片,id 用于最近使用;如果 children 仍有层级,需要递归压平后再展示。

可以直接使用下面的Prompt进行数据联动设计

请 Codex 基于真实源码补齐“我的工作数据工作台”的数据联动设计。

源码范围:
server_backend/dvadmin/system/views/menu.py
server_vue3/src/views/system/Workbenches/MyWork/index.vue
server_vue3/src/views/system/Workbenches/components/MyWorkWorkWorkbenche.vue
server_vue3/src/components/commonWorkbenches/api.ts

联动对象:
mywork_router、systemList、activeName、keyword、recentIds、children、id、name、path、image

联动要求:
1. 后端返回当前用户可见的“我的功能”或“我的工作”菜单树。
2. 前端把根节点 children 转换成工作台分组。
3. 深层 children 要递归压平成可点击卡片。
4. keyword 只过滤当前展示范围内的模块名称。
5. 点击卡片时写入最近使用并跳转 path。
6. 不新增源码中不存在的业务接口。

输出接口设计、前端交互、字段转换、异常处理、权限约束和验收清单。

本地状态回显

本地状态回显体现在最近使用和激活 tab。my_work_workbench_recent 保存最近点击过的菜单 ID,my_work_workbench_active_tab 保存当前激活分组。页面加载时先读取本地状态,再请求菜单数据;如果本地保存的分组已经不存在,则回退到第一组。

结果阶段

处理阶段

输入阶段

本地缓存

菜单数据

读取最近

校验Tab

写入状态

最近入口

恢复分组

Codex 生成时要约束边界:本地状态不能绕过权限。最近使用里保存的 ID 如果不在本次后端返回菜单中,就不展示;激活 tab 如果已无权限或已删除,也要回退到可见分组。

可以直接使用下面的Prompt进行本地状态回显设计

请 Codex 基于真实源码补齐“我的工作数据工作台”的本地状态回显能力。

源码范围:
server_vue3/src/views/system/Workbenches/components/MyWorkWorkWorkbenche.vue

状态字段:
RECENT_KEY = my_work_workbench_recent
ACTIVE_TAB_KEY = my_work_workbench_active_tab
RECENT_LIMIT = 8
recentIds
activeName

设计要求:
1. 页面加载时读取最近使用和激活 tab。
2. 菜单接口返回后校验本地 tab 是否仍然存在。
3. 点击卡片时最近使用去重并限制 8 条。
4. 最近使用只展示当前菜单数据中仍然存在的卡片。
5. localStorage 读写异常不能影响页面加载。

输出状态流程、异常边界、前端实现建议和验收用例。

Codex开发标准

使用 Codex 开发我的工作数据工作台时,不能让它生成静态导航页。PDD、SOP、接口权限规则和验收标准需要约束后端菜单查询、前端分组转换、本地状态回显和路由跳转。

验收交付

Codex开发

模块设计

输入约束

需求边界

PDD设计

SOP目录

接口权限

后端设计

前端设计

状态回显

读取上下文

生成后端

生成前端

联动补齐

功能自检

PDD验收

问题修复

模块交付

SOP 标准

SOP 用于约束代码目录、文件职责和开发顺序。我的工作数据工作台代码涉及系统菜单接口、系统工作台入口、工作台组件和通用请求封装,Codex 需要先确认这些职责边界。

docs/modules/我的工作数据工作台/
├── pdd.md
├── api.md
├── test-cases.md
└── codex-sop.md

server_backend/dvadmin/system/views/
└── menu.py

server_vue3/src/views/system/Workbenches/MyWork/
└── index.vue

server_vue3/src/views/system/Workbenches/components/
└── MyWorkWorkWorkbenche.vue

server_vue3/src/components/commonWorkbenches/
└── api.ts
开发阶段Codex 执行目标输出结果
模块设计读取 mywork_routerMyWork/index.vueMyWorkWorkWorkbenche.vue 和请求封装。输出接口、菜单结构、页面状态和权限边界。
文档规划建立 PDD、API、测试和 SOP 文档。形成 pdd.mdapi.mdtest-cases.mdcodex-sop.md
后端实现校准菜单权限过滤、目标节点选择、树形返回和空状态。接口返回个人工作菜单树。
前端实现校准分组转换、搜索、最近使用、激活 tab 和跳转。页面可搜索、回显最近入口并跳转。
数据联动打通菜单树、分组、卡片、搜索和本地状态。后端返回与前端展示一致。
验收修复按 PDD 检查权限、空状态、本地缓存和路由跳转。输出验收结果与需修复文件位置。

可以直接使用下面的Prompt进行SOP撰写

请 Codex 按教育管理系统模块开发 SOP,从零实现或补齐“我的工作数据工作台”模块。

执行要求:
1. 先输出目录结构,不要直接写代码。
2. 先生成 docs/modules/我的工作数据工作台/pdd.md、api.md、test-cases.md 和 codex-sop.md。
3. 文档确认模块边界后,再根据文档生成或修正项目代码。
4. 后端范围限定在 dvadmin/system/views/menu.py 的 mywork_router。
5. 前端范围限定在 MyWork/index.vue、MyWorkWorkWorkbenche.vue 和 commonWorkbenches/api.ts。
6. 后端需要覆盖菜单权限过滤、目标节点选择、树形返回和空状态。
7. 前端需要覆盖分组转换、搜索过滤、最近使用、激活 tab、图片回退和路由跳转。
8. 不生成源码中不存在的扩展能力。

输出目录结构、开发阶段表、后端任务清单、前端任务清单、状态回显清单和验收修复清单。

PDD 标准

PDD 是模块设计与验收文档,用来约束 Codex 输出是否符合真实业务。我的工作数据工作台的 PDD 要把菜单来源、权限过滤、分组转换、搜索、最近使用和路由跳转写成可验证条目。

验收维度验收标准需要检查的文件
业务目标模块能按权限聚合个人工作入口,并展示为可搜索工作台。pdd.mdmenu.pyMyWorkWorkWorkbenche.vue
页面结构页面包含分组、搜索、最近使用、卡片、图片或图标回退、空状态。MyWork/index.vueMyWorkWorkWorkbenche.vue
数据模型不新增业务模型,菜单数据来自系统菜单树。menu.py
接口规则/api/system/menu/mywork_router/ 返回“我的功能”或“我的工作”树。menu.pyapi.md
权限控制普通用户只看到角色授权菜单。menu.pytest-cases.md
数据联动菜单树、分组、搜索、最近使用和路由跳转保持一致。MyWorkWorkWorkbenche.vue
本地状态回显最近使用和激活 tab 可恢复,但不能展示无权限菜单。MyWorkWorkWorkbenche.vue
测试用例覆盖有菜单、无菜单、无权限、搜索为空、本地缓存损坏和路由跳转。test-cases.md

可以直接使用下面的Prompt进行PDD 验收

请 Codex 根据 docs/modules/我的工作数据工作台/pdd.md 对“我的工作数据工作台”模块进行验收。

验收范围:
server_backend/dvadmin/system/views/menu.py
server_vue3/src/views/system/Workbenches/MyWork/index.vue
server_vue3/src/views/system/Workbenches/components/MyWorkWorkWorkbenche.vue
server_vue3/src/components/commonWorkbenches/api.ts
docs/modules/我的工作数据工作台/api.md
docs/modules/我的工作数据工作台/test-cases.md

验收维度:
1. 业务目标:是否能聚合个人工作入口。
2. 页面结构:是否包含分组、搜索、最近使用和卡片跳转。
3. 数据模型:是否未误建业务模型。
4. 接口规则:mywork_router 返回结构是否符合前端转换。
5. 权限控制:是否只展示授权菜单。
6. 数据联动:菜单树、搜索、最近使用和 router.push 是否一致。
7. 本地状态回显:缓存损坏、tab 不存在、菜单变更是否处理。
8. 测试用例:是否覆盖成功路径和失败路径。

输出验收结果表,标记通过、未通过和需要修复的文件位置。不要只给结论,需要指出具体问题、影响范围和修复建议。

总结

我的工作数据工作台不是静态导航页,而是教育管理系统中由个人菜单权限和本地状态共同驱动的工作入口闭环。它把后端菜单树、前端分组搜索、最近使用和路由跳转连接起来,让用户快速回到常用功能。

用 Codex 开发该模块时,PDD 负责定义菜单来源和验收标准,SOP 负责约束系统菜单接口与前端组件职责,Prompt 负责把权限查询、分组转换、本地状态回显和路由跳转拆成分阶段任务。这样生成的代码不会偏离真实工作台结构。

Logo

葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。

更多推荐