@pisell/materials 1.0.1048 → 1.0.1050

package/es/components/pisellDropSort/components/SortableItem/index.js

@@ -1,9 +1,9 @@
 import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
-import button_default from "../../../button/index.js";
 import { _objectWithoutProperties } from "../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
+import button_default from "../../../button/index.js";
 import icon_default from "../../../icon/index.js";
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import DotsSix from "@pisell/icon/es/DotsSix";
 import "./index.less";
 

package/es/components/pisellDropdown/index.js

@@ -1,7 +1,7 @@
 import dropdown_default from "../dropdown/index.js";
+import React from "react";
 import { Menu } from "antd";
 import classNames from "classnames";
-import React from "react";
 import "./index.less";
 
 //#region src/components/pisellDropdown/index.tsx

package/es/components/pisellEmail/components/EditView.js

@@ -2,9 +2,9 @@ import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.108.0/
 import { validateEmail, validateEmailDomain, validateEmailStrict } from "../utils/emailValidator.js";
 import { COMMON_EMAIL_DOMAINS } from "../constants/emailDomains.js";
 import { getEmailSuggestions } from "../utils/domainSuggestions.js";
-import { AutoComplete, Input } from "antd";
 import React, { useMemo, useState } from "react";
 import { useTextInputState } from "@pisell/utils";
+import { AutoComplete, Input } from "antd";
 import { MailOutlined } from "@ant-design/icons";
 
 //#region src/components/pisellEmail/components/EditView.tsx

package/es/components/pisellEmail/components/ReadOnlyView.js

@@ -1,6 +1,6 @@
 import { handleEmailClick, hideEmailDomain, maskEmailDomain } from "../utils/emailHelper.js";
-import { Button, Space, Typography } from "antd";
 import React from "react";
+import { Button, Space, Typography } from "antd";
 import { MailOutlined } from "@ant-design/icons";
 
 //#region src/components/pisellEmail/components/ReadOnlyView.tsx

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

@@ -1,6 +1,6 @@
 import { PisellContextType } from "../pisell-config-provider/context.js";
-import { EmptyProps } from "antd";
 import React from "react";
+import { EmptyProps } from "antd";
 import "./index.less";
 
 //#region src/components/pisellEmpty/index.d.ts

package/es/components/pisellEmpty/index.js

@@ -1,9 +1,9 @@
+import { getText } from "../../locales/index.js";
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
 import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
-import { getText } from "../../locales/index.js";
+import React from "react";
 import { Empty } from "antd";
 import classNames from "classnames";
-import React from "react";
 import Inbox01 from "@pisell/icon/es/Inbox01";
 import "./index.less";
 

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

@@ -0,0 +1,13 @@
+import { PisellExportProps } from "./types.js";
+import React from "react";
+import "./PisellExport.less";
+
+//#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,46 @@
+import { getText } from "../../locales/index.js";
+import iconfont_default 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_default, {
+		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;
+  }
+}

package/es/components/pisellExport/docs/pisellExport.$tab-design.md

