@nocobase/app-template-default 1.0.0-beta.83 → 1.0.0-beta.85

package/client/extensions/nocobase-auth-forms/password-login-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -11,7 +12,7 @@ import { FieldGroup } from '#components/ui/field';
 import { Input } from '#components/ui/input';
 
 import { invalidProps } from './field-props.js';
-import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { AuthField, AuthFormSubmit } from './form-parts.js';
 import { PasswordInput } from './password-input.js';
 
 export interface PasswordLoginValues {
@@ -71,13 +72,21 @@ export function PasswordLoginForm({
   const [identifier, setIdentifier] = useState('');
   const [password, setPassword] = useState('');
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
-    void onSubmit({ identifier: identifier.trim(), password });
+    await onSubmit({ identifier: identifier.trim(), password });
   };
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField
           error={fieldErrors?.identifier}
@@ -88,6 +97,7 @@ export function PasswordLoginForm({
             autoComplete='username'
             autoFocus
             id={identifierId}
+            name='identifier'
             onChange={(event) => setIdentifier(event.target.value)}
             required
             value={identifier}
@@ -104,6 +114,7 @@ export function PasswordLoginForm({
             autoComplete='current-password'
             hideLabel={labels.hidePassword}
             id={passwordId}
+            name='password'
             onChange={(event) => setPassword(event.target.value)}
             required
             showLabel={labels.showPassword}
@@ -111,13 +122,13 @@ export function PasswordLoginForm({
             {...invalidProps(passwordId, fieldErrors?.password)}
           />
         </AuthField>
-        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+
         <AuthFormSubmit footer={footer}>
           <Button className='w-full' disabled={submitting} type='submit'>
             {submitting ? labels.submitting : labels.submit}
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-auth-forms/password-registration-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -11,7 +12,7 @@ import { FieldGroup } from '#components/ui/field';
 import { Input } from '#components/ui/input';
 
 import { invalidProps } from './field-props.js';
-import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { AuthField, AuthFormSubmit } from './form-parts.js';
 
 export interface PasswordRegistrationValues {
   readonly name: string;
@@ -91,14 +92,16 @@ export function PasswordRegistrationForm({
     (event: { target: { value: string } }): void =>
       setValues((current) => ({ ...current, [field]: event.target.value }));
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
     if (values.password !== values.confirmation) {
       setMismatch(true);
       return;
     }
     setMismatch(false);
-    void onSubmit({
+    await onSubmit({
       name: values.name.trim(),
       username: values.username.trim(),
       email: values.email.trim(),
@@ -106,16 +109,26 @@ export function PasswordRegistrationForm({
     });
   };
 
-  const confirmationError = mismatch ? labels.passwordMismatch : undefined;
+  const confirmationError =
+    mismatch && values.password !== values.confirmation
+      ? labels.passwordMismatch
+      : undefined;
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField error={fieldErrors?.name} id={ids.name} label={labels.name}>
           <Input
             autoComplete='name'
             autoFocus
             id={ids.name}
+            name='name'
             onChange={set('name')}
             required
             value={values.name}
@@ -130,6 +143,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='username'
             id={ids.username}
+            name='username'
             onChange={set('username')}
             required
             value={values.username}
@@ -144,6 +158,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='email'
             id={ids.email}
+            name='email'
             onChange={set('email')}
             required
             type='email'
@@ -159,6 +174,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='new-password'
             id={ids.password}
+            name='password'
             onChange={set('password')}
             required
             type='password'
@@ -174,6 +190,7 @@ export function PasswordRegistrationForm({
           <Input
             autoComplete='new-password'
             id={ids.confirmation}
+            name='confirmation'
             onChange={set('confirmation')}
             required
             type='password'
@@ -181,13 +198,13 @@ export function PasswordRegistrationForm({
             {...invalidProps(ids.confirmation, confirmationError)}
           />
         </AuthField>
-        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+
         <AuthFormSubmit footer={footer}>
           <Button className='w-full' disabled={submitting} type='submit'>
             {submitting ? labels.submitting : labels.submit}
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-auth-forms/password-reset-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -11,7 +12,7 @@ import { FieldGroup } from '#components/ui/field';
 import { Input } from '#components/ui/input';
 
 import { invalidProps } from './field-props.js';
-import { AuthField, AuthFormStatus, AuthFormSubmit } from './form-parts.js';
+import { AuthField, AuthFormSubmit } from './form-parts.js';
 
 export interface PasswordResetValues {
   readonly password: string;
@@ -66,7 +67,9 @@ export function PasswordResetForm({
   const [confirmation, setConfirmation] = useState('');
   const [mismatch, setMismatch] = useState(false);
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
     if (disabled) return;
     if (password !== confirmation) {
@@ -74,13 +77,20 @@ export function PasswordResetForm({
       return;
     }
     setMismatch(false);
-    void onSubmit({ password });
+    await onSubmit({ password });
   };
 
-  const confirmationError = mismatch ? labels.passwordMismatch : undefined;
+  const confirmationError =
+    mismatch && password !== confirmation ? labels.passwordMismatch : undefined;
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField
           error={fieldErrors?.password}
@@ -92,6 +102,7 @@ export function PasswordResetForm({
             autoFocus
             disabled={disabled}
             id={passwordId}
+            name='password'
             onChange={(event) => setPassword(event.target.value)}
             required
             type='password'
@@ -108,6 +119,7 @@ export function PasswordResetForm({
             autoComplete='new-password'
             disabled={disabled}
             id={confirmationId}
+            name='confirmation'
             onChange={(event) => setConfirmation(event.target.value)}
             required
             type='password'
@@ -115,7 +127,7 @@ export function PasswordResetForm({
             {...invalidProps(confirmationId, confirmationError)}
           />
         </AuthField>
-        {error ? <AuthFormStatus type='error'>{error}</AuthFormStatus> : null}
+
         <AuthFormSubmit footer={footer}>
           <Button
             className='w-full'
@@ -127,6 +139,6 @@ export function PasswordResetForm({
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-auth-forms/password-reset-request-form.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import {
   useId,
   useState,
@@ -63,19 +64,28 @@ export function PasswordResetRequestForm({
   const emailId = `${useId()}-email`;
   const [email, setEmail] = useState('');
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+  const handleSubmit = async (
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> => {
     event.preventDefault();
-    void onSubmit({ email: email.trim() });
+    await onSubmit({ email: email.trim() });
   };
 
   return (
-    <form className={className} onSubmit={handleSubmit}>
+    <FeedbackForm
+      submitting={submitting}
+      error={error}
+      errorContent={error}
+      className={className}
+      onSubmit={handleSubmit}
+    >
       <FieldGroup>
         <AuthField error={fieldErrors?.email} id={emailId} label={labels.email}>
           <Input
             autoComplete='email'
             autoFocus
             id={emailId}
+            name='email'
             onChange={(event) => setEmail(event.target.value)}
             required
             type='email'
@@ -83,9 +93,7 @@ export function PasswordResetRequestForm({
             {...invalidProps(emailId, fieldErrors?.email)}
           />
         </AuthField>
-        {error ? (
-          <AuthFormStatus type='error'>{error}</AuthFormStatus>
-        ) : success ? (
+        {!error && success ? (
           <AuthFormStatus type='success'>{labels.success}</AuthFormStatus>
         ) : null}
         <AuthFormSubmit footer={footer}>
@@ -94,6 +102,6 @@ export function PasswordResetRequestForm({
           </Button>
         </AuthFormSubmit>
       </FieldGroup>
-    </form>
+    </FeedbackForm>
   );
 }

package/client/extensions/nocobase-device-approval/device-approval.tsx

@@ -1,3 +1,4 @@
+import { FeedbackForm } from '#components/feedback-form';
 import { useTranslation } from '@nocobase/i18n/client';
 import { CircleAlert, CircleCheck, CircleX, Clock } from 'lucide-react';
 import {
@@ -125,7 +126,10 @@ function CodeEntry({
     if (code) onSubmit(formatUserCode(code));
   };
   return (
-    <form className={cn('flex flex-col gap-6', className)} onSubmit={submit}>
+    <FeedbackForm
+      className={cn('flex flex-col gap-6', className)}
+      onSubmit={submit}
+    >
       <FieldGroup>
         <Field>
           <FieldLabel htmlFor={id}>
@@ -137,6 +141,7 @@ function CodeEntry({
             autoFocus
             className='font-mono tracking-widest uppercase'
             id={id}
+            name='userCode'
             onChange={(event) => setTyped(event.target.value)}
             placeholder='ABCD-EFGH'
             spellCheck={false}
@@ -152,7 +157,7 @@ function CodeEntry({
       <Button disabled={typed.trim() === ''} type='submit'>
         {t('deviceApproval.continue', { defaultValue: 'Continue' })}
       </Button>
-    </form>
+    </FeedbackForm>
   );
 }
 

package/client/extensions/nocobase-device-approval/locales/en-US.ts

@@ -1,5 +1,12 @@
 /** Every key the device approval looks up, so each locale is checked against the same list. */
 export interface DeviceApprovalLocale {
+  readonly formFeedback: {
+    readonly field: string;
+    readonly invalid: string;
+    readonly failed: string;
+    readonly network: string;
+    readonly denied: string;
+  };
   readonly 'deviceApproval.title': string;
   readonly 'deviceApproval.description': string;
   readonly 'deviceApproval.enterCode': string;
@@ -23,6 +30,15 @@ export interface DeviceApprovalLocale {
 }
 
 const enUS: DeviceApprovalLocale = {
+  formFeedback: {
+    field: 'This value was rejected. Check it and try again.',
+    invalid: 'Check the highlighted fields and try again.',
+    failed: 'Unable to save. Your input has been kept. Try again.',
+    network:
+      'Unable to connect. Check your connection and try again. Your input has been kept.',
+    denied:
+      'You cannot submit this form with your current access. Your input has been kept.',
+  },
   'deviceApproval.title': 'Authorize a device',
   'deviceApproval.description':
     'A command line or another device asked to sign in as you. Approve it only if you started the sign-in yourself.',

package/client/extensions/nocobase-device-approval/locales/zh-CN.ts

@@ -1,6 +1,13 @@
 import type { DeviceApprovalLocale } from './en-US.js';
 
 const zhCN: DeviceApprovalLocale = {
+  formFeedback: {
+    field: '此字段的值未通过校验，请检查并修改后重试。',
+    invalid: '请检查标记的字段后重试。',
+    failed: '保存失败，已保留您的输入，请重试。',
+    network: '无法连接，请检查网络后重试。已保留您的输入。',
+    denied: '当前权限无法提交此表单。已保留您的输入。',
+  },
   'deviceApproval.title': '授权设备',
   'deviceApproval.description':
     '一个命令行或其他设备请求以你的身份登录。只有在登录是你自己发起的时候才批准。',

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

@@ -86,10 +86,28 @@ function OpenFilePreviewDialog(
       >
         <div className='flex items-center justify-between gap-3 pr-10'>
           <div className='min-w-0'>
-            <DialogTitle className='truncate'>{file.filename}</DialogTitle>
+            <div className='flex min-w-0 items-center gap-2'>
+              <DialogTitle className='truncate'>{file.filename}</DialogTitle>
+              {allowDownload ? (
+                <Button
+                  type='button'
+                  size='icon'
+                  className='shrink-0'
+                  variant='ghost'
+                  aria-label={`${downloadLabel}: ${file.filename}`}
+                  onClick={() =>
+                    void downloadFile(file, onDownload).catch(
+                      (error: unknown) => reportDownloadError(onError, error),
+                    )
+                  }
+                >
+                  <Download aria-hidden='true' />
+                </Button>
+              ) : null}
+            </div>
             <p className='text-sm text-muted-foreground'>{file.mimeType}</p>
           </div>
-          <div className='flex gap-1'>
+          <div className='flex shrink-0 gap-1'>
             {files.length > 1 ? (
               <>
                 <Button
@@ -122,21 +140,6 @@ function OpenFilePreviewDialog(
                 </Button>
               </>
             ) : null}
-            {allowDownload ? (
-              <Button
-                type='button'
-                size='icon'
-                variant='ghost'
-                aria-label={`${downloadLabel}: ${file.filename}`}
-                onClick={() =>
-                  void downloadFile(file, onDownload).catch((error: unknown) =>
-                    reportDownloadError(onError, error),
-                  )
-                }
-              >
-                <Download aria-hidden='true' />
-              </Button>
-            ) : null}
           </div>
         </div>
         {/* Only the preview scrolls; the title and its actions stay in view. */}

package/client/extensions/nocobase-workflow-management/README.md

@@ -1,6 +1,6 @@
 # Workflow management
 
-Install with `yes n | pnpm exec shadcn add @nocobase/workflow-management`. This block provides the workflow example's administration layout and interactions as presentational parts in `client/extensions/nocobase-workflow-management/`. Read `@nocobase/workflow-management-demo` for a standalone composition. Every label and formatted value is supplied by the caller; the block imports no example plugin, API client, authorization provider or router.
+Install with `yes n | pnpm exec shadcn add @nocobase/workflow-management`. This block provides the workflow example's administration layout and interactions as presentational parts in `client/extensions/nocobase-workflow-management/`. Read `@nocobase/workflow-management-demo` for a standalone composition. Business labels and formatted values are supplied by the caller; the block imports no example plugin, API client, authorization provider or router.
 
 | File                   | Exports and responsibility                                                                                                                                                         |
 | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -70,3 +70,5 @@ Connect `LifecycleDiagram.configuration` to the application's existing authorize
 Omit `WorkflowDefinitionDetail.parameters` when the editor opens contextually so the diagram spans the available width; keep the slot when the same editor is visible beside the diagram. No editor, API, sample business registration or menu is installed by this block. Definition and execution lists use the same TanStack DataTable as the templates, with no second local pagination over a server page.
 
 Ordering is optional: omit `onSort` when activity ordering is not supported so the header stays plain text. Omit a row's optional `name` when its linked `title` already supplies the complete display name. Hosts own filtering, pagination and their URL state; keep that state when opening and returning from a definition or execution.
+
+List hosts pass `listState={resolveListState(request, rows.length, hasEffectiveFilters)}` and `onClearFilters`, using the current request error and data. The DataTable dependency supplies shared loading, denial, session and failure copy; merge the `listFeedback` English/Chinese keys from the components README into application translations. `onRefresh` is reused for retry and must preserve the current query. Keep `loaded`, `loading`, custom `empty` content and existing permission checks when reconciling installed copies. A successful empty filter is `no-results`; an empty unfiltered read is `empty`. Hosts that retain the legacy status slot without a listState still own their error rendering.

package/client/extensions/nocobase-workflow-management/definition-list.tsx

@@ -1,3 +1,4 @@
+import type { ListState } from '@nocobase/app-client';
 import type { ReactElement, ReactNode } from 'react';
 import type {
   CellContext,
@@ -16,13 +17,15 @@ export interface WorkflowDefinitionRow {
   activity: ReactNode;
 }
 export interface WorkflowDefinitionListProps {
+  listState?: ListState;
+  onClearFilters?: () => void;
   rows: readonly WorkflowDefinitionRow[];
   categories?: ReactNode;
   search: ReactNode;
   status?: ReactNode;
   loaded: boolean;
   loading: boolean;
-  empty: ReactNode;
+  empty?: ReactNode;
   labels: {
     refresh: string;
     workflow: string;
@@ -39,6 +42,8 @@ type DefinitionActivityMeta = ColumnMeta<WorkflowDefinitionRow, unknown> &
 
 export function WorkflowDefinitionList({
   rows,
+  listState,
+  onClearFilters,
   categories,
   search,
   status,
@@ -71,10 +76,22 @@ export function WorkflowDefinitionList({
           </Button>
         </div>
         {status}
-        {loaded && rows.length > 0 && (
+        {(listState !== undefined || loaded || loading) && (
           <div className='bg-card'>
             <DataTable
               data={rows}
+              loading={loading}
+              listState={
+                listState ??
+                (!loaded ? 'loading' : rows.length ? 'ready' : 'empty')
+              }
+              onRetry={onRefresh}
+              onClearFilters={onClearFilters}
+              emptyMessage={
+                <Empty>
+                  <EmptyDescription>{empty}</EmptyDescription>
+                </Empty>
+              }
               getRowId={(row) => row.id}
               pagination={false}
               manualSorting
@@ -100,11 +117,6 @@ export function WorkflowDefinitionList({
             />
           </div>
         )}
-        {loaded && rows.length === 0 && (
-          <Empty>
-            <EmptyDescription>{empty}</EmptyDescription>
-          </Empty>
-        )}
       </div>
     </section>
   );

package/client/extensions/nocobase-workflow-management/execution-list.tsx

@@ -1,3 +1,4 @@
+import type { ListState } from '@nocobase/app-client';
 import type { ReactElement, ReactNode } from 'react';
 import type {
   CellContext,
@@ -17,12 +18,14 @@ export interface WorkflowExecutionRow {
   createdAt: ReactNode;
 }
 export interface WorkflowExecutionListProps {
+  listState?: ListState;
+  onClearFilters?: () => void;
   rows: readonly WorkflowExecutionRow[];
   loaded: boolean;
   loading: boolean;
   filters: ReactNode;
   status?: ReactNode;
-  empty: ReactNode;
+  empty?: ReactNode;
   labels: {
     refresh: string;
     record: string;
@@ -47,6 +50,8 @@ type ExecutionDateMeta = ColumnMeta<WorkflowExecutionRow, unknown> &
 
 export function WorkflowExecutionList({
   rows,
+  listState,
+  onClearFilters,
   loaded,
   loading,
   filters,
@@ -72,53 +77,61 @@ export function WorkflowExecutionList({
         </Button>
       </div>
       {status}
-      <div className='bg-card'>
-        <DataTable
-          data={rows}
-          getRowId={(row) => row.id}
-          pagination={false}
-          manualSorting
-          sortingState={[{ id: 'createdAt', desc: order === 'newest' }]}
-          loading={loading}
-          emptyMessage={
-            loaded ? (
-              <Empty>
-                <EmptyDescription>{empty}</EmptyDescription>
-              </Empty>
-            ) : (
-              ''
-            )
-          }
-          columns={[
-            {
-              id: 'record',
-              header: labels.record,
-              enableSorting: false,
-              cell: ExecutionRecordCell,
-            },
-            {
-              id: 'workflow',
-              header: labels.workflow,
-              enableSorting: false,
-              cell: ExecutionWorkflowCell,
-            },
-            {
-              id: 'state',
-              header: labels.state,
-              enableSorting: false,
-              cell: ExecutionStateCell,
-            },
-            {
-              id: 'createdAt',
-              accessorFn: (row) => row.createdAt,
-              enableSorting: true,
-              meta: activityMeta,
-              header: ExecutionDateHeader,
-              cell: ExecutionCreatedAtCell,
-            },
-          ]}
-        />
-      </div>
+      {(listState !== undefined || loaded || loading) && (
+        <div className='bg-card'>
+          <DataTable
+            data={rows}
+            listState={
+              listState ??
+              (!loaded ? 'loading' : rows.length ? 'ready' : 'empty')
+            }
+            onRetry={onRefresh}
+            onClearFilters={onClearFilters}
+            getRowId={(row) => row.id}
+            pagination={false}
+            manualSorting
+            sortingState={[{ id: 'createdAt', desc: order === 'newest' }]}
+            loading={loading}
+            emptyMessage={
+              loaded ? (
+                <Empty>
+                  <EmptyDescription>{empty}</EmptyDescription>
+                </Empty>
+              ) : (
+                ''
+              )
+            }
+            columns={[
+              {
+                id: 'record',
+                header: labels.record,
+                enableSorting: false,
+                cell: ExecutionRecordCell,
+              },
+              {
+                id: 'workflow',
+                header: labels.workflow,
+                enableSorting: false,
+                cell: ExecutionWorkflowCell,
+              },
+              {
+                id: 'state',
+                header: labels.state,
+                enableSorting: false,
+                cell: ExecutionStateCell,
+              },
+              {
+                id: 'createdAt',
+                accessorFn: (row) => row.createdAt,
+                enableSorting: true,
+                meta: activityMeta,
+                header: ExecutionDateHeader,
+                cell: ExecutionCreatedAtCell,
+              },
+            ]}
+          />
+        </div>
+      )}
       <div className='flex flex-wrap items-center justify-between gap-3 text-sm'>
         <p>{pagination}</p>
         <div className='flex gap-2'>