yg-yygl 0.0.1

package/dist/views/sys/mail/mail-template/components/mail-template-form.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { Dialog, Form, IconButton } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { createMailTemplate, updateMailTemplate } from '../../../../../api/mail';
+import { getMailAccountList, getAllMailList } from '../../../../../api/mail';
+
+import MailTemplateSendTest from './mail-template-send-test.vue';
+
+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 accountOptions = ref<any[]>([]);
+const testSendDialogVisible = ref(false);
+const testSendComponentRef = ref<typeof MailTemplateSendTest>();
+
+// 加载账号列表
+const loadAccountList = async () => {
+  try {
+    const result = await getMailAccountList({
+      current: 1,
+      size: 1000,
+      model: { status: null },
+    });
+    accountOptions.value = result.records.map((item: any) => ({
+      label: item.accountName,
+      value: item.id,
+    }));
+  } catch (error) {
+    console.error('加载账号列表失败:', error);
+  }
+};
+
+// 表单初始数据
+const initialFormData = {
+  templateCode: '',
+  templateName: '',
+  templateType: 1,
+  subject: '',
+  content: '',
+  contentType: 'text/html',
+  params: '',
+  accountId: '',
+  accountCode: '',
+  status: 1,
+  remark: '',
+  recordSort: 1,
+};
+
+// 表单配置
+const formItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'templateCode',
+    label: '模板编码',
+    type: 'input',
+    required: true,
+    placeholder: '请输入模板编码（唯一标识）',
+    rules: [
+      { required: true, message: '请输入模板编码', trigger: ['blur', 'input'] },
+      {
+        max: 100,
+        message: '模板编码长度不能超过100个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'templateName',
+    label: '模板名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入模板名称',
+    rules: [
+      { required: true, message: '请输入模板名称', trigger: ['blur', 'input'] },
+      {
+        max: 100,
+        message: '模板名称长度不能超过100个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'templateType',
+    label: '模板类型',
+    type: 'select',
+    required: true,
+    placeholder: '请选择模板类型',
+    options: [
+      { label: '通知', value: 1 },
+      { label: '验证码', value: 2 },
+      { label: '营销', value: 3 },
+      { label: '系统', value: 4 },
+    ],
+    rules: [{ required: true, message: '请选择模板类型', trigger: ['change'] }],
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'switch',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+      inlinePrompt: true,
+      activeText: '启用',
+      inactiveText: '禁用',
+    },
+  },
+  {
+    prop: 'subject',
+    label: '邮件主题',
+    type: 'input',
+    gridCols: 1,
+    required: true,
+    placeholder: '请输入邮件主题，支持${参数名}占位符',
+    rules: [
+      { required: true, message: '请输入邮件主题', trigger: ['blur', 'input'] },
+      {
+        max: 255,
+        message: '邮件主题长度不能超过255个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'content',
+    label: '邮件内容',
+    type: 'textarea',
+    required: true,
+    placeholder: '请输入邮件内容，支持HTML和${参数名}占位符',
+    gridCols: 1,
+    props: {
+      rows: 10,
+      maxlength: 5000,
+      showWordLimit: true,
+    },
+    rules: [
+      { required: true, message: '请输入邮件内容', trigger: ['blur', 'input'] },
+    ],
+  },
+  {
+    prop: 'contentType',
+    label: '内容类型',
+    type: 'select',
+    placeholder: '请选择内容类型',
+    options: [
+      { label: 'text/html', value: 'text/html' },
+      { label: 'text/plain', value: 'text/plain' },
+    ],
+  },
+  {
+    prop: 'accountId',
+    label: '邮箱渠道',
+    type: 'select',
+    placeholder: '请选择邮箱渠道（为空则使用默认渠道）',
+    options: accountOptions.value,
+  },
+  {
+    prop: 'recordSort',
+    label: '排序',
+    type: 'number',
+    props: {
+      min: 1,
+      max: 999_999,
+    },
+  },
+  {
+    prop: 'remark',
+    label: '备注信息',
+    type: 'textarea',
+    gridCols: 1,
+    props: {
+      rows: 3,
+      maxlength: 500,
+      showWordLimit: true,
+    },
+    rules: [
+      {
+        max: 500,
+        message: '备注长度不能超过500个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+]);
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    if (newData && newData.id) {
+      nextTick(() => {
+        formRef.value?.setValues({
+          ...initialFormData,
+          ...newData,
+        });
+      });
+    } else {
+      nextTick(() => {
+        formRef.value?.setValues(initialFormData);
+      });
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  loadAccountList();
+});
+
+const handleSubmit = async (): Promise<boolean> => {
+  try {
+    const valid = await formRef.value?.validate().catch(() => false);
+    if (!valid) {
+      ElMessage.warning('请检查表单填写是否正确');
+      return false;
+    }
+
+    loading.value = true;
+    const values = formRef.value?.getValues();
+
+    if (isEdit.value) {
+      await updateMailTemplate({
+        ...values,
+        id: props.editData.id,
+      });
+      ElMessage.success('更新成功');
+    } else {
+      await createMailTemplate(values);
+      ElMessage.success('创建成功');
+    }
+
+    return true;
+  } catch (error: any) {
+    console.error('操作失败:', error);
+    ElMessage.error(error.message || '操作失败，请重试');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 打开测试发送对话框
+const handleOpenTestSend = () => {
+  if (!isEdit.value) {
+    ElMessage.warning('请先保存模板后再进行测试发送');
+    return;
+  }
+  testSendDialogVisible.value = true;
+};
+
+// 处理测试发送
+const handleTestSend = async () => {
+  const result = await testSendComponentRef.value?.handleSend();
+  if (result) {
+    testSendDialogVisible.value = false;
+  }
+};
+
+defineExpose({
+  handleSubmit,
+});
+</script>
+
+<template>
+  <div class="mail-template-form">
+    <Form
+      ref="formRef"
+      :items="formItems"
+      :disabled="isView"
+      :loading="loading"
+      :show-actions="false"
+      label-width="auto"
+      :use-grid="true"
+      :grid-cols="2"
+      :grid-gutter="20"
+    />
+    <!-- 测试发送按钮 -->
+    <div v-if="isEdit && !isView" class="mt-4 flex justify-end">
+      <IconButton type="primary" icon="hx-line-built-in:send-plane-line" @click="handleOpenTestSend">
+        测试发送
+      </IconButton>
+    </div>
+    <!-- 测试发送对话框 -->
+    <Dialog
+      v-model="testSendDialogVisible"
+      title="测试发送邮件"
+      width="800px"
+      :close-on-click-modal="false"
+      confirm-text="发送"
+      @close="testSendDialogVisible = false"
+      @confirm="handleTestSend"
+    >
+      <MailTemplateSendTest
+        v-if="testSendDialogVisible && props.editData?.id"
+        ref="testSendComponentRef"
+        :template-id="props.editData.id"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/views/sys/mail/mail-template/components/mail-template-form.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    editData?: any;
+    type?: 'add' | 'edit' | 'view';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "add" | "edit" | "view";
+    editData: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/mail/mail-template/components/mail-template-send-test.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    templateId: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSend: () => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/mail/mail-template/components/mail-template-send-test.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import type { MailTemplate } from '../../../../../api/mail/types';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { Icon } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { getMailTemplate, sendMailByTemplate } from '../../../../../api/mail';
+
+const props = defineProps<{
+  templateId: string;
+}>();
+
+const loading = ref(false);
+const formRef = ref();
+const template = ref<MailTemplate | null>(null);
+const templateParams = ref<string[]>([]);
+
+// 表单数据
+const formData = ref({
+  toEmail: '',
+  templateParams: {} as Record<string, string>,
+});
+
+// 提取模板参数（从 subject 和 content 中提取 ${paramName} 格式的参数）
+const extractParams = (text: string): string[] => {
+  if (!text) return [];
+  const params = new Set<string>();
+  const regex = /\$\{(\w+)\}/g;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    params.add(match[1]);
+  }
+  return [...params];
+};
+
+// 加载模板信息
+const loadTemplate = async () => {
+  if (!props.templateId) return;
+
+  try {
+    template.value = await getMailTemplate(props.templateId);
+
+    // 从 subject 和 content 中提取参数
+    const subjectParams = extractParams(template.value.subject || '');
+    const contentParams = extractParams(template.value.content || '');
+    const allParams = new Set([...contentParams, ...subjectParams]);
+    templateParams.value = [...allParams];
+
+    // 初始化参数值
+    const params: Record<string, string> = {};
+    templateParams.value.forEach((param) => {
+      params[param] = '';
+    });
+    formData.value.templateParams = params;
+  } catch (error) {
+    console.error('加载模板信息失败:', error);
+    ElMessage.error('加载模板信息失败');
+  }
+};
+
+// 获取预览内容
+const getPreviewSubject = () => {
+  if (!template.value) return '';
+  let subject = template.value.subject || '';
+  Object.entries(formData.value.templateParams).forEach(([key, value]) => {
+    subject = subject.replaceAll(
+      new RegExp(`\\$\\{${key}\\}`, 'g'),
+      value || `\${${key}}`,
+    );
+  });
+  return subject;
+};
+
+const getPreviewContent = () => {
+  if (!template.value) return '';
+  let content = template.value.content || '';
+  Object.entries(formData.value.templateParams).forEach(([key, value]) => {
+    content = content.replaceAll(
+      new RegExp(`\\$\\{${key}\\}`, 'g'),
+      value || `\${${key}}`,
+    );
+  });
+  return content;
+};
+
+// 发送测试邮件
+const handleSend = async () => {
+  try {
+    // 验证表单
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    // 验证邮箱
+    const emailPattern = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/;
+    if (!emailPattern.test(formData.value.toEmail)) {
+      ElMessage.error('请输入正确的邮箱地址');
+      return false;
+    }
+
+    // 验证参数
+    for (const param of templateParams.value) {
+      if (!formData.value.templateParams[param]) {
+        ElMessage.error(`请输入参数: ${param}`);
+        return false;
+      }
+    }
+
+    loading.value = true;
+
+    await sendMailByTemplate(
+      template.value!.templateCode,
+      formData.value.toEmail,
+      formData.value.templateParams,
+    );
+
+    ElMessage.success('发送成功！');
+    return true;
+  } catch (error: any) {
+    console.error('发送失败:', error);
+    ElMessage.error(error.message || '发送失败');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 监听模板ID变化
+watch(
+  () => props.templateId,
+  () => {
+    loadTemplate();
+  },
+);
+
+onMounted(() => {
+  loadTemplate();
+});
+
+defineExpose({
+  handleSend,
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <!-- 模板信息卡片 -->
+    <div v-if="template" class="rounded-lg border border-gray-200 bg-white">
+      <div
+        class="flex items-center gap-2 border-b border-gray-200 bg-gray-50 px-4 py-3"
+      >
+        <Icon name="mdi:card-text-outline" class="text-lg text-blue-500" />
+        <span class="text-sm font-semibold text-gray-700">模板信息</span>
+      </div>
+      <div class="space-y-4 p-4">
+        <div class="flex items-center gap-4 text-sm">
+          <span class="w-20 flex-shrink-0 text-gray-500">模板名称:</span>
+          <span class="font-medium text-gray-700">{{
+            template.templateName
+          }}</span>
+        </div>
+        <div class="flex items-center gap-4 text-sm">
+          <span class="w-20 flex-shrink-0 text-gray-500">模板编码:</span>
+          <div class="flex-1 break-all font-mono text-gray-700">
+            {{ template.templateCode }}
+          </div>
+        </div>
+        <div class="flex gap-4 text-sm">
+          <span class="w-20 flex-shrink-0 text-gray-500">邮件主题:</span>
+          <div class="flex-1 rounded-md bg-gray-50 p-3">
+            <p class="text-gray-700">{{ template.subject }}</p>
+          </div>
+        </div>
+        <div class="flex gap-4 text-sm">
+          <span class="w-20 flex-shrink-0 text-gray-500">邮件内容:</span>
+          <div class="flex-1 rounded-md bg-gray-50 p-3">
+            <div class="text-gray-700" v-html="template.content"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 发送表单 -->
+    <div class="rounded-lg border border-gray-200 bg-white">
+      <div
+        class="flex items-center gap-2 border-b border-gray-200 bg-gray-50 px-4 py-3"
+      >
+        <Icon name="mdi:form-textbox" class="text-lg text-green-500" />
+        <span class="text-sm font-semibold text-gray-700">发送参数</span>
+      </div>
+
+      <div class="p-4">
+        <el-form
+          ref="formRef"
+          :model="formData"
+          label-width="100px"
+          label-position="left"
+        >
+          <!-- 收件人邮箱 -->
+          <el-form-item
+            label="收件人邮箱"
+            prop="toEmail"
+            :rules="[
+              { required: true, message: '请输入收件人邮箱', trigger: 'blur' },
+              {
+                type: 'email',
+                message: '邮箱格式不正确',
+                trigger: 'blur',
+              },
+            ]"
+          >
+            <el-input
+              v-model="formData.toEmail"
+              placeholder="请输入接收邮件的邮箱地址"
+              clearable
+            >
+              <template #prefix>
+                <Icon name="mdi:email" class="text-gray-400" />
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <!-- 模板参数 -->
+          <div v-if="templateParams.length > 0">
+            <el-form-item
+              v-for="param in templateParams"
+              :key="param"
+              :label="param"
+              :prop="`templateParams.${param}`"
+              :rules="[
+                { required: true, message: `请输入${param}`, trigger: 'blur' },
+              ]"
+            >
+              <el-input
+                v-model="formData.templateParams[param]"
+                :placeholder="`请输入${param}的值`"
+                clearable
+              >
+                <template #prefix>
+                  <Icon name="mdi:code-braces" class="text-gray-400" />
+                </template>
+              </el-input>
+            </el-form-item>
+          </div>
+
+          <div
+            v-else
+            class="mb-4 flex items-center gap-2 rounded-md bg-blue-50 p-3 text-sm text-blue-600"
+          >
+            <Icon name="mdi:information-outline" />
+            该模板无需参数，可直接发送
+          </div>
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 预览区域 -->
+    <div class="rounded-lg border border-blue-200 bg-blue-50">
+      <div
+        class="flex items-center gap-2 border-b border-blue-200 bg-blue-100 px-4 py-3"
+      >
+        <Icon name="mdi:eye-outline" class="text-lg text-blue-600" />
+        <span class="text-sm font-semibold text-blue-700">邮件预览</span>
+      </div>
+      <div class="p-4">
+        <div class="space-y-4">
+          <div class="rounded-md bg-white p-4 shadow-sm">
+            <div class="mb-2 text-xs font-semibold text-gray-500">主题:</div>
+            <div class="text-gray-700">{{ getPreviewSubject() }}</div>
+          </div>
+          <div class="rounded-md bg-white p-4 shadow-sm">
+            <div class="mb-2 text-xs font-semibold text-gray-500">内容:</div>
+            <div class="text-gray-700" v-html="getPreviewContent()"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 提示信息 -->
+    <div class="rounded-lg border border-yellow-200 bg-yellow-50">
+      <div class="p-4">
+        <div class="flex items-start gap-3">
+          <Icon
+            name="mdi:lightbulb-outline"
+            class="flex-shrink-0 text-lg text-yellow-600"
+          />
+          <div class="flex-1 space-y-1 text-sm text-yellow-800">
+            <p class="font-semibold">温馨提示：</p>
+            <ul class="ml-4 list-disc space-y-1 text-xs">
+              <li>测试发送仅用于验证模板内容，实际发送效果以邮件服务器为准</li>
+              <li>请确保邮箱地址正确，避免发送到错误的邮箱</li>
+              <li>部分邮件服务器可能对测试发送有频率限制</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/views/sys/mail/mail-template/components/mail-template-send-test.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    templateId: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSend: () => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/mail/mail-template/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;