@mxmweb/zui-components

一个包含复杂 UI 组件的 React 组件库，提供高质量的交互组件。

组件列表

1. GoogleNavbar - 侧边导航栏

一个类似 Google 风格的侧边导航栏组件，支持展开/收起、激活状态、图标和徽章。

特性

• ✅ 支持展开/收起状态
• ✅ 支持激活状态高亮
• ✅ 支持图标和徽章显示
• ✅ 响应式设计
• ✅ 可自定义主题
• ✅ 支持受控和非受控模式

使用示例

import { GoogleNavbar } from '@mxmweb/zui-components';
import type { GoggleNavItem } from '@mxmweb/zui-components';

const items: GoggleNavItem[] = [
  {
    key: 'dashboard',
    name: '仪表盘',
    icon: '/icons/dashboard.svg',
    path: '/dashboard',
  },
  {
    key: 'projects',
    name: '项目',
    icon: '/icons/projects.svg',
    path: '/projects',
    badge: 5,
  },
];

<GoogleNavbar
  items={items}
  activePath="/dashboard"
  onItemClick={(item) => console.log(item)}
  logo="/logo.svg"
/>

2. CustomDock - 底部停靠栏

一个类似 macOS Dock 的底部停靠栏组件，支持悬停放大效果和毛玻璃背景。

特性

• ✅ 支持单选/多选模式
• ✅ 悬停放大效果
• ✅ 毛玻璃背景
• ✅ 工具提示
• ✅ 可自定义尺寸和间距
• ✅ 支持激活状态管理

使用示例

import { CustomDock } from '@mxmweb/zui-components';
import type { DockItem } from '@mxmweb/zui-components';

const items: DockItem[] = [
  {
    id: 'home',
    label: '首页',
    icon: '/icons/home.svg',
    onClick: () => console.log('点击首页'),
  },
  {
    id: 'search',
    label: '搜索',
    icon: '/icons/search.svg',
  },
];

<CustomDock
  items={items}
  activeMode="single"
  defaultActiveId="home"
  onActiveChange={(id) => console.log('激活:', id)}
  itemWidth={60}
  itemHeight={60}
  magnification={1.3}
/>

3. Uploader - 文件上传器

一个功能完整的文件上传组件，支持拖拽上传、多文件上传、进度显示和错误处理。

特性

• ✅ 支持拖拽上传
• ✅ 多文件上传
• ✅ 文件类型和大小限制
• ✅ 上传进度显示
• ✅ 错误处理和重试
• ✅ 可自定义表单字段
• ✅ 支持预览和删除
• ✅ 事件系统

使用示例

import { Uploader } from '@mxmweb/zui-components';
import type { UploaderProps } from '@mxmweb/zui-components';

const uploaderConfig: UploaderProps = {
  multiple: true,
  accept: 'image/*,.pdf,.doc,.docx',
  maxSize: 10, // 10MB
  maxFiles: 5,
  autoUpload: true,
  url: '/api/upload',
  placeholder: '拖拽文件到此处或点击选择文件',
  eventsEmit: (eventName, data) => {
    console.log('上传事件:', eventName, data);
  },
};

<Uploader {...uploaderConfig} />

安装

npm install @mxmweb/zui-components
# 或
yarn add @mxmweb/zui-components
# 或
pnpm add @mxmweb/zui-components

依赖

• React 16.8+
• React DOM 16.8+
• styled-components
• animejs (仅 CustomDock 需要)
• lucide-react (仅 Uploader 需要)

主题支持

所有组件都支持通过 styles 属性自定义主题：

const customStyles = {
  theme: {
    colors: {
      primary: '#3b82f6',
      background: '#ffffff',
      text: '#1f2937',
    },
    space: {
      radius: '8px',
    },
  },
};

<GoogleNavbar styles={customStyles} />

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

# 预览构建结果
pnpm preview

许可证

MIT