@@ -0,0 +1,116 @@
+# 资源链接
+
+## 任务链接
+
+ 
+
+## Figma链接
+
+Implement this design from Figma.
+@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-97136&m=dev
+Implement this design from Figma.
+@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-97155&m=dev
+
+# 1. 组件概述
+
+| **组件名称（英文）** | Export                                                                        |
+|--------------|-------------------------------------------------------------------------------|
+| **组件编号**     | pca\_de\_export\_V1.0                                                         |
+| **组件类型**     | Atom Components                                                               |
+| **组件分类**     | Data Entry                                                                    |
+| **简介**       | 提供数据导出能力，将结构化数据转换为多种格式（如Excel、CSV、PDF）的文件，支持同步和异步两种导出模式，满足从简单报表到大数据量导出的各类业务场景 |
+
+# 2. 版本
+
+| **版本**   | 1.0  |
+|----------|------|
+| **更新简介** | 首次发布 |
+
+# 3. 组件设计目的
+
+* 简化数据输出流程
+
+* 保障导出性能与可靠性
+
+* 提升用户体验
+
+# 4. 适用场景
+
+<table>
+<thead>
+<tr>
+<th><h4>场景</h4></th>
+<th><h4>示例</h4></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><strong>销售管理</strong></td>
+<td>本季度销售业绩报表导出为Excel，包含多Sheet页和复杂样式</td>
+</tr>
+<tr>
+<td><strong>用户管理</strong></td>
+<td>将筛选后的用户列表导出为CSV文件，用于邮件群发或数据分析</td>
+</tr>
+</tbody>
+</table>
+
+# 5. UI 设计
+
+## 5.1 展示样式
+
+Export 目前分为两种样式：
+
+* Icon 样式​​：显示样式只有一个icon
+
+* Button 样式​​：显示内容为icon加文本
+
+| ![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=Y2E5NGEyNjdiMWRlYzQzZmE5MjNmNmZiZTdkNGIxYzZfbjk4TDZmdVp4MjZoRWdMdXl3Y0kxMmNsU1NTamxoYW9fVG9rZW46SFdaZWJZdDkzb0RuZk94c2FsTGNXTE0wbjhjXzE3NzIwMDQzMTM6MTc3MjAwNzkxM19WNA) | ![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ODI0MmI3MWY2NmU3NTlhYWY4OWMzNWNjNTdmMTFlMmFfc0FuY0NVVXdQTnlCWkRmcDhsRXo1ckR0bjY0MlhTa1JfVG9rZW46SWhxQmJOc1VLb0xFS0x4MWpxM2NkalN0bnpmXzE3NzIwMDQzMTM6MTc3MjAwNzkxM19WNA) |
+|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+
+* 给到此组件的六个状态（默认样式、鼠标悬浮、focused、激活、禁用、激活禁用）样式，支持更改六个状态下的样式
+
+* 同时组件有小、中、大三中大小可供选择
+
+Implement this design from Figma.
+
+@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-96989\&m=dev
+
+![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=M2M0MDc2NTJjMjZiYTI4MDE1MzE3MzYzNjY2NGNlMDNfdk1sa3ZXNXlsUk1ZMnE3d0FFRDJqandpdUhzcGZLWXlfVG9rZW46RGJtWWJLeFRsb3ViVXV4ODVxbmNSdk5NbnJiXzE3NzIwMDQzMTM6MTc3MjAwNzkxM19WNA)
+
+![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NTIzZDE1NTYzOTc0NWQ0OWE0NWE3OTlmNjJlMGM1MDFfSnRuRWg4Sm1Bd1JscDY4TU00ZlgyaW84a3U3R3NYSGxfVG9rZW46VzVVMWJKd1l2b1hnVHJ4NjgxT2NCckRhbjNiXzE3NzIwMDQzMTM6MTc3MjAwNzkxM19WNA)
+
+## 5.2 **视觉设计规范（需要主题模块完成）**
+
+### 5.2.1 颜色规范
+
+### 5.2.2 尺寸规范
+
+### 5.2.3 间距规范
+
+# 6. 配置项
+
+## 6.1 样式自定义
+
+* 按钮的外观可以自定义样式，包括背景色、边框、padding、gap、阴影
+
+* 按钮内的icon可以自定义样式，包括icon的切换、icon大小、颜色
+
+* 按钮内文本的样式可自定义，包括文本内容、文本大小、颜色、粗细
+
+* 按钮的六种不同状态的样式也可自定义
+
+## 6.2 功能配置
+
+* 可以选择按钮的大小
+
+* 可以切换按钮的样式
+
+* 可控制导出的格式
+
+* 可控制轮询间隔
+
+* 是否支持预览，默认不支持
+
+# 7. 示例
+

package/es/components/pisellExport/docs/pisellExport.$tab-dev.md

