From 12e3047f1ac7c9207440d3f70c840832e36e2007 Mon Sep 17 00:00:00 2001 From: stash Date: Thu, 29 Oct 2026 11:26:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(breadcrumb):=20=E6=94=AF=E6=8C=81=20onNavi?= =?UTF-8?q?gate=20=E6=8E=A5=E7=AE=A1=E7=82=B9=E5=87=BB=EF=BC=88SPA=20?= =?UTF-8?q?=E8=B7=AF=E7=94=B1=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 可选 prop，不传时保持普通链接 - 文档契约 + props 表 + 变更记录同步 --- docs/COMPONENTS.md | 5 +++-- site/sections/Breadcrumbs.tsx | 1 + src/components/Breadcrumb.tsx | 26 ++++++++++++++++++++++---- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md index ba3bf76..8a9bab1 100644 --- a/docs/COMPONENTS.md +++ b/docs/COMPONENTS.md @@ -410,8 +410,8 @@ ### 3.26 Breadcrumb ✅ - **用途**：详情页路径导航。 -- **Props**：`items: { label, href? }[]`、`separator`（默认 `/`）。 -- **规则**：最后一项忽略 `href`，并标 `aria-current="page"`。 +- **Props**：`items: { label, href? }[]`、`separator`（默认 `/`）、`onNavigate(href)`（接管点击，用于 SPA 路由；传了就阻止默认跳转）。 +- **规则**：最后一项忽略 `href`，并标 `aria-current="page"`；不传 `onNavigate` 时走普通链接（整页跳转）。 - **展示页**：`#breadcrumb` ### 3.27 Tabs ✅ @@ -666,3 +666,4 @@ | 2026-10-28 | **1:1 补全（视觉 + 交互）**：`Title` 增加 `weight`（600）；`Input` 增加 `size`（44）；`Button` 增加 `spinning`（图标原地旋转）；`Cover` 改为 hover 上浮 2px（`lift`，默认开；`hoverZoom` 默认关）；`ScrollTop` 增加 `offset`；`Menu` 的 hover 改主色、子菜单改 `grid-template-rows` 高度动画（0.28s）；`Avatar xl` 徽标 20px、无图底色用新令牌 `--su-avatar-gradient`。**影响面**：`Cover`/`Menu`/`Avatar`/`Title` 的所有展示页 demo 与应用页面需重截图 | | 2026-10-28 | **修复**：`Input` 聚焦不再叠 outline（文本框点击会命中 `:focus-visible`，导致边框 + 外环「双框」；现在只用边框变主色）。`Layout` 增加 `hideScrollbar`（内部滚动条可隐藏）。影响面：所有 `Input` 页面视觉（去掉了多余外环）、`Layout screen` 页面可选用 | | 2026-10-28 | **补齐剩余能力**：新增 `Image`（比例 / 填充 / 失败降级）与 `FormField`（标签 + 提示 + 错误，不做校验）；`Button` 增加 `size="lg"`（44）；展示页补 `Title weight`、`Avatar xl/tone/icon`、`Cover lift`、`Menu itemHeight`、`Layout screen/hideScrollbar`、`Input size`、`FormField` 示例；新增 `themes/example.css` 主题示例（只改变量） | +| 2026-10-29 | `Breadcrumb` 增加 `onNavigate`（可选）：传了就用 `preventDefault` 接管点击，交给 SPA 路由；不传保持普通链接。兼容性：新增可选 prop，无破坏性 | diff --git a/site/sections/Breadcrumbs.tsx b/site/sections/Breadcrumbs.tsx index 2d0672c..cddca36 100644 --- a/site/sections/Breadcrumbs.tsx +++ b/site/sections/Breadcrumbs.tsx @@ -51,6 +51,7 @@ export function Breadcrumbs() { rows={[ { name: 'items', type: 'BreadcrumbItem[]', required: true, desc: '{ label, href? }[]' }, { name: 'separator', type: 'ReactNode', defaultValue: "'/'", desc: '分隔符' }, + { name: 'onNavigate', type: '(href: string) => void', desc: '接管点击（SPA 路由），不传则整页跳转' }, ]} /> diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx index 9325887..051d056 100644 --- a/src/components/Breadcrumb.tsx +++ b/src/components/Breadcrumb.tsx @@ -1,7 +1,12 @@ import type { ReactNode } from 'react' import styles from './Breadcrumb.module.css' -/** 面包屑：详情页的路径导航，最后一项是当前页（不可点）。 */ +/** + * 面包屑：详情页的路径导航，最后一项是当前页（不可点）。 + * + * 传了 `onNavigate` 就接管中间项的点击（SPA 路由）， + * 不传时保持普通链接行为（整页跳转）。 + */ export type BreadcrumbItem = { label: ReactNode href?: string @@ -11,10 +16,12 @@ export type BreadcrumbProps = { items: BreadcrumbItem[] /** 分隔符，默认 `/` */ separator?: ReactNode + /** 点击中间项时回调（用于 SPA 路由）；传了就会阻止默认跳转 */ + onNavigate?: (href: string) => void className?: string } -export function Breadcrumb({ items, separator = '/', className }: BreadcrumbProps) { +export function Breadcrumb({ items, separator = '/', onNavigate, className }: BreadcrumbProps) { return (