init

2025-12-02 10:37:49 +08:00
commit 1f645dad3e
1183 changed files with 147673 additions and 0 deletions
--- a/src/views/tools/data/cache.vue
+++ b/src/views/tools/data/cache.vue
@@ -0,0 +1,186 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div
+				class="p-4 min-w-[375px] md:min-w-[700px] xl:min-w-[800px] mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6"
+			>
+				<div
+					v-for="(item, index) in 6"
+					:key="index"
+					class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-white hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-[#1d1d1d] dark:text-white dark:shadow-none"
+				>
+					<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
+						<div class="p-3 rounded-full bg-lightPrimary dark:bg-navy-700">
+							<span class="flex items-center text-brand-500 dark:text-white">
+								<svg
+									stroke="currentColor"
+									fill="currentColor"
+									stroke-width="0"
+									viewBox="0 0 24 24"
+									class="h-7 w-7"
+									height="1em"
+									width="1em"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path fill="none" d="M0 0h24v24H0z"></path>
+									<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
+								</svg>
+							</span>
+						</div>
+					</div>
+					<div class="flex flex-col justify-center w-auto ml-4 h-50">
+						<p class="text-sm font-medium text-gray-600 dark:text-gray-400 font-dm">{{ labels[index] }}</p>
+						<h4 class="text-xl font-bold text-navy-700 dark:text-white">{{ values[index] }}</h4>
+					</div>
+				</div>
+			</div>
+
+			<div class="sm:flex">
+				<el-card class="sm:mr-4 flex-1 !border-none mt-4 !bg-transparent dark:!bg-transparent" shadow="never">
+					<div>
+						<div class="mb-10 font-semibold dark:text-gray-200">命令统计</div>
+						<div class="flex h-[30vh] items-center" ref="commandChartRef"></div>
+					</div>
+				</el-card>
+
+				<el-card class="flex-1 !border-none mt-4 !bg-transparent dark:!bg-transparent" shadow="never">
+					<div>
+						<div class="mb-10 font-semibold dark:text-gray-200">内存信息</div>
+						<div class="flex h-[30vh] items-center" ref="memoryChartRef"></div>
+					</div>
+				</el-card>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="cache">
+import { systemCache } from '/@/api/admin/system';
+import { markRaw } from 'vue';
+import * as echarts from 'echarts';
+
+const baseInfo = ref<any>({});
+const commandChartRef = ref();
+const memoryChartRef = ref();
+
+const chartOptions = reactive({
+	commandChartOption: {
+		tooltip: {
+			trigger: 'item',
+			// formatter: '{b} : {d}%'
+		},
+
+		series: [
+			{
+				label: {
+					show: true,
+				},
+				labelLine: {
+					show: true,
+				},
+				type: 'pie',
+				radius: '85%',
+				color: [
+					'#0D47A1',
+					'#1565C0',
+					'#1976D2',
+					'#1E88E5',
+					'#2196F3',
+					'#42A5F5',
+					'#64B5F6',
+					'#90CAF9',
+					'#BBDEFB',
+					'#E3F2FD',
+					'#CAF0F8',
+					'#ADE8F4',
+					'#90E0EF',
+					'#48CAE4',
+					'#00B4D8',
+					'#0096C7',
+					'#0077B6',
+					'#023E8A',
+					'#03045E',
+					'#8ecae6',
+					'#98c1d9',
+					'#D9ED92',
+					'#B5E48C',
+					'#99D98C',
+					'#76C893',
+					'#52B69A',
+					'#34A0A4',
+					'#168AAD',
+					'#1A759F',
+					'#1E6091',
+					'#184E77',
+					'#457b9d',
+				],
+				data: [
+					{
+						value: '',
+						name: '',
+					},
+				],
+				emphasis: {
+					itemStyle: {
+						shadowBlur: 10,
+						shadowOffsetX: 0,
+						shadowColor: 'rgba(0, 0, 0, 0.5)',
+					},
+				},
+			},
+		],
+	},
+
+	memoryChartOption: {
+		tooltip: {
+			formatter: '{a} <br/>{b} : {c}%',
+		},
+		series: [
+			{
+				name: 'Pressure',
+				type: 'gauge',
+				radius: '100%',
+				detail: {
+					formatter: '{value}',
+				},
+				data: [
+					{
+						value: '',
+						name: '内存消耗',
+					},
+				],
+			},
+		],
+	},
+});
+
+const getSystemCache = async () => {
+	const res = await systemCache();
+
+	baseInfo.value = res.data.info;
+	baseInfo.value.dbSize = res.data.dbSize;
+
+	chartOptions.commandChartOption.series[0].data = res.data.commandStats;
+
+	chartOptions.memoryChartOption.series[0].data[0].value = (res.data.info.used_memory / 1024 / 1024).toFixed(2);
+	chartOptions.memoryChartOption.series[0].detail.formatter = '{value}' + 'M';
+
+	const commandChart = markRaw(echarts.init(commandChartRef.value));
+	const memoryChart = markRaw(echarts.init(memoryChartRef.value));
+	commandChart.setOption(chartOptions.commandChartOption);
+	memoryChart.setOption(chartOptions.memoryChartOption);
+};
+
+getSystemCache();
+
+const labels = computed(() => ['Redis版本', '客户端数', '运行时间(天)', '使用内存', 'AOF是否开启', 'RDB是否成功']);
+
+const values = computed(() => [
+	baseInfo.value?.redis_version,
+	baseInfo.value?.connected_clients,
+	baseInfo.value?.uptime_in_days,
+	baseInfo.value?.used_memory_human,
+	baseInfo.value?.aof_enabled == 0 ? '开启' : '关闭',
+	baseInfo.value?.aof_enabled == 'ok' ? '成功' : '失败',
+]);
+</script>
--- a/src/views/tools/data/jimu.vue
+++ b/src/views/tools/data/jimu.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="layout-padding">
+		<el-scrollbar class="main">
+      <iframe :src="src" class="iframe"  />
+		</el-scrollbar>
+	</div>
+</template>
+
+<script lang="ts" name="modelView" setup>
+import { Session } from '/@/utils/storage';
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+const src = ref('');
+const isMicro = import.meta.env.VITE_IS_MICRO;
+
+watch([route], () => {
+	init();
+});
+
+onMounted(() => {
+	init();
+});
+
+const init = () => {
+	const token = Session.getToken();
+	const tenantId = Session.getTenant();
+	src.value = proxy.baseURL + `/jimu/jmreport/list?token=${tenantId}_${token}&tenantId=${tenantId}`;
+};
+</script>
+
+<style lang="scss" scoped>
+.iframe {
+	width: 100%;
+	height: 80vh;
+	border: 0;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+</style>
--- a/src/views/tools/data/report.vue
+++ b/src/views/tools/data/report.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="layout-padding">
+    <iframe :src="src" class="iframe" />
+	</div>
+</template>
+
+<script lang="ts" name="modelView" setup>
+import { Session } from '/@/utils/storage';
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+const src = ref('');
+const isMicro = import.meta.env.VITE_IS_MICRO;
+
+watch([route], () => {
+	init();
+});
+
+onMounted(() => {
+	init();
+});
+
+const init = () => {
+	const token = Session.getToken();
+	const tenantId = Session.getTenant();
+	src.value = proxy.baseURL + `/gv?token=${token}&TENANT-ID=${tenantId}`;
+};
+</script>
+
+<style lang="scss" scoped>
+.iframe {
+	width: 100%;
+	height: 80vh;
+	border: 0;
+	overflow: hidden;
+	box-sizing: border-box;
+}
+</style>
--- a/src/views/tools/job-manage/form.vue
+++ b/src/views/tools/job-manage/form.vue
@@ -0,0 +1,211 @@
+<template>
+	<el-dialog v-model="visible" :close-on-click-modal="false" :title="form.jobId ? $t('common.editBtn') : $t('common.addBtn')" draggable>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
+			<el-row :gutter="20">
+				<el-col :span="12" class="mb20">
+					<el-form-item :label="t('job.jobName')" prop="jobName">
+						<el-input v-model="form.jobName" :placeholder="t('job.inputjobNameTip')" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item :label="t('job.jobGroup')" prop="jobGroup">
+						<el-input v-model="form.jobGroup" :placeholder="t('job.inputjobGroupTip')" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item :label="t('job.jobType')" prop="jobType">
+						<el-select v-model="form.jobType" :placeholder="t('job.jobType')">
+							<el-option v-for="(item, index) in job_type" :key="index" :label="item.label" :value="item.value"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20" v-if="['1'].includes(form.jobType)">
+					<el-form-item :label="t('job.jobType1ClassName')" prop="className">
+						<el-input v-model="form.className" :placeholder="t('job.inputclassNameTip')" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20" v-if="['2'].includes(form.jobType)">
+					<el-form-item :label="t('job.jobType2ClassName')" prop="className">
+						<el-input v-model="form.className" :placeholder="t('job.inputBeanNameTip')" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20" v-if="['1', '2'].includes(form.jobType)">
+					<el-form-item :label="t('job.jobType1MethodName')" prop="methodName">
+						<el-input v-model="form.methodName" :placeholder="t('job.inputmethodNameTip')" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20" v-if="['3'].includes(form.jobType)">
+					<el-form-item :label="t('job.jobType3ExecutePath')" prop="executePath">
+						<el-input v-model="form.executePath" :placeholder="t('job.inputexecutePathTip')" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20" v-if="['4'].includes(form.jobType)">
+					<el-form-item :label="t('job.jobType4ExecutePath')" prop="executePath">
+						<el-input v-model="form.executePath" :placeholder="t('job.inputexecutePathTip')" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item prop="methodParamsValue">
+						<template #label> {{ t('job.methodParamsValue') }} <tip :content="t('job.singleParam')" /></template>
+						<el-input v-model="form.methodParamsValue" :placeholder="t('job.inputmethodParamsValueTip')" />
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item :label="t('job.cronExpression')" prop="cronExpression">
+						<crontab clearable @hide="popoverVis(false)" v-model="form.cronExpression"></crontab>
+					</el-form-item>
+				</el-col>
+
+				<el-col :span="12" class="mb20">
+					<el-form-item :label="t('job.misfirePolicy')" prop="misfirePolicy">
+						<el-select v-model="form.misfirePolicy" :placeholder="t('job.inputmisfirePolicyTip')">
+							<el-option v-for="(item, index) in misfire_policy" :key="index" :label="item.label" :value="item.value"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item :label="t('job.remark')" prop="remark">
+						<el-input v-model="form.remark" :placeholder="t('job.inputremarkTip')" type="textarea" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
+				<el-button formDialogRef type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" name="SysJobDialog" setup>
+// 定义子组件向父组件传值/事件
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from '/@/hooks/message';
+import { addObj, getObj, putObj, validateJob } from '/@/api/daemon/job';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['refresh']);
+const Crontab = defineAsyncComponent(() => import('/@/components/Crontab/index.vue'));
+
+const { t } = useI18n();
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false);
+const loading = ref(false);
+
+// 定义字典
+const { misfire_policy, job_type } = useDict('job_status', 'job_execute_status', 'misfire_policy', 'job_type');
+
+// 提交表单数据
+const form = reactive({
+	jobId: '',
+	jobName: '',
+	jobGroup: '',
+	jobType: '',
+	executePath: '',
+	className: '',
+	methodName: '',
+	methodParamsValue: '',
+	cronExpression: '',
+	misfirePolicy: '',
+	jobStatus: '',
+	jobExecuteStatus: '',
+	remark: '',
+});
+
+const popoverVis = (bol: boolean) => {
+	popoverVisible.value = bol;
+};
+
+const popoverVisible = ref(false);
+// 定义校验规则
+const dataRules = reactive({
+	jobName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+	jobGroup: [{ required: true, message: '任务组名不能为空', trigger: 'blur' }],
+	jobType: [{ required: true, message: '任务类型不能为空', trigger: 'blur' }],
+	cronExpression: [{ required: true, message: 'cron不能为空', trigger: 'blur' }],
+	misfirePolicy: [{ required: true, message: '策略不能为空', trigger: 'blur' }],
+	executePath: [{ required: true, message: '执行路径不能为空', trigger: 'blur' }],
+	className: [
+		{ required: true, message: '名称不能为空', trigger: 'blur' },
+		{
+			validator: (rule: any, value: any, callback: any) => {
+				validateJob(rule, value, callback, form);
+			},
+			trigger: 'blur',
+		},
+	],
+	methodName: [
+		{ required: true, message: '方法不能为空', trigger: 'blur' },
+		{
+			validator: (rule: any, value: any, callback: any) => {
+				validateJob(rule, value, callback, form);
+			},
+			trigger: 'blur',
+		},
+	],
+	methodParamsValue: [
+		{
+			validator: (rule: any, value: any, callback: any) => {
+				validateJob(rule, value, callback, form);
+			},
+			trigger: 'blur',
+		},
+	],
+});
+
+// 打开弹窗
+const openDialog = (id: string) => {
+	visible.value = true;
+	form.jobId = '';
+
+	// 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields();
+	});
+
+	// 获取sysJob信息
+	if (id) {
+		form.jobId = id;
+		getsysJobData(id);
+	}
+};
+
+// 提交
+const onSubmit = async () => {
+	const valid = await dataFormRef.value.validate().catch(() => {});
+	if (!valid) return false;
+
+	try {
+		loading.value = true;
+		form.jobId ? await putObj(form) : await addObj(form);
+		useMessage().success(t(form.jobId ? 'common.editSuccessText' : 'common.addSuccessText'));
+		visible.value = false;
+		emit('refresh');
+	} catch (err: any) {
+		useMessage().error('任务初始化异常');
+	} finally {
+		loading.value = false;
+	}
+};
+
+// 初始化表单数据
+const getsysJobData = (id: string) => {
+	// 获取数据
+	getObj(id).then((res: any) => {
+		Object.assign(form, res.data);
+	});
+};
+
+// 暴露变量
+defineExpose({
+	openDialog,
+});
+</script>
--- a/src/views/tools/job-manage/i18n/en.ts
+++ b/src/views/tools/job-manage/i18n/en.ts
@@ -0,0 +1,105 @@
+export default {
+	job: {
+		index: '#',
+		jobLogBtn: 'log',
+		jobStartBtn: 'start',
+		jobRunBtn: 'execute',
+		jobPauseBtn: 'pause',
+		importsysJobTip: 'import SysJob',
+		jobId: 'jobId',
+		jobName: 'jobName',
+		jobGroup: 'jobGroup',
+		jobOrder: 'jobOrder',
+		jobType: 'jobType',
+		executePath: 'executePath',
+		className: 'className',
+		methodName: 'methodName',
+		methodParamsValue: 'methodParamsValue',
+		cronExpression: 'cronExpression',
+		misfirePolicy: 'misfirePolicy',
+		jobTenantType: 'jobTenantType',
+		jobStatus: 'jobStatus',
+		jobExecuteStatus: 'jobExecuteStatus',
+		createBy: 'createBy',
+		createTime: 'createTime',
+		updateBy: 'updateBy',
+		updateTime: 'updateTime',
+		startTime: 'startTime',
+		previousTime: 'previousTime',
+		nextTime: 'nextTime',
+		tenantId: 'tenantId',
+		remark: 'remark',
+		jobMessage: 'jobMessage',
+		jobLogStatus: 'jobLogStatus',
+		executeTime: 'executeTime',
+		exceptionInfo: 'exceptionInfo',
+		inputjobIdTip: 'input jobId',
+		inputjobNameTip: 'input jobName',
+		inputjobGroupTip: 'input jobGroup',
+		inputjobOrderTip: 'input jobOrder',
+		inputjobTypeTip: 'input jobType',
+		inputexecutePathTip: 'Please enter the Request Address',
+		inputclassNameTip: 'Please enter the Full Class Path',
+		inputmethodNameTip: 'input methodName',
+		inputmethodParamsValueTip: 'input methodParamsValue',
+		inputcronExpressionTip: 'input cronExpression',
+		inputmisfirePolicyTip: 'input misfirePolicy',
+		inputjobTenantTypeTip: 'input jobTenantType',
+		inputjobStatusTip: 'input jobStatus',
+		inputjobExecuteStatusTip: 'input jobExecuteStatus',
+		inputcreateByTip: 'input createBy',
+		inputcreateTimeTip: 'input createTime',
+		inputupdateByTip: 'input updateBy',
+		inputupdateTimeTip: 'input updateTime',
+		inputstartTimeTip: 'input startTime',
+		inputpreviousTimeTip: 'input previousTime',
+		inputnextTimeTip: 'input nextTime',
+		inputtenantIdTip: 'input tenantId',
+		inputremarkTip: 'input remark',
+		jobType1ClassName: 'Full Class Path',
+		jobType1MethodName: 'Method Name',
+		jobType2ClassName: 'Bean Name',
+		jobType2MethodName: 'Method Name',
+		jobType3ExecutePath: 'Request Address',
+		jobType4ExecutePath: 'Jar Path',
+		singleParam: 'Only single parameter is supported',
+	},
+	log: {
+		index: '#',
+		importsysJobLogTip: 'import SysJobLog',
+		jobLogId: 'jobLogId',
+		jobId: 'jobId',
+		jobName: 'jobName',
+		jobGroup: 'jobGroup',
+		jobOrder: 'jobOrder',
+		jobType: 'jobType',
+		executePath: 'executePath',
+		className: 'className',
+		methodName: 'methodName',
+		methodParamsValue: 'methodParamsValue',
+		cronExpression: 'cronExpression',
+		jobMessage: 'jobMessage',
+		jobLogStatus: 'jobLogStatus',
+		executeTime: 'executeTime',
+		exceptionInfo: 'exceptionInfo',
+		createTime: 'createTime',
+		tenantId: 'tenantId',
+		inputJobLogIdTip: 'input jobLogId',
+		inputJobIdTip: 'input jobId',
+		inputJobNameTip: 'input jobName',
+		inputJobGroupTip: 'input jobGroup',
+		inputJobOrderTip: 'input jobOrder',
+		inputJobTypeTip: 'input jobType',
+		inputExecutePathTip: 'input executePath',
+		inputClassNameTip: 'input className',
+		inputMethodNameTip: 'input methodName',
+		inputMethodParamsValueTip: 'input methodParamsValue',
+		inputCronExpressionTip: 'input cronExpression',
+		inputJobMessageTip: 'input jobMessage',
+		inputJobLogStatusTip: 'input jobLogStatus',
+		inputExecuteTimeTip: 'input executeTime',
+		inputExceptionInfoTip: 'input exceptionInfo',
+		inputCreateTimeTip: 'input createTime',
+		inputTenantIdTip: 'input tenantId',
+	},
+};
--- a/src/views/tools/job-manage/i18n/zh-cn.ts
+++ b/src/views/tools/job-manage/i18n/zh-cn.ts
@@ -0,0 +1,95 @@
+export default {
+	job: {
+		index: '#',
+		jobLogBtn: '日志',
+		jobStartBtn: '启动',
+		jobRunBtn: '执行',
+		jobPauseBtn: '暂停',
+		importsysJobTip: '导入定时任务调度表',
+		jobId: '任务id',
+		jobName: '任务名称',
+		jobGroup: '任务组名',
+		jobOrder: '组内执行顺利',
+		jobType: '类型',
+		executePath: '执行路径',
+		className: '执行文件',
+		methodName: '执行方法',
+		methodParamsValue: '参数值',
+		cronExpression: 'cron表达式',
+		misfirePolicy: '错失执行策略',
+		jobTenantType: '1、多租户任务;2、非多租户任务',
+		jobStatus: '任务状态',
+		jobExecuteStatus: '执行状态',
+		createBy: '创建者',
+		createTime: '创建时间',
+		updateBy: '更新者',
+		updateTime: '更新时间',
+		startTime: '初次执行时间',
+		previousTime: '上次执行时间',
+		nextTime: '下次执行时间',
+		tenantId: '租户',
+		remark: '备注信息',
+		jobMessage: '日志信息',
+		jobLogStatus: '执行状态',
+		executeTime: '执行时间',
+		exceptionInfo: '异常信息',
+		inputjobIdTip: '请输入任务id',
+		inputjobNameTip: '请输入任务名称',
+		inputjobGroupTip: '请输入任务组名',
+		inputjobOrderTip: '请输入组内执行顺利',
+		inputjobTypeTip: '请输入类型',
+		inputexecutePathTip: '请输入请求地址',
+		inputclassNameTip: '请输入类全路径',
+		inputBeanNameTip: '请输入Bean名称',
+		inputmethodNameTip: '请输入方法名称',
+		inputmethodParamsValueTip: '请输入参数值',
+		inputcronExpressionTip: '请输入cron表达式',
+		inputmisfirePolicyTip: '请输入错失执行策略',
+		inputjobTenantTypeTip: '请输入1、多租户任务;2、非多租户任务',
+		inputjobStatusTip: '请输入任务状态',
+		inputjobExecuteStatusTip: '请输入执行状态',
+		inputcreateByTip: '请输入创建者',
+		inputcreateTimeTip: '请输入创建时间',
+		inputupdateByTip: '请输入更新者',
+		inputupdateTimeTip: '请输入更新时间',
+		inputstartTimeTip: '请输入初次执行时间',
+		inputpreviousTimeTip: '请输入上次执行时间',
+		inputnextTimeTip: '请输入下次执行时间',
+		inputtenantIdTip: '请输入租户',
+		inputremarkTip: '请输入备注信息',
+		jobType1ClassName: '类全路径',
+		jobType1MethodName: '方法名称',
+		jobType2ClassName: 'Bean名称',
+		jobType2MethodName: '方法名称',
+		jobType3ExecutePath: '请求地址',
+		jobType4ExecutePath: 'Jar包路径',
+		singleParam: '只支持单个参数',
+	},
+	log: {
+		index: '#',
+		importsysJobLogTip: '导入定时任务执行日志表',
+		jobLogId: '任务日志ID',
+		jobId: '任务id',
+		jobName: '任务名称',
+		jobGroup: '任务组名',
+		jobMessage: '日志信息',
+		jobLogStatus: '执行状态',
+		executeTime: '执行时间',
+		exceptionInfo: '异常信息',
+		createTime: '创建时间',
+		tenantId: '租户id',
+		inputJobLogIdTip: '请输入任务日志ID',
+		inputJobIdTip: '请输入任务id',
+		inputJobNameTip: '请输入任务名称',
+		inputJobGroupTip: '请输入任务组名',
+		inputMethodNameTip: '请输入任务方法',
+		inputMethodParamsValueTip: '请输入参数值',
+		inputCronExpressionTip: '请输入cron执行表达式',
+		inputJobMessageTip: '请输入日志信息',
+		inputJobLogStatusTip: '请输入执行状态',
+		inputExecuteTimeTip: '请输入执行时间',
+		inputExceptionInfoTip: '请输入异常信息',
+		inputCreateTimeTip: '请输入创建时间',
+		inputTenantIdTip: '请输入租户id',
+	},
+};
--- a/src/views/tools/job-manage/index.vue
+++ b/src/views/tools/job-manage/index.vue
@@ -0,0 +1,427 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row class="ml10" v-show="showSearch">
+        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
+          <el-form-item :label="$t('job.jobName')" prop="jobName">
+            <el-input :placeholder="$t('job.inputjobNameTip')" @keyup.enter="getDataList" clearable
+                      v-model="state.queryForm.jobName"/>
+          </el-form-item>
+          <el-form-item :label="t('job.jobStatus')" prop="jobStatus">
+            <el-select :placeholder="t('job.inputjobStatusTip')" v-model="state.queryForm.jobStatus">
+              <el-option :key="index" :label="item.label" :value="item.value"
+                         v-for="(item, index) in job_status"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('job.jobExecuteStatus')" prop="jobExecuteStatus">
+            <el-select :placeholder="t('job.inputjobExecuteStatusTip')" v-model="state.queryForm.jobExecuteStatus">
+              <el-option :key="index" :label="item.label" :value="item.value"
+                         v-for="(item, index) in job_execute_status"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }}</el-button>
+            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-row>
+        <div class="mb8" style="width: 100%">
+          <el-button v-auth="'job_sys_job_add'" @click="formDialogRef.openDialog()" class="ml10" icon="folder-add"
+                     type="primary">
+            {{ $t('common.addBtn') }}
+          </el-button>
+          <el-button plain v-auth="'job_sys_job_del'" :disabled="multiple" @click="handleDelete(undefined)" class="ml10"
+                     icon="Delete" type="primary">
+            {{ $t('common.delBtn') }}
+          </el-button>
+          <right-toolbar
+              :export="'job_sys_job_add'"
+              @exportExcel="exportExcel"
+              @queryTable="getDataList"
+              class="ml10"
+              style="float: right; margin-right: 20px"
+              v-model:showSearch="showSearch"
+          >
+            <el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
+              <el-button circle icon="Grid" @click="tableViewRef = !tableViewRef"></el-button>
+            </el-tooltip>
+          </right-toolbar>
+        </div>
+      </el-row>
+
+      <!-- 表格视图  -->
+      <el-table
+          v-if="tableViewRef"
+          :data="state.dataList"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          row-key="jobId"
+          v-loading="state.loading"
+          border
+          :cell-style="tableStyle.cellStyle"
+          :header-cell-style="tableStyle.headerCellStyle"
+      >
+        <el-table-column align="center" type="selection" width="40"/>
+        <el-table-column :label="t('job.index')" fixed="left" type="index" width="60"/>
+        <el-table-column :label="t('job.jobName')" fixed="left" prop="jobName" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.jobGroup')" prop="jobGroup" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.jobStatus')" prop="jobStatus" show-overflow-tooltip width="120">
+          <template #default="scope">
+            <dict-tag :options="job_status" :value="scope.row.jobStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('job.jobExecuteStatus')" prop="jobExecuteStatus" show-overflow-tooltip width="120">
+          <template #default="scope">
+            <dict-tag :options="job_execute_status" :value="scope.row.jobExecuteStatus"></dict-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column :label="t('job.startTime')" prop="startTime" show-overflow-tooltip width="120"/>
+
+        <el-table-column :label="t('job.previousTime')" prop="previousTime" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.nextTime')" prop="nextTime" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.jobType')" prop="jobType" show-overflow-tooltip width="120">
+          <template #default="scope">
+            <dict-tag :options="job_type" :value="scope.row.jobType"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('job.executePath')" prop="executePath" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.className')" prop="className" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.methodName')" prop="methodName" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.methodParamsValue')" prop="methodParamsValue" show-overflow-tooltip
+                         width="120"/>
+        <el-table-column :label="t('job.cronExpression')" prop="cronExpression" show-overflow-tooltip width="120"/>
+        <el-table-column :label="t('job.misfirePolicy')" prop="misfirePolicy" show-overflow-tooltip width="200">
+          <template #default="scope">
+            <dict-tag :options="misfire_policy" :value="scope.row.misfirePolicy"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.action')" fixed="right" width="300">
+          <template #default="scope">
+            <el-button @click="handleJobLog(scope.row)" text type="primary">{{ $t('job.jobLogBtn') }}</el-button>
+
+            <el-button v-auth="'job_sys_job_start_job'" @click="handleStartJob(scope.row)" text type="primary"
+                       v-if="scope.row.jobStatus !== '2'"
+            >
+              {{ $t('job.jobStartBtn') }}
+            </el-button>
+
+            <el-button
+                v-auth="'job_sys_job_shutdown_job'"
+                @click="handleShutDownJob(scope.row)"
+                text
+                type="primary"
+                v-if="scope.row.jobStatus === '2'"
+            >
+              {{ $t('job.jobPauseBtn') }}
+            </el-button>
+
+            <el-button v-auth="'job_sys_job_edit'" @click="handleEditJob(scope.row)" text type="primary">
+              {{ $t('common.editBtn') }}
+            </el-button>
+
+            <el-button v-auth="'job_sys_job_start_job'" @click="handleRunJob(scope.row)" text type="primary">
+              {{ $t('job.jobRunBtn') }}
+            </el-button>
+
+            <el-button v-auth="'job_sys_job_del'" @click="handleDelete(scope.row)" text type="primary"
+                       :disabled="scope.row.jobStatus === '2'">{{ $t('common.delBtn') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 卡片视图  -->
+      <el-scrollbar v-if="!tableViewRef">
+        <div class="p-4">
+          <div class="mx-auto">
+            <!-- Main -->
+            <div class="grid grid-cols-4 gap-x-4 gap-y-6">
+              <div
+                  v-for="job in state.dataList"
+                  :key="job.jobId"
+                  class="w-full max-w-sm mt-2 bg-gray-100 dark:bg-[#1d1e1f] rounded-lg border dark:border-[#303030]"
+              >
+                <div aria-label="header" class="flex items-center p-4 space-x-4">
+                  <div aria-label="avatar" class="flex items-center mr-auto space-x-4">
+                    <div class="flex flex-col flex-1 space-y-2">
+                      <div class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                        {{ job.jobName }}
+                      </div>
+                      <p class="text-base font-normal text-gray-500 truncate dark:text-gray-400">
+                        {{ job.jobGroup }} / {{ job_type.find((item: any) => item.value === job.jobType)?.label }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div aria-label="navigation" class="py-2">
+                  <nav class="grid gap-1">
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.jobStatus') }}:</span>
+                      <span>{{ job_status.find((item: any) => item.value === job.jobStatus)?.label }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.cronExpression') }}:</span>
+                      <span>{{ job.cronExpression }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.previousTime') }}:</span>
+                      <span>{{ job.previousTime }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.nextTime') }}:</span>
+                      <span>{{ job.nextTime }}</span>
+                    </div>
+                    <div class="flex items-center w-full px-4 py-1 space-x-3 leading-6 text-gray-600 dark:text-gray-300 hover:bg-white dark:hover:bg-[#303030] rounded-md">
+                      <span class="font-medium">{{ $t('job.jobExecuteStatus') }}:</span>
+                      <span>
+                          <el-icon v-if="job.jobExecuteStatus === '1'"><CircleCloseFilled/></el-icon>
+                          <el-icon v-if="job.jobExecuteStatus === '0'"><CircleCheckFilled/></el-icon>
+                      </span>
+                    </div>
+                  </nav>
+                </div>
+                <div aria-label="footer" class="pt-2 border-t dark:border-[#303030]">
+                  <div class="flex items-center justify-center min-w-full">
+                    <nav class="flex">
+                      <a
+                          @click="handleJobLog(job)"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobLogBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_start_job'"
+                          @click="handleStartJob(job)"
+                          v-if="job.jobStatus !== '2'"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobStartBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_shutdown_job'"
+                          @click="handleShutDownJob(job)"
+                          v-if="job.jobStatus === '2'"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobPauseBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_edit'" @click="handleEditJob(job)"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span> {{ $t('common.editBtn') }}</span>
+                      </a>
+                      <a
+                          v-auth="'job_sys_job_start_job'" @click="handleRunJob(job)"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('job.jobRunBtn') }}</span>
+                      </a>
+
+                      <a
+                          v-auth="'job_sys_job_del'" @click="handleDelete(job)" type="primary"
+                          v-if="job.jobStatus !== '2'"
+                          href="javascript:;"
+                          class="px-2 py-2 text-primary hover:text-primary-400 dark:text-primary-300"
+                      >
+                        <span>{{ $t('common.delBtn') }}</span>
+                      </a>
+                    </nav>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </el-scrollbar>
+
+      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"/>
+    </div>
+
+    <!-- 编辑、新增  -->
+    <form-dialog @refresh="getDataList()" ref="formDialogRef"/>
+    <job-log ref="jobLogRef"></job-log>
+  </div>
+</template>
+
+<script lang="ts" name="systemSysJob" setup>
+import {BasicTableProps, useTable} from '/@/hooks/table';
+import {delObj, fetchList, runJobRa, shutDownJobRa, startJobRa} from '/@/api/daemon/job';
+import {useMessage, useMessageBox} from '/@/hooks/message';
+import {useDict} from '/@/hooks/dict';
+import {useI18n} from 'vue-i18n';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const JobLog = defineAsyncComponent(() => import('./job-log.vue'));
+
+// 获取国际化方法
+const {t} = useI18n();
+
+/** 表单弹窗引用 */
+const formDialogRef = ref();
+/** 作业日志引用 */
+const jobLogRef = ref();
+/** 表格视图 */
+const tableViewRef = ref(false)
+/** 搜索表单信息 */
+const queryForm = reactive({
+  jobName: '',
+  jobGroup: '',
+  jobStatus: '',
+  jobExecuteStatus: '',
+});
+/** 是否展示搜索表单 */
+const showSearch = ref(true);
+
+// 多选变量
+/** 选中的行 */
+const selectedRows = ref([]);
+/** 是否可以多选 */
+const multiple = ref(true);
+
+/** 查询字典 */
+const {
+  job_status,
+  job_execute_status,
+  misfire_policy,
+  job_type
+} = useDict('job_status', 'job_execute_status', 'misfire_policy', 'job_type');
+
+/** 表格状态变量 */
+const state = reactive<BasicTableProps>({
+  queryForm,
+  pageList: fetchList,
+  pagination: {
+    size: 8,
+    pageSizes: [4, 8, 12]
+  }
+});
+
+/** 获取表格数据方法 */
+const {getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle} = useTable(state);
+
+/** 重置查询表单 */
+const resetQuery = () => {
+  Object.keys(queryForm).forEach((key) => (queryForm[key] = ''));
+  getDataList();
+};
+
+/** 行选中事件 */
+const handleSelectionChange = (rows: any) => {
+  selectedRows.value = rows;
+  multiple.value = !rows.length;
+};
+
+/** 导出Excel */
+const exportExcel = () => {
+  downBlobFile('/job/sys-job/export', Object.assign(state.queryForm, {ids: selectedRows}), 'job.xlsx');
+};
+
+/** 查看作业日志 */
+const handleJobLog = (row) => {
+  jobLogRef.value.openDialog(row.jobId);
+};
+
+/** 编辑作业 */
+const handleEditJob = (row) => {
+  const jobStatus = row.jobStatus;
+  if (jobStatus === '1' || jobStatus === '3') {
+    formDialogRef.value.openDialog(row.jobId);
+  } else {
+    useMessage().error('运行中定时任务不可修改，请先暂停后操作');
+  }
+};
+
+/** 启动作业 */
+const handleStartJob = async (row) => {
+  const jobStatus = row.jobStatus;
+  if (jobStatus === '1' || jobStatus === '3') {
+    try {
+      await useMessageBox().confirm(`即将发布或启动(任务名称: ${row.jobName}), 是否继续?`);
+    } catch {
+      return;
+    }
+
+    try {
+      await startJobRa(row.jobId);
+      getDataList();
+      useMessage().success(t('common.optSuccessText'));
+    } catch (err: any) {
+      useMessage().error(err.msg);
+    }
+  } else {
+    useMessage().error('定时任务已运行');
+  }
+};
+
+/** 暂停作业 */
+const handleShutDownJob = async (row) => {
+  const jobStatus = row.jobStatus;
+  if (jobStatus === '2') {
+    try {
+      await useMessageBox().confirm(`即将暂停(任务名称: ${row.jobName}), 是否继续?`);
+    } catch {
+      return;
+    }
+
+    try {
+      await shutDownJobRa(row.jobId);
+      getDataList();
+      useMessage().success(t('common.optSuccessText'));
+    } catch (err: any) {
+      useMessage().error(err.msg);
+    }
+  } else {
+    useMessage().error('已暂停，不要重复操作');
+  }
+};
+
+/** 运行作业 */
+const handleRunJob = async (row) => {
+  try {
+    await useMessageBox().confirm(`立刻执行一次任务(任务名称: ${row.jobName}), 是否继续?`);
+  } catch {
+    return;
+  }
+
+  try {
+    await runJobRa(row.jobId);
+    getDataList();
+    useMessage().success(t('common.optSuccessText'));
+  } catch (err: any) {
+    useMessage().error('运行失败');
+  }
+};
+
+/** 删除操作 */
+const handleDelete = async (row) => {
+  if (!row) {
+    selectedRows.value.forEach(handleDelete);
+    return;
+  }
+
+  const {jobId, jobName} = row;
+  try {
+    await useMessageBox().confirm(`${t('common.delConfirmText')}(任务名称:${jobName})`);
+  } catch {
+    return;
+  }
+
+  try {
+    await delObj(jobId);
+    getDataList();
+    useMessage().success(t('common.delSuccessText'));
+  } catch (error: any) {
+    useMessage().error('删除失败');
+  }
+};
+</script>
--- a/src/views/tools/job-manage/job-log.vue
+++ b/src/views/tools/job-manage/job-log.vue
@@ -0,0 +1,125 @@
+<template>
+	<el-dialog v-model="visible" :close-on-click-modal="false" fullscreen title="运行日志" draggable>
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button
+						formDialogRef
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						class="ml10"
+						v-auth="'sys_log_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						{{ $t('common.delBtn') }}
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						class="ml10"
+						style="float: right; margin-right: 20px"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				style="width: 100%"
+				@selection-change="handleSelectionChange"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" :label="t('log.index')" width="80" />
+				<el-table-column prop="jobName" :label="t('log.jobName')" show-overflow-tooltip />
+				<el-table-column prop="jobMessage" :label="t('log.jobMessage')" show-overflow-tooltip />
+				<el-table-column prop="jobLogStatus" :label="t('log.jobLogStatus')" show-overflow-tooltip>
+					<template #default="scope">
+						<dict-tag :options="job_execute_status" :value="scope.row.jobLogStatus"></dict-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="executeTime" :label="t('log.executeTime')" show-overflow-tooltip />
+				<el-table-column prop="exceptionInfo" :label="t('log.exceptionInfo')" show-overflow-tooltip />
+				<el-table-column prop="createTime" :label="t('log.createTime')" show-overflow-tooltip />
+				<el-table-column :label="$t('common.action')" width="150">
+					<template #default="scope">
+						<el-button text type="primary" v-auth="'cloud_log_edit'" @click="formDialogRef.openDialog(scope.row.jobLogId)"
+							>{{ $t('common.editBtn') }}
+						</el-button>
+						<el-button text type="primary" v-auth="'sys_log_del'" @click="handleDelete([scope.row.jobLogId])">{{ $t('common.delBtn') }} </el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="job-log">
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { fetchList, delObjs } from '/@/api/daemon/job-log';
+import { useI18n } from 'vue-i18n';
+import { useDict } from '/@/hooks/dict';
+import { useMessage, useMessageBox } from '/@/hooks/message';
+
+const { t } = useI18n();
+const visible = ref(false);
+
+const { job_execute_status } = useDict('job_type', 'job_execute_status');
+
+// 定义变量内容
+const formDialogRef = ref();
+// 搜索变量
+const showSearch = ref(true);
+// 多选变量
+const selectObjs = ref([]) as any;
+const multiple = ref(true);
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {
+		jobId: '',
+	},
+	pageList: fetchList,
+	createdIsNeed: false,
+});
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
+
+const openDialog = (id: string) => {
+	visible.value = true;
+	state.queryForm.jobId = id;
+	getDataList();
+};
+
+// 多选事件
+const handleSelectionChange = (objs: { jobLogId: string }[]) => {
+	selectObjs.value = objs.map(({ jobLogId }) => jobLogId);
+	multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm(t('common.delConfirmText'));
+	} catch {
+		return;
+	}
+
+	try {
+		await delObjs(ids);
+		getDataList();
+		useMessage().success(t('common.delSuccessText'));
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	}
+};
+
+// 暴露变量
+defineExpose({
+	openDialog,
+});
+</script>
+
+<style scoped></style>
--- a/src/views/tools/message/email/form.vue
+++ b/src/views/tools/message/email/form.vue
@@ -0,0 +1,212 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+      <el-form-item label="业务名称" prop="configName">
+        <el-input v-model="form.configName" placeholder="请输入业务名称"/>
+      </el-form-item>
+      <el-form-item label="业务编码" prop="configKey">
+        <template #label>业务编码
+          <tip content="代码中通过业务编码发送"/>
+        </template>
+        <el-input v-model="form.configKey" placeholder="请输入业务编码"/>
+      </el-form-item>
+
+      <el-form-item label="服务地址" prop="configValue.smtpServer">
+        <el-input v-model="form.configValue.smtpServer" placeholder="请输入服务地址"/>
+      </el-form-item>
+
+      <el-row>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="服务端口" prop="configValue.port">
+            <el-input-number v-model="form.configValue.port" placeholder="请输入端口"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="开启SSL" prop="configValue.isSSL">
+            <el-radio-group v-model="form.configValue.isSSL">
+              <el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{
+                  item.label
+                }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="用户名" prop="configValue.username">
+            <el-input v-model="form.configValue.username" placeholder="请输入用户名"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="密码" prop="configValue.password">
+            <el-input v-model="form.configValue.password" placeholder="请输入密码（授权码）"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="开启认证" prop="configValue.isAuth">
+            <el-radio-group v-model="form.configValue.isAuth">
+              <el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{
+                  item.label
+                }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" class="mb20">
+          <el-form-item label="启用状态" prop="configStatus">
+            <el-radio-group v-model="form.configStatus">
+              <el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{
+                  item.label
+                }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="24" class="mb20">
+          <el-form-item prop="content">
+            <template #label>邮件模板
+              <tip content="邮件模板 使用 ${key} 占位符，如果模板为空，则直接推送body"/>
+            </template>
+            <editor v-model:get-html="form.configValue.html" placeholder="请输入HTML内容"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="SysMessageEmailDialog">
+import {useDict} from '/@/hooks/dict';
+import {useMessage} from "/@/hooks/message";
+import {addObj, getObj, putObj, validateExist} from '/@/api/admin/config'
+import {rule} from "/@/utils/validate";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+const {yes_no_type} = useDict('yes_no_type')
+
+// 提交表单数据
+const form = reactive({
+  configType: 'email',
+  id: '',
+  configKey: '',
+  configName: '',
+  configValue: {
+    port: 456,
+    smtpServer: '',
+    username: '',
+    password: '' || undefined,
+    isSSL: '1',
+    isAuth: '1',
+    html: '',
+  },
+  configStatus: '1',
+});
+
+// 定义校验规则
+const dataRules = ref({
+  configName: [
+    {required: true, message: '业务名称不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  configKey: [
+    {required: true, message: '业务编码不能为空', trigger: 'blur'},
+    {validator: rule.validatorCapital, trigger: 'blur'},
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        validateExist(rule, value, callback, form.id !== '');
+      },
+      trigger: 'blur',
+    },
+  ],
+  'configValue.smtpServer': [
+    {required: true, message: 'smtp server 不能为空', trigger: 'blur'}
+  ],
+  'configValue.port': [
+    {required: true, message: '端口不能为空', trigger: 'blur'}
+  ],
+  'configValue.username': [
+    {required: true, message: '用户不能为空', trigger: 'blur'}
+  ],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取sysMessage信息
+  if (id) {
+    form.id = id
+    getConfigData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    if (form.configValue.password?.includes('******')) {
+      form.configValue.password = undefined
+    }
+    form.configValue = JSON.stringify(form.configValue) as any
+    form.id ? await putObj(form) : await addObj(form);
+    useMessage().success(form.id ? '修改成功' : '添加成功');
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getConfigData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj({id}).then((res: any) => {
+    Object.assign(form, res.data[0])
+    form.configValue = JSON.parse(res.data[0].configValue)
+    form.configValue.password = '******' as any
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
--- a/src/views/tools/message/email/index.vue
+++ b/src/views/tools/message/email/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <el-row v-show="showSearch">
+      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+        <el-form-item label="业务名称" prop="configName">
+          <el-input placeholder="请输入业务名称" v-model="state.queryForm.configName"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="search" type="primary" @click="getDataList">
+            查询
+          </el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row>
+      <div class="mb8" style="width: 100%">
+        <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                   v-auth="'sys_message_add'">
+          新 增
+        </el-button>
+        <el-button plain :disabled="multiple" icon="Delete" type="primary"
+                   v-auth="'sys_message_del'" @click="handleDelete(selectObjs)">
+          删除
+        </el-button>
+        <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysMessage_export'"
+                       @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                       @queryTable="getDataList"></right-toolbar>
+      </div>
+    </el-row>
+    <el-table :data="state.dataList" v-loading="state.loading" border
+              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+              @selection-change="selectionChangHandle"
+              @sort-change="sortChangeHandle">
+      <el-table-column type="selection" width="40" align="center"/>
+      <el-table-column type="index" label="#" width="40"/>
+      <el-table-column prop="configName" label="业务名称" show-overflow-tooltip/>
+      <el-table-column prop="configKey" label="业务标识" show-overflow-tooltip/>
+      <el-table-column prop="configValue.supplier" label="服务地址" show-overflow-tooltip>
+        <template #default="scope">
+          {{ JSON.parse(scope.row.configValue).smtpServer }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="configStatus" label="启用状态" show-overflow-tooltip width="100">
+        <template #default="scope">
+          <dict-tag :options="yes_no_type" :value="scope.row.configStatus"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="300">
+        <template #default="scope">
+          <el-button icon="view" text type="primary" v-auth="'sys_message_edit'"
+                     @click="senderDialogRef.openDialog(scope.row.id)">测试
+          </el-button>
+          <el-button icon="edit-pen" text type="primary" v-auth="'sys_message_edit'"
+                     @click="formDialogRef.openDialog(scope.row.id)">编辑
+          </el-button>
+          <el-button icon="delete" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleDelete([scope.row.id])">删除
+          </el-button>
+          <el-button icon="Tickets" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleLog">日志
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>
+    <sender-dialog ref="senderDialogRef"/>
+
+  </div>
+</template>
+
+<script setup lang="ts" name="systemEmailMessage">
+import {BasicTableProps, useTable} from "/@/hooks/table";
+import {delObjs, fetchList} from "/@/api/admin/config";
+import {useMessage, useMessageBox} from "/@/hooks/message";
+import {useDict} from '/@/hooks/dict';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const SenderDialog = defineAsyncComponent(() => import('./sender.vue'));
+
+// 定义查询字典
+const {yes_no_type} = useDict('yes_no_type')
+// 定义变量内容
+const formDialogRef = ref()
+const senderDialogRef = ref()
+
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    configType: 'email',
+    configName: ''
+  },
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/sysMessage/export', Object.assign(state.queryForm, {ids: selectObjs}), 'sysMessage.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({id}) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+
+// 跳转日志
+const router = useRouter();
+const handleLog = () => {
+  router.push({path: '/admin/log/index', query: {serviceId: 'email'}})
+}
+
+</script>
--- a/src/views/tools/message/email/sender.vue
+++ b/src/views/tools/message/email/sender.vue
@@ -0,0 +1,148 @@
+<template>
+  <el-drawer title="邮件发送测试" v-model="visible" size="50%">
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="100px" v-loading="loading">
+      <el-form-item label="业务名称" prop="configName">
+        <el-input v-model="form.configName" placeholder="请输入业务名称" disabled/>
+      </el-form-item>
+      <el-form-item label="业务编码" prop="configKey">
+        <template #label>业务编码
+          <tip content="代码中通过业务编码发送"/>
+        </template>
+        <el-input v-model="form.configKey" placeholder="请输入业务编码" disabled/>
+      </el-form-item>
+      <el-form-item label="收件人" prop="mailAddress">
+        <tag-list v-if="visible" buttonText="+邮箱" v-model="form.mailAddress"/>
+      </el-form-item>
+      <el-form-item label="抄送人" prop="ccList">
+        <tag-list v-if="visible" buttonText="+邮箱" v-model="form.ccList"/>
+      </el-form-item>
+      <el-form-item label="密抄人" prop="bccList">
+        <tag-list v-if="visible" buttonText="+邮箱" v-model="form.bccList"/>
+      </el-form-item>
+      <el-form-item label="主题" prop="title">
+        <el-input v-model="form.title"/>
+      </el-form-item>
+      <el-form-item prop="params">
+        <template #label>参数
+          <tip content="参考邮件模板参数配置"/>
+        </template>
+        <json-editor
+            ref="jsonEditorRef"
+            v-model="form.params"
+        />
+      </el-form-item>
+      <el-form-item label="附件" prop="attachmentList">
+        <upload-file
+            v-if="visible"
+            :limit="5"
+            @change="handleFileChange"
+            :fileType="fileType"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="EmailSenderDialog">
+// @ts-ignore
+import JsonEditor from '@axolo/json-editor-vue'
+import {ref, reactive, nextTick} from 'vue';
+import {useMessage} from "/@/hooks/message";
+import {getObj} from '/@/api/admin/config'
+import {sendEmail} from '/@/api/admin/message'
+import {rule} from "/@/utils/validate";
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+const fileType = ref(['jpeg', 'png', 'jpg', 'gif', 'md', 'doc', 'xls', 'ppt', 'txt', 'pdf', 'docx', 'xlsx', 'pptx', 'zip', 'rar'])
+
+const form = reactive({
+  title: '',// 标题
+  configType: 'email',
+  configKey: '',
+  bizCode: '',
+  configName: '',
+  mailAddress: [],// 收件人
+  ccList: [],// 抄送人
+  bccList: [],// 密抄送人
+  attachmentList: [],// 附件
+  id: '',
+  htmlValues: {},
+  params: `{
+    "code": "1234"
+}`
+});
+
+const dataRules = ref({
+  params: [
+    {required: true, message: '参数不能为空', trigger: 'blur'},
+    {validator: rule.json, trigger: 'blur'}
+  ],
+  title: [
+    {required: true, message: '标题不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  mailAddress: [
+    {required: true, message: '收件人号不能为空', trigger: 'blur'},
+  ]
+})
+
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+  // 重置表单数据
+  nextTick(() => {
+
+    dataFormRef.value?.resetFields();
+  });
+
+  if (id) {
+    form.id = id
+    getConfigData(id)
+  }
+};
+
+const onSubmit = async () => {
+  const valid = await dataFormRef?.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    form.htmlValues = JSON.parse(form.params)
+    await sendEmail(form)
+    useMessage().success('发送成功');
+    visible.value = false
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    form.params = JSON.stringify(form.htmlValues)
+    loading.value = false;
+  }
+};
+
+const handleFileChange = (fileNames: string, fileList: any[]) => {
+  form.attachmentList = fileList.map(file => file.fileUrl);
+}
+
+const getConfigData = (id: string) => {
+  loading.value = true
+  getObj({id}).then((res: any) => {
+    Object.assign(form, res.data[0])
+    form.bizCode = form.configKey
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+defineExpose({
+  openDialog
+});
+</script>
--- a/src/views/tools/message/index.vue
+++ b/src/views/tools/message/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane lazy label="短信" name="sms">
+          <template #label>
+            <div class="ml-8">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                   stroke="currentColor" class="size-4">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                      d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"/>
+              </svg>
+              短信
+            </div>
+          </template>
+          <sms-config/>
+        </el-tab-pane>
+        <el-tab-pane lazy label="邮件" name="third">
+          <template #label>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                 stroke="currentColor" class="size-4">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"/>
+            </svg>
+            邮件
+          </template>
+          <email-config/>
+        </el-tab-pane>
+        <el-tab-pane lazy label="Hook" name="hook">
+          <template #label>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                 stroke="currentColor" class="size-4">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/>
+            </svg>
+            Hook
+          </template>
+          <hook-config/>
+        </el-tab-pane>
+        <el-tab-pane lazy label="站内信" name="internal">
+          <template #label>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                 stroke="currentColor" class="size-4">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"/>
+            </svg>
+            站内信
+          </template>
+          <internal-config/>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="systemSysMessage">
+
+// 引入组件
+import {TabsPaneContext} from "element-plus";
+
+const InternalConfig = defineAsyncComponent(() => import('./internal/index.vue'));
+const SmsConfig = defineAsyncComponent(() => import('./sms/index.vue'));
+const EmailConfig = defineAsyncComponent(() => import('./email/index.vue'));
+const HookConfig = defineAsyncComponent(() => import('./webhook/index.vue'));
+
+const activeName = ref('sms')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
--- a/src/views/tools/message/internal/form.vue
+++ b/src/views/tools/message/internal/form.vue
@@ -0,0 +1,157 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+      <el-row :gutter="24">
+        <el-col :span="12" class="mb20">
+          <el-form-item label="分类" prop="category">
+            <el-radio-group v-model="form.category">
+              <el-radio :key="index" :label="item.value" border v-for="(item, index) in message_type">{{
+                  item.label
+                }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="全部通知" prop="allFlag">
+            <el-radio-group v-model="form.allFlag">
+              <el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{
+                  item.label
+                }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="form.title" placeholder="请输入标题"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20">
+          <el-form-item prop="sort">
+            <template #label>排序
+              <tip content="越大越在前"/>
+            </template>
+            <el-input-number v-model="form.sort" placeholder="请输入排序 （越大越在前）"/>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12" class="mb20" v-if="form.allFlag !== '1'" >
+          <el-form-item prop="allFlag">
+            <template #label>范围
+              <tip content="不选群发全部"/>
+            </template>
+            <!-- 组织架构   -->
+            <org-selector v-model:orgList="form.userList" type="user" :multiple="true" />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="24" class="mb20">
+          <el-form-item label="内容" prop="content">
+            <editor v-if="visible" v-model:get-html="form.content" placeholder="请输入内容"></editor>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="SysMessageDialog">
+import orgSelector from '/@/components/OrgSelector/index.vue';
+import {useDict} from '/@/hooks/dict';
+import {useMessage} from "/@/hooks/message";
+import {addObj, getObj, putObj} from '/@/api/admin/message'
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+const {yes_no_type,message_type} = useDict('yes_no_type','message_type')
+// 提交表单数据
+const form = reactive({
+  id: '',
+  category: '0',
+  title: '',
+  content: '',
+  allFlag: '0',
+  sort: 0,
+  userList:[] as any,
+});
+
+// 定义校验规则
+const dataRules = ref({
+  category: [{required: true, message: '分类不能为空', trigger: 'blur'}],
+  title: [{required: true, message: '标题不能为空', trigger: 'blur'}],
+  content: [{required: true, message: '内容不能为空', trigger: 'blur'}],
+  allFlag: [{required: true, message: '实时通知（0否，1是）不能为空', trigger: 'blur'}],
+  sort: [{required: true, message: '排序 （越大越在前）不能为空', trigger: 'blur'}],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+  form.content = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取sysMessage信息
+  if (id) {
+    form.id = id
+    getSysMessageData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    form.id ? await putObj(form) : await addObj(form);
+    useMessage().success(form.id ? '修改成功' : '添加成功');
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getSysMessageData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj(id).then((res: any) => {
+    Object.assign(form, res.data)
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
--- a/src/views/tools/message/internal/index.vue
+++ b/src/views/tools/message/internal/index.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <el-row v-show="showSearch">
+      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+        <el-form-item label="标题" prop="title">
+          <el-input placeholder="请输入标题" v-model="state.queryForm.title"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="search" type="primary" @click="getDataList">
+            查询
+          </el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row>
+      <div class="mb8" style="width: 100%">
+        <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                   v-auth="'sys_message_add'">
+          新 增
+        </el-button>
+        <el-button plain :disabled="multiple" icon="Delete" type="primary"
+                   v-auth="'sys_message_del'" @click="handleDelete(selectObjs)">
+          删除
+        </el-button>
+        <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysMessage_export'"
+                       @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                       @queryTable="getDataList"></right-toolbar>
+      </div>
+    </el-row>
+    <el-table :data="state.dataList" v-loading="state.loading" border
+              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+              @selection-change="selectionChangHandle"
+              @sort-change="sortChangeHandle">
+      <el-table-column type="selection" width="40" align="center"/>
+      <el-table-column type="index" label="#" width="40"/>
+      <el-table-column prop="category" label="分类" show-overflow-tooltip width="100">
+        <template #default="scope">
+          <dict-tag :options="message_type" :value="scope.row.category"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="标题" show-overflow-tooltip/>
+      <el-table-column prop="allFlag" label="全部通知" show-overflow-tooltip>
+        <template #default="scope">
+          <dict-tag :options="yes_no_type" :value="scope.row.allFlag"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sendFlag" label="已发送" show-overflow-tooltip>
+        <template #default="scope">
+          <dict-tag :options="yes_no_type" :value="scope.row.sendFlag"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" show-overflow-tooltip/>
+      <el-table-column label="操作" width="300">
+        <template #default="scope">
+          <el-button icon="view" text type="primary" @click="contentRef.openDialog(scope.row)">详情
+          </el-button>
+          <el-button icon="BellFilled" text type="primary" v-auth="'sys_message_edit'"
+                     v-if="scope.row.sendFlag !== '1'"
+                     @click="handleSend(scope.row.id)">群发
+          </el-button>
+          <el-button icon="edit-pen" text type="primary" v-auth="'sys_message_edit'"
+                     v-if="scope.row.sendFlag === '0'"
+                     @click="formDialogRef.openDialog(scope.row.id)">编辑
+          </el-button>
+          <el-button icon="delete" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleDelete([scope.row.id])">删除
+          </el-button>
+          <el-button icon="List" text type="primary" v-auth="'sys_message_edit'"
+                     v-if="scope.row.sendFlag === '1'"
+                     @click="receiveRef.openDialog(scope.row.id)">接收情况
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>
+
+    <!-- 消息内容 -->
+    <news-content ref="contentRef"/>
+
+    <!-- 接收列表 -->
+    <receive ref="receiveRef"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="systemSysMessage">
+import {BasicTableProps, useTable} from "/@/hooks/table";
+import {delObjs, fetchList, sendObj} from "/@/api/admin/message";
+import {useMessage, useMessageBox} from "/@/hooks/message";
+import {useDict} from '/@/hooks/dict';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const Receive = defineAsyncComponent(() => import('./receive.vue'));
+const NewsContent = defineAsyncComponent(() => import('/@/views/home/news/content.vue'));
+// 定义查询字典
+const {message_type, yes_no_type} = useDict('message_type', 'yes_no_type')
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const receiveRef = ref()
+const contentRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/sysMessage/export', Object.assign(state.queryForm, {ids: selectObjs}), 'sysMessage.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({id}) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+
+// 推送给目标用户
+const handleSend = async (id: string) => {
+  try {
+    await useMessageBox().confirm('此操作将消息推送给目标用户');
+  } catch {
+    return;
+  }
+
+  try {
+    await sendObj({id: id});
+    getDataList();
+    useMessage().success('推送成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+</script>
--- a/src/views/tools/message/internal/receive.vue
+++ b/src/views/tools/message/internal/receive.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-drawer v-model="visible" size="40%">
+    <el-row>
+      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+        <el-form-item label="姓名" prop="name">
+          <el-input placeholder="请输入姓名" v-model="state.queryForm.name"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="search" type="primary" @click="getDataList">
+            查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%" @sort-change="sortChangeHandle">
+      <el-table-column type="index" label="序号" width="60"/>
+      <el-table-column prop="title" label="标题" show-overflow-tooltip/>
+      <el-table-column prop="username" label="用户名" show-overflow-tooltip/>
+      <el-table-column prop="name" label="姓名" show-overflow-tooltip/>
+      <el-table-column prop="readFlag" label="状态" show-overflow-tooltip>
+        <template #default="scope">
+          <el-tag>{{ scope.row.readFlag === '1' ? $t('msg.readed') : $t('msg.unread') }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="reviceDialog">
+import {BasicTableProps, useTable} from '/@/hooks/table';
+import {fetchUserMessageReadList} from '/@/api/admin/message';
+
+// 搜索变量
+const contentRef = ref()
+const visible = ref(false);
+//  table hook
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchUserMessageReadList,
+});
+const {getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle} = useTable(state);
+
+
+// 打开弹窗
+const openDialog = (msgId:string) => {
+  visible.value = true
+  state.queryForm.messageId = msgId
+  getDataList();
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
--- a/src/views/tools/message/sms/form.vue
+++ b/src/views/tools/message/sms/form.vue
@@ -0,0 +1,227 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+      <el-form-item label="业务名称" prop="configName">
+        <el-input v-model="form.configName" placeholder="请输入业务名称"/>
+      </el-form-item>
+      <el-form-item label="业务编码" prop="configKey">
+        <template #label>业务编码
+          <tip content="代码中通过业务编码发送"/>
+        </template>
+        <el-input v-model="form.configKey" placeholder="请输入业务编码"/>
+      </el-form-item>
+      <el-form-item label="云厂商" prop="configValue.supplier">
+        <el-select v-model="form.configValue.supplier" placeholder="请选择云厂商">
+          <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="AK" prop="configValue.accessKeyId">
+        <el-input v-model="form.configValue.accessKeyId" placeholder="请输入accessKey"/>
+      </el-form-item>
+      <el-form-item label="SK" prop="configValue.accessKeySecret">
+        <el-input v-model="form.configValue.accessKeySecret" placeholder="请输入accessKeySecret"/>
+      </el-form-item>
+      <el-form-item label="签名" prop="configValue.signature">
+        <el-input v-model="form.configValue.signature" placeholder="请输入模板签名"/>
+      </el-form-item>
+      <el-form-item label="模板ID" prop="configValue.templateId">
+        <el-input v-model="form.configValue.templateId" placeholder="请输入模板ID"/>
+      </el-form-item>
+      <el-form-item label="启用状态" prop="configStatus">
+        <el-radio-group v-model="form.configStatus">
+          <el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{
+              item.label
+            }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item prop="configValue.extParams">
+        <template #label>扩展参数
+          <tip content="参考 sms4j 文档配置json格式"/>
+        </template>
+        <json-editor
+            ref="jsonEditorRef"
+            v-model="form.configValue.extParams"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="SysMessageSmsDialog">
+// @ts-ignore
+import JsonEditor from '@axolo/json-editor-vue'
+import {useDict} from '/@/hooks/dict';
+import {useMessage} from "/@/hooks/message";
+import {addObj, getObj, putObj, validateExist} from '/@/api/admin/config'
+import {rule} from "/@/utils/validate";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+const {yes_no_type} = useDict('yes_no_type')
+
+// 云厂商
+const supplierList = ref([{
+  value: 'alibaba',
+  label: '阿里云'
+}, {
+  value: 'cloopen',
+  label: '容联云'
+}, {
+  value: 'ctyun',
+  label: '天翼云'
+}, {
+  value: 'emay',
+  label: '亿美软通'
+}, {
+  value: 'huawei',
+  label: '华为云短信'
+}, {
+  value: 'netease',
+  label: '网易云信'
+}, {
+  value: 'tencent',
+  label: '腾讯云短信'
+}, {
+  value: 'unisms',
+  label: '合一短信'
+}, {
+  value: 'yunpian',
+  label: '云片短信'
+}, {
+  value: 'zhutong',
+  label: '助通短信'
+}, {
+  value: 'dingzhong',
+  label: '鼎众短信'
+}, {
+  value: 'yunpian',
+  label: '联麓短信'
+}, {
+  value: 'qiniu',
+  label: '七牛云短信'
+}])
+
+// 提交表单数据
+const form = reactive({
+  configType: 'sms',
+  id: '',
+  configKey: '',
+  configName: '',
+  configValue: {
+    supplier: '',
+    accessKeyId: '',
+    accessKeySecret: '' || undefined,
+    signature: '',
+    templateId: '',
+    extParams: ''
+  },
+  configStatus: '1',
+});
+
+// 定义校验规则
+const dataRules = ref({
+  configName: [
+    {required: true, message: '业务名称不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  configKey: [
+    {required: true, message: '业务编码不能为空', trigger: 'blur'},
+    {validator: rule.validatorCapital, trigger: 'blur'},
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        validateExist(rule, value, callback, form.id !== '');
+      },
+      trigger: 'blur',
+    },
+  ],
+  'configValue.supplier': [
+    {required: true, message: '厂商不能为空', trigger: 'blur'}
+  ],
+  'configValue.accessKeyId': [
+    {required: true, message: 'AK 不能为空', trigger: 'blur'}
+  ],
+  'configValue.accessKeySecret': [
+    {required: true, message: 'SK 不能为空', trigger: 'blur'}
+  ],
+  'configValue.signature': [
+    {required: true, message: '签名不能为空', trigger: 'blur'}
+  ],
+  'configValue.templateId': [
+    {required: true, message: '模板不能为空', trigger: 'blur'}
+  ],
+  'configValue.extParams': [
+    {validator: rule.json, trigger: 'blur'}
+  ]
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取sysMessage信息
+  if (id) {
+    form.id = id
+    getConfigData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    if (form.configValue.accessKeySecret?.includes('******')) {
+      form.configValue.accessKeySecret = undefined
+    }
+    form.configValue = JSON.stringify(form.configValue) as any
+    form.id ? await putObj(form) : await addObj(form);
+    useMessage().success(form.id ? '修改成功' : '添加成功');
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getConfigData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj({id}).then((res: any) => {
+    Object.assign(form, res.data[0])
+    form.configValue = JSON.parse(res.data[0].configValue)
+    form.configValue.accessKeySecret = '******' as any
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog, supplierList
+});
+</script>
--- a/src/views/tools/message/sms/index.vue
+++ b/src/views/tools/message/sms/index.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <el-row v-show="showSearch">
+      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+        <el-form-item label="业务名称" prop="configName">
+          <el-input placeholder="请输入业务名称" v-model="state.queryForm.configName"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="search" type="primary" @click="getDataList">
+            查询
+          </el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row>
+      <div class="mb8" style="width: 100%">
+        <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                   v-auth="'sys_message_add'">
+          新 增
+        </el-button>
+        <el-button plain :disabled="multiple" icon="Delete" type="primary"
+                   v-auth="'sys_message_del'" @click="handleDelete(selectObjs)">
+          删除
+        </el-button>
+        <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysMessage_export'"
+                       @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                       @queryTable="getDataList"></right-toolbar>
+      </div>
+    </el-row>
+    <el-table :data="state.dataList" v-loading="state.loading" border
+              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+              @selection-change="selectionChangHandle"
+              @sort-change="sortChangeHandle">
+      <el-table-column type="selection" width="40" align="center"/>
+      <el-table-column type="index" label="#" width="40"/>
+      <el-table-column prop="configName" label="业务名称" show-overflow-tooltip/>
+      <el-table-column prop="configKey" label="业务标识" show-overflow-tooltip/>
+      <el-table-column prop="configValue.supplier" label="厂商" show-overflow-tooltip>
+        <template #default="scope">
+          {{ formDialogRef?.supplierList.find((item: any) => item.value === JSON.parse(scope.row.configValue).supplier)?.label}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="configStatus" label="启用状态" show-overflow-tooltip width="100">
+        <template #default="scope">
+          <dict-tag :options="yes_no_type" :value="scope.row.configStatus"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="300">
+        <template #default="scope">
+          <el-button icon="view" text type="primary" v-auth="'sys_message_edit'"
+                     @click="senderDialogRef.openDialog(scope.row.id)">测试
+          </el-button>
+          <el-button icon="edit-pen" text type="primary" v-auth="'sys_message_edit'"
+                     @click="formDialogRef.openDialog(scope.row.id)">编辑
+          </el-button>
+          <el-button icon="delete" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleDelete([scope.row.id])">删除
+          </el-button>
+          <el-button icon="Tickets" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleLog">日志
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>
+    <sender-dialog ref="senderDialogRef"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="systemSmsMessage">
+import {BasicTableProps, useTable} from "/@/hooks/table";
+import {delObjs, fetchList} from "/@/api/admin/config";
+import {useMessage, useMessageBox} from "/@/hooks/message";
+import {useDict} from '/@/hooks/dict';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const SenderDialog = defineAsyncComponent(() => import('./sender.vue'));
+// 定义查询字典
+const {yes_no_type} = useDict('yes_no_type')
+// 定义变量内容
+const formDialogRef = ref()
+const senderDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    configType: 'sms',
+    configName: ''
+  },
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/sysMessage/export', Object.assign(state.queryForm, {ids: selectObjs}), 'sysMessage.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({id}) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+
+// 跳转日志
+const router = useRouter();
+const handleLog = () => {
+  router.push({path: '/admin/log/index', query: {serviceId: 'sms'}})
+}
+</script>
--- a/src/views/tools/message/sms/sender.vue
+++ b/src/views/tools/message/sms/sender.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog title="短信发送测试" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+      <el-form-item label="业务名称" prop="configName">
+        <el-input v-model="form.configName" placeholder="请输入业务名称" disabled/>
+      </el-form-item>
+      <el-form-item label="业务编码" prop="configKey">
+        <template #label>业务编码
+          <tip content="代码中通过业务编码发送"/>
+        </template>
+        <el-input v-model="form.configKey" placeholder="请输入业务编码" disabled/>
+      </el-form-item>
+      <el-form-item label="接收手机号" prop="mobiles">
+        <tag-list v-model="form.mobiles" buttonText="+手机号"/>
+      </el-form-item>
+      <el-form-item prop="data">
+        <template #label>参数
+          <tip content="参考短信模板参数配置  "/>
+        </template>
+        <json-editor
+            ref="jsonEditorRef"
+            v-model="form.data"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="SmsSenderDialog">
+// @ts-ignore
+import JsonEditor from '@axolo/json-editor-vue'
+import {useMessage} from "/@/hooks/message";
+import {getObj} from '/@/api/admin/config'
+import {sendSms} from '/@/api/admin/message'
+import {rule} from "/@/utils/validate";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+// 提交表单数据
+const form = reactive({
+  configType: 'sms',
+  configKey: 'sms',
+  configName: '',
+  mobiles: [],
+  bizCode: '',
+  id: '',
+  params: {},
+  data: `{
+    "code": "1234"
+}`
+});
+
+// 定义校验规则
+const dataRules = ref({
+  data: [
+    {required: true, message: '参数名称不能为空', trigger: 'blur'}, {validator: rule.json, trigger: 'blur'}
+  ],
+  mobiles: [
+    {required: true, message: '手机号不能为空', trigger: 'blur'}, {validator: rule.validatePhone, trigger: 'blur'},
+  ]
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取sysMessage信息
+  if (id) {
+    form.id = id
+    getConfigData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    form.params = JSON.parse(form.data)
+    await sendSms(form)
+    useMessage().success('发送成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    form.data = JSON.stringify(form.params)
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getConfigData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj({id}).then((res: any) => {
+    Object.assign(form, res.data[0])
+    form.bizCode = form.configKey
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
--- a/src/views/tools/message/webhook/form.vue
+++ b/src/views/tools/message/webhook/form.vue
@@ -0,0 +1,170 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+      <el-form-item label="业务名称" prop="configName">
+        <el-input v-model="form.configName" placeholder="请输入业务名称"/>
+      </el-form-item>
+      <el-form-item label="业务编码" prop="configKey">
+        <template #label>业务编码
+          <tip content="代码中通过业务编码发送"/>
+        </template>
+        <el-input v-model="form.configKey" placeholder="请输入业务编码"/>
+      </el-form-item>
+      <el-form-item label="云厂商" prop="configValue.supplier">
+        <el-select v-model="form.configValue.supplier" placeholder="请选择云厂商">
+          <el-option v-for="item in supplierList" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Token ID" prop="configValue.tokenId">
+        <el-input v-model="form.configValue.tokenId" placeholder="请输入Token ID"/>
+      </el-form-item>
+      <el-form-item label="签名" prop="configValue.sign">
+        <el-input v-model="form.configValue.sign" placeholder="请输入签名"/>
+      </el-form-item>
+      <el-form-item label="启用状态" prop="configStatus">
+        <el-radio-group v-model="form.configStatus">
+          <el-radio :key="index" :label="item.value" border v-for="(item, index) in yes_no_type">{{
+              item.label
+            }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="SysMessageHookDialog">
+import {useDict} from '/@/hooks/dict';
+import {useMessage} from "/@/hooks/message";
+import {addObj, getObj, putObj, validateExist} from '/@/api/admin/config'
+import {rule} from "/@/utils/validate";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+const {yes_no_type} = useDict('yes_no_type')
+
+// 云厂商
+const supplierList = ref([{
+  value: 'ding_talk',
+  label: '钉钉'
+}, {
+  value: 'byte_talk',
+  label: '飞书'
+}, {
+  value: 'we_talk',
+  label: '企微'
+}])
+
+// 提交表单数据
+const form = reactive({
+  configType: 'webhook',
+  id: '',
+  configKey: '',
+  configName: '',
+  configValue: {
+    tokenId: '' || undefined,
+    sign: '' || undefined,
+    supplier: '',
+  },
+  configStatus: '1',
+});
+
+// 定义校验规则
+const dataRules = ref({
+  configName: [
+    {required: true, message: '业务名称不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  configKey: [
+    {required: true, message: '业务编码不能为空', trigger: 'blur'},
+    {validator: rule.validatorCapital, trigger: 'blur'},
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        validateExist(rule, value, callback, form.id !== '');
+      },
+      trigger: 'blur',
+    },
+  ],
+  'configValue.supplier': [
+    {required: true, message: '厂商不能为空', trigger: 'blur'}
+  ],
+  'configValue.tokenId': [
+    {required: true, message: 'Token ID  不能为空', trigger: 'blur'}
+  ],
+})
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取sysMessage信息
+  if (id) {
+    form.id = id
+    getConfigData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    if (form.configValue.tokenId?.includes('******')) {
+      form.configValue.tokenId = undefined
+    }
+
+    if (form.configValue.sign?.includes('******')) {
+      form.configValue.sign = undefined
+    }
+    form.configValue = JSON.stringify(form.configValue) as any
+    form.id ? await putObj(form) : await addObj(form);
+    useMessage().success(form.id ? '修改成功' : '添加成功');
+    visible.value = false;
+    emit('refresh');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getConfigData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj({id}).then((res: any) => {
+    Object.assign(form, res.data[0])
+    form.configValue = JSON.parse(res.data[0].configValue)
+    form.configValue.tokenId = '******' as any
+    form.configValue.sign = '******' as any
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog, supplierList
+});
+</script>
--- a/src/views/tools/message/webhook/index.vue
+++ b/src/views/tools/message/webhook/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <el-row v-show="showSearch">
+      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+        <el-form-item label="业务名称" prop="configName">
+          <el-input placeholder="请输入业务名称" v-model="state.queryForm.configName"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="search" type="primary" @click="getDataList">
+            查询
+          </el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row>
+      <div class="mb8" style="width: 100%">
+        <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                   v-auth="'sys_message_add'">
+          新 增
+        </el-button>
+        <el-button plain :disabled="multiple" icon="Delete" type="primary"
+                   v-auth="'sys_message_del'" @click="handleDelete(selectObjs)">
+          删除
+        </el-button>
+        <right-toolbar v-model:showSearch="showSearch" :export="'admin_sysMessage_export'"
+                       @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                       @queryTable="getDataList"></right-toolbar>
+      </div>
+    </el-row>
+    <el-table :data="state.dataList" v-loading="state.loading" border
+              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+              @selection-change="selectionChangHandle"
+              @sort-change="sortChangeHandle">
+      <el-table-column type="selection" width="40" align="center"/>
+      <el-table-column type="index" label="#" width="40"/>
+      <el-table-column prop="configName" label="业务名称" show-overflow-tooltip/>
+      <el-table-column prop="configKey" label="业务标识" show-overflow-tooltip/>
+      <el-table-column prop="configValue.supplier" label="厂商" show-overflow-tooltip>
+        <template #default="scope">
+          {{ formDialogRef?.supplierList.find((item: any) => item.value === JSON.parse(scope.row.configValue).supplier)?.label}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="configStatus" label="启用状态" show-overflow-tooltip width="100">
+        <template #default="scope">
+          <dict-tag :options="yes_no_type" :value="scope.row.configStatus"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="300">
+        <template #default="scope">
+          <el-button icon="view" text type="primary" v-auth="'sys_message_edit'"
+                     @click="senderDialogRef.openDialog(scope.row.id)">测试
+          </el-button>
+          <el-button icon="edit-pen" text type="primary" v-auth="'sys_message_edit'"
+                     @click="formDialogRef.openDialog(scope.row.id)">编辑
+          </el-button>
+          <el-button icon="delete" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleDelete([scope.row.id])">删除
+          </el-button>
+          <el-button icon="Tickets" text type="primary" v-auth="'sys_message_del'"
+                     @click="handleLog">日志
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
+
+    <!-- 编辑、新增  -->
+    <form-dialog ref="formDialogRef" @refresh="getDataList(false)"/>
+    <sender-dialog ref="senderDialogRef"/>
+  </div>
+</template>
+
+<script setup lang="ts" name="systemSysHookMessage">
+import {BasicTableProps, useTable} from "/@/hooks/table";
+import {delObjs, fetchList} from "/@/api/admin/config";
+import {useMessage, useMessageBox} from "/@/hooks/message";
+import {useDict} from '/@/hooks/dict';
+
+// 引入组件
+const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const SenderDialog = defineAsyncComponent(() => import('./sender.vue'));
+const senderDialogRef = ref()
+
+// 定义查询字典
+const {yes_no_type} = useDict('yes_no_type')
+// 定义变量内容
+const formDialogRef = ref()
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    configType: 'webhook',
+    configName: ''
+  },
+  pageList: fetchList
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+  // 清空搜索条件
+  queryRef.value?.resetFields()
+  // 清空多选
+  selectObjs.value = []
+  getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+  downBlobFile('/admin/sysMessage/export', Object.assign(state.queryForm, {ids: selectObjs}), 'sysMessage.xlsx')
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+  selectObjs.value = objs.map(({id}) => id);
+  multiple.value = !objs.length;
+};
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+  try {
+    await useMessageBox().confirm('此操作将永久删除');
+  } catch {
+    return;
+  }
+
+  try {
+    await delObjs(ids);
+    getDataList();
+    useMessage().success('删除成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  }
+};
+
+// 跳转日志
+const router = useRouter();
+const handleLog = () => {
+  router.push({path: '/admin/log/index', query: {serviceId: 'webhook'}})
+}
+</script>
--- a/src/views/tools/message/webhook/sender.vue
+++ b/src/views/tools/message/webhook/sender.vue
@@ -0,0 +1,175 @@
+<template>
+  <el-dialog title="WebHook推送" v-model="visible"
+             :close-on-click-modal="false" draggable>
+    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="100px" v-loading="loading">
+      <el-form-item label="业务名称" prop="configName">
+        <el-input v-model="form.configName" placeholder="请输入业务名称" disabled/>
+      </el-form-item>
+      <el-form-item label="业务编码" prop="configKey">
+        <template #label>业务编码
+          <tip content="代码中通过业务编码发送"/>
+        </template>
+        <el-input v-model="form.configKey" placeholder="请输入业务编码" disabled/>
+      </el-form-item>
+      <el-form-item label="消息类型" prop="messageType">
+        <el-select v-model="form.messageType" placeholder="请选择消息类型">
+          <el-option v-for="item in filteredMessageTypeList" :key="item.value" :label="item.label" :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标题" prop="messageTitle" v-if="form.messageType === 'link' || form.messageType === 'markdown'">
+        <el-input v-model="form.messageTitle"/>
+      </el-form-item>
+      <el-form-item label="内容" prop="messageContent">
+        <el-input type="textarea" rows="5" v-model="form.messageContent"/>
+      </el-form-item>
+      <el-form-item label="消息链接" prop="messageUrl" v-if="form.messageType === 'link'">
+        <el-input v-model="form.messageUrl"/>
+      </el-form-item>
+      <el-form-item label="图片链接" prop="picUrl" v-if="form.messageType === 'link'">
+        <el-input v-model="form.picUrl"/>
+      </el-form-item>
+      <el-form-item label="通知全部" prop="noticeAll">
+        <el-radio-group v-model="form.noticeAll">
+          <el-radio label="true" border>是</el-radio>
+          <el-radio label="false" border>否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="提醒用户" prop="phones" v-if="form.noticeAll === 'false'">
+        <tag-list buttonText="+手机号" v-model="form.phoneList"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="visible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+        </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="HookSenderDialog">
+import {useMessage} from "/@/hooks/message";
+import {getObj} from '/@/api/admin/config'
+import {sendHook} from '/@/api/admin/message'
+import {rule, validateNull} from "/@/utils/validate";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+
+const messageTypeList = ref([
+  {
+    value: 'text',
+    label: '文本'
+  }, {
+    value: 'markdown',
+    label: 'Markdown'
+  }, {
+    value: 'link',
+    label: '链接'
+  }])
+
+
+// 提交表单数据
+const form = reactive({
+  configType: 'webhook',
+  configKey: 'webhook',
+  configName: '',
+  configValue: {
+    supplier: '',
+  },
+  bizCode: '',
+  messageType: 'text',
+  id: '',
+  messageTitle: '',
+  messageContent: '',
+  noticeAll: 'false',
+  messageUrl: '',
+  picUrl: '',
+  phoneList: [],
+});
+
+// 定义校验规则
+const dataRules = ref({
+  messageType: [
+    {required: true, message: '消息类型不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  messageTitle: [
+    {required: true, message: '标题不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  messageContent: [
+    {required: true, message: '内容不能为空', trigger: 'blur'},
+  ],
+  messageUrl: [
+    {required: true, message: '手机号不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+  picUrl: [
+    {required: true, message: '图片地址不能为空', trigger: 'blur'}, {validator: rule.overLength, trigger: 'blur'},
+  ],
+})
+
+// 过滤消息类型 , 微信不支持链接消息
+const filteredMessageTypeList = computed(() => {
+  if (form.configValue.supplier === 'we_talk') {
+    return messageTypeList.value.filter(type => type.value !== 'link');
+  }
+  return messageTypeList.value;
+});
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取sysMessage信息
+  if (id) {
+    form.id = id
+    getConfigData(id)
+  }
+};
+
+// 提交
+const onSubmit = async () => {
+  const valid = await dataFormRef.value.validate().catch(() => {
+  });
+  if (!valid) return false;
+
+  try {
+    loading.value = true;
+    await sendHook(form)
+    useMessage().success('发送成功');
+  } catch (err: any) {
+    useMessage().error(err.msg);
+  } finally {
+    visible.value = false;
+    loading.value = false;
+  }
+};
+
+
+// 初始化表单数据
+const getConfigData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  getObj({id}).then((res: any) => {
+    Object.assign(form, res.data[0])
+    form.configValue = JSON.parse(form.configValue)
+    form.bizCode = form.configKey
+  }).finally(() => {
+    loading.value = false
+  })
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
--- a/src/views/tools/route/form.vue
+++ b/src/views/tools/route/form.vue
@@ -0,0 +1,359 @@
+<template>
+  <el-drawer title="路由配置" size="40%" v-model="visible">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基础模式" name="first">
+        <template #label>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+               stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"/>
+          </svg>
+          基础模式
+        </template>
+        <el-form :model="formData" :rules="dataRules" label-width="100px" ref="dataFormRef" v-loading="loading">
+          <el-form-item label="路由ID" prop="routeId">
+            <el-input clearable v-model="formData.routeId"></el-input>
+          </el-form-item>
+          <el-form-item label="路由名称" prop="routeName">
+            <el-input clearable v-model="formData.routeName"></el-input>
+          </el-form-item>
+          <el-form-item label="路由前缀" prop="path">
+            <template #label>
+              路由前缀
+              <tip content="访问微服务的公共前缀 "/>
+            </template>
+            <el-input clearable v-model="formData.path">
+              <template #prepend>/</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="目标服务" prop="serviceName">
+            <template #label>
+              目标服务
+              <tip content="注册到注册中心对应的服务名称 "/>
+            </template>
+            <el-input clearable v-model="formData.serviceName"></el-input>
+          </el-form-item>
+          <el-collapse v-model="collapseActive">
+            <el-collapse-item name="1" title="安全属性">
+              <template #title>
+                <el-icon class="header-icon">
+                  <info-filled/>
+                </el-icon>
+                高级属性
+              </template>
+              <el-form-item label="允许跨域" prop="cors">
+                <el-switch v-model="formData.cors" :active-value="true" :inactive-value="false"></el-switch>
+              </el-form-item>
+              <el-form-item label="超时时间" prop="timeout">
+                <el-input type="number" clearable v-model="formData.timeout">
+                  <template #suffix>毫秒</template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="IP限制" prop="replenishRate">
+                <template #label>
+                  IP限制
+                  <tip content="每个IP每秒最大请求多少次 "/>
+                </template>
+                <el-input type="number" clearable v-model="formData.replenishRate">
+                  <template #suffix>次/秒</template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="总数限制" prop="timeout">
+                <template #label>
+                  总数限制
+                  <tip content="当前服务器每秒最大的请求数量"/>
+                </template>
+                <el-input type="number" :min="1000" clearable v-model="formData.burstCapacity">
+                  <template #suffix>次/秒</template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="优先级" prop="sortOrder">
+                <el-input type="number" clearable v-model="formData.sortOrder"></el-input>
+              </el-form-item>
+            </el-collapse-item>
+          </el-collapse>
+
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="编码模式" name="second">
+        <template #label>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+               stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/>
+          </svg>
+          编码模式
+        </template>
+        <json-editor
+            ref="jsonEditorRef"
+            v-model="jsonData"
+            codec
+            @change="handleJsonChange"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <div class="flex items-center justify-center mt-4">
+      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" name="routeForm" setup>
+// @ts-ignore
+import JsonEditor from '@axolo/json-editor-vue'
+
+import {addObj, fetchList, validateExist} from '/@/api/admin/route';
+import {useI18n} from 'vue-i18n';
+import {useMessage} from '/@/hooks/message';
+import {rule} from "/@/utils/validate";
+import Tip from "/@/components/Tip/index.vue";
+
+const emit = defineEmits(['refresh']);
+const {t} = useI18n();
+const activeName = ref('first')
+const visible = ref(false);
+const loading = ref(false);
+const jsonData = ref({});
+const dataFormRef = ref();
+const collapseActive = ref('1');
+
+const formData = ref({
+  routeId: '',
+  routeName: '',
+  path: '',
+  sortOrder: 0,
+  serviceName: '',
+  timeout: 30000,
+  burstCapacity: 100000,
+  replenishRate: 10000,
+  cors: false,
+});
+// 初始化数据
+const demoData = reactive({
+  routeId: new Date().getTime(),
+  routeName: '路由名称',
+  predicates: [{args: {_genkey_0: '/路由前缀/**'}, name: 'Path'}],
+  filters: [],
+  uri: 'lb://服务名称',
+  sortOrder: 0,
+  metadata: {},
+});
+
+// 定义校验规则
+const dataRules = ref({
+  routeId: [
+    {required: true, message: '路由标识不能为空', trigger: 'blur'},
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        validateExist(rule, value, callback, selectRouteId.value);
+      },
+      trigger: 'blur',
+    },
+    {min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur'},
+  ],
+  routeName: [
+    {required: true, message: '路由名称不能为空', trigger: 'blur'},
+    {min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur'},
+  ],
+  path: [
+    {required: true, message: '路由前缀不能为空', trigger: 'blur'},
+    {validator: rule.validatorLower, trigger: 'blur'},
+    {min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur'},
+  ],
+  serviceName: [
+    {required: true, message: '目标服务不能为空', trigger: 'blur'},
+    {min: 3, max: 64, message: '长度在 3 到 64 个字符', trigger: 'blur'},
+  ],
+  sortOrder: [
+    {required: true, message: '排序值不能为空', trigger: 'blur'}
+  ],
+});
+
+// 监听 formData 的变化并同步更新 jsonData
+watch(formData, (val) => {
+  jsonData.value = {
+    routeId: val.routeId,
+    routeName: val.routeName,
+    sortOrder: val.sortOrder,
+    predicates: [{args: {_genkey_0: `/${val.path}/**`}, name: 'Path'}],
+    uri: `lb://${val.serviceName}`,
+    metadata: {
+      "response-timeout": val.timeout,
+      ...(val.cors ? {
+        cors: {
+          "allowedOrigins": "*",
+          "allowedMethods": "*",
+          "allowedHeaders": "*",
+          "allowedCredentials": true
+        }
+      } : {})
+    },
+    filters: [
+      {
+        "name": "RequestRateLimiter", "args": {
+          "redis-rate-limiter.replenishRate": val.replenishRate
+          , "redis-rate-limiter.burstCapacity": val.burstCapacity
+          , "key-resolver": "#{@remoteAddrKeyResolver}"
+        }
+      }
+    ]
+  };
+}, {deep: true});
+
+/**
+ * 处理 json 数据变化
+ * @param val
+ */
+const handleJsonChange = (val: any) => {
+  formData.value.routeId = val.routeId;
+  formData.value.routeName = val.routeName;
+  formData.value.sortOrder = val.sortOrder;
+  // 提取 属性为 name:path 的 path 字段
+  val.predicates.forEach((item: any) => {
+    if (item.name === 'Path') {
+      // 提取 path 字段 /路由前缀/**  只需要路由前缀 不带/
+      formData.value.path = item.args._genkey_0.replace('/**', '').replace('/', '');
+    }
+  });
+
+  formData.value.serviceName = val.uri.replace('lb://', '');
+  // 提出 filters 中的数据 给 formData replenishRate burstCapacity 赋值
+  val.filters.forEach((item: any) => {
+    if (item.name === 'RequestRateLimiter') {
+      formData.value.replenishRate = item.args['redis-rate-limiter.replenishRate'];
+      formData.value.burstCapacity = item.args['redis-rate-limiter.burstCapacity'];
+    }
+  });
+
+  // 提取metadata中的timeout字段
+  formData.value.timeout = val.metadata['response-timeout'];
+
+  // 检查 metadata 中是否有 cors 配置，并设置 formData.cors
+  formData.value.cors = !!val.metadata['cors'];
+
+  jsonData.value = val;
+}
+
+/**
+ * 校验 json 数据
+ * @param data
+ */
+const validateJsonData = (data: any): boolean => {
+
+  if (!data.predicates || !Array.isArray(data.predicates) || data.predicates.length === 0) {
+    useMessage().error('路由前缀配置不合法');
+    return false;
+  }
+
+  // 检查是否存在 name 为 'Path' 的 predicate
+  const pathPredicate = data.predicates.find((p: any) => p.name === 'Path');
+  if (!pathPredicate) {
+    useMessage().error('路由配置中必须包含 Path 规则');
+    return false;
+  }
+
+  if (!data.uri || typeof data.uri !== 'string' || !data.uri.startsWith('lb://')) {
+    useMessage().error('目标服务不合法');
+    return false;
+  }
+  // redis-rate-limiter.burstCapacity 不能小于 1000
+  if (data.filters && Array.isArray(data.filters)) {
+    const rateLimiter = data.filters.find((f: any) => f.name === 'RequestRateLimiter');
+    if (rateLimiter) {
+      if (rateLimiter.args['redis-rate-limiter.burstCapacity'] < 1000) {
+        useMessage().error('总数限制不能小于1000');
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const submit = async () => {
+  // 设置 loading 的值为 true
+  loading.value = true;
+  try {
+    const valid = await dataFormRef.value.validate().catch(() => {
+    });
+    if (!valid) return false;
+
+
+    // 添加对 jsonData 的校验
+    if (!validateJsonData(jsonData.value)) {
+      loading.value = false;
+      return false;
+    }
+
+    // 调用 addObj 方法向服务器发送请求，传入 jsonData 的值
+    await addObj(jsonData.value);
+    // 调用 useMessage().success 方法，显示成功的提示信息
+    useMessage().success(t('common.optSuccessText'));
+    // 设置 visible 的值为 false
+    visible.value = false;
+  } catch (err: any) {
+    // 调用 useMessage().error 方法，显示错误的提示信息
+    useMessage().error(err.msg);
+  } finally {
+    // 设置 loading 的值为 false
+    loading.value = false;
+    // 触发 refresh 事件
+    emit('refresh');
+  }
+};
+
+
+/**
+ * 获取数据
+ * @param {string} id - 路径ID
+ * @returns {Promise<Array<Object>>} - 返回一个包含对象的数组
+ */
+const getData = async (id: string) => {
+  // 获取数据
+  const response = await fetchList({routeId: id});
+  const result = response.data[0];
+
+  // 解析 predicates 字段
+  if (result.predicates) {
+    result.predicates = JSON.parse(result.predicates);
+  }
+
+  // 解析 filters 字段
+  if (result.filters) {
+    result.filters = JSON.parse(result.filters);
+  }
+
+  // 解析 metadata 字段
+  if (result.metadata) {
+    result.metadata = JSON.parse(result.metadata);
+  }
+
+  return result;
+};
+
+const selectRouteId = ref()
+
+const openDialog = async (id?: string) => {
+  selectRouteId.value = id;
+  visible.value = true;
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  if (id) {
+    await getData(id).then((data) => {
+      jsonData.value = data;
+      // parse data to formData
+      handleJsonChange(data);
+    });
+  } else {
+    jsonData.value = demoData;
+  }
+  return;
+};
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
--- a/src/views/tools/route/index.vue
+++ b/src/views/tools/route/index.vue
@@ -0,0 +1,114 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row>
+				<div class="mt-4" style="width: 100%">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="routeFormRef.openDialog()">
+						{{ $t('common.addBtn') }}
+					</el-button>
+				</div>
+			</el-row>
+			<el-scrollbar class="mt-2">
+				<div class="flex flex-col">
+					<div class="grid grid-cols-1 gap-4 mt-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+						<div
+							v-for="item in jsonData"
+							:key="item.routeId"
+							class="relative flex items-start p-4 shadow-lg rounded-xl bg-gray-100 dark:bg-[#1d1e1f] hover:bg-white dark:hover:bg-[#303030] hover:scale-105 hover:shadow-lg transition-all duration-200"
+							@click="routeFormRef.openDialog(item.routeId)"
+						>
+							<div class="flex items-center justify-center w-12 h-12 border border-blue-100 rounded-full bg-blue-50">
+								<svg
+									t="1698042326978"
+									class="icon"
+									viewBox="0 0 1024 1024"
+									version="1.1"
+									xmlns="http://www.w3.org/2000/svg"
+									p-id="5403"
+									width="32"
+									height="32"
+								>
+									<path d="M77 403.4v228.5c1.5 93.7 195.7 183.5 435 183.5s433.4-89.8 435-183.5V403.4H77z" fill="#1B9BDB" p-id="5404"></path>
+									<path
+										d="M947 402.7c0 99.4-194.8 194-435 194s-435-94.6-435-194 194.8-180 435-180 435 80.5 435 180z"
+										fill="#3ED6FF"
+										p-id="5405"
+									></path>
+									<path
+										d="M474.1 311.4H503l0.1 63.2h29.5l-0.7-63.2h28.9l-43.7-75.1zM533 417.2h-29.9l0.1 73.9h-30.6l46.2 75.2 45.5-75.2h-30.6zM654.5 380.9l-1.4-30-72.1 45 76.4 45.1-1.4-30h126.2l-2.6-30.1zM381.1 380.9h-125l-2.3 30.1H380l-1.1 30 75.9-45.1-72.5-45z"
+										fill="#FFFFFF"
+										p-id="5406"
+									></path>
+								</svg>
+							</div>
+							<div class="ml-4">
+								<h2 class="font-semibold">{{ item.routeName }}</h2>
+								<p class="mt-2 text-sm text-gray-500">{{ item.routeId }}</p>
+							</div>
+							<div class="absolute top-0 right-0 flex items-center justify-center w-12 h-12" @click.stop="deleteRoute(item.routeId)">
+								<el-icon>
+									<Delete />
+								</el-icon>
+							</div>
+						</div>
+					</div>
+				</div>
+			</el-scrollbar>
+			<route-form ref="routeFormRef" @refresh="getData" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" name="routeConfig" setup>
+import { deleteObj, fetchList } from '/@/api/admin/route';
+import type { QueryLanguageId } from 'vue3-ts-jsoneditor';
+import { useMessage } from '/@/hooks/message';
+import { useI18n } from 'vue-i18n';
+
+const RouteForm = defineAsyncComponent(() => import('./form.vue'));
+
+const { t } = useI18n();
+const jsonData = ref<any[]>([]);
+const routeFormRef = ref();
+
+const deleteRoute = (id: string) => {
+	deleteObj(id)
+		.then(() => {
+			useMessage().success(t('common.optSuccessText'));
+		})
+		.finally(() => {
+			getData();
+		});
+};
+
+const getData = async () => {
+	const { data } = await fetchList();
+
+	for (let i = 0; i < data.length; i++) {
+		const route = data[i];
+		if (route.predicates) {
+			const predicates = route.predicates;
+			route.predicates = JSON.parse(predicates);
+		}
+		if (route.filters) {
+			const filters = route.filters;
+			route.filters = JSON.parse(filters);
+		}
+	}
+	jsonData.value = data;
+};
+
+onMounted(() => {
+	getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.copy_btn {
+	position: absolute;
+	top: 60px;
+	right: 20px;
+	z-index: 9;
+	color: rgb(255, 255, 255);
+}
+</style>