From 21d29cd6f08a5186de78cabc31c3cbe5d5a24a2d Mon Sep 17 00:00:00 2001
From: ldrop <ldrop>
Date: Wed, 2 Jul 2025 13:36:18 +0800
Subject: [PATCH 1/2] t

---
 src/api/modelMessage/messageSystem.js         |  70 +--
 src/api/modelMessage/template.js              |   8 +
 src/api/modelMessage/variable.js              |  12 -
 .../modelMessage/messageSystem/addMessage.vue | 334 ----------
 .../messageSystem/components/addMessage.vue   | 243 ++++++++
 .../components/messageContent.vue             | 213 +++++++
 .../components/recipientSelector.vue          | 354 +++++++++++
 .../{ => components}/smallBell.vue            |  98 ++-
 .../modelMessage/messageSystem/index.vue      | 472 +++++++++-----
 .../components/TemplateFormDialog.vue         | 278 +++++++++
 .../components/TemplatePreviewDialog.vue      | 110 ++++
 src/views/modelMessage/template/index.vue     | 268 ++++----
 .../components/VariableFormDialog.vue         | 476 ++++++++++++++
 src/views/modelMessage/variable/index.vue     | 590 +++++++++++++-----
 14 files changed, 2631 insertions(+), 895 deletions(-)
 delete mode 100644 src/views/modelMessage/messageSystem/addMessage.vue
 create mode 100644 src/views/modelMessage/messageSystem/components/addMessage.vue
 create mode 100644 src/views/modelMessage/messageSystem/components/messageContent.vue
 create mode 100644 src/views/modelMessage/messageSystem/components/recipientSelector.vue
 rename src/views/modelMessage/messageSystem/{ => components}/smallBell.vue (44%)
 create mode 100644 src/views/modelMessage/template/components/TemplateFormDialog.vue
 create mode 100644 src/views/modelMessage/template/components/TemplatePreviewDialog.vue
 create mode 100644 src/views/modelMessage/variable/components/VariableFormDialog.vue

