refactor: 改造 CI/CD 使用阿里云 ACR 镜像仓库

- 统计卡片改用 el-statistic 组件，与错题分析保持一致
- 搜索框改为圆角胶囊形状，添加 hover 聚焦效果
- 下拉选择框使用统一的圆角灰底设计，添加 emoji 图标前缀
- 筛选标签改为胶囊形状
- 重置按钮仅在有筛选条件时显示
- 添加表格行悬浮效果和操作按钮悬浮样式
- 优化响应式布局

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

.drone.yml

@@ -1,8 +1,8 @@
 kind: pipeline
 type: docker
-name: deploy-test
+name: build-and-push-test
 
-# 测试环境：test 分支触发，部署到 kpl
+# 测试环境：test 分支触发，构建并推送到 ACR
 trigger:
   branch:
     - test
@@ -10,64 +10,61 @@ trigger:
     - push
 
 steps:
-  - name: sync-code
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 5m
-      script:
-        - echo "=== 测试环境 同步代码 ==="
-        - cd /root/aiedu
-        - git fetch cicd
-        - git checkout test 2>/dev/null || git checkout -b test cicd/test
-        - git reset --hard cicd/test
-        - echo "代码同步完成"
+  # 构建并推送后端镜像
+  - name: build-push-backend
+    image: docker:dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      DOCKER_REGISTRY:
+        from_secret: docker_registry
+      DOCKER_USERNAME:
+        from_secret: docker_username
+      DOCKER_PASSWORD:
+        from_secret: docker_password
+    commands:
+      - echo "$DOCKER_PASSWORD" | docker login "$DOCKER_REGISTRY" -u "$DOCKER_USERNAME" --password-stdin
+      - cd backend
+      - docker build -t $DOCKER_REGISTRY/ireborn/kaopeilian-backend:test -f Dockerfile .
+      - docker tag $DOCKER_REGISTRY/ireborn/kaopeilian-backend:test $DOCKER_REGISTRY/ireborn/kaopeilian-backend:${DRONE_COMMIT_SHA:0:8}
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-backend:test
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-backend:${DRONE_COMMIT_SHA:0:8}
+      - echo "后端镜像推送完成"
 
