feat: 调整首页

src/components/VDriverGuide/src/VDriverGuide.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <el-button style="height: 24px; margin-left: 8px" class="driver-guide-btn el-button--text">
+  <el-button id="page-guide-btn-guide" class="driver-guide-btn el-button--text">
     <span class="font_family icon-icon_guidelines_b" style="color: var(--color-theme)"></span>
     <span
       style="
@@ -17,4 +17,12 @@
   </el-button>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.driver-guide-btn {
+  height: 24px;
+  margin-left: 8px;
+  span {
+    color: var(--color-theme);
+  }
+}
+</style>

src/stores/modules/guide.ts

@@ -17,7 +17,8 @@ export const useGuideStore = defineStore('guide', {
     dashboard: {
       isShowViewManagementGuidePhoto: false,
       isShowTransportModeGuidePhoto: false,
-      isShowSaveConfigGuidePhoto: false
+      isShowSaveConfigGuidePhoto: false,
+      isShowKpiChartGuidePhoto: false
     }
   })
 })

src/utils/driverGuide.ts

@@ -3,6 +3,7 @@ import 'driver.js/dist/driver.css'
 import nextBtnImg from '@/assets/image/next-btn.png'
 import previousBtnImg from '@/assets/image/pervious-btn.png'
 import doneBtnImg from '@/assets/image/done-btn.png'
