taro-uno-ui 0.9.0-beta

package/src/components/layout/Grid/Grid.tsx

@@ -0,0 +1,173 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View } from '@tarojs/components';
+import type { ITouchEvent } from '@tarojs/components';
+import { gridStyles } from './Grid.styles';
+import type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid.types';
+
+/** Grid组件 */
+export const GridComponent = forwardRef<GridRef, GridProps>((props, ref) => {
+  const {
+    children,
+    cols = 1,
+    rows,
+    gap = 'default',
+    rowGap,
+    columnGap,
+    align = 'stretch',
+    justify = 'start',
+    className,
+    style,
+    onClick,
+    onItemHover,
+    onItemClick,
+    responsive,
+    ...restProps
+  } = props;
+
+  const gridRef = useRef<any>(null);
+  const [internalCols, setInternalCols] = useState<GridCols>(cols);
+  const [internalAlign, setInternalAlign] = useState<GridAlign>(align);
+  const [internalJustify, setInternalJustify] = useState<GridJustify>(justify);
+  const [internalGap, setInternalGap] = useState<GridGap>(gap);
+  const [internalRowGap, setInternalRowGap] = useState(rowGap);
+  const [internalColumnGap, setInternalColumnGap] = useState(columnGap);
+
+  // 更新内部状态
+  useEffect(() => {
+    setInternalCols(cols);
+  }, [cols]);
+
+  useEffect(() => {
+    setInternalAlign(align);
+  }, [align]);
+
+  useEffect(() => {
+    setInternalJustify(justify);
+  }, [justify]);
+
+  useEffect(() => {
+    setInternalGap(gap);
+  }, [gap]);
+
+  useEffect(() => {
+    setInternalRowGap(rowGap);
+  }, [rowGap]);
+
+  useEffect(() => {
+    setInternalColumnGap(columnGap);
+  }, [columnGap]);
+
+  // 处理点击事件
+  const handleClick = useCallback(
+    (event: ITouchEvent) => {
+      onClick?.(event);
+    },
+    [onClick],
+  );
+
+  // 处理子元素点击事件
+  const handleItemClick = useCallback(
+    (index: number, event: ITouchEvent) => {
+      onItemClick?.(index, event);
+    },
+    [onItemClick],
+  );
+
+  // 处理子元素悬停事件
+  const handleItemHover = useCallback(
+    (index: number, event: ITouchEvent) => {
+      onItemHover?.(index, event);
+    },
+    [onItemHover],
+  );
+
+  // 渲染子元素
+  const renderChildren = () => {
+    if (!children) return null;
+
+    const childrenArray = React.Children.toArray(children);
+
+    return childrenArray.map((child, index) => (
+      <View
+        key={index}
+        className="taro-uno-grid__item"
+        style={gridStyles['getItemStyle'](index, childrenArray.length, internalCols)}
+        onClick={(e: ITouchEvent) => handleItemClick(index, e)}
+        onTouchStart={(event) => handleItemHover(index, event as ITouchEvent)}
+        onTouchEnd={(event) => handleItemHover(index, event as ITouchEvent)}
+      >
+        {child}
+      </View>
+    ));
+  };
+
+  // 计算样式
+  const gridStyle = gridStyles['getBaseStyle']({
+    cols: internalCols,
+    rows,
+    gap: internalGap,
+    rowGap: internalRowGap,
+    columnGap: internalColumnGap,
+    align: internalAlign,
+    justify: internalJustify,
+    style: style || {},
+  });
+
+  // 计算响应式样式
+  const responsiveStyle = responsive ? gridStyles['getResponsiveStyle'](responsive) : {};
+
+  // 计算类名
+  const gridClassName = gridStyles['getClassName']({
+    cols: internalCols,
+    align: internalAlign,
+    justify: internalJustify,
+    gap: internalGap,
+    className: className || '',
+  });
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: gridRef.current,
+      getCols: () => internalCols,
+      getAlign: () => internalAlign,
+      getJustify: () => internalJustify,
+      getGap: () => internalGap,
+      setCols: (newCols: GridCols) => {
+        setInternalCols(newCols);
+      },
+      setAlign: (newAlign: GridAlign) => {
+        setInternalAlign(newAlign);
+      },
+      setJustify: (newJustify: GridJustify) => {
+        setInternalJustify(newJustify);
+      },
+      setGap: (newGap: GridGap) => {
+        setInternalGap(newGap);
+      },
+      scrollIntoView: (options?: ScrollIntoViewOptions) => {
+        gridRef.current?.scrollIntoView(options);
+      },
+    }),
+    [internalCols, internalAlign, internalJustify, internalGap],
+  );
+
+  return (
+    <View
+      ref={gridRef}
+      className={gridClassName}
+      style={{ ...gridStyle, ...responsiveStyle }}
+      onClick={handleClick}
+      {...restProps}
+    >
+      {renderChildren()}
+    </View>
+  );
+});
+
+/** Grid组件显示名称 */
+GridComponent.displayName = 'Grid';
+
+/** 导出Grid组件 */
+export const Grid = GridComponent;

