@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellEntityCard/docs/pisellEntityCard.$tab-test.md

@@ -0,0 +1,122 @@
+---
+title: 测试文档
+order: 4
+category: pro
+---
+
+# PisellEntityCard 组件测试用例文档
+
+## 测试概览
+
+本文档列出 PisellEntityCard 组件的测试用例点，基于 types.ts 与组件实现。
+
+---
+
+## 一、基础渲染测试
+
+| 测试项          | 测试步骤                                                 | 预期结果                                                       | 测试类型 |
+|--------------|------------------------------------------------------|------------------------------------------------------------|------|
+| 根节点渲染        | 不传数据源，仅传 primaryText                                 | 存在 `.pisell-entity-card-wrap` 且内含 `.pisell-base-card-root` | 自动化  |
+| 主文案渲染        | 传入 `primaryText="实体名称"`                              | 页面显示「实体名称」                                                 | 自动化  |
+| 次级文案渲染       | 传入 `secondaryTexts=[{ text: '描述' }]`                 | 页面显示「描述」                                                   | 自动化  |
+| 媒体区-头像       | 传入 `media={{ type: 'avatar', src: 'x', alt: '头像' }}` | 存在头像元素（.pisell-entity-card-media 或 antd Avatar）            | 自动化  |
+| 标签渲染         | 传入 `tags=[{ text: '标签1' }]`                          | 页面显示「标签1」                                                  | 自动化  |
+| 无媒体无主文案      | 不传 media、primaryText，传 secondaryTexts                | 不报错，可渲染次级或空内容                                              | 自动化  |
+| className 合并 | 传入 `className="custom"`                              | 根卡片节点 class 包含 custom                                      | 自动化  |
+| style 透传     | 传入 `style={{ padding: 20 }}`                         | BaseCard 根节点应用对应样式                                         | 自动化  |
+
+---
+
+## 二、显隐与默认值测试
+
+| 测试项                     | 测试步骤                                        | 预期结果     | 测试类型 |
+|-------------------------|---------------------------------------------|----------|------|
+| showMedia 默认 true       | 传入 media，不传 showMedia                       | 显示媒体区    | 自动化  |
+| showMedia=false         | 传入 media 且 showMedia=false                  | 不显示媒体区   | 自动化  |
+| showPrimaryText 默认 true | 传入 primaryText，不传 showPrimaryText           | 显示主文案    | 自动化  |
+| showPrimaryText=false   | 传入 primaryText 且 showPrimaryText=false      | 不显示主文案   | 自动化  |
+| showSecondaryText=false | 传入 secondaryTexts 且 showSecondaryText=false | 不显示次级文案  | 自动化  |
+| showTags=false          | 传入 tags 且 showTags=false                    | 不显示标签    | 自动化  |
+| showActions 默认 false    | 传入 actions，不传 showActions                   | 不显示底部操作区 | 自动化  |
+| showActions=true        | 传入 actions 且 showActions=true               | 显示底部操作区  | 自动化  |
+
+---
+
+## 三、密度与布局测试
+
+| 测试项                  | 测试步骤                               | 预期结果                                     | 测试类型 |
+|----------------------|------------------------------------|------------------------------------------|------|
+| density 默认 B2        | 不传 density，传 secondaryTexts        | 次级按 B2 规则展示（最多 2 条/行数）                   | 自动化  |
+| density=B1           | 传入 density="B1" 与 secondaryTexts   | 不显示次级文案                                  | 自动化  |
+| density=B5           | 传入 density="B5" 与多条 secondaryTexts | 次级最多展示 5 条                               | 自动化  |
+| layout 默认 horizontal | 不传 layout                          | Summary 区为横向排布（data-layout="horizontal"） | 自动化  |
+| layout=vertical      | 传入 layout="vertical"               | Summary 区为竖向排布（data-layout="vertical"）   | 自动化  |
+| width=content        | 不传 width 或 width="content"         | 外层宽度为 fit-content                        | 自动化  |
+| width=full           | 传入 width="full"                    | 外层宽度 100%                                | 自动化  |
+| width 数字             | 传入 width={300}                     | 外层宽度 300px                               | 自动化  |
+| tagPosition=inline   | 传入 tagPosition="inline" 与 tags     | 标签与主文案同行                                 | 自动化  |
+| tagPosition=below    | 传入 tagPosition="below" 与 tags      | 标签在次级下方                                  | 自动化  |
+
+---
+
+## 四、左滑删除测试
+
+| 测试项             | 测试步骤                                                | 预期结果                                        | 测试类型 |
+|-----------------|-----------------------------------------------------|---------------------------------------------|------|
+| 未开启左滑           | 不传 swipeToDelete 或 swipeToDelete=false              | 无滑动容器，无删除按钮                                 | 自动化  |
+| 开启左滑需 onDelete  | 传入 swipeToDelete=true 且 onDelete                    | 存在 .pisell-entity-card-swipe-container 与删除区 | 自动化  |
+| 点击删除触发 onDelete | swipeToDelete=true、onDelete 为 jest.fn()，滑动露出删除后点击删除 | onDelete 被调用一次                              | 自动化  |
+
+---
+
+## 五、Actions 与插槽测试
+
+| 测试项                  | 测试步骤                                                     | 预期结果                     | 测试类型 |
+|----------------------|----------------------------------------------------------|--------------------------|------|
+| actions 文本型          | showActions=true，actions=[{ type: 'text', label: '查看' }] | 显示「查看」                   | 自动化  |
+| actions 按钮型          | actions=[{ type: 'button', label: '选择' }]                | 显示按钮样式操作                 | 自动化  |
+| 点击 action 触发 onClick | action 配置 onClick 为 jest.fn()，点击该操作                      | 对应 onClick 被调用，且事件不冒泡到卡片 | 自动化  |
+| renderPrimary 插槽     | 传入 renderPrimary={() => <span>自定义主文案</span>}             | 显示「自定义主文案」而非 primaryText | 自动化  |
+| renderTags 插槽        | 传入 renderTags={() => <span>自定义标签</span>}                 | 显示「自定义标签」而非 tags 列表      | 自动化  |
+
+---
+
+## 六、BaseCard 透传与事件测试
+
+| 测试项          | 测试步骤                          | 预期结果                    | 测试类型 |
+|--------------|-------------------------------|-------------------------|------|
+| clickable 透传 | 传入 clickable=false            | 卡片无 role="button"，不响应点击 | 自动化  |
+| disabled 透传  | 传入 disabled=true              | 卡片有 aria-disabled，不响应点击 | 自动化  |
+| onClick 触发   | 传入 onClick（jest.fn()），点击卡片内容区 | onClick 被调用一次           | 自动化  |
+| children 渲染  | 传入 children={<div>额外内容</div>} | 卡片内显示「额外内容」             | 自动化  |
+
+---
+
+## 七、人工测试点
+
+| 测试项           | 测试步骤                                              | 预期结果             |
+|---------------|---------------------------------------------------|------------------|
+| 横向布局视觉        | layout=horizontal，媒体+主+次级+标签                      | 媒体在左，文案在右，间距合理   |
+| 竖向布局视觉        | layout=vertical                                   | 媒体在上、文案在下，居中对齐   |
+| B2 次级行数       | density=B2，两条次级                                   | 次级区域最多约 2 行，超出省略 |
+| B5 次级行数       | density=B5，多条次级                                   | 次级最多约 5 行        |
+| 左滑手势          | 移动端或模拟 touch，左滑卡片                                 | 露出删除按钮，松手可回弹或保持  |
+| 删除按钮样式        | 左滑露出删除                                            | 删除区红色背景、白色文字、可点击 |
+| 主/次级省略        | 主文案或次级过长                                          | 单行/多行省略，不撑破布局    |
+| 带 tooltip 的次级 | secondaryTexts=[{ text: 'x', showTooltip: true }] | 该行前有 info 图标     |
+
+---
+
+## Bug 汇总
+
+### 待修复的 Bug
+
+| Bug ID | 描述 | 优先级 | 状态 | 发现时间 |
+|--------|----|-----|----|------|
+| -      | -  | -   | -  | -    |
+
+### 已修复的 Bug
+
+| Bug ID | 描述 | 优先级 | 修复时间 | 修复方案 |
+|--------|----|-----|------|------|
+| -      | -  | -   | -    | -    |

