npmapps 1.0.21 → 1.0.23

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

@@ -0,0 +1,182 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 对话记录组件
+ * @description 显示陪练过程中的完整对话记录
+ */
+export default defineComponent({
+    name: 'DialogueRecord',
+
+    setup() {
+        // 对话记录数据
+        const dialogues = ref([
+            {
+                question: '您好，我是XX银行的理财经理小李，请问您现在方便接听电话吗？',
+                answer: '方便的，你说吧。',
+                score: 85,
+                scoreDetails: [
+                    { name: '关键词', score: 18, total: 20, tags: ['自我介绍'] },
+                    { name: '语义准确', score: 67, total: 80, tags: [] },
+                ],
+                suggestion: '开场白较为规范，建议语气可以更加热情一些。',
+            },
+            {
+                question: '好的，王总。我看到您最近在我行有一笔定期存款即将到期，我想向您推荐一款更适合您的理财产品，不知道您是否感兴趣？',
+                answer: '什么产品？收益怎么样？',
+                score: 78,
+                scoreDetails: [
+                    { name: '关键词', score: 16, total: 20, tags: ['定期存款', '理财产品'] },
+                    { name: '语义准确', score: 62, total: 80, tags: [] },
+                ],
+                suggestion: '产品引入比较自然，但可以先了解客户的理财需求再推荐。',
+            },
+            {
+                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: '回答准确，继续保持！',
+            },
+            {
+                question: '产品的风险等级是多少？我能承受的风险有限。',
+                answer: '这款产品的风险等级是R2级，属于中低风险产品，比较适合稳健型投资者。',
+                score: 88,
+                scoreDetails: [
+                    { name: '关键词', score: 18, total: 20, tags: ['风险等级', 'R2'] },
+                    { name: '语义准确', score: 70, total: 80, tags: [] },
+                ],
+                suggestion: '风险等级说明清楚，建议可以进一步询问客户的风险承受能力。',
+            },
+            {
+                question: '购买这个产品有什么条件吗？起购金额是多少？',
+                answer: '这个产品的起购金额是5万元，没有其他特殊条件，只要您是我行的客户就可以购买。',
+                score: 82,
+                scoreDetails: [
+                    { name: '关键词', score: 17, total: 20, tags: ['起购金额', '5万'] },
+                    { name: '语义准确', score: 65, total: 80, tags: [] },
+                ],
+                suggestion: '起购金额说明准确，可以补充说明产品的申购渠道。',
+            },
+            {
+                question: '那这个产品什么时候可以赎回？有没有封闭期？',
+                answer: '产品有3个月的封闭期，封闭期结束后可以随时赎回，赎回资金T+1到账。',
+                score: 90,
+                scoreDetails: [
+                    { name: '关键词', score: 19, total: 20, tags: ['封闭期', '赎回', 'T+1'] },
+                    { name: '语义准确', score: 71, total: 80, tags: [] },
+                ],
+                suggestion: '赎回规则说明清晰，表现优秀！',
+            },
+            {
+                question: '好的，我考虑一下，可能明天给你答复。',
+                answer: '没问题王总，您可以先考虑一下。如果有任何问题随时可以联系我，我的工号是XX，期待您的回复。',
+                score: 92,
+                scoreDetails: [
+                    { name: '关键词', score: 19, total: 20, tags: ['工号'] },
+                    { name: '语义准确', score: 73, total: 80, tags: [] },
+                ],
+                suggestion: '收尾专业得体，客户体验良好！',
+            },
+        ])
+
+        return () => {
+            return (
+                <div class={styles.dialogueRecord}>
+                    <div class={styles.header}>
+                        <h3 class={styles.title}>完整对话记录</h3>
+                        <div class={styles.stats}>
+                            <span class={styles.statItem}>总轮次：{dialogues.value.length}</span>
+                            <span class={styles.statItem}>
+                                平均得分：
+                                {Math.round(
+                                    dialogues.value.reduce((sum, d) => sum + d.score, 0) /
+                                        dialogues.value.length
+                                )}
+                                分
+                            </span>
+                        </div>
+                    </div>
+
+                    <div class={styles.dialogueContainer}>
+                        <div class={styles.chatFlow}>
+                            {dialogues.value.map((dialogue, index) => (
+                                <>
+                                    {/* AI提问 */}
+                                    <div key={`q-${index}`} class={styles.messageLeft}>
+                                        <div class={styles.messageBubble}>
+                                            <span class={styles.audioIcon}>🔊</span>
+                                            <span>{dialogue.question}</span>
+                                        </div>
+                                    </div>
+
+                                    {/* 用户回答 */}
+                                    <div key={`a-${index}`} class={styles.messageRight}>
+                                        <div class={styles.messageBubble}>
+                                            <div class={styles.answerContent}>{dialogue.answer}</div>
+                                            <div class={styles.scoreTag}>
+                                                <span class={styles.scoreValue}>{dialogue.score}分</span>
+                                            </div>
+
+                                            {/* 得分明细 */}
+                                            <div class={styles.scoreCard}>
+                                                <div class={styles.scoreDetails}>
+                                                    <div class={styles.detailsTitle}>得分明细</div>
+                                                    {dialogue.scoreDetails.map((detail, idx) => (
+                                                        <div key={idx} 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, tagIdx) => (
+                                                                        <el-tag key={tagIdx} type="success" size="small">
+                                                                            {tag}
+                                                                        </el-tag>
+                                                                    ))}
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    ))}
+                                                </div>
+
+                                                {/* 指导建议 */}
+                                                {dialogue.suggestion && (
+                                                    <div class={styles.suggestion}>
+                                                        <div class={styles.suggestionTitle}>指导建议</div>
+                                                        <div class={styles.suggestionContent}>{dialogue.suggestion}</div>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,203 @@
+// 对话记录样式
+.dialogueRecord {
+    width: 100%;
+    padding: 0;
+}
+
+// 头部区域
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 24px;
+}
+
+.title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #262626;
+    margin: 0;
+}
+
+.stats {
+    display: flex;
+    gap: 32px;
+}
+
+.statItem {
+    font-size: 15px;
+    color: #595959;
+
+    &:last-child {
+        color: #1890ff;
+        font-weight: 500;
+    }
+}
+
+// 对话容器
+.dialogueContainer {
+    background: #f5f5f5;
+    border-radius: 8px;
+    padding: 24px;
+}
+
+// 聊天流
+.chatFlow {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+// 左侧消息（AI提问）
+.messageLeft {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .messageBubble {
+        background: #fff;
+        color: #262626;
+        padding: 14px 16px;
+        border-radius: 8px 8px 8px 2px;
+        max-width: 70%;
+        line-height: 1.7;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+}
+
+// 右侧消息（用户回答）
+.messageRight {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding-right: 20px;
+
+    .messageBubble {
+        background: #e4ebfd;
+        color: #262626;
+        padding: 16px;
+        border-radius: 8px;
+        max-width: 70%;
+        line-height: 1.7;
+        font-size: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+}
+
+.answerContent {
+    width: 100%;
+}
+
+.scoreTag {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+.scoreValue {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ff8c00;
+}
+
+.audioIcon {
+    font-size: 16px;
+    cursor: pointer;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+// 得分明细卡片
+.scoreCard {
+    background: #ffffff;
+    padding: 16px;
+    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;
+}
+
+
+
+

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

@@ -0,0 +1,145 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import DialogueBubble from '../DialogueBubble/index.jsx'
+import SubDimensionItem from '../SubDimensionItem/index.jsx'
+
+/**
+ * 维度详情组件
+ * @description 显示某个评分维度的详细信息，包括对话示例和子维度评分
+ */
+export default defineComponent({
+    name: 'DimensionDetail',
+
+    props: {
+        // 维度信息
+        dimension: {
+            type: Object,
+            required: true,
+            // 数据格式: { name: '话术准确度', score: 10, total: 10, icon: '👏', description: '说明文字' }
+        },
+        // 类型：dialogue（对话类型）或 subdimension（子维度类型）
+        type: {
+            type: String,
+            default: 'dialogue',
+            validator: (value) => ['dialogue', 'subdimension'].includes(value),
+        },
+        // 对话数组（type为dialogue时使用）
+        dialogues: {
+            type: Array,
+            default: () => [],
+        },
+        // 子维度列表（type为subdimension时使用）
+        subDimensions: {
+            type: Array,
+            default: () => [],
+        },
+    },
+
+    setup(props) {
+        // 抽屉显示状态
+        const drawerVisible = ref(false)
+
+        // 打开抽屉
+        const openDrawer = () => {
+            drawerVisible.value = true
+        }
+
+        // 关闭抽屉
+        const closeDrawer = () => {
+            drawerVisible.value = false
+        }
+
+        // 获取评分的颜色类
+        const getScoreColor = (score, total) => {
+            const percentage = (score / total) * 100
+            if (percentage >= 90) return styles.scoreGreen
+            if (percentage >= 60) return styles.scoreOrange
+            return styles.scoreRed
+        }
+
+        return () => {
+            return (
+                <div class={styles.dimensionDetail}>
+                    {/* 维度头部 */}
+                    <div class={styles.header}>
+                        <div class={styles.titleSection}>
+                            <h2 class={styles.title}>{props.dimension.name}</h2>
+                            <span class={[styles.score, getScoreColor(props.dimension.score, props.dimension.total)]}>
+                                {props.dimension.score}/{props.dimension.total}分
+                            </span>
+                        </div>
+                        {props.dimension.description && (
+                            <div class={styles.description}>{props.dimension.description}</div>
+                        )}
+                    </div>
+
+                    {/* 内容区域 */}
+                    <div class={styles.content}>
+                        {/* 对话类型：显示对话气泡 */}
+                        {props.type === 'dialogue' && props.dialogues.length > 0 && (
+                            <div class={styles.dialogueSection}>
+                                {/* 高分话术标题 */}
+                                <div class={styles.dialogueHeader}>
+                                    <div class={styles.dialogueTitle}>
+                                        <span class={styles.star}>💫</span>
+                                        <span>高分话术</span>
+                                    </div>
+                                    {props.dialogues.length > 1 && (
+                                        <div class={styles.viewMore} onClick={openDrawer}>
+                                            查看更多
+                                            <span class={styles.arrow}>›</span>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* 显示第一条对话 */}
+                                <DialogueBubble
+                                    dialogue={props.dialogues[0]}
+                                    scoreDetails={props.dialogues[0].scoreDetails}
+                                    suggestion={props.dialogues[0].suggestion}
+                                />
+                            </div>
+                        )}
+
+                        {/* 子维度类型：显示子维度列表 */}
+                        {props.type === 'subdimension' &&
+                            props.subDimensions.map((subDim, index) => (
+                                <SubDimensionItem
+                                    key={index}
+                                    name={subDim.name}
+                                    score={subDim.score}
+                                    total={subDim.total}
+                                    comment={subDim.comment}
+                                />
+                            ))}
+                    </div>
+
+                    {/* 抽屉：显示所有对话 */}
+                    {props.type === 'dialogue' && (
+                        <el-drawer
+                            v-model={drawerVisible.value}
+                            title="全部高分话术"
+                            size="60%"
+                            direction="rtl"
+                        >
+                            <div class={styles.drawerContent}>
+                                {props.dialogues.map((dialogue, index) => (
+                                    <div key={index} class={styles.drawerItem}>
+                                        <div class={styles.drawerItemTitle}>
+                                            对话 {index + 1}
+                                        </div>
+                                        <DialogueBubble
+                                            dialogue={dialogue}
+                                            scoreDetails={dialogue.scoreDetails}
+                                            suggestion={dialogue.suggestion}
+                                        />
+                                    </div>
+                                ))}
+                            </div>
+                        </el-drawer>
+                    )}
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,126 @@
+// 维度详情样式
+.dimensionDetail {
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.header {
+    background: #fff;
+    padding: 20px 24px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.titleSection {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #262626;
+    margin: 0;
+}
+
+.score {
+    font-size: 16px;
+    font-weight: 600;
+    background: #f0fdf4;
+    padding: 4px 12px;
+    border-radius: 4px;
+}
+
+.scoreGreen {
+    color: #52c41a;
+}
+
+.scoreOrange {
+    color: #fa8c16;
+}
+
+.scoreRed {
+    color: #ff4d4f;
+}
+
+.description {
+    font-size: 14px;
+    color: #8c8c8c;
+    line-height: 1.6;
+}
+
+.content {
+    padding: 20px 24px;
+}
+
+// 对话区域样式
+.dialogueSection {
+    width: 100%;
+}
+
+.dialogueHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0;
+    background: #f8f8f8;
+    padding: 12px 16px;
+    border-radius: 8px 8px 0 0;
+}
+
+.dialogueTitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.star {
+    font-size: 18px;
+}
+
+.viewMore {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    color: #8c8c8c;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+        color: #1890ff;
+    }
+}
+
+.arrow {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+// 抽屉内容样式
+.drawerContent {
+    padding: 0 24px;
+}
+
+.drawerItem {
+    margin-bottom: 32px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.drawerItemTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+