@pisell/materials 1.8.41 → 1.8.42

package/lib/components/pisellExport/docs/pisellExport.md

@@ -1,162 +0,0 @@
----
-nav:
-  title: 组件
-  order: 1
-group:
-  title: Data Entry
-  order: 1
-title: PisellExport
-order: 1
-category: atom
----
-
-# PisellExport 导出按钮
-
-导出触发器组件，提供「仅图标」与「图标+文案」两种形态，支持小/中/大三种尺寸与默认、主色、禁用等状态。点击后通过 `onExport` 回调由调用方实现导出请求、下载等逻辑。
-
-## 何时使用
-
-- 表格、列表的导出为 Excel/CSV
-- 报表、数据导出
-- 需要与 PisellImport 搭配使用的导入导出场景
-
-## 代码演示
-
-### 基础用法
-
-默认 Button 形态，点击后触发 `onExport`，由调用方实现导出逻辑。
-
-```tsx
-import React from 'react';
-import { PisellExport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <PisellExport
-      onExport={(e) => {
-        console.log('点击导出', e);
-        // 调用方：请求导出接口、轮询、下载等
-      }}
-    />
-  );
-};
-```
-
-### 仅图标
-
-`variant="icon"` 时只显示图标，不显示文案。
-
-```tsx
-import React from 'react';
-import { PisellExport } from '@pisell/materials';
-
-export default () => {
-  return <PisellExport variant="icon" onExport={() => console.log('export')} />;
-};
-```
-
-### 三种尺寸
-
-`size` 支持 `small`、`medium`、`large`。
-
-```tsx
-import React from 'react';
-import { PisellExport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PisellExport size="small" onExport={() => {}} />
-      <PisellExport size="medium" onExport={() => {}} />
-      <PisellExport size="large" onExport={() => {}} />
-    </div>
-  );
-};
-```
-
-### 默认与主色
-
-`type="default"` 为灰边样式，`type="primary"` 为主色描边样式。
-
-```tsx
-import React from 'react';
-import { PisellExport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PisellExport type="default" onExport={() => {}} />
-      <PisellExport type="primary" onExport={() => {}} />
-    </div>
-  );
-};
-```
-
-### 禁用
-
-`disabled` 为 true 时不可点击。
-
-```tsx
-import React from 'react';
-import { PisellExport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PisellExport disabled onExport={() => {}} />
-      <PisellExport type="primary" disabled onExport={() => {}} />
-    </div>
-  );
-};
-```
-
-### 自定义文案与图标
-
-通过 `label`、`icon` 自定义按钮文案和图标。
-
-```tsx
-import React from 'react';
-import { PisellExport } from '@pisell/materials';
-import { DownloadOutlined } from '@ant-design/icons';
-
-export default () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PisellExport label="导出 Excel" onExport={() => {}} />
-      <PisellExport
-        icon={<DownloadOutlined style={{ fontSize: 20 }} />}
-        label="下载"
-        onExport={() => {}}
-      />
-    </div>
-  );
-};
-```
-
-## API
-
-### PisellExport Props
-
-| 参数      | 说明                     | 类型                                              | 默认值    | 必填 |
-| --------- | ------------------------ | ------------------------------------------------- | --------- | ---- |
-| variant   | 展示形态                 | `'icon' \| 'button'`                             | `'button'` | ❌   |
-| size      | 尺寸                     | `'small' \| 'medium' \| 'large'`                 | `'medium'` | ❌   |
-| type      | 视觉类型                 | `'default' \| 'primary'`                         | `'default'` | ❌   |
-| disabled  | 是否禁用                 | `boolean`                                         | `false`   | ❌   |
-| label     | Button 形态文案           | `ReactNode`                                       | 国际化默认 | ❌   |
-| icon      | 自定义图标               | `ReactNode`                                       | 内置下载图标 | ❌   |
-| onExport  | 点击触发导出             | `(e: React.MouseEvent<HTMLElement>) => void`       | -         | ❌   |
-| className | 自定义类名               | `string`                                          | -         | ❌   |
-| style     | 自定义样式               | `CSSProperties`                                   | -         | ❌   |
-
-## 注意事项
-
-1. **回调必传**：实际使用中建议传入 `onExport`，在回调中实现导出请求、轮询、下载等逻辑，组件本身不内置导出能力
-2. **形态与尺寸**：与 PisellImport 保持一致，支持 `variant="icon"`、`size`、`type`，便于并排使用
-3. **搭配使用**：常与 PisellImport 并排使用，形成导入导出能力
-
-## 相关文档
-
-- [设计文档](./pisellExport.$tab-design.md)
-- [开发文档](./pisellExport.$tab-dev.md)
-- [测试文档](./pisellExport.$tab-test.md)

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

