diff --git a/admin/dashboard/templates/message_list.html b/admin/dashboard/templates/message_list.html
index eae6ffe..dfe1de5 100644
--- a/admin/dashboard/templates/message_list.html
+++ b/admin/dashboard/templates/message_list.html
@@ -3,60 +3,169 @@
 {% block title %}消息列表{% endblock %}
 
 {% block content %}
-<div id="app">
+<div>
     <h1>消息列表</h1>
     
-    <!-- 创建一个新的容器用于消息列表功能 -->
-    <div id="message-list-container">
-        <!-- 筛选条件 -->
-        <el-card class="filter-card">
-            <!-- 筛选条件部分 -->
-            <el-form {% raw %}:inline="true"{% endraw %} size="small">
-                <el-form-item label="群组">
-                    <el-select {% raw %}v-model="filter.groupId"{% endraw %} placeholder="选择群组" clearable>
-                        <el-option
-                            {% raw %}v-for="group in groups"
-                            :key="group.id"
-                            :label="group.name"
-                            :value="group.id"{% endraw %}>
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                
-                <el-form-item label="日期范围">
-                    <el-date-picker
-                        {% raw %}v-model="dateRange"
-                        type="daterange"
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        value-format="yyyy-MM-dd"
-                        :picker-options="pickerOptions"{% endraw %}>
-                    </el-date-picker>
-                </el-form-item>
-                
-                <el-form-item label="搜索内容">
-                    <el-input {% raw %}v-model="filter.searchText"{% endraw %} placeholder="搜索消息内容" clearable></el-input>
-                </el-form-item>
-                
-                <el-form-item>
-                    <el-button type="primary" {% raw %}@click="searchMessages"{% endraw %}>搜索</el-button>
-                    <el-button {% raw %}@click="resetFilter"{% endraw %}>重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
+    <!-- 筛选条件 -->
+    <el-card class="filter-card">
+        <el-form {% raw %}:inline="true"{% endraw %} size="small">
+            <el-form-item label="群组">
+                <el-select {% raw %}v-model="filter.groupId"{% endraw %} placeholder="选择群组" clearable>
+                    <el-option
+                        {% raw %}v-for="group in groups"
+                        :key="group.id"
+                        :label="group.name"
+                        :value="group.id"{% endraw %}>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            
+            <el-form-item label="日期范围">
+                <el-date-picker
+                    {% raw %}v-model="dateRange"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    value-format="yyyy-MM-dd"
+                    :picker-options="pickerOptions"{% endraw %}>
+                </el-date-picker>
+            </el-form-item>
+            
+            <el-form-item label="搜索内容">
+                <el-input {% raw %}v-model="filter.searchText"{% endraw %} placeholder="搜索消息内容" clearable></el-input>
+            </el-form-item>
+            
+            <el-form-item>
+                <el-button type="primary" {% raw %}@click="searchMessages"{% endraw %}>搜索</el-button>
+                <el-button {% raw %}@click="resetFilter"{% endraw %}>重置</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+    
+    <!-- 消息列表 -->
+    <el-card class="message-card">
+        <el-table
+            {% raw %}:data="messages"
+            style="width: 100%"
+            size="small"
+            v-loading="loading"{% endraw %}
+            border>
+            <el-table-column
+                prop="timestamp"
+                label="时间"
+                width="150">
+            </el-table-column>
+            
+            <el-table-column
+                prop="group_name"
+                label="群组"
+                width="150">
+            </el-table-column>
+            
+            <el-table-column
+                prop="sender_name"
+                label="发送者"
+                width="120">
+            </el-table-column>
+            
+            <el-table-column
+                prop="content"
+                label="内容">
+                <template slot-scope="scope">
+                    <!-- 文本消息 -->
+                    <div v-if="scope.row.message_type == 1">
+                        {% raw %}{{ scope.row.content }}{% endraw %}
+                    </div>
+                    
+                    <!-- 图片消息 -->
+                    <div v-else-if="scope.row.message_type == 3">
+                        <div>【图片消息】</div>
+                        <!-- 优先使用image_path显示图片，如果没有则回退到message_thumb -->
+                        <img v-if="scope.row.image_path" :src="getImageUrl(scope.row.image_path)" class="message-thumb" @click="showImage(scope.row)">
+                        <img v-else-if="scope.row.message_thumb" :src="scope.row.message_thumb" class="message-thumb" @click="showImage(scope.row)">
+                    </div>
+                    
+                    <!-- 视频消息 -->
+                    <div v-else-if="scope.row.message_type == 43">
+                        <div>【视频消息】</div>
+                        <img v-if="scope.row.message_thumb" :src="scope.row.message_thumb" class="message-thumb" @click="showVideo(scope.row)">
+                    </div>
+                    
+                    <!-- 其他类型消息 -->
+                    <div v-else>
+                        {% raw %}{{ scope.row.content || `【消息类型: ${scope.row.message_type}】` }}{% endraw %}
+                    </div>
+                </template>
+            </el-table-column>
+            
+            <el-table-column
+                label="操作"
+                width="100">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="showMessageDetail(scope.row)">详情</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
         
