@pisell/materials 1.0.1057 → 1.0.1059

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

@@ -1,9 +1,11 @@
+import { PisellEntityCard } from '../pisellEntityCard';
 declare const PisellCards: {
     TabCard: (props: any) => JSX.Element;
     TextCard: (props: any) => JSX.Element;
     GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
     MultilevelCard: (props: any) => JSX.Element;
     PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
+    PisellEntityCard: typeof PisellEntityCard;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';
@@ -12,3 +14,4 @@ export type { TextCardProps } from './components/TextCard/types';
 export type { GraphicTextCardProps, GraphicTextCardVariant, GraphicTextCardSize, GraphicConfig, } from './components/GraphicTextCard/types';
 export type { MultilevelCardProps } from './components/MultilevelCard/types';
 export type { PisellImageCardProps, ImageDataSource, ImageFillMode, } from './components/PisellImageCard/types';
+export type { PisellEntityCardProps, EntityCardDensity, EntityCardLayout, EntityCardWidth, EntityCardMediaType, EntityCardMediaConfig, EntityCardSecondaryItem, EntityCardTagItem, EntityCardActionItem, EntityCardTagPosition, } from '../pisellEntityCard';

package/es/components/PisellCards/index.js

@@ -7,6 +7,7 @@ import TextCard from "./components/TextCard";
 import GraphicTextCard from "./components/GraphicTextCard";
 import MultilevelCard from "./components/MultilevelCard";
 import PisellImageCard from "./components/PisellImageCard";
+import { PisellEntityCard } from "../pisellEntityCard";
 
 // 命名空间导出
 var PisellCards = {
@@ -14,7 +15,8 @@ var PisellCards = {
   TextCard: TextCard,
   GraphicTextCard: GraphicTextCard,
   MultilevelCard: MultilevelCard,
-  PisellImageCard: PisellImageCard
+  PisellImageCard: PisellImageCard,
+  PisellEntityCard: PisellEntityCard
 };
 export default PisellCards;
 

package/es/components/PisellContactBrief/PisellContactBrief.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { PisellContactBriefCreateButtonProps, PisellContactBriefProps } from './types';
+import './PisellContactBrief.less';
+/**
+ * PisellContactBrief 联系人简要卡片
+ * 基于 PisellEntityCard 展示姓名、电话、邮箱及扩展字段，右侧编辑图标调起编辑弹窗
+ */
+export declare function PisellContactBrief({ name, phone, email, avatar, extraData, extraFields, onSubmit, onDelete, swipeToDelete, layout, showAvatar, showPhone, showEmail, primaryLineClamp, secondaryLineClamp, className, style, hoverStyle, activeStyle, disabledStyle, clickable, disabled, onClick, }: PisellContactBriefProps): JSX.Element;
+/**
+ * 新建联系人入口按钮
+ * 展示「Add Contact」+ 占位头像 + plus 图标，点击打开新建弹窗
+ */
+export declare function PisellContactBriefCreateButton({ extraFields, onCreate, onClick: onClickProp, className, style, }: PisellContactBriefCreateButtonProps): JSX.Element;

package/es/components/PisellContactBrief/PisellContactBrief.js

@@ -0,0 +1,223 @@
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
+import { PisellEntityCard } from "../pisellEntityCard";
+import { ContactFormModal } from "./components";
+import contactBriefLocales from "./locales";
+import "./PisellContactBrief.less";
+
+/** 初始化多语言（合并到全局 locales），确保 getText 能取到本组件文案 */
+function ensureLocales() {
+  try {
+    var _getLocale, _getLocale2, _ref;
+    var current = (_getLocale = (_getLocale2 = (_ref = locales).getLocale) === null || _getLocale2 === void 0 ? void 0 : _getLocale2.call(_ref)) !== null && _getLocale !== void 0 ? _getLocale : 'en';
+    var locale = current === 'zh-TW' ? 'zh-HK' : current;
+    locales.init(contactBriefLocales, locale);
+  } catch (_unused) {
+    // 忽略 init 异常
+  }
+}
+
+/**
+ * PisellContactBrief 联系人简要卡片
+ * 基于 PisellEntityCard 展示姓名、电话、邮箱及扩展字段，右侧编辑图标调起编辑弹窗
+ */
+export function PisellContactBrief(_ref2) {
+  var name = _ref2.name,
+    phone = _ref2.phone,
+    email = _ref2.email,
+    avatar = _ref2.avatar,
+    _ref2$extraData = _ref2.extraData,
+    extraData = _ref2$extraData === void 0 ? {} : _ref2$extraData,
+    _ref2$extraFields = _ref2.extraFields,
+    extraFields = _ref2$extraFields === void 0 ? [] : _ref2$extraFields,
+    onSubmit = _ref2.onSubmit,
+    onDelete = _ref2.onDelete,
+    _ref2$swipeToDelete = _ref2.swipeToDelete,
+    swipeToDelete = _ref2$swipeToDelete === void 0 ? false : _ref2$swipeToDelete,
+    _ref2$layout = _ref2.layout,
+    layout = _ref2$layout === void 0 ? 'horizontal' : _ref2$layout,
+    _ref2$showAvatar = _ref2.showAvatar,
+    showAvatar = _ref2$showAvatar === void 0 ? true : _ref2$showAvatar,
+    _ref2$showPhone = _ref2.showPhone,
+    showPhone = _ref2$showPhone === void 0 ? true : _ref2$showPhone,
+    _ref2$showEmail = _ref2.showEmail,
+    showEmail = _ref2$showEmail === void 0 ? true : _ref2$showEmail,
+    primaryLineClamp = _ref2.primaryLineClamp,
+    secondaryLineClamp = _ref2.secondaryLineClamp,
+    className = _ref2.className,
+    style = _ref2.style,
+    hoverStyle = _ref2.hoverStyle,
+    activeStyle = _ref2.activeStyle,
+    disabledStyle = _ref2.disabledStyle,
+    _ref2$clickable = _ref2.clickable,
+    clickable = _ref2$clickable === void 0 ? true : _ref2$clickable,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    onClick = _ref2.onClick;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    editModalVisible = _useState2[0],
+    setEditModalVisible = _useState2[1];
+  useEffect(function () {
+    ensureLocales();
+  }, []);
+  var media = useMemo(function () {
+    if (!showAvatar) return undefined;
+    return {
+      type: 'avatar',
+      src: avatar,
+      alt: name,
+      size: 32,
+      shape: 'circle'
+    };
+  }, [showAvatar, avatar, name]);
+  var secondaryTexts = useMemo(function () {
+    var list = [];
+    if (showEmail && email) list.push({
+      text: email
+    });
+    extraFields.forEach(function (f) {
+      var v = extraData[f.key];
+      if (v) list.push({
+        text: v
+      });
+    });
+    return list;
+  }, [showEmail, email, extraFields, extraData]);
+  var editAction = useMemo(function () {
+    return {
+      type: 'icon',
+      icon: /*#__PURE__*/React.createElement(EditOutlined, {
+        className: "pisell-contact-brief-action-edit"
+      }),
+      onClick: function onClick() {
+        setEditModalVisible(true);
+      }
+    };
+  }, []);
+  var initialEditValues = useMemo(function () {
+    return _objectSpread({
+      name: name,
+      phone: phone,
+      email: email
+    }, extraData);
+  }, [name, phone, email, extraData]);
+  var handleEditSubmit = useCallback(function (values) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(values);
+    setEditModalVisible(false);
+  }, [onSubmit]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-contact-brief-wrap"
+  }, /*#__PURE__*/React.createElement(PisellEntityCard, {
+    className: className,
+    style: style,
+    hoverStyle: hoverStyle,
+    activeStyle: activeStyle,
+    disabledStyle: disabledStyle,
+    clickable: clickable,
+    disabled: disabled,
+    onClick: onClick,
+    media: media,
+    primaryText: name,
+    subtitleText: showPhone && phone ? phone : undefined,
+    secondaryTexts: secondaryTexts,
+    showMedia: showAvatar,
+    showPrimaryText: true,
+    showSubtitle: showPhone,
+    showSecondaryText: true,
+    showTags: false,
+    showActions: true,
+    actions: [editAction],
+    density: "B2",
+    layout: layout,
+    width: "content",
+    swipeToDelete: swipeToDelete,
+    onDelete: onDelete,
+    primaryLineClamp: primaryLineClamp,
+    secondaryLineClamp: secondaryLineClamp
+  })), /*#__PURE__*/React.createElement(ContactFormModal, {
+    visible: editModalVisible,
+    onCancel: function onCancel() {
+      return setEditModalVisible(false);
+    },
+    onSubmit: handleEditSubmit,
+    mode: "edit",
+    initialValues: initialEditValues,
+    extraFields: extraFields
+  }));
+}
+
+/**
+ * 新建联系人入口按钮
+ * 展示「Add Contact」+ 占位头像 + plus 图标，点击打开新建弹窗
+ */
+export function PisellContactBriefCreateButton(_ref3) {
+  var _ref3$extraFields = _ref3.extraFields,
+    extraFields = _ref3$extraFields === void 0 ? [] : _ref3$extraFields,
+    onCreate = _ref3.onCreate,
+    onClickProp = _ref3.onClick,
+    className = _ref3.className,
+    style = _ref3.style;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    createModalVisible = _useState4[0],
+    setCreateModalVisible = _useState4[1];
+  useEffect(function () {
+    ensureLocales();
+  }, []);
+  var handleClick = useCallback(function (e) {
+    if (onClickProp) {
+      onClickProp(e);
+      return;
+    }
+    setCreateModalVisible(true);
+  }, [onClickProp]);
+  var handleCreateSubmit = useCallback(function (values) {
+    onCreate === null || onCreate === void 0 || onCreate(values);
+    setCreateModalVisible(false);
+  }, [onCreate]);
+  var addContactText = locales.getText('pisell.contact.brief.addContact');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    className: "pisell-contact-brief-create-btn ".concat(className !== null && className !== void 0 ? className : '').trim(),
+    style: style,
+    onClick: handleClick,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleClick(e);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pisell-contact-brief-create-btn-avatar"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "pisell-contact-brief-create-btn-avatar-inner"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "pisell-contact-brief-create-btn-text"
+  }, addContactText), /*#__PURE__*/React.createElement(PlusCircleOutlined, {
+    className: "pisell-contact-brief-create-btn-icon"
+  })), /*#__PURE__*/React.createElement(ContactFormModal, {
+    visible: createModalVisible,
+    onCancel: function onCancel() {
+      return setCreateModalVisible(false);
+    },
+    onSubmit: handleCreateSubmit,
+    mode: "create",
+    extraFields: extraFields
+  }));
+}
+PisellContactBrief.CreateButton = PisellContactBriefCreateButton;

