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>