@@ -0,0 +1,132 @@
+---
+title: 开发文档
+order: 3
+category: atom
+---
+
+# PisellExport 开发文档
+
+## 1. 基本信息
+
+| 项目     | 内容                      |
+| -------- | ------------------------- |
+| 组件名称 | PisellExport              |
+| 组件版本 | 1.0.0                     |
+| 组件分类 | 原子组件 (atom) / Data Entry |
+| 技术栈   | React + TypeScript + Less |
+| 依赖组件 | 无（可选复用 antd Button 或仅用原生语义） |
+
+## 2. 组件描述
+
+PisellExport 是导出功能的 UI 触发器组件，提供「仅图标」与「图标+文案」两种展示形态，支持小/中/大三种尺寸与默认、主色、禁用等状态。**阶段一仅做 UI 与回调**：不内置导出逻辑，点击后通过 `onExport` 回调由调用方完成导出请求、轮询、下载等。
+
+**核心特点**：
+
+- 两种展示形态：Icon 样式、Button 样式（icon + 文案）
+- 六种交互状态样式：默认、hover、focused、激活、禁用、激活态禁用
+- 三种尺寸：small / medium / large
+- 样式与设计稿一致（Figma），支持 className / style 扩展
+
+## 3. 需求点罗列
+
+### 3.1 UI 展示
+
+- [x] 支持 Icon 样式（仅图标）
+- [x] 支持 Button 样式（图标 + 文案）
+- [x] 支持小、中、大三种尺寸
+- [x] 六种状态样式：默认、悬浮、focused、激活、禁用、激活禁用
+- [x] 默认图标为 download-cloud-02 语义（可由 icon 覆盖）
+
+### 3.2 功能（阶段一）
+
+- [x] 点击触发回调 `onExport`，不内置导出逻辑
+- [x] 支持 `disabled` 禁用
+- [x] 支持自定义文案 `label`（Button 形态）
+- [x] 支持自定义图标 `icon`
+
+### 3.3 扩展
+
+- [x] 支持 `className`、`style`
+- [ ] 六态样式深度自定义（预留，后续可加）
+
+## 4. 组件 API
+
+### 4.1 Props 定义
+
+| 属性       | 类型        | 默认值    | 必填 | 说明 |
+| ---------- | ----------- | --------- | ---- | ---- |
+| variant    | VariantType | 'button'  | 否   | 展示形态：icon / button |
+| size       | SizeType    | 'medium'  | 否   | 尺寸：small / medium / large |
+| type       | ExportButtonType | 'default' | 否 | 视觉类型：default / primary |
+| disabled   | boolean     | false     | 否   | 是否禁用 |
+| label      | ReactNode   | getText 或 'Export' | 否 | Button 形态文案 |
+| icon       | ReactNode   | 内置下载图标 | 否 | 自定义图标 |
+| onExport   | (e: MouseEvent) => void | - | 否 | 点击触发导出，由调用方实现 |
+| className  | string      | -         | 否   | 自定义类名 |
+| style      | CSSProperties | -       | 否   | 自定义样式 |
+
+### 4.2 类型定义
+
+```
+type VariantType = 'icon' | 'button';
+type SizeType = 'small' | 'medium' | 'large';
+type ExportButtonType = 'default' | 'primary';
+```
+
+## 5. 组件模块拆解
+
+```
+pisellExport/
+├── index.tsx                      # 组件导出入口
+├── PisellExport.tsx               # 组件核心实现
+├── PisellExport.less              # 组件样式（六态、三尺寸）
+├── types.ts                       # TypeScript 类型定义
+└── docs/
+    ├── pisellExport.$tab-design.md
+    └── pisellExport.$tab-dev.md
+```
+
+### 5.1 模块职责
+
+| 模块             | 职责 |
+| ---------------- | ---- |
+| PisellExport.tsx | 根据 variant 渲染 icon 或 icon+label，绑定 onExport，应用 size/type/disabled 类名与样式 |
+| PisellExport.less| 小/中/大尺寸 padding、gap；default/primary 及 hover/focus/active/disabled 状态样式 |
+| types.ts         | VariantType、SizeType、ExportButtonType、PisellExportProps |
+
+## 6. 实现方案
+
+### 6.1 结构
+
+- 根节点为 `button` 或 `span`（可访问性用 button），避免在禁用时触发点击。
+- Icon 形态：单图标容器，尺寸由 size 控制 padding（设计稿 Icon 小 10px、中 10px、大 14px）。
+- Button 形态：图标 + label，gap 8px，padding 随 size（小 14×8、中 16×10、大 20×12）。
+
+### 6.2 样式
+
+- 使用 Less，类名前缀 `.pisell-export-`。
+- 尺寸与设计稿一致：small 14px/8px，medium 16px/10px，large 20px/12px；图标 24px。
+- 颜色：default 边框 #D0D5DD、文案 #344054；primary 主色 #7F56D9、背景 #F9F5FF 等；禁用灰化。
+- 阴影：0px 1px 2px rgba(16,24,40,0.05)；圆角 8px。
+
+### 6.3 图标
+
+- 若无 `icon` 传入，使用项目内已有下载图标或占位 SVG（download-cloud-02 语义）；若有则渲染 `icon`。
+
+### 6.4 回调
+
+- 点击时调用 `onExport?.(e)`，不阻止默认、不内置下载/请求逻辑。
+
+## 7. 组成部分与引用关系
+
+```
+PisellExport
+├── 根节点 (button/span)
+│   ├── 图标区域 (传入 icon 或默认图标)
+│   └── [Button 形态] 文案 (label)
+└── 无子组件引用，仅使用项目 locales（getText）与样式
+```
+
+---
+
+**阶段一不包含**：导出格式选择、轮询间隔、预览能力、内置请求逻辑；均由调用方在 `onExport` 中实现。

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

