@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/WebViewBridge/index.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,145 +0,0 @@
-/**
- * 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

@@ -1,553 +0,0 @@
-/**
- * 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

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