@gadmin2n/schematics 0.0.144 → 0.0.145

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/business-events/RegisterBusinessEventModal.tsx

@@ -0,0 +1,167 @@
+import { Form, Modal, Select, Space, Typography, message } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  eventCatalogApi,
+  type BusinessEventSource,
+} from '../node-instances/widgets/event-catalog.api';
+import { useWorkflowFormValidation } from '../useWorkflowFormValidation';
+
+interface RegisterBusinessEventModalProps {
+  open: boolean;
+  onCancel: () => void;
+  onRegistered: () => void;
+}
+
+interface RegisterBusinessEventFormValues {
+  source: string;
+  operation: 'INSERT' | 'UPDATE' | 'DELETE';
+  watchedFields: string[];
+}
+
+export function RegisterBusinessEventModal({
+  open,
+  onCancel,
+  onRegistered,
+}: RegisterBusinessEventModalProps) {
+  const { t } = useTranslation('workflow');
+  const formValidation = useWorkflowFormValidation();
+  const [form] = Form.useForm<RegisterBusinessEventFormValues>();
+  const [sources, setSources] = useState<BusinessEventSource[]>([]);
+  const [loadingSources, setLoadingSources] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const sourceKey = Form.useWatch('source', form);
+  const operation = Form.useWatch('operation', form);
+  const selectedSource = useMemo(
+    () =>
+      sources.find(
+        (source) => `${source.schemaName}.${source.tableName}` === sourceKey,
+      ),
+    [sourceKey, sources],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    setLoadingSources(true);
+    eventCatalogApi
+      .sources()
+      .then(setSources)
+      .catch((error: any) =>
+        message.error(
+          error?.message ?? t('eventCatalog.registration.sourceLoadFailed'),
+        ),
+      )
+      .finally(() => setLoadingSources(false));
+  }, [open, t]);
+
+  async function submit() {
+    setSubmitting(true);
+    try {
+      const values = await form.validateFields();
+      const source = sources.find(
+        (item) => `${item.schemaName}.${item.tableName}` === values.source,
+      );
+      if (!source) throw new Error('请选择数据库表');
+      await eventCatalogApi.register({
+        schemaName: source.schemaName,
+        tableName: source.tableName,
+        operation: values.operation,
+        watchedFields:
+          values.operation === 'UPDATE' ? values.watchedFields : [],
+      });
+      message.success(t('eventCatalog.registration.success'));
+      form.resetFields();
+      onRegistered();
+    } catch (error: any) {
+      if (!error?.errorFields)
+        message.error(
+          error?.message ?? t('eventCatalog.registration.registerFailed'),
+        );
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={t('eventCatalog.registration.title')}
+      okText={t('eventCatalog.registration.submit')}
+      cancelText={t('eventCatalog.registration.cancel')}
+      confirmLoading={submitting}
+      onOk={() => void submit()}
+      onCancel={onCancel}
+      afterClose={() => form.resetFields()}
+      destroyOnHidden
+      width={620}
+    >
+      <Space direction="vertical" size={20} style={{ width: '100%' }}>
+        <Typography.Text type="secondary">
+          {t('eventCatalog.registration.description')}
+        </Typography.Text>
+        <Form<RegisterBusinessEventFormValues>
+          form={form}
+          layout="vertical"
+          requiredMark={false}
+          initialValues={{ operation: 'UPDATE', watchedFields: [] }}
+          {...formValidation}
+        >
+          <Form.Item
+            name="source"
+            label={t('eventCatalog.registration.source')}
+            rules={[{ required: true }]}
+          >
+            <Select
+              showSearch
+              loading={loadingSources}
+              optionFilterProp="label"
+              options={sources.map((source) => ({
+                value: `${source.schemaName}.${source.tableName}`,
+                label: `${source.schemaName}.${source.tableName}`,
+              }))}
+              onChange={() => form.setFieldValue('watchedFields', [])}
+            />
+          </Form.Item>
+          <Form.Item
+            name="operation"
+            label={t('eventCatalog.registration.operation')}
+            rules={[{ required: true }]}
+          >
+            <Select
+              options={['INSERT', 'UPDATE', 'DELETE'].map((operation) => ({
+                value: operation,
+                label: operation,
+              }))}
+              onChange={(value) => {
+                if (value !== 'UPDATE') form.setFieldValue('watchedFields', []);
+              }}
+            />
+          </Form.Item>
+          {operation === 'UPDATE' ? (
+            <Form.Item
+              name="watchedFields"
+              label={t('eventCatalog.registration.watchedFields')}
+              rules={[{ required: true, type: 'array', min: 1 }]}
+            >
+              <Select
+                mode="multiple"
+                disabled={!selectedSource}
+                optionFilterProp="label"
+                options={(selectedSource?.columns ?? []).map((column) => ({
+                  value: column.name,
+                  label: `${column.name} · ${column.dataType}${
+                    column.primaryKey ? ' · PK' : ''
+                  }`,
+                }))}
+              />
+            </Form.Item>
+          ) : (
+            <Typography.Text type="secondary">
+              {t('eventCatalog.registration.allFieldsHint')}
+            </Typography.Text>
+          )}
+        </Form>
+      </Space>
+    </Modal>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/business-events/business-events.css

@@ -0,0 +1,99 @@
+.workflow-event-catalog__filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.workflow-event-catalog__search {
+  width: min(360px, 100%);
+}
+
+.workflow-event-catalog__status-filter {
+  width: 140px;
+}
+
+.workflow-event-catalog__summary {
+  display: grid;
+  grid-template-columns: minmax(260px, 2fr) minmax(140px, 1fr) minmax(
+      180px,
+      1fr
+    );
+  gap: 24px;
+  padding: 8px 12px;
+}
+
+.workflow-event-catalog__summary-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.workflow-event-catalog__run-link {
+  height: auto;
+  padding: 0;
+}
+
+.workflow-event-catalog__fields {
+  padding: 4px 8px 8px;
+}
+
+.workflow-event-catalog__delivery-error {
+  display: block;
+  max-width: 190px;
+  font-size: 12px;
+}
+
+.workflow-event-catalog__fields-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 12px;
+}
+
+.workflow-event-catalog__field-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) 120px minmax(
+      160px,
+      1fr
+    );
+  align-items: center;
+  gap: 16px;
+  min-height: 44px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+.workflow-event-catalog__field-row--header {
+  min-height: auto;
+  padding-block: 6px;
+  border-top: 0;
+  color: var(--ant-color-text-secondary);
+  font-size: 12px;
+}
+
+@media (max-width: 720px) {
+  .workflow-event-catalog__search {
+    width: 100%;
+  }
+
+  .workflow-event-catalog__status-filter {
+    width: 132px;
+  }
+
+  .workflow-event-catalog__summary {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .workflow-event-catalog__field-row--header {
+    display: none;
+  }
+
+  .workflow-event-catalog__field-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+    padding-block: 12px;
+  }
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/business-events/detail.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import i18n from '../../../i18n';
+import BusinessEventDetailPage from './detail';
+
+const apiMocks = vi.hoisted(() => ({
+  instances: vi.fn(),
+}));
+
+vi.mock('../node-instances/widgets/event-catalog.api', () => ({
+  eventCatalogApi: apiMocks,
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+describe('BusinessEventDetailPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    apiMocks.instances.mockResolvedValue({
+      event: {
+        registrationCode: 'asset-disposal-status',
+        label: 'public.t_hardware_asset · UPDATE',
+        schemaName: 'public',
+        tableName: 't_hardware_asset',
+        operation: 'UPDATE',
+        watchedFields: ['status'],
+        primaryKeyFields: ['id'],
+        isEnabled: true,
+        fields: [
+          {
+            path: 'assetId',
+            label: 'assetId',
+            type: 'string',
+            required: true,
+            primaryKey: false,
+            nullable: false,
+          },
+        ],
+        defaultKeyPath: 'assetId',
+      },
+      items: [
+        {
+          id: '12',
+          workflowId: '7',
+          workflowName: '硬件资产报废审批',
+          version: 3,
+          status: 'COMPLETED',
+          retryOfInstanceId: null,
+          startedAt: '2026-08-19T01:00:00.000Z',
+          finishedAt: '2026-08-19T01:01:00.000Z',
+          createdAt: '2026-08-19T01:00:00.000Z',
+        },
+      ],
+      total: 1,
+    });
+  });
+
+  it('shows instances triggered by the event and opens instance details', async () => {
+    await i18n.changeLanguage('zh_CN');
+    render(
+      <MemoryRouter
+        initialEntries={[
+          '/admin/workflow/business-events/show/asset-disposal-status',
+        ]}
+      >
+        <Routes>
+          <Route
+            path="/admin/workflow/business-events/show/:registrationCode"
+            element={<BusinessEventDetailPage />}
+          />
+          <Route
+            path="/admin/workflow/instance/show/:instanceId"
+            element={<div>实例详情页</div>}
+          />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(
+      (await screen.findAllByText('public.t_hardware_asset · UPDATE')).length,
+    ).toBeGreaterThan(0);
+    expect(screen.getByText('硬件资产报废审批')).toBeInTheDocument();
+    expect(screen.getByText('事件触发')).toBeInTheDocument();
+    expect(apiMocks.instances).toHaveBeenCalledWith('asset-disposal-status', {
+      status: undefined,
+      skip: 0,
+      limit: 20,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '查看详情' }));
+    await waitFor(() =>
+      expect(screen.getByText('实例详情页')).toBeInTheDocument(),
+    );
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/business-events/detail.tsx

@@ -0,0 +1,324 @@
+import {
+  Button,
+  Card,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Typography,
+  message,
+} from 'antd';
+import type { TableColumnsType } from 'antd';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { WorkflowWorkspaceHeader } from '../components/WorkflowWorkspaceHeader';
+import {
+  eventCatalogApi,
+  type BusinessEventInstanceItem,
+  type BusinessEventOption,
+} from '../node-instances/widgets/event-catalog.api';
+import { formatWorkflowUtcDateTime } from '../utils/workflowDateTime';
+import '../workflow-ui.css';
+import './business-events.css';
+
+const PAGE_SIZE = 20;
+
+const STATUS_COLOR: Record<string, string> = {
+  PENDING: 'gold',
+  RUNNING: 'blue',
+  COMPLETED: 'green',
+  FAILED: 'red',
+  CANCELLED: 'default',
+};
+
+function formatDuration(start: string | null, end: string | null): string {
+  if (!start || !end) return '—';
+  const milliseconds = new Date(end).getTime() - new Date(start).getTime();
+  if (milliseconds < 1000) return `${milliseconds}ms`;
+  const seconds = Math.floor(milliseconds / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return remainingSeconds > 0
+    ? `${minutes}m ${remainingSeconds}s`
+    : `${minutes}m`;
+}
+
+export default function BusinessEventDetailPage() {
+  const { t } = useTranslation('workflow');
+  const navigate = useNavigate();
+  const { registrationCode = '' } = useParams<{
+    registrationCode: string;
+  }>();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const status = searchParams.get('status') || undefined;
+  const page = Number(searchParams.get('page')) || 1;
+  const [event, setEvent] = useState<BusinessEventOption>();
+  const [items, setItems] = useState<BusinessEventInstanceItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | undefined>) => {
+      setSearchParams(
+        (previous) => {
+          const next = new URLSearchParams(previous);
+          for (const [key, value] of Object.entries(updates)) {
+            if (value) next.set(key, value);
+            else next.delete(key);
+          }
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const load = useCallback(async () => {
+    if (!registrationCode) return;
+    setLoading(true);
+    try {
+      const result = await eventCatalogApi.instances(registrationCode, {
+        status,
+        skip: (page - 1) * PAGE_SIZE,
+        limit: PAGE_SIZE,
+      });
+      setEvent(result.event);
+      setItems(result.items);
+      setTotal(result.total);
+    } catch (error: any) {
+      message.error(error?.message ?? t('eventCatalog.instancesLoadFailed'));
+    } finally {
+      setLoading(false);
+    }
+  }, [page, registrationCode, status, t]);
+
+  useEffect(() => void load(), [load]);
+
+  const columns = useMemo<TableColumnsType<BusinessEventInstanceItem>>(
+    () => [
+      {
+        title: t('eventCatalog.run'),
+        dataIndex: 'id',
+        key: 'id',
+        width: 90,
+        render: (id: string) => (
+          <Button
+            type="link"
+            size="small"
+            className="workflow-event-catalog__run-link"
+            onClick={() => navigate(`/admin/workflow/instance/show/${id}`)}
+          >
+            #{id}
+          </Button>
+        ),
+      },
+      {
+        title: t('eventCatalog.workflow'),
+        key: 'workflow',
+        width: 240,
+        render: (_, instance) => (
+          <Space direction="vertical" size={2}>
+            <Typography.Text>{instance.workflowName}</Typography.Text>
+            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+              v{instance.version}
+            </Typography.Text>
+          </Space>
+        ),
+      },
+      {
+        title: t('instances.status'),
+        dataIndex: 'status',
+        key: 'status',
+        width: 110,
+        render: (value: string) => (
+          <Tag color={STATUS_COLOR[value] ?? 'default'}>
+            {t(`instances.statuses.${value.toLowerCase()}`, {
+              defaultValue: value,
+            })}
+          </Tag>
+        ),
+      },
+      {
+        title: t('instances.executionSource'),
+        key: 'executionSource',
+        width: 150,
+        render: (_, instance) =>
+          instance.retryOfInstanceId ? (
+            <Button
+              type="link"
+              size="small"
+              className="workflow-event-catalog__run-link"
+              onClick={() =>
+                navigate(
+                  `/admin/workflow/instance/show/${instance.retryOfInstanceId}`,
+                )
+              }
+            >
+              {t('instances.resumedFrom', {
+                id: instance.retryOfInstanceId,
+              })}
+            </Button>
+          ) : (
+            <Typography.Text type="secondary">
+              {t('eventCatalog.eventTriggered')}
+            </Typography.Text>
+          ),
+      },
+      {
+        title: t('instances.startedAt'),
+        dataIndex: 'startedAt',
+        key: 'startedAt',
+        width: 170,
+        render: (value: string | null) =>
+          value ? formatWorkflowUtcDateTime(value) : '—',
+      },
+      {
+        title: t('instances.finishedAt'),
+        dataIndex: 'finishedAt',
+        key: 'finishedAt',
+        width: 170,
+        render: (value: string | null) =>
+          value ? formatWorkflowUtcDateTime(value) : '—',
+      },
+      {
+        title: t('instances.duration'),
+        key: 'duration',
+        width: 100,
+        render: (_, instance) =>
+          formatDuration(instance.startedAt, instance.finishedAt),
+      },
+      {
+        title: t('list.actions'),
+        key: 'actions',
+        width: 100,
+        fixed: 'right',
+        render: (_, instance) => (
+          <Button
+            type="link"
+            size="small"
+            onClick={() =>
+              navigate(`/admin/workflow/instance/show/${instance.id}`)
+            }
+          >
+            {t('instances.detail')}
+          </Button>
+        ),
+      },
+    ],
+    [navigate, t],
+  );
+
+  return (
+    <div className="workflow-page-stack">
+      <WorkflowWorkspaceHeader
+        eyebrow={t('eventCatalog.detailEyebrow')}
+        title={event?.label ?? registrationCode}
+        status={
+          event ? (
+            <Typography.Text code>{event.registrationCode}</Typography.Text>
+          ) : null
+        }
+        onBack={() => navigate('/admin/workflow/business-events')}
+        backLabel={t('common.back')}
+        actions={
+          <Select
+            allowClear
+            value={status}
+            placeholder={t('instances.allStatuses')}
+            className="workflow-event-catalog__status-filter"
+            onChange={(value) =>
+              updateParams({ status: value, page: undefined })
+            }
+            options={[
+              { value: 'PENDING', label: t('instances.statuses.pending') },
+              { value: 'RUNNING', label: t('instances.statuses.running') },
+              {
+                value: 'COMPLETED',
+                label: t('instances.statuses.completed'),
+              },
+              { value: 'FAILED', label: t('instances.statuses.failed') },
+              {
+                value: 'CANCELLED',
+                label: t('instances.statuses.cancelled'),
+              },
+            ]}
+          />
+        }
+      />
+
+      {event && (
+        <Card size="small">
+          <div className="workflow-event-catalog__summary">
+            <EventSummaryItem
+              label={t('eventCatalog.identifier')}
+              value={
+                <Typography.Text code>
+                  {event.schemaName}.{event.tableName} · {event.operation}
+                </Typography.Text>
+              }
+            />
+            <EventSummaryItem
+              label={t('eventCatalog.availableData')}
+              value={t('eventCatalog.fieldCount', {
+                count: event.fields.length,
+              })}
+            />
+            <EventSummaryItem
+              label={t('eventCatalog.businessKey')}
+              value={event.defaultKeyPath || '—'}
+            />
+          </div>
+        </Card>
+      )}
+
+      <Card
+        className="card-table"
+        title={t('eventCatalog.instancesTitle')}
+        extra={
+          <Typography.Text type="secondary">
+            {t('list.total', { count: total })}
+          </Typography.Text>
+        }
+      >
+        <Table<BusinessEventInstanceItem>
+          rowKey="id"
+          loading={loading}
+          columns={columns}
+          dataSource={items}
+          scroll={{ x: 1130 }}
+          pagination={{
+            current: page,
+            pageSize: PAGE_SIZE,
+            total,
+            showSizeChanger: false,
+            onChange: (nextPage) =>
+              updateParams({
+                page: nextPage > 1 ? String(nextPage) : undefined,
+              }),
+          }}
+          locale={{ emptyText: t('eventCatalog.noInstances') }}
+          size="small"
+        />
+      </Card>
+    </div>
+  );
+}
+
+function EventSummaryItem({
+  label,
+  value,
+}: {
+  label: string;
+  value: ReactNode;
+}) {
+  return (
+    <div className="workflow-event-catalog__summary-item">
+      <Typography.Text type="secondary">{label}</Typography.Text>
+      <Typography.Text strong>{value}</Typography.Text>
+    </div>
+  );
+}