AccessHistories Usage Guide

Overview

AccessHistories is a "recently visited" breadcrumb component, usually placed next to the sidebar trigger. It shows the admin pages the user recently visited (up to 20). Click a chip to navigate, the × to remove one entry, and the trash icon to clear all.

• Location: src/common/components/access-histories.tsx
• Stack: React (client) + next-intl + shadcn/ui (Tooltip / Sidebar)

Data Flow

AccessLog (single entry)
  └─ AccessHistoryContainer (store/sort/delete/clear)
       └─ AdminBroker (business proxy + change subscription)
            └─ AdminContext (React Context)
                 └─ AccessHistories (UI consumer)

Quick Start

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. Full menu map: url -> title
const MENU = new Map<string, string>([
    ["/dashboard", "Dashboard"],
    ["/users", "Users"],
]);

// 2. Build broker & context (once per app)
const {broker, contextValue} = useMemo(() => {
    const container = new AccessHistoryContainer(MENU);
    const b = new AdminBroker(container);
    return {broker: b, contextValue: AdminContextValue.create(b)};
}, []);

// 3. Wrap with Provider and render
<AdminContext.Provider value={contextValue}>
    <AccessHistories />
</AdminContext.Provider>

// 4. Record a visit on navigation (triggers auto refresh)
broker.access("/users", router);

The component subscribes via AdminBroker.subscribe(), so add/remove/clear auto-refresh — no manual setState needed.

Props

Prop	Type	Required	Default	Description
showSidebarTrigger	boolean	No	true	Render the leading SidebarTrigger + divider; set to false when used standalone

AdminBroker API

Method	Description
access(url, router)	Record a visit and router.push(url)
deleteHistory(url)	Remove one entry
clearHistory()	Clear all entries
subscribe(listener)	Subscribe to changes, returns an unsubscribe fn

AccessHistoryContainer API

Method	Description
getAccessHistories()	Return a copy sorted by visit time (desc)
access(url)	Add or refresh the timestamp (drops oldest past 20)
delete(url)	Remove by url
clear()	Clear all

i18n

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