bohui-vue 1.0.1

package/templates/vue-project/src/views/teachingLog/composables/useEffectTooltip.ts

@@ -0,0 +1,88 @@
+import { ref } from "vue";
+import type { Ref } from "vue";
+
+/**
+ * 学生专注度下降点图片 tooltip hooks
+ * - 管理 tooltip 显示/隐藏与文本内容
+ * - 根据图片在「教学效果」卡片中的位置计算 tooltip 坐标
+ * - 保证 tooltip 最小宽度为 30rem，并随卡片一起滚动
+ */
+export function useEffectTooltip(): {
+    showTooltipContent: Ref<boolean>;
+    tooltipDescription: Ref<string>;
+    tooltipX: Ref<number>;
+    tooltipY: Ref<number>;
+    showTooltip: (desc: string, e: MouseEvent) => void;
+    moveTooltip: (e: MouseEvent) => void;
+    hideTooltip: () => void;
+} {
+    // tooltip 最小宽度（30rem）与右侧预留间距（16px）
+    // 通过读取根元素 font-size，保证「30」的语义与 30rem 一致
+    const minWidthPx = (() => {
+        if (typeof window === "undefined") return 280 * 16;
+        const fontSize = window.getComputedStyle(document.documentElement).fontSize || "16";
+        const root = parseFloat(fontSize);
+        const base = Number.isFinite(root) && root > 0 ? root : 16;
+        return 30 * base;
+    })();
+    const marginPx = 16;
+    const showTooltipContent = ref(false);
+    const tooltipDescription = ref("");
+    const tooltipX = ref(0);
+    const tooltipY = ref(0);
+    /**
+     * 计算 tooltip 在「教学效果」卡片内的相对位置
+     * - 优先靠图片左侧对齐
+     * - 若右侧空间不足，则向左收缩，保证最小宽度
+     */
+    function updatePosition(target: HTMLElement) {
+        const container = target.closest(".teaching-effect") as HTMLElement | null;
+        const containerRect = container?.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        if (!containerRect) {
+            tooltipX.value = targetRect.left;
+            tooltipY.value = targetRect.bottom + 8;
+            return;
+        }
+        const containerWidth = containerRect.width;
+        const maxLeft = Math.max(0, containerWidth - minWidthPx - marginPx);
+        const baseLeft = targetRect.left - containerRect.left;
+        tooltipX.value = Math.min(baseLeft, maxLeft);
+        tooltipY.value = targetRect.bottom - containerRect.top + 8;
+    }
+    /**
+     * 鼠标移入图片时展示 tooltip，并根据当前图片位置计算坐标
+     */
+    function showTooltip(desc: string, e: MouseEvent) {
+        if (!desc) return;
+        const target = e.currentTarget as HTMLElement | null;
+        if (!target) return;
+        showTooltipContent.value = true;
+        tooltipDescription.value = desc;
+        updatePosition(target);
+    }
+    /**
+     * 鼠标在图片上移动时实时更新 tooltip 位置
+     */
+    function moveTooltip(e: MouseEvent) {
+        if (!showTooltipContent.value) return;
+        const target = e.currentTarget as HTMLElement | null;
+        if (!target) return;
+        updatePosition(target);
+    }
+    /**
+     * 鼠标移出图片时隐藏 tooltip
+     */
+    function hideTooltip() {
+        showTooltipContent.value = false;
+    }
+    return {
+        showTooltipContent,
+        tooltipDescription,
+        tooltipX,
+        tooltipY,
+        showTooltip,
+        moveTooltip,
+        hideTooltip,
+    };
+}

package/templates/vue-project/src/views/teachingLog/composables/useEffectTrendChart.ts

