AccessHistories 访问历史组件使用说明

概述

AccessHistories 是「最近访问」面包屑组件，通常放在侧边栏触发按钮旁边，展示用户最近访问过的管理菜单页面（最多 20 条）。点击胶囊跳转页面，点 × 移除单条，点垃圾桶一键清空。

• 位置：src/common/components/access-histories.tsx
• 技术栈：React（客户端组件）+ next-intl + shadcn/ui（Tooltip / Sidebar）

数据流

AccessLog（单条记录）
  └─ AccessHistoryContainer（存取/排序/删除/清空）
       └─ AdminBroker（业务代理 + 变更订阅）
            └─ AdminContext（React Context）
                 └─ AccessHistories（UI 消费）

快速开始

import {useMemo} from "react";
import AccessHistories from "@/common/components/access-histories";
import {AdminContext, AdminContextValue} from "@/common/lib/admin/AdminContextProvider";
import AdminBroker from "@/common/lib/admin/AdminBroker";
import AccessHistoryContainer from "@/common/lib/admin/AccessHistoryContainer";

// 1. 全量菜单表：url -> 标题
const MENU = new Map<string, string>([
    ["/dashboard", "仪表盘"],
    ["/users", "用户管理"],
]);

// 2. 构建 broker 与 Context（每个应用只建一次）
const {broker, contextValue} = useMemo(() => {
    const container = new AccessHistoryContainer(MENU);
    const b = new AdminBroker(container);
    return {broker: b, contextValue: AdminContextValue.create(b)};
}, []);

// 3. 用 Provider 包裹，渲染组件
<AdminContext.Provider value={contextValue}>
    <AccessHistories />
</AdminContext.Provider>

// 4. 页面跳转时记录访问（内部会触发订阅刷新）
broker.access("/users", router);

组件通过 AdminBroker.subscribe() 订阅变更，增删/清空后自动刷新，无需手动 setState。

Props

Prop	类型	必填	默认值	说明
showSidebarTrigger	boolean	否	true	是否渲染左侧 SidebarTrigger 与分隔线；独立使用时设为 false

AdminBroker API

方法	说明
access(url, router)	记录一次访问并 router.push(url)
deleteHistory(url)	移除单条历史
clearHistory()	清空全部历史
subscribe(listener)	订阅变更，返回取消订阅函数

AccessHistoryContainer API

方法	说明
getAccessHistories()	按访问时间倒序返回记录副本
access(url)	新增或更新时间戳（超过 20 条时移除最旧）
delete(url)	按 url 移除
clear()	清空

国际化

Key	中文	英文
label	访问历史	History
empty	暂无记录	No history
remove	移除	Remove
clear-all	清空全部	Clear all