✂️ feat: layout 重构

components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     LayoutSection: typeof import('./src/components/Layout/LayoutSection.vue')['default']
     LayoutView: typeof import('./src/components/Layout/LayoutView.vue')['default']
     LayoutWork: typeof import('./src/components/Layout/LayoutWork.vue')['default']
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NavBar: typeof import('./src/components/Navigation/NavBar.vue')['default']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
@@ -47,7 +48,8 @@ declare module 'vue' {
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NThing: typeof import('naive-ui')['NThing']
-    Octocat: typeof import('./src/components/Footer/octocat.vue')['default']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    Octocat: typeof import('./src/components/Octocat.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchCorporation: typeof import('./src/components/SearchSelect/SearchCorporation.vue')['default']

src/components/Footer/index.vue

@@ -24,7 +24,7 @@
   </footer>
 </template>
 <script lang="ts">
-import Octocat from './octocat.vue'
+import Octocat from '@/components/Octocat.vue'
 
 export default defineComponent({
   name: 'MyFooter',

src/components/Layout/LayoutArea.vue

@@ -2,38 +2,41 @@
   <div class="layout-area-container bg-#f0f2f5 dark:bg-#1e1e20">
     <div class="layout-area-container__top">
       <slot name="top"></slot>
+      <TabsController />
     </div>
     <div class="layout-area-container__bottom">
-      <div class="layout-area-container__bottom__inner">
-        <aside
-          v-if="$slots.side"
-          :class="[
-            'side-layout-area-menu-bar',
-            'b-r-#dcdfe6 b-r b-r-solid',
-            'dark:b-r-#444',
-          ]"
-        >
-          <div class="layout-area-menu-bar__inner">
-            <slot name="side"></slot>
-          </div>
-        </aside>
-        <section class="content-section-container bg-#f0f2f5 dark:bg-#1e1e20">
-          <main class="main-content-box">
-            <slot name="content"></slot>
-          </main>
-        </section>
-      </div>
+      <!-- <aside
+        v-if="$slots.side"
+        :class="[
+          'side-layout-area-menu-bar',
+          'b-r-#dcdfe6 b-r b-r-solid',
+          'dark:b-r-#444',
+        ]"
+      >
+        <div class="layout-area-menu-bar__inner">
+          <slot name="side"></slot>
+        </div>
+      </aside> -->
+      <section
+        class="flex-1"
+        :class="{
+          'overflow-y-auto': false
+        }"
+      >
+        <slot name="content"></slot>
+      </section>
+      <MyFooter show-border />
     </div>
-    <MyFooter show-border />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import TabsController from '@/widgets/WorkTabs/TabsController.vue'
 
 /**
  * 上下左右布局，顶部导航 + (底部左侧侧边栏 + 底部右侧内容区域)
  */
-export default defineComponent({
+defineOptions({
   name: 'LayoutArea'
 })
 </script>
@@ -50,46 +53,41 @@ $headerHeight: 48px;
   overflow: hidden;
 
   .layout-area-container__top {
-
+    z-index: 1;
   }
 
   .layout-area-container__bottom {
     display: flex;
+    flex-direction: column;
     flex: 1;
-    position: relative;
+    overflow-y: auto;
 
-    .layout-area-container__bottom__inner {
-      position: absolute;
-      inset: 1px 0 0;
-      display: flex;
+    .side-layout-area-menu-bar {
+      position: relative;
+      flex-direction: column;
+      width: 256px;
+      transition: width 0.28s;
 
-      .side-layout-area-menu-bar {
-        position: relative;
-        flex-direction: column;
-        width: 256px;
-        transition: width 0.28s;
-
-        .layout-area-menu-bar__inner {
-          position: absolute;
-          inset: 0;
-          overflow-x: hidden;
-          overflow-y: auto;
-          padding: 24px;
-          scroll-behavior: smooth;
-        }
+      .layout-area-menu-bar__inner {
+        position: absolute;
+        inset: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: 24px;
+        scroll-behavior: smooth;
       }
+    }
 
-      .content-section-container {
-        display: flex;
-        flex: auto;
-        flex-direction: column;
-        min-width: 0;
+    .content-section-container {
+      display: flex;
+      flex: auto;
+      flex-direction: column;
+      min-width: 0;
 
-        .main-content-box {
-          flex: auto;
-          position: relative;
-          overflow: auto;
-        }
+      .main-content-box {
+        flex: auto;
+        position: relative;
+        overflow: auto;
       }
     }
   }

src/components/Layout/LayoutSection.vue

@@ -1,22 +1,14 @@
 <template>
   <div class="layout-section-container">
     <div
-      v-if="!title && !$slots.head"
+      v-if="$slots.title"
       class="layout-section-container__header"
     >
-      <div class="layout-section-container__header-head c-#303133 dark:c-#fff text_nowrap">
-        <h1
-          v-if="title"
-          :title="title"
-          class="layout-section-container__header-title text_nowrap"
-        >
-          {{ title }}
-        </h1>
-        <slot name="head"></slot>
-      </div>
-      <div class="layout-section-container__header-action">
-        <slot name="action"></slot>
-      </div>
+      <h1
+        class="layout-section-container__header-title c-#303133 dark:c-#fff text_nowrap"
+      >
+        <slot name="title"></slot>
+      </h1>
     </div>
     <div class="layout-section-container__content">
       <div
@@ -68,16 +60,11 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 40px;
+    padding: 8px 0;
 
-    .layout-section-container__header-head {
-
-      .layout-section-container__header-title {
-        height: 18px;
-        font-size: 18px;
-        line-height: 18px;
-        font-weight: 500;
-      }
+    .layout-section-container__header-title {
+      font-size: 18px;
+      font-weight: 500;
     }
 
     .layout-section-container__header-action {
@@ -90,6 +77,8 @@ export default defineComponent({
     flex-direction: column;
     position: relative;
     flex: auto;
+    min-height: 0;
+    overflow-y: auto;
 
     .content-divider {
       height: 1px;

src/components/Navigation/Avatar.vue

@@ -66,7 +66,7 @@ export default defineComponent({
   cursor: pointer;
   user-select: none;
   outline: none;
-  padding: 0 12px;
+  padding: 0 6px;
 
   img {
     width: 24px;

src/components/Navigation/ChangeTheme.vue

@@ -67,6 +67,8 @@ const handleChange = (_theme) => {
 
 <style lang="scss" scoped>
 .navigation-change-theme {
-  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
 }
 </style>

src/components/Navigation/NavBar.vue

@@ -18,10 +18,9 @@
         :auth="isAuth"
       />
       <div style="flex: 1;"></div>
-      <template v-if="isAuth">
-        <NavigationSideAction />
-        <NavigationAvatar />
-      </template>
+      <NavigationSideAction v-if="isAuth" />
+      <Octocat />
+      <NavigationAvatar v-if="isAuth" />
       <NavigationChangeTheme />
     </div>
   </header>
@@ -33,6 +32,8 @@ import NavigationAvatar from '@/components/Navigation/Avatar.vue'
 import NavigationChangeTheme from '@/components/Navigation/ChangeTheme.vue'
 import NavigationSideLogo from '@/components/Navigation/Side/SideLogo.vue'
 
+import Octocat from '@/components/Octocat.vue'
+
 defineOptions({
   name: 'NavigationNavBar'
 })
@@ -72,7 +73,8 @@ $headerHeight: 48px;
   .navbar-header-box {
     display: flex;
     height: 100%;
-    padding: 0 16px;
+    padding-left: 16px;
+    padding-right: 6px;
   }
 }
 </style>

src/components/Navigation/Side/SideAction.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     .action-item {
       height: 100%;
       line-height: inherit;
-      padding: 0 12px;
+      padding: 0 6px;
       margin-right: 5px;
 
       &:last-child {

src/components/Footer/octocat.vue → src/components/Octocat.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="octocat-link c-#71717a dark:c-#666 hover-c-#3f3f46 dark:hover-c-#f6f5f7"
+    class="octocat-link c-#3f3f46 dark:c-#bbb hover-c-#000 dark:hover-c-#f6f5f7"
     target="_blank"
     :href="link"
   >
@@ -32,6 +32,8 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .octocat-link {
+  display: flex;
+  align-items: center;
   width: 22px;
   margin: 0 6px;
   transition: 0.2s color;