@ticatec/uniface-element 5.0.5 → 5.1.0

package/dist/form/attachment_files/README_CN.md

@@ -1,492 +1,111 @@
-# AttachmentFilesField
+# AttachmentEditor
 
-文件上传组件，用于附加文档、电子表格、演示文稿、PDF 及其他文件类型。用户可以拖放文件或点击浏览。每个文件显示为一行，包含图标、文件名和操作按钮（下载、删除）。支持多文件、文件类型检测和删除前确认。
+附件上传字段，适用于文档、表格、PDF、音视频等任意文件。整个字段都是拖放区；上传入口是内容末尾的占位块（`list` 方式是底部的虚线行，`icon` 方式是 "+" 瓦片），没有文件时占位块撑满整个字段。上传进度内联显示并可取消；失败的上传可以重试或移除。
 
-> 可以理解为表单的文件管理器。上传、预览和管理附件，具有统一的 UI。
+> 5.1.0 重写。命名遵循 [API 命名规范](../../../docs/NAMING_CN.md)；旧的 `onUpload` 属性和弹窗式 `FileUploadPanel` 已移除（不保留兼容别名）。
 
 ## 特性
 
-- **文件上传** —— 支持拖放和点击浏览。
-- **文件类型检测** —— 自动检测文件类型（图片、PDF、DOC、XLS、PPT、音频、视频、其他）。
-- **文件列表显示** —— 显示上传的文件，包含图标、文件名和操作按钮。
-- **删除确认** —— 可选的 `removeFileConfirm` 回调，用于删除前确认。
-- **多文件** —— 支持一次性上传多个文件。
-- **下载** —— 点击下载图标下载文件。
-- **上传进度** —— 显示上传进度条。
-- **禁用 / 只读** 模式。
-- **紧凑模式** —— 适用于密集 UI。
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
+- **拖放上传**：文件拖到字段内任意位置即可，或点击占位块打开文件框。
+- **两种排列方式**：`list`（每行一个文件，行尾是下载 / 删除图标）和 `icon`（图标瓦片，自动换行）。
+- **固定高度**：通过 `height` 设置，超出后内部滚动。
+- **内联上传进度**：list 行尾显示进度条、百分比和取消按钮；icon 瓦片上叠加进度环，取消按钮位于环的中央（两层重叠）。
+- **失败重试 / 移除**。
+- **限制**：`accept`、`maxSize`、`maxFiles`、`multiple`；被拒绝的文件通过 `onFileRejected` 报告。
+- **否决钩子** `beforeRemove` 与通知 `onremove`、`onchange`、`onFileUploaded`、`onUploadError`。
+- **只读 / 禁用**：下载仍可用，删除和上传入口消失，忽略拖放。
+- 继承共享字段属性（`variant`、`compact`、`theme`、`tooltip`、`error`、`style`、`onfocus`、`onblur`）。
 
 ## 引入
 
 ```typescript
-import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-import type { AttachmentFile, RemoveConfirm, FileUpload } from "@ticatec/uniface-element/AttachmentFilesField";
+import AttachmentEditor from "@ticatec/uniface-element/AttachmentEditor";
+import type {AttachmentFile, AttachmentLayout, FileUpload, RejectReason} from "@ticatec/uniface-element/AttachmentEditor";
 ```
 
