perf: cname 域名映射记录可读性优化

2026-04-24 04:17:25 +08:00 · 2024-11-01 18:09:32 +08:00
parent 7ad4b55ee0
commit b1117ed54a
17 changed files with 190 additions and 35 deletions
@@ -15,7 +15,11 @@
        <fs-values-format v-model="cnameRecord.status" :dict="statusDict" />
      </td>
      <td class="center">
-        <a-button v-if="cnameRecord.status !== 'valid'" type="primary" size="small" :loading="loading" @click="doVerify">点击验证</a-button>
+        <template v-if="cnameRecord.status !== 'valid'">
+          <a-button type="primary" size="small" :loading="loading" @click="doVerify">点击验证</a-button>
+          <cname-tip :record="cnameRecord"></cname-tip>
+        </template>
+
        <div v-else class="helper">不要删除CNAME</div>
      </td>
    </tr>
@@ -27,6 +31,7 @@ import { CnameRecord, GetByDomain } from "/@/components/plugins/cert/domains-ver
 import { ref, watch } from "vue";
 import { dict } from "@fast-crud/fast-crud";
 import * as api from "./api.js";
+import CnameTip from "./cname-tip.vue";
 const statusDict = dict({
  data: [
    { label: "待设置CNAME", value: "cname", color: "warning" },
@@ -0,0 +1,19 @@
+<template>
+  <a-tooltip :overlay-style="{ maxWidth: '400px' }">
+    <template #title>
+      <div>
+        <div>多试几次，如果仍然无法验证通过，请按如下步骤排查问题：</div>
+        <div>1. 解析记录应该添加在{{ record.domain }}域名下</div>
+        <div>2. 要添加的是CNAME类型的记录，不是TXT</div>
+        <div>3. 核对记录值是否是:{{ record.recordValue }}</div>
+      </div>
+    </template>
+    <fs-icon class="ml-5 pointer" icon="mingcute:question-line"></fs-icon>
+  </a-tooltip>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  record: any;
+}>();
+</script>
@@ -64,18 +64,22 @@ const steps = ref<Step[]>([
      {
        image: "/static/doc/images/3-add-success.png",
        title: "流水线创建成功",
-        descriptions: ["此时证书申请任务已经建好", "点击手动触发即可测试证书申请", "接下来演示如何添加部署任务"]
+        descriptions: ["点击手动触发即可申请证书"]
+      },
+      {
+        title: "接下来演示如何自动部署证书",
+        descriptions: ["如果您只需要申请证书，那么到这一步就可以了"]
      }
    ]
  },
  {
    title: "添加部署证书任务",
-    description: "演示部署到主机上的Nginx",
+    description: "这里演示部署证书到Nginx",
    items: [
      {
        image: "/static/doc/images/5-1-add-host.png",
-        title: "添加nginx部署任务",
-        descriptions: ["演示第一个部署任务，部署到nginx"]
+        title: "添加证书部署任务",
+        descriptions: ["这里演示自动部署证书到nginx", "Certd提供茫茫多的部署插件，满足您的各种部署需求"]
      },
      {
        image: "/static/doc/images/5-2-add-host.png",
@@ -94,8 +98,8 @@ const steps = ref<Step[]>([
      },
      {
        image: "/static/doc/images/5-5-plugin-list.png",
-        title: "还可以添加其他更多部署任务",
-        descriptions: ["插件列表"]
+        title: "本系统提供茫茫多的部署插件",
+        descriptions: ["您可以根据自身需求将证书部署到各种应用和平台"]
      }
    ]
  },
@@ -155,7 +155,7 @@ function openUpgrade() {
    title = "续期专业版/升级商业版";
  }

-  modal.confirm({
+  const modalRef = modal.confirm({
    title,
    async onOk() {
      return await doActive();
@@ -206,6 +206,10 @@ function openUpgrade() {
          </a-col>
        );
      }
+      function goAccount() {
+        router.push("/sys/account");
+        modalRef.destroy();
+      }
      return (
        <div class="mt-10 mb-10 vip-active-modal">
          <div class="vip-type-vs">
@@ -226,6 +230,9 @@ function openUpgrade() {
              没有激活码？
              {activationCodeGetWay}
            </div>
+            <div class="mt-10">
+              激活码使用过一次之后，不可再次使用，如果要更换站点，请<a onClick={goAccount}>绑定账号</a>，然后"转移VIP"即可
+            </div>
          </div>
        </div>
      );
@@ -165,7 +165,7 @@ onMounted(async () => {
  await settingStore.checkUrlBound();
 });

-function menuClick(menu) {
+function menuClick(menu: any) {
  routerUtils.open(menu.path);
 }

@@ -6,7 +6,7 @@ import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, Edi
 import { useUserStore } from "/@/store/modules/user";
 import { useSettingStore } from "/@/store/modules/settings";
 import { message } from "ant-design-vue";
-
+import CnameTip from "/@/components/plugins/cert/domains-verify-plan-editor/cname-tip.vue";
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const router = useRouter();
  const { t } = useI18n();
@@ -126,11 +126,18 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
            component: {
              onDictChange: ({ form, dict }: any) => {
                if (!form.cnameProviderId) {
-                  const item = dict.data.find((item: any) => item.isDefault);
+                  const item = dict.data.find((item: any) => item.isDefault && !item.disabled);
                  if (item) {
                    form.cnameProviderId = item.id;
                  }
                }
+              },
+              renderLabel(item: any) {
+                if (item.title) {
+                  return `${item.domain}<${item.title}>`;
+                } else {
+                  return item.domain;
+                }
              }
            },
            helper: {
@@ -147,7 +154,13 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
            }
          },
          column: {
-            show: false
+            cellRender({ value }) {
+              if (value < 0) {
+                return <a-tag color={"green"}>公共CNAME</a-tag>;
+              } else {
+                return <a-tag color={"blue"}>自定义CNAME</a-tag>;
+              }
+            }
          }
        },
        status: {
@@ -183,6 +196,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
              if (row.status === "valid") {
                return "-";
              }
+
              async function doVerify() {
                row._validating_ = true;
                try {
@@ -199,9 +213,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
                }
              }
              return (
-                <a-button onClick={doVerify} loading={row._validating_} size={"small"} type={"primary"}>
-                  点击验证
-                </a-button>
+                <div>
+                  <a-button onClick={doVerify} loading={row._validating_} size={"small"} type={"primary"}>
+                    点击验证
+                  </a-button>
+                  <CnameTip record={row} />
+                </div>
              );
            }
          }