diff --git a/vite/src/router/index.ts b/vite/src/router/index.ts
index bc0c2aac70b000e0dce82f7437dbd0ece67da9b8..95a1945480d903bc4726c7ef8193b5fd8c2967eb 100644
--- a/vite/src/router/index.ts
+++ b/vite/src/router/index.ts
@@ -2,52 +2,43 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/Home.vue'
 import Dish from '../views/Dish.vue'
 import Card from '../views/RouterCard.vue'
-import Admin from '@/views/Admin.vue';
-import Teacher from '@/views/Teacher.vue';
-import Student from '@/views/Student.vue';
+import Admin from '@/views/Admin.vue'
+import Teacher from '@/views/Teacher.vue'
+import Student from '@/views/Student.vue'
 
 const routes: Array<RouteRecordRaw> = [
-    {
-        path: '/',
-        name: 'home',
-        redirect: '/dish',
-        component: Home,
-
-        // 子路由
-        children: [
-            {
-                path: '/dish',
-                name: 'dish',
-                component: Dish
-            },
-            {
-                path: '/card',
-                name: 'card',
-                component: Card
-            },
-            {
-                 path: '/Admin',
-                name: 'Admin',
-                component: Admin
-             },
-            {
-                 path: '/Teacher',
-                name: 'Teacher',
-                component: Teacher
-             },
-            {
-                 path: '/Student',
-                name: 'Student',
-                component: Student
-             }
-        ]
-    },
-
+  {
+    path: '/',
+    name: 'home',
+    component: Home,
+    children: [
+      {
+        path: '', // 默认子路由，访问/时显示
+        name: 'home-default',
+        component: Admin
+      },
+      {
+        path: 'admin',
+        name: 'admin',
+        component: Admin
+      },
+      {
+        path: 'teacher',
+        name: 'teacher',
+        component: Teacher
+      },
+      {
+        path: 'student',
+        name: 'student',
+        component: Student
+      }
+    ]
+  }
 ]
 
 const router = createRouter({
-    history: createWebHashHistory(), // 最好使用WebHashHistory方式；如果使用WebHistory会非常麻烦，不建议使用这种方式
-    routes
+  history: createWebHashHistory(),
+  routes
 })
 
-export default router
+export default router
\ No newline at end of file
diff --git a/vite/src/views/Admin.vue b/vite/src/views/Admin.vue
index 31c0154d39b8e21225c564d601bc4faee0f3359a..fc95264426f95fbe917ff216c0c327267904f1d6 100644
--- a/vite/src/views/Admin.vue
+++ b/vite/src/views/Admin.vue
@@ -133,9 +133,11 @@
                   <thead class="bg-gray-50">
                     <tr>
                       <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请编号</th>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请类型</th>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请人</th>
-                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户Id</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程id</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库Id</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                       <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                       <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                     </tr>
@@ -143,12 +145,14 @@
                   <tbody class="bg-white divide-y divide-gray-200" id="authTableBody">
                     <tr v-for="(app, index) in authApplications" :key="index" class="table-row-hover">
                       <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ app.id }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.type }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.applicant }}</td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.time }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.userId }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.courseid }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.dataBaseId }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.description }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.createTime }}</td>
                       <td class="px-6 py-4 whitespace-nowrap">
-                        <span :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${app.statusClass}`">
-                          {{ app.status }}
+                        <span :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(app.status)}`">
+                          {{ getStatusText(app.status) }}
                         </span>
                       </td>
                       <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -169,21 +173,23 @@
                     
                     <!-- 筛选条件 -->
                     <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">申请类型</label>
-                        <select v-model="filterAuthType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                          <option value="">全部类型</option>
-                          <option value="学生自建数据库授权">学生自建数据库授权</option>
-                          <option value="教师自建数据库">教师自建数据库</option>
-                          <option value="公共数据库查看">公共数据库查看</option>
-                        </select>
-                      </div>
                       <div>
                         <label class="block text-sm font-medium text-gray-700 mb-1">申请状态</label>
                         <select v-model="filterAuthStatus" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                           <option value="">全部状态</option>
-                          <option value="待审核">待审核</option>
-                          <option value="审核中">审核中</option>
+                          <option value="0">已向老师发送申请但未同意</option>
+                          <option value="1">老师同意并且已向管理员发送申请但未授权</option>
+                          <option value="2">管理员审批成功整个流程完成</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">数据库类型</label>
+                        <select v-model="filterDbType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
+                          <option value="">全部类型</option>
+                          <option value="1">MySQL</option>
+                          <option value="2">PostgreSQL</option>
+                          <option value="3">SQL Server</option>
+                          <option value="4">Oracle</option>
                         </select>
                       </div>
                       <div>
@@ -203,9 +209,11 @@
                               <input type="checkbox" @change="toggleSelectAll" class="form-checkbox h-4 w-4 text-primary">
                             </th>
                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请编号</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请类型</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请人</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户Id</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程id</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库Id</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                           </tr>
                         </thead>
@@ -215,12 +223,14 @@
                               <input type="checkbox" :value="app.id" v-model="selectedAuthApplications" class="form-checkbox h-4 w-4 text-primary">
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ app.id }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.type }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.applicant }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.time }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.userId }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.courseid }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.dataBaseId }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.description }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.createTime }}</td>
                             <td class="px-6 py-4 whitespace-nowrap">
-                              <span :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${app.statusClass}`">
-                                {{ app.status }}
+                              <span :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(app.status)}`">
+                                {{ getStatusText(app.status) }}
                               </span>
                             </td>
                           </tr>
@@ -259,8 +269,8 @@
                       <thead class="bg-gray-50">
                         <tr>
                           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权ID</th>
-                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权类型</th>
                           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户/组</th>
+                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库ID</th>
                           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权时间</th>
                           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">到期时间</th>
                           <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
@@ -270,8 +280,8 @@
                       <tbody class="bg-white divide-y divide-gray-200">
                         <tr v-for="(item, index) in filteredAuthInfo" :key="index">
                           <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ item.id }}</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.type }}</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.user }}</td>
+                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.dataBaseId }}</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.authTime }}</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.expiryTime }}</td>
                           <td class="px-6 py-4 whitespace-nowrap">
@@ -375,8 +385,28 @@
                       <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                     </tr>
                   </thead>
-                  <tbody class="bg-white divide-y divide-gray-200" id="serverTableBody">
-                    <!-- 服务器记录将通过JS动态生成 -->
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr v-for="(server, index) in servers" :key="index" class="table-row-hover">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ server.id }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ server.name }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ server.ip }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ server.dbCount }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ server.userCount }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="w-full bg-gray-200 rounded-full h-2.5">
+                          <div :class="getResourceBarClass(server.usage)" class="h-2.5 rounded-full" :style="{ width: server.usage + '%' }"></div>
+                        </div>
+                        <span class="text-xs text-gray-500 ml-2">{{ server.usage }}%</span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline mr-3">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                        <button class="text-secondary hover:underline">
+                          <i class="fa fa-cog mr-1"></i> 配置
+                        </button>
+                      </td>
+                    </tr>
                   </tbody>
                 </table>
               </div>
@@ -442,8 +472,26 @@
                       <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                     </tr>
                   </thead>
-                  <tbody class="bg-white divide-y divide-gray-200" id="teachingDBTableBody">
-                    <!-- 教学数据库记录将通过JS动态生成 -->
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr v-for="(db, index) in teachingDBs" :key="index" class="table-row-hover">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ db.id }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ db.name }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ db.user }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ db.createTime }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ db.size }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ db.course }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline mr-3">
+                          <i class="fa fa-eye mr-1"></i> 查看
+                        </button>
+                        <button class="text-secondary hover:underline mr-3">
+                          <i class="fa fa-download mr-1"></i> 下载
+                        </button>
+                        <button class="text-danger hover:underline">
+                          <i class="fa fa-trash-o mr-1"></i> 删除
+                        </button>
+                      </td>
+                    </tr>
                   </tbody>
                 </table>
               </div>
@@ -512,9 +560,24 @@
         </div>
       </div>
     </div>
+
+    <!-- 提示信息组件 -->
+    <div id="notification" class="fixed top-4 right-4 z-50 max-w-sm w-full bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 translate-y-[-100px] opacity-0">
+      <div class="p-4 flex items-start">
+        <div id="notificationIcon" class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center bg-primary text-white">
+          <i class="fa fa-check"></i>
+        </div>
+        <div class="ml-3 flex-1">
+          <h3 id="notificationTitle" class="text-sm font-medium text-gray-900">操作成功</h3>
+          <div id="notificationMessage" class="mt-1 text-sm text-gray-500">申请已成功授权</div>
+        </div>
+        <button class="ml-auto flex-shrink-0 text-gray-400 hover:text-gray-500" @click="hideNotification">
+          <i class="fa fa-times"></i>
+        </button>
+      </div>
+    </div>
   </div>
 </template>
-
 <script>
 import { ref, onMounted } from 'vue';
 import Chart from 'chart.js/auto';
