perf: ui 升级到antdv3.x

packages/ui/certd-ui/src/App.vue

@@ -16,7 +16,6 @@
 </template>
 <script>
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import { useI18n } from 'vue-i18n'
 
 export default {
   data () {
@@ -25,8 +24,6 @@ export default {
     }
   },
   setup () {
-    const { t } = useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
-    return { t } // return render context that included `t`
   }
 }
 </script>

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

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

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

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

packages/ui/certd-ui/src/api/api.exports.js

@@ -1,40 +1,40 @@
-import { request } from './service'
-import _ from 'lodash-es'
-function arrayToMap (arr) {
+import { request } from "./service";
+import _ from "lodash-es";
+function arrayToMap(arr) {
   if (arr && arr instanceof Array) {
-    const map = {}
-    _.forEach(arr, item => {
-      map[item.key] = item
-    })
-    return map
+    const map = {};
+    _.forEach(arr, (item) => {
+      map[item.key] = item;
+    });
+    return map;
   }
-  return arr
+  return arr;
 }
 
-function transfer (options) {
-  options.accessProviders = arrayToMap(options.accessProviders)
+function transfer(options) {
+  options.accessProviders = arrayToMap(options.accessProviders);
 }
 export default {
-  exportsToZip (options) {
-    transfer(options)
+  exportsToZip(options) {
+    transfer(options);
     return request({
-      url: '/exports/toZip',
+      url: "/exports/toZip",
       data: { options },
-      method: 'post',
-      responseType: 'blob' // 重点在于配置responseType: 'blob'
-    }).then(res => {
-      console.log('res', res)
-      const filename = decodeURI(res.headers['content-disposition'].replace('attachment;filename=', '')) // 由后端设置下载文件名
-      const blob = new Blob([res.data], { type: 'application/zip' })
-      const a = document.createElement('a')
-      const url = window.URL.createObjectURL(blob)
-      a.href = url
-      a.download = filename
-      const body = document.getElementsByTagName('body')[0]
-      body.appendChild(a)
-      a.click()
-      body.removeChild(a)
-      window.URL.revokeObjectURL(url)
-    })
+      method: "post",
+      responseType: "blob" // 重点在于配置responseType: 'blob'
+    }).then((res) => {
+      console.log("res", res);
+      const filename = decodeURI(res.headers["content-disposition"].replace("attachment;filename=", "")); // 由后端设置下载文件名
+      const blob = new Blob([res.data], { type: "application/zip" });
+      const a = document.createElement("a");
+      const url = window.URL.createObjectURL(blob);
+      a.href = url;
+      a.download = filename;
+      const body = document.getElementsByTagName("body")[0];
+      body.appendChild(a);
+      a.click();
+      body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    });
   }
-}
+};

packages/ui/certd-ui/src/api/api.plugins.js

@@ -1,14 +1,14 @@
-import { request } from './service'
-import inputHandler from './util.input.handler'
+import { request } from "./service";
+import inputHandler from "./util.input.handler";
 export default {
-  async list () {
+  async list() {
     const ret = await request({
-      url: '/plugins/list'
-    })
+      url: "/plugins/list"
+    });
 
-    inputHandler.handle(ret)
+    inputHandler.handle(ret);
 
-    console.log('plugins', ret)
-    return ret
+    console.log("plugins", ret);
+    return ret;
   }
-}
+};

packages/ui/certd-ui/src/api/index.js

@@ -1,10 +1,15 @@
-import { assign, map } from 'lodash'
-import { service, request } from './service'
+import { assign, map } from "lodash";
+import { service, request } from "./service";
 
-const files = require.context('./modules', false, /\.js$/)
-const generators = files.keys().map(key => files(key).default)
+const files = require.context("./modules", false, /\.js$/);
+const generators = files.keys().map((key) => files(key).default);
 
-export default assign({}, ...map(generators, generator => generator({
-  service,
-  request
-})))
+export default assign(
+  {},
+  ...map(generators, (generator) =>
+    generator({
+      service,
+      request
+    })
+  )
+);

packages/ui/certd-ui/src/api/service.js

@@ -1,94 +1,117 @@
-import axios from 'axios'
-import { get } from 'lodash-es'
-import { errorLog, errorCreate } from './tools'
-
+import axios from "axios";
+import { get } from "lodash-es";
+import { errorLog, errorCreate } from "./tools";
+import { env } from "/src/utils/util.env";
 /**
  * @description 创建请求实例
  */
