@pisell/materials 1.0.1057 → 1.0.1059

package/lib/components/pisellEntityCard/PisellEntityCard.stories.js

@@ -0,0 +1,349 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellEntityCard/PisellEntityCard.stories.tsx
+var PisellEntityCard_stories_exports = {};
+__export(PisellEntityCard_stories_exports, {
+  ActionButtonOnly: () => ActionButtonOnly,
+  ActionDefaultOff: () => ActionDefaultOff,
+  ActionIconOnly: () => ActionIconOnly,
+  ActionMixedWithCustomStyle: () => ActionMixedWithCustomStyle,
+  ActionTextOnly: () => ActionTextOnly,
+  B1Line: () => B1Line,
+  B2Horizontal: () => B2Horizontal,
+  B2Vertical: () => B2Vertical,
+  B5Standard: () => B5Standard,
+  B9Extended: () => B9Extended,
+  Clickable: () => Clickable,
+  Default: () => Default,
+  Disabled: () => Disabled,
+  MediaIcon: () => MediaIcon,
+  MediaThumbnail: () => MediaThumbnail,
+  PrimaryOnly: () => PrimaryOnly,
+  SlotPrimary: () => SlotPrimary,
+  SwipeToDelete: () => SwipeToDelete,
+  TagPositionInline: () => TagPositionInline,
+  WidthFull: () => WidthFull,
+  WithActions: () => WithActions,
+  default: () => PisellEntityCard_stories_default
+});
+module.exports = __toCommonJS(PisellEntityCard_stories_exports);
+var import_icons = require("@ant-design/icons");
+var import_PisellEntityCard = require("./PisellEntityCard");
+var meta = {
+  title: "Data Display/PisellEntityCard",
+  component: import_PisellEntityCard.PisellEntityCard,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => /* @__PURE__ */ React.createElement("div", { style: { width: 340 } }, /* @__PURE__ */ React.createElement(Story, null))
+  ],
+  argTypes: {
+    density: {
+      description: "信息密度",
+      control: "select",
+      options: ["B1", "B2", "B5", "B9"]
+    },
+    layout: {
+      description: "布局方向",
+      control: "radio",
+      options: ["horizontal", "vertical"]
+    },
+    width: {
+      description: "卡片宽度",
+      control: "select",
+      options: ["content", "full", 300, 340, 400]
+    },
+    showMedia: { description: "显示媒体区", control: "boolean" },
+    showPrimaryText: { description: "显示主文案", control: "boolean" },
+    showSecondaryText: { description: "显示次级文案", control: "boolean" },
+    showTags: { description: "显示标签", control: "boolean" },
+    showActions: { description: "显示底部操作", control: "boolean" },
+    swipeToDelete: { description: "开启左滑删除", control: "boolean" }
+  },
+  args: {
+    width: 340
+  }
+};
+var PisellEntityCard_stories_default = meta;
+var defaultPrimary = "张三";
+var defaultSecondary = [{ text: "产品经理 · 杭州" }, { text: "钉钉事业部" }];
+var defaultTags = [{ text: "在职" }, { text: "正式" }];
+var defaultMedia = {
+  type: "avatar",
+  src: "https://ui-avatars.com/api/?name=Zhang+San&background=4a90d9&color=fff&size=48",
+  alt: "头像",
+  size: 48
+};
+var Default = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    density: "B2",
+    layout: "horizontal"
+  }
+};
+var PrimaryOnly = {
+  args: {
+    primaryText: "实体名称",
+    showMedia: false,
+    showSecondaryText: false,
+    showTags: false,
+    density: "B1"
+  }
+};
+var B1Line = {
+  args: {
+    primaryText: defaultPrimary,
+    media: {
+      ...defaultMedia,
+      src: "https://ui-avatars.com/api/?name=Zhang+San&background=4a90d9&color=fff&size=24",
+      size: 24
+    },
+    density: "B1",
+    layout: "horizontal",
+    showSecondaryText: false,
+    showTags: false
+  }
+};
+var B2Horizontal = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    density: "B2",
+    layout: "horizontal"
+  }
+};
+var B2Vertical = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: {
+      ...defaultMedia,
+      src: "https://ui-avatars.com/api/?name=Zhang+San&background=4a90d9&color=fff&size=64",
+      size: 64
+    },
+    density: "B2",
+    layout: "vertical"
+  }
+};
+var B5Standard = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: [
+      { text: "产品经理 · 杭州" },
+      { text: "钉钉事业部" },
+      { text: "第三行描述" },
+      { text: "第四行" },
+      { text: "第五行" }
+    ],
+    tags: defaultTags,
+    media: defaultMedia,
+    density: "B5",
+    layout: "horizontal"
+  }
+};
+var B9Extended = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: [
+      ...defaultSecondary,
+      { text: "带提示的说明", showTooltip: true }
+    ],
+    tags: defaultTags,
+    media: defaultMedia,
+    density: "B9",
+    layout: "horizontal"
+  }
+};
+var ActionDefaultOff = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: false,
+    actions: [
+      { type: "text", label: "查看详情", onClick: () => {
+      } }
+    ]
+  }
+};
+var ActionTextOnly = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [
+      { type: "text", label: "查看详情", onClick: () => console.log("查看详情") },
+      { type: "text", label: "Add Contact", onClick: () => console.log("Add Contact") }
+    ]
+  }
+};
+var ActionButtonOnly = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [
+      { type: "button", label: "选择", onClick: () => console.log("选择") },
+      { type: "button", label: "编辑", onClick: () => console.log("编辑") }
+    ]
+  }
+};
+var ActionIconOnly = {
+  args: {
+    primaryText: "Bill Camp",
+    secondaryTexts: [{ text: "Billcamp@pisell.com" }],
+    media: defaultMedia,
+    showActions: true,
+    actions: [
+      { type: "icon", icon: /* @__PURE__ */ React.createElement(import_icons.EditOutlined, null), onClick: () => console.log("编辑") }
+    ]
+  }
+};
+var ActionMixedWithCustomStyle = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [
+      { type: "text", label: "Add Contact", icon: /* @__PURE__ */ React.createElement(import_icons.PlusOutlined, null), onClick: () => console.log("Add Contact"), style: { color: "#1677ff" } },
+      { type: "button", label: "选择", onClick: () => console.log("选择"), style: { borderColor: "#52c41a", color: "#52c41a" } },
+      { type: "icon", icon: /* @__PURE__ */ React.createElement(import_icons.EditOutlined, null), onClick: () => console.log("编辑"), style: { color: "#475467" } },
+      { type: "icon", icon: /* @__PURE__ */ React.createElement(import_icons.DeleteOutlined, null), onClick: () => console.log("删除"), className: "pisell-entity-card-action-icon", style: { color: "#ff4d4f" } }
+    ]
+  }
+};
+var WithActions = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [
+      { type: "text", label: "查看详情", onClick: () => console.log("查看") },
+      { type: "button", label: "选择", onClick: () => console.log("选择") }
+    ]
+  }
+};
+var SwipeToDelete = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    swipeToDelete: true,
+    onDelete: () => console.log("onDelete")
+  }
+};
+var TagPositionInline = {
+  args: {
+    primaryText: defaultPrimary,
+    tags: defaultTags,
+    tagPosition: "inline",
+    showMedia: false,
+    showSecondaryText: false
+  }
+};
+var WidthFull = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    width: "full"
+  },
+  decorators: [
+    (Story) => /* @__PURE__ */ React.createElement("div", { style: { width: 340 } }, /* @__PURE__ */ React.createElement(Story, null))
+  ]
+};
+var SlotPrimary = {
+  args: {
+    primaryText: "不应显示",
+    renderPrimary: () => /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 700, color: "#1677ff" } }, "自定义主文案")
+  }
+};
+var MediaThumbnail = {
+  args: {
+    primaryText: "商品名称",
+    secondaryTexts: [{ text: "¥99.00" }],
+    media: {
+      type: "thumbnail",
+      src: "https://picsum.photos/seed/product/128/128",
+      alt: "商品图",
+      size: 64,
+      shape: "square"
+    },
+    density: "B2"
+  }
+};
+var MediaIcon = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: {
+      type: "icon",
+      icon: /* @__PURE__ */ React.createElement(import_icons.UserOutlined, { style: { fontSize: 24 } }),
+      size: 40,
+      color: "#1677ff"
+    },
+    density: "B2"
+  }
+};
+var Clickable = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    onClick: () => alert("卡片被点击")
+  }
+};
+var Disabled = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    disabled: true
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionButtonOnly,
+  ActionDefaultOff,
+  ActionIconOnly,
+  ActionMixedWithCustomStyle,
+  ActionTextOnly,
+  B1Line,
+  B2Horizontal,
+  B2Vertical,
+  B5Standard,
+  B9Extended,
+  Clickable,
+  Default,
+  Disabled,
+  MediaIcon,
+  MediaThumbnail,
+  PrimaryOnly,
+  SlotPrimary,
+  SwipeToDelete,
+  TagPositionInline,
+  WidthFull,
+  WithActions
+});

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

