文档已在每个功能模块的合适位置预埋了 92 张 UI 截图占位。你只需按本清单截图、用对应文件名覆盖占位文件,刷新即可显示。
- 每个占位是一张透明 1×1 占位图(默认不可见,页面保持干净)+ 一行
<img src="/images/文件名.png"> 引用。 - 你把真实截图存成同名文件覆盖占位图,刷新后该位置就显示你的截图。
- 没补的图保持透明占位,不会显示裂图。
- 启动平台(后端
mvn spring-boot:run -Dspring-boot.run.profiles=h2 + 前端 pnpm dev),登录(h2 密码 123456)。 - 按下表「应截什么界面」导航到对应页面,截屏。
- 把图片命名为下表的「文件名」,存到
docs-site/.vuepress/public/images/(覆盖同名占位图)。 - 浏览器刷新(dev server 会热更新)-> 截图显示。
命名规则
文件名 = 文档目录-文档页-N.png(N=1,2,3)。例:system/user.md 的第 1 张 = system-user-1.png。文件名必须完全一致(含大小写、扩展名 .png)。
不必一次补完
92 张可分批补。优先补设计器类(表设计器、表单设计器、流程设计器)和系统管理页,这些最能帮助读者理解。纯后端逻辑页的图可后补或不补。
| 文件名 | 应截什么界面 | 文档页 |
|---|
dashboard.png | /dashboard 工作台首页整体布局 | guide/introduction.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
system-user-1.png | /system/user 用户列表 + 搜索筛选 + 分页 | system/user.md |
system-user-2.png | 新增/编辑用户弹窗(部门/岗位/应用多选) | system/user.md |
system-user-3.png | 重置密码确认弹窗 + 启用/禁用开关 | system/user.md |
system-role-1.png | /system/role 角色列表 | system/role.md |
system-role-2.png | 新增/编辑角色表单 | system/role.md |
system-role-3.png | 分配菜单权限树(el-tree 勾选回显) | system/role.md |
system-menu-1.png | /system/menu 菜单树形列表 | system/menu.md |
system-menu-2.png | 菜单新增/编辑表单(类型/路由/权限标识) | system/menu.md |
system-menu-3.png | 目录-菜单-按钮三级树展开 | system/menu.md |
system-dept-1.png | /system/dept 部门树形列表 | system/dept.md |
system-dept-2.png | 部门新增/编辑弹窗 | system/dept.md |
system-dept-3.png | 多级部门组织架构树 | system/dept.md |
system-post-1.png | /system/post 岗位列表 | system/post.md |
system-post-2.png | 岗位新增/编辑弹窗 | system/post.md |
system-dict-1.png | /system/dict 字典双栏(类型+数据) | system/dict.md |
system-dict-2.png | 字典数据编辑(标签/值/颜色) | system/dict.md |
system-dict-3.png | DictSelect 字典下拉渲染效果 | system/dict.md |
system-permission-designer-1.png | /designer/permission 角色×菜单勾选矩阵 | system/permission-designer.md |
system-permission-designer-2.png | 按钮权限配置面板(增删改查开关) | system/permission-designer.md |
system-permission-designer-3.png | 数据权限规则配置(全部/本部门/本人/自定义) | system/permission-designer.md |
system-audit-log-1.png | /system/settings/system-log 审计日志列表 | system/audit-log.md |
system-sso-1.png | 登录页底部 SSO 按钮区 | system/sso.md |
system-sso-2.png | /system/sso-provider SSO 提供商配置 | system/sso.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
engine-table-designer-1.png | /database/table-designer 表设计器主界面(表名+字段表格) | engine/table-designer.md |
engine-table-designer-2.png | 字段属性配置面板 | engine/table-designer.md |
engine-table-designer-3.png | 生成 SQL 预览弹窗(CREATE TABLE DDL) | engine/table-designer.md |
engine-form-designer-1.png | /designer/form 表单设计器三栏(组件/画布/属性) | engine/form-designer.md |
engine-form-designer-2.png | 运行时表单渲染效果 | engine/form-designer.md |
engine-form-designer-3.png | 组件属性面板(绑定字段/必填/审批绑定) | engine/form-designer.md |
engine-list-designer-1.png | /designer/list 列表设计器三栏 | engine/list-designer.md |
engine-list-designer-2.png | 运行时列表渲染(分页表格+搜索+操作) | engine/list-designer.md |
engine-list-designer-3.png | 列配置与搜索条件配置 | engine/list-designer.md |
engine-chart-designer-1.png | /designer/chart 图表设计器(维度/指标) | engine/chart-designer.md |
engine-chart-designer-2.png | 运行时图表渲染(ECharts) | engine/chart-designer.md |
engine-chart-designer-3.png | 图表样式配置面板 | engine/chart-designer.md |
engine-page-designer-1.png | /designer/page/builder/:id 页面设计器三栏 | engine/page-designer.md |
engine-page-designer-2.png | 运行时组合页面渲染 | engine/page-designer.md |
engine-page-designer-3.png | 页面/组件属性面板 | engine/page-designer.md |
engine-dynamic-data-1.png | /database/data-manager 数据管理器列表 | engine/dynamic-data.md |
engine-report-1.png | /designer/report/builder/:id 报表设计器 | engine/report.md |
engine-report-2.png | 运行时报表渲染(图表+卡片+表格) | engine/report.md |
engine-print-template-1.png | /designer/print 打印模板设计器 | engine/print-template.md |
engine-print-template-2.png | 打印模板预览 | engine/print-template.md |
engine-table-relation-1.png | /database/relation 表关系列表 | engine/table-relation.md |
engine-table-relation-2.png | 新建表关系弹窗 | engine/table-relation.md |
engine-runtime-1.png | /app/:appId 应用运行时页面 | engine/runtime.md |
engine-open-api-1.png | 表设计器内「开放接口配置」面板 | engine/open-api.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
bpm-designer-1.png | /designer/bpm SimpleProcessDesignerV2 流程画布 | bpm/designer.md |
bpm-designer-2.png | 审批节点候选人策略配置面板 | bpm/designer.md |
bpm-designer-3.png | 会签节点配置(通过比例/规则) | bpm/designer.md |
bpm-model-definition-1.png | /bpm/model 流程模型列表 | bpm/model-definition.md |
bpm-model-definition-2.png | 模型部署操作(draft->deployed) | bpm/model-definition.md |
bpm-instance-task-1.png | /bpm/todo 待办任务列表 | bpm/instance-task.md |
bpm-instance-task-2.png | /bpm/instance 实例详情(流程图+审批记录) | bpm/instance-task.md |
bpm-instance-task-3.png | 审批通过/驳回弹窗(填意见) | bpm/instance-task.md |
bpm-sign-transfer-delegate-1.png | 会签审批进度展示 | bpm/sign-transfer-delegate.md |
bpm-sign-transfer-delegate-2.png | 转办/委派目标人选择弹窗 | bpm/sign-transfer-delegate.md |
bpm-status-callback-1.png | 业务单据列表 approval_status 列(审批中/已通过/已驳回) | bpm/status-callback.md |
bpm-biz-approval-1.png | 业务表单「提交审批」按钮与状态 | bpm/biz-approval.md |
bpm-notification-1.png | 通知中心列表(待办/抄送/催办/结果) | bpm/notification.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
codegen-generator-1.png | /generator/code 代码生成器主界面 | codegen/generator.md |
codegen-generator-2.png | 预览生成代码(多 Tab) | codegen/generator.md |
codegen-generator-3.png | 生成/下载代码 | codegen/generator.md |
codegen-app-export-1.png | 应用导出对话框(选模式) | codegen/app-export.md |
codegen-app-export-2.png | ExportOptions 导出选项表单 | codegen/app-export.md |
codegen-exported-structure-1.png | 导出 zip 解压后目录结构 | codegen/exported-structure.md |
codegen-mobile-export-1.png | 移动端(uni-app)运行效果 | codegen/mobile-export.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
ai-config-1.png | /system/settings/ai-model 模型配置列表 | ai/config.md |
ai-config-2.png | 新增/编辑模型 + 测试连通 | ai/config.md |
ai-chat-1.png | AI 助手对话界面 | ai/chat.md |
ai-chat-2.png | 表单设计器 AI 流式对话面板 | ai/chat.md |
ai-chat-3.png | 应用 AI 规则后的表单画布 | ai/chat.md |
ai-generation-1.png | AI 生成表字段(描述->字段列表) | ai/generation.md |
ai-generation-2.png | 生成 SQL/表单配置结果 | ai/generation.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
business-industry-template-1.png | /template/list 行业模板列表 | business/industry-template.md |
business-industry-template-2.png | 使用模板生成应用 | business/industry-template.md |
business-erp-1.png | /erp/purchase 采购订单列表 + approval_status 列 | business/erp.md |
business-erp-2.png | /erp/supplier 供应商管理列表 | business/erp.md |
business-erp-3.png | 提交审批弹窗 | business/erp.md |
business-foundation-1.png | 基金会后台 fnd_ 表内容列表(从 /application 进入) | business/foundation.md |
business-hr-1.png | /hr/employee 员工花名册 + 状态列 | business/hr.md |
business-hr-2.png | /hr/demand 招聘需求列表 | business/hr.md |
| 文件名 | 应截什么界面 | 文档页 |
|---|
frontend-overview-1.png | /dashboard 整体布局(顶栏+侧边栏+内容区) | frontend/overview.md |
frontend-router-1.png | 登录后动态加载的侧边栏菜单树 | frontend/router.md |
frontend-store-1.png | 顶栏用户昵称/信息下拉(Store 持久化) | frontend/store.md |
frontend-components-1.png | ProTable 通用表格(序号/分页/操作) | frontend/components.md |
frontend-components-2.png | QueryForm 查询表单(搜索/重置) | frontend/components.md |
frontend-components-3.png | DictSelect 字典下拉效果 | frontend/components.md |
frontend-designers-1.png | FormCreate 表单设计器三栏 | frontend/designers.md |
frontend-designers-2.png | SimpleProcessDesignerV2 流程节点链 | frontend/designers.md |
frontend-designers-3.png | BpmnDesigner BPMN 2.0 画布 | frontend/designers.md |
- 截图建议 1440×900 或更高,存为
.png。 - 浏览器用「全页面截图」插件或系统快捷键(macOS
Cmd+Shift+4 选区)。 - 同一页面的多张图按 1/2/3 顺序截(如列表页、新增弹窗、详情)。
- 截完一批刷新即可看到效果,不用重启 dev server。