@nocobase/portal-template-default 1.0.2 → 1.0.4

package/registry.config.json

@@ -2,14 +2,41 @@
   "name": "nocobase-ai",
   "homepage": "https://www.nocobase.com",
   "items": [
+    {
+      "name": "route-surfaces",
+      "type": "registry:lib",
+      "title": "NocoBase Route Surfaces",
+      "description": "URL-backed drawer, dialog, and page containers with nested drawer stacking and a shared close lifecycle.",
+      "dependencies": [
+        "@base-ui/react@^1.6.0",
+        "@refinedev/core@^5.0.8",
+        "lucide-react@^0.487.0",
+        "react-router@^7.0.2"
+      ],
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "card",
+        "input",
+        "label",
+        "select",
+        "textarea"
+      ],
+      "docs": "Provides presentation containers plus an integrated Demo and Prompt generator. Route definitions, ACL guards, data fetching, and business content remain application-owned.",
+      "source": {
+        "root": "registry/nocobase-route-surfaces",
+        "target": "src/extensions/nocobase-route-surfaces",
+        "include": ["."]
+      }
+    },
     {
       "name": "i18n",
       "type": "registry:block",
       "title": "NocoBase i18n",
-      "description": "Optional hybrid internationalization with frontend-owned UI resources, selected NocoBase dynamic namespaces, X-Locale synchronization, a reusable language switcher, and an integrated showcase.",
+      "description": "Optional NocoBase server-language resources, user preference persistence, reusable language controls, and an integrated showcase for the Starter's built-in i18n runtime.",
       "dependencies": [
         "@refinedev/core@^5.0.8",
-        "i18next@^25.3.2",
         "lucide-react@^0.487.0",
         "react-router@^7.0.2"
       ],
@@ -23,7 +50,7 @@
         "select",
         "textarea"
       ],
