@pisell/materials 6.11.108 → 6.11.109

package/lib/components/pisellFloorMapLayout/appearance/floorMapAppearance.d.ts

@@ -0,0 +1,29 @@
+import type { FloorMapEdgeStatus } from '../types';
+export declare type FloorMapAppearanceMode = 'light' | 'dark';
+export interface FloorMapEdgeStatusStyle {
+    readonly stroke: string;
+    readonly dashed: boolean;
+}
+export interface FloorMapAppearanceTokens {
+    readonly mode: FloorMapAppearanceMode;
+    /**
+     * 外观模式提供的画布背景兜底色。
+     * 若调用方显式传入 `mapLayer.backgroundColor`，应以显式背景色为准。
+     */
+    readonly fallbackCanvasBackgroundColor: string;
+    /** 按连线状态默认描边样式 */
+    readonly edgeStatusStyles: Record<FloorMapEdgeStatus, FloorMapEdgeStatusStyle>;
+    readonly edgeSelectedStroke: string;
+    readonly edgeGhostStroke: string;
+    readonly edgePortLabelBackground: string;
+    readonly edgePortLabelText: string;
+    readonly edgePortLabelBorder: string;
+    /** 拖动/缩放图元时的边对齐辅助线颜色（主题色） */
+    readonly alignGuideStroke: string;
+}
+/**
+ * 按外观模式返回 floorMap 画布背景 token。
+ * 当前仅承载通用画布背景兜底色，不包含业务壳层颜色；
+ * 渲染层应先尊重显式 `mapLayer.backgroundColor`，再回退到这里的 token。
+ */
+export declare function getFloorMapAppearanceTokens(mode: FloorMapAppearanceMode): FloorMapAppearanceTokens;

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

@@ -0,0 +1,22 @@
+/// <reference types="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): JSX.Element;
+export default CanvasTabs;

package/lib/components/pisellFloorMapLayout/components/EdgeLayer.d.ts

@@ -0,0 +1,37 @@
+/**
+ * EdgeLayer - 拓扑连线 SVG 层（正交折线 + 端口标签）
+ */
+import React from 'react';
+import type { FloorMapAppearanceTokens } from '../appearance/floorMapAppearance';
+import type { FloorMapEdge } from '../types';
+import { type FloorMapEdgeRoute, type FloorMapItemPixelRect } from '../utils/edgeRouting';
+import './EdgeLayer.less';
+export interface EdgeLayerProps {
+    width: number;
+    height: number;
+    contentOffsetX?: number;
+    contentOffsetY?: number;
+    edges: FloorMapEdge[];
+    routes: FloorMapEdgeRoute[];
+    rectsById: Map<string, FloorMapItemPixelRect>;
+    appearance: FloorMapAppearanceTokens;
+    mode: 'read' | 'edit';
+    selectedEdgeId?: string | null;
+    ghostPathD?: string | null;
+    onEdgeClick?: (edgeId: string, event: React.MouseEvent) => void;
+    /** 画布 viewport scale，用于段手柄反向缩放 */
+    viewportScale?: number;
+    /** 段手柄拖动开始（含首/末段以触发 stub 插入） */
+    onSegmentDragStart?: (params: {
+        edgeId: string;
+        role: 'first' | 'last' | 'inner';
+        segmentIndex: number;
+        axis: 'h' | 'v';
+        startPosition: number;
+        clientX: number;
+        clientY: number;
+        segmentLength?: number;
+    }) => void;
+    className?: string;
+}
+export declare function EdgeLayer(props: EdgeLayerProps): JSX.Element;

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

