From c0eb3f1a1932fca1248ebe820ed78540272ff540 Mon Sep 17 00:00:00 2001
From: zhaocl97 <zhaocl97@foxmail.com>
Date: Fri, 19 Aug 2022 09:19:49 +0800
Subject: [PATCH] perf(appSettings): split and make it async component

---
 src/components/App/AppSettings/form/app.vue   | 204 +++++
 .../App/AppSettings/form/breadcrumb.vue       |  61 ++
 .../App/AppSettings/form/header.vue           |  85 ++
 src/components/App/AppSettings/form/menu.vue  | 119 +++
 src/components/App/AppSettings/form/tab.vue   |  87 ++
 src/components/App/AppSettings/form/theme.vue | 192 +++++
 src/components/App/AppSettings/index.vue      | 788 +-----------------
 src/components/App/AppSettings/shared.ts      |  14 +
 8 files changed, 808 insertions(+), 742 deletions(-)
 create mode 100644 src/components/App/AppSettings/form/app.vue
 create mode 100644 src/components/App/AppSettings/form/breadcrumb.vue
 create mode 100644 src/components/App/AppSettings/form/header.vue
 create mode 100644 src/components/App/AppSettings/form/menu.vue
 create mode 100644 src/components/App/AppSettings/form/tab.vue
 create mode 100644 src/components/App/AppSettings/form/theme.vue
 create mode 100644 src/components/App/AppSettings/shared.ts

