Revert "Fix Bug #550: AI修复"

This reverts commit 16c42ca108.

openhis-ui-vue3/src/layout/components/AppMain.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component, route }">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive :include="tagsViewStore.cachedViews">
+          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+        </keep-alive>
+      </transition>
+    </router-view>
+    <iframe-toggle />
+  </section>
+</template>
+
+<script setup>
+import iframeToggle from "./IframeToggle/index"
+import useTagsViewStore from '@/store/modules/tagsView'
+
+const tagsViewStore = useTagsViewStore()
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+}
+
+.fixed-header ~ .app-main {
+  padding-top: 34px;
+}
+
+.hasTagsView .app-main {
+  padding-top: 0;
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 6px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c0c0c0;
+  border-radius: 3px;
+}
+</style>
+

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

@@ -0,0 +1,25 @@
+<template>
+  <inner-link
+    v-for="(item, index) in tagsViewStore.iframeViews"
+    :key="item.path"
+    :iframeId="'iframe' + index"
+    v-show="route.path === item.path"
+    :src="iframeUrl(item.meta.link, item.query)"
+  ></inner-link>
+</template>
+
+<script setup>
+import InnerLink from "../InnerLink/index";
+import useTagsViewStore from "@/store/modules/tagsView";
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+
+function iframeUrl(url, query) {
+  if (Object.keys(query).length > 0) {
+    let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
+    return url + "?" + params;
+  }
+  return url;
+}
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+  <div :style="'height:' + height">
+    <iframe
+      :id="iframeId"
+      style="width: 100%; height: 100%"
+      :src="src"
+      frameborder="no"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: "/"
+  },
+  iframeId: {
+    type: String
+  }
+});
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px");
+</script>

openhis-ui-vue3/src/layout/components/Navbar.vue

