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 未做部分）
162 lines
7.1 KiB
HTML
162 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Kole UI · MixedNavigation（混合导航，普通 H5）</title>
|
||
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
|
||
<link rel="stylesheet" href="MixedNavigation.css" />
|
||
<style>
|
||
body { margin: 0; padding: 16px; background: var(--kole-color-page-bg); }
|
||
p { font-size: 13px; color: var(--kole-color-text-secondary); margin: 0 0 8px; }
|
||
.demo-block { margin-bottom: 20px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!--
|
||
Kole UI Menu 族 · MixedNavigation
|
||
@generated by tools/gen-family-impl.mjs
|
||
生成物 — 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
|
||
族 nav-menu：本页是同一份 Menu 实现，参数 direction=mixed。
|
||
族参数取值：direction=mixed, level=2, collapsed=false
|
||
重跑生成：node tools/gen-family-impl.mjs nav-menu
|
||
-->
|
||
<p>默认态（选中：全部订单）</p>
|
||
<div class="demo-block">
|
||
<nav class="kole-menu" id="menu-default" role="navigation" aria-label="主菜单" data-behavior="layout-menu-rows"></nav>
|
||
</div>
|
||
|
||
<p>含徽章与禁用项</p>
|
||
<div class="demo-block">
|
||
<nav class="kole-menu" id="menu-badge" role="navigation" aria-label="带徽章的主菜单" data-behavior="layout-menu-rows"></nav>
|
||
</div>
|
||
|
||
<p>二级联动（一级切到「商品」）</p>
|
||
<div class="demo-block">
|
||
<nav class="kole-menu" id="menu-alt" role="navigation" aria-label="主菜单替代形态" data-behavior="layout-menu-rows"></nav>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
/* 族参数：本组件在 nav-menu 族中的取值（由生成器写入，勿手改） */
|
||
var FAMILY_DIRECTION = 'mixed';
|
||
var PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };
|
||
|
||
var ITEMS = [
|
||
{ key: 'home', label: '工作台', icon: '⊞' },
|
||
{ key: 'order', label: '订单', icon: '≡', badge: '3', children: [
|
||
{ key: 'order-all', label: '全部订单' },
|
||
{ key: 'order-ship', label: '待发货' },
|
||
{ key: 'order-refund', label: '退款' }
|
||
] },
|
||
{ key: 'goods', label: '商品', icon: '◇', children: [
|
||
{ key: 'goods-list', label: '商品列表' },
|
||
{ key: 'goods-cat', label: '分类管理' }
|
||
] },
|
||
{ key: 'data', label: '数据', icon: '▤' },
|
||
{ key: 'setting', label: '设置', icon: '⚙', disabled: true }
|
||
];
|
||
|
||
/* 单一实现对三种 direction 通用：
|
||
top -> 一级水平排布，children 走下拉面板
|
||
side -> 一级纵向排布，children 内联展开（collapsed 时走悬浮浮层）
|
||
mixed -> 一级在顶部，二级为当前一级的 children，纵向排在侧栏 */
|
||
function createMenu(root, params, initial) {
|
||
var state = {
|
||
active: (initial && initial.active) || '',
|
||
open: (initial && initial.open) || '',
|
||
collapsed: params.collapsed === true || params.collapsed === 'true',
|
||
hoverKey: ''
|
||
};
|
||
|
||
function isTopActive(it) {
|
||
if (it.key === state.active) return true;
|
||
return (it.children || []).some(function (c) { return c.key === state.active; });
|
||
}
|
||
|
||
function itemHtml(it, level) {
|
||
var active = it.key === state.active ? ' is-active' : '';
|
||
var disabled = it.disabled ? ' is-disabled' : '';
|
||
var hasKids = !!(it.children && it.children.length);
|
||
var open = hasKids && it.key === state.open ? ' is-open' : '';
|
||
var kids = hasKids && params.direction !== 'mixed'
|
||
? '<div class="kole-menu-children">' + it.children.map(function (c) { return itemHtml(c, level + 1); }).join('') + '</div>'
|
||
: '';
|
||
var icon = it.icon ? '<span class="kole-menu-icon">' + it.icon + '</span>' : '';
|
||
var badge = it.badge ? '<span class="kole-menu-badge">' + it.badge + '</span>' : '';
|
||
var arrow = hasKids && params.direction !== 'top'
|
||
? '<span class="kole-menu-arrow">›</span>'
|
||
: '';
|
||
return '<div class="kole-menu-item' + active + disabled + open + '"' +
|
||
' role="menuitem" tabindex="0" data-key="' + it.key + '"' +
|
||
(hasKids ? ' aria-expanded="' + (it.key === state.open ? 'true' : 'false') + '"' : '') +
|
||
'>' + icon + '<span class="kole-menu-label">' + it.label + '</span>' + badge + arrow + kids + '</div>';
|
||
}
|
||
|
||
function popHtml() {
|
||
if (params.direction !== 'side' || !state.collapsed || !state.hoverKey) return '';
|
||
var it = ITEMS.filter(function (x) { return x.key === state.hoverKey; })[0];
|
||
if (!it || !it.children) return '';
|
||
return '<div class="kole-menu-pop">' +
|
||
'<div class="kole-menu-pop-title">' + it.label + '</div>' +
|
||
it.children.map(function (c) { return itemHtml(c, 1); }).join('') +
|
||
'</div>';
|
||
}
|
||
|
||
function bodyHtml() {
|
||
if (params.direction !== 'mixed') {
|
||
return ITEMS.map(function (it) { return itemHtml(it, 0); }).join('');
|
||
}
|
||
var current = ITEMS.filter(function (x) { return isTopActive(x); })[0] || ITEMS[0];
|
||
var side = (current.children || []).map(function (c) { return itemHtml(c, 1); }).join('');
|
||
return '<div class="kole-menu-top">' +
|
||
ITEMS.map(function (it) { return itemHtml(it, 0); }).join('') +
|
||
'</div>' +
|
||
'<div class="kole-menu-side">' + side + '</div>';
|
||
}
|
||
|
||
function render() {
|
||
root.setAttribute('data-direction', params.direction);
|
||
if (params.direction === 'side') {
|
||
root.setAttribute('data-collapsed', state.collapsed ? 'true' : 'false');
|
||
}
|
||
root.innerHTML = bodyHtml() + popHtml();
|
||
Array.prototype.forEach.call(root.querySelectorAll('[data-key]'), function (el) {
|
||
el.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
var key = el.getAttribute('data-key');
|
||
var isParent = ITEMS.some(function (it) { return it.key === key && it.children; });
|
||
if (isParent) {
|
||
state.open = state.open === key ? '' : key;
|
||
if (params.direction === 'mixed') state.active = key;
|
||
} else {
|
||
state.active = key;
|
||
}
|
||
render();
|
||
});
|
||
el.addEventListener('mouseenter', function () {
|
||
state.hoverKey = el.getAttribute('data-key');
|
||
if (params.direction === 'side' && state.collapsed) render();
|
||
});
|
||
el.addEventListener('mouseleave', function () {
|
||
if (params.direction === 'side' && state.collapsed) { state.hoverKey = ''; render(); }
|
||
});
|
||
});
|
||
}
|
||
|
||
render();
|
||
return { render: render, state: state };
|
||
}
|
||
|
||
var defaults = PARAMS;
|
||
createMenu(document.getElementById('menu-default'), defaults, { active: 'order-all', open: '' });
|
||
createMenu(document.getElementById('menu-badge'), defaults, { active: 'goods-list', open: 'goods' });
|
||
|
||
/* 第三个用例展示本 direction 的差异能力 */
|
||
var altParams = Object.assign({}, PARAMS, { });
|
||
createMenu(document.getElementById('menu-alt'), altParams, { active: 'goods-list', open: '' });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|