refactor(components): blankLayout引入GlobalContent

src/components/common/LoginBg/index.vue

@@ -24,6 +24,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const COLOR_WHITE = '#ffffff';
-const stopColor = computed(() => mixColor(COLOR_WHITE, props.themeColor, 0.7));
+const stopColor = computed(() => {
+  return mixColor(COLOR_WHITE, props.themeColor, 0.7);
+});
 </script>
 <style scoped></style>

src/components/custom/ThemeSwitch/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="flex-center w-40px h-40px text-14px hover:text-primary cursor-pointer" @click="toggleDarkMode">
+  <hover-container class="w-40px h-full text-14px text-[#999] hover:text-primary" @click="toggleDarkMode">
     <icon-mdi-moon-waning-crescent v-if="dark" />
     <icon-mdi-white-balance-sunny v-else />
-  </div>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { watch } from 'vue';
+import { HoverContainer } from '../../common';
 import { useBoolean } from '@/hooks';
 
 interface Props {

src/layouts/BasicLayout/components/HorizontalLayout/index.vue

@@ -16,7 +16,7 @@
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '../common';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const { headerInverted, headerPosition, scrollbarContentStyle, scrollbar } = useLayoutConfig();

src/layouts/BasicLayout/components/HorizontalMixLayout/index.vue

@@ -39,7 +39,7 @@
 import { NLayout, NLayoutContent, NLayoutSider, NLayoutHeader, NScrollbar } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalMenu, SpacePlaceholder } from '../common';
+import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, GlobalMenu, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const app = useAppStore();

src/layouts/BasicLayout/components/VerticalLayout/index.vue

@@ -45,7 +45,7 @@ import {
   SpacePlaceholder,
   GlobalLogo,
   GlobalMenu
-} from '../common';
+} from '@/layouts/common';
 
 const theme = useThemeStore();
 const app = useAppStore();

src/layouts/BasicLayout/components/VerticalMixLayout/index.vue

@@ -21,7 +21,7 @@
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
-import { MixSider, GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '../common';
+import { MixSider, GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';
 
 const theme = useThemeStore();
 const { headerInverted, headerPosition, globalSiderClassAndStyle, scrollbarContentStyle, scrollbar } =

src/layouts/BasicLayout/components/index.ts

@@ -4,4 +4,3 @@ import HorizontalLayout from './HorizontalLayout/index.vue';
 import HorizontalMixLayout from './HorizontalMixLayout/index.vue';
 
 export { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout };
-export * from './common';

src/layouts/BasicLayout/index.vue

@@ -7,7 +7,8 @@
 import type { Component } from 'vue';
 import { useThemeStore } from '@/store';
 import type { NavMode } from '@/interface';
-import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout, SettingDrawer } from './components';
+import { VerticalLayout, VerticalMixLayout, HorizontalLayout, HorizontalMixLayout } from './components';
+import { SettingDrawer } from '../common';
 
 type LayoutComponent = {
   [key in NavMode]: Component;

src/layouts/BlankLayout/index.vue

@@ -1,31 +1,14 @@
 <template>
-  <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
+  <n-scrollbar ref="scrollbar" class="h-full" :content-style="scrollbarContentStyle">
-    <div class="inline-block wh-full bg-[#f6f9f8] dark:bg-dark">
+    <global-content :show-padding="false" />
-      <router-view v-slot="{ Component, route: itemRoute }">
-        <transition :name="theme.pageAnimateType" mode="out-in" appear>
-          <keep-alive :include="cacheRoutes">
-            <component
-              :is="Component"
-              v-if="app.reloadFlag"
-              :key="itemRoute.fullPath"
-              :class="{ 'min-h-100vh': !routeProps.fullPage }"
-            />
-          </keep-alive>
-        </transition>
-      </router-view>
-    </div>
   </n-scrollbar>
 </template>
 
 <script lang="ts" setup>
 import { NScrollbar } from 'naive-ui';
-import { useThemeStore, useAppStore } from '@/store';
+import { useLayoutConfig } from '@/composables';
-import { cacheRoutes } from '@/router';
+import { GlobalContent } from '../common';
-import { useRouteProps } from '@/composables';
 
-const theme = useThemeStore();
+const { scrollbarContentStyle } = useLayoutConfig();
-const app = useAppStore();
-
-const routeProps = useRouteProps();
 </script>
 <style scoped></style>

src/layouts/common/GlobalContent/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="flex-1 flex-col-stretch bg-[#f6f9f8] dark:bg-deep-dark p-16px transition-all duration-300 ease-in-out"
+    class="flex-1 flex-col-stretch bg-[#f6f9f8] dark:bg-deep-dark transition-all duration-300 ease-in-out"
-    :class="{ 'overflow-hidden': routeProps.fullPage }"
+    :class="{ 'overflow-hidden': routeProps.fullPage, 'p-16px': showPadding }"
   >
     <router-view v-slot="{ Component, route }">
       <transition :name="theme.pageAnimateType" mode="out-in" appear>
@@ -18,6 +18,15 @@ import { cacheRoutes } from '@/router';
 import { useAppStore, useThemeStore } from '@/store';
 import { useRouteProps } from '@/composables';
 
+interface Props {
+  /** 显示padding */
+  showPadding?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showPadding: true
+});
+
 const theme = useThemeStore();
 const app = useAppStore();
 const routeProps = useRouteProps();

src/settings/index.ts

@@ -1 +1,2 @@
 export * from './theme';
+export * from './website';

src/settings/website.json

@@ -23,5 +23,9 @@
 				"children": []
 			}
 		]