package/es/components/pisellEntityCard/docs/pisellEntityCard.md

@@ -0,0 +1,176 @@
+---
+nav:
+  title: 组件
+  order: 1
+group:
+  title: Data Display
+  order: 1
+title: PisellEntityCard
+order: 1
+category: pro
+---
+
+# PisellEntityCard 实体卡片
+
+基于 **PisellBaseCard**
+的实体展示卡片，用于统一展示「一个实体」的识别信息：媒体区（头像/缩略图/图标）、主文案、副标题、次级信息、标签，以及可选的右侧操作区。支持多种信息密度（B1/B2/B5/B9）、横/竖布局、左滑删除与插槽扩展。
+
+## 设计文档
+
+详见 [设计文档](./pisellEntityCard.$tab-design.md)。
+
+## 何时使用
+
+- 列表项、搜索结果中的实体摘要（人、联系人、客户、商品等）
+- 选择器中的选项展示
+- 详情页关联实体引用
+- 需要左滑删除的列表项
+
+## 代码示例
+
+### 基础用法（横向 B2）
+
+```tsx
+import {PisellEntityCard} from '@pisell/materials';
+
+export default function Demo() {
+    return (
+        <PisellEntityCard
+            primaryText="张三"
+            subtitleText="+86 138 0000 0000"
+            secondaryTexts={[
+                {text: '产品经理 · 杭州'},
+                {text: '钉钉事业部'},
+            ]}
+            media={{
+                type: 'avatar',
+                src: 'https://ui-avatars.com/api/?name=Zhang+San&size=48',
+                alt: '头像',
+                size: 48,
+            }}
+            density="B2"
+            layout="horizontal"
+        />
+    );
+}
+```
+
+### 带操作区与标签
+
+```tsx
+import {PisellEntityCard} from '@pisell/materials';
+import {EditOutlined} from '@ant-design/icons';
+
+export default function Demo() {
+    return (
+        <PisellEntityCard
+            primaryText="张三"
+            secondaryTexts={[{text: '产品经理'}]}
+            tags={[{text: '在职'}, {text: '正式'}]}
+            media={{type: 'avatar', src: '', alt: '头像', size: 40}}
+            showActions
+            actions={[
+                {type: 'icon', icon: <EditOutlined/>, onClick: () => console.log('编辑')},
+                {type: 'text', label: '查看详情', onClick: () => console.log('详情')},
+            ]}
+        />
+    );
+}
+```
+
+### 竖向布局
+
+```tsx
+import {PisellEntityCard} from '@pisell/materials';
+
+export default function Demo() {
+    return (
+        <PisellEntityCard
+            primaryText="实体名称"
+            secondaryTexts={[{text: '描述信息'}]}
+            media={{
+                type: 'avatar',
+                src: 'https://ui-avatars.com/api/?name=Entity&size=64',
+                alt: '头像',
+                size: 64,
+            }}
+            density="B2"
+            layout="vertical"
+        />
+    );
+}
+```
+
+### 左滑删除
+
+```tsx
+import {PisellEntityCard} from '@pisell/materials';
+
+export default function Demo() {
+    return (
+        <PisellEntityCard
+            primaryText="可删除项"
+            secondaryTexts={[{text: '左滑显示删除'}]}
+            media={{type: 'avatar', src: '', alt: ''}}
+            swipeToDelete
+            onDelete={() => console.log('已删除')}
+        />
+    );
+}
+```
+
+### 密度 B5 / B9
+
+```tsx
+import {PisellEntityCard} from '@pisell/materials';
+
+export default function Demo() {
+    return (
+        <PisellEntityCard
+            primaryText="多行次级"
+            secondaryTexts={[
+                {text: '第一行'},
+                {text: '第二行'},
+                {text: '第三行'},
+                {text: '第四行'},
+                {text: '第五行'},
+            ]}
+            tags={[{text: '标签1'}, {text: '标签2'}]}
+            density="B5"
+            layout="horizontal"
+        />
+    );
+}
+```
+
+## API
+
+| 属性                 | 说明                 | 类型                            | 默认值          |
+|--------------------|--------------------|-------------------------------|--------------|
+| media              | 媒体区（头像/缩略图/图标）     | EntityCardMediaConfig         | -            |
+| primaryText        | 主文案                | string                        | -            |
+| subtitleText       | 副标题（与主标题同行）        | string                        | -            |
+| secondaryTexts     | 次级文案列表             | EntityCardSecondaryItem[]     | []           |
+| tags               | 标签列表               | EntityCardTagItem[]           | []           |
+| actions            | 操作项（需 showActions） | EntityCardActionItem[]        | []           |
+| showMedia          | 显示媒体区              | boolean                       | true         |
+| showPrimaryText    | 显示主文案              | boolean                       | true         |
+| showSubtitle       | 显示副标题              | boolean                       | true         |
+| showSecondaryText  | 显示次级文案             | boolean                       | true         |
+| showTags           | 显示标签               | boolean                       | true         |
+| showActions        | 显示操作区              | boolean                       | false        |
+| density            | 信息密度               | 'B1' \| 'B2' \| 'B5' \| 'B9'  | 'B2'         |
+| layout             | 布局方向               | 'horizontal' \| 'vertical'    | 'horizontal' |
+| width              | 卡片宽度               | 'content' \| 'full' \| number | 'content'    |
+| swipeToDelete      | 开启左滑删除             | boolean                       | false        |
+| onDelete           | 左滑删除回调             | () => void                    | -            |
+| tagPosition        | 标签位置               | 'inline' \| 'below'           | 'below'      |
+| contentGap         | 内容间距               | number \| string              | -            |
+| primaryLineClamp   | 主文案行数限制            | number                        | -            |
+| secondaryLineClamp | 次级文案行数限制           | number                        | -            |
+
+继承自 PisellBaseCard：`className`、`style`、`hoverStyle`、`activeStyle`、`disabledStyle`、`clickable`、`disabled`、`onClick`。
+
+插槽：`renderMedia`、`renderPrimary`、`renderSubtitle`、`renderSecondary`、`renderTags`、`renderActions`。
+
+更多见 [types.ts](../types.ts)。

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

