@pisell/materials 1.0.1057 → 1.0.1059

package/es/theme/pisell-components.js

@@ -0,0 +1,74 @@
+/**
+ * Pisell 项目统一的 Ant Design Token 配置
+ * 基于 Figma 设计规范
+ *
+ * 使用场景：
+ * - 低代码平台（page/index.tsx）
+ * - Storybook 预览
+ * - 其他需要主题配置的场景
+ */
+
+/**
+ * 获取完整的主题配置
+ */
+export function getPisellComponentsThemeConfig() {
+  return {
+    components: {
+      Input: {
+        controlHeight: 48,
+        paddingInline: 16,
+        paddingBlock: 12,
+        activeShadow: '0px 0px 0px 4px #F4EBFF, 0px 1px 2px rgba(16, 24, 40, 0.05)',
+        activeBorderColor: 'rgb(214,187,251)',
+        paddingBlockLG: 12,
+        paddingBlockSM: 8,
+        paddingInlineLG: 16,
+        paddingInlineSM: 8,
+        controlHeightLG: 52,
+        controlHeightSM: 44,
+        borderRadius: 8,
+        paddingXXS: 8
+      },
+      InputNumber: {
+        controlHeight: 48,
+        paddingInline: 16,
+        paddingBlock: 12,
+        activeShadow: '0px 0px 0px 4px #F4EBFF, 0px 1px 2px rgba(16, 24, 40, 0.05)',
+        activeBorderColor: 'rgb(214,187,251)',
+        paddingBlockLG: 12,
+        paddingBlockSM: 8,
+        paddingInlineLG: 16,
+        paddingInlineSM: 8,
+        controlHeightLG: 52,
+        controlHeightSM: 44,
+        borderRadius: 8,
+        paddingXXS: 8,
+        handleWidth: 20
+      },
+      Select: {
+        controlHeight: 48,
+        optionHeight: 48,
+        fontSize: 16,
+        fontSizeLG: 18,
+        fontSizeSM: 14,
+        borderRadius: 8,
+        boxShadowSecondary: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
+        optionSelectedBg: 'rgb(244,235,255)',
+        multipleItemBg: 'rgb(234,236,240)',
+        controlHeightLG: 52,
+        controlHeightSM: 40,
+        borderRadiusSM: 8,
+        paddingXXS: 6,
+        optionPadding: '10px 8px',
+        multipleItemHeight: 36,
+        multipleItemHeightLG: 40
+      }
+    },
+    token: {
+      colorPrimary: '#7f56d9',
+      colorInfo: '#7f56d9',
+      borderRadius: 8,
+      colorPrimaryHover: '#d6bbfb'
+    }
+  };
+}

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+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';
@@ -13,3 +15,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/lib/components/PisellCards/index.js

@@ -37,11 +37,13 @@ var import_TextCard = __toESM(require("./components/TextCard"));
 var import_GraphicTextCard = __toESM(require("./components/GraphicTextCard"));
 var import_MultilevelCard = __toESM(require("./components/MultilevelCard"));
 var import_PisellImageCard = __toESM(require("./components/PisellImageCard"));
+var import_pisellEntityCard = require("../pisellEntityCard");
 var PisellCards = {
   TabCard: import_TabCard.default,
   TextCard: import_TextCard.default,
   GraphicTextCard: import_GraphicTextCard.default,
   MultilevelCard: import_MultilevelCard.default,
-  PisellImageCard: import_PisellImageCard.default
+  PisellImageCard: import_PisellImageCard.default,
+  PisellEntityCard: import_pisellEntityCard.PisellEntityCard
 };
 var PisellCards_default = PisellCards;

package/lib/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/lib/components/PisellContactBrief/PisellContactBrief.js

