iter: d05 新增面包屑 breadcrumb 组件

packages/skin/ui/src/breadcrumb.ts

@@ -0,0 +1,20 @@
+import { h } from '@ui-arch/frame';
+import type { BreadcrumbProps } from './types.js';
+
+/*** 面包屑：nav + ol 语义结构，末项为当前页（不可点、aria-current）；有 href 渲染 <a>，无 href 渲染 button 交 onNavigate ***/
+export function breadcrumb(props: BreadcrumbProps): HTMLElement {
+  const items = props.items;
+  const sep = props.separator ?? '/';
+
+  const entries = items.map((item, i) => {
+    const last = i === items.length - 1; // 末项即当前页
+    const node = last
+      ? h('span', { class: 'ua-crumb-current', 'aria-current': 'page' }, item.label)
+      : item.href
+        ? h('a', { class: 'ua-crumb-link', href: item.href }, item.label)
+        : h('button', { type: 'button', class: 'ua-crumb-link', onClick: () => props.onNavigate?.(item, i) }, item.label);
+    return h('li', { class: 'ua-crumb-item' }, node, last ? null : h('span', { class: 'ua-crumb-sep', 'aria-hidden': 'true' }, sep));
+  });
+
+  return h('nav', { class: 'ua-breadcrumb', 'aria-label': '面包屑导航' }, h('ol', { class: 'ua-crumb-list' }, ...entries));
+}