npmapps 1.1.4 → 1.1.6

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

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

@@ -0,0 +1,67 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 维度评分组件
+ * @description 显示各个评分维度的进度条和得分
+ */
+export default defineComponent({
+    name: 'DimensionScores',
+
+    props: {
+        // 维度列表
+        dimensions: {
+            type: Array,
+            required: true,
+            // 数据格式: [{ name: '话术准确度', score: 10, total: 10, color: 'green' }]
+        },
+    },
+
+    setup(props) {
+        // 获取进度条颜色类
+        const getColorClass = (color) => {
+            return styles[`progress${color.charAt(0).toUpperCase() + color.slice(1)}`]
+        }
+
+        // 计算进度百分比
+        const getPercentage = (score, total) => {
+            return (score / total) * 100
+        }
+
+        return () => {
+            return (
+                <div class={styles.dimensionScores}>
+
+                    {props.dimensions.map((dimension, index) => {
+                        const percentage = getPercentage(dimension.score, dimension.total)
+                        const colorClass = getColorClass(dimension.color)
+
+                        return (
+                            <div key={index} class={styles.dimensionItem}>
+                                <div class={styles.dimensionHeader}>
+                                    <span class={styles.dimensionName}>{dimension.name}</span>
+                                    <span class={[styles.dimensionScore, colorClass]}>
+                                        {dimension.score}/{dimension.total}
+                                    </span>
+                                </div>
+                                <div class={styles.progressBar}>
+                                    <div
+                                        class={[styles.progressFill, colorClass]}
+                                        style={{ width: `${percentage}%` }}
+                                    ></div>
+                                </div>
+                            </div>
+                        )
+                    })}
+
+                    {/* 底部评级说明 */}
+                    <div class={styles.ratingLegend}>
+                        <span class={styles.legendItem}>0分</span>
+                        <span class={styles.legendItem}>通过</span>
+                        <span class={styles.legendItem}>满分</span>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,105 @@
+// 维度评分样式
+.dimensionScores {
+    background: #fff;
+    padding: 20px 24px;
+    border-radius: 8px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+.sectionTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+    margin: 0 0 20px 0;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.dimensionItem {
+    margin-bottom: 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.dimensionHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.dimensionName {
+    font-size: 14px;
+    color: #262626;
+    font-weight: 400;
+}
+
+.dimensionScore {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.progressBar {
+    width: 100%;
+    height: 10px;
+    background: #f5f5f5;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.progressFill {
+    height: 100%;
+    border-radius: 5px;
+    transition: width 0.3s ease;
+}
+
+// 进度条颜色类型
+.progressGreen {
+    color: #52c41a;
+
+    &.progressFill {
+        background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+    }
+}
+
+.progressOrange {
+    color: #fa8c16;
+
+    &.progressFill {
+        background: linear-gradient(90deg, #fa8c16 0%, #ffa940 100%);
+    }
+}
+
+.progressRed {
+    color: #ff4d4f;
+
+    &.progressFill {
+        background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
+    }
+}
+
+.progressGray {
+    color: #d9d9d9;
+
+    &.progressFill {
+        background: #d9d9d9;
+    }
+}
+
+// 评级说明
+.ratingLegend {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+}
+
+.legendItem {
+    font-size: 12px;
+    color: #8c8c8c;
+}