package/src/components/layout/Grid/Grid.types.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+import { BaseComponentProps, Size, CSSUnit } from '../../../types';
+
+/** Grid组件对齐方式 */
+export type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+
+/** Grid组件对齐方式 */
+export type GridJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+/** Grid组件间距 */
+export type GridGap =
+  | Size
+  | number
+  | `${number}${CSSUnit}`
+  | [Size | number | `${number}${CSSUnit}`, Size | number | `${number}${CSSUnit}`];
+
+/** Grid组件列数 */
+export type GridCols = string | number | `${number}`;
+
+/** Grid组件引用 */
+export interface GridRef {
+  /** 获取元素引用 */
+  element: any;
+  /** 获取当前列数 */
+  getCols: () => GridCols;
+  /** 获取当前对齐方式 */
+  getAlign: () => GridAlign;
+  /** 获取当前对齐方式 */
+  getJustify: () => GridJustify;
+  /** 获取当前间距 */
+  getGap: () => GridGap;
+  /** 设置列数 */
+  setCols: (_cols: GridCols) => void;
+  /** 设置对齐方式 */
+  setAlign: (_align: GridAlign) => void;
+  /** 设置对齐方式 */
+  setJustify: (_justify: GridJustify) => void;
+  /** 设置间距 */
+  setGap: (_gap: GridGap) => void;
+  /** 滚动到视图 */
+  scrollIntoView: (options?: ScrollIntoViewOptions) => void;
+}
+
+/** Grid组件属性 */
+export interface GridProps extends BaseComponentProps {
+  /** 子元素 */
+  children?: ReactNode;
+  /** 列数 */
+  cols?: GridCols;
+  /** 行数 */
+  rows?: number | undefined;
+  /** 间距 */
+  gap?: GridGap;
+  /** 垂直间距 */
+  rowGap?: Size | number | `${number}${CSSUnit}` | undefined;
+  /** 水平间距 */
+  columnGap?: Size | number | `${number}${CSSUnit}` | undefined;
+  /** 对齐方式 */
+  align?: GridAlign;
+  /** 对齐方式 */
+  justify?: GridJustify;
+  /** 点击事件 */
+  onClick?: (_event: ITouchEvent) => void;
+  /** 子元素悬停事件 */
+  onItemHover?: (_index: number, event: ITouchEvent) => void;
+  /** 子元素点击事件 */
+  onItemClick?: (_index: number, event: ITouchEvent) => void;
+  /** 响应式断点 */
+  responsive?: {
+    xs?: Partial<GridProps>;
+    sm?: Partial<GridProps>;
+    md?: Partial<GridProps>;
+    lg?: Partial<GridProps>;
+    xl?: Partial<GridProps>;
+    xxl?: Partial<GridProps>;
+  };
+}

package/src/components/layout/Grid/index.tsx

@@ -0,0 +1,3 @@
+export { Grid, GridComponent } from './Grid';
+export type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid.types';
+export { gridStyles } from './Grid.styles';

