From 6fb1f781d4e13a930aecacb2f09bd82a641dd485 Mon Sep 17 00:00:00 2001
From: wzclm <2855471171@qq.com>
Date: Sat, 8 Mar 2025 18:11:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=BE=AE=E4=BF=A1=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=A8=A1=E5=9D=97=E5=92=8C=E7=94=A8=E6=88=B7=E8=B5=84?=
 =?UTF-8?q?=E6=96=99=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 集成微信管理路由与配置、模板和日志页面
- 新增个人信息用户资料路由
- 更新了 AdminLayout，添加了新的微信相关图标和菜单映射
- 删除了默认style.css内容
---
 src/api/system/profile.js            |   1 +
 src/api/wechat/index.js              | 114 ++++++++
 src/layout/AdminLayout.vue           |   9 +-
 src/router/index.js                  |  33 +++
 src/style.css                        |  79 ------
 src/views/system/profile/index.vue   | 364 ++++++++++++++++++++++++++
 src/views/wechat/config/index.vue    | 367 ++++++++++++++++++++++++++
 src/views/wechat/logs/index.vue      | 262 +++++++++++++++++++
 src/views/wechat/templates/index.vue | 377 +++++++++++++++++++++++++++
 9 files changed, 1524 insertions(+), 82 deletions(-)
 create mode 100644 src/api/system/profile.js
 create mode 100644 src/api/wechat/index.js
 create mode 100644 src/views/system/profile/index.vue
 create mode 100644 src/views/wechat/config/index.vue
 create mode 100644 src/views/wechat/logs/index.vue
 create mode 100644 src/views/wechat/templates/index.vue

