@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/typography/typography.tsx

@@ -58,25 +58,22 @@ const titleSizes = {
   3: 'text-xl font-semibold',
   4: 'text-lg font-medium',
   5: 'text-base font-medium',
+  6: 'text-sm font-medium',
 } as const;
 
 export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
-   * 层级(1~5),决定字号 / 粗细;同时映射为 `<h1>~<h5>` 标签。
+   * 层级(1~6),决定字号 / 粗细;同时映射为 `<h1>~<h6>` 标签 — 对齐 antd `Typography.Title.level`。
    * @default 1
    */
-  level?: 1 | 2 | 3 | 4 | 5;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
 const Title = React.forwardRef<HTMLHeadingElement, TitleProps>(
   ({ level = 1, className, ...props }, ref) => {
-    const Comp = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+    const Comp = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     return (
-      <Comp
-        ref={ref}
-        className={cn(titleSizes[level], className)}
-        {...props}
-      />
+      <Comp ref={ref} className={cn(titleSizes[level], className)} {...props} />
     );
   },
 );
@@ -98,16 +95,30 @@ const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
 );
 Paragraph.displayName = 'Paragraph';
 
-// ─── Text(行内文本,支持 antd ellipsis / copyable / type)──────────────────
+// ─── Text(行内文本,支持 antd ellipsis / copyable / color)──────────────────
 
-export type TextType = 'default' | 'secondary' | 'success' | 'warning' | 'danger';
+/**
+ * Text 语义色 6 档(见 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md))。
+ * 字面与 OpenTrek tokens 对齐:
+ * - antd `secondary` → `muted`(对齐 `--muted-foreground`)
+ * - antd `danger`    → `destructive`(对齐 `--destructive`)
+ * - **不收 `info`** — 如需信息色,用 `primary`。
+ */
+export type TextColor =
+  | 'default'
+  | 'muted'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'destructive';
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
-   * 语义色(antd `type` 并集)。
+   * 语义色 — 6 档枚举,字面与 OpenTrek tokens 对齐(见 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md))。
+   * antd `type` 迁移:`secondary`→`muted`、`danger`→`destructive`。
    * @default "default"
    */
