@ticatec/topside-elements 1.0.0

package/dist/form/FormEditor.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+
+    import type {Snippet} from "svelte";
+    import type {EditorVariant} from "./types";
+    import {getEditorVariant} from "../topsideContext";
+
+    interface Props {
+        theme?: string;
+        tooltip?: string;
+        error?: string;
+        style?: string;
+        readonly?: boolean;
+        disabled?: boolean;
+        compact?: boolean;
+        class?: string;
+        variant?: EditorVariant;
+        children: Snippet;
+    }
+
+    let {
+        theme,
+        error,
+        style,
+        tooltip,
+        variant = getEditorVariant() as EditorVariant,
+        readonly = false,
+        disabled = false,
+        compact = false,
+        class: className,
+        children
+    }: Props = $props();
+
+    let tipText = $derived((!readonly && !disabled) ? (error || tooltip) : undefined);
+</script>
+
+<div class="topside-form-editor {variant} {className}" class:compact class:disabled class:error={error!=null} data-theme={theme}
+     style={style}
+     role="presentation"
+     aria-label="Text Editor"
+     data-tip={tipText}>
+    {@render children()}
+</div>

package/dist/form/FormEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { EditorVariant } from "./types";
+interface Props {
+    theme?: string;
+    tooltip?: string;
+    error?: string;
+    style?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+    class?: string;
+    variant?: EditorVariant;
+    children: Snippet;
+}
+declare const FormEditor: import("svelte").Component<Props, {}, "">;
+type FormEditor = ReturnType<typeof FormEditor>;
+export default FormEditor;

package/dist/form/attachment_files/AttachmentEditor.svelte

