Files

- 从服务器拉取完整代码
- 按框架规范整理项目结构
- 配置 Drone CI 测试环境部署
- 包含后端(FastAPI)、前端(Vue3)、管理端

技术栈: Vue3 + TypeScript + FastAPI + MySQL

2026-01-24 19:33:28 +08:00

7.3 KiB

Raw Permalink Blame History

成长路径页面布局优化完成报告

📅 日期

2025-10-16

🎯 优化内容

1. ✅ 智能工牌分析数据持久化

问题：确认 Dify 分析结果是否保存到数据库

解决方案：

后端已实现完整的数据库保存逻辑（ability_assessment_service.py 第91-103行）
每次分析后自动保存到 ability_assessments 表
记录内容包括：
- 用户ID
- 数据来源（yanji_badge）
- 录音ID列表
- 综合评分
- 6个能力维度评分和反馈
- 推荐课程列表
- 对话数量
- 分析时间

验证结果：

SELECT id, user_id, source_type, total_score, conversation_count, analyzed_at 
FROM ability_assessments 
ORDER BY analyzed_at DESC LIMIT 3;

id  user_id  source_type   total_score  conversation_count  analyzed_at
9   2        yanji_badge   85           10                  2025-10-15 20:59:48
8   2        yanji_badge   88           10                  2025-10-15 20:58:57
7   2        yanji_badge   85           10                  2025-10-15 20:57:40

✅ 数据已正确保存！

2. ✅ 页面布局调整

调整内容：

2.1 模块顺序调整

原布局：

[个人信息栏]
[能力雷达图] [成长路径]
[AI 推荐课程]

新布局：

[个人信息栏]
[能力雷达图] [AI 推荐课程]
[成长路径]

优点：

推荐课程与能力评估更接近，逻辑关联更强
成长路径独立成区，更加突出
页面信息流更合理

2.2 新增：AI 能力分析详细反馈

在能力雷达图下方新增了 Dify 返回的详细分析反馈：

功能特点：

显示 6 个能力维度的详细反馈
根据分数自动分级显示：
- 🔴 弱项（< 80分）：红色边框
- 🟡 良好（80-90分）：橙色边框
- 🟢 优秀（≥ 90分）：绿色边框
悬停时有平滑动画效果

示例显示：

AI 详细分析
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

专业知识                    85分
在美容产品知识方面表现良好，能准确回答客户关于产品成分和功效的问题...

沟通技巧                    92分
沟通能力突出，善于倾听客户需求，表达清晰专业...

3. ✅ 成长路径视觉优化

3.1 等级标题优化

原样式：灰色背景，普通文字 新样式：

渐变紫色背景（#667eea → #764ba2）
白色文字，更醒目
进度标签带半透明背景
添加阴影效果

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);

3.2 课程卡片优化

新增效果：

左侧彩色条纹动画
- 默认隐藏，悬停时从上到下展开
- 不同状态不同颜色（已完成=绿色，进行中=蓝色）
图标美化
- 圆角矩形背景
- 悬停时放大+旋转5度
悬停效果增强
- 上浮 4px
- 阴影加深
状态区分更明显
- 已完成：淡绿色渐变背景
- 进行中：淡蓝色渐变背景 + 蓝色阴影
- 未解锁：灰色，70%透明度

📊 技术实现

前端改动

文件：kaopeilian-frontend/src/views/trainee/growth-path.vue

数据结构新增

// AI 能力分析详细反馈（来自Dify）
const abilityFeedback = ref([])

模板新增

<!-- AI 能力分析详细反馈 -->
<div v-if="abilityFeedback.length > 0" class="ability-feedback">
  <div class="feedback-header">
    <el-icon><BrainFilled /></el-icon>
    <span>AI 详细分析</span>
  </div>
  <div class="feedback-list">
    <div 
      v-for="item in abilityFeedback" 
      :key="item.name" 
      class="feedback-item"
      :class="{ 
        'weak': item.score < 80, 
        'good': item.score >= 80 && item.score < 90, 
        'excellent': item.score >= 90 
      }"
    >
      <div class="feedback-header-row">
        <span class="dimension-name">{{ item.name }}</span>
        <span class="dimension-score">{{ item.score }}分</span>
      </div>
      <p class="feedback-text">{{ item.feedback }}</p>
    </div>
  </div>
</div>

样式优化

新增 90+ 行 SCSS 代码
包含渐变、动画、阴影等高级效果
响应式友好

🎨 视觉效果对比

成长路径等级标题

优化前：

┌────────────────────────────────┐
│ 基础阶段              3/3      │  ← 灰色背景
└────────────────────────────────┘

优化后：

╔═══════════════════════════════╗
║ 基础阶段            ⚪ 3/3   ║  ← 紫色渐变背景 + 白色文字
╚═══════════════════════════════╝

课程卡片