taro-uno-ui 0.9.0-beta

package/src/components/basic/Typography/Typography.tsx

@@ -0,0 +1,205 @@
+import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
+import { TypographyProps, TypographyRef } from './Typography.types';
+import { calculateTypographyStyles } from './Typography.styles';
+
+/**
+ * Typography 排版组件
+ * 提供丰富的文本排版功能，包括标题、段落、文本、链接等
+ */
+export const Typography = forwardRef<TypographyRef, TypographyProps>((props, ref) => {
+  const {
+    children,
+    variant = 'p',
+    type,
+    align,
+    disabled = false,
+    copyable = false,
+    editable = false,
+    delete: isDelete = false,
+    underline = false,
+    code = false,
+    keyboard = false,
+    strong = false,
+    italic = false,
+    className,
+    style,
+    onClick,
+    onCopy,
+    onEdit,
+    ...restProps
+  } = props;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState('');
+
+  // 处理复制功能
+  const handleCopy = useCallback(async () => {
+    try {
+      const text = typeof children === 'string' ? children : String(children);
+      await navigator.clipboard.writeText(text);
+      onCopy?.();
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+    }
+  }, [children, onCopy]);
+
+  // 处理编辑功能
+  const handleEdit = useCallback(() => {
+    const text = typeof children === 'string' ? children : String(children);
+    setEditText(text);
+    setIsEditing(true);
+  }, [children]);
+
+  // 处理编辑完成
+  const handleEditComplete = useCallback(() => {
+    onEdit?.(editText);
+    setIsEditing(false);
+    setEditText('');
+  }, [editText, onEdit]);
+
+  // 处理编辑取消
+  const handleEditCancel = useCallback(() => {
+    setIsEditing(false);
+    setEditText('');
+  }, []);
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    getText: () => {
+      return typeof children === 'string' ? children : String(children);
+    },
+    copy: handleCopy,
+    edit: (text: string) => {
+      setEditText(text);
+      setIsEditing(true);
+    },
+  }));
+
+  // 计算样式
+  const styles = calculateTypographyStyles(props);
+
+  // 处理点击事件
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    if (copyable) {
+      e.preventDefault();
+      handleCopy();
+    } else if (editable) {
+      e.preventDefault();
+      handleEdit();
+    } else {
+      onClick?.(e);
+    }
+  }, [copyable, editable, handleCopy, handleEdit, onClick]);
+
+  // 渲染编辑状态
+  if (isEditing) {
+    return (
+      <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+        <input
+          type="text"
+          value={editText}
+          onChange={(e) => setEditText(e.target.value)}
+          style={{
+            border: '1px solid #d1d5db',
+            borderRadius: '4px',
+            padding: '4px 8px',
+            fontSize: styles.fontSize,
+            fontFamily: styles.fontFamily,
+          }}
+          autoFocus
+        />
+        <button
+          onClick={handleEditComplete}
+          style={{
+            padding: '4px 8px',
+            fontSize: '12px',
+            backgroundColor: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          确定
+        </button>
+        <button
+          onClick={handleEditCancel}
+          style={{
+            padding: '4px 8px',
+            fontSize: '12px',
+            backgroundColor: '#6b7280',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          取消
+        </button>
+      </div>
+    );
+  }
+
+  // 根据变体渲染不同的元素
+  const renderContent = () => {
+    const commonProps = {
+      style: styles,
+      className,
+      onClick: handleClick,
+      ...restProps,
+    };
+
+    switch (variant) {
+      case 'h1':
+      case 'h2':
+      case 'h3':
+      case 'h4':
+      case 'h5':
+      case 'h6':
+        return React.createElement(variant, commonProps, children);
+      case 'p':
+        return React.createElement('p', commonProps, children);
+      case 'span':
+        return React.createElement('span', commonProps, children);
+      default:
+        return React.createElement('span', commonProps, children);
+    }
+  };
+
+  return (
+    <>
+      {renderContent()}
+      {copyable && (
+        <span
+          style={{
+            marginLeft: '8px',
+            fontSize: '12px',
+            color: '#6b7280',
+            cursor: 'pointer',
+          }}
+          onClick={handleCopy}
+        >
+          📋
+        </span>
+      )}
+      {editable && (
+        <span
+          style={{
+            marginLeft: '8px',
+            fontSize: '12px',
+            color: '#6b7280',
+            cursor: 'pointer',
+          }}
+          onClick={handleEdit}
+        >
+          ✏️
+        </span>
+      )}
+    </>
+  );
+});
+
+Typography.displayName = 'Typography';
+
+
+export default Typography;

package/src/components/basic/Typography/Typography.types.ts

@@ -0,0 +1,296 @@
+import { ReactNode } from 'react';
+
+/**
+ * Typography 组件属性类型
+ */
+export interface TypographyProps {
+  /**
+   * 文本内容
+   */
+  children: ReactNode;
+  
+  /**
+   * 文本类型
+   */
+  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  
+  /**
+   * 文本变体
+   */
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  
+  /**
+   * 文本对齐
+   */
+  align?: 'left' | 'center' | 'right' | 'justify';
+  
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  
+  /**
+   * 是否可复制
+   */
+  copyable?: boolean;
+  
+  /**
+   * 是否可编辑
+   */
+  editable?: boolean;
+  
+  /**
+   * 删除线
+   */
+  delete?: boolean;
+  
+  /**
+   * 下划线
+   */
+  underline?: boolean;
+  
+  /**
+   * 代码样式
+   */
+  code?: boolean;
+  
+  /**
+   * 键盘样式
+   */
+  keyboard?: boolean;
+  
+  /**
+   * 粗体
+   */
+  strong?: boolean;
+  
+  /**
+   * 斜体
+   */
+  italic?: boolean;
+  
+  /**
+   * 自定义类名
+   */
+  className?: string;
+  
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
+  
+  /**
+   * 点击事件
+   */
+  onClick?: (_e: React.MouseEvent) => void;
+  
+  /**
+   * 文本大小
+   */
+  size?: TypographySize;
+  
+  /**
+   * 文本颜色
+   */
+  color?: TypographyColor;
+  
+  /**
+   * 文本权重
+   */
+  weight?: TypographyWeight;
+  
+  /**
+   * 省略号
+   */
+  ellipsis?: boolean;
+  
+  /**
+   * 最大行数
+   */
+  maxRows?: number;
+  
+  /**
+   * 换行
+   */
+  wrap?: boolean;
+  
+  /**
+   * 复制回调
+   */
+  onCopy?: () => void;
+  
+  /**
+   * 编辑回调
+   */
+  onEdit?: (_text: string) => void;
+}
+
+/**
+ * Typography 组件引用类型
+ */
+export interface TypographyRef {
+  /**
+   * 获取文本内容
+   */
+  getText: () => string;
+  
+  /**
+   * 复制文本
+   */
+  copy: () => void;
+  
+  /**
+   * 编辑文本
+   */
+  edit: (_text: string) => void;
+}
+
+/**
+ * Typography 尺寸类型
+ */
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Typography 颜色类型
+ */
+export type TypographyColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'inherit';
+
+/**
+ * Typography 权重类型
+ */
+export type TypographyWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+
+/**
+ * Typography 工具类型
+ */
+export interface TypographyUtils {
+  /**
+   * 计算文本样式
+   */
+  calculateStyles: (_props: TypographyProps) => React.CSSProperties;
+  
+  /**
+   * 格式化文本
+   */
+  formatText: (_text: string, variant: TypographyProps['variant']) => string;
+  
+  /**
+   * 复制到剪贴板
+   */
+  copyToClipboard: (_text: string) => Promise<void>;
+}
+
+/**
+ * Typography 原生属性类型
+ */
+export interface TypographyNativeProps {
+  /**
+   * 原生文本元素属性
+   */
+  nativeProps?: React.HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * Typography 标题属性
+ */
+export interface TitleProps extends TypographyProps {
+  /**
+   * 标题级别
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  
+  /**
+   * 副标题
+   */
+  subtitle?: ReactNode;
+  
+  /**
+   * 标题分隔线
+   */
+  divider?: boolean;
+}
+
+/**
+ * Typography 段落属性
+ */
+export interface ParagraphProps extends TypographyProps {
+  /**
+   * 段落间距
+   */
+  spacing?: number;
+  
+  /**
+   * 首行缩进
+   */
+  indent?: boolean;
+  
+  /**
+   * 行高
+   */
+  lineHeight?: number;
+}
+
+/**
+ * Typography 文本属性
+ */
+export interface TypographyTextProps extends TypographyProps {
+  /**
+   * 文本大小
+   */
+  size?: TypographySize;
+  
+  /**
+   * 文本颜色
+   */
+  color?: TypographyColor;
+  
+  /**
+   * 文本权重
+   */
+  weight?: TypographyWeight;
+  
+  /**
+   * 省略号
+   */
+  ellipsis?: boolean;
+  
+  /**
+   * 最大行数
+   */
+  maxRows?: number;
+  
+  /**
+   * 换行
+   */
+  wrap?: boolean;
+}
+
+/**
+ * Typography 链接属性
+ */
+export interface LinkProps extends TypographyProps {
+  /**
+   * 链接地址
+   */
+  href?: string;
+  
+  /**
+   * 目标
+   */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  
+  /**
+   * 是否在新窗口打开
+   */
+  external?: boolean;
+  
+  /**
+   * 下划线
+   */
+  underline?: boolean;
+  
+  /**
+   * 点击事件
+   */
+  onClick?: (_e: React.MouseEvent) => void;
+}

package/src/components/basic/Typography/index.tsx

@@ -0,0 +1,14 @@
+export { Typography } from './Typography';
+export type {
+  TypographyProps,
+  TypographyRef,
+  TypographySize,
+  TypographyColor,
+  TypographyWeight,
+  TypographyNativeProps,
+  TitleProps,
+  ParagraphProps,
+  TypographyTextProps,
+  LinkProps,
+} from './Typography.types';
+export { calculateTypographyStyles, typographyStyles } from './Typography.styles';