@@ -1,2 +0,0 @@
-import { ExportButtonType, PisellExportProps, SizeType, VariantType } from "./types.js";
-import { PisellExport } from "./PisellExport.js";

package/lib/components/pisellExport/types.d.ts

@@ -1,67 +0,0 @@
-import { CSSProperties, MouseEvent, ReactNode } from "react";
-
-//#region src/components/pisellExport/types.d.ts
-/**
- * 展示形态
- * @description icon：仅图标；button：图标 + 文案
- */
-type VariantType = 'icon' | 'button';
-/**
- * 尺寸
- * @description 小、中、大三种尺寸，对应设计稿 padding 与字体
- */
-type SizeType = 'small' | 'medium' | 'large';
-/**
- * 视觉类型
- * @description default：默认边框/灰字；primary：主色描边或填充
- */
-type ExportButtonType = 'default' | 'primary';
-/**
- * PisellExport 组件 Props
- * @description 导出触发器 UI 组件，仅负责展示与点击回调，不内置导出逻辑
- */
-interface PisellExportProps {
-  /**
-   * 展示形态
-   * @default 'button'
-   */
-  variant?: VariantType;
-  /**
-   * 尺寸
-   * @default 'medium'
-   */
-  size?: SizeType;
-  /**
-   * 视觉类型（默认样式 / 主色样式）
-   * @default 'default'
-   */
-  type?: ExportButtonType;
-  /**
-   * 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Button 形态下的文案，不传时使用国际化默认文案
-   */
-  label?: ReactNode;
-  /**
-   * 自定义图标，不传时使用内置下载图标（download-cloud-01）
-   */
-  icon?: ReactNode;
-  /**
-   * 点击触发导出
-   * @description 由调用方在此回调中实现导出请求、轮询、下载等逻辑
-   */
-  onExport?: (e: MouseEvent<HTMLElement>) => void;
-  /**
-   * 自定义类名
-   */
-  className?: string;
-  /**
-   * 自定义样式
-   */
-  style?: CSSProperties;
-}
-//#endregion
-export { ExportButtonType, PisellExportProps, SizeType, VariantType };

package/lib/components/pisellImport/PisellImport.d.ts

@@ -1,11 +0,0 @@
-import { PisellImportProps } from "./types.js";
-import React from "react";
-//#region src/components/pisellImport/PisellImport.d.ts
-/**
- * PisellImport 导入触发器组件
- *
- * @description 点击后打开文件选择，支持 accept、multiple、maxSize 校验，选择完成后回调 onImport(files)
- */
-declare function PisellImport(props: PisellImportProps): React.JSX.Element;
-//#endregion
-export { PisellImport };

package/lib/components/pisellImport/PisellImport.js

