fix(layout): layout error

2025-04-05 19:41:59 +08:00 · 2024-03-27 19:59:49 +08:00 · 2024-03-27 19:59:49 +08:00 · 01b2dc4922
commit 01b2dc4922
parent ad2526f89a
16 changed files with 81 additions and 127 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -9,13 +9,12 @@ const appStore = useAppStore()

 <template>
  <n-config-provider
-    class="wh-full"
-    inline-theme-disabled
-    :theme="appStore.darkMode ? darkTheme : null"
-    :locale="locale"
-    :date-locale="dateLocale"
-    :theme-overrides="appStore.theme"
+    class="wh-full" inline-theme-disabled :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>
--- a/src/layouts/components/common/Watermark.vue
+++ b/src/layouts/components/common/Watermark.vue
--- a/src/components/common/appLoading.vue
+++ b/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>

--- a/src/layouts/BasicLayout/index.vue
+++ b/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
-        :position="appStore.fixedHeader ? 'absolute' : 'static'"
-        :inverted="appStore.invertedHeader"
-        class="z-1"
-      >
+      <n-layout-header bordered position="absolute" 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
-        v-if="appStore.showTabs"
-        :position="appStore.fixedHeader ? 'absolute' : 'static'"
-        class="z-1"
-        :class="{ 'm-t-61px': appStore.fixedHeader }"
+      <div class="flex-1 p-16px flex flex-col">
+        <div class="h-60px" />
+        <div v-if="appStore.showTabs" class="h-45px" />
+        <router-view v-slot="{ Component, route }" class="flex-1">
+          <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" />
-      </n-layout-header>
-      <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>
+        {{ appStore.footerText }}
+      </n-layout-footer>
      <BackTop />
-      <Watermark :show-watermark="appStore.showWatermark" />
    </n-layout>
  </n-layout>
 </template>
--- a/src/layouts/components/common/HeaderButton.vue
+++ b/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 {
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@ -24,10 +24,12 @@ const options = computed(() => {
 })

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

 <style scoped></style>
--- a/src/layouts/components/header/Setting.vue
+++ b/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" />
--- a/src/layouts/components/index.ts
+++ b/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,
 }
--- a/src/layouts/components/sider/Menu.vue
+++ b/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"
  />
--- a/src/store/app/index.ts
+++ b/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')
-      this.colorWeak = docEle.classList.contains('color-weak')
+      docEle.value.classList.toggle('color-weak')
+      this.colorWeak = docEle.value.classList.contains('color-weak')
    },
    /* 切换灰色模式 */
    toggleGrayMode() {
-      docEle.classList.toggle('gray-mode')
-      this.grayMode = docEle.classList.contains('gray-mode')
+      docEle.value.classList.toggle('gray-mode')
+      this.grayMode = docEle.value.classList.contains('gray-mode')
    },
  },
  persist: {
--- a/src/views/docments/vite/index.vue
+++ b/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" />
-  </div>
+  <iframe src="https://cn.vitejs.dev/guide/" frameborder="0" class="wh-full" />
 </template>

 <style scoped></style>
--- a/src/views/docments/vue/index.vue
+++ b/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" />
-  </div>
+  <iframe src="https://staging-cn.vuejs.org/" frameborder="0" class="wh-full" />
 </template>

 <style scoped></style>
--- a/src/views/plugin/charts/antV/index.vue
+++ b/src/views/plugin/charts/antV/index.vue
@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>antV</div>
-</template>
-
-<style scoped></style>
--- a/src/views/plugin/charts/echarts/index.vue
+++ b/src/views/plugin/charts/echarts/index.vue
--- a/src/views/setting/system/index.vue
+++ b/src/views/setting/system/index.vue
@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>系统设置</div>
-</template>
-
-<style scoped></style>
--- a/src/views/test/test2/index.vue
+++ b/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>