perf(appSettings): split and make it async component

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>

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>

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>