@@ -0,0 +1,160 @@
+import * as echarts from "echarts";
+import { onMounted, onUnmounted } from "vue";
+import { formatSeconds } from "@/utils/time";
+import { getResponsivePx } from "@/utils/responsive";
+
+/**
+ * 教学效果趋势图 hooks
+ * - 接收 [time, focus] 数组并渲染折线面积图
+ * - 对坐标轴、tooltip、渐变填充等配置进行统一封装
+ * - 返回 initTrendChart，组件中调用后可获得 dispose 方法用于销毁图表
+ */
+export function useEffectTrendChart(): {
+    initTrendChart: (el: HTMLElement, trend: Array<[number, number]>) => { dispose: () => void };
+} {
+    /**
+     * 线性渐变颜色类型定义
+     * 用于 areaStyle 中描述从上到下的渐变填充
+     */
+    type LinearGradientColor = {
+        type: "linear";
+        x: number;
+        y: number;
+        x2: number;
+        y2: number;
+        colorStops: Array<{ offset: number; color: string }>;
+        global?: boolean;
+    };
+    /**
+     * 初始化趋势图
+     * - el：ECharts 容器元素
+     * - trend：[[time, focus], ...]，time 为秒，focus 为百分比 0-100
+     */
+    function initTrendChart(el: HTMLElement, trend: Array<[number, number]>) {
+        const chart = echarts.init(el);
+        const maxTime = trend.length ? Math.max(...trend.map((d) => d[0])) : 0;
+        const data = trend;
+        const maxFocus = 100;
+        const fontSize = Math.min(getResponsivePx(28, "vw"), 12);
+        // X 轴刻度格式化为 HH:mm:ss 或 mm:ss
+        const formatAxisTime = (v: number) => {
+            const s = Math.round(v);
+            const h = Math.floor(s / 3600);
+            const m = Math.floor((s % 3600) / 60);
+            const sec = s % 60;
+            const pad = (n: number) => (n < 10 ? `0${n}` : `${n}`);
+            return h > 0 ? `${h}:${pad(m)}:${pad(sec)}` : `${m}:${pad(sec)}`;
+        };
+        // 动态计算最小专注度，保证曲线贴合数据下沿
+        const minFocus = trend.length ? Math.floor(Math.min(...trend.map((d) => d[1]))) : 0;
+        const calcSplitNumber = () => {
+            const width = el.clientWidth || 0;
+            const labelWidth = 60;
+            const maxLabels = Math.max(2, Math.floor(width / labelWidth));
+            return Math.max(1, maxLabels - 1);
+        };
+        // 根据容器宽度计算初始刻度数量，避免刻度标签重叠
+        const initialSplitNumber = calcSplitNumber();
+        chart.setOption({
+            grid: { left: 0, right: 0, top: 40, bottom: 0 },
+            xAxis: {
+                type: "value",
+                min: 0,
+                max: maxTime,
+                splitNumber: initialSplitNumber,
+                name: "",
+                nameLocation: "center",
+                nameGap: 30,
+                nameTextStyle: { color: "#9aa4af" },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: {
+                    color: "#9aa4af",
+                    fontSize: fontSize,
+                    formatter: (v: number) => formatAxisTime(v),
+                    interval: "auto",
+                    hideOverlap: true,
+                },
+                splitLine: { show: false },
+            },
+            yAxis: {
+                type: "value",
+                min: minFocus,
+                max: maxFocus,
+                name: "百分比(%)",
+                nameLocation: "end",
+                nameGap: 20,
+                nameTextStyle: { color: "#9aa4af" },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                axisLabel: {
+                    color: "#9aa4af",
+                    fontSize: fontSize,
+                    formatter: (v: number) => {
+                        if (maxFocus - v <= 2 && v !== maxFocus) return "";
+                        return `${v}%`;
+                    },
+                },
+                splitLine: { show: false },
+            },
+            tooltip: {
+                trigger: "axis",
+                backgroundColor: "rgba(0,0,0,0.86)",
+                borderWidth: 0,
+                textStyle: { color: "#fff", fontSize: fontSize },
+                formatter: (params: unknown[]) => {
+                    const p = Array.isArray(params)
+                        ? (params[0] as { value?: [number, number] })
+                        : null;
+                    if (!p?.value) return "";
+                    const t = p.value[0];
+                    const f = p.value[1];
+                    return `时间：${formatSeconds(t)}<br/>学生专注度：${f.toFixed(2)}%`;
+                },
+                axisPointer: {
+                    type: "cross",
+                    label: { show: false },
+                    crossStyle: { color: "rgba(255,255,255,0.25)", type: "dashed" },
+                },
+            },
+            series: [
+                {
+                    type: "line",
+                    smooth: true,
+                    symbol: "circle",
+                    symbolSize: 15,
+                    showSymbol: false,
+                    showAllSymbol: false,
+                    data,
+                    lineStyle: { color: "#3f7af2", width: 0 },
+                    emphasis: {
+                        itemStyle: { color: "rgb(0,27,254)", borderColor: "#fff", borderWidth: 4 },
+                    },
+                    areaStyle: {
+                        color: {
+                            type: "linear",
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                { offset: 0, color: "rgba(0,27,254,1)" },
+                                { offset: 1, color: "rgba(217,217,217,0)" },
+                            ],
+                        } as LinearGradientColor,
+                    },
+                },
+            ],
+        });
+        // 监听窗口尺寸变化，保持趋势图自适应
+        const onResize = () => {
+            const sn = calcSplitNumber();
+            chart.setOption({ xAxis: { splitNumber: sn } });
+            chart.resize();
+        };
+        onMounted(() => window.addEventListener("resize", onResize));
+        onUnmounted(() => window.removeEventListener("resize", onResize));
+        return { dispose: () => chart.dispose() };
+    }
+    return { initTrendChart };
+}

