feat：【system】邮箱管理的开发：50% 初始化

src/api/system/mail/account/index.ts

@@ -0,0 +1,39 @@
+import type { PageParam, PageResult } from '@/http/types'
+import { http } from '@/http/http'
+
+export interface MailAccount {
+  id?: number
+  mail: string
+  username: string
+  password?: string
+  host: string
+  port: number
+  sslEnable: boolean
+  starttlsEnable: boolean
+  remark?: string
+  createTime?: string
+}
+
+export function getMailAccountPage(params: PageParam) {
+  return http.get<PageResult<MailAccount>>('/system/mail-account/page', params)
+}
+
+export function getSimpleMailAccountList() {
+  return http.get<MailAccount[]>('/system/mail-account/simple-list')
+}
+
+export function getMailAccount(id: number) {
+  return http.get<MailAccount>(`/system/mail-account/get?id=${id}`)
+}
+
+export function createMailAccount(data: MailAccount) {
+  return http.post<number>('/system/mail-account/create', data)
+}
+
+export function updateMailAccount(data: MailAccount) {
+  return http.put<boolean>('/system/mail-account/update', data)
+}
+
+export function deleteMailAccount(id: number) {
+  return http.delete<boolean>(`/system/mail-account/delete?id=${id}`)
+}

src/api/system/mail/log/index.ts

@@ -0,0 +1,27 @@
+import type { PageParam, PageResult } from '@/http/types'
+import { http } from '@/http/http'
+
+export interface MailLog {
+  id?: number
+  userId?: number
+  userType?: number
+  templateId?: number
+  templateCode?: string
+  templateTitle?: string
+  templateContent?: string
+  templateParams?: Record<string, any>
+  accountId?: number
+  fromMail?: string
+  toMails?: string[]
+  ccMails?: string[]
+  bccMails?: string[]
+  sendStatus?: number
+  sendTime?: string
+  sendMessageId?: string
+  sendException?: string
+  createTime?: string
+}
+
+export function getMailLogPage(params: PageParam) {
+  return http.get<PageResult<MailLog>>('/system/mail-log/page', params)
+}

src/api/system/mail/template/index.ts

@@ -0,0 +1,48 @@
+import type { PageParam, PageResult } from '@/http/types'
+import { http } from '@/http/http'
+
+export interface MailTemplate {
+  id?: number
+  name: string
+  code: string
+  accountId?: number
+  nickname?: string
+  title: string
+  content: string
+  status: number
+  remark?: string
+  params?: string[]
+  createTime?: string
+}
+
+export interface MailSendReqVO {
+  templateCode: string
+  templateParams: Record<string, any>
+  toMails: string[]
+  ccMails?: string[]
+  bccMails?: string[]
+}
+
+export function getMailTemplatePage(params: PageParam) {
+  return http.get<PageResult<MailTemplate>>('/system/mail-template/page', params)
+}
+
+export function getMailTemplate(id: number) {
+  return http.get<MailTemplate>(`/system/mail-template/get?id=${id}`)
+}
+
+export function createMailTemplate(data: MailTemplate) {
+  return http.post<number>('/system/mail-template/create', data)
+}
+
+export function updateMailTemplate(data: MailTemplate) {
+  return http.put<boolean>('/system/mail-template/update', data)
+}
+
+export function deleteMailTemplate(id: number) {
+  return http.delete<boolean>(`/system/mail-template/delete?id=${id}`)
+}
+
+export function sendMail(data: MailSendReqVO) {
+  return http.post<number>('/system/mail-template/send-mail', data)
+}

