From 6d9ef26ecab71d752c2c55d75aed4fb5f6c05a39 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Thu, 31 Oct 2024 18:04:51 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A2=9E=E5=8A=A0=E5=90=91=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/certd/cname/record/crud.tsx     |  12 ++
 .../src/views/certd/cname/record/index.vue    |   7 +-
 .../src/views/certd/pipeline/detail.vue       | 172 +++++++++++-------
 .../views/certd/pipeline/pipeline/index.vue   |   6 +-
 .../views/framework/home/dashboard/index.vue  |  13 +-
 .../src/views/sys/cname/provider/index.vue    |   2 +-
 6 files changed, 140 insertions(+), 72 deletions(-)

diff --git a/packages/ui/certd-client/src/views/certd/cname/record/crud.tsx b/packages/ui/certd-client/src/views/certd/cname/record/crud.tsx
index f2f78c63..a19fe246 100644
--- a/packages/ui/certd-client/src/views/certd/cname/record/crud.tsx
+++ b/packages/ui/certd-client/src/views/certd/cname/record/crud.tsx
@@ -132,6 +132,18 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
                   }
                 }
               }
+            },
+            helper: {
+              render() {
+                const closeForm = () => {
+                  crudExpose.getFormWrapperRef().close();
+                };
+                return (
+                  <router-link to={"/sys/cname/provider"} onClick={closeForm}>
+                    前往设置CNAME服务
+                  </router-link>
+                );
+              }
             }
           },
           column: {
diff --git a/packages/ui/certd-client/src/views/certd/cname/record/index.vue b/packages/ui/certd-client/src/views/certd/cname/record/index.vue
index af547f1a..67401e8a 100644
--- a/packages/ui/certd-client/src/views/certd/cname/record/index.vue
+++ b/packages/ui/certd-client/src/views/certd/cname/record/index.vue
@@ -1,7 +1,12 @@
 <template>
   <fs-page class="page-cert">
     <template #header>
-      <div class="title">CNAME记录管理</div>
+      <div class="title">
+        CNAME记录管理
+        <span class="sub">
+          <a href="https://certd.docmirror.cn/guide/feature/cname/" target="_blank">CNAME功能原理及使用说明</a>
+        </span>
+      </div>
     </template>
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #pagination-left>
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/detail.vue b/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
index a9df38a2..1feb2f9c 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
@@ -1,79 +1,127 @@
 <template>
   <fs-page class="fs-pipeline-detail">
     <pipeline-edit v-model:edit-mode="editMode" :pipeline-id="pipelineId" :options="pipelineOptionsRef"></pipeline-edit>
+    <a-tour v-model:current="tourCurrent" :open="tourOpen" :steps="tourSteps" @close="tourHandleOpen(false)" />
   </fs-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+<script lang="ts" setup>
+import { nextTick, onMounted, Ref, ref } from "vue";
 import PipelineEdit from "./pipeline/index.vue";
 import * as pluginApi from "./api.plugin";
 import * as historyApi from "./api.history";
 import * as api from "./api";
 import { useRoute } from "vue-router";
 import { PipelineDetail, PipelineOptions, PluginGroups, RunHistory } from "./pipeline/type";
+import { TourProps } from "ant-design-vue";
 
-export default defineComponent({
-  name: "PipelineDetail",
-  components: { PipelineEdit },
-  setup() {
-    const route = useRoute();
-    const pipelineId: Ref = ref(route.query.id);
-
-    const pipelineOptions: PipelineOptions = {
-      async getPipelineDetail({ pipelineId }) {
-        const detail = await api.GetDetail(pipelineId);
-        return {
-          pipeline: {
-            id: detail.pipeline.id,
-            stages: [],
-            triggers: [],
-            ...JSON.parse(detail.pipeline.content || "{}")
-          }
-        } as PipelineDetail;
-      },
-
-      async getHistoryList({ pipelineId }) {
-        const list: RunHistory[] = await historyApi.GetList({ pipelineId });
-        return list;
-      },
-
-      async getHistoryDetail({ historyId }): Promise<RunHistory> {
-        const detail = await historyApi.GetDetail({ id: historyId });
-        return detail;
-      },
-
-      async getPluginGroups() {
-        const groups = await pluginApi.GetGroups({});
-        return new PluginGroups(groups);
-      },
-
-      async doSave(pipelineConfig: any) {
-        await api.Save({
-          id: pipelineConfig.id,
-          content: JSON.stringify(pipelineConfig)
-        });
-      },
-      async doTrigger(options: { pipelineId: number; stepId?: string }) {
-        const { pipelineId, stepId } = options;
-        await api.Trigger(pipelineId, stepId);
-      }
-    };
-
-    const pipelineOptionsRef: Ref<PipelineOptions> = ref(pipelineOptions);
-
-    const editMode = ref(false);
-    if (route.query.editMode !== "false") {
-      editMode.value = true;
-    }
-
-    return {
-      pipelineOptionsRef,
-      pipelineId,
-      editMode
-    };
-  }
+defineOptions({
+  name: "PipelineDetail"
 });
+const route = useRoute();
+const pipelineId: Ref = ref(route.query.id);
+
+const pipelineOptions: PipelineOptions = {
+  async getPipelineDetail({ pipelineId }) {
+    const detail = await api.GetDetail(pipelineId);
+    onLoaded();
+    return {
+      pipeline: {
+        id: detail.pipeline.id,
+        stages: [],
+        triggers: [],
+        ...JSON.parse(detail.pipeline.content || "{}")
+      }
+    } as PipelineDetail;
+  },
+
+  async getHistoryList({ pipelineId }) {
+    const list: RunHistory[] = await historyApi.GetList({ pipelineId });
+    return list;
+  },
+
+  async getHistoryDetail({ historyId }): Promise<RunHistory> {
+    const detail = await historyApi.GetDetail({ id: historyId });
+    return detail;
+  },
+
+  async getPluginGroups() {
+    const groups = await pluginApi.GetGroups({});
+    return new PluginGroups(groups);
+  },
+
+  async doSave(pipelineConfig: any) {
+    await api.Save({
+      id: pipelineConfig.id,
+      content: JSON.stringify(pipelineConfig)
+    });
+  },
+  async doTrigger(options: { pipelineId: number; stepId?: string }) {
+    const { pipelineId, stepId } = options;
+    await api.Trigger(pipelineId, stepId);
+  }
+};
+
+const pipelineOptionsRef: Ref<PipelineOptions> = ref(pipelineOptions);
+
+const editMode = ref(false);
+if (route.query.editMode !== "false") {
+  editMode.value = true;
+}
+
+function useTour() {
+  const tourOpen = ref<boolean>(false);
+
+  const tourCurrent = ref(0);
+  //@ts-ignore
+  const tourSteps: TourProps["steps"] = ref([]);
+
+  const tourHandleOpen = (val: boolean): void => {
+    initSteps();
+    tourOpen.value = val;
+  };
+
+  function initSteps() {
+    //@ts-ignore
+    tourSteps.value = [
+      {
+        title: "恭喜创建证书流水线成功",
+        description: "这里就是我们刚创建的证书任务,点击可以修改证书申请参数",
+        target: () => {
+          return document.querySelector(".pipeline .stages .stage_0 .task");
+        }
+      },
+      {
+        title: "添加部署证书任务",
+        description: "证书申请成功之后还需要部署证书，点击这里可以添加部署任务",
+        target: () => {
+          return document.querySelector(".pipeline .stages .last-stage .tasks .task");
+        }
+      },
+      {
+        title: "手动运行流水线",
+        description: "点击此处可以手动运行流水线",
+        target: () => {
+          return document.querySelector(".pipeline .stages .first-stage .tasks .task");
+        }
+      }
+    ];
+  }
+
+  return {
+    tourOpen,
+    tourCurrent,
+    tourSteps,
+    tourHandleOpen
+  };
+}
+
+const { tourOpen, tourCurrent, tourSteps, tourHandleOpen } = useTour();
+
+async function onLoaded() {
+  await nextTick();
+  tourHandleOpen(true);
+}
 </script>
 <style lang="less">
 .page-pipeline-detail {
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
index 6066f745..f77d62e0 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
@@ -66,7 +66,7 @@
               </template>
 
               <template #item="{ element: stage, index }">
-                <div :key="stage.id" class="stage" :class="{ 'last-stage': isLastStage(index) }">
+                <div :key="stage.id" class="stage" :class="{ 'last-stage': isLastStage(index), ['stage_' + index]: true }">
                   <div class="title">
                     <text-editable v-model="stage.title" :disabled="!editMode"></text-editable>
                     <div v-plus class="icon-box stage-move-handle">
@@ -252,7 +252,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, provide, Ref, watch } from "vue";
+import { defineComponent, ref, provide, Ref, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import PiTaskForm from "./component/task-form/index.vue";
 import PiTriggerForm from "./component/trigger-form/index.vue";
@@ -261,7 +261,7 @@ import PiTaskView from "./component/task-view/index.vue";
 import PiStatusShow from "./component/status-show.vue";
 import VDraggable from "vuedraggable";
 import _ from "lodash-es";
-import { message, Modal, notification } from "ant-design-vue";
+import { message, Modal, notification, TourProps } from "ant-design-vue";
 import { nanoid } from "nanoid";
 import { PipelineDetail, PipelineOptions, PluginGroups, RunHistory } from "./type";
 import type { Runnable, Stage } from "@certd/pipeline";
diff --git a/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue b/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
index c6dd40c2..c098f110 100644
--- a/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
+++ b/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
@@ -21,9 +21,12 @@
       <div class="suggest">
         <div>
           <tutorial-button class="flex-center">
-            <a-tag color="blue" class="flex-center">
-              仅需3步，全自动申请部署证书<fs-icon class="font-size-16 ml-5" icon="mingcute:question-line"></fs-icon
-            ></a-tag>
+            <a-tooltip title="点击查看详细教程">
+              <a-tag color="blue" class="flex-center">
+                仅需3步，全自动申请部署证书
+                <fs-icon class="font-size-16 ml-5" icon="mingcute:question-line"></fs-icon>
+              </a-tag>
+            </a-tooltip>
           </tutorial-button>
           <simple-steps></simple-steps>
         </div>
@@ -79,7 +82,7 @@
           支持的部署任务列表 <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
         </template>
         <a-row :gutter="10">
-          <a-col v-for="item of pluginGroups.groups.all.plugins" class="plugin-item-col" :span="4">
+          <a-col v-for="item of pluginGroups.groups.all.plugins" :key="item.name" class="plugin-item-col" :span="4">
             <a-card>
               <a-tooltip :title="item.desc">
                 <div class="plugin-item pointer">
@@ -165,7 +168,7 @@ function transformStatusCount() {
 async function loadCount() {
   count.value = await GetStatisticCount();
   transformStatusCount();
-  count.value.historyCountPerDay = count.value.historyCountPerDay.map((item) => {
+  count.value.historyCountPerDay = count.value.historyCountPerDay.map((item: any) => {
     return {
       name: item.date,
       value: item.count
diff --git a/packages/ui/certd-client/src/views/sys/cname/provider/index.vue b/packages/ui/certd-client/src/views/sys/cname/provider/index.vue
index 028f63df..331f1282 100644
--- a/packages/ui/certd-client/src/views/sys/cname/provider/index.vue
+++ b/packages/ui/certd-client/src/views/sys/cname/provider/index.vue
@@ -5,7 +5,7 @@
         CNAME服务配置
         <span class="sub">
           此处配置的域名作为其他域名校验的代理，当别的域名需要申请证书时，通过CNAME映射到此域名上来验证所有权。好处是任何域名都可以通过此方式申请证书，也无需填写AccessSecret。
-          <a href="https://certd.docmirror.cn/guide/feature/cname/" taget="_blank">CNAME功能原理及使用说明</a>
+          <a href="https://certd.docmirror.cn/guide/feature/cname/" target="_blank">CNAME功能原理及使用说明</a>
         </span>
       </div>
     </template>