@mxmweb/zui 1.1.2 → 1.1.10

package/src/elements/DropdownMenu.tsx

@@ -1,184 +0,0 @@
-import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { MoreHorizontal } from 'lucide-react';
-import { defaultTheme, type AppTheme, type Styles } from '../theme/styledTheme';
-
-export interface DropdownMenuAction {
-  key: string;
-  label?: string;
-  type?: 'divider' | 'action';
-  icon?: React.ReactNode;
-  onClick?: () => void;
-}
-
-interface DropdownMenuProps {
-  actions: DropdownMenuAction[];
-  onAction: (key: string) => void;
-  direction?: 'top' | 'bottom';
-  styles?: Styles;
-}
-
-const DropdownMenu: React.FC<DropdownMenuProps> = ({
-  actions,
-  onAction,
-  direction = 'top',
-  styles,
-}) => {
-  const [open, setOpen] = useState(false);
-  const btnRef = useRef<HTMLButtonElement>(null);
-  const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({});
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // 计算弹出层位置
-  useEffect(() => {
-    if (!open) return;
-    const btn = btnRef.current;
-    if (!btn) return;
-    const rect = btn.getBoundingClientRect();
-    const scrollX = window.scrollX || window.pageXOffset;
-    const scrollY = window.scrollY || window.pageYOffset;
-    const width = 128; // 菜单宽度
-    const margin = 8;
-    let style: React.CSSProperties = {
-      position: 'absolute',
-      left: rect.right - width + scrollX,
-      width,
-      zIndex: 9999,
-    };
-    if (direction === 'bottom') {
-      style.top = rect.bottom + margin - 12 + scrollY;
-    } else {
-      const itemHeight = 30; // 单个菜单项高度
-      const padding = 1; // 上下padding
-      const menuHeight = actions.length * itemHeight + padding;
-      style.top = rect.top - margin + 10 - menuHeight + scrollY;
-    }
-    setMenuStyle(style);
-  }, [open, direction, actions]);
-
-  // 点击外部关闭、滚动关闭
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e: MouseEvent) => {
-      if (btnRef.current && btnRef.current.contains(e.target as Node)) return;
-      if (menuRef.current && menuRef.current.contains(e.target as Node)) return;
-      setOpen(false);
-    };
-    const handleScroll = () => setOpen(false);
-    document.addEventListener('mousedown', handleClick);
-    window.addEventListener('scroll', handleScroll, true);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, [open]);
-
-  // 使用默认主题作为兜底
-  const theme = styles?.theme || defaultTheme;
-
-  // 菜单内容
-  const menu = (
-    <div
-      ref={menuRef}
-      className={`origin-bottom-right absolute right-0 w-32 rounded-md shadow-lg focus:outline-none border transition-all duration-200 ease-in-out
-        ${open ? 'opacity-100 translate-y-0 pointer-events-auto scale-100' : 'opacity-0 pointer-events-none scale-95'}
-      `}
-      style={{
-        ...menuStyle,
-        background: theme.colors.background,
-        color: theme.colors.text,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.space.radius,
-        boxShadow: theme.colors.shadow,
-        minWidth: 128,
-        zIndex: 9999,
-      }}
-    >
-      <div className="py-1 px-2">
-        {actions.map((action, index) => {
-          // 处理divider类型
-          if (action.type === 'divider') {
-            return (
-              <div
-                key={action.key || `divider-${index}`}
-                className="my-2 bg-gray-100"
-                style={{
-                  height: 1,
-                }}
-              />
-            );
-          }
-
-          // 处理普通action类型
-          return (
-            <button
-              key={action.key || `action-${index}`}
-              className="w-full rounded flex cursor-pointer items-center px-4 py-2 text-sm transition whitespace-nowrap"
-              style={{
-                color: theme.colors.text,
-                background: 'transparent',
-                border: 'none',
-                // borderRadius: theme.space.radius,
-                fontSize: 12,
-              }}
-              onClick={e => {
-                e.stopPropagation();
-                setOpen(false);
-                onAction(action.key);
-                if (action.onClick) action.onClick();
-              }}
-              type="button"
-              onMouseOver={e =>
-                (e.currentTarget.style.background = theme.colors.disabledBackground)
-              }
-              onMouseOut={e => (e.currentTarget.style.background = 'transparent')}
-            >
-              {action.icon && <span className="mr-2">{action.icon}</span>}
-              {action.label}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      <button
-        ref={btnRef}
-        className="card-action-more-btn cursor-pointer! flex items-center justify-center w-9 h-9 rounded-sm transition border-none outline-none"
-        style={{
-          background: 'transparent', // 默认透明背景
-          color: theme.colors.primary,
-          borderRadius: theme.space.radius,
-        }}
-        onClick={e => {
-          e.stopPropagation();
-          setOpen(v => !v);
-        }}
-        tabIndex={0}
-        aria-label="更多操作"
-        type="button"
-      >
-        <MoreHorizontal size={18} className="text-blue-500" />
-      </button>
-      {open && createPortal(menu, document.body)}
-    </>
-  );
-};
-
-export default DropdownMenu;
-
-if (typeof window !== 'undefined' && !document.getElementById('card-action-more-btn-style')) {
-  const style = document.createElement('style');
-  style.id = 'card-action-more-btn-style';
-  style.innerHTML = `
-    .card-action-more-btn:hover {
-      background: #f5f6fa !important;
-      color: #222 !important;
-      box-shadow: 0 2px 8px 0 rgba(51,112,255,0.06);
-    }
-  `;
-  document.head.appendChild(style);
-}

package/src/elements/GoggleNavbar.tsx

@@ -1,184 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { defaultTheme, deepMergeTheme, type AppTheme, type Styles } from '../theme/styledTheme';
-
-export interface GoggleNavItem {
-  key: string | number;
-  name: string;
-  disabled?: boolean;
-  icon?: string | React.ReactNode;
-  activeIcon?: string | React.ReactNode;
-  path?: string; // 用于激活态判断
-  badge?: number;
-}
-
-export interface GoggleNavbarProps {
-  items: GoggleNavItem[];
-  /** 当前激活路径，控制激活态渲染 */
-  activePath?: string;
-  /** 初始展开状态（非受控） */
-  defaultOpen?: boolean;
-  /** 受控展开状态 */
-  open?: boolean;
-  /** 展开状态变化回调（用于受控） */
-  onOpenChange?: (open: boolean) => void;
-  /** 点击项回调 */
-  onItemClick?: (item: GoggleNavItem) => void;
-  /** 顶部 Logo 图，可以是图片地址或 ReactNode */
-  logo?: string | React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  styles?: Styles;
-}
-
-const Container = styled.div<{ $theme: AppTheme }>`
-  background-color: #ffffff;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-  border-radius: ${p => p.$theme?.space?.radius || '8px'};
-  height: 90vh;
-  overflow: hidden;
-  position: relative;
-`;
-
-const useNavIconStyles = () => {
-  useEffect(() => {
-    const styleId = 'goggle-nav-icon-styles';
-    if (!document.getElementById(styleId)) {
-      const styleEl = document.createElement('style');
-      styleEl.id = styleId;
-      styleEl.innerHTML = `
-        :root { --color-gray: #64748b; --color-blue: #3b82f6; }
-        .g-nav-item { position: relative; transition: all .3s ease; border-radius: 8px; }
-        .g-nav-icon img { transition: all .3s ease; filter: grayscale(100%) brightness(100%) opacity(.7); }
-        .g-nav-text { color: var(--color-gray); transition: color .3s ease; }
-        .g-nav-item:not(.active):hover .g-nav-icon img { filter: sepia(100%) saturate(1000%) hue-rotate(200deg) brightness(80%) opacity(1); transform: scale(1.05); }
-        .g-nav-item:not(.active):hover .g-nav-text { color: var(--color-blue); font-weight: 500; }
-        .g-nav-item.active { background-color: rgba(219,234,254,0.6); }
-        .g-nav-item.active .g-nav-icon img { filter: sepia(100%) saturate(1000%) hue-rotate(200deg) brightness(100%) opacity(1); transform: scale(1.05); }
-        .g-nav-item.active .g-nav-text { color: var(--color-blue); opacity: .8; font-weight: 500; }
-        .g-nav-item.active::before { content: ''; position: absolute; left: 0; top: 30%; bottom: 30%; width: 3px; background: var(--color-blue); border-radius: 0 2px 2px 0; }
-      `;
-      document.head.appendChild(styleEl);
-    }
-  }, []);
-};
-
-const GoggleNavbar: React.FC<GoggleNavbarProps> = ({
-  items,
-  activePath,
-  defaultOpen = true,
-  open,
-  onOpenChange,
-  onItemClick,
-  logo,
-  className,
-  style,
-  styles,
-}) => {
-  const theme = deepMergeTheme(defaultTheme, styles?.theme);
-  useNavIconStyles();
-
-  const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-  const isOpen = typeof open === 'boolean' ? open : internalOpen;
-  const setOpen = (val: boolean) => {
-    if (typeof open === 'boolean') {
-      onOpenChange?.(val);
-    } else {
-      setInternalOpen(val);
-      onOpenChange?.(val);
-    }
-  };
-  const [isHover, setIsHover] = useState(false);
-
-  const renderIcon = (icon?: string | React.ReactNode) => {
-    if (!icon) return null;
-    if (typeof icon === 'string') {
-      return <img src={icon} className="w-6 h-6 transition-all duration-200" alt="nav" />;
-    }
-    return icon;
-  };
-
-  const widthStyle = useMemo(() => ({
-    width: isOpen ? '60px' : '20px',
-    minWidth: isOpen ? '60px' : '20px',
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-  }), [isOpen]);
-
-  return (
-    <Container $theme={theme.theme || defaultTheme} className={`relative ${className || ''}`} style={{ ...widthStyle, ...style }}>
-      {/* 折叠按钮（内置） */}
-      <div
-        onMouseEnter={() => setIsHover(true)}
-        onMouseLeave={() => setIsHover(false)}
-        className="absolute top-1/2 -translate-y-1/2 right-1 w-6 h-6 cursor-pointer z-20 transition-all duration-300"
-        onClick={() => setOpen(!isOpen)}
-        aria-label={isOpen ? '收起' : '展开'}
-        role="button"
-      >
-        <div className="group flex items-center justify-center w-6 h-6 rounded-full transition-all duration-200">
-          <div className="relative w-4 h-4 flex items-center justify-center">
-            <div className={`absolute w-[2px] h-3 bg-gray-400 rounded-full transition-all duration-300 ${isHover ? 'opacity-0 scale-0' : 'opacity-100 scale-100'}`} />
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              className={`absolute w-4 h-4 stroke-gray-400 transition-all duration-300 ${isHover ? 'opacity-100 scale-100' : 'opacity-0 scale-0'} ${!isOpen ? 'rotate-180' : 'rotate-0'}`}
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <polyline points="15 18 9 12 15 6" />
-            </svg>
-          </div>
-        </div>
-      </div>
-
-      {/* 内容 */}
-      <div
-        className="h-full py-6 px-[2px] flex flex-col items-center"
-        style={{
-          opacity: isOpen ? 1 : 0,
-          transform: isOpen ? 'translateX(0)' : 'translateX(-10px)',
-          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-        }}
-      >
-        {/* Logo */}
-        <div className="mb-6 transition-transform duration-300 hover:scale-105">
-          {typeof logo === 'string' ? (
-            <img src={logo} className="w-7 h-7" alt="logo" />
-          ) : (
-            logo || <div className="w-7 h-7 rounded bg-gray-100 flex items-center justify-center text-xs text-gray-500">G</div>
-          )}
-        </div>
-
-        {/* 导航项 */}
-        <div className="w-full gap-y-[2px] mb-10 flex-1 overflow-x-hidden overflow-y-auto scrollbar-none flex flex-col items-center">
-          {items.map(item => {
-            const active = !!(activePath && item.path && activePath.startsWith(item.path));
-            const iconNode = active && item.activeIcon ? item.activeIcon : item.icon;
-            return (
-              <div
-                key={item.key}
-                onClick={() => !item.disabled && onItemClick?.(item)}
-                className={`g-nav-item group relative w-full flex flex-col items-center justify-center py-3 px-2 rounded-lg cursor-pointer transition-all duration-200 ${active ? 'active bg-blue-50' : 'text-gray-500 hover:bg-gray-50'}`}
-              >
-                <div className="relative g-nav-icon transition-transform duration-200 group-hover:scale-105">
-                  {renderIcon(iconNode)}
-                  {item.badge && item.badge > 0 && (
-                    <span className="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[10px] leading-4 text-center">
-                      {item.badge > 99 ? '99+' : item.badge}
-                    </span>
-                  )}
-                </div>
-                <div className="mt-1 text-xs text-center g-nav-text transition-colors duration-200">{item.name}</div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </Container>
-  );
-};
-
-export default GoggleNavbar;
-
-

package/src/elements/Uploader/README.md

@@ -1,249 +0,0 @@
-# Uploader 文件上传组件
-
-## 功能特性
-
-### 🎯 核心功能
-- **拖拽上传**: 支持拖拽文件到指定区域进行上传
-- **多文件上传**: 支持同时选择多个文件
-- **独立表单管理**: 每个上传项都有独立的表单数据，互不干扰
-- **自动填充**: 上传完成后自动填充文件名到表单中
-- **数据持久化**: 表单展开/收起时保持数据状态，不会丢失
-
-### 🔧 技术特性
-- **TypeScript**: 完整的类型支持
-- **Styled Components**: 基于主题的样式系统
-- **XViewer集成**: 使用XViewer的动态表单组件
-- **事件驱动**: 完整的事件回调系统
-- **模块化设计**: 组件拆分，便于维护
-
-## 文件结构
-
-```
-Uploader/
-├── index.tsx          # 主组件
-├── UploadItem.tsx     # 上传项组件
-├── types.ts          # 类型定义
-├── utils.ts          # 工具函数
-├── styles.tsx        # 样式组件
-├── example.tsx       # 使用示例
-└── README.md         # 说明文档
-```
-
-## 使用方法
-
-### 基础用法
-
-```tsx
-import Uploader from './Uploader';
-
-const MyComponent = () => {
-  return (
-    <Uploader
-      url="http://localhost:3000/api/upload"
-      multiple={true}
-      accept="*/*"
-      maxSize={50}
-    />
-  );
-};
-```
-
-### 带表单配置的用法
-
-```tsx
-import Uploader from './Uploader';
-
-const MyComponent = () => {
-  // 表单配置
-  const itemForm = [
-    {
-      name: 'name',
-      label: '文件名',
-      type: 'input',
-      placeholder: '请输入文件名'
-    },
-    {
-      name: 'description',
-      label: '文件描述',
-      type: 'textarea',
-      placeholder: '请输入文件描述'
-    },
-    {
-      name: 'category',
-      label: '文件分类',
-      type: 'select',
-      options: [
-        { label: '文档', value: 'document' },
-        { label: '图片', value: 'image' },
-        { label: '视频', value: 'video' }
-      ]
-    }
-  ];
-
-  // 事件处理
-  const handleEvents = (eventName: string, data: any) => {
-    console.log('Uploader Event:', eventName, data);
-  };
-
-  return (
-    <Uploader
-      url="http://localhost:3000/api/upload"
-      itemForm={itemForm}
-      eventsEmit={handleEvents}
-      headers={{
-        'Authorization': 'Bearer your-token'
-      }}
-    />
-  );
-};
-```
-
-## API 文档
-
-### UploaderProps
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `multiple` | `boolean` | `true` | 是否支持多文件选择 |
-| `accept` | `string` | `'*/*'` | 接受的文件类型 |
-| `maxSize` | `number` | `100` | 单个文件最大大小(MB) |
-| `maxFiles` | `number` | `10` | 最大文件数量 |
-| `autoUpload` | `boolean` | `true` | 是否自动上传 |
-| `url` | `string` | `'http://localhost:3000/upload'` | 上传接口地址 |
-| `headers` | `Record<string, string>` | `{}` | 自定义请求头 |
-| `queryParams` | `Record<string, string>` | `{}` | 查询参数 |
-| `itemForm` | `any[]` | `[]` | 每个上传项的表单配置 |
-| `styles` | `{ theme?: AppTheme }` | `{}` | 样式配置 |
-| `eventsEmit` | `(eventName: UploaderEventName, data: any) => void` | `undefined` | 事件回调 |
-| `onRef` | `(methods: UploaderMethods) => void` | `undefined` | 暴露方法给父组件 |
-
-### 事件类型
-
-| 事件名 | 说明 | 数据格式 |
-|--------|------|----------|
-| `uploader:start` | 开始上传 | `{ items: UploadItem[] }` |
-| `uploader:progress` | 上传进度 | `{ item: UploadItem }` |
-| `uploader:success` | 上传成功 | `{ item: UploadItem }` |
-| `uploader:error` | 上传失败 | `{ item: UploadItem, error: string }` |
-| `uploader:complete` | 上传完成 | `{ items: UploadItem[] }` |
-| `uploader:formDataChange` | 表单数据变化 | `{ itemId: string, formData: Record<string, any>, item: UploadItem }` |
-| `uploader:toggleExpand` | 表单展开/收起 | `{ itemId: string, isExpanded: boolean, item: UploadItem }` |
-| `uploader:remove` | 移除文件 | `{ itemId: string, item: UploadItem }` |
-| `uploader:dataChange` | 数据变化 | `{ items: UploadItem[], changedItemId?: string, changedFormData?: Record<string, any> }` |
-
-### UploaderMethods
-
-通过 `onRef` 属性可以获取到以下方法：
-
-| 方法名 | 参数 | 返回值 | 说明 |
-|--------|------|--------|------|
-| `getUploadItems` | 无 | `UploadItem[]` | 获取所有上传项（包含所有状态） |
-| `getUploadItemsData` | 无 | `Array<{id, name, url, formData, file, size, type}>` | 获取所有成功上传项的数据（包含表单数据） |
-| `clearUploadItems` | 无 | `void` | 清空所有上传项 |
-| `addUploadItems` | `files: File[]` | `void` | 添加新的文件进行上传 |
-| `removeUploadItem` | `id: string` | `void` | 移除指定ID的上传项 |
-| `validateFormData` | 无 | `Promise<boolean>` | 验证表单数据（检查是否有错误、是否在上传中等） |
-
-### 使用示例
-
-```tsx
-import React, { useRef } from 'react';
-import Uploader, { type UploaderMethods } from './Uploader';
-
-const MyComponent = () => {
-  const uploaderRef = useRef<UploaderMethods | null>(null);
-
-  const handleSubmit = async () => {
-    if (uploaderRef.current) {
-      // 验证数据
-      const isValid = await uploaderRef.current.validateFormData();
-      if (!isValid) {
-        alert('请检查上传数据');
-        return;
-      }
-
-      // 获取所有上传数据
-      const uploadData = uploaderRef.current.getUploadItemsData();
-      console.log('提交的数据:', uploadData);
-      
-      // 发送到服务器
-      await submitToServer(uploadData);
-    }
-  };
-
-  return (
-    <div>
-      <Uploader
-        onRef={(methods) => {
-          uploaderRef.current = methods;
-        }}
-        // ... 其他属性
-      />
-      <button onClick={handleSubmit}>提交</button>
-    </div>
-  );
-};
-```
-
-## 自动填充功能
-
-组件会自动识别表单字段名并填充相应的文件信息：
-
-### 文件名字段
-- `name`, `filename`, `title`, `displayName`, `fileName`
-
-### 文件大小字段
-- `size`, `fileSize`, `file_size`
-
-### 文件类型字段
-- `type`, `fileType`, `mimeType`, `contentType`
-
-## 独立表单数据管理
-
-每个上传项都有独立的表单数据存储：
-
-```tsx
-// 每个UploadItem都有独立的formData
-interface UploadItem {
-  id: string;
-  file: File;
-  name: string;
-  size: number;
-  type: string;
-  status: UploadStatus;
-  progress: number;
-  formData?: Record<string, any>; // 独立的表单数据
-  isExpanded?: boolean;
-}
-```
-
-## 样式定制
-
-组件支持通过主题进行样式定制：
-
-```tsx
-import { defaultTheme } from '../../theme/styledTheme';
-
-const customTheme = {
-  ...defaultTheme,
-  colors: {
-    ...defaultTheme.colors,
-    primary: '#007bff',
-    success: '#28a745',
-    error: '#dc3545'
-  }
-};
-
-<Uploader
-  styles={{ theme: customTheme }}
-  // ... 其他属性
-/>
-```
-
-## 注意事项
-
-1. **上传URL**: 必须提供有效的上传接口地址
-2. **表单配置**: 使用XViewer的表单配置格式
-3. **文件大小**: 注意设置合理的文件大小限制
-4. **网络请求**: 组件使用XMLHttpRequest进行文件上传
-5. **数据持久化**: 表单数据在组件状态中保持，页面刷新会丢失