@@ -0,0 +1,66 @@
+/**
+ * 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;
+    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;
+    /**
+     * 对齐阈值（屏幕像素，组件内会按 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>): JSX.Element;
+export default EditableItemLayer;

package/lib/components/pisellFloorMapLayout/components/FigmaTableCard.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import type { FloorMapMergedItem, FloorMapDataSources } from '../types';
+export declare type FigmaTableStatus = 'available' | 'reserved' | 'waiting' | 'dining' | 'billed' | 'availableSoon';
+/** 方桌/圆桌卡片展示用数据结构（与 Figma 设计一致，支持桌号/状态/人数/区域等） */
+export interface FigmaTableCardItem {
+    id: string;
+    /**
+     * 无绑定或无可展示数据行时与蘸料摆台占位一致：浅灰底 + 虚线框 + 提示文案
+     * @see getRenderItemByKindCondimentStation（RecordBoard Story）
+     */
+    isNoDataPlaceholder?: boolean;
+    placeholderBorderColor?: string;
+    placeholderHint?: string;
+    /** 占位主标题：优先图元名称，否则「餐桌」/「圆桌」 */
+    placeholderTitle?: string;
+    /** 桌号/名称，空闲态居中显示 */
+    displayName?: string;
+    status?: FigmaTableStatus;
+    customerName?: string;
+    reserveTime?: string;
+    /** 当前用餐人数（与 Figma 设计一致） */
+    guests?: number;
+    /** 可坐人数（与表格列「可坐人数」绑定） */
+    capacity?: number;
+    dishes?: string;
+    duration?: string;
+    /** 区域（与表格列「区域」绑定，如大厅/包厢A） */
+    area?: string;
+}
+/** 从 merged item + dataSources 得到卡片数据 */
+export declare function getFigmaTableCardFromMerged(item: FloorMapMergedItem, dataSources: FloorMapDataSources): FigmaTableCardItem;
+/** 渲染 Figma 样式的方桌卡片（上下小条 + 资源信息标题栏 + 白底卡片 + 状态色边框） */
+export declare function renderFigmaStyleTableCard(cardItem: FigmaTableCardItem): JSX.Element;
+/** 渲染 Figma 样式的圆桌卡片（顶部资源信息 chip + 圆形主体，圆形主体只展示状态相关内容） */
+export declare function renderFigmaStyleRoundTableCard(cardItem: FigmaTableCardItem): JSX.Element;
+/** 返回用于 renderItemByKind.table 的渲染函数（方桌） */
+export declare function getRenderItemByKindTable(dataSources: FloorMapDataSources): (item: unknown) => JSX.Element;
+/** 返回用于 renderItemByKind.roundTable 的渲染函数（圆桌） */
+export declare function getRenderItemByKindRoundTable(dataSources: FloorMapDataSources): (item: unknown) => JSX.Element;

package/lib/components/pisellFloorMapLayout/components/FloorMapBuiltinShapeElement.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type FloorMapBuiltinShapeRenderProps } from '../utils/floorMapBuiltinShapes';
+export interface FloorMapBuiltinShapeElementProps extends FloorMapBuiltinShapeRenderProps {
+    builtinShapeKey?: string;
+    name?: string;
+}
+export declare function FloorMapBuiltinShapeElement(props: FloorMapBuiltinShapeElementProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/FloorMapEdgeEditPanel.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { FloorMapEdge, FloorMapViewConfig } from '../types';
+import './FloorMapEdgeEditPanel.less';
+export interface FloorMapEdgeEditPanelProps {
+    edge: FloorMapEdge;
+    config: FloorMapViewConfig;
+    onUpdate: (patch: Partial<FloorMapEdge>) => void;
+    onClose: () => void;
+    onDelete?: () => void;
+    layoutDraftDirty?: boolean;
+    className?: string;
+}
+export declare function FloorMapEdgeEditPanel(props: FloorMapEdgeEditPanelProps): JSX.Element;

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

@@ -0,0 +1,11 @@
+/// <reference types="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): JSX.Element;
+export default FloorMapEditPanel;

package/lib/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): JSX.Element | null;
+export default FloorMapEditTopBar;

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

