@mxmweb/zui 1.1.14 → 1.3.0

package/src/containers/style.css

@@ -1,37 +0,0 @@
-.osx-example {
-  background-image: url('images/osx/background.jpg');
-  background-color: #886e96;
-  background-position: center;
-  background-size: cover;
-}
-
-.osx-example .dock {
-  align-self: flex-end;
-}
-
-.osx-example .dock .dock-item {
-  padding: 6px 0px 3px 0px;
-  --active-indicator-height: 4px;
-  --active-indicator-margin: 2px;
-}
-
-.osx-example .dock .dock-item img {
-  height: calc(
-    100% - var(--active-indicator-height) - var(--active-indicator-margin)
-  );
-}
-
-.osx-example .dock .dock-item .active-indicator {
-  width: var(--active-indicator-height);
-  height: var(--active-indicator-height);
-  margin-top: var(--active-indicator-margin);
-  background-color: #444;
-  border-radius: 50%;
-}
-
-.osx-example .dock .dock-background {
-  background-color: #ccc;
-  opacity: 0.6;
-  border-radius: 4px 4px 0px 0px;
-  box-shadow: 1px 1px 50px 4px rgba(0, 0, 0, 0.8);
-}

package/src/elements/Button.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { defaultTheme, deepMergeTheme, type AppTheme, type Styles } from '../theme/styledTheme';
-
-// 按钮类型定义
-export type ButtonType = 'primary' | 'default' | 'error' | 'text' ;
-
-// 按钮属性接口
-export interface ButtonProps {
-  mode?: ButtonType;
-  label?: string;
-  styles?: Styles;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  loading?: boolean; // 新增：loading 状态
-  onClick?: () => void;
-  style?: React.CSSProperties;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-const StyledButton = styled.button<{ $btnType: ButtonType; $disabled: boolean; $loading: boolean; $theme: AppTheme }>`
-  height: 36px;
-  min-height: 36px;
-  max-height: 36px;
-  line-height: 34px;
-  padding: 0 12px;
-  border-radius: ${props => props.$theme?.space?.radius || '4px'};
-  font-size: 12px;
-  border: none;
-  cursor: ${props => props.$disabled || props.$loading ? 'not-allowed' : 'pointer'};
-  transition: all 0.2s;
-  opacity: ${props => props.$disabled ? 0.5 : 1};
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  position: relative;
-  background: ${({ $btnType, $theme }) =>
-    $btnType === 'text' ? 'none' :
-    $btnType === 'primary' ? $theme?.colors?.primary || '#007bff' :
-    $btnType === 'error' ? $theme?.colors?.error || '#FF0000' :
-    $btnType === 'default' ? $theme?.colors?.background || '#f8f9fa' :
-    'none'};
-  color: ${({ $btnType, $theme }) =>
-    $btnType === 'text' ? $theme?.colors?.primary || '#007bff' :
-    $btnType === 'primary' || $btnType === 'error'
-      ? '#ffffff'
-      : $theme?.colors?.text || '#343a40'};
-  border: ${({ $btnType, $theme }) =>
-    $btnType === 'default' ? `1px solid ${$theme?.colors?.border || '#dee2e6'}` : 'none'};
-  box-shadow: none;
-
-  /* Loading 状态样式 */
-  ${props => props.$loading && `
-    pointer-events: none;
-    opacity: 0.8;
-
-    .button-loading {
-      width: 14px;
-      height: 14px;
-      border: 2px solid transparent;
-      border-top: 2px solid currentColor;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin-right: 6px;
-    }
-  `}
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-`;
-
-const Button: React.FC<ButtonProps> = ({
-  mode = 'default',
-  label,
-  icon,
-  disabled = false,
-  loading = false, // 新增：loading 状态
-  onClick,
-  styles,
-  style,
-  className,
-  children,
-  ...rest
-}) => {
-    // 使用统一的主题合并函数，确保 theme 有完整的结构
-  const theme = deepMergeTheme(defaultTheme, styles);
-
-  const handleClick = () => {
-    if (!disabled && !loading && onClick) {
-      onClick();
-    }
-  };
-
-  return (
-    <StyledButton
-      $btnType={mode}
-      $disabled={disabled}
-      $loading={loading}
-      $theme={theme.theme || defaultTheme}
-      onClick={handleClick}
-      disabled={disabled || loading}
-      style={style}
-      className={className}
-      {...rest}
-    >
-      {loading && <span className="button-loading" />}
-      {icon && <span className="button-icon" style={{ marginRight: 4 }}>{icon}</span>}
-      {label && <span className="button-label">{label}</span>}
-      {children}
-    </StyledButton>
-  );
-};
-
-export default Button;

package/src/elements/CustomDock.tsx

@@ -1,287 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import anime from 'animejs/lib/anime.es.js';
-
-// Dock 项接口定义
-export interface DockItem {
-  id: string;
-  label: string;
-  icon: string;
-  onClick?: () => void;
-  isActive?: boolean;
-}
-
-// 激活模式类型
-export type ActiveMode = 'single' | 'multiple';
-
-// Dock 组件属性
-export interface CustomDockProps {
-  items: DockItem[];
-  itemWidth?: number;
-  itemHeight?: number;
-  magnification?: number;
-  itemGap?: number;
-  activeMode?: ActiveMode; // 激活模式：single | multiple
-  defaultActiveId?: string; // 单选模式：默认激活的项ID
-  defaultActiveIds?: string[]; // 多选模式：默认激活的项ID数组
-  onItemClick?: (item: DockItem, index: number) => void;
-  onActiveChange?: (activeId: string | null, item: DockItem | null) => void; // 单选模式：激活状态变化事件
-  onActiveChangeMultiple?: (activeIds: string[], items: DockItem[]) => void; // 多选模式：激活状态变化事件
-  className?: string;
-}
-
-// 毛玻璃背景容器
-const DockContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !['itemWidth', 'itemGap'].includes(prop),
-})<{ itemWidth: number; itemGap: number }>`
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.18);
-  backdrop-filter: saturate(180%) blur(20px);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.28);
-  border-radius: 14px;
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
-  width: fit-content;
-  margin: 0 auto;
-  min-width: ${props => props.itemWidth * 2}px;
-`;
-
-// 图标容器
-const IconContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !['itemWidth', 'itemHeight', 'itemGap', 'isHovered', 'magnification'].includes(prop),
-})<{
-  itemWidth: number;
-  itemHeight: number;
-  itemGap: number;
-  isHovered: boolean;
-  magnification: number;
-}>`
-  position: relative;
-  width: ${props => props.itemWidth}px;
-  height: ${props => props.itemHeight}px;
-  margin: 0 ${props => props.itemGap / 2}px;
-  cursor: pointer;
-  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  transform: ${props => props.isHovered ? `scale(${props.magnification})` : 'scale(1)'};
-  transform-origin: center bottom;
-  z-index: ${props => props.isHovered ? 10 : 1};
-`;
-
-// 图标图片
-const IconImage = styled.img.withConfig({
-  shouldForwardProp: (prop) => !['isActive'].includes(prop),
-})<{ isActive: boolean }>`
-  width: 80%;
-  height: 80%;
-  object-fit: contain;
-  border-radius: 8px;
-  transition: all 0.15s ease;
-  filter: ${props => props.isActive ? 'none' : 'grayscale(0.3) brightness(0.8)'};
-
-  &:hover {
-    filter: none;
-  }
-`;
-
-// 激活指示器
-const ActiveIndicator = styled.div.withConfig({
-  shouldForwardProp: (prop) => !['isActive'].includes(prop),
-})<{ isActive: boolean }>`
-  position: absolute;
-  bottom: -4px;
-  left: 40%;
-  transform: translateX(-50%);
-  width: 6px;
-  height: 6px;
-  background: #007AFF;
-  border-radius: 50%;
-  opacity: ${props => props.isActive ? 1 : 0};
-  transition: opacity 0.2s ease;
-`;
-
-// 工具提示
-const Tooltip = styled.div.withConfig({
-  shouldForwardProp: (prop) => !['visible'].includes(prop),
-})<{ visible: boolean }>`
-  position: absolute;
-  bottom: 100%;
-  left: 40%;
-  transform: translateX(-50%) translateY(-8px);
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 10px;
-  white-space: nowrap;
-  opacity: ${props => props.visible ? 1 : 0};
-  visibility: ${props => props.visible ? 'visible' : 'hidden'};
-  transition: all 0.2s ease;
-  z-index: 1000;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 4px solid transparent;
-    border-top-color: rgba(0, 0, 0, 0.8);
-  }
-`;
-
-const CustomDock: React.FC<CustomDockProps> = ({
-  items,
-  itemWidth = 48,
-  itemHeight = 48,
-  magnification = 1.2,
-  itemGap = 13,
-  activeMode = 'single',
-  defaultActiveId,
-  defaultActiveIds = [],
-  onItemClick,
-  onActiveChange,
-  onActiveChangeMultiple,
-  className
-}) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const [showTooltip, setShowTooltip] = useState<number | null>(null);
-
-  // 根据模式初始化激活状态
-  const getInitialActiveState = () => {
-    if (activeMode === 'multiple') {
-      return defaultActiveIds || [];
-    } else {
-      // 单选模式：如果没有传默认激活且没有传默认激活ID，则激活第一个
-      if (defaultActiveId) {
-        return defaultActiveId;
-      } else if (items.length > 0) {
-        return items[0].id;
-      }
-      return null;
-    }
-  };
-
-  const [activeId, setActiveId] = useState<string | null>(
-    activeMode === 'single' ? getInitialActiveState() as string | null : null
-  );
-  const [activeIds, setActiveIds] = useState<string[]>(
-    activeMode === 'multiple' ? getInitialActiveState() as string[] : []
-  );
-
-  const dockRef = useRef<HTMLDivElement>(null);
-  const iconRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  // 处理鼠标进入
-  const handleMouseEnter = (index: number) => {
-    setHoveredIndex(index);
-    setShowTooltip(index);
-
-    // 使用 anime.js 实现平滑的放大动画
-    const iconElement = iconRefs.current[index];
-    if (iconElement) {
-      anime({
-        targets: iconElement,
-        scale: magnification,
-        duration: 200,
-        easing: 'easeOutCubic'
-      });
-    }
-  };
-
-  // 处理鼠标离开
-  const handleMouseLeave = (index: number) => {
-    setHoveredIndex(null);
-    setShowTooltip(null);
-
-    // 恢复原始大小
-    const iconElement = iconRefs.current[index];
-    if (iconElement) {
-      anime({
-        targets: iconElement,
-        scale: 1,
-        duration: 200,
-        easing: 'easeOutCubic'
-      });
-    }
-  };
-
-  // 处理点击
-  const handleClick = (item: DockItem, index: number) => {
-    if (activeMode === 'single') {
-      // 单选模式：不支持取消激活，只能切换激活项
-      if (activeId !== item.id) {
-        setActiveId(item.id);
-
-        // 触发激活状态变化事件
-        if (onActiveChange) {
-          onActiveChange(item.id, item);
-        }
-      }
-    } else {
-      // 多选模式：支持激活/取消激活
-      const newActiveIds = activeIds.includes(item.id)
-        ? activeIds.filter(id => id !== item.id)
-        : [...activeIds, item.id];
-
-      setActiveIds(newActiveIds);
-
-      // 触发多选激活状态变化事件
-      if (onActiveChangeMultiple) {
-        const activeItems = items.filter(i => newActiveIds.includes(i.id));
-        onActiveChangeMultiple(newActiveIds, activeItems);
-      }
-    }
-
-    if (onItemClick) {
-      onItemClick(item, index);
-    }
-    if (item.onClick) {
-      item.onClick();
-    }
-  };
-
-  // 初始化图标引用数组
-  useEffect(() => {
-    iconRefs.current = iconRefs.current.slice(0, items.length);
-  }, [items.length]);
-
-  return (
-    <DockContainer
-      ref={dockRef}
-      itemWidth={itemWidth}
-      itemGap={itemGap}
-      className={className}
-    >
-      {items.map((item, index) => (
-        <IconContainer
-          key={item.id}
-          ref={el => iconRefs.current[index] = el}
-          itemWidth={itemWidth}
-          itemHeight={itemHeight}
-          itemGap={itemGap}
-          isHovered={hoveredIndex === index}
-          magnification={magnification}
-          onMouseEnter={() => handleMouseEnter(index)}
-          onMouseLeave={() => handleMouseLeave(index)}
-          onClick={() => handleClick(item, index)}
-        >
-          <IconImage
-            src={item.icon}
-            alt={item.label}
-            isActive={activeMode === 'single' ? activeId === item.id : activeIds.includes(item.id)}
-          />
-          <ActiveIndicator isActive={activeMode === 'single' ? activeId === item.id : activeIds.includes(item.id)} />
-          <Tooltip visible={showTooltip === index}>
-            {item.label}
-          </Tooltip>
-        </IconContainer>
-      ))}
-    </DockContainer>
-  );
-};
-
-export default CustomDock;

