npmapps 1.0.21 → 1.0.23

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/CoachReport/index.jsx

@@ -0,0 +1,162 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import DimensionScores from '../DimensionScores/index.jsx'
+import ComprehensiveEvaluation from '../ComprehensiveEvaluation/index.jsx'
+import RoleInfo from '../RoleInfo/index.jsx'
+import DimensionDetail from '../DimensionDetail/index.jsx'
+
+/**
+ * 陪练报告组件
+ * @description 显示陪练报告的详细内容，包括维度评分、综合评价、角色信息和各维度详情
+ */
+export default defineComponent({
+    name: 'CoachReport',
+
+    setup() {
+        // ==================== 模拟数据 ====================
+
+        // 维度评分数据
+        const dimensionsData = ref([
+            { name: '话术准确度', score: 10, total: 10, color: 'green' },
+            { name: '语言组织', score: 9, total: 10, color: 'green' },
+            { name: '需求倾听记录', score: 22, total: 28, color: 'orange' },
+            { name: '产品介绍解答', score: 17, total: 27, color: 'orange' },
+            { name: '产品推荐促成', score: 0, total: 26, color: 'red' },
+        ])
+
+        // 综合评价数据
+        const evaluationContent = ref(
+            '在整个对话过程中，你表现出了良好的职业素养。语言表达清晰易懂，逻辑较为明确，且态度友好，具有亲和力。在倾听用户需求方面，能够引导用户说出关键信息，但在记录关键信息上还有所欠缺，没有及时总结和确认用户的资金流动要求和目标收益率等重要内容。后续可以加强这方面的能力。'
+        )
+
+        // 陪练角色数据
+        const roleData = ref({
+            avatar: '', // 头像URL，为空时显示占位符
+            name: '王白白',
+            gender: '女',
+            age: 35,
+            tag: '企业白领',
+            description: `王白白是一个经验丰富的企业白领，她在客户服务领域有丰富的经验。她的专业知识和良好的客户服务能力使得客户在与她互动时能够获得满意的服务。
+            谨慎细致，做事有条不，对待保险这类重要决策极为慎重。沟通时专注认真，会详细记录理财经理的
+介绍内容。习惯对关键信息反复确认，情绪较为稳定，不会轻易被推销话术影响。做决策前会全面考量
+产品的各项细节，权衡利弊后才会行动。`,
+        })
+
+        // 话术准确度详情数据
+        const speechAccuracyDetail = ref({
+            dimension: {
+                name: '话术准确度',
+                score: 10,
+                total: 10,
+                icon: '👏',
+                description: '本项分数基于你全部话术的平均表现得出',
+            },
+            dialogues: [
+                {
+                    question: '您好，速汇盈直联后我们内部系统就和你们打通了，安全性有保障吗？',
+                    answer:
+                        '王总，系统的安全性能您可以放心，我行会提供多重保障，主要是有三方面向您汇报。首先，第一是在客户端，我们会通过前置机加UK对物理数据进行一个隔离，那就像防火墙一样，保障信息的安全。二呢，是在数据端，系统会自动对企业发出的原始指令进行数据加密和加密，就跟摩斯密码一样，确保外部无法解析，但是在银行端呢，我们采用了国际上最高的安全标准，就像中国电建、上汽集团这样的国央企呢，已经和我们进行了试点。这个模式的安全性在国资委已经获得了普及...',
+                    score: 98,
+                    scoreDetails: [
+                        { name: '关键词', score: 20, total: 20, tags: ['多重保障'] },
+                        { name: '语义准确', score: 78, total: 80, tags: [] },
+                    ],
+                    suggestion: '你在对话中表现的非常好，请继续保持！',
+                },
+                {
+                    question: '这个产品的收益率是多少？',
+                    answer:
+                        '关于收益率，我们这款产品是浮动收益型的，近一年的年化收益率在4.5%-5.2%之间，相比市场同类产品具有较强的竞争力。而且我们有专业的投资团队进行管理，历史业绩表现稳定。',
+                    score: 95,
+                    scoreDetails: [
+                        { name: '关键词', score: 18, total: 20, tags: ['年化收益率'] },
+                        { name: '语义准确', score: 77, total: 80, tags: [] },
+                    ],
+                    suggestion: '回答准确，继续保持！',
+                },
+            ],
+        })
+
+        // 语言组织详情数据
+        const languageOrganizationDetail = ref({
+            dimension: {
+                name: '语言组织',
+                score: 9,
+                total: 9,
+                icon: '👏',
+                description:
+                    '你在语言组织方面表现不错。回答清晰易懂，用防火墙和摩斯密码作比喻，让抽象的安全保障概念变得形象易懂，这一点做得非常好。',
+            },
+            subDimensions: [
+                {
+                    name: '易于理解',
+                    score: 1,
+                    total: 3,
+                    comment:
+                        '你在介绍系统安全保障时，运用防火墙和摩斯密码的比喻，使抽象的安全保障概念变得形象易懂，让对方能轻松理解内容，这一点做得非常好。',
+                },
+                {
+                    name: '逻辑性',
+                    score: 2,
+                    total: 3,
+                    comment:
+                        '你按照客户端、数据端、银行端的顺序，有条理地介绍系统安全保障的三个方面，逻辑清晰，让对方能清楚了解整体情况，表现十分出色。',
+                },
+                {
+                    name: '亲和力',
+                    score: 3,
+                    total: 3,
+                    comment:
+                        '你使用"王总"这一友好称呼，迅速拉近与对方的关系，展现出良好的亲和力，让交流氛围更加融洽，值得称赞。',
+                },
+            ],
+        })
+
+        return () => {
+            return (
+                <div class={styles.coachReport}>
+                    {/* 总览区域 */}
+                    <div class={styles.overviewSection}>
+                        {/* 第一行：维度评分和综合评价 */}
+                        <el-row gutter={24}>
+                            {/* 左侧：维度评分 */}
+                            <el-col span={10}>
+                                <DimensionScores dimensions={dimensionsData.value} />
+                            </el-col>
+
+                            {/* 右侧：综合评价 */}
+                            <el-col span={14}>
+                                <ComprehensiveEvaluation content={evaluationContent.value} />
+                            </el-col>
+                        </el-row>
+
+                        {/* 第二行：角色信息 */}
+                        <el-row gutter={24}>
+                            <el-col span={24}>
+                                <RoleInfo data={roleData.value} />
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    {/* 话术准确度详情 */}
+                    <div class={styles.detailSection}>
+                        <DimensionDetail
+                            type="dialogue"
+                            dimension={speechAccuracyDetail.value.dimension}
+                            dialogues={speechAccuracyDetail.value.dialogues}
+                        />
+                    </div>
+
+                    {/* 语言组织详情 */}
+                    <div class={styles.detailSection}>
+                        <DimensionDetail
+                            type="subdimension"
+                            dimension={languageOrganizationDetail.value.dimension}
+                            subDimensions={languageOrganizationDetail.value.subDimensions}
+                        />
+                    </div>
+                </div>
+            )
+        }
+    },
+})

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/CoachReport/index.module.scss

