@pisell/materials 1.0.1057 → 1.0.1059

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

@@ -0,0 +1,450 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { UserOutlined, EditOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import { PisellEntityCard } from "./PisellEntityCard";
+var meta = {
+  title: 'Data Display/PisellEntityCard',
+  component: PisellEntityCard,
+  tags: ['autodocs'],
+  decorators: [function (Story) {
+    return /*#__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
+  }
+};
+export default meta;
+var defaultPrimary = '张三';
+var defaultSecondary = [{
+  text: '产品经理 · 杭州'
+}, {
+  text: '钉钉事业部'
+}];
+var defaultTags = [{
+  text: '在职'
+}, {
+  text: '正式'
+}];
+/** 头像：使用带色块背景的占位图，便于在 Storybook 中看清尺寸 */
+var defaultMedia = {
+  type: 'avatar',
+  src: 'https://ui-avatars.com/api/?name=Zhang+San&background=4a90d9&color=fff&size=48',
+  alt: '头像',
+  size: 48
+};
+
+/** 默认：横向 B2，主文案 + 次级 + 头像 */
+export var Default = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    density: 'B2',
+    layout: 'horizontal'
+  }
+};
+
+/** 仅主文案（最小） */
+export var PrimaryOnly = {
+  args: {
+    primaryText: '实体名称',
+    showMedia: false,
+    showSecondaryText: false,
+    showTags: false,
+    density: 'B1'
+  }
+};
+
+/** 主文案 + 头像 一行 */
+export var B1Line = {
+  args: {
+    primaryText: defaultPrimary,
+    media: _objectSpread(_objectSpread({}, 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
+  }
+};
+
+/** B2 横向：头像 + 主 + 次级两行 */
+export var B2Horizontal = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    density: 'B2',
+    layout: 'horizontal'
+  }
+};
+
+/** B2 竖向 */
+export var B2Vertical = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: _objectSpread(_objectSpread({}, defaultMedia), {}, {
+      src: 'https://ui-avatars.com/api/?name=Zhang+San&background=4a90d9&color=fff&size=64',
+      size: 64
+    }),
+    density: 'B2',
+    layout: 'vertical'
+  }
+};
+
+/** B5：次级最多 5 行 */
+export var B5Standard = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: [{
+      text: '产品经理 · 杭州'
+    }, {
+      text: '钉钉事业部'
+    }, {
+      text: '第三行描述'
+    }, {
+      text: '第四行'
+    }, {
+      text: '第五行'
+    }],
+    tags: defaultTags,
+    media: defaultMedia,
+    density: 'B5',
+    layout: 'horizontal'
+  }
+};
+
+/** B9 全部展示 */
+export var B9Extended = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: [].concat(defaultSecondary, [{
+      text: '带提示的说明',
+      showTooltip: true
+    }]),
+    tags: defaultTags,
+    media: defaultMedia,
+    density: 'B9',
+    layout: 'horizontal'
+  }
+};
+
+/** Action 区域默认关闭（不传 showActions 或 showActions: false） */
+export var ActionDefaultOff = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: false,
+    actions: [{
+      type: 'text',
+      label: '查看详情',
+      onClick: function onClick() {}
+    }]
+  }
+};
+
+/** Action 仅文本 */
+export var ActionTextOnly = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [{
+      type: 'text',
+      label: '查看详情',
+      onClick: function onClick() {
+        return console.log('查看详情');
+      }
+    }, {
+      type: 'text',
+      label: 'Add Contact',
+      onClick: function onClick() {
+        return console.log('Add Contact');
+      }
+    }]
+  }
+};
+
+/** Action 仅按钮 */
+export var ActionButtonOnly = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [{
+      type: 'button',
+      label: '选择',
+      onClick: function onClick() {
+        return console.log('选择');
+      }
+    }, {
+      type: 'button',
+      label: '编辑',
+      onClick: function onClick() {
+        return console.log('编辑');
+      }
+    }]
+  }
+};
+
+/** Action 仅图标（Figma 支持右侧按钮 - 编辑图标） */
+export var ActionIconOnly = {
+  args: {
+    primaryText: 'Bill Camp',
+    secondaryTexts: [{
+      text: 'Billcamp@pisell.com'
+    }],
+    media: defaultMedia,
+    showActions: true,
+    actions: [{
+      type: 'icon',
+      icon: /*#__PURE__*/React.createElement(EditOutlined, null),
+      onClick: function onClick() {
+        return console.log('编辑');
+      }
+    }]
+  }
+};
+
+/** Action 混合：文本 + 按钮 + 图标，并各自自定义样式 */
+export var ActionMixedWithCustomStyle = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [{
+      type: 'text',
+      label: 'Add Contact',
+      icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+      onClick: function onClick() {
+        return console.log('Add Contact');
+      },
+      style: {
+        color: '#1677ff'
+      }
+    }, {
+      type: 'button',
+      label: '选择',
+      onClick: function onClick() {
+        return console.log('选择');
+      },
+      style: {
+        borderColor: '#52c41a',
+        color: '#52c41a'
+      }
+    }, {
+      type: 'icon',
+      icon: /*#__PURE__*/React.createElement(EditOutlined, null),
+      onClick: function onClick() {
+        return console.log('编辑');
+      },
+      style: {
+        color: '#475467'
+      }
+    }, {
+      type: 'icon',
+      icon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
+      onClick: function onClick() {
+        return console.log('删除');
+      },
+      className: 'pisell-entity-card-action-icon',
+      style: {
+        color: '#ff4d4f'
+      }
+    }]
+  }
+};
+
+/** 带底部操作（兼容旧名） */
+export var WithActions = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    showActions: true,
+    actions: [{
+      type: 'text',
+      label: '查看详情',
+      onClick: function onClick() {
+        return console.log('查看');
+      }
+    }, {
+      type: 'button',
+      label: '选择',
+      onClick: function onClick() {
+        return console.log('选择');
+      }
+    }]
+  }
+};
+
+/** 左滑删除（需在真机或模拟 touch 下左滑验证） */
+export var SwipeToDelete = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    swipeToDelete: true,
+    onDelete: function onDelete() {
+      return console.log('onDelete');
+    }
+  }
+};
+
+/** 标签 inline */
+export var TagPositionInline = {
+  args: {
+    primaryText: defaultPrimary,
+    tags: defaultTags,
+    tagPosition: 'inline',
+    showMedia: false,
+    showSecondaryText: false
+  }
+};
+
+/** 宽度撑满父容器 */
+export var WidthFull = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    width: 'full'
+  },
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 340
+      }
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+
+/** 自定义主文案插槽 */
+export var SlotPrimary = {
+  args: {
+    primaryText: '不应显示',
+    renderPrimary: function renderPrimary() {
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontWeight: 700,
+          color: '#1677ff'
+        }
+      }, "\u81EA\u5B9A\u4E49\u4E3B\u6587\u6848");
+    }
+  }
+};
+
+/** 缩略图类型媒体 */
+export 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'
+  }
+};
+
+/** 图标类型媒体 */
+export var MediaIcon = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: {
+      type: 'icon',
+      icon: /*#__PURE__*/React.createElement(UserOutlined, {
+        style: {
+          fontSize: 24
+        }
+      }),
+      size: 40,
+      color: '#1677ff'
+    },
+    density: 'B2'
+  }
+};
+
+/** 可点击卡片 */
+export var Clickable = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    onClick: function onClick() {
+      return alert('卡片被点击');
+    }
+  }
+};
+
+/** 禁用态 */
+export var Disabled = {
+  args: {
+    primaryText: defaultPrimary,
+    secondaryTexts: defaultSecondary,
+    media: defaultMedia,
+    disabled: true
+  }
+};

