fix(layout): layout error

src/App.vue

@@ -9,13 +9,12 @@ const appStore = useAppStore()
 
 <template>
   <n-config-provider
-    class="wh-full"
+    class="wh-full" inline-theme-disabled :theme="appStore.darkMode ? darkTheme : null"
-    inline-theme-disabled
+    :locale="locale" :date-locale="dateLocale" :theme-overrides="appStore.theme"
-    :theme="appStore.darkMode ? darkTheme : null"
-    :locale="locale"
-    :date-locale="dateLocale"
-    :theme-overrides="appStore.theme"
   >
-    <naive-provider><router-view /></naive-provider>
+    <naive-provider>
+      <router-view />
+      <Watermark :show-watermark="appStore.showWatermark" />
+    </naive-provider>
   </n-config-provider>
 </template>

src/components/common/appLoading.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const name = import.meta.env.VITE_APP_NAME
 </script>
 
 <template>
@@ -30,9 +29,6 @@ const name = import.meta.env.VITE_APP_NAME
         <div />
       </div>
     </div>
-    <n-h1 class="z-1">
-      {{ name }}
-    </n-h1>
   </div>
 </template>
 

src/layouts/BasicLayout/index.vue

@@ -13,7 +13,6 @@ import {
   Setting,
   TabBar,
   UserCenter,
-  Watermark,
 } from '../components'
 import { useAppStore, useRouteStore } from '@/store'
 
@@ -28,27 +27,28 @@ appStore.setPrimaryColor()
   <n-layout
     has-sider
     class="wh-full"
+    embedded
   >
     <n-layout-sider
       bordered
       :collapsed="appStore.collapsed"
-      :collapsed-width="64"
       collapse-mode="width"
+      :collapsed-width="64"
       :width="240"
-      :inverted="appStore.invertedSider"
+      content-style="display: flex;flex-direction: column;min-height:100%;"
     >
       <Logo v-if="appStore.showLogo" />
-      <Menu />
+      <n-scrollbar class="flex-1">
+        <Menu />
+      </n-scrollbar>
     </n-layout-sider>
     <n-layout
-      class="h-full"
+      class="h-full flex flex-col"
+      content-style="display: flex;flex-direction: column;min-height:100%;"
       embedded
+      :native-scrollbar="false"
     >
-      <n-layout-header
+      <n-layout-header bordered position="absolute" class="z-1">
-        :position="appStore.fixedHeader ? 'absolute' : 'static'"
-        :inverted="appStore.invertedHeader"
-        class="z-1"
-      >
         <div class="h-60px flex-y-center justify-between">
           <div class="flex-y-center h-full">
             <CollapaseButton />
@@ -64,45 +64,36 @@ appStore.setPrimaryColor()
             <UserCenter />
           </div>
         </div>
+        <TabBar v-if="appStore.showTabs" class="h-45px" />
       </n-layout-header>
-      <n-layout-header
+      <div class="flex-1 p-16px flex flex-col">
-        v-if="appStore.showTabs"
+        <div class="h-60px" />
-        :position="appStore.fixedHeader ? 'absolute' : 'static'"
+        <div v-if="appStore.showTabs" class="h-45px" />
-        class="z-1"
+        <router-view v-slot="{ Component, route }" class="flex-1">
-        :class="{ 'm-t-61px': appStore.fixedHeader }"
+          <transition
+            :name="appStore.transitionAnimation"
+            mode="out-in"
+          >
+            <keep-alive :include="routeStore.cacheRoutes">
+              <component
+                :is="Component"
+                v-if="appStore.loadFlag"
+                :key="route.fullPath"
+              />
+            </keep-alive>
+          </transition>
+        </router-view>
+        <div v-if="appStore.showFooter" class="h-40px" />
+      </div>
+      <n-layout-footer
+        v-if="appStore.showFooter"
+        bordered
+        position="absolute"
+        class="h-40px flex-center"
       >
-        <TabBar class="h-45px" />
+        {{ appStore.footerText }}
-      </n-layout-header>
+      </n-layout-footer>
-      <n-layout-content
-        class="bg-transparent"
-        style="min-height: calc(100% - 105px); height: calc(100% - 105px)"
-        content-style="padding: 16px;min-height:100%;"
-      >
-        <div
-          class="h-full"
-          :class="{
-            'p-t-122px': appStore.fixedHeader && appStore.showTabs,
-            'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
-          }"
-        >
-          <router-view v-slot="{ Component, route }">
-            <transition
-              :name="appStore.transitionAnimation"
-              mode="out-in"
-            >
-              <keep-alive :include="routeStore.cacheRoutes">
-                <component
-                  :is="Component"
-                  v-if="appStore.loadFlag"
-                  :key="route.fullPath"
-                />
-              </keep-alive>
-            </transition>
-          </router-view>
-        </div>
-      </n-layout-content>
       <BackTop />