@@ -1,84 +0,0 @@
-const require_runtime = require("../../_virtual/_rolldown/runtime.js");
-const require_index = require("../../locales/index.js");
-const require_index$1 = require("../iconfont/index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
-require("./PisellImport.less");
-//#region src/components/pisellImport/PisellImport.tsx
-/** 默认导入图标（upload-cloud，与 Export 的 download-cloud 对应） */
-const DEFAULT_ICON_TYPE = "pisell2-upload-cloud-01";
-const BYTES_PER_MB = 1024 * 1024;
-/**
-* PisellImport 导入触发器组件
-*
-* @description 点击后打开文件选择，支持 accept、multiple、maxSize 校验，选择完成后回调 onImport(files)
-*/
-function PisellImport(props) {
-	const { variant = "button", size = "medium", type = "default", disabled = false, label, icon, accept, multiple = false, maxSize, onImport, onError, className, style } = props;
-	const inputRef = (0, react.useRef)(null);
-	const displayLabel = label !== void 0 ? label : require_index.getText("pisell-import-button-label");
-	const iconNode = icon !== void 0 ? icon : /* @__PURE__ */ react.default.createElement(require_index$1.default, {
-		type: DEFAULT_ICON_TYPE,
-		className: "pisell-import-icon",
-		style: {
-			fontSize: 20,
-			width: 20,
-			height: 20,
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "center"
-		}
-	});
-	const handleClick = (0, react.useCallback)((e) => {
-		var _inputRef$current;
-		if (disabled) return;
-		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
-	}, [disabled]);
-	const handleFileChange = (0, react.useCallback)((e) => {
-		const { files } = e.target;
-		if (!files || files.length === 0) return;
-		const fileList = Array.from(files);
-		const maxBytes = maxSize != null ? maxSize * BYTES_PER_MB : void 0;
-		if (maxBytes != null) {
-			for (const file of fileList) if (file.size > maxBytes) {
-				const rawMsg = require_index.getText("pisell-import-error-max-size");
-				const message = typeof rawMsg === "string" ? rawMsg.replace(/\{\{maxSize\}\}/g, String(maxSize)) : `文件 ${file.name} 超过 ${maxSize}MB 限制`;
-				onError === null || onError === void 0 || onError({
-					type: "MAX_SIZE",
-					message,
-					file
-				});
-				e.target.value = "";
-				return;
-			}
-		}
-		onImport === null || onImport === void 0 || onImport(fileList, e);
-		e.target.value = "";
-	}, [
-		maxSize,
-		onImport,
-		onError
-	]);
-	const rootClass = (0, classnames.default)("pisell-import", `pisell-import--${variant}`, `pisell-import--${size}`, `pisell-import--${type}`, disabled && "pisell-import--disabled", className);
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("input", {
-		ref: inputRef,
-		type: "file",
-		accept,
-		multiple,
-		onChange: handleFileChange,
-		style: { display: "none" },
-		tabIndex: -1,
-		"aria-hidden": true
-	}), /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		className: rootClass,
-		style,
-		disabled,
-		onClick: handleClick,
-		"aria-label": typeof displayLabel === "string" ? displayLabel : void 0
-	}, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-import-icon-wrap" }, iconNode), variant === "button" && /* @__PURE__ */ react.default.createElement("span", { className: "pisell-import-label" }, displayLabel)));
-}
-//#endregion
-exports.PisellImport = PisellImport;

package/lib/components/pisellImport/PisellImport.less