-      "docs": "Requires a compatible NocoBase Starter with the generic AppExtension i18nProvider and UserMenuItems host fields. Starter and Registry translations stay local; app:getLang is used only to merge registered dynamic namespaces such as lm-collections. The integrated Demo route documents the complete usage model.",
+      "docs": "Requires a compatible NocoBase Starter with the built-in i18n provider, shared System Settings bootstrap, and AppExtension Provider/UserMenuItems host fields. The Registry reuses systemSettings:get data and calls app:getLang only for registered dynamic namespaces such as lm-collections.",
       "source": {
         "root": "registry/nocobase-i18n",
         "target": "src/extensions/nocobase-i18n",

package/src/App.tsx

@@ -5,7 +5,14 @@ import routerProvider, {
   CatchAllNavigate,
   UnsavedChangesNotifier,
 } from "@refinedev/react-router";
-import { UserCreate, UserEdit, UserList, UserShow } from "./pages/users";
+import {
+  UserCreate,
+  UserEdit,
+  UserResourceLayout,
+  RoleDetailRoute,
+  userRoutes,
+  UserShow,
+} from "./pages/users";
 import { dataProvider } from "./providers/data";
 import { Login } from "./pages/login";
 import { Register } from "./pages/register";
@@ -20,7 +27,6 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { BrandLogo } from "./components/app-shell/brand";
 import {
   AppExtensionProviders,
-  extensionI18nProvider,
   extensionResources,
   extensionRouteElements,
 } from "./app/extensions";
@@ -31,14 +37,16 @@ import { AclBootstrap } from "./components/access-control/acl-bootstrap";
 import { ResourceAccessGuard } from "./components/access-control/resource-access-guard";
 import { NavigateToAccessibleResource } from "./components/access-control/navigate-to-accessible-resource";
 import { UsersRound } from "lucide-react";
+import { i18nProvider } from "./providers/i18n";
+import { SystemSettingsProvider } from "./providers/system-settings";
 
 const coreResources: ResourceProps[] = [
   {
     name: "users",
-    list: "/users",
-    create: "/users/create",
-    edit: "/users/edit/:id",
-    show: "/users/show/:id",
+    list: userRoutes.list,
+    create: userRoutes.create,
+    edit: userRoutes.edit,
+    show: userRoutes.show,
     meta: {
       label: "Users",
       singularLabel: "User",
@@ -65,24 +73,25 @@ function App() {
     <BrowserRouter basename={basename || undefined}>
       <ThemeProvider>
         <TooltipProvider>
-          <Refine
-            dataProvider={dataProvider}
-            notificationProvider={useNotificationProvider()}
-            routerProvider={routerProvider}
-            authProvider={authProvider}
-            accessControlProvider={accessControlProvider}
-            i18nProvider={extensionI18nProvider}
-            resources={[...coreResources, ...extensionResources]}
-            options={{
-              syncWithLocation: true,
-              warnWhenUnsavedChanges: true,
-              disableTelemetry: true,
-              title: {
-                text: "NocoBase",
-                icon: <BrandLogo className="size-14 rounded-2xl" />,
-              },
-            }}
-          >
+          <SystemSettingsProvider>
+            <Refine
+              dataProvider={dataProvider}
+              notificationProvider={useNotificationProvider()}
+              routerProvider={routerProvider}
+              authProvider={authProvider}
+              accessControlProvider={accessControlProvider}
+              i18nProvider={i18nProvider}
+              resources={[...coreResources, ...extensionResources]}
+              options={{
+                syncWithLocation: true,
+                warnWhenUnsavedChanges: true,
+                disableTelemetry: true,
+                title: {
+                  text: "NocoBase",
+                  icon: <BrandLogo className="size-14 rounded-2xl" />,
+                },
+              }}
+            >
             <Routes>
               <Route
                 element={
@@ -101,15 +110,10 @@ function App() {
                 }
               >
                 <Route index element={<NavigateToAccessibleResource />} />
-                <Route path="/users">
-                  <Route
-                    index
-                    element={
-                      <ResourceAccessGuard resource="users" action="list">
-                        <UserList />
-                      </ResourceAccessGuard>
-                    }
-                  />
+                <Route
+                  path="/users"
+                  element={<UserResourceLayout />}
+                >
                   <Route
                     path="create"
                     element={
@@ -126,6 +130,14 @@ function App() {
                       </ResourceAccessGuard>
                     }
                   />
+                  <Route
+                    path="roles/:roleName"
+                    element={
+                      <ResourceAccessGuard resource="roles" action="show">
+                        <RoleDetailRoute returnTo="list" />
+                      </ResourceAccessGuard>
+                    }
+                  />
                   <Route
                     path="show/:id"
                     element={
@@ -133,7 +145,24 @@ function App() {
                         <UserShow />
                       </ResourceAccessGuard>
                     }
-                  />
+                  >
+                    <Route
+                      path="edit"
+                      element={
+                        <ResourceAccessGuard resource="users" action="edit">
+                          <UserEdit returnTo="show" />
+                        </ResourceAccessGuard>
+                      }
+                    />
+                    <Route
+                      path="roles/:roleName"
+                      element={
+                        <ResourceAccessGuard resource="roles" action="show">
+                          <RoleDetailRoute returnTo="show" />
+                        </ResourceAccessGuard>
+                      }
+                    />
+                  </Route>
                 </Route>
                 {extensionRouteElements}
                 <Route path="*" element={<ErrorComponent />} />
@@ -159,7 +188,8 @@ function App() {
             <Toaster />
             <UnsavedChangesNotifier />
             <DocumentTitleHandler appName="NocoBase" />
-          </Refine>
+            </Refine>
+          </SystemSettingsProvider>
         </TooltipProvider>
       </ThemeProvider>
     </BrowserRouter>

package/src/app/extension.ts

@@ -1,4 +1,4 @@
-import type { I18nProvider, ResourceProps } from "@refinedev/core";
+import type { ResourceProps } from "@refinedev/core";
 import type { ComponentType, PropsWithChildren, ReactElement } from "react";
 
 export type AppExtension = {
@@ -7,5 +7,4 @@ export type AppExtension = {
   routes?: ReactElement;
   Provider?: ComponentType<PropsWithChildren>;
   UserMenuItems?: ComponentType;
-  i18nProvider?: I18nProvider;
 };

package/src/app/extensions.tsx

@@ -18,20 +18,6 @@ export const extensionRouteElements = appExtensions
   .map((extension) => extension.routes)
   .filter((routes): routes is NonNullable<typeof routes> => Boolean(routes));
 
-const i18nExtensions = appExtensions.filter(
-  (extension) => extension.i18nProvider
-);
-
-if (i18nExtensions.length > 1) {
-  console.warn(
-    `Multiple app extensions provide i18nProvider (${i18nExtensions
-      .map((extension) => extension.id)
-      .join(", ")}). Using ${i18nExtensions[0].id}.`
-  );
-}
-
-export const extensionI18nProvider = i18nExtensions[0]?.i18nProvider;
-
 export const extensionUserMenuItems = appExtensions
   .filter((extension) => extension.UserMenuItems)
   .map((extension) => ({

package/src/components/app-shell/breadcrumb.tsx

@@ -3,9 +3,12 @@
 import { Fragment, useMemo } from "react";
 import { Home } from "lucide-react";
 import {
+  type IResourceItem,
   matchResourceFromRoute,
   useBreadcrumb,
+  useGetToPath,
   useLink,
+  useParsed,
   useResourceParams,
   useTranslate,
   useUserFriendlyName,
@@ -24,9 +27,42 @@ export function Breadcrumb() {
   const Link = useLink();
   const { breadcrumbs } = useBreadcrumb();
   const { resources } = useResourceParams();
+  const { pathname } = useParsed();
+  const getToPath = useGetToPath();
   const translate = useTranslate();
   const getUserFriendlyName = useUserFriendlyName();
   const rootRouteResource = matchResourceFromRoute("/", resources);
+  const resolvedBreadcrumbs = useMemo(() => {
+    if (breadcrumbs.length > 0) return breadcrumbs;
+
+    const closestMatch = findClosestRouteMatch(pathname, resources);
+    if (!closestMatch.resource) return breadcrumbs;
+
+    const items: Array<{ label: string; href?: string }> = [
+      {
+        label:
+          closestMatch.resource.meta?.label ?? closestMatch.resource.name,
+        href: getToPath({ resource: closestMatch.resource, action: "list" }),
+      },
+    ];
+    const nestedAction = getNestedRouteAction(
+      pathname,
+      closestMatch.matchedSegmentCount
+    ) ??
+      (closestMatch.action && closestMatch.action !== "list"
+        ? closestMatch.action
+        : undefined);
+    if (nestedAction) {
+      items.push({
+        label: translate(
+          `buttons.${nestedAction}`,
+          nestedAction.charAt(0).toUpperCase() + nestedAction.slice(1)
+        ),
+      });
+    }
+
+    return items;
+  }, [breadcrumbs, getToPath, pathname, resources, translate]);
 
   const breadCrumbItems = useMemo(() => {
     const list: {
@@ -47,7 +83,7 @@ export function Breadcrumb() {
       ),
     });
 
-    for (const { label, href } of breadcrumbs) {
+    for (const { label, href } of resolvedBreadcrumbs) {
       const matchingResource = resources.find((resource) => {
         const metaLabel = resource.meta?.label;
         return (
@@ -80,9 +116,9 @@ export function Breadcrumb() {
 
     return list;
   }, [
-    breadcrumbs,
     getUserFriendlyName,
     Link,
+    resolvedBreadcrumbs,
     resources,
     rootRouteResource,
     translate,
@@ -114,4 +150,33 @@ export function Breadcrumb() {
   );
 }
 
+function findClosestRouteMatch(
+  pathname: string | undefined,
+  resources: IResourceItem[]
+) {
+  const segments = pathname?.split("/").filter(Boolean) ?? [];
+
+  for (let length = segments.length; length >= 0; length -= 1) {
+    const route = `/${segments.slice(0, length).join("/")}`;
+    const match = matchResourceFromRoute(route, resources);
+    if (match.resource) {
+      return { ...match, matchedSegmentCount: length };
+    }
+  }
+
+  return { resource: undefined, matchedSegmentCount: 0 };
+}
+
+function getNestedRouteAction(
+  pathname: string | undefined,
+  matchedSegmentCount: number
+) {
+  const segments = pathname?.split("/").filter(Boolean) ?? [];
+  const action = segments[matchedSegmentCount];
+
+  return action && ["create", "edit", "show", "clone"].includes(action)
+    ? action
+    : undefined;
+}
+
 Breadcrumb.displayName = "Breadcrumb";

package/src/components/app-shell/sidebar.tsx

@@ -218,7 +218,7 @@ function SidebarDropdownItem({
   selectedKey,
   Link,
 }: MenuItemProps & { Link: ReturnType<typeof useLink> }) {
-  const isSelected = item.key === selectedKey;
+  const isSelected = isTreeItemSelected(item, selectedKey);
   const displayName = useMenuItemLabel(item);
 
   return (
@@ -239,7 +239,7 @@ function SidebarDropdownItem({
 }
 
 function SidebarItemLink({ item, selectedKey }: MenuItemProps) {
-  const isSelected = item.key === selectedKey;
+  const isSelected = isTreeItemSelected(item, selectedKey);
 
   return <SidebarButton item={item} isSelected={isSelected} asLink={true} />;
 }

package/src/components/resources/views/list-view.tsx

@@ -11,12 +11,13 @@ import { cn } from "@/lib/utils";
 
 type ListViewProps = PropsWithChildren<{
   className?: string;
+  resource?: string;
 }>;
 
-export function ListView({ children, className }: ListViewProps) {
+export function ListView({ children, className, resource }: ListViewProps) {
   return (
     <div className={cn("flex flex-col", "gap-6", className)}>
-      <ListViewHeader />
+      <ListViewHeader resource={resource} />
       {children}
     </div>
   );

package/src/components/ui/sheet.tsx

@@ -1,24 +1,24 @@
-import * as React from "react"
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { XIcon } from "lucide-react";
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
@@ -31,7 +31,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
@@ -39,10 +39,12 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  closeLabel = "Close",
   ...props
 }: SheetPrimitive.Popup.Props & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+  closeLabel?: string;
 }) {
   return (
     <SheetPortal>
@@ -68,14 +70,13 @@ function SheetContent({
               />
             }
           >
-            <XIcon
-            />
-            <span className="sr-only">Close</span>
+            <XIcon />
+            <span className="sr-only">{closeLabel}</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  )
+  );
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,7 +86,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-0.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -95,7 +96,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
@@ -108,7 +109,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -121,7 +122,7 @@ function SheetDescription({
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -133,4 +134,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

package/src/lib/nocobase/client.ts

@@ -58,6 +58,7 @@ const unwrapPayload = (
 
 export class NocoBaseClient {
   private readonly apiOrigin?: string;
+  private runtimeLocale?: string;
 
   constructor(
     private readonly apiUrl = API_URL,
@@ -117,7 +118,7 @@ export class NocoBaseClient {
   }
 
   getLocale() {
-    return this.getStoredLocale() ?? getBrowserLocale();
+    return this.getStoredLocale() ?? this.runtimeLocale ?? getBrowserLocale();
   }
 
   setLocale(locale?: string | null) {
@@ -126,6 +127,10 @@ export class NocoBaseClient {
     else localStorage.removeItem(NOCOBASE_LOCALE_KEY);
   }
 
+  setRuntimeLocale(locale?: string | null) {
+    this.runtimeLocale = locale || undefined;
+  }
+
   buildUrl(endpoint: string, query?: Record<string, QueryValue>) {
     const base = `${this.apiUrl.replace(/\/$/, "")}/${endpoint.replace(
       /^\//,

package/src/locales/en-US.ts

@@ -1,11 +1,63 @@
 export const starter = {
+  "shell.workspace": "AI application workspace",
+  "shell.footer.freedom": "AI builds freely.",
+  "shell.footer.reliability": "NocoBase keeps it reliable.",
+  "auth.signOut": "Sign out",
+  "auth.signingOut": "Signing out...",
+  "buttons.apply": "Apply",
+  "buttons.clear": "Clear",
+  "buttons.undo": "Undo",
+  "pages.error.title": "Page not found.",
+  "pages.error.description": "The page you're looking for does not exist.",
+  "pages.error.backHome": "Back to homepage",
+  "table.filter.text.placeholder": "Filter by...",
+  "table.filter.numeric.placeholder": "Filter by...",
+  "table.filter.combobox.placeholder": "Select...",
+  "table.filter.combobox.search": "Search...",
+  "table.filter.combobox.noResults": "Results not found.",
+  "table.filter.operator.placeholder": "Search operator...",
+  "table.filter.operator.noResults": "No operator found.",
+  "table.filter.operator.eq": "Equals",
+  "table.filter.operator.ne": "Not equals",
+  "table.filter.operator.lt": "Less than",
+  "table.filter.operator.gt": "Greater than",
+  "table.filter.operator.lte": "Less than or equal",
+  "table.filter.operator.gte": "Greater than or equal",
+  "table.filter.operator.in": "Includes in an array",
+  "table.filter.operator.nin": "Not includes in an array",
+  "table.filter.operator.ina": "Includes in an array (case sensitive)",
+  "table.filter.operator.nina": "Not includes in an array (case sensitive)",
+  "table.filter.operator.contains": "Contains",
+  "table.filter.operator.ncontains": "Not contains",
+  "table.filter.operator.containss": "Contains (case sensitive)",
+  "table.filter.operator.ncontainss": "Not contains (case sensitive)",
+  "table.filter.operator.between": "Between",
+  "table.filter.operator.nbetween": "Not between",
+  "table.filter.operator.null": "Is null",
+  "table.filter.operator.nnull": "Is not null",
+  "table.filter.operator.startswith": "Starts with",
+  "table.filter.operator.nstartswith": "Not starts with",
+  "table.filter.operator.startswiths": "Starts with (case sensitive)",
+  "table.filter.operator.nstartswiths": "Not starts with (case sensitive)",
+  "table.filter.operator.endswith": "Ends with",
+  "table.filter.operator.nendswith": "Not ends with",
+  "table.filter.operator.endswiths": "Ends with (case sensitive)",
+  "table.filter.operator.nendswiths": "Not ends with (case sensitive)",
+  "table.filter.operator.eqs": "Equals (case sensitive)",
+  "table.filter.operator.nes": "Not equals (case sensitive)",
   "buttons.create": "Create",
   "buttons.edit": "Edit",
   "buttons.show": "View",
   "buttons.delete": "Delete",
   "buttons.refresh": "Refresh",
   "buttons.cancel": "Cancel",
+  "buttons.close": "Close",
   "buttons.confirm": "Are you sure?",
+  "unsavedChanges.title": "Discard unsaved changes?",
+  "unsavedChanges.description":
+    "Your changes have not been saved. Leaving now will discard them.",
+  "unsavedChanges.stay": "Keep editing",
+  "unsavedChanges.leave": "Discard changes",
   "views.create.title": "Create {{resource}}",
   "views.create.description":
     "Add a new {{resource}} to your NocoBase workspace.",
@@ -52,6 +104,14 @@ export const app = {
   "users.actions.view": "View user",
   "users.actions.edit": "Edit user",
   "users.actions.delete": "Delete user",
+  "users.drawer.create.title": "Create user",
+  "users.drawer.create.description":
+    "Add a user who can sign in to this NocoBase application.",
+  "users.drawer.edit.title": "Edit user",
+  "users.drawer.edit.description":
+    "Update this user's identity and contact information.",
+  "users.drawer.show.description":
+    "Review this user's identity, contact information, and roles.",
   "users.form.create.submit": "Create user",
   "users.form.create.submitting": "Creating...",
   "users.form.edit.submit": "Save changes",
@@ -75,8 +135,29 @@ export const app = {
   "users.detail.timestamps": "Timestamps",
   "users.detail.noRoles": "No assigned roles",
   "users.detail.unnamed": "Unnamed user",
+  "users.detail.loadError.title": "Unable to load user",
+  "users.detail.loadError.description":
+    "The user may no longer exist, or you may not have permission to view it.",
   "users.ai.table": "Users table",
   "users.ai.detail": "User details",
   "users.ai.createForm": "Create user form",
   "users.ai.editForm": "Edit user form",
+  "common.yes": "Yes",
+  "common.no": "No",
+  "roles.drawer.description": "Review the role associated with this user.",
+  "roles.fields.name": "Name",
+  "roles.fields.title": "Title",
+  "roles.fields.description": "Description",
+  "roles.fields.default": "Default role",
+  "roles.fields.hidden": "Hidden",
+  "roles.fields.allowConfigure": "Can configure",
+  "roles.fields.createdAt": "Created at",
+  "roles.fields.updatedAt": "Updated at",
+  "roles.detail.identity": "Role identity",
+  "roles.detail.settings": "Settings",
+  "roles.detail.actions": "Allowed actions",
+  "roles.detail.timestamps": "Timestamps",
+  "roles.detail.unavailable":
+    "Additional role details are unavailable. Showing the relation data included with the user.",
+  "roles.ai.detail": "Role details",
 } as const;