refactor(projects): perf code

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">

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

@@ -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">

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

@@ -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