@@ -1,141 +0,0 @@
-// PisellImport - 导入触发器样式（与 PisellExport 一致）
-// 设计规范：边框 #D0D5DD，文案 #344054，主色 #7F56D9，阴影 0px 1px 2px rgba(16,24,40,0.05)，圆角 8px
-
-.pisell-import {
-  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 */
-  .pisell-import-icon-wrap {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-  }
-
-  .pisell-import-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-import-label {
-    font-weight: 600;
-    white-space: nowrap;
-  }
-
-  // ----- 尺寸（与 PisellExport / Figma 一致）-----
-  // line-height：small 20 / medium 20 / large 24
-  &--small {
-    padding: 8px 14px;
-    .pisell-import-label {
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-
-  &--medium {
-    padding: 10px 16px;
-    .pisell-import-label {
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-
-  &--large {
-    padding: 12px 20px;
-    .pisell-import-label {
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }
-
-  // Icon 形态
-  &--icon.pisell-import--small {
-    padding: 10px;
-  }
-  &--icon.pisell-import--medium {
-    padding: 10px;
-  }
-  &--icon.pisell-import--large {
-    padding: 14px;
-  }
-
-  // ----- 视觉类型：primary -----
-  &--primary {
-    border-color: #7f56d9;
-    color: #344054;
-    background: #fff;
-
-    &:hover:not(.pisell-import--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-import--disabled) {
-      background: #f4ebff;
-    }
-  }
-
-  &--primary .pisell-import-icon {
-    color: #7f56d9;
-  }
-
-  &--primary:hover:not(.pisell-import--disabled) .pisell-import-icon {
-    color: #7f56d9;
-  }
-
-  // ----- 默认类型 hover / focus / active -----
-  &:hover:not(.pisell-import--disabled):not(.pisell-import--primary) {
-    background: #f2f4f7;
-    border-color: #d0d5dd;
-  }
-  &:focus-visible:not(.pisell-import--primary) {
-    box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.08);
-  }
-  &:active:not(.pisell-import--disabled):not(.pisell-import--primary) {
-    background: #e4e7ec;
-  }
-
-  // ----- 禁用 -----
-  &--disabled {
-    cursor: not-allowed;
-    background: #f2f4f7;
-    border-color: #e4e7ec;
-    color: #98a2b3;
-    box-shadow: none;
-  }
-
-  &--disabled .pisell-import-icon {
-    color: #98a2b3;
-  }
-
-  &--primary.pisell-import--disabled {
-    background: #f9f5ff;
-    border-color: #e9d7fe;
-    color: #98a2b3;
-  }
-  &--primary.pisell-import--disabled .pisell-import-icon {
-    color: #98a2b3;
-  }
-}

package/lib/components/pisellImport/docs/pisellImport.$tab-design.md

@@ -1,121 +0,0 @@
----
-title: 设计文档
-order: 2
-category: atom
----
-
-# 资源链接
-
-## 任务链接
-
- 
-
-## Figma链接
-
-Implement this design from Figma.
-@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-96841&m=dev
-
-Implement this design from Figma.
-@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-96860&m=dev
-
-# 1. 组件概述
-
-| **组件名称（英文）** | Import                       |
-|--------------|------------------------------|
-| **组件编号**     | pca\_de\_import\_V1.0        |
-| **组件类型**     | Atom Components              |
-| **组件分类**     | Data Entry                   |
-| **简介**       | Import 用于向数据源写入批量数据，但不关心业务校验 |
-
-# 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模板批量导入商品信息（名称、价格、库存等）</td>
-</tr>
-<tr>
-<td><strong>用户管理</strong></td>
-<td>从HR系统导出的CSV文件中批量导入员工账号信息</td>
-</tr>
-</tbody>
-</table>
-
-# 5. UI 设计
-
-## 5.1 展示样式
-
-Import 目前分为两种样式：
-
-* Icon 样式​​：显示样式只有一个icon
-
-* Button 样式​​：显示内容为icon加文本
-
-| ![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ZWZhMThjZjIxNDU5NDI3OWYxMGU4YzU5YTJjZmM2MWJfdGNuZDNqV2pVallzVk83bU1vbzdOSE8wUTBoUkpjNlpfVG9rZW46RUNlSWJtQVdHb2NXVEd4NDNGQmNHTERqbnZkXzE3NzIwOTA2MjU6MTc3MjA5NDIyNV9WNA) | ![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NGQ1MGU1NWIwNDUyMWQyZTE4YmI3ZjZlYWZlMDYwNThfWk9UUXNObm13SU1EWnVyN2FMWGV2Rnowa25BRkRkQzhfVG9rZW46SWNncmJ3UzZ4b1MxOUd4cG9UYWNWWFd1bjllXzE3NzIwOTA2MjU6MTc3MjA5NDIyNV9WNA) |
-|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-
-* 给到此组件的六个状态（默认样式、鼠标悬浮、focused、激活、禁用、激活禁用）样式，支持更改六个状态下的样式
-
-* 同时组件有小、中、大三中大小可供选择
-
-Implement this design from Figma.
-
-@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-96693\&m=dev
-
-![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=Yjc0Zjc5YTQ3MzhjNmViM2EzNzhkZGQ4NmM5YTBjZTVfWkRHcjFqdjUwVmgyNUowRlVhbzMwUk1RMlR5R1hJWU5fVG9rZW46UzBkbmJMUndBbzhsNDR4TnR0TGNvdXFxbjllXzE3NzIwOTA2MjU6MTc3MjA5NDIyNV9WNA)
-
-![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ODExYjU5NjYwMGE3N2Q1NTQ5OTUzNjlmMGI3ZTNiN2NfNDhzdHJZcmpPZmgwUlBTNTQ2SjY5dFdsZ3RhbFllZHdfVG9rZW46UmtQNmJZRHF6b2NEcGh4MjQwc2NLUExCbjVmXzE3NzIwOTA2MjU6MTc3MjA5NDIyNV9WNA)
-
-## 5.2 **视觉设计规范（需要主题模块完成）**
-
-### 5.2.1 颜色规范
-
-### 5.2.2 尺寸规范
-
-### 5.2.3 间距规范
-
-# 6. 配置项
-
-## 6.1 样式自定义
-
-* 按钮的外观可以自定义样式，包括背景色、边框、padding、gap、阴影
-
-* 按钮内的icon可以自定义样式，包括icon的切换、icon大小、颜色
-
-* 按钮内文本的样式可自定义，包括文本内容、文本大小、颜色、粗细
-
-* 按钮的六种不同状态的样式也可自定义
-
-## 6.2 功能配置
-
-* 可以选择按钮的大小
-
-* 可以切换按钮的样式
-
-* 可控制接受的文件类型
-
-* 可控制导入的文件最大文件大小（MB）
-
-# 7. 示例
-