@mxmweb/zui 1.0.3 → 1.1.0

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;

package/src/containers/DockContainer.tsx

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