Files
aurora-admin/site/m/component/mobile-upload.html
T
aurora-admin b59247231a
Regression / regression (push) Canceled after 0s
feat(安全+品牌): 对外产物发布脱敏(3注入点/2465文件0泄露) + Kole Cup 定稿
安全:CHANGELOG.md 是仓库内部变更流水(含服务器目录、镜像回滚标签、内网网段、
部署时序、AI 工作流用语),此前被 build-site.ps1 / precompute.mjs / build-mobile.mjs
原样注入站点,而站点是公网可下载的静态文件 —— 抓一次 /site/m/changelog.html
即可拿到内网地址段与服务器目录布局。

- 新增 tools/lib/redact-publish.mjs(零依赖,构建期过滤,不改 CHANGELOG.md,
  内部可追溯性完整保留)
- 接入 precompute.mjs(PC data.json/changelog.json)与 build-mobile.mjs
  (移动端更新日志页);build-site.ps1 不碰(ASCII-only 铁律)
- 只处理 changelog 字段:components[].sources 是规范实现源码,逐字保真
  (详情页代码区主动高亮注释,剥注释会破坏该功能)
- 实测消除:/opt/aurora-admin.prev-*、kole-ui-showcase:pre-*、docker compose、
  192.168.5.7、16 位产物指纹、1531/1531、并发会话/本会话/派子 agent
- settings.html 演示占位 IP 192.168.5.0/24(= 真实网段)改为 RFC 5737 的 192.0.2.0/24

品牌:Kole Cup 饮料杯标记定稿(几何 K → 圆角杯盖 + 杯身负空间 K,无吸管),
brand-mark.json 升 schemaVersion 3(paths 支持 { d, evenodd }),
verify:brand 增至 25 条(新增 B9b:负空间必须带 fill-rule)。

验证:发布集 2465 文件全量扫描 0 泄露;PC 回归 100%(1464/1464) ·
移动端 100%(807/807);门禁品牌 25 / 隔离 31 / 移动文档 12 / 示例 9 / 版本 40 / i18n 17 全绿;
已按 AGENTS §九 发布公网,2461/2461 逐字节一致,五项验收全过。

已知未处理(既有缺口,ROADMAP S7-P28 已记录):data.mobile.json 的
meta.generated 为墙上时钟,会让 CI 的「生成物可复现」断言在重跑构建后永远非空;
该 CI 流水线本身亦从未通过(无 runner)。
2026-09-23 07:31:06 +08:00

