From 99d6fdd60f4e406d4fbb7bed2effda283435272b Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Wed, 1 Feb 2023 18:02:36 +0800
Subject: [PATCH 01/22] wip: layout store

---
 packages/layouts/index.ts                     |   1 +
 packages/layouts/src/components/main.vue      |   7 ++
 packages/layouts/src/store/index.ts           |   1 +
 .../src/store/modules/headerSetting.ts        |  62 ++++++++++
 .../layouts/src/store/modules/menuSetting.ts  | 113 ++++++++++++++++++
 .../src/store/modules/multiTabsSetting.ts     |  41 +++++++
 packages/layouts/src/store/modules/test.ts    |   2 +-
 .../src/store/modules/transitionSetting.ts    |  38 ++++++
 8 files changed, 264 insertions(+), 1 deletion(-)
 create mode 100644 packages/layouts/src/store/index.ts
 create mode 100644 packages/layouts/src/store/modules/headerSetting.ts
 create mode 100644 packages/layouts/src/store/modules/menuSetting.ts
 create mode 100644 packages/layouts/src/store/modules/multiTabsSetting.ts
 create mode 100644 packages/layouts/src/store/modules/transitionSetting.ts

diff --git a/packages/layouts/index.ts b/packages/layouts/index.ts
index 49c05a5d..d206c837 100644
--- a/packages/layouts/index.ts
+++ b/packages/layouts/index.ts
@@ -1,3 +1,4 @@
 export { default as Layout } from './src/index.vue'
 export { initLayout } from './bridge'
 export { default as DarkModeToggle } from './src/components/setting/components/DarkModeToggle.vue'
+export * from './src/store/index'
diff --git a/packages/layouts/src/components/main.vue b/packages/layouts/src/components/main.vue
index 17fca523..4b06e58d 100644
--- a/packages/layouts/src/components/main.vue
+++ b/packages/layouts/src/components/main.vue
@@ -1,10 +1,17 @@
 <script lang="ts" setup>
 import LayoutFeature from './feature/index.vue'
 import { createNamespace } from '@vben/utils'
+import { storeToRefs } from "@vben/pinia";
+import {useMenuSettingStore} from "../store/modules/menuSetting";
 const { bem } = createNamespace('main')
+const menuSettingStore =  useMenuSettingStore()
+const { bgColor } = storeToRefs(menuSettingStore);
 </script>
 <template>
   <LayoutFeature />
+  <VbenButton @click="menuSettingStore.setBgColor('fgasd')">
+    change {{ bgColor }}
+  </VbenButton>
   <main :class="bem()">
     <slot></slot>
   </main>
diff --git a/packages/layouts/src/store/index.ts b/packages/layouts/src/store/index.ts
new file mode 100644
index 00000000..c6b39924
--- /dev/null
+++ b/packages/layouts/src/store/index.ts
@@ -0,0 +1 @@
+export { useLayoutTest } from './modules/test'
diff --git a/packages/layouts/src/store/modules/headerSetting.ts b/packages/layouts/src/store/modules/headerSetting.ts
new file mode 100644
index 00000000..f1019aeb
--- /dev/null
+++ b/packages/layouts/src/store/modules/headerSetting.ts
@@ -0,0 +1,62 @@
+import { defineStore } from '@vben/pinia'
+import { HeaderSetting } from '@vben/types'
+import { ThemeEnum, HEADER_PRESET_BG_COLOR_LIST } from '@vben/constants'
+
+export const useHeaderSettingStore = defineStore({
+  id: 'LAYOUT_HEADER_SETTING',
+  // persist: true,
+  state: (): HeaderSetting => ({
+    // header bg color
+    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+    // Fixed at the top
+    fixed: true,
+    // Whether to show top
+    show: true,
+    // theme
+    theme: ThemeEnum.LIGHT,
+    // Whether to enable the lock screen function
+    useLockPage: true,
+    // Whether to show the full screen button
+    showFullScreen: true,
+    // Whether to show the document button
+    showDoc: true,
+    // Whether to show the notification button
+    showNotice: true,
+    // Whether to display the menu search
+    showSearch: true,
+    showLocalePicker: true,
+  }),
+  getters: {},
+  actions: {
+    setBgColor(value: string) {
+      this.bgColor = value
+    },
+    setFixed(value: boolean) {
+      this.fixed = value
+    },
+    setShow(value: boolean) {
+      this.show = value
+    },
+    setTheme(value: ThemeEnum) {
+      this.theme = value
+    },
+    setUseLockPage(value: boolean) {
+      this.useLockPage = value
+    },
+    setShowFullScreen(value: boolean) {
+      this.showFullScreen = value
+    },
+    setShowDoc(value: boolean) {
+      this.showDoc = value
+    },
+    setShowNotice(value: boolean) {
+      this.showNotice = value
+    },
+    setShowSearch(value: boolean) {
+      this.showSearch = value
+    },
+    setShowLocalePicker(value: boolean) {
+      this.showLocalePicker = value
+    },
+  },
+})
diff --git a/packages/layouts/src/store/modules/menuSetting.ts b/packages/layouts/src/store/modules/menuSetting.ts
new file mode 100644
index 00000000..78b42f9b
--- /dev/null
+++ b/packages/layouts/src/store/modules/menuSetting.ts
@@ -0,0 +1,113 @@
+import { defineStore } from '@vben/pinia'
+import { MenuSetting } from '@vben/types'
+import {
+  ThemeEnum,
+  SIDE_BAR_BG_COLOR_LIST,
+  MenuModeEnum,
+  MenuTypeEnum,
+  TriggerEnum,
+  MixSidebarTriggerEnum,
+} from '@vben/constants'
+
+export const useMenuSettingStore = defineStore({
+  id: 'LAYOUT_MENU_SETTING',
+  // persist: true,
+  state: (): MenuSetting => ({
+    // sidebar menu bg color
+    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+    //  Whether to fix the left menu
+    fixed: true,
+    // Menu collapse
+    collapsed: false,
+    // Whether to display the menu name when folding the menu
+    collapsedShowTitle: false,
+    // Whether it can be dragged
+    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
+    canDrag: false,
+    // Whether to show no dom
+    show: true,
+    // Whether to show dom
+    hidden: false,
+    // Menu width
+    menuWidth: 210,
+    // Menu mode
+    mode: MenuModeEnum.INLINE,
+    // Menu type
+    type: MenuTypeEnum.SIDEBAR,
+    // Menu theme
+    theme: ThemeEnum.DARK,
+    // Split menu
+    split: false,
+    // Top menu layout
+    topMenuAlign: 'center',
+    // Fold trigger position
+    trigger: TriggerEnum.HEADER,
+    // Turn on accordion mode, only show a menu
+    accordion: true,
+    // Switch page to close menu
+    closeMixSidebarOnChange: false,
+    // Module opening method ‘click’ |'hover'
+    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+    // Fixed expanded menu
+    mixSideFixed: false,
+  }),
+  getters: {
+    // getIsSidebarType(){},
+  },
+  actions: {
+    setBgColor(value: string) {
+      this.bgColor = value
+    },
+    setFixed(value: boolean) {
+      this.fixed = value
+    },
+    setCollapsed(value: boolean) {
+      this.collapsed = value
+    },
+    setCollapsedShowTitle(value: boolean) {
+      this.collapsedShowTitle = value
+    },
+    setCanDrag(value: boolean) {
+      this.canDrag = value
+    },
+    setShow(value: boolean) {
+      this.show = value
+    },
+    setHidden(value: boolean) {
+      this.hidden = value
+    },
+    setMenuWidth(value: number) {
+      this.menuWidth = value
+    },
+    setMode(value: MenuModeEnum) {
+      this.mode = value
+    },
+    setType(value: MenuTypeEnum) {
+      this.type = value
+    },
+    setTheme(value: ThemeEnum) {
+      this.theme = value
+    },
+    setSplit(value: boolean) {
+      this.split = value
+    },
+    setTopMenuAlign(value: 'start' | 'center' | 'end') {
+      this.topMenuAlign = value
+    },
+    setTrigger(value: TriggerEnum) {
+      this.trigger = value
+    },
+    setAccordion(value: boolean) {
+      this.accordion = value
+    },
+    setCloseMixSidebarOnChange(value: boolean) {
+      this.closeMixSidebarOnChange = value
+    },
+    setMixSideTrigger(value: MixSidebarTriggerEnum) {
+      this.mixSideTrigger = value
+    },
+    setMixSideFixed(value: boolean) {
+      this.mixSideFixed = value
+    },
+  },
+})
diff --git a/packages/layouts/src/store/modules/multiTabsSetting.ts b/packages/layouts/src/store/modules/multiTabsSetting.ts
new file mode 100644
index 00000000..36a77173
--- /dev/null
+++ b/packages/layouts/src/store/modules/multiTabsSetting.ts
@@ -0,0 +1,41 @@
+import { defineStore } from '@vben/pinia'
+import { MultiTabsSetting } from '@vben/types'
+
+export const useMultiTabsSettingStore = defineStore({
+  id: 'LAYOUT_MULTI_TABS_SETTING',
+  // persist: true,
+  state: (): MultiTabsSetting => ({
+    cache: false,
+    // Turn on
+    show: true,
+    // Is it possible to drag and drop sorting tabs
+    canDrag: true,
+    // Turn on quick actions
+    showQuick: true,
+    // Whether to show the refresh button
+    showRedo: true,
+    // Whether to show the collapse button
+    showFold: true,
+  }),
+  getters: {},
+  actions: {
+    setCache(value: boolean) {
+      this.cache = value
+    },
+    setShow(value: boolean) {
+      this.show = value
+    },
+    setCanDrag(value: boolean) {
+      this.canDrag = value
+    },
+    setShowQuick(value: boolean) {
+      this.showQuick = value
+    },
+    setShowRedo(value: boolean) {
+      this.showRedo = value
+    },
+    setShowFold(value: boolean) {
+      this.showFold = value
+    },
+  },
+})
diff --git a/packages/layouts/src/store/modules/test.ts b/packages/layouts/src/store/modules/test.ts
index cec98ad0..8595ae92 100644
--- a/packages/layouts/src/store/modules/test.ts
+++ b/packages/layouts/src/store/modules/test.ts
@@ -10,5 +10,5 @@ export const useLayoutTest = defineStore({
       this.test = value
     },
   },
-  persist: true,
+  // persist: true,
 })
diff --git a/packages/layouts/src/store/modules/transitionSetting.ts b/packages/layouts/src/store/modules/transitionSetting.ts
new file mode 100644
index 00000000..3a40c8c8
--- /dev/null
+++ b/packages/layouts/src/store/modules/transitionSetting.ts
@@ -0,0 +1,38 @@
+import { defineStore } from '@vben/pinia'
+import { TransitionSetting } from '@vben/types'
+import { RouterTransitionEnum } from '@vben/constants'
+
+export const useTransitionSettingStore = defineStore({
+  id: 'LAYOUT_TRANSITION_SETTING',
+  // persist: true,
+  state: (): TransitionSetting => ({
+    //  Whether to open the page switching animation
+    // The disabled state will also disable pageLoading
+    enable: true,
+
+    // Route basic switching animation
+    basicTransition: RouterTransitionEnum.FADE_SIDE,
+
+    // Whether to open page switching loading
+    // Only open when enable=true
+    openPageLoading: true,
+
+    // Whether to open the top progress bar
+    openNProgress: false,
+  }),
+  getters: {},
+  actions: {
+    setEnable(value: boolean) {
+      this.enable = value
+    },
+    setBasicTransition(value: RouterTransitionEnum) {
+      this.basicTransition = value
+    },
+    setOpenPageLoading(value: boolean) {
+      this.openPageLoading = value
+    },
+    setOpenNProgress(value: boolean) {
+      this.openNProgress = value
+    },
+  },
+})

From ea9fac0735b080d4d36949b013038b1da5cea494 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Wed, 1 Feb 2023 22:23:22 +0800
Subject: [PATCH 02/22] wip: layout store

---
 packages/layouts/src/store/index.ts           |   6 +-
 .../layouts/src/store/modules/menuSetting.ts  |  10 +-
 .../src/store/modules/sporadicSetting.ts      | 130 ++++++++++++++++++
 packages/layouts/src/store/modules/test.ts    |  14 --
 packages/types/src/setting.ts                 |  53 +++----
 5 files changed, 172 insertions(+), 41 deletions(-)
 create mode 100644 packages/layouts/src/store/modules/sporadicSetting.ts
 delete mode 100644 packages/layouts/src/store/modules/test.ts

diff --git a/packages/layouts/src/store/index.ts b/packages/layouts/src/store/index.ts
index c6b39924..cc729d66 100644
--- a/packages/layouts/src/store/index.ts
+++ b/packages/layouts/src/store/index.ts
@@ -1 +1,5 @@
-export { useLayoutTest } from './modules/test'
+export { useSporadicSetting } from './modules/sporadicSetting'
+export { useHeaderSettingStore } from './modules/headerSetting'
+export { useMenuSettingStore } from './modules/menuSetting'
+export { useTransitionSettingStore } from './modules/transitionSetting'
+export { useMultiTabsSettingStore } from './modules/multiTabsSetting'
diff --git a/packages/layouts/src/store/modules/menuSetting.ts b/packages/layouts/src/store/modules/menuSetting.ts
index 78b42f9b..4698a09c 100644
--- a/packages/layouts/src/store/modules/menuSetting.ts
+++ b/packages/layouts/src/store/modules/menuSetting.ts
@@ -52,7 +52,15 @@ export const useMenuSettingStore = defineStore({
     mixSideFixed: false,
   }),
   getters: {
-    // getIsSidebarType(){},
+    isSidebarType: (state) => {
+      return state.type === MenuTypeEnum.SIDEBAR
+    },
+    isTopMenu: (state) => {
+      return state.type === MenuTypeEnum.SIDEBAR
+    },
+    menuShowLogo: (state) => {
+      return state.type === MenuTypeEnum.SIDEBAR
+    },
   },
   actions: {
     setBgColor(value: string) {
diff --git a/packages/layouts/src/store/modules/sporadicSetting.ts b/packages/layouts/src/store/modules/sporadicSetting.ts
new file mode 100644
index 00000000..9003def9
--- /dev/null
+++ b/packages/layouts/src/store/modules/sporadicSetting.ts
@@ -0,0 +1,130 @@
+import { defineStore } from '@vben/pinia'
+import { SporadicSetting } from '@vben/types'
+import {
+  SettingButtonPositionEnum,
+  PermissionModeEnum,
+  CacheTypeEnum,
+  SessionTimeoutProcessingEnum,
+  ContentLayoutEnum,
+} from '@vben/constants'
+
+export const useSporadicSetting = defineStore({
+  id: 'LAYOUT_SPORADIC_SETTING',
+  // persist: true,
+  state: (): SporadicSetting => ({
+    // Whether to show the configuration button
+    showSettingButton: true,
+    // Whether to show the theme switch button
+    showDarkModeToggle: true,
+    // `Settings` button position
+    settingButtonPosition: SettingButtonPositionEnum.AUTO,
+    // Permission mode
+    permissionMode: PermissionModeEnum.ROUTE_MAPPING,
+    // Permission-related cache is stored in sessionStorage or localStorage
+    permissionCacheType: CacheTypeEnum.LOCAL,
+    // Session timeout processing
+    sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+    // color
+    themeColor: '#0960bd',
+    // Website gray mode, open for possible mourning dates
+    grayMode: false,
+    // Color Weakness Mode
+    colorWeak: false,
+    // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
+    fullContent: false,
+    // content mode
+    contentMode: ContentLayoutEnum.FULL,
+    // Whether to display the logo
+    showLogo: true,
+    // Whether to show footer
+    showFooter: false,
+    // Whether to open the top progress bar
+    openNProgress: false,
+    // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
+    openKeepAlive: true,
+    // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
+    lockTime: 0,
+    // Whether to show breadcrumbs
+    showBreadCrumb: true,
+    // Whether to show the breadcrumb icon
+    showBreadCrumbIcon: true,
+    // Whether to open back to top
+    useOpenBackTop: true,
+    //  Is it possible to embed iframe pages
+    canEmbedIFramePage: true,
+    // Whether to delete unclosed messages and notify when switching the interface
+    closeMessageOnSwitch: true,
+    // Whether to cancel the http request that has been sent but not responded when switching the interface.
+    // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
+    removeAllHttpPending: false,
+  }),
+  getters: {},
+  actions: {
+    setShowSettingButton(value: boolean) {
+      this.showSettingButton = value
+    },
+    setShowDarkModeToggle(value: boolean) {
+      this.showDarkModeToggle = value
+    },
+    setSettingButtonPosition(value: SettingButtonPositionEnum) {
+      this.settingButtonPosition = value
+    },
+    setPermissionMode(value: PermissionModeEnum) {
+      this.permissionMode = value
+    },
+    setPermissionCacheType(value: CacheTypeEnum) {
+      this.permissionCacheType = value
+    },
+    setSessionTimeoutProcessing(value: SessionTimeoutProcessingEnum) {
+      this.sessionTimeoutProcessing = value
+    },
+    setThemeColor(value: string) {
+      this.themeColor = value
+    },
+    setGrayMode(value: boolean) {
+      this.grayMode = value
+    },
+    setColorWeak(value: boolean) {
+      this.colorWeak = value
+    },
+    setFullContent(value: boolean) {
+      this.fullContent = value
+    },
+    setContentMode(value: ContentLayoutEnum) {
+      this.contentMode = value
+    },
+    setShowLogo(value: boolean) {
+      this.showLogo = value
+    },
+    setShowFooter(value: boolean) {
+      this.showFooter = value
+    },
+    setOpenNProgress(value: boolean) {
+      this.openNProgress = value
+    },
+    setOpenKeepAlive(value: boolean) {
+      this.openKeepAlive = value
+    },
+    setLockTime(value: number) {
+      this.lockTime = value
+    },
+    setShowBreadCrumb(value: boolean) {
+      this.showBreadCrumb = value
+    },
+    setShowBreadCrumbIcon(value: boolean) {
+      this.showBreadCrumbIcon = value
+    },
+    setUseOpenBackTop(value: boolean) {
+      this.useOpenBackTop = value
+    },
+    setCanEmbedIFramePage(value: boolean) {
+      this.canEmbedIFramePage = value
+    },
+    setCloseMessageOnSwitch(value: boolean) {
+      this.closeMessageOnSwitch = value
+    },
+    setRemoveAllHttpPending(value: boolean) {
+      this.removeAllHttpPending = value
+    },
+  },
+})
diff --git a/packages/layouts/src/store/modules/test.ts b/packages/layouts/src/store/modules/test.ts
deleted file mode 100644
index 8595ae92..00000000
--- a/packages/layouts/src/store/modules/test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineStore } from '@vben/pinia'
-
-export const useLayoutTest = defineStore({
-  id: 'use--layout--test',
-  state: () => ({
-    test: 'layout 测试',
-  }),
-  actions: {
-    setTest(value: string) {
-      this.test = value
-    },
-  },
-  // persist: true,
-})
diff --git a/packages/types/src/setting.ts b/packages/types/src/setting.ts
index 02614616..b85aa002 100644
--- a/packages/types/src/setting.ts
+++ b/packages/types/src/setting.ts
@@ -9,7 +9,7 @@ import {
   SettingButtonPositionEnum,
   ThemeEnum,
   TriggerEnum,
-  RouterTransitionEnum
+  RouterTransitionEnum,
 } from '@vben/constants'
 import { LocaleType } from './config'
 // export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko'
@@ -73,16 +73,34 @@ export interface LocaleSetting {
 
 export interface TransitionSetting {
   //  Whether to open the page switching animation
-  enable: boolean;
+  enable: boolean
   // Route basic switching animation
-  basicTransition: RouterTransitionEnum;
+  basicTransition: RouterTransitionEnum
   // Whether to open page switching loading
-  openPageLoading: boolean;
+  openPageLoading: boolean
   // Whether to open the top progress bar
-  openNProgress: boolean;
+  openNProgress: boolean
 }
 
-export interface ProjectConfig {
+export interface SporadicSetting {
+  // Whether to open the top progress bar
+  openNProgress: boolean
+  // pageLayout whether to enable keep-alive
+  openKeepAlive: boolean
+  // Lock screen time
+  lockTime: number
+  // Show breadcrumbs
+  showBreadCrumb: boolean
+  // Show breadcrumb icon
+  showBreadCrumbIcon: boolean
+  // Whether to open back to top
+  useOpenBackTop: boolean
+  // Is it possible to embed iframe pages
+  canEmbedIFramePage: boolean
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: boolean
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  removeAllHttpPending: boolean
   // Storage location of permission related information
   permissionCacheType: CacheTypeEnum
   // Whether to show the configuration button
@@ -110,6 +128,9 @@ export interface ProjectConfig {
   showLogo: boolean
   // Whether to show the global footer
   showFooter: boolean
+}
+
+export interface ProjectConfig extends SporadicSetting {
   // menuType: MenuTypeEnum;
   headerSetting: HeaderSetting
   // menuSetting
@@ -117,23 +138,5 @@ export interface ProjectConfig {
   // Multi-tab settings
   multiTabsSetting: MultiTabsSetting
   // Animation configuration
-  transitionSetting: TransitionSetting;
-  // Whether to open the top progress bar
-  openNProgress: false
-  // pageLayout whether to enable keep-alive
-  openKeepAlive: boolean
-  // Lock screen time
-  lockTime: number
-  // Show breadcrumbs
-  showBreadCrumb: boolean
-  // Show breadcrumb icon
-  showBreadCrumbIcon: boolean
-  // Whether to open back to top
-  useOpenBackTop: boolean
-  // Is it possible to embed iframe pages
-  canEmbedIFramePage: boolean
-  // Whether to delete unclosed messages and notify when switching the interface
-  closeMessageOnSwitch: boolean
-  // Whether to cancel the http request that has been sent but not responded when switching the interface.
-  removeAllHttpPending: boolean
+  transitionSetting: TransitionSetting
 }

From 20967794e20a84c2cc11d12f36bce068e9617743 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 2 Feb 2023 10:15:52 +0800
Subject: [PATCH 03/22] =?UTF-8?q?perf:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/src/pages/sys/login/login.vue      |   1 -
 .../layouts/src/components/lock/LockModal.vue |  66 +++++-----
 .../setting/components/SettingDrawer.vue      | 114 +++++++++++-------
 3 files changed, 103 insertions(+), 78 deletions(-)

diff --git a/apps/admin/src/pages/sys/login/login.vue b/apps/admin/src/pages/sys/login/login.vue
index 2f2ca608..cf837c4b 100644
--- a/apps/admin/src/pages/sys/login/login.vue
+++ b/apps/admin/src/pages/sys/login/login.vue
@@ -6,7 +6,6 @@ import ForgetPasswordForm from './forget-password-form.vue'
 import RegisterForm from './register-form.vue'
 import MobileForm from './mobile-form.vue'
 import QrCodeForm from './qrcode-form.vue'
-import { DarkModeToggle } from '@vben/layouts'
 const { bem } = createNamespace('login')
 
 defineProps({
diff --git a/packages/layouts/src/components/lock/LockModal.vue b/packages/layouts/src/components/lock/LockModal.vue
index 8c9b66e8..19219198 100644
--- a/packages/layouts/src/components/lock/LockModal.vue
+++ b/packages/layouts/src/components/lock/LockModal.vue
@@ -1,25 +1,25 @@
 <script lang="ts" setup>
-import {defineProps, computed, ref} from "vue";
-import {useI18n} from '@vben/locale'
-import {useForm} from '@vben/vbencomponents'
-import {context} from '../../../bridge'
+import { computed, ref } from 'vue'
+import { useI18n } from '@vben/locale'
+import { useForm } from '@vben/vbencomponents'
+import { context } from '../../../bridge'
 import headerImg from '@/assets/images/header.jpg'
 
-const {t} = useI18n();
+const { t } = useI18n()
 
 const props = defineProps({
   show: {
-    type: Boolean
-  }
+    type: Boolean,
+  },
 })
 
-const {useUserStore, useLockStore} = context
+const { useUserStore, useLockStore } = context
 const userStore = useUserStore()
 const lockStore = useLockStore()
 const getUserInfo = computed(() => {
-  const {realName = 'Vben Admin', avatar, desc} = userStore.getUserInfo || {}
+  const { realName = 'Vben Admin', avatar, desc } = userStore.getUserInfo || {}
 
-  return {realName, avatar: avatar || headerImg, desc}
+  return { realName, avatar: avatar || headerImg, desc }
 })
 const emits = defineEmits(['update:show'])
 
@@ -27,11 +27,11 @@ const showModal = computed({
   get: () => props.show,
   set: (val) => {
     emits('update:show', val)
-  }
+  },
 })
 
 const formRef = ref(undefined)
-const [register, {getFieldValue, validate}] = useForm({
+const [register, { getFieldValue, validate }] = useForm({
   schemas: [
     {
       gridItemProps: {
@@ -42,52 +42,54 @@ const [register, {getFieldValue, validate}] = useForm({
       component: 'InputPassword',
       componentProps: {
         placeholder: t('layout.header.lockScreenPassword'),
-        showPasswordOn: 'mousedown'
+        showPasswordOn: 'mousedown',
       },
       rule: {
         required: true,
         message: t('layout.header.lockScreenPassword'),
-        trigger: ['input', 'blur']
-      }
-    }
-  ]
+        trigger: ['input', 'blur'],
+      },
+    },
+  ],
 })
 
 const formModel = ref({
-  password: ''
+  password: '',
 })
 
 const handleLock = async () => {
   await validate((errors) => {
     if (!errors) {
-      const {password} = getFieldValue();
+      const { password } = getFieldValue()
       lockStore.setLockInfo({
         isLock: true,
         pwd: password,
-      });
+      })
     }
   })
 }
-
 </script>
 
 <template>
-  <VbenModal v-model:show="showModal" :title="t('layout.header.lockScreen')" preset="card">
+  <VbenModal
+    v-model:show="showModal"
+    :title="t('layout.header.lockScreen')"
+    preset="card"
+  >
     <VbenSpace vertical align="center">
-      <VbenAvatar
-        round
-        :size="64"
-        :src="getUserInfo.avatar"
-      />
+      <VbenAvatar round :size="64" :src="getUserInfo.avatar" />
       <VbenH5>{{ getUserInfo.realName }}</VbenH5>
     </VbenSpace>
-    <VbenForm @register="register" ref="formRef" v-model:model="formModel" label-placement="left"/>
+    <VbenForm
+      @register="register"
+      ref="formRef"
+      v-model:model="formModel"
+      label-placement="left"
+    />
     <VbenButton type="info" block @click="handleLock">
-      {{ t('layout.header.lockScreenBtn')}}
+      {{ t('layout.header.lockScreenBtn') }}
     </VbenButton>
   </VbenModal>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/packages/layouts/src/components/setting/components/SettingDrawer.vue b/packages/layouts/src/components/setting/components/SettingDrawer.vue
index 7ab1992f..6b0c2b20 100644
--- a/packages/layouts/src/components/setting/components/SettingDrawer.vue
+++ b/packages/layouts/src/components/setting/components/SettingDrawer.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {ref, defineProps} from 'vue'
 import DarkModeToggle from './DarkModeToggle.vue'
 import NavigationBarPicker from './NavigationBarPicker.vue'
 import ThemeColorPicker from './ThemeColorPicker.vue'
@@ -12,35 +11,27 @@ import {
   APP_PRESET_COLOR_LIST,
   HEADER_PRESET_BG_COLOR_LIST,
   SIDE_BAR_BG_COLOR_LIST,
-  HandlerSettingEnum
+  HandlerSettingEnum,
 } from '@vben/constants'
-import {context} from '../../../../bridge'
-import {navigationBarTypeList} from '../constant'
-import {useI18n} from '@vben/locale'
+import { context } from '../../../../bridge'
+import { navigationBarTypeList } from '../constant'
+import { useI18n } from '@vben/locale'
 
-const {t} = useI18n();
+const { t } = useI18n()
 
-const {
-  useMenuSetting,
-  useHeaderSetting,
-  useRootSetting,
-} = context
+const { useMenuSetting, useHeaderSetting, useRootSetting } = context
 
-const {
-  getShowDarkModeToggle,
-  getThemeColor,
-} = useRootSetting();
-const {getIsHorizontal,getMenuType, getMenuBgColor} = useMenuSetting();
-const {getHeaderBgColor} = useHeaderSetting();
+const { getShowDarkModeToggle, getThemeColor } = useRootSetting()
+const { getIsHorizontal, getMenuType, getMenuBgColor } = useMenuSetting()
+const { getHeaderBgColor } = useHeaderSetting()
 
 defineProps({
-  visible: {type: Boolean, default: false}
+  visible: { type: Boolean, default: false },
 })
-const emit = defineEmits(["update:visible"]);
-const onVisible = (show: boolean)=>{
+const emit = defineEmits(['update:visible'])
+const onVisible = (show: boolean) => {
   emit('update:visible', show)
 }
-
 </script>
 
 <template>
@@ -48,32 +39,65 @@ const onVisible = (show: boolean)=>{
     <VbenDrawerContent closable>
       <template #header>{{ t('layout.setting.drawerTitle') }}</template>
       <template v-if="getShowDarkModeToggle">
-        <VbenDivider title-placement="left">{{ t('layout.setting.darkMode') }}</VbenDivider>
-        <DarkModeToggle/>
+        <VbenDivider title-placement="left">{{
+          t('layout.setting.darkMode')
+        }}</VbenDivider>
+        <DarkModeToggle />
       </template>
-      <VbenDivider title-placement="left">{{ t('layout.setting.navMode') }}</VbenDivider>
-      <NavigationBarPicker :def="getMenuType" :type-list="navigationBarTypeList" @handler="(item)=>{
-          baseHandler(HandlerSettingEnum.CHANGE_LAYOUT,{
-            mode: item.mode,
-            type: item.type,
-            split: getIsHorizontal ? false : undefined,
-          })
-        }"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.sysTheme') }}</VbenDivider>
-      <ThemeColorPicker :def="getThemeColor" :event="HandlerSettingEnum.CHANGE_THEME_COLOR" :color-list="APP_PRESET_COLOR_LIST"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.headerTheme') }}</VbenDivider>
-      <ThemeColorPicker :def="getHeaderBgColor" :event="HandlerSettingEnum.HEADER_THEME" :color-list="HEADER_PRESET_BG_COLOR_LIST"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.sidebarTheme') }}</VbenDivider>
-      <ThemeColorPicker :def="getMenuBgColor" :event="HandlerSettingEnum.MENU_THEME" :color-list="SIDE_BAR_BG_COLOR_LIST"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.interfaceFunction') }}
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.navMode')
+      }}</VbenDivider>
+      <NavigationBarPicker
+        :def="getMenuType"
+        :type-list="navigationBarTypeList"
+        @handler="
+          (item) => {
+            baseHandler(HandlerSettingEnum.CHANGE_LAYOUT, {
+              mode: item.mode,
+              type: item.type,
+              split: getIsHorizontal ? false : undefined,
+            })
+          }
+        "
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sysTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getThemeColor"
+        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.headerTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getHeaderBgColor"
+        :event="HandlerSettingEnum.HEADER_THEME"
+        :color-list="HEADER_PRESET_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sidebarTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getMenuBgColor"
+        :event="HandlerSettingEnum.MENU_THEME"
+        :color-list="SIDE_BAR_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left"
+        >{{ t('layout.setting.interfaceFunction') }}
       </VbenDivider>
-      <Features/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.interfaceDisplay') }}</VbenDivider>
-      <Content/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.animation') }}</VbenDivider>
-      <Transitions/>
-      <VbenDivider/>
-      <FooterButtons/>
+      <Features />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.interfaceDisplay')
+      }}</VbenDivider>
+      <Content />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.animation')
+      }}</VbenDivider>
+      <Transitions />
+      <VbenDivider />
+      <FooterButtons />
     </VbenDrawerContent>
   </VbenDrawer>
 </template>

From 099d2b40f2b154f5ebf8aca6e1d0238730b0791a Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 2 Feb 2023 15:46:02 +0800
Subject: [PATCH 04/22] chore: Configure .npmrx

---
 .npmrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.npmrc b/.npmrc
index 68fbcd57..b07f5c51 100644
--- a/.npmrc
+++ b/.npmrc
@@ -6,3 +6,4 @@ public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*vite-plugin-mock*
 public-hoist-pattern[]=vite
+strict-peer-dependencies=false

From 1cb9848ce46399e413040b2c8218886aefee585c Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 2 Feb 2023 18:00:52 +0800
Subject: [PATCH 05/22] wip: grid-layout

---
 apps/admin/package.json                       |  1 +
 apps/admin/src/layout/index.vue               |  4 +-
 packages/grid-layouts/index.ts                |  3 ++
 packages/grid-layouts/package.json            | 22 ++++++++
 .../grid-layouts/src/components/Layout.vue    | 19 +++++++
 .../src/components/LayoutContent.vue          | 10 ++++
 .../src/components/LayoutFooter.vue           |  6 +++
 .../src/components/LayoutHeader.vue           |  6 +++
 .../src/components/LayoutLogo.vue             |  5 ++
 .../src/components/LayoutSidebar.vue          |  6 +++
 .../grid-layouts/src/components/LayoutTab.vue |  6 +++
 packages/grid-layouts/src/index.vue           |  7 +++
 .../src/store/index.ts                        |  6 +++
 .../src/store/modules/headerSetting.ts        |  0
 .../src/store/modules/layoutComposables.ts    | 52 +++++++++++++++++++
 .../src/store/modules/menuSetting.ts          | 45 +++++++++++++---
 .../src/store/modules/multiTabsSetting.ts     |  0
 .../src/store/modules/sporadicSetting.ts      |  0
 .../src/store/modules/transitionSetting.ts    |  0
 packages/layouts/index.ts                     |  1 -
 packages/layouts/src/components/main.vue      |  7 ---
 packages/styles/src/grid-layout.scss          | 32 ++++++++++++
 packages/styles/src/index.ts                  |  1 +
 23 files changed, 222 insertions(+), 17 deletions(-)
 create mode 100644 packages/grid-layouts/index.ts
 create mode 100644 packages/grid-layouts/package.json
 create mode 100644 packages/grid-layouts/src/components/Layout.vue
 create mode 100644 packages/grid-layouts/src/components/LayoutContent.vue
 create mode 100644 packages/grid-layouts/src/components/LayoutFooter.vue
 create mode 100644 packages/grid-layouts/src/components/LayoutHeader.vue
 create mode 100644 packages/grid-layouts/src/components/LayoutLogo.vue
 create mode 100644 packages/grid-layouts/src/components/LayoutSidebar.vue
 create mode 100644 packages/grid-layouts/src/components/LayoutTab.vue
 create mode 100644 packages/grid-layouts/src/index.vue
 rename packages/{layouts => grid-layouts}/src/store/index.ts (73%)
 rename packages/{layouts => grid-layouts}/src/store/modules/headerSetting.ts (100%)
 create mode 100644 packages/grid-layouts/src/store/modules/layoutComposables.ts
 rename packages/{layouts => grid-layouts}/src/store/modules/menuSetting.ts (70%)
 rename packages/{layouts => grid-layouts}/src/store/modules/multiTabsSetting.ts (100%)
 rename packages/{layouts => grid-layouts}/src/store/modules/sporadicSetting.ts (100%)
 rename packages/{layouts => grid-layouts}/src/store/modules/transitionSetting.ts (100%)
 create mode 100644 packages/styles/src/grid-layout.scss

diff --git a/apps/admin/package.json b/apps/admin/package.json
index 1a9c545e..1444ed88 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -29,6 +29,7 @@
     "@vben/constants": "workspace:*",
     "@vben/demo": "workspace:*",
     "@vben/directives": "workspace:*",
+    "@vben/grid-layouts": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locale": "workspace:*",
diff --git a/apps/admin/src/layout/index.vue b/apps/admin/src/layout/index.vue
index 0f776d75..d460f8f5 100644
--- a/apps/admin/src/layout/index.vue
+++ b/apps/admin/src/layout/index.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { Layout } from '@vben/layouts'
+// import { Layout } from '@vben/layouts'
+import { Layout } from  '@vben/grid-layouts'
+
 </script>
 
 <template>
diff --git a/packages/grid-layouts/index.ts b/packages/grid-layouts/index.ts
new file mode 100644
index 00000000..7d6fc701
--- /dev/null
+++ b/packages/grid-layouts/index.ts
@@ -0,0 +1,3 @@
+export { default as Layout } from './src/index.vue'
+
+export * from './src/store'
diff --git a/packages/grid-layouts/package.json b/packages/grid-layouts/package.json
new file mode 100644
index 00000000..81623748
--- /dev/null
+++ b/packages/grid-layouts/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@vben/grid-layouts",
+  "version": "3.0.0-bata.1",
+  "main": "index.ts",
+  "module": "index.ts",
+  "license": "MIT",
+  "scripts": {
+    "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo"
+  },
+  "dependencies": {
+    "@vben/constants": "workspace:*",
+    "@vben/directives": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/locale": "workspace:*",
+    "@vben/pinia": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vben/vbencomponents": "workspace:*",
+    "vue": "3.2.45",
+    "vue-router": "^4.1.6"
+  }
+}
diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
new file mode 100644
index 00000000..981effcd
--- /dev/null
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import LayoutHeader from "./LayoutHeader.vue";
+import LayoutSidebar from "./LayoutSidebar.vue";
+import LayoutContent from "./LayoutContent.vue";
+import LayoutTab from "./LayoutTab.vue";
+</script>
+<template>
+<section class="vben-grid-layout-container h-full w-full">
+  <LayoutHeader />
+  <LayoutSidebar />
+  <LayoutTab />
+  <LayoutContent />
+</section>
+</template>
+<style lang="scss" scoped>
+//.vben-grid-layout-container{
+//  background: #666666;
+//}
+</style>
diff --git a/packages/grid-layouts/src/components/LayoutContent.vue b/packages/grid-layouts/src/components/LayoutContent.vue
new file mode 100644
index 00000000..b932153c
--- /dev/null
+++ b/packages/grid-layouts/src/components/LayoutContent.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import LayoutFooter from "./LayoutFooter.vue";
+</script>
+<template>
+  <div class="vben-grid-layout-content">
+    <slot name="main" :class="['vben-grid-layout-main']"></slot>
+    <LayoutFooter />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutFooter.vue b/packages/grid-layouts/src/components/LayoutFooter.vue
new file mode 100644
index 00000000..d8df79b1
--- /dev/null
+++ b/packages/grid-layouts/src/components/LayoutFooter.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <footer class="vben-grid-layout-footer"></footer>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutHeader.vue b/packages/grid-layouts/src/components/LayoutHeader.vue
new file mode 100644
index 00000000..9715ed64
--- /dev/null
+++ b/packages/grid-layouts/src/components/LayoutHeader.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <header class="vben-grid-layout-header"></header>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutLogo.vue b/packages/grid-layouts/src/components/LayoutLogo.vue
new file mode 100644
index 00000000..8a7cf934
--- /dev/null
+++ b/packages/grid-layouts/src/components/LayoutLogo.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup>
+</script>
+<template>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutSidebar.vue b/packages/grid-layouts/src/components/LayoutSidebar.vue
new file mode 100644
index 00000000..9e06e578
--- /dev/null
+++ b/packages/grid-layouts/src/components/LayoutSidebar.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div class="vben-grid-layout-sidebar"></div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutTab.vue b/packages/grid-layouts/src/components/LayoutTab.vue
new file mode 100644
index 00000000..12ab180c
--- /dev/null
+++ b/packages/grid-layouts/src/components/LayoutTab.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div class="vben-grid-layout-tab"></div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/index.vue b/packages/grid-layouts/src/index.vue
new file mode 100644
index 00000000..2c0eb78b
--- /dev/null
+++ b/packages/grid-layouts/src/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import Layout from './components/Layout.vue'
+</script>
+<template>
+<Layout></Layout>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/layouts/src/store/index.ts b/packages/grid-layouts/src/store/index.ts
similarity index 73%
rename from packages/layouts/src/store/index.ts
rename to packages/grid-layouts/src/store/index.ts
index cc729d66..c1e8ede9 100644
--- a/packages/layouts/src/store/index.ts
+++ b/packages/grid-layouts/src/store/index.ts
@@ -3,3 +3,9 @@ export { useHeaderSettingStore } from './modules/headerSetting'
 export { useMenuSettingStore } from './modules/menuSetting'
 export { useTransitionSettingStore } from './modules/transitionSetting'
 export { useMultiTabsSettingStore } from './modules/multiTabsSetting'
+export {
+  useLayoutHeader,
+  useLayoutFooter,
+  useLayoutSidebar,
+  useLayoutTab,
+} from './modules/layoutComposables'
diff --git a/packages/layouts/src/store/modules/headerSetting.ts b/packages/grid-layouts/src/store/modules/headerSetting.ts
similarity index 100%
rename from packages/layouts/src/store/modules/headerSetting.ts
rename to packages/grid-layouts/src/store/modules/headerSetting.ts
diff --git a/packages/grid-layouts/src/store/modules/layoutComposables.ts b/packages/grid-layouts/src/store/modules/layoutComposables.ts
new file mode 100644
index 00000000..c629f3b7
--- /dev/null
+++ b/packages/grid-layouts/src/store/modules/layoutComposables.ts
@@ -0,0 +1,52 @@
+import { defineStore } from '@vben/pinia'
+import { useElementSize } from '@vben/utils'
+import { ref } from 'vue'
+
+export const useLayoutHeader = defineStore('LAYOUT_HEADER', () => {
+  const headerRef = ref<HTMLElement>()
+
+  const { height: headerHeight, width: headerWidth } = useElementSize(headerRef)
+
+  return {
+    headerRef,
+    headerHeight,
+    headerWidth,
+  }
+})
+
+export const useLayoutSidebar = defineStore('LAYOUT_SIDEBAR', () => {
+  const sidebarRef = ref<HTMLElement>()
+
+  const { height: sidebarHeight, width: sidebarWidth } =
+    useElementSize(sidebarRef)
+
+  return {
+    sidebarRef,
+    sidebarHeight,
+    sidebarWidth,
+  }
+})
+
+export const useLayoutTab = defineStore('LAYOUT_TAB', () => {
+  const tabRef = ref<HTMLElement>()
+
+  const { height: tabHeight, width: tabWidth } = useElementSize(tabRef)
+
+  return {
+    tabRef,
+    tabHeight,
+    tabWidth,
+  }
+})
+
+export const useLayoutFooter = defineStore('LAYOUT_FOOTER', () => {
+  const footerRef = ref<HTMLElement>()
+
+  const { height: footerHeight, width: footerWidth } = useElementSize(footerRef)
+
+  return {
+    footerRef,
+    footerHeight,
+    footerWidth,
+  }
+})
diff --git a/packages/layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
similarity index 70%
rename from packages/layouts/src/store/modules/menuSetting.ts
rename to packages/grid-layouts/src/store/modules/menuSetting.ts
index 4698a09c..bd6bdc80 100644
--- a/packages/layouts/src/store/modules/menuSetting.ts
+++ b/packages/grid-layouts/src/store/modules/menuSetting.ts
@@ -52,14 +52,40 @@ export const useMenuSettingStore = defineStore({
     mixSideFixed: false,
   }),
   getters: {
-    isSidebarType: (state) => {
-      return state.type === MenuTypeEnum.SIDEBAR
-    },
-    isTopMenu: (state) => {
-      return state.type === MenuTypeEnum.SIDEBAR
-    },
-    menuShowLogo: (state) => {
-      return state.type === MenuTypeEnum.SIDEBAR
+    isSidebarType: (state) => state.type === MenuTypeEnum.SIDEBAR,
+    isTopMenu: (state) => state.type === MenuTypeEnum.SIDEBAR,
+    isMixSidebar: (state) => state.type === MenuTypeEnum.MIX_SIDEBAR,
+    isMixMode: (state) =>
+      state.mode === MenuModeEnum.INLINE && state.type === MenuTypeEnum.MIX,
+    showMenuLogo: (state) => state.type === MenuTypeEnum.SIDEBAR,
+    showTopMenu: (state) => {
+      return state.mode === MenuModeEnum.HORIZONTAL || state.split
+    },
+    showHeaderTrigger: (state) => {
+      if (state.type === MenuTypeEnum.TOP_MENU || !state.show || state.hidden)
+        return false
+      return state.trigger === TriggerEnum.HEADER
+    },
+    isHorizontal: (state) => state.mode === MenuModeEnum.HORIZONTAL,
+    // TODO
+    ShowSidebar: (state) => {
+      const fullContent = false
+      return (
+        state.split ||
+        (state.show && state.mode !== MenuModeEnum.HORIZONTAL && !fullContent)
+      )
+    },
+    // TODO
+    getRealWidth: (state) => {
+      return 0
+    },
+    // TODO
+    getMiniWidthNumber: (state) => {
+      return 0
+    },
+    // TODO
+    getCalcContentWidth: (state) => {
+      return 0
     },
   },
   actions: {
@@ -117,5 +143,8 @@ export const useMenuSettingStore = defineStore({
     setMixSideFixed(value: boolean) {
       this.mixSideFixed = value
     },
+    toggleCollapsed() {
+      this.setCollapsed(!this.collapsed)
+    },
   },
 })
diff --git a/packages/layouts/src/store/modules/multiTabsSetting.ts b/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
similarity index 100%
rename from packages/layouts/src/store/modules/multiTabsSetting.ts
rename to packages/grid-layouts/src/store/modules/multiTabsSetting.ts
diff --git a/packages/layouts/src/store/modules/sporadicSetting.ts b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
similarity index 100%
rename from packages/layouts/src/store/modules/sporadicSetting.ts
rename to packages/grid-layouts/src/store/modules/sporadicSetting.ts
diff --git a/packages/layouts/src/store/modules/transitionSetting.ts b/packages/grid-layouts/src/store/modules/transitionSetting.ts
similarity index 100%
rename from packages/layouts/src/store/modules/transitionSetting.ts
rename to packages/grid-layouts/src/store/modules/transitionSetting.ts
diff --git a/packages/layouts/index.ts b/packages/layouts/index.ts
index d206c837..49c05a5d 100644
--- a/packages/layouts/index.ts
+++ b/packages/layouts/index.ts
@@ -1,4 +1,3 @@
 export { default as Layout } from './src/index.vue'
 export { initLayout } from './bridge'
 export { default as DarkModeToggle } from './src/components/setting/components/DarkModeToggle.vue'
-export * from './src/store/index'
diff --git a/packages/layouts/src/components/main.vue b/packages/layouts/src/components/main.vue
index 4b06e58d..17fca523 100644
--- a/packages/layouts/src/components/main.vue
+++ b/packages/layouts/src/components/main.vue
@@ -1,17 +1,10 @@
 <script lang="ts" setup>
 import LayoutFeature from './feature/index.vue'
 import { createNamespace } from '@vben/utils'
-import { storeToRefs } from "@vben/pinia";
-import {useMenuSettingStore} from "../store/modules/menuSetting";
 const { bem } = createNamespace('main')
-const menuSettingStore =  useMenuSettingStore()
-const { bgColor } = storeToRefs(menuSettingStore);
 </script>
 <template>
   <LayoutFeature />
-  <VbenButton @click="menuSettingStore.setBgColor('fgasd')">
-    change {{ bgColor }}
-  </VbenButton>
   <main :class="bem()">
     <slot></slot>
   </main>
diff --git a/packages/styles/src/grid-layout.scss b/packages/styles/src/grid-layout.scss
new file mode 100644
index 00000000..737c0ccf
--- /dev/null
+++ b/packages/styles/src/grid-layout.scss
@@ -0,0 +1,32 @@
+.vben-grid-layout-container{
+  display: grid;
+  grid-template-columns: 50vw 50vw;
+  grid-template-rows: auto;
+  grid-template-areas:
+    "vben-sidebar vben-header"
+    "vben-sidebar vben-content";
+}
+
+.vben-grid-layout-header{
+  grid-area: vben-header;
+  background: #666666;
+}
+
+.vben-grid-layout-sidebar{
+  grid-area: vben-sidebar;
+  background: #18a058;
+}
+
+.vben-grid-layout-tab{
+  grid-area: vben-tab;
+  background: #0960bd;
+}
+
+.vben-grid-layout-content{
+  grid-area: vben-content;
+  background: #ed6f6f;
+}
+
+.vben-grid-layout-footer{
+  grid-area: vben-footer;
+}
diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts
index f705f866..ef796296 100644
--- a/packages/styles/src/index.ts
+++ b/packages/styles/src/index.ts
@@ -1,4 +1,5 @@
 import './common.css'
 import './entry.css'
 import './variables.css'
+import './grid-layout.scss'
 import 'uno.css'

From b48f6d32af134bd6a2a556a0a2f2570fcd121a04 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 2 Feb 2023 23:19:23 +0800
Subject: [PATCH 06/22] =?UTF-8?q?wip:=20grid-layout=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grid-layouts/src/components/Layout.vue    | 31 +++----
 .../src/components/LayoutContent.vue          |  5 +-
 .../src/components/LayoutFooter.vue           |  5 +-
 .../src/components/LayoutHeader.vue           |  5 +-
 .../src/components/LayoutLogo.vue             |  6 +-
 .../src/components/LayoutSidebar.vue          |  5 +-
 .../grid-layouts/src/components/LayoutTab.vue |  5 +-
 packages/grid-layouts/src/components/Main.vue | 31 +++++++
 packages/grid-layouts/src/index.vue           |  2 +-
 packages/styles/src/grid-layout.scss          | 85 +++++++++++++------
 packages/styles/src/variables.css             | 18 ++++
 11 files changed, 139 insertions(+), 59 deletions(-)
 create mode 100644 packages/grid-layouts/src/components/Main.vue

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 981effcd..006add73 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
-import LayoutHeader from "./LayoutHeader.vue";
-import LayoutSidebar from "./LayoutSidebar.vue";
-import LayoutContent from "./LayoutContent.vue";
-import LayoutTab from "./LayoutTab.vue";
+import LayoutHeader from './LayoutHeader.vue'
+import LayoutSidebar from './LayoutSidebar.vue'
+import LayoutContent from './LayoutContent.vue'
+import LayoutTab from './LayoutTab.vue'
+import { storeToRefs } from '@vben/pinia'
+import { useMenuSettingStore } from '../store'
+
+const { type } = storeToRefs(useMenuSettingStore())
 </script>
 <template>
-<section class="vben-grid-layout-container h-full w-full">
-  <LayoutHeader />
-  <LayoutSidebar />
-  <LayoutTab />
-  <LayoutContent />
-</section>
+  <section class="vben-grid-layout-container h-full w-full"
+           :class="[`layout-${type}`]">
+    <LayoutHeader />
+    <LayoutSidebar />
+    <LayoutTab />
+    <LayoutContent />
+  </section>
 </template>
-<style lang="scss" scoped>
-//.vben-grid-layout-container{
-//  background: #666666;
-//}
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutContent.vue b/packages/grid-layouts/src/components/LayoutContent.vue
index b932153c..b36e7380 100644
--- a/packages/grid-layouts/src/components/LayoutContent.vue
+++ b/packages/grid-layouts/src/components/LayoutContent.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import LayoutFooter from "./LayoutFooter.vue";
+import LayoutFooter from './LayoutFooter.vue'
+import Main from './Main.vue'
 </script>
 <template>
   <div class="vben-grid-layout-content">
-    <slot name="main" :class="['vben-grid-layout-main']"></slot>
+    <Main />
     <LayoutFooter />
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/LayoutFooter.vue b/packages/grid-layouts/src/components/LayoutFooter.vue
index d8df79b1..0603d6ba 100644
--- a/packages/grid-layouts/src/components/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/LayoutFooter.vue
@@ -1,6 +1,5 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 <template>
-  <footer class="vben-grid-layout-footer"></footer>
+  <footer class="vben-grid-layout-footer">footer</footer>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutHeader.vue b/packages/grid-layouts/src/components/LayoutHeader.vue
index 9715ed64..3c4cde09 100644
--- a/packages/grid-layouts/src/components/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/LayoutHeader.vue
@@ -1,6 +1,5 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 <template>
-  <header class="vben-grid-layout-header"></header>
+  <header class="vben-grid-layout-header">header</header>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutLogo.vue b/packages/grid-layouts/src/components/LayoutLogo.vue
index 8a7cf934..4e196201 100644
--- a/packages/grid-layouts/src/components/LayoutLogo.vue
+++ b/packages/grid-layouts/src/components/LayoutLogo.vue
@@ -1,5 +1,3 @@
-<script lang="ts" setup>
-</script>
-<template>
-</template>
+<script lang="ts" setup></script>
+<template></template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutSidebar.vue b/packages/grid-layouts/src/components/LayoutSidebar.vue
index 9e06e578..ebfd1503 100644
--- a/packages/grid-layouts/src/components/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/LayoutSidebar.vue
@@ -1,6 +1,5 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 <template>
-  <div class="vben-grid-layout-sidebar"></div>
+  <div class="vben-grid-layout-sidebar">sidebar</div>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutTab.vue b/packages/grid-layouts/src/components/LayoutTab.vue
index 12ab180c..d56609ca 100644
--- a/packages/grid-layouts/src/components/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/LayoutTab.vue
@@ -1,6 +1,5 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 <template>
-  <div class="vben-grid-layout-tab"></div>
+  <div class="vben-grid-layout-tab">tab</div>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
new file mode 100644
index 00000000..1faea74b
--- /dev/null
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useMenuSettingStore } from '../store'
+import { storeToRefs } from '@vben/pinia'
+import { MenuTypeEnum } from '@vben/constants'
+
+const menuSettingStore = useMenuSettingStore()
+const { type } = storeToRefs(menuSettingStore)
+
+const options = [
+  { label: MenuTypeEnum.SIDEBAR, value: MenuTypeEnum.SIDEBAR },
+  { label: MenuTypeEnum.MIX, value: MenuTypeEnum.MIX },
+  { label: MenuTypeEnum.TOP_MENU, value: MenuTypeEnum.TOP_MENU },
+  { label: MenuTypeEnum.MIX_SIDEBAR, value: MenuTypeEnum.MIX_SIDEBAR },
+]
+
+const handlerChange = (value) => {
+  menuSettingStore.setType(value)
+}
+</script>
+<template>
+  <main class="vben-grid-layout-main">
+    {{ type }}
+    <VbenSelect
+      :options="options"
+      :value="type"
+      @update:value="handlerChange"
+    />
+    <!--    <RouterView />-->
+  </main>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/index.vue b/packages/grid-layouts/src/index.vue
index 2c0eb78b..2db24aa0 100644
--- a/packages/grid-layouts/src/index.vue
+++ b/packages/grid-layouts/src/index.vue
@@ -2,6 +2,6 @@
 import Layout from './components/Layout.vue'
 </script>
 <template>
-<Layout></Layout>
+  <Layout></Layout>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/styles/src/grid-layout.scss b/packages/styles/src/grid-layout.scss
index 737c0ccf..14e76125 100644
--- a/packages/styles/src/grid-layout.scss
+++ b/packages/styles/src/grid-layout.scss
@@ -1,32 +1,67 @@
-.vben-grid-layout-container{
+.vben-grid-layout-container {
   display: grid;
-  grid-template-columns: 50vw 50vw;
-  grid-template-rows: auto;
-  grid-template-areas:
-    "vben-sidebar vben-header"
-    "vben-sidebar vben-content";
-}
+  grid-template-columns: var(--aside-width) 1fr;
+  grid-template-rows: var(--header-height) var(--tab-height) 1fr;
 
-.vben-grid-layout-header{
-  grid-area: vben-header;
-  background: #666666;
-}
+  &.layout-sidebar, &.layout-mix-sidebar {
+    grid-template-areas:
+      'vben-sidebar vben-header'
+      'vben-sidebar vben-tab'
+      'vben-sidebar vben-content';
+  }
 
-.vben-grid-layout-sidebar{
-  grid-area: vben-sidebar;
-  background: #18a058;
-}
+  &.layout-mix-sidebar {
+    --aside-width: 80px;
+  }
 
-.vben-grid-layout-tab{
-  grid-area: vben-tab;
-  background: #0960bd;
-}
+  &.layout-mix, &.layout-top-menu {
+    grid-template-areas:
+      'vben-header vben-header'
+      'vben-sidebar vben-tab'
+      'vben-sidebar vben-content';
+  }
 
-.vben-grid-layout-content{
-  grid-area: vben-content;
-  background: #ed6f6f;
-}
+  &.layout-top-menu {
+    --aside-width: 0;
+  }
+
+  .vben-grid-layout-header, .vben-grid-layout-sidebar,
+  .vben-grid-layout-tab, .vben-grid-layout-content,
+  .vben-grid-layout-main, .vben-grid-layout-footer{
+    transition:  grid-template-rows 3s, grid-template-columns 3s, grid-template-areas 3s;
+    //-webkit-transition: all 30s;
+  }
+
+  .vben-grid-layout-header {
+    grid-area: vben-header;
+    background: #666666;
+  }
+
+  .vben-grid-layout-sidebar {
+    grid-area: vben-sidebar;
+    background: #18a058;
+  }
+
+  .vben-grid-layout-tab {
+    grid-area: vben-tab;
+    background: #0960bd;
+  }
+
+  .vben-grid-layout-content {
+    grid-area: vben-content;
+    overflow: auto;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr minmax(0, var(--footer-height));
+
+    background: #ed6f6f;
+  }
+
+  .vben-grid-layout-main {
+    background-color: aqua;
+  }
 
-.vben-grid-layout-footer{
-  grid-area: vben-footer;
+  .vben-grid-layout-footer {
+    background-color: blueviolet;
+  }
 }
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index aebc45ec..0e98ccc0 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -7,9 +7,27 @@
   /* component */
   --component-background-color: #fff;
 
+  /* header */
+  --header-height: 48px;
+  --header-width: calc(100% - var(--aside-width));
+
+  /* tab */
+  --tab-height: 36px;
+  --tab-width: calc(100% - var(--aside-width));
+  
   /* aside */
+  --aside-height: calc(100% - var(--header-height));
+  --aside-width: 210px;
   --aside-background-color: #001628;
   --aside-submenu-background-color: #0c2135;
+
+  /* main */
+  --main-height: calc(100% - var(--footer-height));
+  --main-width: 100%;
+
+  /* footer */
+  --footer-height: 60px;
+  --footer-width: 100%;
 }
 
 @media (prefers-color-scheme: dark) {

From 3241d059a9c8d735c229f9541326fcb9acbd5bd4 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Fri, 3 Feb 2023 17:59:41 +0800
Subject: [PATCH 07/22] =?UTF-8?q?wip:=20grid-layout=20=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=BF=87=E6=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/constants/src/menuEnum.ts            |  2 +
 .../grid-layouts/src/components/Layout.vue    | 38 ++++++++---
 .../src/components/LayoutContent.vue          | 11 ---
 .../src/components/LayoutSidebar.vue          |  5 --
 packages/grid-layouts/src/components/Main.vue | 13 +++-
 .../components/composables/LayoutContent.vue  | 14 ++++
 .../{ => composables}/LayoutFooter.vue        |  0
 .../{ => composables}/LayoutHeader.vue        |  0
 .../{ => composables}/LayoutLogo.vue          |  0
 .../components/composables/LayoutSidebar.vue  | 13 ++++
 .../{ => composables}/LayoutTab.vue           |  0
 .../src/components/sidebar/ToggleButton.vue   | 67 +++++++++++++++++++
 .../src/components/trigger/HeaderTrgger.vue   |  5 ++
 .../components/trigger/SiderCenterTrgger.vue  |  5 ++
 .../components/trigger/SiderFooterTrgger.vue  |  5 ++
 .../src/components/trigger/inedx.vue          |  5 ++
 .../src/hooks/useComprehensive.ts             | 22 ++++++
 packages/grid-layouts/src/store/index.ts      |  1 +
 .../src/store/modules/layoutComposables.ts    | 13 ++++
 .../src/store/modules/menuSetting.ts          | 19 ++++--
 packages/styles/src/grid-layout.scss          | 37 ++++++----
 packages/styles/src/variables.css             | 21 ++++++
 packages/types/src/setting.ts                 |  4 ++
 .../src/iconify/src/Iconify.vue               |  2 +-
 24 files changed, 256 insertions(+), 46 deletions(-)
 delete mode 100644 packages/grid-layouts/src/components/LayoutContent.vue
 delete mode 100644 packages/grid-layouts/src/components/LayoutSidebar.vue
 create mode 100644 packages/grid-layouts/src/components/composables/LayoutContent.vue
 rename packages/grid-layouts/src/components/{ => composables}/LayoutFooter.vue (100%)
 rename packages/grid-layouts/src/components/{ => composables}/LayoutHeader.vue (100%)
 rename packages/grid-layouts/src/components/{ => composables}/LayoutLogo.vue (100%)
 create mode 100644 packages/grid-layouts/src/components/composables/LayoutSidebar.vue
 rename packages/grid-layouts/src/components/{ => composables}/LayoutTab.vue (100%)
 create mode 100644 packages/grid-layouts/src/components/sidebar/ToggleButton.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/HeaderTrgger.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/inedx.vue
 create mode 100644 packages/grid-layouts/src/hooks/useComprehensive.ts

diff --git a/packages/constants/src/menuEnum.ts b/packages/constants/src/menuEnum.ts
index 5903c3e1..98289e33 100644
--- a/packages/constants/src/menuEnum.ts
+++ b/packages/constants/src/menuEnum.ts
@@ -18,6 +18,8 @@ export enum TriggerEnum {
   NONE = 'NONE',
   // 菜单底部
   FOOTER = 'FOOTER',
+  // 菜单中间
+  CENTER = 'CENTER',
   // 头部
   HEADER = 'HEADER',
 }
diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 006add73..bacc8e93 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -1,20 +1,36 @@
 <script lang="ts" setup>
-import LayoutHeader from './LayoutHeader.vue'
-import LayoutSidebar from './LayoutSidebar.vue'
-import LayoutContent from './LayoutContent.vue'
-import LayoutTab from './LayoutTab.vue'
+import LayoutHeader from './composables/LayoutHeader.vue'
+import LayoutSidebar from './composables/LayoutSidebar.vue'
+import LayoutContent from './composables/LayoutContent.vue'
+import LayoutTab from './composables/LayoutTab.vue'
 import { storeToRefs } from '@vben/pinia'
-import { useMenuSettingStore } from '../store'
+import {
+  useLayoutHeader,
+  useLayoutSidebar,
+  useLayoutTab,
+  useMenuSettingStore,
+  useLayoutContent,
+} from '../store'
+import { useComprehensive } from '../hooks/useComprehensive'
+
+const { headerRef } = storeToRefs(useLayoutHeader())
+const { sidebarRef } = storeToRefs(useLayoutSidebar())
+const { tabRef } = storeToRefs(useLayoutTab())
+const { contentRef } = storeToRefs(useLayoutContent())
+const { getLayoutStyles } = useComprehensive()
 
 const { type } = storeToRefs(useMenuSettingStore())
 </script>
 <template>
-  <section class="vben-grid-layout-container h-full w-full"
-           :class="[`layout-${type}`]">
-    <LayoutHeader />
-    <LayoutSidebar />
-    <LayoutTab />
-    <LayoutContent />
+  <section
+    class="vben-grid-layout-container h-full w-full"
+    :class="[`layout-${type}`]"
+    :style="getLayoutStyles"
+  >
+    <LayoutHeader ref="headerRef" />
+    <LayoutSidebar ref="sidebarRef" />
+    <LayoutTab ref="tabRef" />
+    <LayoutContent ref="contentRef" />
   </section>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutContent.vue b/packages/grid-layouts/src/components/LayoutContent.vue
deleted file mode 100644
index b36e7380..00000000
--- a/packages/grid-layouts/src/components/LayoutContent.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import LayoutFooter from './LayoutFooter.vue'
-import Main from './Main.vue'
-</script>
-<template>
-  <div class="vben-grid-layout-content">
-    <Main />
-    <LayoutFooter />
-  </div>
-</template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutSidebar.vue b/packages/grid-layouts/src/components/LayoutSidebar.vue
deleted file mode 100644
index ebfd1503..00000000
--- a/packages/grid-layouts/src/components/LayoutSidebar.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts" setup></script>
-<template>
-  <div class="vben-grid-layout-sidebar">sidebar</div>
-</template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index 1faea74b..be29974c 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { useMenuSettingStore } from '../store'
+import {
+  useLayoutHeader,
+  useMenuSettingStore
+} from '../store'
 import { storeToRefs } from '@vben/pinia'
 import { MenuTypeEnum } from '@vben/constants'
+import {useComprehensive} from "../hooks/useComprehensive";
 
 const menuSettingStore = useMenuSettingStore()
 const { type } = storeToRefs(menuSettingStore)
@@ -16,6 +20,11 @@ const options = [
 const handlerChange = (value) => {
   menuSettingStore.setType(value)
 }
+
+const { headerWidth, headerHeight } = storeToRefs(useLayoutHeader())
+
+const { getLayoutStyles } = useComprehensive()
+
 </script>
 <template>
   <main class="vben-grid-layout-main">
@@ -25,6 +34,8 @@ const handlerChange = (value) => {
       :value="type"
       @update:value="handlerChange"
     />
+    <div>layoutStyles： {{ getLayoutStyles }}</div>
+    <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
     <!--    <RouterView />-->
   </main>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
new file mode 100644
index 00000000..2d884d27
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import LayoutFooter from './LayoutFooter.vue'
+import Main from '../Main.vue'
+import { useLayoutFooter } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+const { footerRef } = storeToRefs(useLayoutFooter())
+</script>
+<template>
+  <div class="vben-grid-layout-content">
+    <Main />
+    <LayoutFooter ref="footerRef" />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
similarity index 100%
rename from packages/grid-layouts/src/components/LayoutFooter.vue
rename to packages/grid-layouts/src/components/composables/LayoutFooter.vue
diff --git a/packages/grid-layouts/src/components/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
similarity index 100%
rename from packages/grid-layouts/src/components/LayoutHeader.vue
rename to packages/grid-layouts/src/components/composables/LayoutHeader.vue
diff --git a/packages/grid-layouts/src/components/LayoutLogo.vue b/packages/grid-layouts/src/components/composables/LayoutLogo.vue
similarity index 100%
rename from packages/grid-layouts/src/components/LayoutLogo.vue
rename to packages/grid-layouts/src/components/composables/LayoutLogo.vue
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
new file mode 100644
index 00000000..a5e88cf8
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import ToggleButton from '../sidebar/ToggleButton.vue'
+
+</script>
+<template>
+  <div class="vben-grid-layout-sidebar">
+    <!--    <div class="vben-grid-layout-sidebar__container"></div>-->
+    <div>sidebar</div>
+    <ToggleButton />
+    <div class="vben-grid-layout-sidebar__border"></div>
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
similarity index 100%
rename from packages/grid-layouts/src/components/LayoutTab.vue
rename to packages/grid-layouts/src/components/composables/LayoutTab.vue
diff --git a/packages/grid-layouts/src/components/sidebar/ToggleButton.vue b/packages/grid-layouts/src/components/sidebar/ToggleButton.vue
new file mode 100644
index 00000000..a926c04b
--- /dev/null
+++ b/packages/grid-layouts/src/components/sidebar/ToggleButton.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const menuSettingStore = useMenuSettingStore()
+const { isMixSidebar, collapsed } = storeToRefs(menuSettingStore)
+</script>
+<template>
+  <div
+    @click="menuSettingStore.toggleCollapsed()"
+    :class="[
+      'vben-grid-layout__toggle-button',
+      { 'toggle-button--center': !isMixSidebar },
+      { 'toggle-button--bottom': isMixSidebar },
+    ]"
+  >
+    <VbenIconify
+      v-if="isMixSidebar"
+      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
+      color="rgba(255, 255, 255, .65)"
+      hover-color="rgba(255, 255, 255, 1)"
+      icon="ph:caret-double-left-bold"
+    />
+    <VbenIconify
+      v-else
+      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
+      icon="ph:caret-left-bold"
+      color="var(--layout-toggle-button-icon-color)"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+.vben-grid-layout__toggle-button {
+  transition: color 0.3s var(--transition-bezier),
+    width 0.3s var(--transition-bezier), height 0.3s var(--transition-bezier),
+    right 0.3s var(--transition-bezier), left 0.3s var(--transition-bezier),
+    bottom 0.3s var(--transition-bezier),
+    transform 0.3s var(--transition-bezier),
+    border-color 0.3s var(--transition-bezier),
+    background-color 0.3s var(--transition-bezier);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  //color: var(--layout-toggle-button-icon-color);
+  z-index: 1;
+  &.toggle-button--center {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    border-radius: 50%;
+    transform: translateX(50%) translateY(-50%);
+    border: var(--layout-toggle-button-border);
+    background-color: var(--layout-toggle-button-color);
+    box-shadow: 0 2px 4px 0px rgb(0 0 0 / 6%);
+  }
+  &.toggle-button--bottom {
+    width: 100%;
+    height: 36px;
+    position: absolute;
+    background-color: #3b3b3b;
+    bottom: 0;
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrgger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrgger.vue
new file mode 100644
index 00000000..8a7cf934
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/HeaderTrgger.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup>
+</script>
+<template>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue b/packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue
new file mode 100644
index 00000000..8a7cf934
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup>
+</script>
+<template>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue b/packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue
new file mode 100644
index 00000000..8a7cf934
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup>
+</script>
+<template>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/inedx.vue b/packages/grid-layouts/src/components/trigger/inedx.vue
new file mode 100644
index 00000000..8a7cf934
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/inedx.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup>
+</script>
+<template>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/hooks/useComprehensive.ts b/packages/grid-layouts/src/hooks/useComprehensive.ts
new file mode 100644
index 00000000..1d9092fb
--- /dev/null
+++ b/packages/grid-layouts/src/hooks/useComprehensive.ts
@@ -0,0 +1,22 @@
+import { useMenuSettingStore } from '../store/modules/menuSetting'
+import { computed } from 'vue'
+
+export const useComprehensive = () => {
+  const menuSettingStore = useMenuSettingStore()
+  const getLayoutStyles = computed(() => {
+    let asideWidth = menuSettingStore.width
+
+    if (menuSettingStore.isMixSidebar)
+      asideWidth = menuSettingStore.mixSidebarWidth
+    if (menuSettingStore.collapsed) asideWidth = menuSettingStore.collapsedWidth
+    if (menuSettingStore.isTopMenu) asideWidth = 0
+
+    return {
+      '--aside-width': asideWidth + 'px',
+      '--aside-visible': menuSettingStore.visible ? 'visible' : 'hidden',
+    }
+  })
+  return {
+    getLayoutStyles,
+  }
+}
diff --git a/packages/grid-layouts/src/store/index.ts b/packages/grid-layouts/src/store/index.ts
index c1e8ede9..efd93591 100644
--- a/packages/grid-layouts/src/store/index.ts
+++ b/packages/grid-layouts/src/store/index.ts
@@ -8,4 +8,5 @@ export {
   useLayoutFooter,
   useLayoutSidebar,
   useLayoutTab,
+  useLayoutContent,
 } from './modules/layoutComposables'
diff --git a/packages/grid-layouts/src/store/modules/layoutComposables.ts b/packages/grid-layouts/src/store/modules/layoutComposables.ts
index c629f3b7..7b4daed7 100644
--- a/packages/grid-layouts/src/store/modules/layoutComposables.ts
+++ b/packages/grid-layouts/src/store/modules/layoutComposables.ts
@@ -39,6 +39,19 @@ export const useLayoutTab = defineStore('LAYOUT_TAB', () => {
   }
 })
 
+export const useLayoutContent = defineStore('LAYOUT_FOOTER', () => {
+  const contentRef = ref<HTMLElement>()
+
+  const { height: contentHeight, width: contentWidth } =
+    useElementSize(contentRef)
+
+  return {
+    contentRef,
+    contentHeight,
+    contentWidth,
+  }
+})
+
 export const useLayoutFooter = defineStore('LAYOUT_FOOTER', () => {
   const footerRef = ref<HTMLElement>()
 
diff --git a/packages/grid-layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
index bd6bdc80..888458c8 100644
--- a/packages/grid-layouts/src/store/modules/menuSetting.ts
+++ b/packages/grid-layouts/src/store/modules/menuSetting.ts
@@ -1,12 +1,12 @@
 import { defineStore } from '@vben/pinia'
 import { MenuSetting } from '@vben/types'
 import {
-  ThemeEnum,
-  SIDE_BAR_BG_COLOR_LIST,
   MenuModeEnum,
   MenuTypeEnum,
-  TriggerEnum,
   MixSidebarTriggerEnum,
+  SIDE_BAR_BG_COLOR_LIST,
+  ThemeEnum,
+  TriggerEnum,
 } from '@vben/constants'
 
 export const useMenuSettingStore = defineStore({
@@ -50,10 +50,15 @@ export const useMenuSettingStore = defineStore({
     mixSideTrigger: MixSidebarTriggerEnum.CLICK,
     // Fixed expanded menu
     mixSideFixed: false,
+    // Whether to visible dom
+    visible: true,
+    width: 210,
+    mixSidebarWidth: 80,
+    collapsedWidth: 48,
   }),
   getters: {
-    isSidebarType: (state) => state.type === MenuTypeEnum.SIDEBAR,
-    isTopMenu: (state) => state.type === MenuTypeEnum.SIDEBAR,
+    isSidebar: (state) => state.type === MenuTypeEnum.SIDEBAR,
+    isTopMenu: (state) => state.type === MenuTypeEnum.TOP_MENU,
     isMixSidebar: (state) => state.type === MenuTypeEnum.MIX_SIDEBAR,
     isMixMode: (state) =>
       state.mode === MenuModeEnum.INLINE && state.type === MenuTypeEnum.MIX,
@@ -117,6 +122,7 @@ export const useMenuSettingStore = defineStore({
       this.mode = value
     },
     setType(value: MenuTypeEnum) {
+      this.setVisible(value !== MenuTypeEnum.TOP_MENU)
       this.type = value
     },
     setTheme(value: ThemeEnum) {
@@ -143,6 +149,9 @@ export const useMenuSettingStore = defineStore({
     setMixSideFixed(value: boolean) {
       this.mixSideFixed = value
     },
+    setVisible(value: boolean) {
+      this.visible = value
+    },
     toggleCollapsed() {
       this.setCollapsed(!this.collapsed)
     },
diff --git a/packages/styles/src/grid-layout.scss b/packages/styles/src/grid-layout.scss
index 14e76125..e2ad5450 100644
--- a/packages/styles/src/grid-layout.scss
+++ b/packages/styles/src/grid-layout.scss
@@ -1,9 +1,16 @@
 .vben-grid-layout-container {
   display: grid;
-  grid-template-columns: var(--aside-width) 1fr;
+  grid-template-columns: minmax(0, var(--aside-width)) minmax(640px, 1fr);
   grid-template-rows: var(--header-height) var(--tab-height) 1fr;
-
-  &.layout-sidebar, &.layout-mix-sidebar {
+  grid-gap: 3px;
+  transition: grid-template-columns .3s, grid-template-rows .3s;
+  transition-timing-function: var(--transition-bezier);
+  &,
+  * {
+    box-sizing: border-box;
+  }
+  &.layout-sidebar,
+  &.layout-mix-sidebar {
     grid-template-areas:
       'vben-sidebar vben-header'
       'vben-sidebar vben-tab'
@@ -14,7 +21,8 @@
     --aside-width: 80px;
   }
 
-  &.layout-mix, &.layout-top-menu {
+  &.layout-mix,
+  &.layout-top-menu {
     grid-template-areas:
       'vben-header vben-header'
       'vben-sidebar vben-tab'
@@ -25,13 +33,6 @@
     --aside-width: 0;
   }
 
-  .vben-grid-layout-header, .vben-grid-layout-sidebar,
-  .vben-grid-layout-tab, .vben-grid-layout-content,
-  .vben-grid-layout-main, .vben-grid-layout-footer{
-    transition:  grid-template-rows 3s, grid-template-columns 3s, grid-template-areas 3s;
-    //-webkit-transition: all 30s;
-  }
-
   .vben-grid-layout-header {
     grid-area: vben-header;
     background: #666666;
@@ -39,7 +40,19 @@
 
   .vben-grid-layout-sidebar {
     grid-area: vben-sidebar;
-    background: #18a058;
+    position: relative;
+    visibility: var(--aside-visible);
+
+    .vben-grid-layout-sidebar__border {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: 1px;
+      background-color: var(--layout-border-color);
+      transition: background-color 0.3s var(--transition-bezier);
+    }
   }
 
   .vben-grid-layout-tab {
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index 0e98ccc0..0adfc84c 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -7,6 +7,18 @@
   /* component */
   --component-background-color: #fff;
 
+  /* transition */
+  --transition-bezier:cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-all: all 0.3s var(--transition-bezier);
+
+  /* layout start */
+
+  --layout-border-color: rgb(239, 239, 245);
+  --layout-color: #fff;
+  --layout-text-color: rgb(51, 54, 57);
+  --layout-border-color: rgb(239, 239, 245);
+  --layout-toggle-button-icon-color: rgb(51, 54, 57);
+
   /* header */
   --header-height: 48px;
   --header-width: calc(100% - var(--aside-width));
@@ -18,9 +30,16 @@
   /* aside */
   --aside-height: calc(100% - var(--header-height));
   --aside-width: 210px;
+  --aside-visible: visible;
   --aside-background-color: #001628;
   --aside-submenu-background-color: #0c2135;
 
+
+  --layout-toggle-button-color: #FFF;
+  --layout-toggle-button-border: 1px solid rgb(239, 239, 245);
+  --layout-toggle-bar-color: rgba(191, 191, 191, 1);
+  --layout-toggle-bar-color-hover: rgba(153, 153, 153, 1);
+
   /* main */
   --main-height: calc(100% - var(--footer-height));
   --main-width: 100%;
@@ -28,6 +47,8 @@
   /* footer */
   --footer-height: 60px;
   --footer-width: 100%;
+
+  /* layout end */
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/packages/types/src/setting.ts b/packages/types/src/setting.ts
index b85aa002..ea06e055 100644
--- a/packages/types/src/setting.ts
+++ b/packages/types/src/setting.ts
@@ -33,6 +33,10 @@ export interface MenuSetting {
   collapsedShowTitle: boolean
   mixSideTrigger: MixSidebarTriggerEnum
   mixSideFixed: boolean
+  visible: boolean
+  readonly width: number
+  readonly mixSidebarWidth: number
+  readonly collapsedWidth: number
 }
 
 export interface MultiTabsSetting {
diff --git a/packages/vbenComponents/src/iconify/src/Iconify.vue b/packages/vbenComponents/src/iconify/src/Iconify.vue
index e901d333..607a8b9f 100644
--- a/packages/vbenComponents/src/iconify/src/Iconify.vue
+++ b/packages/vbenComponents/src/iconify/src/Iconify.vue
@@ -87,7 +87,7 @@ onMounted(update)
 <style lang="less" scoped>
 .iconify {
   display: inline-block;
-  transition: color 0.5s;
+  transition: color 0.3s, transform .3s;
   &:hover{
     color: v-bind(hoverColor) !important;
   }

From 8f89af4299a2b9fe731fe94abc95a71fa6add4d3 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Fri, 3 Feb 2023 23:25:28 +0800
Subject: [PATCH 08/22] =?UTF-8?q?feat:=20grid-layout=20Trigger=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 configs/vite/src/plugins/unocss.ts            |  1 +
 packages/grid-layouts/src/components/Main.vue |  8 +--
 .../components/composables/LayoutHeader.vue   | 14 +++-
 .../components/composables/LayoutSidebar.vue  | 14 ++--
 .../src/components/sidebar/ToggleButton.vue   | 67 -------------------
 .../src/components/trigger/HeaderTrgger.vue   |  5 --
 .../src/components/trigger/HeaderTrigger.vue  | 19 ++++++
 .../components/trigger/SiderCenterTrgger.vue  |  5 --
 .../components/trigger/SiderCenterTrigger.vue | 37 ++++++++++
 .../components/trigger/SiderFooterTrgger.vue  |  5 --
 .../components/trigger/SiderFooterTrigger.vue | 20 ++++++
 .../src/components/trigger/inedx.vue          | 16 ++++-
 .../src/hooks/useComprehensive.ts             |  2 +-
 .../src/store/modules/menuSetting.ts          | 10 +--
 packages/styles/src/common.css                |  3 +
 packages/styles/src/grid-layout.scss          |  5 +-
 packages/styles/src/variables.css             |  8 +--
 packages/types/src/setting.ts                 |  1 -
 18 files changed, 128 insertions(+), 112 deletions(-)
 delete mode 100644 packages/grid-layouts/src/components/sidebar/ToggleButton.vue
 delete mode 100644 packages/grid-layouts/src/components/trigger/HeaderTrgger.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
 delete mode 100644 packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
 delete mode 100644 packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue
 create mode 100644 packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue

diff --git a/configs/vite/src/plugins/unocss.ts b/configs/vite/src/plugins/unocss.ts
index 6a534e6f..2b6dd01e 100644
--- a/configs/vite/src/plugins/unocss.ts
+++ b/configs/vite/src/plugins/unocss.ts
@@ -11,6 +11,7 @@ export function configUnocssPlugin() {
     presets: [presetIcons(), presetMini({ dark: 'class' })],
     shortcuts: {
       'flex-center': 'flex justify-center items-center',
+      'grid-center': 'grid place-content-center',
     },
     theme: {
       colors: {
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index be29974c..5f91678c 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import {
-  useLayoutHeader,
-  useMenuSettingStore
-} from '../store'
+import { useLayoutHeader, useMenuSettingStore } from '../store'
 import { storeToRefs } from '@vben/pinia'
 import { MenuTypeEnum } from '@vben/constants'
-import {useComprehensive} from "../hooks/useComprehensive";
+import { useComprehensive } from '../hooks/useComprehensive'
 
 const menuSettingStore = useMenuSettingStore()
 const { type } = storeToRefs(menuSettingStore)
@@ -24,7 +21,6 @@ const handlerChange = (value) => {
 const { headerWidth, headerHeight } = storeToRefs(useLayoutHeader())
 
 const { getLayoutStyles } = useComprehensive()
-
 </script>
 <template>
   <main class="vben-grid-layout-main">
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index 3c4cde09..244dacda 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -1,5 +1,15 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import Trigger from '../trigger/inedx.vue'
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+const menuSettingStore = useMenuSettingStore()
+const { showHeaderTrigger } = storeToRefs(menuSettingStore)
+
+</script>
 <template>
-  <header class="vben-grid-layout-header">header</header>
+  <header class="vben-grid-layout-header">
+    <Trigger v-if="showHeaderTrigger" />
+    header
+  </header>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index a5e88cf8..ac5accaa 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -1,13 +1,19 @@
 <script lang="ts" setup>
-import ToggleButton from '../sidebar/ToggleButton.vue'
-
+import Trigger from '../trigger/inedx.vue'
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+const menuSettingStore = useMenuSettingStore()
+const { showHeaderTrigger, showFooterTrigger } = storeToRefs(menuSettingStore)
 </script>
 <template>
-  <div class="vben-grid-layout-sidebar">
+  <div
+    class="vben-grid-layout-sidebar"
+    :class="[{ 'pb-40px': showFooterTrigger }]"
+  >
     <!--    <div class="vben-grid-layout-sidebar__container"></div>-->
     <div>sidebar</div>
-    <ToggleButton />
     <div class="vben-grid-layout-sidebar__border"></div>
+    <Trigger v-if="!showHeaderTrigger" />
   </div>
 </template>
 <style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/sidebar/ToggleButton.vue b/packages/grid-layouts/src/components/sidebar/ToggleButton.vue
deleted file mode 100644
index a926c04b..00000000
--- a/packages/grid-layouts/src/components/sidebar/ToggleButton.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts" setup>
-import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
-
-const menuSettingStore = useMenuSettingStore()
-const { isMixSidebar, collapsed } = storeToRefs(menuSettingStore)
-</script>
-<template>
-  <div
-    @click="menuSettingStore.toggleCollapsed()"
-    :class="[
-      'vben-grid-layout__toggle-button',
-      { 'toggle-button--center': !isMixSidebar },
-      { 'toggle-button--bottom': isMixSidebar },
-    ]"
-  >
-    <VbenIconify
-      v-if="isMixSidebar"
-      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
-      color="rgba(255, 255, 255, .65)"
-      hover-color="rgba(255, 255, 255, 1)"
-      icon="ph:caret-double-left-bold"
-    />
-    <VbenIconify
-      v-else
-      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
-      icon="ph:caret-left-bold"
-      color="var(--layout-toggle-button-icon-color)"
-    />
-  </div>
-</template>
-<style lang="scss" scoped>
-.vben-grid-layout__toggle-button {
-  transition: color 0.3s var(--transition-bezier),
-    width 0.3s var(--transition-bezier), height 0.3s var(--transition-bezier),
-    right 0.3s var(--transition-bezier), left 0.3s var(--transition-bezier),
-    bottom 0.3s var(--transition-bezier),
-    transform 0.3s var(--transition-bezier),
-    border-color 0.3s var(--transition-bezier),
-    background-color 0.3s var(--transition-bezier);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  //color: var(--layout-toggle-button-icon-color);
-  z-index: 1;
-  &.toggle-button--center {
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    border-radius: 50%;
-    transform: translateX(50%) translateY(-50%);
-    border: var(--layout-toggle-button-border);
-    background-color: var(--layout-toggle-button-color);
-    box-shadow: 0 2px 4px 0px rgb(0 0 0 / 6%);
-  }
-  &.toggle-button--bottom {
-    width: 100%;
-    height: 36px;
-    position: absolute;
-    background-color: #3b3b3b;
-    bottom: 0;
-  }
-}
-</style>
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrgger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrgger.vue
deleted file mode 100644
index 8a7cf934..00000000
--- a/packages/grid-layouts/src/components/trigger/HeaderTrgger.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts" setup>
-</script>
-<template>
-</template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
new file mode 100644
index 00000000..07f02835
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const menuSettingStore = useMenuSettingStore()
+const { collapsed } = storeToRefs(menuSettingStore)
+</script>
+<template>
+  <div
+    class="h-full w-48px grid-center cursor-pointer bg-[var(--trigger-color)]"
+    @click.stop="menuSettingStore.toggleCollapsed()"
+  >
+    <VbenIconify
+      color="var(--trigger-icon-color)"
+      size="22"
+      :icon="collapsed ? 'line-md:menu-fold-right' : 'line-md:menu-fold-left'"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue b/packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue
deleted file mode 100644
index 8a7cf934..00000000
--- a/packages/grid-layouts/src/components/trigger/SiderCenterTrgger.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts" setup>
-</script>
-<template>
-</template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
new file mode 100644
index 00000000..1b9201c1
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const menuSettingStore = useMenuSettingStore()
+const { collapsed } = storeToRefs(menuSettingStore)
+</script>
+<template>
+  <div
+    class="h-24px w-24px cursor-pointer grid-center absolute top-1/2 right-0 z-1 rounded-1/2 translate-1/2 border border-[var(--trigger-border-color)] bg-[var(--trigger-color)] shadow shadow-color-[rgb(0 0 0 / 6%)]"
+    @click.stop="menuSettingStore.toggleCollapsed()"
+  >
+    <VbenIconify
+      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
+      icon="ph:caret-left-bold"
+      color="var(--trigger-icon-color)"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+.trigger-container {
+  cursor: pointer;
+  display: grid;
+  place-content: center;
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  border-radius: 50%;
+  transform: translateX(50%) translateY(-50%);
+  border: var(--trigger-border);
+  background-color: var(--trigger-color);
+  box-shadow: 0 2px 4px 0px rgb(0 0 0 / 6%);
+}
+</style>
diff --git a/packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue b/packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue
deleted file mode 100644
index 8a7cf934..00000000
--- a/packages/grid-layouts/src/components/trigger/SiderFooterTrgger.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts" setup>
-</script>
-<template>
-</template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue b/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
new file mode 100644
index 00000000..55362d80
--- /dev/null
+++ b/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const menuSettingStore = useMenuSettingStore()
+const { collapsed } = storeToRefs(menuSettingStore)
+</script>
+<template>
+  <div
+    class="h-36px w-full absolute bottom-0 cursor-pointer grid-center bg-[#3b3b3b]"
+    @click.stop="menuSettingStore.toggleCollapsed()"
+  >
+    <VbenIconify
+      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
+      color="rgba(255, 255, 255, .65)"
+      hover-color="rgba(255, 255, 255, 1)"
+      icon="ph:caret-double-left-bold"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/trigger/inedx.vue b/packages/grid-layouts/src/components/trigger/inedx.vue
index 8a7cf934..b6d6ac23 100644
--- a/packages/grid-layouts/src/components/trigger/inedx.vue
+++ b/packages/grid-layouts/src/components/trigger/inedx.vue
@@ -1,5 +1,19 @@
 <script lang="ts" setup>
+import { useMenuSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+import { TriggerEnum } from '@vben/constants'
+import CenterTrigger from './SiderCenterTrigger.vue'
+import FooterTrigger from './SiderFooterTrigger.vue'
+import HeaderTrigger from './HeaderTrigger.vue'
+const { trigger } = storeToRefs(useMenuSettingStore())
+const triggers = {
+  [TriggerEnum.HEADER]: HeaderTrigger,
+  [TriggerEnum.CENTER]: CenterTrigger,
+  [TriggerEnum.FOOTER]: FooterTrigger,
+}
 </script>
 <template>
+  <Transition name="trigger" mode="out-in">
+    <component :is="triggers[trigger]" />
+  </Transition>
 </template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/hooks/useComprehensive.ts b/packages/grid-layouts/src/hooks/useComprehensive.ts
index 1d9092fb..eb5e910e 100644
--- a/packages/grid-layouts/src/hooks/useComprehensive.ts
+++ b/packages/grid-layouts/src/hooks/useComprehensive.ts
@@ -13,7 +13,7 @@ export const useComprehensive = () => {
 
     return {
       '--aside-width': asideWidth + 'px',
-      '--aside-visible': menuSettingStore.visible ? 'visible' : 'hidden',
+      '--aside-visible': menuSettingStore.hidden ? 'hidden' : 'visible',
     }
   })
   return {
diff --git a/packages/grid-layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
index 888458c8..aafd112f 100644
--- a/packages/grid-layouts/src/store/modules/menuSetting.ts
+++ b/packages/grid-layouts/src/store/modules/menuSetting.ts
@@ -41,7 +41,7 @@ export const useMenuSettingStore = defineStore({
     // Top menu layout
     topMenuAlign: 'center',
     // Fold trigger position
-    trigger: TriggerEnum.HEADER,
+    trigger: TriggerEnum.CENTER,
     // Turn on accordion mode, only show a menu
     accordion: true,
     // Switch page to close menu
@@ -50,8 +50,6 @@ export const useMenuSettingStore = defineStore({
     mixSideTrigger: MixSidebarTriggerEnum.CLICK,
     // Fixed expanded menu
     mixSideFixed: false,
-    // Whether to visible dom
-    visible: true,
     width: 210,
     mixSidebarWidth: 80,
     collapsedWidth: 48,
@@ -71,6 +69,7 @@ export const useMenuSettingStore = defineStore({
         return false
       return state.trigger === TriggerEnum.HEADER
     },
+    showFooterTrigger: (state) => state.trigger === TriggerEnum.FOOTER,
     isHorizontal: (state) => state.mode === MenuModeEnum.HORIZONTAL,
     // TODO
     ShowSidebar: (state) => {
@@ -122,7 +121,7 @@ export const useMenuSettingStore = defineStore({
       this.mode = value
     },
     setType(value: MenuTypeEnum) {
-      this.setVisible(value !== MenuTypeEnum.TOP_MENU)
+      this.setHidden(value === MenuTypeEnum.TOP_MENU)
       this.type = value
     },
     setTheme(value: ThemeEnum) {
@@ -149,9 +148,6 @@ export const useMenuSettingStore = defineStore({
     setMixSideFixed(value: boolean) {
       this.mixSideFixed = value
     },
-    setVisible(value: boolean) {
-      this.visible = value
-    },
     toggleCollapsed() {
       this.setCollapsed(!this.collapsed)
     },
diff --git a/packages/styles/src/common.css b/packages/styles/src/common.css
index fca86706..62ab6c4f 100644
--- a/packages/styles/src/common.css
+++ b/packages/styles/src/common.css
@@ -10,6 +10,9 @@ body {
   overflow: visible !important;
   overflow-x: hidden !important;
 }
+*{
+  box-sizing: border-box;
+}
 
 a:focus,
 a:active,
diff --git a/packages/styles/src/grid-layout.scss b/packages/styles/src/grid-layout.scss
index e2ad5450..1315693d 100644
--- a/packages/styles/src/grid-layout.scss
+++ b/packages/styles/src/grid-layout.scss
@@ -5,10 +5,7 @@
   grid-gap: 3px;
   transition: grid-template-columns .3s, grid-template-rows .3s;
   transition-timing-function: var(--transition-bezier);
-  &,
-  * {
-    box-sizing: border-box;
-  }
+
   &.layout-sidebar,
   &.layout-mix-sidebar {
     grid-template-areas:
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index 0adfc84c..573cab1e 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -35,10 +35,10 @@
   --aside-submenu-background-color: #0c2135;
 
 
-  --layout-toggle-button-color: #FFF;
-  --layout-toggle-button-border: 1px solid rgb(239, 239, 245);
-  --layout-toggle-bar-color: rgba(191, 191, 191, 1);
-  --layout-toggle-bar-color-hover: rgba(153, 153, 153, 1);
+  --trigger-color: #FFF;
+  --trigger-border: 1px solid rgb(239, 239, 245);
+--trigger-border-color: rgb(239, 239, 245);
+  --trigger-icon-color: rgb(51, 54, 57);
 
   /* main */
   --main-height: calc(100% - var(--footer-height));
diff --git a/packages/types/src/setting.ts b/packages/types/src/setting.ts
index ea06e055..cf4717da 100644
--- a/packages/types/src/setting.ts
+++ b/packages/types/src/setting.ts
@@ -33,7 +33,6 @@ export interface MenuSetting {
   collapsedShowTitle: boolean
   mixSideTrigger: MixSidebarTriggerEnum
   mixSideFixed: boolean
-  visible: boolean
   readonly width: number
   readonly mixSidebarWidth: number
   readonly collapsedWidth: number

From 61cb39549c34210980414e97657f2c6bd8d705bf Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Sat, 4 Feb 2023 13:58:35 +0800
Subject: [PATCH 09/22] =?UTF-8?q?perf:=20grid-layout=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grid-layouts/src/components/Layout.vue    | 31 +++++++-
 .../components/composables/LayoutContent.vue  | 10 ++-
 .../components/composables/LayoutFooter.vue   |  5 +-
 .../components/composables/LayoutHeader.vue   |  3 +-
 .../components/composables/LayoutSidebar.vue  | 15 ++--
 .../src/components/composables/LayoutTab.vue  |  3 +-
 .../components/trigger/SiderCenterTrigger.vue | 18 -----
 .../src/hooks/useComprehensive.ts             |  1 -
 packages/styles/src/grid-layout.scss          | 77 -------------------
 packages/styles/src/index.ts                  |  1 -
 packages/styles/src/variables.css             | 10 +--
 11 files changed, 55 insertions(+), 119 deletions(-)
 delete mode 100644 packages/styles/src/grid-layout.scss

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index bacc8e93..d24a65e4 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -3,6 +3,7 @@ import LayoutHeader from './composables/LayoutHeader.vue'
 import LayoutSidebar from './composables/LayoutSidebar.vue'
 import LayoutContent from './composables/LayoutContent.vue'
 import LayoutTab from './composables/LayoutTab.vue'
+import Feature from './feature/index.vue'
 import { storeToRefs } from '@vben/pinia'
 import {
   useLayoutHeader,
@@ -23,14 +24,38 @@ const { type } = storeToRefs(useMenuSettingStore())
 </script>
 <template>
   <section
-    class="vben-grid-layout-container h-full w-full"
-    :class="[`layout-${type}`]"
+    class="grid-layout-container h-full w-full"
+    :class="[`${type}`]"
     :style="getLayoutStyles"
   >
+    <Feature />
     <LayoutHeader ref="headerRef" />
     <LayoutSidebar ref="sidebarRef" />
     <LayoutTab ref="tabRef" />
     <LayoutContent ref="contentRef" />
   </section>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.grid-layout-container {
+  display: grid;
+  grid-template-columns: minmax(0, var(--aside-width)) minmax(640px, 1fr);
+  grid-template-rows: var(--header-height) var(--tab-height) 1fr;
+  grid-gap: 3px;
+  transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
+  transition-timing-function: var(--transition-bezier);
+  &.sidebar,
+  &.mix-sidebar {
+    grid-template-areas:
+      'grid-sidebar grid-header'
+      'grid-sidebar grid-tab-nav'
+      'grid-sidebar grid-content';
+  }
+  &.mix,
+  &.top-menu {
+    grid-template-areas:
+      'grid-header grid-header'
+      'grid-sidebar grid-tab-nav'
+      'grid-sidebar grid-content';
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
index 2d884d27..eba0af6b 100644
--- a/packages/grid-layouts/src/components/composables/LayoutContent.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -6,9 +6,15 @@ import { storeToRefs } from '@vben/pinia'
 const { footerRef } = storeToRefs(useLayoutFooter())
 </script>
 <template>
-  <div class="vben-grid-layout-content">
+  <div class="grid-layout-content grid-area-[grid-content] grid">
     <Main />
     <LayoutFooter ref="footerRef" />
   </div>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss">
+.grid-layout-content{
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr minmax(0, var(--footer-height));
+  background: #ed6f6f;
+}
+</style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index 0603d6ba..c0ad3d1c 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup></script>
 <template>
-  <footer class="vben-grid-layout-footer">footer</footer>
+  <footer class="bg-[blueviolet]">
+    footer
+  </footer>
 </template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index 244dacda..0f83b039 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -7,9 +7,8 @@ const { showHeaderTrigger } = storeToRefs(menuSettingStore)
 
 </script>
 <template>
-  <header class="vben-grid-layout-header">
+  <header class="grid-area-[grid-header] bg-[#666666]">
     <Trigger v-if="showHeaderTrigger" />
     header
   </header>
 </template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index ac5accaa..f2030250 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -3,17 +3,22 @@ import Trigger from '../trigger/inedx.vue'
 import { useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
 const menuSettingStore = useMenuSettingStore()
-const { showHeaderTrigger, showFooterTrigger } = storeToRefs(menuSettingStore)
+const { showHeaderTrigger, showFooterTrigger, hidden } =
+  storeToRefs(menuSettingStore)
 </script>
 <template>
   <div
-    class="vben-grid-layout-sidebar"
-    :class="[{ 'pb-40px': showFooterTrigger }]"
+    class="grid-area-[grid-sidebar] relative"
+    :class="[
+      { 'pb-40px': showFooterTrigger },
+      hidden ? 'invisible' : 'visible',
+    ]"
   >
     <!--    <div class="vben-grid-layout-sidebar__container"></div>-->
     <div>sidebar</div>
-    <div class="vben-grid-layout-sidebar__border"></div>
+    <div
+      class="h-full w-1px content-none absolute top-0 bottom-0 right-0 bg-[var(--layout-border-color)] transition-colors-3000"
+    ></div>
     <Trigger v-if="!showHeaderTrigger" />
   </div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
index d56609ca..8a7848f6 100644
--- a/packages/grid-layouts/src/components/composables/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup></script>
 <template>
-  <div class="vben-grid-layout-tab">tab</div>
+  <div class="grid-area-[grid-tab-nav] bg-[#0960bd]">tab</div>
 </template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
index 1b9201c1..8d50a413 100644
--- a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
@@ -17,21 +17,3 @@ const { collapsed } = storeToRefs(menuSettingStore)
     />
   </div>
 </template>
-<style lang="scss" scoped>
-.trigger-container {
-  cursor: pointer;
-  display: grid;
-  place-content: center;
-  z-index: 1;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  border-radius: 50%;
-  transform: translateX(50%) translateY(-50%);
-  border: var(--trigger-border);
-  background-color: var(--trigger-color);
-  box-shadow: 0 2px 4px 0px rgb(0 0 0 / 6%);
-}
-</style>
diff --git a/packages/grid-layouts/src/hooks/useComprehensive.ts b/packages/grid-layouts/src/hooks/useComprehensive.ts
index eb5e910e..752072a6 100644
--- a/packages/grid-layouts/src/hooks/useComprehensive.ts
+++ b/packages/grid-layouts/src/hooks/useComprehensive.ts
@@ -13,7 +13,6 @@ export const useComprehensive = () => {
 
     return {
       '--aside-width': asideWidth + 'px',
-      '--aside-visible': menuSettingStore.hidden ? 'hidden' : 'visible',
     }
   })
   return {
diff --git a/packages/styles/src/grid-layout.scss b/packages/styles/src/grid-layout.scss
deleted file mode 100644
index 1315693d..00000000
--- a/packages/styles/src/grid-layout.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.vben-grid-layout-container {
-  display: grid;
-  grid-template-columns: minmax(0, var(--aside-width)) minmax(640px, 1fr);
-  grid-template-rows: var(--header-height) var(--tab-height) 1fr;
-  grid-gap: 3px;
-  transition: grid-template-columns .3s, grid-template-rows .3s;
-  transition-timing-function: var(--transition-bezier);
-
-  &.layout-sidebar,
-  &.layout-mix-sidebar {
-    grid-template-areas:
-      'vben-sidebar vben-header'
-      'vben-sidebar vben-tab'
-      'vben-sidebar vben-content';
-  }
-
-  &.layout-mix-sidebar {
-    --aside-width: 80px;
-  }
-
-  &.layout-mix,
-  &.layout-top-menu {
-    grid-template-areas:
-      'vben-header vben-header'
-      'vben-sidebar vben-tab'
-      'vben-sidebar vben-content';
-  }
-
-  &.layout-top-menu {
-    --aside-width: 0;
-  }
-
-  .vben-grid-layout-header {
-    grid-area: vben-header;
-    background: #666666;
-  }
-
-  .vben-grid-layout-sidebar {
-    grid-area: vben-sidebar;
-    position: relative;
-    visibility: var(--aside-visible);
-
-    .vben-grid-layout-sidebar__border {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      width: 1px;
-      background-color: var(--layout-border-color);
-      transition: background-color 0.3s var(--transition-bezier);
-    }
-  }
-
-  .vben-grid-layout-tab {
-    grid-area: vben-tab;
-    background: #0960bd;
-  }
-
-  .vben-grid-layout-content {
-    grid-area: vben-content;
-    overflow: auto;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 1fr minmax(0, var(--footer-height));
-
-    background: #ed6f6f;
-  }
-
-  .vben-grid-layout-main {
-    background-color: aqua;
-  }
-
-  .vben-grid-layout-footer {
-    background-color: blueviolet;
-  }
-}
diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts
index ef796296..f705f866 100644
--- a/packages/styles/src/index.ts
+++ b/packages/styles/src/index.ts
@@ -1,5 +1,4 @@
 import './common.css'
 import './entry.css'
 import './variables.css'
-import './grid-layout.scss'
 import 'uno.css'
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index 573cab1e..a2101bfc 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -8,7 +8,7 @@
   --component-background-color: #fff;
 
   /* transition */
-  --transition-bezier:cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-all: all 0.3s var(--transition-bezier);
 
   /* layout start */
@@ -26,18 +26,16 @@
   /* tab */
   --tab-height: 36px;
   --tab-width: calc(100% - var(--aside-width));
-  
+
   /* aside */
   --aside-height: calc(100% - var(--header-height));
   --aside-width: 210px;
-  --aside-visible: visible;
   --aside-background-color: #001628;
   --aside-submenu-background-color: #0c2135;
 
-
-  --trigger-color: #FFF;
+  --trigger-color: #fff;
   --trigger-border: 1px solid rgb(239, 239, 245);
---trigger-border-color: rgb(239, 239, 245);
+  --trigger-border-color: rgb(239, 239, 245);
   --trigger-icon-color: rgb(51, 54, 57);
 
   /* main */

From 0110a1564aa9798a89e00dc639280a9019ed8028 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Sat, 4 Feb 2023 23:14:15 +0800
Subject: [PATCH 10/22] =?UTF-8?q?feat:=20grid-layout=20setting=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grid-layouts/src/components/Layout.vue    |   2 +-
 .../components/composables/LayoutContent.vue  |   2 +-
 .../components/composables/LayoutFooter.vue   |   4 +-
 .../components/composables/LayoutHeader.vue   |  23 ++-
 .../src/components/feature/index.vue          |   8 +
 .../src/components/setting/FixedButton.vue    |  15 ++
 .../src/components/setting/SettingDrawer.vue  | 120 ++++++++++++
 .../components/setting/components/Content.vue | 128 ++++++++++++
 .../setting/components/DarkModeToggle.vue     |  26 +++
 .../setting/components/Features.vue           | 164 ++++++++++++++++
 .../setting/components/FooterButtons.vue      |  74 +++++++
 .../setting/components/InputNumberItem.vue    |  39 ++++
 .../components/NavigationBarPicker.vue        | 108 ++++++++++
 .../setting/components/SelectItem.vue         |  48 +++++
 .../setting/components/SettingDrawer.vue      | 103 ++++++++++
 .../setting/components/SwitchItem.vue         |  34 ++++
 .../setting/components/ThemeColorPicker.vue   |  53 +++++
 .../setting/components/Transitions.vue        |  41 ++++
 .../src/components/setting/index.vue          |  15 ++
 .../src/components/trigger/HeaderTrigger.vue  |   2 +-
 packages/grid-layouts/src/logics/constant.ts  | 112 +++++++++++
 packages/grid-layouts/src/logics/handler.ts   | 185 ++++++++++++++++++
 packages/grid-layouts/src/store/index.ts      |   2 +-
 .../src/store/modules/headerSetting.ts        |   4 +-
 .../src/store/modules/menuSetting.ts          |   1 +
 .../src/store/modules/sporadicSetting.ts      |  10 +-
 packages/locale/src/lang/en/layout.ts         |   1 +
 packages/locale/src/lang/zh-CN/layout.ts      |   1 +
 packages/styles/src/variables.css             |   1 +
 packages/types/src/setting.ts                 |   2 +
 packages/utils/index.ts                       |   1 +
 31 files changed, 1316 insertions(+), 13 deletions(-)
 create mode 100644 packages/grid-layouts/src/components/feature/index.vue
 create mode 100644 packages/grid-layouts/src/components/setting/FixedButton.vue
 create mode 100644 packages/grid-layouts/src/components/setting/SettingDrawer.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/Content.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/DarkModeToggle.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/Features.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/FooterButtons.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/InputNumberItem.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/NavigationBarPicker.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/SelectItem.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/SettingDrawer.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/SwitchItem.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue
 create mode 100644 packages/grid-layouts/src/components/setting/components/Transitions.vue
 create mode 100644 packages/grid-layouts/src/components/setting/index.vue
 create mode 100644 packages/grid-layouts/src/logics/constant.ts
 create mode 100644 packages/grid-layouts/src/logics/handler.ts

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index d24a65e4..d66554d0 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -28,11 +28,11 @@ const { type } = storeToRefs(useMenuSettingStore())
     :class="[`${type}`]"
     :style="getLayoutStyles"
   >
-    <Feature />
     <LayoutHeader ref="headerRef" />
     <LayoutSidebar ref="sidebarRef" />
     <LayoutTab ref="tabRef" />
     <LayoutContent ref="contentRef" />
+    <Feature />
   </section>
 </template>
 <style lang="scss">
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
index eba0af6b..5fb6e8a0 100644
--- a/packages/grid-layouts/src/components/composables/LayoutContent.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -12,7 +12,7 @@ const { footerRef } = storeToRefs(useLayoutFooter())
   </div>
 </template>
 <style lang="scss">
-.grid-layout-content{
+.grid-layout-content {
   grid-template-columns: 100%;
   grid-template-rows: 1fr minmax(0, var(--footer-height));
   background: #ed6f6f;
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index c0ad3d1c..26d3e2ab 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup></script>
 <template>
-  <footer class="bg-[blueviolet]">
-    footer
-  </footer>
+  <footer class="bg-[blueviolet]">footer</footer>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index 0f83b039..ffc5176b 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -2,13 +2,28 @@
 import Trigger from '../trigger/inedx.vue'
 import { useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
+import Setting from '../setting/index.vue'
 const menuSettingStore = useMenuSettingStore()
 const { showHeaderTrigger } = storeToRefs(menuSettingStore)
-
 </script>
 <template>
-  <header class="grid-area-[grid-header] bg-[#666666]">
-    <Trigger v-if="showHeaderTrigger" />
-    header
+  <header
+    class="grid-area-[grid-header] bg-[#666666] grid grid-cols-2 justify-between content-center"
+  >
+    <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3">
+      <Trigger v-if="showHeaderTrigger" />
+      left
+    </div>
+    <div class="h-[var(--header-height)] grid-col-[min-content]">
+      <Setting />
+    </div>
   </header>
 </template>
+<style lang="scss">
+.sd {
+  grid-template-columns: repeat(3, auto);
+  justify-content: space-between;
+  grid-column: 1 / 2;
+  grid-auto-columns: min-content;
+}
+</style>
diff --git a/packages/grid-layouts/src/components/feature/index.vue b/packages/grid-layouts/src/components/feature/index.vue
new file mode 100644
index 00000000..44b2c7a6
--- /dev/null
+++ b/packages/grid-layouts/src/components/feature/index.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import SettingFixedButton from '../setting/FixedButton.vue'
+import SettingDrawer from '../setting/SettingDrawer.vue'
+</script>
+<template>
+  <SettingFixedButton />
+  <SettingDrawer />
+</template>
diff --git a/packages/grid-layouts/src/components/setting/FixedButton.vue b/packages/grid-layouts/src/components/setting/FixedButton.vue
new file mode 100644
index 00000000..d1ec25f0
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/FixedButton.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useSporadicSettingStore } from '../../store'
+const sporadicSettingStore = useSporadicSettingStore()
+</script>
+<template>
+  <div
+    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
+    class="p-10px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[#0960bd] cursor-pointer"
+  >
+    <VbenIconify
+      size="22"
+      icon="material-symbols:settings-suggest-outline-rounded"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/SettingDrawer.vue b/packages/grid-layouts/src/components/setting/SettingDrawer.vue
new file mode 100644
index 00000000..b22dcf52
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/SettingDrawer.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useMultiTabsSettingStore,
+  useSporadicSettingStore,
+  useTransitionSettingStore,
+} from '../../store'
+import { storeToRefs } from '@vben/pinia'
+import { useI18n } from '@vben/locale'
+import { navigationBarTypeList } from '../../logics/constant'
+import { baseHandler } from '../../logics/handler'
+import {
+  HandlerSettingEnum,
+  APP_PRESET_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  SIDE_BAR_BG_COLOR_LIST,
+} from '@vben/constants'
+
+import DarkModeToggle from './components/DarkModeToggle.vue'
+import NavigationBarPicker from './components/NavigationBarPicker.vue'
+import ThemeColorPicker from './components/ThemeColorPicker.vue'
+import Features from './components/Features.vue'
+import Content from './components/Content.vue'
+import Transitions from './components/Transitions.vue'
+import FooterButtons from './components/FooterButtons.vue'
+
+const { t } = useI18n()
+const sporadicSettingStore = useSporadicSettingStore()
+const { showSettingDrawer, themeColor } = storeToRefs(sporadicSettingStore)
+const menuSettingStore = useMenuSettingStore()
+const {
+  type: navBarType,
+  isHorizontal,
+  bgColor: menuBgColor,
+} = storeToRefs(menuSettingStore)
+const headerSettingStore = useHeaderSettingStore()
+const { bgColor: headerBgColor } = storeToRefs(headerSettingStore)
+const multiTabsSettingStore = useMultiTabsSettingStore()
+const {} = storeToRefs(multiTabsSettingStore)
+const transitionSettingStore = useTransitionSettingStore()
+const {} = storeToRefs(transitionSettingStore)
+</script>
+
+<template>
+  <VbenDrawer
+    :show="showSettingDrawer"
+    @update:show="sporadicSettingStore.toggleSettingDrawerVisible()"
+    :width="330"
+  >
+    <VbenDrawerContent closable>
+      <template #header>{{ t('layout.setting.drawerTitle') }}</template>
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.darkMode') }}
+      </VbenDivider>
+      <DarkModeToggle />
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.navMode') }}
+      </VbenDivider>
+      <NavigationBarPicker
+        :def="navBarType"
+        :type-list="navigationBarTypeList"
+        @handler="
+          (item) => {
+            baseHandler(HandlerSettingEnum.CHANGE_LAYOUT, {
+              mode: item.mode,
+              type: item.type,
+              split: isHorizontal ? false : undefined,
+            })
+          }
+        "
+      />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.sysTheme') }}
+      </VbenDivider>
+      <ThemeColorPicker
+        :def="themeColor"
+        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.headerTheme') }}
+      </VbenDivider>
+      <ThemeColorPicker
+        :def="headerBgColor"
+        :event="HandlerSettingEnum.HEADER_THEME"
+        :color-list="HEADER_PRESET_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sidebarTheme')
+      }}</VbenDivider>
+
+      <ThemeColorPicker
+        :def="menuBgColor"
+        :event="HandlerSettingEnum.MENU_THEME"
+        :color-list="SIDE_BAR_BG_COLOR_LIST"
+      />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.interfaceFunction') }}
+      </VbenDivider>
+      <Features />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.interfaceDisplay') }}
+      </VbenDivider>
+      <Content />
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.animation') }}
+      </VbenDivider>
+      <Transitions />
+      <VbenDivider />
+      <FooterButtons />
+    </VbenDrawerContent>
+  </VbenDrawer>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/setting/components/Content.vue b/packages/grid-layouts/src/components/setting/components/Content.vue
new file mode 100644
index 00000000..72f1c300
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/Content.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import SwitchItem from './SwitchItem.vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { useI18n } from '@vben/locale'
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useMultiTabsSettingStore,
+  useSporadicSettingStore,
+} from '../../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const { t } = useI18n()
+
+// const {
+//   getShowFooter,
+//   getShowBreadCrumb,
+//   getShowBreadCrumbIcon,
+//   getShowLogo,
+//   getFullContent,
+//   getColorWeak,
+//   getGrayMode,
+// } = useRootSetting()
+
+// const { getIsHorizontal, getShowMenu, getIsMixSidebar } = useMenuSetting()
+//
+// const { getShowHeader } = useHeaderSetting()
+//
+// const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } =
+//   useMultipleTabSetting()
+const {
+  isMixSidebar,
+  show: showMenu,
+  isHorizontal,
+} = storeToRefs(useMenuSettingStore())
+const {
+  showBreadCrumb,
+  showBreadCrumbIcon,
+  showLogo,
+  showFooter,
+  fullContent,
+  grayMode,
+  colorWeak,
+} = storeToRefs(useSporadicSettingStore())
+const {
+  show: showMultiTabs,
+  showRedo,
+  showQuick,
+  showFold,
+} = storeToRefs(useMultiTabsSettingStore())
+const { show: showHeader } = storeToRefs(useHeaderSettingStore())
+</script>
+<template>
+  <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.breadcrumb')"
+      :def="showBreadCrumb"
+      :event="HandlerSettingEnum.SHOW_BREADCRUMB"
+      :disabled="!showHeader"
+    />
+    <SwitchItem
+      :title="t('layout.setting.breadcrumbIcon')"
+      :def="showBreadCrumbIcon"
+      :event="HandlerSettingEnum.SHOW_BREADCRUMB_ICON"
+      :disabled="!showBreadCrumb"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabs')"
+      :def="showMultiTabs"
+      :event="HandlerSettingEnum.TABS_SHOW"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabsRedoBtn')"
+      :def="showRedo"
+      :event="HandlerSettingEnum.TABS_SHOW_REDO"
+      :disabled="!showMultiTabs"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabsQuickBtn')"
+      :def="showQuick"
+      :event="HandlerSettingEnum.TABS_SHOW_QUICK"
+      :disabled="!showMultiTabs"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabsFoldBtn')"
+      :def="showFold"
+      :event="HandlerSettingEnum.TABS_SHOW_FOLD"
+      :disabled="!showMultiTabs"
+    />
+    <SwitchItem
+      :title="t('layout.setting.sidebar')"
+      :def="showMenu"
+      :event="HandlerSettingEnum.MENU_SHOW_SIDEBAR"
+      :disabled="isHorizontal"
+    />
+    <SwitchItem
+      :title="t('layout.setting.header')"
+      :def="showHeader"
+      :event="HandlerSettingEnum.HEADER_SHOW"
+    />
+    <SwitchItem
+      title="Logo"
+      :def="showLogo"
+      :event="HandlerSettingEnum.SHOW_LOGO"
+      :disabled="isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.footer')"
+      :def="showFooter"
+      :event="HandlerSettingEnum.SHOW_FOOTER"
+    />
+    <SwitchItem
+      :title="t('layout.setting.fullContent')"
+      :def="fullContent"
+      :event="HandlerSettingEnum.FULL_CONTENT"
+    />
+    <SwitchItem
+      :title="t('layout.setting.grayMode')"
+      :def="grayMode"
+      :event="HandlerSettingEnum.GRAY_MODE"
+    />
+    <SwitchItem
+      :title="t('layout.setting.colorWeak')"
+      :def="colorWeak"
+      :event="HandlerSettingEnum.COLOR_WEAK"
+    />
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/DarkModeToggle.vue b/packages/grid-layouts/src/components/setting/components/DarkModeToggle.vue
new file mode 100644
index 00000000..1b92091a
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/DarkModeToggle.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { ThemeEnum } from '@vben/constants'
+import { storeToRefs } from '@vben/pinia'
+import { useHeaderSettingStore } from '../../../store'
+
+const headerSettingStore = useHeaderSettingStore()
+
+const { isDark } = storeToRefs(headerSettingStore)
+
+const handlerDarkModeToggle = (v) => {
+  headerSettingStore.setTheme(v ? ThemeEnum.DARK : ThemeEnum.LIGHT)
+}
+</script>
+
+<template>
+  <VbenSpace justify="center">
+    <VbenSwitch :value="isDark" @update:value="handlerDarkModeToggle">
+      <template #checked-icon>
+        <VbenIconify icon="emojione:crescent-moon" hoverPointer />
+      </template>
+      <template #unchecked-icon>
+        <VbenIconify icon="emojione:sun-with-face" hoverPointer />
+      </template>
+    </VbenSwitch>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/Features.vue b/packages/grid-layouts/src/components/setting/components/Features.vue
new file mode 100644
index 00000000..c155be0e
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/Features.vue
@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import SwitchItem from './SwitchItem.vue'
+import SelectItem from './SelectItem.vue'
+import InputNumberItem from './InputNumberItem.vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import {
+  mixSidebarTriggerOptions,
+  topMenuAlignOptions,
+  getMenuTriggerOptions,
+  contentModeOptions,
+} from '../../../logics/constant'
+import { useI18n } from '@vben/locale'
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useSporadicSettingStore,
+} from '../../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const { t } = useI18n()
+
+const {
+  isHorizontal,
+  hidden: sidebarHidden,
+  split,
+  isMix,
+  mixSideFixed,
+  fixed: menuFixed,
+  isMixSidebar,
+  isTopMenu,
+  closeMixSidebarOnChange,
+  collapsed,
+  canDrag,
+  accordion,
+  collapsedShowTitle,
+  mixSideTrigger,
+  topMenuAlign,
+  trigger,
+  menuWidth,
+} = storeToRefs(useMenuSettingStore())
+const {
+  showSearch,
+  show: showHeader,
+  fixed: headerFixed,
+} = storeToRefs(useHeaderSettingStore())
+const { contentMode, lockTime } = storeToRefs(useSporadicSettingStore())
+const triggerOptions = getMenuTriggerOptions(unref(split))
+const getMenuDisabled = computed(() => {
+  return !isHorizontal && !sidebarHidden
+})
+</script>
+<template>
+  <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.splitMenu')"
+      :def="split"
+      :event="HandlerSettingEnum.MENU_SPLIT"
+      :disabled="!isMix"
+    />
+    <SwitchItem
+      :title="t('layout.setting.mixSidebarFixed')"
+      :def="mixSideFixed"
+      :event="HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR"
+      :disabled="!isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.closeMixSidebarOnChange')"
+      :def="closeMixSidebarOnChange"
+      :event="HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE"
+      :disabled="!isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuCollapse')"
+      :def="collapsed"
+      :event="HandlerSettingEnum.MENU_COLLAPSED"
+      :disabled="!getMenuDisabled"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuDrag')"
+      :def="canDrag"
+      :event="HandlerSettingEnum.MENU_HAS_DRAG"
+      :disabled="!getMenuDisabled"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuSearch')"
+      :def="showSearch"
+      :event="HandlerSettingEnum.HEADER_SEARCH"
+      :disabled="!showHeader"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuAccordion')"
+      :def="accordion"
+      :event="HandlerSettingEnum.MENU_ACCORDION"
+      :disabled="!getMenuDisabled"
+    />
+    <SwitchItem
+      :title="t('layout.setting.collapseMenuDisplayName')"
+      :def="collapsedShowTitle"
+      :event="HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE"
+      :disabled="!getMenuDisabled || !collapsed || isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.fixedHeader')"
+      :def="headerFixed"
+      :event="HandlerSettingEnum.HEADER_FIXED"
+      :disabled="!showHeader"
+    />
+    <SwitchItem
+      :title="t('layout.setting.fixedSideBar')"
+      :def="menuFixed"
+      :event="HandlerSettingEnum.MENU_FIXED"
+      :disabled="!getMenuDisabled || isMixSidebar"
+    />
+    <SelectItem
+      :title="t('layout.setting.mixSidebarTrigger')"
+      :options="mixSidebarTriggerOptions"
+      :def="mixSideTrigger"
+      :event="HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR"
+      :disabled="!isMixSidebar"
+    />
+    <SelectItem
+      :title="t('layout.setting.topMenuLayout')"
+      :options="topMenuAlignOptions"
+      :def="topMenuAlign"
+      :event="HandlerSettingEnum.MENU_TOP_ALIGN"
+      :disabled="!showHeader || split || (!isTopMenu && !split) || isMixSidebar"
+    />
+    <SelectItem
+      :title="t('layout.setting.menuCollapseButton')"
+      :options="triggerOptions"
+      :def="trigger"
+      :event="HandlerSettingEnum.MENU_TRIGGER"
+      :disabled="!getMenuDisabled || isMixSidebar"
+    />
+    <SelectItem
+      :title="t('layout.setting.contentMode')"
+      :options="contentModeOptions"
+      :def="contentMode"
+      :event="HandlerSettingEnum.CONTENT_MODE"
+    />
+    <InputNumberItem
+      :title="t('layout.setting.autoScreenLock')"
+      :min="0"
+      :def="lockTime"
+      :event="HandlerSettingEnum.LOCK_TIME"
+      :suffix="
+        lockTime === 0
+          ? t('layout.setting.notAutoScreenLock')
+          : t('layout.setting.minute')
+      "
+    />
+    <InputNumberItem
+      :title="t('layout.setting.expandedMenuWidth')"
+      :min="100"
+      :max="240"
+      :step="10"
+      :def="menuWidth"
+      suffix="px"
+      :event="HandlerSettingEnum.MENU_WIDTH"
+      :disabled="!getMenuDisabled"
+    />
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/FooterButtons.vue b/packages/grid-layouts/src/components/setting/components/FooterButtons.vue
new file mode 100644
index 00000000..5a8da527
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/FooterButtons.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { useI18n } from '@vben/locale'
+import { reactive } from 'vue'
+import { useClipboard } from '@vben/utils'
+import { storeToRefs } from '@vben/pinia'
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useMultiTabsSettingStore,
+  useSporadicSettingStore,
+  useTransitionSettingStore,
+} from '../../../store'
+
+const { t } = useI18n()
+const sporadicSettingStore = useSporadicSettingStore()
+const menuSettingStore = useMenuSettingStore()
+const headerSettingStore = useHeaderSettingStore()
+const multiTabsSettingStore = useMultiTabsSettingStore()
+const transitionSettingStore = useTransitionSettingStore()
+
+const handleCopy = () => {
+  try {
+    const { copy, isSupported } = useClipboard()
+    if (!isSupported)
+      return console.error('Your browser does not support Clipboard API')
+    const source = reactive({
+      SporadicSetting: storeToRefs(sporadicSettingStore),
+      MenuSetting: storeToRefs(menuSettingStore),
+      HeaderSetting: storeToRefs(headerSettingStore),
+      MultiTabsSetting: storeToRefs(multiTabsSettingStore),
+      TransitionSetting: storeToRefs(transitionSettingStore),
+    })
+    copy(JSON.stringify(source))
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const handleReset = () => {
+  sporadicSettingStore.$reset()
+  menuSettingStore.$reset()
+  headerSettingStore.$reset()
+  multiTabsSettingStore.$reset()
+  transitionSettingStore.$reset()
+}
+
+const handleClearAndRedo = () => {
+  localStorage.clear()
+  sessionStorage.clear()
+  location.reload()
+}
+</script>
+<template>
+  <VbenSpace vertical>
+    <VbenButton type="info" block @click="handleCopy">
+      <template #icon>
+        <VbenIconify icon="ant-design:snippets-twotone" />
+      </template>
+      {{ t('layout.setting.copyBtn') }}
+    </VbenButton>
+    <VbenButton type="warning" @click="handleReset" block>
+      <template #icon>
+        <VbenIconify icon="ant-design:reload-outlined" />
+      </template>
+      {{ t('common.resetText') }}
+    </VbenButton>
+    <VbenButton type="error" block @click="handleClearAndRedo">
+      <template #icon>
+        <VbenIconify icon="ant-design:redo-outlined" />
+      </template>
+      {{ t('layout.setting.clearBtn') }}
+    </VbenButton>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/InputNumberItem.vue b/packages/grid-layouts/src/components/setting/components/InputNumberItem.vue
new file mode 100644
index 00000000..bc6d202e
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/InputNumberItem.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup name="InputNumberItem">
+import { PropType } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { baseHandler } from '../../../logics/handler'
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  def: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  disabled: {
+    type: Boolean,
+  },
+  suffix: { type: String, default: '' },
+})
+const onChange = (value) => {
+  baseHandler(props.event, value)
+}
+</script>
+<template>
+  <VbenSpace justify="space-between" align="center">
+    <span>{{ title }}</span>
+    <VbenInputNumber
+      class="w-130px"
+      size="small"
+      v-bind="$attrs"
+      :value="def"
+      :disabled="disabled"
+      @update:value="onChange"
+    >
+      <template #suffix>
+        {{ suffix }}
+      </template>
+    </VbenInputNumber>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/NavigationBarPicker.vue b/packages/grid-layouts/src/components/setting/components/NavigationBarPicker.vue
new file mode 100644
index 00000000..37fff21d
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/NavigationBarPicker.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup name="NavigationBarPicker">
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+defineProps({
+  typeList: {
+    type: Array as PropType<object[]>,
+    default: () => [],
+  },
+  def: {
+    type: String,
+    default: '',
+  },
+})
+const emits = defineEmits(['handler'])
+const handlerPicker = (data) => {
+  emits('handler', data)
+}
+</script>
+<template>
+  <div class="setting-navigation-bar-picker">
+    <VbenSpace justify="space-between">
+      <template v-for="(item, index) in typeList" :key="index">
+        <VbenTooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <div
+              class="h-48px w-56px bg-gray-300 rounded relative shadow-inner box-border cursor-pointer overflow-hidden bar-item"
+              :class="[`bar-item__${item.type}`, { active: item.type == def }]"
+              @click="handlerPicker(item)"
+            >
+              <div class="mix-sidebar"></div>
+            </div>
+          </template>
+          <span>{{ t(item.title) }}</span>
+        </VbenTooltip>
+      </template>
+    </VbenSpace>
+  </div>
+</template>
+<style lang="scss" scoped>
+.setting-navigation-bar-picker {
+  .bar-item {
+    box-shadow: 0px 1px 5px rgba(156, 163, 173, 1);
+    &:hover,
+    &.active {
+      border: 2px solid rgba(6, 96, 189, 1);
+    }
+    &:before,
+    &:after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    &:before {
+      width: 33%;
+      height: 100%;
+      z-index: 1;
+      background-color: rgba(12, 33, 53, 1);
+    }
+    &:after {
+      width: 100%;
+      height: 25%;
+      background-color: rgba(249, 250, 251, 1);
+    }
+  }
+  .bar-item__sidebar {
+    &:before {
+      z-index: 1;
+    }
+  }
+  .bar-item__mix {
+    &:before {
+      width: 33%;
+      height: 100%;
+      background-color: rgba(249, 250, 251, 1);
+    }
+    &:after {
+      z-index: 1;
+      background-color: rgba(12, 33, 53, 1);
+    }
+  }
+  .bar-item__top-menu {
+    &:before {
+      display: none;
+    }
+    &:after {
+      z-index: 1;
+      width: 100%;
+      height: 25%;
+      background-color: rgba(12, 33, 53, 1);
+    }
+  }
+  .bar-item__mix-sidebar {
+    &:before {
+      width: 25%;
+      z-index: 1;
+    }
+    .mix-sidebar {
+      width: 18%;
+      height: 100%;
+      background-color: rgba(249, 250, 251, 1);
+      margin-left: 25%;
+    }
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/setting/components/SelectItem.vue b/packages/grid-layouts/src/components/setting/components/SelectItem.vue
new file mode 100644
index 00000000..fba36eb1
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/SelectItem.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup name="SelectItem">
+import { PropType, h } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { baseHandler } from '../../../logics/handler'
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  def: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  disabled: {
+    type: Boolean,
+  },
+  options: { type: Array, default: () => [] },
+})
+const onChange = (value) => {
+  baseHandler(props.event, value)
+}
+/*
+ * options 数据传入时,多语言会失效,这里再渲染一遍
+ * */
+function renderLabel(option: { label: string; value: string | number }) {
+  return h('span', {}, t(option.label))
+}
+</script>
+<template>
+  <div class="switch-item">
+    <VbenSpace justify="space-between" align="center">
+      <span>{{ title }}</span>
+      <VbenSelect
+        class="w-130px"
+        size="small"
+        :value="def"
+        :options="options"
+        :disabled="disabled"
+        @update:value="onChange"
+        :render-label="renderLabel"
+      />
+    </VbenSpace>
+  </div>
+</template>
+<style lang="less" scoped></style>
diff --git a/packages/grid-layouts/src/components/setting/components/SettingDrawer.vue b/packages/grid-layouts/src/components/setting/components/SettingDrawer.vue
new file mode 100644
index 00000000..6b0c2b20
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/SettingDrawer.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import DarkModeToggle from './DarkModeToggle.vue'
+import NavigationBarPicker from './NavigationBarPicker.vue'
+import ThemeColorPicker from './ThemeColorPicker.vue'
+import Features from './Features.vue'
+import Content from './Content.vue'
+import Transitions from './Transitions.vue'
+import FooterButtons from './FooterButtons.vue'
+import { baseHandler } from '../handler'
+import {
+  APP_PRESET_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  SIDE_BAR_BG_COLOR_LIST,
+  HandlerSettingEnum,
+} from '@vben/constants'
+import { context } from '../../../../bridge'
+import { navigationBarTypeList } from '../constant'
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+
+const { useMenuSetting, useHeaderSetting, useRootSetting } = context
+
+const { getShowDarkModeToggle, getThemeColor } = useRootSetting()
+const { getIsHorizontal, getMenuType, getMenuBgColor } = useMenuSetting()
+const { getHeaderBgColor } = useHeaderSetting()
+
+defineProps({
+  visible: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:visible'])
+const onVisible = (show: boolean) => {
+  emit('update:visible', show)
+}
+</script>
+
+<template>
+  <VbenDrawer :show="visible" @update:show="onVisible" :width="330">
+    <VbenDrawerContent closable>
+      <template #header>{{ t('layout.setting.drawerTitle') }}</template>
+      <template v-if="getShowDarkModeToggle">
+        <VbenDivider title-placement="left">{{
+          t('layout.setting.darkMode')
+        }}</VbenDivider>
+        <DarkModeToggle />
+      </template>
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.navMode')
+      }}</VbenDivider>
+      <NavigationBarPicker
+        :def="getMenuType"
+        :type-list="navigationBarTypeList"
+        @handler="
+          (item) => {
+            baseHandler(HandlerSettingEnum.CHANGE_LAYOUT, {
+              mode: item.mode,
+              type: item.type,
+              split: getIsHorizontal ? false : undefined,
+            })
+          }
+        "
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sysTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getThemeColor"
+        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.headerTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getHeaderBgColor"
+        :event="HandlerSettingEnum.HEADER_THEME"
+        :color-list="HEADER_PRESET_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sidebarTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getMenuBgColor"
+        :event="HandlerSettingEnum.MENU_THEME"
+        :color-list="SIDE_BAR_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left"
+        >{{ t('layout.setting.interfaceFunction') }}
+      </VbenDivider>
+      <Features />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.interfaceDisplay')
+      }}</VbenDivider>
+      <Content />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.animation')
+      }}</VbenDivider>
+      <Transitions />
+      <VbenDivider />
+      <FooterButtons />
+    </VbenDrawerContent>
+  </VbenDrawer>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/SwitchItem.vue b/packages/grid-layouts/src/components/setting/components/SwitchItem.vue
new file mode 100644
index 00000000..fbc977ce
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/SwitchItem.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup name="SwitchItem">
+import { PropType } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { baseHandler } from '../../../logics/handler'
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  def: {
+    type: Boolean as PropType<boolean>,
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  disabled: {
+    type: Boolean,
+  },
+})
+const onChange = (value) => {
+  baseHandler(props.event, value)
+}
+</script>
+<template>
+  <VbenSpace justify="space-between" align="center">
+    <span>{{ title }}</span>
+    <VbenSwitch :value="def" :disabled="disabled" @update:value="onChange">
+      <template #checked-icon>
+        <VbenIconify icon="ant-design:check-outlined" color="#18A058" />
+      </template>
+      <template #unchecked-icon>
+        <VbenIconify icon="ant-design:close-outlined" color="#BEBEBE" />
+      </template>
+    </VbenSwitch>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue b/packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue
new file mode 100644
index 00000000..8d4b834f
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup name="ThemeColorPicker">
+import { PropType } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { baseHandler } from '../../../logics/handler'
+
+const props = defineProps({
+  colorList: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  def: {
+    type: String,
+    default: '',
+  },
+})
+const handleClick = (color) => {
+  baseHandler(props.event, color)
+}
+</script>
+<template>
+  <div class="theme-color-picker">
+    <VbenSpace justify="space-between" :size="0" :wrap="false">
+      <template v-for="color in colorList" :key="color">
+        <span
+          @click="handleClick(color)"
+          class="h-20px w-20px cursor-pointer border rounded-sm box-border border-gray-300 inline-block color-item"
+          :class="{ active: def == color }"
+          :style="{ background: color }"
+        >
+          <VbenSpace v-if="def == color" justify="center">
+            <VbenIconify
+              icon="mingcute:check-fill"
+              color="#D1D5DB"
+              size="18"
+              hover-color="#D1D5DB"
+            />
+          </VbenSpace>
+        </span>
+      </template>
+    </VbenSpace>
+  </div>
+</template>
+<style lang="less" scoped>
+.color-item {
+  &:hover,
+  &.active {
+    border-color: rgba(6, 96, 189, 1);
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/setting/components/Transitions.vue b/packages/grid-layouts/src/components/setting/components/Transitions.vue
new file mode 100644
index 00000000..b20b71c0
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/components/Transitions.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import SwitchItem from './SwitchItem.vue'
+import SelectItem from './SelectItem.vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { routerTransitionOptions } from '../../../logics/constant'
+import { useI18n } from '@vben/locale'
+import { useTransitionSettingStore } from '../../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const { t } = useI18n()
+
+const { openPageLoading, openNProgress, enable, basicTransition } = storeToRefs(
+  useTransitionSettingStore(),
+)
+</script>
+<template>
+  <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.progress')"
+      :def="openNProgress"
+      :event="HandlerSettingEnum.OPEN_PROGRESS"
+    />
+    <SwitchItem
+      :title="t('layout.setting.switchLoading')"
+      :def="openPageLoading"
+      :event="HandlerSettingEnum.OPEN_PAGE_LOADING"
+    />
+    <SwitchItem
+      :title="t('layout.setting.switchAnimation')"
+      :def="enable"
+      :event="HandlerSettingEnum.OPEN_ROUTE_TRANSITION"
+    />
+    <SelectItem
+      :title="t('layout.setting.animationType')"
+      :options="routerTransitionOptions"
+      :def="basicTransition"
+      :event="HandlerSettingEnum.ROUTER_TRANSITION"
+      :disabled="enable"
+    />
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/index.vue b/packages/grid-layouts/src/components/setting/index.vue
new file mode 100644
index 00000000..b08d4e91
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useSporadicSettingStore } from '../../store'
+const sporadicSettingStore = useSporadicSettingStore()
+</script>
+<template>
+  <div
+    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
+    class="h-full p-x-12px grid-center cursor-pointer"
+  >
+    <VbenIconify
+      size="22"
+      icon="material-symbols:settings-suggest-outline-rounded"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
index 07f02835..ac20e0b5 100644
--- a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
@@ -7,7 +7,7 @@ const { collapsed } = storeToRefs(menuSettingStore)
 </script>
 <template>
   <div
-    class="h-full w-48px grid-center cursor-pointer bg-[var(--trigger-color)]"
+    class="h-full p-x-12px grid-center cursor-pointer bg-[var(--trigger-color)]"
     @click.stop="menuSettingStore.toggleCollapsed()"
   >
     <VbenIconify
diff --git a/packages/grid-layouts/src/logics/constant.ts b/packages/grid-layouts/src/logics/constant.ts
new file mode 100644
index 00000000..98080870
--- /dev/null
+++ b/packages/grid-layouts/src/logics/constant.ts
@@ -0,0 +1,112 @@
+import {
+  MenuModeEnum,
+  MenuTypeEnum,
+  ContentLayoutEnum,
+  TopMenuAlignEnum,
+  TriggerEnum,
+  RouterTransitionEnum,
+  MixSidebarTriggerEnum,
+} from '@vben/constants'
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+
+export const navigationBarTypeList = [
+  {
+    title: t('layout.setting.menuTypeSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.SIDEBAR,
+  },
+  {
+    title: t('layout.setting.menuTypeMix'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX,
+  },
+
+  {
+    title: t('layout.setting.menuTypeTopMenu'),
+    mode: MenuModeEnum.HORIZONTAL,
+    type: MenuTypeEnum.TOP_MENU,
+  },
+  {
+    title: t('layout.setting.menuTypeMixSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX_SIDEBAR,
+  },
+]
+
+export const contentModeOptions = [
+  {
+    value: ContentLayoutEnum.FULL,
+    label: t('layout.setting.contentModeFull'),
+  },
+  {
+    value: ContentLayoutEnum.FIXED,
+    label: t('layout.setting.contentModeFixed'),
+  },
+]
+
+export const topMenuAlignOptions = [
+  {
+    value: TopMenuAlignEnum.CENTER,
+    label: t('layout.setting.topMenuAlignRight'),
+  },
+  {
+    value: TopMenuAlignEnum.START,
+    label: t('layout.setting.topMenuAlignLeft'),
+  },
+  {
+    value: TopMenuAlignEnum.END,
+    label: t('layout.setting.topMenuAlignCenter'),
+  },
+]
+
+export const getMenuTriggerOptions = (split: boolean) => {
+  return [
+    {
+      value: TriggerEnum.NONE,
+      label: t('layout.setting.menuTriggerNone'),
+    },
+    {
+      value: TriggerEnum.FOOTER,
+      label: t('layout.setting.menuTriggerBottom'),
+    },
+    {
+      value: TriggerEnum.CENTER,
+      label: t('layout.setting.menuTriggerCenter'),
+    },
+    ...(split
+      ? []
+      : [
+          {
+            value: TriggerEnum.HEADER,
+            label: t('layout.setting.menuTriggerTop'),
+          },
+        ]),
+  ]
+}
+
+export const routerTransitionOptions = [
+  RouterTransitionEnum.ZOOM_FADE,
+  RouterTransitionEnum.FADE,
+  RouterTransitionEnum.ZOOM_OUT,
+  RouterTransitionEnum.FADE_SIDE,
+  RouterTransitionEnum.FADE_BOTTOM,
+  RouterTransitionEnum.FADE_SCALE,
+].map((item) => {
+  return {
+    label: item,
+    value: item,
+  }
+})
+
+export const mixSidebarTriggerOptions = [
+  {
+    value: MixSidebarTriggerEnum.HOVER,
+    label: t('layout.setting.triggerHover'),
+  },
+  {
+    value: MixSidebarTriggerEnum.CLICK,
+    label: t('layout.setting.triggerClick'),
+  },
+]
diff --git a/packages/grid-layouts/src/logics/handler.ts b/packages/grid-layouts/src/logics/handler.ts
new file mode 100644
index 00000000..3f490e38
--- /dev/null
+++ b/packages/grid-layouts/src/logics/handler.ts
@@ -0,0 +1,185 @@
+import { HandlerSettingEnum } from '@vben/constants'
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useMultiTabsSettingStore,
+  useSporadicSettingStore,
+  useTransitionSettingStore,
+} from '../store'
+
+export function baseHandler(event: HandlerSettingEnum, value: any) {
+  handler(event, value)
+}
+
+export function handler(event: HandlerSettingEnum, value: any) {
+  const sporadicSettingStore = useSporadicSettingStore()
+  const menuSettingStore = useMenuSettingStore()
+  const headerSettingStore = useHeaderSettingStore()
+  const multiTabsSettingStore = useMultiTabsSettingStore()
+  const transitionSettingStore = useTransitionSettingStore()
+  // @ts-ignore
+  switch (event) {
+    case HandlerSettingEnum.CHANGE_LAYOUT:
+      const { mode, type, split } = value
+      menuSettingStore.setType(type)
+      menuSettingStore.setMode(mode)
+      menuSettingStore.setSplit(split)
+      break
+
+    case HandlerSettingEnum.CHANGE_THEME_COLOR:
+      // if (getThemeColor.value === value) {
+      //   return {}
+      // }
+      // changeTheme(value);
+      sporadicSettingStore.setThemeColor(value)
+      break
+
+    case HandlerSettingEnum.CHANGE_THEME:
+      // if (getDarkMode.value === value) {
+      //   return {}
+      // }
+      // updateDarkTheme(value);
+      break
+
+    case HandlerSettingEnum.MENU_HAS_DRAG:
+      menuSettingStore.setCanDrag(value)
+      break
+
+    case HandlerSettingEnum.MENU_ACCORDION:
+      menuSettingStore.setAccordion(value)
+      break
+
+    case HandlerSettingEnum.MENU_TRIGGER:
+      menuSettingStore.setTrigger(value)
+      break
+
+    case HandlerSettingEnum.MENU_TOP_ALIGN:
+      menuSettingStore.setTopMenuAlign(value)
+      break
+    case HandlerSettingEnum.MENU_COLLAPSED:
+      menuSettingStore.setCollapsed(value)
+      break
+
+    case HandlerSettingEnum.MENU_WIDTH:
+      return { menuSetting: { menuWidth: value } }
+
+    case HandlerSettingEnum.MENU_SHOW_SIDEBAR:
+      menuSettingStore.setShow(value)
+      break
+
+    case HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE:
+      return { menuSetting: { collapsedShowTitle: value } }
+
+    case HandlerSettingEnum.MENU_THEME:
+      // updateSidebarBgColor(value);
+      menuSettingStore.setBgColor(value)
+      break
+
+    case HandlerSettingEnum.MENU_SPLIT:
+      menuSettingStore.setSplit(value)
+      break
+
+    case HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+      menuSettingStore.setCloseMixSidebarOnChange(value)
+      break
+
+    case HandlerSettingEnum.MENU_FIXED:
+      menuSettingStore.setFixed(value)
+      break
+
+    case HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR:
+      menuSettingStore.setMixSideTrigger(value)
+      break
+
+    case HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR:
+      menuSettingStore.setMixSideFixed(value)
+      break
+
+    // ============transition==================
+    case HandlerSettingEnum.OPEN_PAGE_LOADING:
+      transitionSettingStore.setOpenPageLoading(value)
+      break
+
+    case HandlerSettingEnum.ROUTER_TRANSITION:
+      transitionSettingStore.setBasicTransition(value)
+      break
+
+    case HandlerSettingEnum.OPEN_ROUTE_TRANSITION:
+      transitionSettingStore.setEnable(value)
+      break
+
+    case HandlerSettingEnum.OPEN_PROGRESS:
+      transitionSettingStore.setOpenNProgress(value)
+      break
+    // ============sporadic==================
+
+    case HandlerSettingEnum.LOCK_TIME:
+      sporadicSettingStore.setLockTime(value)
+      break
+
+    case HandlerSettingEnum.FULL_CONTENT:
+      sporadicSettingStore.setFullContent(value)
+      break
+    case HandlerSettingEnum.CONTENT_MODE:
+      sporadicSettingStore.setContentMode(value)
+      break
+
+    case HandlerSettingEnum.SHOW_BREADCRUMB:
+      sporadicSettingStore.setShowBreadCrumb(value)
+      break
+    case HandlerSettingEnum.SHOW_BREADCRUMB_ICON:
+      sporadicSettingStore.setShowBreadCrumbIcon(value)
+      break
+
+    case HandlerSettingEnum.GRAY_MODE:
+      // updateGrayMode(value)
+      sporadicSettingStore.setGrayMode(value)
+      break
+    case HandlerSettingEnum.SHOW_FOOTER:
+      sporadicSettingStore.setShowFooter(value)
+      break
+
+    case HandlerSettingEnum.COLOR_WEAK:
+      // updateColorWeak(value)
+      sporadicSettingStore.setColorWeak(value)
+      break
+
+    case HandlerSettingEnum.SHOW_LOGO:
+      sporadicSettingStore.setShowLogo(value)
+      break
+
+    // ============tabs==================
+    case HandlerSettingEnum.TABS_SHOW_QUICK:
+      multiTabsSettingStore.setShowQuick(value)
+      break
+    case HandlerSettingEnum.TABS_SHOW:
+      multiTabsSettingStore.setShow(value)
+      break
+
+    case HandlerSettingEnum.TABS_SHOW_REDO:
+      multiTabsSettingStore.setShowRedo(value)
+      break
+
+    case HandlerSettingEnum.TABS_SHOW_FOLD:
+      multiTabsSettingStore.setShowFold(value)
+      break
+
+    // ============header==================
+    case HandlerSettingEnum.HEADER_THEME:
+      // updateHeaderBgColor(value);
+      headerSettingStore.setBgColor(value)
+      break
+
+    case HandlerSettingEnum.HEADER_SEARCH:
+      headerSettingStore.setShowSearch(value)
+      break
+    case HandlerSettingEnum.HEADER_FIXED:
+      headerSettingStore.setFixed(value)
+      break
+    case HandlerSettingEnum.HEADER_SHOW:
+      headerSettingStore.setShow(value)
+      break
+    default:
+      return
+  }
+}
diff --git a/packages/grid-layouts/src/store/index.ts b/packages/grid-layouts/src/store/index.ts
index efd93591..cba74339 100644
--- a/packages/grid-layouts/src/store/index.ts
+++ b/packages/grid-layouts/src/store/index.ts
@@ -1,4 +1,4 @@
-export { useSporadicSetting } from './modules/sporadicSetting'
+export { useSporadicSettingStore } from './modules/sporadicSetting'
 export { useHeaderSettingStore } from './modules/headerSetting'
 export { useMenuSettingStore } from './modules/menuSetting'
 export { useTransitionSettingStore } from './modules/transitionSetting'
diff --git a/packages/grid-layouts/src/store/modules/headerSetting.ts b/packages/grid-layouts/src/store/modules/headerSetting.ts
index f1019aeb..131a506d 100644
--- a/packages/grid-layouts/src/store/modules/headerSetting.ts
+++ b/packages/grid-layouts/src/store/modules/headerSetting.ts
@@ -26,7 +26,9 @@ export const useHeaderSettingStore = defineStore({
     showSearch: true,
     showLocalePicker: true,
   }),
-  getters: {},
+  getters: {
+    isDark: (state) => state.theme === ThemeEnum.DARK,
+  },
   actions: {
     setBgColor(value: string) {
       this.bgColor = value
diff --git a/packages/grid-layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
index aafd112f..e3bf7569 100644
--- a/packages/grid-layouts/src/store/modules/menuSetting.ts
+++ b/packages/grid-layouts/src/store/modules/menuSetting.ts
@@ -58,6 +58,7 @@ export const useMenuSettingStore = defineStore({
     isSidebar: (state) => state.type === MenuTypeEnum.SIDEBAR,
     isTopMenu: (state) => state.type === MenuTypeEnum.TOP_MENU,
     isMixSidebar: (state) => state.type === MenuTypeEnum.MIX_SIDEBAR,
+    isMix: (state) => state.type === MenuTypeEnum.MIX,
     isMixMode: (state) =>
       state.mode === MenuModeEnum.INLINE && state.type === MenuTypeEnum.MIX,
     showMenuLogo: (state) => state.type === MenuTypeEnum.SIDEBAR,
diff --git a/packages/grid-layouts/src/store/modules/sporadicSetting.ts b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
index 9003def9..1608019f 100644
--- a/packages/grid-layouts/src/store/modules/sporadicSetting.ts
+++ b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
@@ -8,7 +8,7 @@ import {
   ContentLayoutEnum,
 } from '@vben/constants'
 
-export const useSporadicSetting = defineStore({
+export const useSporadicSettingStore = defineStore({
   id: 'LAYOUT_SPORADIC_SETTING',
   // persist: true,
   state: (): SporadicSetting => ({
@@ -18,6 +18,8 @@ export const useSporadicSetting = defineStore({
     showDarkModeToggle: true,
     // `Settings` button position
     settingButtonPosition: SettingButtonPositionEnum.AUTO,
+    // Whether to show the Setting Drawer
+    showSettingDrawer: false,
     // Permission mode
     permissionMode: PermissionModeEnum.ROUTE_MAPPING,
     // Permission-related cache is stored in sessionStorage or localStorage
@@ -69,6 +71,12 @@ export const useSporadicSetting = defineStore({
     setSettingButtonPosition(value: SettingButtonPositionEnum) {
       this.settingButtonPosition = value
     },
+    setShowSettingDrawer(value: boolean) {
+      this.showSettingDrawer = value
+    },
+    toggleSettingDrawerVisible() {
+      this.setShowSettingDrawer(!this.showSettingDrawer)
+    },
     setPermissionMode(value: PermissionModeEnum) {
       this.permissionMode = value
     },
diff --git a/packages/locale/src/lang/en/layout.ts b/packages/locale/src/lang/en/layout.ts
index d3c0390c..01824e06 100644
--- a/packages/locale/src/lang/en/layout.ts
+++ b/packages/locale/src/lang/en/layout.ts
@@ -39,6 +39,7 @@ export default {
     menuTriggerNone: 'Not Show',
     menuTriggerBottom: 'Bottom',
     menuTriggerTop: 'Top',
+    menuTriggerCenter: 'Sideways',
     // menu type
     menuTypeSidebar: 'Left menu mode',
     menuTypeMixSidebar: 'Left menu mixed mode',
diff --git a/packages/locale/src/lang/zh-CN/layout.ts b/packages/locale/src/lang/zh-CN/layout.ts
index 3e4e50c0..40f091c4 100644
--- a/packages/locale/src/lang/zh-CN/layout.ts
+++ b/packages/locale/src/lang/zh-CN/layout.ts
@@ -40,6 +40,7 @@ export default {
     menuTriggerNone: '不显示',
     menuTriggerBottom: '底部',
     menuTriggerTop: '顶部',
+    menuTriggerCenter: '侧边',
     // menu type
     menuTypeSidebar: '左侧菜单模式',
     menuTypeMixSidebar: '左侧菜单混合模式',
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index a2101bfc..561398ed 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -51,5 +51,6 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
+    visibility: visible;
   }
 }
diff --git a/packages/types/src/setting.ts b/packages/types/src/setting.ts
index cf4717da..e374f950 100644
--- a/packages/types/src/setting.ts
+++ b/packages/types/src/setting.ts
@@ -112,6 +112,8 @@ export interface SporadicSetting {
   showDarkModeToggle: boolean
   // Configure where the button is displayed
   settingButtonPosition: SettingButtonPositionEnum
+  // Configure where the Setting Drawer is displayed
+  showSettingDrawer: boolean
   // Permission mode
   permissionMode: PermissionModeEnum
   // Session timeout processing
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 986b306b..600d0e0c 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -8,6 +8,7 @@ export {
   clone,
   isArray,
   isString,
+  toString,
 } from 'lodash-es'
 // @ts-ignore
 import Sortable from 'sortablejs'

From e4e2d82f36d1c8a7db5e94c971c88b4801ee9f84 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Mon, 6 Feb 2023 18:05:05 +0800
Subject: [PATCH 11/22] pref: grid-layout setting

---
 .../grid-layouts/src/components/Layout.vue    |  6 +--
 packages/grid-layouts/src/components/Main.vue | 20 +------
 .../src/components/breadcrumb/index.vue       | 14 +++++
 .../components/composables/LayoutContent.vue  |  2 +
 .../components/composables/LayoutFooter.vue   | 14 ++++-
 .../components/composables/LayoutHeader.vue   | 21 ++++----
 .../src/components/composables/LayoutLogo.vue |  3 --
 .../components/composables/LayoutSidebar.vue  |  5 +-
 .../src/components/composables/LayoutTab.vue  | 28 +++++++++-
 .../src/components/logo/index.vue             | 29 +++++++++++
 .../grid-layouts/src/components/render.ts     |  7 +++
 .../src/components/setting/FixedButton.vue    |  4 +-
 .../components/setting/components/Content.vue | 52 +++++++------------
 .../setting/components/Transitions.vue        |  2 +-
 .../src/components/tab-bar/FoldButton.vue     | 15 ++++++
 .../src/components/tab-bar/TabQuick.vue       | 12 +++++
 .../src/components/tab-bar/TabRedo.vue        | 25 +++++++++
 .../src/components/trigger/inedx.vue          | 18 +++----
 .../src/hooks/useComprehensive.ts             | 39 +++++++++++---
 .../src/store/modules/headerSetting.ts        |  7 +++
 .../src/store/modules/menuSetting.ts          |  1 +
 .../src/store/modules/multiTabsSetting.ts     |  8 ++-
 .../src/store/modules/sporadicSetting.ts      |  6 +++
 packages/styles/src/variables.css             |  4 +-
 packages/types/src/setting.ts                 |  6 +++
 25 files changed, 250 insertions(+), 98 deletions(-)
 create mode 100644 packages/grid-layouts/src/components/breadcrumb/index.vue
 delete mode 100644 packages/grid-layouts/src/components/composables/LayoutLogo.vue
 create mode 100644 packages/grid-layouts/src/components/logo/index.vue
 create mode 100644 packages/grid-layouts/src/components/render.ts
 create mode 100644 packages/grid-layouts/src/components/tab-bar/FoldButton.vue
 create mode 100644 packages/grid-layouts/src/components/tab-bar/TabQuick.vue
 create mode 100644 packages/grid-layouts/src/components/tab-bar/TabRedo.vue

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index d66554d0..2435eb92 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -39,7 +39,7 @@ const { type } = storeToRefs(useMenuSettingStore())
 .grid-layout-container {
   display: grid;
   grid-template-columns: minmax(0, var(--aside-width)) minmax(640px, 1fr);
-  grid-template-rows: var(--header-height) var(--tab-height) 1fr;
+  grid-template-rows: var(--header-height) var(--tab-bar-height) 1fr;
   grid-gap: 3px;
   transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
   transition-timing-function: var(--transition-bezier);
@@ -47,14 +47,14 @@ const { type } = storeToRefs(useMenuSettingStore())
   &.mix-sidebar {
     grid-template-areas:
       'grid-sidebar grid-header'
-      'grid-sidebar grid-tab-nav'
+      'grid-sidebar grid-tab-bar'
       'grid-sidebar grid-content';
   }
   &.mix,
   &.top-menu {
     grid-template-areas:
       'grid-header grid-header'
-      'grid-sidebar grid-tab-nav'
+      'grid-sidebar grid-tab-bar'
       'grid-sidebar grid-content';
   }
 }
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index 5f91678c..977b789f 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,35 +1,19 @@
 <script lang="ts" setup>
 import { useLayoutHeader, useMenuSettingStore } from '../store'
 import { storeToRefs } from '@vben/pinia'
-import { MenuTypeEnum } from '@vben/constants'
 import { useComprehensive } from '../hooks/useComprehensive'
 
 const menuSettingStore = useMenuSettingStore()
 const { type } = storeToRefs(menuSettingStore)
 
-const options = [
-  { label: MenuTypeEnum.SIDEBAR, value: MenuTypeEnum.SIDEBAR },
-  { label: MenuTypeEnum.MIX, value: MenuTypeEnum.MIX },
-  { label: MenuTypeEnum.TOP_MENU, value: MenuTypeEnum.TOP_MENU },
-  { label: MenuTypeEnum.MIX_SIDEBAR, value: MenuTypeEnum.MIX_SIDEBAR },
-]
-
-const handlerChange = (value) => {
-  menuSettingStore.setType(value)
-}
-
 const { headerWidth, headerHeight } = storeToRefs(useLayoutHeader())
 
 const { getLayoutStyles } = useComprehensive()
 </script>
 <template>
   <main class="vben-grid-layout-main">
-    {{ type }}
-    <VbenSelect
-      :options="options"
-      :value="type"
-      @update:value="handlerChange"
-    />
+    main - {{ type }}
+
     <div>layoutStyles： {{ getLayoutStyles }}</div>
     <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
     <!--    <RouterView />-->
diff --git a/packages/grid-layouts/src/components/breadcrumb/index.vue b/packages/grid-layouts/src/components/breadcrumb/index.vue
new file mode 100644
index 00000000..a81c9567
--- /dev/null
+++ b/packages/grid-layouts/src/components/breadcrumb/index.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useSporadicSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const { showBreadCrumb } = storeToRefs(useSporadicSettingStore())
+</script>
+<template>
+  <!--  <VbenBreadcrumb>-->
+  <!--    <VbenBreadcrumbItem>-->
+  <!--      -->
+  <!--    </VbenBreadcrumbItem>-->
+  <!--  </VbenBreadcrumb>-->
+  <div v-if="showBreadCrumb">breadcrumb</div>
+</template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
index 5fb6e8a0..7c3d8ee5 100644
--- a/packages/grid-layouts/src/components/composables/LayoutContent.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -15,6 +15,8 @@ const { footerRef } = storeToRefs(useLayoutFooter())
 .grid-layout-content {
   grid-template-columns: 100%;
   grid-template-rows: 1fr minmax(0, var(--footer-height));
+  transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
+  transition-timing-function: var(--transition-bezier);
   background: #ed6f6f;
 }
 </style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index 26d3e2ab..cc8370ce 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -1,4 +1,14 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useSporadicSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+
+const { hiddenFooter } = storeToRefs(useSporadicSettingStore())
+</script>
 <template>
-  <footer class="bg-[blueviolet]">footer</footer>
+  <footer
+    class="bg-[blueviolet]"
+    :class="[hiddenFooter ? 'invisible' : 'visible']"
+  >
+    footer
+  </footer>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index ffc5176b..ae1b6ca5 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -1,29 +1,26 @@
 <script lang="ts" setup>
 import Trigger from '../trigger/inedx.vue'
-import { useMenuSettingStore } from '../../store'
+import { useHeaderSettingStore, useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
 import Setting from '../setting/index.vue'
+import Breadcrumb from '../breadcrumb/index.vue'
+import Logo from '../logo/index.vue'
 const menuSettingStore = useMenuSettingStore()
 const { showHeaderTrigger } = storeToRefs(menuSettingStore)
+const { hidden } = storeToRefs(useHeaderSettingStore())
 </script>
 <template>
   <header
-    class="grid-area-[grid-header] bg-[#666666] grid grid-cols-2 justify-between content-center"
+    class="grid-area-[grid-header] bg-[#666666] grid grid-cols-2 content-center"
+    :class="[hidden ? 'invisible' : 'visible']"
   >
-    <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3">
+    <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3 flex">
+      <Logo />
       <Trigger v-if="showHeaderTrigger" />
-      left
+      <Breadcrumb />
     </div>
     <div class="h-[var(--header-height)] grid-col-[min-content]">
       <Setting />
     </div>
   </header>
 </template>
-<style lang="scss">
-.sd {
-  grid-template-columns: repeat(3, auto);
-  justify-content: space-between;
-  grid-column: 1 / 2;
-  grid-auto-columns: min-content;
-}
-</style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutLogo.vue b/packages/grid-layouts/src/components/composables/LayoutLogo.vue
deleted file mode 100644
index 4e196201..00000000
--- a/packages/grid-layouts/src/components/composables/LayoutLogo.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts" setup></script>
-<template></template>
-<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index f2030250..deb43d32 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -3,8 +3,7 @@ import Trigger from '../trigger/inedx.vue'
 import { useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
 const menuSettingStore = useMenuSettingStore()
-const { showHeaderTrigger, showFooterTrigger, hidden } =
-  storeToRefs(menuSettingStore)
+const { showFooterTrigger, hidden } = storeToRefs(menuSettingStore)
 </script>
 <template>
   <div
@@ -19,6 +18,6 @@ const { showHeaderTrigger, showFooterTrigger, hidden } =
     <div
       class="h-full w-1px content-none absolute top-0 bottom-0 right-0 bg-[var(--layout-border-color)] transition-colors-3000"
     ></div>
-    <Trigger v-if="!showHeaderTrigger" />
+    <Trigger />
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
index 8a7848f6..dd2f3507 100644
--- a/packages/grid-layouts/src/components/composables/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -1,4 +1,28 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useMultiTabsSettingStore } from '../../store'
+import { storeToRefs } from '@vben/pinia'
+import TabRedo from '../tab-bar/TabRedo.vue'
+import TabQuick from '../tab-bar/TabQuick.vue'
+import FoldButton from '../tab-bar/FoldButton.vue'
+
+const { hidden } = storeToRefs(useMultiTabsSettingStore())
+const { showFold, showRedo, showQuick } = storeToRefs(
+  useMultiTabsSettingStore(),
+)
+</script>
 <template>
-  <div class="grid-area-[grid-tab-nav] bg-[#0960bd]">tab</div>
+  <div
+    class="grid-area-[grid-tab-bar] bg-[#0960bd] grid grid-cols-2 content-center"
+    :class="[hidden ? 'invisible' : 'visible']"
+  >
+    <div class="h-[var(--tab-bar-height)] grid-col-start-1 grid-col-end-3">
+      Multiple Tab
+    </div>
+    <!--border-b border-[var(&#45;&#45;layout-border-color)]-->
+    <div class="h-[var(--tab-bar-height)] grid-col-[min-content] flex">
+      <TabRedo v-if="showRedo" />
+      <TabQuick v-if="showQuick" />
+      <FoldButton v-if="showFold" />
+    </div>
+  </div>
 </template>
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
new file mode 100644
index 00000000..814534d3
--- /dev/null
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useSporadicSettingStore,
+} from '../../store'
+import { storeToRefs } from '@vben/pinia'
+const { width } = storeToRefs(useMenuSettingStore())
+const { height } = storeToRefs(useHeaderSettingStore())
+const { showLogo } = storeToRefs(useSporadicSettingStore())
+
+const title = 'Vben Admin'
+</script>
+<template>
+  <div
+    v-if="showLogo"
+    class="grid grid-cols-2 content-center grid-rows-none"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      'grid-template-columns': '32px minmax(0, 1fr)',
+    }"
+  >
+    <div class="h-32px w-32px">
+      <img class="h-full w-full" src="assets/log.png" alt="logo" />
+    </div>
+    <div class="pr-6px truncate grid content-center">{{ title }}</div>
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/render.ts b/packages/grid-layouts/src/components/render.ts
new file mode 100644
index 00000000..4e287e53
--- /dev/null
+++ b/packages/grid-layouts/src/components/render.ts
@@ -0,0 +1,7 @@
+import { h } from 'vue'
+import { VbenIconify } from '@vben/vbencomponents'
+
+export const renderIcon = (icon: string) => {
+  if (!icon) return undefined
+  return () => h(VbenIconify, { icon })
+}
diff --git a/packages/grid-layouts/src/components/setting/FixedButton.vue b/packages/grid-layouts/src/components/setting/FixedButton.vue
index d1ec25f0..465d2bc8 100644
--- a/packages/grid-layouts/src/components/setting/FixedButton.vue
+++ b/packages/grid-layouts/src/components/setting/FixedButton.vue
@@ -5,10 +5,10 @@ const sporadicSettingStore = useSporadicSettingStore()
 <template>
   <div
     @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
-    class="p-10px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[#0960bd] cursor-pointer"
+    class="p-6px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[rgba(9,96,189,.9)] cursor-pointer"
   >
     <VbenIconify
-      size="22"
+      size="20"
       icon="material-symbols:settings-suggest-outline-rounded"
     />
   </div>
diff --git a/packages/grid-layouts/src/components/setting/components/Content.vue b/packages/grid-layouts/src/components/setting/components/Content.vue
index 72f1c300..79cfb316 100644
--- a/packages/grid-layouts/src/components/setting/components/Content.vue
+++ b/packages/grid-layouts/src/components/setting/components/Content.vue
@@ -12,22 +12,6 @@ import { storeToRefs } from '@vben/pinia'
 
 const { t } = useI18n()
 
-// const {
-//   getShowFooter,
-//   getShowBreadCrumb,
-//   getShowBreadCrumbIcon,
-//   getShowLogo,
-//   getFullContent,
-//   getColorWeak,
-//   getGrayMode,
-// } = useRootSetting()
-
-// const { getIsHorizontal, getShowMenu, getIsMixSidebar } = useMenuSetting()
-//
-// const { getShowHeader } = useHeaderSetting()
-//
-// const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } =
-//   useMultipleTabSetting()
 const {
   isMixSidebar,
   show: showMenu,
@@ -52,6 +36,11 @@ const { show: showHeader } = storeToRefs(useHeaderSettingStore())
 </script>
 <template>
   <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.header')"
+      :def="showHeader"
+      :event="HandlerSettingEnum.HEADER_SHOW"
+    />
     <SwitchItem
       :title="t('layout.setting.breadcrumb')"
       :def="showBreadCrumb"
@@ -62,7 +51,19 @@ const { show: showHeader } = storeToRefs(useHeaderSettingStore())
       :title="t('layout.setting.breadcrumbIcon')"
       :def="showBreadCrumbIcon"
       :event="HandlerSettingEnum.SHOW_BREADCRUMB_ICON"
-      :disabled="!showBreadCrumb"
+      :disabled="!showBreadCrumb || !showHeader"
+    />
+    <SwitchItem
+      :title="t('layout.setting.sidebar')"
+      :def="showMenu"
+      :event="HandlerSettingEnum.MENU_SHOW_SIDEBAR"
+      :disabled="isHorizontal"
+    />
+    <SwitchItem
+      title="Logo"
+      :def="showLogo"
+      :event="HandlerSettingEnum.SHOW_LOGO"
+      :disabled="isMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.tabs')"
@@ -87,23 +88,6 @@ const { show: showHeader } = storeToRefs(useHeaderSettingStore())
       :event="HandlerSettingEnum.TABS_SHOW_FOLD"
       :disabled="!showMultiTabs"
     />
-    <SwitchItem
-      :title="t('layout.setting.sidebar')"
-      :def="showMenu"
-      :event="HandlerSettingEnum.MENU_SHOW_SIDEBAR"
-      :disabled="isHorizontal"
-    />
-    <SwitchItem
-      :title="t('layout.setting.header')"
-      :def="showHeader"
-      :event="HandlerSettingEnum.HEADER_SHOW"
-    />
-    <SwitchItem
-      title="Logo"
-      :def="showLogo"
-      :event="HandlerSettingEnum.SHOW_LOGO"
-      :disabled="isMixSidebar"
-    />
     <SwitchItem
       :title="t('layout.setting.footer')"
       :def="showFooter"
diff --git a/packages/grid-layouts/src/components/setting/components/Transitions.vue b/packages/grid-layouts/src/components/setting/components/Transitions.vue
index b20b71c0..cb047536 100644
--- a/packages/grid-layouts/src/components/setting/components/Transitions.vue
+++ b/packages/grid-layouts/src/components/setting/components/Transitions.vue
@@ -35,7 +35,7 @@ const { openPageLoading, openNProgress, enable, basicTransition } = storeToRefs(
       :options="routerTransitionOptions"
       :def="basicTransition"
       :event="HandlerSettingEnum.ROUTER_TRANSITION"
-      :disabled="enable"
+      :disabled="!enable"
     />
   </VbenSpace>
 </template>
diff --git a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
new file mode 100644
index 00000000..686d0e6c
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const getIcon = computed(() =>
+  true ? 'codicon:screen-full' : 'codicon:screen-normal',
+)
+</script>
+
+<template>
+  <div
+    class="h-full w-36px grid-center border-l border-[var(--layout-border-color)] cursor-pointer"
+  >
+    <VbenIconify :icon="getIcon" />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabQuick.vue b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
new file mode 100644
index 00000000..1751dea6
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup></script>
+<template>
+  <div
+    class="h-full w-36px grid-center border-l border-[var(--layout-border-color)] cursor-pointer"
+  >
+    <VbenIconify
+      icon="material-symbols:double-arrow-rounded"
+      class="rotate-90"
+      rotate="90deg"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabRedo.vue b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
new file mode 100644
index 00000000..e24c3cf4
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { usePromise } from '@vben/hooks'
+
+function reload() {
+  return new Promise(async (resolve) => {
+    // await refreshPage()
+    setTimeout(() => {
+      resolve({})
+    }, 1000)
+  })
+}
+
+const { loading, handleFn: handleRedo } = usePromise(reload, {
+  immediate: false,
+})
+</script>
+
+<template>
+  <div
+    @click="handleRedo"
+    class="h-full w-36px border-l grid-center border-[var(--layout-border-color)] cursor-pointer"
+  >
+    <VbenIconify icon="ic:round-refresh" size="18" :infinite="loading" />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/trigger/inedx.vue b/packages/grid-layouts/src/components/trigger/inedx.vue
index b6d6ac23..b7f25791 100644
--- a/packages/grid-layouts/src/components/trigger/inedx.vue
+++ b/packages/grid-layouts/src/components/trigger/inedx.vue
@@ -5,15 +5,15 @@ import { TriggerEnum } from '@vben/constants'
 import CenterTrigger from './SiderCenterTrigger.vue'
 import FooterTrigger from './SiderFooterTrigger.vue'
 import HeaderTrigger from './HeaderTrigger.vue'
-const { trigger } = storeToRefs(useMenuSettingStore())
-const triggers = {
-  [TriggerEnum.HEADER]: HeaderTrigger,
-  [TriggerEnum.CENTER]: CenterTrigger,
-  [TriggerEnum.FOOTER]: FooterTrigger,
-}
+import { computed, defineComponent, unref } from 'vue'
+const { trigger, showHeaderTrigger } = storeToRefs(useMenuSettingStore())
+const component = computed<ReturnType<typeof defineComponent>>(() => {
+  if (unref(showHeaderTrigger)) return HeaderTrigger
+  if (unref(trigger) === TriggerEnum.CENTER) return CenterTrigger
+  if (unref(trigger) === TriggerEnum.FOOTER) return FooterTrigger
+  return undefined
+})
 </script>
 <template>
-  <Transition name="trigger" mode="out-in">
-    <component :is="triggers[trigger]" />
-  </Transition>
+  <component :is="component" />
 </template>
diff --git a/packages/grid-layouts/src/hooks/useComprehensive.ts b/packages/grid-layouts/src/hooks/useComprehensive.ts
index 752072a6..eaae148d 100644
--- a/packages/grid-layouts/src/hooks/useComprehensive.ts
+++ b/packages/grid-layouts/src/hooks/useComprehensive.ts
@@ -1,20 +1,47 @@
 import { useMenuSettingStore } from '../store/modules/menuSetting'
 import { computed } from 'vue'
+import {
+  useHeaderSettingStore,
+  useMultiTabsSettingStore,
+  useSporadicSettingStore,
+} from '../store'
 
 export const useComprehensive = () => {
   const menuSettingStore = useMenuSettingStore()
+  const headerSettingStore = useHeaderSettingStore()
+  const multipleTabStore = useMultiTabsSettingStore()
+  const sporadicSettingStore = useSporadicSettingStore()
   const getLayoutStyles = computed(() => {
-    let asideWidth = menuSettingStore.width
+    const getAsideWidth = () => {
+      if (menuSettingStore.isMixSidebar) return menuSettingStore.mixSidebarWidth
+      if (menuSettingStore.collapsed) return menuSettingStore.collapsedWidth
+      if (menuSettingStore.isTopMenu || menuSettingStore.hidden) return 0
+      return menuSettingStore.width
+    }
+
+    const getHeaderHeight = () => {
+      if (headerSettingStore.hidden) return 0
+      return headerSettingStore.height
+    }
 
-    if (menuSettingStore.isMixSidebar)
-      asideWidth = menuSettingStore.mixSidebarWidth
-    if (menuSettingStore.collapsed) asideWidth = menuSettingStore.collapsedWidth
-    if (menuSettingStore.isTopMenu) asideWidth = 0
+    const getTabBarHeight = () => {
+      if (multipleTabStore.hidden) return 0
+      return multipleTabStore.height
+    }
+
+    const getFooterHeight = () => {
+      if (sporadicSettingStore.hiddenFooter) return 0
+      return sporadicSettingStore.footerHeight
+    }
 
     return {
-      '--aside-width': asideWidth + 'px',
+      '--aside-width': `${getAsideWidth()}px`,
+      '--header-height': `${getHeaderHeight()}px`,
+      '--tab-bar-height': `${getTabBarHeight()}px`,
+      '--footer-height': `${getFooterHeight()}px`,
     }
   })
+
   return {
     getLayoutStyles,
   }
diff --git a/packages/grid-layouts/src/store/modules/headerSetting.ts b/packages/grid-layouts/src/store/modules/headerSetting.ts
index 131a506d..c53ff3be 100644
--- a/packages/grid-layouts/src/store/modules/headerSetting.ts
+++ b/packages/grid-layouts/src/store/modules/headerSetting.ts
@@ -12,6 +12,8 @@ export const useHeaderSettingStore = defineStore({
     fixed: true,
     // Whether to show top
     show: true,
+    // Whether to show dom
+    hidden: false,
     // theme
     theme: ThemeEnum.LIGHT,
     // Whether to enable the lock screen function
@@ -25,6 +27,7 @@ export const useHeaderSettingStore = defineStore({
     // Whether to display the menu search
     showSearch: true,
     showLocalePicker: true,
+    height: 48,
   }),
   getters: {
     isDark: (state) => state.theme === ThemeEnum.DARK,
@@ -38,6 +41,10 @@ export const useHeaderSettingStore = defineStore({
     },
     setShow(value: boolean) {
       this.show = value
+      this.setHidden(!value)
+    },
+    setHidden(value: boolean) {
+      this.hidden = value
     },
     setTheme(value: ThemeEnum) {
       this.theme = value
diff --git a/packages/grid-layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
index e3bf7569..94871911 100644
--- a/packages/grid-layouts/src/store/modules/menuSetting.ts
+++ b/packages/grid-layouts/src/store/modules/menuSetting.ts
@@ -111,6 +111,7 @@ export const useMenuSettingStore = defineStore({
     },
     setShow(value: boolean) {
       this.show = value
+      this.setHidden(!value)
     },
     setHidden(value: boolean) {
       this.hidden = value
diff --git a/packages/grid-layouts/src/store/modules/multiTabsSetting.ts b/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
index 36a77173..bc21de84 100644
--- a/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
+++ b/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
@@ -7,7 +7,8 @@ export const useMultiTabsSettingStore = defineStore({
   state: (): MultiTabsSetting => ({
     cache: false,
     // Turn on
-    show: true,
+    show: true, // Turn on
+    hidden: false,
     // Is it possible to drag and drop sorting tabs
     canDrag: true,
     // Turn on quick actions
@@ -16,6 +17,7 @@ export const useMultiTabsSettingStore = defineStore({
     showRedo: true,
     // Whether to show the collapse button
     showFold: true,
+    height: 36,
   }),
   getters: {},
   actions: {
@@ -24,6 +26,10 @@ export const useMultiTabsSettingStore = defineStore({
     },
     setShow(value: boolean) {
       this.show = value
+      this.hidden = !value
+    },
+    setHidden(value: boolean) {
+      this.hidden = value
     },
     setCanDrag(value: boolean) {
       this.canDrag = value
diff --git a/packages/grid-layouts/src/store/modules/sporadicSetting.ts b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
index 1608019f..f3c891f8 100644
--- a/packages/grid-layouts/src/store/modules/sporadicSetting.ts
+++ b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
@@ -40,6 +40,8 @@ export const useSporadicSettingStore = defineStore({
     showLogo: true,
     // Whether to show footer
     showFooter: false,
+    hiddenFooter: true,
+    footerHeight: 60,
     // Whether to open the top progress bar
     openNProgress: false,
     // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
@@ -106,6 +108,10 @@ export const useSporadicSettingStore = defineStore({
     },
     setShowFooter(value: boolean) {
       this.showFooter = value
+      this.setHiddenFooter(!value)
+    },
+    setHiddenFooter(value: boolean) {
+      this.hiddenFooter = value
     },
     setOpenNProgress(value: boolean) {
       this.openNProgress = value
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index 561398ed..69a5dd8d 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -24,8 +24,8 @@
   --header-width: calc(100% - var(--aside-width));
 
   /* tab */
-  --tab-height: 36px;
-  --tab-width: calc(100% - var(--aside-width));
+  --tab-bar-height: 36px;
+  --tab-bar-width: calc(100% - var(--aside-width));
 
   /* aside */
   --aside-height: calc(100% - var(--header-height));
diff --git a/packages/types/src/setting.ts b/packages/types/src/setting.ts
index e374f950..e40ee86c 100644
--- a/packages/types/src/setting.ts
+++ b/packages/types/src/setting.ts
@@ -41,16 +41,19 @@ export interface MenuSetting {
 export interface MultiTabsSetting {
   cache: boolean
   show: boolean
+  hidden: boolean
   showQuick: boolean
   canDrag: boolean
   showRedo: boolean
   showFold: boolean
+  readonly height: number
 }
 
 export interface HeaderSetting {
   bgColor: string
   fixed: boolean
   show: boolean
+  hidden: boolean
   theme: ThemeEnum
   // Turn on full screen
   showFullScreen: boolean
@@ -62,6 +65,7 @@ export interface HeaderSetting {
   showNotice: boolean
   showSearch: boolean
   showLocalePicker: boolean
+  readonly height: number
 }
 
 export interface LocaleSetting {
@@ -133,6 +137,8 @@ export interface SporadicSetting {
   showLogo: boolean
   // Whether to show the global footer
   showFooter: boolean
+  hiddenFooter: boolean
+  readonly footerHeight: number
 }
 
 export interface ProjectConfig extends SporadicSetting {

From 74d3ab09f85af218f29c8835be7c95cde96d6438 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Mon, 6 Feb 2023 23:59:51 +0800
Subject: [PATCH 12/22] pref: grid-layout setting

---
 .../components/composables/LayoutFooter.vue   |  2 +-
 .../components/composables/LayoutHeader.vue   |  4 ++-
 .../components/composables/LayoutSidebar.vue  | 13 ++++---
 .../src/components/logo/index.vue             | 36 +++++++++++++++----
 .../setting/components/Features.vue           |  2 +-
 .../src/components/tab-bar/FoldButton.vue     |  2 +-
 .../src/components/tab-bar/TabQuick.vue       |  2 +-
 .../src/components/tab-bar/TabRedo.vue        |  2 +-
 .../src/components/trigger/HeaderTrigger.vue  |  2 +-
 .../src/components/trigger/inedx.vue          |  5 ++-
 .../src/hooks/useComprehensive.ts             | 21 +++++++++--
 11 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index cc8370ce..e9abcb83 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -6,7 +6,7 @@ const { hiddenFooter } = storeToRefs(useSporadicSettingStore())
 </script>
 <template>
   <footer
-    class="bg-[blueviolet]"
+    class="bg-[blueviolet] overflow-hidden"
     :class="[hiddenFooter ? 'invisible' : 'visible']"
   >
     footer
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index ae1b6ca5..66707346 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -5,9 +5,11 @@ import { storeToRefs } from '@vben/pinia'
 import Setting from '../setting/index.vue'
 import Breadcrumb from '../breadcrumb/index.vue'
 import Logo from '../logo/index.vue'
+import { useComprehensive } from '../../hooks/useComprehensive'
 const menuSettingStore = useMenuSettingStore()
 const { showHeaderTrigger } = storeToRefs(menuSettingStore)
 const { hidden } = storeToRefs(useHeaderSettingStore())
+const { getShowHeaderLogo } = useComprehensive()
 </script>
 <template>
   <header
@@ -15,7 +17,7 @@ const { hidden } = storeToRefs(useHeaderSettingStore())
     :class="[hidden ? 'invisible' : 'visible']"
   >
     <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3 flex">
-      <Logo />
+      <Logo v-if="getShowHeaderLogo" />
       <Trigger v-if="showHeaderTrigger" />
       <Breadcrumb />
     </div>
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index deb43d32..a37b9203 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -3,7 +3,11 @@ import Trigger from '../trigger/inedx.vue'
 import { useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
 const menuSettingStore = useMenuSettingStore()
-const { showFooterTrigger, hidden } = storeToRefs(menuSettingStore)
+import Logo from '../logo/index.vue'
+import { useComprehensive } from '../../hooks/useComprehensive'
+const { showFooterTrigger, hidden, showHeaderTrigger } =
+  storeToRefs(menuSettingStore)
+const { getShowSidebarLogo } = useComprehensive()
 </script>
 <template>
   <div
@@ -13,11 +17,12 @@ const { showFooterTrigger, hidden } = storeToRefs(menuSettingStore)
       hidden ? 'invisible' : 'visible',
     ]"
   >
-    <!--    <div class="vben-grid-layout-sidebar__container"></div>-->
-    <div>sidebar</div>
+    <div>
+      <Logo v-if="getShowSidebarLogo" />
+    </div>
     <div
       class="h-full w-1px content-none absolute top-0 bottom-0 right-0 bg-[var(--layout-border-color)] transition-colors-3000"
     ></div>
-    <Trigger />
+    <Trigger v-if="!showHeaderTrigger" />
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
index 814534d3..8dc4ea30 100644
--- a/packages/grid-layouts/src/components/logo/index.vue
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -5,25 +5,49 @@ import {
   useSporadicSettingStore,
 } from '../../store'
 import { storeToRefs } from '@vben/pinia'
-const { width } = storeToRefs(useMenuSettingStore())
+import { useComprehensive } from '../../hooks/useComprehensive'
+import { computed, unref } from 'vue'
+const {
+  width,
+  collapsed,
+  collapsedWidth,
+  isSidebar,
+  isMixSidebar,
+  mixSidebarWidth,
+} = storeToRefs(useMenuSettingStore())
 const { height } = storeToRefs(useHeaderSettingStore())
 const { showLogo } = storeToRefs(useSporadicSettingStore())
+const { getShowLogoTitle } = useComprehensive()
+
+const getWidth = computed(() => {
+  if (unref(isSidebar) && unref(collapsed)) return unref(collapsedWidth)
+  if (unref(isMixSidebar)) return unref(mixSidebarWidth)
+  return unref(width)
+})
 
 const title = 'Vben Admin'
 </script>
 <template>
   <div
     v-if="showLogo"
-    class="grid grid-cols-2 content-center grid-rows-none"
+    class="grid grid-cols-2 content-center grid-rows-none pl-8px"
     :style="{
-      width: `${width}px`,
+      width: `${getWidth}px`,
       height: `${height}px`,
-      'grid-template-columns': '32px minmax(0, 1fr)',
+      transition: 'all 0.3s var(--transition-bezier)',
+      'grid-template-columns': `32px ${
+        getShowLogoTitle ? 'minmax(0, 1fr)' : 0
+      }`,
     }"
   >
     <div class="h-32px w-32px">
-      <img class="h-full w-full" src="assets/log.png" alt="logo" />
+      <img class="h-full w-full" src="assets/logo.png" alt="logo" />
+    </div>
+    <div
+      class="p-x-8px truncate grid content-center font-700 text-16px"
+      :class="[getShowLogoTitle ? 'visible' : 'invisible']"
+    >
+      {{ title }}
     </div>
-    <div class="pr-6px truncate grid content-center">{{ title }}</div>
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/setting/components/Features.vue b/packages/grid-layouts/src/components/setting/components/Features.vue
index c155be0e..fa858752 100644
--- a/packages/grid-layouts/src/components/setting/components/Features.vue
+++ b/packages/grid-layouts/src/components/setting/components/Features.vue
@@ -131,7 +131,7 @@ const getMenuDisabled = computed(() => {
       :options="triggerOptions"
       :def="trigger"
       :event="HandlerSettingEnum.MENU_TRIGGER"
-      :disabled="!getMenuDisabled || isMixSidebar"
+      :disabled="isMixSidebar || isTopMenu || (isMix && isHorizontal)"
     />
     <SelectItem
       :title="t('layout.setting.contentMode')"
diff --git a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
index 686d0e6c..e48db9a2 100644
--- a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
+++ b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
@@ -8,7 +8,7 @@ const getIcon = computed(() =>
 
 <template>
   <div
-    class="h-full w-36px grid-center border-l border-[var(--layout-border-color)] cursor-pointer"
+    class="h-full w-36px grid-center border-l border-l-solid border-[var(--layout-border-color)] cursor-pointer"
   >
     <VbenIconify :icon="getIcon" />
   </div>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabQuick.vue b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
index 1751dea6..fb82a456 100644
--- a/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
+++ b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 <template>
   <div
-    class="h-full w-36px grid-center border-l border-[var(--layout-border-color)] cursor-pointer"
+    class="h-full w-36px grid-center border-l border-l-solid border-[var(--layout-border-color)] cursor-pointer"
   >
     <VbenIconify
       icon="material-symbols:double-arrow-rounded"
diff --git a/packages/grid-layouts/src/components/tab-bar/TabRedo.vue b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
index e24c3cf4..dee61e90 100644
--- a/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
+++ b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
@@ -18,7 +18,7 @@ const { loading, handleFn: handleRedo } = usePromise(reload, {
 <template>
   <div
     @click="handleRedo"
-    class="h-full w-36px border-l grid-center border-[var(--layout-border-color)] cursor-pointer"
+    class="h-full w-36px grid-center border-l border-l-solid border-[var(--layout-border-color)] cursor-pointer"
   >
     <VbenIconify icon="ic:round-refresh" size="18" :infinite="loading" />
   </div>
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
index ac20e0b5..876735d6 100644
--- a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
@@ -7,7 +7,7 @@ const { collapsed } = storeToRefs(menuSettingStore)
 </script>
 <template>
   <div
-    class="h-full p-x-12px grid-center cursor-pointer bg-[var(--trigger-color)]"
+    class="h-full p-x-12px grid-center cursor-pointer"
     @click.stop="menuSettingStore.toggleCollapsed()"
   >
     <VbenIconify
diff --git a/packages/grid-layouts/src/components/trigger/inedx.vue b/packages/grid-layouts/src/components/trigger/inedx.vue
index b7f25791..e317742f 100644
--- a/packages/grid-layouts/src/components/trigger/inedx.vue
+++ b/packages/grid-layouts/src/components/trigger/inedx.vue
@@ -6,8 +6,11 @@ import CenterTrigger from './SiderCenterTrigger.vue'
 import FooterTrigger from './SiderFooterTrigger.vue'
 import HeaderTrigger from './HeaderTrigger.vue'
 import { computed, defineComponent, unref } from 'vue'
-const { trigger, showHeaderTrigger } = storeToRefs(useMenuSettingStore())
+const { trigger, showHeaderTrigger, isMixSidebar } = storeToRefs(
+  useMenuSettingStore(),
+)
 const component = computed<ReturnType<typeof defineComponent>>(() => {
+  if (unref(isMixSidebar)) return FooterTrigger
   if (unref(showHeaderTrigger)) return HeaderTrigger
   if (unref(trigger) === TriggerEnum.CENTER) return CenterTrigger
   if (unref(trigger) === TriggerEnum.FOOTER) return FooterTrigger
diff --git a/packages/grid-layouts/src/hooks/useComprehensive.ts b/packages/grid-layouts/src/hooks/useComprehensive.ts
index eaae148d..1b55e357 100644
--- a/packages/grid-layouts/src/hooks/useComprehensive.ts
+++ b/packages/grid-layouts/src/hooks/useComprehensive.ts
@@ -13,9 +13,9 @@ export const useComprehensive = () => {
   const sporadicSettingStore = useSporadicSettingStore()
   const getLayoutStyles = computed(() => {
     const getAsideWidth = () => {
-      if (menuSettingStore.isMixSidebar) return menuSettingStore.mixSidebarWidth
-      if (menuSettingStore.collapsed) return menuSettingStore.collapsedWidth
       if (menuSettingStore.isTopMenu || menuSettingStore.hidden) return 0
+      if (menuSettingStore.collapsed) return menuSettingStore.collapsedWidth
+      if (menuSettingStore.isMixSidebar) return menuSettingStore.mixSidebarWidth
       return menuSettingStore.width
     }
 
@@ -42,7 +42,24 @@ export const useComprehensive = () => {
     }
   })
 
+  const getShowSidebarLogo = computed(() => {
+    return menuSettingStore.isSidebar || menuSettingStore.isMixSidebar
+  })
+
+  const getShowHeaderLogo = computed(() => {
+    return menuSettingStore.isTopMenu || menuSettingStore.isMix
+  })
+
+  const getShowLogoTitle = computed(() => {
+    if (menuSettingStore.isSidebar) return !menuSettingStore.collapsed
+    if (menuSettingStore.isMixSidebar) return false
+    return true
+  })
+
   return {
     getLayoutStyles,
+    getShowSidebarLogo,
+    getShowHeaderLogo,
+    getShowLogoTitle,
   }
 }

From 0bd2c1239ce2626709ca0dbc6a48dfbcd0d6c520 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Tue, 7 Feb 2023 18:05:54 +0800
Subject: [PATCH 13/22] pref: grid-layout setting

---
 .../grid-layouts/src/components/Layout.vue    |   1 -
 .../src/components/comm/SecondaryBorder.vue   |  26 ++
 .../src/components/comm/TopButtonWrapper.vue  |   9 +
 .../components/composables/LayoutContent.vue  |   1 -
 .../components/composables/LayoutFooter.vue   |   4 +-
 .../components/composables/LayoutHeader.vue   |  22 +-
 .../components/composables/LayoutSidebar.vue  |  11 +-
 .../src/components/composables/LayoutTab.vue  |   7 +-
 .../src/components/feature/index.vue          |   6 +-
 .../src/components/logo/index.vue             |   5 +-
 .../src/components/notify/index.vue           |   9 +
 .../components/DarkModeToggle.vue             |   0
 .../components/HandleButtons.vue              |  29 +++
 .../components/InputNumberItem.vue            |   4 +-
 .../components/InterfaceDisplay.vue}          |   0
 .../components/InterfaceFunction.vue}         |   2 +-
 .../components/NavigationBarPicker.vue        |   0
 .../components/SelectItem.vue                 |   4 +-
 .../components/SwitchItem.vue                 |   4 +-
 .../components/ThemeColorPicker.vue           |   4 +-
 .../components/Transitions.vue                |   0
 .../index.vue}                                |  24 +-
 .../src/components/setting/FixedButton.vue    |  15 --
 .../setting/components/FooterButtons.vue      |  74 ------
 .../setting/components/SettingDrawer.vue      | 103 --------
 .../src/components/setting/index.vue          |  15 --
 .../src/components/tab-bar/FoldButton.vue     |   7 +-
 .../components/tab-bar/SuffixItemWrapper.vue  |   9 +
 .../src/components/tab-bar/TabQuick.vue       |  10 +-
 .../src/components/tab-bar/TabRedo.vue        |  10 +-
 .../src/components/trigger/HeaderTrigger.vue  |   8 +-
 .../src/components/widgets/FixedSetting.vue   |  31 +++
 .../src/components/widgets/FullScreen.vue     |   9 +
 .../src/components/widgets/Locale.vue         |   8 +
 .../src/components/widgets/Search.vue         |   8 +
 .../src/components/widgets/Setting.vue        |  31 +++
 .../src/components/widgets/UserDropdown.vue   |  13 +
 packages/grid-layouts/src/hooks/useHandler.ts | 224 ++++++++++++++++++
 packages/grid-layouts/src/logics/handler.ts   | 185 ---------------
 packages/grid-layouts/tsconfig.json           |  14 ++
 40 files changed, 495 insertions(+), 451 deletions(-)
 create mode 100644 packages/grid-layouts/src/components/comm/SecondaryBorder.vue
 create mode 100644 packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
 create mode 100644 packages/grid-layouts/src/components/notify/index.vue
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/DarkModeToggle.vue (100%)
 create mode 100644 packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/InputNumberItem.vue (90%)
 rename packages/grid-layouts/src/components/{setting/components/Content.vue => setting-drawer/components/InterfaceDisplay.vue} (100%)
 rename packages/grid-layouts/src/components/{setting/components/Features.vue => setting-drawer/components/InterfaceFunction.vue} (99%)
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/NavigationBarPicker.vue (100%)
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/SelectItem.vue (92%)
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/SwitchItem.vue (90%)
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/ThemeColorPicker.vue (93%)
 rename packages/grid-layouts/src/components/{setting => setting-drawer}/components/Transitions.vue (100%)
 rename packages/grid-layouts/src/components/{setting/SettingDrawer.vue => setting-drawer/index.vue} (85%)
 delete mode 100644 packages/grid-layouts/src/components/setting/FixedButton.vue
 delete mode 100644 packages/grid-layouts/src/components/setting/components/FooterButtons.vue
 delete mode 100644 packages/grid-layouts/src/components/setting/components/SettingDrawer.vue
 delete mode 100644 packages/grid-layouts/src/components/setting/index.vue
 create mode 100644 packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/FixedSetting.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/FullScreen.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/Locale.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/Search.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/Setting.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/UserDropdown.vue
 create mode 100644 packages/grid-layouts/src/hooks/useHandler.ts
 delete mode 100644 packages/grid-layouts/src/logics/handler.ts
 create mode 100644 packages/grid-layouts/tsconfig.json

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 2435eb92..0f85f465 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -40,7 +40,6 @@ const { type } = storeToRefs(useMenuSettingStore())
   display: grid;
   grid-template-columns: minmax(0, var(--aside-width)) minmax(640px, 1fr);
   grid-template-rows: var(--header-height) var(--tab-bar-height) 1fr;
-  grid-gap: 3px;
   transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
   transition-timing-function: var(--transition-bezier);
   &.sidebar,
diff --git a/packages/grid-layouts/src/components/comm/SecondaryBorder.vue b/packages/grid-layouts/src/components/comm/SecondaryBorder.vue
new file mode 100644
index 00000000..f69f0c49
--- /dev/null
+++ b/packages/grid-layouts/src/components/comm/SecondaryBorder.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  top: { type: Boolean, default: false },
+  bottom: { type: Boolean, default: false },
+  right: { type: Boolean, default: false },
+  left: { type: Boolean, default: false },
+  shadow: { type: Boolean, default: false },
+})
+</script>
+<template>
+  <div
+    class="content-none absolute right-0 bg-[var(--layout-border-color)] transition-colors-300"
+    :class="[
+      top || bottom ? 'h-1px w-full' : 'h-full w-1px',
+      {
+        'top-0': right || left || top,
+        'right-0': right,
+        'bottom-0': bottom,
+        'left-0': left || top || bottom,
+        shadow: shadow,
+      },
+    ]"
+  ></div>
+</template>
diff --git a/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue b/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
new file mode 100644
index 00000000..bca5b182
--- /dev/null
+++ b/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+<template>
+  <!-- 2424 -->
+  <div
+    class="h-full p-x-12px grid-center cursor-pointer hover:bg-[#f6f6f6] transition-colors-300"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
index 7c3d8ee5..0e9be2a7 100644
--- a/packages/grid-layouts/src/components/composables/LayoutContent.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -17,6 +17,5 @@ const { footerRef } = storeToRefs(useLayoutFooter())
   grid-template-rows: 1fr minmax(0, var(--footer-height));
   transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
   transition-timing-function: var(--transition-bezier);
-  background: #ed6f6f;
 }
 </style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index e9abcb83..2ced573a 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import { useSporadicSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
 
 const { hiddenFooter } = storeToRefs(useSporadicSettingStore())
 </script>
 <template>
   <footer
-    class="bg-[blueviolet] overflow-hidden"
+    class="overflow-hidden relative"
     :class="[hiddenFooter ? 'invisible' : 'visible']"
   >
     footer
+    <SecondaryBorder top />
   </footer>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index 66707346..eccc87f8 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -2,27 +2,39 @@
 import Trigger from '../trigger/inedx.vue'
 import { useHeaderSettingStore, useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
-import Setting from '../setting/index.vue'
 import Breadcrumb from '../breadcrumb/index.vue'
 import Logo from '../logo/index.vue'
 import { useComprehensive } from '../../hooks/useComprehensive'
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import FullScreen from '../widgets/FullScreen.vue'
+import Search from '../widgets/Search.vue'
+import Locale from '../widgets/Locale.vue'
+import UserDropdown from '../widgets/UserDropdown.vue'
+import Notify from '../notify/index.vue'
+import Setting from '../widgets/Setting.vue'
 const menuSettingStore = useMenuSettingStore()
-const { showHeaderTrigger } = storeToRefs(menuSettingStore)
+const { showHeaderTrigger, isMixSidebar } = storeToRefs(menuSettingStore)
 const { hidden } = storeToRefs(useHeaderSettingStore())
 const { getShowHeaderLogo } = useComprehensive()
 </script>
 <template>
   <header
-    class="grid-area-[grid-header] bg-[#666666] grid grid-cols-2 content-center"
+    class="grid-area-[grid-header] grid grid-cols-2 content-center overflow-hidden relative"
     :class="[hidden ? 'invisible' : 'visible']"
   >
     <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3 flex">
       <Logo v-if="getShowHeaderLogo" />
-      <Trigger v-if="showHeaderTrigger" />
+      <Trigger v-if="showHeaderTrigger && !isMixSidebar" />
       <Breadcrumb />
     </div>
-    <div class="h-[var(--header-height)] grid-col-[min-content]">
+    <div class="h-[var(--header-height)] grid-col-[min-content] flex">
+      <Search />
+      <Notify />
+      <FullScreen />
+      <Locale />
+      <UserDropdown />
       <Setting />
     </div>
+    <SecondaryBorder bottom shadow />
   </header>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index a37b9203..2e859f0d 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -5,7 +5,8 @@ import { storeToRefs } from '@vben/pinia'
 const menuSettingStore = useMenuSettingStore()
 import Logo from '../logo/index.vue'
 import { useComprehensive } from '../../hooks/useComprehensive'
-const { showFooterTrigger, hidden, showHeaderTrigger } =
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+const { showFooterTrigger, hidden, showHeaderTrigger, isMixSidebar } =
   storeToRefs(menuSettingStore)
 const { getShowSidebarLogo } = useComprehensive()
 </script>
@@ -14,15 +15,13 @@ const { getShowSidebarLogo } = useComprehensive()
     class="grid-area-[grid-sidebar] relative"
     :class="[
       { 'pb-40px': showFooterTrigger },
-      hidden ? 'invisible' : 'visible',
+      hidden ? 'invisible overflow-hidden' : 'visible',
     ]"
   >
     <div>
       <Logo v-if="getShowSidebarLogo" />
     </div>
-    <div
-      class="h-full w-1px content-none absolute top-0 bottom-0 right-0 bg-[var(--layout-border-color)] transition-colors-3000"
-    ></div>
-    <Trigger v-if="!showHeaderTrigger" />
+    <SecondaryBorder right />
+    <Trigger v-if="!showHeaderTrigger || isMixSidebar" />
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
index dd2f3507..15bac88e 100644
--- a/packages/grid-layouts/src/components/composables/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from '@vben/pinia'
 import TabRedo from '../tab-bar/TabRedo.vue'
 import TabQuick from '../tab-bar/TabQuick.vue'
 import FoldButton from '../tab-bar/FoldButton.vue'
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
 
 const { hidden } = storeToRefs(useMultiTabsSettingStore())
 const { showFold, showRedo, showQuick } = storeToRefs(
@@ -12,17 +13,19 @@ const { showFold, showRedo, showQuick } = storeToRefs(
 </script>
 <template>
   <div
-    class="grid-area-[grid-tab-bar] bg-[#0960bd] grid grid-cols-2 content-center"
+    class="grid-area-[grid-tab-bar] grid grid-cols-2 content-center overflow-hidden relative"
     :class="[hidden ? 'invisible' : 'visible']"
   >
     <div class="h-[var(--tab-bar-height)] grid-col-start-1 grid-col-end-3">
       Multiple Tab
     </div>
     <!--border-b border-[var(&#45;&#45;layout-border-color)]-->
-    <div class="h-[var(--tab-bar-height)] grid-col-[min-content] flex">
+    <div class="h-[var(--tab-bar-height)] grid-col-[min-content] flex relative">
       <TabRedo v-if="showRedo" />
       <TabQuick v-if="showQuick" />
       <FoldButton v-if="showFold" />
+      <SecondaryBorder bottom />
     </div>
+    <SecondaryBorder bottom />
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/feature/index.vue b/packages/grid-layouts/src/components/feature/index.vue
index 44b2c7a6..df3d2c9c 100644
--- a/packages/grid-layouts/src/components/feature/index.vue
+++ b/packages/grid-layouts/src/components/feature/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import SettingFixedButton from '../setting/FixedButton.vue'
-import SettingDrawer from '../setting/SettingDrawer.vue'
+import SettingDrawer from '../setting-drawer/index.vue'
+import FixedSetting from '../widgets/FixedSetting.vue'
 </script>
 <template>
-  <SettingFixedButton />
+  <FixedSetting />
   <SettingDrawer />
 </template>
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
index 8dc4ea30..e844a9c1 100644
--- a/packages/grid-layouts/src/components/logo/index.vue
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -7,6 +7,7 @@ import {
 import { storeToRefs } from '@vben/pinia'
 import { useComprehensive } from '../../hooks/useComprehensive'
 import { computed, unref } from 'vue'
+import logo from '@/assets/images/logo.png'
 const {
   width,
   collapsed,
@@ -30,7 +31,7 @@ const title = 'Vben Admin'
 <template>
   <div
     v-if="showLogo"
-    class="grid grid-cols-2 content-center grid-rows-none pl-8px"
+    class="grid grid-cols-2 content-center grid-rows-none pl-8px transition-all-300"
     :style="{
       width: `${getWidth}px`,
       height: `${height}px`,
@@ -41,7 +42,7 @@ const title = 'Vben Admin'
     }"
   >
     <div class="h-32px w-32px">
-      <img class="h-full w-full" src="assets/logo.png" alt="logo" />
+      <img class="h-full w-full" :src="logo" alt="logo" />
     </div>
     <div
       class="p-x-8px truncate grid content-center font-700 text-16px"
diff --git a/packages/grid-layouts/src/components/notify/index.vue b/packages/grid-layouts/src/components/notify/index.vue
new file mode 100644
index 00000000..7f0f7655
--- /dev/null
+++ b/packages/grid-layouts/src/components/notify/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <!--    <VbenIconify icon="system-uicons:bell-ringing" />-->
+    <VbenIconify icon="system-uicons:bell-snooze" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/DarkModeToggle.vue b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
similarity index 100%
rename from packages/grid-layouts/src/components/setting/components/DarkModeToggle.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue b/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
new file mode 100644
index 00000000..a6b58660
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useI18n } from '@vben/locale'
+import { useHandler } from '../../../hooks/useHandler'
+
+const { t } = useI18n()
+const { copySetting, resetSetting, clearAndRedo } = useHandler()
+</script>
+<template>
+  <VbenSpace vertical>
+    <VbenButton type="info" block @click="copySetting">
+      <template #icon>
+        <VbenIconify icon="ant-design:snippets-twotone" />
+      </template>
+      {{ t('layout.setting.copyBtn') }}
+    </VbenButton>
+    <VbenButton type="warning" @click="resetSetting" block>
+      <template #icon>
+        <VbenIconify icon="ant-design:reload-outlined" />
+      </template>
+      {{ t('common.resetText') }}
+    </VbenButton>
+    <VbenButton type="error" block @click="clearAndRedo">
+      <template #icon>
+        <VbenIconify icon="ant-design:redo-outlined" />
+      </template>
+      {{ t('layout.setting.clearBtn') }}
+    </VbenButton>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting/components/InputNumberItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
similarity index 90%
rename from packages/grid-layouts/src/components/setting/components/InputNumberItem.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
index bc6d202e..048bc715 100644
--- a/packages/grid-layouts/src/components/setting/components/InputNumberItem.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="InputNumberItem">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { baseHandler } from '../../../logics/handler'
+import { useHandler } from '../../../hooks/useHandler'
 
 const props = defineProps({
   title: { type: String, default: '' },
@@ -16,6 +16,8 @@ const props = defineProps({
   },
   suffix: { type: String, default: '' },
 })
+
+const { baseHandler } = useHandler()
 const onChange = (value) => {
   baseHandler(props.event, value)
 }
diff --git a/packages/grid-layouts/src/components/setting/components/Content.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
similarity index 100%
rename from packages/grid-layouts/src/components/setting/components/Content.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
diff --git a/packages/grid-layouts/src/components/setting/components/Features.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
similarity index 99%
rename from packages/grid-layouts/src/components/setting/components/Features.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
index fa858752..7a1d697b 100644
--- a/packages/grid-layouts/src/components/setting/components/Features.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
@@ -74,7 +74,7 @@ const getMenuDisabled = computed(() => {
       :title="t('layout.setting.menuCollapse')"
       :def="collapsed"
       :event="HandlerSettingEnum.MENU_COLLAPSED"
-      :disabled="!getMenuDisabled"
+      :disabled="isTopMenu"
     />
     <SwitchItem
       :title="t('layout.setting.menuDrag')"
diff --git a/packages/grid-layouts/src/components/setting/components/NavigationBarPicker.vue b/packages/grid-layouts/src/components/setting-drawer/components/NavigationBarPicker.vue
similarity index 100%
rename from packages/grid-layouts/src/components/setting/components/NavigationBarPicker.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/NavigationBarPicker.vue
diff --git a/packages/grid-layouts/src/components/setting/components/SelectItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
similarity index 92%
rename from packages/grid-layouts/src/components/setting/components/SelectItem.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
index fba36eb1..078c8773 100644
--- a/packages/grid-layouts/src/components/setting/components/SelectItem.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup name="SelectItem">
 import { PropType, h } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { baseHandler } from '../../../logics/handler'
 import { useI18n } from '@vben/locale'
+import { useHandler } from '../../../hooks/useHandler'
 
 const { t } = useI18n()
 
@@ -19,6 +19,8 @@ const props = defineProps({
   },
   options: { type: Array, default: () => [] },
 })
+
+const { baseHandler } = useHandler()
 const onChange = (value) => {
   baseHandler(props.event, value)
 }
diff --git a/packages/grid-layouts/src/components/setting/components/SwitchItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
similarity index 90%
rename from packages/grid-layouts/src/components/setting/components/SwitchItem.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
index fbc977ce..dd872c23 100644
--- a/packages/grid-layouts/src/components/setting/components/SwitchItem.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SwitchItem">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { baseHandler } from '../../../logics/handler'
+import { useHandler } from '../../../hooks/useHandler'
 
 const props = defineProps({
   title: { type: String, default: '' },
@@ -15,6 +15,8 @@ const props = defineProps({
     type: Boolean,
   },
 })
+
+const { baseHandler } = useHandler()
 const onChange = (value) => {
   baseHandler(props.event, value)
 }
diff --git a/packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue b/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
similarity index 93%
rename from packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
index 8d4b834f..10017bab 100644
--- a/packages/grid-layouts/src/components/setting/components/ThemeColorPicker.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="ThemeColorPicker">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { baseHandler } from '../../../logics/handler'
+import { useHandler } from '../../../hooks/useHandler'
 
 const props = defineProps({
   colorList: {
@@ -16,6 +16,8 @@ const props = defineProps({
     default: '',
   },
 })
+
+const { baseHandler } = useHandler()
 const handleClick = (color) => {
   baseHandler(props.event, color)
 }
diff --git a/packages/grid-layouts/src/components/setting/components/Transitions.vue b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
similarity index 100%
rename from packages/grid-layouts/src/components/setting/components/Transitions.vue
rename to packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
diff --git a/packages/grid-layouts/src/components/setting/SettingDrawer.vue b/packages/grid-layouts/src/components/setting-drawer/index.vue
similarity index 85%
rename from packages/grid-layouts/src/components/setting/SettingDrawer.vue
rename to packages/grid-layouts/src/components/setting-drawer/index.vue
index b22dcf52..5d1d4c6c 100644
--- a/packages/grid-layouts/src/components/setting/SettingDrawer.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/index.vue
@@ -2,14 +2,11 @@
 import {
   useHeaderSettingStore,
   useMenuSettingStore,
-  useMultiTabsSettingStore,
   useSporadicSettingStore,
-  useTransitionSettingStore,
 } from '../../store'
 import { storeToRefs } from '@vben/pinia'
 import { useI18n } from '@vben/locale'
 import { navigationBarTypeList } from '../../logics/constant'
-import { baseHandler } from '../../logics/handler'
 import {
   HandlerSettingEnum,
   APP_PRESET_COLOR_LIST,
@@ -20,10 +17,11 @@ import {
 import DarkModeToggle from './components/DarkModeToggle.vue'
 import NavigationBarPicker from './components/NavigationBarPicker.vue'
 import ThemeColorPicker from './components/ThemeColorPicker.vue'
-import Features from './components/Features.vue'
-import Content from './components/Content.vue'
 import Transitions from './components/Transitions.vue'
-import FooterButtons from './components/FooterButtons.vue'
+import InterfaceFunction from './components/InterfaceFunction.vue'
+import InterfaceDisplay from './components/InterfaceDisplay.vue'
+import HandleButtons from './components/HandleButtons.vue'
+import { useHandler } from '../../hooks/useHandler'
 
 const { t } = useI18n()
 const sporadicSettingStore = useSporadicSettingStore()
@@ -36,10 +34,8 @@ const {
 } = storeToRefs(menuSettingStore)
 const headerSettingStore = useHeaderSettingStore()
 const { bgColor: headerBgColor } = storeToRefs(headerSettingStore)
-const multiTabsSettingStore = useMultiTabsSettingStore()
-const {} = storeToRefs(multiTabsSettingStore)
-const transitionSettingStore = useTransitionSettingStore()
-const {} = storeToRefs(transitionSettingStore)
+
+const { baseHandler } = useHandler()
 </script>
 
 <template>
@@ -102,18 +98,20 @@ const {} = storeToRefs(transitionSettingStore)
       <VbenDivider title-placement="left">
         {{ t('layout.setting.interfaceFunction') }}
       </VbenDivider>
-      <Features />
+      <InterfaceFunction />
 
       <VbenDivider title-placement="left">
         {{ t('layout.setting.interfaceDisplay') }}
       </VbenDivider>
-      <Content />
+      <InterfaceDisplay />
+
       <VbenDivider title-placement="left">
         {{ t('layout.setting.animation') }}
       </VbenDivider>
       <Transitions />
       <VbenDivider />
-      <FooterButtons />
+
+      <HandleButtons />
     </VbenDrawerContent>
   </VbenDrawer>
 </template>
diff --git a/packages/grid-layouts/src/components/setting/FixedButton.vue b/packages/grid-layouts/src/components/setting/FixedButton.vue
deleted file mode 100644
index 465d2bc8..00000000
--- a/packages/grid-layouts/src/components/setting/FixedButton.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import { useSporadicSettingStore } from '../../store'
-const sporadicSettingStore = useSporadicSettingStore()
-</script>
-<template>
-  <div
-    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
-    class="p-6px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[rgba(9,96,189,.9)] cursor-pointer"
-  >
-    <VbenIconify
-      size="20"
-      icon="material-symbols:settings-suggest-outline-rounded"
-    />
-  </div>
-</template>
diff --git a/packages/grid-layouts/src/components/setting/components/FooterButtons.vue b/packages/grid-layouts/src/components/setting/components/FooterButtons.vue
deleted file mode 100644
index 5a8da527..00000000
--- a/packages/grid-layouts/src/components/setting/components/FooterButtons.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts" setup>
-import { useI18n } from '@vben/locale'
-import { reactive } from 'vue'
-import { useClipboard } from '@vben/utils'
-import { storeToRefs } from '@vben/pinia'
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useMultiTabsSettingStore,
-  useSporadicSettingStore,
-  useTransitionSettingStore,
-} from '../../../store'
-
-const { t } = useI18n()
-const sporadicSettingStore = useSporadicSettingStore()
-const menuSettingStore = useMenuSettingStore()
-const headerSettingStore = useHeaderSettingStore()
-const multiTabsSettingStore = useMultiTabsSettingStore()
-const transitionSettingStore = useTransitionSettingStore()
-
-const handleCopy = () => {
-  try {
-    const { copy, isSupported } = useClipboard()
-    if (!isSupported)
-      return console.error('Your browser does not support Clipboard API')
-    const source = reactive({
-      SporadicSetting: storeToRefs(sporadicSettingStore),
-      MenuSetting: storeToRefs(menuSettingStore),
-      HeaderSetting: storeToRefs(headerSettingStore),
-      MultiTabsSetting: storeToRefs(multiTabsSettingStore),
-      TransitionSetting: storeToRefs(transitionSettingStore),
-    })
-    copy(JSON.stringify(source))
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const handleReset = () => {
-  sporadicSettingStore.$reset()
-  menuSettingStore.$reset()
-  headerSettingStore.$reset()
-  multiTabsSettingStore.$reset()
-  transitionSettingStore.$reset()
-}
-
-const handleClearAndRedo = () => {
-  localStorage.clear()
-  sessionStorage.clear()
-  location.reload()
-}
-</script>
-<template>
-  <VbenSpace vertical>
-    <VbenButton type="info" block @click="handleCopy">
-      <template #icon>
-        <VbenIconify icon="ant-design:snippets-twotone" />
-      </template>
-      {{ t('layout.setting.copyBtn') }}
-    </VbenButton>
-    <VbenButton type="warning" @click="handleReset" block>
-      <template #icon>
-        <VbenIconify icon="ant-design:reload-outlined" />
-      </template>
-      {{ t('common.resetText') }}
-    </VbenButton>
-    <VbenButton type="error" block @click="handleClearAndRedo">
-      <template #icon>
-        <VbenIconify icon="ant-design:redo-outlined" />
-      </template>
-      {{ t('layout.setting.clearBtn') }}
-    </VbenButton>
-  </VbenSpace>
-</template>
diff --git a/packages/grid-layouts/src/components/setting/components/SettingDrawer.vue b/packages/grid-layouts/src/components/setting/components/SettingDrawer.vue
deleted file mode 100644
index 6b0c2b20..00000000
--- a/packages/grid-layouts/src/components/setting/components/SettingDrawer.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts" setup>
-import DarkModeToggle from './DarkModeToggle.vue'
-import NavigationBarPicker from './NavigationBarPicker.vue'
-import ThemeColorPicker from './ThemeColorPicker.vue'
-import Features from './Features.vue'
-import Content from './Content.vue'
-import Transitions from './Transitions.vue'
-import FooterButtons from './FooterButtons.vue'
-import { baseHandler } from '../handler'
-import {
-  APP_PRESET_COLOR_LIST,
-  HEADER_PRESET_BG_COLOR_LIST,
-  SIDE_BAR_BG_COLOR_LIST,
-  HandlerSettingEnum,
-} from '@vben/constants'
-import { context } from '../../../../bridge'
-import { navigationBarTypeList } from '../constant'
-import { useI18n } from '@vben/locale'
-
-const { t } = useI18n()
-
-const { useMenuSetting, useHeaderSetting, useRootSetting } = context
-
-const { getShowDarkModeToggle, getThemeColor } = useRootSetting()
-const { getIsHorizontal, getMenuType, getMenuBgColor } = useMenuSetting()
-const { getHeaderBgColor } = useHeaderSetting()
-
-defineProps({
-  visible: { type: Boolean, default: false },
-})
-const emit = defineEmits(['update:visible'])
-const onVisible = (show: boolean) => {
-  emit('update:visible', show)
-}
-</script>
-
-<template>
-  <VbenDrawer :show="visible" @update:show="onVisible" :width="330">
-    <VbenDrawerContent closable>
-      <template #header>{{ t('layout.setting.drawerTitle') }}</template>
-      <template v-if="getShowDarkModeToggle">
-        <VbenDivider title-placement="left">{{
-          t('layout.setting.darkMode')
-        }}</VbenDivider>
-        <DarkModeToggle />
-      </template>
-      <VbenDivider title-placement="left">{{
-        t('layout.setting.navMode')
-      }}</VbenDivider>
-      <NavigationBarPicker
-        :def="getMenuType"
-        :type-list="navigationBarTypeList"
-        @handler="
-          (item) => {
-            baseHandler(HandlerSettingEnum.CHANGE_LAYOUT, {
-              mode: item.mode,
-              type: item.type,
-              split: getIsHorizontal ? false : undefined,
-            })
-          }
-        "
-      />
-      <VbenDivider title-placement="left">{{
-        t('layout.setting.sysTheme')
-      }}</VbenDivider>
-      <ThemeColorPicker
-        :def="getThemeColor"
-        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
-        :color-list="APP_PRESET_COLOR_LIST"
-      />
-      <VbenDivider title-placement="left">{{
-        t('layout.setting.headerTheme')
-      }}</VbenDivider>
-      <ThemeColorPicker
-        :def="getHeaderBgColor"
-        :event="HandlerSettingEnum.HEADER_THEME"
-        :color-list="HEADER_PRESET_BG_COLOR_LIST"
-      />
-      <VbenDivider title-placement="left">{{
-        t('layout.setting.sidebarTheme')
-      }}</VbenDivider>
-      <ThemeColorPicker
-        :def="getMenuBgColor"
-        :event="HandlerSettingEnum.MENU_THEME"
-        :color-list="SIDE_BAR_BG_COLOR_LIST"
-      />
-      <VbenDivider title-placement="left"
-        >{{ t('layout.setting.interfaceFunction') }}
-      </VbenDivider>
-      <Features />
-      <VbenDivider title-placement="left">{{
-        t('layout.setting.interfaceDisplay')
-      }}</VbenDivider>
-      <Content />
-      <VbenDivider title-placement="left">{{
-        t('layout.setting.animation')
-      }}</VbenDivider>
-      <Transitions />
-      <VbenDivider />
-      <FooterButtons />
-    </VbenDrawerContent>
-  </VbenDrawer>
-</template>
diff --git a/packages/grid-layouts/src/components/setting/index.vue b/packages/grid-layouts/src/components/setting/index.vue
deleted file mode 100644
index b08d4e91..00000000
--- a/packages/grid-layouts/src/components/setting/index.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import { useSporadicSettingStore } from '../../store'
-const sporadicSettingStore = useSporadicSettingStore()
-</script>
-<template>
-  <div
-    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
-    class="h-full p-x-12px grid-center cursor-pointer"
-  >
-    <VbenIconify
-      size="22"
-      icon="material-symbols:settings-suggest-outline-rounded"
-    />
-  </div>
-</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
index e48db9a2..9d172e58 100644
--- a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
+++ b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SuffixItemWrapper from './SuffixItemWrapper.vue'
 
 const getIcon = computed(() =>
   true ? 'codicon:screen-full' : 'codicon:screen-normal',
@@ -7,9 +8,7 @@ const getIcon = computed(() =>
 </script>
 
 <template>
-  <div
-    class="h-full w-36px grid-center border-l border-l-solid border-[var(--layout-border-color)] cursor-pointer"
-  >
+  <SuffixItemWrapper>
     <VbenIconify :icon="getIcon" />
-  </div>
+  </SuffixItemWrapper>
 </template>
diff --git a/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue b/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
new file mode 100644
index 00000000..fbe5c2b5
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+</script>
+<template>
+  <div class="h-full w-36px grid-center cursor-pointer relative">
+    <slot></slot>
+    <SecondaryBorder left />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabQuick.vue b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
index fb82a456..18872a37 100644
--- a/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
+++ b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
@@ -1,12 +1,12 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import SuffixItemWrapper from './SuffixItemWrapper.vue'
+</script>
 <template>
-  <div
-    class="h-full w-36px grid-center border-l border-l-solid border-[var(--layout-border-color)] cursor-pointer"
-  >
+  <SuffixItemWrapper>
     <VbenIconify
       icon="material-symbols:double-arrow-rounded"
       class="rotate-90"
       rotate="90deg"
     />
-  </div>
+  </SuffixItemWrapper>
 </template>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabRedo.vue b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
index dee61e90..8c4c8b4f 100644
--- a/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
+++ b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { usePromise } from '@vben/hooks'
+import SuffixItemWrapper from './SuffixItemWrapper.vue'
 
 function reload() {
   return new Promise(async (resolve) => {
@@ -16,10 +17,7 @@ const { loading, handleFn: handleRedo } = usePromise(reload, {
 </script>
 
 <template>
-  <div
-    @click="handleRedo"
-    class="h-full w-36px grid-center border-l border-l-solid border-[var(--layout-border-color)] cursor-pointer"
-  >
-    <VbenIconify icon="ic:round-refresh" size="18" :infinite="loading" />
-  </div>
+  <SuffixItemWrapper @click="handleRedo">
+    <VbenIconify icon="ep:refresh-right" size="18" :infinite="loading" />
+  </SuffixItemWrapper>
 </template>
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
index 876735d6..6979ccd2 100644
--- a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
@@ -1,19 +1,17 @@
 <script lang="ts" setup>
 import { useMenuSettingStore } from '../../store'
 import { storeToRefs } from '@vben/pinia'
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
 
 const menuSettingStore = useMenuSettingStore()
 const { collapsed } = storeToRefs(menuSettingStore)
 </script>
 <template>
-  <div
-    class="h-full p-x-12px grid-center cursor-pointer"
-    @click.stop="menuSettingStore.toggleCollapsed()"
-  >
+  <TopButtonWrapper @click.stop="menuSettingStore.toggleCollapsed()">
     <VbenIconify
       color="var(--trigger-icon-color)"
       size="22"
       :icon="collapsed ? 'line-md:menu-fold-right' : 'line-md:menu-fold-left'"
     />
-  </div>
+  </TopButtonWrapper>
 </template>
diff --git a/packages/grid-layouts/src/components/widgets/FixedSetting.vue b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
new file mode 100644
index 00000000..9f3dad44
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useHeaderSettingStore, useSporadicSettingStore } from '../../store'
+import { computed, unref } from 'vue'
+import { storeToRefs } from '@vben/pinia'
+import { SettingButtonPositionEnum } from '@vben/constants'
+const sporadicSettingStore = useSporadicSettingStore()
+
+const { showSettingButton, settingButtonPosition, fullContent } =
+  storeToRefs(sporadicSettingStore)
+
+const { show } = storeToRefs(useHeaderSettingStore())
+
+const getShowSettingFixedButton = computed(() => {
+  if (!unref(showSettingButton)) {
+    return false
+  }
+  if (unref(settingButtonPosition) === SettingButtonPositionEnum.AUTO) {
+    return !unref(show) || !unref(showSettingButton) || unref(fullContent)
+  }
+  return unref(settingButtonPosition) === SettingButtonPositionEnum.FIXED
+})
+</script>
+<template>
+  <div
+    v-if="getShowSettingFixedButton"
+    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
+    class="p-6px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[rgba(9,96,189,.9)] cursor-pointer"
+  >
+    <VbenIconify icon="fluent:settings-48-regular" />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/FullScreen.vue b/packages/grid-layouts/src/components/widgets/FullScreen.vue
new file mode 100644
index 00000000..e3a4004c
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/FullScreen.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <VbenIconify icon="mingcute:fullscreen-line" />
+    <!--<VbenIconify icon="mingcute:fullscreen-exit-line" />-->
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Locale.vue b/packages/grid-layouts/src/components/widgets/Locale.vue
new file mode 100644
index 00000000..18aecf29
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/Locale.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <VbenIconify icon="carbon:ibm-watson-language-translator" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Search.vue b/packages/grid-layouts/src/components/widgets/Search.vue
new file mode 100644
index 00000000..31d4eb48
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/Search.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <VbenIconify icon="fluent:search-16-regular" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Setting.vue b/packages/grid-layouts/src/components/widgets/Setting.vue
new file mode 100644
index 00000000..9c3e83d0
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/Setting.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useHeaderSettingStore, useSporadicSettingStore } from '../../store'
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import { computed, unref } from 'vue'
+import { SettingButtonPositionEnum } from '@vben/constants'
+import { storeToRefs } from '@vben/pinia'
+const sporadicSettingStore = useSporadicSettingStore()
+
+const { showSettingButton, settingButtonPosition } =
+  storeToRefs(sporadicSettingStore)
+
+const { show } = storeToRefs(useHeaderSettingStore())
+
+const getShowSetting = computed(() => {
+  if (!unref(showSettingButton)) {
+    return false
+  }
+  if (unref(settingButtonPosition) === SettingButtonPositionEnum.AUTO) {
+    return unref(show)
+  }
+  return unref(settingButtonPosition) === SettingButtonPositionEnum.HEADER
+})
+</script>
+<template>
+  <TopButtonWrapper
+    v-if="getShowSetting"
+    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
+  >
+    <VbenIconify icon="fluent:settings-48-regular" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/UserDropdown.vue b/packages/grid-layouts/src/components/widgets/UserDropdown.vue
new file mode 100644
index 00000000..21d435b8
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/UserDropdown.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import avatar from '@/assets/images/header.jpg'
+</script>
+<template>
+  <TopButtonWrapper>
+    <div class="flex items-center">
+      <img :src="avatar" class="rd-1/2 w-6 h-6 mr-3" alt="avatar" />
+      <span>Vben Admin</span>
+    </div>
+  </TopButtonWrapper>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/hooks/useHandler.ts b/packages/grid-layouts/src/hooks/useHandler.ts
new file mode 100644
index 00000000..8728ad30
--- /dev/null
+++ b/packages/grid-layouts/src/hooks/useHandler.ts
@@ -0,0 +1,224 @@
+import { HandlerSettingEnum } from '@vben/constants'
+import {
+  useHeaderSettingStore,
+  useMenuSettingStore,
+  useMultiTabsSettingStore,
+  useSporadicSettingStore,
+  useTransitionSettingStore,
+} from '../store'
+import { storeToRefs } from '@vben/pinia'
+import { reactive } from 'vue'
+import { useClipboard } from '@vben/utils'
+
+export const useHandler = () => {
+  const sporadicSettingStore = useSporadicSettingStore()
+  const menuSettingStore = useMenuSettingStore()
+  const headerSettingStore = useHeaderSettingStore()
+  const multiTabsSettingStore = useMultiTabsSettingStore()
+  const transitionSettingStore = useTransitionSettingStore()
+
+  function copySetting() {
+    try {
+      const { copy, isSupported } = useClipboard()
+      if (!isSupported)
+        return console.error('Your browser does not support Clipboard API')
+      const source = reactive({
+        SporadicSetting: storeToRefs(sporadicSettingStore),
+        MenuSetting: storeToRefs(menuSettingStore),
+        HeaderSetting: storeToRefs(headerSettingStore),
+        MultiTabsSetting: storeToRefs(multiTabsSettingStore),
+        TransitionSetting: storeToRefs(transitionSettingStore),
+      })
+      copy(JSON.stringify(source))
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  const resetSetting = () => {
+    sporadicSettingStore.$reset()
+    menuSettingStore.$reset()
+    headerSettingStore.$reset()
+    multiTabsSettingStore.$reset()
+    transitionSettingStore.$reset()
+  }
+
+  const clearAndRedo = () => {
+    localStorage.clear()
+    sessionStorage.clear()
+    location.reload()
+  }
+  function baseHandler(event: HandlerSettingEnum, value: any) {
+    switch (event) {
+      case HandlerSettingEnum.CHANGE_LAYOUT:
+        const { mode, type, split } = value
+        menuSettingStore.setType(type)
+        menuSettingStore.setMode(mode)
+        menuSettingStore.setSplit(split)
+        break
+
+      case HandlerSettingEnum.CHANGE_THEME_COLOR:
+        // if (getThemeColor.value === value) {
+        //   return {}
+        // }
+        // changeTheme(value);
+        sporadicSettingStore.setThemeColor(value)
+        break
+
+      case HandlerSettingEnum.CHANGE_THEME:
+        // if (getDarkMode.value === value) {
+        //   return {}
+        // }
+        // updateDarkTheme(value);
+        break
+
+      case HandlerSettingEnum.MENU_HAS_DRAG:
+        menuSettingStore.setCanDrag(value)
+        break
+
+      case HandlerSettingEnum.MENU_ACCORDION:
+        menuSettingStore.setAccordion(value)
+        break
+
+      case HandlerSettingEnum.MENU_TRIGGER:
+        menuSettingStore.setTrigger(value)
+        break
+
+      case HandlerSettingEnum.MENU_TOP_ALIGN:
+        menuSettingStore.setTopMenuAlign(value)
+        break
+      case HandlerSettingEnum.MENU_COLLAPSED:
+        menuSettingStore.setCollapsed(value)
+        break
+
+      case HandlerSettingEnum.MENU_WIDTH:
+        return { menuSetting: { menuWidth: value } }
+
+      case HandlerSettingEnum.MENU_SHOW_SIDEBAR:
+        menuSettingStore.setShow(value)
+        break
+
+      case HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE:
+        return { menuSetting: { collapsedShowTitle: value } }
+
+      case HandlerSettingEnum.MENU_THEME:
+        // updateSidebarBgColor(value);
+        menuSettingStore.setBgColor(value)
+        break
+
+      case HandlerSettingEnum.MENU_SPLIT:
+        menuSettingStore.setSplit(value)
+        break
+
+      case HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+        menuSettingStore.setCloseMixSidebarOnChange(value)
+        break
+
+      case HandlerSettingEnum.MENU_FIXED:
+        menuSettingStore.setFixed(value)
+        break
+
+      case HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR:
+        menuSettingStore.setMixSideTrigger(value)
+        break
+
+      case HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR:
+        menuSettingStore.setMixSideFixed(value)
+        break
+
+      // ============transition==================
+      case HandlerSettingEnum.OPEN_PAGE_LOADING:
+        transitionSettingStore.setOpenPageLoading(value)
+        break
+
+      case HandlerSettingEnum.ROUTER_TRANSITION:
+        transitionSettingStore.setBasicTransition(value)
+        break
+
+      case HandlerSettingEnum.OPEN_ROUTE_TRANSITION:
+        transitionSettingStore.setEnable(value)
+        break
+
+      case HandlerSettingEnum.OPEN_PROGRESS:
+        transitionSettingStore.setOpenNProgress(value)
+        break
+      // ============sporadic==================
+
+      case HandlerSettingEnum.LOCK_TIME:
+        sporadicSettingStore.setLockTime(value)
+        break
+
+      case HandlerSettingEnum.FULL_CONTENT:
+        sporadicSettingStore.setFullContent(value)
+        break
+      case HandlerSettingEnum.CONTENT_MODE:
+        sporadicSettingStore.setContentMode(value)
+        break
+
+      case HandlerSettingEnum.SHOW_BREADCRUMB:
+        sporadicSettingStore.setShowBreadCrumb(value)
+        break
+      case HandlerSettingEnum.SHOW_BREADCRUMB_ICON:
+        sporadicSettingStore.setShowBreadCrumbIcon(value)
+        break
+
+      case HandlerSettingEnum.GRAY_MODE:
+        // updateGrayMode(value)
+        sporadicSettingStore.setGrayMode(value)
+        break
+      case HandlerSettingEnum.SHOW_FOOTER:
+        sporadicSettingStore.setShowFooter(value)
+        break
+
+      case HandlerSettingEnum.COLOR_WEAK:
+        // updateColorWeak(value)
+        sporadicSettingStore.setColorWeak(value)
+        break
+
+      case HandlerSettingEnum.SHOW_LOGO:
+        sporadicSettingStore.setShowLogo(value)
+        break
+
+      // ============tabs==================
+      case HandlerSettingEnum.TABS_SHOW_QUICK:
+        multiTabsSettingStore.setShowQuick(value)
+        break
+      case HandlerSettingEnum.TABS_SHOW:
+        multiTabsSettingStore.setShow(value)
+        break
+
+      case HandlerSettingEnum.TABS_SHOW_REDO:
+        multiTabsSettingStore.setShowRedo(value)
+        break
+
+      case HandlerSettingEnum.TABS_SHOW_FOLD:
+        multiTabsSettingStore.setShowFold(value)
+        break
+
+      // ============header==================
+      case HandlerSettingEnum.HEADER_THEME:
+        // updateHeaderBgColor(value);
+        headerSettingStore.setBgColor(value)
+        break
+
+      case HandlerSettingEnum.HEADER_SEARCH:
+        headerSettingStore.setShowSearch(value)
+        break
+      case HandlerSettingEnum.HEADER_FIXED:
+        headerSettingStore.setFixed(value)
+        break
+      case HandlerSettingEnum.HEADER_SHOW:
+        headerSettingStore.setShow(value)
+        break
+      default:
+        return
+    }
+  }
+
+  return {
+    copySetting,
+    resetSetting,
+    clearAndRedo,
+    baseHandler,
+  }
+}
diff --git a/packages/grid-layouts/src/logics/handler.ts b/packages/grid-layouts/src/logics/handler.ts
deleted file mode 100644
index 3f490e38..00000000
--- a/packages/grid-layouts/src/logics/handler.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import { HandlerSettingEnum } from '@vben/constants'
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useMultiTabsSettingStore,
-  useSporadicSettingStore,
-  useTransitionSettingStore,
-} from '../store'
-
-export function baseHandler(event: HandlerSettingEnum, value: any) {
-  handler(event, value)
-}
-
-export function handler(event: HandlerSettingEnum, value: any) {
-  const sporadicSettingStore = useSporadicSettingStore()
-  const menuSettingStore = useMenuSettingStore()
-  const headerSettingStore = useHeaderSettingStore()
-  const multiTabsSettingStore = useMultiTabsSettingStore()
-  const transitionSettingStore = useTransitionSettingStore()
-  // @ts-ignore
-  switch (event) {
-    case HandlerSettingEnum.CHANGE_LAYOUT:
-      const { mode, type, split } = value
-      menuSettingStore.setType(type)
-      menuSettingStore.setMode(mode)
-      menuSettingStore.setSplit(split)
-      break
-
-    case HandlerSettingEnum.CHANGE_THEME_COLOR:
-      // if (getThemeColor.value === value) {
-      //   return {}
-      // }
-      // changeTheme(value);
-      sporadicSettingStore.setThemeColor(value)
-      break
-
-    case HandlerSettingEnum.CHANGE_THEME:
-      // if (getDarkMode.value === value) {
-      //   return {}
-      // }
-      // updateDarkTheme(value);
-      break
-
-    case HandlerSettingEnum.MENU_HAS_DRAG:
-      menuSettingStore.setCanDrag(value)
-      break
-
-    case HandlerSettingEnum.MENU_ACCORDION:
-      menuSettingStore.setAccordion(value)
-      break
-
-    case HandlerSettingEnum.MENU_TRIGGER:
-      menuSettingStore.setTrigger(value)
-      break
-
-    case HandlerSettingEnum.MENU_TOP_ALIGN:
-      menuSettingStore.setTopMenuAlign(value)
-      break
-    case HandlerSettingEnum.MENU_COLLAPSED:
-      menuSettingStore.setCollapsed(value)
-      break
-
-    case HandlerSettingEnum.MENU_WIDTH:
-      return { menuSetting: { menuWidth: value } }
-
-    case HandlerSettingEnum.MENU_SHOW_SIDEBAR:
-      menuSettingStore.setShow(value)
-      break
-
-    case HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE:
-      return { menuSetting: { collapsedShowTitle: value } }
-
-    case HandlerSettingEnum.MENU_THEME:
-      // updateSidebarBgColor(value);
-      menuSettingStore.setBgColor(value)
-      break
-
-    case HandlerSettingEnum.MENU_SPLIT:
-      menuSettingStore.setSplit(value)
-      break
-
-    case HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
-      menuSettingStore.setCloseMixSidebarOnChange(value)
-      break
-
-    case HandlerSettingEnum.MENU_FIXED:
-      menuSettingStore.setFixed(value)
-      break
-
-    case HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR:
-      menuSettingStore.setMixSideTrigger(value)
-      break
-
-    case HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR:
-      menuSettingStore.setMixSideFixed(value)
-      break
-
-    // ============transition==================
-    case HandlerSettingEnum.OPEN_PAGE_LOADING:
-      transitionSettingStore.setOpenPageLoading(value)
-      break
-
-    case HandlerSettingEnum.ROUTER_TRANSITION:
-      transitionSettingStore.setBasicTransition(value)
-      break
-
-    case HandlerSettingEnum.OPEN_ROUTE_TRANSITION:
-      transitionSettingStore.setEnable(value)
-      break
-
-    case HandlerSettingEnum.OPEN_PROGRESS:
-      transitionSettingStore.setOpenNProgress(value)
-      break
-    // ============sporadic==================
-
-    case HandlerSettingEnum.LOCK_TIME:
-      sporadicSettingStore.setLockTime(value)
-      break
-
-    case HandlerSettingEnum.FULL_CONTENT:
-      sporadicSettingStore.setFullContent(value)
-      break
-    case HandlerSettingEnum.CONTENT_MODE:
-      sporadicSettingStore.setContentMode(value)
-      break
-
-    case HandlerSettingEnum.SHOW_BREADCRUMB:
-      sporadicSettingStore.setShowBreadCrumb(value)
-      break
-    case HandlerSettingEnum.SHOW_BREADCRUMB_ICON:
-      sporadicSettingStore.setShowBreadCrumbIcon(value)
-      break
-
-    case HandlerSettingEnum.GRAY_MODE:
-      // updateGrayMode(value)
-      sporadicSettingStore.setGrayMode(value)
-      break
-    case HandlerSettingEnum.SHOW_FOOTER:
-      sporadicSettingStore.setShowFooter(value)
-      break
-
-    case HandlerSettingEnum.COLOR_WEAK:
-      // updateColorWeak(value)
-      sporadicSettingStore.setColorWeak(value)
-      break
-
-    case HandlerSettingEnum.SHOW_LOGO:
-      sporadicSettingStore.setShowLogo(value)
-      break
-
-    // ============tabs==================
-    case HandlerSettingEnum.TABS_SHOW_QUICK:
-      multiTabsSettingStore.setShowQuick(value)
-      break
-    case HandlerSettingEnum.TABS_SHOW:
-      multiTabsSettingStore.setShow(value)
-      break
-
-    case HandlerSettingEnum.TABS_SHOW_REDO:
-      multiTabsSettingStore.setShowRedo(value)
-      break
-
-    case HandlerSettingEnum.TABS_SHOW_FOLD:
-      multiTabsSettingStore.setShowFold(value)
-      break
-
-    // ============header==================
-    case HandlerSettingEnum.HEADER_THEME:
-      // updateHeaderBgColor(value);
-      headerSettingStore.setBgColor(value)
-      break
-
-    case HandlerSettingEnum.HEADER_SEARCH:
-      headerSettingStore.setShowSearch(value)
-      break
-    case HandlerSettingEnum.HEADER_FIXED:
-      headerSettingStore.setFixed(value)
-      break
-    case HandlerSettingEnum.HEADER_SHOW:
-      headerSettingStore.setShow(value)
-      break
-    default:
-      return
-  }
-}
diff --git a/packages/grid-layouts/tsconfig.json b/packages/grid-layouts/tsconfig.json
new file mode 100644
index 00000000..4913dc85
--- /dev/null
+++ b/packages/grid-layouts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": ".",
+    "lib": ["dom", "esnext"],
+    "types": [
+      "vite/client",
+      "@vben/constant",
+    ]
+  },
+  "include": []
+}

From 39c53f1ce7a94f0c7bbbf67cdddb18fcb5ca82ad Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Wed, 8 Feb 2023 18:01:51 +0800
Subject: [PATCH 14/22] wip: @vben/stores, useAppConfig hooks

---
 apps/admin/package.json                       |   2 +-
 apps/admin/src/main.ts                        |   2 +-
 apps/admin/src/store/auth.ts                  |   2 +-
 apps/admin/src/store/config.ts                |   2 +-
 apps/admin/src/store/lock.ts                  |   2 +-
 apps/admin/src/store/modules/app.ts           |   2 +-
 apps/admin/src/store/multipleTab.ts           |   2 +-
 apps/admin/src/store/test.ts                  |   2 +-
 apps/admin/src/store/user.ts                  |   2 +-
 packages/constants/src/appEnum.ts             |  14 ++
 packages/grid-layouts/package.json            |   7 +-
 .../grid-layouts/src/components/Layout.vue    |  14 +-
 packages/grid-layouts/src/components/Main.vue |  18 +-
 .../src/components/breadcrumb/index.vue       |   2 +-
 .../components/composables/LayoutContent.vue  |   6 +-
 .../components/composables/LayoutFooter.vue   |   2 +-
 .../components/composables/LayoutHeader.vue   |   2 +-
 .../components/composables/LayoutSidebar.vue  |   2 +-
 .../src/components/composables/LayoutTab.vue  |   2 +-
 .../src/components/logo/index.vue             |   2 +-
 .../components/DarkModeToggle.vue             |   2 +-
 .../components/InterfaceDisplay.vue           |   2 +-
 .../components/InterfaceFunction.vue          |   2 +-
 .../setting-drawer/components/Transitions.vue |   2 +-
 .../src/components/setting-drawer/index.vue   |   2 +-
 .../src/components/trigger/HeaderTrigger.vue  |   2 +-
 .../components/trigger/SiderCenterTrigger.vue |   2 +-
 .../components/trigger/SiderFooterTrigger.vue |   2 +-
 .../src/components/trigger/inedx.vue          |   2 +-
 .../src/components/widgets/FixedSetting.vue   |   2 +-
 .../src/components/widgets/Setting.vue        |   2 +-
 packages/grid-layouts/src/hooks/useHandler.ts |   2 +-
 .../src/store/modules/headerSetting.ts        |   2 +-
 .../src/store/modules/layoutComposables.ts    |   2 +-
 .../src/store/modules/menuSetting.ts          |   2 +-
 .../src/store/modules/multiTabsSetting.ts     |   2 +-
 .../src/store/modules/sporadicSetting.ts      |   2 +-
 .../src/store/modules/transitionSetting.ts    |   2 +-
 packages/grid-layouts/tsconfig.json           |   6 +-
 packages/hooks/package.json                   |   4 +-
 packages/hooks/src/config/index.ts            |   1 +
 packages/hooks/src/config/useAppConfig.ts     |  29 +++
 packages/hooks/src/index.ts                   |   1 +
 packages/layouts/package.json                 |   1 -
 packages/pinia/src/index.ts                   |   1 -
 packages/{pinia => stores}/index.ts           |   0
 packages/{pinia => stores}/package.json       |   6 +-
 packages/stores/src/index.ts                  |   2 +
 packages/stores/src/modules/appConfig.ts      | 231 ++++++++++++++++++
 packages/stores/src/modules/index.ts          |   2 +
 .../stores/src/modules/layoutComposables.ts   |  65 +++++
 packages/{pinia => stores}/src/persist.ts     |   0
 packages/{pinia => stores}/src/pinia.ts       |   1 +
 packages/types/src/config.ts                  | 151 ++++++++++++
 packages/utils/index.ts                       |   2 +
 55 files changed, 570 insertions(+), 58 deletions(-)
 create mode 100644 packages/hooks/src/config/index.ts
 create mode 100644 packages/hooks/src/config/useAppConfig.ts
 delete mode 100644 packages/pinia/src/index.ts
 rename packages/{pinia => stores}/index.ts (100%)
 rename packages/{pinia => stores}/package.json (73%)
 create mode 100644 packages/stores/src/index.ts
 create mode 100644 packages/stores/src/modules/appConfig.ts
 create mode 100644 packages/stores/src/modules/index.ts
 create mode 100644 packages/stores/src/modules/layoutComposables.ts
 rename packages/{pinia => stores}/src/persist.ts (100%)
 rename packages/{pinia => stores}/src/pinia.ts (96%)

diff --git a/apps/admin/package.json b/apps/admin/package.json
index 0ad82536..6e197dcb 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -33,8 +33,8 @@
     "@vben/hooks": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locale": "workspace:*",
-    "@vben/pinia": "workspace:*",
     "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
diff --git a/apps/admin/src/main.ts b/apps/admin/src/main.ts
index 8f886201..40aa53e7 100644
--- a/apps/admin/src/main.ts
+++ b/apps/admin/src/main.ts
@@ -6,7 +6,7 @@ import { createApp } from 'vue'
 import { router } from '@/router'
 import { setupRouteGuard } from '@/router/guard'
 import { setupI18n } from '@vben/locale'
-import { setupPinia } from '@vben/pinia'
+import { setupPinia } from '@vben/stores'
 import { initApplication } from './init-application'
 import { registerComponents } from '../init-components'
 ;(async () => {
diff --git a/apps/admin/src/store/auth.ts b/apps/admin/src/store/auth.ts
index 7aa32aa7..447126cd 100644
--- a/apps/admin/src/store/auth.ts
+++ b/apps/admin/src/store/auth.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { asyncRoutes, PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
 import { filterTree } from '@vben/utils'
 import { Menu } from '@vben/types'
diff --git a/apps/admin/src/store/config.ts b/apps/admin/src/store/config.ts
index 296e9157..c6d54ae0 100644
--- a/apps/admin/src/store/config.ts
+++ b/apps/admin/src/store/config.ts
@@ -6,7 +6,7 @@ import {
   ProjectConfig,
   TransitionSetting,
 } from '@vben/types'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { deepMerge } from '@vben/utils'
 import { APP_DARK_MODE_KEY_, ThemeEnum } from '@vben/constants'
 import { darkMode, projectSetting } from '@/setting'
diff --git a/apps/admin/src/store/lock.ts b/apps/admin/src/store/lock.ts
index b83c1e98..6296215a 100644
--- a/apps/admin/src/store/lock.ts
+++ b/apps/admin/src/store/lock.ts
@@ -1,5 +1,5 @@
 import type { LockInfo } from '@vben/types'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { useUserStore } from '@/store/user'
 
 interface LockState {
diff --git a/apps/admin/src/store/modules/app.ts b/apps/admin/src/store/modules/app.ts
index 03bef14b..6b1afc8c 100644
--- a/apps/admin/src/store/modules/app.ts
+++ b/apps/admin/src/store/modules/app.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 // import { pinia } from '@/pinia'
 import { resetRouter } from '@/router'
 
diff --git a/apps/admin/src/store/multipleTab.ts b/apps/admin/src/store/multipleTab.ts
index 492f88d6..fd896678 100644
--- a/apps/admin/src/store/multipleTab.ts
+++ b/apps/admin/src/store/multipleTab.ts
@@ -4,7 +4,7 @@ import type {
   Router,
 } from 'vue-router'
 import { toRaw, unref } from 'vue'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 
 import { useGo, useRedo } from '@vben/hooks'
 // import { Persistent } from '/@/utils/cache/persistent';
diff --git a/apps/admin/src/store/test.ts b/apps/admin/src/store/test.ts
index 724e63d3..6b6e0c3b 100644
--- a/apps/admin/src/store/test.ts
+++ b/apps/admin/src/store/test.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 
 export const useTest = defineStore({
   id: 'use--test',
diff --git a/apps/admin/src/store/user.ts b/apps/admin/src/store/user.ts
index b1c6d462..0c1edfee 100644
--- a/apps/admin/src/store/user.ts
+++ b/apps/admin/src/store/user.ts
@@ -1,5 +1,5 @@
 import type { LoginParams } from '@/apis/auth'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { BASIC_HOME_PATH, BASIC_LOGIN_PATH, PageEnum } from '@vben/constants'
 // import { pinia } from '@/pinia'
 import { router } from '@/router'
diff --git a/packages/constants/src/appEnum.ts b/packages/constants/src/appEnum.ts
index 8fe8a722..90f32045 100644
--- a/packages/constants/src/appEnum.ts
+++ b/packages/constants/src/appEnum.ts
@@ -11,6 +11,20 @@ export enum ThemeEnum {
   LIGHT = 'light',
 }
 
+/**
+ * @description: Navigation bar mode
+ */
+export enum NavBarModeEnum {
+  // left menu
+  SIDEBAR = 'sidebar',
+  // mix-sidebar
+  MIX_SIDEBAR = 'mix-sidebar',
+  // mixin menu
+  MIX = 'mix',
+  // top menu
+  TOP_MENU = 'top-menu',
+}
+
 export enum SettingButtonPositionEnum {
   AUTO = 'auto',
   HEADER = 'header',
diff --git a/packages/grid-layouts/package.json b/packages/grid-layouts/package.json
index 81623748..966f580c 100644
--- a/packages/grid-layouts/package.json
+++ b/packages/grid-layouts/package.json
@@ -12,11 +12,14 @@
     "@vben/directives": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/locale": "workspace:*",
-    "@vben/pinia": "workspace:*",
-    "@vben/types": "workspace:*",
+    "@vben/stores": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
+    "pinia": "^2.0.30",
     "vue": "3.2.45",
     "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
   }
 }
diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 0f85f465..8301c830 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -4,20 +4,20 @@ import LayoutSidebar from './composables/LayoutSidebar.vue'
 import LayoutContent from './composables/LayoutContent.vue'
 import LayoutTab from './composables/LayoutTab.vue'
 import Feature from './feature/index.vue'
-import { storeToRefs } from '@vben/pinia'
+import { StoreGeneric, storeToRefs } from 'pinia'
+import { useMenuSettingStore } from '../store'
 import {
   useLayoutHeader,
   useLayoutSidebar,
   useLayoutTab,
-  useMenuSettingStore,
   useLayoutContent,
-} from '../store'
+} from '@vben/stores'
 import { useComprehensive } from '../hooks/useComprehensive'
 
-const { headerRef } = storeToRefs(useLayoutHeader())
-const { sidebarRef } = storeToRefs(useLayoutSidebar())
-const { tabRef } = storeToRefs(useLayoutTab())
-const { contentRef } = storeToRefs(useLayoutContent())
+const { headerRef } = storeToRefs(useLayoutHeader() as StoreGeneric)
+const { sidebarRef } = storeToRefs(useLayoutSidebar() as StoreGeneric)
+const { tabRef } = storeToRefs(useLayoutTab() as StoreGeneric)
+const { contentRef } = storeToRefs(useLayoutContent() as StoreGeneric)
 const { getLayoutStyles } = useComprehensive()
 
 const { type } = storeToRefs(useMenuSettingStore())
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index 977b789f..ee29900a 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,12 +1,17 @@
 <script lang="ts" setup>
-import { useLayoutHeader, useMenuSettingStore } from '../store'
-import { storeToRefs } from '@vben/pinia'
+import { useMenuSettingStore } from '../store'
+import { useLayoutHeader} from '@vben/stores'
+import { useAppConfig } from '@vben/hooks'
+import {StoreGeneric, storeToRefs} from 'pinia'
 import { useComprehensive } from '../hooks/useComprehensive'
 
 const menuSettingStore = useMenuSettingStore()
 const { type } = storeToRefs(menuSettingStore)
 
-const { headerWidth, headerHeight } = storeToRefs(useLayoutHeader())
+const { headerWidth, headerHeight } = storeToRefs(useLayoutHeader() as StoreGeneric)
+const { setAppConfig, setSidebar } = useAppConfig()
+
+// console.log(sidebar.value.bgColor)
 
 const { getLayoutStyles } = useComprehensive()
 </script>
@@ -16,6 +21,13 @@ const { getLayoutStyles } = useComprehensive()
 
     <div>layoutStyles： {{ getLayoutStyles }}</div>
     <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
+    ___________________________________________________________________________
+    <div>
+<!--      useAppConfig : {{ sidebar }}-->
+    </div>
+    <div @click.stop="setSidebar({  width: 365423463136132121212})">
+      sidebar change
+    </div>
     <!--    <RouterView />-->
   </main>
 </template>
diff --git a/packages/grid-layouts/src/components/breadcrumb/index.vue b/packages/grid-layouts/src/components/breadcrumb/index.vue
index a81c9567..9b0b1610 100644
--- a/packages/grid-layouts/src/components/breadcrumb/index.vue
+++ b/packages/grid-layouts/src/components/breadcrumb/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useSporadicSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 
 const { showBreadCrumb } = storeToRefs(useSporadicSettingStore())
 </script>
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
index 0e9be2a7..3bf776e7 100644
--- a/packages/grid-layouts/src/components/composables/LayoutContent.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import LayoutFooter from './LayoutFooter.vue'
 import Main from '../Main.vue'
-import { useLayoutFooter } from '../../store'
-import { storeToRefs } from '@vben/pinia'
-const { footerRef } = storeToRefs(useLayoutFooter())
+import { useLayoutFooter } from '@vben/stores'
+import { StoreGeneric, storeToRefs } from 'pinia'
+const { footerRef } = storeToRefs(useLayoutFooter() as StoreGeneric)
 </script>
 <template>
   <div class="grid-layout-content grid-area-[grid-content] grid">
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index 2ced573a..22604800 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useSporadicSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import SecondaryBorder from '../comm/SecondaryBorder.vue'
 
 const { hiddenFooter } = storeToRefs(useSporadicSettingStore())
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index eccc87f8..0bf078bc 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Trigger from '../trigger/inedx.vue'
 import { useHeaderSettingStore, useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import Breadcrumb from '../breadcrumb/index.vue'
 import Logo from '../logo/index.vue'
 import { useComprehensive } from '../../hooks/useComprehensive'
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index 2e859f0d..3844411a 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Trigger from '../trigger/inedx.vue'
 import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 const menuSettingStore = useMenuSettingStore()
 import Logo from '../logo/index.vue'
 import { useComprehensive } from '../../hooks/useComprehensive'
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
index 15bac88e..b9e8410f 100644
--- a/packages/grid-layouts/src/components/composables/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMultiTabsSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import TabRedo from '../tab-bar/TabRedo.vue'
 import TabQuick from '../tab-bar/TabQuick.vue'
 import FoldButton from '../tab-bar/FoldButton.vue'
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
index e844a9c1..a91ef727 100644
--- a/packages/grid-layouts/src/components/logo/index.vue
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -4,7 +4,7 @@ import {
   useMenuSettingStore,
   useSporadicSettingStore,
 } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import { useComprehensive } from '../../hooks/useComprehensive'
 import { computed, unref } from 'vue'
 import logo from '@/assets/images/logo.png'
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
index 1b92091a..4e939b9f 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ThemeEnum } from '@vben/constants'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import { useHeaderSettingStore } from '../../../store'
 
 const headerSettingStore = useHeaderSettingStore()
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
index 79cfb316..fd78668f 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
@@ -8,7 +8,7 @@ import {
   useMultiTabsSettingStore,
   useSporadicSettingStore,
 } from '../../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
 
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
index 7a1d697b..0c58c4fd 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
@@ -16,7 +16,7 @@ import {
   useMenuSettingStore,
   useSporadicSettingStore,
 } from '../../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
 
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
index cb047536..7a0e2a6b 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
@@ -5,7 +5,7 @@ import { HandlerSettingEnum } from '@vben/constants'
 import { routerTransitionOptions } from '../../../logics/constant'
 import { useI18n } from '@vben/locale'
 import { useTransitionSettingStore } from '../../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
 
diff --git a/packages/grid-layouts/src/components/setting-drawer/index.vue b/packages/grid-layouts/src/components/setting-drawer/index.vue
index 5d1d4c6c..939393c3 100644
--- a/packages/grid-layouts/src/components/setting-drawer/index.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/index.vue
@@ -4,7 +4,7 @@ import {
   useMenuSettingStore,
   useSporadicSettingStore,
 } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import { useI18n } from '@vben/locale'
 import { navigationBarTypeList } from '../../logics/constant'
 import {
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
index 6979ccd2..29bb6276 100644
--- a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { defineStores } from 'pinia'
 import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
 
 const menuSettingStore = useMenuSettingStore()
diff --git a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
index 8d50a413..0cae7fc8 100644
--- a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 
 const menuSettingStore = useMenuSettingStore()
 const { collapsed } = storeToRefs(menuSettingStore)
diff --git a/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue b/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
index 55362d80..2f04d388 100644
--- a/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
+++ b/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 
 const menuSettingStore = useMenuSettingStore()
 const { collapsed } = storeToRefs(menuSettingStore)
diff --git a/packages/grid-layouts/src/components/trigger/inedx.vue b/packages/grid-layouts/src/components/trigger/inedx.vue
index e317742f..2871ca2f 100644
--- a/packages/grid-layouts/src/components/trigger/inedx.vue
+++ b/packages/grid-layouts/src/components/trigger/inedx.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import { TriggerEnum } from '@vben/constants'
 import CenterTrigger from './SiderCenterTrigger.vue'
 import FooterTrigger from './SiderFooterTrigger.vue'
diff --git a/packages/grid-layouts/src/components/widgets/FixedSetting.vue b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
index 9f3dad44..3758d6fb 100644
--- a/packages/grid-layouts/src/components/widgets/FixedSetting.vue
+++ b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useHeaderSettingStore, useSporadicSettingStore } from '../../store'
 import { computed, unref } from 'vue'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import { SettingButtonPositionEnum } from '@vben/constants'
 const sporadicSettingStore = useSporadicSettingStore()
 
diff --git a/packages/grid-layouts/src/components/widgets/Setting.vue b/packages/grid-layouts/src/components/widgets/Setting.vue
index 9c3e83d0..ecea7b87 100644
--- a/packages/grid-layouts/src/components/widgets/Setting.vue
+++ b/packages/grid-layouts/src/components/widgets/Setting.vue
@@ -3,7 +3,7 @@ import { useHeaderSettingStore, useSporadicSettingStore } from '../../store'
 import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
 import { computed, unref } from 'vue'
 import { SettingButtonPositionEnum } from '@vben/constants'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 const sporadicSettingStore = useSporadicSettingStore()
 
 const { showSettingButton, settingButtonPosition } =
diff --git a/packages/grid-layouts/src/hooks/useHandler.ts b/packages/grid-layouts/src/hooks/useHandler.ts
index 8728ad30..a1263454 100644
--- a/packages/grid-layouts/src/hooks/useHandler.ts
+++ b/packages/grid-layouts/src/hooks/useHandler.ts
@@ -6,7 +6,7 @@ import {
   useSporadicSettingStore,
   useTransitionSettingStore,
 } from '../store'
-import { storeToRefs } from '@vben/pinia'
+import { storeToRefs } from 'pinia'
 import { reactive } from 'vue'
 import { useClipboard } from '@vben/utils'
 
diff --git a/packages/grid-layouts/src/store/modules/headerSetting.ts b/packages/grid-layouts/src/store/modules/headerSetting.ts
index c53ff3be..adfa04e6 100644
--- a/packages/grid-layouts/src/store/modules/headerSetting.ts
+++ b/packages/grid-layouts/src/store/modules/headerSetting.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { HeaderSetting } from '@vben/types'
 import { ThemeEnum, HEADER_PRESET_BG_COLOR_LIST } from '@vben/constants'
 
diff --git a/packages/grid-layouts/src/store/modules/layoutComposables.ts b/packages/grid-layouts/src/store/modules/layoutComposables.ts
index 7b4daed7..b9dfb3f3 100644
--- a/packages/grid-layouts/src/store/modules/layoutComposables.ts
+++ b/packages/grid-layouts/src/store/modules/layoutComposables.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { useElementSize } from '@vben/utils'
 import { ref } from 'vue'
 
diff --git a/packages/grid-layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
index 94871911..6d70f849 100644
--- a/packages/grid-layouts/src/store/modules/menuSetting.ts
+++ b/packages/grid-layouts/src/store/modules/menuSetting.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { MenuSetting } from '@vben/types'
 import {
   MenuModeEnum,
diff --git a/packages/grid-layouts/src/store/modules/multiTabsSetting.ts b/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
index bc21de84..f5fd9254 100644
--- a/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
+++ b/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { MultiTabsSetting } from '@vben/types'
 
 export const useMultiTabsSettingStore = defineStore({
diff --git a/packages/grid-layouts/src/store/modules/sporadicSetting.ts b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
index f3c891f8..fe86d795 100644
--- a/packages/grid-layouts/src/store/modules/sporadicSetting.ts
+++ b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { SporadicSetting } from '@vben/types'
 import {
   SettingButtonPositionEnum,
diff --git a/packages/grid-layouts/src/store/modules/transitionSetting.ts b/packages/grid-layouts/src/store/modules/transitionSetting.ts
index 3a40c8c8..1d0eeb06 100644
--- a/packages/grid-layouts/src/store/modules/transitionSetting.ts
+++ b/packages/grid-layouts/src/store/modules/transitionSetting.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { TransitionSetting } from '@vben/types'
 import { RouterTransitionEnum } from '@vben/constants'
 
diff --git a/packages/grid-layouts/tsconfig.json b/packages/grid-layouts/tsconfig.json
index 4913dc85..53114773 100644
--- a/packages/grid-layouts/tsconfig.json
+++ b/packages/grid-layouts/tsconfig.json
@@ -4,11 +4,7 @@
     "target": "esnext",
     "module": "esnext",
     "baseUrl": ".",
-    "lib": ["dom", "esnext"],
-    "types": [
-      "vite/client",
-      "@vben/constant",
-    ]
+    "lib": ["dom", "esnext"]
   },
   "include": []
 }
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index a554c255..07103d22 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -8,8 +8,9 @@
     "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo"
   },
   "dependencies": {
-  "@vben/locale": "workspace:*",
     "@vben/constants": "workspace:*",
+    "@vben/locale": "workspace:*",
+    "@vben/stores": "workspace:*",
     "@vben/utils": "workspace:*",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
@@ -17,6 +18,5 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
     "@vben/types": "workspace:*"
-
   }
 }
diff --git a/packages/hooks/src/config/index.ts b/packages/hooks/src/config/index.ts
new file mode 100644
index 00000000..ddfcd2b2
--- /dev/null
+++ b/packages/hooks/src/config/index.ts
@@ -0,0 +1 @@
+export * from './useAppConfig'
diff --git a/packages/hooks/src/config/useAppConfig.ts b/packages/hooks/src/config/useAppConfig.ts
new file mode 100644
index 00000000..d218f2ce
--- /dev/null
+++ b/packages/hooks/src/config/useAppConfig.ts
@@ -0,0 +1,29 @@
+import {
+  useAppConfig as appConfigStore,
+  storeToRefs,
+  StoreGeneric,
+} from '@vben/stores'
+import { DefineAppConfigOptions, SidebarConfigOptions } from '@vben/types'
+import { _merge } from '@vben/utils'
+
+export const useAppConfig = () => {
+  const useAppConfigStore = appConfigStore()
+  const appConfigOptions = storeToRefs(
+    useAppConfigStore as StoreGeneric,
+  ) as unknown as DefineAppConfigOptions
+  const setAppConfig = (configs: Partial<DefineAppConfigOptions>) => {
+    useAppConfigStore.$patch((state) => {
+      _merge(state, configs)
+    })
+  }
+
+  const setSidebar = (sidebarConfigs: Partial<SidebarConfigOptions>) => {
+    useAppConfigStore.setSidebar(sidebarConfigs)
+  }
+
+  return {
+    setAppConfig,
+    setSidebar,
+    ...appConfigOptions,
+  }
+}
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 1b3a62b3..899f5229 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -4,3 +4,4 @@ export * from './useTitle'
 export * from './usePage'
 export * from './useContext'
 export * from './useRefs'
+export * from './config'
diff --git a/packages/layouts/package.json b/packages/layouts/package.json
index 5f6124f4..248f1c4d 100644
--- a/packages/layouts/package.json
+++ b/packages/layouts/package.json
@@ -12,7 +12,6 @@
     "@vben/directives": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/locale": "workspace:*",
-    "@vben/pinia": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
diff --git a/packages/pinia/src/index.ts b/packages/pinia/src/index.ts
deleted file mode 100644
index 231b2ab8..00000000
--- a/packages/pinia/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pinia'
diff --git a/packages/pinia/index.ts b/packages/stores/index.ts
similarity index 100%
rename from packages/pinia/index.ts
rename to packages/stores/index.ts
diff --git a/packages/pinia/package.json b/packages/stores/package.json
similarity index 73%
rename from packages/pinia/package.json
rename to packages/stores/package.json
index 140c16a1..6098203d 100644
--- a/packages/pinia/package.json
+++ b/packages/stores/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vben/pinia",
+  "name": "@vben/stores",
   "version": "3.0.0-bata.1",
   "main": "index.ts",
   "module": "index.ts",
@@ -8,9 +8,13 @@
     "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo"
   },
   "dependencies": {
+    "@vben/constants": "workspace:*",
     "@vben/utils": "workspace:*",
     "pinia": "^2.0.30",
     "pinia-plugin-persistedstate": "^3.0.2",
     "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
   }
 }
diff --git a/packages/stores/src/index.ts b/packages/stores/src/index.ts
new file mode 100644
index 00000000..354a2cf4
--- /dev/null
+++ b/packages/stores/src/index.ts
@@ -0,0 +1,2 @@
+export * from './pinia'
+export * from './modules/index'
diff --git a/packages/stores/src/modules/appConfig.ts b/packages/stores/src/modules/appConfig.ts
new file mode 100644
index 00000000..1f9ae928
--- /dev/null
+++ b/packages/stores/src/modules/appConfig.ts
@@ -0,0 +1,231 @@
+import { defineStore } from 'pinia'
+import {
+  ContentConfigOptions,
+  DefineAppConfigOptions,
+  FooterConfigOptions,
+  HeaderConfigOptions,
+  LogoConfigOptions,
+  MenuConfigOptions,
+  SidebarConfigOptions,
+  TabTbrConfigOptions,
+  TransitionConfigOptions,
+} from '@vben/types'
+import { _assign } from '@vben/utils'
+import {
+  CacheTypeEnum,
+  ContentLayoutEnum,
+  HEADER_PRESET_BG_COLOR_LIST,
+  MenuModeEnum,
+  MixSidebarTriggerEnum,
+  NavBarModeEnum,
+  PermissionModeEnum,
+  RouterTransitionEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  SIDE_BAR_BG_COLOR_LIST,
+  ThemeEnum,
+  TriggerEnum,
+} from '@vben/constants'
+
+export const useAppConfig = defineStore({
+  id: 'APP_CONFIG',
+  state: (): DefineAppConfigOptions => ({
+    theme: ThemeEnum.LIGHT,
+    navBarMode: NavBarModeEnum.SIDEBAR,
+    themeColor: '',
+    showThemeModeToggle: true,
+    openKeepAlive: true,
+    useOpenBackTop: true,
+    closeMessageOnSwitch: false,
+    removeAllHttpPending: true,
+    permissionCacheType: CacheTypeEnum.LOCAL,
+    settingButtonPosition: SettingButtonPositionEnum.AUTO,
+    openSettingDrawer: false,
+    permissionMode: PermissionModeEnum.BACK,
+    sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+    grayMode: false,
+    colorWeak: false,
+    lockTime: 0,
+    useLockPage: false,
+    canEmbedIFramePage: true,
+    sidebar: {
+      show: true,
+      visible: true,
+      bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+      width: 210,
+      mixSidebarWidth: 80,
+      collapsedWidth: 48,
+      collapsed: false,
+      trigger: TriggerEnum.CENTER,
+    },
+    menu: {
+      canDrag: false,
+      split: false,
+      mode: MenuModeEnum.INLINE,
+      accordion: false,
+      collapsedShowLabel: false,
+      mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+      mixSideFixed: false,
+      topMenuAlign: 'start',
+      dropdownPlacement: 'top-start',
+    },
+    header: {
+      show: true,
+      visible: true,
+      bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+      height: 48,
+      showDoc: true,
+      showBreadCrumb: true,
+      showBreadCrumbIcon: true,
+      showFullScreen: true,
+      showNotice: true,
+      showSearch: true,
+      showLocalePicker: true,
+      showSetting: true,
+    },
+    logo: {
+      show: true,
+      visible: true,
+      showTitle: true,
+    },
+    tabTar: {
+      show: true,
+      visible: true,
+      height: 36,
+      cache: true,
+      canDrag: false,
+      showFold: true,
+      showQuick: true,
+      showRedo: true,
+    },
+    content: {
+      fullScreen: false,
+      mode: ContentLayoutEnum.FULL,
+    },
+    footer: {
+      height: 60,
+      show: false,
+      visible: false,
+    },
+    transition: {
+      enable: true,
+      basicTransition: RouterTransitionEnum.FADE_SIDE,
+      openPageLoading: true,
+      openNProgress: false,
+    },
+  }),
+  actions: {
+    setTheme(value: ThemeEnum) {
+      this.theme = value
+    },
+    setNavBarMode(value: NavBarModeEnum) {
+      this.navBarMode = value
+    },
+    setThemeColor(value: string) {
+      this.themeColor = value
+    },
+    setShowThemeModeToggle(value: boolean) {
+      this.showThemeModeToggle = value
+    },
+    setOpenKeepAlive(value: boolean) {
+      this.openKeepAlive = value
+    },
+    setUseOpenBackTop(value: boolean) {
+      this.useOpenBackTop = value
+    },
+    setCloseMessageOnSwitch(value: boolean) {
+      this.closeMessageOnSwitch = value
+    },
+    setRemoveAllHttpPending(value: boolean) {
+      this.removeAllHttpPending = value
+    },
+    setPermissionCacheType(value: CacheTypeEnum) {
+      this.permissionCacheType = value
+    },
+    setSettingButtonPosition(value: SettingButtonPositionEnum) {
+      this.settingButtonPosition = value
+    },
+    setOpenSettingDrawer(value: boolean) {
+      this.openSettingDrawer = value
+    },
+    setPermissionMode(value: PermissionModeEnum) {
+      this.permissionMode = value
+    },
+    setSessionTimeoutProcessing(value: SessionTimeoutProcessingEnum) {
+      this.sessionTimeoutProcessing = value
+    },
+    setGrayMode(value: boolean) {
+      this.grayMode = value
+    },
+    setColorWeak(value: boolean) {
+      this.colorWeak = value
+    },
+    setLockTime(value: number) {
+      this.lockTime = value
+    },
+    setUseLockPage(value: boolean) {
+      this.useLockPage = value
+    },
+    setCanEmbedIFramePage(value: boolean) {
+      this.canEmbedIFramePage = value
+    },
+    setSidebar(
+      value: Partial<
+        Omit<SidebarConfigOptions, 'mixSidebarWidth' | 'collapsedWidth'>
+      >,
+    ) {
+      _assign(this.sidebar, value)
+    },
+    setMenu(value: Partial<MenuConfigOptions>) {
+      _assign(this.menu, value)
+    },
+    setHeader(value: Partial<Omit<HeaderConfigOptions, 'height'>>) {
+      _assign(this.header, value)
+    },
+    setLogo(value: Partial<LogoConfigOptions>) {
+      _assign(this.logo, value)
+    },
+    setTabTar(value: Partial<TabTbrConfigOptions>) {
+      _assign(this.tabTar, value)
+    },
+    setContent(value: Partial<ContentConfigOptions>) {
+      _assign(this.content, value)
+    },
+    setFooter(value: Partial<Omit<FooterConfigOptions, 'height'>>) {
+      _assign(this.footer, value)
+    },
+    setTransition(value: Partial<TransitionConfigOptions>) {
+      _assign(this.transition, value)
+    },
+  },
+  persist: {
+    // excludedPaths: ['openSettingDrawer'], // Temporarily invalid
+    paths: [
+      'theme',
+      'navBarMode',
+      'themeColor',
+      'showThemeModeToggle',
+      'openKeepAlive',
+      'useOpenBackTop',
+      'closeMessageOnSwitch',
+      'removeAllHttpPending',
+      'permissionCacheType',
+      'settingButtonPosition',
+      'permissionMode',
+      'sessionTimeoutProcessing',
+      'grayMode',
+      'colorWeak',
+      'lockTime',
+      'useLockPage',
+      'canEmbedIFramePage',
+      'sidebar',
+      'menu',
+      'header',
+      'logo',
+      'tabTar',
+      'content',
+      'footer',
+      'transition',
+    ],
+  },
+})
diff --git a/packages/stores/src/modules/index.ts b/packages/stores/src/modules/index.ts
new file mode 100644
index 00000000..fc809df8
--- /dev/null
+++ b/packages/stores/src/modules/index.ts
@@ -0,0 +1,2 @@
+export * from './layoutComposables'
+export * from './appConfig'
diff --git a/packages/stores/src/modules/layoutComposables.ts b/packages/stores/src/modules/layoutComposables.ts
new file mode 100644
index 00000000..b9dfb3f3
--- /dev/null
+++ b/packages/stores/src/modules/layoutComposables.ts
@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia'
+import { useElementSize } from '@vben/utils'
+import { ref } from 'vue'
+
+export const useLayoutHeader = defineStore('LAYOUT_HEADER', () => {
+  const headerRef = ref<HTMLElement>()
+
+  const { height: headerHeight, width: headerWidth } = useElementSize(headerRef)
+
+  return {
+    headerRef,
+    headerHeight,
+    headerWidth,
+  }
+})
+
+export const useLayoutSidebar = defineStore('LAYOUT_SIDEBAR', () => {
+  const sidebarRef = ref<HTMLElement>()
+
+  const { height: sidebarHeight, width: sidebarWidth } =
+    useElementSize(sidebarRef)
+
+  return {
+    sidebarRef,
+    sidebarHeight,
+    sidebarWidth,
+  }
+})
+
+export const useLayoutTab = defineStore('LAYOUT_TAB', () => {
+  const tabRef = ref<HTMLElement>()
+
+  const { height: tabHeight, width: tabWidth } = useElementSize(tabRef)
+
+  return {
+    tabRef,
+    tabHeight,
+    tabWidth,
+  }
+})
+
+export const useLayoutContent = defineStore('LAYOUT_FOOTER', () => {
+  const contentRef = ref<HTMLElement>()
+
+  const { height: contentHeight, width: contentWidth } =
+    useElementSize(contentRef)
+
+  return {
+    contentRef,
+    contentHeight,
+    contentWidth,
+  }
+})
+
+export const useLayoutFooter = defineStore('LAYOUT_FOOTER', () => {
+  const footerRef = ref<HTMLElement>()
+
+  const { height: footerHeight, width: footerWidth } = useElementSize(footerRef)
+
+  return {
+    footerRef,
+    footerHeight,
+    footerWidth,
+  }
+})
diff --git a/packages/pinia/src/persist.ts b/packages/stores/src/persist.ts
similarity index 100%
rename from packages/pinia/src/persist.ts
rename to packages/stores/src/persist.ts
diff --git a/packages/pinia/src/pinia.ts b/packages/stores/src/pinia.ts
similarity index 96%
rename from packages/pinia/src/pinia.ts
rename to packages/stores/src/pinia.ts
index 4355df16..37c34961 100644
--- a/packages/pinia/src/pinia.ts
+++ b/packages/stores/src/pinia.ts
@@ -7,6 +7,7 @@ import { createStorageName } from '@vben/utils'
 const pinia = createPinia()
 
 pinia.use(
+  // @ts-ignore
   createPersistedState(persistGlobalConfig(createStorageName(import.meta.env))),
 )
 
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index de51fc39..d3375fff 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -1,3 +1,17 @@
+import {
+  CacheTypeEnum,
+  ContentLayoutEnum,
+  MenuModeEnum,
+  NavBarModeEnum,
+  MixSidebarTriggerEnum,
+  PermissionModeEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  ThemeEnum,
+  TriggerEnum,
+  RouterTransitionEnum,
+} from '@vben/constants'
+
 export type LocaleType = 'zh_CN' | 'en'
 
 export interface LocaleConfig {
@@ -42,3 +56,140 @@ export interface GlobEnvConfig {
   // Project abbreviation
   VITE_GLOB_APP_SHORT_NAME: string
 }
+
+export interface DefineAppConfigOptions {
+  // Navigation bar mode
+  navBarMode: NavBarModeEnum
+  // Theme
+  theme: ThemeEnum
+  // Theme color
+  themeColor: string
+  // Whether to show the theme switch button
+  showThemeModeToggle: boolean
+  // pageLayout whether to enable keep-alive
+  openKeepAlive: boolean
+  // Whether to open back to top
+  useOpenBackTop: boolean
+  // Is it possible to embed iframe pages
+  canEmbedIFramePage: boolean
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: boolean
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  removeAllHttpPending: boolean
+  // Storage location of permission related information
+  permissionCacheType: CacheTypeEnum
+  // Configure where the button is displayed
+  settingButtonPosition: SettingButtonPositionEnum
+  // Configuration setting drawer open
+  openSettingDrawer: boolean
+  // Permission mode
+  permissionMode: PermissionModeEnum
+  // Session timeout processing
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum
+  // Website gray mode, open for possible mourning dates
+  grayMode: boolean
+  // Whether to turn on the color weak mode
+  colorWeak: boolean
+  // Lock screen time
+  lockTime: number
+  // Whether to show the lock screen
+  useLockPage: boolean
+  sidebar: Partial<SidebarConfigOptions>
+  menu: Partial<MenuConfigOptions>
+  header: Partial<HeaderConfigOptions>
+  logo: Partial<LogoConfigOptions>
+  tabTar: Partial<TabTbrConfigOptions>
+  content: Partial<ContentConfigOptions>
+  footer: Partial<FooterConfigOptions>
+  transition: Partial<TransitionConfigOptions>
+}
+
+export interface SidebarConfigOptions {
+  show: boolean
+  visible: boolean
+  bgColor: string
+  collapsed: boolean
+  width: number
+  trigger: TriggerEnum
+  readonly mixSidebarWidth: number
+  readonly collapsedWidth: number
+}
+export interface MenuConfigOptions {
+  canDrag: boolean
+  split: boolean
+  mode: MenuModeEnum
+  accordion: boolean
+  collapsedShowLabel: boolean
+  mixSideTrigger: MixSidebarTriggerEnum
+  mixSideFixed: boolean
+  topMenuAlign: 'start' | 'center' | 'end'
+  dropdownPlacement:
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end'
+}
+
+export interface HeaderConfigOptions {
+  show: boolean
+  visible: boolean
+  bgColor: string
+  showFullScreen: boolean
+  showDoc: boolean
+  showNotice: boolean
+  showSearch: boolean
+  showLocalePicker: boolean
+  showSetting: boolean
+  readonly height: number
+  // Show breadcrumbs
+  showBreadCrumb: boolean
+  // Show breadcrumb icon
+  showBreadCrumbIcon: boolean
+}
+
+export interface LogoConfigOptions {
+  show: boolean
+  visible: boolean
+  showTitle: boolean
+}
+
+export interface TabTbrConfigOptions {
+  show: boolean
+  visible: boolean
+  cache: boolean
+  canDrag: boolean
+  showQuick: boolean
+  showRedo: boolean
+  showFold: boolean
+  readonly height: number
+}
+
+export interface ContentConfigOptions {
+  fullScreen: boolean
+  mode: ContentLayoutEnum
+}
+
+export interface FooterConfigOptions {
+  show: boolean
+  visible: boolean
+  readonly height: number
+}
+
+export interface TransitionConfigOptions {
+  //  Whether to open the page switching animation
+  enable: boolean
+  // Route basic switching animation
+  basicTransition: RouterTransitionEnum
+  // Whether to open page switching loading
+  openPageLoading: boolean
+  // Whether to open the top progress bar
+  openNProgress: boolean
+}
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 600d0e0c..5c767cd7 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -9,6 +9,8 @@ export {
   isArray,
   isString,
   toString,
+  assign as _assign,
+  merge as _merge,
 } from 'lodash-es'
 // @ts-ignore
 import Sortable from 'sortablejs'

From 570ea6dfbe0438c6f17e44654be403924e60b5d0 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 9 Feb 2023 00:06:15 +0800
Subject: [PATCH 15/22] feat: grid-layout ,useAppConfig

---
 .../grid-layouts/src/components/Layout.vue    |  41 +++-
 packages/grid-layouts/src/components/Main.vue |  18 +-
 .../components/composables/LayoutFooter.vue   |   7 +-
 .../components/composables/LayoutHeader.vue   |  34 ++-
 .../components/composables/LayoutSidebar.vue  |  37 ++-
 .../src/components/composables/LayoutTab.vue  |  16 +-
 .../src/{logics => components}/constant.ts    |   0
 .../src/components/logo/index.vue             |  61 +++--
 .../components/DarkModeToggle.vue             |  19 +-
 .../components/HandleButtons.vue              |   9 +-
 .../components/InputNumberItem.vue            |   4 +-
 .../components/InterfaceDisplay.vue           |  65 ++---
 .../components/InterfaceFunction.vue          |  95 ++++----
 .../setting-drawer/components/SelectItem.vue  |   4 +-
 .../setting-drawer/components/SwitchItem.vue  |   4 +-
 .../components/ThemeColorPicker.vue           |   4 +-
 .../setting-drawer/components/Transitions.vue |  19 +-
 .../src/components/setting-drawer/index.vue   |  38 ++-
 .../src/components/trigger/HeaderTrigger.vue  |  17 --
 .../src/components/trigger/inedx.vue          |  22 --
 .../src/components/widgets/FixedSetting.vue   |  21 +-
 .../src/components/widgets/HeaderTrigger.vue  |  17 ++
 .../src/components/widgets/Setting.vue        |  16 +-
 .../SiderCenterTrigger.vue                    |  10 +-
 .../SiderFooterTrigger.vue                    |  10 +-
 packages/grid-layouts/src/hooks/useHandler.ts | 224 ------------------
 packages/hooks/src/config/useAppConfig.ts     | 215 ++++++++++++++++-
 packages/hooks/src/web/useCopyToClipboard.ts  |  83 +++----
 packages/stores/src/modules/appConfig.ts      |  13 +
 packages/types/src/config.ts                  |  19 +-
 packages/types/src/global.ts                  |  28 +--
 packages/utils/index.ts                       |   1 +
 32 files changed, 570 insertions(+), 601 deletions(-)
 rename packages/grid-layouts/src/{logics => components}/constant.ts (100%)
 delete mode 100644 packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
 delete mode 100644 packages/grid-layouts/src/components/trigger/inedx.vue
 create mode 100644 packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
 rename packages/grid-layouts/src/components/{trigger => widgets}/SiderCenterTrigger.vue (57%)
 rename packages/grid-layouts/src/components/{trigger => widgets}/SiderFooterTrigger.vue (51%)
 delete mode 100644 packages/grid-layouts/src/hooks/useHandler.ts

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 8301c830..41b33cca 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -5,27 +5,58 @@ import LayoutContent from './composables/LayoutContent.vue'
 import LayoutTab from './composables/LayoutTab.vue'
 import Feature from './feature/index.vue'
 import { StoreGeneric, storeToRefs } from 'pinia'
-import { useMenuSettingStore } from '../store'
 import {
   useLayoutHeader,
   useLayoutSidebar,
   useLayoutTab,
   useLayoutContent,
 } from '@vben/stores'
-import { useComprehensive } from '../hooks/useComprehensive'
+import { useAppConfig } from '@vben/hooks'
+import { computed, unref } from 'vue'
 
 const { headerRef } = storeToRefs(useLayoutHeader() as StoreGeneric)
 const { sidebarRef } = storeToRefs(useLayoutSidebar() as StoreGeneric)
 const { tabRef } = storeToRefs(useLayoutTab() as StoreGeneric)
 const { contentRef } = storeToRefs(useLayoutContent() as StoreGeneric)
-const { getLayoutStyles } = useComprehensive()
 
-const { type } = storeToRefs(useMenuSettingStore())
+const { navBarMode, isTopMenu, isMixSidebar, sidebar, header, footer, tabTar } =
+  useAppConfig()
+
+const getLayoutStyles = computed(() => {
+  const getAsideWidth = () => {
+    if (unref(isTopMenu) || !unref(sidebar).visible) return 0
+    if (unref(sidebar).collapsed) return unref(sidebar).collapsedWidth
+    if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
+    return unref(sidebar).width
+  }
+
+  const getHeaderHeight = () => {
+    if (!unref(header).visible) return 0
+    return unref(header).height
+  }
+
+  const getTabBarHeight = () => {
+    if (!unref(tabTar).visible) return 0
+    return unref(tabTar).height
+  }
+
+  const getFooterHeight = () => {
+    if (!unref(footer).visible) return 0
+    return unref(footer).height
+  }
+
+  return {
+    '--aside-width': `${getAsideWidth()}px`,
+    '--header-height': `${getHeaderHeight()}px`,
+    '--tab-bar-height': `${getTabBarHeight()}px`,
+    '--footer-height': `${getFooterHeight()}px`,
+  }
+})
 </script>
 <template>
   <section
     class="grid-layout-container h-full w-full"
-    :class="[`${type}`]"
+    :class="[`${navBarMode}`]"
     :style="getLayoutStyles"
   >
     <LayoutHeader ref="headerRef" />
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index ee29900a..9947a09f 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,15 +1,17 @@
 <script lang="ts" setup>
 import { useMenuSettingStore } from '../store'
-import { useLayoutHeader} from '@vben/stores'
+import { useLayoutHeader } from '@vben/stores'
 import { useAppConfig } from '@vben/hooks'
-import {StoreGeneric, storeToRefs} from 'pinia'
+import { StoreGeneric, storeToRefs } from 'pinia'
 import { useComprehensive } from '../hooks/useComprehensive'
 
 const menuSettingStore = useMenuSettingStore()
 const { type } = storeToRefs(menuSettingStore)
 
-const { headerWidth, headerHeight } = storeToRefs(useLayoutHeader() as StoreGeneric)
-const { setAppConfig, setSidebar } = useAppConfig()
+const { headerWidth, headerHeight } = storeToRefs(
+  useLayoutHeader() as StoreGeneric,
+)
+const { setAppConfig, setSidebar, sidebar } = useAppConfig()
 
 // console.log(sidebar.value.bgColor)
 
@@ -22,10 +24,10 @@ const { getLayoutStyles } = useComprehensive()
     <div>layoutStyles： {{ getLayoutStyles }}</div>
     <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
     ___________________________________________________________________________
-    <div>
-<!--      useAppConfig : {{ sidebar }}-->
-    </div>
-    <div @click.stop="setSidebar({  width: 365423463136132121212})">
+    <div>useAppConfig : {{ sidebar }}</div>
+    <div
+      @click.stop="setAppConfig({ sidebar: { width: 365423463136132121212 } })"
+    >
       sidebar change
     </div>
     <!--    <RouterView />-->
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
index 22604800..6889813f 100644
--- a/packages/grid-layouts/src/components/composables/LayoutFooter.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import { useSporadicSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
 import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import { useAppConfig } from '@vben/hooks'
 
-const { hiddenFooter } = storeToRefs(useSporadicSettingStore())
+const { footer } = useAppConfig()
 </script>
 <template>
   <footer
     class="overflow-hidden relative"
-    :class="[hiddenFooter ? 'invisible' : 'visible']"
+    :class="[footer.visible ? 'visible' : 'invisible']"
   >
     footer
     <SecondaryBorder top />
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index 0bf078bc..7af61743 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -1,10 +1,6 @@
 <script lang="ts" setup>
-import Trigger from '../trigger/inedx.vue'
-import { useHeaderSettingStore, useMenuSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
 import Breadcrumb from '../breadcrumb/index.vue'
 import Logo from '../logo/index.vue'
-import { useComprehensive } from '../../hooks/useComprehensive'
 import SecondaryBorder from '../comm/SecondaryBorder.vue'
 import FullScreen from '../widgets/FullScreen.vue'
 import Search from '../widgets/Search.vue'
@@ -12,19 +8,35 @@ import Locale from '../widgets/Locale.vue'
 import UserDropdown from '../widgets/UserDropdown.vue'
 import Notify from '../notify/index.vue'
 import Setting from '../widgets/Setting.vue'
-const menuSettingStore = useMenuSettingStore()
-const { showHeaderTrigger, isMixSidebar } = storeToRefs(menuSettingStore)
-const { hidden } = storeToRefs(useHeaderSettingStore())
-const { getShowHeaderLogo } = useComprehensive()
+import HeaderTrigger from '../widgets/HeaderTrigger.vue'
+import { useAppConfig } from '@vben/hooks'
+import { computed, unref } from 'vue'
+import { TriggerEnum } from '@vben/constants'
+
+const { isMixSidebar, isTopMenu, isMix, sidebar, menu, header } = useAppConfig()
+
+const showHeaderTrigger = computed(() => {
+  if (
+    unref(isTopMenu) ||
+    (unref(isMix) && unref(menu.split)) ||
+    unref(isMixSidebar)
+  )
+    return false
+  return unref(sidebar).trigger === TriggerEnum.HEADER
+})
+
+const showHeaderLogo = computed(() => {
+  return unref(isTopMenu) || unref(isMix)
+})
 </script>
 <template>
   <header
     class="grid-area-[grid-header] grid grid-cols-2 content-center overflow-hidden relative"
-    :class="[hidden ? 'invisible' : 'visible']"
+    :class="[header.visible ? 'visible' : 'invisible']"
   >
     <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3 flex">
-      <Logo v-if="getShowHeaderLogo" />
-      <Trigger v-if="showHeaderTrigger && !isMixSidebar" />
+      <Logo v-if="showHeaderLogo" />
+      <HeaderTrigger v-if="showHeaderTrigger" />
       <Breadcrumb />
     </div>
     <div class="h-[var(--header-height)] grid-col-[min-content] flex">
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index 3844411a..f6ad735e 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -1,27 +1,42 @@
 <script lang="ts" setup>
-import Trigger from '../trigger/inedx.vue'
-import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
-const menuSettingStore = useMenuSettingStore()
 import Logo from '../logo/index.vue'
-import { useComprehensive } from '../../hooks/useComprehensive'
 import SecondaryBorder from '../comm/SecondaryBorder.vue'
-const { showFooterTrigger, hidden, showHeaderTrigger, isMixSidebar } =
-  storeToRefs(menuSettingStore)
-const { getShowSidebarLogo } = useComprehensive()
+import SiderFooterTrigger from '../widgets/SiderFooterTrigger.vue'
+import SiderCenterTrigger from '../widgets/SiderCenterTrigger.vue'
+import { useAppConfig } from '@vben/hooks'
+import { computed, unref } from 'vue'
+import { TriggerEnum } from '@vben/constants'
+
+
+const { isMixSidebar, isTopMenu, sidebar, isSidebar } = useAppConfig()
+
+const showFooterTrigger = computed(() => {
+  if (unref(isMixSidebar)) return true
+  return unref(sidebar).trigger === TriggerEnum.FOOTER
+})
+
+const showCenterTrigger = computed(() => {
+  if (unref(isMixSidebar) || unref(isTopMenu)) return false
+  return unref(sidebar).trigger === TriggerEnum.CENTER
+})
+
+const showSidebarLogo = computed(()=>{
+  return unref(isSidebar) || unref(isMixSidebar)
+})
 </script>
 <template>
   <div
     class="grid-area-[grid-sidebar] relative"
     :class="[
       { 'pb-40px': showFooterTrigger },
-      hidden ? 'invisible overflow-hidden' : 'visible',
+      sidebar.visible ? 'visible' : 'invisible overflow-hidden',
     ]"
   >
     <div>
-      <Logo v-if="getShowSidebarLogo" />
+      <Logo v-if="showSidebarLogo" />
     </div>
+    <SiderFooterTrigger v-if="showFooterTrigger" />
+    <SiderCenterTrigger v-if="showCenterTrigger" />
     <SecondaryBorder right />
-    <Trigger v-if="!showHeaderTrigger || isMixSidebar" />
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
index b9e8410f..a217f8e4 100644
--- a/packages/grid-layouts/src/components/composables/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -1,29 +1,25 @@
 <script lang="ts" setup>
-import { useMultiTabsSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
 import TabRedo from '../tab-bar/TabRedo.vue'
 import TabQuick from '../tab-bar/TabQuick.vue'
 import FoldButton from '../tab-bar/FoldButton.vue'
 import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import { useAppConfig } from '@vben/hooks'
 
-const { hidden } = storeToRefs(useMultiTabsSettingStore())
-const { showFold, showRedo, showQuick } = storeToRefs(
-  useMultiTabsSettingStore(),
-)
+const { tabTar } = useAppConfig()
 </script>
 <template>
   <div
     class="grid-area-[grid-tab-bar] grid grid-cols-2 content-center overflow-hidden relative"
-    :class="[hidden ? 'invisible' : 'visible']"
+    :class="[tabTar.visible ? 'visible' : 'invisible']"
   >
     <div class="h-[var(--tab-bar-height)] grid-col-start-1 grid-col-end-3">
       Multiple Tab
     </div>
     <!--border-b border-[var(&#45;&#45;layout-border-color)]-->
     <div class="h-[var(--tab-bar-height)] grid-col-[min-content] flex relative">
-      <TabRedo v-if="showRedo" />
-      <TabQuick v-if="showQuick" />
-      <FoldButton v-if="showFold" />
+      <TabRedo v-if="tabTar.showRedo" />
+      <TabQuick v-if="tabTar.showQuick" />
+      <FoldButton v-if="tabTar.showFold" />
       <SecondaryBorder bottom />
     </div>
     <SecondaryBorder bottom />
diff --git a/packages/grid-layouts/src/logics/constant.ts b/packages/grid-layouts/src/components/constant.ts
similarity index 100%
rename from packages/grid-layouts/src/logics/constant.ts
rename to packages/grid-layouts/src/components/constant.ts
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
index a91ef727..949ca1d0 100644
--- a/packages/grid-layouts/src/components/logo/index.vue
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -1,52 +1,47 @@
 <script lang="ts" setup>
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useSporadicSettingStore,
-} from '../../store'
-import { storeToRefs } from 'pinia'
-import { useComprehensive } from '../../hooks/useComprehensive'
 import { computed, unref } from 'vue'
-import logo from '@/assets/images/logo.png'
-const {
-  width,
-  collapsed,
-  collapsedWidth,
-  isSidebar,
-  isMixSidebar,
-  mixSidebarWidth,
-} = storeToRefs(useMenuSettingStore())
-const { height } = storeToRefs(useHeaderSettingStore())
-const { showLogo } = storeToRefs(useSporadicSettingStore())
-const { getShowLogoTitle } = useComprehensive()
+import logoImg from '@/assets/images/logo.png'
+import { useAppConfig } from '@vben/hooks'
+
+const { isMixSidebar, sidebar, isSidebar, logo, header } = useAppConfig()
 
 const getWidth = computed(() => {
-  if (unref(isSidebar) && unref(collapsed)) return unref(collapsedWidth)
-  if (unref(isMixSidebar)) return unref(mixSidebarWidth)
-  return unref(width)
+  if (unref(isSidebar) && unref(sidebar).collapsed)
+    return unref(sidebar).collapsedWidth
+  if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
+  return unref(sidebar).width
+})
+
+const showLogoTitle = computed(() => {
+  if (unref(isSidebar)) return !unref(sidebar).collapsed
+  if (unref(isMixSidebar)) return false
+  return true
 })
 
+const getStyles = computed(() => {
+  return {
+    width: `${unref(getWidth)}px`,
+    height: `${unref(header).height}px`,
+    transition: 'all 0.3s var(--transition-bezier)',
+    'grid-template-columns': `32px ${
+      unref(showLogoTitle) ? 'minmax(0, 1fr)' : 0
+    }`,
+  }
+})
 const title = 'Vben Admin'
 </script>
 <template>
   <div
-    v-if="showLogo"
+    v-if="logo.show"
     class="grid grid-cols-2 content-center grid-rows-none pl-8px transition-all-300"
-    :style="{
-      width: `${getWidth}px`,
-      height: `${height}px`,
-      transition: 'all 0.3s var(--transition-bezier)',
-      'grid-template-columns': `32px ${
-        getShowLogoTitle ? 'minmax(0, 1fr)' : 0
-      }`,
-    }"
+    :style="getStyles"
   >
     <div class="h-32px w-32px">
-      <img class="h-full w-full" :src="logo" alt="logo" />
+      <img class="h-full w-full" :src="logoImg" alt="logo" />
     </div>
     <div
       class="p-x-8px truncate grid content-center font-700 text-16px"
-      :class="[getShowLogoTitle ? 'visible' : 'invisible']"
+      :class="[showLogoTitle ? 'visible' : 'invisible']"
     >
       {{ title }}
     </div>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
index 4e939b9f..68bcaaae 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
@@ -1,20 +1,19 @@
 <script lang="ts" setup>
-import { ThemeEnum } from '@vben/constants'
-import { storeToRefs } from 'pinia'
-import { useHeaderSettingStore } from '../../../store'
+import { HandlerSettingEnum, ThemeEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
 
-const headerSettingStore = useHeaderSettingStore()
-
-const { isDark } = storeToRefs(headerSettingStore)
-
-const handlerDarkModeToggle = (v) => {
-  headerSettingStore.setTheme(v ? ThemeEnum.DARK : ThemeEnum.LIGHT)
+const { baseHandler, theme } = useAppConfig()
+const handlerThemeModeToggle = (v) => {
+  baseHandler(HandlerSettingEnum.CHANGE_THEME, v)
 }
 </script>
 
 <template>
   <VbenSpace justify="center">
-    <VbenSwitch :value="isDark" @update:value="handlerDarkModeToggle">
+    <VbenSwitch
+      :value="theme === ThemeEnum.DARK"
+      @update:value="handlerThemeModeToggle"
+    >
       <template #checked-icon>
         <VbenIconify icon="emojione:crescent-moon" hoverPointer />
       </template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue b/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
index a6b58660..2e80e63b 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
 import { useI18n } from '@vben/locale'
-import { useHandler } from '../../../hooks/useHandler'
+import { useAppConfig } from '@vben/hooks'
 
 const { t } = useI18n()
-const { copySetting, resetSetting, clearAndRedo } = useHandler()
+
+const { copyConfigs, resetAllConfig, clearAndRedo } = useAppConfig()
 </script>
 <template>
   <VbenSpace vertical>
-    <VbenButton type="info" block @click="copySetting">
+    <VbenButton type="info" block @click="copyConfigs">
       <template #icon>
         <VbenIconify icon="ant-design:snippets-twotone" />
       </template>
       {{ t('layout.setting.copyBtn') }}
     </VbenButton>
-    <VbenButton type="warning" @click="resetSetting" block>
+    <VbenButton type="warning" @click="resetAllConfig" block>
       <template #icon>
         <VbenIconify icon="ant-design:reload-outlined" />
       </template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
index 048bc715..8f638ed7 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="InputNumberItem">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { useHandler } from '../../../hooks/useHandler'
+import { useAppConfig } from '@vben/hooks'
 
 const props = defineProps({
   title: { type: String, default: '' },
@@ -17,7 +17,7 @@ const props = defineProps({
   suffix: { type: String, default: '' },
 })
 
-const { baseHandler } = useHandler()
+const { baseHandler } = useAppConfig()
 const onChange = (value) => {
   baseHandler(props.event, value)
 }
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
index fd78668f..7ea8ebc9 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
@@ -2,100 +2,85 @@
 import SwitchItem from './SwitchItem.vue'
 import { HandlerSettingEnum } from '@vben/constants'
 import { useI18n } from '@vben/locale'
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useMultiTabsSettingStore,
-  useSporadicSettingStore,
-} from '../../../store'
-import { storeToRefs } from 'pinia'
+import { useAppConfig } from '@vben/hooks'
 
 const { t } = useI18n()
 
 const {
-  isMixSidebar,
-  show: showMenu,
+  header,
+  sidebar,
   isHorizontal,
-} = storeToRefs(useMenuSettingStore())
-const {
-  showBreadCrumb,
-  showBreadCrumbIcon,
-  showLogo,
-  showFooter,
-  fullContent,
+  isMixSidebar,
+  tabTar,
+  footer,
+  content,
   grayMode,
   colorWeak,
-} = storeToRefs(useSporadicSettingStore())
-const {
-  show: showMultiTabs,
-  showRedo,
-  showQuick,
-  showFold,
-} = storeToRefs(useMultiTabsSettingStore())
-const { show: showHeader } = storeToRefs(useHeaderSettingStore())
+  logo,
+} = useAppConfig()
 </script>
 <template>
   <VbenSpace vertical>
     <SwitchItem
       :title="t('layout.setting.header')"
-      :def="showHeader"
+      :def="header.visible"
       :event="HandlerSettingEnum.HEADER_SHOW"
     />
     <SwitchItem
       :title="t('layout.setting.breadcrumb')"
-      :def="showBreadCrumb"
+      :def="header.showBreadCrumb"
       :event="HandlerSettingEnum.SHOW_BREADCRUMB"
-      :disabled="!showHeader"
+      :disabled="!header.visible"
     />
     <SwitchItem
       :title="t('layout.setting.breadcrumbIcon')"
-      :def="showBreadCrumbIcon"
+      :def="header.showBreadCrumbIcon"
       :event="HandlerSettingEnum.SHOW_BREADCRUMB_ICON"
-      :disabled="!showBreadCrumb || !showHeader"
+      :disabled="!header.showBreadCrumb || !header.visible"
     />
     <SwitchItem
       :title="t('layout.setting.sidebar')"
-      :def="showMenu"
+      :def="sidebar.visible"
       :event="HandlerSettingEnum.MENU_SHOW_SIDEBAR"
       :disabled="isHorizontal"
     />
     <SwitchItem
       title="Logo"
-      :def="showLogo"
+      :def="logo.visible"
       :event="HandlerSettingEnum.SHOW_LOGO"
       :disabled="isMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.tabs')"
-      :def="showMultiTabs"
+      :def="tabTar.visible"
       :event="HandlerSettingEnum.TABS_SHOW"
     />
     <SwitchItem
       :title="t('layout.setting.tabsRedoBtn')"
-      :def="showRedo"
+      :def="tabTar.showRedo"
       :event="HandlerSettingEnum.TABS_SHOW_REDO"
-      :disabled="!showMultiTabs"
+      :disabled="!tabTar.visible"
     />
     <SwitchItem
       :title="t('layout.setting.tabsQuickBtn')"
-      :def="showQuick"
+      :def="tabTar.showQuick"
       :event="HandlerSettingEnum.TABS_SHOW_QUICK"
-      :disabled="!showMultiTabs"
+      :disabled="!tabTar.visible"
     />
     <SwitchItem
       :title="t('layout.setting.tabsFoldBtn')"
-      :def="showFold"
+      :def="tabTar.showFold"
       :event="HandlerSettingEnum.TABS_SHOW_FOLD"
-      :disabled="!showMultiTabs"
+      :disabled="!tabTar.visible"
     />
     <SwitchItem
       :title="t('layout.setting.footer')"
-      :def="showFooter"
+      :def="footer.visible"
       :event="HandlerSettingEnum.SHOW_FOOTER"
     />
     <SwitchItem
       :title="t('layout.setting.fullContent')"
-      :def="fullContent"
+      :def="content.fullScreen"
       :event="HandlerSettingEnum.FULL_CONTENT"
     />
     <SwitchItem
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
index 0c58c4fd..5f51dcb0 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed, unref } from 'vue'
 import SwitchItem from './SwitchItem.vue'
 import SelectItem from './SelectItem.vue'
 import InputNumberItem from './InputNumberItem.vue'
@@ -7,60 +6,40 @@ import { HandlerSettingEnum } from '@vben/constants'
 import {
   mixSidebarTriggerOptions,
   topMenuAlignOptions,
-  getMenuTriggerOptions,
   contentModeOptions,
-} from '../../../logics/constant'
+  getMenuTriggerOptions,
+} from '../../constant'
 import { useI18n } from '@vben/locale'
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useSporadicSettingStore,
-} from '../../../store'
-import { storeToRefs } from 'pinia'
+import { useAppConfig } from '@vben/hooks'
 
 const { t } = useI18n()
 
 const {
+  header,
+  sidebar,
   isHorizontal,
-  hidden: sidebarHidden,
-  split,
-  isMix,
-  mixSideFixed,
-  fixed: menuFixed,
   isMixSidebar,
   isTopMenu,
+  content,
+  isMix,
+  menu,
+  lockTime,
   closeMixSidebarOnChange,
-  collapsed,
-  canDrag,
-  accordion,
-  collapsedShowTitle,
-  mixSideTrigger,
-  topMenuAlign,
-  trigger,
-  menuWidth,
-} = storeToRefs(useMenuSettingStore())
-const {
-  showSearch,
-  show: showHeader,
-  fixed: headerFixed,
-} = storeToRefs(useHeaderSettingStore())
-const { contentMode, lockTime } = storeToRefs(useSporadicSettingStore())
-const triggerOptions = getMenuTriggerOptions(unref(split))
-const getMenuDisabled = computed(() => {
-  return !isHorizontal && !sidebarHidden
-})
+} = useAppConfig()
+
+const triggerOptions = getMenuTriggerOptions(menu.split)
 </script>
 <template>
   <VbenSpace vertical>
     <SwitchItem
       :title="t('layout.setting.splitMenu')"
-      :def="split"
+      :def="menu.split"
       :event="HandlerSettingEnum.MENU_SPLIT"
       :disabled="!isMix"
     />
     <SwitchItem
       :title="t('layout.setting.mixSidebarFixed')"
-      :def="mixSideFixed"
+      :def="menu.mixSideFixed"
       :event="HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR"
       :disabled="!isMixSidebar"
     />
@@ -72,71 +51,77 @@ const getMenuDisabled = computed(() => {
     />
     <SwitchItem
       :title="t('layout.setting.menuCollapse')"
-      :def="collapsed"
+      :def="sidebar.collapsed"
       :event="HandlerSettingEnum.MENU_COLLAPSED"
       :disabled="isTopMenu"
     />
     <SwitchItem
       :title="t('layout.setting.menuDrag')"
-      :def="canDrag"
+      :def="menu.canDrag"
       :event="HandlerSettingEnum.MENU_HAS_DRAG"
-      :disabled="!getMenuDisabled"
+      :disabled="!sidebar.visible"
     />
     <SwitchItem
       :title="t('layout.setting.menuSearch')"
-      :def="showSearch"
+      :def="header.showSearch"
       :event="HandlerSettingEnum.HEADER_SEARCH"
-      :disabled="!showHeader"
+      :disabled="!header.visible"
     />
     <SwitchItem
       :title="t('layout.setting.menuAccordion')"
-      :def="accordion"
+      :def="menu.accordion"
       :event="HandlerSettingEnum.MENU_ACCORDION"
-      :disabled="!getMenuDisabled"
+      :disabled="!sidebar.visible || !menu.accordion"
     />
     <SwitchItem
       :title="t('layout.setting.collapseMenuDisplayName')"
-      :def="collapsedShowTitle"
+      :def="menu.collapsedShowLabel"
       :event="HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE"
-      :disabled="!getMenuDisabled || !collapsed || isMixSidebar"
+      :disabled="!sidebar.collapsed || sidebar.visible || isMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.fixedHeader')"
-      :def="headerFixed"
+      :def="header.fixed"
       :event="HandlerSettingEnum.HEADER_FIXED"
-      :disabled="!showHeader"
+      :disabled="!header.visible"
     />
     <SwitchItem
       :title="t('layout.setting.fixedSideBar')"
-      :def="menuFixed"
+      :def="sidebar.fixed"
       :event="HandlerSettingEnum.MENU_FIXED"
-      :disabled="!getMenuDisabled || isMixSidebar"
+      :disabled="!sidebar.show || isHorizontal || isMixSidebar"
     />
     <SelectItem
       :title="t('layout.setting.mixSidebarTrigger')"
       :options="mixSidebarTriggerOptions"
-      :def="mixSideTrigger"
+      :def="menu.mixSideTrigger"
       :event="HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR"
       :disabled="!isMixSidebar"
     />
     <SelectItem
       :title="t('layout.setting.topMenuLayout')"
       :options="topMenuAlignOptions"
-      :def="topMenuAlign"
+      :def="menu.topMenuAlign"
       :event="HandlerSettingEnum.MENU_TOP_ALIGN"
-      :disabled="!showHeader || split || (!isTopMenu && !split) || isMixSidebar"
+      :disabled="
+        !sidebar.show ||
+        isHorizontal ||
+        menu.split ||
+        (!isTopMenu && !menu.split) ||
+        isMixSidebar
+      "
     />
     <SelectItem
       :title="t('layout.setting.menuCollapseButton')"
       :options="triggerOptions"
-      :def="trigger"
+      :def="sidebar.trigger"
       :event="HandlerSettingEnum.MENU_TRIGGER"
       :disabled="isMixSidebar || isTopMenu || (isMix && isHorizontal)"
     />
     <SelectItem
       :title="t('layout.setting.contentMode')"
       :options="contentModeOptions"
-      :def="contentMode"
+      :def="content.mode"
       :event="HandlerSettingEnum.CONTENT_MODE"
     />
     <InputNumberItem
@@ -155,10 +140,10 @@ const getMenuDisabled = computed(() => {
       :min="100"
       :max="240"
       :step="10"
-      :def="menuWidth"
+      :def="sidebar.width"
       suffix="px"
       :event="HandlerSettingEnum.MENU_WIDTH"
-      :disabled="!getMenuDisabled"
+      :disabled="!sidebar.visible"
     />
   </VbenSpace>
 </template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
index 078c8773..d1498c96 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
@@ -2,7 +2,7 @@
 import { PropType, h } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
 import { useI18n } from '@vben/locale'
-import { useHandler } from '../../../hooks/useHandler'
+import { useAppConfig } from '@vben/hooks'
 
 const { t } = useI18n()
 
@@ -20,7 +20,7 @@ const props = defineProps({
   options: { type: Array, default: () => [] },
 })
 
-const { baseHandler } = useHandler()
+const { baseHandler } = useAppConfig()
 const onChange = (value) => {
   baseHandler(props.event, value)
 }
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
index dd872c23..5661b0e6 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SwitchItem">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { useHandler } from '../../../hooks/useHandler'
+import { useAppConfig } from '@vben/hooks'
 
 const props = defineProps({
   title: { type: String, default: '' },
@@ -16,7 +16,7 @@ const props = defineProps({
   },
 })
 
-const { baseHandler } = useHandler()
+const { baseHandler } = useAppConfig()
 const onChange = (value) => {
   baseHandler(props.event, value)
 }
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue b/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
index 10017bab..715f8bca 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="ThemeColorPicker">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { useHandler } from '../../../hooks/useHandler'
+import { useAppConfig } from '@vben/hooks'
 
 const props = defineProps({
   colorList: {
@@ -17,7 +17,7 @@ const props = defineProps({
   },
 })
 
-const { baseHandler } = useHandler()
+const { baseHandler } = useAppConfig()
 const handleClick = (color) => {
   baseHandler(props.event, color)
 }
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
index 7a0e2a6b..6b6a259f 100644
--- a/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
@@ -2,40 +2,37 @@
 import SwitchItem from './SwitchItem.vue'
 import SelectItem from './SelectItem.vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { routerTransitionOptions } from '../../../logics/constant'
+import { routerTransitionOptions } from '../../constant'
 import { useI18n } from '@vben/locale'
-import { useTransitionSettingStore } from '../../../store'
-import { storeToRefs } from 'pinia'
+import { useAppConfig } from '@vben/hooks'
 
 const { t } = useI18n()
 
-const { openPageLoading, openNProgress, enable, basicTransition } = storeToRefs(
-  useTransitionSettingStore(),
-)
+const { transition } = useAppConfig()
 </script>
 <template>
   <VbenSpace vertical>
     <SwitchItem
       :title="t('layout.setting.progress')"
-      :def="openNProgress"
+      :def="transition.openNProgress"
       :event="HandlerSettingEnum.OPEN_PROGRESS"
     />
     <SwitchItem
       :title="t('layout.setting.switchLoading')"
-      :def="openPageLoading"
+      :def="transition.openPageLoading"
       :event="HandlerSettingEnum.OPEN_PAGE_LOADING"
     />
     <SwitchItem
       :title="t('layout.setting.switchAnimation')"
-      :def="enable"
+      :def="transition.enable"
       :event="HandlerSettingEnum.OPEN_ROUTE_TRANSITION"
     />
     <SelectItem
       :title="t('layout.setting.animationType')"
       :options="routerTransitionOptions"
-      :def="basicTransition"
+      :def="transition.basicTransition"
       :event="HandlerSettingEnum.ROUTER_TRANSITION"
-      :disabled="!enable"
+      :disabled="!transition.enable"
     />
   </VbenSpace>
 </template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/index.vue b/packages/grid-layouts/src/components/setting-drawer/index.vue
index 939393c3..91edbe76 100644
--- a/packages/grid-layouts/src/components/setting-drawer/index.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/index.vue
@@ -1,12 +1,6 @@
 <script lang="ts" setup>
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useSporadicSettingStore,
-} from '../../store'
-import { storeToRefs } from 'pinia'
 import { useI18n } from '@vben/locale'
-import { navigationBarTypeList } from '../../logics/constant'
+import { navigationBarTypeList } from '../constant'
 import {
   HandlerSettingEnum,
   APP_PRESET_COLOR_LIST,
@@ -21,27 +15,25 @@ import Transitions from './components/Transitions.vue'
 import InterfaceFunction from './components/InterfaceFunction.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import HandleButtons from './components/HandleButtons.vue'
-import { useHandler } from '../../hooks/useHandler'
+import { useAppConfig } from '@vben/hooks'
+const { baseHandler } = useAppConfig()
 
 const { t } = useI18n()
-const sporadicSettingStore = useSporadicSettingStore()
-const { showSettingDrawer, themeColor } = storeToRefs(sporadicSettingStore)
-const menuSettingStore = useMenuSettingStore()
 const {
-  type: navBarType,
+  openSettingDrawer,
+  toggleSettingDrawerVisible,
   isHorizontal,
-  bgColor: menuBgColor,
-} = storeToRefs(menuSettingStore)
-const headerSettingStore = useHeaderSettingStore()
-const { bgColor: headerBgColor } = storeToRefs(headerSettingStore)
-
-const { baseHandler } = useHandler()
+  navBarMode,
+  themeColor,
+  header,
+  sidebar,
+} = useAppConfig()
 </script>
 
 <template>
   <VbenDrawer
-    :show="showSettingDrawer"
-    @update:show="sporadicSettingStore.toggleSettingDrawerVisible()"
+    :show="openSettingDrawer"
+    @update:show="toggleSettingDrawerVisible"
     :width="330"
   >
     <VbenDrawerContent closable>
@@ -55,7 +47,7 @@ const { baseHandler } = useHandler()
         {{ t('layout.setting.navMode') }}
       </VbenDivider>
       <NavigationBarPicker
-        :def="navBarType"
+        :def="navBarMode"
         :type-list="navigationBarTypeList"
         @handler="
           (item) => {
@@ -81,7 +73,7 @@ const { baseHandler } = useHandler()
         {{ t('layout.setting.headerTheme') }}
       </VbenDivider>
       <ThemeColorPicker
-        :def="headerBgColor"
+        :def="header.bgColor"
         :event="HandlerSettingEnum.HEADER_THEME"
         :color-list="HEADER_PRESET_BG_COLOR_LIST"
       />
@@ -90,7 +82,7 @@ const { baseHandler } = useHandler()
       }}</VbenDivider>
 
       <ThemeColorPicker
-        :def="menuBgColor"
+        :def="sidebar.bgColor"
         :event="HandlerSettingEnum.MENU_THEME"
         :color-list="SIDE_BAR_BG_COLOR_LIST"
       />
diff --git a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue b/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
deleted file mode 100644
index 29bb6276..00000000
--- a/packages/grid-layouts/src/components/trigger/HeaderTrigger.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { useMenuSettingStore } from '../../store'
-import { defineStores } from 'pinia'
-import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
-
-const menuSettingStore = useMenuSettingStore()
-const { collapsed } = storeToRefs(menuSettingStore)
-</script>
-<template>
-  <TopButtonWrapper @click.stop="menuSettingStore.toggleCollapsed()">
-    <VbenIconify
-      color="var(--trigger-icon-color)"
-      size="22"
-      :icon="collapsed ? 'line-md:menu-fold-right' : 'line-md:menu-fold-left'"
-    />
-  </TopButtonWrapper>
-</template>
diff --git a/packages/grid-layouts/src/components/trigger/inedx.vue b/packages/grid-layouts/src/components/trigger/inedx.vue
deleted file mode 100644
index 2871ca2f..00000000
--- a/packages/grid-layouts/src/components/trigger/inedx.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
-import { TriggerEnum } from '@vben/constants'
-import CenterTrigger from './SiderCenterTrigger.vue'
-import FooterTrigger from './SiderFooterTrigger.vue'
-import HeaderTrigger from './HeaderTrigger.vue'
-import { computed, defineComponent, unref } from 'vue'
-const { trigger, showHeaderTrigger, isMixSidebar } = storeToRefs(
-  useMenuSettingStore(),
-)
-const component = computed<ReturnType<typeof defineComponent>>(() => {
-  if (unref(isMixSidebar)) return FooterTrigger
-  if (unref(showHeaderTrigger)) return HeaderTrigger
-  if (unref(trigger) === TriggerEnum.CENTER) return CenterTrigger
-  if (unref(trigger) === TriggerEnum.FOOTER) return FooterTrigger
-  return undefined
-})
-</script>
-<template>
-  <component :is="component" />
-</template>
diff --git a/packages/grid-layouts/src/components/widgets/FixedSetting.vue b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
index 3758d6fb..6563ae5c 100644
--- a/packages/grid-layouts/src/components/widgets/FixedSetting.vue
+++ b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import { useHeaderSettingStore, useSporadicSettingStore } from '../../store'
 import { computed, unref } from 'vue'
-import { storeToRefs } from 'pinia'
 import { SettingButtonPositionEnum } from '@vben/constants'
-const sporadicSettingStore = useSporadicSettingStore()
-
-const { showSettingButton, settingButtonPosition, fullContent } =
-  storeToRefs(sporadicSettingStore)
-
-const { show } = storeToRefs(useHeaderSettingStore())
+import { useAppConfig } from '@vben/hooks'
+const { toggleSettingDrawerVisible, header, settingButtonPosition, content } =
+  useAppConfig()
 
 const getShowSettingFixedButton = computed(() => {
-  if (!unref(showSettingButton)) {
+  if (!unref(header).showSetting) {
     return false
   }
   if (unref(settingButtonPosition) === SettingButtonPositionEnum.AUTO) {
-    return !unref(show) || !unref(showSettingButton) || unref(fullContent)
+    return (
+      !unref(header).show ||
+      !unref(header).showSetting ||
+      unref(content).fullScreen
+    )
   }
   return unref(settingButtonPosition) === SettingButtonPositionEnum.FIXED
 })
@@ -23,7 +22,7 @@ const getShowSettingFixedButton = computed(() => {
 <template>
   <div
     v-if="getShowSettingFixedButton"
-    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
+    @click.stop="toggleSettingDrawerVisible"
     class="p-6px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[rgba(9,96,189,.9)] cursor-pointer"
   >
     <VbenIconify icon="fluent:settings-48-regular" />
diff --git a/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue b/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
new file mode 100644
index 00000000..402d4b1a
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import { useAppConfig } from '@vben/hooks'
+
+const { sidebar, toggleCollapsed } = useAppConfig()
+</script>
+<template>
+  <TopButtonWrapper @click.stop="toggleCollapsed">
+    <VbenIconify
+      color="var(--trigger-icon-color)"
+      size="22"
+      :icon="
+        sidebar.collapsed ? 'line-md:menu-fold-right' : 'line-md:menu-fold-left'
+      "
+    />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Setting.vue b/packages/grid-layouts/src/components/widgets/Setting.vue
index ecea7b87..1d151979 100644
--- a/packages/grid-layouts/src/components/widgets/Setting.vue
+++ b/packages/grid-layouts/src/components/widgets/Setting.vue
@@ -1,22 +1,18 @@
 <script lang="ts" setup>
-import { useHeaderSettingStore, useSporadicSettingStore } from '../../store'
 import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
 import { computed, unref } from 'vue'
 import { SettingButtonPositionEnum } from '@vben/constants'
-import { storeToRefs } from 'pinia'
-const sporadicSettingStore = useSporadicSettingStore()
+import { useAppConfig } from '@vben/hooks'
 
-const { showSettingButton, settingButtonPosition } =
-  storeToRefs(sporadicSettingStore)
-
-const { show } = storeToRefs(useHeaderSettingStore())
+const { toggleSettingDrawerVisible, header, settingButtonPosition } =
+  useAppConfig()
 
 const getShowSetting = computed(() => {
-  if (!unref(showSettingButton)) {
+  if (!unref(header).showSetting) {
     return false
   }
   if (unref(settingButtonPosition) === SettingButtonPositionEnum.AUTO) {
-    return unref(show)
+    return unref(header).show
   }
   return unref(settingButtonPosition) === SettingButtonPositionEnum.HEADER
 })
@@ -24,7 +20,7 @@ const getShowSetting = computed(() => {
 <template>
   <TopButtonWrapper
     v-if="getShowSetting"
-    @click.stop="sporadicSettingStore.toggleSettingDrawerVisible()"
+    @click.stop="toggleSettingDrawerVisible"
   >
     <VbenIconify icon="fluent:settings-48-regular" />
   </TopButtonWrapper>
diff --git a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
similarity index 57%
rename from packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
rename to packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
index 0cae7fc8..957303e2 100644
--- a/packages/grid-layouts/src/components/trigger/SiderCenterTrigger.vue
+++ b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
-import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
+import { useAppConfig } from '@vben/hooks'
 
-const menuSettingStore = useMenuSettingStore()
-const { collapsed } = storeToRefs(menuSettingStore)
+const { sidebar, toggleCollapsed } = useAppConfig()
 </script>
 <template>
   <div
     class="h-24px w-24px cursor-pointer grid-center absolute top-1/2 right-0 z-1 rounded-1/2 translate-1/2 border border-[var(--trigger-border-color)] bg-[var(--trigger-color)] shadow shadow-color-[rgb(0 0 0 / 6%)]"
-    @click.stop="menuSettingStore.toggleCollapsed()"
+    @click.stop="toggleCollapsed"
   >
     <VbenIconify
-      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
+      :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
       icon="ph:caret-left-bold"
       color="var(--trigger-icon-color)"
     />
diff --git a/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
similarity index 51%
rename from packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
rename to packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
index 2f04d388..c8063c57 100644
--- a/packages/grid-layouts/src/components/trigger/SiderFooterTrigger.vue
+++ b/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
-import { useMenuSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
+import { useAppConfig } from '@vben/hooks'
 
-const menuSettingStore = useMenuSettingStore()
-const { collapsed } = storeToRefs(menuSettingStore)
+const { sidebar, toggleCollapsed } = useAppConfig()
 </script>
 <template>
   <div
     class="h-36px w-full absolute bottom-0 cursor-pointer grid-center bg-[#3b3b3b]"
-    @click.stop="menuSettingStore.toggleCollapsed()"
+    @click.stop="toggleCollapsed"
   >
     <VbenIconify
-      :class="[collapsed ? '-rotate-180' : 'rotate-0']"
+      :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
       color="rgba(255, 255, 255, .65)"
       hover-color="rgba(255, 255, 255, 1)"
       icon="ph:caret-double-left-bold"
diff --git a/packages/grid-layouts/src/hooks/useHandler.ts b/packages/grid-layouts/src/hooks/useHandler.ts
deleted file mode 100644
index a1263454..00000000
--- a/packages/grid-layouts/src/hooks/useHandler.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-import { HandlerSettingEnum } from '@vben/constants'
-import {
-  useHeaderSettingStore,
-  useMenuSettingStore,
-  useMultiTabsSettingStore,
-  useSporadicSettingStore,
-  useTransitionSettingStore,
-} from '../store'
-import { storeToRefs } from 'pinia'
-import { reactive } from 'vue'
-import { useClipboard } from '@vben/utils'
-
-export const useHandler = () => {
-  const sporadicSettingStore = useSporadicSettingStore()
-  const menuSettingStore = useMenuSettingStore()
-  const headerSettingStore = useHeaderSettingStore()
-  const multiTabsSettingStore = useMultiTabsSettingStore()
-  const transitionSettingStore = useTransitionSettingStore()
-
-  function copySetting() {
-    try {
-      const { copy, isSupported } = useClipboard()
-      if (!isSupported)
-        return console.error('Your browser does not support Clipboard API')
-      const source = reactive({
-        SporadicSetting: storeToRefs(sporadicSettingStore),
-        MenuSetting: storeToRefs(menuSettingStore),
-        HeaderSetting: storeToRefs(headerSettingStore),
-        MultiTabsSetting: storeToRefs(multiTabsSettingStore),
-        TransitionSetting: storeToRefs(transitionSettingStore),
-      })
-      copy(JSON.stringify(source))
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  const resetSetting = () => {
-    sporadicSettingStore.$reset()
-    menuSettingStore.$reset()
-    headerSettingStore.$reset()
-    multiTabsSettingStore.$reset()
-    transitionSettingStore.$reset()
-  }
-
-  const clearAndRedo = () => {
-    localStorage.clear()
-    sessionStorage.clear()
-    location.reload()
-  }
-  function baseHandler(event: HandlerSettingEnum, value: any) {
-    switch (event) {
-      case HandlerSettingEnum.CHANGE_LAYOUT:
-        const { mode, type, split } = value
-        menuSettingStore.setType(type)
-        menuSettingStore.setMode(mode)
-        menuSettingStore.setSplit(split)
-        break
-
-      case HandlerSettingEnum.CHANGE_THEME_COLOR:
-        // if (getThemeColor.value === value) {
-        //   return {}
-        // }
-        // changeTheme(value);
-        sporadicSettingStore.setThemeColor(value)
-        break
-
-      case HandlerSettingEnum.CHANGE_THEME:
-        // if (getDarkMode.value === value) {
-        //   return {}
-        // }
-        // updateDarkTheme(value);
-        break
-
-      case HandlerSettingEnum.MENU_HAS_DRAG:
-        menuSettingStore.setCanDrag(value)
-        break
-
-      case HandlerSettingEnum.MENU_ACCORDION:
-        menuSettingStore.setAccordion(value)
-        break
-
-      case HandlerSettingEnum.MENU_TRIGGER:
-        menuSettingStore.setTrigger(value)
-        break
-
-      case HandlerSettingEnum.MENU_TOP_ALIGN:
-        menuSettingStore.setTopMenuAlign(value)
-        break
-      case HandlerSettingEnum.MENU_COLLAPSED:
-        menuSettingStore.setCollapsed(value)
-        break
-
-      case HandlerSettingEnum.MENU_WIDTH:
-        return { menuSetting: { menuWidth: value } }
-
-      case HandlerSettingEnum.MENU_SHOW_SIDEBAR:
-        menuSettingStore.setShow(value)
-        break
-
-      case HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE:
-        return { menuSetting: { collapsedShowTitle: value } }
-
-      case HandlerSettingEnum.MENU_THEME:
-        // updateSidebarBgColor(value);
-        menuSettingStore.setBgColor(value)
-        break
-
-      case HandlerSettingEnum.MENU_SPLIT:
-        menuSettingStore.setSplit(value)
-        break
-
-      case HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
-        menuSettingStore.setCloseMixSidebarOnChange(value)
-        break
-
-      case HandlerSettingEnum.MENU_FIXED:
-        menuSettingStore.setFixed(value)
-        break
-
-      case HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR:
-        menuSettingStore.setMixSideTrigger(value)
-        break
-
-      case HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR:
-        menuSettingStore.setMixSideFixed(value)
-        break
-
-      // ============transition==================
-      case HandlerSettingEnum.OPEN_PAGE_LOADING:
-        transitionSettingStore.setOpenPageLoading(value)
-        break
-
-      case HandlerSettingEnum.ROUTER_TRANSITION:
-        transitionSettingStore.setBasicTransition(value)
-        break
-
-      case HandlerSettingEnum.OPEN_ROUTE_TRANSITION:
-        transitionSettingStore.setEnable(value)
-        break
-
-      case HandlerSettingEnum.OPEN_PROGRESS:
-        transitionSettingStore.setOpenNProgress(value)
-        break
-      // ============sporadic==================
-
-      case HandlerSettingEnum.LOCK_TIME:
-        sporadicSettingStore.setLockTime(value)
-        break
-
-      case HandlerSettingEnum.FULL_CONTENT:
-        sporadicSettingStore.setFullContent(value)
-        break
-      case HandlerSettingEnum.CONTENT_MODE:
-        sporadicSettingStore.setContentMode(value)
-        break
-
-      case HandlerSettingEnum.SHOW_BREADCRUMB:
-        sporadicSettingStore.setShowBreadCrumb(value)
-        break
-      case HandlerSettingEnum.SHOW_BREADCRUMB_ICON:
-        sporadicSettingStore.setShowBreadCrumbIcon(value)
-        break
-
-      case HandlerSettingEnum.GRAY_MODE:
-        // updateGrayMode(value)
-        sporadicSettingStore.setGrayMode(value)
-        break
-      case HandlerSettingEnum.SHOW_FOOTER:
-        sporadicSettingStore.setShowFooter(value)
-        break
-
-      case HandlerSettingEnum.COLOR_WEAK:
-        // updateColorWeak(value)
-        sporadicSettingStore.setColorWeak(value)
-        break
-
-      case HandlerSettingEnum.SHOW_LOGO:
-        sporadicSettingStore.setShowLogo(value)
-        break
-
-      // ============tabs==================
-      case HandlerSettingEnum.TABS_SHOW_QUICK:
-        multiTabsSettingStore.setShowQuick(value)
-        break
-      case HandlerSettingEnum.TABS_SHOW:
-        multiTabsSettingStore.setShow(value)
-        break
-
-      case HandlerSettingEnum.TABS_SHOW_REDO:
-        multiTabsSettingStore.setShowRedo(value)
-        break
-
-      case HandlerSettingEnum.TABS_SHOW_FOLD:
-        multiTabsSettingStore.setShowFold(value)
-        break
-
-      // ============header==================
-      case HandlerSettingEnum.HEADER_THEME:
-        // updateHeaderBgColor(value);
-        headerSettingStore.setBgColor(value)
-        break
-
-      case HandlerSettingEnum.HEADER_SEARCH:
-        headerSettingStore.setShowSearch(value)
-        break
-      case HandlerSettingEnum.HEADER_FIXED:
-        headerSettingStore.setFixed(value)
-        break
-      case HandlerSettingEnum.HEADER_SHOW:
-        headerSettingStore.setShow(value)
-        break
-      default:
-        return
-    }
-  }
-
-  return {
-    copySetting,
-    resetSetting,
-    clearAndRedo,
-    baseHandler,
-  }
-}
diff --git a/packages/hooks/src/config/useAppConfig.ts b/packages/hooks/src/config/useAppConfig.ts
index d218f2ce..924696c1 100644
--- a/packages/hooks/src/config/useAppConfig.ts
+++ b/packages/hooks/src/config/useAppConfig.ts
@@ -1,29 +1,226 @@
 import {
-  useAppConfig as appConfigStore,
-  storeToRefs,
   StoreGeneric,
+  storeToRefs,
+  useAppConfig as appConfigStore,
 } from '@vben/stores'
-import { DefineAppConfigOptions, SidebarConfigOptions } from '@vben/types'
+import { DefineAppConfigOptions } from '@vben/types'
+import { HandlerSettingEnum, ThemeEnum } from '@vben/constants'
 import { _merge } from '@vben/utils'
+import { reactive, unref } from 'vue'
+import { useClipboard, _omit } from '@vben/utils'
 
+type DefineAppConfigStoreGetters = {
+  isSidebar: boolean
+  isTopMenu: boolean
+  isMixSidebar: boolean
+  isMix: boolean
+  isMixMode: boolean
+  isHorizontal: boolean
+}
 export const useAppConfig = () => {
   const useAppConfigStore = appConfigStore()
   const appConfigOptions = storeToRefs(
     useAppConfigStore as StoreGeneric,
-  ) as unknown as DefineAppConfigOptions
-  const setAppConfig = (configs: Partial<DefineAppConfigOptions>) => {
+  ) as unknown as DefineAppConfigOptions & DefineAppConfigStoreGetters
+  const { openSettingDrawer, sidebar } = appConfigOptions
+  const setAppConfig = (configs: DeepPartial<DefineAppConfigOptions>) => {
     useAppConfigStore.$patch((state) => {
       _merge(state, configs)
     })
   }
 
-  const setSidebar = (sidebarConfigs: Partial<SidebarConfigOptions>) => {
-    useAppConfigStore.setSidebar(sidebarConfigs)
+  function toggleSettingDrawerVisible() {
+    useAppConfigStore.setOpenSettingDrawer(!unref(openSettingDrawer))
+  }
+
+  function toggleCollapsed() {
+    useAppConfigStore.setSidebar({ collapsed: !unref(sidebar).collapsed })
   }
 
+  function baseHandler(event: HandlerSettingEnum, value: any) {
+    setAppConfig(handlerResults(event, value, appConfigOptions))
+  }
+
+  async function copyConfigs() {
+    try {
+      const { copy, isSupported } = useClipboard()
+      if (!isSupported)
+        return console.error('Your browser does not support Clipboard API')
+      const source = reactive(_omit(appConfigOptions, ['openSettingDrawer']))
+      await copy(JSON.stringify(source))
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  function clearAndRedo() {
+    localStorage.clear()
+    sessionStorage.clear()
+    location.reload()
+  }
+
+  function resetAllConfig() {
+    useAppConfigStore.$reset()
+  }
   return {
-    setAppConfig,
-    setSidebar,
     ...appConfigOptions,
+    setAppConfig,
+    toggleSettingDrawerVisible,
+    baseHandler,
+    copyConfigs,
+    clearAndRedo,
+    resetAllConfig,
+    toggleCollapsed,
+  }
+}
+
+function handlerResults(
+  event: HandlerSettingEnum,
+  value: any,
+  configOptions: DefineAppConfigOptions,
+): DeepPartial<DefineAppConfigOptions> {
+  const { themeColor, theme, sidebar, header } = configOptions
+  switch (event) {
+    case HandlerSettingEnum.CHANGE_LAYOUT:
+      const { mode, type, split } = value
+      const splitOpt = split === undefined ? { split } : {}
+      return {
+        navBarMode: type,
+        menu: {
+          ...splitOpt,
+          mode,
+        },
+      }
+
+    case HandlerSettingEnum.CHANGE_THEME_COLOR:
+      if (unref(themeColor) === value) {
+        return {}
+      }
+      // changeTheme(value);
+      return { themeColor: value }
+
+    case HandlerSettingEnum.CHANGE_THEME:
+      if (unref(theme) === value) {
+        return {}
+      }
+      // updateDarkTheme(value);
+      return { theme: value ? ThemeEnum.DARK : ThemeEnum.LIGHT }
+
+    case HandlerSettingEnum.MENU_HAS_DRAG:
+      return { menu: { canDrag: value } }
+
+    case HandlerSettingEnum.MENU_ACCORDION:
+      return { menu: { accordion: value } }
+
+    case HandlerSettingEnum.MENU_TRIGGER:
+      return { sidebar: { trigger: value } }
+
+    case HandlerSettingEnum.MENU_TOP_ALIGN:
+      return { menu: { topMenuAlign: value } }
+
+    case HandlerSettingEnum.MENU_COLLAPSED:
+      return { sidebar: { collapsed: value } }
+
+    case HandlerSettingEnum.MENU_WIDTH:
+      return { sidebar: { width: value } }
+
+    case HandlerSettingEnum.MENU_SHOW_SIDEBAR:
+      return { sidebar: { show: value, visible: value } }
+
+    case HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE:
+      return { menu: { collapsedShowLabel: value } }
+
+    case HandlerSettingEnum.MENU_THEME:
+      // updateSidebarBgColor(value);
+      if (unref(sidebar).bgColor === value) return {}
+      return { sidebar: { bgColor: value } }
+
+    case HandlerSettingEnum.MENU_SPLIT:
+      return { menu: { split: value } }
+
+    case HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+      return { closeMixSidebarOnChange: value }
+
+    case HandlerSettingEnum.MENU_FIXED:
+      return { sidebar: { fixed: value } }
+
+    case HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR:
+      return { menu: { mixSideTrigger: value } }
+
+    case HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR:
+      return { menu: { mixSideFixed: value } }
+
+    // ============transition==================
+    case HandlerSettingEnum.OPEN_PAGE_LOADING:
+      return { transition: { openPageLoading: value } }
+
+    case HandlerSettingEnum.ROUTER_TRANSITION:
+      return { transition: { basicTransition: value } }
+
+    case HandlerSettingEnum.OPEN_ROUTE_TRANSITION:
+      return { transition: { enable: value } }
+
+    case HandlerSettingEnum.OPEN_PROGRESS:
+      return { transition: { openNProgress: value } }
+    // ============root==================
+
+    case HandlerSettingEnum.LOCK_TIME:
+      return { lockTime: value }
+
+    case HandlerSettingEnum.FULL_CONTENT:
+      return { content: { fullScreen: value } }
+
+    case HandlerSettingEnum.CONTENT_MODE:
+      return { content: { mode: value } }
+
+    case HandlerSettingEnum.SHOW_BREADCRUMB:
+      return { header: { showBreadCrumb: value } }
+
+    case HandlerSettingEnum.SHOW_BREADCRUMB_ICON:
+      return { header: { showBreadCrumbIcon: value } }
+
+    case HandlerSettingEnum.GRAY_MODE:
+      // updateGrayMode(value)
+      return { grayMode: value }
+
+    case HandlerSettingEnum.SHOW_FOOTER:
+      return { footer: { show: value, visible: value } }
+
+    case HandlerSettingEnum.COLOR_WEAK:
+      // updateColorWeak(value)
+      return { colorWeak: value }
+
+    case HandlerSettingEnum.SHOW_LOGO:
+      return { logo: { show: value, visible: value } }
+
+    // ============tabs==================
+    case HandlerSettingEnum.TABS_SHOW_QUICK:
+      return { tabTar: { showQuick: value } }
+
+    case HandlerSettingEnum.TABS_SHOW:
+      return { tabTar: { show: value, visible: value } }
+
+    case HandlerSettingEnum.TABS_SHOW_REDO:
+      return { tabTar: { showRedo: value } }
+
+    case HandlerSettingEnum.TABS_SHOW_FOLD:
+      return { tabTar: { showFold: value } }
+
+    // ============header==================
+    case HandlerSettingEnum.HEADER_THEME:
+      // updateHeaderBgColor(value);
+      if (unref(header).bgColor === value) return {}
+      return { header: { bgColor: value } }
+
+    case HandlerSettingEnum.HEADER_SEARCH:
+      return { header: { showSearch: value } }
+
+    case HandlerSettingEnum.HEADER_FIXED:
+      return { header: { fixed: value } }
+
+    case HandlerSettingEnum.HEADER_SHOW:
+      return { header: { show: value, visible: value } }
+    default:
+      return {}
   }
 }
diff --git a/packages/hooks/src/web/useCopyToClipboard.ts b/packages/hooks/src/web/useCopyToClipboard.ts
index dc0a7c61..88ccb7a1 100644
--- a/packages/hooks/src/web/useCopyToClipboard.ts
+++ b/packages/hooks/src/web/useCopyToClipboard.ts
@@ -1,78 +1,79 @@
-import { ref, watch } from 'vue';
+import { ref, watch } from 'vue'
 
-import { isUndefined } from '@vben/utils';
+import { isUndefined } from '@vben/utils'
 interface Options {
-  target?: HTMLElement;
+  target?: HTMLElement
 }
 export function useCopyToClipboard(initial?: string) {
-  const clipboardRef = ref(initial || '');
-  const isSuccessRef = ref(false);
-  const copiedRef = ref(false);
+  const clipboardRef = ref(initial || '')
+  const isSuccessRef = ref(false)
+  const copiedRef = ref(false)
   watch(
     clipboardRef,
     (str?: string) => {
       if (!isUndefined(str)) {
-        copiedRef.value = true;
-        isSuccessRef.value = copyTextToClipboard(str);
+        copiedRef.value = true
+        isSuccessRef.value = copyTextToClipboard(str)
       }
     },
     { immediate: !!initial, flush: 'sync' },
-  );
+  )
 
-  return { clipboardRef, isSuccessRef, copiedRef };
+  return { clipboardRef, isSuccessRef, copiedRef }
 }
 
-
-export async function writeTextToClipboard(initial: string){
+export async function writeTextToClipboard(initial: string) {
   try {
-    await navigator.clipboard.writeText(initial);
-  }catch (err: any){
-    throw new Error(err);
+    await navigator.clipboard.writeText(initial)
+  } catch (err: any) {
+    throw new Error(err)
   }
 }
 
-export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
-  console.log('dsfasdf',input)
-  const element = document.createElement('textarea');
-  const previouslyFocusedElement = document.activeElement;
-
-  element.value = input;
+export function copyTextToClipboard(
+  input: string,
+  { target = document.body }: Options = {},
+) {
+  console.log('dsfasdf', input)
+  const element = document.createElement('textarea')
+  const previouslyFocusedElement = document.activeElement
 
-  element.setAttribute('readonly', '');
+  element.value = input
 
-  (element.style as any).contain = 'strict';
-  element.style.position = 'absolute';
-  element.style.left = '-9999px';
-  element.style.fontSize = '12pt';
+  element.setAttribute('readonly', '')
+  ;(element.style as any).contain = 'strict'
+  element.style.position = 'absolute'
+  element.style.left = '-9999px'
+  element.style.fontSize = '12pt'
 
-  const selection = document.getSelection();
-  let originalRange;
+  const selection = document.getSelection()
+  let originalRange
   if (selection && selection.rangeCount > 0) {
-    originalRange = selection.getRangeAt(0);
+    originalRange = selection.getRangeAt(0)
   }
 
-  target.append(element);
-  element.select();
+  target.append(element)
+  element.select()
 
-  element.selectionStart = 0;
-  element.selectionEnd = input.length;
+  element.selectionStart = 0
+  element.selectionEnd = input.length
 
-  let isSuccess = false;
+  let isSuccess = false
   try {
-    isSuccess = document.execCommand('copy');
+    isSuccess = document.execCommand('copy')
   } catch (e: any) {
-    throw new Error(e);
+    throw new Error(e)
   }
 
-  element.remove();
+  element.remove()
 
   if (originalRange && selection) {
-    selection.removeAllRanges();
-    selection.addRange(originalRange);
+    selection.removeAllRanges()
+    selection.addRange(originalRange)
   }
 
   if (previouslyFocusedElement) {
-    (previouslyFocusedElement as HTMLElement).focus();
+    ;(previouslyFocusedElement as HTMLElement).focus()
   }
-  return isSuccess;
+  return isSuccess
 }
diff --git a/packages/stores/src/modules/appConfig.ts b/packages/stores/src/modules/appConfig.ts
index 1f9ae928..878b6621 100644
--- a/packages/stores/src/modules/appConfig.ts
+++ b/packages/stores/src/modules/appConfig.ts
@@ -48,10 +48,12 @@ export const useAppConfig = defineStore({
     lockTime: 0,
     useLockPage: false,
     canEmbedIFramePage: true,
+    closeMixSidebarOnChange: false,
     sidebar: {
       show: true,
       visible: true,
       bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+      fixed: false,
       width: 210,
       mixSidebarWidth: 80,
       collapsedWidth: 48,
@@ -73,6 +75,7 @@ export const useAppConfig = defineStore({
       show: true,
       visible: true,
       bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+      fixed: false,
       height: 48,
       showDoc: true,
       showBreadCrumb: true,
@@ -114,6 +117,16 @@ export const useAppConfig = defineStore({
       openNProgress: false,
     },
   }),
+  getters: {
+    isSidebar: (state) => state.navBarMode === NavBarModeEnum.SIDEBAR,
+    isTopMenu: (state) => state.navBarMode === NavBarModeEnum.TOP_MENU,
+    isMixSidebar: (state) => state.navBarMode === NavBarModeEnum.MIX_SIDEBAR,
+    isMix: (state) => state.navBarMode === NavBarModeEnum.MIX,
+    isMixMode: (state) =>
+      state.menu.mode === MenuModeEnum.INLINE &&
+      state.navBarMode === NavBarModeEnum.MIX,
+    isHorizontal: (state) => state.menu.mode === MenuModeEnum.HORIZONTAL,
+  },
   actions: {
     setTheme(value: ThemeEnum) {
       this.theme = value
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index d3375fff..df796429 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -74,6 +74,7 @@ export interface DefineAppConfigOptions {
   canEmbedIFramePage: boolean
   // Whether to delete unclosed messages and notify when switching the interface
   closeMessageOnSwitch: boolean
+  closeMixSidebarOnChange: boolean
   // Whether to cancel the http request that has been sent but not responded when switching the interface.
   removeAllHttpPending: boolean
   // Storage location of permission related information
@@ -94,19 +95,20 @@ export interface DefineAppConfigOptions {
   lockTime: number
   // Whether to show the lock screen
   useLockPage: boolean
-  sidebar: Partial<SidebarConfigOptions>
-  menu: Partial<MenuConfigOptions>
-  header: Partial<HeaderConfigOptions>
-  logo: Partial<LogoConfigOptions>
-  tabTar: Partial<TabTbrConfigOptions>
-  content: Partial<ContentConfigOptions>
-  footer: Partial<FooterConfigOptions>
-  transition: Partial<TransitionConfigOptions>
+  sidebar: SidebarConfigOptions
+  menu: MenuConfigOptions
+  header: HeaderConfigOptions
+  logo: LogoConfigOptions
+  tabTar: TabTbrConfigOptions
+  content: ContentConfigOptions
+  footer: FooterConfigOptions
+  transition: TransitionConfigOptions
 }
 
 export interface SidebarConfigOptions {
   show: boolean
   visible: boolean
+  fixed: boolean
   bgColor: string
   collapsed: boolean
   width: number
@@ -142,6 +144,7 @@ export interface HeaderConfigOptions {
   show: boolean
   visible: boolean
   bgColor: string
+  fixed: boolean
   showFullScreen: boolean
   showDoc: boolean
   showNotice: boolean
diff --git a/packages/types/src/global.ts b/packages/types/src/global.ts
index 87e3ed03..97426155 100644
--- a/packages/types/src/global.ts
+++ b/packages/types/src/global.ts
@@ -1,7 +1,7 @@
 import type { VNodeChild, PropType as VuePropType } from 'vue'
 import type { RouteRecordItem as IRouteRecordItem } from './router'
 
-declare  global {
+declare global {
   // define global
   const __VITE_USE_MOCK__: boolean
   const __APP_INFO__: {
@@ -35,33 +35,33 @@ declare  global {
   }
 
   interface Fn<T = any, R = T> {
-    (...arg: T[]): R;
+    (...arg: T[]): R
   }
 
   interface PromiseFn<T = any, R = T> {
-    (...arg: T[]): Promise<R>;
+    (...arg: T[]): Promise<R>
   }
 
-  type RefType<T> = T | null;
+  type RefType<T> = T | null
 
   type LabelValueOptions = {
-    label: string;
-    value: any;
-    [key: string]: string | number | boolean;
-  }[];
+    label: string
+    value: any
+    [key: string]: string | number | boolean
+  }[]
 
-  type EmitType = (event: string, ...args: any[]) => void;
+  type EmitType = (event: string, ...args: any[]) => void
 
-  type TargetContext = '_self' | '_blank';
+  type TargetContext = '_self' | '_blank'
 
   interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
-    $el: T;
+    $el: T
   }
 
-  type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
-
-  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
+  type ComponentRef<T extends HTMLElement = HTMLDivElement> =
+    ComponentElRef<T> | null
 
+  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
 
   // import.meta
   interface ImportMetaEnv extends ViteEnv {
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 5c767cd7..41e86323 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -11,6 +11,7 @@ export {
   toString,
   assign as _assign,
   merge as _merge,
+  omit as _omit,
 } from 'lodash-es'
 // @ts-ignore
 import Sortable from 'sortablejs'

From f99efd7b04cf642bf777d54f80b1e065fb23fcdf Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 9 Feb 2023 00:10:04 +0800
Subject: [PATCH 16/22] feat: grid-layout ,useAppConfig

---
 packages/grid-layouts/index.ts                |   2 -
 packages/grid-layouts/src/components/Main.vue |  11 +-
 .../src/components/breadcrumb/index.vue       |   7 +-
 .../src/hooks/useComprehensive.ts             |  65 --------
 packages/grid-layouts/src/store/index.ts      |  12 --
 .../src/store/modules/headerSetting.ts        |  71 --------
 .../src/store/modules/layoutComposables.ts    |  65 --------
 .../src/store/modules/menuSetting.ts          | 157 ------------------
 .../src/store/modules/multiTabsSetting.ts     |  47 ------
 .../src/store/modules/sporadicSetting.ts      | 144 ----------------
 .../src/store/modules/transitionSetting.ts    |  38 -----
 11 files changed, 4 insertions(+), 615 deletions(-)
 delete mode 100644 packages/grid-layouts/src/hooks/useComprehensive.ts
 delete mode 100644 packages/grid-layouts/src/store/index.ts
 delete mode 100644 packages/grid-layouts/src/store/modules/headerSetting.ts
 delete mode 100644 packages/grid-layouts/src/store/modules/layoutComposables.ts
 delete mode 100644 packages/grid-layouts/src/store/modules/menuSetting.ts
 delete mode 100644 packages/grid-layouts/src/store/modules/multiTabsSetting.ts
 delete mode 100644 packages/grid-layouts/src/store/modules/sporadicSetting.ts
 delete mode 100644 packages/grid-layouts/src/store/modules/transitionSetting.ts

diff --git a/packages/grid-layouts/index.ts b/packages/grid-layouts/index.ts
index 7d6fc701..25ad9b79 100644
--- a/packages/grid-layouts/index.ts
+++ b/packages/grid-layouts/index.ts
@@ -1,3 +1 @@
 export { default as Layout } from './src/index.vue'
-
-export * from './src/store'
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index 9947a09f..ff350687 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,27 +1,18 @@
 <script lang="ts" setup>
-import { useMenuSettingStore } from '../store'
 import { useLayoutHeader } from '@vben/stores'
 import { useAppConfig } from '@vben/hooks'
 import { StoreGeneric, storeToRefs } from 'pinia'
-import { useComprehensive } from '../hooks/useComprehensive'
-
-const menuSettingStore = useMenuSettingStore()
-const { type } = storeToRefs(menuSettingStore)
 
 const { headerWidth, headerHeight } = storeToRefs(
   useLayoutHeader() as StoreGeneric,
 )
-const { setAppConfig, setSidebar, sidebar } = useAppConfig()
-
-// console.log(sidebar.value.bgColor)
+const { setAppConfig, sidebar } = useAppConfig()
 
-const { getLayoutStyles } = useComprehensive()
 </script>
 <template>
   <main class="vben-grid-layout-main">
     main - {{ type }}
 
-    <div>layoutStyles： {{ getLayoutStyles }}</div>
     <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
     ___________________________________________________________________________
     <div>useAppConfig : {{ sidebar }}</div>
diff --git a/packages/grid-layouts/src/components/breadcrumb/index.vue b/packages/grid-layouts/src/components/breadcrumb/index.vue
index 9b0b1610..bfb0aba5 100644
--- a/packages/grid-layouts/src/components/breadcrumb/index.vue
+++ b/packages/grid-layouts/src/components/breadcrumb/index.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useSporadicSettingStore } from '../../store'
-import { storeToRefs } from 'pinia'
+import { useAppConfig } from '@vben/hooks'
 
-const { showBreadCrumb } = storeToRefs(useSporadicSettingStore())
+const { header } = useAppConfig()
 </script>
 <template>
   <!--  <VbenBreadcrumb>-->
@@ -10,5 +9,5 @@ const { showBreadCrumb } = storeToRefs(useSporadicSettingStore())
   <!--      -->
   <!--    </VbenBreadcrumbItem>-->
   <!--  </VbenBreadcrumb>-->
-  <div v-if="showBreadCrumb">breadcrumb</div>
+  <div v-if="header.showBreadCrumb">breadcrumb</div>
 </template>
diff --git a/packages/grid-layouts/src/hooks/useComprehensive.ts b/packages/grid-layouts/src/hooks/useComprehensive.ts
deleted file mode 100644
index 1b55e357..00000000
--- a/packages/grid-layouts/src/hooks/useComprehensive.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useMenuSettingStore } from '../store/modules/menuSetting'
-import { computed } from 'vue'
-import {
-  useHeaderSettingStore,
-  useMultiTabsSettingStore,
-  useSporadicSettingStore,
-} from '../store'
-
-export const useComprehensive = () => {
-  const menuSettingStore = useMenuSettingStore()
-  const headerSettingStore = useHeaderSettingStore()
-  const multipleTabStore = useMultiTabsSettingStore()
-  const sporadicSettingStore = useSporadicSettingStore()
-  const getLayoutStyles = computed(() => {
-    const getAsideWidth = () => {
-      if (menuSettingStore.isTopMenu || menuSettingStore.hidden) return 0
-      if (menuSettingStore.collapsed) return menuSettingStore.collapsedWidth
-      if (menuSettingStore.isMixSidebar) return menuSettingStore.mixSidebarWidth
-      return menuSettingStore.width
-    }
-
-    const getHeaderHeight = () => {
-      if (headerSettingStore.hidden) return 0
-      return headerSettingStore.height
-    }
-
-    const getTabBarHeight = () => {
-      if (multipleTabStore.hidden) return 0
-      return multipleTabStore.height
-    }
-
-    const getFooterHeight = () => {
-      if (sporadicSettingStore.hiddenFooter) return 0
-      return sporadicSettingStore.footerHeight
-    }
-
-    return {
-      '--aside-width': `${getAsideWidth()}px`,
-      '--header-height': `${getHeaderHeight()}px`,
-      '--tab-bar-height': `${getTabBarHeight()}px`,
-      '--footer-height': `${getFooterHeight()}px`,
-    }
-  })
-
-  const getShowSidebarLogo = computed(() => {
-    return menuSettingStore.isSidebar || menuSettingStore.isMixSidebar
-  })
-
-  const getShowHeaderLogo = computed(() => {
-    return menuSettingStore.isTopMenu || menuSettingStore.isMix
-  })
-
-  const getShowLogoTitle = computed(() => {
-    if (menuSettingStore.isSidebar) return !menuSettingStore.collapsed
-    if (menuSettingStore.isMixSidebar) return false
-    return true
-  })
-
-  return {
-    getLayoutStyles,
-    getShowSidebarLogo,
-    getShowHeaderLogo,
-    getShowLogoTitle,
-  }
-}
diff --git a/packages/grid-layouts/src/store/index.ts b/packages/grid-layouts/src/store/index.ts
deleted file mode 100644
index cba74339..00000000
--- a/packages/grid-layouts/src/store/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { useSporadicSettingStore } from './modules/sporadicSetting'
-export { useHeaderSettingStore } from './modules/headerSetting'
-export { useMenuSettingStore } from './modules/menuSetting'
-export { useTransitionSettingStore } from './modules/transitionSetting'
-export { useMultiTabsSettingStore } from './modules/multiTabsSetting'
-export {
-  useLayoutHeader,
-  useLayoutFooter,
-  useLayoutSidebar,
-  useLayoutTab,
-  useLayoutContent,
-} from './modules/layoutComposables'
diff --git a/packages/grid-layouts/src/store/modules/headerSetting.ts b/packages/grid-layouts/src/store/modules/headerSetting.ts
deleted file mode 100644
index adfa04e6..00000000
--- a/packages/grid-layouts/src/store/modules/headerSetting.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { defineStore } from 'pinia'
-import { HeaderSetting } from '@vben/types'
-import { ThemeEnum, HEADER_PRESET_BG_COLOR_LIST } from '@vben/constants'
-
-export const useHeaderSettingStore = defineStore({
-  id: 'LAYOUT_HEADER_SETTING',
-  // persist: true,
-  state: (): HeaderSetting => ({
-    // header bg color
-    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
-    // Fixed at the top
-    fixed: true,
-    // Whether to show top
-    show: true,
-    // Whether to show dom
-    hidden: false,
-    // theme
-    theme: ThemeEnum.LIGHT,
-    // Whether to enable the lock screen function
-    useLockPage: true,
-    // Whether to show the full screen button
-    showFullScreen: true,
-    // Whether to show the document button
-    showDoc: true,
-    // Whether to show the notification button
-    showNotice: true,
-    // Whether to display the menu search
-    showSearch: true,
-    showLocalePicker: true,
-    height: 48,
-  }),
-  getters: {
-    isDark: (state) => state.theme === ThemeEnum.DARK,
-  },
-  actions: {
-    setBgColor(value: string) {
-      this.bgColor = value
-    },
-    setFixed(value: boolean) {
-      this.fixed = value
-    },
-    setShow(value: boolean) {
-      this.show = value
-      this.setHidden(!value)
-    },
-    setHidden(value: boolean) {
-      this.hidden = value
-    },
-    setTheme(value: ThemeEnum) {
-      this.theme = value
-    },
-    setUseLockPage(value: boolean) {
-      this.useLockPage = value
-    },
-    setShowFullScreen(value: boolean) {
-      this.showFullScreen = value
-    },
-    setShowDoc(value: boolean) {
-      this.showDoc = value
-    },
-    setShowNotice(value: boolean) {
-      this.showNotice = value
-    },
-    setShowSearch(value: boolean) {
-      this.showSearch = value
-    },
-    setShowLocalePicker(value: boolean) {
-      this.showLocalePicker = value
-    },
-  },
-})
diff --git a/packages/grid-layouts/src/store/modules/layoutComposables.ts b/packages/grid-layouts/src/store/modules/layoutComposables.ts
deleted file mode 100644
index b9dfb3f3..00000000
--- a/packages/grid-layouts/src/store/modules/layoutComposables.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { defineStore } from 'pinia'
-import { useElementSize } from '@vben/utils'
-import { ref } from 'vue'
-
-export const useLayoutHeader = defineStore('LAYOUT_HEADER', () => {
-  const headerRef = ref<HTMLElement>()
-
-  const { height: headerHeight, width: headerWidth } = useElementSize(headerRef)
-
-  return {
-    headerRef,
-    headerHeight,
-    headerWidth,
-  }
-})
-
-export const useLayoutSidebar = defineStore('LAYOUT_SIDEBAR', () => {
-  const sidebarRef = ref<HTMLElement>()
-
-  const { height: sidebarHeight, width: sidebarWidth } =
-    useElementSize(sidebarRef)
-
-  return {
-    sidebarRef,
-    sidebarHeight,
-    sidebarWidth,
-  }
-})
-
-export const useLayoutTab = defineStore('LAYOUT_TAB', () => {
-  const tabRef = ref<HTMLElement>()
-
-  const { height: tabHeight, width: tabWidth } = useElementSize(tabRef)
-
-  return {
-    tabRef,
-    tabHeight,
-    tabWidth,
-  }
-})
-
-export const useLayoutContent = defineStore('LAYOUT_FOOTER', () => {
-  const contentRef = ref<HTMLElement>()
-
-  const { height: contentHeight, width: contentWidth } =
-    useElementSize(contentRef)
-
-  return {
-    contentRef,
-    contentHeight,
-    contentWidth,
-  }
-})
-
-export const useLayoutFooter = defineStore('LAYOUT_FOOTER', () => {
-  const footerRef = ref<HTMLElement>()
-
-  const { height: footerHeight, width: footerWidth } = useElementSize(footerRef)
-
-  return {
-    footerRef,
-    footerHeight,
-    footerWidth,
-  }
-})
diff --git a/packages/grid-layouts/src/store/modules/menuSetting.ts b/packages/grid-layouts/src/store/modules/menuSetting.ts
deleted file mode 100644
index 6d70f849..00000000
--- a/packages/grid-layouts/src/store/modules/menuSetting.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import { defineStore } from 'pinia'
-import { MenuSetting } from '@vben/types'
-import {
-  MenuModeEnum,
-  MenuTypeEnum,
-  MixSidebarTriggerEnum,
-  SIDE_BAR_BG_COLOR_LIST,
-  ThemeEnum,
-  TriggerEnum,
-} from '@vben/constants'
-
-export const useMenuSettingStore = defineStore({
-  id: 'LAYOUT_MENU_SETTING',
-  // persist: true,
-  state: (): MenuSetting => ({
-    // sidebar menu bg color
-    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
-    //  Whether to fix the left menu
-    fixed: true,
-    // Menu collapse
-    collapsed: false,
-    // Whether to display the menu name when folding the menu
-    collapsedShowTitle: false,
-    // Whether it can be dragged
-    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
-    canDrag: false,
-    // Whether to show no dom
-    show: true,
-    // Whether to show dom
-    hidden: false,
-    // Menu width
-    menuWidth: 210,
-    // Menu mode
-    mode: MenuModeEnum.INLINE,
-    // Menu type
-    type: MenuTypeEnum.SIDEBAR,
-    // Menu theme
-    theme: ThemeEnum.DARK,
-    // Split menu
-    split: false,
-    // Top menu layout
-    topMenuAlign: 'center',
-    // Fold trigger position
-    trigger: TriggerEnum.CENTER,
-    // Turn on accordion mode, only show a menu
-    accordion: true,
-    // Switch page to close menu
-    closeMixSidebarOnChange: false,
-    // Module opening method ‘click’ |'hover'
-    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
-    // Fixed expanded menu
-    mixSideFixed: false,
-    width: 210,
-    mixSidebarWidth: 80,
-    collapsedWidth: 48,
-  }),
-  getters: {
-    isSidebar: (state) => state.type === MenuTypeEnum.SIDEBAR,
-    isTopMenu: (state) => state.type === MenuTypeEnum.TOP_MENU,
-    isMixSidebar: (state) => state.type === MenuTypeEnum.MIX_SIDEBAR,
-    isMix: (state) => state.type === MenuTypeEnum.MIX,
-    isMixMode: (state) =>
-      state.mode === MenuModeEnum.INLINE && state.type === MenuTypeEnum.MIX,
-    showMenuLogo: (state) => state.type === MenuTypeEnum.SIDEBAR,
-    showTopMenu: (state) => {
-      return state.mode === MenuModeEnum.HORIZONTAL || state.split
-    },
-    showHeaderTrigger: (state) => {
-      if (state.type === MenuTypeEnum.TOP_MENU || !state.show || state.hidden)
-        return false
-      return state.trigger === TriggerEnum.HEADER
-    },
-    showFooterTrigger: (state) => state.trigger === TriggerEnum.FOOTER,
-    isHorizontal: (state) => state.mode === MenuModeEnum.HORIZONTAL,
-    // TODO
-    ShowSidebar: (state) => {
-      const fullContent = false
-      return (
-        state.split ||
-        (state.show && state.mode !== MenuModeEnum.HORIZONTAL && !fullContent)
-      )
-    },
-    // TODO
-    getRealWidth: (state) => {
-      return 0
-    },
-    // TODO
-    getMiniWidthNumber: (state) => {
-      return 0
-    },
-    // TODO
-    getCalcContentWidth: (state) => {
-      return 0
-    },
-  },
-  actions: {
-    setBgColor(value: string) {
-      this.bgColor = value
-    },
-    setFixed(value: boolean) {
-      this.fixed = value
-    },
-    setCollapsed(value: boolean) {
-      this.collapsed = value
-    },
-    setCollapsedShowTitle(value: boolean) {
-      this.collapsedShowTitle = value
-    },
-    setCanDrag(value: boolean) {
-      this.canDrag = value
-    },
-    setShow(value: boolean) {
-      this.show = value
-      this.setHidden(!value)
-    },
-    setHidden(value: boolean) {
-      this.hidden = value
-    },
-    setMenuWidth(value: number) {
-      this.menuWidth = value
-    },
-    setMode(value: MenuModeEnum) {
-      this.mode = value
-    },
-    setType(value: MenuTypeEnum) {
-      this.setHidden(value === MenuTypeEnum.TOP_MENU)
-      this.type = value
-    },
-    setTheme(value: ThemeEnum) {
-      this.theme = value
-    },
-    setSplit(value: boolean) {
-      this.split = value
-    },
-    setTopMenuAlign(value: 'start' | 'center' | 'end') {
-      this.topMenuAlign = value
-    },
-    setTrigger(value: TriggerEnum) {
-      this.trigger = value
-    },
-    setAccordion(value: boolean) {
-      this.accordion = value
-    },
-    setCloseMixSidebarOnChange(value: boolean) {
-      this.closeMixSidebarOnChange = value
-    },
-    setMixSideTrigger(value: MixSidebarTriggerEnum) {
-      this.mixSideTrigger = value
-    },
-    setMixSideFixed(value: boolean) {
-      this.mixSideFixed = value
-    },
-    toggleCollapsed() {
-      this.setCollapsed(!this.collapsed)
-    },
-  },
-})
diff --git a/packages/grid-layouts/src/store/modules/multiTabsSetting.ts b/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
deleted file mode 100644
index f5fd9254..00000000
--- a/packages/grid-layouts/src/store/modules/multiTabsSetting.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { defineStore } from 'pinia'
-import { MultiTabsSetting } from '@vben/types'
-
-export const useMultiTabsSettingStore = defineStore({
-  id: 'LAYOUT_MULTI_TABS_SETTING',
-  // persist: true,
-  state: (): MultiTabsSetting => ({
-    cache: false,
-    // Turn on
-    show: true, // Turn on
-    hidden: false,
-    // Is it possible to drag and drop sorting tabs
-    canDrag: true,
-    // Turn on quick actions
-    showQuick: true,
-    // Whether to show the refresh button
-    showRedo: true,
-    // Whether to show the collapse button
-    showFold: true,
-    height: 36,
-  }),
-  getters: {},
-  actions: {
-    setCache(value: boolean) {
-      this.cache = value
-    },
-    setShow(value: boolean) {
-      this.show = value
-      this.hidden = !value
-    },
-    setHidden(value: boolean) {
-      this.hidden = value
-    },
-    setCanDrag(value: boolean) {
-      this.canDrag = value
-    },
-    setShowQuick(value: boolean) {
-      this.showQuick = value
-    },
-    setShowRedo(value: boolean) {
-      this.showRedo = value
-    },
-    setShowFold(value: boolean) {
-      this.showFold = value
-    },
-  },
-})
diff --git a/packages/grid-layouts/src/store/modules/sporadicSetting.ts b/packages/grid-layouts/src/store/modules/sporadicSetting.ts
deleted file mode 100644
index fe86d795..00000000
--- a/packages/grid-layouts/src/store/modules/sporadicSetting.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { defineStore } from 'pinia'
-import { SporadicSetting } from '@vben/types'
-import {
-  SettingButtonPositionEnum,
-  PermissionModeEnum,
-  CacheTypeEnum,
-  SessionTimeoutProcessingEnum,
-  ContentLayoutEnum,
-} from '@vben/constants'
-
-export const useSporadicSettingStore = defineStore({
-  id: 'LAYOUT_SPORADIC_SETTING',
-  // persist: true,
-  state: (): SporadicSetting => ({
-    // Whether to show the configuration button
-    showSettingButton: true,
-    // Whether to show the theme switch button
-    showDarkModeToggle: true,
-    // `Settings` button position
-    settingButtonPosition: SettingButtonPositionEnum.AUTO,
-    // Whether to show the Setting Drawer
-    showSettingDrawer: false,
-    // Permission mode
-    permissionMode: PermissionModeEnum.ROUTE_MAPPING,
-    // Permission-related cache is stored in sessionStorage or localStorage
-    permissionCacheType: CacheTypeEnum.LOCAL,
-    // Session timeout processing
-    sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
-    // color
-    themeColor: '#0960bd',
-    // Website gray mode, open for possible mourning dates
-    grayMode: false,
-    // Color Weakness Mode
-    colorWeak: false,
-    // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
-    fullContent: false,
-    // content mode
-    contentMode: ContentLayoutEnum.FULL,
-    // Whether to display the logo
-    showLogo: true,
-    // Whether to show footer
-    showFooter: false,
-    hiddenFooter: true,
-    footerHeight: 60,
-    // Whether to open the top progress bar
-    openNProgress: false,
-    // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
-    openKeepAlive: true,
-    // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
-    lockTime: 0,
-    // Whether to show breadcrumbs
-    showBreadCrumb: true,
-    // Whether to show the breadcrumb icon
-    showBreadCrumbIcon: true,
-    // Whether to open back to top
-    useOpenBackTop: true,
-    //  Is it possible to embed iframe pages
-    canEmbedIFramePage: true,
-    // Whether to delete unclosed messages and notify when switching the interface
-    closeMessageOnSwitch: true,
-    // Whether to cancel the http request that has been sent but not responded when switching the interface.
-    // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
-    removeAllHttpPending: false,
-  }),
-  getters: {},
-  actions: {
-    setShowSettingButton(value: boolean) {
-      this.showSettingButton = value
-    },
-    setShowDarkModeToggle(value: boolean) {
-      this.showDarkModeToggle = value
-    },
-    setSettingButtonPosition(value: SettingButtonPositionEnum) {
-      this.settingButtonPosition = value
-    },
-    setShowSettingDrawer(value: boolean) {
-      this.showSettingDrawer = value
-    },
-    toggleSettingDrawerVisible() {
-      this.setShowSettingDrawer(!this.showSettingDrawer)
-    },
-    setPermissionMode(value: PermissionModeEnum) {
-      this.permissionMode = value
-    },
-    setPermissionCacheType(value: CacheTypeEnum) {
-      this.permissionCacheType = value
-    },
-    setSessionTimeoutProcessing(value: SessionTimeoutProcessingEnum) {
-      this.sessionTimeoutProcessing = value
-    },
-    setThemeColor(value: string) {
-      this.themeColor = value
-    },
-    setGrayMode(value: boolean) {
-      this.grayMode = value
-    },
-    setColorWeak(value: boolean) {
-      this.colorWeak = value
-    },
-    setFullContent(value: boolean) {
-      this.fullContent = value
-    },
-    setContentMode(value: ContentLayoutEnum) {
-      this.contentMode = value
-    },
-    setShowLogo(value: boolean) {
-      this.showLogo = value
-    },
-    setShowFooter(value: boolean) {
-      this.showFooter = value
-      this.setHiddenFooter(!value)
-    },
-    setHiddenFooter(value: boolean) {
-      this.hiddenFooter = value
-    },
-    setOpenNProgress(value: boolean) {
-      this.openNProgress = value
-    },
-    setOpenKeepAlive(value: boolean) {
-      this.openKeepAlive = value
-    },
-    setLockTime(value: number) {
-      this.lockTime = value
-    },
-    setShowBreadCrumb(value: boolean) {
-      this.showBreadCrumb = value
-    },
-    setShowBreadCrumbIcon(value: boolean) {
-      this.showBreadCrumbIcon = value
-    },
-    setUseOpenBackTop(value: boolean) {
-      this.useOpenBackTop = value
-    },
-    setCanEmbedIFramePage(value: boolean) {
-      this.canEmbedIFramePage = value
-    },
-    setCloseMessageOnSwitch(value: boolean) {
-      this.closeMessageOnSwitch = value
-    },
-    setRemoveAllHttpPending(value: boolean) {
-      this.removeAllHttpPending = value
-    },
-  },
-})
diff --git a/packages/grid-layouts/src/store/modules/transitionSetting.ts b/packages/grid-layouts/src/store/modules/transitionSetting.ts
deleted file mode 100644
index 1d0eeb06..00000000
--- a/packages/grid-layouts/src/store/modules/transitionSetting.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-import { TransitionSetting } from '@vben/types'
-import { RouterTransitionEnum } from '@vben/constants'
-
-export const useTransitionSettingStore = defineStore({
-  id: 'LAYOUT_TRANSITION_SETTING',
-  // persist: true,
-  state: (): TransitionSetting => ({
-    //  Whether to open the page switching animation
-    // The disabled state will also disable pageLoading
-    enable: true,
-
-    // Route basic switching animation
-    basicTransition: RouterTransitionEnum.FADE_SIDE,
-
-    // Whether to open page switching loading
-    // Only open when enable=true
-    openPageLoading: true,
-
-    // Whether to open the top progress bar
-    openNProgress: false,
-  }),
-  getters: {},
-  actions: {
-    setEnable(value: boolean) {
-      this.enable = value
-    },
-    setBasicTransition(value: RouterTransitionEnum) {
-      this.basicTransition = value
-    },
-    setOpenPageLoading(value: boolean) {
-      this.openPageLoading = value
-    },
-    setOpenNProgress(value: boolean) {
-      this.openNProgress = value
-    },
-  },
-})

From 1a54896b81069014bc9040477fbb3e4a297de187 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 9 Feb 2023 14:41:36 +0800
Subject: [PATCH 17/22] =?UTF-8?q?feat:=20grid-layout=20=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grid-layouts/src/components/Layout.vue    | 44 +++----------
 packages/grid-layouts/src/components/Main.vue |  9 +--
 .../src/components/logo/index.vue             |  4 +-
 .../src/components/setting-drawer/index.vue   |  4 +-
 .../src/components/tab-bar/FoldButton.vue     | 24 +++++--
 .../src/components/widgets/FixedSetting.vue   |  4 +-
 .../src/components/widgets/FullScreen.vue     | 34 ++++++++--
 .../src/components/widgets/HeaderTrigger.vue  |  4 +-
 .../src/components/widgets/Setting.vue        |  4 +-
 .../components/widgets/SiderCenterTrigger.vue |  4 +-
 .../components/widgets/SiderFooterTrigger.vue |  4 +-
 packages/hooks/src/config/useAppConfig.ts     | 31 +++++++---
 .../src/web/useGridLayoutContainerElStyle.ts  | 62 +++++++++++++++++++
 13 files changed, 157 insertions(+), 75 deletions(-)
 create mode 100644 packages/hooks/src/web/useGridLayoutContainerElStyle.ts

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 41b33cca..877a3a2f 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -12,52 +12,24 @@ import {
   useLayoutContent,
 } from '@vben/stores'
 import { useAppConfig } from '@vben/hooks'
-import { computed, unref } from 'vue'
+import { ref } from 'vue'
+import { MaybeElementRef } from '@vben/utils'
+import { useGridLayoutContainerElStyle } from '@vben/hooks/src/web/useGridLayoutContainerElStyle'
 
 const { headerRef } = storeToRefs(useLayoutHeader() as StoreGeneric)
 const { sidebarRef } = storeToRefs(useLayoutSidebar() as StoreGeneric)
 const { tabRef } = storeToRefs(useLayoutTab() as StoreGeneric)
 const { contentRef } = storeToRefs(useLayoutContent() as StoreGeneric)
+const containerRef = ref<MaybeElementRef>(null)
 
-const { navBarMode, isTopMenu, isMixSidebar, sidebar, header, footer, tabTar } =
-  useAppConfig()
-
-const getLayoutStyles = computed(() => {
-  const getAsideWidth = () => {
-    if (unref(isTopMenu) || !unref(sidebar).visible) return 0
-    if (unref(sidebar).collapsed) return unref(sidebar).collapsedWidth
-    if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
-    return unref(sidebar).width
-  }
-
-  const getHeaderHeight = () => {
-    if (!unref(header).visible) return 0
-    return unref(header).height
-  }
-
-  const getTabBarHeight = () => {
-    if (!unref(tabTar).visible) return 0
-    return unref(tabTar).height
-  }
-
-  const getFooterHeight = () => {
-    if (!unref(footer).visible) return 0
-    return unref(footer).height
-  }
-
-  return {
-    '--aside-width': `${getAsideWidth()}px`,
-    '--header-height': `${getHeaderHeight()}px`,
-    '--tab-bar-height': `${getTabBarHeight()}px`,
-    '--footer-height': `${getFooterHeight()}px`,
-  }
-})
+const { navBarMode } = useAppConfig()
+useGridLayoutContainerElStyle(containerRef)
 </script>
 <template>
   <section
-    class="grid-layout-container h-full w-full"
+    ref="containerRef"
+    class="grid-layout-container h-full w-full filter-invert-80"
     :class="[`${navBarMode}`]"
-    :style="getLayoutStyles"
   >
     <LayoutHeader ref="headerRef" />
     <LayoutSidebar ref="sidebarRef" />
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index ff350687..38a4692f 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -6,21 +6,14 @@ import { StoreGeneric, storeToRefs } from 'pinia'
 const { headerWidth, headerHeight } = storeToRefs(
   useLayoutHeader() as StoreGeneric,
 )
-const { setAppConfig, sidebar } = useAppConfig()
+const { sidebar } = useAppConfig()
 
 </script>
 <template>
   <main class="vben-grid-layout-main">
-    main - {{ type }}
-
     <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
     ___________________________________________________________________________
     <div>useAppConfig : {{ sidebar }}</div>
-    <div
-      @click.stop="setAppConfig({ sidebar: { width: 365423463136132121212 } })"
-    >
-      sidebar change
-    </div>
     <!--    <RouterView />-->
   </main>
 </template>
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
index 949ca1d0..93436a3c 100644
--- a/packages/grid-layouts/src/components/logo/index.vue
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -43,7 +43,9 @@ const title = 'Vben Admin'
       class="p-x-8px truncate grid content-center font-700 text-16px"
       :class="[showLogoTitle ? 'visible' : 'invisible']"
     >
-      {{ title }}
+      <span class="block truncate">
+        {{ title }}
+      </span>
     </div>
   </div>
 </template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/index.vue b/packages/grid-layouts/src/components/setting-drawer/index.vue
index 91edbe76..3acf86ce 100644
--- a/packages/grid-layouts/src/components/setting-drawer/index.vue
+++ b/packages/grid-layouts/src/components/setting-drawer/index.vue
@@ -21,7 +21,7 @@ const { baseHandler } = useAppConfig()
 const { t } = useI18n()
 const {
   openSettingDrawer,
-  toggleSettingDrawerVisible,
+  toggleOpenSettingDrawer,
   isHorizontal,
   navBarMode,
   themeColor,
@@ -33,7 +33,7 @@ const {
 <template>
   <VbenDrawer
     :show="openSettingDrawer"
-    @update:show="toggleSettingDrawerVisible"
+    @update:show="toggleOpenSettingDrawer"
     :width="330"
   >
     <VbenDrawerContent closable>
diff --git a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
index 9d172e58..8af927ce 100644
--- a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
+++ b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
@@ -1,14 +1,28 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import SuffixItemWrapper from './SuffixItemWrapper.vue'
+import { useAppConfig } from '@vben/hooks'
+import { triggerWindowResize } from '@vben/utils'
 
-const getIcon = computed(() =>
-  true ? 'codicon:screen-full' : 'codicon:screen-normal',
+const { sidebar, header, setAppConfig } = useAppConfig()
+const getIsUnFold = computed(
+  () => !unref(sidebar).visible && !unref(header).visible,
 )
+
+function handleFold() {
+  const isUnFold = unref(getIsUnFold)
+  setAppConfig({
+    sidebar: { visible: isUnFold, show: isUnFold },
+    header: { visible: isUnFold, show: isUnFold },
+  })
+  triggerWindowResize()
+}
 </script>
 
 <template>
-  <SuffixItemWrapper>
-    <VbenIconify :icon="getIcon" />
+  <SuffixItemWrapper @click.stop="handleFold">
+    <VbenIconify
+      :icon="getIsUnFold ? 'codicon:screen-normal' : 'codicon:screen-full'"
+    />
   </SuffixItemWrapper>
 </template>
diff --git a/packages/grid-layouts/src/components/widgets/FixedSetting.vue b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
index 6563ae5c..5229a269 100644
--- a/packages/grid-layouts/src/components/widgets/FixedSetting.vue
+++ b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
@@ -2,7 +2,7 @@
 import { computed, unref } from 'vue'
 import { SettingButtonPositionEnum } from '@vben/constants'
 import { useAppConfig } from '@vben/hooks'
-const { toggleSettingDrawerVisible, header, settingButtonPosition, content } =
+const { toggleOpenSettingDrawer, header, settingButtonPosition, content } =
   useAppConfig()
 
 const getShowSettingFixedButton = computed(() => {
@@ -22,7 +22,7 @@ const getShowSettingFixedButton = computed(() => {
 <template>
   <div
     v-if="getShowSettingFixedButton"
-    @click.stop="toggleSettingDrawerVisible"
+    @click.stop="toggleOpenSettingDrawer"
     class="p-6px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[rgba(9,96,189,.9)] cursor-pointer"
   >
     <VbenIconify icon="fluent:settings-48-regular" />
diff --git a/packages/grid-layouts/src/components/widgets/FullScreen.vue b/packages/grid-layouts/src/components/widgets/FullScreen.vue
index e3a4004c..c3837b40 100644
--- a/packages/grid-layouts/src/components/widgets/FullScreen.vue
+++ b/packages/grid-layouts/src/components/widgets/FullScreen.vue
@@ -1,9 +1,35 @@
 <script lang="ts" setup>
 import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import { useFullscreen } from '@vben/utils'
+import { computed, unref } from 'vue'
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+
+/**
+ * F11 event cannot be listened to
+ */
+const { isFullscreen, toggle } = useFullscreen()
+
+const getTitle = computed(() => {
+  return unref(isFullscreen)
+    ? t('layout.header.tooltipExitFull')
+    : t('layout.header.tooltipEntryFull')
+})
 </script>
 <template>
-  <TopButtonWrapper>
-    <VbenIconify icon="mingcute:fullscreen-line" />
-    <!--<VbenIconify icon="mingcute:fullscreen-exit-line" />-->
-  </TopButtonWrapper>
+  <VbenPopover :title="getTitle" placement="bottom" :duration="500">
+    <template #trigger>
+      <TopButtonWrapper @click.stop="toggle">
+        <VbenIconify
+          :icon="
+            isFullscreen
+              ? 'mingcute:fullscreen-exit-line'
+              : 'mingcute:fullscreen-line'
+          "
+        />
+      </TopButtonWrapper>
+    </template>
+    <span>{{ getTitle }}</span>
+  </VbenPopover>
 </template>
diff --git a/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue b/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
index 402d4b1a..0d3adef2 100644
--- a/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
+++ b/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
@@ -2,10 +2,10 @@
 import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
 import { useAppConfig } from '@vben/hooks'
 
-const { sidebar, toggleCollapsed } = useAppConfig()
+const { sidebar, toggleCollapse } = useAppConfig()
 </script>
 <template>
-  <TopButtonWrapper @click.stop="toggleCollapsed">
+  <TopButtonWrapper @click.stop="toggleCollapse">
     <VbenIconify
       color="var(--trigger-icon-color)"
       size="22"
diff --git a/packages/grid-layouts/src/components/widgets/Setting.vue b/packages/grid-layouts/src/components/widgets/Setting.vue
index 1d151979..6cb4f996 100644
--- a/packages/grid-layouts/src/components/widgets/Setting.vue
+++ b/packages/grid-layouts/src/components/widgets/Setting.vue
@@ -4,7 +4,7 @@ import { computed, unref } from 'vue'
 import { SettingButtonPositionEnum } from '@vben/constants'
 import { useAppConfig } from '@vben/hooks'
 
-const { toggleSettingDrawerVisible, header, settingButtonPosition } =
+const { toggleOpenSettingDrawer, header, settingButtonPosition } =
   useAppConfig()
 
 const getShowSetting = computed(() => {
@@ -20,7 +20,7 @@ const getShowSetting = computed(() => {
 <template>
   <TopButtonWrapper
     v-if="getShowSetting"
-    @click.stop="toggleSettingDrawerVisible"
+    @click.stop="toggleOpenSettingDrawer"
   >
     <VbenIconify icon="fluent:settings-48-regular" />
   </TopButtonWrapper>
diff --git a/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
index 957303e2..082ce35d 100644
--- a/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
+++ b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useAppConfig } from '@vben/hooks'
 
-const { sidebar, toggleCollapsed } = useAppConfig()
+const { sidebar, toggleCollapse } = useAppConfig()
 </script>
 <template>
   <div
     class="h-24px w-24px cursor-pointer grid-center absolute top-1/2 right-0 z-1 rounded-1/2 translate-1/2 border border-[var(--trigger-border-color)] bg-[var(--trigger-color)] shadow shadow-color-[rgb(0 0 0 / 6%)]"
-    @click.stop="toggleCollapsed"
+    @click.stop="toggleCollapse"
   >
     <VbenIconify
       :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
diff --git a/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
index c8063c57..a13ddb97 100644
--- a/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
+++ b/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useAppConfig } from '@vben/hooks'
 
-const { sidebar, toggleCollapsed } = useAppConfig()
+const { sidebar, toggleCollapse } = useAppConfig()
 </script>
 <template>
   <div
     class="h-36px w-full absolute bottom-0 cursor-pointer grid-center bg-[#3b3b3b]"
-    @click.stop="toggleCollapsed"
+    @click.stop="toggleCollapse"
   >
     <VbenIconify
       :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
diff --git a/packages/hooks/src/config/useAppConfig.ts b/packages/hooks/src/config/useAppConfig.ts
index 924696c1..d787a0d0 100644
--- a/packages/hooks/src/config/useAppConfig.ts
+++ b/packages/hooks/src/config/useAppConfig.ts
@@ -5,7 +5,7 @@ import {
 } from '@vben/stores'
 import { DefineAppConfigOptions } from '@vben/types'
 import { HandlerSettingEnum, ThemeEnum } from '@vben/constants'
-import { _merge } from '@vben/utils'
+import { _merge, toggleClass } from '@vben/utils'
 import { reactive, unref } from 'vue'
 import { useClipboard, _omit } from '@vben/utils'
 
@@ -22,18 +22,18 @@ export const useAppConfig = () => {
   const appConfigOptions = storeToRefs(
     useAppConfigStore as StoreGeneric,
   ) as unknown as DefineAppConfigOptions & DefineAppConfigStoreGetters
-  const { openSettingDrawer, sidebar } = appConfigOptions
+  const { openSettingDrawer, sidebar, grayMode, colorWeak } = appConfigOptions
   const setAppConfig = (configs: DeepPartial<DefineAppConfigOptions>) => {
     useAppConfigStore.$patch((state) => {
       _merge(state, configs)
     })
   }
 
-  function toggleSettingDrawerVisible() {
+  function toggleOpenSettingDrawer() {
     useAppConfigStore.setOpenSettingDrawer(!unref(openSettingDrawer))
   }
 
-  function toggleCollapsed() {
+  function toggleCollapse() {
     useAppConfigStore.setSidebar({ collapsed: !unref(sidebar).collapsed })
   }
 
@@ -41,6 +41,14 @@ export const useAppConfig = () => {
     setAppConfig(handlerResults(event, value, appConfigOptions))
   }
 
+  function toggleGrayMode(isGrayMode = unref(grayMode)) {
+    toggleClass(isGrayMode, 'gray-mode', document.body)
+  }
+
+  function toggleColorWeak(isColorWeak = colorWeak) {
+    toggleClass(isColorWeak, 'color-weak', document.body)
+  }
+
   async function copyConfigs() {
     try {
       const { copy, isSupported } = useClipboard()
@@ -65,12 +73,14 @@ export const useAppConfig = () => {
   return {
     ...appConfigOptions,
     setAppConfig,
-    toggleSettingDrawerVisible,
+    toggleOpenSettingDrawer,
     baseHandler,
     copyConfigs,
     clearAndRedo,
     resetAllConfig,
-    toggleCollapsed,
+    toggleCollapse,
+    toggleGrayMode,
+    toggleColorWeak,
   }
 }
 
@@ -168,7 +178,12 @@ function handlerResults(
       return { lockTime: value }
 
     case HandlerSettingEnum.FULL_CONTENT:
-      return { content: { fullScreen: value } }
+      return {
+        content: { fullScreen: value },
+        sidebar: { visible: !value, show: !value },
+        header: { visible: !value, show: !value },
+        tabTar: { visible: !value, show: !value },
+      }
 
     case HandlerSettingEnum.CONTENT_MODE:
       return { content: { mode: value } }
@@ -180,14 +195,12 @@ function handlerResults(
       return { header: { showBreadCrumbIcon: value } }
 
     case HandlerSettingEnum.GRAY_MODE:
-      // updateGrayMode(value)
       return { grayMode: value }
 
     case HandlerSettingEnum.SHOW_FOOTER:
       return { footer: { show: value, visible: value } }
 
     case HandlerSettingEnum.COLOR_WEAK:
-      // updateColorWeak(value)
       return { colorWeak: value }
 
     case HandlerSettingEnum.SHOW_LOGO:
diff --git a/packages/hooks/src/web/useGridLayoutContainerElStyle.ts b/packages/hooks/src/web/useGridLayoutContainerElStyle.ts
new file mode 100644
index 00000000..ecc23296
--- /dev/null
+++ b/packages/hooks/src/web/useGridLayoutContainerElStyle.ts
@@ -0,0 +1,62 @@
+import { useCssVar, MaybeElementRef } from '@vben/utils'
+import { useAppConfig } from '../config'
+import { unref, watchEffect } from 'vue'
+
+export const useGridLayoutContainerElStyle = (el: MaybeElementRef | null) => {
+  const {
+    isTopMenu,
+    isMixSidebar,
+    sidebar,
+    header,
+    footer,
+    tabTar,
+    grayMode,
+    colorWeak,
+    toggleGrayMode,
+    toggleColorWeak,
+  } = useAppConfig()
+  const asideWidth = useCssVar('--aside-width', el, {
+    initialValue: `${unref(sidebar).width}px`,
+  })
+  const headerHeight = useCssVar('--header-height', el, {
+    initialValue: `${unref(header).height}px`,
+  })
+  const tabBarHeight = useCssVar('--tab-bar-height', el, {
+    initialValue: `${unref(tabTar).height}px`,
+  })
+  const footerHeight = useCssVar('--footer-height', el, {
+    initialValue: `${unref(footer).height}px`,
+  })
+
+  watchEffect(() => {
+    const getAsideWidth = () => {
+      if (unref(isTopMenu) || !unref(sidebar).visible) return 0
+      if (unref(sidebar).collapsed) return unref(sidebar).collapsedWidth
+      if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
+      return unref(sidebar).width
+    }
+
+    const getHeaderHeight = () => {
+      if (!unref(header).visible) return 0
+      return unref(header).height
+    }
+
+    const getTabBarHeight = () => {
+      if (!unref(tabTar).visible) return 0
+      return unref(tabTar).height
+    }
+
+    const getFooterHeight = () => {
+      if (!unref(footer).visible) return 0
+      return unref(footer).height
+    }
+    asideWidth.value = `${getAsideWidth()}px`
+    headerHeight.value = `${getHeaderHeight()}px`
+    tabBarHeight.value = `${getTabBarHeight()}px`
+    footerHeight.value = `${getFooterHeight()}px`
+    toggleGrayMode(unref(grayMode))
+    toggleColorWeak(unref(colorWeak))
+  })
+
+  return {}
+}

From 73439d46de7b4b03be51d94a53b90292dcdf6bcd Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 9 Feb 2023 17:59:53 +0800
Subject: [PATCH 18/22] wip: grid-layout theme

---
 .../grid-layouts/src/components/Layout.vue    |  5 +++--
 packages/hooks/src/web/index.ts               |  2 ++
 packages/hooks/src/web/useTheme.ts            | 20 +++++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 packages/hooks/src/web/useTheme.ts

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 877a3a2f..37194082 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -11,10 +11,9 @@ import {
   useLayoutTab,
   useLayoutContent,
 } from '@vben/stores'
-import { useAppConfig } from '@vben/hooks'
+import {useAppConfig, useGridLayoutContainerElStyle, useTheme} from '@vben/hooks'
 import { ref } from 'vue'
 import { MaybeElementRef } from '@vben/utils'
-import { useGridLayoutContainerElStyle } from '@vben/hooks/src/web/useGridLayoutContainerElStyle'
 
 const { headerRef } = storeToRefs(useLayoutHeader() as StoreGeneric)
 const { sidebarRef } = storeToRefs(useLayoutSidebar() as StoreGeneric)
@@ -24,6 +23,8 @@ const containerRef = ref<MaybeElementRef>(null)
 
 const { navBarMode } = useAppConfig()
 useGridLayoutContainerElStyle(containerRef)
+const {} = useTheme(true)
+
 </script>
 <template>
   <section
diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts
index 8b82d36f..ae23440b 100644
--- a/packages/hooks/src/web/index.ts
+++ b/packages/hooks/src/web/index.ts
@@ -1 +1,3 @@
 export * from './useCopyToClipboard'
+export * from './useGridLayoutContainerElStyle'
+export * from './useTheme'
diff --git a/packages/hooks/src/web/useTheme.ts b/packages/hooks/src/web/useTheme.ts
new file mode 100644
index 00000000..b3e50dff
--- /dev/null
+++ b/packages/hooks/src/web/useTheme.ts
@@ -0,0 +1,20 @@
+import { useAppConfig } from '../config'
+import { ThemeEnum } from '@vben/constants'
+import { useEventListener } from '@vben/utils'
+
+export const useTheme = (listen = false) => {
+  const { setAppConfig } = useAppConfig()
+  if (listen) {
+    // 监听系统主题
+    useEventListener(
+      window.matchMedia('(prefers-color-scheme: dark)'),
+      'change',
+      (e: Event) => {
+        // @ts-ignore
+        setAppConfig({ theme: e.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT })
+      },
+    )
+  }
+
+  return {}
+}

From d1d01ecac409870f8c4a22e3494e77641de0a98f Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 9 Feb 2023 21:02:54 +0800
Subject: [PATCH 19/22] pref: Remove the command loading

---
 scripts/src/base.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/scripts/src/base.ts b/scripts/src/base.ts
index eb2daa65..aea71ec7 100644
--- a/scripts/src/base.ts
+++ b/scripts/src/base.ts
@@ -7,15 +7,15 @@ import {
 } from './helper'
 import { isArray, isString } from '@vben/utils'
 import { DEFAULT_SELECT_TYPE } from './constant'
-import ora from 'ora'
-const spinner = ora({
-  text: 'Loading...',
-  color: 'yellow',
-})
+// import ora from 'ora'
+// const spinner = ora({
+//   text: 'Loading...',
+//   color: 'yellow',
+// })
 const prompts = require('prompts')
 
 async function runScript(argv: string[], script: string) {
-  spinner.stop()
+  // spinner.stop()
   execa('pnpm', ['-w', 'run', `turbo:${script}`].concat(argv), {
     stdio: 'inherit',
     preferLocal: true,
@@ -72,7 +72,7 @@ async function baseScript(command: string, isFilterWorkspace: boolean) {
 }
 
 export function run(command: string, isFilterWorkspace = false) {
-  spinner.start()
+  // spinner.start()
   baseScript(command, isFilterWorkspace).catch((err) => {
     error(err)
     process.exit(1)

From f5f941c295aebd31c09e387d44412cbc58592c91 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Thu, 9 Feb 2023 22:42:45 +0800
Subject: [PATCH 20/22] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Egrid-admin=20ap?=
 =?UTF-8?q?p=E5=81=9A=E5=8C=BA=E5=88=86,=20=E9=80=82=E9=85=8Dgrid-layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/package.json                       |   1 -
 apps/admin/src/layout/index.vue               |   3 +-
 apps/grid-admin/.env                          |   5 +
 apps/grid-admin/.env.development              |  21 +
 apps/grid-admin/.env.production               |  28 ++
 apps/grid-admin/index.html                    | 146 +++++++
 apps/grid-admin/init-components.ts            | 194 +++++++++
 apps/grid-admin/mock/_mock-server.ts          |  16 +
 apps/grid-admin/mock/auth.ts                  | 121 ++++++
 apps/grid-admin/mock/demo/form.ts             | 271 ++++++++++++
 apps/grid-admin/mock/demo/table.ts            |  52 +++
 apps/grid-admin/mock/menu.ts                  | 269 ++++++++++++
 apps/grid-admin/package.json                  |  64 +++
 apps/grid-admin/postcss.config.js             |   1 +
 apps/grid-admin/public/favicon.ico            | Bin 0 -> 894 bytes
 apps/grid-admin/public/logo.png               | Bin 0 -> 4042 bytes
 apps/grid-admin/src/apis/auth.ts              |  57 +++
 apps/grid-admin/src/apis/menu.ts              |  29 ++
 apps/grid-admin/src/apis/sys/index.ts         |   2 +
 apps/grid-admin/src/apis/sys/menu.ts          |  29 ++
 apps/grid-admin/src/apis/sys/user.ts          |  84 ++++
 .../src/apis/system/model/useModel.ts         |  38 ++
 apps/grid-admin/src/app.vue                   |  59 +++
 .../src/assets/icons/download-count.svg       |   1 +
 .../src/assets/icons/dynamic-avatar-1.svg     |   1 +
 .../src/assets/icons/dynamic-avatar-2.svg     |   1 +
 .../src/assets/icons/dynamic-avatar-3.svg     |   1 +
 .../src/assets/icons/dynamic-avatar-4.svg     |   1 +
 .../src/assets/icons/dynamic-avatar-5.svg     |   1 +
 .../src/assets/icons/dynamic-avatar-6.svg     |   1 +
 apps/grid-admin/src/assets/icons/moon.svg     |  16 +
 apps/grid-admin/src/assets/icons/sun.svg      |  42 ++
 .../src/assets/icons/total-sales.svg          |   1 +
 .../src/assets/icons/transaction.svg          |   1 +
 .../src/assets/icons/visit-count.svg          |   1 +
 apps/grid-admin/src/assets/images/header.jpg  | Bin 0 -> 16880 bytes
 apps/grid-admin/src/assets/images/logo.png    | Bin 0 -> 28304 bytes
 .../src/assets/svg/illustration.svg           |   1 +
 .../src/assets/svg/login-bg-dark.svg          |  19 +
 apps/grid-admin/src/assets/svg/login-bg.svg   |  17 +
 .../src/assets/svg/login-box-bg.svg           |   1 +
 apps/grid-admin/src/assets/svg/net-error.svg  |   1 +
 apps/grid-admin/src/assets/svg/no-data.svg    |   1 +
 apps/grid-admin/src/config.ts                 |  26 ++
 .../src/hooks/event/use-breakpoint.ts         |  91 ++++
 .../src/hooks/event/use-event-listener.ts     |  61 +++
 .../src/hooks/event/use-scroll-to.ts          |  65 +++
 .../src/hooks/setting/useHeaderSetting.ts     | 115 ++++++
 .../src/hooks/setting/useMenuSetting.ts       | 201 +++++++++
 .../hooks/setting/useMultipleTabSetting.ts    |  28 ++
 .../src/hooks/setting/useRootSetting.ts       | 112 +++++
 .../src/hooks/setting/useTransitionSetting.ts |  31 ++
 apps/grid-admin/src/hooks/useRootSetting.ts   | 109 +++++
 apps/grid-admin/src/hooks/useTabs.ts          | 102 +++++
 .../src/hooks/web/use-app-inject.ts           |  10 +
 .../grid-admin/src/hooks/web/useAppContext.ts |  17 +
 apps/grid-admin/src/hooks/web/useDesign.ts    |  21 +
 .../src/hooks/web/useFullContent.ts           |  28 ++
 .../grid-admin/src/hooks/web/useLockScreen.ts |  88 ++++
 apps/grid-admin/src/init-application.ts       | 134 ++++++
 .../src/layout/components/app/AppProvider.tsx |  91 ++++
 .../grid-admin/src/layout/components/logo.vue |  64 +++
 .../src/layout/components/useLockPage.ts      |  66 +++
 apps/grid-admin/src/layout/feature/index.vue  |   9 +
 apps/grid-admin/src/layout/index.vue          |  13 +
 .../grid-admin/src/logics/mitt/routeChange.ts |  30 ++
 apps/grid-admin/src/main.ts                   |  36 ++
 .../src/pages/dashboard/analysis/index.vue    |   6 +
 .../src/pages/dashboard/workbench/index.vue   |   1 +
 apps/grid-admin/src/pages/demo/Card.vue       |   6 +
 apps/grid-admin/src/pages/demo/Draggable.vue  |   6 +
 apps/grid-admin/src/pages/demo/Form.vue       |   6 +
 apps/grid-admin/src/pages/demo/Table.vue      |   6 +
 .../src/pages/demo/editor/monaco-editor.vue   |  18 +
 apps/grid-admin/src/pages/demo/page/index.vue |   4 +
 .../src/pages/demo/table/BasicTable.vue       |   6 +
 .../src/pages/sys/exception/index.vue         | 167 ++++++++
 .../src/pages/sys/iframe/FrameBlank.vue       |   3 +
 apps/grid-admin/src/pages/sys/lock/index.vue  |  13 +
 .../src/pages/sys/lock/lock-page.vue          | 221 ++++++++++
 apps/grid-admin/src/pages/sys/lock/use-now.ts |  60 +++
 .../pages/sys/login/forget-password-form.vue  |  75 ++++
 .../src/pages/sys/login/login-form-title.vue  |  27 ++
 .../src/pages/sys/login/login-form.vue        | 162 ++++++++
 apps/grid-admin/src/pages/sys/login/login.vue | 136 ++++++
 .../src/pages/sys/login/mobile-form.vue       |  77 ++++
 .../src/pages/sys/login/qrcode-form.vue       |  35 ++
 .../src/pages/sys/login/register-form.vue     | 123 ++++++
 .../src/pages/sys/login/use-login.ts          | 129 ++++++
 apps/grid-admin/src/router/guard.ts           | 240 +++++++++++
 apps/grid-admin/src/router/helper/index.ts    |   2 +
 apps/grid-admin/src/router/helper/menu.ts     | 105 +++++
 apps/grid-admin/src/router/helper/route.ts    | 182 ++++++++
 apps/grid-admin/src/router/index.ts           |  37 ++
 apps/grid-admin/src/router/menus/index.ts     | 106 +++++
 apps/grid-admin/src/router/routes/basic.ts    |  95 +++++
 apps/grid-admin/src/router/routes/index.ts    |  30 ++
 .../src/router/routes/modules/dashboard.ts    |  34 ++
 .../src/router/routes/modules/demo/demo.ts    |  57 +++
 .../src/router/routes/modules/demo/editor.ts  |  24 ++
 .../src/router/routes/modules/demo/page.ts    |  13 +
 apps/grid-admin/src/setting/design.ts         |  23 ++
 apps/grid-admin/src/setting/index.ts          |   2 +
 apps/grid-admin/src/setting/project.ts        | 185 +++++++++
 apps/grid-admin/src/store/auth.ts             | 210 ++++++++++
 apps/grid-admin/src/store/config.ts           |  87 ++++
 apps/grid-admin/src/store/lock.ts             |  55 +++
 apps/grid-admin/src/store/modules/app.ts      |  45 ++
 apps/grid-admin/src/store/multipleTab.ts      | 387 ++++++++++++++++++
 apps/grid-admin/src/store/test.ts             |   9 +
 apps/grid-admin/src/store/user.ts             | 166 ++++++++
 apps/grid-admin/tsconfig.json                 |  25 ++
 apps/grid-admin/vite.config.ts                |   7 +
 113 files changed, 6556 insertions(+), 3 deletions(-)
 create mode 100644 apps/grid-admin/.env
 create mode 100644 apps/grid-admin/.env.development
 create mode 100644 apps/grid-admin/.env.production
 create mode 100644 apps/grid-admin/index.html
 create mode 100644 apps/grid-admin/init-components.ts
 create mode 100644 apps/grid-admin/mock/_mock-server.ts
 create mode 100644 apps/grid-admin/mock/auth.ts
 create mode 100644 apps/grid-admin/mock/demo/form.ts
 create mode 100644 apps/grid-admin/mock/demo/table.ts
 create mode 100644 apps/grid-admin/mock/menu.ts
 create mode 100644 apps/grid-admin/package.json
 create mode 100644 apps/grid-admin/postcss.config.js
 create mode 100644 apps/grid-admin/public/favicon.ico
 create mode 100644 apps/grid-admin/public/logo.png
 create mode 100644 apps/grid-admin/src/apis/auth.ts
 create mode 100644 apps/grid-admin/src/apis/menu.ts
 create mode 100644 apps/grid-admin/src/apis/sys/index.ts
 create mode 100644 apps/grid-admin/src/apis/sys/menu.ts
 create mode 100644 apps/grid-admin/src/apis/sys/user.ts
 create mode 100644 apps/grid-admin/src/apis/system/model/useModel.ts
 create mode 100644 apps/grid-admin/src/app.vue
 create mode 100644 apps/grid-admin/src/assets/icons/download-count.svg
 create mode 100644 apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg
 create mode 100644 apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg
 create mode 100644 apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg
 create mode 100644 apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg
 create mode 100644 apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg
 create mode 100644 apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg
 create mode 100644 apps/grid-admin/src/assets/icons/moon.svg
 create mode 100644 apps/grid-admin/src/assets/icons/sun.svg
 create mode 100644 apps/grid-admin/src/assets/icons/total-sales.svg
 create mode 100644 apps/grid-admin/src/assets/icons/transaction.svg
 create mode 100644 apps/grid-admin/src/assets/icons/visit-count.svg
 create mode 100644 apps/grid-admin/src/assets/images/header.jpg
 create mode 100644 apps/grid-admin/src/assets/images/logo.png
 create mode 100644 apps/grid-admin/src/assets/svg/illustration.svg
 create mode 100644 apps/grid-admin/src/assets/svg/login-bg-dark.svg
 create mode 100644 apps/grid-admin/src/assets/svg/login-bg.svg
 create mode 100644 apps/grid-admin/src/assets/svg/login-box-bg.svg
 create mode 100644 apps/grid-admin/src/assets/svg/net-error.svg
 create mode 100644 apps/grid-admin/src/assets/svg/no-data.svg
 create mode 100644 apps/grid-admin/src/config.ts
 create mode 100644 apps/grid-admin/src/hooks/event/use-breakpoint.ts
 create mode 100644 apps/grid-admin/src/hooks/event/use-event-listener.ts
 create mode 100644 apps/grid-admin/src/hooks/event/use-scroll-to.ts
 create mode 100644 apps/grid-admin/src/hooks/setting/useHeaderSetting.ts
 create mode 100644 apps/grid-admin/src/hooks/setting/useMenuSetting.ts
 create mode 100644 apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts
 create mode 100644 apps/grid-admin/src/hooks/setting/useRootSetting.ts
 create mode 100644 apps/grid-admin/src/hooks/setting/useTransitionSetting.ts
 create mode 100644 apps/grid-admin/src/hooks/useRootSetting.ts
 create mode 100644 apps/grid-admin/src/hooks/useTabs.ts
 create mode 100644 apps/grid-admin/src/hooks/web/use-app-inject.ts
 create mode 100644 apps/grid-admin/src/hooks/web/useAppContext.ts
 create mode 100644 apps/grid-admin/src/hooks/web/useDesign.ts
 create mode 100644 apps/grid-admin/src/hooks/web/useFullContent.ts
 create mode 100644 apps/grid-admin/src/hooks/web/useLockScreen.ts
 create mode 100644 apps/grid-admin/src/init-application.ts
 create mode 100644 apps/grid-admin/src/layout/components/app/AppProvider.tsx
 create mode 100644 apps/grid-admin/src/layout/components/logo.vue
 create mode 100644 apps/grid-admin/src/layout/components/useLockPage.ts
 create mode 100644 apps/grid-admin/src/layout/feature/index.vue
 create mode 100644 apps/grid-admin/src/layout/index.vue
 create mode 100644 apps/grid-admin/src/logics/mitt/routeChange.ts
 create mode 100644 apps/grid-admin/src/main.ts
 create mode 100644 apps/grid-admin/src/pages/dashboard/analysis/index.vue
 create mode 100644 apps/grid-admin/src/pages/dashboard/workbench/index.vue
 create mode 100644 apps/grid-admin/src/pages/demo/Card.vue
 create mode 100644 apps/grid-admin/src/pages/demo/Draggable.vue
 create mode 100644 apps/grid-admin/src/pages/demo/Form.vue
 create mode 100644 apps/grid-admin/src/pages/demo/Table.vue
 create mode 100644 apps/grid-admin/src/pages/demo/editor/monaco-editor.vue
 create mode 100644 apps/grid-admin/src/pages/demo/page/index.vue
 create mode 100644 apps/grid-admin/src/pages/demo/table/BasicTable.vue
 create mode 100644 apps/grid-admin/src/pages/sys/exception/index.vue
 create mode 100644 apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue
 create mode 100644 apps/grid-admin/src/pages/sys/lock/index.vue
 create mode 100644 apps/grid-admin/src/pages/sys/lock/lock-page.vue
 create mode 100644 apps/grid-admin/src/pages/sys/lock/use-now.ts
 create mode 100644 apps/grid-admin/src/pages/sys/login/forget-password-form.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/login-form-title.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/login-form.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/login.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/mobile-form.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/qrcode-form.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/register-form.vue
 create mode 100644 apps/grid-admin/src/pages/sys/login/use-login.ts
 create mode 100644 apps/grid-admin/src/router/guard.ts
 create mode 100644 apps/grid-admin/src/router/helper/index.ts
 create mode 100644 apps/grid-admin/src/router/helper/menu.ts
 create mode 100644 apps/grid-admin/src/router/helper/route.ts
 create mode 100644 apps/grid-admin/src/router/index.ts
 create mode 100644 apps/grid-admin/src/router/menus/index.ts
 create mode 100644 apps/grid-admin/src/router/routes/basic.ts
 create mode 100644 apps/grid-admin/src/router/routes/index.ts
 create mode 100644 apps/grid-admin/src/router/routes/modules/dashboard.ts
 create mode 100644 apps/grid-admin/src/router/routes/modules/demo/demo.ts
 create mode 100644 apps/grid-admin/src/router/routes/modules/demo/editor.ts
 create mode 100644 apps/grid-admin/src/router/routes/modules/demo/page.ts
 create mode 100644 apps/grid-admin/src/setting/design.ts
 create mode 100644 apps/grid-admin/src/setting/index.ts
 create mode 100644 apps/grid-admin/src/setting/project.ts
 create mode 100644 apps/grid-admin/src/store/auth.ts
 create mode 100644 apps/grid-admin/src/store/config.ts
 create mode 100644 apps/grid-admin/src/store/lock.ts
 create mode 100644 apps/grid-admin/src/store/modules/app.ts
 create mode 100644 apps/grid-admin/src/store/multipleTab.ts
 create mode 100644 apps/grid-admin/src/store/test.ts
 create mode 100644 apps/grid-admin/src/store/user.ts
 create mode 100644 apps/grid-admin/tsconfig.json
 create mode 100644 apps/grid-admin/vite.config.ts

diff --git a/apps/admin/package.json b/apps/admin/package.json
index 6e197dcb..0fb2b389 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -29,7 +29,6 @@
     "@vben/constants": "workspace:*",
     "@vben/demo": "workspace:*",
     "@vben/directives": "workspace:*",
-    "@vben/grid-layouts": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locale": "workspace:*",
diff --git a/apps/admin/src/layout/index.vue b/apps/admin/src/layout/index.vue
index d460f8f5..5c799f0f 100644
--- a/apps/admin/src/layout/index.vue
+++ b/apps/admin/src/layout/index.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-// import { Layout } from '@vben/layouts'
-import { Layout } from  '@vben/grid-layouts'
+import { Layout } from '@vben/layouts'
 
 </script>
 
diff --git a/apps/grid-admin/.env b/apps/grid-admin/.env
new file mode 100644
index 00000000..41883baa
--- /dev/null
+++ b/apps/grid-admin/.env
@@ -0,0 +1,5 @@
+# spa title
+VITE_GLOB_APP_TITLE = Vben Admin
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = vben_admin
diff --git a/apps/grid-admin/.env.development b/apps/grid-admin/.env.development
new file mode 100644
index 00000000..cbc16168
--- /dev/null
+++ b/apps/grid-admin/.env.development
@@ -0,0 +1,21 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Cross-domain proxy, you can configure multiple
+# Please note that no line breaks
+VITE_PROXY = [["/basic-api","http://localhost:3000"]]
+# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+
+# Whether to enable https and http2 in the development environment
+# it will greatly optimize the loading speed at the first startup
+# 是否在开发环境开启 https 和 http2（开启后将大幅优化首次启动时加载速度）
+VITE_USE_HTTPS = true
+
+# Delete console
+VITE_DROP_CONSOLE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
diff --git a/apps/grid-admin/.env.production b/apps/grid-admin/.env.production
new file mode 100644
index 00000000..ac329c9c
--- /dev/null
+++ b/apps/grid-admin/.env.production
@@ -0,0 +1,28 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false
diff --git a/apps/grid-admin/index.html b/apps/grid-admin/index.html
new file mode 100644
index 00000000..9b193a7f
--- /dev/null
+++ b/apps/grid-admin/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title><%= title %></title>
+    <link rel="icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="app">
+       <style>
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background-color: #f4f7f9;
+        }
+
+        .app-loading .app-loading__wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .dots {
+          display: flex;
+          padding: 98px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-title {
+          display: flex;
+          margin-top: 30px;
+          font-size: 30px;
+          color: rgb(0 0 0 / 85%);
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading__logo {
+          display: block;
+          width: 90px;
+          margin: 0 auto;
+          margin-bottom: 20px;
+        }
+
+        .dot {
+          position: relative;
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          margin-top: 30px;
+          font-size: 32px;
+          transform: rotate(45deg);
+          box-sizing: border-box;
+          animation: antRotate 1.2s infinite linear;
+        }
+
+        .dot i {
+          position: absolute;
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #0065cc;
+          border-radius: 100%;
+          opacity: 30%;
+          transform: scale(0.75);
+          animation: antSpinMove 1s infinite linear alternate;
+          transform-origin: 50% 50%;
+        }
+
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          animation-delay: 0.4s;
+        }
+
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          animation-delay: 0.8s;
+        }
+
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          animation-delay: 1.2s;
+        }
+
+        @keyframes antRotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antRotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 100%;
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 100%;
+          }
+        }
+      </style>
+
+      <div class="app-loading">
+        <div class="app-loading__wrap">
+          <img src="/logo.png" class="app-loading__logo" alt="Logo" />
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+          <div class="app-loading-title"><%= title %></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/grid-admin/init-components.ts b/apps/grid-admin/init-components.ts
new file mode 100644
index 00000000..cf3fa770
--- /dev/null
+++ b/apps/grid-admin/init-components.ts
@@ -0,0 +1,194 @@
+// 按需导入组件
+import naive, {
+  darkTheme,
+  NTag,
+  NCard,
+  NDivider,
+  NSpace,
+  NPopover,
+  NButton,
+  NAvatar,
+  NStatistic,
+  NSelect,
+  NInput,
+  NThing,
+  NPopconfirm,
+  NIcon,
+  NIconWrapper,
+  NCheckbox,
+  NCheckboxGroup,
+  NButtonGroup,
+  NModal,
+  NEmpty,
+  NUpload,
+  NUploadDragger,
+  NTabs,
+  NTabPane,
+  NGrid,
+  NGridItem,
+  NEllipsis,
+  NImage,
+  NMessageProvider,
+  useMessage,
+  NPagination,
+  NRadio,
+  NRadioButton,
+  NRadioGroup,
+  NText,
+  NConfigProvider,
+  NDynamicTags,
+  NColorPicker,
+  NDescriptions,
+  NDescriptionsItem,
+  useNotification,
+  NNotificationProvider,
+  NSwitch,
+  NMenu,
+  // dateZhCN,
+  zhCN,
+  // darkTheme,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NLayout,
+  NLayoutSider,
+  NLayoutFooter,
+  NLayoutContent,
+  NLayoutHeader,
+  NForm,
+  NFormItem,
+  NDropdown,
+  NInputNumber,
+  NTreeSelect,
+  NBadge,
+  NListItem,
+  NList,
+  NAutoComplete,
+  NCascader,
+  NDatePicker,
+  NTimePicker,
+  NRate,
+  NSlider,
+  NTransfer,
+  NMention,
+  NFormItemGi,
+  NTree,
+  NH1,
+  NH2,
+  NH3,
+  NH4,
+  NH5,
+  NH6,
+  NInputGroupLabel,
+  NInputGroup,
+  NDrawer,
+  NDrawerContent,
+  NDynamicInput,
+  NPopselect,
+  NTime,
+  NScrollbar,
+  NElement,
+  NSkeleton,
+  NTooltip,
+  NTab,
+  NResult,
+  NAffix, NGradientText
+} from 'naive-ui'
+
+import { initVbenComponent, setNotice, setMessage } from '@vben/vbencomponents'
+
+export async function registerComponents(app) {
+  initVbenComponent(app, {
+    Drawer: NDrawer,
+    DrawerContent: NDrawerContent,
+    Tag: NTag,
+    Card: NCard,
+    Menu: NMenu,
+    Divider: NDivider,
+    Space: NSpace,
+    Popover: NPopover,
+    Button: NButton,
+    ButtonGroup: NButtonGroup,
+    Avatar: NAvatar,
+    Statistic: NStatistic,
+    Select: NSelect,
+    Input: NInput,
+    InputGroup: NInputGroup,
+    InputGroupLabel: NInputGroupLabel,
+    InputNumber: NInputNumber,
+    Form: NForm,
+    FormItem: NFormItem,
+    Thing: NThing,
+    Popconfirm: NPopconfirm,
+    Icon: NIcon,
+    IconWrapper: NIconWrapper,
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
+    Breadcrumb: NBreadcrumb,
+    BreadcrumbItem: NBreadcrumbItem,
+    Modal: NModal,
+    Empty: NEmpty,
+    Upload: NUpload,
+    UploadDragger: NUploadDragger,
+    Tabs: NTabs,
+    Tab: NTab,
+    TabPane: NTabPane,
+    Grid: NGrid,
+    GridItem: NGridItem,
+    Ellipsis: NEllipsis,
+    Image: NImage,
+    MessageProvider: NMessageProvider,
+    Pagination: NPagination,
+    Radio: NRadio,
+    RadioButton: NRadioButton,
+    RadioGroup: NRadioGroup,
+    Text: NText,
+    Config: NConfigProvider,
+    DynamicTags: NDynamicTags,
+    ColorPicker: NColorPicker,
+    Descriptions: NDescriptions,
+    DescriptionsItem: NDescriptionsItem,
+    NotificationProvider: NNotificationProvider,
+    Switch: NSwitch,
+    Layout: NLayout,
+    LayoutHeader: NLayoutHeader,
+    LayoutFooter: NLayoutFooter,
+    LayoutSider: NLayoutSider,
+    LayoutContent: NLayoutContent,
+    Dropdown: NDropdown,
+    TreeSelect: NTreeSelect,
+    Badge: NBadge,
+    ListItem: NListItem,
+    List: NList,
+    AutoComplete: NAutoComplete,
+    Cascader: NCascader,
+    DatePicker: NDatePicker,
+    TimePicker: NTimePicker,
+    Rate: NRate,
+    Slider: NSlider,
+    Transfer: NTransfer,
+    Mention: NMention,
+    FormItemGi: NFormItemGi,
+    Tree: NTree,
+    H1: NH1,
+    H2: NH2,
+    H3: NH3,
+    H4: NH4,
+    H5: NH5,
+    H6: NH6,
+    DynamicInput: NDynamicInput,
+    PopSelect: NPopselect,
+    Time: NTime,
+    Scrollbar: NScrollbar,
+    DarkTheme: darkTheme,
+    Element: NElement,
+    Skeleton: NSkeleton,
+    Tooltip: NTooltip,
+    Result: NResult,
+    Affix: NAffix,
+    GradientText: NGradientText
+  })
+  setMessage(useMessage)
+  setNotice(useNotification)
+  // @ts-ignore
+  // app.use(naive)
+}
diff --git a/apps/grid-admin/mock/_mock-server.ts b/apps/grid-admin/mock/_mock-server.ts
new file mode 100644
index 00000000..ff06484a
--- /dev/null
+++ b/apps/grid-admin/mock/_mock-server.ts
@@ -0,0 +1,16 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+
+const modules = import.meta.globEager('./**/*.ts')
+
+const mockModules: any[] = []
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) {
+    return
+  }
+  mockModules.push(...modules[key].default)
+})
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export const setupProdMockServer = () => createProdMockServer(mockModules)
diff --git a/apps/grid-admin/mock/auth.ts b/apps/grid-admin/mock/auth.ts
new file mode 100644
index 00000000..2a6505f0
--- /dev/null
+++ b/apps/grid-admin/mock/auth.ts
@@ -0,0 +1,121 @@
+import { MockMethod } from 'vite-plugin-mock'
+import {
+  resultError,
+  resultSuccess,
+  getRequestToken,
+  requestParams,
+} from '@vben/utils/mock-util'
+
+export function createFakeUserList() {
+  return [
+    {
+      userId: '1',
+      username: 'vben',
+      realname: 'Vben Admin',
+      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
+      desc: 'manager',
+      password: '123456',
+      accessToken: 'fakeToken1',
+      roles: [
+        {
+          name: 'Super Admin',
+          value: 'super',
+        },
+      ],
+    },
+    {
+      userId: '2',
+      username: 'test',
+      password: '123456',
+      realname: 'test user',
+      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
+      desc: 'tester',
+      accessToken: 'fakeToken2',
+      roles: [
+        {
+          name: 'Tester',
+          value: 'test',
+        },
+      ],
+    },
+  ]
+}
+
+const fakeCodeList: any = {
+  '1': ['1000', '3000', '5000'],
+
+  '2': ['2000', '4000', '6000'],
+}
+export default [
+  // mock user login
+  {
+    url: '/basic-api/login',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      const { username, password } = body
+
+      const checkUser = createFakeUserList().find(
+        (item) => item.username === username && password === item.password,
+      )
+
+      if (!checkUser) {
+        return resultError('Incorrect account or password！')
+      }
+
+      return resultSuccess(checkUser)
+    },
+  },
+  {
+    url: '/basic-api/getUserInfo',
+    method: 'get',
+    response: (request: requestParams) => {
+      const accessToken = getRequestToken(request)
+
+      if (!accessToken) return resultError('Invalid accessToken.')
+      const checkUser = createFakeUserList().find(
+        (item) => item.accessToken === accessToken,
+      )
+      if (!checkUser) {
+        return resultError(
+          'The corresponding user information was not obtained!',
+        )
+      }
+      return resultSuccess(checkUser)
+    },
+  },
+  {
+    url: '/basic-api/getPermCode',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const accessToken = getRequestToken(request)
+      if (!accessToken) return resultError('Invalid accessToken.')
+      const checkUser = createFakeUserList().find(
+        (item) => item.accessToken === accessToken,
+      )
+      if (!checkUser) {
+        return resultError('Invalid accessToken.')
+      }
+      const codeList = fakeCodeList[checkUser.userId]
+
+      return resultSuccess(codeList)
+    },
+  },
+  {
+    url: '/basic-api/logout',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const accessToken = getRequestToken(request)
+      if (!accessToken) return resultError('Invalid accessToken.')
+      const checkUser = createFakeUserList().find(
+        (item) => item.accessToken === accessToken,
+      )
+      if (!checkUser) {
+        return resultError('Invalid accessToken.')
+      }
+      return resultSuccess(undefined, { message: 'Token has been destroyed' })
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/mock/demo/form.ts b/apps/grid-admin/mock/demo/form.ts
new file mode 100644
index 00000000..f3f33948
--- /dev/null
+++ b/apps/grid-admin/mock/demo/form.ts
@@ -0,0 +1,271 @@
+import { MockMethod } from 'vite-plugin-mock'
+import { resultError, resultSuccess } from '@vben/utils/mock-util'
+
+export function createSelectData() {
+  return {
+    options: [
+      {
+        label: "Everybody's Got Something to Hide Except Me and My Monkey",
+        value: 'song0',
+        disabled: true,
+      },
+      {
+        label: 'Drive My Car',
+        value: 'song1',
+      },
+      {
+        label: 'Norwegian Wood',
+        value: 'song2',
+      },
+      {
+        label: "You Won't See",
+        value: 'song3',
+        disabled: true,
+      },
+      {
+        label: 'Nowhere Man',
+        value: 'song4',
+      },
+      {
+        label: 'Think For Yourself',
+        value: 'song5',
+      },
+      {
+        label: 'The Word',
+        value: 'song6',
+      },
+      {
+        label: 'Michelle',
+        value: 'song7',
+        disabled: true,
+      },
+      {
+        label: 'What goes on',
+        value: 'song8',
+      },
+      {
+        label: 'Girl',
+        value: 'song9',
+      },
+      {
+        label: "I'm looking through you",
+        value: 'song10',
+      },
+      {
+        label: 'In My Life',
+        value: 'song11',
+      },
+      {
+        label: 'Wait',
+        value: 'song12',
+      },
+    ],
+  }
+}
+
+export function createTreeSelectData() {
+  return {
+    options: [
+      {
+        label: 'Rubber Soul',
+        key: 'Rubber Soul',
+        children: [
+          {
+            label: "Everybody's Got Something to Hide Except Me and My Monkey",
+            key: "Everybody's Got Something to Hide Except Me and My Monkey",
+          },
+          {
+            label: 'Drive My Car',
+            key: 'Drive My Car',
+            disabled: true,
+          },
+          {
+            label: 'Norwegian Wood',
+            key: 'Norwegian Wood',
+          },
+          {
+            label: "You Won't See",
+            key: "You Won't See",
+            disabled: true,
+          },
+          {
+            label: 'Nowhere Man',
+            key: 'Nowhere Man',
+          },
+          {
+            label: 'Think For Yourself',
+            key: 'Think For Yourself',
+          },
+          {
+            label: 'The Word',
+            key: 'The Word',
+          },
+          {
+            label: 'Michelle',
+            key: 'Michelle',
+            disabled: true,
+          },
+          {
+            label: 'What goes on',
+            key: 'What goes on',
+          },
+          {
+            label: 'Girl',
+            key: 'Girl',
+          },
+          {
+            label: "I'm looking through you",
+            key: "I'm looking through you",
+          },
+          {
+            label: 'In My Life',
+            key: 'In My Life',
+          },
+          {
+            label: 'Wait',
+            key: 'Wait',
+          },
+        ],
+      },
+      {
+        label: 'Let It Be',
+        key: 'Let It Be Album',
+        children: [
+          {
+            label: 'Two Of Us',
+            key: 'Two Of Us',
+          },
+          {
+            label: 'Dig A Pony',
+            key: 'Dig A Pony',
+          },
+          {
+            label: 'Across The Universe',
+            key: 'Across The Universe',
+          },
+          {
+            label: 'I Me Mine',
+            key: 'I Me Mine',
+          },
+          {
+            label: 'Dig It',
+            key: 'Dig It',
+          },
+          {
+            label: 'Let It Be',
+            key: 'Let It Be',
+          },
+          {
+            label: 'Maggie Mae',
+            key: 'Maggie Mae',
+          },
+          {
+            label: "I've Got A Feeling",
+            key: "I've Got A Feeling",
+          },
+          {
+            label: 'One After 909',
+            key: 'One After 909',
+          },
+          {
+            label: 'The Long And Winding Road',
+            key: 'The Long And Winding Road',
+          },
+          {
+            label: 'For You Blue',
+            key: 'For You Blue',
+          },
+          {
+            label: 'Get Back',
+            key: 'Get Back',
+          },
+        ],
+      },
+    ],
+  }
+}
+
+export function createRadioData() {
+  return {
+    options: [
+      {
+        label: '选项1',
+        value: '1',
+      },
+      {
+        label: '选项2',
+        value: '2',
+      },
+      {
+        label: '选项3',
+        value: '3',
+        disabled: true,
+      },
+    ],
+  }
+}
+
+export function createCascaderOptions(depth = 3, iterator = 1, prefix = '') {
+  const length = 12
+  const options = []
+  for (let i = 1; i <= length; ++i) {
+    if (iterator === 1) {
+      options.push({
+        value: `v-${i}`,
+        label: `l-${i}`,
+        disabled: i % 5 === 0,
+        children: createCascaderOptions(depth, iterator + 1, '' + String(i)),
+      })
+    } else if (iterator === depth) {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        disabled: i % 5 === 0,
+      })
+    } else {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        disabled: i % 5 === 0,
+        children: createCascaderOptions(depth, iterator + 1, `${prefix}-${i}`),
+      })
+    }
+  }
+  return options
+}
+
+export default [
+  // mock user login
+  {
+    url: '/basic-api/demo/form/select',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createSelectData())
+    },
+  },
+  {
+    url: '/basic-api/demo/form/treeSelect',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createTreeSelectData())
+    },
+  },
+  {
+    url: '/basic-api/demo/form/radio',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createRadioData())
+    },
+  },
+  {
+    url: '/basic-api/demo/form/cascader',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess({ options: createCascaderOptions() })
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/mock/demo/table.ts b/apps/grid-admin/mock/demo/table.ts
new file mode 100644
index 00000000..1afafa42
--- /dev/null
+++ b/apps/grid-admin/mock/demo/table.ts
@@ -0,0 +1,52 @@
+import { MockMethod } from 'vite-plugin-mock'
+import { resultError, resultSuccess } from '@vben/utils/mock-util'
+
+export function createFakeTableData() {
+  return {
+    items: [
+      {
+        userId: '1',
+        username: 'vben',
+        realname: 'Vben Admin',
+        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
+        desc: 'manager',
+        password: '123456',
+        accessToken: 'fakeToken1',
+        roles: [
+          {
+            name: 'Super Admin',
+            value: 'super',
+          },
+        ],
+      },
+      {
+        userId: '2',
+        username: 'test',
+        password: '123456',
+        realname: 'test user',
+        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
+        desc: 'tester',
+        accessToken: 'fakeToken2',
+        roles: [
+          {
+            name: 'Tester',
+            value: 'test',
+          },
+        ],
+      },
+    ],
+    total: 2,
+  }
+}
+
+export default [
+  // mock user login
+  {
+    url: '/basic-api/demo/table',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createFakeTableData())
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/mock/menu.ts b/apps/grid-admin/mock/menu.ts
new file mode 100644
index 00000000..d20aebd1
--- /dev/null
+++ b/apps/grid-admin/mock/menu.ts
@@ -0,0 +1,269 @@
+import {
+  resultSuccess,
+  resultError,
+  getRequestToken,
+  requestParams,
+} from '@vben/utils/mock-util'
+import { MockMethod } from 'vite-plugin-mock'
+import { createFakeUserList } from './auth'
+
+// single
+const dashboardRoute = {
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: 'LAYOUT',
+  redirect: '/dashboard/analysis',
+  meta: {
+    title: 'routes.dashboard.dashboard',
+    icon: 'bx:bx-home',
+  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: '/dashboard/analysis/index',
+      meta: {
+        title: 'routes.dashboard.analysis',
+        icon: 'bx:bx-home',
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: '/dashboard/workbench/index',
+      meta: {
+        title: 'routes.dashboard.workbench',
+        icon: 'bx:bx-home',
+      },
+    },
+  ],
+}
+
+const backRoute = {
+  path: 'back',
+  name: 'PermissionBackDemo',
+  meta: {
+    title: 'routes.demo.permission.back',
+  },
+
+  children: [
+    {
+      path: 'page',
+      name: 'BackAuthPage',
+      component: '/demo/permission/back/index',
+      meta: {
+        title: 'routes.demo.permission.backPage',
+      },
+    },
+    {
+      path: 'btn',
+      name: 'BackAuthBtn',
+      component: '/demo/permission/back/Btn',
+      meta: {
+        title: 'routes.demo.permission.backBtn',
+      },
+    },
+  ],
+}
+
+const authRoute = {
+  path: '/permission',
+  name: 'Permission',
+  component: 'LAYOUT',
+  redirect: '/permission/front/page',
+  meta: {
+    icon: 'carbon:user-role',
+    title: 'routes.demo.permission.permission',
+  },
+  children: [backRoute],
+}
+
+const levelRoute = {
+  path: '/level',
+  name: 'Level',
+  component: 'LAYOUT',
+  redirect: '/level/menu1/menu1-1',
+  meta: {
+    icon: 'carbon:user-role',
+    title: 'routes.demo.level.level',
+  },
+
+  children: [
+    {
+      path: 'menu1',
+      name: 'Menu1Demo',
+      meta: {
+        title: 'Menu1',
+      },
+      children: [
+        {
+          path: 'menu1-1',
+          name: 'Menu11Demo',
+          meta: {
+            title: 'Menu1-1',
+          },
+          children: [
+            {
+              path: 'menu1-1-1',
+              name: 'Menu111Demo',
+              component: '/demo/level/Menu111',
+              meta: {
+                title: 'Menu111',
+              },
+            },
+          ],
+        },
+        {
+          path: 'menu1-2',
+          name: 'Menu12Demo',
+          component: '/demo/level/Menu12',
+          meta: {
+            title: 'Menu1-2',
+          },
+        },
+      ],
+    },
+    {
+      path: 'menu2',
+      name: 'Menu2Demo',
+      component: '/demo/level/Menu2',
+      meta: {
+        title: 'Menu2',
+      },
+    },
+  ],
+}
+
+const sysRoute = {
+  path: '/system',
+  name: 'System',
+  component: 'LAYOUT',
+  redirect: '/system/account',
+  meta: {
+    icon: 'ion:settings-outline',
+    title: 'routes.demo.system.moduleName',
+  },
+  children: [
+    {
+      path: 'account',
+      name: 'AccountManagement',
+      meta: {
+        title: 'routes.demo.system.account',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/account/index',
+    },
+    {
+      path: 'account_detail/:id',
+      name: 'AccountDetail',
+      meta: {
+        title: 'routes.demo.system.account_detail',
+        ignoreKeepAlive: true,
+        showMenu: false,
+      },
+      component: '/demo/system/account/AccountDetail',
+    },
+    {
+      path: 'role',
+      name: 'RoleManagement',
+      meta: {
+        title: 'routes.demo.system.role',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/role/index',
+    },
+
+    {
+      path: 'menu',
+      name: 'MenuManagement',
+      meta: {
+        title: 'routes.demo.system.menu',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/menu/index',
+    },
+    {
+      path: 'dept',
+      name: 'DeptManagement',
+      meta: {
+        title: 'routes.demo.system.dept',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/dept/index',
+    },
+    {
+      path: 'changePassword',
+      name: 'ChangePassword',
+      meta: {
+        title: 'routes.demo.system.password',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/password/index',
+    },
+  ],
+}
+
+const linkRoute = {
+  path: '/link',
+  name: 'Link',
+  component: 'LAYOUT',
+  meta: {
+    icon: 'ion:tv-outline',
+    title: 'routes.demo.iframe.frame',
+  },
+  children: [
+    {
+      path: 'doc',
+      name: 'Doc',
+      meta: {
+        title: 'routes.demo.iframe.doc',
+      },
+    },
+    {
+      path: 'https://vvbin.cn/doc-next/',
+      name: 'DocExternal',
+      component: 'LAYOUT',
+      meta: {
+        title: 'routes.demo.iframe.docExternal',
+      },
+    },
+  ],
+}
+
+export default [
+  {
+    url: '/basic-api/getMenuList',
+    timeout: 1000,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request)
+      if (!token) {
+        return resultError('Invalid token!')
+      }
+      const checkUser = createFakeUserList().find(
+        (item) => item.token === token,
+      )
+      if (!checkUser) {
+        return resultError('Invalid user token!')
+      }
+      const id = checkUser.userId
+      let menu: Object[]
+      switch (id) {
+        case '1':
+          dashboardRoute.redirect =
+            dashboardRoute.path + '/' + dashboardRoute.children[0].path
+          menu = [dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute]
+          break
+        case '2':
+          dashboardRoute.redirect =
+            dashboardRoute.path + '/' + dashboardRoute.children[1].path
+          menu = [dashboardRoute, authRoute, levelRoute, linkRoute]
+          break
+        default:
+          menu = []
+      }
+
+      return resultSuccess(menu)
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/package.json b/apps/grid-admin/package.json
new file mode 100644
index 00000000..c9f14997
--- /dev/null
+++ b/apps/grid-admin/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@apps/grid-admin",
+  "version": "3.0.0-bata.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "apps/ant-app"
+  },
+  "author": {
+    "name": "vben",
+    "email": "anncwb@126.com",
+    "url": "https://github.com/anncwb"
+  },
+  "scripts": {
+    "build": "pnpm cross-env NODE_ENV=production vite build",
+    "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo",
+    "dev": "vite",
+    "preview": "npm run build && vite preview",
+    "preview:dist": "vite preview",
+    "report": "pnpm cross-env REPORT=true npm run build",
+    "server:br": "pnpx http-server dist --cors --brotli -c-1",
+    "server:gzip": "pnpx http-server dist --cors --gzip -c-1",
+    "type:check": "vue-tsc --noEmit --skipLibCheck"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "@iconify/iconify": "^3.1.0",
+    "@vben/components": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/demo": "workspace:*",
+    "@vben/directives": "workspace:*",
+    "@vben/grid-layouts": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locale": "workspace:*",
+    "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vben/vbencomponents": "workspace:*",
+    "dayjs": "^1.11.7",
+    "mockjs": "^1.1.0",
+    "monaco-editor": "^0.34.1",
+    "nprogress": "^0.2.0",
+    "path-to-regexp": "^6.2.1",
+    "pinia": "2.0.30",
+    "vue": "3.2.47",
+    "vue-demi": "^0.13.11",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@config/css-preprocess": "workspace:*",
+    "@config/vite": "workspace:*",
+    "@types/mockjs": "^1.0.7",
+    "@types/nprogress": "^0.2.0",
+    "@vben/types": "workspace:*",
+    "@vue/compiler-sfc": "3.2.47",
+    "@vue/test-utils": "^2.2.9",
+    "naive-ui": "^2.34.3",
+    "typescript": "^4.9.5",
+    "vite": "4.0.4",
+    "vue-tsc": "^1.0.24"
+  }
+}
diff --git a/apps/grid-admin/postcss.config.js b/apps/grid-admin/postcss.config.js
new file mode 100644
index 00000000..db0f61f9
--- /dev/null
+++ b/apps/grid-admin/postcss.config.js
@@ -0,0 +1 @@
+module.exports = require('@config/css-preprocess/postcss')
diff --git a/apps/grid-admin/public/favicon.ico b/apps/grid-admin/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..d92e0b8c4963f1ae81021bbed63e94c2699dea66
GIT binary patch
literal 894
zcmZQzU<5(|0R|u`!H~hsz#zuJz@P!dKp_SNAO?x!2k(<*|Mp73(S^ghaCG}W3micV
zd6}gJRR66~2Cn|nK^;8mfr=prt{%vMt3Q887jFKoe=I;N;Of6uAgs8$R~xS7)?Ze*
z7G(86jaaP!YD8B5HAMw(#m^dPxRwit(0u_9G`M>FR>0MN^(+15GZl&w=KiVL1wn6T
z6<j^64?%Fn5XK+(bqG{;>kkZ}DT8x=g_XnA|4v>HSO33$3S12u1Fjy#fSC_upeciM
zfBAL8wfs)p0oU^X|9`j|GzMHfvK44*kh#ACs}Nd}*5GjrTo*z;*cWhd@)!pg85kNs
n7^oeNfqano0bpKwAP>a+3=AJYn4N*)2ax^&6#E0jpkM$1?7KMX

literal 0
HcmV?d00001

diff --git a/apps/grid-admin/public/logo.png b/apps/grid-admin/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd4c33d8b71f31d32aaed9fefe14f237b81e764f
GIT binary patch
literal 4042
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

literal 0
HcmV?d00001

diff --git a/apps/grid-admin/src/apis/auth.ts b/apps/grid-admin/src/apis/auth.ts
new file mode 100644
index 00000000..d144e2b6
--- /dev/null
+++ b/apps/grid-admin/src/apis/auth.ts
@@ -0,0 +1,57 @@
+import type { ErrorMessageMode } from '@vben/types'
+import { request } from '@vben/request'
+
+export interface RoleInfo {
+  name: string
+  value: string
+}
+
+export interface LoginParams {
+  username: string
+  password: string
+}
+
+export interface LoginResultModel {
+  userId: string | number
+  accessToken: string
+  role: RoleInfo
+}
+
+export interface UserInfoModel {
+  roles: RoleInfo[]
+  userId: string | number
+  username: string
+  realName?: string
+  avatar: string
+  desc?: string
+}
+
+export function doLoginApi(
+  params: LoginParams,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return request.post<LoginResultModel>(
+    {
+      url: '/login',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+export function getUserInfoApi() {
+  return request.get<UserInfoModel>(
+    { url: '/getUserInfo' },
+    { errorMessageMode: 'none' },
+  )
+}
+
+export function getPermCode() {
+  return request.get<string[]>({ url: '/getPermCode' })
+}
+
+export function doLogoutApi() {
+  return request.get({ url: '/logout' })
+}
diff --git a/apps/grid-admin/src/apis/menu.ts b/apps/grid-admin/src/apis/menu.ts
new file mode 100644
index 00000000..1ba0ccd0
--- /dev/null
+++ b/apps/grid-admin/src/apis/menu.ts
@@ -0,0 +1,29 @@
+import { request } from '@vben/request'
+
+export interface RouteItem {
+  path: string
+  component: any
+  meta: any
+  name?: string
+  alias?: string | string[]
+  redirect?: string
+  caseSensitive?: boolean
+  children?: RouteItem[]
+}
+
+/**
+ * @description: Get menu return value
+ */
+export type GetMenuListResultModel = RouteItem[]
+
+enum Api {
+  GetMenuList = '/getMenuList',
+}
+
+/**
+ * @description: Get user menu based on id
+ */
+
+export const getMenuList = () => {
+  return request.get<GetMenuListResultModel>({ url: Api.GetMenuList })
+}
diff --git a/apps/grid-admin/src/apis/sys/index.ts b/apps/grid-admin/src/apis/sys/index.ts
new file mode 100644
index 00000000..d35d236a
--- /dev/null
+++ b/apps/grid-admin/src/apis/sys/index.ts
@@ -0,0 +1,2 @@
+export * from './menu'
+export * from './user'
diff --git a/apps/grid-admin/src/apis/sys/menu.ts b/apps/grid-admin/src/apis/sys/menu.ts
new file mode 100644
index 00000000..1ba0ccd0
--- /dev/null
+++ b/apps/grid-admin/src/apis/sys/menu.ts
@@ -0,0 +1,29 @@
+import { request } from '@vben/request'
+
+export interface RouteItem {
+  path: string
+  component: any
+  meta: any
+  name?: string
+  alias?: string | string[]
+  redirect?: string
+  caseSensitive?: boolean
+  children?: RouteItem[]
+}
+
+/**
+ * @description: Get menu return value
+ */
+export type GetMenuListResultModel = RouteItem[]
+
+enum Api {
+  GetMenuList = '/getMenuList',
+}
+
+/**
+ * @description: Get user menu based on id
+ */
+
+export const getMenuList = () => {
+  return request.get<GetMenuListResultModel>({ url: Api.GetMenuList })
+}
diff --git a/apps/grid-admin/src/apis/sys/user.ts b/apps/grid-admin/src/apis/sys/user.ts
new file mode 100644
index 00000000..d18a0e04
--- /dev/null
+++ b/apps/grid-admin/src/apis/sys/user.ts
@@ -0,0 +1,84 @@
+import type { ErrorMessageMode } from '@vben/types'
+import { request } from '@vben/request'
+
+/**
+ * @description: Login interface parameters
+ */
+export interface LoginParams {
+  username: string
+  password: string
+}
+
+export interface RoleInfo {
+  roleName: string
+  value: string
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {
+  userId: string | number
+  token: string
+  role: RoleInfo
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetUserInfoModel {
+  roles: RoleInfo[]
+  // 用户id
+  userId: string | number
+  // 用户名
+  username: string
+  // 真实名字
+  realName: string
+  // 头像
+  avatar: string
+  // 介绍
+  desc?: string
+}
+
+enum Api {
+  Login = '/login',
+  Logout = '/logout',
+  GetUserInfo = '/getUserInfo',
+  GetPermCode = '/getPermCode',
+}
+
+/**
+ * @description: user login api
+ */
+export function loginApi(
+  params: LoginParams,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return request.post<LoginResultModel>(
+    {
+      url: Api.Login,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+/**
+ * @description: getUserInfo
+ */
+export function getUserInfo() {
+  return request.get<GetUserInfoModel>(
+    { url: Api.GetUserInfo },
+    { errorMessageMode: 'none' },
+  )
+}
+
+export function getPermCode() {
+  return request.get<string[]>({ url: Api.GetPermCode })
+}
+
+export function doLogout() {
+  return request.get({ url: Api.Logout })
+}
diff --git a/apps/grid-admin/src/apis/system/model/useModel.ts b/apps/grid-admin/src/apis/system/model/useModel.ts
new file mode 100644
index 00000000..2415c911
--- /dev/null
+++ b/apps/grid-admin/src/apis/system/model/useModel.ts
@@ -0,0 +1,38 @@
+/**
+ * @description: Login interface parameters
+ */
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface RoleInfo {
+  roleName: string;
+  value: string;
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {
+  userId: string | number;
+  token: string;
+  role: RoleInfo;
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetUserInfoModel {
+  roles: RoleInfo[];
+  // 用户id
+  userId: string | number;
+  // 用户名
+  username: string;
+  // 真实名字
+  realName: string;
+  // 头像
+  avatar: string;
+  // 介绍
+  desc?: string;
+}
diff --git a/apps/grid-admin/src/app.vue b/apps/grid-admin/src/app.vue
new file mode 100644
index 00000000..cb506a9e
--- /dev/null
+++ b/apps/grid-admin/src/app.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { useLocale } from '@vben/locale'
+import { useWebTitle } from '@vben/hooks'
+
+import { REDIRECT_NAME } from '@vben/constants'
+import { getGlobalConfig, computedAsync } from '@vben/utils'
+import AppProvider from '@/layout/components/app/AppProvider'
+import { dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui'
+import { useAppStore } from '@/store/modules/app'
+// Support Multi-language
+const { getLocale } = useLocale()
+// Listening to page changes and dynamically changing site titles
+const { title } = getGlobalConfig(import.meta.env)
+useWebTitle(title, (route) => route.name !== REDIRECT_NAME)
+const appStore = useAppStore()
+
+// Dynamic switch component library language
+const dateLocale = computedAsync(async () => {
+  const message = {
+    zh_CN: () => {
+      return dateZhCN
+    },
+    en_US: () => {
+      return dateEnUS
+    },
+  }
+  const mod = await message[getLocale.value]()
+
+  return mod?.default ?? mod
+})
+// Dynamic switch component library language
+const locale = computedAsync(async () => {
+  const message = {
+    zh_CN: () => {
+      import('dayjs/locale/zh-cn')
+      return zhCN
+    },
+    en_US: () => {
+      import('dayjs/locale/en')
+      return enUS
+    },
+  }
+  const mod = await message[getLocale.value]()
+
+  return mod?.default ?? mod
+})
+</script>
+
+<template>
+  <VbenConfig :locale="locale" :date-locale="dateLocale">
+    <VbenNotificationProvider>
+      <VbenMessageProvider>
+        <AppProvider>
+          <router-view />
+        </AppProvider>
+      </VbenMessageProvider>
+    </VbenNotificationProvider>
+  </VbenConfig>
+</template>
diff --git a/apps/grid-admin/src/assets/icons/download-count.svg b/apps/grid-admin/src/assets/icons/download-count.svg
new file mode 100644
index 00000000..1c951958
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/download-count.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.99 419.8"><defs><style>.cls-1{fill:#ffa546;}.cls-2{fill:#ff6059;opacity:0.4;}.cls-3{fill:#426572;}.cls-4{fill:#ffd947;}</style></defs><title>Asset 91</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M351,380.73v17.59a15.52,15.52,0,0,1-15.47,15.48H21.46A15.52,15.52,0,0,1,6,398.32V380.73a15.51,15.51,0,0,1,15.47-15.47H335.52A15.51,15.51,0,0,1,351,380.73Z"/><path class="cls-2" d="M351,406.85c0,3.95-7,7.19-15.47,7.19H21.46C13,414,6,410.8,6,406.85V380.73a15.51,15.51,0,0,1,15.47-15.47H37.66l3.44,25.27c0,4,7,7.2,15.47,7.2l283.72,12.44,7.38-2.28Z"/><path class="cls-3" d="M335.52,419.8H21.46A21.5,21.5,0,0,1,0,398.32V380.73a21.49,21.49,0,0,1,21.46-21.47H335.52A21.49,21.49,0,0,1,357,380.73v17.59a21.52,21.52,0,0,1-21.46,21.48ZM21.46,371.26A9.48,9.48,0,0,0,12,380.73v17.59a9.48,9.48,0,0,0,9.46,9.48H335.52a9.52,9.52,0,0,0,9.46-9.48V380.73a9.48,9.48,0,0,0-9.46-9.47Z"/><path class="cls-1" d="M247.93,138H233.23V41.7A35.7,35.7,0,0,0,197.53,6H159.45a35.7,35.7,0,0,0-35.7,35.7V138H109.06C80,138,61.84,169.48,76.37,194.64l34.72,60.13,30,52c16.6,28.76,58.12,28.76,74.72,0l30-52,34.72-60.13C295.14,169.48,277,138,247.93,138Z"/><path class="cls-2" d="M280.62,188l-34.73,60.13-30,52c-11.24,19.46-66.68,32.78-52.52,18.88,60.22-59.12,104.3-182.16,104.3-182.16A37.74,37.74,0,0,1,280.62,188Z"/><path class="cls-4" d="M192.3,6c-.22.23-.42.47-.63.72-38.92,45-18.36,116.49-42.85,170.71-10.14,22.45-29.18,41.51-52.15,49.48L78,194.64C63.52,169.48,81.67,138,110.72,138h14.7V41.7A35.7,35.7,0,0,1,161.12,6Z"/><path class="cls-3" d="M178.49,334.39h0a48.64,48.64,0,0,1-42.56-24.57L71.17,197.64A43.75,43.75,0,0,1,109.06,132h8.69V41.7A41.74,41.74,0,0,1,159.45,0h38.09a41.75,41.75,0,0,1,41.7,41.7V132h8.69a43.75,43.75,0,0,1,37.89,65.62L221,309.82A48.64,48.64,0,0,1,178.49,334.39ZM109.06,144a31.75,31.75,0,0,0-27.49,47.62l64.76,112.17a37.14,37.14,0,0,0,64.33,0l64.76-112.17A31.75,31.75,0,0,0,247.92,144H227.23V41.7A29.73,29.73,0,0,0,197.53,12H159.45a29.73,29.73,0,0,0-29.7,29.7V144Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg
new file mode 100644
index 00000000..e1553e50
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.31 560.11"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#b46078;}.cls-7{fill:#96426e;}.cls-8{fill:#fff;}.cls-9{fill:#fefdf5;}.cls-10{fill:#f4eae1;}.cls-11{fill:#f9637c;}.cls-12{fill:#ba4264;}.cls-13{fill:#b13a59;}</style></defs><title>Asset 15</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="45.9" cy="303.35" r="41.4"/><path class="cls-2" d="M78.13,278.08a41.39,41.39,0,0,0-57.27,57.27,41.4,41.4,0,1,1,57.27-57.27Z"/><path class="cls-3" d="M45.9,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,265Z"/><circle class="cls-1" cx="345.41" cy="303.35" r="41.4"/><path class="cls-3" d="M345.42,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.42,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.42,265Z"/><path class="cls-1" d="M191.57,88.78h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,193,477.43h0a147.5,147.5,0,0,1-147.5-147.5v-95a146.1,146.1,0,0,1,146.1-146.1Z"/><path class="cls-2" d="M211.7,474.46a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C147.26,95.87,91.42,154.6,81.17,220.06a509,509,0,0,1-13.33,61.86L54.49,328.37C54.49,402.62,140.07,464.5,211.7,474.46Z"/><path class="cls-3" d="M191.41,481.93a152.43,152.43,0,0,1-152-152V234.88A151,151,0,0,1,190,84.28h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM190,93.28a142,142,0,0,0-141.6,141.6v95.05a142.82,142.82,0,0,0,244,101,142,142,0,0,0,42-101V234.88A142,142,0,0,0,192.8,93.28Z"/><path class="cls-4" d="M325.44,305.26v.19C324.89,305.48,325.11,305.35,325.44,305.26Z"/><path class="cls-3" d="M368.43,305.61a3,3,0,0,1-2.94-2.41c-4.06-20.3-24.53-16.89-25.4-16.73a3,3,0,1,1-1-5.91c9.36-1.67,28.17.66,32.33,21.46a3,3,0,0,1-2.35,3.53A3,3,0,0,1,368.43,305.61Z"/><path class="cls-3" d="M21.27,308.26a2.36,2.36,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.75-14.23,7.79-21.26,12.55-24.65a20.94,20.94,0,0,1,10.61-4.05,3,3,0,0,1,.24,6c-.65,0-14.7,1.08-17.45,23.43A3,3,0,0,1,21.27,308.26Z"/><ellipse class="cls-5" cx="184.64" cy="499.11" rx="179.73" ry="52.86"/><path class="cls-6" d="M335.74,353.31c21.15,38.6,14.42,76.22,15.16,112.12l-11.45-12.67a123.72,123.72,0,0,1-30.05,60,44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87A58.87,58.87,0,0,1,233.6,551.2a24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32A51.33,51.33,0,0,1,105.4,511.3c-21.68,1.35-43.33-13.51-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C15.38,468,17.38,382.75,41.91,354.63c0,0,51.63,8.28,83,32.06,8.53,6.48,8.78-2.64,21-7.72,16.48-6.83,45.87-11.63,62.57-11.7,24.41-.11,37.46,30.85,53.1,16.16C303,344.58,335.38,352.66,335.74,353.31Z"/><path class="cls-7" d="M352.35,461,340.9,448.3a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.89,92.89,0,0,1-28.69,48.92A37.38,37.38,0,0,0,267.18,511a58.84,58.84,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.91.11,18.31,4.11,18.65-16.8,2.58-32.53-13.76-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C41.34,476,32.8,461.71,28.19,444.67,44.75,456.74,64.24,465,83.51,472.46c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C349,391.91,351.61,425.08,352.35,461Z"/><path class="cls-3" d="M256.37,560.11l7.72-18.34a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65,9.78-13.42A19.55,19.55,0,0,0,235,535.31c-6.64,5.87-15.71,9.29-25.74,9.47a40.71,40.71,0,0,1-22-5.69c1.08,5.49,1.15,10.37-3.11,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.92-33.69-20.51,1.54,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.05c-18.58,0-36.49-10.43-46.18-26.13l-.46.48-2.31,2.25-2.88-1.46C38,481,27.7,464.56,23.31,441.92c-6.43-33.13.88-73.25,16.66-91.33a4.5,4.5,0,0,1,6.78,5.91c-14.15,16.23-20.57,53-14.61,83.71,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56L61.27,473c5.89,18.64,25.78,32.29,45.3,31.07l3-.19,1.31,2.73c7.82,16.21,18.57,26.05,28.08,30.23A85.81,85.81,0,0,1,135.69,519l-1.27-13.24,9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.85,7.6,14,12.09,24.49,12.09h.66c10.8-.2,20-5,24.71-13l4.51-7.66,3.5,8.16a28.32,28.32,0,0,1,2,14.83,54.25,54.25,0,0,0,19.1-26.84l3.33-10.56,5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.24,88.24,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.58,48.58,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87A127.42,127.42,0,0,1,314.17,513l-4.26,4.66-3-5.54a39.46,39.46,0,0,0-7.37-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="cls-1" d="M158.08,455.14A10.16,10.16,0,0,1,147.94,445V406.25a10.17,10.17,0,0,1,10.14-10.14H229a10.17,10.17,0,0,1,10.13,10.14V445A10.16,10.16,0,0,1,229,455.14"/><path class="cls-2" d="M240.85,410.47v12a10.15,10.15,0,0,0-9.29-6.1H160.61a10.16,10.16,0,0,0-10.14,10.13v26.74a10.1,10.1,0,0,1-.84-4V410.47a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,240.85,410.47Z"/><path class="cls-3" d="M193.13,394.93c7.32,0,14.47,0,21.37.11l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11-.06,2.21c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06,1-.1,1.41,0,.23,0,.45,0,.68s-.05.55-.08.81a12.38,12.38,0,0,1-.77,3.09,12,12,0,0,1-3.1,4.43,10.12,10.12,0,0,1-6.49,2.68,5.06,5.06,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.23,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.68,5.68,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.1-21.37.1s-14.47,0-21.37-.1l-10.17-.12-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.68,5.68,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07,1-.1,1.41,0,.23,0,.45,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a5.06,5.06,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.43,12.38,12.38,0,0,1-.77-3.09c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11v-.68l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C178.66,395,185.81,394.93,193.13,394.93Z"/><path class="cls-3" d="M54.48,374.11a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.72,50.72,0,0,1,.42-5.48,35.47,35.47,0,0,1,1.17-5.68l10.41,4.56a24.21,24.21,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,54.48,374.11Z"/><path class="cls-3" d="M70,382.66c.81,7.4,4.1,14.79,8.86,21.21A47.32,47.32,0,0,1,64.51,384a38.71,38.71,0,0,1-2.31-12.94,35.09,35.09,0,0,1,2.63-13.62l10,5.38C71,367.93,69.21,375.33,70,382.66Z"/><path class="cls-3" d="M98.32,388.23a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,89,366.14l11.2,1.92A47.79,47.79,0,0,0,98.32,388.23Z"/><path class="cls-3" d="M282.66,384.17a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.21,1.71.88,2.72,2.92A27,27,0,0,1,282.66,384.17Z"/><path class="cls-3" d="M305.19,378.25a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,305.19,378.25Z"/><path class="cls-3" d="M328.91,374.58a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,328.91,374.58Z"/><path class="cls-3" d="M63.25,476.89a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.31c0,.93-.12,1.93-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76,75.5,75.5,0,0,0,1.58,7.62c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A27.16,27.16,0,0,1,67,488.7a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,63.25,476.89Z"/><path class="cls-3" d="M95.32,490.74a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,95.32,490.74Z"/><path class="cls-3" d="M133.57,497.43c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S137.74,512.42,133.57,497.43Z"/><path class="cls-3" d="M246.46,509.58c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.78,59.78,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C244.45,515.67,245.5,512.73,246.46,509.58Z"/><path class="cls-3" d="M276.25,498.2c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.85,68.85,0,0,0,3.11-8.29A89.28,89.28,0,0,0,276.25,498.2Z"/><path class="cls-3" d="M306.39,479c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.77-.33.58-.63,1.14-1,1.66l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72L302,493c.2-.53.41-1.08.62-1.66.47-1.12.85-2.38,1.32-3.67C304.79,485,305.63,482.1,306.39,479Z"/><path class="cls-3" d="M316.6,469.6c1.61-4,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76.28,76.28,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.42-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C313.16,477.18,315,473.53,316.6,469.6Z"/><path class="cls-8" d="M36.38,392.54c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S35.63,396.18,36.38,392.54Z"/><path class="cls-8" d="M37.64,432a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,37.64,432Z"/><path class="cls-3" d="M125.55,391.49h-.49c-5.14-.18-9.18-3.25-12.42-5.71l-.2-.15a157,157,0,0,0-68.06-29.49,4.5,4.5,0,0,1,1.51-8.87,166.07,166.07,0,0,1,72,31.19l.19.15c2.47,1.87,5,3.8,7.31,3.89s4.86-1.61,7.58-3.4l.77-.5C149.09,368.55,169,363,189.86,363h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.3,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,1,1,1.51,8.87,157,157,0,0,0-68.06,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C134.6,388.79,130.5,391.49,125.55,391.49Z"/><path class="cls-3" d="M190.39,345.16a4.49,4.49,0,0,1-4.5-4.5V294.07a4.5,4.5,0,0,1,9,0v46.59A4.5,4.5,0,0,1,190.39,345.16Z"/><path class="cls-2" d="M178.07,222.19c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21a103.64,103.64,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.32"/><path class="cls-2" d="M204.25,225.47c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.21a103.61,103.61,0,0,1,30,3.07c8,2.05,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25-17.57-8.26-39.91-12.29-59.61-10.31"/><path class="cls-6" d="M205.19,214.55c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.66-17-15.81-26.45-20.25-17.57-8.26-39.91-12.28-59.6-10.31"/><path class="cls-3" d="M289.6,259.29a22.42,22.42,0,0,1-3.85-.36c-5-.87-9.51-2.84-13.86-4.75a64.83,64.83,0,0,0-9.76-3.68,98.35,98.35,0,0,0-28.71-2.93c-.88,0-1.78.08-2.68.13-8,.44-18,1-24.83-6.89-6.61-7.6-6.88-19.43-5.11-27.26a5.34,5.34,0,0,1,4.29-3.82,123.23,123.23,0,0,1,62,10.72c9.2,4.33,19.88,12.49,27.87,21.3,5.87,6.47,4.76,11.05,3.58,13.2C297.53,256.7,295.17,259.29,289.6,259.29Zm-51.81-20.82a106.54,106.54,0,0,1,26.58,3.31,73,73,0,0,1,11.13,4.16c4,1.77,7.86,3.44,11.79,4.12a12.72,12.72,0,0,0,2.79.22,12.53,12.53,0,0,0-1.83-2.48c-7.24-8-16.83-15.35-25-19.2a114.19,114.19,0,0,0-54.15-10.17c-.7,5.74.13,12.44,3.63,16.47,4,4.56,10.57,4.2,17.55,3.82l2.79-.15C234.63,238.51,236.21,238.47,237.79,238.47Z"/><path class="cls-6" d="M173.31,210.57c1.68,7.42,1.09,17.32-4.12,23.3-6.08,7-15.66,5.57-23.93,5.22a103.27,103.27,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="cls-3" d="M88.89,255.31c-5.56,0-7.93-2.59-8.89-4.34-1.19-2.15-2.3-6.72,3.58-13.2,8-8.81,18.66-17,27.86-21.29a123,123,0,0,1,62-10.72,5.3,5.3,0,0,1,4.29,3.82c1.77,7.82,1.49,19.65-5.12,27.25-6.86,7.88-16.82,7.33-24.83,6.89l-2.68-.13a98.35,98.35,0,0,0-28.71,2.93,66.24,66.24,0,0,0-9.75,3.68c-4.36,1.91-8.86,3.88-13.87,4.75A22.42,22.42,0,0,1,88.89,255.31Zm-.47-9a12.45,12.45,0,0,0,2.78-.21c3.93-.69,7.75-2.36,11.8-4.13a73.52,73.52,0,0,1,11.12-4.16,107.61,107.61,0,0,1,31.33-3.2c.92,0,1.85.09,2.8.14,7,.38,13.57.75,17.54-3.82,3.51-4,4.33-10.72,3.63-16.47a114.34,114.34,0,0,0-54.15,10.17c-8.19,3.85-17.78,11.21-25,19.2A12.55,12.55,0,0,0,88.42,246.3Z"/><path class="cls-3" d="M183.32,443.66a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.27-6.88c.3.05,30.64,5.45,44.81-4.67a15.44,15.44,0,0,0,6.65-10.76,3.5,3.5,0,1,1,6.92,1.05,22.47,22.47,0,0,1-9.51,15.42C205.9,442.15,193.63,443.66,183.32,443.66Z"/><path class="cls-3" d="M353.48,315.47a3,3,0,0,1-2.91-2.3,38.7,38.7,0,0,1-1.16-13.9A21,21,0,0,1,355.94,286a3,3,0,0,1,4,4.48,15.11,15.11,0,0,0-4.57,9.53,33.19,33.19,0,0,0,1,11.77,3,3,0,0,1-2.22,3.61A2.79,2.79,0,0,1,353.48,315.47Z"/><path class="cls-3" d="M33.65,315.47a2.79,2.79,0,0,1-.7-.08,3,3,0,0,1-2.23-3.61,33.19,33.19,0,0,0,1-11.77,15.1,15.1,0,0,0-4.56-9.53,3,3,0,1,1,4-4.48,21,21,0,0,1,6.53,13.27,38.93,38.93,0,0,1-1.16,13.9A3,3,0,0,1,33.65,315.47Z"/><path class="cls-8" d="M257.31,169.69a45.27,45.27,0,0,1,7.68,4,35.23,35.23,0,0,1,5.5,4.42c2.85,2.87,4,5.23,3.3,6s-3.05,0-6.42-1.57l-5.81-2.68c-2.18-1-4.56-2-7.09-3s-5-1.88-7.24-2.68l-6.07-2c-3.49-1.2-5.77-2.2-5.73-3.28s2.48-2,6.52-2.08a34.71,34.71,0,0,1,7,.58A45.21,45.21,0,0,1,257.31,169.69Z"/><path class="cls-8" d="M37.56,196.45a14.27,14.27,0,0,1,4.18-5.72c1.52-1.16,2.92-1.47,3.78-.87s1.07,2,.85,3.68a23.93,23.93,0,0,1-1.76,5.89,23.77,23.77,0,0,1-3,5.37c-1.06,1.34-2.18,2.15-3.23,1.95s-1.79-1.42-2-3.31A14.32,14.32,0,0,1,37.56,196.45Z"/><path class="cls-8" d="M59.41,173.58c3.26-1.52,6.63-1.21,7.53.71s-1,4.71-4.29,6.23-6.63,1.2-7.53-.71S56.15,175.1,59.41,173.58Z"/><path class="cls-8" d="M74.62,157.15c2.37-5.05,5.43-8.82,7.45-8.15s2.07,5.88-.51,11.39-6.65,8.81-8.43,7.7S72.26,162.2,74.62,157.15Z"/><path class="cls-9" d="M57.89,159.15V82c0-15.57,6.93-29.64,17.59-35.75l38.7-22.17c46.33-26.53,98.7-26.53,145,0l38.71,22.17C308.57,52.33,315.49,66.4,315.49,82v77.18"/><path class="cls-10" d="M312.46,80.79v19.39c-49.22-48.34-115.1-74.62-177.69-59.93-17.18,4-34.87,11.84-45.35,28.33-13.07,20.57-10.54,52.57,5.53,70C106.58,151.12,122,155,137.89,158h-83V80.79c0-15.58,6.92-29.65,17.59-35.76l38.7-22.17c46.32-26.52,98.7-26.52,145,0L294.88,45C305.55,51.14,312.46,65.21,312.46,80.79Z"/><path class="cls-3" d="M315.3,163.91a4.5,4.5,0,0,1-4.5-4.5V82.23c0-14-6-26.52-15.32-31.85L256.77,28.22c-22.36-12.81-46-19.31-70.27-19.31s-47.91,6.5-70.27,19.31L77.52,50.38C68.22,55.71,62.2,68.22,62.2,82.23v77.18a4.5,4.5,0,0,1-9,0V82.23c0-17.18,7.79-32.75,19.85-39.66l38.7-22.16c47.51-27.21,102-27.21,149.5,0L300,42.57C312,49.48,319.8,65.05,319.8,82.23v77.18A4.49,4.49,0,0,1,315.3,163.91Z"/><path class="cls-11" d="M358.91,168a188.7,188.7,0,0,1-7.86,25.11c-1.65,4.39-15.77,41.8-14.06,43.41-34-31.93-86.3-52.37-145-52.37S81.13,204.56,47.14,236.44c-12.27-38.2-42.51-96.29-6.57-129,10.27-9.35,23.35-13.28,36.1-16.5,72.69-18.36,148.62-20.81,221.57-3.88,12,2.79,24,6.15,34.87,12.74s20.46,16.78,25,30C362.43,142.3,361.73,155.35,358.91,168Z"/><path class="cls-12" d="M61.88,102.48C69,96,77.49,92.12,86.27,89.28q-4.09,1-8.18,2c-12.75,3.22-25.83,7.15-36.1,16.5-35.94,32.71-5.7,90.8,6.57,129a163.52,163.52,0,0,1,17-13.88C52.14,185,28.54,132.83,61.88,102.48Z"/><path class="cls-13" d="M104.58,105a1,1,0,0,1-.19-2c6.25-1.26,12.88-2.39,19.71-3.36a1,1,0,0,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,104.58,105Z"/><path class="cls-13" d="M57.19,120.46a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.63-6.73,35.7-12.92a1,1,0,1,1,.48,1.94c-24.75,6.11-35,12.6-35.1,12.66A1,1,0,0,1,57.19,120.46Z"/><path class="cls-13" d="M220.93,96.32h-.09c-6.83-.61-13.48-1-19.79-1.22a1,1,0,0,1,0-2h0c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="cls-13" d="M152,99.31a1,1,0,0,1-.16-2l5.35-.91c10.3-1.78,21-3.62,31.71-3.45a1,1,0,1,1,0,2c-10.58-.16-21.13,1.66-31.34,3.42l-5.37.91Z"/><path class="cls-13" d="M326.33,116.8a1,1,0,0,1-.33-.06c-6.55-2.35-13-4.47-19.07-6.29a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.25-.67c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="cls-13" d="M295.34,107.21a1,1,0,0,1-.24,0C270.44,101,258.75,102,258.64,102a1,1,0,1,1-.19-2c.48,0,12.09-1.07,37.13,5.24a1,1,0,0,1-.24,2Z"/><path class="cls-13" d="M105.15,117.87a1,1,0,0,1-.19-2c6.24-1.26,12.88-2.39,19.71-3.36a1,1,0,1,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,105.15,117.87Z"/><path class="cls-13" d="M57.76,133.34a1,1,0,0,1-.54-1.84c.42-.27,10.63-6.73,35.7-12.92a1,1,0,0,1,.48,1.94c-24.69,6.1-35,12.6-35.1,12.66A1,1,0,0,1,57.76,133.34Z"/><path class="cls-13" d="M221.5,109.2h-.09c-6.83-.61-13.49-1-19.79-1.22a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.33.2,13,.62,19.89,1.23a1,1,0,0,1-.08,2Z"/><path class="cls-13" d="M152.57,112.24a1,1,0,0,1-.35-1.94c.46-.17,11.58-4.16,37.21-4.46a1,1,0,0,1,1,1,1,1,0,0,1-1,1c-25.23.3-36.44,4.3-36.55,4.34A1,1,0,0,1,152.57,112.24Z"/><path class="cls-13" d="M326.9,129.68a1,1,0,0,1-.34-.06c-6.54-2.35-12.95-4.47-19.06-6.29a1,1,0,0,1,.58-1.92c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="cls-13" d="M295.91,120.09a1,1,0,0,1-.24,0c-24.72-6.23-36.35-5.2-36.46-5.19a1,1,0,0,1-.2-2c.49,0,12.09-1.07,37.14,5.24a1,1,0,0,1-.24,2Z"/><path class="cls-13" d="M104,132.4a1,1,0,0,1-1-.8,1,1,0,0,1,.78-1.18c6.25-1.25,12.88-2.39,19.71-3.36a1,1,0,0,1,1.14.85,1,1,0,0,1-.85,1.13c-6.8,1-13.4,2.09-19.61,3.34A.65.65,0,0,1,104,132.4Z"/><path class="cls-13" d="M56.62,147.87a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.64-6.73,35.71-12.92a1,1,0,0,1,1.21.73,1,1,0,0,1-.74,1.21c-24.74,6.11-35,12.6-35.1,12.66A1,1,0,0,1,56.62,147.87Z"/><path class="cls-13" d="M220.36,123.73h-.09c-6.83-.62-13.48-1-19.78-1.23a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="cls-13" d="M151.43,126.77a1,1,0,0,1-.35-1.94c.47-.17,11.58-4.16,37.22-4.46h0a1,1,0,0,1,0,2c-25.29.3-36.43,4.3-36.54,4.34A1.07,1.07,0,0,1,151.43,126.77Z"/><path class="cls-13" d="M325.77,144.22a1,1,0,0,1-.34-.06c-6.54-2.36-12.95-4.48-19.06-6.3a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.24-.67c6.14,1.84,12.59,4,19.16,6.33a1,1,0,0,1-.33,1.95Z"/><path class="cls-13" d="M294.77,134.62l-.24,0c-24.65-6.21-36.35-5.2-36.46-5.19a1,1,0,0,1-.19-2c.48,0,12.08-1.07,37.14,5.24a1,1,0,0,1-.25,2Z"/><path class="cls-8" d="M134.28,55.94a21.68,21.68,0,0,1,9.13,1c2.27.86,3.52,2,3.38,3s-1.6,1.81-3.74,2.36a52.83,52.83,0,0,1-8.1,1.2,52.47,52.47,0,0,1-8.19.23c-2.2-.16-3.76-.65-4.09-1.66s.7-2.36,2.79-3.59A21.52,21.52,0,0,1,134.28,55.94Z"/><path class="cls-8" d="M189.16,54c14.08.87,25.23,3.94,25,6s-11.61,2.48-25.44,1.63S163.63,59,163.64,56.91,175.09,53.15,189.16,54Z"/><path class="cls-3" d="M45,244.59l-2.18-6.77c-1.91-6-4.28-12.43-6.78-19.29-13.82-37.8-31-84.85,1.47-114.42C48.67,94,62.43,89.89,75.57,86.57c75.35-19,152.7-20.37,223.69-3.89C311.33,85.48,324.07,89,335.45,96c12.88,7.83,22.44,19.32,26.92,32.35,4.08,11.86,4.39,25.17.93,40.67h0a191.33,191.33,0,0,1-8,25.71l-.14.4c-10,26.58-13.67,38.62-13.77,40.85a3.89,3.89,0,0,0-1.28-2.7l-6.16,6.56C299.3,207.29,247.58,188.65,192,188.65S84.83,207.26,50.21,239.73ZM197.37,80.24A489.6,489.6,0,0,0,77.77,95.3c-12,3-24.58,6.73-34.17,15.47-28,25.5-12,69.4.92,104.68,1.65,4.52,3.25,8.88,4.7,13.07,36.12-31.14,87.71-48.87,142.8-48.87,54.72,0,106,17.49,142,48.22,1-3.25,2.37-7.53,4.18-12.73,2.27-6.56,5.11-14.37,8.44-23.22l.15-.39A184.81,184.81,0,0,0,354.52,167c3.08-13.83,2.87-25.54-.66-35.78-3.8-11.05-12-20.85-23.09-27.6-9.72-5.91-20.44-9.15-33.54-12.19A441.79,441.79,0,0,0,197.37,80.24ZM358.91,168h0Z"/><path class="cls-8" d="M316.3,283a85,85,0,0,1-.17-10.5c.2-2.77.72-4.63,1.76-4.88s2.37,1.22,3.57,3.91a35.67,35.67,0,0,1,1.44,22.17c-.84,2.82-2,4.45-3,4.34s-1.82-1.89-2.38-4.61A83.3,83.3,0,0,1,316.3,283Z"/><path class="cls-8" d="M310.41,253a8.45,8.45,0,0,1-.74-3.45,4,4,0,0,1,1-2.95,2.9,2.9,0,0,1,3.26-.34,7.5,7.5,0,0,1,3.8,8.75,2.92,2.92,0,0,1-2.48,2.15,4.08,4.08,0,0,1-2.87-1.26A8.5,8.5,0,0,1,310.41,253Z"/><path class="cls-8" d="M300.23,237.15c-1-1.27-.45-3.35,1.22-4.65s3.82-1.33,4.82-.06.44,3.36-1.23,4.66S301.22,238.42,300.23,237.15Z"/><path class="cls-8" d="M258.7,168A36.44,36.44,0,0,1,271.61,173c3,2,4.41,3.89,3.92,4.8s-2.75.81-6,.2-7.55-1.61-12.31-2.55-9.11-1.61-12.36-2.27-5.37-1.37-5.47-2.44,1.91-2.24,5.43-3A36.43,36.43,0,0,1,258.7,168Z"/><path class="cls-8" d="M296.63,182.34a5.05,5.05,0,0,1,2.82,2.8,3,3,0,0,1-.45,3,4.48,4.48,0,0,1-2.58,1.46,4.48,4.48,0,0,1-4.87-2,4.37,4.37,0,0,1-.75-2.87,3,3,0,0,1,1.85-2.44A5.05,5.05,0,0,1,296.63,182.34Z"/><path class="cls-8" d="M320.06,194.45a16.53,16.53,0,0,1,5.18,5.14c1,1.69,1.19,3.15.49,3.94s-2.13.8-3.88.28a28.09,28.09,0,0,1-11.07-7.19c-1.19-1.39-1.77-2.7-1.32-3.67s1.85-1.37,3.8-1.15A16.57,16.57,0,0,1,320.06,194.45Z"/><circle class="cls-3" cx="133.38" cy="300.14" r="22.91"/><circle class="cls-1" cx="143.6" cy="283.11" r="12.7"/><circle class="cls-8" cx="124.18" cy="308.69" r="5.28"/><circle class="cls-3" cx="239.38" cy="305.14" r="22.91"/><circle class="cls-1" cx="249.6" cy="288.11" r="12.7"/><circle class="cls-8" cx="230.18" cy="313.69" r="5.28"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg
new file mode 100644
index 00000000..c4c17223
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.47 510.81"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#ceea57;}.cls-3{fill:#213346;}.cls-4{fill:#95bc4a;}.cls-5{fill:#bfe1ee;}.cls-11,.cls-6{fill:#fff;}.cls-7{fill:#f5a2c6;}.cls-8{fill:#d676a3;}.cls-9{fill:#f9637c;}.cls-10{fill:#cc3656;}.cls-11{opacity:0.5;}.cls-12{fill:#f6aecd;}.cls-13{fill:#86b9f8;}.cls-14{fill:#7662fa;}</style></defs><title>Asset 16</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="191.74" cy="457.95" rx="179.73" ry="52.86"/><circle class="cls-2" cx="334.64" cy="271.05" r="40.33"/><path class="cls-3" d="M334.64,314.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,334.64,314.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,334.64,233.83Z"/><path class="cls-3" d="M356.42,273.33a3,3,0,0,1-2.93-2.41c-3.92-19.6-23.82-16.39-24.67-16.24a3,3,0,0,1-1.05-5.91c9.15-1.63,27.53.65,31.6,21a3,3,0,0,1-2.35,3.53A3.05,3.05,0,0,1,356.42,273.33Z"/><circle class="cls-2" cx="44.83" cy="269.05" r="40.33"/><path class="cls-4" d="M76.23,244.43a40.32,40.32,0,0,0-55.79,55.79,40.33,40.33,0,1,1,55.79-55.79Z"/><path class="cls-3" d="M44.83,312.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,44.83,312.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,44.83,231.83Z"/><path class="cls-2" d="M188.76,62h2.72A142.34,142.34,0,0,1,333.82,204.34v92.6a143.7,143.7,0,0,1-143.7,143.7h0a143.7,143.7,0,0,1-143.7-143.7v-92.6A142.34,142.34,0,0,1,188.76,62Z"/><path class="cls-4" d="M208.37,437.76a143.43,143.43,0,0,1-19.77,1.37c-79,0-143.71-64.66-143.71-143.71V200.94c0-77.25,63.22-140.46,140.47-140.46h6.48a136.88,136.88,0,0,1,16.53,1C138.82,69.71,84.43,129.29,84.43,200.94v94.48C84.43,367.76,138.58,428.06,208.37,437.76Z"/><path class="cls-3" d="M188.6,445.15A148.62,148.62,0,0,1,40.39,296.94v-92.6A147.26,147.26,0,0,1,187.24,57.5H190A147.26,147.26,0,0,1,336.8,204.34v92.6A148.62,148.62,0,0,1,188.6,445.15ZM187.24,66.5A138.26,138.26,0,0,0,49.39,204.34v92.6a139,139,0,0,0,237.52,98.31,138.2,138.2,0,0,0,40.89-98.31v-92.6A138.24,138.24,0,0,0,190,66.5Z"/><path class="cls-5" d="M319.19,272.92v.18C318.65,273.12,318.86,273,319.19,272.92Z"/><path class="cls-3" d="M20.84,273.92a2.31,2.31,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.7-13.89,7.61-20.76,12.26-24.07a20.44,20.44,0,0,1,10.38-4,3,3,0,0,1,.23,6c-.63,0-14.25,1.06-16.92,22.76A3,3,0,0,1,20.84,273.92Z"/><path class="cls-3" d="M190.57,306.5a3,3,0,0,1-3-3V256.91a3,3,0,1,1,6,0V303.5A3,3,0,0,1,190.57,306.5Z"/><path class="cls-6" d="M40.94,365.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S40.22,369.1,40.94,365.6Z"/><path class="cls-6" d="M42.16,403.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,42.16,403.44Z"/><path class="cls-7" d="M137.75,2.51a33.77,33.77,0,0,0-24.37,10.94,34,34,0,0,0-41.26,46,34,34,0,1,0,38.79,54.36,34,34,0,0,0,54.73-27.46c0-.39,0-.78-.06-1.17a34,34,0,1,0,7.68-66.91,34.46,34.46,0,0,0-5.87.62A33.92,33.92,0,0,0,137.75,2.51Z"/><path class="cls-8" d="M89.32,49.48a33.74,33.74,0,0,0,2.8,12.94,34,34,0,0,0,6.82,64,34.92,34.92,0,0,1-6.91.82A34,34,0,0,1,77.12,62.42a34,34,0,0,1,30.57-47.49,34.27,34.27,0,0,1,8.1.82A34,34,0,0,0,89.32,49.48Z"/><path class="cls-3" d="M86.42,130.69A38.47,38.47,0,0,1,66.54,59.3,38.47,38.47,0,0,1,102.61,9.43a38.62,38.62,0,0,1,9.42,1A38,38,0,0,1,137.67,0h0a38.68,38.68,0,0,1,31.88,16c1.2-.14,2.42-.22,3.63-.24a38.47,38.47,0,0,1,28.34,65.18,38.17,38.17,0,0,1-27,11.75,40.18,40.18,0,0,1-4.53-.19,38.46,38.46,0,0,1-58.66,29.07,38.09,38.09,0,0,1-24.22,9.13ZM103.29,18.42h-.53a29.45,29.45,0,0,0-28.94,30,29,29,0,0,0,2.43,11.22l1.75,4L74,65.5a29.47,29.47,0,1,0,33.65,47.16l2.8-2.92,3.2,2.48A29.45,29.45,0,0,0,161.14,88.4c0-.29,0-.58,0-.87l-.53-6.29,6.12,1.55a29.47,29.47,0,1,0,6.65-58.05,28.71,28.71,0,0,0-5.08.54l-3.08.6-1.63-2.68A29.59,29.59,0,0,0,137.83,9h0a29.21,29.21,0,0,0-21.14,9.5l-1.93,2.09L112,19.75A29.32,29.32,0,0,0,103.29,18.42ZM137.75,4.51h0Z"/><polygon class="cls-3" points="225.1 107.59 226.73 112.26 221.44 110.12 233.38 107.94 235.94 107.48 236.58 109.21 243.09 126.94 231.9 111.73 235.06 112.98 224.2 118.39 221.46 119.76 218.98 116.27 215.87 111.89 194.8 82.23 205.66 66.03 225.1 107.59"/><polygon class="cls-3" points="81.49 154.74 81.53 157.94 84.27 155.47 76.54 156.78 74.89 157.06 74.88 158.25 74.82 170.43 78.27 158.75 76.63 160.2 84.41 161.1 86.37 161.33 87.11 158.67 88.04 155.33 95.65 128.68 84.16 125.25 81.49 154.74"/><polygon class="cls-3" points="197.95 122.51 197.9 126.47 194.51 123.42 204.09 125.03 206.15 125.38 206.16 126.86 206.23 141.99 201.95 127.48 203.99 129.29 194.33 130.4 191.89 130.68 190.97 127.38 189.82 123.23 180.37 90.14 194.63 85.89 197.95 122.51"/><polygon class="cls-3" points="149.78 144.16 144.65 143.61 144.93 142.63 148.61 118.63 135.56 121.73 137.8 143.28 138.05 145.98 138.25 148.13 140.4 147.9 147.64 147.1 148.59 155.26 151.23 145.32 151.49 144.35 149.78 144.16"/><circle class="cls-3" cx="241.03" cy="227.35" r="41.06"/><rect class="cls-9" x="238.09" y="225.78" width="15.99" height="86.04" rx="6.5"/><path class="cls-10" d="M249.78,310.38a5.81,5.81,0,0,1-3.69,1.43c-4.42,0-8-5.69-8-12.71V238.48c0-7,3.58-12.7,8-12.7a5.8,5.8,0,0,1,3.69,1.42c-2.56,2.13-4.31,6.38-4.31,11.28V299.1C245.47,304,247.22,308.25,249.78,310.38Z"/><path class="cls-3" d="M246.09,314.81a11,11,0,0,1-11-11v-70a11,11,0,0,1,22,0v70A11,11,0,0,1,246.09,314.81Zm0-86a5,5,0,0,0-5,5v70a5,5,0,1,0,10,0v-70A5,5,0,0,0,246.09,228.78Z"/><path class="cls-6" d="M296.05,131.36a75.23,75.23,0,0,1,6,11c.74,1.78,1.43,3.47,1.95,5.11s1,3.16,1.31,4.57c1.35,5.68,1.2,9.35.22,9.6-2.16.52-6.69-12.4-15.84-26.1-9-13.81-19.06-23.07-17.73-24.84.61-.81,4.05.51,8.73,4,1.17.87,2.42,1.86,3.69,3s2.58,2.43,3.93,3.81A76.62,76.62,0,0,1,296.05,131.36Z"/><path class="cls-6" d="M313.3,178.31c.48,2.42-.82,4.71-2.89,5.12s-4.15-1.22-4.62-3.64.82-4.72,2.9-5.13S312.83,175.89,313.3,178.31Z"/><path class="cls-6" d="M317,202.62c.54,4.11-.73,7.66-2.82,7.94s-4.24-2.84-4.77-6.94.73-7.66,2.83-7.94S316.48,198.52,317,202.62Z"/><circle class="cls-11" cx="229.78" cy="343.53" r="5.28"/><path class="cls-12" d="M138,52.68a29,29,0,0,0-19.37-.87c-4.89,1.53-7.35,3.77-7.61,3.46-.11-.12.35-.84,1.49-1.84A19.53,19.53,0,0,1,118,50.11a27.32,27.32,0,0,1,9.38-1.92,29,29,0,0,1,11.56,2.13,27.34,27.34,0,0,1,9.7,6.66,27.9,27.9,0,0,1,5.25,8,23.39,23.39,0,0,1,1.74,6.16c.19,1.49.1,2.34-.06,2.36-.42.07-.9-3.21-3.31-7.74a30.26,30.26,0,0,0-5.31-7.14A27.38,27.38,0,0,0,138,52.68Z"/><path class="cls-12" d="M108.26,80.3a20.07,20.07,0,0,1,5.12-6.47,17.38,17.38,0,0,1,5.9-3.25,12.35,12.35,0,0,1,4.47-.59c1.06.08,1.62.29,1.61.45,0,.42-2.29.4-5.44,1.83a19,19,0,0,0-5,3.33,20.41,20.41,0,0,0-4.38,5.83,30,30,0,0,0-2.72,13.22c0,3.56.27,5.81-.11,5.89s-1.22-2.07-1.69-5.78a27.59,27.59,0,0,1,0-6.59A24.21,24.21,0,0,1,108.26,80.3Z"/><path class="cls-12" d="M140.43,20.33a25.58,25.58,0,0,1,7.06,2.46,15.34,15.34,0,0,1,4.81,3.92,8.61,8.61,0,0,1,1.76,3.83c.16,1,0,1.54-.14,1.56-.41.07-.75-2-3-4.19a16.3,16.3,0,0,0-4.52-3,28.82,28.82,0,0,0-6.48-2.05,20.5,20.5,0,0,0-6.69-.31,13.86,13.86,0,0,0-5.09,1.69c-2.71,1.55-3.75,3.39-4.09,3.2-.15-.07-.09-.63.35-1.52a9.55,9.55,0,0,1,2.73-3.17,13.55,13.55,0,0,1,5.72-2.52A19.9,19.9,0,0,1,140.43,20.33Z"/><path class="cls-12" d="M186.89,58.43a31.33,31.33,0,0,0,1.87-9.7,11.92,11.92,0,0,0-2.48-7.23,38.35,38.35,0,0,0-3.72-4.12c-.95-1-1.44-1.54-1.33-1.68s.8.18,2,.91a22.1,22.1,0,0,1,4.49,3.76,12.88,12.88,0,0,1,3.43,8.27,30.14,30.14,0,0,1-1.79,10.58,20.67,20.67,0,0,1-2.38,5.16,14,14,0,0,1-3.87,3.81,16.85,16.85,0,0,1-8.49,2.65,18,18,0,0,1-5.85-.68c-1.33-.39-2-.81-1.95-1,.1-.41,3,.43,7.63-.16a16.46,16.46,0,0,0,7.33-2.79A12.18,12.18,0,0,0,184.85,63,19.79,19.79,0,0,0,186.89,58.43Z"/><path class="cls-12" d="M85.1,87.16A13.11,13.11,0,0,1,81,78.56c-.12-2.47.54-3.89.85-3.83s.39,1.48.94,3.56A14,14,0,0,0,94.08,88.92c2.11.43,3.54.36,3.61.74s-1.3,1-3.78,1.06A13.1,13.1,0,0,1,85.1,87.16Z"/><path class="cls-12" d="M133,92.83a24.28,24.28,0,0,0,4.74-.43,20,20,0,0,0,2-.52,16.5,16.5,0,0,0,1.73-.6c2.1-.83,3.36-1.6,3.61-1.3s-.66,1.54-2.78,2.91a13.24,13.24,0,0,1-1.81,1,16.71,16.71,0,0,1-2.21.82,18.08,18.08,0,0,1-10.7-.22,16.23,16.23,0,0,1-2.18-.92,11.2,11.2,0,0,1-1.76-1c-2.06-1.46-2.88-2.81-2.66-3s1.49.54,3.55,1.46c.52.22,1.08.47,1.71.67s1.3.4,2,.6A24.26,24.26,0,0,0,133,92.83Z"/><path class="cls-12" d="M104.17,42.92a20.9,20.9,0,0,1,4-4,17.67,17.67,0,0,1,2.09-1.33,12.45,12.45,0,0,1,2-.9c2.48-.93,4.14-.86,4.19-.55s-1.36.94-3.41,2.17a17.51,17.51,0,0,0-1.62,1.08c-.58.38-1.13.88-1.74,1.37a23.08,23.08,0,0,0-6,8.07c-.29.72-.6,1.4-.8,2.06s-.4,1.29-.55,1.87c-.59,2.31-.7,3.86-1.09,3.89s-.86-1.53-.7-4.17a13.28,13.28,0,0,1,.3-2.13,16.39,16.39,0,0,1,.66-2.4A20.41,20.41,0,0,1,104.17,42.92Z"/><path class="cls-12" d="M163.78,45.73a23.94,23.94,0,0,0,1.71-3.89,22.19,22.19,0,0,0,.81-3.4c.32-2,.34-3.32.72-3.38s.95,1.21,1.09,3.46a14.52,14.52,0,0,1-.35,3.94A16.69,16.69,0,0,1,163,50.82a14.36,14.36,0,0,1-3.2,2.32c-2,1-3.43,1.14-3.54.85s1-1.06,2.54-2.35a22.65,22.65,0,0,0,2.5-2.45A23.79,23.79,0,0,0,163.78,45.73Z"/><path class="cls-6" d="M173.73,70.51a21.63,21.63,0,0,0,8.47-4.27c1.93-1.57,3-3,3.68-2.73.32.11.49.65.41,1.55a8.73,8.73,0,0,1-1.32,3.5,16.46,16.46,0,0,1-10,6.9,22.68,22.68,0,0,1-11.76-.33c-2.83-.87-4.37-1.93-4.22-2.6s2-.89,4.71-1A47.09,47.09,0,0,0,173.73,70.51Z"/><path class="cls-6" d="M186.07,51.39c.2-1.77,1.49-3.08,2.89-2.93s2.38,1.72,2.19,3.49-1.49,3.08-2.89,2.92S185.88,53.16,186.07,51.39Z"/><path class="cls-6" d="M183.86,41.8a2.6,2.6,0,0,1,4.14-3,2.61,2.61,0,0,1-4.14,3Z"/><path class="cls-13" d="M330,302c20.28,37,13.83,73.05,14.54,107.47l-11-12.15a118.62,118.62,0,0,1-28.8,57.47,42.38,42.38,0,0,0-13.34-14.7A89.09,89.09,0,0,1,263.9,487a35.8,35.8,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29,23.17,23.17,0,0,0,2.52-22.37c-11.17,19-43.3,19.54-55.14,1-.82,3.75-.22,8.67,3.61,9-16.11,2.48-30.85-4.3-41.93-16.25a27.05,27.05,0,0,0,9,17.56,49.18,49.18,0,0,1-40.92-27.17c-20.77,1.29-41.53-12.94-47.8-32.79a9.91,9.91,0,0,1-2.59,9.51c-35.89-18.22-34-99.94-10.46-126.89,0,0,49.48,7.94,79.51,30.74,6.43,4.88,14.43-4.6,23.27-7.4,17.51-5.53,38.32-11.15,56.88-11.22,23.39-.1,35.9,29.56,50.89,15.49C298.57,293.65,329.64,301.39,330,302Z"/><path class="cls-14" d="M345.91,405.22l-11-12.16a118.76,118.76,0,0,1-28.81,57.48,42.3,42.3,0,0,0-13.34-14.7,89,89,0,0,1-27.51,46.89,35.83,35.83,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29A23.2,23.2,0,0,0,236,465.06c-11.17,19-43.3,19.54-55.14,1-.83,3.75.11,17.55,3.94,17.87-16.1,2.48-31.18-13.18-42.26-25.13.64,6.7,2.31,18.78,7.36,23.23-17.16-.88-31.84-17.37-39.3-32.84-20.78,1.29-41.53-12.95-47.8-32.79a9.91,9.91,0,0,1-2.58,9.51c-12.41-6.3-20.59-20-25-36.31,15.87,11.57,34.55,19.51,53,26.63,12.54,4.82,25.24,9.42,38.46,11.83,12.82,2.33,25.92,2.56,39,2.79,36.17.62,73.84.94,106.53-14.59,9.37-4.45,19.26-12.08,18.93-22.46-.37-11.86-13.35-18.63-24.42-22.88,23.58-3.5,42.91-21.78,53.67-43.05a131.59,131.59,0,0,0,9.48-25.3L333,305C342.73,339,345.19,370.81,345.91,405.22Z"/><path class="cls-3" d="M253.41,500.93l7.73-18.34a31,31,0,0,0,2.25-14.75,61,61,0,0,1-28.12,25.32l-15.22,6.65,9.79-13.42a18.51,18.51,0,0,0,3.37-9.49,38.29,38.29,0,0,1-24.46,8.83,39.29,39.29,0,0,1-20.87-5.26c1,5.16.93,9.73-3.16,11.61l-1.89.86-1.88-.86c-13-6-23.27-12.19-31.89-19.33,1.42,5.57,3,7.6,3.8,8.31l9.71,8.53-12.91-.66c-18.37-.93-33.64-18.1-41.8-33.56-17.77,0-34.88-10-44.23-24.92l-.28.28L61,433l-2.87-1.46c-13.73-7-23.61-22.79-27.84-44.54-6.17-31.81.86-70.33,16-87.71a4.5,4.5,0,1,1,6.78,5.92c-13.31,15.26-19.57,51.18-14,80.07,3.26,16.82,10.08,29.4,19.38,36a5.07,5.07,0,0,0-.1-2.09l8.63-2.54c5.62,17.79,24.6,30.81,43.23,29.66l3-.19,1.31,2.72c7.38,15.29,17.47,24.65,26.45,28.73a83.68,83.68,0,0,1-3-16.73l-1.27-13.24,9.05,9.75c8.53,9.2,18.86,16.65,33,23.73-.31-1.46-.69-2.95-1-4-1.25-5-1.93-7.92-1.4-10.33l2.33-10.64,5.86,9.18c4.71,7.38,13.68,11.69,24,11.5s19.08-4.81,23.52-12.35l4.51-7.66,3.51,8.17a27.18,27.18,0,0,1,2,13.86A51.87,51.87,0,0,0,260,453.4l3.32-10.56,5,9.88a40,40,0,0,1,4.21,17.36,84.32,84.32,0,0,0,15.89-33.6l1.43-6.48,5.49,3.72a47,47,0,0,1,11.36,10.93,115.09,115.09,0,0,0,23.84-50.82l1.7-8.88,10,11.05c2-35.79-3.31-65-16.46-91.39a4.5,4.5,0,1,1,8-4C349,331,354.25,364.9,350.39,407.23l-.93,10.24-12.07-13.36a122.34,122.34,0,0,1-27.94,51.07l-4.26,4.65-3-5.53a37.69,37.69,0,0,0-6.81-9,93.54,93.54,0,0,1-27.08,42.37Z"/><path class="cls-2" d="M159.69,399.62a9.74,9.74,0,0,1-9.71-9.71V352.76a9.74,9.74,0,0,1,9.71-9.71h68a9.75,9.75,0,0,1,9.72,9.71v37.15a9.75,9.75,0,0,1-9.72,9.71"/><path class="cls-4" d="M239,356.81v11.52a9.75,9.75,0,0,0-8.91-5.85h-68a9.74,9.74,0,0,0-9.71,9.71v25.63a9.65,9.65,0,0,1-.81-3.87V356.81a9.75,9.75,0,0,1,9.71-9.72h68A9.76,9.76,0,0,1,239,356.81Z"/><path class="cls-3" d="M193.29,341.91c7,0,13.87,0,20.49.1l9.74.12,2.37,0,1.18,0h.33l.43,0,.85.06a14.26,14.26,0,0,1,6.29,2.29,14.06,14.06,0,0,1,6.23,10.73l0,.78v.65l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.45,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44-.05.66s-.05.52-.08.78a11.57,11.57,0,0,1-.74,3,11.41,11.41,0,0,1-3,4.24,9.64,9.64,0,0,1-6.23,2.57,4.68,4.68,0,0,1-1.7-.26c-.38-.14-.55-.3-.55-.46s.17-.34.49-.52l1.35-.66a10.23,10.23,0,0,0,3.89-3.22,8.51,8.51,0,0,0,1.34-3.09,8,8,0,0,0,.12-1.84l0-.5c0-.22,0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.43l0-.3a5.41,5.41,0,0,0-4.95-4.71h-.73l-1.18,0-2.37,0-9.74.12c-6.62.06-13.47.1-20.49.1s-13.87,0-20.48-.1l-9.74-.12-2.38,0-1.18,0h-.73a5.42,5.42,0,0,0-4.94,4.71l0,.3,0,.16v.27l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.46,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44,0,.66l0,.5a7.43,7.43,0,0,0,.13,1.84,8.18,8.18,0,0,0,1.34,3.09,10.21,10.21,0,0,0,3.88,3.22l1.35.66c.32.18.5.35.5.52s-.18.32-.55.46A4.74,4.74,0,0,1,157,404a9.6,9.6,0,0,1-6.22-2.57,11.32,11.32,0,0,1-3-4.24,12,12,0,0,1-.74-3c0-.26-.06-.57-.08-.78s0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.65l0-.78a14.08,14.08,0,0,1,6.22-10.73,14.31,14.31,0,0,1,6.29-2.29l.86-.06.43,0h.32l1.18,0,2.38,0,9.74-.12C179.42,342,186.28,341.91,193.29,341.91Z"/><path class="cls-3" d="M60.39,322a37.09,37.09,0,0,0,.47,9,37.78,37.78,0,0,0,2.92,8.91,39.35,39.35,0,0,1-5.49-8A40.74,40.74,0,0,1,55,322.37a44.5,44.5,0,0,1-1-10.27,49.21,49.21,0,0,1,.4-5.25,33.42,33.42,0,0,1,1.13-5.44l10,4.36a23.19,23.19,0,0,0-1.89,3.53,41.21,41.21,0,0,0-1.54,4A38.35,38.35,0,0,0,60.39,322Z"/><path class="cls-3" d="M75.3,330.15c.78,7.09,3.93,14.18,8.49,20.33A45.39,45.39,0,0,1,70,331.43,37.16,37.16,0,0,1,67.79,319,33.53,33.53,0,0,1,70.32,306l9.59,5.16C76.2,316,74.51,323.12,75.3,330.15Z"/><path class="cls-3" d="M102.41,335.48A49,49,0,0,0,109,355a51.46,51.46,0,0,1-11.83-18.14,54.08,54.08,0,0,1-3.61-22.51l10.73,1.85A45.78,45.78,0,0,0,102.41,335.48Z"/><path class="cls-3" d="M279.1,331.6a25.9,25.9,0,0,1-.28,8.41c-.49,2.14-1.22,3.39-1.88,3.33-1.37-.13-2-5.16-2.7-11.16s-1.3-11,0-11.49c.63-.2,1.64.84,2.61,2.8A25.74,25.74,0,0,1,279.1,331.6Z"/><path class="cls-3" d="M300.7,325.92a34.06,34.06,0,0,1-2.28,11.66c-1.17,2.83-2.4,4.35-3,4.13-1.32-.5.23-7.41.4-15.92s-.91-15.49.43-15.91c.62-.19,1.77,1.39,2.79,4.28A34.18,34.18,0,0,1,300.7,325.92Z"/><path class="cls-3" d="M323.44,322.4a51.55,51.55,0,0,1,.48,8.84,42.08,42.08,0,0,1-.84,7.17c-.86,4-2,6.32-2.66,6.19-1.41-.31-.09-10-1.83-21.5s-5.47-20.53-4.18-21.19c.58-.3,2.31,1.61,4.22,5.24a44.14,44.14,0,0,1,2.79,6.64A53.12,53.12,0,0,1,323.44,322.4Z"/><path class="cls-3" d="M68.8,420.47a39.61,39.61,0,0,1-.25-8.28,35.94,35.94,0,0,1,.5-3.58,25.93,25.93,0,0,1,.76-3c1.14-3.68,2.57-5.64,3.16-5.43s.45,2.52.24,6.05c0,.89-.12,1.85-.12,2.88s0,2.13,0,3.28a59.18,59.18,0,0,0,2.11,14.73c.33,1.1.6,2.17.94,3.14s.63,1.89.92,2.73c1.2,3.32,2,5.46,1.47,5.87s-2.43-1.11-4.56-4.32a23.37,23.37,0,0,1-1.57-2.71,33.94,33.94,0,0,1-1.49-3.3A40.12,40.12,0,0,1,68.8,420.47Z"/><path class="cls-3" d="M99.55,433.75a50.42,50.42,0,0,1-.07-13.35c.45-3.36,1.12-5.4,1.79-5.39s1.24,2.09,1.67,5.4.77,7.81,1.45,12.64c.35,2.41.78,4.67,1.25,6.7.27,1,.47,2,.76,2.85l.38,1.3c.14.41.27.8.39,1.18,1,3,1.81,4.94,1.24,5.37s-2.36-.88-4.34-3.84c-.24-.37-.49-.77-.74-1.18s-.46-.87-.7-1.33a28,28,0,0,1-1.31-3.05A39.4,39.4,0,0,1,99.55,433.75Z"/><path class="cls-3" d="M136.2,440.16c-4-14.35-4.59-26.51-3.28-26.67s4.05,11.36,8,25.35,7.6,25.27,6.32,25.82S140.2,454.53,136.2,440.16Z"/><path class="cls-3" d="M244.41,451.81c1.82-6.05,3.09-11.74,4.22-15.84s2.08-6.65,2.75-6.55.91,2.79.66,7.11a75.23,75.23,0,0,1-2.94,16.7,56.28,56.28,0,0,1-3.52,8.82c-.71,1.29-1.35,2.52-2.1,3.61-.37.54-.71,1.07-1.06,1.56l-1.08,1.38c-2.84,3.46-5.24,4.92-5.69,4.49s.9-2.74,2.8-6.4c.24-.45.48-.93.74-1.43l.74-1.58c.54-1.08,1-2.29,1.55-3.52C242.49,457.64,243.49,454.83,244.41,451.81Z"/><path class="cls-3" d="M273,440.9c1.29-7.37,2-14.28,2.87-19.27s1.74-8,2.41-8,1,3.21,1,8.27a116.76,116.76,0,0,1-1.5,19.83,57.15,57.15,0,0,1-2.95,10.79,40,40,0,0,1-4.24,8.17c-3,4.36-5.79,6.2-6.23,5.76s1.21-3.06,3.23-7.47a65,65,0,0,0,3-7.94A85.72,85.72,0,0,0,273,440.9Z"/><path class="cls-3" d="M301.86,422.49c1.43-6,2.41-11.53,3.33-15.56s1.76-6.53,2.43-6.46,1,2.67,1,6.86a74.69,74.69,0,0,1-2,16.31,56.91,56.91,0,0,1-2.88,8.73c-.61,1.29-1.15,2.53-1.8,3.62-.31.55-.6,1.09-.91,1.59l-.95,1.41c-2.48,3.54-4.67,5.16-5.16,4.77s.59-2.76,2.14-6.45l.6-1.45q.3-.76.6-1.59c.45-1.08.82-2.28,1.26-3.51C300.32,428.25,301.13,425.46,301.86,422.49Z"/><path class="cls-3" d="M311.64,413.48c1.55-3.78,2.81-7.46,3.86-10.85.48-1.71,1-3.33,1.35-4.87s.75-3,1.06-4.28c1.21-5.28,1.85-8.64,2.57-8.62s1.22,3.49.85,9.12c-.1,1.41-.23,2.95-.5,4.59s-.58,3.38-1,5.21a72.61,72.61,0,0,1-9.28,22.38c-1,1.56-2,3-3,4.36s-2,2.53-2.89,3.59c-3.73,4.24-6.6,6.27-7.06,5.84s1.41-3.32,4.28-7.9c.72-1.15,1.51-2.4,2.29-3.78s1.62-2.84,2.49-4.39C308.34,420.75,310.06,417.25,311.64,413.48Z"/><path class="cls-6" d="M42.94,339.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S42.22,343.1,42.94,339.6Z"/><path class="cls-6" d="M44.16,377.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,44.16,377.44Z"/><path class="cls-3" d="M128.52,338.8H128c-5-.18-8.88-3.13-12-5.51l-.19-.14a150.17,150.17,0,0,0-65.16-28.23A4.5,4.5,0,0,1,52.19,296,159.48,159.48,0,0,1,121.27,326l.19.15c2.35,1.77,4.77,3.61,6.9,3.69s4.58-1.53,7.15-3.22l.75-.49c14.75-9.64,33.89-14.95,53.9-14.95h0c20,0,39.15,5.31,53.9,14.95l.74.48c2.58,1.7,5,3.3,7.15,3.23s4.56-1.92,6.9-3.69l.19-.15A159.59,159.59,0,0,1,328.13,296a4.5,4.5,0,0,1,1.52,8.88,150.17,150.17,0,0,0-65.16,28.23l-.19.14c-3.13,2.38-7,5.33-12,5.51s-9.12-2.53-12.42-4.7l-.71-.47c-27.47-17.94-70.5-17.94-98,0l-.72.47C137.27,336.2,133.32,338.8,128.52,338.8Z"/><path class="cls-3" d="M210.09,385.31h-36a3.5,3.5,0,1,1,0-7h36a3.5,3.5,0,0,1,0,7Z"/><circle class="cls-14" cx="256.32" cy="340.31" r="34.5"/><circle class="cls-6" cx="246.03" cy="330.35" r="40.04"/><circle class="cls-11" cx="250.78" cy="312.53" r="5.28"/><polygon class="cls-3" points="141.26 29.28 141.29 32.05 143.66 29.92 136.97 31.05 135.54 31.29 135.53 32.32 135.48 42.88 138.47 32.75 137.05 34.01 143.79 34.79 145.49 34.99 146.13 32.68 146.93 29.79 152.37 10.18 143.58 3.72 141.26 29.28"/><polygon class="cls-3" points="131.05 92.41 129.84 89.02 133.69 90.55 125.03 92.19 123.17 92.54 122.7 91.28 117.89 78.43 126.08 89.43 123.78 88.53 131.65 84.56 133.64 83.55 135.46 86.07 137.73 89.24 153.18 110.69 145.37 122.52 131.05 92.41"/><circle class="cls-3" cx="123.96" cy="232.98" r="22.91"/><circle class="cls-2" cx="134.18" cy="215.95" r="12.7"/><circle class="cls-6" cx="114.77" cy="241.53" r="5.28"/><circle class="cls-3" cx="242.84" cy="330.2" r="15.77"/><circle class="cls-6" cx="255.89" cy="340.77" r="10.18"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg
new file mode 100644
index 00000000..81145f9b
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.79 532.35"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#e99a4f;}.cls-7{fill:#ce7149;}.cls-8,.cls-9{fill:#fff;}.cls-9{opacity:0.5;}</style></defs><title>Asset 17</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="345.9" cy="275.59" r="41.4"/><path class="cls-2" d="M333.5,312.37a41.4,41.4,0,1,0,0-79.56,41.41,41.41,0,0,1,0,79.56Z"/><circle class="cls-1" cx="45.9" cy="275.59" r="41.4"/><path class="cls-2" d="M55.4,314.37a41.4,41.4,0,1,1,0-79.56,41.41,41.41,0,0,0,0,79.56Z"/><path class="cls-3" d="M45.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,237.27Z"/><path class="cls-3" d="M21.27,281a3.1,3.1,0,0,1-.43,0,3.51,3.51,0,0,1-3.05-3.9c1.77-14.41,7.92-21.55,12.76-25a21.46,21.46,0,0,1,10.88-4.14,3.5,3.5,0,0,1,.28,7c-.65,0-14.28,1.11-17,23A3.5,3.5,0,0,1,21.27,281Z"/><path class="cls-3" d="M33.65,288.21a3.88,3.88,0,0,1-.82-.09,3.5,3.5,0,0,1-2.59-4.22,32.88,32.88,0,0,0,1-11.59,14.61,14.61,0,0,0-4.4-9.21,3.5,3.5,0,1,1,4.65-5.23,21.52,21.52,0,0,1,6.69,13.58,39.36,39.36,0,0,1-1.16,14.07A3.5,3.5,0,0,1,33.65,288.21Z"/><path class="cls-3" d="M345.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.9,237.27Z"/><path class="cls-3" d="M370.52,281a3.5,3.5,0,0,1-3.47-3.07c-2.69-21.94-16.39-23-17-23a3.52,3.52,0,0,1-3.32-3.66,3.47,3.47,0,0,1,3.6-3.34,21.46,21.46,0,0,1,10.88,4.14c4.85,3.45,11,10.59,12.76,25A3.5,3.5,0,0,1,371,281,3,3,0,0,1,370.52,281Z"/><path class="cls-3" d="M358.15,288.21a3.49,3.49,0,0,1-3.4-2.69,39.2,39.2,0,0,1-1.17-14.08,21.56,21.56,0,0,1,6.69-13.57,3.5,3.5,0,1,1,4.66,5.23,14.56,14.56,0,0,0-4.4,9.21,32.42,32.42,0,0,0,1,11.59,3.52,3.52,0,0,1-2.6,4.22A3.72,3.72,0,0,1,358.15,288.21Z"/><path class="cls-1" d="M196.57,61h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,198,449.67h0a147.5,147.5,0,0,1-147.5-147.5v-95A146.1,146.1,0,0,1,196.57,61Z"/><path class="cls-2" d="M216.7,446.7a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C152.26,68.11,96.42,126.84,86.17,192.3a509.6,509.6,0,0,1-13.33,61.87L59.49,300.61C59.49,374.86,145.07,436.74,216.7,446.7Z"/><path class="cls-3" d="M196.41,454.17a152.43,152.43,0,0,1-152-152V207.12A151,151,0,0,1,195,56.52h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM195,65.52a142,142,0,0,0-141.6,141.6v95.05a143.43,143.43,0,0,0,143,143h0a143.43,143.43,0,0,0,143-143V207.12A142,142,0,0,0,197.8,65.52Z"/><path class="cls-4" d="M330.44,277.5v.2C329.89,277.72,330.11,277.59,330.44,277.5Z"/><ellipse class="cls-5" cx="189.64" cy="471.35" rx="179.73" ry="52.86"/><path class="cls-6" d="M340.74,325.56c21.15,38.59,14.42,76.21,15.16,112.11L344.45,425A123.67,123.67,0,0,1,314.4,485a44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87,58.87,58.87,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32,51.33,51.33,0,0,1-42.69-28.35c-21.68,1.35-43.33-13.5-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C20.38,440.24,22.38,355,46.91,326.87c0,0,51.63,8.28,83,32.07,20,15.18,54.48-19.31,83.62-19.43,24.41-.11,37.46,30.85,53.1,16.16C308,316.82,340.38,324.9,340.74,325.56Z"/><path class="cls-7" d="M357.35,433.22,345.9,420.54a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.85,92.85,0,0,1-28.69,48.92,37.38,37.38,0,0,0-1.06-30.87A58.84,58.84,0,0,1,240.05,519a24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.92.11,18.31,4.11,18.65-16.8,2.58-32.53-13.75-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C46.34,448.23,37.8,434,33.19,416.91,49.75,429,69.24,437.27,88.51,444.7c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C354,364.15,356.61,397.32,357.35,433.22Z"/><path class="cls-6" d="M180.3,341l-49.84,18.58-82-37.21a62.33,62.33,0,0,0-12.09,21.43A237,237,0,0,1,86,361.31a244.47,244.47,0,0,1,22.74,12.33c4,2.46,12.45,10.51,17.42,9.89a10.29,10.29,0,0,0,4.12-1.85c45.61-29.33,79.08-30.62,132.55-21.06L237.74,346Z"/><path class="cls-3" d="M261.36,532.35,269.09,514a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65L236.41,518A19.55,19.55,0,0,0,240,507.55c-6.64,5.87-15.71,9.29-25.74,9.47a40.79,40.79,0,0,1-22.06-5.69c1.1,5.49,1.16,10.38-3.1,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.91-33.69-20.51,1.53,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.06c-18.58,0-36.48-10.43-46.17-26.13l-.47.48L60.12,462l-2.88-1.46C43,453.25,32.7,436.8,28.31,414.16,21.88,381,29.19,340.91,45,322.83a4.5,4.5,0,1,1,6.78,5.92c-14.15,16.22-20.57,53-14.61,83.7,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56l8.64-2.54c5.89,18.64,25.8,32.28,45.3,31.07l3-.19,1.32,2.73C123.72,495,134.47,504.86,144,509a85.81,85.81,0,0,1-3.29-17.82L139.42,478l9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.95,7.76,14.36,12.28,25.15,12.09s20-5,24.71-13l4.51-7.66,3.5,8.17a28.27,28.27,0,0,1,2,14.82,54.35,54.35,0,0,0,19.11-26.83L271.21,473l5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.11,88.11,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.76,48.76,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87a127.51,127.51,0,0,1-29.2,53.55l-4.26,4.65-3-5.54a39.94,39.94,0,0,0-7.38-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="cls-1" d="M163.08,427.38a10.16,10.16,0,0,1-10.14-10.13V378.49a10.17,10.17,0,0,1,10.14-10.14H234a10.17,10.17,0,0,1,10.13,10.14v38.76A10.16,10.16,0,0,1,234,427.38"/><path class="cls-2" d="M245.85,382.71v12a10.15,10.15,0,0,0-9.29-6.1H165.61a10.16,10.16,0,0,0-10.14,10.13V425.5a10.1,10.1,0,0,1-.84-4V382.71a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,245.85,382.71Z"/><path class="cls-3" d="M198.13,367.18c7.32,0,14.47,0,21.37.1l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11L248,386c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06.95-.1,1.41,0,.23,0,.46,0,.68s-.05.55-.08.81a12.57,12.57,0,0,1-.77,3.1,12,12,0,0,1-3.1,4.42A10.12,10.12,0,0,1,236,432a4.84,4.84,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.22,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.7,5.7,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.11-21.37.11s-14.47,0-21.37-.11L166.59,377l-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.7,5.7,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07.95-.1,1.41,0,.23,0,.46,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a4.84,4.84,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.42,12.57,12.57,0,0,1-.77-3.1c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11V382l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C183.66,367.21,190.81,367.18,198.13,367.18Z"/><path class="cls-3" d="M59.48,346.35a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.92,50.92,0,0,1,.42-5.48,35.69,35.69,0,0,1,1.17-5.68l10.41,4.56a24.7,24.7,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,59.48,346.35Z"/><path class="cls-3" d="M75,354.9c.81,7.4,4.1,14.8,8.86,21.21a47.35,47.35,0,0,1-14.38-19.87,38.82,38.82,0,0,1-2.31-12.95,35.09,35.09,0,0,1,2.63-13.62l10,5.38C76,340.17,74.21,347.57,75,354.9Z"/><path class="cls-3" d="M103.32,360.47a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,94,338.38l11.2,1.92A47.79,47.79,0,0,0,103.32,360.47Z"/><path class="cls-3" d="M287.66,356.41a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.22,1.71.87,2.72,2.91A27,27,0,0,1,287.66,356.41Z"/><path class="cls-3" d="M310.19,350.49a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,310.19,350.49Z"/><path class="cls-3" d="M333.91,346.82a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,333.91,346.82Z"/><path class="cls-3" d="M68.25,449.13a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.32c0,.92-.12,1.92-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76A75.5,75.5,0,0,0,74.89,456c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A26.15,26.15,0,0,1,72,460.94a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,68.25,449.13Z"/><path class="cls-3" d="M100.32,463a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,100.32,463Z"/><path class="cls-3" d="M138.57,469.67c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S142.74,484.66,138.57,469.67Z"/><path class="cls-3" d="M251.46,481.82c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.38,59.38,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C249.45,487.91,250.5,485,251.46,481.82Z"/><path class="cls-3" d="M281.25,470.44c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.21,68.21,0,0,0,3.11-8.29A89.28,89.28,0,0,0,281.25,470.44Z"/><path class="cls-3" d="M311.39,451.23c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.78-.33.57-.63,1.13-1,1.65l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72c.2-.48.42-1,.64-1.51s.41-1.08.62-1.66c.47-1.12.85-2.38,1.32-3.67C309.79,457.25,310.63,454.34,311.39,451.23Z"/><path class="cls-3" d="M321.6,441.84c1.61-3.95,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76,76,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.43-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C318.16,449.42,320,445.77,321.6,441.84Z"/><path class="cls-8" d="M41.38,364.78c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S40.63,368.42,41.38,364.78Z"/><path class="cls-8" d="M42.64,404.21a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,42.64,404.21Z"/><path class="cls-3" d="M130.55,363.73h-.49c-5.14-.18-9.18-3.24-12.42-5.71l-.2-.15a157,157,0,0,0-68.07-29.49,4.5,4.5,0,0,1,1.52-8.87,166.07,166.07,0,0,1,72,31.19l.2.15c2.46,1.87,5,3.8,7.3,3.89s4.87-1.61,7.58-3.4l.77-.5c15.36-10,35.29-15.56,56.13-15.56h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.25,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,0,1,1.52,8.87,157,157,0,0,0-68.07,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C139.6,361,135.5,363.73,130.55,363.73Z"/><path class="cls-3" d="M195.39,318.4a3.5,3.5,0,0,1-3.5-3.5V268.31a3.5,3.5,0,0,1,7,0V314.9A3.5,3.5,0,0,1,195.39,318.4Z"/><path class="cls-2" d="M209.25,194.71c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.22a103.26,103.26,0,0,1,30,3.06c8,2,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25a118.77,118.77,0,0,0-59.61-10.31"/><path class="cls-6" d="M210.19,183.79c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.65-17-15.81-26.45-20.24a118.64,118.64,0,0,0-59.6-10.32"/><path class="cls-3" d="M294.6,227.53a21.4,21.4,0,0,1-3.68-.35c-4.88-.84-9.33-2.79-13.63-4.67a65.63,65.63,0,0,0-9.91-3.74,99.68,99.68,0,0,0-29-3c-.89,0-1.79.08-2.69.13-7.79.43-17.48,1-24-6.55-6.37-7.32-6.62-18.78-4.9-26.37a3.52,3.52,0,0,1,1.16-1.91,3.48,3.48,0,0,1,2.26-1.14,122,122,0,0,1,61.44,10.63c9.08,4.27,19.64,12.34,27.55,21.06,5.45,6,4.5,10.13,3.44,12.05C301.77,225.25,299.66,227.53,294.6,227.53Zm-51.81-18.82A105.61,105.61,0,0,1,269.13,212a72.87,72.87,0,0,1,11,4.1c4.1,1.8,8,3.49,12,4.2a8.67,8.67,0,0,0,4.3,0c-.08-.54-.6-1.9-2.43-3.91-7.32-8.08-17-15.53-25.34-19.44a115.35,115.35,0,0,0-55.46-10.2c-.91,6.15-.12,13.61,3.76,18.07,4.29,4.93,11.12,4.55,18.35,4.15l2.78-.14C239.66,208.75,241.23,208.71,242.79,208.71Z"/><path class="cls-2" d="M183.07,186.43c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21A103.64,103.64,0,0,0,125,218c-8,2-15.14,6.95-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.31"/><path class="cls-6" d="M178.31,175.81c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.66,5.56-23.93,5.21a103.27,103.27,0,0,0-30,3.07c-8,2-15.14,6.95-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="cls-3" d="M93.9,219.55c-5.06,0-7.17-2.27-8-3.82-1.05-1.92-2-6,3.44-12,7.91-8.72,18.47-16.8,27.56-21.07A122.07,122.07,0,0,1,178.31,172a3.5,3.5,0,0,1,2.25,1.14,3.44,3.44,0,0,1,1.16,1.91c1.72,7.59,1.47,19.05-4.89,26.37-6.54,7.52-16.23,7-24,6.56l-2.69-.14a99.71,99.71,0,0,0-29,3,66,66,0,0,0-9.91,3.74c-4.3,1.88-8.75,3.83-13.63,4.68A21.29,21.29,0,0,1,93.9,219.55Zm-1.83-7.24a8.88,8.88,0,0,0,4.3,0c4-.7,7.93-2.4,12-4.19a72.1,72.1,0,0,1,11-4.11,106.66,106.66,0,0,1,31-3.17c.91,0,1.84.09,2.78.14,7.23.4,14.06.77,18.36-4.16,3.87-4.46,4.66-11.92,3.75-18.07A115.18,115.18,0,0,0,119.85,189c-8.31,3.9-18,11.35-25.35,19.43C92.67,210.41,92.15,211.77,92.07,212.31Z"/><path class="cls-7" d="M340.46,243.84c-6-46.08-35.17-92.93-58.18-123.34l-7-5.27,60-2.06C346.81,155.27,349.82,201.11,340.46,243.84Z"/><path class="cls-8" d="M249.46,120.86a38.06,38.06,0,0,1,6.86,3.6,29.12,29.12,0,0,1,4.87,4c2.51,2.63,3.45,4.8,2.77,5.58s-2.86.14-5.88-1.15c-1.51-.65-3.27-1.42-5.19-2.28s-4-1.75-6.26-2.65-4.4-1.67-6.37-2.4-3.8-1.34-5.34-1.9c-3.08-1.15-5.09-2.14-5-3.22s2.22-2,5.84-2.14a29.39,29.39,0,0,1,6.3.43A38.48,38.48,0,0,1,249.46,120.86Z"/><path class="cls-6" d="M92.19,132.81c29.19-4.84,58.37,3.32,87,9,29,5.73,57,5.91,86-.74,38.4-8.81,88.08-27.83,106.7-71.12A76.9,76.9,0,0,0,375,61.34c-20.42,14.6-47.12,12.59-69.71,3s-42.46-25.77-63.5-39.17S197.13.91,173.16,3.63c-23.29,2.64-47.76,17.86-65.39,35A78.55,78.55,0,0,0,91.53,60.7C88,68.12,87.33,78.9,81.26,84.4c-2.86,2.59-6.59,3.46-10,5.08-15.49,7.47-21.13,29-23.64,48-5.17,39-3.54,79,1.88,118"/><path class="cls-3" d="M344,247a4.31,4.31,0,0,1-1.12-.15,4.5,4.5,0,0,1-3.24-5.48c11.44-44.36,5.43-83.13-7.1-127.69a4.5,4.5,0,1,1,8.66-2.44c12.93,46,19.09,86.07,7.16,132.38A4.51,4.51,0,0,1,344,247Z"/><path class="cls-7" d="M84.69,146.36c0,1.6,0,3.18-.09,4.75L75.34,178.6l-3.12,9.24c-3.13,5.88-6.5,11.7-9.62,17.59S59.57,217,57.35,223a130.31,130.31,0,0,0-6.44,22.57c-2-10.35-6-20.67-7.22-31.15,4.9-4.13,7.94-10.22,9.47-16.49,1.66-6.79,1.69-13.86,1.72-20.85a34.9,34.9,0,0,1,7.45,16.14c.05-.22.1-.46.15-.69q4.08-19.68,6.46-39.66c.72,1.35,1.38,2.72,2,4.13a71.28,71.28,0,0,1,2.81,9.87c0-.33.09-.64.12-1Q76,150.39,76.69,134.7A48.12,48.12,0,0,1,84.69,146.36Z"/><path class="cls-7" d="M338,110.71a155.88,155.88,0,0,1-30.76,16c-2.21.87-4.44,1.72-6.67,2.52-4.79,1.72-9.61,3.25-14.4,4.64-8.59,2.5-17.07,4.5-25.07,6.1-29,5.82-57,5.66-86,.65-15.34-2.66-30.82-5.94-46.39-7.76h0l-37.41.79c0,.4.09.81.12,1.21l-1.06.14-1.67,4.22h0l-1.12,2.81c.18-1.56.3-3.14.34-4.74a56.14,56.14,0,0,0-.35-8.13l35.56-.75a95,95,0,0,1-13.84,2l1.47,0a70.84,70.84,0,0,0,14.31-2h0c10-2.44,23.3-8.24,32.64-12.89-1.21,3.52-4,10.23-7.47,11.6,13.7.77,23.75-2.55,37.16-5.45a30.37,30.37,0,0,1-12.68,10.25l-.52.22c.56,0,1.12,0,1.69,0,.17-.09.33-.19.49-.29a49.15,49.15,0,0,0,6.42-4.7s-3.72,6-3.72,6h0a103,103,0,0,0,44.29-4.43l5.39-1.77,5.76-.8c-1.71,1.75-6.58,3.31-8.61,4.67a34.78,34.78,0,0,1-9.85,4.61c1.37,0,3.49,2.12,4.85,2,10.13-.7,19.39-4.89,29.33-7.14,3.41-.77,7.56-2.33,11-3.14,3-.73,12.1-3.72,15-4.82L275,125.25l3.61-.08-2.11-.59-3,3c.11,0-.86,1.54-.75,1.5,16.8-4.79,47.23-14.23,63.65-20.18h1.07C337.63,109.47,337.82,110.08,338,110.71Z"/><path class="cls-3" d="M49.07,260.3a4.4,4.4,0,0,1-1.42-.23,4.51,4.51,0,0,1-2.85-5.69c3-8.87,40.51-120.88,40.89-122a4.5,4.5,0,0,1,8.54,2.86c-.38,1.13-37.94,113.13-40.89,122A4.5,4.5,0,0,1,49.07,260.3Z"/><path class="cls-8" d="M53.66,144.87a12,12,0,0,1,3.85-5.08c1.42-1,2.76-1.21,3.62-.61s1.14,1.88,1,3.42A20.34,20.34,0,0,1,58,152.52c-1,1.17-2.11,1.87-3.16,1.67s-1.81-1.31-2.09-3A12,12,0,0,1,53.66,144.87Z"/><path class="cls-8" d="M73.29,124.32c2.9-1.35,6-.89,6.87,1s-.73,4.57-3.63,5.93-6,.89-6.87-1S70.39,125.68,73.29,124.32Z"/><path class="cls-8" d="M86.6,109.93c2.1-4.46,5-7.73,7-7.06s2.24,5.38-.07,10.31-6.09,7.77-7.88,6.65S84.52,114.4,86.6,109.93Z"/><path class="cls-3" d="M70.57,69.83a55.25,55.25,0,0,0-9.49-9.16c-2.74-2-4.72-2.87-5.16-2.37-.89,1.07,4.59,7,10.86,14.67l2.69,3.26a17.67,17.67,0,0,0-6.57-.85c-2,.18-3.16.77-3.19,1.43s1,1.34,2.69,2,3.87,1.45,6.3,2.34,4.61,1.76,6.3,2.31l.77.23c1.72,1.88,2.94,2.92,3.46,2.62s.07-2.44-1.41-5.5A56.54,56.54,0,0,0,70.57,69.83Z"/><path class="cls-3" d="M189.84,121.17c-.54.28-1.18.64-1.9,1.06s-1.52.9-2.37,1.43l-1.32.83-1.38.88-2.93,1.88-1.53,1c-.26.16-.51.32-.78.47l-.78.48q-1.57.94-3.18,1.83c-1.07.57-2.15,1.12-3.22,1.63l-.82.36c-.26.13-.53.24-.81.36l-1.6.65c-1.07.4-2.11.8-3.13,1.09-.51.18-1,.29-1.49.44s-1,.24-1.43.37l-1.35.3-1.25.23c-.79.12-1.5.23-2.1.29s-1.08.11-1.41.15l-.52.07.41.31a10.67,10.67,0,0,0,1.24.79,16.92,16.92,0,0,0,2.09,1l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09a22.9,22.9,0,0,0,4-.34,18.43,18.43,0,0,0,2.06-.44l1-.28,1-.34a27.94,27.94,0,0,0,4-1.77,34.42,34.42,0,0,0,3.63-2.31l.84-.64c.27-.21.53-.44.79-.66.53-.44,1-.89,1.51-1.36a33.1,33.1,0,0,0,2.6-2.77c.39-.46.75-.92,1.1-1.37l.95-1.32c.59-.87,1.1-1.68,1.52-2.42s.77-1.4,1-2,.46-1,.59-1.32l.19-.49-.47.22C190.82,120.66,190.38,120.88,189.84,121.17Z"/><path class="cls-3" d="M232.08,127.34l-2.08.93c-.79.37-1.67.79-2.64,1.22-.47.23-1,.48-1.47.71l-1.57.75L221,132.56c-.58.26-1.16.55-1.75.84-.3.15-.59.29-.9.42l-.9.43c-1.2.59-2.44,1.13-3.65,1.73s-2.46,1.15-3.68,1.68l-.91.41c-.3.15-.6.28-.9.41-.61.26-1.2.52-1.78.81-1.18.49-2.31,1.05-3.4,1.51-.55.24-1.08.47-1.59.72s-1,.44-1.5.66c-1,.46-1.86.86-2.65,1.22l-2.08,1c-.58.28-1,.52-1.35.69l-.48.27.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.55,0,1.13-.05,1.73-.1s1.2-.13,1.84-.21c1.26-.15,2.57-.42,3.93-.72.67-.16,1.35-.35,2-.55.34-.09.69-.19,1-.3l1-.36c1.39-.45,2.74-1,4.1-1.63s2.66-1.31,3.9-2.07l.94-.55c.31-.19.6-.39.9-.59.59-.4,1.18-.79,1.74-1.2,1.1-.85,2.16-1.66,3.09-2.53l1.35-1.27c.42-.42.81-.86,1.19-1.26a26,26,0,0,0,1.94-2.33,21.05,21.05,0,0,0,1.34-1.93c.35-.55.6-1,.77-1.31l.26-.49-.52.19C233.14,126.89,232.67,127.08,232.08,127.34Z"/><path class="cls-3" d="M285.59,114.78c-.58.47-1.29,1-2.1,1.64-.4.31-.82.65-1.26,1l-1.41,1.09c-.48.38-1,.79-1.49,1.19L277.72,121c-1.08.88-2.28,1.73-3.45,2.67-.62.44-1.22.91-1.84,1.38-.3.23-.61.47-.93.69l-.95.69c-1.25,1-2.58,1.85-3.86,2.79s-2.62,1.84-3.94,2.7l-1,.65c-.31.23-.64.44-1,.65-.65.42-1.29.83-1.92,1.26-1.28.78-2.49,1.63-3.69,2.34l-1.73,1.1c-.55.36-1.12.66-1.64,1l-1.51,1-1.38.84c-.87.54-1.63,1-2.27,1.42s-1.13.72-1.47,1l-.52.36h.63c.41,0,1,0,1.76-.05a26.4,26.4,0,0,0,2.72-.26l1.67-.25c.58-.11,1.18-.24,1.81-.39s1.3-.29,2-.48,1.36-.41,2.07-.63c1.42-.44,2.87-1,4.37-1.67.74-.33,1.48-.69,2.23-1.06.38-.18.76-.36,1.13-.57l1.11-.62c1.5-.81,2.94-1.78,4.39-2.74s2.79-2.05,4.07-3.18l1-.84c.32-.27.62-.57.92-.86.6-.59,1.2-1.16,1.76-1.74,1.1-1.2,2.15-2.35,3.05-3.54l1.3-1.73c.41-.57.76-1.15,1.12-1.68s.68-1.07,1-1.58l.8-1.48a24.8,24.8,0,0,0,1.17-2.47c.29-.7.5-1.26.64-1.64l.2-.59-.52.36C286.65,114,286.17,114.32,285.59,114.78Z"/><path class="cls-3" d="M75.07,168.26c0-.33,0-.66-.07-1-.07-.66-.14-1.3-.21-1.94s-.22-1.25-.33-1.86a16,16,0,0,0-.4-1.75c-.16-.57-.32-1.11-.47-1.64s-.38-1-.56-1.5-.38-.92-.55-1.35-.42-.8-.61-1.17a13.83,13.83,0,0,0-1.09-1.82c-.34-.49-.61-.86-.79-1.11l-.29-.39.11.47.35,1.3c.17.55.33,1.23.49,2,.09.38.18.79.28,1.22s.14.89.22,1.37.2,1,.24,1.47.12,1,.18,1.59.1,1.1.14,1.67.11,1.15.1,1.75,0,1.2,0,1.81c0,.31,0,.62,0,.93l0,.93q0,.94-.06,1.89c0,.64-.06,1.27-.11,1.91-.11,1.27-.2,2.55-.36,3.8l-.1.94-.12.94c-.08.61-.15,1.22-.23,1.83-.19,1.19-.32,2.37-.51,3.47-.08.56-.16,1.1-.23,1.62s-.16,1-.24,1.52c-.14,1-.27,1.87-.39,2.67s-.2,1.5-.27,2.07-.13,1-.16,1.35,0,.48,0,.48l.23-.42.61-1.21c.26-.53.55-1.17.88-1.92s.67-1.59,1-2.53l.54-1.47q.24-.76.51-1.59c.36-1.09.65-2.27,1-3.49.15-.61.28-1.24.41-1.87l.2-1,.15-1c.23-1.3.37-2.65.48-4,.06-.67.06-1.36.09-2a19.44,19.44,0,0,0,0-2Z"/><path class="cls-3" d="M62.89,191.23l-.23-.94c-.08-.31-.17-.62-.27-.92-.19-.61-.36-1.21-.59-1.78a24.73,24.73,0,0,0-1.44-3.24c-.26-.5-.52-1-.8-1.43s-.56-.88-.84-1.28a22.14,22.14,0,0,0-1.65-2.09c-.53-.59-1-1.07-1.44-1.45s-.77-.66-1-.84l-.37-.27.22.4c.14.26.36.64.62,1.13s.57,1.07.89,1.75.68,1.46,1,2.31c.18.42.35.86.52,1.33s.34.94.5,1.43c.34,1,.64,2,.92,3.14.15.54.26,1.11.39,1.67.07.29.13.57.18.86l.16.87c.21,1.16.37,2.35.5,3.55s.19,2.39.21,3.58v.89a8.42,8.42,0,0,1,0,.87c0,.59,0,1.16,0,1.73s-.05,1.13-.1,1.67-.09,1.09-.16,1.61-.11,1-.18,1.52-.13,1-.22,1.43c-.14.91-.31,1.75-.46,2.5s-.31,1.4-.43,1.94l-.3,1.26c-.07.3-.1.45-.1.45l.27-.37c.18-.24.44-.6.75-1.07s.66-1.07,1-1.77a24.08,24.08,0,0,0,1.12-2.41c.2-.45.35-.93.53-1.43s.33-1,.48-1.56.29-1.1.41-1.68.24-1.17.33-1.78.17-1.23.23-1.86c0-.32.06-.64.08-.95l0-1a32.15,32.15,0,0,0-.12-3.92A35.27,35.27,0,0,0,62.89,191.23Z"/><path class="cls-3" d="M340.52,135.12c-.56-.33-2.35,1.41-4.39,4.82a31.05,31.05,0,0,0-1.53,2.85c-.53,1-1,2.19-1.5,3.41a54.73,54.73,0,0,0-2.4,8.19,53.3,53.3,0,0,0-1,8.48c0,1.31,0,2.55,0,3.72s.16,2.24.29,3.22c.54,3.94,1.5,6.24,2.14,6.16,1.42-.19,1-9.55,3.37-20.59S341.75,135.85,340.52,135.12Z"/><path class="cls-3" d="M332.65,76.3q.6-.6,1.08-1.11c1.28-1.36,1.88-2.21,1.67-2.46s-1.68.43-4.06,1.79q.2-.28.12-.42c-.32-.6-3.28.45-8,1.89-1.18.36-2.47.76-3.87,1.11s-2.89.74-4.46,1.13c-3.16.7-6.64,1.35-10.34,1.81s-7.24.61-10.48.67c-1.61,0-3.15,0-4.59,0s-2.79-.11-4-.17c-4.93-.3-8-.62-8.21,0s2.72,2,7.75,3.17a39.25,39.25,0,0,0,4.15.75c1.5.25,3.12.36,4.83.49a68.2,68.2,0,0,0,11.11-.34,68,68,0,0,0,10.48-2.16A105.26,105.26,0,0,1,303,86.69a105.34,105.34,0,0,1-13.4,2.42c-2.09.18-4.08.41-5.94.45-.94,0-1.84.12-2.71.12l-2.51,0c-6.38,0-10.4-.39-10.54.3-.06.31.87.77,2.65,1.35l1.48.45c.55.14,1.15.26,1.79.4a42.19,42.19,0,0,0,4.43.73l2.6.29c.9.08,1.85.09,2.83.14,2,.12,4.05,0,6.26,0a78.72,78.72,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9c2-1,3.85-1.92,5.51-3,.84-.51,1.66-1,2.42-1.48l2.14-1.5a44.2,44.2,0,0,0,3.53-2.77C331.77,77.08,332.24,76.69,332.65,76.3Z"/><path class="cls-3" d="M258.59,56.35c.84-.51,1.67-1,2.42-1.49l2.14-1.49a42.47,42.47,0,0,0,3.53-2.77c.5-.43,1-.82,1.38-1.21s.77-.77,1.09-1.11c1.27-1.36,1.87-2.22,1.67-2.46s-1.69.43-4.07,1.79c.13-.19.17-.33.12-.43-.32-.59-3.27.46-8,1.9-1.18.35-2.47.75-3.87,1.11s-2.89.74-4.46,1.13c-3.15.7-6.64,1.35-10.34,1.8s-7.24.61-10.47.68c-1.62,0-3.16,0-4.6,0s-2.79-.11-4-.18c-4.92-.29-8-.61-8.21,0s2.72,2,7.75,3.17c1.26.28,2.65.56,4.15.75s3.12.36,4.83.49a67.15,67.15,0,0,0,11.11-.35,66.79,66.79,0,0,0,10.48-2.16,104.66,104.66,0,0,1-12.79,4.27A105.34,105.34,0,0,1,225,62.2c-2.09.18-4.07.41-5.94.45-.94,0-1.84.12-2.71.12l-2.5,0c-6.39,0-10.41-.39-10.55.29-.06.31.87.78,2.65,1.36l1.48.45c.55.14,1.15.26,1.79.4a42.64,42.64,0,0,0,4.43.73l2.6.28c.9.09,1.85.1,2.83.15,2,.12,4,0,6.26,0a79.62,79.62,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9C255.05,58.32,256.93,57.4,258.59,56.35Z"/><path class="cls-3" d="M195.19,30.86c.37-.2.73-.43,1.11-.66.73-.47,1.54-.92,2.32-1.45.41-.24.8-.5,1.2-.76.21-.13.41-.27.62-.39l.61-.4c.81-.54,1.66-1.05,2.48-1.62s1.64-1.1,2.47-1.63l.6-.41c.2-.15.4-.28.6-.41.41-.27.81-.53,1.19-.81.79-.52,1.53-1.08,2.26-1.57l1-.76c.34-.26.67-.49,1-.72l1.76-1.33c.52-.43,1-.8,1.37-1.1s.68-.59.88-.77l.15-.14.21-.06,1.73-.51.62-.2-.62-.19c-.41-.12-1-.29-1.77-.45s-1.69-.35-2.77-.5-2.3-.26-3.64-.33c-.67,0-1.37,0-2.1,0s-1.47,0-2.23.07a47,47,0,0,0-4.82.5c-.83.13-1.67.29-2.52.47l-1.28.28-1.28.32A43.6,43.6,0,0,0,191.24,17a39.83,39.83,0,0,0-4.92,2.38c-.39.22-.78.45-1.16.69l-1.13.73c-.73.51-1.46,1-2.13,1.56a28.65,28.65,0,0,0-3.65,3.44l-.78.89-.7.92a17.84,17.84,0,0,0-1.22,1.8,15.91,15.91,0,0,0-1,1.75c-.14.28-.27.55-.41.82s-.21.55-.31.81a18.1,18.1,0,0,0-.83,2.76,13.93,13.93,0,0,0-.26,1.82c0,.41,0,.63,0,.63l.41-.49c.28-.32.61-.81,1.11-1.37s1.07-1.25,1.8-2l.54-.55.61-.56c.41-.38.83-.78,1.31-1.15s.93-.8,1.47-1.18l.78-.59.83-.58c1.11-.79,2.36-1.53,3.64-2.28l2-1.09,1-.52q.51-.27,1.05-.51c1.42-.69,2.91-1.31,4.4-1.92,1.16-.46,2.32-.9,3.5-1.32l0,0-.63.53c-.21.18-.4.37-.6.56-.39.37-.77.74-1.13,1.12a27.05,27.05,0,0,0-2,2.33c-.28.39-.56.76-.81,1.14s-.48.76-.69,1.13a18.31,18.31,0,0,0-1,2.06,12.12,12.12,0,0,0-.65,1.69c-.16.48-.26.87-.33,1.13l-.09.42.39-.17c.25-.11.61-.28,1.05-.5l1.53-.82,1.9-1.07Z"/><path class="cls-3" d="M107.52,78.93q-.13-.72-.33-1.71l-.46-2.13c-.1-.38-.19-.78-.29-1.19s-.2-.82-.31-1.25c-.23-.84-.42-1.75-.7-2.65-.1-.46-.23-.91-.37-1.38-.07-.23-.13-.46-.19-.7l-.2-.7c-.28-.94-.51-1.9-.81-2.84s-.57-1.9-.83-2.85l-.21-.7c-.09-.23-.15-.46-.22-.69-.14-.46-.27-.92-.43-1.37-.25-.91-.57-1.78-.83-2.62l-.41-1.23c-.15-.4-.27-.79-.4-1.17l-.75-2.06-.65-1.64c-.18-.46-.35-.82-.47-1.07l-.09-.18v-.22c0-.77,0-1.39,0-1.8s0-.65,0-.65l-.36.53c-.24.35-.57.87-1,1.55s-.83,1.52-1.29,2.51-.93,2.12-1.4,3.38c-.21.63-.44,1.29-.66,2s-.4,1.42-.6,2.16c-.37,1.49-.7,3.09-.94,4.75q-.18,1.24-.3,2.55L92,66.84q0,.66-.06,1.32A42.83,42.83,0,0,0,92,73.58a39.33,39.33,0,0,0,.82,5.4c.09.44.19.88.31,1.31l.37,1.3c.27.85.54,1.69.86,2.49a29.54,29.54,0,0,0,2.21,4.51l.62,1,.67.93a19.84,19.84,0,0,0,1.36,1.7,15.78,15.78,0,0,0,1.39,1.43l.67.63.68.54a17.42,17.42,0,0,0,2.39,1.6,12.55,12.55,0,0,0,1.66.79l.59.24-.35-.54c-.22-.36-.59-.82-1-1.47s-.88-1.39-1.34-2.3l-.37-.67-.35-.75c-.24-.5-.5-1-.72-1.59s-.49-1.13-.69-1.75c-.11-.3-.22-.61-.34-.92l-.3-1c-.43-1.3-.76-2.71-1.11-4.15-.14-.74-.29-1.48-.44-2.23L99.44,79a11.19,11.19,0,0,1-.18-1.16c-.24-1.55-.39-3.16-.54-4.76-.1-1.25-.17-2.49-.22-3.74v0l.32.75c.11.25.23.5.35.74.25.48.48,1,.74,1.41a28.05,28.05,0,0,0,1.65,2.55c.29.38.57.76.86,1.11s.58.69.87,1A18.9,18.9,0,0,0,105,78.52a12.68,12.68,0,0,0,1.42,1.12c.41.3.75.51,1,.65l.37.21s0-.15,0-.42S107.6,79.41,107.52,78.93Z"/><path class="cls-3" d="M157.63,30.1c.21-.26.41-.52.63-.76l.62-.77c.82-1,1.69-2.06,2.5-3.13s1.66-2.11,2.5-3.13l.6-.79c.19-.27.4-.52.6-.78.41-.51.81-1,1.18-1.54.8-1,1.52-2,2.25-3,.36-.48.7-1,1-1.41s.66-.92,1-1.35l1.7-2.45c.5-.77.93-1.44,1.3-2s.63-1,.81-1.36l.13-.24.25-.17,2-1.38.71-.52h-.87c-.58,0-1.41.06-2.46.17s-2.34.26-3.79.52-3.07.63-4.82,1.1c-.87.26-1.78.52-2.71.83s-1.88.66-2.85,1c-1.94.76-4,1.64-6,2.67-1,.52-2,1.07-3,1.66l-1.53.9-1.51.95a65.41,65.41,0,0,0-5.9,4.36,52.74,52.74,0,0,0-5.32,5.14c-.42.44-.82.9-1.21,1.37l-1.14,1.41c-.73,1-1.45,1.92-2.09,2.91a39.74,39.74,0,0,0-3.25,6q-.31.75-.63,1.47t-.51,1.47a25.35,25.35,0,0,0-.81,2.83,22.86,22.86,0,0,0-.5,2.66c0,.42-.11.83-.17,1.23s0,.79-.06,1.17a22.82,22.82,0,0,0,.1,3.9,18.82,18.82,0,0,0,.42,2.44l.2.85.32-.81c.23-.53.45-1.3.86-2.23s.85-2.06,1.49-3.28l.46-.94.55-1a23.46,23.46,0,0,1,1.2-2c.44-.69.86-1.42,1.39-2.12l.76-1.1.83-1.09c1.09-1.49,2.39-3,3.72-4.47l2.11-2.23L141.81,32c.36-.38.74-.75,1.13-1.11,1.54-1.47,3.19-2.89,4.85-4.31,1.3-1.08,2.61-2.13,4-3.17l0,0-.59.95c-.19.31-.36.64-.53,1-.34.65-.68,1.28-1,1.93a38.56,38.56,0,0,0-1.52,3.8c-.2.63-.4,1.23-.57,1.82s-.29,1.18-.41,1.74a27.31,27.31,0,0,0-.49,3.1,18.32,18.32,0,0,0-.12,2.44c0,.68,0,1.23,0,1.6l.06.57L147,42c.28-.25.67-.62,1.14-1.09l1.63-1.69,2-2.18c.35-.4.71-.82,1.09-1.24s.75-.87,1.14-1.32c.75-.92,1.6-1.84,2.38-2.84C156.83,31.11,157.23,30.61,157.63,30.1Z"/><path class="cls-3" d="M188.32,415.9a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.26-6.88c.31,0,30.65,5.45,44.82-4.67A15.44,15.44,0,0,0,221.82,392a3.5,3.5,0,1,1,6.92,1,22.47,22.47,0,0,1-9.51,15.42C210.9,414.39,198.63,415.9,188.32,415.9Z"/><circle class="cls-9" cx="260.6" cy="260.93" r="5.28"/><circle class="cls-3" cx="245.8" cy="264.38" r="22.91"/><circle class="cls-1" cx="256.02" cy="247.35" r="12.7"/><path class="cls-8" d="M300.59,168.74c1.29,2.37,1.34,4.85.1,5.52s-3.29-.7-4.58-3.08-1.34-4.85-.1-5.52S299.3,166.36,300.59,168.74Z"/><path class="cls-8" d="M310.25,189.88c1.94,3.62,2.51,7.1,1.27,7.77s-3.83-1.73-5.77-5.36-2.52-7.1-1.27-7.77S308.3,186.25,310.25,189.88Z"/><path class="cls-2" d="M299.47,144.54a262.36,262.36,0,0,1-35.32,10.62c-29,6.65-57,6.47-86,.74-25.17-5-50.77-11.88-76.43-10.17q2.81-6.3,6.16-12.27l18.41-.39c10.64,1.22,21.21,3.34,31.78,5.55.36.16.75.32,1.18.49l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09h.06c7.43,1.54,14.86,3,22.32,4.12,2.23.33,4.49.63,6.8.88l-.46.26.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.53,0,1.1-.05,1.68-.1,27.91,1.92,60.1-1.45,89.18-11.39C295,137.79,297.22,141.11,299.47,144.54Z"/><path class="cls-3" d="M48.53,260.48a4.48,4.48,0,0,1-4.45-3.88c-6.29-45.25-7.1-84.24-2.47-119.22C45.3,109.48,53.85,92.67,67.76,86c1.14-.55,2.28-1,3.38-1.45a18.15,18.15,0,0,0,5.5-2.92c3.46-3.14,5-8.42,6.69-14a62.23,62.23,0,0,1,4-10.82C101,30.15,129.81,8.13,159,2c40.31-8.54,71.8,12.57,102.27,33,14.23,9.53,28.94,19.39,44.16,25.83,24.66,10.44,48.47,9.52,65.33-2.54l10.62-7.6-3.69,12.53a80.3,80.3,0,0,1-3.28,9.09C365.33,93.3,343.91,122,293.34,139c-32.79,11-72.38,14.65-105.89,9.64-9.25-1.38-18.56-3.32-27.56-5.2-23.42-4.88-45.55-9.49-68.56-5.67a4.5,4.5,0,0,1-1.47-8.88c24.66-4.09,48.66.91,71.87,5.74,8.87,1.85,18.05,3.77,27.05,5.11,32.17,4.81,70.18,1.35,101.69-9.27,25.37-8.54,58.45-25.6,74.21-58.63-18,7.64-40.17,6.76-62.78-2.81-16-6.78-31.08-16.88-45.66-26.65C226,22.14,197.43,3,160.84,10.75c-26.25,5.56-53.21,26.18-65.55,50.13A54.71,54.71,0,0,0,92,70.14c-1.85,6.24-3.95,13.3-9.28,18.13a25.88,25.88,0,0,1-8.19,4.6c-1,.4-1.95.79-2.83,1.21-10.95,5.28-17.87,19.83-21.13,44.48C46,172.72,46.82,210.93,53,255.37a4.5,4.5,0,0,1-3.84,5.07A4.4,4.4,0,0,1,48.53,260.48Z"/><path class="cls-3" d="M343.6,255.94a4.49,4.49,0,0,1-4.5-4.47c-.3-40.92-49.59-113.6-50.09-114.33a4.5,4.5,0,1,1,7.44-5.08c2.09,3.07,51.33,75.71,51.65,119.35a4.51,4.51,0,0,1-4.47,4.53Z"/><path class="cls-8" d="M327.53,239.22a114.3,114.3,0,0,1,1,14c0,2.15,0,4.2-.15,6.11s-.26,3.69-.45,5.31c-.76,6.47-2,10.34-2.64,10.25-1.5-.19-.14-15.93-2.82-35-2.51-19.06-8.05-33.86-6.65-34.44.61-.26,2.82,3.14,5.29,9.17.62,1.51,1.26,3.17,1.86,5s1.19,3.78,1.78,5.85A114.05,114.05,0,0,1,327.53,239.22Z"/><circle class="cls-3" cx="145.8" cy="264.38" r="22.91"/><circle class="cls-1" cx="156.02" cy="247.35" r="12.7"/><circle class="cls-8" cx="136.6" cy="272.93" r="5.28"/><circle class="cls-8" cx="239.6" cy="272.93" r="5.28"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg
new file mode 100644
index 00000000..e586ed4e
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 464.12 605.75"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#f0d7c2;}.cls-3{fill:#d7ad8c;}.cls-4{fill:#c4987a;}.cls-5{fill:#8376a5;}.cls-6{fill:#655a8e;}.cls-7{fill:#ebcbac;}.cls-16,.cls-8,.cls-9{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-8{stroke-linecap:round;}.cls-8,.cls-9{stroke-width:10px;}.cls-9{stroke-linecap:square;}.cls-10{fill:#dcb79b;}.cls-11{fill:#fff;}.cls-12{fill:#40565a;}.cls-13{fill:#a699d6;}.cls-14{fill:#485d63;}.cls-15{fill:#796f9c;}.cls-16{stroke-width:11px;}.cls-17{fill:#325560;}</style></defs><title>Asset 120</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="236.82" cy="551.53" rx="184.33" ry="54.22"/><path class="cls-2" d="M30.24,275.91A69.67,69.67,0,0,0,21.69,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="cls-3" d="M18,366.5c3.62,6.7,8.36,12.95,14.66,17.24,2.69,1.84,7,1.57,11.13,1.27-5.9-4.26-10.4-10.26-13.86-16.68-15.65-29-9.35-68.14,14.59-90.75H68.76v-1.84H32.58C8.64,298.37,2.34,337.52,18,366.5Z"/><path class="cls-3" d="M419,275a69.67,69.67,0,0,1,29.75,88.61c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><path class="cls-4" d="M411.42,386.76a29.59,29.59,0,0,0,19.15-4.19c6.72-4,11.79-10.17,15.61-16.77A67.58,67.58,0,0,0,453.47,316c-4.12-16.58-18.64-31.49-33.49-41l-1,13.49c7.89,8.45,16.35,18.74,19.1,29.76a67.58,67.58,0,0,1-7.29,49.78c-3.82,6.6-8.9,12.74-15.61,16.77A30.36,30.36,0,0,1,411.42,386.76Z"/><path class="cls-5" d="M452.36,118.46c-8.78-30.07-32.4-57-62.92-63.67a46.85,46.85,0,0,0-9.71-17.86c-5.41-6.13-12.35-10.72-19.61-14.48-36.17-18.7-79.26-17-119.65-11.85-16.15,2.07-32.27,4.63-48,8.91C128.34,37,73,84.38,45.91,145.09s-22.25,133.54,7.56,193L262.36,185.91V334.35H414.7c-8.85-26.74-4.64-73.12,7.76-98.72,9.21-19,22.61-32.09,28.47-53.07C457,160.94,458.72,140.29,452.36,118.46Z"/><path class="cls-6" d="M454.65,186.37C452,196,447.72,203.88,443,211.49c-.82-48.6-11-97.83-36.11-139.38A92.48,92.48,0,0,0,398.41,60c28,8.43,49.4,34,57.66,62.31C462.44,144.1,460.69,164.75,454.65,186.37Z"/><path class="cls-7" d="M53.69,331.22c15.1-11.09,21.39-30.36,26.05-48.51A691.24,691.24,0,0,0,99.16,167.36l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370,167.87s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62l-.21.12a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.47,469.8,52,405.33,52.78,332.34"/><path class="cls-2" d="M146.18,528.31c-48.31-54-94-118-93.24-190.45l.91-1.13c15.09-11.09,21.39-30.36,26-48.51A690.78,690.78,0,0,0,99.31,172.88l28.18,8.41C118.46,222.82,83,409.19,146.18,528.31Z"/><path class="cls-3" d="M323.51,525.35a270.7,270.7,0,0,1-19.2,19.85c22.46-40.14,35.38-85.8,40-131.73,6.33-63.1-2.24-126.93-17.2-188.56-.55-2.26-1.17-4.63-2.75-6.34-2.47-2.67-6.5-3-10.13-3.13-20.76-.84-41.76-1.81-61.63-7.87a105.08,105.08,0,0,1-17.44-7c19.43-4.07,37.77-14.78,56.7-21.88A165.11,165.11,0,0,1,367,169.1s7.49,121.69,48.83,164.46C416.61,406.56,372.26,471,323.51,525.35Z"/><path class="cls-8" d="M390.57,54.45c31.3,6,55.6,33.41,64.53,64,6.37,21.82,4.61,42.47-1.43,64.1-5.86,21-19.26,34.06-28.47,53.07-12.4,25.6-14.78,71.07-5.93,97.81"/><path class="cls-8" d="M27.49,275.91A69.67,69.67,0,0,0,18.93,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="cls-8" d="M422.38,274.38A69.67,69.67,0,0,1,452.13,363c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><polygon class="cls-3" points="237.17 353.31 237.17 432.24 264.71 432.24 237.17 353.31"/><polyline class="cls-9" points="237.32 357.44 236.19 423.51 236.11 428.1"/><path class="cls-10" d="M344.27,308.58c.57,5-.41,9-1.09,8.93s-.9-4-1.45-8.65-1.2-8.52-.51-8.75S343.71,303.58,344.27,308.58Z"/><path class="cls-11" d="M160.6,204.75a109.34,109.34,0,0,1,22.25,7.54c5.49,2.71,8.48,5.28,8,6.57s-4.34,1.18-10.15.31-13.7-2.41-22.45-4.49A144,144,0,0,1,136,207.81c-5.57-2.38-8.76-4.67-8.36-6s4.24-1.55,10.15-1A175.83,175.83,0,0,1,160.6,204.75Z"/><path class="cls-12" d="M397.3,128.18a75.72,75.72,0,0,1,1.9,14c0,2.17.07,4.23-.09,6.16-.07,1-.1,1.89-.21,2.78l-.35,2.55c-1,6.48-2.82,10.19-3.8,10s-1.24-4.15-1.61-10.27L393,151c0-.83-.16-1.7-.23-2.59-.11-1.78-.38-3.68-.6-5.67-.54-4-1.27-8.29-2.32-12.78s-2.39-8.66-3.69-12.45c-.71-1.87-1.32-3.68-2-5.33-.34-.83-.63-1.65-1-2.41l-.95-2.21c-2.43-5.63-4.08-9.23-3.19-9.9s4.05,1.91,7.9,7.22l1.46,2.11c.5.74.95,1.55,1.44,2.38,1,1.65,1.9,3.5,2.85,5.46A75.74,75.74,0,0,1,397.3,128.18Z"/><path class="cls-12" d="M435.13,118.25a108.47,108.47,0,0,1-2.34,18.33c-.67,2.76-1.29,5.39-2.1,7.78-.39,1.2-.73,2.37-1.14,3.46L428.33,151a55.23,55.23,0,0,1-2.41,5.25c-.39.76-.74,1.46-1.11,2.09s-.74,1.19-1.08,1.69c-1.34,2-2.3,3-2.79,2.77-1-.47.38-5.47,2.21-13.44l.71-3.13c.25-1.08.43-2.23.67-3.4.51-2.34.86-4.87,1.31-7.51A173.57,173.57,0,0,0,427.48,118a173.79,173.79,0,0,0-.37-17.39c-.26-2.66-.43-5.21-.77-7.58-.16-1.18-.25-2.34-.42-3.44l-.48-3.17c-1.25-8.08-2.3-13.17-1.24-13.56.5-.18,1.38.87,2.58,3q.45.79,1,1.76c.32.66.62,1.38,1,2.17a55.19,55.19,0,0,1,2,5.41l1,3.21c.33,1.12.59,2.31.89,3.54.64,2.45,1.06,5.11,1.53,7.91A108.47,108.47,0,0,1,435.13,118.25Z"/><path class="cls-12" d="M407,237.87a61.19,61.19,0,0,1,3-13.43,51.88,51.88,0,0,1,2.35-5.53c.43-.84.8-1.66,1.25-2.41l1.31-2.14a30.51,30.51,0,0,1,2.52-3.48c.4-.49.77-.95,1.14-1.34s.75-.73,1.09-1c1.35-1.2,2.28-1.69,2.71-1.38.91.66-.62,4.15-2.6,9.64l-.77,2.16c-.27.75-.48,1.55-.74,2.36-.56,1.61-1,3.38-1.49,5.21A83.83,83.83,0,0,0,414.29,251c.13,1.9.18,3.72.4,5.4.1.85.14,1.68.25,2.46l.32,2.27c.83,5.79,1.62,9.51.59,10-.48.21-1.3-.46-2.37-1.9q-.4-.54-.85-1.23c-.29-.46-.55-1-.84-1.54A30.49,30.49,0,0,1,410,262.5l-.85-2.36c-.28-.83-.48-1.71-.73-2.61a51.91,51.91,0,0,1-1.18-5.89A61.23,61.23,0,0,1,407,237.87Z"/><path class="cls-13" d="M338.06,11a505.1,505.1,0,0,0-65.52,7.53c-9.44,1.72-18.9,3.72-27.78,7.32C237.13,29,230,33.22,222.27,36.08l-1,.35c-15.13,5.37-33.2,6.48-43.21,19L179.81,52q1.31-2.53,2.6-5.07a64.64,64.64,0,0,0-39.5,17c-.84.79-1.73,1.54-2.63,2.27-9,7.24-20.27,11.3-28.87,19.81q-.45-4.32-.89-8.65-2,1.23-3.94,2.52c-9.37,6.19-18,13.53-24.81,22.49-7.31,9.7-12.31,21.4-12.89,33.52a2.76,2.76,0,0,0-1.28-1.65c-.22.33-.44.67-.65,1a164.8,164.8,0,0,0-25.72,75.23q-1.39-4.56-2.77-9.1c-.08,1.17-.16,2.37-.21,3.63a304,304,0,0,0,3.3,57.5,58,58,0,0,1-13.19-23.61,221.08,221.08,0,0,1,5.31-59.68A200.24,200.24,0,0,1,46,142.48a217.66,217.66,0,0,1,18.72-33.54A52.26,52.26,0,0,1,66.84,100a231.53,231.53,0,0,1,78.78-67.78,147.77,147.77,0,0,0-11.25,10A223.1,223.1,0,0,1,179,21.07q6.69-2.31,13.52-4.18a312,312,0,0,1,36.29-7.31c3.89-.58,7.79-1.1,11.68-1.61,10.4-1.34,21-2.43,31.56-3C294.53,3.75,317,4.85,338.06,11Z"/><path class="cls-8" d="M50.86,335.92C21,276.49,16.19,203.66,43.3,142.95S125.73,34.84,189.89,17.37c15.71-4.28,31.83-6.84,48-8.91,40.39-5.18,83.48-6.85,119.65,11.85,7.26,3.75,14.2,8.35,19.61,14.48C388.79,48,392,67.82,386,84.4s-20.53,29.56-37.4,34.67"/><path class="cls-12" d="M119.45,55.71a122.27,122.27,0,0,1,11.37-12.29c1.91-1.73,3.71-3.37,5.52-4.79s3.48-2.72,5.07-3.83c6.39-4.44,10.89-6.3,11.46-5.47,1.28,1.85-13.39,13.4-27.43,31.16C111.22,78.11,103.19,95,101.1,94.13c-.93-.38-.12-5.17,2.8-12.39.74-1.8,1.58-3.75,2.62-5.79s2.18-4.19,3.45-6.44A122.24,122.24,0,0,1,119.45,55.71Z"/><path class="cls-12" d="M152.92,44.74a155.46,155.46,0,0,1,12.6-13.37c2.09-1.91,4.07-3.71,6-5.29s3.78-3,5.5-4.29c6.91-5,11.74-7.28,12.34-6.46,1.32,1.81-14.6,14.92-30.58,34.31C142.68,68.9,132.71,87,130.69,86c-.91-.44.42-5.6,4.09-13.32.92-1.92,2-4,3.21-6.2s2.61-4.49,4.1-6.89A155.46,155.46,0,0,1,152.92,44.74Z"/><path class="cls-12" d="M193,32.11a87.62,87.62,0,0,1,14.89-12.4,79.37,79.37,0,0,1,14-7.35c8.37-3.31,14-3.82,14.24-2.87s-4.55,3.39-11.85,7.73a121.7,121.7,0,0,0-25.76,20.23c-8.94,9.23-15.89,18.86-21.16,25.73s-8.78,11.07-9.7,10.51,1-5.67,5.14-13.44A127.77,127.77,0,0,1,193,32.11Z"/><path class="cls-12" d="M246.25,15.32A101.07,101.07,0,0,1,263,7.14a76.92,76.92,0,0,1,14.74-4c8.63-1.37,14-.51,14.08.47s-5,2.2-12.8,4.79a141.76,141.76,0,0,0-28.82,13.45c-10.67,6.49-19.73,13.51-26.43,18.52s-11.06,8-11.8,7.22,2.32-5.1,8.21-11.27A131.37,131.37,0,0,1,246.25,15.32Z"/><path class="cls-12" d="M38.39,192.46a120.8,120.8,0,0,0,3.08,13.79c.66,2.07,1.22,4.08,1.91,5.9.33.91.6,1.82.94,2.67l.95,2.43c2.44,6.21,4.26,10.1,3.34,10.76-.43.31-1.43-.29-2.9-1.67q-.55-.52-1.19-1.18c-.41-.45-.81-1-1.26-1.52a38.32,38.32,0,0,1-2.81-3.91L39,217.34c-.5-.84-.94-1.75-1.43-2.68a65,65,0,0,1-2.76-6.13,71.66,71.66,0,0,1-4.66-30.3,64.9,64.9,0,0,1,.79-6.68c.19-1,.33-2,.56-3l.69-2.72a38.34,38.34,0,0,1,1.5-4.57c.26-.66.49-1.27.74-1.83s.53-1,.78-1.48c1-1.76,1.76-2.63,2.26-2.47,1.07.35.52,4.61.05,11.26l-.17,2.61c-.06.9,0,1.85-.09,2.82-.11,1.94,0,4,0,6.2A120.86,120.86,0,0,0,38.39,192.46Z"/><path class="cls-12" d="M36.06,250.75a94.42,94.42,0,0,0,5.12,8.54c.9,1.25,1.71,2.48,2.56,3.55.42.55.8,1.1,1.2,1.6l1.16,1.45c3,3.71,5,6.11,4.35,7s-3.77,0-8.06-3.08l-1.65-1.24c-.57-.44-1.1-1-1.68-1.47a42.43,42.43,0,0,1-3.46-3.52,47.69,47.69,0,0,1-10.33-19.94,42.32,42.32,0,0,1-.88-4.85c-.09-.77-.19-1.5-.23-2.22s0-1.4-.06-2.06c0-5.26,1.13-8.39,2.13-8.36s1.91,3.05,3.23,7.61l.52,1.78c.18.62.41,1.25.62,1.91.38,1.32.92,2.69,1.42,4.14A94.39,94.39,0,0,0,36.06,250.75Z"/><path class="cls-12" d="M67.93,123.65A94.35,94.35,0,0,0,69.15,133c.31,1.43.54,2.81.87,4.07.16.64.27,1.27.43,1.86l.44,1.71c1.13,4.37,1.93,7.26,1,7.85s-3.35-1.43-6-5.72l-1-1.71c-.33-.6-.61-1.25-.92-1.92a40.14,40.14,0,0,1-1.7-4.39,45.45,45.45,0,0,1-1.49-21.39,40.27,40.27,0,0,1,1.08-4.58c.22-.71.4-1.39.64-2l.73-1.83c2-4.61,4.21-6.91,5.12-6.49s.62,3.42.11,7.91l-.2,1.76c-.07.61-.1,1.25-.17,1.9-.15,1.3-.19,2.7-.3,4.16A94.26,94.26,0,0,0,67.93,123.65Z"/><path class="cls-6" d="M355.66,174.31a165.11,165.11,0,0,0-59.78,10.43c-10.63,4-21.07,9.1-31.63,13.56v-4.12L252.17,203a106,106,0,0,1-14.22,3.9c-1.55.3-3.11.56-4.69.78a69.08,69.08,0,0,1-11.64.58c-10.43-.39-20.55-3.4-30.53-6.38l-56.29-16.8-14.54-4.34-20.14-6q-2.75,33.38-8.73,66.39Q87.06,265.14,81,288.82c-.1.41-.21.82-.31,1.23-4.66,18.14-10.95,37.42-26,48.5l-.92,1.13c0,1.12,0,2.25,0,3.36Q50.69,336.71,48,330.2c11.22-9.15,18.92-22.41,22.74-36.44,4.32-15.88,4-32.73,1.4-49a1.49,1.49,0,0,0,1.43.57c1.44-.21,3-2.36,3.4-4.18a188.87,188.87,0,0,0,4.36-49.24c0-.66-.06-1.31-.09-2l3.23,3.4c6-11.47,4.25-31.47,6.3-44.25,13.89,12.88,48.77,13.2,66.08,5.51-4.33,3.77-5,12.86-10.1,15.6,1.53,0-8.28,5-6.75,4.94a129.75,129.75,0,0,0,65.78-21.6c-5.24,11-14.41,26.68-26,30.42,1.69.36,2.65-6.32,4.34-6q12.47,2.51,25.09,4.17c12.06,1.61,24.59,2.62,36.17-1.11,14.49-4.66,25.64-16.08,36.16-27.09q0,2.9-.35,5.8a65.84,65.84,0,0,1-5,19.31l32.61-13.88c.05.5.09,1,.12,1.51a27,27,0,0,1-3.55,14.74q25.15-11.8,49.59-25A27.75,27.75,0,0,1,355.66,174.31Z"/><path class="cls-6" d="M411.74,319.21c-8.3-10.85-15.05-25-20.53-40.32-.08-.22-.16-.44-.23-.65-11.25-33.09-16.84-70.92-19.39-93.54,10.71,26.93,25,59.59,39.5,85.45h0C408.88,287.05,408.92,304.81,411.74,319.21Z"/><path class="cls-14" d="M269.63,176.7c24.26-13.66,43.82-25.11,45.05-23.33s-16.68,16.14-41.28,30-46.18,21.74-47,19.86S245.4,190.42,269.63,176.7Z"/><path class="cls-14" d="M257.18,173.65c4.41-4.6,8.39-9.18,11.9-13.46,1.71-2.18,3.38-4.21,4.84-6.2.74-1,1.49-1.92,2.16-2.85l1.94-2.68c4.93-6.84,8-11.24,9-10.75s-.41,5.73-4.33,13.56l-1.59,3c-.56,1.05-1.22,2.11-1.87,3.22-1.28,2.24-2.84,4.51-4.47,6.91a121.8,121.8,0,0,1-26.14,27c-2.34,1.71-4.56,3.34-6.75,4.7-1.09.69-2.12,1.38-3.15,2l-3,1.69c-7.7,4.18-13,5.67-13.41,4.78s3.78-4.16,10.45-9.32l2.61-2c.91-.7,1.81-1.48,2.78-2.25,1.94-1.52,3.92-3.26,6-5C248.28,182.34,252.73,178.22,257.18,173.65Z"/><path class="cls-12" d="M167.43,170.51a127.73,127.73,0,0,0,20.86-7.38c3-1.53,6-2.88,8.6-4.48,1.31-.77,2.63-1.44,3.82-2.21l3.41-2.23c2.24-1.34,4.06-2.84,5.78-4,.84-.61,1.67-1.15,2.38-1.68s1.35-1.06,1.94-1.5c2.38-1.77,3.91-2.61,4.3-2.26s-.39,1.87-2.19,4.37q-.68.93-1.54,2c-.6.72-1.3,1.44-2,2.23a55.67,55.67,0,0,1-5.34,5.13l-3.32,2.77c-1.17.95-2.49,1.79-3.81,2.73a89.12,89.12,0,0,1-8.83,5.42,103.88,103.88,0,0,1-22.17,8.5,103.87,103.87,0,0,1-23.57,2.85,89.14,89.14,0,0,1-10.34-.66c-1.61-.22-3.17-.34-4.64-.63l-4.23-.9a55.7,55.7,0,0,1-7.12-2c-1-.36-2-.66-2.85-1s-1.63-.75-2.32-1.09c-2.76-1.36-4.16-2.34-4-2.84s1.92-.47,4.86,0c.73.11,1.54.26,2.42.42s1.86.23,2.89.37c2.07.25,4.38.72,7,.86l4.06.38c1.41.13,2.89.1,4.41.17,3,.2,6.29,0,9.69-.06A127.74,127.74,0,0,0,167.43,170.51Z"/><path class="cls-12" d="M132.77,165a101.23,101.23,0,0,0,11.59-5.33c1.7-1,3.36-1.87,4.83-2.84.74-.47,1.49-.89,2.17-1.36l2-1.33c5-3.41,8.07-5.83,8.93-5.11.4.34.13,1.39-.74,3q-.33.61-.76,1.34c-.3.47-.67.95-1.06,1.47a32.16,32.16,0,0,1-2.84,3.38L155,160c-.64.63-1.36,1.21-2.09,1.85a54.7,54.7,0,0,1-4.91,3.75,60.59,60.59,0,0,1-26.34,9.87,54.62,54.62,0,0,1-6.16.4c-1,0-1.9,0-2.79,0l-2.57-.2a32.13,32.13,0,0,1-4.36-.68c-.64-.14-1.23-.26-1.76-.41s-1-.34-1.45-.5c-1.73-.66-2.62-1.27-2.54-1.8.17-1.11,4.09-1.32,10.09-2l2.35-.29c.81-.1,1.65-.27,2.52-.4,1.74-.23,3.58-.66,5.51-1A101.21,101.21,0,0,0,132.77,165Z"/><path class="cls-12" d="M72.26,253c-3.94-18.19-10.05-32.28-8.1-33.34.9-.48,3.66,2.5,6.83,8.12.79,1.41,1.62,3,2.4,4.69S75,236,75.75,238a99.8,99.8,0,0,1,4,13.3,99.82,99.82,0,0,1,2,13.73c.12,2.13.24,4.15.2,6.05s-.07,3.66-.19,5.27c-.5,6.44-1.74,10.3-2.76,10.25C76.78,286.49,76.37,271.13,72.26,253Z"/><path class="cls-12" d="M82.64,210.52c-.93-5.11-1.91-9.93-2.87-14.31-.52-2.17-1-4.26-1.47-6.19l-.69-2.81-.68-2.58c-1.72-6.58-2.86-10.76-1.87-11.26s3.8,3,6.94,9.37l1.19,2.53c.4.89.76,1.83,1.15,2.8.8,1.94,1.5,4.06,2.24,6.29a126.38,126.38,0,0,1,3.6,14.79,156.62,156.62,0,0,1,2.4,27.28c0,7-.65,11.34-1.7,11.43s-2.36-4.11-3.69-10.92S84.46,220.74,82.64,210.52Z"/><path class="cls-12" d="M344.09,154.54c1.54-2,2.91-4,4.14-5.82.58-.94,1.18-1.81,1.68-2.67s1-1.65,1.46-2.38c1.79-2.95,3.1-4.91,4.17-4.69s1.56,2.67.92,6.54a22.28,22.28,0,0,1-.74,3.1,30,30,0,0,1-1.27,3.44A34.57,34.57,0,0,1,344.2,165.2a30,30,0,0,1-3,2.07,22.28,22.28,0,0,1-2.83,1.48c-3.59,1.57-6.13,1.62-6.56.71s1.11-2.74,3.53-5.19c.6-.62,1.27-1.27,2-2s1.41-1.49,2.18-2.28C340.94,158.34,342.52,156.53,344.09,154.54Z"/><path class="cls-8" d="M53.84,333.37C68.95,322.28,75.23,303,79.9,284.86A691.24,691.24,0,0,0,99.31,169.51l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370.19,170s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62L289,560a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.62,472,52.12,407.48,52.93,334.49"/><path class="cls-15" d="M366.79,83c3.56-9.19,4.7-18.51,5.61-25.39s1.67-11.38,3.11-11.5,3.15,4.16,4.11,11.49a63.11,63.11,0,0,1,.29,13.08,57.22,57.22,0,0,1-3.61,16A46.21,46.21,0,0,1,367.44,101a36.74,36.74,0,0,1-11,8.3,22.84,22.84,0,0,1-8.9,2.45c-2.21.06-3.45-.39-3.59-1.06-.32-1.48,3.72-3.27,8.61-7.49A48.83,48.83,0,0,0,360.21,95,53.81,53.81,0,0,0,366.79,83Z"/><path class="cls-15" d="M393.72,82.48c.87-4.87,1.17-9.75,1.81-13.49s1.62-6.21,3-6.35,2.93,2,4.17,5.79a32.63,32.63,0,0,1,1.39,6.9,33.45,33.45,0,0,1-.35,9,27.19,27.19,0,0,1-3.21,8.81,20.26,20.26,0,0,1-5.08,5.9,11.07,11.07,0,0,1-4.8,2.28c-1.31.2-2.17-.08-2.53-.67-.73-1.26.54-3.35,1.86-6.32A49.1,49.1,0,0,0,393.72,82.48Z"/><path class="cls-15" d="M363.5,116.33c3.72-2.45,7.13-4.62,9.92-6.06s5-2.06,6-1.12.74,3.29-1,6.3a32.08,32.08,0,0,1-21.71,14.25c-3.46.41-5.77-.25-6.18-1.58s1-3.12,3.44-5.1S359.77,118.77,363.5,116.33Z"/><path class="cls-15" d="M405.25,202a22.88,22.88,0,0,1,7.56-8.1c2.52-1.51,4.63-1.74,5.6-.75s.76,3-.12,5.45a57,57,0,0,1-4.2,8.5,57,57,0,0,1-5.26,7.89c-1.67,2-3.28,3.19-4.65,2.83s-2.2-2.28-2.16-5.22A22.88,22.88,0,0,1,405.25,202Z"/><path class="cls-11" d="M46.05,163.48a38.77,38.77,0,0,1,3.68-7.13,28.5,28.5,0,0,1,4.21-5c2.78-2.58,5.19-3.49,6.27-2.63s.8,3.3-.21,6.55-2.66,7.39-4.44,12-3.35,8.72-4.8,11.81-2.84,5.08-4.27,5-2.54-2.4-2.85-6.18a28.52,28.52,0,0,1,.3-6.56A38.81,38.81,0,0,1,46.05,163.48Z"/><path class="cls-11" d="M77.47,109.21a11.49,11.49,0,0,1,6.45-3c2-.16,3.51.49,4.17,1.73a4.9,4.9,0,0,1-.29,4.37,16,16,0,0,1-8.4,7.53,4.9,4.9,0,0,1-4.37-.18c-1.16-.79-1.64-2.38-1.27-4.33A11.49,11.49,0,0,1,77.47,109.21Z"/><ellipse class="cls-11" cx="210.56" cy="221.64" rx="5.11" ry="8.76" transform="translate(-22.94 418.97) rotate(-86.67)"/><path class="cls-9" d="M224.78,442.79h22.94"/><path class="cls-9" d="M20.87,340A35.55,35.55,0,0,1,42,316.79"/><path class="cls-9" d="M442.19,340A35.55,35.55,0,0,0,421,316.79"/><path class="cls-11" d="M36.71,359.23a58.7,58.7,0,0,1,4.48,7.36c1.06,2.29,1.34,4.25.37,5.29s-2.92,1-5.37-.08a19.33,19.33,0,0,1-8-6.91c-2.49-3.68-3.38-8-2.81-11.09a7,7,0,0,1,1.47-3.46,2.37,2.37,0,0,1,2.07-.95c1.42.21,2.44,1.71,3.61,3.43S35.05,356.75,36.71,359.23Z"/><path class="cls-3" d="M306.74,281.15a53.41,53.41,0,0,0-19.38,5.9c-4.86,2.45-8,4.52-9.27,3.52-.59-.47-.59-1.67.1-3.41a20.9,20.9,0,0,1,4.39-6.38,33.08,33.08,0,0,1,4-3.56,37.32,37.32,0,0,1,5.31-3.26,38.1,38.1,0,0,1,28.15-2.45,37.32,37.32,0,0,1,5.79,2.29,33.07,33.07,0,0,1,4.6,2.8,20.9,20.9,0,0,1,5.43,5.52c1,1.6,1.18,2.78.69,3.34-1.07,1.2-4.53-.29-9.74-1.86A53.41,53.41,0,0,0,306.74,281.15Z"/><path class="cls-9" d="M342.4,280.36a49.37,49.37,0,0,0-70.8,6.17"/><path class="cls-16" d="M264.12,323.48c12.85-5.69,25.89-11.31,39.71-13.84s28.68-1.72,41.06,4.94"/><path class="cls-17" d="M326.2,321.18a17.9,17.9,0,0,1-35.79,0c0-9.88,8-13.77,17.9-13.77S326.2,311.3,326.2,321.18Z"/><path class="cls-3" d="M167.36,281.15a53.41,53.41,0,0,1,19.38,5.9c4.86,2.45,8,4.52,9.27,3.52.59-.47.59-1.67-.1-3.41a20.9,20.9,0,0,0-4.39-6.38,33.08,33.08,0,0,0-4-3.56,37.32,37.32,0,0,0-5.31-3.26A38.1,38.1,0,0,0,154,271.51a37.32,37.32,0,0,0-5.79,2.29,33.07,33.07,0,0,0-4.6,2.8,20.9,20.9,0,0,0-5.43,5.52c-1,1.6-1.18,2.78-.69,3.34,1.07,1.2,4.53-.29,9.74-1.86A53.41,53.41,0,0,1,167.36,281.15Z"/><path class="cls-9" d="M131.69,280.36a49.37,49.37,0,0,1,70.8,6.17"/><path class="cls-16" d="M210,323.48c-12.85-5.69-25.89-11.31-39.71-13.84s-28.68-1.72-41.06,4.94"/><path class="cls-17" d="M147.9,321.18a17.9,17.9,0,0,0,35.79,0c0-9.88-8-13.77-17.9-13.77S147.9,311.3,147.9,321.18Z"/><path class="cls-9" d="M206,498.28A59.24,59.24,0,0,0,236,503c14.26-1.51,29.15-10,32.35-24"/><circle class="cls-2" cx="237.17" cy="528.6" r="10.55" transform="translate(-329.15 406.34) rotate(-53.65)"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg
new file mode 100644
index 00000000..746e4b88
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485.29 648.83"><defs><style>.cls-1{fill:#485d63;}.cls-2{fill:#dfe7ea;}.cls-3{fill:#f0d7c2;}.cls-4{fill:#e8bc70;}.cls-5{fill:#9e8863;}.cls-6{fill:#eace9b;}.cls-7{fill:#ebcbac;}.cls-8{fill:#d7ad8c;}.cls-9{fill:#fff;}.cls-10{fill:#ebdce8;}.cls-11,.cls-12,.cls-13,.cls-15,.cls-16{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-11{stroke-linecap:square;}.cls-11,.cls-15,.cls-16{stroke-width:10px;}.cls-12,.cls-13{stroke-width:8px;}.cls-13,.cls-15{stroke-linecap:round;}.cls-14{fill:#dcb79b;}.cls-17{fill:#325560;}.cls-18{fill:#f9d7a5;}.cls-19{fill:#aa9777;}</style></defs><title>Asset 110</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M443.55,323.66c2.62-14.83,4.62-26.94,6.06-26.84s1.64,12.6-1,27.72-7.13,26.8-8.45,26.42S441,338.5,443.55,323.66Z"/><ellipse class="cls-2" cx="268.35" cy="594.61" rx="184.33" ry="54.22"/><path class="cls-3" d="M428.34,469.65c0-8.3,16.78-.48,23.63-5.16s12-11.49,16-18.79c17.05-31.58,10.19-74.24-15.9-98.88H412.62V469.59S428.34,471.71,428.34,469.65Z"/><path class="cls-4" d="M434.11,381c-9.53,46,36-85,40.14-131.84A277.35,277.35,0,0,0,475.52,220a190.51,190.51,0,0,0-21.46-84.42c-9.77-18.73-24.42-37-45-41.73H276.62V389.38S434.59,378.69,434.11,381Z"/><path class="cls-5" d="M472.25,252.2C468.11,299,422.58,430,432.11,384c.12-.56-8.91-.38-22.68.23,8.3-26.32,15.11-53,19.16-80.32,7-47.44,5.38-96.92-11.08-142a79.81,79.81,0,0,1-9.11,39,99.38,99.38,0,0,0-66.89-53.24,146.34,146.34,0,0,1-3.3,57.77,113.39,113.39,0,0,0-63.59-35.83V96.83H407.05c20.59,4.74,35.24,23,45,41.73A190.51,190.51,0,0,1,473.52,223,276.87,276.87,0,0,1,472.25,252.2Z"/><path class="cls-4" d="M358.56,191.68c18.18-3.38,30.29-20.74,37.35-37.83A161.36,161.36,0,0,0,407.4,107,85.23,85.23,0,0,0,382.46,38.8h0A82.69,82.69,0,0,0,364,24.87C291.64-14.73,216.06,17,145.47,66.21,71.2,118,29.88,211,34.33,301.46c1.21,24.66,5.52,49.05,8,73.62,3,30.75,3.14,61.7,3.24,92.6.09,28.69.18,57.42-2,86s-9.05,60.95-33.71,75.78C25,638.32,41.63,645.8,59.15,645.74c32.19-.11,59.91-26.75,69.67-57.43s4.74-64.17-4.61-95"/><path class="cls-6" d="M127.21,490.34c9.35,30.8,14.36,64.3,4.61,95s-37.48,57.33-69.67,57.43c-17.52.06-34.2-7.41-49.34-16.24.81-.49,1.59-1,2.36-1.51,40.57-1.44,79.75-27.29,96.16-64.58a37.9,37.9,0,0,1-38,.64A52.25,52.25,0,0,0,111.77,525a51.18,51.18,0,0,1-32.54,2.87c10.53-2.58,18.3-12,22.13-22.1s4.42-21.18,5.43-32c1.93-20.56,5.55-41.07,12.68-60.45,15.06-40.93,44.72-74.4,74.56-106.4q7.86,36.69,19.35,72.48Z"/><path class="cls-7" d="M115.17,463.89C130.26,540.2,184.36,587,245.46,628.51c8.84,6,18.31,12.23,29,12.65,10.49.41,20.28-4.85,29.28-10.26,49.1-29.54,94.28-70.57,113.42-124.58,13-36.78,13.08-76.71,13-115.73-.09-35-1-72.74-21.94-100.84-13.87-18.64-36-32.23-42.17-54.64-4.65-16.91,0-38.12-16.91-48a29.44,29.44,0,0,0-9.22-3.32c-27.55-5.42-55,14.79-81.91,8.28-11.58-2.8-21.58-10.31-33.12-13.26-15-3.84-31.36.63-44.2,9.35s-22.58,21.33-30.6,34.61c-28.1,46.52-37,101.94-42.33,156l0,.43a214,214,0,0,0,3.08,62.46Z"/><path class="cls-3" d="M418.83,302s34.47,218.5-141.37,339.17c-8.65,5.93,20.28-4.85,29.27-10.26,49.1-29.54,94.28-70.57,113.43-124.58,13-36.78,13.08-76.71,13-115.73-.08-30.16-.78-62.3-14.31-88.6"/><path class="cls-8" d="M367.25,203.16c-.15.26-.31.51-.47.77-17,27.27-46.39,49.11-78.51,48-11.52-.41-23-3.7-34.44-2.2-17.75,2.32-32,15.69-42.92,29.89C168,335.51,159.1,412.77,176.93,481c7.78,29.76,20.24,58.34,25.29,88.69a75.28,75.28,0,0,1,.81,21.66c-39.62-33.48-70.95-73.23-81.86-128.43l-4.39-22.2a213.9,213.9,0,0,1-3.08-62.46c0-.14,0-.28,0-.43,5.35-54.09,14.23-109.5,42.33-156,8-13.29,17.76-25.89,30.6-34.62s29.16-13.18,44.2-9.34c11.55,3,21.54,10.46,33.12,13.25,26.94,6.51,54.36-13.7,81.92-8.28a29.37,29.37,0,0,1,9.22,3.32C362.15,190.21,365.45,196.27,367.25,203.16Z"/><path class="cls-9" d="M384.43,338.52c-13.54,10.91-12.77,39.26-34.85,41-14.66,1.18-44.11-16.07-34.5-26.74,5-5.5,25-11.47,25-11.47Z"/><path class="cls-10" d="M384.43,338.52c-13.53,10.91-12.77,39.26-34.85,41-14.66,1.19-44.11-16.07-34.5-26.74a15.69,15.69,0,0,1,3.11-2.48c4.63,9.4,24.27,19.12,35.39,18.22,16.34-1.32,20.17-17.18,26.54-29.76Z"/><path class="cls-8" d="M356,316.88c-12.09,1.06-22.72,5.35-30.26,9.22s-12.51,7-14.47,5.49c-.92-.74-.92-2.6.15-5.33a32.62,32.62,0,0,1,6.86-10,51.64,51.64,0,0,1,6.32-5.55,58.26,58.26,0,0,1,8.29-5.08,59.48,59.48,0,0,1,43.94-3.83,58.26,58.26,0,0,1,9,3.57,51.62,51.62,0,0,1,7.18,4.38,32.64,32.64,0,0,1,8.47,8.62c1.53,2.5,1.85,4.33,1.07,5.22-1.66,1.87-7.07-.45-15.21-2.9S368.11,315.84,356,316.88Z"/><path class="cls-11" d="M411.69,319.94a77.07,77.07,0,0,0-110.53,9.63"/><path class="cls-12" d="M300.9,360.34c13.2-7.76,26.61-15.47,41.26-19.92s30.84-5.43,45.06.23"/><path class="cls-13" d="M313.72,357c5.68,13.18,20.84,23.93,35.5,22.74,22.08-1.78,20.31-29.13,33.85-40"/><path class="cls-14" d="M365.83,389.68a35.49,35.49,0,0,1-7.48,2.76,30.48,30.48,0,0,1-3.43.6,22.93,22.93,0,0,1-3,.2c-3.71,0-5.91-.66-5.87-1s2.27-.36,5.74-.84c.87-.12,1.81-.26,2.81-.49s2.06-.49,3.17-.78a39.27,39.27,0,0,0,13.18-6.78c.88-.73,1.75-1.4,2.48-2.12s1.43-1.37,2-2c2.4-2.54,3.67-4.38,4-4.18s-.46,2.33-2.63,5.33a22.9,22.9,0,0,1-1.92,2.33,30.56,30.56,0,0,1-2.48,2.44A35.49,35.49,0,0,1,365.83,389.68Z"/><path class="cls-14" d="M324.31,390.28a20.85,20.85,0,0,1-5.91-3.69c-1.32-1.22-1.92-2.18-1.69-2.44.49-.55,3.92,1.86,8.59,3.78s8.77,2.73,8.72,3.47c0,.34-1.13.6-2.93.51A20.86,20.86,0,0,1,324.31,390.28Z"/><path class="cls-9" d="M163.16,338.52c13.54,10.91,12.77,39.26,34.85,41,14.66,1.18,44.11-16.07,34.5-26.74-5-5.5-25-11.47-25-11.47Z"/><path class="cls-10" d="M163.16,338.52c13.53,10.91,12.77,39.26,34.85,41,14.66,1.19,44.11-16.07,34.5-26.74a15.69,15.69,0,0,0-3.11-2.48c-4.63,9.4-24.27,19.12-35.39,18.22-16.34-1.32-20.17-17.18-26.54-29.76Z"/><path class="cls-8" d="M191.58,316.88c12.09,1.06,22.72,5.35,30.26,9.22s12.51,7,14.47,5.49c.92-.74.92-2.6-.15-5.33a32.62,32.62,0,0,0-6.86-10,51.64,51.64,0,0,0-6.32-5.55,58.26,58.26,0,0,0-8.29-5.08,59.48,59.48,0,0,0-43.94-3.83,58.26,58.26,0,0,0-9,3.57,51.62,51.62,0,0,0-7.18,4.38,32.64,32.64,0,0,0-8.47,8.62c-1.53,2.5-1.85,4.33-1.07,5.22,1.66,1.87,7.07-.45,15.21-2.9S179.48,315.84,191.58,316.88Z"/><path class="cls-11" d="M135.9,319.94a77.07,77.07,0,0,1,110.53,9.63"/><path class="cls-12" d="M246.69,360.34c-13.2-7.76-26.61-15.47-41.26-19.92s-30.84-5.43-45.06.23"/><path class="cls-13" d="M233.87,357c-5.68,13.18-20.84,23.93-35.5,22.74-22.08-1.78-20.31-29.13-33.85-40"/><path class="cls-14" d="M182.94,387.41a43.84,43.84,0,0,0,6.92,2.76c1.11.29,2.16.61,3.17.78s1.94.37,2.81.49c3.47.47,5.69.44,5.74.84s-2.16,1-5.87,1a22.93,22.93,0,0,1-3-.2,30.47,30.47,0,0,1-3.43-.6,33.07,33.07,0,0,1-14.08-7.24,30.55,30.55,0,0,1-2.48-2.44,22.9,22.9,0,0,1-1.92-2.33c-2.18-3-2.9-5.2-2.63-5.33s1.62,1.63,4,4.18c.61.63,1.26,1.32,2,2s1.6,1.39,2.48,2.12A43.84,43.84,0,0,0,182.94,387.41Z"/><path class="cls-14" d="M222.31,387.93c4.67-1.92,8.1-4.33,8.59-3.78.22.26-.37,1.23-1.69,2.44a21.64,21.64,0,0,1-12.7,5.31c-1.79.09-2.9-.17-2.93-.51C213.54,390.66,217.66,389.9,222.31,387.93Z"/><path class="cls-15" d="M118.17,465.89C133.26,542.2,187.36,589,248.46,630.51c8.84,6,18.31,12.23,29,12.65,10.49.41,20.28-4.85,29.28-10.26,49.1-29.54,94.28-70.57,113.42-124.58,13-36.78,13.08-76.71,13-115.73-.09-35-1-72.74-21.94-100.84-13.87-18.64-36-32.23-42.17-54.64-4.65-16.91,0-38.12-16.91-48a29.44,29.44,0,0,0-9.22-3.32c-27.55-5.42-55,14.79-81.91,8.28-11.58-2.8-21.58-10.31-33.12-13.26-15-3.84-31.36.63-44.2,9.35s-22.58,21.33-30.6,34.61c-28.1,46.52-37,101.94-42.33,156l0,.43a214,214,0,0,0,3.08,62.46Z"/><path class="cls-15" d="M408.06,91.27c20.59,4.74,35.24,23,45,41.73a190.51,190.51,0,0,1,21.46,84.42,277.35,277.35,0,0,1-1.27,29.22c-4.14,46.8-11.45,94.63-40.14,131.84"/><path class="cls-15" d="M431.34,466.89c8.08,1.87,16.78-.48,23.63-5.16s12-11.49,16-18.79c17.05-31.58,10.19-74.24-15.9-98.88"/><polygon class="cls-3" points="274.12 398.32 274.12 484.32 304.12 484.32 274.12 398.32"/><polyline class="cls-11" points="274.28 402.83 273.05 474.82 272.96 479.82"/><path class="cls-9" d="M363.87,259.63c2.39,2.34,5,4.47,7.37,6.54a66.27,66.27,0,0,1,6.23,6,21.72,21.72,0,0,1,3.45,5c.59,1.36.69,2.25.28,2.58s-1.28.1-2.47-.56-2.79-1.64-4.78-2.86-4.34-2.7-7-4.47a59.84,59.84,0,0,1-8.45-6.68,30.66,30.66,0,0,1-6.65-9.31,26.37,26.37,0,0,1-2.3-9,17.4,17.4,0,0,1,.59-6.16c.45-1.41,1-2.13,1.55-2.09,1.1.08,1.66,3,3.17,7.19a39.37,39.37,0,0,0,3.26,6.83A35.88,35.88,0,0,0,363.87,259.63Z"/><ellipse class="cls-9" cx="351.31" cy="225.49" rx="3.83" ry="5.04" transform="translate(-15.6 26.39) rotate(-4.21)"/><path class="cls-1" d="M65.56,459.91c-.07-30.74-1.78-55.72.4-56,1-.13,2.79,6,4.36,16.12.79,5.06,1.49,11.11,2,17.86s.84,14.18.88,22-.25,15.25-.71,22-1.13,12.81-1.88,17.87c-1.49,10.13-3.21,16.28-4.23,16.16C64.22,515.65,65.74,490.65,65.56,459.91Z"/><path class="cls-1" d="M111.93,261.4a45.42,45.42,0,0,1,5.4-11.7c1.89-2.77,3.61-4.19,4.56-3.75,1.93.92.15,8.64-2.65,17.73s-5.74,16.44-7.86,16.11c-1-.18-1.65-2.32-1.64-5.67A45.45,45.45,0,0,1,111.93,261.4Z"/><path class="cls-1" d="M77.62,398.25c-4-26.89-6.89-48.82-4.79-49.26s8.3,21,12.36,48.12,4.42,49.44,2.35,49.63S81.69,425.13,77.62,398.25Z"/><path class="cls-1" d="M427.32,123.89a91.18,91.18,0,0,1,3.08,13c.28,2,.56,4,.67,5.81s.21,3.53.22,5.08c0,6.23-.81,10-1.47,10-1.53,0-1.71-15.08-7.36-32.38C417,108.09,408.4,95.73,409.62,94.82c.52-.4,3.4,2.2,7,7.28.9,1.27,1.85,2.68,2.77,4.26s1.88,3.29,2.83,5.11A91.15,91.15,0,0,1,427.32,123.89Z"/><path class="cls-1" d="M435.53,122.29a80.51,80.51,0,0,1,5,12.58c.55,2,1.09,3.91,1.43,5.73.18.91.38,1.78.5,2.62l.33,2.44c.74,6.25.25,10.13-.4,10.17s-1.55-3.67-3.14-9.47l-.63-2.27c-.22-.79-.51-1.59-.76-2.44-.49-1.69-1.15-3.45-1.79-5.32a107.91,107.91,0,0,0-11.54-22.83c-1.12-1.62-2.14-3.2-3.22-4.6-.53-.71-1-1.41-1.51-2.06L418.35,105c-3.72-4.72-6.25-7.57-5.76-8.15s3.83,1.41,8.42,5.71l1.77,1.72c.61.6,1.19,1.28,1.81,2,1.27,1.35,2.48,2.91,3.77,4.55A80.56,80.56,0,0,1,435.53,122.29Z"/><path class="cls-1" d="M437.62,333.7c-.34-15.36-3.9-27.55-2.48-28.05.63-.22,2.37,2.59,4.09,7.59a64,64,0,0,1,2.31,9,74.61,74.61,0,0,1,.62,22.7,63.92,63.92,0,0,1-1.82,9.1c-1.44,5.09-3,8-3.67,7.8C435.24,361.42,438.12,349.06,437.62,333.7Z"/><path class="cls-16" d="M433.65,395.23a27.4,27.4,0,0,1,25.66,32.54"/><path class="cls-17" d="M184.12,352.09a15.92,15.92,0,1,0,31.84,0c0-8.79-7.13-13.92-15.92-13.92S184.12,343.29,184.12,352.09Z"/><circle class="cls-9" cx="206.12" cy="357.33" r="2.5"/><path class="cls-17" d="M364,352.09a15.92,15.92,0,1,1-31.84,0c0-8.79,7.13-13.92,15.92-13.92S364,343.29,364,352.09Z"/><circle class="cls-9" cx="341.95" cy="357.33" r="2.5"/><circle class="cls-3" cx="314.12" cy="599.33" r="11.5"/><path class="cls-8" d="M332.64,526.83c-1.48,3.18-4.8,5.06-8.08,6.31-13,5-25.52,2.38-36.86-5-4.46,3.84-9.18,5.62-14.07,5.29l.4-5.84c3.77.25,7.57-1.5,11.3-5.23l1.72-1.72,2,1.37c7.57,5.19,36.55-.44,42.56-1.18"/><path class="cls-8" d="M209.56,521.86c-3.46-2.9-5.74-5-5.94-5l3-3c6,.75,45.11,13.37,52.68,8.18l2-1.37,1.72,1.72c3.73,3.73,7.53,5.48,11.3,5.23l.4,5.84c-4.88.33-9.61-1.44-14.07-5.29-1.94,1.26-5.62,2.48-10,3.53A46.93,46.93,0,0,1,209.56,521.86Z"/><path class="cls-16" d="M271.67,524.41c3.93.27,8.6-1.11,13.57-6.08,0,0,1.62,1.11,4.16,2.68A33,33,0,0,0,330,516.25h0"/><path class="cls-16" d="M272.36,524.41c-3.93.27-8.6-1.11-13.57-6.08l-.1.07a37.13,37.13,0,0,1-47.07-4.52l-3.53-3.53"/><path class="cls-18" d="M390.67,49.67a524.8,524.8,0,0,0-73-15.76c-22.42-3.1-45.46-4.46-67.51.61-21.72,5-42.56,16.9-54.62,35.6a34.67,34.67,0,0,0,4.79-12.35c.11-.6.21-1.2.28-1.8a71.27,71.27,0,0,0-45.38,38.41,54.12,54.12,0,0,0,4-14.52,52.4,52.4,0,0,0,.43-8.21,96.11,96.11,0,0,0-45.21,47.18c-.65,1.46-1.26,3-1.82,4.45a1.23,1.23,0,0,0-.32-.17c-1.85-.64-3.67.94-4.91,2.45a58.38,58.38,0,0,0-12.54,27.11l-.06-9.87-.51.44a66.28,66.28,0,0,0-22.54,56.07q-.63-3-1.27-6c-.38.65-.75,1.3-1.12,2a87.78,87.78,0,0,0-9.45,57.92A37.49,37.49,0,0,0,54,243.29c-.67-.81-1.38-1.6-2.12-2.35a73.15,73.15,0,0,0-.2,50.58,11.34,11.34,0,0,0-3.33-3q-.41-.24-.84-.45c-.5,15.72-.26,31.47.71,47.16q-2.35-2.53-4.63-5.15c-2.08-8.34-4.19-16.69-6.18-25.05.35,6.55.92,13.09,1.61,19.61-.4-.47-.78-1-1.15-1.43-.68-6.57-1.22-13.15-1.55-19.75q-.3-6.09-.32-12.19a276.58,276.58,0,0,1,2.33-35,282.81,282.81,0,0,1,8.88-42.43,275.52,275.52,0,0,1,52.85-100.1,243.92,243.92,0,0,1,47.39-43.55c9.57-6.67,19.23-13,29-18.91,1.1-1.38,2.25-2.74,3.43-4.06,21-12.49,42.38-22.77,63.85-29.51q-3.33,2-6.52,4.15C280.13,7,323.61,5.69,366,28.88a79.64,79.64,0,0,1,9.72,6.31,87,87,0,0,1,15,14.48Z"/><path class="cls-15" d="M358.56,189.68c18.18-3.38,30.29-20.74,37.35-37.83A161.36,161.36,0,0,0,407.4,105,85.23,85.23,0,0,0,382.46,36.8h0A82.69,82.69,0,0,0,364,22.87C291.64-16.73,216.06,15,145.47,64.21,71.2,116,29.88,209,34.33,299.46c1.21,24.66,5.52,49.05,8,73.62,3,30.75,3.14,61.7,3.24,92.6.09,28.69.18,57.42-2,86s-9.05,60.95-33.71,75.78C25,636.32,41.63,643.8,59.15,643.74c32.19-.11,59.91-26.75,69.67-57.43s4.74-64.17-4.61-95"/><path class="cls-1" d="M46.16,273.53c3.26,8.9,6.48,17,8.51,23s2.9,10,1.93,10.42-3.52-2.66-6.84-8.14A133.92,133.92,0,0,1,39,276.15,109.19,109.19,0,0,1,35,262.74c-.42-2.12-.83-4.12-1.06-6-.12-1-.26-1.87-.34-2.76l-.18-2.56c-.35-6.55.52-10.59,1.53-10.63s2.16,3.78,3.82,9.76l.65,2.35.75,2.53c.48,1.75,1.09,3.6,1.67,5.55C43.12,264.82,44.55,269.08,46.16,273.53Z"/><path class="cls-1" d="M54.21,234.57c1.33,3.41,2.73,6.6,4.06,9.5.7,1.43,1.32,2.82,2,4.08s1.23,2.47,1.78,3.57c2.2,4.38,3.55,7.28,2.72,8s-3.63-1-7.18-4.91a39.82,39.82,0,0,1-2.72-3.31c-1-1.22-1.84-2.6-2.78-4.06a61.19,61.19,0,0,1-8.07-21c-.28-1.71-.55-3.34-.66-4.88a39.84,39.84,0,0,1-.19-4.28c0-5.25,1-8.44,2-8.45s2,3,3.34,7.76c.33,1.18.66,2.47,1.07,3.84s.83,2.83,1.27,4.36C51.81,227.84,52.91,231.15,54.21,234.57Z"/><path class="cls-1" d="M69.46,183.31A92.69,92.69,0,0,0,72,193.87c.54,1.58,1,3.13,1.55,4.52.27.7.49,1.4.75,2l.76,1.87c2,4.78,3.38,7.85,2.51,8.56-.41.33-1.31,0-2.6-1q-.49-.36-1-.84c-.36-.32-.72-.7-1.11-1.11A26.41,26.41,0,0,1,70.36,205l-1.3-1.82c-.44-.64-.83-1.35-1.26-2.07a45.69,45.69,0,0,1-2.42-4.77,51.11,51.11,0,0,1-4.07-24A45.6,45.6,0,0,1,62,167c.17-.82.3-1.61.5-2.36l.63-2.14A26.44,26.44,0,0,1,64.53,159c.23-.51.45-1,.68-1.41s.48-.8.71-1.14c.9-1.34,1.63-2,2.13-1.79,1.05.38.72,3.75.45,8.91l-.1,2c0,.7,0,1.43,0,2.18-.07,1.5,0,3.1,0,4.77A92.67,92.67,0,0,0,69.46,183.31Z"/><path class="cls-1" d="M89,131.24a74.29,74.29,0,0,1,2.76-13.29c.66-2,1.28-3.86,2-5.56.37-.85.69-1.68,1.07-2.45l1.12-2.2c3-5.56,5.78-8.38,6.65-7.89s-.08,4.2-1.62,9.9l-.61,2.23c-.21.77-.38,1.59-.6,2.43-.45,1.66-.8,3.47-1.23,5.34-.76,3.78-1.48,7.93-2,12.33s-.65,8.62-.72,12.47c0,1.92,0,3.76.06,5.48,0,.86,0,1.7.06,2.5l.11,2.31c.29,5.9.53,9.7-.54,10s-3.08-3.06-4.81-9.13l-.63-2.39c-.21-.84-.35-1.72-.52-2.63-.37-1.82-.58-3.79-.8-5.87A74.3,74.3,0,0,1,89,131.24Z"/><path class="cls-1" d="M113.68,100.1a74.8,74.8,0,0,1,7.45-12.67,63.61,63.61,0,0,1,4.07-4.95c.68-.74,1.31-1.47,2-2.11l2-1.83a37.12,37.12,0,0,1,3.55-2.91c.54-.4,1-.77,1.54-1.09s1-.57,1.39-.8c1.7-.91,2.78-1.21,3.12-.8.72.86-1.83,4.07-5.57,9.22l-1.46,2c-.51.7-1,1.47-1.51,2.23-1.08,1.51-2.09,3.22-3.21,5a126.11,126.11,0,0,0-6.32,11.89,126.2,126.2,0,0,0-4.81,12.58c-.58,2-1.2,3.88-1.63,5.68-.23.9-.5,1.76-.69,2.6l-.56,2.43c-1.43,6.2-2.17,10.24-3.29,10.26-.53,0-1-1-1.45-2.88q-.16-.7-.31-1.57c-.09-.57-.13-1.2-.19-1.87a37.14,37.14,0,0,1-.14-4.59l.1-2.67c0-.93.18-1.89.29-2.88A63.54,63.54,0,0,1,109,114,74.81,74.81,0,0,1,113.68,100.1Z"/><path class="cls-1" d="M154,73.71A101.68,101.68,0,0,1,161.36,60c1.33-2,2.6-3.88,3.92-5.55.65-.84,1.26-1.66,1.9-2.42L169,49.87c4.85-5.38,8.61-7.92,9.35-7.24,1.66,1.52-9.16,15-17.39,34.15-8.45,19.07-11,36.15-13.21,36-1-.08-1.69-4.56-1.05-11.78l.3-2.82c.12-1,.31-2,.48-3,.32-2.11.85-4.32,1.4-6.65A101.72,101.72,0,0,1,154,73.71Z"/><path class="cls-1" d="M202.65,42a130.36,130.36,0,0,1,14.27-14.29c2.4-2,4.67-3.85,6.94-5.42,1.13-.8,2.19-1.6,3.26-2.29l3.11-2c2-1.27,3.86-2.23,5.51-3.09.83-.42,1.59-.82,2.32-1.15s1.41-.59,2-.83c2.46-.94,3.93-1.23,4.19-.77.56,1-4,4.45-10.88,10.24l-2.7,2.28c-.94.79-1.87,1.67-2.86,2.54-2,1.71-4,3.69-6.18,5.7-4.23,4.13-8.73,8.82-13.15,14s-8.25,10.43-11.62,15.29c-1.62,2.47-3.24,4.78-4.59,7-.69,1.12-1.41,2.18-2,3.24l-1.79,3c-4.56,7.77-7.22,12.82-8.28,12.43-.5-.18-.45-1.68.07-4.26q.19-1,.48-2.14c.2-.77.47-1.59.75-2.48.58-1.76,1.21-3.8,2.13-5.94L185,69.82c.51-1.18,1.12-2.36,1.72-3.6,1.17-2.5,2.65-5.05,4.19-7.75A130.38,130.38,0,0,1,202.65,42Z"/><path class="cls-1" d="M404.92,184.19A38,38,0,0,1,412,199.47c.83,4.26.44,7-.22,7s-1.62-2.32-3.23-6a65.1,65.1,0,0,0-7.68-13.26A56.35,56.35,0,0,0,395.3,181a40.81,40.81,0,0,0-5.17-4.37c-3.08-2.17-5.53-2.54-5.57-3.28,0-.34.64-.73,1.93-.86a11.71,11.71,0,0,1,5.3.94,26.48,26.48,0,0,1,6.61,4A38.63,38.63,0,0,1,404.92,184.19Z"/><path class="cls-1" d="M426.85,221.88c-3.16-30-9.14-53.8-7.67-54.21.64-.18,3,5.57,5.63,15.23,1.33,4.82,2.68,10.63,3.94,17.13s2.34,13.7,3.18,21.3,1.25,14.87,1.45,21.49.08,12.58-.19,17.58c-.52,10-1.57,16.12-2.24,16.08C429.42,276.39,430.17,251.84,426.85,221.88Z"/><path class="cls-19" d="M380.87,146.32A106.55,106.55,0,0,0,391,112.41a124.37,124.37,0,0,0,.3-29.22c-1.82-16.69-6.12-26.48-5-27,.44-.21,2.1,2,4.21,6.39a72.26,72.26,0,0,1,3.24,8.3,88.36,88.36,0,0,1,2.92,11.47A110,110,0,0,1,398,113.2a103.85,103.85,0,0,1-10.25,36.55,85.57,85.57,0,0,1-18,24.27l-4.9,4.58-1.2-6.53c-1.62-8.83-4.94-17-7.77-24.34l-2.08-5.41c-.66-1.78-1.27-3.33-1.94-4.88a69.07,69.07,0,0,0-4.23-8.2,59.88,59.88,0,0,0-8-10.43c-2.15-2.25-3.42-3.45-3.18-3.84s1.94.18,4.73,2a41.67,41.67,0,0,1,10.23,9.73,61.38,61.38,0,0,1,5.38,8.41c.83,1.57,1.68,3.34,2.43,5l2.41,5.24c1.65,3.62,3.4,7.5,5,11.7a85.72,85.72,0,0,1,4.18,13.7l-6.1-2A84.44,84.44,0,0,0,380.87,146.32Z"/><path class="cls-5" d="M355.62,172.83c.9,6.31-1.07,6.63-1,13-1.26-1.84-16.19-21.71-17.49-23.52-9.26-12.88-20.25-25.65-35.12-31.05l-.86-.31c-8.47-2.9-17.55-3.15-26.53-2.35l-2,.19c-1.94.21-3.88.46-5.8.74a206.66,206.66,0,0,0-62.9,19.75c-7.52,3.76-15,8.21-20.48,14.49a112.31,112.31,0,0,1,27.42-27.11c17.7-12.23,39.63-21,61.76-23.36l2-.2a100.49,100.49,0,0,1,29.26,1.53c22,4.57,34.59,18.37,42.26,35.86C344,149.82,357.85,173.33,355.62,172.83Z"/><path class="cls-16" d="M164.14,208.58c8-29.33,23.69-55.63,48.72-72.92,26.11-18,61.42-28.59,93-22,36.59,7.59,47.1,40.71,52.4,73.85"/><path class="cls-1" d="M215.74,147.22a100.7,100.7,0,0,1,26.07-3.78c6.69-.08,10.83.5,10.94,1.54s-3.87,2.39-10.3,3.84-15.26,3.05-24.56,5.75a101.18,101.18,0,0,0-22.64,9.55c-5.48,3.16-8.72,5.67-9.56,4.92-.38-.35-.08-1.46,1-3.12a30.21,30.21,0,0,1,5.4-6.17,51.65,51.65,0,0,1,10-6.95A70.64,70.64,0,0,1,215.74,147.22Z"/><path class="cls-1" d="M309.26,130.58a66.63,66.63,0,0,1,7.25,11.53,56.48,56.48,0,0,1,2.3,5.48c.31.88.63,1.71.87,2.54l.65,2.39a32.74,32.74,0,0,1,.81,4.18c.08.62.17,1.19.2,1.73s0,1,0,1.48c0,1.79-.29,2.81-.81,2.92-1.09.23-2.67-3.22-5.32-8.44l-1-2c-.36-.71-.79-1.42-1.19-2.17-.78-1.52-1.75-3.06-2.7-4.71A99.37,99.37,0,0,0,295,126.14c-1.39-1.31-2.66-2.61-4-3.71-.64-.56-1.23-1.15-1.84-1.66l-1.75-1.48c-4.47-3.77-7.47-6.1-7-7.11.23-.48,1.28-.5,3-.11q.66.15,1.44.37c.51.16,1.05.37,1.64.6a32.82,32.82,0,0,1,3.88,1.75l2.18,1.18c.75.42,1.49.93,2.27,1.43a56.59,56.59,0,0,1,4.8,3.5A66.67,66.67,0,0,1,309.26,130.58Z"/><path class="cls-1" d="M61.4,607.71a117.32,117.32,0,0,0,16.11-10.4C79.9,595.56,82,593.67,84,592l2.81-2.59c.45-.42.91-.81,1.33-1.22L89.4,587c6.42-6.34,10-10.83,11-10.22.82.48-1.2,6.11-6.94,13.78L92.38,592c-.39.49-.81,1-1.23,1.47l-2.67,3.08c-2,2-4.05,4.2-6.49,6.23a91.29,91.29,0,0,1-17,11.7A88.58,88.58,0,0,1,45.76,622l-2.27.6c-.75.17-1.51.31-2.24.46-1.48.27-2.9.6-4.3.78a74.11,74.11,0,0,1-7.8.73c-1.2,0-2.32.09-3.41.1a8.86,8.86,0,0,1-3.91-.72,5.16,5.16,0,0,1-1.69-1.33,7,7,0,0,1-.87-1.36c-.39-.8-.62-1.42-.83-1.84a2.56,2.56,0,0,0-.66-.9,2.74,2.74,0,0,0-.69-.47c-.39-.21-.81-.1-1-.27s-.14-.24-.06-.49a1.5,1.5,0,0,1,.83-.77,3.81,3.81,0,0,1,3.89,1c.63.58,1.11,1.22,1.58,1.73a3.45,3.45,0,0,0,.65.58,1,1,0,0,0,.5.16,7.4,7.4,0,0,0,1.91-.18l3.16-.63c2.22-.36,4.61-1,7.18-1.58,1.28-.3,2.58-.73,3.93-1.09l2-.58,2.07-.7A112.21,112.21,0,0,0,61.4,607.71Z"/><path class="cls-1" d="M93.87,544.17a90.31,90.31,0,0,0,6.1-6.67c.85-1.1,1.72-2.12,2.44-3.14.37-.51.76-1,1.1-1.46l1-1.38c2.5-3.52,4.14-5.89,5.2-5.56s1.14,3.36-.35,8l-.63,1.79c-.23.62-.53,1.23-.83,1.88a37.89,37.89,0,0,1-2.15,4,42.83,42.83,0,0,1-14.82,14.37,37.88,37.88,0,0,1-4.06,2c-.66.27-1.28.56-1.9.77l-1.8.58c-4.65,1.34-7.72,1.07-8,.1s2.12-2.63,5.72-5l1.41-.93c.49-.32,1-.7,1.49-1.05,1-.69,2.09-1.53,3.22-2.34A90.35,90.35,0,0,0,93.87,544.17Z"/><path class="cls-1" d="M95.45,496.29c2.6-8.77,4-17.18,5.28-23.3s2.5-10,3.56-9.87,1.74,4,1.83,10.4a86.21,86.21,0,0,1-3.33,25,60.1,60.1,0,0,1-5.63,13.06A44.34,44.34,0,0,1,90,520.81a26.34,26.34,0,0,1-6.29,4.73c-1.68.84-2.78,1-3.09.6-.67-.9,2-3.78,5.2-8.78A80.56,80.56,0,0,0,95.45,496.29Z"/><path class="cls-9" d="M306.51,19.4a82.38,82.38,0,0,1,10.9,3.14,62.75,62.75,0,0,1,8.43,3.81c4.63,2.56,7.07,4.86,6.63,5.79-1,2-12.76-2.18-27.55-5.25s-27.21-4.21-27.31-6.4c0-1,3.14-2.13,8.41-2.59a62.76,62.76,0,0,1,9.26-.06A82.38,82.38,0,0,1,306.51,19.4Z"/><path class="cls-9" d="M357.75,44.44a32.45,32.45,0,0,1,6.12,10.68c1,3.06.87,5.19-.07,5.63s-2.59-.79-4.62-2.92-4.52-5.16-7.29-8.45-5.32-6.26-7.09-8.62-2.71-4.17-2.09-5,2.71-.57,5.56.89A32.45,32.45,0,0,1,357.75,44.44Z"/><path class="cls-9" d="M367.32,553.4c2.58-2.66,5-5.26,7.12-7.65l5.7-6.46c3.28-3.7,5.55-6,6.51-5.45s.28,3.75-2,8.45a57.59,57.59,0,0,1-4.68,7.85,71.75,71.75,0,0,1-15.58,16,57.59,57.59,0,0,1-7.72,4.89c-4.64,2.4-7.87,3.11-8.39,2.22s1.66-3.27,5.27-6.65l6.31-5.87C362.19,558.5,364.72,556,367.32,553.4Z"/><path class="cls-9" d="M399.53,493.29c2-9.66,4.13-17.57,6.27-17.45,1,.08,1.87,2.22,2.19,5.66a52.17,52.17,0,0,1-5.22,25.92c-1.63,3.06-3.22,4.71-4.21,4.38C396.53,511.09,397.61,503,399.53,493.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg
new file mode 100644
index 00000000..b2432f22
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586.2 682.51"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#b0d7e9;}.cls-3{fill:#54b9d3;}.cls-4{fill:#f2c7a5;}.cls-20,.cls-5{opacity:0.5;}.cls-6{fill:#ffac89;}.cls-14,.cls-7{fill:none;stroke-miterlimit:10;stroke-width:10px;}.cls-7{stroke:#274b5b;}.cls-20,.cls-8{fill:#ef997b;}.cls-9{fill:#fcdac3;}.cls-10{fill:#fff;}.cls-11{fill:#274b5b;}.cls-12{fill:#3b535c;}.cls-13{fill:#d9edf4;}.cls-14{stroke:#42565e;stroke-linecap:round;}.cls-15{fill:#ebcbac;}.cls-16{fill:#d7ad8c;}.cls-17{fill:#3f565e;}.cls-18{fill:#f2dcca;}.cls-19{fill:#ce956e;}</style></defs><title>Asset 100</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="289.02" cy="618.52" rx="184.33" ry="54.22"/><path class="cls-2" d="M518.48,204.9l16.76,4.24,42.08,10.65a7.19,7.19,0,0,1,2.5,12.76L516.64,279a7.19,7.19,0,0,0-.88,10.82l54.39,55.65a7.19,7.19,0,0,1-1.52,11.23l-60.92,35.54a7.19,7.19,0,0,0-3,9l23.9,56.16a7.19,7.19,0,0,1-7.12,10L448.38,459l-305.16,3.1L67.8,467.44a7.19,7.19,0,0,1-7.12-10l23.9-56.16a7.19,7.19,0,0,0-3-9L20.67,356.73a7.19,7.19,0,0,1-1.52-11.23l54.39-55.65A7.19,7.19,0,0,0,72.65,279L9.48,232.55A7.19,7.19,0,0,1,12,219.79l44.73-11.32,23.55-6L125.78,191,90.1,107.72A7.19,7.19,0,0,1,98.83,98l119.89,37.21L233.83,14.4a7.19,7.19,0,0,1,13.82-1.75l45.43,114.84"/><path class="cls-2" d="M492,198.21,463.51,191l35.69-83.27a7.19,7.19,0,0,0-8.74-9.7L370.57,135.23l-6.09-48.76-3.73-29.86L355.46,14.4a7.19,7.19,0,0,0-13.82-1.75L296.22,127.48l-7.39,3.1"/><path class="cls-3" d="M233,368q0,46-1.73,92l-86.5.88-75.42,5.37a7.2,7.2,0,0,1-7.13-10l23.9-56.17a7.17,7.17,0,0,0-3-9L22.21,355.52a7.2,7.2,0,0,1-1.52-11.25l54.39-55.64a7.18,7.18,0,0,0-.88-10.81L11,231.34a7.19,7.19,0,0,1,2.49-12.76l44.74-11.32,23.56-5.95,45.51-11.52L91.64,106.5a7.19,7.19,0,0,1,8.75-9.7L142,109.72c-2,20.85-.12,41.93,7.5,61.34,3.36,8.54,7.81,16.73,10,25.65,4.38,18.17-1.25,37.39-10,53.89s-20.63,31.17-30.05,47.31c-5.36,9.22-10,19.27-10.24,29.93s5,22,14.75,26.29c14.89,6.55,31.1-5.22,42.57-16.76S192,312.6,207.88,316c10.25,2.17,18,11.15,21.52,21S233,357.54,233,368Z"/><circle class="cls-4" cx="145.54" cy="410.18" r="47.25"/><g class="cls-5"><path class="cls-6" d="M162,452.3a47.25,47.25,0,1,1-18-90.91,48.21,48.21,0,0,1,6.74.48A47.25,47.25,0,0,0,162,452.3Z"/></g><circle class="cls-7" cx="144" cy="410.18" r="47.25"/><circle class="cls-4" cx="439.86" cy="410.18" r="47.25"/><g class="cls-5"><path class="cls-6" d="M423.36,452.3a47.25,47.25,0,1,0,18-90.91,48.21,48.21,0,0,0-6.74.48,47.25,47.25,0,0,1-11.31,90.43Z"/></g><circle class="cls-7" cx="441.41" cy="410.18" r="47.25"/><path class="cls-4" d="M174.94,538q-4.07-6.33-7.72-13.08c-16.85-31.19-26.7-68.82-26.7-109.33,0-107.79,69.7-195.18,155.68-195.18S451.87,307.81,451.87,415.6,382.17,610.78,296.2,610.78c-39.91,0-76.31-18.83-103.86-49.78"/><g class="cls-5"><path class="cls-8" d="M312.5,609.72a126,126,0,0,1-16.3,1.05c-39.92,0-76.32-18.82-103.86-49.79l-17.4-23q-4.09-6.34-7.73-13.09c-16.85-31.2-26.69-68.82-26.69-109.33,0-107.8,69.69-195.18,155.68-195.18a125.57,125.57,0,0,1,16.26,1.05c-78.33,10.19-139.41,93.2-139.41,194.12,0,40.51,9.84,78.13,26.69,109.33q3.65,6.74,7.73,13.09l17.4,23C248.63,587.7,279,605.37,312.5,609.72Z"/></g><g class="cls-5"><path class="cls-9" d="M278.39,608.72a126,126,0,0,0,16.3,1.05C334.6,609.78,371,591,398.55,560l17.4-23q4.09-6.34,7.73-13.09c16.85-31.2,26.69-68.82,26.69-109.33,0-107.8-69.69-195.18-155.68-195.18a125.57,125.57,0,0,0-16.26,1.05c78.33,10.19,139.41,93.2,139.41,194.12,0,40.51-9.84,78.13-26.69,109.33q-3.65,6.74-7.73,13.09L366,560C342.25,586.7,311.91,604.37,278.39,608.72Z"/></g><path class="cls-7" d="M416.2,294.56c20.42,33,32.58,74.47,32.58,119.49,0,107.79-69.7,195.18-155.68,195.18-39.91,0-76.31-18.83-103.86-49.78"/><path class="cls-7" d="M386.26,257.67a174,174,0,0,1,17.85,19.56"/><path class="cls-7" d="M171.84,536.47q-4.07-6.33-7.72-13.08c-16.85-31.19-26.7-68.82-26.7-109.33,0-107.79,69.7-195.18,155.68-195.18,25.65,0,49.85,7.78,71.19,21.55"/><path class="cls-10" d="M281.08,387.72a43.37,43.37,0,0,1-86.75,0"/><path class="cls-1" d="M279.21,387.62a43.37,43.37,0,1,1-86.75,0h1.36a43.39,43.39,0,0,0,84,0Z"/><path class="cls-7" d="M278,387.72a43.37,43.37,0,0,1-86.75,0"/><circle class="cls-11" cx="233.06" cy="401.66" r="10.84"/><circle class="cls-10" cx="245.46" cy="398.56" r="7.75"/><path class="cls-10" d="M403.46,387.72a43.37,43.37,0,0,1-86.75,0"/><path class="cls-1" d="M400,387.62a43.37,43.37,0,0,1-86.75,0h1.36a43.39,43.39,0,0,0,84,0Z"/><path class="cls-7" d="M400.36,387.72a43.37,43.37,0,1,1-86.75,0"/><circle class="cls-11" cx="355.44" cy="401.66" r="10.84"/><circle class="cls-10" cx="367.83" cy="398.56" r="7.75"/><path class="cls-12" d="M108.89,340.21a50,50,0,0,1-1.71-8.58,50.56,50.56,0,0,1-.16-8.11,45.27,45.27,0,0,1,2.89-13.28,31.43,31.43,0,0,1,4.37-8c1.36-1.67,2.38-2.4,2.82-2.14,1,.57-.72,4.78-2,11.6a62,62,0,0,0-1,12,59.64,59.64,0,0,0,.55,7,55.64,55.64,0,0,0,1.6,7.31c.4,1.21.76,2.43,1.21,3.58a27,27,0,0,0,1.43,3.15,13.38,13.38,0,0,0,1.74,2.56l.47.58.53.52a9.35,9.35,0,0,0,1.1,1,27.49,27.49,0,0,0,10.2,4.72c3.33.91,6.22,1.44,8.21,2s3.12,1,3.11,1.58-1.15,1-3.23,1.39a36.81,36.81,0,0,1-9,.37,31.7,31.7,0,0,1-6.37-1.1,24,24,0,0,1-7.12-3.28,14.79,14.79,0,0,1-1.73-1.33l-.85-.74-.78-.82a19.33,19.33,0,0,1-2.78-3.69,30.37,30.37,0,0,1-2-4.07C109.8,343.06,109.36,341.65,108.89,340.21Z"/><path class="cls-12" d="M137.29,260.49C144,249.27,149.5,240,151.5,240.83c1,.4.82,3.3-.45,7.63a78.09,78.09,0,0,1-17.71,29.88c-3.19,3.19-5.66,4.71-6.48,4.06C125.2,281,130.66,271.75,137.29,260.49Z"/><path class="cls-12" d="M150.36,180c-3.32-14-7.15-25.25-5.2-26.23.93-.45,3.15,1.86,5.66,6.22a75.14,75.14,0,0,1,9.05,37.63c-.25,5-1.17,8.09-2.21,8.11C155.48,205.77,153.78,194,150.36,180Z"/><path class="cls-2" d="M444.61,469.61c26,26,14.79,78.17,15.55,115l-11.74-13a126.89,126.89,0,0,1-30.82,61.49,45.3,45.3,0,0,0-14.28-15.73,95.16,95.16,0,0,1-29.43,50.17,38.29,38.29,0,0,0-1.09-31.66,60.36,60.36,0,0,1-33,36.69,24.83,24.83,0,0,0,2.7-23.94c-12,20.29-46.33,20.91-59,1.06-.88,4-.23,9.28,3.86,9.62-17.23,2.65-33-4.61-44.86-17.39a29,29,0,0,0,9.61,18.79,52.63,52.63,0,0,1-43.78-29.08c-22.23,1.38-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.77,10.18C116,587.24,118.1,499.8,143.26,471c0,0,43.88,33.13,85.07,32.88,25.75-.15,55.88-19.8,85.76-19.93,25-.11,35.94,34.12,52,19.06C408.52,463.13,444.07,469.07,444.61,469.61Z"/><path class="cls-3" d="M461,579.41l-11.74-13a127,127,0,0,1-30.82,61.5,45.32,45.32,0,0,0-14.28-15.73,95.26,95.26,0,0,1-29.43,50.18,38.33,38.33,0,0,0-1.08-31.66,60.34,60.34,0,0,1-33,36.69,24.83,24.83,0,0,0,2.69-23.94c-12,20.3-46.33,20.91-59,1.07-.88,4,.12,18.77,4.22,19.12-17.23,2.65-33.36-14.1-45.22-26.89.68,7.17,2.47,20.1,7.87,24.85-18.36-.94-34.06-18.58-42.05-35.14-22.23,1.39-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.76,10.18c-13.27-6.74-22-21.38-26.76-38.85,17,12.38,37,20.88,56.73,28.49,13.42,5.16,27,10.08,41.15,12.66,13.72,2.49,27.74,2.75,41.69,3,38.71.67,79,1,114-15.61,10-4.76,20.61-12.93,20.26-24-.4-12.69-14.29-19.93-26.14-24.48,25.24-3.74,45.92-23.31,57.43-46.07a140.7,140.7,0,0,0,10.14-27.06l3.39,2.64C453.92,508.44,460.27,542.6,461,579.41Z"/><path class="cls-13" d="M279.44,484.79l-51.11,19.06-84.11-38.17a63.86,63.86,0,0,0-12.41,22,243.36,243.36,0,0,1,51,18,250.66,250.66,0,0,1,23.32,12.64c4.12,2.52,12.77,10.78,17.87,10.15a10.52,10.52,0,0,0,4.23-1.9c46.77-30.08,81.11-31.4,135.95-21.6l-25.77-15Z"/><path class="cls-14" d="M443.74,469.61C461,504.23,464.64,541.56,461,581.14l-11.74-13a126.89,126.89,0,0,1-30.82,61.49,45.3,45.3,0,0,0-14.28-15.73,95.16,95.16,0,0,1-29.43,50.17,38.29,38.29,0,0,0-1.09-31.66,60.36,60.36,0,0,1-33,36.69,24.83,24.83,0,0,0,2.7-23.94c-12,20.29-46.33,20.91-59,1.06-.88,4,6,20,2.13,21.75-17-7.82-31.27-16.74-43.13-29.52.69,7.17,2.46,21,7.87,25.72-18.36-.94-34.06-19.45-42.05-36-22.23,1.38-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.77,10.18c-38.41-19.5-36.36-105.21-11.2-134"/><path class="cls-15" d="M261.78,573.43a10.43,10.43,0,0,1-10.4-10.4V523.29a10.43,10.43,0,0,1,10.4-10.4h72.77a10.43,10.43,0,0,1,10.4,10.4V563a10.43,10.43,0,0,1-10.4,10.4"/><path class="cls-16" d="M346.68,527.62v12.33a10.43,10.43,0,0,0-9.53-6.26H264.38a10.43,10.43,0,0,0-10.4,10.4V571.5a10.29,10.29,0,0,1-.87-4.13V527.62a10.43,10.43,0,0,1,10.4-10.4h72.77A10.43,10.43,0,0,1,346.68,527.62Z"/><path class="cls-17" d="M297.73,509.18c7.51,0,14.84.05,21.92.16l10.42.19,2.54.06,1.26,0h.36l.53,0,1.06.08a17.57,17.57,0,0,1,7.76,2.86,17.26,17.26,0,0,1,7.6,13.23l0,1v.76l0,1.14-.09,2.26-.2,4.41c-.28,5.79-.59,11.18-.94,16.1s-.73,9.37-1.13,13.28l-.15,1.44-.19,1.61a13.71,13.71,0,0,1-.95,3.46,13,13,0,0,1-3.6,4.84,10.45,10.45,0,0,1-7.27,2.58c-1.75-.16-2.53-.78-2.52-1.27s.76-1,1.87-1.75a11.19,11.19,0,0,0,3.55-3.62,8,8,0,0,0,1-3,7.12,7.12,0,0,0,0-1.68l-.29-2.61c-.41-3.91-.79-8.36-1.13-13.28s-.66-10.31-.94-16.1l-.2-4.41-.09-2.26,0-1.14v-.29l0-.11a2,2,0,0,1,0-.2,3.62,3.62,0,0,0-1.85-2.5,3.46,3.46,0,0,0-1.47-.38l-4.35.1-10.42.19c-7.08.1-14.41.16-21.92.16s-14.84-.05-21.92-.16l-10.42-.19-4.35-.1a3.46,3.46,0,0,0-1.47.38,3.62,3.62,0,0,0-1.86,2.5,2,2,0,0,1,0,.2l0,.11v.29l0,1.14-.09,2.26-.2,4.41c-.28,5.79-.59,11.18-.94,16.1s-.73,9.37-1.13,13.28l-.29,2.61a7.13,7.13,0,0,0,0,1.68,8,8,0,0,0,1,3,11.2,11.2,0,0,0,3.55,3.62c1.1.73,1.87,1.19,1.87,1.75s-.78,1.11-2.52,1.27a10.45,10.45,0,0,1-7.27-2.58,13,13,0,0,1-3.6-4.84,13.71,13.71,0,0,1-.95-3.46l-.19-1.61-.15-1.44c-.41-3.91-.79-8.36-1.13-13.28s-.66-10.31-.94-16.1l-.2-4.41-.09-2.26,0-1.14v-.76l0-1a17.26,17.26,0,0,1,7.6-13.23,17.57,17.57,0,0,1,7.76-2.86l1.06-.08.53,0h.36l1.26,0,2.54-.06,10.42-.19C282.89,509.23,290.22,509.18,297.73,509.18Z"/><path class="cls-17" d="M302.86,552.58a54.43,54.43,0,0,0,5.71-1.73,48,48,0,0,0,5-2.23,39.67,39.67,0,0,0,7.71-5.1c2-1.73,3.52-3.4,4.81-4.61s2.25-2,3.11-1.78,1.44,1.34,1.56,3.45a17.79,17.79,0,0,1-2.29,8.39,29.29,29.29,0,0,1-8.6,9.58,38.08,38.08,0,0,1-6.48,3.82,42.55,42.55,0,0,1-7.57,2.62c-1.33.33-2.67.56-4,.77s-2.65.32-3.9.37a47.38,47.38,0,0,1-7.23-.2A41.23,41.23,0,0,1,279,563a23.64,23.64,0,0,1-7-4.26c-1.44-1.37-2-2.56-1.64-3.35.75-1.65,4.79-1.39,10.66-1.18,2.94.11,6.36.18,10.08,0,1.86-.1,3.8-.26,5.79-.51,1-.11,2-.3,2.95-.45S301.87,552.83,302.86,552.58Z"/><path class="cls-17" d="M155.46,490.33A39.37,39.37,0,0,0,156,500a41,41,0,0,0,3.15,9.52,42.44,42.44,0,0,1-5.84-8.6,43.67,43.67,0,0,1-3.52-10.15,47.59,47.59,0,0,1-1-11c0-.93.08-1.86.14-2.79s.15-1.87.31-2.81a36.46,36.46,0,0,1,1.21-5.8l10.41,4.56a25.27,25.27,0,0,0-2,3.8c-.33.69-.58,1.41-.87,2.12l-.76,2.2A40.47,40.47,0,0,0,155.46,490.33Z"/><path class="cls-17" d="M171.41,499.11c.85,7.6,4.25,15.18,9.15,21.74a48.54,48.54,0,0,1-14.67-20.41,39.56,39.56,0,0,1-2.34-13.25,35.77,35.77,0,0,1,2.72-13.91l10,5.38C172.32,484,170.54,491.58,171.41,499.11Z"/><path class="cls-17" d="M200.42,504.82a52.28,52.28,0,0,0,7.09,20.82,55.13,55.13,0,0,1-12.6-19.43,57.85,57.85,0,0,1-3.79-24l11.2,1.92A49.27,49.27,0,0,0,200.42,504.82Z"/><path class="cls-17" d="M389.49,500.65a28,28,0,0,1-.29,9c-.5,2.28-1.27,3.62-2,3.56-1.43-.14-2-5.52-2.82-12S383,489.45,384.35,489c.66-.22,1.72.9,2.74,3A28,28,0,0,1,389.49,500.65Z"/><path class="cls-17" d="M413.62,499.69a36.83,36.83,0,0,1-2.43,12.46c-1.23,3-2.53,4.66-3.17,4.43-1.37-.52.31-7.91.5-17s-1-16.59.39-17c.65-.19,1.87,1.5,2.94,4.59A36.83,36.83,0,0,1,413.62,499.69Z"/><path class="cls-17" d="M436.93,497a55.34,55.34,0,0,1,.52,9.45,45.63,45.63,0,0,1-.89,7.66c-.91,4.3-2.14,6.77-2.8,6.63-1.47-.31,0-10.64-1.89-23s-5.89-22-4.54-22.67c.6-.31,2.44,1.74,4.48,5.63a47.93,47.93,0,0,1,3,7.1A57.59,57.59,0,0,1,436.93,497Z"/><path class="cls-17" d="M164.59,595.73a42.25,42.25,0,0,1-.27-8.85,35.84,35.84,0,0,1,.53-3.82,26.8,26.8,0,0,1,.8-3.26c1.21-3.93,2.72-6,3.34-5.81s.45,2.69.21,6.47c-.06.95-.13,2-.14,3.08s0,2.28,0,3.51a62.81,62.81,0,0,0,2.26,15.79c.35,1.18.65,2.32,1,3.36s.68,2,1,2.92c1.29,3.56,2.22,5.84,1.61,6.27s-2.57-1.21-4.84-4.65a26.73,26.73,0,0,1-1.68-2.91,35.79,35.79,0,0,1-1.58-3.52A42.25,42.25,0,0,1,164.59,595.73Z"/><path class="cls-17" d="M197.49,609.93a54.89,54.89,0,0,1-.09-14.27c.47-3.6,1.18-5.78,1.87-5.77s1.28,2.24,1.74,5.77.81,8.37,1.53,13.54c.38,2.58.84,5,1.34,7.18.3,1.07.52,2.12.83,3.06l.4,1.38.43,1.26c1.09,3.22,2,5.28,1.36,5.73s-2.5-1-4.6-4.13l-.79-1.26c-.25-.45-.49-.93-.74-1.43a32.2,32.2,0,0,1-1.4-3.26A42.34,42.34,0,0,1,197.49,609.93Z"/><path class="cls-17" d="M236.71,616.79c-4.33-15.35-4.94-28.35-3.58-28.52s4.28,12.17,8.5,27.14,8.17,27,6.83,27.61S241,632.15,236.71,616.79Z"/><path class="cls-17" d="M346.34,623.13c1.94-6.48,3.3-12.56,4.5-17s2.2-7.12,2.9-7,.94,3,.66,7.6a81.29,81.29,0,0,1-3.17,17.86,60.46,60.46,0,0,1-3.75,9.43c-.76,1.38-1.45,2.7-2.24,3.86-.39.58-.75,1.15-1.13,1.68l-1.15,1.47c-3,3.7-5.58,5.28-6,4.83s1-2.91,3-6.82l.8-1.53.8-1.69c.58-1.15,1.08-2.45,1.67-3.76C344.27,629.38,345.35,626.36,346.34,623.13Z"/><path class="cls-17" d="M376.89,610.42c1.38-7.88,2.09-15.29,3-20.62s1.84-8.6,2.54-8.54,1.06,3.43,1.06,8.84a126.52,126.52,0,0,1-1.62,21.21,61.86,61.86,0,0,1-3.15,11.54,43.31,43.31,0,0,1-4.52,8.74c-3.21,4.66-6.17,6.64-6.63,6.19s1.33-3.26,3.49-8a69.42,69.42,0,0,0,3.21-8.5A91.9,91.9,0,0,0,376.89,610.42Z"/><path class="cls-17" d="M414,597.91c1.53-6.39,2.57-12.34,3.55-16.65s1.85-7,2.56-6.92,1.08,2.86,1,7.33a81.07,81.07,0,0,1-2.17,17.44,61.49,61.49,0,0,1-3.08,9.33c-.64,1.38-1.22,2.7-1.91,3.87-.33.59-.64,1.16-1,1.7l-1,1.51c-2.65,3.79-5,5.54-5.48,5.13s.65-2.93,2.32-6.87l.65-1.55.65-1.7c.48-1.16.88-2.44,1.36-3.77C412.32,604.08,413.18,601.1,414,597.91Z"/><path class="cls-17" d="M424.42,588.28c1.66-4,3-8,4.13-11.62.51-1.83,1.05-3.56,1.44-5.21s.79-3.18,1.12-4.59c1.28-5.65,2-9.25,2.7-9.22s1.27,3.73.87,9.75c-.11,1.5-.26,3.15-.54,4.9s-.63,3.62-1,5.57a78.08,78.08,0,0,1-9.93,23.93c-1.09,1.67-2.12,3.27-3.21,4.67s-2.1,2.71-3.09,3.84c-4,4.54-7,6.72-7.52,6.27s1.53-3.53,4.62-8.43c.77-1.23,1.62-2.56,2.46-4s1.74-3,2.67-4.7C420.89,596.06,422.73,592.32,424.42,588.28Z"/><path class="cls-18" d="M137,509.24c.76-3.74,2.77-6.36,4.11-5.94s1.6,3.5.9,7-2.17,6.21-3.58,6.05S136.26,513,137,509.24Z"/><path class="cls-18" d="M138.33,549.64a54.36,54.36,0,0,1-1.95-15.24c.12-3.95.78-6.35,1.46-6.36,1.47,0,2.42,9.33,5.42,20.26s6.83,19.45,5.58,20.21c-.59.34-2.39-1.39-4.5-4.73A53.49,53.49,0,0,1,138.33,549.64Z"/><path class="cls-14" d="M442.82,467.33A165.7,165.7,0,0,0,371,498.45c-3.11,2.36-6.43,4.93-10.32,5.07-4.14.15-7.78-2.48-11.25-4.75a88.22,88.22,0,0,0-21-10.34c-7.89-2.54-16.26-3.27-24.5-3.47s-16.56-.42-24.68.2a82.67,82.67,0,0,0-20.63,4.06,87.16,87.16,0,0,0-19.26,9.55c-3.47,2.26-7.11,4.89-11.25,4.75-3.9-.14-7.22-2.72-10.32-5.07a165.7,165.7,0,0,0-71.82-31.12"/><line class="cls-19" x1="228.33" y1="503.85" x2="263.97" y2="487.62"/><path class="cls-3" d="M219.34,122.68a55.94,55.94,0,0,1,29.93,12.77c.6-22.61-11.09-43.51-22.43-63.08A20.72,20.72,0,0,1,250,76.94a162.61,162.61,0,0,0-14.86-54.86c-4.94,2.27-6.38,8.48-7.16,13.85a673.21,673.21,0,0,0-6.9,86.47"/><path class="cls-12" d="M248.91,75a148.5,148.5,0,0,1,16.63,15.51,144.21,144.21,0,0,0-20.85-8.11,139.78,139.78,0,0,0-21.24-4.65l6.15-15.9A152.75,152.75,0,0,1,248.91,75Z"/><path class="cls-12" d="M246.73,129.61c7.6,7.08,14.49,15.09,19.26,24-7.16-7.34-15.61-12.79-24.45-17.26s-18.17-8-27.69-11.66l8.85-14.58C230.8,116.24,239.12,122.51,246.73,129.61Z"/><path class="cls-12" d="M41.67,334.64c5.88-2.52,11.18-5.31,15.27-7.08s6.9-2.54,7.48-1.65-1.16,3.21-4.57,6.22a58.45,58.45,0,0,1-15.18,9.57c-6.61,2.85-13.35,3.82-18.13,3.34s-7.5-2-7.33-3,2.94-1.5,7-2.42A86.51,86.51,0,0,0,41.67,334.64Z"/><path class="cls-3" d="M292,123.06A73,73,0,0,1,312.67,143a111.15,111.15,0,0,0,10.74-54.92l7.34,11.35A218.87,218.87,0,0,0,342,35.73c.18-6.89-.08-14.2-3.84-20a574.49,574.49,0,0,0-39.41,98"/><path class="cls-12" d="M329.81,92.79a148.49,148.49,0,0,1,8.38,21.15,144.21,144.21,0,0,0-15.36-16.27,139.76,139.76,0,0,0-17.2-13.31L318,72.64A152.73,152.73,0,0,1,329.81,92.79Z"/><path class="cls-12" d="M314.81,132.79a148.49,148.49,0,0,1,8.38,21.15,144.21,144.21,0,0,0-15.36-16.27,139.76,139.76,0,0,0-17.2-13.31L303,112.64A152.73,152.73,0,0,1,314.81,132.79Z"/><path class="cls-3" d="M400,125.72l3.05,20.6a98.07,98.07,0,0,0,40.39-35,165.29,165.29,0,0,1,1.82,34.87c18.29-2.58,31.49-18.24,42.86-32.79,3.7-4.74,7.52-9.73,8.59-15.65"/><path class="cls-12" d="M405.83,140.91a148.49,148.49,0,0,1-4.13,22.37,144.24,144.24,0,0,0-4.38-21.94,139.8,139.8,0,0,0-7.51-20.41l16.71-3.37A152.75,152.75,0,0,1,405.83,140.91Z"/><path class="cls-12" d="M448.83,134.91a148.49,148.49,0,0,1-4.13,22.37,144.24,144.24,0,0,0-4.38-21.94,139.8,139.8,0,0,0-7.51-20.41l16.71-3.37A152.75,152.75,0,0,1,448.83,134.91Z"/><path class="cls-3" d="M464.55,183.7a38,38,0,0,1-28.72,20.79c5,2.49,10.14,5,15.66,6,10.25,1.84,20.63-1.73,30.28-5.63,2.76-1.11,5.91-2.76,6.27-5.71.26-2.14-1.18-4.2-3-5.33a17.78,17.78,0,0,0-6.15-1.91c-5.36-1-11-2.31-14.88-6.17"/><path class="cls-3" d="M549.55,205.7a38,38,0,0,1-28.72,20.79c5,2.49,10.14,5,15.66,6,10.25,1.84,20.63-1.73,30.28-5.63,2.76-1.11,5.91-2.76,6.27-5.71.26-2.14-1.18-4.2-3-5.33a17.78,17.78,0,0,0-6.15-1.91c-5.36-1-11-2.31-14.88-6.17"/><path class="cls-12" d="M448.64,203.38a148.49,148.49,0,0,1-22,5.87,144.21,144.21,0,0,0,17.94-13.38,139.79,139.79,0,0,0,15.21-15.54L470,194A152.72,152.72,0,0,1,448.64,203.38Z"/><path class="cls-7" d="M78.71,199.41l45.52-11.52L88.55,104.62a7.19,7.19,0,0,1,8.74-9.7l119.89,37.21L232.28,11.3A7.19,7.19,0,0,1,246.1,9.55l46.43,116.84"/><path class="cls-7" d="M38.24,364.79,19.12,353.64A7.19,7.19,0,0,1,17.6,342.4L72,286.75a7.19,7.19,0,0,0-.88-10.82L7.93,229.45a7.19,7.19,0,0,1,2.5-12.76l44.73-11.32"/><path class="cls-7" d="M141.67,459l-75.42,5.37a7.19,7.19,0,0,1-7.12-10L83,398.2a7.19,7.19,0,0,0-3-9L53.83,373.89"/><path class="cls-7" d="M359.19,53.51,353.92,11.3A7.19,7.19,0,0,0,340.1,9.55L292.67,126.39"/><path class="cls-7" d="M490.47,195.11,462,187.9l35.69-83.27a7.19,7.19,0,0,0-8.74-9.7L369,132.13l-6.09-48.76"/><path class="cls-7" d="M511.25,417.2l-8.09-19a7.19,7.19,0,0,1,3-9l60.92-35.54a7.19,7.19,0,0,0,1.52-11.23l-54.39-55.65a7.19,7.19,0,0,1,.88-10.82l63.17-46.49a7.19,7.19,0,0,0-2.5-12.76L533.69,206l-16.76-4.24"/><path class="cls-7" d="M446.83,455.88l73.12,8.47a7.19,7.19,0,0,0,7.12-10l-7.48-17.57"/><path class="cls-12" d="M530.64,225.38a148.49,148.49,0,0,1-22,5.87,144.21,144.21,0,0,0,17.94-13.38,139.79,139.79,0,0,0,15.21-15.54L552,216A152.72,152.72,0,0,1,530.64,225.38Z"/><path class="cls-10" d="M350.55,248.54a42,42,0,0,1,7.24,3.77,31.91,31.91,0,0,1,5.16,4.21c2.66,2.74,3.69,5,3,5.76s-2.95.06-6.13-1.33l-5.47-2.47c-2-.9-4.28-1.87-6.65-2.83s-4.67-1.77-6.77-2.52l-5.67-2c-3.27-1.17-5.41-2.17-5.36-3.25s2.34-2,6.15-2.11a31.91,31.91,0,0,1,6.64.5A41.94,41.94,0,0,1,350.55,248.54Z"/><path class="cls-10" d="M387.87,278.37a26.41,26.41,0,0,1,4.24,10.33c.43,2.88,0,4.8-1,5.11s-2.39-1-4-3-3.49-5-5.6-8.13-4.06-6-5.38-8.27-2-4-1.3-4.85,2.6-.49,5.11,1A26.41,26.41,0,0,1,387.87,278.37Z"/><path class="cls-10" d="M513.06,362.54c7.17-4.16,14-5.44,14.87-3.54s-4.19,6.2-11,10.17-13.09,6.23-14.32,4.49S505.88,366.68,513.06,362.54Z"/><ellipse class="cls-10" cx="543.85" cy="350.52" rx="5.22" ry="3.83" transform="translate(-99.25 279.43) rotate(-26.49)"/><ellipse class="cls-10" cx="513.36" cy="253.47" rx="11.08" ry="3.83" transform="translate(-32.22 427.05) rotate(-43.93)"/><path class="cls-10" d="M222.9,474a12.54,12.54,0,0,1,6.13,4.21c1.17,1.61,1.35,3.07.67,3.86s-2.05.89-3.66.66a45.65,45.65,0,0,1-10.88-3.6c-1.43-.77-2.48-1.64-2.55-2.71s.94-2.1,2.84-2.7A12.54,12.54,0,0,1,222.9,474Z"/><path class="cls-10" d="M262.35,467.89a49.09,49.09,0,0,1,8.52-.84,37.07,37.07,0,0,1,7,.59c3.93.75,6.21,2,6.1,3s-2.51,1.75-6.16,2.39c-1.83.31-4,.66-6.35,1s-4.94.82-7.64,1.33-5.25,1.08-7.59,1.58-4.46,1-6.28,1.38c-3.63.75-6.11,1-6.61.05s1.17-2.92,4.55-5.06a37.07,37.07,0,0,1,6.26-3.12A49.09,49.09,0,0,1,262.35,467.89Z"/><rect class="cls-20" x="312.3" y="359.24" width="89" height="10"/><line class="cls-7" x1="312.3" y1="359.24" x2="401.3" y2="359.24"/><rect class="cls-20" x="187.3" y="359.24" width="89" height="10"/><line class="cls-7" x1="187.3" y1="359.24" x2="276.3" y2="359.24"/><path class="cls-7" d="M113.3,415.55a22.64,22.64,0,0,1,23-12.58"/><path class="cls-7" d="M473.26,415.55a22.64,22.64,0,0,0-23-12.58"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/moon.svg b/apps/grid-admin/src/assets/icons/moon.svg
new file mode 100644
index 00000000..e6667f0d
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/moon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 499.712 499.712" style="enable-background: new 0 0 499.712 499.712;" xml:space="preserve">
+<path style="fill: #FFD93B;" d="M146.88,375.528c126.272,0,228.624-102.368,228.624-228.64c0-55.952-20.16-107.136-53.52-146.88
+	C425.056,33.096,499.696,129.64,499.696,243.704c0,141.392-114.608,256-256,256c-114.064,0-210.608-74.64-243.696-177.712
+	C39.744,355.368,90.944,375.528,146.88,375.528z"/>
+<path style="fill: #F4C534;" d="M401.92,42.776c34.24,43.504,54.816,98.272,54.816,157.952c0,141.392-114.608,256-256,256
+	c-59.68,0-114.448-20.576-157.952-54.816c46.848,59.472,119.344,97.792,200.928,97.792c141.392,0,256-114.608,256-256
+	C499.712,162.12,461.392,89.64,401.92,42.776z"/>
+<g>
+	<polygon style="fill: #FFD83B;" points="128.128,99.944 154.496,153.4 213.472,161.96 170.8,203.56 180.864,262.296
+		128.128,234.568 75.376,262.296 85.44,203.56 42.768,161.96 101.744,153.4"/>
+	<polygon style="fill: #FFD83B;" points="276.864,82.84 290.528,110.552 321.104,114.984 298.976,136.552 304.208,166.984
+		276.864,152.616 249.52,166.984 254.752,136.552 232.624,114.984 263.2,110.552"/>
+</g>
+</svg>
diff --git a/apps/grid-admin/src/assets/icons/sun.svg b/apps/grid-admin/src/assets/icons/sun.svg
new file mode 100644
index 00000000..a3997cbf
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/sun.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background: new 0 0 60 60;" xml:space="preserve">
+<g>
+	<path style="fill: #F0C419;" d="M30,0c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1V1C31,0.448,30.552,0,30,0z"/>
+	<path style="fill: #F0C419;" d="M30,52c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1v-6C31,52.448,30.552,52,30,52z"/>
+	<path style="fill: #F0C419;" d="M59,29h-6c-0.552,0-1,0.448-1,1s0.448,1,1,1h6c0.552,0,1-0.448,1-1S59.552,29,59,29z"/>
+	<path style="fill: #F0C419;" d="M8,30c0-0.552-0.448-1-1-1H1c-0.552,0-1,0.448-1,1s0.448,1,1,1h6C7.552,31,8,30.552,8,30z"/>
+	<path style="fill: #F0C419;" d="M46.264,14.736c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414
+		s-1.023-0.391-1.414,0l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,14.639,46.008,14.736,46.264,14.736z"/>
+	<path style="fill: #F0C419;" d="M13.029,45.557l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C7.488,52.902,7.744,53,8,53
+		s0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414S13.42,45.166,13.029,45.557z"/>
+	<path style="fill: #F0C419;" d="M46.971,45.557c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
+		C51.488,52.902,51.744,53,52,53s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.971,45.557z"/>
+	<path style="fill: #F0C419;" d="M8.707,7.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
+		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L8.707,7.293z"/>
+	<path style="fill: #F0C419;" d="M50.251,21.404c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
+		c0.508-0.216,0.746-0.803,0.53-1.311s-0.804-0.746-1.311-0.53l-2.762,1.172C50.272,20.309,50.035,20.896,50.251,21.404z"/>
+	<path style="fill: #F0C419;" d="M9.749,38.596c-0.216-0.508-0.803-0.746-1.311-0.53l-2.762,1.172
+		c-0.508,0.216-0.746,0.803-0.53,1.311c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
+		C9.728,39.691,9.965,39.104,9.749,38.596z"/>
+	<path style="fill: #F0C419;" d="M54.481,38.813L51.7,37.688c-0.511-0.207-1.095,0.041-1.302,0.553
+		c-0.207,0.512,0.041,1.095,0.553,1.302l2.782,1.124c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
+		C55.241,39.603,54.994,39.02,54.481,38.813z"/>
+	<path style="fill: #F0C419;" d="M5.519,21.188L8.3,22.312c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
+		c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.513-0.207-1.095,0.04-1.302,0.553C4.759,20.397,5.006,20.98,5.519,21.188z"
+		/>
+	<path style="fill: #F0C419;" d="M39.907,50.781c-0.216-0.508-0.803-0.745-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311
+		l1.172,2.762c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311L39.907,50.781z"
+		/>
+	<path style="fill: #F0C419;" d="M21.014,9.829c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311l-1.172-2.762
+		c-0.215-0.509-0.802-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311l1.172,2.762C20.254,9.6,20.625,9.829,21.014,9.829z"/>
+	<path style="fill: #F0C419;" d="M21.759,50.398c-0.511-0.205-1.095,0.04-1.302,0.553l-1.124,2.782
+		c-0.207,0.512,0.041,1.095,0.553,1.302c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
+		C22.519,51.188,22.271,50.605,21.759,50.398z"/>
+	<path style="fill: #F0C419;" d="M38.615,9.675c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782c0.207-0.512-0.041-1.095-0.553-1.302
+		c-0.511-0.207-1.095,0.041-1.302,0.553L37.688,8.3c-0.207,0.512,0.041,1.095,0.553,1.302C38.364,9.651,38.491,9.675,38.615,9.675z"
+		/>
+</g>
+<circle style="fill: #F0C419;" cx="30" cy="30" r="20"/>
+<circle style="fill: #EDE21B;" cx="30" cy="30" r="15"/>
+</svg>
diff --git a/apps/grid-admin/src/assets/icons/total-sales.svg b/apps/grid-admin/src/assets/icons/total-sales.svg
new file mode 100644
index 00000000..eff79640
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/total-sales.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445 271.8"><defs><style>.cls-1{fill:#32caf8;}.cls-2{fill:#00aaf8;opacity:0.5;}.cls-3{fill:#fff;}.cls-4{fill:#426572;}</style></defs><title>Asset 500</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="6" y="8.17" width="433" height="259.8" rx="12" ry="12"/><path class="cls-2" d="M439,21.16V255a13,13,0,0,1-13,13H28.72l381-259.8H426A13,13,0,0,1,439,21.16Z"/><path class="cls-3" d="M328,33.24h88.92c3.86,0,3.87-6,0-6H328c-3.86,0-3.87,6,0,6Z"/><path class="cls-3" d="M283.49,33.24H312.6c3.86,0,3.87-6,0-6H283.49c-3.86,0-3.87,6,0,6Z"/><path class="cls-4" d="M427,271.8H18a18,18,0,0,1-18-18V18A18,18,0,0,1,18,0H427a18,18,0,0,1,18,18V253.8A18,18,0,0,1,427,271.8ZM18,12a6,6,0,0,0-6,6V253.8a6,6,0,0,0,6,6H427a6,6,0,0,0,6-6V18a6,6,0,0,0-6-6Z"/><rect class="cls-4" x="37.89" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="55.93" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="73.97" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="92.01" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="118.71" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="136.76" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="154.8" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="172.84" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="199.54" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="217.58" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="235.63" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="253.67" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="280.37" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="298.41" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="316.45" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="334.49" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="43.89" y="177.53" width="161.29" height="12"/><rect class="cls-4" x="43.89" y="204.59" width="68.2" height="12"/><circle class="cls-3" cx="379.46" cy="207.35" r="23.82"/><rect class="cls-3" x="43.89" y="36.31" width="72.53" height="47.63" rx="12" ry="12"/><path class="cls-4" d="M104.42,88.86H55.89a18,18,0,0,1-18-18V47.23a18,18,0,0,1,18-18h48.53a18,18,0,0,1,18,18V70.86A18,18,0,0,1,104.42,88.86ZM55.89,41.23a6,6,0,0,0-6,6V70.86a6,6,0,0,0,6,6h48.53a6,6,0,0,0,6-6V47.23a6,6,0,0,0-6-6Z"/><path class="cls-4" d="M379.46,241.49a29.81,29.81,0,1,1,29.82-29.82A29.85,29.85,0,0,1,379.46,241.49Zm0-47.63a17.81,17.81,0,1,0,17.82,17.81A17.84,17.84,0,0,0,379.46,193.86Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/transaction.svg b/apps/grid-admin/src/assets/icons/transaction.svg
new file mode 100644
index 00000000..7ba9e2f0
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/transaction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.49 390.69"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f3aa9f;}.cls-3{fill:#e1978f;}.cls-4,.cls-6{fill:#426572;}.cls-5{fill:#e1d2d5;}.cls-6{font-size:100.43px;font-family:Dosis-ExtraBold, Dosis;font-weight:700;}</style></defs><title>Asset 480</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M383.9,162H199.69V2.19q4-.19,8.16-.19A176.87,176.87,0,0,1,383.9,162Z"/><path class="cls-2" d="M355.38,210a176.83,176.83,0,0,1-95.72,157.18l-.15.07A176.88,176.88,0,1,1,101.72,50.67l.15-.07a175.93,175.93,0,0,1,72.82-17.4V191H354.37A177.9,177.9,0,0,1,355.38,210Z"/><path class="cls-3" d="M357.53,212.16a176,176,0,0,1-17.44,76.66,1,1,0,0,1-.07.15A176.89,176.89,0,0,1,73.47,352.79l1.23.38q6,1.86,12.26,3.29A177,177,0,0,0,303.49,191h52.78A178.15,178.15,0,0,1,357.53,212.16Z"/><path class="cls-4" d="M182.85,390.69a182.87,182.87,0,0,1-84-345.31l.41-.2a180.59,180.59,0,0,1,75.13-20l6.27-.28V185H364.36l.51,5.44c.54,5.77.82,11.62.82,17.4a180.72,180.72,0,0,1-20.18,83.56c-.06.12-.12.26-.2.41a184.39,184.39,0,0,1-83,80.77l-.18.08,0,0A181.06,181.06,0,0,1,182.85,390.69ZM104.33,56.08A170.88,170.88,0,0,0,256.9,361.85l.17-.08,0,0a172.34,172.34,0,0,0,77.5-75.38l.15-.29a168.84,168.84,0,0,0,18.93-78.23c0-3.6-.11-7.23-.34-10.84H168.69V37.58a168.41,168.41,0,0,0-64.07,18.35Z"/><path class="cls-5" d="M382.9,158H309.11c-2.89-46.4-18.43-98.49-36.89-144.29l1.33.51a177.49,177.49,0,0,1,92.51,83.56A175.63,175.63,0,0,1,382.9,158Z"/><path class="cls-4" d="M392.49,172H195.69V.47L201.4.2C204.11.07,207,0,209.85,0a182.87,182.87,0,0,1,182,165.44Zm-184.8-12H379.18A170.89,170.89,0,0,0,209.85,12h-2.16Z"/><text class="cls-6" transform="translate(232.67 133.93)">%</text><path class="cls-1" d="M101.22,81.14a166.34,166.34,0,0,1,34.83-18c3.58-1.34,2-7.14-1.6-5.79A172.89,172.89,0,0,0,98.19,76c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-1" d="M36.28,166.34c2.62-8.63,6.74-16.94,11.05-24.83A180.58,180.58,0,0,1,87.86,91.34c2.93-2.52-1.33-6.75-4.24-4.24-23.3,20.06-44.07,47.84-53.12,77.65-1.12,3.7,4.67,5.29,5.79,1.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/visit-count.svg b/apps/grid-admin/src/assets/icons/visit-count.svg
new file mode 100644
index 00000000..ba2a3061
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/visit-count.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.23 419.23"><defs><style>.cls-1{fill:#fbc907;}.cls-2{fill:#f3a70f;}.cls-3{fill:#426572;}.cls-4,.cls-9{fill:#fff;}.cls-5{fill:#e8e8e8;}.cls-6{fill:#dadada;}.cls-7{opacity:0.1;}.cls-8{fill:#55e0ff;}.cls-9{opacity:0.4;}</style></defs><title>Asset 510</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="210.66" cy="209.62" r="203.61"/><path class="cls-2" d="M27.21,209.62A203.61,203.61,0,0,1,220.72,6.26q-5-.25-10.08-.25C98.19,4.86,6.11,95.09,5,207.54S94.05,412.07,206.5,413.21q2.07,0,4.13,0,5.06,0,10.08-.25A203.61,203.61,0,0,1,27.21,209.62Z"/><path class="cls-3" d="M209.61,419.23C94,419.23,0,325.19,0,209.61S94,0,209.61,0,419.23,94,419.23,209.61,325.19,419.23,209.61,419.23Zm0-407.23C100.65,12,12,100.65,12,209.61s88.65,197.61,197.61,197.61,197.61-88.65,197.61-197.61S318.58,12,209.61,12Z"/><path class="cls-4" d="M111.69,60.1a195,195,0,0,1,41.08-21.2c3.59-1.34,2-7.14-1.6-5.79a201.47,201.47,0,0,0-42.51,21.8c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-4" d="M35.09,160.61c3.09-10.2,8-20,13.05-29.32A212.37,212.37,0,0,1,95.87,72.18c2.93-2.52-1.33-6.75-4.24-4.24A217.08,217.08,0,0,0,43,128.26C37.63,138,32.54,148.34,29.31,159c-1.12,3.7,4.67,5.29,5.79,1.6Z"/><circle class="cls-5" cx="211.45" cy="212.12" r="156.89"/><path class="cls-6" d="M67.05,232.07a156.89,156.89,0,0,1,283.33-92.82A156.91,156.91,0,1,0,85,304.92,156.19,156.19,0,0,1,67.05,232.07Z"/><path class="cls-5" d="M211.32,152.25h0a9.16,9.16,0,0,1,9.16,9.16V210.5a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V161.41A9.16,9.16,0,0,1,211.32,152.25Z"/><circle class="cls-5" cx="211.14" cy="221.32" r="15.94"/><path class="cls-3" d="M210.48,92.62c6.29,0,6.29-9.77,0-9.77S204.19,92.62,210.48,92.62Z"/><path class="cls-3" d="M210.48,343.89c6.29,0,6.29-9.77,0-9.77S204.19,343.89,210.48,343.89Z"/><path class="cls-3" d="M339.84,218.25c6.29,0,6.29-9.77,0-9.77S333.55,218.25,339.84,218.25Z"/><path class="cls-3" d="M81.13,218.25c6.29,0,6.29-9.77,0-9.77S74.84,218.25,81.13,218.25Z"/><path class="cls-3" d="M205.56,153.32h0a9.16,9.16,0,0,1,9.16,9.16v49.09a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V162.49A9.16,9.16,0,0,1,205.56,153.32Z"/><circle class="cls-3" cx="205.38" cy="221.15" r="15.94"/><path class="cls-3" d="M135.78,272.58l135.16-89.89L290.11,170c5.22-3.46.33-11.94-4.92-8.44L150,251.4l-19.17,12.74C125.64,267.6,130.52,276.08,135.78,272.58Z"/><g class="cls-7"><ellipse class="cls-8" cx="210.2" cy="211.21" rx="156.89" ry="154.23"/></g><path class="cls-9" d="M243.13,60.17,84.37,301.88a162.18,162.18,0,0,1-18.58-47.29L193.5,60.21a153.88,153.88,0,0,1,49.67,0Z"/><path class="cls-9" d="M289.69,72.6,115.93,325.78a155.09,155.09,0,0,1-14.77-15L270,64.76A155.38,155.38,0,0,1,289.69,72.6Z"/><path class="cls-9" d="M362.16,171.75h0L232.51,360.68h0a160.93,160.93,0,0,1-42.54.43L346.63,132.84A151.63,151.63,0,0,1,362.16,171.75Z"/><path class="cls-3" d="M210.12,369.75c-89.82,0-162.89-71.88-162.89-160.23S120.31,49.29,210.12,49.29,373,121.17,373,209.52,299.94,369.75,210.12,369.75Zm0-308.46c-83.2,0-150.89,66.5-150.89,148.23s67.69,148.23,150.89,148.23S361,291.25,361,209.52,293.32,61.29,210.12,61.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/images/header.jpg b/apps/grid-admin/src/assets/images/header.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..977584b6877cf4abc6c3e3a3d51bfbb0d474da74
GIT binary patch
literal 16880
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
K^riIu-2VXLS6svZ

literal 0
HcmV?d00001

diff --git a/apps/grid-admin/src/assets/images/logo.png b/apps/grid-admin/src/assets/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..16f2e7ab7c74552c5653652547ebce7adc4901dc
GIT binary patch
literal 28304
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

literal 0
HcmV?d00001

diff --git a/apps/grid-admin/src/assets/svg/illustration.svg b/apps/grid-admin/src/assets/svg/illustration.svg
new file mode 100644
index 00000000..b45215b0
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/illustration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 676.99 384.01"><defs><style>.cls-1{fill:#f7bd3d;}.cls-19,.cls-2{fill:#181828;}.cls-10,.cls-13,.cls-3,.cls-42,.cls-5,.cls-6,.cls-64{fill:#fff;}.cls-3{opacity:0.48;}.cls-4{fill:#d39021;}.cls-6{opacity:0.61;}.cls-10,.cls-7{opacity:0.2;}.cls-8{fill:#113c47;}.cls-9{fill:#df8a3a;}.cls-10,.cls-41,.cls-42,.cls-43,.cls-46,.cls-56,.cls-57{isolation:isolate;}.cls-11{fill:#c0dbe2;}.cls-12{fill:#f7b14b;}.cls-13{opacity:0.7;}.cls-14{fill:#91dcdc;}.cls-15{fill:#5ba3ba;}.cls-16{fill:#d17e1c;}.cls-17{fill:#6f6372;}.cls-18{fill:#63456b;}.cls-19{opacity:0.5;}.cls-20{fill:#f04d6a;}.cls-21{fill:#928f93;}.cls-22{fill:#83c3db;}.cls-23{fill:#c0f3ff;}.cls-24,.cls-30,.cls-41,.cls-43{fill:#e89176;}.cls-25{fill:#ce7057;}.cls-26{fill:#ffbb59;}.cls-27{fill:#ffdbab;}.cls-28{fill:#f4a031;}.cls-29{fill:#fdc6a2;}.cls-30{opacity:0.62;}.cls-31{fill:#ffdbc7;}.cls-32{fill:#ffe8dc;}.cls-33{fill:#b4e4f9;}.cls-34{fill:#73c7e5;}.cls-35{fill:#eefbff;}.cls-36{opacity:0.15;}.cls-37{fill:#1b3c47;}.cls-38{fill:#e59328;}.cls-39{fill:#ffd097;}.cls-40{fill:#1b1b2b;}.cls-41{opacity:0.49;}.cls-42{opacity:0.55;}.cls-43{opacity:0.62;}.cls-44{fill:#ffc1b3;}.cls-45,.cls-64{opacity:0.25;}.cls-46{fill:#dff5f7;}.cls-46,.cls-56{opacity:0.8;}.cls-47{fill:#f1665d;}.cls-48{fill:#f7bd3b;}.cls-49{fill:#56c643;}.cls-50{fill:none;}.cls-51{fill:#8c7f93;}.cls-52{fill:#5ffd9f;}.cls-53{fill:#aeffcf;}.cls-54{fill:#7dc4ff;}.cls-55{fill:#12dd65;}.cls-56{fill:#b5e5e8;}.cls-57{fill:#c08976;opacity:0.39;}.cls-58{fill:#af143b;}.cls-59{fill:#91052d;}.cls-60{fill:#ffdede;}.cls-61{fill:#ea3d90;}.cls-62{fill:#c60c6e;}.cls-63{fill:#ff7dc7;}</style></defs><title>Asset 336</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M603.5,207.07h30.4a0,0,0,0,1,0,0v32.48a15.2,15.2,0,0,1-15.2,15.2h0a15.2,15.2,0,0,1-15.2-15.2V207.07A0,0,0,0,1,603.5,207.07Z"/><path class="cls-2" d="M618.86,256.08a16.43,16.43,0,0,1-16.42-16.42V207.19a1.21,1.21,0,0,1,1.22-1.22h30.4a1.22,1.22,0,0,1,1.22,1.22v32.47A16.44,16.44,0,0,1,618.86,256.08Zm-14-47.68v31.26a14,14,0,0,0,14,14h0a14,14,0,0,0,14-14V208.4Z"/><path class="cls-1" d="M585.23,168.9a61.1,61.1,0,0,0-12-21.92c11-4.5,23.31-3.22,32.37,4.56"/><path class="cls-3" d="M601.05,157.52c-2.43-8.05-19.31-10.2-28.95-9.36,11-4.5,23.31-3.22,32.37,4.56"/><path class="cls-4" d="M574.58,146.18c.44.51-1.37,1.19-.94,1.73,10.1-3.5,21.09-2.45,29.51,4.11l1.56-1.14C595.7,143.14,585.66,141.67,574.58,146.18Z"/><path class="cls-2" d="M590.78,164.39,585,169a61.12,61.12,0,0,0-11.2-22.31h0A60.89,60.89,0,0,1,590.78,164.39Z"/><path class="cls-2" d="M586.21,159a1,1,0,0,1-.8-.44c-4.91-8.05-11.82-9.68-11.93-9.68a.93.93,0,0,1-.71-1.07,1,1,0,0,1,1.08-.71c.31.07,7.79,1.84,13.11,10.54a.92.92,0,0,1-.3,1.27h0A1,1,0,0,1,586.21,159Z"/><path class="cls-5" d="M588.78,149.94a7.18,7.18,0,0,0-2.63-.62.3.3,0,0,1-.29-.31.31.31,0,0,1,.31-.29,8,8,0,0,1,2.86.65.31.31,0,0,1,.16.41.31.31,0,0,1-.41.16Z"/><ellipse class="cls-6" cx="581.68" cy="148.43" rx="1.08" ry="1.35" transform="translate(422.05 727.14) rotate(-88.89)"/><path class="cls-2" d="M584.67,170.12a1.21,1.21,0,0,1-1.16-.87,59.48,59.48,0,0,0-11.72-21.48,1.22,1.22,0,0,1-.25-1.07,1.2,1.2,0,0,1,.72-.84c11.92-4.87,24.49-3.09,33.63,4.76a1.21,1.21,0,0,1,.13,1.71,1.22,1.22,0,0,1-1.72.13c-8-6.89-19-8.69-29.56-4.94a61.72,61.72,0,0,1,11.1,21,1.21,1.21,0,0,1-.82,1.51A1,1,0,0,1,584.67,170.12Z"/><g class="cls-7"><path class="cls-8" d="M645.38,180.89a2.69,2.69,0,0,1-2.69-2.68V163a2.69,2.69,0,0,1,5.38,0v15.22a2.68,2.68,0,0,1-2.68,2.7Z"/><path class="cls-8" d="M645.38,158.72a2.69,2.69,0,0,1-2.69-2.69v-5.69a2.69,2.69,0,0,1,5.38,0V156A2.68,2.68,0,0,1,645.38,158.72Z"/></g><path class="cls-1" d="M650.18,160.47a60.69,60.69,0,0,1,11.94-21.92c-11-4.5-23.32-3.23-32.38,4.56"/><path class="cls-3" d="M631.27,154.46c2.42-8.05,18.52-16.64,30.85-15.91-11-4.5-23.32-3.23-32.38,4.56"/><path class="cls-5" d="M630.12,149.4c2.42-8.05,22.41-14.4,32.37-10.48-11-4.49-23.31-3.22-32.37,4.57"/><path class="cls-2" d="M646.3,151.07l5.14,7.34c2.15-8.13,5.86-14,11.09-20.56l.1-1.75C655.85,140.78,650.66,144.09,646.3,151.07Z"/><path class="cls-1" d="M615.4,142.72h6.12A35.47,35.47,0,0,1,657,178.19h0a35.47,35.47,0,0,1-35.48,35.48H615.4a35.47,35.47,0,0,1-35.48-35.48h0A35.47,35.47,0,0,1,615.4,142.72Z"/><path class="cls-5" d="M615.4,142.72h6.12A35.47,35.47,0,0,1,657,178.19h0c-4.23-15.44-15.3-31.14-34.89-31.14H616c-19.59,0-29.82,13.42-36.06,31.14h0A35.47,35.47,0,0,1,615.4,142.72Z"/><path class="cls-9" d="M657.57,177.76a35.47,35.47,0,0,1-35.47,35.47H616a35.47,35.47,0,0,1-35.47-35.47c0-.76,0-1.52.07-2.27a35.47,35.47,0,0,0,35.47,33.21h6.13a35.46,35.46,0,0,0,35.4-33.21C657.55,176.24,657.57,177,657.57,177.76Z"/><path class="cls-2" d="M652.77,197.23c-7.41-1.75-6.87-.88-13.6-8.53,0,0-2,9.61,5.58,15.2Z"/><path class="cls-2" d="M646.41,202.39s-5.81-.82-11.32-6.66c0,0-1.25,7.92,4.41,12.09Z"/><path class="cls-2" d="M666.3,186.94a1,1,0,0,1-.77-.42c-1.77-2.68-3.45-2.93-6.26-3.32a33.71,33.71,0,0,1-3.74-.69,33.62,33.62,0,0,0-5.37-.89,1,1,0,0,1-.84-1,.91.91,0,0,1,1-.84h0a35.1,35.1,0,0,1,5.67.93,30.78,30.78,0,0,0,3.55.66c2.85.41,5.31.75,7.52,4.12a.93.93,0,0,1-.26,1.3,1,1,0,0,1-.51.16Z"/><path class="cls-2" d="M676.05,196.14a.93.93,0,0,1-.78-.42c-1.75-2.66-8.95-5.77-19.74-8.6a35,35,0,0,0-5.37-.88.94.94,0,0,1,.17-1.86,36.26,36.26,0,0,1,5.67.94c8.06,2.09,18.27,5.38,20.83,9.34a.92.92,0,0,1-.25,1.29h0A.89.89,0,0,1,676.05,196.14Z"/><path class="cls-2" d="M664.45,198.15h-.16a13.49,13.49,0,0,1-8-4.15,16,16,0,0,0-3.85-2.88,34.55,34.55,0,0,0-5.07-2,.92.92,0,0,1-.6-1.16v0a.94.94,0,0,1,1.16-.6,38.43,38.43,0,0,1,5.38,2.15,19.06,19.06,0,0,1,4.29,3.17c1.86,1.71,3.47,3.23,7,3.68a.94.94,0,0,1-.14,1.86Z"/><path class="cls-2" d="M570.92,186.94a1,1,0,0,0,.78-.42c1.76-2.68,3.45-2.93,6.25-3.32a33.71,33.71,0,0,0,3.74-.69,33.8,33.8,0,0,1,5.37-.89,1,1,0,0,0,.84-1,.91.91,0,0,0-1-.84h0a35.1,35.1,0,0,0-5.67.93,30.78,30.78,0,0,1-3.55.66c-2.85.41-5.31.75-7.52,4.12a.93.93,0,0,0,.26,1.3,1,1,0,0,0,.51.16Z"/><path class="cls-2" d="M561.17,196.14a.93.93,0,0,0,.78-.42c1.75-2.66,8.95-5.77,19.74-8.6a35,35,0,0,1,5.37-.88.94.94,0,0,0-.17-1.86,36.26,36.26,0,0,0-5.67.94c-8.06,2.09-18.27,5.38-20.83,9.34a.92.92,0,0,0,.25,1.29h0A.89.89,0,0,0,561.17,196.14Z"/><path class="cls-2" d="M572.77,198.15h.16a13.49,13.49,0,0,0,8-4.15,16.2,16.2,0,0,1,3.86-2.88,34,34,0,0,1,5.06-2,.92.92,0,0,0,.6-1.16v0a.94.94,0,0,0-1.16-.6,38.43,38.43,0,0,0-5.38,2.15,19.06,19.06,0,0,0-4.29,3.17c-1.86,1.71-3.46,3.23-7,3.68a.94.94,0,0,0,.14,1.86Z"/><rect class="cls-5" x="591.72" y="158.31" width="23.8" height="28.97" rx="11.89"/><circle class="cls-2" cx="603.35" cy="173.72" r="8.79"/><circle class="cls-10" cx="605.84" cy="177.47" r="2.22"/><ellipse class="cls-5" cx="601.53" cy="170.34" rx="4.45" ry="3.39"/><rect class="cls-5" x="622.82" y="158.31" width="23.8" height="28.97" rx="11.89"/><circle class="cls-2" cx="634.45" cy="173.72" r="8.79"/><circle class="cls-10" cx="636.94" cy="177.47" r="2.22"/><ellipse class="cls-5" cx="632.62" cy="170.34" rx="4.45" ry="3.39"/><path class="cls-5" d="M602.74,152.19a26.51,26.51,0,0,1,5.66-1.95,29.63,29.63,0,0,1,5.93-.69.64.64,0,0,1,.64.62.63.63,0,0,1-.59.63,29.54,29.54,0,0,0-5.61,1,32.59,32.59,0,0,0-5.33,1.92.83.83,0,0,1-1.09-.42A.82.82,0,0,1,602.74,152.19Z"/><ellipse class="cls-5" cx="618.54" cy="150.08" rx="1.08" ry="1.35" transform="translate(456.54 765.61) rotate(-88.89)"/><path class="cls-2" d="M621.52,214.89H615.4a36.7,36.7,0,1,1,0-73.39h6.12a36.7,36.7,0,1,1,0,73.39Zm-6.12-71a34.26,34.26,0,0,0,0,68.52h6.12a34.26,34.26,0,0,0,0-68.52Z"/><path class="cls-2" d="M652.35,160.22a1.33,1.33,0,0,1-.28,0,1.21,1.21,0,0,1-.91-1.46,57.79,57.79,0,0,1,8.94-20.92c-10.81-3.06-21.62-.57-29.18,6.83a1.22,1.22,0,1,1-1.71-1.74c8.61-8.41,21-11,33.26-6.91a1.24,1.24,0,0,1,.59,1.89c-4.57,6.11-7.51,12.71-9.53,21.4A1.22,1.22,0,0,1,652.35,160.22Z"/><ellipse class="cls-9" cx="624.94" cy="205.15" rx="2.59" ry="0.97"/><circle class="cls-9" cx="620.04" cy="205.36" r="1"/><ellipse class="cls-5" cx="644.21" cy="145.01" rx="1.82" ry="0.89" transform="translate(13.8 341.53) rotate(-30)"/><circle class="cls-5" cx="646.3" cy="146.64" r="0.41"/><path class="cls-2" d="M617.76,185.47a1.74,1.74,0,0,0-1.32,2.89c.79.87,1.93,1.91,3.2,1.91s2.41-1,3.19-1.91a1.74,1.74,0,0,0-.16-2.46,1.8,1.8,0,0,0-1.1-.43Z"/><rect class="cls-11" x="376.08" y="323.79" width="23.87" height="2.17"/><polygon class="cls-11" points="402.27 298.71 402.06 301.15 372.83 301.15 372.62 298.71 402.27 298.71"/><path class="cls-2" d="M396.56,346.71H378.87a3.2,3.2,0,0,1-3.17-2.92l-3.81-46.08a1,1,0,0,1,1-1.09h29.65a1,1,0,0,1,.74.32,1,1,0,0,1,.27.77L401,328.07a1,1,0,1,1-2-.16l2.42-29.28H374l3.73,45a1.17,1.17,0,0,0,1.16,1.07h17.69a1.17,1.17,0,0,0,1.16-1.07l.93-11.2a1,1,0,0,1,1.09-.92,1,1,0,0,1,.92,1.09l-.93,11.19A3.2,3.2,0,0,1,396.56,346.71Z"/><rect class="cls-5" x="368.19" y="293.28" width="39.06" height="4.7"/><path class="cls-2" d="M404.89,299.16H370.54a3.32,3.32,0,1,1,0-6.64h34.35a3.32,3.32,0,0,1,0,6.64Zm-34.35-4.7a1.38,1.38,0,1,0,0,2.76h34.35a1.38,1.38,0,1,0,0-2.76Z"/><path class="cls-2" d="M373.8,294.18h0a.72.72,0,0,1-.68-.76c0-.22.36-5.38,4.8-7.07a.73.73,0,0,1,1,.68v6a.72.72,0,0,1-1.44,0v-4.84c-2.67,1.7-2.9,5.28-2.91,5.32A.71.71,0,0,1,373.8,294.18Z"/><circle class="cls-5" cx="392.19" cy="305.08" r="0.2"/><circle class="cls-11" cx="394.3" cy="301.76" r="1.56"/><circle class="cls-11" cx="397.38" cy="304.44" r="0.44"/><circle class="cls-11" cx="398.57" cy="301.89" r="0.41"/><circle class="cls-11" cx="391.41" cy="301.11" r="0.98"/><circle class="cls-11" cx="394.6" cy="307.28" r="0.37"/><polygon class="cls-12" points="370.95 305.89 372.22 322.52 403.63 322.52 405.08 305.89 370.95 305.89"/><path class="cls-2" d="M403.45,324.07H372a1,1,0,0,1-1-.93l-1.26-16.63a1,1,0,0,1,1-1.08h34.12a1,1,0,0,1,.75.32,1,1,0,0,1,.26.77l-1.45,16.63A1,1,0,0,1,403.45,324.07Zm-30.48-2h29.56l1.27-14.62H371.86Z"/><path class="cls-2" d="M381.05,311.24h-9a.47.47,0,0,1,0-.93h9a.47.47,0,1,1,0,.93Z"/><ellipse class="cls-13" cx="378.25" cy="316.8" rx="3.68" ry="2.89" transform="translate(-113.22 360.25) rotate(-45)"/><ellipse class="cls-13" cx="384.01" cy="314.43" rx="1.44" ry="1.14" transform="translate(-109.86 363.63) rotate(-45)"/><rect class="cls-14" x="210.13" y="327.96" width="112.38" height="17.46"/><rect class="cls-15" x="210.13" y="327.96" width="112.38" height="4.12"/><path class="cls-2" d="M322.52,346.88H210.13a1.45,1.45,0,0,1-1.45-1.46V328a1.45,1.45,0,0,1,1.45-1.45H322.52A1.45,1.45,0,0,1,324,328v17.46A1.45,1.45,0,0,1,322.52,346.88ZM211.59,344H321.06V329.42H211.59Z"/><path class="cls-12" d="M115.69,353.62h516.7a0,0,0,0,1,0,0v0a30.24,30.24,0,0,1-30.24,30.24H145.94a30.24,30.24,0,0,1-30.24-30.24v0a0,0,0,0,1,0,0Z"/><path class="cls-16" d="M631.59,360.3a28.37,28.37,0,0,1-1.23,4H117.73a28.37,28.37,0,0,1-1.23-4Z"/><path class="cls-2" d="M602.15,384H145.94a31.44,31.44,0,0,1-31.4-31.4,1.16,1.16,0,0,1,2.31,0,29.12,29.12,0,0,0,29.09,29.09H602.15a29.12,29.12,0,0,0,29.09-29.09,1.15,1.15,0,1,1,2.3,0A31.43,31.43,0,0,1,602.15,384Z"/><rect class="cls-17" x="568.49" y="220.97" width="95.09" height="124.14" rx="16.2"/><path class="cls-18" d="M595.82,344.38H584.68a16.19,16.19,0,0,1-16.19-16.19V236.45a16.19,16.19,0,0,1,16.19-16.2h11.14a16.2,16.2,0,0,0-16.2,16.2v91.74A16.19,16.19,0,0,0,595.82,344.38Z"/><circle class="cls-19" cx="616.03" cy="254.16" r="10.16"/><circle class="cls-19" cx="616.03" cy="254.16" r="7.19"/><path class="cls-2" d="M616,265.54a11.38,11.38,0,1,1,11.38-11.38A11.4,11.4,0,0,1,616,265.54Zm0-20.33a8.95,8.95,0,1,0,9,8.95A9,9,0,0,0,616,245.21Z"/><circle class="cls-19" cx="616.03" cy="297.71" r="22.14"/><circle class="cls-19" cx="616.03" cy="297.71" r="15.65"/><path class="cls-2" d="M616,321.4a23.69,23.69,0,1,1,23.69-23.69A23.72,23.72,0,0,1,616,321.4Zm0-44.28a20.59,20.59,0,1,0,20.59,20.59A20.61,20.61,0,0,0,616,277.12Z"/><path class="cls-2" d="M590.23,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,590.23,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,590.23,230.88Z"/><path class="cls-2" d="M641.84,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,641.84,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,641.84,230.88Z"/><circle class="cls-20" cx="616.03" cy="229.95" r="3.54"/><path class="cls-2" d="M616,234.42a4.47,4.47,0,1,1,4.48-4.47A4.47,4.47,0,0,1,616,234.42Zm0-7.08a2.61,2.61,0,1,0,2.61,2.61A2.61,2.61,0,0,0,616,227.34Z"/><path class="cls-2" d="M590.23,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,590.23,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,590.23,332Z"/><path class="cls-2" d="M641.84,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,641.84,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,641.84,332Z"/><rect class="cls-18" x="577.8" y="271.47" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="657.91" y="248.02" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="657.91" y="308.2" width="4.36" height="19.09" rx="1.62"/><path class="cls-2" d="M647.38,346.66H584.69a17.77,17.77,0,0,1-17.75-17.75V237.17a17.77,17.77,0,0,1,17.75-17.75h62.69a17.77,17.77,0,0,1,17.75,17.75v91.74A17.77,17.77,0,0,1,647.38,346.66ZM584.69,222.53A14.66,14.66,0,0,0,570,237.17v91.74a14.66,14.66,0,0,0,14.65,14.65h62.69A14.66,14.66,0,0,0,662,328.91V237.17a14.66,14.66,0,0,0-14.64-14.64Z"/><rect class="cls-17" x="93.02" y="220.97" width="95.09" height="124.14" rx="16.2"/><path class="cls-18" d="M120.35,344.38H109.22A16.19,16.19,0,0,1,93,328.19V236.45a16.2,16.2,0,0,1,16.2-16.2h11.13a16.2,16.2,0,0,0-16.2,16.2v91.74A16.19,16.19,0,0,0,120.35,344.38Z"/><circle class="cls-19" cx="140.57" cy="254.16" r="10.16"/><circle class="cls-19" cx="140.57" cy="254.16" r="7.19"/><path class="cls-2" d="M140.57,265.54A11.38,11.38,0,1,1,152,254.16,11.39,11.39,0,0,1,140.57,265.54Zm0-20.33a8.95,8.95,0,1,0,8.94,8.95A9,9,0,0,0,140.57,245.21Z"/><circle class="cls-19" cx="140.57" cy="297.71" r="22.14"/><circle class="cls-19" cx="140.57" cy="297.71" r="15.65"/><path class="cls-2" d="M140.57,321.4a23.69,23.69,0,1,1,23.69-23.69A23.72,23.72,0,0,1,140.57,321.4Zm0-44.28a20.59,20.59,0,1,0,20.58,20.59A20.61,20.61,0,0,0,140.57,277.12Z"/><path class="cls-2" d="M114.76,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,114.76,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,114.76,230.88Z"/><path class="cls-2" d="M166.37,236.47a3.73,3.73,0,1,1,3.73-3.72A3.73,3.73,0,0,1,166.37,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,166.37,230.88Z"/><path class="cls-2" d="M114.76,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,114.76,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,114.76,332Z"/><path class="cls-2" d="M166.37,337.61a3.72,3.72,0,1,1,3.73-3.72A3.73,3.73,0,0,1,166.37,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,166.37,332Z"/><rect class="cls-18" x="102.33" y="271.47" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="182.44" y="248.02" width="4.36" height="19.09" rx="1.62"/><rect class="cls-21" x="182.44" y="308.2" width="4.36" height="19.09" rx="1.62"/><path class="cls-2" d="M171.91,346.66H109.22a17.77,17.77,0,0,1-17.75-17.75V237.17a17.77,17.77,0,0,1,17.75-17.75h62.69a17.77,17.77,0,0,1,17.75,17.75v91.74A17.77,17.77,0,0,1,171.91,346.66ZM109.22,222.53a14.66,14.66,0,0,0-14.64,14.64v91.74a14.66,14.66,0,0,0,14.64,14.65h62.69a14.66,14.66,0,0,0,14.65-14.65V237.17a14.66,14.66,0,0,0-14.65-14.64Z"/><path class="cls-22" d="M331.21,343.91a18,18,0,1,1,35.92,0"/><path class="cls-23" d="M352.41,326.07a18,18,0,0,0-15.82,17.84H332.3a18,18,0,0,1,18-18A16.89,16.89,0,0,1,352.41,326.07Z"/><path class="cls-2" d="M367.13,345.15a1.24,1.24,0,0,1-1.23-1.24,16.63,16.63,0,0,0-2.71-9.12,1.24,1.24,0,0,1,2.08-1.36,19.16,19.16,0,0,1,3.1,10.48A1.24,1.24,0,0,1,367.13,345.15Z"/><path class="cls-2" d="M331.21,345.15a1.24,1.24,0,0,1-1.24-1.24,19.2,19.2,0,0,1,31.21-15,1.24,1.24,0,1,1-1.55,1.93,16.57,16.57,0,0,0-10.46-3.67,16.75,16.75,0,0,0-16.73,16.73A1.24,1.24,0,0,1,331.21,345.15Z"/><path class="cls-24" d="M488.94,54.37a25.94,25.94,0,0,1-51.87,0c0-14.33,11.61-27.18,25.93-27.18S488.94,40,488.94,54.37Z"/><path class="cls-25" d="M487.66,55.17a25.69,25.69,0,0,1-.75,5.57h-1.16a51.46,51.46,0,0,1-36.52-15.13,52.23,52.23,0,0,1-6.82-8.42,25.09,25.09,0,0,1,2.32-2.29,51.1,51.1,0,0,0,4.5,5.14,51.46,51.46,0,0,0,36.52,15.13Z"/><path class="cls-2" d="M463,81.67a27.29,27.29,0,0,1-24-14.35,1.36,1.36,0,1,1,2.4-1.29,24.58,24.58,0,0,0,46.21-11.66c0-14-11.26-25.82-24.58-25.82s-24.57,11.82-24.57,25.82a24.8,24.8,0,0,0,.83,6.37,1.36,1.36,0,1,1-2.63.7,27.06,27.06,0,0,1-.93-7.07c0-15.48,12.5-28.55,27.3-28.55s27.31,13.07,27.31,28.55A27.34,27.34,0,0,1,463,81.67Z"/><path class="cls-24" d="M521.88,72.42a25.94,25.94,0,0,0,51.88,0c0-14.33-11.61-27.18-25.94-27.18S521.88,58.09,521.88,72.42Z"/><path class="cls-25" d="M523.16,73.22a25.69,25.69,0,0,0,.76,5.57h1.16a51.7,51.7,0,0,0,43.33-23.55A26.28,26.28,0,0,0,566.1,53c-1.39,1.81-4.91.48-6.52,2.09-9.34,9.35-20.24,18.18-34.5,18.18Z"/><path class="cls-2" d="M547.82,99.72a27.34,27.34,0,0,1-27.3-27.3c0-15.48,12.5-28.55,27.3-28.55s27.3,13.07,27.3,28.55a27.62,27.62,0,0,1-.92,7.08,1.37,1.37,0,0,1-2.64-.71,24.38,24.38,0,0,0,.84-6.37c0-14-11.26-25.82-24.58-25.82s-24.57,11.82-24.57,25.82a24.58,24.58,0,0,0,46.21,11.66,1.36,1.36,0,1,1,2.4,1.29A27.3,27.3,0,0,1,547.82,99.72Z"/><path class="cls-26" d="M450.17,338.66l-52.1,11.16v-95a26.05,26.05,0,0,1,26.05-26.06h0a26.05,26.05,0,0,1,26.05,26.06Z"/><path class="cls-27" d="M426.66,228.91a26,26,0,0,0-23,25.87v93.73l-6.15,1.31v-95a26.05,26.05,0,0,1,26.06-26.05A23.88,23.88,0,0,1,426.66,228.91Z"/><path class="cls-2" d="M398.07,351a1.21,1.21,0,0,1-.77-.27,1.24,1.24,0,0,1-.45-.95v-95a27.27,27.27,0,1,1,54.54,0v83.88a1.22,1.22,0,0,1-1,1.19L398.32,351A1.07,1.07,0,0,1,398.07,351Zm26.05-121.1a24.86,24.86,0,0,0-24.83,24.84v93.54L449,337.68v-82.9A24.86,24.86,0,0,0,424.12,229.94Zm26.05,108.72h0Z"/><path class="cls-26" d="M512.58,199h0a42.11,42.11,0,0,1,42.11,42.11V352.61a0,0,0,0,1,0,0H412.1a0,0,0,0,1,0,0V299.48A100.48,100.48,0,0,1,512.58,199Z"/><path class="cls-28" d="M554.55,241.9h0a0,0,0,0,1,0,0V348.38a0,0,0,0,1,0,0H544a0,0,0,0,1,0,0v-96A10.53,10.53,0,0,1,554.55,241.9Z"/><path class="cls-27" d="M517.36,199.22a100.51,100.51,0,0,0-93.67,100.26v53.13h-11.2V299.48A100.49,100.49,0,0,1,513,199,42.29,42.29,0,0,1,517.36,199.22Z"/><path class="cls-2" d="M554.69,353.83H412.1a1.21,1.21,0,0,1-1.22-1.22V299.48a101.81,101.81,0,0,1,101.7-101.7,43.37,43.37,0,0,1,43.33,43.32V352.61A1.22,1.22,0,0,1,554.69,353.83Zm-141.37-2.44H553.47V241.1a40.94,40.94,0,0,0-40.89-40.89,99.38,99.38,0,0,0-99.26,99.27Z"/><rect class="cls-26" x="531.05" y="226.8" width="41.81" height="115.09" rx="20.9"/><path class="cls-27" d="M555.56,341.78c-.72.07-1.44.11-2.18.11A20.91,20.91,0,0,1,532.48,321V247.7a20.9,20.9,0,0,1,20.9-20.9c.74,0,1.46,0,2.18.11a20.91,20.91,0,0,0-18.73,20.79V321A20.92,20.92,0,0,0,555.56,341.78Z"/><path class="cls-2" d="M552,343.11A22.15,22.15,0,0,1,529.84,321V247.7a22.12,22.12,0,0,1,44.24,0V321A22.15,22.15,0,0,1,552,343.11ZM552,228a19.71,19.71,0,0,0-19.69,19.68V321a19.69,19.69,0,1,0,39.38,0V247.7A19.71,19.71,0,0,0,552,228Z"/><rect class="cls-26" x="502.84" y="271.92" width="35.41" height="115.09" rx="17.71" transform="translate(850.01 -191.08) rotate(90)"/><path class="cls-2" d="M560.38,348.39H480.71a18.93,18.93,0,0,1,0-37.85h79.67a18.93,18.93,0,1,1,0,37.85ZM480.71,313a16.49,16.49,0,1,0,0,33h79.67a16.49,16.49,0,1,0,0-33Z"/><ellipse class="cls-29" cx="457.99" cy="329.89" rx="22.56" ry="17.62"/><path class="cls-30" d="M460.53,347a1.53,1.53,0,0,1-.23-3h0a27.23,27.23,0,0,0,7.8-2.68c4.95-2.66,7.59-6.4,7.84-11.11a1.51,1.51,0,0,1,1.61-1.45,1.54,1.54,0,0,1,1.45,1.61c-.31,5.8-3.6,10.54-9.53,13.69a30.37,30.37,0,0,1-8.72,3Z"/><path class="cls-2" d="M458,348.63c-6.56,0-13.09-2.12-17.75-6.26-4.15-3.7-6.27-8.47-5.95-13.42.32-5.17,3.22-9.87,8.15-13.25a1.15,1.15,0,1,1,1.3,1.9c-4.33,3-6.88,7-7.16,11.49-.27,4.24,1.58,8.34,5.19,11.56,7.84,7,21.49,7.66,30.43,1.53,4.33-3,6.87-7.05,7.16-11.49.26-4.24-1.58-8.34-5.2-11.56a1.15,1.15,0,0,1,1.53-1.72c4.16,3.7,6.27,8.47,6,13.42-.33,5.17-3.22,9.87-8.15,13.25A27.61,27.61,0,0,1,458,348.63Z"/><ellipse class="cls-31" cx="454.12" cy="325.7" rx="10.47" ry="6.34"/><rect class="cls-32" x="426.41" y="310.9" width="3.64" height="19.62" rx="1.82"/><rect class="cls-32" x="540.6" y="253.08" width="3.64" height="19.62" rx="1.82"/><rect class="cls-32" x="407.4" y="251.12" width="3.64" height="19.62" rx="1.82"/><rect class="cls-15" x="148.16" y="298.4" width="58.16" height="54.73" transform="translate(354.48 651.53) rotate(-180)"/><path class="cls-2" d="M206.32,354.37H148.16a1.25,1.25,0,0,1-1.24-1.24V298.4a1.24,1.24,0,0,1,1.24-1.24h58.16a1.24,1.24,0,0,1,1.24,1.24v54.73A1.25,1.25,0,0,1,206.32,354.37Zm-56.92-2.48h55.68V299.64H149.4Z"/><rect class="cls-14" x="160.05" y="298.4" width="58.16" height="54.73" transform="translate(378.26 651.53) rotate(-180)"/><path class="cls-2" d="M218.21,354.37H160.05a1.24,1.24,0,0,1-1.24-1.24V298.4a1.23,1.23,0,0,1,1.24-1.24h58.16a1.24,1.24,0,0,1,1.24,1.24v54.73A1.25,1.25,0,0,1,218.21,354.37Zm-56.92-2.48H217V299.64H161.29Z"/><path class="cls-15" d="M165.79,316.48H203a0,0,0,0,1,0,0v8.68a0,0,0,0,1,0,0H165.79a4.34,4.34,0,0,1-4.34-4.34v0A4.34,4.34,0,0,1,165.79,316.48Z" transform="translate(364.4 641.64) rotate(-180)"/><rect class="cls-15" x="47.73" y="129.98" width="259.84" height="185.06" rx="11.92" transform="translate(355.3 445.02) rotate(-180)"/><path class="cls-2" d="M295.65,316.28h-236a13.18,13.18,0,0,1-13.16-13.16V141.9a13.18,13.18,0,0,1,13.16-13.16h117a1.24,1.24,0,1,1,0,2.48h-117A10.69,10.69,0,0,0,49,141.9V303.12A10.69,10.69,0,0,0,59.65,313.8h236a10.69,10.69,0,0,0,10.68-10.68V141.9a10.69,10.69,0,0,0-10.68-10.68H251.48a1.24,1.24,0,1,1,0-2.48h44.17a13.18,13.18,0,0,1,13.16,13.16V303.12A13.18,13.18,0,0,1,295.65,316.28Z"/><rect class="cls-14" x="59.02" y="129.98" width="259.84" height="185.06" rx="11.92" transform="translate(377.88 445.02) rotate(-180)"/><rect class="cls-33" x="70.43" y="139.79" width="240.91" height="167.83" rx="7.94" transform="translate(381.77 447.41) rotate(-180)"/><ellipse class="cls-15" cx="188.68" cy="325.28" rx="1.54" ry="0.66"/><circle class="cls-15" cx="185.3" cy="327.96" r="0.9"/><circle class="cls-15" cx="191.39" cy="327.51" r="0.9"/><circle class="cls-15" cx="172.02" cy="324.46" r="2.11"/><circle class="cls-15" cx="194.17" cy="324.46" r="2.11"/><circle class="cls-15" cx="177.29" cy="327.53" r="0.95"/><circle class="cls-15" cx="172.11" cy="329.98" r="0.94"/><circle class="cls-15" cx="167.73" cy="327.96" r="0.43"/><circle class="cls-15" cx="169.45" cy="327.53" r="0.95"/><rect class="cls-34" x="303.75" y="200.35" width="6.76" height="94.24" rx="3.38" transform="translate(614.25 494.94) rotate(180)"/><rect class="cls-34" x="303.75" y="154.37" width="6.76" height="29.8" rx="3.38"/><rect class="cls-35" x="71.77" y="192.66" width="6.76" height="44.67" rx="3.38" transform="translate(150.3 429.98) rotate(-180)"/><rect class="cls-35" x="71.77" y="147.07" width="6.76" height="29.8" rx="3.38" transform="translate(150.3 323.94) rotate(180)"/><rect class="cls-35" x="71.77" y="259.42" width="6.76" height="13.27" rx="3.38" transform="translate(150.3 532.12) rotate(-180)"/><path class="cls-2" d="M70.43,170.51a1.25,1.25,0,0,1-1.24-1.24V147.73a9.19,9.19,0,0,1,9.18-9.18H245.21a1.24,1.24,0,1,1,0,2.48H78.37a6.71,6.71,0,0,0-6.7,6.7v21.54A1.25,1.25,0,0,1,70.43,170.51Z"/><path class="cls-2" d="M303.4,308.86H125.51a1.24,1.24,0,1,1,0-2.48H303.4a6.71,6.71,0,0,0,6.7-6.7v-152a6.71,6.71,0,0,0-6.7-6.7H256.07a1.24,1.24,0,1,1,0-2.48H303.4a9.19,9.19,0,0,1,9.18,9.18v152A9.19,9.19,0,0,1,303.4,308.86Z"/><path class="cls-2" d="M115.61,308.86H78.37a9.19,9.19,0,0,1-9.18-9.18v-48a1.24,1.24,0,0,1,2.48,0v48a6.71,6.71,0,0,0,6.7,6.7h37.24a1.24,1.24,0,0,1,0,2.48Z"/><path class="cls-2" d="M70.43,242.72a1.25,1.25,0,0,1-1.24-1.24V179.22a1.24,1.24,0,1,1,2.48,0v62.26A1.25,1.25,0,0,1,70.43,242.72Z"/><rect class="cls-15" x="56.94" y="149.8" width="10.21" height="5.59" rx="2.79" transform="translate(214.64 90.54) rotate(90)"/><rect class="cls-15" x="54.88" y="252.11" width="14.34" height="5.59" rx="2.79" transform="translate(316.95 192.86) rotate(90)"/><rect class="cls-15" x="56.94" y="186.47" width="10.21" height="5.59" rx="2.79" transform="translate(251.31 127.22) rotate(90)"/><path class="cls-2" d="M306.94,316.28h-236a13.18,13.18,0,0,1-13.16-13.16V141.9a13.18,13.18,0,0,1,13.16-13.16H225.66a1.24,1.24,0,1,1,0,2.48H70.94A10.69,10.69,0,0,0,60.26,141.9V303.12A10.69,10.69,0,0,0,70.94,313.8h236a10.69,10.69,0,0,0,10.68-10.68V141.9a10.69,10.69,0,0,0-10.68-10.68H235.07a1.24,1.24,0,1,1,0-2.48h71.87A13.18,13.18,0,0,1,320.1,141.9V303.12A13.18,13.18,0,0,1,306.94,316.28Z"/><g class="cls-36"><path class="cls-37" d="M392.13,192.34H379V170.15h39.07a1.58,1.58,0,1,1,0,3.16H382.17v15.87h10a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M402.47,192.34h-5.69a1.58,1.58,0,1,1,0-3.16h5.69a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M406.86,192.34h-.12a1.58,1.58,0,1,1,0-3.16h.12a1.58,1.58,0,0,1,0,3.16Z"/><path class="cls-37" d="M434.51,192.34H411.28a1.58,1.58,0,0,1,0-3.16h20.08V173.31h-7a1.58,1.58,0,1,1,0-3.16h10.18Z"/><path class="cls-37" d="M407.91,173.31H352.42V151.17h55.49Zm-52.35-3.16h49.19V154.32H355.57Z"/></g><g class="cls-36"><path class="cls-37" d="M110.6,112H97.45V89.83h39.08a1.58,1.58,0,0,1,0,3.15H100.64v15.88h10a1.58,1.58,0,1,1,0,3.15Z"/><path class="cls-37" d="M121,112h-5.7a1.58,1.58,0,0,1,0-3.15H121a1.58,1.58,0,0,1,0,3.15Z"/><path class="cls-37" d="M125.33,112h-.11a1.58,1.58,0,1,1,0-3.15h.11a1.58,1.58,0,1,1,0,3.15Z"/><path class="cls-37" d="M153,112H129.76a1.58,1.58,0,1,1,0-3.15h20.07V93h-7a1.58,1.58,0,1,1,0-3.15H153Z"/><path class="cls-37" d="M126.38,93H70.89V70.84h55.49ZM74,89.83h49.19V74H74.05Z"/></g><g class="cls-36"><path class="cls-37" d="M625.65,103.13H612.5V80.94h39.07a1.58,1.58,0,0,1,0,3.16H615.69V100h10a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M636,103.13H630.3a1.58,1.58,0,1,1,0-3.16H636a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M640.38,103.13h-.12a1.58,1.58,0,0,1,0-3.16h.12a1.58,1.58,0,0,1,0,3.16Z"/><path class="cls-37" d="M668,103.13H644.8a1.58,1.58,0,0,1,0-3.16h20.08V84.1h-7a1.58,1.58,0,1,1,0-3.16h10.17Z"/><path class="cls-37" d="M641.43,84.1H585.94V62h55.49Zm-52.35-3.16h49.19V65.11H589.09Z"/></g><path class="cls-2" d="M295.59,345.9H283.86a.93.93,0,1,1,0-1.86h11.73a.93.93,0,0,1,0,1.86Z"/><path class="cls-2" d="M295.59,350.71H283.86a.94.94,0,1,1,0-1.87h11.73a.94.94,0,0,1,0,1.87Z"/><ellipse class="cls-5" cx="262.75" cy="354.03" rx="1.4" ry="2.12"/><circle class="cls-5" cx="262.34" cy="359.31" r="0.99"/><circle class="cls-2" cx="298.2" cy="358.11" r="1.02"/><rect class="cls-12" x="96.1" y="344.59" width="553.37" height="14.95" rx="7.48"/><rect class="cls-12" x="96.1" y="344.59" width="553.37" height="14.95" rx="7.48"/><path class="cls-38" d="M649.46,351.72A7.48,7.48,0,0,1,642,359.2H103.57a7.48,7.48,0,0,1-7.48-7.48,7.27,7.27,0,0,1,.61-2.92,7.46,7.46,0,0,0,6.87,4.54H642a7.49,7.49,0,0,0,5.28-2.18,7.33,7.33,0,0,0,1.59-2.36A7.26,7.26,0,0,1,649.46,351.72Z"/><path class="cls-2" d="M547.49,345.48h-20a1.15,1.15,0,1,1,0-2.3h20a1.15,1.15,0,1,1,0,2.3Z"/><path class="cls-2" d="M117.9,350.63H96.74a.89.89,0,0,1,0-1.77H117.9a.89.89,0,1,1,0,1.77Z"/><path class="cls-2" d="M125.91,350.63h-3.49a.89.89,0,0,1,0-1.77h3.49a.89.89,0,0,1,0,1.77Z"/><rect class="cls-39" x="276.5" y="345.23" width="61.99" height="4.29" rx="2.15"/><rect class="cls-39" x="233.27" y="345.23" width="34.64" height="4.29" rx="2.15"/><rect class="cls-39" x="160.62" y="345.23" width="34.64" height="4.29" rx="2.15"/><path class="cls-2" d="M642,360.43H103.57a8.63,8.63,0,0,1,0-17.25H515.86a1.15,1.15,0,1,1,0,2.3H103.57a6.33,6.33,0,0,0,0,12.65H642a6.33,6.33,0,0,0,0-12.65H560.24a1.15,1.15,0,1,1,0-2.3H642a8.63,8.63,0,1,1,0,17.25Z"/><path class="cls-29" d="M446.88,100.57l6.66.13a15.76,15.76,0,0,1,15.4,16h0A15.68,15.68,0,0,1,453,132.15h0l-6.66-.13a15.76,15.76,0,0,1-15.42-16h0a15.68,15.68,0,0,1,15.95-15.41Z"/><path class="cls-2" d="M430.4,117.12h0a1.36,1.36,0,0,1-1.35-1.38,16.8,16.8,0,0,1,3.32-9.82,1.36,1.36,0,1,1,2.19,1.62,14.06,14.06,0,0,0-2.78,8.24A1.36,1.36,0,0,1,430.4,117.12Z"/><path class="cls-2" d="M452.75,133.31h-.3l-6.68-.13a17.08,17.08,0,0,1-15.65-11,1.37,1.37,0,0,1,.79-1.76,1.36,1.36,0,0,1,1.76.79,14.33,14.33,0,0,0,13.16,9.27l6.64.14a14.38,14.38,0,0,0,.55-28.75l-6.65-.14a14.28,14.28,0,0,0-7.47,1.91,1.36,1.36,0,0,1-1.86-.49,1.37,1.37,0,0,1,.49-1.87,17,17,0,0,1,8.9-2.27l6.65.13a17.11,17.11,0,0,1-.33,34.21Z"/><path class="cls-24" d="M449.18,113.44l3.46.06a8.19,8.19,0,0,1,8,8.34h0a8.18,8.18,0,0,1-8.32,8l-3.46-.07a8.19,8.19,0,0,1-8-8.33h0A8.17,8.17,0,0,1,449.18,113.44Z"/><path class="cls-5" d="M437.52,110.88a5.8,5.8,0,0,1,2.91-3.17c1.16-.45.69-2.34-.51-1.88a7.7,7.7,0,0,0-4.1,4.09c-.48,1.14,1.19,2.13,1.68,1Z"/><ellipse class="cls-5" cx="435.31" cy="114.5" rx="1.55" ry="1.24" transform="matrix(0.15, -0.99, 0.99, 0.15, 258.45, 528.41)"/><path class="cls-29" d="M557,100.57l6.66.13a15.76,15.76,0,0,1,15.42,16h0a15.68,15.68,0,0,1-15.95,15.41h0l-6.65-.13A15.76,15.76,0,0,1,541,116h0a15.68,15.68,0,0,1,16-15.41Z"/><path class="cls-2" d="M563.36,133.33h-.29l-6.69-.14a17.16,17.16,0,0,1-16.76-17.43,17.05,17.05,0,0,1,17-16.75H557l6.65.13a17.09,17.09,0,0,1-.28,34.18Zm-6.69-31.59a14.32,14.32,0,0,0-14.32,14.07,14.43,14.43,0,0,0,14.09,14.66l6.65.13a14.36,14.36,0,0,0,.5-28.72l-6.65-.14h-.27Z"/><path class="cls-24" d="M559.79,113.44l3.47.06a8.2,8.2,0,0,1,8,8.33v0h0a8.19,8.19,0,0,1-8.33,8l-3.45-.07a8.19,8.19,0,0,1-8-8.33h0A8.18,8.18,0,0,1,559.79,113.44Z"/><path class="cls-40" d="M440.47,118.54a1,1,0,0,1-.79-1.67,13.55,13.55,0,0,1,7.79-4.71,1,1,0,0,1,.41,2,11.43,11.43,0,0,0-6.61,4A1,1,0,0,1,440.47,118.54Z"/><path class="cls-40" d="M572.07,118.54a1,1,0,0,1-.8-.38,11.46,11.46,0,0,0-6.61-4,1,1,0,0,1,.41-2,13.55,13.55,0,0,1,7.79,4.71,1,1,0,0,1-.15,1.44A1,1,0,0,1,572.07,118.54Z"/><path class="cls-29" d="M545.17,34.62c.69.59,1.29,1.21,1.91,1.83a58.21,58.21,0,0,1,17.11,41.29V130a58.4,58.4,0,1,1-116.8,1.27c0-.42,0-.84,0-1.27V77.74a58.25,58.25,0,0,1,19-43.13C487.62,15.24,523.88,15.37,545.17,34.62Z"/><path class="cls-24" d="M547.4,36.72c-.62-.62-1.26-1.23-1.91-1.82a57.94,57.94,0,0,1-6,3.18c.28.28.53.58.79.88l2.11,2.47A62,62,0,0,1,550.29,54h-70a6.29,6.29,0,0,0,6.29,6.28h66.17a52.7,52.7,0,0,1,2.48,16.29V130.3a58.4,58.4,0,0,1-53.77,58.22c1.52.12,3.07.18,4.62.18a58.39,58.39,0,0,0,58.4-58.4V78A58.21,58.21,0,0,0,547.4,36.72Z"/><path class="cls-29" d="M518.28,199.55c0,2.51.71,5.34-.47,7.3-2.34,3.91-8.07,5.9-13.06,5.81h0a13.65,13.65,0,0,1-13.35-13.85l.68-10.89v-.68l27,.13"/><path class="cls-41" d="M520,188.4l-1.7,14.13a15.92,15.92,0,0,1-9.25-.74,75.12,75.12,0,0,0-16.28-5.19h-.13l.14-8.18a77.57,77.57,0,0,0,27.22,0Z"/><circle class="cls-42" cx="482.74" cy="182.33" r="0.72"/><circle class="cls-42" cx="492.76" cy="185.81" r="0.95"/><path class="cls-5" d="M511,187.58c-1.49.11-3,.17-4.53.17-32.25,0-61.86-25.73-58.4-58.4V77.06a58.24,58.24,0,0,1,19-43.12c1.85,1.12,1.45,2.17,3.53,3.13-9.83,10.44-17.44,24.54-17.44,40v52.29C453.22,160.09,476.9,186.57,511,187.58Z"/><circle class="cls-29" cx="538.87" cy="96.14" r="4.28"/><path class="cls-2" d="M452.37,154.8a1.37,1.37,0,0,1-1.23-.78,21.42,21.42,0,0,1-1.46-4,1.37,1.37,0,1,1,2.65-.66,18.26,18.26,0,0,0,1.27,3.52,1.36,1.36,0,0,1-.64,1.82A1.38,1.38,0,0,1,452.37,154.8Z"/><ellipse class="cls-43" cx="486.67" cy="111.98" rx="7.51" ry="9.5"/><ellipse class="cls-2" cx="486.33" cy="109.92" rx="7.4" ry="9.38"/><ellipse class="cls-5" cx="483.69" cy="106.51" rx="2.73" ry="2.98"/><ellipse class="cls-43" cx="525.69" cy="111.98" rx="7.51" ry="9.5"/><ellipse class="cls-2" cx="525.36" cy="109.92" rx="7.4" ry="9.38"/><ellipse class="cls-5" cx="522.71" cy="106.51" rx="2.73" ry="2.98"/><path class="cls-2" d="M505.75,189.86A60,60,0,0,1,454.3,160.5a1.37,1.37,0,1,1,2.35-1.39,57.25,57.25,0,0,0,49.1,28h.07a57.11,57.11,0,0,0,57-57.11V77.74a57.23,57.23,0,0,0-16.7-40.33L546,37.3c-.58-.58-1.13-1.13-1.74-1.66-9.94-9-24-14.13-38.52-14.15h-.09c-14.75,0-28.36,5-38.33,14.13a57,57,0,0,0-18.59,42.12V130a58.27,58.27,0,0,0,.92,10.3,1.37,1.37,0,0,1-2.69.48A60.86,60.86,0,0,1,446,130V77.74A59.79,59.79,0,0,1,465.46,33.6c21.71-19.84,58.61-19.85,80.59,0,.66.57,1.27,1.18,1.86,1.77l.1.11a60,60,0,0,1,17.51,42.26V130a59.84,59.84,0,0,1-59.7,59.84Z"/><path class="cls-2" d="M505.3,213.89a14.28,14.28,0,0,1-9.67-3.79A15.06,15.06,0,0,1,490.72,199V188.42a1.36,1.36,0,1,1,2.72,0V199a12.35,12.35,0,0,0,4,9.11,11.58,11.58,0,0,0,9,3l.82-.1a12.11,12.11,0,0,0,10.11-12V188.4a1.37,1.37,0,1,1,2.73,0V199a14.84,14.84,0,0,1-12.43,14.68c-.33.05-.65.09-1,.12A12.75,12.75,0,0,1,505.3,213.89Z"/><rect class="cls-32" x="456.56" y="88.86" width="4.25" height="22.93" rx="2.12"/><path class="cls-2" d="M508.12,130.22a1.37,1.37,0,0,1-1.27-.88,37,37,0,0,1-2.33-10.85V102.54a1.36,1.36,0,0,1,2.72,0v15.83a34.27,34.27,0,0,0,2.16,10,1.36,1.36,0,0,1-.79,1.76A1.41,1.41,0,0,1,508.12,130.22Z"/><path class="cls-24" d="M531.07,17.71H502.38A39.35,39.35,0,0,0,471.06,2.16H435.38c0,28.52,22.88,52.88,51.1,52.88h80.3C566.78,35.11,550.79,17.71,531.07,17.71Z"/><path class="cls-25" d="M550.67,23.51c9.25,6.54,15.3,18.55,15.3,30.74H484.8A51.54,51.54,0,0,1,444.2,34.5a51.41,51.41,0,0,0,31.9,11h65.65c10.45,0,16.37-13.63,9.45-21.46l-.53-.57"/><rect class="cls-44" x="453.54" y="-5.07" width="4.25" height="22.93" rx="2.12" transform="translate(462.07 -449.27) rotate(90)"/><ellipse class="cls-23" cx="337.53" cy="339.19" rx="0.96" ry="1.51"/><circle class="cls-23" cx="339.35" cy="336.6" r="0.52"/><circle class="cls-23" cx="339.01" cy="334.92" r="0.52"/><circle class="cls-23" cx="340.89" cy="334.74" r="0.43"/><circle class="cls-23" cx="340.19" cy="338.89" r="0.32"/><circle class="cls-23" cx="338.49" cy="338.89" r="0.77"/><circle class="cls-23" cx="337.05" cy="340.91" r="0.48"/><circle class="cls-23" cx="339.35" cy="340.43" r="0.34"/><circle class="cls-23" cx="340.67" cy="336.81" r="0.22"/><circle class="cls-23" cx="338.27" cy="341.39" r="0.22"/><circle class="cls-23" cx="339.69" cy="337.68" r="0.22"/><ellipse class="cls-16" cx="162.43" cy="364.29" rx="8.96" ry="3.08"/><circle class="cls-16" cx="179.44" cy="364.45" r="2.15"/><circle class="cls-16" cx="178.34" cy="372.11" r="1.1"/><circle class="cls-16" cx="171.18" cy="369.18" r="1.1"/><circle class="cls-16" cx="162.43" cy="372.11" r="1.07"/><circle class="cls-16" cx="161.69" cy="367.73" r="1.07"/><circle class="cls-16" cx="146.4" cy="363.99" r="2.61"/><circle class="cls-16" cx="153.47" cy="373.03" r="2.75"/><circle class="cls-16" cx="145.37" cy="368.06" r="2.75"/><ellipse class="cls-16" cx="555.88" cy="364.98" rx="8.96" ry="3.08"/><circle class="cls-16" cx="572.89" cy="365.14" r="2.15"/><circle class="cls-16" cx="571.79" cy="372.8" r="1.1"/><circle class="cls-16" cx="564.63" cy="369.87" r="1.1"/><circle class="cls-16" cx="561.82" cy="373.87" r="1.07"/><circle class="cls-16" cx="555.88" cy="372.8" r="1.07"/><circle class="cls-16" cx="555.14" cy="368.42" r="1.07"/><circle class="cls-16" cx="539.86" cy="364.68" r="2.61"/><circle class="cls-16" cx="546.92" cy="373.72" r="2.75"/><circle class="cls-16" cx="538.82" cy="368.74" r="2.75"/><ellipse class="cls-18" cx="579.86" cy="250.5" rx="1.69" ry="4.9"/><circle class="cls-18" cx="579.94" cy="241.19" r="1.18"/><circle class="cls-18" cx="584.13" cy="241.79" r="0.6"/><circle class="cls-18" cx="582.53" cy="245.71" r="0.6"/><circle class="cls-18" cx="584.72" cy="247.25" r="0.59"/><circle class="cls-18" cx="584.13" cy="250.5" r="0.59"/><circle class="cls-18" cx="581.74" cy="250.91" r="0.59"/><circle class="cls-18" cx="579.69" cy="259.27" r="1.43"/><circle class="cls-18" cx="584.64" cy="255.4" r="1.5"/><circle class="cls-18" cx="581.92" cy="259.84" r="1.5"/><ellipse class="cls-44" cx="444.36" cy="22.97" rx="1.23" ry="3.58" transform="translate(43.04 215.13) rotate(-28.54)"/><circle class="cls-44" cx="441.16" cy="16.96" r="0.86"/><circle class="cls-44" cx="444.06" cy="15.89" r="0.44"/><circle class="cls-44" cx="444.4" cy="18.96" r="0.44"/><circle class="cls-44" cx="446.34" cy="19.18" r="0.43"/><circle class="cls-44" cx="447.1" cy="21.47" r="0.43"/><circle class="cls-44" cx="445.71" cy="22.57" r="0.43"/><path class="cls-44" d="M446.82,27.74a1,1,0,0,1,1.41.41c.28.51.09,2.38-.42,2.66a1,1,0,0,1-1.41-.42C446.13,29.89,446.31,28,446.82,27.74Z"/><circle class="cls-44" cx="449.14" cy="24.44" r="1.1"/><path class="cls-44" d="M448.41,27.28a1.09,1.09,0,0,1,1.49.44c.29.53.1,2.44-.44,2.73s-1.2-1.15-1.48-1.69A1.08,1.08,0,0,1,448.41,27.28Z"/><ellipse class="cls-18" cx="580.23" cy="306.8" rx="1.69" ry="4.9"/><circle class="cls-18" cx="580.32" cy="297.49" r="1.18"/><circle class="cls-18" cx="584.51" cy="298.09" r="0.6"/><circle class="cls-18" cx="582.91" cy="302.01" r="0.6"/><circle class="cls-18" cx="585.1" cy="303.55" r="0.59"/><circle class="cls-18" cx="584.51" cy="306.8" r="0.59"/><circle class="cls-18" cx="582.12" cy="307.21" r="0.59"/><circle class="cls-18" cx="580.07" cy="315.57" r="1.43"/><circle class="cls-18" cx="585.01" cy="311.7" r="1.5"/><circle class="cls-18" cx="582.29" cy="316.14" r="1.5"/><path class="cls-2" d="M616,320.4a.62.62,0,0,1-.62-.62V274.65A.62.62,0,0,1,616,274a.62.62,0,0,1,.62.62v45.13A.62.62,0,0,1,616,320.4Z"/><path class="cls-2" d="M612.49,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,612.49,319.16Z"/><path class="cls-2" d="M608.89,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,608.89,319.16Z"/><path class="cls-2" d="M605.3,316.67a.62.62,0,0,1-.63-.62V279a.63.63,0,0,1,1.25,0v37.05A.62.62,0,0,1,605.3,316.67Z"/><path class="cls-2" d="M601.7,315.43a.62.62,0,0,1-.62-.62V280.86a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v33.95A.62.62,0,0,1,601.7,315.43Z"/><path class="cls-2" d="M598.1,312.32a.61.61,0,0,1-.62-.62V284a.61.61,0,0,1,.62-.62.62.62,0,0,1,.62.62V311.7A.62.62,0,0,1,598.1,312.32Z"/><path class="cls-2" d="M619.66,319.78a.62.62,0,0,1-.62-.62V276.51a.63.63,0,0,1,1.25,0v42.65A.63.63,0,0,1,619.66,319.78Z"/><path class="cls-2" d="M623.26,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,623.26,319.78Z"/><path class="cls-2" d="M626.86,317.29a.62.62,0,0,1-.62-.62V279.62a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v37.05A.61.61,0,0,1,626.86,317.29Z"/><path class="cls-2" d="M630.46,316.05a.62.62,0,0,1-.62-.62V281.48a.62.62,0,0,1,1.24,0v33.95A.62.62,0,0,1,630.46,316.05Z"/><path class="cls-2" d="M634.06,311.7a.62.62,0,0,1-.62-.62V284.59a.62.62,0,1,1,1.24,0v26.49A.62.62,0,0,1,634.06,311.7Z"/><g class="cls-45"><path class="cls-2" d="M615,320.4a.62.62,0,0,1-.62-.62V274.65a.62.62,0,1,1,1.24,0v45.13A.62.62,0,0,1,615,320.4Z"/><path class="cls-2" d="M611.44,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,611.44,319.16Z"/><path class="cls-2" d="M607.84,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,607.84,319.16Z"/><path class="cls-2" d="M604.24,316.67a.62.62,0,0,1-.62-.62V279a.62.62,0,0,1,1.24,0v37.05A.62.62,0,0,1,604.24,316.67Z"/><path class="cls-2" d="M600.64,315.43a.62.62,0,0,1-.62-.62V280.86a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v33.95A.62.62,0,0,1,600.64,315.43Z"/><path class="cls-2" d="M597,310.46a.62.62,0,0,1-.62-.62V285.21a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v24.63A.62.62,0,0,1,597,310.46Z"/><path class="cls-2" d="M618.61,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,618.61,319.78Z"/><path class="cls-2" d="M622.21,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,622.21,319.78Z"/><path class="cls-2" d="M625.81,317.29a.61.61,0,0,1-.62-.62V279.62a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v37.05A.62.62,0,0,1,625.81,317.29Z"/><path class="cls-2" d="M629.41,316.05a.63.63,0,0,1-.63-.62V281.48a.63.63,0,0,1,1.25,0v33.95A.62.62,0,0,1,629.41,316.05Z"/><path class="cls-2" d="M633,313a.63.63,0,0,1-.62-.63V284.59a.63.63,0,0,1,1.25,0v27.73A.63.63,0,0,1,633,313Z"/></g><path class="cls-2" d="M332.3,337.92H261.69a21.89,21.89,0,0,1-21.87-21.87,1.24,1.24,0,0,1,2.48,0,19.41,19.41,0,0,0,19.39,19.39H332.3a1.24,1.24,0,0,1,0,2.48Z"/><path class="cls-44" d="M487.69,9.36a2.27,2.27,0,0,1-.72-.12l-6.62-2.32a31.93,31.93,0,0,0-10.57-1.79H440.87a2.18,2.18,0,1,1,0-4.35h28.91a36.12,36.12,0,0,1,12,2l6.61,2.31a2.18,2.18,0,0,1-.71,4.23Z"/><path class="cls-44" d="M447.38,35.83a2.19,2.19,0,0,1-1.63-.73c-7.95-9-9.87-21.16-9.95-21.67a2.18,2.18,0,1,1,4.3-.66h0c0,.11,1.82,11.42,8.91,19.45a2.17,2.17,0,0,1-1.63,3.61Z"/><path class="cls-2" d="M523.49,18.28h-6.17a1.37,1.37,0,0,1,0-2.73h6.17a1.37,1.37,0,1,1,0,2.73Z"/><path class="cls-2" d="M566.78,55.61H485.61a51.89,51.89,0,0,1-37.49-16.16A54.5,54.5,0,0,1,432.61,1.36,1.36,1.36,0,0,1,434,0H470a41.13,41.13,0,0,1,32.32,15.55h9a1.37,1.37,0,0,1,0,2.73h-9.69a1.32,1.32,0,0,1-1.07-.53A38.4,38.4,0,0,0,470,2.73H435.35a51.86,51.86,0,0,0,14.72,34.82,49.19,49.19,0,0,0,35.54,15.33h79.78c-.72-18.89-16.32-34.6-34.7-34.6h-1.44a1.37,1.37,0,1,1,0-2.73h1.44c20.3,0,37.45,17.72,37.45,38.7A1.36,1.36,0,0,1,566.78,55.61Z"/><path class="cls-34" d="M217,257.27h88.39a0,0,0,0,1,0,0v24.27a0,0,0,0,1,0,0H227.6A10.63,10.63,0,0,1,217,270.91V257.27A0,0,0,0,1,217,257.27Z"/><rect class="cls-5" x="216.97" y="180.49" width="139.42" height="92.63" rx="7.36"/><path class="cls-46" d="M356.39,253.49v9.11a9.7,9.7,0,0,1-9.69,9.7h-120a9.7,9.7,0,0,1-9.69-9.7v-9.11a9.69,9.69,0,0,0,9.69,9.69h120A9.69,9.69,0,0,0,356.39,253.49Z"/><line class="cls-5" x1="216.97" y1="195.71" x2="350.96" y2="195.71"/><path class="cls-2" d="M348.89,274.35H224.47a8.75,8.75,0,0,1-8.74-8.73V188a8.75,8.75,0,0,1,8.74-8.73H348.89a8.75,8.75,0,0,1,8.74,8.73v77.64A8.75,8.75,0,0,1,348.89,274.35ZM224.47,181.73a6.26,6.26,0,0,0-6.26,6.25v77.64a6.27,6.27,0,0,0,6.26,6.26H348.89a6.27,6.27,0,0,0,6.26-6.26V188a6.26,6.26,0,0,0-6.26-6.25Z"/><path class="cls-2" d="M344.75,196.64H217a.93.93,0,1,1,0-1.86H344.75a.93.93,0,1,1,0,1.86Z"/><circle class="cls-47" cx="228.01" cy="188.79" r="2.28"/><circle class="cls-48" cx="236.44" cy="188.72" r="2.28"/><circle class="cls-49" cx="244.86" cy="188.64" r="2.28"/><path class="cls-2" d="M227.65,191.49h-.31a2.82,2.82,0,0,1-2.48-3.1,2.73,2.73,0,0,1,1-1.88,2.8,2.8,0,1,1,1.75,5Zm0-4.56a1.77,1.77,0,0,0-1.75,1.56,1.76,1.76,0,1,0,1.95-1.55Z"/><path class="cls-2" d="M236.08,191.42h-.32a2.81,2.81,0,0,1,.63-5.58,2.8,2.8,0,0,1,2.47,3.1A2.81,2.81,0,0,1,236.08,191.42Zm0-4.56a1.76,1.76,0,1,0,1.75,1.95,1.77,1.77,0,0,0-.37-1.29,1.74,1.74,0,0,0-1.18-.65h-.2Z"/><path class="cls-2" d="M244.5,191.35a1.62,1.62,0,0,1-.31,0,2.76,2.76,0,0,1-1.88-1,2.81,2.81,0,0,1-.6-2.07,2.77,2.77,0,0,1,1-1.88,2.82,2.82,0,0,1,2.06-.59,2.82,2.82,0,0,1,2.48,3.1,2.86,2.86,0,0,1-1,1.88A2.78,2.78,0,0,1,244.5,191.35Zm0-4.56a1.75,1.75,0,0,0-1.74,1.56,1.77,1.77,0,0,0,1.55,1.94,1.75,1.75,0,0,0,1.29-.37,1.76,1.76,0,0,0-.9-3.12Z"/><line class="cls-50" x1="264.05" y1="229.89" x2="264.06" y2="223.98"/><path class="cls-2" d="M273.69,217.59a.71.71,0,0,1,0-1.42l54-.48h0a.71.71,0,0,1,.71.7.72.72,0,0,1-.71.72l-54,.48Z"/><path class="cls-2" d="M273.69,222.38a.72.72,0,0,1-.71-.7.7.7,0,0,1,.7-.71l38.51-.48h0a.71.71,0,1,1,0,1.41l-38.51.48Z"/><path class="cls-2" d="M273.69,227.18a.71.71,0,0,1,0-1.42l21.11-.48a.73.73,0,0,1,.72.7.7.7,0,0,1-.69.72l-21.11.48Z"/><path class="cls-2" d="M273.69,235.35a.71.71,0,0,1,0-1.42l54-.48h0a.71.71,0,0,1,.71.7.72.72,0,0,1-.71.72l-54,.48Z"/><path class="cls-2" d="M273.69,240.14a.72.72,0,0,1-.71-.7.7.7,0,0,1,.7-.71l38.51-.48h0a.71.71,0,1,1,0,1.41l-38.51.48Z"/><path class="cls-2" d="M273.69,244.94a.71.71,0,0,1,0-1.42l21.11-.48a.73.73,0,0,1,.72.7.7.7,0,0,1-.69.72l-21.11.48Z"/><rect class="cls-51" x="257.48" y="212.17" width="8.09" height="1.55" rx="0.77" transform="translate(17.78 446.02) rotate(-82.87)"/><rect class="cls-51" x="260.13" y="216.69" width="8.09" height="1.55" rx="0.77" transform="translate(15.61 452.61) rotate(-82.87)"/><rect class="cls-51" x="255.62" y="241.14" width="4.64" height="0.89" rx="0.44" transform="translate(-13.78 467.56) rotate(-82.87)"/><line class="cls-50" x1="267.43" y1="233.8" x2="267.44" y2="227.89"/><path class="cls-52" d="M267.46,221.23l0-8.57a4.25,4.25,0,0,0-4.23-4.27h0l-29.82-.06a4.26,4.26,0,0,0-4.28,4.23v0l-.07,36.07a4.26,4.26,0,0,0,4.23,4.28h0l29.82.06a4.26,4.26,0,0,0,4.28-4.23v-7.59"/><path class="cls-53" d="M230.14,229.91a.94.94,0,0,1-.95-.92l-.11-16.73c-.07-4.25,3.15-4.42,7.4-4.5a.94.94,0,1,1,.27,1.87h-.23a5.85,5.85,0,0,0-5.72,6l.26,13.36A1,1,0,0,1,230.14,229.91Z"/><ellipse class="cls-53" cx="231.23" cy="226.12" rx="1.13" ry="1.42" transform="translate(-4.31 4.49) rotate(-1.1)"/><circle class="cls-53" cx="232.51" cy="224.11" r="0.3"/><circle class="cls-54" cx="232.1" cy="228.38" r="0.36"/><circle class="cls-53" cx="233.33" cy="226.37" r="0.56"/><circle class="cls-53" cx="231" cy="219.97" r="0.53"/><circle class="cls-53" cx="231.44" cy="222.62" r="0.15"/><circle class="cls-53" cx="232.51" cy="217.27" r="0.47"/><circle class="cls-53" cx="232.33" cy="214.58" r="0.3"/><circle class="cls-53" cx="232.76" cy="211.34" r="0.79"/><path class="cls-2" d="M262.79,253.07h0L232.94,253a5,5,0,0,1-3.57-1.49,5,5,0,0,1-1.44-3.55l.07-36.08a5,5,0,0,1,5-5h0l29.83.06a5,5,0,0,1,5,5v8.57h0l-.06,27.54a5,5,0,0,1-1.49,3.56A4.94,4.94,0,0,1,262.79,253.07ZM233,208.39a3.5,3.5,0,0,0-3.49,3.47L229.45,248a3.47,3.47,0,0,0,3.47,3.51l29.85.06a3.53,3.53,0,0,0,2.48-1,3.44,3.44,0,0,0,1-2.46l.08-36.13a3.51,3.51,0,0,0-3.49-3.5L233,208.39Zm34.09,12.13h0Z"/><path class="cls-55" d="M262.75,236h0a1.19,1.19,0,0,1,1.2,1.19l.05,9.2a1.2,1.2,0,0,1-1.19,1.2h0a1.19,1.19,0,0,1-1.2-1.19l-.05-9.2A1.19,1.19,0,0,1,262.75,236Z"/><path class="cls-5" d="M231.74,226.78h0a.92.92,0,0,1,.92.92l0,7.07a.92.92,0,0,1-.91.92h0a.92.92,0,0,1-.93-.91l0-7.07A.93.93,0,0,1,231.74,226.78Z"/><path class="cls-34" d="M71.77,275.23v8.18l15.11,5.29s3.39,13,16.45,13,15.27-17.42,15.27-17.42Z"/><rect class="cls-5" x="55.12" y="233.44" width="9.07" height="72.78" transform="translate(-215.16 240.76) rotate(-71.49)"/><path class="cls-2" d="M92.73,286.79a1,1,0,0,1-.35-.06l-69-23.1a1.07,1.07,0,0,1-.63-.55,1.09,1.09,0,0,1-.06-.85l2.88-8.6a1.09,1.09,0,0,1,1.39-.69L96,276a1.1,1.1,0,0,1,.63.55,1.11,1.11,0,0,1,.06.84L93.77,286A1.09,1.09,0,0,1,92.73,286.79Zm-67.62-24.9L92,284.29l2.18-6.51-66.92-22.4Z"/><circle class="cls-5" cx="15.54" cy="255.17" r="14.43"/><path class="cls-2" d="M15.57,270.7a15.52,15.52,0,1,1,7.49-1.93A15.53,15.53,0,0,1,15.57,270.7Zm-.05-28.87a13.35,13.35,0,0,0-12.79,9.65A13.33,13.33,0,0,0,22,266.84a13.33,13.33,0,0,0-2.76-24.48A13.47,13.47,0,0,0,15.52,241.83Z"/><circle class="cls-20" cx="15.54" cy="255.17" r="7.98"/><path class="cls-2" d="M15.56,264.25a9.09,9.09,0,1,1,4.37-1.13A9,9,0,0,1,15.56,264.25Zm0-16a6.81,6.81,0,0,0-3.31.86,6.9,6.9,0,0,0-2.7,9.35,6.88,6.88,0,1,0,7.93-9.94A7,7,0,0,0,15.53,248.29Z"/><circle class="cls-34" cx="123.54" cy="210.16" r="12.18"/><rect class="cls-5" x="108.02" y="204.21" width="9.07" height="72.78" transform="translate(165.2 500.96) rotate(-166.36)"/><path class="cls-56" d="M122.67,217.83l-1.1,4.52a14.42,14.42,0,0,1-8.65-2.82l.93-3.85A14.45,14.45,0,0,0,122.67,217.83Z"/><path class="cls-2" d="M108.38,278.14a.82.82,0,0,1-.26,0L99.31,276a1.09,1.09,0,0,1-.81-1.33l17.16-70.73a1.08,1.08,0,0,1,.5-.68,1.1,1.1,0,0,1,.83-.13l8.82,2.14a1.1,1.1,0,0,1,.81,1.33l-17.17,70.72a1.11,1.11,0,0,1-1.07.85Zm-7.48-4.06,6.67,1.62,16.65-68.58-6.68-1.62Z"/><circle class="cls-5" cx="121.67" cy="203.06" r="14.43"/><path class="cls-2" d="M121.69,218.59a15.52,15.52,0,1,1,7.49-1.93A15.53,15.53,0,0,1,121.69,218.59Zm0-28.86A13.32,13.32,0,0,0,110,209.51a13.33,13.33,0,1,0,11.64-19.78Z"/><circle class="cls-20" cx="121.67" cy="203.06" r="7.98"/><path class="cls-2" d="M121.68,212.14a9.08,9.08,0,1,1,7.93-13.47h0a9.07,9.07,0,0,1-7.93,13.47Zm0-16a6.88,6.88,0,1,0,6,3.55h0A6.91,6.91,0,0,0,121.65,196.18Z"/><circle class="cls-5" cx="104.16" cy="283.21" r="14.43"/><path class="cls-2" d="M104.19,298.74a15.53,15.53,0,1,1,13.57-23.05h0a15.53,15.53,0,0,1-13.57,23.05Zm0-28.87a13.21,13.21,0,0,0-6.43,1.67,13.33,13.33,0,1,0,18.12,5.22,13.4,13.4,0,0,0-11.69-6.89Z"/><circle class="cls-20" cx="104.16" cy="283.21" r="7.98"/><path class="cls-2" d="M104.17,292.29a9.08,9.08,0,1,1,7.94-13.47h0a9.08,9.08,0,0,1-7.94,13.47Zm0-16a6.88,6.88,0,1,0,6,3.55h0a6.83,6.83,0,0,0-4.12-3.28A6.94,6.94,0,0,0,104.15,276.33Z"/><path class="cls-2" d="M520.55,311.3a1.17,1.17,0,0,1-1.17-1.17V279.48a1.17,1.17,0,0,1,2.34,0v30.65A1.17,1.17,0,0,1,520.55,311.3Z"/><path class="cls-2" d="M520.55,273.51a1.17,1.17,0,0,1-1.17-1.17v-5.8a1.17,1.17,0,0,1,2.34,0v5.8A1.17,1.17,0,0,1,520.55,273.51Z"/><path class="cls-57" d="M538.86,152.62c0,19.29-14.61,34.93-32.68,35h-1.33c-17.68-.07-32.1-15.12-32.65-34l-.31-14.83c1.42-5.57,5.44-6.1,10.47-7.16h46c5,1.05,9.05.09,10.48,5.7Z"/><path class="cls-58" d="M482,139.28h47.82v10.57a23.91,23.91,0,0,1-23.91,23.91h0A23.91,23.91,0,0,1,482,149.85V139.28Z"/><path class="cls-59" d="M510.83,173.21a23.91,23.91,0,0,1-28.34-18.45,23.3,23.3,0,0,1-.52-4.92V139.28h9.93v10.56A23.9,23.9,0,0,0,510.83,173.21Z"/><rect class="cls-5" x="490.11" y="139.28" width="39.66" height="14.51"/><rect class="cls-60" x="490.11" y="139.28" width="39.66" height="6.05"/><path class="cls-61" d="M527.58,155.37v2.78c0,8.41-6.81,14-15.22,14-2.65,0-5.15,1.84-7.32.63l-.11-.92a16.81,16.81,0,0,1-.28-2.93,15.48,15.48,0,0,1,22.84-13.59Z"/><path class="cls-62" d="M515.17,172.05a15.06,15.06,0,0,1-2.76.24c-2.66,0-5.15,1.85-7.32.63L505,172a16.06,16.06,0,0,1-.28-2.93,15.65,15.65,0,0,1,.27-2.9C506.9,170.34,510.64,171,515.17,172.05Z"/><path class="cls-2" d="M505,173.25a.8.8,0,0,1-.79-.66,16.28,16.28,0,0,1,23.75-17.36.81.81,0,0,1-.77,1.42,14.67,14.67,0,0,0-21.4,15.64.79.79,0,0,1-.64.94Z"/><path class="cls-63" d="M508.67,161.49a.34.34,0,0,1-.23-.08.4.4,0,0,1-.09-.56A15,15,0,0,1,519,154.91a.4.4,0,1,1,.07.79A14.19,14.19,0,0,0,509,161.33.36.36,0,0,1,508.67,161.49Z"/><ellipse class="cls-63" cx="510.25" cy="160.57" rx="1.52" ry="0.97" transform="translate(86.51 487.04) rotate(-55.08)"/><circle class="cls-63" cx="512.9" cy="159.8" r="0.49"/><circle class="cls-63" cx="511.91" cy="162.43" r="0.49"/><path class="cls-2" d="M528.5,155.06H490.11a1.27,1.27,0,0,1-1.27-1.27V139.9a1.27,1.27,0,0,1,2.53,0v12.62H528.5a1.27,1.27,0,0,1,0,2.54Z"/><path class="cls-2" d="M506.93,174.94h-2.12a24.08,24.08,0,0,1-24.05-24v-9.42a3.41,3.41,0,0,1,3.41-3.41h43.39a3.41,3.41,0,0,1,3.41,3.4v9.41a24.05,24.05,0,0,1-24.05,24.06Zm-22.76-34.45a1,1,0,0,0-.7.29,1,1,0,0,0-.29.7v9.42a21.64,21.64,0,0,0,21.62,21.61h2.12a21.59,21.59,0,0,0,21.62-21.63v-9.4a1,1,0,0,0-1-1Z"/><path class="cls-5" d="M545.93,133.71h-2.72a2,2,0,0,1-2-1.63L533,89.3a2,2,0,0,1,2-2.39h2.72a2,2,0,0,1,2,1.63l8.26,42.78A2,2,0,0,1,545.93,133.71Z"/><path class="cls-64" d="M535,132.44h0a2,2,0,0,1-2-1.63L524.73,88a2,2,0,0,1,2-2.39h0a2,2,0,0,1,2,1.63l8.26,42.78A2,2,0,0,1,535,132.44Z"/><path class="cls-17" d="M535.58,82.54a27.59,27.59,0,1,0,27.58,27.58A27.58,27.58,0,0,0,535.58,82.54Zm0,47.7a20.13,20.13,0,1,1,20.12-20.12A20.12,20.12,0,0,1,535.58,130.24Z"/><path class="cls-21" d="M563.16,110.12c0,.53,0,1.07,0,1.6a27.58,27.58,0,0,0-55.07,0c0-.53-.06-1.07-.06-1.6a27.59,27.59,0,1,1,55.18,0Z"/><path class="cls-2" d="M535.81,138.56a28.84,28.84,0,1,1,28.84-28.84A28.87,28.87,0,0,1,535.81,138.56Zm0-55.18a26.34,26.34,0,1,0,26.33,26.34A26.37,26.37,0,0,0,535.81,83.38Z"/><path class="cls-2" d="M535.81,131.09a21.38,21.38,0,1,1,21.37-21.37A21.4,21.4,0,0,1,535.81,131.09Zm0-40.24a18.87,18.87,0,1,0,18.87,18.87A18.88,18.88,0,0,0,535.81,90.85Z"/><path class="cls-5" d="M485.85,133.71h-2.72a2,2,0,0,1-2-1.63L472.9,89.3a2,2,0,0,1,2-2.39h2.71a2,2,0,0,1,2,1.63l8.25,42.78A2,2,0,0,1,485.85,133.71Z"/><path class="cls-64" d="M474.88,132.44h0a2,2,0,0,1-2-1.63L464.65,88a2,2,0,0,1,2-2.39h0a2,2,0,0,1,2,1.63l8.25,42.78A2,2,0,0,1,474.88,132.44Z"/><path class="cls-17" d="M475.49,82.54a27.59,27.59,0,1,0,27.59,27.58A27.58,27.58,0,0,0,475.49,82.54Zm0,47.7a20.13,20.13,0,1,1,20.12-20.12A20.12,20.12,0,0,1,475.49,130.24Z"/><path class="cls-21" d="M503.08,110.12c0,.53,0,1.07-.06,1.6a27.58,27.58,0,0,0-55.06,0c0-.53-.06-1.07-.06-1.6a27.59,27.59,0,1,1,55.18,0Z"/><path class="cls-2" d="M475.72,138.56a28.84,28.84,0,1,1,28.84-28.84A28.88,28.88,0,0,1,475.72,138.56Zm0-55.18a26.34,26.34,0,1,0,26.34,26.34A26.37,26.37,0,0,0,475.72,83.38Z"/><path class="cls-2" d="M475.72,131.09a21.38,21.38,0,1,1,21.38-21.37A21.4,21.4,0,0,1,475.72,131.09Zm0-40.24a18.87,18.87,0,1,0,18.87,18.87A18.89,18.89,0,0,0,475.72,90.85Z"/><ellipse class="cls-5" cx="481.22" cy="176.24" rx="2.89" ry="1.66" transform="translate(162.51 577.56) rotate(-71.66)"/><circle class="cls-42" cx="486.45" cy="177.86" r="0.93"/><path class="cls-42" d="M483.61,178.8a.72.72,0,1,1,0,1.44.72.72,0,0,1,0-1.44Z"/><circle class="cls-42" cx="484.56" cy="172.87" r="0.95"/><path class="cls-2" d="M543.44,180.22a1.16,1.16,0,0,1-.87-.39L538,174.78a1.17,1.17,0,0,1,1.74-1.56l4.53,5.05a1.17,1.17,0,0,1-.09,1.65A1.19,1.19,0,0,1,543.44,180.22Z"/><path class="cls-2" d="M556,166.12a1.16,1.16,0,0,1-.87-.39l-4.53-5a1.17,1.17,0,0,1,1.74-1.56l4.53,5a1.17,1.17,0,0,1-.09,1.65A1.16,1.16,0,0,1,556,166.12Z"/><path class="cls-2" d="M525.26,189.2a1.17,1.17,0,0,1-1.1-.78L521.9,182a1.17,1.17,0,1,1,2.2-.77l2.26,6.39a1.16,1.16,0,0,1-.71,1.49A1.07,1.07,0,0,1,525.26,189.2Z"/><path class="cls-2" d="M533.49,187.45a1.17,1.17,0,0,1-1.1-.78l-1.46-4.14a1.17,1.17,0,0,1,2.21-.77l1.46,4.13a1.17,1.17,0,0,1-.72,1.49A1.07,1.07,0,0,1,533.49,187.45Z"/><path class="cls-2" d="M534.13,169.55a1.15,1.15,0,0,1-1-.62l-1.66-3.08a1.17,1.17,0,1,1,2-1.11l1.66,3.09a1.16,1.16,0,0,1-.47,1.58A1.25,1.25,0,0,1,534.13,169.55Z"/><path class="cls-2" d="M545.37,166.94a1.16,1.16,0,0,1-1-.48l-2.08-2.89a1.17,1.17,0,0,1,1.89-1.37l2.09,2.9a1.17,1.17,0,0,1-.27,1.62A1.15,1.15,0,0,1,545.37,166.94Z"/><path class="cls-2" d="M467.31,180.22a1.19,1.19,0,0,1-.78-.3,1.17,1.17,0,0,1-.09-1.65l4.53-5.05a1.17,1.17,0,1,1,1.74,1.56l-4.53,5.05A1.16,1.16,0,0,1,467.31,180.22Z"/><path class="cls-2" d="M454.75,166.12a1.16,1.16,0,0,1-.78-.3,1.17,1.17,0,0,1-.09-1.65l4.53-5a1.17,1.17,0,1,1,1.74,1.56l-4.53,5A1.16,1.16,0,0,1,454.75,166.12Z"/><path class="cls-2" d="M485.49,189.2a1.07,1.07,0,0,1-.39-.07,1.16,1.16,0,0,1-.71-1.49l2.26-6.39a1.17,1.17,0,1,1,2.2.77l-2.26,6.4A1.17,1.17,0,0,1,485.49,189.2Z"/><path class="cls-2" d="M477.26,187.45a1,1,0,0,1-.39-.07,1.17,1.17,0,0,1-.72-1.49l1.46-4.13a1.17,1.17,0,0,1,2.21.77l-1.46,4.14A1.17,1.17,0,0,1,477.26,187.45Z"/><path class="cls-2" d="M476.62,169.55a1.25,1.25,0,0,1-.55-.14,1.16,1.16,0,0,1-.47-1.58l1.66-3.09a1.17,1.17,0,1,1,2.05,1.11l-1.66,3.08A1.15,1.15,0,0,1,476.62,169.55Z"/><path class="cls-2" d="M465.38,166.94a1.15,1.15,0,0,1-.68-.22,1.17,1.17,0,0,1-.27-1.62l2.08-2.9a1.17,1.17,0,0,1,1.9,1.37l-2.08,2.89A1.16,1.16,0,0,1,465.38,166.94Z"/><path class="cls-2" d="M473.22,156.66a1.17,1.17,0,0,1-1-1.72l1.66-3.09a1.17,1.17,0,0,1,2.06,1.11l-1.66,3.09A1.16,1.16,0,0,1,473.22,156.66Z"/><path class="cls-2" d="M462,154.06a1.2,1.2,0,0,1-.68-.22,1.16,1.16,0,0,1-.27-1.63l2.08-2.89a1.16,1.16,0,0,1,1.63-.27,1.18,1.18,0,0,1,.27,1.63l-2.08,2.89A1.17,1.17,0,0,1,462,154.06Z"/><path class="cls-2" d="M542.11,155.08a1.16,1.16,0,0,1-1-.61l-1.66-3.09a1.17,1.17,0,1,1,2.05-1.11l1.67,3.09a1.17,1.17,0,0,1-1,1.72Z"/><path class="cls-2" d="M553.35,152.48a1.17,1.17,0,0,1-1-.49l-2.08-2.89a1.17,1.17,0,1,1,1.9-1.36l2.08,2.89a1.17,1.17,0,0,1-.27,1.63A1.13,1.13,0,0,1,553.35,152.48Z"/><circle class="cls-1" cx="638.68" cy="220.25" r="8.47"/><path class="cls-5" d="M647.15,220.25a8.47,8.47,0,0,1-16.94,0c0-4.68,3.79,1.05,8.47,1.05S647.15,215.57,647.15,220.25Z"/><path class="cls-2" d="M638.68,229.93a9.69,9.69,0,1,1,9.69-9.68A9.69,9.69,0,0,1,638.68,229.93Zm0-16.93a7.25,7.25,0,1,0,7.25,7.25A7.26,7.26,0,0,0,638.68,213Z"/><circle class="cls-1" cx="598.1" cy="220.25" r="8.47"/><path class="cls-5" d="M606.57,220.25a8.47,8.47,0,0,1-16.94,0c0-4.68,3.79,1.05,8.47,1.05S606.57,215.57,606.57,220.25Z"/><path class="cls-2" d="M598.1,229.93a9.69,9.69,0,1,1,9.68-9.68A9.7,9.7,0,0,1,598.1,229.93Zm0-16.93a7.25,7.25,0,1,0,7.25,7.25A7.26,7.26,0,0,0,598.1,213Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/svg/login-bg-dark.svg b/apps/grid-admin/src/assets/svg/login-bg-dark.svg
new file mode 100644
index 00000000..888da7af
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/login-bg-dark.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1080" viewBox="0 0 6395 1080">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_73" data-name="Rectangle 73" width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.631" y1="0.5" x2="0.958" y2="0.488" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2e364a"/>
+      <stop offset="1" stop-color="#2c344a"/>
+    </linearGradient>
+  </defs>
+  <g id="Web_1920_1" data-name="Web 1920 – 1" clip-path="url(#clip-Web_1920_1)">
+    <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
+      <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
+        <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383)" fill="#2d3750"/>
+        <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022h5599.8V0h759.7s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/apps/grid-admin/src/assets/svg/login-bg.svg b/apps/grid-admin/src/assets/svg/login-bg.svg
new file mode 100644
index 00000000..7b66bafc
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/login-bg.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1079" viewBox="0 0 6395 1079">
+  <defs>
+    <clipPath id="clip-path">
+      <rect  width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.747" y1="0.222" x2="0.973" y2="0.807" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2c41b4"/>
+      <stop offset="1" stop-color="#1b4fab"/>
+    </linearGradient>
+  </defs>
+  <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
+    <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
+      <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383 0)" fill="#f1f5f8"/>
+      <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022H-2631.1V0H-1871.4s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>
diff --git a/apps/grid-admin/src/assets/svg/login-box-bg.svg b/apps/grid-admin/src/assets/svg/login-box-bg.svg
new file mode 100644
index 00000000..ee7dbdc2
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/login-box-bg.svg
@@ -0,0 +1 @@
+<svg id="a622e68e-7a65-46e9-94a9-d455de519afc" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="971.44" height="502" viewBox="0 0 971.44 502"><defs><linearGradient id="341b0e5e-a21f-44db-b85f-76180f33f0d3" x1="599.5" y1="668.05" x2="599.5" y2="199" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="9c19d1ba-0c1d-4cca-8c15-e6f3831a5e67" x1="485.72" y1="258.88" x2="485.72" y2="71.12" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/><linearGradient id="fe76f7c7-2126-4e48-920d-21143a22d340" x1="132" y1="515" x2="303" y2="515" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/><linearGradient id="2cf89a04-5a05-413b-983a-d2bc296cbb5e" x1="933" y1="568.28" x2="1031" y2="568.28" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/></defs><title>responsive</title><g opacity="0.7"><path d="M852.69,199H346.31A16.37,16.37,0,0,0,330,215.42V563.94a16.37,16.37,0,0,0,16.31,16.42H520.47v60.16h-7.94a8.3,8.3,0,0,0-8.27,8.33v12.07h16.21v7.14H678.53v-7.14h16.21V648.85a8.3,8.3,0,0,0-8.27-8.33H679V640h-.51V580.36H852.69A16.37,16.37,0,0,0,869,563.94V215.42A16.37,16.37,0,0,0,852.69,199Z" transform="translate(-114.28 -199)" fill="url(#341b0e5e-a21f-44db-b85f-76180f33f0d3)"/></g><rect x="407.72" y="371" width="156" height="92" fill="#bdbdbd"/><g opacity="0.1"><path d="M525.07,579H675.24c1.81-7.87,3.26-13,3.26-13h-157S523.11,571.11,525.07,579Z" transform="translate(-114.28 -199)"/></g><path d="M235.82,3h499.8a16.1,16.1,0,0,1,16.1,16.1V327a0,0,0,0,1,0,0h-532a0,0,0,0,1,0,0V19.1A16.1,16.1,0,0,1,235.82,3Z" fill="#535461"/><path d="M849.9,576H350.1A16.1,16.1,0,0,1,334,559.9V526H866v33.9A16.1,16.1,0,0,1,849.9,576Z" transform="translate(-114.28 -199)" fill="#bdbdbd"/><circle cx="485.72" cy="352" r="9" fill="#535461"/><path d="M399.89,436H571.55a8.17,8.17,0,0,1,8.17,8.17V456a0,0,0,0,1,0,0h-188a0,0,0,0,1,0,0V444.17A8.17,8.17,0,0,1,399.89,436Z" fill="#bdbdbd"/><g opacity="0.5"><rect x="320.72" y="71.12" width="330" height="187.76" rx="4.5" ry="4.5" fill="url(#9c19d1ba-0c1d-4cca-8c15-e6f3831a5e67)"/></g><rect x="324.95" y="72.5" width="321.54" height="183.96" rx="4.5" ry="4.5" fill="#fff"/><g opacity="0.5"><rect x="414.52" y="98.91" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="98.91" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="109.55" width="79.54" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><g opacity="0.5"><rect x="414.52" y="148.53" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="148.53" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="159.16" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><g opacity="0.5"><rect x="414.52" y="198.15" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="198.15" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="208.78" width="96.33" height="3.54" rx="1.59" ry="1.59" fill="#e0e0e0"/><line x1="485.72" y1="42" x2="485.72" y2="20" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="79" x2="485.72" y2="50.13" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="79" r="4" fill="#0960bd"/><circle cx="485.72" cy="46" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><line x1="485.72" y1="42" x2="485.72" y2="20" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="79" x2="485.72" y2="50.13" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="79" r="4" fill="#0960bd"/><circle cx="485.72" cy="46" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><line x1="485.72" y1="279" x2="485.72" y2="310" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="251" x2="485.72" y2="279.87" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="251" r="4" fill="#0960bd"/><line x1="305.72" y1="168.5" x2="274.22" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="333.22" y1="168.5" x2="304.35" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="333.22" cy="168.5" r="4" fill="#0960bd"/><g opacity="0.1"><rect x="408.22" y="435.5" width="156" height="3"/></g><g opacity="0.7"><path d="M293.48,566.06H221.08l1-8.14c20.46-18.37,33.69-67.31,33.69-67.31a6.78,6.78,0,0,0-.87.18c-12,2.42-20.54,7.35-26.51,13.28l2.54-21.66c37.8-8.14,52.79-58.14,52.79-58.14-24.12,5.35-39.16,13.63-48.5,21.49l3.72-31.82c25.56,8.77,52-37.82,52-37.82l-1-.21.5-.32-.76.27c-28.25-6.09-43.35,10.06-48.25,16.77l.37-3.12q-1.12,3-2.18,5.88h0l0,.08q-3,8.13-5.49,16.06l0,0h0q-2.17,6.77-4.06,13.4l0-.06s-1.17-28.46-31.18-35.95c0,0,3.15,62.07,26.93,51.91h0c-2.2,9-4,17.66-5.56,26.07h0q-1.49,8.21-2.6,16l-.14.16.14-.12-.06.41v0h0q-1,7.07-1.7,13.78c.46-8.62-1.11-33.52-30.45-56.92,0,0-39,68.54,27.5,82,.15.13.3.26.44.38l-.1-.31.6.13.27-3.52a369.39,369.39,0,0,0,.23,44.1h0c.07,1,.14,2,.21,2.95H141.37c-27.94,57.79,15.52,89.46,15.52,89.46h120C323.49,596.66,293.48,566.06,293.48,566.06Zm-78-65.68h0v0Z" transform="translate(-114.28 -199)" fill="url(#fe76f7c7-2126-4e48-920d-21143a22d340)"/></g><path d="M217,588s-19-83,23-190" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="3" opacity="0.6"/><path d="M143,563H290s29,37-16,92H158S116,617,143,563Z" transform="translate(-114.28 -199)" fill="#0960bd"/><path d="M237.89,403.5s14.61-26,49.61-18c0,0-28.93,49.26-55,33.13Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M228.63,431.09S227.5,404.5,198.5,397.5c0,0,3,58,26,48.5Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M219.15,470.36s5.35-27.86,61.35-39.86c0,0-17.86,57.62-63.93,55.31Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M214.61,501.63s5.89-29.13-29.11-56.13c0,0-38,64.67,27.48,76.83Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M213.56,541.67S209.5,500.5,253.5,492.5c0,0-16.07,57.49-40,67.74Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M233,419s38-29,54-34" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M216.5,485.5s46-49,64-55" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M198.5,397.5s28,38,26,48" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M185.5,445.5s15,68,27,77" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M213.5,560.5s24-66,40-68" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><g opacity="0.1"><path d="M290,563H143c-.33.67-.65,1.34-1,2H285s28.29,36.11-14.4,90H274C319,600,290,563,290,563Z" transform="translate(-114.28 -199)"/></g><rect y="455.6" width="971.44" height="32.93" fill="#e0e0e0"/><rect x="41.16" y="488.53" width="889.11" height="13.47" fill="#e0e0e0"/><rect x="41.16" y="488.53" width="889.11" height="4.49" opacity="0.1"/><line x1="690.22" y1="168.5" x2="696.22" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="637.22" y1="168.5" x2="682.1" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="637.22" cy="168.5" r="4" fill="#0960bd"/><circle cx="686.22" cy="168.5" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><g opacity="0.7"><path d="M1027,643.88l.1-.15q.31-.48.61-1l.11-.19q.29-.49.55-1l.09-.17c.2-.39.39-.78.56-1.19h0a23.79,23.79,0,0,0,.94-2.51l.1-.33c.09-.31.18-.62.26-.93l.1-.44q.1-.42.18-.85c0-.16.06-.32.09-.48s.09-.56.13-.85,0-.33.06-.49.06-.61.08-.92c0-.14,0-.29,0-.43,0-.45,0-.91,0-1.36V548h-13.85V507.52h-17V548H988.39V489.86h-17V548H965V481.55h-17V548H933V630.6c0,13.48,11.21,24.4,25,24.4H1006a25.19,25.19,0,0,0,20.24-10.06l0,0Q1026.61,644.41,1027,643.88Z" transform="translate(-114.28 -199)" fill="url(#2cf89a04-5a05-413b-983a-d2bc296cbb5e)"/></g><rect x="835.72" y="321" width="16" height="100" fill="#535461"/><rect x="835.72" y="288" width="16" height="33" fill="#3ad29f"/><rect x="857.72" y="329" width="16" height="100" fill="#535461"/><rect x="857.72" y="296" width="16" height="33" fill="#4d8af0"/><rect x="884.72" y="346" width="16" height="100" fill="#535461"/><rect x="884.72" y="313" width="16" height="33" fill="#f55f44"/><path d="M821.72,352h92a0,0,0,0,1,0,0v79.5a23.5,23.5,0,0,1-23.5,23.5h-45a23.5,23.5,0,0,1-23.5-23.5V352A0,0,0,0,1,821.72,352Z" fill="#0960bd"/><g opacity="0.1"><path d="M936,551v4h88v79.5a23.39,23.39,0,0,1-5,14.49,23.45,23.45,0,0,0,9-18.49V551Z" transform="translate(-114.28 -199)"/></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/svg/net-error.svg b/apps/grid-admin/src/assets/svg/net-error.svg
new file mode 100644
index 00000000..81f20044
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/net-error.svg
@@ -0,0 +1 @@
+<svg id="ac370e99-250f-4203-ae2c-c306a69114f3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1144" height="697.99" viewBox="0 0 1144 697.99"><defs><linearGradient id="b5f20e7f-16f1-44c3-85ac-2c33fb8e67f8" x1="2612.03" y1="795.18" x2="2612.03" y2="399.52" gradientTransform="matrix(-1, 0, 0, 1, 3436, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>personal settings</title><path d="M1172,516.31a180.56,180.56,0,0,1-26.12,93.88c0,34.62-16.14,66-42.32,88.87a144.74,144.74,0,0,1-21.08,15.28c-.3.19-.61.37-.92.55-.56.33-1.12.66-1.69,1l-.53.31h0A164.61,164.61,0,0,1,998.24,737H245.17q-9,0-17.84-.72a211.15,211.15,0,0,1-61.06-14.14q-5.72-2.26-11.22-4.86-2.62-1.23-5.19-2.53c-1.07-.54-2.14-1.1-3.2-1.66A187.42,187.42,0,0,1,112.2,689.7c-34-29.23-55.08-69.61-55.08-114.21A180.5,180.5,0,0,1,28,476.82c0-99.14,79.24-179.51,177-179.51,3,0,6,.09,9,.25.43,0,.85,0,1.28.06,16.48-28.09,38.51-53.9,65-76.62,72.24-61.9,177.82-100.92,295.43-100.92,98.82,0,189.15,27.55,258.34,73.07A174.18,174.18,0,0,1,920,170.6c97.74,0,177,80.37,177,179.51a184.9,184.9,0,0,1-1,18.78A180,180,0,0,1,1172,516.31Z" transform="translate(-28 -101)" fill="#0960bd" opacity="0.1"/><g opacity="0.2"><path d="M166.37,720.79c0,.46-.05.91-.1,1.35q-5.72-2.26-11.22-4.86a9.1,9.1,0,0,1-5.19-2.53c-1.07-.54-2.14-1.1-3.2-1.66a13.68,13.68,0,0,1,.81-1.46c2.06-3.26,5.19-5.3,8.64-5.19s6.44,2.34,8.29,5.71A16.87,16.87,0,0,1,166.37,720.79Z" transform="translate(-28 -101)" fill="#3f3d56"/><path d="M166.91,703.67a16.88,16.88,0,0,1-2.51,8.48c-2.06,3.25-5.19,5.29-8.64,5.18l-.71-.05a9.1,9.1,0,0,1-5.19-2.53,12.53,12.53,0,0,1-2.39-3.12,17.55,17.55,0,0,1,.54-17.12c2.06-3.26,5.19-5.3,8.64-5.19s6.44,2.34,8.29,5.71A16.87,16.87,0,0,1,166.91,703.67Z" transform="translate(-28 -101)" fill="#3f3d56"/><ellipse cx="156.75" cy="686.21" rx="14.01" ry="10.7" transform="translate(-562.06 720.24) rotate(-88.19)" fill="#3f3d56"/><ellipse cx="157.29" cy="669.09" rx="14.01" ry="10.7" transform="translate(-544.43 704.2) rotate(-88.19)" fill="#3f3d56"/><ellipse cx="157.83" cy="651.97" rx="14.01" ry="10.7" transform="matrix(0.03, -1, 1, 0.03, -526.79, 688.16)" fill="#3f3d56"/><path d="M121.47,533.55a49.66,49.66,0,0,1-3.8-6l28.26-3.73-30.42-.73a51.38,51.38,0,0,1,.31-40.64l40.12,22.45-36.75-28.85a51.28,51.28,0,1,1,82.84,60,51.12,51.12,0,0,1,5.55,9.53l-37.09,17.81,39.33-11.83A51.34,51.34,0,0,1,200,599.47a51.28,51.28,0,1,1-80.56-2.54,51.28,51.28,0,0,1,2-63.38Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M212,568.13a51.06,51.06,0,0,1-12,31.34,51.28,51.28,0,1,1-80.56-2.54C112.87,588,212.18,562.37,212,568.13Z" transform="translate(-28 -101)" opacity="0.1"/></g><path d="M986,239.41V718.59A18.41,18.41,0,0,1,967.59,737H232.41a18.13,18.13,0,0,1-5.08-.72A18.38,18.38,0,0,1,214,718.59V504.75c0-1.09,0-2.17,0-3.25V297.56c.43,0,.85,0,1.28.06,16.48-28.09,38.51-53.9,65-76.62H967.59A18.41,18.41,0,0,1,986,239.41Z" transform="translate(-28 -101)" fill="#fff"/><rect x="712.17" y="182.23" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="188.24" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="189.55" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="200.21" r="6.66" fill="#fff"/><rect x="712.17" y="419.28" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="425.29" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="426.6" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="437.26" r="6.66" fill="#fff"/><rect x="712.17" y="537.8" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="543.82" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="545.13" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="555.78" r="6.66" fill="#fff"/><rect x="294" y="159.59" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="189.55" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="219.52" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><g opacity="0.5"><rect x="294" y="278.11" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="308.08" width="167" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="338.04" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/></g><rect x="294" y="396.64" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="426.6" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="456.57" width="139" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="515.16" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="545.13" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="575.09" width="180" height="21.31" rx="10.65" fill="#0960bd"/><line x1="260" y1="259.99" x2="912" y2="259.99" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="380.49" x2="912" y2="380.49" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="500.99" x2="912" y2="500.99" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="624.49" x2="912" y2="624.49" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><ellipse cx="795" cy="687.49" rx="147.68" ry="10.5" fill="#0960bd" opacity="0.1"/><circle cx="70.52" cy="141.18" r="21.63" fill="#0960bd" opacity="0.1"/><circle cx="160.67" cy="21.63" r="21.63" fill="#0960bd" opacity="0.1"/><circle cx="153.34" cy="103.76" r="36.25" fill="#0960bd" opacity="0.1"/><rect x="712.17" y="300.75" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="306.77" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><path d="M753.17,762c1.57-.23,3.14-.55,4.68-.91a14.62,14.62,0,0,1-1.32,4.44c-1.53,2.9-4.52,4.65-7.27,6.43a2.25,2.25,0,0,0-2.84-.19c-3.31,2-5.95,4.82-9.46,6.54-1.23.6-2.51,1.08-3.71,1.75a20,20,0,0,0-7,7.23c-1,1.55-1.81,3.59-.83,5.13a4.44,4.44,0,0,0,1.42,1.27,8.08,8.08,0,0,0,4.87,1.45c1-.09,2-.47,3.09-.64,1.37-.24,2.77-.12,4.15-.24a24.26,24.26,0,0,0,5.84-1.51l6.87-2.4a39.68,39.68,0,0,0,5.65-2.32c1.09-.59,2.12-1.28,3.23-1.82a26,26,0,0,1,3.86-1.36l3.9-1.14a3.8,3.8,0,0,1,1.76-.23c.54.1,1,.44,1.55.58a4.68,4.68,0,0,0,2.5-.24l4.52-1.28a8.52,8.52,0,0,0,2.69-1.12c2.07-1.47,2.44-4.39,2.43-6.94A52.57,52.57,0,0,0,782.45,763a3.57,3.57,0,0,0-1.47,1.11,21.44,21.44,0,0,0-1.49-1.87,22.31,22.31,0,0,1-4.51-8.33,14.66,14.66,0,0,0,4-4.52c-2.39-9.11-4.84-18.36-9.7-26.4-1.59-2.62-3.41-5.08-5-7.66-4.73-7.5-5.7-17-11.11-24a4.16,4.16,0,0,1,0-4.88c.62-.82,1.62-1.59,1.43-2.61-.14-.73-.9-1.4-.61-2.08.14-.33.48-.51.74-.75.92-.86.8-2.31.89-3.57.2-3.18,2.09-6,3.91-8.56a5.26,5.26,0,0,1,1.44-1.56c.49-.3,1.07-.44,1.56-.74,1.72-1.09,1.6-3.62,2.42-5.5,1.08-2.48,3.8-3.73,5.58-5.74,2.27-2.56,2.85-6.12,5.24-8.35a6.13,6.13,0,0,1,.79-.64A40.24,40.24,0,0,0,775.15,658c-.23,13.53,3.13,27.53,1.56,41-1.24,10.66,5.27,21.29,14.5,26.62a69.31,69.31,0,0,0,11.29,4.79c5.78,2.07,11.54,4.2,17.21,6.58q6,2.52,11.84,5.41a147.35,147.35,0,0,1,14,7.81c5.56,3.57,11.13,7.19,15.08,12.52a11.94,11.94,0,0,0,6.66-2.45c1.52,1.2,3.36,2.11,4.79,3.44a14.46,14.46,0,0,1,3.8,7.46l-.6,0c.07,1.33.13,2.66.2,4a1.7,1.7,0,0,1-.15,1,1.81,1.81,0,0,1-.54.49l-3.08,2.09c-2.24,1.51-4.71,3.42-4.83,6.13a3.12,3.12,0,0,0,.67,2.19,4.72,4.72,0,0,0,2.74,1.24c5.36,1.13,10.85,2.23,16.28,1.5,2.58-.35,5.25-1.2,6.93-3.2,1.54-1.82,2-4.29,2.42-6.64.67-4,1.23-8.09,1.67-12.15a26.86,26.86,0,0,1,1.66-8.07,1,1,0,0,1,.43-.54c.23-.1.5,0,.74-.1s.4-.47.48-.77a47.71,47.71,0,0,0,1.43-12.08,8.14,8.14,0,0,0-.47-3.11,6.28,6.28,0,0,0-4.28-3.3,34.09,34.09,0,0,0-5.53-.66,27.46,27.46,0,0,1-4.59-.84,4.2,4.2,0,0,0-1.91-.25,1.34,1.34,0,0,0-1.16,1.33,1.71,1.71,0,0,0,.24.65l-1.56-.31c-1.26-.23-3-.78-4.89-1.24q0-.48.06-1a1.89,1.89,0,0,0-1.06-1.72l-26.42-14.12-4.94-2.64c-10.82-5.79-22-11.14-32.85-16.93-.72.22-1.32-.61-1.53-1.35s-.36-1.62-1.05-1.95c-.34-.16-.79-.15-1-.44a1.19,1.19,0,0,1-.19-.89c.35-5.27,4.12-10.13,3.37-15.35-.32-2.23-1.47-4.43-1-6.62.35-1.51,1.43-2.74,2-4.18,1.3-3.22,0-7.09,1.42-10.24a23.71,23.71,0,0,0,1.91-6.52,44.79,44.79,0,0,1,4-12.94,23.35,23.35,0,0,1,3.72-5.67c.79-.86,1.68-1.63,2.44-2.52,2.3-2.75,3.15-6.41,3.8-10,1.18-6.41,2-13.06.52-19.42-.5-2.16-1.26-4.31-1.23-6.53,0-2.66,1.07-5.71-.22-7.84a6.9,6.9,0,0,0,2.49-4.27,5.52,5.52,0,0,1,.35-1.77,5.14,5.14,0,0,1,1.67-1.5,6.91,6.91,0,0,0,2.58-6.87c1.37.62,2.81-.77,3.46-2.14s1.14-3,2.53-3.62c.94-.4,2-.16,3-.42,1.59-.41,2.56-2,3.68-3.17,2.28-2.46,5.51-3.73,8.5-5.24,8.86-4.51,16.08-11.64,23.15-18.66a78.38,78.38,0,0,0,10-11.26c.79-1.17,1.51-2.38,2.19-3.62l.18-.09.06.22c.11.44.24.88.37,1.31.32,1,.68,2.07,1,3.09,1.08,3,2.25,6.2,4.45,8.47a10.48,10.48,0,0,0,2.28,1.77,15.3,15.3,0,0,0,5.87,1.76c.78.1,1.57.16,2.36.2s1.58.07,2.36.09l16.18.43c-5.56-8.06-6-18.54-5.63-28.35.93-25.2,5.84-50.63,1.28-75.43-.55-3-1.28-6-3.11-8.41-2.4-3.15-6.34-4.67-10.18-5.56s-7.83-1.32-11.42-2.93c-3-1.37-5.76-3.57-9-4.29a19.82,19.82,0,0,0-7.2.12q-4.38.65-8.71,1.54l-.7.15H874l-.48.11-.13,0-.43.1-.16,0-.4.11-.18.05-.37.12-.21.07-.34.11-.22.09-.32.12-.24.1-.29.13-.24.12-.27.13-.24.14-.25.14-.24.16-.23.15-.24.17-.2.16-.23.2-.19.17a2.39,2.39,0,0,0-.22.23l-.17.17a3,3,0,0,0-.22.28c0,.05-.09.1-.13.16s-.18.26-.27.41l0,.06a6.09,6.09,0,0,0-.55,1.19c-.07.21-.14.42-.19.63a9.54,9.54,0,0,0-.22,1.3c0,.22,0,.45-.05.67,0,.44,0,.89,0,1.33a19.62,19.62,0,0,0,.25,2.24,24.37,24.37,0,0,0-1.16,41.23,10.94,10.94,0,0,1,.08,1.19v.26a33,33,0,0,1-.44,4.22,58.66,58.66,0,0,0-12-1.07c-2.4,0-4.82.22-7.24.41a109.13,109.13,0,0,1-7.24-9.8l-5.34-7.83a74.58,74.58,0,0,1-5-8c-1.31-2.54-2.33-5.24-3.79-7.7-3-5.07-7.9-9.38-8.51-15.25l-1.41.29c-.77-1.26-1.74-2.59-2.1-3.32a65.55,65.55,0,0,1-4.44-13c-.49-2.32-.86-4.74-2.13-6.74a15.19,15.19,0,0,0-3.11-3.3,20.57,20.57,0,0,0-6.66-4.2,8.61,8.61,0,0,0-6.81.4,10,10,0,0,0-1-.4,8.25,8.25,0,0,0-7.56.88c-2.1,1.61-3,4.37-3.32,7a17.28,17.28,0,0,0,1.78,10.62c2,3.58,5.58,6,8.54,8.84a34.59,34.59,0,0,1,5.37,6.68,73.16,73.16,0,0,1-.41,16.21c-.38,2.3-1,4.56-1.18,6.88-.73,8.38,3.63,16.76,2.07,25a6.1,6.1,0,0,0,2.83,6.47c2.24,1.21,4.86,1.37,7.32,2,4.83,1.24,9,4.33,13.88,5.48,2.25.54,4.59.64,6.83,1.24l.35.11a16.27,16.27,0,0,0-3.59,6.82c-1,4.2-.06,8.69-1.06,12.89-.82,3.46-2.88,6.48-4.91,9.41q-5.86,8.48-11.74,17a104.13,104.13,0,0,1-8.65,11.37c-5.39,5.89-14.69,10.56-17.43,17.64-.06-.17-.14-.34-.2-.51-3.88,2.85-5.33,8.16-8.42,11.85-1.51,1.79-3.37,3.24-5,4.9a56.54,56.54,0,0,0-5.53,6.87c-4.6,6.38-9.23,12.79-12.52,19.94-1.72,3.72-3.05,7.59-4.42,11.44-5.38,15.17-14.16,29.56-17.81,45.25-.89,3.83-3.22,7.29-3.57,11.21-.39,4.18,1.52,8.2,3.5,11.89,3,5.64,6.34,11.12,9,16.92,1.57,3.38,2.93,6.87,4.68,10.17,1.91,3.6,4.25,6.94,6.25,10.49C747.78,742,750.58,752.07,753.17,762Zm66.16-286.55-.48-.24A16.57,16.57,0,0,1,814,472c-4.31-4.6-6.16-11.53-7.51-17.72-.16-.74-.3-1.47-.43-2.21C811.29,459.5,816.23,467.18,819.33,475.47Z" transform="translate(-28 -101)" fill="url(#b5f20e7f-16f1-44c3-85ac-2c33fb8e67f8)"/><path d="M799.68,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2.05,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,799.68,415.4Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M799.68,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2.05,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,799.68,415.4Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M868.85,481.23a58.88,58.88,0,0,0-16.18-2c-9.11.13-18.49,2.34-27.17-.46A47.4,47.4,0,0,1,819,476a16.58,16.58,0,0,1-4.86-3.19c-4.32-4.57-6.18-11.46-7.52-17.6a117.44,117.44,0,0,1-2.05-18.73c-2.25,1.05-4.63,2.08-7.1,1.87s-5-2.11-5-4.59c.37,5.82.64,11.71-.33,17.45-.38,2.28-1,4.53-1.17,6.83-.74,8.33,3.63,16.65,2.07,24.86a6,6,0,0,0,2.83,6.42c2.24,1.21,4.87,1.36,7.33,2,4.83,1.23,9,4.3,13.9,5.45,2.25.53,4.6.63,6.84,1.23,3.19.85,6.1,2.68,9.36,3.25,2.44.44,5,.14,7.43.35,2.15.18,4.25.74,6.41.8,5.28.13,10.26-2.85,13.76-6.81S866.63,486,868.85,481.23Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M868.85,481.23a58.88,58.88,0,0,0-16.18-2c-9.11.13-18.49,2.34-27.17-.46A47.4,47.4,0,0,1,819,476a16.58,16.58,0,0,1-4.86-3.19c-4.32-4.57-6.18-11.46-7.52-17.6a117.44,117.44,0,0,1-2.05-18.73c-2.25,1.05-4.63,2.08-7.1,1.87s-5-2.11-5-4.59c.37,5.82.64,11.71-.33,17.45-.38,2.28-1,4.53-1.17,6.83-.74,8.33,3.63,16.65,2.07,24.86a6,6,0,0,0,2.83,6.42c2.24,1.21,4.87,1.36,7.33,2,4.83,1.23,9,4.3,13.9,5.45,2.25.53,4.6.63,6.84,1.23,3.19.85,6.1,2.68,9.36,3.25,2.44.44,5,.14,7.43.35,2.15.18,4.25.74,6.41.8,5.28.13,10.26-2.85,13.76-6.81S866.63,486,868.85,481.23Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M883.31,738.67a13.69,13.69,0,0,1,4.67,1.46,11,11,0,0,1,4.06,5.48c2.18,5.38,2.63,11.3,2.73,17.11.08,4.69-.08,9.49-1.76,13.87a8.83,8.83,0,0,1-2.31,3.63,8.33,8.33,0,0,1-3.18,1.54c-2.51.69-5.41.68-7.46-.92-2.28-1.78-2.85-4.93-3.33-7.78-.65-3.84-1.57-7.93-4.43-10.58-2.12-2-5.16-3-6.7-5.42-1.84-2.91-.87-6.71.3-9.95,1-2.81,2.51-8.5,5.45-9.94S880.26,738.12,883.31,738.67Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M775,752.47a22.15,22.15,0,0,0,4.58,8.51c1.3,1.5,2.93,3.32,2.25,5.18a4.82,4.82,0,0,1-1.23,1.65c-9.66,9.44-23.17,14-36.57,15.72a1.29,1.29,0,0,1-.65,0c-.39-.17-.49-.67-.53-1.1a13.51,13.51,0,0,1,0-4.21c.65-3.27,3.52-5.58,6.33-7.39s5.88-3.55,7.44-6.5c1.95-3.66,1.13-8.43,3.45-11.86,1.88-2.79,5.38-4,8.71-4.5,1.15-.18,3.6-1.44,4.58-.86S774.66,751.32,775,752.47Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M884.63,738.33a1.33,1.33,0,0,1,1.16-1.32,4.35,4.35,0,0,1,1.91.24,26.5,26.5,0,0,0,4.59.85,34.07,34.07,0,0,1,5.54.65,6.27,6.27,0,0,1,4.29,3.27,8.12,8.12,0,0,1,.47,3.1,47.06,47.06,0,0,1-1.43,12c-.08.3-.2.65-.49.76s-.5,0-.73.11a.9.9,0,0,0-.43.54,26.42,26.42,0,0,0-1.67,8c-.44,4-1,8.06-1.67,12.06-.39,2.34-.88,4.8-2.42,6.6-1.69,2-4.36,2.83-6.94,3.18-5.44.72-10.93-.37-16.3-1.49a4.77,4.77,0,0,1-2.75-1.23,3.09,3.09,0,0,1-.67-2.18c.12-2.69,2.6-4.59,4.83-6.09l3.09-2.07a1.6,1.6,0,0,0,.54-.49,1.67,1.67,0,0,0,.15-1l-.2-4a11.33,11.33,0,0,1,9.87,6.14c.42.85.83,1.84,1.71,2.17a2.26,2.26,0,0,0,2.69-1.63,6.93,6.93,0,0,0-.09-3.47c-1.81-9.67-1.38-19.61-2.48-29.38a6.63,6.63,0,0,0-1-3.1C885.73,739.88,884.74,739.23,884.63,738.33Z" transform="translate(-28 -101)" fill="#f86d70"/><rect x="752.15" y="409.08" width="43.28" height="21.31" rx="10.65" transform="translate(1519.58 738.47) rotate(180)" fill="#0960bd"/><circle cx="746.12" cy="318.73" r="6.66" fill="#fff"/><path d="M750.11,775.82c-.45.75-1.16,1.33-1.58,2.1a1.8,1.8,0,0,0,.34,2.35,2.32,2.32,0,0,0,1.43.14,48.11,48.11,0,0,0,26-11.78,18.21,18.21,0,0,0,3.19-3.49c.85-1.29,1.57-2.87,3-3.41a51.92,51.92,0,0,1,1.34,11.45c0,2.54-.36,5.43-2.43,6.9a8.63,8.63,0,0,1-2.7,1.1l-4.52,1.28a4.81,4.81,0,0,1-2.51.24c-.53-.14-1-.48-1.55-.58a3.8,3.8,0,0,0-1.76.23l-3.91,1.14a24.86,24.86,0,0,0-3.86,1.35c-1.12.53-2.15,1.21-3.24,1.8a38.78,38.78,0,0,1-5.66,2.3l-6.87,2.39a24.91,24.91,0,0,1-5.85,1.5c-1.38.12-2.79,0-4.16.23-1,.18-2,.56-3.1.64a8.11,8.11,0,0,1-4.87-1.44,4.53,4.53,0,0,1-1.42-1.26c-1-1.53-.13-3.55.83-5.1a20.16,20.16,0,0,1,7-7.18c1.2-.66,2.49-1.14,3.72-1.74,3.51-1.7,6.16-4.54,9.47-6.48C749.57,768.67,751.58,773.4,750.11,775.82Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M846.69,498.94a28.57,28.57,0,0,0,12.16,4.73,49.5,49.5,0,0,0,6.88.37,174.85,174.85,0,0,0,28.63-2.39c-3.76-4.15-7.57-8.59-9-14a23.11,23.11,0,0,1-.44-8.77,66,66,0,0,1,2.68-11,77.63,77.63,0,0,1-12.1-.31c-2.29-.24-7.91-2.32-9.9-.74s-.46,6.67-.43,9.06a2.26,2.26,0,0,1,0,.26,28.93,28.93,0,0,1-2.31,10.58C860,493.19,853.8,498.51,846.69,498.94Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M865.18,475.84a24.06,24.06,0,0,0,19.75,3,66,66,0,0,1,2.68-11,77.63,77.63,0,0,1-12.1-.31c-2.29-.24-7.91-2.32-9.9-.74S865.15,473.45,865.18,475.84Z" transform="translate(-28 -101)" opacity="0.1"/><circle cx="850.38" cy="353.54" r="24.11" fill="#fbbebe"/><path d="M776.09,576.53a11.23,11.23,0,0,0,5.44,9.67,21.69,21.69,0,0,0,5.9,2.08c11,2.66,22.32,4.8,33.65,4.15a18.49,18.49,0,0,0,7.14-1.5,7.66,7.66,0,0,0,4.41-5.51,5.18,5.18,0,0,1,.34-1.75,5.11,5.11,0,0,1,1.67-1.49,6.84,6.84,0,0,0,2.59-6.82c1.37.62,2.81-.77,3.46-2.13s1.15-3,2.53-3.59c.94-.4,2-.16,3-.42,1.59-.41,2.56-2,3.68-3.15,2.28-2.44,5.53-3.7,8.51-5.21,8.88-4.47,16.11-11.56,23.2-18.53a77.76,77.76,0,0,0,10-11.18,41.2,41.2,0,0,0,2.2-3.6,101.82,101.82,0,0,0,5.55-12.71c.9-2.34,1.81-4.8,1.44-7.28,0-.22-.08-.44-.13-.67a14,14,0,0,0-2.19-4.42c-2.45-3.6-5.66-7-9.88-8.12s-8.42.23-12.71,1.14a31.85,31.85,0,0,1-4.31.66c-4.54.32-9-.9-13.42-2.11l-4.78-1.32c-2.39-.66-3.59-3.55-6-4.06a8.12,8.12,0,0,0-3.25.17c-4.91.93-9.87,2.14-14.2,4.64a21.32,21.32,0,0,0-2.76,1.88,17.47,17.47,0,0,0-6.42,9.47c-1,4.17-.06,8.63-1.06,12.8-.82,3.44-2.89,6.44-4.91,9.34L803,543.83a104.13,104.13,0,0,1-8.66,11.28C788,562,776.26,567.18,776.09,576.53Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M807.53,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,807.53,415.4Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M722.81,694.64c3,5.6,6.34,11,9.05,16.8,1.57,3.37,2.93,6.83,4.68,10.11,1.91,3.57,4.26,6.89,6.26,10.41,5,8.9,7.83,18.94,10.42,28.83a57.39,57.39,0,0,0,20.52-7.22,12.9,12.9,0,0,0,1.23-.79,14.52,14.52,0,0,0,4.14-4.57c-2.39-9-4.84-18.23-9.71-26.22-1.59-2.6-3.41-5-5-7.61-4.73-7.45-5.71-16.84-11.12-23.81a4.08,4.08,0,0,1,0-4.84c.62-.81,1.62-1.58,1.43-2.59-.14-.73-.9-1.39-.61-2.07.14-.33.48-.51.74-.75.92-.84.8-2.29.89-3.53.2-3.16,2.09-5.93,3.92-8.51a5.34,5.34,0,0,1,1.44-1.55c.49-.3,1.07-.44,1.56-.74,1.72-1.07,1.6-3.59,2.43-5.46,1.08-2.46,3.8-3.71,5.59-5.7,2.27-2.54,2.84-6.07,5.24-8.29a7.11,7.11,0,0,1,.79-.64,39.7,39.7,0,0,0-1.41,11.61c-.23,13.44,3.13,27.34,1.56,40.69-1.24,10.58,5.28,21.14,14.52,26.44a70.28,70.28,0,0,0,11.31,4.76c5.78,2.05,11.56,4.16,17.23,6.53,4,1.66,8,3.46,11.86,5.37a146,146,0,0,1,14,7.76c5.57,3.54,11.15,7.14,15.1,12.43,3.83-.1,7.34-2.4,9.76-5.37s3.93-6.56,5.34-10.11c1.23-3.07,2.45-6.22,2.54-9.53a1.9,1.9,0,0,0-1.06-1.71l-26.46-14-5-2.62c-10.83-5.75-22-11.07-32.89-16.81-.73.21-1.33-.62-1.54-1.34s-.36-1.62-1.05-1.94c-.35-.16-.79-.16-1-.44a1.2,1.2,0,0,1-.18-.88c.35-5.24,4.13-10.06,3.37-15.25-.32-2.22-1.47-4.4-1-6.57.35-1.51,1.43-2.73,2-4.16,1.29-3.2,0-7,1.42-10.17a23.34,23.34,0,0,0,1.91-6.48,43.88,43.88,0,0,1,4.05-12.84,23.18,23.18,0,0,1,3.72-5.64c.8-.85,1.69-1.62,2.44-2.5,2.31-2.73,3.15-6.37,3.81-9.88,1.18-6.37,2-13,.52-19.29-.5-2.15-1.26-4.28-1.23-6.49,0-2.91,1.31-6.32-.71-8.43a6.6,6.6,0,0,0-3-1.52,90.43,90.43,0,0,0-14.35-2.65L790.22,582a20.28,20.28,0,0,1-7.35-1.91c-3-1.65-5-4.72-6.2-7.92-3.88,2.83-5.34,8.1-8.43,11.76-1.51,1.79-3.37,3.23-5,4.87a55.11,55.11,0,0,0-5.54,6.83c-4.61,6.33-9.25,12.71-12.55,19.8-1.71,3.69-3,7.54-4.42,11.36-5.39,15.07-14.18,29.37-17.83,44.94-.9,3.81-3.23,7.24-3.58,11.14C718.91,687,720.82,691,722.81,694.64Z" transform="translate(-28 -101)" fill="#434175"/><path d="M838.53,569.54a6.85,6.85,0,0,1,.81,3.26c-.49-2.44-3.85-3.79-4.06-6.2-.1-1.11.1-1.06.79-.47C837.12,567,837.57,568.58,838.53,569.54Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M828.32,576.94a5.15,5.15,0,0,1,1.53,2.26,5.75,5.75,0,0,1,.3,3.93c-.49-.23-.66-.83-.81-1.36a9.38,9.38,0,0,0-1-2.33c-.4-.63-2.23-2.13-2.21-2.82C826.1,575.58,827.83,576.57,828.32,576.94Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M827.14,495.35a25.23,25.23,0,0,0,5.08,3.38c4.78,2.42,10.07,3.69,14.88,6a72.17,72.17,0,0,1,6.9,4c4.77,3,9.53,6,14.29,9.05a15.75,15.75,0,0,1,3.15,2.39c1.72,1.84,1.71,5,3.28,7a9.4,9.4,0,0,0,6.93,3.2,22.5,22.5,0,0,0,7.73-1.3,38.24,38.24,0,0,0,4.42-1.61,20.47,20.47,0,0,0,4.24-2.42,12.19,12.19,0,0,0,5-7.89,15.58,15.58,0,0,0-.85-6.44,25.11,25.11,0,0,0-1.52-3.91,15.17,15.17,0,0,0-1.22-2.05c-3.28-4.65-9.06-6.84-14.65-7.93-2.95-.57-5.95-.92-8.91-1.42a31.85,31.85,0,0,1-4.31.66c-4.54.32-9-.9-13.42-2.11l-4.78-1.32c-2.39-.66-3.59-3.55-6-4.06a8.12,8.12,0,0,0-3.25.17c-4.91.93-9.87,2.14-14.2,4.64A21.32,21.32,0,0,0,827.14,495.35Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M815.49,431.36c.61,5.83,5.53,10.11,8.53,15.14,1.46,2.45,2.48,5.13,3.79,7.66a75,75,0,0,0,5,8l5.35,7.77c3.15,4.57,6.33,9.18,10.35,13,7,1.19,12.9,6.4,19.55,8.93,5.33,2,11.13,2.3,16.72,3.39s11.37,3.27,14.65,7.93a20.83,20.83,0,0,1,2.74,6,15.54,15.54,0,0,1,.85,6.43,12.19,12.19,0,0,1-5,7.9,27.71,27.71,0,0,1-8.65,4,22.74,22.74,0,0,1-7.73,1.3,9.44,9.44,0,0,1-6.94-3.2c-1.56-2-1.55-5.19-3.27-7a15.75,15.75,0,0,0-3.15-2.39l-14.29-9a72.17,72.17,0,0,0-6.9-4c-4.81-2.35-10.1-3.62-14.88-6s-9.23-6.41-10.17-11.68c-2.91-16.19-14.12-29.84-23.7-43.21.31-.06.22-.78.33-1.08a14,14,0,0,1,7-7.08C808.75,432.5,812.17,432.07,815.49,431.36Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M866,431.48a8.87,8.87,0,0,1,1-5.08c1.59-2.64,4.91-3.57,7.93-4.19s5.8-1.1,8.72-1.52a20.1,20.1,0,0,1,7.21-.13c3.26.72,6,2.91,9,4.26,3.6,1.61,7.6,2,11.44,2.92s7.79,2.39,10.2,5.52c1.83,2.37,2.56,5.4,3.11,8.35,4.57,24.63-.35,49.89-1.28,74.92-.37,9.74.07,20.15,5.64,28.16l-16.21-.43c-4.15-.11-8.61-.33-11.87-2.89-2.88-2.25-4.24-5.88-5.46-9.31a29,29,0,0,1-2.08-8.35c-.25-5.88,3.09-11.65,2-17.44-.81-4.32-4-7.82-7.32-10.65s-7.1-5.3-9.83-8.75c-4.85-6.15-5.78-14.54-5.18-22.35.36-4.64,1.2-9.29.79-13.93a17.53,17.53,0,0,0-3.67-9.76C867.59,437.75,866.24,435.83,866,431.48Z" transform="translate(-28 -101)" fill="#434175"/><path d="M867,426.4c1.56-2.6,4.8-3.54,7.77-4.15a7.67,7.67,0,0,0-3.85,3,9,9,0,0,0-1,5.09c.22,4.35,1.57,6.27,4.15,9.35a17.44,17.44,0,0,1,3.68,9.76c.4,4.64-.43,9.28-.79,13.93-.61,7.8.32,16.2,5.18,22.35,2.72,3.45,6.47,5.91,9.83,8.75s6.51,6.33,7.32,10.65c1.08,5.78-2.26,11.56-2,17.44a28.51,28.51,0,0,0,2.07,8.34c1.23,3.44,2.59,7.07,5.46,9.32,3.26,2.56,7.73,2.78,11.88,2.89l11.48.3c.25.42.52.84.8,1.25l-16.21-.43c-4.15-.11-8.61-.33-11.87-2.89-2.88-2.25-4.24-5.88-5.46-9.31a29,29,0,0,1-2.08-8.35c-.25-5.88,3.09-11.65,2-17.44-.81-4.32-4-7.82-7.32-10.65s-7.1-5.3-9.83-8.75c-4.85-6.15-5.78-14.54-5.18-22.35.36-4.64,1.2-9.29.79-13.93a17.53,17.53,0,0,0-3.67-9.76c-2.58-3.08-3.93-5-4.16-9.35A8.87,8.87,0,0,1,867,426.4Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M745.22,680.23,775,752.78a14.52,14.52,0,0,0,4.14-4.57c-2.39-9-4.84-18.23-9.71-26.22-1.59-2.6-3.41-5-5-7.61-4.73-7.45-5.71-16.84-11.12-23.81a4.08,4.08,0,0,1,0-4.84c.62-.81,1.62-1.58,1.43-2.59-.14-.73-.9-1.39-.61-2.07.14-.33.48-.51.74-.75.92-.84.8-2.29.89-3.53.2-3.16,2.09-5.93,3.92-8.51a5.34,5.34,0,0,1,1.44-1.55c.49-.3,1.07-.44,1.56-.74,1.72-1.07,1.6-3.59,2.43-5.46,1.08-2.46,3.8-3.71,5.59-5.7,2.27-2.54,2.84-6.07,5.24-8.29l.21-.52-2.25-14Z" transform="translate(-28 -101)" opacity="0.1"/><ellipse cx="977.05" cy="659.35" rx="33.95" ry="6.53" fill="#0960bd"/><ellipse cx="977.62" cy="656.57" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="650.25" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="643.92" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="637.6" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="631.27" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="624.95" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="618.63" rx="3.95" ry="5.17" fill="#3f3d56"/><path d="M990.82,676.35a18.78,18.78,0,0,1-1.47-2.17l10.38-1.71-11.23.09a19,19,0,0,1-.36-15l15.07,7.81-13.9-10.21a18.94,18.94,0,1,1,31.27,21.19,18.34,18.34,0,0,1,2.16,3.45l-13.48,7,14.38-4.82a19.07,19.07,0,0,1,1,6.07,18.85,18.85,0,0,1-4.06,11.71,18.93,18.93,0,1,1-29.76,0,18.94,18.94,0,0,1,0-23.41Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M1024.64,688.05a18.85,18.85,0,0,1-4.06,11.71,18.93,18.93,0,1,1-29.76,0C988.28,696.54,1024.64,685.93,1024.64,688.05Z" transform="translate(-28 -101)" opacity="0.1"/><ellipse cx="1043.17" cy="586.83" rx="22.83" ry="4.39" fill="#0960bd"/><ellipse cx="1043.56" cy="584.97" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="580.72" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="576.46" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="572.21" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="567.96" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="563.71" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="559.45" rx="2.66" ry="3.48" fill="#3f3d56"/><path d="M1061.61,631.36a11,11,0,0,1-1-1.46l7-1.15-7.55.06a12.62,12.62,0,0,1-1.17-5.32,12.78,12.78,0,0,1,.92-4.77l10.14,5.26-9.35-6.87a12.73,12.73,0,1,1,21,14.25,12.56,12.56,0,0,1,1.45,2.32l-9.06,4.71,9.66-3.25a12.77,12.77,0,0,1-2.05,12,12.74,12.74,0,1,1-20,0,12.71,12.71,0,0,1,0-15.74Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M1084.34,639.23a12.72,12.72,0,0,1-2.72,7.87,12.74,12.74,0,1,1-20,0C1059.9,644.93,1084.34,637.8,1084.34,639.23Z" transform="translate(-28 -101)" opacity="0.1"/></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/svg/no-data.svg b/apps/grid-admin/src/assets/svg/no-data.svg
new file mode 100644
index 00000000..2b9f2570
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/no-data.svg
@@ -0,0 +1 @@
+<svg id="e4fde902-34f0-42ac-83bb-70aac2088463" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="855.41839" height="610.77534" viewBox="0 0 855.41839 610.77534"><circle cx="39.53587" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="80.42757" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="121.31927" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="162.21097" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="203.10267" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="243.99437" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="284.88607" cy="110.72662" r="13.63057" fill="#e6e6e6"/><path d="M488.67447,271.93783H180.32909a5.55346,5.55346,0,0,1-5.54693-5.54693V244.28714a5.55345,5.55345,0,0,1,5.54693-5.54693H488.67447a5.55346,5.55346,0,0,1,5.54693,5.54693V266.3909A5.55347,5.55347,0,0,1,488.67447,271.93783ZM180.32909,240.959a3.3318,3.3318,0,0,0-3.32816,3.32816V266.3909a3.3318,3.3318,0,0,0,3.32816,3.32815H488.67447a3.33179,3.33179,0,0,0,3.32815-3.32815V244.28714a3.33179,3.33179,0,0,0-3.32815-3.32816Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M246.31694,147.79938a3.19065,3.19065,0,0,1,3.187,3.187V220.049a3.19065,3.19065,0,0,1-3.187,3.187h-67.652a3.19065,3.19065,0,0,1-3.187-3.187V150.98643a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.18705h-67.652a6.3741,6.3741,0,0,0-6.3741,6.3741V220.049a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.37411,6.37411,0,0,0,6.3741-6.3741V150.98643a6.37411,6.37411,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M235.76469,165.95293H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,177.23755H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,188.52139H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,199.806H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,211.09063H190.62778a1.59353,1.59353,0,1,1,0-3.18706h45.13691a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M477.37812,147.79938a3.19065,3.19065,0,0,1,3.187,3.187V220.049a3.19065,3.19065,0,0,1-3.187,3.187h-67.652a3.19065,3.19065,0,0,1-3.187-3.187V150.98643a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.18705h-67.652a6.3741,6.3741,0,0,0-6.3741,6.3741V220.049a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.3741,6.3741,0,0,0,6.3741-6.3741V150.98643a6.3741,6.3741,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M466.82588,165.95293H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,177.23755H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,188.52139H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,199.806H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,211.09063H421.689a1.59353,1.59353,0,1,1,0-3.18706h45.13692a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M707.317,280.59077a3.19065,3.19065,0,0,1,3.187,3.187v69.06255a3.19066,3.19066,0,0,1-3.187,3.187H639.665a3.19066,3.19066,0,0,1-3.187-3.187V283.77782a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.187H639.665a6.3741,6.3741,0,0,0-6.3741,6.3741v69.06255a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.37411,6.37411,0,0,0,6.3741-6.3741V283.77782a6.3741,6.3741,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,298.74432H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,310.02894H651.62784a1.59353,1.59353,0,0,1,0-3.18706h45.13692a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,321.31278H651.62784a1.59352,1.59352,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,332.59739H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,343.882H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M362.73282,226.42308H293.30943a7.08972,7.08972,0,0,1-7.08139-7.08138V169.66541a7.08988,7.08988,0,0,1,7.08139-7.08216h69.42339a7.09,7.09,0,0,1,7.08217,7.08216V219.3417A7.08988,7.08988,0,0,1,362.73282,226.42308ZM293.30943,165.7703a3.89917,3.89917,0,0,0-3.89434,3.89511V219.3417a3.89851,3.89851,0,0,0,3.89434,3.89433h69.42339a3.89917,3.89917,0,0,0,3.89511-3.89433V169.66541a3.89983,3.89983,0,0,0-3.89511-3.89511Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M350.59,184.81246H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M350.59,196.09708H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M350.59,207.38092H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M593.09111,253.95025,526.41486,234.6141a7.08971,7.08971,0,0,1-4.82882-8.77351l13.83608-47.71054a7.08988,7.08988,0,0,1,8.77372-4.82958l66.67625,19.33615a7.09,7.09,0,0,1,4.82935,8.77447l-13.83608,47.71055A7.08988,7.08988,0,0,1,593.09111,253.95025Zm-49.78294-77.58884a3.89916,3.89916,0,0,0-4.82511,2.65631L524.647,226.72827a3.89851,3.89851,0,0,0,2.65557,4.8249l66.67624,19.33614a3.89918,3.89918,0,0,0,4.82565-2.65535l13.83608-47.71054a3.89985,3.89985,0,0,0-2.65609-4.82587Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M593.01835,210.60411l-43.3508-12.57175a1.59353,1.59353,0,0,1,.88767-3.06094L593.906,207.54318a1.59352,1.59352,0,1,1-.88768,3.06093Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M589.87531,221.44219,546.5245,208.87043a1.59352,1.59352,0,1,1,.88767-3.06093L590.763,218.38125a1.59353,1.59353,0,0,1-.88767,3.06094Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M586.73248,232.27951l-43.35081-12.57175a1.59353,1.59353,0,0,1,.88767-3.06094l43.35081,12.57176a1.59352,1.59352,0,0,1-.88767,3.06093Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><rect x="156.10589" y="607.77534" width="699.3125" height="3" fill="#e6e6e6"/><polygon points="562.14 603.085 448.421 603.085 452.276 552.973 558.285 552.973 562.14 603.085" fill="#e6e6e6"/><rect x="442.63878" y="597.3034" width="127.21043" height="11.5646" fill="#e6e6e6"/><path d="M895.37073,374.74021H460.73514a11.56458,11.56458,0,0,0-11.56458,11.56458h0V651.3265H906.93533V386.30479a11.56457,11.56457,0,0,0-11.56456-11.56458Z" transform="translate(-172.29081 -144.61233)" fill="#3f3d56"/><path d="M449.17056,651.3265v43.36719a11.56457,11.56457,0,0,0,11.56458,11.56457H895.37073a11.56459,11.56459,0,0,0,11.5646-11.56457h0V651.3265Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><rect x="300.00891" y="254.22076" width="412.47016" height="231.29169" fill="#e6e6e6"/><circle cx="506.244" cy="533.69821" r="11.56459" fill="#3f3d56"/><circle cx="312.86987" cy="261.79534" r="2.19466" fill="#fff"/><circle cx="321.20026" cy="261.79534" r="2.19466" fill="#fff"/><circle cx="329.53064" cy="261.79534" r="2.19466" fill="#fff"/><rect x="310.6752" y="269.25275" width="389.91608" height="194.24707" fill="#fff"/><path d="M508.885,443.41111a1.37973,1.37973,0,0,0-1.37842,1.37842v69.67578a1.37973,1.37973,0,0,0,1.37842,1.37841H589.3493a1.37973,1.37973,0,0,0,1.37842-1.37841V444.78953a1.37973,1.37973,0,0,0-1.37842-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M638.08075,443.63523a1.37984,1.37984,0,0,0-1.37891,1.37842v69.45166a1.37984,1.37984,0,0,0,1.37891,1.37841h80.208a1.37963,1.37963,0,0,0,1.37793-1.37841V445.01365a1.37963,1.37963,0,0,0-1.37793-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M765.92157,442.9072a1.37963,1.37963,0,0,0-1.37793,1.37842v70.17969a1.37962,1.37962,0,0,0,1.37793,1.37841h81.042a1.37962,1.37962,0,0,0,1.37793-1.37841V444.28562a1.37963,1.37963,0,0,0-1.37793-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,563.88865a2.8501,2.8501,0,0,0,0,5.70019h34.062a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M640.94012,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65235a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M640.94012,563.88865a2.8501,2.8501,0,0,0,0,5.70019h34.0625a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M768.26044,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M640.94012,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65235a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M768.26044,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M768.26044,563.88865a2.8501,2.8501,0,0,0,0,5.70019H802.322a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/config.ts b/apps/grid-admin/src/config.ts
new file mode 100644
index 00000000..c73c4148
--- /dev/null
+++ b/apps/grid-admin/src/config.ts
@@ -0,0 +1,26 @@
+import type { StaticConfig, DynamicConfig } from '@vben/types'
+
+// github repo url
+export const GITHUB_URL = 'https://github.com/vbenjs/vben3'
+
+// vue-vben-admin-next-doc
+export const DOC_URL = 'https://vbenjs.github.io/vben3-doc/'
+
+// site url
+export const SITE_URL = 'http://vben.mufei88.com/'
+
+const dynamicConfig: DynamicConfig = {
+  __: '',
+}
+
+// ! You need to clear the browser cache after the change
+const staticConfig: StaticConfig = {
+  authType: 'frontend',
+
+  // enable
+  enableProgress: true,
+}
+
+export const config = { ...staticConfig, ...dynamicConfig }
+
+export const siteSetting = {GITHUB_URL, DOC_URL, SITE_URL}
diff --git a/apps/grid-admin/src/hooks/event/use-breakpoint.ts b/apps/grid-admin/src/hooks/event/use-breakpoint.ts
new file mode 100644
index 00000000..079dc353
--- /dev/null
+++ b/apps/grid-admin/src/hooks/event/use-breakpoint.ts
@@ -0,0 +1,91 @@
+import { ref, computed, ComputedRef, unref } from 'vue'
+import { screenMap, ScreenSizeEnum, ScreenValueEnum } from '@vben/constants'
+import { useEventListener } from './use-event-listener'
+
+let globalScreenRef: ComputedRef<ScreenSizeEnum | undefined>
+let globalWidthRef: ComputedRef<number>
+let globalRealWidthRef: ComputedRef<number>
+
+export interface CreateCallbackParams {
+  screen: ComputedRef<ScreenSizeEnum | undefined>
+  width: ComputedRef<number>
+  realWidth: ComputedRef<number>
+  screenEnum: typeof ScreenValueEnum
+  screenMap: Map<ScreenSizeEnum, number>
+  sizeEnum: typeof ScreenSizeEnum
+}
+
+export function useBreakpoint() {
+  return {
+    screenRef: computed(() => unref(globalScreenRef)),
+    widthRef: globalWidthRef,
+    screenEnum: ScreenValueEnum,
+    realWidthRef: globalRealWidthRef,
+  }
+}
+
+// Just call it once
+export function createBreakpointListen(
+  fn?: (opt: CreateCallbackParams) => void,
+) {
+  const screenRef = ref<ScreenSizeEnum>(ScreenSizeEnum.XL)
+  const realWidthRef = ref(window.innerWidth)
+
+  function getWindowWidth() {
+    const width = document.body.clientWidth
+    const xs = screenMap.get(ScreenSizeEnum.XS)!
+    const sm = screenMap.get(ScreenSizeEnum.SM)!
+    const md = screenMap.get(ScreenSizeEnum.MD)!
+    const lg = screenMap.get(ScreenSizeEnum.LG)!
+    const xl = screenMap.get(ScreenSizeEnum.XL)!
+    if (width < xs) {
+      screenRef.value = ScreenSizeEnum.XS
+    } else if (width < sm) {
+      screenRef.value = ScreenSizeEnum.SM
+    } else if (width < md) {
+      screenRef.value = ScreenSizeEnum.MD
+    } else if (width < lg) {
+      screenRef.value = ScreenSizeEnum.LG
+    } else if (width < xl) {
+      screenRef.value = ScreenSizeEnum.XL
+    } else {
+      screenRef.value = ScreenSizeEnum.XXL
+    }
+    realWidthRef.value = width
+  }
+
+  useEventListener({
+    el: window,
+    name: 'resize',
+
+    listener: () => {
+      getWindowWidth()
+      resizeFn()
+    },
+    // wait: 100,
+  })
+
+  getWindowWidth()
+  globalScreenRef = computed(() => unref(screenRef))
+  globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!)
+  globalRealWidthRef = computed((): number => unref(realWidthRef))
+
+  function resizeFn() {
+    fn?.({
+      screen: globalScreenRef,
+      width: globalWidthRef,
+      realWidth: globalRealWidthRef,
+      screenEnum: ScreenValueEnum,
+      screenMap,
+      sizeEnum: ScreenSizeEnum,
+    })
+  }
+
+  resizeFn()
+  return {
+    screenRef: globalScreenRef,
+    screenEnum: ScreenValueEnum,
+    widthRef: globalWidthRef,
+    realWidthRef: globalRealWidthRef,
+  }
+}
diff --git a/apps/grid-admin/src/hooks/event/use-event-listener.ts b/apps/grid-admin/src/hooks/event/use-event-listener.ts
new file mode 100644
index 00000000..f1bb9f99
--- /dev/null
+++ b/apps/grid-admin/src/hooks/event/use-event-listener.ts
@@ -0,0 +1,61 @@
+import type { Ref } from 'vue'
+import { ref, watch, unref } from 'vue'
+import { useThrottleFn, useDebounceFn } from '@vben/utils'
+
+export type RemoveEventFn = () => void
+export interface UseEventParams {
+  el?: Element | Ref<Element | undefined> | Window | any
+  name: string
+  listener: EventListener
+  options?: boolean | AddEventListenerOptions
+  autoRemove?: boolean
+  isDebounce?: boolean
+  wait?: number
+}
+export function useEventListener({
+  el = window,
+  name,
+  listener,
+  options,
+  autoRemove = true,
+  isDebounce = true,
+  wait = 80,
+}: UseEventParams): { removeEvent: RemoveEventFn } {
+  /* eslint-disable-next-line */
+  let remove: RemoveEventFn = () => {}
+  const isAddRef = ref(false)
+
+  if (el) {
+    const element = ref(el as Element) as Ref<Element>
+
+    const handler = isDebounce
+      ? useDebounceFn(listener, wait)
+      : useThrottleFn(listener, wait)
+    const realHandler = wait ? handler : listener
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true
+      e.removeEventListener(name, realHandler, options)
+    }
+    const addEventListener = (e: Element) =>
+      e.addEventListener(name, realHandler, options)
+
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v)
+          cleanUp(() => {
+            autoRemove && removeEventListener(v)
+          })
+        }
+      },
+      { immediate: true },
+    )
+
+    remove = () => {
+      removeEventListener(element.value)
+      removeWatch()
+    }
+  }
+  return { removeEvent: remove }
+}
diff --git a/apps/grid-admin/src/hooks/event/use-scroll-to.ts b/apps/grid-admin/src/hooks/event/use-scroll-to.ts
new file mode 100644
index 00000000..9ce3e257
--- /dev/null
+++ b/apps/grid-admin/src/hooks/event/use-scroll-to.ts
@@ -0,0 +1,65 @@
+import { isFunction, isUndefined } from '@vben/utils'
+import { ref, unref } from 'vue'
+
+export interface ScrollToParams {
+  el: any
+  to: number
+  duration?: number
+  callback?: () => any
+}
+
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+  t /= d / 2
+  if (t < 1) {
+    return (c / 2) * t * t + b
+  }
+  t--
+  return (-c / 2) * (t * (t - 2) - 1) + b
+}
+const move = (el: HTMLElement, amount: number) => {
+  el.scrollTop = amount
+}
+
+const position = (el: HTMLElement) => {
+  return el.scrollTop
+}
+
+export function useScrollTo({
+  el,
+  to,
+  duration = 500,
+  callback,
+}: ScrollToParams) {
+  const isActiveRef = ref(false)
+  const start = position(el)
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = isUndefined(duration) ? 500 : duration
+
+  const animateScroll = function () {
+    if (!unref(isActiveRef)) {
+      return
+    }
+    currentTime += increment
+    const val = easeInOutQuad(currentTime, start, change, duration)
+    move(el, val)
+    if (currentTime < duration && unref(isActiveRef)) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      if (callback && isFunction(callback)) {
+        callback()
+      }
+    }
+  }
+  const run = () => {
+    isActiveRef.value = true
+    animateScroll()
+  }
+
+  const stop = () => {
+    isActiveRef.value = false
+  }
+
+  return { start: run, stop }
+}
diff --git a/apps/grid-admin/src/hooks/setting/useHeaderSetting.ts b/apps/grid-admin/src/hooks/setting/useHeaderSetting.ts
new file mode 100644
index 00000000..3ea7120d
--- /dev/null
+++ b/apps/grid-admin/src/hooks/setting/useHeaderSetting.ts
@@ -0,0 +1,115 @@
+import type { HeaderSetting } from '@vben/types'
+
+import { computed, unref } from 'vue'
+
+import { useConfigStoreWithOut } from '@/store/config'
+
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+import { useRootSetting } from '@/hooks/setting/useRootSetting'
+import { useFullContent } from '@/hooks/web/useFullContent'
+import { MenuModeEnum } from '@vben/constants'
+
+export function useHeaderSetting() {
+  const { getFullContent } = useFullContent()
+  const configStore = useConfigStoreWithOut()
+
+  const getShowFullHeaderRef = computed(() => {
+    return (
+      (!unref(getFullContent) &&
+        unref(getShowHeader))
+    )
+  })
+
+  const getUnFixedAndFull = computed(
+    () => !unref(getFixed) && !unref(getShowFullHeaderRef),
+  )
+
+  const getShowInsetHeaderRef = computed(() => {
+    const need = !unref(getFullContent) && unref(getShowHeader)
+    return (
+      (need && !unref(getShowMixHeaderRef)) ||
+      (need && unref(getIsTopMenu)) ||
+      (need && unref(getIsMixSidebar))
+    )
+  })
+
+  const {
+    getMenuMode,
+    getSplit,
+    getShowHeaderTrigger,
+    getIsSidebarType,
+    getIsMixSidebar,
+    getIsTopMenu,
+  } = useMenuSetting()
+  const { getShowBreadCrumb, getShowLogo } = useRootSetting()
+
+  const getShowMixHeaderRef = computed(
+    () => !unref(getIsSidebarType) && unref(getShowHeader),
+  )
+
+  const getShowDoc = computed(() => configStore.getHeaderSetting.showDoc)
+
+  const getHeaderTheme = computed(() => configStore.getHeaderSetting.theme)
+
+  const getShowHeader = computed(() => configStore.getHeaderSetting.show)
+
+  const getFixed = computed(() => configStore.getHeaderSetting.fixed)
+
+  const getHeaderBgColor = computed(() => configStore.getHeaderSetting.bgColor)
+
+  const getShowSearch = computed(() => configStore.getHeaderSetting.showSearch)
+
+  const getUseLockPage = computed(() => configStore.getHeaderSetting.useLockPage)
+
+  const getShowFullScreen = computed(
+    () => configStore.getHeaderSetting.showFullScreen,
+  )
+  const getShowLocalePicker = computed(
+    () => configStore.getHeaderSetting.showLocalePicker,
+  )
+
+  const getShowNotice = computed(() => configStore.getHeaderSetting.showNotice)
+
+  const getShowBread = computed(() => {
+    return (
+      unref(getMenuMode) !== MenuModeEnum.HORIZONTAL &&
+      unref(getShowBreadCrumb) &&
+      !unref(getSplit)
+    )
+  })
+
+  const getShowHeaderLogo = computed(() => {
+    return (
+      unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar)
+    )
+  })
+
+  const getShowContent = computed(() => {
+    return unref(getShowBread) || unref(getShowHeaderTrigger)
+  })
+
+  // Set header configuration
+  function setHeaderSetting(headerSetting: Partial<HeaderSetting>) {
+    configStore.setProjectConfig({ headerSetting })
+  }
+  return {
+    setHeaderSetting,
+    getShowDoc,
+    getShowSearch,
+    getHeaderTheme,
+    getUseLockPage,
+    getShowFullScreen,
+    getShowNotice,
+    getShowBread,
+    getShowContent,
+    getShowHeaderLogo,
+    getShowHeader,
+    getFixed,
+    getShowMixHeaderRef,
+    getShowFullHeaderRef,
+    getShowInsetHeaderRef,
+    getUnFixedAndFull,
+    getHeaderBgColor,
+    getShowLocalePicker,
+  }
+}
diff --git a/apps/grid-admin/src/hooks/setting/useMenuSetting.ts b/apps/grid-admin/src/hooks/setting/useMenuSetting.ts
new file mode 100644
index 00000000..c39a5346
--- /dev/null
+++ b/apps/grid-admin/src/hooks/setting/useMenuSetting.ts
@@ -0,0 +1,201 @@
+import type { MenuSetting } from '@vben/types'
+
+import { computed, unref, ref } from 'vue'
+
+import { useConfigStoreWithOut } from '@/store/config'
+
+import {
+  SIDE_BAR_MINI_WIDTH,
+  SIDE_BAR_SHOW_TIT_MINI_WIDTH,
+  MenuModeEnum,
+  MenuTypeEnum,
+  TriggerEnum,
+} from '@vben/constants'
+import { useFullContent } from '@/hooks/web/useFullContent'
+import {useRootSetting} from "@/hooks/setting/useRootSetting";
+
+const mixSideHasChildren = ref(false)
+
+export function useMenuSetting() {
+  const { getFullContent: fullContent } = useFullContent()
+  const configStore = useConfigStoreWithOut()
+  const { getShowLogo } = useRootSetting()
+  const getShowSidebar = computed(() => {
+    return (
+      unref(getSplit) ||
+      (unref(getShowMenu) &&
+        unref(getMenuMode) !== MenuModeEnum.HORIZONTAL &&
+        !unref(fullContent))
+    )
+  })
+
+  const getCollapsed = computed(() => configStore.getMenuSetting.collapsed)
+
+  const getMenuType = computed(() => configStore.getMenuSetting.type)
+
+  const getMenuMode = computed(() => configStore.getMenuSetting.mode)
+
+  const getMenuFixed = computed(() => configStore.getMenuSetting.fixed)
+
+  const getShowMenu = computed(() => configStore.getMenuSetting.show)
+
+  const getMenuHidden = computed(() => configStore.getMenuSetting.hidden)
+
+  const getMenuWidth = computed(() => configStore.getMenuSetting.menuWidth)
+
+  const getTrigger = computed(() => configStore.getMenuSetting.trigger)
+
+  const getMenuTheme = computed(() => configStore.getMenuSetting.theme)
+
+  const getSplit = computed(() => configStore.getMenuSetting.split)
+
+  const getMenuBgColor = computed(() => configStore.getMenuSetting.bgColor)
+
+  const getMixSideTrigger = computed(
+    () => configStore.getMenuSetting.mixSideTrigger,
+  )
+
+  const getCanDrag = computed(() => configStore.getMenuSetting.canDrag)
+
+  const getAccordion = computed(() => configStore.getMenuSetting.accordion)
+
+  const getMixSideFixed = computed(
+    () => configStore.getMenuSetting.mixSideFixed,
+  )
+
+  const getTopMenuAlign = computed(
+    () => configStore.getMenuSetting.topMenuAlign,
+  )
+
+  const getCloseMixSidebarOnChange = computed(
+    () => configStore.getMenuSetting.closeMixSidebarOnChange,
+  )
+
+  const getIsSidebarType = computed(
+    () => unref(getMenuType) === MenuTypeEnum.SIDEBAR,
+  )
+
+  const getIsTopMenu = computed(
+    () => unref(getMenuType) === MenuTypeEnum.TOP_MENU,
+  )
+
+  const getMenuShowLogo = computed(
+    ()=> unref(getShowLogo) && unref(getIsSidebarType)
+  )
+
+  const getCollapsedShowTitle = computed(
+    () => configStore.getMenuSetting.collapsedShowTitle,
+  )
+
+  const getShowTopMenu = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit)
+  })
+
+
+  const getShowHeaderTrigger = computed(() => {
+    if (
+      unref(getMenuType) === MenuTypeEnum.TOP_MENU ||
+      !unref(getShowMenu) ||
+      unref(getMenuHidden)
+    ) {
+      return false
+    }
+
+    return unref(getTrigger) === TriggerEnum.HEADER
+  })
+
+  const getIsHorizontal = computed(() => {
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL
+  })
+
+  const getIsMixSidebar = computed(() => {
+    return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR
+  })
+
+  const getIsMixMode = computed(() => {
+    return (
+      unref(getMenuMode) === MenuModeEnum.INLINE &&
+      unref(getMenuType) === MenuTypeEnum.MIX
+    )
+  })
+
+  const getRealWidth = computed(() => {
+    if (unref(getIsMixSidebar)) {
+      return unref(getCollapsed) && !unref(getMixSideFixed)
+        ? unref(getMiniWidthNumber)
+        : unref(getMenuWidth)
+    }
+    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth)
+  })
+
+  const getMiniWidthNumber = computed(() => {
+    const { collapsedShowTitle } = configStore.getMenuSetting
+    return collapsedShowTitle
+      ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
+      : SIDE_BAR_MINI_WIDTH
+  })
+
+  const getCalcContentWidth = computed(() => {
+    const width =
+      unref(getIsTopMenu) ||
+      !unref(getShowMenu) ||
+      (unref(getSplit) && unref(getMenuHidden))
+        ? 0
+        : unref(getIsMixSidebar)
+        ? (unref(getCollapsed)
+            ? SIDE_BAR_MINI_WIDTH
+            : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
+          (unref(getMixSideFixed) && unref(mixSideHasChildren)
+            ? unref(getRealWidth)
+            : 0)
+        : unref(getRealWidth)
+
+    return `calc(100% - ${unref(width)}px)`
+  })
+
+  // Set menu configuration
+  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
+    configStore.setProjectConfig({ menuSetting })
+  }
+
+  function toggleCollapsed() {
+    setMenuSetting({
+      collapsed: !unref(getCollapsed),
+    })
+  }
+  return {
+    setMenuSetting,
+    toggleCollapsed,
+    getMenuFixed,
+    getRealWidth,
+    getMenuType,
+    getMenuMode,
+    getShowMenu,
+    getCollapsed,
+    getMiniWidthNumber,
+    getCalcContentWidth,
+    getMenuWidth,
+    getTrigger,
+    getSplit,
+    getMenuTheme,
+    getCanDrag,
+    getCollapsedShowTitle,
+    getIsHorizontal,
+    getIsSidebarType,
+    getAccordion,
+    getShowTopMenu,
+    getShowHeaderTrigger,
+    getTopMenuAlign,
+    getMenuHidden,
+    getIsTopMenu,
+    getMenuBgColor,
+    getShowSidebar,
+    getIsMixMode,
+    getIsMixSidebar,
+    getCloseMixSidebarOnChange,
+    getMixSideTrigger,
+    getMixSideFixed,
+    mixSideHasChildren,
+    getMenuShowLogo
+  }
+}
diff --git a/apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts b/apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts
new file mode 100644
index 00000000..32a7ba7a
--- /dev/null
+++ b/apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts
@@ -0,0 +1,28 @@
+import type { MultiTabsSetting } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { useConfigStoreWithOut } from '@/store/config';
+
+export function useMultipleTabSetting() {
+  const configStore = useConfigStoreWithOut()
+
+  const getShowMultipleTab = computed(() => configStore.getMultiTabsSetting.show);
+
+  const getShowQuick = computed(() => configStore.getMultiTabsSetting.showQuick);
+
+  const getShowRedo = computed(() => configStore.getMultiTabsSetting.showRedo);
+
+  const getShowFold = computed(() => configStore.getMultiTabsSetting.showFold);
+
+  function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
+    configStore.setProjectConfig({ multiTabsSetting });
+  }
+  return {
+    setMultipleTabSetting,
+    getShowMultipleTab,
+    getShowQuick,
+    getShowRedo,
+    getShowFold,
+  };
+}
diff --git a/apps/grid-admin/src/hooks/setting/useRootSetting.ts b/apps/grid-admin/src/hooks/setting/useRootSetting.ts
new file mode 100644
index 00000000..e8198dcf
--- /dev/null
+++ b/apps/grid-admin/src/hooks/setting/useRootSetting.ts
@@ -0,0 +1,112 @@
+// import type { ProjectConfig } from '@/types'
+import { computed } from 'vue'
+import { useConfigStoreWithOut } from '@/store/config'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import { ContentLayoutEnum } from '@vben/constants'
+
+// type RootSetting = Omit<
+//   ProjectConfig,
+//   'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'
+// >
+
+export function useRootSetting() {
+
+  const configStore = useConfigStoreWithOut()
+  const appStore = useAppStoreWithOut()
+
+  const getPageLoading = computed(() => appStore.getPageLoading)
+
+  const getOpenKeepAlive = computed(
+    () => configStore.getProjectConfig.openKeepAlive,
+  )
+
+  const getSettingButtonPosition = computed(
+    () => configStore.getProjectConfig.settingButtonPosition,
+  )
+
+  const getCanEmbedIFramePage = computed(
+    () => configStore.getProjectConfig.canEmbedIFramePage,
+  )
+
+  const getPermissionMode = computed(
+    () => configStore.getProjectConfig.permissionMode,
+  )
+
+  const getShowLogo = computed(() => configStore.getProjectConfig.showLogo)
+
+  const getContentMode = computed(() => configStore.getProjectConfig.contentMode)
+
+  const getUseOpenBackTop = computed(
+    () => configStore.getProjectConfig.useOpenBackTop,
+  )
+
+  const getShowSettingButton = computed(
+    () => configStore.getProjectConfig.showSettingButton,
+  )
+
+  const getShowFooter = computed(() => configStore.getProjectConfig.showFooter)
+
+  const getShowBreadCrumb = computed(
+    () => configStore.getProjectConfig.showBreadCrumb,
+  )
+
+  const getThemeColor = computed(() => configStore.getProjectConfig.themeColor)
+
+  const getShowBreadCrumbIcon = computed(
+    () => configStore.getProjectConfig.showBreadCrumbIcon,
+  )
+
+  const getFullContent = computed(() => configStore.getProjectConfig.fullContent)
+
+  const getColorWeak = computed(() => configStore.getProjectConfig.colorWeak)
+
+  const getGrayMode = computed(() => configStore.getProjectConfig.grayMode)
+
+  const getLockTime = computed(() => configStore.getProjectConfig.lockTime)
+
+  const getShowDarkModeToggle = computed(
+    () => configStore.getProjectConfig.showDarkModeToggle,
+  )
+
+  const getLayoutContentMode = computed(() =>
+    configStore.getProjectConfig.contentMode === ContentLayoutEnum.FULL
+      ? ContentLayoutEnum.FULL
+      : ContentLayoutEnum.FIXED,
+  )
+  // TODO 待实现
+  // const getDarkMode = computed(() => configStore.getDarkMode)
+
+  // TODO 待实现
+  // function setRootSetting(setting: Partial<RootSetting>) {
+  //   configStore.setProjectConfig(setting)
+  // }
+  // TODO 待实现
+  // function setDarkMode(mode: ThemeEnum) {
+  //   configStore.setDarkMode(mode)
+  // }
+  return {
+    // setRootSetting,
+
+    getSettingButtonPosition,
+    getFullContent,
+    getColorWeak,
+    getGrayMode,
+    getLayoutContentMode,
+    getPageLoading,
+    getOpenKeepAlive,
+    getCanEmbedIFramePage,
+    getPermissionMode,
+    getShowLogo,
+    getShowBreadCrumb,
+    getShowBreadCrumbIcon,
+    getUseOpenBackTop,
+    getShowSettingButton,
+    getShowFooter,
+    getContentMode,
+    getLockTime,
+    getThemeColor,
+    // getDarkMode,
+    // setDarkMode,
+    getShowDarkModeToggle,
+  }
+}
diff --git a/apps/grid-admin/src/hooks/setting/useTransitionSetting.ts b/apps/grid-admin/src/hooks/setting/useTransitionSetting.ts
new file mode 100644
index 00000000..04b45f35
--- /dev/null
+++ b/apps/grid-admin/src/hooks/setting/useTransitionSetting.ts
@@ -0,0 +1,31 @@
+import type { TransitionSetting } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { useConfigStoreWithOut } from '@/store/config'
+
+export function useTransitionSetting() {
+  const configStore = useConfigStoreWithOut();
+
+  const getEnableTransition = computed(() => configStore.getTransitionSetting?.enable);
+
+  const getOpenNProgress = computed(() => configStore.getTransitionSetting?.openNProgress);
+
+  const getOpenPageLoading = computed((): boolean => {
+    return !!configStore.getTransitionSetting?.openPageLoading;
+  });
+
+  const getBasicTransition = computed(() => configStore.getTransitionSetting?.basicTransition);
+
+  function setTransitionSetting(transitionSetting: Partial<TransitionSetting>) {
+    configStore.setProjectConfig({ transitionSetting });
+  }
+  return {
+    setTransitionSetting,
+
+    getEnableTransition,
+    getOpenNProgress,
+    getOpenPageLoading,
+    getBasicTransition,
+  };
+}
diff --git a/apps/grid-admin/src/hooks/useRootSetting.ts b/apps/grid-admin/src/hooks/useRootSetting.ts
new file mode 100644
index 00000000..345a241b
--- /dev/null
+++ b/apps/grid-admin/src/hooks/useRootSetting.ts
@@ -0,0 +1,109 @@
+import type { ProjectConfig } from '@vben/types'
+import { computed } from 'vue'
+import { useConfigStoreWithOut } from '@/store/config'
+import { ContentLayoutEnum } from '@vben/constants'
+
+type RootSetting = Omit<
+  ProjectConfig,
+  'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'
+>
+
+export function useRootSetting() {
+  const appStore = useConfigStoreWithOut()
+
+  const getPageLoading = computed(() => appStore.getPageLoading)
+
+  const getOpenKeepAlive = computed(
+    () => appStore.getProjectConfig.openKeepAlive,
+  )
+
+  const getSettingButtonPosition = computed(
+    () => appStore.getProjectConfig.settingButtonPosition,
+  )
+
+  const getCanEmbedIFramePage = computed(
+    () => appStore.getProjectConfig.canEmbedIFramePage,
+  )
+
+  const getPermissionMode = computed(
+    () => appStore.getProjectConfig.permissionMode,
+  )
+
+  const getShowLogo = computed(() => appStore.getProjectConfig.showLogo)
+
+  const getContentMode = computed(() => appStore.getProjectConfig.contentMode)
+
+  const getUseOpenBackTop = computed(
+    () => appStore.getProjectConfig.useOpenBackTop,
+  )
+
+  const getShowSettingButton = computed(
+    () => appStore.getProjectConfig.showSettingButton,
+  )
+
+  const getShowFooter = computed(() => appStore.getProjectConfig.showFooter)
+
+  const getShowBreadCrumb = computed(
+    () => appStore.getProjectConfig.showBreadCrumb,
+  )
+
+  const getThemeColor = computed(() => appStore.getProjectConfig.themeColor)
+
+  const getShowBreadCrumbIcon = computed(
+    () => appStore.getProjectConfig.showBreadCrumbIcon,
+  )
+
+  const getFullContent = computed(() => appStore.getProjectConfig.fullContent)
+
+  const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak)
+
+  const getGrayMode = computed(() => appStore.getProjectConfig.grayMode)
+
+  const getLockTime = computed(() => appStore.getProjectConfig.lockTime)
+
+  const getShowDarkModeToggle = computed(
+    () => appStore.getProjectConfig.showDarkModeToggle,
+  )
+
+  const getLayoutContentMode = computed(() =>
+    appStore.getProjectConfig.contentMode === ContentLayoutEnum.FULL
+      ? ContentLayoutEnum.FULL
+      : ContentLayoutEnum.FIXED,
+  )
+  // TODO 待实现
+  // const getDarkMode = computed(() => appStore.getDarkMode)
+
+  // TODO 待实现
+  // function setRootSetting(setting: Partial<RootSetting>) {
+  //   appStore.setProjectConfig(setting)
+  // }
+  // TODO 待实现
+  // function setDarkMode(mode: ThemeEnum) {
+  //   appStore.setDarkMode(mode)
+  // }
+  return {
+    // setRootSetting,
+
+    getSettingButtonPosition,
+    getFullContent,
+    getColorWeak,
+    getGrayMode,
+    getLayoutContentMode,
+    getPageLoading,
+    getOpenKeepAlive,
+    getCanEmbedIFramePage,
+    getPermissionMode,
+    getShowLogo,
+    getShowBreadCrumb,
+    getShowBreadCrumbIcon,
+    getUseOpenBackTop,
+    getShowSettingButton,
+    getShowFooter,
+    getContentMode,
+    getLockTime,
+    getThemeColor,
+    // getDarkMode,
+    // setDarkMode,
+    getShowDarkModeToggle,
+  }
+}
diff --git a/apps/grid-admin/src/hooks/useTabs.ts b/apps/grid-admin/src/hooks/useTabs.ts
new file mode 100644
index 00000000..7b289d1a
--- /dev/null
+++ b/apps/grid-admin/src/hooks/useTabs.ts
@@ -0,0 +1,102 @@
+import type { RouteLocationNormalized, Router } from 'vue-router'
+
+import { useRouter } from 'vue-router'
+import { unref } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { useMultipleTabStore } from '@/store/multipleTab'
+import { TabActionEnum } from '@vben/constants'
+
+export function useTabs(_router?: Router) {
+  const appStore = useAppStore()
+
+  function canIUseTabs(): boolean {
+    const { show } = appStore.getMultiTabsSetting
+    if (!show) {
+      throw new Error(
+        'The multi-tab page is currently not open, please open it in the settings！',
+      )
+    }
+    return !!show
+  }
+
+  const tabStore = useMultipleTabStore()
+  const router = _router || useRouter()
+
+  const { currentRoute } = router
+
+  function getCurrentTab() {
+    const route = unref(currentRoute)
+
+    return tabStore.getTabList.find((item) => item.fullPath === route.fullPath)!
+  }
+
+  async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {
+    const canIUse = canIUseTabs
+    if (!canIUse) {
+      return
+    }
+    const targetTab = tab || getCurrentTab()
+    await tabStore.setTabTitle(title, targetTab)
+  }
+
+  async function updateTabPath(path: string, tab?: RouteLocationNormalized) {
+    const canIUse = canIUseTabs
+    if (!canIUse) {
+      return
+    }
+    const targetTab = tab || getCurrentTab()
+    await tabStore.updateTabPath(path, targetTab)
+  }
+
+  async function handleTabAction(
+    action: TabActionEnum,
+    tab?: RouteLocationNormalized,
+  ) {
+    const canIUse = canIUseTabs
+    if (!canIUse) {
+      return
+    }
+    const currentTab = getCurrentTab()
+    switch (action) {
+      case TabActionEnum.REFRESH_PAGE:
+        await tabStore.refreshPage(router)
+        break
+
+      case TabActionEnum.CLOSE_ALL:
+        await tabStore.closeAllTab(router)
+        break
+
+      case TabActionEnum.CLOSE_LEFT:
+        await tabStore.closeLeftTabs(currentTab, router)
+        break
+
+      case TabActionEnum.CLOSE_RIGHT:
+        await tabStore.closeRightTabs(currentTab, router)
+        break
+
+      case TabActionEnum.CLOSE_OTHER:
+        await tabStore.closeOtherTabs(currentTab, router)
+        break
+
+      case TabActionEnum.CLOSE_CURRENT:
+      case TabActionEnum.CLOSE:
+        await tabStore.closeTab(tab || currentTab, router)
+        break
+    }
+  }
+
+  return {
+    refreshPage: () => handleTabAction(TabActionEnum.REFRESH_PAGE),
+    closeAll: () => handleTabAction(TabActionEnum.CLOSE_ALL),
+    closeLeft: () => handleTabAction(TabActionEnum.CLOSE_LEFT),
+    closeRight: () => handleTabAction(TabActionEnum.CLOSE_RIGHT),
+    closeOther: () => handleTabAction(TabActionEnum.CLOSE_OTHER),
+    closeCurrent: () => handleTabAction(TabActionEnum.CLOSE_CURRENT),
+    close: (tab?: RouteLocationNormalized) =>
+      handleTabAction(TabActionEnum.CLOSE, tab),
+    setTitle: (title: string, tab?: RouteLocationNormalized) =>
+      updateTabTitle(title, tab),
+    updatePath: (fullPath: string, tab?: RouteLocationNormalized) =>
+      updateTabPath(fullPath, tab),
+  }
+}
diff --git a/apps/grid-admin/src/hooks/web/use-app-inject.ts b/apps/grid-admin/src/hooks/web/use-app-inject.ts
new file mode 100644
index 00000000..53fc32f0
--- /dev/null
+++ b/apps/grid-admin/src/hooks/web/use-app-inject.ts
@@ -0,0 +1,10 @@
+import { computed, unref } from 'vue'
+import { useAppProviderContext } from './useAppContext'
+
+export function useAppInject() {
+  const values = useAppProviderContext()
+
+  return {
+    getIsMobile: computed(() => unref(values.isMobile)),
+  }
+}
diff --git a/apps/grid-admin/src/hooks/web/useAppContext.ts b/apps/grid-admin/src/hooks/web/useAppContext.ts
new file mode 100644
index 00000000..3a38324b
--- /dev/null
+++ b/apps/grid-admin/src/hooks/web/useAppContext.ts
@@ -0,0 +1,17 @@
+import { createContext, useContext } from '@vben/hooks'
+import { InjectionKey, Ref } from 'vue'
+
+export interface AppProviderContextProps {
+  prefixCls: Ref<string>
+  isMobile: Ref<boolean>
+}
+
+const key: InjectionKey<AppProviderContextProps> = Symbol()
+
+export function createAppProviderContext(context: AppProviderContextProps) {
+  return createContext<AppProviderContextProps>(context, key)
+}
+
+export function useAppProviderContext() {
+  return useContext<AppProviderContextProps>(key)
+}
diff --git a/apps/grid-admin/src/hooks/web/useDesign.ts b/apps/grid-admin/src/hooks/web/useDesign.ts
new file mode 100644
index 00000000..60113d8d
--- /dev/null
+++ b/apps/grid-admin/src/hooks/web/useDesign.ts
@@ -0,0 +1,21 @@
+import { useAppProviderContext } from './useAppContext'
+
+export function useDesign(scope: string) {
+  const values = useAppProviderContext()
+  // const $style = cssModule ? useCssModule() : {};
+
+  // const style: Record<string, string> = {};
+  // if (cssModule) {
+  //   Object.keys($style).forEach((key) => {
+  //     // const moduleCls = $style[key];
+  //     const k = key.replace(new RegExp(`^${values.prefixCls}-?`, 'ig'), '');
+  //     style[lowerFirst(k)] = $style[key];
+  //   });
+  // }
+  return {
+    // prefixCls: computed(() => `${values.prefixCls}-${scope}`),
+    prefixCls: `${values.prefixCls}-${scope}`,
+    prefixVar: values.prefixCls,
+    // style,
+  }
+}
diff --git a/apps/grid-admin/src/hooks/web/useFullContent.ts b/apps/grid-admin/src/hooks/web/useFullContent.ts
new file mode 100644
index 00000000..ed5f10f5
--- /dev/null
+++ b/apps/grid-admin/src/hooks/web/useFullContent.ts
@@ -0,0 +1,28 @@
+import { computed, unref } from 'vue'
+
+import { useConfigStoreWithOut } from '@/store/config'
+
+import { useRouter } from 'vue-router'
+
+/**
+ * @description: Full screen display content
+ */
+export const useFullContent = () => {
+  const appStore = useConfigStoreWithOut()
+  const router = useRouter()
+  const { currentRoute } = router
+
+  // Whether to display the content in full screen without displaying the menu
+  const getFullContent = computed(() => {
+    // Query parameters, the full screen is displayed when the address bar has a full parameter
+    const route = unref(currentRoute)
+    const query = route.query
+    if (query && Reflect.has(query, '__full__')) {
+      return true
+    }
+    // Return to the configuration in the configuration file
+    return appStore.getProjectConfig.fullContent
+  })
+
+  return { getFullContent }
+}
diff --git a/apps/grid-admin/src/hooks/web/useLockScreen.ts b/apps/grid-admin/src/hooks/web/useLockScreen.ts
new file mode 100644
index 00000000..a537ed28
--- /dev/null
+++ b/apps/grid-admin/src/hooks/web/useLockScreen.ts
@@ -0,0 +1,88 @@
+import { computed, onUnmounted, unref, watch, watchEffect } from 'vue'
+import { useThrottleFn } from '@vben/utils'
+
+import { useLockStore } from '@/store/lock'
+import { useConfigStore } from '@/store/config'
+import { useUserStore } from '@/store/user'
+import { useRootSetting } from '../setting/useRootSetting'
+import { BASIC_LOCK_PATH } from '@vben/constants'
+import { router } from '@/router'
+
+const LOCK_PATH = BASIC_LOCK_PATH
+
+export function useLockScreen() {
+  const { getLockTime } = useRootSetting()
+  const lockStore = useLockStore()
+  const userStore = useUserStore()
+  const configStore = useConfigStore()
+
+  let timeId: TimeoutHandle
+
+  function clear(): void {
+    window.clearTimeout(timeId)
+  }
+
+  function resetCalcLockTimeout(): void {
+    // not login
+    if (!userStore.getAccessToken) {
+      clear()
+      return
+    }
+    const lockTime = configStore.getProjectConfig.lockTime
+    if (!lockTime || lockTime < 1) {
+      clear()
+      return
+    }
+    clear()
+
+    timeId = setTimeout(() => {
+      lockPage()
+    }, lockTime * 60 * 1000)
+  }
+
+  function lockPage(): void {
+    lockStore.setLockInfo({
+      isLock: true,
+      pwd: undefined,
+    })
+  }
+
+  watchEffect((onClean) => {
+    if (userStore.getAccessToken) {
+      resetCalcLockTimeout()
+    } else {
+      clear()
+    }
+    onClean(() => {
+      clear()
+    })
+  })
+
+  watch(
+    () => lockStore.getLockInfo?.isLock,
+    (newValue) => {
+      if (newValue) {
+        router.replace({
+          path: LOCK_PATH,
+          query: { redirect: unref(router.currentRoute).path },
+        })
+      }
+    },
+    { deep: true },
+  )
+
+  onUnmounted(() => {
+    clear()
+  })
+
+  const keyupFn = useThrottleFn(resetCalcLockTimeout, 2000)
+
+  return computed(() => {
+    if (unref(getLockTime)) {
+      return { onKeyup: keyupFn, onMousemove: keyupFn }
+    } else {
+      clear()
+      return {}
+    }
+  })
+}
diff --git a/apps/grid-admin/src/init-application.ts b/apps/grid-admin/src/init-application.ts
new file mode 100644
index 00000000..aaf047d6
--- /dev/null
+++ b/apps/grid-admin/src/init-application.ts
@@ -0,0 +1,134 @@
+import { initRequest } from '@vben/request'
+import { useUserStoreWithout, useUserStore } from '@/store/user'
+import { useI18n, useLocale } from '@vben/locale'
+import { deepMerge, getGlobalConfig } from '@vben/utils'
+import { useConfigStoreWithOut, useConfigStore } from '@/store/config'
+import { projectSetting } from './setting'
+import { initComp } from '@vben/vbencomponents'
+import { initLayout } from '@vben/layouts'
+import { localeList } from '@vben/locale/src/config'
+import { useRootSetting } from '@/hooks/setting/useRootSetting'
+import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'
+import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
+import {
+  getAllParentPath,
+  getChildrenMenus,
+  getCurrentParentPath,
+  getMenus,
+  getShallowMenus
+} from '@/router'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useAppInject } from '@/hooks/web/use-app-inject'
+import { useTabs } from '@/hooks/useTabs'
+import { usePromise } from '@vben/hooks'
+import { useMultipleTabStore } from '@/store/multipleTab'
+import { listenerRouteChange } from '@/logics/mitt/routeChange'
+import { useAppStore } from '@/store/modules/app'
+import Logo from '@/layout/components/logo.vue'
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+import { useLockStore } from '@/store/lock'
+import { unref } from 'vue'
+import {useLockScreen} from "@/hooks/web/useLockScreen";
+import {siteSetting} from "@/config";
+import {useMultipleTabSetting} from "@/hooks/setting/useMultipleTabSetting";
+// To decouple the modules below `packages/*`, they no longer depend on each other
+// If the modules are heavily dependent on each other, you need to provide a decoupling method, and the caller will pass the parameters
+// Each module needs to provide `bridge` file as a decoupling method
+
+// 为了解耦 `packages/*` 下面各模块，不再相互依赖
+// 如果模块相互依赖严重，则需要对外提供解耦方式，由调用方去进行参数传递
+// 各个模块需要提供 `bridge` 文件作为解耦方式
+async function initPackages() {
+  const _initRequest = async () => {
+    const { apiUrl } = getGlobalConfig(import.meta.env)
+    const { t } = useI18n()
+    await initRequest(() => {
+      return {
+        apiUrl,
+        getTokenFunction: () => {
+          const userStore = useUserStoreWithout()
+          return userStore.getAccessToken
+        },
+        errorFunction: null,
+        noticeFunction: null,
+        errorModalFunction: null,
+        timeoutFunction: () => {
+          const userStore = useUserStoreWithout()
+          userStore.setAccessToken(undefined)
+          userStore.logout(true)
+        },
+        unauthorizedFunction: (msg?: string) => {
+          const userStore = useUserStoreWithout()
+          userStore.setAccessToken(undefined)
+          userStore.logout(true)
+          return msg || t('sys.api.errMsg401')
+        },
+        handleErrorFunction: (msg, mode) => {
+          if (mode === 'modal') {
+            Modal.error({ title: t('sys.api.errorTip'), content: msg })
+          } else if (mode === 'message') {
+            message.error(msg)
+          }
+        },
+      }
+    })
+  }
+
+  const _initComp = async () => {
+    await initComp(() => {
+      return {
+        useLocale,
+        localeList,
+        useAppStore,
+        useConfigStore,
+      }
+    })
+  }
+  const _initLayout = async () => {
+    await initLayout(() => {
+      return {
+        useRootSetting,
+        getMenus,
+        getCurrentParentPath,
+        getShallowMenus,
+        getChildrenMenus,
+        getAllParentPath,
+        useHeaderSetting,
+        useDesign,
+        useAppInject,
+        useTabs,
+        usePromise,
+        useMultipleTabStore,
+        listenerRouteChange,
+        useUserStore,
+        useAppStore,
+        useConfigStore,
+        Logo,
+        useMenuSetting,
+        useMultipleTabSetting,
+        useTransitionSetting,
+        useLockStore,
+        useLockScreen,
+        siteSetting
+      }
+    })
+  }
+
+  await Promise.all([_initRequest(), _initComp(), _initLayout()])
+}
+
+// Initial project configuration
+function initAppConfigStore() {
+  const configStore = useConfigStoreWithOut()
+  const projectConfig = unref(configStore.getProjectConfig)
+  const projCfg = deepMerge(projectSetting, projectConfig || {})
+  configStore.setProjectConfig(projCfg)
+}
+
+export async function initApplication() {
+  // ! Need to pay attention to the timing of execution
+  // ! 需要注意调用时机
+  await initPackages()
+  // Initialize internal system configuration
+  initAppConfigStore()
+}
diff --git a/apps/grid-admin/src/layout/components/app/AppProvider.tsx b/apps/grid-admin/src/layout/components/app/AppProvider.tsx
new file mode 100644
index 00000000..b6da17c2
--- /dev/null
+++ b/apps/grid-admin/src/layout/components/app/AppProvider.tsx
@@ -0,0 +1,91 @@
+import {createBreakpointListen} from '@/hooks/event/use-breakpoint'
+import {namespace} from '@/setting'
+import {defineComponent, toRefs, ref, unref} from 'vue'
+import {createAppProviderContext} from '@/hooks/web/useAppContext'
+import {useConfigStoreWithOut} from '@/store/config'
+import {useMsg, useNotice} from '@vben/vbencomponents'
+import {setMsg, setNoice} from '@vben/request'
+
+const props = {
+  /**
+   * class style prefix
+   */
+  prefixCls: {type: String, default: namespace},
+}
+
+export default defineComponent({
+  name: 'AppProvider',
+  inheritAttrs: false,
+  props,
+  setup(props, {slots}) {
+    const isMobile = ref(false)
+    const isSetState = ref(false)
+
+    const configStore = useConfigStoreWithOut()
+    //注册msg以及notice，方便全局使用
+    const msg = useMsg()
+    const notice = useNotice()
+    setMsg(msg)
+    setNoice(notice)
+    // Monitor screen breakpoint information changes
+    createBreakpointListen(({screenMap, sizeEnum, width}) => {
+      const lgWidth = screenMap.get(sizeEnum.LG)
+      if (lgWidth) {
+        isMobile.value = width.value - 1 < lgWidth
+      }
+      handleRestoreState()
+    })
+
+    const {prefixCls} = toRefs(props)
+
+    // Inject variables into the global
+    createAppProviderContext({prefixCls, isMobile})
+
+    /**
+     * Used to maintain the state before the window changes
+     */
+    function handleRestoreState() {
+      if (unref(isMobile)) {
+        if (!unref(isSetState)) {
+          isSetState.value = true
+          const {
+            menuSetting: {
+              type: menuType,
+              mode: menuMode,
+              collapsed: menuCollapsed,
+              split: menuSplit,
+            },
+          } = configStore.getProjectConfig
+          configStore.setProjectConfig({
+            menuSetting: {
+              type: menuType,
+              mode: menuMode,
+              split: false,
+            },
+          })
+          configStore.setBeforeMiniInfo({
+            menuMode,
+            menuCollapsed,
+            menuType,
+            menuSplit,
+          })
+        }
+      } else {
+        if (unref(isSetState)) {
+          isSetState.value = false
+          const {menuMode, menuCollapsed, menuType, menuSplit} = configStore.getBeforeMiniInfo
+          configStore.setProjectConfig({
+            menuSetting: {
+              type: menuType,
+              mode: menuMode,
+              collapsed: menuCollapsed,
+              split: menuSplit,
+            },
+          })
+        }
+      }
+    }
+
+    return () => slots.default?.()
+  },
+})
diff --git a/apps/grid-admin/src/layout/components/logo.vue b/apps/grid-admin/src/layout/components/logo.vue
new file mode 100644
index 00000000..d27bc974
--- /dev/null
+++ b/apps/grid-admin/src/layout/components/logo.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { BASIC_HOME_PATH } from '@vben/constants'
+import { createNamespace, getGlobalConfig } from '@vben/utils'
+import logo from '@/assets/images/logo.png'
+
+const { bem } = createNamespace('app-logo')
+
+const props = defineProps({
+  /**
+   * Whether to show title
+   */
+  showTitle: { type: Boolean, default: true },
+
+  /**
+   * Click to jump to which path
+   */
+  homePath: { type: String, default: BASIC_HOME_PATH },
+})
+
+const { push } = useRouter()
+const { title } = getGlobalConfig(import.meta.env)
+
+function goHome() {
+  push(props.homePath)
+}
+</script>
+
+<template>
+  <div :class="bem()" @click="goHome">
+    <img :src="logo" alt="logo" />
+    <div
+      class="ml-2 truncate md:opacity-100"
+      :class="bem('title')"
+      v-show="showTitle"
+    >
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.app-logo {
+  display: flex;
+  align-items: center;
+  padding-left: 7px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 48px;
+  background: transparent;
+  box-sizing: border-box;
+
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    transition: all 0.5s;
+    line-height: normal;
+  }
+
+  img {
+    width: 32px;
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/layout/components/useLockPage.ts b/apps/grid-admin/src/layout/components/useLockPage.ts
new file mode 100644
index 00000000..2d7ed1e5
--- /dev/null
+++ b/apps/grid-admin/src/layout/components/useLockPage.ts
@@ -0,0 +1,66 @@
+import { computed, onUnmounted, watchEffect } from 'vue'
+import { useThrottleFn } from '@vben/utils'
+import { useLockStore } from '@/store/lock'
+import { useUserStore } from '@/store/user'
+
+export function useLockPage() {
+  const lockStore = useLockStore()
+  const userStore = useUserStore()
+
+  let timeId: TimeoutHandle
+
+  function clear(): void {
+    window.clearTimeout(timeId)
+  }
+
+  function resetCalcLockTimeout(): void {
+    // not login
+    if (!userStore.getToken) {
+      clear()
+      return
+    }
+    const lockTime = 0
+    if (!lockTime || lockTime < 1) {
+      clear()
+      return
+    }
+    clear()
+
+    timeId = setTimeout(() => {
+      lockPage()
+    }, lockTime * 60 * 1000)
+  }
+
+  function lockPage(): void {
+    lockStore.setLockInfo({
+      isLock: true,
+      pwd: undefined,
+    })
+  }
+
+  watchEffect((onClean) => {
+    if (userStore.getToken) {
+      resetCalcLockTimeout()
+    } else {
+      clear()
+    }
+    onClean(() => {
+      clear()
+    })
+  })
+
+  onUnmounted(() => {
+    clear()
+  })
+
+  const keyupFn = useThrottleFn(resetCalcLockTimeout, 2000)
+
+  return computed(() => {
+    if (0) {
+      return { onKeyup: keyupFn, onMousemove: keyupFn }
+    } else {
+      clear()
+      return {}
+    }
+  })
+}
diff --git a/apps/grid-admin/src/layout/feature/index.vue b/apps/grid-admin/src/layout/feature/index.vue
new file mode 100644
index 00000000..528bc88b
--- /dev/null
+++ b/apps/grid-admin/src/layout/feature/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import LayoutLockPage from '@/pages/sys/lock/index.vue'
+const getTarget = () => document.body
+</script>
+
+<template>
+  <layout-lock-page />
+  <a-back-top :target="getTarget" />
+</template>
diff --git a/apps/grid-admin/src/layout/index.vue b/apps/grid-admin/src/layout/index.vue
new file mode 100644
index 00000000..d460f8f5
--- /dev/null
+++ b/apps/grid-admin/src/layout/index.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+// import { Layout } from '@vben/layouts'
+import { Layout } from  '@vben/grid-layouts'
+
+</script>
+
+<template>
+  <layout>
+    <template #main>
+      <RouterView />
+    </template>
+  </layout>
+</template>
diff --git a/apps/grid-admin/src/logics/mitt/routeChange.ts b/apps/grid-admin/src/logics/mitt/routeChange.ts
new file mode 100644
index 00000000..0c4e3571
--- /dev/null
+++ b/apps/grid-admin/src/logics/mitt/routeChange.ts
@@ -0,0 +1,30 @@
+/**
+ * Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow
+ */
+
+import type { RouteLocationNormalized } from 'vue-router';
+import { getRawRoute, mitt } from "@vben/utils";
+
+const emitter = mitt();
+
+const key = Symbol();
+
+let lastChangeTab: RouteLocationNormalized;
+
+export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
+  const r = getRawRoute(lastChangeRoute);
+  emitter.emit(key, r);
+  lastChangeTab = r;
+}
+
+export function listenerRouteChange(
+  callback: (route: RouteLocationNormalized) => void,
+  immediate = true,
+) {
+  emitter.on(key, callback);
+  immediate && lastChangeTab && callback(lastChangeTab);
+}
+
+export function removeTabChangeListener() {
+  emitter.clear();
+}
diff --git a/apps/grid-admin/src/main.ts b/apps/grid-admin/src/main.ts
new file mode 100644
index 00000000..40aa53e7
--- /dev/null
+++ b/apps/grid-admin/src/main.ts
@@ -0,0 +1,36 @@
+import '@vben/styles'
+// import 'ant-design-vue/dist/antd.variable.css'
+import 'virtual:svg-icons-register'
+import App from './app.vue'
+import { createApp } from 'vue'
+import { router } from '@/router'
+import { setupRouteGuard } from '@/router/guard'
+import { setupI18n } from '@vben/locale'
+import { setupPinia } from '@vben/stores'
+import { initApplication } from './init-application'
+import { registerComponents } from '../init-components'
+;(async () => {
+  const app = createApp(App)
+
+  setupPinia(app)
+
+  await registerComponents(app)
+
+  await initApplication()
+  // Register Global Components
+
+  // Multilingual configuration
+  // Asynchronous case: language files may be obtained from the server side
+  await setupI18n(app)
+  // Init Router
+  app.use(router)
+  await setupRouteGuard(router)
+  await router.isReady()
+  app.mount('#app')
+  // When Closing mock, Tree Shaking `mockjs` dep
+  if (__VITE_USE_MOCK__) {
+    import('../mock/_mock-server').then(({ setupProdMockServer }) =>
+      setupProdMockServer(),
+    )
+  }
+})()
diff --git a/apps/grid-admin/src/pages/dashboard/analysis/index.vue b/apps/grid-admin/src/pages/dashboard/analysis/index.vue
new file mode 100644
index 00000000..ea15ff2c
--- /dev/null
+++ b/apps/grid-admin/src/pages/dashboard/analysis/index.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+
+</script>
+<template>
+  <div class="p-4">analysis</div>
+</template>
diff --git a/apps/grid-admin/src/pages/dashboard/workbench/index.vue b/apps/grid-admin/src/pages/dashboard/workbench/index.vue
new file mode 100644
index 00000000..96ac82c0
--- /dev/null
+++ b/apps/grid-admin/src/pages/dashboard/workbench/index.vue
@@ -0,0 +1 @@
+<template>workbench</template>
diff --git a/apps/grid-admin/src/pages/demo/Card.vue b/apps/grid-admin/src/pages/demo/Card.vue
new file mode 100644
index 00000000..2a70d82a
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Card.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Card } from '@vben/demo'
+</script>
+<template>
+  <Card />
+</template>
diff --git a/apps/grid-admin/src/pages/demo/Draggable.vue b/apps/grid-admin/src/pages/demo/Draggable.vue
new file mode 100644
index 00000000..28be7eb1
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Draggable.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div>拖拽</div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/grid-admin/src/pages/demo/Form.vue b/apps/grid-admin/src/pages/demo/Form.vue
new file mode 100644
index 00000000..229db5c3
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Form.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Form } from '@vben/demo'
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/grid-admin/src/pages/demo/Table.vue b/apps/grid-admin/src/pages/demo/Table.vue
new file mode 100644
index 00000000..81dde2a3
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Table.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Table } from '@vben/demo'
+</script>
+<template>
+  <Table />
+</template>
diff --git a/apps/grid-admin/src/pages/demo/editor/monaco-editor.vue b/apps/grid-admin/src/pages/demo/editor/monaco-editor.vue
new file mode 100644
index 00000000..c66a9f90
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/editor/monaco-editor.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import * as monaco from 'monaco-editor'
+import { onMounted } from 'vue'
+let editor = $ref(null)
+onMounted(() => {
+  initEditor()
+})
+const initEditor = () => {
+  // Initialize editor , Make sure dom Has rendered
+  editor = monaco.editor.create(document.getElementById('codeEditBox'), {
+    value: 'console.log("Hello, world")',
+    language: 'javascript',
+  })
+}
+</script>
+<template>
+  <div id="codeEditBox" style="height: 70vh"></div>
+</template>
diff --git a/apps/grid-admin/src/pages/demo/page/index.vue b/apps/grid-admin/src/pages/demo/page/index.vue
new file mode 100644
index 00000000..5db5b320
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/page/index.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>PageTest</template>
+
+<style scoped></style>
diff --git a/apps/grid-admin/src/pages/demo/table/BasicTable.vue b/apps/grid-admin/src/pages/demo/table/BasicTable.vue
new file mode 100644
index 00000000..2ce0dfc9
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/table/BasicTable.vue
@@ -0,0 +1,6 @@
+<template>
+  <BasicTable/>
+</template>
+<script lang="ts" setup>
+import { BasicTable } from '@vben/demo'
+</script>
diff --git a/apps/grid-admin/src/pages/sys/exception/index.vue b/apps/grid-admin/src/pages/sys/exception/index.vue
new file mode 100644
index 00000000..8085eb6c
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/exception/index.vue
@@ -0,0 +1,167 @@
+<script lang="tsx">
+import type { PropType } from 'vue'
+import { defineComponent, ref, computed, unref } from 'vue'
+import { BASIC_LOGIN_PATH } from '@vben/constants'
+import { useRoute } from 'vue-router'
+import { useI18n } from '@vben/locale'
+import { createNamespace } from '@vben/utils/src/bem'
+import notDataSvg from '@/assets/svg/no-data.svg'
+import netWorkSvg from '@/assets/svg/net-error.svg'
+
+/**
+ * Exception related enumeration
+ */
+enum ExceptionEnum {
+  // page not access
+  PAGE_NOT_ACCESS = 403,
+
+  // page not found
+  PAGE_NOT_FOUND = 404,
+
+  // error
+  ERROR = 500,
+
+  // net work error
+  NET_WORK_ERROR = 10000,
+
+  // No data on the page. In fact, it is not an exception page
+  PAGE_NOT_DATA = 10100,
+}
+
+interface MapValue {
+  title: string
+  subTitle: string
+  btnText?: string
+  icon?: string
+  handler?: AnyFunction<any>
+  status?: string
+}
+
+export default defineComponent({
+  name: 'ErrorPage',
+  props: {
+    // 状态码
+    status: {
+      type: Number as PropType<number>,
+      default: ExceptionEnum.PAGE_NOT_FOUND,
+    },
+
+    title: {
+      type: String as PropType<string>,
+      default: '',
+    },
+
+    subTitle: {
+      type: String as PropType<string>,
+      default: '',
+    },
+
+    full: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  setup(props) {
+    const statusMapRef = ref(new Map<string | number, MapValue>())
+
+    const { query } = useRoute()
+    const go = function (_arg?: any) {}
+    const redo = function (_arg?: any) {}
+    const { t } = useI18n()
+    const { bem } = createNamespace('app-exception-page')
+
+    const getStatus = computed(() => {
+      const { status: routeStatus } = query
+      const { status } = props
+      return Number(routeStatus) || status
+    })
+
+    const getMapValue = computed((): MapValue => {
+      return unref(statusMapRef).get(unref(getStatus)) as MapValue
+    })
+
+    const backLoginI18n = t('sys.exception.backLogin')
+    const backHomeI18n = t('sys.exception.backHome')
+
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
+      title: '403',
+      status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
+      subTitle: t('sys.exception.subTitle403'),
+      btnText: props.full ? backLoginI18n : backHomeI18n,
+      handler: () => (props.full ? go(BASIC_LOGIN_PATH) : go()),
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
+      title: '404',
+      status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
+      subTitle: t('sys.exception.subTitle404'),
+      btnText: props.full ? backLoginI18n : backHomeI18n,
+      handler: () => (props.full ? go(BASIC_LOGIN_PATH) : go()),
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.ERROR, {
+      title: '500',
+      status: `${ExceptionEnum.ERROR}`,
+      subTitle: t('sys.exception.subTitle500'),
+      btnText: backHomeI18n,
+      handler: () => go(),
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
+      title: t('sys.exception.noDataTitle'),
+      subTitle: '',
+      btnText: t('common.redo'),
+      handler: () => redo(),
+      icon: notDataSvg,
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
+      title: t('sys.exception.networkErrorTitle'),
+      subTitle: t('sys.exception.networkErrorSubTitle'),
+      btnText: t('common.redo'),
+      handler: () => redo(),
+      icon: netWorkSvg,
+    })
+
+    return () => {
+      const { title, subTitle, btnText, icon, handler, status } =
+        unref(getMapValue) || {}
+
+      // const img = () => (icon ? <img src={icon} /> : null)
+
+      return (
+        <VbenResult
+          class={bem() + ' m-4'}
+          status={status as any}
+          title={props.title || title}
+          description={props.subTitle || subTitle}
+        >
+          {{
+            footer: () =>
+              btnText && (
+                <VbenButton type="primary" onClick={handler}>
+                  {() => btnText}
+                </VbenButton>
+              ),
+            icon: () => (icon ? <img src={icon} /> : null),
+          }}
+        </VbenResult>
+      )
+    }
+  },
+})
+</script>
+<style lang="less">
+.app-exception-page {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .ant-result-icon {
+    img {
+      max-width: 400px;
+      max-height: 300px;
+    }
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue b/apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue
new file mode 100644
index 00000000..7b8b46cb
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/lock/index.vue b/apps/grid-admin/src/pages/sys/lock/index.vue
new file mode 100644
index 00000000..5195a055
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/lock/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <transition name="fade-bottom" mode="out-in">
+    <lock-page v-if="isLockPage" />
+  </transition>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useLockStore } from '@/store/lock'
+import LockPage from './lock-page.vue'
+
+const lockStore = useLockStore()
+const isLockPage = computed(() => lockStore?.getLockInfo?.isLock ?? false)
+</script>
diff --git a/apps/grid-admin/src/pages/sys/lock/lock-page.vue b/apps/grid-admin/src/pages/sys/lock/lock-page.vue
new file mode 100644
index 00000000..65679232
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/lock/lock-page.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import {ref, computed, unref} from 'vue'
+import { useUserStore } from '@/store/user'
+import { useLockStore } from '@/store/lock'
+import { useI18n } from '@vben/locale'
+import { useNow } from './use-now'
+import { createNamespace } from '@vben/utils'
+import headerImg from '@/assets/images/header.jpg'
+import {router} from "@/router";
+
+const password = ref('')
+const loading = ref(false)
+const errMsg = ref(false)
+const showDate = ref(true)
+
+const { bem } = createNamespace('lock-page')
+
+const lockStore = useLockStore()
+const userStore = useUserStore()
+
+const { hour, month, minute, meridiem, year, day, week } = useNow(true)
+
+const { t } = useI18n()
+
+const userInfo = computed(() => userStore.getUserInfo || {})
+
+/**
+ * @description: unLock
+ */
+async function unLock() {
+  if (!password.value) {
+    return
+  }
+  try {
+    loading.value = true
+    const res = await lockStore.unLock(password.value)
+    errMsg.value = !res
+    if (res) {
+      const redirect = unref(router.currentRoute).query?.redirect as string || '/';
+      await router.replace({ path: redirect })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function goLogin() {
+  userStore.logout(true)
+  lockStore.resetLockInfo()
+}
+
+function handleShowForm(show = false) {
+  showDate.value = show
+}
+</script>
+
+<template>
+  <div
+    :class="bem()"
+    class="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black"
+  >
+    <div
+      :class="bem('unlock')"
+      class="absolute top-0 flex flex-col items-center justify-center h-16 pt-5 text-white transform translate-x-1/2 cursor-pointer left-1/2 sm:text-md xl:text-xl"
+      @click="handleShowForm(false)"
+      v-show="showDate"
+    >
+      <VbenIconify icon="ant-design:lock-outlined" />
+      <span>{{ t('sys.lock.unlock') }}</span>
+    </div>
+
+    <div class="flex items-center justify-center w-screen h-screen">
+      <div
+        :class="bem('hour')"
+        class="relative w-2/5 mr-5 md:mr-20 h-2/5 md:h-4/5"
+      >
+        <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px">{{ hour }}</span>
+        <span
+          class="absolute left-5 top-5 text-md"
+          v-show="showDate"
+        >
+          {{ meridiem }}
+        </span>
+      </div>
+      <div :class="`${bem('minute')} w-2/5 h-2/5 md:h-4/5 `">
+        <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px"> {{ minute }}</span>
+      </div>
+    </div>
+    <transition name="fade-slide">
+      <div :class="bem('entry')" v-show="!showDate">
+        <div :class="bem('entry-content')">
+          <div :class="`${bem('entry-header')} enter-x`">
+            <img
+              :src="userInfo.avatar || headerImg"
+              :class="`${bem('entry-header-img')}`"
+            />
+            <p :class="`${bem('entry-header-name')}`">
+              {{ userInfo.realName }}
+            </p>
+          </div>
+          <VbenInput
+            type="password"
+            show-password-on="mousedown"
+            :placeholder="t('sys.lock.placeholder')"
+            class="enter-x"
+            v-model:value="password"
+          />
+          <span :class="`${bem('err-msg')} enter-x`" v-if="errMsg">
+            {{ t('sys.lock.alert') }}
+          </span>
+          <div :class="`${bem('footer')} enter-x`">
+            <VbenButton
+              quaternary
+              type="info"
+              size="small"
+              class="mt-2 mr-2 enter-x text-gray-300"
+              :disabled="loading"
+              @click="handleShowForm(true)"
+            >
+              {{ t('common.back') }}
+            </VbenButton>
+            <VbenButton
+              quaternary
+              type="info"
+              size="small"
+              class="mt-2 mr-2 enter-x text-gray-300"
+              :disabled="loading"
+              @click="goLogin"
+            >
+              {{ t('sys.lock.backToLogin') }}
+            </VbenButton>
+            <VbenButton
+              class="mt-2 text-gray-300"
+              quaternary
+              type="info"
+              size="small"
+              @click="unLock()"
+              :loading="loading"
+            >
+              {{ t('sys.lock.entry') }}
+            </VbenButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <div
+      class="absolute w-full text-center text-gray-300 bottom-5 xl:text-xl 2xl:text-3xl enter-y"
+    >
+      <div class="mb-4 text-5xl enter-x" v-show="!showDate">
+        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
+      </div>
+      <div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.lock-page {
+  z-index: 9999;
+
+  &__unlock {
+    transform: translate(-50%, 0);
+  }
+
+  &__hour,
+  &__minute {
+    display: flex;
+    font-weight: 700;
+    color: #bababa;
+    background-color: #141313;
+    border-radius: 30px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__entry {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(8px);
+    justify-content: center;
+    align-items: center;
+
+    &-content {
+      width: 260px;
+    }
+
+    &-header {
+      text-align: center;
+
+      &-img {
+        width: 70px;
+        margin: 0 auto;
+        border-radius: 50%;
+      }
+
+      &-name {
+        margin-top: 5px;
+        font-weight: 500;
+        color: #bababa;
+      }
+    }
+  }
+
+  &__err-msg {
+    display: inline-block;
+    margin-top: 10px;
+    color: var(--error-color);
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/pages/sys/lock/use-now.ts b/apps/grid-admin/src/pages/sys/lock/use-now.ts
new file mode 100644
index 00000000..ce04b7cb
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/lock/use-now.ts
@@ -0,0 +1,60 @@
+import { dateUtil } from '@vben/utils'
+import { tryOnMounted, tryOnUnmounted } from '@vben/utils'
+import { reactive, toRefs } from 'vue'
+
+export function useNow(immediate = true) {
+  let timer: IntervalHandle
+
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: '',
+    day: 0,
+    hour: '',
+    minute: '',
+    second: 0,
+    meridiem: '',
+  })
+
+  const update = () => {
+    const now = dateUtil()
+
+    const h = now.format('HH')
+    const m = now.format('mm')
+    const s = now.get('s')
+
+    state.year = now.get('y')
+    state.month = now.get('M') + 1
+    state.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][now.day()]
+    state.day = now.get('date')
+    state.hour = h
+    state.minute = m
+    state.second = s
+
+    state.meridiem = now.format('A')
+  }
+
+  function start() {
+    update()
+    clearInterval(timer)
+    timer = setInterval(() => update(), 1000)
+  }
+
+  function stop() {
+    clearInterval(timer)
+  }
+
+  tryOnMounted(() => {
+    immediate && start()
+  })
+
+  tryOnUnmounted(() => {
+    stop()
+  })
+
+  return {
+    ...toRefs(state),
+    start,
+    stop,
+  }
+}
diff --git a/apps/grid-admin/src/pages/sys/login/forget-password-form.vue b/apps/grid-admin/src/pages/sys/login/forget-password-form.vue
new file mode 100644
index 00000000..c5dc5637
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/forget-password-form.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { reactive, ref, computed, unref } from 'vue'
+import { useLoginState, useFormRules, LoginStateEnum } from './use-login'
+import { CountDownInput } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import LoginFormTitle from './login-form-title.vue'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+
+const formRef = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  account: '',
+  mobile: '',
+  sms: '',
+})
+
+const show = computed(
+  () => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD,
+)
+
+async function handleReset() {
+  const form = unref(formRef)
+  if (!form) return
+  await form.resetFields()
+}
+</script>
+
+<template>
+  <template v-if="show">
+    <login-form-title class="enter-x" />
+    <vben-form :model="formData" :rules="getFormRules" ref="formRef">
+      <vben-form-item name="account" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.account"
+          :placeholder="t('sys.login.userName')"
+        />
+      </vben-form-item>
+
+      <vben-form-item name="mobile" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+        />
+      </vben-form-item>
+      <vben-form-item name="sms" class="enter-x" inline :show-label="false">
+        <count-down-input
+          size="large"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </vben-form-item>
+
+      <div class="enter-x">
+        <vben-button
+          type="primary"
+          size="large"
+          block
+          @click="handleReset"
+          :loading="loading"
+        >
+          {{ t('common.resetText') }}
+        </vben-button>
+        <vben-button size="large" block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </vben-button>
+      </div>
+    </vben-form>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/login-form-title.vue b/apps/grid-admin/src/pages/sys/login/login-form-title.vue
new file mode 100644
index 00000000..cf793d38
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/login-form-title.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import { useI18n } from '@vben/locale'
+import { LoginStateEnum, useLoginState } from './use-login'
+
+const { t } = useI18n()
+
+const { getLoginState } = useLoginState()
+
+const formTitle = computed(() => {
+  const titleMap = {
+    [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
+    [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
+    [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
+    [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
+    [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+  }
+  return titleMap[unref(getLoginState)]
+})
+</script>
+<template>
+  <h2
+    class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left"
+  >
+    {{ formTitle }}
+  </h2>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/login-form.vue b/apps/grid-admin/src/pages/sys/login/login-form.vue
new file mode 100644
index 00000000..b81002d1
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/login-form.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import { reactive, ref, unref, computed } from 'vue';
+import {
+  GithubFilled,
+  WechatFilled,
+  AlipayCircleFilled,
+  GoogleCircleFilled,
+  TwitterCircleFilled
+} from '@ant-design/icons-vue';
+import { useI18n } from '@vben/locale';
+import { notice } from '@vben/vbencomponents'
+import { useUserStore } from '@/store/user';
+import {
+  LoginStateEnum,
+  useLoginState,
+  useFormRules,
+  useFormValid
+} from './use-login';
+import LoginFormTitle from './login-form-title.vue';
+
+const formRef = ref();
+const loading = ref(false);
+const rememberMe = ref(false);
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const { setLoginState, getLoginState } = useLoginState();
+const { getFormRules } = useFormRules();
+
+const formData = reactive({
+  account: 'vben',
+  password: '123456'
+});
+
+const { validForm } = useFormValid(formRef);
+//onKeyStroke('Enter', handleLogin);
+
+const show = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
+
+async function handleLogin() {
+  // 暂时不做校验
+  // const data = await validForm()
+  // if (!data) return
+  try {
+    loading.value = true;
+    const userInfo = await userStore.login({
+      password: formData.password,
+      username: formData.account,
+      mode: 'none' //不要默认的错误提示
+    });
+
+    if (userInfo) {
+      notice.success({
+        content: t('sys.login.loginSuccessTitle'),
+        meta: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+        duration: 3000
+      });
+    }
+  } catch (error) {
+    // dialog.error({
+    //   title: t('sys.api.errorTip'),
+    //   content:
+    //     (error as unknown as Error).message || t('sys.api.networkExceptionMsg')
+    // });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+<template>
+  <login-form-title v-show="show" class="enter-x" />
+  <vben-form
+    :model="formData"
+    :rules="getFormRules"
+    ref="formRef"
+    v-show="show"
+    @keypress.enter="handleLogin"
+  >
+    <vben-form-item class="enter-x" inline :show-label="false" >
+      <vben-input
+        size="large"
+        v-model:value="formData.account"
+        :placeholder="t('sys.login.userName')"
+        class="fix-auto-fill"
+      />
+    </vben-form-item>
+    <vben-form-item class="enter-x" inline :show-label="false">
+      <vben-input
+        type="password"
+        show-password-on="click"
+        size="large"
+        v-model:value="formData.password"
+        :placeholder="t('sys.login.password')"
+      />
+    </vben-form-item>
+
+    <vben-grid class="enter-x">
+      <vben-grid-item :span="12">
+        <vben-form-item inline :show-label="false">
+          <!-- No logic, you need to deal with it yourself -->
+          <vben-checkbox v-model:checked="rememberMe" size="small">
+            {{t('sys.login.rememberMe')}}
+          </vben-checkbox>
+        </vben-form-item>
+      </vben-grid-item>
+      <vben-grid-item :span="12" >
+        <vben-form-item inline :show-label="false" class="justify-items-end" >
+          <!-- No logic, you need to deal with it yourself -->
+          <vben-button
+            text
+            tag="a"
+            type="primary"
+            size="small"
+            @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
+          >
+            {{t('sys.login.forgetPassword')}}
+          </vben-button>
+        </vben-form-item>
+      </vben-grid-item>
+    </vben-grid>
+
+    <vben-form-item class="enter-x" inline :show-label="false" >
+      <vben-button
+        type="primary"
+        size="large"
+        block
+        @click="handleLogin"
+        :loading="loading"
+      >
+        {{t('sys.login.loginButton')}}
+      </vben-button>
+    </vben-form-item>
+
+    <vben-grid class="enter-x" :cols="3">
+      <vben-grid-item :md="8" :xs="24">
+        <vben-button block @click="setLoginState(LoginStateEnum.MOBILE)">
+          {{t('sys.login.mobileSignInFormTitle')}}
+        </vben-button>
+      </vben-grid-item>
+      <vben-grid-item :md="8" :xs="24" class="!my-2 md:!my-0 xs:mx-0 md:mx-2">
+        <vben-button block @click="setLoginState(LoginStateEnum.QR_CODE)">
+          {{t('sys.login.qrSignInFormTitle')}}
+        </vben-button>
+      </vben-grid-item>
+      <vben-grid-item :md="7" :xs="24">
+        <vben-button block @click="setLoginState(LoginStateEnum.REGISTER)">
+          {{t('sys.login.registerButton')}}
+        </vben-button>
+      </vben-grid-item>
+    </vben-grid>
+
+    <vben-divider class="enter-x">{{t('sys.login.otherSignIn')}}</vben-divider>
+
+    <div class="flex justify-evenly enter-x" :class="`sign-in-way`">
+      <github-filled />
+      <wechat-filled />
+      <alipay-circle-filled />
+      <google-circle-filled />
+      <twitter-circle-filled />
+    </div>
+  </vben-form>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/login.vue b/apps/grid-admin/src/pages/sys/login/login.vue
new file mode 100644
index 00000000..cf837c4b
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/login.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { useI18n } from '@vben/locale'
+import { createNamespace, getGlobalConfig } from '@vben/utils'
+import LoginForm from './login-form.vue'
+import ForgetPasswordForm from './forget-password-form.vue'
+import RegisterForm from './register-form.vue'
+import MobileForm from './mobile-form.vue'
+import QrCodeForm from './qrcode-form.vue'
+const { bem } = createNamespace('login')
+
+defineProps({
+  sessionTimeout: {
+    type: Boolean,
+  },
+})
+
+const { title } = getGlobalConfig(import.meta.env)
+const { t } = useI18n()
+</script>
+
+<template>
+  <div :class="bem()">
+    <div :class="bem('slogan')" class="hidden xl:flex">
+      <div :class="bem('logo')">
+        <img :title="title" :alt="title" src="@/assets/images/logo.png" />
+        <div :class="[bem('logo-title'), 'truncate']">{{ title }}</div>
+      </div>
+
+      <div class="my-auto">
+        <img
+          :alt="title"
+          src="@/assets/svg/login-box-bg.svg"
+          class="w-2/3 -enter-x"
+        />
+        <div class="mt-10 font-medium text-white -enter-x">
+          <span class="inline-block mt-4 text-2xl">
+            {{ t('sys.login.signInTitle') }}</span
+          >
+        </div>
+        <div class="mt-4 font-normal text-white text-md -enter-x">
+          {{ t('sys.login.signInDesc') }}
+        </div>
+      </div>
+    </div>
+    <div :class="[bem('form'), 'enter-x']">
+      <!--      <div class="absolute mt-4 right-4"><DarkModeToggle /></div>-->
+      <div
+        class="sm:w-4/6 xl:w-4/5 w-full mx-auto my-auto p-4 rounded-md shadow-md xl:shadow-none"
+      >
+        <vben-card>
+          <login-form />
+          <forget-password-form />
+          <register-form />
+          <mobile-form />
+          <qr-code-form />
+        </vben-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+//@dark-bg: #293146;
+
+.login {
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+
+  &__slogan {
+    min-height: 100%;
+    padding-left: 50px;
+    margin-right: 40px;
+    flex-direction: column;
+  }
+
+  &__slogan,
+  &__form {
+    flex: 1;
+  }
+
+  &__form {
+    display: flex;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: -48%;
+    background-image: url(@/assets/svg/login-bg.svg);
+    background-position: 100%;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    content: '';
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    padding-left: 7px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: absolute;
+    top: 12px;
+    height: 80px;
+    &-title {
+      font-size: 24px;
+      color: #fff;
+      margin-left: 8px;
+    }
+    img {
+      width: 48px;
+    }
+  }
+
+  .sign-in-way {
+    .anticon {
+      font-size: 22px;
+      color: #888;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  .count-down-input input {
+    min-width: unset;
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/pages/sys/login/mobile-form.vue b/apps/grid-admin/src/pages/sys/login/mobile-form.vue
new file mode 100644
index 00000000..92dfec74
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/mobile-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { reactive, ref, computed, unref } from 'vue'
+import { CountDownInput } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import {
+  useLoginState,
+  useFormRules,
+  useFormValid,
+  LoginStateEnum,
+} from './use-login'
+import LoginFormTitle from './login-form-title.vue'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+
+const formRef = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  mobile: '',
+  sms: '',
+})
+
+const { validForm } = useFormValid(formRef)
+
+const show = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
+
+async function handleLogin() {
+  const data = await validForm()
+  if (!data) return
+  console.log(data)
+}
+</script>
+<template>
+  <template v-if="show">
+    <login-form-title class="enter-x" />
+    <vben-form
+      class="rd-2"
+      :model="formData"
+      :rules="getFormRules"
+      ref="formRef"
+    >
+      <vben-form-item name="mobile" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </vben-form-item>
+      <vben-form-item name="sms" class="enter-x" inline :show-label="false">
+        <count-down-input
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </vben-form-item>
+
+      <div class="enter-x">
+        <vben-button
+          type="primary"
+          size="large"
+          block
+          @click="handleLogin"
+          :loading="loading"
+        >
+          {{ t('sys.login.loginButton') }}
+        </vben-button>
+        <vben-button block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </vben-button>
+      </div>
+    </vben-form>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/qrcode-form.vue b/apps/grid-admin/src/pages/sys/login/qrcode-form.vue
new file mode 100644
index 00000000..7d36f9bd
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/qrcode-form.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import { QrCode } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import { useLoginState, LoginStateEnum } from './use-login'
+import LoginFormTitle from './login-form-title.vue'
+
+const testQrCodeUrl = 'https://vvbin.cn/next/login'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const show = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
+</script>
+
+<template>
+  <template v-if="show">
+    <login-form-title class="enter-x" />
+    <div class="enter-x min-w-64 min-h-64">
+      <qr-code
+        :value="testQrCodeUrl"
+        class="flex flex-col justify-center items-center enter-x xl:justify-start"
+        :width="280"
+      />
+      <vben-divider class="enter-x">{{ t('sys.login.scanSign') }}</vben-divider>
+      <vben-button
+        size="large"
+        block
+        class="mt-4 enter-x"
+        @click="handleBackLogin"
+      >
+        {{ t('sys.login.backSignIn') }}
+      </vben-button>
+    </div>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/register-form.vue b/apps/grid-admin/src/pages/sys/login/register-form.vue
new file mode 100644
index 00000000..702b6fdf
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/register-form.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { reactive, ref, unref, computed } from 'vue'
+import { CountDownInput } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import {
+  useLoginState,
+  useFormRules,
+  useFormValid,
+  LoginStateEnum,
+} from './use-login'
+import LoginFormTitle from './login-form-title.vue'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+
+const formRef = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  account: '',
+  password: '',
+  confirmPassword: '',
+  mobile: '',
+  sms: '',
+  policy: false,
+})
+
+const { getFormRules } = useFormRules(formData)
+const { validForm } = useFormValid(formRef)
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+
+async function handleRegister() {
+  const data = await validForm()
+  if (!data) return
+  console.log(data)
+}
+</script>
+
+<template>
+  <template v-if="getShow">
+    <login-form-title class="enter-x" />
+    <vben-form :model="formData" :rules="getFormRules" ref="formRef">
+      <vben-form-item name="account" class="enter-x" inline :show-label="false">
+        <vben-input
+          class="fix-auto-fill"
+          size="large"
+          v-model:value="formData.account"
+          :placeholder="t('sys.login.userName')"
+        />
+      </vben-form-item>
+      <vben-form-item name="mobile" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </vben-form-item>
+      <vben-form-item name="sms" class="enter-x" inline :show-label="false">
+        <count-down-input
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </vben-form-item>
+      <vben-form-item
+        name="password"
+        class="enter-x"
+        inline
+        :show-label="false"
+      >
+        <vben-input
+          size="large"
+          visibilityToggle
+          v-model:value="formData.password"
+          :placeholder="t('sys.login.password')"
+        />
+      </vben-form-item>
+      <vben-form-item
+        name="confirmPassword"
+        class="enter-x"
+        inline
+        :show-label="false"
+      >
+        <vben-input
+          size="large"
+          type="password"
+          visibilityToggle
+          v-model:value="formData.confirmPassword"
+          :placeholder="t('sys.login.confirmPassword')"
+        />
+      </vben-form-item>
+
+      <vben-form-item class="enter-x" name="policy" inline :show-label="false">
+        <!-- No logic, you need to deal with it yourself -->
+        <vben-checkbox v-model:checked="formData.policy" size="small">
+          {{ t('sys.login.policy') }}
+        </vben-checkbox>
+      </vben-form-item>
+
+      <vben-button
+        type="primary"
+        class="enter-x"
+        size="large"
+        block
+        @click="handleRegister"
+        :loading="loading"
+      >
+        {{ t('sys.login.registerButton') }}
+      </vben-button>
+      <vben-button
+        size="large"
+        block
+        class="mt-4 enter-x"
+        @click="handleBackLogin"
+      >
+        {{ t('sys.login.backSignIn') }}
+      </vben-button>
+    </vben-form>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/use-login.ts b/apps/grid-admin/src/pages/sys/login/use-login.ts
new file mode 100644
index 00000000..8e443cb8
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/use-login.ts
@@ -0,0 +1,129 @@
+import { ref, computed, unref, Ref } from 'vue'
+import { useI18n } from '@vben/locale'
+
+export enum LoginStateEnum {
+  LOGIN,
+  REGISTER,
+  RESET_PASSWORD,
+  MOBILE,
+  QR_CODE,
+}
+
+const currentState = ref(LoginStateEnum.LOGIN)
+
+export function useLoginState() {
+  function setLoginState(state: LoginStateEnum) {
+    currentState.value = state
+  }
+
+  const getLoginState = computed(() => currentState.value)
+
+  function handleBackLogin() {
+    setLoginState(LoginStateEnum.LOGIN)
+  }
+
+  return { setLoginState, getLoginState, handleBackLogin }
+}
+
+export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
+  async function validForm() {
+    const form = unref(formRef)
+    if (!form) return
+    const data = await form.validate()
+    return data as T
+  }
+
+  return { validForm }
+}
+
+export function useFormRules(formData?: Recordable<any>) {
+  const { t } = useI18n()
+
+  const getAccountFormRule = computed(() =>
+    createRule(t('sys.login.accountPlaceholder')),
+  )
+  const getPasswordFormRule = computed(() =>
+    createRule(t('sys.login.passwordPlaceholder')),
+  )
+  const getSmsFormRule = computed(() =>
+    createRule(t('sys.login.smsPlaceholder')),
+  )
+  const getMobileFormRule = computed(() =>
+    createRule(t('sys.login.mobilePlaceholder')),
+  )
+
+  const validatePolicy = async (_: any, value: boolean) => {
+    return !value
+      ? Promise.reject(t('sys.login.policyPlaceholder'))
+      : Promise.resolve()
+  }
+
+  const validateConfirmPassword = (password: string) => {
+    return async (_: any, value: string) => {
+      if (!value) {
+        return Promise.reject(t('sys.login.passwordPlaceholder'))
+      }
+      if (value !== password) {
+        return Promise.reject(t('sys.login.diffPwd'))
+      }
+      return Promise.resolve()
+    }
+  }
+
+  const getFormRules = computed((): { [k: string]: any | any[] } => {
+    const accountFormRule = unref(getAccountFormRule)
+    const passwordFormRule = unref(getPasswordFormRule)
+    const smsFormRule = unref(getSmsFormRule)
+    const mobileFormRule = unref(getMobileFormRule)
+
+    const mobileRule = {
+      sms: smsFormRule,
+      mobile: mobileFormRule,
+    }
+    switch (unref(currentState)) {
+      // register form rules
+      case LoginStateEnum.REGISTER:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+          confirmPassword: [
+            {
+              validator: validateConfirmPassword(formData?.password),
+              trigger: 'change',
+            },
+          ],
+          policy: [{ validator: validatePolicy, trigger: 'change' }],
+          ...mobileRule,
+        }
+
+      // reset password form rules
+      case LoginStateEnum.RESET_PASSWORD:
+        return {
+          account: accountFormRule,
+          ...mobileRule,
+        }
+
+      // mobile form rules
+      case LoginStateEnum.MOBILE:
+        return mobileRule
+
+      // login form rules
+      default:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+        }
+    }
+  })
+  return { getFormRules }
+}
+
+function createRule(message: string): any[] {
+  return [
+    {
+      required: true,
+      message,
+      trigger: 'change',
+    },
+  ]
+}
diff --git a/apps/grid-admin/src/router/guard.ts b/apps/grid-admin/src/router/guard.ts
new file mode 100644
index 00000000..867a3aef
--- /dev/null
+++ b/apps/grid-admin/src/router/guard.ts
@@ -0,0 +1,240 @@
+import type { Router } from 'vue-router'
+import nProgress from 'nprogress'
+import { config } from '@/config'
+import {
+  BASIC_LOCK_PATH,
+  BASIC_LOGIN_PATH,
+  PageEnum,
+  PermissionModeEnum,
+} from '@vben/constants'
+import { useUserStoreWithout } from '@/store/user'
+import { useAuthStoreWithout } from '@/store/auth'
+import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic'
+import { setRouteChange } from '@/logics/mitt/routeChange'
+import { ROOT_ROUTE } from './routes'
+import { useLockStore } from '@/store/lock'
+import type { Menu } from '@vben/types'
+import { useConfigStoreWithOut } from '@/store/config'
+import { projectSetting } from '@/setting'
+import { configureDynamicParamsMenu } from '@/router/helper'
+
+const LOADED_PAGE_POOL = new Map<string, boolean>()
+const LOCK_PATH = BASIC_LOCK_PATH
+const LOGIN_PATH = BASIC_LOGIN_PATH
+const whitePathList: string[] = [LOGIN_PATH, LOCK_PATH]
+const ROOT_PATH = ROOT_ROUTE.path
+
+async function setupRouteGuard(router: Router) {
+  const { enableProgress } = config
+  router.beforeEach(async (to) => {
+    // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
+    to.meta.loaded = !!LOADED_PAGE_POOL.get(to.path)
+
+    // Display a progress bar at the top when switching pages
+    // Only works when the page is loaded for the first time
+    if (enableProgress && !to.meta.loaded) {
+      nProgress.start()
+    }
+    return true
+  })
+
+  router.afterEach((to) => {
+    // Indicates that the page has been loaded
+    // When opening again, you can turn off some progress display interactions
+    LOADED_PAGE_POOL.set(to.path, true)
+    // console.log(to)
+    // Close the page loading progress bar
+    if (enableProgress && !to.meta.loaded) {
+      nProgress.done()
+    }
+  })
+  createAuthGuard(router)
+  createTabsGuard(router)
+  createParamMenuGuard(router) // must after createPermissionGuard (menu has been built.)
+}
+
+export function createAuthGuard(router: Router) {
+  const userStore = useUserStoreWithout()
+  const permissionStore = useAuthStoreWithout()
+  const lockStore = useLockStore()
+  const configStore = useConfigStoreWithOut()
+  router.beforeEach(async (to, from, next) => {
+    if (
+      from.path === ROOT_PATH &&
+      to.path === PageEnum.BASE_HOME &&
+      userStore.getUserInfo?.homePath &&
+      userStore.getUserInfo?.homePath !== PageEnum.BASE_HOME
+    ) {
+      next(userStore.getUserInfo?.homePath)
+      return
+    }
+
+    const token = userStore.getAccessToken
+
+    // TODO Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      if (to.path === LOGIN_PATH && token) {
+        const isSessionTimeout = userStore.getSessionTimeout
+        try {
+          await userStore.afterLoginAction()
+          if (!isSessionTimeout) {
+            next((to.query?.redirect as string) || '/')
+            return
+          }
+        } catch {}
+      }
+      if (to.path === LOCK_PATH && !lockStore.getLockInfo?.isLock) {
+        next({ path: from.path })
+        return
+      }
+      next()
+      return
+    }
+    // token does not exist
+    if (!token) {
+      // You can access without permission. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next()
+        return
+      }
+
+      // redirect login page
+      const redirectData: {
+        path: string
+        replace: boolean
+        query?: Recordable<string>
+      } = {
+        path: LOGIN_PATH,
+        replace: true,
+      }
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        }
+      }
+
+      next(redirectData)
+      return
+    }
+
+    if (lockStore.getLockInfo?.isLock) {
+      // redirect lock page
+      const redirectData: {
+        path: string
+        replace: boolean
+        query?: Recordable<string>
+      } = {
+        path: LOCK_PATH,
+        replace: true,
+      }
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        }
+      }
+      next(redirectData)
+      return
+    }
+
+    // Jump to the 404 page after processing the login
+    if (
+      from.path === LOGIN_PATH &&
+      to.name === PAGE_NOT_FOUND_ROUTE.name &&
+      to.fullPath !== (userStore.getUserInfo?.homePath || PageEnum.BASE_HOME)
+    ) {
+      next(userStore.getUserInfo?.homePath || PageEnum.BASE_HOME)
+      return
+    }
+    const { permissionMode = projectSetting.permissionMode } =
+      configStore.getProjectConfig
+    // TODO get userinfo while last fetch time is empty
+    if (
+      userStore.getLastUpdateTime === 0 &&
+      permissionMode == PermissionModeEnum.BACK
+    ) {
+      try {
+        await userStore.getUserInfoAction()
+      } catch (err) {
+        next()
+        return
+      }
+    }
+    // console.log(permissionStore.getIsDynamicAddedRoute, to)
+    if (permissionStore.getIsDynamicAddedRoute) {
+      next()
+      return
+    }
+
+    // console.log(to.params)
+    const routes = await permissionStore.buildRoutesAction()
+
+    routes.forEach((route) => {
+      router.addRoute(route)
+    })
+
+    router.addRoute(PAGE_NOT_FOUND_ROUTE)
+
+    permissionStore.setDynamicAddedRoute(true)
+
+    if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true, query: to.query })
+    } else {
+      const redirectPath = (from.query.redirect || to.path) as string
+      const redirect = decodeURIComponent(redirectPath)
+      const nextData =
+        to.path === redirect ? { ...to, replace: true } : { path: redirect }
+      next(nextData)
+    }
+  })
+}
+
+// 路由守卫：进入路由，增加Tabs
+export function createTabsGuard(router: Router) {
+  router.beforeEach(async (to) => {
+    if (whitePathList.includes(to.path)) return
+    // Notify routing changes
+    setRouteChange(to)
+  })
+}
+
+function createParamMenuGuard(router: Router) {
+  const authStore = useAuthStoreWithout()
+  router.beforeEach(async (to, _, next) => {
+    // filter no name route
+    if (!to.name) {
+      next()
+      return
+    }
+
+    // menu has been built.
+    if (!authStore.getIsDynamicAddedRoute) {
+      next()
+      return
+    }
+    let menus: Menu[] = []
+    if (isBackMode()) {
+      menus = authStore.getBackMenuList
+    } else if (isRouteMappingMode()) {
+      menus = authStore.getFrontMenuList
+    }
+    menus.forEach((item) => configureDynamicParamsMenu(item, to.params))
+    next()
+  })
+}
+const getPermissionMode = () => {
+  const configStore = useConfigStoreWithOut()
+  const { permissionMode = projectSetting.permissionMode } =
+    configStore.getProjectConfig
+  return permissionMode
+}
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK
+}
+const isRouteMappingMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING
+}
+
+export { setupRouteGuard }
diff --git a/apps/grid-admin/src/router/helper/index.ts b/apps/grid-admin/src/router/helper/index.ts
new file mode 100644
index 00000000..4637bce6
--- /dev/null
+++ b/apps/grid-admin/src/router/helper/index.ts
@@ -0,0 +1,2 @@
+export * from './menu'
+export * from './route'
diff --git a/apps/grid-admin/src/router/helper/menu.ts b/apps/grid-admin/src/router/helper/menu.ts
new file mode 100644
index 00000000..485ca352
--- /dev/null
+++ b/apps/grid-admin/src/router/helper/menu.ts
@@ -0,0 +1,105 @@
+import { isUrl, cloneDeep, findParentPath, mapTree } from '@vben/utils'
+import { RouteParams } from 'vue-router'
+import { toRaw } from 'vue'
+import { Menu, MenuModule } from '@vben/types'
+
+export function getAllParentPath<T = Recordable<any>>(
+  treeData: T[],
+  path: string,
+) {
+  const menuList = findParentPath(treeData, (n) => n.path === path) as Menu[]
+  return (menuList || []).map((item) => item.path)
+}
+
+function joinParentPath(menus: RouteRecordItem[], parentPath = '') {
+  for (let index = 0; index < menus.length; index++) {
+    const menu = menus[index]
+    // https://next.router.vuejs.org/guide/essentials/nested-routes.html
+    // Note that nested paths that start with / will be treated as a root path.
+    // This allows you to leverage the component nesting without having to use a nested URL.
+    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+      // path doesn't start with /, nor is it a url, join parent path
+      menu.path = `${parentPath}/${menu.path}`
+    }
+    if (menu?.children?.length) {
+      joinParentPath(
+        menu.children,
+        menu.meta?.hidePathForChildren ? parentPath : menu.path,
+      )
+    }
+  }
+}
+
+// Parsing the menu module
+export function transformMenuModule(menuModule: MenuModule): Menu {
+  const { menu } = menuModule
+
+  const menuList = [menu]
+
+  joinParentPath(menuList)
+  return menuList[0]
+}
+
+export function transformRouteToMenu(
+  routeModList: RouteRecordItem[],
+  routerMapping = false,
+) {
+  const cloneRouteModList = cloneDeep(routeModList)
+  const routeList: RouteRecordItem[] = []
+
+  cloneRouteModList.forEach((item) => {
+    if (
+      routerMapping &&
+      item.meta?.hideChildrenInMenu &&
+      typeof item.redirect === 'string'
+    ) {
+      item.path = item.redirect
+    }
+    if (item.meta?.single) {
+      const realItem = item?.children?.[0]
+      realItem && routeList.push(realItem)
+    } else {
+      routeList.push(item)
+    }
+  })
+  const list = mapTree(routeList, {
+    conversion: (node: RouteRecordItem) => {
+      const { meta: { hideMenu = false } = {} } = node
+
+      return {
+        ...(node.meta || {}),
+        meta: node.meta,
+        name: node.name,
+        hideMenu,
+        path: node.path,
+        ...(node.redirect ? { redirect: node.redirect } : {}),
+      }
+    },
+  })
+  joinParentPath(list)
+  return cloneDeep(list)
+}
+
+/**
+ * config menu with given params
+ */
+const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g
+export function configureDynamicParamsMenu(menu: Menu, params: RouteParams) {
+  const { path, paramPath } = toRaw(menu)
+  let realPath = paramPath ? paramPath : path
+  const matchArr = realPath.match(menuParamRegex)
+
+  matchArr?.forEach((it) => {
+    const realIt = it.substr(1)
+    if (params[realIt]) {
+      realPath = realPath.replace(`:${realIt}`, params[realIt] as string)
+    }
+  })
+  // save original param path.
+  if (!paramPath && matchArr && matchArr.length > 0) {
+    menu.paramPath = path
+  }
+  menu.path = realPath
+  // children
+  menu.children?.forEach((item) => configureDynamicParamsMenu(item, params))
+}
diff --git a/apps/grid-admin/src/router/helper/route.ts b/apps/grid-admin/src/router/helper/route.ts
new file mode 100644
index 00000000..719a2b91
--- /dev/null
+++ b/apps/grid-admin/src/router/helper/route.ts
@@ -0,0 +1,182 @@
+import type { RouteMeta, Router, RouteRecordNormalized } from 'vue-router'
+
+import { omit, cloneDeep } from '@vben/utils'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { LAYOUT, PARENT_LAYOUT } from '../routes'
+
+export type LayoutMapKey = 'LAYOUT'
+
+const IFRAME = () => import('@/pages/sys/iframe/FrameBlank.vue')
+export const EXCEPTION_COMPONENT = () =>
+  import('@/pages/sys/exception/index.vue')
+
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>()
+
+LayoutMap.set('LAYOUT', LAYOUT)
+LayoutMap.set('IFRAME', IFRAME)
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable<any>>>
+
+// Dynamic introduction
+function asyncImportRoute(routes: RouteRecordItem[] | undefined) {
+  dynamicViewsModules =
+    dynamicViewsModules || import.meta.glob('../../pages/**/*.{vue,tsx}')
+
+  if (!routes) return
+  routes.forEach((item: any) => {
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME'
+    }
+    const { component, name } = item
+    const { children } = item
+    if (component) {
+      const layoutFound = LayoutMap.get(component.toUpperCase())
+      if (layoutFound) {
+        item.component = layoutFound
+      } else {
+        item.component = dynamicImport(dynamicViewsModules, component as string)
+      }
+    } else if (name) {
+      item.component = PARENT_LAYOUT()
+    }
+    children && asyncImportRoute(children)
+  })
+}
+
+function dynamicImport(
+  dynamicViewsModules: Record<string, () => Promise<Recordable<any>>>,
+  component: string,
+) {
+  const keys = Object.keys(dynamicViewsModules)
+  const matchKeys = keys.filter((key) => {
+    const k = key.replace('../../pages', '')
+    const startFlag = component.startsWith('/')
+    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx')
+    const startIndex = startFlag ? 0 : 1
+    const lastIndex = endFlag ? k.length : k.lastIndexOf('.')
+    return k.substring(startIndex, lastIndex) === component
+  })
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0]
+    return dynamicViewsModules[matchKey]
+  } else if (matchKeys?.length > 1) {
+    console.warn(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure',
+    )
+    return
+  } else {
+    console.warn(
+      '在src/views/下找不到`' +
+        component +
+        '.vue` 或 `' +
+        component +
+        '.tsx`, 请自行创建!',
+    )
+    return EXCEPTION_COMPONENT
+  }
+}
+
+// Turn background objects into routing objects
+export function transformObjToRoute<T = RouteRecordItem>(
+  routeList: RouteRecordItem[],
+): T[] {
+  routeList.forEach((route) => {
+    const _route: any = route
+    const component = _route.component as string
+    if (component) {
+      console.log(component)
+      if (component.toUpperCase() === 'LAYOUT') {
+        route.component = LayoutMap.get(component.toUpperCase())
+      } else {
+        route.children = [cloneDeep(route)]
+        route.component = LAYOUT
+        route.name = `${_route.name}Parent`
+        route.path = ''
+        const meta = route.meta || ({} as RouteMeta)
+        meta.single = true
+        meta.affix = false
+        route.meta = meta
+      }
+    } else {
+      console.warn('请正确配置路由：' + _route?.name + '的component属性')
+    }
+    route.children && asyncImportRoute(route.children)
+  })
+  return routeList as unknown as T[]
+}
+
+/**
+ * Convert multi-level routing to level 2 routing
+ */
+export function flatMultiLevelRoutes(routeModules: RouteRecordItem[]) {
+  const modules: RouteRecordItem[] = cloneDeep(routeModules)
+  for (let index = 0; index < modules.length; index++) {
+    const routeModule = modules[index]
+    if (!isMultipleRoute(routeModule)) {
+      continue
+    }
+    promoteRouteLevel(routeModule)
+  }
+  return modules
+}
+
+// Routing level upgrade
+function promoteRouteLevel(routeModule: RouteRecordItem) {
+  // Use vue-router to splice menus
+  let router: Router | null = createRouter({
+    routes: [routeModule as unknown as RouteRecordNormalized],
+    history: createWebHashHistory(),
+  })
+
+  const routes = router.getRoutes()
+  addToChildren(routes, routeModule.children || [], routeModule)
+  router = null
+  routeModule.children = routeModule.children?.map((item): any =>
+    omit(item, 'children'),
+  )
+}
+
+// Add all sub-routes to the secondary route
+function addToChildren(
+  routes: RouteRecordNormalized[],
+  children: RouteRecordItem[],
+  routeModule: RouteRecordItem,
+) {
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index]
+    const route = routes.find((item) => item.name === child.name)
+    if (!route) {
+      continue
+    }
+    routeModule.children = routeModule.children || []
+    if (!routeModule.children.find((item) => item.name === route.name)) {
+      routeModule.children?.push(route as unknown as RouteRecordItem)
+    }
+    if (child.children?.length) {
+      addToChildren(routes, child.children, routeModule)
+    }
+  }
+}
+
+// Determine whether the level exceeds 2 levels
+function isMultipleRoute(routeModule: RouteRecordItem) {
+  if (
+    !routeModule ||
+    !Reflect.has(routeModule, 'children') ||
+    !routeModule.children?.length
+  ) {
+    return false
+  }
+
+  const children = routeModule.children
+
+  let flag = false
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index]
+    if (child.children?.length) {
+      flag = true
+      break
+    }
+  }
+  return flag
+}
diff --git a/apps/grid-admin/src/router/index.ts b/apps/grid-admin/src/router/index.ts
new file mode 100644
index 00000000..6b9d96fa
--- /dev/null
+++ b/apps/grid-admin/src/router/index.ts
@@ -0,0 +1,37 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes } from './routes'
+
+export * from './menus'
+export * from './helper'
+
+// The whitelist should contain basic static routes
+const WHITE_NAME_LIST: string[] = []
+;(() => {
+  const getRouteNames = (routeRecords: RouteRecordItem[]) =>
+    routeRecords.forEach((item) => {
+      WHITE_NAME_LIST.push(item.name)
+      if (item?.children?.length) {
+        getRouteNames(item.children)
+      }
+    })
+
+  getRouteNames(routes)
+})()
+
+// app router
+export const router = createRouter({
+  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
+  routes,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+// reset router
+export function resetRouter() {
+  router.getRoutes().forEach((route) => {
+    const { name } = route
+    if (name && !WHITE_NAME_LIST.includes(name as string)) {
+      router.hasRoute(name) && router.removeRoute(name)
+    }
+  })
+}
diff --git a/apps/grid-admin/src/router/menus/index.ts b/apps/grid-admin/src/router/menus/index.ts
new file mode 100644
index 00000000..f06ffa34
--- /dev/null
+++ b/apps/grid-admin/src/router/menus/index.ts
@@ -0,0 +1,106 @@
+import type { RouteRecordNormalized } from 'vue-router'
+
+import { useAuthStoreWithout } from '@/store/auth'
+import { getAllParentPath } from '@/router/helper/menu'
+import { isUrl, filterTree } from '@vben/utils'
+import { router } from '@/router'
+import { PermissionModeEnum } from '@vben/constants'
+import { pathToRegexp } from 'path-to-regexp'
+import { useConfigStoreWithOut } from '@/store/config'
+import { Menu } from '@vben/types'
+
+// ===========================
+// ==========Helper===========
+// ===========================
+
+const getPermissionMode = () => {
+  const appStore = useConfigStoreWithOut()
+  return appStore.getProjectConfig.permissionMode
+}
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK
+}
+
+const isRoleMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROLE
+}
+
+async function getAsyncMenus() {
+  const permissionStore = useAuthStoreWithout()
+  if (isBackMode()) {
+    return permissionStore.getBackMenuList.filter(
+      (item) => !item.meta?.hideMenu && !item.hideMenu,
+    )
+  }
+
+  return permissionStore.getFrontMenuList.filter(
+    (item) => !item.hideMenu && !item.meta?.hideMenu,
+  )
+}
+
+export const getMenus = async (): Promise<Menu[]> => {
+  const menus = await getAsyncMenus()
+
+  if (isRoleMode()) {
+    const routes = router.getRoutes()
+    return filterTree(menus, basicFilter(routes))
+  }
+  return menus
+}
+
+export async function getCurrentParentPath(currentPath: string) {
+  const menus = await getAsyncMenus()
+  const allParentPath = await getAllParentPath(menus, currentPath)
+  return allParentPath?.[0]
+}
+
+// Get the level 1 menu, delete children
+export async function getShallowMenus(): Promise<Menu[]> {
+  const menus = await getAsyncMenus()
+  const shallowMenuList = menus.map((item) => ({
+    ...item,
+    children: undefined,
+  }))
+  if (isRoleMode()) {
+    const routes = router.getRoutes()
+    return shallowMenuList.filter(basicFilter(routes))
+  }
+  return shallowMenuList
+}
+
+// Get the children of the menu
+export async function getChildrenMenus(parentPath: string) {
+  const menus = await getMenus()
+  const parent = menus.find((item) => item.path === parentPath)
+  if (!parent || !parent.children || !!parent?.meta?.hideChildrenInMenu) {
+    return [] as Menu[]
+  }
+  if (isRoleMode()) {
+    const routes = router.getRoutes()
+    return filterTree(parent.children, basicFilter(routes))
+  }
+  return parent.children
+}
+
+function basicFilter(routes: RouteRecordNormalized[]) {
+  return (menu: Menu) => {
+    const matchRoute = routes.find((route) => {
+      if (isUrl(menu.path)) return true
+
+      if (route.meta?.carryParam) {
+        return pathToRegexp(route.path).test(menu.path)
+      }
+      const isSame = route.path === menu.path
+      if (!isSame) return false
+
+      if (route.meta?.ignoreAuth) return true
+
+      return isSame || pathToRegexp(route.path).test(menu.path)
+    })
+
+    if (!matchRoute) return false
+    menu.icon = (menu.icon || matchRoute.meta.icon) as string
+    menu.meta = matchRoute.meta
+    return true
+  }
+}
diff --git a/apps/grid-admin/src/router/routes/basic.ts b/apps/grid-admin/src/router/routes/basic.ts
new file mode 100644
index 00000000..d084d2ab
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/basic.ts
@@ -0,0 +1,95 @@
+import {
+  REDIRECT_NAME,
+  PAGE_NOT_FOUND_NAME,
+  BASIC_HOME_PATH,
+} from '@vben/constants'
+import { Redirect } from '@vben/components'
+import { t } from '@vben/locale'
+
+const LAYOUT = () => import('@/layout/index.vue')
+
+const PARENT_LAYOUT = () => () =>
+  new Promise((resolve) => {
+    resolve({ name: 'ParentLayout' })
+  })
+
+const PAGE_NOT_FOUND_ROUTE: RouteRecordItem = {
+  path: '/:path(.*)*',
+  name: PAGE_NOT_FOUND_NAME,
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorPage',
+    key: 333,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: PAGE_NOT_FOUND_NAME,
+      component: () => import('@/pages/sys/exception/index.vue'),
+      meta: {
+        title: 'ErrorPage',
+        key: 3333,
+      },
+    },
+  ],
+}
+
+// 404 on a page
+const REDIRECT_ROUTE: RouteRecordItem = {
+  path: '/redirect',
+  component: LAYOUT,
+  name: 'RedirectTo',
+  meta: {
+    title: REDIRECT_NAME,
+    hideBreadcrumb: true,
+    hideMenu: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: REDIRECT_NAME,
+      component: Redirect,
+      meta: {
+        title: REDIRECT_NAME,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+}
+
+const ROOT_ROUTE: RouteRecordItem = {
+  path: '/',
+  name: 'Root',
+  redirect: BASIC_HOME_PATH,
+  meta: {
+    title: 'Root',
+  },
+}
+
+const LOGIN_ROUTE: RouteRecordItem = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/pages/sys/login/login.vue'),
+  meta: {
+    title: t('routes.basic.login'),
+  },
+}
+
+const LOCK_SCREEN_ROUTE: RouteRecordItem = {
+  path: '/lock',
+  name: 'Lock',
+  component: () => import('@/pages/sys/lock/index.vue'),
+  meta: {
+    title: t('routes.basic.lock'),
+  },
+}
+
+export {
+  LAYOUT,
+  PARENT_LAYOUT,
+  PAGE_NOT_FOUND_ROUTE,
+  REDIRECT_ROUTE,
+  ROOT_ROUTE,
+  LOGIN_ROUTE,
+  LOCK_SCREEN_ROUTE
+}
diff --git a/apps/grid-admin/src/router/routes/index.ts b/apps/grid-admin/src/router/routes/index.ts
new file mode 100644
index 00000000..4e8cdff6
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/index.ts
@@ -0,0 +1,30 @@
+import {
+  LOGIN_ROUTE,
+  PAGE_NOT_FOUND_ROUTE,
+  REDIRECT_ROUTE,
+  ROOT_ROUTE,
+  LOCK_SCREEN_ROUTE
+} from './basic'
+
+export * from './basic'
+
+const routeModuleRecord = import.meta.globEager('./modules/**/*.ts') as any
+
+const routeModules: RouteRecordItem[] = []
+
+Object.keys(routeModuleRecord).forEach((key) => {
+  const routeModule = routeModuleRecord[key].default || {}
+  routeModules.push(
+    ...(Array.isArray(routeModule) ? [...routeModule] : [routeModule]),
+  )
+})
+
+export const asyncRoutes = [...routeModules]
+
+export const routes = [
+  LOGIN_ROUTE,
+  LOCK_SCREEN_ROUTE,
+  ROOT_ROUTE,
+  REDIRECT_ROUTE,
+  PAGE_NOT_FOUND_ROUTE,
+]
diff --git a/apps/grid-admin/src/router/routes/modules/dashboard.ts b/apps/grid-admin/src/router/routes/modules/dashboard.ts
new file mode 100644
index 00000000..c58bacef
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,34 @@
+import { LAYOUT } from '../basic'
+
+const dashboard: RouteRecordItem = {
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: LAYOUT,
+  redirect: '/dashboard/analysis',
+  meta: {
+    orderNo: 1,
+    icon: 'mdi:monitor-dashboard',
+    title: 'routes.dashboard.dashboard',
+  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: () => import('@/pages/dashboard/analysis/index.vue'),
+      meta: {
+        icon: 'mdi:monitor-dashboard',
+        title: 'routes.dashboard.analysis',
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: () => import('@/pages/dashboard/workbench/index.vue'),
+      meta: {
+        title: 'routes.dashboard.workbench',
+      },
+    },
+  ],
+}
+
+export default dashboard
diff --git a/apps/grid-admin/src/router/routes/modules/demo/demo.ts b/apps/grid-admin/src/router/routes/modules/demo/demo.ts
new file mode 100644
index 00000000..4dee29aa
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/demo/demo.ts
@@ -0,0 +1,57 @@
+import {LAYOUT} from '../../basic'
+
+const dashboard: RouteRecordItem = {
+  path: '/demo',
+  name: 'Demo',
+  component: LAYOUT,
+  redirect: '/dashboard/form',
+  meta: {
+    orderNo: 2,
+    icon: 'line-md:clipboard-list-twotone',
+    title: 'routes.demo.demo',
+  },
+  children: [
+    {
+      path: 'table',
+      name: 'Table',
+      redirect: '/demo/form/basic',
+      meta: {
+        title: 'routes.demo.table.table',
+      },
+      children: [{
+        path: 'useTable',
+        name: 'UseTableDemo',
+        component: () => import('@/pages/demo/table/BasicTable.vue'),
+        meta: {
+          title: 'routes.demo.table.basic',
+        },
+      }]
+    },
+    {
+      path: 'form',
+      name: 'Form',
+      component: () => import('@/pages/demo/Form.vue'),
+      meta: {
+        title: 'routes.demo.form',
+      },
+    },
+    {
+      path: 'card',
+      name: 'Card',
+      component: () => import('@/pages/demo/Card.vue'),
+      meta: {
+        title: 'routes.demo.card',
+      },
+    },
+    {
+      path: 'draggable',
+      name: 'Draggable',
+      component: () => import('@/pages/demo/Draggable.vue'),
+      meta: {
+        title: '拖拽',
+      },
+    },
+  ],
+}
+
+export default dashboard
diff --git a/apps/grid-admin/src/router/routes/modules/demo/editor.ts b/apps/grid-admin/src/router/routes/modules/demo/editor.ts
new file mode 100644
index 00000000..72955692
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/demo/editor.ts
@@ -0,0 +1,24 @@
+import { LAYOUT } from '@/router/routes'
+
+const Editor: RouteRecordItem = {
+  path: '/editor',
+  name: 'Editor',
+  component: LAYOUT,
+  meta: {
+    orderNo: 3,
+    title: '编辑器',
+    icon: 'openmoji:code-editor'
+  },
+  children: [
+    {
+      path: 'monaco-editor',
+      name: 'monaco-editor',
+      component: () => import('@/pages/demo/editor/monaco-editor.vue'),
+      meta: {
+        title: 'monaco-editor',
+      },
+    },
+  ],
+}
+
+export default Editor
diff --git a/apps/grid-admin/src/router/routes/modules/demo/page.ts b/apps/grid-admin/src/router/routes/modules/demo/page.ts
new file mode 100644
index 00000000..2c7099b2
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/demo/page.ts
@@ -0,0 +1,13 @@
+const Page: RouteRecordItem = {
+  path: '/pageTest',
+  name: 'PageTest',
+  component: () => import('@/pages/demo/page/index.vue'),
+  meta: {
+    orderNo: 4,
+    title: '非框架页面',
+    icon: 'tabler:frame-off',
+    hideTab: true
+  },
+}
+
+export default Page
diff --git a/apps/grid-admin/src/setting/design.ts b/apps/grid-admin/src/setting/design.ts
new file mode 100644
index 00000000..6ec88ce9
--- /dev/null
+++ b/apps/grid-admin/src/setting/design.ts
@@ -0,0 +1,23 @@
+import {
+  ThemeEnum,
+  SIDE_BAR_BG_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  APP_PRESET_COLOR_LIST
+} from '@vben/constants'
+
+
+export const namespace = 'vben'
+
+export const primaryColor = '#0960bd'
+
+export const darkMode = ThemeEnum.LIGHT
+
+
+export {
+  // app theme preset color
+  SIDE_BAR_BG_COLOR_LIST,
+  // header preset color
+  HEADER_PRESET_BG_COLOR_LIST,
+  // sider preset color
+  APP_PRESET_COLOR_LIST
+}
diff --git a/apps/grid-admin/src/setting/index.ts b/apps/grid-admin/src/setting/index.ts
new file mode 100644
index 00000000..0632d759
--- /dev/null
+++ b/apps/grid-admin/src/setting/index.ts
@@ -0,0 +1,2 @@
+export * from './design'
+export * from './project'
diff --git a/apps/grid-admin/src/setting/project.ts b/apps/grid-admin/src/setting/project.ts
new file mode 100644
index 00000000..b0958a52
--- /dev/null
+++ b/apps/grid-admin/src/setting/project.ts
@@ -0,0 +1,185 @@
+import { ProjectConfig } from '@vben/types'
+import {
+  CacheTypeEnum,
+  ContentLayoutEnum,
+  MenuModeEnum,
+  MenuTypeEnum,
+  MixSidebarTriggerEnum,
+  PermissionModeEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  ThemeEnum,
+  TriggerEnum,
+  RouterTransitionEnum,
+} from '@vben/constants'
+
+import {
+  SIDE_BAR_BG_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  primaryColor,
+} from './design'
+
+// ! You need to clear the browser cache after the change
+export const projectSetting: ProjectConfig = {
+  // Whether to show the configuration button
+  showSettingButton: true,
+
+  // Whether to show the theme switch button
+  showDarkModeToggle: true,
+
+  // `Settings` button position
+  settingButtonPosition: SettingButtonPositionEnum.AUTO,
+
+  // Permission mode
+  permissionMode: PermissionModeEnum.ROUTE_MAPPING,
+
+  // Permission-related cache is stored in sessionStorage or localStorage
+  permissionCacheType: CacheTypeEnum.LOCAL,
+
+  // Session timeout processing
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+
+  // color
+  themeColor: primaryColor,
+
+  // Website gray mode, open for possible mourning dates
+  grayMode: false,
+
+  // Color Weakness Mode
+  colorWeak: false,
+
+  // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
+  fullContent: false,
+
+  // content mode
+  contentMode: ContentLayoutEnum.FULL,
+
+  // Whether to display the logo
+  showLogo: true,
+
+  // Whether to show footer
+  showFooter: false,
+
+  // Header configuration
+  headerSetting: {
+    // header bg color
+    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+    // Fixed at the top
+    fixed: true,
+    // Whether to show top
+    show: true,
+    // theme
+    theme: ThemeEnum.LIGHT,
+    // Whether to enable the lock screen function
+    useLockPage: true,
+    // Whether to show the full screen button
+    showFullScreen: true,
+    // Whether to show the document button
+    showDoc: true,
+    // Whether to show the notification button
+    showNotice: true,
+    // Whether to display the menu search
+    showSearch: true,
+    showLocalePicker: true,
+  },
+
+  // Menu configuration
+  menuSetting: {
+    // sidebar menu bg color
+    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+    //  Whether to fix the left menu
+    fixed: true,
+    // Menu collapse
+    collapsed: false,
+    // Whether to display the menu name when folding the menu
+    collapsedShowTitle: false,
+    // Whether it can be dragged
+    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
+    canDrag: false,
+    // Whether to show no dom
+    show: true,
+    // Whether to show dom
+    hidden: false,
+    // Menu width
+    menuWidth: 210,
+    // Menu mode
+    mode: MenuModeEnum.INLINE,
+    // Menu type
+    type: MenuTypeEnum.SIDEBAR,
+    // Menu theme
+    theme: ThemeEnum.DARK,
+    // Split menu
+    split: false,
+    // Top menu layout
+    topMenuAlign: 'center',
+    // Fold trigger position
+    trigger: TriggerEnum.HEADER,
+    // Turn on accordion mode, only show a menu
+    accordion: true,
+    // Switch page to close menu
+    closeMixSidebarOnChange: false,
+    // Module opening method ‘click’ |'hover'
+    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+    // Fixed expanded menu
+    mixSideFixed: false,
+  },
+  // Transition Setting
+  transitionSetting: {
+    //  Whether to open the page switching animation
+    // The disabled state will also disable pageLoading
+    enable: true,
+
+    // Route basic switching animation
+    basicTransition: RouterTransitionEnum.FADE_SIDE,
+
+    // Whether to open page switching loading
+    // Only open when enable=true
+    openPageLoading: true,
+
+    // Whether to open the top progress bar
+    openNProgress: false,
+  },
+
+  // Multi-label
+  multiTabsSetting: {
+    cache: false,
+    // Turn on
+    show: true,
+    // Is it possible to drag and drop sorting tabs
+    canDrag: true,
+    // Turn on quick actions
+    showQuick: true,
+    // Whether to show the refresh button
+    showRedo: true,
+    // Whether to show the collapse button
+    showFold: true,
+  },
+
+  // Whether to open the top progress bar
+  openNProgress: false,
+
+  // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
+  openKeepAlive: true,
+
+  // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
+  lockTime: 0,
+
+  // Whether to show breadcrumbs
+  showBreadCrumb: true,
+
+  // Whether to show the breadcrumb icon
+  showBreadCrumbIcon: true,
+
+  // Whether to open back to top
+  useOpenBackTop: true,
+
+  //  Is it possible to embed iframe pages
+  canEmbedIFramePage: true,
+
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: true,
+
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
+  removeAllHttpPending: false,
+}
diff --git a/apps/grid-admin/src/store/auth.ts b/apps/grid-admin/src/store/auth.ts
new file mode 100644
index 00000000..447126cd
--- /dev/null
+++ b/apps/grid-admin/src/store/auth.ts
@@ -0,0 +1,210 @@
+import { defineStore } from 'pinia'
+import { asyncRoutes, PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
+import { filterTree } from '@vben/utils'
+import { Menu } from '@vben/types'
+import { useConfigStoreWithOut } from './config'
+import { useUserStore } from './user'
+import { getPermCode } from '@/apis/auth'
+import { toRaw } from 'vue'
+import { projectSetting } from '@/setting'
+import { PermissionModeEnum, PageEnum } from '@vben/constants'
+import {
+  flatMultiLevelRoutes,
+  transformObjToRoute,
+  transformRouteToMenu,
+} from '@/router'
+import { getMenuList } from '@/apis/sys'
+
+interface AuthState {
+  // Permission code list
+  permCodeList: string[] | number[]
+  // Whether the route has been dynamically added
+  isDynamicAddedRoute: boolean
+  // To trigger a menu update
+  lastBuildMenuTime: number
+  // Backstage menu list
+  backMenuList: Menu[]
+  frontMenuList: Menu[]
+}
+
+export const useAuthStore = defineStore({
+  id: 'app-auth-store',
+  state: (): AuthState => ({
+    permCodeList: [],
+    // Whether the route has been dynamically added
+    isDynamicAddedRoute: false,
+    // To trigger a menu update
+    lastBuildMenuTime: 0,
+    // Backstage menu list
+    backMenuList: [],
+    // menu List
+    frontMenuList: [],
+  }),
+  getters: {
+    getPermCodeList(): string[] | number[] {
+      return this.permCodeList
+    },
+    getBackMenuList(): Menu[] {
+      return this.backMenuList
+    },
+    getFrontMenuList(): Menu[] {
+      return this.frontMenuList
+    },
+    getLastBuildMenuTime(): number {
+      return this.lastBuildMenuTime
+    },
+    getIsDynamicAddedRoute(): boolean {
+      return this.isDynamicAddedRoute
+    },
+  },
+  actions: {
+    setPermCodeList(codeList: string[]) {
+      this.permCodeList = codeList
+    },
+
+    setBackMenuList(list: Menu[]) {
+      this.backMenuList = list
+      list?.length > 0 && this.setLastBuildMenuTime()
+    },
+
+    setFrontMenuList(list: Menu[]) {
+      this.frontMenuList = list
+    },
+
+    setLastBuildMenuTime() {
+      this.lastBuildMenuTime = new Date().getTime()
+    },
+
+    setDynamicAddedRoute(added: boolean) {
+      this.isDynamicAddedRoute = added
+    },
+    resetState(): void {
+      this.isDynamicAddedRoute = false
+      this.permCodeList = []
+      this.backMenuList = []
+      this.lastBuildMenuTime = 0
+    },
+    async changePermissionCode() {
+      const codeList = await getPermCode()
+      this.setPermCodeList(codeList)
+    },
+    async buildRoutesAction(): Promise<RouteRecordItem[]> {
+      // const { t } = useI18n()
+      const userStore = useUserStore()
+      const configStore = useConfigStoreWithOut()
+
+      let routes: RouteRecordItem[] = []
+      const roleList = toRaw(userStore.getRoles) || []
+      const { permissionMode = projectSetting.permissionMode } =
+        configStore.getProjectConfig
+
+      const routeFilter = (route: RouteRecordItem) => {
+        const { meta } = route
+        const { roles } = meta || {}
+        if (!roles) return true
+        return roleList.some((role) => roles.includes(role))
+      }
+
+      const routeRemoveIgnoreFilter = (route: RouteRecordItem) => {
+        const { meta } = route
+        const { ignoreRoute } = meta || {}
+        return !ignoreRoute
+      }
+
+      /**
+       * @description 根据设置的首页path，修正routes中的affix标记（固定首页）
+       * */
+      const patchHomeAffix = (routes: RouteRecordItem[]) => {
+        if (!routes || routes.length === 0) return
+        let homePath: string =
+          userStore.getUserInfo?.homePath || PageEnum.BASE_HOME
+        function patcher(routes: RouteRecordItem[], parentPath = '') {
+          if (parentPath) parentPath = parentPath + '/'
+          routes.forEach((route: RouteRecordItem) => {
+            const { path, children, redirect } = route
+            const currentPath = path.startsWith('/') ? path : parentPath + path
+            if (currentPath === homePath) {
+              if (redirect) {
+                homePath = route.redirect! as string
+              } else {
+                route.meta = Object.assign({}, route.meta, { affix: true })
+                throw new Error('end')
+              }
+            }
+            children && children.length > 0 && patcher(children, currentPath)
+          })
+        }
+        try {
+          patcher(routes)
+        } catch (e) {
+          // 已处理完毕跳出循环
+        }
+        return
+      }
+
+      switch (permissionMode) {
+        case PermissionModeEnum.ROLE:
+          routes = filterTree(asyncRoutes, routeFilter)
+          routes = routes.filter(routeFilter)
+          // Convert multi-level routing to level 2 routing
+          routes = flatMultiLevelRoutes(routes)
+          break
+
+        case PermissionModeEnum.ROUTE_MAPPING:
+          routes = filterTree(asyncRoutes, routeFilter)
+          routes = routes.filter(routeFilter)
+          const menuList = transformRouteToMenu(routes, true)
+          routes = filterTree(routes, routeRemoveIgnoreFilter)
+          routes = routes.filter(routeRemoveIgnoreFilter)
+          menuList.sort((a, b) => {
+            return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0)
+          })
+
+          this.setFrontMenuList(menuList as Menu[])
+
+          // Convert multi-level routing to level 2 routing
+          routes = flatMultiLevelRoutes(routes)
+          break
+
+        //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
+        case PermissionModeEnum.BACK:
+          // const { createMessage } = useMessage()
+
+          // createMessage.loading(t('sys.app.menuLoading'))
+
+          // !Simulate to obtain permission codes from the background,
+          // this function may only need to be executed once, and the actual project can be put at the right time by itself
+          let routeList: RouteRecordItem[] = []
+          try {
+            this.changePermissionCode()
+            routeList = (await getMenuList()) as RouteRecordItem[]
+          } catch (error) {
+            console.error(error)
+          }
+
+          // Dynamically introduce components
+          routeList = transformObjToRoute(routeList)
+
+          //  Background routing to menu structure
+          const backMenuList = transformRouteToMenu(routeList)
+          this.setBackMenuList(backMenuList as Menu[])
+
+          // remove meta.ignoreRoute item
+          routeList = filterTree(routeList, routeRemoveIgnoreFilter)
+          routeList = routeList.filter(routeRemoveIgnoreFilter)
+
+          routeList = flatMultiLevelRoutes(routeList)
+          routes = [PAGE_NOT_FOUND_ROUTE, ...routeList]
+          break
+      }
+
+      patchHomeAffix(routes)
+      return routes
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useAuthStoreWithout() {
+  return useAuthStore()
+}
diff --git a/apps/grid-admin/src/store/config.ts b/apps/grid-admin/src/store/config.ts
new file mode 100644
index 00000000..c6d54ae0
--- /dev/null
+++ b/apps/grid-admin/src/store/config.ts
@@ -0,0 +1,87 @@
+import {
+  BeforeMiniState,
+  HeaderSetting,
+  MenuSetting,
+  MultiTabsSetting,
+  ProjectConfig,
+  TransitionSetting,
+} from '@vben/types'
+import { defineStore } from 'pinia'
+import { deepMerge } from '@vben/utils'
+import { APP_DARK_MODE_KEY_, ThemeEnum } from '@vben/constants'
+import { darkMode, projectSetting } from '@/setting'
+
+export interface ConfigStoreState {
+  darkMode?: ThemeEnum
+  // Page loading status
+  pageLoading: boolean
+  // project config
+  projectConfig: ProjectConfig | null
+  // When the window shrinks, remember some states, and restore these states when the window is restored
+  beforeMiniInfo: BeforeMiniState
+}
+
+export const useConfigStore = defineStore({
+  id: 'app-config-store',
+  persist: {
+    paths: ['darkMode', 'projectConfig'],
+  },
+  state: (): ConfigStoreState => ({
+    darkMode: undefined,
+    pageLoading: false,
+    projectConfig: {} as any,
+    beforeMiniInfo: {},
+  }),
+  getters: {
+    getDarkMode(): ThemeEnum {
+      return (
+        this.darkMode ||
+        (localStorage.getItem(APP_DARK_MODE_KEY_) as ThemeEnum) ||
+        darkMode
+      )
+    },
+    getBeforeMiniInfo(): BeforeMiniState {
+      return this.beforeMiniInfo
+    },
+    getProjectConfig(): ProjectConfig {
+      return this.projectConfig || ({} as ProjectConfig)
+    },
+    getHeaderSetting(): HeaderSetting {
+      return this.getProjectConfig.headerSetting
+    },
+    getMenuSetting(): MenuSetting {
+      return this.getProjectConfig.menuSetting
+    },
+    getMultiTabsSetting(): MultiTabsSetting {
+      return this.getProjectConfig.multiTabsSetting
+    },
+    getPageLoading(): boolean {
+      return this.pageLoading
+    },
+    getTransitionSetting(): TransitionSetting {
+      return this.getProjectConfig.transitionSetting
+    },
+  },
+  actions: {
+    setBeforeMiniInfo(state: BeforeMiniState): void {
+      this.beforeMiniInfo = state
+    },
+    setProjectConfig(config: DeepPartial<ProjectConfig>): void {
+      this.projectConfig = deepMerge(this.projectConfig || {}, config)
+    },
+    setDarkMode(mode: ThemeEnum): void {
+      this.darkMode = mode
+      localStorage.setItem(APP_DARK_MODE_KEY_, mode)
+    },
+    async setPageLoadingAction(loading: boolean): Promise<void> {
+      console.log(loading)
+    },
+    resetProjectConfig() {
+      this.setProjectConfig(projectSetting)
+    },
+  },
+})
+
+export function useConfigStoreWithOut() {
+  return useConfigStore()
+}
diff --git a/apps/grid-admin/src/store/lock.ts b/apps/grid-admin/src/store/lock.ts
new file mode 100644
index 00000000..6296215a
--- /dev/null
+++ b/apps/grid-admin/src/store/lock.ts
@@ -0,0 +1,55 @@
+import type { LockInfo } from '@vben/types'
+import { defineStore } from 'pinia'
+import { useUserStore } from '@/store/user'
+
+interface LockState {
+  lockInfo: Nullable<LockInfo>
+}
+
+export const useLockStore = defineStore({
+  id: 'app-lock',
+  persist: {
+    paths: ['lockInfo'],
+  },
+  state: (): LockState => ({
+    lockInfo: {},
+  }),
+  getters: {
+    getLockInfo(): Nullable<LockInfo> {
+      return this.lockInfo
+    },
+  },
+  actions: {
+    setLockInfo(info: LockInfo) {
+      this.lockInfo = Object.assign({}, this.lockInfo, info)
+    },
+    resetLockInfo() {
+      this.lockInfo = null
+    },
+    async unLock(password?: string) {
+      const userStore = useUserStore()
+      if (this.lockInfo?.pwd === password) {
+        this.resetLockInfo()
+        return true
+      }
+      const tryLogin = async () => {
+        try {
+          const username = userStore.getUserInfo?.username ?? ''
+          const res = await userStore.login({
+            username,
+            password: password!,
+            goHome: false,
+            mode: 'none',
+          })
+          if (res) {
+            this.resetLockInfo()
+          }
+          return res
+        } catch (error) {
+          return false
+        }
+      }
+      return await tryLogin()
+    },
+  },
+})
diff --git a/apps/grid-admin/src/store/modules/app.ts b/apps/grid-admin/src/store/modules/app.ts
new file mode 100644
index 00000000..6b1afc8c
--- /dev/null
+++ b/apps/grid-admin/src/store/modules/app.ts
@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia'
+// import { pinia } from '@/pinia'
+import { resetRouter } from '@/router'
+
+interface AppState {
+  pageLoading: boolean
+}
+let timeId: TimeoutHandle
+export const useAppStore = defineStore({
+  id: 'app',
+  state: (): AppState => ({
+    pageLoading: false,
+  }),
+  getters: {
+    getPageLoading(): boolean {
+      return this.pageLoading
+    },
+  },
+  actions: {
+    setPageLoading(loading: boolean): void {
+      this.pageLoading = loading
+    },
+    async resetAllState() {
+      resetRouter()
+      // Persistent.clearAll()
+    },
+    async setPageLoadingAction(loading: boolean): Promise<void> {
+      if (loading) {
+        clearTimeout(timeId)
+        // Prevent flicker
+        timeId = setTimeout(() => {
+          this.setPageLoading(loading)
+        }, 50)
+      } else {
+        this.setPageLoading(loading)
+        clearTimeout(timeId)
+      }
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useAppStoreWithOut() {
+  return useAppStore()
+}
diff --git a/apps/grid-admin/src/store/multipleTab.ts b/apps/grid-admin/src/store/multipleTab.ts
new file mode 100644
index 00000000..fd896678
--- /dev/null
+++ b/apps/grid-admin/src/store/multipleTab.ts
@@ -0,0 +1,387 @@
+import type {
+  RouteLocationNormalized,
+  RouteLocationRaw,
+  Router,
+} from 'vue-router'
+import { toRaw, unref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { useGo, useRedo } from '@vben/hooks'
+// import { Persistent } from '/@/utils/cache/persistent';
+
+import { PageEnum } from '@vben/constants'
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '@/router/routes/basic'
+import { getRawRoute, RemovableRef } from '@vben/utils'
+import { useUserStore } from '@/store/user'
+// import { useRouter, useRoute } from 'vue-router'
+// import { router } from '@/router'
+// import {debug} from "util";
+//
+// import projectSetting from '/@/settings/projectSetting';
+// import { useUserStore } from '/@/store/user';
+// useUserStore
+export interface MultipleTabState {
+  cacheTabList: Set<string>
+  tabList: RouteLocationNormalized[] | RemovableRef<RouteLocationNormalized[]>
+  lastDragEndIndex: number
+}
+
+function handleGotoPage(router: Router) {
+  const go = useGo(router)
+  go(unref(router.currentRoute).path, true)
+}
+
+const getToTarget = (tabItem: RouteLocationNormalized) => {
+  const { params, path, query } = tabItem
+  return {
+    params: params || {},
+    path,
+    query: query || {},
+  }
+}
+// const TabsStorage = useLocalStorage('MULTIPLE_TABS_KEY', [])
+// const cacheTab = true
+// const cacheTab = projectSetting.multiTabsSetting.cache
+
+export const useMultipleTabStore = defineStore({
+  id: 'app-multiple-tab',
+  persist: {
+    paths: ['tabList'],
+  },
+  state: (): MultipleTabState => ({
+    // Tabs that need to be cached
+    cacheTabList: new Set(),
+    // multiple tab list
+    tabList: [],
+    // Index of the last moved tab
+    lastDragEndIndex: 0,
+  }),
+  getters: {
+    getTabList(): RouteLocationNormalized[] {
+      return this.tabList
+    },
+    getCachedTabList(): string[] {
+      return Array.from(this.cacheTabList)
+    },
+    getLastDragEndIndex(): number {
+      return this.lastDragEndIndex
+    },
+  },
+  actions: {
+    /**
+     * Update the cache according to the currently opened tabs
+     */
+    async updateCacheTab() {
+      const cacheMap: Set<string> = new Set()
+
+      for (const tab of this.tabList) {
+        const item = getRawRoute(tab)
+        // Ignore the cache
+        const needCache = !item.meta?.ignoreKeepAlive
+        if (!needCache) {
+          continue
+        }
+        const name = item.name as string
+        cacheMap.add(name)
+      }
+      this.cacheTabList = cacheMap
+    },
+
+    /**
+     * Refresh tabs
+     */
+    async refreshPage(router: Router) {
+      const { currentRoute } = router
+      const route = unref(currentRoute)
+      const name = route.name
+
+      const findTab = this.getCachedTabList.find((item) => item === name)
+      if (findTab) {
+        this.cacheTabList.delete(findTab)
+      }
+      const redo = useRedo(router)
+      await redo()
+    },
+    clearCacheTabs(): void {
+      this.cacheTabList = new Set()
+    },
+    resetState(): void {
+      this.tabList = []
+      this.clearCacheTabs()
+    },
+    goToPage(router: Router) {
+      const go = useGo(router)
+      const len = this.tabList.length
+      const { path } = unref(router.currentRoute)
+
+      let toPath: PageEnum | string = PageEnum.BASE_HOME
+
+      if (len > 0) {
+        const page = this.tabList[len - 1]
+        const p = page.fullPath || page.path
+        if (p) {
+          toPath = p
+        }
+      }
+      // Jump to the current page and report an error
+      path !== toPath && go(toPath as PageEnum, true)
+    },
+    async checkTab(route: RouteLocationNormalized) {
+      // await router.isReady()
+
+      const { path, name, meta } = getRawRoute(route)
+      // 404  The page does not need to add a tab
+      if (
+        [PageEnum.ERROR_PAGE, PageEnum.BASE_LOGIN, PageEnum.BASE_LOCK].includes(
+          path as PageEnum,
+        ) ||
+        meta?.hideTab ||
+        !name ||
+        [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(
+          name as string,
+        )
+      ) {
+        return
+      }
+      await this.addTab(route)
+    },
+    async addTab(route: RouteLocationNormalized) {
+      const { path, fullPath, params, query, meta } = getRawRoute(route)
+
+      let updateIndex = -1
+      // Existing pages, do not add tabs repeatedly
+      const tabHasExits = this.tabList.some((tab, index) => {
+        updateIndex = index
+        return (tab.fullPath || tab.path) === (fullPath || path)
+      })
+      // If the tab already exists, perform the update operation
+      if (tabHasExits) {
+        const curTab = toRaw(this.tabList)[updateIndex]
+        if (!curTab) {
+          return
+        }
+        curTab.params = params || curTab.params
+        curTab.query = query || curTab.query
+        curTab.fullPath = fullPath || curTab.fullPath
+        this.tabList.splice(updateIndex, 1, curTab)
+      } else {
+        // Add tab
+        // 获取动态路由打开数，超过 0 即代表需要控制打开数
+        const dynamicLevel = meta?.dynamicLevel ?? -1
+        if (dynamicLevel > 0) {
+          // 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
+          // 首先获取到真实的路由，使用配置方式减少计算开销.
+          // const realName: string = path.match(/(\S*)\//)![1];
+          const realPath = meta?.realPath ?? ''
+          // 获取到已经打开的动态路由数, 判断是否大于某一个值
+          if (
+            this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath)
+              .length >= dynamicLevel
+          ) {
+            // 关闭第一个
+            const index = this.tabList.findIndex(
+              (item) => item.meta.realPath === realPath,
+            )
+            index !== -1 && this.tabList.splice(index, 1)
+          }
+        }
+        this.tabList.push(route)
+      }
+      await this.updateCacheTab()
+      // cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList)
+    },
+
+    async closeTab(tab: RouteLocationNormalized, router: Router) {
+      const close = (route: RouteLocationNormalized) => {
+        const { fullPath, meta: { affix } = {} } = route
+        if (affix) {
+          return
+        }
+        const index = this.tabList.findIndex(
+          (item) => item.fullPath === fullPath,
+        )
+        index !== -1 && this.tabList.splice(index, 1)
+      }
+
+      const { currentRoute, replace } = router
+
+      const { path } = unref(currentRoute)
+      if (path !== tab.path) {
+        // Closed is not the activation tab
+        close(tab)
+        return
+      }
+
+      // Closed is activated atb
+      let toTarget: RouteLocationRaw = {}
+
+      const index = this.tabList.findIndex((item) => item.path === path)
+
+      // If the current is the leftmost tab
+      if (index === 0) {
+        // There is only one tab, then jump to the homepage, otherwise jump to the right tab
+        if (this.tabList.length === 1) {
+          const userStore = useUserStore()
+          toTarget = userStore.getUserInfo?.homePath || PageEnum.BASE_HOME
+        } else {
+          //  Jump to the right tab
+          const page = this.tabList[index + 1]
+          toTarget = getToTarget(page)
+        }
+      } else {
+        // Close the current tab
+        const page = this.tabList[index - 1]
+        toTarget = getToTarget(page)
+      }
+      close(currentRoute.value)
+      await replace(toTarget)
+    },
+
+    // Close according to key
+    async closeTabByKey(key: string, router: Router) {
+      const index = this.tabList.findIndex(
+        (item) => (item.fullPath || item.path) === key,
+      )
+      if (index !== -1) {
+        await this.closeTab(this.tabList[index], router)
+        const { currentRoute, replace } = router
+        // 检查当前路由是否存在于tabList中
+        const isActivated = this.tabList.findIndex((item) => {
+          return item.fullPath === currentRoute.value.fullPath
+        })
+        // 如果当前路由不存在于TabList中，尝试切换到其它路由
+        if (isActivated === -1) {
+          let pageIndex
+          if (index > 0) {
+            pageIndex = index - 1
+          } else if (index < this.tabList.length - 1) {
+            pageIndex = index + 1
+          } else {
+            pageIndex = -1
+          }
+          if (pageIndex >= 0) {
+            const page = this.tabList[index - 1]
+            const toTarget = getToTarget(page)
+            await replace(toTarget)
+          }
+        }
+      }
+    },
+
+    // Sort the tabs
+    async sortTabs(oldIndex: number, newIndex: number) {
+      const currentTab = this.tabList[oldIndex]
+      this.tabList.splice(oldIndex, 1)
+      this.tabList.splice(newIndex, 0, currentTab)
+      this.lastDragEndIndex = this.lastDragEndIndex + 1
+    },
+
+    // Close the tab on the right and jump
+    async closeLeftTabs(route: RouteLocationNormalized, router: Router) {
+      const index = this.tabList.findIndex((item) => item.path === route.path)
+
+      if (index > 0) {
+        const leftTabs = this.tabList.slice(0, index)
+        const pathList: string[] = []
+        for (const item of leftTabs) {
+          const affix = item?.meta?.affix ?? false
+          if (!affix) {
+            pathList.push(item.fullPath)
+          }
+        }
+        this.bulkCloseTabs(pathList)
+      }
+      this.updateCacheTab()
+      handleGotoPage(router)
+    },
+
+    // Close the tab on the left and jump
+    async closeRightTabs(route: RouteLocationNormalized, router: Router) {
+      const index = this.tabList.findIndex(
+        (item) => item.fullPath === route.fullPath,
+      )
+
+      if (index >= 0 && index < this.tabList.length - 1) {
+        const rightTabs = this.tabList.slice(index + 1, this.tabList.length)
+
+        const pathList: string[] = []
+        for (const item of rightTabs) {
+          const affix = item?.meta?.affix ?? false
+          if (!affix) {
+            pathList.push(item.fullPath)
+          }
+        }
+        this.bulkCloseTabs(pathList)
+      }
+      this.updateCacheTab()
+      handleGotoPage(router)
+    },
+
+    async closeAllTab(router: Router) {
+      this.tabList = this.tabList.filter((item) => item?.meta?.affix ?? false)
+      this.clearCacheTabs()
+      this.goToPage(router)
+    },
+
+    /**
+     * Close other tabs
+     */
+    async closeOtherTabs(route: RouteLocationNormalized, router: Router) {
+      const closePathList = this.tabList.map((item) => item.fullPath)
+
+      const pathList: string[] = []
+
+      for (const path of closePathList) {
+        if (path !== route.fullPath) {
+          const closeItem = this.tabList.find((item) => item.path === path)
+          if (!closeItem) {
+            continue
+          }
+          const affix = closeItem?.meta?.affix ?? false
+          if (!affix) {
+            pathList.push(closeItem.fullPath)
+          }
+        }
+      }
+      this.bulkCloseTabs(pathList)
+      this.updateCacheTab()
+      handleGotoPage(router)
+    },
+
+    /**
+     * Close tabs in bulk
+     */
+    async bulkCloseTabs(pathList: string[]) {
+      this.tabList = this.tabList.filter(
+        (item) => !pathList.includes(item.fullPath),
+      )
+    },
+
+    /**
+     * Set tab's title
+     */
+    async setTabTitle(title: string, route: RouteLocationNormalized) {
+      const findTab = this.getTabList.find((item) => item === route)
+      if (findTab) {
+        findTab.meta.title = title
+        await this.updateCacheTab()
+      }
+    },
+    /**
+     * replace tab's path
+     * **/
+    async updateTabPath(fullPath: string, route: RouteLocationNormalized) {
+      const findTab = this.getTabList.find((item) => item === route)
+      if (findTab) {
+        findTab.fullPath = fullPath
+        findTab.path = fullPath
+        await this.updateCacheTab()
+      }
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useMultipleTabWithOut() {
+  return useMultipleTabStore()
+}
diff --git a/apps/grid-admin/src/store/test.ts b/apps/grid-admin/src/store/test.ts
new file mode 100644
index 00000000..6b6e0c3b
--- /dev/null
+++ b/apps/grid-admin/src/store/test.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+
+export const useTest = defineStore({
+  id: 'use--test',
+  state: () => ({
+    test: '人孔盖福利卡',
+  }),
+  persist: true,
+})
diff --git a/apps/grid-admin/src/store/user.ts b/apps/grid-admin/src/store/user.ts
new file mode 100644
index 00000000..0c1edfee
--- /dev/null
+++ b/apps/grid-admin/src/store/user.ts
@@ -0,0 +1,166 @@
+import type { LoginParams } from '@/apis/auth'
+import { defineStore } from 'pinia'
+import { BASIC_HOME_PATH, BASIC_LOGIN_PATH, PageEnum } from '@vben/constants'
+// import { pinia } from '@/pinia'
+import { router } from '@/router'
+import { doLogoutApi, getUserInfoApi, doLoginApi } from '@/apis/auth'
+import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
+import { useAuthStoreWithout } from './auth'
+import { GetUserInfoModel } from '@/apis/sys/user'
+import { UserInfo, RoleInfo } from '@vben/types'
+import { ErrorMessageMode } from '@vben/types'
+import { isArray } from '@vben/utils'
+
+interface UserState {
+  userInfo: Nullable<UserInfo>
+  accessToken?: string
+  roles: RoleInfo[]
+  sessionTimeout?: boolean
+  lastUpdateTime: number
+}
+
+export const useUserStore = defineStore({
+  id: 'app-user-store',
+  persist: {
+    paths: ['userInfo', 'accessToken', 'roles'],
+  },
+  state: (): UserState => ({
+    userInfo: null,
+    accessToken: undefined,
+    roles: [],
+    // Whether the login expired
+    sessionTimeout: false,
+    // Last fetch time
+    lastUpdateTime: 0,
+  }),
+  getters: {
+    getUserInfo(): UserInfo | null {
+      return this.userInfo
+    },
+    getAccessToken(): string | undefined {
+      return this.accessToken
+    },
+    getRoles(): RoleInfo[] {
+      return this.roles.length > 0 ? this.roles : []
+    },
+    getSessionTimeout(): boolean {
+      return !!this.sessionTimeout
+    },
+    getLastUpdateTime(): number {
+      return this.lastUpdateTime
+    },
+  },
+  actions: {
+    setAccessToken(info: string | undefined) {
+      this.accessToken = info ? info : ''
+    },
+    setRoles(roles: RoleInfo[]) {
+      this.roles = roles
+    },
+    setUserInfo(info: UserInfo | null) {
+      this.userInfo = info
+      this.lastUpdateTime = new Date().getTime()
+    },
+    setSessionTimeout(flag: boolean) {
+      this.sessionTimeout = flag
+    },
+    resetState() {
+      this.userInfo = null
+      this.accessToken = undefined
+      this.roles = []
+      this.sessionTimeout = false
+    },
+
+    async login(
+      params: LoginParams & {
+        goHome?: boolean
+        mode?: ErrorMessageMode
+      },
+    ): Promise<UserInfo | null> {
+      try {
+        const { goHome = true, mode, ...loginParams } = params
+        const { accessToken } = await doLoginApi(loginParams, mode)
+
+        // save token
+        this.setAccessToken(accessToken)
+        if (!this.getAccessToken) {
+          return null
+        }
+        const userInfo = await this.getUserInfoAction()
+        if (goHome) {
+          await router.replace(BASIC_HOME_PATH)
+        }
+        return userInfo
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    },
+    async afterLoginAction(goHome?: boolean): Promise<GetUserInfoModel | null> {
+      if (!this.getAccessToken) {
+        return null
+      }
+      // get user info
+      const userInfo = await this.getUserInfoAction()
+
+      const sessionTimeout = this.sessionTimeout
+      if (sessionTimeout) {
+        this.setSessionTimeout(false)
+      } else {
+        const permissionStore = useAuthStoreWithout()
+        if (!permissionStore.isDynamicAddedRoute) {
+          const routes = await permissionStore.buildRoutesAction()
+          routes.forEach((route) => {
+            router.addRoute(route)
+          })
+          router.addRoute(PAGE_NOT_FOUND_ROUTE)
+          permissionStore.setDynamicAddedRoute(true)
+        }
+        goHome &&
+          (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME))
+      }
+      return userInfo
+    },
+
+    async getUserInfoAction(): Promise<UserInfo | null> {
+      if (!this.getAccessToken) {
+        return null
+      }
+
+      const userInfo = (await getUserInfoApi()) as unknown as UserInfo
+      const { roles = [] } = userInfo
+      if (isArray(roles)) {
+        const roleList = roles.map(
+          (item) => item.value,
+        ) as unknown as RoleInfo[]
+        this.setRoles(roleList)
+      } else {
+        userInfo.roles = []
+        this.setRoles([])
+      }
+      this.setUserInfo(userInfo)
+
+      return userInfo
+    },
+
+    async logout(goLogin = false) {
+      if (this.getAccessToken) {
+        try {
+          await doLogoutApi()
+        } catch (error: any) {
+          console.log('logout error:' + error.toString())
+        }
+      }
+      this.setAccessToken(undefined)
+      this.setSessionTimeout(false)
+      this.setUserInfo(null)
+      if (goLogin) {
+        router.push(BASIC_LOGIN_PATH)
+      }
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useUserStoreWithout() {
+  return useUserStore()
+}
diff --git a/apps/grid-admin/tsconfig.json b/apps/grid-admin/tsconfig.json
new file mode 100644
index 00000000..7cfe3b67
--- /dev/null
+++ b/apps/grid-admin/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "#/*": ["src/*"]
+    },
+    "lib": ["dom", "esnext"],
+    "types": [
+      "vite/client",
+      "@vben/constant",
+      "@vben/types/shims/pinia",
+      "@vben/types/shims/vue-router",
+    ]
+  },
+  "include": [
+    "src",
+    "mock",
+    "vite.config.ts",
+    "../../node_modules/.pnpm/vue@3.2.45/node_modules/vue/macros-global.d.ts"
+  ]
+}
diff --git a/apps/grid-admin/vite.config.ts b/apps/grid-admin/vite.config.ts
new file mode 100644
index 00000000..62f5a739
--- /dev/null
+++ b/apps/grid-admin/vite.config.ts
@@ -0,0 +1,7 @@
+import { createViteConfig } from '@config/vite'
+import { defineConfig, UserConfig } from 'vite'
+
+export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
+  const cfg = await createViteConfig(command, mode, process.cwd(), { preset: 'antd' })
+  return cfg
+})

From ba849786843f810d26bd4306ebba9a16eb07fadf Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Fri, 10 Feb 2023 00:05:42 +0800
Subject: [PATCH 21/22] =?UTF-8?q?feat:=20=E6=8A=BD=E7=A6=BBapps=E4=B8=8B?=
 =?UTF-8?q?=E7=9A=84hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/grid-admin/package.json                  |   1 -
 .../src/hooks/setting/useHeaderSetting.ts     | 115 ----------
 .../src/hooks/setting/useMenuSetting.ts       | 201 ------------------
 .../hooks/setting/useMultipleTabSetting.ts    |  28 ---
 .../src/hooks/setting/useRootSetting.ts       | 112 ----------
 .../src/hooks/setting/useTransitionSetting.ts |  31 ---
 apps/grid-admin/src/hooks/useRootSetting.ts   | 109 ----------
 apps/grid-admin/src/hooks/useTabs.ts          | 102 ---------
 apps/grid-admin/src/hooks/web/useDesign.ts    |  21 --
 .../src/hooks/web/useFullContent.ts           |  28 ---
 .../grid-admin/src/hooks/web/useLockScreen.ts |  88 --------
 apps/grid-admin/src/init-application.ts       |  74 +------
 .../src/layout/components/app/AppProvider.tsx |  77 ++-----
 packages/hooks/src/event/index.ts             |   2 +
 .../hooks/src}/event/use-breakpoint.ts        |   0
 .../hooks/src}/event/use-event-listener.ts    |   0
 .../hooks/src}/event/use-scroll-to.ts         |   0
 packages/hooks/src/index.ts                   |   1 +
 packages/hooks/src/web/index.ts               |   2 +
 .../hooks/src}/web/useAppContext.ts           |   2 +-
 .../hooks/src/web/useAppInject.ts             |   0
 packages/hooks/src/web/useTheme.ts            |  33 +--
 packages/vbenComponents/package.json          |   1 +
 .../vbenComponents/src/config/src/Config.vue  |  15 +-
 24 files changed, 54 insertions(+), 989 deletions(-)
 delete mode 100644 apps/grid-admin/src/hooks/setting/useHeaderSetting.ts
 delete mode 100644 apps/grid-admin/src/hooks/setting/useMenuSetting.ts
 delete mode 100644 apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts
 delete mode 100644 apps/grid-admin/src/hooks/setting/useRootSetting.ts
 delete mode 100644 apps/grid-admin/src/hooks/setting/useTransitionSetting.ts
 delete mode 100644 apps/grid-admin/src/hooks/useRootSetting.ts
 delete mode 100644 apps/grid-admin/src/hooks/useTabs.ts
 delete mode 100644 apps/grid-admin/src/hooks/web/useDesign.ts
 delete mode 100644 apps/grid-admin/src/hooks/web/useFullContent.ts
 delete mode 100644 apps/grid-admin/src/hooks/web/useLockScreen.ts
 create mode 100644 packages/hooks/src/event/index.ts
 rename {apps/grid-admin/src/hooks => packages/hooks/src}/event/use-breakpoint.ts (100%)
 rename {apps/grid-admin/src/hooks => packages/hooks/src}/event/use-event-listener.ts (100%)
 rename {apps/grid-admin/src/hooks => packages/hooks/src}/event/use-scroll-to.ts (100%)
 rename {apps/grid-admin/src/hooks => packages/hooks/src}/web/useAppContext.ts (88%)
 rename apps/grid-admin/src/hooks/web/use-app-inject.ts => packages/hooks/src/web/useAppInject.ts (100%)

diff --git a/apps/grid-admin/package.json b/apps/grid-admin/package.json
index c9f14997..9b5dfa3f 100644
--- a/apps/grid-admin/package.json
+++ b/apps/grid-admin/package.json
@@ -31,7 +31,6 @@
     "@vben/directives": "workspace:*",
     "@vben/grid-layouts": "workspace:*",
     "@vben/hooks": "workspace:*",
-    "@vben/layouts": "workspace:*",
     "@vben/locale": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
diff --git a/apps/grid-admin/src/hooks/setting/useHeaderSetting.ts b/apps/grid-admin/src/hooks/setting/useHeaderSetting.ts
deleted file mode 100644
index 3ea7120d..00000000
--- a/apps/grid-admin/src/hooks/setting/useHeaderSetting.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { HeaderSetting } from '@vben/types'
-
-import { computed, unref } from 'vue'
-
-import { useConfigStoreWithOut } from '@/store/config'
-
-import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
-import { useRootSetting } from '@/hooks/setting/useRootSetting'
-import { useFullContent } from '@/hooks/web/useFullContent'
-import { MenuModeEnum } from '@vben/constants'
-
-export function useHeaderSetting() {
-  const { getFullContent } = useFullContent()
-  const configStore = useConfigStoreWithOut()
-
-  const getShowFullHeaderRef = computed(() => {
-    return (
-      (!unref(getFullContent) &&
-        unref(getShowHeader))
-    )
-  })
-
-  const getUnFixedAndFull = computed(
-    () => !unref(getFixed) && !unref(getShowFullHeaderRef),
-  )
-
-  const getShowInsetHeaderRef = computed(() => {
-    const need = !unref(getFullContent) && unref(getShowHeader)
-    return (
-      (need && !unref(getShowMixHeaderRef)) ||
-      (need && unref(getIsTopMenu)) ||
-      (need && unref(getIsMixSidebar))
-    )
-  })
-
-  const {
-    getMenuMode,
-    getSplit,
-    getShowHeaderTrigger,
-    getIsSidebarType,
-    getIsMixSidebar,
-    getIsTopMenu,
-  } = useMenuSetting()
-  const { getShowBreadCrumb, getShowLogo } = useRootSetting()
-
-  const getShowMixHeaderRef = computed(
-    () => !unref(getIsSidebarType) && unref(getShowHeader),
-  )
-
-  const getShowDoc = computed(() => configStore.getHeaderSetting.showDoc)
-
-  const getHeaderTheme = computed(() => configStore.getHeaderSetting.theme)
-
-  const getShowHeader = computed(() => configStore.getHeaderSetting.show)
-
-  const getFixed = computed(() => configStore.getHeaderSetting.fixed)
-
-  const getHeaderBgColor = computed(() => configStore.getHeaderSetting.bgColor)
-
-  const getShowSearch = computed(() => configStore.getHeaderSetting.showSearch)
-
-  const getUseLockPage = computed(() => configStore.getHeaderSetting.useLockPage)
-
-  const getShowFullScreen = computed(
-    () => configStore.getHeaderSetting.showFullScreen,
-  )
-  const getShowLocalePicker = computed(
-    () => configStore.getHeaderSetting.showLocalePicker,
-  )
-
-  const getShowNotice = computed(() => configStore.getHeaderSetting.showNotice)
-
-  const getShowBread = computed(() => {
-    return (
-      unref(getMenuMode) !== MenuModeEnum.HORIZONTAL &&
-      unref(getShowBreadCrumb) &&
-      !unref(getSplit)
-    )
-  })
-
-  const getShowHeaderLogo = computed(() => {
-    return (
-      unref(getShowLogo) && !unref(getIsSidebarType) && !unref(getIsMixSidebar)
-    )
-  })
-
-  const getShowContent = computed(() => {
-    return unref(getShowBread) || unref(getShowHeaderTrigger)
-  })
-
-  // Set header configuration
-  function setHeaderSetting(headerSetting: Partial<HeaderSetting>) {
-    configStore.setProjectConfig({ headerSetting })
-  }
-  return {
-    setHeaderSetting,
-    getShowDoc,
-    getShowSearch,
-    getHeaderTheme,
-    getUseLockPage,
-    getShowFullScreen,
-    getShowNotice,
-    getShowBread,
-    getShowContent,
-    getShowHeaderLogo,
-    getShowHeader,
-    getFixed,
-    getShowMixHeaderRef,
-    getShowFullHeaderRef,
-    getShowInsetHeaderRef,
-    getUnFixedAndFull,
-    getHeaderBgColor,
-    getShowLocalePicker,
-  }
-}
diff --git a/apps/grid-admin/src/hooks/setting/useMenuSetting.ts b/apps/grid-admin/src/hooks/setting/useMenuSetting.ts
deleted file mode 100644
index c39a5346..00000000
--- a/apps/grid-admin/src/hooks/setting/useMenuSetting.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import type { MenuSetting } from '@vben/types'
-
-import { computed, unref, ref } from 'vue'
-
-import { useConfigStoreWithOut } from '@/store/config'
-
-import {
-  SIDE_BAR_MINI_WIDTH,
-  SIDE_BAR_SHOW_TIT_MINI_WIDTH,
-  MenuModeEnum,
-  MenuTypeEnum,
-  TriggerEnum,
-} from '@vben/constants'
-import { useFullContent } from '@/hooks/web/useFullContent'
-import {useRootSetting} from "@/hooks/setting/useRootSetting";
-
-const mixSideHasChildren = ref(false)
-
-export function useMenuSetting() {
-  const { getFullContent: fullContent } = useFullContent()
-  const configStore = useConfigStoreWithOut()
-  const { getShowLogo } = useRootSetting()
-  const getShowSidebar = computed(() => {
-    return (
-      unref(getSplit) ||
-      (unref(getShowMenu) &&
-        unref(getMenuMode) !== MenuModeEnum.HORIZONTAL &&
-        !unref(fullContent))
-    )
-  })
-
-  const getCollapsed = computed(() => configStore.getMenuSetting.collapsed)
-
-  const getMenuType = computed(() => configStore.getMenuSetting.type)
-
-  const getMenuMode = computed(() => configStore.getMenuSetting.mode)
-
-  const getMenuFixed = computed(() => configStore.getMenuSetting.fixed)
-
-  const getShowMenu = computed(() => configStore.getMenuSetting.show)
-
-  const getMenuHidden = computed(() => configStore.getMenuSetting.hidden)
-
-  const getMenuWidth = computed(() => configStore.getMenuSetting.menuWidth)
-
-  const getTrigger = computed(() => configStore.getMenuSetting.trigger)
-
-  const getMenuTheme = computed(() => configStore.getMenuSetting.theme)
-
-  const getSplit = computed(() => configStore.getMenuSetting.split)
-
-  const getMenuBgColor = computed(() => configStore.getMenuSetting.bgColor)
-
-  const getMixSideTrigger = computed(
-    () => configStore.getMenuSetting.mixSideTrigger,
-  )
-
-  const getCanDrag = computed(() => configStore.getMenuSetting.canDrag)
-
-  const getAccordion = computed(() => configStore.getMenuSetting.accordion)
-
-  const getMixSideFixed = computed(
-    () => configStore.getMenuSetting.mixSideFixed,
-  )
-
-  const getTopMenuAlign = computed(
-    () => configStore.getMenuSetting.topMenuAlign,
-  )
-
-  const getCloseMixSidebarOnChange = computed(
-    () => configStore.getMenuSetting.closeMixSidebarOnChange,
-  )
-
-  const getIsSidebarType = computed(
-    () => unref(getMenuType) === MenuTypeEnum.SIDEBAR,
-  )
-
-  const getIsTopMenu = computed(
-    () => unref(getMenuType) === MenuTypeEnum.TOP_MENU,
-  )
-
-  const getMenuShowLogo = computed(
-    ()=> unref(getShowLogo) && unref(getIsSidebarType)
-  )
-
-  const getCollapsedShowTitle = computed(
-    () => configStore.getMenuSetting.collapsedShowTitle,
-  )
-
-  const getShowTopMenu = computed(() => {
-    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit)
-  })
-
-
-  const getShowHeaderTrigger = computed(() => {
-    if (
-      unref(getMenuType) === MenuTypeEnum.TOP_MENU ||
-      !unref(getShowMenu) ||
-      unref(getMenuHidden)
-    ) {
-      return false
-    }
-
-    return unref(getTrigger) === TriggerEnum.HEADER
-  })
-
-  const getIsHorizontal = computed(() => {
-    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL
-  })
-
-  const getIsMixSidebar = computed(() => {
-    return unref(getMenuType) === MenuTypeEnum.MIX_SIDEBAR
-  })
-
-  const getIsMixMode = computed(() => {
-    return (
-      unref(getMenuMode) === MenuModeEnum.INLINE &&
-      unref(getMenuType) === MenuTypeEnum.MIX
-    )
-  })
-
-  const getRealWidth = computed(() => {
-    if (unref(getIsMixSidebar)) {
-      return unref(getCollapsed) && !unref(getMixSideFixed)
-        ? unref(getMiniWidthNumber)
-        : unref(getMenuWidth)
-    }
-    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth)
-  })
-
-  const getMiniWidthNumber = computed(() => {
-    const { collapsedShowTitle } = configStore.getMenuSetting
-    return collapsedShowTitle
-      ? SIDE_BAR_SHOW_TIT_MINI_WIDTH
-      : SIDE_BAR_MINI_WIDTH
-  })
-
-  const getCalcContentWidth = computed(() => {
-    const width =
-      unref(getIsTopMenu) ||
-      !unref(getShowMenu) ||
-      (unref(getSplit) && unref(getMenuHidden))
-        ? 0
-        : unref(getIsMixSidebar)
-        ? (unref(getCollapsed)
-            ? SIDE_BAR_MINI_WIDTH
-            : SIDE_BAR_SHOW_TIT_MINI_WIDTH) +
-          (unref(getMixSideFixed) && unref(mixSideHasChildren)
-            ? unref(getRealWidth)
-            : 0)
-        : unref(getRealWidth)
-
-    return `calc(100% - ${unref(width)}px)`
-  })
-
-  // Set menu configuration
-  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
-    configStore.setProjectConfig({ menuSetting })
-  }
-
-  function toggleCollapsed() {
-    setMenuSetting({
-      collapsed: !unref(getCollapsed),
-    })
-  }
-  return {
-    setMenuSetting,
-    toggleCollapsed,
-    getMenuFixed,
-    getRealWidth,
-    getMenuType,
-    getMenuMode,
-    getShowMenu,
-    getCollapsed,
-    getMiniWidthNumber,
-    getCalcContentWidth,
-    getMenuWidth,
-    getTrigger,
-    getSplit,
-    getMenuTheme,
-    getCanDrag,
-    getCollapsedShowTitle,
-    getIsHorizontal,
-    getIsSidebarType,
-    getAccordion,
-    getShowTopMenu,
-    getShowHeaderTrigger,
-    getTopMenuAlign,
-    getMenuHidden,
-    getIsTopMenu,
-    getMenuBgColor,
-    getShowSidebar,
-    getIsMixMode,
-    getIsMixSidebar,
-    getCloseMixSidebarOnChange,
-    getMixSideTrigger,
-    getMixSideFixed,
-    mixSideHasChildren,
-    getMenuShowLogo
-  }
-}
diff --git a/apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts b/apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts
deleted file mode 100644
index 32a7ba7a..00000000
--- a/apps/grid-admin/src/hooks/setting/useMultipleTabSetting.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { MultiTabsSetting } from '@vben/types';
-
-import { computed } from 'vue';
-
-import { useConfigStoreWithOut } from '@/store/config';
-
-export function useMultipleTabSetting() {
-  const configStore = useConfigStoreWithOut()
-
-  const getShowMultipleTab = computed(() => configStore.getMultiTabsSetting.show);
-
-  const getShowQuick = computed(() => configStore.getMultiTabsSetting.showQuick);
-
-  const getShowRedo = computed(() => configStore.getMultiTabsSetting.showRedo);
-
-  const getShowFold = computed(() => configStore.getMultiTabsSetting.showFold);
-
-  function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
-    configStore.setProjectConfig({ multiTabsSetting });
-  }
-  return {
-    setMultipleTabSetting,
-    getShowMultipleTab,
-    getShowQuick,
-    getShowRedo,
-    getShowFold,
-  };
-}
diff --git a/apps/grid-admin/src/hooks/setting/useRootSetting.ts b/apps/grid-admin/src/hooks/setting/useRootSetting.ts
deleted file mode 100644
index e8198dcf..00000000
--- a/apps/grid-admin/src/hooks/setting/useRootSetting.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// import type { ProjectConfig } from '@/types'
-import { computed } from 'vue'
-import { useConfigStoreWithOut } from '@/store/config'
-import { useAppStoreWithOut } from '@/store/modules/app'
-import { ContentLayoutEnum } from '@vben/constants'
-
-// type RootSetting = Omit<
-//   ProjectConfig,
-//   'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'
-// >
-
-export function useRootSetting() {
-
-  const configStore = useConfigStoreWithOut()
-  const appStore = useAppStoreWithOut()
-
-  const getPageLoading = computed(() => appStore.getPageLoading)
-
-  const getOpenKeepAlive = computed(
-    () => configStore.getProjectConfig.openKeepAlive,
-  )
-
-  const getSettingButtonPosition = computed(
-    () => configStore.getProjectConfig.settingButtonPosition,
-  )
-
-  const getCanEmbedIFramePage = computed(
-    () => configStore.getProjectConfig.canEmbedIFramePage,
-  )
-
-  const getPermissionMode = computed(
-    () => configStore.getProjectConfig.permissionMode,
-  )
-
-  const getShowLogo = computed(() => configStore.getProjectConfig.showLogo)
-
-  const getContentMode = computed(() => configStore.getProjectConfig.contentMode)
-
-  const getUseOpenBackTop = computed(
-    () => configStore.getProjectConfig.useOpenBackTop,
-  )
-
-  const getShowSettingButton = computed(
-    () => configStore.getProjectConfig.showSettingButton,
-  )
-
-  const getShowFooter = computed(() => configStore.getProjectConfig.showFooter)
-
-  const getShowBreadCrumb = computed(
-    () => configStore.getProjectConfig.showBreadCrumb,
-  )
-
-  const getThemeColor = computed(() => configStore.getProjectConfig.themeColor)
-
-  const getShowBreadCrumbIcon = computed(
-    () => configStore.getProjectConfig.showBreadCrumbIcon,
-  )
-
-  const getFullContent = computed(() => configStore.getProjectConfig.fullContent)
-
-  const getColorWeak = computed(() => configStore.getProjectConfig.colorWeak)
-
-  const getGrayMode = computed(() => configStore.getProjectConfig.grayMode)
-
-  const getLockTime = computed(() => configStore.getProjectConfig.lockTime)
-
-  const getShowDarkModeToggle = computed(
-    () => configStore.getProjectConfig.showDarkModeToggle,
-  )
-
-  const getLayoutContentMode = computed(() =>
-    configStore.getProjectConfig.contentMode === ContentLayoutEnum.FULL
-      ? ContentLayoutEnum.FULL
-      : ContentLayoutEnum.FIXED,
-  )
-  // TODO 待实现
-  // const getDarkMode = computed(() => configStore.getDarkMode)
-
-  // TODO 待实现
-  // function setRootSetting(setting: Partial<RootSetting>) {
-  //   configStore.setProjectConfig(setting)
-  // }
-  // TODO 待实现
-  // function setDarkMode(mode: ThemeEnum) {
-  //   configStore.setDarkMode(mode)
-  // }
-  return {
-    // setRootSetting,
-
-    getSettingButtonPosition,
-    getFullContent,
-    getColorWeak,
-    getGrayMode,
-    getLayoutContentMode,
-    getPageLoading,
-    getOpenKeepAlive,
-    getCanEmbedIFramePage,
-    getPermissionMode,
-    getShowLogo,
-    getShowBreadCrumb,
-    getShowBreadCrumbIcon,
-    getUseOpenBackTop,
-    getShowSettingButton,
-    getShowFooter,
-    getContentMode,
-    getLockTime,
-    getThemeColor,
-    // getDarkMode,
-    // setDarkMode,
-    getShowDarkModeToggle,
-  }
-}
diff --git a/apps/grid-admin/src/hooks/setting/useTransitionSetting.ts b/apps/grid-admin/src/hooks/setting/useTransitionSetting.ts
deleted file mode 100644
index 04b45f35..00000000
--- a/apps/grid-admin/src/hooks/setting/useTransitionSetting.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { TransitionSetting } from '@vben/types';
-
-import { computed } from 'vue';
-
-import { useConfigStoreWithOut } from '@/store/config'
-
-export function useTransitionSetting() {
-  const configStore = useConfigStoreWithOut();
-
-  const getEnableTransition = computed(() => configStore.getTransitionSetting?.enable);
-
-  const getOpenNProgress = computed(() => configStore.getTransitionSetting?.openNProgress);
-
-  const getOpenPageLoading = computed((): boolean => {
-    return !!configStore.getTransitionSetting?.openPageLoading;
-  });
-
-  const getBasicTransition = computed(() => configStore.getTransitionSetting?.basicTransition);
-
-  function setTransitionSetting(transitionSetting: Partial<TransitionSetting>) {
-    configStore.setProjectConfig({ transitionSetting });
-  }
-  return {
-    setTransitionSetting,
-
-    getEnableTransition,
-    getOpenNProgress,
-    getOpenPageLoading,
-    getBasicTransition,
-  };
-}
diff --git a/apps/grid-admin/src/hooks/useRootSetting.ts b/apps/grid-admin/src/hooks/useRootSetting.ts
deleted file mode 100644
index 345a241b..00000000
--- a/apps/grid-admin/src/hooks/useRootSetting.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { ProjectConfig } from '@vben/types'
-import { computed } from 'vue'
-import { useConfigStoreWithOut } from '@/store/config'
-import { ContentLayoutEnum } from '@vben/constants'
-
-type RootSetting = Omit<
-  ProjectConfig,
-  'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'
->
-
-export function useRootSetting() {
-  const appStore = useConfigStoreWithOut()
-
-  const getPageLoading = computed(() => appStore.getPageLoading)
-
-  const getOpenKeepAlive = computed(
-    () => appStore.getProjectConfig.openKeepAlive,
-  )
-
-  const getSettingButtonPosition = computed(
-    () => appStore.getProjectConfig.settingButtonPosition,
-  )
-
-  const getCanEmbedIFramePage = computed(
-    () => appStore.getProjectConfig.canEmbedIFramePage,
-  )
-
-  const getPermissionMode = computed(
-    () => appStore.getProjectConfig.permissionMode,
-  )
-
-  const getShowLogo = computed(() => appStore.getProjectConfig.showLogo)
-
-  const getContentMode = computed(() => appStore.getProjectConfig.contentMode)
-
-  const getUseOpenBackTop = computed(
-    () => appStore.getProjectConfig.useOpenBackTop,
-  )
-
-  const getShowSettingButton = computed(
-    () => appStore.getProjectConfig.showSettingButton,
-  )
-
-  const getShowFooter = computed(() => appStore.getProjectConfig.showFooter)
-
-  const getShowBreadCrumb = computed(
-    () => appStore.getProjectConfig.showBreadCrumb,
-  )
-
-  const getThemeColor = computed(() => appStore.getProjectConfig.themeColor)
-
-  const getShowBreadCrumbIcon = computed(
-    () => appStore.getProjectConfig.showBreadCrumbIcon,
-  )
-
-  const getFullContent = computed(() => appStore.getProjectConfig.fullContent)
-
-  const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak)
-
-  const getGrayMode = computed(() => appStore.getProjectConfig.grayMode)
-
-  const getLockTime = computed(() => appStore.getProjectConfig.lockTime)
-
-  const getShowDarkModeToggle = computed(
-    () => appStore.getProjectConfig.showDarkModeToggle,
-  )
-
-  const getLayoutContentMode = computed(() =>
-    appStore.getProjectConfig.contentMode === ContentLayoutEnum.FULL
-      ? ContentLayoutEnum.FULL
-      : ContentLayoutEnum.FIXED,
-  )
-  // TODO 待实现
-  // const getDarkMode = computed(() => appStore.getDarkMode)
-
-  // TODO 待实现
-  // function setRootSetting(setting: Partial<RootSetting>) {
-  //   appStore.setProjectConfig(setting)
-  // }
-  // TODO 待实现
-  // function setDarkMode(mode: ThemeEnum) {
-  //   appStore.setDarkMode(mode)
-  // }
-  return {
-    // setRootSetting,
-
-    getSettingButtonPosition,
-    getFullContent,
-    getColorWeak,
-    getGrayMode,
-    getLayoutContentMode,
-    getPageLoading,
-    getOpenKeepAlive,
-    getCanEmbedIFramePage,
-    getPermissionMode,
-    getShowLogo,
-    getShowBreadCrumb,
-    getShowBreadCrumbIcon,
-    getUseOpenBackTop,
-    getShowSettingButton,
-    getShowFooter,
-    getContentMode,
-    getLockTime,
-    getThemeColor,
-    // getDarkMode,
-    // setDarkMode,
-    getShowDarkModeToggle,
-  }
-}
diff --git a/apps/grid-admin/src/hooks/useTabs.ts b/apps/grid-admin/src/hooks/useTabs.ts
deleted file mode 100644
index 7b289d1a..00000000
--- a/apps/grid-admin/src/hooks/useTabs.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { RouteLocationNormalized, Router } from 'vue-router'
-
-import { useRouter } from 'vue-router'
-import { unref } from 'vue'
-import { useAppStore } from '@/store/modules/app'
-import { useMultipleTabStore } from '@/store/multipleTab'
-import { TabActionEnum } from '@vben/constants'
-
-export function useTabs(_router?: Router) {
-  const appStore = useAppStore()
-
-  function canIUseTabs(): boolean {
-    const { show } = appStore.getMultiTabsSetting
-    if (!show) {
-      throw new Error(
-        'The multi-tab page is currently not open, please open it in the settings！',
-      )
-    }
-    return !!show
-  }
-
-  const tabStore = useMultipleTabStore()
-  const router = _router || useRouter()
-
-  const { currentRoute } = router
-
-  function getCurrentTab() {
-    const route = unref(currentRoute)
-
-    return tabStore.getTabList.find((item) => item.fullPath === route.fullPath)!
-  }
-
-  async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {
-    const canIUse = canIUseTabs
-    if (!canIUse) {
-      return
-    }
-    const targetTab = tab || getCurrentTab()
-    await tabStore.setTabTitle(title, targetTab)
-  }
-
-  async function updateTabPath(path: string, tab?: RouteLocationNormalized) {
-    const canIUse = canIUseTabs
-    if (!canIUse) {
-      return
-    }
-    const targetTab = tab || getCurrentTab()
-    await tabStore.updateTabPath(path, targetTab)
-  }
-
-  async function handleTabAction(
-    action: TabActionEnum,
-    tab?: RouteLocationNormalized,
-  ) {
-    const canIUse = canIUseTabs
-    if (!canIUse) {
-      return
-    }
-    const currentTab = getCurrentTab()
-    switch (action) {
-      case TabActionEnum.REFRESH_PAGE:
-        await tabStore.refreshPage(router)
-        break
-
-      case TabActionEnum.CLOSE_ALL:
-        await tabStore.closeAllTab(router)
-        break
-
-      case TabActionEnum.CLOSE_LEFT:
-        await tabStore.closeLeftTabs(currentTab, router)
-        break
-
-      case TabActionEnum.CLOSE_RIGHT:
-        await tabStore.closeRightTabs(currentTab, router)
-        break
-
-      case TabActionEnum.CLOSE_OTHER:
-        await tabStore.closeOtherTabs(currentTab, router)
-        break
-
-      case TabActionEnum.CLOSE_CURRENT:
-      case TabActionEnum.CLOSE:
-        await tabStore.closeTab(tab || currentTab, router)
-        break
-    }
-  }
-
-  return {
-    refreshPage: () => handleTabAction(TabActionEnum.REFRESH_PAGE),
-    closeAll: () => handleTabAction(TabActionEnum.CLOSE_ALL),
-    closeLeft: () => handleTabAction(TabActionEnum.CLOSE_LEFT),
-    closeRight: () => handleTabAction(TabActionEnum.CLOSE_RIGHT),
-    closeOther: () => handleTabAction(TabActionEnum.CLOSE_OTHER),
-    closeCurrent: () => handleTabAction(TabActionEnum.CLOSE_CURRENT),
-    close: (tab?: RouteLocationNormalized) =>
-      handleTabAction(TabActionEnum.CLOSE, tab),
-    setTitle: (title: string, tab?: RouteLocationNormalized) =>
-      updateTabTitle(title, tab),
-    updatePath: (fullPath: string, tab?: RouteLocationNormalized) =>
-      updateTabPath(fullPath, tab),
-  }
-}
diff --git a/apps/grid-admin/src/hooks/web/useDesign.ts b/apps/grid-admin/src/hooks/web/useDesign.ts
deleted file mode 100644
index 60113d8d..00000000
--- a/apps/grid-admin/src/hooks/web/useDesign.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useAppProviderContext } from './useAppContext'
-
-export function useDesign(scope: string) {
-  const values = useAppProviderContext()
-  // const $style = cssModule ? useCssModule() : {};
-
-  // const style: Record<string, string> = {};
-  // if (cssModule) {
-  //   Object.keys($style).forEach((key) => {
-  //     // const moduleCls = $style[key];
-  //     const k = key.replace(new RegExp(`^${values.prefixCls}-?`, 'ig'), '');
-  //     style[lowerFirst(k)] = $style[key];
-  //   });
-  // }
-  return {
-    // prefixCls: computed(() => `${values.prefixCls}-${scope}`),
-    prefixCls: `${values.prefixCls}-${scope}`,
-    prefixVar: values.prefixCls,
-    // style,
-  }
-}
diff --git a/apps/grid-admin/src/hooks/web/useFullContent.ts b/apps/grid-admin/src/hooks/web/useFullContent.ts
deleted file mode 100644
index ed5f10f5..00000000
--- a/apps/grid-admin/src/hooks/web/useFullContent.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { computed, unref } from 'vue'
-
-import { useConfigStoreWithOut } from '@/store/config'
-
-import { useRouter } from 'vue-router'
-
-/**
- * @description: Full screen display content
- */
-export const useFullContent = () => {
-  const appStore = useConfigStoreWithOut()
-  const router = useRouter()
-  const { currentRoute } = router
-
-  // Whether to display the content in full screen without displaying the menu
-  const getFullContent = computed(() => {
-    // Query parameters, the full screen is displayed when the address bar has a full parameter
-    const route = unref(currentRoute)
-    const query = route.query
-    if (query && Reflect.has(query, '__full__')) {
-      return true
-    }
-    // Return to the configuration in the configuration file
-    return appStore.getProjectConfig.fullContent
-  })
-
-  return { getFullContent }
-}
diff --git a/apps/grid-admin/src/hooks/web/useLockScreen.ts b/apps/grid-admin/src/hooks/web/useLockScreen.ts
deleted file mode 100644
index a537ed28..00000000
--- a/apps/grid-admin/src/hooks/web/useLockScreen.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { computed, onUnmounted, unref, watch, watchEffect } from 'vue'
-import { useThrottleFn } from '@vben/utils'
-
-import { useLockStore } from '@/store/lock'
-import { useConfigStore } from '@/store/config'
-import { useUserStore } from '@/store/user'
-import { useRootSetting } from '../setting/useRootSetting'
-import { BASIC_LOCK_PATH } from '@vben/constants'
-import { router } from '@/router'
-
-const LOCK_PATH = BASIC_LOCK_PATH
-
-export function useLockScreen() {
-  const { getLockTime } = useRootSetting()
-  const lockStore = useLockStore()
-  const userStore = useUserStore()
-  const configStore = useConfigStore()
-
-  let timeId: TimeoutHandle
-
-  function clear(): void {
-    window.clearTimeout(timeId)
-  }
-
-  function resetCalcLockTimeout(): void {
-    // not login
-    if (!userStore.getAccessToken) {
-      clear()
-      return
-    }
-    const lockTime = configStore.getProjectConfig.lockTime
-    if (!lockTime || lockTime < 1) {
-      clear()
-      return
-    }
-    clear()
-
-    timeId = setTimeout(() => {
-      lockPage()
-    }, lockTime * 60 * 1000)
-  }
-
-  function lockPage(): void {
-    lockStore.setLockInfo({
-      isLock: true,
-      pwd: undefined,
-    })
-  }
-
-  watchEffect((onClean) => {
-    if (userStore.getAccessToken) {
-      resetCalcLockTimeout()
-    } else {
-      clear()
-    }
-    onClean(() => {
-      clear()
-    })
-  })
-
-  watch(
-    () => lockStore.getLockInfo?.isLock,
-    (newValue) => {
-      if (newValue) {
-        router.replace({
-          path: LOCK_PATH,
-          query: { redirect: unref(router.currentRoute).path },
-        })
-      }
-    },
-    { deep: true },
-  )
-
-  onUnmounted(() => {
-    clear()
-  })
-
-  const keyupFn = useThrottleFn(resetCalcLockTimeout, 2000)
-
-  return computed(() => {
-    if (unref(getLockTime)) {
-      return { onKeyup: keyupFn, onMousemove: keyupFn }
-    } else {
-      clear()
-      return {}
-    }
-  })
-}
diff --git a/apps/grid-admin/src/init-application.ts b/apps/grid-admin/src/init-application.ts
index aaf047d6..e4e198eb 100644
--- a/apps/grid-admin/src/init-application.ts
+++ b/apps/grid-admin/src/init-application.ts
@@ -1,36 +1,11 @@
 import { initRequest } from '@vben/request'
-import { useUserStoreWithout, useUserStore } from '@/store/user'
+import { useUserStoreWithout } from '@/store/user'
 import { useI18n, useLocale } from '@vben/locale'
-import { deepMerge, getGlobalConfig } from '@vben/utils'
-import { useConfigStoreWithOut, useConfigStore } from '@/store/config'
-import { projectSetting } from './setting'
+import { getGlobalConfig } from '@vben/utils'
+import { useConfigStore } from '@/store/config'
 import { initComp } from '@vben/vbencomponents'
-import { initLayout } from '@vben/layouts'
 import { localeList } from '@vben/locale/src/config'
-import { useRootSetting } from '@/hooks/setting/useRootSetting'
-import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'
-import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
-import {
-  getAllParentPath,
-  getChildrenMenus,
-  getCurrentParentPath,
-  getMenus,
-  getShallowMenus
-} from '@/router'
-import { useDesign } from '@/hooks/web/useDesign'
-import { useAppInject } from '@/hooks/web/use-app-inject'
-import { useTabs } from '@/hooks/useTabs'
-import { usePromise } from '@vben/hooks'
-import { useMultipleTabStore } from '@/store/multipleTab'
-import { listenerRouteChange } from '@/logics/mitt/routeChange'
 import { useAppStore } from '@/store/modules/app'
-import Logo from '@/layout/components/logo.vue'
-import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
-import { useLockStore } from '@/store/lock'
-import { unref } from 'vue'
-import {useLockScreen} from "@/hooks/web/useLockScreen";
-import {siteSetting} from "@/config";
-import {useMultipleTabSetting} from "@/hooks/setting/useMultipleTabSetting";
 // To decouple the modules below `packages/*`, they no longer depend on each other
 // If the modules are heavily dependent on each other, you need to provide a decoupling method, and the caller will pass the parameters
 // Each module needs to provide `bridge` file as a decoupling method
@@ -83,52 +58,13 @@ async function initPackages() {
         useConfigStore,
       }
     })
-  }
-  const _initLayout = async () => {
-    await initLayout(() => {
-      return {
-        useRootSetting,
-        getMenus,
-        getCurrentParentPath,
-        getShallowMenus,
-        getChildrenMenus,
-        getAllParentPath,
-        useHeaderSetting,
-        useDesign,
-        useAppInject,
-        useTabs,
-        usePromise,
-        useMultipleTabStore,
-        listenerRouteChange,
-        useUserStore,
-        useAppStore,
-        useConfigStore,
-        Logo,
-        useMenuSetting,
-        useMultipleTabSetting,
-        useTransitionSetting,
-        useLockStore,
-        useLockScreen,
-        siteSetting
-      }
-    })
-  }
 
-  await Promise.all([_initRequest(), _initComp(), _initLayout()])
-}
-
-// Initial project configuration
-function initAppConfigStore() {
-  const configStore = useConfigStoreWithOut()
-  const projectConfig = unref(configStore.getProjectConfig)
-  const projCfg = deepMerge(projectSetting, projectConfig || {})
-  configStore.setProjectConfig(projCfg)
+    await Promise.all([_initRequest(), _initComp()])
+  }
 }
 
 export async function initApplication() {
   // ! Need to pay attention to the timing of execution
   // ! 需要注意调用时机
   await initPackages()
-  // Initialize internal system configuration
-  initAppConfigStore()
 }
diff --git a/apps/grid-admin/src/layout/components/app/AppProvider.tsx b/apps/grid-admin/src/layout/components/app/AppProvider.tsx
index b6da17c2..a6f328ff 100644
--- a/apps/grid-admin/src/layout/components/app/AppProvider.tsx
+++ b/apps/grid-admin/src/layout/components/app/AppProvider.tsx
@@ -1,90 +1,45 @@
-import {createBreakpointListen} from '@/hooks/event/use-breakpoint'
-import {namespace} from '@/setting'
-import {defineComponent, toRefs, ref, unref} from 'vue'
-import {createAppProviderContext} from '@/hooks/web/useAppContext'
-import {useConfigStoreWithOut} from '@/store/config'
-import {useMsg, useNotice} from '@vben/vbencomponents'
-import {setMsg, setNoice} from '@vben/request'
+import {
+  createMediaPrefersColorSchemeListen,
+  createBreakpointListen,
+} from '@vben/hooks'
+import { namespace } from '@/setting'
+import { defineComponent, toRefs, ref } from 'vue'
+import { createAppProviderContext } from '@vben/hooks'
+import { useMsg, useNotice } from '@vben/vbencomponents'
+import { setMsg, setNoice } from '@vben/request'
 
 const props = {
   /**
    * class style prefix
    */
-  prefixCls: {type: String, default: namespace},
+  prefixCls: { type: String, default: namespace },
 }
 
 export default defineComponent({
   name: 'AppProvider',
   inheritAttrs: false,
   props,
-  setup(props, {slots}) {
+  setup(props, { slots }) {
     const isMobile = ref(false)
-    const isSetState = ref(false)
-
-    const configStore = useConfigStoreWithOut()
     //注册msg以及notice，方便全局使用
     const msg = useMsg()
     const notice = useNotice()
     setMsg(msg)
     setNoice(notice)
     // Monitor screen breakpoint information changes
-    createBreakpointListen(({screenMap, sizeEnum, width}) => {
+    createBreakpointListen(({ screenMap, sizeEnum, width }) => {
       const lgWidth = screenMap.get(sizeEnum.LG)
       if (lgWidth) {
         isMobile.value = width.value - 1 < lgWidth
       }
-      handleRestoreState()
     })
+    // Listen for system theme changes
+    createMediaPrefersColorSchemeListen()
 
-    const {prefixCls} = toRefs(props)
+    const { prefixCls } = toRefs(props)
 
     // Inject variables into the global
-    createAppProviderContext({prefixCls, isMobile})
-
-    /**
-     * Used to maintain the state before the window changes
-     */
-    function handleRestoreState() {
-      if (unref(isMobile)) {
-        if (!unref(isSetState)) {
-          isSetState.value = true
-          const {
-            menuSetting: {
-              type: menuType,
-              mode: menuMode,
-              collapsed: menuCollapsed,
-              split: menuSplit,
-            },
-          } = configStore.getProjectConfig
-          configStore.setProjectConfig({
-            menuSetting: {
-              type: menuType,
-              mode: menuMode,
-              split: false,
-            },
-          })
-          configStore.setBeforeMiniInfo({
-            menuMode,
-            menuCollapsed,
-            menuType,
-            menuSplit,
-          })
-        }
-      } else {
-        if (unref(isSetState)) {
-          isSetState.value = false
-          const {menuMode, menuCollapsed, menuType, menuSplit} = configStore.getBeforeMiniInfo
-          configStore.setProjectConfig({
-            menuSetting: {
-              type: menuType,
-              mode: menuMode,
-              collapsed: menuCollapsed,
-              split: menuSplit,
-            },
-          })
-        }
-      }
-    }
+    createAppProviderContext({ prefixCls, isMobile })
 
     return () => slots.default?.()
   },
diff --git a/packages/hooks/src/event/index.ts b/packages/hooks/src/event/index.ts
new file mode 100644
index 00000000..9db1c087
--- /dev/null
+++ b/packages/hooks/src/event/index.ts
@@ -0,0 +1,2 @@
+export * from './use-breakpoint'
+export * from './use-scroll-to'
diff --git a/apps/grid-admin/src/hooks/event/use-breakpoint.ts b/packages/hooks/src/event/use-breakpoint.ts
similarity index 100%
rename from apps/grid-admin/src/hooks/event/use-breakpoint.ts
rename to packages/hooks/src/event/use-breakpoint.ts
diff --git a/apps/grid-admin/src/hooks/event/use-event-listener.ts b/packages/hooks/src/event/use-event-listener.ts
similarity index 100%
rename from apps/grid-admin/src/hooks/event/use-event-listener.ts
rename to packages/hooks/src/event/use-event-listener.ts
diff --git a/apps/grid-admin/src/hooks/event/use-scroll-to.ts b/packages/hooks/src/event/use-scroll-to.ts
similarity index 100%
rename from apps/grid-admin/src/hooks/event/use-scroll-to.ts
rename to packages/hooks/src/event/use-scroll-to.ts
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 899f5229..3f367a53 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -5,3 +5,4 @@ export * from './usePage'
 export * from './useContext'
 export * from './useRefs'
 export * from './config'
+export * from './event'
diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts
index ae23440b..c32e8fc5 100644
--- a/packages/hooks/src/web/index.ts
+++ b/packages/hooks/src/web/index.ts
@@ -1,3 +1,5 @@
 export * from './useCopyToClipboard'
 export * from './useGridLayoutContainerElStyle'
 export * from './useTheme'
+export * from './useAppInject'
+export * from './useAppContext'
diff --git a/apps/grid-admin/src/hooks/web/useAppContext.ts b/packages/hooks/src/web/useAppContext.ts
similarity index 88%
rename from apps/grid-admin/src/hooks/web/useAppContext.ts
rename to packages/hooks/src/web/useAppContext.ts
index 3a38324b..0ccd38f3 100644
--- a/apps/grid-admin/src/hooks/web/useAppContext.ts
+++ b/packages/hooks/src/web/useAppContext.ts
@@ -1,4 +1,4 @@
-import { createContext, useContext } from '@vben/hooks'
+import { createContext, useContext } from '../useContext'
 import { InjectionKey, Ref } from 'vue'
 
 export interface AppProviderContextProps {
diff --git a/apps/grid-admin/src/hooks/web/use-app-inject.ts b/packages/hooks/src/web/useAppInject.ts
similarity index 100%
rename from apps/grid-admin/src/hooks/web/use-app-inject.ts
rename to packages/hooks/src/web/useAppInject.ts
diff --git a/packages/hooks/src/web/useTheme.ts b/packages/hooks/src/web/useTheme.ts
index b3e50dff..e245daaa 100644
--- a/packages/hooks/src/web/useTheme.ts
+++ b/packages/hooks/src/web/useTheme.ts
@@ -1,20 +1,27 @@
 import { useAppConfig } from '../config'
 import { ThemeEnum } from '@vben/constants'
 import { useEventListener } from '@vben/utils'
+import { computed, unref } from 'vue'
 
-export const useTheme = (listen = false) => {
+export function createMediaPrefersColorSchemeListen() {
   const { setAppConfig } = useAppConfig()
-  if (listen) {
-    // 监听系统主题
-    useEventListener(
-      window.matchMedia('(prefers-color-scheme: dark)'),
-      'change',
-      (e: Event) => {
-        // @ts-ignore
-        setAppConfig({ theme: e.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT })
-      },
-    )
-  }
+  // 监听系统主题
+  useEventListener(
+    window.matchMedia('(prefers-color-scheme: dark)'),
+    'change',
+    (e: Event) => {
+      // @ts-ignore
+      setAppConfig({ theme: e.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT })
+    },
+  )
+}
+
+export const useAppTheme = () => {
+  const { theme } = useAppConfig()
+
+  const isDark = computed(() => {
+    return unref(theme) === ThemeEnum.DARK
+  })
 
-  return {}
+  return { isDark, theme }
 }
diff --git a/packages/vbenComponents/package.json b/packages/vbenComponents/package.json
index 4a9e303b..0d0134ab 100644
--- a/packages/vbenComponents/package.json
+++ b/packages/vbenComponents/package.json
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "@iconify/iconify": "^3.0.0",
+    "@vben/hooks": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/constants": "workspace:*",
     "sass": "^1.55.0",
diff --git a/packages/vbenComponents/src/config/src/Config.vue b/packages/vbenComponents/src/config/src/Config.vue
index ee20bd3b..fc004ad0 100644
--- a/packages/vbenComponents/src/config/src/Config.vue
+++ b/packages/vbenComponents/src/config/src/Config.vue
@@ -1,18 +1,15 @@
 <script lang="ts" setup name="VbenConfig">
 import { maps } from '#/index'
-import { computed } from 'vue'
-import { ThemeEnum } from '@vben/constants'
+import { computed, unref } from 'vue'
+import { useAppTheme } from '@vben/hooks'
 const Config = maps.get('Config')
 const darkTheme = maps.get('DarkTheme')
-import { context } from '../../../bridge'
-const { useConfigStore } = context
-const configStore = useConfigStore()
-const theme = computed(() =>
-  configStore.getDarkMode == ThemeEnum.DARK ? darkTheme : null,
-)
+
+const { isDark } = useAppTheme()
+const appTheme = computed(() => (unref(isDark) ? darkTheme : null))
 </script>
 <template>
-  <Config v-bind="$attrs" abstract :theme="theme"> <slot></slot></Config>
+  <Config v-bind="$attrs" abstract :theme="appTheme"> <slot></slot></Config>
 </template>
 
 <style scoped></style>

From ba1ee764aa7c1ba132e3659cc31857481085b97c Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Fri, 10 Feb 2023 18:04:00 +0800
Subject: [PATCH 22/22] wip: grid-layout theme color

---
 .../grid-layouts/src/components/Layout.vue    |  11 +-
 packages/grid-layouts/src/components/Main.vue |   8 +-
 .../src/components/comm/TopButtonWrapper.vue  |   2 +-
 .../components/composables/LayoutHeader.vue   |   4 +-
 .../components/composables/LayoutSidebar.vue  |   2 +-
 .../src/components/composables/LayoutTab.vue  |   2 +-
 .../components/tab-bar/SuffixItemWrapper.vue  |   2 +-
 .../components/widgets/SiderCenterTrigger.vue |   1 +
 packages/hooks/src/web/index.ts               |   2 +-
 packages/hooks/src/web/useAppInject.ts        |   2 +-
 .../src/web/useGridLayoutContainerElStyle.ts  |  62 ------
 packages/hooks/src/web/useLayout.ts           | 147 +++++++++++++++
 packages/styles/src/variables.css             |  18 +-
 packages/utils/src/color.ts                   | 178 ++++++++++++++++++
 packages/utils/src/index.ts                   |   1 +
 15 files changed, 361 insertions(+), 81 deletions(-)
 delete mode 100644 packages/hooks/src/web/useGridLayoutContainerElStyle.ts
 create mode 100644 packages/hooks/src/web/useLayout.ts
 create mode 100644 packages/utils/src/color.ts

diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
index 37194082..65e9cd9d 100644
--- a/packages/grid-layouts/src/components/Layout.vue
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -11,8 +11,8 @@ import {
   useLayoutTab,
   useLayoutContent,
 } from '@vben/stores'
-import {useAppConfig, useGridLayoutContainerElStyle, useTheme} from '@vben/hooks'
-import { ref } from 'vue'
+import {useAppConfig, createGridLayoutListen, createThemeColorListen} from '@vben/hooks'
+import {nextTick, ref} from 'vue'
 import { MaybeElementRef } from '@vben/utils'
 
 const { headerRef } = storeToRefs(useLayoutHeader() as StoreGeneric)
@@ -22,9 +22,10 @@ const { contentRef } = storeToRefs(useLayoutContent() as StoreGeneric)
 const containerRef = ref<MaybeElementRef>(null)
 
 const { navBarMode } = useAppConfig()
-useGridLayoutContainerElStyle(containerRef)
-const {} = useTheme(true)
-
+nextTick(()=>{
+  createGridLayoutListen(containerRef)
+  createThemeColorListen(containerRef)
+})
 </script>
 <template>
   <section
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
index 38a4692f..7ca3398d 100644
--- a/packages/grid-layouts/src/components/Main.vue
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useLayoutHeader } from '@vben/stores'
-import { useAppConfig } from '@vben/hooks'
+import {useAppConfig, useAppInject} from '@vben/hooks'
 import { StoreGeneric, storeToRefs } from 'pinia'
 
 const { headerWidth, headerHeight } = storeToRefs(
@@ -8,12 +8,18 @@ const { headerWidth, headerHeight } = storeToRefs(
 )
 const { sidebar } = useAppConfig()
 
+const { isMobile } = useAppInject()
 </script>
 <template>
   <main class="vben-grid-layout-main">
     <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
     ___________________________________________________________________________
     <div>useAppConfig : {{ sidebar }}</div>
+    <div>isMobile: {{ isMobile }}</div>
+
+    <VbenButton>
+      大丰收的
+    </VbenButton>
     <!--    <RouterView />-->
   </main>
 </template>
diff --git a/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue b/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
index bca5b182..2ae01435 100644
--- a/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
+++ b/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
@@ -2,7 +2,7 @@
 <template>
   <!-- 2424 -->
   <div
-    class="h-full p-x-12px grid-center cursor-pointer hover:bg-[#f6f6f6] transition-colors-300"
+    class="h-full p-x-12px grid-center cursor-pointer hover:bg-[var(--header-action-hover-bg-color)] transition-colors-300"
   >
     <slot></slot>
   </div>
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
index 7af61743..e4687b56 100644
--- a/packages/grid-layouts/src/components/composables/LayoutHeader.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -31,7 +31,9 @@ const showHeaderLogo = computed(() => {
 </script>
 <template>
   <header
-    class="grid-area-[grid-header] grid grid-cols-2 content-center overflow-hidden relative"
+    class="grid-area-[grid-header] grid grid-cols-2 content-center
+    overflow-hidden relative bg-[var(--header-background-color)]
+    color-[var(--header-text-color)] transition-colors-300"
     :class="[header.visible ? 'visible' : 'invisible']"
   >
     <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3 flex">
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
index f6ad735e..4198b098 100644
--- a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -26,7 +26,7 @@ const showSidebarLogo = computed(()=>{
 </script>
 <template>
   <div
-    class="grid-area-[grid-sidebar] relative"
+    class="grid-area-[grid-sidebar] relative bg-[var(--aside-background-color)] transition-colors-300 color-[var(--aside-text-color)]"
     :class="[
       { 'pb-40px': showFooterTrigger },
       sidebar.visible ? 'visible' : 'invisible overflow-hidden',
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
index a217f8e4..63a847f5 100644
--- a/packages/grid-layouts/src/components/composables/LayoutTab.vue
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -9,7 +9,7 @@ const { tabTar } = useAppConfig()
 </script>
 <template>
   <div
-    class="grid-area-[grid-tab-bar] grid grid-cols-2 content-center overflow-hidden relative"
+    class="grid-area-[grid-tab-bar] grid grid-cols-2 content-center overflow-hidden relative dark:dark-800"
     :class="[tabTar.visible ? 'visible' : 'invisible']"
   >
     <div class="h-[var(--tab-bar-height)] grid-col-start-1 grid-col-end-3">
diff --git a/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue b/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
index fbe5c2b5..12671ca9 100644
--- a/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
+++ b/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
@@ -2,7 +2,7 @@
 import SecondaryBorder from '../comm/SecondaryBorder.vue'
 </script>
 <template>
-  <div class="h-full w-36px grid-center cursor-pointer relative">
+  <div class="h-full w-36px grid-center cursor-pointer relative color-blue-gray-400 hover:color-blue-gray-800 dark:hover:color-blue-gray-50">
     <slot></slot>
     <SecondaryBorder left />
   </div>
diff --git a/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
index 082ce35d..b75bb586 100644
--- a/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
+++ b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
@@ -11,6 +11,7 @@ const { sidebar, toggleCollapse } = useAppConfig()
     <VbenIconify
       :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
       icon="ph:caret-left-bold"
+      hover-color="var(--trigger-hover-icon-color)"
       color="var(--trigger-icon-color)"
     />
   </div>
diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts
index c32e8fc5..f47471e8 100644
--- a/packages/hooks/src/web/index.ts
+++ b/packages/hooks/src/web/index.ts
@@ -1,5 +1,5 @@
 export * from './useCopyToClipboard'
-export * from './useGridLayoutContainerElStyle'
+export * from './useLayout'
 export * from './useTheme'
 export * from './useAppInject'
 export * from './useAppContext'
diff --git a/packages/hooks/src/web/useAppInject.ts b/packages/hooks/src/web/useAppInject.ts
index 53fc32f0..77d7e2e9 100644
--- a/packages/hooks/src/web/useAppInject.ts
+++ b/packages/hooks/src/web/useAppInject.ts
@@ -5,6 +5,6 @@ export function useAppInject() {
   const values = useAppProviderContext()
 
   return {
-    getIsMobile: computed(() => unref(values.isMobile)),
+    isMobile: computed(() => unref(values.isMobile)),
   }
 }
diff --git a/packages/hooks/src/web/useGridLayoutContainerElStyle.ts b/packages/hooks/src/web/useGridLayoutContainerElStyle.ts
deleted file mode 100644
index ecc23296..00000000
--- a/packages/hooks/src/web/useGridLayoutContainerElStyle.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useCssVar, MaybeElementRef } from '@vben/utils'
-import { useAppConfig } from '../config'
-import { unref, watchEffect } from 'vue'
-
-export const useGridLayoutContainerElStyle = (el: MaybeElementRef | null) => {
-  const {
-    isTopMenu,
-    isMixSidebar,
-    sidebar,
-    header,
-    footer,
-    tabTar,
-    grayMode,
-    colorWeak,
-    toggleGrayMode,
-    toggleColorWeak,
-  } = useAppConfig()
-  const asideWidth = useCssVar('--aside-width', el, {
-    initialValue: `${unref(sidebar).width}px`,
-  })
-  const headerHeight = useCssVar('--header-height', el, {
-    initialValue: `${unref(header).height}px`,
-  })
-  const tabBarHeight = useCssVar('--tab-bar-height', el, {
-    initialValue: `${unref(tabTar).height}px`,
-  })
-  const footerHeight = useCssVar('--footer-height', el, {
-    initialValue: `${unref(footer).height}px`,
-  })
-
-  watchEffect(() => {
-    const getAsideWidth = () => {
-      if (unref(isTopMenu) || !unref(sidebar).visible) return 0
-      if (unref(sidebar).collapsed) return unref(sidebar).collapsedWidth
-      if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
-      return unref(sidebar).width
-    }
-
-    const getHeaderHeight = () => {
-      if (!unref(header).visible) return 0
-      return unref(header).height
-    }
-
-    const getTabBarHeight = () => {
-      if (!unref(tabTar).visible) return 0
-      return unref(tabTar).height
-    }
-
-    const getFooterHeight = () => {
-      if (!unref(footer).visible) return 0
-      return unref(footer).height
-    }
-    asideWidth.value = `${getAsideWidth()}px`
-    headerHeight.value = `${getHeaderHeight()}px`
-    tabBarHeight.value = `${getTabBarHeight()}px`
-    footerHeight.value = `${getFooterHeight()}px`
-    toggleGrayMode(unref(grayMode))
-    toggleColorWeak(unref(colorWeak))
-  })
-
-  return {}
-}
diff --git a/packages/hooks/src/web/useLayout.ts b/packages/hooks/src/web/useLayout.ts
new file mode 100644
index 00000000..ee83e92e
--- /dev/null
+++ b/packages/hooks/src/web/useLayout.ts
@@ -0,0 +1,147 @@
+import { useAppConfig } from '../config'
+import { unref, watchEffect } from 'vue'
+import { useLayoutHeader, useLayoutSidebar } from '@vben/stores'
+import {
+  useCssVar,
+  MaybeElementRef,
+  lighten,
+  pickTextColorBasedOnBgColor,
+  darken,
+  addClass,
+} from '@vben/utils'
+
+const HEADER_HEIGHT = '--header-height'
+const HEADER_BG_COLOR_VAR = '--header-background-color'
+const HEADER_TEXT_COLOR_VAR = '--header-text-color'
+const HEADER_ACTION_HOVER_BG_COLOR_VAR = '--header-action-hover-bg-color'
+
+const ASIDE_WIDTH = '--aside-width'
+const ASIDE_DARK_BG_COLOR = '--aside-background-color'
+const ASIDE_TEXT_COLOR_VAR = '--aside-text-color'
+
+const TAB_BAR_HEIGHT = '--tab-bar-height'
+
+const FOOTER_HEIGHT = '--footer-height'
+
+const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
+const DARK_TEXT_COLOR = '#fff'
+
+export function createThemeColorListen(el: MaybeElementRef | null) {
+  const {
+    sidebar,
+    header,
+    grayMode,
+    colorWeak,
+    theme,
+    toggleGrayMode,
+    toggleColorWeak,
+  } = useAppConfig()
+
+  const { sidebarRef } = useLayoutSidebar()
+  const { headerRef } = useLayoutHeader()
+
+  const headerBgColor = useCssVar(
+    HEADER_BG_COLOR_VAR,
+    headerRef as MaybeElementRef,
+    {
+      initialValue: `${unref(header).bgColor}px`,
+    },
+  )
+
+  const headerTextColor = useCssVar(
+    HEADER_TEXT_COLOR_VAR,
+    headerRef as MaybeElementRef,
+    {
+      initialValue: LIGHT_TEXT_COLOR,
+    },
+  )
+  const headerActionHoverBgColor = useCssVar(
+    HEADER_ACTION_HOVER_BG_COLOR_VAR,
+    headerRef as MaybeElementRef,
+  )
+
+  const sidebarBgColor = useCssVar(
+    ASIDE_DARK_BG_COLOR,
+    sidebarRef as MaybeElementRef,
+    {
+      initialValue: `${unref(sidebar).bgColor}px`,
+    },
+  )
+
+  const asideTextColor = useCssVar(
+    ASIDE_TEXT_COLOR_VAR,
+    sidebarRef as MaybeElementRef,
+    {
+      initialValue: LIGHT_TEXT_COLOR,
+    },
+  )
+
+  watchEffect(() => {
+    headerBgColor.value = unref(header).bgColor
+    headerTextColor.value = pickTextColorBasedOnBgColor(
+      unref(header).bgColor,
+      LIGHT_TEXT_COLOR,
+      DARK_TEXT_COLOR,
+    )
+    headerActionHoverBgColor.value = ['#fff', '#ffffff'].includes(
+      unref(header).bgColor.toLowerCase(),
+    )
+      ? darken(unref(header).bgColor, 6)
+      : lighten(unref(header).bgColor, 6)
+
+    sidebarBgColor.value = unref(sidebar).bgColor
+    asideTextColor.value = pickTextColorBasedOnBgColor(
+      unref(sidebar).bgColor,
+      LIGHT_TEXT_COLOR,
+      DARK_TEXT_COLOR,
+    )
+    toggleGrayMode(unref(grayMode))
+    toggleColorWeak(unref(colorWeak))
+    addClass(document.documentElement, unref(theme))
+  })
+}
+
+export function createGridLayoutListen(el: MaybeElementRef | null) {
+  const { isTopMenu, isMixSidebar, sidebar, header, footer, tabTar } =
+    useAppConfig()
+  const asideWidth = useCssVar(ASIDE_WIDTH, el, {
+    initialValue: `${unref(sidebar).width}px`,
+  })
+  const headerHeight = useCssVar(HEADER_HEIGHT, el, {
+    initialValue: `${unref(header).height}px`,
+  })
+  const tabBarHeight = useCssVar(TAB_BAR_HEIGHT, el, {
+    initialValue: `${unref(tabTar).height}px`,
+  })
+  const footerHeight = useCssVar(FOOTER_HEIGHT, el, {
+    initialValue: `${unref(footer).height}px`,
+  })
+
+  watchEffect(() => {
+    const getAsideWidth = () => {
+      if (unref(isTopMenu) || !unref(sidebar).visible) return 0
+      if (unref(sidebar).collapsed) return unref(sidebar).collapsedWidth
+      if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
+      return unref(sidebar).width
+    }
+
+    const getHeaderHeight = () => {
+      if (!unref(header).visible) return 0
+      return unref(header).height
+    }
+
+    const getTabBarHeight = () => {
+      if (!unref(tabTar).visible) return 0
+      return unref(tabTar).height
+    }
+
+    const getFooterHeight = () => {
+      if (!unref(footer).visible) return 0
+      return unref(footer).height
+    }
+    asideWidth.value = `${getAsideWidth()}px`
+    headerHeight.value = `${getHeaderHeight()}px`
+    tabBarHeight.value = `${getTabBarHeight()}px`
+    footerHeight.value = `${getFooterHeight()}px`
+  })
+}
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index 69a5dd8d..5c0887c1 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -13,15 +13,16 @@
 
   /* layout start */
 
-  --layout-border-color: rgb(239, 239, 245);
   --layout-color: #fff;
-  --layout-text-color: rgb(51, 54, 57);
   --layout-border-color: rgb(239, 239, 245);
-  --layout-toggle-button-icon-color: rgb(51, 54, 57);
 
   /* header */
   --header-height: 48px;
   --header-width: calc(100% - var(--aside-width));
+  --header-background-color: #fff;
+  --header-text-color: rgba(0,0,0,0.85);
+  --header-icon-color: var(--header-text-color);
+  --header-action-hover-bg-color: #f6f6f6;
 
   /* tab */
   --tab-bar-height: 36px;
@@ -30,13 +31,17 @@
   /* aside */
   --aside-height: calc(100% - var(--header-height));
   --aside-width: 210px;
-  --aside-background-color: #001628;
+  --aside-background-color: #001529;
   --aside-submenu-background-color: #0c2135;
+  --aside-text-color: #fff;
 
-  --trigger-color: #fff;
+  --trigger-color: rgb(72, 72, 78);
   --trigger-border: 1px solid rgb(239, 239, 245);
   --trigger-border-color: rgb(239, 239, 245);
-  --trigger-icon-color: rgb(51, 54, 57);
+  /*--trigger-border-color: rgb(239, 239, 245);*/
+  --trigger-icon-color: #f3f1f1;
+  /*--trigger-icon-color: rgb(51, 54, 57);*/
+  --trigger-hover-icon-color: #fff;
 
   /* main */
   --main-height: calc(100% - var(--footer-height));
@@ -47,6 +52,7 @@
   --footer-width: 100%;
 
   /* layout end */
+
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts
new file mode 100644
index 00000000..6347797a
--- /dev/null
+++ b/packages/utils/src/color.ts
@@ -0,0 +1,178 @@
+/**
+ * 判断是否 十六进制颜色值.
+ * 输入形式可为 #fff000 #f00
+ *
+ * @param   String  color   十六进制颜色值
+ * @return  Boolean
+ */
+export function isHexColor(color: string) {
+  const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/
+  return reg.test(color)
+}
+
+/**
+ * RGB 颜色值转换为 十六进制颜色值.
+ * r, g, 和 b 需要在 [0, 255] 范围内
+ *
+ * @return  String          类似#ff00ff
+ * @param r
+ * @param g
+ * @param b
+ */
+export function rgbToHex(r: number, g: number, b: number) {
+  // tslint:disable-next-line:no-bitwise
+  const hex = ((r << 16) | (g << 8) | b).toString(16)
+  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
+}
+
+/**
+ * Transform a HEX color to its RGB representation
+ * @param {string} hex The color to transform
+ * @returns The RGB representation of the passed color
+ */
+export function hexToRGB(hex: string) {
+  let sHex = hex.toLowerCase()
+  if (isHexColor(hex)) {
+    if (sHex.length === 4) {
+      let sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1))
+      }
+      sHex = sColorNew
+    }
+    const sColorChange: number[] = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)))
+    }
+    return 'RGB(' + sColorChange.join(',') + ')'
+  }
+  return sHex
+}
+
+export function colorIsDark(color: string) {
+  if (!isHexColor(color)) return
+  const [r, g, b] = hexToRGB(color)
+    .replace(/(?:\(|\)|rgb|RGB)*/g, '')
+    .split(',')
+    .map((item) => Number(item))
+  return r * 0.299 + g * 0.578 + b * 0.114 < 192
+}
+
+/**
+ * Darkens a HEX color given the passed percentage
+ * @param {string} color The color to process
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The HEX representation of the processed color
+ */
+export function darken(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+    color.substring(2, 4),
+    amount,
+  )}${subtractLight(color.substring(4, 6), amount)}`
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export function lighten(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(
+    color.substring(2, 4),
+    amount,
+  )}${addLight(color.substring(4, 6), amount)}`
+}
+
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function addLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) + amount
+  const c = cc > 255 ? 255 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+/**
+ * Calculates luminance of an rgb color
+ * @param {number} r red
+ * @param {number} g green
+ * @param {number} b blue
+ */
+function luminanace(r: number, g: number, b: number) {
+  const a = [r, g, b].map((v) => {
+    v /= 255
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+  })
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+}
+
+/**
+ * Calculates contrast between two rgb colors
+ * @param {string} rgb1 rgb color 1
+ * @param {string} rgb2 rgb color 2
+ */
+function contrast(rgb1: string[], rgb2: number[]) {
+  return (
+    (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
+    (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
+  )
+}
+
+/**
+ * Determines what the best text color is (black or white) based con the contrast with the background
+ * @param hexColor - Last selected color by the user
+ */
+export function calculateBestTextColor(hexColor: string) {
+  const rgbColor = hexToRGB(hexColor.substring(1))
+  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0])
+
+  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'
+}
+
+/**
+ * Subtracts the indicated percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function subtractLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) - amount
+  const c = cc < 0 ? 0 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+/**
+ * Pick text color based on background color
+ * @param bgColor {string}
+ * @param lightColor {string}
+ * @param darkColor {string}
+ * @returns {string} text color
+ */
+export function pickTextColorBasedOnBgColor(
+  bgColor: string,
+  lightColor: string,
+  darkColor: string,
+) {
+  const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor
+  const r = parseInt(color.substring(0, 2), 16) // hexToR
+  const g = parseInt(color.substring(2, 4), 16) // hexToG
+  const b = parseInt(color.substring(4, 6), 16) // hexToB
+  const uicolors = [r / 255, g / 255, b / 255]
+  const c = uicolors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4)
+  })
+  const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+  return L < 0.8 ? darkColor : lightColor
+}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 621b5f7e..b7455ccc 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -9,3 +9,4 @@ export * from './tree'
 export * from './router'
 export * from './mitt'
 export * from './theme'
+export * from './color'