package/es/components/PisellContactBrief/PisellContactBrief.less

@@ -0,0 +1,192 @@
+/**
+ * PisellContactBrief 样式
+ * 类名前缀 pisell-contact-brief-
+ */
+.pisell-contact-brief-wrap {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* 编辑图标与右侧操作区 */
+.pisell-contact-brief-action-edit {
+  font-size: 16px;
+  color: #667085;
+}
+
+/* 新建按钮：水平布局，占位头像 + 文案 + plus 图标，与设计稿一致 */
+.pisell-contact-brief-create-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 6px 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
+  background-color: #ffffff;
+  transition: background-color 0.2s, border-color 0.2s;
+
+  &:hover {
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+  }
+}
+
+.pisell-contact-brief-create-btn-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f2f4f7;
+}
+
+.pisell-contact-brief-create-btn-avatar-inner {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #e4e7ec;
+}
+
+.pisell-contact-brief-create-btn-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: #000000;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pisell-contact-brief-create-btn-icon {
+  flex-shrink: 0;
+  font-size: 24px;
+  color: #667085;
+}
+
+/* 弹窗：对齐 Figma 新建/编辑弹窗，新建与编辑完全一致 */
+.pisell-contact-brief-modal {
+  /* 容器：12px 圆角、Shadow xl */
+
+  .ant-modal-content,
+  .pisell-lowcode-modal-content {
+    border-radius: 12px;
+    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
+    overflow: hidden;
+    padding: 0;
+  }
+
+  /* Header：24px 16px，标题 18px Semibold #101828 */
+
+  .ant-modal-header,
+  .pisell-lowcode-modal-header {
+    padding: 16px 24px;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .ant-modal-title,
+  .pisell-lowcode-modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+    color: #101828;
+  }
+
+  /* Header 下方分割线 */
+
+  .ant-modal-header + .ant-modal-body,
+  .pisell-lowcode-modal-header + .pisell-lowcode-modal-body {
+    border-top: 1px solid #eaecf0;
+  }
+
+  /* Body：24px padding */
+
+  .ant-modal-body,
+  .pisell-lowcode-modal-body {
+    padding: 24px;
+  }
+
+  /* 表单：表单项间距 24px */
+
+  .pisell-contact-brief-modal-form.ant-form,
+  .pisell-contact-brief-modal-form.pisell-lowcode-form {
+    .ant-form-item,
+    .pisell-lowcode-form-item {
+      margin-bottom: 24px;
+    }
+
+    .ant-form-item:last-child,
+    .pisell-lowcode-form-item:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  /* 第一行：Firstname + Lastname 两列，间距 16px */
+
+  .pisell-contact-brief-modal-form-row {
+    display: flex;
+    gap: 16px;
+
+    .ant-form-item,
+    .pisell-lowcode-form-item {
+      flex: 1;
+      margin-bottom: 0;
+    }
+  }
+
+  /* Label：14px Medium #344054 */
+
+  .ant-form-item-label > label,
+  .pisell-lowcode-form-item-label > label {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #344054;
+  }
+
+  /* Footer：顶部分割线、24px padding、按钮间距 12px */
+
+  .ant-modal-footer,
+  .pisell-lowcode-modal-footer {
+    padding: 24px;
+    border-top: 1px solid #eaecf0;
+    gap: 12px;
+    margin-top: 0;
+  }
+
+  /* 取消：白底、边框 #D0D5DD、48px 高、16px Semibold #344054 */
+
+  .ant-btn-default,
+  .pisell-lowcode-btn-default {
+    height: 48px;
+    padding: 12px 20px;
+    border-radius: 8px;
+    border-color: #d0d5dd;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #344054;
+    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  }
+
+  /* 主按钮：Primary #7F56D9、白字 */
+
+  .ant-btn-primary,
+  .pisell-lowcode-btn-primary {
+    height: 48px;
+    padding: 12px 20px;
+    border-radius: 8px;
+    background-color: #7f56d9;
+    border-color: #7f56d9;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #fff;
+    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+  }
+}

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellContactBrief } from './PisellContactBrief';
+declare const meta: Meta<typeof PisellContactBrief>;
+export default meta;
+declare type Story = StoryObj<typeof PisellContactBrief>;
+/** 默认：姓名 + 电话 + 邮箱，横向，有编辑图标 */
+export declare const Default: Story;
+/** 无头像（占位） */
+export declare const NoAvatar: Story;
+/** 有头像 */
+export declare const WithAvatar: Story;
+/** 竖向布局 */
+export declare const Vertical: Story;
+/** 仅姓名 + 电话（无邮箱） */
+export declare const NoEmail: Story;
+/** 仅姓名 + 邮箱（无电话） */
+export declare const NoPhone: Story;
+/** 扩展字段：生日、地址 */
+export declare const WithExtraFields: Story;
+/** 左滑删除 */
+export declare const SwipeToDelete: Story;
+/** 编辑提交回调（仅日志） */
+export declare const WithEditSubmit: Story;
+/** 禁用态 */
+export declare const Disabled: Story;
+/** 主文案行数限制为 1 */
+export declare const PrimaryLineClamp: Story;
+/** 新建联系人按钮（CreateButton） */
+export declare const CreateButtonOnly: Story;
+/** 卡片 + 新建按钮（列表场景） */
+export declare const ListWithCreateButton: Story;

