feat: 修改配置列中引导关闭的逻辑

.gitignore

@@ -16,6 +16,7 @@ coverage
 components.d.ts
 package-lock.json
 pnpm-lock.yaml
+auto-imports.d.ts
 
 /cypress/videos/
 /cypress/screenshots/

src/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -38,6 +39,7 @@ declare global {
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -55,7 +57,10 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
   const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']

src/components/CustomizeColumns/src/CustomizeColumns.vue

@@ -105,13 +105,21 @@ const scrollToItem = (itemId: string) => {
 }
 
 // 系统首次加载时，会有引导操作
-let firstLoad = localStorage.getItem('firstLoadCustomizeColumns')
+let firstLoad = ref()
 const step1 = ref()
 const open1 = ref(false)
+const isShowStep1 = ref(false)
 const step2 = ref()
 const open2 = ref(false)
+const isShowStep2 = ref(false)
 const handleCloseTour = (stepStr: string) => {
-  stepStr === 'step1' ? (open1.value = false) : (open2.value = false)
+  if (stepStr === 'step1') {
+    isShowStep1.value = false
+    open1.value = false
+  } else {
+    isShowStep2.value = false
+    open2.value = false
+  }
   localStorage.setItem('firstLoadCustomizeColumns', 'true')
   // firstLoad = 'true'
 }
@@ -151,14 +159,23 @@ const getData = async (reset?: string) => {
 const params = ref()
 // rightDistance是右侧箭头消失所需要translateX的值
 const openDialog = async (paramsData: Object, rightDistance: number) => {
+  firstLoad.value = localStorage.getItem('firstLoadCustomizeColumns')
   params.value = paramsData
   dialogVisible.value = true
   await getData()
   rightArrowHideDistance.value = rightDistance
   nextTick(() => {
-    if (!firstLoad) {
+    console.log('rightArrowHideDistance', step1.value?.[0])
+    if (!firstLoad.value) {
       open1.value = true
+      isShowStep1.value = true
       open2.value = true
+      isShowStep2.value = true
+      // 五秒后关闭引导
+      setTimeout(() => {
+        handleCloseTour('step1')
+        handleCloseTour('step2')
+      }, 5000)
     }
   })
 }
@@ -383,7 +400,7 @@ defineExpose({
                     <span class="title">{{ item.label }}</span>
                     <span
                       ref="step1"
-                      v-if="hoverAllIcon === item.field || (index === 0 && !firstLoad)"
+                      v-if="hoverAllIcon === item.field || (index === 0 && isShowStep1)"
                       class="font_family icon-icon_add_b move-icon"
                       @click="handleAddSelect(item)"
                     ></span>
@@ -419,18 +436,18 @@ defineExpose({
               ></span>
               <span class="title">{{ item.label }}</span>
               <span
-                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
+                v-if="hoverSelectIcon === item.field || (index === 0 && isShowStep2)"
                 class="font_family icon-icon_moveup_b move-icon"
                 @click="handleMoveUpSelect(item)"
               ></span>
               <span
-                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
+                v-if="hoverSelectIcon === item.field || (index === 0 && isShowStep2)"
                 class="font_family icon-icon_movedown_b move-icon"
                 @click="handleMoveDownSelect(item)"
               ></span>
               <span
                 ref="step2"
-                v-if="hoverSelectIcon === item.field || (index === 0 && !firstLoad)"
+                v-if="hoverSelectIcon === item.field || (index === 0 && isShowStep2)"
                 class="font_family icon-icon_reduce_b move-icon"
                 @click="handleDeleteSelect(item)"
               ></span>
@@ -448,8 +465,8 @@ defineExpose({
       :target-area-clickable="false"
       class="step1-tour"
       v-model="open1"
-      type="primary"
       :mask="false"
+      type="primary"
       v-if="step1?.[0]"
     >
       <el-tour-step :show-close="false" :target="step1?.[0]">