From 0a93703b9db49f2d62ae2f39aafd9d75195c6192 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Wed, 10 Jan 2024 15:51:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20layout=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/appMain.vue          | 41 ++++++++++++----------
 src/layout/components/sidebar/vertical.vue | 19 ++++++----
 src/layout/index.vue                       | 35 +++++++++++++++---
 src/style/sidebar.scss                     | 27 ++++++++------
 4 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 3f2a244..814d11a 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -8,7 +8,10 @@ const props = defineProps({
   fixedHeader: Boolean
 });
 
-const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+const {
+  // $storage,
+  $config
+} = useGlobal<GlobalPropertiesApi>();
 
 const keepAlive = computed(() => {
   return $config?.KeepAlive;
@@ -20,23 +23,23 @@ const transitions = computed(() => {
   };
 });
 
-const hideTabs = computed(() => {
-  return $storage?.configure.hideTabs;
-});
+// const hideTabs = computed(() => {
+//   return $storage?.configure.hideTabs;
+// });
 
-const layout = computed(() => {
-  return $storage?.layout.layout === "vertical";
-});
+// const layout = computed(() => {
+//   return $storage?.layout.layout === "vertical";
+// });
 
-const getSectionStyle = computed(() => {
-  return [
-    hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 85px;" : "",
-    hideTabs.value && !layout.value ? "padding-top: 48px" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
-    props.fixedHeader ? "" : "padding-top: 0;"
-  ];
-});
+// const getSectionStyle = computed(() => {
+//   return [
+//     hideTabs.value && layout ? "padding-top: 48px;" : "",
+//     !hideTabs.value && layout ? "padding-top: 85px;" : "",
+//     hideTabs.value && !layout.value ? "padding-top: 48px" : "",
+//     !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
+//     props.fixedHeader ? "" : "padding-top: 0;"
+//   ];
+// });
 
 const transitionMain = defineComponent({
   render() {
@@ -76,7 +79,6 @@ const transitionMain = defineComponent({
 <template>
   <section
     :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
-    :style="getSectionStyle"
   >
     <router-view>
       <template #default="{ Component, route }">
@@ -132,7 +134,10 @@ const transitionMain = defineComponent({
 .app-main {
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 48px - 2 * 24px);
+  overflow: scroll;
+
+  /* height: 100vh; */
   overflow-x: hidden;
 }
 
diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue
index b2ce4f2..29bc422 100644
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -1,9 +1,10 @@
+<!-- TODO_welcome 左侧菜单栏 -->
 <script setup lang="ts">
 import Logo from "./logo.vue";
 import { useRoute } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
-import leftCollapse from "./leftCollapse.vue";
+// import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { responsiveStorageNameSpace } from "@/config";
 import { storageLocal, isAllEmpty } from "@pureadmin/utils";
@@ -18,7 +19,13 @@ const showLogo = ref(
   )?.showLogo ?? true
 );
 
-const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
+const {
+  device,
+  pureApp,
+  isCollapse,
+  menuSelect
+  // toggleSideBar
+} = useNav();
 
 const subMenuData = ref([]);
 
@@ -91,7 +98,7 @@ onBeforeUnmount(() => {
         router
         unique-opened
         mode="vertical"
-        class="outer-most select-none"
+        class="select-none outer-most"
         :collapse="isCollapse"
         :default-active="defaultActive"
         :collapse-transition="false"
@@ -101,15 +108,15 @@ onBeforeUnmount(() => {
           :key="routes.path"
           :item="routes"
           :base-path="routes.path"
-          class="outer-most select-none"
+          class="select-none outer-most"
         />
       </el-menu>
     </el-scrollbar>
-    <leftCollapse
+    <!-- <leftCollapse
       v-if="device !== 'mobile'"
       :is-active="pureApp.sidebar.opened"
       @toggleClick="toggleSideBar"
-    />
+    /> -->
   </div>
 </template>
 
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c0f0aaf..1913b7f 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -145,19 +145,44 @@ const layoutHeader = defineComponent({
     );
   }
 });
+/**
+ *  <div
+      :class="[
+        'main-container',
+        pureSetting.hiddenSideBar ? 'main-hidden' : ''
+      ]"
+    >
+      <div v-if="set.fixedHeader">
+        <layout-header />
+        <!-- 主体内容 -->
+        <app-main :fixed-header="set.fixedHeader" />
+      </div>
+      <el-scrollbar v-else>
+        <el-backtop
+          title="回到顶部"
+          target=".main-container .el-scrollbar__wrap"
+        >
+          <backTop />
+        </el-backtop>
+        <layout-header />
+        <!-- 主体内容 -->
+        <app-main :fixed-header="set.fixedHeader" />
+      </el-scrollbar>
+    </div>
+ */
 </script>
 
 <template>
-  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
-    <div
+  <div ref="appWrapperRef" :class="['app-wrapper flex', set.classes]">
+    <!-- <div
       v-show="
         set.device === 'mobile' &&
         set.sidebar.opened &&
         layout.includes('vertical')
       "
-      class="app-mask"
+      class="flex app-mask"
       @click="useAppStoreHook().toggleSideBar()"
-    />
+    /> -->
     <Vertical
       v-show="
         !pureSetting.hiddenSideBar &&
@@ -187,6 +212,7 @@ const layoutHeader = defineComponent({
         <app-main :fixed-header="set.fixedHeader" />
       </el-scrollbar>
     </div>
+
     <!-- 系统设置 -->
     <setting />
   </div>
@@ -197,6 +223,7 @@ const layoutHeader = defineComponent({
   position: relative;
   width: 100%;
   height: 100%;
+  padding: 24px;
 
   &::after {
     display: table;
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 3a53c09..b284d3f 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -1,4 +1,6 @@
 /* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
+// $bodyMargin: 24px;
+
 @mixin merge-style($sideBarWidth) {
   $menuActiveText: #7a80b4;
 
@@ -35,9 +37,10 @@
 
   .main-container {
     position: relative;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     min-height: 100%;
-    margin-left: $sideBarWidth;
+    margin-left: 20px;
     background: #f0f2f5;
 
     /* main-content 属性动画 */
@@ -50,11 +53,11 @@
   }
 
   .fixed-header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 998;
-    width: calc(100% - 210px);
+    // position: fixed;
+    // top: 0;
+    // right: 0;
+    // z-index: 998;
+    // width: calc(100vw - 510px);
 
     /* fixed-header 属性左上角动画 */
     transition: width var(--pure-transition-duration);
@@ -73,15 +76,17 @@
   }
 
   .sidebar-container {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    // position: fixed;
+    // top: 0;
+    // bottom: 0;
+    // left: 0;
     z-index: 1001;
     width: $sideBarWidth !important;
     height: 100%;
     overflow: hidden;
     font-size: 0;
+
+    // margin: $bodyMargin;
     background: $menuBg;
     box-shadow: 0 0 1px #888;