-  type?: TextType;
+  color?: TextColor;
   /**
    * 删除线。
    * @default false
@@ -141,18 +152,19 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   copyable?: boolean | { text: string; tooltips?: [string, string] };
 }
 
-const typeColor: Record<TextType, string> = {
+const colorClass: Record<TextColor, string> = {
   default: 'text-foreground',
-  secondary: 'text-muted-foreground',
+  muted: 'text-muted-foreground',
+  primary: 'text-primary',
   success: 'text-success',
   warning: 'text-warning',
-  danger: 'text-destructive',
+  destructive: 'text-destructive',
 };
 
 const Text = React.forwardRef<HTMLSpanElement, TextProps>(
   (
     {
-      type = 'default',
+      color = 'default',
       delete: del = false,
       disabled = false,
       strong = false,
@@ -171,8 +183,8 @@ const Text = React.forwardRef<HTMLSpanElement, TextProps>(
         typeof copyable === 'object' && copyable.text
           ? copyable.text
           : typeof children === 'string'
-            ? children
-            : '';
+          ? children
+          : '';
       void navigator.clipboard?.writeText(text).then(() => {
         setCopied(true);
         window.setTimeout(() => setCopied(false), 1500);
@@ -180,7 +192,7 @@ const Text = React.forwardRef<HTMLSpanElement, TextProps>(
     };
 
     const cls = cn(
-      typeColor[type],
+      colorClass[color],
       strong && 'font-semibold',
       del && 'line-through',
       disabled && 'cursor-not-allowed select-none opacity-50',
@@ -201,7 +213,7 @@ const Text = React.forwardRef<HTMLSpanElement, TextProps>(
             type="button"
             onClick={handleCopy}
             aria-label={copied ? '已复制' : '复制'}
-            className="rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="cursor-pointer rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           >
             {copied ? (
               <Check className="size-3.5 text-success" />
@@ -224,18 +236,19 @@ Text.displayName = 'Text';
 
 // ─── Link(antd 风格,默认下划线 hover)────────────────────────────────────
 
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** 语义色(同 Text 的 type)。 @default "default" */
-  type?: TextType;
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** 语义色(同 Text 的 color)。 @default "default" */
+  color?: TextColor;
 }
 
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ className, type = 'default', ...props }, ref) => (
+  ({ className, color = 'default', ...props }, ref) => (
     <a
       ref={ref}
       className={cn(
         'underline-offset-4 transition-colors hover:underline',
-        type === 'default' ? 'text-primary' : typeColor[type],
+        color === 'default' ? 'text-primary' : colorClass[color],
         className,
       )}
       {...props}

package/src/components/upload/upload.meta.md

@@ -3,7 +3,7 @@ id: upload
 name: Upload
 displayName: 上传
 type: component
-category: form
+category: data-entry
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -26,38 +26,37 @@ package: '@teamix-evo/ui'
 ## Props
 
 <!-- auto:props:begin -->
-
-| 名称           | 类型                                                    | 默认值  | 必填 | 说明                                                                       |
-| -------------- | ------------------------------------------------------- | ------- | ---- | -------------------------------------------------------------------------- |
-| `fileList`     | `UploadFileItem[]`                                      | –       | –    | 已上传文件列表(受控)— 不传则组件内部维护本地列表(限制少,通常配 onChange)。 |
-| `accept`       | `string`                                                | –       | –    | 文件接受类型(等价 input.accept) — e.g. `image/*`, `.pdf,.docx`。           |
-| `multiple`     | `boolean`                                               | `false` | –    | 是否支持多文件选择(antd `multiple` 并集)。                                 |
-| `maxCount`     | `number`                                                | –       | –    | 最大文件数(超出则忽略,触发 `onExceed`)。                                   |
-| `maxSize`      | `number`                                                | –       | –    | 单文件最大字节数(超出则忽略,触发 `onExceed`)。                             |
-| `dragger`      | `boolean`                                               | `false` | –    | 启用拖拽上传(antd `Dragger` 并集) — 显示大块虚线区,可点击亦可拖拽。        |
-| `disabled`     | `boolean`                                               | –       | –    | 禁用上传(已选文件不可删除)。                                               |
-| `showFileList` | `boolean`                                               | `true`  | –    | 是否显示文件列表(antd `showUploadList` 并集)。                             |
-| `onChange`     | `(next: UploadFileItem[]) => void`                      | –       | –    | 文件被添加(用户选择 / 拖入)时的回调 — 返回更新后的列表。                   |
-| `onRemove`     | `(file: UploadFileItem) => void`                        | –       | –    | 文件被移除时的回调。                                                       |
-| `onExceed`     | `(rejected: File[], reason: 'count' \| 'size') => void` | –       | –    | 超出 maxCount / maxSize 时的回调。                                         |
-| `children`     | `React.ReactNode`                                       | –       | –    | 触发器自定义内容(非 dragger 模式下渲染于 Button 内)。                      |
-| `className`    | `string`                                                | –       | –    | –                                                                          |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `fileList` | `UploadFileItem[]` | – | – | 已上传文件列表(受控)— 不传则组件内部维护本地列表(限制少,通常配 onChange)。 |
+| `accept` | `string` | – | – | 文件接受类型(等价 input.accept) — e.g. `image/*`, `.pdf,.docx`。 |
+| `multiple` | `boolean` | `false` | – | 是否支持多文件选择(antd `multiple` 并集)。 |
+| `maxCount` | `number` | – | – | 最大文件数(超出则忽略,触发 `onExceed`)。 |
+| `maxSize` | `number` | – | – | 单文件最大字节数(超出则忽略,触发 `onExceed`)。 |
+| `beforeUpload` | `( file: File, fileList: File[], ) => boolean \| File \| void \| Promise<boolean \| File \| void>` | – | – | 文件添加前的校验钩子(antd `beforeUpload` 并集)。 - 返回 `false` 拒绝当前文件 - 返回 `true` / `undefined` 允许 - 返回 新 `File` 对象可替换原文件(重命名 / 压缩等) - 支持异步 `Promise` 注意: 此钩子在 `maxCount` / `maxSize` 校验**之后**调用。 |
+| `dragger` | `boolean` | `false` | – | 启用拖拽上传(antd `Dragger` 并集) — 显示大块虚线区,可点击亦可拖拽。 |
+| `disabled` | `boolean` | – | – | 禁用上传(已选文件不可删除)。 |
+| `showFileList` | `boolean` | `true` | – | 是否显示文件列表(antd `showUploadList` 并集)。 |
+| `listType` | `'text' \| 'image' \| 'card'` | `"text"` | – | 文件列表的展示形态(antd `listType` 并集) — - `text`(默认):文件名 + 进度条,适用文档上传 - `image`:小缩略图 + 文件名,适用头像 / 附件预览 - `card`:网格大缩略图卡,适用多图上传 / 产品图库 |
+| `onChange` | `(next: UploadFileItem[]) => void` | – | – | 文件被添加(用户选择 / 拖入)时的回调 — 返回更新后的列表。 |
+| `onRemove` | `(file: UploadFileItem) => void` | – | – | 文件被移除时的回调。 |
+| `onExceed` | `(rejected: File[], reason: 'count' \| 'size') => void` | – | – | 超出 maxCount / maxSize 时的回调。 |
+| `children` | `React.ReactNode` | – | – | 触发器自定义内容(非 dragger 模式下渲染于 Button 内)。 |
+| `className` | `string` | – | – | – |
 <!-- auto:props:end -->
 
 ## 依赖
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add upload` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry      | 类型      | 描述                                                                                    |
-| ---------- | --------- | --------------------------------------------------------------------------------------- |
-| `cn`       | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                      |
-| `button`   | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
-| `progress` | component | 进度条 — Radix 线性 + antd 的 status / showInfo / size 并集 + 配套 ProgressCircle 环形  |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
+| `progress` | component | 进度条 — Radix 线性 + antd 的 status / showInfo / size 并集 + 配套 ProgressCircle 环形 |
 
 ### npm 依赖
 
@@ -66,7 +65,6 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律
@@ -118,3 +116,41 @@ const [files, setFiles] = React.useState<UploadFileItem[]>([]);
   }}
 />
 ```
+
+---
+
+## Upload 形态 — 旧库 API → 新映射
+
+> 旧库 `Upload`(hybridcloud,含 Upload.Card / Upload.Dragger 子组件) → 新库 `Upload`(单组件 prop 切换)。
+> 新库**不内置网络层**(XHR/fetch)，由消费方在 `onChange` 中自行上传。
+
+### 命名 & 结构映射
+
+| 旧库                               | 新库                             | 说明                             |
+| ---------------------------------- | -------------------------------- | -------------------------------- |
+| `Upload`                           | `Upload`                         | 组件名相同                       |
+| `Upload.Card`                      | `<Upload listType="card" />`     | 子组件变 prop                    |
+| `Upload.Dragger`                   | `<Upload dragger />`             | 子组件变 prop                    |
+| `value / defaultValue`             | `fileList`                       | 文件列表(受控)                   |
+| `limit`                            | `maxCount`                       | 最大文件数                       |
+| `dragable`                         | `dragger`                        | 拖拽上传 prop                    |
+| `action / headers / method`        | 无(消费方自行请求)               | 架构差异:无内置 XHR              |
+| `onSuccess / onError / onProgress` | 无(通过 fileList.status/percent) | 状态驱动而非回调                 |
+| `beforeUpload`                     | _(未来 P1)_                      | MVP 用 accept + maxSize 前置过滤 |
+| `autoUpload`                       | _(未来 P1)_                      | MVP 仅选件,上传由消费方控制      |
+| `itemRender`                       | _(未来 P2)_                      | MVP 使用内置渲染                 |
+| `shape='card'`                     | `listType='card'` + dragger      | 组合代替                         |
+| `useDataURL`                       | 不复刻                           | 消费方 FileReader                |
+| `progressProps`                    | 不复刻                           | 内置简化 Progress                |
+| `isPreview / renderPreview`        | 不复刻                           | 无预览态                         |
+| `fileKeyName`                      | 不复刻                           | 固定用 uid                       |
+
+### 迁移 FAQ
+
+| 问题                | 回答                                                                                 |
+| ------------------- | ------------------------------------------------------------------------------------ |
+| 无 action 怎么上传? | 在 `onChange` 中拿到 `file` 对象，自行 fetch/XHR;通过 `setFiles` 更新 status/percent |
+| 怎么实现拖拽?       | `<Upload dragger />` 即可;虚线区域点击/拖放均可触发                                  |
+| 怎么限制文件类型?   | `accept="image/*"` 或 `accept=".pdf,.docx"`                                          |
+| 怎么显示上传进度?   | fileList item 设 `status:'uploading'` + `percent:50`                                 |
+| Card 模式怎么用?    | `<Upload listType="card" dragger />` — 网格缩略图 + 拖拽区                           |

package/src/components/upload/upload.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Upload, type UploadFileItem } from './upload';
 
 const meta: Meta<typeof Upload> = {
-  title: '表单与输入 · Form/Upload',
+  title: '数据录入 · Data Entry/Upload',
   component: Upload,
   tags: ['autodocs'],
   parameters: {
@@ -19,8 +19,12 @@ const meta: Meta<typeof Upload> = {
     dragger: { control: 'boolean' },
     disabled: { control: 'boolean' },
     accept: { control: 'text' },
+    listType: {
+      control: 'inline-radio',
+      options: ['text', 'image', 'card'],
+    },
   },
-  args: { multiple: false, dragger: false, disabled: false },
+  args: { multiple: false, dragger: false, disabled: false, listType: 'text' },
 };
 
 export default meta;
@@ -67,3 +71,65 @@ export const Disabled: Story = {
   parameters: { controls: { disable: true } },
   render: () => <Upload dragger disabled />,
 };
+
+// ─── listType · 三种列表形态 ────────────────────────────────────
+
+const imageDemoFiles: UploadFileItem[] = [
+  {
+    uid: 'img-1',
+    name: 'avatar.png',
+    status: 'done',
+    thumbUrl: 'https://github.com/shadcn.png',
+  },
+  {
+    uid: 'img-2',
+    name: 'cover.jpg',
+    status: 'done',
+    thumbUrl: 'https://placehold.co/200x200/e5e7eb/6b7280?text=Cover',
+  },
+  { uid: 'img-3', name: 'broken.png', status: 'error' },
+];
+
+export const ListTypeImage: Story = {
+  name: 'listType="image" · 缩略图列表',
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [files, setFiles] = React.useState<UploadFileItem[]>(imageDemoFiles);
+    return (
+      <Upload
+        listType="image"
+        accept="image/*"
+        multiple
+        fileList={files}
+        onChange={setFiles}
+      />
+    );
+  },
+};
+
+export const ListTypeCard: Story = {
+  name: 'listType="card" · 网格卡',
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [files, setFiles] = React.useState<UploadFileItem[]>([
+      ...imageDemoFiles,
+      {
+        uid: 'img-4',
+        name: 'uploading.png',
+        status: 'uploading',
+        percent: 65,
+        thumbUrl: 'https://placehold.co/200x200/dbeafe/1d4ed8?text=65%25',
+      },
+    ]);
+    return (
+      <Upload
+        dragger
+        listType="card"
+        accept="image/*"
+        multiple
+        fileList={files}
+        onChange={setFiles}
+      />
+    );
+  },
+};

