From 8469cd6ff3c111b60d34fe80d2c859aaac69153e Mon Sep 17 00:00:00 2001
From: bao <2771008024@qq.com>
Date: Fri, 19 Dec 2025 09:32:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=9C=80=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=91=98=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hello/backend/routes/AdminNotice.js  |    1 -
 src/hello/backend/routes/auth.js         |   75 +-
 src/hello/backend/routes/feedback.js     |   66 ++
 src/hello/backend/routes/mynotice.js     |  198 +---
 src/hello/src/Admin.vue                  |  515 ++++++++
 src/hello/src/App.vue                    |   89 +-
 src/hello/src/components/AdminLogin.vue  |  226 ++++
 src/hello/src/components/AdminNavbar.vue |  131 +++
 src/hello/src/components/TheAuth.vue     |   48 +-
 src/hello/src/router/index.js            |   18 +-
 src/hello/src/views/AdminFeedback.vue    | 1361 ++++++++++++++++++++++
 11 files changed, 2555 insertions(+), 173 deletions(-)
 delete mode 100644 src/hello/backend/routes/AdminNotice.js
 create mode 100644 src/hello/src/Admin.vue
 create mode 100644 src/hello/src/components/AdminLogin.vue
 create mode 100644 src/hello/src/components/AdminNavbar.vue
 create mode 100644 src/hello/src/views/AdminFeedback.vue

diff --git a/src/hello/backend/routes/AdminNotice.js b/src/hello/backend/routes/AdminNotice.js
deleted file mode 100644
index 2c074623..00000000
--- a/src/hello/backend/routes/AdminNotice.js
+++ /dev/null
@@ -1 +0,0 @@
-// 管理员获取通知，发布通知的后端接口文件
\ No newline at end of file
diff --git a/src/hello/backend/routes/auth.js b/src/hello/backend/routes/auth.js
index f9e1cc6b..cb320011 100644
--- a/src/hello/backend/routes/auth.js
+++ b/src/hello/backend/routes/auth.js
@@ -7,7 +7,78 @@ const dbModule = require('../db');
 const db = dbModule.promisePool;
 const { authenticateToken } = require('../middleware/auth');
 const verificationService = require('../services/verificationService');
