@pisell/materials 1.8.41 → 1.8.42

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

@@ -1,137 +0,0 @@
----
-title: 开发文档
-order: 3
-category: atom
----
-
-# PisellImport 开发文档
-
-## 1. 基本信息
-
-| 项目     | 内容                      |
-| -------- | ------------------------- |
-| 组件名称 | PisellImport              |
-| 组件分类 | 原子组件 (atom) / Data Entry |
-| 技术栈   | React + TypeScript + Less |
-| 依赖组件 | IconFont（内置图标）、input[type=file] 隐藏触发 |
-
-## 2. 组件描述
-
-PisellImport 是导入功能的 UI 触发器组件，提供「仅图标」与「图标+文案」两种展示形态，支持小/中/大三种尺寸与默认、主色、禁用等状态。点击后打开系统文件选择框，可选择文件并做类型（accept）、大小（maxSize）校验，通过后通过 `onImport(files)` 回调将文件列表交给调用方处理上传或解析；校验失败时通过 `onError` 回调通知。
-
-**核心特点**：
-
-- 两种展示形态：Icon 样式、Button 样式（icon + 文案）
-- 与 PisellExport 一致的六种交互状态样式与三种尺寸
-- 隐藏的 `<input type="file">` 由按钮点击触发，支持 accept、multiple、maxSize 校验
-- 不内置上传/解析逻辑，由调用方在 onImport 中实现
-
-## 3. 需求点罗列
-
-### 3.1 UI 展示
-
-- [x] 支持 Icon 样式（仅图标）
-- [x] 支持 Button 样式（图标 + 文案）
-- [x] 支持小、中、大三种尺寸
-- [x] 六种状态样式：默认、悬浮、focused、激活、禁用、激活禁用
-- [x] 默认图标为 upload-cloud-01 语义（可由 icon 覆盖）
-
-### 3.2 功能
-
-- [x] 点击触发隐藏 input[type=file]，选择文件后回调 `onImport(files, e)`
-- [x] 支持 `accept` 限制文件类型
-- [x] 支持 `multiple` 多选
-- [x] 支持 `maxSize`（MB）单文件大小校验，超限时调用 `onError` 不调用 onImport
-- [x] 支持 `disabled` 禁用
-- [x] 支持自定义文案 `label`、自定义图标 `icon`
-
-### 3.3 扩展
-
-- [x] 支持 `className`、`style`
-
-## 4. 组件 API
-
-### 4.1 Props 定义
-
-| 属性       | 类型        | 默认值    | 必填 | 说明 |
-| ---------- | ----------- | --------- | ---- | ---- |
-| variant    | VariantType | 'button'  | 否   | 展示形态：icon / button |
-| size       | SizeType    | 'medium'  | 否   | 尺寸：small / medium / large |
-| type       | ImportButtonType | 'default' | 否 | 视觉类型：default / primary |
-| disabled   | boolean     | false     | 否   | 是否禁用 |
-| label      | ReactNode   | getText 或默认导入文案 | 否 | Button 形态文案 |
-| icon       | ReactNode   | 内置上传图标 | 否 | 自定义图标 |
-| accept     | string      | -         | 否   | 接受的文件类型，如 ".xlsx,.csv" |
-| multiple   | boolean     | false     | 否   | 是否多选文件 |
-| maxSize    | number      | -         | 否   | 单文件最大体积（MB），超限触发 onError |
-| onImport   | (files: File[], e: ChangeEvent) => void | - | 否 | 选择并校验通过后回调 |
-| onError    | (error: { type: 'MAX_SIZE'; message: string; file: File }) => void | - | 否 | 校验失败时回调（如超限） |
-| className  | string      | -         | 否   | 自定义类名 |
-| style      | CSSProperties | -       | 否   | 自定义样式 |
-
-### 4.2 类型定义
-
-```
-type VariantType = 'icon' | 'button';
-type SizeType = 'small' | 'medium' | 'large';
-type ImportButtonType = 'default' | 'primary';
-```
-
-## 5. 组件模块拆解
-
-```
-pisellImport/
-├── index.tsx                      # 组件导出入口
-├── PisellImport.tsx               # 组件核心实现（按钮 + 隐藏 input）
-├── PisellImport.less              # 组件样式（与 Export 一致）
-├── types.ts                       # TypeScript 类型定义
-└── docs/
-    ├── pisellImport.md
-    ├── pisellImport.$tab-design.md
-    ├── pisellImport.$tab-dev.md
-    └── pisellImport.$tab-test.md
-```
-
-### 5.1 模块职责
-
-| 模块             | 职责 |
-| ---------------- | ---- |
-| PisellImport.tsx | 渲染 button + 隐藏 input；点击 button 触发 input.click()；onChange 中做 maxSize 校验，通过则 onImport(fileList, e)，超限则 onError；应用 variant/size/type/disabled 类名 |
-| PisellImport.less| 与 PisellExport 一致的尺寸、状态样式，类名前缀 `.pisell-import` |
-| types.ts         | VariantType、SizeType、ImportButtonType、PisellImportProps |
-
-## 6. 实现方案
-
-### 6.1 结构
-
-- 根为 Fragment：内层为隐藏的 `<input type="file" ref={inputRef} accept={accept} multiple={multiple} onChange={handleFileChange} />`，以及可见的 `<button>`。
-- 点击 button 时调用 `inputRef.current?.click()` 打开文件选择。
-- Button 形态：图标 + label，类名 `pisell-import`、`pisell-import--${variant}`、`pisell-import--${size}`、`pisell-import--${type}`，disabled 时 `pisell-import--disabled`。
-
-### 6.2 文件选择与校验
-
-- `handleFileChange`：从 `e.target.files` 取 `File[]`，若存在 `maxSize` 则遍历校验，任一文件超过 `maxSize * 1024 * 1024` 字节则调用 `onError({ type: 'MAX_SIZE', message, file })`，清空 input.value 并 return；否则调用 `onImport(fileList, e)`，再清空 input.value。
-- `message` 使用 locales `getText('pisell-import-error-max-size')`，支持 `{{maxSize}}` 占位替换为数字。
-
-### 6.3 样式
-
-- 使用 Less，类名前缀 `.pisell-import`，与 PisellExport 设计一致：边框 #D0D5DD、文案 #344054、主色、圆角 8px、阴影等。
-- 尺寸：small 8px 14px、medium 10px 16px、large 12px 20px；图标 20×20px，gap 8px。
-
-### 6.4 图标与文案
-
-- 无 `icon` 时使用 IconFont `pisell2-upload-cloud-01`；无 `label` 时使用 `getText('pisell-import-button-label')`。
-
-## 7. 组成部分与引用关系
-
-```
-PisellImport
-├── <input type="file" />（隐藏，ref 触发）
-└── <button>
-    ├── 图标区域（icon 或 IconFont upload-cloud-01）
-    └── [Button 形态] 文案 (label / getText)
-```
-
----
-
-**不包含**：上传请求、解析 Excel/CSV、进度条等；均由调用方在 `onImport` 中实现。

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

