refactor: input render

other/certd-ui/src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

other/certd-ui/src/components/component-render.vue

@@ -0,0 +1,32 @@
+<script>
+import { h, resolveComponent } from 'vue'
+import _ from 'lodash-es'
+export default {
+  name: 'component-render',
+  props: {
+    name: {
+      type: String,
+      default: 'a-input'
+    },
+    children: {
+      type: Array
+    },
+    on: {
+      type: Object
+    }
+  },
+  setup (props, context) {
+    const attrs = {
+      ...context.$attrs
+    }
+    _.forEach(props.on, (value, key) => {
+      attrs[key] = value
+      if (typeof value === 'string') {
+        // eslint-disable-next-line no-eval
+        attrs[key] = eval(value)
+      }
+    })
+    return () => h(resolveComponent(props.name), context.$attrs, props.children)
+  }
+}
+</script>

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

@@ -0,0 +1,16 @@
+import DContainer from './d-container'
+import ComponentRender from './component-render'
+import ProviderSelector from './provider-selector/provider-selector'
+
+const list = [
+  DContainer,
+  ComponentRender,
+  ProviderSelector
+]
+export default {
+  install (app) {
+    for (const item of list) {
+      app.component(item.name, item)
+    }
+  }
+}

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

@@ -23,7 +23,9 @@
                   <a-button type="danger" @click="remove(item,index)"><template #icon ><DeleteOutlined /></template></a-button>
               </template>
 
-              <a-radio :checked="item.key===selectedKey" @update:checked="selectedKey = item.key">【{{item.key}}】 {{ item.name }}</a-radio>
+              <a-radio :checked="item.key===selectedKey" @update:checked="selectedKey = item.key">
+                 {{ item.name }} ({{item.type}})
+              </a-radio>
 
             </a-list-item>
           </template>
@@ -38,7 +40,7 @@
   <a-modal v-model:visible="editVisible" dialogClass="d-dialog" width="700px" title="编辑授权" @ok="onSubmit">
 
     <a-form ref="formRef" class="domain-form" :model="formData" labelWidth="150px" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="类型" :rules="rules.type">
+      <a-form-item label="类型" name="type" :rules="rules.type">
         <a-radio-group  :disabled="editIndex!=null" v-model:value="formData.type" @change="onTypeChanged" >
           <a-radio-button v-for="(option) of providerDefineList" :key="option.name" :value="option.name">
             {{option.label}}
@@ -47,19 +49,15 @@
       </a-form-item>
 
       <template v-if="formData.type && currentProvider">
-        <a-form-item  label="key" name="key" :rules="rules.key">
-          <a-input :disabled="editIndex!=null" v-model:value="formData.key"/>
-          <div class="helper">不重复的key</div>
-        </a-form-item>
         <a-form-item label="名称" name="name" :rules="rules.name">
           <a-input v-model:value="formData.name"/>
         </a-form-item>
-        <a-form-item v-for="(item,key) in currentProvider.input"
+        <a-form-item v-for="(item,key,index) in currentProvider.input"
-                     :key="key"
+                     :key="index"
+                     v-bind="item.component||{}"
                      :label="item.label || key"
-                     :name="key"
+                     :name="key">
-                     :rules="[{ required: true, message: '必填项' }]">
+          <component-render v-model:value="formData[key]" v-bind="item.component || {}"></component-render>
-          <a-input v-model:value="formData[key]" v-bind="item.attrs" ></a-input>
           <div class="helper">{{item.desc}}</div>
         </a-form-item>
       </template>
@@ -75,42 +73,21 @@ import { ref, reactive, nextTick, watch } from 'vue'
 import { useForm } from '@ant-design-vue/use'
 import _ from 'lodash-es'
 import providerApi from '@/api/api.providers'
