bohui-vue 1.0.1

package/templates/vue-project/src/utils/window.ts

@@ -0,0 +1,132 @@
+/**
+ * 解析 URL 中的所有字段（同时支持 query 与 hash 中的 query）
+ * @param url 需要解析的浏览器访问地址字符串
+ * @returns 字段键值对对象，若不存在返回空对象
+ * @example
+ * getAllFieldsFromUrl('http://host/app?token=abc#/#/course?name=math&token=xyz')
+ * // { token: 'xyz', name: 'math' }  // hash 中的同名字段覆盖主 query
+ */
+export function getAllFieldsFromUrl(url: string): Record<string, string> {
+    const result: Record<string, string> = {};
+    const parseParams = (query: string) => {
+        const params = new URLSearchParams(query);
+        params.forEach((value, key) => {
+            result[key] = value;
+        });
+    };
+    let u: URL | null = null;
+    try {
+        u = new URL(url);
+    } catch {
+        try {
+            u = new URL(url, window.location.origin);
+        } catch {
+            u = null;
+        }
+    }
+    if (u) {
+        if (u.search) parseParams(u.search);
+        if (u.hash) {
+            const hash = u.hash.startsWith("#") ? u.hash.slice(1) : u.hash;
+            const idx = hash.indexOf("?");
+            if (idx !== -1) parseParams(hash.slice(idx));
+        }
+        return result;
+    }
+    const qIdx = url.indexOf("?");
+    const hIdx = url.indexOf("#");
+    if (qIdx !== -1) {
+        const end = hIdx !== -1 ? hIdx : url.length;
+        parseParams(url.slice(qIdx, end));
+    }
+    if (hIdx !== -1) {
+        const hash = url.slice(hIdx + 1);
+        const idx = hash.indexOf("?");
+        if (idx !== -1) parseParams(hash.slice(idx));
+    }
+    return result;
+}
+
+/**
+ * 从 URL 中获取指定字段的值
+ * @param url 浏览器访问地址字符串
+ * @param key 需要获取的字段名
+ * @returns 字段值，若不存在返回 null
+ */
+export function getFieldFromUrl(url: string, key: string): string | null {
+    const all = getAllFieldsFromUrl(url);
+    return key in all ? all[key] : null;
+}
+
+/**
+ * 从 URL 中移除指定字段（支持从主 query 与 hash query 中移除）并返回新的地址
+ * @param url 原始地址字符串
+ * @param keys 需要移除的字段名（字符串或字符串数组）
+ * @returns 处理后的新地址字符串
+ * @example
+ * removeFieldsFromUrl('http://host/app?token=abc#/#/course?name=math&token=xyz', ['token'])
+ * // 'http://host/app#/#/course?name=math'
+ */
+export function removeFieldsFromUrl(url: string, keys: string | string[]): string {
+    const toDelete = Array.isArray(keys) ? keys : [keys];
+    let u: URL | null = null;
+    try {
+        u = new URL(url);
+    } catch {
+        try {
+            u = new URL(url, window.location.origin);
+        } catch {
+            u = null;
+        }
+    }
+    if (u) {
+        toDelete.forEach((k) => u!.searchParams.delete(k));
+        const hash = u.hash ? u.hash.slice(1) : "";
+        if (hash) {
+            const qIdx = hash.indexOf("?");
+            if (qIdx !== -1) {
+                const base = hash.slice(0, qIdx);
+                const q = hash.slice(qIdx + 1);
+                const params = new URLSearchParams(q);
+                toDelete.forEach((k) => params.delete(k));
+                const qs = params.toString();
+                u.hash = qs ? `#${base}?${qs}` : `#${base}`;
+            }
+        }
+        const qs = u.searchParams.toString();
+        u.search = qs ? `?${qs}` : "";
+        return u.toString();
+    }
+    const qIdx = url.indexOf("?");
+    const hIdx = url.indexOf("#");
+    let base = url;
+    let query = "";
+    let hash = "";
+    if (qIdx !== -1) {
+        base = url.slice(0, qIdx);
+        const end = hIdx !== -1 ? hIdx : url.length;
+        query = url.slice(qIdx + 1, end);
+    }
+    if (hIdx !== -1) {
+        hash = url.slice(hIdx + 1);
+    }
+    if (query) {
+        const params = new URLSearchParams(query);
+        toDelete.forEach((k) => params.delete(k));
+        query = params.toString();
+    }
+    if (hash) {
+        const idx = hash.indexOf("?");
+        if (idx !== -1) {
+            const hBase = hash.slice(0, idx);
+            const hQuery = hash.slice(idx + 1);
+            const hParams = new URLSearchParams(hQuery);
+            toDelete.forEach((k) => hParams.delete(k));
+            const hQs = hParams.toString();
+            hash = hQs ? `${hBase}?${hQs}` : hBase;
+        }
+    }
+    const qs = query ? `?${query}` : "";
+    const hs = hash ? `#${hash}` : "";
+    return `${base}${qs}${hs}`;
+}

package/templates/vue-project/src/views/home/Home.vue

