perf(views): 优化“首次使用”页面，支持显示已配置项

src/layout/UseGuidance.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { computed, ref, useTemplateRef } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 
 import ConfirmModal from '@/components/ConfirmModal.vue';
@@ -23,6 +23,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const route = useRoute();
 const router = useRouter();
 const current = ref(0);
 
@@ -74,7 +75,21 @@ const goPrevStep = async () => {
 };
 
 const goOutOfUseGuide = () => {
-  router.replace('/first-usage');
+  // 配置完成某一项时，路由查询参数 doneItems 会携带该项的页面路径，据此判断是否已经配置该项
+  let doneItems = route.query.doneItems ?? '';
+
+  if (currentStep.value.isLastStep) {
+    doneItems += route.path;
+  }
+
+  const donePaths = [...new Set((doneItems as string).split('/'))];
+
+  router.replace({
+    path: '/first-usage',
+    query: {
+      doneItems: donePaths.join('/'),
+    },
+  });
 };
 
 const confirmModalRef = useTemplateRef('confirmModal');

src/views/first-usage/FirstUsage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { t } from '@/i18n';
 
@@ -13,40 +14,45 @@ interface ConfigItem {
   description: string;
   icon: string;
   path: string;
-  done: boolean;
+  done?: boolean;
 }
 
+const route = useRoute();
+
 const configList = computed<ConfigItem[]>(() => {
-  return [
+  const configs: ConfigItem[] = [
     {
       title: t('createCustomer.createCustomer'),
       description: t('firstUsage.createCustomer'),
       icon: createCustomer,
       path: '/create-customer',
-      done: true,
     },
     {
       title: t('setupProtocol.setupProtocol'),
       description: t('firstUsage.setupProtocol'),
       icon: setupProtocol,
       path: '/setup-protocol',
-      done: false,
     },
     {
       title: t('registerGateway.registerGateway'),
       description: t('firstUsage.registerGateway'),
       icon: registerGateway,
       path: '/register-gateway',
-      done: false,
     },
     {
       title: t('createDevice.createDevice'),
       description: t('firstUsage.createDevice'),
       icon: createDevice,
       path: '/create-device',
-      done: false,
     },
   ];
+
+  // 配置完成某一项时，路由查询参数 doneItems 会携带该项的页面路径，据此判断是否已经配置该项
+  configs.forEach((item) => {
+    item.done = route.query.doneItems?.includes(item.path);
+  });
+
+  return configs;
 });
 </script>
 
@@ -62,7 +68,7 @@ const configList = computed<ConfigItem[]>(() => {
           :class="['config-container', { 'config-container-done': item.done }]"
           v-for="(item, index) in configList"
           :key="index"
-          @click="$router.push(item.path)"
+          @click="$router.push({ path: item.path, query: route.query })"
         >
           <img class="config-icon" :src="item.icon" />
           <div>