diff --git a/src/components/App/AppSettings/form/app.vue b/src/components/App/AppSettings/form/app.vue
new file mode 100644
index 00000000..48bc812c
--- /dev/null
+++ b/src/components/App/AppSettings/form/app.vue
@@ -0,0 +1,204 @@
+<template>
+  <w-form @hook="register" :model="appRelatives"></w-form>
+</template>
+
+<script lang="ts" setup>
+  import { appRelatives, modalColor } from '../shared'
+
+  const [register] = useForm<typeof appRelatives.value>({
+    localeUniqueKey: 'app.app',
+    showFeedback: false,
+    xGap: 0,
+    formItemClass: 'flex flex-row justify-between mb-2',
+    formItemComponentClass: 'w-32 flex justify-end',
+    size: 'small',
+    schemas: [
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.app',
+          prefix: 'bar',
+          titlePlacement: 'left',
+          foldable: true,
+        },
+        extraProp: {
+          sticky: true,
+          bgColor: modalColor,
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showLogo',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showMenu',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showHeader',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showTabs',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showFooter',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'fixLogo',
+        },
+        componentProp: {
+          disabled: computed(() => !appRelatives.value.showLogo),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'fixHeader',
+        },
+        componentProp: {
+          disabled: computed(() => !appRelatives.value.showHeader),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'fixFooter',
+        },
+        componentProp: {
+          disabled: computed(() => !appRelatives.value.showFooter),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showAnimation',
+        },
+      },
+      {
+        type: 'Base:Select',
+        formProp: {
+          path: 'animationMode',
+        },
+        componentProp: {
+          disabled: computed(() => !appRelatives.value.showAnimation),
+          options: Object.values(AppConstAnimationMode).map((i) => ({
+            label: i,
+            value: i,
+          })),
+        },
+      },
+      {
+        type: 'Extend:TransitionSelect',
+        formProp: {
+          path: 'animationName',
+        },
+        componentProp: {
+          disabled: computed(
+            () =>
+              appRelatives.value.animationMode ===
+                AppConstAnimationMode.SCOPE || !appRelatives.value.showAnimation
+          ),
+          tooltip: true,
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'keepAlive',
+        },
+      },
+      {
+        type: 'Base:Select',
+        formProp: {
+          path: 'layout',
+        },
+        componentProp: {
+          options: Object.values(AppConstLayoutMode).map((i) => ({
+            value: i,
+            label: i,
+          })),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'pageLeaveLock',
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'idleMS',
+        },
+        componentProp: {
+          step: 5000,
+          min: 0,
+          suffix: 'ms',
+          showButton: false,
+          disabled: true,
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'contentPadding',
+        },
+        componentProp: {
+          step: 1,
+          min: 0,
+          suffix: 'px',
+          showButton: false,
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showWatermark',
+        },
+      },
+      {
+        type: 'Base:Input',
+        formProp: {
+          path: 'watermarkContent',
+        },
+        componentProp: {
+          disabled: computed(() => !appRelatives.value.showWatermark),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showWatermark',
+        },
+      },
+      {
+        type: 'Base:Select',
+        formProp: {
+          path: 'colorMode',
+        },
+        componentProp: {
+          clearable: true,
+          options: Object.values(AppConstColorMode).map((i) => ({
+            value: i,
+            label: i,
+          })),
+        },
+      },
+    ],
+  })
+</script>
diff --git a/src/components/App/AppSettings/form/breadcrumb.vue b/src/components/App/AppSettings/form/breadcrumb.vue
new file mode 100644
index 00000000..cd42bbf4
--- /dev/null
+++ b/src/components/App/AppSettings/form/breadcrumb.vue
@@ -0,0 +1,61 @@
+<template>
+  <w-form @hook="register4" :model="breadcrumbRelatives"></w-form>
+</template>
+
+<script lang="ts" setup>
+  import {
+    appRelatives,
+    breadcrumbRelatives,
+    headerRelatives,
+    modalColor,
+  } from '../shared'
+
+  const [register4] = useForm<typeof breadcrumbRelatives.value>({
+    localeUniqueKey: 'app.bc',
+    showFeedback: false,
+    xGap: 0,
+    formItemClass: 'flex flex-row justify-between mb-2',
+    formItemComponentClass: 'w-32 flex justify-end',
+    size: 'small',
+    disabled: computed(
+      () =>
+        !appRelatives.value.showHeader || !headerRelatives.value.showBreadcrumb
+    ),
+    schemas: [
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.breadcrumb',
+          prefix: 'bar',
+          titlePlacement: 'left',
+          foldable: true,
+        },
+        extraProp: {
+          sticky: true,
+          bgColor: modalColor,
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showIcon',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showDropdown',
+        },
+      },
+      {
+        type: 'Base:Select',
+        formProp: {
+          path: 'separator',
+        },
+        componentProp: {
+          options: ['>', '/'].map((i) => ({ value: i, label: i })),
+        },
+      },
+    ],
+  })
+</script>
diff --git a/src/components/App/AppSettings/form/header.vue b/src/components/App/AppSettings/form/header.vue
new file mode 100644
index 00000000..064bd303
--- /dev/null
+++ b/src/components/App/AppSettings/form/header.vue
@@ -0,0 +1,85 @@
+<template>
+  <w-form @hook="register" :model="headerRelatives"></w-form>
+</template>
+
+<script lang="ts" setup>
+  import { appRelatives, headerRelatives, modalColor } from '../shared'
+
+  const appDark = useAppStoreDark()
+
+  const [register] = useForm<typeof headerRelatives.value>({
+    localeUniqueKey: 'app.header',
+    showFeedback: false,
+    xGap: 0,
+    formItemClass: 'flex flex-row justify-between mb-2',
+    formItemComponentClass: 'w-32 flex justify-end',
+    size: 'small',
+    disabled: computed(() => !appRelatives.value.showHeader),
+    schemas: [
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.header',
+          prefix: 'bar',
+          titlePlacement: 'left',
+          foldable: true,
+        },
+        extraProp: {
+          sticky: true,
+          bgColor: modalColor,
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'height',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showBreadcrumb',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showFullScreen',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showLocale',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showDarkMode',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showLock',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showSearch',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'inverted',
+        },
+        componentProp: {
+          disabled: computed(() => appDark.isDark),
+        },
+      },
+    ],
+  })
+</script>
diff --git a/src/components/App/AppSettings/form/menu.vue b/src/components/App/AppSettings/form/menu.vue
new file mode 100644
index 00000000..d539880d
--- /dev/null
+++ b/src/components/App/AppSettings/form/menu.vue
@@ -0,0 +1,119 @@
+<template>
+  <w-form @hook="register" :model="menuRelatives"></w-form>
+</template>
+
+<script lang="ts" setup>
+  import { appRelatives, menuRelatives, modalColor } from '../shared'
+
+  const appMenu = useAppStoreMenu()
+  const appDark = useAppStoreDark()
+
+  const [register] = useForm<typeof menuRelatives.value>({
+    localeUniqueKey: 'app.menu',
+    showFeedback: false,
+    xGap: 0,
+    formItemClass: 'flex flex-row justify-between mb-2',
+    formItemComponentClass: 'w-32 flex justify-end',
+    size: 'small',
+    disabled: computed(() => !appRelatives.value.showMenu),
+    schemas: [
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.menu',
+          prefix: 'bar',
+          titlePlacement: 'left',
+          foldable: true,
+        },
+        extraProp: {
+          sticky: true,
+          bgColor: modalColor,
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showCollapse',
+        },
+      },
+      {
+        type: 'Base:Select',
+        formProp: {
+          path: 'collapseMode',
+        },
+        componentProp: {
+          options: Object.values(AppConstCollapseMode).map((i) => ({
+            value: i,
+            label: i,
+          })),
+          disabled: computed(
+            () =>
+              !appRelatives.value.showMenu || !menuRelatives.value.showCollapse
+          ),
+        },
+      },
+
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'width',
+        },
+        componentProp: {
+          step: 10,
+          disabled: computed(() => appMenu.collapse),
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'collapsedWidth',
+        },
+        componentProp: {
+          disabled: computed(() => !appMenu.collapse),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'accordion',
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'iconSize',
+        },
+        componentProp: {
+          disabled: computed(() => appMenu.collapse),
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'collapsedIconSize',
+        },
+        componentProp: {
+          disabled: computed(() => !appMenu.collapse),
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'indent',
+        },
+        componentProp: {
+          disabled: computed(() => appMenu.collapse),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'inverted',
+        },
+        componentProp: {
+          disabled: computed(() => appDark.isDark),
+        },
+      },
+    ],
+  })
+</script>
diff --git a/src/components/App/AppSettings/form/tab.vue b/src/components/App/AppSettings/form/tab.vue
new file mode 100644
index 00000000..3b35aa43
--- /dev/null
+++ b/src/components/App/AppSettings/form/tab.vue
@@ -0,0 +1,87 @@
+<template>
+  <w-form @hook="register" :model="tabRelatives"></w-form>
+</template>
+
+<script lang="ts" setup>
+  import { appRelatives, modalColor, tabRelatives } from '../shared'
+
+  const [register] = useForm<typeof tabRelatives.value>({
+    localeUniqueKey: 'app.tab',
+    showFeedback: false,
+    xGap: 0,
+    formItemClass: 'flex flex-row justify-between mb-2',
+    formItemComponentClass: 'w-32 flex justify-end',
+    size: 'small',
+    disabled: computed(() => !appRelatives.value.showTabs),
+    schemas: [
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.tab',
+          prefix: 'bar',
+          titlePlacement: 'left',
+          foldable: true,
+        },
+        extraProp: {
+          sticky: true,
+          bgColor: modalColor,
+        },
+      },
+      {
+        type: 'Base:InputNumber',
+        formProp: {
+          path: 'height',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showIcon',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'showUtils',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'contextMenu',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'sortable',
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'devtool',
+          labelHelpMessage: true,
+        },
+      },
+      {
+        type: 'Base:Select',
+        formProp: {
+          path: 'styleMode',
+        },
+        componentProp: {
+          options: Object.values(AppConstTabStyleMode).map((i) => ({
+            value: i,
+            label: i,
+          })),
+        },
+      },
+      {
+        type: 'Base:Switch',
+        formProp: {
+          path: 'persistent',
+        },
+      },
+    ],
+  })
+</script>
diff --git a/src/components/App/AppSettings/form/theme.vue b/src/components/App/AppSettings/form/theme.vue
new file mode 100644
index 00000000..38b18786
--- /dev/null
+++ b/src/components/App/AppSettings/form/theme.vue
@@ -0,0 +1,192 @@
+<template>
+  <w-form
+    v-if="appDark.isDark"
+    @hook="register"
+    :model="darkThemeRelatives"
+  ></w-form>
+
+  <w-form
+    v-if="!appDark.isDark"
+    @hook="register"
+    :model="lightThemeRelatives"
+  ></w-form>
+</template>
+
+<script lang="tsx" setup>
+  import AppColors from '../component/colors'
+
+  import {
+    darkThemeRelatives,
+    lightThemeRelatives,
+    modalColor,
+  } from '../shared'
+
+  const appDark = useAppStoreDark()
+
+  const [register] = useForm<typeof lightThemeRelatives.value>({
+    showFeedback: false,
+    xGap: 0,
+    formItemClass: 'mb-2',
+    formItemComponentClass: '',
+    size: 'small',
+    schemas: [
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme',
+          prefix: 'bar',
+          titlePlacement: 'left',
+          foldable: true,
+        },
+        extraProp: {
+          sticky: true,
+          bgColor: modalColor,
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.primary',
+          titlePlacement: 'center',
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'primaryColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors v-model={[formData.primaryColor]} />
+          ),
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.info',
+          titlePlacement: 'center',
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'infoColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors v-model={[formData.infoColor]} />
+          ),
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.success',
+          titlePlacement: 'center',
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'successColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors v-model={[formData.successColor]} />
+          ),
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.warning',
+          titlePlacement: 'center',
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'warningColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors v-model={[formData.warningColor]} />
+          ),
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.error',
+          titlePlacement: 'center',
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'errorColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors v-model={[formData.errorColor]} />
+          ),
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.body',
+          titlePlacement: 'center',
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'bodyColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors v-model={[formData.bodyColor]} />
+          ),
+        },
+      },
+
+      {
+        type: 'Extend:Divider',
+        componentProp: {
+          title: 'app.settings.theme.inverted',
+          titlePlacement: 'center',
+          helpMessage: true,
+        },
+      },
+
+      {
+        type: 'Base:Render',
+        formProp: {
+          path: 'invertedColor',
+        },
+        componentProp: {
+          render: ({ formData }) => (
+            <AppColors
+              v-model={[formData.invertedColor]}
+              disabled={appDark.isDark}
+            />
+          ),
+        },
+      },
+    ],
+  })
+</script>
diff --git a/src/components/App/AppSettings/index.vue b/src/components/App/AppSettings/index.vue
index dc18574d..30df8f40 100644
--- a/src/components/App/AppSettings/index.vue
+++ b/src/components/App/AppSettings/index.vue
@@ -1,9 +1,15 @@
 <template>
