agentcss 0.16.1 → 0.24.0

package/02-primitives/upload/README.md

@@ -0,0 +1,142 @@
+# upload · 文件上传
+
+> 本库表单控件一直是"缺一块"的状态：input / select / choice / switch 都有，
+> 唯独没有"选文件"。于是每个项目自己糊一个 `<input type=file>`，
+> 它长得和全站不一样，而且拖放区、多文件、失败原因全缺。
+
+## 两层形态
+
+| 形态 | 需要 JS | 得到什么 |
+|---|---|---|
+| `.upload` | **不需要** | 原生 `<input type=file>` + 美化过的 `::file-selector-button`；原生文件名回显、表单提交、`accept` 过滤全走浏览器 |
+| `.upload--drop` | 需要 | 在上面加一层拖放区 + 文件列表 + 大小/类型/数量校验 + 移除 |
+
+`.upload--drop` 是**加**在基础形态上的一层，不是替代品。原生 `<input>` 始终在 DOM 里、
+始终可聚焦、始终在表单里。
+
+## 用法
+
+```html
+<!-- ① 基础：零 JS -->
+<link rel="stylesheet" href="upload.css">
+<input class="upload__input" type="file" id="f1" name="statement" accept=".csv,.xlsx">
+<label class="field__label" for="f1">导入对账单</label>
+
+<!-- ② 增强：拖放区 + 列表 -->
+<link rel="stylesheet" href="upload.css">
+<script src="upload.js"></script>
+
+<div class="upload upload--drop" data-upload data-max-size="20971520" data-max-files="5">
+  <input class="upload__input" type="file" id="f2" name="files" multiple
+         accept=".pdf,.xlsx" aria-describedby="f2-hint">
+  <!-- 拖放区是 label for：点它 = 原生打开选择器，这一步不依赖 JS。
+       ⚠️ 不要给它加 aria-hidden：加了它就从无障碍树里消失，
+          input 只能靠外面的 .field__label 拿名字 —— 少写一个就是 axe critical。
+          （0.18.0 的 axe 实测：对比块里漏了 .field__label ⇒ label 违规。） -->
+  <label class="upload__dropzone" for="f2">
+    <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+         stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+    </svg>
+    <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+    <span class="upload__hint">PDF / XLSX，单个不超过 20 MB</span>
+  </label>
+  <ul class="upload__list"></ul>
+  <span class="upload__status" role="status" aria-live="polite"></span>
+</div>
+<p class="field__hint" id="f2-hint">可以一次选多个</p>
+```
+
+## 声明式属性（写在 `.upload` 根上）
+
+| 属性 | 含义 | 默认 |
+|---|---|---|
+| `data-upload` | 自动初始化标记 | — |
+| `data-max-size` | 单文件上限（**字节**） | 0 = 不限 |
+| `data-max-files` | 文件数上限 | 0 = 不限（`multiple` 时）／1（单选时） |
+| `data-state` | **输出**：`dragover` 时存在 | — |
+| `data-count` | **输出**：当前文件数（供"没选文件就不让提交"用） | `"0"` |
+
+## JS API
+
+```js
+var u = document.getElementById('f2').closest('.upload').uploadInstance;
+// 或 new Upload(root, { maxSize: 20 * 1024 * 1024 })
+```
+
+| 成员 | 说明 |
+|---|---|
+| `add(files[, dirCount])` | 收下一批文件（= 拖放入口）。**走同一条校验**，返回是否至少收下一个 |
+| `removeAt(i)` | 移除第 i 个；返回 false 表示浏览器不支持写 `input.files` |
+| `setProgress(i, pct)` | `0–99` 上传中；`-1` 或 `>=100` 标记完成并去掉进度条 |
+| `render()` | 从 `input.files` 重画列表（你手动改了 `files` 之后调它） |
+| `destroy()` | 解绑全部监听 |
+
+### 事件
+
+```js
+document.addEventListener('fl-upload', function (e) {
+  e.target  // .upload 根元素（认它，别认事件名 —— 嵌套组件会冒泡到一起）
+  e.detail  // { files: File[], added: number, removed?: File, rejected: {file, reason, text}[] }
+});
+```
+
+`reason` 取值：`size` / `type` / `count` / `dir` / `unsupported`。
+
+> ⚠️ **程序性改 `input.files` 不会触发原生 `change`**（这是规范，不是本库的选择）。
+> 本组件不补发假 `change`（那会形成"渲染两遍"的循环），
+> 所以 **HTML 表单校验请监听 `fl-upload`，不要监听 `change`**。
+
+## 三条硬约定
+
+### 1 · `input.files` 是唯一真值，列表是镜像
+
+拖放不是"第二条通道"：它把文件塞进 `input.files`，然后重画。
+代价是**再次选择/拖入会替换整个列表**（与原生 `<input multiple>` 一致）。
+不做"下一次追加"—— 否则同一个控件里存在两种累加规则，迟早打架。
+
+### 2 · 校验只有一份实现
+
+拖放与原生选择都调 `_validate`。写成两遍的后果不是"难看"，是它们会**漂移**：
+某天给拖放加了大小限制，忘了给原生选择加 ⇒ 同一页面上，
+拖进去的被拒、点选进去的通过。这种 bug 只有用户会碰到。
+
+`accept` 必须二次校验：它只约束**文件选择器**，拖放完全绕过它。
+只写 `accept=".pdf"` 而拖入 `.exe` 时，浏览器不会拦 —— 这是规范行为。
+
+### 3 · `DataTransfer` 不存在时，拖放明确拒绝
+
+老 Safari（< 14.1）没有 `new DataTransfer()` ⇒ `input.files` 不可写。
+此时照样渲染列表、照样派发事件，用户会看到"文件进去了"，点提交却什么都没有，
+**且不报错**。所以本组件直接提示"当前浏览器不支持拖放，请点选择文件"，不接收。
+
+## 无障碍
+
+- **状态不只靠颜色**：左侧图形（空心圆 / 勾 / 叹号）+ 右侧文本（"上传中 42%" / "2.4 MB" / "超过 20 MB"）。
+  灰度打印、色盲、强制色三种条件下信息都不丢。
+- **播报走单独的 `role="status"`**，不给 `<ul>` 加 `aria-live` ——
+  后者会把"进度 42% → 43%"每 200ms 打断一次。
+  同一句话连续播两次时读屏不再读，所以 `announce()` 先清空再延迟写入。
+- **移除按钮的 `aria-label` 带文件名**（"移除 2025年度审计报告.pdf"），
+  否则读屏用户听到一排"移除、移除、移除"。
+- 拖放区是 `<label for>`，本身**不进 Tab 序列**（焦点属于 input）；
+  聚焦时焦点环画在 dropzone 上，视觉上看到的是"这一块被选中了"。
+- **可访问名字来自两处**：`.field__label`（"上传审计底稿"）与 dropzone 里的文字。
+  读屏会连着念，略啰嗦，但这是**安全的冗余** —— 只用 dropzone、不写 `.field__label`
+  的页面也有名字。反过来（dropzone 加 `aria-hidden`、靠 `.field__label` 给名）
+  看起来更干净，代价是少写一个 label 就变成 axe critical，而且没有任何门禁拦得住。
+- 强制色模式下**不需要额外 media query**：边界全是 `border`（会自动变 CanvasText 实线），
+  图标全是内联 SVG + `currentColor`。这是 0.17.0 逐页实拍定下的两条规律。
+
+## 何时**不该**用
+
+- **需要断点续传 / 分片上传** ⇒ 这不是纯前端控件能解决的，本组件只负责"选与校验"，
+  传输交给你的上传库。它不发送任何请求。
+- **单个文件且没有校验** ⇒ 用基础形态（`.upload__input` 一行）就够了，不要套拖放区。
+- **图片裁剪/预览** ⇒ 需要 canvas 预览与交互，超出本组件范围。
+
+## 相关
+
+- `progress` —— 列表里的进度条复用它；没引入时退化成空槽，不报错
+- `field`（在 `input` 里）—— `field__label` / `field__hint` / `field__error` 的外层结构
+- `form-validation` —— 提交前校验；错误提示用 `field__error` + `aria-describedby`