2542 lines
125 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
(function () {
var m = 'auto';
try { var v = localStorage.getItem('kole-mode'); if (v === 'light' || v === 'dark' || v === 'auto') m = v; } catch (e) {}
var dark = m === 'dark' || (m === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('kole-dark', !!dark);
document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
})();
</script>
<link rel="icon" href="../../assets/kole-mark.svg">
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1C1F26" media="(prefers-color-scheme: dark)">
<title>上传 Upload — Kole UI Mobile</title>
<meta name="description" content="上传 Upload:移动端组件(6 端实现:CSS / H5 原生 / React / Vue 2 / Vue 3 / uni-app)。与 PC 端物理隔离:类名 kole-m-、令牌 --kole-m-。规格来源:移动端规格 46 · 上传 Upload。">
<link rel="stylesheet" href="../../../.design_library/kole-ui-mobile/colors_and_type.css">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<header class="m-top">
<div class="m-top-inner">
<a class="m-logo" href="../index.html">
<span class="m-logo-mark" data-brand-mark="mono" aria-hidden="true"></span>
<span class="m-logo-text">Kole UI<em>移动端</em></span>
</a>
<div class="m-ver-picker" id="m-ver-picker">
<button id="m-ver-trigger" class="m-ver-trigger" type="button" data-single="1" aria-haspopup="listbox" aria-expanded="false" aria-label="选择版本" title="文档版本(清单来自部署根的 versions.json)">
<span id="m-ver">v1.0.0</span>
<svg class="m-ver-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div id="m-ver-menu" class="m-ver-menu hidden" role="listbox" aria-label="文档版本">
<div class="m-ver-menu-head" id="m-ver-head">文档版本</div>
</div>
</div>
<nav class="m-nav"> <a href="../index.html" class="active" aria-current="page">组件总览</a>
<a href="../guide.html">快速开始</a>
<a href="../design.html">设计规范</a>
<a href="../faq.html">常见问题</a>
<a href="../changelog.html">更新日志</a></nav>
<div class="m-mode">
<button id="m-mode-trigger" class="m-mode-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" aria-label="主题模式" title="主题模式">
<svg class="m-mode-icon" id="m-icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="m-mode-icon" id="m-icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg class="m-mode-icon" id="m-icon-auto" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:none"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
<span id="m-mode-cur">自动模式</span>
<svg class="m-mode-caret" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div id="m-mode-menu" class="m-menu hidden" role="listbox" aria-label="主题模式">
<div class="m-menu-head">主题模式</div>
<button class="m-menu-opt" type="button" role="option" data-mode="light" aria-selected="false"><span data-mode-label="light">日间模式</span></button>
<button class="m-menu-opt" type="button" role="option" data-mode="dark" aria-selected="false"><span data-mode-label="dark">夜间模式</span></button>
<button class="m-menu-opt" type="button" role="option" data-mode="auto" aria-selected="true"><span data-mode-label="auto">自动模式</span></button>
</div>
</div>
</div>
</header>
<div class="m-body">
<details class="m-side" open>
<summary><span>移动端导航</span><span class="cur">上传</span></summary>
<nav>
<div class="m-side-section"><span>平台</span></div>
<a class="m-side-link m-side-platform" href="../../index.html"><span class="sp-top"><span class="sp-name">PC 端组件</span></span><span class="sp-sub">103 个中后台组件 · 5 端</span></a>
<a class="m-side-link m-side-platform" href="../index.html"><span class="sp-top"><span class="sp-name">移动端组件</span><span class="sp-badge">当前</span></span><span class="sp-sub">47 个组件 · 6 端 · 含 uni-app</span></a>
<div class="m-side-section"><span>开发指南</span></div>
<a class="m-side-link" href="../index.html">组件总览</a>
<a class="m-side-link" href="../guide.html">快速开始</a>
<a class="m-side-link" href="../design.html">设计规范</a>
<a class="m-side-link" href="../faq.html">常见问题</a>
<a class="m-side-link" href="../changelog.html">更新日志</a>
<a class="m-side-link" href="../platform.html">平台与端<em>移动端</em></a>
<a class="m-side-link" href="../../../tests/mobile/index.html" target="_blank">测试与回归<em>移动端</em></a>
<div class="m-side-section"><span>组件</span><span class="cnt">47</span></div>
<div class="m-side-group"><span>通用</span><span class="cnt">5</span></div>
<a class="m-side-link" href="mobile-button.html">按钮<em>Button</em></a>
<a class="m-side-link" href="mobile-divider.html">分割线<em>Divider</em></a>
<a class="m-side-link" href="mobile-icon.html">图标<em>Icon</em></a>
<a class="m-side-link" href="mobile-layout.html">布局<em>Layout</em></a>
<a class="m-side-link" href="mobile-link.html">链接<em>Link</em></a>
<div class="m-side-group"><span>导航</span><span class="cnt">6</span></div>
<a class="m-side-link" href="navbar.html">顶部导航栏<em>NavBar</em></a>
<a class="m-side-link" href="tabbar.html">底部标签栏<em>TabBar</em></a>
<a class="m-side-link" href="mobile-grid.html">宫格<em>Grid</em></a>
<a class="m-side-link" href="mobile-steps.html">步骤条<em>Steps</em></a>
<a class="m-side-link" href="mobile-segmented.html">分段器<em>Segmented</em></a>
<a class="m-side-link" href="mobile-sticky.html">吸顶容器<em>Sticky</em></a>
<div class="m-side-group"><span>数据录入</span><span class="cnt">16</span></div>
<a class="m-side-link" href="mobile-numberkeyboard.html">数字键盘<em>NumberKeyboard</em></a>
<a class="m-side-link" href="mobile-datepicker.html">日期选择器<em>DatePicker</em></a>
<a class="m-side-link" href="mobile-input.html">输入框<em>Input</em></a>
<a class="m-side-link" href="mobile-search.html">搜索框<em>Search</em></a>
<a class="m-side-link" href="mobile-stepper.html">步进器<em>Stepper</em></a>
<a class="m-side-link" href="mobile-switch.html">开关<em>Switch</em></a>
<a class="m-side-link" href="mobile-textarea.html">多行文本框<em>Textarea</em></a>
<a class="m-side-link" href="mobile-checkbox.html">多选框<em>Checkbox</em></a>
<a class="m-side-link" href="mobile-form.html">表单<em>Form</em></a>
<a class="m-side-link" href="mobile-radio.html">单选框<em>Radio</em></a>
<a class="m-side-link" href="mobile-rate.html">评分<em>Rate</em></a>
<a class="m-side-link" href="mobile-slider.html">滑动选择器<em>Slider</em></a>
<a class="m-side-link" href="mobile-cascader.html">级联选择器<em>Cascader</em></a>
<a class="m-side-link" href="mobile-colorpicker.html">颜色选择器<em>ColorPicker</em></a>
<a class="m-side-link" href="mobile-picker.html">选择器<em>Picker</em></a>
<a class="m-side-link is-active" href="mobile-upload.html" aria-current="page">上传<em>Upload</em></a>
<div class="m-side-group"><span>数据展示</span><span class="cnt">8</span></div>
<a class="m-side-link" href="cell.html">单元格<em>Cell</em></a>
<a class="m-side-link" href="mobile-badge.html">徽标<em>Badge</em></a>
<a class="m-side-link" href="mobile-tag.html">标签<em>Tag</em></a>
<a class="m-side-link" href="mobile-avatar.html">头像<em>Avatar</em></a>
<a class="m-side-link" href="mobile-list.html">列表<em>List</em></a>
<a class="m-side-link" href="mobile-collapse.html">折叠面板<em>Collapse</em></a>
<a class="m-side-link" href="mobile-table.html">表格<em>Table</em></a>
<a class="m-side-link" href="mobile-typography.html">排版<em>Typography</em></a>
<div class="m-side-group"><span>反馈</span><span class="cnt">12</span></div>
<a class="m-side-link" href="actionsheet.html">动作面板<em>ActionSheet</em></a>
<a class="m-side-link" href="pullrefresh.html">下拉刷新<em>PullRefresh</em></a>
<a class="m-side-link" href="swipecell.html">滑动单元格<em>SwipeCell</em></a>
<a class="m-side-link" href="mobile-popup.html">弹出层<em>Popup</em></a>
<a class="m-side-link" href="mobile-toast.html">轻提示<em>Toast</em></a>
<a class="m-side-link" href="mobile-dialog.html">对话框<em>Dialog</em></a>
<a class="m-side-link" href="mobile-noticebar.html">通知栏<em>NoticeBar</em></a>
<a class="m-side-link" href="mobile-loading.html">加载<em>Loading</em></a>
<a class="m-side-link" href="mobile-progress.html">进度条<em>Progress</em></a>
<a class="m-side-link" href="mobile-message.html">消息通知<em>Message</em></a>
<a class="m-side-link" href="mobile-overlay.html">遮罩层<em>Overlay</em></a>
<a class="m-side-link" href="mobile-popover.html">弹出气泡<em>Popover</em></a>
</nav>
</details>
<main class="m-main">
<section class="m-hero">
<h1>上传<span class="en" style="font-family: var(--kole-font-family-num); font-size: 14px; color: var(--kole-color-text-secondary); margin-left: 8px;">Upload</span></h1>
<p>把手机里的文件交给服务端(实名认证的身份证照、报销的发票、工单的附件)</p>
<p style="margin-top: 8px;" class="m-chips">
<span class="m-chip m">数据录入</span>
<span class="m-chip">规格 46 · 上传 Upload</span>
<span class="m-chip">6 端实现</span>
<span class="m-chip">触摸优先</span>
</p>
<div class="m-code" style="margin-top: var(--kole-space-12);">
<div class="m-code-head"><span>引入(H5 原生;其余 5 端见「快速开始」)</span><button class="m-copy" type="button" data-copy="code-import">复制</button></div>
<pre id="code-import"><code>&lt;!-- ① 令牌:PC 令牌 + 移动端 --kole-m-* 合成单文件,引一次 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;kole-ui/mobile/tokens.css&quot;&gt;
&lt;!-- ② 本组件样式(全量则用 kole-ui/mobile/components/index.css) --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;kole-ui/mobile/components/mobile-upload.css&quot;&gt;
&lt;!-- ③ 结构照抄下方任一演示块(类名与 6 端实现一致) --&gt;</code></pre>
</div>
</section>
<section class="m-block">
<h2 id="demo">演示</h2>
<p class="m-sub">每个演示都是真实渲染:预览帧加载 <code>frameworks-mobile/Upload.html?demo=&lt;id&gt;</code>(只显示该演示块),代码是该演示块在演示页里的原文,可复制。全部演示同屏可看 <a href="../../../frameworks-mobile/Upload.html" target="_blank">演示页 ↗</a>。</p>
<h3 class="m-demo-group">01 组件类型</h3>
<div class="m-demo" id="demo-trigger">
<div class="m-demo-head"><span class="m-demo-title">选择触发</span><span class="m-chip">variant=dashed</span></div>
<p class="m-demo-desc">点一下调起系统文件选择器:移动端没有拖拽,这是唯一入口。</p>
<div class="m-demo-stage"><iframe src="../../../frameworks-mobile/Upload.html?demo=trigger" title="上传 Upload · 选择触发" loading="lazy"></iframe></div>
<details class="m-details"><summary>查看代码(演示页原文 · 16 行)</summary>
<div class="m-code"><div class="m-code-head"><span>frameworks-mobile/Upload.html · trigger</span><button class="m-copy" type="button" data-copy="code-demo-1">复制</button></div>
<pre id="code-demo-1"><code>&lt;section class=&quot;demo-block&quot; data-demo=&quot;trigger&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;选择触发(点一下调起系统文件选择器:移动端没有拖拽,这是唯一入口)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-trigger&quot;&gt;
&lt;div class=&quot;kole-m-upload&quot; id=&quot;up-trigger&quot; data-count=&quot;0&quot; data-max=&quot;5&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;附件&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot; id=&quot;up-trigger-count&quot;&gt;0 / 5&lt;/span&gt;
&lt;/div&gt;
&lt;input class=&quot;kole-m-upload__native&quot; id=&quot;up-trigger-input&quot; type=&quot;file&quot; multiple tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
&lt;button class=&quot;kole-m-upload__trigger&quot; type=&quot;button&quot; id=&quot;up-trigger-btn&quot;
data-behavior=&quot;click-sets-attr:#up-trigger|data-picked|true&quot;
aria-describedby=&quot;up-trigger-hint&quot;&gt;+ 选择文件&lt;/button&gt;
&lt;p class=&quot;kole-m-upload__empty&quot; id=&quot;up-trigger-hint&quot;&gt;支持 jpg / png / pdf,单个不超过 10 MB&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre></div>
</details>
</div>
<div class="m-demo" id="demo-states">
<div class="m-demo-head"><span class="m-demo-title">四种状态</span><span class="m-chip">variant=button</span></div>
<p class="m-demo-desc">待上传 / 上传中(60%)/ 成功 / 失败;进度由宿主回传,组件不发请求。</p>
<div class="m-demo-stage"><iframe src="../../../frameworks-mobile/Upload.html?demo=states" title="上传 Upload · 四种状态" loading="lazy"></iframe></div>
<details class="m-details"><summary>查看代码(演示页原文 · 78 行)</summary>
<div class="m-code"><div class="m-code-head"><span>frameworks-mobile/Upload.html · states</span><button class="m-copy" type="button" data-copy="code-demo-2">复制</button></div>
<pre id="code-demo-2"><code>&lt;section class=&quot;demo-block&quot; data-demo=&quot;states&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;四种状态(待上传 / 上传中 60% / 成功 / 失败,均不发真实请求,进度由宿主回传)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-states&quot;&gt;
&lt;div class=&quot;kole-m-upload kole-m-upload--button&quot; id=&quot;up-states&quot; data-count=&quot;4&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;上传队列&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;4 个文件&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-pending&quot; data-assert=&quot;upload-state-pending&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;合同扫描件.pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;待上传&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 合同扫描件.pdf&quot; id=&quot;up-remove-pending&quot;
data-behavior=&quot;click-sets-attr:#up-states|data-removed|pending&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-uploading&quot; style=&quot;--kole-m-upload-percent: 60%&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;产品主图.png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; role=&quot;progressbar&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;
aria-valuenow=&quot;60&quot; aria-label=&quot;产品主图.png 上传进度&quot;&gt;
&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;60%&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;取消 产品主图.png&quot;&gt;取消&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;营业执照.jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 营业执照.jpg&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-error&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;zip&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;素材包.zip&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; role=&quot;progressbar&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;
aria-valuenow=&quot;100&quot; aria-label=&quot;素材包.zip 上传失败&quot;&gt;
&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;超出 10 MB&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action&quot; type=&quot;button&quot; aria-label=&quot;重试 素材包.zip&quot; id=&quot;up-retry&quot;
data-behavior=&quot;click-sets-attr:#up-states|data-retried|zip&quot;&gt;重试&lt;/button&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 素材包.zip&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre></div>
</details>
</div>
<h3 class="m-demo-group">02 组件状态</h3>
<div class="m-demo" id="demo-removable">
<div class="m-demo-head"><span class="m-demo-title">可删除</span><span class="m-chip">状态 removable</span></div>
<p class="m-demo-desc">删除按钮自己 44px 热区;删完后回到空态。</p>
<div class="m-demo-stage"><iframe src="../../../frameworks-mobile/Upload.html?demo=removable" title="上传 Upload · 可删除" loading="lazy"></iframe></div>
<details class="m-details"><summary>查看代码(演示页原文 · 38 行)</summary>
<div class="m-code"><div class="m-code-head"><span>frameworks-mobile/Upload.html · removable</span><button class="m-copy" type="button" data-copy="code-demo-3">复制</button></div>
<pre id="code-demo-3"><code>&lt;section class=&quot;demo-block&quot; data-demo=&quot;removable&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;可删除(删除按钮自己 44px 热区;删完后回到空态)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-removable&quot;&gt;
&lt;div class=&quot;kole-m-upload&quot; id=&quot;up-removable&quot; data-count=&quot;2&quot; data-max=&quot;5&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;发票&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot; id=&quot;up-removable-count&quot;&gt;2 / 5&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot; id=&quot;up-removable-list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot; data-assert=&quot;upload-removable-row&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;发票-09月.jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 发票-09月.jpg&quot; data-remove=&quot;row&quot;
data-behavior=&quot;click-sets-attr:#up-removable|data-removed|row-1&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot; id=&quot;up-removable-row-1&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;对账单-09月.pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 对账单-09月.pdf&quot; data-remove=&quot;row&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p class=&quot;kole-m-upload__empty&quot; id=&quot;up-removable-empty&quot; hidden&gt;还没有上传文件&lt;/p&gt;
&lt;button class=&quot;kole-m-upload__trigger&quot; type=&quot;button&quot;&gt;+ 选择文件&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre></div>
</details>
</div>
<div class="m-demo" id="demo-disabled">
<div class="m-demo-head"><span class="m-demo-title">禁用与到顶</span><span class="m-chip">状态 disabled | 变体 maxCount=reached</span></div>
<p class="m-demo-desc">disabled 时触发器与删除都不可用;到 maxCount 后触发器改成提示行。</p>
<div class="m-demo-stage"><iframe src="../../../frameworks-mobile/Upload.html?demo=disabled" title="上传 Upload · 禁用与到顶" loading="lazy"></iframe></div>
<details class="m-details"><summary>查看代码(演示页原文 · 48 行)</summary>
<div class="m-code"><div class="m-code-head"><span>frameworks-mobile/Upload.html · disabled</span><button class="m-copy" type="button" data-copy="code-demo-4">复制</button></div>
<pre id="code-demo-4"><code>&lt;section class=&quot;demo-block&quot; data-demo=&quot;disabled&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;禁用与到顶(disabled:触发器不可点、删除按钮置灰;到 maxCount 触发器改成提示行)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-disabled&quot;&gt;
&lt;div class=&quot;kole-m-upload is-disabled&quot; id=&quot;up-disabled&quot; data-count=&quot;1&quot; data-max=&quot;5&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;已锁定&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;1 / 5&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;身份证正面.jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 身份证正面.jpg&quot; aria-disabled=&quot;true&quot; disabled&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;button class=&quot;kole-m-upload__trigger&quot; type=&quot;button&quot; aria-disabled=&quot;true&quot; disabled&gt;+ 选择文件&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;kole-m-upload kole-m-upload--full&quot; id=&quot;up-full&quot; data-count=&quot;2&quot; data-max=&quot;2&quot; style=&quot;margin-top: var(--kole-space-16)&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;已到上限&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;2 / 2&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;门头照.png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;内景照.png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p class=&quot;kole-m-upload__empty&quot;&gt;已达到 2 个文件上限,删除后可继续添加&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</code></pre></div>
</details>
</div>
</section>
<section class="m-block">
<h2 id="api">API</h2>
<p class="m-sub">props / events / slots 为 6 端实现的公共接口(说明文字取自规格对应小节)。字段名与各端源码逐名核对:node tools/verify-mobile-docs.mjs</p>
<h3 class="m-h3">Props</h3>
<table class="m-table">
<thead><tr><th>名称</th><th>类型</th><th>默认值</th><th>说明</th><th>必传</th></tr></thead>
<tbody>
<tr><td><code>files</code></td><td><code>Array&lt;{ name: string, uid?: string, status?: 'pending'|'uploading'|'success'|'error', percent?: number }&gt;</code></td><td><code>[]</code></td><td>文件列表(宿主提供,状态与进度都由宿主回传)(规格 §46.4)</td><td>N</td></tr>
<tr><td><code>maxCount</code></td><td><code>number</code></td><td><code>9</code></td><td>文件数上限,到达后触发器变成提示行(规格 §46.3)</td><td>N</td></tr>
<tr><td><code>disabled</code></td><td><code>boolean</code></td><td><code>false</code></td><td>变体 disabled:触发器与删除按钮都不可用(规格 §46.3)</td><td>N</td></tr>
<tr><td><code>variant</code></td><td><code>'dashed' | 'button'</code></td><td><code>'dashed'</code></td><td>变体 variant:dashed 虚线框(页面级),button 实心按钮(列表内嵌)(规格 §46.3)</td><td>N</td></tr>
<tr><td><code>title</code></td><td><code>string</code></td><td><code>'附件'</code></td><td>标题行文案(规格 §46.2 upload__header)</td><td>N</td></tr>
<tr><td><code>emptyText</code></td><td><code>string</code></td><td><code>'还没有上传文件'</code></td><td>状态 empty 的占位文案(规格 §46.4)</td><td>N</td></tr>
<tr><td><code>accept</code></td><td><code>string</code></td><td><code>''</code></td><td>可接受的文件类型(透传给文件选择器;服务端校验规则不由本组件代为判断)(规格 §46.7)</td><td>N</td></tr>
</tbody>
</table>
<p class="m-note">「必传」按严格定义:实现里**没有默认值**时才为 Y(本门禁逐条核对 props 与各端源码的默认值,防止契约与实现脱节)。</p>
<h3 class="m-h3">事件</h3>
<table class="m-table">
<thead><tr><th>名称</th><th>参数</th><th>说明</th></tr></thead>
<tbody>
<tr><td><code>select</code></td><td><code>—</code></td><td>点触发器时触发,宿主在此调起系统文件选择器(规格 §46.5)</td></tr>
<tr><td><code>remove</code></td><td><code>index: number</code></td><td>点删除(uploading 时是取消)时触发,回传条目下标(规格 §46.5)</td></tr>
<tr><td><code>retry</code></td><td><code>index: number</code></td><td>失败行点重试时触发,回传条目下标(规格 §46.5)</td></tr>
</tbody>
</table>
<h3 class="m-h3">插槽</h3>
<table class="m-table">
<thead><tr><th>名称</th><th>说明</th></tr></thead>
<tbody>
<tr><td><code>default</code></td><td>自定义内容(追加在文件列表之后)</td></tr>
</tbody>
</table>
<h3 class="m-h3">CSS 变量</h3>
<p class="m-sub">组件级变量(在组件样式表里定义)。业务侧可在自己的作用域内覆盖,不必改组件源码。</p>
<table class="m-table">
<thead><tr><th>名称</th><th>默认值</th><th>说明</th></tr></thead>
<tbody>
<tr><td><code>--kole-m-upload-thumb</code></td><td><code>40px</code></td><td>缩略图/文件图标边长</td></tr>
<tr><td><code>--kole-m-upload-row-height</code></td><td><code>var(--kole-m-touch-target)</code></td><td>文件行最小高度</td></tr>
</tbody>
</table>
</section>
<section class="m-block">
<h2 id="usage">何时使用</h2>
<ul>
<li>把手机里的文件交给服务端(实名认证的身份证照、报销的发票、工单的附件)</li>
<li>移动端没有拖拽也没有 hover,触发按钮是唯一入口,虚线框只表达「这里可以放东西」</li>
<li>点触发器调起系统文件选择器(本组件不发请求,选完由宿主拿文件并自行上传)</li>
<li>进度不自己走:没有内置定时器或假进度,百分比全部由宿主回传</li>
<li>删除按钮自己 44px 热区,点一次移除该项;删除进行中(uploading)时文案是「取消」</li>
<li>失败行提供「重试」,重试由宿主重新发起,组件只回传下标</li>
</ul>
</section>
<section class="m-block">
<h2 id="interaction">交互与触控</h2>
<ul>
<li>点触发器调起系统文件选择器(本组件不发请求,选完由宿主拿文件并自行上传)</li>
<li>删除按钮自己 44px 热区,点一次移除该项;删除进行中(uploading)时文案是「取消」</li>
<li>失败行提供「重试」,重试由宿主重新发起,组件只回传下标</li>
<li>进度不自己走:没有内置定时器或假进度,百分比全部由宿主回传,避免出现「看起来在上传其实没动」</li>
<li>列表为空时显示空态文案;到 maxCount 后触发器改成不可点的提示行</li>
</ul>
</section>
<section class="m-block">
<h2 id="a11y">无障碍</h2>
<ul>
<li>触发器是原生 button,带 aria-disabled;到上限时用 disabled 让键盘跳过</li>
<li>进度条写 role=&quot;progressbar&quot; + aria-valuemin / aria-valuemax / aria-valuenow,aria-label 说明是哪个文件的进度</li>
<li>删除 / 重试按钮各自带 aria-label(含文件名),读屏播报「删除 合同扫描件.pdf」而不是孤零零的「删除」</li>
<li>状态文案是文字而不只是颜色(「已上传」「上传失败」),颜色不作为唯一信息通道</li>
</ul>
</section>
<section class="m-block">
<h2 id="related">相似组件</h2>
<p class="m-sub">从「该用哪一个」的角度区分;PC 端的对应实现见 <a href="../../index.html">PC 文档站</a>。</p>
<table class="m-table">
<thead><tr><th>组件</th><th>何时用它而不是本组件</th></tr></thead>
<tbody>
<tr><td><a href="mobile-avatar.html">头像</a><em style="font-family: var(--kole-font-family-num); font-style: normal; font-size: 11px; color: var(--kole-color-text-placeholder); margin-left: 6px;">Avatar</em></td><td>单张头像的更换是更窄的场景,用头像组件自带的编辑态,不需要整个上传列表</td></tr>
<tr><td><a href="mobile-dialog.html">对话框</a><em style="font-family: var(--kole-font-family-num); font-style: normal; font-size: 11px; color: var(--kole-color-text-placeholder); margin-left: 6px;">Dialog</em></td><td>上传前要用户确认条款或选择来源时用它承载一步确认</td></tr>
<tr><td><a href="mobile-list.html">列表</a><em style="font-family: var(--kole-font-family-num); font-style: normal; font-size: 11px; color: var(--kole-color-text-placeholder); margin-left: 6px;">List</em></td><td>只读的附件陈列(不可增删)用列表更轻,上传的列表带状态与动作</td></tr>
<tr><td><a href="mobile-toast.html">轻提示</a><em style="font-family: var(--kole-font-family-num); font-style: normal; font-size: 11px; color: var(--kole-color-text-placeholder); margin-left: 6px;">Toast</em></td><td>上传成功 / 失败的单次反馈用它,不必在列表里堆第二条状态文案</td></tr>
<tr><td><a href="mobile-loading.html">加载</a><em style="font-family: var(--kole-font-family-num); font-style: normal; font-size: 11px; color: var(--kole-color-text-placeholder); margin-left: 6px;">Loading</em></td><td>等待服务端返回文件地址这类短暂阻塞用它,进度有多少用上传自己的进度条</td></tr>
</tbody>
</table>
</section>
<section class="m-block">
<h2 id="gaps">规格未定 / 禁止发明</h2>
<table class="m-table">
<thead><tr><th>类别</th><th>条目</th></tr></thead>
<tbody>
<tr><td><span class="m-chip">禁止发明</span></td><td>真实的传输:请求、分片、断点续传、并发数(本组件只回传事件,不发任何请求)</td></tr>
<tr><td><span class="m-chip">禁止发明</span></td><td>图片压缩、裁剪、水印与方向纠正</td></tr>
<tr><td><span class="m-chip">禁止发明</span></td><td>服务端的校验规则(大小上限、类型白名单以文案与 accept 表达,不代为判断)</td></tr>
<tr><td><span class="m-chip">禁止发明</span></td><td>拍照与相册的原生调起(由宿主在 select 事件里自行调用平台 API)</td></tr>
<tr><td><span class="m-chip">规格未定</span></td><td>上传中能否同时继续添加文件(当前允许,列表各自独立)</td></tr>
<tr><td><span class="m-chip">规格未定</span></td><td>失败自动重试的次数与退避策略</td></tr>
<tr><td><span class="m-chip">规格未定</span></td><td>是否需要在成功行上展示服务端返回的文件 id / URL</td></tr>
</tbody>
</table>
</section>
<section class="m-block">
<h2 id="anatomy">结构(anatomy)</h2>
<table class="m-table">
<thead><tr><th>字段</th><th>说明</th></tr></thead>
<tbody>
<tr><td><code>upload</code></td><td>根元素,纵向排列「标题行 + 触发器 + 文件列表」</td></tr>
<tr><td><code>upload__header</code></td><td>标题与计数(已选 N / 上限 M)</td></tr>
<tr><td><code>upload__trigger</code></td><td>选择触发器,点击调起系统文件选择器;dashed 是虚线框,button 是实心按钮</td></tr>
<tr><td><code>upload__list</code></td><td>文件列表容器</td></tr>
<tr><td><code>upload__item</code></td><td>单个文件行,行高不小于 44px</td></tr>
<tr><td><code>upload__thumb</code></td><td>缩略图位(图片用背景图,其他类型放扩展名文字块)</td></tr>
<tr><td><code>upload__body</code></td><td>文件名与「进度条 + 状态文案」的容器</td></tr>
<tr><td><code>upload__track</code></td><td>进度条轨道,role=progressbar</td></tr>
<tr><td><code>upload__bar</code></td><td>进度段,宽度取 --kole-m-upload-percent</td></tr>
<tr><td><code>upload__actions</code></td><td>行内动作(重试 / 删除),各自 44px 热区</td></tr>
</tbody>
</table>
</section>
<section class="m-block">
<h2 id="variants">变体维度与类名映射</h2>
<p class="m-sub">类名映射由构建脚本从契约 <code>variantClasses</code> 生成,并被 <code>verify:mobile-docs</code> 逐条对照组件 CSS 校验(类/变量必须真实存在)。</p>
<table class="m-table">
<thead><tr><th>维度</th><th>取值</th><th>对应类名 / 变量</th></tr></thead>
<tbody>
<tr><td><code>variant</code></td><td>dashed / button</td><td><div><b>dashed</b> <span class="m-cls">.kole-m-upload--dashed</span></div><div><b>button</b> <span class="m-cls">.kole-m-upload--button</span></div></td></tr>
<tr><td><code>maxCount</code></td><td>reached / not-reached</td><td><div><b>reached</b> <span class="m-cls">.kole-m-upload--full</span></div><div><b>not-reached</b> <span class="m-none">(由数据驱动,无专属类)</span></div></td></tr>
</tbody>
</table>
</section>
<section class="m-block">
<h2 id="rep-variants">代表变体</h2>
<table class="m-table">
<thead><tr><th>变体</th><th>标签</th></tr></thead>
<tbody>
<tr><td><code>variant=dashed · maxCount=not-reached</code></td><td>虚线框(页面级上传区)</td></tr>
<tr><td><code>variant=button · maxCount=not-reached</code></td><td>实心按钮(列表内嵌的「+ 添加」)</td></tr>
<tr><td><code>variant=dashed · maxCount=reached</code></td><td>到上限(触发器变成不可点的提示行)</td></tr>
<tr><td><code>variant=dashed · maxCount=not-reached</code></td><td>禁用(触发器与删除按钮都不可用)</td></tr>
</tbody>
</table>
</section>
<section class="m-block">
<h2 id="tokens">用到的令牌</h2>
<p class="m-sub">构建时从本组件样式表扫描得出。蓝色为移动端自有令牌,绿色为继承的 PC 令牌(改一处两端生效)。</p>
<div class="m-chips">
<span class="m-chip m" title="面板/抽屉滑出">--kole-m-duration-slide</span>
<span class="m-chip m" title="">--kole-m-ease-slide</span>
<span class="m-chip m" title="正文 / 列表项">--kole-m-font-size-body</span>
<span class="m-chip m" title="标签栏文字">--kole-m-font-size-caption</span>
<span class="m-chip m" title="次级说明">--kole-m-font-size-label</span>
<span class="m-chip m" title="页面左右留白">--kole-m-gutter</span>
<span class="m-chip m" title="可点区域最小边长">--kole-m-touch-target</span>
<span class="m-chip inherit" title="分割线/边框">--kole-color-border</span>
<span class="m-chip inherit" title="品牌主色:主按钮、选中态、链接">--kole-color-brand</span>
<span class="m-chip inherit" title="品牌主色点击">--kole-color-brand-active</span>
<span class="m-chip inherit" title="品牌浅色背景:选中背景、标签背景、表格悬停">--kole-color-brand-bg</span>
<span class="m-chip inherit" title="卡片背景">--kole-color-card-bg</span>
<span class="m-chip inherit" title="禁用背景(按钮禁用态)">--kole-color-disabled-bg</span>
<span class="m-chip inherit" title="错误色 · 5.57:1(原 #F5222D 仅 4.08:1)">--kole-color-error</span>
<span class="m-chip inherit" title="输入框聚焦外发光">--kole-color-focus-ring</span>
<span class="m-chip inherit" title="弹窗遮罩">--kole-color-mask</span>
<span class="m-chip inherit" title="成功色 · 5.18:1(原 #52C41A 仅 2.27:1)">--kole-color-success</span>
<span class="m-chip inherit" title="表头背景">--kole-color-table-header-bg</span>
<span class="m-chip inherit" title="正文文字 · 14.0:1">--kole-color-text-body</span>
<span class="m-chip inherit" title="禁用态文字 · WCAG 1.4.3 对禁用控件豁免(规范定义于组件1/2.txt)">--kole-color-text-disabled</span>
<span class="m-chip inherit" title="反色文字(品牌色背景上的白字)">--kole-color-text-inverse</span>
<span class="m-chip inherit" title="次要文字 · 5.10:1(原 #8C8C8C 仅 3.36:1)">--kole-color-text-secondary</span>
<span class="m-chip inherit" title="标题文字 · 15.4:1">--kole-color-text-title</span>
<span class="m-chip inherit" title="">--kole-duration-base</span>
<span class="m-chip inherit" title="">--kole-ease-standard</span>
<span class="m-chip inherit" title="">--kole-font-family</span>
<span class="m-chip inherit" title="">--kole-font-family-num</span>
<span class="m-chip inherit" title="按钮、输入框、选择器">--kole-radius-base</span>
<span class="m-chip inherit" title="">--kole-space-12</span>
<span class="m-chip inherit" title="">--kole-space-16</span>
<span class="m-chip inherit" title="">--kole-space-4</span>
<span class="m-chip inherit" title="">--kole-space-8</span>
<span class="m-chip" title="组件级变量(可在业务侧覆盖)">--kole-m-upload-percent</span>
<span class="m-chip" title="组件级变量(可在业务侧覆盖)">--kole-m-upload-row-height</span>
<span class="m-chip" title="组件级变量(可在业务侧覆盖)">--kole-m-upload-thumb</span>
</div>
</section>
<section class="m-block">
<h2 id="sources">6 端源码</h2>
<p class="m-sub">同一组件的六份实现(生产环境的类名与结构一致,差异只在技术栈写法与单位)。点开查看,右侧可复制。</p>
<details class="m-details">
<summary>frameworks-mobile/Upload.css · 纯样式(CSS) · 334 行</summary>
<div class="m-code">
<div class="m-code-head"><span>frameworks-mobile/Upload.css</span><button class="m-copy" type="button" data-copy="code-277">复制</button></div>
<pre id="code-277"><code>/* Kole UI Mobile · Upload 样式 — 对齐移动端规格 §46
上传:选择触发 + 文件列表 + 四种状态(待上传 / 上传中 / 成功 / 失败)+ 可删除。
本组件**不发请求**:进度与成败由宿主的 upload 回调回传(file.status / file.percent)。
移动端与桌面端的关键差别是**没有拖拽**:手机上没有 hover、也没有拖放,
选择动作只能是点一下「选择文件」,因此触发器是主入口。文件行高 ≥44px,删除按钮 44px 热区。 */
.kole-m-upload {
/* 组件级变量:业务侧可在容器上覆盖 */
--kole-m-upload-thumb: 40px; /* 缩略图/文件图标边长 */
--kole-m-upload-row-height: var(--kole-m-touch-target); /* 文件行最小高度 */
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--kole-space-12);
width: 100%;
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: var(--kole-font-family);
font-size: var(--kole-m-font-size-body);
line-height: 1.4;
}
.kole-m-upload__mask {
position: fixed;
inset: 0;
z-index: 2000;
background: var(--kole-color-mask);
opacity: 0;
pointer-events: none;
transition: opacity var(--kole-m-duration-slide) var(--kole-m-ease-slide);
}
.kole-m-upload__mask.is-open {
opacity: 1;
pointer-events: auto;
}
.kole-m-upload__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--kole-space-8);
}
.kole-m-upload__title {
color: var(--kole-color-text-title);
font-weight: 500;
}
.kole-m-upload__count {
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
font-family: var(--kole-font-family-num);
}
/* 选择触发器:点一下调起系统文件选择器(移动端唯一的入口,没有拖拽) */
.kole-m-upload__trigger {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: var(--kole-space-8);
width: 100%;
min-height: var(--kole-m-touch-target);
padding: var(--kole-space-12) var(--kole-m-gutter);
margin: 0;
border: 1px dashed var(--kole-color-border);
border-radius: var(--kole-radius-base);
background: var(--kole-color-card-bg);
color: var(--kole-color-brand);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
line-height: 1.3;
cursor: pointer;
touch-action: manipulation;
}
/* 变体 variant=dashed:虚线框(页面级上传区;触发按钮是唯一入口,框本身不接收拖放) */
.kole-m-upload--dashed .kole-m-upload__trigger { border-style: dashed; }
/* 变体 variant=button:实心按钮式(列表内嵌的「+ 添加」用) */
.kole-m-upload--button .kole-m-upload__trigger {
border-style: solid;
border-color: var(--kole-color-brand);
background: var(--kole-color-brand);
color: var(--kole-color-text-inverse);
font-weight: 500;
}
.kole-m-upload__trigger:active { background: var(--kole-color-brand-bg); }
.kole-m-upload--button .kole-m-upload__trigger:active {
background: var(--kole-color-brand-active);
border-color: var(--kole-color-brand-active);
}
.kole-m-upload__trigger:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
/* 状态 disabled:触发器与删除按钮都不可用 */
.kole-m-upload.is-disabled .kole-m-upload__trigger,
.kole-m-upload__trigger:disabled {
border-color: var(--kole-color-border);
background: var(--kole-color-disabled-bg);
color: var(--kole-color-text-disabled);
cursor: not-allowed;
}
/* 文件列表 */
.kole-m-upload__list {
display: flex;
flex-direction: column;
gap: var(--kole-space-8);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.kole-m-upload__item {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--kole-space-12);
width: 100%;
min-height: var(--kole-m-upload-row-height);
padding: var(--kole-space-8) 0;
}
/* 文件行之间画分隔线(画在包裹层上沿,与 List 同一策略) */
.kole-m-upload__item + .kole-m-upload__item { border-top: 1px solid var(--kole-color-border); }
/* 单行进度:由宿主以行内自定义属性传入百分比(如 style=&quot;--kole-m-upload-percent: 60%&quot;),
样式表只消费,不写死任何长度 —— 百分比是数据。 */
.kole-m-upload__item { --kole-m-upload-percent: 0%; }
/* 缩略图位:图片是背景图,其他类型是天生的扩展名文字块 */
.kole-m-upload__thumb {
flex: 0 0 auto;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: var(--kole-m-upload-thumb);
height: var(--kole-m-upload-thumb);
overflow: hidden;
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-radius-base);
background: var(--kole-color-table-header-bg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: var(--kole-color-text-secondary);
font-family: var(--kole-font-family-num);
font-size: var(--kole-m-font-size-caption);
text-transform: uppercase;
}
/* 内容区:文件名 +(进度条 / 状态文案) */
.kole-m-upload__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--kole-space-4);
}
.kole-m-upload__name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--kole-color-text-body);
}
.kole-m-upload__meta {
display: flex;
align-items: center;
gap: var(--kole-space-8);
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
}
/* 进度条:只在上传中 / 成功 / 失败时出现(待上传不画,长度无意义) */
.kole-m-upload__track {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 2px;
overflow: hidden;
border-radius: 1px;
background: var(--kole-color-border);
}
.kole-m-upload__bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
border-radius: 1px;
background: var(--kole-color-brand);
transition: width var(--kole-duration-base) var(--kole-ease-standard);
}
/* 状态 pending:待上传(灰点,未开始;进度条不占宽) */
.kole-m-upload__item.is-pending .kole-m-upload__bar { width: 0; background: var(--kole-color-border); }
/* 状态 uploading:上传中(品牌色进度条,宽度取 --kole-m-upload-percent) */
.kole-m-upload__item.is-uploading .kole-m-upload__bar {
width: var(--kole-m-upload-percent);
background: var(--kole-color-brand);
}
/* 状态 success:成功(满格 + 品牌成功色 + 勾号) */
.kole-m-upload__item.is-success .kole-m-upload__bar {
width: 100%;
background: var(--kole-color-success);
}
.kole-m-upload__item.is-success .kole-m-upload__status { color: var(--kole-color-success); }
/* 状态 error:失败(满格 + 错误色 + 可重试) */
.kole-m-upload__item.is-error .kole-m-upload__bar {
width: 100%;
background: var(--kole-color-error);
}
.kole-m-upload__item.is-error .kole-m-upload__status { color: var(--kole-color-error); }
.kole-m-upload__status {
flex: 0 0 auto;
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
}
/* 行内动作(重试 / 删除):各自 44px 热区 */
.kole-m-upload__actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--kole-space-4);
margin-right: calc(var(--kole-space-8) * -1);
}
.kole-m-upload__action {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--kole-m-touch-target);
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-space-4);
margin: 0;
border: 0;
border-radius: var(--kole-radius-base);
background: none;
color: var(--kole-color-text-secondary);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
line-height: 1;
cursor: pointer;
touch-action: manipulation;
}
.kole-m-upload__action:active { background: var(--kole-color-table-header-bg); }
.kole-m-upload__action:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
.kole-m-upload__action--remove { color: var(--kole-color-error); }
.kole-m-upload__action:disabled {
color: var(--kole-color-text-disabled);
cursor: not-allowed;
}
/* 变体 maxCount 到顶:触发器改成提示行(不再可点) */
.kole-m-upload--full .kole-m-upload__trigger {
border-style: solid;
color: var(--kole-color-text-secondary);
cursor: default;
}
/* 状态 empty:还没有任何文件时的说明 */
.kole-m-upload__empty {
margin: 0;
padding: var(--kole-space-16) 0;
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
text-align: center;
}
/* 视觉隐藏但读屏可读(原生 file input 的替身) */
.kole-m-upload__native {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.kole-m-upload__native:focus-visible + .kole-m-upload__trigger {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
/* 演示页触发器(非组件交付样式) */
.kole-m-upload__demo-btn {
box-sizing: border-box;
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-m-gutter);
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-radius-base);
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
cursor: pointer;
touch-action: manipulation;
}
.kole-m-upload__demo-btn:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
</code></pre>
</div>
</details>
<details class="m-details">
<summary>frameworks-mobile/Upload.html · H5 原生(无框架) · 284 行</summary>
<div class="m-code">
<div class="m-code-head"><span>frameworks-mobile/Upload.html</span><button class="m-copy" type="button" data-copy="code-278">复制</button></div>
<pre id="code-278"><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, viewport-fit=cover&quot;&gt;
&lt;title&gt;Kole UI Mobile · Upload(H5)&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../.design_library/kole-ui-mobile/colors_and_type.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;Upload.css&quot;&gt;
&lt;style&gt;
body { margin: 0; background: var(--kole-color-page-bg); font-family: var(--kole-font-family); color: var(--kole-color-text-body); }
.demo { max-width: 375px; margin: 0 auto; padding: var(--kole-m-gutter) 0; }
.demo-label { margin: 0; padding: var(--kole-space-12) var(--kole-m-gutter) var(--kole-space-8);
font-size: var(--kole-m-font-size-label); color: var(--kole-color-text-secondary); }
.demo-pad { padding: var(--kole-m-gutter); background: var(--kole-color-card-bg); border-block: 1px solid var(--kole-color-border); }
.demo-block[hidden] { display: none; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;demo&quot;&gt;
&lt;section class=&quot;demo-block&quot; data-demo=&quot;trigger&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;选择触发(点一下调起系统文件选择器:移动端没有拖拽,这是唯一入口)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-trigger&quot;&gt;
&lt;div class=&quot;kole-m-upload&quot; id=&quot;up-trigger&quot; data-count=&quot;0&quot; data-max=&quot;5&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;附件&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot; id=&quot;up-trigger-count&quot;&gt;0 / 5&lt;/span&gt;
&lt;/div&gt;
&lt;input class=&quot;kole-m-upload__native&quot; id=&quot;up-trigger-input&quot; type=&quot;file&quot; multiple tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
&lt;button class=&quot;kole-m-upload__trigger&quot; type=&quot;button&quot; id=&quot;up-trigger-btn&quot;
data-behavior=&quot;click-sets-attr:#up-trigger|data-picked|true&quot;
aria-describedby=&quot;up-trigger-hint&quot;&gt;+ 选择文件&lt;/button&gt;
&lt;p class=&quot;kole-m-upload__empty&quot; id=&quot;up-trigger-hint&quot;&gt;支持 jpg / png / pdf,单个不超过 10 MB&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;demo-block&quot; data-demo=&quot;states&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;四种状态(待上传 / 上传中 60% / 成功 / 失败,均不发真实请求,进度由宿主回传)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-states&quot;&gt;
&lt;div class=&quot;kole-m-upload kole-m-upload--button&quot; id=&quot;up-states&quot; data-count=&quot;4&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;上传队列&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;4 个文件&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-pending&quot; data-assert=&quot;upload-state-pending&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;合同扫描件.pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;待上传&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 合同扫描件.pdf&quot; id=&quot;up-remove-pending&quot;
data-behavior=&quot;click-sets-attr:#up-states|data-removed|pending&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-uploading&quot; style=&quot;--kole-m-upload-percent: 60%&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;产品主图.png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; role=&quot;progressbar&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;
aria-valuenow=&quot;60&quot; aria-label=&quot;产品主图.png 上传进度&quot;&gt;
&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;60%&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;取消 产品主图.png&quot;&gt;取消&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;营业执照.jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; aria-hidden=&quot;true&quot;&gt;&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 营业执照.jpg&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-error&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;zip&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;素材包.zip&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span class=&quot;kole-m-upload__track&quot; role=&quot;progressbar&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;
aria-valuenow=&quot;100&quot; aria-label=&quot;素材包.zip 上传失败&quot;&gt;
&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;超出 10 MB&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action&quot; type=&quot;button&quot; aria-label=&quot;重试 素材包.zip&quot; id=&quot;up-retry&quot;
data-behavior=&quot;click-sets-attr:#up-states|data-retried|zip&quot;&gt;重试&lt;/button&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 素材包.zip&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;demo-block&quot; data-demo=&quot;removable&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;可删除(删除按钮自己 44px 热区;删完后回到空态)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-removable&quot;&gt;
&lt;div class=&quot;kole-m-upload&quot; id=&quot;up-removable&quot; data-count=&quot;2&quot; data-max=&quot;5&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;发票&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot; id=&quot;up-removable-count&quot;&gt;2 / 5&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot; id=&quot;up-removable-list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot; data-assert=&quot;upload-removable-row&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;发票-09月.jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 发票-09月.jpg&quot; data-remove=&quot;row&quot;
data-behavior=&quot;click-sets-attr:#up-removable|data-removed|row-1&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot; id=&quot;up-removable-row-1&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;对账单-09月.pdf&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 对账单-09月.pdf&quot; data-remove=&quot;row&quot;&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p class=&quot;kole-m-upload__empty&quot; id=&quot;up-removable-empty&quot; hidden&gt;还没有上传文件&lt;/p&gt;
&lt;button class=&quot;kole-m-upload__trigger&quot; type=&quot;button&quot;&gt;+ 选择文件&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;demo-block&quot; data-demo=&quot;disabled&quot;&gt;
&lt;p class=&quot;demo-label&quot;&gt;禁用与到顶(disabled:触发器不可点、删除按钮置灰;到 maxCount 触发器改成提示行)&lt;/p&gt;
&lt;div class=&quot;demo-pad&quot; data-assert=&quot;upload-disabled&quot;&gt;
&lt;div class=&quot;kole-m-upload is-disabled&quot; id=&quot;up-disabled&quot; data-count=&quot;1&quot; data-max=&quot;5&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;已锁定&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;1 / 5&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;身份证正面.jpg&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot; type=&quot;button&quot;
aria-label=&quot;删除 身份证正面.jpg&quot; aria-disabled=&quot;true&quot; disabled&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;button class=&quot;kole-m-upload__trigger&quot; type=&quot;button&quot; aria-disabled=&quot;true&quot; disabled&gt;+ 选择文件&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;kole-m-upload kole-m-upload--full&quot; id=&quot;up-full&quot; data-count=&quot;2&quot; data-max=&quot;2&quot; style=&quot;margin-top: var(--kole-space-16)&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;已到上限&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;2 / 2&lt;/span&gt;
&lt;/div&gt;
&lt;ul class=&quot;kole-m-upload__list&quot;&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;门头照.png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;li class=&quot;kole-m-upload__item is-success&quot;&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;内景照.png&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;&lt;span class=&quot;kole-m-upload__status&quot;&gt;已上传&lt;/span&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p class=&quot;kole-m-upload__empty&quot;&gt;已达到 2 个文件上限,删除后可继续添加&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
&lt;script&gt;
/* 演示页交互:**不发任何真实请求**。
触发器只调起本页隐藏的 file input(真实浏览器里会弹系统选择器;无头环境里不选文件也合法),
并打 data-picked 标记。状态的推进由宿主的 upload 回调负责(这里不模拟进度的定时器,
否则演示页会自己动起来,预览帧不稳定)。每条演示块独立成立。 */
(function () {
var btn = document.getElementById('up-trigger-btn');
var input = document.getElementById('up-trigger-input');
var root = document.getElementById('up-trigger');
if (btn &amp;&amp; input) {
btn.addEventListener('click', function () {
if (root &amp;&amp; root.getAttribute('data-disabled') === 'true') return;
try { input.click(); } catch (e) { /* 无头环境可能拒绝,标记仍然打上 */ }
if (root) root.setAttribute('data-picked', 'true');
});
}
/* 状态推进演示:删除 / 重试只打标记到本块的根节点(真实业务里由宿主移除该项并发请求)。
演示页不发任何网络请求。 */
var states = document.getElementById('up-states');
var removePending = document.getElementById('up-remove-pending');
var retry = document.getElementById('up-retry');
if (states &amp;&amp; removePending) {
removePending.addEventListener('click', function () {
states.setAttribute('data-removed', 'pending');
});
}
if (states &amp;&amp; retry) {
retry.addEventListener('click', function () {
states.setAttribute('data-retried', 'zip');
});
}
/* 可删除块:点删除即移除该行;列表空了切到空态 */
var list = document.getElementById('up-removable-list');
var empty = document.getElementById('up-removable-empty');
var counter = document.getElementById('up-removable-count');
var roo2 = document.getElementById('up-removable');
function syncEmpty() {
if (!list || !empty) return;
var left = list.children.length;
empty.hidden = left &gt; 0;
if (counter) counter.textContent = left + ' / 5';
if (roo2) roo2.setAttribute('data-count', String(left));
}
if (list) {
list.addEventListener('click', function (e) {
var b = e.target.closest ? e.target.closest('[data-remove=&quot;row&quot;]') : null;
if (!b) return;
var row = b.closest('.kole-m-upload__item');
if (row &amp;&amp; row.parentNode) row.parentNode.removeChild(row);
if (roo2) roo2.setAttribute('data-removed', 'row-1');
syncEmpty();
});
syncEmpty();
}
})();
&lt;/script&gt;
&lt;script&gt;
/* ?demo=&lt;id&gt; → 只显示该演示块(文档站按块预览用;无参数时全部显示,测试与回归走无参数路径) */
(function () {
var id = new URLSearchParams(location.search).get('demo');
if (!id) return;
var blocks = Array.prototype.slice.call(document.querySelectorAll('.demo-block'));
var hit = false;
blocks.forEach(function (b) {
var on = b.getAttribute('data-demo') === id;
if (on) hit = true;
b.hidden = !on;
});
if (!hit) { blocks.forEach(function (b) { b.hidden = false; }); return; }
document.body.classList.add('demo-single');
blocks.forEach(function (b) {
var label = b.querySelector('.demo-label');
if (label &amp;&amp; !b.hidden) label.hidden = true;
});
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</details>
<details class="m-details">
<summary>frameworks-mobile/Upload.jsx · React · 152 行</summary>
<div class="m-code">
<div class="m-code-head"><span>frameworks-mobile/Upload.jsx</span><button class="m-copy" type="button" data-copy="code-279">复制</button></div>
<pre id="code-279"><code>import React from 'react';
import './Upload.css';
/* 上传(移动端)— 规格 §46。
结构:header(标题 + 计数)&gt; trigger(选择触发器)&gt; list(文件行)+ empty。
移动端没有拖拽:选择动作只能是点一下触发器(规格 §46.1),因此触发器是唯一入口。
**本组件不发请求**:进度与成败全部由宿主回传(file.status / file.percent),
组件只做四态呈现与删除 / 重试的动作回传(规格 §46.7)。
file.status 取值:'pending'(待上传)/ 'uploading'(上传中)/ 'success'(成功)/ 'error'(失败)。 */
const STATUS_TEXT = {
pending: '待上传',
uploading: '上传中',
success: '已上传',
error: '上传失败',
};
function statusOf(file) {
const s = file &amp;&amp; file.status ? String(file.status) : 'pending';
return STATUS_TEXT[s] ? s : 'pending';
}
function percentOf(file) {
const n = file &amp;&amp; typeof file.percent === 'number' ? file.percent : 0;
return Math.max(0, Math.min(100, Math.round(n)));
}
function extOf(file) {
const name = file &amp;&amp; file.name ? String(file.name) : '';
const hit = name.match(/\.([a-z0-9]+)$/i);
return hit ? hit[1].toLowerCase() : 'file';
}
export default function Upload({
files = [],
maxCount = 9,
disabled = false,
variant = 'dashed',
title = '附件',
emptyText = '还没有上传文件',
accept = '',
onSelect,
onRemove,
onRetry,
children = null,
}) {
const full = files.length &gt;= maxCount;
const cls =
'kole-m-upload' +
` kole-m-upload--${variant === 'button' ? 'button' : 'dashed'}` +
(full ? ' kole-m-upload--full' : '') +
(disabled ? ' is-disabled' : '');
return (
&lt;div className={cls}&gt;
&lt;div className=&quot;kole-m-upload__header&quot;&gt;
&lt;span className=&quot;kole-m-upload__title&quot;&gt;{title}&lt;/span&gt;
&lt;span className=&quot;kole-m-upload__count&quot;&gt;
{files.length} / {maxCount}
&lt;/span&gt;
&lt;/div&gt;
{/* 触发器:调起系统文件选择器(本端不绑定隐藏 input,由宿主套壳或在 onSelect 里自行取文件) */}
&lt;button
className=&quot;kole-m-upload__trigger&quot;
type=&quot;button&quot;
disabled={disabled || full}
aria-disabled={disabled || full ? 'true' : undefined}
onClick={() =&gt; {
if (disabled || full) return;
if (onSelect) onSelect();
}}
&gt;
+ 选择文件
&lt;/button&gt;
{files.length ? (
&lt;ul className=&quot;kole-m-upload__list&quot;&gt;
{files.map((file, i) =&gt; {
const st = statusOf(file);
const pct = percentOf(file);
const name = file &amp;&amp; file.name ? String(file.name) : '未命名文件';
return (
&lt;li
className={'kole-m-upload__item is-' + st}
key={file &amp;&amp; file.uid ? String(file.uid) : name + i}
style={{ '--kole-m-upload-percent': pct + '%' }}
&gt;
&lt;span className=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;
{extOf(file)}
&lt;/span&gt;
&lt;span className=&quot;kole-m-upload__body&quot;&gt;
&lt;span className=&quot;kole-m-upload__name&quot;&gt;{name}&lt;/span&gt;
&lt;span className=&quot;kole-m-upload__meta&quot;&gt;
&lt;span
className=&quot;kole-m-upload__track&quot;
role=&quot;progressbar&quot;
aria-valuemin=&quot;0&quot;
aria-valuemax=&quot;100&quot;
aria-valuenow={pct}
aria-label={name + ' 上传进度'}
&gt;
&lt;span className=&quot;kole-m-upload__bar&quot; /&gt;
&lt;/span&gt;
&lt;span className=&quot;kole-m-upload__status&quot;&gt;
{st === 'uploading' ? pct + '%' : STATUS_TEXT[st]}
&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span className=&quot;kole-m-upload__actions&quot;&gt;
{st === 'error' ? (
&lt;button
className=&quot;kole-m-upload__action&quot;
type=&quot;button&quot;
disabled={disabled}
aria-label={'重试 ' + name}
onClick={() =&gt; {
if (disabled) return;
if (onRetry) onRetry(i);
}}
&gt;
重试
&lt;/button&gt;
) : null}
&lt;button
className=&quot;kole-m-upload__action kole-m-upload__action--remove&quot;
type=&quot;button&quot;
disabled={disabled}
aria-label={'删除 ' + name}
onClick={() =&gt; {
if (disabled) return;
if (onRemove) onRemove(i);
}}
&gt;
删除
&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
);
})}
&lt;/ul&gt;
) : (
&lt;p className=&quot;kole-m-upload__empty&quot;&gt;{emptyText}&lt;/p&gt;
)}
{/* 隐藏的文件选择器(由宿主提供,这里用 accept 说明可选项) */}
&lt;input className=&quot;kole-m-upload__native&quot; type=&quot;file&quot; multiple accept={accept} tabIndex={-1} aria-hidden=&quot;true&quot; /&gt;
{children}
&lt;/div&gt;
);
}
</code></pre>
</div>
</details>
<details class="m-details">
<summary>frameworks-mobile/Upload.vue2.vue · Vue 2 · 160 行</summary>
<div class="m-code">
<div class="m-code-head"><span>frameworks-mobile/Upload.vue2.vue</span><button class="m-copy" type="button" data-copy="code-280">复制</button></div>
<pre id="code-280"><code>&lt;template&gt;
&lt;div class=&quot;kole-m-upload&quot; :class=&quot;rootClass&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;{{ title }}&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;{{ files.length }} / {{ maxCount }}&lt;/span&gt;
&lt;/div&gt;
&lt;button
class=&quot;kole-m-upload__trigger&quot;
type=&quot;button&quot;
:disabled=&quot;disabled || full&quot;
:aria-disabled=&quot;disabled || full ? 'true' : null&quot;
@click=&quot;onSelectClick&quot;
&gt;+ 选择文件&lt;/button&gt;
&lt;ul v-if=&quot;files.length&quot; class=&quot;kole-m-upload__list&quot;&gt;
&lt;li
v-for=&quot;(file, i) in files&quot;
:key=&quot;file &amp;&amp; file.uid ? file.uid : (file &amp;&amp; file.name ? file.name : i) + '-' + i&quot;
class=&quot;kole-m-upload__item&quot;
:class=&quot;'is-' + statusOf(file)&quot;
:style=&quot;{ '--kole-m-upload-percent': percentOf(file) + '%' }&quot;
&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;{{ extOf(file) }}&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;{{ nameOf(file) }}&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span
class=&quot;kole-m-upload__track&quot;
role=&quot;progressbar&quot;
aria-valuemin=&quot;0&quot;
aria-valuemax=&quot;100&quot;
:aria-valuenow=&quot;percentOf(file)&quot;
:aria-label=&quot;nameOf(file) + ' 上传进度'&quot;
&gt;
&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;
{{ statusOf(file) === 'uploading' ? percentOf(file) + '%' : statusText(file) }}
&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button
v-if=&quot;statusOf(file) === 'error'&quot;
class=&quot;kole-m-upload__action&quot;
type=&quot;button&quot;
:disabled=&quot;disabled&quot;
:aria-label=&quot;'重试 ' + nameOf(file)&quot;
@click=&quot;onRetryClick(i)&quot;
&gt;重试&lt;/button&gt;
&lt;button
class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot;
type=&quot;button&quot;
:disabled=&quot;disabled&quot;
:aria-label=&quot;'删除 ' + nameOf(file)&quot;
@click=&quot;onRemoveClick(i)&quot;
&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p v-else class=&quot;kole-m-upload__empty&quot;&gt;{{ emptyText }}&lt;/p&gt;
&lt;input
class=&quot;kole-m-upload__native&quot;
type=&quot;file&quot;
multiple
:accept=&quot;accept&quot;
tabindex=&quot;-1&quot;
aria-hidden=&quot;true&quot;
&gt;
&lt;slot&gt;&lt;/slot&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
/* 上传(移动端)— 规格 §46。
结构:header(标题 + 计数)&gt; trigger(选择触发器)&gt; list(文件行)+ empty。
移动端没有拖拽:选择动作只能是点一下触发器(规格 §46.1),因此触发器是唯一入口。
**本组件不发请求**:进度与成败全部由宿主回传(file.status / file.percent),
组件只做四态呈现与删除 / 重试的动作回传(规格 §46.7)。
file.status 取值:'pending'(待上传)/ 'uploading'(上传中)/ 'success'(成功)/ 'error'(失败)。 */
var STATUS_TEXT = {
pending: '待上传',
uploading: '上传中',
success: '已上传',
error: '上传失败'
};
function statusOf(file) {
var s = file &amp;&amp; file.status ? String(file.status) : 'pending';
return STATUS_TEXT[s] ? s : 'pending';
}
function statusText(file) {
return STATUS_TEXT[statusOf(file)];
}
function percentOf(file) {
var n = file &amp;&amp; typeof file.percent === 'number' ? file.percent : 0;
return Math.max(0, Math.min(100, Math.round(n)));
}
function nameOf(file) {
return file &amp;&amp; file.name ? String(file.name) : '未命名文件';
}
function extOf(file) {
var hit = nameOf(file).match(/\.([a-z0-9]+)$/i);
return hit ? hit[1].toLowerCase() : 'file';
}
export default {
name: 'KoleMUpload',
props: {
files: { type: Array, default: function () { return []; } },
maxCount: { type: Number, default: 9 },
disabled: { type: Boolean, default: false },
variant: { type: String, default: 'dashed' },
title: { type: String, default: '附件' },
emptyText: { type: String, default: '还没有上传文件' },
accept: { type: String, default: '' }
},
computed: {
full: function () {
return this.files.length &gt;= this.maxCount;
},
rootClass: function () {
return [
'kole-m-upload--' + (this.variant === 'button' ? 'button' : 'dashed'),
this.full ? 'kole-m-upload--full' : '',
this.disabled ? 'is-disabled' : ''
].filter(Boolean);
}
},
methods: {
statusOf: statusOf,
statusText: statusText,
percentOf: percentOf,
nameOf: nameOf,
extOf: extOf,
onSelectClick: function () {
if (this.disabled || this.full) return;
this.$emit('select');
},
onRemoveClick: function (i) {
if (this.disabled) return;
this.$emit('remove', i);
},
onRetryClick: function (i) {
if (this.disabled) return;
this.$emit('retry', i);
}
}
};
&lt;/script&gt;
&lt;style src=&quot;./Upload.css&quot;&gt;&lt;/style&gt;
</code></pre>
</div>
</details>
<details class="m-details">
<summary>frameworks-mobile/Upload.vue3.vue · Vue 3 · 150 行</summary>
<div class="m-code">
<div class="m-code-head"><span>frameworks-mobile/Upload.vue3.vue</span><button class="m-copy" type="button" data-copy="code-281">复制</button></div>
<pre id="code-281"><code>&lt;template&gt;
&lt;div class=&quot;kole-m-upload&quot; :class=&quot;rootClass&quot;&gt;
&lt;div class=&quot;kole-m-upload__header&quot;&gt;
&lt;span class=&quot;kole-m-upload__title&quot;&gt;{{ title }}&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__count&quot;&gt;{{ files.length }} / {{ maxCount }}&lt;/span&gt;
&lt;/div&gt;
&lt;button
class=&quot;kole-m-upload__trigger&quot;
type=&quot;button&quot;
:disabled=&quot;disabled || full&quot;
:aria-disabled=&quot;disabled || full ? 'true' : null&quot;
@click=&quot;onSelectClick&quot;
&gt;+ 选择文件&lt;/button&gt;
&lt;ul v-if=&quot;files.length&quot; class=&quot;kole-m-upload__list&quot;&gt;
&lt;li
v-for=&quot;(file, i) in files&quot;
:key=&quot;file &amp;&amp; file.uid ? file.uid : (file &amp;&amp; file.name ? file.name : i) + '-' + i&quot;
class=&quot;kole-m-upload__item&quot;
:class=&quot;'is-' + statusOf(file)&quot;
:style=&quot;{ '--kole-m-upload-percent': percentOf(file) + '%' }&quot;
&gt;
&lt;span class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;{{ extOf(file) }}&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__body&quot;&gt;
&lt;span class=&quot;kole-m-upload__name&quot;&gt;{{ nameOf(file) }}&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__meta&quot;&gt;
&lt;span
class=&quot;kole-m-upload__track&quot;
role=&quot;progressbar&quot;
aria-valuemin=&quot;0&quot;
aria-valuemax=&quot;100&quot;
:aria-valuenow=&quot;percentOf(file)&quot;
:aria-label=&quot;nameOf(file) + ' 上传进度'&quot;
&gt;
&lt;span class=&quot;kole-m-upload__bar&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__status&quot;&gt;
{{ statusOf(file) === 'uploading' ? percentOf(file) + '%' : statusText(file) }}
&lt;/span&gt;
&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;kole-m-upload__actions&quot;&gt;
&lt;button
v-if=&quot;statusOf(file) === 'error'&quot;
class=&quot;kole-m-upload__action&quot;
type=&quot;button&quot;
:disabled=&quot;disabled&quot;
:aria-label=&quot;'重试 ' + nameOf(file)&quot;
@click=&quot;onRetryClick(i)&quot;
&gt;重试&lt;/button&gt;
&lt;button
class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot;
type=&quot;button&quot;
:disabled=&quot;disabled&quot;
:aria-label=&quot;'删除 ' + nameOf(file)&quot;
@click=&quot;onRemoveClick(i)&quot;
&gt;删除&lt;/button&gt;
&lt;/span&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p v-else class=&quot;kole-m-upload__empty&quot;&gt;{{ emptyText }}&lt;/p&gt;
&lt;input
class=&quot;kole-m-upload__native&quot;
type=&quot;file&quot;
multiple
:accept=&quot;accept&quot;
tabindex=&quot;-1&quot;
aria-hidden=&quot;true&quot;
&gt;
&lt;slot&gt;&lt;/slot&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script setup&gt;
/* 上传(移动端)— 规格 §46。
结构:header(标题 + 计数)&gt; trigger(选择触发器)&gt; list(文件行)+ empty。
移动端没有拖拽:选择动作只能是点一下触发器(规格 §46.1),因此触发器是唯一入口。
**本组件不发请求**:进度与成败全部由宿主回传(file.status / file.percent),
组件只做四态呈现与删除 / 重试的动作回传(规格 §46.7)。
file.status 取值:'pending'(待上传)/ 'uploading'(上传中)/ 'success'(成功)/ 'error'(失败)。 */
import { computed } from 'vue';
const props = defineProps({
files: { type: Array, default: () =&gt; [] },
maxCount: { type: Number, default: 9 },
disabled: { type: Boolean, default: false },
variant: { type: String, default: 'dashed' },
title: { type: String, default: '附件' },
emptyText: { type: String, default: '还没有上传文件' },
accept: { type: String, default: '' }
});
const emit = defineEmits(['select', 'remove', 'retry']);
const STATUS_TEXT = {
pending: '待上传',
uploading: '上传中',
success: '已上传',
error: '上传失败'
};
function statusOf(file) {
const s = file &amp;&amp; file.status ? String(file.status) : 'pending';
return STATUS_TEXT[s] ? s : 'pending';
}
function statusText(file) {
return STATUS_TEXT[statusOf(file)];
}
function percentOf(file) {
const n = file &amp;&amp; typeof file.percent === 'number' ? file.percent : 0;
return Math.max(0, Math.min(100, Math.round(n)));
}
function nameOf(file) {
return file &amp;&amp; file.name ? String(file.name) : '未命名文件';
}
function extOf(file) {
const hit = nameOf(file).match(/\.([a-z0-9]+)$/i);
return hit ? hit[1].toLowerCase() : 'file';
}
const full = computed(() =&gt; props.files.length &gt;= props.maxCount);
const rootClass = computed(() =&gt; [
'kole-m-upload--' + (props.variant === 'button' ? 'button' : 'dashed'),
full.value ? 'kole-m-upload--full' : '',
props.disabled ? 'is-disabled' : ''
].filter(Boolean));
function onSelectClick() {
if (props.disabled || full.value) return;
emit('select');
}
function onRemoveClick(i) {
if (props.disabled) return;
emit('remove', i);
}
function onRetryClick(i) {
if (props.disabled) return;
emit('retry', i);
}
&lt;/script&gt;
&lt;style src=&quot;./Upload.css&quot;&gt;&lt;/style&gt;
</code></pre>
</div>
</details>
<details class="m-details">
<summary>frameworks-mobile/Upload.uniapp.vue · uni-app(跨端:小程序 / App / H5) · 332 行</summary>
<div class="m-code">
<div class="m-code-head"><span>frameworks-mobile/Upload.uniapp.vue</span><button class="m-copy" type="button" data-copy="code-282">复制</button></div>
<pre id="code-282"><code>&lt;template&gt;
&lt;view class=&quot;kole-m-upload&quot; :class=&quot;rootClass&quot;&gt;
&lt;view class=&quot;kole-m-upload__header&quot;&gt;
&lt;text class=&quot;kole-m-upload__title&quot;&gt;{{ title }}&lt;/text&gt;
&lt;text class=&quot;kole-m-upload__count&quot;&gt;{{ files.length }} / {{ maxCount }}&lt;/text&gt;
&lt;/view&gt;
&lt;!-- 选择触发:uni 基础组件的 picker 不够用(它只选目录/日期),
这里用 view + role=&quot;button&quot; 触发宿主的 uni.chooseImage / chooseFile 回调 --&gt;
&lt;view
class=&quot;kole-m-upload__trigger&quot;
:class=&quot;{ 'is-disabled': disabled || full }&quot;
:role=&quot;disabled || full ? '' : 'button'&quot;
:aria-disabled=&quot;disabled || full ? 'true' : 'false'&quot;
@tap=&quot;onSelectTap&quot;
&gt;
&lt;text&gt;+ 选择文件&lt;/text&gt;
&lt;/view&gt;
&lt;view v-if=&quot;files.length&quot; class=&quot;kole-m-upload__list&quot;&gt;
&lt;view
v-for=&quot;(file, i) in files&quot;
:key=&quot;file &amp;&amp; file.uid ? file.uid : (file &amp;&amp; file.name ? file.name : i) + '-' + i&quot;
class=&quot;kole-m-upload__item&quot;
:class=&quot;'is-' + statusOf(file)&quot;
:style=&quot;{ '--kole-m-upload-percent': percentOf(file) + '%' }&quot;
&gt;
&lt;view class=&quot;kole-m-upload__thumb&quot; aria-hidden=&quot;true&quot;&gt;
&lt;text&gt;{{ extOf(file) }}&lt;/text&gt;
&lt;/view&gt;
&lt;view class=&quot;kole-m-upload__body&quot;&gt;
&lt;text class=&quot;kole-m-upload__name&quot;&gt;{{ nameOf(file) }}&lt;/text&gt;
&lt;view class=&quot;kole-m-upload__meta&quot;&gt;
&lt;view
class=&quot;kole-m-upload__track&quot;
:role=&quot;'progressbar'&quot;
aria-valuemin=&quot;0&quot;
aria-valuemax=&quot;100&quot;
:aria-valuenow=&quot;String(percentOf(file))&quot;
:aria-label=&quot;nameOf(file) + ' 上传进度'&quot;
&gt;
&lt;view class=&quot;kole-m-upload__bar&quot;&gt;&lt;/view&gt;
&lt;/view&gt;
&lt;text class=&quot;kole-m-upload__status&quot;&gt;
{{ statusOf(file) === 'uploading' ? percentOf(file) + '%' : statusText(file) }}
&lt;/text&gt;
&lt;/view&gt;
&lt;/view&gt;
&lt;view class=&quot;kole-m-upload__actions&quot;&gt;
&lt;view
v-if=&quot;statusOf(file) === 'error'&quot;
class=&quot;kole-m-upload__action&quot;
role=&quot;button&quot;
:aria-label=&quot;'重试 ' + nameOf(file)&quot;
@tap=&quot;onRetryTap(i)&quot;
&gt;
&lt;text&gt;重试&lt;/text&gt;
&lt;/view&gt;
&lt;view
class=&quot;kole-m-upload__action kole-m-upload__action--remove&quot;
role=&quot;button&quot;
:aria-disabled=&quot;disabled ? 'true' : 'false'&quot;
:aria-label=&quot;'删除 ' + nameOf(file)&quot;
@tap=&quot;onRemoveTap(i)&quot;
&gt;
&lt;text&gt;删除&lt;/text&gt;
&lt;/view&gt;
&lt;/view&gt;
&lt;/view&gt;
&lt;/view&gt;
&lt;text v-else class=&quot;kole-m-upload__empty&quot;&gt;{{ emptyText }}&lt;/text&gt;
&lt;slot&gt;&lt;/slot&gt;
&lt;/view&gt;
&lt;/template&gt;
&lt;script setup&gt;
/* uni-app 端 · 上传(移动端)— 规格 §46
跨端差异:用 view / text;选择文件由宿主调 uni.chooseImage / uni.chooseFile 完成,
本端只回传 select 事件(小程序与 App 端没有 &lt;input type=&quot;file&quot;&gt;,也不该在此发明选文件 API)。
进度条用 view + 行内自定义属性 `--kole-m-upload-percent` 表示宽度(百分比是数据)。
**本组件不发请求**:进度与成败全部由宿主回传(file.status / file.percent)(规格 §46.7)。
尺寸用 rpx(88rpx = 375pt 下的 44px 触控最小边长)。 */
import { computed } from 'vue';
const props = defineProps({
files: { type: Array, default: () =&gt; [] },
maxCount: { type: Number, default: 9 },
disabled: { type: Boolean, default: false },
variant: { type: String, default: 'dashed' },
title: { type: String, default: '附件' },
emptyText: { type: String, default: '还没有上传文件' },
accept: { type: String, default: '' }
});
const emit = defineEmits(['select', 'remove', 'retry']);
const STATUS_TEXT = {
pending: '待上传',
uploading: '上传中',
success: '已上传',
error: '上传失败'
};
function statusOf(file) {
const s = file &amp;&amp; file.status ? String(file.status) : 'pending';
return STATUS_TEXT[s] ? s : 'pending';
}
function statusText(file) {
return STATUS_TEXT[statusOf(file)];
}
function percentOf(file) {
const n = file &amp;&amp; typeof file.percent === 'number' ? file.percent : 0;
return Math.max(0, Math.min(100, Math.round(n)));
}
function nameOf(file) {
return file &amp;&amp; file.name ? String(file.name) : '未命名文件';
}
function extOf(file) {
const hit = nameOf(file).match(/\.([a-z0-9]+)$/i);
return hit ? hit[1].toLowerCase() : 'file';
}
const full = computed(() =&gt; props.files.length &gt;= props.maxCount);
const rootClass = computed(() =&gt; [
'kole-m-upload--' + (props.variant === 'button' ? 'button' : 'dashed'),
full.value ? 'kole-m-upload--full' : '',
props.disabled ? 'is-disabled' : ''
].filter(Boolean));
function onSelectTap() {
if (props.disabled || full.value) return;
emit('select');
}
function onRemoveTap(i) {
if (props.disabled) return;
emit('remove', i);
}
function onRetryTap(i) {
if (props.disabled) return;
emit('retry', i);
}
&lt;/script&gt;
&lt;style&gt;
.kole-m-upload {
--kole-m-upload-thumb: 80rpx;
--kole-m-upload-row-height: 88rpx;
--kole-m-touch-target: 88rpx;
--kole-m-font-size-body: 32rpx;
--kole-m-font-size-label: 28rpx;
--kole-m-font-size-caption: 22rpx;
--kole-m-gutter: 32rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
background-color: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-size: var(--kole-m-font-size-body);
}
.kole-m-upload__header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 16rpx;
}
.kole-m-upload__title {
color: var(--kole-color-text-title);
font-size: var(--kole-m-font-size-body);
}
.kole-m-upload__count {
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
}
/* 选择触发器:点一下由宿主调起系统选择器(移动端唯一入口,没有拖拽) */
.kole-m-upload__trigger {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: var(--kole-m-touch-target);
padding: 24rpx var(--kole-m-gutter);
border-width: 1rpx;
border-style: dashed;
border-color: var(--kole-color-border);
border-radius: 8rpx;
color: var(--kole-color-brand);
font-size: var(--kole-m-font-size-label);
}
.kole-m-upload__trigger.is-disabled {
border-color: var(--kole-color-border);
background-color: var(--kole-color-disabled-bg);
color: var(--kole-color-text-disabled);
}
/* 变体 variant=dashed:虚线框(页面级上传区;触发按钮是唯一入口) */
.kole-m-upload--dashed .kole-m-upload__trigger { border-style: dashed; }
/* 变体 variant=button:实心按钮式 */
.kole-m-upload--button .kole-m-upload__trigger {
border-style: solid;
border-color: var(--kole-color-brand);
background-color: var(--kole-color-brand);
color: var(--kole-color-text-inverse);
}
.kole-m-upload__list {
display: flex;
flex-direction: column;
width: 100%;
}
.kole-m-upload__item {
--kole-m-upload-percent: 0%;
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
min-height: var(--kole-m-upload-row-height);
padding: 16rpx 0;
}
.kole-m-upload__item + .kole-m-upload__item { border-top: 1rpx solid var(--kole-color-border); }
.kole-m-upload__thumb {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--kole-m-upload-thumb);
height: var(--kole-m-upload-thumb);
margin-right: 24rpx;
border: 1rpx solid var(--kole-color-border);
border-radius: 8rpx;
background-color: var(--kole-color-table-header-bg);
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-caption);
}
.kole-m-upload__body { flex: 1; min-width: 0; }
.kole-m-upload__name {
color: var(--kole-color-text-body);
font-size: var(--kole-m-font-size-body);
}
.kole-m-upload__meta {
display: flex;
align-items: center;
margin-top: 8rpx;
}
/* 进度条:宽度由宿主的百分比驱动(待上传不占宽,成功后满格) */
.kole-m-upload__track {
flex: 1;
min-width: 0;
height: 4rpx;
margin-right: 16rpx;
border-radius: 2rpx;
background-color: var(--kole-color-border);
}
.kole-m-upload__bar {
width: var(--kole-m-upload-percent);
height: 4rpx;
border-radius: 2rpx;
background-color: var(--kole-color-brand);
}
.kole-m-upload__item.is-uploading .kole-m-upload__bar { background-color: var(--kole-color-brand); }
.kole-m-upload__item.is-success .kole-m-upload__bar {
width: 100%;
background-color: var(--kole-color-success);
}
.kole-m-upload__item.is-error .kole-m-upload__bar {
width: 100%;
background-color: var(--kole-color-error);
}
.kole-m-upload__item.is-success .kole-m-upload__status { color: var(--kole-color-success); }
.kole-m-upload__item.is-error .kole-m-upload__status { color: var(--kole-color-error); }
.kole-m-upload__status {
flex-shrink: 0;
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
}
.kole-m-upload__actions {
display: flex;
align-items: center;
flex-shrink: 0;
}
.kole-m-upload__action {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: var(--kole-m-touch-target);
min-height: var(--kole-m-touch-target);
padding: 0 8rpx;
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
}
.kole-m-upload__action--remove { color: var(--kole-color-error); }
.kole-m-upload__empty {
display: block;
padding: 32rpx 0;
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
text-align: center;
}
&lt;/style&gt;
</code></pre>
</div>
</details>
</section>
<section class="m-block">
<h2 id="tests">测试与回归</h2>
<p class="m-sub">断言在真实的 375×640 设备帧里跑(引擎与 PC 侧共用 <code>tests/_runtime.js</code>,触控行为动词来自移动端 <code>tests/mobile/_behaviors.js</code>)。</p>
<p>
<span class="m-status pass">断言 19 条 · 全部通过</span>
<span class="m-status">报告 2026-09-22 23:01:05</span>
</p>
<div class="m-code">
<div class="m-code-head"><span>复现命令</span><button class="m-copy" type="button" data-copy="code-test">复制</button></div>
<pre id="code-test"><code>node site/dev-server.js &amp;
REG_BASE=http://127.0.0.1:3311 node tools/run-mobile-regression.mjs # 全量 5 个组件
npm run verify:mobile-docs # 本页内容完整性 + API 与源码一致性</code></pre>
</div>
</section>
<section class="m-block">
<h2 id="contract">设计契约</h2>
<details class="m-details">
<summary>components/mobile-upload.json(点击展开原始 JSON)</summary>
<div class="m-code"><pre><code>{
"schemaVersion": 1,
"sourceKind": "authored-spec",
"provenance": "authored-in-repo",
"specFile": "spec/移动端规格.md",
"specSection": "46 · 上传 Upload",
"confidence": "high",
"slug": "mobile-upload",
"name": "上传 Upload",
"semanticTypeCandidates": [
"upload",
"file-input",
"attachment"
],
"variantDimensions": [
{
"name": "variant",
"values": [
"dashed",
"button"
]
},
{
"name": "maxCount",
"values": [
"reached",
"not-reached"
]
}
],
"representativeVariants": [
{
"variant": "dashed",
"maxCount": "not-reached",
"label": "虚线框(页面级上传区)"
},
{
"variant": "button",
"maxCount": "not-reached",
"label": "实心按钮(列表内嵌的「+ 添加」)"
},
{
"variant": "dashed",
"maxCount": "reached",
"label": "到上限(触发器变成不可点的提示行)"
},
{
"variant": "dashed",
"maxCount": "not-reached",
"label": "禁用(触发器与删除按钮都不可用)"
}
],
"anatomy": {
"upload": "根元素,纵向排列「标题行 + 触发器 + 文件列表」",
"upload__header": "标题与计数(已选 N / 上限 M)",
"upload__trigger": "选择触发器,点击调起系统文件选择器;dashed 是虚线框,button 是实心按钮",
"upload__list": "文件列表容器",
"upload__item": "单个文件行,行高不小于 44px",
"upload__thumb": "缩略图位(图片用背景图,其他类型放扩展名文字块)",
"upload__body": "文件名与「进度条 + 状态文案」的容器",
"upload__track": "进度条轨道,role=progressbar",
"upload__bar": "进度段,宽度取 --kole-m-upload-percent",
"upload__actions": "行内动作(重试 / 删除),各自 44px 热区"
},
"structurePatterns": {
"variant": "dashed(虚线框,页面级上传区)/ button(实心按钮,列表内嵌的「+ 添加」)",
"maxCount": "文件数上限(到达上限后触发器变成提示行,不再可点)",
"disabled": "false(可交互)/ true(触发器与删除按钮都不可用)"
},
"usageHints": [
"把手机里的文件交给服务端(实名认证的身份证照、报销的发票、工单的附件)",
"移动端没有拖拽也没有 hover,触发按钮是唯一入口,虚线框只表达「这里可以放东西」",
"点触发器调起系统文件选择器(本组件不发请求,选完由宿主拿文件并自行上传)",
"进度不自己走:没有内置定时器或假进度,百分比全部由宿主回传",
"删除按钮自己 44px 热区,点一次移除该项;删除进行中(uploading)时文案是「取消」",
"失败行提供「重试」,重试由宿主重新发起,组件只回传下标"
],
"doNotInvent": [
"真实的传输:请求、分片、断点续传、并发数(本组件只回传事件,不发任何请求)",
"图片压缩、裁剪、水印与方向纠正",
"服务端的校验规则(大小上限、类型白名单以文案与 accept 表达,不代为判断)",
"拍照与相册的原生调起(由宿主在 select 事件里自行调用平台 API)"
],
"unknowns": [
"上传中能否同时继续添加文件(当前允许,列表各自独立)",
"失败自动重试的次数与退避策略",
"是否需要在成功行上展示服务端返回的文件 id / URL"
],
"interaction": [
"点触发器调起系统文件选择器(本组件不发请求,选完由宿主拿文件并自行上传)",
"删除按钮自己 44px 热区,点一次移除该项;删除进行中(uploading)时文案是「取消」",
"失败行提供「重试」,重试由宿主重新发起,组件只回传下标",
"进度不自己走:没有内置定时器或假进度,百分比全部由宿主回传,避免出现「看起来在上传其实没动」",
"列表为空时显示空态文案;到 maxCount 后触发器改成不可点的提示行"
],
"accessibility": [
"触发器是原生 button,带 aria-disabled;到上限时用 disabled 让键盘跳过",
"进度条写 role=\"progressbar\" + aria-valuemin / aria-valuemax / aria-valuenow,aria-label 说明是哪个文件的进度",
"删除 / 重试按钮各自带 aria-label(含文件名),读屏播报「删除 合同扫描件.pdf」而不是孤零零的「删除」",
"状态文案是文字而不只是颜色(「已上传」「上传失败」),颜色不作为唯一信息通道"
],
"api": {
"source": "implementation",
"note": "props / events / slots 为 6 端实现的公共接口(说明文字取自规格对应小节)。字段名与各端源码逐名核对:node tools/verify-mobile-docs.mjs",
"requiredNote": "「必传」按严格定义:实现里**没有默认值**时才为 Y(本门禁逐条核对 props 与各端源码的默认值,防止契约与实现脱节)。",
"props": [
{
"name": "files",
"type": "Array<{ name: string, uid?: string, status?: 'pending'|'uploading'|'success'|'error', percent?: number }>",
"default": "[]",
"desc": "文件列表(宿主提供,状态与进度都由宿主回传)(规格 §46.4)",
"required": false
},
{
"name": "maxCount",
"type": "number",
"default": "9",
"desc": "文件数上限,到达后触发器变成提示行(规格 §46.3)",
"required": false
},
{
"name": "disabled",
"type": "boolean",
"default": "false",
"desc": "变体 disabled:触发器与删除按钮都不可用(规格 §46.3)",
"required": false
},
{
"name": "variant",
"type": "'dashed' | 'button'",
"default": "'dashed'",
"desc": "变体 variant:dashed 虚线框(页面级),button 实心按钮(列表内嵌)(规格 §46.3)",
"required": false
},
{
"name": "title",
"type": "string",
"default": "'附件'",
"desc": "标题行文案(规格 §46.2 upload__header)",
"required": false
},
{
"name": "emptyText",
"type": "string",
"default": "'还没有上传文件'",
"desc": "状态 empty 的占位文案(规格 §46.4)",
"required": false
},
{
"name": "accept",
"type": "string",
"default": "''",
"desc": "可接受的文件类型(透传给文件选择器;服务端校验规则不由本组件代为判断)(规格 §46.7)",
"required": false
}
],
"events": [
{
"name": "select",
"params": "—",
"desc": "点触发器时触发,宿主在此调起系统文件选择器(规格 §46.5)"
},
{
"name": "remove",
"params": "index: number",
"desc": "点删除(uploading 时是取消)时触发,回传条目下标(规格 §46.5)"
},
{
"name": "retry",
"params": "index: number",
"desc": "失败行点重试时触发,回传条目下标(规格 §46.5)"
}
],
"slots": [
{
"name": "default",
"desc": "自定义内容(追加在文件列表之后)"
}
]
},
"variantClasses": {
"variant": {
"dashed": [
".kole-m-upload--dashed"
],
"button": [
".kole-m-upload--button"
]
},
"maxCount": {
"reached": [
".kole-m-upload--full"
],
"not-reached": []
}
},
"demos": [
{
"id": "trigger",
"group": "01 组件类型",
"title": "选择触发",
"desc": "点一下调起系统文件选择器:移动端没有拖拽,这是唯一入口。",
"variant": "variant=dashed"
},
{
"id": "states",
"group": "01 组件类型",
"title": "四种状态",
"desc": "待上传 / 上传中(60%)/ 成功 / 失败;进度由宿主回传,组件不发请求。",
"variant": "variant=button"
},
{
"id": "removable",
"group": "02 组件状态",
"title": "可删除",
"desc": "删除按钮自己 44px 热区;删完后回到空态。",
"variant": "状态 removable"
},
{
"id": "disabled",
"group": "02 组件状态",
"title": "禁用与到顶",
"desc": "disabled 时触发器与删除都不可用;到 maxCount 后触发器改成提示行。",
"variant": "状态 disabled | 变体 maxCount=reached"
}
],
"related": [
{
"slug": "mobile-avatar",
"why": "单张头像的更换是更窄的场景,用头像组件自带的编辑态,不需要整个上传列表"
},
{
"slug": "mobile-dialog",
"why": "上传前要用户确认条款或选择来源时用它承载一步确认"
},
{
"slug": "mobile-list",
"why": "只读的附件陈列(不可增删)用列表更轻,上传的列表带状态与动作"
},
{
"slug": "mobile-toast",
"why": "上传成功 / 失败的单次反馈用它,不必在列表里堆第二条状态文案"
},
{
"slug": "mobile-loading",
"why": "等待服务端返回文件地址这类短暂阻塞用它,进度有多少用上传自己的进度条"
}
]
}</code></pre></div>
</details>
</section>
<footer class="m-foot">
<p>生成物:本页由 <code>node tools/build-mobile.mjs</code> 从契约 <code>components/mobile-upload.json</code> 与 6 端源码生成,请勿手改。</p>
<p>规格原文:<code>.design_library/kole-ui-mobile/spec/移动端规格.md</code> · 隔离门禁:<code>node tools/verify-mobile-isolation.mjs</code></p>
</footer>
</main>
</div>
<script>
(function () {
/* 左栏:≤1000px 默认收起(手机上不让导航占满一屏),跨断点时同步一次;不监听 resize,
免得跟用户手动的展开/收起抢状态。桌面不设 open 之外的动作。 */
var side = document.querySelector('details.m-side');
if (side && window.matchMedia) {
var mq = window.matchMedia('(max-width: 1000px)');
var sync = function () { if (mq.matches) side.removeAttribute('open'); else side.setAttribute('open', ''); };
sync();
if (mq.addEventListener) mq.addEventListener('change', sync);
else if (mq.addListener) mq.addListener(sync);
}
/* 单演示预览帧按内容高度自适应(同源可读 contentDocument;上限 360px、下限 140px)。
固定高度会在内容少的演示上留一大片空白(实测 SwipeCell 单个演示只用 ~120px)。 */
function fitDemoFrames() {
var frames = document.querySelectorAll('.m-demo-stage iframe');
Array.prototype.forEach.call(frames, function (f) {
var fit = function () {
try {
var d = f.contentDocument;
if (!d || !d.body) return;
/* 只量 body.scrollHeight:documentElement.scrollHeight 等于**帧视口高度**(html 撑满视口),
拿它做 max 会形成「帧高→视口高→量到的高度」反馈环,永远收敛在初始值(实测锁在 308px)。 */
var h = d.body.scrollHeight;
if (!h) h = d.documentElement ? d.documentElement.scrollHeight : 0;
if (!h) return;
f.style.height = Math.min(360, Math.max(140, h + 8)) + 'px';
} catch (e) { /* 跨源或未就绪:保持 CSS 兜底高度 */ }
};
f.addEventListener('load', function () { fit(); setTimeout(fit, 300); });
fit();
});
}
fitDemoFrames();
window.addEventListener('load', fitDemoFrames);
/* 主题模式(三态):与 PC 完全同一约定 —— localStorage[kole-mode] ∈ light|dark|auto,
auto 跟随系统,反色靠 html.kole-dark(令牌文件里已写好该组,两端共用一份令牌)。
用户在 PC 站选夜间,进移动端站也是夜间。 */
var MODE_KEY = 'kole-mode';
var MODE_LABEL = { light: '日间模式', dark: '夜间模式', auto: '自动模式' };
function readMode() {
try { var v = localStorage.getItem(MODE_KEY); if (v === 'light' || v === 'dark' || v === 'auto') return v; } catch (e) {}
return 'auto';
}
function systemDark() {
return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
}
function applyMode(mode) {
var dark = mode === 'dark' || (mode === 'auto' && systemDark());
document.documentElement.classList.toggle('kole-dark', dark);
document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
var cur = document.getElementById('m-mode-cur');
if (cur) cur.textContent = MODE_LABEL[mode] || MODE_LABEL.auto;
Array.prototype.forEach.call(document.querySelectorAll('.m-menu-opt'), function (o) {
o.setAttribute('aria-selected', o.getAttribute('data-mode') === mode ? 'true' : 'false');
});
/* 三态图标与 PC 同口径:显式选择时按时态给图标(日间=月亮 / 夜间=太阳),
自动模式下恒为「跟随系统」的显示器图标(此时两个显式图标都不显示)。 */
var moon = document.getElementById('m-icon-moon');
var sun = document.getElementById('m-icon-sun');
var auto = document.getElementById('m-icon-auto');
if (moon) moon.style.display = (mode === 'light') ? '' : 'none';
if (sun) sun.style.display = (mode === 'dark') ? '' : 'none';
if (auto) auto.style.display = (mode === 'auto') ? '' : 'none';
}
function bindModeMenu() {
var trigger = document.getElementById('m-mode-trigger');
var menu = document.getElementById('m-mode-menu');
if (!trigger || !menu) return;
var close = function (refocus) {
menu.classList.add('hidden'); trigger.setAttribute('aria-expanded', 'false');
if (refocus) trigger.focus();
};
trigger.addEventListener('click', function () {
var open = menu.classList.toggle('hidden');
trigger.setAttribute('aria-expanded', open ? 'false' : 'true');
});
trigger.addEventListener('keydown', function (e) {
if (e.key === 'Escape') close(true);
});
Array.prototype.forEach.call(menu.querySelectorAll('.m-menu-opt'), function (opt) {
opt.addEventListener('click', function () {
var mode = opt.getAttribute('data-mode');
try { localStorage.setItem(MODE_KEY, mode); } catch (e) {}
applyMode(mode);
close(true);
});
});
document.addEventListener('click', function (e) {
if (!menu.classList.contains('hidden') && !menu.contains(e.target) && !trigger.contains(e.target)) close(false);
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !menu.classList.contains('hidden')) close(true);
});
/* 自动模式下跟随系统切换 */
if (window.matchMedia) {
var mq = window.matchMedia('(prefers-color-scheme: dark)');
var onChange = function () { if (readMode() === 'auto') applyMode('auto'); };
if (mq.addEventListener) mq.addEventListener('change', onChange);
else if (mq.addListener) mq.addListener(onChange);
}
applyMode(readMode());
}
bindModeMenu();
/* 版本下拉:与 PC 顶栏同一实现口径 —— 清单从部署根取(<prefix>/versions.json 与
<prefix>/site/versions.json 两份按序尝试,取有可用条目的那份),拿不到就退回不可点的
纯角标(data-single="1"),不留一个点不开的下拉。
清单不许把用户带去外站:path 只允许 ".."(站点根自身)或 x.y.z 快照目录名。 */
var VERSION_KEY_PATH = '..';
function isValidVersionPath(p) {
if (typeof p !== 'string' || !p.length || p.indexOf('\\') >= 0 || p.indexOf('//') >= 0) return false;
if (p === VERSION_KEY_PATH) return true;
return /^\d+\.\d+\.\d+$/.test(p);
}
/* 清单里的 path 相对部署根,".." = /site/、x.y.z = /x.y.z/site/。
当前页可能不在部署根下(快照页),故先还原部署根绝对路径再算回相对当前页。 */
function versionHref(absSite) {
var i = location.pathname.indexOf('/site/');
var prefix = i >= 0 ? location.pathname.slice(0, i) : '';
if (!prefix || absSite.indexOf(prefix + '/') !== 0) return absSite;
var rest = absSite.slice(prefix.length + 1);
var up = '';
var segs = prefix.slice(1).split('/');
for (var k = 0; k < segs.length; k++) up += "../";
return up + rest;
}
function buildVersionList(doc) {
var raw = doc && doc.versions;
if (!raw || !raw.length) return [];
var i = location.pathname.indexOf('/site/');
var prefix = i >= 0 ? location.pathname.slice(0, i) : '';
var list = [];
for (var k = 0; k < raw.length; k++) {
var v = raw[k] || {};
var ver = v.version ? String(v.version) : '';
var path = v.path ? String(v.path) : '';
if (!ver || !isValidVersionPath(path)) continue;
var absSite = (path === VERSION_KEY_PATH ? '' : '/' + path) + '/site/';
list.push({ version: ver, date: v.date ? String(v.date) : '', latest: !!v.latest, href: versionHref(absSite), absSite: absSite, current: false });
}
if (list.length) {
/* 当前版本 = 绝对路径上命中的最长前缀(最具体的那个)——与 PC 的判定一致,
快照页与根站点都能算对。 */
var here = location.pathname;
var best = -1;
for (var j = 0; j < list.length; j++) {
if (here.indexOf(list[j].absSite) === 0 && list[j].absSite.length > best) best = list[j].absSite.length;
}
for (var m = 0; m < list.length; m++) list[m].current = best >= 0 && list[m].absSite.length === best;
if (best < 0 && list[0]) list[0].current = true;
}
return list;
}
function bindVersionMenu() {
var trigger = document.getElementById('m-ver-trigger');
var menu = document.getElementById('m-ver-menu');
var chip = document.getElementById('m-ver');
if (!trigger || !menu) return;
var close = function (refocus) {
menu.classList.add('hidden'); trigger.setAttribute('aria-expanded', 'false');
if (refocus) trigger.focus();
};
var interactive = false;
var render = function (list) {
interactive = !!(list && list.length);
/* 只有清单拿不到才退回纯角标;只要有一版就是下拉(里面至少能看清当前是哪个版本) */
trigger.setAttribute('data-single', interactive ? '0' : '1');
if (!interactive) { menu.classList.add("hidden"); return; }
var cur = null;
for (var k = 0; k < list.length; k++) if (list[k].current) cur = list[k];
if (chip) chip.textContent = 'v' + ((cur && cur.version) || VERSION);
/* 重建选项(幂等:重复调用不会叠加) */
Array.prototype.slice.call(menu.querySelectorAll('.m-ver-opt')).forEach(function (n) { n.remove(); });
list.forEach(function (it) {
var opt = document.createElement('button');
opt.type = 'button'; opt.className = 'm-ver-opt'; opt.setAttribute('role', 'option');
opt.setAttribute('data-version', it.version);
opt.setAttribute('aria-selected', it.current ? 'true' : 'false');
var tag = it.current ? '当前浏览' : (it.latest ? '最新版' : (it.date || ''));
opt.innerHTML = '<span class="m-ver-opt-num">v' + it.version + '</span><span class="m-ver-opt-tag">' + tag + '</span>';
if (it.href) opt.setAttribute('data-href', it.href);
opt.addEventListener("click", function () {
if (!it.current && it.href) location.href = it.href;
else close(true);
});
menu.appendChild(opt);
});
};
trigger.addEventListener('click', function () {
if (!interactive) return;
if (menu.classList.contains('hidden')) { menu.classList.remove('hidden'); trigger.setAttribute('aria-expanded', 'true'); }
else close(false);
});
trigger.addEventListener('keydown', function (e) {
if (!interactive) return;
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); menu.classList.remove('hidden'); trigger.setAttribute('aria-expanded', 'true'); }
else if (e.key === 'Escape') close(true);
});
document.addEventListener('click', function (e) {
if (!menu.classList.contains('hidden') && !menu.contains(e.target) && !trigger.contains(e.target)) close(false);
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !menu.classList.contains('hidden')) close(true);
});
/* 两份清单按序尝试(不并行:快照页那份必然 404,并行会把 404 记进控制台,
而站点门禁的「零控制台错误」是硬断言)。 */
if (!window.fetch || location.protocol === 'file:') return;
var i = location.pathname.indexOf('/site/');
if (i < 0) return;
var prefix = location.pathname.slice(0, i);
var urls = [prefix + '/versions.json', prefix + '/site/versions.json'];
var attempt = function (idx) {
if (idx >= urls.length) return;
fetch(urls[idx], { cache: 'no-store' })
.then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
.then(function (doc) { var list = buildVersionList(doc); if (list.length) render(list); else attempt(idx + 1); })
.catch(function () { attempt(idx + 1); });
};
attempt(0);
}
bindVersionMenu();
function done(btn) {
var old = btn.textContent; btn.textContent = '已复制'; btn.classList.add('is-done');
setTimeout(function () { btn.textContent = old; btn.classList.remove('is-done'); }, 1200);
}
document.addEventListener('click', function (e) {
var btn = e.target && e.target.closest ? e.target.closest('.m-copy') : null;
if (!btn) return;
var src = document.getElementById(btn.getAttribute('data-copy') || '');
var text = src ? (src.innerText || src.textContent || '') : '';
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function () { done(btn); }, function () { fallback(btn, text); });
} else { fallback(btn, text); }
});
function fallback(btn, text) {
try {
var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', '');
ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta);
ta.select(); document.execCommand("copy"); document.body.removeChild(ta); done(btn);
} catch (err) { btn.textContent = '复制失败'; }
}
})();
</script>
</body>
</html>