refactor: ui

packages/api/src/registry/registry.js

@@ -11,9 +11,7 @@ export class Registry {
     if (this.collection == null) {
       this.collection = {}
     }
-    const className = target.name
+    const defineName = (target.define && target.define().name) || target.name
-    this.register(className, target)
-    const defineName = target.define && target.define().name
     this.register(defineName, target)
   }
 

ui/certd-server/controllers/access-providers.js

@@ -0,0 +1,19 @@
+import Router from 'koa-router'
+import { accessProviderRegistry } from '@certd/api'
+import DefaultAccessProviders from '@certd/access-providers'
+import _ from 'lodash-es'
+import { Ret } from '../models/Ret.js'
+const router = Router()
+router.prefix('/access-providers')
+
+DefaultAccessProviders.install()
+
+router.get('/list', function (ctx, next) {
+  const list = []
+  _.forEach(accessProviderRegistry.collection, item => {
+    list.push(item.define())
+  })
+  ctx.body = Ret.success(list)
+})
+
+export default router

ui/certd-server/controllers/dns-providers.js

@@ -1,16 +1,16 @@
 import Router from 'koa-router'
-import { providerRegistry } from '@certd/api'
+import { dnsProviderRegistry } from '@certd/api'
-import DefaultProviders from '@certd/dns-providers'
+import DefaultDnsProviders from '@certd/dns-providers'
 import _ from 'lodash-es'
 import { Ret } from '../models/Ret.js'
 const router = Router()
-router.prefix('/providers')
+router.prefix('/dns-providers')
 