@@ -530,28 +593,106 @@ export default {
     
     // 授权申请数据
     const authApplications = ref([
-      { id: 'ManageAuth001-20250612', type: '学生自建数据库授权', applicant: '张三 (S2023001)', time: '2025-06-12 10:30', status: '待审核', statusClass: 'bg-yellow-100 text-yellow-800', purpose: '用于课程设计《电子商务数据分析》' },
-      { id: 'ManageAuth001-20250611', type: '教师自建数据库', applicant: '李四 (T2018005)', time: '2025-06-11 14:15', status: '待审核', statusClass: 'bg-yellow-100 text-yellow-800', purpose: '用于科研项目《机器学习数据预处理》' },
-      { id: 'ManageAuth001-20250610', type: '公共数据库查看', applicant: '王五 (S2023015)', time: '2025-06-10 09:45', status: '待审核', statusClass: 'bg-yellow-100 text-yellow-800', purpose: '查看经济类历史数据用于毕业论文' },
-      { id: 'ManageAuth001-20250609', type: '学生自建数据库授权', applicant: '赵六 (S2023032)', time: '2025-06-09 16:20', status: '审核中', statusClass: 'bg-blue-100 text-blue-800', purpose: '课程作业《数据库应用》实践' },
-      { id: 'ManageAuth001-20250608', type: '公共数据库查看', applicant: '钱七 (T2020012)', time: '2025-06-08 11:05', status: '已通过', statusClass: 'bg-green-100 text-green-800', purpose: '教学需要，查看学生实验数据' }
+      { 
+        id: 1001, 
+        userId: 2001, 
+        courseid: 3001, 
+        dataBaseId: 4001, 
+        description: '用于课程设计《电子商务数据分析》的用户行为分析', 
+        authorizedId: null, 
+        approverId: null, 
+        createTime: '2025-06-20 09:30', 
+        status: 0, 
+        approveTime: null, 
+        authorizedTime: null 
+      },
+      { 
+        id: 1002, 
+        userId: 2002, 
+        courseid: 3002, 
+        dataBaseId: 4002, 
+        description: '科研项目《大数据金融分析》的历史交易数据存储', 
+        authorizedId: null, 
+        approverId: null, 
+        createTime: '2025-06-19 14:15', 
+        status: 0, 
+        approveTime: null, 
+        authorizedTime: null 
+      },
+      { 
+        id: 1003, 
+        userId: 2003, 
+        courseid: 3003, 
+        dataBaseId: 4003, 
+        description: '《数据库原理》课程实验的学生成绩管理系统', 
+        authorizedId: null, 
+        approverId: null, 
+        createTime: '2025-06-18 16:45', 
+        status: 1, 
+        approveTime: '2025-06-19 09:20', 
+        authorizedTime: null 
+      },
+      { 
+        id: 1004, 
+        userId: 2004, 
+        courseid: 3004, 
+        dataBaseId: 4004, 
+        description: '《人工智能基础》课程的图像识别数据集', 
+        authorizedId: null, 
+        approverId: null, 
+        createTime: '2025-06-17 11:20', 
+        status: 1, 
+        approveTime: '2025-06-18 14:30', 
+        authorizedTime: null 
+      },
+      { 
+        id: 1005, 
+        userId: 2005, 
+        courseid: 3005, 
+        dataBaseId: 4005, 
+        description: '毕业设计《智慧城市交通流量预测》的实时数据采集', 
+        authorizedId: null, 
+        approverId: null, 
+        createTime: '2025-06-16 10:05', 
+        status: 2, 
+        approveTime: '2025-06-17 15:45', 
+        authorizedTime: '2025-06-18 09:10' 
+      }
     ]);
     
     // 批量授权相关数据
-    const filterAuthType = ref(''); // 筛选申请类型
     const filterAuthStatus = ref(''); // 筛选申请状态
+    const filterDbType = ref(''); // 筛选数据库类型
     const selectedAuthApplications = ref([]); // 选中的授权申请ID
     const filteredAuthApplications = ref([...authApplications.value]); // 筛选后的授权申请
     
     // 授权信息管理相关数据
     const searchKeyword = ref('');
     const authInfo = ref([
-      { id: 'AUTH-20250601', type: '数据库访问', user: '张三 (S2023001)', authTime: '2025-06-01', expiryTime: '2025-12-31', status: '有效', statusClass: 'bg-green-100 text-green-800' },
-      { id: 'AUTH-20250515', type: '服务器管理', user: '李四 (T2018005)', authTime: '2025-05-15', expiryTime: '2025-11-15', status: '有效', statusClass: 'bg-green-100 text-green-800' },
-      { id: 'AUTH-20250420', type: '数据备份', user: '教师组', authTime: '2025-04-20', expiryTime: '2025-10-20', status: '已过期', statusClass: 'bg-red-100 text-red-800' }
+      { id: 'AUTH-20250601', user: '张三 (S2023001)', dataBaseId: 4001, authTime: '2025-06-01', expiryTime: '2025-12-31', status: '有效', statusClass: 'bg-green-100 text-green-800' },
+      { id: 'AUTH-20250515', user: '李四 (T2018005)', dataBaseId: 4002, authTime: '2025-05-15', expiryTime: '2025-11-15', status: '有效', statusClass: 'bg-green-100 text-green-800' },
+      { id: 'AUTH-20250420', user: '教师组', dataBaseId: 4003, authTime: '2025-04-20', expiryTime: '2025-10-20', status: '已过期', statusClass: 'bg-red-100 text-red-800' }
     ]);
     const filteredAuthInfo = ref(authInfo.value);
     
+    // 服务器查询管理相关数据
+    const servers = ref([
+      { id: 'SERVER-01', name: '主教学服务器', ip: '192.168.1.101', dbCount: 24, userCount: 156, usage: 65 },
+      { id: 'SERVER-02', name: '科研服务器A', ip: '192.168.1.102', dbCount: 18, userCount: 89, usage: 82 },
+      { id: 'SERVER-03', name: '科研服务器B', ip: '192.168.1.103', dbCount: 12, userCount: 45, usage: 45 },
+      { id: 'SERVER-04', name: '实验服务器', ip: '192.168.1.104', dbCount: 32, userCount: 210, usage: 78 },
+      { id: 'SERVER-05', name: '备用服务器', ip: '192.168.1.105', dbCount: 5, userCount: 12, usage: 15 }
+    ]);
+    
+    // 教学数据库管理相关数据
+    const teachingDBs = ref([
+      { id: 'DB-2025001', name: '电子商务数据库', user: '张三 (S2023001)', createTime: '2025-06-01', size: '2.4GB', course: '电子商务数据分析' },
+      { id: 'DB-2025002', name: '金融交易数据', user: '李四 (S2023002)', createTime: '2025-05-15', size: '5.7GB', course: '大数据金融分析' },
+      { id: 'DB-2025003', name: '学生成绩管理', user: '王五 (S2023003)', createTime: '2025-04-20', size: '1.2GB', course: '数据库原理' },
+      { id: 'DB-2025004', name: '图像识别数据集', user: '赵六 (S2023004)', createTime: '2025-03-10', size: '8.3GB', course: '人工智能基础' },
+      { id: 'DB-2025005', name: '交通流量数据', user: '钱七 (S2023005)', createTime: '2025-02-15', size: '12.5GB', course: '智慧城市交通流量预测' }
+    ]);
+    
     // 导航菜单
     const mainNav = [
       { id: '授权功能', label: '授权功能', icon: 'fa-user-lock' },
@@ -584,7 +725,7 @@ export default {
     const openModal = (appId) => {
       const app = authApplications.value.find(a => a.id === appId);
       if (app) {
-        modalTitle.value = `审核 - ${app.type}`;
+        modalTitle.value = `审核 - 数据库创建申请`;
         modalContent.value = `
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
@@ -592,373 +733,430 @@ export default {
               <p class="text-base font-medium text-gray-900">${app.id}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">申请类型</h4>
-              <p class="text-base font-medium text-gray-900">${app.type}</p>
+              <h4 class="text-sm font-medium text-gray-500 mb-1">用户Id</h4>
+              <p class="text-base font-medium text-gray-900">${app.userId}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">申请人</h4>
-              <p class="text-base font-medium text-gray-900">${app.applicant}</p>
+              <h4 class="text-sm font-medium text-gray-500 mb-1">课程id</h4>
+              <p class="text-base font-medium text-gray-900">${app.courseid}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">申请时间</h4>
-              <p class="text-base font-medium text-gray-900">${app.time}</p>
+              <h4 class="text-sm font-medium text-gray-500 mb-1">数据库Id</h4>
+              <p class="text-base font-medium text-gray-900">${app.dataBaseId}</p>
             </div>
-            <div class="md:col-span-2">
-              <h4 class="text-sm font-medium text-gray-500 mb-1">申请用途</h4>
-              <p class="text-base text-gray-700">${app.purpose}</p>
+            <div>
+              <h4 class="text-sm font-medium text-gray-500 mb-1">描述</h4>
+              <p class="text-base font-medium text-gray-900">${app.description}</p>
+            </div>
+            <div>
+              <h4 class="text-sm font-medium text-gray-500 mb-1">创建时间</h4>
+              <p class="text-base font-medium text-gray-900">${app.createTime}</p>
+            </div>
+            <div>
+              <h4 class="text-sm font-medium text-gray-500 mb-1">状态</h4>
+              <p class="text-base font-medium text-gray-900">${getStatusText(app.status)}</p>
             </div>
-          </div>
-          <div class="mt-6">
-            <h4 class="text-sm font-medium text-gray-500 mb-2">审核意见</h4>
-            <textarea id="reviewComment" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入审核意见..."></textarea>
           </div>
         `;
         modalVisible.value = true;
-        
-        // 将申请ID存储到模态标题的dataset中，方便审核操作时获取
-        const modalTitleElement = document.querySelector('#modalTitle');
-        if (modalTitleElement) {
-          modalTitleElement.dataset.appId = appId;
-        }
       }
     };
-    
+
     // 关闭模态框
     const closeModal = () => {
       modalVisible.value = false;
-      
-      // 清空模态框内容
-      modalTitle.value = '';
-      modalContent.value = '';
-      
-      // 重置模态标题中的dataset
-      const modalTitleElement = document.querySelector('#modalTitle');
-      if (modalTitleElement) {
-        modalTitleElement.dataset.appId = '';
+    };
+
+    // 根据状态返回状态文本
+    const getStatusText = (status) => {
+      switch (status) {
+        case 0:
+          return '已向老师发送申请但未同意';
+        case 1:
+          return '老师同意并且已向管理员发送申请但未授权';
+        case 2:
+          return '管理员审批成功整个流程完成';
+        case 3:
+          return '已拒绝';
+        default:
+          return '未知状态';
       }
     };
-    
-    // 拒绝申请
-    const rejectApplication = () => {
-      closeModal();
-      alert('申请已拒绝');
+
+    // 根据状态返回状态类名
+    const getStatusClass = (status) => {
+      switch (status) {
+        case 0:
+          return 'bg-yellow-100 text-yellow-800';
+        case 1:
+          return 'bg-blue-100 text-blue-800';
+        case 2:
+          return 'bg-green-100 text-green-800';
+        case 3:
+          return 'bg-red-100 text-red-800';
+        default:
+          return 'bg-gray-100 text-gray-800';
+      }
     };
-    
-    // 批准申请
-    const approveApplication = () => {
-      modalVisible.value = false;
-      
-      // 获取当前审核的申请ID
-      const modalTitleElement = document.querySelector('#modalTitle');
-      if (modalTitleElement && modalTitleElement.dataset.appId) {
-        const appId = modalTitleElement.dataset.appId;
-        const app = authApplications.value.find(a => a.id === appId);
-        
-        if (app) {
-          // 更新授权状态
-          app.status = '已通过';
-          app.statusClass = 'bg-green-100 text-green-800';
-          
-          // 添加到授权信息列表
-          authInfo.value.push({
-            id: `AUTH-${new Date().getTime()}`,
-            type: app.type,
-            user: app.applicant.split(' ')[0],
-            authTime: new Date().toLocaleDateString(),
-            expiryTime: new Date(new Date().setMonth(new Date().getMonth() + 6)).toLocaleDateString(),
-            status: '有效',
-            statusClass: 'bg-green-100 text-green-800'
-          });
-          
-          // 更新筛选后的授权申请列表
-          const filteredAppIndex = filteredAuthApplications.value.findIndex(a => a.id === appId);
-          if (filteredAppIndex !== -1) {
-            filteredAuthApplications.value[filteredAppIndex].status = '已通过';
-            filteredAuthApplications.value[filteredAppIndex].statusClass = 'bg-green-100 text-green-800';
-          }
-          
-          alert('申请审核已通过');
-        }
+
+    // 根据资源使用率返回进度条颜色类
+    const getResourceBarClass = (usage) => {
+      if (usage < 50) {
+        return 'bg-green-500';
+      } else if (usage < 80) {
+        return 'bg-yellow-500';
+      } else {
+        return 'bg-red-500';
       }
     };
-    
+
     // 筛选授权申请
     const applyFilters = () => {
       filteredAuthApplications.value = authApplications.value.filter(app => {
-        const typeMatch = filterAuthType.value ? app.type === filterAuthType.value : true;
-        const statusMatch = filterAuthStatus.value ? app.status === filterAuthStatus.value : true;
-        return typeMatch && statusMatch;
+        const statusMatch = filterAuthStatus.value === '' || app.status.toString() === filterAuthStatus.value;
+        const dbTypeMatch = filterDbType.value === '' || app.dataBaseId.toString().endsWith(filterDbType.value);
+        return statusMatch && dbTypeMatch;
       });
     };
-    
-    // 切换全选状态
-    const toggleSelectAll = (event) => {
-      if (event.target.checked) {
-        filteredAuthApplications.value.forEach(app => {
-          if (!selectedAuthApplications.value.includes(app.id)) {
-            selectedAuthApplications.value.push(app.id);
-          }
-        });
-      } else {
-        filteredAuthApplications.value.forEach(app => {
-          const index = selectedAuthApplications.value.indexOf(app.id);
-          if (index !== -1) {
-            selectedAuthApplications.value.splice(index, 1);
-          }
-        });
-      }
+
+    // 筛选授权信息
+    const filterAuthInfo = () => {
+      filteredAuthInfo.value = authInfo.value.filter(item => {
+        return item.id.includes(searchKeyword.value) || item.user.includes(searchKeyword.value) || item.dataBaseId.toString().includes(searchKeyword.value);
+      });
     };
-    
-    // 执行批量授权
+
+    // 批量授权
     const executeBatchAuthorization = () => {
       if (selectedAuthApplications.value.length === 0) {
-        alert('请至少选择一个授权申请');
+        showNotification('错误', '请选择要授权的申请', 'error');
         return;
       }
       
-      selectedAuthApplications.value.forEach(appId => {
-        const app = authApplications.value.find(a => a.id === appId);
+      // 更新申请状态
+      authApplications.value = authApplications.value.map(app => {
+        if (selectedAuthApplications.value.includes(app.id)) {
+          return { 
+            ...app, 
+            status: 2, 
+            authorizedId: 1001, 
+            authorizedTime: new Date().toISOString().slice(0, 19).replace('T', ' ') 
+          };
+        }
+        return app;
+      });
+      
+      // 更新授权信息
+      selectedAuthApplications.value.forEach(id => {
+        const app = authApplications.value.find(a => a.id === id);
         if (app) {
-          // 更新授权状态
-          app.status = '已通过';
-          app.statusClass = 'bg-green-100 text-green-800';
-          
-          // 添加到授权信息列表
           authInfo.value.push({
             id: `AUTH-${new Date().getTime()}`,
-            type: app.type,
-            user: app.applicant.split(' ')[0],
-            authTime: new Date().toLocaleDateString(),
-            expiryTime: new Date(new Date().setMonth(new Date().getMonth() + 6)).toLocaleDateString(),
+            user: `用户${app.userId}`,
+            dataBaseId: app.dataBaseId,
+            authTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+            expiryTime: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().slice(0, 19).replace('T', ' '),
             status: '有效',
             statusClass: 'bg-green-100 text-green-800'
           });
         }
       });
       
-      // 清空选中状态并重新筛选
-      selectedAuthApplications.value = [];
+      // 重新应用筛选
       applyFilters();
+      filterAuthInfo();
       
-      alert(`已成功批量授权 ${selectedAuthApplications.value.length} 个申请`);
-    };
-    
-    // 筛选授权信息
-    const filterAuthInfo = () => {
-      filteredAuthInfo.value = authInfo.value.filter(item => {
-        return Object.values(item).some(value => {
-          return String(value).toLowerCase().includes(searchKeyword.value.toLowerCase());
-        });
-      });
+      // 更新待审核申请数量
+      updatePendingAuthCount();
+      
+      // 清空选中项
+      selectedAuthApplications.value = [];
+      
+      // 显示成功通知
+      showNotification('成功', `已成功授权 ${selectedAuthApplications.value.length} 个申请`, 'success');
     };
-    
+
     // 删除授权信息
     const deleteAuthInfo = (index) => {
       authInfo.value.splice(index, 1);
       filterAuthInfo();
+      showNotification('成功', '授权信息已撤销', 'success');
     };
-    
-    // 处理清理操作
-    const handleCleanup = () => {
-      const term = document.getElementById('cleanTerm').value;
-      const course = document.getElementById('cleanCourse').value;
-      const size = document.getElementById('cleanSize').value;
+
+    // 同意申请
+    const approveApplication = () => {
+      // 获取当前查看的申请ID
+      const appId = parseInt(modalContent.value.match(/<p class="text-base font-medium text-gray-900">(\d+)<\/p>/)[1]);
       
-      if (!term || !course || !size) {
-        alert('请选择学期、课程并设置数据量阈值');
-        return;
+      // 更新申请状态
+      const appIndex = authApplications.value.findIndex(a => a.id === appId);
+      if (appIndex !== -1) {
+        authApplications.value[appIndex] = {
+          ...authApplications.value[appIndex],
+          status: 2,
+          authorizedId: 1001,
+          authorizedTime: new Date().toISOString().slice(0, 19).replace('T', ' ')
+        };
+        
+        // 添加到授权信息列表
+        authInfo.value.push({
+          id: `AUTH-${new Date().getTime()}`,
+          user: `用户${authApplications.value[appIndex].userId}`,
+          dataBaseId: authApplications.value[appIndex].dataBaseId,
+          authTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          expiryTime: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().slice(0, 19).replace('T', ' '),
+          status: '有效',
+          statusClass: 'bg-green-100 text-green-800'
+        });
+        
+        // 重新应用筛选
+        applyFilters();
+        filterAuthInfo();
+        
+        // 更新待审核申请数量
+        updatePendingAuthCount();
+        
+        // 关闭模态框
+        closeModal();
+        
+        // 显示成功通知
+        showNotification('成功', '申请已成功授权', 'success');
       }
+    };
+
+    // 拒绝申请
+    const rejectApplication = () => {
+      // 获取当前查看的申请ID
+      const appId = parseInt(modalContent.value.match(/<p class="text-base font-medium text-gray-900">(\d+)<\/p>/)[1]);
       
-      if (confirm(`确定要删除 ${course} 课程在 ${term} 学期中超过 ${size}GB 的自建数据库吗？此操作不可撤销。`)) {
-        console.log(`执行清理: 学期=${term}, 课程=${course}, 阈值=${size}GB`);
-        alert(`已成功清理 ${course} 课程在 ${term} 学期中超过 ${size}GB 的自建数据库`);
+      // 更新申请状态
+      const appIndex = authApplications.value.findIndex(a => a.id === appId);
+      if (appIndex !== -1) {
+        authApplications.value[appIndex] = {
+          ...authApplications.value[appIndex],
+          status: 3, // 3表示已拒绝
+          authorizedId: null,
+          authorizedTime: null
+        };
+        
+        // 重新应用筛选
+        applyFilters();
+        
+        // 更新待审核申请数量
+        updatePendingAuthCount();
+        
+        // 关闭模态框
+        closeModal();
+        
+        // 显示成功通知
+        showNotification('成功', '申请已拒绝', 'warning');
       }
     };
-    
-    // 组件挂载时初始化图表和数据
-    onMounted(() => {
-      const serverCtx = document.getElementById('serverChart').getContext('2d');
-      new Chart(serverCtx, {
-        type: 'bar',
-        data: {
-          labels: ['服务器A', '服务器B', '服务器C', '服务器D', '服务器E'],
-          datasets: [ {
-            label: 'CPU使用率 (%)',
-            data: [65, 59, 80, 81, 56],
-            backgroundColor: 'rgba(22, 93, 255, 0.7)',
-            borderColor: 'rgba(22, 93, 255, 1)',
-            borderWidth: 1
-          }, {
-            label: '内存使用率 (%)',
-            data: [28, 48, 40, 19, 66],
-            backgroundColor: 'rgba(0, 180, 42, 0.7)',
-            borderColor: 'rgba(0, 180, 42, 1)',
-            borderWidth: 1
-          } ]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          scales: {
-            y: {
-              beginAtZero: true,
-              max: 100
-            }
-          }
-        }
-      });
+
+    // 切换全选状态
+    const toggleSelectAll = (event) => {
+      if (event.target.checked) {
+        selectedAuthApplications.value = filteredAuthApplications.value
+          .filter(app => app.status === 1) // 只选择状态为1的申请
+          .map(app => app.id);
+      } else {
+        selectedAuthApplications.value = [];
+      }
+    };
+
+    // 执行清理操作
+    const handleCleanup = () => {
+      // 模拟清理操作
+      setTimeout(() => {
+        showNotification('成功', '清理操作已执行', 'success');
+      }, 1000);
+    };
+
+    // 显示通知
+    const showNotification = (title, message, type = 'success') => {
+      const notification = document.getElementById('notification');
+      const notificationTitle = document.getElementById('notificationTitle');
+      const notificationMessage = document.getElementById('notificationMessage');
+      const notificationIcon = document.getElementById('notificationIcon');
       
-      // 模拟加载服务器数据
-      const serverTableBody = document.getElementById('serverTableBody');
-      const servers = [
-        { id: 'DB-SRV-001', name: '教学服务器A', ip: '192.168.1.101', dbCount: 12, userCount: 45, usage: '68%' },
-        { id: 'DB-SRV-002', name: '教学服务器B', ip: '192.168.1.102', dbCount: 8, userCount: 32, usage: '45%' },
-        { id: 'DB-SRV-003', name: '科研服务器C', ip: '192.168.1.103', dbCount: 15, userCount: 28, usage: '78%' },
-        { id: 'DB-SRV-004', name: '公共服务器D', ip: '192.168.1.104', dbCount: 5, userCount: 67, usage: '55%' },
-        { id: 'DB-SRV-005', name: '测试服务器E', ip: '192.168.1.105', dbCount: 3, userCount: 12, usage: '30%' }
-      ];
+      notificationTitle.textContent = title;
+      notificationMessage.textContent = message;
       
-      servers.forEach(server => {
-        const row = document.createElement('tr');
-        row.className = 'table-row-hover';
-        row.innerHTML = `
-          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${server.id}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${server.name}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${server.ip}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${server.dbCount}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${server.userCount}</td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            <div class="flex items-center">
-              <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
-                <div class="bg-primary h-2 rounded-full" style="width: ${server.usage}"></div>
-              </div>
-              <span class="text-xs font-medium text-gray-500">${server.usage}</span>
-            </div>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-            <button class="text-primary hover:underline mr-3">
-              <i class="fa fa-edit mr-1"></i> 配置
-            </button>
-            <button class="text-info hover:underline">
-              <i class="fa fa-info-circle mr-1"></i> 详情
-            </button>
-          </td>
-        `;
-        serverTableBody.appendChild(row);
-      });
+      // 设置图标和颜色
+      notificationIcon.className = 'flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center';
+      if (type === 'success') {
+        notificationIcon.classList.add('bg-green-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-check"></i>';
+      } else if (type === 'error') {
+        notificationIcon.classList.add('bg-red-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-times"></i>';
+      } else if (type === 'warning') {
+        notificationIcon.classList.add('bg-yellow-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-exclamation-triangle"></i>';
+      } else if (type === 'info') {
+        notificationIcon.classList.add('bg-blue-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-info-circle"></i>';
+      }
       
-      // 模拟加载教学数据库数据
-      const teachingDBTableBody = document.getElementById('teachingDBTableBody');
-      const teachingDBs = [
-        { id: 'DB-2025-001', name: '电商数据分析', user: '张三 (S2023001)', createTime: '2025-03-15', size: '2.4GB', course: '电子商务数据分析' },
-        { id: 'DB-2025-002', name: '机器学习数据集', user: '李四 (T2018005)', createTime: '2025-02-20', size: '8.7GB', course: '机器学习数据预处理' },
-        { id: 'DB-2025-003', name: '经济历史数据', user: '王五 (S2023015)', createTime: '2025-04-05', size: '5.2GB', course: '经济数据分析' },
-        { id: 'DB-2025-004', name: '学生信息管理', user: '赵六 (S2023032)', createTime: '2025-03-28', size: '1.8GB', course: '数据库应用' },
-        { id: 'DB-2025-005', name: '科研实验数据', user: '钱七 (T2020012)', createTime: '2025-01-15', size: '12.5GB', course: '人工智能基础' }
-      ];
+      // 显示通知
+      notification.classList.remove('translate-y-[-100px]', 'opacity-0');
       
-      teachingDBs.forEach(db => {
-        const row = document.createElement('tr');
-        row.className = 'table-row-hover';
-        row.innerHTML = `
-          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${db.id}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${db.name}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${db.user}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${db.createTime}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${db.size}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${db.course}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-            <button class="text-primary hover:underline mr-3">
-              <i class="fa fa-edit mr-1"></i> 编辑
-            </button>
-            <button class="text-danger hover:underline">
-              <i class="fa fa-trash-o mr-1"></i> 删除
-            </button>
-          </td>
-        `;
-        teachingDBTableBody.appendChild(row);
-      });
+      // 3秒后自动隐藏
+      setTimeout(hideNotification, 3000);
+    };
+
+    // 隐藏通知
+    const hideNotification = () => {
+      const notification = document.getElementById('notification');
+      notification.classList.add('translate-y-[-100px]', 'opacity-0');
+    };
+
+    // 更新待审核申请数量
+    const updatePendingAuthCount = () => {
+      const pendingCount = authApplications.value.filter(app => app.status === 0 || app.status === 1).length;
+      document.getElementById('pendingAuth').textContent = pendingCount;
+    };
+
+    // 初始化服务器资源使用图表
+    const initServerChart = () => {
+      const ctx = document.getElementById('serverChart');
+      if (ctx) {
+        // 确保图表容器存在
+        const chart = new Chart(ctx, {
+          type: 'line',
+          data: {
+            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            datasets: [
+              {
+                label: 'CPU使用率(%)',
+                data: [45, 52, 68, 61, 56, 42, 38],
+                borderColor: '#3b82f6',
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                tension: 0.3,
+                fill: true
+              },
+              {
+                label: '内存使用率(%)',
+                data: [65, 72, 78, 81, 76, 62, 58],
+                borderColor: '#f59e0b',
+                backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                tension: 0.3,
+                fill: true
+              },
+              {
+                label: '磁盘使用率(%)',
+                data: [55, 57, 60, 63, 65, 67, 68],
+                borderColor: '#10b981',
+                backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                tension: 0.3,
+                fill: true
+              }
+            ]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                position: 'top',
+              },
+              tooltip: {
+                mode: 'index',
+                intersect: false,
+              }
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                max: 100,
+                ticks: {
+                  callback: function(value) {
+                    return value + '%';
+                  }
+                }
+              }
+            }
+          }
+        });
+      }
+    };
+
+    // 页面加载完成后初始化
+    onMounted(() => {
+      // 初始化服务器资源使用图表
+      initServerChart();
+      
+      // 更新待审核申请数量
+      updatePendingAuthCount();
     });
 
     return {
       sidebarVisible,
       currentSection,
+      mainNav,
       activeTab,
-      modalVisible,
-      modalTitle,
-      modalContent,
       authApplications,
-      filterAuthType,
       filterAuthStatus,
+      filterDbType,
       selectedAuthApplications,
       filteredAuthApplications,
-      searchKeyword,
       authInfo,
       filteredAuthInfo,
-      mainNav,
+      servers,
+      teachingDBs,
+      modalVisible,
+      modalTitle,
+      modalContent,
+      searchKeyword,
       toggleSidebar,
       navigateToSection,
       switchTab,
       openModal,
       closeModal,
-      rejectApplication,
-      approveApplication,
+      getStatusText,
+      getStatusClass,
+      getResourceBarClass,
       applyFilters,
-      toggleSelectAll,
-      executeBatchAuthorization,
       filterAuthInfo,
+      executeBatchAuthorization,
       deleteAuthInfo,
-      handleCleanup
+      approveApplication,
+      rejectApplication,
+      toggleSelectAll,
+      handleCleanup,
+      showNotification,
+      hideNotification
     };
   }
-};
-</script>
-
-<style scoped>
-body {
-  font-family: 'Inter', system-ui, sans-serif;
-}
-
-.content-auto {
-  content-visibility: auto;
 }
-
+</script>
+<style>
+/* 自定义样式 */
 .sidebar-icon {
   display: flex;
   align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding: 0.5rem 1rem;
   color: #6b7280;
-  transition-property: background-color, color;
-  transition-duration: 200ms;
+  transition: all 0.2s ease;
 }
 
 .sidebar-icon:hover {
-  background-color: #e8f3ff;
-  color: #165dff;
+  background-color: #f3f4f6;
+  color: #1e40af;
 }
 
 .sidebar-icon-active {
   display: flex;
   align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  background-color: #e8f3ff;
-  color: #165dff;
-  font-weight: 500;
+  padding: 0.5rem 1rem;
+  background-color: #dbeafe;
+  color: #1e40af;
+  border-right: 3px solid #1e40af;
 }
 
-.card-shadow {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.table-row-hover {
-  transition-property: background-color;
-  transition-duration: 150ms;
+.tab-active {
+  color: #1e40af;
+  border-bottom: 2px solid #1e40af;
 }
 
 .table-row-hover:hover {
@@ -966,124 +1164,46 @@ body {
 }
 
 .btn-primary {
-  background-color: #165dff;
+  background-color: #1e40af;
   color: white;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.375rem;
-  transition-property: background-color;
-  transition-duration: 200ms;
+  transition: all 0.2s ease;
 }
 
 .btn-primary:hover {
-  background-color: rgba(22, 93, 255, 0.9);
+  background-color: #1e3a8a;
 }
 
 .btn-secondary {
-  background-color: white;
-  border-width: 1px;
-  border-color: #d1d5db;
-  color: #374151;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  background-color: #f3f4f6;
+  color: #4b5563;
+  padding: 0.5rem 1rem;
   border-radius: 0.375rem;
-  transition-property: background-color;
-  transition-duration: 200ms;
+  transition: all 0.2s ease;
 }
 
 .btn-secondary:hover {
-  background-color: #f9fafb;
+  background-color: #e5e7eb;
 }
 
 .btn-danger {
-  background-color: #f53f3f;
+  background-color: #dc2626;
   color: white;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.375rem;
-  transition-property: background-color;
-  transition-duration: 200ms;
+  transition: all 0.2s ease;
 }
 
 .btn-danger:hover {
-  background-color: rgba(245, 63, 63, 0.9);
-}
-
-.hidden {
-  display: none;
-}
-
-.tab-active {
-  border-bottom: 2px solid #165dff;
-  color: #165dff;
-}
-
-.status-badge {
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.bg-primary-light {
-  background-color: #e8f3ff;
-}
-
-.text-primary {
-  color: #165dff;
-}
-
-.text-danger {
-  color: #f53f3f;
-}
-
-.text-warning {
-  color: #ff7d00;
+  background-color: #b91c1c;
 }
 
-.text-info {
-  color: #0084ff;
-}
-
-.bg-warning {
-  background-color: #ff7d00;
-}
-
-.bg-warning-5 {
-  background-color: rgba(255, 125, 0, 0.05);
-}
-
-.border-warning-20 {
-  border-color: rgba(255, 125, 0, 0.2);
-}
-
-.form-checkbox {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 1rem;
-  width: 1rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.25rem;
-  background-color: white;
-  transition: all 0.2s ease;
-}
-
-.form-checkbox:checked {
-  background-color: #165dff;
-  border-color: #165dff;
-  background-image: url("data:image/svg+xml,%3i class='fa fa-check'/%3e");
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: contain;
+.card-shadow {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
-.whitespace-nowrap {
-  white-space: nowrap;
+.hidden {
+  display: none;
 }
 </style>
\ No newline at end of file
diff --git a/vite/src/views/Home.vue b/vite/src/views/Home.vue
index bb47e0383ba7e6eff38ea51845c94b34b846cafa..2110a97ff37bcd96f57c2c1d859bbdcd1ba1f73e 100644
--- a/vite/src/views/Home.vue
+++ b/vite/src/views/Home.vue
@@ -1,63 +1,48 @@
 <template>
   <!-- 整体页面 -->
   <a-layout style="min-height: 100vh">
-    <!-- 左侧侧栏 -->
-    <a-layout-sider v-model:collapsed="collapsed" collapsible>
-      <div class="logo" style="padding: 20px;">
-        <img src="@/assets/feiyuan.jpg" style="width: 100%;" />
+    <!-- 顶部导航 -->
+    <a-layout-header class="header">
+      <div class="logo" style="float: left; width: 200px; padding: 10px;">
+        <img src="@/assets/feiyuan.jpg" style="height: 55px;" alt="公司Logo" />
       </div>
-      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
+      
+      <div class="user-info" v-if="getUserName()">
+        <span style="font-size: 23px;"> 当前用户：{{ getUserName() }} </span>
+      </div>
+      
+      <a-menu 
+        v-model:selectedKeys="selectedKeys" 
+        theme="dark" 
+        mode="horizontal"
+        style="float: left; width: calc(100% - 220px); line-height: 64px;"
+      >
         <a-menu-item key="1">
-          <pie-chart-outlined />
-          <span @click=" router.push('/dish');">菜品管理</span>
-        </a-menu-item>
-
-        <!-- <a-menu-item key="2">
-          <smile-outlined />
-          <span @click="showRouter = false"> 父子组件切换页面</span>
-        </a-menu-item> -->
-
-        <a-menu-item key="2">
-          <smile-outlined />
-          <span @click=" router.push('/card');"> 路由切换页面</span>
-        </a-menu-item>
-
-
-          <a-menu-item key="3">
           <database-outlined />  <!-- 使用数据库图标 -->
           <span @click="router.push('/Admin');">管理员端数据库管理</span>
         </a-menu-item>
-
-           <a-menu-item key="4">
+        
+        <a-menu-item key="2">
           <database-outlined />  <!-- 使用数据库图标 -->
           <span @click="router.push('/Teacher');">教师端数据库管理</span>
         </a-menu-item>
-
-                   <a-menu-item key="5">
+        
+        <a-menu-item key="3">
           <database-outlined />  <!-- 使用数据库图标 -->
           <span @click="router.push('/Student');">学生端数据库管理</span>
         </a-menu-item>
       </a-menu>
-    </a-layout-sider>
-
+    </a-layout-header>
 
-    <!-- 右侧页面 -->
+    <!-- 主体内容 -->
     <a-layout>
-      <!-- 右侧头部 -->
-      <a-layout-header class="header">
-        <div class="user-info" v-if="getUserName()">
-          <span style="font-size: 23px;"> 当前用户：{{ getUserName() }} </span>
-        </div>
-      </a-layout-header>
-
       <!-- 右侧主要内容 -->
-      <a-layout-content style="margin: 0 16px">
+      <a-layout-content style="margin: 16px; padding: 16px; background: #fff;">
         <!-- 显示子路由 -->
         <router-view :key="$route.fullPath"></router-view>
-        <!-- <PCCard v-else></PCCard> -->
       </a-layout-content>
 
-      <!-- 右侧底部 -->
+      <!-- 底部 -->
       <a-layout-footer style="text-align: center">
         copyright © 2008-2023 粤ICP备10066694号 版权所有：广州市飞元信息科技有限公司
       </a-layout-footer>
@@ -65,42 +50,39 @@
   </a-layout>
 </template>
 
-
 <script lang="ts" setup>
 import { getUserName } from '@/base/constant';
-// 导入新增的数据库图标
-import { SmileOutlined, PieChartOutlined, DatabaseOutlined } from '@ant-design/icons-vue';
+import { DatabaseOutlined } from '@ant-design/icons-vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-const router = useRouter();
 
-const collapsed = ref<boolean>(false);
+const router = useRouter();
 const selectedKeys = ref<string[]>(['1']);
 </script>
 
-
-
 <style scoped>
 .header {
   background: linear-gradient(to right, white, rgb(117, 128, 205), #4384df);
   padding: 0 !important;
-  display: flex;
-  margin-bottom: 5px;
   height: 75px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
-  span {
-    font-size: 30px;
-    font-weight: 700;
-    font-family: 楷体;
-    margin-top: 5px;
-  }
-
+.logo {
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .user-info {
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
   padding-right: 20px;
+  color: white;
+  font-weight: bold;
+}
+
+.ant-menu-horizontal {
+  border-bottom: none !important;
 }
 </style>
\ No newline at end of file
diff --git a/vite/src/views/Student.vue b/vite/src/views/Student.vue
index eb15b909f2a150f271f01a422ba27cce5cf8a480..f93beb120a6b7b84d170db8a3cf80bbce9380105 100644
--- a/vite/src/views/Student.vue
+++ b/vite/src/views/Student.vue
@@ -1,3 +1,4 @@
+
 <template>
   <div class="font-inter text-neutral min-h-screen flex flex-col">
     <!-- 顶部导航栏 -->
@@ -120,9 +121,9 @@
               <thead class="bg-gray-50">
                 <tr>
                   <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请编号</th>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库名称</th>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属课程</th>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库Id</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程id</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                   <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                   <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                 </tr>
@@ -130,22 +131,19 @@
               <tbody class="bg-white divide-y divide-gray-200">
                 <tr v-for="(apply, index) in applyList" :key="apply.id">
                   <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ apply.id }}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ apply.name }}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    {{ getCourseName(apply.course) || '-' }}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ apply.date }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ apply.dataBaseId }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ apply.courseid }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ apply.createTime }}</td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <span 
                       :class="{
                         'status-badge': true,
-                        'bg-green-100 text-green-800': apply.status === '已通过',
-                        'bg-yellow-100 text-yellow-800': apply.status === '审核中',
-                        'bg-blue-100 text-blue-800': apply.status === '待提交',
-                        'bg-red-100 text-red-800': apply.status === '已拒绝'
+                        'bg-green-100 text-green-800': apply.status === 2,
+                        'bg-yellow-100 text-yellow-800': apply.status === 1,
+                        'bg-blue-100 text-blue-800': apply.status === 0
                       }"
                     >
-                      {{ apply.status }}
+                      {{ getStatusText(apply.status) }}
                     </span>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap text-sm">
@@ -183,52 +181,141 @@
 
         <!-- 公共数据库查询模块 -->
         <div v-show="activeTab === '公共数据库'" class="p-6">
-          <!-- 查询按钮 -->
-          <div class="flex justify-end mb-6">
-            <button 
-              @click="newQuery" 
-              class="bg-green-500 hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors flex items-center"
-            >
-              <i class="fa fa-search mr-2"></i> 新建查询
-            </button>
+          <!-- 查询表单 -->
+          <div class="bg-gray-50 p-4 rounded-lg mb-6">
+            <h3 class="font-medium text-gray-900 mb-4">数据库查询</h3>
+            <form @submit.prevent="searchDatabases" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                <label for="dbId" class="block text-sm font-medium text-gray-700 mb-1">数据库ID</label>
+                <input 
+                  v-model="searchForm.dbId" 
+                  type="number" 
+                  id="dbId" 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  placeholder="输入数据库ID"
+                >
+              </div>
+              <div>
+                <label for="dbName" class="block text-sm font-medium text-gray-700 mb-1">数据库名称</label>
+                <input 
+                  v-model="searchForm.name" 
+                  type="text" 
+                  id="dbName" 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  placeholder="输入数据库名称"
+                >
+              </div>
+              <div>
+                <label for="dbType" class="block text-sm font-medium text-gray-700 mb-1">数据库类型</label>
+                <select 
+                  v-model="searchForm.type" 
+                  id="dbType" 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                >
+                  <option value="">全部类型</option>
+                  <option value="mysql">MySQL</option>
+                  <option value="oracle">Oracle</option>
+                  <option value="postgresql">PostgreSQL</option>
+                  <option value="mongodb">MongoDB</option>
+                  <option value="redis">Redis</option>
+                </select>
+              </div>
+              <div>
+                <label for="dbOwner" class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
+                <input 
+                  v-model="searchForm.owner" 
+                  type="text" 
+                  id="dbOwner" 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  placeholder="输入所有者名称"
+                >
+              </div>
+              <div>
+                <label for="dbStatus" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
+                <select 
+                  v-model="searchForm.status" 
+                  id="dbStatus" 
+                  class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                >
+                  <option value="">全部状态</option>
+                  <option value="active">活跃</option>
+                  <option value="inactive">非活跃</option>
+                  <option value="maintenance">维护中</option>
+                </select>
+              </div>
+              <div class="flex items-end">
+                <button 
+                  type="submit" 
+                  class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-lg transition-colors flex items-center w-full justify-center"
+                >
+                  <i class="fa fa-search mr-2"></i> 查询
+                </button>
+              </div>
+            </form>
           </div>
 
-          <!-- 查询列表 -->
+          <!-- 查询结果统计 -->
+          <div class="flex justify-between items-center mb-4">
+            <div class="text-sm text-gray-500">
+              找到 <span class="font-medium text-gray-900">{{ filteredDatabases.length }}</span> 个结果
+            </div>
+            <div class="flex space-x-2">
+              <button class="text-gray-500 hover:text-gray-700" @click="sortBy('id')">
+                <i class="fa fa-sort"></i> ID
+              </button>
+              <button class="text-gray-500 hover:text-gray-700" @click="sortBy('name')">
+                <i class="fa fa-sort"></i> 名称
+              </button>
+              <button class="text-gray-500 hover:text-gray-700" @click="sortBy('size')">
+                <i class="fa fa-sort"></i> 大小
+              </button>
+              <button class="text-gray-500 hover:text-gray-700" @click="sortBy('updatedAt')">
+                <i class="fa fa-sort"></i> 更新时间
+              </button>
+            </div>
+          </div>
+
+          <!-- 查询结果列表 -->
           <div class="overflow-x-auto">
             <table class="min-w-full divide-y divide-gray-200">
               <thead class="bg-gray-50">
                 <tr>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">查询编号</th>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">查询主题</th>
-                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">查询时间</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库ID</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库名称</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所有者</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
+                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
                   <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                   <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                 </tr>
               </thead>
               <tbody class="bg-white divide-y divide-gray-200">
-                <tr v-for="(query, index) in queryList" :key="query.id">
-                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ query.id }}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ query.topic }}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ query.date }}</td>
+                <tr v-for="(database, index) in filteredDatabases" :key="database.id">
+                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ database.id }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ database.name }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ database.type }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ database.owner }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ database.size }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ database.updatedAt }}</td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <span 
                       :class="{
                         'status-badge': true,
-                        'bg-green-100 text-green-800': query.status === '成功',
-                        'bg-yellow-100 text-yellow-800': query.status === '处理中',
-                        'bg-blue-100 text-blue-800': query.status === '待处理',
-                        'bg-red-100 text-red-800': query.status === '失败'
+                        'bg-green-100 text-green-800': database.status === 'active',
+                        'bg-yellow-100 text-yellow-800': database.status === 'maintenance',
+                        'bg-gray-100 text-gray-800': database.status === 'inactive'
                       }"
                     >
