perfect: 设定样式资源池将硬编码label转化为可配置

2026-04-06 14:37:02 +08:00
parent 5e2717c8fc
commit dca7f5f35c
4 changed files with 168 additions and 41 deletions
@@ -1,15 +1,27 @@
 import { useState } from 'react';
-import { NODE_COLOR_MAP, NODE_TYPE_LABELS } from '../../config/colors';
+
+interface LegendData {
+  type: string;
+  colors: { fill: string; stroke: string };
+  labels: { zh: string; en: string };
+}
+
+interface LegendProps {
+  legendData: LegendData[];
+}

 /**
 * 图例组件
 * 显示知识图谱中不同节点类型及其对应的颜色
 * 支持折叠/展开展示
+ * @param {LegendData[]} legendData - 图例数据，包含类型、颜色和标签信息
 */
-export const Legend = () => {
+export const Legend = ({ legendData }: LegendProps) => {
  const [isExpanded, setIsExpanded] = useState(true);

-  const nodeTypes = Object.entries(NODE_COLOR_MAP);
+  if (!legendData || legendData.length === 0) {
+    return null;
+  }

  return (
    <div className="absolute bottom-4 left-4 bg-white/95 backdrop-blur-sm rounded-lg shadow-lg p-4 transition-all duration-300 hover:shadow-xl z-10">
@@ -33,33 +45,30 @@ export const Legend = () => {

      {isExpanded && (
        <div className="space-y-2">
-          {nodeTypes.map(([type, colors], index) => {
-            const labels = NODE_TYPE_LABELS[type] || { zh: type, en: type };
-            return (
+          {legendData.map((item, index) => (
+            <div 
+              key={item.type}
+              className="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 transition-colors cursor-pointer"
+              style={{ animationDelay: `${index * 50}ms` }}
+            >
              <div 
-                key={type}
-                className="flex items-center space-x-3 p-2 rounded hover:bg-gray-50 transition-colors cursor-pointer"
-                style={{ animationDelay: `${index * 50}ms` }}
-              >
-                <div 
-                  className="w-4 h-4 rounded-full flex-shrink-0 shadow-sm"
-                  style={{ 
-                    backgroundColor: colors.fill,
-                    border: `1px solid ${colors.stroke}`,
-                  }}
-                />
+                className="w-4 h-4 rounded-full flex-shrink-0 shadow-sm"
+                style={{ 
+                  backgroundColor: item.colors.fill,
+                  border: `1px solid ${item.colors.stroke}`,
+                }}
+              />

-                <div className="flex flex-col min-w-0">
-                  <span className="text-xs font-medium text-gray-800 truncate">
-                    {labels.zh}
-                  </span>
-                  <span className="text-[10px] text-gray-500 truncate">
-                    {labels.en}
-                  </span>
-                </div>
+              <div className="flex flex-col min-w-0">
+                <span className="text-xs font-medium text-gray-800 truncate">
+                  {item.labels.zh}
+                </span>
+                <span className="text-[10px] text-gray-500 truncate">
+                  {item.labels.en}
+                </span>
              </div>
-            );
-          })}
+            </div>
+          ))}
        </div>
      )}
    </div>
@@ -1,30 +1,133 @@
-import type { Node } from '../types/graph';
+import type { Node, GraphData } from '../types/graph';

-// 节点类型颜色配置
-// 用于统一管理知识图谱中不同类型节点的视觉样式
-export const NODE_COLOR_MAP: Record<string, { fill: string; stroke: string }> = {
-  '概念': { fill: '#4ECDC4', stroke: '#45B7B0' },
-  '工具': { fill: '#FFA07A', stroke: '#FF7F50' },
-  '应用': { fill: '#2ECC71', stroke: '#27AE60' },
-};
+interface ColorConfig {
+  fill: string;
+  stroke: string;
+}
+
+interface NodeTypeInfo {
+  type: string;
+  colors: ColorConfig;
+  labels: { zh: string; en: string };
+}
+
+// 预定义颜色池 - 12种可区分的颜色对
+const COLOR_POOL: ColorConfig[] = [
+  { fill: '#4ECDC4', stroke: '#45B7B0' },
+  { fill: '#FFA07A', stroke: '#FF7F50' },
+  { fill: '#2ECC71', stroke: '#27AE60' },
+  { fill: '#FF6B9D', stroke: '#E84393' },
+  { fill: '#F39C12', stroke: '#D68910' },
+  { fill: '#9B59B6', stroke: '#8E44AD' },
+  { fill: '#3498DB', stroke: '#2980B9' },
+  { fill: '#1ABC9C', stroke: '#16A085' },
+  { fill: '#E74C3C', stroke: '#C0392B' },
+  { fill: '#607D8B', stroke: '#455A64' },
+  { fill: '#FF9800', stroke: '#F57C00' },
+  { fill: '#3F51B5', stroke: '#303F9F' },
+];

 // 默认节点颜色（当类型未匹配时）
-export const DEFAULT_NODE_COLORS = { fill: '#C6E5FF', stroke: '#5B8FF9' };
+export const DEFAULT_NODE_COLORS: ColorConfig = { fill: '#C6E5FF', stroke: '#5B8FF9' };

 // 节点类型双语标签映射
 export const NODE_TYPE_LABELS: Record<string, { zh: string; en: string }> = {
  '概念': { zh: '概念', en: 'Concept' },
  '工具': { zh: '工具', en: 'Tool' },
  '应用': { zh: '应用', en: 'Application' },
+  '属性': { zh: '属性', en: 'Attribute' },
+  '实体': { zh: '实体', en: 'Entity' },
+  '关系': { zh: '关系', en: 'Relation' },
+  '方法': { zh: '方法', en: 'Method' },
+  '函数': { zh: '函数', en: 'Function' },
+  '类': { zh: '类', en: 'Class' },
+  '模块': { zh: '模块', en: 'Module' },
 };

-// 获取节点颜色配置
-export const getNodeColors = (node: Node): { fill: string; stroke: string } => {
+// 动态颜色分配缓存
+const colorAssignmentCache: Map<string, ColorConfig> = new Map();
+let colorPoolIndex = 0;
+
+/**
+ * 从颜色池中获取或分配颜色
+ * @param type 节点类型
+ * @returns 颜色配置对象
+ */
+const getOrAssignColor = (type: string): ColorConfig => {
+  if (!type) return DEFAULT_NODE_COLORS;
+
+  // 从缓存中查找
+  if (colorAssignmentCache.has(type)) {
+    return colorAssignmentCache.get(type)!;
+  }
+
+  // 从颜色池中分配新颜色
+  const colorConfig = COLOR_POOL[colorPoolIndex % COLOR_POOL.length];
+  colorAssignmentCache.set(type, colorConfig);
+  colorPoolIndex++;
+
+  return colorConfig;
+};
+
+/**
+ * 重置颜色分配缓存
+ * 用于重新加载图谱数据时清除之前的分配
+ */
+export const resetColorAssignment = (): void => {
+  colorAssignmentCache.clear();
+  colorPoolIndex = 0;
+};
+
+/**
+ * 从图谱数据中提取所有唯一的节点类型
+ * @param graphData 图谱数据
+ * @returns 唯一的节点类型数组
+ */
+export const extractNodeTypes = (graphData: GraphData): string[] => {
+  const typeSet = new Set<string>();
+  graphData.nodes.forEach((node) => {
+    if (node.type) {
+      typeSet.add(node.type);
+    }
+  });
+  return Array.from(typeSet);
+};
+
+/**
+ * 生成图例数据
+ * @param graphData 图谱数据
+ * @returns 图例数据数组
+ */
+export const generateLegendData = (graphData: GraphData): NodeTypeInfo[] => {
+  const nodeTypes = extractNodeTypes(graphData);
+
+  return nodeTypes.map((type) => {
+    const colors = getOrAssignColor(type);
+    const labels = NODE_TYPE_LABELS[type] || { zh: type, en: type };
+
+    return {
+      type,
+      colors,
+      labels,
+    };
+  });
+};
+
+/**
+ * 获取节点颜色配置
+ * @param node 节点对象
+ * @returns 颜色配置对象
+ */
+export const getNodeColors = (node: Node): ColorConfig => {
  if (!node.type) return DEFAULT_NODE_COLORS;
-  return NODE_COLOR_MAP[node.type] || DEFAULT_NODE_COLORS;
+  return getOrAssignColor(node.type);
 };

-// 获取节点双语标签
+/**
+ * 获取节点双语标签
+ * @param type 节点类型
+ * @returns 双语标签对象
+ */
 export const getNodeLabels = (type: string): { zh: string; en: string } => {
  return NODE_TYPE_LABELS[type] || { zh: type, en: type };
 };
@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
 import type { GraphData, Node, SearchNode } from '../types/graph';
 import { graphApi } from '../services/graphApi';
 import { SAMPLE_GRAPH_DATA } from '../config/sampleData';
+import { resetColorAssignment } from '../config/colors';

 /**
 * 知识图谱数据管理 Hook
@@ -20,6 +21,9 @@ export const useGraphData = () => {
      setLoading(true);
      const data = await graphApi.getData();
      
+      // 重置颜色分配缓存，确保每次加载数据时颜色分配一致
+      resetColorAssignment();
+      
      // 如果后端返回空数据，使用示例数据
      if (data.nodes.length === 0) {
        setGraphData(SAMPLE_GRAPH_DATA);
@@ -28,6 +32,8 @@ export const useGraphData = () => {
      }
    } catch (error) {
      console.error('Failed to load graph data:', error);
+      // 重置颜色分配缓存
+      resetColorAssignment();
      // API 失败时使用示例数据作为降级方案
      setGraphData(SAMPLE_GRAPH_DATA);
    } finally {
@@ -1,9 +1,11 @@
+import { useMemo } from 'react';
 import GraphView from '../components/GraphView/index';
 import SearchBar from '../components/SearchBar/index';
 import NodePanel from '../components/NodePanel/index';
 import Legend from '../components/Legend/index';
 import { useGraphData } from '../hooks/useGraphData';
 import { useGraphLayout } from '../hooks/useGraphLayout';
+import { generateLegendData } from '../config/colors';

 /**
 * 知识图谱主页面组件
@@ -27,6 +29,13 @@ export const KnowledgeGraph = () => {

  const { layout } = useGraphLayout();

+  const legendData = useMemo(() => {
+    if (!graphData || graphData.nodes.length === 0) {
+      return [];
+    }
+    return generateLegendData(graphData);
+  }, [graphData]);
+
  return (
    <div className="w-full h-screen flex flex-col bg-gray-50">
      {loading ? (
@@ -54,7 +63,7 @@ export const KnowledgeGraph = () => {

          <div className="flex-1 flex overflow-hidden">
            <main className="flex-1 bg-white relative">
-              <Legend />
+              {legendData.length > 0 && <Legend legendData={legendData} />}
              <GraphView
                data={graphData}
                layout={layout}