@nocobase/portal-template-default 1.0.9 → 1.0.10

package/src/extensions/nocobase-users-example/locales/en-US.ts

@@ -0,0 +1,77 @@
+export const usersExample = {
+  "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.filters.roles.placeholder": "Select roles...",
+  "users.filters.roles.noResults": "No roles found.",
+  "users.actions.view": "View user",
+  "users.actions.edit": "Edit user",
+  "users.actions.delete": "Delete user",
+  "users.drawer.create.title": "Create user",
+  "users.drawer.create.description":
+    "Add a user who can sign in to this NocoBase application.",
+  "users.drawer.edit.title": "Edit user",
+  "users.drawer.edit.description":
+    "Update this user's identity and contact information.",
+  "users.drawer.show.description":
+    "Review this user's identity, contact information, and roles.",
+  "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.detail.loadError.title": "Unable to load user",
+  "users.detail.loadError.description":
+    "The user may no longer exist, or you may not have permission to view it.",
+  "users.ai.table": "Users table",
+  "users.ai.detail": "User details",
+  "users.ai.createForm": "Create user form",
+  "users.ai.editForm": "Edit user form",
+  "common.yes": "Yes",
+  "common.no": "No",
+  "roles.drawer.description": "Review the role associated with this user.",
+  "roles.fields.name": "Name",
+  "roles.fields.title": "Title",
+  "roles.fields.description": "Description",
+  "roles.fields.default": "Default role",
+  "roles.fields.hidden": "Hidden",
+  "roles.fields.allowConfigure": "Can configure",
+  "roles.fields.createdAt": "Created at",
+  "roles.fields.updatedAt": "Updated at",
+  "roles.detail.identity": "Role identity",
+  "roles.detail.settings": "Settings",
+  "roles.detail.actions": "Allowed actions",
+  "roles.detail.timestamps": "Timestamps",
+  "roles.detail.unavailable":
+    "Additional role details are unavailable. Showing the relation data included with the user.",
+  "roles.ai.detail": "Role details",
+} as const;

package/src/extensions/nocobase-users-example/locales/index.ts

@@ -0,0 +1,8 @@
+import { registerTranslationResources } from "@/lib/i18n";
+import { usersExample as enUS } from "./en-US";
+import { usersExample as zhCN } from "./zh-CN";
+
+registerTranslationResources("app", {
+  "en-US": enUS,
+  "zh-CN": zhCN,
+});

package/src/extensions/nocobase-users-example/locales/zh-CN.ts

@@ -0,0 +1,73 @@
+export const usersExample = {
+  "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.filters.roles.placeholder": "选择角色…",
+  "users.filters.roles.noResults": "未找到角色。",
+  "users.actions.view": "查看用户",
+  "users.actions.edit": "编辑用户",
+  "users.actions.delete": "删除用户",
+  "users.drawer.create.title": "新建用户",
+  "users.drawer.create.description": "添加可以登录此 NocoBase 应用的用户。",
+  "users.drawer.edit.title": "编辑用户",
+  "users.drawer.edit.description": "更新用户的身份和联系方式。",
+  "users.drawer.show.description": "查看用户的身份、联系方式和关联角色。",
+  "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.detail.loadError.title": "无法加载用户",
+  "users.detail.loadError.description":
+    "该用户可能已不存在，或者你没有权限查看此用户。",
+  "users.ai.table": "用户表格",
+  "users.ai.detail": "用户详情",
+  "users.ai.createForm": "新建用户表单",
+  "users.ai.editForm": "编辑用户表单",
+  "common.yes": "是",
+  "common.no": "否",
+  "roles.drawer.description": "查看与当前用户关联的角色信息。",
+  "roles.fields.name": "名称",
+  "roles.fields.title": "标题",
+  "roles.fields.description": "描述",
+  "roles.fields.default": "默认角色",
+  "roles.fields.hidden": "隐藏",
+  "roles.fields.allowConfigure": "允许配置",
+  "roles.fields.createdAt": "创建时间",
+  "roles.fields.updatedAt": "更新时间",
+  "roles.detail.identity": "角色标识",
+  "roles.detail.settings": "角色设置",
+  "roles.detail.actions": "允许的操作",
+  "roles.detail.timestamps": "时间信息",
+  "roles.detail.unavailable":
+    "无法加载更多角色详情，当前展示用户关联数据中已有的信息。",
+  "roles.ai.detail": "角色详情",
+} as const;