package/templates/vue-project/tests/setup.ts

@@ -0,0 +1,27 @@
+import { config } from "@vue/test-utils";
+import ElementPlus from "element-plus";
+
+// 全局注册 ElementUI（如果你们用的是 ElementPlus）
+config.global.plugins = [...(config.global.plugins || []), ElementPlus];
+
+// 模拟浏览器 API（如果需要）
+if (!window.matchMedia) {
+    const matchMedia = () => {
+        return {
+            matches: false,
+            media: "",
+            onchange: null,
+            addListener: () => {},
+            removeListener: () => {},
+            addEventListener: () => {},
+            removeEventListener: () => {},
+            dispatchEvent: () => false,
+        };
+    };
+    Object.defineProperty(window, "matchMedia", { writable: true, value: matchMedia });
+    Object.defineProperty(globalThis, "matchMedia", { writable: true, value: matchMedia });
+}
+
+// 未来集成测试时，这里可以初始化 MSW
+// import { setupServer } from 'msw/node'
+// export const server = setupServer()

package/templates/vue-project/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "preserve",
+        "strict": true,
+        "allowJs": false,
+        "types": ["node"],
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        "typeRoots": ["./node_modules/@types", "./src/types"]
+    },
+    "include": ["src", "vite.config.ts"],
+    "exclude": ["node_modules"]
+}

package/templates/vue-project/tsconfig.node.json

@@ -0,0 +1,41 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2023",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "types": ["node"],
+        "skipLibCheck": true,
+
+        /* 核心修复：解决 ts(1259) 报错 */
+        "esModuleInterop": true, // 允许 ESM 和 CommonJS 模块之间的互操作
+        "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中进行默认导入
+
+        /* Bundler 模式与现代路径解析 */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* 路径解析增强：解决 vite.config.ts 中的别名识别（可选建议） */
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+
+        /* Linting 严格检查 */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": [
+        "vite.config.ts",
+        "uno.config.ts",
+        "src/types/**/*.d.ts" // 建议包含类型声明文件目录
+    ]
+}

package/templates/vue-project/uno.config.ts

