yg-yygl 0.0.1

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

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type {
+  MailBlackWhiteListResponse,
+  MailBlackWhiteListQueryRequest,
+} 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 } from 'element-plus';
+
+import { deleteMailBlackWhite, getMailBlackWhiteList } from '../../../../api/mail';
+import { Tag } from '../../../../components/custom-tags';
+import { MainContainer } from '../../../../components/main-container';
+
+import MailBlacklistForm from './components/mail-blacklist-form.vue';
+
+// 查询
+const searchParams = ref<MailBlackWhiteListQueryRequest>({ blackWhiteType: 1 });
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'type',
+    label: '类型',
+    type: 'select',
+    options: [
+      { label: '邮箱地址', value: 2 },
+      { label: 'IP地址', value: 1 },
+    ],
+  },
+  {
+    prop: 'value',
+    label: '黑名单值',
+    type: 'input',
+    placeholder: '请输入邮箱地址或IP地址',
+  },
+];
+
+// 列表信息
+const columns = reactive<TableColumn[]>([
+  {
+    prop: 'value',
+    label: '黑名单值',
+    minWidth: 160,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'type',
+    label: '类型',
+    render: ({ row }: { row: MailBlackWhiteListResponse }) =>
+      h(Tag, {
+        value: row.type,
+        effect: 'plain',
+        hit: true,
+        size: 'small',
+        options: [
+          { label: '邮箱地址', value: 2 },
+          { label: 'IP地址', value: 1 },
+        ],
+      }),
+  },
+  {
+    prop: 'reason',
+    label: '原因',
+    minWidth: 160,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'expireTime',
+    label: '过期时间',
+    minWidth: 120,
+    formatter: (_row: any, _column: any, cellValue: string) =>
+      cellValue || '永久有效',
+  },
+  { prop: 'createTime', label: '创建时间', minWidth: 120 },
+]);
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row as MailBlackWhiteListResponse),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => handleDelete(row as MailBlackWhiteListResponse),
+  },
+];
+
+// 配置 API
+const api = {
+  list: (params: any) => getMailBlackWhiteList(params),
+  delete: (id: string | number) => deleteMailBlackWhite(Number(id)),
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  batchDelete,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api,
+  initParams: { blackWhiteType: 1 },
+});
+
+const drawerVisible = ref(false);
+const mailBlacklistFormRef = ref<typeof MailBlacklistForm>();
+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 handleAddSuccess = async () => {
+  const flag = await mailBlacklistFormRef.value?.handleSubmit();
+  if (flag) {
+    handleDrawerClosed();
+    refresh();
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  editRow.value = null;
+};
+
+const handleDelete = async (row: MailBlackWhiteListResponse) => {
+  ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async (action) => {
+    if (action === 'confirm') {
+      await deleteMailBlackWhite(row.id);
+      ElMessage.success('删除成功');
+      refresh();
+    }
+  });
+};
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search({
+    ...params,
+    blackWhiteType: 1,
+  });
+};
+
+const handleFilterReset = () => {
+  searchParams.value = { blackWhiteType: 1 };
+  reset();
+};
+</script>
+
+<template>
+  <MainContainer>
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <Table
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="false"
+        layout-type="table"
+        action-width="110px"
+        @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>
+      </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"
+    >
+      <MailBlacklistForm
+        ref="mailBlacklistFormRef"
+        :edit-data="editRow"
+        :type="drawerType"
+      />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss">
+:global(.long-text-tooltip) {
+  max-width: min(720px, calc(100vw - 32px));
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+:global(.long-text-tooltip-content) {
+  max-width: 100%;
+  white-space: normal;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+</style>

package/src/views/sys/mail/mail-log/components/mail-log-detail.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { MailLog } from '../../../../../api/mail/types';
+
+import { computed } from 'vue';
+
+const props = defineProps<{
+  logData?: MailLog;
+}>();
+
+const statusMap: Record<number, { text: string; type: string }> = {
+  0: { text: '待发送', type: 'info' },
+  1: { text: '发送成功', type: 'success' },
+  2: { text: '发送失败', type: 'danger' },
+};
+
+const templateTypeMap: Record<number, string> = {
+  1: '通知',
+  2: '验证码',
+  3: '营销',
+  4: '系统',
+};
+
+const statusInfo = computed(() => {
+  return statusMap[props.logData?.sendStatus ?? 0] ?? {
+    text: '待发送',
+    type: 'info',
+  };
+});
+</script>
+
+<template>
+  <div class="mail-log-detail" v-if="logData">
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="日志ID">{{
+        logData.id
+      }}</el-descriptions-item>
+      <el-descriptions-item label="发送状态">
+        <el-tag :type="statusInfo.type">{{ statusInfo.text }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="收件人邮箱">{{
+        logData.toEmail
+      }}</el-descriptions-item>
+      <el-descriptions-item label="抄送邮箱">{{
+        logData.ccEmails || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="密送邮箱">{{
+        logData.bccEmails || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="邮件主题" :span="2">{{
+        logData.subject
+      }}</el-descriptions-item>
+      <el-descriptions-item label="账号名称">{{
+        logData.accountName || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="账号编码">{{
+        logData.accountCode || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="模板名称">{{
+        logData.templateName || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="模板编码">{{
+        logData.templateCode || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="发送时间">{{
+        logData.sendTime || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间">{{
+        logData.createTime || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="Message-ID">{{
+        logData.messageId || '-'
+      }}</el-descriptions-item>
+      <el-descriptions-item label="错误码" v-if="logData.errorCode">
+        <el-text type="danger">{{ logData.errorCode }}</el-text>
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="错误信息"
+        :span="2"
+        v-if="logData.errorMessage"
+      >
+        <el-text
+          type="danger"
+          style="white-space: pre-wrap; word-break: break-all"
+        >
+          {{ logData.errorMessage }}
+        </el-text>
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="模板参数"
+        :span="2"
+        v-if="logData.templateParams"
+      >
+        <el-input
+          :model-value="logData.templateParams"
+          type="textarea"
+          :rows="3"
+          readonly
+          style="font-family: monospace"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item label="邮件内容" :span="2">
+        <div
+          v-html="logData.content"
+          style="
+            max-height: 300px;
+            overflow-y: auto;
+            border: 1px solid #dcdfe6;
+            padding: 10px;
+            border-radius: 4px;
+          "
+        ></div>
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-descriptions__label) {
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type { MailLog, MailLogQueryParams } from '../../../../api/mail/types';
+
+import { h, reactive, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Drawer,
+  IconActionGroup,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { ElMessage, ElTag } from 'element-plus';
+
+import { getMailLogList, getMailLog } from '../../../../api/mail';
+import { MainContainer } from '../../../../components/main-container';
+
+import MailLogDetail from './components/mail-log-detail.vue';
+
+// 查询
+const searchParams = ref<MailLogQueryParams>({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'toEmail',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入收件人邮箱',
+  },
+  {
+    prop: 'sendStatus',
+    label: '发送状态',
+    type: 'select',
+    placeholder: '请选择发送状态',
+    options: [
+      { label: '待发送', value: 0 },
+      { label: '发送成功', value: 1 },
+      { label: '发送失败', value: 2 },
+    ],
+  },
+  {
+    prop: 'sendTimeRange',
+    label: '发送时间',
+    type: 'daterange',
+    width: 360,
+    props: {
+      type: 'datetimerange',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
+
+// 列表信息
+const columns = reactive<TableColumn[]>([
+  { prop: 'toEmail', label: '收件人邮箱', minWidth: 180 },
+  { prop: 'subject', label: '邮件主题', minWidth: 200 },
+  { prop: 'accountName', label: '账号名称', minWidth: 120 },
+  { prop: 'templateName', label: '模板名称', minWidth: 120 },
+  {
+    prop: 'sendStatus',
+    label: '发送状态',
+    width: 120,
+    render: ({ row }: { row: MailLog }) => {
+      const statusMap: Record<number, { text: string; type: string }> = {
+        0: { text: '待发送', type: 'info' },
+        1: { text: '发送成功', type: 'success' },
+        2: { text: '发送失败', type: 'danger' },
+      };
+      const status = statusMap[row.sendStatus] || statusMap[0];
+      return h(ElTag as any, { type: status?.type as any }, () => status?.text);
+    },
+  },
+  { prop: 'sendTime', label: '发送时间', width: 160 },
+  { prop: 'errorMessage', label: '错误信息', minWidth: 200 },
+  { prop: 'createTime', label: '创建时间', width: 160 },
+]);
+
+const api = {
+  list: (params: any) => {
+    if (params.model?.sendTimeRange) {
+      const [start, end] = params.model.sendTimeRange;
+      params.model.sendTimeStart = start;
+      params.model.sendTimeEnd = end;
+      delete params.model.sendTimeRange;
+    }
+    return getMailLogList(params);
+  },
+};
+
+// 使用 Hook
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  handleSizeChange,
+  handleCurrentPageChange,
+} = useTable({
+  api,
+});
+
+const drawerVisible = ref(false);
+const detailRow = ref<any>(null);
+const detailLoading = ref(false);
+
+const handleView = async (row: any) => {
+  drawerVisible.value = true;
+  detailLoading.value = true;
+  try {
+    // 通过API获取完整详情，确保包含所有关联信息
+    detailRow.value = await getMailLog(String(row.id));
+  } catch (error: any) {
+    ElMessage.error(error.message || '获取日志详情失败');
+    // 如果API失败，使用列表数据作为降级方案
+    detailRow.value = row;
+  } finally {
+    detailLoading.value = false;
+  }
+};
+
+const handleDrawerClosed = () => {
+  drawerVisible.value = false;
+  detailRow.value = null;
+};
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'detail',
+    label: '查看详情',
+    icon: 'mynaui:eye-solid',
+    onClick: (row: any) => handleView(row),
+  },
+];
+
+const cardOptions = ref({
+  title: 'subject',
+  icon: 'material-symbols:mail-outline-rounded',
+  columns: [
+    { prop: 'toEmail', label: '收件人邮箱', className: 'w-full truncate' },
+    { prop: 'accountName', label: '账号名称', className: 'w-full truncate' },
+    { prop: 'templateName', label: '模板名称', className: 'w-full truncate' },
+    {
+      prop: 'sendStatus',
+      label: '发送状态',
+      className: 'w-full truncate',
+      render: ({ row }: { row: MailLog }) => {
+        const statusMap: Record<number, { text: string; type: string }> = {
+          0: { text: '待发送', type: 'info' },
+          1: { text: '发送成功', type: 'success' },
+          2: { text: '发送失败', type: 'danger' },
+        };
+        const status = statusMap[row.sendStatus] || statusMap[0];
+        return h(
+          ElTag as any,
+          { type: status?.type as any },
+          () => status?.text,
+        );
+      },
+    },
+    { prop: 'sendTime', label: '发送时间', className: 'w-full truncate' },
+  ],
+  showActions: true,
+  onItemClick: (row: any) => handleView(row),
+});
+</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-pagination
+        show-action
+        :show-layout="true"
+        layout-type="table"
+        action-width="70px"
+        @refresh="refresh"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <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="邮件日志详情"
+      type="view"
+      size="900px"
+      cancel-text="关闭"
+      :show-confirm-button="false"
+      :loading="detailLoading"
+      @closed="handleDrawerClosed"
+    >
+      <MailLogDetail v-if="detailRow" :log-data="detailRow" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss"></style>