-                      {{ query.status }}
+                      {{ getDatabaseStatusText(database.status) }}
                     </span>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap text-sm">
-                    <button @click="viewQuery(query)" class="text-primary hover:text-primary/80 mr-3">
-                      <i class="fa fa-eye"></i> 查看
+                    <button @click="connectDatabase(database)" class="text-primary hover:text-primary/80 mr-3">
+                      <i class="fa fa-link"></i> 连接
                     </button>
-                    <button @click="exportQuery(query)" class="text-gray-600 hover:text-gray-900">
-                      <i class="fa fa-download"></i> 导出
+                    <button @click="viewDatabaseDetails(database)" class="text-gray-600 hover:text-gray-900">
+                      <i class="fa fa-info-circle"></i> 详情
                     </button>
                   </td>
                 </tr>
@@ -237,15 +324,22 @@
           </div>
 
           <!-- 空状态提示 -->
-          <div v-if="queryList.length === 0" class="py-12 text-center">
+          <div v-if="filteredDatabases.length === 0 && !isSearching" class="py-12 text-center">
+            <i class="fa fa-database text-5xl text-gray-300 mb-4"></i>
+            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无可用的公共数据库</h3>
+            <p class="text-gray-500 mb-6">请联系管理员获取更多数据库资源</p>
+          </div>
+
+          <!-- 搜索无结果提示 -->
+          <div v-if="filteredDatabases.length === 0 && isSearching" class="py-12 text-center">
             <i class="fa fa-search text-5xl text-gray-300 mb-4"></i>