-      <Watermark :show-watermark="appStore.showWatermark" />
     </n-layout>
   </n-layout>
 </template>

src/layouts/components/common/HeaderButton.vue

@@ -18,7 +18,7 @@
 <style scoped>
   .el {
     color: var(--n-text-color);
-    background-color: var(--n-color);
+    background-color: var(--card-color);
     transition: 0.3s var(--cubic-bezier-ease-in-out);
   }
   .el:hover {

src/layouts/components/header/Search.vue

@@ -24,10 +24,12 @@ const options = computed(() => {
 })
 
 function renderLabel(option: any) {
-  return h(NFlex, {}, { default: () => [
+  return h(NFlex, {}, {
-    h(NTag, { size: 'small', type: 'primary', bordered: false }, { icon: renderIcon(option.icon), default: () => option.label }),
+    default: () => [
-    h(NText, { depth: 3 }, { default: () => option.value }),
+      h(NTag, { size: 'small', type: 'primary', bordered: false }, { icon: renderIcon(option.icon), default: () => option.label }),
-  ] })
+      h(NText, { depth: 3 }, { default: () => option.value }),
+    ],
+  })
 }
 
 const router = useRouter()
@@ -41,18 +43,16 @@ function handleSelect(value: string) {
 
 <template>
   <n-auto-complete
-    v-model:value="searchValue"
+    v-model:value="searchValue" class="w-20em m-r-1em" :input-props="{
-    class="w-20em m-r-1em"
-    :input-props="{
       autocomplete: 'disabled',
-    }"
+    }" :options="options" :render-label="renderLabel" placeholder="搜索页面/路径" clearable @select="handleSelect"
-
+  >
-    :options="options"
+    <template #prefix>
-    :render-label="renderLabel"
+      <n-icon>
-    placeholder="搜索页面"
+        <i-icon-park-outline-search />
-    clearable
+      </n-icon>
-    @select="handleSelect"
+    </template>
-  />
+  </n-auto-complete>
 </template>
 
 <style scoped></style>

src/layouts/components/header/Setting.vue