-// 注册接口
+
+//管理员登录接口
+router.post('/admin/login', async (req, res) => {
+  try {
+    const { adminAccount, password } = req.body;
+
+    // 验证输入
+    if (!adminAccount || !password) {
+      return res.status(400).json({
+        success: false,
+        message: '请填写管理员账号和密码'
+      });
+    }
+
+    // 从数据库查找管理员用户（role='admin'）
+    const [users] = await db.query(
+      'SELECT * FROM users WHERE (username = ?) AND role = "admin"', 
+      [adminAccount]
+    );
+    
+    if (users.length === 0) {
+      return res.status(400).json({
+        success: false,
+        message: '管理员账号不存在或权限不足'
+      });
+    }
+
+    const user = users[0];
+
+    // 验证密码
+    const isValidPassword = await bcrypt.compare(password, user.password);
+    if (!isValidPassword) {
+      return res.status(400).json({
+        success: false,
+        message: '密码错误'
+      });
+    }
+
+    // 生成JWT token（可以设置不同的密钥或更长的有效期）
+    const token = jwt.sign(
+      { 
+        userId: user.user_id, 
+        email: user.email,
+        role: user.role,  // 添加角色信息
+        isAdmin: true     // 添加管理员标识
+      },
+      process.env.JWT_SECRET || 'your-secret-key',
+      { expiresIn: '7d' }  // 管理员token有效期更长
+    );
+
+    res.json({
+      success: true,
+      message: '管理员登录成功',
+      user: {
+        user_id: user.user_id,
+        username: user.username,
+        email: user.email,
+        role: user.role
+      },
+      token
+    });
+
+  } catch (error) {
+    console.error('管理员登录错误:', error);
+    res.status(500).json({
+      success: false,
+      message: '服务器错误'
+    });
+  }
+});
+
+// 用户注册接口
 router.post('/register', async (req, res) => {
   try {
     const { username, email, password, verificationCode } = req.body;
@@ -89,7 +160,7 @@ router.post('/register', async (req, res) => {
   }
 });
 
-// 登录接口
+// 用户登录接口
 router.post('/login', async (req, res) => {
   try {
     const { email, password } = req.body;
diff --git a/src/hello/backend/routes/feedback.js b/src/hello/backend/routes/feedback.js
index f400265b..3d404a30 100644
--- a/src/hello/backend/routes/feedback.js
+++ b/src/hello/backend/routes/feedback.js
@@ -189,6 +189,72 @@ router.get('/:id', authenticateToken, checkAdmin, async (req, res) => {
   }
 });
 
+// 回复反馈 - 需要认证和管理员权限
+router.put('/:id/reply', authenticateToken, checkAdmin, async (req, res) => {
+  try {
+    const feedbackId = parseInt(req.params.id);
+    const { answer } = req.body;
+    
+    // 验证参数
+    if (!answer || answer.trim() === '') {
+      return res.status(400).json({
+        success: false,
+        message: '回复内容不能为空'
+      });
+    }
+    
+    if (answer.length > 500) {
+      return res.status(400).json({
+        success: false,
+        message: '回复内容不能超过500字'
+      });
+    }
+    
+    // 先检查反馈是否存在
+    const checkQuery = `SELECT feedback_id FROM feedback WHERE feedback_id = ?`;
+    const [checkRows] = await db.execute(checkQuery, [feedbackId]);
+    
+    if (checkRows.length === 0) {
+      return res.status(404).json({
+        success: false,
+        message: '反馈不存在'
+      });
+    }
+    
+    // 更新反馈回复
+    const updateQuery = `
+      UPDATE feedback 
+      SET answer = ?, answer_time = CURRENT_TIMESTAMP 
+      WHERE feedback_id = ?
+    `;
+    
+    await db.execute(updateQuery, [answer.trim(), feedbackId]);
+    
+    // 获取更新后的反馈信息
+    const getQuery = `
+      SELECT f.*, u.username 
+      FROM feedback f 
+      JOIN users u ON f.user_id = u.user_id 
+      WHERE f.feedback_id = ?
+    `;
+    
+    const [updatedRows] = await db.execute(getQuery, [feedbackId]);
+    
+    res.json({
+      success: true,
+      data: updatedRows[0],
+      message: '回复成功'
+    });
+    
+  } catch (error) {
+    console.error('回复反馈错误:', error);
+    res.status(500).json({
+      success: false,
+      message: '服务器错误: ' + error.message
+    });
+  }
+});
+
 // 根据ID删除反馈 - 需要认证和管理员权限
 router.delete('/:id', authenticateToken, checkAdmin, async (req, res) => {
   try {
diff --git a/src/hello/backend/routes/mynotice.js b/src/hello/backend/routes/mynotice.js
index a81c0634..a788521c 100644
--- a/src/hello/backend/routes/mynotice.js
+++ b/src/hello/backend/routes/mynotice.js
@@ -1,129 +1,30 @@
 // backend/routes/mynotice.js
 const express = require('express');
 const router = express.Router();
-
-// 临时模拟数据
-let mockNotices = [
-  {
-    id: 1,
-    type: 'feedback',
-    title: '关于图表导出功能的建议',
-    content: '建议增加导出为PDF格式的功能，这样更方便分享和打印。',
-    feedbackType: 'suggestion',
-    time: new Date(Date.now() - 3600000 * 2),
-    isRead: false,
-    reply: '感谢您的建议！我们已经在开发计划中，预计下个版本会增加PDF导出功能。',
-    replyTime: new Date(Date.now() - 3600000 * 1)
-  },
-  {
-    id: 2,
-    type: 'feedback',
-    title: '界面颜色太刺眼',
-    content: '数据可视化页面的背景色太亮，长时间使用眼睛容易疲劳。',
-    feedbackType: 'ui',
-    time: new Date(Date.now() - 86400000 * 2),
-    isRead: true,
-    reply: '我们已收到您的反馈，会在下个版本中增加深色模式选项。',
-    replyTime: new Date(Date.now() - 86400000 * 1)
-  },
-  {
-    id: 3,
-    type: 'system',
-    title: '系统维护通知',
-    content: '为了提升系统性能，我们将于本周六凌晨2:00-4:00进行系统维护，期间服务将不可用。',
-    time: new Date(Date.now() - 86400000 * 3),
-    isRead: false
-  },
-  {
-    id: 4,
-    type: 'system',
-    title: '新功能上线',
-    content: '图表智能推荐功能已上线，系统会根据您的数据自动推荐最合适的图表类型。',
-    time: new Date(Date.now() - 86400000 * 5),
-    isRead: true
-  },
-  {
-    id: 5,
-    type: 'feedback',
-    title: '数据导入失败问题',
-    content: '导入超过10MB的CSV文件时系统会报错，提示内存不足。',
-    feedbackType: 'bug',
-    time: new Date(Date.now() - 86400000 * 7),
-    isRead: false,
-    reply: null
-  }
-];
-
-// 模拟用户数据
-const mockUsers = [
-  { id: 1, username: '张三', email: 'zhangsan@example.com' },
-  { id: 2, username: '李四', email: 'lisi@example.com' },
-  { id: 3, username: '王五', email: 'wangwu@example.com' }
-];
-
-// 模拟notice表数据
-let mockSystemNotices = [
-  {
-    id: 1,
-    title: '系统维护通知',
-    content: '为了提升系统性能，我们将于本周六凌晨2:00-4:00进行系统维护，期间服务将不可用。',
-    admin_id: 1,
-    is_read: false,
-    created_time: new Date(Date.now() - 86400000 * 3)
-  },
-  {
-    id: 2,
-    title: '新功能上线',
-    content: '图表智能推荐功能已上线，系统会根据您的数据自动推荐最合适的图表类型。',
-    admin_id: 1,
-    is_read: true,
-    created_time: new Date(Date.now() - 86400000 * 5)
-  }
-];
-
-// 模拟feedback表数据
-let mockFeedbackList = [
-  {
-    feedback_id: 1,
-    user_id: 1,
-    type: 'suggestion',
-    content: '建议增加导出为PDF格式的功能，这样更方便分享和打印。',
-    feedback_time: new Date(Date.now() - 3600000 * 2),
-    answer: '感谢您的建议！我们已经在开发计划中，预计下个版本会增加PDF导出功能。',
-    answer_time: new Date(Date.now() - 3600000 * 1)
-  },
-  {
-    feedback_id: 2,
-    user_id: 1,
-    type: 'ui',
-    content: '数据可视化页面的背景色太亮，长时间使用眼睛容易疲劳。',
-    feedback_time: new Date(Date.now() - 86400000 * 2),
-    answer: '我们已收到您的反馈，会在下个版本中增加深色模式选项。',
-    answer_time: new Date(Date.now() - 86400000 * 1)
-  },
-  {
-    feedback_id: 3,
-    user_id: 1,
-    type: 'bug',
-    content: '导入超过10MB的CSV文件时系统会报错，提示内存不足。',
-    feedback_time: new Date(Date.now() - 86400000 * 7),
-    answer: null,
-    answer_time: null
-  }
-];
+const dbModule = require('../db');
+const db = dbModule.promisePool;
 
 // 获取用户通知列表
-router.get('/api/mynotice', (req, res) => {
+router.get('/', async (req, res) => {
   try {
-    // 模拟从数据库获取数据
-    // 这里应该根据当前登录用户ID获取数据
-    const userId = 1; // 假设当前用户ID为1
+    // 从请求中获取用户ID（假设通过认证中间件设置）
+    const userId = req.user?.id || 1; // 默认为1用于测试
     
     // 1. 获取用户的反馈信息
-    const userFeedback = mockFeedbackList.filter(feedback => feedback.user_id === userId);
+    const [userFeedback] = await db.execute(
+      `SELECT f.feedback_id, f.type, f.content, f.feedback_time, f.answer, f.answer_time
+       FROM feedback f 
+       WHERE f.user_id = ? 
+       ORDER BY f.feedback_time DESC`,
+      [userId]
+    );
     
     // 2. 获取系统通知
-    const systemNotices = mockSystemNotices;
+    const [systemNotices] = await db.execute(
+      `SELECT n.notice_id, n.title, n.content, n.admin_id, n.is_read, n.created_time
+       FROM notice n
+       ORDER BY n.created_time DESC`
+    );
     
     // 3. 合并数据并格式化
     const formattedNotices = [];
@@ -137,7 +38,7 @@ router.get('/api/mynotice', (req, res) => {
         content: feedback.content,
         feedbackType: feedback.type,
         time: feedback.feedback_time,
-        isRead: false, // 这里应该从数据库读取已读状态
+        isRead: feedback.answer !== null, // 有回复视为已读
         reply: feedback.answer,
         replyTime: feedback.answer_time
       };
@@ -147,7 +48,7 @@ router.get('/api/mynotice', (req, res) => {
     // 添加系统通知
     systemNotices.forEach(notice => {
       const formattedNotice = {
-        id: `system_${notice.id}`,
+        id: `system_${notice.notice_id}`,
         type: 'system',
         title: notice.title,
         content: notice.content,
@@ -183,15 +84,23 @@ router.get('/api/mynotice', (req, res) => {
 });
 
 // 标记单条通知为已读
-router.post('/api/mynotice/read/:id', (req, res) => {
+router.post('/read/:id', async (req, res) => {
   try {
     const { id } = req.params;
     
-    // 在实际应用中，这里应该更新数据库中的已读状态
-    // 更新mock数据
-    const notice = mockNotices.find(n => n.id == parseInt(id) || n.id == id);
-    if (notice) {
-      notice.isRead = true;
+    // 判断通知类型并更新对应的数据库记录
+    if (id.startsWith('feedback_')) {
+      // 反馈通知 - 不需要标记已读，因为反馈的已读状态由是否有回复决定
+      console.log(`用户查看了反馈 ${id}`);
+    } else if (id.startsWith('system_')) {
+      // 系统通知 - 更新notice表的is_read字段
+      const noticeId = id.replace('system_', '');
+      
+      // 更新系统通知为已读
+      await db.execute(
+        'UPDATE notice SET is_read = TRUE WHERE notice_id = ?',
+        [noticeId]
+      );
     }
     
     res.json({
@@ -210,18 +119,14 @@ router.post('/api/mynotice/read/:id', (req, res) => {
 });
 
 // 标记所有通知为已读
-router.post('/api/mynotice/read-all', (req, res) => {
+router.post('/read-all', async (req, res) => {
   try {
-    // 在实际应用中，这里应该批量更新数据库中的已读状态
-    // 更新mock数据
-    mockNotices.forEach(notice => {
-      notice.isRead = true;
-    });
+    // 1. 将所有系统通知标记为已读
+    await db.execute(
+      'UPDATE notice SET is_read = TRUE WHERE is_read = FALSE'
+    );
     
-    // 模拟更新系统通知已读状态
-    mockSystemNotices.forEach(notice => {
-      notice.is_read = true;
-    });
+    // 注意：反馈通知的已读状态由是否有回复决定，无法批量标记
     
     res.json({
       code: 200,
@@ -239,27 +144,30 @@ router.post('/api/mynotice/read-all', (req, res) => {
 });
 
 // 获取未读通知数量
-router.get('/api/mynotice/unread-count', (req, res) => {
+router.get('/unread-count', async (req, res) => {
   try {
-    const userId = 1; // 假设当前用户ID为1
+    const userId = req.user?.id || 1; // 默认为1用于测试
     
-    // 获取用户的未读反馈
-    const unreadFeedback = mockFeedbackList.filter(feedback => 
-      feedback.user_id === userId && !feedback.is_read
-    ).length;
+    // 1. 获取未读反馈数量（没有回复的反馈）
+    const [unreadFeedback] = await db.execute(
+      'SELECT COUNT(*) as count FROM feedback WHERE user_id = ? AND answer IS NULL',
+      [userId]
+    );
     
-    // 获取未读系统通知
-    const unreadSystemNotices = mockSystemNotices.filter(notice => !notice.is_read).length;
+    // 2. 获取未读系统通知数量
+    const [unreadSystemNotices] = await db.execute(
+      'SELECT COUNT(*) as count FROM notice WHERE is_read = FALSE'
+    );
     
-    const totalUnread = unreadFeedback + unreadSystemNotices;
+    const totalUnread = parseInt(unreadFeedback[0].count) + parseInt(unreadSystemNotices[0].count);
     
     res.json({
       code: 200,
       message: '获取未读数量成功',
       data: {
         unreadCount: totalUnread,
-        feedbackUnread: unreadFeedback,
-        systemUnread: unreadSystemNotices
+        feedbackUnread: parseInt(unreadFeedback[0].count),
+        systemUnread: parseInt(unreadSystemNotices[0].count)
       }
     });
   } catch (error) {
diff --git a/src/hello/src/Admin.vue b/src/hello/src/Admin.vue
new file mode 100644
index 00000000..e2ef0a9a
--- /dev/null
+++ b/src/hello/src/Admin.vue
@@ -0,0 +1,515 @@
+<!-- src/Admin.vue -->
+ <!-- 作为管理员的主界面 -->
+<template>
+  <div class="admin-welcome">
+    <!-- 欢迎横幅 -->
+    <div class="welcome-banner">
+      <div class="banner-content">
+        <h1 class="welcome-title">欢迎回来，{{ admin.username }}！</h1>
+        <p class="welcome-subtitle">PGFPlotsGenerator 管理员控制台</p>
+        <div class="admin-stats">
+          <div class="stat-card">
+            <div class="stat-icon">👤</div>
+            <div class="stat-info">
+              <div class="stat-number">{{ stats.users }}</div>
+              <div class="stat-label">注册用户</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon">📂</div>
+            <div class="stat-info">
+              <div class="stat-number">{{ stats.files }}</div>
+              <div class="stat-label">数据文件</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon">📜</div>
+            <div class="stat-info">
+              <div class="stat-number">{{ stats.generations }}</div>
+              <div class="stat-label">生成记录</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon">💬</div>
+            <div class="stat-info">
+              <div class="stat-number">{{ stats.feedback }}</div>
+              <div class="stat-label">用户反馈</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 快速操作 - 修改为四宫格布局 -->
+    <div class="quick-actions">
+      <h2 class="section-title">快速操作</h2>
+      <div class="four-grid-container">
+        <!-- 第一行 -->
+        <div class="grid-row">
+          <div class="grid-item" @click="goToUserManagement">
+            <div class="grid-icon" style="background: #4caf50;">
+              <span class="icon-text">👤</span>
+            </div>
+            <div class="grid-content">
+              <h3>用户管理</h3>
+              <p>查看和管理所有注册用户</p>
+            </div>
+          </div>
+          <div class="grid-item" @click="goToFeedbackManagement">
+            <div class="grid-icon" style="background: #ff9800;">
+              <span class="icon-text">💬</span>
+            </div>
+            <div class="grid-content">
+              <h3>反馈管理</h3>
+              <p>处理用户反馈和建议</p>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 第二行 -->
+        <div class="grid-row">
+          <div class="grid-item" @click="goToSystemLogs">
+            <div class="grid-icon" style="background: #607d8b;">
+              <span class="icon-text">📋</span>
+            </div>
+            <div class="grid-content">
+              <h3>系统日志</h3>
+              <p>查看系统运行状态</p>
+            </div>
+          </div>
+          <div class="grid-item" @click="goToNoticeManagement">
+            <div class="grid-icon" style="background: #e91e63;">
+              <span class="icon-text">📢</span>
+            </div>
+            <div class="grid-content">
+              <h3>通知管理</h3>
+              <p>发布系统通知</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 管理员信息 -->
+    <div class="admin-info-section">
+      <h2 class="section-title">管理员信息</h2>
+      <div class="info-card">
+        <div class="info-row">
+          <span class="info-label">管理员ID：</span>
+          <span class="info-value">{{ admin.user_id }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">用户名：</span>
+          <span class="info-value">{{ admin.username }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">邮箱：</span>
+          <span class="info-value">{{ admin.email }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">角色：</span>
+          <span class="info-value admin-role">{{ admin.role }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useRouter } from 'vue-router'
+
+export default {
+  name: 'AdminWelcome',
+  setup() {
+    const router = useRouter()
+    return { router }
+  },
+  data() {
+    return {
+      admin: {},
+      stats: {
+        users: 0,
+        files: 0,
+        generations: 0,
+        feedback: 0
+      },
+      currentTime: ''
+    }
+  },
+  created() {
+    this.loadAdminData()
+    this.updateCurrentTime()
+    this.loadSystemStats()
+    
+    // 每10分钟更新一次统计数据
+    setInterval(this.loadSystemStats, 10 * 60 * 1000)
+    
+    // 更新时间
+    setInterval(this.updateCurrentTime, 1000)
+  },
+  methods: {
+    // 在 Admin.vue 的 loadAdminData 方法中
+    loadAdminData() {
+      const adminUser = localStorage.getItem('adminUser')
+      if (adminUser) {
+        try {
+          this.admin = JSON.parse(adminUser)
+        } catch (e) {
+          console.error('解析管理员信息失败:', e)
+          // 调用 App.vue 的登出方法
+          if (typeof this.$parent.handleAdminLogout === 'function') {
+            this.$parent.handleAdminLogout()
+          }
+        }
+      } else {
+        // 调用 App.vue 的登出方法
+        if (typeof this.$parent.handleAdminLogout === 'function') {
+          this.$parent.handleAdminLogout()
+        }
+      }
+    },
+    
+    updateCurrentTime() {
+      const now = new Date()
+      this.currentTime = now.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+      })
+    },
+    
+    async loadSystemStats() {
+      try {
+        // 这里应该调用后端API获取统计数据
+        // 暂时使用模拟数据
+        this.stats = {
+          users: 156,
+          files: 342,
+          generations: 289,
+          feedback: 23
+        }
+      } catch (error) {
+        console.error('获取系统统计失败:', error)
+      }
+    },
+    
+    goToUserManagement() {
+      alert('跳转到用户管理')
+      // 实际使用时应该跳转到对应的路由
+      // this.$router.push('/admin/users')
+    },
+    
+    goToFeedbackManagement() {
+      // 在新标签页打开反馈管理页面
+      // 构建完整的URL
+      const currentOrigin = window.location.origin
+      const adminFeedbackUrl = `${currentOrigin}/admin/feedback`
+      
+      console.log('在新标签页打开:', adminFeedbackUrl)
+      
+      // 在新标签页打开反馈管理页面
+      window.open(adminFeedbackUrl, '_blank')
+    },
+    
+    goToSystemLogs() {
+      alert('跳转到系统日志')
+      // this.$router.push('/admin/logs')
+    },
+    
+    goToNoticeManagement() {
+      alert('跳转到通知管理')
+      // this.$router.push('/admin/notices')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.admin-welcome {
+  min-height: calc(100vh - 60px);
+  background: #f8f9fa;
+  padding: 0;
+}
+
+/* 欢迎横幅 */
+.welcome-banner {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  color: white;
+  padding: 40px 20px;
+  margin-bottom: 30px;
+}
+
+.banner-content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.welcome-title {
+  font-size: 32px;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.welcome-subtitle {
+  font-size: 16px;
+  opacity: 0.9;
+  margin-bottom: 30px;
+}
+
+.admin-stats {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.stat-card {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 200px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.stat-icon {
+  font-size: 30px;
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-number {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-top: 5px;
+}
+
+/* 快速操作 - 四宫格布局 */
+.quick-actions {
+  max-width: 900px; /* 调整宽度适应四宫格 */
+  margin: 0 auto 30px;
+  padding: 0 20px;
+}
+
+.section-title {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 30px; /* 增加底部间距 */
+  font-weight: 600;
+  text-align: center; /* 标题居中 */
+}
+
+/* 四宫格容器 */
+.four-grid-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 网格行 */
+.grid-row {
+  display: flex;
+  gap: 20px;
+}
+
+/* 网格项 */
+.grid-item {
+  flex: 1;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid #eaeaea;
+  display: flex;
+  flex-direction: column;
+}
+
+.grid-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: #dc3545;
+}
+
+/* 图标区域 */
+.grid-icon {
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-text {
+  font-size: 48px;
+}
+
+/* 内容区域 */
+.grid-content {
+  padding: 20px;
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.grid-content h3 {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.grid-content p {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* 管理员信息 */
+.admin-info-section {
+  max-width: 1200px;
+  margin: 0 auto 30px;
+  padding: 0 20px;
+}
+
+.info-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  border: 1px solid #eaeaea;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.info-label {
+  font-weight: 600;
+  color: #333;
+  min-width: 100px;
+}
+
+.info-value {
+  color: #666;
+}
+
+.admin-role {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-block;
+}
+
+/* 系统状态 */
+.system-status {
+  max-width: 1200px;
+  margin: 0 auto 30px;
+  padding: 0 20px;
+}
+
+.status-cards {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.status-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 250px;
+  border: 1px solid #eaeaea;
+}
+
+.status-icon {
+  font-size: 30px;
+}
+
+.status-content h3 {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.status-content p {
+  color: #666;
+  font-size: 14px;
+}
+
+.status-normal {
+  border-left: 4px solid #4caf50;
+}
+
+.status-warning {
+  border-left: 4px solid #ff9800;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .admin-stats {
+    flex-direction: column;
+  }
+  
+  .stat-card {
+    width: 100%;
+    min-width: auto;
+  }
+  
+  .actions-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .status-cards {
+    flex-direction: column;
+  }
+  
+  .status-card {
+    width: 100%;
+    min-width: auto;
+  }
+
+  /* 在移动设备上将四宫格变为垂直布局 */
+  .grid-row {
+    flex-direction: column;
+  }
+  
+  .grid-item {
+    margin-bottom: 20px;
+  }
+  
+  .grid-item:last-child {
+    margin-bottom: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/hello/src/App.vue b/src/hello/src/App.vue
index cf7a25c4..37dbe8c8 100644
--- a/src/hello/src/App.vue
+++ b/src/hello/src/App.vue
@@ -1,25 +1,35 @@
 <!-- src/App.vue -->
 <template>
   <div id="app">
-    <!-- 使用顶部导航栏组件 -->
+    <!-- 根据认证状态显示不同的顶部导航栏 -->
+    <!-- 普通用户登录后显示普通导航栏 -->
     <CommonNavbar 
+      v-if="isAuthenticated && !isAdminAuthenticated"
       :show-navbar="isAuthenticated"
       :user="currentUser"
       :unread-count="unreadCount"
       @logout="handleLogout"
       @user-click="goToChangeInformation"
     />
+    
+    <!-- 管理员登录后显示管理员导航栏 -->
+    <AdminNavbar 
+      v-else-if="isAdminAuthenticated"
+      :admin="currentAdmin"
+      @logout="handleAdminLogout"
+    />
 
     <!-- 主要内容 -->
     <main>
       <!-- 未登录显示认证页面 -->
       <Auth 
-        v-if="!isAuthenticated" 
-        @auth-success="handleAuthSuccess" 
+        v-if="!isAuthenticated && !isAdminAuthenticated" 
+        @auth-success="handleAuthSuccess"
+        @admin-success="handleAdminSuccess"
       />
       
-      <!-- 登录后显示主应用 -->
-      <div v-else class="main-app">
+      <!-- 普通用户登录后显示主应用 -->
+      <div v-else-if="isAuthenticated" class="main-app">
         <div class="app-layout">
           <!-- 侧边栏组件 -->
           <CommonSidebar 
@@ -33,6 +43,12 @@
           </div>
         </div>
       </div>
+      
+      <!-- 管理员登录后显示路由视图容器 -->
+      <div v-else-if="isAdminAuthenticated" class="admin-main">
+        <!-- 这里添加路由视图容器 -->
+        <router-view></router-view>
+      </div>
     </main>
   </div>
 </template>
@@ -40,18 +56,23 @@
 <script>
 import Auth from './components/TheAuth.vue';
 import CommonSidebar from './components/CommonSidebar.vue';
-import CommonNavbar from './components/CommonNavbar.vue';  // 导入新的导航栏组件
+import CommonNavbar from './components/CommonNavbar.vue';
+import AdminNavbar from './components/AdminNavbar.vue';
+// 移除 Admin 组件的直接导入，因为现在通过路由加载
 
 export default {
   name: 'App',
   components: {
     Auth,
     CommonSidebar,
-    CommonNavbar  // 注册组件
+    CommonNavbar,
+    AdminNavbar
   },
   data() {
     return {
-      isSidebarCollapsed: false
+      isSidebarCollapsed: false,
+      isAdminAuthenticated: false,
+      currentAdmin: null
     }
   },
   computed: {
@@ -68,6 +89,7 @@ export default {
 
   methods: {
     checkAuthStatus() {
+      // 检查普通用户认证
       const token = localStorage.getItem('token') || sessionStorage.getItem('token')
       const user = localStorage.getItem('user') || sessionStorage.getItem('user')
       
@@ -75,6 +97,23 @@ export default {
         this.$store.commit('SET_USER', JSON.parse(user))
         this.validateToken(token)
       }
+      
+      // 检查管理员认证
+      const adminToken = localStorage.getItem('adminToken')
+      const adminUser = localStorage.getItem('adminUser')
+      
+      if (adminToken && adminUser) {
+        try {
+          this.currentAdmin = JSON.parse(adminUser)
+          this.isAdminAuthenticated = true
+          // 注意：移除自动跳转到 /admin 的逻辑
+          // 让路由根据当前 URL 自动渲染对应组件
+          console.log('管理员已认证，当前路径:', window.location.pathname)
+        } catch (e) {
+          console.error('解析管理员信息失败:', e)
+          this.handleAdminLogout()
+        }
+      }
     },
     
     async validateToken(token) {
@@ -98,16 +137,40 @@ export default {
       this.$store.commit('SET_USER', user)
     },
     
+    handleAdminSuccess(adminData) {
+      console.log('管理员登录成功:', adminData)
+      this.currentAdmin = adminData
+      this.isAdminAuthenticated = true
+      
+      // 存储管理员信息到localStorage
+      localStorage.setItem('adminUser', JSON.stringify(adminData))
+      localStorage.setItem('adminToken', adminData.token)
+      
+      // 管理员登录后跳转到Admin.vue界面
+      this.$router.push('/admin')
+    },
+    
     handleLogout() {
       localStorage.removeItem('token')
       localStorage.removeItem('user')
       sessionStorage.removeItem('token')
       sessionStorage.removeItem('user')
-      // 清除所有聊天相关的本地存储
       localStorage.removeItem('chart_chat_messages')
       localStorage.removeItem('chat_session_id')
-          
+      
       this.$store.commit('LOGOUT')
+      // 登出后跳转到首页
+      this.$router.push('/')
+    },
+    
+    handleAdminLogout() {
+      localStorage.removeItem('adminToken')
+      localStorage.removeItem('adminUser')
+      this.isAdminAuthenticated = false
+      this.currentAdmin = null
+      
+      // 管理员登出后跳转到首页
+      this.$router.push('/')
     },
     
     handleSidebarToggle(isCollapsed) {
@@ -122,7 +185,6 @@ export default {
 </script>
 
 <style>
-/* 移除与导航栏相关的样式，因为它们已经移动到组件中 */
 * {
   margin: 0;
   padding: 0;
@@ -144,6 +206,11 @@ body {
   margin: 0 auto;
 }
 
+.admin-main {
+  min-height: calc(100vh - 60px); /* 减去导航栏高度 */
+  background: #f8f9fa;
+}
+
 .app-layout {
   display: flex;
   min-height: calc(100vh - 100px);
diff --git a/src/hello/src/components/AdminLogin.vue b/src/hello/src/components/AdminLogin.vue
new file mode 100644
index 00000000..a0164440
--- /dev/null
+++ b/src/hello/src/components/AdminLogin.vue
@@ -0,0 +1,226 @@
+<!-- src/components/AdminLogin.vue -->
+<template>
+  <form @submit.prevent="handleAdminLogin" class="admin-login-form">
+    <div class="form-group">
+      <label for="adminAccount">管理员账号</label>
+      <div class="input-wrapper">
+        <input
+          id="adminAccount"
+          v-model="form.adminAccount"
+          type="text"
+          placeholder="请输入管理员账号"
+          required
+          :class="{ error: errors.adminAccount }"
+        >
+        <span v-if="errors.adminAccount" class="error-text">{{ errors.adminAccount }}</span>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="password">密码</label>
+      <div class="input-wrapper">
+        <input
+          id="password"
+          v-model="form.password"
+          :type="showPassword ? 'text' : 'password'"
+          placeholder="请输入密码"
+          required
+          :class="{ error: errors.password }"
+        >
+        <button
+          type="button"
+          class="toggle-password"
+          @click="showPassword = !showPassword"
+        >
+          {{ showPassword ? '🙈' : '👁️' }}
+        </button>
+      </div>
+      <div v-if="errors.password" class="error-text">{{ errors.password }}</div>
+    </div>
+
+    <button 
+      type="submit" 
+      class="submit-button admin-submit"
+      :disabled="loading"
+    >
+      <span v-if="loading">登录中...</span>
+      <span v-else>管理员登录</span>
+    </button>
+
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'AdminLogin',
+  data() {
+    return {
+      form: {
+        adminAccount: '',
+        password: ''
+      },
+      showPassword: false,
+      errors: {},
+      loading: false,
+      error: ''
+    }
+  },
+  methods: {
+    async handleAdminLogin() {
+      // 验证表单
+      if (!this.validateForm()) return
+
+      this.loading = true
+      this.error = ''
+
+      try {
+        // 调用后端管理员登录API
+        const response = await fetch('http://localhost:3000/api/auth/admin/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            adminAccount: this.form.adminAccount,
+            password: this.form.password
+          })
+        })
+
+        const data = await response.json()
+
+        if (data.success) {
+          // 管理员登录成功，存储token和用户信息
+          localStorage.setItem('adminToken', data.token)
+          localStorage.setItem('adminUser', JSON.stringify(data.user))
+          
+          // 通知父组件登录成功
+          this.$emit('success', {
+            ...data.user,
+            token: data.token, // 确保传递了 token
+            isAdmin: true
+          })
+        } else {
+          this.error = data.message || '管理员登录失败'
+        }
+      } catch (err) {
+        this.error = '网络错误，请检查后端服务'
+        console.error('管理员登录错误:', err)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    validateForm() {
+      this.errors = {}
+
+      // 管理员账号验证
+      if (!this.form.adminAccount) {
+        this.errors.adminAccount = '管理员账号不能为空'
+      }
+
+      // 密码验证
+      if (!this.form.password) {
+        this.errors.password = '密码不能为空'
+      } else if (this.form.password.length < 6) {
+        this.errors.password = '密码至少6位'
+      }
+
+      return Object.keys(this.errors).length === 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+.admin-login-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 8px;
+  color: #333;
+  font-weight: 500;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-wrapper input {
+  width: 100%;
+  padding: 12px 45px 12px 15px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 16px;
+  transition: border-color 0.3s;
+  box-sizing: border-box;
+}
+
+.input-wrapper input:focus {
+  outline: none;
+  border-color: #dc3545; /* 使用红色作为管理员主题色 */
+}
+
+.toggle-password {
+  position: absolute;
+  right: 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+}
+
+input.error {
+  border-color: #e74c3c;
+}
+
+.error-text {
+  color: #e74c3c;
+  font-size: 14px;
+  margin-top: 5px;
+  display: block;
+}
+
+.admin-submit {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  color: white;
+  border: none;
+  padding: 14px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+.admin-submit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.admin-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.error-message {
+  background: #ffeaea;
+  color: #e74c3c;
+  padding: 12px;
+  border-radius: 6px;
+  margin-top: 15px;
+  font-size: 14px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/hello/src/components/AdminNavbar.vue b/src/hello/src/components/AdminNavbar.vue
new file mode 100644
index 00000000..8716a2b0
--- /dev/null
+++ b/src/hello/src/components/AdminNavbar.vue
@@ -0,0 +1,131 @@
+<!-- src/components/AdminNavbar.vue -->
+<template>
+  <nav class="admin-navbar">
+    <div class="navbar-container">
+      <div class="navbar-left">
+        <div class="logo">
+          <span class="logo-icon">⚙️</span>
+          <span class="logo-text">PGFPlots Admin</span>
+        </div>
+      </div>
+      
+      <div class="navbar-right">
+        <div class="admin-info">
+          <span class="admin-name">{{ admin.username }}</span>
+          <span class="admin-badge">管理员</span>
+        </div>
+        <button class="logout-btn" @click="logout">
+          <span>退出</span>
+          <span class="logout-icon">🚪</span>
+        </button>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'AdminNavbar',
+  props: {
+    admin: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    logout() {
+      this.$emit('logout')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.admin-navbar {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+  color: white;
+  padding: 0 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-icon {
+  font-size: 24px;
+}
+
+.logo-text {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.admin-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 8px 15px;
+  border-radius: 20px;
+}
+
+.admin-name {
+  font-weight: 500;
+}
+
+.admin-badge {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.logout-btn {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s;
+}
+
+.logout-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.logout-icon {
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/src/hello/src/components/TheAuth.vue b/src/hello/src/components/TheAuth.vue
index 1484e11f..c190b7ec 100644
--- a/src/hello/src/components/TheAuth.vue
+++ b/src/hello/src/components/TheAuth.vue
@@ -1,4 +1,4 @@
-<!-- src/components/Auth.vue -->
+<!-- src/components/TheAuth.vue -->
 <template>
   <div class="auth-container">
     <div class="auth-card">
@@ -10,46 +10,63 @@
       <!-- 登录/注册切换 -->
       <div class="auth-tabs">
         <button 
-          :class="['tab-button', { active: isLogin }]"
-          @click="isLogin = true"
+          :class="['tab-button', { active: isLogin && !isAdminLogin }]"
+          @click="isLogin = true; isAdminLogin = false"
         >
           登录
         </button>
         <button 
-          :class="['tab-button', { active: !isLogin }]"
-          @click="isLogin = false"
+          :class="['tab-button', { active: !isLogin && !isAdminLogin }]"
+          @click="isLogin = false; isAdminLogin = false"
         >
           注册
         </button>
+        <button 
+          :class="['tab-button admin-tab', { active: isAdminLogin }]"
+          @click="activateAdminLogin"
+        >
+          管理员登录
+        </button>
       </div>
 
-      <!-- 动态显示登录或注册表单 -->
-      <LoginForm v-if="isLogin" @success="handleAuthSuccess" />
-      <RegisterForm v-else @success="handleAuthSuccess" />
+      <!-- 动态显示登录、注册或管理员登录表单 -->
+      <LoginForm v-if="isLogin && !isAdminLogin" @success="handleAuthSuccess" />
+      <RegisterForm v-else-if="!isLogin && !isAdminLogin" @success="handleAuthSuccess" />
+      <AdminLogin v-else @success="handleAdminSuccess" />
     </div>
   </div>
 </template>
 
-<!-- 这里引用注册登录表单 -->
 <script>
 import LoginForm from './LoginForm.vue'
 import RegisterForm from './RegisterForm.vue'
+import AdminLogin from './AdminLogin.vue'
 
 export default {
   name: 'TheAuth',
   components: {
     LoginForm,
-    RegisterForm
+    RegisterForm,
+    AdminLogin
   },
   data() {
     return {
-      isLogin: true  // 默认显示登录表单
+      isLogin: true,  // 默认显示登录表单
+      isAdminLogin: false  // 是否显示管理员登录
     }
   },
   methods: {
     handleAuthSuccess(userData) {
       // 认证成功，通知父组件
       this.$emit('auth-success', userData)
+    },
+    handleAdminSuccess(adminData) {
+      // 管理员登录成功
+      this.$emit('admin-success', adminData)
+    },
+    activateAdminLogin() {
+      this.isAdminLogin = true
+      this.isLogin = true // 保持isLogin为true，以便header显示正确的标题
     }
   }
 }
@@ -114,7 +131,16 @@ export default {
   font-weight: 600;
 }
 
+.tab-button.admin-tab.active {
+  color: #dc3545;
+  border-bottom-color: #dc3545;
+}
+
 .tab-button:hover {
   color: #667eea;
 }
+
+.tab-button.admin-tab:hover {
+  color: #dc3545;
+}
 </style>
\ No newline at end of file
diff --git a/src/hello/src/router/index.js b/src/hello/src/router/index.js
index 04407160..0c3b206a 100644
--- a/src/hello/src/router/index.js
+++ b/src/hello/src/router/index.js
@@ -6,7 +6,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const routerHistory = createWebHistory()
 
-//配置路由组件
+//配置路由组件, 确保组件名与路由名称不同
 const router = createRouter({
   history: routerHistory,
   routes: [
@@ -14,6 +14,18 @@ const router = createRouter({
       path: '/',
       redirect: '/chart-generator'
     },
+    {
+      path: '/admin',
+      name: 'Admin',
+      component: () => import('../Admin.vue'),
+      meta: { requiresAdmin: true } // 添加路由元信息
+    },
+    {
+      path: '/admin/feedback',
+      name: 'AdminFeedback',
+      component: () => import('../views/AdminFeedback.vue'),
+      meta: { requiresAdmin: true }
+    },
     {
       path: '/login',
       name: 'Login',
@@ -55,8 +67,8 @@ const router = createRouter({
       name: 'MyFeedback',
       component: () => import('../views/MyFeedback.vue')
     },
-
   ]
 })
 
-export default router
\ No newline at end of file
+
+export default router
diff --git a/src/hello/src/views/AdminFeedback.vue b/src/hello/src/views/AdminFeedback.vue
new file mode 100644
index 00000000..689eec3c
--- /dev/null
+++ b/src/hello/src/views/AdminFeedback.vue
@@ -0,0 +1,1361 @@
+<!-- 管理员反馈管理界面 -->
+ <!-- AdminFeedback.vue -->
+<template>
+  <div class="admin-feedback-container">
+    <!-- 标题区域 -->
+    <div class="header">
+      <h1><i class="fas fa-comments"></i> 反馈管理</h1>
+      <p class="subtitle">管理系统用户提交的反馈和建议</p>
+    </div>
+
+    <!-- 统计卡片 -->
+    <div class="stats-cards">
+      <div class="stat-card total">
+        <div class="stat-icon">
+          <i class="fas fa-inbox"></i>
+        </div>
+        <div class="stat-info">
+          <h3>{{ totalFeedbacks }}</h3>
+          <p>总反馈数</p>
+        </div>
+      </div>
+      <div class="stat-card pending">
+        <div class="stat-icon">
+          <i class="fas fa-clock"></i>
+        </div>
+        <div class="stat-info">
+          <h3>{{ pendingFeedbacks }}</h3>
+          <p>待处理</p>
+        </div>
+      </div>
+      <div class="stat-card replied">
+        <div class="stat-icon">
+          <i class="fas fa-check-circle"></i>
+        </div>
+        <div class="stat-info">
+          <h3>{{ repliedFeedbacks }}</h3>
+          <p>已回复</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 筛选工具栏 -->
+    <div class="filter-toolbar">
+      <div class="filter-group">
+        <label for="typeFilter"><i class="fas fa-filter"></i> 反馈类型</label>
+        <select id="typeFilter" v-model="filters.type" @change="loadFeedbacks">
+          <option value="">全部类型</option>
+          <option value="suggestion">功能建议</option>
+          <option value="ui">界面优化</option>
+          <option value="bug">产品bug</option>
+          <option value="other">其他问题</option>
+        </select>
+      </div>
+
+      <!-- <div class="filter-group">
+        <label for="statusFilter"><i class="fas fa-tag"></i> 回复状态</label>
+        <select id="statusFilter" v-model="filters.status" @change="loadFeedbacks">
+          <option value="">全部状态</option>
+          <option value="pending">待回复</option>
+          <option value="replied">已回复</option>
+        </select>
+      </div> -->
+
+      <div class="filter-group">
+        <label for="dateFilter"><i class="fas fa-calendar"></i> 时间范围</label>
+        <select id="dateFilter" v-model="filters.dateRange" @change="loadFeedbacks">
+          <option value="">全部时间</option>
+          <option value="today">今天</option>
+          <option value="week">本周</option>
+          <option value="month">本月</option>
+        </select>
+      </div>
+
+      <!-- <div class="search-box">
+        <input 
+          type="text" 
+          v-model="filters.search" 
+          placeholder="搜索用户名或反馈内容..."
+          @input="onSearchInput"
+        >
+        <i class="fas fa-search"></i>
+      </div> -->
+    </div>
+
+    <!-- 反馈表格 -->
+    <div class="table-container">
+      <div class="table-header">
+        <h3><i class="fas fa-list"></i> 反馈列表</h3>
+        <div class="table-actions">
+          <button class="btn-refresh" @click="loadFeedbacks" :disabled="loading">
+            <i class="fas fa-sync-alt" :class="{ 'fa-spin': loading }"></i> 刷新
+          </button>
+        </div>
+      </div>
+
+      <div class="table-responsive">
+        <table class="feedback-table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>用户</th>
+              <th>类型</th>
+              <th>内容</th>
+              <th>状态</th>
+              <th>提交时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="feedback in feedbacks" :key="feedback.feedback_id">
+              <td>#{{ feedback.feedback_id }}</td>
+              <td>{{ feedback.username }}</td>
+              <td>
+                <span class="type-badge" :class="getTypeClass(feedback.type)">
+                  {{ getTypeLabel(feedback.type) }}
+                </span>
+              </td>
+              <td class="content-cell">
+                <div class="content-preview">
+                  {{ truncateContent(feedback.content) }}
+                </div>
+              </td>
+              <td>
+                <span class="status-badge" :class="{ 'answered': feedback.answer }">
+                  {{ feedback.answer ? '已回复' : '待回复' }}
+                </span>
+              </td>
+              <td>{{ formatDate(feedback.feedback_time) }}</td>
+              <td class="actions-cell">
+                <button 
+                  class="btn-view" 
+                  @click="viewFeedback(feedback.feedback_id)"
+                  title="查看详情"
+                >
+                  <p class="fas fa-eye">🔎</p>
+                </button>
+                <button 
+                  class="btn-delete" 
+                  @click="confirmDelete(feedback.feedback_id)"
+                  title="删除反馈"
+                  v-if="!feedback.answer"
+                >
+                  <p class="fas fa-trash-alt">🗑️</p>
+                </button>
+                <!-- <button 
+                  class="btn-reply" 
+                  @click="replyFeedback(feedback.feedback_id)"
+                  title="回复"
+                  v-if="!feedback.answer"
+                >
+                  <p class="fas fa-reply">✍️</p>
+                </button> -->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- 空状态 -->
+        <div v-if="feedbacks.length === 0 && !loading" class="empty-state">
+          <i class="fas fa-inbox"></i>
+          <h4>暂无反馈数据</h4>
+          <p>当前筛选条件下没有找到反馈记录</p>
+        </div>
+
+        <!-- 加载状态 -->
+        <div v-if="loading" class="loading-state">
+          <i class="fas fa-spinner fa-spin"></i>
+          <p>加载中...</p>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination" v-if="totalPages > 1">
+        <button 
+          class="page-btn" 
+          @click="prevPage" 
+          :disabled="currentPage === 1"
+        >
+          <i class="fas fa-chevron-left"></i>
+        </button>
+        
+        <span class="page-info">
+          第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+        </span>
+        
+        <button 
+          class="page-btn" 
+          @click="nextPage" 
+          :disabled="currentPage === totalPages"
+        >
+          <i class="fas fa-chevron-right"></i>
+        </button>
+        
+        <div class="page-size">
+          <select v-model="pageSize" @change="changePageSize">
+            <option value="10">10 条/页</option>
+            <option value="20">20 条/页</option>
+            <option value="50">50 条/页</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 反馈详情弹窗 -->
+    <div v-if="showDetailModal" class="modal-overlay" @click.self="closeDetailModal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3><i class="fas fa-file-alt"></i> 反馈详情</h3>
+          <button class="btn-close" @click="closeDetailModal">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        
+        <div class="modal-body">
+          <div v-if="currentFeedback">
+            <div class="detail-section">
+              <h4><i class="fas fa-info-circle"></i> 基本信息</h4>
+              <div class="detail-grid">
+                <div class="detail-item">
+                  <label>反馈ID</label>
+                  <span>#{{ currentFeedback.feedback_id }}</span>
+                </div>
+                <div class="detail-item">
+                  <label>提交用户</label>
+                  <span>{{ currentFeedback.username }}</span>
+                </div>
+                <div class="detail-item">
+                  <label>反馈类型</label>
+                  <span class="type-badge" :class="getTypeClass(currentFeedback.type)">
+                    {{ getTypeLabel(currentFeedback.type) }}
+                  </span>
+                </div>
+                <div class="detail-item">
+                  <label>提交时间</label>
+                  <span>{{ formatDate(currentFeedback.feedback_time) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="detail-section">
+              <h4><i class="fas fa-comment"></i> 反馈内容</h4>
+              <div class="content-box">
+                {{ currentFeedback.content }}
+              </div>
+            </div>
+
+            <div class="detail-section" v-if="currentFeedback.answer">
+              <h4><i class="fas fa-reply"></i> 管理员回复</h4>
+              <div class="reply-box">
+                <div class="reply-header">
+                  <span class="reply-time">
+                    {{ formatDate(currentFeedback.answer_time) }}
+                  </span>
+                </div>
+                <div class="reply-content">
+                  {{ currentFeedback.answer }}
+                </div>
+              </div>
+            </div>
+
+            <div class="detail-section" v-else>
+              <h4><i class="fas fa-reply"></i> 回复反馈</h4>
+              <textarea 
+                v-model="replyContent" 
+                placeholder="请输入回复内容..."
+                rows="4"
+                maxlength="500"
+              ></textarea>
+              <div class="char-count">
+                {{ replyContent.length }}/500
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-cancel" @click="closeDetailModal">
+            取消
+          </button>
+          <button 
+            class="btn-submit" 
+            @click="submitReply"
+            :disabled="!replyContent.trim()"
+            v-if="!currentFeedback.answer"
+          >
+            提交回复
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 删除确认弹窗 -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="closeDeleteModal">
+      <div class="confirm-modal">
+        <div class="confirm-header">
+          <i class="fas fa-exclamation-triangle warning-icon"></i>
+          <h3>确认删除</h3>
+        </div>
+        
+        <div class="confirm-body">
+          <p>确定要删除反馈 #{{ feedbackToDelete }} 吗？此操作无法撤销。</p>
+        </div>
+        
+        <div class="confirm-footer">
+          <button class="btn-cancel" @click="closeDeleteModal">
+            取消
+          </button>
+          <button class="btn-confirm" @click="deleteFeedback">
+            确认删除
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 消息提示 -->
+    <div 
+      v-if="showMessage" 
+      class="message-toast" 
+      :class="messageType"
+    >
+      <i :class="messageIcon"></i>
+      <span>{{ messageText }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AdminFeedback',
+  data() {
+    return {
+      // 反馈列表数据
+      feedbacks: [],
+      loading: false,
+      
+      // 分页数据
+      currentPage: 1,
+      pageSize: 10,
+      totalItems: 0,
+      
+      // 筛选条件
+      filters: {
+        type: '',
+        status: '',
+        dateRange: '',
+        search: ''
+      },
+      
+      // 统计信息
+      totalFeedbacks: 0,
+      pendingFeedbacks: 0,
+      repliedFeedbacks: 0,
+      
+      // 详情弹窗数据
+      showDetailModal: false,
+      currentFeedback: null,
+      replyContent: '',
+      
+      // 删除确认弹窗
+      showDeleteModal: false,
+      feedbackToDelete: null,
+      
+      // 消息提示
+      showMessage: false,
+      messageText: '',
+      messageType: '',
+      messageIcon: '',
+      
+      // 防抖定时器
+      searchTimer: null
+    }
+  },
+  
+  computed: {
+    totalPages() {
+      return Math.ceil(this.totalItems / this.pageSize)
+    }
+  },
+  
+  mounted() {
+    this.loadFeedbacks()
+    this.loadStats()
+  },
+  
+  methods: {
+    // 获取认证token（从MyFeedback.vue复制）
+    getAuthToken() {
+      // 优先获取管理员token
+      const adminToken = localStorage.getItem('adminToken')
+      if (adminToken && adminToken !== 'null' && adminToken !== 'undefined') {
+        return adminToken.replace(/^["']|["']$/g, '').trim()
+      }
+      
+      // 如果管理员token不存在，再尝试其他可能的用户token（作为备用）
+      const possibleTokens = [
+        localStorage.getItem('token'),
+        sessionStorage.getItem('token'),
+        localStorage.getItem('authToken'),
+        sessionStorage.getItem('authToken'),
+        localStorage.getItem('userToken'), 
+        sessionStorage.getItem('userToken')
+      ]
+      
+      for (let token of possibleTokens) {
+        if (token && token !== 'null' && token !== 'undefined') {
+          return token.replace(/^["']|["']$/g, '').trim()
+        }
+      }
+              
+      return null
+    },
+    
+    // 加载反馈列表
+    async loadFeedbacks() {
+      this.loading = true
+      try {
+        const token = this.getAuthToken()
+        if (!token) {
+          this.showMessageFunc('请先登录', 'error')
+          return
+        }
+        
+        // 构建查询参数
+        const params = new URLSearchParams({
+          page: this.currentPage,
+          limit: this.pageSize
+        })
+        
+        if (this.filters.type) params.append('type', this.filters.type)
+        
+        const response = await fetch(`http://localhost:3000/api/feedback?${params}`, {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        })
+        
+        if (!response.ok) throw new Error('请求失败')
+        
+        const result = await response.json()
+        
+        if (result.success) {
+          this.feedbacks = result.data
+          this.totalItems = result.pagination.total
+        } else {
+          throw new Error(result.message)
+        }
+      } catch (error) {
+        console.error('加载反馈列表失败:', error)
+        this.showMessageFunc('加载失败: ' + error.message, 'error')
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    // 加载统计数据
+    async loadStats() {
+      try {
+        const token = this.getAuthToken()
+        if (!token) return
+        
+        // 这里可以调用单独的统计接口，或者通过现有接口计算
+        // 暂时使用现有的列表接口获取统计数据
+        const response = await fetch('http://localhost:3000/api/feedback?limit=1000', {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        })
+        
+        if (response.ok) {
+          const result = await response.json()
+          if (result.success) {
+            const allFeedbacks = result.data
+            this.totalFeedbacks = allFeedbacks.length
+            this.pendingFeedbacks = allFeedbacks.filter(f => !f.answer).length
+            this.repliedFeedbacks = allFeedbacks.filter(f => f.answer).length
+          }
+        }
+      } catch (error) {
+        console.error('加载统计数据失败:', error)
+      }
+    },
+    
+    // 查看反馈详情
+    async viewFeedback(feedbackId) {
+      try {
+        const token = this.getAuthToken()
+        if (!token) return
+        
+        const response = await fetch(`http://localhost:3000/api/feedback/${feedbackId}`, {
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        })
+        
+        if (!response.ok) throw new Error('请求失败')
+        
+        const result = await response.json()
+        
+        if (result.success) {
+          this.currentFeedback = result.data
+          this.replyContent = result.data.answer || ''
+          this.showDetailModal = true
+        } else {
+          throw new Error(result.message)
+        }
+      } catch (error) {
+        console.error('获取反馈详情失败:', error)
+        this.showMessageFunc('获取详情失败: ' + error.message, 'error')
+      }
+    },
+    
+    // 提交回复
+    async submitReply() {
+    if (!this.replyContent.trim()) {
+      this.showMessageFunc('请输入回复内容', 'error')
+      return
+    }
+    
+    try {
+      const token = this.getAuthToken()
+      if (!token) {
+        this.showMessageFunc('请先登录', 'error')
+        return
+      }
+      
+      const response = await fetch(`http://localhost:3000/api/feedback/${this.currentFeedback.feedback_id}/reply`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          answer: this.replyContent
+        })
+      })
+      
+      const result = await response.json()
+      
+      if (!response.ok) {
+        throw new Error(result.message || '回复失败')
+      }
+      
+      if (result.success) {
+        this.showMessageFunc('回复成功', 'success')
+        
+        // 更新当前反馈数据
+        this.currentFeedback.answer = result.data.answer
+        this.currentFeedback.answer_time = result.data.answer_time
+        
+        // 刷新列表和统计
+        this.loadFeedbacks()
+        this.loadStats()
+        
+        // 这里可以选择是否立即关闭弹窗，或者保持弹窗显示更新后的回复
+        // this.closeDetailModal()
+      } else {
+        throw new Error(result.message)
+      }
+      
+    } catch (error) {
+      console.error('回复失败:', error)
+      this.showMessageFunc('回复失败: ' + error.message, 'error')
+    }
+    },
+    
+    // 确认删除
+    confirmDelete(feedbackId) {
+      this.feedbackToDelete = feedbackId
+      this.showDeleteModal = true
+    },
+    
+    // 删除反馈
+    async deleteFeedback() {
+      try {
+        const token = this.getAuthToken()
+        if (!token) return
+        
+        const response = await fetch(`http://localhost:3000/api/feedback/${this.feedbackToDelete}`, {
+          method: 'DELETE',
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        })
+        
+        if (!response.ok) throw new Error('请求失败')
+        
+        const result = await response.json()
+        
+        if (result.success) {
+          this.showMessageFunc('删除成功', 'success')
+          this.closeDeleteModal()
+          this.loadFeedbacks()
+          this.loadStats()
+        } else {
+          throw new Error(result.message)
+        }
+      } catch (error) {
+        console.error('删除失败:', error)
+        this.showMessageFunc('删除失败: ' + error.message, 'error')
+      }
+    },
+    
+    // 搜索输入防抖
+    onSearchInput() {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = setTimeout(() => {
+        this.loadFeedbacks()
+      }, 500)
+    },
+    
+    // 分页方法
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--
+        this.loadFeedbacks()
+      }
+    },
+    
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++
+        this.loadFeedbacks()
+      }
+    },
+    
+    changePageSize() {
+      this.currentPage = 1
+      this.loadFeedbacks()
+    },
+    
+    // 工具方法
+    getTypeLabel(type) {
+      const typeMap = {
+        suggestion: '功能建议',
+        ui: '界面优化',
+        bug: '产品bug',
+        other: '其他问题'
+      }
+      return typeMap[type] || type
+    },
+    
+    getTypeClass(type) {
+      return `type-${type}`
+    },
+    
+    truncateContent(content, length = 50) {
+      if (!content) return ''
+      return content.length > length ? content.substring(0, length) + '...' : content
+    },
+    
+    formatDate(dateString) {
+      if (!dateString) return ''
+      const date = new Date(dateString)
+      return date.toLocaleString('zh-CN')
+    },
+    
+    // 关闭弹窗
+    closeDetailModal() {
+      this.showDetailModal = false
+      this.currentFeedback = null
+      this.replyContent = ''
+    },
+    
+    closeDeleteModal() {
+      this.showDeleteModal = false
+      this.feedbackToDelete = null
+    },
+    
+    // 显示消息
+    showMessageFunc(text, type) {
+      this.messageText = text
+      this.messageType = type
+      this.showMessage = true
+      
+      if (type === 'success') {
+        this.messageIcon = 'fas fa-check-circle'
+      } else {
+        this.messageIcon = 'fas fa-exclamation-circle'
+      }
+      
+      setTimeout(() => {
+        this.showMessage = false
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.admin-feedback-container {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* 标题区域 */
+.header {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.header h1 {
+  color: #2c3e50;
+  font-size: 36px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.subtitle {
+  color: #7f8c8d;
+  font-size: 16px;
+}
+
+/* 统计卡片 */
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+}
+
+.stat-card.total {
+  border-left: 5px solid #3498db;
+}
+
+.stat-card.pending {
+  border-left: 5px solid #e74c3c;
+}
+
+.stat-card.replied {
+  border-left: 5px solid #2ecc71;
+}
+
+.stat-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.total .stat-icon {
+  background: rgba(52, 152, 219, 0.1);
+  color: #3498db;
+}
+
+.pending .stat-icon {
+  background: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+}
+
+.replied .stat-icon {
+  background: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
+}
+
+.stat-info h3 {
+  font-size: 32px;
+  margin-bottom: 4px;
+  color: #2c3e50;
+}
+
+.stat-info p {
+  color: #7f8c8d;
+  font-size: 14px;
+}
+
+/* 筛选工具栏 */
+.filter-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.filter-group {
+  flex: 1;
+  min-width: 180px;
+}
+
+.filter-group label {
+  display: block;
+  margin-bottom: 8px;
+  color: #2c3e50;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filter-group select {
+  width: 100%;
+  padding: 10px;
+  border: 2px solid #eaeaea;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+.filter-group select:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.search-box {
+  position: relative;
+  flex: 2;
+  min-width: 280px;
+}
+
+.search-box input {
+  width: 100%;
+  padding: 10px 40px 10px 16px;
+  border: 2px solid #eaeaea;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.search-box i {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #95a5a6;
+}
+
+/* 表格容器 */
+.table-container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.table-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.table-header h3 {
+  color: #2c3e50;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-refresh {
+  padding: 8px 16px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.3s;
+}
+
+.btn-refresh:hover:not(:disabled) {
+  background: #2980b9;
+}
+
+.btn-refresh:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 表格样式 */
+.table-responsive {
+  overflow-x: auto;
+}
+
+.feedback-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.feedback-table th {
+  background: #f8f9fa;
+  padding: 16px;
+  text-align: left;
+  font-weight: 600;
+  color: #2c3e50;
+  border-bottom: 2px solid #eee;
+}
+
+.feedback-table td {
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  vertical-align: middle;
+}
+
+.feedback-table tbody tr:hover {
+  background: #f8f9fa;
+}
+
+/* 徽章样式 */
+.type-badge {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.type-suggestion {
+  background: rgba(52, 152, 219, 0.1);
+  color: #3498db;
+  border: 1px solid rgba(52, 152, 219, 0.2);
+}
+
+.type-ui {
+  background: rgba(155, 89, 182, 0.1);
+  color: #9b59b6;
+  border: 1px solid rgba(155, 89, 182, 0.2);
+}
+
+.type-bug {
+  background: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+  border: 1px solid rgba(231, 76, 60, 0.2);
+}
+
+.type-other {
+  background: rgba(241, 196, 15, 0.1);
+  color: #f39c12;
+  border: 1px solid rgba(241, 196, 15, 0.2);
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  background: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+  border: 1px solid rgba(231, 76, 60, 0.2);
+}
+
+.status-badge.answered {
+  background: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
+  border: 1px solid rgba(46, 204, 113, 0.2);
+}
+
+/* 操作按钮 */
+.actions-cell {
+  white-space: nowrap;
+}
+
+.actions-cell button {
+  padding: 8px 12px;  /* 增加内边距 */
+  margin: 0 4px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
+  /* 添加以下样式确保图标显示 */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;  /* 确保按钮有足够宽度 */
+  height: 36px;     /* 确保按钮有足够高度 */
+}
+
+/* 为图标添加具体样式 */
+.actions-cell button i {
+  font-size: 14px;  /* 明确设置图标大小 */
+  display: inline-block;
+}
+
+.btn-view {
+  background: rgba(52, 152, 219, 0.1);
+  color: #3498db;
+}
+
+.btn-view:hover {
+  background: rgba(52, 152, 219, 0.2);
+}
+
+.btn-delete {
+  background: rgba(231, 76, 60, 0.1);
+  color: #e74c3c;
+}
+
+.btn-delete:hover {
+  background: rgba(231, 76, 60, 0.2);
+}
+
+.btn-reply {
+  background: rgba(46, 204, 113, 0.1);
+  color: #2ecc71;
+}
+
+.btn-reply:hover {
+  background: rgba(46, 204, 113, 0.2);
+}
+
+/* 空状态和加载状态 */
+.empty-state,
+.loading-state {
+  padding: 60px 20px;
+  text-align: center;
+  color: #95a5a6;
+}
+
+.empty-state i,
+.loading-state i {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.empty-state h4 {
+  margin-bottom: 8px;
+  color: #7f8c8d;
+}
+
+/* 分页 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  gap: 20px;
+  border-top: 1px solid #eee;
+}
+
+.page-btn {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.page-btn:hover:not(:disabled) {
+  background: #f8f9fa;
+  border-color: #3498db;
+  color: #3498db;
+}
+
+.page-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-info {
+  color: #7f8c8d;
+}
+
+.page-size select {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 700px;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(50px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.modal-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #95a5a6;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.btn-close:hover {
+  color: #e74c3c;
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.detail-section {
+  margin-bottom: 24px;
+}
+
+.detail-section h4 {
+  color: #2c3e50;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-item label {
+  color: #7f8c8d;
+  font-size: 14px;
+}
+
+.content-box,
+.reply-box {
+  background: #f8f9fa;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #eee;
+}
+
+.reply-header {
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.reply-time {
+  color: #7f8c8d;
+  font-size: 14px;
+}
+
+.modal-footer {
+  padding: 20px 24px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.btn-cancel,
+.btn-submit {
+  padding: 10px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.3s;
+}
+
+.btn-cancel {
+  background: #f8f9fa;
+  border: 1px solid #ddd;
+  color: #7f8c8d;
+}
+
+.btn-cancel:hover {
+  background: #e9ecef;
+}
+
+.btn-submit {
+  background: #3498db;
+  border: none;
+  color: white;
+}
+
+.btn-submit:hover:not(:disabled) {
+  background: #2980b9;
+}
+
+.btn-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 确认弹窗 */
+.confirm-modal {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 400px;
+  animation: slideUp 0.3s ease;
+}
+
+.confirm-header {
+  padding: 24px;
+  text-align: center;
+  border-bottom: 1px solid #eee;
+}
+
+.warning-icon {
+  font-size: 48px;
+  color: #e74c3c;
+  margin-bottom: 16px;
+}
+
+.confirm-body {
+  padding: 24px;
+  text-align: center;
+}
+
+.confirm-footer {
+  padding: 20px 24px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.btn-confirm {
+  background: #e74c3c;
+  color: white;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-confirm:hover {
+  background: #c0392b;
+}
+
+/* 消息提示 */
+.message-toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 16px 24px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  animation: slideInRight 0.3s ease;
+  z-index: 1001;
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+.message-toast.success {
+  background: #2ecc71;
+  color: white;
+}
+
+.message-toast.error {
+  background: #e74c3c;
+  color: white;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .admin-feedback-container {
+    padding: 16px;
+  }
+  
+  .stats-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .filter-toolbar {
+    flex-direction: column;
+  }
+  
+  .filter-group,
+  .search-box {
+    min-width: 100%;
+  }
+  
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .actions-cell {
+    display: flex;
+    gap: 8px;  /* 增加按钮间距 */
+  }
+  
+  .actions-cell button {
+    padding: 8px;
+    min-width: 36px;
+    height: 32px;
+    margin: 0;
+  }
+  
+  .actions-cell button i {
+    font-size: 12px;
+  }
+}
+</style>
\ No newline at end of file