feat: scope workspace routes by organization slug
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
@@ -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] ?? "工作区" },
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
92
modules/shared/lib/workspace-routing.ts
Normal file
92
modules/shared/lib/workspace-routing.ts
Normal 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}/`);
|
||||
}
|
||||
Reference in New Issue
Block a user