@nocobase/app-template-default 1.0.0-beta.80 → 1.0.0-beta.82

package/client/components/back-button.tsx

@@ -1,14 +1,16 @@
 import { useTranslation } from '@nocobase/i18n/client';
 import { ArrowLeftIcon } from 'lucide-react';
 import type { ReactElement, ReactNode } from 'react';
-import { Link, type To, useLocation } from 'react-router';
+import { Link, type To, useLocation, useResolvedPath } from 'react-router';
+
+import { useRouteSearches } from '../routing/route-context.js';
 
 import { cn } from 'cn';
 
 export interface BackButtonProps {
   /**
-   * Where it leads. Defaults to the parent route with the current query string, as closing a route overlay does, so
-   * the list a child page covers keeps its search and filters.
+   * Where it leads. Defaults to the parent route with its last visited query; a directly opened detail falls back
+   * to the current query, as closing a route overlay does. An explicit destination is kept unchanged.
    */
   readonly to?: To;
   /** The label, "Back" by default. */
@@ -32,6 +34,8 @@ export function BackButton({
 }: BackButtonProps = {}): ReactElement {
   const { t } = useTranslation();
   const location = useLocation();
+  const parent = useResolvedPath('..');
+  const searches = useRouteSearches();
 
   return (
     <Link
@@ -40,7 +44,14 @@ export function BackButton({
         'inline-flex w-fit items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground',
         className,
       )}
-      to={to ?? { pathname: '..', search: location.search }}
+      to={
+        to ?? {
+          pathname: '..',
+          search:
+            searches.get(parent.pathname.replace(/\/+$/u, '') || '/') ??
+            location.search,
+        }
+      }
     >
       <ArrowLeftIcon className='size-4' />
       {children ?? t('navigation.back', { defaultValue: 'Back' })}

package/client/components/breadcrumbs.tsx

@@ -23,6 +23,7 @@ import { cn } from 'cn';
 
 import {
   useRouteTrail,
+  useRouteSearches,
   type RouteTrailEntry,
 } from '../routing/route-context.js';
 import { routeKey } from '../routing/route-navigation.js';
@@ -51,6 +52,7 @@ export function Breadcrumbs({
   denied,
 }: BreadcrumbsProps = {}): ReactElement | null {
   const trail = useRouteTrail();
+  const searches = useRouteSearches();
   const declared = usePageBreadcrumbLevels();
   const { t } = useTranslation();
   const trailLevels =
@@ -64,7 +66,16 @@ export function Breadcrumbs({
             ns: entry.route.packageName,
             defaultValue: title,
           }),
-          ...(entry.route.componentLoader ? { to: entry.pathname } : {}),
+          ...(entry.route.componentLoader
+            ? {
+                to: {
+                  pathname: entry.pathname,
+                  search:
+                    searches.get(entry.pathname.replace(/\/+$/u, '') || '/') ??
+                    '',
+                },
+              }
+            : {}),
         },
       ];
     });

package/client/extensions/nocobase-file-component-ui/components/file-list.tsx

@@ -1,12 +1,13 @@
 import { useTranslation } from '@nocobase/i18n/client';
-import { Download, Eye, Trash2 } from 'lucide-react';
 import { useState, type ReactElement } from 'react';
 
