feat(layouts): ✨ 调整布局，添加设置选项

package.json

@@ -119,7 +119,6 @@
     "vitest": "^0.24.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.8",
-    "vue3-colorpicker": "^2.0.4",
     "xlsx": "^0.18.5"
   },
   "license": "MIT",

public/serverConfig.json

@@ -10,6 +10,7 @@
   "hideNavbart": false,
   "hideTabs": false,
   "labelPersistent": true,
+  "sidebarFold": "top",
   "StorageConfig":{
     "expire": 0, 
     "isEncrypt": false

src/components/Application/AppTheme.vue

@@ -44,21 +44,21 @@
 <style lang="scss" scoped>
   .theme {
     position: relative;
-    width: 52px;
+    width: 48px;
     height: 26px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: 151515;
     border: 1px solid var(--text-color-primary);
-    padding: 0 6px;
+    padding: 0 5px;
     font-size: 0.8em;
     border-radius: 30px;
     .theme-inner {
       position: absolute;
       z-index: 1;
-      width: 18px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       background-color: var(--text-color-primary);
       border-radius: 50%;
       transition: transform 0.5s, background-color 0.5s;
@@ -67,7 +67,7 @@
   }
   .theme-dark {
     .theme-inner {
-      transform: translateX(calc(100% + 2px));
+      transform: translateX(calc(100% + 4px));
     }
   }
   .icon {

src/components/SvgIcon/index.vue

@@ -29,9 +29,11 @@
   <el-icon v-if="isELIcon" :class="className">
     <component :is="name" />
   </el-icon>
-  <svg v-else :class="className" class="svg" :aria-hidden="true">
-    <use :xlink:href="symbolId" :fill="color" />
-  </svg>
+  <i v-else class="svg-icon">
+    <svg :class="className" class="svg" :aria-hidden="true">
+      <use :xlink:href="symbolId" :fill="color" />
+    </svg>
+  </i>
 </template>
 
 <style lang="scss" scoped>
@@ -43,13 +45,17 @@
     font-size: 1em;
     color: currentColor;
   }
-
-  .svg {
-    width: 1em;
+  .svg-icon {
     height: 1em;
+    line-height: 1em;
+    font-size: 1em;
+    .svg {
+      width: 1em;
+      height: 1em;
 
-    use {
-      fill: currentColor;
+      use {
+        fill: currentColor;
+      }
     }
   }
 </style>

src/layouts/pageLayouts/components/AppFold/index.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import SvgIcon from '@/components/SvgIcon/index.vue';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+
+  // 当前是否折叠导航栏
+  const { appConfig, setAppConfigMode } = useRootSetting();
+  // 折叠菜单事件
+  const handerShowElmenu = () => {
+    setAppConfigMode({ collapseMenu: !appConfig.value.collapseMenu });
+  };
+</script>
+
+<template>
+  <SvgIcon
+    class="breadcrumb-fold cursor"
+    :class="{ 'breadcrumb-unfold': appConfig.collapseMenu }"
+    name="fold"
+    color="#e3e3e3"
+    @click="handerShowElmenu"
+  ></SvgIcon>
+</template>
+
+<style lang="scss">
+  .breadcrumb-unfold {
+    transform: rotate(180deg);
+  }
+</style>

src/layouts/pageLayouts/components/AppLogo/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  import { getCurrentInstance } from 'vue';
+  import { useRootSetting } from '@/hooks/setting/useRootSetting';
+
+  const { appConfig } = useRootSetting();
+  const config = getCurrentInstance()?.appContext.config.globalProperties.$config;
+</script>
+
+<template>
+  <div
+    class="app-logo"
+    :class="{ 'app-logo-hide': appConfig.collapseMenu && appConfig.sidebarMode !== 'horizontal' }"
+  >
+    <div class="logo">
+      <img class="logo_img" src="@/assets/logo.png" mode="scaleToFill" />
+    </div>
+
+    <span class="name">{{ config.title }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .app-logo {
+    width: $sideBarWidth;
+    height: #{$navBarHeight};
+    font-size: 38px;
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    .logo {
+      width: $sideHideBarWidth;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .logo_img {
+        width: 38px;
+        height: 38px;
+      }
+    }
+
+    .name {
+      width: 100%;
+      flex: 1;
+      font-size: 22px;
+      font-weight: 500;
+      transition: all 0.5s;
+      overflow: hidden;
+    }
+  }
+  .app-logo-hide {
+    // width: $sideBarWidth;
+    .name {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+  }
+</style>