@pisell/materials 6.11.241 → 6.11.242

package/es/components/PisellCards/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const PisellCards: {
     TabCard: (props: any) => import("react").JSX.Element;
     TextCard: (props: any) => import("react").JSX.Element;

package/es/components/PisellFields/index.d.ts

@@ -9,6 +9,7 @@
  * <PisellFields.Number value={123} viewMode="readonly" />
  * <PisellFields.Currency value={1000} currencySymbol="$" />
  */
+/// <reference types="react" />
 declare const PisellFields: {
     SingleLineText: import("react").NamedExoticComponent<import("../pisellSingleLineText").PisellSingleLineTextProps>;
     LongText: import("react").NamedExoticComponent<import("../pisellLongText").PisellLongTextProps>;

package/es/components/PisellGroupView/PisellGroupView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PisellGroupViewProps } from './types';
+import './PisellGroupView.less';
+/**
+ * 使用 memo 优化性能：props 未变化时跳过重渲染
+ */
+declare const MemoizedPisellGroupView: <T>(props: PisellGroupViewProps<T>) => React.JSX.Element;
+export { MemoizedPisellGroupView as PisellGroupView };
+export default MemoizedPisellGroupView;

package/es/components/PisellGroupView/PisellGroupView.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellGroupView from './PisellGroupView';
+/**
+ * PisellGroupView 分组展示组件
+ *
+ * 通用、数据无关的「分组展示容器」：先按条件把列表分组，
+ * 再为每个分组渲染 头部 / 统计 / 主体 / 操作 四块，各块均可自定义渲染。
+ */
+declare const meta: Meta<typeof PisellGroupView>;
+export default meta;
+declare type Story = StoryObj<typeof PisellGroupView>;
+/**
+ * 基础用法：按「商品 + 时间」组合分组，展示四块结构
+ */
+export declare const Basic: Story;
+/**
+ * 单字段分组 + 主体多列布局（itemLayout 对象，内部使用 PisellBasicGrid）
+ */
+export declare const GridBody: Story;
+/**
+ * 利用 ItemContext.groupKeys 在主体卡片中省略「头部已展示」的字段
+ */
+export declare const OmitHeaderFields: Story;
+/**
+ * 空数据态
+ */
+export declare const Empty: Story;

package/es/components/PisellGroupView/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellGroupView 组件导出
+ * @description 通用、数据无关的分组展示容器
+ */
+export { PisellGroupView, default } from './PisellGroupView';
+export type { PisellGroupViewProps, GroupModel, GroupBlocks, ItemContext, ItemLayout, GroupViewVariant, } from './types';

package/es/components/PisellGroupView/types.d.ts

@@ -0,0 +1,124 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { GroupKey, GroupResult } from '@pisell/utils';
+/**
+ * 单个分组的数据模型
+ * @template T - 数据项类型
+ * @description 复用 `@pisell/utils` 的 `GroupResult`，包含 groupId、keys、keyMap、items 等
+ */
+export declare type GroupModel<T> = GroupResult<T>;
+/**
+ * 主体（第三块）渲染单条数据时的上下文
+ * @template T - 数据项类型
+ */
+export interface ItemContext<T> {
+    /** 当前数据所属分组 */
+    group: GroupModel<T>;
+    /** 当前数据在分组内的下标 */
+    index: number;
+    /**
+     * 参与分组的字段名列表
+     * @description
+     * 调用方可据此在卡片中省略「头部已展示」的字段，避免重复展示。
+     * 当使用自定义函数分组时，该数组为空。
+     */
+    groupKeys: string[];
+}
+/**
+ * 主体（第三块）的布局配置
+ * @description
+ * - `'stack'`：纵向堆叠每条卡片（默认）
+ * - 对象：透传给内部 `PisellBasicGrid` 实现多列/横向布局
+ */
+export declare type ItemLayout = 'stack' | {
+    /** 一行显示的卡片数 */
+    columns?: number;
+    /** 卡片间距 */
+    gap?: number | string;
+    /** 排列方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 是否换行 */
+    wrap?: 'wrap' | 'nowrap';
+};
+/**
+ * 一个分组渲染出的四块内容
+ * @description 透传给 `renderGroup`，便于调用方自定义整组容器但复用四块默认内容
+ */
+export interface GroupBlocks {
+    /** ① 头部：分组条件对应的相同信息 */
+    header: ReactNode;
+    /** ② 统计栏：来自分组数据的统计信息 */
+    stats: ReactNode;
+    /** ③ 主体：分组内所有条目（卡片） */
+    body: ReactNode;
+    /** ④ 操作区：批量操作 */
+    actions: ReactNode;
+}
+/**
+ * 多端 variant
+ * @description 仅用于在根节点追加 `--${variant}` class，由 Less 控制展示差异
+ */
+export declare type GroupViewVariant = 'desktop' | 'tablet' | 'pos' | 'phone';
+/**
+ * PisellGroupView 组件 Props
+ * @template T - 数据项类型
+ * @description
+ * 通用、数据无关的「分组展示容器」：先按 `groupBy` 将 `dataSource` 分组，
+ * 再为每个分组渲染头部 / 统计 / 主体 / 操作四块，各块均可由外部自定义渲染。
+ */
+export interface PisellGroupViewProps<T = unknown> {
+    /** 数据源（应为外部已映射好的列表） */
+    dataSource: T[];
+    /**
+     * 分组规则
+     * @description
+     * - `string`：单字段路径，支持 `'a.b.c'` 点路径
+     * - `string[]`：多字段组合（如 `['productId', 'time']`）
+     * - `(item, index) => GroupKey | GroupKey[]`：完全自定义
+     */
+    groupBy: string | string[] | ((item: T, index: number) => GroupKey | GroupKey[]);
+    /** 自定义分组 id 生成，默认各键以 `|` 拼接 */
+    getGroupId?: (keys: GroupKey[]) => string;
+    /** 分组之间的排序；不传保持首次出现顺序 */
+    sortGroups?: (a: GroupModel<T>, b: GroupModel<T>) => number;
+    /** 分组内数据项的排序；不传保持原始相对顺序 */
+    sortItems?: (a: T, b: T) => number;
+    /** ① 头部：分组条件对应的相同信息（时间、商品名、客户等） */
+    renderHeader?: (group: GroupModel<T>) => ReactNode;
+    /** ② 统计栏：可自定义展示，数据来源于分组后的数据 */
+    renderStats?: (group: GroupModel<T>) => ReactNode;
+    /** ③ 主体：渲染分组内的单条数据为卡片 */
+    renderItem?: (item: T, ctx: ItemContext<T>) => ReactNode;
+    /** ④ 操作区：批量操作（加时、编辑等） */
+    renderActions?: (group: GroupModel<T>) => ReactNode;
+    /**
+     * 主体布局
+     * @default 'stack'
+     */
+    itemLayout?: ItemLayout;
+    /**
+     * 自定义主体容器
+     * @param group - 当前分组
+     * @param defaultBody - 组件按 `itemLayout` + `renderItem` 渲染出的默认主体
+     */
+    renderBody?: (group: GroupModel<T>, defaultBody: ReactNode) => ReactNode;
+    /**
+     * 自定义整组容器
+     * @param group - 当前分组
+     * @param blocks - 四块默认内容（header/stats/body/actions）
+     * @description 提供后将完全接管单个分组的结构，调用方可自由编排四块顺序与包裹
+     */
+    renderGroup?: (group: GroupModel<T>, blocks: GroupBlocks) => ReactNode;
+    /** 数据源为空时的渲染 */
+    renderEmpty?: () => ReactNode;
+    /**
+     * 主体内单条卡片的 key
+     * @description 不传时使用 index（仅在列表无增删改时安全）
+     */
+    rowKey?: string | ((item: T, index: number) => string);
+    /** 多端 variant，仅追加根节点 class */
+    variant?: GroupViewVariant;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+}

package/es/components/PisellGroupView/utils/index.d.ts

@@ -0,0 +1,20 @@
+import type { PisellGroupViewProps } from '../types';
+/**
+ * 组件样式前缀
+ */
+export declare const COMPONENT_PREFIX = "pisell-group-view";
+/**
+ * 解析参与分组的字段名列表
+ * @param groupBy - 组件的 groupBy 配置
+ * @returns 字段名数组；自定义函数分组时返回空数组
+ * @description 用于透传给 `renderItem`，让调用方据此省略头部已展示的字段
+ */
+export declare const getGroupFieldNames: <T>(groupBy: string | string[] | ((item: T, index: number) => any)) => string[];
+/**
+ * 获取主体内单条数据的稳定 key
+ * @param item - 数据项
+ * @param index - 索引
+ * @param rowKey - rowKey 配置
+ * @returns key 字符串
+ */
+export declare const resolveItemKey: <T>(item: T, index: number, rowKey?: string | ((item: T, index: number) => string) | undefined) => string;

package/es/components/PisellLayouts/index.d.ts

@@ -13,6 +13,7 @@
  *   <Content />
  * </PisellLayouts.ScrollView>
  */
+/// <reference types="react" />
 declare const PisellLayouts: {
     BasicGrid: <T>(props: import("../PisellBasicGrid").PisellBasicGridProps<T>) => import("react").JSX.Element;
     ScrollView: import("react").ForwardRefExoticComponent<Omit<import("../PisellScrollView").PisellScrollViewProps, "ref"> & import("react").RefAttributes<import("../PisellScrollView").PisellScrollViewRef>>;

package/es/components/PisellMetrics/index.d.ts

@@ -13,6 +13,7 @@
  * />
  * <PisellMetrics.StatisticList data={[...]} />
  */
+/// <reference types="react" />
 declare const PisellMetrics: {
     MetricCard: import("react").FC<import("../pisellMetricCard").PisellMetricCardProps>;
     StatisticList: (props: import("../pisellStatisticList").PisellStatisticListProps) => import("react").JSX.Element;

package/es/components/PisellTabbar/PisellTabbar.js

@@ -252,9 +252,8 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
     var _cardProps$active2;
     var itemData = cardProps.dataSource;
     var levelConfig = getLevelConfig(level);
-    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({
-      text: itemData.name
-    }, cardProps, {
+    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
+      text: itemData.name,
       variant: "outlined",
       widthMode: "fixed",
       textConfig: {
@@ -527,7 +526,7 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
         onClick: action.onClick,
         card: function card(cardProps) {
           var _action$label;
-          return renderLevelNNormalCard(_objectSpread(_objectSpread({}, cardProps), {}, {
+          return renderLevelNCard(_objectSpread(_objectSpread({}, cardProps), {}, {
             text: (_action$label = action.label) !== null && _action$label !== void 0 ? _action$label : action.icon
           }), 'level1');
         }

package/es/components/dataSourceComponents/dataSourceShow/dataSourceQRCode/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DataSourceQRCode: (props: any) => import("react").JSX.Element;
 export default DataSourceQRCode;

package/es/components/dataSourceComponents/fields/Tabs/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /** 包装 DataSource 层（提供数据源上下文） */
 declare const FormItemTabs: (props: import("./type").TabsProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps & {
     options?: any;

package/es/components/dataSourceComponents/fields/Upload/utils.d.ts

@@ -15,4 +15,4 @@ export declare const getFileMetadataParams: (file: RcFile & {
     metadata?: MediaMetadata;
 }) => Record<string, any>;
 export declare const isValueEqual: (value: any, fileListValue: any) => boolean;
-export declare const getBaseTime: (size: number) => 2000 | 1000 | 4000 | 8000;
+export declare const getBaseTime: (size: number) => 1000 | 2000 | 4000 | 8000;

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const formFieldMap: {
     FormItemCheckbox: import("react").FC<{}> & {
         Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -19,7 +20,7 @@ declare const formFieldMap: {
         Subdomain: import("react").FC<import("antd").InputProps & {
             onChange: (value: string) => void;
             onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-            rootDomain: "custom" | "xzero" | "saas";
+            rootDomain: "custom" | "saas" | "xzero";
             customDomain?: string | undefined;
             value?: string | undefined;
             tenantId: string;
@@ -80,11 +81,11 @@ declare const formFieldMap: {
         extraParams?: Record<string, any> | undefined;
     }) => import("react").JSX.Element;
 };
-declare const getFieldComponent: (fieldComponent: string) => import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<{}> & {
+declare const getFieldComponent: (fieldComponent: string) => (import("react").FC<{}> & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
+}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
     JSON: import("react").FC<any>;
     Password: import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     TextArea: import("react").FC<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
@@ -97,7 +98,7 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     Subdomain: import("react").FC<import("antd").InputProps & {
         onChange: (value: string) => void;
         onBlur?: ((e: import("react").FocusEvent<HTMLInputElement, Element>) => void) | undefined;
-        rootDomain: "custom" | "xzero" | "saas";
+        rootDomain: "custom" | "saas" | "xzero";
         customDomain?: string | undefined;
         value?: string | undefined;
         tenantId: string;

package/es/components/date-picker/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DatePicker: (props: any) => import("react").JSX.Element;
 export default DatePicker;

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.d.ts

@@ -0,0 +1,13 @@
+/**
+ * PisellFloorMapLayout - 空间布局视图
+ * 支持两种用法：1) 仅传入 items + renderItem（原有用法）；2) 传入 floorMapConfig + dataSources + mode 使用平面图视图（含多画布/编辑态）
+ */
+import React from 'react';
+import type { FloorMapItemBase, PisellFloorMapLayoutProps, PisellFloorMapLayoutRef } from './types';
+import './PisellFloorMapLayout.less';
+/** 空间布局根组件：阅读/编辑、列表与平面图双模式，ref 见 {@link PisellFloorMapLayoutRef} */
+declare const PisellFloorMapLayout: <T extends FloorMapItemBase = FloorMapItemBase>(props: PisellFloorMapLayoutProps<T> & {
+    ref?: React.Ref<PisellFloorMapLayoutRef | null> | undefined;
+}) => React.ReactElement;
+export { PisellFloorMapLayout };
+export default PisellFloorMapLayout;

package/es/components/pisellFloorMapLayout/components/CanvasTabs.d.ts

@@ -0,0 +1,27 @@
+/**
+ * CanvasTabs - 多画布 Tab，支持切换、动态添加、删除与重命名（编辑态）
+ * - 展示名：可选 `nameKey` + `locales.getText`，否则用 `name`（字符串或多语言对象）
+ * - 角标：可选 `tabBadge` 或由布局层注入合并后的数量
+ */
+import React from 'react';
+import type { FloorMapCanvas, FloorMapCanvasNameI18n } from '../types';
+import './CanvasTabs.less';
+export interface CanvasTabsProps {
+    /** 画布列表 */
+    canvases: FloorMapCanvas[];
+    /** 当前画布 id */
+    currentCanvasId: string | null;
+    /** 切换画布 */
+    onTabChange: (canvasId: string) => void;
+    /** 是否允许添加/删除/重命名画布（编辑态） */
+    canEdit?: boolean;
+    /** 添加画布 */
+    onAddCanvas?: () => void;
+    /** 删除画布（至少保留一个画布时可调用） */
+    onRemoveCanvas?: (canvasId: string) => void;
+    /** 重命名画布（对象写入 `name`，并清除 `nameKey`） */
+    onRenameCanvas?: (canvasId: string, name: string | FloorMapCanvasNameI18n) => void;
+    className?: string;
+}
+export declare function CanvasTabs(props: CanvasTabsProps): React.JSX.Element;
+export default CanvasTabs;

package/es/components/pisellFloorMapLayout/components/EditableItemLayer.d.ts

@@ -0,0 +1,89 @@
+/**
+ * EditableItemLayer - 编辑态图元层：拖拽、缩放、选中、吸附
+ */
+import React, { type CSSProperties } from 'react';
+import type { FloorMapItemBase, FloorMapMergedItem, FloorMapRenderOptions } from '../types';
+import { type AlignGuide } from '../utils/alignSnap';
+import { type FloorMapEditQuickActionLabels } from './FloorMapEditQuickActions';
+import './EditableItemLayer.less';
+export interface EditableItemLayerProps<T extends FloorMapItemBase = FloorMapMergedItem> {
+    items: T[];
+    renderItem: (item: T, index: number, options?: FloorMapRenderOptions) => React.ReactNode;
+    rowKey?: string | ((item: T, index: number) => string);
+    cellSize: number;
+    itemUnit?: 'cell' | 'pixel';
+    itemGap?: number;
+    contentWidth: number;
+    contentHeight: number;
+    /** 内容区 X/Y 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    contentOffsetY?: number;
+    selectedId: string | null;
+    onSelect: (id: string | null) => void;
+    onUpdateItem: (itemId: string, patch: Partial<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>) => void;
+    /**
+     * 一次提交多个图元的坐标变更（选区分组拖拽时整组落库），用于一步撤销。
+     * 未传时分组拖拽降级为不落库（仅预览）。
+     */
+    onUpdateItemsBatch?: (patches: Array<{
+        id: string;
+        patch: Partial<{
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+    }>) => void;
+    snapStep?: number;
+    /** 画布当前缩放，用于将屏幕位移转为内容位移 */
+    scale?: number;
+    /** 拖拽/缩放图元时通知父组件，用于禁用画布平移，避免松手时画布跟着动 */
+    onInteractionChange?: (active: boolean) => void;
+    /**
+     * 拖拽/缩放过程中的像素矩形（内容坐标），用于 EdgeLayer 实时重算连线。
+     * itemId 为 null 表示结束交互。
+     */
+    onLiveRectChange?: (itemId: string | null, rect: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null) => void;
+    /**
+     * 选区分组拖拽过程中，选区与全部成员的实时像素矩形（内容坐标），用于 EdgeLayer 重算连线。
+     * 传 null 表示结束分组交互。
+     */
+    onLiveRectsChange?: (rects: Record<string, {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }> | null) => void;
+    /**
+     * 对齐阈值（屏幕像素，组件内会按 scale 折算到内容坐标）。
+     * 0 或负数关闭对齐。
+     */
+    alignSnapThresholdPx?: number;
+    /** 命中的对齐辅助线变化；交互结束时回调一次空数组 */
+    onAlignGuidesChange?: (guides: AlignGuide[]) => void;
+    /** 对齐辅助线颜色（推荐用主题 token `alignGuideStroke`） */
+    alignGuideStroke?: string;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    className?: string;
+    /** 编辑态选中时图元旁快捷栏（上锁 / 复制 / 删除） */
+    editQuickBar?: {
+        labels: FloorMapEditQuickActionLabels;
+        isLocked: boolean;
+        onToggleLock: () => void;
+        onDuplicate: () => void;
+        onDelete: () => void;
+    } | null;
+}
+export declare function EditableItemLayer<T extends FloorMapItemBase>(props: EditableItemLayerProps<T>): React.JSX.Element;
+export default EditableItemLayer;

package/es/components/pisellFloorMapLayout/components/FloorMapEditPanel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * FloorMapEditPanel - 选中图元后的编辑面板：画布属性 + 可选数据绑定 + 数据源记录表单
+ */
+import React from 'react';
+import type { FloorMapEditPanelParams, FloorMapViewConfig, FloorMapDataSources } from '../types';
+import './FloorMapEditPanel.less';
+export interface FloorMapEditPanelProps extends FloorMapEditPanelParams {
+    config: FloorMapViewConfig;
+    dataSources: FloorMapDataSources;
+    savingRecord?: boolean;
+    className?: string;
+}
+export declare function FloorMapEditPanel(props: FloorMapEditPanelProps): React.JSX.Element;
+export default FloorMapEditPanel;

package/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.d.ts

@@ -0,0 +1,64 @@
+/**
+ * FloorMapEditTopBar - 编辑态顶栏
+ * - `mode="compact"`：画布 Tab + 可选 `canvasTabsBarTrailing`（全屏入口在左下 Dock）
+ * - `mode="full"`：画布 Tab + `canvasTabsBarTrailing` + 保存（仅非浏览器全屏时）+ 扩展操作
+ */
+import React from 'react';
+import type { CanvasTabsProps } from './CanvasTabs';
+import type { FloorMapControlsConfig, FloorMapViewConfig } from '../types';
+import './FloorMapEditTopBar.less';
+export declare type FloorMapEditTopBarMode = 'full' | 'compact';
+export interface FloorMapEditTopBarProps {
+    /** full：全屏时的完整顶栏；compact：非全屏时 Tab + 扩展区 */
+    mode?: FloorMapEditTopBarMode;
+    config: FloorMapViewConfig;
+    canvases: CanvasTabsProps['canvases'];
+    currentCanvasId: CanvasTabsProps['currentCanvasId'];
+    onTabChange: CanvasTabsProps['onTabChange'];
+    canEditTabs?: CanvasTabsProps['canEdit'];
+    onAddCanvas?: CanvasTabsProps['onAddCanvas'];
+    onRemoveCanvas?: CanvasTabsProps['onRemoveCanvas'];
+    onRenameCanvas?: CanvasTabsProps['onRenameCanvas'];
+    onSave?: () => void;
+    saving?: boolean;
+    saveError?: Error | string;
+    layoutDirty?: boolean;
+    /** full 模式：浏览器全屏时为 true，顶栏不展示保存（改由侧栏） */
+    isFullscreen?: boolean;
+    controls?: FloorMapControlsConfig;
+    /** 顶栏右侧扩展（如「区域定位」等），仅 full 模式 */
+    extraActions?: React.ReactNode;
+    /** 画布 Tab 同排最右侧业务区 */
+    canvasTabsBarTrailing?: React.ReactNode;
+    /** 启用画布仅 1 个时隐藏 Tab 行，仅保留右侧操作区（全屏顶栏保存等） */
+    hideCanvasTabs?: boolean;
+    /** 撤销当前编辑步骤（不传则不显示按钮） */
+    onUndo?: () => void;
+    /** 重做最近一次撤销（不传则不显示按钮） */
+    onRedo?: () => void;
+    /** 是否还有可撤销步骤 */
+    canUndo?: boolean;
+    /** 是否还有可重做步骤 */
+    canRedo?: boolean;
+    /**
+     * 退出编辑模式回调（不保存）。
+     * 传入后顶栏右侧会渲染「取消编辑」+「完成」两个按钮，替代原独立「保存」按钮：
+     * - 取消编辑 → `onCancelEdit?.() ?? onExitEdit()`
+     * - 完成 → `onSave?.()` + `onExitEdit()`
+     * 不传则维持旧版「保存」按钮（保存但不退出）。
+     */
+    onExitEdit?: () => void;
+    /**
+     * 「取消编辑」专用回调（可选）。传入时取消按钮优先调它，业务层可以在这里
+     * 完成「丢弃草稿 + 退出编辑」组合，从而保证回到阅读态不会看到未保存的脏数据。
+     * 不传时取消按钮回退到 `onExitEdit`。完成按钮链路不受此 prop 影响。
+     */
+    onCancelEdit?: () => void;
+    className?: string;
+    /**
+     * 手机布局：顶栏拆两行（切换画布 / 操作区），并配合 Less 收紧 padding。
+     */
+    phoneLayout?: boolean;
+}
+export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): React.JSX.Element | null;
+export default FloorMapEditTopBar;

package/es/components/pisellFloorMapLayout/components/FloorMapOverview.d.ts

@@ -0,0 +1,49 @@
+/**
+ * FloorMapOverview - 阅读态「All」全览视图（纯渲染版）
+ *
+ * 仅负责把 {@link OverviewLayout} 中各画布的图元渲染到对应的绝对定位区域里；
+ * 由 PisellFloorMapLayout 在主 TransformWrapper 内挂载，与单画布共享同一套
+ * 视口控件（缩放、平移、锁定、全屏、fitBounds、网格按钮等）。
+ *
+ * 设计要点：
+ * - 不再自带 TransformWrapper / ResizeObserver / fit 算法；
+ * - 每个画布作为独立区域，仅一条细边框作分隔，无背景色/网格；
+ * - 画布名显示在边框外的标题带；标题不拦截图元交互；
+ * - 仅渲染 ItemLayer（阅读态），与单画布的 hover/click 行为一致；编辑层不渲染。
+ */
+import React from 'react';
+import type { OverviewLayout } from '../utils/floorMapOverviewLayout';
+import type { FloorMapItemBase, FloorMapItemUnit, FloorMapRenderOptions, FloorMapViewConfig } from '../types';
+import './FloorMapOverview.less';
+export interface FloorMapOverviewProps<T extends FloorMapItemBase> {
+    /** 由 PisellFloorMapLayout 算好的整体布局（区域位置 + 总尺寸） */
+    overviewLayout: OverviewLayout;
+    /**
+     * 仅用于把 `canvas.id` 映射成展示名（区域左上角 chip）。
+     * 直接传 config 而非映射表，避免父组件再多构造一层。
+     */
+    config: FloorMapViewConfig;
+    itemUnit?: FloorMapItemUnit;
+    renderItem: (item: T, index: number, options?: FloorMapRenderOptions) => React.ReactNode;
+    /**
+     * 主 TransformWrapper 的当前缩放，透传到各区域 ItemLayer 的 `viewportScale`。
+     * 缺省（undefined）时下游 `renderItem` 拿不到 viewportScale，预约/桌位卡只能
+     * 按布局像素算 visualShortSide，**永远停在 comfortable 档**，进不去 tooltip-time
+     * 小卡片模式——这正是 All 视图缩放后看不到小卡的根因。
+     */
+    viewportScale?: number;
+    enableHover?: boolean;
+    onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    getMergedItemWrapperStyle?: (item: T, index: number) => React.CSSProperties | undefined;
+    readModeSelectedItemId?: string | null;
+    /**
+     * 点击区域标题（画布名标签）时回调，传入该区域的 `canvasId`。
+     * 传入后标题标签变为可点击（pointer-events 放开 + 指针光标），用于从 All 视图切回该画布。
+     */
+    onSelectCanvas?: (canvasId: string) => void;
+    className?: string;
+}
+export declare function FloorMapOverview<T extends FloorMapItemBase>(props: FloorMapOverviewProps<T>): React.JSX.Element;
+export default FloorMapOverview;

package/es/components/pisellFloorMapLayout/components/FloorMapSelectionZoneElement.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 选区（selection zone）图元展示：虚线框 + 左上角标题标签。
+ *
+ * 成员关系按「几何完全包含」实时计算（见 utils/floorMapSelectionZone），此组件仅负责视觉。
+ * 内部 body 设 `pointer-events: none`，仅外层定位容器接收拖拽，保证框内图元仍可单独点选/拖动。
+ */
+import React from 'react';
+import './FloorMapSelectionZoneElement.less';
+export interface FloorMapSelectionZoneElementProps {
+    /** 选区名称；为空时展示「未命名选区」占位 */
+    name?: string;
+}
+export declare function FloorMapSelectionZoneElement(props: FloorMapSelectionZoneElementProps): React.JSX.Element;