diff --git a/src/api/index.ts b/src/api/index.ts
index c176296..267ec82 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -13,6 +13,8 @@ export { default as UploadApi } from './modules/upload'
 export { default as StatisticsApi } from './modules/statistics'
 export { default as ExamApi } from './modules/exam'
 export { ChatApi } from './modules/chat'
+export { default as MessageApi } from './modules/message'
+export type { MessageItem, BackendMessageItem, SystemMessage } from './modules/message'
 
 // API 基础配置
 export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/jeecgboot'
@@ -233,6 +235,17 @@ export const API_ENDPOINTS = {
     UNREAD_COUNT: '/aiol/aiolChat/unread-count',
     FOLLOW: '/aiol/aiolUserFollow/follow',
   },
+
+  // 消息相关
+  MESSAGE: {
+    LIKES: '/aiol/message/likes',
+    COMMENTS_AT: '/aiol/message/comments_at',
+    UNREAD_COUNT: '/aiol/message/unread_count',
+    MARK_READ: '/aiol/message/likes/:id/read',
+    BATCH_MARK_READ: '/aiol/message/likes/batch-read',
+    DELETE: '/aiol/message/likes/:id',
+    BATCH_DELETE: '/aiol/message/likes/batch-delete',
+  },
   
   // 资源相关
   RESOURCES: {
diff --git a/src/api/modules/course.ts b/src/api/modules/course.ts
index e8cdde2..c7e82c0 100644
--- a/src/api/modules/course.ts
+++ b/src/api/modules/course.ts
@@ -1228,19 +1228,10 @@ export class CourseApi {
   // 获取课程评论列表
   static async getCourseComments(courseId: string): Promise<ApiResponse<CourseComment[]>> {
     try {
-      console.log('🔍 获取课程评论数据，课程ID:', courseId)
-      console.log('🔍 API请求URL: /aiol/aiolComment/course/' + courseId + '/list')
-
       const response = await ApiRequest.get<any>(`/aiol/aiolComment/course/${courseId}/list`)
-      console.log('🔍 评论API响应:', response)
 
       // 处理后端响应格式
       if (response.data && response.data.success && response.data.result) {
-        console.log('✅ 响应状态码:', response.data.code)
-        console.log('✅ 响应消息:', response.data.message)
-        console.log('✅ 原始评论数据:', response.data.result)
-        console.log('✅ 评论数据数量:', response.data.result.length || 0)
-
         // 适配数据格式
         const adaptedComments: CourseComment[] = response.data.result.map((comment: BackendComment) => ({
           id: comment.id,
@@ -1256,8 +1247,6 @@ export class CourseApi {
           timeAgo: this.formatTimeAgo(comment.createTime) // 计算相对时间
         }))
 
-        console.log('✅ 适配后的评论数据:', adaptedComments)
-
         return {
           code: response.data.code,
           message: response.data.message,
diff --git a/src/api/modules/message.ts b/src/api/modules/message.ts
new file mode 100644
index 0000000..b2eae5c
--- /dev/null
+++ b/src/api/modules/message.ts
@@ -0,0 +1,428 @@
+import request from '../request'
+import type { ApiResponse } from '../types'
+
+// 后端原始消息类型
+export interface BackendMessageItem {
+  id: string
+  anntId: string
+  userId: string
+  titile: string
+  msgContent: string // JSON字符串，需要解析
+  sender: string
+  priority: string
+  readFlag: number
+  sendTime: string
+  pageNo: null
+  pageSize: null
+  msgCategory: string
+  busId: null
+  busType: null
+  openType: null
+  openPage: null
+  bizSource: null
+  msgAbstract: null
+  sendTimeBegin: null
+  sendTimeEnd: null
+  files: null
+  visitsNum: null
+  izTop: number
+}
+
+// 解析后的消息内容类型
+export interface ParsedMessageContent {
+  sender: {
+    id: string
+    username: string
+  }
+  entity: {
+    type: string // "course", "comment" 等
+    id: string
+    title: string
+  }
+  action: string // "like", "favorite" 等
+  actionTime: string
+}
+
+// 前端使用的消息类型
+export interface MessageItem {
+  id: string
+  type: number // 0-点赞, 1-收藏
+  username: string
+  avatar: string
+  courseInfo: string
+  content: string
+  timestamp: string
+  courseImage?: string
+  isLiked: boolean
+  isFavorited: boolean
+  showReplyBox: boolean
+  replyContent: string
+  readFlag: number // 是否已读
+  action: string // 动作类型
+}
+
+// 系统消息类型
+export interface SystemMessage {
+  id: string
+  title: string
+  content: string
+  timestamp: string
+  isRead: boolean
+  type: 'info' | 'warning' | 'success' | 'error'
+}
+
+// 消息列表响应类型
+export interface MessageListResponse {
+  records: BackendMessageItem[]
+  total: number
+  size: number
+  current: number
+  pages: number
+}
+
+// 消息数量响应类型
+export interface MessageCountResponse {
+  total: number
+  unread: number
+}
+
+// 后端消息列表响应格式（实际接口返回的格式）
+export interface BackendMessageListResponse {
+  data: {
+    success: boolean
+    message: string
+    code: number
+    result: MessageListResponse
+    timestamp: number
+  }
+}
+
+// 后端消息数量响应格式（实际接口返回的格式）
+export interface BackendMessageCountResponse {
+  data: {
+    success: boolean
+    message: string
+    code: number
+    result: MessageCountResponse
+    timestamp: number
+  }
+}
+
+// 数据转换函数
+export const transformMessageData = (backendItem: BackendMessageItem): MessageItem => {
+  let parsedContent: ParsedMessageContent | null = null
+  
+  try {
+    parsedContent = JSON.parse(backendItem.msgContent)
+  } catch (error) {
+    console.error('解析消息内容失败:', error)
+  }
+
+  // 根据action确定消息类型
+  const action = parsedContent?.action || 'unknown'
+  const type = action === 'like' ? 0 : action === 'favorite' ? 1 : 0
+
+  return {
+    id: backendItem.id,
+    type,
+    username: parsedContent?.sender?.username || backendItem.sender || '未知用户',
+    avatar: `https://picsum.photos/200/200?random=${backendItem.id}`, // 使用随机头像
+    courseInfo: parsedContent?.entity?.title || '未知课程',
+    content: action === 'like' ? '赞了我的评论' : '收藏了我的课程',
+    timestamp: backendItem.sendTime,
+    courseImage: action === 'favorite' ? `https://picsum.photos/300/200?random=${backendItem.id}` : undefined,
+    isLiked: false,
+    isFavorited: false,
+    showReplyBox: false,
+    replyContent: '',
+    readFlag: backendItem.readFlag,
+    action
+  }
+}
+
+// 消息API类
+class MessageApi {
+  /**
+   * 获取赞和收藏消息列表
+   * @param params 查询参数
+   * @returns Promise<BackendMessageListResponse>
+   */
+  async getLikesMessages(params: {
+    current?: number
+    size?: number
+    type?: number // 可选：筛选消息类型
+  } = {}): Promise<BackendMessageListResponse> {
+    return request({
+      url: '/aiol/message/likes',
+      method: 'GET',
+      params: {
+        current: params.current || 1,
+        size: params.size || 20,
+        ...params
+      }
+    })
+  }
+
+  /**
+   * 获取评论和@消息列表
+   * @param params 查询参数
+   * @returns Promise<BackendMessageListResponse>
+   */
+  async getCommentsAtMessages(params: {
+    current?: number
+    size?: number
+    type?: number // 可选：筛选消息类型
+  } = {}): Promise<BackendMessageListResponse> {
+    return request({
+      url: '/aiol/message/comments_at',
+      method: 'GET',
+      params: {
+        current: params.current || 1,
+        size: params.size || 20,
+        ...params
+      }
+    })
+  }
+
+  /**
+   * 获取赞和收藏消息数量（通过获取第一页数据来计算未读数量）
+   * @returns Promise<BackendMessageCountResponse>
+   */
+  async getLikesMessageCount(): Promise<BackendMessageCountResponse> {
+    try {
+      // 通过获取第一页数据来获取总数和未读数量
+      const response = await this.getLikesMessages({ current: 1, size: 10 })
+      console.log('🔍 getLikesMessageCount 响应数据:', response)
+      
+      if (response.data?.success) {
+        const total = response.data.result.total || 0
+        // 计算未读数量（readFlag为0表示未读）
+        const unread = response.data.result.records.filter(item => item.readFlag === 0).length
+        
+        console.log('📊 赞和收藏消息统计:', {
+          total,
+          unread,
+          records: response.data.result.records.map(item => ({
+            id: item.id,
+            readFlag: item.readFlag,
+            sendTime: item.sendTime
+          }))
+        })
+        
+        return {
+          data: {
+            success: true,
+            message: '获取成功',
+            code: 200,
+            result: {
+              total,
+              unread
+            },
+            timestamp: Date.now()
+          }
+        }
+      } else {
+        return {
+          data: {
+            success: false,
+            message: response.data?.message || '获取失败',
+            code: response.data?.code || 500,
+            result: { total: 0, unread: 0 },
+            timestamp: Date.now()
+          }
+        }
+      }
+    } catch (error) {
+      console.error('获取消息数量失败:', error)
+      return {
+        data: {
+          success: false,
+          message: '获取消息数量失败',
+          code: 500,
+          result: { total: 0, unread: 0 },
+          timestamp: Date.now()
+        }
+      }
+    }
+  }
+
+  /**
+   * 获取评论和@消息数量（通过获取第一页数据来计算未读数量）
+   * @returns Promise<BackendMessageCountResponse>
+   */
+  async getCommentsAtMessageCount(): Promise<BackendMessageCountResponse> {
+    try {
+      // 通过获取第一页数据来获取总数和未读数量
+      const response = await this.getCommentsAtMessages({ current: 1, size: 10 })
+      if (response.data?.success) {
+        const total = response.data.result.total || 0
+        // 计算未读数量（readFlag为0表示未读）
+        const unread = response.data.result.records.filter(item => item.readFlag === 0).length
+
+        return {
+          data: {
+            success: true,
+            message: '获取成功',
+            code: 200,
+            result: {
+              total,
+              unread
+            },
+            timestamp: Date.now()
+          }
+        }
+      } else {
+        return {
+          data: {
+            success: false,
+            message: response.data?.message || '获取失败',
+            code: response.data?.code || 500,
+            result: { total: 0, unread: 0 },
+            timestamp: Date.now()
+          }
+        }
+      }
+    } catch (error) {
+      console.error('获取评论@消息数量失败:', error)
+      return {
+        data: {
+          success: false,
+          message: '获取评论@消息数量失败',
+          code: 500,
+          result: { total: 0, unread: 0 },
+          timestamp: Date.now()
+        }
+      }
+    }
+  }
+
+  /**
+   * 标记消息为已读
+   * @param messageId 消息ID
+   * @returns Promise<ApiResponse<null>>
+   */
+  async markAsRead(messageId: number): Promise<ApiResponse<null>> {
+    return request({
+      url: `/aiol/message/likes/${messageId}/read`,
+      method: 'PUT'
+    })
+  }
+
+  /**
+   * 批量标记消息为已读
+   * @param messageIds 消息ID数组
+   * @returns Promise<ApiResponse<null>>
+   */
+  async batchMarkAsRead(messageIds: number[]): Promise<ApiResponse<null>> {
+    return request({
+      url: '/aiol/message/likes/batch-read',
+      method: 'PUT',
+      data: { messageIds }
+    })
+  }
+
+  /**
+   * 删除消息
+   * @param messageId 消息ID
+   * @returns Promise<ApiResponse<null>>
+   */
+  async deleteMessage(messageId: number): Promise<ApiResponse<null>> {
+    return request({
+      url: `/aiol/message/likes/${messageId}`,
+      method: 'DELETE'
+    })
+  }
+
+  /**
+   * 批量删除消息
+   * @param messageIds 消息ID数组
+   * @returns Promise<ApiResponse<null>>
+   */
+  async batchDeleteMessages(messageIds: number[]): Promise<ApiResponse<null>> {
+    return request({
+      url: '/aiol/message/likes/batch-delete',
+      method: 'DELETE',
+      data: { messageIds }
+    })
+  }
+
+  /**
+   * 获取当前用户未读消息总数
+   * @returns Promise<ApiResponse<{ total: number, unread: number }>>
+   */
+  async getUnreadMessageCount(): Promise<ApiResponse<{ total: number, unread: number }>> {
+    try {
+      const response = await request({
+        url: '/aiol/message/unread_count',
+        method: 'GET'
+      })
+      
+      return {
+        code: 200,
+        message: '获取成功',
+        data: response.data || { total: 0, unread: 0 }
+      }
+    } catch (error) {
+      console.error('获取未读消息数量失败:', error)
+      return {
+        code: 500,
+        message: '获取未读消息数量失败',
+        data: { total: 0, unread: 0 }
+      }
+    }
+  }
+
+  /**
+   * 获取系统消息列表
+   * @param params 分页参数
+   * @returns Promise<ApiResponse<{ records: BackendMessageItem[], total: number, current: number, pages: number }>>
+   */
+  async getSystemMessages(params?: { pageNo?: number, pageSize?: number }): Promise<ApiResponse<{
+    records: BackendMessageItem[]
+    total: number
+    current: number
+    pages: number
+  }>> {
+    return request({
+      url: '/aiol/message/system',
+      method: 'GET',
+      params
+    })
+  }
+
+  /**
+   * 获取系统消息数量统计
+   * @returns Promise<ApiResponse<{ total: number, unread: number }>>
+   */
+  async getSystemMessageCount(): Promise<ApiResponse<{ total: number, unread: number }>> {
+    try {
+      const response = await this.getSystemMessages({ pageNo: 1, pageSize: 1 })
+      
+      if (response.data && response.data.records) {
+        const total = response.data.total || 0
+        const unread = response.data.records.filter((item: BackendMessageItem) => item.readFlag === 0).length
+        
+        return {
+          code: 200,
+          message: '获取成功',
+          data: { total, unread }
+        }
+      }
+      
+      return {
+        code: 500,
+        message: '获取系统消息数量失败',
+        data: { total: 0, unread: 0 }
+      }
+    } catch (error) {
+      console.error('获取系统消息数量失败:', error)
+      return {
+        code: 500,
+        message: '获取系统消息数量失败',
+        data: { total: 0, unread: 0 }
+      }
+    }
+  }
+}
+
+export default new MessageApi()
\ No newline at end of file
diff --git a/src/api/modules/teachCourse.ts b/src/api/modules/teachCourse.ts
index d51eb15..1d8ab5c 100644
--- a/src/api/modules/teachCourse.ts
+++ b/src/api/modules/teachCourse.ts
@@ -27,6 +27,7 @@ export interface TeachCourse {
   max_enroll?: number | null
   status?: number | null
   question?: string | null
+  categoryId?: string | number | null // 课程分类ID
 }
 
 // 新建课程请求参数
diff --git a/src/api/request.ts b/src/api/request.ts
index c116751..a238801 100644
--- a/src/api/request.ts
+++ b/src/api/request.ts
@@ -62,15 +62,15 @@ request.interceptors.request.use(
     // 添加请求时间戳
     config.headers['X-Request-Time'] = Date.now().toString()
 
-    // 开发环境下打印请求信息
-    if (import.meta.env.DEV) {
-      console.log('🚀 Request:', {
-        url: config.url,
-        method: config.method,
-        params: config.params,
-        data: config.data,
-      })
-    }
+    // 开发环境下打印请求信息（已禁用）
+    // if (import.meta.env.DEV) {
+    //   console.log('🚀 Request:', {
+    //     url: config.url,
+    //     method: config.method,
+    //     params: config.params,
+    //     data: config.data,
+    //   })
+    // }
 
     return config
   },
@@ -85,14 +85,14 @@ request.interceptors.response.use(
   (response: AxiosResponse<any>) => {
     const { data } = response
 
-    // 开发环境下打印响应信息
-    if (import.meta.env.DEV) {
-      console.log('✅ Response:', {
-        url: response.config.url,
-        status: response.status,
-        data: data,
-      })
-    }
+    // 开发环境下打印响应信息（已禁用）
+    // if (import.meta.env.DEV) {
+    //   console.log('✅ Response:', {
+    //     url: response.config.url,
+    //     status: response.status,
+    //     data: data,
+    //   })
+    // }
 
     // 如果是blob响应，直接返回
     if (response.config.responseType === 'blob') {
@@ -105,6 +105,21 @@ request.interceptors.response.use(
     // 如果响应已经是标准格式
     if (data && typeof data === 'object' && 'code' in data && 'message' in data) {
       normalizedData = data
+    } else if (data && typeof data === 'object' && 'success' in data && 'result' in data) {
+      // 处理 { success, message, code, result } 格式
+      normalizedData = {
+        code: data.code || 200,
+        message: data.message || '请求成功',
+        data: data.result
+      }
+    } else if (data && typeof data === 'object' && 'data' in data && data.data && typeof data.data === 'object' && 'success' in data.data) {
+      // 处理 { data: { success, message, code, result } } 格式
+      const innerData = data.data
+      normalizedData = {
+        code: innerData.code || 200,
+        message: innerData.message || '请求成功',
+        data: innerData.result
+      }
     } else {
       // 如果响应不是标准格式，包装成标准格式
       normalizedData = {
@@ -192,7 +207,10 @@ request.interceptors.response.use(
       errorMessage = '网络连接失败，请检查网络设置'
     }
 
-    showMessage(errorMessage, 'error')
+    // 对于404错误，不显示错误消息，因为可能是接口不存在
+    if (response?.status !== 404) {
+      showMessage(errorMessage, 'error')
+    }
     return Promise.reject(error)
   }
 )
diff --git a/src/components/search/SearchDropdown.vue b/src/components/search/SearchDropdown.vue
index 14c91fb..c098820 100644
--- a/src/components/search/SearchDropdown.vue
+++ b/src/components/search/SearchDropdown.vue
@@ -91,9 +91,7 @@ interface HotSearchItem {
 // 获取热门搜索数据
 const fetchHotSearch = async () => {
   try {
-    console.log('🚀 获取热门搜索数据...')
     const response = await ApiRequest.get<HotSearchItem[]>('/aiol/index/hot_search')
-    console.log('📊 热门搜索API响应:', response)
     
     if (response.data) {
       const apiResponse = response.data as any
@@ -104,7 +102,6 @@ const fetchHotSearch = async () => {
         if (success && apiResponse.result) {
           hotSearchList.value = apiResponse.result
         } else {
-          console.error('❌ 获取热门搜索失败:', apiResponse.message || '未知错误')
           // 使用模拟数据
           hotSearchList.value = getMockHotSearch()
         }
@@ -112,17 +109,12 @@ const fetchHotSearch = async () => {
         // 直接是数组数据
         hotSearchList.value = apiResponse
       } else {
-        console.error('❌ 热门搜索数据格式错误')
         hotSearchList.value = getMockHotSearch()
       }
     } else {
-      console.error('❌ 热门搜索响应为空')
       hotSearchList.value = getMockHotSearch()
     }
-    
-    console.log('✅ 热门搜索数据加载完成:', hotSearchList.value)
   } catch (error) {
-    console.error('❌ 获取热门搜索异常:', error)
     // 使用模拟数据
     hotSearchList.value = getMockHotSearch()
   }
diff --git a/src/components/teacher/ClassManagement.vue b/src/components/teacher/ClassManagement.vue
index 01c8b4f..ff4b843 100644
--- a/src/components/teacher/ClassManagement.vue
+++ b/src/components/teacher/ClassManagement.vue
@@ -64,7 +64,7 @@
                 <n-button type="primary" ghost @click="showImportModal = true">
                     导入
                 </n-button>
-                <n-button type="primary" ghost>
+                <n-button type="primary" ghost @click="handleExport">
                     导出
                 </n-button>
                 <n-input v-model:value="searchKeyword" placeholder="请输入姓名/账号" style="width: 200px"
@@ -290,6 +290,7 @@ import {
 } from 'naive-ui'
 import type { DataTableColumns } from 'naive-ui'
 import ImportModal from '@/components/common/ImportModal.vue'
+import { exportTableToExcel, type ExportColumn } from '@/utils/excelExport'
 
 // 定义 props 类型
 interface Props {
@@ -733,6 +734,82 @@ const handleBatchTransfer = () => {
     showBatchTransferModal.value = true
 }
 
+// 导出功能
+const handleExport = () => {
+    try {
+        // 检查是否有选中的行
+        if (selectedRowKeys.value.length === 0) {
+            message.warning('请先选择要导出的学员')
+            return
+        }
+
+        // 获取当前显示的数据源
+        const currentData = filteredData.value.length > 0 ? filteredData.value : data.value
+
+        // 根据选中的keys筛选数据
+        const exportData = currentData.filter((item: StudentItem) => selectedRowKeys.value.includes(item.id))
+
+        if (exportData.length === 0) {
+            message.warning('没有找到选中的学员数据')
+            return
+        }
+
+        // 定义导出列配置
+        const exportColumns: ExportColumn[] = [
+            {
+                title: '姓名',
+                key: 'studentName'
+            },
+            {
+                title: '账号',
+                key: 'accountNumber'
+            },
+            {
+                title: '班级',
+                key: 'className',
+                render: (value: any) => {
+                    // 处理班级名称，将多个班级用分号分隔
+                    if (typeof value === 'string' && value.includes(',')) {
+                        return value.split(',').join(';')
+                    }
+                    return value || ''
+                }
+            },
+            {
+                title: '所在学院',
+                key: 'college'
+            },
+            {
+                title: '加入时间',
+                key: 'joinTime'
+            }
+        ]
+
+        // 生成文件名
+        const currentClassName = props.type === 'student'
+            ? (classList.value.find(item => item.id === props.classId)?.className || '全部班级')
+            : '班级管理'
+
+        const filename = `${currentClassName}_选中学员信息`
+
+        // 执行导出
+        exportTableToExcel(exportData, exportColumns, filename)
+
+        message.success(`成功导出 ${exportData.length} 条选中学员信息`)
+        console.log('✅ 导出完成:', {
+            selectedCount: selectedRowKeys.value.length,
+            exportCount: exportData.length,
+            filename,
+            selectedIds: selectedRowKeys.value,
+            data: exportData.slice(0, 3) // 只打印前3条数据作为示例
+        })
+
+    } catch (error) {
+        console.error('❌ 导出失败:', error)
+        message.error('导出失败，请重试')
+    }
+}
+
 // 确认批量调班
 const confirmBatchTransfer = async () => {
     if (!selectedTargetClass.value) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 483145e..2c0f5b4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -365,6 +365,42 @@ const routes: RouteRecordRaw[] = [
         component: AIAssistantDetail,
         meta: { title: '查看详情' }
       },
+      {
+        path: 'ai-orchestration',
+        name: 'AIOrchestration',
+        component: () => import('@/views/teacher/ai-orchestration/index.vue'),
+        meta: { title: '智能体编排' }
+      },
+      {
+        path: 'ai-orchestration/app-management',
+        name: 'AIAppManagement',
+        component: () => import('@/views/teacher/ai-orchestration/app-management.vue'),
+        meta: { title: 'AI应用管理' }
+      },
+      {
+        path: 'ai-orchestration/knowledge-base',
+        name: 'AIKnowledgeBase',
+        component: () => import('@/views/teacher/ai-orchestration/knowledge-base.vue'),
+        meta: { title: 'AI知识库' }
+      },
+      {
+        path: 'ai-orchestration/process-design',
+        name: 'AIProcessDesign',
+        component: () => import('@/views/teacher/ai-orchestration/process-design.vue'),
+        meta: { title: 'AI流程设计' }
+      },
+      {
+        path: 'ai-orchestration/model-config',
+        name: 'AIModelConfig',
+        component: () => import('@/views/teacher/ai-orchestration/model-config.vue'),
+        meta: { title: 'AI模型配置' }
+      },
+      {
+        path: 'ai-orchestration/ocr-recognition',
+        name: 'AIOCRRecognition',
+        component: () => import('@/views/teacher/ai-orchestration/ocr-recognition.vue'),
+        meta: { title: 'OCR识别' }
+      },
       {
         path: 'student-management',
         name: 'StudentManagement',
diff --git a/src/utils/excelExport.ts b/src/utils/excelExport.ts
new file mode 100644
index 0000000..fbaf8b3
--- /dev/null
+++ b/src/utils/excelExport.ts
@@ -0,0 +1,117 @@
+/**
+ * Excel导出工具函数
+ * 使用浏览器原生API实现前端Excel导出（CSV格式，可被Excel打开）
+ */
+
+// 定义导出数据的类型
+export interface ExportColumn {
+  title: string
+  key: string
+  width?: number
+  render?: (value: any, row: any) => string
+}
+
+export interface ExportOptions {
+  filename?: string
+  columns: ExportColumn[]
+  data: any[]
+}
+
+/**
+ * 将CSV字符串转换为Excel兼容的格式
+ * @param csvContent CSV内容
+ * @returns Excel兼容的Blob
+ */
+function csvToExcelBlob(csvContent: string): Blob {
+  // 添加BOM以支持中文
+  const BOM = '\uFEFF'
+  const content = BOM + csvContent
+  
+  return new Blob([content], { 
+    type: 'application/vnd.ms-excel;charset=utf-8' 
+  })
+}
+
+/**
+ * 转义CSV字段值
+ * @param value 字段值
+ * @returns 转义后的值
+ */
+function escapeCsvField(value: any): string {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  
+  const str = String(value)
+  
+  // 如果包含逗号、引号或换行符，需要用引号包围并转义引号
+  if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+    return `"${str.replace(/"/g, '""')}"`
+  }
+  
+  return str
+}
+
+/**
+ * 将数据导出为Excel文件（CSV格式）
+ * @param options 导出配置
+ */
+export function exportToExcel(options: ExportOptions): void {
+  const { filename = '导出数据', columns, data } = options
+
+  // 准备CSV内容
+  const csvRows: string[] = []
+  
+  // 添加表头
+  const headers = columns.map(col => escapeCsvField(col.title))
+  csvRows.push(headers.join(','))
+
+  // 添加数据行
+  data.forEach(row => {
+    const rowData = columns.map(col => {
+      let value = row[col.key] || ''
+      
+      // 如果有自定义渲染函数，使用它
+      if (col.render) {
+        value = col.render(value, row)
+      }
+      
+      return escapeCsvField(value)
+    })
+    csvRows.push(rowData.join(','))
+  })
+
+  // 生成CSV内容
+  const csvContent = csvRows.join('\n')
+  
+  // 创建Excel兼容的Blob
+  const blob = csvToExcelBlob(csvContent)
+  
+  // 下载文件
+  const url = window.URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${filename}_${new Date().toISOString().slice(0, 10)}.xlsx`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  window.URL.revokeObjectURL(url)
+}
+
+/**
+ * 简化的导出函数，适用于表格数据
+ * @param data 表格数据
+ * @param columns 列配置
+ * @param filename 文件名
+ */
+export function exportTableToExcel(
+  data: any[], 
+  columns: ExportColumn[], 
+  filename: string = '表格数据'
+): void {
+  exportToExcel({
+    filename,
+    columns,
+    data
+  })
+}
diff --git a/src/views/teacher/AdminDashboard.vue b/src/views/teacher/AdminDashboard.vue
index 3ea928c..87c2d72 100644
--- a/src/views/teacher/AdminDashboard.vue
+++ b/src/views/teacher/AdminDashboard.vue
@@ -11,7 +11,9 @@
       <div class="sidebar-container" v-if="!hideSidebar">
         <!-- 头像 -->
         <div class="avatar-container">
-          <img :src="userStore.user?.avatar" :alt="userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username" class="avatar">
+          <img :src="userStore.user?.avatar"
+            :alt="userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username"
+            class="avatar">
           <div class="avatar-text">
             {{ userStore.user?.profile?.realName || userStore.user?.nickname || userStore.user?.username }}
           </div>
@@ -54,7 +56,8 @@
 
 
           <!-- 学员中心 - 可展开菜单 -->
-          <div class="nav-item" :class="{ active: activeNavItem === 1 }" @click="toggleStudentMenu('/teacher/student-management/student-library')">
+          <div class="nav-item" :class="{ active: activeNavItem === 1 }"
+            @click="toggleStudentMenu('/teacher/student-management/student-library')">
             <img :src="activeNavItem === 1 ? '/images/teacher/学院管理(选中).png' : '/images/teacher/学员管理.png'" alt="">
             <span>学员中心</span>
             <n-icon class="expand-icon" :class="{ expanded: studentMenuExpanded }">
@@ -82,7 +85,8 @@
           </router-link>
           <router-link to="/teacher/message-center" class="nav-item" :class="{ active: activeNavItem === 5 }"
             @click="setActiveNavItem(5)">
-            <img :src="activeNavItem === 5 ? '/images/profile/message-active.png' : '/images/profile/message.png'" alt="">
+            <img :src="activeNavItem === 5 ? '/images/profile/message-active.png' : '/images/profile/message.png'"
+              alt="">
             <span>消息中心</span>
           </router-link>
           <router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }"
@@ -101,6 +105,42 @@
             <span>AI助教</span>
           </router-link>
         </div>
+
+        <!-- 智能体编排 - 可展开菜单 -->
+        <div class="nav-container orchestration-nav">
+          <div class="nav-item" :class="{ active: activeNavItem === 6 }" @click="toggleOrchestrationMenu">
+            <img :src="activeNavItem === 6 ? '/images/aiAssistant/AI助教1.png' : '/images/aiAssistant/AI助教2.png'" alt="">
+            <span>智能体编排</span>
+            <n-icon class="expand-icon" :class="{ expanded: orchestrationMenuExpanded }">
+              <ChevronDownOutline />
+            </n-icon>
+          </div>
+
+          <!-- 智能体编排子菜单 -->
+          <div class="submenu-container" :class="{ expanded: orchestrationMenuExpanded }">
+            <router-link to="/teacher/ai-orchestration/app-management" class="submenu-item"
+              :class="{ active: activeSubNavItem === 'app-management' }" @click="setActiveSubNavItem('app-management')">
+              <span>AI应用管理</span>
+            </router-link>
+            <router-link to="/teacher/ai-orchestration/knowledge-base" class="submenu-item"
+              :class="{ active: activeSubNavItem === 'knowledge-base' }" @click="setActiveSubNavItem('knowledge-base')">
+              <span>AI知识库</span>
+            </router-link>
+            <router-link to="/teacher/ai-orchestration/process-design" class="submenu-item"
+              :class="{ active: activeSubNavItem === 'process-design' }" @click="setActiveSubNavItem('process-design')">
+              <span>AI流程设计</span>
+            </router-link>
+            <router-link to="/teacher/ai-orchestration/model-config" class="submenu-item"
+              :class="{ active: activeSubNavItem === 'model-config' }" @click="setActiveSubNavItem('model-config')">
+              <span>AI模型配置</span>
+            </router-link>
+            <router-link to="/teacher/ai-orchestration/ocr-recognition" class="submenu-item"
+              :class="{ active: activeSubNavItem === 'ocr-recognition' }"
+              @click="setActiveSubNavItem('ocr-recognition')">
+              <span>OCR识别</span>
+            </router-link>
+          </div>
+        </div>
       </div>
 
       <!-- 右侧路由视图 -->
@@ -146,10 +186,11 @@ const height = window.innerHeight;
 console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
 
 // 添加导航项激活状态管理
-const activeNavItem = ref(0); // 0: 课程管理, 1: 学员管理, 2: 我的资源, 3: 个人中心, 4: 考试管理, 5: 消息中心
+const activeNavItem = ref(0); // 0: 课程管理, 1: 学员管理, 2: 我的资源, 3: 个人中心, 4: 考试管理, 5: 消息中心, 6: 智能体编排
 const activeSubNavItem = ref(''); // 子菜单激活状态
 const examMenuExpanded = ref(false); // 考试管理菜单展开状态
 const studentMenuExpanded = ref(false); // 学员中心菜单展开状态
+const orchestrationMenuExpanded = ref(false); // 智能体编排菜单展开状态
 const showTopImage = ref(true); // 控制顶部图片显示/隐藏
 
 // 需要隐藏顶部图片的路由路径数组
@@ -165,7 +206,7 @@ const isAiHovered = ref(false);
 const isAiActive = computed(() => route.path.includes('/teacher/ai-assistant'));
 const breadcrumbDisplay = computed(() => {
   const currentPath = route.path;
-  let arr = ['certificate/new', 'ai-assistant'];
+  let arr = ['certificate/new', 'ai-assistant', 'ai-orchestration'];
   let found = arr.find(item => currentPath.includes(item));
   if (found) {
     return false;
@@ -183,8 +224,12 @@ const setActiveNavItem = (index: number) => {
   if (index !== 1) {
     studentMenuExpanded.value = false;
   }
+  // 如果不是智能体编排，关闭智能体编排子菜单
+  if (index !== 6) {
+    orchestrationMenuExpanded.value = false;
+  }
   // 如果切换到其他菜单，清空子菜单选中状态
-  if (index !== 4 && index !== 1) {
+  if (index !== 4 && index !== 1 && index !== 6) {
     activeSubNavItem.value = '';
   }
 }
@@ -222,6 +267,17 @@ const toggleStudentMenu = (path: string) => {
   }
 }
 
+// 智能体编排菜单切换
+const toggleOrchestrationMenu = () => {
+  orchestrationMenuExpanded.value = !orchestrationMenuExpanded.value;
+  activeNavItem.value = 6;
+
+  // 如果展开且没有选中子菜单，默认选中第一个
+  if (orchestrationMenuExpanded.value && !activeSubNavItem.value) {
+    activeSubNavItem.value = 'app-management';
+  }
+}
+
 // 设置子菜单激活状态
 const setActiveSubNavItem = (subItem: string) => {
   activeSubNavItem.value = subItem;
@@ -235,6 +291,10 @@ const setActiveSubNavItem = (subItem: string) => {
     // 学员中心子菜单
     activeNavItem.value = 1;
     studentMenuExpanded.value = true;
+  } else if (subItem === 'app-management' || subItem === 'knowledge-base' || subItem === 'process-design' || subItem === 'model-config' || subItem === 'ocr-recognition') {
+    // 智能体编排子菜单
+    activeNavItem.value = 6;
+    orchestrationMenuExpanded.value = true;
   }
 }
 
@@ -647,6 +707,80 @@ const breadcrumbPathItems = computed(() => {
     return breadcrumbs;
   }
 
+  // 智能体编排模块的面包屑逻辑
+  if (currentPath.includes('ai-orchestration')) {
+    console.log('智能体编排页面路径:', currentPath);
+    let breadcrumbs: Array<{ title: string, path: string }> = [];
+
+    // 根据具体页面添加子页面标题
+    if (currentPath.includes('app-management')) {
+      breadcrumbs = [
+        {
+          title: '智能体编排',
+          path: '/teacher/ai-orchestration'
+        },
+        {
+          title: 'AI应用管理',
+          path: currentPath
+        }
+      ];
+    } else if (currentPath.includes('knowledge-base')) {
+      breadcrumbs = [
+        {
+          title: '智能体编排',
+          path: '/teacher/ai-orchestration'
+        },
+        {
+          title: 'AI知识库',
+          path: currentPath
+        }
+      ];
+    } else if (currentPath.includes('process-design')) {
+      breadcrumbs = [
+        {
+          title: '智能体编排',
+          path: '/teacher/ai-orchestration'
+        },
+        {
+          title: 'AI流程设计',
+          path: currentPath
+        }
+      ];
+    } else if (currentPath.includes('model-config')) {
+      breadcrumbs = [
+        {
+          title: '智能体编排',
+          path: '/teacher/ai-orchestration'
+        },
+        {
+          title: 'AI模型配置',
+          path: currentPath
+        }
+      ];
+    } else if (currentPath.includes('ocr-recognition')) {
+      breadcrumbs = [
+        {
+          title: '智能体编排',
+          path: '/teacher/ai-orchestration'
+        },
+        {
+          title: 'OCR识别',
+          path: currentPath
+        }
+      ];
+    } else {
+      // 智能体编排主页面
+      breadcrumbs = [
+        {
+          title: '智能体编排',
+          path: currentPath
+        }
+      ];
+    }
+
+    console.log('智能体编排页面面包屑:', breadcrumbs);
+    return breadcrumbs;
+  }
 
   // 其他页面的面包屑逻辑
   const matchedRoutes = route.matched;
@@ -731,6 +865,23 @@ const updateActiveNavItem = () => {
     activeSubNavItem.value = '';
     examMenuExpanded.value = false;
     studentMenuExpanded.value = false;
+  } else if (path.includes('ai-orchestration')) {
+    // 智能体编排相关页面
+    activeNavItem.value = 6; // 智能体编排
+    orchestrationMenuExpanded.value = true;
+
+    // 根据路径设置子菜单激活状态
+    if (path.includes('app-management')) {
+      activeSubNavItem.value = 'app-management';
+    } else if (path.includes('knowledge-base')) {
+      activeSubNavItem.value = 'knowledge-base';
+    } else if (path.includes('process-design')) {
+      activeSubNavItem.value = 'process-design';
+    } else if (path.includes('model-config')) {
+      activeSubNavItem.value = 'model-config';
+    } else if (path.includes('ocr-recognition')) {
+      activeSubNavItem.value = 'ocr-recognition';
+    }
   }
 }
 
@@ -869,7 +1020,17 @@ const updateActiveNavItem = () => {
   width: 240px;
   height: calc(100vh - var(--top-height, 130px));
   background: #FFFFFF;
-  overflow: auto;
+  overflow-y: auto;
+    /* 隐藏滚动条但保持滚动功能 */
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+  }
+  
+  /* 隐藏Webkit浏览器的滚动条 */
+  .sidebar-container::-webkit-scrollbar {
+    display: none;
 }
 
 @media screen and (max-width: 768px) {
@@ -966,6 +1127,10 @@ const updateActiveNavItem = () => {
 
 }
 
+/* 智能体编排菜单移除顶部外边距 */
+.orchestration-nav {
+  margin-top: 10px;
+}
 .nav-container .nav-item {
   margin-left: 15px;
   width: 210px;
diff --git a/src/views/teacher/ai-orchestration/app-management.vue b/src/views/teacher/ai-orchestration/app-management.vue
new file mode 100644
index 0000000..69933df
--- /dev/null
+++ b/src/views/teacher/ai-orchestration/app-management.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="development-page">
+    <div class="page-header">
+      <h1>AI应用管理</h1>
+      <p>管理和配置各种AI应用</p>
+    </div>
+    
+    <div class="development-notice">
+      <div class="notice-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h2>功能开发中</h2>
+      <p>AI应用管理功能正在紧张开发中，敬请期待！</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// AI应用管理页面
+</script>
+
+<style scoped>
+.development-page {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  font-size: 16px;
+  color: #666;
+}
+
+.development-notice {
+  text-align: center;
+  padding: 48px 24px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  border-radius: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.notice-icon {
+  margin-bottom: 24px;
+}
+
+.development-notice h2 {
+  font-size: 24px;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.development-notice p {
+  font-size: 16px;
+  color: #666;
+}
+</style>
diff --git a/src/views/teacher/ai-orchestration/index.vue b/src/views/teacher/ai-orchestration/index.vue
new file mode 100644
index 0000000..caac90d
--- /dev/null
+++ b/src/views/teacher/ai-orchestration/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="ai-orchestration-page">
+    <div class="page-header">
+      <h1>AI编排中心</h1>
+      <p>统一管理和配置AI相关功能</p>
+    </div>
+    
+    <div class="development-notice">
+      <div class="notice-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <div class="notice-content">
+        <h3>功能开发中</h3>
+        <p>AI编排中心功能正在开发中，敬请期待...</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// AI编排中心主页面
+</script>
+
+<style scoped>
+.ai-orchestration-page {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  font-size: 16px;
+  color: #6b7280;
+}
+
+.development-notice {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  text-align: center;
+}
+
+.notice-icon {
+  margin-right: 24px;
+  color: #6b7280;
+}
+
+.notice-content h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.notice-content p {
+  font-size: 14px;
+  color: #6b7280;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/teacher/ai-orchestration/knowledge-base.vue b/src/views/teacher/ai-orchestration/knowledge-base.vue
new file mode 100644
index 0000000..e305d34
--- /dev/null
+++ b/src/views/teacher/ai-orchestration/knowledge-base.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="development-page">
+    <div class="page-header">
+      <h1>AI知识库</h1>
+      <p>构建和管理AI知识库</p>
+    </div>
+    
+    <div class="development-notice">
+      <div class="notice-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h2>功能开发中</h2>
+      <p>AI知识库功能正在紧张开发中，敬请期待！</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// AI知识库页面
+</script>
+
+<style scoped>
+.development-page {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  font-size: 16px;
+  color: #666;
+}
+
+.development-notice {
+  text-align: center;
+  padding: 48px 24px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  border-radius: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.notice-icon {
+  margin-bottom: 24px;
+}
+
+.development-notice h2 {
+  font-size: 24px;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.development-notice p {
+  font-size: 16px;
+  color: #666;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/teacher/ai-orchestration/model-config.vue b/src/views/teacher/ai-orchestration/model-config.vue
new file mode 100644
index 0000000..e1f0109
--- /dev/null
+++ b/src/views/teacher/ai-orchestration/model-config.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="development-page">
+    <div class="page-header">
+      <h1>AI模型配置</h1>
+      <p>配置和优化AI模型参数</p>
+    </div>
+    
+    <div class="development-notice">
+      <div class="notice-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h2>功能开发中</h2>
+      <p>AI模型配置功能正在紧张开发中，敬请期待！</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// AI模型配置页面
+</script>
+
+<style scoped>
+.development-page {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  font-size: 16px;
+  color: #666;
+}
+
+.development-notice {
+  text-align: center;
+  padding: 48px 24px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  border-radius: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.notice-icon {
+  margin-bottom: 24px;
+}
+
+.development-notice h2 {
+  font-size: 24px;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.development-notice p {
+  font-size: 16px;
+  color: #666;
+}
+</style>
diff --git a/src/views/teacher/ai-orchestration/ocr-recognition.vue b/src/views/teacher/ai-orchestration/ocr-recognition.vue
new file mode 100644
index 0000000..4c5f17a
--- /dev/null
+++ b/src/views/teacher/ai-orchestration/ocr-recognition.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="development-page">
+    <div class="page-header">
+      <h1>OCR识别</h1>
+      <p>智能文字识别和处理</p>
+    </div>
+    
+    <div class="development-notice">
+      <div class="notice-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h2>功能开发中</h2>
+      <p>OCR识别功能正在紧张开发中，敬请期待！</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// OCR识别页面
+</script>
+
+<style scoped>
+.development-page {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  font-size: 16px;
+  color: #666;
+}
+
+.development-notice {
+  text-align: center;
+  padding: 48px 24px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  border-radius: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.notice-icon {
+  margin-bottom: 24px;
+}
+
+.development-notice h2 {
+  font-size: 24px;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.development-notice p {
+  font-size: 16px;
+  color: #666;
+}
+</style>
diff --git a/src/views/teacher/ai-orchestration/process-design.vue b/src/views/teacher/ai-orchestration/process-design.vue
new file mode 100644
index 0000000..5057476
--- /dev/null
+++ b/src/views/teacher/ai-orchestration/process-design.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="development-page">
+    <div class="page-header">
+      <h1>AI流程设计</h1>
+      <p>可视化设计AI工作流程</p>
+    </div>
+    
+    <div class="development-notice">
+      <div class="notice-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 17L12 22L22 17" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+          <path d="M2 12L12 17L22 12" stroke="#1890ff" stroke-width="2" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h2>功能开发中</h2>
+      <p>AI流程设计功能正在紧张开发中，敬请期待！</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// AI流程设计页面
+</script>
+
+<style scoped>
+.development-page {
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  color: #1890ff;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  font-size: 16px;
+  color: #666;
+}
+
+.development-notice {
+  text-align: center;
+  padding: 48px 24px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  border-radius: 12px;
+  border: 1px solid #91d5ff;
+}
+
+.notice-icon {
+  margin-bottom: 24px;
+}
+
+.development-notice h2 {
+  font-size: 24px;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.development-notice p {
+  font-size: 16px;
+  color: #666;
+}
+</style>
diff --git a/src/views/teacher/course/CourseDetail.vue b/src/views/teacher/course/CourseDetail.vue
index 569a253..bf3b84e 100644
--- a/src/views/teacher/course/CourseDetail.vue
+++ b/src/views/teacher/course/CourseDetail.vue
@@ -15,50 +15,75 @@
 
     <!-- 主要内容区域 -->
     <div class="main-content">
-      <!-- 左侧课程图片 -->
-      <div class="course-image-section">
-        <img src="/images/teacher/fj.png" alt="课程封面" class="course-image" />
-      </div>
-
-      <!-- 右侧课程信息 -->
-      <div class="course-info-section">
-        <h1 class="course-title">{{ courseInfo.title }}</h1>
-        <p class="course-description">{{ courseInfo.description }}</p>
-
-        <!-- 课程关键信息 -->
-        <div class="course-metrics">
-          <div class="metric-item">
-            <span class="metric-label">课程时间:</span>
-            <span class="metric-value">{{ courseInfo.courseTime }}</span>
-          </div>
-          <div class="metric-item">
-            <span class="metric-label">课程分类:</span>
-            <span class="metric-value">{{ courseInfo.category }}</span>
-          </div>
-          <div class="metric-item">
-            <span class="metric-label">课时:</span>
-            <span class="metric-value">{{ courseInfo.duration }}</span>
-          </div>
-          <div class="metric-item">
-            <span class="metric-label">课程讲师:</span>
-            <span class="metric-value">{{ courseInfo.instructor }}</span>
-          </div>
-          <div class="metric-item">
-            <span class="metric-label">教师团队:</span>
-            <span class="metric-value">{{ courseInfo.teacherCount }}人</span>
-          </div>
-          <div class="metric-item">
-            <span class="metric-label">课程积分:</span>
-            <span class="metric-value">{{ courseInfo.credits }}</span>
-          </div>
-        </div>
-
-        <!-- 开课学期选择 -->
-        <div class="semester-section">
-          <span class="semester-label">开课1学期</span>
-          <n-select v-model:value="selectedSemester" :options="semesterOptions" class="semester-select" size="small" />
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-container">
+        <div class="loading-content">
+          <p>正在加载课程详情...</p>
         </div>
       </div>
+
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error-container">
+        <div class="error-content">
+          <p>{{ error }}</p>
+          <button @click="loadCourseDetail" class="retry-btn">重试</button>
+        </div>
+      </div>
+
+      <!-- 课程内容 -->
+      <template v-else>
+        <!-- 左侧课程图片 -->
+        <div class="course-image-section">
+          <img :src="courseInfo.thumbnail || '/images/teacher/fj.png'" :alt="courseInfo.title" class="course-image" />
+        </div>
+
+        <!-- 右侧课程信息 -->
+        <div class="course-info-section">
+          <h1 class="course-title">{{ courseInfo.title }}</h1>
+          <div class="course-description" v-html="cleanHtmlContent(courseInfo.description)"></div>
+
+          <!-- 课程关键信息 -->
+          <div class="course-metrics">
+            <div class="metric-item">
+              <span class="metric-label">课程时间:</span>
+              <span class="metric-value">{{ courseInfo.courseTime }}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">课程分类:</span>
+              <span class="metric-value">{{ courseInfo.category }}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">课时:</span>
+              <span class="metric-value">{{ courseInfo.duration }}</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">课程讲师:</span>
+              <span class="metric-value">
+                <span v-if="instructorsLoading">加载中...</span>
+                <span v-else>{{ courseInfo.instructor }}</span>
+              </span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">教师团队:</span>
+              <span class="metric-value">
+                <span v-if="instructorsLoading">加载中...</span>
+                <span v-else>{{ courseInfo.teacherCount }}人</span>
+              </span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">课程积分:</span>
+              <span class="metric-value">{{ courseInfo.credits }}</span>
+            </div>
+          </div>
+
+          <!-- 开课学期选择 -->
+          <div class="semester-section">
+            <span class="semester-label">开课1学期</span>
+            <n-select v-model:value="selectedSemester" :options="semesterOptions" class="semester-select"
+              size="small" />
+          </div>
+        </div>
+      </template>
     </div>
 
     <!-- 底部统计数据 -->
@@ -133,15 +158,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { NButton, NSelect } from 'naive-ui'
+import { CourseApi } from '@/api/modules/course'
+import { TeachCourseApi } from '@/api/modules/teachCourse'
 import CourseIntro from './tabs/CourseIntro.vue'
 import TeachingTeam from './tabs/TeachingTeam.vue'
 import ChapterList from './tabs/ChapterList.vue'
 import CourseComments from './tabs/CourseComments.vue'
 
 const router = useRouter()
+const route = useRoute()
+const courseId = ref(route.params.id as string)
 
 // 顶部图片控制
 const showTopImage = ref(true) // 控制顶部图片显示/隐藏
@@ -155,9 +184,18 @@ const courseInfo = ref({
   duration: '4小时28分钟',
   instructor: '王建国',
   teacherCount: 1,
-  credits: 60
+  credits: 60,
+  thumbnail: '/images/teacher/fj.png'
 })
 
+// 课程数据状态
+const loading = ref(false)
+const error = ref('')
+
+// 教师团队数据
+const instructors = ref<any[]>([])
+const instructorsLoading = ref(false)
+
 // 课程统计数据
 const courseStats = ref({
   views: 0,
@@ -188,6 +226,213 @@ const goBack = () => {
 const handleClose = () => {
   showTopImage.value = false // 隐藏顶部图片容器
 }
+
+// 加载课程详情
+const loadCourseDetail = async () => {
+  console.log('🚀 开始加载教师课程详情，课程ID:', courseId.value)
+
+  if (!courseId.value || courseId.value.trim() === '') {
+    error.value = '课程ID无效'
+    console.error('❌ 课程ID无效:', courseId.value)
+    return
+  }
+
+  try {
+    loading.value = true
+    error.value = ''
+
+    console.log('📡 调用课程详情API...')
+    const response = await CourseApi.getCourseDetail(courseId.value)
+    console.log('📊 课程详情API响应:', response)
+
+    if (response.code === 0 || response.code === 200) {
+      const course = response.data
+      console.log('✅ 课程数据设置成功:', course)
+      console.log('📋 课程基本信息:', {
+        id: course?.id,
+        title: course?.title,
+        description: course?.description,
+        thumbnail: course?.thumbnail,
+        category: course?.category,
+        instructor: course?.instructor,
+        duration: course?.duration,
+        studentsCount: course?.studentsCount,
+        createdAt: course?.createdAt,
+        updatedAt: course?.updatedAt
+      })
+
+      // 更新课程信息
+      courseInfo.value = {
+        title: course?.title || '课程名称课程名称课',
+        description: course?.description || '本课程旨在带领学生系统地学习【课程核心领域】的知识。我们将从【最基础的概念】讲起,逐步深入到【高级主题或应用】。通过理论与实践相结合的方式,学生不仅能够掌握【具体的理论知识】,还能获得【具体的实践技能,如解决XX问题、开发XX应用等】。',
+        courseTime: formatCourseTime(course?.createdAt, course?.updatedAt),
+        category: course?.category?.name || '分类名称',
+        duration: course?.duration || '4小时28分钟',
+        instructor: course?.instructor?.name || '王建国',
+        teacherCount: 1, // 暂时固定为1
+        credits: 60, // 暂时固定为60
+        thumbnail: course?.thumbnail || '/images/teacher/fj.png'
+      }
+
+      // 尝试从课程管理API获取分类信息
+      await loadCourseCategoryFromManagementAPI()
+
+      // 更新统计数据（这里可以根据实际API调整）
+      courseStats.value = {
+        views: course?.studentsCount || 0,
+        enrollments: course?.studentsCount || 0,
+        learners: Math.floor((course?.studentsCount || 0) * 0.8),
+        comments: Math.floor((course?.studentsCount || 0) * 0.3)
+      }
+
+      console.log('🎯 课程信息更新完成:', courseInfo.value)
+      console.log('📈 统计数据更新完成:', courseStats.value)
+    } else {
+      error.value = response.message || '获取课程详情失败'
+      console.error('❌ API返回错误:', response)
+    }
+  } catch (err) {
+    console.error('❌ 加载课程详情失败:', err)
+    error.value = '网络错误，请稍后重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载教师团队信息
+const loadCourseInstructors = async () => {
+  console.log('👥 开始加载课程教师团队，课程ID:', courseId.value)
+
+  if (!courseId.value || courseId.value.trim() === '') {
+    console.error('❌ 课程ID无效，无法加载教师团队')
+    return
+  }
+
+  try {
+    instructorsLoading.value = true
+    console.log('📡 调用教师团队API...')
+
+    const response = await CourseApi.getCourseInstructors(courseId.value)
+    console.log('📊 教师团队API响应:', response)
+
+    if (response.code === 0 || response.code === 200) {
+      instructors.value = response.data || []
+      console.log('✅ 教师团队数据设置成功:', instructors.value)
+      console.log('👥 教师团队数量:', instructors.value.length)
+
+      // 更新课程信息中的教师团队人数
+      courseInfo.value.teacherCount = instructors.value.length
+      console.log('🎯 更新教师团队人数:', courseInfo.value.teacherCount)
+
+      // 从教师团队中获取所有教师名字（按sortOrder排序）
+      if (instructors.value.length > 0) {
+        // 按sortOrder排序，如果没有sortOrder则按原始顺序
+        const sortedInstructors = [...instructors.value].sort((a, b) => {
+          const aOrder = a.sortOrder || 0
+          const bOrder = b.sortOrder || 0
+          return aOrder - bOrder
+        })
+        // 将所有教师名字用逗号连接
+        const allInstructorNames = sortedInstructors.map(teacher => teacher.name).join('、')
+        courseInfo.value.instructor = allInstructorNames || '王建国'
+        console.log('👨‍🏫 更新所有教师:', courseInfo.value.instructor)
+        console.log('📋 教师团队排序:', sortedInstructors.map(t => ({ name: t.name, sortOrder: t.sortOrder })))
+      }
+    } else {
+      console.warn('⚠️ 教师团队API返回错误:', response)
+      // 保持默认值
+      courseInfo.value.teacherCount = 1
+    }
+  } catch (err) {
+    console.error('❌ 加载教师团队失败:', err)
+    // 保持默认值
+    courseInfo.value.teacherCount = 1
+  } finally {
+    instructorsLoading.value = false
+  }
+}
+
+// 格式化课程时间
+const formatCourseTime = (createdAt?: string, updatedAt?: string) => {
+  if (createdAt && updatedAt) {
+    const startDate = new Date(createdAt).toLocaleDateString('zh-CN')
+    const endDate = new Date(updatedAt).toLocaleDateString('zh-CN')
+    return `${startDate}-${endDate}`
+  }
+  return '2025-08-25-2026.08-25'
+}
+
+// 清理HTML内容，确保安全显示
+const cleanHtmlContent = (content: string) => {
+  if (!content) return ''
+
+  // 如果内容包含HTML标签，直接返回（假设后端已经处理过安全性）
+  // 这里可以添加更多的HTML清理逻辑，比如移除script标签等
+  return content
+}
+
+// 从课程管理API获取分类信息
+const loadCourseCategoryFromManagementAPI = async () => {
+  try {
+    // 调用课程管理API获取课程信息（包含categoryId）
+    const response = await TeachCourseApi.getTeacherCourseList({})
+
+    if (response.data && response.data.result && response.data.result.length > 0) {
+      // 从所有课程中找到匹配当前课程ID的课程
+      const courseData = response.data.result.find(course => course.id === courseId.value)
+
+      if (!courseData) {
+        // 备选方案：直接获取分类列表，显示第一个分类作为示例
+        try {
+          const categoryResponse = await CourseApi.getCategories()
+          if (categoryResponse.code === 200 && categoryResponse.data && categoryResponse.data.length > 0) {
+            const firstCategory = categoryResponse.data[0]
+            courseInfo.value.category = firstCategory.name
+          }
+        } catch (error) {
+          console.error('❌ 备选方案失败:', error)
+        }
+        return
+      }
+
+      if (courseData.categoryId) {
+        // 获取分类列表
+        const categoryResponse = await CourseApi.getCategories()
+
+        if (categoryResponse.code === 200 && categoryResponse.data) {
+          // 解析categoryId（可能是逗号分隔的字符串）
+          const categoryIds = courseData.categoryId.toString().split(',').map((id: string) => parseInt(id.trim())).filter((id: number) => !isNaN(id))
+
+          // 根据ID匹配分类名称
+          const categoryNames = categoryIds.map((id: number) => {
+            const category = categoryResponse.data.find(cat => cat.id === id)
+            return category ? category.name : `未知分类${id}`
+          }).filter(Boolean)
+
+          // 更新课程信息中的分类
+          if (categoryNames.length > 0) {
+            courseInfo.value.category = categoryNames.join('、')
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error('❌ 获取分类信息失败:', error)
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(async () => {
+  console.log('🎬 教师课程详情页面加载完成，课程ID:', courseId.value)
+
+  // 并行加载课程详情和教师团队信息
+  await Promise.all([
+    loadCourseDetail(),
+    loadCourseInstructors()
+  ])
+
+  console.log('🎉 所有数据加载完成')
+})
 </script>
 
 <style scoped>
@@ -281,6 +526,38 @@ const handleClose = () => {
   margin: 25px auto;
 }
 
+/* 加载和错误状态 */
+.loading-container,
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  text-align: center;
+  width: 100%;
+}
+
+.loading-content p,
+.error-content p {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+.retry-btn {
+  background: #0C99DA;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.retry-btn:hover {
+  background: #0A8BC7;
+}
 /* 左侧课程图片 */
 .course-image-section {
   flex: 0 0 305px;
diff --git a/src/views/teacher/message/MessageCenter.vue b/src/views/teacher/message/MessageCenter.vue
index 81ba3b9..4bdcabc 100644
--- a/src/views/teacher/message/MessageCenter.vue
+++ b/src/views/teacher/message/MessageCenter.vue
@@ -65,8 +65,8 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { NBadge, NTabs, NTabPane, useMessage } from 'naive-ui'
-import { ChatApi } from '@/api'
+import { NBadge, NTabs, NTabPane } from 'naive-ui'
+import { ChatApi, MessageApi } from '@/api'
 
 // 导入子组件
 import NotificationMessages from './components/NotificationMessages.vue'
@@ -76,7 +76,6 @@ import SystemMessages from './components/SystemMessages.vue'
 
 // 响应式数据
 const activeTab = ref('notification') // 当前激活的tab
-const message = useMessage()
 
 // 各类消息数量（角标显示）
 const notificationCount = ref(0)  // 即时消息数量
@@ -111,23 +110,48 @@ const loadMessageCounts = async (forceRefresh = false) => {
   // 检查缓存
   const now = Date.now()
   if (!forceRefresh && now - cacheTimestamp.value < CACHE_DURATION) {
+    console.log('📋 使用缓存的消息数量，跳过加载')
     return
   }
 
+  console.log('🔄 开始加载消息数量...')
   loading.value = true
   try {
-    // 并行加载各类消息数量
-    await Promise.allSettled([
-      loadNotificationCount(),
-      loadCommentCount(),
-      loadFavoriteCount(),
-      loadSystemCount()
-    ])
+    // 首先尝试使用统一的未读消息数接口
+    const unreadCountResult = await Promise.allSettled([loadTotalUnreadCount()])
+    console.log('🔍 统一接口结果:', unreadCountResult[0])
+
+    // 如果统一接口失败，则使用原有的分别加载方式
+    if (unreadCountResult[0].status === 'rejected') {
+      console.log('⚠️ 统一接口失败，使用分别加载方式')
+      // 并行加载各类消息数量，使用 Promise.allSettled 确保即使某个接口失败也不影响其他接口
+      const results = await Promise.allSettled([
+        loadNotificationCount(),
+        loadCommentCount(),
+        loadFavoriteCount(),
+        loadSystemCount()
+      ])
+
+      console.log('📊 分别加载结果:', results)
+      // 检查是否有接口失败
+      const failedCount = results.filter(result => result.status === 'rejected').length
+      if (failedCount > 0) {
+        console.log(`⚠️ ${failedCount} 个接口加载失败`)
+        // 静默处理接口失败，不影响用户体验
+      }
+    }
+
+    console.log('📈 最终消息数量:', {
+      notification: notificationCount.value,
+      comment: commentCount.value,
+      favorite: favoriteCount.value,
+      system: systemCount.value
+    })
 
     cacheTimestamp.value = now
   } catch (error) {
     console.error('加载消息数量失败:', error)
-    message.error('加载消息数量失败')
+    // 不显示错误消息，因为可能只是部分接口失败
   } finally {
     loading.value = false
   }
@@ -143,28 +167,49 @@ const debouncedRefresh = () => {
   }, 1000)
 }
 
+// 加载总的未读消息数
+const loadTotalUnreadCount = async () => {
+  try {
+    console.log('🔄 尝试调用统一未读消息数接口...')
+    const response = await MessageApi.getUnreadMessageCount()
+    console.log('🔍 统一接口响应:', response)
+
+    if (response.code === 200) {
+      const result = response.data || {}
+      console.log('📊 统一接口返回数据:', result)
+
+      // 使用统一接口返回的数据
+      // 注意：当前API只返回total和unread字段，我们需要分别调用各个接口获取具体数量
+      // 这里先设置默认值，后续会通过其他接口更新
+      commentCount.value = 0
+      favoriteCount.value = 0
+      systemCount.value = 0
+      notificationCount.value = 0
+
+      return true
+    }
+    console.log('❌ 统一接口响应格式不正确')
+    return false
+  } catch (error) {
+    console.error('❌ 获取总未读消息数失败:', error)
+    return false
+  }
+}
+
 // 加载即时消息数量
 const loadNotificationCount = async () => {
-  try {
-    const response = await ChatApi.getUnreadCount()
-    if (response.data) {
-      notificationCount.value = response.data.total || 0
-      return
-    }
-  } catch (error) {
-    console.warn('获取未读消息数量失败，尝试备用方案:', error)
-  }
-
-  // 备用方案：通过会话列表计算未读数量
+// 由于 /aiol/aiolChat/unread-count 接口不存在，直接使用备用方案
   try {
     const chatsResponse = await ChatApi.getMyChats()
     if (chatsResponse.data?.success) {
       notificationCount.value = chatsResponse.data.result.reduce((total: number, chat: any) => {
         return total + (chat.unreadCount || 0)
       }, 0)
+    } else {
+      notificationCount.value = 0
     }
   } catch (chatError) {
-    console.error('获取会话列表失败:', chatError)
+    // 静默处理错误，设置为0
     notificationCount.value = 0
   }
 }
@@ -172,8 +217,12 @@ const loadNotificationCount = async () => {
 // 加载评论和@数量
 const loadCommentCount = async () => {
   try {
-    // TODO: 实现评论和@消息数量API
-    commentCount.value = 0
+    const response = await MessageApi.getCommentsAtMessageCount()
+    if (response.data?.success && (response.data.code === 200 || response.data.code === 0)) {
+      commentCount.value = response.data.result?.unread || 0
+    } else {
+      commentCount.value = 0
+    }
   } catch (error) {
     console.error('获取评论数量失败:', error)
     commentCount.value = 0
@@ -183,10 +232,19 @@ const loadCommentCount = async () => {
 // 加载赞和收藏数量
 const loadFavoriteCount = async () => {
   try {
-    // TODO: 实现赞和收藏消息数量API
-    favoriteCount.value = 0
+    const response = await MessageApi.getLikesMessageCount()
+    console.log('🔍 loadFavoriteCount 响应数据:', response)
+
+    if (response.data?.success && (response.data.code === 200 || response.data.code === 0)) {
+      favoriteCount.value = response.data.result?.unread || 0
+      console.log('✅ 赞和收藏未读数量设置为:', favoriteCount.value)
+    } else {
+      favoriteCount.value = 0
+      console.log('❌ 赞和收藏接口响应失败，设置为0')
+    }
   } catch (error) {
     console.error('获取收藏数量失败:', error)
+    // 如果接口不存在，设置为0，不显示错误消息
     favoriteCount.value = 0
   }
 }
@@ -194,10 +252,19 @@ const loadFavoriteCount = async () => {
 // 加载系统消息数量
 const loadSystemCount = async () => {
   try {
-    // TODO: 实现系统消息数量API
-    systemCount.value = 0
+    console.log('🔍 开始加载系统消息数量')
+    const response = await MessageApi.getSystemMessageCount()
+    console.log('🔍 系统消息数量API响应:', response)
+
+    if (response.code === 200 && response.data) {
+      systemCount.value = response.data.unread || 0
+      console.log('✅ 系统消息数量:', systemCount.value)
+    } else {
+      console.warn('⚠️ 系统消息数量API返回错误:', response)
+      systemCount.value = 0
+    }
   } catch (error) {
-    console.error('获取系统消息数量失败:', error)
+    console.error('❌ 获取系统消息数量失败:', error)
     systemCount.value = 0
   }
 }
diff --git a/src/views/teacher/message/components/CommentLikes.vue b/src/views/teacher/message/components/CommentLikes.vue
index 6e1030b..35c36b9 100644
--- a/src/views/teacher/message/components/CommentLikes.vue
+++ b/src/views/teacher/message/components/CommentLikes.vue
@@ -127,7 +127,7 @@
       </button>
 
       <span v-if="showEllipsis" class="ellipsis">...</span>
-      <button class="page-btn" @click="goToPage(totalPages)">{{ totalPages }}</button>
+      <button v-if="showLastPage" class="page-btn" @click="goToPage(totalPages)">{{ totalPages }}</button>
 
       <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">下一页</button>
       <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(totalPages)">尾页</button>
@@ -140,7 +140,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { useMessage, NIcon } from 'naive-ui'
 import { ChatbubbleEllipsesOutline, TrashOutline, WarningOutline } from '@vicons/ionicons5'
-import { CourseApi } from '@/api'
+import { MessageApi, BackendMessageItem } from '@/api'
 
 // 消息类型定义
 interface Message {
@@ -161,17 +161,54 @@ interface Message {
   likeCount?: number
 }
 
+// 处理@标记的函数
+const processAtMentions = (content: string): string => {
+  // 将 [user:id:username] 格式转换为 @username 格式
+  return content.replace(/\[user:(\d+):([^\]]+)\]/g, '@$2')
+}
+
+// 数据转换函数
+const transformMessageData = (backendItem: BackendMessageItem): Message => {
+  let parsedContent: any = null
+
+  try {
+    parsedContent = JSON.parse(backendItem.msgContent)
+  } catch (error) {
+    console.error('解析消息内容失败:', error)
+  }
+
+  // 根据消息内容确定类型（评论或@）
+  const rawCommentContent = parsedContent?.comment?.content || ''
+  const hasAtMention = rawCommentContent.includes('[user:')
+  const type = hasAtMention ? 1 : 0 // 1=@, 0=评论
+
+  // 处理@标记，转换为友好的显示格式
+  const processedContent = processAtMentions(rawCommentContent)
+
+  return {
+    id: backendItem.id,
+    type,
+    username: parsedContent?.sender?.username || backendItem.sender || '未知用户',
+    avatar: '/images/activity/5.png', // 使用默认头像
+    courseInfo: parsedContent?.entity?.title || '未知课程',
+    content: processedContent,
+    timestamp: backendItem.sendTime,
+    isLiked: false,
+    isFavorited: false,
+    showReplyBox: false,
+    replyContent: '',
+    courseId: parsedContent?.entity?.id,
+    userId: parsedContent?.sender?.id,
+    images: [],
+    likeCount: 0
+  }
+}
+
 // 响应式数据
 const messages = ref<Message[]>([])
 const message = useMessage()
 const loading = ref(false)
 
-// 可用课程列表
-const availableCourses = ref<Array<{ id: string, name: string }>>([
-  { id: '1', name: '测试课程1' },
-  { id: '2', name: '测试课程2' },
-  { id: '3', name: '测试课程3' }
-])
 
 // 分页相关
 const currentPage = ref(1)
@@ -196,6 +233,11 @@ const showEllipsis = computed(() => {
   return currentPage.value + 2 < totalPages.value - 1
 })
 
+// 是否显示最后一页按钮
+const showLastPage = computed(() => {
+  return totalPages.value > 1 && currentPage.value + 2 < totalPages.value
+})
+
 // 生命周期钩子
 onMounted(() => {
   loadMessages()
@@ -205,60 +247,52 @@ onMounted(() => {
 const loadMessages = async () => {
   loading.value = true
   try {
-    // 获取所有课程的评论数据
-    const allComments: Message[] = []
-
-    for (const course of availableCourses.value) {
-      try {
-        const response = await CourseApi.getCourseComments(course.id)
-        if (response.data && response.data.length > 0) {
-          // 转换评论数据为消息格式
-          const courseComments = response.data.map((comment: any) => ({
-            id: comment.id,
-            type: 0, // 评论类型
-            username: comment.userName || '匿名用户',
-            avatar: comment.userAvatar || '',
-            courseInfo: course.name,
-            content: comment.content || '',
-            timestamp: comment.timeAgo || comment.createTime,
-            isLiked: false,
-            isFavorited: false,
-            showReplyBox: false,
-            replyContent: '',
-            courseId: course.id,
-            userId: comment.userId,
-            images: comment.images || [],
-            likeCount: comment.likeCount || 0
-          }))
-
-          allComments.push(...courseComments)
-        }
-      } catch (error) {
-        console.warn(`获取课程 ${course.name} 评论失败:`, error)
-      }
-    }
-
-    // 按时间排序（最新的在前）
-    allComments.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
-
-    // 分页处理
-    const startIndex = (currentPage.value - 1) * pageSize.value
-    const endIndex = startIndex + pageSize.value
-    messages.value = allComments.slice(startIndex, endIndex)
-
-    // 更新分页信息
-    totalCount.value = allComments.length
-    totalPages.value = Math.ceil(totalCount.value / pageSize.value)
-
-    console.log('✅ 加载评论和@消息成功:', {
-      total: totalCount.value,
-      current: messages.value.length,
-      page: currentPage.value
+    const response = await MessageApi.getCommentsAtMessages({
+      current: currentPage.value,
+      size: pageSize.value
     })
 
-  } catch (error) {
-    console.error('❌ 加载评论和@消息失败:', error)
-    message.error('加载消息失败')
+    if (response.data?.success && (response.data.code === 200 || response.data.code === 0)) {
+      const data = response.data.result
+      // 转换后端数据为前端格式
+      messages.value = (data.records || []).map(transformMessageData)
+      totalPages.value = data.pages || 1
+      totalCount.value = data.total || 0
+    } else {
+      // 静默处理响应失败，不显示错误消息
+      messages.value = []
+    }
+  } catch (error: any) {
+    console.error('加载消息失败:', error)
+    // 静默处理错误，不显示错误消息给用户
+    // 如果是404错误，说明接口不存在，使用模拟数据
+    if (error.response?.status === 404) {
+      // 使用模拟数据
+      messages.value = [
+        {
+          id: '1',
+          type: 1, // @消息
+          username: '小明',
+          avatar: '/images/activity/5.png',
+          courseInfo: '《python语言基础与应用》',
+          content: '老师讲得真棒！@李四 快来看这个课程！',
+          timestamp: '2025-09-17 04:27:25',
+          isLiked: false,
+          isFavorited: false,
+          showReplyBox: false,
+          replyContent: '',
+          courseId: '1954463468539371522',
+          userId: '1966804797404344321',
+          images: [],
+          likeCount: 0
+        }
+      ]
+      totalPages.value = 1
+      totalCount.value = 1
+    } else {
+      // 静默处理其他错误，不显示错误消息
+      messages.value = []
+    }
   } finally {
     loading.value = false
   }
@@ -575,6 +609,7 @@ const goToPage = (page: number) => {
   color: #999;
   margin: 0;
 }
+
 .action-btn i {
   font-size: 14px;
 }
@@ -695,21 +730,21 @@ const goToPage = (page: number) => {
 }
 
 .page-btn:hover:not(:disabled) {
-  border-color: #1890ff;
-  color: #1890ff;
+  border-color: #0089D1;
+  color: #0089D1;
 }
 
 .page-btn.active {
-  background: #1890ff;
-  border-color: #1890ff;
+  background: #0089D1;
+  border-color: #0089D1;
   color: #fff;
 }
 
 .page-btn:disabled {
-  color: #bfbfbf;
-  border-color: #f0f0f0;
+  color: #878787;
+  border: none;
   cursor: not-allowed;
-  background: #fafafa;
+  background: #fff;
 }
 
 .ellipsis {
diff --git a/src/views/teacher/message/components/FavoriteMessages.vue b/src/views/teacher/message/components/FavoriteMessages.vue
index 9b81b6e..9d9e6fe 100644
--- a/src/views/teacher/message/components/FavoriteMessages.vue
+++ b/src/views/teacher/message/components/FavoriteMessages.vue
@@ -1,44 +1,52 @@
 <template>
   <div class="message-center">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <div class="loading-text">加载中...</div>
+    </div>
+
     <!-- 消息列表 -->
-    <div class="message-list">
-      <div v-for="message in messages" :key="message.id" class="message-item">
+    <div v-else class="message-list">
+      <div v-if="messages.length === 0" class="empty-container">
+        <div class="empty-text">暂无消息</div>
+      </div>
+      <div v-else v-for="messageItem in messages" :key="messageItem.id" class="message-item">
         <!-- 用户头像 -->
         <div class="avatar-container">
-          <img :src="message.avatar" :alt="message.username" class="avatar" />
+          <img :src="messageItem.avatar" :alt="messageItem.username" class="avatar" />
         </div>
 
         <!-- 消息内容 -->
         <div class="message-content">
           <!-- 点赞消息 -->
-          <div class="message-header" v-if="message.type === 0">
+          <div class="message-header" v-if="messageItem.type === 0">
             <div>
               <span class="username">
-                {{ message.username }}赞了我的评论：
+                {{ messageItem.username }}赞了我的评论：
               </span>
-              <span class="content">{{ message.content }}</span>
+              <span class="content">{{ messageItem.content }}</span>
             </div>
-            <span class="timestamp">{{ message.timestamp }}</span>
+            <span class="timestamp">{{ messageItem.timestamp }}</span>
           </div>
           <!-- 收藏消息 -->
-          <div class="message-header" v-if="message.type === 1">
+          <div class="message-header" v-if="messageItem.type === 1">
             <div class="header-left">
               <div>
-              <span class="username">
-                {{ message.username }}收藏了我的课程：
-              </span>
-              <span class="course-info">{{ message.courseInfo }}</span>
-            </div>
-              <span class="timestamp">{{ message.timestamp }}</span>
+                <span class="username">
+                  {{ messageItem.username }}收藏了我的课程：
+                </span>
+                <span class="course-info">{{ messageItem.courseInfo }}</span>
+              </div>
+              <span class="timestamp">{{ messageItem.timestamp }}</span>
             </div>
             <!-- 课程封面图片 - 只有收藏消息才显示 -->
-            <div v-if="message.type === 1 && message.courseImage" class="course-image-container">
-              <img :src="message.courseImage" :alt="message.courseInfo" class="course-image" />
+            <div v-if="messageItem.type === 1 && messageItem.courseImage" class="course-image-container">
+              <img :src="messageItem.courseImage" :alt="messageItem.courseInfo" class="course-image" />
             </div>
           </div>
 
-          <div class="message-text" v-if="message.type === 0">课程:
-            <span class="course-info">{{ message.courseInfo }}</span>
+          <div class="message-text" v-if="messageItem.type === 0">课程:
+            <span class="course-info">{{ messageItem.courseInfo }}</span>
           </div>
         </div>
       </div>
@@ -55,7 +63,7 @@
       </button>
 
       <span v-if="showEllipsis" class="ellipsis">...</span>
-      <button class="page-btn" @click="goToPage(totalPages)">{{ totalPages }}</button>
+      <button v-if="showLastPage" class="page-btn" @click="goToPage(totalPages)">{{ totalPages }}</button>
 
       <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">下一页</button>
       <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(totalPages)">尾页</button>
@@ -65,124 +73,54 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
+import { MessageApi, type MessageItem, type BackendMessageItem } from '@/api'
 
-// 消息类型定义
-interface Message {
-  id: number
-  type: number // 0-点赞, 1-收藏
-  username: string
-  avatar: string
-  courseInfo: string
-  content: string
-  timestamp: string
-  courseImage?: string
-  isLiked: boolean
-  isFavorited: boolean
-  showReplyBox: boolean
-  replyContent: string
+// 消息类型定义（使用API中的类型）
+type Message = MessageItem
+
+// 数据转换函数
+const transformMessageData = (backendItem: BackendMessageItem): MessageItem => {
+  let parsedContent: any = null
+
+  try {
+    parsedContent = JSON.parse(backendItem.msgContent)
+  } catch (error) {
+    console.error('解析消息内容失败:', error)
+  }
+
+  // 根据action确定消息类型
+  const action = parsedContent?.action || 'unknown'
+  const type = action === 'like' ? 0 : action === 'favorite' ? 1 : 0
+
+  return {
+    id: backendItem.id,
+    type,
+    username: parsedContent?.sender?.username || backendItem.sender || '未知用户',
+    avatar: '/images/activity/5.png', // 使用默认头像
+    courseInfo: parsedContent?.entity?.title || '未知课程',
+    content: action === 'like' ? '赞了我的评论' : '收藏了我的课程',
+    timestamp: backendItem.sendTime,
+    courseImage: action === 'favorite' ? '/images/courses/course-bg.png' : undefined,
+    isLiked: false,
+    isFavorited: false,
+    showReplyBox: false,
+    replyContent: '',
+    readFlag: backendItem.readFlag,
+    action
+  }
 }
 
 // 响应式数据
-const messages = ref<Message[]>([
-  {
-    id: 1,
-    type: 0, // 点赞评论 - 有评论内容，无图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '这里老师营养饮用的说明了',
-    timestamp: '7月20日\n12:41',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  },
-  {
-    id: 2,
-    type: 1, // 收藏课程 - 无评论内容，有图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '',
-    timestamp: '7月20日\n12:41',
-    courseImage: 'https://picsum.photos/300/200',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  },
-  {
-    id: 3,
-    type: 0, // 点赞评论 - 有评论内容，无图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '这里老师营养饮用的说明了',
-    timestamp: '7月20日\n12:41',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  },
-  {
-    id: 4,
-    type: 1, // 收藏课程 - 无评论内容，有图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '',
-    timestamp: '7月20日\n12:41',
-    courseImage: 'https://picsum.photos/300/200',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  },
-  {
-    id: 5,
-    type: 1, // 收藏课程 - 无评论内容，有图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '',
-    timestamp: '7月20日\n12:41',
-    courseImage: 'https://picsum.photos/300/200',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  },
-  {
-    id: 6,
-    type: 0, // 点赞评论 - 有评论内容，无图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '这里老师营养饮用的说明了',
-    timestamp: '7月20日\n12:41',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  },
-  {
-    id: 7,
-    type: 0, // 点赞评论 - 有评论内容，无图片
-    username: '王建华化学老师',
-    avatar: 'https://picsum.photos/200/200',
-    courseInfo: '《教师小学期制实验》',
-    content: '这里老师营养饮用的说明了',
-    timestamp: '7月20日\n12:41',
-    isLiked: false,
-    isFavorited: false,
-    showReplyBox: false,
-    replyContent: ''
-  }
-])
+const messages = ref<Message[]>([])
 
 // 分页相关
 const currentPage = ref(1)
-const totalPages = ref(29)
+const totalPages = ref(1)
+const total = ref(0)
+const pageSize = ref(20)
+
+// 加载状态
+const loading = ref(false)
 
 // 计算显示的页码
 const visiblePages = computed(() => {
@@ -201,14 +139,83 @@ const showEllipsis = computed(() => {
   return currentPage.value + 2 < totalPages.value - 1
 })
 
+// 是否显示最后一页按钮
+const showLastPage = computed(() => {
+  return totalPages.value > 1 && currentPage.value + 2 < totalPages.value
+})
+
 // 生命周期钩子
 onMounted(() => {
   loadMessages()
 })
 
 // 方法定义
-const loadMessages = () => {
-  // TODO: 调用API加载消息数据
+const loadMessages = async () => {
+  loading.value = true
+  try {
+    const response = await MessageApi.getLikesMessages({
+      current: currentPage.value,
+      size: pageSize.value
+    })
+
+    if (response.data?.success && (response.data.code === 200 || response.data.code === 0)) {
+      const data = response.data.result
+      // 转换后端数据为前端格式
+      messages.value = (data.records || []).map(transformMessageData)
+      totalPages.value = data.pages || 1
+      total.value = data.total || 0
+    } else {
+      // 静默处理响应失败，不显示错误消息
+      messages.value = []
+    }
+  } catch (error: any) {
+    console.error('加载消息失败:', error)
+    // 静默处理错误，不显示错误消息给用户
+    // 如果是404错误，说明接口不存在，使用模拟数据
+    if (error.response?.status === 404) {
+      // 使用模拟数据
+      messages.value = [
+        {
+          id: '1',
+          type: 0,
+          username: '王建华化学老师',
+          avatar: '/images/activity/5.png',
+          courseInfo: '《教师小学期制实验》',
+          content: '这里老师营养饮用的说明了',
+          timestamp: '7月20日\n12:41',
+          isLiked: false,
+          isFavorited: false,
+          showReplyBox: false,
+          replyContent: '',
+          readFlag: 0,
+          action: 'like'
+        },
+        {
+          id: '2',
+          type: 1,
+          username: '王建华化学老师',
+          avatar: '/images/activity/5.png',
+          courseInfo: '《教师小学期制实验》',
+          content: '',
+          timestamp: '7月20日\n12:41',
+          courseImage: '/images/courses/course-bg.png',
+          isLiked: false,
+          isFavorited: false,
+          showReplyBox: false,
+          replyContent: '',
+          readFlag: 0,
+          action: 'favorite'
+        }
+      ]
+      totalPages.value = 1
+      total.value = 2
+    } else {
+      // 静默处理其他错误，不显示错误消息
+      messages.value = []
+    }
+  } finally {
+    loading.value = false
+  }
 }
 
 const goToPage = (page: number) => {
@@ -224,6 +231,30 @@ const goToPage = (page: number) => {
   background-color: #fff;
 }
 
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 20px;
+}
+
+.loading-text {
+  color: #666;
+  font-size: 14px;
+}
+
+.empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 20px;
+}
+
+.empty-text {
+  color: #999;
+  font-size: 14px;
+}
+
 .message-list {
   padding: 0;
 }
@@ -265,7 +296,7 @@ const goToPage = (page: number) => {
   gap: 8px;
 }
 
-.header-left{
+.header-left {
   display: flex;
   gap: 8px;
   flex-direction: column;
@@ -284,7 +315,7 @@ const goToPage = (page: number) => {
   margin-left: 4px;
 }
 
-.course-info{
+.course-info {
   font-weight: 500;
   font-size: 14px;
   color: #585858;
@@ -451,21 +482,21 @@ const goToPage = (page: number) => {
 }
 
 .page-btn:hover:not(:disabled) {
-  border-color: #1890ff;
-  color: #1890ff;
+  border-color: #0089D1;
+  color: #0089D1;
 }
 
 .page-btn.active {
-  background: #1890ff;
-  border-color: #1890ff;
+  background: #0089D1;
+  border-color: #0089D1;
   color: #fff;
 }
 
 .page-btn:disabled {
-  color: #bfbfbf;
-  border-color: #f0f0f0;
+  color: #878787;
+  border: none;
   cursor: not-allowed;
-  background: #fafafa;
+  background: #fff;
 }
 
 .ellipsis {
diff --git a/src/views/teacher/message/components/SystemMessages.vue b/src/views/teacher/message/components/SystemMessages.vue
index 797d719..c1f317b 100644
--- a/src/views/teacher/message/components/SystemMessages.vue
+++ b/src/views/teacher/message/components/SystemMessages.vue
@@ -66,72 +66,17 @@
 import { ref, onMounted, computed } from 'vue'
 import { NIcon } from 'naive-ui'
 import { NotificationsOffOutline } from '@vicons/ionicons5'
-
-// 系统消息类型定义
-interface SystemMessage {
-  id: number
-  title: string
-  content: string
-  timestamp: string
-  isRead: boolean
-  type: 'info' | 'warning' | 'success' | 'error'
-}
+import { MessageApi, type SystemMessage, type BackendMessageItem } from '@/api'
 
 // 响应式数据
-const messages = ref<SystemMessage[]>([
-  {
-    id: 1,
-    title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
-    content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
-    timestamp: '7月20日 12:41',
-    isRead: false,
-    type: 'info'
-  },
-  {
-    id: 2,
-    title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
-    content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
-    timestamp: '7月20日 12:41',
-    isRead: false,
-    type: 'info'
-  },
-  {
-    id: 3,
-    title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
-    content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
-    timestamp: '7月20日 12:41',
-    isRead: false,
-    type: 'info'
-  },
-  {
-    id: 4,
-    title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
-    content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
-    timestamp: '7月20日 12:41',
-    isRead: false,
-    type: 'info'
-  },
-  {
-    id: 5,
-    title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
-    content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
-    timestamp: '7月20日 12:41',
-    isRead: false,
-    type: 'info'
-  },
-  {
-    id: 6,
-    title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
-    content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
-    timestamp: '7月20日 12:41',
-    isRead: false,
-    type: 'info'
-  }
-])
+const messages = ref<SystemMessage[]>([])
+const loading = ref(false)
+const total = ref(0)
+const pageSize = ref(10)
 
 // 分页相关
 const currentPage = ref(1)
-const totalPages = ref(29)
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
 
 // 计算显示的页码
 const visiblePages = computed(() => {
@@ -150,14 +95,117 @@ const showEllipsis = computed(() => {
   return currentPage.value + 2 < totalPages.value - 1
 })
 
+// 数据转换函数
+const transformSystemMessageData = (backendItem: BackendMessageItem): SystemMessage => {
+  let title = backendItem.titile || '系统消息'
+  let content = '暂无内容'
+
+  // 解析 msgContent 中的JSON数据
+  try {
+    if (backendItem.msgContent) {
+      const parsedContent = JSON.parse(backendItem.msgContent)
+      console.log('🔍 解析系统消息内容:', parsedContent)
+
+      // 根据消息类型生成标题和内容
+      if (parsedContent.sender && parsedContent.comment) {
+        // 评论消息
+        title = `${parsedContent.sender.username} 评论了你的课程`
+        content = parsedContent.comment.content || '暂无评论内容'
+
+        // 处理 @ 提及
+        content = processAtMentions(content)
+      } else if (parsedContent.sender && parsedContent.entity) {
+        // 其他类型的消息
+        title = `${parsedContent.sender.username} 的${parsedContent.entity.type}消息`
+        content = parsedContent.entity.title || '暂无内容'
+      } else {
+        // 直接使用原始内容
+        content = backendItem.msgContent
+      }
+    }
+  } catch (error) {
+    console.warn('⚠️ 解析系统消息内容失败:', error)
+    // 如果解析失败，直接使用原始内容
+    content = backendItem.msgContent || '暂无内容'
+  }
+
+  return {
+    id: backendItem.id,
+    title,
+    content,
+    timestamp: backendItem.sendTime || new Date().toLocaleString('zh-CN'),
+    isRead: backendItem.readFlag === 1,
+    type: 'info' // 默认类型，可以根据实际需求调整
+  }
+}
+
+// 处理 @ 提及的函数
+const processAtMentions = (content: string): string => {
+  if (!content) return content
+
+  // 将 [user:id:username] 格式转换为 @username
+  return content.replace(/\[user:(\d+):([^\]]+)\]/g, '@$2')
+}
+
 // 生命周期钩子
 onMounted(() => {
   loadMessages()
 })
 
 // 方法定义
-const loadMessages = () => {
-  // TODO: 调用API加载系统消息数据
+const loadMessages = async () => {
+  try {
+    loading.value = true
+    console.log('🔍 开始加载系统消息，页码:', currentPage.value)
+
+    const response = await MessageApi.getSystemMessages({
+      pageNo: currentPage.value,
+      pageSize: pageSize.value
+    })
+
+    console.log('🔍 系统消息API响应:', response)
+
+    if (response.data && response.data.records) {
+      const result = response.data
+      console.log('✅ 系统消息数据:', result)
+
+      // 转换数据格式
+      messages.value = result.records.map(transformSystemMessageData)
+      total.value = result.total || 0
+
+      console.log('✅ 转换后的系统消息:', messages.value)
+    } else {
+      console.warn('⚠️ 系统消息API返回错误:', response)
+      // 使用模拟数据作为备选
+      messages.value = [
+        {
+          id: '1',
+          title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
+          content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
+          timestamp: '7月20日 12:41',
+          isRead: false,
+          type: 'info'
+        }
+      ]
+      total.value = 1
+    }
+  } catch (error) {
+    console.error('❌ 加载系统消息失败:', error)
+    // 使用模拟数据作为备选
+    messages.value = [
+      {
+        id: '1',
+        title: '你的会员已专属权利已更新，保来享取今日内障，仅此一天！',
+        content: '好消息好消息！BiliBiliWorld2024年在线大学6月29日（周六）正式开课！！！',
+        timestamp: '7月20日 12:41',
+        isRead: false,
+        type: 'info'
+      }
+    ]
+    total.value = 1
+  } finally {
+    loading.value = false
+  }
 }
 
 const goToPage = (page: number) => {