@beppla/tapas-ui 1.5.10 → 1.5.12

package/components/WebViewBridge/index.tsx

@@ -0,0 +1,12 @@
+export { 
+  WebViewBridge, 
+  createWebViewInjectedScript,
+  handleNativeWebViewMessage,
+  type WebViewBridgeRef, 
+  type WebViewBridgeProps, 
+  type WebViewMessage,
+  type TapasSysMessage,
+  type LogLevel
+} from './WebViewBridge';
+export { useWebViewBridge, type UseWebViewBridgeOptions, type UseWebViewBridgeReturn } from './useWebViewBridge';
+

package/components/WebViewBridge/useWebViewBridge.ts

@@ -0,0 +1,145 @@
+/**
+ * useWebViewBridge - WebView 通信 Hook
+ * 
+ * 简化 WebViewBridge 的使用，提供便捷的消息发送和监听方法
+ */
+import { useCallback, useRef } from 'react';
+import { WebViewBridgeRef, WebViewMessage } from './WebViewBridge';
+
+export interface UseWebViewBridgeOptions {
+  /**
+   * 消息来源标识（用于标识 RN Web 模块）
+   * 这个值会作为消息的 from 字段发送给 tapas-sys
+   * 注意：如果使用 WebViewBridge 组件，from 应该在组件 props 中提供
+   */
+  from?: string;
+  
+  /**
+   * 消息监听回调
+   */
+  onMessage?: (message: WebViewMessage) => void;
+  
+  /**
+   * 特定消息类型的处理器映射
+   */
+  messageHandlers?: {
+    [messageType: string]: (message: WebViewMessage) => void;
+  };
+  
+  /**
+   * 是否启用 base64 加密（默认 true，符合 tapas-sys 解析格式）
+   */
+  enableBase64?: boolean;
+}
+
+export interface UseWebViewBridgeReturn {
+  /**
+   * WebViewBridge ref，需要传递给 WebViewBridge 组件
+   */
+  bridgeRef: React.RefObject<WebViewBridgeRef | null>;
+  
+  /**
+   * 发送消息
+   * @returns 是否发送成功
+   */
+  sendMessage: (type: string, payload?: unknown) => boolean;
+  
+  /**
+   * 获取运行环境
+   */
+  getEnvironment: () => 'webview' | 'iframe' | 'unknown';
+  
+  /**
+   * 注册消息处理器
+   */
+  registerHandler: (type: string, handler: (message: WebViewMessage) => void) => () => void;
+  
+  /**
+   * 消息处理函数，需要传递给 WebViewBridge 的 onMessage prop
+   */
+  handleMessage: (message: WebViewMessage) => void;
+  
+  /**
+   * 清理所有监听器和资源
+   */
+  cleanup: () => void;
+}
+
+/**
+ * WebView 通信 Hook
+ */
+export const useWebViewBridge = (
+  options: UseWebViewBridgeOptions = {}
+): UseWebViewBridgeReturn => {
+  const { onMessage, messageHandlers } = options;
+  const bridgeRef = useRef<WebViewBridgeRef>(null);
+  const handlersRef = useRef<Map<string, (message: WebViewMessage) => void>>(new Map());
+
+  // 发送消息
+  const sendMessage = useCallback((type: string, payload?: unknown): boolean => {
+    if (bridgeRef.current) {
+      return bridgeRef.current.sendMessage(type, payload);
+    }
+    // eslint-disable-next-line no-console
+    console.warn('useWebViewBridge: bridgeRef 未初始化，无法发送消息');
+    return false;
+  }, []);
+
+  // 获取运行环境
+  const getEnvironment = useCallback(() => {
+    if (bridgeRef.current) {
+      return bridgeRef.current.getEnvironment();
+    }
+    return 'unknown' as const;
+  }, []);
+
+  // 注册消息处理器
+  const registerHandler = useCallback((
+    type: string,
+    handler: (message: WebViewMessage) => void
+  ) => {
+    handlersRef.current.set(type, handler);
+    
+    // 返回取消注册函数
+    return () => {
+      handlersRef.current.delete(type);
+    };
+  }, []);
+
+  // 统一消息处理
+  const handleMessage = useCallback((message: WebViewMessage) => {
+    // 调用外部监听器
+    if (onMessage) {
+      onMessage(message);
+    }
+
+    // 调用特定类型的处理器
+    const typeHandler = messageHandlers?.[message.type];
+    if (typeHandler) {
+      typeHandler(message);
+    }
+
+    // 调用注册的处理器
+    const registeredHandler = handlersRef.current.get(message.type);
+    if (registeredHandler) {
+      registeredHandler(message);
+    }
+  }, [onMessage, messageHandlers]);
+
+  // 清理函数
+  const cleanup = useCallback(() => {
+    if (bridgeRef.current) {
+      bridgeRef.current.cleanup();
+    }
+  }, []);
+
+  return {
+    bridgeRef,
+    sendMessage,
+    getEnvironment,
+    registerHandler,
+    handleMessage,
+    cleanup,
+  };
+};
+

