math_cms/resources/views/livewire/integrations/knowledge-graph-component.blade.php

<div>
    <div class="space-y-4">
        {{-- 控制栏 --}}
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <button
                    wire:click="toggleStats"
                    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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                    {{ $showStats ? '隐藏' : '显示' }}统计
                </button>

                <button
                    wire:click="refreshGraph"
                    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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    刷新
                </button>
            </div>

            <div class="text-sm text-gray-500 dark:text-gray-400">
                @if($selectedKpCode)
                    当前选中: <span class="font-medium">{{ $selectedKpCode }}</span>
                @else
                    全图模式
                @endif
            </div>
        </div>

        {{-- 图谱可视化区域 --}}
        <div class="relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700" style="height: 600px;">
            @if($isLoading)
                <div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80 z-10">
                    <div class="flex items-center gap-3">
                        <svg class="animate-spin h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="text-gray-600 dark:text-gray-300">加载知识图谱...</span>
                    </div>
                </div>
            @endif

            @if(!empty($graphData['nodes']))
                {{-- 这里将嵌入图谱可视化库（如 D3.js、vis.js 等） --}}
                <div id="knowledge-graph-viz" class="w-full h-full"></div>

                {{-- 图例 --}}
                <div class="absolute top-4 right-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-lg">
                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">图例</h4>
                    <div class="space-y-2 text-xs">
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                            <span class="text-gray-600 dark:text-gray-400">知识点</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 rounded bg-green-500"></div>
                            <span class="text-gray-600 dark:text-gray-400">题库</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                            <span class="text-gray-600 dark:text-gray-400">技能点</span>
                        </div>
                    </div>
                </div>
            @else
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7"></path>
                        </svg>
                        <p class="mt-2">暂无知识图谱数据</p>
                    </div>
                </div>
            @endif
        </div>

        {{-- 统计信息 --}}
        @if($showStats && !empty($graphData['nodes']))
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">图谱统计</h3>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ count($graphData['nodes']) }}</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">知识点</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ count($graphData['edges']) }}</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">关联关系</div>
                    </div>
                    <div class="text-center">
                        @php
                            $totalQuestions = 0;
                            foreach($graphData['nodes'] as $node) {
                                $totalQuestions += $node['question_count'] ?? 0;
                            }
                        @endphp
                        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $totalQuestions }}</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">关联题目</div>
                    </div>
                    <div class="text-center">
                        @php
                            $totalSkills = 0;
                            foreach($graphData['nodes'] as $node) {
                                $totalSkills += $node['skills_count'] ?? 0;
                            }
                        @endphp
                        <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ $totalSkills }}</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">技能点</div>
                    </div>
                </div>
            </div>
        @endif

        {{-- 节点详情 --}}
        @if(!empty($selectedNodeData))
            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">节点详情</h3>
                    <button
                        wire:click="$set('selectedNodeData', null)"
                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">基本信息</h4>
                        <dl class="space-y-2 text-sm">
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">名称:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['cn_name'] ?? $selectedNodeData['kp_code'] }}</dd>
                            </div>
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">代码:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['kp_code'] }}</dd>
                            </div>
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">学段:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['phase'] ?? '-' }}</dd>
                            </div>
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">类别:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['category'] ?? '-' }}</dd>
                            </div>
                        </dl>
                    </div>

                    <div>
                        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">统计信息</h4>
                        <dl class="space-y-2 text-sm">
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">题目数:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['question_count'] ?? 0 }}</dd>
                            </div>
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">技能数:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['skills_count'] ?? 0 }}</dd>
                            </div>
                            <div class="flex">
                                <dt class="w-24 text-gray-500 dark:text-gray-400">重要度:</dt>
                                <dd class="text-gray-900 dark:text-gray-100">{{ $selectedNodeData['importance'] ?? 0 }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>

                @if(!empty($selectedNodeData['skills']))
                    <div class="mt-4">
                        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">技能列表</h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach($selectedNodeData['skills'] as $skill)
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
                                    {{ $skill['skill_name'] ?? $skill['skill_code'] ?? 'Unknown' }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    // 这里将添加图谱可视化逻辑
    // 使用 vis.js 或 D3.js 实现交互式图谱
    document.addEventListener('livewire:initialized', () => {
        // 监听数据变化并更新可视化
        Livewire.on('graphDataUpdated', (data) => {
            updateVisualization(data);
        });
    });

    function updateVisualization(data) {
        // 实现图谱更新逻辑
        console.log('Updating graph visualization:', data);
    }
</script>
@endpush