package/src/components/upload/upload.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { File, Upload as UploadIcon, X } from 'lucide-react';
+import {
+  File,
+  Image as ImageIcon,
+  Upload as UploadIcon,
+  X,
+} from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 import { Button } from '@/components/button/button';
@@ -20,6 +25,11 @@ export interface UploadFileItem {
   percent?: number;
   /** 上传完成后的远程 URL(可选)。 */
   url?: string;
+  /**
+   * 缩略图 URL(可选) — `listType="image"|"card"` 时以此为展示源;
+   * 未传时回退为 `url` 或默认文件图标。
+   */
+  thumbUrl?: string;
 }
 
 export interface UploadProps {
@@ -44,6 +54,19 @@ export interface UploadProps {
    * 单文件最大字节数(超出则忽略,触发 `onExceed`)。
    */
   maxSize?: number;
+  /**
+   * 文件添加前的校验钩子(antd `beforeUpload` 并集)。
+   * - 返回 `false` 拒绝当前文件
+   * - 返回 `true` / `undefined` 允许
+   * - 返回 新 `File` 对象可替换原文件(重命名 / 压缩等)
+   * - 支持异步 `Promise`
+   *
+   * 注意: 此钩子在 `maxCount` / `maxSize` 校验**之后**调用。
+   */
+  beforeUpload?: (
+    file: File,
+    fileList: File[],
+  ) => boolean | File | void | Promise<boolean | File | void>;
   /**
    * 启用拖拽上传(antd `Dragger` 并集) — 显示大块虚线区,可点击亦可拖拽。
    * @default false
@@ -56,6 +79,14 @@ export interface UploadProps {
    * @default true
    */
   showFileList?: boolean;
+  /**
+   * 文件列表的展示形态(antd `listType` 并集) —
+   *   - `text`(默认):文件名 + 进度条,适用文档上传
+   *   - `image`:小缩略图 + 文件名,适用头像 / 附件预览
+   *   - `card`:网格大缩略图卡,适用多图上传 / 产品图库
+   * @default "text"
+   */
+  listType?: 'text' | 'image' | 'card';
   /** 文件被添加(用户选择 / 拖入)时的回调 — 返回更新后的列表。 */
   onChange?: (next: UploadFileItem[]) => void;
   /** 文件被移除时的回调。 */
@@ -82,9 +113,11 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
       dragger = false,
       disabled = false,
       showFileList = true,
+      listType = 'text',
       onChange,
       onRemove,
       onExceed,
+      beforeUpload,
       children,
       className,
     },
@@ -102,7 +135,7 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
       onChange?.(next);
     };
 
