style: 优化节点和边的颜色配置

- 使用 Tailwind 调色板统一配色
- 边颜色使用 500 色阶，节点颜色使用 600 色阶以区分
- 移除关联边的虚线样式
- 缩小箭头尺寸
- 标签/分类节点颜色由 dimension 决定
- 更新顶部图例颜色和形状说明

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

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

script/visualization/src/App.vue

@@ -35,7 +35,7 @@
       <div class="flex gap-3 text-xs text-base-content/60 ml-4 border-l border-base-content/20 pl-4">
         <span class="text-base-content font-medium">形状:</span>
         <div class="flex items-center gap-1">○ 标签</div>
-        <div class="flex items-center gap-1">□ 分类/点</div>
+        <div class="flex items-center gap-1">□ 分类</div>
       </div>
       <div class="flex gap-3 text-xs text-base-content/60 ml-4 border-l border-base-content/20 pl-4">
         <span class="text-base-content font-medium">填充:</span>

script/visualization/src/config/edgeStyle.js

@@ -1,16 +1,16 @@
 // 边样式统一配置
 
-// 所有边类型及颜色
+// 所有边类型及颜色（使用 Tailwind 调色板，确保区分度）
 export const edgeTypeColors = {
-  '属于': '#9b59b6',
-  '包含': '#3498db',
-  '标签共现': '#2ecc71',
-  '分类共现': '#f39c12',
-  '匹配': '#e94560',
-  '推导': '#00bcd4',  // 青色 - 推导关系
-  '组成': '#8bc34a',  // 浅绿色 - 组合成员
-  '支撑': '#ff9800',  // 橙色 - 支撑关系
-  '关联': '#9c27b0'   // 紫色 - 关联关系
+  '属于': '#8b5cf6',    // violet-500 - 紫罗兰
+  '包含': '#3b82f6',    // blue-500 - 蓝色
+  '标签共现': '#10b981', // emerald-500 - 翠绿
+  '分类共现': '#eab308', // yellow-500 - 黄色
+  '匹配': '#f43f5e',    // rose-500 - 玫瑰红
+  '推导': '#06b6d4',    // cyan-500 - 青色
+  '组成': '#84cc16',    // lime-500 - 柠檬绿
+  '支撑': '#f97316',    // orange-500 - 橙色
+  '关联': '#ec4899'     // pink-500 - 粉色
 }
 
 // 获取边样式（统一入口）
@@ -43,15 +43,11 @@ export function getEdgeStyle(edge) {
     opacity = 0.6
   }
 
-  // 关联边使用虚线
-  if (type === '关联') {
-    strokeDasharray = '4,2'
-  }
 
   // 箭头配置
   const hasArrow = ['推导', '支撑'].includes(type)
-  const arrowSize = type === '推导' ? 8 : 6
-  const arrowRefX = type === '推导' ? 20 : 15
+  const arrowSize = type === '推导' ? 5 : 4
+  const arrowRefX = type === '推导' ? 18 : 14
 
   return {
     color,

script/visualization/src/config/nodeStyle.js

@@ -1,12 +1,15 @@
 // 节点样式统一配置
 
-// 维度颜色映射
+// 节点类型/维度颜色映射（使用 Tailwind 调色板，与边颜色区分）
+// 边用 500 色阶，节点用 600 色阶以区分
+// 注意：标签和分类节点的颜色由其 dimension 决定，不单独定义
 export const dimColors = {
-  '人设': '#e94560',
-  '帖子': '#e94560',
-  '灵感点': '#f39c12',
-  '目的点': '#3498db',
-  '关键点': '#9b59b6'
+  '人设': '#dc2626',    // red-600 - 深红
+  '帖子': '#dc2626',    // red-600 - 深红
+  '灵感点': '#7c3aed',  // violet-600 - 深紫
+  '目的点': '#2563eb',  // blue-600 - 深蓝
+  '关键点': '#0d9488',  // teal-600 - 深青绿
+  '组合': '#d97706'     // amber-600 - 深琥珀
 }
 
 // 获取节点样式（统一入口）
@@ -18,14 +21,14 @@ export function getNodeStyle(node, options = {}) {
 
   // 颜色
   let color = '#888'
-  if (data.type === '人设' || data.type === '帖子') {
+  if (data.type && dimColors[data.type]) {
     color = dimColors[data.type]
   } else if (data.dimension && dimColors[data.dimension]) {
     color = dimColors[data.dimension]
   }
 
-  // 形状（分类/点 用方形，其他用圆形）
-  const shape = (data.type === '分类' || data.type === '点') ? 'rect' : 'circle'
+  // 形状（分类用方形，标签和其他用圆形）
+  const shape = data.type === '分类' ? 'rect' : 'circle'
 
   // domain 区分：帖子域用空心，人设域用实心
   const domain = data.domain || '人设'

script/visualization/tailwind.config.js

@@ -7,11 +7,11 @@ export default {
   theme: {
     extend: {
       colors: {
-        // 维度颜色
-        'dim-persona': '#e94560',
-        'dim-inspiration': '#f39c12',
-        'dim-purpose': '#3498db',
-        'dim-key': '#9b59b6',
+        // 维度颜色（与 nodeStyle.js 同步）
+        'dim-persona': '#dc2626',     // red-600 - 深红
+        'dim-inspiration': '#7c3aed', // violet-600 - 深紫
+        'dim-purpose': '#2563eb',     // blue-600 - 深蓝
+        'dim-key': '#0d9488',         // teal-600 - 深青绿
       }
     },
   },