aurora-admin
f1fbfc2ddb
Regression / regression (push) Canceled after 0s
## 品牌标识（本次会话） 起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」， 那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」， 移动端站已是「K」；移动端文档站则完全没有 favicon）。 - 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边； 描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」 - 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）； 顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)） - 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg） - 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留） - 移动端 7 个模板补 favicon（此前计数 0） 验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/ theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致； 两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。 ## 并行会话成果（本次一并入库） - 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具 + IconPreview 预览页 + ICON-SPEC.md 冻结规格 - 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁 - PC 组件：103 个大后台组件 / 组件11 批次 - uni-app：PC 端试点 + 移动端端实现 + 真实编译验证 ## 工程 - .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库） - CHANGELOG 补品牌标识条目 - ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
284 lines
14 KiB
HTML
284 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title>Kole UI Mobile · Upload（H5）</title>
|
||
<link rel="stylesheet" href="../.design_library/kole-ui-mobile/colors_and_type.css">
|
||
<link rel="stylesheet" href="Upload.css">
|
||
<style>
|
||
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; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo">
|
||
<section class="demo-block" data-demo="trigger">
|
||
<p class="demo-label">选择触发（点一下调起系统文件选择器：移动端没有拖拽，这是唯一入口）</p>
|
||
<div class="demo-pad" data-assert="upload-trigger">
|
||
<div class="kole-m-upload" id="up-trigger" data-count="0" data-max="5">
|
||
<div class="kole-m-upload__header">
|
||
<span class="kole-m-upload__title">附件</span>
|
||
<span class="kole-m-upload__count" id="up-trigger-count">0 / 5</span>
|
||
</div>
|
||
<input class="kole-m-upload__native" id="up-trigger-input" type="file" multiple tabindex="-1" aria-hidden="true">
|
||
<button class="kole-m-upload__trigger" type="button" id="up-trigger-btn"
|
||
data-behavior="click-sets-attr:#up-trigger|data-picked|true"
|
||
aria-describedby="up-trigger-hint">＋ 选择文件</button>
|
||
<p class="kole-m-upload__empty" id="up-trigger-hint">支持 jpg / png / pdf，单个不超过 10 MB</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="demo-block" data-demo="states">
|
||
<p class="demo-label">四种状态（待上传 / 上传中 60% / 成功 / 失败，均不发真实请求，进度由宿主回传）</p>
|
||
<div class="demo-pad" data-assert="upload-states">
|
||
<div class="kole-m-upload kole-m-upload--button" id="up-states" data-count="4">
|
||
<div class="kole-m-upload__header">
|
||
<span class="kole-m-upload__title">上传队列</span>
|
||
<span class="kole-m-upload__count">4 个文件</span>
|
||
</div>
|
||
<ul class="kole-m-upload__list">
|
||
<li class="kole-m-upload__item is-pending" data-assert="upload-state-pending">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">pdf</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">合同扫描件.pdf</span>
|
||
<span class="kole-m-upload__meta">
|
||
<span class="kole-m-upload__track" aria-hidden="true"><span class="kole-m-upload__bar"></span></span>
|
||
<span class="kole-m-upload__status">待上传</span>
|
||
</span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="删除 合同扫描件.pdf" id="up-remove-pending"
|
||
data-behavior="click-sets-attr:#up-states|data-removed|pending">删除</button>
|
||
</span>
|
||
</li>
|
||
<li class="kole-m-upload__item is-uploading" style="--kole-m-upload-percent: 60%">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">png</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">产品主图.png</span>
|
||
<span class="kole-m-upload__meta">
|
||
<span class="kole-m-upload__track" role="progressbar" aria-valuemin="0" aria-valuemax="100"
|
||
aria-valuenow="60" aria-label="产品主图.png 上传进度">
|
||
<span class="kole-m-upload__bar"></span>
|
||
</span>
|
||
<span class="kole-m-upload__status">60%</span>
|
||
</span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="取消 产品主图.png">取消</button>
|
||
</span>
|
||
</li>
|
||
<li class="kole-m-upload__item is-success">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">jpg</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">营业执照.jpg</span>
|
||
<span class="kole-m-upload__meta">
|
||
<span class="kole-m-upload__track" aria-hidden="true"><span class="kole-m-upload__bar"></span></span>
|
||
<span class="kole-m-upload__status">已上传</span>
|
||
</span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="删除 营业执照.jpg">删除</button>
|
||
</span>
|
||
</li>
|
||
<li class="kole-m-upload__item is-error">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">zip</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">素材包.zip</span>
|
||
<span class="kole-m-upload__meta">
|
||
<span class="kole-m-upload__track" role="progressbar" aria-valuemin="0" aria-valuemax="100"
|
||
aria-valuenow="100" aria-label="素材包.zip 上传失败">
|
||
<span class="kole-m-upload__bar"></span>
|
||
</span>
|
||
<span class="kole-m-upload__status">超出 10 MB</span>
|
||
</span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action" type="button" aria-label="重试 素材包.zip" id="up-retry"
|
||
data-behavior="click-sets-attr:#up-states|data-retried|zip">重试</button>
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="删除 素材包.zip">删除</button>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="demo-block" data-demo="removable">
|
||
<p class="demo-label">可删除（删除按钮自己 44px 热区；删完后回到空态）</p>
|
||
<div class="demo-pad" data-assert="upload-removable">
|
||
<div class="kole-m-upload" id="up-removable" data-count="2" data-max="5">
|
||
<div class="kole-m-upload__header">
|
||
<span class="kole-m-upload__title">发票</span>
|
||
<span class="kole-m-upload__count" id="up-removable-count">2 / 5</span>
|
||
</div>
|
||
<ul class="kole-m-upload__list" id="up-removable-list">
|
||
<li class="kole-m-upload__item is-success" data-assert="upload-removable-row">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">jpg</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">发票-09月.jpg</span>
|
||
<span class="kole-m-upload__meta"><span class="kole-m-upload__status">已上传</span></span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="删除 发票-09月.jpg" data-remove="row"
|
||
data-behavior="click-sets-attr:#up-removable|data-removed|row-1">删除</button>
|
||
</span>
|
||
</li>
|
||
<li class="kole-m-upload__item is-success" id="up-removable-row-1">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">pdf</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">对账单-09月.pdf</span>
|
||
<span class="kole-m-upload__meta"><span class="kole-m-upload__status">已上传</span></span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="删除 对账单-09月.pdf" data-remove="row">删除</button>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<p class="kole-m-upload__empty" id="up-removable-empty" hidden>还没有上传文件</p>
|
||
<button class="kole-m-upload__trigger" type="button">＋ 选择文件</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="demo-block" data-demo="disabled">
|
||
<p class="demo-label">禁用与到顶（disabled：触发器不可点、删除按钮置灰；到 maxCount 触发器改成提示行）</p>
|
||
<div class="demo-pad" data-assert="upload-disabled">
|
||
<div class="kole-m-upload is-disabled" id="up-disabled" data-count="1" data-max="5">
|
||
<div class="kole-m-upload__header">
|
||
<span class="kole-m-upload__title">已锁定</span>
|
||
<span class="kole-m-upload__count">1 / 5</span>
|
||
</div>
|
||
<ul class="kole-m-upload__list">
|
||
<li class="kole-m-upload__item is-success">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">jpg</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">身份证正面.jpg</span>
|
||
<span class="kole-m-upload__meta"><span class="kole-m-upload__status">已上传</span></span>
|
||
</span>
|
||
<span class="kole-m-upload__actions">
|
||
<button class="kole-m-upload__action kole-m-upload__action--remove" type="button"
|
||
aria-label="删除 身份证正面.jpg" aria-disabled="true" disabled>删除</button>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<button class="kole-m-upload__trigger" type="button" aria-disabled="true" disabled>＋ 选择文件</button>
|
||
</div>
|
||
<div class="kole-m-upload kole-m-upload--full" id="up-full" data-count="2" data-max="2" style="margin-top: var(--kole-space-16)">
|
||
<div class="kole-m-upload__header">
|
||
<span class="kole-m-upload__title">已到上限</span>
|
||
<span class="kole-m-upload__count">2 / 2</span>
|
||
</div>
|
||
<ul class="kole-m-upload__list">
|
||
<li class="kole-m-upload__item is-success">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">png</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">门头照.png</span>
|
||
<span class="kole-m-upload__meta"><span class="kole-m-upload__status">已上传</span></span>
|
||
</span>
|
||
</li>
|
||
<li class="kole-m-upload__item is-success">
|
||
<span class="kole-m-upload__thumb" aria-hidden="true">png</span>
|
||
<span class="kole-m-upload__body">
|
||
<span class="kole-m-upload__name">内景照.png</span>
|
||
<span class="kole-m-upload__meta"><span class="kole-m-upload__status">已上传</span></span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<p class="kole-m-upload__empty">已达到 2 个文件上限，删除后可继续添加</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<script>
|
||
/* 演示页交互：**不发任何真实请求**。
|
||
触发器只调起本页隐藏的 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 && input) {
|
||
btn.addEventListener('click', function () {
|
||
if (root && 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 && removePending) {
|
||
removePending.addEventListener('click', function () {
|
||
states.setAttribute('data-removed', 'pending');
|
||
});
|
||
}
|
||
if (states && 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 > 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="row"]') : null;
|
||
if (!b) return;
|
||
var row = b.closest('.kole-m-upload__item');
|
||
if (row && row.parentNode) row.parentNode.removeChild(row);
|
||
if (roo2) roo2.setAttribute('data-removed', 'row-1');
|
||
syncEmpty();
|
||
});
|
||
syncEmpty();
|
||
}
|
||
})();
|
||
</script>
|
||
<script>
|
||
/* ?demo=<id> → 只显示该演示块（文档站按块预览用；无参数时全部显示，测试与回归走无参数路径） */
|
||
(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 && !b.hidden) label.hidden = true;
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|