@pisell/materials 1.0.1057 → 1.0.1059

package/es/components/pisellCurrency/PisellCurrency.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import { ConfigProvider } from 'antd';
 import { getDisplayState } from '@pisell/utils';
 import ReadOnlyView from "./components/ReadOnlyView";
 import EditView from "./components/EditView";
 import DisabledView from "./components/DisabledView";
+import { getPisellComponentsThemeConfig } from "../../theme/pisell-components";
 import "./PisellCurrency.less";
 
 /**
@@ -46,18 +48,22 @@ export var PisellCurrency = function PisellCurrency(props) {
 
   // 计算显示状态
   var displayState = getDisplayState(mode, disabled);
-
-  // 根据状态渲染对应子组件
-  switch (displayState) {
-    case 'read':
-      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
-    case 'edit':
-      return /*#__PURE__*/React.createElement(EditView, props);
-    case 'disabled':
-      return /*#__PURE__*/React.createElement(DisabledView, props);
-    default:
-      return null;
-  }
+  var render = function render() {
+    switch (displayState) {
+      case 'read':
+        return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+      case 'edit':
+        return /*#__PURE__*/React.createElement(EditView, props);
+      case 'disabled':
+        return /*#__PURE__*/React.createElement(DisabledView, props);
+      default:
+        return null;
+    }
+  };
+  var theme = getPisellComponentsThemeConfig();
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: theme
+  }, render());
 };
 
 // 性能优化：使用 memo 避免不必要的重渲染

package/es/components/pisellCurrency/PisellCurrency.less

@@ -10,129 +10,6 @@
   &-edit {
     position: relative;
     width: 100%;
-
-    // InputNumber 外层（Figma 设计规范，无边框避免双边框）
-    .pisell-lowcode-input-number {
-      width: 100% !important;
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border-radius: 8px !important;
-      border: none !important;
-      color: #101828 !important; // Gray/900
-      background-color: #ffffff !important;
-
-      // 内层 input
-      .pisell-lowcode-input-number-input {
-        height: 46px !important; // 48 - 2px border
-        padding: 12px 16px !important;
-        font-size: 16px !important;
-        line-height: 24px !important;
-        color: #101828 !important;
-        background: transparent !important;
-        border: none !important;
-
-        &::placeholder {
-          color: #667085 !important; // Gray/500
-        }
-      }
-
-      // 聚焦态
-      &.pisell-lowcode-input-number-focused,
-      &:focus,
-      &:focus-within {
-        border-color: #d6bbfb !important; // Primary/300
-        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
-        outline: none !important;
-      }
-
-      // Hover 态
-      &:hover:not(.pisell-lowcode-input-number-disabled):not(.pisell-lowcode-input-number-focused) {
-        border-color: #b692f6 !important; // Primary/400
-      }
-
-      // 禁用态
-      &.pisell-lowcode-input-number-disabled {
-        background-color: #f9fafb !important; // Gray/50
-        border-color: #d0d5dd !important;
-        cursor: not-allowed !important;
-
-        .pisell-lowcode-input-number-input {
-          color: #98a2b3 !important; // Gray/400
-          cursor: not-allowed !important;
-        }
-      }
-
-      // 货币符号：前缀
-      .pisell-lowcode-input-number-prefix {
-        margin-right: 8px;
-        margin-left: 16px;
-        color: #667085; // Gray/500
-        font-size: 16px;
-      }
-
-      // 货币符号：后置（addonAfter）
-      .pisell-lowcode-input-number-suffix {
-        margin-left: 8px;
-        margin-right: 16px;
-        color: #667085;
-        font-size: 16px;
-      }
-
-      // addonBefore / addonAfter 包裹（InputNumber 后置符号可能用 addon 渲染）
-      .pisell-lowcode-input-number-group-addon {
-        background-color: #ffffff !important;
-        border: 1px solid #d0d5dd !important;
-        color: #344054; // Gray/700
-        font-size: 16px !important;
-        padding: 12px 16px !important;
-
-        &:first-child {
-          border-right: none !important;
-          border-radius: 8px 0 0 8px !important;
-        }
-
-        &:last-child {
-          border-left: none !important;
-          border-radius: 0 8px 8px 0 !important;
-        }
-      }
-
-      // 步进器按钮（controls）
-      .pisell-lowcode-input-number-handler-wrap {
-        border-left: 1px solid #d0d5dd !important;
-        background: #ffffff !important;
-
-        .pisell-lowcode-input-number-handler {
-          color: #667085;
-          border-color: #d0d5dd;
-
-          &:hover {
-            color: #344054;
-          }
-
-          &.pisell-lowcode-input-number-handler-up-disabled,
-          &.pisell-lowcode-input-number-handler-down-disabled {
-            color: #98a2b3;
-            cursor: not-allowed;
-          }
-        }
-      }
-
-      // 错误状态
-      &.pisell-lowcode-input-number-status-error {
-        border-color: #fda29b !important; // Error/300
-
-        &.pisell-lowcode-input-number-focused,
-        &:focus-within {
-          border-color: #f97066 !important; // Error/400
-          box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
-        }
-
-        &:hover:not(:focus-within) {
-          border-color: #f97066 !important;
-        }
-      }
-    }
   }
 
   // 错误提示（与设计体系一致）