diff --git a/src/api/modelMessage/messageSystem.js b/src/api/modelMessage/messageSystem.js
index 45b32ca..e0b3677 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 4c07791..00af09f 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 048db50..76ceb37 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 ec55464..0000000
--- 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 0000000..218666e
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/components/addMessage.vue
@@ -0,0 +1,243 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="title" width="700px" destroy-on-close :close-on-click-modal="false" @closed="handleClosed" class="message-dialog">
+  <div class="form-container">
+    <el-form ref="messageSystemFormRef" :model="form" :rules="rules" label-width="80px" class="message-form" v-loading="loading" element-loading-text="消息发送中...">
+      <!-- 基本信息区域 -->
+      <div class="form-section"><div class="section-title"><el-icon><Document /></el-icon> 基本信息</div>
+
+      <el-row :gutter="16"><el-col :span="24"><el-form-item label="标题" prop="messageTitle"><el-input v-model="form.messageTitle" placeholder="请输入消息标题" clearable /></el-form-item></el-col></el-row>
+
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="发送方式" prop="sendMode">
+            <el-select v-model="form.sendMode" placeholder="选择发送方式" clearable style="width: 100%" @change="handleSendModeChange">
+              <el-option v-for="dict in send_mode" :key="dict.value" :label="dict.label" :value="dict.value">
+                <div class="option-with-icon">
+                  <el-icon v-if="dict.value === '0'"><MessageBox /></el-icon>
+                  <el-icon v-else-if="dict.value === '1'"><PhoneFilled /></el-icon>
+                  <el-icon v-else-if="dict.value === '2'"><Message /></el-icon>
+                  {{ dict.label }}
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="消息类型" prop="messageType">
+            <el-select v-model="form.messageType" placeholder="选择消息类型" clearable 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>
+
+      <!-- 消息内容组件 -->
+      <MessageContent :send-mode="form.sendMode" @update:contentType="form.contentType = $event" @update:messageContent="form.messageContent = $event" ref="messageContentRef" />
+
+      <!-- 收件人选择组件 -->
+      <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>
+
+    <div class="dialog-footer">
+      <el-button @click="toggleDialog">取 消</el-button>
+      <el-button type="primary" @click="submitForm" :loading="loading" class="send-button"><el-icon><Promotion /></el-icon> 发送消息</el-button>
+    </div>
+  </div>
+</el-dialog>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance, defineProps, defineEmits, defineExpose } from 'vue';
+import { batchAddMessage } from '@/api/modelMessage/messageSystem';
+import { ElMessage } from 'element-plus';
+import { Message, Document, MessageBox, PhoneFilled, Promotion } from '@element-plus/icons-vue';
+import MessageContent from './MessageContent.vue';
+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 messageContentRef = 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 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 submitForm() {
+  loading.value = true;
+  try {
+    // 表单验证
+    await messageSystemFormRef.value.validate();
+    // 从子组件获取收件人信息
+    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
+  };
+
+  // 重置子组件
+  if (messageContentRef.value) {
+    messageContentRef.value.reset();
+  }
+  if (recipientSelectorRef.value) {
+    recipientSelectorRef.value.reset();
+  }
+}
+
+// 切换对话框显示状态
+function toggleDialog() {
+  dialogVisible.value = !dialogVisible.value;
+  if (!dialogVisible.value) {
+    reset();
+    emit('close');
+    loading.value = false;
+  }
+}
+
+// 对话框关闭处理
+function handleClosed() {
+  reset();
+  emit('close');
+  loading.value = false;
+}
+
+// 暴露方法给父组件
+defineExpose({
+  open: () => {
+    dialogVisible.value = true;
+  }
+});
+</script>
+
+<style scoped>
+.message-dialog {
+  border-radius: 12px;
+}
+
+.form-container {
+  padding: 10px;
+}
+
+.form-section {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f0f2f5;
+  padding-bottom: 6px;
+  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title .el-icon {
+  margin-right: 8px;
+  color: #409EFF;
+  font-size: 16px;
+}
+
+.option-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.option-with-icon .el-icon {
+  margin-right: 6px;
+  font-size: 14px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f2f5;
+}
+
+.send-button {
+  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
+  border: none;
+  border-radius: 6px;
+  padding: 10px 20px;
+  font-weight: 500;
+}
+
+.send-button:hover {
+  background: linear-gradient(135deg, #337ecc 0%, #5daf34 100%);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/components/messageContent.vue b/src/views/modelMessage/messageSystem/components/messageContent.vue
new file mode 100644
index 0000000..63ea5a9
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/components/messageContent.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="message-content">
+    <div class="section-title">
+      <el-icon><ChatDotRound /></el-icon> 消息内容
+    </div>
+    
+    <!-- 内容类型选择 -->
+    <el-row>
+      <el-col :span="24">
+        <div class="content-type-selector">
+          <div class="type-label">内容类型:</div>
+          <el-radio-group v-model="contentType" @change="handleContentTypeChange" size="default">
+            <el-radio label="template">
+              <el-icon><Files /></el-icon> 模板签名
+            </el-radio>
+            <el-radio label="content">
+              <el-icon><EditPen /></el-icon> 消息内容
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </el-col>
+    </el-row>
+    
+    <!-- 内容输入 -->
+    <el-row>
+      <el-col :span="24">
+        <div class="content-input-container">
+          <!-- 模板选择 -->
+          <template v-if="contentType === 'template'">
+            <el-form-item label="模板选择" prop="messageContent">
+              <el-select 
+                v-model="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>
+          </template>
+          
+          <!-- 内容输入 -->
+          <template v-else>
+            <el-form-item label="消息内容" prop="messageContent">
+              <el-input 
+                v-model="messageContent" 
+                type="textarea" 
+                :rows="3" 
+                placeholder="短信格式须为: 模板名?模板参数=值" 
+                maxlength="100" 
+                show-word-limit 
+                @input="handleContentInput" 
+              />
+            </el-form-item>
+          </template>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { selecTemplates } from '@/api/modelMessage/template';
+import { ElMessage } from 'element-plus';
+import { ChatDotRound, Files, EditPen } from '@element-plus/icons-vue';
+
+// Props
+const props = defineProps({
+  sendMode: {
+    type: String,
+    default: ''
+  }
+});
+
+// Emits
+const emit = defineEmits(['update:contentType', 'update:messageContent']);
+
+// 响应式数据
+const contentType = ref('template');
+const messageContent = ref('');
+const templates = ref([]);
+const templateLoading = ref(false);
+
+// 获取模板列表
+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() {
+  messageContent.value = '';
+  emit('update:contentType', contentType.value);
+  emit('update:messageContent', '');
+}
+
+// 处理模板选择变化
+function handleTemplateChange(value) {
+  messageContent.value = value;
+  emit('update:messageContent', value);
+}
+
+// 处理内容输入变化
+function handleContentInput(value) {
+  messageContent.value = value;
+  emit('update:messageContent', value);
+}
+
+// 验证消息内容格式
+function validateMessageContent(value) {
+  if (props.sendMode === '1' && contentType.value === 'content') {
+    const pattern = /^[^?]+?\?[^=]+?=.*$/;
+    if (!pattern.test(value)) {
+      return '短信输入内容格式必须为：模板名?模板参数=值';
+    }
+  }
+  return true;
+}
+
+// 监听发送方式变化
+watch(() => props.sendMode, () => {
+  // 发送方式变化时可能需要重新验证内容格式
+  if (messageContent.value) {
+    const validation = validateMessageContent(messageContent.value);
+    if (validation !== true) {
+      ElMessage.warning(validation);
+    }
+  }
+});
+
+// 初始化
+getTemplates();
+
+// 暴露方法给父组件
+defineExpose({
+  validateContent: () => validateMessageContent(messageContent.value),
+  reset: () => {
+    contentType.value = 'template';
+    messageContent.value = '';
+  },
+  getTemplates
+});
+</script>
+
+<style scoped>
+.message-content {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f0f2f5;
+  padding-bottom: 6px;
+  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title .el-icon {
+  margin-right: 8px;
+  color: #409EFF;
+  font-size: 16px;
+}
+
+.content-type-selector {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.type-label {
+  margin-right: 10px;
+  font-weight: 500;
+  color: #606266;
+  min-width: 70px;
+}
+
+.content-type-selector .el-radio {
+  margin-right: 14px;
+  margin-bottom: 0;
+}
+
+.content-type-selector .el-icon {
+  margin-right: 4px;
+  font-size: 15px;
+}
+
+.content-input-container {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/views/modelMessage/messageSystem/components/recipientSelector.vue b/src/views/modelMessage/messageSystem/components/recipientSelector.vue
new file mode 100644
index 0000000..41b1138
--- /dev/null
+++ b/src/views/modelMessage/messageSystem/components/recipientSelector.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="recipient-selector">
+    <div class="section-title">
+      <el-icon><User /></el-icon> 收件人信息
+    </div>
+    
+    <!-- 收件人类型选择 -->
+    <el-row>
+      <el-col :span="24">
+        <div class="recipient-type-selector">
+          <div class="type-label">收件人类型:</div>
+          <el-radio-group v-model="recipientType" @change="handleTypeChange">
+            <el-radio v-for="type in recipientTypes" :key="type.value" :label="type.value">
+              <el-icon v-if="type.value === 'user'"><User /></el-icon>
+              <el-icon v-else-if="type.value === 'role'"><Avatar /></el-icon>
+              <el-icon v-else-if="type.value === 'dept'"><OfficeBuilding /></el-icon>
+              {{ type.label }}
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </el-col>
+    </el-row>
+    
+    <!-- 收件人选择 -->
+    <el-row v-if="recipientType && options.length > 0" class="recipient-row">
+      <el-col :span="24">
+        <el-form-item :label="selectedLabel" prop="messageRecipient">
+          <!-- 部门树形选择 -->
+          <div v-if="recipientType === 'dept'">
+            <el-tree-select 
+              v-model="selectedRecipients" 
+              :data="options" 
+              placeholder="请选择部门" 
+              clearable 
+              :props="{ value: 'deptId', label: 'deptName', children: 'children' }" 
+              @change="handleSelectionChange" 
+              multiple 
+              :collapse-tags="false" 
+              style="width: 500px" 
+            />
+          </div>
+          <!-- 用户/角色选择 -->
+          <div v-else>
+            <el-select 
+              v-model="selectedRecipients" 
+              placeholder="请选择收件人" 
+              @change="handleSelectionChange" 
+              multiple 
+              style="width: 500px"
+            >
+              <el-option 
+                v-for="item in options" 
+                :key="item.id" 
+                :label="item.name" 
+                :value="item.id" 
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    
+    <!-- 联系方式显示 -->
+    <el-row v-if="contactInfo">
+      <el-col :span="24">
+        <el-form-item label="接收号码">
+          <el-input v-model="contactInfo" placeholder="接收人联系方式" disabled />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { getSystemResource } from '@/api/modelMessage/messageSystem';
+import { ElMessage } from 'element-plus';
+import { User, Avatar, OfficeBuilding } from '@element-plus/icons-vue';
+
+// 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>
+
+<style scoped>
+.recipient-selector {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f0f2f5;
+  padding-bottom: 6px;
+  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title .el-icon {
+  margin-right: 8px;
+  color: #409EFF;
+  font-size: 16px;
+}
+
+.recipient-type-selector {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.type-label {
+  margin-right: 10px;
+  font-weight: 500;
+  color: #606266;
+  min-width: 70px;
+}
+
+.recipient-type-selector .el-radio {
+  margin-right: 14px;
+  margin-bottom: 0;
+}
+
+.recipient-type-selector .el-icon {
+  margin-right: 4px;
+  font-size: 15px;
+}
+
+.recipient-row {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/views/modelMessage/messageSystem/smallBell.vue b/src/views/modelMessage/messageSystem/components/smallBell.vue
similarity index 44%
rename from src/views/modelMessage/messageSystem/smallBell.vue
rename to src/views/modelMessage/messageSystem/components/smallBell.vue
index 443a02f..607034c 100644
--- a/src/views/modelMessage/messageSystem/smallBell.vue
+++ b/src/views/modelMessage/messageSystem/components/smallBell.vue
@@ -1,17 +1,16 @@
 <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-button type="text" @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">
+    <div v-if="latestNotifications.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)">
+        <li style="cursor: pointer;" v-for="(item, index) in latestNotifications" :key="index" @click="viewDetails(item)">
           {{ item.messageTitle }}
         </li>
       </ul>
@@ -22,31 +21,17 @@
   </el-popover>
 </template>
 
-<script setup name="NotificationBell">
-import { ref, computed } from 'vue';
+<script setup name="SmallBell">
+import { ref } 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;
+    const response = await listMessageSystem()
     latestNotifications.value = response.rows.slice(0, 5);
   } catch (error) {
     console.error('获取信息失败:', error);
@@ -67,20 +52,77 @@ defineExpose({ fetchLatestMessages });
 
 <style scoped>
 .notification-list {
-  background-color: #f8f9fa;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 10px;
+  background: linear-gradient(135deg, #ffffff, #f8f9fa);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 12px;
+  margin: 0;
 }
 
 .notification-list li {
   list-style-type: none;
-  padding: 5px 0;
-  cursor: pointer;
+  padding: 10px 15px;
+  margin: 5px 0;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  font-size: 14px;
+  color: #333;
+  background: rgba(255, 255, 255, 0.7);
+  border-left: 3px solid #00aaff;
 }
 
 .notification-list li:hover {
-  background-color: #e0e0e0;
+  background: #e8f6ff;
+  transform: translateX(5px);
+  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.2);
+}
+
+.notification-list li::before {
+  content: '';
+  position: absolute;
+  left: -100%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: 0.5s;
+}
+
+.notification-list li:hover::before {
+  left: 100%;
+}
+
+@keyframes bellRing {
+  0% { transform: rotate(0); }
+  20% { transform: rotate(15deg); }
+  40% { transform: rotate(-15deg); }
+  60% { transform: rotate(7deg); }
+  80% { transform: rotate(-7deg); }
+  100% { transform: rotate(0); }
+}
+
+.el-button:hover .el-icon {
+  animation: bellRing 0.8s ease;
+}
+
+h4 {
   color: #333;
+  font-size: 16px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #00aaff;
+}
+
+.el-popover {
+  border-radius: 10px;
+  border: none;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
 }
 </style>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/index.vue b/src/views/modelMessage/messageSystem/index.vue
index 8e87bff..f9e0a3b 100644
--- a/src/views/modelMessage/messageSystem/index.vue
+++ b/src/views/modelMessage/messageSystem/index.vue
@@ -1,96 +1,147 @@
 <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">
-          <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 class="message-system-container">
+    <!-- 优化后的搜索区域 - 删除收起功能 -->
+    <div class="search-panel">
+      <div class="search-panel-header">
+        <div class="header-icon"><el-icon><Search /></el-icon></div>
+        <span class="header-title">高级筛选</span>
+      </div>
+      <div class="search-panel-content">
+        <el-form :model="queryParams" ref="queryRef" :inline="true">
+          <el-form-item label="消息标题" prop="messageTitle">
+            <el-input v-model="queryParams.messageTitle" placeholder="请输入标题关键词" clearable prefix-icon="Search" @keyup.enter="handleQuery" class="custom-input" />
+          </el-form-item>
+          <el-form-item label="消息状态" prop="messageStatus">
+            <el-select v-model="queryParams.messageStatus" placeholder="请选择消息状态" clearable class="custom-select">
+              <el-option v-for="dict in message_status" :key="dict.value" :label="dict.label" :value="dict.value">
+                <div class="option-with-dot">
+                  <span class="status-dot" :class="dict.value === '0' ? 'status-unread' : 'status-read'"></span>{{ dict.label }}
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item class="search-actions">
+            <el-button type="primary" @click="handleQuery" class="search-btn"><el-icon><Search /></el-icon><span>搜索</span></el-button>
+            <el-button @click="resetQuery" class="reset-btn"><el-icon><RefreshRight /></el-icon><span>重置</span></el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 优化后的操作按钮区域 - 删除收起筛选按钮 -->
+    <div class="action-toolbar">
+      <div class="left-actions">
+        <el-tooltip content="发送新消息" placement="top">
+          <el-button type="primary" class="action-btn send-btn" @click="handleAdd" v-hasPermi="['modelMessage:messageSystem:add']"><el-icon><Plus /></el-icon><span>发送信息</span></el-button>
+        </el-tooltip>
+        <el-tooltip content="删除选中的消息" placement="top">
+          <el-button type="danger" class="action-btn delete-btn" :disabled="multiple" @click="handleDelete"><el-icon><Delete /></el-icon><span>批量删除</span></el-button>
+        </el-tooltip>
+      </div>
+      <div class="right-actions">
+        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" class="custom-toolbar"></right-toolbar>
+      </div>
+    </div>
+   
+    <!-- 表格区域 -->
+    <div class="message-card">
+      <div class="message-card-header">
+        <div class="left"><div class="title-icon"><el-icon><ChatDotRound /></el-icon></div><h3 class="title">消息列表</h3></div>
+        <div class="right"><div class="total-badge">共 <span class="highlight">{{ total }}</span> 条消息</div></div>
+      </div>
+      
+      <div class="table-container">
+        <el-table v-loading="loading" :data="messageSystemList" @selection-change="handleSelectionChange" border class="message-table">
+          <el-table-column type="selection" width="40" align="center" />
+          <el-table-column label="消息标题" prop="messageTitle" min-width="30%" width="auto">
+            <template #default="scope">
+              <div class="msg-title-cell" @click="openDrawer(scope.row.messageId)">
+                <el-icon class="envelope-icon"><Message /></el-icon>
+                <span class="msg-text">{{ scope.row.messageTitle }}</span>
+                <div class="status-dot" :class="getStatusClass(scope.row.messageStatus)" :title="getStatusLabel(scope.row.messageStatus)"></div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发件人" prop="createBy" min-width="15%" width="auto" align="center">
+            <template #default="scope">
+              <div class="sender-wrapper">
+                <el-avatar :size="28" class="sender-avatar" :style="getRandomAvatarColor(scope.row.createBy)">{{ scope.row.createBy.substring(0, 1).toUpperCase() }}</el-avatar>
+                <span class="sender-name">{{ scope.row.createBy }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发送时间" prop="createTime" min-width="18%" width="auto" align="center">
+            <template #default="scope"><span class="time-text">{{ formatDate(scope.row.createTime) }}</span></template>
+          </el-table-column>
+          <el-table-column label="状态" min-width="10%" width="auto" align="center">
+            <template #default="scope">
+              <el-tag :type="getTagType(scope.row.messageStatus)" size="small" effect="light" class="status-tag">{{ getStatusLabel(scope.row.messageStatus) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" min-width="15%" width="auto" align="center">
+            <template #default="scope">
+              <div class="op-buttons">
+                <el-button type="primary" link size="small" @click.stop="openDrawer(scope.row.messageId)"><el-icon><View /></el-icon>查看</el-button>
+                <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)"><el-icon><Delete /></el-icon>删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <!-- 空数据展示 -->
+        <div v-if="!loading && messageSystemList.length === 0" class="empty-data">
+          <el-empty description="暂无消息数据">
+            <el-button type="primary" size="small" @click="handleAdd" v-hasPermi="['modelMessage:messageSystem:add']"><el-icon><Plus /></el-icon>发送新消息</el-button>
+          </el-empty>
+        </div>
+      </div>
+      
+      <!-- 分页区域 -->
+      <div class="table-footer" v-if="total > 0">
+        <el-pagination background layout="total, sizes, prev, pager, next" :total="total" :page-size="queryParams.pageSize" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      </div>
+    </div>
+    
+    <!-- 发送信息组件 -->
+    <AddMessage ref="sendMessageRef" @success="handleSendSuccess"/>
+    
+    <!-- 信息详情弹窗 -->
+    <el-dialog :title="title" v-model="drawerVisible" width="600px" destroy-on-close class="message-detail-dialog">
+      <div class="message-detail-content">
+        <div class="message-header">
+          <h2 class="message-detail-title">{{ detailForm.messageTitle }}</h2>
+          <div class="message-meta">
+            <div class="sender-info">
+              <el-avatar :size="36" class="sender-detail-avatar" :style="getRandomAvatarColor(detailForm.createBy)">{{ detailForm.createBy ? detailForm.createBy.substring(0, 1).toUpperCase() : '' }}</el-avatar>
+              <div class="sender-detail">
+                <div class="sender-name">{{ detailForm.createBy }}</div>
+                <div class="send-time">{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
+              </div>
+            </div>
+            <el-tag :type="getTagType(detailForm.messageStatus)" effect="dark" class="detail-status-tag">{{ getStatusLabel(detailForm.messageStatus) }}</el-tag>
+          </div>
+        </div>
+        <div class="message-body"><p class="message-content">{{ detailForm.messageContent }}</p></div>
+        <div class="message-footer">
+          <div class="info-grid">
+            <div class="info-item"><div class="info-icon"><el-icon><User /></el-icon></div><span class="label">收件人:</span><span class="value">{{ detailForm.messageRecipient }}</span></div>
+            <div class="info-item"><div class="info-icon"><el-icon><Operation /></el-icon></div><span class="label">发送方式:</span><span class="value"><dict-tag :options="send_mode" :value="detailForm.sendMode" /></span></div>
+            <div class="info-item"><div class="info-icon"><el-icon><InfoFilled /></el-icon></div><span class="label">消息类型:</span><span class="value"><dict-tag :options="message_type" :value="detailForm.messageType" /></span></div>
+            <div class="info-item" v-if="detailForm.remark"><div class="info-icon"><el-icon><Document /></el-icon></div><span class="label">备注:</span><span class="value">{{ detailForm.remark }}</span></div>
+          </div>
+        </div>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup name="MessageSystem">
-import { ref, reactive, computed, toRefs, getCurrentInstance } from 'vue';
+import { ref, reactive, toRefs, getCurrentInstance, computed } 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 messageSystemList = ref([]);
 const loading = ref(true);
@@ -167,98 +218,197 @@ 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;
+function getStatusClass(status) {
+  const statusMap = {
+    '0': 'status-unread',
+    '1': 'status-read'
+  };
+  return statusMap[status] || 'status-default';
 }
 
-.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;
+function getStatusLabel(status) {
+  const statusMap = {
+    '0': '未读',
+    '1': '已读'
+  };
+  return statusMap[status] || '未知';
 }
 
-.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);
+function getTagType(status) {
+  const typeMap = {
+    '0': 'danger',
+    '1': 'success'
+  };
+  return typeMap[status] || 'info';
 }
 
-.el-dialog {
-  background-color: #f0f4ff;
-  border-radius: 8px;
+function getRandomAvatarColor(seed) {
+  const colors = [
+    'linear-gradient(135deg, #667eea, #764ba2)',
+    'linear-gradient(135deg, #43e97b, #38f9d7)',
+    'linear-gradient(135deg, #fa709a, #fee140)',
+    'linear-gradient(135deg, #6a11cb, #2575fc)',
+    'linear-gradient(135deg, #f093fb, #f5576c)'
+  ];
+  const index = seed ? seed.length % colors.length : 0;
+  return { background: colors[index] };
 }
 
-.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;
-}
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  if (isNaN(date)) return dateString;
+  
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  
+  if (date.toDateString() === today.toDateString()) {
+    return '今天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  } else if (date.toDateString() === yesterday.toDateString()) {
+    return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  } else if (date.getFullYear() === today.getFullYear()) {
+    return (date.getMonth() + 1) + '月' + date.getDate() + '日 ' + 
+           date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  }
+  
+  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
+};
 
-.custom-dialog {
-  background-color: #f8f9fa;
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
+// 分页处理
+const handleSizeChange = (size) => {
+  queryParams.value.pageSize = size;
+  getList();
+};
 
-.dict-tag {
-  background-color: #e0f7fa;
-  color: #009688;
-  padding: 4px 8px;
-  border-radius: 4px;
-  border: 1px solid #b2ebf2;
-}
+const handleCurrentChange = (page) => {
+  queryParams.value.pageNum = page;
+  getList();
+};
 
-.dict-tag:hover {
-  background-color: #b2ebf2;
-  color: #00695c;
-}
+getList();
+</script>
+<style scoped>
+/* 全局布局 */
+.message-system-container{padding:16px;background:#f5f7fa;min-height:100vh}
+.message-card{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.1);margin-bottom:16px}
+.message-card-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0}
+.left{display:flex;align-items:center}
+.right{display:flex;align-items:center}
+.title-icon{width:32px;height:32px;border-radius:6px;background:#409EFF;display:flex;align-items:center;justify-content:center}
+.title-icon .el-icon{color:white;font-size:18px}
+.title{margin:0 0 0 10px;font-size:16px;font-weight:500}
+.total-badge{font-size:13px;color:#606266;background:#f6f8fa;border-radius:20px;padding:4px 12px}
+.highlight{color:#409EFF;font-weight:500}
+
+/* 表格容器 */
+.table-container{padding:12px}
+.message-table{width:100%}
+:deep(.el-table__header) th{background-color:#f5f7fa;font-weight:500;height:45px;padding:8px 0}
+:deep(.el-table__row){transition:all 0.2s}
+:deep(.el-table__row:hover){background-color:#f0f7ff}
+:deep(.el-table .cell){padding:8px 5px}
+:deep(.el-table__body-wrapper){overflow-x:hidden}
+:deep(.el-table){table-layout:fixed}
+
+/* 消息标题单元格 */
+.msg-title-cell{display:flex;align-items:center;padding:6px 0;cursor:pointer;position:relative}
+.envelope-icon{color:#409EFF;margin-right:8px;font-size:16px;flex-shrink:0}
+.msg-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
+.status-dot{width:8px;height:8px;border-radius:50%;margin-left:8px;flex-shrink:0}
+.status-unread{background-color:#f56c6c;box-shadow:0 0 0 2px rgba(245,108,108,0.2)}
+.status-read{background-color:#67c23a;box-shadow:0 0 0 2px rgba(103,194,58,0.2)}
+
+/* 发件人单元格 */
+.sender-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}
+.sender-avatar{border:1px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
+.sender-name{font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
+
+/* 时间文本 */
+.time-text{font-size:13px;color:#606266}
+
+/* 状态标签 */
+.status-tag{padding:4px 8px}
+
+/* 操作按钮 */
+.op-buttons{display:flex;justify-content:center;gap:8px}
+.op-buttons .el-button{padding:6px;min-height:28px}
+.op-buttons .el-button .el-icon{margin-right:4px}
+
+/* 空数据 */
+.empty-data{text-align:center;padding:30px 0}
+
+/* 表格页脚 */
+.table-footer{padding:12px 16px;border-top:1px solid #ebeef5;text-align:right}
+
+/* 重新设计的搜索面板 */
+.search-panel{background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.05);margin-bottom:20px;overflow:hidden}
+.search-panel-header{display:flex;align-items:center;height:54px;padding:0 20px;background:linear-gradient(90deg,#f8f9fc 0%,#f2f5fa 100%);border-bottom:1px solid #eef0f5}
+.header-icon{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#4b9dff,#2d84ea);display:flex;align-items:center;justify-content:center}
+.header-icon .el-icon{color:#fff;font-size:16px}
+.header-title{margin-left:12px;font-size:15px;font-weight:500;color:#2c3e50}
+.search-panel-content{padding:15px 20px}
+
+/* 自定义表单样式 */
+.custom-input{width:220px;transition:all 0.3s}
+.custom-input:hover,:deep(.custom-input:focus-within){box-shadow:0 0 0 2px rgba(64,158,255,0.2)}
+.custom-select{width:180px;transition:all 0.3s}
+.custom-select:hover,:deep(.custom-select:focus-within){box-shadow:0 0 0 2px rgba(64,158,255,0.2)}
+.search-actions{margin-left:10px}
+:deep(.el-input__wrapper),:deep(.el-select .el-input__wrapper){box-shadow:0 0 0 1px rgba(220,223,230,0.6) inset;padding:1px 11px;border-radius:6px}
+:deep(.el-input__wrapper:hover),:deep(.el-select .el-input__wrapper:hover){box-shadow:0 0 0 1px #c0c4cc inset}
+:deep(.el-form-item__label){color:#606266;font-weight:500}
+.option-with-dot{display:flex;align-items:center;gap:5px}
+
+/* 自定义按钮样式 */
+.search-btn{padding:0 20px;height:36px;background:linear-gradient(90deg,#3a8ee6,#5ca9fd);border:none;border-radius:6px;color:white;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:5px}
+.search-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(64,158,255,0.3)}
+.search-btn:active{transform:translateY(0);opacity:0.9}
+.reset-btn{padding:0 20px;height:36px;background:#fff;border:1px solid #dcdfe6;border-radius:6px;color:#606266;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:5px}
+.reset-btn:hover{border-color:#409EFF;color:#409EFF}
+
+/* 操作工具栏 */
+.action-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 15px rgba(0,0,0,0.05)}
+.left-actions{display:flex;align-items:center;gap:10px}
+.right-actions{display:flex;align-items:center}
+
+/* 操作按钮 */
+.action-btn{height:38px;border-radius:6px;transition:all 0.3s;font-weight:500;display:flex;align-items:center;gap:5px}
+.action-btn .el-icon{font-size:16px}
+.action-btn:hover{transform:translateY(-2px)}
+.send-btn{background:linear-gradient(90deg,#3a8ee6,#5ca9fd);border:none;padding:8px 16px;color:#fff}
+.send-btn:hover{box-shadow:0 4px 12px rgba(64,158,255,0.3)}
+.delete-btn{background:linear-gradient(90deg,#f56c6c,#fa8c8c);border:none;padding:8px 16px;color:#fff}
+.delete-btn:hover:not(:disabled){box-shadow:0 4px 12px rgba(245,108,108,0.3)}
+.delete-btn:disabled{background:#f7f7f7;color:#c0c4cc;border:1px solid #e4e7ed;cursor:not-allowed}
+.refresh-btn{background:#fff;color:#606266;border:1px solid #dcdfe6;padding:8px 16px}
+.refresh-btn:hover{border-color:#409EFF;color:#409EFF}
+.custom-toolbar{margin-left:10px}
+
+/* 详情弹窗 */
+.message-detail-dialog :deep(.el-dialog__header){background:#409EFF;color:white;padding:15px;border-radius:8px 8px 0 0}
+.message-detail-dialog :deep(.el-dialog__title){color:white}
+.message-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close){color:white}
+.message-detail-content{padding:20px}
+.message-header{margin-bottom:20px;border-bottom:1px solid #ebeef5;padding-bottom:15px}
+.message-detail-title{font-size:18px;margin-bottom:15px;font-weight:600}
+.message-meta{display:flex;justify-content:space-between;align-items:center}
+.sender-info{display:flex;align-items:center}
+.sender-detail{margin-left:10px}
+.sender-name{font-weight:500}
+.send-time{font-size:12px;color:#999}
+.message-body{background:#f9fbfd;padding:15px;border-radius:8px;margin-bottom:20px;min-height:100px;border-left:3px solid #409EFF}
+.message-content{white-space:pre-line;line-height:1.6}
+.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
+.info-item{display:flex;align-items:center}
+.info-icon{width:24px;height:24px;border-radius:50%;background:rgba(64,158,255,0.1);display:flex;align-items:center;justify-content:center;margin-right:8px}
+.info-item .label{color:#909399;margin-right:5px;font-weight:500}
+.info-item .value{color:#303133}
 </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 0000000..4a95880
--- /dev/null
+++ b/src/views/modelMessage/template/components/TemplateFormDialog.vue
@@ -0,0 +1,278 @@
+<template>
+  <!-- 添加或修改模版管理对话框 -->
+  <el-dialog :title="title" :modelValue="visible" @update:modelValue="emit('update:visible', $event)" width="680px" append-to-body destroy-on-close custom-class="template-dialog">
+    <el-form ref="templateRef" :model="form" :rules="rules" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="模版名称" prop="templateName">
+            <el-input v-model="form.templateName" placeholder="请输入模版名称">
+              <template #prefix>
+                <el-icon><DocumentAdd /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="模版CODE" prop="templateCode">
+            <el-input v-model="form.templateCode" placeholder="请输入模版CODE" @blur="validateTemplateCode">
+              <template #prefix>
+                <el-icon><Document /></el-icon>
+              </template>
+            </el-input>
+            <div class="form-tips">CODE必须以SMS_开头</div>
+          </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">
+                <div class="type-option">
+                  <el-icon><Message /></el-icon>
+                  <span>{{ dict.label }}</span>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <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">
+                <div class="variable-option">
+                  <span class="variable-name">{{ item.variableName }}</span>
+                  <span class="variable-content">${{ item.variableName }}</span>
+                </div>
+              </el-option>
+            </el-select>
+            <div class="variable-selected" v-if="form.templateVariable?.length > 0">
+              <span class="selected-label">已选变量：</span>
+              <div class="variable-tags">
+                <el-tag v-for="(varName, index) in form.templateVariable" :key="index" 
+                  size="small" class="variable-tag" effect="light" color="#ecf5ff">
+                  {{ varName }}
+                </el-tag>
+              </div>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="模版内容" prop="templateContent">
+            <div class="content-editor-container">
+              <div class="editor-section">
+                <div class="editor-header">
+                  <el-icon><Edit /></el-icon>
+                  <span>编辑区域</span>
+                </div>
+                <div class="editor-wrapper">
+                  <el-input v-model="form.templateContent" type="textarea" :rows="6" placeholder="请输入模版内容"
+                    resize="none" class="template-textarea"/>
+                </div>
+                <div class="template-tips">
+                  <el-icon><InfoFilled /></el-icon>
+                  选中变量后会自动添加到模版内容中
+                </div>
+              </div>
+              <div class="preview-section" v-if="form.templateContent">
+                <div class="preview-header">
+                  <el-icon><View /></el-icon>
+                  <span>实时预览</span>
+                </div>
+                <div class="preview-body">{{ form.templateContent }}</div>
+              </div>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="场景说明" prop="remark">
+            <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 @click="handleCancel" plain>取 消</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="TemplateFormDialog">
+import { ref, reactive, toRefs, getCurrentInstance, watch } from 'vue';
+import { Document, Message, InfoFilled, DocumentAdd, Edit, View, Memo } from '@element-plus/icons-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' }],
+    remark: [{ required: true, message: '请输入场景说明', trigger: 'blur' }],
+    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(rule, value, callback) {
+  if (!value) {
+    callback(new Error('请输入模版CODE'));
+  } else if (!value.startsWith('SMS_')) {
+    callback(new Error('模版CODE必须以SMS_开头'));
+  } else {
+    callback();
+  }
+}
+
+// 当变量选项改变时触发
+function handleVariableChange(value) {
+  // 保存当前模板内容光标位置
+  const textarea = document.querySelector('.editor-wrapper textarea');
+  const cursorPos = textarea ? textarea.selectionStart : -1;
+
+  // 原有逻辑
+  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)) {
+      if (cursorPos >= 0) {
+        // 在光标位置插入
+        const before = form.value.templateContent.substring(0, cursorPos);
+        const after = form.value.templateContent.substring(cursorPos);
+        form.value.templateContent = `${before} ${variablePlaceholder} ${after}`;
+      } else {
+        // 原来的方式：追加到末尾
+        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>
+
+<style scoped>
+/* 表单提示样式 */
+.form-tips { color: #909399; font-size: 12px; margin-top: 4px; }
+
+/* 下拉选项样式 */
+.type-option { display: flex; align-items: center; gap: 8px; }
+.variable-option { display: flex; justify-content: space-between; align-items: center; width: 100%; }
+.variable-content { color: #409EFF; font-size: 13px; font-family: monospace; }
+
+/* 已选变量区域 */
+.variable-selected { margin-top: 10px; background: #f9fafc; border-radius: 6px; padding: 10px; border: 1px dashed #dcdfe6; }
+.selected-label { font-size: 12px; color: #606266; margin-right: 8px; }
+.variable-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.variable-tag { margin-right: 0; border-color: #d9ecff; }
+
+/* 内容编辑器区域 */
+.content-editor-container { display: flex; gap: 0; margin-bottom: 10px; border: 1px solid #dcdfe6; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); height: 320px; width:600px }
+.editor-section, .preview-section { width: 50%; display: flex; flex-direction: column; height: 100%; }
+.editor-header, .preview-header { display: flex; align-items: center; gap: 6px; background: #f5f7fa; padding: 10px 12px; border-bottom: 1px solid #e4e7ed; font-size: 13px; color: #606266; font-weight: 500; flex-shrink: 0; }
+.editor-header .el-icon, .preview-header .el-icon { font-size: 16px; color: #409EFF; }
+.editor-wrapper { padding: 12px; background: #fff; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+/* 文本域样式 */
+.template-textarea { width: 100%; height: 100%; }
+:deep(.template-textarea .el-textarea__inner) { height: 100% !important; min-height: unset !important; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 1.6; font-size: 14px; padding: 12px; resize: none; }
+
+.preview-section { border-left: 1px solid #dcdfe6; overflow: hidden; display: flex; flex-direction: column; }
+.preview-body { padding: 15px; flex: 1; overflow-y: auto; background: white; font-size: 14px; white-space: pre-wrap; color: #303133; line-height: 1.6; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
+.template-tips { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #909399; margin: 0 0 10px 0; padding: 8px 12px; background: #f0f9eb; border-radius: 4px; border-left: 3px solid #67c23a; flex-shrink: 0; }
+
+/* 对话框样式 */
+:deep(.template-dialog .el-dialog__header) { padding: 16px 20px; margin-right: 0; background: #409EFF; border-radius: 8px 8px 0 0; }
+:deep(.template-dialog .el-dialog__title) { color: white; font-weight: 600; }
+:deep(.template-dialog .el-dialog__headerbtn .el-dialog__close) { color: rgba(255, 255, 255, 0.9); }
+:deep(.template-dialog .el-dialog__body) { padding: 24px; }
+:deep(.template-dialog .el-dialog__footer) { padding: 12px 20px 16px; border-top: 1px solid #ebeef5; }
+
+/* 响应式布局 */
+@media screen and (max-width: 768px) {
+  .content-editor-container { flex-direction: column; height: auto; }
+  .editor-section, .preview-section { width: 100%; }
+  .preview-section { border-left: none; border-top: 1px solid #dcdfe6; }
+  .editor-wrapper, .preview-body { height: 160px; }
+}
+</style>
diff --git a/src/views/modelMessage/template/components/TemplatePreviewDialog.vue b/src/views/modelMessage/template/components/TemplatePreviewDialog.vue
new file mode 100644
index 0000000..91be1f1
--- /dev/null
+++ b/src/views/modelMessage/template/components/TemplatePreviewDialog.vue
@@ -0,0 +1,110 @@
+<template>
+  <!-- 模板预览对话框 -->
+  <el-dialog title="模板预览" :modelValue="visible" @update:modelValue="emit('update:visible', $event)"
+    width="540px" append-to-body destroy-on-close custom-class="preview-dialog">
+    <div class="preview-container">
+      <div class="template-preview-header">
+        <div class="preview-title">{{ previewData.templateName }}</div>
+        <div class="preview-meta">
+          <el-tag size="small" effect="dark">{{ getTemplatTypeText(previewData.templateType) }}</el-tag>
+          <span class="preview-code">
+            <el-icon><Document /></el-icon>
+            {{ previewData.templateCode }}
+          </span>
+        </div>
+      </div>
+      <div class="message-preview">
+        <div class="message-bubble">
+          <div class="message-content">{{ previewData.templateContent }}</div>
+          <div class="message-time">{{ formatTime() }}</div>
+        </div>
+      </div>
+      <div class="preview-variables-section">
+        <div class="section-title">
+          <el-icon><Collection /></el-icon>
+          <span>模板变量</span>
+        </div>
+        <div class="preview-variables">
+          <el-tag v-for="(item, index) in previewVariables" :key="index" size="small" effect="plain" class="var-tag">
+            {{ item }}
+          </el-tag>
+          <div class="no-variables" v-if="!previewVariables.length">无变量</div>
+        </div>
+      </div>
+      <div class="preview-remark">
+        <div class="section-title">
+          <el-icon><Memo /></el-icon>
+          <span>场景说明</span>
+        </div>
+        <div class="remark-content">{{ previewData.remark || '无' }}</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup name="TemplatePreviewDialog">
+import { ref, computed, getCurrentInstance } from 'vue';
+import { Document, Collection, Memo } from '@element-plus/icons-vue';
+
+const { proxy } = getCurrentInstance();
+const { template_type } = proxy.useDict("template_type");
+
+// Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  previewData: {
+    type: Object,
+    default: () => ({})
+  },
+  previewVariables: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// Emits
+const emit = defineEmits(['update:visible']);
+
+// Methods
+/** 获取模板类型文字 */
+function getTemplatTypeText(type) {
+  const found = template_type.value.find(item => item.value === type);
+  return found ? found.label : '未知类型';
+}
+
+// 添加格式化时间方法
+const formatTime = () => {
+  const now = new Date();
+  const hours = now.getHours().toString().padStart(2, '0');
+  const minutes = now.getMinutes().toString().padStart(2, '0');
+  return `${hours}:${minutes}`;
+};
+</script>
+
+<style scoped>
+/* 预览对话框样式 */
+:deep(.preview-dialog .el-dialog__header) { padding: 16px 20px; margin-right: 0; background: #67c23a; border-radius: 8px 8px 0 0; }
+:deep(.preview-dialog .el-dialog__title) { color: white; font-weight: 600; }
+:deep(.preview-dialog .el-dialog__headerbtn .el-dialog__close) { color: rgba(255, 255, 255, 0.9); }
+:deep(.preview-dialog .el-dialog__body) { padding: 0; }
+
+/* 预览内容样式 */
+.preview-container { background: #f9fafc; }
+.template-preview-header { padding: 16px; border-bottom: 1px solid #ebeef5; }
+.preview-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #303133; }
+.preview-meta { display: flex; align-items: center; gap: 12px; }
+.preview-code { color: #606266; font-size: 13px; display: flex; align-items: center; gap: 4px; }
+.message-preview { background: #ebebeb; padding: 20px; position: relative; min-height: 100px; }
+.message-bubble { max-width: 80%; background: white; border-radius: 8px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: relative; }
+.message-content { color: #333; font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
+.message-time { text-align: right; font-size: 12px; color: #999; margin-top: 6px; }
+.preview-variables-section, .preview-remark { padding: 16px; border-top: 1px solid #ebeef5; }
+.section-title { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 500; color: #303133; }
+.preview-variables { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
+.var-tag { margin-right: 0; }
+.no-variables { color: #909399; font-size: 13px; font-style: italic; }
+.remark-content { background: white; border-radius: 6px; padding: 12px; font-size: 14px; color: #606266; border: 1px solid #ebeef5; min-height: 50px; }
+</style>
diff --git a/src/views/modelMessage/template/index.vue b/src/views/modelMessage/template/index.vue
index a6caa9f..62fb0d1 100644
--- a/src/views/modelMessage/template/index.vue
+++ b/src/views/modelMessage/template/index.vue
@@ -1,10 +1,20 @@
 <template>
-  <div class="app-container">
-    <el-card shadow="never">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+  <div class="template-container">
+    <!-- 搜索区域 -->
+    <el-card class="search-card" shadow="hover">
+      <div class="card-header">
+        <el-icon><Search /></el-icon>
+        <span>搜索条件</span>
+      </div>
+      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
         <el-form-item label="模版名称" prop="templateName">
           <el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable @keyup.enter="handleQuery" />
         </el-form-item>
+        <el-form-item label="模版类型" prop="templateType">
+          <el-select v-model="queryParams.templateType" placeholder="请选择模版类型" clearable style="width:180px">
+            <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>
@@ -12,96 +22,102 @@
       </el-form>
     </el-card>
 
-    <el-card shadow="never" class="mt10">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
+    <!-- 工具栏 -->
+    <el-card class="action-card" shadow="hover">
+      <div class="card-header">
+        <el-icon><Operation /></el-icon>
+        <span>操作面板</span>
+      </div>
+      <div class="action-bar">
+        <div>
           <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">
+          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">批量删除</el-button>
+          <el-button type="success" plain icon="Download" @click="handleExport">导出数据</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 数据表格 -->
+    <el-card class="table-card" shadow="hover">
+      <div class="card-header">
+        <el-icon><List /></el-icon>
+        <span>模版列表</span>
+      </div>
+      <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange"
+        highlight-current-row stripe border>
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="模版名称" align="center" prop="templateName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="模版CODE" align="center" prop="templateCode" min-width="120" show-overflow-tooltip />
+        <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" />
-        <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">
+        <el-table-column label="模版内容" align="center" prop="templateContent" min-width="180" show-overflow-tooltip />
+        <el-table-column label="变量" align="center" prop="templateVariable" min-width="120" show-overflow-tooltip />
+        <el-table-column label="场景说明" align="center" prop="remark" min-width="120" show-overflow-tooltip />
+        <el-table-column label="操作" align="center" width="215">
           <template #default="scope">
             <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button link type="success" icon="View" @click="handlePreview(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" />
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </div>
     </el-card>
 
     <!-- 添加或修改模版管理对话框 -->
-    <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"
+    />
+
+    <!-- 模板预览对话框 -->
+    <TemplatePreviewDialog
+      :visible="previewOpen"
+      :previewData="previewData"
+      :previewVariables="previewVariables"
+      @update:visible="previewOpen = $event"
+    />
   </div>
 </template>
 
 <script setup name="Template">
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/modelMessage/template";
 import { selectVariable } from "@/api/modelMessage/variable";
+import { Search, Operation, List } from '@element-plus/icons-vue';
+import TemplateFormDialog from './components/TemplateFormDialog.vue';
+import TemplatePreviewDialog from './components/TemplatePreviewDialog.vue';
 
 const { proxy } = getCurrentInstance();
 const { template_type } = proxy.useDict("template_type");
 const templateList = ref([]);
 const open = ref(false);
 const loading = ref(true);
-const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const variable = ref([]);
+// 预览数据
+const previewOpen = ref(false);
+const previewData = ref({});
+const previewVariables = ref([]);
+// 组件引用
+const templateFormDialogRef = ref(null);
 
 const data = reactive({
   form: { templateContent: '' },
@@ -111,14 +127,7 @@ const data = reactive({
     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' }]
-  }
+  rules: {}
 });
 
 const { queryParams, form, rules } = toRefs(data);
@@ -145,7 +154,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 +199,41 @@ 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 handlePreview(row) {
+  previewData.value = { ...row };
+  previewVariables.value = row.templateVariable ? row.templateVariable.split('/') : [];
+  previewOpen.value = true;
+}
+
+/** 获取模板类型文字 */
+function getTemplatTypeText(type) {
+  const found = template_type.value.find(item => item.value === type);
+  return found ? found.label : '未知类型';
+}
+
+/** 处理表单提交 */
+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 +260,28 @@ 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;
-}
+.template-container { padding: 16px; min-height: 100vh; background: #f0f2f5; }
 
-.el-form-item {
-  margin-bottom: 18px;
-}
+/* 卡片通用样式 */
+.search-card, .action-card, .table-card { margin-bottom: 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s; }
+.search-card:hover, .action-card:hover, .table-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; }
 
-.dialog-container {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
+/* 卡片标题 */
+.card-header { display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #ebeef5; font-size: 16px; font-weight: 500; color: #303133; }
+.card-header .el-icon { margin-right: 6px; font-size: 18px; color: #409EFF; }
 
-.dialog-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #333;
-}
+/* 操作栏样式 */
+.action-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
 
-.dialog-footer {
-  text-align: right;
-  margin-top: 20px;
-}
+/* 表格和分页样式 */
+.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; }
 
-.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
diff --git a/src/views/modelMessage/variable/components/VariableFormDialog.vue b/src/views/modelMessage/variable/components/VariableFormDialog.vue
new file mode 100644
index 0000000..4fe7898
--- /dev/null
+++ b/src/views/modelMessage/variable/components/VariableFormDialog.vue
@@ -0,0 +1,476 @@
+<template>
+  <!-- 添加或修改变量管理对话框 -->
+  <el-dialog 
+    :title="title" 
+    :modelValue="visible" 
+    @update:modelValue="emit('update:visible', $event)" 
+    width="650px" 
+    append-to-body 
+    custom-class="variable-dialog"
+  >
+    <div class="dialog-container">
+      <div class="dialog-header-info">
+        <div class="header-icon">
+          <i class="el-icon-magic-stick" v-if="form.variableId == null"></i>
+          <i class="el-icon-edit" v-else></i>
+        </div>
+        <div class="header-text">
+          {{ form.variableId == null ? '创建新的变量，可用于个性化消息内容' : '编辑已有变量，修改后将影响使用该变量的消息模板' }}
+        </div>
+      </div>
+      <div class="dialog-form-container">
+        <el-form ref="variableRef" :model="form" :rules="rules" label-width="100px" class="enhanced-form">
+          <el-form-item label="变量名称" prop="variableName">
+            <el-input v-model="form.variableName" placeholder="请输入变量名称" clearable>
+              <template #prefix><i class="el-icon-price-tag variable-icon"></i></template>
+            </el-input>
+            <span class="form-tip"><i class="el-icon-info-filled tip-icon"></i> 变量名称用于在消息模板中识别，请确保其唯一性</span>
+          </el-form-item>
+          
+          <el-form-item label="变量类型" prop="variableType" class="variable-type-section">
+            <div class="type-selection-wrapper">
+              <el-radio-group v-model="form.variableType" @change="handleVariableTypeChange" class="type-radio-group">
+                <el-radio-button label="指定文本">
+                  <i class="el-icon-document"></i> 指定文本
+                </el-radio-button>
+                <el-radio-button label="内置变量">
+                  <i class="el-icon-cpu"></i> 内置变量
+                </el-radio-button>
+              </el-radio-group>
+              <div class="type-description">
+                {{ form.variableType === '指定文本' ? 
+                    '指定文本变量用于设置固定的文本内容' : 
+                    '内置变量会在发送消息时自动替换为系统值' }}
+              </div>
+            </div>
+          </el-form-item>
+
+          <div class="variable-content">
+            <transition name="fade" mode="out-in">
+              <el-form-item v-if="form.variableType === '内置变量'" label="内置变量" prop="variableContent" class="built-in-form-item content-transition-item">
+                <div class="built-in-variables-grid">
+                  <div
+                    v-for="(item, key) in builtInVariableOptions"
+                    :key="key"
+                    :class="['variable-option', {'selected': form.variableContent === key}]"
+                    :data-type="key"
+                    @click="selectBuiltInVariable(key)"
+                  >
+                    <div class="variable-option-icon" :style="getVariableIconStyle(key, item.color)">
+                      <i :class="item.icon"></i>
+                    </div>
+                    <div class="variable-option-content">
+                      <div class="variable-option-title">{{ item.label }}</div>
+                      <div class="variable-option-desc">{{ item.description }}</div>
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="variable-preview" v-if="form.variableContent">
+                  <div class="preview-header">
+                    <i class="el-icon-view"></i> 预览示例：{{ getVariablePreview(form.variableContent) }}
+                  </div>
+                </div>
+              </el-form-item>
+              
+              <el-form-item v-else-if="form.variableType === '指定文本'" label="变量内容" prop="variableContent" class="content-transition-item">
+                <el-input 
+                  v-model="form.variableContent" 
+                  type="textarea" 
+                  :rows="4" 
+                  placeholder="请输入变量内容" 
+                  class="content-input"
+                  maxlength="1000"
+                  show-word-limit
+                />
+              </el-form-item>
+            </transition>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel" plain>取 消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
+          <i class="el-icon-check"></i> {{ form.variableId == null ? '创建' : '保存' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="VariableFormDialog">
+import { ref, computed } 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 builtInVariableOptions = {
+  'time': { 
+    label: '发送时间', 
+    icon: 'el-icon-time',
+    description: '当前完整时间',
+    color: '#3498db'
+  },
+  'date': { 
+    label: '发送日期', 
+    icon: 'el-icon-date',
+    description: '当前完整日期',
+    color: '#3498db'
+  },
+  'datetime': { 
+    label: '发送日期+时间', 
+    icon: 'el-icon-timer',
+    description: '当前完整日期时间',
+    color: '#3498db'
+  },
+  'addresser': { 
+    label: '发件人', 
+    icon: 'el-icon-user',
+    description: '发送方的名称或账号',
+    color: '#e74c3c'
+  },
+  'recipients': { 
+    label: '收件人', 
+    icon: 'el-icon-avatar',
+    description: '接收方的名称或账号',
+    color: '#e74c3c'
+  },
+  'RandomnDigits': {
+    label: '随机数字',
+    icon: 'el-icon-coin',
+    description: '生成随机数字序列',
+    color: '#2ecc71'
+  },
+  'RandomnCharacters': {
+    label: '随机字母',
+    icon: 'el-icon-collection',
+    description: '生成随机字母序列',
+    color: '#2ecc71'
+  },
+  'RandomNDigitLetters': {
+    label: '随机数字+字母',
+    icon: 'el-icon-collection-tag',
+    description: '生成随机字母和数字',
+    color: '#2ecc71'
+  }
+}
+
+// 方法
+const handleVariableTypeChange = (value) => {
+  emit('variable-type-change', value)
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const handleSubmit = () => {
+  // 在子组件内部进行表单验证
+  variableRef.value.validate((valid) => {
+    if (valid) {
+      emit('submit')
+    }
+  })
+}
+
+const selectBuiltInVariable = (key) => {
+  props.form.variableContent = key
+}
+
+const getVariableIconStyle = (_, color) => {
+  return {
+    backgroundColor: color + '20',
+    color: color,
+    border: `1px solid ${color}40`
+  }
+}
+
+const getVariablePreview = (variableType) => {
+  const now = new Date()
+  const previews = {
+    'time': now.toLocaleTimeString(),
+    'date': now.toLocaleDateString(),
+    'datetime': now.toLocaleString(),
+    'addresser': '系统管理员',
+    'recipients': '用户A、用户B',
+    'RandomnDigits': '123456',
+    'RandomnCharacters': 'abcDEF',
+    'RandomNDigitLetters': 'a1B2c3'
+  }
+  return previews[variableType] || '示例值'
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  variableRef
+})
+</script>
+
+<style scoped>
+/* 对话框美化 - 进一步增强 */
+.variable-dialog :deep(.el-dialog__header) {
+  position: relative;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px 25px;
+}
+.variable-dialog :deep(.el-dialog__title) {
+  font-size: 20px;
+  letter-spacing: 0.5px;
+}
+.variable-dialog :deep(.el-dialog__body) {
+  padding: 0;
+}
+
+.dialog-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-header-info {
+  display: flex;
+  align-items: center;
+  padding: 20px 25px;
+  background-color: rgba(103, 126, 234, 0.05);
+  border-bottom: 1px solid #edf2f7;
+}
+
+.header-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.header-icon i {
+  font-size: 24px;
+  color: white;
+}
+
+.header-text {
+  font-size: 15px;
+  color: #4a5568;
+  line-height: 1.5;
+  flex: 1;
+}
+
+.dialog-form-container {
+  padding: 25px;
+}
+
+.enhanced-form .el-form-item {
+  margin-bottom: 24px;
+}
+
+.enhanced-form .el-form-item__label {
+  font-weight: 600;
+  color: #2d3748;
+}
+
+.variable-icon {
+  color: #667eea;
+}
+
+.form-tip {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #718096;
+  line-height: 1.4;
+}
+
+.tip-icon {
+  margin-right: 4px;
+  color: #4299e1;
+}
+
+.variable-type-section {
+  margin-bottom: 30px;
+}
+
+.type-selection-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.type-radio-group {
+  display: flex;
+  gap: 12px;
+}
+
+.type-radio-group :deep(.el-radio-button__inner) {
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.type-radio-group :deep(.el-radio-button__inner i) {
+  margin-right: 6px;
+}
+
+.type-description {
+  font-size: 13px;
+  color: #718096;
+  padding: 8px 12px;
+  background-color: #f7fafc;
+  border-radius: 6px;
+  border-left: 3px solid #667eea;
+}
+
+.variable-content {
+  margin-top: 20px;
+}
+
+.built-in-variables-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.variable-option {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: white;
+}
+
+.variable-option:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+  transform: translateY(-2px);
+}
+
+.variable-option.selected {
+  border-color: #667eea;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
+}
+
+.variable-option-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  font-size: 18px;
+}
+
+.variable-option-content {
+  flex: 1;
+}
+
+.variable-option-title {
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 4px;
+}
+
+.variable-option-desc {
+  font-size: 12px;
+  color: #718096;
+  line-height: 1.4;
+}
+
+.variable-preview {
+  padding: 16px;
+  background: linear-gradient(135deg, #f7fafc, #edf2f7);
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.preview-header {
+  font-size: 14px;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+.preview-header i {
+  margin-right: 6px;
+  color: #667eea;
+}
+
+.content-input {
+  border-radius: 8px;
+}
+
+.content-input :deep(.el-textarea__inner) {
+  border-radius: 8px;
+  border: 2px solid #e2e8f0;
+  transition: border-color 0.3s ease;
+}
+
+.content-input :deep(.el-textarea__inner:focus) {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 25px;
+  background-color: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+
+.dialog-footer .el-button {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+/* 过渡动画 */
+.fade-enter-active, .fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+</style>
diff --git a/src/views/modelMessage/variable/index.vue b/src/views/modelMessage/variable/index.vue
index 5fb0c99..a5ccd1d 100644
--- a/src/views/modelMessage/variable/index.vue
+++ b/src/views/modelMessage/variable/index.vue
@@ -1,88 +1,76 @@
 <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-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>
+    <br>
+    <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>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 卡片视图 -->
+    <div class="card-view">
+      <el-row :gutter="16">
+        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in variableList" :key="index" class="card-col">
+          <el-card shadow="hover" class="variable-card" :class="{'variable-card-built-in': item.variableType === '内置变量'}">
+            <template #header>
+              <div class="card-header">
+                <div class="card-header-left">
+                  <el-checkbox v-model="item.isSelected" @change="handleSelectChange" class="card-checkbox"></el-checkbox>
+                  <span class="card-title">{{ item.variableName }}</span>
+                </div>
+                <el-tag size="small" effect="plain" :type="getVariableTypeTag(item.variableType)">{{ item.variableType }}</el-tag>
+              </div>
+            </template>
+            <div class="card-content">
+              <div class="card-item">
+                <span class="card-label">变量内容</span>
+                <div class="content-display" :class="{'content-built-in': item.variableType === '内置变量'}">
+                  <i v-if="item.variableType === '内置变量'" 
+                     :class="getBuiltInVariableIcon(item.variableContent)" 
+                     class="built-in-icon"></i>
+                  <span class="card-value">{{ formatVariableContent(item) }}</span>
+                </div>
+              </div>
+              <div class="card-actions">
+                <el-button type="primary" size="small" icon="Edit" @click="handleUpdate(item)">编辑</el-button>
+                <el-button type="danger" size="small" icon="Delete" @click="handleDelete(item)">删除</el-button>
+              </div>
+            </div>
+          </el-card>
         </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-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>
+    </div>
+    
+    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 变量管理对话框组件 -->
+    <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 variableList = ref([]);
@@ -94,6 +82,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,22 +93,21 @@ 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;
   listVariable(queryParams.value).then(response => {
-    variableList.value = response.rows;
+    variableList.value = response.rows.map(item => {
+      item.isSelected = false;
+      return item;
+    });
     total.value = response.total;
     loading.value = false;
   });
@@ -134,10 +122,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");
 }
 
 /** 搜索按钮操作 */
@@ -152,11 +147,12 @@ function resetQuery() {
   handleQuery();
 }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.variableId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+// 处理卡片选择变化
+function handleSelectChange() {
+  const selectedItems = variableList.value.filter(i => i.isSelected);
+  ids.value = selectedItems.map(i => i.variableId);
+  single.value = selectedItems.length != 1;
+  multiple.value = !selectedItems.length;
 }
 
 /** 新增按钮操作 */
@@ -183,43 +179,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 +223,360 @@ function handleExport() {
   }, `variable_${new Date().getTime()}.xlsx`)
 }
 
+// 根据变量类型获取标签类型
+function getVariableTypeTag(type) {
+  if (type === '指定文本') return 'success';
+  if (type === '内置变量') return 'primary';
+  return 'info';
+}
+
+// 格式化变量内容展示
+function formatVariableContent(item) {
+  if (item.variableType === '内置变量') {
+    return getBuiltInVariableLabel(item.variableContent);
+  }
+  return item.variableContent;
+}
+
+// 获取内置变量的显示文本
+function getBuiltInVariableLabel(value) {
+  const labels = {
+    'time': '当前时间',
+    'date': '当前日期',
+    'datetime': '当前日期和时间',
+    'addresser': '发件人信息',
+    'recipients': '收件人信息',
+    'RandomnDigits': '随机数字',
+    'RandomnCharacters': '随机字母',
+    'RandomNDigitLetters': '随机数字和字母'
+  };
+  return labels[value] || value;
+}
+
+// 获取内置变量的图标
+function getBuiltInVariableIcon(value) {
+  const icons = {
+    'time': 'el-icon-time',
+    'date': 'el-icon-date',
+    'datetime': 'el-icon-date',
+    'addresser': 'el-icon-user',
+    'recipients': 'el-icon-user',
+    'RandomnDigits': 'el-icon-coin',
+    'RandomnCharacters': 'el-icon-collection',
+    'RandomNDigitLetters': 'el-icon-collection-tag'
+  };
+  return icons[value] || 'el-icon-data-analysis';
+}
+
 getList();
 </script>
+
 <style scoped>
+/* 整体布局样式 */
 .app-container {
-  padding: 20px;
+  padding: 24px;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8f9fa, #edf2f7);
 }
 
-.el-form,
-.el-table,
-.el-dialog {
+.el-form {
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 15px;
+  padding: 25px;
+  box-shadow: 0 8px 15px rgba(0,0,0,0.05);
+  backdrop-filter: blur(4px);
   margin-bottom: 20px;
 }
 
-/* Table */
-.el-table {
-  margin-top: 20px;
+/* 按钮样式优化 */
+.el-button {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border-radius: 8px;
+  font-weight: 500;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
 }
 
-.el-table th>.cell {
-  color: #303133;
-  font-weight: bold;
+.el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.el-button--primary {
+  background: linear-gradient(45deg, #3a7bd5, #00d2ff);
+  border: none;
+  color: white;
+}
+
+.el-button--danger {
+  background: linear-gradient(45deg, #ff5f6d, #ffc371);
+  border: none;
+  color: white;
+}
+
+.el-button--warning {
+  background: linear-gradient(45deg, #f7971e, #ffd200);
+  border: none;
+  color: white;
+}
+
+.el-button--info {
+  background: linear-gradient(45deg, #8e9eab, #eef2f3);
+  border: none;
+  color: #333;
+}
+
+/* 输入框样式优化 */
+.el-input__inner, .el-textarea__inner {
+  border-radius: 8px;
+  border: 1px solid #e8edf2;
+  transition: all 0.3s ease;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
+}
+
+.el-input__inner:focus, .el-textarea__inner:focus {
+  border-color: #3a7bd5;
+  box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.2);
+}
+
+/* 卡片视图布局 - 统一样式并修复间距问题 */
+.card-view {
+  margin: 20px 0;
+}
+
+.el-row {
+  margin-left: -8px !important;
+  margin-right: -8px !important;
+}
+
+.card-col {
+  padding: 8px !important;
+  height: auto;
+}
+
+.variable-card {
+  height: 225px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
 }
 
-.el-table td {
-  padding: 10px;
+.variable-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 15px 25px rgba(0,0,0,0.12);
 }
 
-/* Form */
-.el-form-item {
-  margin-bottom: 10px;
+.variable-card .el-card__header {
+  background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0.9));
+  border-bottom: 1px solid #f0f3f7;
+  padding: 12px 15px;
+  height: 50px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
 }
 
-.el-input,
-.el-select {
+.variable-card .el-card__body {
+  padding: 15px;
+  height: calc(100% - 50px);
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
   width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-/* Dialog */
+.card-header-left {
+  display: flex;
+  align-items: center;
+  width: 75%;
+  gap: 8px;
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-checkbox {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.card-label {
+  font-size: 13px;
+  color: #8492a6;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #505A6D;
+  word-break: break-all;
+  line-height: 1.5;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid #f0f3f7;
+  margin-top: auto;
+}
+
+/* 标签样式优化 */
+.el-tag {
+  border-radius: 6px;
+  padding: 0 8px;
+  font-weight: 500;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  white-space: nowrap;
+}
+
+.el-tag--success {
+  background: linear-gradient(120deg, #84fab0, #8fd3f4);
+  color: #1f4037;
+}
+
+.el-tag--primary {
+  background: linear-gradient(120deg, #6a85b6, #bac8e0);
+  color: #2c3e50;
+}
+
+.el-tag--info {
+  background: linear-gradient(120deg, #e0c3fc, #8ec5fc);
+  color: #4a00e0;
+}
+
+/* 分页和动画 */
+.el-pagination {
+  margin-top: 20px;
+  justify-content: center;
+  padding: 15px 0;
+  background: rgba(255,255,255,0.8);
+  border-radius: 10px;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 对话框基本样式 */
 .el-dialog {
-  border-radius: 12px;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+  backdrop-filter: blur(10px);
 }
 
 .el-dialog__header {
-  background-color: #f5f7fa;
-  padding: 15px;
-  border-bottom: 1px solid #ebeef5;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
+  background: linear-gradient(to right, #3a7bd5, #00d2ff);
+  padding: 20px;
+}
+
+.el-dialog__title {
+  color: white;
+  font-weight: 600;
+  font-size: 18px;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.el-dialog__body {
+  padding: 30px 25px;
 }
 
 .el-dialog__footer {
-  border-top: 1px solid #ebeef5;
-  border-bottom-left-radius: 12px;
-  border-bottom-right-radius: 12px;
+  border-top: 1px solid #f0f3f7;
+  padding: 15px 25px;
+}
+
+/* 适配不同屏幕大小 */
+@media screen and (max-width: 768px) {
+  .variable-card {
+    height: 245px;
+  }
+  .built-in-variables-grid {
+    grid-template-columns: 1fr;
+  }
+  .variable-dialog {
+    width: 95% !important;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .card-actions {
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+  }
+  .card-actions .el-button {
+    margin-left: 0 !important;
+  }
 }
 
-/* Input fields */
-.el-input__inner {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
+/* 卡片内容样式优化 */
+.content-display {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 10px 12px;
+  position: relative;
+  min-height: 45px;
+  display: flex;
+  align-items: flex-start;
+  transition: all 0.3s ease;
 }
 
-/* Select dropdown */
-.el-select .el-input__inner {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
+.content-display:hover {
+  background: #f0f2f5;
 }
 
-/* Textarea */
-.el-textarea__inner {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 10px;
+.content-built-in {
+  background: rgba(58, 123, 213, 0.08);
+  padding-left: 35px;
 }
 
-/* Icons */
-.el-icon {
-  color: #409eff;
+.built-in-icon {
+  position: absolute;
+  left: 10px;
+  top: 12px;
+  color: #3a7bd5;
+  font-size: 16px;
 }
 
-/* Hover effects */
-.el-button:hover {
-  cursor: pointer;
+.variable-card-built-in .el-card__header {
+  background: linear-gradient(to right, rgba(235, 244, 255, 0.8), rgba(235, 244, 255, 0.9));
 }
 </style>
\ No newline at end of file
-- 
Gitee


From 5ed88721a142b42b5f703df67d3ac00ffef83766 Mon Sep 17 00:00:00 2001
From: ldrop <ldrop>
Date: Wed, 2 Jul 2025 14:58:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=8E=9F=E6=9C=AC?=
 =?UTF-8?q?=E8=8B=A5=E4=BE=9D=E6=A1=86=E6=9E=B6=E6=A0=B7=E5=BC=8F=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../messageSystem/components/addMessage.vue   | 234 +++++----
 .../components/messageContent.vue             | 213 --------
 .../components/recipientSelector.vue          | 162 ++----
 .../messageSystem/components/smallBell.vue    | 128 -----
 .../modelMessage/messageSystem/index.vue      | 438 +++++-----------
 .../components/TemplateFormDialog.vue         | 150 +-----
 .../components/TemplatePreviewDialog.vue      | 110 ----
 src/views/modelMessage/template/index.vue     | 200 +++-----
 .../components/VariableFormDialog.vue         | 480 +++---------------
 src/views/modelMessage/variable/index.vue     | 450 ++--------------
 10 files changed, 507 insertions(+), 2058 deletions(-)
 delete mode 100644 src/views/modelMessage/messageSystem/components/messageContent.vue
 delete mode 100644 src/views/modelMessage/messageSystem/components/smallBell.vue
 delete mode 100644 src/views/modelMessage/template/components/TemplatePreviewDialog.vue

diff --git a/src/views/modelMessage/messageSystem/components/addMessage.vue b/src/views/modelMessage/messageSystem/components/addMessage.vue
index 218666e..782e72a 100644
--- a/src/views/modelMessage/messageSystem/components/addMessage.vue
+++ b/src/views/modelMessage/messageSystem/components/addMessage.vue
@@ -1,62 +1,84 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="title" width="700px" destroy-on-close :close-on-click-modal="false" @closed="handleClosed" class="message-dialog">
-  <div class="form-container">
-    <el-form ref="messageSystemFormRef" :model="form" :rules="rules" label-width="80px" class="message-form" v-loading="loading" element-loading-text="消息发送中...">
-      <!-- 基本信息区域 -->
-      <div class="form-section"><div class="section-title"><el-icon><Document /></el-icon> 基本信息</div>
-
-      <el-row :gutter="16"><el-col :span="24"><el-form-item label="标题" prop="messageTitle"><el-input v-model="form.messageTitle" placeholder="请输入消息标题" clearable /></el-form-item></el-col></el-row>
-
-      <el-row :gutter="16">
+  <!-- 添加或修改消息管理对话框 -->
+  <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="选择发送方式" clearable style="width: 100%" @change="handleSendModeChange">
-              <el-option v-for="dict in send_mode" :key="dict.value" :label="dict.label" :value="dict.value">
-                <div class="option-with-icon">
-                  <el-icon v-if="dict.value === '0'"><MessageBox /></el-icon>
-                  <el-icon v-else-if="dict.value === '1'"><PhoneFilled /></el-icon>
-                  <el-icon v-else-if="dict.value === '2'"><Message /></el-icon>
-                  {{ dict.label }}
-                </div>
-              </el-option>
+            <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="选择消息类型" clearable style="width: 100%">
+            <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>
 
       <!-- 消息内容组件 -->
-      <MessageContent :send-mode="form.sendMode" @update:contentType="form.contentType = $event" @update:messageContent="form.messageContent = $event" ref="messageContentRef" />
+      <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>
+      <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>
-
-    <div class="dialog-footer">
-      <el-button @click="toggleDialog">取 消</el-button>
-      <el-button type="primary" @click="submitForm" :loading="loading" class="send-button"><el-icon><Promotion /></el-icon> 发送消息</el-button>
-    </div>
-  </div>
-</el-dialog>
+    <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, defineProps, defineEmits, defineExpose } from 'vue';
+import { ref, getCurrentInstance, watch } from 'vue';
 import { batchAddMessage } from '@/api/modelMessage/messageSystem';
+import { selecTemplates } from '@/api/modelMessage/template';
 import { ElMessage } from 'element-plus';
-import { Message, Document, MessageBox, PhoneFilled, Promotion } from '@element-plus/icons-vue';
-import MessageContent from './MessageContent.vue';
-import RecipientSelector from './RecipientSelector.vue';
+import RecipientSelector from './recipientSelector.vue';
 
 const props = defineProps({ title: { type: String, default: "发送消息" } });
 const { proxy } = getCurrentInstance();
@@ -64,7 +86,6 @@ const { send_mode, message_type } = proxy.useDict("send_mode", "message_type");
 const emit = defineEmits(['success', 'close']);
 // Refs
 const messageSystemFormRef = ref(null);
-const messageContentRef = ref(null);
 const recipientSelectorRef = ref(null);
 const dialogVisible = ref(false);
 const loading = ref(false);
@@ -81,6 +102,11 @@ const form = ref({
   messageType: null
 });
 
+// 内容类型和模板相关数据
+const contentType = ref('template');
+const templates = ref([]);
+const templateLoading = ref(false);
+
 // 表单验证规则
 const rules = ref({
   messageTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
@@ -89,24 +115,84 @@ const rules = ref({
   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,
@@ -142,11 +228,10 @@ function reset() {
     contentType: "template",
     messageType: null
   };
+  
+  contentType.value = 'template';
 
   // 重置子组件
-  if (messageContentRef.value) {
-    messageContentRef.value.reset();
-  }
   if (recipientSelectorRef.value) {
     recipientSelectorRef.value.reset();
   }
@@ -162,82 +247,11 @@ function toggleDialog() {
   }
 }
 
-// 对话框关闭处理
-function handleClosed() {
-  reset();
-  emit('close');
-  loading.value = false;
-}
-
 // 暴露方法给父组件
 defineExpose({
   open: () => {
     dialogVisible.value = true;
   }
 });
-</script>
-
-<style scoped>
-.message-dialog {
-  border-radius: 12px;
-}
-
-.form-container {
-  padding: 10px;
-}
-
-.form-section {
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  padding: 20px;
-  margin-bottom: 16px;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
-  padding-bottom: 6px;
-  margin-bottom: 16px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.section-title .el-icon {
-  margin-right: 8px;
-  color: #409EFF;
-  font-size: 16px;
-}
-
-.option-with-icon {
-  display: flex;
-  align-items: center;
-}
-
-.option-with-icon .el-icon {
-  margin-right: 6px;
-  font-size: 14px;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 20px;
-  border-top: 1px solid #f0f2f5;
-}
-
-.send-button {
-  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
-  border: none;
-  border-radius: 6px;
-  padding: 10px 20px;
-  font-weight: 500;
-}
-
-.send-button:hover {
-  background: linear-gradient(135deg, #337ecc 0%, #5daf34 100%);
-}
-</style>
\ No newline at end of file
+getTemplates();
+</script>    
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/components/messageContent.vue b/src/views/modelMessage/messageSystem/components/messageContent.vue
deleted file mode 100644
index 63ea5a9..0000000
--- a/src/views/modelMessage/messageSystem/components/messageContent.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-  <div class="message-content">
-    <div class="section-title">
-      <el-icon><ChatDotRound /></el-icon> 消息内容
-    </div>
-    
-    <!-- 内容类型选择 -->
-    <el-row>
-      <el-col :span="24">
-        <div class="content-type-selector">
-          <div class="type-label">内容类型:</div>
-          <el-radio-group v-model="contentType" @change="handleContentTypeChange" size="default">
-            <el-radio label="template">
-              <el-icon><Files /></el-icon> 模板签名
-            </el-radio>
-            <el-radio label="content">
-              <el-icon><EditPen /></el-icon> 消息内容
-            </el-radio>
-          </el-radio-group>
-        </div>
-      </el-col>
-    </el-row>
-    
-    <!-- 内容输入 -->
-    <el-row>
-      <el-col :span="24">
-        <div class="content-input-container">
-          <!-- 模板选择 -->
-          <template v-if="contentType === 'template'">
-            <el-form-item label="模板选择" prop="messageContent">
-              <el-select 
-                v-model="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>
-          </template>
-          
-          <!-- 内容输入 -->
-          <template v-else>
-            <el-form-item label="消息内容" prop="messageContent">
-              <el-input 
-                v-model="messageContent" 
-                type="textarea" 
-                :rows="3" 
-                placeholder="短信格式须为: 模板名?模板参数=值" 
-                maxlength="100" 
-                show-word-limit 
-                @input="handleContentInput" 
-              />
-            </el-form-item>
-          </template>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import { selecTemplates } from '@/api/modelMessage/template';
-import { ElMessage } from 'element-plus';
-import { ChatDotRound, Files, EditPen } from '@element-plus/icons-vue';
-
-// Props
-const props = defineProps({
-  sendMode: {
-    type: String,
-    default: ''
-  }
-});
-
-// Emits
-const emit = defineEmits(['update:contentType', 'update:messageContent']);
-
-// 响应式数据
-const contentType = ref('template');
-const messageContent = ref('');
-const templates = ref([]);
-const templateLoading = ref(false);
-
-// 获取模板列表
-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() {
-  messageContent.value = '';
-  emit('update:contentType', contentType.value);
-  emit('update:messageContent', '');
-}
-
-// 处理模板选择变化
-function handleTemplateChange(value) {
-  messageContent.value = value;
-  emit('update:messageContent', value);
-}
-
-// 处理内容输入变化
-function handleContentInput(value) {
-  messageContent.value = value;
-  emit('update:messageContent', value);
-}
-
-// 验证消息内容格式
-function validateMessageContent(value) {
-  if (props.sendMode === '1' && contentType.value === 'content') {
-    const pattern = /^[^?]+?\?[^=]+?=.*$/;
-    if (!pattern.test(value)) {
-      return '短信输入内容格式必须为：模板名?模板参数=值';
-    }
-  }
-  return true;
-}
-
-// 监听发送方式变化
-watch(() => props.sendMode, () => {
-  // 发送方式变化时可能需要重新验证内容格式
-  if (messageContent.value) {
-    const validation = validateMessageContent(messageContent.value);
-    if (validation !== true) {
-      ElMessage.warning(validation);
-    }
-  }
-});
-
-// 初始化
-getTemplates();
-
-// 暴露方法给父组件
-defineExpose({
-  validateContent: () => validateMessageContent(messageContent.value),
-  reset: () => {
-    contentType.value = 'template';
-    messageContent.value = '';
-  },
-  getTemplates
-});
-</script>
-
-<style scoped>
-.message-content {
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  padding: 20px;
-  margin-bottom: 16px;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
-  padding-bottom: 6px;
-  margin-bottom: 16px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.section-title .el-icon {
-  margin-right: 8px;
-  color: #409EFF;
-  font-size: 16px;
-}
-
-.content-type-selector {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.type-label {
-  margin-right: 10px;
-  font-weight: 500;
-  color: #606266;
-  min-width: 70px;
-}
-
-.content-type-selector .el-radio {
-  margin-right: 14px;
-  margin-bottom: 0;
-}
-
-.content-type-selector .el-icon {
-  margin-right: 4px;
-  font-size: 15px;
-}
-
-.content-input-container {
-  margin-top: 10px;
-  margin-bottom: 0;
-}
-</style>
diff --git a/src/views/modelMessage/messageSystem/components/recipientSelector.vue b/src/views/modelMessage/messageSystem/components/recipientSelector.vue
index 41b1138..955874e 100644
--- a/src/views/modelMessage/messageSystem/components/recipientSelector.vue
+++ b/src/views/modelMessage/messageSystem/components/recipientSelector.vue
@@ -1,73 +1,47 @@
 <template>
   <div class="recipient-selector">
-    <div class="section-title">
-      <el-icon><User /></el-icon> 收件人信息
-    </div>
+    <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-row>
-      <el-col :span="24">
-        <div class="recipient-type-selector">
-          <div class="type-label">收件人类型:</div>
-          <el-radio-group v-model="recipientType" @change="handleTypeChange">
-            <el-radio v-for="type in recipientTypes" :key="type.value" :label="type.value">
-              <el-icon v-if="type.value === 'user'"><User /></el-icon>
-              <el-icon v-else-if="type.value === 'role'"><Avatar /></el-icon>
-              <el-icon v-else-if="type.value === 'dept'"><OfficeBuilding /></el-icon>
-              {{ type.label }}
-            </el-radio>
-          </el-radio-group>
-        </div>
-      </el-col>
-    </el-row>
+    <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-row v-if="recipientType && options.length > 0" class="recipient-row">
-      <el-col :span="24">
-        <el-form-item :label="selectedLabel" prop="messageRecipient">
-          <!-- 部门树形选择 -->
-          <div v-if="recipientType === 'dept'">
-            <el-tree-select 
-              v-model="selectedRecipients" 
-              :data="options" 
-              placeholder="请选择部门" 
-              clearable 
-              :props="{ value: 'deptId', label: 'deptName', children: 'children' }" 
-              @change="handleSelectionChange" 
-              multiple 
-              :collapse-tags="false" 
-              style="width: 500px" 
-            />
-          </div>
-          <!-- 用户/角色选择 -->
-          <div v-else>
-            <el-select 
-              v-model="selectedRecipients" 
-              placeholder="请选择收件人" 
-              @change="handleSelectionChange" 
-              multiple 
-              style="width: 500px"
-            >
-              <el-option 
-                v-for="item in options" 
-                :key="item.id" 
-                :label="item.name" 
-                :value="item.id" 
-              />
-            </el-select>
-          </div>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    
-    <!-- 联系方式显示 -->
-    <el-row v-if="contactInfo">
-      <el-col :span="24">
-        <el-form-item label="接收号码">
-          <el-input v-model="contactInfo" placeholder="接收人联系方式" disabled />
-        </el-form-item>
-      </el-col>
-    </el-row>
+    <el-form-item v-if="contactInfo" label="接收号码">
+      <el-input v-model="contactInfo" placeholder="接收人联系方式" readonly />
+    </el-form-item>
   </div>
 </template>
 
@@ -75,7 +49,6 @@
 import { ref, computed, watch } from 'vue';
 import { getSystemResource } from '@/api/modelMessage/messageSystem';
 import { ElMessage } from 'element-plus';
-import { User, Avatar, OfficeBuilding } from '@element-plus/icons-vue';
 
 // Props
 const props = defineProps({
@@ -297,58 +270,3 @@ defineExpose({
   }
 });
 </script>
-
-<style scoped>
-.recipient-selector {
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  padding: 20px;
-  margin-bottom: 16px;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
-  padding-bottom: 6px;
-  margin-bottom: 16px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.section-title .el-icon {
-  margin-right: 8px;
-  color: #409EFF;
-  font-size: 16px;
-}
-
-.recipient-type-selector {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.type-label {
-  margin-right: 10px;
-  font-weight: 500;
-  color: #606266;
-  min-width: 70px;
-}
-
-.recipient-type-selector .el-radio {
-  margin-right: 14px;
-  margin-bottom: 0;
-}
-
-.recipient-type-selector .el-icon {
-  margin-right: 4px;
-  font-size: 15px;
-}
-
-.recipient-row {
-  margin-top: 10px;
-  margin-bottom: 0;
-}
-</style>
diff --git a/src/views/modelMessage/messageSystem/components/smallBell.vue b/src/views/modelMessage/messageSystem/components/smallBell.vue
deleted file mode 100644
index 607034c..0000000
--- a/src/views/modelMessage/messageSystem/components/smallBell.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <el-popover v-model="showPopover" placement="bottom-start" width="200" trigger="hover">
-    <template #reference>
-      <el-button type="text" @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="latestNotifications.length > 0">
-      <h4 style="margin: 0px; padding: 0px;">信息中心</h4>
-      <ul class="notification-list">
-        <li style="cursor: pointer;" v-for="(item, index) in latestNotifications" :key="index" @click="viewDetails(item)">
-          {{ item.messageTitle }}
-        </li>
-      </ul>
-    </div>
-    <div v-else>
-      暂无信息
-    </div>
-  </el-popover>
-</template>
-
-<script setup name="SmallBell">
-import { ref } from 'vue';
-import { listMessageSystem } from "@/api/modelMessage/messageSystem";
-import { getCurrentInstance } from 'vue';
-
-const { proxy } = getCurrentInstance();
-const showPopover = ref(false);
-const latestNotifications = ref([]);
-async function fetchLatestMessages() {
-  try {
-    const response = await listMessageSystem()
-    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: linear-gradient(135deg, #ffffff, #f8f9fa);
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  padding: 12px;
-  margin: 0;
-}
-
-.notification-list li {
-  list-style-type: none;
-  padding: 10px 15px;
-  margin: 5px 0;
-  border-radius: 6px;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  font-size: 14px;
-  color: #333;
-  background: rgba(255, 255, 255, 0.7);
-  border-left: 3px solid #00aaff;
-}
-
-.notification-list li:hover {
-  background: #e8f6ff;
-  transform: translateX(5px);
-  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.2);
-}
-
-.notification-list li::before {
-  content: '';
-  position: absolute;
-  left: -100%;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.2),
-    transparent
-  );
-  transition: 0.5s;
-}
-
-.notification-list li:hover::before {
-  left: 100%;
-}
-
-@keyframes bellRing {
-  0% { transform: rotate(0); }
-  20% { transform: rotate(15deg); }
-  40% { transform: rotate(-15deg); }
-  60% { transform: rotate(7deg); }
-  80% { transform: rotate(-7deg); }
-  100% { transform: rotate(0); }
-}
-
-.el-button:hover .el-icon {
-  animation: bellRing 0.8s ease;
-}
-
-h4 {
-  color: #333;
-  font-size: 16px;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #00aaff;
-}
-
-.el-popover {
-  border-radius: 10px;
-  border: none;
-  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
-}
-</style>
\ No newline at end of file
diff --git a/src/views/modelMessage/messageSystem/index.vue b/src/views/modelMessage/messageSystem/index.vue
index f9e0a3b..25e7f31 100644
--- a/src/views/modelMessage/messageSystem/index.vue
+++ b/src/views/modelMessage/messageSystem/index.vue
@@ -1,147 +1,135 @@
 <template>
-  <div class="message-system-container">
-    <!-- 优化后的搜索区域 - 删除收起功能 -->
-    <div class="search-panel">
-      <div class="search-panel-header">
-        <div class="header-icon"><el-icon><Search /></el-icon></div>
-        <span class="header-title">高级筛选</span>
-      </div>
-      <div class="search-panel-content">
-        <el-form :model="queryParams" ref="queryRef" :inline="true">
-          <el-form-item label="消息标题" prop="messageTitle">
-            <el-input v-model="queryParams.messageTitle" placeholder="请输入标题关键词" clearable prefix-icon="Search" @keyup.enter="handleQuery" class="custom-input" />
-          </el-form-item>
-          <el-form-item label="消息状态" prop="messageStatus">
-            <el-select v-model="queryParams.messageStatus" placeholder="请选择消息状态" clearable class="custom-select">
-              <el-option v-for="dict in message_status" :key="dict.value" :label="dict.label" :value="dict.value">
-                <div class="option-with-dot">
-                  <span class="status-dot" :class="dict.value === '0' ? 'status-unread' : 'status-read'"></span>{{ dict.label }}
-                </div>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item class="search-actions">
-            <el-button type="primary" @click="handleQuery" class="search-btn"><el-icon><Search /></el-icon><span>搜索</span></el-button>
-            <el-button @click="resetQuery" class="reset-btn"><el-icon><RefreshRight /></el-icon><span>重置</span></el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-
-    <!-- 优化后的操作按钮区域 - 删除收起筛选按钮 -->
-    <div class="action-toolbar">
-      <div class="left-actions">
-        <el-tooltip content="发送新消息" placement="top">
-          <el-button type="primary" class="action-btn send-btn" @click="handleAdd" v-hasPermi="['modelMessage:messageSystem:add']"><el-icon><Plus /></el-icon><span>发送信息</span></el-button>
-        </el-tooltip>
-        <el-tooltip content="删除选中的消息" placement="top">
-          <el-button type="danger" class="action-btn delete-btn" :disabled="multiple" @click="handleDelete"><el-icon><Delete /></el-icon><span>批量删除</span></el-button>
-        </el-tooltip>
-      </div>
-      <div class="right-actions">
-        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" class="custom-toolbar"></right-toolbar>
-      </div>
-    </div>
-   
-    <!-- 表格区域 -->
-    <div class="message-card">
-      <div class="message-card-header">
-        <div class="left"><div class="title-icon"><el-icon><ChatDotRound /></el-icon></div><h3 class="title">消息列表</h3></div>
-        <div class="right"><div class="total-badge">共 <span class="highlight">{{ total }}</span> 条消息</div></div>
-      </div>
-      
-      <div class="table-container">
-        <el-table v-loading="loading" :data="messageSystemList" @selection-change="handleSelectionChange" border class="message-table">
-          <el-table-column type="selection" width="40" align="center" />
-          <el-table-column label="消息标题" prop="messageTitle" min-width="30%" width="auto">
-            <template #default="scope">
-              <div class="msg-title-cell" @click="openDrawer(scope.row.messageId)">
-                <el-icon class="envelope-icon"><Message /></el-icon>
-                <span class="msg-text">{{ scope.row.messageTitle }}</span>
-                <div class="status-dot" :class="getStatusClass(scope.row.messageStatus)" :title="getStatusLabel(scope.row.messageStatus)"></div>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="发件人" prop="createBy" min-width="15%" width="auto" align="center">
-            <template #default="scope">
-              <div class="sender-wrapper">
-                <el-avatar :size="28" class="sender-avatar" :style="getRandomAvatarColor(scope.row.createBy)">{{ scope.row.createBy.substring(0, 1).toUpperCase() }}</el-avatar>
-                <span class="sender-name">{{ scope.row.createBy }}</span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="发送时间" prop="createTime" min-width="18%" width="auto" align="center">
-            <template #default="scope"><span class="time-text">{{ formatDate(scope.row.createTime) }}</span></template>
-          </el-table-column>
-          <el-table-column label="状态" min-width="10%" width="auto" align="center">
-            <template #default="scope">
-              <el-tag :type="getTagType(scope.row.messageStatus)" size="small" effect="light" class="status-tag">{{ getStatusLabel(scope.row.messageStatus) }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" min-width="15%" width="auto" align="center">
-            <template #default="scope">
-              <div class="op-buttons">
-                <el-button type="primary" link size="small" @click.stop="openDrawer(scope.row.messageId)"><el-icon><View /></el-icon>查看</el-button>
-                <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)"><el-icon><Delete /></el-icon>删除</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        
-        <!-- 空数据展示 -->
-        <div v-if="!loading && messageSystemList.length === 0" class="empty-data">
-          <el-empty description="暂无消息数据">
-            <el-button type="primary" size="small" @click="handleAdd" v-hasPermi="['modelMessage:messageSystem:add']"><el-icon><Plus /></el-icon>发送新消息</el-button>
-          </el-empty>
-        </div>
-      </div>
+  <div class="app-container">
+    <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-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" />
       
-      <!-- 分页区域 -->
-      <div class="table-footer" v-if="total > 0">
-        <el-pagination background layout="total, sizes, prev, pager, next" :total="total" :page-size="queryParams.pageSize" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-      </div>
-    </div>
-    
-    <!-- 发送信息组件 -->
+    <!-- 添加或修改消息管理对话框 -->
     <AddMessage ref="sendMessageRef" @success="handleSendSuccess"/>
-    
-    <!-- 信息详情弹窗 -->
-    <el-dialog :title="title" v-model="drawerVisible" width="600px" destroy-on-close class="message-detail-dialog">
-      <div class="message-detail-content">
-        <div class="message-header">
-          <h2 class="message-detail-title">{{ detailForm.messageTitle }}</h2>
-          <div class="message-meta">
-            <div class="sender-info">
-              <el-avatar :size="36" class="sender-detail-avatar" :style="getRandomAvatarColor(detailForm.createBy)">{{ detailForm.createBy ? detailForm.createBy.substring(0, 1).toUpperCase() : '' }}</el-avatar>
-              <div class="sender-detail">
-                <div class="sender-name">{{ detailForm.createBy }}</div>
-                <div class="send-time">{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
-              </div>
-            </div>
-            <el-tag :type="getTagType(detailForm.messageStatus)" effect="dark" class="detail-status-tag">{{ getStatusLabel(detailForm.messageStatus) }}</el-tag>
-          </div>
-        </div>
-        <div class="message-body"><p class="message-content">{{ detailForm.messageContent }}</p></div>
-        <div class="message-footer">
-          <div class="info-grid">
-            <div class="info-item"><div class="info-icon"><el-icon><User /></el-icon></div><span class="label">收件人:</span><span class="value">{{ detailForm.messageRecipient }}</span></div>
-            <div class="info-item"><div class="info-icon"><el-icon><Operation /></el-icon></div><span class="label">发送方式:</span><span class="value"><dict-tag :options="send_mode" :value="detailForm.sendMode" /></span></div>
-            <div class="info-item"><div class="info-icon"><el-icon><InfoFilled /></el-icon></div><span class="label">消息类型:</span><span class="value"><dict-tag :options="message_type" :value="detailForm.messageType" /></span></div>
-            <div class="info-item" v-if="detailForm.remark"><div class="info-icon"><el-icon><Document /></el-icon></div><span class="label">备注:</span><span class="value">{{ detailForm.remark }}</span></div>
-          </div>
-        </div>
-      </div>
+
+    <!-- 消息详情对话框 -->
+    <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, toRefs, getCurrentInstance, computed } from 'vue';
+import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { delMessageSystem, listMessageSystem, getMessageSystem, getUpdate } from "@/api/modelMessage/messageSystem";
 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 { parseTime } = proxy;
 
 const messageSystemList = ref([]);
 const loading = ref(true);
@@ -224,191 +212,5 @@ function openDrawer(messageId) {
   });
 }
 
-function getStatusClass(status) {
-  const statusMap = {
-    '0': 'status-unread',
-    '1': 'status-read'
-  };
-  return statusMap[status] || 'status-default';
-}
-
-function getStatusLabel(status) {
-  const statusMap = {
-    '0': '未读',
-    '1': '已读'
-  };
-  return statusMap[status] || '未知';
-}
-
-function getTagType(status) {
-  const typeMap = {
-    '0': 'danger',
-    '1': 'success'
-  };
-  return typeMap[status] || 'info';
-}
-
-function getRandomAvatarColor(seed) {
-  const colors = [
-    'linear-gradient(135deg, #667eea, #764ba2)',
-    'linear-gradient(135deg, #43e97b, #38f9d7)',
-    'linear-gradient(135deg, #fa709a, #fee140)',
-    'linear-gradient(135deg, #6a11cb, #2575fc)',
-    'linear-gradient(135deg, #f093fb, #f5576c)'
-  ];
-  const index = seed ? seed.length % colors.length : 0;
-  return { background: colors[index] };
-}
-
-// 格式化日期
-const formatDate = (dateString) => {
-  if (!dateString) return '';
-  const date = new Date(dateString);
-  if (isNaN(date)) return dateString;
-  
-  const today = new Date();
-  const yesterday = new Date(today);
-  yesterday.setDate(yesterday.getDate() - 1);
-  
-  if (date.toDateString() === today.toDateString()) {
-    return '今天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-  } else if (date.toDateString() === yesterday.toDateString()) {
-    return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-  } else if (date.getFullYear() === today.getFullYear()) {
-    return (date.getMonth() + 1) + '月' + date.getDate() + '日 ' + 
-           date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-  }
-  
-  return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
-};
-
-// 分页处理
-const handleSizeChange = (size) => {
-  queryParams.value.pageSize = size;
-  getList();
-};
-
-const handleCurrentChange = (page) => {
-  queryParams.value.pageNum = page;
-  getList();
-};
-
 getList();
-</script>
-<style scoped>
-/* 全局布局 */
-.message-system-container{padding:16px;background:#f5f7fa;min-height:100vh}
-.message-card{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.1);margin-bottom:16px}
-.message-card-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0}
-.left{display:flex;align-items:center}
-.right{display:flex;align-items:center}
-.title-icon{width:32px;height:32px;border-radius:6px;background:#409EFF;display:flex;align-items:center;justify-content:center}
-.title-icon .el-icon{color:white;font-size:18px}
-.title{margin:0 0 0 10px;font-size:16px;font-weight:500}
-.total-badge{font-size:13px;color:#606266;background:#f6f8fa;border-radius:20px;padding:4px 12px}
-.highlight{color:#409EFF;font-weight:500}
-
-/* 表格容器 */
-.table-container{padding:12px}
-.message-table{width:100%}
-:deep(.el-table__header) th{background-color:#f5f7fa;font-weight:500;height:45px;padding:8px 0}
-:deep(.el-table__row){transition:all 0.2s}
-:deep(.el-table__row:hover){background-color:#f0f7ff}
-:deep(.el-table .cell){padding:8px 5px}
-:deep(.el-table__body-wrapper){overflow-x:hidden}
-:deep(.el-table){table-layout:fixed}
-
-/* 消息标题单元格 */
-.msg-title-cell{display:flex;align-items:center;padding:6px 0;cursor:pointer;position:relative}
-.envelope-icon{color:#409EFF;margin-right:8px;font-size:16px;flex-shrink:0}
-.msg-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
-.status-dot{width:8px;height:8px;border-radius:50%;margin-left:8px;flex-shrink:0}
-.status-unread{background-color:#f56c6c;box-shadow:0 0 0 2px rgba(245,108,108,0.2)}
-.status-read{background-color:#67c23a;box-shadow:0 0 0 2px rgba(103,194,58,0.2)}
-
-/* 发件人单元格 */
-.sender-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}
-.sender-avatar{border:1px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
-.sender-name{font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
-
-/* 时间文本 */
-.time-text{font-size:13px;color:#606266}
-
-/* 状态标签 */
-.status-tag{padding:4px 8px}
-
-/* 操作按钮 */
-.op-buttons{display:flex;justify-content:center;gap:8px}
-.op-buttons .el-button{padding:6px;min-height:28px}
-.op-buttons .el-button .el-icon{margin-right:4px}
-
-/* 空数据 */
-.empty-data{text-align:center;padding:30px 0}
-
-/* 表格页脚 */
-.table-footer{padding:12px 16px;border-top:1px solid #ebeef5;text-align:right}
-
-/* 重新设计的搜索面板 */
-.search-panel{background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.05);margin-bottom:20px;overflow:hidden}
-.search-panel-header{display:flex;align-items:center;height:54px;padding:0 20px;background:linear-gradient(90deg,#f8f9fc 0%,#f2f5fa 100%);border-bottom:1px solid #eef0f5}
-.header-icon{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#4b9dff,#2d84ea);display:flex;align-items:center;justify-content:center}
-.header-icon .el-icon{color:#fff;font-size:16px}
-.header-title{margin-left:12px;font-size:15px;font-weight:500;color:#2c3e50}
-.search-panel-content{padding:15px 20px}
-
-/* 自定义表单样式 */
-.custom-input{width:220px;transition:all 0.3s}
-.custom-input:hover,:deep(.custom-input:focus-within){box-shadow:0 0 0 2px rgba(64,158,255,0.2)}
-.custom-select{width:180px;transition:all 0.3s}
-.custom-select:hover,:deep(.custom-select:focus-within){box-shadow:0 0 0 2px rgba(64,158,255,0.2)}
-.search-actions{margin-left:10px}
-:deep(.el-input__wrapper),:deep(.el-select .el-input__wrapper){box-shadow:0 0 0 1px rgba(220,223,230,0.6) inset;padding:1px 11px;border-radius:6px}
-:deep(.el-input__wrapper:hover),:deep(.el-select .el-input__wrapper:hover){box-shadow:0 0 0 1px #c0c4cc inset}
-:deep(.el-form-item__label){color:#606266;font-weight:500}
-.option-with-dot{display:flex;align-items:center;gap:5px}
-
-/* 自定义按钮样式 */
-.search-btn{padding:0 20px;height:36px;background:linear-gradient(90deg,#3a8ee6,#5ca9fd);border:none;border-radius:6px;color:white;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:5px}
-.search-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(64,158,255,0.3)}
-.search-btn:active{transform:translateY(0);opacity:0.9}
-.reset-btn{padding:0 20px;height:36px;background:#fff;border:1px solid #dcdfe6;border-radius:6px;color:#606266;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:5px}
-.reset-btn:hover{border-color:#409EFF;color:#409EFF}
-
-/* 操作工具栏 */
-.action-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 15px rgba(0,0,0,0.05)}
-.left-actions{display:flex;align-items:center;gap:10px}
-.right-actions{display:flex;align-items:center}
-
-/* 操作按钮 */
-.action-btn{height:38px;border-radius:6px;transition:all 0.3s;font-weight:500;display:flex;align-items:center;gap:5px}
-.action-btn .el-icon{font-size:16px}
-.action-btn:hover{transform:translateY(-2px)}
-.send-btn{background:linear-gradient(90deg,#3a8ee6,#5ca9fd);border:none;padding:8px 16px;color:#fff}
-.send-btn:hover{box-shadow:0 4px 12px rgba(64,158,255,0.3)}
-.delete-btn{background:linear-gradient(90deg,#f56c6c,#fa8c8c);border:none;padding:8px 16px;color:#fff}
-.delete-btn:hover:not(:disabled){box-shadow:0 4px 12px rgba(245,108,108,0.3)}
-.delete-btn:disabled{background:#f7f7f7;color:#c0c4cc;border:1px solid #e4e7ed;cursor:not-allowed}
-.refresh-btn{background:#fff;color:#606266;border:1px solid #dcdfe6;padding:8px 16px}
-.refresh-btn:hover{border-color:#409EFF;color:#409EFF}
-.custom-toolbar{margin-left:10px}
-
-/* 详情弹窗 */
-.message-detail-dialog :deep(.el-dialog__header){background:#409EFF;color:white;padding:15px;border-radius:8px 8px 0 0}
-.message-detail-dialog :deep(.el-dialog__title){color:white}
-.message-detail-dialog :deep(.el-dialog__headerbtn .el-dialog__close){color:white}
-.message-detail-content{padding:20px}
-.message-header{margin-bottom:20px;border-bottom:1px solid #ebeef5;padding-bottom:15px}
-.message-detail-title{font-size:18px;margin-bottom:15px;font-weight:600}
-.message-meta{display:flex;justify-content:space-between;align-items:center}
-.sender-info{display:flex;align-items:center}
-.sender-detail{margin-left:10px}
-.sender-name{font-weight:500}
-.send-time{font-size:12px;color:#999}
-.message-body{background:#f9fbfd;padding:15px;border-radius:8px;margin-bottom:20px;min-height:100px;border-left:3px solid #409EFF}
-.message-content{white-space:pre-line;line-height:1.6}
-.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
-.info-item{display:flex;align-items:center}
-.info-icon{width:24px;height:24px;border-radius:50%;background:rgba(64,158,255,0.1);display:flex;align-items:center;justify-content:center;margin-right:8px}
-.info-item .label{color:#909399;margin-right:5px;font-weight:500}
-.info-item .value{color:#303133}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/modelMessage/template/components/TemplateFormDialog.vue b/src/views/modelMessage/template/components/TemplateFormDialog.vue
index 4a95880..a720206 100644
--- a/src/views/modelMessage/template/components/TemplateFormDialog.vue
+++ b/src/views/modelMessage/template/components/TemplateFormDialog.vue
@@ -1,91 +1,50 @@
 <template>
   <!-- 添加或修改模版管理对话框 -->
-  <el-dialog :title="title" :modelValue="visible" @update:modelValue="emit('update:visible', $event)" width="680px" append-to-body destroy-on-close custom-class="template-dialog">
-    <el-form ref="templateRef" :model="form" :rules="rules" label-width="100px">
-      <el-row :gutter="20">
+  <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="请输入模版名称">
-              <template #prefix>
-                <el-icon><DocumentAdd /></el-icon>
-              </template>
-            </el-input>
+            <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="模版CODE" prop="templateCode">
-            <el-input v-model="form.templateCode" placeholder="请输入模版CODE" @blur="validateTemplateCode">
-              <template #prefix>
-                <el-icon><Document /></el-icon>
-              </template>
-            </el-input>
-            <div class="form-tips">CODE必须以SMS_开头</div>
+          <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">
-                <div class="type-option">
-                  <el-icon><Message /></el-icon>
-                  <span>{{ dict.label }}</span>
-                </div>
-              </el-option>
+              <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">
-                <div class="variable-option">
-                  <span class="variable-name">{{ item.variableName }}</span>
-                  <span class="variable-content">${{ item.variableName }}</span>
-                </div>
-              </el-option>
+                :value="item.variableName" />
             </el-select>
-            <div class="variable-selected" v-if="form.templateVariable?.length > 0">
-              <span class="selected-label">已选变量：</span>
-              <div class="variable-tags">
-                <el-tag v-for="(varName, index) in form.templateVariable" :key="index" 
-                  size="small" class="variable-tag" effect="light" color="#ecf5ff">
-                  {{ varName }}
-                </el-tag>
-              </div>
-            </div>
           </el-form-item>
         </el-col>
+      </el-row>
+      <el-row>
         <el-col :span="24">
           <el-form-item label="模版内容" prop="templateContent">
-            <div class="content-editor-container">
-              <div class="editor-section">
-                <div class="editor-header">
-                  <el-icon><Edit /></el-icon>
-                  <span>编辑区域</span>
-                </div>
-                <div class="editor-wrapper">
-                  <el-input v-model="form.templateContent" type="textarea" :rows="6" placeholder="请输入模版内容"
-                    resize="none" class="template-textarea"/>
-                </div>
-                <div class="template-tips">
-                  <el-icon><InfoFilled /></el-icon>
-                  选中变量后会自动添加到模版内容中
-                </div>
-              </div>
-              <div class="preview-section" v-if="form.templateContent">
-                <div class="preview-header">
-                  <el-icon><View /></el-icon>
-                  <span>实时预览</span>
-                </div>
-                <div class="preview-body">{{ form.templateContent }}</div>
-              </div>
-            </div>
+            <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="场景说明" prop="remark">
+          <el-form-item label="场景说明">
             <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入场景说明" />
           </el-form-item>
         </el-col>
@@ -93,8 +52,8 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleCancel" plain>取 消</el-button>
         <el-button type="primary" @click="handleSubmit">确 定</el-button>
+        <el-button @click="handleCancel">取 消</el-button>
       </div>
     </template>
   </el-dialog>
@@ -102,7 +61,6 @@
 
 <script setup name="TemplateFormDialog">
 import { ref, reactive, toRefs, getCurrentInstance, watch } from 'vue';
-import { Document, Message, InfoFilled, DocumentAdd, Edit, View, Memo } from '@element-plus/icons-vue';
 
 const { proxy } = getCurrentInstance();
 const { template_type } = proxy.useDict("template_type");
@@ -139,7 +97,6 @@ const data = reactive({
     templateCode: [{ required: true, message: '请输入模版CODE', trigger: 'blur' }, { validator: validateTemplateCode, 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' }]
   }
 });
@@ -154,7 +111,7 @@ watch(() => props.formData, (newVal) => {
 }, { deep: true, immediate: true });
 
 // Methods
-function validateTemplateCode(rule, value, callback) {
+function validateTemplateCode(_, value, callback) {
   if (!value) {
     callback(new Error('请输入模版CODE'));
   } else if (!value.startsWith('SMS_')) {
@@ -166,15 +123,12 @@ function validateTemplateCode(rule, value, callback) {
 
 // 当变量选项改变时触发
 function handleVariableChange(value) {
-  // 保存当前模板内容光标位置
-  const textarea = document.querySelector('.editor-wrapper textarea');
-  const cursorPos = textarea ? textarea.selectionStart : -1;
-
-  // 原有逻辑
   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 => {
@@ -183,20 +137,12 @@ function handleVariableChange(value) {
     }
   });
 
-  // 改进：在光标位置插入变量
+  // 添加新选中的变量占位符
   const lastSelectedVariableName = value[value.length - 1];
   if (lastSelectedVariableName) {
     const variablePlaceholder = `\${${lastSelectedVariableName}}`;
     if (!form.value.templateContent.includes(variablePlaceholder)) {
-      if (cursorPos >= 0) {
-        // 在光标位置插入
-        const before = form.value.templateContent.substring(0, cursorPos);
-        const after = form.value.templateContent.substring(cursorPos);
-        form.value.templateContent = `${before} ${variablePlaceholder} ${after}`;
-      } else {
-        // 原来的方式：追加到末尾
-        form.value.templateContent += ` ${variablePlaceholder}`;
-      }
+      form.value.templateContent += ` ${variablePlaceholder}`;
     }
   }
   form.value.templateContent = form.value.templateContent.replace(/\s+/g, ' ').trim();
@@ -230,49 +176,3 @@ defineExpose({
   resetForm
 });
 </script>
-
-<style scoped>
-/* 表单提示样式 */
-.form-tips { color: #909399; font-size: 12px; margin-top: 4px; }
-
-/* 下拉选项样式 */
-.type-option { display: flex; align-items: center; gap: 8px; }
-.variable-option { display: flex; justify-content: space-between; align-items: center; width: 100%; }
-.variable-content { color: #409EFF; font-size: 13px; font-family: monospace; }
-
-/* 已选变量区域 */
-.variable-selected { margin-top: 10px; background: #f9fafc; border-radius: 6px; padding: 10px; border: 1px dashed #dcdfe6; }
-.selected-label { font-size: 12px; color: #606266; margin-right: 8px; }
-.variable-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
-.variable-tag { margin-right: 0; border-color: #d9ecff; }
-
-/* 内容编辑器区域 */
-.content-editor-container { display: flex; gap: 0; margin-bottom: 10px; border: 1px solid #dcdfe6; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); height: 320px; width:600px }
-.editor-section, .preview-section { width: 50%; display: flex; flex-direction: column; height: 100%; }
-.editor-header, .preview-header { display: flex; align-items: center; gap: 6px; background: #f5f7fa; padding: 10px 12px; border-bottom: 1px solid #e4e7ed; font-size: 13px; color: #606266; font-weight: 500; flex-shrink: 0; }
-.editor-header .el-icon, .preview-header .el-icon { font-size: 16px; color: #409EFF; }
-.editor-wrapper { padding: 12px; background: #fff; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
-
-/* 文本域样式 */
-.template-textarea { width: 100%; height: 100%; }
-:deep(.template-textarea .el-textarea__inner) { height: 100% !important; min-height: unset !important; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 1.6; font-size: 14px; padding: 12px; resize: none; }
-
-.preview-section { border-left: 1px solid #dcdfe6; overflow: hidden; display: flex; flex-direction: column; }
-.preview-body { padding: 15px; flex: 1; overflow-y: auto; background: white; font-size: 14px; white-space: pre-wrap; color: #303133; line-height: 1.6; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
-.template-tips { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #909399; margin: 0 0 10px 0; padding: 8px 12px; background: #f0f9eb; border-radius: 4px; border-left: 3px solid #67c23a; flex-shrink: 0; }
-
-/* 对话框样式 */
-:deep(.template-dialog .el-dialog__header) { padding: 16px 20px; margin-right: 0; background: #409EFF; border-radius: 8px 8px 0 0; }
-:deep(.template-dialog .el-dialog__title) { color: white; font-weight: 600; }
-:deep(.template-dialog .el-dialog__headerbtn .el-dialog__close) { color: rgba(255, 255, 255, 0.9); }
-:deep(.template-dialog .el-dialog__body) { padding: 24px; }
-:deep(.template-dialog .el-dialog__footer) { padding: 12px 20px 16px; border-top: 1px solid #ebeef5; }
-
-/* 响应式布局 */
-@media screen and (max-width: 768px) {
-  .content-editor-container { flex-direction: column; height: auto; }
-  .editor-section, .preview-section { width: 100%; }
-  .preview-section { border-left: none; border-top: 1px solid #dcdfe6; }
-  .editor-wrapper, .preview-body { height: 160px; }
-}
-</style>
diff --git a/src/views/modelMessage/template/components/TemplatePreviewDialog.vue b/src/views/modelMessage/template/components/TemplatePreviewDialog.vue
deleted file mode 100644
index 91be1f1..0000000
--- a/src/views/modelMessage/template/components/TemplatePreviewDialog.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <!-- 模板预览对话框 -->
-  <el-dialog title="模板预览" :modelValue="visible" @update:modelValue="emit('update:visible', $event)"
-    width="540px" append-to-body destroy-on-close custom-class="preview-dialog">
-    <div class="preview-container">
-      <div class="template-preview-header">
-        <div class="preview-title">{{ previewData.templateName }}</div>
-        <div class="preview-meta">
-          <el-tag size="small" effect="dark">{{ getTemplatTypeText(previewData.templateType) }}</el-tag>
-          <span class="preview-code">
-            <el-icon><Document /></el-icon>
-            {{ previewData.templateCode }}
-          </span>
-        </div>
-      </div>
-      <div class="message-preview">
-        <div class="message-bubble">
-          <div class="message-content">{{ previewData.templateContent }}</div>
-          <div class="message-time">{{ formatTime() }}</div>
-        </div>
-      </div>
-      <div class="preview-variables-section">
-        <div class="section-title">
-          <el-icon><Collection /></el-icon>
-          <span>模板变量</span>
-        </div>
-        <div class="preview-variables">
-          <el-tag v-for="(item, index) in previewVariables" :key="index" size="small" effect="plain" class="var-tag">
-            {{ item }}
-          </el-tag>
-          <div class="no-variables" v-if="!previewVariables.length">无变量</div>
-        </div>
-      </div>
-      <div class="preview-remark">
-        <div class="section-title">
-          <el-icon><Memo /></el-icon>
-          <span>场景说明</span>
-        </div>
-        <div class="remark-content">{{ previewData.remark || '无' }}</div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup name="TemplatePreviewDialog">
-import { ref, computed, getCurrentInstance } from 'vue';
-import { Document, Collection, Memo } from '@element-plus/icons-vue';
-
-const { proxy } = getCurrentInstance();
-const { template_type } = proxy.useDict("template_type");
-
-// Props
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  previewData: {
-    type: Object,
-    default: () => ({})
-  },
-  previewVariables: {
-    type: Array,
-    default: () => []
-  }
-});
-
-// Emits
-const emit = defineEmits(['update:visible']);
-
-// Methods
-/** 获取模板类型文字 */
-function getTemplatTypeText(type) {
-  const found = template_type.value.find(item => item.value === type);
-  return found ? found.label : '未知类型';
-}
-
-// 添加格式化时间方法
-const formatTime = () => {
-  const now = new Date();
-  const hours = now.getHours().toString().padStart(2, '0');
-  const minutes = now.getMinutes().toString().padStart(2, '0');
-  return `${hours}:${minutes}`;
-};
-</script>
-
-<style scoped>
-/* 预览对话框样式 */
-:deep(.preview-dialog .el-dialog__header) { padding: 16px 20px; margin-right: 0; background: #67c23a; border-radius: 8px 8px 0 0; }
-:deep(.preview-dialog .el-dialog__title) { color: white; font-weight: 600; }
-:deep(.preview-dialog .el-dialog__headerbtn .el-dialog__close) { color: rgba(255, 255, 255, 0.9); }
-:deep(.preview-dialog .el-dialog__body) { padding: 0; }
-
-/* 预览内容样式 */
-.preview-container { background: #f9fafc; }
-.template-preview-header { padding: 16px; border-bottom: 1px solid #ebeef5; }
-.preview-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #303133; }
-.preview-meta { display: flex; align-items: center; gap: 12px; }
-.preview-code { color: #606266; font-size: 13px; display: flex; align-items: center; gap: 4px; }
-.message-preview { background: #ebebeb; padding: 20px; position: relative; min-height: 100px; }
-.message-bubble { max-width: 80%; background: white; border-radius: 8px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: relative; }
-.message-content { color: #333; font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
-.message-time { text-align: right; font-size: 12px; color: #999; margin-top: 6px; }
-.preview-variables-section, .preview-remark { padding: 16px; border-top: 1px solid #ebeef5; }
-.section-title { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 500; color: #303133; }
-.preview-variables { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
-.var-tag { margin-right: 0; }
-.no-variables { color: #909399; font-size: 13px; font-style: italic; }
-.remark-content { background: white; border-radius: 6px; padding: 12px; font-size: 14px; color: #606266; border: 1px solid #ebeef5; min-height: 50px; }
-</style>
diff --git a/src/views/modelMessage/template/index.vue b/src/views/modelMessage/template/index.vue
index 62fb0d1..65f0b38 100644
--- a/src/views/modelMessage/template/index.vue
+++ b/src/views/modelMessage/template/index.vue
@@ -1,76 +1,68 @@
 <template>
-  <div class="template-container">
-    <!-- 搜索区域 -->
-    <el-card class="search-card" shadow="hover">
-      <div class="card-header">
-        <el-icon><Search /></el-icon>
-        <span>搜索条件</span>
-      </div>
-      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
-        <el-form-item label="模版名称" prop="templateName">
-          <el-input v-model="queryParams.templateName" placeholder="请输入模版名称" clearable @keyup.enter="handleQuery" />
-        </el-form-item>
-        <el-form-item label="模版类型" prop="templateType">
-          <el-select v-model="queryParams.templateType" placeholder="请选择模版类型" clearable style="width:180px">
-            <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-card>
-
-    <!-- 工具栏 -->
-    <el-card class="action-card" shadow="hover">
-      <div class="card-header">
-        <el-icon><Operation /></el-icon>
-        <span>操作面板</span>
-      </div>
-      <div class="action-bar">
-        <div>
-          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增模版</el-button>
-          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">批量删除</el-button>
-          <el-button type="success" plain icon="Download" @click="handleExport">导出数据</el-button>
-        </div>
-      </div>
-    </el-card>
-
-    <!-- 数据表格 -->
-    <el-card class="table-card" shadow="hover">
-      <div class="card-header">
-        <el-icon><List /></el-icon>
-        <span>模版列表</span>
-      </div>
-      <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange"
-        highlight-current-row stripe border>
-        <el-table-column type="selection" width="50" align="center" />
-        <el-table-column label="模版名称" align="center" prop="templateName" min-width="120" show-overflow-tooltip />
-        <el-table-column label="模版CODE" align="center" prop="templateCode" min-width="120" show-overflow-tooltip />
-        <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" min-width="180" show-overflow-tooltip />
-        <el-table-column label="变量" align="center" prop="templateVariable" min-width="120" show-overflow-tooltip />
-        <el-table-column label="场景说明" align="center" prop="remark" min-width="120" show-overflow-tooltip />
-        <el-table-column label="操作" align="center" width="215">
-          <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="success" icon="View" @click="handlePreview(scope.row)">预览</el-button>
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination-container">
-        <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize" @pagination="getList" />
-      </div>
-    </el-card>
+  <div class="app-container">
+    <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" />
 
     <!-- 添加或修改模版管理对话框 -->
     <TemplateFormDialog
@@ -83,40 +75,28 @@
       @cancel="cancel"
       ref="templateFormDialogRef"
     />
-
-    <!-- 模板预览对话框 -->
-    <TemplatePreviewDialog
-      :visible="previewOpen"
-      :previewData="previewData"
-      :previewVariables="previewVariables"
-      @update:visible="previewOpen = $event"
-    />
   </div>
 </template>
 
 <script setup name="Template">
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/modelMessage/template";
 import { selectVariable } from "@/api/modelMessage/variable";
-import { Search, Operation, List } from '@element-plus/icons-vue';
-import TemplateFormDialog from './components/TemplateFormDialog.vue';
-import TemplatePreviewDialog from './components/TemplatePreviewDialog.vue';
+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);
+const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const variable = ref([]);
-// 预览数据
-const previewOpen = ref(false);
-const previewData = ref({});
-const previewVariables = ref([]);
-// 组件引用
 const templateFormDialogRef = ref(null);
 
 const data = reactive({
@@ -126,11 +106,10 @@ const data = reactive({
     pageSize: 10,
     templateName: null,
     templateType: null,
-  },
-  rules: {}
+  }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form } = toRefs(data);
 
 /** 查询模版管理列表 */
 function getList() {
@@ -199,19 +178,6 @@ function handleUpdate(row) {
   });
 }
 
-/** 预览模板 */
-function handlePreview(row) {
-  previewData.value = { ...row };
-  previewVariables.value = row.templateVariable ? row.templateVariable.split('/') : [];
-  previewOpen.value = true;
-}
-
-/** 获取模板类型文字 */
-function getTemplatTypeText(type) {
-  const found = template_type.value.find(item => item.value === type);
-  return found ? found.label : '未知类型';
-}
-
 /** 处理表单提交 */
 function handleFormSubmit(formData) {
   const submitData = { ...formData };
@@ -232,8 +198,6 @@ function handleFormSubmit(formData) {
   }
 }
 
-
-
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _templateIds = row.templateId || ids.value;
@@ -260,28 +224,6 @@ async function getVariable() {
   }
 }
 
-
-
 getVariable();
 getList();
-</script>
-
-<style scoped>
-.template-container { padding: 16px; min-height: 100vh; background: #f0f2f5; }
-
-/* 卡片通用样式 */
-.search-card, .action-card, .table-card { margin-bottom: 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important; transition: all 0.3s; }
-.search-card:hover, .action-card:hover, .table-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; }
-
-/* 卡片标题 */
-.card-header { display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #ebeef5; font-size: 16px; font-weight: 500; color: #303133; }
-.card-header .el-icon { margin-right: 6px; font-size: 18px; color: #409EFF; }
-
-/* 操作栏样式 */
-.action-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
-
-/* 表格和分页样式 */
-.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; }
-
-
-</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
index 4fe7898..f0f9b19 100644
--- a/src/views/modelMessage/variable/components/VariableFormDialog.vue
+++ b/src/views/modelMessage/variable/components/VariableFormDialog.vue
@@ -1,107 +1,75 @@
 <template>
   <!-- 添加或修改变量管理对话框 -->
-  <el-dialog 
-    :title="title" 
-    :modelValue="visible" 
-    @update:modelValue="emit('update:visible', $event)" 
-    width="650px" 
-    append-to-body 
-    custom-class="variable-dialog"
-  >
-    <div class="dialog-container">
-      <div class="dialog-header-info">
-        <div class="header-icon">
-          <i class="el-icon-magic-stick" v-if="form.variableId == null"></i>
-          <i class="el-icon-edit" v-else></i>
-        </div>
-        <div class="header-text">
-          {{ form.variableId == null ? '创建新的变量，可用于个性化消息内容' : '编辑已有变量，修改后将影响使用该变量的消息模板' }}
-        </div>
-      </div>
-      <div class="dialog-form-container">
-        <el-form ref="variableRef" :model="form" :rules="rules" label-width="100px" class="enhanced-form">
+  <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="请输入变量名称" clearable>
-              <template #prefix><i class="el-icon-price-tag variable-icon"></i></template>
-            </el-input>
-            <span class="form-tip"><i class="el-icon-info-filled tip-icon"></i> 变量名称用于在消息模板中识别，请确保其唯一性</span>
+            <el-input v-model="form.variableName" placeholder="请输入变量名称" maxlength="50" />
           </el-form-item>
-          
-          <el-form-item label="变量类型" prop="variableType" class="variable-type-section">
-            <div class="type-selection-wrapper">
-              <el-radio-group v-model="form.variableType" @change="handleVariableTypeChange" class="type-radio-group">
-                <el-radio-button label="指定文本">
-                  <i class="el-icon-document"></i> 指定文本
-                </el-radio-button>
-                <el-radio-button label="内置变量">
-                  <i class="el-icon-cpu"></i> 内置变量
-                </el-radio-button>
-              </el-radio-group>
-              <div class="type-description">
-                {{ form.variableType === '指定文本' ? 
-                    '指定文本变量用于设置固定的文本内容' : 
-                    '内置变量会在发送消息时自动替换为系统值' }}
-              </div>
-            </div>
+        </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>
-
-          <div class="variable-content">
-            <transition name="fade" mode="out-in">
-              <el-form-item v-if="form.variableType === '内置变量'" label="内置变量" prop="variableContent" class="built-in-form-item content-transition-item">
-                <div class="built-in-variables-grid">
-                  <div
-                    v-for="(item, key) in builtInVariableOptions"
-                    :key="key"
-                    :class="['variable-option', {'selected': form.variableContent === key}]"
-                    :data-type="key"
-                    @click="selectBuiltInVariable(key)"
-                  >
-                    <div class="variable-option-icon" :style="getVariableIconStyle(key, item.color)">
-                      <i :class="item.icon"></i>
-                    </div>
-                    <div class="variable-option-content">
-                      <div class="variable-option-title">{{ item.label }}</div>
-                      <div class="variable-option-desc">{{ item.description }}</div>
-                    </div>
-                  </div>
-                </div>
-                
-                <div class="variable-preview" v-if="form.variableContent">
-                  <div class="preview-header">
-                    <i class="el-icon-view"></i> 预览示例：{{ getVariablePreview(form.variableContent) }}
-                  </div>
-                </div>
-              </el-form-item>
-              
-              <el-form-item v-else-if="form.variableType === '指定文本'" label="变量内容" prop="variableContent" class="content-transition-item">
-                <el-input 
-                  v-model="form.variableContent" 
-                  type="textarea" 
-                  :rows="4" 
-                  placeholder="请输入变量内容" 
-                  class="content-input"
-                  maxlength="1000"
-                  show-word-limit
-                />
-              </el-form-item>
-            </transition>
-          </div>
-        </el-form>
-      </div>
-    </div>
+        </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 @click="handleCancel" plain>取 消</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
-          <i class="el-icon-check"></i> {{ form.variableId == null ? '创建' : '保存' }}
-        </el-button>
+        <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, computed } from 'vue'
+import { ref } from 'vue'
 
 // Props
 const props = defineProps({
@@ -135,58 +103,24 @@ const rules = {
   variableType: [{ required: true, message: '请选择变量类型', trigger: 'change' }]
 }
 
-// 内置变量选项配置
-const builtInVariableOptions = {
-  'time': { 
-    label: '发送时间', 
-    icon: 'el-icon-time',
-    description: '当前完整时间',
-    color: '#3498db'
-  },
-  'date': { 
-    label: '发送日期', 
-    icon: 'el-icon-date',
-    description: '当前完整日期',
-    color: '#3498db'
-  },
-  'datetime': { 
-    label: '发送日期+时间', 
-    icon: 'el-icon-timer',
-    description: '当前完整日期时间',
-    color: '#3498db'
-  },
-  'addresser': { 
-    label: '发件人', 
-    icon: 'el-icon-user',
-    description: '发送方的名称或账号',
-    color: '#e74c3c'
-  },
-  'recipients': { 
-    label: '收件人', 
-    icon: 'el-icon-avatar',
-    description: '接收方的名称或账号',
-    color: '#e74c3c'
-  },
-  'RandomnDigits': {
-    label: '随机数字',
-    icon: 'el-icon-coin',
-    description: '生成随机数字序列',
-    color: '#2ecc71'
-  },
-  'RandomnCharacters': {
-    label: '随机字母',
-    icon: 'el-icon-collection',
-    description: '生成随机字母序列',
-    color: '#2ecc71'
-  },
-  'RandomNDigitLetters': {
-    label: '随机数字+字母',
-    icon: 'el-icon-collection-tag',
-    description: '生成随机字母和数字',
-    color: '#2ecc71'
-  }
+// 内置变量的显示文本配置（简化版）
+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)
@@ -205,272 +139,8 @@ const handleSubmit = () => {
   })
 }
 
-const selectBuiltInVariable = (key) => {
-  props.form.variableContent = key
-}
-
-const getVariableIconStyle = (_, color) => {
-  return {
-    backgroundColor: color + '20',
-    color: color,
-    border: `1px solid ${color}40`
-  }
-}
-
-const getVariablePreview = (variableType) => {
-  const now = new Date()
-  const previews = {
-    'time': now.toLocaleTimeString(),
-    'date': now.toLocaleDateString(),
-    'datetime': now.toLocaleString(),
-    'addresser': '系统管理员',
-    'recipients': '用户A、用户B',
-    'RandomnDigits': '123456',
-    'RandomnCharacters': 'abcDEF',
-    'RandomNDigitLetters': 'a1B2c3'
-  }
-  return previews[variableType] || '示例值'
-}
-
 // 暴露给父组件的方法
 defineExpose({
   variableRef
 })
 </script>
-
-<style scoped>
-/* 对话框美化 - 进一步增强 */
-.variable-dialog :deep(.el-dialog__header) {
-  position: relative;
-  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px 25px;
-}
-.variable-dialog :deep(.el-dialog__title) {
-  font-size: 20px;
-  letter-spacing: 0.5px;
-}
-.variable-dialog :deep(.el-dialog__body) {
-  padding: 0;
-}
-
-.dialog-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.dialog-header-info {
-  display: flex;
-  align-items: center;
-  padding: 20px 25px;
-  background-color: rgba(103, 126, 234, 0.05);
-  border-bottom: 1px solid #edf2f7;
-}
-
-.header-icon {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 15px;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.header-icon i {
-  font-size: 24px;
-  color: white;
-}
-
-.header-text {
-  font-size: 15px;
-  color: #4a5568;
-  line-height: 1.5;
-  flex: 1;
-}
-
-.dialog-form-container {
-  padding: 25px;
-}
-
-.enhanced-form .el-form-item {
-  margin-bottom: 24px;
-}
-
-.enhanced-form .el-form-item__label {
-  font-weight: 600;
-  color: #2d3748;
-}
-
-.variable-icon {
-  color: #667eea;
-}
-
-.form-tip {
-  display: block;
-  margin-top: 8px;
-  font-size: 12px;
-  color: #718096;
-  line-height: 1.4;
-}
-
-.tip-icon {
-  margin-right: 4px;
-  color: #4299e1;
-}
-
-.variable-type-section {
-  margin-bottom: 30px;
-}
-
-.type-selection-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.type-radio-group {
-  display: flex;
-  gap: 12px;
-}
-
-.type-radio-group :deep(.el-radio-button__inner) {
-  padding: 12px 20px;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.type-radio-group :deep(.el-radio-button__inner i) {
-  margin-right: 6px;
-}
-
-.type-description {
-  font-size: 13px;
-  color: #718096;
-  padding: 8px 12px;
-  background-color: #f7fafc;
-  border-radius: 6px;
-  border-left: 3px solid #667eea;
-}
-
-.variable-content {
-  margin-top: 20px;
-}
-
-.built-in-variables-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.variable-option {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  border: 2px solid #e2e8f0;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background: white;
-}
-
-.variable-option:hover {
-  border-color: #667eea;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
-  transform: translateY(-2px);
-}
-
-.variable-option.selected {
-  border-color: #667eea;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
-  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
-}
-
-.variable-option-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 12px;
-  font-size: 18px;
-}
-
-.variable-option-content {
-  flex: 1;
-}
-
-.variable-option-title {
-  font-weight: 600;
-  color: #2d3748;
-  margin-bottom: 4px;
-}
-
-.variable-option-desc {
-  font-size: 12px;
-  color: #718096;
-  line-height: 1.4;
-}
-
-.variable-preview {
-  padding: 16px;
-  background: linear-gradient(135deg, #f7fafc, #edf2f7);
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-}
-
-.preview-header {
-  font-size: 14px;
-  color: #4a5568;
-  font-weight: 500;
-}
-
-.preview-header i {
-  margin-right: 6px;
-  color: #667eea;
-}
-
-.content-input {
-  border-radius: 8px;
-}
-
-.content-input :deep(.el-textarea__inner) {
-  border-radius: 8px;
-  border: 2px solid #e2e8f0;
-  transition: border-color 0.3s ease;
-}
-
-.content-input :deep(.el-textarea__inner:focus) {
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 20px 25px;
-  background-color: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-}
-
-.dialog-footer .el-button {
-  padding: 10px 24px;
-  border-radius: 6px;
-  font-weight: 500;
-}
-
-/* 过渡动画 */
-.fade-enter-active, .fade-leave-active {
-  transition: all 0.3s ease;
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-</style>
diff --git a/src/views/modelMessage/variable/index.vue b/src/views/modelMessage/variable/index.vue
index a5ccd1d..c24ec14 100644
--- a/src/views/modelMessage/variable/index.vue
+++ b/src/views/modelMessage/variable/index.vue
@@ -2,20 +2,23 @@
   <div class="app-container">
     <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-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>
-    <br>
+
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">创建变量</el-button>
+        <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-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>
@@ -23,44 +26,37 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <!-- 卡片视图 -->
-    <div class="card-view">
-      <el-row :gutter="16">
-        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in variableList" :key="index" class="card-col">
-          <el-card shadow="hover" class="variable-card" :class="{'variable-card-built-in': item.variableType === '内置变量'}">
-            <template #header>
-              <div class="card-header">
-                <div class="card-header-left">
-                  <el-checkbox v-model="item.isSelected" @change="handleSelectChange" class="card-checkbox"></el-checkbox>
-                  <span class="card-title">{{ item.variableName }}</span>
-                </div>
-                <el-tag size="small" effect="plain" :type="getVariableTypeTag(item.variableType)">{{ item.variableType }}</el-tag>
-              </div>
-            </template>
-            <div class="card-content">
-              <div class="card-item">
-                <span class="card-label">变量内容</span>
-                <div class="content-display" :class="{'content-built-in': item.variableType === '内置变量'}">
-                  <i v-if="item.variableType === '内置变量'" 
-                     :class="getBuiltInVariableIcon(item.variableContent)" 
-                     class="built-in-icon"></i>
-                  <span class="card-value">{{ formatVariableContent(item) }}</span>
-                </div>
-              </div>
-              <div class="card-actions">
-                <el-button type="primary" size="small" icon="Edit" @click="handleUpdate(item)">编辑</el-button>
-                <el-button type="danger" size="small" icon="Delete" @click="handleDelete(item)">删除</el-button>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
-    
+    <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" />
 
-    <!-- 变量管理对话框组件 -->
+    <!-- 添加或修改变量管理对话框 -->
     <VariableFormDialog ref="variableFormDialog" :visible="open" :title="title" :form="form"
       :submitLoading="submitLoading"  @update:visible="open = $event" @submit="submitForm"
       @cancel="cancel" @variable-type-change="handleVariableTypeChange"/>
@@ -70,8 +66,9 @@
 <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";
+import VariableFormDialog from "./components/variableFormDialog.vue";
 const { proxy } = getCurrentInstance();
+const { parseTime } = proxy;
 
 const variableList = ref([]);
 const open = ref(false);
@@ -104,10 +101,7 @@ const { queryParams, form } = toRefs(data);
 function getList() {
   loading.value = true;
   listVariable(queryParams.value).then(response => {
-    variableList.value = response.rows.map(item => {
-      item.isSelected = false;
-      return item;
-    });
+    variableList.value = response.rows;
     total.value = response.total;
     loading.value = false;
   });
@@ -147,12 +141,11 @@ function resetQuery() {
   handleQuery();
 }
 
-// 处理卡片选择变化
-function handleSelectChange() {
-  const selectedItems = variableList.value.filter(i => i.isSelected);
-  ids.value = selectedItems.map(i => i.variableId);
-  single.value = selectedItems.length != 1;
-  multiple.value = !selectedItems.length;
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.variableId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
 }
 
 /** 新增按钮操作 */
@@ -223,360 +216,21 @@ function handleExport() {
   }, `variable_${new Date().getTime()}.xlsx`)
 }
 
-// 根据变量类型获取标签类型
-function getVariableTypeTag(type) {
-  if (type === '指定文本') return 'success';
-  if (type === '内置变量') return 'primary';
-  return 'info';
-}
-
 // 格式化变量内容展示
 function formatVariableContent(item) {
-  if (item.variableType === '内置变量') {
-    return getBuiltInVariableLabel(item.variableContent);
-  }
-  return item.variableContent;
-}
-
-// 获取内置变量的显示文本
-function getBuiltInVariableLabel(value) {
+  // 内置变量的显示文本配置
   const labels = {
-    'time': '当前时间',
-    'date': '当前日期',
-    'datetime': '当前日期和时间',
-    'addresser': '发件人信息',
-    'recipients': '收件人信息',
+    'time': '发送时间',
+    'date': '发送日期',
+    'datetime': '发送日期+时间',
+    'addresser': '发件人',
+    'recipients': '收件人',
     'RandomnDigits': '随机数字',
     'RandomnCharacters': '随机字母',
-    'RandomNDigitLetters': '随机数字和字母'
+    'RandomNDigitLetters': '随机数字+字母'
   };
-  return labels[value] || value;
-}
-
-// 获取内置变量的图标
-function getBuiltInVariableIcon(value) {
-  const icons = {
-    'time': 'el-icon-time',
-    'date': 'el-icon-date',
-    'datetime': 'el-icon-date',
-    'addresser': 'el-icon-user',
-    'recipients': 'el-icon-user',
-    'RandomnDigits': 'el-icon-coin',
-    'RandomnCharacters': 'el-icon-collection',
-    'RandomNDigitLetters': 'el-icon-collection-tag'
-  };
-  return icons[value] || 'el-icon-data-analysis';
+  return item.variableType === '内置变量' ? labels[item.variableContent] || item.variableContent : item.variableContent;
 }
 
 getList();
-</script>
-
-<style scoped>
-/* 整体布局样式 */
-.app-container {
-  padding: 24px;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f8f9fa, #edf2f7);
-}
-
-.el-form {
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 15px;
-  padding: 25px;
-  box-shadow: 0 8px 15px rgba(0,0,0,0.05);
-  backdrop-filter: blur(4px);
-  margin-bottom: 20px;
-}
-
-/* 按钮样式优化 */
-.el-button {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-  border-radius: 8px;
-  font-weight: 500;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
-}
-
-.el-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-}
-
-.el-button--primary {
-  background: linear-gradient(45deg, #3a7bd5, #00d2ff);
-  border: none;
-  color: white;
-}
-
-.el-button--danger {
-  background: linear-gradient(45deg, #ff5f6d, #ffc371);
-  border: none;
-  color: white;
-}
-
-.el-button--warning {
-  background: linear-gradient(45deg, #f7971e, #ffd200);
-  border: none;
-  color: white;
-}
-
-.el-button--info {
-  background: linear-gradient(45deg, #8e9eab, #eef2f3);
-  border: none;
-  color: #333;
-}
-
-/* 输入框样式优化 */
-.el-input__inner, .el-textarea__inner {
-  border-radius: 8px;
-  border: 1px solid #e8edf2;
-  transition: all 0.3s ease;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
-}
-
-.el-input__inner:focus, .el-textarea__inner:focus {
-  border-color: #3a7bd5;
-  box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.2);
-}
-
-/* 卡片视图布局 - 统一样式并修复间距问题 */
-.card-view {
-  margin: 20px 0;
-}
-
-.el-row {
-  margin-left: -8px !important;
-  margin-right: -8px !important;
-}
-
-.card-col {
-  padding: 8px !important;
-  height: auto;
-}
-
-.variable-card {
-  height: 225px;
-  border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
-  transition: all 0.3s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-.variable-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 15px 25px rgba(0,0,0,0.12);
-}
-
-.variable-card .el-card__header {
-  background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0.9));
-  border-bottom: 1px solid #f0f3f7;
-  padding: 12px 15px;
-  height: 50px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
-
-.variable-card .el-card__body {
-  padding: 15px;
-  height: calc(100% - 50px);
-  display: flex;
-  flex-direction: column;
-}
-
-.card-header {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-header-left {
-  display: flex;
-  align-items: center;
-  width: 75%;
-  gap: 8px;
-}
-
-.card-title {
-  font-weight: 600;
-  font-size: 15px;
-  color: #303133;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-checkbox {
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.card-content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.card-item {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  flex-grow: 1;
-  overflow: hidden;
-}
-
-.card-label {
-  font-size: 13px;
-  color: #8492a6;
-  font-weight: 500;
-}
-
-.card-value {
-  font-size: 14px;
-  color: #505A6D;
-  word-break: break-all;
-  line-height: 1.5;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.card-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 10px;
-  border-top: 1px solid #f0f3f7;
-  margin-top: auto;
-}
-
-/* 标签样式优化 */
-.el-tag {
-  border-radius: 6px;
-  padding: 0 8px;
-  font-weight: 500;
-  border: none;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-  white-space: nowrap;
-}
-
-.el-tag--success {
-  background: linear-gradient(120deg, #84fab0, #8fd3f4);
-  color: #1f4037;
-}
-
-.el-tag--primary {
-  background: linear-gradient(120deg, #6a85b6, #bac8e0);
-  color: #2c3e50;
-}
-
-.el-tag--info {
-  background: linear-gradient(120deg, #e0c3fc, #8ec5fc);
-  color: #4a00e0;
-}
-
-/* 分页和动画 */
-.el-pagination {
-  margin-top: 20px;
-  justify-content: center;
-  padding: 15px 0;
-  background: rgba(255,255,255,0.8);
-  border-radius: 10px;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* 对话框基本样式 */
-.el-dialog {
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
-  backdrop-filter: blur(10px);
-}
-
-.el-dialog__header {
-  background: linear-gradient(to right, #3a7bd5, #00d2ff);
-  padding: 20px;
-}
-
-.el-dialog__title {
-  color: white;
-  font-weight: 600;
-  font-size: 18px;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
-}
-
-.el-dialog__body {
-  padding: 30px 25px;
-}
-
-.el-dialog__footer {
-  border-top: 1px solid #f0f3f7;
-  padding: 15px 25px;
-}
-
-/* 适配不同屏幕大小 */
-@media screen and (max-width: 768px) {
-  .variable-card {
-    height: 245px;
-  }
-  .built-in-variables-grid {
-    grid-template-columns: 1fr;
-  }
-  .variable-dialog {
-    width: 95% !important;
-  }
-}
-
-@media screen and (max-width: 576px) {
-  .card-actions {
-    flex-direction: column;
-    gap: 8px;
-    align-items: stretch;
-  }
-  .card-actions .el-button {
-    margin-left: 0 !important;
-  }
-}
-
-/* 卡片内容样式优化 */
-.content-display {
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 10px 12px;
-  position: relative;
-  min-height: 45px;
-  display: flex;
-  align-items: flex-start;
-  transition: all 0.3s ease;
-}
-
-.content-display:hover {
-  background: #f0f2f5;
-}
-
-.content-built-in {
-  background: rgba(58, 123, 213, 0.08);
-  padding-left: 35px;
-}
-
-.built-in-icon {
-  position: absolute;
-  left: 10px;
-  top: 12px;
-  color: #3a7bd5;
-  font-size: 16px;
-}
-
-.variable-card-built-in .el-card__header {
-  background: linear-gradient(to right, rgba(235, 244, 255, 0.8), rgba(235, 244, 255, 0.9));
-}
-</style>
\ No newline at end of file
+</script>    
\ No newline at end of file
-- 
Gitee