@@ -88,11 +88,11 @@ function resetSetting() {
                 </n-space>
                 <n-space justify="space-between">
                   色弱模式
-                  <n-switch :value="appStore.colorWeak" @update:value="appStore.toggleColorWeak()" />
+                  <n-switch :value="appStore.colorWeak" @update:value="appStore.toggleColorWeak" />
                 </n-space>
                 <n-space justify="space-between">
                   灰色模式
-                  <n-switch :value="appStore.grayMode" @update:value="appStore.toggleGrayMode()" />
+                  <n-switch :value="appStore.grayMode" @update:value="appStore.toggleGrayMode" />
                 </n-space>
                 <n-space align="center" justify="space-between">
                   主题色
@@ -106,14 +106,6 @@ function resetSetting() {
                   切换动效
                   <n-select v-model:value="appStore.transitionAnimation" class="w-7em" :options="transitionSelectorOptions" @update:value="appStore.reloadPage" />
                 </n-space>
-                <n-space justify="space-between">
-                  侧边栏反转色
-                  <n-switch v-model:value="appStore.invertedSider" />
-                </n-space>
-                <n-space justify="space-between">
-                  头部反转色
-                  <n-switch v-model:value="appStore.invertedHeader" />
-                </n-space>
 
                 <n-divider>界面显示</n-divider>
                 <n-space justify="space-between">
@@ -125,9 +117,13 @@ function resetSetting() {
                   <n-switch v-model:value="appStore.showProgress" />
                 </n-space>
                 <n-space justify="space-between">
-                  多页签
+                  多页签显示
                   <n-switch v-model:value="appStore.showTabs" />
                 </n-space>
+                <n-space justify="space-between">
+                  底部标签显示
+                  <n-switch v-model:value="appStore.showFooter" />
+                </n-space>
                 <n-space justify="space-between">
                   面包屑
                   <n-switch v-model:value="appStore.showBreadcrumb" />
@@ -136,10 +132,6 @@ function resetSetting() {
                   面包屑图标
                   <n-switch v-model:value="appStore.showBreadcrumbIcon" />
                 </n-space>
-                <n-space justify="space-between">
-                  固定头部和多页签
-                  <n-switch v-model:value="appStore.fixedHeader" />
-                </n-space>
                 <n-space justify="space-between">
                   水印
                   <n-switch v-model:value="appStore.showWatermark" />

src/layouts/components/index.ts

@@ -19,7 +19,6 @@ import TabBar from './tab/TabBar.vue'
 /* 其他组件 */
 // 返回顶部
 import BackTop from './common/BackTop.vue'
-import Watermark from './common/Watermark.vue'
 
 export {
   Breadcrumb,
@@ -35,5 +34,4 @@ export {
   Reload,
   TabBar,
   BackTop,
-  Watermark,
 }

src/layouts/components/sider/Menu.vue

@@ -9,9 +9,8 @@ const routesStore = useRouteStore()
 <template>
   <n-menu
     :collapsed="appStore.collapsed"
-    :collapsed-width="64"
     :indent="20"
-    accordion
+    :collapsed-width="64"
     :options="routesStore.menus"
     :value="routesStore.activeMenu"
   />

src/store/app/index.ts

@@ -6,6 +6,7 @@ import themeConfig from './theme.json'
 
 type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
 interface AppStatus {
+  footerText: string
   theme: GlobalThemeOverrides
   primaryColor: string
   collapsed: boolean
@@ -16,12 +17,10 @@ interface AppStatus {
   loadFlag: boolean
   showLogo: boolean
   showTabs: boolean
+  showFooter: boolean
   showProgress: boolean
   showBreadcrumb: boolean
   showBreadcrumbIcon: boolean
-  fixedHeader: boolean
-  invertedSider: boolean
-  invertedHeader: boolean
   showWatermark: boolean
   transitionAnimation: TransitionAnimation
 }
@@ -40,6 +39,7 @@ const isDark = useDark({
 export const useAppStore = defineStore('app-store', {
   state: (): AppStatus => {
     return {
+      footerText: 'Copyright © 2024 chansee97',
       theme: themeConfig,
       primaryColor: initPrimaryColor,
       collapsed: false,
@@ -50,12 +50,10 @@ export const useAppStore = defineStore('app-store', {
       loadFlag: true,
       showLogo: true,
       showTabs: true,
+      showFooter: true,
       showProgress: true,
       showBreadcrumb: true,
       showBreadcrumbIcon: true,
-      fixedHeader: false,
-      invertedSider: false,
-      invertedHeader: false,
       showWatermark: false,
       transitionAnimation: 'fade-slide',
     }
@@ -73,11 +71,10 @@ export const useAppStore = defineStore('app-store', {
       this.loadFlag = true
       this.showLogo = true
       this.showTabs = true
+      this.showLogo = true
+      this.showFooter = true
       this.showBreadcrumb = true
       this.showBreadcrumbIcon = true
-      this.fixedHeader = false
-      this.invertedSider = false
-      this.invertedHeader = false
       this.showWatermark = false
       this.transitionAnimation = 'fade-slide'
 
@@ -172,13 +169,13 @@ export const useAppStore = defineStore('app-store', {
     },
     /* 切换色弱模式 */
     toggleColorWeak() {
-      docEle.classList.toggle('color-weak')
+      docEle.value.classList.toggle('color-weak')
-      this.colorWeak = docEle.classList.contains('color-weak')
+      this.colorWeak = docEle.value.classList.contains('color-weak')
     },
     /* 切换灰色模式 */
     toggleGrayMode() {
-      docEle.classList.toggle('gray-mode')
+      docEle.value.classList.toggle('gray-mode')
-      this.grayMode = docEle.classList.contains('gray-mode')
+      this.grayMode = docEle.value.classList.contains('gray-mode')
     },
   },
   persist: {

src/views/docments/vite/index.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="h-full">
+  <iframe src="https://cn.vitejs.dev/guide/" frameborder="0" class="wh-full" />
-    <iframe src="https://cn.vitejs.dev/guide/" frameborder="0" class="wh-full" />
-  </div>
 </template>
 
 <style scoped></style>

src/views/docments/vue/index.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="h-full">
+  <iframe src="https://staging-cn.vuejs.org/" frameborder="0" class="wh-full" />
-    <iframe src="https://staging-cn.vuejs.org/" frameborder="0" class="wh-full" />
-  </div>
 </template>
 
 <style scoped></style>

src/views/plugin/charts/antV/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>antV</div>
-</template>
-
-<style scoped></style>

src/views/setting/system/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>系统设置</div>
-</template>
-
-<style scoped></style>

src/views/test/test2/index.vue

@@ -3,12 +3,12 @@ const router = useRouter()
 </script>
 
 <template>
-  <div text-center>
+  <n-card class="h-130vh">
     这个页面包含了一个不在侧边菜单的详情页面
     <n-button @click="router.push('/test/test2/detail')">
       跳转详情子页
     </n-button>
-  </div>
+  </n-card>
 </template>
 
 <style scoped></style>