-            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无公共数据库查询记录</h3>
-            <p class="text-gray-500 mb-6">点击"新建查询"按钮开始查询公共数据库</p>
+            <h3 class="text-lg font-medium text-gray-900 mb-2">没有找到匹配的数据库</h3>
+            <p class="text-gray-500 mb-6">请尝试使用不同的搜索条件</p>
             <button 
-              @click="newQuery" 
-              class="bg-green-500 hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors"
+              @click="resetSearch" 
+              class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-lg transition-colors"
             >
-              新建查询
+              重置搜索
             </button>
           </div>
         </div>
@@ -272,85 +366,40 @@
         <form @submit.prevent="submitApplication" class="p-6">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
-              <label for="applyDatabaseName" class="block text-sm font-medium text-gray-700 mb-1">数据库名称 <span class="text-red-500">*</span></label>
+              <label for="applyDatabaseId" class="block text-sm font-medium text-gray-700 mb-1">数据库Id <span class="text-red-500">*</span></label>
               <input 
-                v-model="applicationForm.name" 
-                type="text" 
-                id="applyDatabaseName" 
-                required
-                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                placeholder="输入数据库名称"
-              >
-              <p v-if="!applicationForm.name && formSubmitted" class="text-red-500 text-xs mt-1">请输入数据库名称</p>
-            </div>
-            <div>
-              <label for="applyDatabaseType" class="block text-sm font-medium text-gray-700 mb-1">数据库类型 <span class="text-red-500">*</span></label>
-              <select 
-                v-model="applicationForm.type" 
-                id="applyDatabaseType" 
+                v-model="applicationForm.dataBaseId" 
+                type="number" 
+                id="applyDatabaseId" 
                 required
                 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                placeholder="输入数据库Id"
               >
-                <option value="">请选择数据库类型</option>
-                <option value="relational">关系型数据库</option>
-                <option value="non-relational">非关系型数据库</option>
-                <option value="graph">图数据库</option>
-                <option value="time-series">时序数据库</option>
-              </select>
-              <p v-if="!applicationForm.type && formSubmitted" class="text-red-500 text-xs mt-1">请选择数据库类型</p>
+              <p v-if="!applicationForm.dataBaseId && formSubmitted" class="text-red-500 text-xs mt-1">请输入数据库Id</p>
             </div>
             <div>
-              <label for="course" class="block text-sm font-medium text-gray-700 mb-1">所属课程 <span class="text-red-500">*</span></label>
-              <select 
-                v-model="applicationForm.course" 
-                id="course" 
+              <label for="courseid" class="block text-sm font-medium text-gray-700 mb-1">课程id <span class="text-red-500">*</span></label>
+              <input 
+                v-model="applicationForm.courseid" 
+                type="number" 
+                id="courseid" 
                 required
                 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                placeholder="输入课程id"
               >
-                <option value="">请选择课程</option>
-                <option value="database-design">数据库设计</option>
-                <option value="data-structure">数据结构</option>
-                <option value="operating-system">操作系统</option>
-                <option value="computer-network">计算机网络</option>
-              </select>
-              <p v-if="!applicationForm.course && formSubmitted" class="text-red-500 text-xs mt-1">请选择所属课程</p>
+              <p v-if="!applicationForm.courseid && formSubmitted" class="text-red-500 text-xs mt-1">请输入课程id</p>
             </div>
             <div class="md:col-span-2">
-              <label for="applyDatabasePurpose" class="block text-sm font-medium text-gray-700 mb-1">数据库用途 <span class="text-red-500">*</span></label>
+              <label for="applyDescription" class="block text-sm font-medium text-gray-700 mb-1">描述 <span class="text-red-500">*</span></label>
               <textarea 
-                v-model="applicationForm.purpose" 
-                id="applyDatabasePurpose" 
+                v-model="applicationForm.description" 
+                id="applyDescription" 
                 rows="3" 
                 required
                 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 placeholder="描述数据库的用途..."
               ></textarea>
-              <p v-if="!applicationForm.purpose && formSubmitted" class="text-red-500 text-xs mt-1">请描述数据库用途</p>
-            </div>
-            <div>
-              <label for="applyDataVolume" class="block text-sm font-medium text-gray-700 mb-1">数据量预估 (GB) <span class="text-red-500">*</span></label>
-              <input 
-                v-model.number="applicationForm.dataVolume" 
-                type="number" 
-                id="applyDataVolume" 
-                min="1" 
-                required
-                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-              >
-              <p v-if="(applicationForm.dataVolume < 1 || isNaN(applicationForm.dataVolume)) && formSubmitted" class="text-red-500 text-xs mt-1">数据量至少为1GB</p>
-            </div>
-            <div>
-              <label for="applyResourceQuota" class="block text-sm font-medium text-gray-700 mb-1">申请资源配额 <span class="text-red-500">*</span></label>
-              <select 
-                v-model="applicationForm.resourceQuota" 
-                id="applyResourceQuota" 
-                required
-                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-              >
-                <option value="基础版">基础版</option>
-                <option value="标准版">标准版</option>
-                <option value="高级版">高级版</option>
-              </select>
+              <p v-if="!applicationForm.description && formSubmitted" class="text-red-500 text-xs mt-1">请描述数据库用途</p>
             </div>
           </div>
           <div class="mt-8 flex justify-end space-x-4">
@@ -372,6 +421,74 @@
       </div>
     </div>
 
+    <!-- 模态框 - 数据库连接 -->
+    <div v-if="showConnectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
+          <h3 class="text-xl font-bold text-gray-900">连接到数据库: {{ selectedDatabase.name }}</h3>
+          <button @click="closeConnectModal" class="text-gray-400 hover:text-gray-500">
+            <i class="fa fa-times text-xl"></i>
+          </button>
+        </div>
+        <div class="p-6">
+          <p class="text-gray-600 mb-4">请确认数据库连接信息并输入您的凭据</p>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">数据库ID</label>
+              <p class="bg-gray-50 p-2 rounded-md text-sm">{{ selectedDatabase.id }}</p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">数据库名称</label>
+              <p class="bg-gray-50 p-2 rounded-md text-sm">{{ selectedDatabase.name }}</p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">类型</label>
+              <p class="bg-gray-50 p-2 rounded-md text-sm">{{ selectedDatabase.type }}</p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
+              <p class="bg-gray-50 p-2 rounded-md text-sm">{{ selectedDatabase.owner }}</p>
+            </div>
+          </div>
+          <form @submit.prevent="connectToDatabase">
+            <div class="mb-4">
+              <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
+              <input 
+                type="text" 
+                id="username" 
+                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                placeholder="输入用户名"
+              >
+            </div>
+            <div class="mb-6">
+              <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
+              <input 
+                type="password" 
+                id="password" 
+                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                placeholder="输入密码"
+              >
+            </div>
+            <div class="flex justify-end space-x-4">
+              <button 
+                @click="closeConnectModal" 
+                type="button" 
+                class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                取消
+              </button>
+              <button 
+                type="submit" 
+                class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-lg transition-colors"
+              >
+                连接
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
     <!-- 模态框 - 查询详情 -->
     <div v-if="showQueryDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
       <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
@@ -426,82 +543,130 @@
         </div>
       </div>
     </div>
