80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
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;
|