@nocobase/portal-template-default 1.0.1 → 1.0.3

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;

package/src/pages/users/create.tsx

@@ -0,0 +1,98 @@
+import { type HttpError, useTranslate } from "@refinedev/core";
+import { useForm } from "@refinedev/react-hook-form";
+import { useMemo } from "react";
+import { useNavigate } from "react-router";
+
+import { CreateView } from "@/components/resources/views/create-view";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { useAIForm, type AIFormField } from "@/extensions/nocobase-ai";
+import {
+  applyAIUserFormValues,
+  getAIUserFormFields,
+  getAIUserFormValues,
+} from "./form-context";
+import { UserFormFields } from "./form-fields";
+import type { UserFormValues, UserRecord } from "./types";
+
+export const UserCreate = () => {
+  const translate = useTranslate();
+  const navigate = useNavigate();
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm<UserRecord, HttpError, UserFormValues>({
+    refineCoreProps: {
+      redirect: "list",
+    },
+    defaultValues: {
+      nickname: "",
+      username: "",
+      email: "",
+      phone: "",
+      password: "",
+    },
+  });
+
+  const aiFields = useMemo<AIFormField[]>(
+    () => getAIUserFormFields(translate),
+    [translate]
+  );
+  const aiFormRef = useAIForm({
+    id: "users-create-form",
+    title: translate("users.ai.createForm", { ns: "app" }, "Create user form"),
+    fields: aiFields,
+    getValues: () => getAIUserFormValues(form.getValues()),
+    setValues: (values) => applyAIUserFormValues(form, values),
+  });
+
+  return (
+    <CreateView>
+      <Card className="max-w-3xl">
+        <CardContent>
+          <Form {...form}>
+            <form
+              ref={aiFormRef}
+              onSubmit={form.handleSubmit((values) => onFinish(values))}
+              className="resource-form"
+            >
+              <UserFormFields
+                form={form}
+                includePassword
+                translate={translate}
+              />
+
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="submit"
+                  {...form.saveButtonProps}
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting
+                    ? translate(
+                        "users.form.create.submitting",
+                        { ns: "app" },
+                        "Creating..."
+                      )
+                    : translate(
+                        "users.form.create.submit",
+                        { ns: "app" },
+                        "Create user"
+                      )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => navigate(-1)}
+                >
+                  {translate("users.form.cancel", { ns: "app" }, "Cancel")}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </CreateView>
+  );
+};

package/src/pages/users/edit.tsx

@@ -0,0 +1,92 @@
+import {
+  type HttpError,
+  useResourceParams,
+  useTranslate,
+} from "@refinedev/core";
+import { useForm } from "@refinedev/react-hook-form";
+import { useMemo } from "react";
+import { useNavigate } from "react-router";
+
+import { EditView } from "@/components/resources/views/edit-view";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { useAIForm, type AIFormField } from "@/extensions/nocobase-ai";
+import {
+  applyAIUserFormValues,
+  getAIUserFormFields,
+  getAIUserFormValues,
+} from "./form-context";
+import { UserFormFields } from "./form-fields";
+import type { UserFormValues, UserRecord } from "./types";
+
+export const UserEdit = () => {
+  const translate = useTranslate();
+  const navigate = useNavigate();
+  const { id } = useResourceParams();
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm<UserRecord, HttpError, UserFormValues>({
+    refineCoreProps: {
+      redirect: "list",
+    },
+  });
+
+  const aiFields = useMemo<AIFormField[]>(
+    () => getAIUserFormFields(translate),
+    [translate]
+  );
+  const aiFormRef = useAIForm({
+    id: `users-edit-form-${id ?? "current"}`,
+    title: translate("users.ai.editForm", { ns: "app" }, "Edit user form"),
+    fields: aiFields,
+    getValues: () => getAIUserFormValues(form.getValues()),
+    setValues: (values) => applyAIUserFormValues(form, values),
+  });
+
+  return (
+    <EditView>
+      <Card className="max-w-3xl">
+        <CardContent>
+          <Form {...form}>
+            <form
+              ref={aiFormRef}
+              onSubmit={form.handleSubmit((values) => onFinish(values))}
+              className="resource-form"
+            >
+              <UserFormFields form={form} translate={translate} />
+
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="submit"
+                  {...form.saveButtonProps}
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting
+                    ? translate(
+                        "users.form.edit.submitting",
+                        { ns: "app" },
+                        "Saving..."
+                      )
+                    : translate(
+                        "users.form.edit.submit",
+                        { ns: "app" },
+                        "Save changes"
+                      )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => navigate(-1)}
+                >
+                  {translate("users.form.cancel", { ns: "app" }, "Cancel")}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </EditView>
+  );
+};

