math_cms/resources/views/livewire/integrations/knowledge-point-details.blade.php

<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
    @if(!$nodeDetails)
        {{-- 空状态 --}}
        <div class="p-8 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            <p class="mt-2">点击知识图谱中的节点查看详细信息</p>
        </div>
    @else
        {{-- 知识点标题 --}}
        <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">
                        {{ $nodeDetails['cn_name'] ?? $nodeDetails['kp_code'] ?? $nodeDetails['code'] ?? '未知知识点' }}
                    </h3>
                    <div class="mt-1 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                        <span>{{ $nodeDetails['kp_code'] ?? $nodeDetails['code'] ?? $selectedNode }}</span>
                        @if($nodeDetails['phase'])
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                {{ $nodeDetails['phase'] }}
                            </span>
                        @endif
                        @if($nodeDetails['category'])
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                {{ $nodeDetails['category'] }}
                            </span>
                        @endif
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500 dark:text-gray-400">重要度</div>
                    <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
                        {{ $nodeDetails['importance'] ?? 0 }}
                    </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">{{ $this->totalQuestions }}</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">{{ $this->directQuestions }}</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">{{ $this->childrenQuestions }}</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">{{ $this->skillsQuestions }}</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">
                <button
                    wire:click="setActiveTab('overview')"
                    class="{{ $activeTab === 'overview' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }} py-4 px-1 border-b-2 font-medium text-sm"
                >
                    知识点介绍
                </button>
                <button
                    wire:click="setActiveTab('children')"
                    class="{{ $activeTab === 'children' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }} py-4 px-1 border-b-2 font-medium text-sm"
                >
                    一级子知识点
                    @if(count($this->childrenNodes) > 0)
                        <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
                            {{ count($this->childrenNodes) }}
                        </span>
                    @endif
                </button>
                <button
                    wire:click="setActiveTab('skills')"
                    class="{{ $activeTab === 'skills' ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300' }} py-4 px-1 border-b-2 font-medium text-sm"
                >
                    技能点
                    @if($this->skillsCount > 0)
                        <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
                            {{ $this->skillsCount }}
                        </span>
                    @endif
                </button>
            </nav>
        </div>

        {{-- 标签页内容 --}}
        <div class="p-6">
            @if($activeTab === 'overview')
                {{-- 知识点介绍 --}}
                <div class="space-y-4">
                    @if(!empty($nodeDetails['description']))
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">描述</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $nodeDetails['description'] }}</p>
                        </div>
                    @endif

                    @if(!empty($nodeDetails['skills']))
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">相关技能</h4>
                            <div class="flex flex-wrap gap-2">
                                @foreach($nodeDetails['skills'] as $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">
                                        {{ $skill['skill_name'] ?? $skill['skill_code'] ?? 'Unknown' }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">英文名称</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $nodeDetails['en_name'] ?? '-' }}</p>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">技能数量</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">{{ count($nodeDetails['skills'] ?? []) }}</p>
                        </div>
                    </div>
                </div>
            @elseif($activeTab === 'children')
                {{-- 一级子知识点 --}}
                <div class="space-y-4">
                    @if(empty($this->childrenNodes))
                        <div class="text-center text-gray-500 dark:text-gray-400 py-8">
                            <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                            </svg>
                            <p class="mt-2 text-sm">暂无子知识点</p>
                        </div>
                    @else
                        <div class="space-y-3">
                            @foreach($this->childrenNodes as $child)
                                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors cursor-pointer">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-3">
                                            <div class="flex-1">
                                                <h5 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $child['cn_name'] ?? $child['kp_code'] }}
                                                </h5>
                                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $child['kp_code'] }}</p>
                                            </div>
                                            <div class="text-right">
                                                @if(isset($child['question_count']))
                                                    <div class="text-sm font-medium text-blue-600 dark:text-blue-400">
                                                        {{ $child['question_count'] }} 题
                                                    </div>
                                                @endif
                                                @if(!empty($child['phase']))
                                                    <span class="text-xs text-gray-500 dark:text-gray-400">{{ $child['phase'] }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <svg class="w-5 h-5 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>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @elseif($activeTab === 'skills')
                {{-- 技能点 --}}
                <div class="space-y-4">
                    @if(empty($nodeDetails['question_stats']['skills'] ?? []))
                        <div class="text-center text-gray-500 dark:text-gray-400 py-8">
                            <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            <p class="mt-2 text-sm">暂无技能点数据</p>
                        </div>
                    @else
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach($nodeDetails['question_stats']['skills'] as $skill)
                                <div class="p-4 bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-900/20 dark:to-blue-900/20 rounded-lg border border-indigo-100 dark:border-indigo-800">
                                    <div class="flex items-center justify-between mb-2">
                                        <h5 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                            {{ $skill['skill_code'] }}
                                        </h5>
                                        <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-indigo-600 text-white">
                                            {{ $skill['question_count'] ?? 0 }} 题
                                        </span>
                                    </div>
                                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                        @php
                                            $maxCount = collect($nodeDetails['question_stats']['skills'] ?? [])->max('question_count') ?: 1;
                                            $percentage = ($skill['question_count'] ?? 0) / $maxCount * 100;
                                        @endphp
                                        <div
                                            class="bg-indigo-600 h-2 rounded-full transition-all"
                                            style="width: {{ $percentage }}%"
                                        ></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endif
        </div>
    @endif
</div>