chore: domain import 优化

packages/ui/certd-client/src/style/common.less

@@ -19,8 +19,8 @@ div#app {
   height: 100%;
 }
 
-pre.pre{
-   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+pre.pre {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 h1,
@@ -61,16 +61,20 @@ h6 {
   justify-content: center;
   align-items: center;
 }
+
 .flex-vc {
   align-items: center;
 }
+
 .flex-vb {
   align-items: baseline;
 }
+
 .flex-o {
   display: flex !important;
   align-items: center;
 }
+
 .flex-baseline {
   display: flex !important;
   align-items: baseline;
@@ -85,6 +89,7 @@ h6 {
 .flex {
   display: flex;
 }
+
 .flex-inline {
   display: inline-flex;
   align-items: center;
@@ -93,6 +98,7 @@ h6 {
 .flex-1 {
   flex: 1;
 }
+
 .flex-0 {
   flex: 0;
 }
@@ -101,9 +107,11 @@ h6 {
   display: flex;
   flex-direction: column;
 }
+
 .align-left {
   text-align: left;
 }
+
 .align-right {
   text-align: right;
 }
@@ -111,18 +119,23 @@ h6 {
 .scroll-y {
   overflow-y: auto;
 }
+
 .m-0 {
   margin: 0 !important;
 }
+
 .m-2 {
   margin: 2px !important;
 }
+
 .m-3 {
   margin: 3px !important;
 }
+
 .m-5 {
   margin: 5px !important;
 }
+
 .m-10 {
   margin: 10px !important;
 }
@@ -130,6 +143,7 @@ h6 {
 .m-20 {
   margin: 20px !important;
 }
+
 .mb-2 {
   margin-bottom: 2px !important;
 }
@@ -137,6 +151,7 @@ h6 {
 .mb-5 {
   margin-bottom: 5px !important;
 }
+
 .ml-5 {
   margin-left: 5px !important;
 }
@@ -192,6 +207,7 @@ h6 {
 .p-20 {
   padding: 20px !important;
 }
+
 .ellipsis {
   white-space: nowrap;
   overflow: hidden;
@@ -220,6 +236,7 @@ h6 {
 .color-plus {
   color: #c5913f;
 }
+
 .color-blue {
   color: #1890ff;
 }
@@ -231,6 +248,7 @@ h6 {
 .color-green {
   color: green;
 }
+
 .color-gray {
   color: gray;
 }
@@ -274,6 +292,7 @@ h6 {
   font-size: 12px;
   margin-top: 3px;
   margin-bottom: 3px;
+
   &.error {
     color: #ff4d4f;
   }
@@ -281,6 +300,7 @@ h6 {
 
 .fs-copyable {
   display: inline-flex;
+
   .text {
     flex: 1;
   }
@@ -309,29 +329,29 @@ h6 {
   color: #6e6e6e;
 }
 
-.ant-modal-body{
-  .fs-form-body{
+.ant-modal-body {
+  .fs-form-body {
     max-height: 66vh;
     overflow-y: auto;
   }
 
 }
 
-.ant-input-number{
+.ant-input-number {
   min-width: 100px;
 }
 
 
 .cd-table {
-  /* 我的客户样式 */
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   overflow: auto;
 
-  .fs-loading{
+  .fs-loading {
     position: absolute;
-    left :0;  
-    top :0;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.05);
@@ -343,6 +363,7 @@ h6 {
     min-width: 100%;
     table-layout: fixed;
     font-size: 16px;
+    
   }
 
   thead {
@@ -379,11 +400,12 @@ h6 {
   }
 
   th {
-    padding: 15px 5px;
-    background: #f5f7ff;
+    padding: 10px 5px;
+    background: #fbfbfb;
     font-weight: 600;
-    color: #6e8efb;
+    color: #000000;
     font-size: 14px;
+    border-top: 1px solid #eee;
 
     &:last-child {
       border-right: 1px solid #eee;

packages/ui/certd-client/src/use/use-dialog.ts

@@ -5,6 +5,7 @@ export type FormOptionReq = {
   columns?: any;
   onSubmit?: any;
   body?: any;
+  initialForm?: any;
 };
 
 export function useFormDialog() {
@@ -16,6 +17,7 @@ export function useFormDialog() {
         crudOptions: {
           columns: req.columns,
           form: {
+            initialForm: req.initialForm,
             wrapper: {
               title: req.title,
               saveRemind: false,

packages/ui/certd-client/src/views/certd/cert/domain/api.ts

@@ -58,9 +58,9 @@ export async function DeleteBatch(ids: any[]) {
   });
 }
 
-export async function ImportTaskAdd(body: any) {
+export async function ImportTaskSave(body: any) {
   return await request({
-    url: apiPrefix + "/import/add",
+    url: apiPrefix + "/import/save",
     method: "post",
     data: body,
   });

packages/ui/certd-client/src/views/certd/cert/domain/import.vue

@@ -1,21 +1,29 @@
 <template>
-  <div class="domain-import-task-status min-h-[400px]">
-    <div class="action">
+  <div class="domain-import-task-status min-h-[300px]">
+    <div class="action mb-5">
       <fs-button type="primary" icon="ion:add-outline" @click="addTask">添加导入任务</fs-button>
       <fs-button type="primary" icon="ion:refresh-outline" class="ml-2" @click="loadImportTaskStatus">刷新</fs-button>
     </div>
-    <div class="table-container overflow-auto mt-2">
+    <div class="table-container overflow-auto mb-10">
       <table class="cd-table border-gray-300 w-full">
         <thead>
           <tr>
-            <th class="w-20%">来源</th>
-            <th>进度</th>
-            <th class="w-20%">操作</th>
+            <th class="w-[220px]">来源</th>
+            <th class="">进度</th>
+            <th class="w-[220px]">操作</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="item in list" :key="item.key">
-            <td class="ellipsis">{{ item.title }}</td>
+            <td class="ellipsis">
+              <span class="flex items-center pointer" @click="editTask(item)">
+                <span class="flex-1 ellipsis flex items-center">
+                  <fs-icon :icon="item.icon" class="mr-2"></fs-icon>
+                  {{ item.title }}
+                </span>
+                <fs-icon icon="ant-design:edit-outlined" class="ml-2" />
+              </span>
+            </td>
             <td>
               <div v-if="item.task">
                 <div>
@@ -49,6 +57,7 @@ import { onMounted, ref } from "vue";
 import * as api from "./api";
 import { Modal } from "ant-design-vue";
 import { useDomainImport } from "./use";
+import { Dicts } from "/@/components/plugins/lib/dicts";
 defineOptions({
   name: "DomainImportTaskStatus",
 });
@@ -58,6 +67,10 @@ const list = ref([]);
 async function loadImportTaskStatus() {
   const res = await api.ImportTaskStatus();
   list.value = res || [];
+  for (let item of list.value) {
+    const provider = Dicts.dnsProviderTypeDict.dataMap[item.dnsProviderType];
+    item.icon = provider?.icon || "ion:cloud-outline";
+  }
 }
 
 async function startTask(item: any) {
@@ -87,6 +100,15 @@ async function addTask() {
   });
 }
 
+async function editTask(item: any) {
+  await openDomainImportDialog({
+    afterSubmit: async () => {
+      await loadImportTaskStatus();
+    },
+    form: item,
+  });
+}
+
 onMounted(async () => {
   await loadImportTaskStatus();
 });
@@ -95,7 +117,11 @@ onMounted(async () => {
 <style lang="less">
 .domain-import-task-status {
   .table-container {
-    height: 60vh;
+    height: 50vh;
+  }
+
+  .ant-progress {
+    margin-bottom: 0px;
   }
 }
 </style>

packages/ui/certd-client/src/views/certd/cert/domain/use.tsx

@@ -18,7 +18,6 @@ export function useDomainImport() {
             //@ts-ignore
             selectedChange: ({ form, $event }) => {
               form.dnsProviderAccessType = $event.accessType;
-              form.dnsProviderTitle = $event.label;
             },
           },
         },
@@ -45,26 +44,23 @@ export function useDomainImport() {
           type: compute(({ form }) => {
             return form.dnsProviderAccessType || form.dnsProviderType;
           }),
-          on: {
-            //@ts-ignore
-            selectedChange({ form, $event }) {
-              form.accessTitle = $event.name;
-            },
-          },
         },
       },
     },
   };
 
-  return function openDomainImportDialog(req: { afterSubmit?: () => void }) {
+  return function openDomainImportDialog(req: { afterSubmit?: () => void; form?: any }) {
     openFormDialog({
       title: "从域名提供商导入域名",
       columns: columns,
+      initialForm: {
+        ...req.form,
+      },
       onSubmit: async (form: any) => {
-        await api.ImportTaskAdd({
+        await api.ImportTaskSave({
+          key: form.key,
           dnsProviderType: form.dnsProviderType,
           dnsProviderAccessId: form.dnsProviderAccessId,
-          title: form.dnsProviderTitle + "_" + form.accessTitle,
         });
         if (req.afterSubmit) {
           req.afterSubmit();

packages/ui/certd-server/src/controller/user/cert/domain-controller.ts

@@ -100,16 +100,6 @@ export class DomainController extends CrudController<DomainService> {
     return this.ok(task);
   }
 
-  @Post('/import/add', { summary: Constants.per.authOnly })
-  async importAdd(@Body(ALL) body: any) {
-    const { dnsProviderType, dnsProviderAccessId, title } = body;
-    const req = {
-      userId: this.getUserId(),
-      dnsProviderType, dnsProviderAccessId, title,
-    }
-    const item = await this.service.addDomainImportTask(req);
-    return this.ok(item);
-  }
 
   @Post('/import/delete', { summary: Constants.per.authOnly })
   async importDelete(@Body(ALL) body: any) {
@@ -122,6 +112,17 @@ export class DomainController extends CrudController<DomainService> {
     return this.ok();
   }
 
+  @Post('/import/save', { summary: Constants.per.authOnly })
+  async importSave(@Body(ALL) body: any) {
+    const { dnsProviderType, dnsProviderAccessId, key } = body;
+    const req = {
+      userId: this.getUserId(),
+      dnsProviderType, dnsProviderAccessId,  key
+    }
+    const item = await this.service.saveDomainImportTask(req);
+    return this.ok(item);
+  }
+
 
   @Post('/sync/expiration/start', { summary: Constants.per.authOnly })
   async syncExpirationStart(@Body(ALL) body: any) {

packages/ui/certd-server/src/modules/cert/service/domain-service.ts

@@ -2,7 +2,7 @@ import { http, logger, utils } from '@certd/basic';
 import { AccessService, BaseService } from '@certd/lib-server';
 import { doPageTurn, Pager, PageRes } from '@certd/pipeline';
 import { DomainVerifiers } from "@certd/plugin-cert";
-import { createDnsProvider, DomainParser, parseDomainByPsl } from "@certd/plugin-lib";
+import { createDnsProvider, dnsProviderRegistry, DomainParser, parseDomainByPsl } from "@certd/plugin-lib";
 import { Inject, Provide, Scope, ScopeEnum } from '@midwayjs/core';
 import { InjectEntityModel } from '@midwayjs/typeorm';
 import dayjs from 'dayjs';
@@ -20,7 +20,7 @@ import { DomainEntity } from '../entity/domain.js';
 export interface SyncFromProviderReq {
   userId: number;
   dnsProviderType: string;
-  dnsProviderAccessId: string;
+  dnsProviderAccessId: number;
 }
 
 
@@ -330,11 +330,32 @@ export class DomainService extends BaseService<DomainEntity> {
     return taskList
   }
 
-  async addDomainImportTask(req:{userId?:number,dnsProviderType:string,dnsProviderAccessId:string,title:string}) {
+  async getProviderTitle(req:{userId?:number,dnsProviderType:string,dnsProviderAccessId:number}) {
     const userId = req.userId || 0
-    const { dnsProviderType, dnsProviderAccessId,title } = req
+    const { dnsProviderType, dnsProviderAccessId} = req
+    const dnsProviderDefine = dnsProviderRegistry.getDefine(dnsProviderType)
+    if (!dnsProviderDefine) {
+      throw new Error(`该域名提供商（${dnsProviderType}）不存在，请检查是否已被注册`)
+    }
+    const access = await this.accessService.getSimpleInfo(dnsProviderAccessId)
+    if (!access || access.userId !== userId) {
+      throw new Error(`该授权（${dnsProviderAccessId}）不存在，请检查是否已被删除`)
+    }
+    return {
+      title: `${dnsProviderDefine.title}_${access.name || ''}`,
+      //@ts-ignore
+      icon: dnsProviderDefine.icon || '',
+    }
+  }
+
+  async addDomainImportTask(req:{userId?:number,dnsProviderType:string,dnsProviderAccessId:number,index?:number}) {
+    const userId = req.userId || 0
+    const { dnsProviderType, dnsProviderAccessId,index=0 } = req    
     const key = `user_${userId}_${dnsProviderType}_${dnsProviderAccessId}`
 
+    const {title,icon} = await this.getProviderTitle(req)
+
+
     const setting = await this.userSettingService.getSetting<UserDomainImportSetting>(userId, UserDomainImportSetting)
     setting.domainImportList = setting.domainImportList || []
     if (setting.domainImportList.find(item => item.key === key)) {
@@ -351,8 +372,9 @@ export class DomainService extends BaseService<DomainEntity> {
       dnsProviderAccessId,
       key,
       title,
+      icon: icon || '',
     }
-    setting.domainImportList.push(item)
+    setting.domainImportList.splice(index, 0, item)
     await this.userSettingService.saveSetting(userId, setting)
 
     return item
@@ -373,6 +395,24 @@ export class DomainService extends BaseService<DomainEntity> {
     await this.userSettingService.saveSetting(userId, setting)
   }
 
+  async saveDomainImportTask(req:{userId?:number,dnsProviderType:string,dnsProviderAccessId:number,key?:string}) {
+    const userId = req.userId || 0
+    const { dnsProviderType, dnsProviderAccessId,key } = req
+    const setting = await this.userSettingService.getSetting<UserDomainImportSetting>(userId, UserDomainImportSetting)
+    setting.domainImportList = setting.domainImportList || []
+
+    let index = 0
+    if (key) {
+      index = setting.domainImportList.findIndex(item => item.key === key)
+      if (index === -1) {
+        throw new Error(`该域名导入任务${key}不存在`)
+      }
+      await this.deleteDomainImportTask({userId,key})
+    }
+
+    await this.addDomainImportTask({userId,dnsProviderType,dnsProviderAccessId,index})
+  }
+
 
 
   

packages/ui/certd-server/src/modules/mine/service/models.ts

@@ -52,5 +52,5 @@ export class UserDomainImportSetting extends BaseSettings {
   static __title__ = "用户域名导入设置";
   static __key__ = "user.domain.import";
 
-  domainImportList:{dnsProviderType:string,dnsProviderAccessId:string,key:string,title:string}[];
+  domainImportList:{dnsProviderType:string,dnsProviderAccessId:number,key:string,title:string,icon?:string}[];
 }