refactor(projects): perf code

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>

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>

packages/uno-preset/src/index.ts

@@ -11,14 +11,14 @@ 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-stretch': 'i-flex-col items-stretch',
         'flex-1-hidden': 'flex-1 overflow-hidden'
       },
       {

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>

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>
 

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>
 

src/components/common/system-logo.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
 </script>
 
 <template>
-  <IconLocalLogo />
+  <icon-local-logo />
 </template>
 
 <style scoped></style>

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>

src/components/custom/button-icon.vue

@@ -55,16 +55,16 @@ function getPopupContainer(triggerNode: HTMLElement) {
 </script>
 
 <template>
-  <!-- define component: Button -->
+  <!-- define component start: Button -->
   <DefineButton v-slot="{ $slots, className }">
     <AButton type="text" :class="className">
       <div class="flex-center gap-8px">
         <component :is="$slots.default" />
       </div>
     </AButton>
   </DefineButton>
+  <!-- define component end: Button -->
 
-  <!-- template -->
   <ATooltip
     v-if="tooltipContent"
     :placement="tooltipPlacement"

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>

src/components/custom/wave-bg.vue

@@ -15,7 +15,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
@@ -34,7 +34,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

src/hooks/common/form.ts

@@ -1,62 +1,80 @@
-import { ref } from 'vue';
+import { ref, toValue } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type { FormInstance } from 'ant-design-vue';
 import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/constants/reg';
 import { $t } from '@/locales';
 
 export function useFormRules() {
-  const constantRules = {
-    userName: [
-      createRequiredRule($t('form.userName.required')),
-      {
-        pattern: REG_USER_NAME,
-        message: $t('form.userName.invalid'),
-        trigger: 'change'
-      }
-    ],
-    phone: [
-      createRequiredRule($t('form.phone.required')),
-      {
-        pattern: REG_PHONE,
-        message: $t('form.phone.invalid'),
-        trigger: 'change'
-      }
-    ],
-    pwd: [
-      createRequiredRule($t('form.pwd.required')),
-      {
-        pattern: REG_PWD,
-        message: $t('form.pwd.invalid'),
-        trigger: 'change'
-      }
-    ],
-    code: [
-      createRequiredRule($t('form.code.required')),
-      {
-        pattern: REG_CODE_SIX,
-        message: $t('form.code.invalid'),
-        trigger: 'change'
-      }
-    ],
-    email: [
-      createRequiredRule($t('form.email.required')),
-      {
-        pattern: REG_EMAIL,
-        message: $t('form.email.invalid'),
-        trigger: 'change'
-      }
-    ]
+  const patternRules = {
+    userName: {
+      pattern: REG_USER_NAME,
+      message: $t('form.userName.invalid'),
+      trigger: 'change'
+    },
+    phone: {
+      pattern: REG_PHONE,
+      message: $t('form.phone.invalid'),
+      trigger: 'change'
+    },
+    pwd: {
+      pattern: REG_PWD,
+      message: $t('form.pwd.invalid'),
+      trigger: 'change'
+    },
+    code: {
+      pattern: REG_CODE_SIX,
+      message: $t('form.code.invalid'),
+      trigger: 'change'
+    },
+    email: {
+      pattern: REG_EMAIL,
+      message: $t('form.email.invalid'),
+      trigger: 'change'
+    }
+  } satisfies Record<string, App.Global.FormRule>;
+
+  const formRules = {
+    userName: [createRequiredRule($t('form.userName.required')), patternRules.userName],
+    phone: [createRequiredRule($t('form.phone.required')), patternRules.phone],
+    pwd: [createRequiredRule($t('form.pwd.required')), patternRules.pwd],
+    code: [createRequiredRule($t('form.code.required')), patternRules.code],
+    email: [createRequiredRule($t('form.email.required')), patternRules.email]
   } satisfies Record<string, App.Global.FormRule[]>;
 
+  /** the default required rule */
+  const defaultRequiredRule = createRequiredRule($t('form.required'));
+
   function createRequiredRule(message: string) {
     return {
       required: true,
       message
     };
   }
 
+  /** 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') },
+      {
+        validator: (rule, value) => {
+          if (value.trim() !== '' && value !== toValue(pwd)) {
+            return Promise.reject(rule.message);
+          }
+          return Promise.resolve();
+        },
+        message: $t('form.confirmPwd.invalid'),
+        trigger: 'change'
+      }
+    ];
+    return confirmPwdRule;
+  }
+
   return {
-    constantRules,
-    createRequiredRule
+    patternRules,
+    formRules,
+    defaultRequiredRule,
+    createRequiredRule,
+    createConfirmPwdRule
   };
 }
 

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
+  };
+}

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'

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);

src/layouts/hooks/use-mix-menu.ts → src/layouts/hooks/index.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);

src/layouts/modules/global-breadcrumb/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
 import type { RouteKey } from '@elegant-router/types';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
@@ -12,25 +13,35 @@ const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKey } = useRouterPush();
 
+interface BreadcrumbContentProps {
+  breadcrumb: App.Global.Menu;
+}
+
+const [DefineBreadcrumbContent, BreadcrumbContent] = createReusableTemplate<BreadcrumbContentProps>();
+
 function handleClickMenu(key: RouteKey) {
   routerPushByKey(key);
 }
 </script>
 
 <template>
   <ABreadcrumb v-if="themeStore.header.breadcrumb.visible">
-    <ABreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
+    <!-- define component start: BreadcrumbContent -->
+    <DefineBreadcrumbContent v-slot="{ breadcrumb }">
       <div class="i-flex-y-center align-middle">
-        <component :is="item.icon" v-if="themeStore.header.breadcrumb.showIcon" class="mr-4px text-icon" />
-        {{ item.label }}
+        <component :is="breadcrumb.icon" v-if="themeStore.header.breadcrumb.showIcon" class="mr-4px text-icon" />
+        {{ breadcrumb.label }}
       </div>
+    </DefineBreadcrumbContent>
+    <!-- define component end: BreadcrumbContent -->
+
+    <ABreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
+      <BreadcrumbContent :breadcrumb="item" />
+
       <template v-if="item.children?.length" #overlay>
         <AMenu>
           <AMenuItem v-for="option in item.children" :key="option.key" @click="handleClickMenu(option.routeKey)">
-            <div class="flex-y-center gap-12px">
-              <component :is="option.icon" />
-              <span>{{ option.label }}</span>
-            </div>
+            <BreadcrumbContent :breadcrumb="option" />
           </AMenuItem>
         </AMenu>
       </template>

src/layouts/modules/global-header/components/user-avatar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Modal } from 'ant-design-vue';
+import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
 import { $t } from '@/locales';
-import { useAuthStore } from '@/store/modules/auth';
 
 defineOptions({
   name: 'UserAvatar'