-  <div ref="el" :style="style" class="fixed cursor-pointer hover:text-primary">
+  <div
+    ref="el"
+    :style="style"
+    class="fixed cursor-pointer hover:text-primary"
+    @click.stop
+  >
     <w-icon
+      id="walnut-settings"
       height="32"
       icon="ant-design:setting-outlined"
-      @click.stop.prevent="() => (show = true)"
+      @click.prevent="() => (show = true)"
       :style="{ zIndex: 9999 }"
     ></w-icon>
   </div>
@@ -15,20 +21,17 @@
     @yes="() => (show = false)"
     @no="() => (show = false)"
   >
-    <w-form
-      @hook="register0"
-      :model="appDark.isDark ? darkThemeRelatives : lightThemeRelatives"
-    ></w-form>
-    <w-form @hook="register1" :model="appRelatives"></w-form>
-    <w-form @hook="register2" :model="menuRelatives"></w-form>
-    <w-form @hook="register3" :model="headerRelatives"></w-form>
-    <w-form @hook="register4" :model="breadcrumbRelatives"></w-form>
-    <w-form @hook="register5" :model="tabRelatives"></w-form>
+    <SettingsFormTheme />
+    <SettingsFormApp />
+    <SettingsFormMenu />
+    <SettingsFormHeader />
+    <SettingsFormBreadcrumb />
+    <SettingsFormTab />
 
     <n-button
       type="primary"
       class="w-full"
