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

<x-filament-panels::page>
    <div class="space-y-6">
        {{-- 页面标题 --}}
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
                    知识图谱整合视图
                </h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    以知识图谱为核心，整合知识点、题库和关联关系的完整视图
                </p>
            </div>

            <div class="flex items-center gap-2">
                <button
                    wire:click="toggleSidebar"
                    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 12h16M4 18h16"></path>
                    </svg>
                    {{ $showSidebar ? '隐藏' : '显示' }}侧边栏
                </button>

                <button
                    wire:click="clearSelection"
                    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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    清空选择
                </button>
            </div>
        </div>

        {{-- 标签页导航 --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-2">
            <nav class="flex space-x-2" aria-label="Tabs">
                @foreach($this->tabs as $tabId => $tab)
                    <button
                        wire:click="setActiveTab('{{ $tabId }}')"
                        class="{{ $activeTab === $tabId ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-700' }} group inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors"
                    >
                        @svg($tab['icon'], 'w-5 h-5')
                        {{ $tab['label'] }}
                    </button>
                @endforeach
            </nav>
        </div>

        {{-- 主要内容区域 --}}
        <div class="grid gap-6 {{ $showSidebar ? 'lg:grid-cols-4' : 'lg:grid-cols-1' }}">
            {{-- 主内容区 --}}
            <div class="lg:col-span-{{ $showSidebar ? '3' : '1' }}">
                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                    @if($activeTab === 'graph')
                        <div class="p-6">
                            <livewire:integrations.knowledge-graph-component :selectedKpCode="$selectedKpCode" />
                        </div>
                    @elseif($activeTab === 'list')
                        <div class="p-6">
                            <livewire:integrations.knowledge-points-list-component />
                        </div>
                    @elseif($activeTab === 'stats')
                        <div class="p-6">
                            <livewire:integrations.knowledge-point-stats-component :selectedKpCode="$selectedKpCode" />
                        </div>
                    @elseif($activeTab === 'network')
                        <div class="p-6">
                            <livewire:integrations.knowledge-network-component :selectedKpCode="$selectedKpCode" />
                        </div>
                    @endif
                </div>
            </div>

            {{-- 侧边栏 --}}
            @if($showSidebar)
                <div class="lg:col-span-1 space-y-4">
                    {{-- 当前选中知识点 --}}
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">当前选中</h3>
                        @if($selectedKpCode)
                            <div class="flex items-center justify-between p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-indigo-900 dark:text-indigo-300">{{ $selectedKpCode }}</p>
                                </div>
                                <button
                                    wire:click="$set('selectedKpCode', null)"
                                    class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200"
                                >
                                    <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="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                        @else
                            <p class="text-sm text-gray-500 dark:text-gray-400">未选中知识点</p>
                        @endif
                    </div>

                    {{-- 快速导航 --}}
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">快速导航</h3>
                        <nav class="space-y-1">
                            <a
                                href="{{ url('admin/knowledge-points') }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700 rounded-lg"
                            >
                                @svg('heroicon-o-map', 'w-4 h-4')
                                知识点总览
                            </a>
                            <a
                                href="{{ url('admin/knowledge-mindmap') }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700 rounded-lg"
                            >
                                @svg('heroicon-o-share', 'w-4 h-4')
                                知识图谱脑图
                            </a>
                            <a
                                href="{{ url('admin/knowledge-point-stats') }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700 rounded-lg"
                            >
                                @svg('heroicon-o-chart-bar', 'w-4 h-4')
                                知识点统计
                            </a>
                            <a
                                href="{{ url('admin/student-knowledge-graph-page') }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700 rounded-lg"
                            >
                                @svg('heroicon-o-user-group', 'w-4 h-4')
                                学生知识图谱
                            </a>
                        </nav>
                    </div>

                    {{-- 统计摘要 --}}
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">统计摘要</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">当前标签页:</span>
                                <span class="font-medium text-gray-900 dark:text-gray-100">{{ $this->tabs[$activeTab]['label'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">视图模式:</span>
                                <span class="font-medium text-gray-900 dark:text-gray-100">{{ $showSidebar ? '侧边栏模式' : '全屏模式' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- 底部说明 --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 flex-shrink-0 mt-0.5" 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>
                <div>
                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">使用说明</h4>
                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        <p>• <strong>知识图谱</strong>：可视化展示知识点之间的关联关系</p>
                        <p>• <strong>知识点列表</strong>：浏览和管理所有知识点，支持搜索和筛选</p>
                        <p>• <strong>题库统计</strong>：查看每个知识点的题目数量分布</p>
                        <p>• <strong>关联网络</strong>：展示知识点、题库和技能点之间的关联网络</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
<script>
    document.addEventListener('livewire:initialized', () => {
        // 监听组件事件
        Livewire.on('kpSelected', (event) => {
            console.log('Knowledge point selected:', event);
        });

        Livewire.on('clearAllSelections', () => {
            console.log('All selections cleared');
        });

        Livewire.on('tabChanged', (event) => {
            console.log('Tab changed to:', event.tab);
        });
    });
</script>
@endpush