-## 基础用法
+## 基本用法
 
 ```svelte
 <script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-  import type { AttachmentFile, FileUpload } from "@ticatec/uniface-element/AttachmentFilesField";
+  import AttachmentEditor from "@ticatec/uniface-element/AttachmentEditor";
+  import type {AttachmentFile, FileUpload} from "@ticatec/uniface-element/AttachmentEditor";
 
   let files = $state<AttachmentFile[]>([]);
 
-  // 模拟上传函数
-  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    // 模拟上传进度
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        // 模拟上传成功
-        const fakeUrl = `/uploads/${file.name}`;
-        onUploaded(fakeUrl);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
+  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, onError) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = (e) => progressUpdate(e.loaded);
+    xhr.onload = () => xhr.status < 300 ? onUploaded(JSON.parse(xhr.responseText).url) : onError(new Error(xhr.statusText));
+    xhr.onerror = () => onError(new Error('网络错误'));
+    const body = new FormData();
+    body.append('file', file);
+    xhr.open('POST', '/api/upload');
+    xhr.send(body);
+    return {cancel: async () => { xhr.abort(); return true; }};
   };
-
-  function handleFilesChange(updatedFiles: AttachmentFile[]) {
-    console.log("文件已更新:", updatedFiles);
-    // ... 保存到后端
-  }
 </script>
 
-<AttachmentFilesField
-  bind:files={files}
-  uploadFile={uploadFile}
-  onchange={handleFilesChange}
-  maxFiles={5}
-/>
+<AttachmentEditor bind:files {uploadFile} layout="icon" height={160} maxFiles={5}
+                  onchange={(list) => console.log('files', list)}/>
 ```
 
 ## 属性（Props）
 
-`AttachmentFilesField` 继承自 `CommonFieldProps`，因此自动获得 `variant`、`compact`、`disabled`、`readonly`、`style`、`error`、`tooltip`、`theme`、`placeholder`。
+继承自 `CommonFieldProps` 的属性（`variant`、`compact`、`disabled`、`readonly`、`theme`、`tooltip`、`error`、`style`、`onfocus`、`onblur`）不再重复。
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| `files` | `Array<AttachmentFile>`（可绑定） | `[]` | 上传文件的数组。每个文件有 `name`、`uri` 和 `type` 属性。 |
-| `uploadFile` | `FileUpload` | — | **必需。** 处理文件上传的函数。接收 `(file, progressUpdate, onUploaded, errorHandler)`，返回带有 `cancel()` 方法的 `UploadProgress` 对象。 |
-| `maxFiles` | `number` | `10` | 允许的最大文件数量。 |
-| `removeFileConfirm` | `RemoveConfirm` | — | 删除确认的可选回调。接收要删除的文件，返回 Promise<boolean>。 |
-| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉风格。 |
-| `compact` | `boolean` | `false` | 紧凑布局。 |
-| `disabled` | `boolean` | `false` | 完全禁用 —— 无上传或删除操作。 |
-| `readonly` | `boolean` | `false` | 只读 —— 无上传或删除操作，但文件可见。 |
-| `style` | `string` | — | 编辑器根节点的内联 CSS。 |
-| `error` | `string` | — | 校验错误文本，触发编辑器的 error 状态。 |
-| `tooltip` | `string` | — | 编辑器的 hover tooltip。 |
-| `theme` | `string` | — | 渲染为编辑器根的 `data-theme`，用于作用域样式覆盖。 |
-| `onchange` | `(files: Array<AttachmentFile>) => void` | — | 文件数组变化时触发（上传或删除）。接收更新后的文件数组。 |
-| `onfocus` | `(event: FocusEvent) => void` | — | 编辑器获焦。 |
-| `onblur` | `(event: FocusEvent) => void` | — | 编辑器失焦。 |
-
-## 事件
-
-| 事件 | 签名 | 说明 |
-|------|------|------|
-| `onchange` | `(files: Array<AttachmentFile>) => void` | 文件数组变化时触发（上传或删除）。接收更新后的文件数组。 |
-| `onfocus` | `(event: FocusEvent) => void` | 编辑器获焦。 |
-| `onblur` | `(event: FocusEvent) => void` | 编辑器失焦。 |
+| `files` | `AttachmentFile[]`（可绑定） | `[]` | 已上传的附件；每项有 `name`、`type`、`uri` 和可选的 `size` / `thumbnail`。 |
+| `layout` | `'list' \| 'icon'` | `'list'` | `list`：每行一个文件；`icon`：瓦片自动换行。 |
+| `height` | `number \| string` | — | 内容区高度（数字为 px），超出后内部滚动；不设则随内容自适应。 |
+| `uploadFile` | `FileUpload` | — | 上传函数（见下）。不传则只展示文件，不显示上传入口。 |
+| `accept` | `string` | `"*/*"` | 允许的文件类型，语法同 `<input accept>`。 |
+| `maxSize` | `number` | `10 MB` | 单个文件大小上限（字节）。 |
+| `maxFiles` | `number` | `10` | 文件数量上限（含上传中的）；达到后上传入口消失。 |
+| `multiple` | `boolean` | `true` | 是否允许一次选择 / 拖入多个文件。 |
+| `uploadText` | `string` | i18n `upload.dropHint` | 上传入口文字，同时是空态提示。 |
+| `emptyText` | `string` | i18n `upload.emptyText` | 没有文件且不能上传时显示的文字。 |
+| `showThumbnail` | `boolean` | `false` | 图片文件显示缩略图（`thumbnail ?? uri`），上传中的图片显示本地预览。带 `thumbnail` 的项无论如何都显示缩略图。 |
+| `onPreview` | `(file: AttachmentFile) => void` | — | 传了则每个文件显示预览按钮。 |
+| `beforeRemove` | `BeforeRemove<AttachmentFile>` | — | 否决钩子：返回 `false`（或其 Promise）则不删除。 |
+| `onremove` | `(file: AttachmentFile) => void` | — | 附件被删除后通知。 |
+| `ondownload` | `(file: AttachmentFile) => void` | — | 自定义下载；不传时下载图标是指向 `file.uri` 的普通链接。 |
+| `onFileUploaded` | `(file: AttachmentFile, source: File) => void` | — | 单个文件上传完成并已加入 `files`。 |
+| `onFileRejected` | `(file: File, reason: 'accept' \| 'size' \| 'count') => void` | — | 选择 / 拖入的文件被拒绝。 |
+| `onUploadError` | `(file: File, error: Error) => void` | — | 上传失败；任务留在列表中，可重试或移除。 |
+| `onchange` | `(files: AttachmentFile[]) => void` | — | `files` 变化后通知（上传完成或删除）。 |
 
 ## 方法
 