src/pages-system/mail/account/detail/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <view class="yd-page-container">
+    <wd-navbar
+      title="邮箱账号详情"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view>
+      <wd-cell-group border>
+        <wd-cell title="编号" :value="String(formData?.id ?? '-')" />
+        <wd-cell title="邮箱" :value="String(formData?.mail ?? '-')" />
+        <wd-cell title="用户名" :value="String(formData?.username ?? '-')" />
+        <wd-cell title="SMTP 服务器域名" :value="String(formData?.host ?? '-')" />
+        <wd-cell title="SMTP 服务器端口" :value="String(formData?.port ?? '-')" />
+        <wd-cell title="是否开启 SSL">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.sslEnable" />
+        </wd-cell>
+        <wd-cell title="是否开启 STARTTLS">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.starttlsEnable" />
+        </wd-cell>
+        <wd-cell title="备注" :value="String(formData?.remark ?? '-')" />
+        <wd-cell title="创建时间" :value="formatDateTime(formData?.createTime) || '-'" />
+      </wd-cell-group>
+    </view>
+
+    <view class="safe-area-inset-bottom fixed bottom-0 left-0 right-0 bg-white p-24rpx">
+      <view class="w-full flex gap-24rpx">
+        <wd-button
+          v-if="hasAccessByCodes(['system:mail-account:update'])"
+          class="flex-1" type="warning" @click="handleEdit"
+        >
+          编辑
+        </wd-button>
+        <wd-button
+          v-if="hasAccessByCodes(['system:mail-account:delete'])"
+          class="flex-1" type="error" :loading="deleting" @click="handleDelete"
+        >
+          删除
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailAccount } from '@/api/system/mail/account/index'
+import { onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { deleteMailAccount, getMailAccount } from '@/api/system/mail/account/index'
+import { useAccess } from '@/hooks/useAccess'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+
+const props = defineProps<{
+  id?: number | any
+}>()
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const { hasAccessByCodes } = useAccess()
+const toast = useToast()
+const formData = ref<MailAccount>()
+const deleting = ref(false)
+
+function handleBack() {
+  navigateBackPlus('/pages-system/mail/index')
+}
+
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  try {
+    toast.loading('加载中...')
+    formData.value = await getMailAccount(props.id)
+  } finally {
+    toast.close()
+  }
+}
+
+function handleEdit() {
+  uni.navigateTo({
+    url: `/pages-system/mail/account/form/index?id=${props.id}`,
+  })
+}
+
+function handleDelete() {
+  if (!props.id) {
+    return
+  }
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除该邮箱账号吗？',
+    success: async (res) => {
+      if (!res.confirm) {
+        return
+      }
+      deleting.value = true
+      try {
+        await deleteMailAccount(props.id)
+        toast.success('删除成功')
+        setTimeout(() => {
+          handleBack()
+        }, 500)
+      } finally {
+        deleting.value = false
+      }
+    },
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages-system/mail/account/form/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <view class="yd-page-container">
+    <wd-navbar
+      :title="getTitle"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view>
+      <wd-form ref="formRef" :model="formData" :rules="formRules">
+        <wd-cell-group border>
+          <wd-input
+            v-model="formData.mail"
+            label="邮箱"
+            label-width="220rpx"
+            prop="mail"
+            clearable
+            placeholder="请输入邮箱"
+          />
+          <wd-input
+            v-model="formData.username"
+            label="用户名"
+            label-width="220rpx"
+            prop="username"
+            clearable
+            placeholder="请输入用户名"
+          />
+          <wd-input
+            v-model="formData.password"
+            label="密码"
+            label-width="220rpx"
+            prop="password"
+            clearable
+            placeholder="请输入密码"
+            show-password
+          />
+          <wd-input
+            v-model="formData.host"
+            label="SMTP 服务器域名"
+            label-width="220rpx"
+            prop="host"
+            clearable
+            placeholder="请输入 SMTP 服务器域名"
+          />
+          <wd-cell title="SMTP 服务器端口" title-width="220rpx" prop="port" center>
+            <wd-input-number v-model="formData.port" :min="0" :max="65535" />
+          </wd-cell>
+          <wd-cell title="是否开启 SSL" title-width="220rpx" prop="sslEnable" center>
+            <wd-radio-group v-model="formData.sslEnable" shape="button">
+              <wd-radio
+                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                :key="String(dict.value)"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </wd-cell>
+          <wd-cell title="是否开启 STARTTLS" title-width="220rpx" prop="starttlsEnable" center>
+            <wd-radio-group v-model="formData.starttlsEnable" shape="button">
+              <wd-radio
+                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                :key="String(dict.value)"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </wd-cell>
+          <wd-textarea
+            v-model="formData.remark"
+            label="备注"
+            label-width="220rpx"
+            clearable
+            placeholder="请输入备注"
+          />
+        </wd-cell-group>
+      </wd-form>
+    </view>
+
+    <view class="safe-area-inset-bottom fixed bottom-0 left-0 right-0 bg-white p-24rpx">
+      <wd-button type="primary" block :loading="formLoading" @click="handleSubmit">
+        保存
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailAccount } from '@/api/system/mail/account/index'
+import { computed, onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { createMailAccount, getMailAccount, updateMailAccount } from '@/api/system/mail/account/index'
+import { getBoolDictOptions } from '@/hooks/useDict'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+
+const props = defineProps<{
+  id?: number | any
+}>()
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const toast = useToast()
+const getTitle = computed(() => (props.id ? '编辑邮箱账号' : '新增邮箱账号'))
+const formLoading = ref(false)
+const formData = ref<MailAccount>({
+  id: undefined,
+  mail: '',
+  username: '',
+  password: '',
+  host: '',
+  port: 25,
+  sslEnable: true,
+  starttlsEnable: false,
+  remark: '',
+})
+
+const formRules = {
+  mail: [{ required: true, message: '邮箱不能为空' }],
+  username: [{ required: true, message: '用户名不能为空' }],
+  password: [{ required: true, message: '密码不能为空' }],
+  host: [{ required: true, message: 'SMTP 服务器域名不能为空' }],
+  port: [{ required: true, message: 'SMTP 服务器端口不能为空' }],
+  sslEnable: [{ required: true, message: '是否开启 SSL 不能为空' }],
+  starttlsEnable: [{ required: true, message: '是否开启 STARTTLS 不能为空' }],
+}
+
+const formRef = ref<any>()
+
+function handleBack() {
+  navigateBackPlus('/pages-system/mail/index')
+}
+
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  formData.value = await getMailAccount(props.id)
+  if (formData.value.password === undefined) {
+    formData.value.password = ''
+  }
+}
+
+async function handleSubmit() {
+  const { valid } = await formRef.value.validate()
+  if (!valid) {
+    return
+  }
+
+  formLoading.value = true
+  try {
+    if (props.id) {
+      await updateMailAccount(formData.value)
+      toast.success('修改成功')
+    } else {
+      await createMailAccount(formData.value)
+      toast.success('新增成功')
+    }
+    setTimeout(() => {
+      handleBack()
+    }, 500)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages-system/mail/components/account-list.vue

@@ -0,0 +1,125 @@
+<template>
+  <view>
+    <AccountSearchForm @search="handleQuery" @reset="handleReset" />
+
+    <view class="p-24rpx">
+      <view
+        v-for="item in list"
+        :key="item.id"
+        class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
+        @click="handleDetail(item)"
+      >
+        <view class="p-24rpx">
+          <view class="mb-16rpx flex items-center justify-between">
+            <view class="text-32rpx text-[#333] font-semibold">
+              {{ item.mail }}
+            </view>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">用户名：</text>
+            <text class="min-w-0 flex-1 truncate">{{ item.username || '-' }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">SMTP：</text>
+            <text class="min-w-0 flex-1 truncate">{{ item.host }}:{{ item.port }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx text-[#999]">创建时间：</text>
+            <text>{{ formatDateTime(item.createTime) || '-' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
+        <wd-status-tip image="content" tip="暂无邮箱账号数据" />
+      </view>
+      <wd-loadmore
+        v-if="list.length > 0"
+        :state="loadMoreState"
+        @reload="loadMore"
+      />
+    </view>
+
+    <wd-fab
+      v-if="hasAccessByCodes(['system:mail-account:create'])"
+      position="right-bottom"
+      type="primary"
+      :expandable="false"
+      @click="handleAdd"
+    />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailAccount } from '@/api/system/mail/account/index'
+import type { LoadMoreState } from '@/http/types'
+import { onMounted, ref } from 'vue'
+import { getMailAccountPage } from '@/api/system/mail/account/index'
+import { useAccess } from '@/hooks/useAccess'
+import { formatDateTime } from '@/utils/date'
+import AccountSearchForm from './account-search-form.vue'
+
+const { hasAccessByCodes } = useAccess()
+const total = ref(0)
+const list = ref<MailAccount[]>([])
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+async function getList() {
+  loadMoreState.value = 'loading'
+  try {
+    const data = await getMailAccountPage(queryParams.value)
+    list.value = [...list.value, ...data.list]
+    total.value = data.total
+    loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
+  } catch {
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
+    loadMoreState.value = 'error'
+  }
+}
+
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
+  getList()
+}
+
+function handleReset() {
+  handleQuery()
+}
+
+function loadMore() {
+  if (loadMoreState.value === 'finished') {
+    return
+  }
+  queryParams.value.pageNo++
+  getList()
+}
+
+function handleAdd() {
+  uni.navigateTo({
+    url: '/pages-system/mail/account/form/index',
+  })
+}
+
+function handleDetail(item: MailAccount) {
+  uni.navigateTo({
+    url: `/pages-system/mail/account/detail/index?id=${item.id}`,
+  })
+}
+
+onReachBottom(() => {
+  loadMore()
+})
+
+onMounted(() => {
+  getList()
+})
+</script>

src/pages-system/mail/components/account-search-form.vue

@@ -0,0 +1,64 @@
+<template>
+  <view @click="visible = true">
+    <wd-search :placeholder="placeholder" hide-cancel disabled />
+  </view>
+
+  <wd-popup v-model="visible" position="top" @close="visible = false">
+    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">邮箱</view>
+        <wd-input v-model="formData.mail" placeholder="请输入邮箱" clearable />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">用户名</view>
+        <wd-input v-model="formData.username" placeholder="请输入用户名" clearable />
+      </view>
+      <view class="yd-search-form-actions">
+        <wd-button class="flex-1" plain @click="handleReset">重置</wd-button>
+        <wd-button class="flex-1" type="primary" @click="handleSearch">搜索</wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue'
+import { getNavbarHeight } from '@/utils'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  mail: undefined as string | undefined,
+  username: undefined as string | undefined,
+})
+
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.mail) {
+    conditions.push(`邮箱:${formData.mail}`)
+  }
+  if (formData.username) {
+    conditions.push(`用户名:${formData.username}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索邮箱账号'
+})
+
+function handleSearch() {
+  visible.value = false
+  emit('search', {
+    mail: formData.mail || undefined,
+    username: formData.username || undefined,
+  })
+}
+
+function handleReset() {
+  formData.mail = undefined
+  formData.username = undefined
+  visible.value = false
+  emit('reset')
+}
+</script>

src/pages-system/mail/components/log-list.vue

@@ -0,0 +1,118 @@
+<template>
+  <view>
+    <LogSearchForm @search="handleQuery" @reset="handleReset" />
+
+    <view class="p-24rpx">
+      <view
+        v-for="item in list"
+        :key="item.id"
+        class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
+        @click="handleDetail(item)"
+      >
+        <view class="p-24rpx">
+          <view class="mb-16rpx flex items-center justify-between">
+            <view class="text-32rpx text-[#333] font-semibold">
+              {{ item.templateTitle || '-' }}
+            </view>
+            <dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="item.sendStatus" />
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">发送邮箱：</text>
+            <text class="min-w-0 flex-1 truncate">{{ item.fromMail || '-' }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">收件人：</text>
+            <text class="min-w-0 flex-1 truncate">{{ formatMails(item.toMails) }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx text-[#999]">发送时间：</text>
+            <text>{{ formatDateTime(item.sendTime) || '-' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
+        <wd-status-tip image="content" tip="暂无邮件日志数据" />
+      </view>
+      <wd-loadmore
+        v-if="list.length > 0"
+        :state="loadMoreState"
+        @reload="loadMore"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailLog } from '@/api/system/mail/log/index'
+import type { LoadMoreState } from '@/http/types'
+import { onMounted, ref } from 'vue'
+import { getMailLogPage } from '@/api/system/mail/log/index'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+import LogSearchForm from './log-search-form.vue'
+
+const total = ref(0)
+const list = ref<MailLog[]>([])
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+function formatMails(mails?: string[]) {
+  if (!mails || mails.length === 0) {
+    return '-'
+  }
+  return mails.join('、')
+}
+
+async function getList() {
+  loadMoreState.value = 'loading'
+  try {
+    const data = await getMailLogPage(queryParams.value)
+    list.value = [...list.value, ...data.list]
+    total.value = data.total
+    loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
+  } catch {
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
+    loadMoreState.value = 'error'
+  }
+}
+
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
+  getList()
+}
+
+function handleReset() {
+  handleQuery()
+}
+
+function loadMore() {
+  if (loadMoreState.value === 'finished') {
+    return
+  }
+  queryParams.value.pageNo++
+  getList()
+}
+
+function handleDetail(item: MailLog) {
+  uni.navigateTo({
+    url: `/pages-system/mail/log/detail/index?id=${item.id}`,
+  })
+}
+
+onReachBottom(() => {
+  loadMore()
+})
+
+onMounted(() => {
+  getList()
+})
+</script>

src/pages-system/mail/components/log-search-form.vue

@@ -0,0 +1,214 @@
+<template>
+  <view @click="visible = true">
+    <wd-search :placeholder="placeholder" hide-cancel disabled />
+  </view>
+
+  <wd-popup v-model="visible" position="top" @close="visible = false">
+    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          用户编号
+        </view>
+        <wd-input v-model="formData.userId" placeholder="请输入用户编号" clearable />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          用户类型
+        </view>
+        <wd-radio-group v-model="formData.userType" shape="button">
+          <wd-radio :value="-1">
+            全部
+          </wd-radio>
+          <wd-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </wd-radio>
+        </wd-radio-group>
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          发送状态
+        </view>
+        <wd-radio-group v-model="formData.sendStatus" shape="button">
+          <wd-radio :value="-1">
+            全部
+          </wd-radio>
+          <wd-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </wd-radio>
+        </wd-radio-group>
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          邮箱账号
+        </view>
+        <wd-picker
+          v-model="formData.accountId"
+          :columns="accountOptions"
+          placeholder="请选择邮箱账号"
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          模板编号
+        </view>
+        <wd-input v-model="formData.templateId" placeholder="请输入模板编号" clearable />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          发送时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleSendTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.sendTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleSendTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.sendTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleSendTime[0]" v-model="tempSendTime[0]" type="date" />
+        <view v-if="visibleSendTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleSendTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleSendTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleSendTime[1]" v-model="tempSendTime[1]" type="date" />
+        <view v-if="visibleSendTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleSendTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleSendTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
+      <view class="yd-search-form-actions">
+        <wd-button class="flex-1" plain @click="handleReset">
+          重置
+        </wd-button>
+        <wd-button class="flex-1" type="primary" @click="handleSearch">
+          搜索
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { getSimpleMailAccountList } from '@/api/system/mail/account/index'
+import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
+import { getNavbarHeight } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDate, formatDateRange } from '@/utils/date'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  sendTime: [undefined, undefined] as [number | undefined, number | undefined],
+  userId: undefined as number | undefined,
+  userType: -1,
+  sendStatus: -1,
+  accountId: undefined as number | undefined,
+  templateId: undefined as number | undefined,
+})
+
+const accountList = ref<{ id?: number, mail: string }[]>([])
+const accountOptions = computed(() => {
+  return accountList.value.map(item => ({
+    value: item.id,
+    label: item.mail,
+  }))
+})
+function getAccountMail(accountId?: number) {
+  return accountList.value.find(item => item.id === accountId)?.mail
+}
+
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.sendTime?.[0] && formData.sendTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.sendTime[0])}~${formatDate(formData.sendTime[1])}`)
+  }
+  if (formData.userId) {
+    conditions.push(`用户:${formData.userId}`)
+  }
+  if (formData.userType !== -1) {
+    conditions.push(`类型:${getDictLabel(DICT_TYPE.USER_TYPE, formData.userType)}`)
+  }
+  if (formData.sendStatus !== -1) {
+    conditions.push(`发送:${getDictLabel(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, formData.sendStatus)}`)
+  }
+  if (formData.accountId) {
+    conditions.push(`账号:${getAccountMail(formData.accountId) || formData.accountId}`)
+  }
+  if (formData.templateId) {
+    conditions.push(`模板:${formData.templateId}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索邮件日志'
+})
+
+const visibleSendTime = ref<[boolean, boolean]>([false, false])
+const tempSendTime = ref<[number, number]>([Date.now(), Date.now()])
+
+function handleSendTime0Confirm() {
+  formData.sendTime = [tempSendTime.value[0], formData.sendTime?.[1]]
+  visibleSendTime.value[0] = false
+}
+
+function handleSendTime1Confirm() {
+  formData.sendTime = [formData.sendTime?.[0], tempSendTime.value[1]]
+  visibleSendTime.value[1] = false
+}
+
+function handleSearch() {
+  visible.value = false
+  const dateRange = formatDateRange(formData.sendTime)
+  emit('search', {
+    beginTime: dateRange?.[0],
+    endTime: dateRange?.[1],
+    userId: formData.userId,
+    userType: formData.userType === -1 ? undefined : formData.userType,
+    sendStatus: formData.sendStatus === -1 ? undefined : formData.sendStatus,
+    accountId: formData.accountId || undefined,
+    templateId: formData.templateId || undefined,
+  })
+}
+
+function handleReset() {
+  formData.sendTime = [undefined, undefined]
+  formData.userId = undefined
+  formData.userType = -1
+  formData.sendStatus = -1
+  formData.accountId = undefined
+  formData.templateId = undefined
+  visible.value = false
+  emit('reset')
+}
+
+onMounted(async () => {
+  try {
+    accountList.value = await getSimpleMailAccountList()
+  } catch {
+    accountList.value = []
+  }
+})
+</script>

src/pages-system/mail/components/template-list.vue

@@ -0,0 +1,127 @@
+<template>
+  <view>
+    <TemplateSearchForm @search="handleQuery" @reset="handleReset" />
+
+    <view class="p-24rpx">
+      <view
+        v-for="item in list"
+        :key="item.id"
+        class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
+        @click="handleDetail(item)"
+      >
+        <view class="p-24rpx">
+          <view class="mb-16rpx flex items-center justify-between">
+            <view class="text-32rpx text-[#333] font-semibold">
+              {{ item.name }}
+            </view>
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.status" />
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">模板编码：</text>
+            <text class="min-w-0 flex-1 truncate">{{ item.code }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">标题：</text>
+            <text class="min-w-0 flex-1 truncate">{{ item.title }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx text-[#999]">创建时间：</text>
+            <text>{{ formatDateTime(item.createTime) || '-' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
+        <wd-status-tip image="content" tip="暂无邮件模板数据" />
+      </view>
+      <wd-loadmore
+        v-if="list.length > 0"
+        :state="loadMoreState"
+        @reload="loadMore"
+      />
+    </view>
+
+    <wd-fab
+      v-if="hasAccessByCodes(['system:mail-template:create'])"
+      position="right-bottom"
+      type="primary"
+      :expandable="false"
+      @click="handleAdd"
+    />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailTemplate } from '@/api/system/mail/template/index'
+import type { LoadMoreState } from '@/http/types'
+import { onMounted, ref } from 'vue'
+import { getMailTemplatePage } from '@/api/system/mail/template/index'
+import { useAccess } from '@/hooks/useAccess'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+import TemplateSearchForm from './template-search-form.vue'
+
+const { hasAccessByCodes } = useAccess()
+const total = ref(0)
+const list = ref<MailTemplate[]>([])
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+async function getList() {
+  loadMoreState.value = 'loading'
+  try {
+    const data = await getMailTemplatePage(queryParams.value)
+    list.value = [...list.value, ...data.list]
+    total.value = data.total
+    loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
+  } catch {
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
+    loadMoreState.value = 'error'
+  }
+}
+
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
+  getList()
+}
+
+function handleReset() {
+  handleQuery()
+}
+
+function loadMore() {
+  if (loadMoreState.value === 'finished') {
+    return
+  }
+  queryParams.value.pageNo++
+  getList()
+}
+
+function handleAdd() {
+  uni.navigateTo({
+    url: '/pages-system/mail/template/form/index',
+  })
+}
+
+function handleDetail(item: MailTemplate) {
+  uni.navigateTo({
+    url: `/pages-system/mail/template/detail/index?id=${item.id}`,
+  })
+}
+
+onReachBottom(() => {
+  loadMore()
+})
+
+onMounted(() => {
+  getList()
+})
+</script>

src/pages-system/mail/components/template-search-form.vue

@@ -0,0 +1,191 @@
+<template>
+  <view @click="visible = true">
+    <wd-search :placeholder="placeholder" hide-cancel disabled />
+  </view>
+
+  <wd-popup v-model="visible" position="top" @close="visible = false">
+    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          模板编码
+        </view>
+        <wd-input v-model="formData.code" placeholder="请输入模板编码" clearable />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          模板名称
+        </view>
+        <wd-input v-model="formData.name" placeholder="请输入模板名称" clearable />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          开启状态
+        </view>
+        <wd-radio-group v-model="formData.status" shape="button">
+          <wd-radio :value="-1">
+            全部
+          </wd-radio>
+          <wd-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </wd-radio>
+        </wd-radio-group>
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          邮箱账号
+        </view>
+        <wd-picker
+          v-model="formData.accountId"
+          :columns="accountOptions"
+          placeholder="请选择邮箱账号"
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          创建时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleCreateTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleCreateTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
+        <view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
+        <view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
+      <view class="yd-search-form-actions">
+        <wd-button class="flex-1" plain @click="handleReset">
+          重置
+        </wd-button>
+        <wd-button class="flex-1" type="primary" @click="handleSearch">
+          搜索
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { getSimpleMailAccountList } from '@/api/system/mail/account/index'
+import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
+import { getNavbarHeight } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDate, formatDateRange } from '@/utils/date'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  status: -1,
+  code: undefined as string | undefined,
+  name: undefined as string | undefined,
+  accountId: undefined as number | undefined,
+  createTime: [undefined, undefined] as [number | undefined, number | undefined],
+})
+
+const accountList = ref<{ id?: number, mail: string }[]>([])
+const accountOptions = computed(() => {
+  return accountList.value.map(item => ({
+    value: item.id,
+    label: item.mail,
+  }))
+})
+function getAccountMail(accountId?: number) {
+  return accountList.value.find(item => item.id === accountId)?.mail
+}
+
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
+  }
+  if (formData.code) {
+    conditions.push(`编码:${formData.code}`)
+  }
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
+  }
+  if (formData.accountId) {
+    conditions.push(`账号:${getAccountMail(formData.accountId) || formData.accountId}`)
+  }
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索邮件模板'
+})
+
+const visibleCreateTime = ref<[boolean, boolean]>([false, false])
+const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
+
+function handleCreateTime0Confirm() {
+  formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
+  visibleCreateTime.value[0] = false
+}
+
+function handleCreateTime1Confirm() {
+  formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
+  visibleCreateTime.value[1] = false
+}
+
+function handleSearch() {
+  visible.value = false
+  const dateRange = formatDateRange(formData.createTime)
+  emit('search', {
+    status: formData.status === -1 ? undefined : formData.status,
+    code: formData.code || undefined,
+    name: formData.name || undefined,
+    accountId: formData.accountId || undefined,
+    beginTime: dateRange?.[0],
+    endTime: dateRange?.[1],
+  })
+}
+
+function handleReset() {
+  formData.status = -1
+  formData.code = undefined
+  formData.name = undefined
+  formData.accountId = undefined
+  formData.createTime = [undefined, undefined]
+  visible.value = false
+  emit('reset')
+}
+
+onMounted(async () => {
+  try {
+    accountList.value = await getSimpleMailAccountList()
+  } catch {
+    accountList.value = []
+  }
+})
+</script>

src/pages-system/mail/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <view class="yd-page-container">
+    <wd-navbar
+      title="邮件管理"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view class="bg-white">
+      <wd-tabs v-model="tabIndex" shrink @change="handleTabChange">
+        <wd-tab title="邮箱账号" />
+        <wd-tab title="邮件模板" />
+        <wd-tab title="邮件日志" />
+      </wd-tabs>
+    </view>
+
+    <AccountList v-show="tabType === 'account'" />
+    <TemplateList v-show="tabType === 'template'" />
+    <LogList v-show="tabType === 'log'" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { navigateBackPlus } from '@/utils'
+import AccountList from './components/account-list.vue'
+import LogList from './components/log-list.vue'
+import TemplateList from './components/template-list.vue'
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const tabTypes: string[] = ['account', 'template', 'log']
+const tabIndex = ref(0)
+const tabType = computed<string>(() => tabTypes[tabIndex.value])
+
+function handleTabChange({ index }: { index: number }) {
+  tabIndex.value = index
+}
+
+function handleBack() {
+  navigateBackPlus()
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages-system/mail/log/detail/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <view class="yd-page-container">
+    <wd-navbar
+      title="邮件日志详情"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view>
+      <wd-cell-group border>
+        <wd-cell title="日志编号" :value="String(formData?.id ?? '-')" />
+        <wd-cell title="发送邮箱" :value="String(formData?.fromMail ?? '-')" />
+        <wd-cell title="接收信息" :value="formatReceiveInfo(formData)" />
+        <wd-cell title="模板编号" :value="String(formData?.templateId ?? '-')" />
+        <wd-cell title="模板编码" :value="String(formData?.templateCode ?? '-')" />
+        <wd-cell title="邮件标题" :value="String(formData?.templateTitle ?? '-')" />
+        <wd-cell title="邮件内容" :value="String(formData?.templateContent ?? '-')" />
+        <wd-cell title="发送状态">
+          <dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="formData?.sendStatus" />
+        </wd-cell>
+        <wd-cell title="发送时间" :value="formatDateTime(formData?.sendTime) || '-'" />
+        <wd-cell title="发送消息编号" :value="String(formData?.sendMessageId ?? '-')" />
+        <wd-cell title="发送异常" :value="String(formData?.sendException ?? '-')" />
+        <wd-cell title="创建时间" :value="formatDateTime(formData?.createTime) || '-'" />
+      </wd-cell-group>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailLog } from '@/api/system/mail/log/index'
+import { onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { getMailLogPage } from '@/api/system/mail/log/index'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+
+const props = defineProps<{
+  id?: number | any
+}>()
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const toast = useToast()
+const formData = ref<MailLog>()
+
+function handleBack() {
+  navigateBackPlus('/pages-system/mail/index')
+}
+
+function formatReceiveInfo(data?: MailLog) {
+  if (!data) {
+    return '-'
+  }
+  const lines: string[] = []
+  if (data.toMails && data.toMails.length > 0) {
+    lines.push(`收件：${data.toMails.join('、')}`)
+  }
+  if (data.ccMails && data.ccMails.length > 0) {
+    lines.push(`抄送：${data.ccMails.join('、')}`)
+  }
+  if (data.bccMails && data.bccMails.length > 0) {
+    lines.push(`密送：${data.bccMails.join('、')}`)
+  }
+  return lines.length > 0 ? lines.join('；') : '-'
+}
+
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  try {
+    toast.loading('加载中...')
+    const data = await getMailLogPage({ pageNo: 1, pageSize: 1, id: props.id })
+    if (data.list && data.list.length > 0) {
+      formData.value = data.list[0]
+    }
+  } finally {
+    toast.close()
+  }
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages-system/mail/template/detail/components/send-form.vue

@@ -0,0 +1,162 @@
+<template>
+  <wd-popup v-model="visible" position="bottom" closable custom-style="border-radius: 16rpx 16rpx 0 0;">
+    <view class="p-24rpx">
+      <view class="mb-24rpx text-32rpx text-[#333] font-semibold">
+        测试发送邮件
+      </view>
+      <wd-form ref="sendFormRef" :model="sendFormData" :rules="sendFormRules">
+        <wd-cell-group border>
+          <wd-textarea
+            v-model="sendFormData.content"
+            label="模板内容"
+            label-width="180rpx"
+            disabled
+            :rows="3"
+          />
+          <wd-input
+            v-model="sendFormData.toMails"
+            label="收件邮箱"
+            label-width="180rpx"
+            prop="toMails"
+            clearable
+            placeholder="多个邮箱用逗号分隔"
+          />
+          <wd-input
+            v-model="sendFormData.ccMails"
+            label="抄送邮箱"
+            label-width="180rpx"
+            clearable
+            placeholder="多个邮箱用逗号分隔"
+          />
+          <wd-input
+            v-model="sendFormData.bccMails"
+            label="密送邮箱"
+            label-width="180rpx"
+            clearable
+            placeholder="多个邮箱用逗号分隔"
+          />
+          <template v-for="param in template?.params" :key="param">
+            <wd-input
+              v-model="sendFormData.templateParams[param]"
+              :label="`参数 ${param}`"
+              label-width="180rpx"
+              :prop="`templateParams.${param}`"
+              clearable
+              :placeholder="`请输入参数 ${param}`"
+            />
+          </template>
+        </wd-cell-group>
+      </wd-form>
+
+      <view class="mt-24rpx">
+        <wd-button type="primary" block :loading="sendLoading" @click="handleSendSubmit">
+          发送
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import type { MailTemplate } from '@/api/system/mail/template/index'
+import { computed, ref, watch } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { sendMail } from '@/api/system/mail/template/index'
+
+const props = defineProps<{
+  modelValue: boolean
+  template?: MailTemplate
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'success': []
+}>()
+
+const toast = useToast()
+
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: boolean) {
+    emit('update:modelValue', value)
+  },
+})
+
+const sendLoading = ref(false)
+const sendFormRef = ref<any>()
+const sendFormData = ref({
+  content: '',
+  toMails: '',
+  ccMails: '',
+  bccMails: '',
+  templateParams: {} as Record<string, string>,
+})
+
+const sendFormRules = computed(() => {
+  const rules: Record<string, any> = {
+    toMails: [{ required: true, message: '收件邮箱不能为空' }],
+  }
+  if (props.template?.params) {
+    props.template.params.forEach((param) => {
+      rules[`templateParams.${param}`] = [{ required: true, message: `参数 ${param} 不能为空` }]
+    })
+  }
+  return rules
+})
+
+function normalizeMailList(text: string) {
+  return text
+    .split(/[,，;；\s]+/)
+    .map(s => s.trim())
+    .filter(Boolean)
+}
+
+function initSendForm() {
+  sendFormData.value = {
+    content: props.template?.content || '',
+    toMails: '',
+    ccMails: '',
+    bccMails: '',
+    templateParams: {},
+  }
+  if (props.template?.params) {
+    props.template.params.forEach((param) => {
+      sendFormData.value.templateParams[param] = ''
+    })
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      initSendForm()
+    }
+  },
+)
+
+async function handleSendSubmit() {
+  const { valid } = await sendFormRef.value.validate()
+  if (!valid) {
+    return
+  }
+
+  sendLoading.value = true
+  try {
+    await sendMail({
+      templateCode: props.template?.code || '',
+      templateParams: sendFormData.value.templateParams,
+      toMails: normalizeMailList(sendFormData.value.toMails),
+      ccMails: normalizeMailList(sendFormData.value.ccMails),
+      bccMails: normalizeMailList(sendFormData.value.bccMails),
+    })
+    toast.success('邮件发送成功')
+    emit('success')
+    visible.value = false
+  } finally {
+    sendLoading.value = false
+  }
+}
+</script>

src/pages-system/mail/template/detail/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <view class="yd-page-container">
+    <wd-navbar
+      title="邮件模板详情"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view>
+      <wd-cell-group border>
+        <wd-cell title="模板编号" :value="String(formData?.id ?? '-')" />
+        <wd-cell title="模板名称" :value="String(formData?.name ?? '-')" />
+        <wd-cell title="模板编码" :value="String(formData?.code ?? '-')" />
+        <wd-cell title="邮箱账号" :value="String(getAccountMail(formData?.accountId) || formData?.accountId || '-')" />
+        <wd-cell title="发送人名称" :value="String(formData?.nickname ?? '-')" />
+        <wd-cell title="模板标题" :value="String(formData?.title ?? '-')" />
+        <wd-cell title="开启状态">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData?.status" />
+        </wd-cell>
+        <wd-cell title="模板内容" :value="String(formData?.content ?? '-')" />
+        <wd-cell title="备注" :value="String(formData?.remark ?? '-')" />
+        <wd-cell title="创建时间" :value="formatDateTime(formData?.createTime) || '-'" />
+      </wd-cell-group>
+    </view>
+
+    <SendForm v-model="sendVisible" :template="formData" />
+
+    <view class="safe-area-inset-bottom fixed bottom-0 left-0 right-0 bg-white p-24rpx">
+      <view class="w-full flex gap-24rpx">
+        <wd-button
+          v-if="hasAccessByCodes(['system:mail-template:send-mail'])"
+          class="flex-1" type="primary" @click="handleSendTest"
+        >
+          测试
+        </wd-button>
+        <wd-button
+          v-if="hasAccessByCodes(['system:mail-template:update'])"
+          class="flex-1" type="warning" @click="handleEdit"
+        >
+          编辑
+        </wd-button>
+        <wd-button
+          v-if="hasAccessByCodes(['system:mail-template:delete'])"
+          class="flex-1" type="error" :loading="deleting" @click="handleDelete"
+        >
+          删除
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailAccount } from '@/api/system/mail/account/index'
+import type { MailTemplate } from '@/api/system/mail/template/index'
+import { onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { getSimpleMailAccountList } from '@/api/system/mail/account/index'
+import { deleteMailTemplate, getMailTemplate } from '@/api/system/mail/template/index'
+import { useAccess } from '@/hooks/useAccess'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+import SendForm from './components/send-form.vue'
+
+const props = defineProps<{
+  id?: number | any
+}>()
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const { hasAccessByCodes } = useAccess()
+const toast = useToast()
+const formData = ref<MailTemplate>()
+const deleting = ref(false)
+const sendVisible = ref(false)
+
+const accountList = ref<MailAccount[]>([])
+function getAccountMail(accountId?: number) {
+  return accountList.value.find(item => item.id === accountId)?.mail
+}
+
+function handleBack() {
+  navigateBackPlus('/pages-system/mail/index')
+}
+
+async function loadAccountList() {
+  try {
+    accountList.value = await getSimpleMailAccountList()
+  } catch {
+    accountList.value = []
+  }
+}
+
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  try {
+    toast.loading('加载中...')
+    formData.value = await getMailTemplate(props.id)
+  } finally {
+    toast.close()
+  }
+}
+
+function handleEdit() {
+  uni.navigateTo({
+    url: `/pages-system/mail/template/form/index?id=${props.id}`,
+  })
+}
+
+function handleDelete() {
+  if (!props.id) {
+    return
+  }
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除该邮件模板吗？',
+    success: async (res) => {
+      if (!res.confirm) {
+        return
+      }
+      deleting.value = true
+      try {
+        await deleteMailTemplate(props.id)
+        toast.success('删除成功')
+        setTimeout(() => {
+          handleBack()
+        }, 500)
+      } finally {
+        deleting.value = false
+      }
+    },
+  })
+}
+
+function handleSendTest() {
+  sendVisible.value = true
+}
+
+onMounted(async () => {
+  await loadAccountList()
+  await getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages-system/mail/template/form/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <view class="yd-page-container">
+    <wd-navbar
+      :title="getTitle"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <view>
+      <wd-form ref="formRef" :model="formData" :rules="formRules">
+        <wd-cell-group border>
+          <wd-input
+            v-model="formData.name"
+            label="模板名称"
+            label-width="200rpx"
+            prop="name"
+            clearable
+            placeholder="请输入模板名称"
+          />
+          <wd-input
+            v-model="formData.code"
+            label="模板编码"
+            label-width="200rpx"
+            prop="code"
+            clearable
+            placeholder="请输入模板编码"
+          />
+          <wd-cell title="邮箱账号" title-width="200rpx" prop="accountId" center>
+            <wd-picker
+              v-model="formData.accountId"
+              :columns="accountOptions"
+              placeholder="请选择邮箱账号"
+            />
+          </wd-cell>
+          <wd-input
+            v-model="formData.nickname"
+            label="发送人名称"
+            label-width="200rpx"
+            clearable
+            placeholder="请输入发送人名称"
+          />
+          <wd-input
+            v-model="formData.title"
+            label="模板标题"
+            label-width="200rpx"
+            prop="title"
+            clearable
+            placeholder="请输入模板标题"
+          />
+          <wd-textarea
+            v-model="formData.content"
+            label="模板内容"
+            label-width="200rpx"
+            prop="content"
+            clearable
+            placeholder="请输入模板内容"
+            :rows="4"
+          />
+          <wd-cell title="开启状态" title-width="200rpx" prop="status" center>
+            <wd-radio-group v-model="formData.status" shape="button">
+              <wd-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </wd-cell>
+          <wd-textarea
+            v-model="formData.remark"
+            label="备注"
+            label-width="200rpx"
+            clearable
+            placeholder="请输入备注"
+          />
+        </wd-cell-group>
+      </wd-form>
+    </view>
+
+    <view class="safe-area-inset-bottom fixed bottom-0 left-0 right-0 bg-white p-24rpx">
+      <wd-button type="primary" block :loading="formLoading" @click="handleSubmit">
+        保存
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { MailAccount } from '@/api/system/mail/account/index'
+import type { MailTemplate } from '@/api/system/mail/template/index'
+import { computed, onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { getSimpleMailAccountList } from '@/api/system/mail/account/index'
+import { createMailTemplate, getMailTemplate, updateMailTemplate } from '@/api/system/mail/template/index'
+import { getIntDictOptions } from '@/hooks/useDict'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+
+const props = defineProps<{
+  id?: number | any
+}>()
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const toast = useToast()
+const getTitle = computed(() => (props.id ? '编辑邮件模板' : '新增邮件模板'))
+const formLoading = ref(false)
+const formData = ref<MailTemplate>({
+  id: undefined,
+  name: '',
+  code: '',
+  accountId: undefined,
+  nickname: '',
+  title: '',
+  content: '',
+  status: 0,
+  remark: '',
+})
+
+const formRules = {
+  name: [{ required: true, message: '模板名称不能为空' }],
+  code: [{ required: true, message: '模板编码不能为空' }],
+  accountId: [{ required: true, message: '邮箱账号不能为空' }],
+  title: [{ required: true, message: '模板标题不能为空' }],
+  content: [{ required: true, message: '模板内容不能为空' }],
+  status: [{ required: true, message: '开启状态不能为空' }],
+}
+
+const formRef = ref<any>()
+
+const accountList = ref<MailAccount[]>([])
+const accountOptions = computed(() => {
+  return accountList.value.map(item => ({
+    value: item.id,
+    label: item.mail,
+  }))
+})
+
+function handleBack() {
+  navigateBackPlus('/pages-system/mail/index')
+}
+
+async function loadAccountList() {
+  accountList.value = await getSimpleMailAccountList()
+}
+
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  formData.value = await getMailTemplate(props.id)
+}
+
+async function handleSubmit() {
+  const { valid } = await formRef.value.validate()
+  if (!valid) {
+    return
+  }
+
+  formLoading.value = true
+  try {
+    if (props.id) {
+      await updateMailTemplate(formData.value)
+      toast.success('修改成功')
+    } else {
+      await createMailTemplate(formData.value)
+      toast.success('新增成功')
+    }
+    setTimeout(() => {
+      handleBack()
+    }, 500)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  await loadAccountList()
+  await getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/index/index.ts

@@ -101,6 +101,14 @@ const menuGroupsData: MenuGroup[] = [
         iconColor: '#36cfc9',
         permission: 'system:sms-channel:query',
       },
+      {
+        key: 'mail',
+        name: '邮件管理',
+        icon: 'mail',
+        url: '/pages-system/mail/index',
+        iconColor: '#40a9ff',
+        permission: 'system:mail-account:query',
+      },
     ],
   },
   {