From 54225f6cadf6ad6cb8885b50d05bbdb4e0a1ac54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=8E=E4=BD=97?= <huatuo@gentronhealth.com>
Date: Thu, 4 Jun 2026 11:46:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=E9=94=81?=
 =?UTF-8?q?=E5=B1=8F=E6=8C=89=E9=92=AE=20+=20=E6=9B=B4=E6=96=B0=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Navbar 用户菜单添加「锁定屏幕」选项
- Settings 面板更新为 RuoYi 3.9.2 版本
  - 菜单导航设置（左侧/混合/顶部）
  - 主题风格（深色/浅色/颜色选择）
  - 标签页设置（图标/样式/持久化）
  - 底部版权开关
---
 .../src/layout/components/Navbar.vue          |  21 +-
 .../src/layout/components/Settings/index.vue  | 342 ++++++++++--------
 2 files changed, 219 insertions(+), 144 deletions(-)

diff --git a/openhis-ui-vue3/src/layout/components/Navbar.vue b/openhis-ui-vue3/src/layout/components/Navbar.vue
index 4a72c4526..d9db36070 100755
--- a/openhis-ui-vue3/src/layout/components/Navbar.vue
+++ b/openhis-ui-vue3/src/layout/components/Navbar.vue
@@ -83,6 +83,12 @@
                 <router-link to="/user/profile">
                   <el-dropdown-item>个人中心</el-dropdown-item>
                 </router-link>
+                <el-dropdown-item
+                  divided
+                  command="lockScreen"
+                >
+                  <span>锁定屏幕</span>
+                </el-dropdown-item>
                 <el-dropdown-item
                   divided
                   command="logout"
@@ -167,14 +173,16 @@ import {Fold, Expand, Bell} from '@element-plus/icons-vue';
 import HeaderSearch from '@/components/HeaderSearch';
 import NoticePanel from '@/components/NoticePanel';
 import useAppStore from '@/store/modules/app';
-import useUserStore from '@/store/modules/user';
+import useUserStore from '@/store/modules/user'
+import useLockStore from '@/store/modules/lock';
 import {getOrg, switchOrg} from '@/api/login';
 import {getUnreadCount} from '@/api/system/notice';
 import {useRouter} from 'vue-router';
 import {Help} from "@element-plus/icons-vue";
 
 const appStore = useAppStore();
-const userStore = useUserStore();
+const userStore = useUserStore()
+const lockStore = useLockStore();
 const router = useRouter();
 const orgOptions = ref([]);
 const showDialog = ref(false);
@@ -243,6 +251,9 @@ function handleCommand(command) {
     case 'setLayout':
       setLayout();
       break;
+    case 'lockScreen':
+      lockScreen()
+      break
     case 'logout':
       logout();
       break;
@@ -251,6 +262,12 @@ function handleCommand(command) {
   }
 }
 
