npmapps 1.0.21 → 1.0.23

package/app/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 {}

package/app/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/echarts/EchartsDonut.jsx

@@ -0,0 +1,106 @@
+import { defineComponent, onMounted, ref, watch, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+export default defineComponent({
+  name: 'EchartsDonut',
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+    hiddenLegend: {
+      type: Array,
+      default: () => [],
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+  },
+  setup(props) {
+    const chartRef = ref(null)
+    let chartInstance = null
+
+    const initChart = () => {
+      if (!chartRef.value) return
+      chartInstance = echarts.init(chartRef.value)
+      updateOption()
+    }
+
+    const updateOption = () => {
+      if (!chartInstance) return
+      // 过滤掉被隐藏的项
+      const data = props.series
+        .filter((item) => !props.hiddenLegend.includes(item.name))
+        .map((item) => ({
+          name: item.name,
+          value: item.value,
+          itemStyle: { color: item.color },
+        }))
+
+      // 计算总数
+      const total = data.reduce((sum, item) => sum + (Number(item.value) || 0), 0)
+
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)',
+        },
+        legend: {
+          show: false, // 外部已有 Legend
+        },
+        series: [
+          {
+            name: '进度统计',
+            type: 'pie',
+            radius: ['55%', '90%'],
+            avoidLabelOverlap: true,
+            label: {
+              show: true,
+              position: 'inside',
+              formatter: '{c}({d}%)',
+              color: '#000',
+              fontSize: 12,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      }
+      chartInstance.setOption(option)
+    }
+
+    watch(
+      () => [props.series, props.hiddenLegend],
+      () => {
+        updateOption()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      if (chartInstance) {
+        chartInstance.dispose()
+      }
+      window.removeEventListener('resize', handleResize)
+    })
+
+    const handleResize = () => {
+      chartInstance?.resize()
+    }
+
+    return () => (
+      <div
+        ref={chartRef}
+        style={{ width: '100%', height: `${props.height}px` }}
+      ></div>
+    )
+  },
+})

package/app/wujie-vue3-child/src/views/aiCoach/practiceStatus/components/echarts/EchartsRankBar.jsx

@@ -0,0 +1,132 @@
+import { defineComponent, onMounted, ref, watch, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+export default defineComponent({
+  name: 'EchartsRankBar',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
+    valueFormatter: {
+      type: Function,
+      default: (v) => v,
+    },
+    height: {
+      type: Number,
+      default: 300,
+    },
+  },
+  setup(props) {
+    const chartRef = ref(null)
+    let chartInstance = null
+
+    const initChart = () => {
+      if (!chartRef.value) return
+      chartInstance = echarts.init(chartRef.value)
+      updateOption()
+    }
+
+    const updateOption = () => {
+      if (!chartInstance) return
+
+      // 为了保证顺序（排名第一在最上面），ECharts 默认 category 轴是从下往上画的（index 0 在下）。
+      // 所以通常需要把数据 reverse 一下，或者 yAxis.inverse = true。
+      // 这里 props.data 应该是已排序好的（第一名在 index 0）。
+      // 使用 inverse: true 让 index 0 排在顶部。
+
+      const labels = props.data.map((d) => d.name)
+      const values = props.data.map((d) => d.value)
+      
+      // 如果没有传 max，就取数据最大值作为背景条最大值
+      const maxValue = props.max || (values.length > 0 ? Math.max(...values) * 1.1 : 100)
+
+      const option = {
+        grid: {
+          top: 10,
+          bottom: 10,
+          left: 10,
+          right: 40, // 留给 label
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          show: false,
+          max: maxValue,
+        },
+        yAxis: {
+          type: 'category',
+          data: labels,
+          inverse: true, // 反转，让第一个数据在顶部
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            color: '#606266',
+            width: 60, // 限制宽度避免太宽
+            overflow: 'truncate',
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            data: values,
+            barWidth: 12,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#f5f7fa',
+              borderRadius: 6,
+            },
+            itemStyle: {
+              color: '#ff7d00',
+              borderRadius: 6,
+            },
+            label: {
+              show: true,
+              position: 'right',
+              formatter: (params) => {
+                return props.valueFormatter(params.value)
+              },
+              color: '#333',
+            },
+          },
+        ],
+      }
+      chartInstance.setOption(option)
+    }
+
+    watch(
+      () => [props.data, props.max],
+      () => {
+        updateOption()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUnmounted(() => {
+      if (chartInstance) {
+        chartInstance.dispose()
+      }
+      window.removeEventListener('resize', handleResize)
+    })
+
+    const handleResize = () => {
+      chartInstance?.resize()
+    }
+
+    return () => (
+      <div
+        ref={chartRef}
+        style={{ width: '100%', height: `${props.height}px` }}
+      ></div>
+    )
+  },
+})

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

@@ -0,0 +1,176 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import StatCardsRow from './components/StatCardsRow'
+import ChartsPanel from './components/ChartsPanel'
+import PracticeTable from './components/PracticeTable'
+import ScriptStatsPanel from './components/ScriptStatsPanel'
+
+/**
+ * 练习情况页面（按截图搭建）
+ * 1) 组件化拆分：StatCardsRow / ChartsPanel / PracticeTable / ScriptStatsPanel
+ * 2) 模拟数据：统一在父组件准备，props 传入子组件使用
+ * 3) 所有组件均放在 practiceStatus 文件夹内（含子目录）
+ * 4) JSX + Element Plus，风格对齐 aiCoach 目录现有写法
+ */
+export default defineComponent({
+    // 练习情况
+    name: 'PracticeStatus',
+    setup() {
+        // 顶部 tabs（截图：计划统计/剧本统计）
+        const activeTab = ref('plan')
+        const useEcharts = ref(false)
+        setTimeout(() => useEcharts.value = true, 1000)
+
+        // 顶部筛选（截图：所属部门/职务）
+        const filters = ref({
+            dept: '全部部门',
+            role: '全部职务',
+        })
+
+        // 模拟：练习数据概览（截图 6 个卡片）
+        const overviewCards = ref([
+            { key: 'students', label: '总学员人数', value: '828' },
+            { key: 'rate', label: '完成率', value: '83.0%' },
+            { key: 'avgCount', label: '平均练练次数', value: '1.9' },
+            { key: 'avgDuration', label: '平均练练时长(分钟)', value: '10.1' },
+            { key: 'firstAvg', label: '首次练习均分', value: '56.6' },
+            { key: 'bestAvg', label: '最高一次均分', value: '83.4' },
+        ])
+
+        // 模拟：进度统计（截图：已完成/未开始/练习中）
+        const progressSeries = ref([
+            { name: '已完成', value: 68, color: '#ff7a00' },
+            { name: '未开始', value: 6, color: '#7bdcf6' },
+            { name: '练习中', value: 26, color: '#ffd08a' },
+        ])
+
+        // 模拟：学员练习时长排名（分钟）
+        const durationRank = ref([
+            { name: '张三', value: 469.7 },
+            { name: '李四', value: 270.1 },
+            { name: '王五', value: 75.1 },
+            { name: '赵六', value: 74.8 },
+            { name: '周七', value: 67.8 },
+            { name: '吴八', value: 64.0 },
+            { name: '郑九', value: 64.0 },
+            { name: '钱十', value: 64.0 },
+        ])
+
+        // 模拟：学员最高一次均分排名（0-100）
+        const scoreRank = ref([
+            { name: '张三', value: 100 },
+            { name: '李四', value: 100 },
+            { name: '王五', value: 100 },
+            { name: '赵六', value: 100 },
+            { name: '周七', value: 98 },
+            { name: '吴八', value: 96 },
+            { name: '郑九', value: 90 },
+            { name: '钱十', value: 88 },
+        ])
+
+        // 模拟：明细数据（截图表格）
+        const tableData = ref(
+            Array.from({ length: 30 }).map((_, idx) => {
+                const base = idx % 10
+                const score = [80, 70, 75, 90, 96, 56, 78, 67, 69, 99][base]
+                const progress = ['2/5', '5/5', '5/5', '5/5', '5/5', '5/5', '5/5', '5/5', '2/5', '2/5'][base]
+                const passStatus = score >= 60 ? '通过' : '未通过'
+                return {
+                    id: `${Date.now()}-${idx}`,
+                    jobNo: '123456',
+                    name: ['张三', '李四', '王五', '赵六', '周七', '吴八'][idx % 6],
+                    planName: '标准内容',
+                    scriptName: '标准内容',
+                    startTime: '2025-08-01',
+                    endTime: '2025-09-01',
+                    status: '已完成',
+                    score,
+                    passStatus,
+                    progress,
+                }
+            }),
+        )
+
+        return () => {
+            return <div>
+                <div class={styles.practiceStatus}>
+                    <div class={styles.toolbar}>
+                        <div class={styles.toolbarLeft}>
+                            <div class={styles.tabsWrap}>
+                                <div
+                                    class={[styles.tabBtn, activeTab.value === 'plan' ? styles.tabBtnActive : null]}
+                                    onClick={() => (activeTab.value = 'plan')}
+                                >
+                                    计划统计
+                                </div>
+                                <div
+                                    class={[styles.tabBtn, activeTab.value === 'script' ? styles.tabBtnActive : null]}
+                                    onClick={() => (activeTab.value = 'script')}
+                                >
+                                    剧本统计
+                                </div>
+                            </div>
+                        </div>
+                        {activeTab.value === 'plan' && (
+                            <div class={styles.toolbarRight}>
+                                <el-switch
+                                    v-model={useEcharts.value}
+                                    active-text="ECharts"
+                                    inactive-text="CSS"
+                                    style={{ marginRight: '16px' }}
+                                />
+                                <el-select size="small" style={{ width: '120px' }} v-model={filters.value.dept}>
+                                    <el-option label="全部部门" value="全部部门" />
+                                    <el-option label="销售一部" value="销售一部" />
+                                    <el-option label="销售二部" value="销售二部" />
+                                </el-select>
+                                <el-select size="small" style={{ width: '120px' }} v-model={filters.value.role}>
+                                    <el-option label="全部职务" value="全部职务" />
+                                    <el-option label="导购" value="导购" />
+                                    <el-option label="店长" value="店长" />
+                                </el-select>
+                                <el-button size="small">下载</el-button>
+                            </div>
+                        )}
+                         {activeTab.value === 'script' && (
+                            <div class={styles.toolbarRight}>
+                                <el-switch
+                                    v-model={useEcharts.value}
+                                    active-text="ECharts"
+                                    inactive-text="CSS"
+                                    style={{ marginRight: '16px' }}
+                                />
+                            </div>
+                        )}
+                    </div>
+
+                    {activeTab.value === 'plan' ? (
+                        <>
+                            <div class={styles.section}>
+                                <div class={styles.sectionHeader}>练习数据概览</div>
+                                <StatCardsRow cards={overviewCards.value} />
+                            </div>
+
+                            <div class={styles.section}>
+                                <div class={styles.sectionHeader}>练习情况统计</div>
+                                <ChartsPanel
+                                    progress={progressSeries.value}
+                                    durationRank={durationRank.value}
+                                    scoreRank={scoreRank.value}
+                                    useEcharts={useEcharts.value}
+                                />
+                            </div>
+
+                            <div class={styles.section}>
+                                <div class={styles.sectionHeader}>明细数据</div>
+                                <PracticeTable data={tableData.value} pageSize={10} />
+                            </div>
+                        </>
+                    ) : (
+                        <ScriptStatsPanel useEcharts={useEcharts.value} />
+                    )}
+                </div>
+            </div>
+        }
+    },
+})

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

@@ -0,0 +1,96 @@
+.practiceStatus {
+  width: 100%;
+  max-width: 1100px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.toolbarLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbarTitle {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.toolbarTitle:before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background: #ff7a00;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+
+.toolbarRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.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;
+}
+
+/* Tabs */
+.tabsWrap {
+  display: flex;
+  gap: 8px;
+}
+
+.tabBtn {
+  padding: 6px 16px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  border-radius: 4px;
+  color: #606266;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.tabBtn:hover {
+  color: #ff7a00;
+  border-color: #ff7a00;
+}
+
+.tabBtnActive {
+  background: #ff7a00;
+  border-color: #ff7a00;
+  color: #fff;
+}
+
+.tabBtnActive:hover {
+  color: #fff;
+}