@@ -0,0 +1,84 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from "unocss";
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+    }),
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+  theme: {
+    colors: {
+      brand: "var(--color-brand)", // 品牌色
+      success: "var(--color-success)", // 成功色
+      warning: "var(--color-warning)", // 警告色
+      danger: "var(--color-danger)", // 危险色
+      info: "var(--color-info)", // 信息色
+
+      "brand-50": "var(--color-brand-50)", // 品牌色50
+      "brand-100": "var(--color-brand-100)", // 品牌色100
+      "brand-200": "var(--color-brand-200)", // 品牌色200
+      "brand-300": "var(--color-brand-300)", // 品牌色300
+      "brand-400": "var(--color-brand-400)", // 品牌色400
+      "brand-500": "var(--color-brand-500)", // 品牌色500
+      "brand-600": "var(--color-brand-600)", // 品牌色600
+      "brand-700": "var(--color-brand-700)", // 品牌色700
+
+      // 语义背景底色
+      "b-base": "var(--bg-base)", // 基础底色
+      "b-muted": "var(--bg-muted)", // 次级底色
+      "b-soft": "var(--bg-soft)", // 柔和底色
+      "b-overlay": "var(--bg-overlay)", // 遮罩
+      "b-brand": "var(--bg-brand)", // 品牌色底色
+      "b-success": "var(--bg-success)", // 成功色底色
+      "b-warning": "var(--bg-warning)", // 警告色底色
+      "b-danger": "var(--bg-danger)", // 危险色底色
+      "b-info": "var(--bg-info-soft)",
+      "b-brand-soft": "var(--bg-brand-soft)", // 品牌色浅色背景
+      "b-success-soft": "var(--bg-success-soft)", // 成功色浅色背景
+      "b-warning-soft": "var(--bg-warning-soft)", // 警告色浅色背景
+      "b-danger-soft": "var(--bg-danger-soft)", // 危险色浅色背景
+      "b-info-soft": "var(--bg-info-soft)", // 信息色浅色背景
+
+      // 边框/分割线
+      border: "var(--border-color)", // 基础边框
+      "border-light": "var(--border-color-light)", // 浅色边框
+      "border-dark": "var(--border-color-dark)", // 深色边框
+      divider: "var(--divider-color)", // 分割线
+
+      // 文字颜色（以 t-* 命名，配合 text-t-primary 等类使用）
+      "t-brand": "var(--text-brand)", // 品牌色
+      "t-primary": "var(--text-primary)", // 主文字
+      "t-regular": "var(--text-regular)", // 常规文字
+      "t-secondary": "var(--text-secondary)", // 次要文字
+      "t-placeholder": "var(--text-placeholder)", // 占位/禁用
+      "t-inverse": "var(--text-inverse)", // 反色文字（深底色上）
+      "t-link": "var(--text-link)", // 链接文字
+      "t-danger": "var(--text-danger)", // 危险文字
+      "t-warning": "var(--text-warning)", // 警告文字
+      "t-success": "var(--text-success)", // 成功文字
+    },
+    // 让数值刻度与 rem 一一对应：1 -> 1rem, 2 -> 2rem ...
+    // 影响：m-/p-/w-/h-/gap-/inset-/space- 等使用 spacing 的工具类，以及 text- 的数值刻度
+    spacing: (() => {
+      const map: Record<string, string> = { "0": "0rem" };
+      for (let i = 1; i <= 200; i++) map[String(i)] = `${i}rem`;
+      return map;
+    })(),
+    fontSize: (() => {
+      const map: Record<string, string> = { "0": "0rem" };
+      for (let i = 1; i <= 200; i++) map[String(i)] = `${i}rem`;
+      return map;
+    })(),
+  },
+});

package/templates/vue-project/vite.config.ts

