@nocobase/portal-template-default 1.0.3 → 1.0.4

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.

package/src/extensions/nocobase-acl/components/acl-boundary.tsx

@@ -1,106 +0,0 @@
-import type { BaseKey } from "@refinedev/core";
-import type { PropsWithChildren, ReactNode } from "react";
-
-import { AccessDenied } from "@/components/access-control/access-denied";
-import {
-  canAccessWithSnapshot,
-  useAclSnapshot,
-} from "@/lib/nocobase/acl";
-
-export type AclPermission = {
-  resource: string;
-  action: string;
-  id?: BaseKey;
-  field?: string;
-  dataSourceKey?: string;
-};
-
-export type AclPageProps = PropsWithChildren<{
-  anyOf?: AclPermission[];
-  allOf?: AclPermission[];
-  fallback?: ReactNode;
-}>;
-
-export type AclRegionProps = PropsWithChildren<
-  Omit<AclPermission, "field"> & {
-    fallback?: "hidden" | "forbidden" | ReactNode;
-  }
->;
-
-export type AclFieldProps = PropsWithChildren<{
-  resource: string;
-  action: string;
-  field: string;
-  dataSourceKey?: string;
-  fallback?: ReactNode;
-}>;
-
-const canAccess = (
-  snapshot: ReturnType<typeof useAclSnapshot>,
-  permission: AclPermission
-) =>
-  canAccessWithSnapshot(snapshot, {
-    resource: permission.resource,
-    action: permission.action,
-    params: {
-      id: permission.id,
-      field: permission.field,
-      dataSourceKey: permission.dataSourceKey,
-    },
-  });
-
-export function AclPage({
-  children,
-  anyOf,
-  allOf,
-  fallback = <AccessDenied />,
-}: AclPageProps) {
-  const snapshot = useAclSnapshot();
-  const anyAllowed = !anyOf?.length || anyOf.some((item) => canAccess(snapshot, item));
-  const allAllowed = !allOf?.length || allOf.every((item) => canAccess(snapshot, item));
-
-  return anyAllowed && allAllowed ? children : fallback;
-}
-
-export function AclRegion({
-  children,
-  resource,
-  action,
-  id,
-  dataSourceKey,
-  fallback = "hidden",
-}: AclRegionProps) {
-  const snapshot = useAclSnapshot();
-  const allowed = canAccess(snapshot, {
-    resource,
-    action,
-    id,
-    dataSourceKey,
-  });
-
-  if (allowed) return children;
-  if (fallback === "hidden") return null;
-  if (fallback === "forbidden") {
-    return <AccessDenied className="min-h-40" />;
-  }
-  return fallback;
-}
-
-export function AclField({
-  children,
-  resource,
-  action,
-  field,
-  dataSourceKey,
-  fallback = null,
-}: AclFieldProps) {
-  const snapshot = useAclSnapshot();
-  return canAccess(snapshot, {
-    resource,
-    action,
-    field,
-    dataSourceKey,
-  })
-    ? children
-    : fallback;
-}

package/src/extensions/nocobase-acl/components/index.ts

@@ -1,3 +0,0 @@
-export * from "./acl-boundary";
-export * from "./role-options";
-export * from "./role-switcher";

package/src/extensions/nocobase-acl/components/role-options.ts

@@ -1,36 +0,0 @@
-import type { Role, RoleMode } from "@/lib/nocobase/acl";
-import { resolveTranslatableText } from "@/lib/i18n";
-
-export const UNION_ROLE = "__union__";
-export const ANONYMOUS_ROLE = "anonymous";
-
-export function resolveRoleTitle(role?: Role) {
-  return resolveTranslatableText(role?.title || role?.name || "Role", {
-    ns: "starter",
-  });
-}
-
-export function getRoleOptions({
-  roles,
-  roleMode,
-  allowAnonymous = false,
-}: {
-  roles: Role[];
-  roleMode?: RoleMode;
-  allowAnonymous?: boolean;
-}) {
-  if (roleMode === "only-use-union") {
-    return [{ name: UNION_ROLE, title: "Full permissions" }];
-  }
-
-  const options = roles.filter(
-    (role) => role.name !== UNION_ROLE && role.name !== ANONYMOUS_ROLE
-  );
-  if (allowAnonymous) {
-    options.push({ name: ANONYMOUS_ROLE, title: "Anonymous" });
-  }
-  if (roleMode === "allow-use-union") {
-    options.unshift({ name: UNION_ROLE, title: "Full permissions" });
-  }
-  return options;
-}

