提交merge1.3

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

@@ -1,5 +1,6 @@
 <template>
   <div
+<<<<<<< HEAD
   :class="{ 'has-logo': showLogo }"
   :style="{
     backgroundColor:
@@ -27,6 +28,39 @@
           :base-path="route.path"
         />
       </el-menu>
+=======
+    :class="{ 'has-logo': showLogo }"
+    class="sidebar-wrapper"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
+    }"
+  >
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
+    <div class="menu-container">
+      <div class="menu-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="horizontal"
+        >
+          <sidebar-item
+            v-for="(route, index) in sidebarRouters"
+            :key="route.path + index"
+            :item="route"
+            :base-path="route.path"
+          />
+        </el-menu>
+      </div>
+    </div>
+>>>>>>> v1.3
     <navbar @setLayout="setLayout" class="navbar-container" />
     <settings ref="settingRef" />
   </div>
@@ -69,16 +103,70 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
+<<<<<<< HEAD
 /* 移除滚动条样式 */
+=======
+.sidebar-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 50px;
+  padding: 0;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.menu-container {
+  flex: 1;
+  height: 50px;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.menu-scrollbar {
+  height: 50px;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  align-items: center;
+
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar:vertical {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+>>>>>>> v1.3
 
 .el-menu--horizontal {
   display: flex !important;
+  align-items: center !important;
   border-bottom: none !important;
   background-color: transparent !important;
   min-width: auto;
   flex-wrap: nowrap;
+<<<<<<< HEAD
   overflow: hidden !important;
   white-space: nowrap;
+=======
+  height: 50px;
+>>>>>>> v1.3
 
   & > .el-menu-item,
   & > .el-sub-menu {
@@ -87,8 +175,16 @@ function setLayout() {
     color: #fff;
     padding: 0 15px !important;
     font-size: 14px;
+<<<<<<< HEAD
     min-width: auto !important;
     white-space: nowrap;
+=======
+    min-width: 120px !important;
+    flex-shrink: 0;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+>>>>>>> v1.3
   }
 
   :deep(.svg-icon) {
@@ -98,7 +194,13 @@ function setLayout() {
 
   :deep(.el-sub-menu__title) {
     padding-right: 25px !important;
+<<<<<<< HEAD
     white-space: nowrap;
+=======
+    display: flex;
+    align-items: center;
+    height: 50px;
+>>>>>>> v1.3
   }
 
   :deep(.el-sub-menu__icon-arrow) {
@@ -110,6 +212,7 @@ function setLayout() {
   }
 }
 
+<<<<<<< HEAD
 /* 水平布局，并与 Navbar 正确配合 */
 .sidebar-layout {
   display: flex;
@@ -132,6 +235,39 @@ function setLayout() {
     height: 50px;
     padding: 0;
     width: 100%;
+=======
+.navbar-container {
+  flex-shrink: 0;
+  height: 50px;
+  z-index: 1002;
+}
+
+/* 响应式处理 */
+@media (max-width: 768px) {
+  .menu-container {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .el-menu--horizontal {
+    & > .el-menu-item,
+    & > .el-sub-menu {
+      padding: 0 12px !important;
+      min-width: 80px !important;
+      font-size: 12px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .el-menu--horizontal {
+    & > .el-menu-item,
+    & > .el-sub-menu {
+      padding: 0 8px !important;
+      min-width: 60px !important;
+      font-size: 11px;
+    }
+>>>>>>> v1.3
   }
 }
 </style>