+import { set } from 'lodash'
 
 /**
  * useDriver composable
@@ -43,6 +44,13 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
         img.style.height = '32px'
         previousBtn.appendChild(img)
       }
+    },
+    onHighlightStarted: (element, step, options) => {
+      if (!driverInstance.hasNextStep()) {
+        setTimeout(() => {
+          driverInstance.destroy()
+        }, 3000)
+      }
     }
   })
 
@@ -55,6 +63,8 @@ export function useDriver(steps: DriveStep[], globalConfig?: Config) {
     highlight: (step: DriveStep) => driverInstance.highlight(step),
     destroy: () => driverInstance.destroy(),
     isActive: () => driverInstance.isActive(),
+    hasNextStep: () => driverInstance.hasNextStep(),
+    moveTo: (stepIndex: number) => driverInstance.moveTo(stepIndex),
     driverInstance
   }
 }

src/views/Dashboard/src/DashboardView.vue

@@ -790,6 +790,8 @@ import viewManagementLight from './guideImage/view-management.png'
 import viewManagementDark from './guideImage/dark-view-management.png'
 import saveConfigLight from './guideImage/save-config-guide.png'
 import saveConfigDark from './guideImage/dark-save-config-guide.png'
+import kpiChartLight from './guideImage/kpi-chart-guide.png'
+import kpiChartDark from './guideImage/dark-kpi-chart-guide.png'
 
 const themeStore = useThemeStore()
 
@@ -799,6 +801,9 @@ const viewManagementImg = computed(() => {
 const saveConfigImg = computed(() => {
   return themeStore.theme === 'dark' ? saveConfigDark : saveConfigLight
 })
+const kpiChartImg = computed(() => {
+  return themeStore.theme === 'dark' ? kpiChartDark : kpiChartLight
+})
 const guideStore = useGuideStore()
 const handleGuide = () => {
   dashboardGuideRef.value?.startGuide()
@@ -942,10 +947,12 @@ const dashboardGuideRef = ref(null)
               :isShowDragIconGudie="true"
             >
               <template #header>
-                <div style="position: relative" class="Title_flex">
+                <div class="Title_flex" style="position: relative">
                   <img
+                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
+                    id="kpi-chart-guide"
                     class="kpi-chart-guide-class"
-                    src="./guideImage/kpi-chart-guide.png"
+                    :src="kpiChartImg"
                     alt=""
                   />
                   <div>
@@ -1368,10 +1375,10 @@ const dashboardGuideRef = ref(null)
 .kpi-chart-guide-class {
   position: absolute;
   top: -1px;
-  right: -17px;
-  width: 343px;
+  right: -1px;
+  width: 589px;
   height: 478px;
-  z-index: 1500;
+  z-index: 3500;
 }
 
 .Management {
@@ -1562,3 +1569,8 @@ const dashboardGuideRef = ref(null)
   margin-bottom: 0;
 }
 </style>
+<style lang="scss">
+:not(body):has(> img.driver-active-element) {
+  overflow: visible !important;
+}
+</style>

src/views/Dashboard/src/components/DashboardGuide.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { useDriver } from '@/utils/driverGuide'
 import { useGuideStore } from '@/stores/modules/guide'
-import { useThemeStore } from '@/stores/modules/theme'
-
-const themeStore = useThemeStore()
 
 const guideStore = useGuideStore()
 
@@ -27,6 +24,15 @@ const steps: any = [
       side: 'bottom'
     }
   },
+  {
+    element: '#kpi-chart-guide',
+    popover: {
+      title: '',
+      description:
+        'Click the icon next to the report name to view the data explanation for each report.',
+      side: 'bottom'
+    }
+  },
   {
     element: '#drag-icon-guide',
     popover: {
@@ -43,39 +49,72 @@ const steps: any = [
       description: 'Click "Save Layout" to preserve your customized report arrangement.',
       side: 'bottom'
     }
+  },
+  {
+    element: '#page-guide-btn-guide',
+    popover: {
+      title: '',
+      description:
+        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+      side: 'bottom'
+    }
   }
 ]
 
-const { start, moveNext, movePrevious, destroy } = useDriver(steps, {
+const { start, moveNext, movePrevious, destroy, hasNextStep, moveTo } = useDriver(steps, {
   onNextClick: (element, step, options) => {
-    console.log('onNextClick', options?.state?.activeIndex)
     if (options?.state?.activeIndex === 0) {
       dashboardGuideStore.isShowViewManagementGuidePhoto = false
       dashboardGuideStore.isShowTransportModeGuidePhoto = true
     } else if (options?.state?.activeIndex === 1) {
       dashboardGuideStore.isShowTransportModeGuidePhoto = false
+      dashboardGuideStore.isShowKpiChartGuidePhoto = true
     } else if (options?.state?.activeIndex === 2) {
+      dashboardGuideStore.isShowKpiChartGuidePhoto = false
+    } else if (options?.state?.activeIndex === 3) {
       dashboardGuideStore.isShowSaveConfigGuidePhoto = true
+    } else if (options?.state?.activeIndex === 4) {
+      dashboardGuideStore.isShowSaveConfigGuidePhoto = false
     }
     nextTick(() => {
       moveNext() // 执行下一步
     })
   },
   onPrevClick: (element, step, options) => {
-    console.log('onNextClick', options?.state?.activeIndex)
     if (options?.state?.activeIndex === 1) {
       dashboardGuideStore.isShowViewManagementGuidePhoto = true
+      dashboardGuideStore.isShowTransportModeGuidePhoto = false
+    } else if (options?.state?.activeIndex === 2) {
+      dashboardGuideStore.isShowTransportModeGuidePhoto = true
+      dashboardGuideStore.isShowKpiChartGuidePhoto = false
+    } else if (options?.state?.activeIndex === 3) {
+      dashboardGuideStore.isShowKpiChartGuidePhoto = true
+      dashboardGuideStore.isShowSaveConfigGuidePhoto = false
+    } else if (options?.state?.activeIndex === 4) {
+      dashboardGuideStore.isShowSaveConfigGuidePhoto = false
+    } else if (options?.state?.activeIndex === 5) {
+      dashboardGuideStore.isShowSaveConfigGuidePhoto = true
     }
     nextTick(() => {
       movePrevious() // 执行上一步
     })
   },
   // 关闭导览时，隐藏所有图片
-  onDestroyStarted: () => {
+  onDestroyStarted: (element, step, options) => {
+    if (hasNextStep()) {
+      moveTo(options.config.steps.length - 1) // 如果还有下一步，跳转到下一步
+
+      dashboardGuideStore.isShowViewManagementGuidePhoto = false
+      dashboardGuideStore.isShowTransportModeGuidePhoto = false
+      dashboardGuideStore.isShowSaveConfigGuidePhoto = false
+      dashboardGuideStore.isShowKpiChartGuidePhoto = false
+      return
+    }
     // showExtraHighlights.value = false // 隐藏额外高亮
     dashboardGuideStore.isShowViewManagementGuidePhoto = false
     dashboardGuideStore.isShowTransportModeGuidePhoto = false
     dashboardGuideStore.isShowSaveConfigGuidePhoto = false
+    dashboardGuideStore.isShowKpiChartGuidePhoto = false
     nextTick(() => {
       destroy() // 销毁导览
     }) // 确保在下一次DOM更新后执行销毁
@@ -97,22 +136,4 @@ defineExpose({
   <div></div>
 </template>
 
-<style lang="scss" scoped>
-.position-absolute {
-  position: absolute;
-  z-index: 1200;
-}
-
-.download-file-guide-class {
-  right: 204px;
-  top: 245px;
-  width: 488px;
-  height: 333px;
-}
-.customize-columns-guide-class {
-  right: 24px;
-  top: 246px;
-  width: 515px;
-  height: 353px;
-}
-</style>
+<style lang="scss" scoped></style>