diff --git a/src/api/modelMessage/messageSystem.js b/src/api/modelMessage/messageSystem.js
index 45b32ca467cc64fb9fc58ed1a7839b5f3645042d..e0b3677e1fb8f5a0f83179fa366785fb2a970063 100644
--- a/src/api/modelMessage/messageSystem.js
+++ b/src/api/modelMessage/messageSystem.js
@@ -17,16 +17,6 @@ export function getMessageSystem(messageId) {
   })
 }
 
-// 新增消息管理
-export function addMessage(data) {
-  return request({
-    url: '/modelMessage/messageSystem',
-    method: 'post',
-    data: data,
-    headers: { 'isRepeatSubmit': false }
-  })
-}
-
 // 修改消息管理
 export function updateMessageSystem(data) {
   return request({
@@ -44,32 +34,24 @@ export function delMessageSystem(messageId) {
   })
 }
 
-// 查询系统用户收件人
-export function selectUser(sendMode) {
-  const url = '/modelMessage/messageSystem/selectUser' + (sendMode ? `?sendMode=${encodeURIComponent(sendMode)}` : '');
-  return request({
-    url: url,
-    method: 'get'
-  });
-}
-
-// 查询角色信息
-export function selectRole() {
-  return request({
-    url: '/modelMessage/messageSystem/selectRole',
-    method: 'get'
-  })
-}
+// 统一查询系统资源信息（角色、部门、用户）
+export function getSystemResource(type, id, sendMode) {
+  const params = { type };
+  if (id !== null && id !== undefined) {
+    params.id = id;
+  }
+  if (sendMode !== null && sendMode !== undefined) {
+    params.sendMode = sendMode;
+  }
 
-// 查询部门信息
-export function selectDept() {
   return request({
-    url: '/modelMessage/messageSystem/selectDept',
-    method: 'get'
-  })
+    url: '/modelMessage/messageSystem/systemResource',
+    method: 'get',
+    params: params
+  });
 }
 
-//消息状态
+//点击信息详情状态调整为已读
 export function getUpdate(messageId) {
   return request({
     url: '/modelMessage/messageSystem/' + messageId,
@@ -77,30 +59,6 @@ export function getUpdate(messageId) {
   })
 }
 
-//根据角色ID获取所有符合条件的用户信息。
-export function getUsersByRoleId(roleId) {
-  return request({
-    url: 'modelMessage/messageSystem/getUsersByRole/'+roleId,
-    method: 'get'
-  })
-}
-
-//根据部门ID获取所有符合条件的用户信息。
-export function getUserNamesByDeptId(deptId) {
-  return request({
-    url: 'modelMessage/messageSystem/getUserNameByDeptId/'+deptId,  
-    method: 'get'
-  })
-}
-
-// 查询模版签名
-export function selecTemplates() {
-  return request({
-    url: '/modelMessage/messageSystem/selecTemplates',
-    method: 'get'
-  })
-}
-
 // 批量发送消息
 export function batchAddMessage(data) {
   return request({
diff --git a/src/api/modelMessage/template.js b/src/api/modelMessage/template.js
index 4c077915d72444d1b47aa5ff205a6724fdb9122f..00af09fd21e2217f5d9bb1ce94571cffd658c0ba 100644
--- a/src/api/modelMessage/template.js
+++ b/src/api/modelMessage/template.js
@@ -42,3 +42,11 @@ export function delTemplate(templateId) {
     method: 'delete'
   })
 }
+
+// 查询模版签名
+export function selecTemplates() {
+  return request({
+    url: '/modelMessage/template/selecTemplates',
+    method: 'get'
+  })
+}
\ No newline at end of file
diff --git a/src/api/modelMessage/variable.js b/src/api/modelMessage/variable.js
index 048db5067b96f7208d327e98844a909e62c5aba4..76ceb3745af4f9fb766bb42d9222959113e03be7 100644
--- a/src/api/modelMessage/variable.js
+++ b/src/api/modelMessage/variable.js
@@ -50,15 +50,3 @@ export function selectVariable() {
     method: 'get'
   })
 }