@@ -0,0 +1,60 @@
+<template>
+    <div id="HomePage">
+        <div class="home-page-content">
+            <div @click="logout">退出登录</div>
+            <el-input
+                ref="inputRef"
+                v-model="searchText"
+                placeholder="请输入搜索内容"
+            />
+            <div @click="focusInput">聚焦输入框</div>
+            <BarChart :bar-chart-data="BarChartTestData" />
+            <router-view />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useUserAuth } from "@/views/home/composables/useUserAuth";
+import BarChart from "@/components/BarChart.vue";
+
+// 柱状图测试数据
+const BarChartTestData = {
+    title: "这个是图表的标题",
+    categories: ["出勤率", "前排就座率", "学习专注度", "课堂活跃度"],
+    barWidth: 20,
+    series: [
+        { name: "最新课堂", color: "#22C798", values: [80, 15, 65, 15] },
+        { name: "本班平均", color: "#8979FF", values: [64, 76, 70, 37] },
+    ],
+};
+
+/**
+ * 用户登入退出
+ */
+const { logout } = useUserAuth();
+
+/**
+ * 搜索内容
+ */
+const searchText = ref("");
+const inputRef = ref<ElementPlus.InputInstanceType | null>(null);
+
+function focusInput() {
+    inputRef.value?.focus?.();
+}
+</script>
+
+<style scoped lang="scss">
+#HomePage {
+    width: 100%;
+    height: 100%;
+    background: url("@/assets/images/bg.png") no-repeat center center;
+    background-size: cover;
+}
+
+.home-page-content {
+    width: 100%;
+    height: 100%;
+}
+</style>

package/templates/vue-project/src/views/home/composables/useUserAuth.ts

@@ -0,0 +1,13 @@
+import { useUserStore } from "@/store";
+
+export type UseUserAuthReturn = {
+    logout: () => void;
+    fetchUserInfo: () => void;
+};
+
+export const useUserAuth = (): UseUserAuthReturn => {
+    const store = useUserStore();
+    const logout = () => store.logout();
+    const fetchUserInfo = () => store.setUserInfo();
+    return { logout, fetchUserInfo };
+};

package/templates/vue-project/src/views/teachingLog/TeachingLog.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="teaching-log-page">
+        <TeachingEffect :lesson-code="lessonCode" />
+        <TeachingHighlight :lesson-code="lessonCode" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import TeachingEffect from "./components/TeachingEffect.vue";
+import TeachingHighlight from "./components/TeachingHighlight.vue";
+
+const lessonCode = window.DataConfig?.lessonCode || "";
+</script>
+
+<style scoped lang="scss">
+.teaching-log-page {
+    background-color: #101012;
+    height: 100%;
+    padding: 4rem 4rem;
+    overflow: auto;
+    scrollbar-color: #2b2f36 #0f1114;
+    scrollbar-width: none;
+}
+@media screen and (max-width: 640px) {
+    .teaching-log-page {
+        padding: 0;
+    }
+}
+/* WebKit */
+:global(::-webkit-scrollbar-track) {
+    background-color: #0f1114;
+}
+:global(::-webkit-scrollbar-thumb) {
+    background-color: #2b2f36;
+    border-radius: 6px;
+}
+:global(::-webkit-scrollbar-thumb:hover) {
+    background-color: #434953;
+}
+</style>

package/templates/vue-project/src/views/teachingLog/__tests__/TeachingEffect.test.ts

@@ -0,0 +1,96 @@
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { describe, expect, it, vi } from "vitest";
+
+type InitTrendChart = (el: HTMLElement, trend: Array<[number, number]>) => { dispose: () => void };
+const initTrendChartMock = vi.fn<InitTrendChart>(() => ({ dispose: vi.fn() }));
+vi.mock("../composables/useEffectTrendChart", () => {
+    return {
+        useEffectTrendChart: () => ({
+            initTrendChart: initTrendChartMock,
+        }),
+    };
+});
+
+function setDataConfig(data: unknown) {
+    (window as unknown as { DataConfig?: unknown }).DataConfig = data;
+}
+
+describe("TeachingEffect", () => {
+    it("renders stats, trend call args, and tooltip", async () => {
+        setDataConfig({
+            teachingEffect: {
+                attendanceData: {
+                    attendanceStudentNum: 40,
+                    attendanceStudentRate: 0.8,
+                    frontRowSeats: 10,
+                    frontStudentNum: 12,
+                    frontStudentRate: 0.3,
+                    lateNum: 0,
+                    leaveEarlyNum: 0,
+                    lessonCode: "",
+                    shouldStudentNum: 50,
+                    totalStudentSeats: 50,
+                },
+                overviewData: {
+                    attendanceNum: 40,
+                    attendanceRate: 0.8,
+                    focusAvg: 0.4567,
+                    heighFocus: 0,
+                    heighPerformanceTeachingTimeRangePercentage: 0,
+                    lowFocus: 0,
+                    lowPerformanceTeachingTimeRangePercentage: 0,
+                },
+                focusTrendData: [
+                    {
+                        order: 2,
+                        focusAvg: 0.2,
+                        speechSpeed: 0,
+                        teachingContent: "",
+                        teachingSession: "",
+                    },
+                    {
+                        order: 1,
+                        focusAvg: 0.1,
+                        speechSpeed: 0,
+                        teachingContent: "",
+                        teachingSession: "",
+                    },
+                ],
+                focusDecrease: [
+                    { time: "00:03:00", focus: 10, description: "下降点说明", image: "x" },
+                ],
+            },
+        });
+
+        vi.resetModules();
+        const { default: TeachingEffect } = await import("../components/TeachingEffect.vue");
+
+        const wrapper = mount(TeachingEffect, { props: { lessonCode: "" } });
+        await nextTick();
+        await nextTick();
+
+        expect(wrapper.text()).toContain("教学效果");
+        expect(wrapper.text()).toContain("学生出勤率");
+        expect(wrapper.text()).toContain("80.00%");
+        expect(wrapper.text()).toContain("前排就座率");
+        expect(wrapper.text()).toContain("30.00%");
+        expect(wrapper.text()).toContain("平均专注度");
+        expect(wrapper.text()).toContain("45.67%");
+
+        expect(initTrendChartMock).toHaveBeenCalledTimes(1);
+        const trendArg = initTrendChartMock.mock.calls[0][1];
+        expect(trendArg).toEqual([
+            [60, 10],
+            [120, 20],
+        ]);
+
+        const declineImage = wrapper.find(".timeline-image");
+        expect(declineImage.exists()).toBe(true);
+        await declineImage.trigger("mouseenter");
+        await nextTick();
+
+        expect(wrapper.find(".tooltip-popup").exists()).toBe(true);
+        expect(wrapper.find(".tooltip-content").text()).toContain("下降点说明");
+    });
+});