@@ -0,0 +1,231 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellContactBrief/PisellContactBrief.tsx
+var PisellContactBrief_exports = {};
+__export(PisellContactBrief_exports, {
+  PisellContactBrief: () => PisellContactBrief,
+  PisellContactBriefCreateButton: () => PisellContactBriefCreateButton
+});
+module.exports = __toCommonJS(PisellContactBrief_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_utils = require("@pisell/utils");
+var import_pisellEntityCard = require("../pisellEntityCard");
+var import_components = require("./components");
+var import_locales = __toESM(require("./locales"));
+var import_PisellContactBrief = require("./PisellContactBrief.less");
+function ensureLocales() {
+  var _a, _b;
+  try {
+    const current = ((_b = (_a = import_utils.locales).getLocale) == null ? void 0 : _b.call(_a)) ?? "en";
+    const locale = current === "zh-TW" ? "zh-HK" : current;
+    import_utils.locales.init(import_locales.default, locale);
+  } catch {
+  }
+}
+function PisellContactBrief({
+  name,
+  phone,
+  email,
+  avatar,
+  extraData = {},
+  extraFields = [],
+  onSubmit,
+  onDelete,
+  swipeToDelete = false,
+  layout = "horizontal",
+  showAvatar = true,
+  showPhone = true,
+  showEmail = true,
+  primaryLineClamp,
+  secondaryLineClamp,
+  className,
+  style,
+  hoverStyle,
+  activeStyle,
+  disabledStyle,
+  clickable = true,
+  disabled = false,
+  onClick
+}) {
+  const [editModalVisible, setEditModalVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    ensureLocales();
+  }, []);
+  const media = (0, import_react.useMemo)(() => {
+    if (!showAvatar) return void 0;
+    return {
+      type: "avatar",
+      src: avatar,
+      alt: name,
+      size: 32,
+      shape: "circle"
+    };
+  }, [showAvatar, avatar, name]);
+  const secondaryTexts = (0, import_react.useMemo)(() => {
+    const list = [];
+    if (showEmail && email) list.push({ text: email });
+    extraFields.forEach((f) => {
+      const v = extraData[f.key];
+      if (v) list.push({ text: v });
+    });
+    return list;
+  }, [showEmail, email, extraFields, extraData]);
+  const editAction = (0, import_react.useMemo)(
+    () => ({
+      type: "icon",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, { className: "pisell-contact-brief-action-edit" }),
+      onClick: () => {
+        setEditModalVisible(true);
+      }
+    }),
+    []
+  );
+  const initialEditValues = (0, import_react.useMemo)(
+    () => ({
+      name,
+      phone,
+      email,
+      ...extraData
+    }),
+    [name, phone, email, extraData]
+  );
+  const handleEditSubmit = (0, import_react.useCallback)(
+    (values) => {
+      onSubmit == null ? void 0 : onSubmit(values);
+      setEditModalVisible(false);
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-contact-brief-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+    import_pisellEntityCard.PisellEntityCard,
+    {
+      className,
+      style,
+      hoverStyle,
+      activeStyle,
+      disabledStyle,
+      clickable,
+      disabled,
+      onClick,
+      media,
+      primaryText: name,
+      subtitleText: showPhone && phone ? phone : void 0,
+      secondaryTexts,
+      showMedia: showAvatar,
+      showPrimaryText: true,
+      showSubtitle: showPhone,
+      showSecondaryText: true,
+      showTags: false,
+      showActions: true,
+      actions: [editAction],
+      density: "B2",
+      layout,
+      width: "content",
+      swipeToDelete,
+      onDelete,
+      primaryLineClamp,
+      secondaryLineClamp
+    }
+  )), /* @__PURE__ */ import_react.default.createElement(
+    import_components.ContactFormModal,
+    {
+      visible: editModalVisible,
+      onCancel: () => setEditModalVisible(false),
+      onSubmit: handleEditSubmit,
+      mode: "edit",
+      initialValues: initialEditValues,
+      extraFields
+    }
+  ));
+}
+function PisellContactBriefCreateButton({
+  extraFields = [],
+  onCreate,
+  onClick: onClickProp,
+  className,
+  style
+}) {
+  const [createModalVisible, setCreateModalVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    ensureLocales();
+  }, []);
+  const handleClick = (0, import_react.useCallback)(
+    (e) => {
+      if (onClickProp) {
+        onClickProp(e);
+        return;
+      }
+      setCreateModalVisible(true);
+    },
+    [onClickProp]
+  );
+  const handleCreateSubmit = (0, import_react.useCallback)(
+    (values) => {
+      onCreate == null ? void 0 : onCreate(values);
+      setCreateModalVisible(false);
+    },
+    [onCreate]
+  );
+  const addContactText = import_utils.locales.getText("pisell.contact.brief.addContact");
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: `pisell-contact-brief-create-btn ${className ?? ""}`.trim(),
+      style,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick(e);
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-contact-brief-create-btn-avatar" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-contact-brief-create-btn-avatar-inner" })),
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-contact-brief-create-btn-text" }, addContactText),
+    /* @__PURE__ */ import_react.default.createElement(import_icons.PlusCircleOutlined, { className: "pisell-contact-brief-create-btn-icon" })
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_components.ContactFormModal,
+    {
+      visible: createModalVisible,
+      onCancel: () => setCreateModalVisible(false),
+      onSubmit: handleCreateSubmit,
+      mode: "create",
+      extraFields
+    }
+  ));
+}
+PisellContactBrief.CreateButton = PisellContactBriefCreateButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellContactBrief,
+  PisellContactBriefCreateButton
+});

package/lib/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/lib/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;