@@ -0,0 +1,216 @@
+import { loadEnv } from "vite";
+import { defineConfig } from "vitest/config";
+import vue from "@vitejs/plugin-vue";
+import { viteMockServe } from "vite-plugin-mock";
+import { resolve } from "path";
+import viteCompression from "vite-plugin-compression";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import UnoCSS from "unocss/vite";
+
+const devServerUrl1 = "https://bhlecrms.bhlec.com:10023/";
+const devServerUrl2 = "https://bhlecrms.bhlec.com:10023/";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command, mode }) => {
+    const isDev = command === "serve";
+    const env = loadEnv(mode, process.cwd());
+    const useMock = env.VITE_USE_MOCK === "true";
+    return {
+        // 基础路径
+        base: "/teaching",
+
+        // 插件配置
+        plugins: [
+            vue(),
+            UnoCSS(),
+            AutoImport({
+                imports: [
+                    "vue",
+                    {
+                        pinia: ["defineStore", "storeToRefs"],
+                    },
+                ],
+                resolvers: [ElementPlusResolver()],
+                dts: "src/types/auto-imports.d.ts",
+            }),
+            Components({
+                resolvers: [
+                    ElementPlusResolver({
+                        importStyle: "css",
+                    }),
+                ],
+                dts: "src/types/components.d.ts",
+            }),
+            // gzip 压缩插件（仅生产环境）
+            viteCompression({
+                verbose: true, // 是否在控制台输出压缩结果
+                disable: false, // 是否禁用
+                threshold: 10240, // 文件大小超过 10KB 才压缩
+                algorithm: "gzip", // 压缩算法
+                ext: ".gz", // 生成的压缩文件扩展名
+                deleteOriginFile: false, // 是否删除源文件
+            }),
+            // 本地 mock 能力（仅开发环境启用，生产禁用）
+            viteMockServe({
+                mockPath: "src/mocks",
+                enable: isDev && useMock,
+                logger: true,
+                watchFiles: true,
+            }),
+        ],
+
+        // 路径解析别名
+        resolve: {
+            alias: {
+                "@": resolve(__dirname, "src"),
+            },
+            // 省略的扩展名
+            extensions: [".ts", ".tsx", ".js", ".jsx", ".vue", ".json"],
+        },
+
+        // CSS 预处理器配置
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    // 自动导入全局变量文件和 sass:color 模块
+                    additionalData: `@use "sass:color";`,
+                },
+            },
+        },
+
+        // 开发服务器配置
+        server: {
+            port: 3008,
+            open: true, // 启动时自动打开浏览器
+            cors: true, // 允许跨域
+            host: "0.0.0.0", // 设置0.0.0.0可以同时监听localhost和ip，同时防止和webpack端口冲突的问题
+            // 核心配置：确保热更新正常工作
+            hmr: {
+                overlay: true, // 错误时显示遮罩层
+            },
+            // 代理配置
+            proxy: {
+                "/api/base": {
+                    target: devServerUrl1,
+                    changeOrigin: true,
+                    ws: true, // 支持 WebSocket
+                },
+                "/api/aice": {
+                    target: devServerUrl2,
+                    changeOrigin: true,
+                    ws: true,
+                },
+                "/api/cas": {
+                    target: devServerUrl2,
+                    changeOrigin: true,
+                    ws: true,
+                },
+                "/api/tsms": {
+                    target: devServerUrl2,
+                    changeOrigin: true,
+                    ws: true,
+                },
+                "/api/rms": {
+                    target: devServerUrl2,
+                    changeOrigin: true,
+                    ws: true,
+                },
+                "/api/aidas": {
+                    target: devServerUrl2,
+                    changeOrigin: true,
+                    ws: true,
+                },
+                "/analysis": {
+                    target: "http://172.17.31.80:8011",
+                    changeOrigin: true,
+                    ws: true,
+                },
+                "/stream": {
+                    target: devServerUrl2,
+                    ws: true,
+                    changeOrigin: true,
+                },
+                "/ppt": {
+                    target: devServerUrl2,
+                    ws: true,
+                    changeOrigin: true,
+                },
+                "/api": {
+                    target: devServerUrl1,
+                    ws: true,
+                    changeOrigin: true,
+                },
+            },
+        },
+
+        // 构建配置
+        build: {
+            // 输出目录
+            outDir: "dist",
+            // 静态资源目录
+            assetsDir: "static",
+            // 生产环境不生成 source map
+            sourcemap: false,
+            // chunk 大小警告的限制（单位 KB）
+            chunkSizeWarningLimit: 1500,
+            // rollup 打包配置
+            rollupOptions: {
+                output: {
+                    // 代码分割策略
+                    manualChunks: {
+                        // 将 Vue 相关库单独打包
+                        vue: ["vue", "vue-router"],
+                        // 将 Element Plus 单独打包
+                        "element-plus": ["element-plus"],
+                    },
+                    // 静态资源命名
+                    chunkFileNames: "static/js/[name]-[hash].js",
+                    entryFileNames: "static/js/[name]-[hash].js",
+                    assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+                },
+            },
+            // 压缩配置
+            minify: "terser",
+            terserOptions: {
+                compress: {
+                    // 生产环境移除 console
+                    drop_console: true,
+                    drop_debugger: true,
+                    pure_funcs: ["console.log"],
+                },
+            },
+        },
+
+        // 全局常量定义
+        define: {
+            __VUE_OPTIONS_API__: JSON.stringify(true),
+            __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
+            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false),
+        },
+
+        // 优化依赖预构建
+        optimizeDeps: {
+            include: ["vue", "vue-router", "element-plus"],
+        },
+
+        test: {
+            // 单元测试配置
+            globals: true,
+            environment: "jsdom",
+            setupFiles: "./tests/setup.ts", // 测试前的全局配置
+
+            // 覆盖率配置
+            coverage: {
+                provider: "v8",
+                reporter: ["text", "html", "json"],
+                include: ["src/**/*.{js,ts,vue}"],
+                exclude: ["src/main.ts", "src/**/*.d.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+            },
+
+            // 为未来集成测试预留的配置
+            testTimeout: 10000,
+        },
+    };
+});