npmapps 1.1.6 → 1.3.1

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

@@ -1,375 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,76 +0,0 @@
-.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

@@ -1,104 +0,0 @@
-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>
-      )
-    }
-  },
-})
-