@@ -0,0 +1,5 @@
+/**
+ * PisellEntityCard 组件导出
+ */
+export { PisellEntityCard } from './PisellEntityCard';
+export type { PisellEntityCardProps, EntityCardDensity, EntityCardLayout, EntityCardWidth, EntityCardMediaType, EntityCardMediaConfig, EntityCardSecondaryItem, EntityCardTagItem, EntityCardActionItem, EntityCardTagPosition, } from './types';

package/lib/components/pisellEntityCard/index.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellEntityCard/index.tsx
+var pisellEntityCard_exports = {};
+__export(pisellEntityCard_exports, {
+  PisellEntityCard: () => import_PisellEntityCard.PisellEntityCard
+});
+module.exports = __toCommonJS(pisellEntityCard_exports);
+var import_PisellEntityCard = require("./PisellEntityCard");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellEntityCard
+});

package/lib/components/pisellEntityCard/types.d.ts

@@ -0,0 +1,144 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { PisellBaseCardProps } from '../pisellBaseCard/types';
+/**
+ * 实体卡信息密度等级
+ * - B1: 最小单位，一行
+ * - B2: 主+次级两行
+ * - B5: 次级最多 5 行
+ * - B9: 全部展示
+ */
+export declare type EntityCardDensity = 'B1' | 'B2' | 'B5' | 'B9';
+/**
+ * 实体卡布局方向
+ */
+export declare type EntityCardLayout = 'horizontal' | 'vertical';
+/**
+ * 实体卡宽度模式
+ * - content: 由内容撑满
+ * - full: 撑满父容器
+ * - number: 固定像素宽度
+ */
+export declare type EntityCardWidth = 'content' | 'full' | number;
+/**
+ * 媒体类型：头像 / 缩略图 / 图标
+ */
+export declare type EntityCardMediaType = 'avatar' | 'thumbnail' | 'icon';
+/**
+ * 实体卡媒体配置（头像、缩略图、图标）
+ */
+export interface EntityCardMediaConfig {
+    /** 类型 */
+    type: EntityCardMediaType;
+    /** 图片地址（avatar/thumbnail 使用） */
+    src?: string;
+    /** 替换文本 / 描述 */
+    alt?: string;
+    /** 图标节点（type 为 icon 时使用） */
+    icon?: ReactNode;
+    /** 尺寸，如 24、48、64 或 CSS 值 */
+    size?: number | string;
+    /** 形状（avatar/thumbnail）：circle | square */
+    shape?: 'circle' | 'square';
+    /** 图标颜色（type 为 icon 时） */
+    color?: string;
+}
+/**
+ * 次级文案单项（可带提示）
+ */
+export interface EntityCardSecondaryItem {
+    /** 文本内容 */
+    text: string;
+    /** 是否显示提示 icon（如 info-circle） */
+    showTooltip?: boolean;
+}
+/**
+ * 实体卡标签项
+ */
+export interface EntityCardTagItem {
+    /** 标签文案 */
+    text: string;
+    /** 可选自定义样式 */
+    style?: CSSProperties;
+}
+/**
+ * 实体卡底部操作项
+ * 支持文本、按钮、图标三种形式，可各自通过 style / className 更改样式
+ */
+export interface EntityCardActionItem {
+    /** 展示形式：文本 / 按钮 / 图标 */
+    type: 'text' | 'button' | 'icon';
+    /** 文案（text/button 时显示） */
+    label?: string;
+    /** 图标节点（icon 时单独展示，或 button 旁图标） */
+    icon?: ReactNode;
+    /** 点击回调 */
+    onClick?: () => void;
+    /** 单项内联样式 */
+    style?: CSSProperties;
+    /** 单项类名，用于自定义样式 */
+    className?: string;
+}
+/**
+ * 标签展示位置：与主标题同行 / 次级信息下方
+ */
+export declare type EntityCardTagPosition = 'inline' | 'below';
+/**
+ * PisellEntityCard 组件 Props
+ * 基于 PisellBaseCard，使用结构化配置展示实体信息，支持密度、布局、左滑删除与插槽
+ */
+export interface PisellEntityCardProps extends PisellBaseCardProps {
+    /** 媒体区：头像 / 缩略图 / 图标配置 */
+    media?: EntityCardMediaConfig;
+    /** 主文案（Name/Title） */
+    primaryText?: string;
+    /** 副标题：与主标题同一行、紧跟主标题后的部分（如电话号），14px Regular #667085 */
+    subtitleText?: string;
+    /** 次级文案列表，顺序即展示顺序；可带 showTooltip */
+    secondaryTexts?: EntityCardSecondaryItem[];
+    /** 标签列表，顺序即展示顺序 */
+    tags?: EntityCardTagItem[];
+    /** 底部操作列表（View Detail、Select 等） */
+    actions?: EntityCardActionItem[];
+    /** 是否显示媒体区 @default true */
+    showMedia?: boolean;
+    /** 是否显示主文案 @default true */
+    showPrimaryText?: boolean;
+    /** 是否显示副标题（与主标题同行） @default true */
+    showSubtitle?: boolean;
+    /** 是否显示次级文案 @default true */
+    showSecondaryText?: boolean;
+    /** 是否显示标签 @default true */
+    showTags?: boolean;
+    /** 是否显示底部 Action 区 @default false */
+    showActions?: boolean;
+    /** 信息密度 @default 'B2' */
+    density?: EntityCardDensity;
+    /** 布局方向 @default 'horizontal' */
+    layout?: EntityCardLayout;
+    /** 卡片宽度 @default 'content' */
+    width?: EntityCardWidth;
+    /** 是否开启左滑删除 @default false */
+    swipeToDelete?: boolean;
+    /** 左滑后点击删除时回调 */
+    onDelete?: () => void;
+    /** 标签展示位置 @default 'below' */
+    tagPosition?: EntityCardTagPosition;
+    /** 内容区 gap（CSS gap 值） */
+    contentGap?: number | string;
+    /** 主文案行数限制（CSS -webkit-line-clamp） */
+    primaryLineClamp?: number;
+    /** 次级文案行数限制（按密度有默认值，可覆盖） */
+    secondaryLineClamp?: number;
+    /** 自定义渲染媒体区 */
+    renderMedia?: () => ReactNode;
+    /** 自定义渲染主文案区 */
+    renderPrimary?: () => ReactNode;
+    /** 自定义渲染副标题区（与主标题同行） */
+    renderSubtitle?: () => ReactNode;
+    /** 自定义渲染次级文案区 */
+    renderSecondary?: () => ReactNode;
+    /** 自定义渲染标签区 */
+    renderTags?: () => ReactNode;
+    /** 自定义渲染底部操作区 */
+    renderActions?: () => ReactNode;
+}