package/es/components/PisellContactBrief/PisellContactBrief.stories.js

@@ -0,0 +1,196 @@
+import { PisellContactBrief } from "./PisellContactBrief";
+var meta = {
+  title: 'Data Display/PisellContactBrief',
+  component: PisellContactBrief,
+  tags: ['autodocs'],
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 340
+      }
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }],
+  argTypes: {
+    layout: {
+      description: '布局方向',
+      control: 'radio',
+      options: ['horizontal', 'vertical']
+    },
+    showAvatar: {
+      description: '显示头像',
+      control: 'boolean'
+    },
+    showPhone: {
+      description: '显示电话',
+      control: 'boolean'
+    },
+    showEmail: {
+      description: '显示邮箱',
+      control: 'boolean'
+    },
+    swipeToDelete: {
+      description: '开启左滑删除',
+      control: 'boolean'
+    }
+  }
+};
+export default meta;
+/** 默认：姓名 + 电话 + 邮箱，横向，有编辑图标 */
+export var Default = {
+  args: {
+    name: 'Allen King',
+    phone: '+61 412 345 1656',
+    email: 'Allenking@pisell.com',
+    layout: 'horizontal'
+  }
+};
+
+/** 无头像（占位） */
+export var NoAvatar = {
+  args: {
+    name: 'Bill Camp',
+    phone: '+86 151 0548 2457',
+    email: 'Billcamp@pisell.com',
+    showAvatar: true,
+    avatar: undefined
+  }
+};
+
+/** 有头像 */
+export var WithAvatar = {
+  args: {
+    name: '张三',
+    phone: '+86 138 0000 0000',
+    email: 'zhangsan@example.com',
+    avatar: 'https://ui-avatars.com/api/?name=Zhang+San&background=4a90d9&color=fff&size=32'
+  }
+};
+
+/** 竖向布局 */
+export var Vertical = {
+  args: {
+    name: 'Allen King',
+    phone: '+61 412 345 1656',
+    email: 'Allenking@pisell.com',
+    layout: 'vertical'
+  }
+};
+
+/** 仅姓名 + 电话（无邮箱） */
+export var NoEmail = {
+  args: {
+    name: 'Bill Camp',
+    phone: '(+86 151 0548 2457)',
+    showEmail: false
+  }
+};
+
+/** 仅姓名 + 邮箱（无电话） */
+export var NoPhone = {
+  args: {
+    name: 'Bill Camp',
+    email: 'Billcamp@pisell.com',
+    showPhone: false
+  }
+};
+
+/** 扩展字段：生日、地址 */
+export var WithExtraFields = {
+  args: {
+    name: 'Bill Camp',
+    phone: '+86 151 0548 2457',
+    email: 'Billcamp@pisell.com',
+    extraFields: [{
+      key: 'birthday',
+      label: '生日'
+    }, {
+      key: 'address',
+      label: '地址'
+    }],
+    extraData: {
+      birthday: '30 July 1990',
+      address: '30 Jersey Parade, suburban, VIC, 3000'
+    }
+  }
+};
+
+/** 左滑删除 */
+export var SwipeToDelete = {
+  args: {
+    name: 'Bill Camp',
+    phone: '+86 151 0548 2457',
+    email: 'Billcamp@pisell.com',
+    swipeToDelete: true,
+    onDelete: function onDelete() {
+      return console.log('onDelete');
+    }
+  }
+};
+
+/** 编辑提交回调（仅日志） */
+export var WithEditSubmit = {
+  args: {
+    name: '张三',
+    phone: '138 0000 0000',
+    email: 'zhangsan@example.com',
+    onSubmit: function onSubmit(values) {
+      return console.log('onSubmit', values);
+    }
+  }
+};
+
+/** 禁用态 */
+export var Disabled = {
+  args: {
+    name: '张三',
+    phone: '138 0000 0000',
+    email: 'a@b.com',
+    disabled: true
+  }
+};
+
+/** 主文案行数限制为 1 */
+export var PrimaryLineClamp = {
+  args: {
+    name: '非常长的联系人姓名用于测试单行省略效果',
+    phone: '138 0000 0000',
+    email: 'a@b.com',
+    primaryLineClamp: 1
+  }
+};
+
+/** 新建联系人按钮（CreateButton） */
+export var CreateButtonOnly = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(PisellContactBrief.CreateButton, {
+      onCreate: function onCreate(values) {
+        return console.log('onCreate', values);
+      }
+    });
+  }
+};
+
+/** 卡片 + 新建按钮（列表场景） */
+export var ListWithCreateButton = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        width: 340
+      }
+    }, /*#__PURE__*/React.createElement(PisellContactBrief, {
+      name: "Allen King",
+      phone: "+61 412 345 1656",
+      email: "Allenking@pisell.com",
+      onSubmit: function onSubmit(v) {
+        return console.log('onSubmit', v);
+      }
+    }), /*#__PURE__*/React.createElement(PisellContactBrief.CreateButton, {
+      onCreate: function onCreate(v) {
+        return console.log('onCreate', v);
+      }
+    }));
+  }
+};