-function createService () {
+function createService() {
   // 创建一个 axios 实例
-  const service = axios.create()
+  const service = axios.create();
   // 请求拦截
   service.interceptors.request.use(
-    config => config,
-    error => {
+    (config) => config,
+    (error) => {
       // 发送失败
-      console.log(error)
-      return Promise.reject(error)
+      console.log(error);
+      return Promise.reject(error);
     }
-  )
+  );
   // 响应拦截
   service.interceptors.response.use(
-    response => {
-      console.log('response.config', response.config)
-      if (response.config.responseType === 'blob') {
-        return response
+    (response) => {
+      console.log("response.config", response.config);
+      if (response.config.responseType === "blob") {
+        return response;
       }
       // dataAxios 是 axios 返回数据中的 data
-      const dataAxios = response.data
+      const dataAxios = response.data;
       // 这个状态码是和后端约定的
-      const { code } = dataAxios
+      const { code } = dataAxios;
       // 根据 code 进行判断
       if (code === undefined) {
         // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
         if (response.config.unpack) {
-          return dataAxios
+          return dataAxios;
         }
-        return dataAxios.data
+        return dataAxios.data;
       } else {
         // 有 code 代表这是一个后端接口 可以进行进一步的判断
         switch (code) {
           case 0:
             // [ 示例 ] code === 0 代表没有错误
-            return dataAxios.data
+            return dataAxios.data;
           default:
             // 不是正确的 code
-            errorCreate(`${dataAxios.msg}: ${response.config.url}`)
-            return dataAxios
+            errorCreate(`${dataAxios.msg}: ${response.config.url}`);
+            return dataAxios;
         }
       }
     },
-    error => {
-      const status = get(error, 'response.status')
+    (error) => {
+      const status = get(error, "response.status");
       switch (status) {
-        case 400: error.message = '请求错误'; break
-        case 401: error.message = '未授权，请登录'; break
-        case 403: error.message = '拒绝访问'; break
-        case 404: error.message = `请求地址出错: ${error.response.config.url}`; break
-        case 408: error.message = '请求超时'; break
-        case 500: error.message = '服务器内部错误'; break
-        case 501: error.message = '服务未实现'; break
-        case 502: error.message = '网关错误'; break
-        case 503: error.message = '服务不可用'; break
-        case 504: error.message = '网关超时'; break
-        case 505: error.message = 'HTTP版本不受支持'; break
-        default: break
+        case 400:
+          error.message = "请求错误";
+          break;
+        case 401:
+          error.message = "未授权，请登录";
+          break;
+        case 403:
+          error.message = "拒绝访问";
+          break;
+        case 404:
+          error.message = `请求地址出错: ${error.response.config.url}`;
+          break;
+        case 408:
+          error.message = "请求超时";
+          break;
+        case 500:
+          error.message = "服务器内部错误";
+          break;
+        case 501:
+          error.message = "服务未实现";
+          break;
+        case 502:
+          error.message = "网关错误";
+          break;
+        case 503:
+          error.message = "服务不可用";
+          break;
+        case 504:
+          error.message = "网关超时";
+          break;
+        case 505:
+          error.message = "HTTP版本不受支持";
+          break;
+        default:
+          break;
       }
-      errorLog(error)
-      return Promise.reject(error)
+      errorLog(error);
+      return Promise.reject(error);
     }
-  )
-  return service
+  );
+  return service;
 }
 
 /**
  * @description 创建请求方法
  * @param {Object} service axios 实例
  */
-function createRequestFunction (service) {
+function createRequestFunction(service) {
   return function (config) {
     const configDefault = {
       headers: {
-        'Content-Type': get(config, 'headers.Content-Type', 'application/json')
+        "Content-Type": get(config, "headers.Content-Type", "application/json")
       },
       timeout: 5000,
-      baseURL: process.env.VUE_APP_API,
+      baseURL: env.API,
       data: {}
-    }
-    return service(Object.assign(configDefault, config))
-  }
+    };
+    return service(Object.assign(configDefault, config));
+  };
 }
 
 // 用于真实网络请求的实例和请求方法
-export const service = createService()
-export const request = createRequestFunction(service)
+export const service = createService();
+export const request = createRequestFunction(service);

packages/ui/certd-ui/src/api/tools.js

@@ -1,18 +1,18 @@
-import { notification } from 'ant-design-vue'
+import { notification } from "ant-design-vue";
 
 /**
  * @description 安全地解析 json 字符串
  * @param {String} jsonString 需要解析的 json 字符串
  * @param {String} defaultValue 默认值
  */
-export function parse (jsonString = '{}', defaultValue = {}) {
-  let result = defaultValue
+export function parse(jsonString = "{}", defaultValue = {}) {
+  let result = defaultValue;
   try {
-    result = JSON.parse(jsonString)
+    result = JSON.parse(jsonString);
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
-  return result
+  return result;
 }
 
 /**
@@ -21,11 +21,8 @@ export function parse (jsonString = '{}', defaultValue = {}) {
  * @param {String} msg 状态信息
  * @param {Number} code 状态码
  */
-export function response (data = {}, msg = '', code = 0) {
-  return [
-    200,
-    { code, msg, data }
-  ]
+export function response(data = {}, msg = "", code = 0) {
+  return [200, { code, msg, data }];
 }
 
 /**
@@ -33,8 +30,8 @@ export function response (data = {}, msg = '', code = 0) {
  * @param {Any} data 返回值
  * @param {String} msg 状态信息
  */
-export function responseSuccess (data = {}, msg = '成功') {
-  return response(data, msg)
+export function responseSuccess(data = {}, msg = "成功") {
+  return response(data, msg);
 }
 
 /**
@@ -43,29 +40,29 @@ export function responseSuccess (data = {}, msg = '成功') {
  * @param {String} msg 状态信息
  * @param {Number} code 状态码
  */
-export function responseError (data = {}, msg = '请求失败', code = 500) {
-  return response(data, msg, code)
+export function responseError(data = {}, msg = "请求失败", code = 500) {
+  return response(data, msg, code);
 }
 
 /**
  * @description 记录和显示错误
  * @param {Error} error 错误对象
  */
-export function errorLog (error) {
+export function errorLog(error) {
   // 打印到控制台
-  console.log(error)
+  console.log(error);
   // 显示提示
   notification.error({
     message: error.message
-  })
+  });
 }
 
 /**
  * @description 创建一个错误
  * @param {String} msg 错误信息
  */
-export function errorCreate (msg) {
-  const error = new Error(msg)
-  errorLog(error)
-  throw error
+export function errorCreate(msg) {
+  const error = new Error(msg);
+  errorLog(error);
+  throw error;
 }

packages/ui/certd-ui/src/api/util.input.handler.js

@@ -1,37 +1,35 @@
-import _ from 'lodash-es'
+import _ from "lodash-es";
 
-function handleInputs (inputs) {
+function handleInputs(inputs) {
   if (inputs == null) {
-    return
+    return;
   }
   _.forEach(inputs, (item, key) => {
     if (item.required === true) {
       if (item.component == null) {
-        item.component = {}
+        item.component = {};
       }
-      let rules = item.component.rules
+      let rules = item.component.rules;
       if (rules == null) {
-        item.component.rules = rules = []
+        item.component.rules = rules = [];
       }
       if (rules.length > 0) {
-        const hasRequired = rules.filter(rule => {
-          return rule.required === true
-        })
+        const hasRequired = rules.filter((rule) => {
+          return rule.required === true;
+        });
         if (hasRequired.length > 0) {
-          return
+          return;
         }
       }
-      rules.push({ required: true, message: '该项必填' })
-      delete item.required
+      rules.push({ required: true, message: "该项必填" });
+      delete item.required;
     }
-  })
+  });
 }
 export default {
-
-  handle (list) {
-    _.forEach(list, item => {
-      handleInputs(item.input)
-    })
+  handle(list) {
+    _.forEach(list, (item) => {
+      handleInputs(item.input);
+    });
   }
-
-}
+};

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

@@ -5,7 +5,8 @@
     :closable="true"
     width="500px"
     v-model:visible="visible"
-    :after-visible-change="onAfterVisibleChange"
+    :destroyOnClose="true"
+    @after-visible-change="onAfterVisibleChange"
   >
     <div class="d-container access-provider-manager">
       <a-button @click="add">
@@ -73,8 +74,6 @@
 
 <script>
 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.access-providers'
 function useEdit (props, context, onEditSave) {

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

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <div class="access-provider-selector">
     <a-select
       :value="value"
@@ -18,11 +19,11 @@
                     :filter="filter"
                     @update:value="valueUpdate"
   ></access-provider-manager>
-
+  </div>
 </template>
 <script>
 import { ref, inject } from 'vue'
-import AccessProviderManager from './access-provider-manager'
+import AccessProviderManager from './access-provider-manager.vue'
 
 export default {
   name: 'access-provider-selector',

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

@@ -1,6 +1,6 @@
-import DContainer from './d-container'
-import ComponentRender from './component-render'
-import AccessProviderSelector from './access-provider-selector/access-provider-selector'
+import DContainer from './d-container.vue'
+import ComponentRender from './component-render.vue'
+import AccessProviderSelector from './access-provider-selector/access-provider-selector.vue'
 
 const list = [
   DContainer,

packages/ui/certd-ui/src/main.ts

@@ -4,12 +4,9 @@ import App from './App.vue'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import './style/common.less'
-import { i18n } from './i18n'
 import icons from './icons'
 import components from './components'
 const app = createApp(App)
-app.config.productionTip = false
-app.use(i18n)
 icons(app)
 app.use(Antd)
 app.use(components)

packages/ui/certd-ui/src/utils/util.env.ts

@@ -0,0 +1,40 @@
+import _ from "lodash-es";
+export function getEnvValue(key) {
+  // @ts-ignore
+  return import.meta.env["VITE_APP_" + key];
+}
+
+export class EnvConfig {
+  API;
+  MODE;
+  STORAGE;
+  TITLE;
+  PM_ENABLED;
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    // @ts-ignore
+    _.forEach(import.meta.env, (value, key) => {
+      if (key.startsWith("VITE_APP")) {
+        key = key.replace("VITE_APP_", "");
+        this[key] = value;
+      }
+    });
+    // @ts-ignore
+    this.MODE = import.meta.env.MODE;
+  }
+
+  get(key, defaultValue) {
+    return this[key] ?? defaultValue;
+  }
+  isDev() {
+    return this.MODE === "development" || this.MODE === "debug";
+  }
+  isProd() {
+    return this.MODE === "production";
+  }
+}
+
+export const env = new EnvConfig();

packages/ui/certd-ui/src/views/Home.vue

@@ -10,7 +10,7 @@
               <a-select
                 size="large"
                 mode="tags"
-                :placeholder="$t('please.input.domain')"
+                placeholder="请输入域名"
                 v-model:value="formData.cert.domains"
                 :open="false"
               ></a-select>

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

@@ -5,17 +5,17 @@
     :closable="true"
     width="600px"
     v-model:visible="visible"
-    :after-visible-change="afterVisibleChange"
+    @after-visible-change="afterVisibleChange"
   >
 
     <d-container>
       <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">
+        <a-form-item label="域名" v-bind="validateInfos.domains">
           <a-select
             mode="tags"
-            :placeholder="$t('please.input.domain')"
+            placeholder="请输入域名"
             v-model:value="formData.domains"
             :open="false"
           ></a-select>
@@ -24,7 +24,7 @@
           </template>
         </a-form-item>
 
-        <a-form-item :label="$t('email')" v-bind="validateInfos.email">
+        <a-form-item label="邮箱" v-bind="validateInfos.email">
           <a-input v-model:value="formData.email"/>
         </a-form-item>
 
@@ -86,7 +86,8 @@
 </template>
 <script>
 import { reactive, ref, watch } from 'vue'
-import { useForm } from '@ant-design-vue/use'
+import { Form } from 'ant-design-vue';
+const useForm = Form.useForm;
 import dnsProviderApi from '../../../api/api.dns-providers'
 import _ from 'lodash-es'
 

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

@@ -4,7 +4,7 @@
     :closable="true"
     width="600px"
     v-model:visible="taskDrawerVisible"
-    :after-visible-change="taskDrawerOnAfterVisibleChange"
+    @after-visible-change="taskDrawerOnAfterVisibleChange"
   >
 
     <template #title>

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

@@ -185,12 +185,12 @@ import { message } from 'ant-design-vue'
 import { reactive, ref, toRef, toRefs, provide, readonly } from 'vue'
 // eslint-disable-next-line no-unused-vars
 import { useRoute } from 'vue-router'
-import CertForm from './components/cert-form'
-import TaskForm from './components/task-form'
+import CertForm from './components/cert-form.vue'
+import TaskForm from './components/task-form.vue'
 import exportsApi from '../../api/api.exports'
 import _ from 'lodash-es'
-import DContainer from '../../components/d-container'
-import commonUtil from '@/utils/util.common'
+import DContainer from '../../components/d-container.vue'
+import commonUtil from '/src/utils/util.common'
 function useDeploy (options) {
   const deployAdd = () => {
     options.deploy.push({
@@ -286,6 +286,10 @@ export default {
       taskFormRef.value.taskEdit(deploy, task, index)
     }
 
+    function taskUpdated(task){
+      console.log('task updated',task)
+    }
+
     useProvideAccessProviders(options)
 
     return {
@@ -297,6 +301,7 @@ export default {
       taskFormRef,
       taskAdd,
       taskEdit,
+      taskUpdated,
       ...useExports(options)
     }
   }