@nocobase/portal-template-default 1.0.1 → 1.0.2

package/registry/nocobase-acl/demo/role-switcher-prompt-generator.tsx

@@ -2,7 +2,13 @@ import { Check, Copy } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -52,7 +58,7 @@ export function RoleSwitcherPromptGenerator() {
   const [copyError, setCopyError] = useState(false);
 
   const prompt = useMemo(
-    () => `Integrate the RoleSwitcher into the existing NocoBase Refine Starter.
+    () => `Integrate the RoleSwitcher into the existing NocoBase Admin Starter.
 
 Target placement
 - Placement: ${placementLabels[placement]}
@@ -71,7 +77,7 @@ Component presentation
 Integration requirements
 - Import and reuse RoleSwitcher from the installed local entry point at @/extensions/nocobase-acl.
 - Update the existing application surface instead of creating an isolated example page.
-- Do not fetch, hard-code, or pass a duplicate role list. The component reads roles from the current Refine identity.
+- Do not fetch, hard-code, or pass a duplicate role list. The component reads roles from the signed-in identity.
 - Do not reimplement Full permissions, Anonymous, or role-mode logic. The component derives these options from the Starter ACL store.
 - Do not add a separate role-switch mutation. The component already calls users:setDefaultRole and reloads the application after a successful switch.
 - Preserve existing account, responsive navigation, and sign-out behavior.
@@ -83,14 +89,20 @@ Integration requirements
     <div className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
       <Card className="gap-0 py-0">
         <CardHeader className="border-b py-4">
-          <CardTitle>Placement settings</CardTitle>
+          <CardTitle className="text-base">Placement settings</CardTitle>
+          <CardDescription>
+            Choose where the shared role switcher belongs and how its compact
+            state should appear.
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-5 py-5">
           <div className="space-y-2">
             <Label>Placement</Label>
             <Select
               value={placement}
-              onValueChange={(value) => value && setPlacement(value as Placement)}
+              onValueChange={(value) =>
+                value && setPlacement(value as Placement)
+              }
             >
               <SelectTrigger className="w-full">
                 <SelectValue>{placementLabels[placement]}</SelectValue>
@@ -144,8 +156,15 @@ Integration requirements
       </Card>
 
       <Card className="gap-0 overflow-hidden py-0">
-        <CardHeader className="flex-row items-center justify-between gap-3 border-b py-3">
-          <CardTitle className="text-sm">Generated integration prompt</CardTitle>
+        <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+          <div>
+            <div className="text-sm font-medium">
+              Generated integration prompt
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Updates as you change placement and presentation settings.
+            </div>
+          </div>
           <Button
             size="sm"
             onClick={async () => {
@@ -162,14 +181,14 @@ Integration requirements
             {copied ? <Check /> : <Copy />}
             {copied ? "Copied" : "Copy prompt"}
           </Button>
-        </CardHeader>
+        </div>
         {copyError ? (
           <p className="border-b px-4 py-2 text-xs text-destructive">
             Clipboard access failed. Select the prompt and copy it manually.
           </p>
         ) : null}
         <CardContent className="p-0">
-          <pre className="max-h-[560px] overflow-auto whitespace-pre-wrap p-5 font-mono text-xs leading-5 text-muted-foreground">
+          <pre className="max-h-[560px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
             {prompt}
           </pre>
         </CardContent>

package/registry/nocobase-acl/extension.tsx

@@ -21,7 +21,7 @@ const nocobaseAclExtension: AppExtension = {
       meta: {
         label: "Access control",
         icon: <ShieldCheck />,
-        description: "NocoBase ACL integration for Refine applications.",
+        description: "NocoBase ACL integration for admin applications.",
         acl: { type: "authenticated" },
       },
     },

package/registry/nocobase-acl/tests/acl-regression.mjs

@@ -12,8 +12,7 @@ try {
     canAccessWithSnapshot,
     getAclDataForDataSource,
     resolveActionPermission,
-  } =
-    await server.ssrLoadModule("/src/lib/nocobase/acl/action.ts");
+  } = await server.ssrLoadModule("/src/lib/nocobase/acl/action.ts");
   const { resolveAclDataSourceKey } = await server.ssrLoadModule(
     "/src/lib/nocobase/acl/data-source.ts"
   );
@@ -23,13 +22,11 @@ try {
     clearRecordPermissions,
     getRecordActionPermission,
     updateRecordPermissions,
-  } = await server.ssrLoadModule(
-    "/src/lib/nocobase/acl/record-permissions.ts"
-  );
+  } = await server.ssrLoadModule("/src/lib/nocobase/acl/record-permissions.ts");
   const { RoleSwitcher } = await server.ssrLoadModule(
     "/registry/nocobase-acl/components/role-switcher.tsx"
   );
-  const { getRoleOptions } = await server.ssrLoadModule(
+  const { getRoleOptions, resolveRoleTitle } = await server.ssrLoadModule(
     "/registry/nocobase-acl/components/role-options.ts"
   );
 
@@ -305,6 +302,10 @@ try {
       { name: "anonymous", title: "Anonymous" },
     ]
   );
+  assert.equal(
+    resolveRoleTitle({ name: "admin", title: '{{t("Admin")}}' }),
+    "Admin"
+  );
 
   assert.equal(typeof RoleSwitcher, "function");
   console.log("NocoBase ACL regression tests passed");

package/registry/nocobase-ai/components/chat/chat-messages.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import {
   useAIChatBase,
   useAIChatMessages,
@@ -7,7 +8,7 @@ import {
   type AIToolCallDecision,
 } from "../../providers";
 import { cn } from "@/lib/utils";
-import { ArrowDown, LoaderCircle } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { ChatEmptyState } from "./chat-empty-state";
 import { ChatMessage } from "./chat-message";
@@ -107,9 +108,7 @@ export function AIChatMessageList({
         }}
       >
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground">
-            <LoaderCircle className="size-4 animate-spin" /> Loading messages…
-          </div>
+          <LoadingState className="h-full" />
         ) : (
           <>
             {messages.length ? (

package/registry/nocobase-ai/components/chat/conversation-list.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import {
   Dialog,
   DialogContent,
@@ -170,10 +171,7 @@ export function ConversationList({
       </form>
       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2">
         {conversationsLoading ? (
-          <div className="flex items-center justify-center gap-2 px-3 py-8 text-sm text-muted-foreground">
-            <LoaderCircle className="size-4 animate-spin" /> Loading
-            conversations…
-          </div>
+          <LoadingState className="py-8" />
         ) : conversations.length ? (
           <div className="space-y-1">
             {conversations.map((conversation) => {

package/registry/nocobase-ai/components/tools/business-report-dialog.tsx

@@ -1,4 +1,5 @@
 import { MarkdownMessage } from "../chat/markdown-message";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -58,7 +59,11 @@ const sameReport = (
   sameCharts(left.charts, right.charts);
 
 type BusinessReportDialogController = {
-  open: (toolCallId: string, report: BusinessReportData, ready: boolean) => void;
+  open: (
+    toolCallId: string,
+    report: BusinessReportData,
+    ready: boolean
+  ) => void;
   update: (
     toolCallId: string,
     report: BusinessReportData,
@@ -79,9 +84,7 @@ export function useBusinessReportDialog() {
   return value;
 }
 
-export function BusinessReportDialogProvider({
-  children,
-}: PropsWithChildren) {
+export function BusinessReportDialogProvider({ children }: PropsWithChildren) {
   const [state, setState] = useState(closedSnapshot);
   const open = useCallback(
     (toolCallId: string, report: BusinessReportData, ready: boolean) =>
@@ -107,9 +110,7 @@ export function BusinessReportDialogProvider({
         state={state}
         onOpenChange={(nextOpen) =>
           setState((current) =>
-            current.open === nextOpen
-              ? current
-              : { ...current, open: nextOpen }
+            current.open === nextOpen ? current : { ...current, open: nextOpen }
           )
         }
       />
@@ -119,13 +120,7 @@ export function BusinessReportDialogProvider({
 
 function ChartPreview({ options }: { options: Record<string, unknown> }) {
   return (
-    <Suspense
-      fallback={
-        <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
-          <LoaderCircle className="mr-2 size-4 animate-spin" /> Loading chart…
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingState className="h-[280px]" />}>
       <EChartsPreview options={options} />
     </Suspense>
   );
@@ -150,7 +145,10 @@ function BusinessReportDialogHost({
     [report, state.ready]
   );
   const reportMarkdown = useMemo(
-    () => (state.open && state.ready && report ? buildBusinessReportMarkdown(report) : ""),
+    () =>
+      state.open && state.ready && report
+        ? buildBusinessReportMarkdown(report)
+        : "",
     [report, state.open, state.ready]
   );
   const previewParts = useMemo(
@@ -270,12 +268,11 @@ function BusinessReportDialogHost({
                 srcDoc={htmlPreview}
                 className="size-full min-h-[480px] border-0 bg-white"
               />
+            ) : htmlLoading ? (
+              <LoadingState className="h-full min-h-[480px]" />
             ) : (
               <div className="flex h-full min-h-[480px] items-center justify-center gap-2 text-sm text-muted-foreground">
-                {htmlLoading ? (
-                  <LoaderCircle className="size-4 animate-spin" />
-                ) : null}
-                {htmlLoading ? "Preparing HTML preview…" : "HTML is unavailable"}
+                HTML is unavailable
               </div>
             )}
           </TabsContent>

package/registry/nocobase-ai/components/tools/chart-renderer.tsx

@@ -1,12 +1,7 @@
 import { Button } from "@/components/ui/button";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import { CheckCircle2, Copy, LoaderCircle } from "lucide-react";
-import {
-  Component,
-  lazy,
-  Suspense,
-  useState,
-  type ReactNode,
-} from "react";
+import { Component, lazy, Suspense, useState, type ReactNode } from "react";
 import type { AIToolRendererProps } from "./tool-renderer-provider";
 import { asRecord } from "./tool-renderer-utils";
 
@@ -75,13 +70,7 @@ export function ChartPreview({
   options: Record<string, unknown>;
 }) {
   return (
-    <Suspense
-      fallback={
-        <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
-          <LoaderCircle className="mr-2 size-4 animate-spin" /> Loading chart…
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingState className="h-[280px]" />}>
       <EChartsPreview options={options} />
     </Suspense>
   );

package/registry/nocobase-ai/components/tools/echarts-preview.tsx

@@ -1,6 +1,7 @@
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import echarts, {
   getEChartsRuntimeSignature,
   prepareEChartsRuntime,
@@ -33,11 +34,7 @@ export default function EChartsPreview({
 
   if (error) throw error;
   if (preparedSignature !== signature) {
-    return (
-      <div className="flex h-[280px] items-center justify-center text-xs text-muted-foreground">
-        Loading chart…
-      </div>
-    );
+    return <LoadingState className="h-[280px]" />;
   }
 
   return (

package/registry/nocobase-ai/demo/configuration-gate.tsx

@@ -1,7 +1,8 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import { useAI } from "../providers";
-import { CircleAlert, LoaderCircle } from "lucide-react";
+import { CircleAlert } from "lucide-react";
 import type { ReactNode } from "react";
 
 export function AIConfigurationGate({ children }: { children: ReactNode }) {
@@ -17,6 +18,8 @@ export function AIConfigurationGate({ children }: { children: ReactNode }) {
   const loading = configurationStatus === "loading";
   const error = configurationError ?? modelConfigurationError;
 
+  if (loading) return <LoadingState className="min-h-80" />;
+
   return (
     <div className="space-y-6 pb-12">
       <section className="border-b pb-8">
@@ -33,18 +36,12 @@ export function AIConfigurationGate({ children }: { children: ReactNode }) {
         </p>
       </section>
 
-      <Alert variant={loading ? "default" : "destructive"}>
-        {loading ? <LoaderCircle className="animate-spin" /> : <CircleAlert />}
-        <AlertTitle>
-          {loading
-            ? "Loading NocoBase AI configuration"
-            : "NocoBase AI is not available"}
-        </AlertTitle>
+      <Alert variant="destructive">
+        <CircleAlert />
+        <AlertTitle>NocoBase AI is not available</AlertTitle>
         <AlertDescription>
-          {loading
-            ? "Fetching the AI employees and enabled models available to the current user."
-            : error?.message ??
-              "Check the NocoBase connection and the AI employees available to the current user."}
+          {error?.message ??
+            "Check the NocoBase connection and the AI employees available to the current user."}
         </AlertDescription>
       </Alert>
     </div>

package/registry/nocobase-ai/extension.tsx

@@ -1,5 +1,6 @@
 import { NocoBaseAIExtensionProvider } from "./global-ai-chat";
 import type { AppExtension } from "@/app/extension";
+import { LoadingState } from "@/components/app-shell/loading-state";
 import {
   Bot,
   MessageSquare,
@@ -37,13 +38,7 @@ const ToolCardsPage = lazy(() =>
 
 function LazyDemoRoute({ children }: { children: ReactNode }) {
   return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[320px] items-center justify-center text-sm text-muted-foreground">
-          Loading AI components…
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingState className="min-h-[320px]" />}>
       {children}
     </Suspense>
   );

package/registry/nocobase-i18n/README.md

@@ -0,0 +1,53 @@
+# NocoBase i18n
+
+Optional frontend-owned internationalization for the NocoBase Admin Starter.
+
+The Registry connects i18next to the application translation provider, persists
+the selected locale through the Starter's shared NocoBase client, sends it as
+`X-Locale`, and adds a reusable language switcher to the signed-in user menu.
+Its integrated Demo route shows the complete configuration model without
+requiring a second Registry item.
+
+Starter and Registry UI resources remain frontend-owned. At startup the runtime
+reads `enabledLanguages` from `systemSettings:get` and merges only registered
+dynamic NocoBase namespaces from `app:getLang`; `lm-collections` is registered
+by default so collection and field translations remain compatible.
+
+Application-owned React translations belong in `src/locales`, outside the
+installed Registry directory. Register them through the Starter-level
+`registerTranslationResources` helper so the application remains buildable when
+the optional i18n Registry is not installed. When this Registry is present, it
+consumes both resources registered before startup and resources added later by
+lazy features.
+
+On NocoBase versions that support filtered language resources, the request uses
+`app:getLang?ns=lm-collections,...`. Older servers ignore the query parameter;
+the client still merges only registered namespaces, so the integration remains
+backward compatible.
+
+Other installed components can register their own namespace without changing
+the runtime:
+
+```ts
+import { registerLocaleResources } from "@/extensions/nocobase-i18n";
+
+registerLocaleResources("my-extension", {
+  "en-US": { title: "Orders" },
+  "zh-CN": { title: "订单" },
+});
+```
+
+If a component relies on another server-generated namespace, opt in explicitly:
+
+```ts
+import { registerServerResourceNamespace } from "@/extensions/nocobase-i18n";
+
+registerServerResourceNamespace("my-dynamic-namespace");
+```
+
+Namespaces registered after application startup are loaded incrementally, so
+lazy Registry components do not need to participate in the initial request.
+
+Use the application's `useTranslate` hook in React components. Existing exact
+NocoBase-style expressions such as `{{t("Orders")}}` and expressions with a
+string namespace are resolved through the Starter compatibility helper.

package/registry/nocobase-i18n/components/index.ts

@@ -0,0 +1 @@
+export * from "./language-switcher";

package/registry/nocobase-i18n/components/language-switcher.tsx

@@ -0,0 +1,138 @@
+import { useGetLocale, useSetLocale, useTranslate } from "@refinedev/core";
+import { Languages, Loader2 } from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import {
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useEnabledLocales } from "../locale-store";
+
+export type LanguageSwitcherProps = {
+  className?: string;
+  label?: ReactNode | false;
+  triggerClassName?: string;
+};
+
+export function LanguageSwitcher({
+  className,
+  label,
+  triggerClassName,
+}: LanguageSwitcherProps) {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const setLocale = useSetLocale();
+  const locales = useEnabledLocales();
+  const currentLocale = getLocale();
+  const [switching, setSwitching] = useState(false);
+  const [error, setError] = useState<string>();
+  const resolvedLabel =
+    typeof label === "undefined"
+      ? translate("language.label", { ns: "nocobase-i18n" }, "Language")
+      : label;
+
+  if (locales.length < 2) return null;
+
+  const currentDefinition =
+    locales.find(({ locale }) => locale === currentLocale) ?? locales[0];
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {resolvedLabel === false ? null : (
+        <p className="text-xs font-medium text-muted-foreground">
+          {resolvedLabel}
+        </p>
+      )}
+      <Select
+        value={currentLocale}
+        disabled={switching}
+        onValueChange={(value) => {
+          if (!value || value === currentLocale) return;
+          setSwitching(true);
+          setError(undefined);
+          Promise.resolve(setLocale(value)).catch((reason) => {
+            setError(
+              reason instanceof Error
+                ? reason.message
+                : translate(
+                    "language.switchError",
+                    { ns: "nocobase-i18n" },
+                    "Unable to switch language."
+                  )
+            );
+            setSwitching(false);
+          });
+        }}
+      >
+        <SelectTrigger
+          className={cn("w-full min-w-52", triggerClassName)}
+          aria-label={String(resolvedLabel || "Language")}
+        >
+          {switching ? <Loader2 className="animate-spin" /> : <Languages />}
+          <SelectValue>{currentDefinition?.label ?? currentLocale}</SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {locales.map((definition) => (
+            <SelectItem key={definition.locale} value={definition.locale}>
+              {definition.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+    </div>
+  );
+}
+
+export function LanguageUserMenuItems() {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const setLocale = useSetLocale();
+  const locales = useEnabledLocales();
+  const currentLocale = getLocale();
+
+  if (locales.length < 2) return null;
+
+  return (
+    <>
+      <DropdownMenuSeparator />
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger className="min-h-9 gap-2 px-2 text-muted-foreground focus:text-foreground">
+          <Languages />
+          <span>
+            {translate("language.label", { ns: "nocobase-i18n" }, "Language")}
+          </span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="min-w-44">
+          <DropdownMenuRadioGroup
+            value={currentLocale}
+            onValueChange={(value) => {
+              if (value && value !== currentLocale) void setLocale(value);
+            }}
+          >
+            {locales.map((definition) => (
+              <DropdownMenuRadioItem
+                key={definition.locale}
+                value={definition.locale}
+              >
+                {definition.label}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </>
+  );
+}