package/es/components/pisellCustomerBrief/PisellCustomerBrief.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { PisellCustomerBriefProps } from './types';
+import './PisellCustomerBrief.less';
+/**
+ * PisellCustomerBrief 客户简要卡片
+ * 基于 PisellEntityCard，用于展示客户（Customer）实体的核心识别信息与客户级属性。
+ * 设计文档：Customer Info (pcl_customerInfon_V1.0)
+ *
+ * - 无头像时显示默认占位 Avatar
+ * - 文本过长按配置省略
+ * - Actions 为空时不占位
+ *
+ * @param props 组件 Props
+ */
+export declare function PisellCustomerBrief({ name, subtitle, avatar, email, address, company, date, extendedFields, tags, actions, showActions, showAvatar, showPrimaryText, showSubtitle, showExtended, showTags, density, layout, width, swipeToDelete, onDelete, tagPosition, contentGap, primaryLineClamp, secondaryLineClamp, renderMedia, renderPrimary, renderSubtitle, renderSecondary, renderTags, renderActions, className, style, hoverStyle, activeStyle, disabledStyle, clickable, disabled, onClick, }: PisellCustomerBriefProps): JSX.Element;

package/es/components/pisellCustomerBrief/PisellCustomerBrief.js

@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react';
+import { PisellEntityCard } from "../pisellEntityCard";
+import "./PisellCustomerBrief.less";
+
+/**
+ * PisellCustomerBrief 客户简要卡片
+ * 基于 PisellEntityCard，用于展示客户（Customer）实体的核心识别信息与客户级属性。
+ * 设计文档：Customer Info (pcl_customerInfon_V1.0)
+ *
+ * - 无头像时显示默认占位 Avatar
+ * - 文本过长按配置省略
+ * - Actions 为空时不占位
+ *
+ * @param props 组件 Props
+ */
+export function PisellCustomerBrief(_ref) {
+  var name = _ref.name,
+    subtitle = _ref.subtitle,
+    avatar = _ref.avatar,
+    email = _ref.email,
+    address = _ref.address,
+    company = _ref.company,
+    date = _ref.date,
+    _ref$extendedFields = _ref.extendedFields,
+    extendedFields = _ref$extendedFields === void 0 ? [] : _ref$extendedFields,
+    _ref$tags = _ref.tags,
+    tags = _ref$tags === void 0 ? [] : _ref$tags,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$showActions = _ref.showActions,
+    showActions = _ref$showActions === void 0 ? false : _ref$showActions,
+    _ref$showAvatar = _ref.showAvatar,
+    showAvatar = _ref$showAvatar === void 0 ? true : _ref$showAvatar,
+    _ref$showPrimaryText = _ref.showPrimaryText,
+    showPrimaryText = _ref$showPrimaryText === void 0 ? true : _ref$showPrimaryText,
+    _ref$showSubtitle = _ref.showSubtitle,
+    showSubtitle = _ref$showSubtitle === void 0 ? true : _ref$showSubtitle,
+    _ref$showExtended = _ref.showExtended,
+    showExtended = _ref$showExtended === void 0 ? true : _ref$showExtended,
+    _ref$showTags = _ref.showTags,
+    showTags = _ref$showTags === void 0 ? true : _ref$showTags,
+    _ref$density = _ref.density,
+    density = _ref$density === void 0 ? 'B2' : _ref$density,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'content' : _ref$width,
+    _ref$swipeToDelete = _ref.swipeToDelete,
+    swipeToDelete = _ref$swipeToDelete === void 0 ? false : _ref$swipeToDelete,
+    onDelete = _ref.onDelete,
+    _ref$tagPosition = _ref.tagPosition,
+    tagPosition = _ref$tagPosition === void 0 ? 'below' : _ref$tagPosition,
+    contentGap = _ref.contentGap,
+    primaryLineClamp = _ref.primaryLineClamp,
+    secondaryLineClamp = _ref.secondaryLineClamp,
+    renderMedia = _ref.renderMedia,
+    renderPrimary = _ref.renderPrimary,
+    renderSubtitle = _ref.renderSubtitle,
+    renderSecondary = _ref.renderSecondary,
+    renderTags = _ref.renderTags,
+    renderActions = _ref.renderActions,
+    className = _ref.className,
+    style = _ref.style,
+    hoverStyle = _ref.hoverStyle,
+    activeStyle = _ref.activeStyle,
+    disabledStyle = _ref.disabledStyle,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === void 0 ? true : _ref$clickable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onClick = _ref.onClick;
+  /** 媒体区：头像，无 src 时 EntityCard 会显示默认占位 */
+  var media = useMemo(function () {
+    if (!showAvatar) return undefined;
+    return {
+      type: 'avatar',
+      src: avatar,
+      alt: name,
+      size: 40,
+      shape: 'circle'
+    };
+  }, [showAvatar, avatar, name]);
+
+  /** 扩展信息 → 次级文案列表，顺序：email、address、company、date、extendedFields */
+  var secondaryTexts = useMemo(function () {
+    if (!showExtended) return [];
+    var list = [];
+    if (email) list.push({
+      text: email
+    });
+    if (address) list.push({
+      text: address
+    });
+    if (company) list.push({
+      text: company
+    });
+    if (date) list.push({
+      text: date
+    });
+    extendedFields.forEach(function (f) {
+      return list.push({
+        text: f.text,
+        showTooltip: f.showTooltip
+      });
+    });
+    return list;
+  }, [showExtended, email, address, company, date, extendedFields]);
+  return /*#__PURE__*/React.createElement(PisellEntityCard, {
+    className: "pisell-customer-brief-root ".concat(className !== null && className !== void 0 ? className : '').trim(),
+    style: style,
+    hoverStyle: hoverStyle,
+    activeStyle: activeStyle,
+    disabledStyle: disabledStyle,
+    clickable: clickable,
+    disabled: disabled,
+    onClick: onClick,
+    media: media,
+    primaryText: name,
+    subtitleText: subtitle,
+    secondaryTexts: secondaryTexts,
+    tags: tags,
+    actions: actions,
+    showMedia: showAvatar,
+    showPrimaryText: showPrimaryText,
+    showSubtitle: showSubtitle,
+    showSecondaryText: showExtended,
+    showTags: showTags,
+    showActions: showActions,
+    density: density,
+    layout: layout,
+    width: width,
+    swipeToDelete: swipeToDelete,
+    onDelete: onDelete,
+    tagPosition: tagPosition,
+    contentGap: contentGap,
+    primaryLineClamp: primaryLineClamp,
+    secondaryLineClamp: secondaryLineClamp,
+    renderMedia: renderMedia,
+    renderPrimary: renderPrimary,
+    renderSubtitle: renderSubtitle,
+    renderSecondary: renderSecondary,
+    renderTags: renderTags,
+    renderActions: renderActions
+  });
+}