@@ -0,0 +1,2 @@
+import { EntityCardActionItem, EntityCardDensity, EntityCardLayout, EntityCardMediaConfig, EntityCardMediaType, EntityCardSecondaryItem, EntityCardTagItem, EntityCardTagPosition, EntityCardWidth, PisellEntityCardProps } from "./types.js";
+import { PisellEntityCard } from "./PisellEntityCard.js";

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

@@ -0,0 +1,148 @@
+import { PisellBaseCardProps } from "../pisellBaseCard/types.js";
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/pisellEntityCard/types.d.ts
+/**
+ * 实体卡信息密度等级
+ * - B1: 最小单位，一行
+ * - B2: 主+次级两行
+ * - B5: 次级最多 5 行
+ * - B9: 全部展示
+ */
+type EntityCardDensity = 'B1' | 'B2' | 'B5' | 'B9';
+/**
+ * 实体卡布局方向
+ */
+type EntityCardLayout = 'horizontal' | 'vertical';
+/**
+ * 实体卡宽度模式
+ * - content: 由内容撑满
+ * - full: 撑满父容器
+ * - number: 固定像素宽度
+ */
+type EntityCardWidth = 'content' | 'full' | number;
+/**
+ * 媒体类型：头像 / 缩略图 / 图标
+ */
+type EntityCardMediaType = 'avatar' | 'thumbnail' | 'icon';
+/**
+ * 实体卡媒体配置（头像、缩略图、图标）
+ */
+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;
+}
+/**
+ * 次级文案单项（可带提示）
+ */
+interface EntityCardSecondaryItem {
+  /** 文本内容 */
+  text: string;
+  /** 是否显示提示 icon（如 info-circle） */
+  showTooltip?: boolean;
+}
+/**
+ * 实体卡标签项
+ */
+interface EntityCardTagItem {
+  /** 标签文案 */
+  text: string;
+  /** 可选自定义样式 */
+  style?: CSSProperties;
+}
+/**
+ * 实体卡底部操作项
+ * 支持文本、按钮、图标三种形式，可各自通过 style / className 更改样式
+ */
+interface EntityCardActionItem {
+  /** 展示形式：文本 / 按钮 / 图标 */
+  type: 'text' | 'button' | 'icon';
+  /** 文案（text/button 时显示） */
+  label?: string;
+  /** 图标节点（icon 时单独展示，或 button 旁图标） */
+  icon?: ReactNode;
+  /** 点击回调 */
+  onClick?: () => void;
+  /** 单项内联样式 */
+  style?: CSSProperties;
+  /** 单项类名，用于自定义样式 */
+  className?: string;
+}
+/**
+ * 标签展示位置：与主标题同行 / 次级信息下方
+ */
+type EntityCardTagPosition = 'inline' | 'below';
+/**
+ * PisellEntityCard 组件 Props
+ * 基于 PisellBaseCard，使用结构化配置展示实体信息，支持密度、布局、左滑删除与插槽
+ */
+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;
+}
+//#endregion
+export { EntityCardActionItem, EntityCardDensity, EntityCardLayout, EntityCardMediaConfig, EntityCardMediaType, EntityCardSecondaryItem, EntityCardTagItem, EntityCardTagPosition, EntityCardWidth, PisellEntityCardProps };