-DefaultProviders.install()
+DefaultDnsProviders.install()
 
 router.get('/list', function (ctx, next) {
   const list = []
-  _.forEach(providerRegistry.providers, item => {
+  _.forEach(dnsProviderRegistry.collection, item => {
     list.push(item.define())
   })
   ctx.body = Ret.success(list)

ui/certd-server/controllers/plugins.js

@@ -10,7 +10,7 @@ DefaultPlugins.install()
 
 router.get('/list', function (ctx, next) {
   const list = []
-  _.forEach(pluginRegistry.plugins, item => {
+  _.forEach(pluginRegistry.collection, item => {
     list.push(item.define())
   })
   ctx.body = Ret.success(list)

ui/certd-server/package.json

@@ -14,6 +14,7 @@
     "@certd/executor": "^0.1.11",
     "@certd/plugins": "^0.1.11",
     "@certd/dns-providers": "^0.1.11",
+    "@certd/access-providers": "^0.1.11",
     "compressing": "^1.5.1",
     "debug": "^4.1.1",
     "fs-extra": "^9.1.0",

ui/certd-server/service/exports-service.js

@@ -13,6 +13,10 @@ export default {
     const targetProjectDir = path.join(targetDir, projectName)
     const templateDir = pathUtil.join('templates/' + projectName)
 
+    console.log('targetDir', targetDir)
+    console.log('projectName', projectName)
+    console.log('tempalteDir', templateDir)
+    console.log('targetProjectDir', targetProjectDir)
     fs.copySync(templateDir, targetProjectDir)
 
     // const packageFilePath = path.join(targetProjectDir, 'package.json')
@@ -23,10 +27,6 @@ export default {
     const zipName = dirName + '.zip'
     const outputFilePath = path.join(targetDir, zipName)
 
-    console.log('targetDir', targetDir)
-    console.log('projectName', projectName)
-    console.log('tempalteDir', templateDir)
-    console.log('targetProjectDir', targetProjectDir)
     console.log('outputFilePath', outputFilePath)
     await zipUtil.compress({ dir: targetProjectDir, output: outputFilePath })
     return {

ui/certd-server/utils/util.path.js

@@ -1,6 +1,7 @@
 export default {
   join (...dirs) {
     const url = new URL('../' + dirs.join('/'), import.meta.url)
-    return url.href.replace(/^file:\/\/\//, '').replace(/^file:\/\//, '')
+    console.log('url', url)
+    return url.pathname
   }
 }

ui/certd-ui/src/api/api.access-providers.js

@@ -0,0 +1,14 @@
+import { request } from './service'
+import inputHandler from '@/api/util.input.handler'
+
+export default {
+  async list () {
+    const ret = await request({
+      url: '/access-providers/list'
+    })
+
+    inputHandler.handle(ret)
+
+    return ret
+  }
+}

ui/certd-ui/src/api/api.dns-providers.js

@@ -4,7 +4,7 @@ import inputHandler from '@/api/util.input.handler'
 export default {
   async list () {
     const ret = await request({
-      url: '/providers/list'
+      url: '/dns-providers/list'
     })
 
     inputHandler.handle(ret)

ui/certd-ui/src/components/access-provider-selector/access-provider-manager.vue

@@ -7,7 +7,7 @@
     v-model:visible="visible"
     :after-visible-change="onAfterVisibleChange"
   >
-    <div class="d-container provider-manager">
+    <div class="d-container access-provider-manager">
       <a-button @click="add">
         添加授权
       </a-button>
@@ -76,7 +76,7 @@ import { ref, reactive, nextTick, watch, inject } from 'vue'
 // eslint-disable-next-line no-unused-vars
 import { useForm } from '@ant-design-vue/use'
 import _ from 'lodash-es'
-import providerApi from '@/api/api.providers'
+import providerApi from '@/api/api.access-providers'
 function useEdit (props, context, onEditSave) {
   const formData = reactive({
     key: '',
@@ -281,7 +281,7 @@ export default {
 </script>
 
 <style lang="less">
-.provider-manager{
+.access-provider-manager{
   padding:10px;
 }
 </style>

ui/certd-ui/src/components/access-provider-selector/access-provider-selector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="provider-selector">
+  <div class="access-provider-selector">
     <a-select
       :value="value"
       @update:value="valueUpdate"
@@ -12,20 +12,20 @@
       管理授权
     </a-button>
   </div>
-  <provider-manager ref="providerManagerRef"
+  <access-provider-manager ref="providerManagerRef"
                     :value="value"
                     :filter="filter"
                     @update:value="valueUpdate"
-  ></provider-manager>
+  ></access-provider-manager>
 
 </template>
 <script>
 import { ref, inject } from 'vue'
-import ProviderManager from './provider-manager'
+import AccessProviderManager from './access-provider-manager'
 
 export default {
   name: 'provider-selector',
-  components: { ProviderManager },
+  components: { AccessProviderManager },
   emits: ['update:providers', 'update:value'],
   // 属性定义
   props: {
@@ -71,7 +71,7 @@ export default {
 }
 </script>
 <style lang="less">
-.provider-selector{
+.access-provider-selector{
   display: flex;
   flex-direction: row;
   .ant-select{

ui/certd-ui/src/components/index.js

@@ -1,11 +1,11 @@
 import DContainer from './d-container'
 import ComponentRender from './component-render'
-import ProviderSelector from './provider-selector/provider-selector'
+import AccessProviderSelector from './access-provider-selector/access-provider-selector'
 
 const list = [
   DContainer,
   ComponentRender,
-  ProviderSelector
+  AccessProviderSelector
 ]
 export default {
   install (app) {

ui/certd-ui/src/views/detail/components/cert-form.vue

@@ -9,7 +9,7 @@
   >
 
     <d-container>
-      <a-form class="domain-form"  :scrollToFirstError="true" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form class="domain-form" :model="formData"  :scrollToFirstError="true" :label-col="labelCol" :wrapper-col="wrapperCol">
 
         <h3>域名信息</h3>
         <a-form-item :label="$t('domain')" v-bind="validateInfos.domains">
@@ -28,9 +28,20 @@
           <a-input v-model:value="formData.email"/>
         </a-form-item>
 
-        <a-form-item label="dns验证" v-bind="validateInfos.dnsProvider">
+        <a-form-item label="dns验证" v-bind="validateInfos['dnsProvider.type']">
-         <provider-selector v-model:value="formData.dnsProvider"></provider-selector>
+         <a-select v-model:value="formData.dnsProvider.type" @change="onCurrentDnsProviderChanged">
+           <a-select-option v-for="item of dnsProviderDefineList" :key="item.name"  :value="item.name">{{item.label}}</a-select-option>
+         </a-select>
         </a-form-item>
+        <template v-if="currentDnsProviderDefine">
+          <a-form-item v-for="(item,key) in currentDnsProviderDefine.input"  v-bind="item.component || {}"  :key="key" :label="item.label" :name="key">
+            <component-render v-model:value="formData.dnsProvider[key]" v-bind="item.component || {}"></component-render>
+            <template #extra v-if="item.desc"  >
+              {{item.desc}}
+            </template>
+          </a-form-item>
+        </template>
+
         <a-form-item label="CA" v-bind="validateInfos.ca">
           <a-radio-group v-model:value="formData.ca" >
             <a-radio  value="LetEncrypt">
@@ -76,6 +87,7 @@
 <script>
 import { reactive, toRaw, ref, watch } from 'vue'
 import { useForm } from '@ant-design-vue/use'
+import dnsProviderApi from '@/api/api.dns-providers'
 import _ from 'lodash-es'
 
 function useDrawer () {
@@ -115,7 +127,7 @@ export default {
     const certFormData = {
       domains: [],
       email: undefined,
-      dnsProvider: '',
+      dnsProvider: {},
       ca: 'LetEncrypt',
       csr: {
         country: '',
@@ -143,7 +155,11 @@ export default {
         required: true,
         message: '请输入正确的邮箱'
       }],
-      dnsProvider: [{
+      'dnsProvider.type': [{
+        required: true,
+        message: '请选择dns类型'
+      }],
+      'dnsProvider.accessProvider': [{
         required: true,
         message: '请选择dns授权提供者'
       }],
@@ -185,6 +201,28 @@ export default {
       console.log('accessUpdate', val)
       context.emit('update:accessProviders', val)
     }
+
+    const dnsProviderDefineList = ref()
+    const currentDnsProviderDefine = ref()
+    const onCreate = async () => {
+      const list = await dnsProviderApi.list()
+      dnsProviderDefineList.value = list
+    }
+    const onCurrentDnsProviderChanged = (type) => {
+      if (type == null) {
+        return
+      }
+      formData.dnsProvider.type = type
+      formData.dnsProvider.accessProvider = null
+      for (const item of dnsProviderDefineList.value) {
+        if (item.name === type) {
+          currentDnsProviderDefine.value = item
+          return
+        }
+      }
+    }
+    onCreate()
+
     return {
       labelCol: { span: 4 },
       wrapperCol: { span: 18 },
@@ -195,6 +233,9 @@ export default {
       providerManagerRef,
       providerManagerOpen,
       accessProvidersUpdate,
+      dnsProviderDefineList,
+      onCurrentDnsProviderChanged,
+      currentDnsProviderDefine,
       ...drawer
     }
   }

ui/certd-ui/src/views/detail/index.vue

@@ -30,6 +30,16 @@
                 {{ options.cert.email }}
               </div>
             </div>
+            <div class="label-item">
+              <label>dns校验:</label>
+              <div>
+                <span v-if="options.cert?.dnsProvider">
+                  {{ options.cert.dnsProvider?.type }}-
+                {{options.accessProviders[options.cert.dnsProvider.accessProvider]?.label}}
+                </span>
+
+              </div>
+            </div>
             <div class="label-item">
               <label>CA:</label>
               <div>