-      @click="onCopy"
+      @click="copy()"
       icon-placement="right"
     >
       {{ copied ? t('form.app.app.copy.success') : t('form.app.app.copy') }}
@@ -36,754 +39,55 @@
         <w-message :msg="t('form.app.app.copy.helpMsg')"></w-message>
       </template>
     </n-button>
+
+    <n-button type="warning" class="w-full mt-2" @click="onReset">
+      {{ t('form.app.app.reset') }}
+    </n-button>
   </w-drawer>
 </template>
 
-<script lang="tsx">
-  export default defineComponent({
-    name: 'AppSettings',
-  })
-</script>
+<script lang="ts" setup>
+  import { clone } from 'lodash-es'
 
-<script lang="tsx" setup>
-  // TODO 99
-  import WIcon from '@/components/UI/Icon'
-  import AppColors from './component/colors'
-  import { getMergedTheme } from '@/App/src/naive/src/theme'
-  import { AppConstColorMode } from '@/const'
+  import { appSetting } from './shared'
 
-  const appDark = useAppStoreDark()
-  const appMenu = useAppStoreMenu()
-  const appSetting = useAppStoreSetting()
+  import AppSettingsFromJson from '@/settings.json'
 
   const { t } = useAppI18n()
 
-  const el = ref(null)
   const show = ref(false)