package/src/extensions/nocobase-users-example/optional-ai.ts

@@ -0,0 +1,67 @@
+import { useCallback, type RefCallback } from "react";
+
+export type AIFormField = {
+  name: string;
+  title?: string;
+  type?: string;
+  description?: string;
+  readonly?: boolean;
+  required?: boolean;
+  enum?: unknown;
+  [key: string]: unknown;
+};
+
+type AIFormDescriptor = {
+  id: string;
+  title: string;
+  fields: AIFormField[];
+  getValues: () => unknown | Promise<unknown>;
+  setValues: (values: Record<string, unknown>) => void | Promise<void>;
+};
+
+type AIPageElementDescriptor = {
+  id: string;
+  title: string;
+  kind: string;
+  getContext: () => unknown | Promise<unknown>;
+};
+
+type AIPageElementHandle = {
+  ref: RefCallback<HTMLElement>;
+  context: unknown;
+};
+
+type OptionalAIModule = {
+  useAIForm?: (descriptor: AIFormDescriptor) => RefCallback<HTMLElement>;
+  useAIPageElementHandle?: (
+    descriptor: AIPageElementDescriptor
+  ) => AIPageElementHandle;
+};
+
+const aiModules = import.meta.glob<OptionalAIModule>(
+  "../nocobase-ai/index.ts",
+  { eager: true }
+);
+const aiModule = Object.values(aiModules)[0];
+
+function useFallbackAIForm() {
+  return useCallback<RefCallback<HTMLElement>>(() => undefined, []);
+}
+
+function useFallbackAIPageElementHandle(
+  descriptor: AIPageElementDescriptor
+): AIPageElementHandle {
+  const ref = useCallback<RefCallback<HTMLElement>>(() => undefined, []);
+  return {
+    ref,
+    context: {
+      id: descriptor.id,
+      title: descriptor.title,
+      kind: descriptor.kind,
+    },
+  };
+}
+
+export const useAIForm = aiModule?.useAIForm ?? useFallbackAIForm;
+export const useAIPageElementHandle =
+  aiModule?.useAIPageElementHandle ?? useFallbackAIPageElementHandle;

package/src/{pages/users → extensions/nocobase-users-example}/role-detail.tsx

@@ -5,7 +5,7 @@ import { LoadingState } from "@/components/app-shell/loading-state";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
+import { useAIPageElementHandle } from "./optional-ai";
 import { RouteDrawer } from "@/extensions/nocobase-route-surfaces";
 import type { Role } from "@/lib/nocobase/acl";
 import { resolveTranslatableText } from "@/lib/i18n";
@@ -13,11 +13,7 @@ import { resolveRoleLabel } from "./role-utils";
 import { getUserShowPath, userRoutes } from "./routes";
 import type { RoleRecord } from "./types";
 
