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 未做部分）
191 lines
9.5 KiB
HTML
191 lines
9.5 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 移动端组件快速开始：令牌引入、6 端最小示例（CSS / H5 原生 / React / Vue 2 / Vue 3 / 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>本节介绍如何在工程里用上 Kole UI 移动端组件：先引令牌，再按你的技术栈取用对应端的实现。移动端与 PC 端<strong>物理隔离</strong>（目录 / 类名 / 令牌前缀 / 测试都分开），只有颜色、字体、圆角、阴影令牌同源。</p>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>1 · 三步接入</h2>
|
||
<ol class="m-steps">
|
||
<li><b>引令牌</b>：移动端令牌层已把 PC 令牌（颜色 / 字体 / 圆角 / 阴影）与移动端令牌（<code>--kole-m-*</code>：触控尺寸、安全区、移动端字号）合成一份 <code>tokens.css</code>，引入一次即可。</li>
|
||
<li><b>引组件样式</b>：全量用聚合文件，或按需只引某个组件的 CSS。</li>
|
||
<li><b>按端取实现</b>：同一组件六端同源，类名与结构一致，取你技术栈那一份即可（见下方按端示例）。</li>
|
||
</ol>
|
||
<div class="m-code">
|
||
<div class="m-code-head"><span>接入（纯 HTML / 任意工程）</span><button class="m-copy" type="button" data-copy="code-tokens">复制</button></div>
|
||
<pre id="code-tokens"><code><!-- ① 令牌（PC 令牌 + 移动端 --kole-m-* 合成单文件） -->
|
||
<link rel="stylesheet" href="kole-ui/mobile/tokens.css">
|
||
|
||
<!-- ② 组件样式（全量或按需二选一） -->
|
||
<link rel="stylesheet" href="kole-ui/mobile/components/index.css">
|
||
<!-- <link rel="stylesheet" href="kole-ui/mobile/components/navbar.css"> -->
|
||
|
||
<!-- ③ 结构照抄任一端的实现（本例 = H5 原生） -->
|
||
<header class="kole-m-navbar kole-m-navbar--center" role="banner">
|
||
<button class="kole-m-navbar__back" type="button" aria-label="返回">‹</button>
|
||
<h2 class="kole-m-navbar__title">订单详情</h2>
|
||
<div class="kole-m-navbar__actions">
|
||
<button class="kole-m-navbar__action" type="button">分享</button>
|
||
</div>
|
||
</header></code></pre>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>2 · 按端引入</h2>
|
||
<p>包内路径（<code>kole-ui</code> 的 <code>exports</code> 已声明；从仓库直接用则换成 <code>dist/mobile/…</code> 或 <code>frameworks-mobile/…</code>）：</p>
|
||
<table class="m-table">
|
||
<thead><tr><th>端</th><th>引入</th><th>说明</th></tr></thead>
|
||
<tbody>
|
||
__END_ROWS__
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>3 · 各端最小示例</h2>
|
||
<div class="m-code">
|
||
<div class="m-code-head"><span>React</span><button class="m-copy" type="button" data-copy="code-react">复制</button></div>
|
||
<pre id="code-react"><code>import { KoleMNavBar, KoleMTabBar, KoleMActionSheet } from 'kole-ui/mobile/react';
|
||
import 'kole-ui/mobile/components/index.css';
|
||
|
||
export default function Page() {
|
||
const [visible, setVisible] = React.useState(false);
|
||
const [tab, setTab] = React.useState('home');
|
||
return (
|
||
<>
|
||
<KoleMNavBar title="订单详情" titleAlign="center" onBack={() => history.back()}
|
||
actions={<button className="kole-m-navbar__action" type="button">分享</button>} />
|
||
<main style={{ padding: 16 }}>页面内容</main>
|
||
<KoleMActionSheet visible={visible} title="订单操作"
|
||
actions={[{ key: 'done', label: '标记为已完成' },
|
||
{ key: 'del', label: '删除订单', tone: 'danger' }]}
|
||
onClose={() => setVisible(false)} onSelect={(k) => console.log(k)} />
|
||
<KoleMTabBar value={tab} onChange={setTab}
|
||
items={[{ key: 'home', label: '首页' }, { key: 'order', label: '订单', badge: 12 },
|
||
{ key: 'mine', label: '我的' }]} />
|
||
</>
|
||
);
|
||
}</code></pre>
|
||
</div>
|
||
<div class="m-code">
|
||
<div class="m-code-head"><span>Vue 3</span><button class="m-copy" type="button" data-copy="code-vue3">复制</button></div>
|
||
<pre id="code-vue3"><code><script setup>
|
||
import { ref } from 'vue';
|
||
import KoleMNavBar from 'kole-ui/mobile/vue3/NavBar.vue';
|
||
import KoleMSwipeCell from 'kole-ui/mobile/vue3/SwipeCell.vue';
|
||
import 'kole-ui/mobile/components/index.css';
|
||
|
||
const open = ref(false);
|
||
</script>
|
||
|
||
<template>
|
||
<KoleMNavBar title="消息列表" @back="open = true" />
|
||
|
||
<KoleMSwipeCell direction="left"
|
||
:actions="[{ key: 'read', label: '已读' }, { key: 'del', label: '删除', tone: 'danger' }]"
|
||
@action="onAction">
|
||
<span class="kole-m-swipecell__title">订单 20260920-001</span>
|
||
<span class="kole-m-swipecell__desc">2026-09-20 09:12 · 待处理</span>
|
||
</KoleMSwipeCell>
|
||
</template></code></pre>
|
||
</div>
|
||
<div class="m-code">
|
||
<div class="m-code-head"><span>Vue 2</span><button class="m-copy" type="button" data-copy="code-vue2">复制</button></div>
|
||
<pre id="code-vue2"><code><script>
|
||
import KoleMTabBar from 'kole-ui/mobile/vue2/TabBar.vue';
|
||
import KoleMPullRefresh from 'kole-ui/mobile/vue2/PullRefresh.vue';
|
||
|
||
export default {
|
||
components: { KoleMTabBar, KoleMPullRefresh },
|
||
data: function () {
|
||
return {
|
||
tab: 'home',
|
||
refreshing: false,
|
||
items: [{ key: 'home', label: '首页' }, { key: 'mine', label: '我的' }]
|
||
};
|
||
},
|
||
methods: {
|
||
onRefresh: function () {
|
||
this.refreshing = true;
|
||
setTimeout(function () { this.refreshing = false; }.bind(this), 800);
|
||
}
|
||
}
|
||
};
|
||
</script></code></pre>
|
||
</div>
|
||
<div class="m-code">
|
||
<div class="m-code-head"><span>uni-app（App / 小程序 / H5 三目标）</span><button class="m-copy" type="button" data-copy="code-uniapp">复制</button></div>
|
||
<pre id="code-uniapp"><code><script setup>
|
||
import { ref } from 'vue';
|
||
import KoleMNavBar from 'kole-ui/mobile/uniapp/NavBar.vue';
|
||
import KoleMSwipeCell from 'kole-ui/mobile/uniapp/SwipeCell.vue';
|
||
</script>
|
||
|
||
<template>
|
||
<KoleMNavBar title="订单" @back="uni.navigateBack()" />
|
||
<KoleMSwipeCell direction="left" :actions="[{ key: 'del', label: '删除', tone: 'danger' }]">
|
||
<text>订单 20260920-001</text>
|
||
</KoleMSwipeCell>
|
||
</template>
|
||
|
||
<style>
|
||
/* 令牌在宿主工程全局引一次：@import "kole-ui/mobile/tokens.css"; */
|
||
</style>
|
||
|
||
<!-- 本端限制：小程序与 App 端没有 DOM、也没有 PointerEvent，
|
||
故组件内部只用 @touchstart/@touchmove/@touchend 与 uni 基础组件（view / text）。 --></code></pre>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>4 · 与 PC 端的边界</h2>
|
||
<ul>
|
||
<li><b>不要混用类名</b>：移动端是 <code>kole-m-</code>，PC 端是 <code>kole-</code>（如 <code>.kole-card</code>）。两套样式表各引各的，交叉引用会拿到未定义的样式。</li>
|
||
<li><b>不要手改组件 CSS 的尺寸单位</b>：移动端用 <code>px</code> + 令牌（触摸目标 44px），uni-app 端用 <code>rpx</code>（750rpx = 视口宽度）。PC × uni-app 端反过来保持 <code>px</code>。</li>
|
||
<li><b>明暗模式</b>：由 <code>html.kole-dark</code> 控制，移动端不再重复定义颜色；令牌层里 <code>color-scheme</code> 已跟随主题。</li>
|
||
<li>完整规则与门禁命令见 <a href="./platform.html">平台与端</a>。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="m-block">
|
||
<h2>5 · 常见问题</h2>
|
||
<table class="m-table">
|
||
<thead><tr><th>现象</th><th>原因 / 处理</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>组件渲染但没有样式</td><td>没引令牌或组件样式。最小集合是 <code>tokens.css</code> + <code>components/index.css</code>（或单个组件 CSS）。</td></tr>
|
||
<tr><td><code>--kole-m-*</code> 取不到值</td><td>令牌层没加载。它在 PC 令牌文件之上加了一层，<b>不要</b>只引 PC 的 <code>colors_and_type.css</code>。</td></tr>
|
||
<tr><td>安全区没生效（刘海/底部横条）</td><td>页面需要 <code>viewport-fit=cover</code>（演示页都带）；令牌层用 <code>@supports (padding-top: env(safe-area-inset-top))</code> 探测，不支持时安全区为 0。</td></tr>
|
||
<tr><td>滑动/下拉在手机上不触发</td><td>组件内部用 Pointer Events（浏览器）；uni-app 端用 touch 事件。若在自定义容器上截了事件，需要放行。</td></tr>
|
||
<tr><td>同一页多个 <code>position: fixed</code> 组件叠在一起</td><td>这是浏览器的正常行为（都相对视口定位）。做演示/预览时给容器加 <code>transform: translateZ(0)</code> 建立包含块，组件 CSS 不用改。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<footer class="m-foot">
|
||
<p>生成物：本页由 <code>node tools/build-mobile.mjs</code> 生成，请勿手改。</p>
|
||
<p>下一步：<a href="./design.html">设计规范</a> · <a href="./platform.html">平台与端</a> · <a href="./index.html">组件总览</a></p>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
__COPY_SCRIPT__
|
||
</body>
|
||
</html>
|