npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/PracticeTable/index.jsx

@@ -0,0 +1,75 @@
+import { defineComponent, ref, computed } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 明细数据表格
+ * - 组件化目的：后续切换接口数据时，只替换 props.data
+ * - 目前仅实现展示与分页（模拟分页）
+ */
+export default defineComponent({
+  name: 'PracticeStatusPracticeTable',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+  },
+  setup(props) {
+    const currentPage = ref(1)
+
+    const total = computed(() => props.data.length)
+    const pageCount = computed(() => Math.max(1, Math.ceil(total.value / props.pageSize)))
+
+    const pageData = computed(() => {
+      const start = (currentPage.value - 1) * props.pageSize
+      return props.data.slice(start, start + props.pageSize)
+    })
+
+    const handlePageChange = (p) => {
+      currentPage.value = p
+    }
+
+    return () => (
+      <div class={styles.tableWrap}>
+        <el-table data={pageData.value} stripe style={{ width: '100%' }}>
+          <el-table-column type="selection" width="44" />
+          <el-table-column prop="jobNo" label="工号" width="90" />
+          <el-table-column prop="name" label="姓名" width="80" />
+          <el-table-column prop="planName" label="计划名称" />
+          <el-table-column prop="scriptName" label="脚本名称" />
+          <el-table-column prop="startTime" label="开始时间" width="120" />
+          <el-table-column prop="endTime" label="结束时间" width="120" />
+          <el-table-column prop="status" label="完成状态" width="90" />
+          <el-table-column prop="score" label="得分" width="70" />
+          <el-table-column prop="passStatus" label="通过状态" width="90" />
+          <el-table-column prop="progress" label="练习进度" width="90" />
+          <el-table-column label="操作" width="110">
+            {{
+              default: (scope) => (
+                <el-button link size="small" type="primary" onClick={() => console.log('查看练习记录', scope.row)}>
+                  查看练习记录
+                </el-button>
+              ),
+            }}
+          </el-table-column>
+        </el-table>
+
+        <div class={styles.paginationRow}>
+          <el-pagination
+            background
+            currentPage={currentPage.value}
+            pageSize={props.pageSize}
+            total={total.value}
+            layout="total, prev, pager, next"
+            onCurrentChange={handlePageChange}
+          />
+        </div>
+      </div>
+    )
+  },
+})
+

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

@@ -0,0 +1,12 @@
+.tableWrap {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  border: 1px solid #ebeef5;
+}
+
+.paginationRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/RankBarChart/index.jsx