package/src/pages/users/form-context.ts

@@ -0,0 +1,57 @@
+import type { useTranslate } from "@refinedev/core";
+import type { UseFormReturn } from "react-hook-form";
+
+import { applyReactHookFormValues } from "@/extensions/nocobase-ai/adapters/react-hook-form";
+import type { UserFormValues } from "./types";
+
+type Translate = ReturnType<typeof useTranslate>;
+
+const AI_EDITABLE_FIELDS = ["nickname", "username", "email", "phone"] as const;
+
+export function getAIUserFormValues(values: UserFormValues) {
+  return Object.fromEntries(
+    AI_EDITABLE_FIELDS.map((name) => [name, values[name] ?? ""])
+  );
+}
+
+export function applyAIUserFormValues(
+  form: Pick<UseFormReturn<UserFormValues>, "setValue">,
+  values: Record<string, unknown>
+) {
+  applyReactHookFormValues(
+    form,
+    Object.fromEntries(
+      Object.entries(values).filter(([name]) =>
+        AI_EDITABLE_FIELDS.includes(name as (typeof AI_EDITABLE_FIELDS)[number])
+      )
+    )
+  );
+}
+
+export function getAIUserFormFields(translate: Translate) {
+  return [
+    {
+      name: "nickname",
+      title: translate("users.fields.nickname", { ns: "app" }, "Nickname"),
+      type: "string",
+    },
+    {
+      name: "username",
+      title: translate("users.fields.username", { ns: "app" }, "Username"),
+      type: "string",
+      required: true,
+    },
+    {
+      name: "email",
+      title: translate("users.fields.email", { ns: "app" }, "Email"),
+      type: "email",
+      required: true,
+    },
+    {
+      name: "phone",
+      title: translate("users.fields.phone", { ns: "app" }, "Phone"),
+      type: "string",
+      required: true,
+    },
+  ];
+}

package/src/pages/users/form-fields.tsx

@@ -0,0 +1,211 @@
+import { type useTranslate } from "@refinedev/core";
+import type { UseFormReturn } from "react-hook-form";
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import type { UserFormValues } from "./types";
+
+type Translate = ReturnType<typeof useTranslate>;
+
+export function UserFormFields({
+  form,
+  includePassword,
+  translate,
+}: {
+  form: UseFormReturn<UserFormValues>;
+  includePassword?: boolean;
+  translate: Translate;
+}) {
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="nickname"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.nickname", { ns: "app" }, "Nickname")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  placeholder={translate(
+                    "users.form.nickname.placeholder",
+                    { ns: "app" },
+                    "Enter a display name"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="username"
+        rules={{
+          required: translate(
+            "users.validation.username",
+            { ns: "app" },
+            "Username is required"
+          ),
+        }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.username", { ns: "app" }, "Username")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  autoComplete="username"
+                  placeholder={translate(
+                    "users.form.username.placeholder",
+                    { ns: "app" },
+                    "Enter a unique username"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="email"
+        rules={{
+          required: translate(
+            "users.validation.email",
+            { ns: "app" },
+            "Email is required"
+          ),
+          pattern: {
+            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+            message: translate(
+              "users.validation.emailFormat",
+              { ns: "app" },
+              "Enter a valid email address"
+            ),
+          },
+        }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.email", { ns: "app" }, "Email")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  type="email"
+                  autoComplete="email"
+                  placeholder={translate(
+                    "users.form.email.placeholder",
+                    { ns: "app" },
+                    "Enter an email address"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="phone"
+        rules={{
+          required: translate(
+            "users.validation.phone",
+            { ns: "app" },
+            "Phone is required"
+          ),
+        }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.phone", { ns: "app" }, "Phone")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  type="tel"
+                  autoComplete="tel"
+                  placeholder={translate(
+                    "users.form.phone.placeholder",
+                    { ns: "app" },
+                    "Enter a phone number"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      {includePassword ? (
+        <FormField
+          control={form.control}
+          name="password"
+          rules={{
+            required: translate(
+              "users.validation.password",
+              { ns: "app" },
+              "Password is required"
+            ),
+          }}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {translate("users.fields.password", { ns: "app" }, "Password")}
+              </FormLabel>
+              <FormControl
+                render={
+                  <Input
+                    {...field}
+                    value={field.value ?? ""}
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder={translate(
+                      "users.form.password.placeholder",
+                      { ns: "app" },
+                      "Set an initial password"
+                    )}
+                  />
+                }
+              />
+              <FormDescription>
+                {translate(
+                  "users.form.password.aiNotice",
+                  { ns: "app" },
+                  "Passwords are never included in AI page context or Form filler."
+                )}
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      ) : null}
+    </>
+  );
+}