@nocobase/portal-template-default 1.0.1 → 1.0.2

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

@@ -1,16 +1,13 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import {
-  useBack,
-  useResourceParams,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useBack, useResourceParams, useTranslate } from "@refinedev/core";
 import type { PropsWithChildren } from "react";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { RefreshButton } from "@/components/resources/buttons/refresh";
 import { ArrowLeftIcon } from "lucide-react";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 type EditViewProps = PropsWithChildren<{
   className?: string;
@@ -41,8 +38,7 @@ export const EditViewHeader = ({
   headerClassName,
 }: EditViewHeaderProps) => {
   const back = useBack();
-
-  const getUserFriendlyName = useUserFriendlyName();
+  const translate = useTranslate();
 
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
@@ -51,11 +47,19 @@ export const EditViewHeader = ({
 
   const resourceName = resource?.name ?? identifier;
 
-  const resourceTitle = getUserFriendlyName(
-    resource?.meta?.label ?? identifier ?? resource?.name,
-    "singular"
+  const resourceTitle = useResourceLabel(resource, "singular", identifier);
+  const title =
+    titleFromProps ??
+    translate(
+      "views.edit.title",
+      { resource: resourceTitle },
+      `Edit ${resourceTitle}`
+    );
+  const description = translate(
+    "views.edit.description",
+    { resource: resourceTitle.toLocaleLowerCase() },
+    `Update this ${resourceTitle.toLocaleLowerCase()} while NocoBase keeps the data consistent.`
   );
-  const title = titleFromProps ?? `Edit ${resourceTitle}`;
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
@@ -74,6 +78,7 @@ export const EditViewHeader = ({
             size="icon"
             className="mt-0.5 rounded-lg"
             onClick={back}
+            aria-label={translate("buttons.cancel", "Cancel")}
           >
             <ArrowLeftIcon className="h-4 w-4" />
           </Button>
@@ -81,10 +86,7 @@ export const EditViewHeader = ({
             <h2 className="text-3xl font-semibold tracking-[-0.035em]">
               {title}
             </h2>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Update this {resourceTitle.toLowerCase()} while NocoBase keeps
-              the data consistent.
-            </p>
+            <p className="mt-2 text-sm text-muted-foreground">{description}</p>
           </div>
         </div>
 

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

@@ -2,9 +2,11 @@
 
 import type { PropsWithChildren } from "react";
 
-import { useResourceParams, useUserFriendlyName } from "@refinedev/core";
+import { useResourceParams, useTranslate } from "@refinedev/core";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { CreateButton } from "@/components/resources/buttons/create";
+import { useResourceLabel } from "@/components/resources/resource-label";
+import { resolveTranslatableText, type TranslationOptions } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
 type ListViewProps = PropsWithChildren<{
@@ -35,22 +37,30 @@ export const ListViewHeader = ({
   wrapperClassName,
   headerClassName,
 }: ListHeaderProps) => {
-  const getUserFriendlyName = useUserFriendlyName();
-
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
   });
+  const translate = useTranslate();
   const resourceName = identifier ?? resource?.name;
 
   const isCreateButtonVisible = canCreate ?? !!resource?.create;
 
-  const title =
-    titleFromProps ??
-    getUserFriendlyName(
-      resource?.meta?.label ?? identifier ?? resource?.name,
-      "plural"
-    );
-  const description = resource?.meta?.description as string | undefined;
+  const resourceTitle = useResourceLabel(resource, "plural", identifier);
+  const title = titleFromProps ?? resourceTitle;
+  const meta = resource?.meta as
+    | {
+        description?: string;
+        descriptionI18nKey?: string;
+        i18nOptions?: TranslationOptions;
+      }
+    | undefined;
+  const description = meta?.descriptionI18nKey
+    ? translate(
+        meta.descriptionI18nKey,
+        meta.i18nOptions,
+        meta.description ?? meta.descriptionI18nKey
+      )
+    : resolveTranslatableText(meta?.description);
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>

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

@@ -3,25 +3,29 @@
 import type { PropsWithChildren } from "react";
 
 import { ArrowLeftIcon } from "lucide-react";
-import {
-  useBack,
-  useResourceParams,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useBack, useResourceParams, useTranslate } from "@refinedev/core";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { RefreshButton } from "@/components/resources/buttons/refresh";
 import { cn } from "@/lib/utils";
 import { EditButton } from "../buttons/edit";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 type ShowViewProps = PropsWithChildren<{
   className?: string;
+  resource?: string;
+  title?: string;
 }>;
 
-export function ShowView({ children, className }: ShowViewProps) {
+export function ShowView({
+  children,
+  className,
+  resource,
+  title,
+}: ShowViewProps) {
   return (
     <div className={cn("flex flex-col", "gap-6", className)}>
-      <ShowViewHeader />
+      <ShowViewHeader resource={resource} title={title} />
       {children}
     </div>
   );
@@ -41,8 +45,7 @@ export const ShowViewHeader = ({
   headerClassName,
 }: ShowViewHeaderProps) => {
   const back = useBack();
-
-  const getUserFriendlyName = useUserFriendlyName();
+  const translate = useTranslate();
 
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
@@ -51,12 +54,12 @@ export const ShowViewHeader = ({
 
   const resourceName = resource?.name ?? identifier;
 
-  const title =
-    titleFromProps ??
-    getUserFriendlyName(
-      resource?.meta?.label ?? identifier ?? resource?.name,
-      "singular"
-    );
+  const resourceTitle = useResourceLabel(resource, "singular", identifier);
+  const title = titleFromProps ?? resourceTitle;
+  const description = translate(
+    "views.show.description",
+    "Review the record and its NocoBase-managed data."
+  );
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
@@ -75,6 +78,7 @@ export const ShowViewHeader = ({
             size="icon"
             className="mt-0.5 rounded-lg"
             onClick={back}
+            aria-label={translate("buttons.cancel", "Cancel")}
           >
             <ArrowLeftIcon className="h-4 w-4" />
           </Button>
@@ -82,9 +86,7 @@ export const ShowViewHeader = ({
             <h2 className="text-3xl font-semibold tracking-[-0.035em]">
               {title}
             </h2>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Review the record and its NocoBase-managed data.
-            </p>
+            <p className="mt-2 text-sm text-muted-foreground">{description}</p>
           </div>
         </div>
 

package/src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 
+import "./locales";
 import App from "./App";
 
 const container = document.getElementById("root") as HTMLElement;
@@ -12,6 +13,4 @@ const root = createRoot(container);
 //   </React.StrictMode>
 // );
 
-root.render(
-  <App />
-);
+root.render(<App />);

package/src/lib/i18n.ts

@@ -0,0 +1,161 @@
+export type TranslationOptions = Record<string, unknown> & {
+  defaultValue?: string;
+  ns?: string | string[];
+};
+
+export type TranslationResolver = (
+  key: string,
+  options?: TranslationOptions,
+  defaultMessage?: string
+) => string;
+
+export type TranslationExpression = {
+  key: string;
+  options?: TranslationOptions;
+};
+
+export type TranslationResource = Record<string, string | number | boolean>;
+
+export type TranslationResourceBundle = Record<string, TranslationResource>;
+
+type TranslationResourceListener = (
+  namespace: string,
+  resources: TranslationResourceBundle
+) => void;
+
+let translationResolver: TranslationResolver | undefined;
+const translationResources = new Map<string, TranslationResourceBundle>();
+const translationResourceListeners = new Set<TranslationResourceListener>();
+
+const quotedValuePattern = `(?:"(?:\\\\.|[^"\\\\])*"|'(?:\\\\.|[^'\\\\])*')`;
+const translationExpressionPattern = new RegExp(
+  `^\\s*\\{\\{\\s*t\\(\\s*(${quotedValuePattern})\\s*(?:,\\s*(\\{[\\s\\S]*\\}))?\\s*\\)\\s*\\}\\}\\s*$`
+);
+
+function decodeQuotedValue(value: string) {
+  if (value.startsWith('"')) {
+    try {
+      return JSON.parse(value) as string;
+    } catch {
+      return value.slice(1, -1);
+    }
+  }
+
+  return value
+    .slice(1, -1)
+    .replace(/\\'/g, "'")
+    .replace(/\\"/g, '"')
+    .replace(/\\n/g, "\n")
+    .replace(/\\r/g, "\r")
+    .replace(/\\t/g, "\t")
+    .replace(/\\\\/g, "\\");
+}
+
+function parsePrimitive(value: string): unknown {
+  const normalized = value.trim();
+  if (normalized.startsWith('"') || normalized.startsWith("'")) {
+    return decodeQuotedValue(normalized);
+  }
+  if (normalized === "true") return true;
+  if (normalized === "false") return false;
+  if (normalized === "null") return null;
+  if (/^-?\d+(?:\.\d+)?$/.test(normalized)) return Number(normalized);
+  return undefined;
+}
+
+function parseOptions(source?: string): TranslationOptions | undefined {
+  if (!source) return undefined;
+
+  const options: TranslationOptions = {};
+  const propertyPattern = new RegExp(
+    `([A-Za-z_$][\\w$]*)\\s*:\\s*(${quotedValuePattern}|-?\\d+(?:\\.\\d+)?|true|false|null)`,
+    "g"
+  );
+
+  for (const match of source.matchAll(propertyPattern)) {
+    const value = parsePrimitive(match[2]);
+    if (typeof value !== "undefined") options[match[1]] = value;
+  }
+
+  const namespaceArray = source.match(/\bns\s*:\s*\[([^\]]*)\]/);
+  if (namespaceArray) {
+    const namespaces = [
+      ...namespaceArray[1].matchAll(new RegExp(quotedValuePattern, "g")),
+    ].map((match) => decodeQuotedValue(match[0]));
+    if (namespaces.length) options.ns = namespaces;
+  }
+
+  return Object.keys(options).length ? options : undefined;
+}
+
+export function parseTranslationExpression(
+  value: string
+): TranslationExpression | undefined {
+  const match = translationExpressionPattern.exec(value);
+  if (!match) return undefined;
+
+  return {
+    key: decodeQuotedValue(match[1]),
+    options: parseOptions(match[2]),
+  };
+}
+
+export function setTranslationResolver(resolver?: TranslationResolver) {
+  translationResolver = resolver;
+  return () => {
+    if (translationResolver === resolver) translationResolver = undefined;
+  };
+}
+
+export function registerTranslationResources(
+  namespace: string,
+  resources: TranslationResourceBundle
+) {
+  const current = translationResources.get(namespace) ?? {};
+  const merged = Object.fromEntries(
+    [...new Set([...Object.keys(current), ...Object.keys(resources)])].map(
+      (locale) => [
+        locale,
+        {
+          ...(current[locale] ?? {}),
+          ...(resources[locale] ?? {}),
+        },
+      ]
+    )
+  );
+
+  translationResources.set(namespace, merged);
+  translationResourceListeners.forEach((listener) =>
+    listener(namespace, resources)
+  );
+}
+
+export function getTranslationResources() {
+  return [...translationResources.entries()];
+}
+
+export function subscribeTranslationResources(
+  listener: TranslationResourceListener
+) {
+  translationResourceListeners.add(listener);
+  return () => translationResourceListeners.delete(listener);
+}
+
+export function resolveTranslatableText(
+  value: unknown,
+  options?: TranslationOptions
+): string {
+  if (typeof value !== "string") return value == null ? "" : String(value);
+
+  const expression = parseTranslationExpression(value);
+  if (!expression) {
+    return translationResolver && options
+      ? translationResolver(value, options, value)
+      : value;
+  }
+
+  const defaultMessage = expression.options?.defaultValue ?? expression.key;
+  return translationResolver
+    ? translationResolver(expression.key, expression.options, defaultMessage)
+    : defaultMessage;
+}

package/src/lib/nocobase/client.ts

@@ -2,6 +2,7 @@ import {
   API_ORIGIN,
   API_URL,
   NOCOBASE_AUTHENTICATOR,
+  NOCOBASE_LOCALE_KEY,
   NOCOBASE_ROLE_KEY,
   NOCOBASE_TOKEN_KEY,
 } from "@/providers/constants";
@@ -30,7 +31,7 @@ export type NocoBaseRequestOptions = {
   unwrap?: "data" | "deep-data" | "none";
 };
 
-const getClientLocale = () =>
+const getBrowserLocale = () =>
   typeof navigator === "undefined" ? undefined : navigator.language;
 
 const getClientTimezone = () => {
@@ -109,6 +110,22 @@ export class NocoBaseClient {
     else localStorage.removeItem(NOCOBASE_ROLE_KEY);
   }
 
+  getStoredLocale() {
+    return typeof localStorage === "undefined"
+      ? undefined
+      : localStorage.getItem(NOCOBASE_LOCALE_KEY) ?? undefined;
+  }
+
+  getLocale() {
+    return this.getStoredLocale() ?? getBrowserLocale();
+  }
+
+  setLocale(locale?: string | null) {
+    if (typeof localStorage === "undefined") return;
+    if (locale) localStorage.setItem(NOCOBASE_LOCALE_KEY, locale);
+    else localStorage.removeItem(NOCOBASE_LOCALE_KEY);
+  }
+
   buildUrl(endpoint: string, query?: Record<string, QueryValue>) {
     const base = `${this.apiUrl.replace(/\/$/, "")}/${endpoint.replace(
       /^\//,
@@ -149,7 +166,7 @@ export class NocoBaseClient {
     | "accept"
     | "body"
   > = {}) {
-    const locale = getClientLocale();
+    const locale = this.getLocale();
     const formData =
       typeof FormData !== "undefined" && body instanceof FormData;
     return {

package/src/locales/en-US.ts

@@ -0,0 +1,82 @@
+export const starter = {
+  "buttons.create": "Create",
+  "buttons.edit": "Edit",
+  "buttons.show": "View",
+  "buttons.delete": "Delete",
+  "buttons.refresh": "Refresh",
+  "buttons.cancel": "Cancel",
+  "buttons.confirm": "Are you sure?",
+  "views.create.title": "Create {{resource}}",
+  "views.create.description":
+    "Add a new {{resource}} to your NocoBase workspace.",
+  "views.edit.title": "Edit {{resource}}",
+  "views.edit.description":
+    "Update this {{resource}} while NocoBase keeps the data consistent.",
+  "views.show.description": "Review the record and its NocoBase-managed data.",
+  "table.empty.title": "No data to display",
+  "table.empty.description": "This table is empty for the time being.",
+  "table.pagination.total": "{{count}} row(s)",
+  "table.pagination.pageSize": "Rows per page",
+  "table.pagination.page": "Page {{current}} of {{total}}",
+  "table.pagination.first": "Go to first page",
+  "table.pagination.previous": "Go to previous page",
+  "table.pagination.next": "Go to next page",
+  "table.pagination.last": "Go to last page",
+  "notifications.success": "Success",
+  "notifications.createSuccess": "Successfully created {{resource}}",
+  "notifications.editSuccess": "Successfully updated {{resource}}",
+  "notifications.deleteSuccess": "Successfully deleted {{resource}}",
+  "users.users": "User",
+  Admin: "Admin",
+  Root: "Root",
+  Member: "Member",
+  Anonymous: "Anonymous",
+  "Full permissions": "Full permissions",
+} as const;
+
+export const app = {
+  "resources.users": "Users",
+  "resources.user": "User",
+  "resources.users.description":
+    "Manage the people who can sign in and work in this NocoBase application.",
+  "users.fields.id": "ID",
+  "users.fields.nickname": "Nickname",
+  "users.fields.username": "Username",
+  "users.fields.email": "Email",
+  "users.fields.phone": "Phone",
+  "users.fields.password": "Password",
+  "users.fields.roles": "Roles",
+  "users.fields.createdAt": "Created at",
+  "users.fields.updatedAt": "Updated at",
+  "users.fields.actions": "Actions",
+  "users.actions.view": "View user",
+  "users.actions.edit": "Edit user",
+  "users.actions.delete": "Delete user",
+  "users.form.create.submit": "Create user",
+  "users.form.create.submitting": "Creating...",
+  "users.form.edit.submit": "Save changes",
+  "users.form.edit.submitting": "Saving...",
+  "users.form.cancel": "Cancel",
+  "users.form.nickname.placeholder": "Enter a display name",
+  "users.form.username.placeholder": "Enter a unique username",
+  "users.form.email.placeholder": "Enter an email address",
+  "users.form.phone.placeholder": "Enter a phone number",
+  "users.form.password.placeholder": "Set an initial password",
+  "users.form.password.aiNotice":
+    "Passwords are never included in AI page context or Form filler.",
+  "users.validation.username": "Username is required",
+  "users.validation.email": "Email is required",
+  "users.validation.emailFormat": "Enter a valid email address",
+  "users.validation.phone": "Phone is required",
+  "users.validation.password": "Password is required",
+  "users.detail.identity": "Identity",
+  "users.detail.contact": "Contact",
+  "users.detail.access": "Access",
+  "users.detail.timestamps": "Timestamps",
+  "users.detail.noRoles": "No assigned roles",
+  "users.detail.unnamed": "Unnamed user",
+  "users.ai.table": "Users table",
+  "users.ai.detail": "User details",
+  "users.ai.createForm": "Create user form",
+  "users.ai.editForm": "Edit user form",
+} as const;

package/src/locales/index.ts

@@ -0,0 +1,13 @@
+import { registerTranslationResources } from "@/lib/i18n";
+import { app as enUSApp, starter as enUSStarter } from "./en-US";
+import { app as zhCNApp, starter as zhCNStarter } from "./zh-CN";
+
+registerTranslationResources("starter", {
+  "en-US": enUSStarter,
+  "zh-CN": zhCNStarter,
+});
+
+registerTranslationResources("app", {
+  "en-US": enUSApp,
+  "zh-CN": zhCNApp,
+});

package/src/locales/zh-CN.ts

@@ -0,0 +1,79 @@
+export const starter = {
+  "buttons.create": "新建",
+  "buttons.edit": "编辑",
+  "buttons.show": "查看",
+  "buttons.delete": "删除",
+  "buttons.refresh": "刷新",
+  "buttons.cancel": "取消",
+  "buttons.confirm": "确定要执行此操作吗？",
+  "views.create.title": "新建{{resource}}",
+  "views.create.description": "在 NocoBase 工作区中添加新的{{resource}}。",
+  "views.edit.title": "编辑{{resource}}",
+  "views.edit.description": "更新此{{resource}}，数据一致性由 NocoBase 保障。",
+  "views.show.description": "查看记录及其由 NocoBase 管理的数据。",
+  "table.empty.title": "暂无数据",
+  "table.empty.description": "当前表格中没有可显示的数据。",
+  "table.pagination.total": "共 {{count}} 条",
+  "table.pagination.pageSize": "每页行数",
+  "table.pagination.page": "第 {{current}} 页，共 {{total}} 页",
+  "table.pagination.first": "前往第一页",
+  "table.pagination.previous": "前往上一页",
+  "table.pagination.next": "前往下一页",
+  "table.pagination.last": "前往最后一页",
+  "notifications.success": "操作成功",
+  "notifications.createSuccess": "已成功创建{{resource}}",
+  "notifications.editSuccess": "已成功更新{{resource}}",
+  "notifications.deleteSuccess": "已成功删除{{resource}}",
+  "users.users": "用户",
+  Admin: "管理员",
+  Root: "超级管理员",
+  Member: "成员",
+  Anonymous: "匿名用户",
+  "Full permissions": "全部权限",
+} as const;
+
+export const app = {
+  "resources.users": "用户",
+  "resources.user": "用户",
+  "resources.users.description": "管理可以登录并使用此 NocoBase 应用的用户。",
+  "users.fields.id": "ID",
+  "users.fields.nickname": "昵称",
+  "users.fields.username": "用户名",
+  "users.fields.email": "邮箱",
+  "users.fields.phone": "手机号",
+  "users.fields.password": "密码",
+  "users.fields.roles": "角色",
+  "users.fields.createdAt": "创建时间",
+  "users.fields.updatedAt": "更新时间",
+  "users.fields.actions": "操作",
+  "users.actions.view": "查看用户",
+  "users.actions.edit": "编辑用户",
+  "users.actions.delete": "删除用户",
+  "users.form.create.submit": "创建用户",
+  "users.form.create.submitting": "正在创建...",
+  "users.form.edit.submit": "保存修改",
+  "users.form.edit.submitting": "正在保存...",
+  "users.form.cancel": "取消",
+  "users.form.nickname.placeholder": "输入显示名称",
+  "users.form.username.placeholder": "输入唯一用户名",
+  "users.form.email.placeholder": "输入邮箱地址",
+  "users.form.phone.placeholder": "输入手机号",
+  "users.form.password.placeholder": "设置初始密码",
+  "users.form.password.aiNotice":
+    "密码不会包含在 AI 页面上下文中，Form filler 也无法填写密码。",
+  "users.validation.username": "请输入用户名",
+  "users.validation.email": "请输入邮箱",
+  "users.validation.emailFormat": "请输入有效的邮箱地址",
+  "users.validation.phone": "请输入手机号",
+  "users.validation.password": "请输入密码",
+  "users.detail.identity": "身份信息",
+  "users.detail.contact": "联系方式",
+  "users.detail.access": "访问权限",
+  "users.detail.timestamps": "时间信息",
+  "users.detail.noRoles": "尚未分配角色",
+  "users.detail.unnamed": "未命名用户",
+  "users.ai.table": "用户表格",
+  "users.ai.detail": "用户详情",
+  "users.ai.createForm": "新建用户表单",
+  "users.ai.editForm": "编辑用户表单",
+} as const;