-    const addFiles = (files: File[]) => {
+    const addFiles = async (files: File[]) => {
       if (disabled || files.length === 0) return;
       let candidate = files;
 
@@ -121,6 +154,28 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
         candidate = candidate.slice(0, remaining);
       }
 
+      // beforeUpload 钩子 — 逐文件校验
+      if (beforeUpload) {
+        const accepted: File[] = [];
+        for (const f of candidate) {
+          try {
+            const result = await beforeUpload(f, candidate);
+            if (result === false) continue; // 拒绝
+            if (result instanceof globalThis.File) {
+              accepted.push(result); // 替换文件
+            } else {
+              accepted.push(f); // 允许原文件
+            }
+          } catch {
+            // Promise reject = 拒绝
+            continue;
+          }
+        }
+        candidate = accepted;
+      }
+
+      if (candidate.length === 0) return;
+
       const items: UploadFileItem[] = candidate.map((f) => ({
         uid: makeUid(),
         name: f.name,
@@ -175,7 +230,7 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
         onDragLeave={() => setDragOver(false)}
         onDrop={onDrop}
         className={cn(
-          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed bg-muted/30 px-6 py-10 text-center text-sm text-muted-foreground transition-colors',
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-border border-dashed bg-muted/30 px-6 py-10 text-center text-xs text-muted-foreground transition-colors',
           'hover:border-primary/50 hover:bg-muted/50',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
           dragOver && 'border-primary bg-primary/5',
@@ -185,7 +240,9 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
         {children ?? (
           <>
             <UploadIcon className="size-8 text-primary/70" />
-            <div className="font-medium text-foreground">点击或拖拽文件到此处上传</div>
+            <div className="font-medium text-foreground">
+              点击或拖拽文件到此处上传
+            </div>
             <div className="text-xs">
               {multiple ? '可选择多个文件' : '仅支持单个文件'}
               {accept ? ` · 限 ${accept}` : null}
@@ -218,43 +275,119 @@ const Upload = React.forwardRef<HTMLDivElement, UploadProps>(
         />
         {trigger}
         {showFileList && current.length > 0 ? (
-          <ul className="flex flex-col gap-2">
-            {current.map((f) => (
-              <li
-                key={f.uid}
-                className={cn(
-                  'flex items-center gap-3 rounded-md border bg-card px-3 py-2 text-sm',
-                  f.status === 'error' && 'border-destructive/40',
-                )}
-              >
-                <File className="size-4 shrink-0 text-muted-foreground" />
-                <div className="flex min-w-0 flex-1 flex-col gap-1">
-                  <span
+          listType === 'card' ? (
+            <ul
+              className="grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-3"
+              role="list"
+            >
+              {current.map((f) => {
+                const thumb = f.thumbUrl ?? f.url;
+                return (
+                  <li
+                    key={f.uid}
                     className={cn(
-                      'truncate',
-                      f.status === 'error' && 'text-destructive',
+                      'group/uc relative flex aspect-square flex-col items-center justify-center overflow-hidden rounded-md border border-border bg-card text-center text-xs',
+                      f.status === 'error' && 'border-destructive/40',
                     )}
-                    title={f.name}
                   >
-                    {f.name}
-                  </span>
-                  {f.status === 'uploading' ? (
-                    <Progress value={f.percent ?? 0} size="sm" />
-                  ) : null}
-                </div>
-                {!disabled ? (
-                  <button
-                    type="button"
-                    aria-label={`移除 ${f.name}`}
-                    onClick={() => remove(f.uid)}
-                    className="rounded-sm p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    {thumb ? (
+                      <img
+                        src={thumb}
+                        alt={f.name}
+                        className="size-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex flex-col items-center gap-1 px-2 text-muted-foreground">
+                        <ImageIcon className="size-6" />
+                        <span
+                          className={cn(
+                            'line-clamp-2 break-all',
+                            f.status === 'error' && 'text-destructive',
+                          )}
+                          title={f.name}
+                        >
+                          {f.name}
+                        </span>
+                      </div>
+                    )}
+                    {f.status === 'uploading' ? (
+                      <div className="absolute inset-x-0 bottom-0 bg-background/85 px-2 py-1">
+                        <Progress value={f.percent ?? 0} size="sm" />
+                      </div>
+                    ) : null}
+                    {!disabled ? (
+                      <button
+                        type="button"
+                        aria-label={`移除 ${f.name}`}
+                        onClick={() => remove(f.uid)}
+                        className="absolute right-1 top-1 cursor-pointer rounded-sm bg-background/80 p-1 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/uc:opacity-100"
+                      >
+                        <X className="size-3.5" />
+                      </button>
+                    ) : null}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {current.map((f) => {
+                const isImage = listType === 'image';
+                const thumb = f.thumbUrl ?? f.url;
+                return (
+                  <li
+                    key={f.uid}
+                    className={cn(
+                      'flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs',
+                      f.status === 'error' && 'border-destructive/40',
+                    )}
                   >
-                    <X className="size-4" />
-                  </button>
-                ) : null}
-              </li>
-            ))}
-          </ul>
+                    {isImage ? (
+                      <div className="size-10 shrink-0 overflow-hidden rounded-sm border border-border bg-muted">
+                        {thumb ? (
+                          <img
+                            src={thumb}
+                            alt={f.name}
+                            className="size-full object-cover"
+                          />
+                        ) : (
+                          <div className="flex size-full items-center justify-center text-muted-foreground">
+                            <ImageIcon className="size-4" />
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <File className="size-4 shrink-0 text-muted-foreground" />
+                    )}
+                    <div className="flex min-w-0 flex-1 flex-col gap-1">
+                      <span
+                        className={cn(
+                          'truncate',
+                          f.status === 'error' && 'text-destructive',
+                        )}
+                        title={f.name}
+                      >
+                        {f.name}
+                      </span>
+                      {f.status === 'uploading' ? (
+                        <Progress value={f.percent ?? 0} size="sm" />
+                      ) : null}
+                    </div>
+                    {!disabled ? (
+                      <button
+                        type="button"
+                        aria-label={`移除 ${f.name}`}
+                        onClick={() => remove(f.uid)}
+                        className="cursor-pointer rounded-sm p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      >
+                        <X className="size-4" />
+                      </button>
+                    ) : null}
+                  </li>
+                );
+              })}
+            </ul>
+          )
         ) : null}
       </div>
     );