taro-uno-ui 0.9.0-beta

package/src/components/display/Tag/Tag.types.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface TagProps {
+  /** 标签内容 */
+  children?: ReactNode;
+  /** 标签颜色 */
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | string;
+  /** 标签大小 */
+  size?: 'small' | 'medium' | 'large';
+  /** 标签变体 */
+  variant?: 'solid' | 'outline' | 'light';
+  /** 是否可关闭 */
+  closable?: boolean;
+  /** 是否可选择 */
+  checkable?: boolean;
+  /** 是否选中（可选择模式下） */
+  checked?: boolean;
+  /** 标签图标 */
+  icon?: ReactNode;
+  /** 点击事件 */
+  onClick?: (_event: any) => void;
+  /** 关闭事件 */
+  onClose?: (_event: any) => void;
+  /** 选择变化事件 */
+  onCheckedChange?: (_checked: boolean) => void;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}
+
+export interface TagRef {
+  /** DOM 元素 */
+  element: any;
+  /** 获取标签颜色 */
+  getColor: () => string;
+  /** 获取标签大小 */
+  getSize: () => 'small' | 'medium' | 'large';
+  /** 检查是否可关闭 */
+  isClosable: () => boolean;
+  /** 检查是否可选择 */
+  isCheckable: () => boolean;
+  /** 检查是否选中 */
+  isChecked: () => boolean;
+  /** 设置选中状态 */
+  setChecked: (_checked: boolean) => void;
+  /** 关闭标签 */
+  close: () => void;
+}

package/src/components/display/Tag/index.ts

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export { tagStyles } from './Tag.styles';
+export type { TagProps, TagRef } from './Tag.types';

package/src/components/display/Timeline/Timeline.styles.ts

@@ -0,0 +1,211 @@
+import type { CSSProperties } from 'react';
+
+export const timelineStyles: Record<string, CSSProperties> = {
+  base: {
+    position: 'relative',
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+  },
+  
+  vertical: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  
+  horizontal: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    overflowX: 'auto',
+    paddingBottom: '16px',
+  },
+  
+  reverse: {
+    flexDirection: 'column-reverse',
+  },
+  
+  reverseHorizontal: {
+    flexDirection: 'row-reverse',
+  },
+  
+  // 时间线项
+  item: {
+    position: 'relative',
+    paddingBottom: '20px',
+    minHeight: '48px',
+  },
+  
+  itemHorizontal: {
+    paddingBottom: 0,
+    paddingRight: '20px',
+    minWidth: '200px',
+    flexShrink: 0,
+  },
+  
+  itemLast: {
+    paddingBottom: 0,
+  },
+  
+  itemLastHorizontal: {
+    paddingRight: 0,
+  },
+  
+  // 时间线线条
+  itemLine: {
+    position: 'absolute',
+    left: '8px',
+    top: '20px',
+    width: '1px',
+    height: 'calc(100% - 20px)',
+    backgroundColor: '#f0f0f0',
+  },
+  
+  itemLineHorizontal: {
+    position: 'absolute',
+    left: '20px',
+    top: '8px',
+    width: 'calc(100% - 20px)',
+    height: '1px',
+    backgroundColor: '#f0f0f0',
+  },
+  
+  itemLineLast: {
+    display: 'none',
+  },
+  
+  // 节点
+  itemDot: {
+    position: 'absolute',
+    left: '4px',
+    top: '4px',
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: '#d9d9d9',
+    border: '2px solid #ffffff',
+    boxShadow: '0 0 0 1px #d9d9d9',
+    zIndex: 1,
+  },
+  
+  itemDotHorizontal: {
+    position: 'absolute',
+    left: '4px',
+    top: '4px',
+    width: '8px',
+    height: '8px',
+  },
+  
+  // 节点颜色
+  dotDefault: {
+    backgroundColor: '#d9d9d9',
+    boxShadow: '0 0 0 1px #d9d9d9',
+  },
+  
+  dotPrimary: {
+    backgroundColor: '#1890ff',
+    boxShadow: '0 0 0 1px #1890ff',
+  },
+  
+  dotSuccess: {
+    backgroundColor: '#52c41a',
+    boxShadow: '0 0 0 1px #52c41a',
+  },
+  
+  dotWarning: {
+    backgroundColor: '#faad14',
+    boxShadow: '0 0 0 1px #faad14',
+  },
+  
+  dotDanger: {
+    backgroundColor: '#ff4d4f',
+    boxShadow: '0 0 0 1px #ff4d4f',
+  },
+  
+  dotInfo: {
+    backgroundColor: '#13c2c2',
+    boxShadow: '0 0 0 1px #13c2c2',
+  },
+  
+  // 自定义节点
+  customDot: {
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '16px',
+    minHeight: '16px',
+    backgroundColor: '#ffffff',
+    border: '1px solid #d9d9d9',
+    borderRadius: '50%',
+    zIndex: 1,
+  },
+  
+  // 内容
+  itemContent: {
+    marginLeft: '24px',
+    paddingTop: '0',
+    wordBreak: 'break-word',
+  },
+  
+  itemContentHorizontal: {
+    marginLeft: 0,
+    marginTop: '24px',
+    paddingTop: '0',
+  },
+  
+  itemContentRight: {
+    marginLeft: 0,
+    marginRight: '24px',
+    textAlign: 'right',
+  },
+  
+  // 标题和描述
+  itemTitle: {
+    fontSize: '16px',
+    fontWeight: '500',
+    color: '#262626',
+    marginBottom: '4px',
+    lineHeight: '1.5',
+  },
+  
+  itemDescription: {
+    fontSize: '14px',
+    color: '#8c8c8c',
+    lineHeight: '1.5',
+    marginBottom: '8px',
+  },
+  
+  itemTimestamp: {
+    fontSize: '12px',
+    color: '#8c8c8c',
+    marginTop: '4px',
+  },
+  
+  // 交替模式
+  itemAlternateLeft: {
+    paddingRight: '50%',
+  },
+  
+  itemAlternateRight: {
+    paddingLeft: '50%',
+    textAlign: 'right',
+  },
+  
+  itemAlternateRightContent: {
+    marginLeft: 0,
+    marginRight: '24px',
+  },
+  
+  itemAlternateRightDot: {
+    right: 'calc(50% - 8px)',
+    left: 'auto',
+  },
+  
+  itemAlternateRightLine: {
+    right: 'calc(50% - 0.5px)',
+    left: 'auto',
+  },
+};

