From 49af83b97ab2388107df52ecc266b2e2fc7819da Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Tue, 10 Jun 2025 11:32:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E5=AE=9A=E6=97=B6=E6=8E=A8=E9=80=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/dashboard/templates/base.html           |   18 +-
 .../templates/message_push_management.html    | 1137 +++++++++++------
 2 files changed, 737 insertions(+), 418 deletions(-)

diff --git a/admin/dashboard/templates/base.html b/admin/dashboard/templates/base.html
index f8a43cb..6001681 100644
--- a/admin/dashboard/templates/base.html
+++ b/admin/dashboard/templates/base.html
@@ -160,11 +160,6 @@
                         <i class="el-icon-chat-line-square"></i>
                         <span slot="title">消息列表</span>
                     </el-menu-item>
-                    <!-- 运行日志 -->
-                    <el-menu-item index="9">
-                        <i class="el-icon-document"></i>
-                        <span slot="title">运行日志</span>
-                    </el-menu-item>
                     <!-- 在导航菜单中添加通讯录管理入口 -->
                     <el-menu-item index="10">
                         <i class="el-icon-notebook-1"></i>
@@ -180,6 +175,11 @@
                         <i class="el-icon-connection"></i>
                         <span slot="title">虚拟群组</span>
                     </el-menu-item>
+                    <!-- 添加定时推送菜单项 -->
+                    <el-menu-item index="16">
+                        <i class="el-icon-time"></i>
+                        <span slot="title">定时推送</span>
+                    </el-menu-item>
                     <!-- 添加接口文档菜单项 -->
                     <el-menu-item index="13">
                         <i class="el-icon-document"></i>
@@ -196,6 +196,11 @@
                         <span slot="title">文件浏览</span>
                     </el-menu-item>
 
+                    <!-- 运行日志 -->
+                    <el-menu-item index="9">
+                        <i class="el-icon-document"></i>
+                        <span slot="title">运行日志</span>
+                    </el-menu-item>
                     <el-menu-item index="5">
                         <i class="el-icon-warning"></i>
                         <span slot="title">错误日志</span>
@@ -268,7 +273,8 @@
                         '12': '/virtual_group',
                         '13': '/api_docs',
                         '14': '/system_status',
-                        '15': '/file_browser'
+                        '15': '/file_browser',
+                        '16': '/message_push'  // 添加定时推送路由
                     };
 
                     const currentPath = window.location.pathname;
diff --git a/admin/dashboard/templates/message_push_management.html b/admin/dashboard/templates/message_push_management.html
index 546623e..edc6f4e 100644
--- a/admin/dashboard/templates/message_push_management.html
+++ b/admin/dashboard/templates/message_push_management.html
@@ -1,439 +1,752 @@
 {% extends "base.html" %}
 