+
+    <!-- 通知组件 -->
+    <div id="notification" class="fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-[-100px] opacity-0 flex items-center space-x-4">
+      <div id="notificationIcon"></div>
+      <div>
+        <h4 id="notificationTitle" class="font-medium"></h4>
+        <p id="notificationMessage" class="text-sm"></p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'StudentDatabaseManager',
-  props: {
-    title: {
-      type: String,
-      default: '学生端数据库管理工具'
-    },
-    searchPlaceholder: {
-      type: String,
-      default: '搜索功能...'
-    },
-    userAvatar: {
-      type: String,
-      default: 'https://randomuser.me/api/portraits/men/32.jpg'
-    },
-    userName: {
-      type: String,
-      default: '张三同学'
-    },
-    footerText1: {
-      type: String,
-      default: '学生端数据库管理工具 &copy; 2025 版权所有'
-    },
-    footerText2: {
-      type: String,
-      default: '技术支持: 教务处信息化中心'
-    },
-    // 数据概览
-    applyCount: {
-      type: Number,
-      default: 0
-    },
-    queryCount: {
-      type: Number,
-      default: 0
-    },
-    resourceUsage: {
-      type: Number,
-      default: 0
-    },
-    pendingTasks: {
-      type: Number,
-      default: 0
-    },
-    // 自建数据库申请列表
-    applyList: {
-      type: Array,
-      default: () => []
-    },
-    // 公共数据库查询列表
-    queryList: {
-      type: Array,
-      default: () => []
-    }
-  },
   data() {
     return {
+      title: '学生端数据库管理工具',
+      searchPlaceholder: '搜索功能...',
+      userAvatar: 'https://picsum.photos/200/200?random=1',
+      userName: '张三同学',
+      footerText1: '学生端数据库管理工具 &copy; 2025 版权所有',
+      footerText2: '技术支持: 教务处信息化中心',
       activeTab: '自建数据库',
       showApplyModal: false,
+      showConnectModal: false,
       showQueryDetailModal: false,
-      editingApply: false,
+      editingApply: null,
       formSubmitted: false,
       applicationForm: {
+        id: null,
+        userId: null,
+        courseid: null,
+        dataBaseId: null,
+        description: '',
+        authorizedId: null,
+        approverId: null,
+        createTime: null,
+        status: 0,
+        approveTime: null,
+        authorizedTime: null
+      },
+      selectedDatabase: {},
+      selectedQuery: {},
+      // 搜索表单
+      searchForm: {
+        dbId: '',
         name: '',
         type: '',
-        course: '', // 新增课程字段
-        purpose: '',
-        dataVolume: 1,
-        resourceQuota: '基础版'
+        owner: '',
+        status: ''
       },
-      selectedQuery: {},
-      editIndex: -1
+      // 模拟数据
+      applyList: [
+        { id: 1001, userId: 2001, courseid: 3001, dataBaseId: 4001, description: '用于课程设计的用户行为分析', status: 0, createTime: '2025-06-20 09:30' },
+        { id: 1002, userId: 2002, courseid: 3002, dataBaseId: 4002, description: '科研项目的历史交易数据存储', status: 1, createTime: '2025-06-19 14:15' },
+        { id: 1003, userId: 2003, courseid: 3003, dataBaseId: 4003, description: '课程实验的学生成绩管理系统', status: 2, createTime: '2025-06-18 16:45' }
+      ],
+      // 数据库列表
+      databases: [
+        { id: 'DB001', name: '学生信息库', type: 'mysql', owner: '教务处', size: '200 MB', status: 'active', updatedAt: '2025-06-24 10:30' },
+        { id: 'DB002', name: '课程资源库', type: 'mongodb', owner: '信息中心', size: '1.5 GB', status: 'active', updatedAt: '2025-06-23 16:45' },
+        { id: 'DB003', name: '科研项目库', type: 'postgresql', owner: '科研处', size: '500 MB', status: 'maintenance', updatedAt: '2025-06-22 09:15' },
+        { id: 'DB004', name: '教学评估库', type: 'oracle', owner: '评估中心', size: '800 MB', status: 'active', updatedAt: '2025-06-21 14:20' },
+        { id: 'DB005', name: '图书馆资源库', type: 'mysql', owner: '图书馆', size: '3.2 GB', status: 'inactive', updatedAt: '2025-06-20 11:00' }
+      ],
+      // 查询列表
+      queryList: [
+        { id: 'QR2025001', topic: '学生成绩查询', date: '2025-06-20 10:30', status: '成功' },
+        { id: 'QR2025002', topic: '课程资源检索', date: '2025-06-19 15:45', status: '处理中' },
+        { id: 'QR2025003', topic: '科研项目统计', date: '2025-06-18 11:20', status: '待处理' }
+      ],
+      // 排序相关
+      sortField: '',
+      sortDirection: 'asc',
+      // 统计数据
+      applyCount: 3,
+      queryCount: 3,
+      resourceUsage: 65,
+      pendingTasks: 1,
+      // 搜索状态
+      isSearching: false
+    }
+  },
+  computed: {
+    // 过滤后的数据库列表
+    filteredDatabases() {
+      return this.databases.filter(database => {
+        const dbIdMatch = !this.searchForm.dbId || database.id.toLowerCase().includes(this.searchForm.dbId.toLowerCase());
+        const nameMatch = !this.searchForm.name || database.name.toLowerCase().includes(this.searchForm.name.toLowerCase());
+        const typeMatch = !this.searchForm.type || database.type === this.searchForm.type;
+        const ownerMatch = !this.searchForm.owner || database.owner.toLowerCase().includes(this.searchForm.owner.toLowerCase());
+        const statusMatch = !this.searchForm.status || database.status === this.searchForm.status;
+        
+        return dbIdMatch && nameMatch && typeMatch && ownerMatch && statusMatch;
+      }).sort((a, b) => {
+        if (!this.sortField) return 0;
+        
+        let valueA, valueB;
+        
+        if (this.sortField === 'id') {
+          valueA = a.id;
+          valueB = b.id;
+        } else if (this.sortField === 'name') {
+          valueA = a.name;
+          valueB = b.name;
+        } else if (this.sortField === 'size') {
+          // 简化的大小比较
+          valueA = parseFloat(a.size);
+          valueB = parseFloat(b.size);
+        } else if (this.sortField === 'updatedAt') {
+          valueA = new Date(a.updatedAt);
+          valueB = new Date(b.updatedAt);
+        } else {
+          return 0;
+        }
+        
+        if (valueA < valueB) {
+          return this.sortDirection === 'asc' ? -1 : 1;
+        }
+        if (valueA > valueB) {
+          return this.sortDirection === 'asc' ? 1 : -1;
+        }
+        return 0;
+      });
     }
   },
   methods: {
@@ -509,191 +674,240 @@ export default {
       this.activeTab = tab;
     },
     newQuery() {
-      const newId = `QR2025${1000 + this.queryList.length + 1}`;
+      // 生成新的查询ID
+      const newId = `QR${new Date().getFullYear()}${Math.floor(1000 + Math.random() * 9000)}`;
+      
+      // 创建新查询对象
       const newQuery = {
         id: newId,
-        topic: `新建查询 ${newId}`,
-        date: new Date().toLocaleDateString('zh-CN') + ' ' + new Date().toLocaleTimeString('zh-CN', {hour: '2-digit', minute:'2-digit'}),
+        topic: `查询 ${newId}`,
+        date: new Date().toLocaleString('zh-CN'),
         status: '待处理'
       };
       
-      // 添加新查询到列表
+      // 添加到查询列表
       this.queryList.unshift(newQuery);
       
-      // 触发事件通知父组件
-      this.$emit('queryAdded', newQuery);
-      
       // 更新统计数据
       this.queryCount++;
       this.pendingTasks++;
       
-      // 显示成功消息
+      // 显示成功通知
       this.showNotification('查询已提交，正在处理中', 'success');
     },
     viewQuery(query) {
-      this.selectedQuery = {...query};
+      this.selectedQuery = { ...query };
       this.showQueryDetailModal = true;
-      this.$emit('queryViewed', query);
     },
     exportQuery(query) {
       if (query.status === '成功') {
         // 模拟导出功能
         this.showNotification('查询结果已导出', 'success');
-        this.$emit('queryExported', query);
       } else {
         this.showNotification('查询尚未完成，无法导出', 'warning');
       }
     },
     editApplication(apply) {
-      this.editingApply = true;
-      this.editIndex = this.applyList.findIndex(item => item.id === apply.id);
-      this.applicationForm = {...apply};
+      this.editingApply = { ...apply };
+      this.applicationForm = { ...apply };
       this.showApplyModal = true;
     },
     deleteApplication(index) {
       if (confirm('确定要删除此申请吗？')) {
         const deletedApply = this.applyList.splice(index, 1)[0];
-        this.$emit('applyDeleted', deletedApply);
         
         // 更新统计数据
         this.applyCount--;
-        if (deletedApply.status === '审核中') {
+        if (deletedApply.status === 0 || deletedApply.status === 1) {
           this.pendingTasks--;
         }
         
-        // 显示成功消息
+        // 显示成功通知
         this.showNotification('申请已删除', 'success');
       }
-    },
-    submitApplication() {
+    },    submitApplication() {
       this.formSubmitted = true;
       
       // 验证表单
-      if (!this.applicationForm.name || 
-          !this.applicationForm.type || 
-          !this.applicationForm.course || // 新增课程验证
-          !this.applicationForm.purpose || 
-          this.applicationForm.dataVolume < 1 || 
-          isNaN(this.applicationForm.dataVolume)) {
+      if (!this.applicationForm.dataBaseId || 
+          !this.applicationForm.courseid || 
+          !this.applicationForm.description) {
+        this.showNotification('请填写所有必填字段', 'error');
         return;
       }
       
       if (this.editingApply) {
         // 更新现有申请
-        const updatedApply = {
-          ...this.applicationForm,
-          status: '审核中'
-        };
-        
-        // 替换列表中的申请
-        this.applyList.splice(this.editIndex, 1, updatedApply);
-        
-        // 触发事件通知父组件
-        this.$emit('applyUpdated', updatedApply);
-        
-        // 显示成功消息
-        this.showNotification('申请已更新', 'success');
+        const index = this.applyList.findIndex(item => item.id === this.editingApply.id);
+        if (index !== -1) {
+          this.applyList[index] = { 
+            ...this.applicationForm,
+            status: this.applicationForm.status // 保持原有状态
+          };
+          
+          this.showNotification('申请已更新', 'success');
+        }
       } else {
-        // 添加新申请
-        const newId = `DB2025${1000 + this.applyList.length + 1}`;
-        const newApply = {
+        // 创建新申请
+        const newId = 1000 + this.applyList.length + 1;
+        
+        const newApplication = {
           id: newId,
-          name: this.applicationForm.name,
-          type: this.applicationForm.type,
-          course: this.applicationForm.course, // 新增课程字段
-          purpose: this.applicationForm.purpose,
-          dataVolume: this.applicationForm.dataVolume,
-          resourceQuota: this.applicationForm.resourceQuota,
-          date: new Date().toLocaleDateString('zh-CN'),
-          status: '审核中'
+          userId: this.userId || 0, // 默认值
+          courseid: this.applicationForm.courseid,
+          dataBaseId: this.applicationForm.dataBaseId,
+          description: this.applicationForm.description,
+          authorizedId: null,
+          approverId: null,
+          createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+          status: 0, // 初始状态：已向老师发送申请但未同意
+          approveTime: null,
+          authorizedTime: null
         };
         
-        // 添加到列表
-        this.applyList.push(newApply);
-        
-        // 触发事件通知父组件
-        this.$emit('applyAdded', newApply);
+        // 添加到申请列表
+        this.applyList.unshift(newApplication);
         
         // 更新统计数据
         this.applyCount++;
         this.pendingTasks++;
         
-        // 显示成功消息
-        this.showNotification('申请已提交，正在审核中', 'success');
+        this.showNotification('申请已提交，请等待审核', 'success');
       }
       
+      // 关闭模态框
       this.closeApplyModal();
     },
     closeApplyModal() {
       this.showApplyModal = false;
-      this.editingApply = false;
-      this.formSubmitted = false;
-      this.applicationForm = {
-        name: '',
-        type: '',
-        course: '', // 新增课程字段
-        purpose: '',
-        dataVolume: 1,
-        resourceQuota: '基础版'
-      };
-      this.editIndex = -1;
+      this.editingApply = null;
+      this.resetForm();
+    },
+    closeConnectModal() {
+      this.showConnectModal = false;
+      this.selectedDatabase = {};
     },
     closeQueryDetailModal() {
       this.showQueryDetailModal = false;
       this.selectedQuery = {};
     },
-    // 新增：获取课程名称的方法
-    getCourseName(courseCode) {
-      const courses = {
-        'database-design': '数据库设计',
-        'data-structure': '数据结构',
-        'operating-system': '操作系统',
-        'computer-network': '计算机网络'
+    resetForm() {
+      this.applicationForm = {
+        id: null,
+        userId: null,
+        courseid: null,
+        dataBaseId: null,
+        description: '',
+        authorizedId: null,
+        approverId: null,
+        createTime: null,
+        status: 0,
+        approveTime: null,
+        authorizedTime: null
       };
-      return courses[courseCode] || '';
+      this.formSubmitted = false;
+    },
+    getStatusText(status) {
+      switch (status) {
+        case 0:
+          return '已向老师发送申请但未同意';
+        case 1:
+          return '老师同意并且已向管理员发送申请但未授权';
+        case 2:
+          return '管理员审批成功整个流程完成';
+        default:
+          return '未知状态';
+      }
+    },
+    getDatabaseStatusText(status) {
+      switch (status) {
+        case 'active':
+          return '活跃';
+        case 'inactive':
+          return '非活跃';
+        case 'maintenance':
+          return '维护中';
+        default:
+          return status;
+      }
     },
     showNotification(message, type = 'info') {
-      // 这里可以实现通知组件
-      console.log(`[${type}] ${message}`);
+      const notification = document.getElementById('notification');
+      const notificationTitle = document.getElementById('notificationTitle');
+      const notificationMessage = document.getElementById('notificationMessage');
+      const notificationIcon = document.getElementById('notificationIcon');
       
-      // 模拟通知效果
-      const notification = document.createElement('div');
-      notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-10 opacity-0`;
+      notificationTitle.textContent = type.charAt(0).toUpperCase() + type.slice(1);
+      notificationMessage.textContent = message;
       
+      // 设置图标和颜色
+      notificationIcon.className = 'flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center';
       if (type === 'success') {
-        notification.classList.add('bg-green-500', 'text-white');
-      } else if (type === 'warning') {
-        notification.classList.add('bg-yellow-500', 'text-white');
+        notificationIcon.classList.add('bg-green-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-check"></i>';
       } else if (type === 'error') {
-        notification.classList.add('bg-red-500', 'text-white');
-      } else {
-        notification.classList.add('bg-blue-500', 'text-white');
+        notificationIcon.classList.add('bg-red-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-times"></i>';
+      } else if (type === 'warning') {
+        notificationIcon.classList.add('bg-yellow-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-exclamation-triangle"></i>';
+      } else if (type === 'info') {
+        notificationIcon.classList.add('bg-blue-500', 'text-white');
+        notificationIcon.innerHTML = '<i class="fa fa-info-circle"></i>';
       }
       
-      notification.textContent = message;
-      document.body.appendChild(notification);
-      
       // 显示通知
-      setTimeout(() => {
-        notification.classList.remove('translate-y-10', 'opacity-0');
-      }, 100);
+      notification.classList.remove('translate-y-[-100px]', 'opacity-0');
       
-      // 3秒后隐藏通知
+      // 3秒后自动隐藏
       setTimeout(() => {
-        notification.classList.add('translate-y-10', 'opacity-0');
-        setTimeout(() => {
-          document.body.removeChild(notification);
-        }, 300);
+        notification.classList.add('translate-y-[-100px]', 'opacity-0');
       }, 3000);
-    }
-  },
-  watch: {
-    activeTab() {
+    },
+    // 数据库查询相关方法
+    searchDatabases() {
+      this.isSearching = true;
+      this.showNotification(`已找到 ${this.filteredDatabases.length} 个匹配的数据库`, 'info');
+    },
+    resetSearch() {
+      this.searchForm = {
+        dbId: '',
+        name: '',
+        type: '',
+        owner: '',
+        status: ''
+      };
+      this.isSearching = false;
+    },
+    sortBy(field) {
+      if (this.sortField === field) {
+        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+      } else {
+        this.sortField = field;
+        this.sortDirection = 'asc';
+      }
+    },
+    connectDatabase(database) {
+      this.selectedDatabase = { ...database };
+      this.showConnectModal = true;
+    },
+    connectToDatabase() {
+      // 模拟连接数据库
+      setTimeout(() => {
+        this.closeConnectModal();
+        this.showNotification(`已成功连接到数据库: ${this.selectedDatabase.name}`, 'success');
+      }, 1000);
+    },
+    viewDatabaseDetails(database) {
+      // 这里可以实现查看数据库详情的功能
+      this.showNotification(`查看数据库 ${database.name} 详情`, 'info');
     }
   },
   mounted() {
-  },
-  beforeDestroy() {
+    // 初始化时加载模拟数据
+    this.applyCount = this.applyList.length;
+    this.queryCount = this.queryList.length;
+    this.pendingTasks = this.applyList.filter(app => app.status === 0 || app.status === 1).length;
   }
 }
 </script>
diff --git a/vite/src/views/Teacher.vue b/vite/src/views/Teacher.vue
index bdd59fbac28ce888fefd1a9dff400be0e2433e30..e9faab870e8d731cfd63b6086063ecb1166bcd34 100644
--- a/vite/src/views/Teacher.vue
+++ b/vite/src/views/Teacher.vue
@@ -245,7 +245,7 @@
                           </td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <button class="text-primary hover:underline">
+                            <button class="text-primary hover:underline" @click="openApplyDetail('DBView20250620001')">
                               <i class="fa fa-eye mr-1"></i> 详情
                             </button>
                           </td>
@@ -261,7 +261,7 @@
                           </td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-19 10:20</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <button class="text-primary hover:underline">
+                            <button class="text-primary hover:underline" @click="openApplyDetail('DBView20250618002')">
                               <i class="fa fa-eye mr-1"></i> 详情
                             </button>
                           </td>
@@ -277,7 +277,7 @@
                           </td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-16 16:30</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <button class="text-primary hover:underline">
+                            <button class="text-primary hover:underline" @click="openApplyDetail('DBView20250615003')">
                               <i class="fa fa-eye mr-1"></i> 详情
                             </button>
                           </td>
@@ -314,28 +314,56 @@
 
               <!-- 授权操作内容 -->
               <div v-if="currentSubTab === '授权操作'">
+                <!-- 筛选条件 -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                  <div>
+                    <label for="authStatusFilter" class="block text-sm font-medium text-gray-700 mb-2">状态筛选</label>
+                    <select id="authStatusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authStatusFilter">
+                      <option value="">全部状态</option>
+                      <option value="0">待审核</option>
+                      <option value="1">审核中</option>
+                      <option value="2">已完成</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label for="authDateRange" class="block text-sm font-medium text-gray-700 mb-2">日期范围</label>
+                    <input type="date" id="authDateRange" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authDateRange">
+                  </div>
+                  <div>
+                    <label for="authKeyword" class="block text-sm font-medium text-gray-700 mb-2">关键词搜索</label>
+                    <div class="relative">
+                      <input type="text" id="authKeyword" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="搜索申请编号、用户Id等" v-model="authKeyword">
+                      <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
+                    </div>
+                  </div>
+                </div>
+
                 <!-- 学生申请列表 -->
                 <div class="overflow-x-auto">
                   <table class="min-w-full divide-y divide-gray-200">
                     <thead class="bg-gray-50">
                       <tr>
                         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请编号</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生姓名</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库名称</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户Id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库Id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                       </tr>
                     </thead>
                     <tbody class="bg-white divide-y divide-gray-200" id="stdAuthTableBody">
-                      <tr v-for="app in stdAuthApplications" :key="app.id" class="hover:bg-gray-50 transition-colors">
+                      <tr v-for="app in filteredStdAuthApplications" :key="app.id" class="hover:bg-gray-50 transition-colors">
                         <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ app.id }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.student }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.dbName }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.time }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.userId }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.courseid }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.dataBaseId }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">{{ app.description }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ app.createTime }}</td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                          <span :class="app.statusClass" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
-                            {{ app.status }}
+                          <span :class="getStatusClass(app.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
+                            {{ getStatusText(app.status) }}
                           </span>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -351,17 +379,16 @@
                 <!-- 分页 -->
                 <div class="flex justify-between items-center mt-6">
                   <div class="text-sm text-gray-700">
-                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">12</span> 条记录
+                    显示 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 到 <span class="font-medium">{{ Math.min(currentPage * pageSize, filteredStdAuthApplications.length) }}</span> 条，共 <span class="font-medium">{{ filteredStdAuthApplications.length }}</span> 条记录
                   </div>
                   <div class="flex space-x-1">
-                    <button class="btn-secondary disabled:opacity-50" disabled>
+                    <button class="btn-secondary" :disabled="currentPage === 1" @click="prevPage">
                       <i class="fa fa-chevron-left"></i>
                     </button>
-                    <button class="btn-primary">1</button>
-                    <button class="btn-secondary">2</button>
-                    <span class="btn-secondary">...</span>
-                    <button class="btn-secondary">3</button>
-                    <button class="btn-secondary">
+                    <button v-for="page in totalPages" :key="page" :class="{ 'btn-primary': page === currentPage, 'btn-secondary': page !== currentPage }" @click="goToPage(page)">
+                      {{ page }}
+                    </button>
+                    <button class="btn-secondary" :disabled="currentPage === totalPages" @click="nextPage">
                       <i class="fa fa-chevron-right"></i>
                     </button>
                   </div>
@@ -370,58 +397,89 @@
 
               <!-- 授权记录查看内容 -->
               <div v-else-if="currentSubTab === '授权记录查看'">
+                <!-- 筛选条件 -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                  <div>
+                    <label for="recordStatusFilter" class="block text-sm font-medium text-gray-700 mb-2">状态筛选</label>
+                    <select id="recordStatusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="recordStatusFilter">
+                      <option value="">全部状态</option>
+                      <option value="active">有效</option>
+                      <option value="expired">已过期</option>
+                      <option value="revoked">已撤销</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label for="recordDateRange" class="block text-sm font-medium text-gray-700 mb-2">日期范围</label>
+                    <input type="date" id="recordDateRange" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="recordDateRange">
+                  </div>
+                  <div>
+                    <label for="recordKeyword" class="block text-sm font-medium text-gray-700 mb-2">关键词搜索</label>
+                    <div class="relative">
+                      <input type="text" id="recordKeyword" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="搜索授权编号、用户Id等" v-model="recordKeyword">
+                      <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
+                    </div>
+                  </div>
+                </div>
+
                 <div class="overflow-x-auto">
                   <table class="min-w-full divide-y divide-gray-200">
                     <thead class="bg-gray-50">
                       <tr>
                         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权编号</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生姓名</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库名称</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户Id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库Id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权人Id</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">审批人Id</th>
                         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权时间</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权期限</th>
                         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                       </tr>
                     </thead>
                     <tbody class="bg-white divide-y divide-gray-200">
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250620001</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张三 (S2023001)</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电商数据分析</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 15:45</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 至 2025-12-20</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已授权
-                          </span>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250618002</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王五 (S2023032)</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">数据库课程作业</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-18 11:30</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-18 至 2025-09-18</td>
+                      <tr v-for="record in authRecords" :key="record.id" class="hover:bg-gray-50 transition-colors">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ record.id }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.userId }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.courseid }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.dataBaseId }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">{{ record.description }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.authorizedId }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.approverId }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.authTime }}</td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已授权
+                          <span :class="getRecordStatusClass(record.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
+                            {{ getRecordStatusText(record.status) }}
                           </span>
                         </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250615003</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李四 (S2023015)</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">机器学习实验</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 09:20</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 至 2026-06-15</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                            已过期
-                          </span>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <button class="text-primary hover:underline" @click="openRecordDetail(record.id)">
+                            <i class="fa fa-eye mr-1"></i> 详情
+                          </button>
                         </td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
+
+                <!-- 分页 -->
+                <div class="flex justify-between items-center mt-6">
+                  <div class="text-sm text-gray-700">
+                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">12</span> 条记录
+                  </div>
+                  <div class="flex space-x-1">
+                    <button class="btn-secondary disabled:opacity-50" disabled>
+                      <i class="fa fa-chevron-left"></i>
+                    </button>
+                    <button class="btn-primary">1</button>
+                    <button class="btn-secondary">2</button>
+                    <span class="btn-secondary">...</span>
+                    <button class="btn-secondary">3</button>
+                    <button class="btn-secondary">
+                      <i class="fa fa-chevron-right"></i>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -530,39 +588,7 @@
                           </td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
                           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <button class="text-primary hover:underline">
-                              <i class="fa fa-eye mr-1"></i> 详情
-                            </button>
-                          </td>
-                        </tr>
-                        <tr class="hover:bg-gray-50 transition-colors">
-                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBCreate20250615002</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">教学案例库</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 14:30</td>
-                          <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                              已通过
-                            </span>
-                          </td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-16 16:45</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <button class="text-primary hover:underline">
-                              <i class="fa fa-eye mr-1"></i> 详情
-                            </button>
-                          </td>
-                        </tr>
-                        <tr class="hover:bg-gray-50 transition-colors">
-                          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBCreate20250610003</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">科研实验数据库</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-10 09:20</td>
-                          <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                              已拒绝
-                            </span>
-                          </td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-12 11:30</td>
-                          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                            <button class="text-primary hover:underline">
+                            <button class="text-primary hover:underline" @click="openOwnDBApplyDetail('DBCreate20250620001')">
                               <i class="fa fa-eye mr-1"></i> 详情
                             </button>
                           </td>
@@ -578,153 +604,148 @@
 
         <!-- 我的申请记录模块 -->
         <section id="我的申请记录" :class="{ 'mb-8': activeSection === '我的申请记录', 'mb-8 hidden': activeSection!== '我的申请记录' }">
-          <div class="bg-white rounded-xl shadow-md overflow-hidden">
+          <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
             <div class="p-6 border-b border-gray-200">
               <h2 class="text-xl font-bold text-gray-900">我的申请记录</h2>
-              <p class="text-gray-500 mt-1">查看所有数据库相关的申请记录和状态</p>
+              <p class="text-gray-500 mt-1">查看所有数据库相关的申请历史记录</p>
             </div>
 
             <div class="p-6">
-              <div class="mb-6">
-                <div class="flex flex-wrap gap-3 mb-4">
+              <!-- 筛选条件 -->
+              <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+                <div>
+                  <label for="applyTypeFilter" class="block text-sm font-medium text-gray-700 mb-2">申请类型</label>
+                  <select id="applyTypeFilter" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="applyTypeFilter">
+                    <option value="">全部类型</option>
+                    <option value="view">公共数据库表查看</option>
+                    <option value="create">自建数据库申请</option>
+                  </select>
+                </div>
+                <div>
+                  <label for="applyStatusFilter" class="block text-sm font-medium text-gray-700 mb-2">申请状态</label>
+                  <select id="applyStatusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="applyStatusFilter">
+                    <option value="">全部状态</option>
+                    <option value="pending">待审核</option>
+                    <option value="processing">审核中</option>
+                    <option value="approved">已通过</option>
+                    <option value="rejected">已拒绝</option>
+                  </select>
+                </div>
+                <div>
+                  <label for="applyDateRange" class="block text-sm font-medium text-gray-700 mb-2">日期范围</label>
+                  <div class="flex space-x-2">
+                    <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="applyStartDate">
+                    <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="applyEndDate">
+                  </div>
+                </div>
+                <div>
+                  <label for="applyKeyword" class="block text-sm font-medium text-gray-700 mb-2">关键词搜索</label>
                   <div class="relative">
-                    <input type="text" placeholder="搜索申请编号/名称" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
+                    <input type="text" id="applyKeyword" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="搜索申请编号、数据库名称等" v-model="applyKeyword">
                     <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                   </div>
-                  <div>
-                    <select class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                      <option value="">全部类型</option>
-                      <option value="view">公共数据库表查看</option>
-                      <option value="create">自建数据库申请</option>
-                      <option value="auth">学生数据库授权</option>
-                    </select>
-                  </div>
-                  <div>
-                    <select class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                      <option value="">全部状态</option>
-                      <option value="pending">审核中</option>
-                      <option value="approved">已通过</option>
-                      <option value="rejected">已拒绝</option>
-                      <option value="expired">已过期</option>
-                    </select>
-                  </div>
-                  <div>
-                    <select class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                      <option value="recent">最近申请</option>
-                      <option value="oldest">最早申请</option>
-                    </select>
-                  </div>
                 </div>
+              </div>
 
-                <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
-                      <tr>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请编号</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请类型</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理状态</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理时间</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
-                      </tr>
-                    </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBView20250620001</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 09:30</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
-                            审核中
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBCreate20250620001</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">自建数据库申请</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 10:15</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
-                            审核中
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBView20250618002</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-18 14:15</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已通过
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-19 10:20</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBCreate20250615002</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">自建数据库申请</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 14:30</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已通过
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-16 16:45</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBView20250615003</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 11:45</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                            已拒绝
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-16 16:30</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
+              <!-- 申请记录列表 -->
+              <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请编号</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请类型</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请内容</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请时间</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理状态</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">处理时间</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBView20250620001</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">教学数据库 - 学生信息表</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 09:30</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                          审核中
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline" @click="openApplyDetail('DBView20250620001')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                      </td>
+                    </tr>
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBView20250618002</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">科研数据库 - 实验数据表</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-18 14:15</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                          已通过
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-19 10:20</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline" @click="openApplyDetail('DBView20250618002')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                      </td>
+                    </tr>
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBView20250615003</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">经济类数据库 - 统计分析表</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 11:45</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                          已拒绝
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-16 16:30</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline" @click="openApplyDetail('DBView20250615003')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                      </td>
+                    </tr>
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBCreate20250620001</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">自建数据库申请</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">机器学习研究库</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 10:15</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                          审核中
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">--</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline" @click="openOwnDBApplyDetail('DBCreate20250620001')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
 
               <!-- 分页 -->
               <div class="flex justify-between items-center mt-6">
                 <div class="text-sm text-gray-700">
-                  显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">12</span> 条记录
+                  显示 <span class="font-medium">1</span> 到 <span class="font-medium">4</span> 条，共 <span class="font-medium">12</span> 条记录
                 </div>
                 <div class="flex space-x-1">
-                  <button class="btn-secondary">
+                  <button class="btn-secondary disabled:opacity-50" disabled>
                     <i class="fa fa-chevron-left"></i>
                   </button>
                   <button class="btn-primary">1</button>
                   <button class="btn-secondary">2</button>
+                  <span class="btn-secondary">...</span>
                   <button class="btn-secondary">3</button>
                   <button class="btn-secondary">
                     <i class="fa fa-chevron-right"></i>
@@ -737,152 +758,137 @@
 
         <!-- 我的授权记录模块 -->
         <section id="我的授权记录" :class="{ 'mb-8': activeSection === '我的授权记录', 'mb-8 hidden': activeSection!== '我的授权记录' }">
-          <div class="bg-white rounded-xl shadow-md overflow-hidden">
+          <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
             <div class="p-6 border-b border-gray-200">
               <h2 class="text-xl font-bold text-gray-900">我的授权记录</h2>
-              <p class="text-gray-500 mt-1">查看所有已授权的数据库访问记录</p>
+              <p class="text-gray-500 mt-1">查看所有数据库相关的授权历史记录</p>
             </div>
 
             <div class="p-6">
-              <div class="mb-6">
-                <div class="flex flex-wrap gap-3 mb-4">
+              <!-- 筛选条件 -->
+              <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+                <div>
+                  <label for="authRecordTypeFilter" class="block text-sm font-medium text-gray-700 mb-2">授权类型</label>
+                  <select id="authRecordTypeFilter" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authRecordTypeFilter">
+                    <option value="">全部类型</option>
+                    <option value="student">学生自建数据库授权</option>
+                    <option value="public">公共数据库表查看授权</option>
+                  </select>
+                </div>
+                <div>
+                  <label for="authRecordStatusFilter" class="block text-sm font-medium text-gray-700 mb-2">授权状态</label>
+                  <select id="authRecordStatusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authRecordStatusFilter">
+                    <option value="">全部状态</option>
+                    <option value="active">有效</option>
+                    <option value="expired">已过期</option>
+                    <option value="revoked">已撤销</option>
+                  </select>
+                </div>
+                <div>
+                  <label for="authRecordDateRange" class="block text-sm font-medium text-gray-700 mb-2">日期范围</label>
+                  <div class="flex space-x-2">
+                    <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authRecordStartDate">
+                    <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authRecordEndDate">
+                  </div>
+                </div>
+                <div>
+                  <label for="authRecordKeyword" class="block text-sm font-medium text-gray-700 mb-2">关键词搜索</label>
                   <div class="relative">
-                    <input type="text" placeholder="搜索授权编号/名称" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
+                    <input type="text" id="authRecordKeyword" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="搜索授权编号、数据库名称等" v-model="authRecordKeyword">
                     <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                   </div>
-                  <div>
-                    <select class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                      <option value="">全部类型</option>
-                      <option value="public">公共数据库</option>
-                      <option value="private">自建数据库</option>
-                      <option value="student">学生数据库</option>
-                    </select>
-                  </div>
-                  <div>
-                    <select class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                      <option value="">全部状态</option>
-                      <option value="active">有效</option>
-                      <option value="expired">已过期</option>
-                      <option value="revoked">已撤销</option>
-                    </select>
-                  </div>
-                  <div>
-                    <select class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                      <option value="recent">最近授权</option>
-                      <option value="oldest">最早授权</option>
-                    </select>
-                  </div>
                 </div>
+              </div>
 
-                <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
-                      <tr>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权编号</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据库名称</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权时间</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权期限</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
-                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
-                      </tr>
-                    </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250620001</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">电商数据分析</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 15:45</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-20 至 2025-12-20</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已授权
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250618002</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">数据库课程作业</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-18 11:30</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-18 至 2025-09-18</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已授权
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250615003</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">机器学习实验</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 09:20</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 至 2026-06-15</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                            已过期
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250610004</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">教学案例库</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-10 14:25</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-10 至 2026-06-10</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                            已授权
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                      <tr class="hover:bg-gray-50 transition-colors">
-                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DBAuth20250605005</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">科研实验数据库</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-05 11:10</td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-05 至 2025-12-05</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                            已撤销
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                          <button class="text-primary hover:underline">
-                            <i class="fa fa-eye mr-1"></i> 详情
-                          </button>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
+              <!-- 授权记录列表 -->
+              <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权编号</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权类型</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权内容</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">被授权人</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">授权时间</th>
+                                          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">过期时间</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
+                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Auth20250619001</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">学生自建数据库授权</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">数据库原理课程 - 学生张三</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张三 (2025001)</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-19 14:30</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-09-30 23:59</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                          有效
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline mr-3" @click="openAuthDetail('Auth20250619001')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                        <button class="text-red-500 hover:underline" @click="revokeAuthorization('Auth20250619001')">
+                          <i class="fa fa-ban mr-1"></i> 撤销
+                        </button>
+                      </td>
+                    </tr>
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Auth20250615002</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">公共数据库表查看授权</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">科研数据库 - 实验数据表</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李四 (2025002)</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 16:45</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-30 23:59</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                          已过期
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline" @click="openAuthDetail('Auth20250615002')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                      </td>
+                    </tr>
+                    <tr class="hover:bg-gray-50 transition-colors">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Auth20250610003</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">学生自建数据库授权</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">大数据技术课程 - 王五</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王五 (2025003)</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-10 09:20</td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-15 23:59</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
+                          已撤销
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        <button class="text-primary hover:underline" @click="openAuthDetail('Auth20250610003')">
+                          <i class="fa fa-eye mr-1"></i> 详情
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
 
               <!-- 分页 -->
               <div class="flex justify-between items-center mt-6">
                 <div class="text-sm text-gray-700">
-                  显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">15</span> 条记录
+                  显示 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">12</span> 条记录
                 </div>
                 <div class="flex space-x-1">
-                  <button class="btn-secondary">
+                  <button class="btn-secondary disabled:opacity-50" disabled>
                     <i class="fa fa-chevron-left"></i>
                   </button>
                   <button class="btn-primary">1</button>
                   <button class="btn-secondary">2</button>
+                  <span class="btn-secondary">...</span>
                   <button class="btn-secondary">3</button>
                   <button class="btn-secondary">
                     <i class="fa fa-chevron-right"></i>
@@ -894,270 +900,392 @@
         </section>
       </main>
     </div>
+  </div>
 
-    <!-- 表选择模态框 -->
-    <div id="tableSelectModal" :class="{ 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden':!isTableModalOpen, 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50': isTableModalOpen }">
-      <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
-        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
-          <h3 class="text-xl font-bold text-gray-900">选择数据库表</h3>
-          <button id="closeTableModal" class="text-gray-400 hover:text-gray-500" @click="closeTableModal">
-            <i class="fa fa-times text-xl"></i>
-          </button>
-        </div>
-        <div class="p-6" id="modalTableContent">
-          <!-- 模态框内容将通过JS动态生成 -->
-        </div>
-        <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
-          <button id="cancelTableSelect" class="btn-secondary" @click="closeTableModal">
-            <i class="fa fa-times mr-1"></i> 取消
-          </button>
-          <button id="confirmTableSelect" class="btn-primary">
-            <i class="fa fa-check mr-1"></i> 确认选择
-          </button>
-        </div>
+  <!-- 遮罩层 -->
+  <div v-if="isModalOpen" class="fixed inset-0 bg-gray-600 bg-opacity-50 z-50 flex items-center justify-center" @click.self="closeModal">
+    <!-- 模态框 -->
+    <div class="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+      <!-- 模态框头部 -->
+      <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+        <h3 class="text-lg font-medium text-gray-900" id="modalTitle">{{ modalTitle }}</h3>
+        <button class="text-gray-400 hover:text-gray-500" @click="closeModal">
+          <i class="fa fa-times text-xl"></i>
+        </button>
       </div>
-    </div>
 
-    <!-- 学生授权模态框 -->
-    <div id="stdAuthModal" :class="{ 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden':!isStdAuthModalOpen, 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50': isStdAuthModalOpen }">
-      <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
-        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
-          <h3 class="text-xl font-bold text-gray-900" id="stdAuthModalTitle">{{ stdAuthModalTitle }}</h3>
-          <button id="closeStdAuthModal" class="text-gray-400 hover:text-gray-500" @click="closeStdAuthModal">
-            <i class="fa fa-times text-xl"></i>
-          </button>
-        </div>
-        <div class="p-6" id="stdAuthModalContent">
-          <!-- 模态框内容将通过JS动态生成 -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <!-- 模态框内容 -->
+      <div class="px-6 py-4" id="modalContent">
+        <!-- 申请详情 -->
+        <div v-if="modalType === 'applyDetail'">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">申请编号</h4>
-              <p class="text-base font-medium text-gray-900">{{ currentStdAuthApp?.id }}</p>
+              <p class="text-sm text-gray-500">申请编号</p>
+              <p class="font-medium">{{ currentApplyDetail.id }}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">学生姓名</h4>
-              <p class="text-base font-medium text-gray-900">{{ currentStdAuthApp?.student }}</p>
+              <p class="text-sm text-gray-500">申请类型</p>
+              <p class="font-medium">{{ currentApplyDetail.type }}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">数据库名称</h4>
-              <p class="text-base font-medium text-gray-900">{{ currentStdAuthApp?.dbName }}</p>
+              <p class="text-sm text-gray-500">申请时间</p>
+              <p class="font-medium">{{ currentApplyDetail.applyTime }}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-1">申请时间</h4>
-              <p class="text-base font-medium text-gray-900">{{ currentStdAuthApp?.time }}</p>
+              <p class="text-sm text-gray-500">处理状态</p>
+              <p class="font-medium"><span :class="getStatusBadgeClass(currentApplyDetail.status)">{{ currentApplyDetail.status }}</span></p>
             </div>
             <div class="md:col-span-2">
-              <h4 class="text-sm font-medium text-gray-500 mb-2">申请理由</h4>
-              <div class="bg-gray-50 p-3 rounded-lg text-sm text-gray-700">
-                用于课程《数据库原理》的实验作业，需要访问数据库进行SQL查询练习和数据分析。
+              <p class="text-sm text-gray-500">申请理由</p>
+              <p class="font-medium mt-1 whitespace-pre-line">{{ currentApplyDetail.reason }}</p>
+            </div>
+            <div class="md:col-span-2" v-if="currentApplyDetail.status !== '待审核'">
+              <p class="text-sm text-gray-500">处理意见</p>
+              <p class="font-medium mt-1 whitespace-pre-line">{{ currentApplyDetail.processingOpinion || '无处理意见' }}</p>
+            </div>
+          </div>
+
+          <h4 class="font-medium text-gray-900 mb-3">申请内容</h4>
+          <div class="bg-gray-50 p-4 rounded-lg">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <p class="text-sm text-gray-500">数据库名称</p>
+                <p class="font-medium">{{ currentApplyDetail.dbName }}</p>
+              </div>
+              <div>
+                <p class="text-sm text-gray-500">数据库类型</p>
+                <p class="font-medium">{{ currentApplyDetail.dbType }}</p>
+              </div>
+              <div>
+                <p class="text-sm text-gray-500">关联课程</p>
+                <p class="font-medium">{{ currentApplyDetail.course || '无关联课程' }}</p>
+              </div>
+              <div>
+                <p class="text-sm text-gray-500">预期使用方式</p>
+                <p class="font-medium">{{ currentApplyDetail.useType || '未填写' }}</p>
               </div>
             </div>
-            <div class="md:col-span-2">
-              <h4 class="text-sm font-medium text-gray-500 mb-2">审核意见</h4>
-              <textarea id="authComment" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入审核意见..." v-model="authComment"></textarea>
+          </div>
+        </div>
+
+        <!-- 学生自建数据库授权处理 -->
+        <div v-if="modalType === 'stdAuth'">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+            <div>
+              <p class="text-sm text-gray-500">申请编号</p>
+              <p class="font-medium">{{ currentStdAuth.id }}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-2">授权期限</h4>
-              <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                <option value="1">1个月</option>
-                <option value="3" selected>3个月</option>
-                <option value="6">6个月</option>
-                <option value="12">12个月</option>
-              </select>
+              <p class="text-sm text-gray-500">用户Id</p>
+              <p class="font-medium">{{ currentStdAuth.userId }}</p>
             </div>
             <div>
-              <h4 class="text-sm font-medium text-gray-500 mb-2">授权权限</h4>
-              <div class="space-y-2">
-                <div class="flex items-center">
-                  <input type="checkbox" id="readPermission" class="h-4 w-4 text-primary focus:ring-primary" checked>
-                  <label for="readPermission" class="ml-2 text-sm text-gray-700">读取数据</label>
-                </div>
-                <div class="flex items-center">
-                  <input type="checkbox" id="writePermission" class="h-4 w-4 text-primary focus:ring-primary" checked>
-                  <label for="writePermission" class="ml-2 text-sm text-gray-700">写入数据</label>
-                </div>
-                <div class="flex items-center">
-                  <input type="checkbox" id="modifyPermission" class="h-4 w-4 text-primary focus:ring-primary">
-                  <label for="modifyPermission" class="ml-2 text-sm text-gray-700">修改表结构</label>
-                </div>
-                <div class="flex items-center">
-                  <input type="checkbox" id="deletePermission" class="h-4 w-4 text-primary focus:ring-primary">
-                  <label for="deletePermission" class="ml-2 text-sm text-gray-700">删除数据</label>
-                </div>
+              <p class="text-sm text-gray-500">课程Id</p>
+              <p class="font-medium">{{ currentStdAuth.courseid }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">数据库Id</p>
+              <p class="font-medium">{{ currentStdAuth.dataBaseId }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">创建时间</p>
+              <p class="font-medium">{{ currentStdAuth.createTime }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">当前状态</p>
+              <p class="font-medium"><span :class="getStatusClass(currentStdAuth.status)">{{ getStatusText(currentStdAuth.status) }}</span></p>
+            </div>
+            <div class="md:col-span-2">
+              <p class="text-sm text-gray-500">申请描述</p>
+              <p class="font-medium mt-1 whitespace-pre-line">{{ currentStdAuth.description }}</p>
+            </div>
+          </div>
+
+          <h4 class="font-medium text-gray-900 mb-3">授权设置</h4>
+          <div class="bg-gray-50 p-4 rounded-lg">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label for="authPermission" class="block text-sm font-medium text-gray-700 mb-2">授权权限</label>
+                <select id="authPermission" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authPermission">
+                  <option value="read-only">只读</option>
+                  <option value="read-write">读写</option>
+                  <option value="admin">管理员</option>
+                </select>
+              </div>
+              <div>
+                <label for="authDuration" class="block text-sm font-medium text-gray-700 mb-2">授权时长(天)</label>
+                <input type="number" id="authDuration" min="1" max="365" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="authDuration">
+              </div>
+              <div class="md:col-span-2">
+                <label for="authOpinion" class="block text-sm font-medium text-gray-700 mb-2">处理意见</label>
+                <textarea id="authOpinion" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入处理意见..." v-model="authOpinion"></textarea>
               </div>
             </div>
           </div>
         </div>
-        <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
-          <button id="rejectStdAuth" class="btn-danger" @click="rejectStdAuth">
-            <i class="fa fa-times mr-1"></i> 拒绝
-          </button>
-          <button id="approveStdAuth" class="btn-primary" @click="approveStdAuth">
-            <i class="fa fa-check mr-1"></i> 批准
-          </button>
-        </div>
-      </div>
-    </div>
 
-    <!-- 页脚 -->
-    <footer class="bg-white border-t border-gray-200 py-4">
-      <div class="container mx-auto px-4">
-        <div class="flex flex-col md:flex-row justify-between items-center">
-          <div class="text-sm text-gray-500">
-            © 2025 教师数据库管理系统. 保留所有权利.
-          </div>
-          <div class="flex space-x-4 mt-4 md:mt-0">
-            <a href="#" class="text-gray-500 hover:text-gray-700">
-              <i class="fa fa-question-circle mr-1"></i> 帮助中心
-            </a>
-            <a href="#" class="text-gray-500 hover:text-gray-700">
-              <i class="fa fa-envelope mr-1"></i> 联系我们
-            </a>
-            <a href="#" class="text-gray-500 hover:text-gray-700">
-              <i class="fa fa-file-text-o mr-1"></i> 使用条款
-            </a>
+        <!-- 授权详情 -->
+        <div v-if="modalType === 'authDetail'">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+            <div>
+              <p class="text-sm text-gray-500">授权编号</p>
+              <p class="font-medium">{{ currentAuthDetail.id }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">授权类型</p>
+              <p class="font-medium">{{ currentAuthDetail.type }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">被授权人</p>
+              <p class="font-medium">{{ currentAuthDetail.user }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">授权人</p>
+              <p class="font-medium">{{ currentAuthDetail.authorizer }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">授权时间</p>
+              <p class="font-medium">{{ currentAuthDetail.authTime }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">过期时间</p>
+              <p class="font-medium">{{ currentAuthDetail.expireTime }}</p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">当前状态</p>
+              <p class="font-medium"><span :class="getRecordStatusClass(currentAuthDetail.status)">{{ getRecordStatusText(currentAuthDetail.status) }}</span></p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500">授权权限</p>
+              <p class="font-medium">{{ currentAuthDetail.permission }}</p>
+            </div>
+            <div class="md:col-span-2">
+              <p class="text-sm text-gray-500">授权描述</p>
+              <p class="font-medium mt-1 whitespace-pre-line">{{ currentAuthDetail.description }}</p>
+            </div>
+            <div class="md:col-span-2" v-if="currentAuthDetail.opinion">
+              <p class="text-sm text-gray-500">授权意见</p>
+              <p class="font-medium mt-1 whitespace-pre-line">{{ currentAuthDetail.opinion }}</p>
+            </div>
           </div>
         </div>
       </div>
-    </footer>
+
+      <!-- 模态框底部 -->
+      <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+        <button class="btn-secondary" @click="closeModal">
+          <i class="fa fa-times mr-2"></i> 关闭
+        </button>
+        <button v-if="modalType === 'stdAuth'" class="btn-primary" @click="submitStdAuth">
+          <i class="fa fa-check mr-2"></i> 提交授权
+        </button>
+        <button v-if="modalType === 'applyDetail' && currentApplyDetail.status === '已通过'" class="btn-primary" @click="downloadAuthorization">
+          <i class="fa fa-download mr-2"></i> 下载授权书
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'DatabaseManagementSystem',
+  name: 'DatabaseAuthorizationSystem',
   data() {
     return {
+      // 侧边栏状态
       isSidebarOpen: true,
       activeSection: '公共数据库表查看',
       currentSubTab: '申请流程',
+      
+      // 数据概览
+      pendingApps: 5,
+      courseDBs: 4,
+      stdAuthApps: 3,
+      ownDBs: 2,
+      
+      // 公共数据库表查看
       databaseTables: [
-        { name: 'students', description: '学生基本信息表', columns: 12 },
-        { name: 'courses', description: '课程信息表', columns: 8 },
-        { name: 'scores', description: '学生成绩表', columns: 6 },
-        { name: 'teachers', description: '教师信息表', columns: 10 },
-        { name: 'departments', description: '院系信息表', columns: 5 },
-        { name: 'majors', description: '专业信息表', columns: 7 },
-        { name: 'classrooms', description: '教室信息表', columns: 4 },
-        { name: 'textbooks', description: '教材信息表', columns: 9 }
+        { name: 'student_info', description: '学生基本信息表', columns: 15 },
+        { name: 'course_selection', description: '学生选课记录表', columns: 8 },
+        { name: 'teacher_info', description: '教师基本信息表', columns: 12 },
+        { name: 'course_info', description: '课程信息表', columns: 10 },
+        { name: 'score_record', description: '学生成绩记录表', columns: 7 },
+        { name: 'department_info', description: '院系信息表', columns: 6 },
+        { name: 'major_info', description: '专业信息表', columns: 5 },
+        { name: 'class_info', description: '班级信息表', columns: 5 },
       ],
       selectedTables: [],
       applyReason: '',
       expectedUse: '',
+      
+      // 学生自建数据库授权
+      stdAuthApplications: [
+        { id: 'AuthApp20250620001', userId: '2025001', courseid: 'CS2025', dataBaseId: 'DB2025001', description: '申请数据库原理课程实验用数据库', createTime: '2025-06-20 08:30', status: 0 },
+        { id: 'AuthApp20250619002', userId: '2025002', courseid: 'CS2025', dataBaseId: 'DB2025002', description: '申请大数据技术课程项目用数据库', createTime: '2025-06-19 14:15', status: 1 },
+        { id: 'AuthApp20250618003', userId: '2025003', courseid: 'CS2025', dataBaseId: 'DB2025003', description: '申请数据挖掘课程研究用数据库', createTime: '2025-06-18 16:45', status: 2 },
+      ],
+      authStatusFilter: '',
+      authDateRange: '',
+      authKeyword: '',
+      currentPage: 1,
+      pageSize: 10,
+      
+      // 自建数据库申请
       dbName: '',
       dbType: '',
       dbPurpose: '',
       dataVolume: '',
       courseBind: '',
       applyForStudents: false,
-      isTableModalOpen: false,
-      isStdAuthModalOpen: false,
-      stdAuthModalTitle: '学生数据库授权申请',
-      currentStdAuthApp: null,
-      authComment: '',
-      stdAuthApplications: [
-        { id: 'Auth20250620001', student: '张三 (S2023001)', dbName: '电商数据分析', time: '2025-06-20 15:45', status: '待处理', statusClass: 'bg-yellow-100 text-yellow-800' },
-        { id: 'Auth20250619002', student: '李四 (S2023015)', dbName: '机器学习实验', time: '2025-06-19 10:20', status: '待处理', statusClass: 'bg-yellow-100 text-yellow-800' },
-        { id: 'Auth20250618003', student: '王五 (S2023032)', dbName: '数据库课程作业', time: '2025-06-18 11:30', status: '待处理', statusClass: 'bg-yellow-100 text-yellow-800' },
-        { id: 'Auth20250617004', student: '赵六 (S2023045)', dbName: '数据结构实践', time: '2025-06-17 09:15', status: '已授权', statusClass: 'bg-green-100 text-green-800' },
-        { id: 'Auth20250616005', student: '钱七 (S2023058)', dbName: '算法设计与分析', time: '2025-06-16 14:30', status: '已拒绝', statusClass: 'bg-red-100 text-red-800' }
-      ]
+      
+      // 我的授权记录
+      authRecords: [
+        { id: 'Auth20250619001', userId: '2025001', courseid: 'CS2025', dataBaseId: 'DB2025001', description: '数据库原理课程实验用数据库', authorizedId: '李教授', approverId: '王管理员', authTime: '2025-06-19 14:30', status: 'active' },
+        { id: 'Auth20250615002', userId: '2025002', courseid: 'CS2025', dataBaseId: 'DB2025002', description: '科研数据库 - 实验数据表', authorizedId: '李教授', approverId: '张管理员', authTime: '2025-06-15 16:45', status: 'expired' },
+        { id: 'Auth20250610003', userId: '2025003', courseid: 'CS2025', dataBaseId: 'DB2025003', description: '大数据技术课程项目用数据库', authorizedId: '李教授', approverId: '王管理员', authTime: '2025-06-10 09:20', status: 'revoked' },
+      ],
+      authRecordTypeFilter: '',
+      authRecordStatusFilter: '',
+      authRecordStartDate: '',
+      authRecordEndDate: '',
+      authRecordKeyword: '',
+      
+      // 模态框相关
+      isModalOpen: false,
+      modalType: '',
+      modalTitle: '',
+      currentApplyDetail: {},
+      currentStdAuth: {},
+      currentAuthDetail: {},
+      authPermission: 'read-only',
+      authDuration: 90,
+      authOpinion: '',
+      
+      // 申请记录筛选
+      applyTypeFilter: '',
+      applyStatusFilter: '',
+      applyStartDate: '',
+      applyEndDate: '',
+      applyKeyword: ''
+    }
+  },
+  computed: {
+    // 计算学生授权申请筛选结果
+    filteredStdAuthApplications() {
+      return this.stdAuthApplications.filter(app => {
+        if (this.authStatusFilter && app.status !== parseInt(this.authStatusFilter)) {
+          return false;
+        }
+        if (this.authKeyword && !app.id.includes(this.authKeyword) && !app.userId.includes(this.authKeyword)) {
+          return false;
+        }
+        if (this.authDateRange && !app.createTime.startsWith(this.authDateRange)) {
+          return false;
+        }
+        return true;
+      });
+    },
+    
+    // 计算总页数
+    totalPages() {
+      return Math.ceil(this.filteredStdAuthApplications.length / this.pageSize);
     }
   },
   methods: {
+    // 切换侧边栏
     toggleSidebar() {
       this.isSidebarOpen = !this.isSidebarOpen;
     },
+    
+    // 切换主内容区
     changeSection(section) {
       this.activeSection = section;
-      // 重置子选项卡为默认值
+      // 重置子选项卡为默认
       if (section === '公共数据库表查看' || section === '自建数据库申请') {
         this.currentSubTab = '申请流程';
       } else if (section === '学生自建数据库授权') {
         this.currentSubTab = '授权操作';
       }
     },
+    
+    // 切换子选项卡
     changeSubTab(tab) {
       this.currentSubTab = tab;
     },
+    
+    // 全选/取消全选表
     toggleAllTables(event) {
-      const checkboxes = document.querySelectorAll('.table-checkbox');
-      checkboxes.forEach(checkbox => {
-        checkbox.checked = event.target.checked;
-        if (event.target.checked) {
-          this.selectedTables.push(checkbox.dataset.table);
-        } else {
-          const index = this.selectedTables.indexOf(checkbox.dataset.table);
-          if (index !== -1) {
-            this.selectedTables.splice(index, 1);
-          }
-        }
-      });
-    },
-    openTableModal() {
-      this.isTableModalOpen = true;
-    },
-    closeTableModal() {
-      this.isTableModalOpen = false;
-    },
-    openStdAuthModal(app) {
-      this.currentStdAuthApp = app;
-      this.isStdAuthModalOpen = true;
-    },
-    closeStdAuthModal() {
-      this.isStdAuthModalOpen = false;
-      this.currentStdAuthApp = null;
-      this.authComment = '';
-    },
-    approveStdAuth() {
-      // 处理批准逻辑
-      if (this.currentStdAuthApp) {
-        this.currentStdAuthApp.status = '已授权';
-        this.currentStdAuthApp.statusClass = 'bg-green-100 text-green-800';
-        this.isStdAuthModalOpen = false;
-        // 这里可以添加实际的API调用代码
-        console.log('批准授权申请:', this.currentStdAuthApp.id);
-      }
-    },
-    rejectStdAuth() {
-      // 处理拒绝逻辑
-      if (this.currentStdAuthApp) {
-        this.currentStdAuthApp.status = '已拒绝';
-        this.currentStdAuthApp.statusClass = 'bg-red-100 text-red-800';
-        this.isStdAuthModalOpen = false;
-        // 这里可以添加实际的API调用代码
-        console.log('拒绝授权申请:', this.currentStdAuthApp.id);
+      const isChecked = event.target.checked;
+      if (isChecked) {
+        this.selectedTables = this.databaseTables.map(table => table.name);
+      } else {
+        this.selectedTables = [];
       }
     },
+    
+    // 提交表查看申请
     submitTableApply() {
-      // 提交公共数据库表查看申请
-      if (!this.applyReason || this.selectedTables.length === 0) {
-        alert('请填写申请理由并选择要查看的表');
+      if (this.selectedTables.length === 0) {
+        alert('请选择要查看的表');
         return;
       }
       
-      // 模拟提交成功
-      alert('申请已提交成功！申请编号：DBView' + new Date().getFullYear() + (new Date().getMonth() + 1).toString().padStart(2, '0') + new Date().getDate().toString().padStart(2, '0') + Math.floor(Math.random() * 1000).toString().padStart(3, '0'));
+      if (!this.applyReason) {
+        alert('请填写申请理由');
+        return;
+      }
+      
+      // 模拟提交申请
+      console.log('提交申请:', {
+        tables: this.selectedTables,
+        reason: this.applyReason,
+        expectedUse: this.expectedUse
+      });
+      
+      alert('申请已提交成功！申请编号：DBView20250625001');
       
       // 重置表单
       this.selectedTables = [];
       this.applyReason = '';
       this.expectedUse = '';
       
-      // 刷新申请状态跟踪页面
-      if (this.activeSection === '公共数据库表查看' && this.currentSubTab === '申请流程') {
-        this.changeSubTab('申请状态跟踪');
-      }
+      // 更新数据概览
+      this.pendingApps++;
     },
+    
+    // 提交自建数据库申请
     submitOwnDBApply() {
-      // 提交自建数据库申请
-      if (!this.dbName || !this.dbType || !this.dbPurpose || !this.dataVolume) {
-        alert('请填写完整的数据库申请信息');
+      if (!this.dbName) {
+        alert('请填写数据库名称');
         return;
       }
       
-      // 模拟提交成功
-      alert('申请已提交成功！申请编号：DBCreate' + new Date().getFullYear() + (new Date().getMonth() + 1).toString().padStart(2, '0') + new Date().getDate().toString().padStart(2, '0') + Math.floor(Math.random() * 1000).toString().padStart(3, '0'));
+      if (!this.dbType) {
+        alert('请选择数据库类型');
+        return;
+      }
+      
+      if (!this.dbPurpose) {
+        alert('请填写数据库用途');
+        return;
+      }
+      
+      if (!this.dataVolume || this.dataVolume <= 0) {
+        alert('请填写合理的数据量预估');
+        return;
+      }
+      
+      // 模拟提交申请
+      console.log('提交申请:', {
+        dbName: this.dbName,
+        dbType: this.dbType,
+        dbPurpose: this.dbPurpose,
+        dataVolume: this.dataVolume,
+        courseBind: this.courseBind,
+        applyForStudents: this.applyForStudents
+      });
+      
+      alert('申请已提交成功！申请编号：DBCreate20250625001');
       
       // 重置表单
       this.dbName = '';
@@ -1167,64 +1295,285 @@ export default {
       this.courseBind = '';
       this.applyForStudents = false;
       
-      // 刷新申请状态跟踪页面
-      if (this.activeSection === '自建数据库申请' && this.currentSubTab === '申请流程') {
-        this.changeSubTab('申请状态跟踪');
+      // 更新数据概览
+      this.pendingApps++;
+    },
+    
+    // 打开申请详情
+    openApplyDetail(applyId) {
+      // 根据申请ID获取详情数据
+      let detail;
+      if (applyId.startsWith('DBView')) {
+        detail = {
+          id: applyId,
+          type: '公共数据库表查看',
+          applyTime: '2025-06-20 09:30',
+          status: '审核中',
+          reason: '申请查看教学数据库中的学生信息表，用于数据库原理课程的教学演示和学生作业布置。',
+          dbName: '教学数据库',
+          dbType: '关系型数据库',
+          course: '数据库原理',
+          useType: '教学演示'
+        };
+        
+        if (applyId === 'DBView20250618002') {
+          detail.status = '已通过';
+          detail.applyTime = '2025-06-18 14:15';
+          detail.processingOpinion = '同意查看，请合理使用数据。';
+          detail.dbName = '科研数据库';
+          detail.course = '数据挖掘';
+          detail.useType = '科研工作';
+        } else if (applyId === 'DBView20250615003') {
+          detail.status = '已拒绝';
+          detail.applyTime = '2025-06-15 11:45';
+          detail.processingOpinion = '申请理由不充分，请补充详细的使用计划和数据需求说明。';
+          detail.dbName = '经济类数据库';
+          detail.course = '无关联课程';
+          detail.useType = '其他用途';
+        }
+      } else if (applyId.startsWith('DBCreate')) {
+        detail = {
+          id: applyId,
+          type: '自建数据库申请',
+          applyTime: '2025-06-20 10:15',
+          status: '审核中',
+          reason: '申请创建一个机器学习研究用数据库，用于存储和分析实验数据。',
+          dbName: '机器学习研究库',
+          dbType: '关系型数据库',
+          course: '无关联课程',
+          useType: '科研工作'
+        };
       }
-    }
-  },
-  mounted() {
-    // 初始化页面元素
-    this.$nextTick(() => {
-      // 为确认选择表按钮添加事件
-      document.getElementById('confirmTableSelect').addEventListener('click', () => {
-        // 这里可以处理选择表的逻辑
-        this.isTableModalOpen = false;
-      });
       
-      // 为取消选择表按钮添加事件
-      document.getElementById('cancelTableSelect').addEventListener('click', () => {
-        this.isTableModalOpen = false;
-      });
-      
-      // 为关闭表选择模态框按钮添加事件
-      document.getElementById('closeTableModal').addEventListener('click', () => {
-        this.isTableModalOpen = false;
-      });
+      this.currentApplyDetail = detail;
+      this.modalType = 'applyDetail';
+      this.modalTitle = '申请详情';
+      this.isModalOpen = true;
+    },
+    
+    // 打开自建数据库申请详情
+    openOwnDBApplyDetail(applyId) {
+      // 根据申请ID获取详情数据
+      let detail = {
+        id: applyId,
+        type: '自建数据库申请',
+        applyTime: '2025-06-20 10:15',
+        status: '审核中',
+        reason: '申请创建一个机器学习研究用数据库，用于存储和分析实验数据。',
+        dbName: '机器学习研究库',
+        dbType: '关系型数据库',
+        course: '无关联课程',
+        useType: '科研工作'
+      };
       
-      // 为关闭学生授权模态框按钮添加事件
-      document.getElementById('closeStdAuthModal').addEventListener('click', () => {
-        this.isStdAuthModalOpen = false;
+      this.currentApplyDetail = detail;
+      this.modalType = 'applyDetail';
+      this.modalTitle = '申请详情';
+      this.isModalOpen = true;
+    },
+    
+    // 打开学生授权模态框
+    openStdAuthModal(app) {
+      this.currentStdAuth = app;
+      this.modalType = 'stdAuth';
+      this.modalTitle = '学生自建数据库授权处理';
+      this.isModalOpen = true;
+    },
+    
+    // 提交学生授权
+    submitStdAuth() {
+      // 模拟提交授权
+      console.log('提交授权:', {
+        appId: this.currentStdAuth.id,
+        permission: this.authPermission,
+        duration: this.authDuration,
+        opinion: this.authOpinion
       });
       
-      // 为提交自建数据库申请按钮添加事件
-      document.getElementById('submitOwnDBApply').addEventListener('click', this.submitOwnDBApply);
+      alert('授权已提交成功！授权编号：Auth20250625001');
+      this.closeModal();
       
-      // 为提交公共数据库表查看申请按钮添加事件
-      document.getElementById('submitTableApply').addEventListener('click', this.submitTableApply);
+      // 更新申请状态
+      const index = this.stdAuthApplications.findIndex(a => a.id === this.currentStdAuth.id);
+      if (index !== -1) {
+        this.stdAuthApplications[index].status = 2;
+      }
+    },
+    
+    // 打开授权详情
+    openAuthDetail(authId) {
+      // 根据授权ID获取详情数据
+      let detail;
+      if (authId === 'Auth20250619001') {
+        detail = {
+          id: authId,
+          type: '学生自建数据库授权',
+          user: '张三 (2025001)',
+          authorizer: '李教授',
+          authTime: '2025-06-19 14:30',
+          expireTime: '2025-09-30 23:59',
+          status: 'active',
+          permission: '读写',
+          description: '数据库原理课程实验用数据库',
+          opinion: '同意授权，请按照课程要求合理使用数据库。'
+        };
+      } else if (authId === 'Auth20250615002') {
+        detail = {
+          id: authId,
+          type: '公共数据库表查看授权',
+          user: '李四 (2025002)',
+          authorizer: '李教授',
+          authTime: '2025-06-15 16:45',
+          expireTime: '2025-06-30 23:59',
+          status: 'expired',
+          permission: '只读',
+          description: '科研数据库 - 实验数据表',
+          opinion: '同意查看，请在授权期内完成相关研究工作。'
+        };
+      } else if (authId === 'Auth20250610003') {
+        detail = {
+          id: authId,
+          type: '学生自建数据库授权',
+          user: '王五 (2025003)',
+          authorizer: '李教授',
+          authTime: '2025-06-10 09:20',
+          expireTime: '2025-06-15 23:59',
+          status: 'revoked',
+          permission: '读写',
+          description: '大数据技术课程项目用数据库',
+          opinion: '因项目结束，授权已提前撤销。'
+        };
+      }
       
-      // 为学生授权申请处理按钮添加事件
-      document.querySelectorAll('.auth-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-          const appId = btn.dataset.id;
-          const app = this.stdAuthApplications.find(app => app.id === appId);
-          if (app) {
-            this.openStdAuthModal(app);
-          }
-        });
-      });
-    });
+      this.currentAuthDetail = detail;
+      this.modalType = 'authDetail';
+      this.modalTitle = '授权详情';
+      this.isModalOpen = true;
+    },
+    
+    // 撤销授权
+    revokeAuthorization(authId) {
+      if (confirm('确定要撤销该授权吗？')) {
+        // 模拟撤销授权
+        console.log('撤销授权:', authId);
+        
+        // 更新授权状态
+        const index = this.authRecords.findIndex(r => r.id === authId);
+        if (index !== -1) {
+          this.authRecords[index].status = 'revoked';
+        }
+        
+        alert('授权已成功撤销！');
+      }
+    },
+    
+    // 下载授权书
+    downloadAuthorization() {
+      alert('授权书下载中...');
+    },
+    
+    // 关闭模态框
+    closeModal() {
+      this.isModalOpen = false;
+      this.modalType = '';
+      this.authPermission = 'read-only';
+      this.authDuration = 90;
+      this.authOpinion = '';
+    },
+    
+    // 分页相关方法
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+    
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+    },
+    
+    goToPage(page) {
+      this.currentPage = page;
+    },
+    
+    // 获取状态文本
+    getStatusText(status) {
+      const statusMap = {
+        0: '待审核',
+        1: '审核中',
+        2: '已完成'
+      };
+      return statusMap[status] || '未知状态';
+    },
+    
+    // 获取状态类
+    getStatusClass(status) {
+      const statusClassMap = {
+        0: 'bg-yellow-100 text-yellow-800',
+        1: 'bg-blue-100 text-blue-800',
+        2: 'bg-green-100 text-green-800'
+      };
+      return statusClassMap[status] || 'bg-gray-100 text-gray-800';
+    },
+    
+    // 获取记录状态文本
+    getRecordStatusText(status) {
+      const statusMap = {
+        'active': '有效',
+        'expired': '已过期',
+        'revoked': '已撤销'
+      };
+      return statusMap[status] || '未知状态';
+    },
+    
+    // 获取记录状态类
+    getRecordStatusClass(status) {
+      const statusClassMap = {
+        'active': 'bg-green-100 text-green-800',
+        'expired': 'bg-red-100 text-red-800',
+        'revoked': 'bg-gray-100 text-gray-800'
+      };
+      return statusClassMap[status] || 'bg-gray-100 text-gray-800';
+    },
+    
+    // 获取申请状态徽章类
+    getStatusBadgeClass(status) {
+      const statusClassMap = {
+        '待审核': 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800',
+        '审核中': 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800',
+        '已通过': 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800',
+        '已拒绝': 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800'
+      };
+      return statusClassMap[status] || 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800';
+    }
+  },
+  created() {
+    // 模拟数据加载
+    setTimeout(() => {
+      // 初始化表格数据
+      this.pendingApps = 5;
+      this.courseDBs = 4;
+      this.stdAuthApps = 3;
+      this.ownDBs = 2;
+    }, 500);
   }
 }
 </script>
 
-<style scoped>
+<style>
+/* 全局样式 */
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+/* 侧边栏样式 */
 .sidebar-item {
   display: flex;
   align-items: center;
   padding: 0.75rem 1.5rem;
-  color: #6b7280;
-  text-decoration: none;
+  color: #4b5563;
   transition: all 0.2s ease;
 }
 
@@ -1239,15 +1588,16 @@ export default {
   padding: 0.75rem 1.5rem;
   background-color: #e0f2fe;
   color: #0284c7;
-  text-decoration: none;
   border-right: 4px solid #0284c7;
 }
 
+/* 选项卡样式 */
 .tab-active {
-  border-bottom: 2px solid #0284c7;
   color: #0284c7;
+  border-bottom: 2px solid #0284c7;
 }
 
+/* 按钮样式 */
 .btn-primary {
   background-color: #0284c7;
   color: white;
@@ -1255,8 +1605,6 @@ export default {
   border-radius: 0.375rem;
   font-weight: 500;
   transition: all 0.2s ease;
-  border: none;
-  cursor: pointer;
 }
 
 .btn-primary:hover {
@@ -1270,39 +1618,19 @@ export default {
   border-radius: 0.375rem;
   font-weight: 500;
   transition: all 0.2s ease;
-  border: none;
-  cursor: pointer;
 }
 
 .btn-secondary:hover {
   background-color: #e5e7eb;
 }
 
-.btn-danger {
-  background-color: #ef4444;
-  color: white;
-  padding: 0.5rem 1.5rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  border: none;
-  cursor: pointer;
-}
-
-.btn-danger:hover {
-  background-color: #dc2626;
-}
-
+/* 卡片阴影 */
 .card-shadow {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transition: all 0.2s ease;
-}
-
-.card-shadow:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-.hidden {
-  display: none;
+/* 平滑滚动 */
+html {
+  scroll-behavior: smooth;
 }
 </style>
\ No newline at end of file