feat(login): 添加租户名称获取功能并优化前端布局

- 在登录控制器中注入租户服务并获取租户名称信息
- 添加租户名称到登录响应结果中
- 更新样式变量定义侧边栏宽度和Logo高度
- 重构公告面板组件统一公告通知显示逻辑
- 简化公告类型图标和样式映射关系
- 更新侧边栏为垂直菜单布局并添加折叠功能
- 优化Logo组件显示租户名称和系统标题
- 调整导航栏布局结构和响应式样式
- 重构主应用容器样式和标签页显示逻辑

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

@@ -1,21 +1,29 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div class="app-wrapper">
+    <!-- 遮罩层 -->
     <div
       v-if="device === 'mobile' && sidebar.opened"
       class="drawer-bg"
       @click="handleClickOutside"
     />
-    <div class="top-container">
-      <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-      <!-- <navbar @setLayout="setLayout" class="navbar-container" /> -->
-    </div>
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <tags-view v-if="needTagsView" />
+    <!-- 左侧侧边栏 -->
+    <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>
-      <app-main />
-      <settings ref="settingRef" />
     </div>
+    <!-- 设置组件 -->
+    <settings ref="settingRef" />
     <!-- 公告弹窗组件 -->
     <notice-popup ref="noticePopupRef" />
   </div>
@@ -24,7 +32,7 @@
 <script setup>
 import {useWindowSize} from '@vueuse/core';
 import Sidebar from './components/Sidebar/index.vue';
-import {AppMain, Settings, TagsView} from './components';
+import {AppMain, Settings, TagsView, Navbar} from './components';
 import NoticePopup from '@/components/NoticePopup/index.vue';
 
 import useAppStore from '@/store/modules/app';
@@ -38,14 +46,7 @@ const device = computed(() => useAppStore().device);
 const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 
-const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile',
-}));
-
-const { width, height } = useWindowSize();
+const { width } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
@@ -83,66 +84,67 @@ defineExpose({
 
 .app-wrapper {
   @include clearfix;
-  position: relative;
-  height: 100%;
   width: 100%;
-
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
+  height: 100%;
+  display: flex;
+  overflow: hidden;
 }
 
 .drawer-bg {
   background: #000;
   opacity: 0.3;
   width: 100%;
-  top: 0;
   height: 100%;
-  position: absolute;
-  z-index: 999;
-}
-
-.top-container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 50px;
-  background-color: $base-menu-background;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1001;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.35);
-  overflow: visible;
+  z-index: 999;
 }
 
-.sidebar-container {
+.main-wrapper {
   flex: 1;
-  height: 50px;
-  min-width: 0;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  min-width: 0;
 }
 
 .navbar-container {
-  min-width: 280px;
   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%;
-  transition: width 0.28s;
+  padding: 0 15px;
+  background: #fff;
 }
 
-.mobile .fixed-header {
-  width: 100%;
+.sidebarHide {
+  .sidebar-container {
+    display: none;
+  }
 }
 
-.main-container {
-  padding-top: 50px;
+.mobile {
+  .main-wrapper {
+    margin-left: 0;
+  }
 }
 </style>