@@ -0,0 +1,44 @@
+/**
+ * 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;
+    className?: string;
+}
+export declare function FloorMapOverview<T extends FloorMapItemBase>(props: FloorMapOverviewProps<T>): JSX.Element;
+export default FloorMapOverview;

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbar.d.ts

@@ -0,0 +1,84 @@
+/**
+ * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
+ */
+import React from 'react';
+import type { FloorMapViewConfig, FloorMapDataSources, FloorMapMergedItem, FloorMapSceneElement, FloorMapPlaceMode } from '../types';
+import { type FloorMapPaletteDragPayload } from '../utils/floorMapDropUtils';
+import { type FloorMapPaletteBulkPlaceItem, type FloorMapToolbarPaletteEntry } from '../utils/floorMapToolbarPalette';
+import type { FloorMapResourcePickerSlotProps } from '../utils/floorMapResourcePickerTypes';
+import './FloorMapToolbar.less';
+export type { FloorMapPlaceMode as PlaceMode };
+export interface FloorMapToolbarProps {
+    config: FloorMapViewConfig;
+    dataSources: FloorMapDataSources;
+    dataSourceLabels?: Record<string, string>;
+    canCreate: boolean;
+    placeMode: FloorMapPlaceMode;
+    onPlaceModeChange: (mode: FloorMapPlaceMode) => void;
+    renderPreviewItem?: (item: FloorMapMergedItem) => React.ReactNode;
+    placementPreviewSize?: {
+        width: number;
+        height: number;
+    };
+    decorationPreviewSize?: number;
+    sceneElements?: FloorMapSceneElement[];
+    onSave?: () => void;
+    saving?: boolean;
+    saveError?: Error | string;
+    /** 布局草稿已相对持久化配置变更，提示用户点击本栏「保存」 */
+    layoutDirty?: boolean;
+    className?: string;
+    /** 触摸/笔：Pointer 拖拽落点（mouse 仍用 HTML5 DnD） */
+    onPaletteCardPointerDown?: (payload: FloorMapPaletteDragPayload, e: React.PointerEvent<HTMLButtonElement>) => void;
+    /** 触摸拖放结束后吞掉按钮 click，避免误触切换落点模式 */
+    consumeToolbarClickIfTouchDrag?: () => boolean;
+    /** 手机布局：侧栏悬浮覆盖画布（由 PisellFloorMapLayout + Less 控制定位） */
+    phoneLayout?: boolean;
+    /** 为 true 时初始为收起（预约手机编辑态默认收起图元栏） */
+    defaultCollapsed?: boolean;
+    /**
+     * 手机布局：选中图元种类后，一键在当前视口中心落点（与画布点击落点规则一致）。
+     */
+    onRequestPlaceAtCanvasCenter?: () => void;
+    /**
+     * 每个调色板分类在侧栏直接展示的图元数量；超出则显示「查看全部」（默认见
+     * floorMapLayoutConstants.FLOOR_MAP_TOOLBAR_PALETTE_SIDEBAR_LIMIT，默认 5）。
+     */
+    paletteSidebarVisibleLimit?: number;
+    /** 「查看全部」弹窗确认：批量落在画布右侧空白区（所有分类通用）。 */
+    onBulkAddPaletteToCanvas?: (items: FloorMapPaletteBulkPlaceItem[]) => void;
+    /**
+     * 「查看全部」弹窗渲染槽位：用于业务侧复用统一的选择弹窗（如 Selector + 数量选择）。
+     * 未传时使用内置 `FloorMapToolbarViewAllModal`（加减步进器）。
+     */
+    renderPaletteViewAllModal?: (props: {
+        open: boolean;
+        categoryLabel: string;
+        entries: FloorMapToolbarPaletteEntry[];
+        onClose: () => void;
+        onConfirm: (items: FloorMapPaletteBulkPlaceItem[]) => void;
+        renderEntryPreview: (entry: FloorMapToolbarPaletteEntry) => React.ReactNode;
+        /** 容器平台：手机布局透传 `'h5'`，默认 `'pc'` */
+        platform?: 'pc' | 'h5' | 'ipad';
+    }) => React.ReactNode;
+    /**
+     * 资源选择弹窗点「确定」：按已选 recordIds 落画布（多选走批量网格，单选落视口中心附近）。
+     * @returns 是否已成功写入草稿
+     */
+    onResourcePickerConfirmPlace?: (scene: Extract<FloorMapPlaceMode, {
+        type: 'scene';
+    }>) => boolean;
+    /**
+     * 资源选择 Modal 渲染（必传）。
+     * 通用基础 modal 已下线，业务侧需注入实现（如 `PisellProResourcePickerModal`）；
+     * 未注入时仅打 warn，不渲染选择弹窗，资源选择交互不可用。
+     */
+    renderResourcePickerModal?: (props: FloorMapResourcePickerSlotProps) => React.ReactNode;
+    /**
+     * 无二次选择的调色板项（装饰内置图形、底图图片、`dataBindingPolicy: none` 等）：
+     * 侧栏点击即落在画布右侧空白区，不进入「再点画布」落点模式。
+     */
+    onDirectPlacePaletteItem?: (item: FloorMapPaletteBulkPlaceItem) => void;
+}
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export default FloorMapToolbar;