-| 方法 | 签名 | 说明 |
-|------|------|------|
-| `focus()` | `() => void` | 让编辑器获取焦点。 |
-
-```svelte
-<script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-
-  let editorRef;
-
-  function focusEditor() {
-    editorRef.focus();
-  }
-</script>
-
-<AttachmentFilesField bind:this={editorRef} bind:files={files} uploadFile={uploadFile} />
-<button onclick={focusEditor}>聚焦</button>
-```
-
-## `FileUpload` — 上传函数
+| 方法 | 说明 |
+|------|------|
+| `openFileDialog()` | 打开系统文件框（等同于点击上传入口）；不能上传时不做任何事。 |
+| `focus()` | 把焦点移到字段内第一个控件。 |
 
-`uploadFile` 回调是必需的。它接收：
-
-| 参数 | 类型 | 说明 |
-|------|------|------|
-| `file` | `File` | 要上传的文件。 |
-| `progressUpdate` | `(bytesUploaded: number) => void` | 调用此函数报告上传进度。 |
-| `onUploaded` | `(url: string) => void` | 上传完成时调用。传入文件 URL。 |
-| `errorHandler` | `(error: Error) => void` | 上传失败时调用。传入 Error 对象。 |
-
-必须返回一个 `UploadProgress` 对象：
+## `FileUpload`
 
 ```typescript
-interface UploadProgress {
-  cancel: () => Promise<boolean>;
-}
+type FileUpload = (
+  file: File,
+  progressUpdate: (uploadedBytes: number) => void,
+  onUploaded: (url: string, thumbnail?: string) => void,
+  onError: (error: Error) => void
+) => {cancel: () => Promise<boolean>};
 ```
 
