Files
aurora-admin/site/examples/tabs.json
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库
## 品牌标识(本次会话)

起因:品牌此前没有任何图形标识 —— 唯一 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 未做部分)
2026-09-21 10:05:48 +08:00

2 lines
6.7 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{"slug":"tabs","mode":"scenarios","examples":[{"id":"tabs-ex-1","title":"线型(默认)","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <div class=\"kole-tabs type-line\" id=\"tabs-line\" data-tabs>\n <div class=\"kole-tabs-nav\" role=\"tablist\">\n <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"basic\">基本信息</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"safe\">安全设置</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"notify\">通知</div>\n <div class=\"kole-tabs-tab is-disabled\" role=\"tab\" tabindex=\"0\" data-key=\"auth\">授权</div>\n </div>\n <div class=\"kole-tabs-content\" data-panels>\n <div data-panel=\"basic\">这里是「基本信息」面板内容。</div>\n <div data-panel=\"safe\" hidden>这里是「安全设置」面板内容。</div>\n <div data-panel=\"notify\" hidden>这里是「通知」面板内容。</div>\n <div data-panel=\"auth\" hidden>这里是「授权」面板内容。</div>\n </div>\n </div>\n</div>","preview":{"show":[[0,2]],"hide":[[1],[0,0],[0,1],[0,3],[0,4],[0,2,0]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<div class=\"kole-tabs type-line\" id=\"tabs-line\" data-tabs>\n <div class=\"kole-tabs-nav\" role=\"tablist\">\n <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\">基本信息</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">安全设置</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">通知</div>\n <div class=\"kole-tabs-tab is-disabled\" role=\"tab\" tabindex=\"0\">授权</div>\n </div>\n <div class=\"kole-tabs-content\">\n <div>这里是「基本信息」面板内容。</div>\n <div hidden>这里是「安全设置」面板内容。</div>\n <div hidden>这里是「通知」面板内容。</div>\n <div hidden>这里是「授权」面板内容。</div>\n </div>\n</div>","jsx":"import { KoleTabs } from 'kole-ui/react';\n\n<KoleTabs type=\"line\" />","vue3":"<template>\n <KoleTabs type=\"line\" />\n</template>\n\n<script setup>\nimport { KoleTabs } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleTabs type=\"line\" />\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\nexport default { components: { KoleTabs } };\n</script>"},"notes":["演示页未含可映射的调用标记,本片段依据组件 API 表推导"]},{"id":"tabs-ex-2","title":"卡片型(可关闭 / 新增)","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <div class=\"kole-tabs type-card\" id=\"tabs-card\" data-tabs>\n <div class=\"kole-tabs-nav\" role=\"tablist\">\n <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"t1\">\n 订单\n <span class=\"kole-tabs-close\" data-close>×</span>\n </div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"t2\">\n 退款\n <span class=\"kole-tabs-close\" data-close>×</span>\n </div>\n <div class=\"kole-tabs-add\" role=\"button\" aria-label=\"新增标签页\" tabindex=\"0\" data-add>+</div>\n </div>\n <div class=\"kole-tabs-content\" data-panels>\n <div data-panel=\"t1\">订单标签页内容。</div>\n <div data-panel=\"t2\" hidden>退款标签页内容。</div>\n </div>\n </div>\n</div>","preview":{"show":[[0,3]],"hide":[[1],[0,0],[0,1],[0,2],[0,4],[0,3,0]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"demo-mapped","code":{"html":"<div class=\"kole-tabs type-card\" id=\"tabs-card\" data-tabs>\n <div class=\"kole-tabs-nav\" role=\"tablist\">\n <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\">\n 订单\n <span class=\"kole-tabs-close\">×</span>\n </div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">\n 退款\n <span class=\"kole-tabs-close\">×</span>\n </div>\n <div class=\"kole-tabs-add\" role=\"button\" aria-label=\"新增标签页\" tabindex=\"0\">+</div>\n </div>\n <div class=\"kole-tabs-content\">\n <div>订单标签页内容。</div>\n <div hidden>退款标签页内容。</div>\n </div>\n</div>","jsx":"import { KoleTabs } from 'kole-ui/react';\n\n<>\n<KoleTabs type=\"card\" addable id=\"tabs-card\">订单 × 退款 订单标签页内容。 退款标签页内容。</KoleTabs>\n</>","vue3":"import { KoleTabs } from 'kole-ui/vue3';\n\n<template>\n<KoleTabs type=\"card\" addable id=\"tabs-card\">订单 × 退款 订单标签页内容。 退款标签页内容。</KoleTabs>\n</template>","vue2":"import { KoleTabs } from 'kole-ui/vue2';\n\n<template>\n<KoleTabs type=\"card\" addable id=\"tabs-card\">订单 × 退款 订单标签页内容。 退款标签页内容。</KoleTabs>\n</template>"},"notes":[]},{"id":"tabs-ex-3","title":"胶囊型","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <div class=\"kole-tabs type-pill\" id=\"tabs-pill\" data-tabs>\n <div class=\"kole-tabs-nav\" role=\"tablist\">\n <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"all\">全部</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"todo\">待办</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"done\">已完成</div>\n </div>\n <div class=\"kole-tabs-content\" data-panels>\n <div data-panel=\"all\">全部任务。</div>\n <div data-panel=\"todo\" hidden>待办任务。</div>\n <div data-panel=\"done\" hidden>已完成任务。</div>\n </div>\n </div>\n</div>","preview":{"show":[[0,4]],"hide":[[1],[0,0],[0,1],[0,2],[0,3],[0,4,0]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<div class=\"kole-tabs type-pill\" id=\"tabs-pill\" data-tabs>\n <div class=\"kole-tabs-nav\" role=\"tablist\">\n <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\">全部</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">待办</div>\n <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">已完成</div>\n </div>\n <div class=\"kole-tabs-content\">\n <div>全部任务。</div>\n <div hidden>待办任务。</div>\n <div hidden>已完成任务。</div>\n </div>\n</div>","jsx":"import { KoleTabs } from 'kole-ui/react';\n\n<KoleTabs type=\"pill\" />","vue3":"<template>\n <KoleTabs type=\"pill\" />\n</template>\n\n<script setup>\nimport { KoleTabs } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleTabs type=\"pill\" />\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\nexport default { components: { KoleTabs } };\n</script>"},"notes":["演示页未含可映射的调用标记,本片段依据组件 API 表推导"]}]}