实验室信息管理prompt.md 9.1 KB
根据文件内容，为实验室信息管理模块按三种用户角色输出完整的设计生成提示词如下：
角色一：校级管理员
你是一名专业的前端UI开发工程师，请根据以下规范，生成一个完整的"实验室信息管理"页面（校级管理员视角）HTML文件，内联CSS+JavaScript，无需构建工具。
设计规范
- 分辨率：1920×1080px，自适应屏幕
- 主色：#0045af（标题、菜单选中、关键按钮）
- 辅助色：成功#52c41a / 失败#ff5454 / 警告#ff9000 / 开关#0183fa
- 背景色：#ffffff
- 字体：Microsoft YaHei，主要色#333333，次要色#999999，不可交互色#cccccc
- 面板圆角：15px，边框：rgba(30,144,255,0.22)
- 图标：线性单色，尺寸偶数px，风格统一
- 布局：CSS Grid，grid-template-columns: 2fr 1.5fr 4.5fr 2fr
- 图表库：ECharts 5.4.3（CDN引入）
- 深蓝科幻风整体视觉基调
整体布局
三段式布局：顶部导航栏 + 左侧菜单 + 右侧内容区
顶部导航栏（固定高度60px）
- 左侧：LOGO图标（深蓝科幻风SVG占位）+ 系统名称"实验室安全智慧化管控系统"
- 中间：子系统切换Tab（数据可视化 / 安全教育考试 / 实验室准入 / 化学品智能管控 / 危废回收处置 / 安全检查管理 / 实验室管理[默认选中] / 更多▼）
- 右侧：消息图标 / 首页图标 / 帮助图标 / 头像+用户名+下拉（个人中心 / 退出）
左侧菜单（宽度220px，深蓝背景）
菜单项：
- 实验室数据总览
- 实验室信息管理【当前选中】
- 实验室进出记录
- 安全信息牌管理
- 实验室值班表
- 实验室巡查记录
右侧内容区
面包屑：实验室管理 > 实验室信息管理
标签页切换（横向Tab）：实验室 / 功能房 / 科研设施 / 其他 / 房间配置
功能内容（实验室标签页，默认展示）
实验室类型子分类
横向切换Tag：教学实验室 / 科研实验室 / 公共平台
筛选查询区
- 学院（下拉选择）
- 实验室名称（输入框）
- 分级分类（下拉选择）
- 状态（下拉：启用/停用）
- 查询按钮 / 重置按钮
操作按钮区（右对齐）
新增 / 批量启用 / 批量停用 / 导出
数据列表
列表表头：序号 / 实验室名称 / 所属学院 / 实验室分级 / 实验室分类 / 负责人 / 状态 / 创建时间 / 操作 操作列：查看 / 编辑 / 更多▼（关联配置 / 准入配置 / 关闭准入 / 信息牌下载 / 实验室设备）
分页组件
共666条，每页20条（可选10/20/30/50），页码切换+跳转输入框
审批功能（校级管理员专属）
在操作区额外展示【待审批】入口角标（红色数字提示），点击弹出抽屉/弹窗，显示：
- 院级管理员提交的新增/启用/停用/变更申请列表
- 实验室降级申请列表（院级已通过，待校级审批） 弹窗内容：申请信息详情 / 通过按钮（#52c41a）/ 驳回按钮（#ff5454，驳回需填写原因输入框）
房间配置标签页（仅校级管理员可见）
房间类型配置列表：类型名称 / 描述 / 操作（编辑/删除） 操作区：新增房间类型按钮
初始化行为
- 列表使用模拟数据（至少5条）渲染
- Tab切换交互正常
- 操作列"更多"下拉菜单可展开
- 审批弹窗可打开/关闭，驳回时显示原因输入框 角色二：院级管理员
你是一名专业的前端UI开发工程师，请根据以下规范，生成一个完整的"实验室信息管理"页面（院级管理员视角）HTML文件，内联CSS+JavaScript，无需构建工具。
设计规范
（同校级管理员规范，主色#0045af，背景#ffffff，字体Microsoft YaHei，面板圆角15px，边框rgba(30,144,255,0.22)，深蓝科幻风）
整体布局
同三段式：顶部导航栏 + 左侧菜单 + 右侧内容区（结构同校级，当前用户名显示为院级管理员账号）
权限说明
院级管理员仅管理本学院下的实验室，无"房间配置"标签，无法直接审批校级事项。
功能内容
标签页切换
实验室 / 功能房 / 科研设施 / 其他（无"房间配置"Tab）
实验室标签页
实验室类型子分类：教学实验室 / 科研实验室 / 公共平台
筛选查询区（数据范围限本学院）：
- 实验室名称（输入框）
- 分级分类（下拉）
- 状态（下拉：启用/停用）
- 查询 / 重置
操作按钮区（右对齐）： 新增 / 批量启用 / 批量停用 / 导出 （新增、启用、停用、变更操作提交后进入校级审批流，按钮点击后显示"提交成功，等待校级管理员审批"的Toast提示）
数据列表 列表表头：序号 / 实验室名称 / 实验室分级 / 实验室分类 / 负责人 / 状态 / 审批状态 / 创建时间 / 操作 审批状态列：待审批（橙色#ff9000）/ 审批通过（绿色#52c41a）/ 审批驳回（红色#ff5454）/ — 操作列：查看 / 编辑 / 更多▼（关联配置 / 准入配置 / 关闭准入 / 信息牌下载 / 实验室设备）
编辑操作页面
- 右上角显示：取消 / 保存/提交 按钮
- 面包屑更新为：实验室管理 > 实验室信息管理 > 编辑实验室
- 提交后弹窗确认："提交后将进入校级审批流程，确认提交？" 确认/取消
审批功能（院级管理员专属）
顶部或列表操作区显示【待我审批】入口，点击弹出：
- 本学院实验室负责人/管理员提交的降级申请列表
- 申请详情（实验室名称、降级原因、修改内容对比）
- 通过（#52c41a）/ 驳回（#ff5454，必填驳回原因）
- 通过后流转至校级管理员审批
新增实验室弹窗/页面
字段包含：实验室名称* / 所属楼栋房间号* / 实验室类型* / 分级分类* / 面积 / 负责人* / 管理员 / 危险源（多选标签）/ 备注 提交按钮提交后显示"提交成功，等待校级管理员审批"
初始化行为
- 默认全屏
- 模拟数据含不同审批状态（至少各1条）
- 编辑/新增/审批弹窗交互完整
- Tab切换正常 角色三：实验室负责人及管理员
你是一名专业的前端UI开发工程师，请根据以下规范，生成一个完整的"实验室信息管理"页面（实验室负责人/管理员视角）HTML文件，内联CSS+JavaScript，无需构建工具。
设计规范
（同前，主色#0045af，背景#ffffff，字体Microsoft YaHei，面板圆角15px，边框rgba(30,144,255,0.22)，深蓝科幻风）
权限说明
实验室负责人及管理员只能操作自己负责的实验室，权限仅限：
- 修改实验室危险源（触发降级申请审批流）
- 手动降低实验室分级（触发降级申请审批流） 无新增、启用、停用权限，无"房间配置"Tab。
整体布局
同三段式（顶部导航 + 左侧菜单 + 右侧内容区） 用户名显示为实验室负责人账号
功能内容
标签页切换
实验室 / 功能房 / 科研设施 / 其他（共4个，无"房间配置"）
实验室标签页
实验室类型子分类：教学实验室 / 科研实验室 / 公共平台
筛选查询区（仅限本人负责的实验室）：
- 实验室名称（输入框）
- 状态（下拉）
- 查询 / 重置
操作按钮区：无新增/批量操作按钮（仅保留导出）
数据列表 列表表头：序号 / 实验室名称 / 实验室分级 / 实验室分类 / 状态 / 审批状态 / 操作 操作列：查看 / 编辑（仅可编辑危险源、分级字段）/ 更多▼（关联配置 / 准入配置 / 关闭准入 / 信息牌下载 / 实验室设备）
编辑操作（受限编辑）
点击编辑进入详情编辑页，面包屑：实验室管理 > 实验室信息管理 > 编辑实验室 可编辑字段（其余字段为只读）：
- 危险源（多选标签，修改后触发审批流）
- 实验室分级（下拉，只允许降低当前等级，如从三级改为四级）
右上角操作按钮：取消 / 提交 提交后弹窗提示："以下修改将触发实验室降级审批流程（院级 > 校级），确认提交？"
- 变更内容对比展示（原值 → 新值）
- 确认提交 / 取消
提交成功后：
- 列表审批状态更新为"待审批"（橙色#ff9000）
- Toast提示："提交成功，已进入降级审批流程，请等待院级管理员审批。"
审批流程状态追踪
列表审批状态列可点击查看当前进度，弹窗显示流程节点： [提交申请 ✓] → [院级审批（待审批/通过/驳回）] → [校级审批（待审批/通过/驳回）] → [降级结果] 每个节点显示操作人、时间、结论（驳回时展示驳回原因）
初始化行为
- 默认全屏
- 模拟数据（至少3条，含不同审批状态）
- 编辑页危险源修改/分级降级交互完整
- 审批流进度弹窗可打开/关闭
- 分级下拉只允许选择低于当前级别的选项
- Tab切换正常 以上三份提示词可分别发送给 AI 代码生成工具（如 Claude、Cursor 等）生成对应角色的完整 HTML 页面，每份提示词均覆盖了：布局结构、权限差异、交互逻辑、审批流、设计规范及初始化行为。