@pisell/materials 6.11.49 → 6.11.50

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

@@ -4,7 +4,8 @@ declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
-    showTotal: (total: number, range: [number, number]) => string;
+    /** 无 props 上下文时仅能根据 total + range 近似推算（见 resolveCurrentPage） */
+    showTotal: (totalRecords: number, range: [number, number]) => any;
     responsive: boolean;
     size: string;
 };

package/es/components/Pagination/index.js

@@ -8,7 +8,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 // import { ArrowLeft, ArrowRight } from "@pisell/icon/es";
 import ArrowRight from '@pisell/icon/es/ArrowRight';
 import ArrowLeft from '@pisell/icon/es/ArrowLeft';
@@ -26,16 +26,32 @@ function getPaginationText(key) {
   if (fromUtils !== fullKey) return fromUtils;
   return (_getText = getText(fullKey)) !== null && _getText !== void 0 ? _getText : getText("table-pagination-".concat(key));
 }
+
+/**
+ * antd Pagination 的 showTotal(total, range) 中 range 为本页条目序号区间 [start, end]，
+ * 不是页码。未受控时用 range 与 pageSize 推算当前页。
+ */
+function resolveCurrentPage(props, range, pageSize) {
+  var _props$current;
+  var fromProps = (_props$current = props.current) !== null && _props$current !== void 0 ? _props$current : props.defaultCurrent;
+  if (typeof fromProps === 'number' && fromProps >= 1) {
+    return fromProps;
+  }
+  var start = range[0];
+  if (start == null || start < 1 || pageSize < 1) {
+    return 1;
+  }
+  return Math.floor((start - 1) / pageSize) + 1;
+}
 var Pagination = function Pagination(props) {
   var show = useMemo(function () {
     return Object.keys(props).length;
   }, [props]);
   var isMiniPagination = useIsMobileTable();
-  var effectiveConfig = useMemo(function () {
+  var itemRenderFn = useMemo(function () {
     var prevText = getPaginationText('previous');
     var nextText = getPaginationText('next');
-    var showTotalFn = getPaginationText('showTotal');
-    var itemRenderFn = function itemRenderFn(_, type, originalElement) {
+    return function (_, type, originalElement) {
       if (type === 'prev') {
         return /*#__PURE__*/React.createElement("div", {
           className: classNames('paginator-page-btn', 'left')
@@ -56,20 +72,28 @@ var Pagination = function Pagination(props) {
       }
       return originalElement;
     };
-    var showTotal = typeof showTotalFn === 'function' ? function (total, range) {
-      return showTotalFn(range[0], range[1]);
-    } : function (total, range) {
-      return "Page ".concat(range[0], " of ").concat(range[1]);
-    };
+  }, []);
+  var showTotalDefault = useCallback(function (totalRecords, range) {
+    var _ref, _props$pageSize;
+    var pageSize = (_ref = (_props$pageSize = props.pageSize) !== null && _props$pageSize !== void 0 ? _props$pageSize : props.defaultPageSize) !== null && _ref !== void 0 ? _ref : 10;
+    var currentPage = resolveCurrentPage(props, range, pageSize);
+    var totalPages = totalRecords <= 0 ? 1 : Math.max(1, Math.ceil(totalRecords / pageSize));
+    var showTotalFn = getPaginationText('showTotal');
+    if (typeof showTotalFn === 'function') {
+      return showTotalFn(currentPage, totalPages);
+    }
+    return "Page ".concat(currentPage, " of ").concat(totalPages);
+  }, [props.current, props.defaultCurrent, props.pageSize, props.defaultPageSize]);
+  var effectiveConfig = useMemo(function () {
     return {
       className: 'materials-grid-paginator',
       defaultCurrent: 1,
-      showTotal: showTotal,
+      showTotal: showTotalDefault,
       itemRender: itemRenderFn,
       responsive: true,
       size: 'small'
     };
-  }, []);
+  }, [itemRenderFn, showTotalDefault]);
   var content = useMemo(function () {
     if (!show) {
       return null;
@@ -85,18 +109,28 @@ var Pagination = function Pagination(props) {
 export var paginationConfig = {
   className: 'materials-grid-paginator',
   defaultCurrent: 1,
-  showTotal: function showTotal(total, range) {
-    return "Page ".concat(range[0], " of ").concat(range[1]);
+  /** 无 props 上下文时仅能根据 total + range 近似推算（见 resolveCurrentPage） */
+  showTotal: function showTotal(totalRecords, range) {
+    var pageSize = 10;
+    var currentPage = resolveCurrentPage({
+      pageSize: pageSize
+    }, range, pageSize);
+    var totalPages = totalRecords <= 0 ? 1 : Math.max(1, Math.ceil(totalRecords / pageSize));
+    var fn = getPaginationText('showTotal');
+    if (typeof fn === 'function') {
+      return fn(currentPage, totalPages);
+    }
+    return "Page ".concat(currentPage, " of ").concat(totalPages);
   },
   responsive: true,
   size: 'small'
 };
 export default Pagination;
 var MiniPagination = function MiniPagination(props) {
-  var _props$current = props.current,
-    current = _props$current === void 0 ? 1 : _props$current,
-    _props$pageSize = props.pageSize,
-    pageSize = _props$pageSize === void 0 ? 10 : _props$pageSize,
+  var _props$current2 = props.current,
+    current = _props$current2 === void 0 ? 1 : _props$current2,
+    _props$pageSize2 = props.pageSize,
+    pageSize = _props$pageSize2 === void 0 ? 10 : _props$pageSize2,
     _props$total = props.total,
     total = _props$total === void 0 ? 0 : _props$total;
 
@@ -163,13 +197,13 @@ var MiniPagination = function MiniPagination(props) {
     className: 'paginator-page-btn-right-icon'
   }))));
 };
-export var FormPagination = function FormPagination(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? {} : _ref$value,
-    onChange = _ref.onChange,
-    page = _ref.page,
-    pageSize = _ref.pageSize,
-    other = _objectWithoutProperties(_ref, _excluded);
+export var FormPagination = function FormPagination(_ref2) {
+  var _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? {} : _ref2$value,
+    onChange = _ref2.onChange,
+    page = _ref2.page,
+    pageSize = _ref2.pageSize,
+    other = _objectWithoutProperties(_ref2, _excluded);
   var _useState = useState(page || 1),
     _useState2 = _slicedToArray(_useState, 2),
     _p = _useState2[0],

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

@@ -0,0 +1,38 @@
+/**
+ * PisellLayouts 命名空间
+ * 布局组件集合
+ *
+ * @example
+ * import { PisellLayouts } from '@pisell/materials';
+ *
+ * <PisellLayouts.BasicGrid columns={3} gap={16}>
+ *   {items.map(item => <Card key={item.id} {...item} />)}
+ * </PisellLayouts.BasicGrid>
+ *
+ * <PisellLayouts.ScrollView direction="horizontal">
+ *   <Content />
+ * </PisellLayouts.ScrollView>
+ */
+/// <reference types="react" />
+declare const PisellLayouts: {
+    BasicGrid: <T>(props: import("../PisellBasicGrid").PisellBasicGridProps<T>) => JSX.Element;
+    ScrollView: import("react").ForwardRefExoticComponent<Omit<import("../PisellScrollView").PisellScrollViewProps, "ref"> & import("react").RefAttributes<import("../PisellScrollView").PisellScrollViewRef>>;
+    FloorMapLayout: <T_1 extends import("../pisellFloorMapLayout").FloorMapItemBase = import("../pisellFloorMapLayout").FloorMapItemBase>(props: import("../pisellFloorMapLayout").PisellFloorMapLayoutProps<T_1> & {
+        ref?: import("react").Ref<import("../pisellFloorMapLayout").PisellFloorMapLayoutRef | null> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    Layout: import("../pisellLayout").CompoundedComponent;
+    Content: import("react").FC<import("../pisellLayout/content").PisellContentProps>;
+    Footer: import("react").FC<import("../pisellLayout/footer").PisellFooterProps>;
+    Header: import("react").FC<import("../pisellLayout/header").PisellHeaderProps>;
+    Sider: import("react").FC<import("../pisellLayout/sider").PisellSiderProps>;
+    Container: <T_2 extends import("../pisellContainer").RenderType>(props: import("../pisellContainer").PisellContainerProps<T_2>) => any;
+    Row: (props: import("../pisellRow").PisellRowProps) => JSX.Element;
+    ViewGrid: import("react").FC<import("../pisellViewGrid").PisellViewGridProps>;
+};
+export default PisellLayouts;
+export type { PisellBasicGridProps } from '../PisellBasicGrid';
+export type { PisellScrollViewProps } from '../PisellScrollView';
+export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapFullscreenMode, FloorMapLayoutContextValue, FloorMapLayoutProviderProps, } from '../pisellFloorMapLayout';
+export { FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, } from '../pisellFloorMapLayout';
+export type { PisellLayoutProps, CompoundedComponent } from '../pisellLayout';
+export type { PisellRowProps } from '../pisellRow';

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
+import { PisellContextType } from '../pisell-config-provider/context';
+import { PisellWalletPassCardProps, FormatOption } from '../pisellWalletPassCard';
+import './index.less';
+export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
+    platform?: PisellContextType['platform'];
+    /** 当用户查看完所有记录时，底部会显示此消息 */
+    endMessage?: React.ReactNode;
+    /** 加载下次数据时的加载站位 */
+    loader?: React.ReactNode;
+    /** 是否有更多数据 */
+    hasMore: boolean;
+    /** 加载更多数据回调 */
+    loadMoreData?: () => Promise<void>;
+    /** 当前list数据 */
+    data: PisellWalletPassCardProps[];
+    /** list空数据时展示内容 */
+    empty?: React.ReactNode;
+    /** 是否展示空状态 */
+    showEmpty?: boolean;
+    /** 是否展示卡片名称 */
+    showName?: boolean;
+    /** 是否展示店铺名称 */
+    showStoreName?: boolean;
+    /** 是否展示核销金额 */
+    showRedeem?: boolean;
+    /** 是否展示余额 */
+    showBalance?: boolean;
+    /** 是否展示编码 */
+    showCode?: boolean;
+    /** 是否展示到期时间 */
+    showValidDate?: boolean;
+    /** 使用日程信息计算有效期 */
+    validDateBySchedule?: boolean;
+    /** 日程列表 */
+    scheduleList?: any[];
+    /** 是否展示详情按钮 */
+    showDetail?: boolean;
+    /** 是否展示二维码 */
+    showQrCode?: boolean;
+    /** 是否展示封面图 */
+    showCover?: boolean;
+    /** 是否余额货币单位 */
+    showBalanceSymbol?: boolean;
+    /** 卡片大小 */
+    type?: 'default' | 'mini';
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑编辑按钮后，弹窗展示之前 */
+    beforeEdit?: (value: any, index: number) => Promise<any> | boolean | void;
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any, index: number, data: any) => void;
+    /** 是否展示状态标识 */
+    showStatus?: boolean;
+    /** 名称标题字号字重颜色配置 */
+    nameTitleStyle?: {
+        fontSize: number;
+        fontWeight: number;
+        color: string;
+    };
+    /** 开启编辑金额 */
+    enableEditAmount?: boolean;
+    /** 编辑金额事件 */
+    onConfirmEditAmount?: (value: number, index: number, data: any) => void;
+    /** 是否使用外部详情处理 */
+    useExternalDetail?: boolean;
+    /** 详情事件 */
+    onDetail?: (value: any, index: number) => void;
+    /** 自定义余额格式化函数，如果提供则优先使用 */
+    formatBalance?: (balance?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义余额标题格式化函数，如果提供则优先使用 */
+    formatBalanceTitle?: (balanceTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额格式化函数，如果提供则优先使用 */
+    formatRedeem?: (redeem?: number, option?: FormatOption) => React.ReactNode;
+    /** 自定义使用金额标题格式化函数，如果提供则优先使用 */
+    formatRedeemTitle?: (redeemTitle?: string, option?: FormatOption) => React.ReactNode;
+    /** 编辑金额前事件 */
+    onBeforeEditAmount?: (value: any, index: number, data: any) => Promise<any> | boolean | void;
+    /** 选项点击事件 */
+    onItemClick?: (e: React.MouseEvent<HTMLDivElement>, option: any) => void;
+    /** 是否展示选中状态的背景色 */
+    showActiveBackground?: boolean;
+}
+declare const _default: React.NamedExoticComponent<PisellCardListProps>;
+export default _default;

package/es/components/pisellDataSourceContainer/components/{Table → Pagination}/index.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { DataSourceContainerContextType } from '../../type';
-declare const _default: React.ForwardRefExoticComponent<Omit<Partial<import("antd").TableProps<any>> & DataSourceContainerContextType & {
-    scopeId?: string | undefined;
-    __id?: string | undefined;
-} & React.RefAttributes<unknown> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<Partial<import("antd").PaginationProps> & DataSourceContainerContextType & React.RefAttributes<unknown> & {
     refId?: string | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

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/PisellFloorMapLayout.js

@@ -70,6 +70,7 @@ function PisellFloorMapLayoutInner(props, ref) {
     controls = _p$controls === void 0 ? {} : _p$controls,
     _p$enableHover = p.enableHover,
     enableHover = _p$enableHover === void 0 ? true : _p$enableHover,
+    readModeSelectedItemId = p.readModeSelectedItemId,
     onItemClick = p.onItemClick,
     onItemHover = p.onItemHover,
     onItemLeave = p.onItemLeave,
@@ -797,7 +798,8 @@ function PisellFloorMapLayoutInner(props, ref) {
       onItemHover: onItemHover,
       onItemLeave: onItemLeave,
       getMergedItemWrapperStyle: getMergedItemWrapperStyle,
-      onInteractionChange: setIsInteractingWithElement
+      onInteractionChange: setIsInteractingWithElement,
+      readModeSelectedItemId: readModeSelectedItemId
     }), isFloorMapView && mode === 'edit' && (placeMode === null || placeMode === void 0 ? void 0 : placeMode.type) === 'scene' && /*#__PURE__*/React.createElement("div", {
       className: placeOverlayClass,
       style: {

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellFloorMapLayout } from './PisellFloorMapLayout';
+/**
+ * PisellFloorMapLayout 楼层图布局
+ *
+ * 空间布局视图：在二维平面按坐标渲染资源（桌台/房间/工位等），
+ * 支持缩放、平移、复位、区域定位，仅负责展示与交互。
+ */
+declare const meta: Meta<typeof PisellFloorMapLayout>;
+export default meta;
+declare type Story = StoryObj<typeof PisellFloorMapLayout>;
+/**
+ * 默认 - 纯色底 + 简单格子（格子单位，默认 item 间距 8px）
+ */
+export declare const Default: Story;
+/**
+ * 显示网格线（item 间距由 mapLayer.gap 控制）
+ */
+export declare const WithGrid: Story;
+/**
+ * 开启平移 - 可拖拽画布
+ */
+export declare const WithPan: Story;
+export declare const WithShapes: Story;
+export declare const WithVariableSizes: Story;
+export declare const PixelUnits: Story;
+/**
+ * 点击与 Hover 事件
+ */
+export declare const WithEvents: Story;
+/**
+ * Ref 调用 - 外部按钮控制缩放/复位/区域定位
+ */
+export declare const WithRefControls: Story;
+export declare const FloorMapViewEdit: Story;
+/**
+ * 平面图编辑态 + 自定义数据源记录表单（`dataSourceRecordForm.sales`）
+ */
+export declare const FloorMapViewEditCustomRecordForm: Story;
+/**
+ * Floor Map 视图 - 阅读态（方桌同样用 Figma 样式）
+ */
+export declare const FloorMapViewRead: Story;
+/**
+ * 自定义控制按钮显隐
+ */
+export declare const ControlsHidden: Story;
+/**
+ * `FloorMapLayoutProvider` 注入 `floorMapConfig` / `dataSources`；Layout 仅传展示向 props
+ */
+export declare const FloorMapWithLayoutProvider: Story;
+/**
+ * Figma 设计稿效果 - 餐厅桌台状态图（顶部 Tab + 图例参考 node 14131:6266，内容区不变）
+ */
+export declare const FigmaDesign: Story;

package/es/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/es/components/pisellFloorMapLayout/components/EditableItemLayer.d.ts

@@ -0,0 +1,46 @@
+/**
+ * EditableItemLayer - 编辑态图元层：拖拽、缩放、选中、吸附
+ */
+import React, { type CSSProperties } from 'react';
+import type { FloorMapItemBase, FloorMapMergedItem, FloorMapRenderOptions } from '../types';
+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;
+    /** 每项外层容器额外样式（与定位样式合并） */
+    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/es/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/es/components/pisellFloorMapLayout/components/FloorMapDataForm.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { FloorMapDataSources, DataSourceFormColumn } from '../types';
+import './FloorMapDataForm.less';
+export interface FloorMapDataFormProps {
+    dataSourceKey: string;
+    recordId: string;
+    record: Record<string, unknown>;
+    dataSources: FloorMapDataSources;
+    onSave: (dataSourceKey: string, id: string, newData: Record<string, unknown>) => void;
+    saving?: boolean;
+    /** 列配置：标签、类型（string/number/select）、选项（select 时）；不传则自动列举 record 除 id 外字段 */
+    columns?: DataSourceFormColumn[];
+    className?: string;
+}
+/** 简单通用表单：可编辑记录中的字段；支持 columns 配置标签与控件类型 */
+export declare function FloorMapDataForm(props: FloorMapDataFormProps): JSX.Element;
+export default FloorMapDataForm;

package/es/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/es/components/pisellFloorMapLayout/components/FloorMapEditTopBar.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 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;
+}
+export declare function FloorMapEditTopBar(props: FloorMapEditTopBarProps): JSX.Element | null;
+export default FloorMapEditTopBar;

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

@@ -0,0 +1,35 @@
+/**
+ * FloorMapToolbar - 编辑态左侧侧边栏：按分类添加图元、绑定数据源与行；保存可选（默认用顶栏）
+ */
+import React from 'react';
+import type { FloorMapViewConfig, FloorMapDataSources, FloorMapMergedItem, FloorMapSceneElement, FloorMapPlaceMode } from '../types';
+import { type FloorMapPaletteDragPayload } from '../utils/floorMapDropUtils';
+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;
+}
+export declare function FloorMapToolbar(props: FloorMapToolbarProps): JSX.Element;
+export default FloorMapToolbar;