-  const myX = ref()
-  const myY = ref()
-
-  const { width, height } = useWindowSize()
-
-  const { style, x, y } = useDraggable(el, {
-    initialValue: { x: width.value - 50, y: height.value - 50 },
-    preventDefault: true,
-    onMove: (p) => {
-      myX.value = p.x
-      myY.value = p.y
-    },
-  })
 
-  watchEffect(() => {
-    x.value = myX.value ?? width.value - 50
-    y.value = myY.value ?? height.value - 50
-  })
-
-  const lightThemeRelatives = ref(appSetting.settings.themes.light)
-  const darkThemeRelatives = ref(appSetting.settings.themes.dark)
-  const appRelatives = ref(appSetting.settings.app)
-  const menuRelatives = ref(appSetting.settings.menu)
-  const headerRelatives = ref(appSetting.settings.header)
-  const breadcrumbRelatives = ref(appSetting.settings.breadcrumb)
-  const tabRelatives = ref(appSetting.settings.tab)
-
-  const modalColor = computed(
-    () => getMergedTheme.value?.Drawer.common?.modalColor
-  )
+  const { el, style } = useDraggableElement()
 
   const { copy, copied } = useClipboard({
     source: computed(() => JSON.stringify(appSetting.settings, null, 4)),
     copiedDuring: 8000,
   })
 
