✨ refactor(web/default): adopt drill-in sidebar pattern for System Settings
Replace the ad-hoc "workspace" abstraction with a focused, URL-driven
"sidebar view" registry that implements the modern Vercel / Cloudflare
drill-in pattern: clicking a top-level entry (e.g. System Settings)
swaps the sidebar to a contextual workspace, with a `← Back to
Dashboard` affordance, instead of stacking sub-navigation in the root.
Architecture
------------
- types.ts
+ SidebarView — declarative nested view config
(id, pathPattern, parent, getNavGroups)
+ SidebarViewParent — back-navigation descriptor
+ ResolvedSidebarView — { key, view, navGroups } returned by hook
+ SidebarData — slimmed to { navGroups } only
- Workspace — removed (logo/plan never rendered)
- lib/sidebar-view-registry.ts (new, replaces workspace-registry.ts)
+ SIDEBAR_VIEWS array — single source of truth for nested views
+ resolveSidebarView(pathname)
+ getNavGroupsForPath(pathname, t) — back-compat helper for the
command palette
- config/system-settings.config.ts
Refactored to export a single SYSTEM_SETTINGS_VIEW (SidebarView)
with parent `/dashboard/overview` + label `Back to Dashboard`.
- components/sidebar-view-header.tsx (new)
Renders only the back affordance (chevron + label). Uses the
default SidebarMenuButton size so its typography matches the
nav items below; collapses gracefully into icon mode via the
existing tooltip behavior. The redundant "title + icon" row was
removed — workspace context is already carried by the nav groups.
- hooks/use-sidebar-view.ts (new)
Encapsulates view resolution and root-nav filtering:
· matched view → returns its nav groups verbatim (route-level
beforeLoad guards already enforce access);
· no match → returns root nav groups, narrowed by user
role (admin gate) and useSidebarConfig
(admin × user sidebar_modules overlay).
- components/app-sidebar.tsx
Now a thin presentation layer: reads { key, view, navGroups }
from useSidebarView() and orchestrates the view transition via
AnimatePresence + MOTION_VARIANTS.sidebarSlide (respects
prefers-reduced-motion). No logic, no role checks, no path
matching — those live in the hook.
- components/command-menu.tsx
Switched to the new getNavGroupsForPath() API; behavior preserved.
Cleanup
-------
- Deleted layout/context/workspace-context.tsx (zero consumers).
- Deleted layout/lib/workspace-registry.ts and its
workspace-registry.example.ts companion (over-abstracted: name/id
metadata, isInWorkspace / getAllWorkspaces / WORKSPACE_IDS were
registered but never read).
- Removed `workspaces` field from useSidebarData (never consumed
after the top-switcher was dropped).
- Dropped WorkspaceProvider from authenticated-layout.tsx.
- Trimmed dead `Manage and configure` translation key from all six
locale files and from static-keys.ts.
i18n
----
Added the `Back to Dashboard` key to en, zh, fr, ja, ru, vi, and
registered it in static-keys.ts under "Sidebar views".
Verification
------------
- bun run typecheck: passes
- Lint: no new warnings/errors on the touched files
- Adding a new drill-in workspace now only requires registering a
SidebarView in SIDEBAR_VIEWS — no changes to AppSidebar required.
This commit is contained in:
t0ng7u
+4
-3
@@ -33,7 +33,7 @@ import {
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
} from '@/components/ui/command'
|
||||
import { getNavGroupsForPath } from './layout/lib/workspace-registry'
|
||||
import { getNavGroupsForPath } from './layout/lib/sidebar-view-registry'
|
||||
import { ScrollArea } from './ui/scroll-area'
|
||||
|
||||
export function CommandMenu() {
|
||||
@@ -44,8 +44,9 @@ export function CommandMenu() {
|
||||
const { pathname } = useLocation()
|
||||
const sidebarData = useSidebarData()
|
||||
|
||||
// 根据当前路径从工作区注册表获取对应的侧边栏配置
|
||||
const navGroups = getNavGroupsForPath(pathname, t) || sidebarData.navGroups
|
||||
// Use the active nested sidebar view's nav groups when one matches
|
||||
// the current URL; otherwise fall back to the root navigation.
|
||||
const navGroups = getNavGroupsForPath(pathname, t) ?? sidebarData.navGroups
|
||||
|
||||
const runCommand = React.useCallback(
|
||||
(command: () => unknown) => {
|
||||
|
||||
@@ -107,10 +107,7 @@ export function DataTableFacetedFilter<TData, TValue>({
|
||||
</>
|
||||
)}
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className='min-w-[200px] max-w-[360px] p-0'
|
||||
align='start'
|
||||
>
|
||||
<PopoverContent className='max-w-[360px] min-w-[200px] p-0' align='start'>
|
||||
<Command>
|
||||
<CommandInput placeholder={title} />
|
||||
<CommandList>
|
||||
|
||||
+39
-39
@@ -16,59 +16,59 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useMemo } from 'react'
|
||||
import { useLocation } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useAuthStore } from '@/stores/auth-store'
|
||||
import { ROLE } from '@/lib/roles'
|
||||
import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
|
||||
import { MOTION_TRANSITION, MOTION_VARIANTS } from '@/lib/motion'
|
||||
import { useLayout } from '@/context/layout-provider'
|
||||
import { useSidebarConfig } from '@/hooks/use-sidebar-config'
|
||||
import { useSidebarData } from '@/hooks/use-sidebar-data'
|
||||
import { useSidebarView } from '@/hooks/use-sidebar-view'
|
||||
import { Sidebar, SidebarContent, SidebarRail } from '@/components/ui/sidebar'
|
||||
import { getNavGroupsForPath } from '../lib/workspace-registry'
|
||||
import { NavGroup } from './nav-group'
|
||||
import { SidebarViewHeader } from './sidebar-view-header'
|
||||
|
||||
/**
|
||||
* Application sidebar component
|
||||
* Fetches corresponding navigation menu from workspace registry based on current path
|
||||
* Dynamically filters navigation items based on backend SidebarModulesAdmin configuration
|
||||
* Application sidebar.
|
||||
*
|
||||
* Automatically matches workspace configuration for current path through workspace registry system
|
||||
* Adding new workspaces only requires registration in workspace-registry.ts
|
||||
* Adopts the Vercel / Cloudflare "drill-in" pattern: the URL drives
|
||||
* which sidebar *view* is rendered. Clicking a top-level entry like
|
||||
* `System Settings` swaps the sidebar to a contextual workspace —
|
||||
* with a `← Back to Dashboard` affordance — instead of stacking the
|
||||
* sub-navigation inside the root tree.
|
||||
*
|
||||
* Architecture:
|
||||
* - View resolution + filtering: {@link useSidebarView}
|
||||
* - View registry: `layout/lib/sidebar-view-registry.ts`
|
||||
* - Per-view header: {@link SidebarViewHeader}
|
||||
*
|
||||
* Adding a new nested view only requires registering a {@link SidebarView}
|
||||
* in the registry; this component requires no changes.
|
||||
*/
|
||||
export function AppSidebar() {
|
||||
const { t } = useTranslation()
|
||||
const { collapsible, variant } = useLayout()
|
||||
const { pathname } = useLocation()
|
||||
const userRole = useAuthStore((state) => state.auth.user?.role)
|
||||
const sidebarData = useSidebarData()
|
||||
|
||||
// Get navigation group configuration corresponding to current path from workspace registry
|
||||
const allNavGroups = getNavGroupsForPath(pathname, t) || sidebarData.navGroups
|
||||
|
||||
// Filter sidebar navigation items based on backend configuration
|
||||
const configFilteredNavGroups = useSidebarConfig(allNavGroups)
|
||||
|
||||
// Filter navigation groups based on user role
|
||||
// Non-Admin users cannot see Admin navigation group
|
||||
const currentNavGroups = useMemo(() => {
|
||||
const isAdmin = userRole && userRole >= ROLE.ADMIN
|
||||
return configFilteredNavGroups.filter((group) => {
|
||||
if (group.id === 'admin') {
|
||||
return isAdmin
|
||||
}
|
||||
return true
|
||||
})
|
||||
}, [configFilteredNavGroups, userRole])
|
||||
const { key, view, navGroups } = useSidebarView()
|
||||
const shouldReduce = useReducedMotion()
|
||||
|
||||
return (
|
||||
<Sidebar collapsible={collapsible} variant={variant}>
|
||||
{view && <SidebarViewHeader view={view} />}
|
||||
|
||||
<SidebarContent className='py-2'>
|
||||
{currentNavGroups.map((props) => {
|
||||
const key = props.id || props.title
|
||||
return <NavGroup key={key} {...props} />
|
||||
})}
|
||||
<AnimatePresence mode='wait' initial={false}>
|
||||
<motion.div
|
||||
key={key}
|
||||
initial={
|
||||
shouldReduce ? false : MOTION_VARIANTS.sidebarSlide.initial
|
||||
}
|
||||
animate={MOTION_VARIANTS.sidebarSlide.animate}
|
||||
exit={shouldReduce ? undefined : MOTION_VARIANTS.sidebarSlide.exit}
|
||||
transition={MOTION_TRANSITION.fast}
|
||||
className='flex flex-col'
|
||||
>
|
||||
{navGroups.map((props) => (
|
||||
<NavGroup key={props.id || props.title} {...props} />
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
)
|
||||
|
||||
@@ -23,7 +23,6 @@ import { SearchProvider } from '@/context/search-provider'
|
||||
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
|
||||
import { AnimatedOutlet } from '@/components/page-transition'
|
||||
import { SkipToMain } from '@/components/skip-to-main'
|
||||
import { WorkspaceProvider } from '../context/workspace-context'
|
||||
import { AppHeader } from './app-header'
|
||||
import { AppSidebar } from './app-sidebar'
|
||||
|
||||
@@ -37,24 +36,22 @@ export function AuthenticatedLayout(props: AuthenticatedLayoutProps) {
|
||||
return (
|
||||
<LayoutProvider>
|
||||
<SearchProvider>
|
||||
<WorkspaceProvider>
|
||||
<SidebarProvider defaultOpen={defaultOpen} className='flex-col'>
|
||||
<SkipToMain />
|
||||
<AppHeader />
|
||||
<div className='flex min-h-0 w-full flex-1'>
|
||||
<AppSidebar />
|
||||
<SidebarInset
|
||||
className={cn(
|
||||
'@container/content',
|
||||
'h-[calc(100svh-var(--app-header-height,0px))]',
|
||||
'peer-data-[variant=inset]:h-[calc(100svh-var(--app-header-height,0px)-(var(--spacing)*4))]'
|
||||
)}
|
||||
>
|
||||
{props.children ?? <AnimatedOutlet />}
|
||||
</SidebarInset>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
</WorkspaceProvider>
|
||||
<SidebarProvider defaultOpen={defaultOpen} className='flex-col'>
|
||||
<SkipToMain />
|
||||
<AppHeader />
|
||||
<div className='flex min-h-0 w-full flex-1'>
|
||||
<AppSidebar />
|
||||
<SidebarInset
|
||||
className={cn(
|
||||
'@container/content',
|
||||
'h-[calc(100svh-var(--app-header-height,0px))]',
|
||||
'peer-data-[variant=inset]:h-[calc(100svh-var(--app-header-height,0px)-(var(--spacing)*4))]'
|
||||
)}
|
||||
>
|
||||
{props.children ?? <AnimatedOutlet />}
|
||||
</SidebarInset>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
</SearchProvider>
|
||||
</LayoutProvider>
|
||||
)
|
||||
|
||||
+2
-2
@@ -20,8 +20,8 @@ import { Fragment, useMemo } from 'react'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useSystemConfig } from '@/hooks/use-system-config'
|
||||
import { useStatus } from '@/hooks/use-status'
|
||||
import { useSystemConfig } from '@/hooks/use-system-config'
|
||||
|
||||
interface FooterLink {
|
||||
text: string
|
||||
@@ -235,7 +235,7 @@ export function Footer(props: FooterProps) {
|
||||
className='custom-footer text-muted-foreground min-w-0 text-center text-sm sm:text-left'
|
||||
dangerouslySetInnerHTML={{ __html: footerHtml }}
|
||||
/>
|
||||
<div className='border-border/60 flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t pt-4 text-muted-foreground/45 text-xs sm:w-auto sm:justify-end sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
|
||||
<div className='border-border/60 text-muted-foreground/45 flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 border-t pt-4 text-xs sm:w-auto sm:justify-end sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5'>
|
||||
<LegalLinks />
|
||||
<ProjectAttribution currentYear={currentYear} inline />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
Copyright (C) 2023-2026 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { ChevronLeft } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { cn } from '@/lib/utils'
|
||||
import {
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from '@/components/ui/sidebar'
|
||||
import type { SidebarView } from '../types'
|
||||
|
||||
type SidebarViewHeaderProps = {
|
||||
view: SidebarView
|
||||
}
|
||||
|
||||
/**
|
||||
* Header for a nested sidebar view (Vercel / Cloudflare drill-in pattern).
|
||||
*
|
||||
* Renders only the back affordance — workspace context is conveyed by
|
||||
* the nav groups below, not a redundant title row.
|
||||
*/
|
||||
export function SidebarViewHeader(props: SidebarViewHeaderProps) {
|
||||
const { t } = useTranslation()
|
||||
const { setOpenMobile } = useSidebar()
|
||||
|
||||
return (
|
||||
<SidebarHeader className='border-sidebar-border border-b px-2 py-2'>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
tooltip={t(props.view.parent.label)}
|
||||
className={cn(
|
||||
'text-muted-foreground hover:text-foreground',
|
||||
'gap-1.5 font-medium'
|
||||
)}
|
||||
render={
|
||||
<Link
|
||||
to={props.view.parent.to}
|
||||
onClick={() => setOpenMobile(false)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ChevronLeft className='size-4 shrink-0' />
|
||||
<span className='truncate'>{t(props.view.parent.label)}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
)
|
||||
}
|
||||
@@ -33,15 +33,16 @@ import { getModelsSectionNavItems } from '@/features/system-settings/models/sect
|
||||
import { getOperationsSectionNavItems } from '@/features/system-settings/operations/section-registry.tsx'
|
||||
import { getSecuritySectionNavItems } from '@/features/system-settings/security/section-registry.tsx'
|
||||
import { getSiteSectionNavItems } from '@/features/system-settings/site/section-registry.tsx'
|
||||
import { type NavGroup } from '../types'
|
||||
import type { NavGroup, SidebarView } from '../types'
|
||||
|
||||
/**
|
||||
* System settings sidebar configuration
|
||||
* Displayed when switching to "System Settings" workspace
|
||||
* Sidebar nav groups for the System Settings nested view.
|
||||
*
|
||||
* Kept as a single group because the workspace title in the sidebar
|
||||
* header already provides top-level context — the inner group label
|
||||
* scopes the items as "administration" actions.
|
||||
*/
|
||||
export const WORKSPACE_SYSTEM_SETTINGS_ID = 'system-settings'
|
||||
|
||||
export function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
|
||||
function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
|
||||
return [
|
||||
{
|
||||
id: 'system-administration',
|
||||
@@ -86,3 +87,20 @@ export function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* Nested sidebar view for `/system-settings/*`.
|
||||
*
|
||||
* Activates the Vercel / Cloudflare-style drill-in sidebar:
|
||||
* the root navigation is replaced by the system administration
|
||||
* groups, with a "Back to Dashboard" affordance in the header.
|
||||
*/
|
||||
export const SYSTEM_SETTINGS_VIEW: SidebarView = {
|
||||
id: 'system-settings',
|
||||
pathPattern: /^\/system-settings(\/|$)/,
|
||||
parent: {
|
||||
to: '/dashboard/overview',
|
||||
label: 'Back to Dashboard',
|
||||
},
|
||||
getNavGroups: getSystemSettingsNavGroups,
|
||||
}
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
/*
|
||||
Copyright (C) 2023-2026 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import * as React from 'react'
|
||||
import { type Workspace } from '../types'
|
||||
|
||||
type WorkspaceContextType = {
|
||||
activeWorkspace: Workspace | null
|
||||
setActiveWorkspace: (workspace: Workspace) => void
|
||||
}
|
||||
|
||||
const WorkspaceContext = React.createContext<WorkspaceContextType | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
/**
|
||||
* 工作区上下文 Provider
|
||||
* 管理当前激活的工作区状态，用于切换不同的侧边栏视图
|
||||
*/
|
||||
export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
|
||||
const [activeWorkspace, setActiveWorkspace] =
|
||||
React.useState<Workspace | null>(null)
|
||||
|
||||
const value = React.useMemo(
|
||||
() => ({ activeWorkspace, setActiveWorkspace }),
|
||||
[activeWorkspace]
|
||||
)
|
||||
|
||||
return (
|
||||
<WorkspaceContext.Provider value={value}>
|
||||
{children}
|
||||
</WorkspaceContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用工作区上下文的 Hook
|
||||
* @throws 如果在 WorkspaceProvider 外部使用会抛出错误
|
||||
*/
|
||||
export function useWorkspace() {
|
||||
const context = React.useContext(WorkspaceContext)
|
||||
if (!context) {
|
||||
throw new Error('useWorkspace must be used within WorkspaceProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
+15
-22
@@ -17,10 +17,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
/**
|
||||
* Layout 组件统一导出
|
||||
* Public surface of the Layout module.
|
||||
*/
|
||||
|
||||
// 核心组件
|
||||
// Core components
|
||||
export { AppHeader } from './components/app-header'
|
||||
export { AppSidebar } from './components/app-sidebar'
|
||||
export { AuthenticatedLayout } from './components/authenticated-layout'
|
||||
@@ -34,41 +34,34 @@ export { Main } from './components/main'
|
||||
export { PageFooterPortal } from './components/page-footer'
|
||||
export { NavGroup } from './components/nav-group'
|
||||
export { SectionPageLayout } from './components/section-page-layout'
|
||||
export { SidebarViewHeader } from './components/sidebar-view-header'
|
||||
export { SystemBrand } from './components/system-brand'
|
||||
export { TopNav } from './components/top-nav'
|
||||
export { MobileDrawer } from './components/mobile-drawer'
|
||||
|
||||
// 上下文
|
||||
export { WorkspaceProvider, useWorkspace } from './context/workspace-context'
|
||||
|
||||
// 配置
|
||||
export {
|
||||
getSystemSettingsNavGroups,
|
||||
WORKSPACE_SYSTEM_SETTINGS_ID,
|
||||
} from './config/system-settings.config'
|
||||
// Configuration
|
||||
export { SYSTEM_SETTINGS_VIEW } from './config/system-settings.config'
|
||||
export { defaultTopNavLinks } from './config/top-nav.config'
|
||||
|
||||
// 常量
|
||||
// Constants
|
||||
export { MOBILE_DRAWER_ANIMATION, MOBILE_DRAWER_CONFIG } from './constants'
|
||||
|
||||
// 工具函数 - 工作区注册表
|
||||
// Sidebar view registry
|
||||
export {
|
||||
getWorkspaceByPath,
|
||||
getNavGroupsForPath,
|
||||
isInWorkspace,
|
||||
getAllWorkspaces,
|
||||
WORKSPACE_IDS,
|
||||
} from './lib/workspace-registry'
|
||||
resolveSidebarView,
|
||||
} from './lib/sidebar-view-registry'
|
||||
|
||||
// 类型导出（使用 type-only 导出避免与组件冲突）
|
||||
// Type exports (type-only to avoid conflicts with components above)
|
||||
export type {
|
||||
Workspace,
|
||||
NavLink,
|
||||
NavCollapsible,
|
||||
NavItem,
|
||||
NavGroup as NavGroupType,
|
||||
NavItem,
|
||||
NavLink,
|
||||
ResolvedSidebarView,
|
||||
SidebarData,
|
||||
SidebarView,
|
||||
SidebarViewParent,
|
||||
TopNavLink,
|
||||
} from './types'
|
||||
export type { WorkspaceConfig, WorkspaceId } from './lib/workspace-registry'
|
||||
export type { SectionPageLayoutProps } from './components/section-page-layout'
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
Copyright (C) 2023-2026 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { type TFunction } from 'i18next'
|
||||
import { SYSTEM_SETTINGS_VIEW } from '../config/system-settings.config'
|
||||
import type { NavGroup, SidebarView } from '../types'
|
||||
|
||||
/**
|
||||
* Registered nested sidebar views.
|
||||
*
|
||||
* Each entry describes a contextual sidebar that replaces the root
|
||||
* navigation when the user enters that workspace (Vercel-style
|
||||
* "drill-in" pattern). Add new entries here to register a new view.
|
||||
*
|
||||
* Match priority is array order; the first matching `pathPattern` wins.
|
||||
*/
|
||||
const SIDEBAR_VIEWS: readonly SidebarView[] = [SYSTEM_SETTINGS_VIEW]
|
||||
|
||||
/**
|
||||
* Resolve the active nested view for the given path.
|
||||
*
|
||||
* @returns Matching {@link SidebarView}, or `null` when the root
|
||||
* navigation should be displayed.
|
||||
*/
|
||||
export function resolveSidebarView(pathname: string): SidebarView | null {
|
||||
return SIDEBAR_VIEWS.find((view) => view.pathPattern.test(pathname)) ?? null
|
||||
}
|
||||
|
||||
/**
|
||||
* Backwards-compatible helper for consumers (e.g. command palette) that
|
||||
* just need the navigation groups for the current path, without caring
|
||||
* about the view metadata.
|
||||
*
|
||||
* @returns Nav groups for the matched view, or `null` if no nested view
|
||||
* matches (callers should then fall back to root nav groups).
|
||||
*/
|
||||
export function getNavGroupsForPath(
|
||||
pathname: string,
|
||||
t: TFunction
|
||||
): NavGroup[] | null {
|
||||
const view = resolveSidebarView(pathname)
|
||||
return view ? view.getNavGroups(t) : null
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
/*
|
||||
Copyright (C) 2023-2026 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
/**
|
||||
* 工作区注册表使用示例
|
||||
*
|
||||
* 本文件展示如何添加新工作区，仅作示例参考，不会被编译
|
||||
*/
|
||||
|
||||
/**
|
||||
* 步骤1: 创建工作区的侧边栏配置文件
|
||||
* 例如：web/src/components/layout/config/user-management.config.ts
|
||||
*/
|
||||
/*
|
||||
import { Users, UserPlus, Shield } from 'lucide-react'
|
||||
import { type NavGroup } from '../types'
|
||||
|
||||
export const userManagementConfig: NavGroup[] = [
|
||||
{
|
||||
title: 'User Management',
|
||||
items: [
|
||||
{
|
||||
title: 'All Users',
|
||||
url: '/user-management/list',
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: 'Create User',
|
||||
url: '/user-management/create',
|
||||
icon: UserPlus,
|
||||
},
|
||||
{
|
||||
title: 'Permissions',
|
||||
url: '/user-management/permissions',
|
||||
icon: Shield,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
*/
|
||||
|
||||
/**
|
||||
* 步骤2: 在 workspace-registry.ts 中注册新工作区
|
||||
* 在 workspaceRegistry 数组中添加配置（在默认工作区之前）
|
||||
*/
|
||||
/*
|
||||
import { userManagementConfig } from '../config/user-management.config'
|
||||
|
||||
const workspaceRegistry: WorkspaceConfig[] = [
|
||||
// System Settings 工作区
|
||||
{
|
||||
name: 'System Settings',
|
||||
pathPattern: /^\/system-settings/,
|
||||
navGroups: systemSettingsConfig,
|
||||
},
|
||||
// 新增的 User Management 工作区
|
||||
{
|
||||
name: 'User Management',
|
||||
pathPattern: /^\/user-management/, // 或使用字符串: '/user-management'
|
||||
navGroups: userManagementConfig,
|
||||
},
|
||||
// 默认工作区（必须放在最后）
|
||||
{
|
||||
name: 'Default',
|
||||
pathPattern: /.* /,
|
||||
navGroups: sidebarConfig.navGroups,
|
||||
},
|
||||
]
|
||||
*/
|
||||
|
||||
/**
|
||||
* 步骤3: （可选）在 sidebar.config.ts 中添加工作区到切换器
|
||||
*/
|
||||
/*
|
||||
export const sidebarConfig: SidebarData = {
|
||||
workspaces: [
|
||||
{
|
||||
name: '',
|
||||
logo: Command,
|
||||
plan: '',
|
||||
},
|
||||
{
|
||||
name: 'User Management',
|
||||
logo: Users,
|
||||
plan: 'Manage users',
|
||||
},
|
||||
{
|
||||
name: 'System Settings',
|
||||
logo: Settings,
|
||||
plan: 'Manage and configure',
|
||||
},
|
||||
],
|
||||
navGroups: [...],
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* 同语注：这里就完成了，现在：
|
||||
* - 侧边栏会根据当前路径自动切换显示对应的工作区菜单
|
||||
* - 搜索功能会自动显示当前工作区的菜单项
|
||||
* - 工作区切换器会显示新的工作区选项
|
||||
*
|
||||
* 无需修改任何其他文件！
|
||||
*/
|
||||
@@ -1,128 +0,0 @@
|
||||
/*
|
||||
Copyright (C) 2023-2026 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { type TFunction } from 'i18next'
|
||||
import {
|
||||
getSystemSettingsNavGroups,
|
||||
WORKSPACE_SYSTEM_SETTINGS_ID,
|
||||
} from '../config/system-settings.config'
|
||||
import type { NavGroup } from '../types'
|
||||
|
||||
export const WORKSPACE_IDS = {
|
||||
SYSTEM_SETTINGS: WORKSPACE_SYSTEM_SETTINGS_ID,
|
||||
DEFAULT: 'default',
|
||||
} as const
|
||||
|
||||
export type WorkspaceId = (typeof WORKSPACE_IDS)[keyof typeof WORKSPACE_IDS]
|
||||
|
||||
/**
|
||||
* Workspace configuration type
|
||||
* Each workspace contains name, path matching rules, and corresponding navigation group configuration
|
||||
*/
|
||||
export type WorkspaceConfig = {
|
||||
/** Workspace identifier (for logic) */
|
||||
id: WorkspaceId
|
||||
/** Workspace name */
|
||||
name: string
|
||||
/** Path matching rule, supports string (contains match) or regular expression */
|
||||
pathPattern: string | RegExp
|
||||
/** Sidebar navigation group configuration for this workspace */
|
||||
getNavGroups?: (t: TFunction) => NavGroup[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Workspace registry
|
||||
*
|
||||
* Sorted by priority, first matched workspace will be used
|
||||
* Last one should be default workspace (matches all paths)
|
||||
*
|
||||
* @example
|
||||
* // Add new workspace
|
||||
* {
|
||||
* name: 'User Management',
|
||||
* pathPattern: /^\/user-management/,
|
||||
* navGroups: userManagementConfig
|
||||
* }
|
||||
*/
|
||||
const workspaceRegistry: WorkspaceConfig[] = [
|
||||
// System Settings workspace
|
||||
{
|
||||
id: WORKSPACE_IDS.SYSTEM_SETTINGS,
|
||||
name: 'System Settings',
|
||||
pathPattern: /^\/system-settings/,
|
||||
getNavGroups: getSystemSettingsNavGroups,
|
||||
},
|
||||
// Default workspace (must be last)
|
||||
{
|
||||
id: WORKSPACE_IDS.DEFAULT,
|
||||
name: 'Default',
|
||||
pathPattern: /.*/,
|
||||
// getNavGroups is undefined, will be handled by consumers (e.g. useSidebarData)
|
||||
},
|
||||
]
|
||||
|
||||
/**
|
||||
* Get matched workspace configuration based on path
|
||||
* @param pathname - Current route path
|
||||
* @returns Matched workspace configuration
|
||||
*/
|
||||
export function getWorkspaceByPath(pathname: string): WorkspaceConfig {
|
||||
const workspace = workspaceRegistry.find((ws) => {
|
||||
if (typeof ws.pathPattern === 'string') {
|
||||
return pathname.includes(ws.pathPattern)
|
||||
}
|
||||
return ws.pathPattern.test(pathname)
|
||||
})
|
||||
|
||||
// If no match, return default workspace (last one)
|
||||
return workspace || workspaceRegistry[workspaceRegistry.length - 1]
|
||||
}
|
||||
|
||||
/**
|
||||
* Get corresponding sidebar navigation group configuration based on path
|
||||
* @param pathname - Current route path
|
||||
* @returns Navigation group configuration for corresponding workspace
|
||||
*/
|
||||
export function getNavGroupsForPath(
|
||||
pathname: string,
|
||||
t: TFunction
|
||||
): NavGroup[] | undefined {
|
||||
const workspace = getWorkspaceByPath(pathname)
|
||||
return workspace.getNavGroups?.(t)
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if in specified workspace
|
||||
* @param pathname - Current route path
|
||||
* @param workspaceId - Workspace identifier
|
||||
* @returns Whether in specified workspace
|
||||
*/
|
||||
export function isInWorkspace(
|
||||
pathname: string,
|
||||
workspaceId: WorkspaceId
|
||||
): boolean {
|
||||
return getWorkspaceByPath(pathname).id === workspaceId
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all registered workspace configurations
|
||||
* @returns Array of workspace configurations
|
||||
*/
|
||||
export function getAllWorkspaces(): WorkspaceConfig[] {
|
||||
return workspaceRegistry
|
||||
}
|
||||
+47
-13
@@ -17,17 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { type LinkProps } from '@tanstack/react-router'
|
||||
|
||||
/**
|
||||
* Workspace type
|
||||
* Used for top switcher to display different workspaces
|
||||
*/
|
||||
export type Workspace = {
|
||||
id: string
|
||||
name: string
|
||||
logo: React.ElementType
|
||||
plan: string
|
||||
}
|
||||
import { type TFunction } from 'i18next'
|
||||
|
||||
/**
|
||||
* Base navigation item type
|
||||
@@ -82,10 +72,12 @@ export type NavGroup = {
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar data type
|
||||
* Root sidebar data type
|
||||
*
|
||||
* Used by the default (top-level) sidebar view that lists primary
|
||||
* application navigation (chat, dashboard, admin, etc).
|
||||
*/
|
||||
export type SidebarData = {
|
||||
workspaces: Workspace[]
|
||||
navGroups: NavGroup[]
|
||||
}
|
||||
|
||||
@@ -100,3 +92,45 @@ export type TopNavLink = {
|
||||
requiresAuth?: boolean
|
||||
external?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Back-navigation descriptor for a nested sidebar view
|
||||
*/
|
||||
export type SidebarViewParent = {
|
||||
/** Destination URL for the back button */
|
||||
to: LinkProps['to'] | (string & {})
|
||||
/** Visible label, e.g. "Back to Dashboard" — already localized */
|
||||
label: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Nested sidebar view configuration
|
||||
*
|
||||
* A nested view replaces the root navigation when the user enters a
|
||||
* dedicated workspace (e.g. System Settings). It models the modern
|
||||
* Vercel / Cloudflare "drill-in" sidebar UX: clicking a top-level entry
|
||||
* swaps the sidebar to a contextual view with a "Back" affordance.
|
||||
*/
|
||||
export type SidebarView = {
|
||||
/** Stable identifier (also drives transition animation keys) */
|
||||
id: string
|
||||
/** Path matcher that activates this view */
|
||||
pathPattern: RegExp
|
||||
/** Back-navigation descriptor; required for nested views */
|
||||
parent: SidebarViewParent
|
||||
/** Nav group builder, called per render with the active translator */
|
||||
getNavGroups: (t: TFunction) => NavGroup[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolved sidebar view returned by `useSidebarView()`
|
||||
*
|
||||
* - `view === null`: root navigation (default sidebar)
|
||||
* - `view !== null`: nested workspace view (renders header + back button)
|
||||
*/
|
||||
export type ResolvedSidebarView = {
|
||||
/** Animation/identity key — falls back to a sentinel for the root view */
|
||||
key: string
|
||||
view: SidebarView | null
|
||||
navGroups: NavGroup[]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user