package/es/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/es/components/pisellEntityCard/index.js

@@ -0,0 +1,4 @@
+/**
+ * PisellEntityCard 组件导出
+ */
+export { PisellEntityCard } from "./PisellEntityCard";

package/es/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/es/components/pisellEntityCard/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js

@@ -9,7 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * PisellFloorMapLayout - 空间布局视图
  * 在二维平面按坐标渲染资源，支持缩放/平移/复位，仅负责展示与交互
  */
-import React, { useMemo, useRef, useImperativeHandle, useCallback, useState } from 'react';
+import React, { useMemo, useRef, useImperativeHandle, useCallback, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import MapLayer from "./components/MapLayer";
@@ -151,6 +151,32 @@ function PisellFloorMapLayoutInner(props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     scale = _useState2[0],
     setScale = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFullscreen = _useState4[0],
+    setIsFullscreen = _useState4[1];
+  useEffect(function () {
+    var el = containerRef.current;
+    if (!el) return;
+    var onFullscreenChange = function onFullscreenChange() {
+      return setIsFullscreen(document.fullscreenElement === el);
+    };
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    return function () {
+      return document.removeEventListener('fullscreenchange', onFullscreenChange);
+    };
+  }, []);
+  var toggleFullscreen = useCallback(function () {
+    var el = containerRef.current;
+    if (!el) return;
+    if (document.fullscreenElement) {
+      var _document$exitFullscr, _document;
+      (_document$exitFullscr = (_document = document).exitFullscreen) === null || _document$exitFullscr === void 0 || _document$exitFullscr.call(_document);
+    } else {
+      var _el$requestFullscreen;
+      (_el$requestFullscreen = el.requestFullscreen) === null || _el$requestFullscreen === void 0 || _el$requestFullscreen.call(el);
+    }
+  }, []);
   var fitBounds = useCallback(function () {
     var _zoom$max2;
     var ctx = transformRef.current;
@@ -195,9 +221,10 @@ function PisellFloorMapLayoutInner(props, ref) {
         var _transformRef$current6;
         return (_transformRef$current6 = transformRef.current) === null || _transformRef$current6 === void 0 ? void 0 : _transformRef$current6.resetTransform();
       },
-      fitBounds: fitBounds
+      fitBounds: fitBounds,
+      toggleFullscreen: toggleFullscreen
     };
-  }, [fitBounds]);
+  }, [fitBounds, toggleFullscreen]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: classNames(PREFIX, className),
@@ -255,7 +282,8 @@ function PisellFloorMapLayoutInner(props, ref) {
     })), /*#__PURE__*/React.createElement(ViewControls, {
       api: controlsApi,
       config: controls,
-      scale: scale
+      scale: scale,
+      isFullscreen: isFullscreen
     }));
   }));
 }

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

@@ -230,7 +230,8 @@ export var WithPan = {
     controls: {
       showZoom: true,
       showReset: true,
-      showFitBounds: true
+      showFitBounds: true,
+      showFullscreen: true
     }
   }
 };
@@ -1224,7 +1225,8 @@ export var FigmaDesign = {
         enabled: true
       },
       controls: {
-        showZoom: true
+        showZoom: true,
+        showFullscreen: true
       },
       style: {
         height: '100%'