package/es/components/pisellCustomerBrief/PisellCustomerBrief.less

@@ -0,0 +1,8 @@
+/**
+ * PisellCustomerBrief 组件样式
+ * 基于 Entity Card 结构，仅做根类名作用域；具体样式由 PisellEntityCard 提供
+ */
+
+.pisell-customer-brief-root {
+  /* 客户卡片根节点，扩展时可在此追加样式 */
+}

package/es/components/pisellCustomerBrief/PisellCustomerBrief.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellCustomerBrief } from './PisellCustomerBrief';
+declare const meta: Meta<typeof PisellCustomerBrief>;
+export default meta;
+declare type Story = StoryObj<typeof PisellCustomerBrief>;
+/** 默认：客户名称 + 副标题 + 扩展信息 + 标签 */
+export declare const Default: Story;
+/** 无头像（默认占位） */
+export declare const NoAvatar: Story;
+/** 有头像 */
+export declare const WithAvatar: Story;
+/** B5 密度：扩展信息多行 */
+export declare const B5Extended: Story;
+/** 带操作区：图标 + 文本 + 按钮 */
+export declare const WithActions: Story;
+/** 竖向布局 */
+export declare const VerticalLayout: Story;
+/** 左滑删除 */
+export declare const SwipeToDelete: Story;
+/** 可点击卡片 */
+export declare const Clickable: Story;
+/** 禁用态 */
+export declare const Disabled: Story;

