taro-uno-ui 0.9.0-beta

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

@@ -0,0 +1,319 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import React from "react"
+/** 文本尺寸 */
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+
+/** 文本权重 */
+export type TextWeight =
+  | 'thin'
+  | 'extralight'
+  | 'light'
+  | 'normal'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'extrabold'
+  | 'black';
+
+/** 文本对齐 */
+export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+
+/** 文本装饰 */
+export type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
+
+/** 文本转换 */
+export type TextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+
+/** 文本溢出处理 */
+export type TextOverflow = 'clip' | 'ellipsis' | 'break-word' | 'break-all' | 'truncate';
+
+/** 文本方向 */
+export type TextDirection = 'ltr' | 'rtl';
+
+/** 文本样式 */
+export type TextStyle = 'normal' | 'italic' | 'oblique';
+
+/** 文本变体 */
+export type TextVariant =
+  | 'normal'
+  | 'small-caps'
+  | 'all-small-caps'
+  | 'petite-caps'
+  | 'all-petite-caps'
+  | 'unicase'
+  | 'titling-caps'
+  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  | 'body1' | 'body2' | 'body'
+  | 'caption' | 'overline' | 'subtitle1' | 'subtitle2';
+
+/** 文本间距 */
+export type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | number;
+
+/** 行高 */
+export type LineHeight = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose' | number;
+
+/** 文本颜色类型 */
+export type TextColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'disabled'
+  | 'inherit'
+  | 'current'
+  | string;
+
+/** 文本状态 */
+export type TextStatus = 'normal' | 'active' | 'disabled' | 'loading';
+
+/** 文本类型 */
+export type TextType = 'body' | 'heading' | 'caption' | 'label' | 'link' | 'code' | 'quote' | 'helper';
+
+/** 文本原生属性类型 */
+export type TextNativeProps = HTMLAttributes<HTMLParagraphElement>;
+
+/** 文本组件属性接口 */
+export interface TextProps extends Omit<TextNativeProps, 'size' | 'color' | 'weight'> {
+  /** 文本内容 */
+  children?: ReactNode;
+  /** 文本尺寸 */
+  size?: TextSize;
+  /** 文本权重 */
+  weight?: TextWeight;
+  /** 文本颜色 */
+  color?: TextColor;
+  /** 文本对齐 */
+  align?: TextAlign;
+  /** 文本装饰 */
+  decoration?: TextDecoration;
+  /** 文本转换 */
+  transform?: TextTransform;
+  /** 文本溢出处理 */
+  overflow?: TextOverflow;
+  /** 文本方向 */
+  direction?: TextDirection;
+  /** 文本样式 */
+  fontStyle?: TextStyle;
+  /** 文本变体 */
+  variant?: TextVariant;
+  /** 字母间距 */
+  letterSpacing?: LetterSpacing;
+  /** 行高 */
+  lineHeight?: LineHeight;
+  /** 文本状态 */
+  status?: TextStatus;
+  /** 文本类型 */
+  type?: TextType;
+  /** 是否可点击 */
+  clickable?: boolean;
+  /** 是否显示加载状态 */
+  loading?: boolean;
+  disabled?: boolean;
+  /** 是否块级显示 */
+  block?: boolean;
+  /** 是否内联块级显示 */
+  inlineBlock?: boolean;
+  /** 是否可选中 */
+  selectable?: boolean;
+  /** 是否可复制 */
+  copyable?: boolean;
+  /** 复制时的回调函数 */
+  onCopy?: () => void;
+  /** 自定义样式类名 */
+  className?: string;
+  /** 点击事件处理函数 */
+  onClick?: (_event: React.MouseEvent) => void;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 最大行数 */
+  maxLines?: number;
+  /** 是否启用动画 */
+  animated?: boolean;
+  /** 动画持续时间 */
+  animationDuration?: number;
+  /** 是否启用无障碍访问 */
+  accessible?: boolean;
+  /** 无障碍标签 */
+  accessibilityLabel?: string;
+  /** 无障碍角色 */
+  accessibilityRole?: string;
+  /** 无障碍状态 */
+  accessibilityState?: {
+    disabled?: boolean;
+    selected?: boolean;
+    busy?: boolean;
+    expanded?: boolean;
+  };
+  /** 文本链接地址 */
+  href?: string;
+  /** 链接打开方式 */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  /** 是否显示下划线 */
+  underline?: boolean;
+  /** 是否删除线 */
+  strikethrough?: boolean;
+  /** 是否高亮 */
+  highlight?: boolean;
+  /** 高亮颜色 */
+  highlightColor?: string;
+  /** 是否显示省略号 */
+  ellipsis?: boolean;
+  /** 是否自动换行 */
+  wrap?: boolean;
+  /** 是否保持单词完整 */
+  breakWord?: boolean;
+  /** 文本阴影 */
+  textShadow?: string;
+  /** 文本轮廓 */
+  textOutline?: string;
+  /** 文本渐变 */
+  gradient?: {
+    start: string;
+    end: string;
+    direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | 'to bottom right' | 'to top left';
+  };
+  /** 自定义字体 */
+  fontFamily?: string | string[];
+  /** 文本间距 */
+  wordSpacing?: number | string;
+  /** 文本缩进 */
+  textIndent?: number | string;
+  /** 白空格处理 */
+  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+  /** 垂直对齐 */
+  verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom';
+  /** 文本方向组合 */
+  writingMode?: 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
+  /** 文本渲染优化 */
+  textRendering?: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision';
+  ariaLabel?: string;
+  // React native props
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  // Accessibility
+  role?: string;
+  // 排除可能与Taro组件冲突的React属性
+  dangerouslySetInnerHTML?: { __html: string };
+  suppressContentEditableWarning?: boolean;
+  suppressHydrationWarning?: boolean;
+  // Native props
+  // ...React.HTMLAttributes<HTMLElement>;
+}
+
+/** 文本组件引用类型 */
+export type TextRef = {
+  /** 文本元素 */
+  element: HTMLParagraphElement | HTMLSpanElement | null;
+  /** 获取文本内容 */
+  getText: () => string;
+  /** 设置文本内容 */
+  setText: (_text: string) => void;
+  /** 复制文本 */
+  copy: () => Promise<void>;
+  /** 选择文本 */
+  select: () => void;
+  /** 设置禁用状态 */
+  setDisabled: (_disabled: boolean) => void;
+  /** 设置加载状态 */
+  setLoading: (_loading: boolean) => void;
+  /** 获取文本状态 */
+  getStatus: () => TextStatus;
+  /** 获取文本尺寸 */
+  getSize: () => TextSize;
+  /** 获取文本颜色 */
+  getColor: () => string;
+  /** 设置文本颜色 */
+  setColor: (_color: string) => void;
+  /** 设置文本尺寸 */
+  setSize: (_size: TextSize) => void;
+  /** 设置文本权重 */
+  setWeight: (_weight: TextWeight) => void;
+  /** 滚动到视图 */
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+};
+
+/** 文本工具函数接口 */
+export interface TextUtils {
+  /** 获取文本样式类名 */
+  getTextClassName: (_props: Partial<TextProps>) => string;
+  /** 获取文本样式对象 */
+  getTextStyle: (_props: Partial<TextProps>) => React.CSSProperties;
+  /** 获取文本尺寸映射 */
+  getSizeMap: () => Record<TextSize, { fontSize: number; lineHeight: number }>;
+  /** 获取文本权重映射 */
+  getWeightMap: () => Record<TextWeight, number>;
+  /** 获取文本颜色映射 */
+  getColorMap: () => Record<TextColor, string>;
+  /** 验证文本属性 */
+  validateTextProps: (_props: TextProps) => boolean;
+  /** 格式化文本尺寸 */
+  formatTextSize: (_size: TextSize) => string;
+  /** 格式化文本权重 */
+  formatTextWeight: (_weight: TextWeight) => string;
+  /** 格式化文本颜色 */
+  formatTextColor: (_color: TextColor) => string;
+  /** 截断文本 */
+  truncateText: (_text: string, maxLength: number, suffix?: string) => string;
+  /** 高亮文本 */
+  highlightText: (_text: string, highlight: string, highlightColor?: string) => ReactNode;
+  /** 格式化数字 */
+  formatNumber: (_num: number, options?: Intl.NumberFormatOptions) => string;
+  /** 格式化日期 */
+  formatDate: (_date: Date | string | number, format?: string) => string;
+  /** 格式化货币 */
+  formatCurrency: (_amount: number, currency?: string, locale?: string) => string;
+  /** 计算文本长度 */
+  calculateTextLength: (_text: string, options?: { fontSize: number; fontFamily: string }) => number;
+  /** 检测文本语言 */
+  detectLanguage: (_text: string) => string;
+  /** 清理文本 */
+  sanitizeText: (_text: string) => string;
+  /** 转换HTML实体 */
+  escapeHtml: (_text: string) => string;
+  /** 反转换HTML实体 */
+  unescapeHtml: (_text: string) => string;
+}
+
+/** 打字机效果属性 */
+export interface TypewriterProps {
+  /** 要显示的文本 */
+  text: string;
+  /** 打字速度（毫秒） */
+  speed?: number;
+  /** 删除速度（毫秒） */
+  deleteSpeed?: number;
+  /** 是否循环 */
+  loop?: boolean;
+  /** 延迟开始时间（毫秒） */
+  delay?: number;
+  /** 删除前等待时间（毫秒） */
+  waitTime?: number;
+  /** 是否显示光标 */
+  showCursor?: boolean;
+  /** 光标字符 */
+  cursorChar?: string;
+  /** 完成回调 */
+  onComplete?: () => void;
+  /** 开始回调 */
+  onStart?: () => void;
+  /** 删除回调 */
+  onDelete?: () => void;
+}
+
+/** 文本渐变属性 */
+export interface TextGradientProps {
+  /** 渐变开始颜色 */
+  start: string;
+  /** 渐变结束颜色 */
+  end: string;
+  /** 渐变方向 */
+  direction?: 'to right' | 'to left' | 'to bottom' | 'to top' | 'to bottom right' | 'to top left';
+  /** 子元素 */
+  children: ReactNode;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}

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

