@mxmweb/zui 1.1.2 → 1.1.10

package/src/containers/DashboardContainer.tsx

@@ -1,507 +0,0 @@
-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;

package/src/containers/DockContainer.tsx

@@ -1,186 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { defaultTheme, type AppTheme } from '../theme/styledTheme';
-import CustomDock, { type DockItem, type ActiveMode } from '../elements/CustomDock';
-
-// 全屏容器属性
-export interface FullScreenContainerProps {
-  children?: React.ReactNode;
-  backgroundImage?: string; // 背景图片URL
-  backgroundColor?: string; // 背景颜色（当没有背景图时使用）
-  header?: React.ReactNode; // 自定义头部组件
-  dockItems?: DockItem[]; // Dock 导航项
-  dockActiveMode?: ActiveMode; // Dock 激活模式
-  defaultDockActiveId?: string; // 单选模式：默认激活的 Dock 项ID
-  defaultDockActiveIds?: string[]; // 多选模式：默认激活的 Dock 项ID数组
-  styles?: {
-    theme?: AppTheme;
-  };
-  eventsEmit?: {
-    onDockItemClick?: (item: DockItem, index: number) => void;
-    onDockActiveChange?: (activeId: string | null, item: DockItem | null) => void;
-    onDockActiveChangeMultiple?: (activeIds: string[], items: DockItem[]) => void;
-    [key: string]: any;
-  };
-}
-
-// 全屏背景容器
-const FullScreenWrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => !['backgroundImage', 'backgroundColor'].includes(prop),
-})<{
-  backgroundImage?: string;
-  backgroundColor?: string;
-}>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: ${props =>
-    props.backgroundImage
-      ? `url(${props.backgroundImage}) center/cover no-repeat`
-      : props.backgroundColor || '#1a1a1a'
-  };
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  z-index: 1;
-`;
-
-// 头部区域
-const HeaderSection = styled.div`
-  height: 48px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  z-index: 10;
-  flex-shrink: 0;
-`;
-
-// 中间滚动区域
-const ScrollableContent = styled.div`
-  flex: 1;
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-  z-index: 2;
-  background: transparent;
-
-  /* 自定义滚动条样式 */
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-  }
-`;
-
-// Dock 区域
-const DockSection = styled.div`
-  height: 80px;
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 12px 0;
-  background: transparent;
-  z-index: 10;
-  flex-shrink: 0;
-`;
-
-const DockContainer: React.FC<FullScreenContainerProps> = ({
-  children,
-  backgroundImage,
-  backgroundColor,
-  header,
-  dockItems,
-  dockActiveMode = 'single',
-  defaultDockActiveId,
-  defaultDockActiveIds,
-  styles,
-  eventsEmit,
-}) => {
-  const theme = styles?.theme || defaultTheme;
-
-  // 处理 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);
-    }
-  };
-
-  return (
-    <FullScreenWrapper
-      backgroundImage={backgroundImage}
-      backgroundColor={backgroundColor}
-    >
-      {/* 头部区域 */}
-      {header && (
-        <HeaderSection>
-          {header}
-        </HeaderSection>
-      )}
-
-      {/* 中间滚动内容区域 */}
-      <ScrollableContent
-        style={{
-          color: theme.colors.text,
-          fontFamily: theme.fonts?.body?.family || 'PingFang SC, Microsoft YaHei, Arial, sans-serif',
-        }}
-      >
-        {children}
-      </ScrollableContent>
-
-      {/* 底部 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>
-      )}
-    </FullScreenWrapper>
-  );
-};
-
-export default DockContainer;