-  - name: build-frontend-test
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 10m
-      script:
-        - echo "=== 测试环境 编译前端到 dist-test ==="
-        - cd /root/aiedu/frontend
-        - npm install --silent
-        - npm run build
-        - rm -rf /root/aiedu/dist-test/*
-        - cp -r dist/* /root/aiedu/dist-test/
-        - echo "前端编译完成 dist-test"
+  # 构建并推送前端镜像
+  - name: build-push-frontend
+    image: docker:dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      DOCKER_REGISTRY:
+        from_secret: docker_registry
+      DOCKER_USERNAME:
+        from_secret: docker_username
+      DOCKER_PASSWORD:
+        from_secret: docker_password
+    commands:
+      - echo "$DOCKER_PASSWORD" | docker login "$DOCKER_REGISTRY" -u "$DOCKER_USERNAME" --password-stdin
+      - cd frontend
+      - docker build -t $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:test -f Dockerfile --build-arg VITE_API_BASE_URL=https://kpl.ireborn.com.cn .
+      - docker tag $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:test $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:${DRONE_COMMIT_SHA:0:8}
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:test
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:${DRONE_COMMIT_SHA:0:8}
+      - echo "前端镜像推送完成"
 
-  - name: deploy-backend
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 5m
-      script:
-        - echo "=== 测试环境 部署后端 ==="
-        - cp -r /root/aiedu/backend/app/* /root/aiedu/backend-test/app/
-        - docker restart kpl-backend-dev
-        - sleep 5
-        - docker ps | grep kpl-
-        - echo "=== 测试环境部署完成 ==="
+volumes:
+  - name: docker-sock
+    host:
+      path: /var/run/docker.sock
 
 ---
 kind: pipeline
 type: docker
-name: deploy-staging
+name: build-and-push-staging
 
-# 预生产环境：staging 分支触发，部署到 aiedu
+# 预生产环境：staging 分支触发
 trigger:
   branch:
     - staging
@@ -75,71 +72,53 @@ trigger:
     - push
 
 steps:
-  - name: sync-code
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 5m
-      script:
-        - echo "=== 预生产 同步代码 ==="
-        - cd /root/aiedu
-        - git fetch cicd
-        - git checkout staging 2>/dev/null || git checkout -b staging cicd/staging
-        - git reset --hard cicd/staging
-        - echo "代码同步完成"
+  - name: build-push-backend
+    image: docker:dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      DOCKER_REGISTRY:
+        from_secret: docker_registry
+      DOCKER_USERNAME:
+        from_secret: docker_username
+      DOCKER_PASSWORD:
+        from_secret: docker_password
+    commands:
+      - echo "$DOCKER_PASSWORD" | docker login "$DOCKER_REGISTRY" -u "$DOCKER_USERNAME" --password-stdin
+      - cd backend
+      - docker build -t $DOCKER_REGISTRY/ireborn/kaopeilian-backend:staging -f Dockerfile .
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-backend:staging
 
-  - name: build-frontend-staging
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 10m
-      script:
-        - echo "=== 预生产 编译前端到 dist-staging ==="
-        - cd /root/aiedu/frontend
-        - npm install --silent
-        - npm run build
-        - rm -rf /root/aiedu/dist-staging/*
-        - cp -r dist/* /root/aiedu/dist-staging/
-        - echo "前端编译完成 dist-staging"
+  - name: build-push-frontend
+    image: docker:dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      DOCKER_REGISTRY:
+        from_secret: docker_registry
+      DOCKER_USERNAME:
+        from_secret: docker_username
+      DOCKER_PASSWORD:
+        from_secret: docker_password
+    commands:
+      - echo "$DOCKER_PASSWORD" | docker login "$DOCKER_REGISTRY" -u "$DOCKER_USERNAME" --password-stdin
+      - cd frontend
+      - docker build -t $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:staging -f Dockerfile --build-arg VITE_API_BASE_URL=https://aiedu.ireborn.com.cn .
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:staging
 
-  - name: deploy-backend
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 5m
-      script:
-        - echo "=== 预生产 部署后端 ==="
-        - cp -r /root/aiedu/backend/app/* /root/aiedu/backend-staging/app/
-        - docker restart kaopeilian-backend
-        - sleep 5
-        - docker ps | grep kaopeilian-
-        - echo "=== 预生产部署完成 ==="
+volumes:
+  - name: docker-sock
+    host:
+      path: /var/run/docker.sock
 
 ---
 kind: pipeline
 type: docker
-name: deploy-prod
+name: build-and-push-prod
 
-# 生产环境：main 分支触发，部署到所有租户
-# 
-# 使用方法：
-#   git commit -m "feat: xxx [all]"        - 部署所有租户
-#   git commit -m "feat: xxx [hua]"        - 仅部署 hua
-#   git commit -m "feat: xxx [cxw,yy,hl]"  - 部署指定多个租户
-#   git commit -m "feat: xxx"              - 默认部署所有租户
-#
+# 生产环境：main 分支触发
 trigger:
   branch:
     - main
@@ -147,107 +126,47 @@ trigger:
     - push
 
 steps:
-  - name: sync-code-to-server
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 10m
-      script:
-        - echo "=== 生产 同步代码 ==="
-        - cd /root/aiedu
-        - git fetch cicd
-        - git reset --hard cicd/main
-        - echo "代码同步完成"
-
-  - name: build-frontend-prod
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 10m
-      script:
-        - echo "=== 生产 编译前端到 dist-prod ==="
-        - cd /root/aiedu/frontend
-        - npm install --silent
-        - npm run build
-        - rm -rf /root/aiedu/dist-prod/*
-        - cp -r dist/* /root/aiedu/dist-prod/
-        - echo "前端编译完成 dist-prod 所有生产租户已更新"
-
-  - name: deploy-backend
-    image: appleboy/drone-ssh
-    settings:
-      host: 120.79.247.16
-      username: root
-      password:
-        from_secret: prod_ssh_password
-      port: 22
-      command_timeout: 15m
-      script:
-        - echo "=== 生产 部署后端 ==="
-        - |
-          # 同步后端代码到生产环境目录
-          cp -r /root/aiedu/backend/app/* /root/aiedu/backend-prod/app/
-          echo "后端代码已同步到生产目录"
-          
-          # 获取 commit message
-          COMMIT_MSG="${DRONE_COMMIT_MESSAGE}"
-          echo "Commit: $COMMIT_MSG"
-          
-          # 所有可用租户
-          ALL_TENANTS="hua yy hl xy fw ex cxw"
-          
-          # 解析要部署的租户
-          if echo "$COMMIT_MSG" | grep -q '\[all\]'; then
-            TENANTS="$ALL_TENANTS"
-            echo "部署所有租户: $TENANTS"
-          elif echo "$COMMIT_MSG" | grep -oP '\[\K[a-z,]+(?=\])' > /tmp/tenants.txt 2>/dev/null; then
-            TENANTS=$(cat /tmp/tenants.txt | tr ',' ' ')
-            echo "部署指定租户: $TENANTS"
-          else
-            TENANTS="$ALL_TENANTS"
-            echo "默认部署所有租户: $TENANTS"
-          fi
-          
-          # 重启指定租户的后端容器
-          for t in $TENANTS; do
-            echo "重启 ${t}-backend ..."
-            docker restart ${t}-backend || echo "警告: ${t}-backend 不存在或重启失败"
-          done
-          
-          sleep 10
-          docker ps | grep backend
-          echo "=== 生产 部署完成 ==="
-          echo "已更新租户: $TENANTS"
-
----
-kind: pipeline
-type: docker
-name: code-check
-
-trigger:
-  event:
-    - push
-    - pull_request
-
-steps:
-  - name: python-lint
-    image: python:3.9-slim
+  - name: build-push-backend
+    image: docker:dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      DOCKER_REGISTRY:
+        from_secret: docker_registry
+      DOCKER_USERNAME:
+        from_secret: docker_username
+      DOCKER_PASSWORD:
+        from_secret: docker_password
     commands:
+      - echo "$DOCKER_PASSWORD" | docker login "$DOCKER_REGISTRY" -u "$DOCKER_USERNAME" --password-stdin
       - cd backend
-      - pip install flake8 -q
-      - flake8 app --count --select=E9,F63,F7,F82 --show-source --statistics || true
-      - echo "Python lint completed"
+      - docker build -t $DOCKER_REGISTRY/ireborn/kaopeilian-backend:main -f Dockerfile .
+      - docker tag $DOCKER_REGISTRY/ireborn/kaopeilian-backend:main $DOCKER_REGISTRY/ireborn/kaopeilian-backend:latest
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-backend:main
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-backend:latest
 
-  - name: frontend-check
-    image: node:18-alpine
+  - name: build-push-frontend
+    image: docker:dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      DOCKER_REGISTRY:
+        from_secret: docker_registry
+      DOCKER_USERNAME:
+        from_secret: docker_username
+      DOCKER_PASSWORD:
+        from_secret: docker_password
     commands:
+      - echo "$DOCKER_PASSWORD" | docker login "$DOCKER_REGISTRY" -u "$DOCKER_USERNAME" --password-stdin
       - cd frontend
-      - echo "Frontend check completed"
+      - docker build -t $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:main -f Dockerfile --build-arg VITE_API_BASE_URL=https://hua.ireborn.com.cn .
+      - docker tag $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:main $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:latest
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:main
+      - docker push $DOCKER_REGISTRY/ireborn/kaopeilian-frontend:latest
+
+volumes:
+  - name: docker-sock
+    host:
+      path: /var/run/docker.sock

backend/app/api/v1/users.py

@@ -47,20 +47,23 @@ async def get_current_user_statistics(
     获取当前用户学习统计
 
     返回字段：
-    - learningDays: 学习天数（按陪练会话开始日期去重）
+    - learningDays: 学习天数（从注册日期到今天的天数，至少为1）
     - totalHours: 学习总时长（小时，取整到1位小数）
     - practiceQuestions: 练习题数（答题记录条数汇总）
     - averageScore: 平均成绩（已提交考试的平均分，保留1位小数）
     - examsCompleted: 已完成考试数量
     """
     try:
+        from datetime import date
         user_id = current_user.id
 
-        # 学习天数：按会话开始日期去重
-        learning_days_stmt = select(func.count(func.distinct(func.date(TrainingSession.start_time)))).where(
-            TrainingSession.user_id == user_id
-        )
-        learning_days = (await db.scalar(learning_days_stmt)) or 0
+        # 学习天数：从注册日期到今天的天数（至少为1天）
+        if current_user.created_at:
+            registration_date = current_user.created_at.date() if hasattr(current_user.created_at, 'date') else current_user.created_at
+            learning_days = (date.today() - registration_date).days + 1  # +1 是因为注册当天也算第1天
+            learning_days = max(1, learning_days)  # 确保至少为1
+        else:
+            learning_days = 1
 
         # 总时长（小时）
         total_seconds_stmt = select(func.coalesce(func.sum(TrainingSession.duration_seconds), 0)).where(

frontend/src/layout/index.vue

@@ -379,6 +379,8 @@ const menuConfig = [
 
 // 获取菜单路由
 const menuRoutes = computed(() => {
+  const userRole = authManager.getUserRole()
+  
   // 仅保留当前用户可访问的菜单项和启用的功能
   const filterChildren = (children: any[] = []) =>
     children.filter((child: any) => {
@@ -389,7 +391,22 @@ const menuRoutes = computed(() => {
       return true
     })
 
+  // 根据角色预过滤顶级菜单
+  const roleMenuFilter = (route: any): boolean => {
+    // 管理者中心：仅 admin 和 manager 可见
+    if (route.path === '/manager') {
+      return userRole === 'admin' || userRole === 'manager'
+    }
+    // 系统管理：仅 admin 可见
+    if (route.path === '/admin') {
+      return userRole === 'admin'
+    }
+    // 数据分析：所有登录用户可见（但子菜单会进一步过滤）
+    return true
+  }
+
   return menuConfig
+    .filter(roleMenuFilter)  // 先按角色过滤顶级菜单
     .map((route: any) => {
       const next = { ...route }
       if (route.children && route.children.length > 0) {
@@ -398,8 +415,10 @@ const menuRoutes = computed(() => {
       return next
     })
     .filter((route: any) => {
-      // 有子菜单且至少一个可访问
-      if (route.children && route.children.length > 0) return true
+      // 有子菜单的必须至少有一个可访问的子项
+      if (route.children !== undefined) {
+        return route.children.length > 0
+      }
       // 无子菜单时检查自身路径
       return authManager.canAccessRoute(route.path)
     })

frontend/src/views/dashboard/index.vue

@@ -4,7 +4,15 @@
     <div class="welcome-card card">
       <div class="welcome-content">
         <h1 class="welcome-title">欢迎回来，{{ userName }}！</h1>
-        <p class="welcome-desc">今天是您学习的第 <span class="highlight">{{ learningDays }}</span> 天，继续加油！</p>
+        <p class="welcome-desc" v-if="userRole === 'trainee'">
+          今天是您学习的第 <span class="highlight">{{ learningDays }}</span> 天，继续加油！
+        </p>
+        <p class="welcome-desc" v-else-if="userRole === 'manager'">
+          管理您的团队，助力成员成长
+        </p>
+        <p class="welcome-desc" v-else>
+          系统运行正常，一切尽在掌控
+        </p>
       </div>
       <div class="welcome-image">
         <el-icon :size="120" color="#667eea">
@@ -13,8 +21,8 @@
       </div>
     </div>
 
-    <!-- 统计卡片 -->
-    <div class="stats-grid">
+    <!-- 统计卡片 - 仅学员显示 -->
+    <div class="stats-grid" v-if="userRole === 'trainee'">
       <div class="stat-card card" v-for="stat in stats" :key="stat.title">
         <div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
           <el-icon :size="24" :color="stat.color">
@@ -24,7 +32,7 @@
         <div class="stat-content">
           <div class="stat-value">{{ stat.value }}</div>
           <div class="stat-title">{{ stat.title }}</div>
-          <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
+          <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'" v-if="stat.trend !== 0">
             <el-icon :size="12">
               <component :is="stat.trend > 0 ? 'Top' : 'Bottom'" />
             </el-icon>
@@ -48,8 +56,8 @@
       </div>
     </div>
 
-    <!-- 最近考试 -->
-    <div class="recent-exams">
+    <!-- 最近考试 - 仅学员显示 -->
+    <div class="recent-exams" v-if="userRole === 'trainee'">
       <h2 class="section-title">最近考试</h2>
       <div v-if="recentExams.length > 0" class="exam-list">
         <div class="exam-item card" v-for="exam in recentExams" :key="exam.id">
@@ -99,6 +107,7 @@ const router = useRouter()
 // 获取当前用户信息
 const currentUser = computed(() => authManager.getCurrentUser())
 const userName = computed(() => currentUser.value?.full_name || currentUser.value?.username || '用户')
+const userRole = computed(() => authManager.getUserRole())
 const learningDays = ref(0)
 
 // 统计数据
@@ -156,37 +165,64 @@ const loadStatistics = async () => {
   }
 }
 
-// 快捷操作
-const quickActions = ref([
+// 快捷操作配置（包含角色限制）
+const allQuickActions = [
   {
     title: '智能工牌分析',
     desc: 'AI能力评估与成长路径规划',
     icon: 'TrendCharts',
     color: '#e6a23c',
-    path: '/trainee/growth-path'
+    path: '/trainee/growth-path',
+    roles: ['trainee']  // 仅学员可见
   },
   {
     title: '课程中心',
     desc: '查看可用课程',
     icon: 'Collection',
     color: '#67c23a',
-    path: '/trainee/course-center'
+    path: '/trainee/course-center',
+    roles: ['trainee', 'manager', 'admin']  // 所有角色可见
   },
   {
     title: '查分中心',
     desc: '查看成绩和分析报告',
     icon: 'DataAnalysis',
     color: '#409eff',
-    path: '/trainee/score-report'
+    path: '/trainee/score-report',
+    roles: ['trainee']  // 仅学员可见
   },
   {
     title: 'AI陪练',
     desc: '智能陪练系统',
     icon: 'ChatLineRound',
     color: '#f56c6c',
-    path: '/trainee/ai-practice-center'
+    path: '/trainee/ai-practice-center',
+    roles: ['trainee', 'manager', 'admin']  // 所有角色可见
+  },
+  {
+    title: '团队看板',
+    desc: '查看团队学习情况',
+    icon: 'DataBoard',
+    color: '#667eea',
+    path: '/manager/team-dashboard',
+    roles: ['manager', 'admin']  // 管理者和管理员可见
+  },
+  {
+    title: '课程管理',
+    desc: '管理培训课程内容',
+    icon: 'Notebook',
+    color: '#909399',
+    path: '/manager/course-management',
+    roles: ['manager', 'admin']  // 管理者和管理员可见
   }
-])
+]
+
+// 根据角色过滤快捷操作
+const quickActions = computed(() => {
+  const role = userRole.value
+  if (!role) return []
+  return allQuickActions.filter(action => action.roles.includes(role))
+})
 
 // 最近考试
 const recentExams = ref<any[]>([])

frontend/src/views/trainee/growth-path.vue

@@ -31,7 +31,14 @@
       <div class="ability-radar card">
         <div class="card-header">
           <h3 class="card-title">能力评估</h3>
-          <el-button type="primary" size="small" @click="analyzeSmartBadgeData" :loading="analyzing">
+          <!-- AI智能工牌分析仅对学员开放 -->
+          <el-button 
+            v-if="userInfo.role === 'trainee'" 
+            type="primary" 
+            size="small" 
+            @click="analyzeSmartBadgeData" 
+            :loading="analyzing"
+          >
             <el-icon><TrendCharts /></el-icon>
             AI 分析智能工牌数据
           </el-button>
@@ -302,7 +309,7 @@
           <p class="empty-description">
             {{ analyzing ? '正在分析您的智能工牌数据，为您推荐最适合的课程' : '暂无智能工牌数据，请先使用智能工牌记录对话' }}
           </p>
-          <el-button v-if="!analyzing" type="primary" @click="analyzeSmartBadgeData">
+          <el-button v-if="!analyzing && userInfo.role === 'trainee'" type="primary" @click="analyzeSmartBadgeData">
             <el-icon><Refresh /></el-icon>
             重新分析
           </el-button>

frontend/src/views/trainee/practice-records.vue

@@ -2,118 +2,134 @@
   <div class="practice-records-container">
     <div class="page-header">
       <h1 class="page-title">陪练记录</h1>
-      <div class="header-actions">
-        <el-date-picker
-          v-model="dateRange"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          @change="handleDateChange"
-        />
-        <el-button type="primary" @click="refreshData">
-          <el-icon class="el-icon--left"><Refresh /></el-icon>
-          刷新数据
-        </el-button>
-      </div>
     </div>
 
     <!-- 陪练统计概览 -->
-    <div class="stats-overview">
-      <div class="stat-card card" v-for="stat in practiceStats" :key="stat.label">
-        <div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
-          <el-icon :size="32" :color="stat.color">
-            <component :is="stat.icon" />
-          </el-icon>
+    <div class="stats-section">
+      <div class="stat-card card">
+        <el-statistic title="总陪练次数" :value="practiceStatsData.totalCount">
+          <template #suffix>
+            <span style="font-size: 14px">次</span>
+          </template>
+        </el-statistic>
       </div>
-        <div class="stat-content">
-          <div class="stat-value">{{ stat.value }}</div>
-          <div class="stat-label">{{ stat.label }}</div>
-          <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'" v-if="stat.trend !== 0">
-            <el-icon><component :is="stat.trend > 0 ? 'Top' : 'Bottom'" /></el-icon>
-            {{ Math.abs(stat.trend) }}%
+      <div class="stat-card card">
+        <el-statistic title="平均评分" :value="practiceStatsData.avgScore" :precision="1">
+          <template #suffix>
+            <span style="font-size: 14px">分</span>
+          </template>
+        </el-statistic>
       </div>
+      <div class="stat-card card">
+        <el-statistic title="总陪练时长" :value="practiceStatsData.totalHours" :precision="1">
+          <template #suffix>
+            <span style="font-size: 14px">小时</span>
+          </template>
+        </el-statistic>
       </div>
+      <div class="stat-card card">
+        <el-statistic title="本月进步" :value="practiceStatsData.monthImprovement">
+          <template #prefix>+</template>
+          <template #suffix>%</template>
+        </el-statistic>
       </div>
     </div>
 
-    <!-- 筛选区域 -->
+    <!-- 搜索和筛选 -->
     <div class="filter-section card">
-      <el-form :inline="true" :model="filterForm" class="filter-form">
-        <el-form-item label="关键词">
+      <div class="filter-toolbar">
+        <!-- 搜索框 -->
+        <div class="search-box">
           <el-input 
             v-model="filterForm.keyword" 
-            placeholder="搜索陪练内容或场景"
+            placeholder="搜索陪练内容或场景..."
             clearable
             @input="handleRealTimeSearch"
-            style="width: 200px"
+            class="search-input"
           >
             <template #prefix>
-              <el-icon><Search /></el-icon>
+              <el-icon class="search-icon"><Search /></el-icon>
             </template>
           </el-input>
-        </el-form-item>
-        <el-form-item label="陪练场景">
+        </div>
+        
+        <!-- 筛选项 -->
+        <div class="filter-items">
           <el-select 
             v-model="filterForm.scene" 
-            placeholder="全部场景" 
+            placeholder="陪练场景" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">🎯</span>
+            </template>
             <el-option label="客户咨询" value="customer_consultation" />
             <el-option label="美容护理" value="beauty_care" />
             <el-option label="产品介绍" value="product_introduction" />
             <el-option label="问题处理" value="problem_handling" />
             <el-option label="服务礼仪" value="service_etiquette" />
           </el-select>
-        </el-form-item>
-        <el-form-item label="陪练结果">
+
           <el-select 
             v-model="filterForm.result" 
-            placeholder="全部结果" 
+            placeholder="陪练结果" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">⭐</span>
+            </template>
             <el-option label="优秀" value="excellent" />
             <el-option label="良好" value="good" />
             <el-option label="一般" value="average" />
             <el-option label="需改进" value="needs_improvement" />
           </el-select>
-        </el-form-item>
-        <el-form-item label="时间周期">
+
           <el-select 
             v-model="filterForm.timePeriod" 
-            placeholder="全部时间" 
+            placeholder="时间周期" 
             clearable
             @change="handleRealTimeSearch"
-            style="width: 120px"
+            class="filter-select"
           >
+            <template #prefix>
+              <span class="select-prefix-icon">📅</span>
+            </template>
             <el-option label="最近一周" value="week" />
             <el-option label="最近一月" value="month" />
             <el-option label="最近三月" value="quarter" />
             <el-option label="自定义" value="custom" />
           </el-select>
-        </el-form-item>
-        <el-form-item v-if="filterForm.timePeriod === 'custom'" label="自定义时间">
+
           <el-date-picker
+            v-if="filterForm.timePeriod === 'custom'"
             v-model="customDateRange"
             type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            range-separator="~"
+            start-placeholder="开始"
+            end-placeholder="结束"
             @change="handleRealTimeSearch"
-            style="width: 240px"
+            class="date-picker"
+            format="MM/DD"
+            value-format="YYYY-MM-DD"
           />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleReset">
-            <el-icon class="el-icon--left"><Refresh /></el-icon>
+        </div>
+
+        <!-- 重置按钮 -->
+        <el-button 
+          v-if="hasActiveFilters"
+          @click="handleReset" 
+          class="reset-btn"
+          type="info"
+          plain
+        >
+          <el-icon><Refresh /></el-icon>
           重置
         </el-button>
-        </el-form-item>
-      </el-form>
+      </div>
 
       <!-- 当前筛选条件显示 -->
       <div v-if="hasActiveFilters" class="filter-tags">
@@ -123,6 +139,7 @@
           closable 
           @close="clearKeyword"
           type="primary"
+          effect="light"
         >
           关键词：{{ filterForm.keyword }}
         </el-tag>
@@ -283,8 +300,15 @@
         </div>
 
         <!-- 对话记录 -->
-        <div class="conversation-replay">
-          <div class="conversation-list">
+        <div class="conversation-replay" v-loading="replayLoading">
+          <!-- 空状态提示 -->
+          <el-empty 
+            v-if="!replayLoading && (!currentRecord.conversation || currentRecord.conversation.length === 0)" 
+            description="暂无对话记录"
+          />
+          
+          <!-- 对话列表 -->
+          <div class="conversation-list" v-else>
             <div 
               v-for="(message, index) in currentRecord.conversation" 
               :key="index"
@@ -342,6 +366,7 @@ const total = ref(0)
 
 // 弹窗状态
 const replayDialogVisible = ref(false)
+const replayLoading = ref(false)
 const currentRecord = ref<any>(null)
 
 // 筛选表单
@@ -373,6 +398,17 @@ interface PracticeStat {
 // 陪练统计数据
 const practiceStats = ref<PracticeStat[]>([])
 
+// 简化的统计数据（用于 el-statistic 组件）
+const practiceStatsData = computed(() => {
+  const stats = practiceStats.value
+  return {
+    totalCount: parseInt(stats.find(s => s.label === '总陪练次数')?.value || '0'),
+    avgScore: parseFloat(stats.find(s => s.label === '平均评分')?.value || '0'),
+    totalHours: parseFloat(stats.find(s => s.label === '总陪练时长')?.value?.replace('h', '') || '0'),
+    monthImprovement: parseInt(stats.find(s => s.label === '本月进步')?.value?.replace('+', '').replace('%', '') || '0')
+  }
+})
+
 // 陪练记录数据（直接使用后端返回的已筛选、已分页的数据）
 const recordsList = ref([])
 
@@ -608,9 +644,32 @@ const viewPracticeReport = (record: any) => {
 /**
  * 回放陪练对话
  */