package/lib/components/pisellEntityCard/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellEntityCard/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -126,6 +126,24 @@ function PisellFloorMapLayoutInner(props, ref) {
     [zoom.defaultScale, zoom.min, zoom.max, zoom.step]
   );
   const [scale, setScale] = (0, import_react.useState)(zoomConfig.initialScale);
+  const [isFullscreen, setIsFullscreen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const onFullscreenChange = () => setIsFullscreen(document.fullscreenElement === el);
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, []);
+  const toggleFullscreen = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    const el = containerRef.current;
+    if (!el) return;
+    if (document.fullscreenElement) {
+      (_a = document.exitFullscreen) == null ? void 0 : _a.call(document);
+    } else {
+      (_b = el.requestFullscreen) == null ? void 0 : _b.call(el);
+    }
+  }, []);
   const fitBounds = (0, import_react.useCallback)(() => {
     const ctx = transformRef.current;
     const container = containerRef.current;
@@ -175,9 +193,10 @@ function PisellFloorMapLayoutInner(props, ref) {
         var _a;
         return (_a = transformRef.current) == null ? void 0 : _a.resetTransform();
       },
-      fitBounds
+      fitBounds,
+      toggleFullscreen
     }),
-    [fitBounds]
+    [fitBounds, toggleFullscreen]
   );
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -244,7 +263,7 @@ function PisellFloorMapLayoutInner(props, ref) {
               onItemLeave
             }
           )