package/es/components/pisellCustomerBrief/PisellCustomerBrief.stories.js

@@ -0,0 +1,193 @@
+import { EditOutlined } from '@ant-design/icons';
+import { PisellCustomerBrief } from "./PisellCustomerBrief";
+var meta = {
+  title: 'Data Display/PisellCustomerBrief',
+  component: PisellCustomerBrief,
+  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']
+    },
+    showAvatar: {
+      description: '显示头像',
+      control: 'boolean'
+    },
+    showExtended: {
+      description: '显示扩展信息',
+      control: 'boolean'
+    },
+    showTags: {
+      description: '显示标签',
+      control: 'boolean'
+    },
+    showActions: {
+      description: '显示操作区',
+      control: 'boolean'
+    }
+  },
+  args: {
+    name: '某某科技有限公司'
+  }
+};
+export default meta;
+/** 默认：客户名称 + 副标题 + 扩展信息 + 标签 */
+export var Default = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '+86 138 0000 0000',
+    email: 'contact@company.com',
+    company: '某某科技有限公司',
+    tags: [{
+      text: 'VIP'
+    }, {
+      text: '已签约'
+    }],
+    density: 'B2',
+    layout: 'horizontal'
+  }
+};
+
+/** 无头像（默认占位） */
+export var NoAvatar = {
+  args: {
+    name: '新客户',
+    subtitle: '待完善信息'
+  }
+};
+
+/** 有头像 */
+export var WithAvatar = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '客户编号 C001',
+    avatar: 'https://ui-avatars.com/api/?name=Company&background=4a90d9&color=fff&size=40',
+    email: 'contact@company.com',
+    company: '某某科技有限公司',
+    tags: [{
+      text: 'VIP'
+    }]
+  }
+};
+
+/** B5 密度：扩展信息多行 */
+export var B5Extended = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '+86 138 0000 0000',
+    email: 'contact@company.com',
+    address: '浙江省杭州市余杭区',
+    company: '某某科技有限公司',
+    date: '2024-01-15 创建',
+    extendedFields: [{
+      text: '自定义属性 A'
+    }, {
+      text: '自定义属性 B',
+      showTooltip: true
+    }],
+    tags: [{
+      text: 'VIP'
+    }, {
+      text: '已签约'
+    }],
+    density: 'B5',
+    layout: 'horizontal'
+  }
+};
+
+/** 带操作区：图标 + 文本 + 按钮 */
+export var WithActions = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: 'contact@company.com',
+    email: 'contact@company.com',
+    company: '某某科技有限公司',
+    tags: [{
+      text: 'VIP'
+    }],
+    showActions: true,
+    actions: [{
+      type: 'icon',
+      icon: /*#__PURE__*/React.createElement(EditOutlined, null),
+      onClick: function onClick() {
+        return console.log('编辑');
+      }
+    }, {
+      type: 'text',
+      label: '查看详情',
+      onClick: function onClick() {
+        return console.log('查看详情');
+      }
+    }, {
+      type: 'button',
+      label: '选择',
+      onClick: function onClick() {
+        return console.log('选择');
+      }
+    }]
+  }
+};
+
+/** 竖向布局 */
+export var VerticalLayout = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '客户编号 C001',
+    avatar: 'https://ui-avatars.com/api/?name=Company&background=4a90d9&color=fff&size=64',
+    email: 'contact@company.com',
+    company: '某某科技有限公司',
+    tags: [{
+      text: 'VIP'
+    }],
+    density: 'B2',
+    layout: 'vertical'
+  }
+};
+
+/** 左滑删除 */
+export var SwipeToDelete = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '+86 138 0000 0000',
+    email: 'contact@company.com',
+    swipeToDelete: true,
+    onDelete: function onDelete() {
+      return console.log('onDelete');
+    }
+  }
+};
+
+/** 可点击卡片 */
+export var Clickable = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '点击整卡',
+    email: 'contact@company.com',
+    onClick: function onClick() {
+      return console.log('卡片被点击');
+    }
+  }
+};
+
+/** 禁用态 */
+export var Disabled = {
+  args: {
+    name: '某某科技有限公司',
+    subtitle: '+86 138 0000 0000',
+    email: 'contact@company.com',
+    disabled: true
+  }
+};

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