package/templates/vue-project/src/views/teachingLog/__tests__/TeachingHighlight.test.ts

@@ -0,0 +1,66 @@
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { describe, expect, it, vi } from "vitest";
+
+function setDataConfig(data: unknown) {
+    (window as unknown as { DataConfig?: unknown }).DataConfig = data;
+}
+
+describe("TeachingHighlight", () => {
+    it("renders time chips and switches active item", async () => {
+        setDataConfig({
+            performanceAnalyzeData: {
+                upReasonAnalyze: [
+                    {
+                        id: 1,
+                        lessonCode: "",
+                        createTime: Date.now(),
+                        startTime: 60_000,
+                        endTime: 120_000,
+                        startOrder: 1,
+                        endOrder: 2,
+                        startFocus: 0.1234,
+                        endFocus: 0.5678,
+                        trendReason: "第一段原因",
+                    },
+                    {
+                        id: 2,
+                        lessonCode: "",
+                        createTime: Date.now(),
+                        startTime: 180_000,
+                        endTime: 240_000,
+                        startOrder: 3,
+                        endOrder: 4,
+                        startFocus: 0.2,
+                        endFocus: 0.9,
+                        trendReason: "第二段原因",
+                    },
+                ],
+            },
+        });
+
+        vi.resetModules();
+        const { default: TeachingHighlight } = await import("../components/TeachingHighlight.vue");
+
+        const wrapper = mount(TeachingHighlight, { props: { lessonCode: "" } });
+        await nextTick();
+
+        const chips = wrapper.findAll(".time-chip");
+        expect(chips.length).toBe(2);
+        expect(chips[0].classes()).toContain("active");
+
+        expect(wrapper.text()).toContain("专注度从");
+        expect(wrapper.text()).toContain("12.34%");
+        expect(wrapper.text()).toContain("56.78%");
+        expect(wrapper.text()).toContain("第一段原因");
+
+        await chips[1].trigger("click");
+        await nextTick();
+
+        expect(chips[1].classes()).toContain("active");
+        expect(wrapper.text()).toContain("20%");
+        expect(wrapper.text()).toContain("90%");
+        expect(wrapper.text()).toContain("第二段原因");
+    });
+});
+

package/templates/vue-project/src/views/teachingLog/__tests__/TeachingLog.test.ts

@@ -0,0 +1,34 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+function setDataConfig(data: unknown) {
+    (window as unknown as { DataConfig?: unknown }).DataConfig = data;
+}
+
+describe("TeachingLog page", () => {
+    it("passes lessonCode from window.DataConfig to child components", async () => {
+        setDataConfig({ lessonCode: "LESSON_001" });
+
+        vi.resetModules();
+        const { default: TeachingLog } = await import("../TeachingLog.vue");
+
+        const wrapper = mount(TeachingLog, {
+            global: {
+                stubs: {
+                    TeachingEffect: {
+                        props: ["lessonCode"],
+                        template: '<div data-test="effect">{{ lessonCode }}</div>',
+                    },
+                    TeachingHighlight: {
+                        props: ["lessonCode"],
+                        template: '<div data-test="highlight">{{ lessonCode }}</div>',
+                    },
+                },
+            },
+        });
+
+        expect(wrapper.find('[data-test="effect"]').text()).toBe("LESSON_001");
+        expect(wrapper.find('[data-test="highlight"]').text()).toBe("LESSON_001");
+    });
+});
+