-  const onCopy = () => {
-    copy()
-  }
-
-  const [register0] = useForm<typeof lightThemeRelatives.value>({
-    showFeedback: false,
-    xGap: 0,
-    formItemClass: 'mb-2',
-    formItemComponentClass: '',
-    size: 'small',
-    schemas: [
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme',
-          prefix: 'bar',
-          titlePlacement: 'left',
-          foldable: true,
-        },
-        extraProp: {
-          sticky: true,
-          bgColor: modalColor,
-        },
-      },
-
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.primary',
-          titlePlacement: 'center',
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'primaryColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors v-model={[formData.primaryColor]} />
-          ),
-        },
-      },
-
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.info',
-          titlePlacement: 'center',
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'infoColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors v-model={[formData.infoColor]} />
-          ),
-        },
-      },
-
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.success',
-          titlePlacement: 'center',
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'successColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors v-model={[formData.successColor]} />
-          ),
-        },
-      },
+  const onReset = () => {
+    appSetting.settings = clone(AppSettingsFromJson as AppSettings)
 
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.warning',
-          titlePlacement: 'center',
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'warningColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors v-model={[formData.warningColor]} />
-          ),
-        },
-      },
-
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.error',
-          titlePlacement: 'center',
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'errorColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors v-model={[formData.errorColor]} />
-          ),
-        },
-      },
-
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.body',
-          titlePlacement: 'center',
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'bodyColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors v-model={[formData.bodyColor]} />
-          ),
-        },
-      },
-
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.theme.inverted',
-          titlePlacement: 'center',
-          helpMessage: true,
-        },
-      },
-
-      {
-        type: 'Base:Render',
-        formProp: {
-          path: 'invertedColor',
-        },
-        componentProp: {
-          render: ({ formData }) => (
-            <AppColors
-              v-model={[formData.invertedColor]}
-              disabled={appDark.isDark}
-            />
-          ),
-        },
-      },
-    ],
-  })
-
-  const [register1] = useForm<typeof appRelatives.value>({
-    localeUniqueKey: 'app.app',
-    showFeedback: false,
-    xGap: 0,
-    formItemClass: 'flex flex-row justify-between mb-2',
-    formItemComponentClass: 'w-32 flex justify-end',
-    size: 'small',
-    schemas: [
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.app',
-          prefix: 'bar',
-          titlePlacement: 'left',
-          foldable: true,
-        },
-        extraProp: {
-          sticky: true,
-          bgColor: modalColor,
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showLogo',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showMenu',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showHeader',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showTabs',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showFooter',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'fixLogo',
-        },
-        componentProp: {
-          disabled: computed(() => !appRelatives.value.showLogo),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'fixHeader',
-        },
-        componentProp: {
-          disabled: computed(() => !appRelatives.value.showHeader),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'fixFooter',
-        },
-        componentProp: {
-          disabled: computed(() => !appRelatives.value.showFooter),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showAnimation',
-        },
-      },
-      {
-        type: 'Base:Select',
-        formProp: {
-          path: 'animationMode',
-        },
-        componentProp: {
-          disabled: computed(() => !appRelatives.value.showAnimation),
-          options: Object.values(AppConstAnimationMode).map((i) => ({
-            label: i,
-            value: i,
-          })),
-        },
-      },
-      {
-        type: 'Extend:TransitionSelect',
-        formProp: {
-          path: 'animationName',
-        },
-        componentProp: {
-          disabled: computed(
-            () =>
-              appRelatives.value.animationMode ===
-                AppConstAnimationMode.SCOPE || !appRelatives.value.showAnimation
-          ),
-          tooltip: true,
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'keepAlive',
-        },
-      },
-      {
-        type: 'Base:Select',
-        formProp: {
-          path: 'layout',
-        },
-        componentProp: {
-          options: Object.values(AppConstLayoutMode).map((i) => ({
-            value: i,
-            label: i,
-          })),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'pageLeaveLock',
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'idleMS',
-        },
-        componentProp: {
-          step: 5000,
-          min: 0,
-          suffix: 'ms',
-          showButton: false,
-          disabled: true,
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'contentPadding',
-        },
-        componentProp: {
-          step: 1,
-          min: 0,
-          suffix: 'px',
-          showButton: false,
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showWatermark',
-        },
-      },
-      {
-        type: 'Base:Input',
-        formProp: {
-          path: 'watermarkContent',
-        },
-        componentProp: {
-          disabled: computed(() => !appRelatives.value.showWatermark),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showWatermark',
-        },
-      },
-      {
-        type: 'Base:Select',
-        formProp: {
-          path: 'colorMode',
-        },
-        componentProp: {
-          clearable: true,
-          options: Object.values(AppConstColorMode).map((i) => ({
-            value: i,
-            label: i,
-          })),
-        },
-      },
-    ],
-  })
-
-  const [register2] = useForm<typeof menuRelatives.value>({
-    localeUniqueKey: 'app.menu',
-    showFeedback: false,
-    xGap: 0,
-    formItemClass: 'flex flex-row justify-between mb-2',
-    formItemComponentClass: 'w-32 flex justify-end',
-    size: 'small',
-    disabled: computed(() => !appRelatives.value.showMenu),
-    schemas: [
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.menu',
-          prefix: 'bar',
-          titlePlacement: 'left',
-          foldable: true,
-        },
-        extraProp: {
-          sticky: true,
-          bgColor: modalColor,
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showCollapse',
-        },
-      },
-      {
-        type: 'Base:Select',
-        formProp: {
-          path: 'collapseMode',
-        },
-        componentProp: {
-          options: Object.values(AppConstCollapseMode).map((i) => ({
-            value: i,
-            label: i,
-          })),
-          disabled: computed(
-            () =>
-              !appRelatives.value.showMenu || !menuRelatives.value.showCollapse
-          ),
-        },
-      },
-
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'width',
-        },
-        componentProp: {
-          step: 10,
-          disabled: computed(() => appMenu.collapse),
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'collapsedWidth',
-        },
-        componentProp: {
-          disabled: computed(() => !appMenu.collapse),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'accordion',
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'iconSize',
-        },
-        componentProp: {
-          disabled: computed(() => appMenu.collapse),
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'collapsedIconSize',
-        },
-        componentProp: {
-          disabled: computed(() => !appMenu.collapse),
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'indent',
-        },
-        componentProp: {
-          disabled: computed(() => appMenu.collapse),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'inverted',
-        },
-        componentProp: {
-          disabled: computed(() => appDark.isDark),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'inverted',
-        },
-        componentProp: {
-          disabled: computed(() => appDark.isDark),
-        },
-      },
-    ],
-  })
-
-  const [register3] = useForm<typeof headerRelatives.value>({
-    localeUniqueKey: 'app.header',
-    showFeedback: false,
-    xGap: 0,
-    formItemClass: 'flex flex-row justify-between mb-2',
-    formItemComponentClass: 'w-32 flex justify-end',
-    size: 'small',
-    disabled: computed(() => !appRelatives.value.showHeader),
-    schemas: [
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.header',
-          prefix: 'bar',
-          titlePlacement: 'left',
-          foldable: true,
-        },
-        extraProp: {
-          sticky: true,
-          bgColor: modalColor,
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'height',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showBreadcrumb',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showFullScreen',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showLocale',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showDarkMode',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showLock',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showSearch',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'inverted',
-        },
-        componentProp: {
-          disabled: computed(() => appDark.isDark),
-        },
-      },
-    ],
-  })
+    // simple and violent
+    localStorage.clear()
+    location.reload()
+  }
+</script>
 
