yg-yygl 0.0.1

package/src/views/sys/mail/mail-account/index.vue

@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type { MailAccount, MailAccountQueryParams } from '../../../../api/mail/types';
+
+import { computed, h, reactive, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Drawer,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+import { ElMessage, ElMessageBox, ElSwitch, ElTag } from 'element-plus';
+
+import {
+  deleteMailAccount,
+  getMailAccountList,
+  setDefaultAccount,
+  testConnection,
+  updateMailAccountStatus,
+} from '../../../../api/mail';
+import { StatusTag } from '../../../../components/custom-tags';
+import { MainContainer } from '../../../../components/main-container';
+
+import MailAccountForm from './components/mail-account-form.vue';
+
+// 查询
+const searchParams = ref<MailAccountQueryParams>({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'accountName',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入渠道名称',
+  },
+  {
+    prop: 'accountCode',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入渠道编码',
+  },
+  {
+    prop: 'smtpHost',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入SMTP服务器',
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'select',
+    placeholder: '请选择状态',
+    options: [
+      { label: '已启用', value: 1 },
+      { label: '未启用', value: 0 },
+    ],
+  },
+];
+
+// 列表信息
+const columns = reactive<TableColumn[]>([
+  { prop: 'accountName', label: '渠道名称', minWidth: 120 },
+  { prop: 'accountCode', label: '渠道编码', minWidth: 120 },
+  { prop: 'smtpHost', label: 'SMTP服务器', minWidth: 150 },
+  { prop: 'smtpPort', label: 'SMTP端口', width: 100 },
+  { prop: 'senderEmail', label: '发件人邮箱', minWidth: 180 },
+  { prop: 'senderName', label: '发件人名称', minWidth: 120 },
+  { prop: 'remark', label: '备注', minWidth: 150 },
+  { prop: 'createTime', label: '创建时间', width: 160 },
+  {
+    prop: 'status',
+    label: '状态',
+    width: 90,
+    render: ({ row }: { row: MailAccount }) =>
+      h(StatusTag, {
+        value: row.status || 0,
+      }),
+  },
+  {
+    prop: 'enableSsl',
+    label: 'SSL',
+    width: 80,
+    render: ({ row }: { row: MailAccount }) => {
+      const isEnabled = row.enableSsl === 1;
+      return h(
+        ElTag,
+        {
+          type: isEnabled ? 'success' : 'info',
+        },
+        () => (isEnabled ? '是' : '否'),
+      );
+    },
+  },
+  {
+    prop: 'enableStarttls',
+    label: '加密连线',
+    width: 100,
+    render: ({ row }: { row: MailAccount }) => {
+      const isEnabled = row.enableStarttls === 1;
+      return h(ElSwitch, {
+        modelValue: isEnabled,
+        disabled: true,
+        inlinePrompt: true,
+        activeText: '是',
+        inactiveText: '否',
+      });
+    },
+  },
+  {
+    prop: 'isDefault',
+    label: '默认渠道',
+    width: 100,
+    render: ({ row }: { row: MailAccount }) => {
+      const isDefault = row.isDefault === 1;
+      return h(
+        ElTag,
+        {
+          type: isDefault ? 'success' : 'info',
+        },
+        () => (isDefault ? '是' : '否'),
+      );
+    },
+  },
+]);
+
+// 卡片配置
+const cardOptions = ref({
+  title: 'accountName',
+  icon: 'material-symbols:stacked-email-outline',
+  columns: [
+    { prop: 'accountCode', label: '渠道编码', className: 'w-full truncate' },
+    { prop: 'smtpHost', label: 'SMTP服务器', className: 'w-full truncate' },
+    {
+      prop: 'status',
+      label: '状态',
+      render: ({ row }: { row: MailAccount }) =>
+        h(StatusTag, {
+          value: row.status || 0,
+          activeText: '已启用',
+          inactiveText: '未启用',
+        }),
+    },
+  ],
+  showActions: true,
+  onItemClick: (row: any) => handleView(row as MailAccount),
+});
+
+const actionBtns = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: MailAccount) => handleEdit(row),
+  },
+  {
+    key: 'enable',
+    label: '启用',
+    icon: 'hx-line-built-in:checkbox-circle-line',
+    type: 'primary',
+    show: (row: MailAccount) => row.status === 0,
+    onClick: (row: MailAccount) => handleChangeStatus(row),
+  },
+  {
+    key: 'disable',
+    label: '停用',
+    icon: 'hx-line-built-in:forbid-line',
+    type: 'danger',
+    show: (row: MailAccount) => row.status === 1,
+    onClick: (row: MailAccount) => handleChangeStatus(row),
+  },
+  {
+    key: 'default',
+    label: '设为默认',
+    icon: 'mdi:star-outline',
+    show: (row: MailAccount) => row.isDefault === 0,
+    onClick: (row: MailAccount) => handleSetDefault(row),
+  },
+  {
+    key: 'test',
+    label: '测试连接',
+    icon: 'mdi:connection',
+    onClick: (row: MailAccount) => handleTestConnection(row),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: MailAccount) => handleDelete(row),
+  },
+] as IconActionItem[];
+
+// 配置 API
+const api = {
+  list: (params: any) => getMailAccountList(params),
+  delete: (id: string) => deleteMailAccount([id]),
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  batchDelete,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api,
+});
+
+const drawerVisible = ref(false);
+const mailAccountFormRef = ref<typeof MailAccountForm>();
+const drawerType = ref<'add' | 'edit' | 'view'>('add');
+const drawerTitle = computed(() => {
+  if (drawerType.value === 'add') {
+    return '新增邮件渠道';
+  } else if (drawerType.value === 'edit') {
+    return '编辑邮件渠道';
+  } else {
+    return '查看邮件渠道';
+  }
+});
+
+const handleAdd = () => {
+  drawerType.value = 'add';
+  drawerVisible.value = true;
+};
+
+const editRow = ref<any>(null);
+const handleEdit = (row: any) => {
+  drawerType.value = 'edit';
+  editRow.value = row;
+  drawerVisible.value = true;
+};
+
+const handleView = (row: any) => {
+  drawerType.value = 'view';
+  editRow.value = row;
+  drawerVisible.value = true;
+};
+
+const handleAddSuccess = async () => {
+  const flag = await mailAccountFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    refresh();
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+
+const handleChangeStatus = async (row: MailAccount) => {
+  const actionText = row.status === 0 ? '启用' : '停用';
+  ElMessageBox.confirm(`确定要${actionText}这条数据吗？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async (action) => {
+    if (action === 'confirm') {
+      await updateMailAccountStatus(row.id, row.status === 0 ? 1 : 0);
+      ElMessage.success(row.status === 0 ? '启用成功' : '停用成功');
+      refresh();
+    }
+  });
+};
+
+const handleSetDefault = async (row: MailAccount) => {
+  ElMessageBox.confirm('确定要设置该渠道为默认渠道吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async (action) => {
+    if (action === 'confirm') {
+      await setDefaultAccount(row.id);
+      ElMessage.success('设置成功');
+      refresh();
+    }
+  });
+};
+
+const handleTestConnection = async (row: MailAccount) => {
+  try {
+    await testConnection(row.id);
+    ElMessage.success('连接测试成功');
+  } catch (error: any) {
+    ElMessage.error(error.message || '连接测试失败');
+  }
+};
+
+const handleDelete = async (row: MailAccount) => {
+  ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async (action) => {
+    if (action === 'confirm') {
+      await deleteMailAccount([row.id]);
+      ElMessage.success('删除成功');
+      refresh();
+    }
+  });
+};
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+</script>
+
+<template>
+  <MainContainer>
+    <div class="bg-background flex h-full w-full flex-col overflow-hidden">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <Table
+        :data="data"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="true"
+        layout-type="table"
+        action-width="170px"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+        :on-batch-delete="batchDelete"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增渠道
+            </IconButton>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+        <template #card-actions="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+    <Drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      :type="drawerType"
+      size="808px"
+      :show-confirm-button="drawerType !== 'view'"
+      :cancel-text="drawerType === 'view' ? '关闭' : '取消'"
+      @confirm="handleAddSuccess"
+      @closed="handleDrawerClosed"
+    >
+      <MailAccountForm
+        ref="mailAccountFormRef"
+        :edit-data="editRow"
+        :type="drawerType"
+      />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss"></style>

package/src/views/sys/mail/mail-blacklist/components/mail-blacklist-form.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type { MailBlackWhiteListCreateRequest, MailBlackWhiteListUpdateRequest } from '../../../../../api/mail/types';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { Form } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { createMailBlackWhite, updateMailBlackWhite } from '../../../../../api/mail';
+
+const props = withDefaults(
+  defineProps<{
+    editData?: any;
+    type?: 'add' | 'edit' | 'view';
+  }>(),
+  {
+    editData: () => ({}),
+    type: 'add',
+  },
+);
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id && props.type === 'edit');
+const isView = computed(() => props.type === 'view');
+const loading = ref(false);
+const formRef = ref();
+
+// 表单初始数据
+const initialFormData = {
+  type: 2, // 邮箱地址
+  blackWhiteType: 1, // 黑名单
+  value: '',
+  reason: '',
+  expireTime: '',
+};
+
+const formData = computed(() => {
+  return formRef.value?.getValues();
+});
+
+const handleTypeChange = async () => {
+  await nextTick();
+
+  if (typeof formRef.value?.clearValidate === 'function') {
+    formRef.value?.clearValidate('value');
+  }
+
+  const currentValue = formRef.value?.getValues?.()?.value;
+  if (!currentValue) return;
+
+  if (typeof formRef.value?.validateField === 'function') {
+    formRef.value?.validateField('value');
+  }
+};
+
+// 表单配置
+const formItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'type',
+    label: '类型',
+    type: 'select',
+    required: true,
+    placeholder: '请选择类型',
+    options: [
+      { label: '邮箱地址', value: 2 },
+      { label: 'IP地址', value: 1 },
+    ],
+    rules: [{ required: true, message: '请选择类型', trigger: ['change'] }],
+    props: {
+      onChange: handleTypeChange,
+    },
+  },
+  {
+    prop: 'value',
+    label: '黑名单值',
+    type: 'input',
+    required: true,
+    placeholder: '请输入邮箱地址或IP地址',
+    gridCols: 1,
+    rules: [
+      { required: true, message: '请输入黑名单值', trigger: ['blur', 'input'] },
+      {
+        max: 100,
+        message: '黑名单值长度不能超过100个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        validator: (rule: any, value: string, callback: Function) => {
+          const type = formData.value?.type;
+          if (type === 2) {
+            // 验证邮箱地址格式
+            const emailReg = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/;
+            if (!emailReg.test(value)) {
+              callback(new Error('请输入正确的邮箱地址格式'));
+            } else {
+              callback();
+            }
+          } else if (type === 1) {
+            // 验证IP地址格式
+            const ipReg = /^(\d{1,3}\.){3}\d{1,3}$/;
+            if (!ipReg.test(value)) {
+              callback(new Error('请输入正确的IP地址格式'));
+            } else {
+              // 进一步验证IP地址的每一段是否在0-255之间
+              const parts = value.split('.');
+              const valid = parts.every((part) => {
+                const num = Number.parseInt(part, 10);
+                return num >= 0 && num <= 255;
+              });
+              if (!valid) {
+                callback(new Error('IP地址的每一段必须在0-255之间'));
+              } else {
+                callback();
+              }
+            }
+          } else {
+            callback();
+          }
+        },
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'reason',
+    label: '原因',
+    type: 'textarea',
+    placeholder: '请输入原因',
+    gridCols: 1,
+    rules: [
+      {
+        max: 500,
+        message: '原因长度不能超过500个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+    props: {
+      rows: 3,
+      maxlength: 500,
+      showWordLimit: true,
+    },
+  },
+  {
+    prop: 'expireTime',
+    label: '过期时间',
+    type: 'datetime',
+    placeholder: '请选择过期时间(不选则永久有效)',
+    gridCols: 1,
+    props: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+]);
+
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    const submitData = {
+      ...formData.value,
+      blackWhiteType: 1, // 固定为黑名单
+      ...(isEdit.value ? { id: props.editData.id } : {}),
+    };
+
+    // 调用API
+    await (isEdit.value
+      ? updateMailBlackWhite(submitData as MailBlackWhiteListUpdateRequest)
+      : createMailBlackWhite(submitData as MailBlackWhiteListCreateRequest));
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch (error) {
+    console.error('提交失败:', error);
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 初始化表单数据
+const initFormData = async (data?: any) => {
+  if (data?.id) {
+    // 等待表单组件完全渲染后再设置值
+    await nextTick();
+    formRef.value?.setValues(data);
+  }
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+// 重置表单
+const resetForm = () => {
+  formRef.value?.reset();
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+};
+
+defineExpose({
+  handleSubmit,
+  resetForm,
+  initFormData,
+});
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <Form
+      ref="formRef"
+      :items="formItems"
+      :initial-values="initialFormData"
+      :show-actions="false"
+      label-width="auto"
+      :use-grid="true"
+      :grid-cols="2"
+      :grid-gutter="20"
+      :disabled="isView"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>