@nocobase/portal-template-default 1.0.3 → 1.0.5

package/src/pages/users/show.tsx

@@ -1,30 +1,34 @@
 import {
   useGetLocale,
-  useResourceParams,
   useShow,
   useTranslate,
 } from "@refinedev/core";
+import { useNavigate, useOutlet, useParams } from "react-router";
+import { Pencil, RotateCw } from "lucide-react";
 
-import { ShowView } from "@/components/resources/views/show-view";
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { EditButton } from "@/components/resources/buttons/edit";
+import { RefreshButton } from "@/components/resources/buttons/refresh";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { RouteDrawer } from "@/extensions/nocobase-route-surfaces";
 import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
-import { resolveTranslatableText } from "@/lib/i18n";
+import { RoleBadges } from "./role-badges";
+import { resolveRoleLabel } from "./role-utils";
+import { getUserRolePath, userRoutes } from "./routes";
 import type { UserRecord } from "./types";
 
 export const UserShow = () => {
   const translate = useTranslate();
   const getLocale = useGetLocale();
   const locale = getLocale();
-  const { id } = useResourceParams();
-  const { result: record } = useShow<UserRecord>({
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const nestedDrawer = useOutlet();
+  const { result: record, query } = useShow<UserRecord>({
+    resource: "users",
+    id,
     meta: {
       appends: ["roles"],
     },
@@ -35,10 +39,7 @@ export const UserShow = () => {
     record?.username ||
     record?.email ||
     translate("users.detail.unnamed", { ns: "app" }, "Unnamed user");
-  const roleLabels =
-    record?.roles?.map((role) =>
-      resolveTranslatableText(role.title || role.name, { ns: "starter" })
-    ) ?? [];
+  const roles = record?.roles ?? [];
   const detailContext = useAIPageElementHandle({
     id: `users-detail-${id ?? "current"}`,
     title: `${translate(
@@ -55,7 +56,10 @@ export const UserShow = () => {
         username: record?.username,
         email: record?.email,
         phone: record?.phone,
-        roles: roleLabels,
+        roles: roles.map((role) => ({
+          name: role.name,
+          title: resolveRoleLabel(role),
+        })),
         createdAt: record?.createdAt,
         updatedAt: record?.updatedAt,
       },
@@ -71,96 +75,183 @@ export const UserShow = () => {
       : "-";
 
   return (
-    <ShowView title={displayName}>
-      <Card ref={detailContext.ref} className="max-w-4xl">
-        <CardHeader>
-          <CardTitle>{displayName}</CardTitle>
-          <CardDescription>ID: {record?.id ?? "-"}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-5">
-          <DetailSection
-            title={translate(
-              "users.detail.identity",
-              { ns: "app" },
-              "Identity"
-            )}
-            items={[
-              [
-                translate("users.fields.nickname", { ns: "app" }, "Nickname"),
-                record?.nickname || "-",
-              ],
-              [
-                translate("users.fields.username", { ns: "app" }, "Username"),
-                record?.username || "-",
-              ],
-            ]}
-          />
-          <Separator />
-          <DetailSection
-            title={translate("users.detail.contact", { ns: "app" }, "Contact")}
-            items={[
-              [
-                translate("users.fields.email", { ns: "app" }, "Email"),
-                record?.email || "-",
-              ],
-              [
-                translate("users.fields.phone", { ns: "app" }, "Phone"),
-                record?.phone || "-",
-              ],
-            ]}
-          />
-          <Separator />
-          <section className="space-y-3">
-            <h3 className="text-sm font-medium">
-              {translate("users.detail.access", { ns: "app" }, "Access")}
-            </h3>
-            <div className="flex flex-wrap gap-2">
-              {roleLabels.length ? (
-                roleLabels.map((role, index) => (
-                  <Badge key={`${role}-${index}`} variant="secondary">
-                    {role}
-                  </Badge>
-                ))
-              ) : (
-                <span className="text-sm text-muted-foreground">
-                  {translate(
+    <RouteDrawer
+        title={
+          query.isLoading && !record ? (
+            <Skeleton className="h-6 w-40" />
+          ) : (
+            displayName
+          )
+        }
+        description={translate(
+          "users.drawer.show.description",
+          { ns: "app" },
+          "Review this user's identity, contact information, and roles."
+        )}
+        closeLabel={translate("buttons.close", "Close")}
+        closeTo={userRoutes.list}
+        nested={nestedDrawer}
+        actions={
+          record ? (
+            <>
+              <RefreshButton
+                resource="users"
+                recordItemId={record.id}
+                variant="outline"
+                size="icon-sm"
+                aria-label={translate("buttons.refresh", "Refresh")}
+                title={translate("buttons.refresh", "Refresh")}
+              >
+                <RotateCw />
+              </RefreshButton>
+              <EditButton
+                resource="users"
+                recordItemId={record.id}
+                variant="outline"
+                size="icon-sm"
+                aria-label={translate(
+                  "users.actions.edit",
+                  { ns: "app" },
+                  "Edit user"
+                )}
+                title={translate(
+                  "users.actions.edit",
+                  { ns: "app" },
+                  "Edit user"
+                )}
+                onClick={() => navigate("edit")}
+              >
+                <Pencil />
+              </EditButton>
+            </>
+          ) : null
+        }
+      >
+        <div
+          ref={detailContext.ref}
+          className="min-h-0 flex-1 overflow-y-auto px-5 py-5"
+        >
+          {query.isLoading ? (
+            <LoadingState className="min-h-64" />
+          ) : query.isError ? (
+            <Alert variant="destructive">
+              <AlertTitle>
+                {translate(
+                  "users.detail.loadError.title",
+                  { ns: "app" },
+                  "Unable to load user"
+                )}
+              </AlertTitle>
+              <AlertDescription>
+                {translate(
+                  "users.detail.loadError.description",
+                  { ns: "app" },
+                  "The user may no longer exist, or you may not have permission to view it."
+                )}
+              </AlertDescription>
+            </Alert>
+          ) : (
+            <div className="space-y-5">
+              <DetailSection
+                title={translate(
+                  "users.detail.identity",
+                  { ns: "app" },
+                  "Identity"
+                )}
+                items={[
+                  [
+                    translate("users.fields.id", { ns: "app" }, "ID"),
+                    record?.id ?? "-",
+                  ],
+                  [
+                    translate(
+                      "users.fields.nickname",
+                      { ns: "app" },
+                      "Nickname"
+                    ),
+                    record?.nickname || "-",
+                  ],
+                  [
+                    translate(
+                      "users.fields.username",
+                      { ns: "app" },
+                      "Username"
+                    ),
+                    record?.username || "-",
+                  ],
+                ]}
+              />
+
+              <Separator />
+
+              <DetailSection
+                title={translate(
+                  "users.detail.contact",
+                  { ns: "app" },
+                  "Contact"
+                )}
+                items={[
+                  [
+                    translate("users.fields.email", { ns: "app" }, "Email"),
+                    record?.email || "-",
+                  ],
+                  [
+                    translate("users.fields.phone", { ns: "app" }, "Phone"),
+                    record?.phone || "-",
+                  ],
+                ]}
+              />
+
+              <Separator />
+
+              <section className="space-y-3">
+                <h3 className="text-sm font-medium">
+                  {translate("users.detail.access", { ns: "app" }, "Access")}
+                </h3>
+                <RoleBadges
+                  roles={roles}
+                  onSelect={(role) =>
+                    id ? navigate(getUserRolePath(id, role.name)) : undefined
+                  }
+                  empty={translate(
                     "users.detail.noRoles",
                     { ns: "app" },
                     "No assigned roles"
                   )}
-                </span>
-              )}
-            </div>
-          </section>
-          <Separator />
-          <DetailSection
-            title={translate(
-              "users.detail.timestamps",
-              { ns: "app" },
-              "Timestamps"
-            )}
-            items={[
-              [
-                translate(
-                  "users.fields.createdAt",
-                  { ns: "app" },
-                  "Created at"
-                ),
-                formatDate(record?.createdAt),
-              ],
-              [
-                translate(
-                  "users.fields.updatedAt",
+                />
+              </section>
+
+              <Separator />
+
+              <DetailSection
+                title={translate(
+                  "users.detail.timestamps",
                   { ns: "app" },
-                  "Updated at"
-                ),
-                formatDate(record?.updatedAt),
-              ],
-            ]}
-          />
-        </CardContent>
-      </Card>
-    </ShowView>
+                  "Timestamps"
+                )}
+                items={[
+                  [
+                    translate(
+                      "users.fields.createdAt",
+                      { ns: "app" },
+                      "Created at"
+                    ),
+                    formatDate(record?.createdAt),
+                  ],
+                  [
+                    translate(
+                      "users.fields.updatedAt",
+                      { ns: "app" },
+                      "Updated at"
+                    ),
+                    formatDate(record?.updatedAt),
+                  ],
+                ]}
+              />
+            </div>
+          )}
+        </div>
+    </RouteDrawer>
   );
 };
 
@@ -178,7 +269,7 @@ function DetailSection({
         {items.map(([label, value]) => (
           <div key={label} className="space-y-1">
             <dt className="text-xs text-muted-foreground">{label}</dt>
-            <dd className="text-sm font-medium">{value}</dd>
+            <dd className="text-sm font-medium break-words">{value}</dd>
           </div>
         ))}
       </dl>

package/src/pages/users/types.ts

@@ -18,3 +18,16 @@ export type UserFormValues = {
   phone: string;
   password?: string;
 };
+
+export type RoleRecord = Role & {
+  id?: string | number;
+  description?: string;
+  default?: boolean;
+  hidden?: boolean;
+  allowConfigure?: boolean;
+  strategy?: {
+    actions?: string[];
+  };
+  createdAt?: string;
+  updatedAt?: string;
+};

package/src/providers/i18n/index.ts

@@ -0,0 +1,3 @@
+export * from "./i18n-provider";
+export * from "./locale-store";
+export * from "./runtime";

package/{registry/nocobase-i18n → src/providers/i18n}/runtime.ts

@@ -3,6 +3,7 @@ import { createInstance, type TOptions } from "i18next";
 import {
   getTranslationResources,
   registerTranslationResources,
+  setTranslationResolver,
   subscribeTranslationResources,
   type TranslationOptions,
 } from "@/lib/i18n";
@@ -14,15 +15,23 @@ import {
   getLocaleLabel,
   registerLocale,
   resolveSupportedLocale,
+  setEnabledLocales,
 } from "./locale-store";
-import enUS from "./locales/en-US";
-import zhCN from "./locales/zh-CN";
 
 export type LocaleResources = Record<
   string,
   Record<string, string | number | boolean>
 >;
 
+export type LocaleSystemSettings = {
+  appLang?: string | null;
+  enabledLanguages?: string[] | null;
+};
+
+type LocalePersistence = (locale: string) => void | Promise<void>;
+
+let localePersistence: LocalePersistence | undefined;
+
 export const i18n = createInstance();
 
 void i18n.init({
@@ -36,10 +45,6 @@ void i18n.init({
   interpolation: {
     escapeValue: false,
   },
-  resources: {
-    "en-US": enUS,
-    "zh-CN": zhCN,
-  },
 });
 
 function addLocaleResources(namespace: string, resources: LocaleResources) {
@@ -56,7 +61,6 @@ function addLocaleResources(namespace: string, resources: LocaleResources) {
 getTranslationResources().forEach(([namespace, resources]) =>
   addLocaleResources(namespace, resources)
 );
-
 subscribeTranslationResources(addLocaleResources);
 
 export function getCurrentLocale() {
@@ -94,18 +98,60 @@ export function applyDocumentLocale(locale = getCurrentLocale()) {
   document.documentElement.dir = direction;
 }
 
+function resolveSystemLocale(settings?: LocaleSystemSettings) {
+  const enabledLanguages = Array.isArray(settings?.enabledLanguages)
+    ? settings.enabledLanguages.filter(Boolean)
+    : [];
+  const storedLocale = nocobaseClient.getStoredLocale();
+
+  if (
+    storedLocale &&
+    (!enabledLanguages.length || enabledLanguages.includes(storedLocale))
+  ) {
+    return resolveSupportedLocale(storedLocale);
+  }
+
+  const defaultLocale =
+    settings?.appLang || enabledLanguages[0] || DEFAULT_LOCALE;
+  return resolveSupportedLocale(defaultLocale);
+}
+
+export async function applySystemLocale(settings?: LocaleSystemSettings) {
+  const enabledLanguages = Array.isArray(settings?.enabledLanguages)
+    ? settings.enabledLanguages.filter(Boolean)
+    : [];
+  if (enabledLanguages.length) setEnabledLocales(enabledLanguages);
+
+  const storedLocale = nocobaseClient.getStoredLocale();
+  if (
+    storedLocale &&
+    enabledLanguages.length &&
+    !enabledLanguages.includes(storedLocale)
+  ) {
+    nocobaseClient.setLocale(null);
+  }
+
+  const locale = resolveSystemLocale(settings);
+  nocobaseClient.setRuntimeLocale(locale);
+  await i18n.changeLanguage(locale);
+  applyDocumentLocale(locale);
+  return locale;
+}
+
+export function setLocalePersistence(persistence?: LocalePersistence) {
+  localePersistence = persistence;
+  return () => {
+    if (localePersistence === persistence) localePersistence = undefined;
+  };
+}
+
 export async function changeLocale(locale: string) {
   const nextLocale = resolveSupportedLocale(locale);
 
-  if (nocobaseClient.getToken()) {
-    try {
-      await nocobaseClient.action("users", "updateLang", {
-        method: "POST",
-        body: { appLang: nextLocale },
-      });
-    } catch (error) {
-      console.warn("Unable to persist the NocoBase language preference", error);
-    }
+  try {
+    await localePersistence?.(nextLocale);
+  } catch (error) {
+    console.warn("Unable to persist the language preference", error);
   }
 
   nocobaseClient.setLocale(nextLocale);
@@ -115,4 +161,5 @@ export async function changeLocale(locale: string) {
   if (typeof window !== "undefined") window.location.reload();
 }
 
+setTranslationResolver(translate);
 applyDocumentLocale();

package/src/providers/system-settings/context.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from "react";
+
+export type SystemSettings = Record<string, unknown> & {
+  appLang?: string | null;
+  enabledLanguages?: string[] | null;
+};
+
+export type SystemSettingsContextValue = {
+  settings?: SystemSettings;
+  error?: Error;
+  loading: boolean;
+  refresh: () => Promise<SystemSettings | undefined>;
+};
+
+export const SystemSettingsContext =
+  createContext<SystemSettingsContextValue | null>(null);
+
+export function useSystemSettings() {
+  const value = useContext(SystemSettingsContext);
+  if (!value) {
+    throw new Error(
+      "useSystemSettings must be used inside SystemSettingsProvider"
+    );
+  }
+  return value;
+}

package/src/providers/system-settings/index.ts

@@ -0,0 +1,2 @@
+export * from "./context";
+export * from "./provider";

package/src/providers/system-settings/provider.tsx

@@ -0,0 +1,94 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from "react";
+
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import { applySystemLocale } from "../i18n";
+import {
+  SystemSettingsContext,
+  type SystemSettings,
+  type SystemSettingsContextValue,
+} from "./context";
+
+let cachedSettings: SystemSettings | undefined;
+let settingsRequest: Promise<SystemSettings> | undefined;
+
+function requestSystemSettings(force = false) {
+  if (!force && cachedSettings) return Promise.resolve(cachedSettings);
+  if (!force && settingsRequest) return settingsRequest;
+
+  const request = nocobaseClient
+    .action<SystemSettings>("systemSettings", "get", {
+      method: "GET",
+      includeRole: false,
+      withAclMeta: false,
+    })
+    .then((settings) => {
+      cachedSettings = settings;
+      return settings;
+    });
+
+  settingsRequest = request;
+  const clearRequest = () => {
+    if (settingsRequest === request) settingsRequest = undefined;
+  };
+  void request.then(clearRequest, clearRequest);
+  return request;
+}
+
+export function SystemSettingsProvider({ children }: PropsWithChildren) {
+  const [settings, setSettings] = useState(cachedSettings);
+  const [error, setError] = useState<Error>();
+  const [ready, setReady] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async (force = false) => {
+    setLoading(true);
+    try {
+      const nextSettings = await requestSystemSettings(force);
+      await applySystemLocale(nextSettings);
+      setSettings(nextSettings);
+      setError(undefined);
+      return nextSettings;
+    } catch (reason) {
+      const nextError =
+        reason instanceof Error
+          ? reason
+          : new Error("Unable to load system settings");
+      console.warn("Unable to load NocoBase system settings", reason);
+      setError(nextError);
+      await applySystemLocale();
+      return undefined;
+    } finally {
+      setLoading(false);
+      setReady(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const value = useMemo<SystemSettingsContextValue>(
+    () => ({
+      settings,
+      error,
+      loading,
+      refresh: () => load(true),
+    }),
+    [error, load, loading, settings]
+  );
+
+  if (!ready) return <LoadingState className="min-h-svh" />;
+
+  return (
+    <SystemSettingsContext.Provider value={value}>
+      {children}
+    </SystemSettingsContext.Provider>
+  );
+}

package/src/extensions/nocobase-acl/README.md

@@ -1,19 +0,0 @@
-# NocoBase ACL UI
-
-Reusable ACL composition components for the NocoBase Refine starter.
-
-After installation, import the components from `@/extensions/nocobase-acl`.
-
-- `AclPage` combines page-level permissions.
-- `AclRegion` hides or replaces individual data regions.
-- `AclField` applies NocoBase field whitelists.
-- `RoleSwitcher` can be placed in any application surface. It supports
-  normal roles, Anonymous when enabled, and Full permissions through the
-  `__union__` role when the system role mode allows it.
-
-Mark non-collection resources with `meta.acl.type = "authenticated"`, or use
-the `collection`, `snippet`, and `route` ACL metadata variants when the resource
-should participate in NocoBase permission checks.
-
-The underlying `accessControlProvider`, `roles:check` cache, record permissions,
-and Refine integration are provided by the compatible Starter.