@@ -1,69 +0,0 @@
----
-title: 测试文档
-order: 4
-category: atom
----
-
-# PisellImport 测试文档
-
-## 测试策略
-
-PisellImport 为导入触发器 UI 组件，点击打开文件选择，支持 accept、multiple、maxSize 校验，通过后回调 onImport，超限回调 onError。测试覆盖：
-
-1. **基础渲染**：默认及不同 variant/size/type 下的 DOM、类名与隐藏 input 的 accept/multiple
-2. **Props 透传**：label、icon、disabled、className、style、accept、multiple 是否生效
-3. **交互**：点击触发 input 选择、选择文件后 onImport 被调用且参数正确、maxSize 超限时 onError 被调用且不调用 onImport、disabled 时不触发
-4. **边界**：无 onImport/onError 时选择文件不报错；多选时 files 数量正确
-
-## 测试用例
-
-### 1. 基础渲染
-
-| 用例编号 | 描述 | 预期 |
-| -------- | ---- | ---- |
-| R.1 | 默认渲染（variant=button） | 根节点为 button，包含图标与默认文案（getText 或「导入」）；存在隐藏的 input[type=file] |
-| R.2 | variant=icon | 仅渲染图标，无文案节点 |
-| R.3 | size=small/medium/large | 根节点分别带类名 pisell-import--small/medium/large |
-| R.4 | type=default/primary | 根节点分别带类名 pisell-import--default/primary |
-| R.5 | disabled=true | 根节点带 pisell-import--disabled，button 的 disabled 为 true |
-| R.6 | 传入 accept | input 的 accept 属性为传入值（如 ".xlsx,.csv"） |
-| R.7 | multiple=true | input 的 multiple 为 true |
-
-### 2. Props
-
-| 用例编号 | 描述 | 预期 |
-| -------- | ---- | ---- |
-| P.1 | 传入 label | 文案区域显示传入的 label |
-| P.2 | 传入 icon | 使用传入的 icon 节点，不显示默认图标 |
-| P.3 | 传入 className | 根 button 的 class 包含该 className |
-| P.4 | 传入 style | 根 button 应用对应内联样式 |
-
-### 3. 交互
-
-| 用例编号 | 描述 | 预期 |
-| -------- | ---- | ---- |
-| I.1 | 点击且未 disabled | 触发 input 的 click（可通过 ref 或模拟用户选择文件后触发 onChange） |
-| I.2 | 选择文件且未设 maxSize | 调用 onImport 一次，第一个参数为 File[]，第二个为 ChangeEvent |
-| I.3 | 选择文件且 multiple=true | onImport 收到的 files 长度与选择数量一致 |
-| I.4 | 设置 maxSize，选择文件均未超限 | 调用 onImport，不调用 onError |
-| I.5 | 设置 maxSize，其中一文件超限 | 调用 onError 一次，参数 type 为 'MAX_SIZE'，含 message、file；不调用 onImport；input value 被清空 |
-| I.6 | disabled 时点击 | 不触发 input.click（或点击无效） |
-| I.7 | 未传入 onImport 时选择文件 | 不报错，不抛错 |
-| I.8 | 未传入 onError 时 maxSize 超限 | 不报错，不调用 onImport |
-
-### 4. 人工测试点（Storybook）
-
-- 各尺寸、各类型在 Chrome 下视觉与设计稿一致，与 PisellExport 对齐
-- hover / focus / active 状态样式正常
-- 禁用态灰化、不可点击
-- 点击后系统文件选择框弹出，选择文件后回调行为符合预期；超限时仅 onError、不 onImport
-
----
-
-## bug 汇总
-
-（人工测试阶段将发现的 bug 记录于此）
-
-| 日期 | 描述 | 状态 |
-| ---- | ---- | ---- |
-|      |      |      |

