perf: 首次使用提示新手教程按钮

packages/ui/certd-client/src/components/tutorial/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import TutorialSteps from "/@/components/tutorial/tutorial-steps.vue";
+import { mitter } from "/@/utils/util.mitt";
+import { useI18n } from "/@/locales";
 
 defineOptions({
   name: "TutorialModal",
@@ -8,6 +10,7 @@ defineOptions({
 
 const props = defineProps<{
   showIcon?: boolean;
+  mode?: string;
 }>();
 
 const openedRef = ref(false);
@@ -15,17 +18,26 @@ function open() {
   openedRef.value = true;
 }
 const slots = defineSlots();
+
+onMounted(() => {
+  mitter.on("openTutorialModal", () => {
+    if (props.mode === "nav") {
+      open();
+    }
+  });
+});
+const { t } = useI18n();
 </script>
 
 <template>
   <div class="tutorial-button pointer" @click="open">
     <template v-if="!slots.default">
       <fs-icon v-if="showIcon === false" icon="ant-design:question-circle-outlined" class="mr-0.5"></fs-icon>
-      <div class="hidden md:block">{{ $t("tutorial.title") }}</div>
+      <div class="hidden md:block">{{ t("tutorial.title") }}</div>
     </template>
     <slot></slot>
     <a-modal v-model:open="openedRef" class="tutorial-modal" width="90%">
-      <template #title>{{ $t("tutorial.title") }}</template>
+      <template #title>{{ t("tutorial.title") }}</template>
       <tutorial-steps v-if="openedRef" />
       <template #footer></template>
     </a-modal>

packages/ui/certd-client/src/components/tutorial/tutorial-steps.vue

@@ -6,7 +6,7 @@
       <div class="text">
         <h3 class="title">{{ number }} {{ currentStepItem.title }}</h3>
         <div class="description mt-5">
-          <div v-for="desc of currentStepItem.descriptions">{{ desc }}</div>
+          <div v-for="(desc, index) of currentStepItem.descriptions" :key="index">{{ desc }}</div>
         </div>
         <div v-if="currentStepItem.body">
           <fs-render :render-func="currentStepItem.body" />
@@ -29,9 +29,12 @@
 <script setup lang="tsx">
 import { FsRender } from "@fast-crud/fast-crud";
 import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
 import SimpleSteps from "./simple-steps.vue";
+
+const props = defineProps<{
+  mode?: string;
+}>();
+const { t } = useI18n();
 type Step = {
   title: string;
   subTitle?: string;
@@ -69,10 +72,10 @@ const steps = ref<Step[]>([
         title: t("guide.createCertPipeline.items.successTitle"),
         descriptions: [t("guide.createCertPipeline.items.successDesc")],
       },
-      {
-        title: t("guide.createCertPipeline.items.nextTitle"),
-        descriptions: [t("guide.createCertPipeline.items.nextDesc")],
-      },
+      // {
+      //   title: t("guide.createCertPipeline.items.nextTitle"),
+      //   descriptions: [t("guide.createCertPipeline.items.nextDesc")],
+      // },
     ],
   },
   {