+function lockScreen() {
+  const currentPath = router.currentRoute.value.path
+  lockStore.lockScreen(currentPath)
+  router.push('/lock')
+}
+
 function logout() {
   ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
     confirmButtonText: '确定',
diff --git a/openhis-ui-vue3/src/layout/components/Settings/index.vue b/openhis-ui-vue3/src/layout/components/Settings/index.vue
index 9026f290c..7193d08b2 100755
--- a/openhis-ui-vue3/src/layout/components/Settings/index.vue
+++ b/openhis-ui-vue3/src/layout/components/Settings/index.vue
@@ -1,75 +1,45 @@
 <template>
-  <el-drawer
-    v-model="showSettings"
-    :with-header="false"
-    direction="rtl"
-    size="300px"
-  >
+  <el-drawer v-model="showSettings" :withHeader="false" :lock-scroll="false" direction="rtl" size="300px">
     <div class="setting-drawer-title">
-      <h3 class="drawer-title">
-        主题风格设置
-      </h3>
+      <h3 class="drawer-title">菜单导航设置</h3>
+    </div>
+    <div class="nav-wrap">
+      <el-tooltip content="左侧菜单" placement="bottom">
+        <div class="item left" @click="handleNavType(1)" :class="{ activeItem: navType == 1 }">
+          <b></b><b></b>
+        </div>
+      </el-tooltip>
+
+      <el-tooltip content="混合菜单" placement="bottom">
+        <div class="item mix" @click="handleNavType(2)" :class="{ activeItem: navType == 2 }">
+          <b></b><b></b>
+        </div>
+      </el-tooltip>
+      <el-tooltip content="顶部菜单" placement="bottom">
+        <div class="item top" @click="handleNavType(3)" :class="{ activeItem: navType == 3 }">
+          <b></b><b></b>
+        </div>
+      </el-tooltip>
+    </div>
+    <div class="setting-drawer-title">
+      <h3 class="drawer-title">主题风格设置</h3>
     </div>
     <div class="setting-drawer-block-checbox">
-      <div
-        class="setting-drawer-block-checbox-item"
-        @click="handleTheme('theme-dark')"
-      >
-        <img
-          src="@/assets/images/dark.svg"
-          alt="dark"
-        >
-        <div
-          v-if="sideTheme === 'theme-dark'"
-          class="setting-drawer-block-checbox-selectIcon"
-          style="display: block;"
-        >
-          <i
-            aria-label="图标: check"
-            class="anticon anticon-check"
-          >
-            <svg
-              viewBox="64 64 896 896"
-              data-icon="check"
-              width="1em"
-              height="1em"
-              :fill="theme"
-              aria-hidden="true"
-              focusable="false"
-              class
-            >
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+        <img src="@/assets/images/dark.svg" alt="dark" />
+        <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
               <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
             </svg>
           </i>
         </div>
       </div>
-      <div
-        class="setting-drawer-block-checbox-item"
-        @click="handleTheme('theme-light')"
-      >
-        <img
-          src="@/assets/images/light.svg"
-          alt="light"
-        >
-        <div
-          v-if="sideTheme === 'theme-light'"
-          class="setting-drawer-block-checbox-selectIcon"
-          style="display: block;"
-        >
-          <i
-            aria-label="图标: check"
-            class="anticon anticon-check"
-          >
-            <svg
-              viewBox="64 64 896 896"
-              data-icon="check"
-              width="1em"
-              height="1em"
-              :fill="theme"
-              aria-hidden="true"
-              focusable="false"
-              class
-            >
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+        <img src="@/assets/images/light.svg" alt="light" />
+        <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
               <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
             </svg>
           </i>
@@ -79,160 +49,192 @@
     <div class="drawer-item">
       <span>主题颜色</span>
       <span class="comp-style">
-        <el-color-picker
-          v-model="theme"
-          :predefine="predefineColors"
-          @change="themeChange"
-        />
+        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange"/>
       </span>
     </div>
     <el-divider />
 
-    <h3 class="drawer-title">
-      系统布局配置
-    </h3>
+    <h3 class="drawer-title">系统布局配置</h3>
 
     <div class="drawer-item">
-      <span>开启 TopNav</span>
+      <span>开启页签</span>
       <span class="comp-style">
-        <el-switch
-          v-model="settingsStore.topNav"
-          class="drawer-switch"
-          @change="topNavChange"
-        />
+        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
-      <span>开启 Tags-Views</span>
+      <span>持久化标签页</span>
       <span class="comp-style">
-        <el-switch
-          v-model="settingsStore.tagsView"
-          class="drawer-switch"
-        />
+        <el-switch v-model="settingsStore.tagsViewPersist" :disabled="!settingsStore.tagsView" @change="tagsViewPersistChange" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>显示页签图标</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsIcon" :disabled="!settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>标签页样式</span>
+      <span class="comp-style">
+        <el-radio-group v-model="settingsStore.tagsViewStyle" :disabled="!settingsStore.tagsView" size="small">
+          <el-radio-button label="card">卡片</el-radio-button>
+          <el-radio-button label="chrome">谷歌</el-radio-button>
+        </el-radio-group>
       </span>
     </div>
 
     <div class="drawer-item">
       <span>固定 Header</span>
       <span class="comp-style">
-        <el-switch
-          v-model="settingsStore.fixedHeader"
-          class="drawer-switch"
-        />
+        <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
       <span>显示 Logo</span>
       <span class="comp-style">
-        <el-switch
-          v-model="settingsStore.sidebarLogo"
-          class="drawer-switch"
-        />
+        <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
       <span>动态标题</span>
       <span class="comp-style">
-        <el-switch
-          v-model="settingsStore.dynamicTitle"
-          class="drawer-switch"
-        />
+        <el-switch v-model="settingsStore.dynamicTitle" @change="dynamicTitleChange" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>底部版权</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.footerVisible" class="drawer-switch" />
       </span>
     </div>
 
     <el-divider />
 
-    <el-button
-      type="primary"
-      plain
-      icon="DocumentAdd"
-      @click="saveSetting"
-    >
-      保存配置
-    </el-button>
-    <el-button
-      plain
-      icon="Refresh"
-      @click="resetSetting"
-    >
-      重置配置
-    </el-button>
+    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
+    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
   </el-drawer>
+
 </template>
 
 <script setup>
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
-import {handleThemeStyle} from '@/utils/theme'
+import { handleThemeStyle } from '@/utils/theme'
 
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
 const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
-const showSettings = ref(false);
-const theme = ref(settingsStore.theme);
-const sideTheme = ref(settingsStore.sideTheme);
-const storeSettings = computed(() => settingsStore);
-const predefineColors = ref(["#3B82F6", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
+const showSettings = ref(false)
+const navType = ref(settingsStore.navType)
+const theme = ref(settingsStore.theme)
+const sideTheme = ref(settingsStore.sideTheme)
+const tagsViewPersist = ref(settingsStore.tagsViewPersist)
+const storeSettings = computed(() => settingsStore)
+const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"])
 
-/** 是否需要topnav */
-function topNavChange(val) {
-  if (!val) {
-    appStore.toggleSideBarHide(false);
-    permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
-  }
+/** 是否需要dynamicTitle */
+function dynamicTitleChange() {
+  useSettingsStore().setTitle(useSettingsStore().title)
+}
+
+function tagsViewPersistChange(val) {
+  settingsStore.tagsViewPersist = val
+  tagsViewPersist.value = val
 }
 
 function themeChange(val) {
-  settingsStore.theme = val;
-  handleThemeStyle(val);
+  settingsStore.theme = val
+  handleThemeStyle(val)
 }
+
 function handleTheme(val) {
-  settingsStore.sideTheme = val;
-  sideTheme.value = val;
+  settingsStore.sideTheme = val
+  sideTheme.value = val
 }
+
+function handleNavType(val) {
+  settingsStore.navType = val
+  navType.value = val
+}
+
+/** 菜单导航设置 */
+watch(() => navType, val => {
+  if (val.value == 1) {
+    appStore.sidebar.opened = true
+    appStore.toggleSideBarHide(false)
+  }
+  if (val.value == 2) {
+    appStore.sidebar.opened = true
+  }
+  if (val.value == 3) {
+    appStore.sidebar.opened = false
+    appStore.toggleSideBarHide(true)
+  }
+  if ([1, 3].includes(val.value)) {
+      permissionStore.setSidebarRouters(permissionStore.defaultRoutes)
+  }
+  }, { immediate: true, deep: true }
+)
+
 function saveSetting() {
-  proxy.$modal.loading("正在保存到本地，请稍候...");
+  proxy.$modal.loading("正在保存到本地，请稍候...")
+  if (!tagsViewPersist.value) {
+    proxy.$cache.local.remove('tags-view-visited')
+  }
   let layoutSetting = {
-    "topNav": storeSettings.value.topNav,
+    "navType": storeSettings.value.navType,
     "tagsView": storeSettings.value.tagsView,
+    "tagsIcon": storeSettings.value.tagsIcon,
+    "tagsViewStyle": storeSettings.value.tagsViewStyle,
+    "tagsViewPersist": storeSettings.value.tagsViewPersist,
     "fixedHeader": storeSettings.value.fixedHeader,
     "sidebarLogo": storeSettings.value.sidebarLogo,
     "dynamicTitle": storeSettings.value.dynamicTitle,
+    "footerVisible": storeSettings.value.footerVisible,
     "sideTheme": storeSettings.value.sideTheme,
     "theme": storeSettings.value.theme
-  };
-  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
+  }
+  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting))
   setTimeout(proxy.$modal.closeLoading(), 1000)
 }
+
 function resetSetting() {
-  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
+  proxy.$cache.local.remove('tags-view-visited')
+  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...")
   localStorage.removeItem("layout-setting")
   setTimeout("window.location.reload()", 1000)
 }
+
 function openSetting() {
-  showSettings.value = true;
+  showSettings.value = true
 }
 
 defineExpose({
-  openSetting,
+  openSetting
 })
 </script>
 
 <style lang='scss' scoped>
 .setting-drawer-title {
   margin-bottom: 12px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));
   line-height: 22px;
   font-weight: bold;
