@nocobase/app-template-default 1.0.0-beta.69 → 1.0.0-beta.70

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

@@ -0,0 +1,230 @@
+import { useState, type ReactElement, type ReactNode } from 'react';
+import { Button } from '#components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '#components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '#components/ui/table';
+
+export interface WorkflowHistoryEntry {
+  readonly id: string;
+  readonly version: number;
+  readonly at: string;
+  readonly transition: string;
+  readonly from: string | null;
+  readonly to: string;
+  readonly actorId?: string | null;
+}
+export interface WorkflowEffectEntry {
+  readonly id: string;
+  readonly effect: string;
+  readonly status: string;
+  readonly attempts: number;
+  readonly maxAttempts: number;
+  readonly error?: string | null;
+}
+export interface WorkflowExecutionLabels {
+  processDiagram: string;
+  history: string;
+  historyHint: string;
+  step: string;
+  transition: string;
+  from: string;
+  to: string;
+  actor: string;
+  time: string;
+  noHistory: string;
+  effects: string;
+  effect: string;
+  state: string;
+  attempts: string;
+  error: string;
+  noEffects: string;
+  executionParameters: string;
+  snapshotHint: string;
+  showStep: (step: number) => string;
+}
+/** Historical selection only changes the display; execution and recovery remain caller-owned. */
+export interface WorkflowExecutionDetailProps<T extends WorkflowHistoryEntry> {
+  transitions: readonly T[];
+  state: string;
+  effects: readonly WorkflowEffectEntry[];
+  parameters?: ReactNode;
+  labels: WorkflowExecutionLabels;
+  stateLabel: (name: string) => ReactNode;
+  transitionLabel: (name: string) => ReactNode;
+  dateLabel: (at: string) => ReactNode;
+  effectStatusLabel: (status: string) => ReactNode;
+  renderDiagram: (selection: {
+    current: string;
+    history: readonly T[];
+  }) => ReactNode;
+}
+
+export function WorkflowExecutionDetail<T extends WorkflowHistoryEntry>({
+  transitions: transitionsInput,
+  state,
+  effects,
+  parameters,
+  labels,
+  stateLabel,
+  transitionLabel,
+  dateLabel,
+  effectStatusLabel,
+  renderDiagram,
+}: WorkflowExecutionDetailProps<T>): ReactElement {
+  const [selected, setSelected] = useState<string>();
+  const transitions = [...transitionsInput].sort(
+    (a, b) =>
+      a.version - b.version ||
+      a.at.localeCompare(b.at) ||
+      a.id.localeCompare(b.id),
+  );
+  const index = selected
+    ? transitions.findIndex((entry) => entry.id === selected)
+    : -1;
+  const history = index < 0 ? transitions : transitions.slice(0, index + 1);
+  const current = index < 0 ? state : transitions[index].to;
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='grid min-w-0 grid-cols-1 items-stretch gap-6 lg:grid-cols-2'>
+        <Card
+          className='min-w-0'
+          role='region'
+          aria-label={labels.processDiagram}
+        >
+          <CardHeader>
+            <CardTitle>
+              <h2>{labels.processDiagram}</h2>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className='flex flex-1 flex-col gap-4'>
+            {renderDiagram({ current, history })}
+          </CardContent>
+        </Card>
+        <div className='flex min-w-0 flex-col gap-6'>
+          <Card className='min-w-0' role='region' aria-label={labels.history}>
+            <CardHeader>
+              <CardTitle>
+                <h2>{labels.history}</h2>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='min-w-0'>
+              <p className='mb-4 text-sm text-muted-foreground'>
+                {labels.historyHint}
+              </p>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{labels.step}</TableHead>
+                    <TableHead>{labels.transition}</TableHead>
+                    <TableHead>{labels.from}</TableHead>
+                    <TableHead>{labels.to}</TableHead>
+                    <TableHead>{labels.actor}</TableHead>
+                    <TableHead>{labels.time}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {transitions.map((entry, step) => (
+                    <TableRow
+                      key={entry.id}
+                      data-selected={entry.id === selected ? 'true' : undefined}
+                    >
+                      <TableCell>
+                        <Button
+                          size='sm'
+                          variant={
+                            entry.id === selected ? 'secondary' : 'ghost'
+                          }
+                          aria-label={labels.showStep(step + 1)}
+                          aria-pressed={entry.id === selected}
+                          onClick={() => setSelected(entry.id)}
+                        >
+                          {step + 1}
+                        </Button>
+                      </TableCell>
+                      <TableCell>{transitionLabel(entry.transition)}</TableCell>
+                      <TableCell>
+                        {entry.from ? stateLabel(entry.from) : '—'}
+                      </TableCell>
+                      <TableCell>{stateLabel(entry.to)}</TableCell>
+                      <TableCell>{entry.actorId}</TableCell>
+                      <TableCell>{dateLabel(entry.at)}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              {!transitions.length && (
+                <p className='text-sm text-muted-foreground'>
+                  {labels.noHistory}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+          <Card className='min-w-0' role='region' aria-label={labels.effects}>
+            <CardHeader>
+              <CardTitle>
+                <h2>{labels.effects}</h2>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='min-w-0'>
+              {effects.length ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{labels.effect}</TableHead>
+                      <TableHead>{labels.state}</TableHead>
+                      <TableHead>{labels.attempts}</TableHead>
+                      <TableHead>{labels.error}</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {effects.map((run) => (
+                      <TableRow key={run.id}>
+                        <TableCell>{run.effect}</TableCell>
+                        <TableCell>{effectStatusLabel(run.status)}</TableCell>
+                        <TableCell>
+                          {run.attempts} / {run.maxAttempts}
+                        </TableCell>
+                        <TableCell className='max-w-80 whitespace-normal break-words text-destructive'>
+                          {run.error || '—'}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              ) : (
+                <p className='text-sm text-muted-foreground'>
+                  {labels.noEffects}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+          {parameters && (
+            <Card
+              className='min-w-0'
+              role='region'
+              aria-label={labels.executionParameters}
+            >
+              <CardHeader>
+                <CardTitle>
+                  <h2>{labels.executionParameters}</h2>
+                </CardTitle>
+              </CardHeader>
+              <CardContent className='min-w-0'>
+                <p className='mb-4 text-sm text-muted-foreground'>
+                  {labels.snapshotHint}
+                </p>
+                {parameters}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,175 @@
+import type { ReactElement, ReactNode } from 'react';
+import type {
+  CellContext,
+  ColumnMeta,
+  HeaderContext,
+} from '@tanstack/react-table';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import { Button } from '#components/ui/button';
+import { Empty, EmptyDescription } from '#components/ui/empty';
+import { DataTable } from '#components/data-table/data-table';
+
+export interface WorkflowExecutionRow {
+  id: string;
+  record: ReactNode;
+  workflow: ReactNode;
+  state: ReactNode;
+  createdAt: ReactNode;
+}
+export interface WorkflowExecutionListProps {
+  rows: readonly WorkflowExecutionRow[];
+  loaded: boolean;
+  loading: boolean;
+  filters: ReactNode;
+  status?: ReactNode;
+  empty: ReactNode;
+  labels: {
+    refresh: string;
+    record: string;
+    workflow: string;
+    state: string;
+    createdAt: string;
+    previous: string;
+    next: string;
+  };
+  order: 'newest' | 'oldest';
+  onSort: () => void;
+  onRefresh: () => void;
+  pagination: ReactNode;
+  previousDisabled: boolean;
+  nextDisabled: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+
+type ExecutionDateMeta = ColumnMeta<WorkflowExecutionRow, unknown> &
+  Pick<WorkflowExecutionListProps, 'labels' | 'order' | 'onSort'>;
+
+export function WorkflowExecutionList({
+  rows,
+  loaded,
+  loading,
+  filters,
+  status,
+  empty,
+  labels,
+  order,
+  onSort,
+  onRefresh,
+  pagination,
+  previousDisabled,
+  nextDisabled,
+  onPrevious,
+  onNext,
+}: WorkflowExecutionListProps): ReactElement {
+  const activityMeta: ExecutionDateMeta = { labels, order, onSort };
+  return (
+    <section className='flex flex-col gap-4'>
+      <div className='flex flex-wrap items-center justify-between gap-3'>
+        <div className='flex flex-wrap items-center gap-2'>{filters}</div>
+        <Button variant='outline' disabled={loading} onClick={onRefresh}>
+          {labels.refresh}
+        </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>
+      <div className='flex flex-wrap items-center justify-between gap-3 text-sm'>
+        <p>{pagination}</p>
+        <div className='flex gap-2'>
+          <Button
+            variant='outline'
+            disabled={previousDisabled}
+            onClick={onPrevious}
+          >
+            {labels.previous}
+          </Button>
+          <Button variant='outline' disabled={nextDisabled} onClick={onNext}>
+            {labels.next}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ExecutionRecordCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.record;
+}
+
+function ExecutionWorkflowCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.workflow;
+}
+
+function ExecutionStateCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.state;
+}
+
+function ExecutionCreatedAtCell({
+  row,
+}: CellContext<WorkflowExecutionRow, unknown>) {
+  return row.original.createdAt;
+}
+
+function ExecutionDateHeader({
+  column,
+}: HeaderContext<WorkflowExecutionRow, unknown>) {
+  const { labels, order, onSort } = column.columnDef.meta as ExecutionDateMeta;
+  return (
+    <Button variant='ghost' size='sm' onClick={onSort}>
+      {labels.createdAt}
+      {order === 'newest' ? <ArrowDown /> : <ArrowUp />}
+    </Button>
+  );
+}

package/client/extensions/nocobase-workflow-management/layout.tsx

@@ -0,0 +1,95 @@
+import type { ReactElement, ReactNode } from 'react';
+import { PageContainer } from '#components/page-container';
+import { PageHeader } from '#components/page-header';
+import { Tabs, TabsList, TabsTrigger } from '#components/ui/tabs';
+import { Card, CardContent, CardHeader, CardTitle } from '#components/ui/card';
+
+export type WorkflowTab = 'definitions' | 'executions';
+
+/** The caller owns routes, tab URLs and permissions; details replace the list chrome. */
+export interface WorkflowManagementLayoutProps {
+  title: string;
+  description?: ReactNode;
+  labels: Record<WorkflowTab, string>;
+  tab: WorkflowTab;
+  onTabChange: (tab: WorkflowTab) => void;
+  detail?: boolean;
+  children: ReactNode;
+}
+
+export function WorkflowManagementLayout({
+  title,
+  description,
+  labels,
+  tab,
+  onTabChange,
+  detail = false,
+  children,
+}: WorkflowManagementLayoutProps): ReactElement {
+  return (
+    <PageContainer>
+      {!detail && (
+        <>
+          <PageHeader title={title} description={description} />
+          <Tabs
+            value={tab}
+            onValueChange={(value) => onTabChange(value as WorkflowTab)}
+          >
+            <TabsList variant='line'>
+              <TabsTrigger value='definitions'>
+                {labels.definitions}
+              </TabsTrigger>
+              <TabsTrigger value='executions'>{labels.executions}</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </>
+      )}
+      {children}
+    </PageContainer>
+  );
+}
+
+export interface WorkflowDefinitionDetailProps {
+  diagram: ReactNode;
+  parameters?: ReactNode;
+  diagramTitle: string;
+  parametersTitle: string;
+}
+
+export function WorkflowDefinitionDetail({
+  diagram,
+  parameters,
+  diagramTitle,
+  parametersTitle,
+}: WorkflowDefinitionDetailProps): ReactElement {
+  return (
+    <div className='flex flex-col gap-4'>
+      <div
+        className={
+          parameters == null
+            ? 'min-w-0'
+            : 'grid min-w-0 grid-cols-1 items-start gap-6 lg:grid-cols-2'
+        }
+      >
+        <Card className='min-w-0' role='region' aria-label={diagramTitle}>
+          <CardHeader>
+            <CardTitle>
+              <h2>{diagramTitle}</h2>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className='flex flex-1 flex-col'>{diagram}</CardContent>
+        </Card>
+        {parameters != null && (
+          <Card className='min-w-0' role='region' aria-label={parametersTitle}>
+            <CardHeader>
+              <CardTitle>
+                <h2>{parametersTitle}</h2>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>{parameters}</CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/locales/system/en-US.ts

@@ -8,6 +8,28 @@ import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
  * upgrade replaces this file, so put the application's own copy in `../en-US.ts` rather than here.
  */
 const systemEnUS = {
+  flowDiagram: {
+    configure: 'Configure',
+    overview: 'Diagram overview',
+    actualSize: 'Actual size',
+    states: 'States',
+    transitions: 'Transitions',
+    configurable: 'Parameters',
+    current: 'Current',
+    visited: 'Visited',
+    initial: 'Initial',
+    final: 'Final',
+    state: 'State',
+    zoomOut: 'Zoom out',
+    zoomIn: 'Zoom in',
+    fit: 'Fit to view',
+
+    empty: 'No states to display.',
+    loading: 'Laying out diagram…',
+    failed: 'Unable to lay out this diagram.',
+    nodeHelp: 'Press Enter or Space to select a state.',
+    edgeHelp: 'Press Enter or Space to select a transition.',
+  },
   settings,
   'auth.preparingSession': 'Preparing your session…',
   'auth.connectionFailed': 'Unable to connect',

package/client/locales/system/settings-en-US.ts

@@ -1,4 +1,5 @@
 const settings = {
+  unnamedPage: 'Unnamed page ({{path}})',
   revokeRoles: 'Revoke roles',
   keyConflict: 'This role key is already in use.',
   userPermissions: 'User management',

package/client/locales/system/settings-zh-CN.ts

@@ -1,4 +1,5 @@
 const settings = {
+  unnamedPage: '未命名页面（{{path}}）',
   revokeRoles: '撤销角色',
   keyConflict: '此角色标识已被使用。',
   userPermissions: '用户管理',

package/client/locales/system/zh-CN.ts

@@ -5,6 +5,28 @@ import inboxZhCN from '#extensions/nocobase-inbox/locales/zh-CN';
 
 /** The Chinese copy of what the template ships; see `./en-US.ts`. */
 const systemZhCN: SystemResource = {
+  flowDiagram: {
+    configure: '配置',
+    overview: '流程缩略导航',
+    actualSize: '实际大小',
+    states: '状态',
+    transitions: '转移',
+    configurable: '可配置参数',
+    current: '当前',
+    visited: '已经过',
+    initial: '初始状态',
+    final: '终止状态',
+    state: '状态',
+    zoomOut: '缩小',
+    zoomIn: '放大',
+    fit: '适应画布',
+
+    empty: '暂无可展示的状态。',
+    loading: '正在布局流程图…',
+    failed: '无法布局此流程图。',
+    nodeHelp: '按 Enter 或空格键选择状态。',
+    edgeHelp: '按 Enter 或空格键选择转移。',
+  },
   settings,
   'auth.preparingSession': '正在准备登录会话…',
   'auth.connectionFailed': '连接失败',

package/client/pages/settings/page-permission-titles.ts

@@ -0,0 +1,7 @@
+import type { PagePermissionTitles } from './page-permissions.js';
+
+/** Permission labels for application pages without navigation/breadcrumb titles (including overlays).
+ * Keys are existing route names; values are application translation keys.
+ * Do not add navigation/breadcrumbs or change authorization ids just to name a permission.
+ */
+export const pagePermissionTitles: PagePermissionTitles = {};

package/client/pages/settings/page-permissions.ts

@@ -0,0 +1,42 @@
+import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import type { LocalizedText } from '@nocobase/app-plugin-authorization/client';
+import type { CatalogResource } from './permissions-model.js';
+
+/** Application route names are stable within their owner; labels never change stored grants. */
+export type PagePermissionTitles = Readonly<Record<string, string>>;
+
+export function pagePermissionTitle(
+  route: AppClientRegisteredRoute,
+  titles: PagePermissionTitles,
+): LocalizedText | undefined {
+  const key =
+    (route.source === 'application' && Object.hasOwn(titles, route.name)
+      ? titles[route.name]
+      : undefined) ??
+    route.navigation?.title ??
+    route.breadcrumb?.title;
+  return key?.trim() ? { key, ns: route.packageName } : undefined;
+}
+
+/** Preserve every existing resource id/action; never use a technical route id as its label. */
+export function pagePermissionResources(
+  routes: readonly AppClientRegisteredRoute[],
+  titles: PagePermissionTitles,
+  unnamed: (path: string) => string,
+): CatalogResource[] {
+  return routes.flatMap((route) => [
+    ...(route.componentLoader &&
+    typeof route.authz === 'object' &&
+    route.authz.resource.type === 'page'
+      ? [
+          {
+            type: 'page',
+            id: route.authz.resource.id,
+            title: pagePermissionTitle(route, titles) ?? unnamed(route.path),
+            actions: [{ name: 'access', title: { key: 'settings.access' } }],
+          },
+        ]
+      : []),
+    ...pagePermissionResources(route.children ?? [], titles, unnamed),
+  ]);
+}

package/client/pages/settings/role-form.tsx

@@ -16,7 +16,8 @@ import {
   type PermissionGrant,
   type PermissionSet,
 } from '@nocobase/app-plugin-authorization/client';
-import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
+import { pagePermissionResources } from './page-permissions.js';
+import { pagePermissionTitles } from './page-permission-titles.js';
 import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
 import {
   useLocation,
@@ -40,7 +41,6 @@ import {
   unconfiguredFilter,
   setPermissions,
   setScope,
-  type CatalogResource,
 } from './permissions-model.js';
 
 function RoleEditor(): ReactElement {
@@ -100,32 +100,11 @@ function RoleEditor(): ReactElement {
   const catalog = useMemo(() => {
     if (!options.data) return undefined;
     const source = options.data.data;
-    const pages: CatalogResource[] = [];
-    const collect = (routes: readonly AppClientRegisteredRoute[]) => {
-      for (const route of routes) {
-        const pageTitle = route.navigation?.title ?? route.breadcrumb?.title;
-        if (
-          route.componentLoader &&
-          typeof route.authz === 'object' &&
-          route.authz.resource.type === 'page'
-        )
-          pages.push({
-            type: 'page',
-            id: route.authz.resource.id,
-            title: pageTitle
-              ? { key: pageTitle, ns: route.packageName }
-              : route.id,
-            actions: [
-              {
-                name: 'access',
-                title: { key: 'settings.access' },
-              },
-            ],
-          });
-        collect(route.children ?? []);
-      }
-    };
-    collect(app.runtime.routes);
+    const pages = pagePermissionResources(
+      app.runtime.routes,
+      pagePermissionTitles,
+      (path) => t('settings.unnamedPage', { path }),
+    );
     return {
       ...source,
       sections: [
@@ -180,7 +159,7 @@ function RoleEditor(): ReactElement {
         })),
       ],
     };
-  }, [options.data, app]);
+  }, [options.data, app, t]);
   const allowed = creating
     ? canCreate
     : canUpdate &&