-{% block title %}消息推送管理{% endblock %}
+{% block title %}消息推送管理 - 机器人管理后台{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <div class="row">
-        <div class="col-12">
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">消息推送管理</h3>
-                    <div class="card-tools">
-                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createTaskModal">
-                            <i class="fas fa-plus"></i> 新建任务
-                        </button>
-                    </div>
+<div>
+    <el-row {% raw %}:gutter="20" {% endraw %}>
+        <el-col {% raw %}:span="24" {% endraw %}>
+            <el-card shadow="hover">
+                <div slot="header" class="clearfix">
+                    <span>消息推送管理</span>
+                    <el-button
+                        type="primary"
+                        size="small"
+                        style="float: right; margin-left: 10px;"
+                        {% raw %}@click="refreshTasks" {% endraw %}>
+                        刷新数据
+                    </el-button>
+                    <el-button
+                        type="success"
+                        size="small"
+                        style="float: right;"
+                        {% raw %}@click="showCreateTaskDialog" {% endraw %}>
+                        新建任务
+                    </el-button>
                 </div>
-                <div class="card-body">
-                    <!-- 搜索栏 -->
-                    <div class="row mb-3">
-                        <div class="col-md-3">
-                            <select class="form-control" id="statusFilter">
-                                <option value="">全部状态</option>
-                                <option value="draft">草稿</option>
-                                <option value="scheduled">已排期</option>
-                                <option value="paused">已暂停</option>
-                                <option value="completed">已完成</option>
-                            </select>
-                        </div>
-                        <div class="col-md-3">
-                            <input type="date" class="form-control" id="startTimeFilter" placeholder="开始时间">
-                        </div>
-                        <div class="col-md-3">
-                            <input type="date" class="form-control" id="endTimeFilter" placeholder="结束时间">
-                        </div>
-                        <div class="col-md-3">
-                            <button type="button" class="btn btn-info" id="searchBtn">
-                                <i class="fas fa-search"></i> 搜索
-                            </button>
-                            <button type="button" class="btn btn-secondary" id="resetBtn">
-                                <i class="fas fa-redo"></i> 重置
-                            </button>
-                        </div>
-                    </div>
 
-                    <!-- 任务列表 -->
-                    <table class="table table-bordered table-hover">
-                        <thead>
-                            <tr>
-                                <th>任务ID</th>
-                                <th>任务名称</th>
-                                <th>状态</th>
-                                <th>计划时间</th>
-                                <th>创建时间</th>
-                                <th>操作</th>
-                            </tr>
-                        </thead>
-                        <tbody id="taskList">
-                            <!-- 任务列表将通过JavaScript动态加载 -->
-                        </tbody>
-                    </table>
+                <!-- 统计卡片 -->
+                <el-row {% raw %}:gutter="20" {% endraw %} style="margin-bottom: 20px;">
+                    <el-col {% raw %}:span="4" {% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">总任务数</div>
+                            <div class="stat-value">{% raw %}{{ statistics.total }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="4" {% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">已排期</div>
+                            <div class="stat-value">{% raw %}{{ statistics.scheduled }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="4" {% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">已暂停</div>
+                            <div class="stat-value">{% raw %}{{ statistics.paused }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="4" {% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">已完成</div>
+                            <div class="stat-value">{% raw %}{{ statistics.completed }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="4" {% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">失败</div>
+                            <div class="stat-value">{% raw %}{{ statistics.failed }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                    <el-col {% raw %}:span="4" {% endraw %}>
+                        <el-card shadow="hover" class="stat-card">
+                            <div class="stat-title">今日任务</div>
+                            <div class="stat-value">{% raw %}{{ statistics.today }}{% endraw %}</div>
+                        </el-card>
+                    </el-col>
+                </el-row>
 
-                    <!-- 分页 -->
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="dataTables_info" id="taskInfo" role="status" aria-live="polite">
-                                显示 0 到 0 条，共 0 条记录
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="dataTables_paginate paging_simple_numbers" id="taskPagination">
-                                <!-- 分页将通过JavaScript动态加载 -->
-                            </div>
-                        </div>
-                    </div>
+                <!-- 搜索栏 -->
+                <el-form {% raw %}:inline="true" :model="searchForm" {% endraw %} class="search-form">
+                    <el-form-item label="状态">
+                        <el-select {% raw %}v-model="searchForm.status" {% endraw %} placeholder="全部状态" clearable>
+                            <el-option label="草稿" value="draft"></el-option>
+                            <el-option label="已排期" value="scheduled"></el-option>
+                            <el-option label="已暂停" value="paused"></el-option>
+                            <el-option label="已完成" value="completed"></el-option>
+                            <el-option label="失败" value="failed"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="时间范围">
+                        <el-date-picker
+                            {% raw %}v-model="searchForm.timeRange" {% endraw %}
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            value-format="yyyy-MM-dd">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" {% raw %}@click="searchTasks" {% endraw %}>搜索</el-button>
+                        <el-button {% raw %}@click="resetSearch" {% endraw %}>重置</el-button>
+                    </el-form-item>
+                </el-form>
+
+                <!-- 批量操作工具栏 -->
+                <div class="batch-toolbar" {% raw %}v-if="selectedTasks.length > 0" {% endraw %}>
+                    <el-button-group>
+                        <el-button size="small" type="primary" {% raw %}@click="batchPause" {% endraw %}>批量暂停</el-button>
+                        <el-button size="small" type="success" {% raw %}@click="batchResume" {% endraw %}>批量恢复</el-button>
+                        <el-button size="small" type="danger" {% raw %}@click="batchDelete" {% endraw %}>批量删除</el-button>
+                    </el-button-group>
+                    <span class="selected-count">已选择 {% raw %}{{ selectedTasks.length }}{% endraw %} 项</span>
                 </div>
-            </div>
-        </div>
-    </div>
-</div>
 
-<!-- 新建任务模态框 -->
-<div class="modal fade" id="createTaskModal" tabindex="-1" role="dialog" aria-labelledby="createTaskModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="createTaskModalLabel">新建任务</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <form id="createTaskForm">
-                    <div class="form-group">
-                        <label for="taskName">任务名称</label>
-                        <input type="text" class="form-control" id="taskName" name="task_name" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="scheduleTime">计划时间</label>
-                        <input type="datetime-local" class="form-control" id="scheduleTime" name="schedule_time" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="groups">目标群组</label>
-                        <select class="form-control" id="groups" name="groups" multiple required>
-                            <!-- 群组列表将通过JavaScript动态加载 -->
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label for="contentText">文本内容</label>
-                        <textarea class="form-control" id="contentText" name="content_text" rows="3"></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="contentImage">图片内容</label>
-                        <input type="file" class="form-control-file" id="contentImage" name="content_image">
-                    </div>
-                    <div class="form-group">
-                        <label for="contentLink">链接内容</label>
-                        <input type="url" class="form-control" id="contentLink" name="content_link">
-                    </div>
-                    <div class="form-group">
-                        <label for="contentMiniprogram">小程序内容</label>
-                        <div class="row">
-                            <div class="col-md-6">
-                                <input type="text" class="form-control" id="miniprogramTitle" name="miniprogram_title" placeholder="标题">
-                            </div>
-                            <div class="col-md-6">
-                                <input type="text" class="form-control" id="miniprogramPath" name="miniprogram_path" placeholder="路径">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="previewRecipients">预览接收人</label>
-                        <select class="form-control" id="previewRecipients" name="preview_recipients" multiple>
-                            <!-- 用户列表将通过JavaScript动态加载 -->
-                        </select>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
-                <button type="button" class="btn btn-primary" id="saveTaskBtn">保存</button>
-            </div>
-        </div>
-    </div>
-</div>
+                <!-- 任务列表 -->
+                <el-table
+                    {% raw %}:data="taskList" {% endraw %}
+                    style="width: 100%"
+                    border
+                    {% raw %}v-loading="loading"
+                    @selection-change="handleSelectionChange" {% endraw %}>
+                    <el-table-column type="selection" width="55"></el-table-column>
+                    <el-table-column type="index" width="50"></el-table-column>
+                    <el-table-column prop="task_id" label="任务ID" width="180"></el-table-column>
+                    <el-table-column prop="task_name" label="任务名称"></el-table-column>
+                    <el-table-column prop="status" label="状态" width="100">
+                        <template slot-scope="scope">
+                            <el-tag {% raw %}:type="getStatusType(scope.row.status)" {% endraw %}>
+                                {% raw %}{{ getStatusText(scope.row.status) }}{% endraw %}
+                            </el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="schedule_time" label="计划时间" width="180">
+                        <template slot-scope="scope">
+                            {% raw %}{{ formatDateTime(scope.row.schedule_time) }}{% endraw %}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="created_at" label="创建时间" width="180">
+                        <template slot-scope="scope">
+                            {% raw %}{{ formatDateTime(scope.row.created_at) }}{% endraw %}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="进度" width="200">
+                        <template slot-scope="scope">
+                            <el-progress 
+                                {% raw %}:percentage="scope.row.progress || 0"
+                                :status="getProgressStatus(scope.row.status)" {% endraw %}>
+                            </el-progress>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="300">
+                        <template slot-scope="scope">
+                            <el-button
+                                size="mini"
+                                type="primary"
+                                {% raw %}@click="previewTask(scope.row)" {% endraw %}>
+                                预览
+                            </el-button>
+                            <el-button
+                                size="mini"
+                                type="warning"
+                                {% raw %}@click="editTask(scope.row)" {% endraw %}>
+                                编辑
+                            </el-button>
+                            <el-button
+                                {% raw %}v-if="scope.row.status === 'scheduled'" {% endraw %}
+                                size="mini"
+                                type="info"
+                                {% raw %}@click="pauseTask(scope.row)" {% endraw %}>
+                                暂停
+                            </el-button>
+                            <el-button
+                                {% raw %}v-if="scope.row.status === 'paused'" {% endraw %}
+                                size="mini"
+                                type="success"
+                                {% raw %}@click="resumeTask(scope.row)" {% endraw %}>
+                                恢复
+                            </el-button>
+                            <el-button
+                                size="mini"
+                                type="danger"
+                                {% raw %}@click="deleteTask(scope.row)" {% endraw %}>
+                                删除
+                            </el-button>
+                            <el-button
+                                size="mini"
+                                type="text"
+                                {% raw %}@click="viewLogs(scope.row)" {% endraw %}>
+                                日志
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
 
-<!-- 任务日志模态框 -->
-<div class="modal fade" id="taskLogsModal" tabindex="-1" role="dialog" aria-labelledby="taskLogsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="taskLogsModalLabel">任务日志</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <table class="table table-bordered">
-                    <thead>
-                        <tr>
-                            <th>时间</th>
-                            <th>操作</th>
-                            <th>操作人</th>
-                            <th>变更内容</th>
-                        </tr>
-                    </thead>
-                    <tbody id="taskLogsList">
-                        <!-- 日志列表将通过JavaScript动态加载 -->
-                    </tbody>
-                </table>
-            </div>
+                <!-- 分页 -->
+                <div class="pagination-container">
+                    <el-pagination
+                        {% raw %}@size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page="currentPage"
+                        :page-sizes="[10, 20, 50, 100]"
+                        :page-size="pageSize"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="total" {% endraw %}>
+                    </el-pagination>
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+
+    <!-- 新建/编辑任务对话框 -->
+    <el-dialog {% raw %}:title="dialogTitle" :visible.sync="taskDialogVisible" {% endraw %} width="60%">
+        <el-form {% raw %}:model="taskForm" :rules="taskRules" ref="taskForm" {% endraw %} label-width="100px">
+            <el-form-item label="任务名称" prop="task_name">
+                <el-input {% raw %}v-model="taskForm.task_name" {% endraw %}></el-input>
+            </el-form-item>
+            <el-form-item label="计划时间" prop="schedule_time">
+                <el-date-picker
+                    {% raw %}v-model="taskForm.schedule_time" {% endraw %}
+                    type="datetime"
+                    placeholder="选择日期时间"
+                    value-format="yyyy-MM-dd HH:mm:ss">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="目标群组" prop="groups">
+                <el-select
+                    {% raw %}v-model="taskForm.groups" {% endraw %}
+                    multiple
+                    filterable
+                    placeholder="请选择群组">
+                    <el-option
+                        {% raw %}v-for="group in groupList"
+                        :key="group.wxid"
+                        :label="group.name"
+                        :value="group.wxid" {% endraw %}>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="消息内容">
+                <el-tabs {% raw %}v-model="activeContentTab" {% endraw %}>
+                    <el-tab-pane label="文本" name="text">
+                        <el-input
+                            type="textarea"
+                            {% raw %}v-model="taskForm.content_text" {% endraw %}
+                            :rows="4"
+                            placeholder="请输入文本内容">
+                        </el-input>
+                    </el-tab-pane>
+                    <el-tab-pane label="图片" name="image">
+                        <el-upload
+                            class="upload-demo"
+                            action="/message_push/api/upload"
+                            {% raw %}:on-success="handleImageSuccess"
+                            :before-upload="beforeImageUpload"
+                            :on-preview="handleImagePreview"
+                            :file-list="imageList" {% endraw %}>
+                            <el-button size="small" type="primary">点击上传</el-button>
+                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
+                        </el-upload>
+                        <el-dialog :visible.sync="previewVisible" append-to-body>
+                            <img width="100%" :src="previewUrl" alt="Preview">
+                        </el-dialog>
+                    </el-tab-pane>
+                    <el-tab-pane label="链接" name="link">
+                        <el-form-item label="链接地址">
+                            <el-input {% raw %}v-model="taskForm.content_link" {% endraw %}></el-input>
+                        </el-form-item>
+                    </el-tab-pane>
+                    <el-tab-pane label="小程序" name="miniprogram">
+                        <el-form-item label="标题">
+                            <el-input {% raw %}v-model="taskForm.content_miniprogram.title" {% endraw %}></el-input>
+                        </el-form-item>
+                        <el-form-item label="路径">
+                            <el-input {% raw %}v-model="taskForm.content_miniprogram.path" {% endraw %}></el-input>
+                        </el-form-item>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-form-item>
+            <el-form-item label="预览接收人">
+                <el-select
+                    {% raw %}v-model="taskForm.preview_recipients" {% endraw %}
+                    multiple
+                    filterable
+                    placeholder="请选择预览接收人">
+                    <el-option
+                        {% raw %}v-for="user in userList"
+                        :key="user.wxid"
+                        :label="user.name"
+                        :value="user.wxid" {% endraw %}>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button {% raw %}@click="taskDialogVisible = false" {% endraw %}>取 消</el-button>
+            <el-button type="primary" {% raw %}@click="saveTask" {% endraw %}>确 定</el-button>
         </div>
-    </div>
+    </el-dialog>
+
+    <!-- 任务日志对话框 -->
+    <el-dialog title="任务日志" {% raw %}:visible.sync="logsDialogVisible" {% endraw %} width="70%">
+        <el-table {% raw %}:data="taskLogs" {% endraw %} border style="width: 100%">
+            <el-table-column prop="timestamp" label="时间" width="180">
+                <template slot-scope="scope">
+                    {% raw %}{{ formatDateTime(scope.row.timestamp) }}{% endraw %}
+                </template>
+            </el-table-column>
+            <el-table-column prop="action" label="操作" width="120"></el-table-column>
+            <el-table-column prop="operator_id" label="操作人" width="120"></el-table-column>
+            <el-table-column prop="changes" label="变更内容">
+                <template slot-scope="scope">
+                    <pre>{% raw %}{{ JSON.stringify(scope.row.changes, null, 2) }}{% endraw %}</pre>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-dialog>
 </div>
 {% endblock %}
 
 {% block scripts %}
 <script>
-$(document).ready(function() {
-    // 全局变量
-    let currentPage = 1;
-    let pageSize = 20;
-    let totalPages = 0;
-    
-    // 加载任务列表
-    function loadTasks(page = 1) {
-        const status = $('#statusFilter').val();
-        const startTime = $('#startTimeFilter').val();
-        const endTime = $('#endTimeFilter').val();
-        
-        $.get('/message_push/api/tasks', {
-            page: page,
-            limit: pageSize,
-            status: status,
-            start_time: startTime,
-            end_time: endTime
-        }, function(response) {
-            if (response.success) {
-                const { tasks, total } = response.data;
-                totalPages = Math.ceil(total / pageSize);
-                
-                // 渲染任务列表
-                let html = '';
-                tasks.forEach(task => {
-                    html += `
-                        <tr>
-                            <td>${task.task_id}</td>
-                            <td>${task.task_name}</td>
-                            <td>${getStatusText(task.status)}</td>
-                            <td>${formatDateTime(task.schedule_time)}</td>
-                            <td>${formatDateTime(task.created_at)}</td>
-                            <td>
-                                <button class="btn btn-sm btn-info" onclick="previewTask('${task.task_id}')">
-                                    <i class="fas fa-eye"></i> 预览
-                                </button>
-                                <button class="btn btn-sm btn-warning" onclick="editTask('${task.task_id}')">
-                                    <i class="fas fa-edit"></i> 编辑
-                                </button>
-                                ${task.status === 'scheduled' ? `
-                                    <button class="btn btn-sm btn-secondary" onclick="pauseTask('${task.task_id}')">
-                                        <i class="fas fa-pause"></i> 暂停
-                                    </button>
-                                ` : task.status === 'paused' ? `
-                                    <button class="btn btn-sm btn-success" onclick="resumeTask('${task.task_id}')">
-                                        <i class="fas fa-play"></i> 恢复
-                                    </button>
-                                ` : ''}
-                                <button class="btn btn-sm btn-danger" onclick="deleteTask('${task.task_id}')">
-                                    <i class="fas fa-trash"></i> 删除
-                                </button>
-                                <button class="btn btn-sm btn-primary" onclick="viewLogs('${task.task_id}')">
-                                    <i class="fas fa-history"></i> 日志
-                                </button>
-                            </td>
-                        </tr>
-                    `;
-                });
-                $('#taskList').html(html);
-                
-                // 更新分页信息
-                updatePagination(page, total);
-            } else {
-                showError('加载任务列表失败：' + response.error);
-            }
-        });
-    }
-    
-    // 更新分页信息
-    function updatePagination(currentPage, total) {
-        // 更新信息文本
-        const start = (currentPage - 1) * pageSize + 1;
-        const end = Math.min(currentPage * pageSize, total);
-        $('#taskInfo').text(`显示 ${start} 到 ${end} 条，共 ${total} 条记录`);
-        
-        // 更新分页按钮
-        let html = '<ul class="pagination">';
-        
-        // 上一页
-        html += `
-            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
-                <a class="page-link" href="#" onclick="return loadTasks(${currentPage - 1})">上一页</a>
-            </li>
-        `;
-        
-        // 页码
-        for (let i = 1; i <= totalPages; i++) {
-            if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
-                html += `
-                    <li class="page-item ${i === currentPage ? 'active' : ''}">
-                        <a class="page-link" href="#" onclick="return loadTasks(${i})">${i}</a>
-                    </li>
-                `;
-            } else if (i === currentPage - 3 || i === currentPage + 3) {
-                html += '<li class="page-item disabled"><a class="page-link">...</a></li>';
-            }
+new Vue({
+    el: '#app',
+    mixins: [baseApp],
+    data() {
+        return {
+            currentView: '16', // 设置当前视图为消息推送管理
+            loading: false,
+            searchForm: {
+                status: '',
+                timeRange: []
+            },
+            taskList: [],
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            taskDialogVisible: false,
+            logsDialogVisible: false,
+            dialogTitle: '新建任务',
+            activeContentTab: 'text',
+            taskForm: {
+                task_name: '',
+                schedule_time: '',
+                groups: [],
+                content_text: '',
+                content_image: '',
+                content_link: '',
+                content_miniprogram: {
+                    title: '',
+                    path: ''
+                },
+                preview_recipients: []
+            },
+            taskRules: {
+                task_name: [
+                    { required: true, message: '请输入任务名称', trigger: 'blur' }
+                ],
+                schedule_time: [
+                    { required: true, message: '请选择计划时间', trigger: 'change' }
+                ],
+                groups: [
+                    { required: true, message: '请选择目标群组', trigger: 'change' }
+                ]
+            },
+            groupList: [],
+            userList: [],
+            taskLogs: [],
+            selectedTasks: [],
+            statistics: {
+                total: 0,
+                scheduled: 0,
+                paused: 0,
+                completed: 0,
+                failed: 0,
+                today: 0
+            },
+            imageList: [],
+            previewVisible: false,
+            previewUrl: ''
         }
-        
-        // 下一页
-        html += `
-            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
-                <a class="page-link" href="#" onclick="return loadTasks(${currentPage + 1})">下一页</a>
-            </li>
-        `;
-        
-        html += '</ul>';
-        $('#taskPagination').html(html);
-    }
-    
-    // 工具函数
-    function getStatusText(status) {
-        const statusMap = {
-            'draft': '草稿',
-            'scheduled': '已排期',
-            'paused': '已暂停',
-            'completed': '已完成'
-        };
-        return statusMap[status] || status;
-    }
-    
-    function formatDateTime(datetime) {
-        return new Date(datetime).toLocaleString();
-    }
-    
-    function showError(message) {
-        toastr.error(message);
-    }
-    
-    function showSuccess(message) {
-        toastr.success(message);
-    }
-    
-    // 事件处理
-    $('#searchBtn').click(function() {
-        loadTasks(1);
-    });
-    
-    $('#resetBtn').click(function() {
-        $('#statusFilter').val('');
-        $('#startTimeFilter').val('');
-        $('#endTimeFilter').val('');
-        loadTasks(1);
-    });
-    
-    $('#saveTaskBtn').click(function() {
-        const formData = new FormData($('#createTaskForm')[0]);
-        const data = {};
-        formData.forEach((value, key) => {
-            if (key === 'groups' || key === 'preview_recipients') {
-                data[key] = Array.from($(`#${key}`).val());
-            } else {
-                data[key] = value;
-            }
-        });
-        
-        // 处理小程序内容
-        data.content_miniprogram = {
-            title: $('#miniprogramTitle').val(),
-            path: $('#miniprogramPath').val()
-        };
-        
-        $.ajax({
-            url: '/message_push/api/tasks',
-            type: 'POST',
-            contentType: 'application/json',
-            data: JSON.stringify(data),
-            success: function(response) {
-                if (response.success) {
-                    showSuccess('创建任务成功');
-                    $('#createTaskModal').modal('hide');
-                    loadTasks(1);
-                } else {
-                    showError('创建任务失败：' + response.error);
+    },
+    mounted() {
+        this.loadTasks();
+        this.loadGroups();
+        this.loadUsers();
+        this.loadStatistics();
+    },
+    methods: {
+        // 加载任务列表
+        async loadTasks() {
+            this.loading = true;
+            try {
+                const params = {
+                    page: this.currentPage,
+                    limit: this.pageSize,
+                    status: this.searchForm.status,
+                    start_time: this.searchForm.timeRange[0],
+                    end_time: this.searchForm.timeRange[1]
+                };
+                const response = await axios.get('/message_push/api/tasks', { params });
+                if (response.data.success) {
+                    this.taskList = response.data.data.tasks;
+                    this.total = response.data.data.total;
                 }
+            } catch (error) {
+                this.$message.error('加载任务列表失败');
             }
-        });
-    });
-    
-    // 初始化
-    loadTasks(1);
-});
+            this.loading = false;
+        },
 
-// 任务操作函数
-function previewTask(taskId) {
-    $.post(`/message_push/api/tasks/${taskId}/preview`, function(response) {
-        if (response.success) {
-            showSuccess('预览已发送');
-        } else {
-            showError('发送预览失败：' + response.error);
-        }
-    });
-}
-
-function editTask(taskId) {
-    // TODO: 实现编辑任务功能
-}
-
-function pauseTask(taskId) {
-    $.post(`/message_push/api/tasks/${taskId}/pause`, function(response) {
-        if (response.success) {
-            showSuccess('任务已暂停');
-            loadTasks(currentPage);
-        } else {
-            showError('暂停任务失败：' + response.error);
-        }
-    });
-}
-
-function resumeTask(taskId) {
-    $.post(`/message_push/api/tasks/${taskId}/resume`, function(response) {
-        if (response.success) {
-            showSuccess('任务已恢复');
-            loadTasks(currentPage);
-        } else {
-            showError('恢复任务失败：' + response.error);
-        }
-    });
-}
-
-function deleteTask(taskId) {
-    if (confirm('确定要删除这个任务吗？')) {
-        $.ajax({
-            url: `/message_push/api/tasks/${taskId}`,
-            type: 'DELETE',
-            success: function(response) {
-                if (response.success) {
-                    showSuccess('任务已删除');
-                    loadTasks(currentPage);
-                } else {
-                    showError('删除任务失败：' + response.error);
+        // 加载统计数据
+        async loadStatistics() {
+            try {
+                const response = await axios.get('/message_push/api/statistics');
+                if (response.data.success) {
+                    this.statistics = response.data.data;
                 }
+            } catch (error) {
+                this.$message.error('加载统计数据失败');
             }
-        });
-    }
-}
+        },
 
-function viewLogs(taskId) {
-    $.get(`/message_push/api/tasks/${taskId}/logs`, function(response) {
-        if (response.success) {
-            const { logs } = response.data;
-            let html = '';
-            logs.forEach(log => {
-                html += `
-                    <tr>
-                        <td>${formatDateTime(log.timestamp)}</td>
-                        <td>${log.action}</td>
-                        <td>${log.operator_id}</td>
-                        <td>${JSON.stringify(log.changes)}</td>
-                    </tr>
-                `;
+        // 加载群组列表
+        async loadGroups() {
+            try {
+                const response = await axios.get('/contacts/api/groups');
+                if (response.data.success) {
+                    const groups = response.data.data.groups;
+                    this.groupList = Object.entries(groups).map(([wxid, name]) => ({
+                        wxid,
+                        name
+                    }));
+                }
+            } catch (error) {
+                this.$message.error('加载群组列表失败');
+            }
+        },
+
+        // 加载用户列表
+        async loadUsers() {
+            try {
+                const response = await axios.get('/contacts/api/personal');
+                if (response.data.success) {
+                    const users = response.data.data.personal;
+                    this.userList = Object.entries(users).map(([wxid, name]) => ({
+                        wxid,
+                        name
+                    }));
+                }
+            } catch (error) {
+                this.$message.error('加载用户列表失败');
+            }
+        },
+
+        // 搜索任务
+        searchTasks() {
+            this.currentPage = 1;
+            this.loadTasks();
+        },
+
+        // 重置搜索
+        resetSearch() {
+            this.searchForm = {
+                status: '',
+                timeRange: []
+            };
+            this.searchTasks();
+        },
+
+        // 显示新建任务对话框
+        showCreateTaskDialog() {
+            this.dialogTitle = '新建任务';
+            this.taskForm = {
+                task_name: '',
+                schedule_time: '',
+                groups: [],
+                content_text: '',
+                content_image: '',
+                content_link: '',
+                content_miniprogram: {
+                    title: '',
+                    path: ''
+                },
+                preview_recipients: []
+            };
+            this.imageList = [];
+            this.taskDialogVisible = true;
+        },
+
+        // 保存任务
+        async saveTask() {
+            this.$refs.taskForm.validate(async (valid) => {
+                if (valid) {
+                    try {
+                        const response = await axios.post('/message_push/api/tasks', this.taskForm);
+                        if (response.data.success) {
+                            this.$message.success('保存任务成功');
+                            this.taskDialogVisible = false;
+                            this.loadTasks();
+                            this.loadStatistics();
+                        }
+                    } catch (error) {
+                        this.$message.error('保存任务失败');
+                    }
+                }
             });
-            $('#taskLogsList').html(html);
-            $('#taskLogsModal').modal('show');
-        } else {
-            showError('获取任务日志失败：' + response.error);
+        },
+
+        // 预览任务
+        async previewTask(task) {
+            try {
+                const response = await axios.post(`/message_push/api/tasks/${task.task_id}/preview`);
+                if (response.data.success) {
+                    this.$message.success('预览已发送');
+                }
+            } catch (error) {
+                this.$message.error('发送预览失败');
+            }
+        },
+
+        // 编辑任务
+        editTask(task) {
+            this.dialogTitle = '编辑任务';
+            this.taskForm = { ...task };
+            if (task.content_image) {
+                this.imageList = [{
+                    name: '已上传图片',
+                    url: task.content_image
+                }];
+            }
+            this.taskDialogVisible = true;
+        },
+
+        // 暂停任务
+        async pauseTask(task) {
+            try {
+                const response = await axios.post(`/message_push/api/tasks/${task.task_id}/pause`);
+                if (response.data.success) {
+                    this.$message.success('任务已暂停');
+                    this.loadTasks();
+                    this.loadStatistics();
+                }
+            } catch (error) {
+                this.$message.error('暂停任务失败');
+            }
+        },
+
+        // 恢复任务
+        async resumeTask(task) {
+            try {
+                const response = await axios.post(`/message_push/api/tasks/${task.task_id}/resume`);
+                if (response.data.success) {
+                    this.$message.success('任务已恢复');
+                    this.loadTasks();
+                    this.loadStatistics();
+                }
+            } catch (error) {
+                this.$message.error('恢复任务失败');
+            }
+        },
+
+        // 删除任务
+        deleteTask(task) {
+            this.$confirm('确认删除该任务吗？', '提示', {
+                type: 'warning'
+            }).then(async () => {
+                try {
+                    const response = await axios.delete(`/message_push/api/tasks/${task.task_id}`);
+                    if (response.data.success) {
+                        this.$message.success('任务已删除');
+                        this.loadTasks();
+                        this.loadStatistics();
+                    }
+                } catch (error) {
+                    this.$message.error('删除任务失败');
+                }
+            });
+        },
+
+        // 查看日志
+        async viewLogs(task) {
+            try {
+                const response = await axios.get(`/message_push/api/tasks/${task.task_id}/logs`);
+                if (response.data.success) {
+                    this.taskLogs = response.data.data.logs;
+                    this.logsDialogVisible = true;
+                }
+            } catch (error) {
+                this.$message.error('获取任务日志失败');
+            }
+        },
+
+        // 处理分页
+        handleSizeChange(size) {
+            this.pageSize = size;
+            this.loadTasks();
+        },
+        handleCurrentChange(page) {
+            this.currentPage = page;
+            this.loadTasks();
+        },
+
+        // 处理表格选择
+        handleSelectionChange(selection) {
+            this.selectedTasks = selection;
+        },
+
+        // 批量操作
+        async batchPause() {
+            try {
+                const promises = this.selectedTasks.map(task => 
+                    axios.post(`/message_push/api/tasks/${task.task_id}/pause`)
+                );
+                await Promise.all(promises);
+                this.$message.success('批量暂停成功');
+                this.loadTasks();
+                this.loadStatistics();
+            } catch (error) {
+                this.$message.error('批量暂停失败');
+            }
+        },
+
+        async batchResume() {
+            try {
+                const promises = this.selectedTasks.map(task => 
+                    axios.post(`/message_push/api/tasks/${task.task_id}/resume`)
+                );
+                await Promise.all(promises);
+                this.$message.success('批量恢复成功');
+                this.loadTasks();
+                this.loadStatistics();
+            } catch (error) {
+                this.$message.error('批量恢复失败');
+            }
+        },
+
+        batchDelete() {
+            this.$confirm(`确认删除选中的 ${this.selectedTasks.length} 个任务吗？`, '提示', {
+                type: 'warning'
+            }).then(async () => {
+                try {
+                    const promises = this.selectedTasks.map(task => 
+                        axios.delete(`/message_push/api/tasks/${task.task_id}`)
+                    );
+                    await Promise.all(promises);
+                    this.$message.success('批量删除成功');
+                    this.loadTasks();
+                    this.loadStatistics();
+                } catch (error) {
+                    this.$message.error('批量删除失败');
+                }
+            });
+        },
+
+        // 图片上传相关
+        handleImageSuccess(response, file) {
+            if (response.success) {
+                this.taskForm.content_image = response.data.url;
+                this.imageList = [{
+                    name: file.name,
+                    url: response.data.url
+                }];
+            } else {
+                this.$message.error('上传失败');
+            }
+        },
+
+        beforeImageUpload(file) {
+            const isImage = file.type.startsWith('image/');
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isImage) {
+                this.$message.error('只能上传图片文件!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('图片大小不能超过 2MB!');
+                return false;
+            }
+            return true;
+        },
+
+        handleImagePreview(file) {
+            this.previewUrl = file.url;
+            this.previewVisible = true;
+        },
+
+        // 工具函数
+        getStatusType(status) {
+            const typeMap = {
+                'draft': 'info',
+                'scheduled': 'success',
+                'paused': 'warning',
+                'completed': '',
+                'failed': 'danger'
+            };
+            return typeMap[status] || 'info';
+        },
+        getStatusText(status) {
+            const textMap = {
+                'draft': '草稿',
+                'scheduled': '已排期',
+                'paused': '已暂停',
+                'completed': '已完成',
+                'failed': '失败'
+            };
+            return textMap[status] || status;
+        },
+        getProgressStatus(status) {
+            const statusMap = {
+                'completed': 'success',
+                'failed': 'exception',
+                'scheduled': 'warning',
+                'paused': 'info'
+            };
+            return statusMap[status] || '';
+        },
+        formatDateTime(datetime) {
+            return new Date(datetime).toLocaleString();
+        },
+        refreshTasks() {
+            this.loadTasks();
+            this.loadStatistics();
+            this.$message.success('数据已刷新');
         }
-    });
-}
+    }
+});
 </script>
+
+<style>
+.search-form {
+    margin-bottom: 20px;
+}
+.pagination-container {
+    margin-top: 20px;
+    text-align: right;
+}
+.stat-card {
+    text-align: center;
+    padding: 10px;
+}
+.stat-title {
+    font-size: 14px;
+    color: #606266;
+    margin-bottom: 10px;
+}
+.stat-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: #409EFF;
+}
+.batch-toolbar {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+.selected-count {
+    margin-left: 15px;
+    color: #606266;
+}
+</style>
 {% endblock %} 
\ No newline at end of file