package/components/WordCloud/WordCloud.tsx

@@ -0,0 +1,553 @@
+/**
+ * WordCloud 组件
+ * 支持传统词云和气泡词云两种模式
+ * 
+ * 注意：本组件包含 Web 特定代码（SVG、div 等），因此禁用部分 RN lint 规则
+ */
+
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, Platform, Text as RNText } from 'react-native';
+
+// 动态导入依赖
+let Svg: any, Text: any, G: any, Circle: any;
+let D3WordCloud: any;
+
+if (Platform.OS === 'web') {
+  // Web 端使用 react-wordcloud 和 d3-hierarchy
+  try {
+    const wordcloud = require('react-wordcloud');
+    D3WordCloud = wordcloud.default || wordcloud;
+  } catch (e) {
+    // console.warn('react-wordcloud not available for Web', e);
+  }
+} else {
+  // RN 端使用 react-native-svg
+  try {
+    const svg = require('react-native-svg');
+    Svg = svg.Svg;
+    Text = svg.Text;
+    G = svg.G;
+    Circle = svg.Circle;
+  } catch (e) {
+    // console.warn('react-native-svg not available', e);
+  }
+}
+
+export interface WordCloudData {
+  text: string;
+  value: number;
+  color?: string;
+}
+
+export interface BubbleColors {
+  primary: string;   // 深色气泡（高权重）
+  secondary: string; // 浅色气泡（低权重）
+  text?: string;     // 文字颜色
+}
+
+export interface WordCloudProps {
+  words: WordCloudData[];
+  width?: number;
+  height?: number;
+  colors?: string[];
+  fontFamily?: string;
+  fontSizes?: [number, number]; // [min, max]
+  rotate?: number; // 0 for no rotation, or degrees
+  spiral?: 'archimedean' | 'rectangular';
+  padding?: number;
+  style?: any;
+  testID?: string;
+  // Bubble variant 新增属性
+  variant?: 'traditional' | 'bubble'; // 布局模式
+  bubbleColors?: BubbleColors;       // 气泡颜色配置
+  showHashtag?: boolean;              // 是否显示 # 前缀
+  minBubbleSize?: number;             // 最小气泡半径
+  maxBubbleSize?: number;             // 最大气泡半径
+  bubblePadding?: number;             // 气泡间距
+  onBubbleClick?: (word: WordCloudData) => void; // 气泡点击事件
+}
+
+const DEFAULT_COLORS = [
+  '#8B4513', // Brown (like Trendy topics screenshot)
+  '#A0522D', 
+  '#D2691E',
+  '#CD853F',
+  '#DEB887',
+  '#F4A460',
+  '#D2B48C',
+  '#BC8F8F',
+];
+
+const DEFAULT_BUBBLE_COLORS: BubbleColors = {
+  primary: '#8B6F47',   // 深棕色（参考 Figma 设计）
+  secondary: '#D4C4B0', // 浅米色
+  text: '#FFFFFF',      // 白色文字
+};
+
+export const WordCloud: React.FC<WordCloudProps> = ({
+  words,
+  width,
+  height = 400,
+  colors = DEFAULT_COLORS,
+  fontFamily = 'Arial, sans-serif',
+  fontSizes = [14, 60],
+  rotate = 0,
+  spiral = 'archimedean',
+  padding = 2,
+  style,
+  testID,
+  variant = 'traditional',
+  bubbleColors = DEFAULT_BUBBLE_COLORS,
+  showHashtag = true,
+  minBubbleSize = 30,
+  maxBubbleSize = 150,
+  bubblePadding = 4,
+  onBubbleClick,
+}) => {
+  if (!words || words.length === 0) {
+    return (
+      <View style={[styles.container, { height }, style]}>
+        <RNText style={styles.emptyText}>No words available</RNText>
+      </View>
+    );
+  }
+
+  // 气泡布局数据处理
+  const bubbleData = useMemo(() => {
+    if (variant !== 'bubble') return null;
+
+    const maxValue = Math.max(...words.map(w => w.value));
+    const minValue = Math.min(...words.map(w => w.value));
+    const valueRange = maxValue - minValue || 1;
+
+    return words.map((word, _index) => {
+      const normalized = (word.value - minValue) / valueRange;
+      const radius = minBubbleSize + normalized * (maxBubbleSize - minBubbleSize);
+      
+      // 根据权重决定颜色（高于中位数使用 primary，否则使用 secondary）
+      const median = (maxValue + minValue) / 2;
+      const bubbleColor = word.color || (word.value >= median ? bubbleColors.primary : bubbleColors.secondary);
+      const textColor = bubbleColors.text || '#FFFFFF';
+      
+      // 文字大小根据气泡大小自适应
+      const fontSize = Math.max(10, Math.min(18, radius * 0.25));
+      
+      return {
+        ...word,
+        radius,
+        bubbleColor,
+        textColor,
+        fontSize,
+        displayText: showHashtag && !word.text.startsWith('#') ? `#${word.text}` : word.text,
+      };
+    });
+  }, [words, variant, minBubbleSize, maxBubbleSize, bubbleColors, showHashtag]);
+
+  // 传统词云布局
+  if (variant === 'traditional') {
+    // Web 端使用 react-wordcloud
+    if (Platform.OS === 'web' && D3WordCloud) {
+      const wordCloudData = words.map((word) => ({
+        text: word.text,
+        value: word.value,
+      }));
+
+      const options = {
+        rotations: rotate === 0 ? 1 : 2,
+        rotationAngles: rotate === 0 ? [0, 0] : [-90, 0],
+        fontSizes,
+        fontFamily,
+        padding,
+        spiral,
+        scale: 'sqrt' as const,
+        transitionDuration: 500,
+      };
+
+      const callbacks = {
+        getWordColor: (word: any) => {
+          const index = words.findIndex(w => w.text === word.text);
+          if (index >= 0 && words[index] && words[index].color) {
+            return words[index].color || colors[index % colors.length];
+          }
+          return colors[Math.max(0, index) % colors.length];
+        },
+        getWordTooltip: (word: any) => `${word.text}: ${word.value}`,
+      };
+
+      return (
+        <View style={[styles.container, { height, width: width || '100%' }, style]} testID={testID}>
+          <div style={{ width: '100%', height: '100%' }}>
+            <D3WordCloud
+              words={wordCloudData}
+              options={options}
+              callbacks={callbacks}
+            />
+          </div>
+        </View>
+      );
+    }
+
+    // RN 端使用自定义 SVG 实现
+    if (Platform.OS !== 'web' && Svg && Text) {
+      // 简单的词云布局算法
+      const sortedWords = [...words].sort((a, b) => b.value - a.value);
+      const maxValue = Math.max(...words.map(w => w.value));
+      const minValue = Math.min(...words.map(w => w.value));
+      
+      const viewWidth = width || 350;
+      const viewHeight = height;
+      const centerX = viewWidth / 2;
+      const centerY = viewHeight / 2;
+
+      // 计算字体大小
+      const getFontSize = (value: number) => {
+        const normalized = (value - minValue) / (maxValue - minValue || 1);
+        return fontSizes[0] + normalized * (fontSizes[1] - fontSizes[0]);
+      };
+
+      // 螺旋布局
+      const layoutWords = () => {
+        const positioned: Array<{
+          word: WordCloudData;
+          x: number;
+          y: number;
+          fontSize: number;
+          color: string;
+        }> = [];
+
+        sortedWords.forEach((word, wordIndex) => {
+          const fontSize = getFontSize(word.value);
+          const colorIndex = wordIndex % colors.length;
+          const defaultColorIndex = wordIndex % DEFAULT_COLORS.length;
+          const color: string = word.color || colors[colorIndex] || DEFAULT_COLORS[defaultColorIndex] || '#8B4513';
+          
+          // 简单的螺旋布局
+          const angle = wordIndex * 0.5;
+          const radius = Math.sqrt(wordIndex + 1) * 20;
+          const x = centerX + radius * Math.cos(angle);
+          const y = centerY + radius * Math.sin(angle);
+
+          positioned.push({ word, x, y, fontSize, color });
+        });
+
+        return positioned;
+      };
+
+      const positionedWords = layoutWords();
+
+      return (
+        <View style={[styles.container, { height, width: viewWidth }, style]} testID={testID}>
+          <Svg width={viewWidth} height={viewHeight}>
+            <G>
+              {positionedWords.map((item, index) => (
+                <Text
+                  key={index}
+                  x={item.x}
+                  y={item.y}
+                  fontSize={item.fontSize}
+                  fill={item.color}
+                  fontFamily={fontFamily}
+                  textAnchor="middle"
+                  fontWeight="bold"
+                >
+                  {item.word.text}
+                </Text>
+              ))}
+            </G>
+          </Svg>
+        </View>
+      );
+    }
+  }
+
+  // 气泡布局模式
+  if (variant === 'bubble' && bubbleData) {
+    const viewWidth = width || 600;
+    const viewHeight = height;
+
+    // Web 端使用类似传统词云的中心散开布局
+    if (Platform.OS === 'web') {
+      // 使用自定义算法：从中心向外螺旋式布局（类似传统词云）
+      const centerX = viewWidth / 2;
+      const centerY = viewHeight / 2;
+      
+      const layoutBubbles = () => {
+        const positioned: Array<{
+          data: any;
+          x: number;
+          y: number;
+          r: number;
+        }> = [];
+
+        // 按 value 排序，大的先放置
+        const sortedData = [...bubbleData].sort((a, b) => b.value - a.value);
+
+        sortedData.forEach((data, index) => {
+          let x = centerX;
+          let y = centerY;
+          let placed = false;
+
+          if (index === 0) {
+            // 第一个气泡放在正中心
+            placed = true;
+          } else {
+            // 从中心开始螺旋向外寻找位置
+            for (let attempt = 0; attempt < 500; attempt++) {
+              const angle = attempt * 0.5; // 螺旋角度
+              const distance = Math.sqrt(attempt) * (data.radius * 0.6 + bubblePadding);
+              x = centerX + distance * Math.cos(angle);
+              y = centerY + distance * Math.sin(angle);
+
+              // 检查边界
+              if (x - data.radius < 0 || x + data.radius > viewWidth ||
+                  y - data.radius < 0 || y + data.radius > viewHeight) {
+                continue;
+              }
+
+              // 检查是否与已有气泡重叠
+              const overlaps = positioned.some(p => {
+                const dx = x - p.x;
+                const dy = y - p.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                return dist < (data.radius + p.r + bubblePadding);
+              });
+
+              if (!overlaps) {
+                placed = true;
+                break;
+              }
+            }
+
+            // 如果还是找不到位置，在可用空间随机放置
+            if (!placed) {
+              for (let i = 0; i < 100; i++) {
+                const randomAngle = Math.random() * Math.PI * 2;
+                const randomDistance = Math.random() * Math.min(viewWidth, viewHeight) * 0.4;
+                x = centerX + randomDistance * Math.cos(randomAngle);
+                y = centerY + randomDistance * Math.sin(randomAngle);
+
+                if (x - data.radius >= 0 && x + data.radius <= viewWidth &&
+                    y - data.radius >= 0 && y + data.radius <= viewHeight) {
+                  const overlaps = positioned.some(p => {
+                    const dx = x - p.x;
+                    const dy = y - p.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    return dist < (data.radius + p.r + bubblePadding * 0.5);
+                  });
+                  
+                  if (!overlaps) {
+                    placed = true;
+                    break;
+                  }
+                }
+              }
+            }
+          }
+
+          positioned.push({ 
+            data, 
+            x: placed ? x : centerX, 
+            y: placed ? y : centerY, 
+            r: data.radius 
+          });
+        });
+
+        return positioned;
+      };
+
+      const positionedBubbles = layoutBubbles();
+
+      return (
+        <View style={[{ height, width: viewWidth, backgroundColor: 'transparent' }, style]} testID={testID}>
+          <svg width={viewWidth} height={viewHeight} style={{ backgroundColor: 'transparent' }}>
+            {positionedBubbles.map((bubble, index) => {
+              const adjustedFontSize = Math.max(10, Math.min(24, bubble.r * 0.35));
+              
+              return (
+                <g key={index} onClick={() => onBubbleClick?.(bubble.data)}>
+                  <circle
+                    cx={bubble.x}
+                    cy={bubble.y}
+                    r={bubble.r}
+                    fill={bubble.data.bubbleColor}
+                    stroke="none"
+                    style={{ cursor: onBubbleClick ? 'pointer' : 'default' }}
+                  />
+                  <text
+                    x={bubble.x}
+                    y={bubble.y}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    fontSize={adjustedFontSize}
+                    fill={bubble.data.textColor}
+                    fontFamily={fontFamily}
+                    fontWeight="400"
+                    style={{
+                      userSelect: 'none',
+                      pointerEvents: 'none',
+                      maxWidth: bubble.r * 1.8,
+                    }}
+                  >
+                    {bubble.data.displayText}
+                  </text>
+                </g>
+              );
+            })}
+          </svg>
+        </View>
+      );
+    }
+
+    // RN 端使用相同的中心散开布局
+    if (Svg && Circle && Text) {
+      // 从中心向外螺旋式布局（与 Web 端一致）
+      const centerX = viewWidth / 2;
+      const centerY = viewHeight / 2;
+      
+      const layoutBubbles = () => {
+        const positioned: Array<{
+          data: any;
+          x: number;
+          y: number;
+          r: number;
+        }> = [];
+
+        // 按 value 排序，大的先放置
+        const sortedData = [...bubbleData].sort((a, b) => b.value - a.value);
+
+        sortedData.forEach((data, index) => {
+          let x = centerX;
+          let y = centerY;
+          let placed = false;
+
+          if (index === 0) {
+            // 第一个气泡放在正中心
+            placed = true;
+          } else {
+            // 从中心开始螺旋向外寻找位置
+            for (let attempt = 0; attempt < 500; attempt++) {
+              const angle = attempt * 0.5;
+              const distance = Math.sqrt(attempt) * (data.radius * 0.6 + bubblePadding);
+              x = centerX + distance * Math.cos(angle);
+              y = centerY + distance * Math.sin(angle);
+
+              // 检查边界
+              if (x - data.radius < 0 || x + data.radius > viewWidth ||
+                  y - data.radius < 0 || y + data.radius > viewHeight) {
+                continue;
+              }
+
+              // 检查是否与已有气泡重叠
+              const overlaps = positioned.some(p => {
+                const dx = x - p.x;
+                const dy = y - p.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                return dist < (data.radius + p.r + bubblePadding);
+              });
+
+              if (!overlaps) {
+                placed = true;
+                break;
+              }
+            }
+
+            // 兜底：随机放置在中心周围
+            if (!placed) {
+              for (let i = 0; i < 100; i++) {
+                const randomAngle = Math.random() * Math.PI * 2;
+                const randomDistance = Math.random() * Math.min(viewWidth, viewHeight) * 0.4;
+                x = centerX + randomDistance * Math.cos(randomAngle);
+                y = centerY + randomDistance * Math.sin(randomAngle);
+
+                if (x - data.radius >= 0 && x + data.radius <= viewWidth &&
+                    y - data.radius >= 0 && y + data.radius <= viewHeight) {
+                  const overlaps = positioned.some(p => {
+                    const dx = x - p.x;
+                    const dy = y - p.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    return dist < (data.radius + p.r + bubblePadding * 0.5);
+                  });
+                  
+                  if (!overlaps) {
+                    placed = true;
+                    break;
+                  }
+                }
+              }
+            }
+          }
+
+          positioned.push({ 
+            data, 
+            x: placed ? x : centerX, 
+            y: placed ? y : centerY, 
+            r: data.radius 
+          });
+        });
+
+        return positioned;
+      };
+
+      const positionedBubbles = layoutBubbles();
+
+      return (
+        <View style={[styles.container, { height, width: viewWidth }, style]} testID={testID}>
+          <Svg width={viewWidth} height={viewHeight}>
+            <G>
+              {positionedBubbles.map((bubble, index) => (
+                <G 
+                  key={index}
+                  onPress={() => onBubbleClick?.(bubble.data)}
+                >
+                  <Circle
+                    cx={bubble.x}
+                    cy={bubble.y}
+                    r={bubble.r}
+                    fill={bubble.data.bubbleColor}
+                    stroke="none"
+                  />
+                  <Text
+                    x={bubble.x}
+                    y={bubble.y}
+                    fontSize={bubble.data.fontSize}
+                    fill={bubble.data.textColor}
+                    fontFamily={fontFamily}
+                    textAnchor="middle"
+                    alignmentBaseline="middle"
+                    fontWeight="400"
+                  >
+                    {bubble.data.displayText}
+                  </Text>
+                </G>
+              ))}
+            </G>
+          </Svg>
+        </View>
+      );
+    }
+  }
+
+  // 降级显示
+  return (
+    <View style={[styles.container, { height }, style]} testID={testID}>
+      <RNText style={styles.emptyText}>WordCloud library not available</RNText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+  },
+});
+

package/components/WordCloud/index.tsx

@@ -0,0 +1,3 @@
+export { WordCloud } from './WordCloud';
+export type { WordCloudProps, WordCloudData, BubbleColors } from './WordCloud';
+