-
-// 根据变量类型生成不同的变量内容
-export function generateVariableContent(variableType, customLength) {
-  return request({
-    url: '/modelMessage/variable/generate',
-    method: 'get',
-    params: {
-      variableType,
-      customLength: customLength || undefined // 可选参数
-    }
-  })
-}
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/addMessage.vue b/src/views/modelMessage/messageSystem/addMessage.vue
deleted file mode 100644
index ec554644ae5e7ba490acc2123f131a3bc5a6fe4a..0000000000000000000000000000000000000000
--- a/src/views/modelMessage/messageSystem/addMessage.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-  <el-dialog :title="title" v-model="dialogVisible" width="500px" append-to-body @closed="handleClosed" class="custom-dialog">
-    <el-form ref="messageSystemFormRef" :model="form" :rules="rules" label-width="80px" class="custom-form" v-loading="loading" element-loading-text="信息正在发送中...">
-      <el-form-item label="标题" prop="messageTitle">
-        <el-input v-model="form.messageTitle" placeholder="请输入标题" />
-      </el-form-item>
-      <el-form-item label="发送方式" prop="sendMode">
-        <el-select v-model="form.sendMode" placeholder="请选择发送方式" clearable style="width: 100%" @change="fetchRecipients">
-          <el-option v-for="dict in send_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="号码" prop="code" v-if="isCodeFieldVisible">
-        <el-input v-model="form.code" placeholder="请输入手机号或者邮箱" disabled />
-      </el-form-item>
-      <el-form-item label="内容类型" prop="contentType">
-        <el-radio-group v-model="form.contentType" @change="handleContentTypeChange">
-          <el-radio value="template">模版签名</el-radio>
-          <el-radio value="content">消息内容</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="模版签名" prop="messageContent" v-if="form.contentType === 'template'">
-        <el-select v-model="form.messageContent" placeholder="请选择模版签名" style="width: 100%;" @change="handleTemplateChange">
-          <el-option v-for="temp in templates" :key="temp.templateId" :label="temp.templateCode" :value="temp.templateCode" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="消息内容" prop="messageContent" v-if="form.contentType === 'content'">
-        <el-input v-model="form.messageContent" type="textarea" placeholder="(手机号内容格式必须为：模板名?模板参数=值)" @input="handleContentInput"  maxlength="100" show-word-limit/>
-      </el-form-item>
-      <el-form-item label="消息类型" prop="messageType">
-        <el-select v-model="form.messageType" placeholder="请选择消息类型" clearable >
-          <el-option v-for="dict in message_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="收件人类型" prop="recipientType" label-width="92px">
-        <el-radio-group v-model="form.recipientType" @change="fetchRecipients">
-          <el-radio v-for="type in recipientTypes" :key="type.value" :value="type.value">{{ type.label }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item v-if="hasSelectedOptions" :label="selectedLabel" prop="messageRecipient">
-        <div v-if="form.recipientType === 'dept'" style="width: 100%;">
-          <el-tree-select v-model="form.messageRecipient" :data="depts" placeholder="请选择部门" clearable
-            :props="{ value: 'deptId', label: 'deptName', children: 'children' }" @change="handleDeptChange" multiple />
-        </div>
-        <div v-else style="width: 100%;">
-          <el-select v-model="form.messageRecipient" placeholder="请选择" @change="handleSelectionChange" multiple>
-            <el-option v-for="item in selectedOptions" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-        </div>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="submitForm" :loading="loading">发 送</el-button>
-        <el-button @click="toggleDialog">取 消</el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup>
-import { ref, computed, getCurrentInstance, defineProps, defineEmits, defineExpose } from 'vue';
-import { getUserNamesByDeptId, getUsersByRoleId, selectUser, selectRole, selectDept, selecTemplates, batchAddMessage } from '@/api/modelMessage/messageSystem';
-import { ElMessage } from 'element-plus';
-
-const props = defineProps({ title: { type: String, default: "发送消息界面" } });
-const { proxy } = getCurrentInstance();
-const { send_mode, message_type} = proxy.useDict("send_mode", "message_type");
-const emit = defineEmits(['success', 'close']);
-const users = ref([]);
-const roles = ref([]);
-const depts = ref([]);
-const templates = ref([]);
-const messageSystemFormRef = ref(null);
-const dialogVisible = ref(false);
-const form = ref({
-  messageTitle: null,
-  messageContent: null,
-  messageTemplate: null,
-  messageRecipient: [], 
-  remark: null,
-  sendMode: null,
-  recipientType: null,
-  code: null,
-  contentType: null 
-});
-
-const loading = ref(false);
-
-const isCodeFieldVisible = computed(() => ['1', '2'].includes(form.value.sendMode)); //0 平台 1 短信 2 邮箱
-const recipientTypes=computed(() =>[{ value: 'user', label: '用户' },{ value: 'role', label: '角色' },{ value: 'dept', label: '部门' }]);
-const selectedLabel = computed(() => recipientTypes.value.find(type => type.value === form.value.recipientType)?.label || '');
-const hasSelectedOptions = computed(() => form.value.recipientType && (users.value.length || roles.value.length || depts.value.length));
-
-const rules = ref({ //验证
-  messageTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-  sendMode: [{ required: true, message: '请选择发送方式', trigger: 'change' }],
-  messageRecipient: [{ required: true, message: '请选择收件人', trigger: 'change' }],
-  messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
-  recipientType: [{ required: true, message: '请选择收件人方式', trigger: 'change' }],
-  contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
-  messageContent: [{ required: true, message: '模版签名或消息内容不能为空', trigger: 'blur' },
-    { validator: validateMessageContent, trigger: 'blur' }],
-  ...(isCodeFieldVisible.value ? { code: [{ required: true, message: '手机号或者邮箱', trigger: 'blur' }] } : {})
-});
-
-const selectedOptions = computed(() => {
-  if (!form.value.recipientType) return [];
-  const data = form.value.recipientType === 'user' ? users.value : form.value.recipientType === 'role' ? roles.value :  depts.value;
-  return data.map(item => ({
-    id: item.userId || item.roleId || item.deptId, name: item.userName || item.roleName || item.deptName,
-    phonenumber: item.phonenumber, email: item.email
-  }));
-});
-
-//获取部门 角色 平台信息
-async function fetchRecipients() {
-  form.value.messageRecipient = null;
-  switch (form.value.recipientType) {
-    case 'user': await getUsers(); break;
-    case 'role': await getRoles(); break;
-    case 'dept': await getDepts(); break;
-  }
-}
-
-//选择对应的平台 角色 部门 填充对应的号码信息
-async function handleSelectionChange(selectedIds) {
-  try {
-    let users = [];
-    if (form.value.recipientType === 'role') {
-      for (const id of selectedIds) {
-        const roleUsers = (await getUsersByRoleId(id)).data;
-        users.push(...roleUsers.filter(user => user.phonenumber || user.email || user.name));
-      }
-    } else if (form.value.recipientType === 'dept') {
-      for (const id of selectedIds) {
-        const deptUsers = (await getUserNamesByDeptId(id)).data;
-        users.push(...deptUsers.filter(user => user.phonenumber || user.email || user.name));
-      }
-    } else {
-      users = selectedOptions.value.filter(option => selectedIds.includes(option.id) && (option.phonenumber || option.email || option.name));
-    }
-    updateCodeField(users);
-  } catch (error) {
-    console.error('未获取到用户信息', error);
-  }
-}
-
-//部门信息
-async function handleDeptChange(deptIds) {
-  try {
-    const users = [];
-    for (const deptId of deptIds) {
-      const deptUsers = (await getUserNamesByDeptId(deptId)).data;
-      users.push(...deptUsers.filter(user => user.phonenumber || user.email || user.name));
-    }
-    updateCodeField(users);
-  } catch (error) {
-    console.error('未获取到部门成员信息', error);
-  }
-}
-
-function updateCodeField(users) {
-  form.value.code = users.map(user => {
-    if (form.value.sendMode === '0') return user.name || ''; // 用户
-    if (form.value.sendMode === '1') return user.phonenumber || ''; // 短信
-    if (form.value.sendMode === '2') return user.email || ''; // 邮箱
-    return ''; 
-  }).join(', ');
-  if (!form.value.code) {
-    ElMessage.warning('未找到该收件人有效联系方式！');
-  }
-}
-
-//发送信息提交
-async function submitForm() {
-  loading.value = true;
-  await messageSystemFormRef.value.validate(async valid => {
-    if (valid) {
-      try {
-        const recipients = await getRecipients();
-        const messages = recipients.map(recipient => ({
-          ...form.value, messageRecipient: recipient.userName || recipient.name,
-          code: form.value.sendMode === '1' ? recipient.phonenumber : form.value.sendMode === '2' ? recipient.email : recipient.name,
-          sendMode: form.value.sendMode
-        }));
-        await batchAddMessage(messages);
-        ElMessage.success("消息发送成功！");
-        emit('success');
-        toggleDialog();
-      } catch (error) {
-        ElMessage.error('发送信息失败:', error);
-      }
-    } else {
-      ElMessage.warning("请将信息输入完整！");
-    }
-  });
-  loading.value = false;
-}
-
-//过滤掉不符合的用户
-async function getRecipients() {
-  if (form.value.recipientType === 'dept') {
-    const users = [];
-    for (const deptId of form.value.messageRecipient) {
-      users.push(...(await getUserNamesByDeptId(deptId)).data.filter(user => user.deptId));
-    }
-    return users;
-  } else if (form.value.recipientType === 'role') {
-    return form.value.messageRecipient.flatMap(async id => (await getUsersByRoleId(id)).data);
-  } else if (form.value.recipientType === 'user') {
-    return selectedOptions.value.filter(option => form.value.messageRecipient.includes(option.id));
-  }
-  return [];
-}
-
-//查询平台 角色 部门 模版信息 部门为树状
-async function getUsers() {
-  try {
-    users.value = (await selectUser(form.value.sendMode)).data;
-  } catch (error) {
-    console.error('未获取到用户信息', error);
-  }
-}
-async function getRoles() {
-  try {
-    roles.value = (await selectRole()).data;
-  } catch (error) {
-    console.error('未获取到角色信息', error);
-  }
-}
-async function getDepts() {
-  try {
-    depts.value = buildTree((await selectDept()).data);
-  } catch (error) {
-    console.error('未获取到部门信息', error);
-  }
-}
-function buildTree(depts) {
-  const map = {}, root = [];
-  depts.forEach(dept => {
-    map[dept.deptId] = dept;
-    if (dept.parentId === 0) root.push(dept);
-    else {
-      map[dept.parentId].children = map[dept.parentId].children || [];
-      map[dept.parentId].children.push(dept);
-    }
-  });
-  return root;
-}
-async function getTemplate() {
-  try {
-    templates.value = (await selecTemplates()).data;
-  } catch (error) {
-    console.error('未获取到模版信息', error);
-  }
-}
-
-function reset() {
-  form.value = { messageTitle: null, messageContent: null, messageTemplate: null, messageRecipient: null, remark: null, sendMode: null, recipientType: null };
-  proxy.resetForm("messageSystemFormRef");
-}
-function toggleDialog() {
-  dialogVisible.value = !dialogVisible.value;
-  if (!dialogVisible.value) {
-    reset();
-    emit('close');
-  }
-}
-function handleClosed() {reset(); emit('close');}
-function handleContentTypeChange() {form.value.messageContent = null;}
-function handleTemplateChange(value) { form.value.messageContent = value;}
-function handleContentInput(value) {form.value.messageContent = value;}
-function validateMessageContent(rule, value, callback) {
-  const pattern = /^[^?]+?\?[^=]+?=.*$/;
-  if (form.value.sendMode === '1' && form.value.contentType === 'content' && !pattern.test(value)) {
-    callback(new Error('短信输入内容格式必须为：模板名?模板参数=值'));
-  } else {
-    callback();
-  }
-}
-defineExpose(
-  { open: () => { 
-    dialogVisible.value = true;  
-    fetchRecipients();
-  }, 
-  getTemplate
-});
-getTemplate();
-</script>
-
-<style scoped>
-.custom-dialog {
-  background: linear-gradient(135deg, #1f1f1f, #3d3d3d);
-  border-radius: 10px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-  color: #fff;
-}
-
-.custom-form {
-  padding: 20px;
-}
-
-.custom-form .el-form-item__label {
-  color: #fff;
-}
-
-.custom-form .el-input__inner, .custom-form .el-select .el-input__inner {
-  background-color: #2c2c2c;
-  border-color: #444;
-  color: #fff;
-}
-
-.custom-form .el-input__inner::placeholder, .custom-form .el-select .el-input__inner::placeholder {
-  color: #888;
-}
-
-.custom-form .el-input__inner:focus, .custom-form .el-select .el-input__inner:focus {
-  border-color: #00aaff;
-}
-
-.custom-button {
-  background-color: #00aaff;
-  border-color: #00aaff;
-  color: #fff;
-}
-
-.custom-button:hover {
-  background-color: #0088cc;
-  border-color: #0088cc;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/components/addMessage.vue b/src/views/modelMessage/messageSystem/components/addMessage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..782e72a67a31940014267694b21ecf13ab725918
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/components/addMessage.vue
@@ -0,0 +1,257 @@
+<template>
+  <!-- 添加或修改消息管理对话框 -->
+  <el-dialog v-model="dialogVisible" :title="title" width="600px" append-to-body>
+    <el-form ref="messageSystemFormRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="消息标题" prop="messageTitle">
+            <el-input v-model="form.messageTitle" placeholder="请输入消息标题" maxlength="50" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="发送方式" prop="sendMode">
+            <el-select v-model="form.sendMode" placeholder="请选择发送方式" @change="handleSendModeChange" style="width: 100%">
+              <el-option v-for="dict in send_mode" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="消息类型" prop="messageType">
+            <el-select v-model="form.messageType" placeholder="请选择消息类型" style="width: 100%">
+              <el-option v-for="dict in message_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 消息内容组件 -->
+      <div class="message-content">
+        <el-form-item label="内容类型" prop="contentType">
+          <el-radio-group v-model="contentType" @change="handleContentTypeChange">
+            <el-radio label="template">模板签名</el-radio>
+            <el-radio label="content">消息内容</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <!-- 模板选择 -->
+        <el-form-item v-if="contentType === 'template'" label="模板选择" prop="messageContent">
+          <el-select v-model="form.messageContent" placeholder="请选择模板签名" style="width: 100%"
+            @change="handleTemplateChange" :loading="templateLoading">
+            <el-option v-for="temp in templates" :key="temp.templateId" :label="temp.templateCode"
+              :value="temp.templateCode" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 内容输入 -->
+        <el-form-item v-else label="消息内容" prop="messageContent">
+          <el-input v-model="form.messageContent" type="textarea" :rows="3" placeholder="短信格式须为: 模板名?模板参数=值" maxlength="100" show-word-limit @input="handleContentInput"/>
+        </el-form-item>
+      </div>
+
+      <!-- 收件人选择组件 -->
+      <RecipientSelector :send-mode="form.sendMode" @update:recipients="form.messageRecipient = $event" @update:contactInfo="form.code = $event" ref="recipientSelectorRef" />
+
+      <!-- 备注区域 -->
+      <div class="form-section">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="可选：添加备注信息" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
+        <el-button @click="toggleDialog">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, watch } from 'vue';
+import { batchAddMessage } from '@/api/modelMessage/messageSystem';
+import { selecTemplates } from '@/api/modelMessage/template';
+import { ElMessage } from 'element-plus';
+import RecipientSelector from './recipientSelector.vue';
+
+const props = defineProps({ title: { type: String, default: "发送消息" } });
+const { proxy } = getCurrentInstance();
+const { send_mode, message_type } = proxy.useDict("send_mode", "message_type");
+const emit = defineEmits(['success', 'close']);
+// Refs
+const messageSystemFormRef = ref(null);
+const recipientSelectorRef = ref(null);
+const dialogVisible = ref(false);
+const loading = ref(false);
+
+// Form Data
+const form = ref({
+  messageTitle: null,
+  messageContent: null,
+  messageRecipient: [],
+  remark: null,
+  sendMode: null,
+  code: null,
+  contentType: "template",
+  messageType: null
+});
+
+// 内容类型和模板相关数据
+const contentType = ref('template');
+const templates = ref([]);
+const templateLoading = ref(false);
+
+// 表单验证规则
+const rules = ref({
+  messageTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  sendMode: [{ required: true, message: '请选择发送方式', trigger: 'change' }],
+  messageRecipient: [{ required: true, message: '请选择收件人', trigger: 'change' }],
+  messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
+  messageContent: [{ required: true, message: '模版签名或消息内容不能为空', trigger: 'blur' }]
+});
+
+// 处理发送方式改变
+function handleSendModeChange() {
+  // 清空联系方式，子组件会自动处理数据更新
+  form.value.code = '';
+}
+
+// 获取模板列表
+async function getTemplates() {
+  try {
+    templateLoading.value = true;
+    const response = await selecTemplates();
+    templates.value = response.data || [];
+  } catch (error) {
+    console.error('获取模板信息失败:', error);
+    ElMessage.error('获取模板信息失败');
+  } finally {
+    templateLoading.value = false;
+  }
+}
+
+// 处理内容类型变化
+function handleContentTypeChange() {
+  form.value.messageContent = '';
+}
+
+// 处理模板选择变化
+function handleTemplateChange(value) {
+  form.value.messageContent = value;
+}
+
+// 处理内容输入变化
+function handleContentInput(value) {
+  form.value.messageContent = value;
+}
+
+// 验证消息内容格式
+function validateMessageContent(value) {
+  if (form.value.sendMode === '1' && contentType.value === 'content') {
+    const pattern = /^[^?]+?\?[^=]+?=.*$/;
+    if (!pattern.test(value)) {
+      return '短信输入内容格式必须为：模板名?模板参数=值';
+    }
+  }
+  return true;
+}
+
+// 监听发送方式变化
+watch(() => form.value.sendMode, () => {
+  // 发送方式变化时可能需要重新验证内容格式
+  if (form.value.messageContent) {
+    const validation = validateMessageContent(form.value.messageContent);
+    if (validation !== true) {
+      ElMessage.warning(validation);
+    }
+  }
+});
+
+// 发送消息表单提交
+async function submitForm() {
+  loading.value = true;
+  try {
+    // 表单验证
+    await messageSystemFormRef.value.validate();
+    
+    // 验证消息内容格式
+    const contentValidation = validateMessageContent(form.value.messageContent);
+    if (contentValidation !== true) {
+      throw new Error(contentValidation);
+    }
+    
+    // 从子组件获取收件人信息
+    const recipients = await recipientSelectorRef.value.getRecipients();
+    if (!recipients || recipients.length === 0) {
+      ElMessage.warning('请选择收件人');
+      return;
+    }
+    
+    // 构建消息数据
+    const messages = recipients.map(recipient => ({
+      ...form.value,
+      messageRecipient: recipient.userName || recipient.name,
+      code: form.value.sendMode === '1' ? recipient.phonenumber :
+            form.value.sendMode === '2' ? recipient.email :
+            recipient.name,
+      sendMode: form.value.sendMode
+    }));
+
+    // 发送消息
+    await batchAddMessage(messages);
+    ElMessage.success("消息发送成功！");
+    emit('success');
+    toggleDialog();
+  } catch (error) {
+    console.error('Submit form error:', error);
+    ElMessage.error('发送信息失败: ' + (error.message || '未知错误'));
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 重置表单
+function reset() {
+  form.value = {
+    messageTitle: null,
+    messageContent: null,
+    messageRecipient: [],
+    remark: null,
+    sendMode: null,
+    code: null,
+    contentType: "template",
+    messageType: null
+  };
+  
+  contentType.value = 'template';
+
+  // 重置子组件
+  if (recipientSelectorRef.value) {
+    recipientSelectorRef.value.reset();
+  }
+}
+
+// 切换对话框显示状态
+function toggleDialog() {
+  dialogVisible.value = !dialogVisible.value;
+  if (!dialogVisible.value) {
+    reset();
+    emit('close');
+    loading.value = false;
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  open: () => {
+    dialogVisible.value = true;
+  }
+});
+getTemplates();
+</script>    
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/components/recipientSelector.vue b/src/views/modelMessage/messageSystem/components/recipientSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..955874efedd8b5493ac9b5515d6645fe16cad44e
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/components/recipientSelector.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="recipient-selector">
+    <el-form-item label="收件人" prop="recipientType">
+      <el-radio-group v-model="recipientType" @change="handleTypeChange">
+        <el-radio v-for="type in recipientTypes" :key="type.value" :label="type.value">
+          {{ type.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    
+    <el-form-item v-if="recipientType && options.length > 0" :label="selectedLabel" prop="messageRecipient">
+      <!-- 部门树形选择 -->
+      <el-tree-select 
+        v-if="recipientType === 'dept'"
+        v-model="selectedRecipients" 
+        :data="options" 
+        placeholder="请选择部门" 
+        clearable 
+        :props="{ value: 'deptId', label: 'deptName', children: 'children' }" 
+        @change="handleSelectionChange" 
+        multiple 
+        style="width: 100%" 
+      />
+      <!-- 用户/角色选择 -->
+      <el-select 
+        v-else
+        v-model="selectedRecipients" 
+        placeholder="请选择收件人" 
+        @change="handleSelectionChange" 
+        multiple 
+        style="width: 100%"
+      >
+        <el-option 
+          v-for="item in options" 
+          :key="item.id" 
+          :label="item.name" 
+          :value="item.id" 
+        />
+      </el-select>
+    </el-form-item>
+    
+    <el-form-item v-if="contactInfo" label="接收号码">
+      <el-input v-model="contactInfo" placeholder="接收人联系方式" readonly />
+    </el-form-item>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { getSystemResource } from '@/api/modelMessage/messageSystem';
+import { ElMessage } from 'element-plus';
+
+// Props
+const props = defineProps({
+  sendMode: {
+    type: String,
+    default: ''
+  }
+});
+
+// Emits
+const emit = defineEmits(['update:recipients', 'update:contactInfo']);
+
+// 响应式数据
+const recipientType = ref('');
+const selectedRecipients = ref([]);
+const users = ref([]);
+const roles = ref([]);
+const depts = ref([]);
+const contactInfo = ref('');
+
+// 计算属性
+const recipientTypes = computed(() => [
+  { value: 'user', label: '用户' },
+  { value: 'role', label: '角色' },
+  { value: 'dept', label: '部门' }
+]);
+
+const selectedLabel = computed(() => {
+  const type = recipientTypes.value.find(t => t.value === recipientType.value);
+  return type ? type.label : '';
+});
+
+const options = computed(() => {
+  if (!recipientType.value) return [];
+  
+  switch (recipientType.value) {
+    case 'user':
+      return users.value.map(user => ({
+        id: user.userId || user.id,
+        name: user.userName || user.name,
+        phonenumber: user.phonenumber,
+        email: user.email
+      }));
+    case 'role':
+      return roles.value.map(role => ({
+        id: role.roleId || role.id,
+        name: role.roleName || role.name
+      }));
+    case 'dept':
+      return depts.value;
+    default:
+      return [];
+  }
+});
+
+// 统一资源获取函数
+async function fetchSystemResource(type, param = null, sendMode = null) {
+  try {
+    const response = await getSystemResource(type, param, sendMode);
+    return response.data || [];
+  } catch (error) {
+    console.error(`获取${type}失败:`, error);
+    ElMessage.error(`获取${type}失败`);
+    return [];
+  }
+}
+
+// 获取用户列表
+async function getUsers() {
+  let userData;
+  if (props.sendMode === '0' || !props.sendMode) {
+    userData = await fetchSystemResource('user');
+  } else {
+    userData = await fetchSystemResource('usersbysendmode', null, props.sendMode);
+  }
+  users.value = userData;
+  
+  if (userData.length === 0 && props.sendMode && props.sendMode !== '0') {
+    const modeText = props.sendMode === '1' ? '手机号' : '邮箱';
+    ElMessage.warning(`当前没有填写${modeText}的用户`);
+  }
+}
+
+// 获取角色列表
+async function getRoles() {
+  roles.value = await fetchSystemResource('role');
+}
+
+// 获取部门列表
+async function getDepts() {
+  const deptData = await fetchSystemResource('dept');
+  depts.value = buildTree(deptData);
+}
+
+// 构建部门树
+function buildTree(depts) {
+  const map = {}, root = [];
+  depts.forEach(dept => {
+    map[dept.deptId] = dept;
+    if (dept.parentId === 0) {
+      root.push(dept);
+    } else {
+      map[dept.parentId] = map[dept.parentId] || {};
+      map[dept.parentId].children = map[dept.parentId].children || [];
+      map[dept.parentId].children.push(dept);
+    }
+  });
+  return root;
+}
+
+// 处理收件人类型变化
+async function handleTypeChange() {
+  selectedRecipients.value = [];
+  contactInfo.value = '';
+  
+  switch (recipientType.value) {
+    case 'user':
+      await getUsers();
+      break;
+    case 'role':
+      await getRoles();
+      break;
+    case 'dept':
+      await getDepts();
+      break;
+  }
+}
+
+// 处理选择变化
+async function handleSelectionChange() {
+  if (!selectedRecipients.value || selectedRecipients.value.length === 0) {
+    contactInfo.value = '';
+    emit('update:contactInfo', '');
+    emit('update:recipients', []);
+    return;
+  }
+
+  try {
+    const users = await getUsersByRecipientType();
+    updateContactInfo(users);
+    emit('update:recipients', selectedRecipients.value);
+  } catch (error) {
+    console.error('获取用户信息失败:', error);
+    ElMessage.error('获取用户信息失败');
+  }
+}
+
+// 根据收件人类型获取用户
+async function getUsersByRecipientType() {
+  let users = [];
+  
+  switch (recipientType.value) {
+    case 'role':
+      for (const roleId of selectedRecipients.value) {
+        const roleUsers = await fetchSystemResource('usersbyrole', roleId);
+        users.push(...roleUsers);
+      }
+      break;
+    case 'dept':
+      for (const deptId of selectedRecipients.value) {
+        const deptUsers = await fetchSystemResource('usersbydept', deptId);
+        users.push(...deptUsers);
+      }
+      break;
+    case 'user':
+      users = options.value.filter(option => 
+        selectedRecipients.value.includes(option.id)
+      );
+      break;
+  }
+  
+  return users;
+}
+
+// 更新联系方式
+function updateContactInfo(users) {
+  const validContacts = users.map(user => {
+    let contact = '';
+    if (props.sendMode === '0') {
+      contact = user.userName || user.name || user.nickName || '';
+    } else if (props.sendMode === '1') {
+      contact = user.phonenumber || '';
+    } else if (props.sendMode === '2') {
+      contact = user.email || '';
+    }
+    return contact;
+  }).filter(contact => contact && contact.trim() !== '');
+
+  const uniqueContacts = [...new Set(validContacts)];
+  contactInfo.value = uniqueContacts.join(', ');
+  emit('update:contactInfo', contactInfo.value);
+
+  if (!contactInfo.value && props.sendMode && props.sendMode !== '0') {
+    const contactType = props.sendMode === '1' ? '手机号' : '邮箱地址';
+    ElMessage.warning(`所选收件人中没有有效的${contactType}信息！`);
+  }
+}
+
+// 监听发送方式变化
+watch(() => props.sendMode, () => {
+  if (recipientType.value === 'user') {
+    getUsers();
+  }
+  if (selectedRecipients.value.length > 0) {
+    handleSelectionChange();
+  }
+});
+
+// 暴露方法给父组件
+defineExpose({
+  getRecipients: getUsersByRecipientType,
+  reset: () => {
+    recipientType.value = '';
+    selectedRecipients.value = [];
+    contactInfo.value = '';
+    users.value = [];
+    roles.value = [];
+    depts.value = [];
+  }
+});
+</script>
diff --git a/src/views/modelMessage/messageSystem/index.vue b/src/views/modelMessage/messageSystem/index.vue
index 8e87bffe28478cc8121650ee359f7f80cbcfd0f0..25e7f3170d0d0f4c0fc6ba9766ff3d4aab667714 100644
--- a/src/views/modelMessage/messageSystem/index.vue
+++ b/src/views/modelMessage/messageSystem/index.vue
@@ -1,96 +1,135 @@
 <template>
   <div class="app-container">
-    <el-card shadow="never">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"
-        class="form-container">
-        <el-form-item label="标题" prop="messageTitle">
-          <el-input v-model="queryParams.messageTitle" placeholder="请输入标题" clearable @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item label="消息状态" prop="messageStatus">
-          <el-select v-model="queryParams.messageStatus" placeholder="请选择状态" clearable style="width: 190px">
-            <el-option v-for="dict in message_status" :key="dict.value" :label="dict.label" :value="dict.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card shadow="never" class="mt10">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="Plus" @click="handleAdd"
-            v-hasPermi="['modelMessage:messageSystem:add']">发送信息</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">批量删除</el-button>
-        </el-col>
-        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table v-loading="loading" :data="filteredMessageSystemList" @selection-change="handleSelectionChange"
-        class="table-container">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="标题" align="center" prop="messageTitle">
-          <template #default="scope">
-            <span @click="openDrawer(scope.row.messageId)" class="message-title"
-              style="cursor: pointer; color: darkcyan;">
-              {{ scope.row.messageTitle }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="发件人" align="center" prop="createBy" />
-        <el-table-column label="发件时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="消息状态" align="center" prop="messageStatus">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="消息标题" prop="messageTitle">
+        <el-input v-model="queryParams.messageTitle" placeholder="请输入消息标题" clearable style="width: 240px" @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="消息状态" prop="messageStatus">
+        <el-select v-model="queryParams.messageStatus" placeholder="请选择消息状态" clearable style="width: 240px">
+          <el-option v-for="dict in message_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['modelMessage:messageSystem:add']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="messageSystemList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="消息标题" align="center" prop="messageTitle" :show-overflow-tooltip="true" />
+      <el-table-column label="收件人" align="center" prop="messageRecipient" :show-overflow-tooltip="true" />
+      <el-table-column label="消息状态" align="center" prop="messageStatus">
           <template #default="scope">
             <dict-tag :options="message_status" :value="scope.row.messageStatus" />
           </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
-
-    <AddMessage ref="sendMessageRef" @success="handleSendSuccess" />
-
-    <el-dialog :title="title" v-model="drawerVisible" width="40%" append-to-body :show-overlay="false"
-      class="custom-dialog">
-      <div>
-        <el-descriptions :column="1" border class="descriptions">
-          <el-descriptions-item label="标题">{{ detailForm.messageTitle }}</el-descriptions-item>
-          <el-descriptions-item label="发件人">{{ detailForm.createBy }}</el-descriptions-item>
-          <el-descriptions-item label="发送方式">
-            <dict-tag :options="send_mode" :value="detailForm.sendMode" />
-          </el-descriptions-item>
-          <el-descriptions-item label="发送时间">{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
-          }}</el-descriptions-item>
-          <el-descriptions-item label="消息内容">{{ detailForm.messageContent }}</el-descriptions-item>
-          <el-descriptions-item label="收件人">{{ detailForm.messageRecipient }}</el-descriptions-item>
-          <el-descriptions-item label="消息类型">
-            <dict-tag :options="message_type" :value="detailForm.messageType" />
-          </el-descriptions-item>
-          <el-descriptions-item label="备注">{{ detailForm.remark }}</el-descriptions-item>
-        </el-descriptions>
-      </div>
+      </el-table-column>
+      <el-table-column label="发送时间" align="center" prop="createTime" >
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="查看" placement="top">
+            <el-button link type="primary" icon="View" @click="openDrawer(scope.row.messageId)"></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+      
+    <!-- 添加或修改消息管理对话框 -->
+    <AddMessage ref="sendMessageRef" @success="handleSendSuccess"/>
+
+    <!-- 消息详情对话框 -->
+    <el-dialog :title="title" v-model="drawerVisible" width="600px" append-to-body>
+      <el-form :model="detailForm" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="消息标题">
+              <el-input v-model="detailForm.messageTitle" readonly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="消息内容">
+              <el-input v-model="detailForm.messageContent" type="textarea" :rows="4" readonly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="收件人">
+              <el-input v-model="detailForm.messageRecipient" readonly />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发件人">
+              <el-input v-model="detailForm.createBy" readonly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="发送方式">
+              <dict-tag :options="send_mode" :value="detailForm.sendMode" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="消息类型">
+              <dict-tag :options="message_type" :value="detailForm.messageType" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="消息状态">
+              <dict-tag :options="message_status" :value="detailForm.messageStatus" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="创建时间">
+              <span>{{ parseTime(detailForm.createTime) }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="detailForm.remark">
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="detailForm.remark" type="textarea" readonly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
     </el-dialog>
   </div>
 </template>
 
 <script setup name="MessageSystem">
-import { ref, reactive, computed, toRefs, getCurrentInstance } from 'vue';
+import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { delMessageSystem, listMessageSystem, getMessageSystem, getUpdate } from "@/api/modelMessage/messageSystem";
-import AddMessage from './addMessage.vue';
-import useUserStore from '@/store/modules/user';
+import AddMessage from './components/addMessage.vue';
 
 const { proxy } = getCurrentInstance();
 const { message_status, message_type, send_mode } = proxy.useDict("message_status", "message_type", "send_mode");
-const userStore = useUserStore();
-const isCustomer = computed(() => !userStore.roles.includes('admin') && !userStore.roles.includes('engineer'));
+const { parseTime } = proxy;
 
 const messageSystemList = ref([]);
 const loading = ref(true);
@@ -167,98 +206,11 @@ function handleSendSuccess() {
 function openDrawer(messageId) {
   getMessageSystem(messageId).then(response => {
     detailForm.value = response.data;
-    title.value = '信息详情';
+    title.value ='信息详情';
     drawerVisible.value = true;
-    getUpdate(messageId).then(response => { });
+    getUpdate(messageId).then(response => {});
   });
 }
 
-//过滤
-const filteredMessageSystemList = computed(() => {
-  if (isCustomer.value) {
-    return messageSystemList.value.filter(item => item.sendMode === '0');
-  }
-  return messageSystemList.value;
-});
-
 getList();
-</script>
-
-<style scoped>
-.el-button {
-  transition: all 0.3s ease-in-out;
-}
-
-.el-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
-}
-
-.el-form {
-  margin-bottom: 20px;
-}
-
-.el-input__inner,
-.el-textarea__inner {
-  border-radius: 4px;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s;
-}
-
-.el-input__inner:focus,
-.el-textarea__inner:focus {
-  border-color: #409eff;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 5px rgba(64, 158, 255, 0.5);
-}
-
-.el-dialog {
-  background-color: #f0f4ff;
-  border-radius: 8px;
-}
-
-.el-dialog__header {
-  background-color: #409eff;
-  color: #ffffff;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.el-descriptions {
-  background-color: #ffffff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 12px rgba(4, 116, 245, 0.1);
-}
-
-.el-descriptions-item {
-  margin-bottom: 20px;
-}
-
-.el-descriptions-item label {
-  color: #409eff;
-}
-
-.pagination {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.custom-dialog {
-  background-color: #f8f9fa;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.dict-tag {
-  background-color: #e0f7fa;
-  color: #009688;
-  padding: 4px 8px;
-  border-radius: 4px;
-  border: 1px solid #b2ebf2;
-}
-
-.dict-tag:hover {
-  background-color: #b2ebf2;
-  color: #00695c;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/smallBell.vue b/src/views/modelMessage/messageSystem/smallBell.vue
deleted file mode 100644
index 443a02fb5b49f25f636fdd2902ab7e7888ae9154..0000000000000000000000000000000000000000
--- a/src/views/modelMessage/messageSystem/smallBell.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <el-popover v-model="showPopover" placement="bottom-start" width="200" trigger="hover">
-    <template #reference>
-      <el-button type="primary" link @mouseover="fetchLatestMessages" @mouseout="hidePopover">
-        <el-icon size="20" color="#5a5e66" style="transform: scaleX(1.1) scaleY(1.1); margin-right: 5px;">
-          <Bell />
-        </el-icon>
-      </el-button>
-    </template>
-    <div v-if="filteredNotifications.length > 0">
-      <h4 style="margin: 0px; padding: 0px;">信息中心</h4>
-      <ul class="notification-list">
-        <li style="cursor: pointer;" v-for="(item, index) in filteredNotifications" :key="index"
-          @click="viewDetails(item)">
-          {{ item.messageTitle }}
-        </li>
-      </ul>
-    </div>
-    <div v-else>
-      暂无信息
-    </div>
-  </el-popover>
-</template>
-
-<script setup name="NotificationBell">
-import { ref, computed } from 'vue';
-import { listMessageSystem } from "@/api/modelMessage/messageSystem";
-import { getCurrentInstance } from 'vue';
-import useUserStore from '@/store/modules/user';
-
-const { proxy } = getCurrentInstance();
-
-const userStore = useUserStore();
-const isCustomer = computed(() => !userStore.roles.includes('admin') && !userStore.roles.includes('engineer'));
-const messageSystemList = ref([])
-const filteredNotifications = computed(() => {
-  if (isCustomer.value) {
-    return messageSystemList.value.filter(item => item.sendMode === '0').slice(0, 5);
-  }
-  return messageSystemList.value.slice(0, 5);
-});
-
-const showPopover = ref(false);
-const latestNotifications = ref([]);
-
-async function fetchLatestMessages() {
-  try {
-    const response = await listMessageSystem();
-    messageSystemList.value = response.rows;
-    latestNotifications.value = response.rows.slice(0, 5);
-  } catch (error) {
-    console.error('获取信息失败:', error);
-  }
-}
-
-function viewDetails(item) {
-  proxy.$emit('view-details', item); // 向父组件传递事件
-}
-
-// 隐藏popover
-function hidePopover() {
-  showPopover.value = false;
-}
-
-defineExpose({ fetchLatestMessages });
-</script>
-
-<style scoped>
-.notification-list {
-  background-color: #f8f9fa;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 10px;
-}
-
-.notification-list li {
-  list-style-type: none;
-  padding: 5px 0;
-  cursor: pointer;
-}
-
-.notification-list li:hover {
-  background-color: #e0e0e0;
-  color: #333;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/template/components/TemplateFormDialog.vue b/src/views/modelMessage/template/components/TemplateFormDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a720206a8fc11d51170bfeb08c40722415aa03c4
--- /dev/null
+++ b/src/views/modelMessage/template/components/TemplateFormDialog.vue
@@ -0,0 +1,178 @@
+<template>
+  <!-- 添加或修改模版管理对话框 -->
+  <el-dialog :title="title" :modelValue="visible" @update:modelValue="emit('update:visible', $event)" width="600px" append-to-body>
+    <el-form ref="templateRef" :model="form" :rules="rules" label-width="80px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="模版名称" prop="templateName">
+            <el-input v-model="form.templateName" placeholder="请输入模版名称" maxlength="50" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="模版签名" prop="templateCode">
+            <el-input v-model="form.templateCode" placeholder="请输入模版签名" maxlength="50" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="模版类型" prop="templateType">
+            <el-select v-model="form.templateType" placeholder="请选择模版类型" style="width: 100%">
+              <el-option v-for="dict in template_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="选择变量" prop="templateVariable">
+            <el-select v-model="form.templateVariable" placeholder="请选择变量" multiple filterable
+              @change="handleVariableChange" style="width: 100%">
+              <el-option v-for="item in variable" :key="item.variableId" :label="item.variableName"
+                :value="item.variableName" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="模版内容" prop="templateContent">
+            <el-input v-model="form.templateContent" type="textarea" :rows="6" placeholder="请输入模版内容"
+              maxlength="1000" show-word-limit />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="场景说明">
+            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入场景说明" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="handleCancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="TemplateFormDialog">
+import { ref, reactive, toRefs, getCurrentInstance, watch } from 'vue';
+
+const { proxy } = getCurrentInstance();
+const { template_type } = proxy.useDict("template_type");
+
+// Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  formData: {
+    type: Object,
+    default: () => ({})
+  },
+  variable: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// Emits
+const emit = defineEmits(['update:visible', 'submit', 'cancel']);
+
+// Data
+const templateRef = ref(null);
+const data = reactive({
+  form: { templateContent: '' },
+  rules: {
+    templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
+    templateCode: [{ required: true, message: '请输入模版CODE', trigger: 'blur' }, { validator: validateTemplateCode, trigger: 'blur' }],
+    templateType: [{ required: true, message: '请选择模版类型', trigger: 'change' }],
+    templateVariable: [{ required: true, message: '请选择变量', trigger: 'change' }],
+    templateContent: [{ required: true, message: '请输入模版内容', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+// Watch props changes
+watch(() => props.formData, (newVal) => {
+  if (newVal) {
+    form.value = { ...newVal };
+  }
+}, { deep: true, immediate: true });
+
+// Methods
+function validateTemplateCode(_, value, callback) {
+  if (!value) {
+    callback(new Error('请输入模版CODE'));
+  } else if (!value.startsWith('SMS_')) {
+    callback(new Error('模版CODE必须以SMS_开头'));
+  } else {
+    callback();
+  }
+}
+
+// 当变量选项改变时触发
+function handleVariableChange(value) {
+  form.value.templateVariable = value;
+  if (!form.value.templateContent) {
+    form.value.templateContent = '';
+  }
+
+  // 移除未选中的变量占位符
+  const currentPlaceholders = form.value.templateContent.match(/\$\{\w+\}/g) || [];
+  const selectedVariableNames = value.map(v => `\${${v}}`);
+  currentPlaceholders.forEach(placeholder => {
+    if (!selectedVariableNames.includes(placeholder)) {
+      form.value.templateContent = form.value.templateContent.replace(placeholder, '').trim();
+    }
+  });
+
+  // 添加新选中的变量占位符
+  const lastSelectedVariableName = value[value.length - 1];
+  if (lastSelectedVariableName) {
+    const variablePlaceholder = `\${${lastSelectedVariableName}}`;
+    if (!form.value.templateContent.includes(variablePlaceholder)) {
+      form.value.templateContent += ` ${variablePlaceholder}`;
+    }
+  }
+  form.value.templateContent = form.value.templateContent.replace(/\s+/g, ' ').trim();
+}
+
+function handleSubmit() {
+  templateRef.value.validate(valid => {
+    if (valid) {
+      emit('submit', form.value);
+    }
+  });
+}
+
+function handleCancel() {
+  emit('cancel');
+}
+
+// Reset form
+function resetForm() {
+  form.value = {
+    templateId: null, templateName: null, templateCode: null, templateType: null, templateContent: '',
+    templateVariable: [], createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null
+  };
+  if (templateRef.value) {
+    templateRef.value.resetFields();
+  }
+}
+
+// Expose methods
+defineExpose({
+  resetForm
+});
+</script>
diff --git a/src/views/modelMessage/template/index.vue b/src/views/modelMessage/template/index.vue
index a6caa9fac49a26d1d16e773a13de204f03dbb555..65f0b38a54852fb07b140ee38ca1145c54270c09 100644
--- a/src/views/modelMessage/template/index.vue
+++ b/src/views/modelMessage/template/index.vue
@@ -1,97 +1,92 @@
 <template>
   <div class="app-container">
-    <el-card shadow="never">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="模版名称" prop="templateName">
-          <el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card shadow="never" class="mt10">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增模版</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除模版</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-        </el-col>
-      </el-row>
-
-      <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="模版名称" align="center" prop="templateName" />
-        <el-table-column label="模版CODE" align="center" prop="templateCode" />
-        <el-table-column label="模版类型" align="center" prop="templateType">
-          <template #default="scope">
-            <dict-tag :options="template_type" :value="scope.row.templateType" />
-          </template>
-        </el-table-column>
-        <el-table-column label="模版内容" align="center" prop="templateContent" />
-        <el-table-column label="变量" align="center" prop="templateVariable" />
-        <el-table-column label="场景说明" align="center" prop="remark" />
-        <el-table-column label="操作" align="center" class="small-padding fixed-width">
-          <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="模版名称" prop="templateName">
+        <el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="模版类型" prop="templateType">
+        <el-select v-model="queryParams.templateType" placeholder="请选择模版类型" clearable style="width: 240px">
+          <el-option v-for="dict in template_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="模版编号" align="center" prop="templateId" />
+      <el-table-column label="模版名称" align="center" prop="templateName" :show-overflow-tooltip="true" />
+      <el-table-column label="模版CODE" align="center" prop="templateCode" :show-overflow-tooltip="true" />
+      <el-table-column label="模版类型" align="center" prop="templateType" width="120">
+        <template #default="scope">
+          <dict-tag :options="template_type" :value="scope.row.templateType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="模版内容" align="center" prop="templateContent" :show-overflow-tooltip="true" />
+      <el-table-column label="变量" align="center" prop="templateVariable" :show-overflow-tooltip="true" />
+      <el-table-column label="场景说明" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="修改" placement="top">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改模版管理对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body class="dialog-container">
-      <el-form ref="templateRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="模版名称" prop="templateName">
-          <el-input v-model="form.templateName" placeholder="请输入模版名称" />
-        </el-form-item>
-        <el-form-item label="模版CODE" prop="templateCode" label-width="90px">
-          <el-input v-model="form.templateCode" placeholder="请输入模版CODE" />
-        </el-form-item>
-        <el-form-item label="模版类型" prop="templateType">
-          <el-select v-model="form.templateType" placeholder="请选择模版类型">
-            <el-option v-for="dict in template_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="变量" prop="templateVariable">
-          <el-select v-model="form.templateVariable" placeholder="请选择变量" multiple @change="handleVariableChange">
-            <el-option v-for="item in variable" :key="item.variableId" :label="item.variableName"
-              :value="item.variableName" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模版内容" prop="templateContent">
-          <el-input v-model="form.templateContent" type="textarea" placeholder="请输入模版内容" />
-        </el-form-item>
-        <el-form-item label="场景说明" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入场景说明" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <TemplateFormDialog
+      :visible="open"
+      :title="title"
+      :formData="form"
+      :variable="variable"
+      @update:visible="open = $event"
+      @submit="handleFormSubmit"
+      @cancel="cancel"
+      ref="templateFormDialogRef"
+    />
   </div>
 </template>
 
 <script setup name="Template">
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/modelMessage/template";
 import { selectVariable } from "@/api/modelMessage/variable";
+import TemplateFormDialog from './components/templateFormDialog.vue';
 
 const { proxy } = getCurrentInstance();
 const { template_type } = proxy.useDict("template_type");
+const { parseTime } = proxy;
+
 const templateList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -102,6 +97,7 @@ const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const variable = ref([]);
+const templateFormDialogRef = ref(null);
 
 const data = reactive({
   form: { templateContent: '' },
@@ -110,18 +106,10 @@ const data = reactive({
     pageSize: 10,
     templateName: null,
     templateType: null,
-  },
-  rules: {
-    templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
-    templateCode: [{ required: true, message: '请输入模版CODE', trigger: 'blur' }],
-    templateType: [{ required: true, message: '请选择模版类型', trigger: 'change' }],
-    templateVariable: [{ required: true, message: '请选择变量', trigger: 'change' }],
-    remark: [{ required: true, message: '请输入场景说明', trigger: 'blur' }],
-    templateContent: [{ required: true, message: '请输入模版内容', trigger: 'blur' }]
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form } = toRefs(data);
 
 /** 查询模版管理列表 */
 function getList() {
@@ -145,7 +133,9 @@ function reset() {
     templateId: null, templateName: null, templateCode: null, templateType: null, templateContent: '',
     templateVariable: [], createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null
   };
-  proxy.resetForm("templateRef");
+  if (templateFormDialogRef.value) {
+    templateFormDialogRef.value.resetForm();
+  }
 }
 
 /** 搜索按钮操作 */
@@ -188,27 +178,26 @@ function handleUpdate(row) {
   });
 }
 
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["templateRef"].validate(valid => {
-    if (valid) {
-      form.value.templateVariable = form.value.templateVariable.join('/');
-      if (form.value.templateId != null) {
-        updateTemplate(form.value).then(response => {
-          proxy.$modal.msgSuccess("编辑模版成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addTemplate(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增模版成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
+/** 处理表单提交 */
+function handleFormSubmit(formData) {
+  const submitData = { ...formData };
+  submitData.templateVariable = submitData.templateVariable.join('/');
+
+  if (submitData.templateId != null) {
+    updateTemplate(submitData).then(response => {
+      proxy.$modal.msgSuccess("编辑模版成功");
+      open.value = false;
+      getList();
+    });
+  } else {
+    addTemplate(submitData).then(response => {
+      proxy.$modal.msgSuccess("新增模版成功");
+      open.value = false;
+      getList();
+    });
+  }
 }
+
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _templateIds = row.templateId || ids.value;
@@ -235,67 +224,6 @@ async function getVariable() {
   }
 }
 
-// 当变量选项改变时触发
-function handleVariableChange(value) {
-  form.value.templateVariable = value;
-  if (!form.value.templateContent) {
-    form.value.templateContent = '';
-  }
-  const currentPlaceholders = form.value.templateContent.match(/\$\{\w+\}/g) || []; // 获取当前模板内容中的所有变量占位符
-  const selectedVariableContents = variable.value.filter(v => value.includes(v.variableName)) // 获取选中的变量占位符
-    .map(v => `\${${v.variableContent}}`);
-  currentPlaceholders.forEach(placeholder => { // 移除未选中的变量占位符
-    if (!selectedVariableContents.includes(placeholder)) {
-      form.value.templateContent = form.value.templateContent.replace(placeholder, '').trim();
-    }
-  });
-  // 填充模板内容
-  const selectedVariable = variable.value.find(v => v.variableName === value[value.length - 1]);
-  if (selectedVariable) {
-    const variablePlaceholder = `\${${selectedVariable.variableContent}}`;
-    if (!form.value.templateContent.includes(variablePlaceholder)) {
-      form.value.templateContent += ` ${variablePlaceholder}`;
-    }
-  }
-  form.value.templateContent = form.value.templateContent.replace(/\s+/g, ' ').trim();
-}
-
 getVariable();
 getList();
-</script>
-<style scoped>
-.el-form {
-  margin-bottom: 20px;
-}
-
-.el-form-item {
-  margin-bottom: 18px;
-}
-
-.dialog-container {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.dialog-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #333;
-}
-
-.dialog-footer {
-  text-align: right;
-  margin-top: 20px;
-}
-
-.dialog-fade-enter-active,
-.dialog-fade-leave-active {
-  transition: opacity 0.3s;
-}
-
-.dialog-fade-enter,
-.dialog-fade-leave-to {
-  opacity: 0;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/modelMessage/variable/components/VariableFormDialog.vue b/src/views/modelMessage/variable/components/VariableFormDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0f9b19f6c2e9d3326be73b97ae3680f078fba2f
--- /dev/null
+++ b/src/views/modelMessage/variable/components/VariableFormDialog.vue
@@ -0,0 +1,146 @@
+<template>
+  <!-- 添加或修改变量管理对话框 -->
+  <el-dialog :title="title" :modelValue="visible" @update:modelValue="emit('update:visible', $event)" width="600px" append-to-body>
+    <el-form ref="variableRef" :model="form" :rules="rules" label-width="80px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变量名称" prop="variableName">
+            <el-input v-model="form.variableName" placeholder="请输入变量名称" maxlength="50" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变量类型" prop="variableType">
+            <el-radio-group v-model="form.variableType" @change="handleVariableTypeChange">
+              <el-radio label="指定文本">指定文本</el-radio>
+              <el-radio label="内置变量">内置变量</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row v-if="form.variableType === '内置变量'">
+        <el-col :span="24">
+          <el-form-item label="内置变量" prop="variableContent">
+            <el-select v-model="form.variableContent" placeholder="请选择内置变量" style="width: 100%">
+              <el-option
+                v-for="(item, key) in builtInVariableOptions"
+                :key="key"
+                :label="item.label"
+                :value="key"
+              >
+                <span style="float: left">{{ item.label }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row v-else-if="form.variableType === '指定文本'">
+        <el-col :span="24">
+          <el-form-item label="变量内容" prop="variableContent">
+            <el-input
+              v-model="form.variableContent"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入变量内容"
+              maxlength="1000"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
+        <el-button @click="handleCancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="VariableFormDialog">
+import { ref } from 'vue'
+
+// Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  form: {
+    type: Object,
+    required: true
+  },
+  submitLoading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:visible', 'submit', 'cancel', 'variable-type-change'])
+
+// Refs
+const variableRef = ref(null)
+
+// 表单验证规则
+const rules = {
+  variableName: [{ required: true, message: '请输入变量名称', trigger: 'blur' }],
+  variableType: [{ required: true, message: '请选择变量类型', trigger: 'change' }]
+}
+
+// 内置变量的显示文本配置（简化版）
+const builtInVariableLabels = {
+  'time': '发送时间',
+  'date': '发送日期',
+  'datetime': '发送日期+时间',
+  'addresser': '发件人',
+  'recipients': '收件人',
+  'RandomnDigits': '随机数字',
+  'RandomnCharacters': '随机字母',
+  'RandomNDigitLetters': '随机数字+字母'
+}
+
+// 将 labels 转换为 options 数组用于下拉选择器
+const builtInVariableOptions = Object.entries(builtInVariableLabels).map(([value, label]) => ({
+  value,
+  label
+}))
+
+// 方法
+const handleVariableTypeChange = (value) => {
+  emit('variable-type-change', value)
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const handleSubmit = () => {
+  // 在子组件内部进行表单验证
+  variableRef.value.validate((valid) => {
+    if (valid) {
+      emit('submit')
+    }
+  })
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  variableRef
+})
+</script>
diff --git a/src/views/modelMessage/variable/index.vue b/src/views/modelMessage/variable/index.vue
index 5fb0c99e7942ae42b5a3a1226ec271ea90925e12..c24ec14c792d911506096a4bf90413bb420222c0 100644
--- a/src/views/modelMessage/variable/index.vue
+++ b/src/views/modelMessage/variable/index.vue
@@ -1,89 +1,74 @@
 <template>
   <div class="app-container">
-    <el-card shadow="never">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="变量名称" prop="variableName">
-          <el-input v-model="queryParams.variableName" placeholder="请输入变量名称" clearable @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card shadow="never" class="mt10">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增变量</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除变量</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-        </el-col>
-      </el-row>
-
-      <el-table v-loading="loading" :data="variableList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="变量名称" align="center" prop="variableName" />
-        <el-table-column label="变量类型" align="center" prop="variableType" />
-        <el-table-column label="变量内容" align="center" prop="variableContent" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="变量名称" prop="variableName">
+        <el-input v-model="queryParams.variableName" placeholder="请输入变量名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="variableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column label="变量编号" align="center" prop="variableId" />
+      <el-table-column label="变量名称" align="center" prop="variableName" :show-overflow-tooltip="true" />
+      <el-table-column label="变量类型" align="center" prop="variableType"/>
+      <el-table-column label="变量内容" align="center" prop="variableContent" :show-overflow-tooltip="true">
+        <template #default="scope">
+          <span>{{ formatVariableContent(scope.row) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="修改" placement="top">
+            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改变量管理对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="variableRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="变量名称" prop="variableName">
-          <el-input v-model="form.variableName" placeholder="请输入变量名称" />
-        </el-form-item>
-        <el-form-item label="变量类型" prop="variableType">
-          <el-select v-model="form.variableType" placeholder="请选择变量类型" @change="handleVariableTypeChange">
-            <el-option label="指定文本" value="指定文本"></el-option>
-            <el-option label="内置变量" value="内置变量"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.variableType === '内置变量'" label="内置变量内容" label-width="100px" prop="builtInVariable">
-          <el-select v-model="form.variableContent" placeholder="请选择内置变量">
-            <el-option label="发送时间" value="time"></el-option>
-            <el-option label="发送日期" value="date"></el-option>
-            <el-option label="发送日期时间" value="datetime"></el-option>
-            <el-option label="发件人" value="addresser"></el-option>
-            <el-option label="收件人" value="recipients"></el-option>
-            <el-option label="随机n位数字" value="RandomnDigits"></el-option>
-            <el-option label="随机n位字母" value="RandomnCharacters"></el-option>
-            <el-option label="随机n位数字字母" value="RandomN-digitLetters"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.variableType !== '内置变量'" label="变量内容" prop="variableContent">
-          <el-input v-model="form.variableContent" type="textarea" placeholder="请输入变量内容" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <VariableFormDialog ref="variableFormDialog" :visible="open" :title="title" :form="form"
+      :submitLoading="submitLoading"  @update:visible="open = $event" @submit="submitForm"
+      @cancel="cancel" @variable-type-change="handleVariableTypeChange"/>
   </div>
 </template>
 
 <script setup name="Variable">
 import { listVariable, getVariable, delVariable, addVariable, updateVariable } from "@/api/modelMessage/variable";
 import { ElMessage } from "element-plus";
+import VariableFormDialog from "./components/variableFormDialog.vue";
 const { proxy } = getCurrentInstance();
+const { parseTime } = proxy;
 
 const variableList = ref([]);
 const open = ref(false);
@@ -94,6 +79,7 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const submitLoading = ref(false); // 新增: 提交按钮加载状态
 
 const data = reactive({
   form: {
@@ -104,17 +90,13 @@ const data = reactive({
   },
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 8,
     variableName: null,
-  },
-  rules: {
-    variableName: [{ required: true, message: '请输入变量名称', trigger: 'blur' }],
-    variableType: [{ required: true, message: '请选择变量类型', trigger: 'change' }]
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
-
+const { queryParams, form } = toRefs(data);
+ 
 /** 查询变量管理列表 */
 function getList() {
   loading.value = true;
@@ -134,10 +116,17 @@ function cancel() {
 // 表单重置
 function reset() {
   form.value = {
-    variableId: null, variableName: null, variableType: null, variableContent: null, builtInVariable: null,
-    createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null
+    variableId: null,
+    variableName: null,
+    variableType: null,
+    variableContent: null,
+    builtInVariable: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    remark: null
   };
-  proxy.resetForm("variableRef");
 }
 
 /** 搜索按钮操作 */
@@ -183,43 +172,41 @@ function handleVariableTypeChange(value) {
     form.value.builtInVariable = null;
     form.value.variableContent = '';
   } else {
-    form.value.variableContent = '';
+    form.value.variableContent = ''; 
   }
 }
 
 /** 提交按钮 */
-function submitForm() {
-  proxy.$refs["variableRef"].validate(async (valid) => {
-    if (valid) {
-      try {
-        let result;
-        if (form.value.variableId != null) {
-          result = await updateVariable(form.value);
-          proxy.$modal.msgSuccess("编辑成功");
-        } else {
-          result = await addVariable(form.value);
-          proxy.$modal.msgSuccess("新增成功");
-        }
-
-        // 关闭对话框并刷新列表
-        open.value = false;
-        getList();
-      } catch (error) {
-        ElMessage.error('操作失败');
-      }
+async function submitForm() {
+  try {
+    submitLoading.value = true;
+    if (form.value.variableId != null) {
+      await updateVariable(form.value);
+      proxy.$modal.msgSuccess("编辑成功");
+    } else {
+      await addVariable(form.value);
+      proxy.$modal.msgSuccess("新增成功");
     }
-  });
+
+    // 关闭对话框并刷新列表
+    open.value = false;
+    getList();
+  } catch (error) {
+    ElMessage.error('操作失败');
+  } finally {
+    submitLoading.value = false;
+  }
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _variableIds = row.variableId || ids.value;
-  proxy.$modal.confirm('是否确认删除变量管理编号为"' + _variableIds + '"的数据项？').then(function () {
-    return delVariable(_variableIds);
+  proxy.$modal.confirm('是否确认删除变量管理编号为"' + _variableIds + '"的数据项？').then(function() {
+   return delVariable(_variableIds);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => { });
+  }).catch(() => {});
 }
 
 /** 导出按钮操作 */
@@ -229,90 +216,21 @@ function handleExport() {
   }, `variable_${new Date().getTime()}.xlsx`)
 }
 
-getList();
-</script>
-<style scoped>
-.app-container {
-  padding: 20px;
-}
-
-.el-form,
-.el-table,
-.el-dialog {
-  margin-bottom: 20px;
-}
-
-/* Table */
-.el-table {
-  margin-top: 20px;
-}
-
-.el-table th>.cell {
-  color: #303133;
-  font-weight: bold;
-}
-
-.el-table td {
-  padding: 10px;
-}
-
-/* Form */
-.el-form-item {
-  margin-bottom: 10px;
-}
-
-.el-input,
-.el-select {
-  width: 100%;
-}
-
-/* Dialog */
-.el-dialog {
-  border-radius: 12px;
-}
-
-.el-dialog__header {
-  background-color: #f5f7fa;
-  padding: 15px;
-  border-bottom: 1px solid #ebeef5;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-}
-
-.el-dialog__footer {
-  border-top: 1px solid #ebeef5;
-  border-bottom-left-radius: 12px;
-  border-bottom-right-radius: 12px;
-}
-
-/* Input fields */
-.el-input__inner {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-/* Select dropdown */
-.el-select .el-input__inner {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-/* Textarea */
-.el-textarea__inner {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-/* Icons */
-.el-icon {
-  color: #409eff;
+// 格式化变量内容展示
+function formatVariableContent(item) {
+  // 内置变量的显示文本配置
+  const labels = {
+    'time': '发送时间',
+    'date': '发送日期',
+    'datetime': '发送日期+时间',
+    'addresser': '发件人',
+    'recipients': '收件人',
+    'RandomnDigits': '随机数字',
+    'RandomnCharacters': '随机字母',
+    'RandomNDigitLetters': '随机数字+字母'
+  };
+  return item.variableType === '内置变量' ? labels[item.variableContent] || item.variableContent : item.variableContent;
 }
 
-/* Hover effects */
-.el-button:hover {
-  cursor: pointer;
-}
-</style>
\ No newline at end of file
+getList();
+</script>    
\ No newline at end of file