-const replayPractice = (record: any) => {
-  currentRecord.value = record
+const replayPractice = async (record: any) => {
+  try {
+    // 先设置基本信息并打开弹窗
+    currentRecord.value = { ...record, conversation: [] }
     replayDialogVisible.value = true
+    replayLoading.value = true
+    
+    // 调用 API 获取对话详情
+    const response: any = await practiceApi.getPracticeReport(record.sessionId)
+    
+    if (response.code === 200 && response.data?.analysis?.dialogue_review) {
+      // 转换对话数据格式
+      const dialogueReview = response.data.analysis.dialogue_review
+      currentRecord.value.conversation = dialogueReview.map((item: any) => ({
+        role: item.speaker === 'user' ? 'user' : 'ai',
+        content: item.content,
+        timestamp: item.time || '',
+        feedback: item.comment || ''
+      }))
+    }
+  } catch (error: any) {
+    console.error('获取对话详情失败:', error)
+    ElMessage.error('获取对话详情失败，请稍后重试')
+  } finally {
+    replayLoading.value = false
+  }
 }
 
 /**
@@ -738,95 +797,143 @@ const loadRecords = async () => {
   max-width: 1400px;
   margin: 0 auto;
 
+  .card {
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  }
+
   .page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     margin-bottom: 24px;
 
     .page-title {
       font-size: 24px;
       font-weight: 600;
-      color: #333;
-    }
-
-    .header-actions {
-      display: flex;
-      gap: 12px;
+      color: #1f2937;
     }
   }
 
-  .stats-overview {
+  // 统计区域 - 参考错题分析风格
+  .stats-section {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 20px;
     margin-bottom: 24px;
 
     .stat-card {
-      padding: 24px;
-      display: flex;
-      align-items: center;
-      gap: 20px;
+      text-align: center;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
 
-      .stat-icon {
-        width: 64px;
-        height: 64px;
-        border-radius: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      }
+    }
   }
 
-      .stat-content {
+  // 筛选区域 - 参考错题分析现代风格
+  .filter-section {
+    padding: 16px 20px;
+
+    .filter-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+
+      .search-box {
+        flex: 0 0 280px;
+
+        .search-input {
+          :deep(.el-input__wrapper) {
+            border-radius: 20px;
+            background: #f5f7fa;
+            box-shadow: none;
+            border: 1px solid transparent;
+            padding: 4px 16px;
+            transition: all 0.3s ease;
+
+            &:hover, &:focus-within {
+              background: #fff;
+              border-color: #409eff;
+              box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
+            }
+          }
+
+          .search-icon {
+            color: #909399;
+            font-size: 16px;
+          }
+        }
+      }
+
+      .filter-items {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
         flex: 1;
 
-        .stat-value {
-          font-size: 32px;
-          font-weight: 700;
-          color: #333;
-          line-height: 1;
-          margin-bottom: 8px;
+        .filter-select {
+          width: 130px;
+
+          :deep(.el-select__wrapper) {
+            border-radius: 8px;
+            background: #f5f7fa;
+            box-shadow: none;
+            border: 1px solid transparent;
+            transition: all 0.2s ease;
+            min-height: 36px;
+
+            &:hover {
+              background: #fff;
+              border-color: #dcdfe6;
             }
 
-        .stat-label {
+            &.is-focused {
+              background: #fff;
+              border-color: #409eff;
+              box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+            }
+          }
+
+          .select-prefix-icon {
             font-size: 14px;
-          color: #666;
-          margin-bottom: 8px;
+            margin-right: 4px;
+          }
         }
 
-        .stat-trend {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          font-size: 12px;
-          font-weight: 500;
+        .date-picker {
+          :deep(.el-input__wrapper) {
+            border-radius: 8px;
+            background: #f5f7fa;
+            box-shadow: none;
+            border: 1px solid transparent;
 
-          &.up {
-            color: #67c23a;
-          }
-
-          &.down {
-            color: #f56c6c;
-          }
+            &:hover {
+              background: #fff;
+              border-color: #dcdfe6;
             }
           }
         }
       }
 
-  .filter-section {
-    padding: 20px;
-    margin-bottom: 20px;
+      .reset-btn {
+        border-radius: 8px;
+        padding: 8px 16px;
+        font-size: 13px;
         
-    .filter-form {
-      .el-form-item {
-        margin-bottom: 0;
+        .el-icon {
+          margin-right: 4px;
+        }
       }
     }
 
     .filter-tags {
-      margin-top: 16px;
-      padding-top: 16px;
+      margin-top: 14px;
+      padding-top: 14px;
       border-top: 1px solid #f0f0f0;
       display: flex;
       align-items: center;
@@ -834,34 +941,54 @@ const loadRecords = async () => {
       gap: 8px;
 
       .filter-label {
-        color: #666;
-        font-size: 14px;
-        margin-right: 8px;
+        color: #606266;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .el-tag {
+        border-radius: 16px;
+        padding: 0 12px;
+        height: 28px;
+        line-height: 26px;
+        font-size: 12px;
       }
 
       .clear-all-btn {
-        margin-left: 8px;
+        margin-left: auto;
+        font-size: 12px;
       }
     }
 
     .search-result-info {
-      margin-top: 12px;
-      padding-top: 12px;
+      margin-top: 14px;
+      padding-top: 14px;
       border-top: 1px solid #f0f0f0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
       .result-count {
-        color: #666;
+        color: #606266;
         font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
 
         strong {
           color: #409eff;
           font-weight: 600;
+          font-size: 18px;
         }
       }
 
       .filter-hint {
         color: #e6a23c;
         font-size: 12px;
+        background: #fdf6ec;
+        padding: 2px 8px;
+        border-radius: 10px;
+        margin-left: 8px;
       }
     }
   }
@@ -891,6 +1018,26 @@ const loadRecords = async () => {
       justify-content: center;
       margin-top: 24px;
     }
+
+    // 表格行悬浮效果
+    :deep(.el-table__row) {
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
+
+    // 操作按钮样式优化
+    :deep(.el-button--link) {
+      padding: 4px 8px;
+      
+      &:hover {
+        background-color: rgba(64, 158, 255, 0.1);
+        border-radius: 4px;
+      }
+    }
   }
 
   .replay-content {
@@ -1001,25 +1148,33 @@ const loadRecords = async () => {
 // 响应式设计
 @media (max-width: 768px) {
   .practice-records-container {
-    .page-header {
+    .stats-section {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    .filter-section {
+      .filter-toolbar {
         flex-direction: column;
-      align-items: flex-start;
-      gap: 16px;
+        align-items: stretch;
 
-      .header-actions {
+        .search-box {
+          flex: 1;
+          width: 100%;
+
+          .search-input {
             width: 100%;
-        justify-content: flex-end;
           }
         }
 
-    .stats-overview {
-      grid-template-columns: 1fr;
-    }
+        .filter-items {
+          width: 100%;
           
-    .filter-form {
-      .el-form-item {
-        display: block;
-        margin-bottom: 16px !important;
+          .filter-select {
+            flex: 1;
+            min-width: 100px;
+          }
+        }
       }
     }
 
@@ -1032,4 +1187,12 @@ const loadRecords = async () => {
     }
   }
 }
+
+@media (max-width: 480px) {
+  .practice-records-container {
+    .stats-section {
+      grid-template-columns: 1fr;
+    }
+  }
+}
 </style>