-        ), /* @__PURE__ */ import_react.default.createElement(import_ViewControls.default, { api: controlsApi, config: controls, scale }));
+        ), /* @__PURE__ */ import_react.default.createElement(import_ViewControls.default, { api: controlsApi, config: controls, scale, isFullscreen }));
       }
     )
   );

package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.js

@@ -178,7 +178,7 @@ var WithPan = {
     },
     zoom: { defaultScale: 1 },
     pan: { enabled: true },
-    controls: { showZoom: true, showReset: true, showFitBounds: true }
+    controls: { showZoom: true, showReset: true, showFitBounds: true, showFullscreen: true }
   }
 };
 var shapeItems = [
@@ -684,7 +684,7 @@ var FigmaDesign = {
             },
             zoom: { defaultScale: 0.8, min: 0.5, max: 2 },
             pan: { enabled: true },
-            controls: { showZoom: true },
+            controls: { showZoom: true, showFullscreen: true },
             style: { height: "100%" }
           }
         )

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

@@ -8,6 +8,8 @@ export interface ViewControlsApi {
     resetTransform: () => void;
     /** 区域定位，可能由主组件基于 items 计算后封装 */
     fitBounds?: () => void;
+    /** 切换全屏（requestFullscreen / exitFullscreen） */
+    toggleFullscreen?: () => void;
 }
 export interface ViewControlsProps {
     /** 控制 API */
@@ -16,6 +18,8 @@ export interface ViewControlsProps {
     config?: FloorMapControlsConfig;
     /** 当前缩放比例（1 = 100%），用于 Stepper 展示 */
     scale?: number;
+    /** 当前是否处于全屏 */
+    isFullscreen?: boolean;
     className?: string;
 }
 export declare function ViewControls(props: ViewControlsProps): JSX.Element;

package/lib/components/pisellFloorMapLayout/components/ViewControls.js

@@ -39,10 +39,11 @@ var import_icons = require("@ant-design/icons");
 var import_ViewControls = require("./ViewControls.less");
 var PREFIX = "pisell-floor-map-layout";
 function ViewControls(props) {
-  const { api, config = {}, scale = 1, className } = props;
+  const { api, config = {}, scale = 1, isFullscreen = false, className } = props;
   const showZoom = config.showZoom !== false;
   const showReset = config.showReset === true;
   const showFitBounds = config.showFitBounds === true;
+  const showFullscreen = config.showFullscreen === true;
   const scalePercent = Math.round(scale * 100);
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
     "button",
@@ -80,6 +81,15 @@ function ViewControls(props) {
       "aria-label": "区域定位"
     },
     "⊞"
+  ), showFullscreen && api.toggleFullscreen && /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `${PREFIX}-view-controls-btn`,
+      onClick: () => api.toggleFullscreen(),
+      "aria-label": isFullscreen ? "退出全屏" : "全屏"
+    },
+    isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenExitOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.FullscreenOutlined, null)
   ));
 }
 var ViewControls_default = ViewControls;

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

@@ -92,6 +92,8 @@ export interface FloorMapControlsConfig {
     showReset?: boolean;
     /** 是否显示区域定位（fitBounds）按钮，默认 false */
     showFitBounds?: boolean;
+    /** 是否显示全屏按钮，默认 false */
+    showFullscreen?: boolean;
 }
 /**
  * 布局模式（规则网格 vs 完全自由坐标）