-`cancel()` 方法允许用户取消正在进行的上传。
-
-```svelte
-<script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-  import type { FileUpload } from "@ticatec/uniface-element/AttachmentFilesField";
-
-  let files = $state([]);
-
-  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    // 模拟带进度的上传
-    let bytesUploaded = 0;
-    const totalBytes = file.size;
-    const interval = setInterval(() => {
-      bytesUploaded += 1024; // 每次 1KB
-      if (bytesUploaded >= totalBytes) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`);
-      } else {
-        progressUpdate(bytesUploaded);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true; // 上传已取消
-      }
-    };
-  };
-</script>
-
-<AttachmentFilesField bind:files={files} uploadFile={uploadFile} />
-```
-
-## `AttachmentFile` — 文件对象
-
-`files` 数组中的每个文件都是一个 `AttachmentFile` 对象：
-
-```typescript
-interface AttachmentFile {
-  name: string;    // 文件名
-  uri: string;     // 文件 URL（上传后）
-  type: FileType;  // 文件类型（IMAGE, PDF, DOC, XLS, PPT, AUDIO, VIDEO, OTHER）
-}
-```
-
-## `FileType` — 文件类型枚举
-
-```typescript
-enum FileType {
-  IMAGE = 'img',
-  PDF = 'pdf',
-  DOC = 'doc',
-  XLS = 'xml',
-  PPT = 'ppt',
-  AUDIO = 'wav',
-  VIDEO = 'mov',
-  OTHER = 'dat'
-}
-```
-
-## 示例
-
-### 带确认的文件上传
-
-```svelte
-<script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-  import type { AttachmentFile, FileUpload, RemoveConfirm } from "@ticatec/uniface-element/AttachmentFilesField";
-
-  let files = $state<AttachmentFile[]>([]);
-
-  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let bytesUploaded = 0;
-    const totalBytes = file.size;
-    const interval = setInterval(() => {
-      bytesUploaded += 1024;
-      if (bytesUploaded >= totalBytes) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`);
-      } else {
-        progressUpdate(bytesUploaded);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-
-  const removeFileConfirm: RemoveConfirm = async (file) => {
-    return confirm(`确定要删除 ${file.name} 吗？`);
-  };
-
-  function handleFilesChange(updatedFiles: AttachmentFile[]) {
-    console.log("文件已更新:", updatedFiles);
-    // ... 保存到后端
-  }
-</script>
-
-<AttachmentFilesField
-  bind:files={files}
-  uploadFile={uploadFile}
-  removeFileConfirm={removeFileConfirm}
-  onchange={handleFilesChange}
-  maxFiles={5}
-/>
-```
-
-### 多文件类型
-
-```svelte
-<script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-  import type { AttachmentFile, FileUpload } from "@ticatec/uniface-element/AttachmentFilesField";
-
-  let files = $state<AttachmentFile[]>([]);
-
-  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    // 模拟上传
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<div class="file-upload-section">
-  <h3>上传文件</h3>
-  <AttachmentFilesField
-    bind:files={files}
-    uploadFile={uploadFile}
-    maxFiles={10}
-  />
-  <div class="file-list">
-    {#each files as file}
-      <div class="file-item">
-        <span class="file-icon">📄</span>
-        <span class="file-name">{file.name}</span>
-        <span class="file-type">{file.type}</span>
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .file-upload-section {
-    max-width: 600px;
-    margin: 20px;
-    padding: 20px;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-  }
-  .file-list {
-    margin-top: 16px;
-  }
-  .file-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px;
-    border-bottom: 1px solid #f3f4f6;
-  }
-  .file-icon {
-    font-size: 20px;
-  }
-  .file-name {
-    flex: 1;
-  }
-  .file-type {
-    color: #6b7280;
-  }
-</style>
-```
-
-### 禁用和只读模式
-
-```svelte
-<script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-  import type { AttachmentFile, FileUpload } from "@ticatec/uniface-element/AttachmentFilesField";
-
-  let disabledFiles: AttachmentFile[] = [
-    { name: "disabled-file.pdf", uri: "/uploads/disabled-file.pdf", type: "pdf" }
-  ];
-  let readonlyFiles: AttachmentFile[] = [
-    { name: "readonly-file.docx", uri: "/uploads/readonly-file.docx", type: "doc" }
-  ];
-  let normalFiles: AttachmentFile[] = [];
-
-  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<div style="display: flex; flex-direction: column; gap: 16px;">
-  <AttachmentFilesField
-    bind:files={disabledFiles}
-    uploadFile={uploadFile}
-    disabled
-  />
-  <AttachmentFilesField
-    bind:files={readonlyFiles}
-    uploadFile={uploadFile}
-    readonly
-  />
-  <AttachmentFilesField
-    bind:files={normalFiles}
-    uploadFile={uploadFile}
-  />
-</div>
-```
-
-### 紧凑模式
-
-```svelte
-<script lang="ts">
-  import AttachmentFilesField from "@ticatec/uniface-element/AttachmentFilesField";
-  import type { AttachmentFile, FileUpload } from "@ticatec/uniface-element/AttachmentFilesField";
-
-  let files = $state<AttachmentFile[]>([]);
-
-  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, errorHandler) => {
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      progressUpdate(Math.floor(file.size * (progress / 100)));
-
-      if (progress >= 100) {
-        clearInterval(interval);
-        onUploaded(`/uploads/${file.name}`);
-      }
-    }, 100);
-
-    return {
-      cancel: async () => {
-        clearInterval(interval);
-        return true;
-      }
-    };
-  };
-</script>
-
-<table>
-  <thead>
-    <tr>
-      <th>名称</th>
-      <th>文件</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>行 1</td>
-      <td>
-        <AttachmentFilesField
-          bind:files={files}
-          uploadFile={uploadFile}
-          compact
-        />
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
+用已上传的字节数调用 `progressUpdate`（组件换算成百分比），完成时用存储地址调用 `onUploaded`，失败时调用 `onError`。`cancel()` 返回 `false` 表示无法取消，任务会留在列表里。
 
 ## 行为说明
 
-### 上传流程
-
-1. 用户点击上传图标或拖放文件。
-2. `FileUploadPanel` 打开，显示文件选择器。
-3. 选择文件时，调用 `uploadFile`，传入文件和处理进度回调。
-4. `uploadFile` 调用 `progressUpdate(bytesUploaded)` 报告进度。
-5. 上传完成时，`uploadFile` 调用 `onUploaded(url)` 传入文件 URL。
-6. 文件添加到 `files` 数组，并在文件列表中显示。
-
-### 删除流程
-
-1. 用户点击文件上的删除图标。
-2. 如果提供了 `removeFileConfirm`，则调用回调并传入文件。
-3. 如果回调返回 `true`，则从 `files` 数组中删除文件。
-4. `onchange` 事件触发，传入更新后的文件数组。
-
-### 文件类型检测
-
-文件类型基于文件扩展名检测：
-
-- **IMAGE**: jpg, jpeg, png, gif, bmp, tiff, webp, svg, ico, heif, heic
-- **PDF**: pdf
-- **DOC**: doc, docx, dot, dotx, docm, dotm
-- **XLS**: xls, xlsx, xlsm, xlsb, csv, ods, xlt, xltx, xltm
-- **PPT**: ppt, pptx, pptm, pps, ppsx, ppsm, pot, potx, potm
-- **AUDIO**: mp3, wav, aac, flac, ogg, wma, m4a, aiff, alac
-- **VIDEO**: mp4, avi, mkv, mov, wmv, flv, webm, mpeg, mpg, 3gp, m4v, vob
-- **OTHER**: 其他所有类型
-
-### 只读 / 禁用渲染
-
-两种模式都隐藏上传图标和删除图标。文件显示但无法修改。
+- 不满足 `accept` / `maxSize` / 剩余 `maxFiles` 配额的文件不会开始上传，每个文件通过 `onFileRejected` 报告一次。
+- 上传成功后把 `{name, type, uri, size, thumbnail}` 追加到 `files`（类型由扩展名推断，`thumbnail` 来自上传函数 `onUploaded` 的第二个参数），然后依次触发 `onFileUploaded` 和 `onchange`。
+- `readonly` 和 `disabled` 都会隐藏删除和上传入口并忽略拖放；`readonly` 下下载链接保留。
+- 拖放高亮只对携带文件的拖拽生效。
 
-## 无障碍
+## 样式
 
-- 上传图标有 `aria-hidden="true"`（装饰性）。
-- 文件名作为纯文本显示。
-- 完整的 ARIA 需要外层 `<label>` 或使用 `aria-label`。
+组件级 CSS 变量（都有回退值）：`--uniface-attachment-item-height`、`--uniface-attachment-tile-size`、`--uniface-attachment-icon-color`、`--uniface-attachment-add-border-color`、`--uniface-attachment-add-color`、`--uniface-attachment-drag-bg`、`--uniface-attachment-error-color`、`--uniface-attachment-overlay-bg`。`compact` 下行高 26px、瓦片 64px。
 
 ## 相关组件
 
-- [ImageFilesField](../image-files/README_CN.md) —— 专用图片上传组件。
-- [TextEditor](../text_editor/README_CN.md) —— 多行文本区域。
-- [NumberEditor](../number_editor/README_CN.md) —— 数值输入。
+- [ImageEditor](../image_editor/README_CN.md)：同一套实现的图片版，瓦片显示缩略图并内置大图预览。

package/dist/form/attachment_files/UploadTask.d.ts

@@ -0,0 +1,27 @@
+import type { FileType } from "./AttachmentFile";
+/**
+ * 上传任务状态：uploading（进行中）/ error（失败，可重试或移除）
+ */
+export type UploadStatus = 'uploading' | 'error';
+/**
+ * 组件内部维护的上传任务（渲染进度 / 取消 / 重试用）
+ */
+export interface UploadTask {
+    id: number;
+    /** 原始文件 */
+    file: File;
+    name: string;
+    type: FileType;
+    size: number;
+    /** 0 - 100 */
+    progress: number;
+    status: UploadStatus;
+    /** 失败原因 */
+    error?: string;
+    /** 上传中的本地预览（object URL），仅图片且开启 showThumbnail 时有 */
+    thumbnail?: string;
+}
+/**
+ * 文件被拒绝的原因：accept（类型不符）/ size（超过 maxSize）/ count（超过 maxFiles）
+ */
+export type RejectReason = 'accept' | 'size' | 'count';

package/dist/form/attachment_files/index.d.ts

@@ -1,8 +1,11 @@
 import AttachmentEditor from "./AttachmentEditor.svelte";
-import FileRender from "./FileRender.svelte";
+import AttachmentListItem from "./AttachmentListItem.svelte";
+import AttachmentTile from "./AttachmentTile.svelte";
 import type AttachmentFile from "./AttachmentFile";
-import type UploadFile from "./UploadFile";
-import type { ErrorHandler, FileUpload, OnUploaded, ProgressUpdate, UploadProgress } from "./FileUpload";
+import { FileType, getFileType, getFileTypeIcon, formatFileSize } from "./AttachmentFile";
+import type { AttachmentLayout, UploadedFile } from "./AttachmentFile";
+import type { UploadTask, UploadStatus, RejectReason } from "./UploadTask";
+import type { OnError, FileUpload, OnUploaded, ProgressUpdate, UploadProgress } from "./FileUpload";
 export default AttachmentEditor;
-export { FileRender };
-export type { AttachmentFile, UploadFile, ErrorHandler, FileUpload, OnUploaded, ProgressUpdate, UploadProgress };
+export { AttachmentListItem, AttachmentTile, FileType, getFileType, getFileTypeIcon, formatFileSize };
+export type { AttachmentFile, UploadedFile, AttachmentLayout, UploadTask, UploadStatus, RejectReason, OnError, FileUpload, OnUploaded, ProgressUpdate, UploadProgress };

package/dist/form/attachment_files/index.js

@@ -1,4 +1,6 @@
 import AttachmentEditor from "./AttachmentEditor.svelte";
-import FileRender from "./FileRender.svelte";
+import AttachmentListItem from "./AttachmentListItem.svelte";
+import AttachmentTile from "./AttachmentTile.svelte";
+import { FileType, getFileType, getFileTypeIcon, formatFileSize } from "./AttachmentFile";
 export default AttachmentEditor;
-export { FileRender };
+export { AttachmentListItem, AttachmentTile, FileType, getFileType, getFileTypeIcon, formatFileSize };