feat(frontend): 合入 RuoYi 3.9.2 前端升级

- 升级 vue-router 4.3 → 4.6.4 (router4 新写法)
- 升级 echarts 5.4 → 5.6.0
- 修复 permission.js router4 过期 next() 写法
- 新增 isPathMatch 通配符白名单匹配
- 新增 TreePanel 树分割组件 (左树右表)
- 新增 ExcelImportDialog 导入组件
- 新增锁屏功能 (lock.js + lock.vue)
- 新增密码规则校验 (passwordRule.js)
- 新增 HeaderNotice 顶部通知组件
- 新增 TopBar 顶部工具栏组件
- 新增 Copyright 版权组件
- 增强 TagsView 持久化标签页
- 添加升级计划文档 (UPGRADE_PLAN_v2.0.md)

openhis-ui-vue3/src/layout/components/Copyright/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <footer v-if="visible" class="copyright">
+    <span>{{ content }}</span>
+  </footer>
+</template>
+
+<script setup>
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+const visible = computed(() => settingsStore.footerVisible)
+const content = computed(() => settingsStore.footerContent)
+</script>
+
+<style scoped>
+.copyright {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 36px;
+  padding: 10px 20px;
+  text-align: right;
+  background-color: #f8f8f8;
+  color: #666;
+  font-size: 14px;
+  border-top: 1px solid #e7e7e7;
+  z-index: 999;
+}
+</style>

openhis-ui-vue3/src/layout/components/HeaderNotice/DetailView.vue