-import type { FileListProps, FileRecord } from '../types';
-import { Button } from '#components/ui/button';
-import { resolveSafeFileUrl } from '../lib/file-url';
-import { FilePreviewDialog } from './file-preview-dialog';
-import { FileThumbnail } from './file-thumbnail';
+import type { FileListProps, FileRecord } from '../types.js';
+import {
+  AttachmentList,
+  type AttachmentFile,
+} from '#components/attachment-list';
+import { resolveSafeFileUrl } from '../lib/file-url.js';
+import { FilePreviewDialog } from './file-preview-dialog.js';
 
 function triggerDownload(url: string, filename: string): void {
   const link = document.createElement('a');
@@ -17,7 +18,7 @@ function triggerDownload(url: string, filename: string): void {
 }
 
 export function FileList(inputProps: FileListProps): ReactElement {
-  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { t } = useTranslation();
   const {
     files,
     onPreview,
@@ -31,18 +32,19 @@ export function FileList(inputProps: FileListProps): ReactElement {
   const [previewIndex, setPreviewIndex] = useState(0);
   const [previewOpen, setPreviewOpen] = useState(false);
   const previewLabel =
-    labels?.preview ?? t('files.preview', { defaultValue: 'Preview' });
+    labels?.preview ?? t('fileUi.files.preview', { defaultValue: 'Preview' });
   const downloadLabel =
-    labels?.download ?? t('files.download', { defaultValue: 'Download' });
+    labels?.download ??
+    t('fileUi.files.download', { defaultValue: 'Download' });
   const removeLabel =
-    labels?.remove ?? t('files.remove', { defaultValue: 'Remove' });
+    labels?.remove ?? t('fileUi.files.remove', { defaultValue: 'Remove' });
 
   if (!files.length)
     return (
       <div role='status'>
         {emptyState ??
           labels?.empty ??
-          t('files.empty', { defaultValue: 'No files.' })}
+          t('fileUi.files.empty', { defaultValue: 'No files.' })}
       </div>
     );
 
@@ -56,7 +58,7 @@ export function FileList(inputProps: FileListProps): ReactElement {
       const url = raw ? resolveSafeFileUrl(raw) : undefined;
       if (!url)
         throw new Error(
-          t('urlNotAllowed', {
+          t('fileUi.urlNotAllowed', {
             defaultValue: 'File URL is not allowed.',
           }),
         );
@@ -66,7 +68,7 @@ export function FileList(inputProps: FileListProps): ReactElement {
         error instanceof Error
           ? error
           : new Error(
-              t('downloadFailed', {
+              t('fileUi.downloadFailed', {
                 defaultValue: 'File download failed.',
               }),
             ),
@@ -74,71 +76,66 @@ export function FileList(inputProps: FileListProps): ReactElement {
     });
   };
 
+  const attachments: readonly AttachmentFile[] = files.map((file) => ({
+    id: file.id,
+    name: file.filename,
+    size: Number(file.size),
+    url: file.contentUrl ? (resolveSafeFileUrl(file.contentUrl) ?? '') : '',
+    downloadUrl: file.contentUrl
+      ? (resolveSafeFileUrl(file.contentUrl) ?? '')
+      : '',
+    image: file.mimeType.startsWith('image/'),
+    canRemove: Boolean(onRemove),
+  }));
   return (
     <>
-      <ul data-slot='file-list' className='grid gap-3 sm:grid-cols-2'>
-        {files.map((file, index) => (
-          <li
-            key={file.id}
-            className='flex min-w-0 items-center gap-3 rounded-md border p-3'
-          >
-            <div className='h-12 w-12 shrink-0 overflow-hidden rounded-md'>
-              <FileThumbnail file={file} />
-            </div>
-            <div className='min-w-0 flex-1'>
-              <div className='truncate font-medium' title={file.filename}>
-                {file.filename}
-              </div>
-              <div className='text-sm text-muted-foreground'>
-                {file.mimeType}
-              </div>
-            </div>
-            <div className='flex shrink-0 items-center gap-1'>
-              <Button
-                type='button'
-                size='icon'
-                variant='ghost'
-                aria-label={`${previewLabel}: ${file.filename}`}
-                title={previewLabel}
-                onClick={() => {
-                  onPreview?.(file);
-                  setPreviewIndex(index);
-                  setPreviewOpen(true);
-                }}
-              >
-                <Eye aria-hidden='true' />
-              </Button>
-              <Button
-                type='button'
-                size='icon'
-                variant='ghost'
-                aria-label={`${downloadLabel}: ${file.filename}`}
-                title={downloadLabel}
-                onClick={() => downloadFile(file)}
-              >
-                <Download aria-hidden='true' />
-              </Button>
-              {onRemove ? (
-                <Button
-                  type='button'
-                  size='icon'
-                  variant='ghost'
-                  aria-label={`${removeLabel}: ${file.filename}`}
-                  title={removeLabel}
-                  onClick={() => void onRemove(file)}
-                >
-                  <Trash2 aria-hidden='true' />
-                </Button>
-              ) : null}
-            </div>
-          </li>
-        ))}
-      </ul>
+      <AttachmentList
+        files={attachments}
+        labels={{
+          title: '',
+          images: '',
+          files: '',
+          pending: '',
+          upload: '',
+          uploading: '',
+          removeTitle: '',
+          removeDescription: '',
+          removeConfirm: '',
+          cancel: '',
+          previous: '',
+          next: '',
+          preview: `${previewLabel}: {name}`,
+          download: `${downloadLabel}: {name}`,
+          remove: `${removeLabel}: {name}`,
+        }}
+        onPreview={(ordered, index) => {
+          const selected = files.findIndex(
+            (file) => file.id === ordered[index]?.id,
+          );
+          if (selected < 0) return;
+          onPreview?.(files[selected]);
+          setPreviewIndex(selected);
+          setPreviewOpen(true);
+        }}
+        onDownload={(item) => {
+          const file = files.find((file) => file.id === item.id);
+          if (file) downloadFile(file);
+        }}
+        onRemove={
+          onRemove
+            ? (item) => {
+                const file = files.find((file) => file.id === item.id);
+                if (file) void onRemove(file);
+              }
+            : undefined
+        }
+      />
       <FilePreviewDialog
         files={files}
         initialIndex={previewIndex}
         open={previewOpen}
         onOpenChange={setPreviewOpen}
+        onDownload={onDownload}
         labels={labels}
         onError={onError}
       />

package/client/extensions/nocobase-file-component-ui/components/file-preview-dialog.tsx

@@ -6,16 +6,16 @@ import type {
   FilePreviewDialogProps,
   FileRecord,
   FileUiLabels,
-} from '../types';
+} from '../types.js';
 import {
   isActiveMarkupMimeType,
   resolveFilePreviewKind,
   type FilePreviewKind,
-} from '../lib/file-preview';
+} from '../lib/file-preview.js';
 import { Button } from '#components/ui/button';
 import { Dialog, DialogContent, DialogTitle } from '#components/ui/dialog';
-import { fileUrlCredentials, resolveSafeFileUrl } from '../lib/file-url';
-import { FilePreviewContent } from './previewers/file-preview-content';
+import { fileUrlCredentials, resolveSafeFileUrl } from '../lib/file-url.js';
+import { FilePreviewContent } from './previewers/file-preview-content.js';
 
 const PDF_MIME_TYPE = 'application/pdf';
 const PDF_PREVIEW_ERROR = 'Unable to load the PDF preview.';
@@ -27,6 +27,7 @@ export function FilePreviewDialog({
   initialIndex = 0,
   open,
   onOpenChange,
+  onDownload,
   download: allowDownload = true,
   labels,
   onError,
@@ -39,6 +40,7 @@ export function FilePreviewDialog({
       files={files}
       initialIndex={normalizedIndex}
       onOpenChange={onOpenChange}
+      onDownload={onDownload}
       download={allowDownload}
       labels={labels}
       onError={onError}
@@ -50,6 +52,7 @@ interface OpenFilePreviewDialogProps {
   readonly files: readonly FileRecord[];
   readonly initialIndex: number;
   readonly onOpenChange: (open: boolean) => void;
+  readonly onDownload?: FilePreviewDialogProps['onDownload'];
   readonly download: boolean;
   readonly labels?: FileUiLabels;
   readonly onError?: (error: Error) => void;
@@ -58,11 +61,12 @@ interface OpenFilePreviewDialogProps {
 function OpenFilePreviewDialog(
   inputProps: OpenFilePreviewDialogProps,
 ): ReactElement {
-  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { t } = useTranslation();
   const {
     files,
     initialIndex,
     onOpenChange,
+    onDownload,
     download: allowDownload,
     labels,
     onError,
@@ -72,7 +76,8 @@ function OpenFilePreviewDialog(
   const file = files[index];
   if (!file) throw new Error('A preview file is required.');
   const downloadLabel =
-    labels?.download ?? t('files.download', { defaultValue: 'Download' });
+    labels?.download ??
+    t('fileUi.files.download', { defaultValue: 'Download' });
   return (
     <Dialog open onOpenChange={onOpenChange}>
       <DialogContent
@@ -91,7 +96,7 @@ function OpenFilePreviewDialog(
                   type='button'
                   size='icon'
                   variant='ghost'
-                  aria-label={t('files.previous', {
+                  aria-label={t('fileUi.files.previous', {
                     defaultValue: 'Previous file',
                   })}
                   onClick={() =>
@@ -106,7 +111,9 @@ function OpenFilePreviewDialog(
                   type='button'
                   size='icon'
                   variant='ghost'
-                  aria-label={t('files.next', { defaultValue: 'Next file' })}
+                  aria-label={t('fileUi.files.next', {
+                    defaultValue: 'Next file',
+                  })}
                   onClick={() =>
                     setIndex((value) => (value + 1) % files.length)
                   }
@@ -122,7 +129,7 @@ function OpenFilePreviewDialog(
                 variant='ghost'
                 aria-label={`${downloadLabel}: ${file.filename}`}
                 onClick={() =>
-                  void downloadFile(file).catch((error: unknown) =>
+                  void downloadFile(file, onDownload).catch((error: unknown) =>
                     reportDownloadError(onError, error),
                   )
                 }
@@ -140,8 +147,8 @@ function OpenFilePreviewDialog(
             onDownload={
               allowDownload
                 ? () =>
-                    void downloadFile(file).catch((error: unknown) =>
-                      reportDownloadError(onError, error),
+                    void downloadFile(file, onDownload).catch(
+                      (error: unknown) => reportDownloadError(onError, error),
                     )
                 : undefined
             }
@@ -152,7 +159,14 @@ function OpenFilePreviewDialog(
   );
 }
 
-async function downloadFile(file: FileRecord): Promise<void> {
+async function downloadFile(
+  file: FileRecord,
+  onDownload?: FilePreviewDialogProps['onDownload'],
+): Promise<void> {
+  if (onDownload) {
+    await onDownload(file);
+    return;
+  }
   const raw = file.contentUrl;
   const url = raw ? resolveSafeFileUrl(raw) : undefined;
   if (!url) throw new Error('File URL is not allowed.');

package/client/extensions/nocobase-file-component-ui/components/file-preview-field.tsx

@@ -1,14 +1,14 @@
 import { useTranslation } from '@nocobase/i18n/client';
 import { useState, type ReactElement } from 'react';
-import type { FilePreviewFieldProps } from '../types';
+import type { FilePreviewFieldProps } from '../types.js';
 import { Button } from '#components/ui/button';
-import { FilePreviewDialog } from './file-preview-dialog';
-import { FileThumbnail } from './file-thumbnail';
+import { FilePreviewDialog } from './file-preview-dialog.js';
+import { FileThumbnail } from './file-thumbnail.js';
 
 export function FilePreviewField(
   inputProps: FilePreviewFieldProps,
 ): ReactElement {
-  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { t } = useTranslation();
   const {
     files,
     labels,
@@ -24,7 +24,7 @@ export function FilePreviewField(
       <>
         {emptyState ?? (
           <span role='status'>
-            {t('files.empty', { defaultValue: 'No files.' })}
+            {t('fileUi.files.empty', { defaultValue: 'No files.' })}
           </span>
         )}
       </>
@@ -39,7 +39,7 @@ export function FilePreviewField(
               variant='ghost'
               size='icon'
               className='h-12 w-12 overflow-hidden'
-              aria-label={`${labels?.preview ?? t('files.preview', { defaultValue: 'Preview' })}: ${file.filename}`}
+              aria-label={`${labels?.preview ?? t('fileUi.files.preview', { defaultValue: 'Preview' })}: ${file.filename}`}
               onClick={() => {
                 setInitialIndex(index);
                 setOpen(true);

package/client/extensions/nocobase-file-component-ui/components/file-thumbnail.tsx

@@ -8,9 +8,9 @@ import {
 } from 'lucide-react';
 import { useState, type ReactElement } from 'react';
 
-import { isSafeImagePreview } from '../lib/file-preview';
-import type { FileThumbnailProps } from '../types';
-import { resolveSafeFileUrl } from '../lib/file-url';
+import { isSafeImagePreview } from '../lib/file-preview.js';
+import type { FileThumbnailProps } from '../types.js';
+import { resolveSafeFileUrl } from '../lib/file-url.js';
 
 function extension(filename: string): string {
   const dot = filename.lastIndexOf('.');

package/client/extensions/nocobase-file-component-ui/components/file-upload-field.tsx

@@ -10,10 +10,10 @@ import {
   type ReactElement,
 } from 'react';
 
-import type { FileRecord, FileUploadFieldProps } from '../types';
+import type { FileRecord, FileUploadFieldProps } from '../types.js';
 import { Button } from '#components/ui/button';
 import { Spinner } from '#components/ui/spinner';
-import { FileThumbnail } from './file-thumbnail';
+import { FileThumbnail } from './file-thumbnail.js';
 
 type UploadItem = {
   readonly key: string;
@@ -40,7 +40,7 @@ function accepts(file: File, rules: readonly string[]): boolean {
 export function FileUploadField(
   inputProps: FileUploadFieldProps,
 ): ReactElement {
-  const { t } = useTranslation('@nocobase/app-plugin-file');
+  const { t } = useTranslation();
   const {
     repository,
     value,
@@ -69,12 +69,12 @@ export function FileUploadField(
   const chooseLabel =
     labels?.choose ??
     (multiple
-      ? t('files.chooseMany', { defaultValue: 'Choose files' })
-      : t('files.chooseOne', { defaultValue: 'Choose file' }));
+      ? t('fileUi.files.chooseMany', { defaultValue: 'Choose files' })
+      : t('fileUi.files.chooseOne', { defaultValue: 'Choose file' }));
   const removeLabel =
-    labels?.remove ?? t('files.remove', { defaultValue: 'Remove' });
+    labels?.remove ?? t('fileUi.files.remove', { defaultValue: 'Remove' });
   const retryLabel =
-    labels?.retry ?? t('files.retry', { defaultValue: 'Retry' });
+    labels?.retry ?? t('fileUi.files.retry', { defaultValue: 'Retry' });
 
   useEffect(() => {
     valueRef.current = value;
@@ -170,7 +170,7 @@ export function FileUploadField(
     if (files.length + (multiple ? value.length : 0) + items.length > maximum) {
       onError?.(
         new Error(
-          t('fileLimitReached', {
+          t('fileUi.fileLimitReached', {
             defaultValue: 'The maximum number of files has been reached.',
           }),
         ),
@@ -181,7 +181,7 @@ export function FileUploadField(
       if (maxSize !== undefined && file.size > maxSize) {
         onError?.(
           new Error(
-            t('fileTooLarge', {
+            t('fileUi.fileTooLarge', {
               defaultValue: 'File exceeds the maximum size.',
             }),
           ),
@@ -191,7 +191,7 @@ export function FileUploadField(
       if (!accepts(file, accept)) {
         onError?.(
           new Error(
-            t('fileTypeNotAllowed', {
+            t('fileUi.fileTypeNotAllowed', {
               defaultValue: 'File type is not allowed.',
             }),
           ),
@@ -218,7 +218,7 @@ export function FileUploadField(
           error instanceof Error
             ? error
             : new Error(
-                t('removalFailed', {
+                t('fileUi.removalFailed', {
                   defaultValue: 'File removal failed.',
                 }),
               ),
@@ -272,7 +272,7 @@ export function FileUploadField(
               {record.filename}
             </div>
             <div className='text-xs text-muted-foreground'>
-              {t('files.done', { defaultValue: 'Done' })}
+              {t('fileUi.files.done', { defaultValue: 'Done' })}
             </div>
             <Button
               type='button'
@@ -291,7 +291,7 @@ export function FileUploadField(
             <div className='flex h-20 items-center justify-center overflow-hidden rounded-sm bg-muted/30'>
               {item.status === 'uploading' ? (
                 <Spinner
-                  aria-label={t('files.uploading', {
+                  aria-label={t('fileUi.files.uploading', {
                     defaultValue: 'Uploading',
                   })}
                 />
@@ -309,10 +309,10 @@ export function FileUploadField(
                         defaultValue: item.error.message,
                       })
                     : undefined) ??
-                  t('files.failed', { defaultValue: 'Failed' }))
+                  t('fileUi.files.failed', { defaultValue: 'Failed' }))
                 : item.status === 'uploading'
-                  ? t('files.uploading', { defaultValue: 'Uploading' })
-                  : t('files.pending', { defaultValue: 'Pending' })}
+                  ? t('fileUi.files.uploading', { defaultValue: 'Uploading' })
+                  : t('fileUi.files.pending', { defaultValue: 'Pending' })}
             </div>
             <div className='mt-2 flex gap-1'>
               {item.status === 'error' ? (
@@ -331,7 +331,7 @@ export function FileUploadField(
                 type='button'
                 size='icon'
                 variant='ghost'
-                aria-label={t('files.cancelFile', {
+                aria-label={t('fileUi.files.cancelFile', {
                   filename: item.file.name,
                   defaultValue: `Cancel ${item.file.name}`,
                 })}
@@ -373,11 +373,11 @@ export function FileUploadField(
         {[
           ...value.map(
             (record) =>
-              `${record.filename}: ${t('files.done', { defaultValue: 'done' })}`,
+              `${record.filename}: ${t('fileUi.files.done', { defaultValue: 'done' })}`,
           ),
           ...items.map(
             (item) =>
-              `${item.file.name}: ${t(`files.status.${item.status}`, { defaultValue: item.status })}`,
+              `${item.file.name}: ${t(`fileUi.files.status.${item.status}`, { defaultValue: item.status })}`,
           ),
         ].join('. ')}
       </div>