refactor(projects): perf code

2024-03-24 03:02:08 +08:00 · 2024-03-24 03:02:08 +08:00 · f91ef30bd5
commit f91ef30bd5
parent 187098136e
54 changed files with 219 additions and 119 deletions
--- a/packages/materials/src/libs/page-tab/chrome-tab-bg.vue
+++ b/packages/materials/src/libs/page-tab/chrome-tab-bg.vue
@ -8,21 +8,21 @@ defineOptions({
  <svg class="size-full">
    <defs>
      <symbol id="geometry-left" viewBox="0 0 214 36">
-        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
      </symbol>
      <symbol id="geometry-right" viewBox="0 0 214 36">
-        <use xlink:href="#geometry-left"></use>
+        <use xlink:href="#geometry-left" />
      </symbol>
      <clipPath>
-        <rect width="100%" height="100%" x="0"></rect>
+        <rect width="100%" height="100%" x="0" />
      </clipPath>
    </defs>
    <svg width="51%" height="100%">
-      <use xlink:href="#geometry-left" width="214" height="36" fill="currentColor"></use>
+      <use xlink:href="#geometry-left" width="214" height="36" fill="currentColor" />
    </svg>
    <g transform="scale(-1, 1)">
      <svg width="51%" height="100%" x="-100%" y="0">
-        <use xlink:href="#geometry-right" width="214" height="36" fill="currentColor"></use>
+        <use xlink:href="#geometry-right" width="214" height="36" fill="currentColor" />
      </svg>
    </g>
  </svg>
--- a/packages/materials/src/libs/page-tab/svg-close.vue
+++ b/packages/materials/src/libs/page-tab/svg-close.vue
@ -23,7 +23,7 @@ function handleClick() {
      <path
        fill="currentColor"
        d="m563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8L295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512L196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1l216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-      ></path>
+      />
    </svg>
  </div>
 </template>
--- a/packages/uno-preset/src/index.ts
+++ b/packages/uno-preset/src/index.ts
@ -11,14 +11,15 @@ export function presetSoybeanAdmin(): Preset<Theme> {
        'flex-center': 'flex justify-center items-center',
        'flex-x-center': 'flex justify-center',
        'flex-y-center': 'flex items-center',
-        'flex-vertical': 'flex flex-col',
-        'flex-vertical-center': 'flex-center flex-col',
-        'flex-vertical-stretch': 'flex-vertical items-stretch',
+        'flex-col': 'flex flex-col',
+        'flex-col-center': 'flex-center flex-col',
+        'flex-col-stretch': 'flex-col items-stretch',
        'i-flex-center': 'inline-flex justify-center items-center',
        'i-flex-x-center': 'inline-flex justify-center',
        'i-flex-y-center': 'inline-flex items-center',
-        'i-flex-vertical': 'inline-flex flex-col',
-        'i-flex-vertical-stretch': 'i-flex-vertical items-stretch',
+        'i-flex-col': 'flex-col inline-flex',
+        'i-flex-col-center': 'flex-col i-flex-center',
+        'i-flex-col-stretch': 'i-flex-col items-stretch',
        'flex-1-hidden': 'flex-1 overflow-hidden'
      },
      {
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@ -37,7 +37,7 @@ function refresh() {
 </script>

 <template>
-  <NSpace :align="itemAlign" wrap justify="end" class="<sm:w-200px">
+  <NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px">
    <slot name="prefix"></slot>
    <slot name="default">
      <NButton size="small" ghost type="primary" @click="add">
--- a/src/components/common/exception-base.vue
+++ b/src/components/common/exception-base.vue
@ -29,7 +29,7 @@ const icon = computed(() => iconMap[props.type]);
 </script>

 <template>
-  <div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
+  <div class="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
    <div class="flex text-400px text-primary">
      <SvgIcon :local-icon="icon" />
    </div>
--- a/src/components/common/full-screen.vue
+++ b/src/components/common/full-screen.vue
@ -14,8 +14,8 @@ defineProps<Props>();

 <template>
  <ButtonIcon :key="String(full)" :tooltip-content="full ? $t('icon.fullscreenExit') : $t('icon.fullscreen')">
-    <IconGridiconsFullscreenExit v-if="full" />
-    <IconGridiconsFullscreen v-else />
+    <icon-gridicons-fullscreen-exit v-if="full" />
+    <icon-gridicons-fullscreen v-else />
  </ButtonIcon>
 </template>

--- a/src/components/common/reload-button.vue
+++ b/src/components/common/reload-button.vue
@ -14,7 +14,7 @@ defineProps<Props>();

 <template>
  <ButtonIcon :tooltip-content="$t('icon.reload')">
-    <IconAntDesignReloadOutlined :class="{ 'animate-spin animate-duration-750': loading }" />
+    <icon-ant-design-reload-outlined :class="{ 'animate-spin animate-duration-750': loading }" />
  </ButtonIcon>
 </template>

--- a/src/components/common/system-logo.vue
+++ b/src/components/common/system-logo.vue
@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
 </script>

 <template>
-  <IconLocalLogo />
+  <icon-local-logo />
 </template>

 <style scoped></style>
--- a/src/components/custom/better-scroll.vue
+++ b/src/components/custom/better-scroll.vue
@ -17,17 +17,17 @@ interface Props {

 const props = defineProps<Props>();

-const bsWrap = ref<HTMLElement>();
+const bsWrapper = ref<HTMLElement>();
 const bsContent = ref<HTMLElement>();
-const { width: wrapWidth } = useElementSize(bsWrap);
+const { width: wrapWidth } = useElementSize(bsWrapper);
 const { width, height } = useElementSize(bsContent);

 const instance = ref<BScroll>();
 const isScrollY = computed(() => Boolean(props.options.scrollY));

 function initBetterScroll() {
-  if (!bsWrap.value) return;
-  instance.value = new BScroll(bsWrap.value, props.options);
+  if (!bsWrapper.value) return;
+  instance.value = new BScroll(bsWrapper.value, props.options);
 }

 // refresh BS when scroll element size changed
@ -43,7 +43,7 @@ defineExpose({ instance });
 </script>

 <template>
-  <div ref="bsWrap" class="h-full text-left">
+  <div ref="bsWrapper" class="h-full text-left">
    <div ref="bsContent" class="inline-block" :class="{ 'h-full': !isScrollY }">
      <slot></slot>
    </div>
--- a/src/components/custom/button-icon.vue
+++ b/src/components/custom/button-icon.vue
@ -48,7 +48,7 @@ const cls = computed(() => {
 </script>

 <template>
-  <!-- define component: Button -->
+  <!-- define component start: Button -->
  <DefineButton v-slot="{ $slots, className }">
    <NButton quaternary :class="className">
      <div class="flex-center gap-8px">
@ -56,8 +56,8 @@ const cls = computed(() => {
      </div>
    </NButton>
  </DefineButton>
+  <!-- define component end: Button -->

-  <!-- template -->
  <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="98">
    <template #trigger>
      <Button :class-name="cls" v-bind="$attrs">
--- a/src/components/custom/look-forward.vue
+++ b/src/components/custom/look-forward.vue
@ -7,7 +7,7 @@ defineOptions({
 </script>

 <template>
-  <div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
+  <div class="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
    <div class="flex text-400px text-primary">
      <SvgIcon local-icon="expectation" />
    </div>
--- a/src/components/custom/wave-bg.vue
+++ b/src/components/custom/wave-bg.vue
@ -17,7 +17,7 @@ const darkColor = computed(() => getColorPalette(props.themeColor, 6));

 <template>
  <div class="absolute-lt z-1 size-full overflow-hidden">
-    <div class="absolute -right-300px -top-900px <sm:(-right-100px -top-1170px)">
+    <div class="absolute -right-300px -top-900px lt-sm:(-right-100px -top-1170px)">
      <svg height="1337" width="1337">
        <defs>
          <path
@ -36,7 +36,7 @@ const darkColor = computed(() => getColorPalette(props.themeColor, 6));
        </g>
      </svg>
    </div>
-    <div class="absolute -bottom-400px -left-200px <sm:(-bottom-760px -left-100px)">
+    <div class="absolute -bottom-400px -left-200px lt-sm:(-bottom-760px -left-100px)">
      <svg height="896" width="967.8852157128662">
        <defs>
          <path
--- a/src/hooks/chart/use-echarts.ts
+++ b/src/hooks/chart/use-echarts.ts
--- a/src/hooks/common/form.ts
+++ b/src/hooks/common/form.ts
@ -1,4 +1,5 @@
-import { ref } from 'vue';
+import { ref, toValue } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type { FormInst } from 'naive-ui';
 import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/constants/reg';
 import { $t } from '@/locales';
@ -50,11 +51,30 @@ export function useFormRules() {
    };
  }

+  /** create a rule for confirming the password */
+  function createConfirmPwdRule(pwd: string | Ref<string> | ComputedRef<string>) {
+    const confirmPwdRule: App.Global.FormRule[] = [
+      { required: true, message: $t('form.confirmPwd.required') },
+      {
+        asyncValidator: (rule, value) => {
+          if (value.trim() !== '' && value !== toValue(pwd)) {
+            return Promise.reject(rule.message);
+          }
+          return Promise.resolve();
+        },
+        message: $t('form.confirmPwd.invalid'),
+        trigger: 'input'
+      }
+    ];
+    return confirmPwdRule;
+  }
+
  return {
    patternRules,
    formRules,
    defaultRequiredRule,
-    createRequiredRule
+    createRequiredRule,
+    createConfirmPwdRule
  };
 }

--- a/src/hooks/common/icon.ts
+++ b/src/hooks/common/icon.ts
@ -0,0 +1,10 @@
+import { useSvgIconRender } from '@sa/hooks';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+
+export function useSvgIcon() {
+  const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+
+  return {
+    SvgIconVNode
+  };
+}
--- a/src/layouts/base-layout/index.vue
+++ b/src/layouts/base-layout/index.vue
@ -10,7 +10,7 @@ import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
 import ThemeDrawer from '../modules/theme-drawer/index.vue';
-import { setupMixMenuContext } from '../hooks/use-mix-menu';
+import { setupMixMenuContext } from '../context';

 defineOptions({
  name: 'BaseLayout'
--- a/src/layouts/context/index.ts
+++ b/src/layouts/context/index.ts
@ -0,0 +1,4 @@
+import { useContext } from '@sa/hooks';
+import { useMixMenu } from '../hooks';
+
+export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
--- a/src/layouts/hooks/use-mix-menu.ts
+++ b/src/layouts/hooks/use-mix-menu.ts
@ -1,6 +1,5 @@
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useContext } from '@sa/hooks';
 import { useRouteStore } from '@/store/modules/route';

 export function useMixMenu() {
@ -43,5 +42,3 @@ export function useMixMenu() {
    menus
  };
 }
-
-export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
--- a/src/layouts/modules/global-breadcrumb/index.vue
+++ b/src/layouts/modules/global-breadcrumb/index.vue
@ -26,14 +26,14 @@ function handleClickMenu(key: RouteKey) {

 <template>
  <NBreadcrumb v-if="themeStore.header.breadcrumb.visible">
-    <!-- define component: BreadcrumbContent -->
+    <!-- define component start: BreadcrumbContent -->
    <DefineBreadcrumbContent v-slot="{ breadcrumb }">
      <div class="i-flex-y-center align-middle">
        <component :is="breadcrumb.icon" v-if="themeStore.header.breadcrumb.showIcon" class="mr-4px text-icon" />
        {{ breadcrumb.label }}
      </div>
    </DefineBreadcrumbContent>
-    <!-- define component: BreadcrumbContent -->
+    <!-- define component end: BreadcrumbContent -->

    <NBreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
      <NDropdown v-if="item.options?.length" :options="item.options" @select="handleClickMenu">
--- a/src/layouts/modules/global-header/components/user-avatar.vue
+++ b/src/layouts/modules/global-header/components/user-avatar.vue
@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VNode } from 'vue';
-import { useSvgIconRender } from '@sa/hooks';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
+import { useSvgIcon } from '@/hooks/common/icon';
 import { $t } from '@/locales';
-import SvgIcon from '@/components/custom/svg-icon.vue';

 defineOptions({
  name: 'UserAvatar'
@ -13,7 +12,7 @@ defineOptions({

 const authStore = useAuthStore();
 const { routerPushByKey, toLogin } = useRouterPush();
-const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+const { SvgIconVNode } = useSvgIcon();

 function loginOrRegister() {
  toLogin();
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@ -8,7 +8,7 @@ import HorizontalMenu from '../global-menu/base-menu.vue';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import GlobalSearch from '../global-search/index.vue';
-import { useMixMenuContext } from '../../hooks/use-mix-menu';
+import { useMixMenuContext } from '../../context';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';

--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/first-level-menu.vue
@ -58,7 +58,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
  <!-- define component: MixMenuItem -->
  <DefineMixMenuItem v-slot="{ label, icon, active, isMini }">
    <div
-      class="mx-4px mb-6px flex-vertical-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 hover:bg-[rgb(0,0,0,0.08)]"
+      class="mx-4px mb-6px flex-col-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 hover:bg-[rgb(0,0,0,0.08)]"
      :class="{
        'text-primary selected-mix-menu': active,
        'text-white:65 hover:text-white': inverted,
@ -74,9 +74,9 @@ function handleClickMixMenu(menu: App.Global.Menu) {
      </p>
    </div>
  </DefineMixMenuItem>
+  <!-- define component end: MixMenuItem -->

-  <!-- template -->
-  <div class="h-full flex-vertical-stretch flex-1-hidden">
+  <div class="h-full flex-col-stretch flex-1-hidden">
    <slot></slot>
    <SimpleScrollbar>
      <MixMenuItem
--- a/src/layouts/modules/global-menu/horizontal-mix-menu.vue
+++ b/src/layouts/modules/global-menu/horizontal-mix-menu.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../hooks/use-mix-menu';
+import { useMixMenuContext } from '../../context';
 import FirstLevelMenu from './first-level-menu.vue';

 defineOptions({
--- a/src/layouts/modules/global-menu/vertical-mix-menu.vue
+++ b/src/layouts/modules/global-menu/vertical-mix-menu.vue
@ -5,7 +5,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenu } from '../../hooks/use-mix-menu';
+import { useMixMenu } from '../../hooks';
 import FirstLevelMenu from './first-level-menu.vue';
 import BaseMenu from './base-menu.vue';

@ -52,7 +52,7 @@ function handleResetActiveMenu() {
      :style="{ width: appStore.mixSiderFixed ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
    >
      <DarkModeContainer
-        class="absolute-lt h-full flex-vertical-stretch nowrap-hidden shadow-sm transition-all-300"
+        class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
        :inverted="siderInverted"
        :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
      >
--- a/src/layouts/modules/global-search/components/search-footer.vue
+++ b/src/layouts/modules/global-search/components/search-footer.vue
@ -31,6 +31,6 @@ defineOptions({ name: 'SearchFooter' });
 }

 .operate-item {
-  --at-apply: mr-6px p-2px text-20px;
+  --uno: mr-6px p-2px text-20px;
 }
 </style>
--- a/src/layouts/modules/global-sider/index.vue
+++ b/src/layouts/modules/global-sider/index.vue
@ -23,7 +23,7 @@ const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
 </script>

 <template>
-  <DarkModeContainer class="size-full flex-vertical-stretch shadow-sider" :inverted="darkMenu">
+  <DarkModeContainer class="size-full flex-col-stretch shadow-sider" :inverted="darkMenu">
    <GlobalLogo
      v-if="showLogo"
      :show-title="!appStore.siderCollapse"
--- a/src/layouts/modules/global-tab/context-menu.vue
+++ b/src/layouts/modules/global-tab/context-menu.vue
@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VNode } from 'vue';
-import { useSvgIconRender } from '@sa/hooks';
 import { $t } from '@/locales';
 import { useTabStore } from '@/store/modules/tab';
-import SvgIcon from '@/components/custom/svg-icon.vue';
+import { useSvgIcon } from '@/hooks/common/icon';

 defineOptions({
  name: 'ContextMenu'
@ -28,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
 const visible = defineModel<boolean>('visible');

 const { removeTab, clearTabs, clearLeftTabs, clearRightTabs } = useTabStore();
-const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+const { SvgIconVNode } = useSvgIcon();

 type DropdownOption = {
  key: App.Global.DropdownKey;
--- a/src/layouts/modules/global-tab/index.vue
+++ b/src/layouts/modules/global-tab/index.vue
@ -199,7 +199,7 @@ init();
    :x="dropdown.x"
    :y="dropdown.y"
    @update:visible="handleDropdownVisible"
-  ></ContextMenu>
+  />
 </template>

 <style scoped></style>
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@ -80,7 +80,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
        <template #trigger>
          <div
            class="h-64px w-96px gap-6px rd-4px p-6px shadow dark:shadow-coolGray-5"
-            :class="[key.includes('vertical') ? 'flex' : 'flex-vertical']"
+            :class="[key.includes('vertical') ? 'flex' : 'flex-col']"
          >
            <slot :name="key"></slot>
          </div>
--- a/src/layouts/modules/theme-drawer/modules/dark-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@ -26,7 +26,7 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo

 <template>
  <NDivider>{{ $t('theme.themeSchema.title') }}</NDivider>
-  <div class="flex-vertical-stretch gap-16px">
+  <div class="flex-col-stretch gap-16px">
    <div class="i-flex-center">
      <NTabs
        :key="themeStore.themeScheme"
@ -50,20 +50,13 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
 </template>

 <style scoped>
-.sider-inverted-enter-active {
-  height: 22px;
-  transition: all 0.3s ease-in-out;
-}
-
+.sider-inverted-enter-active,
 .sider-inverted-leave-active {
-  height: 22px;
-  transition: all 0.3s ease-in-out;
+  --uno: h-22px transition-all-300;
 }

 .sider-inverted-enter-from,
 .sider-inverted-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-  height: 0;
+  --uno: translate-x-20px opacity-0 h-0;
 }
 </style>
--- a/src/layouts/modules/theme-drawer/modules/layout-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
@ -60,7 +60,7 @@ const themeStore = useThemeStore();
 }

 .vertical-wrapper {
-  --uno: flex-1 flex-vertical gap-6px;
+  --uno: flex-1 flex-col gap-6px;
 }

 .horizontal-wrapper {
--- a/src/layouts/modules/theme-drawer/modules/page-fun.vue
+++ b/src/layouts/modules/theme-drawer/modules/page-fun.vue
@ -21,14 +21,14 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra

 <template>
  <NDivider>{{ $t('theme.pageFunTitle') }}</NDivider>
-  <TransitionGroup tag="div" name="setting-list" class="flex-vertical-stretch gap-12px">
+  <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
    <SettingItem key="1" :label="$t('theme.scrollMode.title')">
      <NSelect
        v-model:value="themeStore.layout.scrollMode"
        :options="translateOptions(themeScrollModeOptions)"
        size="small"
        class="w-120px"
-      ></NSelect>
+      />
    </SettingItem>
    <SettingItem key="1-1" :label="$t('theme.page.animate')">
      <NSwitch v-model:value="themeStore.page.animate" />
@ -108,16 +108,15 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
 .setting-list-move,
 .setting-list-enter-active,
 .setting-list-leave-active {
-  transition: all 0.3s ease-in-out;
+  --uno: transition-all-300;
 }

 .setting-list-enter-from,
 .setting-list-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
+  --uno: opacity-0 -translate-x-30px;
 }

 .setting-list-leave-active {
-  position: absolute;
+  --uno: absolute;
 }
 </style>
--- a/src/layouts/modules/theme-drawer/modules/theme-color.vue
+++ b/src/layouts/modules/theme-drawer/modules/theme-color.vue
@ -35,7 +35,7 @@ const swatches: string[] = [

 <template>
  <NDivider>{{ $t('theme.themeColor.title') }}</NDivider>
-  <div class="flex-vertical-stretch gap-12px">
+  <div class="flex-col-stretch gap-12px">
    <SettingItem v-for="(_, key) in themeStore.themeColors" :key="key" :label="$t(`theme.themeColor.${key}`)">
      <template v-if="key === 'info'" #suffix>
        <NCheckbox v-model:checked="themeStore.isInfoFollowPrimary">
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@ -393,6 +393,10 @@ const local: App.I18n.Schema = {
      required: 'Please enter password',
      invalid: 'Password format is incorrect'
    },
+    confirmPwd: {
+      required: 'Please enter password again',
+      invalid: 'The two passwords are inconsistent'
+    },
    code: {
      required: 'Please enter verification code',
      invalid: 'Verification code format is incorrect'
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@ -393,6 +393,10 @@ const local: App.I18n.Schema = {
      required: '请输入密码',
      invalid: '密码格式不正确'
    },
+    confirmPwd: {
+      required: '请输入确认密码',
+      invalid: '两次输入密码不一致'
+    },
    code: {
      required: '请输入验证码',
      invalid: '验证码格式不正确'
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@ -32,7 +32,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
   *
   * @param duration Duration time
   */
-  async function reloadPage(duration = 0) {
+  async function reloadPage(duration = 300) {
    setReloadFlag(false);

    if (duration > 0) {
--- a/src/store/modules/auth/index.ts
+++ b/src/store/modules/auth/index.ts
@ -81,7 +81,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
      // 2. store user info
      localStg.set('userInfo', info);

-      // 3. update auth route
+      // 3. update store
      token.value = loginToken.token;
      Object.assign(userInfo, info);

--- a/src/store/modules/route/index.ts
+++ b/src/store/modules/route/index.ts
@ -104,7 +104,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
  }

  /**
-   * Re-cache routes by route key
+   * Re cache routes by route key
   *
   * @param routeKey
   */
@ -117,7 +117,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
  }

  /**
-   * Re-cache routes by route keys
+   * Re cache routes by route keys
   *
   * @param routeKeys
   */
--- a/src/store/modules/route/shared.ts
+++ b/src/store/modules/route/shared.ts
@ -1,8 +1,7 @@
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw, _RouteRecordBase } from 'vue-router';
 import type { ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
-import { useSvgIconRender } from '@sa/hooks';
 import { $t } from '@/locales';
-import SvgIcon from '@/components/custom/svg-icon.vue';
+import { useSvgIcon } from '@/hooks/common/icon';

 /**
 * Filter auth routes by roles
@ -130,7 +129,7 @@ export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
 * @param route
 */
 function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | ElegantConstRoute) {
-  const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+  const { SvgIconVNode } = useSvgIcon();

  const { name, path } = route;
  const { title, i18nKey, icon = import.meta.env.VITE_MENU_ICON, localIcon } = route.meta ?? {};
--- a/src/store/modules/tab/shared.ts
+++ b/src/store/modules/tab/shared.ts
@ -78,7 +78,7 @@ export function getTabByRoute(route: App.Global.TabRoute) {
 }

 /**
- * The vue router will automatically merge the metas of all matched items, and the icons here may be affected by other
+ * The vue router will automatically merge the meta of all matched items, and the icons here may be affected by other
 * matching items, so they need to be processed separately
 *
 * @param route
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@ -567,6 +567,7 @@ declare namespace App {
        userName: FormMsg;
        phone: FormMsg;
        pwd: FormMsg;
+        confirmPwd: FormMsg;
        code: FormMsg;
        email: FormMsg;
      };
--- a/src/typings/union-key.d.ts
+++ b/src/typings/union-key.d.ts
@ -3,11 +3,11 @@ declare namespace UnionKey {
  /**
   * The login module
   *
-   * - Pwd-login: password login
-   * - Code-login: phone code login
-   * - Register: register
-   * - Reset-pwd: reset password
-   * - Bind-wechat: bind wechat
+   * - pwd-login: password login
+   * - code-login: phone code login
+   * - register: register
+   * - reset-pwd: reset password
+   * - bind-wechat: bind wechat
   */
  type LoginModule = 'pwd-login' | 'code-login' | 'register' | 'reset-pwd' | 'bind-wechat';

@ -17,10 +17,10 @@ declare namespace UnionKey {
  /**
   * The layout mode
   *
-   * - Vertical: the vertical menu in left
-   * - Horizontal: the horizontal menu in top
-   * - Vertical-mix: two vertical mixed menus in left
-   * - Horizontal-mix: the vertical menu in left and horizontal menu in top
+   * - vertical: the vertical menu in left
+   * - horizontal: the horizontal menu in top
+   * - vertical-mix: two vertical mixed menus in left
+   * - horizontal-mix: the vertical menu in left and horizontal menu in top
   */
  type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';

@ -38,8 +38,8 @@ declare namespace UnionKey {
  /**
   * Tab mode
   *
-   * - Chrome: chrome style
-   * - Button: button style
+   * - chrome: chrome style
+   * - button: button style
   */
  type ThemeTabMode = import('@sa/materials').PageTabMode;

--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@ -25,23 +25,19 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();

 interface LoginModule {
-  key: UnionKey.LoginModule;
  label: string;
  component: Component;
 }

-const modules: LoginModule[] = [
-  { key: 'pwd-login', label: loginModuleRecord['pwd-login'], component: PwdLogin },
-  { key: 'code-login', label: loginModuleRecord['code-login'], component: CodeLogin },
-  { key: 'register', label: loginModuleRecord.register, component: Register },
-  { key: 'reset-pwd', label: loginModuleRecord['reset-pwd'], component: ResetPwd },
-  { key: 'bind-wechat', label: loginModuleRecord['bind-wechat'], component: BindWechat }
-];
+const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
+  'pwd-login': { label: loginModuleRecord['pwd-login'], component: PwdLogin },
+  'code-login': { label: loginModuleRecord['code-login'], component: CodeLogin },
+  register: { label: loginModuleRecord.register, component: Register },
+  'reset-pwd': { label: loginModuleRecord['reset-pwd'], component: ResetPwd },
+  'bind-wechat': { label: loginModuleRecord['bind-wechat'], component: BindWechat }
+};

-const activeModule = computed(() => {
-  const findItem = modules.find(item => item.key === props.module);
-  return findItem || modules[0];
-});
+const activeModule = computed(() => moduleMap[props.module]);

 const bgThemeColor = computed(() =>
  themeStore.darkMode ? getColorPalette(themeStore.themeColor, 7) : themeStore.themeColor
@ -60,15 +56,15 @@ const bgColor = computed(() => {
  <div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
    <WaveBg :theme-color="bgThemeColor" />
    <NCard :bordered="false" class="relative z-4 w-auto rd-12px">
-      <div class="w-400px <sm:w-300px">
+      <div class="w-400px lt-sm:w-300px">
        <header class="flex-y-center justify-between">
-          <SystemLogo class="text-64px text-primary <sm:text-48px" />
-          <h3 class="text-28px text-primary font-500 <sm:text-22px">{{ $t('system.title') }}</h3>
-          <div class="i-flex-vertical">
+          <SystemLogo class="text-64px text-primary lt-sm:text-48px" />
+          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</h3>
+          <div class="i-flex-col">
            <ThemeSchemaSwitch
              :theme-schema="themeStore.themeScheme"
              :show-tooltip="false"
-              class="text-20px <sm:text-18px"
+              class="text-20px lt-sm:text-18px"
              @switch="themeStore.toggleThemeScheme"
            />
            <LangSwitch
--- a/src/views/_builtin/login/modules/pwd-login.vue
+++ b/src/views/_builtin/login/modules/pwd-login.vue
@ -25,7 +25,8 @@ const model: FormModel = reactive({
 });

 const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
-  const { formRules } = useFormRules(); // inside computed to make locale reactive
+  // inside computed to make locale reactive, if not apply i18n, you can define it without computed
+  const { formRules } = useFormRules();

  return {
    userName: formRules.userName,
@ -48,13 +49,16 @@ async function handleSubmit() {
      <NInput
        v-model:value="model.password"
        type="password"
+        show-password-on="mousedown"
        :placeholder="$t('page.login.common.passwordPlaceholder')"
      />
    </NFormItem>
    <NSpace vertical :size="24">
      <div class="flex-y-center justify-between">
        <NCheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
-        <NButton quaternary>{{ $t('page.login.pwdLogin.forgetPassword') }}</NButton>
+        <NButton quaternary @click="toggleLoginModule('reset-pwd')">
+          {{ $t('page.login.pwdLogin.forgetPassword') }}
+        </NButton>
      </div>
      <NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="handleSubmit">
        {{ $t('common.confirm') }}
--- a/src/views/_builtin/login/modules/reset-pwd.vue
+++ b/src/views/_builtin/login/modules/reset-pwd.vue
@ -1,11 +1,81 @@
 <script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { $t } from '@/locales';
+import { useRouterPush } from '@/hooks/common/router';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+
 defineOptions({
  name: 'ResetPwd'
 });
+
+const { toggleLoginModule } = useRouterPush();
+const { formRef, validate } = useNaiveForm();
+
+interface FormModel {
+  phone: string;
+  code: string;
+  password: string;
+  confirmPassword: string;
+}
+
+const model: FormModel = reactive({
+  phone: '',
+  code: '',
+  password: '',
+  confirmPassword: ''
+});
+
+type RuleRecord = Partial<Record<keyof FormModel, App.Global.FormRule[]>>;
+
+const rules = computed<RuleRecord>(() => {
+  const { formRules, createConfirmPwdRule } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    password: formRules.pwd,
+    confirmPassword: createConfirmPwdRule(model.password)
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  // request to reset password
+}
 </script>

 <template>
-  <div></div>
+  <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
+    <NFormItem path="phone">
+      <NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
+    </NFormItem>
+    <NFormItem path="code">
+      <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+    </NFormItem>
+    <NFormItem path="password">
+      <NInput
+        v-model:value="model.password"
+        type="password"
+        show-password-on="mousedown"
+        :placeholder="$t('page.login.common.passwordPlaceholder')"
+      />
+    </NFormItem>
+    <NFormItem path="confirmPassword">
+      <NInput
+        v-model:value="model.confirmPassword"
+        type="password"
+        show-password-on="mousedown"
+        :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
+      />
+    </NFormItem>
+    <NSpace vertical :size="18" class="w-full">
+      <NButton type="primary" size="large" round block @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </NButton>
+      <NButton size="large" round block @click="toggleLoginModule('pwd-login')">
+        {{ $t('page.login.common.back') }}
+      </NButton>
+    </NSpace>
+  </NForm>
 </template>

 <style scoped></style>
--- a/src/views/function/hide-child/one/index.vue
+++ b/src/views/function/hide-child/one/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts"></script>

 <template>
-  <div>one</div>
+  <LookForward />
 </template>

 <style scoped></style>
--- a/src/views/function/hide-child/three/index.vue
+++ b/src/views/function/hide-child/three/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts"></script>

 <template>
-  <div>three</div>
+  <LookForward />
 </template>

 <style scoped></style>
--- a/src/views/function/hide-child/two/index.vue
+++ b/src/views/function/hide-child/two/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts"></script>

 <template>
-  <div>two</div>
+  <LookForward />
 </template>

 <style scoped></style>
--- a/src/views/home/modules/creativity-banner.vue
+++ b/src/views/home/modules/creativity-banner.vue
@ -9,7 +9,7 @@ defineOptions({
 <template>
  <NCard :title="$t('page.home.creativity')" :bordered="false" size="small" class="h-full card-wrapper">
    <div class="h-full flex-center">
-      <IconLocalBanner class="text-400px text-primary sm:text-320px" />
+      <icon-local-banner class="text-400px text-primary sm:text-320px" />
    </div>
  </NCard>
 </template>
--- a/src/views/home/modules/line-chart.vue
+++ b/src/views/home/modules/line-chart.vue
@ -2,7 +2,7 @@
 import { watch } from 'vue';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
-import { useEcharts } from '@/hooks/chart/use-echarts';
+import { useEcharts } from '@/hooks/common/echarts';

 defineOptions({
  name: 'LineChart'
--- a/src/views/home/modules/pie-chart.vue
+++ b/src/views/home/modules/pie-chart.vue
@ -2,7 +2,7 @@
 import { watch } from 'vue';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
-import { useEcharts } from '@/hooks/chart/use-echarts';
+import { useEcharts } from '@/hooks/common/echarts';

 defineOptions({
  name: 'PieChart'
--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@ -227,7 +227,7 @@ init();
 </script>

 <template>
-  <div ref="wrapperRef" class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+  <div ref="wrapperRef" class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@ -128,7 +128,7 @@ function edit(id: number) {
 </script>

 <template>
-  <div class="min-h-500px flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@ -158,7 +158,7 @@ function edit(id: number) {
 </script>

 <template>
-  <div class="min-h-500px flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>