@@ -0,0 +1,61 @@
+---
+title: 测试文档
+order: 4
+category: atom
+---
+
+# PisellExport 测试文档
+
+## 测试策略
+
+PisellExport 为导出触发器 UI 组件，阶段一仅做 UI 与回调。测试覆盖：
+
+1. **基础渲染**：默认及不同 variant/size/type 下的 DOM 与类名
+2. **Props 透传**：label、disabled、className、style 等是否生效
+3. **交互**：点击触发 onExport、disabled 时不触发
+4. **边界**：无 onExport 时点击不报错
+
+## 测试用例
+
+### 1. 基础渲染
+
+| 用例编号 | 描述 | 预期 |
+| -------- | ---- | ---- |
+| R.1 | 默认渲染（variant=button） | 根节点为 button，包含图标与默认文案（getText 或「导出」） |
+| R.2 | variant=icon | 仅渲染图标，无文案节点 |
+| R.3 | size=small/medium/large | 根节点分别带类名 pisell-export--small/medium/large |
+| R.4 | type=default/primary | 根节点分别带类名 pisell-export--default/primary |
+| R.5 | disabled=true | 根节点带 pisell-export--disabled，button 的 disabled 为 true |
+
+### 2. Props
+
+| 用例编号 | 描述 | 预期 |
+| -------- | ---- | ---- |
+| P.1 | 传入 label | 文案区域显示传入的 label |
+| P.2 | 传入 icon | 使用传入的 icon 节点，不显示默认图标 |
+| P.3 | 传入 className | 根节点 class 包含该 className |
+| P.4 | 传入 style | 根节点应用对应内联样式 |
+
+### 3. 交互
+
+| 用例编号 | 描述 | 预期 |
+| -------- | ---- | ---- |
+| I.1 | 点击且未 disabled | 调用 onExport 一次，并传入事件对象 |
+| I.2 | disabled 时点击 | 不调用 onExport |
+| I.3 | 未传入 onExport 时点击 | 不报错，不抛错 |
+
+### 4. 人工测试点（Storybook）
+
+- 各尺寸、各类型在 Chrome 下视觉与设计稿一致（边框、圆角、阴影、主色）
+- hover / focus / active 状态样式正常
+- 禁用态灰化、不可点击
+
+---
+
+## bug 汇总
+
+（人工测试阶段将发现的 bug 记录于此）
+
+| 日期 | 描述 | 状态 |
+| ---- | ---- | ---- |
+|      |      |      |