npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,81 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+import ScoreBadge from '../ScoreBadge/index.jsx'
+
+/**
+ * 报告头部组件
+ * @description 显示报告标题、基本信息和分数徽章
+ */
+export default defineComponent({
+    name: 'ReportHeader',
+
+    props: {
+        // 报告标题
+        title: {
+            type: String,
+            required: true,
+        },
+        // 是否中途退出
+        isQuit: {
+            type: Boolean,
+            default: false,
+        },
+        // 练习时间
+        practiceTime: {
+            type: String,
+            required: true,
+        },
+        // 轮次
+        rounds: {
+            type: Number,
+            required: true,
+        },
+        // 时长
+        duration: {
+            type: String,
+            required: true,
+        },
+        // 得分
+        score: {
+            type: Number,
+            required: true,
+        },
+        // 是否达标
+        isPassed: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    setup(props) {
+        return () => {
+            return (
+                <div class={styles.reportHeader}>
+                    <div class={styles.headerContent}>
+                        {/* 左侧：标题和基本信息 */}
+                        <div class={styles.leftSection}>
+                            <div class={styles.titleRow}>
+                                <h2 class={styles.title}>{props.title}</h2>
+                                {props.isQuit && (
+                                    <el-tag type="warning" size="small">
+                                        中途退出
+                                    </el-tag>
+                                )}
+                            </div>
+                            <div class={styles.infoRow}>
+                                <span class={styles.infoItem}>{props.practiceTime}</span>
+                                <span class={styles.infoItem}>轮次：{props.rounds}轮</span>
+                                <span class={styles.infoItem}>时长：{props.duration}</span>
+                            </div>
+                        </div>
+
+                        {/* 右侧：分数徽章 */}
+                        <div class={styles.rightSection}>
+                            <ScoreBadge score={props.score} isPassed={props.isPassed} />
+                        </div>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,47 @@
+// 报告头部样式
+.reportHeader {
+    background: linear-gradient(180deg, #FFF0E6 0%, #FFFFFF 100%);
+    padding: 12px 24px;
+    border-radius: 12px;
+    margin-bottom: 24px;
+}
+
+.headerContent {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.leftSection {
+    flex: 1;
+}
+
+.titleRow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.title {
+    font-size: 28px;
+    font-weight: 600;
+    color: #262626;
+    margin: 0;
+}
+
+.infoRow {
+    display: flex;
+    gap: 32px;
+    color: #595959;
+    font-size: 15px;
+}
+
+.infoItem {
+    display: inline-block;
+}
+
+.rightSection {
+    flex-shrink: 0;
+    padding-left: 40px;
+}

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

@@ -0,0 +1,64 @@
+import { defineComponent, toRefs } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 陪练角色信息组件
+ * @description 显示陪练角色的基本信息（头像、姓名、性别、年龄、标签）
+ */
+export default defineComponent({
+    name: 'RoleInfo',
+
+    props: {
+        data: {
+            type: Object,
+            default: () => ({
+                avatar: '', // 头像URL，为空时显示占位符
+                name: '',
+                gender: '',
+                age: 0,
+                tag: '',
+                description: '',
+            }),
+        },
+    },
+
+    setup(props) {
+        const { data } = toRefs(props)
+        return () => {
+            return (
+                <div class={styles.roleInfo}>
+                    <h3 class={styles.sectionTitle}>陪练角色</h3>
+
+                    <div class={styles.roleCard}>
+                        {/* 头像 */}
+                        <div class={styles.avatar}>
+                            {data.value.avatar ? (
+                                <img src={data.value.avatar} alt={data.value.name} />
+                            ) : (
+                                <div class={styles.avatarPlaceholder}>
+                                    {data.value.name.charAt(0)}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 基本信息 */}
+                        <div class={styles.infoSection}>
+                            <div class={styles.infoItem}>
+                                <div class={styles.name}>{data.value.name}</div>
+                                <div class={styles.details}>
+                                    <span class={styles.detailItem}>{data.value.gender}</span>
+                                    <span class={styles.divider}>·</span>
+                                    <span class={styles.detailItem}>{data.value.age}</span>
+                                    <span class={styles.divider}>·</span>
+                                    <span class={styles.detailItem}>{data.value.tag}</span>
+                                </div>
+                            </div>
+                            {/* 描述 */}
+                            <div class={styles.description}>{data.value.description}</div>
+                        </div>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,85 @@
+// 陪练角色信息样式
+.roleInfo {
+    background: #fff;
+    padding: 20px 24px;
+    border-radius: 8px;
+    margin-top: 24px;
+}
+
+.sectionTitle {
+    font-size: 22px;
+    font-weight: 600;
+    color: #262626;
+    margin: 0 0 16px 0;
+    padding-bottom: 12px;
+}
+
+.roleCard {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    background-color: #F8F8F8;
+    padding: 20px;
+    border-radius: 12px;
+}
+
+.avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.avatarPlaceholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 600;
+}
+
+.infoSection {
+    flex: 1;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 12px;
+    .infoItem {
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+    }
+}
+
+
+.name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.details {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #8c8c8c;
+}
+
+.detailItem {
+    display: inline-block;
+}
+
+.divider {
+    margin: 0 8px;
+}

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

@@ -0,0 +1,39 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 分数徽章组件
+ * @description 显示练习得分和达标状态的六边形徽章
+ */
+export default defineComponent({
+    name: 'ScoreBadge',
+
+    props: {
+        // 分数
+        score: {
+            type: Number,
+            required: true,
+        },
+        // 是否达标
+        isPassed: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    setup(props) {
+        return () => {
+            const statusText = props.isPassed ? '已达标' : '未达标'
+            const badgeClass = props.isPassed ? styles.passed : styles.failed
+
+            return (
+                <div class={[styles.scoreBadge, badgeClass]}>
+                    <div class={styles.hexagon}>
+                        <div class={styles.score}>{props.score}</div>
+                        <div class={styles.status}>{statusText}</div>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,44 @@
+// 分数徽章样式
+.scoreBadge {
+    position: relative;
+    width: 120px;
+    height: 138px;
+}
+
+.hexagon {
+    position: relative;
+    width: 120px;
+    height: 138px;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+}
+
+.score {
+    font-size: 48px;
+    font-weight: bold;
+    color: #fff;
+    line-height: 1;
+}
+
+.status {
+    font-size: 14px;
+    color: #fff;
+    margin-top: 4px;
+}
+
+// 已达标状态
+.passed .hexagon {
+    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+// 未达标状态
+.failed .hexagon {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+}

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

@@ -0,0 +1,83 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 子维度项组件
+ * @description 显示评分维度下的子维度详情（如语言组织的易于理解、逻辑性等）
+ */
+export default defineComponent({
+    name: 'SubDimensionItem',
+
+    props: {
+        // 维度名称
+        name: {
+            type: String,
+            required: true,
+        },
+        // 得分
+        score: {
+            type: Number,
+            required: true,
+        },
+        // 总分
+        total: {
+            type: Number,
+            required: true,
+        },
+        // 评价内容
+        comment: {
+            type: String,
+            default: '',
+        },
+    },
+
+    setup(props) {
+        // 计算进度百分比
+        const percentage = (props.score / props.total) * 100
+
+        // 根据分数百分比确定进度条颜色类型
+        const getProgressColorClass = () => {
+            if (percentage >= 60) {
+                return styles.progressFillHigh // 大于等于60：绿色
+            } else if (percentage >= 30) {
+                return styles.progressFillMedium // 30-60：黄色
+            } else {
+                return styles.progressFillLow // 低于30：红色
+            }
+        }
+
+        return () => {
+            return (
+                <div class={styles.subDimensionItem}>
+                    {/* 维度标题和分数 */}
+                    <div class={styles.header}>
+                        <span class={styles.name}>{props.name}</span>
+                        <span class={styles.score}>{props.score}分</span>
+                    </div>
+
+                    {/* 进度条 */}
+                    <div class={styles.progressBar}>
+                        <div class={styles.progressTrack}>
+                            <div
+                                class={getProgressColorClass()}
+                                style={{ width: `${percentage}%` }}
+                            ></div>
+                        </div>
+                        <div class={styles.progressLabels}>
+                            <span>0</span>
+                            <span>{props.total}</span>
+                        </div>
+                    </div>
+
+                    {/* 评价内容 */}
+                    {props.comment && (
+                        <div class={styles.comment}>
+                            <span class={styles.commentIcon}>👍</span>
+                            <span class={styles.commentText}>{props.comment}</span>
+                        </div>
+                    )}
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,101 @@
+// 子维度项样式
+.subDimensionItem {
+    background: #fafafa;
+    padding: 16px 20px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #52c41a;
+}
+
+.score {
+    font-size: 14px;
+    font-weight: 600;
+    color: #52c41a;
+    background: #f6ffed;
+    padding: 3px 14px;
+    border-radius: 12px;
+}
+
+// 进度条
+.progressBar {
+    margin-bottom: 12px;
+}
+
+.progressTrack {
+    width: 100%;
+    height: 8px;
+    background: #e8e8e8;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 6px;
+}
+
+// 进度条填充 - 低分（红色）
+.progressFillLow {
+    height: 100%;
+    background: linear-gradient(90deg, #f5222d 0%, #ff4d4f 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+// 进度条填充 - 中等（黄色/橙色）
+.progressFillMedium {
+    height: 100%;
+    background: linear-gradient(90deg, #fa8c16 0%, #ffa940 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+// 进度条填充 - 高分（绿色）
+.progressFillHigh {
+    height: 100%;
+    background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.progressLabels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #8c8c8c;
+}
+
+// 评价内容
+.comment {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 14px;
+    background: #fff;
+    border-radius: 6px;
+    border-left: 3px solid #52c41a;
+}
+
+.commentIcon {
+    font-size: 16px;
+    flex-shrink: 0;
+}
+
+.commentText {
+    flex: 1;
+    font-size: 13px;
+    color: #595959;
+    line-height: 1.7;
+}

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

@@ -0,0 +1,50 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import ReportHeader from './components/ReportHeader/index.jsx'
+import CoachReport from './components/CoachReport/index.jsx'
+import DialogueRecord from './components/DialogueRecord/index.jsx'
+
+/**
+ * 报告详情页面
+ * @description 显示练习报告的完整详情，包括总览和各维度的详细评分
+ */
+export default defineComponent({
+    name: 'ReportDetail',
+
+    setup() {
+        // 报告头部数据
+        const headerData = ref({
+            title: '银行理财推荐',
+            isQuit: true, // 是否中途退出
+            practiceTime: '2025-08-20 12:12',
+            rounds: 2,
+            duration: "23'23\"",
+            score: 55,
+            isPassed: false, // 是否达标
+        })
+
+        // 当前激活的标签页
+        const activeTab = ref('coachReport')
+
+        return () => {
+            return (
+                <div class={styles.reportDetail}>
+                    {/* 报告头部 */}
+                    <ReportHeader {...headerData.value} />
+
+                    {/* 标签页 */}
+                    <div class={styles.tabsContainer}>
+                        <el-tabs v-model={activeTab.value} class={styles.tabs}>
+                            <el-tab-pane label="陪练报告" name="coachReport">
+                                <CoachReport />
+                            </el-tab-pane>
+                            <el-tab-pane label="对话记录" name="dialogueRecord">
+                                <DialogueRecord />
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,25 @@
+// 报告详情页面样式
+.reportDetail {
+    padding: 20px;
+    background: #fff;
+    min-height: 100vh;
+}
+
+// 标签页容器
+.tabsContainer {
+    margin-top: 24px;
+}
+
+.tabs {
+    :global {
+        .el-tabs__header {
+            margin-bottom: 24px;
+        }
+
+        .el-tabs__item {
+            font-size: 16px;
+            font-weight: 500;
+        }
+    }
+}
+