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")],
+      // },
     ],
   },
   {

packages/ui/certd-client/src/layout/layout-basic.vue

@@ -83,7 +83,7 @@ provide("fn:ai.open", openChat);
     </template>
     <template #header-right-0>
       <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full hidden md:block">
-        <tutorial-button class="flex-center header-btn" />
+        <tutorial-button class="flex-center header-btn" mode="nav" />
       </div>
       <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
         <vip-button class="flex-center header-btn" mode="nav" />

packages/ui/certd-client/src/locales/langs/en-US/certd.ts

@@ -19,6 +19,7 @@ export default {
     legoCertPipeline: "Lego Certificate Pipeline",
     customPipeline: "Custom Pipeline",
     batchAddPipeline: "Add Pipeline Use Template",
+    myPipelinesDesc: "Pipeline Mode: Apply -> Deploy -> Schedule",
   },
   order: {
     confirmTitle: "Order Confirmation",

packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts

@@ -23,6 +23,7 @@ export default {
     legoCertPipeline: "Lego证书流水线",
     customPipeline: "自定义流水线",
     batchAddPipeline: "模版批量创建流水线",
+    myPipelinesDesc: "流水线模式：申请证书->部署证书->定时运行",
   },
   order: {
     confirmTitle: "订单确认",

packages/ui/certd-client/src/views/certd/monitor/site/ip/crud.tsx

@@ -167,8 +167,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             show: true,
           },
           type: "text",
-          helper: t("certd.helperIpCname"),
           form: {
+            helper: t("certd.helperIpCname"),
             rules: [{ required: true, message: t("certd.ruleIpRequired") }],
           },
           column: {

packages/ui/certd-client/src/views/certd/pipeline/index.vue

@@ -1,7 +1,10 @@
 <template>
   <fs-page class="page-cert">
     <template #header>
-      <div class="title">{{ t("certd.myPipelines") }}</div>
+      <div class="title">
+        {{ t("certd.myPipelines") }}
+        <div class="sub">{{ t("certd.pipelinePage.myPipelinesDesc") }}</div>
+      </div>
     </template>
     <!-- <a-alert v-if="settingStore.sysPublic.notice" type="warning" show-icon>
       <template #message>

packages/ui/certd-client/src/views/framework/home/dashboard/index.vue

@@ -138,32 +138,33 @@
         </a-row>
       </a-card>
     </div>
+    <a-tour v-bind="tour" v-model:current="tour.current" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { FsIcon } from "@fast-crud/fast-crud";
-import SimpleSteps from "/@/components/tutorial/simple-steps.vue";
-import { useUserStore } from "/@/store/user";
-import { computed, ComputedRef, onMounted, Ref, ref } from "vue";
+import { notification } from "ant-design-vue";
 import dayjs from "dayjs";
-import StatisticCard from "/@/views/framework/home/dashboard/statistic-card.vue";
-import TutorialButton from "/@/components/tutorial/index.vue";
-import DayCount from "./charts/day-count.vue";
-import PieCount from "./charts/pie-count.vue";
-import ExpiringList from "./charts/expiring-list.vue";
-import SuiteCard from "./suite-card.vue";
-import { useSettingStore } from "/@/store/settings";
-import { SiteInfo } from "/@/store/settings/api.basic";
-import { UserInfoRes } from "/@/store/user/api.user";
-import { GetStatisticCount } from "/@/views/framework/home/dashboard/api";
+import { computed, ComputedRef, onMounted, Ref, ref } from "vue";
 import { useRouter } from "vue-router";
 import * as api from "./api";
+import DayCount from "./charts/day-count.vue";
+import ExpiringList from "./charts/expiring-list.vue";
+import NoticeBar from "./notice-bar.vue";
+import SuiteCard from "./suite-card.vue";
+import TutorialButton from "/@/components/tutorial/index.vue";
+import SimpleSteps from "/@/components/tutorial/simple-steps.vue";
+import { usePluginStore } from "/@/store/plugin";
+import { useSettingStore } from "/@/store/settings";
+import { SiteInfo } from "/@/store/settings/api.basic";
+import { useUserStore } from "/@/store/user";
+import { UserInfoRes } from "/@/store/user/api.user";
+import { LocalStorage } from "/@/utils/util.storage";
+import { GetStatisticCount } from "/@/views/framework/home/dashboard/api";
+import StatisticCard from "/@/views/framework/home/dashboard/statistic-card.vue";
 import { useI18n } from "/src/locales";
 const { t } = useI18n();
-import { usePluginStore } from "/@/store/plugin";
-import { notification } from "ant-design-vue";
-import NoticeBar from "./notice-bar.vue";
 defineOptions({
   name: "DashboardUser",
 });
@@ -291,6 +292,9 @@ onMounted(async () => {
   loadLatestVersion();
   loadCount();
   loadPluginGroups();
+  // if (count.value.pipelineCount === 0) {
+  tourHandleOpen(true);
+  // }
 });
 
 function openUpgradeUrl() {
@@ -325,6 +329,50 @@ const noticeList = computed(() => {
 
   return list;
 });
+
+function useTour() {
+  const tour = ref({
+    open: false,
+    current: 0,
+    steps: [],
+    onClose: () => {
+      tour.value.open = false;
+      LocalStorage.set("home-tour-off", true, 999999999);
+    },
+    onFinish: () => {
+      tour.value.open = false;
+      LocalStorage.set("home-tour-off", true, 999999999);
+    },
+  });
+
+  const tourHandleOpen = (val: boolean): void => {
+    // if (LocalStorage.get("home-tour-off")) {
+    //   return;
+    // }
+    initSteps();
+    tour.value.open = val;
+  };
+
+  function initSteps() {
+    //@ts-ignore
+    tour.value.steps = [
+      {
+        title: "您是第一次使用吗？",
+        description: "此处可以查看新手教程哦 ↑↑↑↑",
+        target: () => {
+          return document.querySelector("header .tutorial-button");
+        },
+      },
+    ];
+  }
+
+  return {
+    tour,
+    tourHandleOpen,
+  };
+}
+
+const { tour, tourHandleOpen } = useTour();
 </script>
 
 <style lang="less">