905 lines
29 KiB
Vue
905 lines
29 KiB
Vue
|
<template>
|
|||
|
|
<Page>
|
|||
|
|
<el-card>
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<Icon icon="ep:bell" class="mr-2" />
|
|||
|
|
<span>通知设置</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-tabs v-model="activeTab" type="border-card">
|
|||
|
|
<!-- 邮件通知 -->
|
|||
|
|
<el-tab-pane label="邮件通知" name="email">
|
|||
|
|
<el-form
|
|||
|
|
ref="emailFormRef"
|
|||
|
|
:model="emailForm"
|
|||
|
|
:rules="emailRules"
|
|||
|
|
label-width="150px"
|
|||
|
|
v-loading="loading"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="启用邮件通知" prop="enabled">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="emailForm.enabled"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">启用后系统将发送邮件通知</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<template v-if="emailForm.enabled">
|
|||
|
|
<el-form-item label="通知类型" prop="types">
|
|||
|
|
<el-checkbox-group v-model="emailForm.types">
|
|||
|
|
<el-checkbox label="user_register">用户注册</el-checkbox>
|
|||
|
|
<el-checkbox label="user_login">用户登录</el-checkbox>
|
|||
|
|
<el-checkbox label="password_reset">密码重置</el-checkbox>
|
|||
|
|
<el-checkbox label="order_created">订单创建</el-checkbox>
|
|||
|
|
<el-checkbox label="order_paid">订单支付</el-checkbox>
|
|||
|
|
<el-checkbox label="order_shipped">订单发货</el-checkbox>
|
|||
|
|
<el-checkbox label="order_completed">订单完成</el-checkbox>
|
|||
|
|
<el-checkbox label="system_error">系统错误</el-checkbox>
|
|||
|
|
<el-checkbox label="security_alert">安全警报</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="管理员邮箱" prop="adminEmails">
|
|||
|
|
<div class="email-list-container">
|
|||
|
|
<div class="email-list">
|
|||
|
|
<div v-for="(email, index) in emailForm.adminEmails" :key="index" class="email-item">
|
|||
|
|
<el-input
|
|||
|
|
v-model="emailForm.adminEmails[index]"
|
|||
|
|
placeholder="请输入管理员邮箱"
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
text
|
|||
|
|
@click="removeAdminEmail(index)"
|
|||
|
|
class="ml-2"
|
|||
|
|
>
|
|||
|
|
<Icon icon="ep:delete" />
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-button @click="addAdminEmail" type="primary" text class="mt-2">
|
|||
|
|
<Icon icon="ep:plus" class="mr-1" />
|
|||
|
|
添加邮箱
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="发送频率限制" prop="rateLimit">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="emailForm.rateLimit"
|
|||
|
|
:min="1"
|
|||
|
|
:max="100"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">封/小时</span>
|
|||
|
|
<div class="form-item-tip">限制每小时发送的邮件数量</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="重试次数" prop="retryTimes">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="emailForm.retryTimes"
|
|||
|
|
:min="0"
|
|||
|
|
:max="5"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">次</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="队列延迟" prop="queueDelay">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="emailForm.queueDelay"
|
|||
|
|
:min="0"
|
|||
|
|
:max="3600"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">秒</span>
|
|||
|
|
<div class="form-item-tip">邮件发送延迟时间</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleSaveEmail" :loading="saveLoading">
|
|||
|
|
<Icon icon="ep:check" class="mr-1" />
|
|||
|
|
保存设置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleResetEmail">
|
|||
|
|
<Icon icon="ep:refresh" class="mr-1" />
|
|||
|
|
重置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleTestEmail" :loading="testEmailLoading" v-if="emailForm.enabled">
|
|||
|
|
<Icon icon="ep:message" class="mr-1" />
|
|||
|
|
发送测试邮件
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<!-- 短信通知 -->
|
|||
|
|
<el-tab-pane label="短信通知" name="sms">
|
|||
|
|
<el-form
|
|||
|
|
ref="smsFormRef"
|
|||
|
|
:model="smsForm"
|
|||
|
|
:rules="smsRules"
|
|||
|
|
label-width="150px"
|
|||
|
|
v-loading="loading"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="启用短信通知" prop="enabled">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="smsForm.enabled"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">启用后系统将发送短信通知</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<template v-if="smsForm.enabled">
|
|||
|
|
<el-form-item label="通知类型" prop="types">
|
|||
|
|
<el-checkbox-group v-model="smsForm.types">
|
|||
|
|
<el-checkbox label="user_register">用户注册</el-checkbox>
|
|||
|
|
<el-checkbox label="login_verify">登录验证</el-checkbox>
|
|||
|
|
<el-checkbox label="password_reset">密码重置</el-checkbox>
|
|||
|
|
<el-checkbox label="order_status">订单状态变更</el-checkbox>
|
|||
|
|
<el-checkbox label="payment_notify">支付通知</el-checkbox>
|
|||
|
|
<el-checkbox label="security_alert">安全警报</el-checkbox>
|
|||
|
|
<el-checkbox label="marketing">营销推广</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="管理员手机" prop="adminPhones">
|
|||
|
|
<div class="phone-list-container">
|
|||
|
|
<div class="phone-list">
|
|||
|
|
<div v-for="(phone, index) in smsForm.adminPhones" :key="index" class="phone-item">
|
|||
|
|
<el-input
|
|||
|
|
v-model="smsForm.adminPhones[index]"
|
|||
|
|
placeholder="请输入管理员手机号"
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
text
|
|||
|
|
@click="removeAdminPhone(index)"
|
|||
|
|
class="ml-2"
|
|||
|
|
>
|
|||
|
|
<Icon icon="ep:delete" />
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-button @click="addAdminPhone" type="primary" text class="mt-2">
|
|||
|
|
<Icon icon="ep:plus" class="mr-1" />
|
|||
|
|
添加手机号
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="发送时间限制">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="开始时间" prop="sendTimeStart" label-width="80px">
|
|||
|
|
<el-time-picker
|
|||
|
|
v-model="smsForm.sendTimeStart"
|
|||
|
|
format="HH:mm"
|
|||
|
|
value-format="HH:mm"
|
|||
|
|
placeholder="选择开始时间"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="结束时间" prop="sendTimeEnd" label-width="80px">
|
|||
|
|
<el-time-picker
|
|||
|
|
v-model="smsForm.sendTimeEnd"
|
|||
|
|
format="HH:mm"
|
|||
|
|
value-format="HH:mm"
|
|||
|
|
placeholder="选择结束时间"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="form-item-tip">限制短信发送的时间段，避免打扰用户</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="发送频率限制" prop="rateLimit">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="smsForm.rateLimit"
|
|||
|
|
:min="1"
|
|||
|
|
:max="1000"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">条/小时</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="同号码限制" prop="phoneLimit">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="smsForm.phoneLimit"
|
|||
|
|
:min="1"
|
|||
|
|
:max="10"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">条/天</span>
|
|||
|
|
<div class="form-item-tip">限制同一手机号每天接收的短信数量</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleSaveSms" :loading="saveLoading">
|
|||
|
|
<Icon icon="ep:check" class="mr-1" />
|
|||
|
|
保存设置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleResetSms">
|
|||
|
|
<Icon icon="ep:refresh" class="mr-1" />
|
|||
|
|
重置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleTestSms" :loading="testSmsLoading" v-if="smsForm.enabled">
|
|||
|
|
<Icon icon="ep:chat-dot-round" class="mr-1" />
|
|||
|
|
发送测试短信
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<!-- 站内通知 -->
|
|||
|
|
<el-tab-pane label="站内通知" name="system">
|
|||
|
|
<el-form
|
|||
|
|
ref="systemFormRef"
|
|||
|
|
:model="systemForm"
|
|||
|
|
:rules="systemRules"
|
|||
|
|
label-width="150px"
|
|||
|
|
v-loading="loading"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="启用站内通知" prop="enabled">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="systemForm.enabled"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">启用后系统将发送站内消息通知</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<template v-if="systemForm.enabled">
|
|||
|
|
<el-form-item label="通知类型" prop="types">
|
|||
|
|
<el-checkbox-group v-model="systemForm.types">
|
|||
|
|
<el-checkbox label="user_register">用户注册</el-checkbox>
|
|||
|
|
<el-checkbox label="order_created">订单创建</el-checkbox>
|
|||
|
|
<el-checkbox label="order_paid">订单支付</el-checkbox>
|
|||
|
|
<el-checkbox label="order_shipped">订单发货</el-checkbox>
|
|||
|
|
<el-checkbox label="order_completed">订单完成</el-checkbox>
|
|||
|
|
<el-checkbox label="order_refund">订单退款</el-checkbox>
|
|||
|
|
<el-checkbox label="user_feedback">用户反馈</el-checkbox>
|
|||
|
|
<el-checkbox label="system_maintenance">系统维护</el-checkbox>
|
|||
|
|
<el-checkbox label="promotion">促销活动</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="消息保留期" prop="retentionDays">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="systemForm.retentionDays"
|
|||
|
|
:min="7"
|
|||
|
|
:max="365"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">天</span>
|
|||
|
|
<div class="form-item-tip">超过保留期的消息将被自动删除</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="最大消息数" prop="maxMessages">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="systemForm.maxMessages"
|
|||
|
|
:min="100"
|
|||
|
|
:max="10000"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">条</span>
|
|||
|
|
<div class="form-item-tip">每个用户最多保留的消息数量</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="自动标记已读" prop="autoMarkRead">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="systemForm.autoMarkRead"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">用户查看消息后自动标记为已读</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="推送到桌面" prop="desktopPush">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="systemForm.desktopPush"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">支持浏览器桌面通知推送</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="声音提醒" prop="soundAlert">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="systemForm.soundAlert"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">新消息时播放提示音</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleSaveSystem" :loading="saveLoading">
|
|||
|
|
<Icon icon="ep:check" class="mr-1" />
|
|||
|
|
保存设置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleResetSystem">
|
|||
|
|
<Icon icon="ep:refresh" class="mr-1" />
|
|||
|
|
重置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleTestSystem" :loading="testSystemLoading" v-if="systemForm.enabled">
|
|||
|
|
<Icon icon="ep:bell" class="mr-1" />
|
|||
|
|
发送测试通知
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<!-- 微信通知 -->
|
|||
|
|
<el-tab-pane label="微信通知" name="wechat">
|
|||
|
|
<el-form
|
|||
|
|
ref="wechatFormRef"
|
|||
|
|
:model="wechatForm"
|
|||
|
|
:rules="wechatRules"
|
|||
|
|
label-width="150px"
|
|||
|
|
v-loading="loading"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="启用微信通知" prop="enabled">
|
|||
|
|
<el-switch
|
|||
|
|
v-model="wechatForm.enabled"
|
|||
|
|
active-text="启用"
|
|||
|
|
inactive-text="禁用"
|
|||
|
|
/>
|
|||
|
|
<div class="form-item-tip">启用后系统将发送微信模板消息</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<template v-if="wechatForm.enabled">
|
|||
|
|
<el-form-item label="AppID" prop="appId">
|
|||
|
|
<el-input
|
|||
|
|
v-model="wechatForm.appId"
|
|||
|
|
placeholder="请输入微信公众号AppID"
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="AppSecret" prop="appSecret">
|
|||
|
|
<el-input
|
|||
|
|
v-model="wechatForm.appSecret"
|
|||
|
|
type="password"
|
|||
|
|
placeholder="请输入微信公众号AppSecret"
|
|||
|
|
show-password
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="通知类型" prop="types">
|
|||
|
|
<el-checkbox-group v-model="wechatForm.types">
|
|||
|
|
<el-checkbox label="order_created">订单创建</el-checkbox>
|
|||
|
|
<el-checkbox label="order_paid">订单支付</el-checkbox>
|
|||
|
|
<el-checkbox label="order_shipped">订单发货</el-checkbox>
|
|||
|
|
<el-checkbox label="order_completed">订单完成</el-checkbox>
|
|||
|
|
<el-checkbox label="order_refund">订单退款</el-checkbox>
|
|||
|
|
<el-checkbox label="payment_success">支付成功</el-checkbox>
|
|||
|
|
<el-checkbox label="account_change">账户变动</el-checkbox>
|
|||
|
|
<el-checkbox label="service_notice">服务通知</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="模板消息配置">
|
|||
|
|
<div class="template-config">
|
|||
|
|
<div v-for="(template, key) in wechatForm.templates" :key="key" class="template-item">
|
|||
|
|
<div class="template-label">{{ getTemplateLabel(key) }}</div>
|
|||
|
|
<el-input
|
|||
|
|
v-model="wechatForm.templates[key]"
|
|||
|
|
placeholder="请输入模板ID"
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="发送频率限制" prop="rateLimit">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="wechatForm.rateLimit"
|
|||
|
|
:min="1"
|
|||
|
|
:max="1000"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<span class="ml-2">条/小时</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleSaveWechat" :loading="saveLoading">
|
|||
|
|
<Icon icon="ep:check" class="mr-1" />
|
|||
|
|
保存设置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleResetWechat">
|
|||
|
|
<Icon icon="ep:refresh" class="mr-1" />
|
|||
|
|
重置
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="handleTestWechat" :loading="testWechatLoading" v-if="wechatForm.enabled">
|
|||
|
|
<Icon icon="ep:chat-dot-round" class="mr-1" />
|
|||
|
|
发送测试消息
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</el-card>
|
|||
|
|
</Page>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
// 1. Vue 相关导入
|
|||
|
|
import { ref, reactive, onMounted } from 'vue';
|
|||
|
|
import type { FormInstance } from 'element-plus';
|
|||
|
|
|
|||
|
|
// 2. Element Plus 组件导入
|
|||
|
|
import {
|
|||
|
|
ElButton,
|
|||
|
|
ElCard,
|
|||
|
|
ElCheckbox,
|
|||
|
|
ElCheckboxGroup,
|
|||
|
|
ElCol,
|
|||
|
|
ElForm,
|
|||
|
|
ElFormItem,
|
|||
|
|
ElInput,
|
|||
|
|
ElInputNumber,
|
|||
|
|
ElMessage,
|
|||
|
|
ElRow,
|
|||
|
|
ElSwitch,
|
|||
|
|
ElTabPane,
|
|||
|
|
ElTabs,
|
|||
|
|
ElTimePicker,
|
|||
|
|
} from 'element-plus';
|
|||
|
|
|
|||
|
|
// 3. 图标组件导入
|
|||
|
|
import { Icon } from '@iconify/vue';
|
|||
|
|
|
|||
|
|
// 4. Vben 组件导入
|
|||
|
|
import { Page } from '@vben/common-ui';
|
|||
|
|
|
|||
|
|
// 5. 项目内部导入
|
|||
|
|
import {
|
|||
|
|
getNotificationSettingsApi,
|
|||
|
|
updateNotificationSettingsApi,
|
|||
|
|
resetNotificationSettingsApi,
|
|||
|
|
testNotificationApi,
|
|||
|
|
type NotificationSettings,
|
|||
|
|
type UpdateNotificationSettingsParams,
|
|||
|
|
} from '#/api/settings';
|
|||
|
|
|
|||
|
|
// 响应式数据
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const saveLoading = ref(false);
|
|||
|
|
const testEmailLoading = ref(false);
|
|||
|
|
const testSmsLoading = ref(false);
|
|||
|
|
const testSystemLoading = ref(false);
|
|||
|
|
const testWechatLoading = ref(false);
|
|||
|
|
const activeTab = ref('email');
|
|||
|
|
const emailFormRef = ref<FormInstance>();
|
|||
|
|
const smsFormRef = ref<FormInstance>();
|
|||
|
|
const systemFormRef = ref<FormInstance>();
|
|||
|
|
const wechatFormRef = ref<FormInstance>();
|
|||
|
|
|
|||
|
|
// 邮件通知表单
|
|||
|
|
const emailForm = reactive({
|
|||
|
|
enabled: true,
|
|||
|
|
types: ['user_register', 'order_created', 'system_error'],
|
|||
|
|
adminEmails: ['admin@example.com'],
|
|||
|
|
rateLimit: 50,
|
|||
|
|
retryTimes: 3,
|
|||
|
|
queueDelay: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 短信通知表单
|
|||
|
|
const smsForm = reactive({
|
|||
|
|
enabled: false,
|
|||
|
|
types: ['user_register', 'login_verify', 'password_reset'],
|
|||
|
|
adminPhones: [''],
|
|||
|
|
sendTimeStart: '08:00',
|
|||
|
|
sendTimeEnd: '22:00',
|
|||
|
|
rateLimit: 100,
|
|||
|
|
phoneLimit: 5,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 站内通知表单
|
|||
|
|
const systemForm = reactive({
|
|||
|
|
enabled: true,
|
|||
|
|
types: ['user_register', 'order_created', 'order_paid'],
|
|||
|
|
retentionDays: 30,
|
|||
|
|
maxMessages: 1000,
|
|||
|
|
autoMarkRead: true,
|
|||
|
|
desktopPush: false,
|
|||
|
|
soundAlert: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 微信通知表单
|
|||
|
|
const wechatForm = reactive({
|
|||
|
|
enabled: false,
|
|||
|
|
appId: '',
|
|||
|
|
appSecret: '',
|
|||
|
|
types: ['order_created', 'order_paid', 'payment_success'],
|
|||
|
|
templates: {
|
|||
|
|
order_created: '',
|
|||
|
|
order_paid: '',
|
|||
|
|
order_shipped: '',
|
|||
|
|
order_completed: '',
|
|||
|
|
order_refund: '',
|
|||
|
|
payment_success: '',
|
|||
|
|
account_change: '',
|
|||
|
|
service_notice: '',
|
|||
|
|
},
|
|||
|
|
rateLimit: 100,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单验证规则
|
|||
|
|
const emailRules = {
|
|||
|
|
adminEmails: [
|
|||
|
|
{ required: true, message: '请输入管理员邮箱', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
rateLimit: [
|
|||
|
|
{ required: true, message: '请输入发送频率限制', trigger: 'blur' },
|
|||
|
|
{ type: 'number', min: 1, max: 100, message: '发送频率范围为 1-100 封/小时', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const smsRules = {
|
|||
|
|
adminPhones: [
|
|||
|
|
{ required: true, message: '请输入管理员手机号', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
rateLimit: [
|
|||
|
|
{ required: true, message: '请输入发送频率限制', trigger: 'blur' },
|
|||
|
|
{ type: 'number', min: 1, max: 1000, message: '发送频率范围为 1-1000 条/小时', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const systemRules = {
|
|||
|
|
retentionDays: [
|
|||
|
|
{ required: true, message: '请输入消息保留期', trigger: 'blur' },
|
|||
|
|
{ type: 'number', min: 7, max: 365, message: '保留期范围为 7-365 天', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
maxMessages: [
|
|||
|
|
{ required: true, message: '请输入最大消息数', trigger: 'blur' },
|
|||
|
|
{ type: 'number', min: 100, max: 10000, message: '消息数范围为 100-10000 条', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const wechatRules = {
|
|||
|
|
appId: [
|
|||
|
|
{ required: true, message: '请输入微信AppID', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
appSecret: [
|
|||
|
|
{ required: true, message: '请输入微信AppSecret', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 方法
|
|||
|
|
const addAdminEmail = () => {
|
|||
|
|
emailForm.adminEmails.push('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeAdminEmail = (index: number) => {
|
|||
|
|
if (emailForm.adminEmails.length > 1) {
|
|||
|
|
emailForm.adminEmails.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const addAdminPhone = () => {
|
|||
|
|
smsForm.adminPhones.push('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeAdminPhone = (index: number) => {
|
|||
|
|
if (smsForm.adminPhones.length > 1) {
|
|||
|
|
smsForm.adminPhones.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getTemplateLabel = (key: string) => {
|
|||
|
|
const labels: Record<string, string> = {
|
|||
|
|
order_created: '订单创建',
|
|||
|
|
order_paid: '订单支付',
|
|||
|
|
order_shipped: '订单发货',
|
|||
|
|
order_completed: '订单完成',
|
|||
|
|
order_refund: '订单退款',
|
|||
|
|
payment_success: '支付成功',
|
|||
|
|
account_change: '账户变动',
|
|||
|
|
service_notice: '服务通知',
|
|||
|
|
};
|
|||
|
|
return labels[key] || key;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadSettings = async () => {
|
|||
|
|
loading.value = true;
|
|||
|
|
try {
|
|||
|
|
const settings = await getNotificationSettingsApi();
|
|||
|
|
Object.assign(emailForm, settings.email || {});
|
|||
|
|
Object.assign(smsForm, settings.sms || {});
|
|||
|
|
Object.assign(systemForm, settings.system || {});
|
|||
|
|
Object.assign(wechatForm, settings.wechat || {});
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('加载通知设置失败');
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveEmail = async () => {
|
|||
|
|
if (!emailFormRef.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await emailFormRef.value.validate();
|
|||
|
|
saveLoading.value = true;
|
|||
|
|
|
|||
|
|
// 过滤空的邮箱地址
|
|||
|
|
const filteredEmails = emailForm.adminEmails.filter(email => email.trim());
|
|||
|
|
|
|||
|
|
const updateData: UpdateNotificationSettingsParams = {
|
|||
|
|
type: 'email',
|
|||
|
|
config: {
|
|||
|
|
...emailForm,
|
|||
|
|
adminEmails: filteredEmails,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
await updateNotificationSettingsApi(updateData);
|
|||
|
|
ElMessage.success('邮件通知设置保存成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('保存失败');
|
|||
|
|
} finally {
|
|||
|
|
saveLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveSms = async () => {
|
|||
|
|
if (!smsFormRef.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await smsFormRef.value.validate();
|
|||
|
|
saveLoading.value = true;
|
|||
|
|
|
|||
|
|
// 过滤空的手机号
|
|||
|
|
const filteredPhones = smsForm.adminPhones.filter(phone => phone.trim());
|
|||
|
|
|
|||
|
|
const updateData: UpdateNotificationSettingsParams = {
|
|||
|
|
type: 'sms',
|
|||
|
|
config: {
|
|||
|
|
...smsForm,
|
|||
|
|
adminPhones: filteredPhones,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
await updateNotificationSettingsApi(updateData);
|
|||
|
|
ElMessage.success('短信通知设置保存成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('保存失败');
|
|||
|
|
} finally {
|
|||
|
|
saveLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveSystem = async () => {
|
|||
|
|
if (!systemFormRef.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await systemFormRef.value.validate();
|
|||
|
|
saveLoading.value = true;
|
|||
|
|
|
|||
|
|
const updateData: UpdateNotificationSettingsParams = {
|
|||
|
|
type: 'system',
|
|||
|
|
config: systemForm,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
await updateNotificationSettingsApi(updateData);
|
|||
|
|
ElMessage.success('站内通知设置保存成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('保存失败');
|
|||
|
|
} finally {
|
|||
|
|
saveLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveWechat = async () => {
|
|||
|
|
if (!wechatFormRef.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await wechatFormRef.value.validate();
|
|||
|
|
saveLoading.value = true;
|
|||
|
|
|
|||
|
|
const updateData: UpdateNotificationSettingsParams = {
|
|||
|
|
type: 'wechat',
|
|||
|
|
config: wechatForm,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
await updateNotificationSettingsApi(updateData);
|
|||
|
|
ElMessage.success('微信通知设置保存成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('保存失败');
|
|||
|
|
} finally {
|
|||
|
|
saveLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleResetEmail = async () => {
|
|||
|
|
try {
|
|||
|
|
await resetNotificationSettingsApi('email');
|
|||
|
|
await loadSettings();
|
|||
|
|
ElMessage.success('邮件通知设置已重置');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('重置失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleResetSms = async () => {
|
|||
|
|
try {
|
|||
|
|
await resetNotificationSettingsApi('sms');
|
|||
|
|
await loadSettings();
|
|||
|
|
ElMessage.success('短信通知设置已重置');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('重置失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleResetSystem = async () => {
|
|||
|
|
try {
|
|||
|
|
await resetNotificationSettingsApi('system');
|
|||
|
|
await loadSettings();
|
|||
|
|
ElMessage.success('站内通知设置已重置');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('重置失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleResetWechat = async () => {
|
|||
|
|
try {
|
|||
|
|
await resetNotificationSettingsApi('wechat');
|
|||
|
|
await loadSettings();
|
|||
|
|
ElMessage.success('微信通知设置已重置');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('重置失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTestEmail = async () => {
|
|||
|
|
testEmailLoading.value = true;
|
|||
|
|
try {
|
|||
|
|
await testNotificationApi('email');
|
|||
|
|
ElMessage.success('测试邮件发送成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('发送测试邮件失败');
|
|||
|
|
} finally {
|
|||
|
|
testEmailLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTestSms = async () => {
|
|||
|
|
testSmsLoading.value = true;
|
|||
|
|
try {
|
|||
|
|
await testNotificationApi('sms');
|
|||
|
|
ElMessage.success('测试短信发送成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('发送测试短信失败');
|
|||
|
|
} finally {
|
|||
|
|
testSmsLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTestSystem = async () => {
|
|||
|
|
testSystemLoading.value = true;
|
|||
|
|
try {
|
|||
|
|
await testNotificationApi('system');
|
|||
|
|
ElMessage.success('测试通知发送成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('发送测试通知失败');
|
|||
|
|
} finally {
|
|||
|
|
testSystemLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTestWechat = async () => {
|
|||
|
|
testWechatLoading.value = true;
|
|||
|
|
try {
|
|||
|
|
await testNotificationApi('wechat');
|
|||
|
|
ElMessage.success('测试微信消息发送成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('发送测试微信消息失败');
|
|||
|
|
} finally {
|
|||
|
|
testWechatLoading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 生命周期
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadSettings();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.notification-settings-page {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settings-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.settings-card {
|
|||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-tabs__content) {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-form-item__label) {
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item-tip {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.email-list-container,
|
|||
|
|
.phone-list-container {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.email-list,
|
|||
|
|
.phone-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.email-item,
|
|||
|
|
.phone-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-config {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-label {
|
|||
|
|
width: 80px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-checkbox-group) {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-checkbox-group .el-checkbox) {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|