-export function RoleDetailRoute({
-  returnTo,
-}: {
-  returnTo: "list" | "show";
-}) {
+export function RoleDetailRoute({ returnTo }: { returnTo: "list" | "show" }) {
   const { id, roleName } = useParams<{
     id?: string;
     roleName: string;
@@ -26,16 +22,9 @@ export function RoleDetailRoute({
   if (!roleName) return null;
 
   const closeTarget =
-    returnTo === "show" && id
-      ? getUserShowPath(id)
-      : userRoutes.list;
+    returnTo === "show" && id ? getUserShowPath(id) : userRoutes.list;
 
-  return (
-    <RoleDetailDrawer
-      role={{ name: roleName }}
-      closeTo={closeTarget}
-    />
-  );
+  return <RoleDetailDrawer role={{ name: roleName }} closeTo={closeTarget} />;
 }
 
 export function RoleDetailDrawer({

package/src/{pages/users → extensions/nocobase-users-example}/routes.ts

@@ -17,8 +17,5 @@ export const getUserShowPath = (id: string | number) =>
 export const getRolePath = (roleName: string) =>
   `/users/roles/${encodeURIComponent(roleName)}`;
 
-export const getUserRolePath = (
-  id: string | number,
-  roleName: string
-) =>
+export const getUserRolePath = (id: string | number, roleName: string) =>
   `/users/show/${encodeURIComponent(id)}/roles/${encodeURIComponent(roleName)}`;

package/src/extensions/nocobase-users-example/show.tsx

@@ -0,0 +1,266 @@
+import { useGetLocale, useShow, useTranslate } from "@refinedev/core";
+import { useNavigate, useOutlet, useParams } from "react-router";
+import { Pencil, RotateCw } from "lucide-react";
+
+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 "./optional-ai";
+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 navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const nestedDrawer = useOutlet();
+  const { result: record, query } = useShow<UserRecord>({
+    resource: "users",
+    id,
+    meta: {
+      appends: ["roles"],
+    },
+  });
+
+  const displayName =
+    record?.nickname ||
+    record?.username ||
+    record?.email ||
+    translate("users.detail.unnamed", { ns: "app" }, "Unnamed user");
+  const roles = record?.roles ?? [];
+  const detailContext = useAIPageElementHandle({
+    id: `users-detail-${id ?? "current"}`,
+    title: `${translate(
+      "users.ai.detail",
+      { ns: "app" },
+      "User details"
+    )}: ${displayName}`,
+    kind: "detail",
+    getContext: () => ({
+      resource: "users",
+      record: {
+        id: record?.id,
+        nickname: record?.nickname,
+        username: record?.username,
+        email: record?.email,
+        phone: record?.phone,
+        roles: roles.map((role) => ({
+          name: role.name,
+          title: resolveRoleLabel(role),
+        })),
+        createdAt: record?.createdAt,
+        updatedAt: record?.updatedAt,
+      },
+    }),
+  });
+
+  const formatDate = (value?: string) =>
+    value
+      ? new Intl.DateTimeFormat(locale, {
+          dateStyle: "medium",
+          timeStyle: "short",
+        }).format(new Date(value))
+      : "-";
+
+  return (
+    <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"
+                )}
+              />
+            </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",
+                    { ns: "app" },
+                    "Updated at"
+                  ),
+                  formatDate(record?.updatedAt),
+                ],
+              ]}
+            />
+          </div>
+        )}
+      </div>
+    </RouteDrawer>
+  );
+};
+
+function DetailSection({
+  title,
+  items,
+}: {
+  title: string;
+  items: Array<[label: string, value: string | number]>;
+}) {
+  return (
+    <section className="space-y-3">
+      <h3 className="text-sm font-medium">{title}</h3>
+      <dl className="grid gap-4 sm:grid-cols-2">
+        {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 break-words">{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}

package/src/lib/nocobase/acl/context.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+
+import type { RecordPermissionResolver } from "./evaluator";
+import type { AclState } from "./types";
+
+export type AclStore = {
+  getState: () => AclState;
+  subscribe: (listener: () => void) => () => void;
+  load: () => Promise<AclState>;
+  retry: () => Promise<AclState>;
+  clear: () => void;
+  recordPermissions: {
+    getState: () => object;
+    subscribe: (listener: () => void) => () => void;
+    getPermission: RecordPermissionResolver;
+  };
+};
+
+export const AclStoreContext = createContext<AclStore | undefined>(undefined);
+
+export const useAclStore = () => {
+  const store = useContext(AclStoreContext);
+  if (!store) {
+    throw new Error("useAclStore must be used within an AclStoreProvider");
+  }
+  return store;
+};
+
+export const useAclState = () => {
+  const store = useAclStore();
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+};