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

<div>
    <div class="space-y-4">
        {{-- 控制栏 --}}
        <div class="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-center gap-2">
                <button
                    wire:click="refreshNetwork"
                    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($networkData['nodes']))
                {{-- 这里将嵌入网络可视化库（如 vis.js、D3.js 等） --}}
                <div id="knowledge-network-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">
                        @foreach($networkData['groups'] ?? [] as $groupId => $group)
                            <div class="flex items-center gap-2">
                                <div class="w-3 h-3 rounded-full" style="background-color: {{ $group['color'] ?? '#999' }}"></div>
                                <span class="text-gray-600 dark:text-gray-400">{{ $group['name'] }}</span>
                            </div>
                        @endforeach
                    </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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                        </svg>
                        <p class="mt-2">暂无网络数据</p>
                    </div>
                </div>
            @endif
        </div>

        {{-- 网络统计 --}}
        @if(!empty($networkData['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-blue-600 dark:text-blue-400">
                            {{ count(array_filter($networkData['nodes'], fn($node) => $node['type'] === 'knowledge_point')) }}
                        </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(array_filter($networkData['nodes'], fn($node) => $node['type'] === 'skill')) }}
                        </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-purple-600 dark:text-purple-400">
                            {{ count($networkData['links']) }}
                        </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-indigo-600 dark:text-indigo-400">
                            @php
                                $totalQuestions = 0;
                                foreach($networkData['nodes'] as $node) {
                                    $totalQuestions += $node['question_count'] ?? 0;
                                }
                            @endphp
                            {{ $totalQuestions }}
                        </div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">关联题目</div>
                    </div>
                </div>
            </div>
        @endif

        {{-- 节点详情 --}}
        @if(!empty($selectedNode))
            <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('selectedNode', 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">{{ $selectedNode['name'] }}</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">{{ $selectedNode['type'] }}</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">{{ $selectedNode['group'] }}</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">{{ $selectedNode['question_count'] ?? 0 }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
        @endif

        {{-- 关联列表 --}}
        @if(!empty($networkData['links']))
            <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="space-y-2 max-h-96 overflow-y-auto">
                    @foreach(array_slice($networkData['links'], 0, 20) as $link)
                        <div class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-50 dark:bg-gray-700">
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $link['source'] }}</span>
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $link['target'] }}</span>
                            </div>
                            <span class="text-xs text-gray-500 dark:text-gray-400">{{ $link['type'] }}</span>
                        </div>
                    @endforeach

                    @if(count($networkData['links']) > 20)
                        <div class="text-center text-sm text-gray-500 dark:text-gray-400 pt-2">
                            还有 {{ count($networkData['links']) - 20 }} 个关联...
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    // 这里将添加网络可视化逻辑
    document.addEventListener('livewire:initialized', () => {
        Livewire.on('networkDataUpdated', (data) => {
            updateNetworkVisualization(data);
        });
    });

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