perf: 邮箱支持保存和选择

packages/ui/certd-client/src/components/email-selector/api.ts

@@ -0,0 +1,29 @@
+import { request } from "/src/api/service";
+
+export async function EmailList() {
+  return await request({
+    url: "/mine/email/list",
+    method: "post",
+    data: {},
+  });
+}
+
+export async function EmailDelete(email: string) {
+  return await request({
+    url: "/mine/email/delete",
+    method: "post",
+    data: {
+      email: email,
+    },
+  });
+}
+
+export async function EmailAdd(email: string) {
+  return await request({
+    url: "/mine/email/add",
+    method: "post",
+    data: {
+      email: email,
+    },
+  });
+}

packages/ui/certd-client/src/components/email-selector/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <a-select :options="emails">
+    <template #option="{ value: val }">
+      <div class="flex flex-row w-full">
+        <span class="flex-1">{{ val }}</span>
+        <fs-icon class="ml-5" icon="ion:close" @click="deleteItem(val)"></fs-icon>
+      </div>
+    </template>
+    <template #dropdownRender="{ menuNode: menu }">
+      <v-nodes :vnodes="menu" />
+      <a-divider style="margin: 4px 0" />
+      <div class="w-full flex flex-row p-5">
+        <a-input ref="inputRef" v-model:value="newEmail" class="flex-1" placeholder="添加新邮箱" @keydown.enter="addItem" />
+        <a-button class="ml-5" type="primary" @click="addItem">
+          <template #icon>
+            <plus-outlined />
+          </template>
+          添加邮箱
+        </a-button>
+      </div>
+    </template>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, onMounted, ref } from "vue";
+import * as api from "./api";
+import { Modal, notification } from "ant-design-vue";
+
+const props = defineProps<{}>();
+const VNodes = defineComponent({
+  props: {
+    vnodes: {
+      type: Object,
+      required: true,
+    },
+  },
+  render() {
+    return this.vnodes;
+  },
+});
+
+const newEmail = ref("");
+const emails = ref([]);
+
+onMounted(async () => {
+  const list = await api.EmailList();
+  emails.value = list.map((item: string) => {
+    return {
+      value: item,
+    };
+  });
+});
+async function addItem() {
+  const email = newEmail.value;
+  //验证邮箱格式
+  if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(newEmail.value)) {
+    notification.error({
+      message: "请填写正确的邮箱地址",
+    });
+    return;
+  }
+
+  await api.EmailAdd(email);
+  emails.value.push({
+    value: email,
+    label: email,
+  });
+  newEmail.value = "";
+}
+
+async function deleteItem(value: string) {
+  Modal.confirm({
+    title: "删除邮箱",
+    content: "确定要删除此邮箱吗？",
+    onOk: async () => {
+      await api.EmailDelete(value);
+      emails.value = emails.value.filter(item => item.value !== value);
+    },
+  });
+}
+</script>

packages/ui/certd-client/src/components/index.ts

@@ -14,12 +14,14 @@ import FileInput from "./file-input.vue";
 import PemInput from "./pem-input.vue";
 import { defineAsyncComponent } from "vue";
 import NotificationSelector from "../views/certd/notification/notification-selector/index.vue";
+import EmailSelector from "./email-selector/index.vue";
 export default {
   install(app: any) {
     app.component(
       "CodeEditor",
       defineAsyncComponent(() => import("./code-editor/index.vue"))
     );
+    app.component("EmailSelector", EmailSelector);
     app.component("NotificationSelector", NotificationSelector);
     app.component("PiContainer", PiContainer);
     app.component("TextEditable", TextEditable);

packages/ui/certd-client/src/components/vip-button/api.ts

@@ -4,7 +4,7 @@ export async function doActive(form: any) {
   return await request({
     url: "/sys/plus/active",
     method: "post",
-    data: form
+    data: form,
   });
 }
 
@@ -12,6 +12,6 @@ export async function getVipTrial() {
   return await request({
     url: "/sys/plus/getVipTrial",
     method: "post",
-    data: {}
+    data: {},
   });
 }