@@ -0,0 +1,16 @@
+// 陪练报告样式
+.coachReport {
+    width: 100%;
+}
+
+.overviewSection {
+    margin-bottom: 24px;
+}
+
+.detailSection {
+    margin-bottom: 24px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/ComprehensiveEvaluation/index.jsx

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 综合评价组件
+ * @description 显示AI对练习表现的综合评价文字
+ */
+export default defineComponent({
+    name: 'ComprehensiveEvaluation',
+
+    props: {
+        // 评价内容
+        content: {
+            type: String,
+            required: true,
+        },
+    },
+
+    setup(props) {
+        return () => {
+            return (
+                <div class={styles.comprehensiveEvaluation}>
+                    <h3 class={styles.title}>综合评价</h3>
+                    <div class={styles.content}>{props.content}</div>
+                </div>
+            )
+        }
+    },
+})

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/ComprehensiveEvaluation/index.module.scss

@@ -0,0 +1,25 @@
+// 综合评价样式
+.comprehensiveEvaluation {
+    background: #fff;
+    padding: 20px 24px;
+    border-radius: 8px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+    margin: 0 0 16px 0;
+    padding-bottom: 12px;
+}
+
+.content {
+    font-size: 14px;
+    color: #595959;
+    line-height: 1.8;
+    text-align: justify;
+}

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/DialogueBubble/index.jsx

@@ -0,0 +1,106 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 对话气泡组件
+ * @description 显示客户问题和AI回答的对话气泡
+ */
+export default defineComponent({
+    name: 'DialogueBubble',
+
+    props: {
+        // 对话数据
+        dialogue: {
+            type: Object,
+            required: true,
+            // 数据格式: { question: 'AI提问', answer: '用户回答', score: 98 }
+        },
+        // 得分详情
+        scoreDetails: {
+            type: Array,
+            default: () => [],
+            // 数据格式: [{ name: '关键词', score: 20, total: 20, tags: ['多重保障'] }]
+        },
+        // 指导建议
+        suggestion: {
+            type: String,
+            default: '',
+        },
+    },
+
+    setup(props) {
+        // 获取评分等级表情
+        const getScoreEmoji = (score) => {
+            if (score >= 90) return '😃'
+            if (score >= 70) return '🙂'
+            if (score >= 60) return '😐'
+            return '😟'
+        }
+
+        return () => {
+            return (
+                <div class={styles.dialogueBubble}>
+                    {/* 对话内容 */}
+                    <div class={styles.dialogueContent}>
+                        {/* AI提问 */}
+                        <div class={styles.questionBubble}>
+                            <div class={styles.bubbleText}>
+                                <span class={styles.audioIcon}>🔊</span>
+                                <span>{props.dialogue.question}</span>
+                            </div>
+                        </div>
+
+                        {/* 用户回答 */}
+                        <div class={styles.answerBubble}>
+                            <div class={styles.bubbleText}>
+                                {props.dialogue.answer}
+                            </div>
+                            <div class={styles.scoreTag}>
+                                <span class={styles.scoreValue}>{props.dialogue.score}分</span>
+                                <span class={styles.scoreEmoji}>{getScoreEmoji(props.dialogue.score)}</span>
+                            </div>
+
+                            {/* 得分明细卡片 */}
+                            <div class={styles.scoreCard}>
+                                {/* 得分明细 */}
+                                <div class={styles.scoreDetails}>
+                                    <div class={styles.detailsTitle}>得分明细</div>
+                                    {props.scoreDetails.map((detail, index) => (
+                                        <div key={index} class={styles.detailItem}>
+                                            <div class={styles.detailHeader}>
+                                                <span class={styles.detailName}>{detail.name}</span>
+                                                <span class={styles.detailScore}>
+                                                    {detail.score}/{detail.total}分
+                                                </span>
+                                            </div>
+                                            {detail.tags && detail.tags.length > 0 && (
+                                                <div class={styles.tags}>
+                                                    <span class={styles.tagLabel}>
+                                                        关键词共{detail.tags.length}个，命中{detail.tags.length}个
+                                                    </span>
+                                                    {detail.tags.map((tag, idx) => (
+                                                        <el-tag key={idx} type="success" size="small">
+                                                            {tag}
+                                                        </el-tag>
+                                                    ))}
+                                                </div>
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+
+                                {/* 指导建议 */}
+                                {props.suggestion && (
+                                    <div class={styles.suggestion}>
+                                        <div class={styles.suggestionTitle}>指导建议</div>
+                                        <div class={styles.suggestionContent}>{props.suggestion}</div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/DialogueBubble/index.module.scss

@@ -0,0 +1,164 @@
+// 对话气泡样式
+.dialogueBubble {
+    background: #f8f8f8;
+    padding: 16px;
+    border-radius: 0 0 8px 8px;
+}
+
+// 对话内容
+.dialogueContent {
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.questionBubble {
+    display: flex;
+    justify-content: flex-start;
+    align-self: flex-start;
+    max-width: 70%;
+
+    .bubbleText {
+        background: #f5f5f5;
+        color: #262626;
+        padding: 14px 16px;
+        border-radius: 8px 8px 8px 2px;
+        line-height: 1.7;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+}
+
+.answerBubble {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    align-self: flex-end;
+    background: #e4ebfd;
+    padding: 16px;
+    border-radius: 8px;
+    max-width: 80%;
+
+    .bubbleText {
+        background: transparent;
+        color: #262626;
+        padding: 0;
+        max-width: 100%;
+        line-height: 1.7;
+        font-size: 14px;
+        margin-bottom: 12px;
+        width: 100%;
+    }
+}
+
+.scoreTag {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 12px;
+    align-self: flex-end;
+}
+
+.scoreValue {
+    font-size: 16px;
+    font-weight: 600;
+    color: #ff8c00;
+}
+
+.scoreEmoji {
+    font-size: 16px;
+}
+
+.audioIcon {
+    font-size: 16px;
+    cursor: pointer;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+// 得分明细卡片
+.scoreCard {
+    background: #ffffff;
+    padding: 16px 20px;
+    border-radius: 8px;
+    align-self: stretch;
+}
+
+// 得分明细
+.scoreDetails {
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.detailsTitle {
+    font-size: 15px;
+    font-weight: 600;
+    color: #fa8c16;
+    margin-bottom: 12px;
+}
+
+.detailItem {
+    margin-bottom: 12px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.detailHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.detailName {
+    font-size: 14px;
+    color: #262626;
+    font-weight: 500;
+}
+
+.detailScore {
+    font-size: 15px;
+    color: #52c41a;
+    font-weight: 600;
+}
+
+.tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.tagLabel {
+    font-size: 13px;
+    color: #595959;
+}
+
+// 指导建议
+.suggestion {
+    padding-top: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.suggestionTitle {
+    font-size: 15px;
+    font-weight: 600;
+    color: #fa8c16;
+    margin-bottom: 8px;
+}
+
+.suggestionContent {
+    font-size: 14px;
+    color: #262626;
+    line-height: 1.7;
+}
+
+