@@ -0,0 +1,537 @@
+<template>
+  <div class="navbar">
+    <div class="left-menu">
+      <div class="hamburger-container">
+        <div class="hamburger" @click="toggleSideBar">
+          <el-icon :size="20">
+            <component :is="sidebar.opened ? 'Fold' : 'Expand'" />
+          </el-icon>
+        </div>
+      </div>
+      <!-- 搜索和公告通知 -->
+      <div class="left-actions">
+        <template v-if="appStore.device !== 'mobile'">
+          <header-search id="header-search" class="left-action-item" />
+        </template>
+        <!-- 公告和通知按钮 -->
+        <el-tooltip content="公告/通知" placement="bottom">
+          <div class="left-action-item notice-btn" @click="openNoticePanel">
+            <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notice-badge">
+              <el-icon><Bell /></el-icon>
+            </el-badge>
+          </div>
+        </el-tooltip>
+        <!-- 帮助中心按钮 -->
+        <el-tooltip content="帮助中心" placement="bottom">
+          <div class="left-action-item" @click="goToHelpCenter">
+            <el-icon><Help /></el-icon>
+          </div>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="right-menu">
+      <div class="avatar-container">
+        <div class="avatar-wrapper">
+          <el-dropdown
+            @command="handleCommand"
+            class="user-info-dropdown hover-effect"
+            trigger="click"
+            teleported
+            popper-class="navbar-dropdown"
+            :popper-options="{
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [0, 12],
+                  },
+                },
+              ],
+            }"
+          >
+            <div class="user-info">
+              <img :src="userStore.avatar" class="user-avatar" />
+              <span class="nick-name">{{ userStore.nickName }}</span>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <router-link to="/user/profile">
+                  <el-dropdown-item>个人中心</el-dropdown-item>
+                </router-link>
+                <el-dropdown-item divided command="logout">
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <span class="divider">|</span>
+          <el-dropdown
+            @command="handleOrgSwitch"
+            trigger="click"
+            teleported
+            popper-class="navbar-dropdown"
+            :placement="'bottom-start'"
+          >
+            <span class="org-name">{{ userStore.orgName }}</span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  v-for="item in orgOptions"
+                  :key="item.orgId"
+                  :command="item.orgId"
+                  :class="{ 'is-active': item.orgId === userStore.orgId }"
+                >
+                  {{ item.orgName }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <span class="divider" />
+        </div>
+      </div>
+    </div>
+    <el-dialog title="切换科室" v-model="showDialog" width="400px" append-to-body destroy-on-close>
+      <el-select v-model="orgId" filterable clearable>
+        <el-option
+          v-for="item in orgOptions"
+          :key="item.orgId"
+          :label="item.orgName"
+          :value="item.orgId"
+        />
+      </el-select>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submit">确定</el-button>
+          <el-button @click="showDialog = false">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 公告/通知面板 -->
+    <NoticePanel ref="noticePanelRef" @updateUnreadCount="updateUnreadCount" />
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref, computed} from 'vue';
+import {ElMessageBox} from 'element-plus';
+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 {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 router = useRouter();
+const orgOptions = ref([]);
+const showDialog = ref(false);
+const orgId = ref('');
+const noticePanelRef = ref(null);
+const unreadCount = ref(0);
+
+const sidebar = computed(() => appStore.sidebar);
+
+// 加载未读数量
+function loadUnreadCount() {
+  getUnreadCount().then(res => {
+    unreadCount.value = res.data || 0;
+  }).catch(() => {
+    unreadCount.value = 0;
+  });
+}
+
+// 更新未读数量
+function updateUnreadCount() {
+  loadUnreadCount();
+}
+
+// 切换侧边栏
+function toggleSideBar() {
+  appStore.toggleSideBar();
+}
+
+function loadOrgList() {
+  getOrg().then((res) => {
+    orgOptions.value = res.data;
+  });
+}
+
+onMounted(() => {
+  loadOrgList();
+  loadUnreadCount();
+});
+
+function handleOrgSwitch(selectedOrgId) {
+  if (selectedOrgId === userStore.orgId) {
+    return;
+  }
+
+  const selectedOrg = orgOptions.value.find((item) => item.orgId === selectedOrgId);
+  const orgName = selectedOrg ? selectedOrg.orgName : '该科室';
+
+  ElMessageBox.confirm(`确定要切换到科室"${orgName}"吗？`, '切换科室', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    orgId.value = selectedOrgId;
+    switchOrg(selectedOrgId).then((res) => {
+      if (res.code === 200) {
+        userStore.logOut().then(() => {
+          location.href = '/index';
+        });
+      }
+    });
+  });
+}
+
+function handleCommand(command) {
+  switch (command) {
+    case 'setLayout':
+      setLayout();
+      break;
+    case 'logout':
+      logout();
+      break;
+    default:
+      break;
+  }
+}
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+  .then(() => {
+    userStore.logOut().then(() => {
+      location.href = '/index';
+    });
+  })
+  .catch(() => {});
+}
+
+function submit() {
+  switchOrg(orgId.value).then((res) => {
+    if (res.code === 200) {
+      userStore.logOut().then(() => {
+        location.href = '/index';
+      });
+    }
+  });
+}
+
+const emits = defineEmits(['setLayout']);
+function setLayout() {
+  emits('setLayout');
+}
+
+// 打开公告/通知面板
+function openNoticePanel() {
+  if (noticePanelRef.value) {
+    noticePanelRef.value.open();
+  }
+}
+
+function goToHelpCenter() {
+  window.open(window.location.origin + '/help-center/vuepress-theme-vdoing-doc/docs/.vuepress/dist/pages/520e67/index.html', '_blank');
+}
+</script>
+
+<style lang='scss' scoped>
+.navbar {
+  height: 50px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+
+  .left-menu {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 8px;
+
+    .hamburger-container {
+      display: flex;
+      align-items: center;
+
+      .hamburger {
+        cursor: pointer;
+        padding: 0 12px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        transition: background 0.3s;
+        color: #5a5e66;
+
+        &:hover {
+          background-color: #f6f6f6;
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .left-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .left-action-item {
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        height: 50px;
+        font-size: 16px;
+        color: #606266;
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background-color: #f6f6f6;
+        }
+
+        .notice-badge {
+          :deep(.el-badge__content) {
+            top: -5px;
+            right: -5px;
+          }
+        }
+
+        .el-icon {
+          font-size: 20px;
+
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+    }
+  }
+
+  .right-menu {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    white-space: nowrap;
+
+    &:focus {
+      outline: none;
+    }
+
+    .avatar-container {
+      margin-right: 0;
+      margin-left: 5px;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1003;
+      display: flex;
+      align-items: center;
+
+      .avatar-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        position: relative;
+
+        .user-info-dropdown {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        .user-info {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .user-avatar {
+          cursor: pointer;
+          width: 32px;
+          height: 32px;
+          border-radius: 6px;
+          flex-shrink: 0;
+        }
+        .nick-name {
+          font-weight: 500;
+          color: #606266;
+          font-size: 14px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 100px;
+          flex-shrink: 0;
+        }
+        .divider {
+          color: #dcdfe6;
+          font-size: 14px;
+          margin: 0 8px;
+          flex-shrink: 0;
+        }
+        .org-name {
+          font-weight: 500;
+          color: #606266;
+          font-size: 14px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 120px;
+          flex-shrink: 0;
+          cursor: pointer;
+          transition: color 0.3s;
+
+          &:hover {
+            color: #409eff;
+          }
+        }
+
+        .el-icon {
+          cursor: pointer;
+          position: absolute;
+          right: -15px;
+          top: 25px;
+          font-size: 12px;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 0 10px;
+
+    .left-menu {
+      .hamburger-container {
+        .hamburger {
+          padding: 0 8px;
+        }
+      }
+
+      .left-actions {
+        .left-action-item {
+          padding: 0 6px;
+        }
+      }
+    }
+
+    .right-menu {
+      .avatar-container {
+        .avatar-wrapper {
+          gap: 4px;
+
+          .nick-name {
+            max-width: 60px;
+            font-size: 12px;
+          }
+
+          .org-name {
+            max-width: 80px;
+            font-size: 12px;
+          }
+
+          .divider {
+            margin: 0 4px;
+            font-size: 12px;
+          }
+
+          .user-avatar {
+            width: 28px;
+            height: 28px;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    padding: 0 8px;
+
+    .left-menu {
+      .hamburger-container {
+        .hamburger {
+          padding: 0 6px;
+        }
+      }
+
+      .left-actions {
+        .left-action-item {
+          padding: 0 4px;
+        }
+      }
+    }
+
+    .right-menu {
+      .avatar-container {
+        .avatar-wrapper {
+          .nick-name {
+            display: none;
+          }
+
+          .divider {
+            display: none;
+          }
+
+          .org-name {
+            max-width: 80px;
+            font-size: 11px;
+          }
+
+          .user-avatar {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.navbar-dropdown {
+  margin-bottom: 8px !important;
+  z-index: 10010 !important;
+
+  .el-dropdown-menu {
+    margin-bottom: 0 !important;
+    z-index: 10010 !important;
+    max-height: 300px !important;
+    overflow-y: auto !important;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .el-dropdown-menu__item.is-active {
+      color: #409eff !important;
+      font-weight: 500 !important;
+      background-color: #ecf5ff !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,201 @@
+<template>
+  <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
+    <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>
+              <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>
+              <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>
+    <div class="drawer-item">
+      <span>主题颜色</span>
+      <span class="comp-style">
+        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange"/>
+      </span>
+    </div>
+    <el-divider />
+
+    <h3 class="drawer-title">系统布局配置</h3>
+
+    <div class="drawer-item">
+      <span>开启 TopNav</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.topNav" @change="topNavChange" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>开启 Tags-Views</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>固定 Header</span>
+      <span class="comp-style">
+        <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" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>动态标题</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.dynamicTitle" 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-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'
+
+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(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
+
+/** 是否需要topnav */
+function topNavChange(val) {
+  if (!val) {
+    appStore.toggleSideBarHide(false);
+    permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
+  }
+}
+
+function themeChange(val) {
+  settingsStore.theme = val;
+  handleThemeStyle(val);
+}
+function handleTheme(val) {
+  settingsStore.sideTheme = val;
+  sideTheme.value = val;
+}
+function saveSetting() {
+  proxy.$modal.loading("正在保存到本地，请稍候...");
+  let layoutSetting = {
+    "topNav": storeSettings.value.topNav,
+    "tagsView": storeSettings.value.tagsView,
+    "fixedHeader": storeSettings.value.fixedHeader,
+    "sidebarLogo": storeSettings.value.sidebarLogo,
+    "dynamicTitle": storeSettings.value.dynamicTitle,
+    "sideTheme": storeSettings.value.sideTheme,
+    "theme": storeSettings.value.theme
+  };
+  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
+  setTimeout(proxy.$modal.closeLoading(), 1000)
+}
+function resetSetting() {
+  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
+  localStorage.removeItem("layout-setting")
+  setTimeout("window.location.reload()", 1000)
+}
+function openSetting() {
+  showSettings.value = true;
+}
+
+defineExpose({
+  openSetting,
+})
+</script>
+
+<style lang='scss' scoped>
+.setting-drawer-title {
+  margin-bottom: 12px;
+  color: 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;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .setting-drawer-block-checbox-item {
+    position: relative;
+    margin-right: 16px;
+    border-radius: 2px;
+    cursor: pointer;
+
+    img {
+      width: 48px;
+      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;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      color: #1890ff;
+      font-weight: 700;
+      font-size: 14px;
+    }
+  }
+}
+
+.drawer-item {
+  color: rgba(0, 0, 0, 0.65);
+  padding: 12px 0;
+  font-size: 14px;
+
+  .comp-style {
+    float: right;
+    margin: -3px 8px 0px 0px;
+  }
+}
+</style>

openhis-ui-vue3/src/layout/components/Sidebar/Link.vue

@@ -0,0 +1,40 @@
+<template>
+  <component :is="type" v-bind="linkProps()">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import {isExternal} from '@/utils/validate'
+
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  }
+})
+
+const isExt = computed(() => {
+  return isExternal(props.to)
+})
+
+const type = computed(() => {
+  if (isExt.value) {
+    return 'a'
+  }
+  return 'router-link'
+})
+
+function linkProps() {
+  if (isExt.value) {
+    return {
+      href: props.to,
+      target: '_blank',
+      rel: 'noopener'
+    }
+  }
+  return {
+    to: props.to
+  }
+}
+</script>

openhis-ui-vue3/src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
+    }"
+  >
+    <router-link class="sidebar-logo-link" to="/index">
+      <el-image
+        :src="logoImage"
+        class="sidebar-logo"
+        fit="contain"
+      />
+      <div v-if="!collapse" class="logo-text" :style="{ color: textColor }">
+        <h1 class="sidebar-title">{{ title }}</h1>
+        <p v-if="displayName" class="hospital-name">{{ displayName }}</p>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script setup>
+import variables from '@/assets/styles/variables.module.scss';
+import useSettingsStore from '@/store/modules/settings';
+import useUserStore from '@/store/modules/user';
+import {computed} from 'vue';
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const title = import.meta.env.VITE_APP_TITLE || '医院管理系统';
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
+const displayName = computed(() => userStore.tenantName || userStore.hospitalName || userStore.orgName || '');
+
+const textColor = computed(() => {
+  return sideTheme.value === 'theme-dark' ? '#fff' : '#303133';
+});
+
+const logoImage = computed(() => {
+  return new URL('@/assets/logo/LOGO.jpg', import.meta.url).href;
+});
+</script>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  background: transparent;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    gap: 8px;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      object-fit: contain;
+    }
+
+    .logo-text {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      gap: 2px;
+      min-width: 0;
+      pointer-events: none;
+    }
+
+    .sidebar-logo {
+      pointer-events: none;
+    }
+
+    .sidebar-title {
+      margin: 0;
+      font-weight: 600;
+      font-size: 15px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+    }
+
+    .hospital-name {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 400;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      opacity: 0.85;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo-link {
+      padding: 0;
+      justify-content: center;
+    }
+
+    .logo-text {
+      display: none;
+    }
+  }
+}
+</style>

openhis-ui-vue3/src/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,112 @@
+<template>
+  <div v-if="!item.hidden && !(item.meta && item.meta.visible === '1')">
+    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <svg-icon v-if="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
+      <template v-if="item.meta" #title>
+        <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
+        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+      </template>
+
+      <sidebar-item
+          v-for="(child, index) in item.children"
+          :key="child.path + index"
+          :is-nest="true"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"
+      />
+    </el-sub-menu>
+  </div>
+</template>
+
+<script setup>
+import {isExternal} from '@/utils/validate'
+import AppLink from './Link'
+import {getNormalPath} from '@/utils/openhis'
+
+const props = defineProps({
+  // route object
+  item: {
+    type: Object,
+    required: true
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ''
+  }
+})
+
+const onlyOneChild = ref({});
+
+function hasOneShowingChild(children = [], parent) {
+  if (!children) {
+    children = [];
+  }
+  const showingChildren = children.filter(item => {
+    if (item.hidden) {
+      return false
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+};
+
+function resolvePath(routePath, routeQuery) {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  if (routeQuery) {
+    try {
+      // 检查 routeQuery 是否已经是对象
+      if (typeof routeQuery === 'object') {
+        return { path: getNormalPath(props.basePath + '/' + routePath), query: routeQuery }
+      }
+      // 尝试解析 JSON 字符串
+      let query = JSON.parse(routeQuery);
+      return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
+    } catch (e) {
+      // 如果解析失败，将其作为普通字符串处理
+      return getNormalPath(props.basePath + '/' + routePath)
+    }
+  }
+  return getNormalPath(props.basePath + '/' + routePath)
+}
+
+function hasTitle(title){
+  if (title.length > 5) {
+    return title;
+  } else {
+    return "";
+  }
+}
+</script>

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

@@ -0,0 +1,186 @@
+<template>
+  <div
+    :class="[
+      'sidebar-wrapper',
+      { 'has-logo': showLogo },
+      { 'is-collapse': isCollapse }
+    ]"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
+    }"
+  >
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar class="sidebar-scrollbar">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="
+          sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
+        "
+        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+        :unique-opened="true"
+        :active-text-color="theme"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item
+          v-for="(route, index) in sidebarRouters"
+          :key="route.path + index"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import Logo from './Logo';
+import SidebarItem from './SidebarItem';
+import variables from '@/assets/styles/variables.module.scss';
+import useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+import usePermissionStore from '@/store/modules/permission';
+import {computed} from 'vue';
+import {useRoute} from 'vue-router';
+
+const route = useRoute();
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
+const showLogo = computed(() => settingsStore.sidebarLogo);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const theme = computed(() => settingsStore.theme);
+const isCollapse = computed(() => !appStore.sidebar.opened);
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  // if set path, sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.module.scss';
+
+.sidebar-wrapper {
+  width: $sideBarWidth;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.28s;
+  flex-shrink: 0;
+
+  &.is-collapse {
+    width: 54px;
+  }
+
+  .mobile & {
+    position: fixed;
+    z-index: 1001;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transform: translateX(0);
+    transition: transform 0.28s;
+  }
+
+  .is-collapse.mobile & {
+    transform: translateX(-100%);
+  }
+}
+
+.has-logo {
+  .sidebar-scrollbar {
+    height: calc(100% - #{$logoHeight});
+  }
+}
+
+.sidebar-scrollbar {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sidebar-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.sidebar-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.el-menu {
+  border: none;
+  height: 100%;
+  width: 100% !important;
+}
+
+:deep(.el-menu-item),
+:deep(.el-sub-menu__title) {
+  height: 50px;
+  line-height: 50px;
+
+  .svg-icon {
+    margin-right: 8px;
+  }
+}
+
+:deep(.el-menu-item) {
+  &.is-active {
+    background-color: var(--current-color) !important;
+  }
+}
+
+:deep(.el-sub-menu) {
+  .el-menu-item {
+    min-width: $sideBarWidth !important;
+  }
+
+  &.is-active {
+    > .el-sub-menu__title {
+      color: var(--current-color) !important;
+    }
+  }
+}
+
+:deep(.el-menu--collapse) {
+  .el-menu-item,
+  .el-sub-menu__title {
+    padding: 0 20px !important;
+    text-align: center;
+
+    span {
+      height: 0;
+      width: 0;
+      overflow: hidden;
+      visibility: hidden;
+      display: inline-block;
+    }
+  }
+
+  .svg-icon {
+    margin-right: 0 !important;
+  }
+
+  .el-sub-menu {
+    &.is-opened {
+      > .el-sub-menu__title .el-icon-arrow-right {
+        display: none;
+      }
+    }
+  }
+}
+</style>

openhis-ui-vue3/src/layout/components/TagsView/ScrollPane.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-scrollbar
+    ref="scrollContainer"
+    :vertical="false"
+    class="scroll-container"
+    @wheel.prevent="handleScroll"
+  >
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script setup>
+import useTagsViewStore from '@/store/modules/tagsView'
+
+const tagAndTagSpacing = ref(4);
+const { proxy } = getCurrentInstance();
+
+const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrapRef);
+
+onMounted(() => {
+  scrollWrapper.value.addEventListener('scroll', emitScroll, true)
+})
+onBeforeUnmount(() => {
+  scrollWrapper.value.removeEventListener('scroll', emitScroll)
+})
+
+function handleScroll(e) {
+  const eventDelta = e.wheelDelta || -e.deltaY * 40
+  const $scrollWrapper = scrollWrapper.value;
+  $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+}
+const emits = defineEmits()
+const emitScroll = () => {
+  emits('scroll')
+}
+
+const tagsViewStore = useTagsViewStore()
+const visitedViews = computed(() => tagsViewStore.visitedViews);
+
+function moveToTarget(currentTag) {
+  const $container = proxy.$refs.scrollContainer.$el
+  const $containerWidth = $container.offsetWidth
+  const $scrollWrapper = scrollWrapper.value;
+
+  let firstTag = null
+  let lastTag = null
+
+  // find first tag and last tag
+  if (visitedViews.value.length > 0) {
+    firstTag = visitedViews.value[0]
+    lastTag = visitedViews.value[visitedViews.value.length - 1]
+  }
+
+  if (firstTag === currentTag) {
+    $scrollWrapper.scrollLeft = 0
+  } else if (lastTag === currentTag) {
+    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+  } else {
+    const tagListDom = document.getElementsByClassName('tags-view-item');
+    const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
+    let prevTag = null
+    let nextTag = null
+    for (const k in tagListDom) {
+      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
+          prevTag = tagListDom[k];
+        }
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
+          nextTag = tagListDom[k];
+        }
+      }
+    }
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
+
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
+    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+    }
+  }
+}
+
+defineExpose({
+  moveToTarget,
+})
+</script>
+
+<style lang='scss' scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  :deep(.el-scrollbar__bar) {
+    bottom: 0px;
+  }
+  :deep(.el-scrollbar__wrap) {
+    height: 39px;
+  }
+}
+</style>

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

@@ -0,0 +1,411 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        :key="tag.path"
+        :data-path="tag.path"
+        :class="isActive(tag) ? 'active' : ''"
+        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+        class="tags-view-item"
+        :style="activeStyle(tag)"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+        @contextmenu.prevent="openMenu(tag, $event)"
+      >
+        {{ tag.title }}
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
+        </span>
+      </router-link>
+    </scroll-pane>
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">
+        <refresh-right style="width: 1em; height: 1em" /> 刷新页面
+      </li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <close style="width: 1em; height: 1em" /> 关闭当前
+      </li>
+      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> 关闭其他</li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <back style="width: 1em; height: 1em" /> 关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <right style="width: 1em; height: 1em" /> 关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <circle-close style="width: 1em; height: 1em" /> 全部关闭
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import ScrollPane from './ScrollPane';
+import {getNormalPath} from '@/utils/openhis';
+import useTagsViewStore from '@/store/modules/tagsView';
+import useSettingsStore from '@/store/modules/settings';
+import usePermissionStore from '@/store/modules/permission';
+
+const visible = ref(false);
+const top = ref(0);
+const left = ref(0);
+const selectedTag = ref({});
+const affixTags = ref([]);
+const scrollPaneRef = ref(null);
+
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+const router = useRouter();
+
+const visitedViews = computed(() => useTagsViewStore().visitedViews);
+const routes = computed(() => usePermissionStore().routes);
+const theme = computed(() => useSettingsStore().theme);
+
+watch(route, () => {
+  addTags();
+  moveToCurrentTag();
+});
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener('click', closeMenu);
+  } else {
+    document.body.removeEventListener('click', closeMenu);
+  }
+});
+onMounted(() => {
+  initTags();
+  addTags();
+  if (sessionStorage.getItem('visitedViews')) {
+    isVisitedViews();
+  }
+});
+function isVisitedViews() {
+  if (sessionStorage.getItem('visitedViews') != 'TransferManagent') {
+    //调拨单据号删除
+    sessionStorage.setItem('busNo', '');
+  }
+  if (sessionStorage.getItem('visitedViews') != 'BatchTransfer') {
+    //批量调拨单据号删除
+    sessionStorage.setItem('busNopl', '');
+  }
+  if (sessionStorage.getItem('visitedViews') != 'RequisitionManagement') {
+    //领用单据号删除
+    sessionStorage.setItem('busNoLY', '');
+  }
+  if (sessionStorage.getItem('visitedViews') != 'ReturningInventory') {
+    //领用退货单据号删除
+    sessionStorage.setItem('busNoLYTH', '');
+  }
+  if (sessionStorage.getItem('visitedViews') != 'LossReportingManagement') {
+    //报损单据号删除
+    sessionStorage.setItem('busNoBS', '');
+  }
+  if (sessionStorage.getItem('visitedViews') != 'ChkstockPart') {
+    //盘点单据号删除
+    sessionStorage.setItem('busNopd', '');
+  }
+  if (sessionStorage.getItem('visitedViews') != 'ChkstockBatch') {
+    //批量盘点单据号删除
+    sessionStorage.setItem('busNoplpd', '');
+  }
+  if (sessionStorage.getItem('visitedViews') && sessionStorage.getItem('visitedViewsQuery') != '') {
+    sessionStorage.setItem('busNo', '');
+    sessionStorage.setItem('busNopl', '');
+    sessionStorage.setItem('busNoLY', '');
+    sessionStorage.setItem('busNoLYTH', '');
+    sessionStorage.setItem('busNoBS', '');
+    sessionStorage.setItem('busNopd', '');
+    sessionStorage.setItem('busNoplpd', '');
+  }
+}
+
+function isActive(r) {
+  return r.path === route.path;
+}
+function activeStyle(tag) {
+  if (!isActive(tag)) return {};
+  return {
+    'background-color': theme.value,
+    'border-color': theme.value,
+  };
+}
+function isAffix(tag) {
+  return tag.meta && tag.meta.affix;
+}
+function isFirstView() {
+  try {
+    return (
+      selectedTag.value.fullPath === '/index' ||
+      selectedTag.value.fullPath === visitedViews.value[1].fullPath
+    );
+  } catch (err) {
+    return false;
+  }
+}
+function isLastView() {
+  try {
+    return (
+      selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath
+    );
+  } catch (err) {
+    return false;
+  }
+}
+function filterAffixTags(routes, basePath = '') {
+  let tags = [];
+  routes.forEach((route) => {
+    if (route.meta && route.meta.affix) {
+      const tagPath = getNormalPath(basePath + '/' + route.path);
+      tags.push({
+        fullPath: tagPath,
+        path: tagPath,
+        name: route.name,
+        meta: { ...route.meta },
+      });
+    }
+    if (route.children) {
+      const tempTags = filterAffixTags(route.children, route.path);
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags];
+      }
+    }
+  });
+  return tags;
+}
+function initTags() {
+  const res = filterAffixTags(routes.value);
+  affixTags.value = res;
+  for (const tag of res) {
+    // Must have tag name
+    if (tag.name) {
+      useTagsViewStore().addVisitedView(tag);
+    }
+  }
+}
+function addTags() {
+  const { name } = route;
+  if (name) {
+    useTagsViewStore().addView(route);
+    if (route.meta.link) {
+      useTagsViewStore().addIframeView(route);
+    }
+  }
+  return false;
+}
+function moveToCurrentTag() {
+  nextTick(() => {
+    for (const r of visitedViews.value) {
+      if (r.path === route.path) {
+        scrollPaneRef.value.moveToTarget(r);
+        // when query is different then update
+        if (r.fullPath !== route.fullPath) {
+          useTagsViewStore().updateVisitedView(route);
+        }
+      }
+    }
+  });
+}
+function refreshSelectedTag(view) {
+  proxy.$tab.refreshPage(view);
+  if (route.meta.link) {
+    useTagsViewStore().delIframeView(route);
+  }
+}
+function closeSelectedTag(view) {
+  proxy.$tab.closePage(view).then(({ visitedViews }) => {
+    if (isActive(view)) {
+      toLastView(visitedViews, view);
+    }
+  });
+}
+function closeRightTags() {
+  proxy.$tab.closeRightPage(selectedTag.value).then((visitedViews) => {
+    if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews);
+    }
+  });
+}
+function closeLeftTags() {
+  proxy.$tab.closeLeftPage(selectedTag.value).then((visitedViews) => {
+    if (!visitedViews.find((i) => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews);
+    }
+  });
+}
+function closeOthersTags() {
+  router.push(selectedTag.value).catch(() => {});
+  proxy.$tab.closeOtherPage(selectedTag.value).then(() => {
+    moveToCurrentTag();
+  });
+}
+function closeAllTags(view) {
+  proxy.$tab.closeAllPage().then(({ visitedViews }) => {
+    if (affixTags.value.some((tag) => tag.path === route.path)) {
+      return;
+    }
+    toLastView(visitedViews, view);
+  });
+}
+function toLastView(visitedViews, view) {
+  const latestView = visitedViews.slice(-1)[0];
+  if (view.name == 'TransferManagent') {
+    //调拨单据号删除
+    sessionStorage.setItem('busNo', '');
+  }
+  if (view.name == 'BatchTransfer') {
+    //批量调拨单据号删除
+    sessionStorage.setItem('busNopl', '');
+  }
+  if (view.name == 'RequisitionManagement') {
+    //领用单据号删除
+    sessionStorage.setItem('busNoLY', '');
+  }
+  if (view.name == 'ReturningInventory') {
+    //领用退货单据号删除
+    sessionStorage.setItem('busNoLYTH', '');
+  }
+  if (view.name == 'LossReportingManagement') {
+    //报损单据号删除
+    sessionStorage.setItem('busNoBS', '');
+  }
+  if (view.name == 'ChkstockPart') {
+    //盘点单据号删除
+    sessionStorage.setItem('busNopd', '');
+  }
+  if (view.name == 'ChkstockBatch') {
+    //批量盘点单据号删除
+    sessionStorage.setItem('busNoplpd', '');
+  }
+  if (latestView) {
+    router.push(latestView.fullPath);
+  } else {
+    // now the default is to redirect to the home page if there is no tags-view,
+    // you can adjust it according to your needs.
+    if (view.name === 'Dashboard') {
+      // to reload home page
+      router.replace({ path: '/redirect' + view.fullPath });
+    } else {
+      router.push('/');
+    }
+  }
+}
+function openMenu(tag, e) {
+  const menuMinWidth = 105;
+  const offsetLeft = proxy.$el.getBoundingClientRect().left; // container margin left
+  const offsetWidth = proxy.$el.offsetWidth; // container width
+  const maxLeft = offsetWidth - menuMinWidth; // left boundary
+  const l = e.clientX - offsetLeft + 15; // 15: margin right
+
+  if (l > maxLeft) {
+    left.value = maxLeft;
+  } else {
+    left.value = l;
+  }
+
+  top.value = e.clientY;
+  visible.value = true;
+  selectedTag.value = tag;
+}
+function closeMenu() {
+  visible.value = false;
+}
+function handleScroll() {
+  closeMenu();
+}
+</script>
+
+<style lang='scss' scoped>
+.tags-view-container {
+  height: 34px;
+  width: 100%;
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  .tags-view-wrapper {
+    .tags-view-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 26px;
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      &:first-of-type {
+        margin-left: 15px;
+      }
+      &:last-of-type {
+        margin-right: 15px;
+      }
+      &.active {
+        background-color: #42b983;
+        color: #fff;
+        border-color: #42b983;
+        &::before {
+          content: '';
+          background: #fff;
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+  .contextmenu {
+    margin: 0;
+    background: #fff;
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+//reset element css of el-icon-close
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transform-origin: 100% 50%;
+      &:before {
+        transform: scale(0.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+      &:hover {
+        background-color: #b4bccc;
+        color: #fff;
+        width: 12px !important;
+        height: 12px !important;
+      }
+    }
+  }
+}
+</style>

openhis-ui-vue3/src/layout/components/index.js

@@ -0,0 +1,4 @@
+export { default as AppMain } from './AppMain'
+export { default as Navbar } from './Navbar'
+export { default as Settings } from './Settings'
+export { default as TagsView } from './TagsView/index.vue'

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

@@ -0,0 +1,150 @@
+<template>
+  <div class="app-wrapper">
+    <!-- 遮罩层 -->
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <!-- 左侧侧边栏 -->
+    <sidebar v-if="!sidebar.hide" />
+    <!-- 右侧主容器 -->
+    <div class="main-wrapper">
+      <!-- 顶部导航栏 -->
+      <navbar @setLayout="setLayout" />
+      <!-- 内容区 -->
+      <div :class="{ 'hasTagsView': needTagsView }" class="content-wrapper">
+        <!-- 标签栏 -->
+        <div v-if="needTagsView" :class="{ 'fixed-header': fixedHeader }">
+          <tags-view />
+        </div>
+        <!-- 主内容 -->
+        <app-main />
+      </div>
+    </div>
+    <!-- 设置组件 -->
+    <settings ref="settingRef" />
+    <!-- 公告弹窗组件 -->
+    <notice-popup ref="noticePopupRef" />
+  </div>
+</template>
+
+<script setup>
+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 useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+
+const settingsStore = useSettingsStore();
+const theme = computed(() => settingsStore.theme);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const sidebar = computed(() => useAppStore().sidebar);
+const device = computed(() => useAppStore().device);
+const needTagsView = computed(() => settingsStore.tagsView);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+
+const { width } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+watchEffect(() => {
+  if (device.value === 'mobile' && sidebar.value.opened) {
+    useAppStore().closeSideBar({ withoutAnimation: false });
+  }
+  if (width.value - 1 < WIDTH) {
+    useAppStore().toggleDevice('mobile');
+    useAppStore().closeSideBar({ withoutAnimation: true });
+  } else {
+    useAppStore().toggleDevice('desktop');
+  }
+});
+
+function handleClickOutside() {
+  useAppStore().closeSideBar({ withoutAnimation: false });
+}
+
+const settingRef = ref(null);
+const noticePopupRef = ref(null);
+
+function setLayout() {
+  settingRef.value.openSetting();
+}
+
+// 暴露公告弹窗引用，供其他组件调用
+defineExpose({
+  noticePopupRef
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/mixin.scss';
+@import '@/assets/styles/variables.module.scss';
+
+.app-wrapper {
+  @include clearfix;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
+.main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.navbar-container {
+  height: 50px;
+  width: 100%;
+  flex-shrink: 0;
+  background: #fff;
+}
+
+.content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  padding-top: 0;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 50px;
+  right: 0;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  padding: 0 15px;
+  background: #fff;
+}
+
+.sidebarHide {
+  .sidebar-container {
+    display: none;
+  }
+}
+
+.mobile {
+  .main-wrapper {
+    margin-left: 0;
+  }
+}
+</style>