package/es/components/pisellExport/PisellExport.d.ts

@@ -0,0 +1,11 @@
+import { PisellExportProps } from "./types.js";
+import React from "react";
+//#region src/components/pisellExport/PisellExport.d.ts
+/**
+ * PisellExport 导出触发器组件
+ *
+ * @description 仅负责 UI 展示与点击回调，不内置导出逻辑；支持 Icon/Button 两种形态与三种尺寸
+ */
+declare function PisellExport(props: PisellExportProps): React.JSX.Element;
+//#endregion
+export { PisellExport };

package/es/components/pisellExport/PisellExport.js

@@ -0,0 +1,44 @@
+import { getText } from "../../locales/index.js";
+import IconFont from "../iconfont/index.js";
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import "./PisellExport.less";
+//#region src/components/pisellExport/PisellExport.tsx
+/** 默认导出图标（download-cloud-01） */
+const DEFAULT_ICON_TYPE = "pisell2-download-cloud-01";
+/**
+* PisellExport 导出触发器组件
+*
+* @description 仅负责 UI 展示与点击回调，不内置导出逻辑；支持 Icon/Button 两种形态与三种尺寸
+*/
+function PisellExport(props) {
+	const { variant = "button", size = "medium", type = "default", disabled = false, label, icon, onExport, className, style } = props;
+	const displayLabel = label !== void 0 ? label : getText("pisell-export-button-label");
+	const iconNode = icon !== void 0 ? icon : /* @__PURE__ */ React.createElement(IconFont, {
+		type: DEFAULT_ICON_TYPE,
+		className: "pisell-export-icon",
+		style: {
+			fontSize: 20,
+			width: 20,
+			height: 20,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}
+	});
+	const handleClick = useCallback((e) => {
+		if (disabled) return;
+		onExport === null || onExport === void 0 || onExport(e);
+	}, [disabled, onExport]);
+	const rootClass = classNames("pisell-export", `pisell-export--${variant}`, `pisell-export--${size}`, `pisell-export--${type}`, disabled && "pisell-export--disabled", className);
+	return /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: rootClass,
+		style,
+		disabled,
+		onClick: handleClick,
+		"aria-label": typeof displayLabel === "string" ? displayLabel : void 0
+	}, /* @__PURE__ */ React.createElement("span", { className: "pisell-export-icon-wrap" }, iconNode), variant === "button" && /* @__PURE__ */ React.createElement("span", { className: "pisell-export-label" }, displayLabel));
+}
+//#endregion
+export { PisellExport };

