wip

widgets/Text/index.tsx

@@ -0,0 +1,79 @@
+import React, { CSSProperties } from 'react';
+import { DraggablePropsType } from '../../components/Draggable/Draggable';
+
+export const id = "text";
+export const name = "文字";
+export const version = "1.0.0"; 
+type FontData = {
+  content: string;
+  fontSize?: number;       // 字体大小（px）
+  fontFamily?: string;    // 字体类型
+  color?: string;         // 字体颜色
+  fontWeight?: number;    // 字重
+  lineHeight?: number;    // 行高比例
+  textAlign?: 'left' | 'center' | 'right'; // 对齐方式
+  letterSpacing?: number; // 字间距（px）
+  customStyles?: CSSProperties; // 自定义CSS扩展
+};
+
+interface ResponsiveTextProps {
+  data: DraggablePropsType["data"] & FontData;
+  className?: string;     // 外部容器类名
+}
+
+const Text: React.FC<ResponsiveTextProps> = ({ 
+  data, 
+  className 
+}) => {
+  // 合并默认样式与传入样式
+  const textStyles: CSSProperties = {
+    fontSize: `${data.fontSize || 16}px`,
+    fontFamily: data.fontFamily || 'Arial, sans-serif',
+    color: data.color || '#333',
+    fontWeight: data.fontWeight || 400,
+    lineHeight: data.lineHeight ? `${data.lineHeight}em` : '1.5',
+    textAlign: data.textAlign || 'left',
+    letterSpacing: `${data.letterSpacing || 0}px`,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: data.textAlign === 'center' ? 'center' : 
+      data.textAlign === 'right' ? 'flex-end' : 'flex-start',
+    ...data.customStyles
+  };
+
+  return (
+    <div 
+      className={className}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        minWidth: '50px', // 防止容器坍缩
+        minHeight: '1em' // 最小高度保障
+      }}
+    >
+      <div 
+        style={{
+          ...textStyles,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          padding: '0.2em' // 防止文本贴边
+        }}
+        title={data.content} // 添加tooltip
+      >
+        {data.content}
+      </div>
+    </div>
+  );
+};
+
+export default Text;