JeeSite V5.18.1 继续围绕 SpringBoot、Cloud、AI 与 Vue 生态迭代。本次升级的重点集中在 Vue 分离端体验、路由与 IFRAME 集成、Drawer 交互组件，以及安全审计和运维管理页面。对于已经采用 JeeSite 构建后台系统的团队来说，这些改动更像是日常开发中会直接用到的一组基础能力补齐。
Vue 分离端的页面集成更灵活
新版本新增 Vue 路由和 IFRAME 组件，并增强了路径中包含 hash 的场景支持。实际项目中，后台系统经常需要同时承载三类页面：
- Vue 单页应用内部页面；
- 外部系统或旧系统页面；
- 依赖 URL hash 定位模块、标签页或锚点的页面。
路由组件负责 Vue 页面之间的导航，IFRAME 组件则适合接入暂时无法改造成 Vue 页面的系统。对存量项目而言，这种组合可以降低一次性重构的压力，让新旧模块在同一个管理端中逐步迁移。
路径包含 hash 的支持也很重要。例如下面的地址中，#/dashboard 可能属于嵌入页面自身的路由，而不是宿主页面的路由：
https://legacy.example.com/app.html#/dashboard
处理这类地址时，应避免简单地截断或重新拼接 URL，否则可能导致 IFRAME 内部页面无法进入预期模块。可以这样实践：把完整地址作为一个整体交给 IFRAME 配置，并在路由跳转时使用编码后的参数。
const legacyUrl = "https://legacy.example.com/app.html#/dashboard";
const iframeRoute = {
path: "/legacy-dashboard",
component: () => import("@/views/common/IframePage.vue"),
meta: {
title: "旧系统看板",
iframe: true,
src: legacyUrl
}
};
export default iframeRoute;
上面的代码是通用实践示例，具体字段名称需要根据项目当前使用的 JeeSite Vue 路由配置进行调整。接入外部页面时，还需要确认目标系统的 X-Frame-Options、Content-Security-Policy 和登录态策略，否则路由配置正确也可能被浏览器拦截。
Drawer 让复杂表单和详情页更适合连续操作
V5.18.1 新增 Drawer 组件，并提供 scrollTop 属性，默认值为 true。这解决了一个常见的后台体验问题：用户在长列表中打开详情或编辑面板后，抽屉内容会保留上一次滚动位置，导致新打开的记录从中间位置开始显示。
可以把 scrollTop 理解为抽屉打开时的滚动策略：
<template>
<JeDrawer
v-model="visible"
title="用户详情"
:scrollTop="true"
size="520px"
>
<UserDetail :user-id="userId" />
</JeDrawer>
</template>
<script setup>
import { ref } from "vue";
const visible = ref(false);
const userId = ref(0);
function openUser(id) {
userId.value = id;
visible.value = true;
}
</script>
这是可改造的 Vue 示例，JeDrawer 的实际组件名和属性命名应以当前项目封装为准。默认启用滚动回顶部适合详情、编辑和新增场景；如果抽屉承载的是连续阅读内容，例如日志流或长文档，则可以考虑关闭该行为，避免用户切换后丢失阅读位置。
安全审计从“能查”走向“按对象追踪”
新版本增加 audit 安全审计相关能力，覆盖密码审计、按菜单审计用户，以及按用户审计角色和菜单。这类审计视角比单纯查看登录日志更接近权限治理的实际问题。
在企业后台中，安全人员通常需要回答几个具体问题：
- 哪些用户仍在使用不符合策略的密码？
- 某个高风险菜单当前被哪些用户访问或授权？
- 某个用户为什么拥有某个角色和菜单权限？
- 权限变更后，是否能够快速定位受影响的用户？
按菜单追踪用户，适合做高风险功能盘点，例如财务审批、用户管理和系统配置。按用户追踪角色与菜单，则更适合处理权限申请、离职交接和异常授权排查。
上线审计功能时，建议把它纳入权限治理流程，而不是只作为一个查询页面：
- 为密码审计定义明确的整改标准和处理时限。
- 对高风险菜单建立定期复核机制。
- 保留角色、菜单和用户关系变化的审计记录。
- 对审计结果设置最小访问权限，避免审计页面本身成为敏感信息泄露点。
运维页面覆盖服务器、作业和多语言管理
Vue 页面新增服务器信息监控、作业监控和国际化管理相关页面，分别对应后台系统中三个高频运维场景：
server：查看服务器基础运行信息，帮助定位资源和环境问题；job：查看定时作业、执行状态及相关运行结果；i18n：维护多语言资源，减少直接修改数据库或配置文件的操作。
这些页面的价值不只在于提供一个可视化入口，更在于把开发、运维和业务管理员常用的操作集中到统一管理端。对于生产环境，仍然需要结合权限、脱敏和访问隔离来使用。例如服务器监控数据可能包含主机名、路径或运行环境信息，不应默认开放给所有后台用户。
作业监控也不能替代完整的任务治理。关键任务仍应配置超时、失败告警、幂等控制和补偿机制。管理页面解决的是观察和操作入口，任务本身的可靠性仍然取决于服务端实现。
升级时可以这样检查
如果项目准备采用 V5.18.1，可以按以下顺序做验证：
# 1. 安装前端依赖并构建 Vue 分离端
npm ci
npm run build
# 2. 检查包含 hash 的 IFRAME 地址是否能正常打开
# 将下面的地址替换为实际旧系统地址
curl -I "https://legacy.example.com/app.html#/dashboard"
# 3. 启动后重点检查新增管理页面和权限
# 服务器、作业、国际化、安全审计页面应按项目菜单权限逐项验证
升级测试至少应覆盖路由跳转、浏览器刷新、浏览器前进后退、含 hash 的 IFRAME 地址、Drawer 多次打开后的滚动位置，以及审计查询结果。若系统使用了自定义主题或二次封装组件，还需要确认新增页面与既有布局、权限指令和国际化资源能够正常协同。
采用建议
JeeSite V5.18.1 的升级重点不是某一个孤立组件，而是把 Vue 分离端的页面承载能力、后台交互体验、安全审计和运维入口继续补齐。新项目可以直接采用路由、IFRAME 和 Drawer 组合来组织管理页面；存量项目则适合先接入运维和审计页面，再逐步替换旧页面。
升级前建议完成三项准备：备份数据库和前端构建产物，梳理自定义路由与组件封装，按照角色验证新增菜单权限。对于涉及外部系统、敏感审计数据和生产作业的场景，还应额外检查浏览器安全策略、访问隔离和操作留痕。