npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/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-wk/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-wk/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-wk/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;
+}
+
+

package/app/wujie-wk/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>
+            )
+        }
+    },
+})