-function useEdit (props, context, providerList, onSave) {
+function useEdit (props, context, providerList, onEditSave) {
   const formData = reactive({
     key: '',
     name: '',
-    type: ''
+    type: undefined
   })
 
-  const rules = reactive({
+  const rules = ref({
     type: [{
+      type: 'string',
       required: true,
       message: '请选择类型'
     }],
-    key: [{
-      required: true,
-      message: '请输入key'
-    }, {
-      validator (rule, value) {
-        const providers = providerList.value
-        if (!providers || providers.length === 0) {
-          return Promise.resolve()
-        }
-        if (editIndex.value != null) {
-          return Promise.resolve()
-        }
-        const filter = providers.filter(item => item.key === value)
-        console.log('validate', filter)
-        if (filter.length === 0) {
-          return Promise.resolve()
-        } else {
-          // eslint-disable-next-line prefer-promise-reject-errors
-          return Promise.reject('key不能重复')
-        }
-      },
-      message: 'key不能与其他授权配置重复'
-    }],
     name: [{
+      type: 'string',
       required: true,
       message: '请输入名称'
     }]
@@ -121,9 +98,10 @@ function useEdit (props, context, providerList, onSave) {
   // const { resetFields, validate, validateInfos } = useForm(formData, rules)
   const onSubmit = async e => {
     e.preventDefault()
-    await formRef.value.validate()
+    const res = await formRef.value.validate()
+    console.log('validation:', res)
     const newProvider = _.cloneDeep(formData)
-    onSave(newProvider, editIndex.value)
+    onEditSave(newProvider, editIndex.value)
     closeEdit()
   }
 
@@ -139,6 +117,7 @@ function useEdit (props, context, providerList, onSave) {
       changeType(item.type)
     } else {
       editIndex.value = null
+      formData.type = null
     }
     editVisible.value = true
   }
@@ -192,6 +171,23 @@ function useEdit (props, context, providerList, onSave) {
     add
   }
 }
+
+let index = 0
+const keyPrefix = 'provider_'
+function generateNewKey (list) {
+  index++
+  let exists = false
+  for (const item of list) {
+    if (item.key === keyPrefix + index) {
+      exists = true
+      break
+    }
+  }
+  if (exists) {
+    return generateNewKey(list)
+  }
+  return keyPrefix + index
+}
 export default {
   name: 'provider-manager',
   props: {
@@ -219,11 +215,13 @@ export default {
       selectedKey.value = props.value
     }, { immediate: true })
 
-    const onEditSave = (newProvier, editIndex) => {
+    const onEditSave = (newProvider, editIndex) => {
       if (editIndex == null) {
-        providerList.value.push(newProvier)
+        // add 生成一个key
+        newProvider.key = generateNewKey(providerList.value)
+        providerList.value.push(newProvider)
       } else {
-        _.merge(providerList.value[editIndex], newProvier)
+        _.merge(providerList.value[editIndex], newProvider)
       }
     }
 

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

@@ -4,7 +4,7 @@
       :value="value"
       @update:value="valueUpdate"
     >
-      <a-select-option v-for="item of providers" :key="item.key" :value="item.key">
+      <a-select-option v-for="item of providers" :key="item.key" :value="item.key" :disabled="isDisabled(item)">
         {{ item.name }}
       </a-select-option>
     </a-select>
@@ -35,7 +35,8 @@ export default {
     },
     providers: {
       type: Object
-    }
+    },
+    filter: {}
   },
   setup (props, context) {
     const providerManagerRef = ref(null)
@@ -52,11 +53,19 @@ export default {
     const valueUpdate = (val) => {
       context.emit('update:value', val)
     }
+
+    const isDisabled = (item) => {
+      if (!props.filter) {
+        return false
+      }
+      return item.type === props.filter
+    }
     return {
       providersUpdate,
       valueUpdate,
       providerManagerOpen,
-      providerManagerRef
+      providerManagerRef,
+      isDisabled
     }
   }
 }

other/certd-ui/src/main.js

@@ -6,11 +6,11 @@ import 'ant-design-vue/dist/antd.css'
 import '@/style/common.less'
 import { i18n } from '@/i18n'
 import icons from './icons'
-import DContainer from '@/components/d-container'
+import components from './components'
 const app = createApp(App)
 app.config.productionTip = false
 app.use(i18n)
 app.use(Antd)
 icons(app)
-app.component('d-container', DContainer)
+app.use(components)
 app.use(router).mount('#app')

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

@@ -71,7 +71,6 @@
 import { reactive, toRaw, ref, watch } from 'vue'
 import { useForm } from '@ant-design-vue/use'
 import _ from 'lodash-es'
-import ProviderSelector from '@/views/detail/components/provider-selector'
 
 function useDrawer () {
   const visible = ref(false)
@@ -94,7 +93,6 @@ function useDrawer () {
 
 export default {
   name: 'cert-form',
-  components: { ProviderSelector },
   emits: ['update:accessProviders', 'update:cert'],
   // 属性定义
   props: {

other/certd-ui/src/views/detail/components/task-form.vue

@@ -39,8 +39,8 @@
             ></a-input>
           </a-form-item>
 
-          <a-form-item v-for="(value,key) in currentPlugin.input" :key="key" :label="value.label">
+          <a-form-item v-for="(item,key) in currentPlugin.input" :key="key" :label="item.label">
-            <a-input v-model:value="currentTask[key]"></a-input>
+            <component-render v-model:value="currentTask[key]" v-bind="item.component || {}"></component-render>
           </a-form-item>
 
         </a-form>
@@ -57,12 +57,10 @@
 
     </template>
   </a-drawer>
-  <provider-manager ref="providerManager"></provider-manager>
 </template>
 
 <script>
 import { message } from 'ant-design-vue'
-import ProviderManager from '@/views/detail/components/provider-manager'
 import pluginsApi from '@/api/api.plugins'
 import { ref } from 'vue'
 // eslint-disable-next-line no-unused-vars
@@ -176,7 +174,6 @@ function useProviderManager () {
 }
 export default {
   name: 'task-form',
-  components: { ProviderManager },
   emits: ['update'],
   props: {
     options: {}

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

@@ -81,6 +81,7 @@
           <PlusCircleOutlined title="添加部署流程" class="add-icon" @click="deployAdd"/>
         </h3>
         <a-divider></a-divider>
+
         <div class="deploy-list">
 
           <a-card class="deploy-item" v-for="(deploy,index) of options.deploy" :key="index">

packages/plugins/src/aliyun/deploy-to-cdn/index.js

@@ -8,7 +8,11 @@ const define = {
   input: {
     domainName: {
       label: 'cdn加速域名',
-      required: true
+      required: true,
+      attrs: {
+        placeholder: 'cdn加速域名',
+        rules: [{ required: true, message: '该项必填' }]
+      }
     },
     certName: {
       label: '证书名称'
@@ -34,7 +38,10 @@ const define = {
       label: 'Access提供者',
       type: [String, Object],
       desc: 'AccessProviders的key 或 一个包含accessKeyId与accessKeySecret的对象',
-      options: 'accessProviders[type=aliyun]',
+      component: {
+        name: 'provider-selector',
+        filter: 'aliyun'
+      },
       required: true
     }
   },

packages/providers/src/dns-provider/aliyun.js

@@ -10,7 +10,6 @@ export class AliyunDnsProvider extends AbstractDnsProvider {
       input: {
         accessKeyId: {
           type: String,
-          desc: 'accessKeyId',
           attrs: {
             placeholder: 'accessKeyId',
             rules: [{ required: true, message: '必填项' }]
@@ -19,7 +18,6 @@ export class AliyunDnsProvider extends AbstractDnsProvider {
         },
         accessKeySecret: {
           type: String,
-          desc: 'accessKeySecret',
           attrs: {
             placeholder: 'accessKeySecret',
             rules: [{ required: true, message: '必填项' }]

packages/providers/src/dns-provider/dnspod.js

@@ -10,12 +10,18 @@ export class DnspodDnsProvider extends AbstractDnsProvider {
       input: {
         id: {
           type: String,
-          desc: 'dnspod的账户id'
+          attrs: {
+            placeholder: 'dnspod接口账户id',
+            rules: [{ required: true, message: '该项必填' }]
+          }
         },
         token: {
           type: String,
           label: 'token',
-          desc: 'dnspod的开放接口token'
+          attrs: {
+            placeholder: '开放接口token',
+            rules: [{ required: true, message: '该项必填' }]
+          }
         }
       }
     }