package/src/components/display/Timeline/Timeline.tsx

@@ -0,0 +1,239 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { View, Text } from '@tarojs/components';
+import { timelineStyles } from './Timeline.styles';
+import type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline.types';
+
+/** 时间线项组件 */
+export const TimelineItem: React.FC<TimelineItemProps & { 
+  mode?: 'left' | 'right' | 'alternate';
+  direction?: 'vertical' | 'horizontal';
+  showTimestamp?: boolean;
+  itemIndex?: number;
+}> = ({
+  title,
+  children,
+  description,
+  timestamp,
+  color = 'default',
+  dot,
+  position,
+  isLast = false,
+  mode = 'left',
+  direction = 'vertical',
+  showTimestamp = false,
+  itemIndex = 0,
+  style,
+  className,
+}) => {
+  const isHorizontal = direction === 'horizontal';
+  const isAlternate = mode === 'alternate';
+  const isRightPosition = position === 'right' || (isAlternate && itemIndex % 2 === 1);
+
+  const getItemStyle = () => {
+    const baseStyle = {
+      ...timelineStyles['item'],
+      ...style,
+    };
+
+    if (isHorizontal) {
+      Object.assign(baseStyle, timelineStyles['itemHorizontal']);
+      if (isLast) {
+        Object.assign(baseStyle, timelineStyles['itemLastHorizontal']);
+      }
+    } else if (isLast) {
+      Object.assign(baseStyle, timelineStyles['itemLast']);
+    }
+
+    if (isAlternate && !isHorizontal) {
+      if (isRightPosition) {
+        Object.assign(baseStyle, timelineStyles['itemAlternateRight']);
+      } else {
+        Object.assign(baseStyle, timelineStyles['itemAlternateLeft']);
+      }
+    }
+
+    return baseStyle;
+  };
+
+  const getLineStyle = () => {
+    const baseStyle = isHorizontal 
+      ? { ...timelineStyles['itemLineHorizontal'] }
+      : { ...timelineStyles['itemLine'] };
+
+    if (isLast) {
+      Object.assign(baseStyle, timelineStyles['itemLineLast']);
+    }
+
+    if (isAlternate && !isHorizontal && isRightPosition) {
+      Object.assign(baseStyle, timelineStyles['itemAlternateRightLine']);
+    }
+
+    return baseStyle;
+  };
+
+  const getDotStyle = () => {
+    const baseStyle = isHorizontal 
+      ? { ...timelineStyles['itemDotHorizontal'] }
+      : { ...timelineStyles['itemDot'] };
+
+    if (!dot) {
+      const colorStyle = timelineStyles[`dot${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof timelineStyles];
+      if (colorStyle) {
+        Object.assign(baseStyle, colorStyle);
+      } else {
+        // 自定义颜色
+        baseStyle.backgroundColor = color;
+        baseStyle.boxShadow = `0 0 0 1px ${color}`;
+      }
+    }
+
+    if (isAlternate && !isHorizontal && isRightPosition) {
+      Object.assign(baseStyle, timelineStyles['itemAlternateRightDot']);
+    }
+
+    return baseStyle;
+  };
+
+  const getContentStyle = () => {
+    const baseStyle = isHorizontal 
+      ? { ...timelineStyles['itemContentHorizontal'] }
+      : { ...timelineStyles['itemContent'] };
+
+    if (isRightPosition && !isHorizontal) {
+      if (isAlternate) {
+        Object.assign(baseStyle, timelineStyles['itemAlternateRightContent']);
+      } else {
+        Object.assign(baseStyle, timelineStyles['itemContentRight']);
+      }
+    }
+
+    return baseStyle;
+  };
+
+  return (
+    <View style={getItemStyle()} className={className}>
+      {/* 连线 */}
+      <View style={getLineStyle()} />
+      
+      {/* 节点 */}
+      {dot ? (
+        <View style={{ ...timelineStyles['customDot'], ...getDotStyle() }}>
+          {dot}
+        </View>
+      ) : (
+        <View style={getDotStyle()} />
+      )}
+      
+      {/* 内容 */}
+      <View style={getContentStyle()}>
+        {title && (
+          <Text style={timelineStyles['itemTitle']}>
+            {title}
+          </Text>
+        )}
+        {description && (
+          <Text style={timelineStyles['itemDescription']}>
+            {description}
+          </Text>
+        )}
+        {children}
+        {showTimestamp && timestamp && (
+          <Text style={timelineStyles['itemTimestamp']}>
+            {timestamp}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+/** 时间线组件 */
+export const TimelineComponent = forwardRef<TimelineRef, TimelineProps>((props, ref) => {
+  const {
+    items = [],
+    mode = 'left',
+    reverse = false,
+    showTimestamp = false,
+    direction = 'vertical',
+    style,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const elementRef = useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    element: elementRef.current,
+    getMode: () => mode,
+    getDirection: () => direction,
+    isReverse: () => reverse,
+    getItemCount: () => items.length,
+  }));
+
+  const getTimelineStyle = () => {
+    const baseStyle = {
+      ...timelineStyles['base'],
+      ...timelineStyles[direction],
+      ...style,
+    };
+
+    if (reverse) {
+      if (direction === 'horizontal') {
+        Object.assign(baseStyle, timelineStyles['reverseHorizontal']);
+      } else {
+        Object.assign(baseStyle, timelineStyles['reverse']);
+      }
+    }
+
+    return baseStyle;
+  };
+
+  const renderItems = () => {
+    if (children) {
+      return children;
+    }
+
+    const itemsToRender = reverse ? [...items].reverse() : items;
+
+    return itemsToRender.map((item, index) => {
+      const originalIndex = reverse ? items.length - 1 - index : index;
+      const isLast = index === itemsToRender.length - 1;
+
+      return (
+        <TimelineItem
+          key={originalIndex}
+          {...item}
+          mode={mode}
+          direction={direction}
+          showTimestamp={showTimestamp}
+          itemIndex={originalIndex}
+          isLast={isLast}
+        />
+      );
+    });
+  };
+
+  return (
+    <View
+      ref={elementRef}
+      style={getTimelineStyle()}
+      className={className}
+      {...rest}
+    >
+      {renderItems()}
+    </View>
+  );
+});
+
+TimelineComponent.displayName = 'Timeline';
+
+// 创建复合组件类型
+export interface TimelineCompoundComponent extends React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<TimelineRef>> {
+  Item: typeof TimelineItem;
+}
+
+export const Timeline = TimelineComponent as TimelineCompoundComponent;
+Timeline.Item = TimelineItem;
+
+export default Timeline;

package/src/components/display/Timeline/Timeline.types.ts

@@ -0,0 +1,56 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface TimelineItemProps {
+  /** 时间线项标题 */
+  title?: ReactNode;
+  /** 时间线项内容 */
+  children?: ReactNode;
+  /** 时间线项描述 */
+  description?: ReactNode;
+  /** 时间戳 */
+  timestamp?: string;
+  /** 节点颜色 */
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | string;
+  /** 自定义节点 */
+  dot?: ReactNode;
+  /** 节点位置 */
+  position?: 'left' | 'right';
+  /** 是否为最后一项 */
+  isLast?: boolean;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+}
+
+export interface TimelineProps {
+  /** 时间线数据源 */
+  items?: TimelineItemProps[];
+  /** 时间线模式 */
+  mode?: 'left' | 'right' | 'alternate';
+  /** 是否反向显示 */
+  reverse?: boolean;
+  /** 是否显示时间戳 */
+  showTimestamp?: boolean;
+  /** 时间线方向 */
+  direction?: 'vertical' | 'horizontal';
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+  /** 子节点 */
+  children?: ReactNode;
+}
+
+export interface TimelineRef {
+  /** DOM 元素 */
+  element: any;
+  /** 获取时间线模式 */
+  getMode: () => 'left' | 'right' | 'alternate';
+  /** 获取时间线方向 */
+  getDirection: () => 'vertical' | 'horizontal';
+  /** 检查是否反向 */
+  isReverse: () => boolean;
+  /** 获取项目数量 */
+  getItemCount: () => number;
+}

package/src/components/display/Timeline/index.ts

@@ -0,0 +1,3 @@
+export { Timeline, TimelineItem } from './Timeline';
+export { timelineStyles } from './Timeline.styles';
+export type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline.types';

package/src/components/display/index.tsx

@@ -0,0 +1,143 @@
+// 导出 Avatar 组件
+export { Avatar } from './Avatar';
+
+// 导出 Badge 组件
+export { Badge } from './Badge';
+
+// 导出 Card 组件
+export { Card } from './Card';
+
+// 导出 List 组件
+export { List } from './List';
+
+// 导出 Rate 组件
+export { Rate } from './Rate';
+
+// 导出 Table 组件
+export { default as Table } from './Table';
+
+// 导出 Tag 组件
+export { Tag } from './Tag';
+
+// 导出 Timeline 组件
+export { Timeline } from './Timeline';
+
+// 导出 Calendar 组件
+export { Calendar } from './Calendar';
+
+// 导出 Carousel 组件
+export { Carousel } from './Carousel';
+
+// 导出类型定义
+export type { CardProps, CardRef } from './Card';
+export type { ListProps, ListRef, ListItemProps } from './List';
+export type { RateProps, RateRef, RateSize, RateCharacter, StarState } from './Rate';
+export type { TagProps, TagRef } from './Tag';
+export type { TimelineProps, TimelineRef, TimelineItemProps } from './Timeline';
+export type { CalendarProps, CalendarRef, CalendarDate, CalendarEvent } from './Calendar';
+export type { CarouselProps, CarouselRef } from './Carousel';
+export type {
+  TableProps,
+  TableRef,
+  TableColumn,
+  TableSortOrder,
+  TableFilterConfig,
+  TableAlign,
+  TableSize,
+  TableBorder,
+  TableRowSelection,
+  TablePagination,
+  TableExpandable,
+} from './Table';
+
+// 导出样式
+export { CardStyles as cardStyles } from './Card/Card.styles';
+export { ListStyles as listStyles } from './List/List.styles';
+export { rateStyles } from './Rate/Rate.styles';
+export { tagStyles } from './Tag/Tag.styles';
+export { timelineStyles } from './Timeline/Timeline.styles';
+export { calendarStyles } from './Calendar/Calendar.styles';
+export { carouselStyles } from './Carousel/Carousel.styles';
+export { tableStyles } from './Table/Table.styles';
+
+// 展示组件工具函数
+export const DisplayUtils = {
+  /**
+   * 格式化卡片数据
+   */
+  formatCardData: (data: any) => {
+    return {
+      ...data,
+      formattedDate: new Date().toLocaleDateString(),
+    };
+  },
+
+  /**
+   * 格式化表格数据
+   */
+  formatTableData: (data: any[], columns: any[]) => {
+    return data.map(item => {
+      const formattedItem: any = {};
+      columns.forEach(column => {
+        formattedItem[column.key] = item[column.key];
+      });
+      return formattedItem;
+    });
+  },
+
+  /**
+   * 格式化列表数据
+   */
+  formatListData: (data: any[]) => {
+    return data.map((item, index) => ({
+      ...item,
+      id: item.id || index,
+      key: item.key || index,
+    }));
+  },
+
+  /**
+   * 格式化标签数据
+   */
+  formatTagData: (tags: string[], colorMap?: Record<string, string>) => {
+    return tags.map((tag, index) => ({
+      key: index,
+      label: tag,
+      color: colorMap?.[tag] || 'default',
+    }));
+  },
+
+  /**
+   * 格式化时间线数据
+   */
+  formatTimelineData: (items: any[]) => {
+    return items.map((item, index) => ({
+      ...item,
+      key: item.key || index,
+      timestamp: item.timestamp || new Date().toISOString(),
+    }));
+  },
+
+  /**
+   * 格式化日历事件
+   */
+  formatCalendarEvents: (events: any[]) => {
+    return events.map((event, index) => ({
+      ...event,
+      id: event.id || `event-${index}`,
+      startTime: event.startTime || new Date().toISOString(),
+      type: event.type || 'default',
+    }));
+  },
+
+  /**
+   * 格式化轮播数据
+   */
+  formatCarouselData: (items: any[]) => {
+    return items.map((item, index) => ({
+      ...item,
+      key: item.key || index,
+      id: item.id || `slide-${index}`,
+    }));
+  },
+};