package/lib/components/pisellFloorMapLayout/components/FloorMapToolbarViewAllModal.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 侧栏 palette「查看全部」：任意分类下图元超过展示上限时，弹窗内按数量多选并一键落点。
+ */
+import React from 'react';
+import { type FloorMapPaletteBulkPlaceItem, type FloorMapToolbarPaletteEntry } from '../utils/floorMapToolbarPalette';
+export interface FloorMapToolbarViewAllModalProps {
+    open: boolean;
+    categoryLabel: string;
+    entries: FloorMapToolbarPaletteEntry[];
+    onClose: () => void;
+    onConfirm: (items: FloorMapPaletteBulkPlaceItem[]) => void;
+    renderEntryPreview: (entry: FloorMapToolbarPaletteEntry) => React.ReactNode;
+    /**
+     * 容器平台：透传到 `PisellContainer` 的 `props.platform`。
+     * 手机布局应传 `'h5'`，否则默认 `'pc'`。
+     */
+    platform?: 'pc' | 'h5' | 'ipad';
+}
+export declare function FloorMapToolbarViewAllModal(props: FloorMapToolbarViewAllModalProps): JSX.Element;
+export default FloorMapToolbarViewAllModal;

package/lib/components/pisellFloorMapLayout/components/FloorMapZoneElement.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './FloorMapZoneElement.less';
+export interface FloorMapZoneElementProps {
+    name?: string;
+}
+export declare function FloorMapZoneElement(props: FloorMapZoneElementProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ItemLayer.d.ts

@@ -0,0 +1,59 @@
+/**
+ * ItemLayer - 楼层图展示层
+ * 按 items 的 (x, y) 与 cellSize 定位，用 renderItem 渲染每项内容
+ */
+import React from 'react';
+import type { FloorMapItemBase, FloorMapItemUnit, FloorMapRenderOptions } from '../types';
+import type { CSSProperties } from 'react';
+import './ItemLayer.less';
+export interface ItemLayerProps<T extends FloorMapItemBase> {
+    /** 资源列表 */
+    items: T[];
+    /** 每项渲染函数 */
+    renderItem: (item: T, index: number, options?: FloorMapRenderOptions) => React.ReactNode;
+    /** 画布缩放（与平面图 zoom 一致），透传给 renderItem 第三参数 */
+    viewportScale?: number;
+    /** 每项 key */
+    rowKey?: string | ((item: T, index: number) => string);
+    /** 每格像素尺寸（cell 单位时用；pixel 单位时作为缺省宽高） */
+    cellSize: number;
+    /** item 坐标与尺寸单位：cell 格子数，pixel 像素 */
+    itemUnit?: FloorMapItemUnit;
+    /** item 之间的间距（像素），仅 cell 单位时生效 */
+    itemGap?: number;
+    /** 内容区总宽度（像素），由 items 推导或外部传入 */
+    contentWidth: number;
+    /** 内容区总高度（像素） */
+    contentHeight: number;
+    /** 内容区 X 偏移（画布包围盒向左/上扩展时，图元层整体平移） */
+    contentOffsetX?: number;
+    /** 内容区 Y 偏移 */
+    contentOffsetY?: number;
+    /** 是否启用 hover 事件 */
+    enableHover?: boolean;
+    /**
+     * 是否在 hover 时显示外沿描边（选中感高亮）。默认 true。
+     * 平面图只读态可由布局关闭，仅去掉描边，不影响 onItemHover。
+     */
+    itemHoverOutline?: boolean;
+    /** 点击回调 */
+    onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 进入 */
+    onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** hover 离开 */
+    onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    getMergedItemWrapperStyle?: (item: T, index: number) => CSSProperties | undefined;
+    /**
+     * 阅读态：与 {@link rowKey} 解析 id 相等的图元加选中外圈（如详情 Modal 打开时）。
+     */
+    readModeSelectedItemId?: string | null;
+    /**
+     * 与编辑态一致：在含 `data-pisell-floor-room-scroll-surface` 的区域内按下时置 true，
+     * 用于禁用 Transform 画布平移，避免图元内纵向滑动拖动画布。
+     */
+    onInteractionChange?: (active: boolean) => void;
+    className?: string;
+}
+export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
+export default ItemLayer;

package/lib/components/pisellFloorMapLayout/components/NodePortMarkers.d.ts

@@ -0,0 +1,20 @@
+/**
+ * NodePortMarkers - 选中图元时显示四向锚点，用于拉线
+ */
+import React from 'react';
+import type { FloorMapEdgeAnchor } from '../types';
+import { type FloorMapItemPixelRect } from '../utils/edgeRouting';
+import './NodePortMarkers.less';
+export interface NodePortMarkersProps {
+    rect: FloorMapItemPixelRect;
+    contentOffsetX?: number;
+    contentOffsetY?: number;
+    /** 仅展示/高亮（拉线吸附目标），不可点击 */
+    previewOnly?: boolean;
+    onAnchorPointerDown?: (anchor: FloorMapEdgeAnchor, event: React.PointerEvent) => void;
+    highlightAnchors?: FloorMapEdgeAnchor[];
+    className?: string;
+    /** 画布 viewport scale，用于把圆点和外移距离按 1/scale 反向缩放，保持视觉尺寸恒定 */
+    viewportScale?: number;
+}
+export declare function NodePortMarkers(props: NodePortMarkersProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ViewControls.d.ts

@@ -0,0 +1,61 @@
+/**
+ * ViewControls - 内置视图控制：默认仅缩放；可选复位、区域定位、全屏等
+ * 平面图（dockChrome）：Dock 折叠入口 + 展开条（含业务插槽、空闲自动收起）
+ * 非平面图：单条横栏，缩放与工具始终同排（无 Menu 折叠）
+ */
+import React from 'react';
+import type { FloorMapControlsConfig } from '../types';
+import './ViewControls.less';
+/** 从 react-zoom-pan-pinch 拿到的控制 API（由主组件传入） */
+export interface ViewControlsApi {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetTransform: () => void;
+    /** 区域定位，可能由主组件基于 items 计算后封装 */
+    fitBounds?: () => void;
+    /** 切换全屏（requestFullscreen / exitFullscreen） */
+    toggleFullscreen?: () => void;
+}
+export interface ViewControlsProps {
+    /** 控制 API */
+    api: ViewControlsApi;
+    /** 显隐配置 */
+    config?: FloorMapControlsConfig;
+    /** 当前缩放比例（1 = 100%），用于 Stepper 展示 */
+    scale?: number;
+    /** 当前是否处于全屏 */
+    isFullscreen?: boolean;
+    /** 当前 transform 是否处于「适配视口」结果（用于按钮激活态） */
+    fitBoundsActive?: boolean;
+    className?: string;
+    /** 与 config.showGridToggle 联用：当前画布是否显示网格 */
+    mapGridVisible?: boolean;
+    /** 切换当前画布 draft 的 mapLayer.showGrid */
+    onToggleMapGrid?: () => void;
+    /** 当前是否显示连线层（与 `enableEdges` 联用） */
+    edgesLayerVisible?: boolean;
+    /** 切换连线层显隐；未传时不展示连线开关 */
+    onToggleEdgesLayer?: () => void;
+    /**
+     * 视口锁定态：true 时显示「已锁定」图标，并禁用所有改变视角的按钮
+     * （zoom +/- / reset / fitBounds）。pan / wheel / pinch 由调用方在 TransformWrapper 上同步关闭。
+     */
+    viewportLocked?: boolean;
+    /** 切换视口锁定；未传时不展示锁定按钮 */
+    onToggleViewportLock?: () => void;
+    /**
+     * 平面图 Dock：圆角浅底样式，默认折叠为单入口；展开后含缩放、工具、全屏与 dockExpandedTrailing
+     */
+    dockChrome?: boolean;
+    /** Dock 展开区内、与缩放/网格等按钮平级的业务工具按钮 */
+    dockExpandedToolButtons?: React.ReactNode;
+    /** Dock 展开区最右侧业务插槽（如「编辑画布」） */
+    dockExpandedTrailing?: React.ReactNode;
+    /**
+     * Dock 展开后无操作自动收起（毫秒）；0 表示不自动收起
+     * @default 10000
+     */
+    autoCollapseDockMs?: number;
+}
+export declare function ViewControls(props: ViewControlsProps): JSX.Element | null;
+export default ViewControls;

package/lib/components/pisellFloorMapLayout/components/ViewControlsWithZoom.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 在 TransformWrapper 内用 useControls 拿到 zoom 控制并渲染 ViewControls，确保点击加减能缩放
+ */
+import React from 'react';
+import type { FloorMapControlsConfig } from '../types';
+export interface ViewControlsWithZoomProps {
+    config?: FloorMapControlsConfig;
+    scale?: number;
+    isFullscreen?: boolean;
+    /** 当前 transform 是否吻合「适配视口」结果，用于按钮激活态 */
+    fitBoundsActive?: boolean;
+    fitBounds: () => void;
+    /** 未传时不展示全屏按钮（如编辑态 floorMapFullscreenMode 为 disabled） */
+    toggleFullscreen?: () => void;
+    mapGridVisible?: boolean;
+    onToggleMapGrid?: () => void;
+    edgesLayerVisible?: boolean;
+    onToggleEdgesLayer?: () => void;
+    /** 视口锁定态（true 时所有视角写入入口被禁用） */
+    viewportLocked?: boolean;
+    /** 切换视口锁定；未传时不展示锁定按钮 */
+    onToggleViewportLock?: () => void;
+    dockChrome?: boolean;
+    dockExpandedToolButtons?: React.ReactNode;
+    dockExpandedTrailing?: React.ReactNode;
+    autoCollapseDockMs?: number;
+}
+export declare function ViewControlsWithZoom(props: ViewControlsWithZoomProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 楼层图布局子组件导出
+ */
+export { MapLayer } from './MapLayer';
+export { ItemLayer } from './ItemLayer';
+export { ViewControls } from './ViewControls';
+export { ViewControlsWithZoom } from './ViewControlsWithZoom';
+export { CanvasTabs } from './CanvasTabs';
+export { EditableItemLayer } from './EditableItemLayer';
+export { FloorMapToolbar } from './FloorMapToolbar';
+export { FloorMapEditTopBar } from './FloorMapEditTopBar';
+export { FloorMapEditPanel } from './FloorMapEditPanel';
+export { FloorMapDataForm } from './FloorMapDataForm';
+export { FloorMapOverview } from './FloorMapOverview';
+export type { ViewControlsApi } from './ViewControls';
+export type { ViewControlsWithZoomProps } from './ViewControlsWithZoom';
+export type { CanvasTabsProps } from './CanvasTabs';
+export type { EditableItemLayerProps } from './EditableItemLayer';
+export type { FloorMapToolbarProps, PlaceMode } from './FloorMapToolbar';
+export type { FloorMapEditTopBarProps, FloorMapEditTopBarMode, } from './FloorMapEditTopBar';
+export type { FloorMapEditPanelProps } from './FloorMapEditPanel';
+export type { FloorMapDataFormProps } from './FloorMapDataForm';
+export type { FloorMapOverviewProps } from './FloorMapOverview';