@mxmweb/zui 1.1.10 → 1.1.14

package/public/mock.csv

@@ -0,0 +1,16 @@
+id,name,age,gender,email,phone,address,company,position,salary
+1,张三,28,男,zhangsan@example.com,13800000001,北京市朝阳区,字节跳动,前端工程师,18000
+2,李四,32,女,lis4@example.com,13800000002,上海市浦东新区,阿里巴巴,产品经理,22000
+3,王五,25,男,wangwu@example.com,13800000003,深圳市南山区,腾讯,后端工程师,17000
+4,赵六,29,女,zhaoliu@example.com,13800000004,杭州市西湖区,网易,UI设计师,16000
+5,钱七,35,男,qianqi@example.com,13800000005,广州市天河区,美团,测试工程师,15000
+6,孙八,27,女,sunba@example.com,13800000006,成都市高新区,京东,数据分析师,20000
+7,周九,31,男,zhoujiu@example.com,13800000007,南京市鼓楼区,小米,运维工程师,15500
+8,吴十,26,女,wushi@example.com,13800000008,武汉市武昌区,拼多多,市场专员,14000
+9,郑十一,30,男,zheng11@example.com,13800000009,重庆市渝中区,百度,算法工程师,23000
+10,冯十二,33,女,feng12@example.com,13800000010,苏州市工业园区,携程,HR,13500
+11,陈十三,24,男,chen13@example.com,13800000011,天津市和平区,滴滴,前端工程师,17500
+12,褚十四,28,女,chu14@example.com,13800000012,青岛市市南区,快手,产品经理,21000
+13,卫十五,29,男,wei15@example.com,13800000013,厦门市思明区,知乎,后端工程师,16500
+14,蒋十六,27,女,jiang16@example.com,13800000014,合肥市包河区,B站,UI设计师,15800
+15,沈十七,34,男,shen17@example.com,13800000015,福州市鼓楼区,字节跳动,测试工程师,15200

package/public/mock_/345/211/257/346/234/254.csv

@@ -0,0 +1,16 @@
+id,name,age,gender,email,phone,address,company,position,salary
+1,张三,28,男,zhangsan@example.com,13800000001,北京市朝阳区,字节跳动,前端工程师,18000
+2,李四,32,女,lis4@example.com,13800000002,上海市浦东新区,阿里巴巴,产品经理,22000
+3,王五,25,男,wangwu@example.com,13800000003,深圳市南山区,腾讯,后端工程师,17000
+4,赵六,29,女,zhaoliu@example.com,13800000004,杭州市西湖区,网易,UI设计师,16000
+5,钱七,35,男,qianqi@example.com,13800000005,广州市天河区,美团,测试工程师,15000
+6,孙八,27,女,sunba@example.com,13800000006,成都市高新区,京东,数据分析师,20000
+7,周九,31,男,zhoujiu@example.com,13800000007,南京市鼓楼区,小米,运维工程师,15500
+8,吴十,26,女,wushi@example.com,13800000008,武汉市武昌区,拼多多,市场专员,14000
+9,郑十一,30,男,zheng11@example.com,13800000009,重庆市渝中区,百度,算法工程师,23000
+10,冯十二,33,女,feng12@example.com,13800000010,苏州市工业园区,携程,HR,13500
+11,陈十三,24,男,chen13@example.com,13800000011,天津市和平区,滴滴,前端工程师,17500
+12,褚十四,28,女,chu14@example.com,13800000012,青岛市市南区,快手,产品经理,21000
+13,卫十五,29,男,wei15@example.com,13800000013,厦门市思明区,知乎,后端工程师,16500
+14,蒋十六,27,女,jiang16@example.com,13800000014,合肥市包河区,B站,UI设计师,15800
+15,沈十七,34,男,shen17@example.com,13800000015,福州市鼓楼区,字节跳动,测试工程师,15200

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/Preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './style.css';
+import DockContainerExample from './examples/DockContainerExample';
+import Dropdown from './examples/Dropdown';
+
+const Preview: React.FC = () => {
+  return (
+    <div className="w-screen h-screen relative">
+      {/* <DockContainerExample /> */}
+      <Dropdown />
+    </div>
+  );
+};
+
+export default Preview;

package/src/containers/DashboardContainer.tsx

