perf: 部署插件支持ucloud alb

perf: 优化首页图标
chore: tour
2026-07-26 13:57:46 +08:00 · 2026-01-27 00:32:23 +08:00 · 2026-01-27 00:32:03 +08:00 · 2026-01-26 19:07:29 +08:00 · 2026-01-26 18:49:16 +08:00
25 changed files with 501 additions and 106 deletions
@@ -39,7 +39,7 @@ Certd® 是一个免费的全自动证书管理系统，让你的网站证书永
 * **站点证书监控**： 定时监控网站证书的过期时间
 * **多用户管理**： 用户可以管理自己的证书流水线
 * **多语言支持**： 中英双语切换
-* **一键无忧升级**： 版本向下兼容
+* **无忧升级**： 版本向下兼容


  ![](./docs/images/intro/intro.svg)
@@ -15,6 +15,8 @@ Certd 是一款开源、免费、全自动申请和部署更新SSL证书的工

 ![首页](../images/start/home.png)

+![](../images/start/first.png)
+
 ## 1、关于证书续期
 >* 实际上没有办法不改变证书文件本身情况下直接续期或者续签。
 >* 我们所说的续期，其实就是按照全套流程重新申请一份新证书，然后重新部署上去。
@@ -15,3 +15,4 @@
 ## 2. 图文教程链接
 如果不方便登录系统，您还可以直接查看 [图文教程](https://gitee.com/certd/certd/blob/v2/step.md)

+![alt text](../images/start/first.png)
@@ -1,5 +1,5 @@
 import { HttpClient, ILogger, utils } from "@certd/basic";
-import { IAccess, IServiceGetter, Pager, PageRes, PageSearch, Registrable } from "@certd/pipeline";
+import { IAccess, IServiceGetter, PageRes, PageSearch, Registrable } from "@certd/pipeline";

 export type DnsProviderDefine = Registrable & {
  accessType: string;
@@ -1,8 +1,8 @@
-import { Pager, PageRes, PageSearch } from "@certd/pipeline";
+import { HttpClient, ILogger } from "@certd/basic";
+import { PageRes, PageSearch } from "@certd/pipeline";
+import punycode from "punycode.js";
 import { CreateRecordOptions, DnsProviderContext, DnsProviderDefine, DomainRecord, IDnsProvider, RemoveRecordOptions } from "./api.js";
 import { dnsProviderRegistry } from "./registry.js";
-import { HttpClient, ILogger } from "@certd/basic";
-import punycode from "punycode.js";
 export abstract class AbstractDnsProvider<T = any> implements IDnsProvider<T> {
  ctx!: DnsProviderContext;
  http!: HttpClient;
@@ -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>
@@ -1,8 +1,8 @@
 <template>
-  <a-steps :current="3" class="mt-10" size="small" :items="steps" @click="goPipeline"></a-steps>
+  <a-steps :current="3" class="mt-10 simple-steps" size="small" :items="steps" @click="goPipeline"></a-steps>
 </template>

-<script lang="ts" setup>
+<script lang="tsx" setup>
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";

@@ -11,14 +11,26 @@ const { t } = useI18n();
 type Step = {
  title: string;
  description?: string;
+  icon?: any;
 };

 import { ref } from "vue";
+import { mitter } from "/@/utils/util.mitt";

-const steps = ref<Step[]>([{ title: t("certd.steps.createPipeline") }, { title: t("certd.steps.addTask") }, { title: t("certd.steps.scheduledRun") }]);
+const steps = ref<Step[]>([
+  { title: t("certd.steps.createPipeline"), icon: <fs-icon icon="tabler:circle-number-1-filled"></fs-icon> },
+  { title: t("certd.steps.addTask"), icon: <fs-icon icon="tabler:circle-number-2-filled"></fs-icon> },
+  { title: t("certd.steps.scheduledRun"), icon: <fs-icon icon="tabler:circle-number-3-filled"></fs-icon> },
+]);

-const router = useRouter();
 function goPipeline() {
-  router.push({ path: "/certd/pipeline" });
+  mitter.emit("openTutorialModal");
 }
 </script>
+<style lang="less">
+.simple-steps {
+  .fs-icon {
+    font-size: 18px !important;
+  }
+}
+</style>
@@ -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")],
+      // },
    ],
  },
  {
@@ -252,7 +255,7 @@ function previewMask() {
    flex: 1;
    padding: 20px;
    .text {
-      width: 350px;
+      width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
@@ -3,7 +3,7 @@
 </template>

 <script lang="tsx" setup>
-import { ref, watch, defineOptions } from "vue";
+import { ref, watch } from "vue";
 import { routerUtils } from "/@/utils/util.router";
 import { useRoute } from "vue-router";
 import { utils } from "@fast-crud/fast-crud";
@@ -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" />
@@ -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",
@@ -3,9 +3,9 @@ export default {
    title: "Create Certificate Application Pipeline",
    description: "Demonstrate how to configure a certificate application task",
    items: {
-      tutorialTitle: "Tutorial Demo Content",
-      tutorialDesc1: "This tutorial demonstrates how to automatically apply for a certificate and deploy it to Nginx",
-      tutorialDesc2: "Only 3 steps, fully automatic application and deployment",
+      tutorialTitle: "This tutorial demonstrates how to automatically apply for a certificate and deploy it to Nginx",
+      tutorialDesc1: "Only 3 steps, fully automatic application and deployment",
+      tutorialDesc2: "",
      createTitle: "Create Certificate Pipeline",
      createDesc: "Click to add a certificate pipeline and fill in the certificate application information",
      successTitle: "Pipeline Created Successfully",
@@ -23,6 +23,7 @@ export default {
    legoCertPipeline: "Lego证书流水线",
    customPipeline: "自定义流水线",
    batchAddPipeline: "模版批量创建流水线",
+    myPipelinesDesc: "流水线模式：申请证书->部署证书->定时运行",
  },
  order: {
    confirmTitle: "订单确认",
@@ -3,9 +3,9 @@ export default {
    title: "创建证书申请流水线",
    description: "演示证书申请任务如何配置",
    items: {
-      tutorialTitle: "教程演示内容",
-      tutorialDesc1: "本教程演示如何自动申请证书并部署到Nginx上",
-      tutorialDesc2: "仅需3步，全自动申请部署证书",
+      tutorialTitle: "本教程演示如何自动申请证书并部署到Nginx上",
+      tutorialDesc1: "仅需3步，全自动申请部署证书",
+      tutorialDesc2: "",
      createTitle: "创建证书流水线",
      createDesc: "点击添加证书流水线，填写证书申请信息",
      successTitle: "流水线创建成功",
@@ -86,6 +86,11 @@ h6 {
  align-items: baseline;
 }

+.flex-evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+
 .flex {
  display: flex;
 }
@@ -312,7 +317,11 @@ h6 {
 }

 .fs-16 {
-  font-size: 16px;
+  font-size: 16px !important;
+}
+
+.fs-28 {
+  font-size: 28px !important;
 }

 .w-50\% {
@@ -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: {
@@ -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>
@@ -67,7 +67,7 @@
    <div class="statistic-data m-20">
      <a-row :gutter="20" class="flex-wrap">
        <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
+          <statistic-card icon="fluent-color:data-line-24" :title="t('certd.dashboard.pipelineCount')" :count="count.pipelineCount" :sub-counts="count.pipelineEnableCount">
            <template v-if="count.pipelineCount === 0" #default>
              <div class="flex-center flex-1 flex-col">
                <div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noPipeline") }}</div>
@@ -85,7 +85,7 @@
          </statistic-card>
        </a-col> -->
        <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
+          <statistic-card icon="fluent-color:certificate-24" :title="t('certd.dashboard.certCount')" :count="count.certCount" :sub-counts="count.certStatusCount">
            <template v-if="count.certCount === 0" #default>
              <div class="flex-center flex-1 flex-col">
                <div style="font-size: 18px; font-weight: 700">{{ t("certd.dashboard.noCert") }}</div>
@@ -97,12 +97,12 @@
          </statistic-card>
        </a-col>
        <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.recentRun')" :footer="false">
+          <statistic-card icon="fluent-color:data-trending-24" :title="t('certd.dashboard.recentRun')" :footer="false">
            <day-count v-if="count.historyCountPerDay" :data="count.historyCountPerDay" :title="t('certd.dashboard.runCount')"></day-count>
          </statistic-card>
        </a-col>
        <a-col :md="6" :xs="24">
-          <statistic-card :title="t('certd.dashboard.expiringCerts')">
+          <statistic-card icon="fluent-color:alert-urgent-24" :title="t('certd.dashboard.expiringCerts')">
            <expiring-list v-if="count.expiringList" :data="count.expiringList"></expiring-list>
          </statistic-card>
        </a-col>
@@ -112,8 +112,11 @@
    <div v-if="pluginGroups" class="plugin-list">
      <a-card>
        <template #title>
-          {{ t("certd.dashboard.supportedTasks") }}
-          <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
+          <div class="flex items-center">
+            <fs-icon icon="fluent-color:puzzle-piece-24" class="mr-5 fs-28" />
+            <div class="mr-5">{{ t("certd.dashboard.supportedTasks") }}</div>
+            <a-tag color="green">{{ pluginGroups.groups.all.plugins.length }}</a-tag>
+          </div>
        </template>
        <a-row :gutter="10">
          <a-col v-for="item of pluginGroups.groups.all.plugins" :key="item.name" class="plugin-item-col" :xl="4" :md="6" :xs="24">
@@ -138,32 +141,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",
 });
@@ -263,7 +267,7 @@ function transformStatusCount() {
  const certCount = count.value.certCount;
  count.value.certStatusCount = [
    { name: t("certd.dashboard.certExpiredCount"), value: certCount.expired, color: "red", checkIcon: "mingcute:warning-fill:#f44336" },
-    { name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800" },
+    { name: t("certd.dashboard.certExpiringCount"), value: certCount.expiring, color: "yellow", checkIcon: "mingcute:alert-fill:#ff9800", title: "到期不足15天" },
    { name: t("certd.dashboard.certNoExpireCount"), value: certCount.notExpired, color: "green" },
  ];
  count.value.certCount = certCount.total;
@@ -291,6 +295,9 @@ onMounted(async () => {
  loadLatestVersion();
  loadCount();
  loadPluginGroups();
+  if (count.value.pipelineCount === 0) {
+    tourHandleOpen(true);
+  }
 });

 function openUpgradeUrl() {
@@ -325,6 +332,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">
@@ -3,7 +3,10 @@
    <a-card>
      <div class="data-item">
        <div class="header">
-          <div class="title">{{ title }}</div>
+          <div class="title">
+            <fs-icon :icon="icon" class="statistic-icon"></fs-icon>
+            {{ title }}
+          </div>
          <div class="more"></div>
        </div>
        <div class="content">
@@ -11,11 +14,11 @@
            <div v-if="count !== 0" class="value flex items-center w-full">
              <div class="total flex-center flex-1 flex-col">
                <span>{{ count }}</span>
-                <span class="title">{{ title }}</span>
+                <span class="sub-title">{{ title }}</span>
              </div>
              <a-divider type="vertical h-10"></a-divider>
-              <div class="sub flex-1 flex-col h-[80%] flex-between pl-4">
-                <div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full">
+              <div class="sub flex-1 flex-col h-[80%] flex-evenly pl-4">
+                <div v-for="item in subCounts" :key="item.name" class="sub-item flex justify-center w-full" :title="item.title">
                  <div class="flex items-center w-[60%] ellipsis overflow-hidden">
                    <div class="status-indicator" :class="`bg-${item.color}`"></div>
                    {{ item.name }}：
@@ -43,6 +46,7 @@
 <script setup lang="ts">
 import { FsIcon } from "@fast-crud/fast-crud";
 const props = defineProps<{
+  icon: string;
  title: string;
  count?: number;
  subCounts?: {
@@ -50,6 +54,7 @@ const props = defineProps<{
    value: number;
    color: string;
    checkIcon?: string;
+    title?: string;
  }[];
 }>();
 const slots = defineSlots();
@@ -58,6 +63,9 @@ const slots = defineSlots();
 .statistic-card {
  margin-bottom: 10px;

+  .ant-card-body {
+    padding: 15px 24px;
+  }
  .icon-text {
    display: inline-flex;
    justify-content: left;
@@ -72,13 +80,33 @@ const slots = defineSlots();
  .data-item {
    display: flex;
    flex-direction: column;
-    height: 188px;
+    height: 200px;

    .header {
      display: flex;
      justify-content: space-between;
-      //padding-bottom: 10px;
-      color: #8077a4;
+      margin-top: 6px;
+      margin-bottom: 6px;
+      color: #494949;
+      align-items: center;
+
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      .more {
+        display: flex;
+        align-items: center;
+      }
+
+      .statistic-icon {
+        font-size: 28px;
+        margin-right: 5px;
+      }
    }

    .content {
@@ -96,13 +124,12 @@ const slots = defineSlots();
        .value {
          font-size: 50px;
          font-weight: 700;
-          color: #323232;
-
          .total {
-            .title {
-              font-size: 14px;
+            color: hsl(var(--primary));
+            .sub-title {
+              font-size: 12px;
              font-weight: 400;
-              color: #8077a4;
+              color: #626262;
            }
          }

@@ -137,9 +164,6 @@ const slots = defineSlots();
          }
        }
      }
-
-      x-vue-echarts {
-      }
    }

    .footer {
@@ -157,8 +181,6 @@ const slots = defineSlots();
      > * {
        cursor: pointer;
      }
-
-      margin-bottom: -10px;
    }
  }
 }
@@ -6,6 +6,9 @@ import { createHtmlPlugin } from "vite-plugin-html";
 import { loadEnv } from "vite";
 import * as path from "path";
 import DefineOptions from "unplugin-vue-define-options/vite";
+import { theme } from "ant-design-vue";
+const { defaultAlgorithm, defaultSeed } = theme;
+const mapToken = defaultAlgorithm(defaultSeed);
 // import WindiCSS from "vite-plugin-windicss";
 // import { generateModifyVars } from "./build/modify-vars";
 // import { configThemePlugin } from "./build/theme-plugin";
@@ -76,7 +79,7 @@ export default ({ command, mode }) => {
          // 修改默认主题颜色，配置less变量
          // modifyVars: generateModifyVars(),
          javascriptEnabled: true,
-          // modifyVars: mapToken
+          modifyVars: mapToken,
        },
      },
    },
@@ -1,5 +1,5 @@
-import { AccessInput, BaseAccess, IsAccess } from '@certd/pipeline';
-import { isDev } from '../../utils/env.js';
+import { AccessInput, BaseAccess, IsAccess, Pager, PageRes, PageSearch } from '@certd/pipeline';
+import { DomainRecord } from '@certd/plugin-lib';

 /**
 * 这个注解将注册一个授权配置
@@ -8,42 +8,125 @@ import { isDev } from '../../utils/env.js';
@IsAccess({
  name: 'demo',
  title: '授权插件示例',
-  icon: 'clarity:plugin-line',
-  desc: '',
+  icon: 'clarity:plugin-line', //插件图标
+  desc: '这是一个示例授权插件，用于演示如何实现一个授权插件',
 })
 export class DemoAccess extends BaseAccess {
+
+   /**
+   * 授权属性配置
+   */
+  @AccessInput({
+    title: '授权方式',
+    value: 'apiKey', //默认值
+    component: {
+      name: "a-select", //基于antdv的输入组件
+      vModel: "value", // v-model绑定的属性名
+      options: [ //组件参数
+        { label: "API密钥（推荐）", value: "apiKey" },
+        { label: "账号密码", value: "account" },
+      ],
+      placeholder: 'demoKeyId',
+    },
+    required: true,
+  })
+  apiType = '';
+
  /**
   * 授权属性配置
   */
  @AccessInput({
    title: '密钥Id',
    component: {
+      name:"a-input",
+      allowClear: true,
      placeholder: 'demoKeyId',
    },
    required: true,
  })
  demoKeyId = '';

-  /**
-   * 授权属性配置
-   */
  @AccessInput({
-    //标题
-    title: '密钥串',
-    component: {
-      //input组件的placeholder
-      placeholder: 'demoKeySecret',
-    },
-    //是否必填
-    required: true,
-    //改属性是否需要加密
-    encrypt: true,
+    title: '密钥',//标题
+    required: true,  //text组件可以省略
+    encrypt: true, //该属性是否需要加密
  })
-  //属性名称
  demoKeySecret = '';
-}

-if (isDev()) {
-  //你的实现 要去掉这个if，不然生产环境将不会显示
-  new DemoAccess();
+
+  @AccessInput({
+    title: "测试",
+    component: {
+      name: "api-test",
+      action: "TestRequest"
+    },
+    helper: "点击测试接口是否正常"
+  })
+  testRequest = true;
+
+  /**
+   * 会通过上面的testRequest参数在ui界面上生成测试按钮，供用户测试接口调用是否正常
+   */
+  async onTestRequest() {
+    await this.GetDomainList({});
+    return "ok"
+  }
+
+  /**
+   * 获api接口示例 取域名列表，
+   */
+  async GetDomainList(req: PageSearch): Promise<PageRes<DomainRecord>> {
+    //输出日志必须使用ctx.logger
+    this.ctx.logger.info(`获取域名列表，req:${JSON.stringify(req)}`);
+    const pager = new Pager(req);
+    const resp = await this.doRequest({
+      action: "ListDomains",
+      data: {
+        domain: req.searchKey,
+        offset: pager.getOffset(),
+        limit: pager.pageSize,
+      }
+    });
+    const total = resp?.TotalCount || 0;
+    let list = resp?.DomainList?.map((item) => {
+      item.domain = item.Domain;
+      item.id = item.DomainId;
+      return item;
+    })
+    return {
+      total,
+      list
+    };
+  }
+
+  // 还可以继续编写API
+
+  /**
+   *  通用api调用方法, 具体如何构造请求体，需参考对应应用的API文档
+   */
+  async doRequest(req: { action: string, data?: any }) {
+    /**
+        this.ctx中包含很多有用的工具类
+        type AccessContext = {
+          http: HttpClient;
+          logger: ILogger;
+          utils: typeof utils;
+          accessService: IAccessService;
+        }
+     */
+    const res = await this.ctx.http.request({
+      url: "https://api.demo.cn/api/",
+      method: "POST",
+      data: {
+        Action: req.action,
+        Body: req.data
+      }
+    });
+
+    if (res.Code !== 0) {
+      //异常处理 
+      throw new Error(res.Message || "请求失败");
+    }
+    return res.Resp;
+  }
 }
@@ -1,4 +1,4 @@
-import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
+import { AbstractTaskPlugin, IsTaskPlugin, PageSearch, pluginGroups, RunStrategy, TaskInput } from '@certd/pipeline';
 import { CertInfo, CertReader } from '@certd/plugin-cert';
 import { createCertDomainGetterInputDefine, createRemoteSelectInputDefine } from '@certd/plugin-lib';
 import { optionsUtils } from '@certd/basic';
@@ -171,7 +171,7 @@ export class DemoTest extends AbstractTaskPlugin {
  }

  //此方法演示，如何让前端在添加插件时可以从后端获取选项，这里是后端返回选项的方法
-  async onGetSiteList() {
+  async onGetSiteList(req: PageSearch) {
    if (!this.accessId) {
      throw new Error('请选择Access授权');
    }
@@ -179,13 +179,7 @@ export class DemoTest extends AbstractTaskPlugin {
    // @ts-ignore
    const access = await this.getAccess(this.accessId);

-    // const siteRes = await this.ctx.http.request({
-    //   url: '你的服务端获取选项的请求地址',
-    //   method: 'GET',
-    //   data: {
-    //    token:access.xxxx
-    //   }, //请求参数
-    // });
+    // const siteRes = await access.GetDomainList(req);
    //以下是模拟数据
    const siteRes = [
      { id: 1, siteName: 'site1.com' },
@@ -204,5 +198,3 @@ export class DemoTest extends AbstractTaskPlugin {
    return optionsUtils.buildGroupOptions(options, this.certDomains);
  }
 }
-//实例化一下，注册插件
-new DemoTest();
@@ -1,3 +1,4 @@
 export * from './plugin-deploy-to-cdn.js';
 export * from './plugin-upload-to-ussl.js';
 export * from './plugin-deploy-to-waf.js';
+export * from './plugin-deploy-to-alb.js';
@@ -0,0 +1,199 @@
+import { AbstractTaskPlugin, IsTaskPlugin, PageSearch, pluginGroups, RunStrategy, TaskInput } from "@certd/pipeline";
+import { CertApplyPluginNames, CertInfo } from "@certd/plugin-cert";
+import { createCertDomainGetterInputDefine, createRemoteSelectInputDefine } from "@certd/plugin-lib";
+import { UCloudAccess } from "../access.js";
+
+@IsTaskPlugin({
+  name: "UCloudDeployToALB",
+  title: "UCloud-部署到ALB",
+  desc: "将证书部署到UCloud ALB(应用负载均衡)",
+  icon: "svg:icon-ucloud",
+  group: pluginGroups.ucloud.key,
+  needPlus: false,
+  default: {
+    strategy: {
+      runStrategy: RunStrategy.SkipWhenSucceed
+    }
+  }
+})
+export class UCloudDeployToALB extends AbstractTaskPlugin {
+  @TaskInput({
+    title: "域名证书",
+    helper: "请选择前置任务输出的域名证书",
+    component: {
+      name: "output-selector",
+      from: [...CertApplyPluginNames, ":UCloudCertId:"]
+    }
+  })
+  cert!: CertInfo | { type: string, id: number, name: string };
+
+  @TaskInput(createCertDomainGetterInputDefine({ props: { required: false } }))
+  certDomains!: string[];
+
+  @TaskInput({
+    title: "UCloud授权",
+    component: {
+      name: "access-selector",
+      type: "ucloud"
+    },
+    required: true
+  })
+  accessId!: string;
+
+  @TaskInput(
+    createRemoteSelectInputDefine({
+      title: "负载均衡实例",
+      helper: "选择ULB负载均衡实例",
+      action: UCloudDeployToALB.prototype.onGetULBList.name
+    })
+  )
+  ulbId!: string;
+
+  @TaskInput(
+    createRemoteSelectInputDefine({
+      title: "监听器列表",
+      helper: "要更新的ALB监听器列表",
+      action: UCloudDeployToALB.prototype.onGetVServerList.name
+    })
+  )
+  vServerList!: string[];
+
+  async onInstance() {
+  }
+
+  async execute(): Promise<void> {
+    const access = await this.getAccess<UCloudAccess>(this.accessId);
+    let certType = "ussl"
+    let certId = 0
+    
+    if (this.cert && typeof this.cert === 'object' && 'id' in this.cert) {
+      certId = this.cert.id
+    } else {
+      const cert = await access.SslUploadCert({
+        cert: this.cert as CertInfo
+      });
+      certId = cert.id
+    }
+
+    for (const item of this.vServerList) {
+      this.logger.info(`----------- 开始更新监听器：${item}`);
+      await this.deployToAlb({
+        access: access,
+        ulbId: this.ulbId,
+        vServerId: item,
+        certId: certId,
+        certType: certType
+      });
+      this.logger.info(`----------- 更新监听器证书${item}成功`);
+    }
+
+    this.logger.info("部署完成");
+  }
+
+  async deployToAlb(req: { access: any, ulbId: string, vServerId: string, certId: number, certType: string }) {
+    const { access, ulbId, vServerId, certId, certType } = req
+
+    this.logger.info(`----------- 获取监听器${vServerId}配置`);
+    const vServerRes = await access.invoke({
+      "Action": "DescribeVServer",
+      "ProjectId": access.projectId,
+      "ULBId": ulbId,
+      "VServerId": vServerId
+    });
+
+    const vServer = vServerRes.VServerSet?.[0];
+    if (!vServer) {
+      throw new Error(`没有找到监听器${vServerId}`);
+    }
+
+    this.logger.info(`----------- 更新ALB监听器HTTPS配置${vServerId}`);
+    const resp = await access.invoke({
+      "Action": "UpdateVServerAttribute",
+      "ProjectId": access.projectId,
+      "ULBId": ulbId,
+      "VServerId": vServerId,
+      "SSLMode": "port",
+      "CertificateId": certId,
+      "CertificateType": certType
+    });
+    this.logger.info(`----------- 部署ALB证书${vServerId}成功，${JSON.stringify(resp)}`);
+  }
+
+  async onGetULBList(req: PageSearch = {}) {
+    const access = await this.getAccess<UCloudAccess>(this.accessId);
+
+    const pageNo = req.pageNo ?? 1;
+    const pageSize = req.pageSize ?? 100;
+    
+    const res = await access.invoke({
+      "Action": "DescribeULB",
+      "ProjectId": access.projectId,
+      "Offset": (pageNo - 1) * pageSize,
+      "Limit": pageSize
+    });
+
+    const total = res.TotalCount || 0;
+    const list = res.Dataset || [];
+    
+    if (!list || list.length === 0) {
+      throw new Error("没有找到ULB实例，请先在控制台创建ULB实例");
+    }
+
+    const options = list.map((item: any) => {
+      return {
+        label: `${item.Name || item.ULBId}<${item.ULBId}>`,
+        value: `${item.ULBId}`
+      };
+    });
+
+    return {
+      list: options,
+      total: total,
+      pageNo: pageNo,
+      pageSize: pageSize
+    };
+  }
+
+  async onGetVServerList(req: PageSearch = {}) {
+    const access = await this.getAccess<UCloudAccess>(this.accessId);
+
+    if (!this.ulbId) {
+      throw new Error("请先选择ULB负载均衡实例");
+    }
+
+    const pageNo = req.pageNo ?? 1;
+    const pageSize = req.pageSize ?? 100;
+    
+    const res = await access.invoke({
+      "Action": "DescribeVServer",
+      "ProjectId": access.projectId,
+      "ULBId": this.ulbId,
+      "Offset": (pageNo - 1) * pageSize,
+      "Limit": pageSize
+    });
+
+    const total = res.TotalCount || 0;
+    const list = res.VServerSet || [];
+    
+    if (!list || list.length === 0) {
+      throw new Error("没有找到ALB监听器，请先在控制台创建ALB实例和监听器");
+    }
+
+    const options = list.map((item: any) => {
+      return {
+        label: `${item.VServerName || item.VServerId}<${item.VServerId}>`,
+        value: `${item.VServerId}`,
+        domain: item.VServerName || item.VServerId
+      };
+    });
+
+    return {
+      list: this.ctx.utils.options.buildGroupOptions(options, this.certDomains),
+      total: total,
+      pageNo: pageNo,
+      pageSize: pageSize
+    };
+  }
+}
+
+new UCloudDeployToALB();
Author	SHA1	Message	Date
xiaojunnuo	640950d4c8	perf: 部署插件支持ucloud alb	2026-01-27 00:32:23 +08:00
xiaojunnuo	998de0f9a0	perf: 优化首页图标	2026-01-27 00:32:03 +08:00
xiaojunnuo	ce6e515309	chore: tour	2026-01-26 19:07:29 +08:00
xiaojunnuo	e054c8fc55	perf: 首次使用提示新手教程按钮	2026-01-26 18:49:16 +08:00