@@ -0,0 +1,27 @@
+export { Text } from './Text';
+export type {
+  TextProps,
+  TextRef,
+  TextUtils,
+  TextSize,
+  TextWeight,
+  TextAlign,
+  TextDecoration,
+  TextTransform,
+  TextOverflow,
+  TextDirection,
+  TextStyle,
+  TextVariant,
+  LetterSpacing,
+  LineHeight,
+  TextColor,
+  TextStatus,
+  TextType,
+  TextNativeProps,
+  TypewriterProps,
+  TextGradientProps,
+} from './Text.types';
+export { textStyles } from './Text.styles';
+
+/** 文本组件默认导出 */
+export default Text;

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

@@ -0,0 +1,346 @@
+import { CSSProperties } from 'react';
+import { TypographyProps, TypographySize, TypographyColor, TypographyWeight } from './Typography.types';
+
+/**
+ * Typography 样式配置
+ */
+export const typographyStyles = {
+  /**
+   * 基础样式
+   */
+  base: {
+    display: 'block',
+    margin: 0,
+    padding: 0,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    lineHeight: 1.5,
+    color: '#1f2937',
+  } as CSSProperties,
+
+  /**
+   * 标题样式
+   */
+  headings: {
+    h1: {
+      fontSize: '2.25rem',
+      fontWeight: 700,
+      lineHeight: 1.2,
+      marginBottom: '0.5rem',
+    } as CSSProperties,
+    h2: {
+      fontSize: '1.875rem',
+      fontWeight: 600,
+      lineHeight: 1.3,
+      marginBottom: '0.5rem',
+    } as CSSProperties,
+    h3: {
+      fontSize: '1.5rem',
+      fontWeight: 600,
+      lineHeight: 1.3,
+      marginBottom: '0.5rem',
+    } as CSSProperties,
+    h4: {
+      fontSize: '1.25rem',
+      fontWeight: 600,
+      lineHeight: 1.4,
+      marginBottom: '0.5rem',
+    } as CSSProperties,
+    h5: {
+      fontSize: '1.125rem',
+      fontWeight: 500,
+      lineHeight: 1.4,
+      marginBottom: '0.5rem',
+    } as CSSProperties,
+    h6: {
+      fontSize: '1rem',
+      fontWeight: 500,
+      lineHeight: 1.4,
+      marginBottom: '0.5rem',
+    } as CSSProperties,
+  },
+
+  /**
+   * 段落样式
+   */
+  paragraph: {
+    fontSize: '1rem',
+    lineHeight: 1.6,
+    marginBottom: '1rem',
+    color: '#374151',
+  } as CSSProperties,
+
+  /**
+   * 文本样式
+   */
+  text: {
+    display: 'inline',
+    fontSize: '1rem',
+    lineHeight: 1.5,
+    color: '#374151',
+  } as CSSProperties,
+
+  /**
+   * 链接样式
+   */
+  link: {
+    color: '#3b82f6',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    transition: 'color 0.2s ease',
+    '&:hover': {
+      color: '#2563eb',
+      textDecoration: 'underline',
+    },
+    '&:active': {
+      color: '#1d4ed8',
+    },
+  } as CSSProperties,
+
+  /**
+   * 尺寸映射
+   */
+  sizes: {
+    xs: { fontSize: '0.75rem', lineHeight: 1.25 },
+    sm: { fontSize: '0.875rem', lineHeight: 1.375 },
+    md: { fontSize: '1rem', lineHeight: 1.5 },
+    lg: { fontSize: '1.125rem', lineHeight: 1.625 },
+    xl: { fontSize: '1.25rem', lineHeight: 1.75 },
+    xxl: { fontSize: '1.5rem', lineHeight: 1.875 },
+  } as Record<TypographySize, CSSProperties>,
+
+  /**
+   * 颜色映射
+   */
+  colors: {
+    primary: { color: '#3b82f6' },
+    secondary: { color: '#6b7280' },
+    success: { color: '#10b981' },
+    warning: { color: '#f59e0b' },
+    danger: { color: '#ef4444' },
+    inherit: { color: 'inherit' },
+  } as Record<TypographyColor, CSSProperties>,
+
+  /**
+   * 权重映射
+   */
+  weights: {
+    normal: { fontWeight: 400 },
+    medium: { fontWeight: 500 },
+    semibold: { fontWeight: 600 },
+    bold: { fontWeight: 700 },
+  } as Record<TypographyWeight, CSSProperties>,
+
+  /**
+   * 类型映射
+   */
+  types: {
+    primary: { color: '#3b82f6' },
+    secondary: { color: '#6b7280' },
+    success: { color: '#10b981' },
+    warning: { color: '#f59e0b' },
+    danger: { color: '#ef4444' },
+  } as Record<string, CSSProperties>,
+
+  /**
+   * 状态样式
+   */
+  states: {
+    disabled: {
+      color: '#9ca3af',
+      cursor: 'not-allowed',
+    } as CSSProperties,
+    copyable: {
+      cursor: 'pointer',
+      position: 'relative',
+      '&:hover': {
+        backgroundColor: '#f3f4f6',
+      },
+    } as CSSProperties,
+    editable: {
+      cursor: 'text',
+      '&:hover': {
+        backgroundColor: '#f9fafb',
+      },
+    } as CSSProperties,
+  },
+
+  /**
+   * 装饰样式
+   */
+  decorations: {
+    delete: {
+      textDecoration: 'line-through',
+      color: '#6b7280',
+    } as CSSProperties,
+    underline: {
+      textDecoration: 'underline',
+    } as CSSProperties,
+    code: {
+      fontFamily: '"Fira Code", "Courier New", monospace',
+      backgroundColor: '#f3f4f6',
+      padding: '0.125rem 0.25rem',
+      borderRadius: '0.25rem',
+      fontSize: '0.875em',
+      border: '1px solid #e5e7eb',
+    } as CSSProperties,
+    keyboard: {
+      fontFamily: '"Fira Code", "Courier New", monospace',
+      backgroundColor: '#ffffff',
+      border: '1px solid #d1d5db',
+      borderBottomWidth: '2px',
+      borderRadius: '0.25rem',
+      padding: '0.125rem 0.375rem',
+      fontSize: '0.875em',
+      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+    } as CSSProperties,
+  },
+
+  /**
+   * 对齐样式
+   */
+  alignments: {
+    left: { textAlign: 'left' },
+    center: { textAlign: 'center' },
+    right: { textAlign: 'right' },
+    justify: { textAlign: 'justify' },
+  } as Record<string, CSSProperties>,
+
+  /**
+   * 省略号样式
+   */
+  ellipsis: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  } as CSSProperties,
+
+  /**
+   * 多行省略号样式
+   */
+  multiLineEllipsis: (maxRows: number) => ({
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: maxRows,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  } as CSSProperties),
+};
+
+/**
+ * 计算 Typography 样式
+ */
+export const calculateTypographyStyles = (props: TypographyProps): CSSProperties => {
+  const {
+    variant = 'p',
+    type,
+    align,
+    disabled,
+    copyable,
+    editable,
+    delete: isDelete,
+    underline,
+    code,
+    keyboard,
+    strong,
+    italic,
+    style,
+    size,
+    color,
+    weight,
+    ellipsis,
+    maxRows,
+    wrap,
+  } = props;
+
+  const styles: CSSProperties = { ...typographyStyles['base'] };
+
+  // 根据变体设置样式
+  if (variant && variant in typographyStyles['headings']) {
+    Object.assign(styles, typographyStyles['headings'][variant as keyof typeof typographyStyles['headings']]);
+  } else if (variant === 'p') {
+    Object.assign(styles, typographyStyles['paragraph']);
+  } else if (variant === 'span') {
+    Object.assign(styles, typographyStyles['text']);
+  }
+
+  // 类型样式
+  if (type && type in typographyStyles['types']) {
+    Object.assign(styles, typographyStyles['types'][type]);
+  }
+
+  // 对齐样式
+  if (align && align in typographyStyles['alignments']) {
+    Object.assign(styles, typographyStyles['alignments'][align]);
+  }
+
+  // 状态样式
+  if (disabled) {
+    Object.assign(styles, typographyStyles['states'].disabled);
+  }
+  if (copyable) {
+    Object.assign(styles, typographyStyles['states'].copyable);
+  }
+  if (editable) {
+    Object.assign(styles, typographyStyles['states'].editable);
+  }
+
+  // 装饰样式
+  if (isDelete) {
+    Object.assign(styles, typographyStyles['decorations'].delete);
+  }
+  if (underline) {
+    Object.assign(styles, typographyStyles['decorations'].underline);
+  }
+  if (code) {
+    Object.assign(styles, typographyStyles['decorations'].code);
+  }
+  if (keyboard) {
+    Object.assign(styles, typographyStyles['decorations'].keyboard);
+  }
+
+  // 权重样式
+  if (strong) {
+    Object.assign(styles, typographyStyles['weights'].bold);
+  }
+  if (italic) {
+    styles.fontStyle = 'italic';
+  }
+
+  // 尺寸样式
+  if (size && size in typographyStyles['sizes']) {
+    Object.assign(styles, typographyStyles['sizes'][size as TypographySize]);
+  }
+
+  // 颜色样式
+  if (color && color in typographyStyles['colors']) {
+    Object.assign(styles, typographyStyles['colors'][color as TypographyColor]);
+  }
+
+  // 权重样式
+  if (weight && weight in typographyStyles['weights']) {
+    Object.assign(styles, typographyStyles['weights'][weight]);
+  }
+
+  // 省略号样式
+  if (ellipsis) {
+    if (maxRows && maxRows > 1) {
+      Object.assign(styles, typographyStyles['multiLineEllipsis'](maxRows));
+    } else {
+      Object.assign(styles, typographyStyles['ellipsis']);
+    }
+  }
+
+  // 换行样式
+  if (wrap === false) {
+    Object.assign(styles, {
+      whiteSpace: 'nowrap',
+    });
+  }
+
+  // 合并自定义样式
+  if (style) {
+    Object.assign(styles, style);
+  }
+
+  return styles;
+};