@nocobase/portal-template-default 1.0.0 → 1.0.2

package/src/lib/nocobase/client.ts

@@ -0,0 +1,279 @@
+import {
+  API_ORIGIN,
+  API_URL,
+  NOCOBASE_AUTHENTICATOR,
+  NOCOBASE_LOCALE_KEY,
+  NOCOBASE_ROLE_KEY,
+  NOCOBASE_TOKEN_KEY,
+} from "@/providers/constants";
+import { getNocoBaseErrorMessage, NocoBaseHttpError } from "./error";
+
+type QueryValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | Array<string | number | boolean>;
+
+export type NocoBaseRequestOptions = {
+  method?: "GET" | "POST" | "PUT" | "DELETE";
+  query?: Record<string, QueryValue>;
+  body?: unknown;
+  signal?: AbortSignal;
+  token?: string;
+  role?: string;
+  includeRole?: boolean;
+  includeAuthenticator?: boolean;
+  withAclMeta?: boolean;
+  headers?: Record<string, string>;
+  accept?: "json" | "stream";
+  unwrap?: "data" | "deep-data" | "none";
+};
+
+const getBrowserLocale = () =>
+  typeof navigator === "undefined" ? undefined : navigator.language;
+
+const getClientTimezone = () => {
+  const offsetMinutes = -new Date().getTimezoneOffset();
+  const sign = offsetMinutes >= 0 ? "+" : "-";
+  const absoluteMinutes = Math.abs(offsetMinutes);
+  const hours = String(Math.floor(absoluteMinutes / 60)).padStart(2, "0");
+  const minutes = String(absoluteMinutes % 60).padStart(2, "0");
+  return `${sign}${hours}:${minutes}`;
+};
+
+const unwrapPayload = (
+  payload: unknown,
+  mode: NocoBaseRequestOptions["unwrap"]
+) => {
+  if (mode === "none") return payload;
+  if (!payload || typeof payload !== "object") return payload;
+  const data = (payload as { data?: unknown }).data;
+  if (mode === "deep-data" && data && typeof data === "object") {
+    return (data as { data?: unknown }).data ?? data;
+  }
+  return data ?? payload;
+};
+
+export class NocoBaseClient {
+  private readonly apiOrigin?: string;
+
+  constructor(
+    private readonly apiUrl = API_URL,
+    apiOrigin = getUrlOrigin(apiUrl) ?? API_ORIGIN
+  ) {
+    this.apiOrigin = apiOrigin;
+  }
+
+  getApiUrl() {
+    return this.apiUrl;
+  }
+
+  resolveUrl(value: string) {
+    if (!value || /^[a-z][a-z\d+.-]*:/i.test(value)) return value;
+    const base =
+      this.apiOrigin ??
+      (typeof window === "undefined" ? undefined : window.location.origin);
+    if (!base) return value;
+    try {
+      return new URL(value, `${base.replace(/\/$/, "")}/`).toString();
+    } catch {
+      return value;
+    }
+  }
+
+  getToken() {
+    return (
+      (typeof localStorage === "undefined"
+        ? undefined
+        : localStorage.getItem(NOCOBASE_TOKEN_KEY) ?? undefined) ??
+      import.meta.env.NOCOBASE_API_TOKEN
+    );
+  }
+
+  setToken(token?: string | null) {
+    if (typeof localStorage === "undefined") return;
+    if (token) localStorage.setItem(NOCOBASE_TOKEN_KEY, token);
+    else localStorage.removeItem(NOCOBASE_TOKEN_KEY);
+  }
+
+  getRole() {
+    return typeof localStorage === "undefined"
+      ? undefined
+      : localStorage.getItem(NOCOBASE_ROLE_KEY) ?? undefined;
+  }
+
+  setRole(role?: string | null) {
+    if (typeof localStorage === "undefined") return;
+    if (role) localStorage.setItem(NOCOBASE_ROLE_KEY, role);
+    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(
+      /^\//,
+      ""
+    )}`;
+    const url = /^https?:\/\//.test(base)
+      ? new URL(base)
+      : new URL(base, window.location.origin);
+
+    for (const [key, value] of Object.entries(query ?? {})) {
+      if (value === undefined) continue;
+      if (Array.isArray(value)) {
+        value.forEach((item) => url.searchParams.append(key, String(item)));
+      } else if (value !== null) {
+        url.searchParams.set(key, String(value));
+      }
+    }
+    return url;
+  }
+
+  getHeaders({
+    token = this.getToken(),
+    role = this.getRole(),
+    includeRole = true,
+    includeAuthenticator = false,
+    withAclMeta = true,
+    headers,
+    accept = "json",
+    body,
+  }: Pick<
+    NocoBaseRequestOptions,
+    | "token"
+    | "role"
+    | "includeRole"
+    | "includeAuthenticator"
+    | "withAclMeta"
+    | "headers"
+    | "accept"
+    | "body"
+  > = {}) {
+    const locale = this.getLocale();
+    const formData =
+      typeof FormData !== "undefined" && body instanceof FormData;
+    return {
+      Accept: accept === "stream" ? "text/event-stream" : "application/json",
+      ...(body !== undefined && !formData
+        ? { "Content-Type": "application/json" }
+        : {}),
+      ...(accept === "stream"
+        ? { "Cache-Control": "no-cache", Pragma: "no-cache" }
+        : {}),
+      ...(includeAuthenticator
+        ? { "X-Authenticator": NOCOBASE_AUTHENTICATOR }
+        : {}),
+      ...(includeRole && role ? { "X-Role": role } : {}),
+      ...(withAclMeta ? { "X-With-ACL-Meta": "true" } : {}),
+      ...(locale ? { "X-Locale": locale } : {}),
+      "X-Timezone": getClientTimezone(),
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...headers,
+    };
+  }
+
+  async request<T>(
+    endpoint: string,
+    options: NocoBaseRequestOptions = {}
+  ): Promise<T> {
+    const method =
+      options.method ?? (options.body === undefined ? "GET" : "POST");
+    const response = await fetch(this.buildUrl(endpoint, options.query), {
+      method,
+      headers: this.getHeaders({ ...options, body: options.body }),
+      body:
+        options.body === undefined
+          ? undefined
+          : options.body instanceof FormData
+          ? options.body
+          : JSON.stringify(options.body),
+      signal: options.signal,
+    });
+    this.captureRenewedToken(response);
+    const payload = await response.json().catch(() => undefined);
+    if (!response.ok) {
+      throw new NocoBaseHttpError({
+        status: response.status,
+        payload,
+        message: getNocoBaseErrorMessage(
+          payload,
+          `NocoBase request failed (${response.status})`
+        ),
+      });
+    }
+    return unwrapPayload(payload, options.unwrap ?? "data") as T;
+  }
+
+  action<T>(
+    resource: string,
+    action: string,
+    options: Omit<NocoBaseRequestOptions, "accept"> = {}
+  ) {
+    const method =
+      options.method ?? (["get", "list"].includes(action) ? "GET" : "POST");
+    return this.request<T>(`${resource}:${action}`, { ...options, method });
+  }
+
+  async stream(
+    endpoint: string,
+    options: Omit<NocoBaseRequestOptions, "accept" | "unwrap"> = {}
+  ) {
+    const response = await fetch(this.buildUrl(endpoint, options.query), {
+      method: options.method ?? "POST",
+      headers: this.getHeaders({
+        ...options,
+        accept: "stream",
+        body: options.body,
+      }),
+      body:
+        options.body === undefined ? undefined : JSON.stringify(options.body),
+      signal: options.signal,
+    });
+    this.captureRenewedToken(response);
+    if (!response.ok || !response.body) {
+      const payload = await response.json().catch(() => undefined);
+      throw new NocoBaseHttpError({
+        status: response.status,
+        payload,
+        message: getNocoBaseErrorMessage(
+          payload,
+          `NocoBase stream failed (${response.status})`
+        ),
+      });
+    }
+    return response.body;
+  }
+
+  private captureRenewedToken(response: Response) {
+    const token = response.headers.get("x-new-token");
+    if (token) this.setToken(token);
+  }
+}
+
+const getUrlOrigin = (value: string) => {
+  if (!/^https?:\/\//i.test(value)) return undefined;
+  try {
+    return new URL(value).origin;
+  } catch {
+    return undefined;
+  }
+};
+
+export const nocobaseClient = new NocoBaseClient();

package/src/lib/nocobase/error.ts

@@ -0,0 +1,32 @@
+export class NocoBaseHttpError extends Error {
+  readonly status: number;
+  readonly payload: unknown;
+
+  constructor({
+    message,
+    status,
+    payload,
+  }: {
+    message: string;
+    status: number;
+    payload?: unknown;
+  }) {
+    super(message);
+    this.name = "NocoBaseHttpError";
+    this.status = status;
+    this.payload = payload;
+  }
+}
+
+export const getNocoBaseErrorMessage = (payload: unknown, fallback: string) => {
+  if (!payload || typeof payload !== "object") return fallback;
+  const value = payload as {
+    message?: string;
+    error?: { message?: string };
+    errors?: Array<{ message?: string } | string>;
+    messages?: Array<{ message?: string } | string>;
+  };
+  const first = value.errors?.[0] ?? value.messages?.[0];
+  if (typeof first === "string") return first;
+  return first?.message ?? value.error?.message ?? value.message ?? fallback;
+};

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>
+  );
+};