feat: 域名验证方法支持CNAME间接方式，此方式支持所有域名注册商，且无需提供Access授权，但是需要手动添加cname解析

2026-05-15 12:37:30 +08:00 · 2024-10-07 03:21:16 +08:00
parent 0c8e83e125
commit f3d35084ed
123 changed files with 2373 additions and 456 deletions
@@ -18,6 +18,10 @@ import { useUserStore } from "/@/store/modules/user";
 import { useSettingStore } from "/@/store/modules/settings";
 import * as api from "./api";
 import { notification } from "ant-design-vue";
+
+defineOptions({
+  name: "AccountBind"
+});
 const iframeRef = ref();

 const userStore = useUserStore();
@@ -29,7 +29,7 @@ import { usePermission } from "/src/plugin/permission";
 import { useFs, useUi } from "@fast-crud/fast-crud";

 export default defineComponent({
-  name: "AuthorityPermission",
+  name: "AuthorityManager",
  components: { FsPermissionTree },
  setup() {
    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
@@ -5,7 +5,15 @@
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding" />
    <a-modal v-model:open="authzDialogVisible" width="860px" title="分配权限" @ok="updatePermission">
-      <fs-permission-tree ref="permissionTreeRef" v-model:checkedKeys="checkedKeys" :tree="permissionTreeData" :editable="false" checkable :replace-fields="{ key: 'id', label: 'title' }"> </fs-permission-tree>
+      <fs-permission-tree
+        ref="permissionTreeRef"
+        v-model:checked-keys="checkedKeys"
+        :tree="permissionTreeData"
+        :editable="false"
+        checkable
+        :replace-fields="{ key: 'id', label: 'title' }"
+      >
+      </fs-permission-tree>
    </a-modal>
  </fs-page>
 </template>
@@ -84,7 +92,7 @@ function useAuthz() {
 }

 export default defineComponent({
-  name: "AuthorityRole",
+  name: "RoleManager",
  components: { FsPermissionTree },
  setup() {
    //授权配置
@@ -12,7 +12,7 @@ import { defineComponent, ref, onMounted } from "vue";
 import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 export default defineComponent({
-  name: "AuthorityUser",
+  name: "UserManager",
  setup() {
    // 初始化crud配置
    // 此处传入权限前缀进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
@@ -0,0 +1,75 @@
+import { request } from "/src/api/service";
+
+const apiPrefix = "/sys/cname/provider";
+
+export async function GetList(query: any) {
+  return await request({
+    url: apiPrefix + "/page",
+    method: "post",
+    data: query
+  });
+}
+
+export async function AddObj(obj: any) {
+  return await request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export async function UpdateObj(obj: any) {
+  return await request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export async function DelObj(id: any) {
+  return await request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export async function GetObj(id: any) {
+  return await request({
+    url: apiPrefix + "/info",
+    method: "post",
+    params: { id }
+  });
+}
+
+export async function GetDetail(id: any) {
+  return await request({
+    url: apiPrefix + "/detail",
+    method: "post",
+    params: { id }
+  });
+}
+
+export async function DeleteBatch(ids: any[]) {
+  return await request({
+    url: apiPrefix + "/deleteByIds",
+    method: "post",
+    data: { ids }
+  });
+}
+
+export async function SetDefault(id: any) {
+  return await request({
+    url: apiPrefix + "/setDefault",
+    method: "post",
+    data: { id }
+  });
+}
+
+export async function SetDisabled(id: any, disabled: boolean) {
+  return await request({
+    url: apiPrefix + "/setDisabled",
+    method: "post",
+    data: { id, disabled }
+  });
+}
@@ -0,0 +1,245 @@
+import * as api from "./api";
+import { useI18n } from "vue-i18n";
+import { computed, Ref, ref } from "vue";
+import { useRouter } from "vue-router";
+import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
+import { useUserStore } from "/@/store/modules/user";
+import { useSettingStore } from "/@/store/modules/settings";
+import { Modal } from "ant-design-vue";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const router = useRouter();
+  const { t } = useI18n();
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    const res = await api.UpdateObj(form);
+    return res;
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    form.content = JSON.stringify({
+      title: form.title
+    });
+    const res = await api.AddObj(form);
+    return res;
+  };
+
+  const userStore = useUserStore();
+  const settingStore = useSettingStore();
+  const selectedRowKeys: Ref<any[]> = ref([]);
+  context.selectedRowKeys = selectedRowKeys;
+
+  return {
+    crudOptions: {
+      settings: {
+        plugins: {
+          //这里使用行选择插件，生成行选择crudOptions配置，最终会与crudOptions合并
+          rowSelection: {
+            enabled: true,
+            order: -2,
+            before: true,
+            // handle: (pluginProps,useCrudProps)=>CrudOptions,
+            props: {
+              multiple: true,
+              crossPage: true,
+              selectedRowKeys
+            }
+          }
+        }
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      rowHandle: {
+        minWidth: 200,
+        fixed: "right"
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          column: {
+            width: 100
+          },
+          form: {
+            show: false
+          }
+        },
+        domain: {
+          title: "域名",
+          type: "text",
+          editForm: {
+            component: {
+              disabled: true
+            }
+          },
+          form: {
+            helper: "CNAME域名一旦确定不可修改",
+            rules: [{ required: true, message: "此项必填" }]
+          },
+          column: {
+            width: 200
+          }
+        },
+        dnsProviderType: {
+          title: "DNS提供商",
+          type: "dict-select",
+          dict: dict({
+            url: "pi/dnsProvider/list",
+            value: "key",
+            label: "title"
+          }),
+          form: {
+            rules: [{ required: true, message: "此项必填" }]
+          },
+          column: {
+            width: 150,
+            component: {
+              color: "auto"
+            }
+          }
+        },
+        accessId: {
+          title: "DNS提供商授权",
+          type: "dict-select",
+          dict: dict({
+            url: "/pi/access/list",
+            value: "id",
+            label: "name"
+          }),
+          form: {
+            component: {
+              name: "access-selector",
+              vModel: "modelValue",
+              type: compute(({ form }) => {
+                return form.dnsProviderType;
+              })
+            },
+            rules: [{ required: true, message: "此项必填" }]
+          },
+          column: {
+            width: 150,
+            component: {
+              color: "auto"
+            }
+          }
+        },
+        isDefault: {
+          title: "是否默认",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { label: "是", value: true, color: "success" },
+              { label: "否", value: false, color: "default" }
+            ]
+          }),
+          form: {
+            value: false,
+            rules: [{ required: true, message: "请选择是否默认" }]
+          },
+          column: {
+            align: "center",
+            width: 100
+          }
+        },
+        setDefault: {
+          title: "设置默认",
+          type: "text",
+          form: {
+            show: false
+          },
+          column: {
+            width: 100,
+            align: "center",
+            conditionalRenderDisabled: true,
+            cellRender: ({ row }) => {
+              if (row.isDefault) {
+                return;
+              }
+              const onClick = async () => {
+                Modal.confirm({
+                  title: "提示",
+                  content: `确定要设置为默认吗？`,
+                  onOk: async () => {
+                    await api.SetDefault(row.id);
+                    await crudExpose.doRefresh();
+                  }
+                });
+              };
+
+              return (
+                <a-button type={"link"} size={"small"} onClick={onClick}>
+                  设为默认
+                </a-button>
+              );
+            }
+          }
+        },
+        disabled: {
+          title: "禁用/启用",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { label: "启用", value: false, color: "success" },
+              { label: "禁用", value: true, color: "error" }
+            ]
+          }),
+          form: {
+            value: false
+          },
+          column: {
+            width: 100,
+            component: {
+              title: "点击可禁用/启用",
+              on: {
+                async click({ value, row }) {
+                  Modal.confirm({
+                    title: "提示",
+                    content: `确定要${!value ? "禁用" : "启用"}吗？`,
+                    onOk: async () => {
+                      await api.SetDisabled(row.id, !value);
+                      await crudExpose.doRefresh();
+                    }
+                  });
+                }
+              }
+            }
+          }
+        },
+        createTime: {
+          title: "创建时间",
+          type: "datetime",
+          form: {
+            show: false
+          },
+          column: {
+            sorter: true,
+            width: 160,
+            align: "center"
+          }
+        },
+        updateTime: {
+          title: "更新时间",
+          type: "datetime",
+          form: {
+            show: false
+          },
+          column: {
+            show: true,
+            width: 160
+          }
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,56 @@
+<template>
+  <fs-page class="page-cert">
+    <template #header>
+      <div class="title">
+        CNAME服务配置
+        <span class="sub">
+          此处配置的域名作为其他域名校验的代理，当别的域名需要申请证书时，通过CNAME映射到此域名上来验证所有权。好处是任何域名都可以通过此方式申请证书，也无需填写AccessSecret。
+        </span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #pagination-left>
+        <a-tooltip title="批量删除">
+          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
+        </a-tooltip>
+      </template>
+    </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+import { message, Modal } from "ant-design-vue";
+import { DeleteBatch } from "/@/views/certd/history/api";
+
+defineOptions({
+  name: "CnameProvider"
+});
+const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+
+const selectedRowKeys = context.selectedRowKeys;
+const handleBatchDelete = () => {
+  if (selectedRowKeys.value?.length > 0) {
+    Modal.confirm({
+      title: "确认",
+      content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
+      async onOk() {
+        await DeleteBatch(selectedRowKeys.value);
+        message.info("删除成功");
+        crudExpose.doRefresh();
+        selectedRowKeys.value = [];
+      }
+    });
+  } else {
+    message.error("请先勾选记录");
+  }
+};
+
+// 页面打开后获取列表数据
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+</script>
+<style lang="less"></style>
@@ -47,6 +47,10 @@ import { PublicSettingsSave, SettingKeys } from "./api";
 import { notification } from "ant-design-vue";
 import { useSettingStore } from "/@/store/modules/settings";

+defineOptions({
+  name: "SysSettings"
+});
+
 interface FormState {
  registerEnabled: boolean;
  managerOtherUserPipeline: boolean;
@@ -68,6 +68,10 @@ import { notification } from "ant-design-vue";
 import { useSettingStore } from "/src/store/modules/settings";
 import { useUserStore } from "/@/store/modules/user";

+defineOptions({
+  name: "SiteSetting"
+});
+
 interface FormState {
  title: string;
  slogan: string;