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 未做部分）
114 lines
7.3 KiB
HTML
114 lines
7.3 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 的平台 × 端两轴模型：PC / 移动两个平台，css / h5 / react / vue2 / vue3 / uni-app 六个端，以及两端之间的隔离规则与门禁。">
|
||
<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>组件库按<b>两个正交轴</b>组织：<b>平台</b>（<code>pc</code> / <code>mobile</code>）决定用哪些组件与命名空间；<b>端</b>（<code>css</code> / <code>h5 原生</code> / <code>react</code> / <code>vue2</code> / <code>vue3</code> / <code>uniapp</code>）决定同一组件在哪个技术栈里怎么实现。完整文档见仓库根 <code>PLATFORMS.md</code>。</p>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>覆盖矩阵</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>平台 ↓ ／ 端 →</th><th>css</th><th>h5 原生</th><th>react</th><th>vue2</th><th>vue3</th><th>uniapp</th></tr></thead>
|
||
<tbody>
|
||
__AXIS_ROWS__
|
||
</tbody>
|
||
</table>
|
||
<p class="m-note">✅ = 该平台组件清单在此端已全覆盖；数字 = 已实现 / 总数。</p>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>uni-app 是一个端，不是第三个平台</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>列</th><th>实现位置</th><th>目标产物</th><th>关键约束</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>移动端 × uni-app</td>
|
||
<td><code>frameworks-mobile/*.uniapp.vue</code>（__MOBILE_COUNT__ 个）</td>
|
||
<td><code>app-plus</code>（App）/ <code>mp-weixin</code>（微信小程序）/ <code>h5</code></td>
|
||
<td>uni 基础组件（<code>view</code>/<code>text</code>）+ <code>rpx</code> + <b>touch 事件</b>（小程序与 App 端没有 DOM，也没有 PointerEvent）</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PC × uni-app</td>
|
||
<td><code>frameworks-uniapp-pc/*.uniapp.vue</code>（3 个试点，见 ROADMAP S7-P26）</td>
|
||
<td>H5（PC 浏览器）/ PC 容器</td>
|
||
<td>类名与 PC 的 <code>frameworks/*.css</code> <b>逐字一致</b>（<code>btn</code> / <code>kole-input</code> / <code>kole-card</code>），令牌取 PC 的 <code>--kole-*</code>，尺寸保持 <code>px</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>目录与命名映射</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>维度</th><th>PC 端</th><th>移动端</th><th>共享</th></tr></thead>
|
||
<tbody>
|
||
__MAPPING_ROWS__
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>隔离规则（硬约束）</h2>
|
||
<ol class="m-steps">
|
||
<li>移动端实现只能在 <code>frameworks-mobile/</code>；PC 实现只能在 <code>frameworks/</code>。两端的文件数都有断言（395 / __MOBILE_IMPL__）。</li>
|
||
<li>移动端类名只能是 <code>kole-m-<name></code> 或状态类 <code>is-<state></code>；移动端样式不得出现硬编码十六进制颜色。</li>
|
||
<li>移动端样式只能引用 <code>--kole-*</code> 或 <code>--kole-m-*</code> 令牌，且令牌必须真实存在。</li>
|
||
<li><b>PC 侧的目录、数据、测试、分发里不得出现任何移动端痕迹</b>（零 <code>kole-m-</code> 命中、零 <code>frameworks-mobile/</code> 引用）。</li>
|
||
<li>移动端构建脚本自带写入守卫：<code>build-mobile.mjs</code> 只允许写 <code>site/m/</code>、<code>tests/mobile/</code>、<code>dist/mobile/</code>；<code>build-uniapp.mjs</code> 只允许写 <code>dist/uniapp-pc/</code>。越界直接抛错退出。</li>
|
||
<li>PC 的 <code>site/data.json</code>（一次请求拿到全部 PC 组件）保持不变；移动端另起 <code>site/m/data.mobile.json</code>，两端互不引用。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>门禁命令</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>命令</th><th>检查什么</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>npm run verify:isolation</code></td><td>PC 零污染 / 移动端自洽（6 端文件齐全、契约字段完整、类名与令牌前缀合规）/ 分发隔离（PC 聚合样式无移动端类、manifest 与索引一致、exports 两套并存）</td></tr>
|
||
<tr><td><code>npm run verify:uniapp</code></td><td>8 个 uni-app SFC：三段结构 / <code>node --check</code> 语法 / 标签配平 / 禁 DOM API / 手势必须 touch / 只用 uni 基础组件 / 前缀隔离 / 单位策略</td></tr>
|
||
<tr><td><code>npm run verify:mobile-docs</code></td><td>本站的完整性：每个组件页的必备小节、侧栏是否列全、契约 API 是否与 6 端源码逐名一致、每个声明的端是否有代码块</td></tr>
|
||
<tr><td><code>npm run verify:mobile-site</code></td><td>浏览器实测：HTTP 200 / 控制台 0 错误 / 演示帧真实渲染 / 令牌生效 / 未引 PC 站样式 / 320–768px 无横向溢出</td></tr>
|
||
<tr><td><code>npm run regression:mobile</code></td><td>移动端断言回归（含触控行为断言），报告落 <code>tests/mobile-report.json</code></td></tr>
|
||
<tr><td><code>npm run regression</code></td><td>PC 侧断言回归（__PC_N__ 页）—— 改移动端后也必须保持 100%</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>新增一个移动端组件（六步）</h2>
|
||
<ol class="m-steps">
|
||
<li>在 <code>.design_library/kole-ui-mobile/spec/移动端规格.md</code> 补一节：用途 / 结构 / 变体维度 / 状态 / 交互与触控 / 无障碍 / doNotInvent / unknowns —— <b>规格是契约的授权来源，先写规格再写代码</b>。</li>
|
||
<li>在 <code>.design_library/kole-ui-mobile/components/index.json</code> 登记：slug（不得与 PC 的 __PC_N__ 个撞名）、frameworksPrefix、category、specSection、contract、files（<b>6 个端的文件名必须全部声明</b>）。</li>
|
||
<li>写 6 个端实现到 <code>frameworks-mobile/</code>：<code><Prefix>.{css,html,jsx,vue2.vue,vue3.vue,uniapp.vue}</code>。html 是演示页，需含 <code>.demo</code> 容器与 <code>data-assert</code> / <code>data-behavior</code>。</li>
|
||
<li>写契约 <code>components/<slug>.json</code>：<code>sourceKind: authored-spec</code>、<code>provenance: authored-in-repo</code>，usageHints / anatomy / interaction / accessibility 逐字取自规格，<code>api</code> 与各端源码逐名一致。</li>
|
||
<li><code>npm run build:mobile</code> 重建数据、文档站、测试页与分发包。</li>
|
||
<li><code>npm run verify:isolation && npm run verify:uniapp && npm run verify:mobile-docs && npm run regression:mobile</code> 全绿才算完成。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<footer class="m-foot">
|
||
<p>生成物：本页由 <code>node tools/build-mobile.mjs</code> 生成，请勿手改。</p>
|
||
<p>权威文档：仓库根 <code>PLATFORMS.md</code> · 移动端规格：<code>.design_library/kole-ui-mobile/spec/移动端规格.md</code></p>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
__COPY_SCRIPT__
|
||
</body>
|
||
</html>
|