diff --git a/src/api/system/profile.js b/src/api/system/profile.js
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/src/api/system/profile.js
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/api/wechat/index.js b/src/api/wechat/index.js
new file mode 100644
index 0000000..26b76ea
--- /dev/null
+++ b/src/api/wechat/index.js
@@ -0,0 +1,114 @@
+import request from '@/utils/request'
+
+/**
+ * 获取微信公众号配置
+ * @returns {Promise} 返回配置信息
+ */
+export function getWechatConfig() {
+  return request.get('/api/admin/wechat/config')
+}
+
+/**
+ * 更新微信公众号配置
+ * @param {Object} data - 配置数据
+ * @param {string} data.app_id - 公众号AppID
+ * @param {string} data.app_secret - 公众号AppSecret
+ * @param {string} data.token - 公众号Token
+ * @param {string} data.encoding_aes_key - 消息加密密钥
+ * @param {number} data.status - 状态：0-禁用 1-启用
+ * @returns {Promise} 返回更新结果
+ */
+export function updateWechatConfig(data) {
+  return request.put('/api/admin/wechat/config', data)
+}
+
+/**
+ * 创建消息模板
+ * @param {Object} data - 模板数据
+ * @param {string} data.template_id - 模板ID
+ * @param {string} data.title - 模板标题
+ * @param {string} data.content - 模板内容
+ * @param {string} data.example - 模板示例
+ * @param {string} data.type - 模板类型：activity-活动通知 system-系统通知
+ * @param {number} data.status - 状态：0-禁用 1-启用
+ * @returns {Promise} 返回创建结果
+ */
+export function createTemplate(data) {
+  return request.post('/api/admin/wechat/templates', data)
+}
+
+/**
+ * 获取模板列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.page_size=10] - 每页数量
+ * @param {string} [params.type] - 模板类型
+ * @param {number} [params.status] - 状态
+ * @returns {Promise} 返回模板列表数据
+ */
+export function getTemplateList(params = {}) {
+  return request.get('/api/admin/wechat/templates', {
+    params: {
+      page: params.page || 1,
+      page_size: params.page_size || 10,
+      type: params.type,
+      status: params.status
+    }
+  })
+}
+
+/**
+ * 获取模板详情
+ * @param {string|number} id - 模板ID
+ * @returns {Promise} 返回模板详情
+ */
+export function getTemplateDetail(id) {
+  return request.get(`/api/admin/wechat/templates/${id}`)
+}
+
+/**
+ * 更新模板
+ * @param {string|number} id - 模板ID
+ * @param {Object} data - 更新数据
+ * @returns {Promise} 返回更新结果
+ */
+export function updateTemplate(id, data) {
+  return request.put(`/api/admin/wechat/templates/${id}`, data)
+}
+
+/**
+ * 删除模板
+ * @param {string|number} id - 模板ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteTemplate(id) {
+  return request.delete(`/api/admin/wechat/templates/${id}`)
+}
+
+/**
+ * 获取消息发送记录
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.page_size=10] - 每页数量
+ * @param {number} [params.status] - 发送状态：0-失败 1-成功
+ * @param {string} [params.start_date] - 开始日期
+ * @param {string} [params.end_date] - 结束日期
+ * @returns {Promise} 返回消息发送记录列表
+ */
+export function getMessageLogs(params = {}) {
+  // 移除所有 undefined 和空字符串的参数
+  const validParams = {}
+  Object.keys(params).forEach(key => {
+    if (params[key] !== undefined && params[key] !== '') {
+      validParams[key] = params[key]
+    }
+  })
+
+  return request.get('/api/admin/wechat/message-logs', {
+    params: {
+      page: 1,
+      page_size: 10,
+      ...validParams
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index 88d7c54..d1dde02 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -21,7 +21,8 @@ import {
   VideoCamera,
   ChatLineRound,
   InfoFilled,
-  Grid
+  Grid,
+  ChatDotRound
 } from "@element-plus/icons-vue";
 import logo from '../assets/images/logo.png';
 
@@ -49,7 +50,8 @@ const icons = {
   VideoCamera: markRaw(VideoCamera),
   ChatLineRound: markRaw(ChatLineRound),
   InfoFilled: markRaw(InfoFilled),
-  Grid: markRaw(Grid)
+  Grid: markRaw(Grid),
+  ChatDotRound: markRaw(ChatDotRound)
 };
 
 // 图标映射关系
@@ -64,7 +66,8 @@ const iconMapping = {
   'activity': 'Collection',
   'course': 'DataLine',
   'feedback': 'ChatLineRound',
-  'about': 'InfoFilled'
+  'about': 'InfoFilled',
+  'wechat': 'ChatDotRound'
 };
 
 // 获取路由菜单
diff --git a/src/router/index.js b/src/router/index.js
index eb047b8..1b3728e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,39 @@ const router = createRouter({
           component: () => import('../views/dashboard/index.vue'),
           meta: { title: '控制台', icon: 'HomeFilled' }
         },
+        {
+          path: 'system/profile',
+          name: 'UserProfile',
+          component: () => import('../views/system/profile/index.vue'),
+          meta: { title: '个人信息', hideInMenu: true }
+        },
+        // 微信管理
+        {
+          path: 'wechat',
+          name: 'Wechat',
+          meta: { title: '消息推送管理', icon: 'ChatDotRound' },
+          redirect: '/wechat/config',
+          children: [
+            {
+              path: 'config',
+              name: 'WechatConfig',
+              component: () => import('../views/wechat/config/index.vue'),
+              meta: { title: '公众号配置' }
+            },
+            {
+              path: 'templates',
+              name: 'WechatTemplates',
+              component: () => import('../views/wechat/templates/index.vue'),
+              meta: { title: '消息模板' }
+            },
+            {
+              path: 'logs',
+              name: 'WechatLogs',
+              component: () => import('../views/wechat/logs/index.vue'),
+              meta: { title: '发送记录' }
+            }
+          ]
+        },
         // 系统管理
         {
           path: 'system',
diff --git a/src/style.css b/src/style.css
index bb131d6..e69de29 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/views/system/profile/index.vue b/src/views/system/profile/index.vue
new file mode 100644
index 0000000..22275d2
--- /dev/null
+++ b/src/views/system/profile/index.vue
@@ -0,0 +1,364 @@
+<script setup>
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { User, Lock, Message, Phone } from '@element-plus/icons-vue'
+
+// 用户信息
+const userInfo = reactive({
+  username: 'admin',
+  nickname: '管理员',
+  email: 'admin@example.com',
+  phone: '13800138000',
+  avatar: '',
+  role: '超级管理员',
+  createTime: '2023-01-01',
+  lastLoginTime: '2024-03-20 10:00:00',
+  lastLoginIp: '192.168.1.100'
+})
+
+// 修改密码表单
+const passwordForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+// 修改密码表单规则
+const passwordRules = {
+  oldPassword: [
+    { required: true, message: '请输入原密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认新密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== passwordForm.newPassword) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+}
+
+// 修改个人信息表单
+const profileForm = reactive({
+  nickname: userInfo.nickname,
+  email: userInfo.email,
+  phone: userInfo.phone
+})
+
+// 个人信息表单规则
+const profileRules = {
+  nickname: [
+    { required: true, message: '请输入昵称', trigger: 'blur' },
+    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+  ],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+  ]
+}
+
+// 表单引用
+const passwordFormRef = ref()
+const profileFormRef = ref()
+
+// 处理修改密码
+const handleChangePassword = async () => {
+  if (!passwordFormRef.value) return
+
+  await passwordFormRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success('密码修改成功（这是模拟消息）')
+      // 重置表单
+      passwordForm.oldPassword = ''
+      passwordForm.newPassword = ''
+      passwordForm.confirmPassword = ''
+    }
+  })
+}
+
+// 处理更新个人信息
+const handleUpdateProfile = async () => {
+  if (!profileFormRef.value) return
+
+  await profileFormRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success('个人信息更新成功（这是模拟消息）')
+      // 更新用户信息
+      userInfo.nickname = profileForm.nickname
+      userInfo.email = profileForm.email
+      userInfo.phone = profileForm.phone
+    }
+  })
+}
+
+// 处理头像上传
+const handleAvatarSuccess = (response) => {
+  userInfo.avatar = response.url
+  ElMessage.success('头像上传成功（这是模拟消息）')
+}
+
+// 上传之前的处理
+const beforeAvatarUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isJPG) {
+    ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传头像图片大小不能超过 2MB!')
+  }
+  return isJPG && isLt2M
+}
+</script>
+
+<template>
+  <div class="profile-container">
+    <!-- 基本信息卡片 -->
+    <el-card class="profile-card">
+      <template #header>
+        <div class="card-header">
+          <span>基本信息</span>
+        </div>
+      </template>
+
+      <div class="profile-content">
+        <!-- 左侧头像区域 -->
+        <div class="avatar-container">
+          <el-upload
+            class="avatar-uploader"
+            action="#"
+            :show-file-list="false"
+            :before-upload="beforeAvatarUpload"
+            :on-success="handleAvatarSuccess"
+          >
+            <img
+              v-if="userInfo.avatar"
+              :src="userInfo.avatar"
+              class="avatar"
+            />
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+          <div class="upload-tip">点击上传头像</div>
+        </div>
+
+        <!-- 右侧信息区域 -->
+        <div class="info-container">
+          <el-form
+            ref="profileFormRef"
+            :model="profileForm"
+            :rules="profileRules"
+            label-width="100px"
+          >
+            <el-form-item label="用户名">
+              <el-input v-model="userInfo.username" disabled />
+            </el-form-item>
+            <el-form-item label="昵称" prop="nickname">
+              <el-input v-model="profileForm.nickname" />
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="profileForm.email">
+                <template #prefix>
+                  <el-icon><Message /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model="profileForm.phone">
+                <template #prefix>
+                  <el-icon><Phone /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="角色">
+              <el-input v-model="userInfo.role" disabled />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleUpdateProfile">保存修改</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 安全设置卡片 -->
+    <el-card class="profile-card">
+      <template #header>
+        <div class="card-header">
+          <span>安全设置</span>
+        </div>
+      </template>
+
+      <el-form
+        ref="passwordFormRef"
+        :model="passwordForm"
+        :rules="passwordRules"
+        label-width="100px"
+      >
+        <el-form-item label="原密码" prop="oldPassword">
+          <el-input
+            v-model="passwordForm.oldPassword"
+            type="password"
+            show-password
+            placeholder="请输入原密码"
+          >
+            <template #prefix>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input
+            v-model="passwordForm.newPassword"
+            type="password"
+            show-password
+            placeholder="请输入新密码"
+          >
+            <template #prefix>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="passwordForm.confirmPassword"
+            type="password"
+            show-password
+            placeholder="请确认新密码"
+          >
+            <template #prefix>
+              <el-icon><Lock /></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 登录信息 -->
+      <div class="login-info">
+        <div class="info-item">
+          <span class="label">上次登录时间：</span>
+          <span class="value">{{ userInfo.lastLoginTime }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">上次登录IP：</span>
+          <span class="value">{{ userInfo.lastLoginIp }}</span>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.profile-container {
+  padding: 20px;
+
+  .profile-card {
+    margin-bottom: 20px;
+
+    .card-header {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+
+    .profile-content {
+      display: flex;
+      gap: 40px;
+
+      .avatar-container {
+        text-align: center;
+
+        .avatar-uploader {
+          border: 1px dashed #d9d9d9;
+          border-radius: 6px;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          width: 178px;
+          height: 178px;
+
+          &:hover {
+            border-color: #409EFF;
+          }
+
+          .avatar {
+            width: 178px;
+            height: 178px;
+            display: block;
+          }
+
+          .avatar-uploader-icon {
+            font-size: 28px;
+            color: #8c939d;
+            width: 178px;
+            height: 178px;
+            text-align: center;
+            line-height: 178px;
+          }
+        }
+
+        .upload-tip {
+          font-size: 12px;
+          color: #666;
+          margin-top: 8px;
+        }
+      }
+
+      .info-container {
+        flex: 1;
+        max-width: 500px;
+      }
+    }
+  }
+
+  .login-info {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+
+    .info-item {
+      margin-bottom: 10px;
+      font-size: 14px;
+
+      .label {
+        color: #606266;
+        margin-right: 10px;
+      }
+
+      .value {
+        color: #333;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+:deep(.el-upload) {
+  width: 178px;
+  height: 178px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/wechat/config/index.vue b/src/views/wechat/config/index.vue
new file mode 100644
index 0000000..3332ef0
--- /dev/null
+++ b/src/views/wechat/config/index.vue
@@ -0,0 +1,367 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Setting, Key, Lock, Warning } from '@element-plus/icons-vue'
+import { getWechatConfig, updateWechatConfig } from '@/api/wechat'
+
+// 配置表单数据
+const formData = reactive({
+  app_id: '',
+  app_secret: '',
+  token: '',
+  encoding_aes_key: '',
+  status: 1
+})
+
+// 加载状态
+const loading = ref(false)
+
+// 获取配置信息
+const getConfig = async () => {
+  loading.value = true
+  try {
+    const res = await getWechatConfig()
+    if (res.success) {
+      const { app_id, app_secret, token, encoding_aes_key, status } = res.data
+      Object.assign(formData, {
+        app_id,
+        app_secret: app_secret || formData.app_secret,
+        token,
+        encoding_aes_key,
+        status: status ?? 1
+      })
+    } else {
+      ElMessage.error(res.message || '获取配置失败')
+    }
+  } catch (error) {
+    console.error('获取配置失败：', error)
+    ElMessage.error('获取配置失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 表单规则
+const rules = {
+  app_id: [
+    { required: true, message: '请输入AppID', trigger: 'blur' },
+    { min: 10, message: 'AppID长度不能小于10个字符', trigger: 'blur' }
+  ],
+  app_secret: [
+    { required: true, message: '请输入AppSecret', trigger: 'blur' },
+    { min: 10, message: 'AppSecret长度不能小于10个字符', trigger: 'blur' }
+  ],
+  token: [
+    { required: true, message: '请输入Token', trigger: 'blur' },
+    { min: 3, message: 'Token长度不能小于3个字符', trigger: 'blur' }
+  ],
+  encoding_aes_key: [
+    { min: 10, message: '加密密钥长度不能小于10个字符', trigger: 'blur' }
+  ]
+}
+
+// 表单引用
+const formRef = ref()
+
+// 保存配置
+const handleSave = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const res = await updateWechatConfig(formData)
+        if (res.success) {
+          ElMessage.success('保存成功')
+          getConfig() // 重新获取配置
+        } else {
+          ElMessage.error(res.message || '保存失败')
+        }
+      } catch (error) {
+        console.error('保存失败：', error)
+        ElMessage.error('保存失败')
+      }
+    }
+  })
+}
+
+// 页面加载时获取配置
+onMounted(() => {
+  getConfig()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <el-card class="box-card" v-loading="loading">
+      <template #header>
+        <div class="card-header">
+          <div class="header-title">
+            <el-icon class="icon"><Setting /></el-icon>
+            <span>公众号配置</span>
+          </div>
+          <div class="header-desc">配置微信公众号的基本信息，用于消息推送和用户交互</div>
+        </div>
+      </template>
+
+      <div class="main-content">
+        <el-form
+          ref="formRef"
+          :model="formData"
+          :rules="rules"
+          label-width="140px"
+          class="config-form"
+        >
+          <div class="form-section">
+            <div class="section-title">基本配置</div>
+            <el-form-item label="AppID" prop="app_id">
+              <el-input
+                v-model="formData.app_id"
+                placeholder="请输入公众号AppID"
+                clearable
+              >
+                <template #prefix>
+                  <el-icon><Key /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="AppSecret" prop="app_secret">
+              <el-input
+                v-model="formData.app_secret"
+                type="password"
+                placeholder="请输入公众号AppSecret"
+                show-password
+              >
+                <template #prefix>
+                  <el-icon><Lock /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="Token" prop="token">
+              <el-input
+                v-model="formData.token"
+                placeholder="请输入公众号Token"
+                clearable
+              >
+                <template #prefix>
+                  <el-icon><Key /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="消息加密密钥" prop="encoding_aes_key">
+              <el-input
+                v-model="formData.encoding_aes_key"
+                placeholder="请输入消息加密密钥（选填）"
+                clearable
+              >
+                <template #prefix>
+                  <el-icon><Lock /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="formData.status">
+                <el-radio :value="1">启用</el-radio>
+                <el-radio :value="0">禁用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="handleSave" class="save-button">
+                保存配置
+              </el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+
+        <!-- 配置说明 -->
+        <div class="config-tips">
+          <div class="tips-header">
+            <el-icon class="warning-icon"><Warning /></el-icon>
+            <span>配置说明</span>
+          </div>
+          <div class="tips-content">
+            <div class="tip-item">
+              <div class="tip-title">AppID 和 AppSecret</div>
+              <div class="tip-desc">可在微信公众平台 > 开发 > 基本配置中获取，是进行消息交互的重要凭证</div>
+            </div>
+            <div class="tip-item">
+              <div class="tip-title">Token</div>
+              <div class="tip-desc">用于验证消息的确来自微信服务器，建议使用16位以上的随机字符串</div>
+            </div>
+            <div class="tip-item">
+              <div class="tip-title">消息加密密钥</div>
+              <div class="tip-desc">用于加强消息安全性，可选填，建议在正式环境中启用</div>
+            </div>
+            <div class="tip-item">
+              <div class="tip-title">安全提示</div>
+              <div class="tip-desc">所有配置信息请妥善保管，不要泄露给他人，建议定期更新Token和加密密钥</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 120px);
+
+  .box-card {
+    max-width: 1000px;
+    margin: 0 auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+
+    :deep(.el-card__header) {
+      padding: 20px;
+      border-bottom: 1px solid #ebeef5;
+    }
+
+    .card-header {
+      .header-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+
+        .icon {
+          font-size: 24px;
+          color: #409EFF;
+        }
+
+        span {
+          font-size: 18px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+
+      .header-desc {
+        font-size: 14px;
+        color: #909399;
+      }
+    }
+
+    .main-content {
+      display: grid;
+      grid-template-columns: 3fr 2fr;
+      gap: 30px;
+      padding: 20px;
+
+      .config-form {
+        .form-section {
+          padding: 20px;
+          background: #fafafa;
+          border-radius: 8px;
+          border: 1px solid #ebeef5;
+
+          .section-title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #303133;
+            margin-bottom: 20px;
+            padding-left: 10px;
+            border-left: 4px solid #409EFF;
+          }
+        }
+
+        :deep(.el-form-item) {
+          margin-bottom: 22px;
+
+          .el-form-item__label {
+            font-weight: 500;
+          }
+
+          .el-input {
+            .el-input__wrapper {
+              box-shadow: 0 0 0 1px #dcdfe6 inset;
+
+              &:hover {
+                box-shadow: 0 0 0 1px #c0c4cc inset;
+              }
+
+              &.is-focus {
+                box-shadow: 0 0 0 1px #409EFF inset;
+              }
+            }
+
+            .el-input__prefix {
+              color: #909399;
+            }
+          }
+        }
+
+        .save-button {
+          width: 160px;
+          height: 40px;
+          font-size: 15px;
+          margin-top: 10px;
+
+          &:hover {
+            transform: translateY(-1px);
+          }
+        }
+      }
+
+      .config-tips {
+        background-color: #fff;
+        border-radius: 8px;
+        border: 1px solid #ebeef5;
+        height: fit-content;
+
+        .tips-header {
+          padding: 15px 20px;
+          border-bottom: 1px solid #ebeef5;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .warning-icon {
+            font-size: 18px;
+            color: #e6a23c;
+          }
+
+          span {
+            font-size: 16px;
+            font-weight: 500;
+            color: #303133;
+          }
+        }
+
+        .tips-content {
+          padding: 20px;
+
+          .tip-item {
+            margin-bottom: 20px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .tip-title {
+              font-size: 14px;
+              font-weight: 500;
+              color: #303133;
+              margin-bottom: 8px;
+            }
+
+            .tip-desc {
+              font-size: 13px;
+              color: #606266;
+              line-height: 1.6;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/wechat/logs/index.vue b/src/views/wechat/logs/index.vue
new file mode 100644
index 0000000..1b7cbc3
--- /dev/null
+++ b/src/views/wechat/logs/index.vue
@@ -0,0 +1,262 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Timer, Message } from '@element-plus/icons-vue'
+import { getMessageLogs } from '@/api/wechat'
+
+// 查询参数
+const queryParams = reactive({
+  page: 1,
+  page_size: 10,
+  status: undefined,
+  start_date: '',
+  end_date: ''
+})
+
+// 日期范围
+const dateRange = ref([])
+
+// 表格数据
+const loading = ref(false)
+const logsList = ref([])
+
+// 分页参数
+const pagination = reactive({
+  total: 0,
+  page: 1,
+  pageSize: 10
+})
+
+// 获取列表数据
+const getList = async () => {
+  loading.value = true
+  try {
+    // 构建请求参数，移除空值
+    const params = {
+      page: queryParams.page,
+      page_size: queryParams.page_size
+    }
+
+    // 只有当状态不是 undefined 时才添加
+    if (queryParams.status !== undefined) {
+      params.status = queryParams.status
+    }
+
+    // 只有当日期不为空时才添加
+    if (queryParams.start_date) {
+      params.start_date = queryParams.start_date
+    }
+    if (queryParams.end_date) {
+      params.end_date = queryParams.end_date
+    }
+
+    const res = await getMessageLogs(params)
+    if (res.success) {
+      logsList.value = res.data.list || []
+      if (res.data.pagination) {
+        pagination.total = res.data.pagination.total || 0
+        pagination.page = res.data.pagination.current || 1
+        pagination.pageSize = res.data.pagination.page_size || 10
+      }
+    } else {
+      ElMessage.error(res.message || '获取发送记录失败')
+    }
+  } catch (error) {
+    console.error('获取发送记录失败：', error)
+    ElMessage.error('获取发送记录失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重置查询
+const resetQuery = () => {
+  queryParams.status = undefined
+  queryParams.start_date = ''
+  queryParams.end_date = ''
+  queryParams.page = 1
+  dateRange.value = [] // 重置日期选择器
+  getList()
+}
+
+// 处理页码改变
+const handleCurrentChange = (val) => {
+  queryParams.page = val
+  getList()
+}
+
+// 处理每页条数改变
+const handleSizeChange = (val) => {
+  queryParams.page_size = val
+  queryParams.page = 1
+  getList()
+}
+
+// 格式化发送状态
+const formatStatus = (status) => {
+  const statusMap = {
+    0: { type: 'danger', text: '发送失败' },
+    1: { type: 'success', text: '发送成功' }
+  }
+  return statusMap[status] || { type: 'info', text: '未知状态' }
+}
+
+// 日期范围选择器快捷选项
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: '最近一周',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+        return [start, end]
+      }
+    },
+    {
+      text: '最近一个月',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+        return [start, end]
+      }
+    },
+    {
+      text: '最近三个月',
+      value: () => {
+        const end = new Date()
+        const start = new Date()
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+        return [start, end]
+      }
+    }
+  ]
+}
+
+// 处理日期范围变化
+const handleDateRangeChange = (dates) => {
+  if (dates) {
+    queryParams.start_date = dates[0]
+    queryParams.end_date = dates[1]
+  } else {
+    queryParams.start_date = ''
+    queryParams.end_date = ''
+  }
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <el-card class="search-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <el-form-item label="发送状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择发送状态"
+            clearable
+            style="width: 200px"
+          >
+            <el-option label="发送成功" :value="1" />
+            <el-option label="发送失败" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发送时间" prop="date_range">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="pickerOptions.shortcuts"
+            value-format="YYYY-MM-DD"
+            @change="handleDateRangeChange"
+            style="width: 360px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 表格区域 -->
+    <el-card class="table-container">
+      <el-table
+        v-loading="loading"
+        :data="logsList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="template_id" label="模板ID" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="template_title" label="模板标题" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="content" label="发送内容" min-width="300" show-overflow-tooltip />
+        <el-table-column prop="status" label="发送状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="formatStatus(row.status).type" size="small">
+              {{ formatStatus(row.status).text }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="error_message" label="错误信息" min-width="200" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span v-if="row.status === 0" class="error-message">{{ row.error_message }}</span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="发送时间" width="180" align="center" />
+        <el-table-column prop="sender_name" label="发送人" width="120" align="center" show-overflow-tooltip />
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          v-if="pagination.total > 10"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+
+  .search-container {
+    margin-bottom: 20px;
+  }
+
+  .table-container {
+    margin-bottom: 20px;
+
+    :deep(.el-card__header) {
+      padding: 12px 20px;
+    }
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .error-message {
+    color: #f56c6c;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/wechat/templates/index.vue b/src/views/wechat/templates/index.vue
new file mode 100644
index 0000000..360009a
--- /dev/null
+++ b/src/views/wechat/templates/index.vue
@@ -0,0 +1,377 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { getTemplateList, createTemplate, updateTemplate, deleteTemplate } from '@/api/wechat'
+
+// 查询参数
+const queryParams = reactive({
+  page: 1,
+  page_size: 10,
+  title: '',
+  type: undefined,
+  status: undefined
+})
+
+// 模板类型选项
+const templateTypes = [
+  { label: '活动通知', value: 'activity' },
+  { label: '系统通知', value: 'system' }
+]
+
+// 表格数据
+const loading = ref(false)
+const templateList = ref([])
+
+// 分页参数
+const pagination = reactive({
+  total: 0,
+  page: 1,
+  pageSize: 10
+})
+
+// 获取列表数据
+const getList = async () => {
+  loading.value = true
+  try {
+    const params = {
+      ...queryParams,
+      type: queryParams.type || undefined,
+      status: queryParams.status === '' ? undefined : queryParams.status
+    }
+
+    const res = await getTemplateList(params)
+    if (res.success) {
+      templateList.value = res.data.list || []
+      if (res.data.pagination) {
+        pagination.total = res.data.pagination.total || 0
+        pagination.page = res.data.pagination.current || 1
+        pagination.pageSize = res.data.pagination.page_size || 10
+      }
+    } else {
+      ElMessage.error(res.message || '获取模板列表失败')
+    }
+  } catch (error) {
+    console.error('获取模板列表失败：', error)
+    ElMessage.error('获取模板列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重置查询
+const resetQuery = () => {
+  queryParams.title = ''
+  queryParams.type = undefined
+  queryParams.status = undefined
+  queryParams.page = 1
+  getList()
+}
+
+// 弹窗控制
+const dialogVisible = ref(false)
+const dialogType = ref('add')
+const dialogTitle = computed(() => dialogType.value === 'add' ? '添加模板' : '编辑模板')
+
+// 表单数据
+const formRef = ref()
+const formData = ref({
+  template_id: '',
+  title: '',
+  content: '',
+  example: '',
+  type: '',
+  status: 1
+})
+
+// 表单校验规则
+const rules = {
+  template_id: [
+    { required: true, message: '请输入模板ID', trigger: 'blur' }
+  ],
+  title: [
+    { required: true, message: '请输入模板标题', trigger: 'blur' }
+  ],
+  content: [
+    { required: true, message: '请输入模板内容', trigger: 'blur' }
+  ],
+  type: [
+    { required: true, message: '请选择模板类型', trigger: 'change' }
+  ]
+}
+
+// 处理添加/编辑
+const handleAddOrEdit = (type, row) => {
+  dialogType.value = type
+  dialogVisible.value = true
+
+  if (type === 'edit' && row) {
+    formData.value = { ...row }
+  } else {
+    formData.value = {
+      template_id: '',
+      title: '',
+      content: '',
+      example: '',
+      type: '',
+      status: 1
+    }
+  }
+}
+
+// 处理删除
+const handleDelete = async (row) => {
+  try {
+    await ElMessageBox.confirm('确认删除该模板吗？', '提示', {
+      type: 'warning'
+    })
+    const res = await deleteTemplate(row.id)
+    if (res.success) {
+      ElMessage.success('删除成功')
+      getList()
+    } else {
+      ElMessage.error(res.message || '删除失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败：', error)
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+// 提交表单
+const submitForm = async () => {
+  if (!formRef.value) return
+
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const api = dialogType.value === 'add' ? createTemplate : updateTemplate
+        const res = await api(
+          dialogType.value === 'add' ? formData.value : formData.value.id,
+          formData.value
+        )
+
+        if (res.success) {
+          ElMessage.success(dialogType.value === 'add' ? '添加成功' : '修改成功')
+          dialogVisible.value = false
+          getList()
+        } else {
+          ElMessage.error(res.message || '操作失败')
+        }
+      } catch (error) {
+        console.error('提交失败：', error)
+        ElMessage.error('提交失败')
+      }
+    }
+  })
+}
+
+// 处理页码改变
+const handleCurrentChange = (val) => {
+  queryParams.page = val
+  getList()
+}
+
+// 处理每页条数改变
+const handleSizeChange = (val) => {
+  queryParams.page_size = val
+  queryParams.page = 1
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <el-card class="search-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <el-form-item label="模板标题" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="请输入模板标题"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="模板类型" prop="type">
+          <el-select
+            v-model="queryParams.type"
+            placeholder="请选择模板类型"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in templateTypes"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择状态"
+            clearable
+            style="width: 200px"
+          >
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 操作按钮区域 -->
+    <el-card class="table-container">
+      <template #header>
+        <el-button type="primary" :icon="Plus" @click="handleAddOrEdit('add')">新增模板</el-button>
+      </template>
+
+      <!-- 表格区域 -->
+      <el-table
+        v-loading="loading"
+        :data="templateList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="template_id" label="模板ID" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="title" label="模板标题" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="content" label="模板内容" min-width="250" show-overflow-tooltip />
+        <el-table-column prop="example" label="模板示例" min-width="250" show-overflow-tooltip />
+        <el-table-column prop="type" label="模板类型" width="120" align="center">
+          <template #default="{ row }">
+            {{ templateTypes.find(item => item.value === row.type)?.label || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'info'">
+              {{ row.status === 1 ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" link :icon="Edit" @click="handleAddOrEdit('edit', row)">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 添加/编辑弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="700px"
+      append-to-body
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="模板ID" prop="template_id">
+          <el-input v-model="formData.template_id" placeholder="请输入模板ID" />
+        </el-form-item>
+        <el-form-item label="模板标题" prop="title">
+          <el-input v-model="formData.title" placeholder="请输入模板标题" />
+        </el-form-item>
+        <el-form-item label="模板内容" prop="content">
+          <el-input
+            v-model="formData.content"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入模板内容"
+          />
+        </el-form-item>
+        <el-form-item label="模板示例" prop="example">
+          <el-input
+            v-model="formData.example"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入模板示例"
+          />
+        </el-form-item>
+        <el-form-item label="模板类型" prop="type">
+          <el-select v-model="formData.type" placeholder="请选择模板类型" style="width: 100%">
+            <el-option
+              v-for="item in templateTypes"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :value="1">启用</el-radio>
+            <el-radio :value="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+
+  .search-container {
+    margin-bottom: 20px;
+  }
+
+  .table-container {
+    margin-bottom: 20px;
+
+    :deep(.el-card__header) {
+      padding: 12px 20px;
+    }
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .dialog-footer {
+    text-align: right;
+    padding-top: 20px;
+  }
+}
+</style>
\ No newline at end of file