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 未做部分）
93 lines
4.7 KiB
HTML
93 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
__THEME_BOOT__
|
||
__BRAND_HEAD__
|
||
<title>设计规范 — Kole UI Mobile</title>
|
||
<meta name="description" content="Kole UI 移动端设计规范（设计令牌）：15 个 --kole-m-* 触控/安全区/字号令牌，以及从 PC 令牌层继承的颜色、字体、圆角与阴影。">
|
||
<link rel="stylesheet" href="../../.design_library/kole-ui-mobile/colors_and_type.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
__HEADER__
|
||
|
||
<div class="m-body">
|
||
__SIDEBAR__
|
||
<main class="m-main">
|
||
<section class="m-hero">
|
||
<h1>设计规范</h1>
|
||
<p>与 PC 的「设计规范」同口径，本页讲移动端的令牌体系。移动端令牌层只有一层新增：<b>__MOBILE_COUNT__ 个 <code>--kole-m-*</code></b>（触控尺寸、安全区、移动端字号、手势动效）。
|
||
颜色、字体族、圆角、阴影<b>不复制</b>——通过 <code>@import</code> 继承 PC 令牌，改一处两端同时生效。</p>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>令牌文件</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>文件</th><th>作用</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>.design_library/kole-ui/colors_and_type.css</code></td><td>PC 令牌（75 个 <code>--kole-*</code>）：品牌色、文字色、边框、圆角、阴影、间距、字号 —— 两端共用</td></tr>
|
||
<tr><td><code>.design_library/kole-ui-mobile/colors_and_type.css</code></td><td>移动端令牌层：<code>@import</code> 上一行 + 本节列出的 <code>--kole-m-*</code></td></tr>
|
||
<tr><td><code>dist/mobile/tokens/tokens.css</code></td><td>上两者合成的<b>自包含单文件</b>（消费端只引这一个）</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>移动端自有令牌（<code>--kole-m-*</code>）</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>令牌</th><th>值</th><th>用途</th></tr></thead>
|
||
<tbody>
|
||
__TOKEN_ROWS__
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>移动端组件实际用到的继承令牌</h2>
|
||
<p>下表的 PC 令牌由移动端 __COMPONENT_COUNT__ 个组件的样式表实际引用（构建时扫描得出）。它们定义在 PC 令牌文件里，值随 PC 主题变化 —— 移动端不需要、也不应该重新定义同名令牌。</p>
|
||
<table class="m-table">
|
||
<thead><tr><th>令牌</th><th>值</th><th>被哪些组件使用</th></tr></thead>
|
||
<tbody>
|
||
__INHERITED_ROWS__
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>三条约定</h2>
|
||
<ul>
|
||
<li><b>单位</b>：移动端 Web 端（css / html / jsx / vue2 / vue3）用 <code>px</code>，触摸目标由 <code>--kole-m-touch-target</code>（44px）保证；<b>uni-app 端</b>用 <code>rpx</code>（750rpx = 视口宽度），组件内以同名令牌覆盖成 rpx 值（如 <code>--kole-m-touch-target: 88rpx</code>）。</li>
|
||
<li><b>安全区</b>：<code>--kole-m-safe-top/bottom</code> 用 <code>@supports (padding-top: env(safe-area-inset-top))</code> 探测后取 <code>env()</code>，不支持时为 <code>0px</code>（老浏览器拿到的是合法值，而不是被丢弃的声明）。页面需带 <code>viewport-fit=cover</code>。</li>
|
||
<li><b>明暗模式</b>：由 <code>html.kole-dark</code> 承担，颜色令牌在 PC 令牌文件里成对定义；移动端令牌层<b>不</b>定义颜色，因此暗色下不会出现"两端调色不一致"。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>改令牌的正确姿势</h2>
|
||
<div class="m-code">
|
||
<div class="m-code-head"><span>只改一处，两端同时生效</span><button class="m-copy" type="button" data-copy="code-token-edit">复制</button></div>
|
||
<pre id="code-token-edit"><code>/* PC 令牌（颜色 / 字体 / 圆角 / 阴影）：两端共用 —— 改这里 */
|
||
/* .design_library/kole-ui/colors_and_type.css */
|
||
:root { --kole-color-brand: #2F54EB; }
|
||
|
||
/* 移动端自有令牌（触控 / 安全区 / 字号）：只影响移动端 —— 改这里 */
|
||
/* .design_library/kole-ui-mobile/colors_and_type.css */
|
||
:root { --kole-m-touch-target: 44px; }
|
||
|
||
/* 组件里的尺寸默认走令牌，业务侧可覆盖：
|
||
.kole-m-pullrefresh { --kole-m-pullrefresh-threshold: 80px; } */</code></pre>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="m-foot">
|
||
<p>生成物：本页由 <code>node tools/build-mobile.mjs</code> 生成（令牌表来自令牌文件与组件样式表的实际扫描），请勿手改。</p>
|
||
<p>相关：<a href="./platform.html">平台与端</a> · <a href="./guide.html">快速开始</a></p>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
__COPY_SCRIPT__
|
||
</body>
|
||
</html>
|