package/lib/components/pisellImport/docs/pisellImport.md

@@ -1,174 +0,0 @@
----
-nav:
-  title: 组件
-  order: 1
-group:
-  title: Data Entry
-  order: 1
-title: PisellImport
-order: 2
-category: atom
----
-
-# PisellImport 导入按钮
-
-导入触发器组件，样式与 PisellExport 一致，支持「仅图标」与「图标+文案」两种形态、三种尺寸。点击后打开系统文件选择框，可选择文件并做大小校验，通过后通过 `onImport(files)` 回调将文件列表交给调用方处理上传或解析。
-
-## 何时使用
-
-- 批量导入 Excel/CSV 等文件
-- 与 PisellExport 搭配的导入导出能力
-- 需要限制文件类型、大小或多选的导入场景
-
-## 代码演示
-
-### 基础用法
-
-点击后打开文件选择，选择完成后在 `onImport` 中拿到 `File[]`，由调用方实现上传或解析。
-
-```tsx
-import React from 'react';
-import { PisellImport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <PisellImport
-      onImport={(files) => {
-        console.log('已选文件', files);
-        // 调用方：上传、解析等
-      }}
-    />
-  );
-};
-```
-
-### 限制文件类型与大小
-
-通过 `accept` 限制可选类型，通过 `maxSize`（MB）限制单文件大小；超出时触发 `onError`。
-
-```tsx
-import React from 'react';
-import { PisellImport } from '@pisell/materials';
-import { message } from 'antd';
-
-export default () => {
-  return (
-    <PisellImport
-      accept=".xlsx,.xls,.csv"
-      maxSize={10}
-      onImport={(files) => {
-        message.success(`已选择 ${files.length} 个文件`);
-      }}
-      onError={({ message: msg }) => {
-        message.error(msg);
-      }}
-    />
-  );
-};
-```
-
-### 多选文件
-
-`multiple={true}` 时允许一次选择多个文件。
-
-```tsx
-import React from 'react';
-import { PisellImport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <PisellImport
-      multiple
-      label="选择多个文件"
-      onImport={(files) => {
-        console.log('已选', files.length, '个文件', files.map((f) => f.name));
-      }}
-    />
-  );
-};
-```
-
-### 仅图标与不同尺寸
-
-与 PisellExport 相同，支持 `variant="icon"` 和 `size`。
-
-```tsx
-import React from 'react';
-import { PisellImport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PisellImport variant="icon" onImport={() => {}} />
-      <PisellImport size="small" onImport={() => {}} />
-      <PisellImport size="large" type="primary" onImport={() => {}} />
-    </div>
-  );
-};
-```
-
-### 与导出并排
-
-常与 PisellExport 一起使用。
-
-```tsx
-import React from 'react';
-import { PisellImport, PisellExport } from '@pisell/materials';
-
-export default () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PisellImport
-        accept=".xlsx,.csv"
-        maxSize={10}
-        onImport={(files) => console.log('导入', files)}
-        onError={({ message: msg }) => console.error(msg)}
-      />
-      <PisellExport onExport={() => console.log('导出')} />
-    </div>
-  );
-};
-```
-
-## API
-
-### PisellImport Props
-
-| 参数      | 说明                         | 类型                                                                 | 默认值    | 必填 |
-| --------- | ---------------------------- | -------------------------------------------------------------------- | --------- | ---- |
-| variant   | 展示形态                     | `'icon' \| 'button'`                                                | `'button'` | ❌   |
-| size      | 尺寸                         | `'small' \| 'medium' \| 'large'`                                   | `'medium'` | ❌   |
-| type      | 视觉类型                     | `'default' \| 'primary'`                                            | `'default'` | ❌   |
-| disabled  | 是否禁用                     | `boolean`                                                            | `false`   | ❌   |
-| label     | Button 形态文案               | `ReactNode`                                                          | 国际化默认 | ❌   |
-| icon      | 自定义图标                   | `ReactNode`                                                          | 内置导入图标 | ❌   |
-| accept    | 接受的文件类型               | `string`（如 `.xlsx,.csv`）                                          | -         | ❌   |
-| multiple  | 是否多选                     | `boolean`                                                            | `false`   | ❌   |
-| maxSize   | 单文件最大体积（MB）         | `number`                                                             | -         | ❌   |
-| onImport  | 选择文件并校验通过后回调     | `(files: File[], e: React.ChangeEvent<HTMLInputElement>) => void`   | -         | ❌   |
-| onError   | 校验失败时回调（如文件过大） | `(error: { type: 'MAX_SIZE'; message: string; file: File }) => void` | -         | ❌   |
-| className | 自定义类名                   | `string`                                                             | -         | ❌   |
-| style     | 自定义样式                   | `CSSProperties`                                                      | -         | ❌   |
-
-### onError 参数
-
-当 `maxSize` 校验不通过时，`onError` 会收到：
-
-- `type`: `'MAX_SIZE'`
-- `message`: 提示文案（含体积限制，支持国际化）
-- `file`: 超限的 File 对象
-
-可在回调中使用 `message.error(error.message)` 等方式提示用户。
-
-## 注意事项
-
-1. **回调必传**：实际使用中建议传入 `onImport`，否则选择文件后无法处理
-2. **文件校验**：需限制类型时传 `accept`，需限制大小时传 `maxSize` 并实现 `onError` 提示用户
-3. **多选**：`multiple={true}` 时一次可选多个文件，`onImport` 收到的 `files` 为数组
-4. **搭配使用**：常与 PisellExport 并排使用，形成导入导出能力
-
-## 相关文档
-
-- [设计文档](./pisellImport.$tab-design.md)
-- [开发文档](./pisellImport.$tab-dev.md)
-- [测试文档](./pisellImport.$tab-test.md)

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

