math_cms/resources/views/filament/pages/integrations/knowledge-graph-explorer.blade.php

<x-filament-panels::page>
    <div class="space-y-6">
        {{-- 页面标题 --}}
        <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>
                <div class="flex items-center gap-2">
                    <a
                        href="{{ url('admin/knowledge-graph-integration') }}"
                        class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                        </svg>
                        综合视图
                    </a>
                    <a
                        href="{{ url('admin/knowledge-mindmap') }}"
                        class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                        </svg>
                        原始脑图
                    </a>
                </div>
            </div>
        </div>

        {{-- 完全复用原版知识图谱代码 --}}
        <div
            class="rounded-2xl border border-slate-200 shadow-sm bg-white text-slate-900 knowledge-mindmap-card"
            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 || [],
                        };

                        // 不再需要通知Livewire，直接在Alpine中处理
                        // selectedNode 已在上面设置完成
                    });
                },

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

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

                        this.graphInstance = new window.KnowledgeMindmapGraph({
                            containerId: 'knowledge-graph-viz',
                            livewireMethod: null,  // 不使用自动调用，由Alpine手动处理
                            livewireId: this.livewireId,
                            emitSelection: true,
                            highlightLowMastery: false,
                        });
                        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="relative overflow-hidden rounded-2xl border border-slate-200 shadow-sm bg-white text-slate-900">
                <div
                    wire:ignore
                    id="knowledge-graph-viz"
                    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>
        </div>

        {{-- 知识点详情面板 --}}
        <template x-if="selectedNode && selectedNode.code !== 'root'">
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                {{-- 知识点标题 --}}
                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100" x-text="selectedNode.label || selectedNode.code"></h3>
                            <div class="mt-1 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                                <span x-text="selectedNode.code"></span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 统计概览 --}}
                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">-</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">总题目数</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-green-600 dark:text-green-400">-</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">直接题目</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">-</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">子知识点题目</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">-</div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">技能点题目</div>
                        </div>
                    </div>
                </div>

                {{-- 标签页导航 --}}
                <div class="px-6 border-b border-gray-200 dark:border-gray-700">
                    <nav class="flex space-x-8" aria-label="Tabs">
                        <span class="border-indigo-500 text-indigo-600 dark:text-indigo-400 py-4 px-1 border-b-2 font-medium text-sm">
                            知识点详情
                        </span>
                    </nav>
                </div>

                {{-- 标签页内容 --}}
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">技能要点</h4>
                            <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="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200" x-text="skill"></span>
                                    </template>
                                </template>
                                <span x-show="!selectedNode.skills || !selectedNode.skills.length" class="text-sm text-gray-500 dark:text-gray-400">暂无技能要点</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        {{-- 统计信息 --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">使用说明</span>
                </div>
                <div class="flex gap-4 text-sm text-gray-600 dark:text-gray-400">
                    <div class="flex items-center gap-1">
                        <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                        <span>知识点</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        <span>已掌握</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <span>需加强</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>

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

    .g6-grid {
        opacity: 0.08;
    }
</style>
<script src="https://unpkg.com/@antv/g6@4.8.24/dist/g6.min.js"></script>
@endpush

@push('scripts')
{{-- 加载现有的知识图谱可视化类 --}}
<script src="{{ asset('js/g6-custom-node.js') }}"></script>
<script src="{{ asset('js/knowledge-mindmap-graph.js') }}"></script>

<script>
    document.addEventListener('livewire:initialized', () => {
        // 监听错误事件
        Livewire.on('error', (event) => {
            console.error('Error:', event.message);
        });

        // 节点选择事件
        Livewire.on('nodeSelected', (event) => {
            console.log('Node selected:', event);
        });
    });
</script>
@endpush