+
   .drawer-title {
     font-size: 14px;
   }
 }
+
 .setting-drawer-block-checbox {
   display: flex;
   justify-content: flex-start;
@@ -251,13 +253,6 @@ defineExpose({
       height: 48px;
     }
 
-    .custom-img {
-      width: 48px;
-      height: 38px;
-      border-radius: 5px;
-      box-shadow: 1px 1px 2px #898484;
-    }
-
     .setting-drawer-block-checbox-selectIcon {
       position: absolute;
       top: 0;
@@ -274,7 +269,7 @@ defineExpose({
 }
 
 .drawer-item {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--el-text-color-regular, rgba(0, 0, 0, 0.65));
   padding: 12px 0;
   font-size: 14px;
 
@@ -283,4 +278,67 @@ defineExpose({
     margin: -3px 8px 0px 0px;
   }
 }
+
+// 导航模式
+.nav-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .activeItem {
+    border: 2px solid var(--el-color-primary) !important;
+  }
+
+  .item {
+    position: relative;
+    margin-right: 16px;
+    cursor: pointer;
+    width: 56px;
+    height: 48px;
+    border-radius: 4px;
+    background: #f0f2f5;
+    border: 2px solid transparent;
+  }
+
+  .left {
+    b:first-child {
+      display: block;
+      height: 30%;
+      background: #fff;
+    }
+    b:last-child {
+      width: 30%;
+      background: #1b2a47;
+      position: absolute;
+      height: 100%;
+      top: 0;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  .mix {
+    b:first-child {
+      border-radius: 4px 4px 0 0;
+      display: block;
+      height: 30%;
+      background: #1b2a47;
+    }
+    b:last-child {
+      width: 30%;
+      background: #1b2a47;
+      position: absolute;
+      height: 70%;
+      border-radius: 0 0 0 4px;
+    }
+  }
+  .top {
+    b:first-child {
+      display: block;
+      height: 30%;
+      background: #1b2a47;
+      border-radius: 4px 4px 0 0;
+    }
+  }
+}
 </style>
\ No newline at end of file