@nocobase/portal-template-default 1.0.4 → 1.0.6

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,12 +39,10 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
-  closeLabel = "Close",
   ...props
 }: SheetPrimitive.Popup.Props & {
-  side?: "top" | "right" | "bottom" | "left";
-  showCloseButton?: boolean;
-  closeLabel?: string;
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
 }) {
   return (
     <SheetPortal>
@@ -70,13 +68,14 @@ function SheetContent({
               />
             }
           >
-            <XIcon />
-            <span className="sr-only">{closeLabel}</span>
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  );
+  )
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -86,7 +85,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">) {
@@ -96,7 +95,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) {
@@ -109,7 +108,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SheetDescription({
@@ -122,7 +121,7 @@ function SheetDescription({
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -134,4 +133,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-};
+}

package/src/components/ui/sidebar.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
@@ -29,7 +27,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "4.75rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {

package/src/components/ui/sonner.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"

package/src/components/ui/spinner.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }

package/src/components/ui/switch.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
 
 import { cn } from "@/lib/utils"

package/src/components/ui/table.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
@@ -68,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-11 px-4 text-left align-middle font-semibold whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -81,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "px-4 py-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}

package/src/components/ui/tabs.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-24 w-full rounded-lg border border-input bg-transparent px-3 py-2.5 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/src/components/ui/toggle-group.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"

package/src/components/ui/toggle.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/ui/tooltip.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 
 import { cn } from "@/lib/utils"

package/src/index.tsx

@@ -3,6 +3,9 @@ import { createRoot } from "react-dom/client";
 
 import "./locales";
 import App from "./App";
+import { captureAuthenticationCallback } from "./providers/auth-callback";
+
+captureAuthenticationCallback();
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);

package/src/lib/nocobase/client.ts

@@ -2,6 +2,7 @@ import {
   API_ORIGIN,
   API_URL,
   NOCOBASE_AUTHENTICATOR,
+  NOCOBASE_AUTHENTICATOR_KEY,
   NOCOBASE_LOCALE_KEY,
   NOCOBASE_ROLE_KEY,
   NOCOBASE_TOKEN_KEY,
@@ -22,6 +23,7 @@ export type NocoBaseRequestOptions = {
   body?: unknown;
   signal?: AbortSignal;
   token?: string;
+  authenticator?: string | null;
   role?: string;
   includeRole?: boolean;
   includeAuthenticator?: boolean;
@@ -93,6 +95,25 @@ export class NocoBaseClient {
     );
   }
 
+  getStoredAuthenticator() {
+    return typeof localStorage === "undefined"
+      ? undefined
+      : localStorage.getItem(NOCOBASE_AUTHENTICATOR_KEY) ?? undefined;
+  }
+
+  getAuthenticator() {
+    return this.getStoredAuthenticator() ?? NOCOBASE_AUTHENTICATOR;
+  }
+
+  setAuthenticator(authenticator?: string | null) {
+    if (typeof localStorage === "undefined") return;
+    if (authenticator) {
+      localStorage.setItem(NOCOBASE_AUTHENTICATOR_KEY, authenticator);
+    } else {
+      localStorage.removeItem(NOCOBASE_AUTHENTICATOR_KEY);
+    }
+  }
+
   setToken(token?: string | null) {
     if (typeof localStorage === "undefined") return;
     if (token) localStorage.setItem(NOCOBASE_TOKEN_KEY, token);
@@ -153,6 +174,7 @@ export class NocoBaseClient {
 
   getHeaders({
     token = this.getToken(),
+    authenticator,
     role = this.getRole(),
     includeRole = true,
     includeAuthenticator = false,
@@ -163,6 +185,7 @@ export class NocoBaseClient {
   }: Pick<
     NocoBaseRequestOptions,
     | "token"
+    | "authenticator"
     | "role"
     | "includeRole"
     | "includeAuthenticator"
@@ -171,6 +194,13 @@ export class NocoBaseClient {
     | "accept"
     | "body"
   > = {}) {
+    const resolvedAuthenticator =
+      authenticator === null
+        ? undefined
+        : authenticator ??
+          (includeAuthenticator
+            ? this.getAuthenticator()
+            : this.getStoredAuthenticator());
     const locale = this.getLocale();
     const formData =
       typeof FormData !== "undefined" && body instanceof FormData;
@@ -182,8 +212,8 @@ export class NocoBaseClient {
       ...(accept === "stream"
         ? { "Cache-Control": "no-cache", Pragma: "no-cache" }
         : {}),
-      ...(includeAuthenticator
-        ? { "X-Authenticator": NOCOBASE_AUTHENTICATOR }
+      ...(resolvedAuthenticator
+        ? { "X-Authenticator": resolvedAuthenticator }
         : {}),
       ...(includeRole && role ? { "X-Role": role } : {}),
       ...(withAclMeta ? { "X-With-ACL-Meta": "true" } : {}),

package/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
+import { getPortalBase } from "@/providers/runtime-config"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -8,7 +9,7 @@ export function cn(...inputs: ClassValue[]) {
 export function assetUrl(path: string) {
   if (/^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(path)) return path
 
-  const base = import.meta.env.BASE_URL.replace(/\/+$/, "")
+  const base = getPortalBase().replace(/\/+$/, "")
   const assetPath = `/${path.replace(/^\/+/, "")}`
 
   if (base && (assetPath === base || assetPath.startsWith(`${base}/`))) {

package/src/locales/en-US.ts

@@ -23,8 +23,8 @@ export const starter = {
   "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.in": "Includes",
+  "table.filter.operator.nin": "Excludes",
   "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",
@@ -101,6 +101,8 @@ export const app = {
   "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",

package/src/locales/zh-CN.ts

@@ -23,8 +23,8 @@ export const starter = {
   "table.filter.operator.gt": "大于",
   "table.filter.operator.lte": "小于或等于",
   "table.filter.operator.gte": "大于或等于",
-  "table.filter.operator.in": "包含于数组",
-  "table.filter.operator.nin": "不包含于数组",
+  "table.filter.operator.in": "包含",
+  "table.filter.operator.nin": "排除",
   "table.filter.operator.ina": "包含于数组（区分大小写）",
   "table.filter.operator.nina": "不包含于数组（区分大小写）",
   "table.filter.operator.contains": "包含",
@@ -97,6 +97,8 @@ export const app = {
   "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": "删除用户",

package/src/pages/login/index.tsx

@@ -1,5 +1,5 @@
-import { SignInForm } from "@/components/auth/sign-in-form";
+import { DefaultSignInPage } from "@/components/auth/default-sign-in-page";
 
 export const Login = () => {
-  return <SignInForm />;
+  return <DefaultSignInPage />;
 };

package/src/pages/users/list.tsx

@@ -1,11 +1,16 @@
-import { useGetLocale, useTranslate } from "@refinedev/core";
+import { useGetLocale, useList, useTranslate } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
-import { createColumnHelper } from "@tanstack/react-table";
+import { createColumnHelper, type Column } from "@tanstack/react-table";
 import { Eye, Pencil, Trash2 } from "lucide-react";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, type ReactNode } from "react";
 import { useNavigate } from "react-router";
 
 import { DataTable } from "@/components/data-table/data-table";
+import {
+  DataTableFilterCombobox,
+  DataTableFilterDropdownText,
+} from "@/components/data-table/data-table-filter";
+import { DataTableSorter } from "@/components/data-table/data-table-sorter";
 import { DeleteButton } from "@/components/resources/buttons/delete";
 import { EditButton } from "@/components/resources/buttons/edit";
 import { ShowButton } from "@/components/resources/buttons/show";
@@ -15,11 +20,31 @@ import type { Role } from "@/lib/nocobase/acl";
 import { RoleBadges } from "./role-badges";
 import { resolveRoleLabel } from "./role-utils";
 import { getRolePath } from "./routes";
-import type { UserRecord } from "./types";
+import type { RoleRecord, UserRecord } from "./types";
 
 const isRootUser = (record: UserRecord) =>
   record.roles?.some((role) => role.name === "root") ?? false;
 
+function UserColumnHeader<TValue>({
+  children,
+  column,
+  label,
+  sortable = true,
+}: {
+  children?: ReactNode;
+  column: Column<UserRecord, TValue>;
+  label: string;
+  sortable?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      <span>{label}</span>
+      {sortable ? <DataTableSorter column={column} /> : null}
+      {children}
+    </div>
+  );
+}
+
 export const UserList = () => {
   const translate = useTranslate();
   const getLocale = useGetLocale();
@@ -29,6 +54,23 @@ export const UserList = () => {
     (role: Role) => navigate(getRolePath(role.name)),
     [navigate]
   );
+  const { result: rolesResult } = useList<RoleRecord>({
+    resource: "roles",
+    pagination: { mode: "server", currentPage: 1, pageSize: 200 },
+    errorNotification: false,
+    queryOptions: { retry: false },
+  });
+  const roleOptions = useMemo(
+    () =>
+      rolesResult.data
+        .filter((role) => role.name)
+        .map((role) => ({
+          value: role.name,
+          label: resolveRoleLabel(role),
+        }))
+        .sort((left, right) => left.label.localeCompare(right.label, locale)),
+    [locale, rolesResult.data]
+  );
 
   const columns = useMemo(() => {
     const columnHelper = createColumnHelper<UserRecord>();
@@ -36,32 +78,113 @@ export const UserList = () => {
     return [
       columnHelper.accessor("nickname", {
         id: "nickname",
-        header: translate("users.fields.nickname", { ns: "app" }, "Nickname"),
+        header: ({ column, table }) => (
+          <UserColumnHeader
+            column={column}
+            label={translate(
+              "users.fields.nickname",
+              { ns: "app" },
+              "Nickname"
+            )}
+          >
+            <DataTableFilterDropdownText
+              column={column}
+              table={table}
+              defaultOperator="contains"
+              operators={["contains", "eq", "startswith", "endswith"]}
+            />
+          </UserColumnHeader>
+        ),
         enableSorting: true,
         cell: ({ row, getValue }) =>
           getValue() || row.original.username || row.original.email || "-",
       }),
       columnHelper.accessor("username", {
         id: "username",
-        header: translate("users.fields.username", { ns: "app" }, "Username"),
+        header: ({ column, table }) => (
+          <UserColumnHeader
+            column={column}
+            label={translate(
+              "users.fields.username",
+              { ns: "app" },
+              "Username"
+            )}
+          >
+            <DataTableFilterDropdownText
+              column={column}
+              table={table}
+              defaultOperator="contains"
+              operators={["contains", "eq", "startswith", "endswith"]}
+            />
+          </UserColumnHeader>
+        ),
         enableSorting: true,
         cell: ({ getValue }) => getValue() || "-",
       }),
       columnHelper.accessor("email", {
         id: "email",
-        header: translate("users.fields.email", { ns: "app" }, "Email"),
+        header: ({ column, table }) => (
+          <UserColumnHeader
+            column={column}
+            label={translate("users.fields.email", { ns: "app" }, "Email")}
+          >
+            <DataTableFilterDropdownText
+              column={column}
+              table={table}
+              defaultOperator="contains"
+              operators={["contains", "eq", "startswith", "endswith"]}
+            />
+          </UserColumnHeader>
+        ),
         enableSorting: true,
         cell: ({ getValue }) => getValue() || "-",
       }),
       columnHelper.accessor("phone", {
         id: "phone",
-        header: translate("users.fields.phone", { ns: "app" }, "Phone"),
+        header: ({ column, table }) => (
+          <UserColumnHeader
+            column={column}
+            label={translate("users.fields.phone", { ns: "app" }, "Phone")}
+          >
+            <DataTableFilterDropdownText
+              column={column}
+              table={table}
+              defaultOperator="contains"
+              operators={["contains", "eq", "startswith", "endswith"]}
+            />
+          </UserColumnHeader>
+        ),
         enableSorting: true,
         cell: ({ getValue }) => getValue() || "-",
       }),
-      columnHelper.accessor("roles", {
-        id: "roles",
-        header: translate("users.fields.roles", { ns: "app" }, "Roles"),
+      columnHelper.accessor((record) => record.roles, {
+        id: "roles.name",
+        header: ({ column, table }) => (
+          <UserColumnHeader
+            column={column}
+            label={translate("users.fields.roles", { ns: "app" }, "Roles")}
+            sortable={false}
+          >
+            <DataTableFilterCombobox
+              column={column}
+              table={table}
+              options={roleOptions}
+              defaultOperator="in"
+              operators={["in", "nin"]}
+              placeholder={translate(
+                "users.filters.roles.placeholder",
+                { ns: "app" },
+                "Select roles..."
+              )}
+              noResultsText={translate(
+                "users.filters.roles.noResults",
+                { ns: "app" },
+                "No roles found."
+              )}
+              multiple
+            />
+          </UserColumnHeader>
+        ),
         enableSorting: false,
         cell: ({ getValue }) => {
           const roles = getValue() ?? [];
@@ -70,10 +193,15 @@ export const UserList = () => {
       }),
       columnHelper.accessor("createdAt", {
         id: "createdAt",
-        header: translate(
-          "users.fields.createdAt",
-          { ns: "app" },
-          "Created at"
+        header: ({ column }) => (
+          <UserColumnHeader
+            column={column}
+            label={translate(
+              "users.fields.createdAt",
+              { ns: "app" },
+              "Created at"
+            )}
+          />
         ),
         enableSorting: true,
         cell: ({ getValue }) => {
@@ -153,7 +281,7 @@ export const UserList = () => {
         size: 144,
       }),
     ];
-  }, [locale, showRole, translate]);
+  }, [locale, roleOptions, showRole, translate]);
 
   const table = useTable<UserRecord>({
     columns,

package/src/providers/auth-callback.ts

@@ -0,0 +1,21 @@
+import { clearAcl } from "@/lib/nocobase/acl";
+import { nocobaseClient } from "@/lib/nocobase/client";
+
+export function captureAuthenticationCallback() {
+  if (typeof window === "undefined") return false;
+
+  const url = new URL(window.location.href);
+  const token = url.searchParams.get("token");
+  const authenticator = url.searchParams.get("authenticator");
+
+  if (!token) return false;
+
+  nocobaseClient.setToken(token);
+  nocobaseClient.setAuthenticator(authenticator);
+  clearAcl();
+
+  url.searchParams.delete("token");
+  url.searchParams.delete("authenticator");
+  window.history.replaceState(window.history.state, "", url);
+  return true;
+}