package/src/components/layout/Layout/Content.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+import { View } from '@tarojs/components'
+import { LayoutContentProps, LayoutContentRef } from './Layout.types'
+import { getContentStyle } from './Layout.styles'
+
+export const LayoutContent = forwardRef<LayoutContentRef, LayoutContentProps>(({
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const contentRef = React.useRef<any>(null)
+
+  useImperativeHandle(ref, () => ({
+    getContent: () => contentRef.current,
+  }))
+
+  const contentStyle = getContentStyle(style)
+  const finalStyle = {
+    ...contentStyle,
+    ...style,
+  }
+
+  return (
+    <View
+      ref={contentRef}
+      className={className}
+      style={finalStyle}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+
+LayoutContent.displayName = 'LayoutContent'
+
+export default LayoutContent

package/src/components/layout/Layout/Footer.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+import { View } from '@tarojs/components'
+import { LayoutFooterProps, LayoutFooterRef } from './Layout.types'
+import { getFooterStyle } from './Layout.styles'
+
+export const LayoutFooter = forwardRef<LayoutFooterRef, LayoutFooterProps>(({
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const footerRef = React.useRef<any>(null)
+
+  useImperativeHandle(ref, () => ({
+    getFooter: () => footerRef.current,
+  }))
+
+  const footerStyle = getFooterStyle(style)
+  const finalStyle = {
+    ...footerStyle,
+    ...style,
+  }
+
+  return (
+    <View
+      ref={footerRef}
+      className={className}
+      style={finalStyle}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+
+LayoutFooter.displayName = 'LayoutFooter'
+
+export default LayoutFooter

package/src/components/layout/Layout/Header.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+import { View } from '@tarojs/components'
+import { LayoutHeaderProps, LayoutHeaderRef } from './Layout.types'
+import { getHeaderStyle } from './Layout.styles'
+
+export const LayoutHeader = forwardRef<LayoutHeaderRef, LayoutHeaderProps>(({
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const headerRef = React.useRef<any>(null)
+
+  useImperativeHandle(ref, () => ({
+    getHeader: () => headerRef.current,
+  }))
+
+  const headerStyle = getHeaderStyle(style)
+  const finalStyle = {
+    ...headerStyle,
+    ...style,
+  }
+
+  return (
+    <View
+      ref={headerRef}
+      className={className}
+      style={finalStyle}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+
+LayoutHeader.displayName = 'LayoutHeader'
+
+export default LayoutHeader

package/src/components/layout/Layout/Layout.styles.ts

@@ -0,0 +1,84 @@
+export const layoutStyles = {
+  layout: {
+    display: 'flex' as const,
+    flexDirection: 'column' as const,
+    flex: 1,
+    minHeight: '100vh',
+    backgroundColor: '#f0f2f5',
+  },
+  layoutHasSider: {
+    flexDirection: 'row' as const,
+  },
+  header: {
+    height: 64,
+    padding: '0 50px',
+    lineHeight: '64px',
+    background: '#001529',
+    color: '#fff',
+    position: 'relative' as const,
+    zIndex: 10,
+  },
+  content: {
+    flex: 1,
+    padding: 24,
+    minHeight: 280,
+    background: '#fff',
+    margin: '24px',
+    borderRadius: 2,
+  },
+  footer: {
+    padding: '24px 50px',
+    color: 'rgba(0, 0, 0, 0.45)',
+    textAlign: 'center' as const,
+    background: '#f0f2f5',
+  },
+  sider: {
+    background: '#001529',
+    transition: 'all 0.2s',
+    overflow: 'auto' as const,
+    height: '100vh',
+    position: 'fixed' as const,
+    left: 0,
+    top: 0,
+    bottom: 0,
+  },
+  siderCollapsed: {
+    width: 80,
+  },
+  siderExpanded: {
+    width: 200,
+  },
+}
+
+export const getLayoutStyle = (hasSider?: boolean) => {
+  const style = { ...layoutStyles.layout }
+  if (hasSider) {
+    Object.assign(style, layoutStyles.layoutHasSider)
+  }
+  return style
+}
+
+export const getHeaderStyle = (customStyle?: React.CSSProperties) => {
+  return { ...layoutStyles.header, ...customStyle }
+}
+
+export const getContentStyle = (customStyle?: React.CSSProperties) => {
+  return { ...layoutStyles.content, ...customStyle }
+}
+
+export const getFooterStyle = (customStyle?: React.CSSProperties) => {
+  return { ...layoutStyles.footer, ...customStyle }
+}
+
+export const getSiderStyle = (collapsed?: boolean, width?: number | string, customStyle?: React.CSSProperties) => {
+  const style: React.CSSProperties = { ...layoutStyles.sider }
+  if (collapsed) {
+    Object.assign(style, layoutStyles.siderCollapsed)
+  } else {
+    Object.assign(style, layoutStyles.siderExpanded)
+  }
+  if (width) {
+    style.width = width
+  }
+  return { ...style, ...customStyle }
+}

package/src/components/layout/Layout/Layout.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { Layout } from './Layout'
+
+describe('Layout', () => {
+  it('renders children', () => {
+    render(<Layout><div>内容区域</div></Layout>)
+    expect(screen.getByText('内容区域')).toBeInTheDocument()
+  })
+})

package/src/components/layout/Layout/Layout.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, useImperativeHandle } from 'react'
+import { View } from '@tarojs/components'
+import { LayoutProps, LayoutRef } from './Layout.types'
+import { getLayoutStyle } from './Layout.styles'
+
+export const Layout = forwardRef<LayoutRef, LayoutProps>(({
+  className,
+  style,
+  children,
+  hasSider,
+  ...props
+}, ref) => {
+  const layoutRef = React.useRef<any>(null)
+
+  useImperativeHandle(ref, () => ({
+    getLayout: () => layoutRef.current,
+  }))
+
+  const layoutStyle = getLayoutStyle(hasSider)
+  const finalStyle = {
+    ...layoutStyle,
+    ...style,
+  }
+
+  return (
+    <View
+      ref={layoutRef}
+      className={className}
+      style={finalStyle}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+
+Layout.displayName = 'Layout'
+
+export default Layout

package/src/components/layout/Layout/Layout.types.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react'
+import { ViewProps } from '@tarojs/components'
+
+export interface LayoutProps extends ViewProps {
+  className?: string
+  style?: React.CSSProperties
+  children?: ReactNode
+  hasSider?: boolean
+}
+
+export interface LayoutHeaderProps extends ViewProps {
+  className?: string
+  style?: React.CSSProperties
+  children?: ReactNode
+}
+
+export interface LayoutContentProps extends ViewProps {
+  className?: string
+  style?: React.CSSProperties
+  children?: ReactNode
+}
+
+export interface LayoutFooterProps extends ViewProps {
+  className?: string
+  style?: React.CSSProperties
+  children?: ReactNode
+}
+
+export interface LayoutSiderProps extends ViewProps {
+  className?: string
+  style?: React.CSSProperties
+  children?: ReactNode
+  width?: number | string
+  collapsed?: boolean
+  collapsedWidth?: number | string
+  onCollapse?: (_collapsed: boolean) => void
+}
+
+export interface LayoutRef {
+  getLayout: () => HTMLDivElement | null
+}
+
+export interface LayoutHeaderRef {
+  getHeader: () => HTMLDivElement | null
+}
+
+export interface LayoutContentRef {
+  getContent: () => HTMLDivElement | null
+}
+
+export interface LayoutFooterRef {
+  getFooter: () => HTMLDivElement | null
+}
+
+export interface LayoutSiderRef {
+  getSider: () => HTMLDivElement | null
+  toggleCollapse: () => void
+}

package/src/components/layout/Layout/Sider.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react'
+import { View } from '@tarojs/components'
+import { LayoutSiderProps, LayoutSiderRef } from './Layout.types'
+import { getSiderStyle } from './Layout.styles'
+
+export const LayoutSider = forwardRef<LayoutSiderRef, LayoutSiderProps>(({
+  className,
+  style,
+  children,
+  width = 200,
+  collapsed = false,
+  collapsedWidth = 80,
+  onCollapse,
+  ...props
+}, ref) => {
+  const [isCollapsed, setIsCollapsed] = useState(collapsed)
+  const siderRef = React.useRef<any>(null)
+
+  const toggleCollapse = useCallback(() => {
+    const newCollapsed = !isCollapsed
+    setIsCollapsed(newCollapsed)
+    onCollapse?.(newCollapsed)
+  }, [isCollapsed, onCollapse])
+
+  useImperativeHandle(ref, () => ({
+    getSider: () => siderRef.current,
+    toggleCollapse,
+  }))
+
+  React.useEffect(() => {
+    setIsCollapsed(collapsed)
+  }, [collapsed])
+
+  const currentWidth = isCollapsed ? collapsedWidth : width
+
+  const siderStyle = getSiderStyle(isCollapsed, currentWidth, style)
+  const finalStyle = {
+    ...siderStyle,
+    ...style,
+  }
+
+  return (
+    <View
+      ref={siderRef}
+      className={className}
+      style={finalStyle}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+
+LayoutSider.displayName = 'LayoutSider'
+
+export default LayoutSider

package/src/components/layout/Layout/index.tsx

@@ -0,0 +1,8 @@
+export { Layout } from './Layout';
+export { LayoutHeader } from './Header';
+export { LayoutContent } from './Content';
+export { LayoutFooter } from './Footer';
+export { LayoutSider } from './Sider';
+export type { LayoutProps, LayoutRef, LayoutHeaderProps, LayoutContentProps, LayoutFooterProps, LayoutSiderProps } from './Layout.types';
+export type { LayoutHeaderRef, LayoutContentRef, LayoutFooterRef, LayoutSiderRef } from './Layout.types';
+export { layoutStyles, getLayoutStyle, getHeaderStyle, getContentStyle, getFooterStyle, getSiderStyle } from './Layout.styles';