package/02-primitives/upload/demo.html

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>文件上传 · upload</title>
+<link rel="stylesheet" href="../../01-tokens/tokens.css">
+<link rel="stylesheet" href="../../01-tokens/typography.css">
+<link rel="stylesheet" href="../../01-tokens/page.css">
+<link rel="stylesheet" href="../input/input.css">
+<link rel="stylesheet" href="../progress/progress.css">
+<link rel="stylesheet" href="upload.css">
+<script src="upload.js"></script>
+<style>
+.demo {
+  background: var(--surface);
+  border: 1px solid var(--border-decor);
+  border-radius: var(--r-md);
+  padding: var(--sp-4);
+  margin-bottom: var(--sp-3);
+}
+.demo + .note { margin-top: 0; }
+/* 演示用：窄槽 */
+.cq-narrow {
+  max-width: 240px;
+  padding: var(--sp-3);
+  border: 1px dashed var(--border-decor);
+  border-radius: var(--r-md);
+}
+/* 演示用：把"上传中"的进度定住，视觉基线才不会拍到动画中间帧 */
+.frozen { margin-top: var(--sp-2); }
+</style>
+</head>
+<body class="page">
+<main class="wrap">
+
+<h1>文件上传 · upload</h1>
+<p class="lede">上传是「导入 CSV / 附一份财报 / 传凭证」的必经入口。这个组件的核心不在拖放区好看，
+而在于：<b>JS 没加载时它仍然是能用的</b>，以及文件有没有真的进到表单里。</p>
+
+<h2>1 · 基础形态：零 JS 也能用</h2>
+<div class="demo">
+  <div class="field">
+    <label class="field__label" for="u-basic">导入对账单</label>
+    <input class="upload__input" type="file" id="u-basic" name="statement"
+           accept=".csv,.xlsx" aria-describedby="u-basic-hint">
+    <p class="field__hint" id="u-basic-hint">支持 CSV / XLSX，单个不超过 20 MB</p>
+  </div>
+</div>
+<p class="note">这一块<b>没有任何 JS</b>：浏览器原生的"选择文件"按钮经
+<code>::file-selector-button</code> 美化，选完立刻在按钮右侧回显文件名 ——
+不需要脚本读 <code>files</code> 再写进 DOM。表单提交、<code>FormData</code>、
+<code>accept</code> 过滤全走原生路径。</p>
+
+<h2>2 · 增强形态：拖放区 + 文件列表</h2>
+<div class="demo">
+  <div class="field">
+    <label class="field__label" for="u-drop">上传审计底稿</label>
+    <div class="upload upload--drop" id="u-drop-wrap" data-upload data-max-size="20971520">
+      <input class="upload__input" type="file" id="u-drop" name="workpapers" multiple
+             accept=".pdf,.xlsx,.csv" aria-describedby="u-drop-hint">
+      <label class="upload__dropzone" for="u-drop">
+        <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+        </svg>
+        <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+        <span class="upload__hint">PDF / XLSX / CSV，单个不超过 20 MB</span>
+      </label>
+      <ul class="upload__list"></ul>
+      <span class="upload__status" role="status" aria-live="polite"></span>
+    </div>
+    <p class="field__hint" id="u-drop-hint">可以一次选多个；再次拖入会<b>替换</b>整个列表</p>
+  </div>
+</div>
+<p class="note">拖放区是一个 <code>&lt;label for&gt;</code>：点它 = 原生打开选择器，
+这一步不依赖 JS。脚本只负责三件事 —— 把拖入的 <code>File</code> 塞进
+<code>input.files</code>、重画列表、派发 <code>fl-upload</code>。
+所以 <code>&lt;form&gt;</code> 拿到的永远是真实文件，不是"组件自己记的一份清单"。</p>
+
+<h2>3 · 上传中：进度既是图形也是文字</h2>
+<div class="demo">
+  <ul class="upload__list">
+    <li class="upload__item" data-state="pending">
+      <span class="upload__mark">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M8 1.7a6.3 6.3 0 1 0 0 12.6A6.3 6.3 0 0 0 8 1.7zM8 4.6V8l2.3 1.5"/></svg>
+        <span class="upload__status">待上传</span>
+      </span>
+      <span class="upload__name">2025年度审计报告.pdf</span>
+      <span class="upload__meta num">上传中 42%</span>
+      <span class="upload__progress">
+        <span class="progress"><span class="progress__bar" style="--progress:42%"></span></span>
+      </span>
+      <button class="upload__remove" type="button" aria-label="移除 2025年度审计报告.pdf">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6"/></svg>
+      </button>
+    </li>
+    <li class="upload__item" data-state="done">
+      <span class="upload__mark">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.3 8.4l3.1 3.1 6.3-6.9"/></svg>
+        <span class="upload__status">已完成</span>
+      </span>
+      <span class="upload__name">应付账款明细.xlsx</span>
+      <span class="upload__meta num">2.4 MB</span>
+      <button class="upload__remove" type="button" aria-label="移除 应付账款明细.xlsx">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6"/></svg>
+      </button>
+    </li>
+    <li class="upload__item" data-state="error">
+      <span class="upload__mark">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M8 1.7a6.3 6.3 0 1 0 0 12.6A6.3 6.3 0 0 0 8 1.7zM8 4.9v3.4M8 11.1v.5"/></svg>
+        <span class="upload__status">失败</span>
+      </span>
+      <span class="upload__name">往来余额扫描件.pdf</span>
+      <span class="upload__meta num">超过 20 MB</span>
+    </li>
+  </ul>
+</div>
+<p class="note">三个状态的差别<b>不只是颜色</b>：左侧图形（空心圆 / 勾 / 叹号）、
+中间文件名的灰度、以及右侧那行文字（"上传中 42%" / "2.4 MB" / "超过 20 MB"）。
+把这一块截图转成灰度打印，信息一条都不丢。</p>
+
+<h2>4 · 校验拒绝：一个都没收进来</h2>
+<div class="demo">
+  <div class="field">
+    <label class="field__label" for="u-reject">上传凭证</label>
+    <div class="upload upload--drop" id="u-reject-wrap" data-upload
+         data-max-size="20971520" data-max-files="3">
+      <input class="upload__input" type="file" id="u-reject" name="proofs" multiple
+             accept=".pdf,.jpg,.png" aria-describedby="u-reject-hint">
+      <label class="upload__dropzone" for="u-reject">
+        <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+        </svg>
+        <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+        <span class="upload__hint">PDF / JPG / PNG，单个不超过 20 MB，最多 3 个</span>
+      </label>
+      <ul class="upload__list"></ul>
+      <span class="upload__status" role="status" aria-live="polite"></span>
+    </div>
+    <p class="field__hint" id="u-reject-hint">下面这一组是脚本真实拖入 3 个不合规文件的结果</p>
+  </div>
+</div>
+<p class="note">被拒的文件<b>不会进入 <code>input.files</code></b> ——
+它们根本没被接收，所以提交时不会悄悄带上一个 30 MB 的扫描件。
+拒绝原因写在文件名的位置，不是只把边框变红。</p>
+
+<h2>5 · 紧凑档（侧栏 / 抽屉）</h2>
+<div class="demo">
+  <div class="upload upload--drop upload--compact" data-upload>
+    <input class="upload__input" type="file" id="u-compact" name="att" multiple>
+    <label class="upload__dropzone" for="u-compact" aria-label="添加附件">
+      <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+           stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+      </svg>
+      <span class="upload__title">添加附件</span>
+    </label>
+    <ul class="upload__list"></ul>
+    <span class="upload__status" role="status" aria-live="polite"></span>
+  </div>
+</div>
+
+<h2>6 · 槽宽适配（看槽宽，不看视口）</h2>
+<div class="demo">
+  <div class="cq-narrow" data-cq>
+    <div class="upload upload--drop" data-upload>
+      <input class="upload__input" type="file" id="u-cq" name="cq" multiple>
+      <label class="upload__dropzone" for="u-cq" aria-label="窄槽里的上传">
+        <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+        </svg>
+        <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+        <span class="upload__hint">PDF / XLSX</span>
+      </label>
+      <ul class="upload__list"></ul>
+      <span class="upload__status" role="status" aria-live="polite"></span>
+    </div>
+  </div>
+</div>
+<p class="note">左侧这块是 240px 宽的槽（外层加了 <code>data-cq</code>）。
+它比右边窄，但没有"响应式跳跃"：内边距与图标各降一档，限制说明<b>没有</b>被藏起来 ——
+藏掉它，用户就不知道该选什么文件了。</p>
+
+<h2>7 · 禁用</h2>
+<div class="demo">
+  <div class="field">
+    <label class="field__label" for="u-dis">上传补充材料</label>
+    <div class="upload upload--drop" data-upload>
+      <input class="upload__input" type="file" id="u-dis" name="extra" disabled>
+      <label class="upload__dropzone" for="u-dis">
+        <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+        </svg>
+        <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+      </label>
+      <ul class="upload__list"></ul>
+    </div>
+    <p class="field__hint">先在"基础信息"里选好主体类型，这里才能上传</p>
+  </div>
+</div>
+<p class="note">禁用不用 <code>opacity</code>：半透明会让文字对比度随底色漂移，
+暗色下直接不达标。这里换的是<b>明确色值</b>，边框同时从虚线变实线 ——
+不用颜色也能看出"这一档不一样"。</p>
+
+<h2 class="rule-bottom">对比：两种"拖放区"</h2>
+<div class="cmp">
+  <div class="cmp__pane cmp__bad" data-bad=".upload__input|focus|=0">
+    <h3>❌ 常见写法：拖放区是唯一入口</h3>
+    <div class="upload upload--drop">
+      <input class="upload__input" type="file" id="u-bad" aria-label="上传文件（反例）" style="display:none">
+      <label class="upload__dropzone" for="u-bad">
+        <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+        </svg>
+        <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+      </label>
+    </div>
+    <p class="cmp__why">把原生 <code>&lt;input&gt;</code> 设成 <code>display:none</code> 图省事 —— 两栏<b>看起来一模一样</b>，差别在键盘：
+    后果是键盘 <kbd>Tab</kbd> 永远聚焦不到它（不可聚焦元素进不了 Tab 序列），
+    读屏也拿不到可访问名字 —— 鼠标用户能用，键盘用户<b>完全无法上传</b>。</p>
+  </div>
+  <div class="cmp__pane cmp__good" data-good=".upload__input|focus|=1">
+    <h3>✅ 本库：隐藏的是像素，不是控件</h3>
+    <div class="upload upload--drop">
+      <input class="upload__input" type="file" id="u-good" aria-label="上传文件">
+      <label class="upload__dropzone" for="u-good">
+        <svg class="upload__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+             stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 11V2.6M4.4 6.2L8 2.6l3.6 3.6M2.6 11.4v1.2a.8.8 0 0 0 .8.8h9.2a.8.8 0 0 0 .8-.8v-1.2"/>
+        </svg>
+        <span class="upload__title">拖入文件，或 <span class="upload__browse">选择文件</span></span>
+      </label>
+    </div>
+    <p class="cmp__why">同样看不见原生控件，但它只是 1px + <code>opacity:0</code>：
+    仍在 Tab 序列里、仍在表单里、仍能被 <code>label</code> 触发。
+    聚焦时焦点环画在拖放区上，用户看到的是"这块被选中了"。</p>
+  </div>
+</div>
+
+<script>
+/* ============================================================================
+   demo 脚本：只做两件事 —— 造出"真的文件"，以及冻结进度
+   ============================================================================
+   ⚠️ 不写动画。视觉基线是逐像素比对的，一个 setInterval 就能让每次截图都不一样，
+   然后"基线过期"会被误读成"组件改坏了"。
+   ========================================================================== */
+(function () {
+  'use strict';
+
+  /* 1 字节的真实 File + 覆盖 size。
+     ⚠️ 不要为了"看起来真实"去 new Uint8Array(30MB)：那是真分配内存，
+        demo 页会多花几十毫秒，也会让无头浏览器在低配 CI 上偶发慢加载。
+        而 size 只是 `_validate` 读的一个数字 —— 覆盖它不影响任何被验证的逻辑。 */
+  function fakeFile(name, size, type) {
+    var f = new File([new Uint8Array(1)], name, { type: type || '' });
+    try { Object.defineProperty(f, 'size', { value: size }); } catch (e) { /* 老引擎不支持就算了 */ }
+    return f;
+  }
+
+  function seed(rootId, list) {
+    var root = document.getElementById(rootId);
+    var inst = root && root.uploadInstance;
+    if (!inst) return;
+    var files = [];
+    for (var i = 0; i < list.length; i++) {
+      files.push(fakeFile(list[i][0], list[i][1], list[i][2]));
+    }
+    inst.add(files, 0);
+  }
+
+  function run() {
+    /* 2 · 增强形态：预置两个已经收下的文件 */
+    seed('u-drop-wrap', [
+      ['应付账款明细.xlsx', 2457600, 'application/vnd.ms-excel'],
+      ['银行存款余额调节表.pdf', 962560, 'application/pdf']
+    ]);
+
+    /* 4 · 校验拒绝：五个各自触发一条规则（类型 / 大小 / 数量） */
+    var rejRoot = document.getElementById('u-reject-wrap');
+    if (rejRoot && rejRoot.uploadInstance) {
+      rejRoot.uploadInstance.add([
+        fakeFile('会议纪要.docx', 120000, 'application/msword'),             /* 类型不符 */
+        fakeFile('往来余额扫描件.pdf', 30 * 1024 * 1024, 'application/pdf'), /* 超过 20 MB */
+        fakeFile('a.pdf', 1024, 'application/pdf'),
+        fakeFile('b.pdf', 2048, 'application/pdf'),
+        fakeFile('c.pdf', 4096, 'application/pdf'),
+        fakeFile('d.pdf', 8192, 'application/pdf')                           /* 超过 3 个 */
+      ], 1);
+    }
+
+    /* 5 · 紧凑档：一个文件，让"有文件时"的样子也在 */
+    var compact = document.querySelector('.upload--compact');
+    if (compact && compact.uploadInstance) {
+      compact.uploadInstance.add([fakeFile('回函.pdf', 358400, 'application/pdf')], 0);
+    }
+  }
+
+  /* upload.js 在 <head> 里加载，它的 init 挂在 DOMContentLoaded 上；
+     本脚本在 body 末尾，此时 readyState 还是 'loading' ⇒ 同样挂事件，
+     且**注册在后** ⇒ 一定在 init 之后跑。若脚本被动态注入（readyState 已就绪）
+     则直接跑 —— upload.js 那边也走"立即 init"分支，顺序依然成立。 */
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', run);
+  } else {
+    run();
+  }
+})();
+</script>
+
+</main>
+</body>
+</html>