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));
+}

packages/skin/ui/src/index.ts

@@ -8,6 +8,7 @@ export { select } from './select.js';
 export { menu } from './menu.js';
 export { radioGroup } from './radioGroup.js';
 export { accordion } from './accordion.js';
+export { breadcrumb } from './breadcrumb.js';
 export { card } from './card.js';
 export { badge } from './badge.js';
 export { alert } from './alert.js';

packages/skin/ui/src/types.ts

@@ -98,6 +98,19 @@ export interface MenuProps {
   onSelect?: (value: string) => void; // 选中回调（禁用项不触发）
 }
 
+/*** 面包屑条目 ***/
+export interface BreadcrumbItem {
+  label: string; // 条目文案
+  href?: string; // 跳转地址；缺省时渲染 button 交给 onNavigate
+}
+
+/*** 面包屑入参 ***/
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[]; // 路径条目，末项视为当前页（不可点）
+  separator?: string;      // 分隔符；缺省 '/'
+  onNavigate?: (item: BreadcrumbItem, index: number) => void; // 无 href 条目的点击回调
+}
+
 /*** 折叠面板条目 ***/
 export interface AccordionItem {
   value: string;      // 面板标识（回调与展开集合用）