style: 优化错题分析页面的答案选项显示格式

1. 重新设计答案对比区域UI：
   - 添加渐变色背景和圆角边框
   - 添加图标徽章（✓/✗）区分正确和错误答案
   - 添加hover悬浮效果增强交互感
   - 响应式布局适配移动端

2. 优化错题详情弹窗：
   - 重新设计弹窗头部为渐变色
   - 答案对比采用卡片式布局
   - 知识点使用标签样式展示
   - 整体视觉更加专业美观

3. 新增formatAnswer函数：
   - 支持JSON数组格式解析
   - 多选答案用顿号分隔显示
   - 空值友好显示"未作答"

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/.env.ex

@@ -22,7 +22,7 @@ REDIS_DB=0
 # 安全配置
 SECRET_KEY=ex_8f7a9c3e1b4d6f2a5c8e7b9d1f3a6c4e8b2d5f7a9c1e3b6d8f2a4c7e9b1d3f5a
 ALGORITHM=HS256
-ACCESS_TOKEN_EXPIRE_MINUTES=30
+ACCESS_TOKEN_EXPIRE_MINUTES=480
 REFRESH_TOKEN_EXPIRE_DAYS=7
 
 # CORS配置

backend/app/api/v1/admin.py

@@ -34,8 +34,11 @@ async def get_dashboard_stats(
             message="权限不足，需要管理员权限"
         )
     
-    # 用户统计
-    total_users = await db.scalar(select(func.count(User.id)))
+    # 用户统计 - 只统计未删除且活跃的用户
+    total_users = await db.scalar(
+        select(func.count(User.id))
+        .where(User.is_deleted == False, User.is_active == True)
+    )
     
     # 计算最近30天的新增用户
     thirty_days_ago = datetime.now() - timedelta(days=30)

backend/app/api/v1/courses.py

