@nocobase/portal-template-default 1.0.3 → 1.0.5

package/src/components/ui/sheet.tsx

@@ -1,24 +1,24 @@
-import * as React from "react"
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { XIcon } from "lucide-react";
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
@@ -31,7 +31,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
@@ -39,10 +39,12 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  closeLabel = "Close",
   ...props
 }: SheetPrimitive.Popup.Props & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+  closeLabel?: string;
 }) {
   return (
     <SheetPortal>
@@ -68,14 +70,13 @@ function SheetContent({
               />
             }
           >
-            <XIcon
-            />
-            <span className="sr-only">Close</span>
+            <XIcon />
+            <span className="sr-only">{closeLabel}</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  )
+  );
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -85,7 +86,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-0.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -95,7 +96,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
@@ -108,7 +109,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -121,7 +122,7 @@ function SheetDescription({
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -133,4 +134,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

package/src/lib/nocobase/client.ts

@@ -58,6 +58,7 @@ const unwrapPayload = (
 
 export class NocoBaseClient {
   private readonly apiOrigin?: string;
+  private runtimeLocale?: string;
 
   constructor(
     private readonly apiUrl = API_URL,
@@ -117,7 +118,7 @@ export class NocoBaseClient {
   }
 
   getLocale() {
-    return this.getStoredLocale() ?? getBrowserLocale();
+    return this.getStoredLocale() ?? this.runtimeLocale ?? getBrowserLocale();
   }
 
   setLocale(locale?: string | null) {
@@ -126,6 +127,10 @@ export class NocoBaseClient {
     else localStorage.removeItem(NOCOBASE_LOCALE_KEY);
   }
 
+  setRuntimeLocale(locale?: string | null) {
+    this.runtimeLocale = locale || undefined;
+  }
+
   buildUrl(endpoint: string, query?: Record<string, QueryValue>) {
     const base = `${this.apiUrl.replace(/\/$/, "")}/${endpoint.replace(
       /^\//,

package/src/locales/en-US.ts

@@ -1,11 +1,63 @@
 export const starter = {
+  "shell.workspace": "AI application workspace",
+  "shell.footer.freedom": "AI builds freely.",
+  "shell.footer.reliability": "NocoBase keeps it reliable.",
+  "auth.signOut": "Sign out",
+  "auth.signingOut": "Signing out...",
+  "buttons.apply": "Apply",
+  "buttons.clear": "Clear",
+  "buttons.undo": "Undo",
+  "pages.error.title": "Page not found.",
+  "pages.error.description": "The page you're looking for does not exist.",
+  "pages.error.backHome": "Back to homepage",
+  "table.filter.text.placeholder": "Filter by...",
+  "table.filter.numeric.placeholder": "Filter by...",
+  "table.filter.combobox.placeholder": "Select...",
+  "table.filter.combobox.search": "Search...",
+  "table.filter.combobox.noResults": "Results not found.",
+  "table.filter.operator.placeholder": "Search operator...",
+  "table.filter.operator.noResults": "No operator found.",
+  "table.filter.operator.eq": "Equals",
+  "table.filter.operator.ne": "Not equals",
+  "table.filter.operator.lt": "Less than",
+  "table.filter.operator.gt": "Greater than",
+  "table.filter.operator.lte": "Less than or equal",
+  "table.filter.operator.gte": "Greater than or equal",
+  "table.filter.operator.in": "Includes in an array",
+  "table.filter.operator.nin": "Not includes in an array",
+  "table.filter.operator.ina": "Includes in an array (case sensitive)",
+  "table.filter.operator.nina": "Not includes in an array (case sensitive)",
+  "table.filter.operator.contains": "Contains",
+  "table.filter.operator.ncontains": "Not contains",
+  "table.filter.operator.containss": "Contains (case sensitive)",
+  "table.filter.operator.ncontainss": "Not contains (case sensitive)",
+  "table.filter.operator.between": "Between",
+  "table.filter.operator.nbetween": "Not between",
+  "table.filter.operator.null": "Is null",
+  "table.filter.operator.nnull": "Is not null",
+  "table.filter.operator.startswith": "Starts with",
+  "table.filter.operator.nstartswith": "Not starts with",
+  "table.filter.operator.startswiths": "Starts with (case sensitive)",
+  "table.filter.operator.nstartswiths": "Not starts with (case sensitive)",
+  "table.filter.operator.endswith": "Ends with",
+  "table.filter.operator.nendswith": "Not ends with",
+  "table.filter.operator.endswiths": "Ends with (case sensitive)",
+  "table.filter.operator.nendswiths": "Not ends with (case sensitive)",
+  "table.filter.operator.eqs": "Equals (case sensitive)",
+  "table.filter.operator.nes": "Not equals (case sensitive)",
   "buttons.create": "Create",
   "buttons.edit": "Edit",
   "buttons.show": "View",
   "buttons.delete": "Delete",
   "buttons.refresh": "Refresh",
   "buttons.cancel": "Cancel",
+  "buttons.close": "Close",
   "buttons.confirm": "Are you sure?",
+  "unsavedChanges.title": "Discard unsaved changes?",
+  "unsavedChanges.description":
+    "Your changes have not been saved. Leaving now will discard them.",
+  "unsavedChanges.stay": "Keep editing",
+  "unsavedChanges.leave": "Discard changes",
   "views.create.title": "Create {{resource}}",
   "views.create.description":
     "Add a new {{resource}} to your NocoBase workspace.",
@@ -52,6 +104,14 @@ export const app = {
   "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",
@@ -75,8 +135,29 @@ export const app = {
   "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/locales/zh-CN.ts

@@ -1,11 +1,62 @@
 export const starter = {
+  "shell.workspace": "AI 应用工作区",
+  "shell.footer.freedom": "AI 自由构建。",
+  "shell.footer.reliability": "NocoBase 保障可靠运行。",
+  "auth.signOut": "退出登录",
+  "auth.signingOut": "正在退出...",
+  "buttons.apply": "应用",
+  "buttons.clear": "清除",
+  "buttons.undo": "撤销",
+  "pages.error.title": "页面不存在",
+  "pages.error.description": "你访问的页面不存在。",
+  "pages.error.backHome": "返回首页",
+  "table.filter.text.placeholder": "输入筛选内容...",
+  "table.filter.numeric.placeholder": "输入筛选数值...",
+  "table.filter.combobox.placeholder": "请选择...",
+  "table.filter.combobox.search": "搜索...",
+  "table.filter.combobox.noResults": "没有找到结果。",
+  "table.filter.operator.placeholder": "搜索操作符...",
+  "table.filter.operator.noResults": "没有找到操作符。",
+  "table.filter.operator.eq": "等于",
+  "table.filter.operator.ne": "不等于",
+  "table.filter.operator.lt": "小于",
+  "table.filter.operator.gt": "大于",
+  "table.filter.operator.lte": "小于或等于",
+  "table.filter.operator.gte": "大于或等于",
+  "table.filter.operator.in": "包含于数组",
+  "table.filter.operator.nin": "不包含于数组",
+  "table.filter.operator.ina": "包含于数组（区分大小写）",
+  "table.filter.operator.nina": "不包含于数组（区分大小写）",
+  "table.filter.operator.contains": "包含",
+  "table.filter.operator.ncontains": "不包含",
+  "table.filter.operator.containss": "包含（区分大小写）",
+  "table.filter.operator.ncontainss": "不包含（区分大小写）",
+  "table.filter.operator.between": "介于",
+  "table.filter.operator.nbetween": "不介于",
+  "table.filter.operator.null": "为空",
+  "table.filter.operator.nnull": "不为空",
+  "table.filter.operator.startswith": "开头是",
+  "table.filter.operator.nstartswith": "开头不是",
+  "table.filter.operator.startswiths": "开头是（区分大小写）",
+  "table.filter.operator.nstartswiths": "开头不是（区分大小写）",
+  "table.filter.operator.endswith": "结尾是",
+  "table.filter.operator.nendswith": "结尾不是",
+  "table.filter.operator.endswiths": "结尾是（区分大小写）",
+  "table.filter.operator.nendswiths": "结尾不是（区分大小写）",
+  "table.filter.operator.eqs": "等于（区分大小写）",
+  "table.filter.operator.nes": "不等于（区分大小写）",
   "buttons.create": "新建",
   "buttons.edit": "编辑",
   "buttons.show": "查看",
   "buttons.delete": "删除",
   "buttons.refresh": "刷新",
   "buttons.cancel": "取消",
+  "buttons.close": "关闭",
   "buttons.confirm": "确定要执行此操作吗？",
+  "unsavedChanges.title": "放弃未保存的修改？",
+  "unsavedChanges.description": "当前修改尚未保存，离开后这些修改将会丢失。",
+  "unsavedChanges.stay": "继续编辑",
+  "unsavedChanges.leave": "放弃修改",
   "views.create.title": "新建{{resource}}",
   "views.create.description": "在 NocoBase 工作区中添加新的{{resource}}。",
   "views.edit.title": "编辑{{resource}}",
@@ -49,6 +100,11 @@ export const app = {
   "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": "保存修改",
@@ -72,8 +128,29 @@ export const app = {
   "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/pages/users/create.tsx

@@ -1,30 +1,67 @@
 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 {
+  RouteDrawer,
+  RouteDrawerFooter,
+  useRefineUnsavedChangesGuard,
+  useRouteSurfaceClose,
+} from "@/extensions/nocobase-route-surfaces";
 import {
   applyAIUserFormValues,
   getAIUserFormFields,
   getAIUserFormValues,
 } from "./form-context";
 import { UserFormFields } from "./form-fields";
+import { userRoutes } from "./routes";
 import type { UserFormValues, UserRecord } from "./types";
 
 export const UserCreate = () => {
   const translate = useTranslate();
-  const navigate = useNavigate();
+  const { beforeClose, confirmation } = useRefineUnsavedChangesGuard();
+
+  return (
+    <>
+      <RouteDrawer
+        title={translate(
+          "users.drawer.create.title",
+          { ns: "app" },
+          "Create user"
+        )}
+        description={translate(
+          "users.drawer.create.description",
+          { ns: "app" },
+          "Add a user who can sign in to this NocoBase application."
+        )}
+        closeLabel={translate("buttons.close", "Close")}
+        closeTo={userRoutes.list}
+        beforeClose={beforeClose}
+      >
+        <UserCreateForm />
+      </RouteDrawer>
+      {confirmation}
+    </>
+  );
+};
+
+function UserCreateForm() {
+  const translate = useTranslate();
+  const close = useRouteSurfaceClose();
   const {
     refineCore: { onFinish },
     ...form
   } = useForm<UserRecord, HttpError, UserFormValues>({
     refineCoreProps: {
-      redirect: "list",
+      resource: "users",
+      action: "create",
+      redirect: false,
+      onMutationSuccess: () => {
+        void close({ skipBeforeClose: true });
+      },
     },
     defaultValues: {
       nickname: "",
@@ -34,7 +71,6 @@ export const UserCreate = () => {
       password: "",
     },
   });
-
   const aiFields = useMemo<AIFormField[]>(
     () => getAIUserFormFields(translate),
     [translate]
@@ -48,51 +84,38 @@ export const UserCreate = () => {
   });
 
   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>
+    <Form {...form}>
+      <form
+        ref={aiFormRef}
+        onSubmit={form.handleSubmit((values) => onFinish(values))}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        <div className="resource-form min-h-0 flex-1 overflow-y-auto px-5 py-5">
+          <UserFormFields form={form} includePassword translate={translate} />
+        </div>
+        <RouteDrawerFooter className="flex-row justify-end">
+          <Button type="button" variant="outline" onClick={() => void close()}>
+            {translate("users.form.cancel", { ns: "app" }, "Cancel")}
+          </Button>
+          <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>
+        </RouteDrawerFooter>
+      </form>
+    </Form>
   );
-};
+}