@@ -0,0 +1,359 @@
+<template>
+  <el-drawer v-model="visible" title="公告详情" direction="rtl" size="50%" append-to-body :before-close="handleClose" class="notice-detail-drawer">
+    <div v-loading="loading" class="notice-detail-drawer__body">
+      <div v-if="!detail" class="notice-empty">
+        <el-icon><Document /></el-icon>
+        <span>暂无数据</span>
+      </div>
+      <div v-else class="notice-page">
+        <div class="notice-type-wrap">
+          <span v-if="detail.noticeType === '1'" class="notice-type-tag type-notify">
+            <el-icon><Bell /></el-icon> 通知
+          </span>
+          <span v-else-if="detail.noticeType === '2'" class="notice-type-tag type-announce">
+            <el-icon><Message /></el-icon> 公告
+          </span>
+          <span v-else class="notice-type-tag type-notify">
+            <el-icon><Document /></el-icon> 消息
+          </span>
+        </div>
+
+        <h1 class="notice-title">{{ detail.noticeTitle }}</h1>
+
+        <div class="notice-meta">
+          <span class="meta-item">
+            <el-icon><User /></el-icon>
+            <span>{{ detail.createBy || '—' }}</span>
+          </span>
+          <span class="meta-item">
+            <el-icon><Clock /></el-icon>
+            <span>{{ detail.createTime || '—' }}</span>
+          </span>
+          <span class="meta-item">
+            <span :class="['status-dot', isStatusNormal ? 'status-ok' : 'status-off']"></span>
+            <span>{{ isStatusNormal ? '正常' : '已关闭' }}</span>
+          </span>
+        </div>
+
+        <div class="notice-divider">
+          <span class="notice-divider-dot"></span>
+          <span class="notice-divider-dot"></span>
+          <span class="notice-divider-dot"></span>
+        </div>
+
+        <div class="notice-body">
+          <div v-if="hasContent" class="notice-content" v-html="detail.noticeContent" />
+          <div v-else class="notice-empty notice-empty--inner">
+            <el-icon><Document /></el-icon> 暂无内容
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup>
+import { getNotice } from '@/api/system/notice'
+
+const visible = ref(false)
+const loading = ref(false)
+const detail = ref(null)
+
+const isStatusNormal = computed(() => {
+  const status = detail.value && detail.value.status
+  return status === '0' || status === 0
+})
+
+const hasContent = computed(() => {
+  const content = detail.value && detail.value.noticeContent
+  return content != null && String(content).trim() !== ''
+})
+
+function open(payload) {
+  let id = null
+  let preset = null
+  if (payload != null && typeof payload === 'object') {
+    id = payload.noticeId
+    if (payload.noticeContent != null) {
+      preset = payload
+    }
+  } else {
+    id = payload
+  }
+  visible.value = true
+  if (preset) {
+    detail.value = preset
+    return
+  }
+  if (id == null || id === '') {
+    detail.value = null
+    return
+  }
+  loading.value = true
+  detail.value = null
+  getNotice(id).then(res => {
+    detail.value = res.data
+  }).catch(() => {
+    detail.value = null
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function handleClose() {
+  visible.value = false
+  detail.value = null
+  loading.value = false
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style lang="scss" scoped>
+.notice-page {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 8px 8px 20px;
+  animation: notice-fade-up 0.28s ease both;
+}
+
+@keyframes notice-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.notice-type-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 12px;
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+
+.type-notify {
+  background: #fff8e6;
+  color: #b7791f;
+  border-left: 3px solid #d97706;
+}
+
+.type-announce {
+  background: #e8f5e9;
+  color: #276749;
+  border-left: 3px solid #38a169;
+}
+
+.notice-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a202c;
+  line-height: 1.45;
+  margin: 0 0 16px;
+  letter-spacing: -0.2px;
+}
+
+.notice-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 12px 0;
+  border-top: 1px solid #e9ecef;
+  border-bottom: 1px solid #e9ecef;
+  margin-bottom: 28px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #718096;
+}
+
+.meta-item .el-icon {
+  font-size: 12px;
+  color: #a0aec0;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+
+.status-ok {
+  background: #38a169;
+}
+
+.status-off {
+  background: #e53e3e;
+}
+
+.notice-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.notice-divider::before,
+.notice-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(to right, transparent, #dee2e6, transparent);
+}
+
+.notice-divider-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #cbd5e0;
+}
+
+.notice-body {
+  background: #fff;
+  border-radius: 6px;
+  padding: 28px 32px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  min-height: 120px;
+}
+
+.notice-content {
+  font-size: 14px;
+  line-height: 1.85;
+  color: #2d3748;
+  word-break: break-word;
+}
+
+.notice-content :deep(p) {
+  margin: 0 0 1em;
+}
+
+.notice-content :deep(h1),
+.notice-content :deep(h2),
+.notice-content :deep(h3) {
+  font-weight: 700;
+  color: #1a202c;
+  margin: 1.4em 0 0.6em;
+}
+
+.notice-content :deep(h1) {
+  font-size: 18px;
+}
+
+.notice-content :deep(h2) {
+  font-size: 16px;
+}
+
+.notice-content :deep(h3) {
+  font-size: 14px;
+}
+
+.notice-content :deep(a) {
+  color: #3182ce;
+  text-decoration: underline;
+}
+
+.notice-content :deep(a:hover) {
+  color: #2b6cb0;
+}
+
+.notice-content :deep(img) {
+  max-width: 100%;
+  border-radius: 4px;
+  margin: 8px 0;
+}
+
+.notice-content :deep(ul),
+.notice-content :deep(ol) {
+  padding-left: 20px;
+  margin: 0 0 1em;
+}
+
+.notice-content :deep(li) {
+  margin-bottom: 4px;
+}
+
+.notice-content :deep(blockquote) {
+  border-left: 3px solid #cbd5e0;
+  margin: 1em 0;
+  padding: 6px 16px;
+  color: #718096;
+  background: #f7fafc;
+}
+
+.notice-content :deep(table) {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+  font-size: 13px;
+}
+
+.notice-content :deep(table th),
+.notice-content :deep(table td) {
+  border: 1px solid #e2e8f0;
+  padding: 7px 12px;
+}
+
+.notice-content :deep(table th) {
+  background: #f7fafc;
+  font-weight: 600;
+}
+
+.notice-empty {
+  text-align: center;
+  padding: 40px 0;
+  color: #a0aec0;
+  font-size: 13px;
+}
+
+.notice-empty .el-icon {
+  font-size: 28px;
+  display: inline-flex;
+  margin-bottom: 10px;
+}
+
+.notice-empty--inner {
+  padding: 32px 0;
+}
+
+.notice-detail-drawer__body {
+  height: 100%;
+  overflow: auto;
+  padding: 10px 16px 22px;
+}
+</style>
+
+<style lang="scss">
+.notice-detail-drawer {
+  .el-drawer__header {
+    margin-bottom: 0;
+    padding: 16px 20px;
+    border-bottom: 1px solid #ebeef5;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .el-drawer__body {
+    background: #f5f6f8;
+    padding: 0;
+  }
+}
+</style>

openhis-ui-vue3/src/layout/components/HeaderNotice/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <el-popover ref="noticePopover" placement="bottom-end" :width="320" trigger="manual" v-model:visible="noticeVisible" popper-class="notice-popover">
+      <!-- 弹出内容 -->
+      <div class="notice-header">
+        <span class="notice-title">通知公告</span>
+        <span class="notice-mark-all" @click="markAllRead">全部已读</span>
+      </div>
+      <div v-if="noticeLoading" class="notice-loading">
+        <el-icon class="is-loading"><Loading /></el-icon> 加载中...
+      </div>
+      <div v-else-if="noticeList.length === 0" class="notice-empty">
+        <el-icon style="font-size:24px;display:block;margin-bottom:6px;"><Postcard /></el-icon>
+        暂无公告
+      </div>
+      <div v-else>
+        <div v-for="item in noticeList" :key="item.noticeId" class="notice-item" :class="{ 'is-read': item.isRead }" @click="previewNotice(item)">
+          <el-tag size="small" :type="item.noticeType === '1' ? 'warning' : 'success'" class="notice-tag">
+            {{ item.noticeType === '1' ? '通知' : '公告' }}
+          </el-tag>
+          <span class="notice-item-title">{{ item.noticeTitle }}</span>
+          <span class="notice-item-date">{{ item.createTime }}</span>
+        </div>
+      </div>
+
+      <!-- 触发器 -->
+      <template #reference>
+        <div class="right-menu-item hover-effect notice-trigger" @mouseenter="onNoticeEnter" @mouseleave="onNoticeLeave">
+          <svg-icon icon-class="bell" />
+          <span v-if="unreadCount > 0" class="notice-badge">{{ unreadCount }}</span>
+        </div>
+      </template>
+    </el-popover>
+
+    <!-- 预览弹窗 -->
+    <notice-detail-view ref="noticeViewRef" />
+  </div>
+</template>
+
+<script setup>
+import NoticeDetailView from './DetailView'
+import { listNoticeTop, markNoticeRead, markNoticeReadAll } from '@/api/system/notice'
+
+const noticePopover = ref(null)
+const noticeList = ref([])
+const unreadCount = ref(0)
+const noticeLoading = ref(false)
+const noticeVisible = ref(false)
+const noticeLeaveTimer = ref(null)
+const { proxy } = getCurrentInstance()
+
+// 加载顶部公告列表
+function loadNoticeTop() {
+  noticeLoading.value = true
+  listNoticeTop().then(res => {
+    noticeList.value = res.data || []
+    unreadCount.value = res.unreadCount !== undefined ? res.unreadCount : noticeList.value.filter(n => !n.isRead).length
+  }).finally(() => {
+    noticeLoading.value = false
+  })
+}
+
+onMounted(() => loadNoticeTop())
+
+// 鼠标移入铃铛区域
+function onNoticeEnter() {
+  clearTimeout(noticeLeaveTimer.value)
+  noticeVisible.value = true
+  nextTick(() => {
+    const popper = noticePopover.value?.popperRef?.contentRef
+    if (popper && !popper._noticeBound) {
+      popper._noticeBound = true
+      popper.addEventListener('mouseenter', () => clearTimeout(noticeLeaveTimer.value))
+      popper.addEventListener('mouseleave', () => {
+        noticeLeaveTimer.value = setTimeout(() => { noticeVisible.value = false }, 100)
+      })
+    }
+  })
+}
+
+// 鼠标离开铃铛区域
+function onNoticeLeave() {
+  noticeLeaveTimer.value = setTimeout(() => { noticeVisible.value = false }, 150)
+}
+
+// 预览公告详情
+function previewNotice(item) {
+  if (!item.isRead) {
+    markNoticeRead(item.noticeId).catch(() => {})
+    const idx = noticeList.value.indexOf(item)
+    if (idx !== -1) noticeList.value[idx] = { ...item, isRead: true }
+    unreadCount.value = Math.max(0, unreadCount.value - 1)
+  }
+  proxy.$refs["noticeViewRef"].open(item.noticeId)
+}
+
+// 全部已读
+function markAllRead() {
+  const ids = noticeList.value.map(n => n.noticeId).join(',')
+  if (!ids) return
+  markNoticeReadAll(ids).catch(() => {})
+  noticeList.value = noticeList.value.map(n => ({ ...n, isRead: true }))
+  unreadCount.value = 0
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-trigger {
+  position: relative;
+  transform: translateX(-6px);
+  .svg-icon { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
+  .notice-badge {
+    position: absolute;
+    top: 7px;
+    right: -3px;
+    background: #f56c6c;
+    color: #fff;
+    border-radius: 10px;
+    font-size: 10px;
+    height: 16px;
+    line-height: 16px;
+    padding: 0 4px;
+    min-width: 16px;
+    text-align: center;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}
+.notice-popover { padding: 0 !important; }
+.notice-popover .notice-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: #f7f9fb;
+  border-bottom: 1px solid #eee;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+}
+.notice-popover .notice-mark-all {
+  font-size: 12px;
+  color: var(--el-color-primary);
+  font-weight: normal;
+  cursor: pointer;
+}
+.notice-popover .notice-mark-all:hover { color: #2b7cc1; }
+.notice-popover .notice-loading,
+.notice-popover .notice-empty {
+  padding: 24px;
+  text-align: center;
+  color: #bbb;
+  font-size: 12px;
+  line-height: 1.8;
+}
+.notice-popover .notice-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #f5f5f5;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.notice-popover .notice-item:last-child { border-bottom: none; }
+.notice-popover .notice-item:hover { background: #f7f9fb; }
+.notice-popover .notice-item.is-read .notice-tag,
+.notice-popover .notice-item.is-read .notice-item-title,
+.notice-popover .notice-item.is-read .notice-item-date { opacity: 0.45; filter: grayscale(1); color: #999; }
+.notice-popover .notice-tag { flex-shrink: 0; }
+.notice-popover .notice-item-title {
+  flex: 1;
+  font-size: 12px;
+  color: #333;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.notice-popover .notice-item-date {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: #bbb;
+}
+</style>

openhis-ui-vue3/src/layout/components/TopBar/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-menu class="topbar-menu" :ellipsis="false" :default-active="activeMenu" :active-text-color="theme" mode="horizontal">
+    <sidebar-item :key="route.path + index" v-for="(route, index) in topMenus" :item="route" :base-path="route.path" />
+
+    <el-sub-menu index="more" class="el-sub-menu__hide-arrow" v-if="moreRoutes.length > 0">
+      <template #title>
+        <span>更多菜单</span>
+      </template>
+      <sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup>
+import SidebarItem from '../Sidebar/SidebarItem'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
+
+const route = useRoute()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
+
+const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const theme = computed(() => settingsStore.theme)
+const device = computed(() => appStore.device)
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+
+const visibleNumber = ref(5)
+const topMenus = computed(() => {
+  return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(0, visibleNumber.value)
+})
+const moreRoutes = computed(() => {
+  return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(visibleNumber.value)
+})
+function setVisibleNumber() {
+  const width = document.body.getBoundingClientRect().width / 3
+  visibleNumber.value = Math.max(1, parseInt(width / 85))
+}
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber)
+})
+
+onMounted(() => {
+  setVisibleNumber()
+})
+</script>
+
+<style lang="scss">
+/* menu item */
+.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
+  padding: 0 10px !important;
+}
+
+.topbar-menu.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #303133 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+
+.el-sub-menu.is-active .svg-icon, .el-menu-item.is-active .svg-icon + span, .el-sub-menu.is-active .svg-icon + span, .el-sub-menu.is-active .el-sub-menu__title span {
+  color: v-bind(theme);
+}
+
+/* sub-menu item */
+.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
+  float: left;
+  line-height: 50px !important;
+  color: #303133 !important;
+  margin: 0 15px -3px!important;
+}
+
+/* topbar more arrow */
+.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
+  position: static;
+  margin-left: 8px;
+  margin-top: 0px;
+  display: block !important;
+}
+
+/* menu__title el-menu-item */
+.topbar-menu.el-menu--horizontal .el-sub-menu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
+  height: 60px;
+}
+</style>

openhis-ui-vue3/src/layout/index.vue

@@ -32,6 +32,8 @@
     <settings ref="settingRef" />
     <!-- 公告弹窗组件 -->
     <notice-popup ref="noticePopupRef" />
+    <!-- 底部版权 -->
+    <Copyright />
   </div>
 </template>
 
@@ -40,6 +42,7 @@ import {useWindowSize} from '@vueuse/core';
 import Sidebar from './components/Sidebar/index.vue';
 import {AppMain, Settings, TagsView, Navbar} from './components';
 import NoticePopup from '@/components/NoticePopup/index.vue';
+import Copyright from './components/Copyright/index.vue';
 
 import useAppStore from '@/store/modules/app';
 import useSettingsStore from '@/store/modules/settings';