package/src/extensions/nocobase-acl/components/role-switcher.tsx

@@ -1,135 +0,0 @@
-import { useGetIdentity } from "@refinedev/core";
-import { Loader2, ShieldCheck } from "lucide-react";
-import { useMemo, useState, type ReactNode } from "react";
-
-import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  switchRole,
-  useAclSnapshot,
-  type AclIdentity,
-  type Role,
-} from "@/lib/nocobase/acl";
-import { cn } from "@/lib/utils";
-import { getRoleOptions, resolveRoleTitle, UNION_ROLE } from "./role-options";
-
-export type RoleSwitcherProps = {
-  className?: string;
-  triggerClassName?: string;
-  label?: ReactNode | false;
-  showWhenUnavailable?: boolean;
-};
-
-export function RoleSwitcher({
-  className,
-  triggerClassName,
-  label = "Switch role",
-  showWhenUnavailable = false,
-}: RoleSwitcherProps) {
-  const { data: identity, isLoading } = useGetIdentity<AclIdentity>();
-  const acl = useAclSnapshot();
-  const [switching, setSwitching] = useState(false);
-  const [error, setError] = useState<string>();
-
-  const roles = useMemo(
-    () =>
-      getRoleOptions({
-        roles: identity?.roles ?? [],
-        roleMode: acl.data.roleMode,
-        allowAnonymous: acl.data.allowAnonymous,
-      }),
-    [acl.data.allowAnonymous, acl.data.roleMode, identity?.roles]
-  );
-
-  const currentRole = acl.data.role ?? roles[0]?.name;
-  const canSwitch = roles.length > 1 && acl.data.roleMode !== "only-use-union";
-
-  if (isLoading) {
-    return <Loader2 className="size-4 animate-spin text-muted-foreground" />;
-  }
-  if (!canSwitch && !showWhenUnavailable) return null;
-
-  if (!canSwitch) {
-    return (
-      <div className={cn("flex items-center gap-2 text-sm", className)}>
-        <ShieldCheck className="size-4 text-muted-foreground" />
-        <span className="text-muted-foreground">Current role</span>
-        <Badge variant="secondary">{getRoleTitle(roles, currentRole)}</Badge>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("space-y-2", className)}>
-      {label === false ? null : (
-        <p className="text-xs font-medium text-muted-foreground">{label}</p>
-      )}
-      <Select
-        value={currentRole}
-        disabled={switching}
-        onValueChange={(value) => {
-          if (!value || value === currentRole) return;
-          setSwitching(true);
-          setError(undefined);
-          void switchRole(value, { reloadAcl: false })
-            .then(() => window.location.reload())
-            .catch((reason) => {
-              setError(
-                reason instanceof Error
-                  ? reason.message
-                  : "Unable to switch role"
-              );
-              setSwitching(false);
-            });
-        }}
-      >
-        <SelectTrigger
-          className={cn("w-full min-w-52", triggerClassName)}
-          aria-label="Switch role"
-        >
-          {switching ? <Loader2 className="animate-spin" /> : <ShieldCheck />}
-          <SelectValue>{getRoleTitle(roles, currentRole)}</SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {roles.map((role, index) => (
-            <RoleOption
-              key={role.name}
-              role={role}
-              showSeparator={index === 1 && roles[0]?.name === UNION_ROLE}
-            />
-          ))}
-        </SelectContent>
-      </Select>
-      {error ? <p className="text-xs text-destructive">{error}</p> : null}
-    </div>
-  );
-}
-
-function RoleOption({
-  role,
-  showSeparator,
-}: {
-  role: Role;
-  showSeparator: boolean;
-}) {
-  return (
-    <>
-      {showSeparator ? <SelectSeparator /> : null}
-      <SelectItem value={role.name}>{resolveRoleTitle(role)}</SelectItem>
-    </>
-  );
-}
-
-function getRoleTitle(roles: Role[], roleName?: string) {
-  return resolveRoleTitle(
-    roles.find((role) => role.name === roleName) ??
-      (roleName ? { name: roleName } : undefined)
-  );
-}