package/src/elements/DropDownButton.tsx

@@ -1,249 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { ChevronDown } from 'lucide-react';
-import styled from 'styled-components';
-import { defaultTheme, deepMergeTheme, type AppTheme, type Styles } from '../theme/styledTheme';
-import Button from './Button';
-
-// 下拉菜单选项接口 - 与DropdownMenu保持一致
-export interface DropDownButtonAction {
-  key: string;
-  label?: string;
-  component?: React.ReactNode; // 新增component支持
-  type?: 'divider' | 'action';
-  icon?: React.ReactNode;
-  onClick?: () => void;
-}
-
-// 下拉按钮属性接口
-export interface DropDownButtonProps {
-  mode?: 'primary' | 'default' | 'error' | 'text';
-  label?: string;
-  actions: DropDownButtonAction[];
-  styles?: Styles;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-  style?: React.CSSProperties;
-  className?: string;
-  children?: React.ReactNode;
-  // 事件回传函数
-  eventEmit?: (eventName: string, data?: any, innerFn?: any) => void;
-}
-
-// 下拉菜单容器样式
-const DropdownContainer = styled.div<{ $theme: AppTheme; $buttonRect: DOMRect | null }>`
-  position: fixed;
-  background: ${props => props.$theme?.colors?.background || '#f8f9fa'};
-  border: 1px solid ${props => props.$theme?.colors?.border || '#dee2e6'};
-  border-radius: ${props => props.$theme?.space?.radius || '4px'};
-  box-shadow: ${props => props.$theme?.colors?.shadow || '0 1px 3px rgba(0, 0, 0, 0.12)'};
-  z-index: 9999;
-  min-width: ${props => props.$buttonRect ? `${props.$buttonRect.width}px` : 'auto'};
-  max-width: 300px;
-  overflow: hidden;
-  padding: 4px 0;
-`;
-
-// 下拉菜单项样式
-const DropdownItem = styled.div<{ $theme: AppTheme }>`
-  padding: 8px 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: ${props => props.$theme?.colors?.text || '#343a40'};
-  background: transparent;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background: ${props => props.$theme?.colors?.disabledBackground || '#F5F5F5'};
-  }
-
-  &:first-child {
-    border-top-left-radius: ${props => props.$theme?.space?.radius || '4px'};
-    border-top-right-radius: ${props => props.$theme?.space?.radius || '4px'};
-  }
-
-  &:last-child {
-    border-bottom-left-radius: ${props => props.$theme?.space?.radius || '4px'};
-    border-bottom-right-radius: ${props => props.$theme?.space?.radius || '4px'};
-  }
-`;
-
-// 分割线样式
-const Divider = styled.div<{ $theme: AppTheme }>`
-  height: 1px;
-  background: ${props => props.$theme?.colors?.border || '#dee2e6'};
-  margin: 4px 0;
-`;
-
-const DropDownButton: React.FC<DropDownButtonProps> = ({
-  mode = 'default',
-  label = '选择选项',
-  actions,
-  styles,
-  icon,
-  disabled = false,
-  style,
-  className,
-  children,
-  eventEmit,
-  ...rest
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef<HTMLDivElement>(null);
-  const [buttonRect, setButtonRect] = useState<DOMRect | null>(null);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
-
-    // 使用统一的主题合并函数，确保 theme 有完整的结构
-  const theme = deepMergeTheme(defaultTheme, styles?.theme);
-
-  // 检查eventEmit属性是否正确传递
-  useEffect(() => {
-    console.log('[DropDownButton] 组件挂载，eventEmit:', eventEmit);
-    console.log('[DropDownButton] actions:', actions);
-  }, [eventEmit, actions]);
-
-  // 计算下拉菜单位置
-  const calculatePosition = () => {
-    if (!buttonRef.current) return;
-
-    const rect = buttonRef.current.getBoundingClientRect();
-    setButtonRect(rect);
-
-    // 计算下拉菜单位置
-    const top = rect.bottom + 4; // 按钮下方4px
-    const left = rect.left;
-
-    setDropdownPosition({ top, left });
-  };
-
-  // 点击外部关闭下拉菜单
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    const handleScroll = () => setIsOpen(false);
-    const handleResize = () => setIsOpen(false);
-
-    document.addEventListener('mousedown', handleClickOutside);
-    window.addEventListener('scroll', handleScroll, true);
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      window.removeEventListener('scroll', handleScroll, true);
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [isOpen]);
-
-  // 处理选项点击 - 与DropdownMenu保持一致
-  const handleAction = (key: string) => {
-    // 使用eventsEmit进行事件回传
-    if (eventEmit) {
-      eventEmit('dropdown_action', { key });
-    }
-
-    setIsOpen(false);
-  };
-
-  // 处理按钮点击
-  const handleButtonClick = () => {
-    if (disabled) return;
-
-    if (!isOpen) {
-      calculatePosition();
-    }
-
-    setIsOpen(!isOpen);
-  };
-
-  // 渲染下拉菜单
-  const renderDropdown = () => {
-    if (!isOpen || !buttonRect) return null;
-
-    return (
-      <DropdownContainer
-        $theme={theme.theme || defaultTheme}
-        $buttonRect={buttonRect}
-        style={{
-          top: dropdownPosition.top,
-          left: dropdownPosition.left,
-        }}
-      >
-        {actions.map((action, index) => {
-          // 处理divider类型
-          if (action.type === 'divider') {
-            return (
-              <Divider
-                key={action.key || `divider-${index}`}
-                $theme={theme.theme || defaultTheme}
-              />
-            );
-          }
-
-          // 处理普通action类型
-          return (
-            <DropdownItem
-              key={action.key || `action-${index}`}
-              $theme={theme.theme || defaultTheme}
-              onMouseDown={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleAction(action.key);
-                if (action.onClick) action.onClick();
-              }}
-            >
-              {action.icon && <span className="mr-2">{action.icon}</span>}
-              {/* 优先显示component，如果没有则显示label */}
-              {action.component || action.label}
-            </DropdownItem>
-          );
-        })}
-      </DropdownContainer>
-    );
-  };
-
-  return (
-    <div
-      ref={buttonRef}
-      style={{ position: 'relative', display: 'inline-block' }}
-      className={className}
-    >
-      <Button
-        mode={mode}
-        label={label}
-        icon={icon}
-        disabled={disabled}
-        onClick={handleButtonClick} // 保留这个点击事件用于显示/隐藏下拉菜单
-        styles={styles}
-        style={style}
-        {...rest}
-      >
-        {children}
-        <ChevronDown
-          size={14}
-          style={{
-            marginLeft: 4,
-            transition: 'transform 0.2s',
-            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
-          }}
-        />
-      </Button>
-
-      {/* 使用Portal渲染下拉菜单到body */}
-      {isOpen && createPortal(renderDropdown(), document.body)}
-    </div>
-  );
-};
-
-export default DropDownButton;