@@ -0,0 +1,62 @@
+import { defineComponent, computed } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 横向条形排行（不依赖图表库）
+ * - 通过百分比宽度绘制
+ * - 支持自定义最大值，便于复用
+ */
+export default defineComponent({
+  name: 'PracticeStatusRankBarChart',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    max: {
+      type: Number,
+      default: undefined,
+    },
+    valueFormatter: {
+      type: Function,
+      default: (v) => `${v}`,
+    },
+  },
+  setup(props) {
+    const maxValue = computed(() => {
+      const list = props.data || []
+      const maxInData = list.reduce((m, cur) => Math.max(m, Number(cur?.value ?? 0)), 0)
+      const base = Number.isFinite(props.max) ? props.max : maxInData
+      return base > 0 ? base : 1
+    })
+
+    const rows = computed(() =>
+      (props.data || []).map((it) => {
+        const value = Number(it?.value ?? 0)
+        const ratio = Math.min(1, Math.max(0, value / maxValue.value))
+        return {
+          name: it?.name ?? '',
+          value,
+          ratio,
+        }
+      }),
+    )
+
+    return () => (
+      <div class={styles.barsWrap}>
+        {rows.value.map((row, idx) => (
+          <div class={styles.barRow} key={`${row.name}-${idx}`}>
+            <div class={styles.barName} title={row.name}>
+              {row.name}
+            </div>
+            <div class={styles.barTrack}>
+              <div class={styles.barFill} style={{ width: `${row.ratio * 100}%` }} />
+            </div>
+            <div class={styles.barValue}>{props.valueFormatter(row.value)}</div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+})
+

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

@@ -0,0 +1,43 @@
+.barsWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.barRow {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+
+.barName {
+  width: 60px;
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 8px;
+  text-align: right;
+}
+
+.barTrack {
+  flex: 1;
+  height: 12px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.barFill {
+  height: 100%;
+  background: #ff7d00;
+  border-radius: 6px;
+}
+
+.barValue {
+  width: 40px;
+  font-size: 12px;
+  color: #333;
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/RankingGroup/index.jsx

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+import RankingList from '../RankingList'
+import styles from './index.module.scss'
+
+/**
+ * 剧本统计 - 排行榜组（三列布局）
+ */
+export default defineComponent({
+  name: 'RankingGroup',
+  props: {
+    data: {
+      type: Object,
+      default: () => ({
+        overall: [],
+        accuracy: [],
+        fluency: [],
+      }),
+    },
+  },
+  setup(props) {
+    return () => (
+      <div class={styles.rankingGroup}>
+        <RankingList title="综合排行榜" data={props.data.overall} />
+        <RankingList title="话术准确度" data={props.data.accuracy} />
+        <RankingList title="流利度" data={props.data.fluency} />
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,5 @@
+.rankingGroup {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/RankingList/index.jsx

@@ -0,0 +1,58 @@
+import { defineComponent, toRef } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 剧本统计 - 排行榜列表项
+ * 用于展示单列排行榜（综合、准确度、流利度等）
+ */
+export default defineComponent({
+  name: 'RankingList',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const list = toRef(props, 'data')
+
+    // 奖牌图标（模拟 SVG 或使用 emoji/图片）
+    const getRankIcon = (index) => {
+      if (index === 0) return '🥇'
+      if (index === 1) return '🥈'
+      if (index === 2) return '🥉'
+      return index + 1
+    }
+
+    const getRankClass = (index) => {
+      if (index === 0) return styles.rankFirst
+      if (index === 1) return styles.rankSecond
+      if (index === 2) return styles.rankThird
+      return styles.rankNormal
+    }
+
+    return () => (
+      <div class={styles.rankingCard}>
+        <div class={styles.rankingTitle}>{props.title}</div>
+        <div class={styles.rankingList}>
+          {list.value.map((item, index) => (
+            <div key={index} class={styles.rankingItem}>
+              <div class={[styles.rankIndex, getRankClass(index)]}>
+                {getRankIcon(index)}
+              </div>
+              <div class={styles.rankInfo}>
+                <div class={styles.rankName}>{item.name}</div>
+                <div class={styles.rankDept}>{item.dept}</div>
+              </div>
+              <div class={styles.rankScore}>{item.score}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,85 @@
+.rankingCard {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid #ebeef5;
+}
+
+.rankingTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.rankingList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rankingItem {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px dashed #ebeef5;
+}
+
+.rankingItem:last-child {
+  border-bottom: none;
+}
+
+.rankIndex {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #909399;
+  font-weight: 600;
+  margin-right: 12px;
+}
+
+.rankFirst {
+  color: #ff7d00;
+  font-size: 20px;
+}
+
+.rankSecond {
+  color: #909399;
+  font-size: 20px;
+}
+
+.rankThird {
+  color: #bfa176;
+  font-size: 20px;
+}
+
+.rankNormal {
+  color: #606266;
+}
+
+.rankInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.rankName {
+  font-size: 14px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.rankDept {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 2px;
+}
+
+.rankScore {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/ScriptStatsPanel/index.jsx

@@ -0,0 +1,92 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import EchartsRankBar from '../echarts/EchartsRankBar'
+import RankBarChart from '../RankBarChart'
+import RankingGroup from '../RankingGroup'
+
+/**
+ * 剧本统计主面板
+ */
+export default defineComponent({
+  name: 'ScriptStatsPanel',
+  props: {
+    useEcharts: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    // 模拟数据
+    const dimensionData = ref([
+      { name: '语言组织', value: 95.4, max: 100 },
+      { name: '共情与优势介绍', value: 75.2, max: 100 },
+      { name: '流利度', value: 72.5, max: 100 },
+      { name: '顾客打消能力', value: 58.7, max: 100 },
+      { name: '后续练联系告知', value: 52.7, max: 100 },
+      { name: '合规话术', value: 0.0, max: 100 },
+    ])
+
+    const generateRanking = (count) => {
+      return Array.from({ length: count }).map((_, i) => ({
+        name: '李四',
+        dept: '渠道营销三部',
+        score: 100,
+      }))
+    }
+
+    const rankingData = ref({
+      overall: generateRanking(10),
+      accuracy: generateRanking(10),
+      fluency: generateRanking(10),
+    })
+
+    const handleClear = () => {
+      console.log('清空已选')
+    }
+
+    const handleDownload = () => {
+      console.log('下载')
+    }
+
+    return () => (
+      <div class={styles.scriptStatsPanel}>
+        {/* 顶部筛选栏 */}
+        <div class={styles.filterBar}>
+          <div class={styles.filterLeft}>
+            {/* 这里的按钮已经在 index.jsx 的 toggle 控制，这里主要放筛选 */}
+          </div>
+          <div class={styles.filterRight}>
+            <el-button link type="primary" onClick={handleClear} style={{ color: '#ff7a00' }}>
+              清空已选
+            </el-button>
+            <el-select placeholder="剧本名称: 电销话术1V1模拟训练" style={{ width: '240px' }} modelValue="">
+              <el-option label="电销话术1V1模拟训练" value="1" />
+            </el-select>
+            <el-select placeholder="所属部门" style={{ width: '120px' }} modelValue="">
+              <el-option label="部门A" value="A" />
+            </el-select>
+            <el-button onClick={handleDownload}>下载</el-button>
+          </div>
+        </div>
+
+        {/* 维度得分排名 */}
+        <div class={styles.section}>
+          <div class={styles.sectionHeader}>维度得分排名</div>
+          <div class={styles.chartContainer}>
+            {props.useEcharts ? (
+              <EchartsRankBar data={dimensionData.value} height={300} max={100} />
+            ) : (
+              <RankBarChart data={dimensionData.value} height={300} />
+            )}
+          </div>
+        </div>
+
+        {/* 排行榜 */}
+        <div class={styles.section}>
+          <div class={styles.sectionHeader}>排行榜</div>
+          <RankingGroup data={rankingData.value} />
+        </div>
+      </div>
+    )
+  },
+})

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

@@ -0,0 +1,56 @@
+.scriptStatsPanel {
+  /* 容器样式 */
+}
+
+.filterBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+  margin-bottom: 12px;
+}
+
+.filterLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filterRight {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chartContainer {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+}
+
+.section {
+  margin-top: 12px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.sectionHeader:before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background: #ff7a00;
+  border-radius: 2px;
+  margin-right: 8px;
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/StatCardsRow/index.jsx

@@ -0,0 +1,40 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.scss'
+
+/**
+ * 练习数据概览卡片行
+ * - 组件化目的：后续可复用在其他统计页
+ * - 数据由父组件通过 props 传入
+ */
+export default defineComponent({
+  name: 'PracticeStatusStatCardsRow',
+  props: {
+    cards: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const bgClassList = [
+      styles.cardBg1,
+      styles.cardBg2,
+      styles.cardBg3,
+      styles.cardBg4,
+      styles.cardBg5,
+      styles.cardBg6,
+    ]
+
+    return () => (
+      <div class={styles.cardsRow}>
+        {props.cards.map((card, idx) => (
+          <div class={[styles.statCard, bgClassList[idx % bgClassList.length]]} key={card.key || idx}>
+            <div class={styles.statCardLabel}>{card.label}</div>
+            <div class={styles.statCardValue}>{card.value}</div>
+            {card.hint ? <div class={styles.statCardHint}>{card.hint}</div> : null}
+          </div>
+        ))}
+      </div>
+    )
+  },
+})
+

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

@@ -0,0 +1,53 @@
+.cardsRow {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.card {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 12px 14px;
+  background: #fff;
+}
+
+.cardTitle {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 6px;
+}
+
+.cardValue {
+  font-size: 20px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.statCard {
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+  padding: 12px 14px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.statCardTitle {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 6px;
+}
+
+.statCardValue {
+  font-size: 20px;
+  font-weight: 700;
+  color: #303133;
+}
+
+/* bgClassList placeholders if needed, though not found in original CSS */
+.cardBg1 {}
+.cardBg2 {}
+.cardBg3 {}
+.cardBg4 {}
+.cardBg5 {}
+.cardBg6 {}