-        <!-- 消息列表和其他内容保持不变 -->
-        <!-- ... -->
-    </div>
+        <!-- 分页 -->
+        <div class="pagination-container">
+            <el-pagination
+                {% raw %}@size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="pagination.page"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="pagination.pageSize"{% endraw %}
+                layout="total, sizes, prev, pager, next, jumper"
+                {% raw %}:total="pagination.total"{% endraw %}>
+            </el-pagination>
+        </div>
+    </el-card>
+    
+    <!-- 消息详情对话框 -->
+    <el-dialog title="消息详情" {% raw %}:visible.sync="detailDialogVisible"{% endraw %} width="60%">
+        <div {% raw %}v-if="selectedMessage"{% endraw %}>
+            <el-descriptions {% raw %}:column="1"{% endraw %} border>
+                <el-descriptions-item label="时间">{% raw %}{{ selectedMessage.timestamp }}{% endraw %}</el-descriptions-item>
+                <el-descriptions-item label="群组">{% raw %}{{ selectedMessage.group_name }}{% endraw %}</el-descriptions-item>
+                <el-descriptions-item label="发送者">{% raw %}{{ selectedMessage.sender_name }}{% endraw %}</el-descriptions-item>
+                <el-descriptions-item label="消息类型">{% raw %}{{ getMessageTypeName(selectedMessage.message_type) }}{% endraw %}</el-descriptions-item>
+                <el-descriptions-item label="内容">{% raw %}{{ selectedMessage.content }}{% endraw %}</el-descriptions-item>
+                
+                <!-- 图片或视频消息 -->
+                <el-descriptions-item {% raw %}v-if="selectedMessage.message_type == 3 || selectedMessage.message_type == 43"{% endraw %} label="媒体内容">
+                    <img {% raw %}v-if="selectedMessage.message_type == 3 && selectedMessage.image_path" :src="getImageUrl(selectedMessage.image_path)"{% endraw %} style="max-width: 100%;">
+                    <img {% raw %}v-else-if="selectedMessage.message_type == 3 && selectedMessage.message_thumb" :src="selectedMessage.message_thumb"{% endraw %} style="max-width: 100%;">
+                    <video {% raw %}v-if="selectedMessage.message_type == 43 && selectedMessage.attachment_url" :src="selectedMessage.attachment_url"{% endraw %} controls style="max-width: 100%;"></video>
+                </el-descriptions-item>
+                
+                <el-descriptions-item label="原始XML" {% raw %}v-if="selectedMessage.message_xml"{% endraw %}>
+                    <pre style="white-space: pre-wrap; word-break: break-all;">{% raw %}{{ selectedMessage.message_xml }}{% endraw %}</pre>
+                </el-descriptions-item>
+            </el-descriptions>
+        </div>
+    </el-dialog>
+    
+    <!-- 图片预览 -->
+    <el-dialog {% raw %}:visible.sync="imageDialogVisible"{% endraw %} append-to-body width="80%" class="image-dialog">
+        <img {% raw %}v-if="selectedMessage && selectedMessage.image_path" :src="getImageUrl(selectedMessage.image_path)"{% endraw %} style="max-width: 100%;">
+        <img {% raw %}v-else-if="selectedMessage && selectedMessage.message_thumb" :src="selectedMessage.message_thumb"{% endraw %} style="max-width: 100%;">
+    </el-dialog>
 </div>
 {% endblock %}
 
 {% block scripts %}
 <script>
-    // 创建一个新的Vue实例，绑定到新的容器上
-    new Vue({
-        el: '#message-list-container',
+    // 设置当前菜单项
+    document.addEventListener('DOMContentLoaded', function() {
+        if (typeof app !== 'undefined' && app.$data) {
+            app.$data.activeIndex = '7';
+        }
+    });
+    
+    // 消息列表Vue实例
+    var messageListApp = new Vue({
+        el: '#content',
         data() {
             return {
                 loading: false,