chore: perf style

vben
1 parent a0b05e77
Showing 5 changed files with 39 additions and 19 deletions
src/components/Basic/src/BasicArrow.vue
src/components/Basic/src/BasicHelp.vue
src/components/Basic/src/BasicTitle.vue
src/components/ClickOutSide/src/index.vue
src/layouts/default/multitabs/index.tsx
@@ -11,6 +11,7 @@
   import { defineComponent, computed } from 'vue';
   import { RightOutlined } from '@ant-design/icons-vue';
   import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
  
   export default defineComponent({
     name: 'BasicArrow',
@@ -23,12 +24,14 @@
       inset: propTypes.bool,
     },
     setup(props) {
+      const { prefixCls } = useDesign('basic-arrow');
+
       const getClass = computed(() => {
         const { expand, top, bottom, inset } = props;
         return [
-          'base-arrow',
+          prefixCls,
           {
-            'base-arrow__active': expand,
+            [`${prefixCls}--active`]: expand,
             top,
             inset,
             bottom,
@@ -43,18 +46,21 @@
   });
 </script>
 <style lang="less" scoped>
-  .base-arrow {
+  @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-basic-arrow';
+
+  .@{prefix-cls} {
     display: inline-block;
     transform: rotate(0deg);
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
  
-    &.inset {
-      line-height: 0px;
+    &--active {
+      transform: rotate(90deg);
     }
  
-    &__active {
-      transform: rotate(90deg);
+    &.inset {
+      line-height: 0px;
     }
  
     &.top {
@@ -65,11 +71,11 @@
       transform: rotate(90deg);
     }
  
-    &.top.base-arrow__active {
+    &.top.@{prefix-cls}--active {
       transform: rotate(90deg);
     }
  
-    &.bottom.base-arrow__active {
+    &.bottom.@{prefix-cls}--active {
       transform: rotate(-90deg);
     }
   }
@@ -9,6 +9,7 @@
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
   import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
   export default defineComponent({
     name: 'BasicHelp',
     components: { Tooltip },
@@ -37,6 +38,8 @@
       },
     },
     setup(props, { slots }) {
+      const { prefixCls } = useDesign('basic-help');
+
       const getOverlayStyleRef = computed(
         (): CSSProperties => {
           return {
@@ -86,7 +89,7 @@
               },
               [renderTitle()]
             ),
-            overlayClassName: 'base-help__wrap',
+            overlayClassName: `${prefixCls}__wrap`,
             autoAdjustOverflow: true,
             overlayStyle: unref(getOverlayStyleRef),
             placement: props.placement,
@@ -97,7 +100,7 @@
               h(
                 'span',
                 {
-                  class: 'base-help',
+                  class: prefixCls,
                   style: unref(getMainStyleRef),
                 },
                 getSlot(slots) || h(InfoCircleOutlined)
@@ -110,8 +113,9 @@
 </script>
 <style lang="less">
   @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-basic-help';
  
-  .base-help {
+  .@{prefix-cls} {
     display: inline-block;
     margin-left: 6px;
     font-size: 14px;
 <template>
-  <span class="base-title" :class="{ 'show-span': span && $slots.default }">
+  <span :class="[prefixCls, { 'show-span': span && $slots.default }]">
     <slot />
-    <BasicHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
+    <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
   </span>
 </template>
 <script lang="ts">
@@ -11,6 +11,7 @@
  
   import BasicHelp from './BasicHelp.vue';
   import { propTypes } from '/@/utils/propTypes';
+  import { useDesign } from '/@/hooks/web/useDesign';
  
   export default defineComponent({
     name: 'BasicTitle',
@@ -22,12 +23,17 @@
       },
       span: propTypes.bool,
     },
+    setup() {
+      const { prefixCls } = useDesign('basic-title');
+      return { prefixCls };
+    },
   });
 </script>
 <style lang="less" scoped>
   @import (reference) '../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-basic-title';
  
-  .base-title {
+  .@{prefix-cls} {
     position: relative;
     display: flex;
     padding-left: 7px;
 <template>
-  <div ref="wrapRef"><slot /></div>
+  <div ref="wrap"><slot /></div>
 </template>
 <script lang="ts">
   import type { Ref } from 'vue';
@@ -10,13 +10,13 @@
   export default defineComponent({
     name: 'ClickOutSide',
     setup(_, { emit }) {
-      const wrapRef = ref<ElRef>(null);
+      const wrap = ref<ElRef>(null);
  
-      useClickOutside(wrapRef as Ref<HTMLDivElement>, () => {
+      useClickOutside(wrap as Ref<HTMLDivElement>, () => {
         emit('clickOutside');
       });
  
-      return { wrapRef };
+      return { wrap };
     },
   });
 </script>
@@ -16,6 +16,7 @@ import { tabStore } from &#39;/@/store/modules/tab&#39;;
 import { userStore } from '/@/store/modules/user';
  
 import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
+import { REDIRECT_NAME } from '/@/router/constant';
  
 export default defineComponent({
   name: 'MultipleTabs',
@@ -35,6 +36,9 @@ export default defineComponent({
     watch(
       () => tabStore.getLastChangeRouteState?.path,
       () => {
+        if (tabStore.getLastChangeRouteState?.name === REDIRECT_NAME) {
+          return;
+        }
         const lastChangeRoute = unref(tabStore.getLastChangeRouteState);
         if (!lastChangeRoute || !userStore.getTokenState) return;
         const { path, fullPath } = lastChangeRoute;