@@ -0,0 +1,6 @@
+/**
+ * PisellCustomerBrief 组件导出
+ * 客户简要卡片，基于 PisellEntityCard
+ */
+export { PisellCustomerBrief } from './PisellCustomerBrief';
+export type { PisellCustomerBriefProps, CustomerBriefExtendedField } from './types';

package/es/components/pisellCustomerBrief/index.js

@@ -0,0 +1,5 @@
+/**
+ * PisellCustomerBrief 组件导出
+ * 客户简要卡片，基于 PisellEntityCard
+ */
+export { PisellCustomerBrief } from "./PisellCustomerBrief";

package/es/components/pisellCustomerBrief/types.d.ts

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react';
+import type { PisellBaseCardProps } from '../pisellBaseCard/types';
+import type { EntityCardActionItem, EntityCardDensity, EntityCardLayout, EntityCardTagItem, EntityCardWidth } from '../pisellEntityCard/types';
+/**
+ * 客户简要卡片扩展字段项（用于 B5/B9 等多行展示）
+ * 与 Entity Card 的 secondaryTexts 对应，语义为客户领域
+ */
+export interface CustomerBriefExtendedField {
+    /** 展示文案（如 Email、Address、Company、Date、自定义属性） */
+    text: string;
+    /** 是否显示提示图标 */
+    showTooltip?: boolean;
+}
+/**
+ * PisellCustomerBrief 组件 Props
+ * 基于 PisellEntityCard，用于展示客户（Customer）实体的核心识别信息与客户级属性
+ * 设计文档：Customer Info (pcl_customerInfon_V1.0)
+ */
+export interface PisellCustomerBriefProps extends Pick<PisellBaseCardProps, 'className' | 'style' | 'hoverStyle' | 'activeStyle' | 'disabledStyle' | 'clickable' | 'disabled' | 'onClick'> {
+    /** 客户名称（主文案） */
+    name: string;
+    /** 副标题，与主标题同行（如电话、客户编号） */
+    subtitle?: string;
+    /** 头像图片地址；不传则显示默认占位 Avatar */
+    avatar?: string;
+    /** 邮箱 */
+    email?: string;
+    /** 地址 */
+    address?: string;
+    /** 公司 */
+    company?: string;
+    /** 日期类信息（如创建日期、跟进日期） */
+    date?: string;
+    /** 自定义扩展字段，顺序即展示顺序 */
+    extendedFields?: CustomerBriefExtendedField[];
+    /** 标签列表（如等级、状态） */
+    tags?: EntityCardTagItem[];
+    /** 操作项：仅图标 / 图标+文本 / 按钮 */
+    actions?: EntityCardActionItem[];
+    /** 是否显示操作区 @default false */
+    showActions?: boolean;
+    /** 是否显示头像 @default true */
+    showAvatar?: boolean;
+    /** 是否显示主文案 @default true */
+    showPrimaryText?: boolean;
+    /** 是否显示副标题 @default true */
+    showSubtitle?: boolean;
+    /** 是否显示扩展信息（email/address/company/date/extendedFields） @default true */
+    showExtended?: boolean;
+    /** 是否显示标签 @default true */
+    showTags?: boolean;
+    /** 信息密度 @default 'B2' */
+    density?: EntityCardDensity;
+    /** 布局方向 @default 'horizontal' */
+    layout?: EntityCardLayout;
+    /** 卡片宽度 @default 'content' */
+    width?: EntityCardWidth;
+    /** 是否开启左滑删除 @default false */
+    swipeToDelete?: boolean;
+    /** 左滑删除回调 */
+    onDelete?: () => void;
+    /** 标签位置 @default 'below' */
+    tagPosition?: 'inline' | 'below';
+    /** 内容区间距 */
+    contentGap?: number | string;
+    /** 主文案行数限制 */
+    primaryLineClamp?: number;
+    /** 扩展信息行数限制（按密度有默认值） */
+    secondaryLineClamp?: number;
+    /** 自定义渲染媒体区 */
+    renderMedia?: () => ReactNode;
+    /** 自定义渲染主文案区 */
+    renderPrimary?: () => ReactNode;
+    /** 自定义渲染副标题区 */
+    renderSubtitle?: () => ReactNode;
+    /** 自定义渲染扩展信息区 */
+    renderSecondary?: () => ReactNode;
+    /** 自定义渲染标签区 */
+    renderTags?: () => ReactNode;
+    /** 自定义渲染操作区 */
+    renderActions?: () => ReactNode;
+}

package/es/components/pisellCustomerBrief/types.js

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