-  const [register4] = useForm<typeof breadcrumbRelatives.value>({
-    localeUniqueKey: 'app.bc',
-    showFeedback: false,
-    xGap: 0,
-    formItemClass: 'flex flex-row justify-between mb-2',
-    formItemComponentClass: 'w-32 flex justify-end',
-    size: 'small',
-    disabled: computed(
-      () =>
-        !appRelatives.value.showHeader || !headerRelatives.value.showBreadcrumb
-    ),
-    schemas: [
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.breadcrumb',
-          prefix: 'bar',
-          titlePlacement: 'left',
-          foldable: true,
-        },
-        extraProp: {
-          sticky: true,
-          bgColor: modalColor,
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showIcon',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showDropdown',
-        },
-      },
-      {
-        type: 'Base:Select',
-        formProp: {
-          path: 'separator',
-        },
-        componentProp: {
-          options: ['>', '/'].map((i) => ({ value: i, label: i })),
-        },
-      },
-    ],
-  })
+<script lang="ts">
+  export default defineComponent({
+    name: 'AppSettings',
 
-  const [register5] = useForm<typeof tabRelatives.value>({
-    localeUniqueKey: 'app.tab',
-    showFeedback: false,
-    xGap: 0,
-    formItemClass: 'flex flex-row justify-between mb-2',
-    formItemComponentClass: 'w-32 flex justify-end',
-    size: 'small',
-    disabled: computed(() => !appRelatives.value.showTabs),
-    schemas: [
-      {
-        type: 'Extend:Divider',
-        componentProp: {
-          title: 'app.settings.tab',
-          prefix: 'bar',
-          titlePlacement: 'left',
-          foldable: true,
-        },
-        extraProp: {
-          sticky: true,
-          bgColor: modalColor,
-        },
-      },
-      {
-        type: 'Base:InputNumber',
-        formProp: {
-          path: 'height',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showIcon',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'showUtils',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'contextMenu',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'sortable',
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'devtool',
-          labelHelpMessage: true,
-        },
-      },
-      {
-        type: 'Base:Select',
-        formProp: {
-          path: 'styleMode',
-        },
-        componentProp: {
-          options: Object.values(AppConstTabStyleMode).map((i) => ({
-            value: i,
-            label: i,
-          })),
-        },
-      },
-      {
-        type: 'Base:Switch',
-        formProp: {
-          path: 'persistent',
-        },
-      },
-    ],
+    components: {
+      SettingsFormTheme: createAsyncComponent(() => import('./form/theme.vue')),
+      SettingsFormApp: createAsyncComponent(() => import('./form/app.vue')),
+      SettingsFormMenu: createAsyncComponent(() => import('./form/menu.vue')),
+      SettingsFormHeader: createAsyncComponent(
+        () => import('./form/header.vue')
+      ),
+      SettingsFormBreadcrumb: createAsyncComponent(
+        () => import('./form/breadcrumb.vue')
+      ),
+      SettingsFormTab: createAsyncComponent(() => import('./form/tab.vue')),
+    },
   })
 </script>
diff --git a/src/components/App/AppSettings/shared.ts b/src/components/App/AppSettings/shared.ts
new file mode 100644
index 00000000..2455a853
--- /dev/null
+++ b/src/components/App/AppSettings/shared.ts
@@ -0,0 +1,14 @@
+import { getMergedTheme } from '@/App/src/naive/src/theme'
+
+export const modalColor = computed(
+  () => getMergedTheme.value?.Drawer.common?.modalColor
+)
+
+export const appSetting = useAppStoreSetting()
+export const lightThemeRelatives = ref(appSetting.settings.themes.light)
+export const darkThemeRelatives = ref(appSetting.settings.themes.dark)
+export const appRelatives = ref(appSetting.settings.app)
+export const menuRelatives = ref(appSetting.settings.menu)
+export const headerRelatives = ref(appSetting.settings.header)
+export const breadcrumbRelatives = ref(appSetting.settings.breadcrumb)
+export const tabRelatives = ref(appSetting.settings.tab)