@@ -1,2 +0,0 @@
-import { ImportButtonType, PisellImportProps, SizeType, VariantType } from "./types.js";
-import { PisellImport } from "./PisellImport.js";

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

@@ -1,89 +0,0 @@
-import { CSSProperties, ReactNode } from "react";
-
-//#region src/components/pisellImport/types.d.ts
-/**
- * 展示形态
- * @description icon：仅图标；button：图标 + 文案
- */
-type VariantType = 'icon' | 'button';
-/**
- * 尺寸
- * @description 小、中、大三种尺寸，对应设计稿 padding 与字体
- */
-type SizeType = 'small' | 'medium' | 'large';
-/**
- * 视觉类型
- * @description default：默认边框/灰字；primary：主色描边或填充
- */
-type ImportButtonType = 'default' | 'primary';
-/**
- * PisellImport 组件 Props
- * @description 导入触发器 UI 组件，仅负责展示与点击回调，不内置导入逻辑
- */
-interface PisellImportProps {
-  /**
-   * 展示形态
-   * @default 'button'
-   */
-  variant?: VariantType;
-  /**
-   * 尺寸
-   * @default 'medium'
-   */
-  size?: SizeType;
-  /**
-   * 视觉类型（默认样式 / 主色样式）
-   * @default 'default'
-   */
-  type?: ImportButtonType;
-  /**
-   * 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Button 形态下的文案，不传时使用国际化默认文案
-   */
-  label?: ReactNode;
-  /**
-   * 自定义图标，不传时使用内置上传/导入图标
-   */
-  icon?: ReactNode;
-  /**
-   * 接受的文件类型
-   * @description 与 input[type=file] 的 accept 一致，如 ".xlsx,.csv" 或 "application/vnd.ms-excel"
-   */
-  accept?: string;
-  /**
-   * 是否允许多选
-   * @default false
-   */
-  multiple?: boolean;
-  /**
-   * 单文件最大体积（MB），超出时不会调用 onImport，并调用 onError
-   */
-  maxSize?: number;
-  /**
-   * 选择文件并校验通过后回调
-   * @description 用户选择文件后触发，e 为 input 的 change 事件
-   */
-  onImport?: (files: File[], e: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * 校验失败时回调（如文件过大）
-   */
-  onError?: (error: {
-    type: 'MAX_SIZE';
-    message: string;
-    file: File;
-  }) => void;
-  /**
-   * 自定义类名
-   */
-  className?: string;
-  /**
-   * 自定义样式
-   */
-  style?: CSSProperties;
-}
-//#endregion
-export { ImportButtonType, PisellImportProps, SizeType, VariantType };