@@ -0,0 +1,507 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+import { ArrowLeft, ChevronRight } from "lucide-react";
+import styled from "styled-components";
+import { defaultTheme, type AppTheme } from "../theme/styledTheme";
+import CustomDock, { type DockItem, type ActiveMode } from "../elements/CustomDock";
+
+// 面包屑项类型定义
+export interface BreadcrumbItem {
+  id: string;
+  label: string;
+  path?: string;
+  onClick?: () => void;
+}
+
+// 事件发射器类型定义
+export interface EventsEmit {
+  onBreadcrumbClick?: (item: BreadcrumbItem, index: number) => void;
+  onGoBack?: () => void;
+  onTitleClick?: () => void;
+  onDockItemClick?: (item: DockItem, index: number) => void;
+  onDockActiveChange?: (activeId: string | null, item: DockItem | null) => void; // 单选模式
+  onDockActiveChangeMultiple?: (activeIds: string[], items: DockItem[]) => void; // 多选模式
+  [key: string]: any;
+}
+
+// Styled Components
+const LayoutContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-left: 20px;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  max-width: 98%;
+  position: relative;
+`;
+
+const HeaderSection = styled.div`
+  display: flex;
+  height: 38px;
+  z-index: 10;
+  background: transparent;
+  gap: 8px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 0; /* 确保 flex 子元素可以收缩 */
+`;
+
+const BackButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  /* 仅让图标在 hover 时上浮，按钮背景保持透明 */
+  svg {
+    transition: transform 0.2s ease;
+  }
+
+  &:hover {
+    background: transparent;
+  }
+
+  &:hover svg {
+    transform: translateY(-1px);
+  }
+
+  &:active svg {
+    transform: translateY(0);
+  }
+`;
+
+const TitleText = styled.div`
+  line-height: 1.4;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  min-width: 0;
+
+  &:hover {
+    color: #007bff;
+  }
+`;
+
+const DescriptionText = styled.div`
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+`;
+
+// 面包屑容器样式
+const BreadcrumbContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  max-width: 50%;
+  min-width: 0;
+  overflow: hidden;
+`;
+
+// 面包屑项样式
+const BreadcrumbItem = styled.div<{ $isLast?: boolean; $isClickable?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: ${props => props.$isLast ? '#343a40' : '#6c757d'};
+  font-weight: ${props => props.$isLast ? '600' : 'normal'};
+  cursor: ${props => props.$isClickable ? 'pointer' : 'default'};
+  transition: color 0.2s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+
+  &:hover {
+    color: ${props => props.$isLast ? '#007bff' : 'inherit'};
+  }
+`;
+
+// 面包屑分隔符样式
+const BreadcrumbSeparator = styled.div`
+  display: flex;
+  align-items: center;
+  color: #6c757d;
+  margin: 0 2px;
+`;
+
+const ContentSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100% - 45px);
+  min-height: 650px;
+  overflow: auto;
+`;
+
+// Dock 区域样式
+const DockSection = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+`;
+
+interface DashboardContainerProps {
+  children?: React.ReactNode;
+  goBack?: () => void;
+  title?: string;
+  description?: string;
+  breadcrumbs?: BreadcrumbItem[];
+  dockItems?: DockItem[];
+  dockActiveMode?: ActiveMode; // Dock 激活模式
+  defaultDockActiveId?: string; // 单选模式：默认激活的 Dock 项ID
+  defaultDockActiveIds?: string[]; // 多选模式：默认激活的 Dock 项ID数组
+  styles?: {
+    theme?: AppTheme;
+  };
+  eventsEmit?: EventsEmit;
+}
+
+const DashboardContainer: React.FC<DashboardContainerProps> = ({
+  children,
+  goBack,
+  title,
+  description,
+  breadcrumbs,
+  dockItems,
+  dockActiveMode = 'single',
+  defaultDockActiveId,
+  defaultDockActiveIds,
+  styles,
+  eventsEmit,
+}) => {
+  // 主题优先级：props.theme > props.styles?.theme > context
+  const theme = styles?.theme || defaultTheme;
+
+  // 使用 useRef 来获取父容器（HeaderSection）的宽度
+  const headerRef = React.useRef<HTMLDivElement>(null);
+
+  // 处理返回按钮点击事件
+  const handleGoBack = () => {
+    if (eventsEmit?.onGoBack) {
+      eventsEmit.onGoBack();
+    } else if (goBack) {
+      goBack();
+    }
+  };
+
+  // 处理标题点击事件
+  const handleTitleClick = () => {
+    if (eventsEmit?.onTitleClick) {
+      eventsEmit.onTitleClick();
+    }
+  };
+
+  // 处理面包屑点击事件
+  const handleBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
+    if (eventsEmit?.onBreadcrumbClick) {
+      eventsEmit.onBreadcrumbClick(item, index);
+    } else if (item.onClick) {
+      item.onClick();
+    }
+  };
+
+  // 处理 Dock 项点击事件
+  const handleDockItemClick = (item: DockItem, index: number) => {
+    if (eventsEmit?.onDockItemClick) {
+      eventsEmit.onDockItemClick(item, index);
+    } else if (item.onClick) {
+      item.onClick();
+    }
+  };
+
+  // 处理 Dock 激活状态变化事件（单选模式）
+  const handleDockActiveChange = (activeId: string | null, item: DockItem | null) => {
+    if (eventsEmit?.onDockActiveChange) {
+      eventsEmit.onDockActiveChange(activeId, item);
+    }
+  };
+
+  // 处理 Dock 激活状态变化事件（多选模式）
+  const handleDockActiveChangeMultiple = (activeIds: string[], items: DockItem[]) => {
+    if (eventsEmit?.onDockActiveChangeMultiple) {
+      eventsEmit.onDockActiveChangeMultiple(activeIds, items);
+    }
+  };
+
+    // 智能渲染面包屑，根据父元素宽度动态计算显示项
+  const renderBreadcrumbs = () => {
+    if (!breadcrumbs || breadcrumbs.length === 0) return null;
+
+    // 使用 useRef 来获取父容器（HeaderSection）的宽度
+    const headerRef = React.useRef<HTMLDivElement>(null);
+    const [visibleBreadcrumbs, setVisibleBreadcrumbs] = React.useState<{
+      start: number;
+      end: number;
+      showEllipsis: boolean;
+    }>({ start: 0, end: breadcrumbs.length, showEllipsis: false });
+
+    // 计算哪些面包屑项应该显示
+    const calculateVisibleBreadcrumbs = React.useCallback(() => {
+      if (!headerRef.current || breadcrumbs.length <= 3) {
+        setVisibleBreadcrumbs({ start: 0, end: breadcrumbs.length, showEllipsis: false });
+        return;
+      }
+
+      const parentWidth = headerRef.current.offsetWidth;
+      const maxWidth = parentWidth * 0.5; // 面包屑最大宽度为父容器的50%
+
+      // 估算每个面包屑项的平均宽度（包括分隔符）
+      const estimatedItemWidth = 120; // 面包屑项最大宽度
+      const separatorWidth = 20; // 分隔符宽度
+      const ellipsisWidth = 30; // 省略号宽度
+
+      // 计算可以显示多少个面包屑项
+      let maxVisibleItems = Math.floor((maxWidth - ellipsisWidth) / (estimatedItemWidth + separatorWidth));
+
+      // 至少显示第一个和最后一个
+      if (maxVisibleItems < 2) {
+        maxVisibleItems = 2;
+      }
+
+      // 如果所有项都能显示，就不需要省略号
+      if (maxVisibleItems >= breadcrumbs.length) {
+        setVisibleBreadcrumbs({ start: 0, end: breadcrumbs.length, showEllipsis: false });
+        return;
+      }
+
+      // 计算显示策略：优先显示后面的项（因为通常后面的更重要）
+      const startIndex = 0; // 总是显示第一个
+      const endIndex = Math.min(maxVisibleItems - 1, breadcrumbs.length); // 显示到倒数第几个
+
+      setVisibleBreadcrumbs({
+        start: startIndex,
+        end: endIndex,
+        showEllipsis: endIndex < breadcrumbs.length - 1
+      });
+    }, [breadcrumbs.length]);
+
+    // 监听父容器大小变化
+    React.useEffect(() => {
+      calculateVisibleBreadcrumbs();
+
+      const resizeObserver = new ResizeObserver(() => {
+        calculateVisibleBreadcrumbs();
+      });
+
+      if (headerRef.current) {
+        resizeObserver.observe(headerRef.current);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [calculateVisibleBreadcrumbs]);
+
+        // 如果面包屑数量少于等于3个，直接显示
+    if (breadcrumbs.length <= 3) {
+      return (
+        <BreadcrumbContainer>
+          {breadcrumbs.map((item, index) => (
+            <React.Fragment key={item.id}>
+              <BreadcrumbItem
+                $isLast={index === breadcrumbs.length - 1}
+                $isClickable={Boolean(index < breadcrumbs.length - 1 || item.onClick)}
+                onClick={() => handleBreadcrumbClick(item, index)}
+                style={{
+                  color: index === breadcrumbs.length - 1
+                    ? theme.colors.text
+                    : theme.colors.textSecondary || theme.colors.disabledText,
+                }}
+                title={item.label}
+              >
+                {item.label}
+              </BreadcrumbItem>
+              {index < breadcrumbs.length - 1 && (
+                <BreadcrumbSeparator>
+                  <ChevronRight size={14} />
+                </BreadcrumbSeparator>
+              )}
+            </React.Fragment>
+          ))}
+        </BreadcrumbContainer>
+      );
+    }
+
+    // 动态计算显示的面包屑项
+    const { start, end, showEllipsis } = visibleBreadcrumbs;
+
+    return (
+      <BreadcrumbContainer>
+        {/* 显示的面包屑项 */}
+        {breadcrumbs.slice(start, end).map((item, index) => (
+          <React.Fragment key={item.id}>
+            <BreadcrumbItem
+              $isLast={index === end - start - 1 && !showEllipsis}
+              $isClickable={Boolean(index < end - start - 1 || item.onClick)}
+              onClick={() => handleBreadcrumbClick(item, start + index)}
+              style={{
+                color: index === end - start - 1 && !showEllipsis
+                  ? theme.colors.text
+                  : theme.colors.textSecondary || theme.colors.disabledText,
+              }}
+              title={item.label}
+            >
+              {item.label}
+            </BreadcrumbItem>
+            {index < end - start - 1 && (
+              <BreadcrumbSeparator>
+                <ChevronRight size={14} />
+              </BreadcrumbSeparator>
+            )}
+          </React.Fragment>
+        ))}
+
+        {/* 省略号 */}
+        {showEllipsis && (
+          <>
+            <BreadcrumbSeparator>
+              <ChevronRight size={14} />
+            </BreadcrumbSeparator>
+            <BreadcrumbItem
+              $isLast={false}
+              $isClickable={false}
+              style={{
+                color: theme.colors.textSecondary || theme.colors.disabledText,
+                cursor: 'default',
+                maxWidth: 'auto',
+              }}
+              title={`${breadcrumbs.slice(end, -1).map(item => item.label).join(' > ')}`}
+            >
+              ...
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <ChevronRight size={14} />
+            </BreadcrumbSeparator>
+            {/* 最后一个面包屑 */}
+            <BreadcrumbItem
+              $isLast={true}
+              $isClickable={Boolean(breadcrumbs[breadcrumbs.length - 1].onClick)}
+              onClick={() => handleBreadcrumbClick(breadcrumbs[breadcrumbs.length - 1], breadcrumbs.length - 1)}
+              style={{
+                color: theme.colors.text,
+              }}
+              title={breadcrumbs[breadcrumbs.length - 1].label}
+            >
+              {breadcrumbs[breadcrumbs.length - 1].label}
+            </BreadcrumbItem>
+          </>
+        )}
+      </BreadcrumbContainer>
+    );
+  };
+
+  return (
+    <LayoutContainer
+      style={{
+        background: theme.colors.appBackground,
+        color: theme.colors.text,
+        fontFamily: theme.fonts?.body?.family || 'PingFang SC, Microsoft YaHei, Arial, sans-serif',
+      }}
+    >
+      {/* 头部标题区域 */}
+      {(title || description || goBack || breadcrumbs) && (
+        <HeaderSection ref={headerRef}>
+          {/* 返回按钮 */}
+          {goBack && (
+            <BackButton
+              onClick={handleGoBack}
+              style={{
+                color: theme.colors.primary,
+                borderRadius: theme.space.radius || '6px',
+              }}
+              title="返回"
+            >
+              <ArrowLeft size={18} />
+            </BackButton>
+          )}
+
+          {/* 面包屑导航 */}
+          {renderBreadcrumbs()}
+
+          {/* 标题 */}
+          {title && (
+            <TitleText
+              onClick={handleTitleClick}
+              style={{
+                color: theme.colors.text,
+                fontSize: theme.fonts?.heading?.size || '16px',
+                fontWeight: theme.fonts?.heading?.weight || '600',
+              }}
+              title={title} // 添加 hover 提示
+            >
+              {title}
+            </TitleText>
+          )}
+
+          {/* 描述 */}
+          {description && (
+            <DescriptionText
+              style={{
+                color: theme.colors.textSecondary || theme.colors.disabledText,
+                opacity: 0.7,
+                fontSize: theme.fonts?.body?.size || '12px',
+              }}
+              title={description} // 添加 hover 提示
+            >
+              {description}
+            </DescriptionText>
+          )}
+        </HeaderSection>
+      )}
+
+      {/* 内容区域 */}
+      <ContentSection
+        style={{
+          background: theme.colors.dashboardBackground || 'transparent',
+          border: `1px solid ${theme.colors.border}` || undefined,
+          borderRadius: theme.space.radius || undefined,
+          boxShadow: theme.colors.shadow || undefined,
+
+        }}
+      >
+        {children || <Outlet />}
+      </ContentSection>
+
+      {/* Dock 导航区域 */}
+      {dockItems && dockItems.length > 0 && (
+        <DockSection>
+          <CustomDock
+            items={dockItems}
+            itemWidth={48}
+            itemHeight={48}
+            magnification={1.5}
+            itemGap={8}
+            activeMode={dockActiveMode}
+            defaultActiveId={defaultDockActiveId}
+            defaultActiveIds={defaultDockActiveIds}
+            onItemClick={handleDockItemClick}
+            onActiveChange={handleDockActiveChange}
+            onActiveChangeMultiple={handleDockActiveChangeMultiple}
+          />
+        </DockSection>
+      )}
+    </LayoutContainer>
+  );
+};
+
+export default DashboardContainer;