package/es/components/pisellExport/PisellExport.less

@@ -0,0 +1,141 @@
+// PisellExport - 导出触发器样式
+// 设计规范：边框 #D0D5DD，文案 #344054，主色 #7F56D9，阴影 0px 1px 2px rgba(16,24,40,0.05)，圆角 8px
+
+.pisell-export {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 8px;
+  border: 1px solid #d0d5dd;
+  background: #fff;
+  color: #344054;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+
+  /* 三尺寸统一：图标 20×20px，与文案间距 8px（由根 gap 控制） */
+  .pisell-export-icon-wrap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .pisell-export-icon {
+    font-size: 20px !important;
+    width: 20px;
+    height: 20px;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .pisell-export-label {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  // ----- 尺寸（与 Figma 一致：row1=small, row2=medium, row3=large）-----
+  // Button 形态 padding + 文案 line-height：small 20 / medium 20 / large 24
+  &--small {
+    padding: 8px 14px;
+    .pisell-export-label {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  &--medium {
+    padding: 10px 16px;
+    .pisell-export-label {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  &--large {
+    padding: 12px 20px;
+    .pisell-export-label {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  // Icon 形态：Figma small/medium p-[10px]，large p-[14px]
+  &--icon.pisell-export--small {
+    padding: 10px;
+  }
+  &--icon.pisell-export--medium {
+    padding: 10px;
+  }
+  &--icon.pisell-export--large {
+    padding: 14px;
+  }
+
+  // ----- 视觉类型：primary -----
+  &--primary {
+    border-color: #7f56d9;
+    color: #344054;
+    background: #fff;
+
+    &:hover:not(.pisell-export--disabled) {
+      border-color: #7f56d9;
+      background: #f9f5ff;
+      color: #475467;
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.2);
+    }
+    &:active:not(.pisell-export--disabled) {
+      background: #f4ebff;
+    }
+  }
+
+  &--primary .pisell-export-icon {
+    color: #7f56d9;
+  }
+
+  &--primary:hover:not(.pisell-export--disabled) .pisell-export-icon {
+    color: #7f56d9;
+  }
+
+  // ----- 默认类型 hover / focus / active -----
+  &:hover:not(.pisell-export--disabled):not(.pisell-export--primary) {
+    background: #f2f4f7;
+    border-color: #d0d5dd;
+  }
+  &:focus-visible:not(.pisell-export--primary) {
+    box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.08);
+  }
+  &:active:not(.pisell-export--disabled):not(.pisell-export--primary) {
+    background: #e4e7ec;
+  }
+
+  // ----- 禁用 -----
+  &--disabled {
+    cursor: not-allowed;
+    background: #f2f4f7;
+    border-color: #e4e7ec;
+    color: #98a2b3;
+    box-shadow: none;
+  }
+
+  &--disabled .pisell-export-icon {
+    color: #98a2b3;
+  }
+
+  &--primary.pisell-export--disabled {
+    background: #f9f5ff;
+    border-color: #e9d7fe;
+    color: #98a2b3;
+  }
+  &--primary.pisell-export--disabled .pisell-export-icon {
+    color: #98a2b3;
+  }
+}