feat: 优化帖子匹配Tab布局

- 左侧上下布局：人设树 + 相关图
- 相关图未激活时收起到底部，只显示标题栏
- 激活后展开显示相关图

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

script/visualization/src/App.vue

@@ -60,9 +60,20 @@
 
     <!-- 主内容区 - 帖子匹配 Tab -->
     <main v-show="activeTab === 'match'" class="flex flex-1 overflow-hidden">
-      <TreeView class="w-[320px] shrink-0 bg-base-200 border-r border-base-300" />
-      <GraphView class="flex-1 min-w-[300px]" />
-      <PostTreeView class="w-[360px] shrink-0 bg-base-200 border-l border-base-300" />
+      <!-- 左侧：人设树 + 相关图（上下布局） -->
+      <div class="w-[360px] shrink-0 bg-base-200 border-r border-base-300 flex flex-col">
+        <!-- 人设树（上部，弹性填充） -->
+        <TreeView class="flex-1 min-h-0" />
+        <!-- 相关图（下部，未激活时收起） -->
+        <div
+          class="border-t border-base-300 transition-all duration-200"
+          :class="store.selectedNodeId ? 'h-[45%]' : 'h-8'"
+        >
+          <GraphView :collapsed="!store.selectedNodeId" />
+        </div>
+      </div>
+      <!-- 右侧：帖子树 -->
+      <PostTreeView class="flex-1 bg-base-200" />
     </main>
 
     <!-- 详情面板 -->

script/visualization/src/components/GraphView.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="flex flex-col h-full">
     <!-- 头部 -->
-    <div class="flex items-center gap-3 px-4 py-2 bg-base-300 text-xs text-base-content/60">
+    <div class="flex items-center gap-3 px-4 py-2 bg-base-300 text-xs text-base-content/60 shrink-0">
       <span>相关图</span>
-      <span class="text-primary font-medium">{{ currentNodeName }}</span>
+      <span v-if="!collapsed" class="text-primary font-medium">{{ currentNodeName }}</span>
+      <span v-else class="text-base-content/40">点击人设树节点查看</span>
       <div class="flex-1"></div>
-      <button @click="showConfig = !showConfig" class="btn btn-ghost btn-xs">
+      <button v-if="!collapsed" @click="showConfig = !showConfig" class="btn btn-ghost btn-xs">
         {{ showConfig ? '隐藏配置' : '游走配置' }}
       </button>
     </div>
 
     <!-- 游走配置面板 -->
-    <div v-show="showConfig" class="px-4 py-2 bg-base-200 border-b border-base-300 text-xs space-y-3 max-h-64 overflow-y-auto relative z-50">
+    <div v-show="showConfig && !collapsed" class="px-4 py-2 bg-base-200 border-b border-base-300 text-xs space-y-3 max-h-64 overflow-y-auto relative z-50">
       <!-- 步数设置 -->
       <div class="flex items-center gap-2">
         <span class="text-base-content/60 w-16">游走步数:</span>
@@ -45,7 +46,7 @@
     </div>
 
     <!-- SVG 容器 -->
-    <div ref="containerRef" class="flex-1 relative overflow-hidden">
+    <div v-show="!collapsed" ref="containerRef" class="flex-1 relative overflow-hidden">
       <svg ref="svgRef" class="w-full h-full"></svg>
     </div>
   </div>
@@ -56,6 +57,14 @@ import { ref, reactive, computed, watch, onMounted } from 'vue'
 import * as d3 from 'd3'
 import { useGraphStore } from '../stores/graph'
 
+// Props
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const store = useGraphStore()
 
 const containerRef = ref(null)