@@ -81,11 +81,11 @@ async def get_courses(
 async def create_course(
     course_in: CourseCreate,
     request: Request,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    创建课程（需要管理员权限）
+    创建课程（需要管理员或经理权限）
 
     - **name**: 课程名称
     - **description**: 课程描述
@@ -144,11 +144,11 @@ async def get_course(
 async def update_course(
     course_id: int,
     course_in: CourseUpdate,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    更新课程（需要管理员权限）
+    更新课程（需要管理员或经理权限）
 
     - **course_id**: 课程ID
     - **course_in**: 更新的课程数据（所有字段都是可选的）
@@ -212,11 +212,11 @@ async def add_course_material(
     course_id: int,
     material_in: CourseMaterialCreate,
     background_tasks: BackgroundTasks,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    添加课程资料（需要管理员权限）
+    添加课程资料（需要管理员或经理权限）
 
     - **course_id**: 课程ID
     - **name**: 资料名称
@@ -278,11 +278,11 @@ async def list_course_materials(
 async def delete_course_material(
     course_id: int,
     material_id: int,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    删除课程资料（需要管理员权限）
+    删除课程资料（需要管理员或经理权限）
 
     - **course_id**: 课程ID
     - **material_id**: 资料ID
@@ -330,11 +330,11 @@ async def get_course_knowledge_points(
 async def create_knowledge_point(
     course_id: int,
     point_in: KnowledgePointCreate,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    创建知识点（需要管理员权限）
+    创建知识点（需要管理员或经理权限）
 
     - **course_id**: 课程ID
     - **name**: 知识点名称
@@ -357,11 +357,11 @@ async def create_knowledge_point(
 async def update_knowledge_point(
     point_id: int,
     point_in: KnowledgePointUpdate,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    更新知识点（需要管理员权限）
+    更新知识点（需要管理员或经理权限）
 
     - **point_id**: 知识点ID
     - **point_in**: 更新的知识点数据（所有字段都是可选的）
@@ -376,11 +376,11 @@ async def update_knowledge_point(
 @router.delete("/knowledge-points/{point_id}", response_model=ResponseModel[bool])
 async def delete_knowledge_point(
     point_id: int,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    删除知识点（需要管理员权限）
+    删除知识点（需要管理员或经理权限）
 
     - **point_id**: 知识点ID
     """
@@ -460,11 +460,11 @@ async def remove_material_knowledge_point(
 )
 async def create_growth_path(
     path_in: GrowthPathCreate,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    创建成长路径（需要管理员权限）
+    创建成长路径（需要管理员或经理权限）
 
     - **name**: 路径名称
     - **description**: 路径描述
@@ -650,11 +650,11 @@ async def get_course_positions(
 async def assign_course_positions(
     course_id: int,
     assignments: List[CoursePositionAssignment],
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """
-    批量分配课程到岗位（需要管理员权限）
+    批量分配课程到岗位（需要管理员或经理权限）
 
     - **course_id**: 课程ID
     - **assignments**: 岗位分配列表
@@ -717,7 +717,7 @@ async def assign_course_positions(
 async def remove_course_position(
     course_id: int,
     position_id: int,
-    current_user: User = Depends(require_admin),
+    current_user: User = Depends(require_admin_or_manager),
     db: AsyncSession = Depends(get_db),
 ):
     """

backend/app/main.py

@@ -188,6 +188,46 @@ async def http_exception_handler(request: Request, exc: HTTPException):
     )
 
 
+# 数据库唯一约束冲突处理 (409)
+from sqlalchemy.exc import IntegrityError
+@app.exception_handler(IntegrityError)
+async def integrity_error_handler(request: Request, exc: IntegrityError):
+    """处理数据库唯一约束冲突错误"""
+    error_msg = str(exc.orig) if exc.orig else str(exc)
+    logger.warning(f"数据库冲突 [{request.method} {request.url.path}]: {error_msg}")
+    
+    # 解析常见的冲突类型，提供友好的错误信息
+    friendly_message = "数据冲突，该记录可能已存在"
+    
+    if "Duplicate entry" in error_msg:
+        # MySQL 唯一约束冲突
+        if "username" in error_msg.lower():
+            friendly_message = "用户名已存在，请使用其他用户名"
+        elif "email" in error_msg.lower():
+            friendly_message = "邮箱已被注册，请使用其他邮箱"
+        elif "phone" in error_msg.lower():
+            friendly_message = "手机号已被注册，请使用其他手机号"
+        elif "name" in error_msg.lower():
+            friendly_message = "名称已存在，请使用其他名称"
+        elif "code" in error_msg.lower():
+            friendly_message = "编码已存在，请使用其他编码"
+        else:
+            friendly_message = "该记录已存在，不能重复创建"
+    elif "FOREIGN KEY" in error_msg.upper():
+        friendly_message = "关联的数据不存在或已被删除"
+    elif "cannot be null" in error_msg.lower():
+        friendly_message = "必填字段不能为空"
+    
+    return JSONResponse(
+        status_code=409,
+        content={
+            "code": 409,
+            "message": friendly_message,
+            "detail": error_msg if settings.DEBUG else None,
+        },
+    )
+
+
 # 全局异常处理
 @app.exception_handler(Exception)
 async def global_exception_handler(request: Request, exc: Exception):

backend/app/services/ai/coze/service.py

@@ -43,13 +43,16 @@ class CozeService:
 
     def __init__(self):
         self.client = get_coze_client()
-        self.bot_config = get_bot_config()
         self.workspace_id = get_workspace_id()
 
         # 内存中的会话存储（生产环境应使用 Redis）
         self._sessions: Dict[str, CozeSession] = {}
         self._messages: Dict[str, List[CozeMessage]] = {}
     
+    def _get_bot_config(self, session_type: str) -> Dict[str, Any]:
+        """根据会话类型获取 Bot 配置"""
+        return get_bot_config(session_type)
+
     async def create_session(
         self, request: CreateSessionRequest
     ) -> CreateSessionResponse:
@@ -211,12 +214,15 @@ class CozeService:
 
     def _get_bot_id_by_type(self, session_type: SessionType) -> str:
         """根据会话类型获取 Bot ID"""
-        mapping = {
-            SessionType.COURSE_CHAT: self.bot_config["course_chat"],
-            SessionType.TRAINING: self.bot_config["training"],
-            SessionType.EXAM: self.bot_config["exam"],
+        # 将 SessionType 枚举映射到配置字符串
+        type_mapping = {
+            SessionType.COURSE_CHAT: "course_chat",
+            SessionType.TRAINING: "training",
+            SessionType.EXAM: "training",  # 考试类型使用训练 bot
         }
-        return mapping.get(session_type, self.bot_config["training"])
+        config_type = type_mapping.get(session_type, "training")
+        bot_config = get_bot_config(config_type)
+        return bot_config["bot_id"]
 
     def _get_session(self, session_id: str) -> Optional[CozeSession]:
         """获取会话"""

backend/app/services/employee_sync_service.py

@@ -611,7 +611,7 @@ class EmployeeSyncService:
         """
         增量同步员工数据
         - 新增钉钉有但系统没有的员工
-        - 删除系统有但钉钉没有的员工（物理删除）
+        - 删除系统有但钉钉没有的员工（软删除）
         - 跳过两边都存在的员工（不做任何修改）
         
         Returns:
@@ -634,8 +634,22 @@ class EmployeeSyncService:
         try:
             # 1. 获取钉钉在职员工数据
             dingtalk_employees = await self.fetch_employees_from_dingtalk()
+            
+            # 使用手机号和钉钉ID双重匹配
             dingtalk_phones = {emp.get('phone') for emp in dingtalk_employees if emp.get('phone')}
-            logger.info(f"钉钉在职员工数量: {len(dingtalk_phones)}")
+            dingtalk_ids = {emp.get('dingtalk_id') for emp in dingtalk_employees if emp.get('dingtalk_id')}
+            
+            logger.info(f"钉钉在职员工数量: {len(dingtalk_employees)}")
+            logger.info(f"有手机号的员工: {len(dingtalk_phones)}")
+            logger.info(f"有钉钉ID的员工: {len(dingtalk_ids)}")
+            
+            # 安全检查：如果钉钉返回了员工但手机号全为空，可能是权限问题，跳过删除操作
+            skip_delete = False
+            if len(dingtalk_employees) > 0 and len(dingtalk_phones) == 0:
+                logger.warning("⚠️ 钉钉返回员工数据但手机号全为空，可能是钉钉应用缺少手机号读取权限！")
+                logger.warning("⚠️ 跳过离职员工处理，避免误删")
+                skip_delete = True
+                stats['errors'].append("钉钉应用可能缺少手机号读取权限，跳过删除操作")
             
             # 2. 获取系统现有用户（排除admin和已软删除的）
             stmt = select(User).where(
@@ -645,16 +659,26 @@ class EmployeeSyncService:
             result = await self.db.execute(stmt)
             system_users = result.scalars().all()
             system_phones = {user.phone for user in system_users if user.phone}
-            logger.info(f"系统现有员工数量（排除admin）: {len(system_phones)}")
+            system_dingtalk_ids = {user.dingtalk_id for user in system_users if user.dingtalk_id}
+            logger.info(f"系统现有员工数量（排除admin）: {len(system_users)}")
+            logger.info(f"系统有手机号的员工: {len(system_phones)}")
+            logger.info(f"系统有钉钉ID的员工: {len(system_dingtalk_ids)}")
             
-            # 3. 计算需要新增、删除、跳过的员工
+            # 3. 计算需要新增、删除、跳过的员工（同时考虑手机号和钉钉ID）
+            # 新增: 钉钉有但系统没有（手机号或钉钉ID都不存在）
             phones_to_add = dingtalk_phones - system_phones
-            phones_to_delete = system_phones - dingtalk_phones
+            ids_to_add = dingtalk_ids - system_dingtalk_ids
+            
+            # 删除: 系统有但钉钉没有（手机号和钉钉ID都不在钉钉列表中）
+            phones_to_delete = system_phones - dingtalk_phones if not skip_delete else set()
+            
+            # 跳过: 两边都存在
             phones_to_skip = dingtalk_phones & system_phones
+            ids_to_skip = dingtalk_ids & system_dingtalk_ids
             
-            logger.info(f"待新增: {len(phones_to_add)}, 待删除: {len(phones_to_delete)}, 跳过: {len(phones_to_skip)}")
+            logger.info(f"待新增(手机号): {len(phones_to_add)}, 待删除(手机号): {len(phones_to_delete)}, 跳过(手机号): {len(phones_to_skip)}")
             
-            stats['skipped_count'] = len(phones_to_skip)
+            stats['skipped_count'] = len(phones_to_skip) + len(ids_to_skip)
             
             # 4. 新增员工
             for employee in dingtalk_employees:
@@ -724,12 +748,29 @@ class EmployeeSyncService:
             # 先flush之前的新增操作
             await self.db.flush()
             
-            # 标记离职员工
+            # 如果跳过删除，则不处理
+            if skip_delete:
+                logger.info("⚠️ 由于安全检查未通过，跳过离职员工处理")
+            else:
+                # 标记离职员工（需要手机号和钉钉ID都不在钉钉列表中才删除）
                 for user in system_users:
-                if user.phone and user.phone in phones_to_delete:
                     # 双重保护：确保不删除admin
                     if user.username == 'admin' or user.role == 'admin':
-                        logger.warning(f"⚠️ 跳过处理管理员账户: {user.username}")
+                        continue
+                    
+                    # 检查用户是否在钉钉列表中（手机号或钉钉ID匹配任一即视为在职）
+                    in_dingtalk = False
+                    if user.phone and user.phone in dingtalk_phones:
+                        in_dingtalk = True
+                    if user.dingtalk_id and user.dingtalk_id in dingtalk_ids:
+                        in_dingtalk = True
+                    
+                    if in_dingtalk:
+                        continue  # 在钉钉中，跳过
+                    
+                    # 额外安全检查：如果钉钉没有返回有效数据，不删除
+                    if len(dingtalk_phones) == 0 and len(dingtalk_ids) == 0:
+                        logger.warning(f"⚠️ 钉钉数据为空，跳过删除用户: {user.full_name}")
                         continue
                     
                     try:

frontend/src/api/request.ts

@@ -10,6 +10,21 @@ import { loadingManager } from '@/utils/loadingManager'
 // 模拟延迟，使体验更真实
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
+// Token刷新状态管理
+let isRefreshing = false
+let refreshSubscribers: Array<(token: string) => void> = []
+
+// 订阅token刷新
+const subscribeTokenRefresh = (callback: (token: string) => void) => {
+  refreshSubscribers.push(callback)
+}
+
+// 通知所有订阅者
+const onTokenRefreshed = (token: string) => {
+  refreshSubscribers.forEach(callback => callback(token))
+  refreshSubscribers = []
+}
+
 // 扩展RequestInit接口以支持transformRequest
 interface ExtendedRequestInit extends RequestInit {
   transformRequest?: Array<(data: any, headers?: any) => any>
@@ -108,24 +123,84 @@ class Request {
     } catch (error) {
       // 处理HTTP错误
       const errorInfo = handleHttpError(error)
-      // 401 统一处理：清理本地状态并跳转登录
-      try {
       const status = (errorInfo as any)?.status || (error as any)?.status
-        if (status === 401) {
+      
+      // 401 处理：先尝试刷新Token，失败后再跳转登录
+      if (status === 401 && !url.includes('/auth/refresh') && !url.includes('/auth/login')) {
+        const refreshToken = localStorage.getItem('refresh_token')
+        
+        if (refreshToken) {
+          // 如果已经在刷新中，等待刷新完成后重试
+          if (isRefreshing) {
+            return new Promise<ApiResponse<T>>((resolve, reject) => {
+              subscribeTokenRefresh((newToken: string) => {
+                // 使用新token重试原请求
+                options.headers = {
+                  ...options.headers,
+                  'Authorization': `Bearer ${newToken}`
+                }
+                this.request<T>(url, options, showLoading).then(resolve).catch(reject)
+              })
+            })
+          }
+          
+          isRefreshing = true
+          console.info('[Auth] Token过期，尝试刷新...')
+          
+          try {
+            // 调用刷新接口
+            const refreshResponse = await fetch(`${API_CONFIG.baseURL}/api/v1/auth/refresh`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ refresh_token: refreshToken })
+            })
+            
+            if (refreshResponse.ok) {
+              const refreshData = await refreshResponse.json()
+              if (refreshData.code === 200 && refreshData.data?.token) {
+                const newAccessToken = refreshData.data.token.access_token
+                const newRefreshToken = refreshData.data.token.refresh_token
+                
+                // 保存新token
+                localStorage.setItem('access_token', newAccessToken)
+                if (newRefreshToken) {
+                  localStorage.setItem('refresh_token', newRefreshToken)
+                }
+                
+                console.info('[Auth] Token刷新成功')
+                isRefreshing = false
+                onTokenRefreshed(newAccessToken)
+                
+                // 使用新token重试原请求
+                options.headers = {
+                  ...options.headers,
+                  'Authorization': `Bearer ${newAccessToken}`
+                }
+                return this.request<T>(url, options, showLoading)
+              }
+            }
+            
+            // 刷新失败，执行登出
+            console.warn('[Auth] Token刷新失败，需要重新登录')
+            isRefreshing = false
+          } catch (refreshError) {
+            console.error('[Auth] Token刷新异常:', refreshError)
+            isRefreshing = false
+          }
+        }
+        
+        // 无refresh_token或刷新失败，清理状态并跳转登录
         console.warn('[Auth] Token过期或无效，正在清理认证状态', { url, status })
         localStorage.removeItem('access_token')
         localStorage.removeItem('refresh_token')
         localStorage.removeItem('current_user')
-          // 避免死循环，仅在非登录页执行
+        
         if (!location.pathname.startsWith('/login')) {
           console.info('[Auth] 重定向到登录页')
           location.href = '/login'
         }
       }
-      } catch (authError) {
-        // 认证处理过程中的异常不应影响主流程，但需要记录
-        console.error('[Auth] 处理401错误时发生异常:', authError)
-      }
+      
       throw errorInfo
     } finally {
       if (showLoading) {

frontend/src/views/admin/user-management.vue

@@ -63,12 +63,14 @@
             placeholder="全部岗位" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            style="width: 150px"
           >
-            <el-option label="销售专员" value="sales" />
-            <el-option label="销售主管" value="sales_manager" />
-            <el-option label="客服专员" value="service" />
-            <el-option label="技术支持" value="tech" />
+            <el-option
+              v-for="p in positionOptions"
+              :key="p.id"
+              :label="p.name"
+              :value="p.id"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>

frontend/src/views/analysis/mistakes.vue

@@ -263,12 +263,22 @@
             <h4 class="question-title">{{ mistake.title }}</h4>
             <div class="answer-comparison">
               <div class="answer-item wrong">
-                  <span class="answer-label">你的答案：</span>
-                  <span class="answer-value">{{ mistake.yourAnswer }}</span>
+                <div class="answer-header">
+                  <span class="answer-icon wrong-icon">✗</span>
+                  <span class="answer-label">你的答案</span>
+                </div>
+                <div class="answer-body">
+                  <span class="answer-value">{{ formatAnswer(mistake.yourAnswer) || '未作答' }}</span>
+                </div>
               </div>
               <div class="answer-item correct">
-                  <span class="answer-label">正确答案：</span>
-                  <span class="answer-value">{{ mistake.correctAnswer }}</span>
+                <div class="answer-header">
+                  <span class="answer-icon correct-icon">✓</span>
+                  <span class="answer-label">正确答案</span>
+                </div>
+                <div class="answer-body">
+                  <span class="answer-value">{{ formatAnswer(mistake.correctAnswer) }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -550,19 +560,38 @@ const loadMistakes = async () => {
  */
 const viewDetail = (mistake: any) => {
   ElMessageBox.alert(
-    h('div', { class: 'mistake-detail' }, [
-      h('h4', '题目'),
-      h('p', mistake.title),
-      h('h4', '你的答案'),
-      h('p', { style: 'color: #f56c6c' }, mistake.yourAnswer || '未作答'),
-      h('h4', '正确答案'),
-      h('p', { style: 'color: #67c23a' }, mistake.correctAnswer),
-      h('h4', '知识点'),
-      h('p', mistake.knowledge)
+    h('div', { class: 'mistake-detail-content' }, [
+      // 题目区域
+      h('div', { class: 'detail-section question-section' }, [
+        h('div', { class: 'section-label' }, '📝 题目内容'),
+        h('div', { class: 'section-content question-text' }, mistake.title)
+      ]),
+      // 答案对比区域
+      h('div', { class: 'detail-section answers-section' }, [
+        h('div', { class: 'answer-box wrong-answer' }, [
+          h('div', { class: 'answer-badge wrong' }, [
+            h('span', { class: 'badge-icon' }, '✗'),
+            h('span', { class: 'badge-text' }, '你的答案')
+          ]),
+          h('div', { class: 'answer-text' }, formatAnswer(mistake.yourAnswer) || '未作答')
+        ]),
+        h('div', { class: 'answer-box correct-answer' }, [
+          h('div', { class: 'answer-badge correct' }, [
+            h('span', { class: 'badge-icon' }, '✓'),
+            h('span', { class: 'badge-text' }, '正确答案')
+          ]),
+          h('div', { class: 'answer-text' }, formatAnswer(mistake.correctAnswer))
+        ])
+      ]),
+      // 知识点区域
+      h('div', { class: 'detail-section knowledge-section' }, [
+        h('div', { class: 'section-label' }, '💡 关联知识点'),
+        h('div', { class: 'section-content knowledge-tag' }, mistake.knowledge || '未关联')
+      ])
     ]),
     '错题详情',
     {
-      confirmButtonText: '关闭',
+      confirmButtonText: '我知道了',
       customClass: 'mistake-detail-dialog'
     }
   )
@@ -790,6 +819,33 @@ const getStatusTagType = (status: string) => {
   return map[status] || 'info'
 }
 
+/**
+ * 格式化答案显示
+ * 处理多选答案（逗号分隔）和选项格式
+ */
+const formatAnswer = (answer: string | null | undefined) => {
+  if (!answer) return ''
+  
+  // 如果是JSON数组格式，解析并格式化
+  if (answer.startsWith('[') && answer.endsWith(']')) {
+    try {
+      const arr = JSON.parse(answer)
+      if (Array.isArray(arr)) {
+        return arr.join('、')
+      }
+    } catch {
+      // 解析失败，使用原始字符串
+    }
+  }
+  
+  // 如果是逗号分隔的多选答案，用顿号分隔显示
+  if (answer.includes(',')) {
+    return answer.split(',').map(s => s.trim()).join('、')
+  }
+  
+  return answer
+}
+
 // 初始化加载数据
 onMounted(() => {
   loadStatistics()
@@ -1036,32 +1092,90 @@ console.log('错题分析页面已加载')
           .answer-comparison {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 12px;
-            margin-bottom: 12px;
+            gap: 16px;
+            margin-bottom: 16px;
+
+            @media (max-width: 640px) {
+              grid-template-columns: 1fr;
+            }
 
             .answer-item {
-              padding: 8px 12px;
-              border-radius: 6px;
+              border-radius: 12px;
+              overflow: hidden;
+              transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+              &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+              }
 
               &.wrong {
-                background: #fef0f0;
-                border: 1px solid #fcdede;
+                background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
+                border: 1px solid #ffccc7;
+
+                .answer-header {
+                  background: linear-gradient(90deg, #ff7875 0%, #ff9c9c 100%);
+                }
+
+                .answer-icon {
+                  background: #fff;
+                  color: #ff4d4f;
+                }
               }
 
               &.correct {
-                background: #f0f9ff;
-                border: 1px solid #b3d8ff;
+                background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+                border: 1px solid #b7eb8f;
+
+                .answer-header {
+                  background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+                }
+
+                .answer-icon {
+                  background: #fff;
+                  color: #52c41a;
+                }
+              }
+
+              .answer-header {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                padding: 10px 14px;
+
+                .answer-icon {
+                  width: 24px;
+                  height: 24px;
+                  border-radius: 50%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  font-size: 14px;
+                  font-weight: bold;
+                  flex-shrink: 0;
                 }
 
                 .answer-label {
-                font-size: 12px;
-                color: #666;
-                margin-right: 8px;
+                  font-size: 13px;
+                  font-weight: 600;
+                  color: #fff;
+                  letter-spacing: 0.5px;
+                }
               }
 
+              .answer-body {
+                padding: 14px 16px;
+                min-height: 48px;
+                display: flex;
+                align-items: center;
+
                 .answer-value {
+                  font-size: 15px;
                   font-weight: 500;
                   color: #333;
+                  line-height: 1.6;
+                  word-break: break-word;
+                }
               }
             }
           }
@@ -1114,3 +1228,180 @@ console.log('错题分析页面已加载')
   }
 }
 </style>
+
+<!-- 全局样式用于弹窗 -->
+<style lang="scss">
+.mistake-detail-dialog {
+  max-width: 600px !important;
+  border-radius: 16px !important;
+  overflow: hidden;
+
+  .el-message-box__header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 16px 20px;
+
+    .el-message-box__title {
+      color: #fff !important;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .el-message-box__headerbtn {
+      .el-message-box__close {
+        color: #fff !important;
+      }
+    }
+  }
+
+  .el-message-box__content {
+    padding: 0 !important;
+  }
+
+  .el-message-box__btns {
+    padding: 16px 20px;
+    border-top: 1px solid #f0f0f0;
+
+    .el-button--primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 8px;
+      padding: 10px 24px;
+      font-weight: 500;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.mistake-detail-content {
+  .detail-section {
+    padding: 16px 20px;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .section-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: #666;
+      margin-bottom: 10px;
+    }
+
+    .section-content {
+      font-size: 15px;
+      color: #333;
+      line-height: 1.6;
+    }
+  }
+
+  .question-section {
+    background: #fafafa;
+
+    .question-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #1a1a1a;
+    }
+  }
+
+  .answers-section {
+    display: flex;
+    gap: 16px;
+    padding: 20px;
+    background: #fff;
+
+    @media (max-width: 500px) {
+      flex-direction: column;
+    }
+
+    .answer-box {
+      flex: 1;
+      border-radius: 12px;
+      overflow: hidden;
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+      }
+
+      &.wrong-answer {
+        background: linear-gradient(135deg, #fff5f5 0%, #ffebeb 100%);
+        border: 1px solid #ffccc7;
+
+        .answer-badge {
+          background: linear-gradient(90deg, #ff7875 0%, #ff9c9c 100%);
+        }
+      }
+
+      &.correct-answer {
+        background: linear-gradient(135deg, #f6ffed 0%, #e8f8e0 100%);
+        border: 1px solid #b7eb8f;
+
+        .answer-badge {
+          background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+        }
+      }
+
+      .answer-badge {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 14px;
+        color: #fff;
+
+        .badge-icon {
+          width: 22px;
+          height: 22px;
+          background: rgba(255, 255, 255, 0.95);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          font-weight: bold;
+        }
+
+        &.wrong .badge-icon {
+          color: #ff4d4f;
+        }
+
+        &.correct .badge-icon {
+          color: #52c41a;
+        }
+
+        .badge-text {
+          font-size: 13px;
+          font-weight: 600;
+        }
+      }
+
+      .answer-text {
+        padding: 14px 16px;
+        font-size: 15px;
+        font-weight: 500;
+        color: #333;
+        line-height: 1.5;
+        min-height: 44px;
+      }
+    }
+  }
+
+  .knowledge-section {
+    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
+
+    .knowledge-tag {
+      display: inline-block;
+      background: #1890ff;
+      color: #fff;
+      padding: 6px 14px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+}
+</style>