+	},
+	{
+		"title": "个人",
+		"children": []
 	}
 ]

src/settings/website.ts

@@ -2,6 +2,4 @@ import type { WebsiteCategory } from '@/interface';
 
 import websiteJson from './website.json';
 
-const website: WebsiteCategory[] = websiteJson;
+export const website: WebsiteCategory[] = websiteJson;
-
-export default website;

src/views/system/login/index.vue

@@ -58,7 +58,11 @@ const modules: LoginModule[] = [
   { key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat }
 ];
 
-const bgColor = computed(() => mixColor('#ffffff', theme.themeColor, 0.3));
+const bgColor = computed(() => {
+  const COLOR_WHITE = '#ffffff';
+  const ratio = theme.darkMode ? 0.6 : 0.3;
+  return mixColor(COLOR_WHITE, theme.themeColor, ratio);
+});
 </script>
 <style scoped>
 .login-bg {

src/views/website/components/WebsiteHeader.vue

@@ -0,0 +1,19 @@
+<template>
+  <header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
+    <div class="flex-y-center h-full">
+      <system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
+      <n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
+    </div>
+    <theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
+  </header>
+</template>
+
+<script setup lang="ts">
+import { NGradientText } from 'naive-ui';
+import { SystemLogo, ThemeSwitch } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
+</script>
+<style scoped></style>

src/views/website/components/index.ts

@@ -0,0 +1,3 @@
+import WebsiteHeader from './WebsiteHeader.vue';
+
+export { WebsiteHeader };

src/views/website/index.vue

@@ -1,22 +1,12 @@
 <template>
   <div>
-    <header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
+    <website-header />
-      <div class="flex-y-center">
-        <system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
-        <n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
-      </div>
-      <theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
-    </header>
     <n-space :vertical="true"></n-space>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NSpace, NGradientText } from 'naive-ui';
+import { NSpace } from 'naive-ui';
-import { SystemLogo, ThemeSwitch } from '@/components';
+import { WebsiteHeader } from './components';
-import { useThemeStore } from '@/store';
-
-const theme = useThemeStore();
-const { handleDarkMode } = useThemeStore();
 </script>
 <style scoped></style>