math_cms/resources/views/filament/pages/knowledge-mindmap.blade.php

<x-filament::page>
    <div
        class="space-y-6 bg-white p-4 rounded-xl"
        x-data="{
            graphInstance: null,
            stats: { nodes: 0, extraEdges: 0 },
            livewireId: '{{ $this->getId() }}',
            selectedNode: null,
            initEventListener() {
                window.addEventListener('mindmap-node-selected', (evt) => {
                    const model = evt.detail || {};
                    const code = model?.meta?.code || model?.id;
                    const mastery = model?.meta?.mastery_level ?? this.graphInstance?.masteryData?.[code]?.mastery_level ?? 0;
                    const accuracy = model?.meta?.accuracy_rate ?? this.graphInstance?.masteryData?.[code]?.accuracy_rate ?? null;
                    const attempts = model?.meta?.total_attempts ?? this.graphInstance?.masteryData?.[code]?.total_attempts ?? null;
                    this.selectedNode = {
                        id: model?.id,
                        code,
                        label: model?.label,
                        mastery,
                        accuracy,
                        attempts,
                        recommended: model?.meta?.recommended ?? false,
                        skills: model?.meta?.skills || this.graphInstance?.masteryData?.[code]?.skills || [],
                    };
                });
            },

            async initMindmap() {
                try {
                    // 等待G6和自定义组件加载
                    await this.waitForComponents();

                    if (!window.G6 || !window.KnowledgeMindmapGraph) {
                        console.error('G6组件未加载');
                        return;
                    }

                    this.graphInstance = new window.KnowledgeMindmapGraph({
                        containerId: 'knowledge-mindmap',
                        livewireMethod: 'openDrawer',
                        highlightLowMastery: true,
                        livewireId: this.livewireId,
                        onNodeSelect: (model) => {
                            const code = model?.meta?.code || model?.id;
                            const mastery = model?.meta?.mastery_level ?? this.graphInstance?.masteryData?.[code]?.mastery_level ?? 0;
                            const accuracy = model?.meta?.accuracy_rate ?? this.graphInstance?.masteryData?.[code]?.accuracy_rate ?? null;
                            const attempts = model?.meta?.total_attempts ?? this.graphInstance?.masteryData?.[code]?.total_attempts ?? null;
                            this.selectedNode = {
                                id: model?.id,
                                code,
                                label: model?.label,
                                mastery,
                                accuracy,
                                attempts,
                                recommended: model?.meta?.recommended ?? false,
                                skills: model?.meta?.skills || this.graphInstance?.masteryData?.[code]?.skills || [],
                            };
                        },
                    });
                    await this.graphInstance.init();
                    this.stats = this.graphInstance.stats;
                } catch (error) {
                    console.error('知识图谱初始化失败:', error);
                }
            },

            async waitForComponents() {
                let attempts = 0;
                const maxAttempts = 50;

                while ((!window.G6 || !window.KnowledgeMindmapGraph) && attempts < maxAttempts) {
                    await new Promise(resolve => setTimeout(resolve, 100));
                    attempts++;
                }

                if (attempts >= maxAttempts) {
                    throw new Error('G6组件加载超时');
                }
            }
        }"
        x-init="initEventListener(); initMindmap()"
        data-knowledge-mindmap-root
    >
        <div class="rounded-xl border border-slate-200 bg-white shadow-sm p-5">
            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div class="space-y-2 text-slate-900">
                    <h2 class="text-3xl font-bold">初中数学知识图谱</h2>
                    <p class="text-lg text-slate-600">掌握度、互动与视觉反馈同步升级，点击任意节点查看学习路径与练习推荐。</p>
                    <div class="flex flex-wrap items-center gap-4 text-base text-slate-600">
                        <span>知识点 <span class="font-semibold text-slate-900" x-text="stats.nodes"></span></span>
                        <span>额外关联 <span class="font-semibold text-slate-900" x-text="stats.extraEdges"></span></span>
                        <span>已选学生：<span class="font-semibold text-slate-900">{{ $selectedStudentName ?: '未选择' }}</span></span>
                    </div>
                </div>
                <div class="grid w-full max-w-xl grid-cols-1 gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4 sm:grid-cols-2 text-slate-900">
                    <div>
                        <label class="mb-1 block text-base font-medium text-slate-700">选择老师</label>
                        <select
                            wire:model.live="selectedTeacherId"
                            class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-base text-slate-900 placeholder:text-slate-500 focus:border-sky-300 focus:ring-2 focus:ring-sky-200/50"
                        >
                            <option value="" class="text-slate-800">请选择老师...</option>
                            @foreach($teachers as $teacher)
                                <option value="{{ $teacher['teacher_id'] }}" class="text-slate-900">{{ $teacher['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1 block text-base font-medium text-slate-700">选择学生</label>
                        <select
                            wire:model.live="selectedStudentId"
                            class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-base text-slate-900 placeholder:text-slate-500 focus:border-amber-300 focus:ring-2 focus:ring-amber-200/50"
                            {{ empty($selectedTeacherId) ? 'disabled' : '' }}
                        >
                            <option value="" class="text-slate-800">
                                {{ empty($selectedTeacherId) ? '请先选择老师...' : '请选择学生...' }}
                            </option>
                            @foreach($students as $student)
                                <option value="{{ $student['student_id'] }}" class="text-slate-900">{{ $student['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden rounded-2xl border border-slate-200 shadow-sm bg-white text-slate-900 knowledge-mindmap-card">
            <div
                wire:ignore
                id="knowledge-mindmap"
                class="knowledge-mindmap-canvas relative h-[82vh] min-h-[720px] w-full"
            >
                <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.08),transparent_40%),radial-gradient(circle_at_80%_60%,rgba(255,255,255,0.06),transparent_45%)]"></div>
            </div>
        </div>

        <template x-if="selectedNode">
            <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-3">
                <div class="lg:col-span-2 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-sm text-slate-500">选中知识点</p>
                            <h3 class="text-xl font-semibold text-slate-900" x-text="selectedNode.label || selectedNode.code"></h3>
                            <p class="text-sm text-slate-500 mt-1" x-text="`ID: ${selectedNode.id || ''} · Code: ${selectedNode.code || ''}`"></p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-slate-500">掌握度</p>
                            <p class="text-2xl font-bold" x-text="(selectedNode.mastery * 100).toFixed(1) + '%'"></p>
                            <p class="text-xs text-slate-500" x-show="selectedNode.accuracy">准确率 <span x-text="(selectedNode.accuracy * 100).toFixed(1) + '%'"></span></p>
                            <p class="text-xs text-slate-500" x-show="selectedNode.attempts">练习次数 <span x-text="selectedNode.attempts"></span></p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <p class="text-sm font-semibold text-slate-700 mb-2">技能要点</p>
                        <div class="flex flex-wrap gap-2">
                            <template x-if="selectedNode.skills && selectedNode.skills.length">
                                <template x-for="skill in selectedNode.skills" :key="skill">
                                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700" x-text="skill"></span>
                                </template>
                            </template>
                            <span x-show="!selectedNode.skills || !selectedNode.skills.length" class="text-sm text-slate-500">暂无技能要点</span>
                        </div>
                        <div class="mt-4">
                            <a
                                class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700"
                                :href="selectedNode.code ? `/admin/knowledge-point-detail?kp_code=${encodeURIComponent(selectedNode.code)}` : '#'"
                                target="_blank"
                            >
                                查看知识点详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm space-y-2">
                    <p class="text-sm font-semibold text-slate-700">快速信息</p>
                    <div class="text-sm text-slate-600 space-y-1">
                        <p><span class="font-medium text-slate-900">ID：</span><span x-text="selectedNode.id"></span></p>
                        <p><span class="font-medium text-slate-900">Code：</span><span x-text="selectedNode.code"></span></p>
                        <p><span class="font-medium text-slate-900">推荐关注：</span><span x-text="selectedNode.recommended ? '是' : '否'"></span></p>
                    </div>
                </div>
            </div>
        </template>

        <x-mindmap.detail-drawer
            :open="$drawerOpen"
            :details="$nodeDetails"
            panelTitle="知识点详情"
        />
    </div>

    @push('styles')
        <style>
            .knowledge-mindmap-canvas {
                background: #ffffff;
                color: #0f172a;
            }

            .g6-grid {
                opacity: 0.08;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.8.24/dist/g6.min.js"></script>
        <script src="{{ asset('js/g6-custom-node.js') }}"></script>
        <script src="{{ asset('js/knowledge-mindmap-graph.js') }}"></script>
    @endpush
</x-filament::page>