@@ -0,0 +1,494 @@
+<script lang="ts" generics="T extends UploadedFile = AttachmentFile">
+    import {onDestroy} from "svelte";
+    import type {BeforeRemove} from "../types";
+    import type CommonFieldProps from "../common_editor/CommonFieldProps";
+    import FormEditor from "../FormEditor.svelte";
+    import i18nRes from "../../i18nRes";
+    import utils from "../../overlay/common/utils";
+    import type AttachmentFile from "./AttachmentFile";
+    import {FileType, getFileType, type AttachmentLayout, type UploadedFile} from "./AttachmentFile";
+    import type {FileUpload, UploadProgress} from "./FileUpload";
+    import type {RejectReason, UploadTask} from "./UploadTask";
+    import AttachmentListItem from "./AttachmentListItem.svelte";
+    import AttachmentTile from "./AttachmentTile.svelte";
+
+    interface Props extends CommonFieldProps {
+        /** 已上传的附件列表（可绑定） */
+        files?: T[];
+        /** 排列方式：list（每行一个）/ icon（图标瓦片，自动换行） */
+        layout?: AttachmentLayout;
+        /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+        height?: number | string;
+        /** 实际执行上传的函数；不传则组件只读展示（不显示上传入口） */
+        uploadFile?: FileUpload;
+        /** 允许的文件类型（同 input accept） */
+        accept?: string;
+        /** 单个文件大小上限（字节） */
+        maxSize?: number;
+        /** 文件数量上限（含上传中的） */
+        maxFiles?: number;
+        /** 一次是否允许选择 / 拖入多个文件 */
+        multiple?: boolean;
+        /** 上传入口的文字（空态时作为拖放区提示） */
+        uploadText?: string;
+        /** 没有文件且不能上传时显示的文字 */
+        emptyText?: string;
+        /** 图片文件显示缩略图（已上传的用 thumbnail ?? uri，上传中的用本地预览）；ImageEditor 默认开启 */
+        showThumbnail?: boolean;
+        /** 预览：有则每个文件显示预览按钮 */
+        onPreview?: (file: T) => void;
+        /** 删除附件前的否决钩子：返回 false 取消删除 */
+        beforeRemove?: BeforeRemove<T>;
+        /** 附件被删除后通知 */
+        onremove?: (file: T) => void;
+        /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+        ondownload?: (file: T) => void;
+        /** 单个文件上传完成并加入 files 后通知 */
+        onFileUploaded?: (file: T, source: File) => void;
+        /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+        onFileRejected?: (file: File, reason: RejectReason) => void;
+        /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+        onUploadError?: (file: File, error: Error) => void;
+        /** files 变化后通知（上传完成或删除） */
+        onchange?: (files: T[]) => void;
+    }
+
+    let {
+        disabled = false,
+        readonly = false,
+        variant,
+        compact = false,
+        theme,
+        tooltip,
+        error,
+        style = '',
+        files = $bindable<T[]>([]),
+        layout = 'list',
+        height,
+        uploadFile,
+        accept = "*/*",
+        maxSize = 1024 * 1024 * 10,
+        maxFiles = 10,
+        multiple = true,
+        uploadText = i18nRes.upload.dropHint(),
+        emptyText = i18nRes.upload.emptyText(),
+        showThumbnail = false,
+        onPreview,
+        beforeRemove,
+        onremove,
+        ondownload,
+        onFileUploaded,
+        onFileRejected,
+        onUploadError,
+        onfocus,
+        onblur,
+        onchange
+    }: Props = $props();
+
+    let containerElement: HTMLDivElement | undefined = $state(undefined);
+    let fileInput: HTMLInputElement | undefined = $state(undefined);
+    let hasFocus = $state(false);
+
+    /** 上传中 / 失败的任务 */
+    let tasks = $state<UploadTask[]>([]);
+    /** 任务 id → 上传句柄（非响应式） */
+    const handles = new Map<number, UploadProgress>();
+    let seq = 0;
+
+    let dragDepth = 0;
+    let dragActive = $state(false);
+
+    const editable = $derived(!disabled && !readonly);
+    const canUpload = $derived(editable && uploadFile != null);
+    const totalCount = $derived(files.length + tasks.length);
+    const canAddMore = $derived(canUpload && totalCount < maxFiles);
+    const isEmpty = $derived(files.length === 0 && tasks.length === 0);
+    const heightStyle = $derived(height == null || height === '' ? '' : `height: ${typeof height === 'number' ? `${height}px` : height};`);
+
+    const findTask = (id: number): UploadTask | undefined => tasks.find(item => item.id === id);
+
+    const isImage = (name: string) => getFileType(name) === FileType.IMAGE;
+
+    /** 列表项要显示的缩略图：优先 thumbnail；开启 showThumbnail 时图片直接用 uri */
+    const thumbnailOf = (file: T): string | undefined =>
+        file.thumbnail ?? (showThumbnail && isImage(file.name) && file.uri ? file.uri : undefined);
+
+    const createPreview = (source: File): string | undefined => {
+        if (!showThumbnail || !source.type.startsWith('image/') || typeof URL.createObjectURL !== 'function') return undefined;
+        return URL.createObjectURL(source);
+    };
+
+    const revokePreview = (task?: UploadTask) => {
+        if (task?.thumbnail && typeof URL.revokeObjectURL === 'function') URL.revokeObjectURL(task.thumbnail);
+    };
+
+    onDestroy(() => tasks.forEach(revokePreview));
+
+    const notifyChange = () => {
+        onchange?.(files);
+    };
+
+    /**
+     * 启动（或重新启动）一个上传任务
+     */
+    const startUpload = (source: File, existing?: UploadTask) => {
+        if (uploadFile == null) return;
+        const id = existing?.id ?? ++seq;
+        if (existing) {
+            existing.status = 'uploading';
+            existing.progress = 0;
+            existing.error = undefined;
+        } else {
+            tasks.push({
+                id,
+                file: source,
+                name: source.name,
+                type: getFileType(source.name),
+                size: source.size,
+                progress: 0,
+                status: 'uploading',
+                thumbnail: createPreview(source)
+            });
+        }
+        const handle = uploadFile(source, (bytes: number) => {
+            const task = findTask(id);
+            if (task) {
+                task.progress = source.size > 0 ? Math.max(0, Math.min(100, Math.round(bytes * 100 / source.size))) : 100;
+            }
+        }, (url: string, thumbnail?: string) => {
+            const task = findTask(id);
+            if (task == null) return;
+            revokePreview(task);
+            handles.delete(id);
+            tasks = tasks.filter(item => item.id !== id);
+            const uploaded = {
+                name: source.name, uri: url ?? '', type: getFileType(source.name), size: source.size, thumbnail: thumbnail ?? undefined
+            } as unknown as T;
+            files = [...files, uploaded];
+            onFileUploaded?.(uploaded, source);
+            notifyChange();
+        }, (err: Error) => {
+            const task = findTask(id);
+            if (task) {
+                task.status = 'error';
+                task.error = err?.message;
+            }
+            handles.delete(id);
+            onUploadError?.(source, err);
+        });
+        // 上传函数可能同步完成，此时任务已经不在列表里，不再保留句柄
+        if (findTask(id) != null) handles.set(id, handle);
+    };
+
+    /**
+     * 过滤并加入一批待上传文件
+     */
+    const addFiles = (incoming: File[]) => {
+        if (!canAddMore || incoming.length === 0) return;
+        const accepted = utils.filterFiles(incoming, accept);
+        incoming.filter(item => !accepted.includes(item)).forEach(item => onFileRejected?.(item, 'accept'));
+        const candidates = multiple && maxFiles > 1 ? accepted : accepted.slice(0, 1);
+        let remaining = maxFiles - totalCount;
+        for (const item of candidates) {
+            if (item.size > maxSize) {
+                onFileRejected?.(item, 'size');
+            } else if (remaining <= 0) {
+                onFileRejected?.(item, 'count');
+            } else {
+                remaining--;
+                startUpload(item);
+            }
+        }
+    };
+
+    const cancelTask = async (task: UploadTask) => {
+        const handle = handles.get(task.id);
+        if (task.status === 'uploading' && handle != null) {
+            const cancelled = await handle.cancel();
+            if (!cancelled) return;
+        }
+        revokePreview(task);
+        handles.delete(task.id);
+        tasks = tasks.filter(item => item.id !== task.id);
+    };
+
+    const retryTask = (task: UploadTask) => {
+        startUpload(task.file, task);
+    };
+
+    const removeFile = async (file: T) => {
+        if (!editable) return;
+        const confirmed = beforeRemove == null ? true : (await beforeRemove(file)) !== false;
+        if (confirmed) {
+            files = files.filter(item => item !== file);
+            onremove?.(file);
+            notifyChange();
+        }
+    };
+
+    const handleFilePick = (event: Event) => {
+        const input = event.currentTarget as HTMLInputElement;
+        addFiles(Array.from(input.files ?? []));
+        input.value = '';
+    };
+
+    const hasDraggedFiles = (event: DragEvent): boolean => Array.from(event.dataTransfer?.types ?? []).includes('Files');
+
+    const handleDragEnter = (event: DragEvent) => {
+        if (!canAddMore || !hasDraggedFiles(event)) return;
+        event.preventDefault();
+        dragDepth++;
+        dragActive = true;
+    };
+
+    const handleDragOver = (event: DragEvent) => {
+        if (!canAddMore || !hasDraggedFiles(event)) return;
+        event.preventDefault();
+        if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+    };
+
+    const handleDragLeave = () => {
+        if (!dragActive) return;
+        dragDepth = Math.max(0, dragDepth - 1);
+        if (dragDepth === 0) dragActive = false;
+    };
+
+    const handleDrop = (event: DragEvent) => {
+        if (!dragActive && !hasDraggedFiles(event)) return;
+        event.preventDefault();
+        dragDepth = 0;
+        dragActive = false;
+        if (!canAddMore) return;
+        addFiles(Array.from(event.dataTransfer?.files ?? []));
+    };
+
+    const handleFocus = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.(event);
+        }
+    };
+
+    const handleBlur = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
+        if (hasFocus) {
+            hasFocus = false;
+            onblur?.(event);
+        }
+    };
+
+    /**
+     * 打开系统文件选择框（等同于点击上传入口）
+     */
+    export function openFileDialog() {
+        if (canAddMore) fileInput?.click();
+    }
+
+    export function focus() {
+        containerElement
+            ?.querySelector<HTMLElement>('button, a[href]')
+            ?.focus();
+    }
+</script>
+
+<FormEditor {variant} {theme} {tooltip} {error} {style} {readonly} {disabled} {compact}>
+    <!-- 整个内容区都是拖放区；真正的交互控件（按钮 / 链接 / input）在内部各自承担语义 -->
+    <div
+        bind:this={containerElement}
+        class="topside-attachment-editor {layout}"
+        class:compact
+        class:drag-active={dragActive}
+        style={heightStyle}
+        role="group"
+        aria-label={uploadText}
+        aria-disabled={disabled}
+        onfocusin={handleFocus}
+        onfocusout={handleBlur}
+        ondragenter={handleDragEnter}
+        ondragover={handleDragOver}
+        ondragleave={handleDragLeave}
+        ondrop={handleDrop}
+    >
+        {#if canUpload}
+            <input bind:this={fileInput} class="file-input" type="file" {accept} multiple={multiple && maxFiles > 1}
+                   tabindex="-1" aria-hidden="true" onchange={handleFilePick}/>
+        {/if}
+        {#if isEmpty}
+            {#if canAddMore}
+                <button type="button" class="drop-zone" onclick={openFileDialog}>
+                    <i class="icon_google_cloud_upload" aria-hidden="true"></i>
+                    <span>{uploadText}</span>
+                </button>
+            {:else}
+                <div class="empty-text">{emptyText}</div>
+            {/if}
+        {:else}
+            <div class="items" role="list">
+                {#each files as file (file)}
+                    {#if layout === 'icon'}
+                        <AttachmentTile {file} thumbnail={thumbnailOf(file)} readonly={!editable}
+                                        onPreview={onPreview ? () => onPreview(file) : undefined}
+                                        ondownload={ondownload ? () => ondownload(file) : undefined}
+                                        onremove={() => removeFile(file)}/>
+                    {:else}
+                        <AttachmentListItem {file} thumbnail={thumbnailOf(file)} readonly={!editable}
+                                            onPreview={onPreview ? () => onPreview(file) : undefined}
+                                            ondownload={ondownload ? () => ondownload(file) : undefined}
+                                            onremove={() => removeFile(file)}/>
+                    {/if}
+                {/each}
+                {#each tasks as task (task.id)}
+                    {#if layout === 'icon'}
+                        <AttachmentTile {task} thumbnail={task.thumbnail} oncancel={cancelTask} onretry={retryTask}/>
+                    {:else}
+                        <AttachmentListItem {task} thumbnail={task.thumbnail} oncancel={cancelTask} onretry={retryTask}/>
+                    {/if}
+                {/each}
+                {#if canAddMore}
+                    <button type="button" class="add-item" onclick={openFileDialog} title={uploadText} aria-label={uploadText}>
+                        <i class="icon_google_add" aria-hidden="true"></i>
+                        {#if layout === 'list'}
+                            <span>{uploadText}</span>
+                        {/if}
+                    </button>
+                {/if}
+            </div>
+        {/if}
+    </div>
+</FormEditor>
+
+<style>
+    .topside-attachment-editor {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-height: 64px;
+        box-sizing: border-box;
+        padding: 6px var(--topside-editor-margin, 8px);
+        overflow-y: auto;
+        outline: none;
+        border: 1px dashed transparent;
+        border-radius: inherit;
+        transition: border-color 0.15s, background-color 0.15s;
+    }
+
+    .topside-attachment-editor.compact {
+        --topside-attachment-item-height: 26px;
+        --topside-attachment-tile-size: 64px;
+        min-height: 40px;
+        padding: 4px var(--topside-editor-margin, 8px);
+    }
+
+    .topside-attachment-editor.drag-active {
+        border-color: var(--topside-editor-color-active-border, #3b82f6);
+        background-color: var(--topside-attachment-drag-bg, rgba(59, 130, 246, 0.06));
+    }
+
+    .file-input {
+        position: absolute;
+        width: 0;
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+        pointer-events: none;
+    }
+
+    .items {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 0 0 auto;
+    }
+
+    .icon .items {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 12px;
+    }
+
+    /* 列表末尾的上传入口 */
+    .add-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        height: var(--topside-attachment-item-height, 32px);
+        padding: 0 8px;
+        box-sizing: border-box;
+        border: 1px dashed var(--topside-attachment-add-border-color, var(--topside-color-border-primary, #d1d5db));
+        border-radius: var(--topside-radius, 4px);
+        background: transparent;
+        color: var(--topside-attachment-add-color, #6b7280);
+        font: inherit;
+        cursor: pointer;
+        transition: border-color 0.15s, color 0.15s;
+    }
+
+    .add-item i {
+        font-size: 18px;
+    }
+
+    .add-item:hover,
+    .add-item:focus-visible {
+        border-color: var(--topside-editor-color-active-border, #3b82f6);
+        color: var(--topside-editor-color-active-border, #3b82f6);
+    }
+
+    /* icon 方式：与瓦片同尺寸的 "+" */
+    .icon .add-item {
+        flex: 0 0 auto;
+        width: var(--topside-attachment-tile-size, 88px);
+        height: var(--topside-attachment-tile-size, 88px);
+        justify-content: center;
+        padding: 0;
+        border-radius: var(--topside-radius-md, 6px);
+    }
+
+    .icon .add-item i {
+        font-size: 28px;
+    }
+
+    /* 空态：占满整个内容区的拖放区 */
+    .drop-zone {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        width: 100%;
+        min-height: 52px;
+        padding: 8px;
+        box-sizing: border-box;
+        border: 1px dashed var(--topside-attachment-add-border-color, var(--topside-color-border-primary, #d1d5db));
+        border-radius: var(--topside-radius, 4px);
+        background: transparent;
+        color: var(--topside-attachment-add-color, #6b7280);
+        font: inherit;
+        cursor: pointer;
+        transition: border-color 0.15s, color 0.15s;
+    }
+
+    .drop-zone i {
+        font-size: 28px;
+    }
+
+    .drop-zone:hover,
+    .drop-zone:focus-visible,
+    .drag-active .drop-zone {
+        border-color: var(--topside-editor-color-active-border, #3b82f6);
+        color: var(--topside-editor-color-active-border, #3b82f6);
+    }
+
+    .empty-text {
+        flex: 1 1 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 52px;
+        color: var(--topside-editor-color-placeholder, #9ca3af);
+    }
+</style>

package/dist/form/attachment_files/AttachmentEditor.svelte.d.ts

@@ -0,0 +1,75 @@
+import type { BeforeRemove } from "../types";
+import type CommonFieldProps from "../common_editor/CommonFieldProps";
+import type AttachmentFile from "./AttachmentFile";
+import { type AttachmentLayout, type UploadedFile } from "./AttachmentFile";
+import type { FileUpload } from "./FileUpload";
+import type { RejectReason } from "./UploadTask";
+declare function $$render<T extends UploadedFile = AttachmentFile>(): {
+    props: CommonFieldProps & {
+        /** 已上传的附件列表（可绑定） */
+        files?: T[];
+        /** 排列方式：list（每行一个）/ icon（图标瓦片，自动换行） */
+        layout?: AttachmentLayout;
+        /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+        height?: number | string;
+        /** 实际执行上传的函数；不传则组件只读展示（不显示上传入口） */
+        uploadFile?: FileUpload;
+        /** 允许的文件类型（同 input accept） */
+        accept?: string;
+        /** 单个文件大小上限（字节） */
+        maxSize?: number;
+        /** 文件数量上限（含上传中的） */
+        maxFiles?: number;
+        /** 一次是否允许选择 / 拖入多个文件 */
+        multiple?: boolean;
+        /** 上传入口的文字（空态时作为拖放区提示） */
+        uploadText?: string;
+        /** 没有文件且不能上传时显示的文字 */
+        emptyText?: string;
+        /** 图片文件显示缩略图（已上传的用 thumbnail ?? uri，上传中的用本地预览）；ImageEditor 默认开启 */
+        showThumbnail?: boolean;
+        /** 预览：有则每个文件显示预览按钮 */
+        onPreview?: (file: T) => void;
+        /** 删除附件前的否决钩子：返回 false 取消删除 */
+        beforeRemove?: BeforeRemove<T>;
+        /** 附件被删除后通知 */
+        onremove?: (file: T) => void;
+        /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+        ondownload?: (file: T) => void;
+        /** 单个文件上传完成并加入 files 后通知 */
+        onFileUploaded?: (file: T, source: File) => void;
+        /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+        onFileRejected?: (file: File, reason: RejectReason) => void;
+        /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+        onUploadError?: (file: File, error: Error) => void;
+        /** files 变化后通知（上传完成或删除） */
+        onchange?: (files: T[]) => void;
+    };
+    exports: {
+        openFileDialog: () => void;
+        focus: () => void;
+    };
+    bindings: "files";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends UploadedFile = AttachmentFile> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "files";
+    exports(): {
+        openFileDialog: () => void;
+        focus: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T extends UploadedFile = AttachmentFile>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends UploadedFile = AttachmentFile>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AttachmentEditor: $$IsomorphicComponent;
+type AttachmentEditor<T extends UploadedFile = AttachmentFile> = InstanceType<typeof AttachmentEditor<T>>;
+export default AttachmentEditor;

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

@@ -0,0 +1,53 @@
+export declare enum FileType {
+    IMAGE = "img",
+    PDF = "pdf",
+    DOC = "doc",
+    XLS = "xml",
+    PPT = "ppt",
+    AUDIO = "wav",
+    VIDEO = "mov",
+    OTHER = "dat"
+}
+/**
+ * 根据文件名（扩展名）推断文件类型
+ */
+export declare const getFileType: (filename: string) => FileType;
+/**
+ * 文件类型对应的图标 class
+ */
+export declare const getFileTypeIcon: (type: FileType | string) => string;
+/**
+ * 把字节数格式化为可读文本（B / KB / MB / GB）
+ */
+export declare const formatFileSize: (bytes: number) => string;
+/**
+ * 附件的排列方式：list（每行一个文件）/ icon（图标瓦片，自动换行）
+ */
+export type AttachmentLayout = 'list' | 'icon';
+/**
+ * 已上传文件的公共字段：AttachmentEditor / ImageEditor 的列表项都以它为基础
+ */
+export interface UploadedFile {
+    /**
+     * 文件名
+     */
+    name: string;
+    /**
+     * 存储地址（oss 路径 / URL）
+     */
+    uri: string;
+    /**
+     * 文件大小（字节），可选；上传完成后由组件写入
+     */
+    size?: number;
+    /**
+     * 缩略图地址，可选；有则在瓦片 / 列表里代替类型图标显示
+     */
+    thumbnail?: string | null;
+}
+export default interface AttachmentFile extends UploadedFile {
+    /**
+     * 文件类型
+     */
+    type: FileType;
+}