@nocobase/portal-template-default 1.0.1 → 1.0.3

package/src/components/app-shell/sidebar.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import {
   useMenu,
   useLink,
+  useTranslate,
+  useUserFriendlyName,
   type TreeMenuItem,
 } from "@refinedev/core";
 import {
@@ -29,10 +31,8 @@ import { Button } from "@/components/ui/button";
 import { ChevronRight, ListIcon, ShieldCheck } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Brand } from "@/components/app-shell/brand";
-import {
-  filterMenuItemsByAcl,
-  useAclSnapshot,
-} from "@/lib/nocobase/acl";
+import { filterMenuItemsByAcl, useAclSnapshot } from "@/lib/nocobase/acl";
+import { getResourceLabel } from "@/components/resources/resource-label";
 
 export function Sidebar() {
   const { open } = useShadcnSidebar();
@@ -102,6 +102,7 @@ function SidebarItem({ item, selectedKey }: MenuItemProps) {
 function SidebarItemGroup({ item, selectedKey }: MenuItemProps) {
   const { children } = item;
   const { open } = useShadcnSidebar();
+  const displayName = useMenuItemLabel(item);
 
   return (
     <div className={cn("mt-2 border-t", "border-sidebar-border/70", "pt-4")}>
@@ -125,7 +126,7 @@ function SidebarItemGroup({ item, selectedKey }: MenuItemProps) {
           }
         )}
       >
-        {getDisplayName(item)}
+        {displayName}
       </span>
       {children && children.length > 0 && (
         <div className={cn("flex", "flex-col")}>
@@ -199,33 +200,44 @@ function SidebarItemDropdown({ item, selectedKey }: MenuItemProps) {
         render={<SidebarButton item={item} isSelected={isSelected} />}
       />
       <DropdownMenuContent side="right" align="start">
-        {children?.map((child: TreeMenuItem) => {
-          const { key: childKey } = child;
-          const isSelected = childKey === selectedKey;
-
-          return (
-            <DropdownMenuItem
-              key={childKey || child.name}
-              render={<Link
-                to={child.route || ""}
-                className={cn("flex w-full items-center gap-2", {
-                  "bg-accent text-accent-foreground": isSelected,
-                })}
-              />}
-            >
-              <ItemIcon
-                icon={child.meta?.icon ?? child.icon}
-                isSelected={isSelected}
-              />
-              <span>{getDisplayName(child)}</span>
-            </DropdownMenuItem>
-          );
-        })}
+        {children?.map((child: TreeMenuItem) => (
+          <SidebarDropdownItem
+            key={child.key || child.name}
+            item={child}
+            selectedKey={selectedKey}
+            Link={Link}
+          />
+        ))}
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
 
+function SidebarDropdownItem({
+  item,
+  selectedKey,
+  Link,
+}: MenuItemProps & { Link: ReturnType<typeof useLink> }) {
+  const isSelected = item.key === selectedKey;
+  const displayName = useMenuItemLabel(item);
+
+  return (
+    <DropdownMenuItem
+      render={
+        <Link
+          to={item.route || ""}
+          className={cn("flex w-full items-center gap-2", {
+            "bg-accent text-accent-foreground": isSelected,
+          })}
+        />
+      }
+    >
+      <ItemIcon icon={item.meta?.icon ?? item.icon} isSelected={isSelected} />
+      <span>{displayName}</span>
+    </DropdownMenuItem>
+  );
+}
+
 function SidebarItemLink({ item, selectedKey }: MenuItemProps) {
   const isSelected = item.key === selectedKey;
 
@@ -250,7 +262,10 @@ function SidebarHeader() {
     >
       <Brand
         showText={open}
-        logoClassName={cn("transition-transform duration-200", !open && "size-9")}
+        logoClassName={cn(
+          "transition-transform duration-200",
+          !open && "size-9"
+        )}
       />
     </ShadcnSidebarHeader>
   );
@@ -258,6 +273,7 @@ function SidebarHeader() {
 
 function SidebarFooter() {
   const { open } = useShadcnSidebar();
+  const translate = useTranslate();
 
   return (
     <ShadcnSidebarFooter className="border-t border-sidebar-border/70 p-0">
@@ -271,10 +287,13 @@ function SidebarFooter() {
         {open && (
           <div className="min-w-0 text-xs leading-4">
             <div className="font-semibold text-sidebar-foreground">
-              AI builds freely.
+              {translate("shell.footer.freedom", "AI builds freely.")}
             </div>
             <div className="text-muted-foreground">
-              NocoBase keeps it reliable.
+              {translate(
+                "shell.footer.reliability",
+                "NocoBase keeps it reliable."
+              )}
             </div>
           </div>
         )}
@@ -283,14 +302,22 @@ function SidebarFooter() {
   );
 }
 
-function getDisplayName(item: TreeMenuItem) {
-  return item.meta?.label ?? item.label ?? item.name;
+function useMenuItemLabel(item: TreeMenuItem) {
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  return getResourceLabel(
+    item,
+    "plural",
+    translate,
+    getUserFriendlyName,
+    item.name
+  );
 }
 
 function isTreeItemSelected(item: TreeMenuItem, selectedKey?: string) {
   return (
-    item.key === selectedKey ||
-    Boolean(selectedKey?.startsWith(`${item.key}/`))
+    item.key === selectedKey || Boolean(selectedKey?.startsWith(`${item.key}/`))
   );
 }
 
@@ -330,24 +357,22 @@ function SidebarButton({
   ...props
 }: SidebarButtonProps) {
   const Link = useLink();
+  const displayName = useMenuItemLabel(item);
 
   const buttonContent = (
     <>
       <ItemIcon icon={item.meta?.icon ?? item.icon} isSelected={isSelected} />
       <span
-        className={cn(
-          "tracking-[-0.00875rem] text-foreground",
-          {
-            "flex-1": rightIcon,
-            "text-left": rightIcon,
-            "line-clamp-1": !rightIcon,
-            truncate: !rightIcon,
-            "font-normal": !isSelected,
-            "font-medium": isSelected,
-          },
-        )}
+        className={cn("tracking-[-0.00875rem] text-foreground", {
+          "flex-1": rightIcon,
+          "text-left": rightIcon,
+          "line-clamp-1": !rightIcon,
+          truncate: !rightIcon,
+          "font-normal": !isSelected,
+          "font-medium": isSelected,
+        })}
       >
-        {getDisplayName(item)}
+        {displayName}
       </span>
       {rightIcon}
     </>
@@ -357,7 +382,10 @@ function SidebarButton({
     <Button
       render={
         asLink && item.route ? (
-          <Link to={item.route} className={cn("flex w-full items-center gap-2")} />
+          <Link
+            to={item.route}
+            className={cn("flex w-full items-center gap-2")}
+          />
         ) : undefined
       }
       variant="ghost"

package/src/components/data-table/data-table-pagination.tsx

@@ -7,6 +7,7 @@ import {
   ChevronsRight,
 } from "lucide-react";
 import { useMemo } from "react";
+import { useTranslate } from "@refinedev/core";
 
 import {
   Select,
@@ -35,6 +36,7 @@ export function DataTablePagination({
   setPageSize,
   total,
 }: DataTablePaginationProps) {
+  const translate = useTranslate();
   const pageSizeOptions = useMemo(() => {
     const baseOptions = [10, 20, 30, 40, 50];
     const optionsSet = new Set(baseOptions);
@@ -66,11 +68,19 @@ export function DataTablePagination({
           "whitespace-nowrap"
         )}
       >
-        {typeof total === "number" ? `${total} row(s)` : null}
+        {typeof total === "number"
+          ? translate(
+              "table.pagination.total",
+              { count: total },
+              `${total} row(s)`
+            )
+          : null}
       </div>
       <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
         <div className={cn("flex", "items-center", "gap-2")}>
-          <span className={cn("text-sm", "font-medium")}>Rows per page</span>
+          <span className={cn("text-sm", "font-medium")}>
+            {translate("table.pagination.pageSize", "Rows per page")}
+          </span>
           <Select
             value={`${pageSize}`}
             onValueChange={(v) => setPageSize(Number(v))}
@@ -97,7 +107,11 @@ export function DataTablePagination({
               "font-medium"
             )}
           >
-            Page {currentPage} of {pageCount}
+            {translate(
+              "table.pagination.page",
+              { current: currentPage, total: pageCount },
+              `Page ${currentPage} of ${pageCount}`
+            )}
           </div>
           <div className={cn("flex", "items-center", "gap-2")}>
             <Button
@@ -105,7 +119,10 @@ export function DataTablePagination({
               className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
               onClick={() => setCurrentPage(1)}
               disabled={currentPage === 1}
-              aria-label="Go to first page"
+              aria-label={translate(
+                "table.pagination.first",
+                "Go to first page"
+              )}
             >
               <ChevronsLeft />
             </Button>
@@ -114,7 +131,10 @@ export function DataTablePagination({
               className={cn("h-8", "w-8", "p-0")}
               onClick={() => setCurrentPage(currentPage - 1)}
               disabled={currentPage === 1}
-              aria-label="Go to previous page"
+              aria-label={translate(
+                "table.pagination.previous",
+                "Go to previous page"
+              )}
             >
               <ChevronLeft />
             </Button>
@@ -123,7 +143,7 @@ export function DataTablePagination({
               className={cn("h-8", "w-8", "p-0")}
               onClick={() => setCurrentPage(currentPage + 1)}
               disabled={currentPage === pageCount}
-              aria-label="Go to next page"
+              aria-label={translate("table.pagination.next", "Go to next page")}
             >
               <ChevronRight />
             </Button>
@@ -132,7 +152,7 @@ export function DataTablePagination({
               className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
               onClick={() => setCurrentPage(pageCount)}
               disabled={currentPage === pageCount}
-              aria-label="Go to last page"
+              aria-label={translate("table.pagination.last", "Go to last page")}
             >
               <ChevronsRight />
             </Button>

package/src/components/data-table/data-table-styles.ts

@@ -0,0 +1,57 @@
+import type { Column } from "@tanstack/react-table";
+import type { CSSProperties } from "react";
+
+export function getCommonStyles<TData>({
+  column,
+  isOverflowing,
+}: {
+  column: Column<TData>;
+  isOverflowing: {
+    horizontal: boolean;
+    vertical: boolean;
+  };
+}): CSSProperties {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    boxShadow:
+      isOverflowing.horizontal && isLastLeftPinnedColumn
+        ? "-4px 0 4px -4px var(--border) inset"
+        : isOverflowing.horizontal && isFirstRightPinnedColumn
+        ? "4px 0 4px -4px var(--border) inset"
+        : undefined,
+    left:
+      isOverflowing.horizontal && isPinned === "left"
+        ? `${column.getStart("left")}px`
+        : undefined,
+    right:
+      isOverflowing.horizontal && isPinned === "right"
+        ? `${column.getAfter("right")}px`
+        : undefined,
+    opacity: 1,
+    position: isOverflowing.horizontal && isPinned ? "sticky" : "relative",
+    background: isOverflowing.horizontal && isPinned ? "var(--background)" : "",
+    borderTopRightRadius:
+      isOverflowing.horizontal && isPinned === "right"
+        ? "var(--radius)"
+        : undefined,
+    borderBottomRightRadius:
+      isOverflowing.horizontal && isPinned === "right"
+        ? "var(--radius)"
+        : undefined,
+    borderTopLeftRadius:
+      isOverflowing.horizontal && isPinned === "left"
+        ? "var(--radius)"
+        : undefined,
+    borderBottomLeftRadius:
+      isOverflowing.horizontal && isPinned === "left"
+        ? "var(--radius)"
+        : undefined,
+    width: column.getSize(),
+    zIndex: isOverflowing.horizontal && isPinned ? 1 : 0,
+  };
+}

package/src/components/data-table/data-table.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import type { HttpError, BaseRecord } from "@refinedev/core";
+import { useTranslate, type HttpError, type BaseRecord } from "@refinedev/core";
 import type { UseTableReturnType } from "@refinedev/react-table";
-import type { Column } from "@tanstack/react-table";
 import { flexRender } from "@tanstack/react-table";
 import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -16,6 +15,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { DataTablePagination } from "@/components/data-table/data-table-pagination";
+import { getCommonStyles } from "@/components/data-table/data-table-styles";
 import { cn } from "@/lib/utils";
 
 type DataTableProps<TData extends BaseRecord> = {
@@ -25,6 +25,7 @@ type DataTableProps<TData extends BaseRecord> = {
 export function DataTable<TData extends BaseRecord>({
   table,
 }: DataTableProps<TData>) {
+  const translate = useTranslate();
   const {
     reactTable: { getHeaderGroups, getRowModel, getAllColumns },
     refineCore: {
@@ -198,6 +199,11 @@ export function DataTable<TData extends BaseRecord>({
               <DataTableNoData
                 isOverflowing={isOverflowing}
                 columnsLength={columns.length}
+                title={translate("table.empty.title", "No data to display")}
+                description={translate(
+                  "table.empty.description",
+                  "This table is empty for the time being."
+                )}
               />
             )}
           </TableBody>
@@ -220,9 +226,13 @@ export function DataTable<TData extends BaseRecord>({
 function DataTableNoData({
   isOverflowing,
   columnsLength,
+  title,
+  description,
 }: {
   isOverflowing: { horizontal: boolean; vertical: boolean };
   columnsLength: number;
+  title: string;
+  description: string;
 }) {
   return (
     <TableRow className="hover:bg-transparent">
@@ -252,10 +262,10 @@ function DataTableNoData({
           }}
         >
           <div className={cn("text-lg", "font-semibold", "text-foreground")}>
-            No data to display
+            {title}
           </div>
           <div className={cn("text-sm", "text-muted-foreground")}>
-            This table is empty for the time being.
+            {description}
           </div>
         </div>
       </TableCell>
@@ -263,59 +273,4 @@ function DataTableNoData({
   );
 }
 
-export function getCommonStyles<TData>({
-  column,
-  isOverflowing,
-}: {
-  column: Column<TData>;
-  isOverflowing: {
-    horizontal: boolean;
-    vertical: boolean;
-  };
-}): React.CSSProperties {
-  const isPinned = column.getIsPinned();
-  const isLastLeftPinnedColumn =
-    isPinned === "left" && column.getIsLastColumn("left");
-  const isFirstRightPinnedColumn =
-    isPinned === "right" && column.getIsFirstColumn("right");
-
-  return {
-    boxShadow:
-      isOverflowing.horizontal && isLastLeftPinnedColumn
-        ? "-4px 0 4px -4px var(--border) inset"
-        : isOverflowing.horizontal && isFirstRightPinnedColumn
-        ? "4px 0 4px -4px var(--border) inset"
-        : undefined,
-    left:
-      isOverflowing.horizontal && isPinned === "left"
-        ? `${column.getStart("left")}px`
-        : undefined,
-    right:
-      isOverflowing.horizontal && isPinned === "right"
-        ? `${column.getAfter("right")}px`
-        : undefined,
-    opacity: 1,
-    position: isOverflowing.horizontal && isPinned ? "sticky" : "relative",
-    background: isOverflowing.horizontal && isPinned ? "var(--background)" : "",
-    borderTopRightRadius:
-      isOverflowing.horizontal && isPinned === "right"
-        ? "var(--radius)"
-        : undefined,
-    borderBottomRightRadius:
-      isOverflowing.horizontal && isPinned === "right"
-        ? "var(--radius)"
-        : undefined,
-    borderTopLeftRadius:
-      isOverflowing.horizontal && isPinned === "left"
-        ? "var(--radius)"
-        : undefined,
-    borderBottomLeftRadius:
-      isOverflowing.horizontal && isPinned === "left"
-        ? "var(--radius)"
-        : undefined,
-    width: column.getSize(),
-    zIndex: isOverflowing.horizontal && isPinned ? 1 : 0,
-  };
-}
-
 DataTable.displayName = "DataTable";

package/src/components/resources/resource-label.ts

@@ -0,0 +1,101 @@
+import {
+  type IResourceItem,
+  useTranslate,
+  useUserFriendlyName,
+} from "@refinedev/core";
+
+import {
+  parseTranslationExpression,
+  type TranslationOptions,
+} from "@/lib/i18n";
+
+export type ResourceLabelForm = "plural" | "singular";
+
+type ResourceLabelMeta = {
+  i18nKey?: string;
+  i18nOptions?: TranslationOptions;
+  i18nSingularKey?: string;
+  label?: unknown;
+  singularLabel?: unknown;
+};
+
+type Translate = ReturnType<typeof useTranslate>;
+type UserFriendlyName = ReturnType<typeof useUserFriendlyName>;
+
+function translateWithFallback(
+  translate: Translate,
+  key: string,
+  fallback: string,
+  options?: TranslationOptions
+) {
+  const translated = options
+    ? translate(key, options, fallback)
+    : translate(key, fallback);
+
+  return !translated || translated === key ? fallback : translated;
+}
+
+function resolveExplicitLabel(value: unknown, translate: Translate) {
+  if (typeof value !== "string") {
+    return value == null ? undefined : String(value);
+  }
+
+  const expression = parseTranslationExpression(value);
+  if (!expression) return value;
+
+  const fallback = expression.options?.defaultValue ?? expression.key;
+  return translateWithFallback(
+    translate,
+    expression.key,
+    fallback,
+    expression.options
+  );
+}
+
+export function getResourceLabel(
+  resource: IResourceItem | undefined,
+  form: ResourceLabelForm,
+  translate: Translate,
+  getUserFriendlyName: UserFriendlyName,
+  fallbackIdentifier?: string
+) {
+  const meta = resource?.meta as ResourceLabelMeta | undefined;
+  const topLevelLabel = (
+    resource as (IResourceItem & { label?: unknown }) | undefined
+  )?.label;
+  const explicitLabel =
+    form === "singular"
+      ? meta?.singularLabel ?? meta?.label ?? topLevelLabel
+      : meta?.label ?? topLevelLabel;
+  const fallback =
+    resolveExplicitLabel(explicitLabel, translate) ??
+    getUserFriendlyName(
+      fallbackIdentifier ?? resource?.identifier ?? resource?.name ?? "",
+      form
+    );
+  const i18nKey =
+    form === "singular"
+      ? meta?.i18nSingularKey ?? meta?.i18nKey
+      : meta?.i18nKey;
+
+  return i18nKey
+    ? translateWithFallback(translate, i18nKey, fallback, meta?.i18nOptions)
+    : fallback;
+}
+
+export function useResourceLabel(
+  resource: IResourceItem | undefined,
+  form: ResourceLabelForm,
+  fallbackIdentifier?: string
+) {
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  return getResourceLabel(
+    resource,
+    form,
+    translate,
+    getUserFriendlyName,
+    fallbackIdentifier
+  );
+}

package/src/components/resources/views/create-view.tsx

@@ -1,15 +1,12 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import {
-  useBack,
-  useResourceParams,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useBack, useResourceParams, useTranslate } from "@refinedev/core";
 import type { PropsWithChildren } from "react";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { ArrowLeftIcon } from "lucide-react";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 type CreateViewProps = PropsWithChildren<{
   className?: string;
@@ -38,18 +35,25 @@ export const CreateViewHeader = ({
   headerClassName,
 }: CreateHeaderProps) => {
   const back = useBack();
-
-  const getUserFriendlyName = useUserFriendlyName();
+  const translate = useTranslate();
 
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
   });
 
-  const resourceTitle = getUserFriendlyName(
-    resource?.meta?.label ?? identifier ?? resource?.name,
-    "singular"
+  const resourceTitle = useResourceLabel(resource, "singular", identifier);
+  const title =
+    titleFromProps ??
+    translate(
+      "views.create.title",
+      { resource: resourceTitle },
+      `Create ${resourceTitle}`
+    );
+  const description = translate(
+    "views.create.description",
+    { resource: resourceTitle.toLocaleLowerCase() },
+    `Add a new ${resourceTitle.toLocaleLowerCase()} to your NocoBase workspace.`
   );
-  const title = titleFromProps ?? `Create ${resourceTitle}`;
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
@@ -62,6 +66,7 @@ export const CreateViewHeader = ({
           size="icon"
           className="mt-0.5 rounded-lg"
           onClick={back}
+          aria-label={translate("buttons.cancel", "Cancel")}
         >
           <ArrowLeftIcon className="h-4 w-4" />
         </Button>
@@ -69,9 +74,7 @@ export const CreateViewHeader = ({
           <h2 className="text-3xl font-semibold tracking-[-0.035em]">
             {title}
           </h2>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Add a new {resourceTitle.toLowerCase()} to your NocoBase workspace.
-          </p>
+          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
         </div>
       </div>
     </div>