feat: scope workspace routes by organization slug

This commit is contained in:
2026-07-02 20:11:57 -07:00
parent fae97a7046
commit 3ab0e3e034
48 changed files with 565 additions and 96 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { useRouter } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
import { Building2, Check, ChevronUp, Ellipsis, Link2, LogOut, Settings } from "lucide-react";
import { FormEvent, useEffect, useRef, useState } from "react";
@@ -11,6 +11,7 @@ import { Input } from "@/components/ui/input";
import type { ApiResult } from "@/modules/core/server/api";
import type { AccountOrganizationOption, Organization, PublicAccount } from "@/modules/core/types";
import { UserAvatar } from "@/modules/shared/components/UserAvatar";
import { getWorkspaceHref, getWorkspacePathFromPathname } from "@/modules/shared/lib/workspace-routing";
import { cn } from "@/lib/utils";
type AccountMenuProps = {
@@ -25,6 +26,7 @@ export function AccountMenu({
organizations,
}: AccountMenuProps): React.ReactElement {
const router = useRouter();
const pathname = usePathname();
const menuRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState(false);
const [isOrganizationOpen, setIsOrganizationOpen] = useState(false);
@@ -71,7 +73,10 @@ export function AccountMenu({
headers: { "content-type": "application/json" },
body: JSON.stringify({ organizationId }),
});
const result = (await response.json()) as ApiResult<Record<string, unknown>>;
const result = (await response.json()) as ApiResult<{
organization: Organization | null;
organizations: AccountOrganizationOption[];
}>;
setIsPending(false);
if (!result.success) {
@@ -80,6 +85,9 @@ export function AccountMenu({
}
setIsOrganizationOpen(false);
const activeOrganization = result.organization ?? result.organizations.find((item) => item.isActive);
const workspacePath = getWorkspacePathFromPathname(pathname);
router.replace(getWorkspaceHref(activeOrganization?.slug, workspacePath));
router.refresh();
}

View File

@@ -4,55 +4,60 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronRight } from "lucide-react";
import { getWorkspaceHref, getWorkspacePathFromPathname, getWorkspaceSlugFromPathname } from "@/modules/shared/lib/workspace-routing";
type BreadcrumbItem = {
href?: string;
label: string;
};
const routeLabels: Record<string, string> = {
"/app/dashboard": "运营看板",
"/app/elders": "老人档案",
"/app/beds": "床位房间",
"/app/health": "健康照护",
"/app/care": "护理服务",
"/app/emergency": "安全应急",
"/app/devices": "设备运维",
"/app/notices": "公告通知",
"/app/alerts": "规则预警",
"/app/family": "家属服务",
"/app/settings/global": "全局配置",
"/app/settings/organizations": "机构管理",
"/app/settings/users": "用户管理",
"/app/settings/roles": "角色权限",
"/app/settings/audit": "审计日志",
"/app/settings/status": "运行状态",
"/dashboard": "运营看板",
"/elders": "老人档案",
"/beds": "床位房间",
"/health": "健康照护",
"/care": "护理服务",
"/emergency": "安全应急",
"/devices": "设备运维",
"/notices": "公告通知",
"/alerts": "规则预警",
"/family": "家属服务",
"/settings/global": "全局配置",
"/settings/organizations": "机构管理",
"/settings/users": "用户管理",
"/settings/roles": "角色权限",
"/settings/audit": "审计日志",
"/settings/status": "运行状态",
};
function getBreadcrumbs(pathname: string): BreadcrumbItem[] {
if (pathname === "/app" || pathname === "/app/dashboard") {
const workspacePath = getWorkspacePathFromPathname(pathname);
const organizationSlug = getWorkspaceSlugFromPathname(pathname);
if (workspacePath === "/dashboard") {
return [{ label: "工作台" }];
}
if (pathname.startsWith("/app/settings/organizations/")) {
if (workspacePath.startsWith("/settings/organizations/")) {
return [
{ href: "/app/dashboard", label: "工作台" },
{ href: "/app/settings/users", label: "系统设置" },
{ href: "/app/settings/organizations", label: "机构管理" },
{ href: getWorkspaceHref(organizationSlug, "/dashboard"), label: "工作台" },
{ href: getWorkspaceHref(organizationSlug, "/settings/users"), label: "管理系统" },
{ href: getWorkspaceHref(organizationSlug, "/settings/organizations"), label: "机构管理" },
{ label: "机构详情" },
];
}
if (pathname.startsWith("/app/settings")) {
if (workspacePath.startsWith("/settings")) {
return [
{ href: "/app/dashboard", label: "工作台" },
{ href: "/app/settings/users", label: "系统设置" },
{ label: routeLabels[pathname] ?? "设置" },
{ href: getWorkspaceHref(organizationSlug, "/dashboard"), label: "工作台" },
{ href: getWorkspaceHref(organizationSlug, "/settings/users"), label: "管理系统" },
{ label: routeLabels[workspacePath] ?? "设置" },
];
}
return [
{ href: "/app/dashboard", label: "工作台" },
{ label: routeLabels[pathname] ?? "工作区" },
{ href: getWorkspaceHref(organizationSlug, "/dashboard"), label: "工作台" },
{ label: routeLabels[workspacePath] ?? "工作区" },
];
}

View File

@@ -8,6 +8,7 @@ import { AppBreadcrumbs } from "@/modules/shared/components/AppBreadcrumbs";
import { AppSidebarNav } from "@/modules/shared/components/AppSidebarNav";
import { UserAvatar } from "@/modules/shared/components/UserAvatar";
import { navItems } from "@/modules/shared/lib/navigation";
import { getWorkspaceHref } from "@/modules/shared/lib/workspace-routing";
type AppShellProps = {
children: React.ReactNode;
@@ -24,11 +25,14 @@ export function AppShell({
organizations,
permissions,
}: AppShellProps): React.ReactElement {
const organizationSlug = organization?.slug;
const dashboardHref = getWorkspaceHref(organizationSlug, "/dashboard");
return (
<div className="flex h-svh items-stretch overflow-hidden bg-background text-foreground">
<aside className="hidden h-svh w-64 shrink-0 border-r bg-white/78 backdrop-blur xl:block">
<div className="flex h-full min-h-0 flex-col">
<Link href="/app/dashboard" className="flex h-16 shrink-0 items-center gap-3 border-b px-5">
<Link href={dashboardHref} className="flex h-16 shrink-0 items-center gap-3 border-b px-5">
<span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
<Stethoscope className="size-5" aria-hidden="true" />
</span>
@@ -37,7 +41,7 @@ export function AppShell({
</span>
</Link>
<AppSidebarNav permissions={permissions} />
<AppSidebarNav organizationSlug={organizationSlug} permissions={permissions} />
<div className="border-t p-3">
<AccountMenu

View File

@@ -21,7 +21,8 @@ import {
import type { LucideIcon } from "lucide-react";
import type { Permission } from "@/modules/core/types";
import { navGroups, type NavIconKey } from "@/modules/shared/lib/navigation";
import { navGroups, type NavIconKey, type NavItem } from "@/modules/shared/lib/navigation";
import { getWorkspaceHref, isWorkspacePathActive } from "@/modules/shared/lib/workspace-routing";
import { cn } from "@/lib/utils";
const iconMap: Record<NavIconKey, LucideIcon> = {
@@ -42,23 +43,28 @@ const iconMap: Record<NavIconKey, LucideIcon> = {
};
type AppSidebarNavProps = {
organizationSlug?: string;
permissions: Permission[];
};
function isActivePath(pathname: string, href: string): boolean {
if (href === "/app/dashboard") {
return pathname === "/app" || pathname === href;
function canViewNavItem(item: NavItem, permissions: readonly Permission[]): boolean {
if (item.permission && !permissions.includes(item.permission)) {
return false;
}
return pathname === href || pathname.startsWith(`${href}/`);
if (item.anyPermissions && !item.anyPermissions.some((permission) => permissions.includes(permission))) {
return false;
}
return true;
}
export function AppSidebarNav({ permissions }: AppSidebarNavProps): React.ReactElement {
export function AppSidebarNav({ organizationSlug, permissions }: AppSidebarNavProps): React.ReactElement {
const pathname = usePathname();
const visibleNavGroups = navGroups
.map((group) => ({
...group,
items: group.items.filter((item) => !item.permission || permissions.includes(item.permission)),
items: group.items.filter((item) => canViewNavItem(item, permissions)),
}))
.filter((group) => group.items.length > 0);
@@ -71,12 +77,13 @@ export function AppSidebarNav({ permissions }: AppSidebarNavProps): React.ReactE
<ul className="space-y-1">
{group.items.map((item) => {
const Icon = iconMap[item.icon];
const isActive = isActivePath(pathname, item.href);
const href = getWorkspaceHref(organizationSlug, item.path);
const isActive = isWorkspacePathActive(pathname, item.path);
return (
<li key={item.href}>
<li key={item.path}>
<Link
href={item.href}
href={href}
aria-current={isActive ? "page" : undefined}
className={cn(
"group flex min-h-11 items-center gap-3 rounded-md px-3 text-sm transition-colors",

View File

@@ -17,10 +17,11 @@ export type NavIconKey =
| "users";
export type NavItem = {
href: string;
path: string;
label: string;
icon: NavIconKey;
permission?: Permission;
anyPermissions?: Permission[];
};
export type NavGroup = {
@@ -33,34 +34,40 @@ export const navGroups: NavGroup[] = [
label: "运营",
items: [
{
href: "/app/dashboard",
path: "/dashboard",
label: "运营看板",
icon: "dashboard",
anyPermissions: ["elder:read", "facility:read", "admission:read", "incident:read"],
},
{
href: "/app/elders",
path: "/elders",
label: "老人档案",
icon: "users",
permission: "elder:read",
},
{
href: "/app/beds",
path: "/beds",
label: "床位房间",
icon: "beds",
anyPermissions: ["facility:read", "admission:read"],
},
{
href: "/app/health",
path: "/health",
label: "健康照护",
icon: "health",
permission: "elder:read",
},
{
href: "/app/care",
path: "/care",
label: "护理服务",
icon: "care",
permission: "elder:update",
},
{
href: "/app/emergency",
path: "/emergency",
label: "安全应急",
icon: "emergency",
permission: "incident:read",
},
],
},
@@ -68,62 +75,64 @@ export const navGroups: NavGroup[] = [
label: "协同",
items: [
{
href: "/app/devices",
path: "/devices",
label: "设备运维",
icon: "devices",
permission: "facility:read",
},
{
href: "/app/notices",
path: "/notices",
label: "公告通知",
icon: "notices",
},
{
href: "/app/alerts",
path: "/alerts",
label: "规则预警",
icon: "alerts",
permission: "incident:read",
},
{
href: "/app/family",
path: "/family",
label: "家属服务",
icon: "devices",
},
],
},
{
label: "系统设置",
label: "管理系统",
items: [
{
href: "/app/settings/global",
path: "/settings/global",
label: "全局配置",
icon: "global",
permission: "platform:manage",
},
{
href: "/app/settings/organizations",
path: "/settings/organizations",
label: "机构管理",
icon: "organizations",
permission: "organization:read",
},
{
href: "/app/settings/users",
path: "/settings/users",
label: "用户管理",
icon: "users",
permission: "account:read",
},
{
href: "/app/settings/roles",
path: "/settings/roles",
label: "角色权限",
icon: "roles",
permission: "role:read",
},
{
href: "/app/settings/audit",
path: "/settings/audit",
label: "审计日志",
icon: "audit",
permission: "audit:read",
},
{
href: "/app/settings/status",
path: "/settings/status",
label: "运行状态",
icon: "status",
permission: "incident:read",

View File

@@ -0,0 +1,92 @@
export const APP_ROUTE_PREFIX = "/app";
export const WORKSPACE_SECTION_KEYS = [
"dashboard",
"elders",
"beds",
"health",
"care",
"emergency",
"devices",
"notices",
"alerts",
"family",
"settings",
] as const;
export const RESERVED_WORKSPACE_SLUGS = new Set<string>(WORKSPACE_SECTION_KEYS);
function splitPath(pathname: string): string[] {
const pathOnly = pathname.split(/[?#]/, 1)[0] ?? "";
return pathOnly.split("/").filter(Boolean);
}
export function normalizeWorkspacePath(path: string): string {
const trimmed = path.trim();
if (!trimmed || trimmed === "/" || trimmed === APP_ROUTE_PREFIX) {
return "/dashboard";
}
if (trimmed.startsWith(`${APP_ROUTE_PREFIX}/`) || trimmed === APP_ROUTE_PREFIX) {
return getWorkspacePathFromPathname(trimmed);
}
const withLeadingSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
return withLeadingSlash.replace(/\/{2,}/g, "/");
}
export function getWorkspacePathFromPathname(pathname: string): string {
const segments = splitPath(pathname);
if (segments[0] !== "app") {
return "/dashboard";
}
const appSegments = segments.slice(1);
if (appSegments.length === 0) {
return "/dashboard";
}
const firstSegment = appSegments[0] ?? "";
if (RESERVED_WORKSPACE_SLUGS.has(firstSegment)) {
return `/${appSegments.join("/")}`;
}
const scopedSegments = appSegments.slice(1);
return scopedSegments.length > 0 ? `/${scopedSegments.join("/")}` : "/dashboard";
}
export function getWorkspaceSlugFromPathname(pathname: string): string | undefined {
const segments = splitPath(pathname);
if (segments[0] !== "app") {
return undefined;
}
const candidate = segments[1];
if (!candidate || RESERVED_WORKSPACE_SLUGS.has(candidate)) {
return undefined;
}
return candidate;
}
export function getWorkspaceHref(organizationSlug: string | undefined, path = "/dashboard"): string {
const workspacePath = normalizeWorkspacePath(path);
const slug = organizationSlug?.trim();
if (!slug) {
return `${APP_ROUTE_PREFIX}${workspacePath}`;
}
return `${APP_ROUTE_PREFIX}/${encodeURIComponent(slug)}${workspacePath}`;
}
export function isWorkspacePathActive(pathname: string, itemPath: string): boolean {
const currentPath = getWorkspacePathFromPathname(pathname);
const normalizedItemPath = normalizeWorkspacePath(itemPath);
if (normalizedItemPath === "/dashboard") {
return currentPath === "/dashboard";
}
return currentPath === normalizedItemPath || currentPath.startsWith(`${normalizedItemPath}/`);
}