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() }}',

            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,
                    });
                    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="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>

        <x-mindmap.detail-drawer
            :open="$drawerOpen"
            :details="$nodeDetails"
            closeAction="closeDrawer"
            selectAction="openDrawer"
            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>