npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,375 @@
+import { defineComponent, ref } from 'vue'
+import DialogueSegment from './dialogueSegment/index.jsx'
+import PracticeStatus from './practiceStatus/index.jsx'
+import ReportDetail from './reportDetail/index.jsx'
+import DepartmentPersonnel from './departmentPersonnel/index.jsx'
+import { aiLoading } from '../../directives/aiLoading'
+import SmartAnchorTabs from '../../components/SmartAnchorTabs/index.jsx'
+
+export default defineComponent({
+    // 智能教练
+    name: 'AiCoach',
+
+    setup() {
+        const activeTab = ref('dialogue-segment')
+        const aiLoadingTab = ref('directive-usage')
+
+        // SmartAnchorTabs 演示数据
+        const anchorTabsPosition = ref('left')
+        const anchorTabsMode = ref('anchor')
+        const anchorTabsData = [
+            {
+                label: '基本信息',
+                key: 'basic-info',
+                content: '这里是基本信息的内容区域。可以放置表单、文字等。'
+            },
+            {
+                label: '场景设置',
+                key: 'scenario-settings',
+                content: '这里是场景设置的内容区域。'
+            },
+            {
+                label: 'AI参考资料',
+                key: 'ai-reference',
+                content: '这里是AI参考资料的内容区域。可以上传文档等。'
+            },
+            {
+                label: '高级配置',
+                key: 'advanced-config',
+                content: '这里是高级配置的内容区域。'
+            },
+            {
+                label: '其他设置',
+                key: 'other-settings',
+                content: '这里是其他设置的内容区域。'
+            }
+        ]
+
+        // v-aiLoading 指令演示用状态：
+        // simpleLoading：基础布尔用法 v-aiLoading="loading"
+        // advancedLoading：对象用法 v-aiLoading="{ loading, text, class }"
+        const simpleLoading = ref(false)
+        const advancedLoading = ref(false)
+
+        const toggleSimpleLoading = () => {
+            simpleLoading.value = !simpleLoading.value
+        }
+
+        const toggleAdvancedLoading = () => {
+            advancedLoading.value = !advancedLoading.value
+        }
+
+        const functionDemoTargetRef = ref(null)
+        const functionDemoLoading = ref(false)
+        let functionDemoStop = null
+
+        const triggerFunctionDemo = () => {
+            if (functionDemoLoading.value) {
+                if (functionDemoStop) {
+                    functionDemoStop()
+                }
+                functionDemoLoading.value = false
+                functionDemoStop = null
+                return
+            }
+            if (!functionDemoTargetRef.value) return
+            functionDemoLoading.value = true
+            const { stop } = aiLoading(functionDemoTargetRef, {
+                text: 'AI生成中...',
+                loaderType: 'ring',
+                gradient: true,
+                borderColor: '#409eff'
+            })
+            functionDemoStop = stop
+            setTimeout(() => {
+                if (functionDemoStop) {
+                    functionDemoStop()
+                    functionDemoStop = null
+                }
+                functionDemoLoading.value = false
+            }, 1500)
+        }
+
+        return () => {
+            return <div style={{ padding: '30px' }}>
+                <el-tabs v-model={activeTab.value} type="border-card">
+                    <el-tab-pane label="对话环节" name="dialogue-segment">
+                        <DialogueSegment />
+                    </el-tab-pane>
+                    <el-tab-pane label="练习情况" name="practice-status">
+                        <PracticeStatus />
+                    </el-tab-pane>
+                    <el-tab-pane label="报告详情" name="report-detail">
+                        <ReportDetail />
+                    </el-tab-pane>
+                    <el-tab-pane label="部门人员" name="department-personnel">
+                        <DepartmentPersonnel />
+                    </el-tab-pane>
+                    <el-tab-pane label="AI Loading 用例" name="ai-loading-examples">
+                        <div style={{ padding: '16px 0' }}>
+                            <el-tabs v-model={aiLoadingTab.value} type="card">
+                                <el-tab-pane label="指令用法" name="directive-usage">
+                                    <div style={{ display: 'flex', gap: '24px' }}>
+                                        <div style={{ flex: 1 }}>
+                                            <h3 style={{ margin: 0, marginBottom: '8px' }}>基础用法：v-aiLoading="loading"</h3>
+                                            <p style={{ margin: 0, marginBottom: '12px', color: '#666', fontSize: '13px' }}>
+                                                通过布尔变量控制是否显示 AI Loading 遮罩。
+                                            </p>
+                                            <el-button type="primary" onClick={toggleSimpleLoading}>
+                                                {simpleLoading.value ? '结束加载' : '开始加载'}
+                                            </el-button>
+                                            <div
+                                                v-ai-loading={simpleLoading.value}
+                                                style={{
+                                                    marginTop: '16px',
+                                                    padding: '16px',
+                                                    border: '1px solid #ebeef5',
+                                                    borderRadius: '4px',
+                                                    minHeight: '80px'
+                                                }}
+                                            >
+                                                当 loading 为 true 时，这个区域上会显示 AI Loading 遮罩。
+                                            </div>
+                                            <pre
+                                                style={{
+                                                    marginTop: '16px',
+                                                    fontSize: '12px',
+                                                    background: '#f9fafb',
+                                                    padding: '12px',
+                                                    borderRadius: '4px',
+                                                    whiteSpace: 'pre-wrap'
+                                                }}
+                                            >
+{`<div v-aiLoading="loading">
+  内容区域
+</div>`}
+                                            </pre>
+                                        </div>
+                                        <div style={{ flex: 1 }}>
+                                            <h3 style={{ margin: 0, marginBottom: '8px' }}>高级用法：对象参数</h3>
+                                            <p style={{ margin: 0, marginBottom: '12px', color: '#666', fontSize: '13px' }}>
+                                                通过对象同时配置 loading、提示文案 text、loader 样式、边框颜色和渐变背景。
+                                            </p>
+                                            <el-button type="primary" onClick={toggleAdvancedLoading}>
+                                                {advancedLoading.value ? '结束加载' : '开始加载'}
+                                            </el-button>
+                                            <div
+                                                class={['ai-loading-demo-card', advancedLoading.value ? 'ai-loading-demo-card--active' : '']}
+                                                v-ai-loading={{
+                                                    loading: advancedLoading.value,
+                                                    text: 'AI智能生成中...',
+                                                    loaderType: 'ring',
+                                                    gradient: true,
+                                                    borderColor: '#ff7e67'
+                                                }}
+                                                style={{
+                                                    marginTop: '16px',
+                                                    padding: '16px',
+                                                    border: '1px solid #ebeef5',
+                                                    borderRadius: '4px',
+                                                    minHeight: '80px'
+                                                }}
+                                            >
+                                                使用对象形式，可以自定义文案、圆环边框颜色和淡色渐变背景。
+                                            </div>
+                                            <pre
+                                                style={{
+                                                    marginTop: '16px',
+                                                    fontSize: '12px',
+                                                    background: '#f9fafb',
+                                                    padding: '12px',
+                                                    borderRadius: '4px',
+                                                    whiteSpace: 'pre-wrap'
+                                                }}
+                                            >
+{`<!-- 条形 loading + 默认渐变背景 -->
+<div v-aiLoading="{ loading }"></div>
+
+<!-- 圆环 loading，带有有色边框并旋转 -->
+<div
+  v-aiLoading="{ loading: loading, loaderType: 'ring', borderColor: '#ff7e67' }"
+></div>
+
+<!-- 圆环 loading + 自定义文案 + 动态渐变背景 -->
+<div
+  v-aiLoading="{
+    loading: loading,
+    text: 'AI智能生成中...',
+    loaderType: 'ring',
+    gradient: true,
+    borderColor: '#ff7e67'
+  }"
+></div>`}
+                                            </pre>
+                                        </div>
+                                    </div>
+                                </el-tab-pane>
+                                <el-tab-pane label="函数式用法" name="function-usage">
+                                    <div style={{ display: 'flex', gap: '24px' }}>
+                                        <div style={{ flex: 1 }}>
+                                            <h3 style={{ margin: 0, marginBottom: '8px' }}>基础函数式调用</h3>
+                                            <p style={{ margin: 0, marginBottom: '12px', color: '#666', fontSize: '13px' }}>
+                                                通过 aiLoading(target, options) 手动控制某个区域的 AI Loading 开启和关闭。
+                                            </p>
+                                            <el-button type="primary" onClick={triggerFunctionDemo}>
+                                                {functionDemoLoading.value ? '结束加载' : '开始加载'}
+                                            </el-button>
+                                            <div
+                                                ref={functionDemoTargetRef}
+                                                style={{
+                                                    marginTop: '16px',
+                                                    padding: '16px',
+                                                    border: '1px dashed #dcdfe6',
+                                                    borderRadius: '4px',
+                                                    minHeight: '80px'
+                                                }}
+                                            >
+                                                这是函数式调用示例绑定的区域。
+                                            </div>
+                                        </div>
+                                        <div style={{ flex: 1 }}>
+                                            <h3 style={{ margin: 0, marginBottom: '8px' }}>函数式用法示例代码</h3>
+                                            <pre
+                                                style={{
+                                                    marginTop: '16px',
+                                                    fontSize: '12px',
+                                                    background: '#f9fafb',
+                                                    padding: '12px',
+                                                    borderRadius: '4px',
+                                                    whiteSpace: 'pre-wrap'
+                                                }}
+                                            >
+{`import { ref } from 'vue'
+import { aiLoading } from '@/directives/aiLoading'
+
+const targetRef = ref(null)
+let stopLoading = null
+
+const start = () => {
+  if (stopLoading) {
+    stopLoading()
+    stopLoading = null
+    return
+  }
+  const { stop } = aiLoading(targetRef, {
+    text: 'AI生成中...',
+    loaderType: 'ring',
+    gradient: true,
+    borderColor: '#409eff'
+  })
+  stopLoading = stop
+}`}</pre>
+                                        </div>
+                                    </div>
+                                </el-tab-pane>
+                                <el-tab-pane label="全局配置" name="global-config">
+                                    <div style={{ display: 'flex', gap: '24px' }}>
+                                        <div style={{ flex: 1 }}>
+                                            <h3 style={{ margin: 0, marginBottom: '8px' }}>入口注册</h3>
+                                            <p style={{ margin: 0, marginBottom: '12px', color: '#666', fontSize: '13px' }}>
+                                                在 main.js 中全局注册 v-aiLoading 指令和样式文件后，即可在任意页面使用。
+                                            </p>
+                                            <pre
+                                                style={{
+                                                    marginTop: '16px',
+                                                    fontSize: '12px',
+                                                    background: '#f9fafb',
+                                                    padding: '12px',
+                                                    borderRadius: '4px',
+                                                    whiteSpace: 'pre-wrap'
+                                                }}
+                                            >
+{`import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+import { aiLoadingDirective } from './directives/aiLoading'
+
+const app = createApp(App)
+
+app.directive('aiLoading', aiLoadingDirective)
+
+app.mount('#app')`}</pre>
+                                        </div>
+                                        <div style={{ flex: 1 }}>
+                                            <h3 style={{ margin: 0, marginBottom: '8px' }}>可配置选项总览</h3>
+                                            <pre
+                                                style={{
+                                                    marginTop: '16px',
+                                                    fontSize: '12px',
+                                                    background: '#f9fafb',
+                                                    padding: '12px',
+                                                    borderRadius: '4px',
+                                                    whiteSpace: 'pre-wrap'
+                                                }}
+                                            >
+{`// 指令和函数式 options 一致：
+// {
+//   loading: boolean,              // 指令必填，函数式内部自动填 true/false
+//   text?: string,                 // 提示文案，默认 'AI生成中'
+//   loaderType?: 'bars' | 'ring',  // 条形 / 圆环
+//   gradient?: boolean | string,   // true: 默认渐变; false: 纯白;
+//                                  // string: 自定义渐变背景
+//   borderColor?: string,          // 圆环边框颜色
+//   class?: string                 // 自定义遮罩 class
+// }`}</pre>
+                                        </div>
+                                    </div>
+                                </el-tab-pane>
+                            </el-tabs>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="Smart Anchor Tabs 用例" name="smart-anchor-tabs">
+                        <div style={{ padding: '16px 0' }}>
+                            <div style={{ marginBottom: '20px', display: 'flex', gap: '20px', alignItems: 'center' }}>
+                                <div>
+                                    <span style={{ marginRight: '8px' }}>布局位置:</span>
+                                    <el-radio-group v-model={anchorTabsPosition.value}>
+                                        <el-radio-button label="left">左侧</el-radio-button>
+                                        <el-radio-button label="right">右侧</el-radio-button>
+                                        <el-radio-button label="top">顶部</el-radio-button>
+                                    </el-radio-group>
+                                </div>
+                                <div>
+                                    <span style={{ marginRight: '8px' }}>模式:</span>
+                                    <el-radio-group v-model={anchorTabsMode.value}>
+                                        <el-radio-button label="anchor">滚动锚点</el-radio-button>
+                                        <el-radio-button label="switch">组件切换</el-radio-button>
+                                    </el-radio-group>
+                                </div>
+                            </div>
+
+                            <div style={{ height: '500px', border: '1px solid #dcdfe6', borderRadius: '4px' }}>
+                                <SmartAnchorTabs
+                                    tabs={anchorTabsData}
+                                    position={anchorTabsPosition.value}
+                                    mode={anchorTabsMode.value}
+                                    height="100%"
+                                >
+                                    {{
+                                        default: ({ tab }) => (
+                                            <div style={{ minHeight: '300px' }}>
+                                                <h3>{tab.label}</h3>
+                                                <p>{tab.content}</p>
+                                                {/* 模拟长内容 */}
+                                                <div style={{ color: '#909399', fontSize: '14px', lineHeight: '1.6' }}>
+                                                    {Array.from({ length: 5 }).map((_, i) => (
+                                                        <p key={i}>
+                                                            这是 {tab.label} 的模拟内容段落 {i + 1}。
+                                                            SmartAnchorTabs 组件支持平滑滚动定位，
+                                                            并且在滚动时会自动更新左侧导航的高亮状态。
+                                                            切换到 switch 模式则只显示当前内容。
+                                                        </p>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )
+                                    }}
+                                </SmartAnchorTabs>
+                            </div>
+                        </div>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+        }
+    },
+})

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

@@ -0,0 +1,121 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import DonutChart from '../DonutChart'
+import RankBarChart from '../RankBarChart'
+import EchartsDonut from '../echarts/EchartsDonut.jsx'
+import EchartsRankBar from '../echarts/EchartsRankBar.jsx'
+
+/**
+ * 练习情况统计（3个面板）
+ * - 左：进度统计（环形图 + 图例）
+ * - 中：学员练习时长排名（条形排行）
+ * - 右：学员最高一次均分排名（条形排行）
+ */
+export default defineComponent({
+  name: 'PracticeStatusChartsPanel',
+  props: {
+    useEcharts: {
+      type: Boolean,
+      default: false,
+    },
+    progress: {
+      type: Array,
+      default: () => [],
+    },
+    durationRank: {
+      type: Array,
+      default: () => [],
+    },
+    scoreRank: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    const hiddenLegend = ref([]) // 存储被隐藏的图例名称
+
+    const toggleLegend = (name) => {
+      if (!props.useEcharts) return // 只有 Echarts 模式下支持
+      if (hiddenLegend.value.includes(name)) {
+        hiddenLegend.value = hiddenLegend.value.filter((n) => n !== name)
+      } else {
+        hiddenLegend.value.push(name)
+      }
+    }
+
+    return () => (
+      <div>
+        <div class={styles.grid3}>
+          <div class={styles.panel}>
+            <div class={styles.panelHeader}>
+              <div class={styles.panelTitle}>进度统计</div>
+              <div class={styles.legend}>
+                {props.progress.map((it, idx) => {
+                  const isHidden = hiddenLegend.value.includes(it.name)
+                  return (
+                    <span
+                      class={[styles.legendItem, isHidden && props.useEcharts ? styles.legendHidden : '']}
+                      key={`${it.name}-${idx}`}
+                      onClick={() => toggleLegend(it.name)}
+                      style={{ cursor: props.useEcharts ? 'pointer' : 'default', opacity: isHidden && props.useEcharts ? 0.5 : 1 }}
+                    >
+                      <i class={styles.dot} style={{ background: it.color }} />
+                      <span>{it.name}</span>
+                    </span>
+                  )
+                })}
+              </div>
+            </div>
+            <div class={styles.pieWrap}>
+              {props.useEcharts ? (
+                <EchartsDonut series={props.progress} height={200} hiddenLegend={hiddenLegend.value} />
+              ) : (
+                <DonutChart series={props.progress} />
+              )}
+            </div>
+          </div>
+
+          <div class={styles.panel}>
+            <div class={styles.panelHeader}>
+              <div class={styles.panelTitle}>学员练习时长排名</div>
+            </div>
+            {props.useEcharts ? (
+              <EchartsRankBar
+                data={props.durationRank}
+                valueFormatter={(v) => `${v.toFixed(1)}`}
+                height={300}
+              />
+            ) : (
+              <RankBarChart
+                data={props.durationRank}
+                valueFormatter={(v) => `${v.toFixed(1)}`}
+                height={300}
+              />
+            )}
+          </div>
+
+          <div class={styles.panel}>
+            <div class={styles.panelHeader}>
+              <div class={styles.panelTitle}>学员最高一次均分排名</div>
+            </div>
+            {props.useEcharts ? (
+              <EchartsRankBar
+                data={props.scoreRank}
+                valueFormatter={(v) => `${v}`}
+                height={300}
+                max={100}
+              />
+            ) : (
+              <RankBarChart
+                data={props.scoreRank}
+                valueFormatter={(v) => `${v}`}
+                height={300}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  },
+})
+

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

@@ -0,0 +1,76 @@
+.grid3 {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr;
+  gap: 10px;
+}
+
+.chartCard {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  border: 1px solid #ebeef5;
+}
+
+/* Alias for component usage */
+.panel {
+  composes: chartCard;
+}
+
+.chartHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+/* Alias for component usage */
+.panelHeader {
+  composes: chartHeader;
+}
+
+.chartTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* Alias for component usage */
+.panelTitle {
+  composes: chartTitle;
+}
+
+.chartLegend {
+  display: flex;
+  gap: 16px;
+}
+
+/* Alias for component usage */
+.legend {
+  composes: chartLegend;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #606266;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+.legendHidden {
+  opacity: 0.5;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.pieWrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,104 @@
+import { defineComponent, computed } from 'vue'
+
+/**
+ * 轻量环形图（不依赖图表库）
+ * - 使用 SVG stroke-dasharray 实现
+ * - 适合做“进度统计”等概览图
+ */
+export default defineComponent({
+  name: 'PracticeStatusDonutChart',
+  props: {
+    series: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: Number,
+      default: 170,
+    },
+    thickness: {
+      type: Number,
+      default: 18,
+    },
+  },
+  setup(props) {
+    const normalized = computed(() => {
+      const safe = (props.series || []).map((s) => ({
+        name: s?.name ?? '',
+        value: Number(s?.value ?? 0),
+        color: s?.color ?? '#ff7a00',
+      }))
+      const total = safe.reduce((sum, cur) => sum + (Number.isFinite(cur.value) ? cur.value : 0), 0)
+      if (total <= 0) {
+        return {
+          total: 0,
+          list: safe.map((s) => ({ ...s, percent: 0 })),
+        }
+      }
+      return {
+        total,
+        list: safe.map((s) => ({ ...s, percent: s.value / total })),
+      }
+    })
+
+    const geometry = computed(() => {
+      const size = props.size
+      const thickness = props.thickness
+      const r = (size - thickness) / 2
+      const c = 2 * Math.PI * r
+      return { size, thickness, r, c }
+    })
+
+    const segments = computed(() => {
+      const { c } = geometry.value
+      let offset = 0
+      const list = normalized.value.list.map((s) => {
+        const len = c * s.percent
+        const seg = {
+          ...s,
+          len,
+          offset,
+          dasharray: `${len} ${Math.max(0, c - len)}`,
+          dashoffset: -offset,
+        }
+        offset += len
+        return seg
+      })
+      return list
+    })
+
+    return () => {
+      const { size, thickness, r } = geometry.value
+      const cx = size / 2
+      const cy = size / 2
+      return (
+        <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <circle
+            cx={cx}
+            cy={cy}
+            r={r}
+            fill="none"
+            stroke="#f2f6fc"
+            stroke-width={thickness}
+          />
+          {segments.value.map((s, idx) => (
+            <circle
+              key={`${s.name}-${idx}`}
+              cx={cx}
+              cy={cy}
+              r={r}
+              fill="none"
+              stroke={s.color}
+              stroke-width={thickness}
+              stroke-linecap="round"
+              stroke-dasharray={s.dasharray}
+              stroke-dashoffset={s.dashoffset}
+              transform={`rotate(-90 ${cx} ${cy})`}
+            />
+          ))}
+        </svg>
+      )
+    }
+  },
+})
+