顶部导航栏NavBar
导航 · titleAlign: center/left · elevated: false/true
移动端组件（47 个）
触摸优先的移动端组件，与 PC 端（103 个中后台组件）物理隔离：独立目录、独立类名前缀 kole-m-、独立令牌前缀 --kole-m-、独立测试页与回归报告。仅颜色 / 字体 / 圆角 / 阴影令牌与 PC 同源，改一处令牌两端同步生效。
三步接入
- 引一次令牌：
kole-ui/mobile/tokens.css（PC 令牌 + 移动端令牌合成单文件） - 引组件样式：
kole-ui/mobile/components/index.css，或按需引单个组件 - 按端取实现：同一组件六端同源（
kole-ui/mobile/<端>/<组件>），取你技术栈那一份
覆盖矩阵
| 平台 ↓ ／ 端 → | css | h5 原生 | react | vue2 | vue3 | uniapp |
|---|---|---|---|---|---|---|
| 移动端（47） | ✅ 47 | ✅ 47 | ✅ 47 | ✅ 47 | ✅ 47 | ✅ 47 |
| PC（103） | ✅ 103 | ✅ 103 | ✅ 103 | ✅ 103 | ✅ 103 | 3 / 103（试点） |
移动端 47 个组件 × 6 端 = 282 个实现文件；PC 端 103 个中后台组件 × 5 端，另有 PC × uni-app 试点列（见 ROADMAP S7-P26）。
隔离边界
| 维度 | PC 端 | 移动端 | 共享 |
|---|---|---|---|
| 实现目录 | frameworks/（515） | frameworks-mobile/（282） | 否 |
| 契约 | .design_library/kole-ui/components/（103） | .design_library/kole-ui-mobile/components/（47） | 否 |
| 索引（唯一真源） | components/index.json | kole-ui-mobile/components/index.json | 否 |
| 类名前缀 | kole-（含既有短名 btn） | kole-m-（状态类 is-*） | 否 |
| 令牌前缀 | --kole-*（75） | --kole-m-*（15） | 颜色 / 字体 / 圆角 / 阴影同源（@import） |
| 导出名 | KoleButton | KoleMNavBar | 否 |
| 测试页 | tests/<slug>.html（103） | tests/mobile/<slug>.html（47） | 共享断言引擎 tests/_runtime.js |
| 回归报告 | tests/report.json | tests/mobile-report.json | 否 |
| 文档站 | site/（SPA 路由） | site/m/（静态页，不进 PC 路由表） | 否 |
| 自包含数据 | site/data.json | site/m/data.mobile.json | 否 |
| 分发产物 | dist/components|react|vue3|vue2 | dist/mobile/* | 否 |
| 构建脚本 | build-site.ps1 + build-dist.mjs | build-mobile.mjs + build-uniapp.mjs | 否 |
规则全文与门禁命令见 平台与端；权威文档为仓库根 PLATFORMS.md。
组件清单（47）
底部标签栏TabBar
导航 · count: 2/3/4/5 · badge: none/dot/number
动作面板ActionSheet
反馈 · tone: default/danger · cancel: inline/separate
下拉刷新PullRefresh
反馈 · state: pull/ready/refreshing/done · threshold: 60
滑动单元格SwipeCell
反馈 · direction: left/right · actions: 1/2
按钮Button
通用 · type: primary/default/text/danger · size: large/default/small · block: false/true
单元格Cell
数据展示 · arrow: false/true · link: false/true
分割线Divider
通用 · orientation: horizontal/vertical · align: left/center/right · dashed: false/true
徽标Badge
数据展示 · shape: dot/number/text · standalone: false/true
标签Tag
数据展示 · tone: default/primary/success/warning/danger · size: default/small · closable: false/true
弹出层Popup
反馈 · placement: center/bottom/top/left/right · round: false/true
轻提示Toast
反馈 · tone: info/success/warning/danger/loading · position: center/bottom/top · mask: false/true
对话框Dialog
反馈 · variant: confirm/alert · tone: default/danger · round: false/true
宫格Grid
导航 · columns: 2/3/4 · border: false/true · square: false/true
步骤条Steps
导航 · direction: horizontal/vertical · status: wait/process/finish/error
通知栏NoticeBar
反馈 · tone: default/success/warning/danger · scrollable: false/true · closable: false/true
数字键盘NumberKeyboard
数据录入 · type: number/digit · showDelete: false/true · showConfirm: false/true
日期选择器DatePicker
数据录入 · mode: date/month · round: false/true
图标Icon
通用 · size: small/default/large/xlarge · tone: default/brand/secondary/danger/success/warning · spin: false/true
布局Layout
通用 · gutter: 0/8/16/24 · columns: 0/2/3/4 · align: start/center/end/stretch · wrap: true/false
链接Link
通用 · tone: brand/default/danger/success · underline: false/true · block: false/true
加载Loading
反馈 · size: small/default/large · vertical: false/true · fullscreen: false/true
头像Avatar
数据展示 · size: small/default/large · shape: circle/square · type: text/image
列表List
数据展示 · border: true/false · size: default/compact · divider: inset/full
折叠面板Collapse
数据展示 · accordion: false/true · bordered: true/false
进度条Progress
反馈 · type: line/circle · status: normal/success/error · labelPlacement: inside/right/center
输入框Input
数据录入 · size: default/large · clearable: false/true
搜索框Search
数据录入 · round: true/false · showCancel: false/true
步进器Stepper
数据录入 · size: default/small · round: false/true
开关Switch
数据录入 · size: default/small · labelPlacement: right/left
多行文本框Textarea
数据录入 · size: default/large · showCounter: false/true
多选框Checkbox
数据录入 · orientation: vertical/horizontal · button: false/true · selectAll: false/true
表单Form
数据录入 · labelPosition: top/left · borderless: false/true
单选框Radio
数据录入 · orientation: vertical/horizontal · button: false/true
评分Rate
数据录入 · size: default/small · allowHalf: false/true · readonly: false/true
滑动选择器Slider
数据录入 · mode: single/range · marks: with-marks/none · showValue: true/false
级联选择器Cascader
数据录入 · mode: panel/popup · showPath: true/false · round: false/true
颜色选择器ColorPicker
数据录入 · mode: swatch/custom · round: false/true · showValue: true/false
消息通知Message
反馈 · tone: info/success/warning/error · closable: false/true
遮罩层Overlay
反馈 · tone: default/strong/blur · contained: false/true
选择器Picker
数据录入 · mode: single/multiple · round: false/true
弹出气泡Popover
反馈 · placement: top/bottom/left/right · arrow: false/true
分段器Segmented
导航 · size: default/small · block: false/true
吸顶容器Sticky
导航 · position: top/bottom · safeArea: false/true · shadow: false/true
表格Table
数据展示 · mode: scroll/card · size: default/compact · stripe: false/true · bordered: false/true
排版Typography
数据展示 · level: title/body/assist/secondary · ellipsis: false/true · copyable: false/true
上传Upload
数据录入 · variant: dashed/button · maxCount: reached/not-reached
规格来源说明
PC 端实现来自外部交付的 组件1~10.txt；移动端没有外部规格原文，规格由本仓库撰写（.design_library/kole-ui-mobile/spec/移动端规格.md），契约 JSON 的 sourceKind 为 authored-spec、provenance 为 authored-in-repo —— 不冒认外部来源。契约中的 unknowns 记录规格未定项的当前状态，doNotInvent 列出明确不许发明的部分。