@gadmin2n/schematics 0.0.144 → 0.0.146

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ParameterBindingEditor.tsx

@@ -1,15 +1,11 @@
-import { Input, InputNumber, Select, Space, Typography } from 'antd';
+import { Input, InputNumber, Select, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
 import {
-  bindingPreview,
   type FixedValueType,
   type ParameterBinding,
 } from '../types/parameter-binding';
-
-export type SystemDataOption = {
-  value: string;
-  label: string;
-};
+import { WorkflowCodeEditor } from './WorkflowCodeEditor';
+import './parameter-binding-editor.css';
 
 export function ParameterBindingEditor({
   name,
@@ -17,7 +13,7 @@ export function ParameterBindingEditor({
   value: suppliedValue,
   disabled,
   error,
-  systemOptions = [],
+  sources = ['INPUT', 'WORKFLOW', 'FIXED'],
   onChange = () => undefined,
 }: {
   name: string;
@@ -25,7 +21,7 @@ export function ParameterBindingEditor({
   value?: ParameterBinding;
   disabled?: boolean;
   error?: string;
-  systemOptions?: SystemDataOption[];
+  sources?: Array<ParameterBinding['source']>;
   onChange?(value: ParameterBinding): void;
 }) {
   const { t } = useTranslation('workflow');
@@ -37,48 +33,41 @@ export function ParameterBindingEditor({
     value.source === 'FIXED'
       ? value
       : ({ source: 'FIXED', valueType: 'STRING', value: '' } as const);
+  const isJson = value.source === 'FIXED' && fixedBinding.valueType === 'JSON';
+
+  const sourceSelect = (
+    <Select
+      className="workflow-parameter-binding__source"
+      aria-label={t('binding.sourceAria', { name })}
+      value={value.source}
+      disabled={disabled}
+      options={sources.map((source) => ({
+        value: source,
+        label: t(`binding.sources.${source.toLowerCase()}`),
+      }))}
+      onChange={(source) =>
+        onChange(
+          source === 'FIXED'
+            ? { source: 'FIXED', valueType: 'STRING', value: '' }
+            : { source, path: defaultPath },
+        )
+      }
+    />
+  );
 
   return (
-    <Space direction="vertical" size={6} style={{ width: '100%' }}>
-      <Select
-        aria-label={t('binding.sourceAria', { name })}
-        value={value.source}
-        disabled={disabled}
-        options={[
-          { value: 'INPUT', label: t('binding.sources.input') },
-          { value: 'WORKFLOW', label: t('binding.sources.workflow') },
-          ...(systemOptions.length > 0
-            ? [{ value: 'SYSTEM', label: t('binding.sources.system') }]
-            : []),
-          { value: 'FIXED', label: t('binding.sources.fixed') },
-        ]}
-        onChange={(source) =>
-          onChange(
-            source === 'FIXED'
-              ? { source: 'FIXED', valueType: 'STRING', value: '' }
-              : source === 'SYSTEM'
-                ? { source: 'SYSTEM', path: systemOptions[0]?.value ?? '' }
-                : { source, path: defaultPath },
-          )
-        }
-        style={{ width: '100%' }}
-      />
-      {value.source === 'SYSTEM' ? (
-        <Select
-          aria-label={t('binding.systemValueAria', { name })}
-          value={value.path || undefined}
-          status={error ? 'error' : undefined}
-          disabled={disabled}
-          placeholder={t('binding.systemValuePlaceholder')}
-          options={systemOptions}
-          onChange={(path) => onChange({ source: 'SYSTEM', path })}
-          style={{ width: '100%' }}
-        />
-      ) : value.source === 'INPUT' || value.source === 'WORKFLOW' ? (
-        <>
+    <div className="workflow-parameter-binding">
+      {value.source !== 'FIXED' ? (
+        <div className="workflow-parameter-binding__controls">
+          {sourceSelect}
           <Input
+            className="workflow-parameter-binding__path"
             aria-label={t('binding.pathAria', { name })}
-            addonBefore={value.source === 'INPUT' ? 'input.' : 'workflow.'}
+            prefix={
+              <span className="workflow-parameter-binding__path-prefix">
+                {value.source.toLowerCase()}.
+              </span>
+            }
             value={value.path}
             status={error ? 'error' : undefined}
             disabled={disabled}
@@ -87,19 +76,16 @@ export function ParameterBindingEditor({
               onChange({ source: value.source, path: event.target.value })
             }
           />
-          <Typography.Text type="secondary" code style={{ fontSize: 12 }}>
-            {bindingPreview(value)}
-          </Typography.Text>
-        </>
+        </div>
       ) : (
         <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: '130px minmax(0, 1fr)',
-            gap: 8,
-          }}
+          className={`workflow-parameter-binding__controls workflow-parameter-binding__controls--fixed${
+            isJson ? ' workflow-parameter-binding__controls--json' : ''
+          }`}
         >
+          {sourceSelect}
           <Select<FixedValueType>
+            className="workflow-parameter-binding__type"
             aria-label={t('binding.fixedTypeAria', { name })}
             value={fixedBinding.valueType}
             disabled={disabled}
@@ -117,8 +103,9 @@ export function ParameterBindingEditor({
               })
             }
           />
-          {fixedBinding.valueType === 'BOOLEAN' ? (
+          {isJson ? null : fixedBinding.valueType === 'BOOLEAN' ? (
             <Select
+              className="workflow-parameter-binding__value"
               aria-label={t('binding.fixedValueAria', { name })}
               value={fixedBinding.value}
               disabled={disabled}
@@ -132,6 +119,7 @@ export function ParameterBindingEditor({
             />
           ) : fixedBinding.valueType === 'NUMBER' ? (
             <InputNumber
+              className="workflow-parameter-binding__value"
               aria-label={t('binding.fixedValueAria', { name })}
               value={
                 fixedBinding.value === '' ? null : Number(fixedBinding.value)
@@ -144,24 +132,15 @@ export function ParameterBindingEditor({
                   value: fixedValue === null ? '' : String(fixedValue),
                 })
               }
-              style={{ width: '100%' }}
             />
           ) : (
             <Input.TextArea
+              className="workflow-parameter-binding__value"
               aria-label={t('binding.fixedValueAria', { name })}
               value={fixedBinding.value}
               status={error ? 'error' : undefined}
               disabled={disabled}
-              autoSize={
-                fixedBinding.valueType === 'JSON'
-                  ? { minRows: 2, maxRows: 6 }
-                  : true
-              }
-              placeholder={
-                fixedBinding.valueType === 'JSON'
-                  ? '{"key":"value"}'
-                  : undefined
-              }
+              autoSize={{ minRows: 1, maxRows: 4 }}
               onChange={(event) =>
                 onChange({ ...fixedBinding, value: event.target.value })
               }
@@ -169,11 +148,29 @@ export function ParameterBindingEditor({
           )}
         </div>
       )}
+      {isJson && (
+        <div className="workflow-parameter-binding__json">
+          <WorkflowCodeEditor
+            language="json"
+            value={fixedBinding.value}
+            onChange={(fixedValue) =>
+              onChange({ ...fixedBinding, value: fixedValue })
+            }
+            readOnly={disabled}
+            height={150}
+            invalid={Boolean(error)}
+            ariaLabel={t('binding.fixedValueAria', { name })}
+          />
+        </div>
+      )}
       {error && (
-        <Typography.Text type="danger" style={{ fontSize: 12 }}>
+        <Typography.Text
+          type="danger"
+          className="workflow-parameter-binding__error"
+        >
           {error}
         </Typography.Text>
       )}
-    </Space>
+    </div>
   );
 }

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ReadonlyNodePanel.test.tsx

@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../i18n';
+import type { WorkflowNode, WorkflowNodeType } from '../types';
+import { ReadonlyNodePanel } from './ReadonlyNodePanel';
+
+const node: WorkflowNode = {
+  id: 'database-1',
+  type: 'db_execute',
+  label: '查询待处理订单',
+  position: { x: 0, y: 0 },
+  config: { allowWrite: false, sql: 'SELECT * FROM orders' },
+};
+
+const nodeType = {
+  id: '1',
+  type: 'db_execute',
+  label: 'Database Operation',
+  description: 'Read records from PostgreSQL',
+  category: 'ACTION',
+  configSchema: {
+    type: 'object',
+    properties: {
+      allowWrite: { type: 'boolean', title: 'Allow writes' },
+      sql: { type: 'string', title: 'SQL' },
+    },
+  },
+  uiSchema: {},
+  outputSchema: {
+    type: 'object',
+    properties: {
+      rows: { type: 'array' },
+      rowCount: { type: 'number' },
+    },
+  },
+  outputs: [],
+} as unknown as WorkflowNodeType;
+
+describe('ReadonlyNodePanel', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('en');
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    });
+  });
+
+  it('shows the readable configuration first and raw JSON on demand', () => {
+    render(<ReadonlyNodePanel node={node} nodeType={nodeType} />);
+
+    expect(screen.getByLabelText('Node details')).toBeInTheDocument();
+    expect(screen.getByLabelText('Node details')).toHaveClass(
+      'workflow-node-panel--editor',
+      'workflow-node-panel--readonly',
+    );
+    expect(
+      screen.getByRole('heading', { name: 'Node configuration' }),
+    ).toBeInTheDocument();
+    expect(screen.getByDisplayValue('查询待处理订单')).toBeDisabled();
+    expect(screen.getByDisplayValue('SELECT * FROM orders')).toBeDisabled();
+    expect(screen.getByText('No node template is used')).toBeInTheDocument();
+    expect(screen.getByText('input.rows')).toBeInTheDocument();
+    expect(screen.queryByText(/"position"/)).not.toBeInTheDocument();
+    expect(screen.getByText('Database Operation')).toBeInTheDocument();
+    expect(screen.queryByText('Perform an action')).not.toBeInTheDocument();
+    expect(screen.queryByText('db_execute')).not.toBeInTheDocument();
+    const parametersCard = screen.getByRole('region', {
+      name: 'Node parameters',
+    });
+    const outputCard = screen.getByRole('region', { name: 'Output' });
+    expect(parametersCard).toHaveClass('workflow-node-panel__parameters-card');
+    expect(outputCard).toHaveClass('workflow-node-panel__output-card');
+    expect(parametersCard.closest('.workflow-node-panel__stack')).toBe(
+      outputCard.closest('.workflow-node-panel__stack'),
+    );
+
+    fireEvent.click(screen.getByText('Advanced configuration'));
+
+    expect(screen.getByText(/"position"/)).toBeInTheDocument();
+    expect(screen.getByText(/SELECT \* FROM orders/)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Copy JSON' }),
+    ).toBeInTheDocument();
+  });
+});

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ReadonlyNodePanel.tsx

@@ -0,0 +1,325 @@
+import { CopyOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  Segmented,
+  Select,
+  Space,
+  Tooltip,
+  Typography,
+  message,
+} from 'antd';
+import type { CSSProperties } from 'react';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SchemaForm } from '../node-instances/schema-form/SchemaForm';
+import type { UiSchema } from '../node-instances/schema-form/schema.types';
+import type { WorkflowEdge, WorkflowNode, WorkflowNodeType } from '../types';
+import { NodeOutputSummary } from './NodeOutputSummary';
+import '../node-instances/node-config.css';
+
+const { Text, Title } = Typography;
+
+const CATEGORY_COLORS: Record<
+  string,
+  { accent: string; bg: string; border: string }
+> = {
+  TRIGGER: { accent: '#1677ff', bg: '#e6f7ff', border: '#91caff' },
+  ACTION: { accent: '#389e0d', bg: '#f6ffed', border: '#b7eb8f' },
+  CONDITION: { accent: '#d46b08', bg: '#fff7e6', border: '#ffd591' },
+  FLOW_CONTROL: { accent: '#722ed1', bg: '#f9f0ff', border: '#d3adf7' },
+  APPROVAL: { accent: '#cf1322', bg: '#fff1f0', border: '#ffa39e' },
+  SUB_WORKFLOW: { accent: '#2f54eb', bg: '#f0f5ff', border: '#adc6ff' },
+};
+
+function hasUiSchemaWidget(value: unknown): boolean {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return false;
+  }
+
+  const schema = value as Record<string, unknown>;
+  if (typeof schema.widget === 'string' && schema.widget.trim()) {
+    return true;
+  }
+
+  return Object.entries(schema).some(
+    ([key, child]) => key !== 'options' && hasUiSchemaWidget(child),
+  );
+}
+
+function effectiveUiSchema(
+  nodeType?: WorkflowNodeType,
+  currentWorkflowId?: string,
+): UiSchema | undefined {
+  const uiSchema = nodeType?.uiSchema ?? {};
+  if (nodeType?.type === 'callable_trigger') {
+    return {
+      ...uiSchema,
+      fields: {
+        ...(uiSchema.fields ?? {}),
+        inputParameters: {
+          ...(uiSchema.fields?.inputParameters ?? {}),
+          widget: 'callable-input-parameters',
+        },
+      },
+    };
+  }
+  if (nodeType?.type === 'webhook_trigger') {
+    return { ...uiSchema, widget: 'external-request-config' };
+  }
+  if (nodeType?.type === 'manual_trigger') {
+    return { ...uiSchema, widget: 'manual-trigger-config' };
+  }
+  if (nodeType?.type === 'external_wait') {
+    return { ...uiSchema, widget: 'external-wait-config' };
+  }
+  if (
+    nodeType?.type === 'for_each' ||
+    nodeType?.type === 'sub_workflow' ||
+    nodeType?.type === 'approval'
+  ) {
+    return {
+      ...uiSchema,
+      widget:
+        nodeType.type === 'for_each'
+          ? 'for-each-config'
+          : nodeType.type === 'sub_workflow'
+            ? 'sub-workflow-config'
+            : uiSchema.widget,
+      options: {
+        ...(uiSchema.options ?? {}),
+        currentWorkflowId,
+      },
+    };
+  }
+  return uiSchema;
+}
+
+interface Props {
+  node: WorkflowNode;
+  nodeType?: WorkflowNodeType;
+  nodes?: WorkflowNode[];
+  edges?: WorkflowEdge[];
+  nodeTypes?: WorkflowNodeType[];
+  currentWorkflowId?: string;
+}
+
+export function ReadonlyNodePanel({
+  node,
+  nodeType,
+  nodes,
+  edges,
+  nodeTypes,
+  currentWorkflowId,
+}: Props) {
+  const { t } = useTranslation('workflow');
+  const [view, setView] = useState<'readable' | 'advanced'>('readable');
+  const config = node.configOverride ?? node.config ?? {};
+  const schema = nodeType?.configSchema ?? null;
+  const uiSchema = useMemo(
+    () => effectiveUiSchema(nodeType, currentWorkflowId),
+    [currentWorkflowId, nodeType],
+  );
+  const hasReadableConfig = Boolean(
+    schema &&
+    (Object.keys(schema.properties ?? {}).length > 0 ||
+      hasUiSchemaWidget(uiSchema)),
+  );
+  const nodeTypeLabel = nodeType
+    ? t(`nodeTypes.${nodeType.type}`, { defaultValue: nodeType.label })
+    : node.label;
+  const nodeTypeColors =
+    CATEGORY_COLORS[nodeType?.category ?? 'ACTION'] ?? CATEGORY_COLORS.ACTION;
+  const usesCustomConfigEditor = hasUiSchemaWidget(uiSchema);
+  const usesTopLevelApprovalSections =
+    node.type === 'approval' && usesCustomConfigEditor;
+  const rawNode = JSON.stringify(node, null, 2);
+
+  async function copyRawNode() {
+    await navigator.clipboard.writeText(rawNode);
+    message.success(t('viewer.copied'));
+  }
+
+  return (
+    <aside
+      aria-label={t('viewer.nodeDetails')}
+      className="workflow-node-config workflow-node-panel workflow-node-panel--editor workflow-node-panel--readonly"
+      style={
+        {
+          width:
+            node.type === 'approval'
+              ? 'clamp(560px, 46vw, 680px)'
+              : usesCustomConfigEditor
+                ? 'clamp(440px, 38vw, 520px)'
+                : 400,
+        } as CSSProperties
+      }
+    >
+      <header className="workflow-node-panel__header">
+        <div className="workflow-node-panel__identity">
+          <Title level={5} className="workflow-node-panel__title">
+            {t('editor.nodeConfiguration')}
+          </Title>
+          <Text
+            className="workflow-node-panel__identity-name"
+            style={{
+              color: nodeTypeColors.accent,
+              background: nodeTypeColors.bg,
+              borderColor: nodeTypeColors.border,
+            }}
+          >
+            {nodeTypeLabel}
+          </Text>
+        </div>
+      </header>
+
+      <div className="workflow-node-panel__tabs">
+        <Segmented
+          block
+          value={view}
+          onChange={(value) => setView(value as 'readable' | 'advanced')}
+          options={[
+            { label: t('viewer.readableView'), value: 'readable' },
+            { label: t('viewer.advancedConfig'), value: 'advanced' },
+          ]}
+        />
+      </div>
+
+      <div className="workflow-node-panel__scroll">
+        {view === 'readable' ? (
+          <Space
+            className="workflow-node-panel__stack"
+            direction="vertical"
+            size={14}
+            style={{ width: '100%' }}
+          >
+            <Card size="small" styles={{ body: { padding: 16 } }}>
+              <Text className="workflow-node-config__section-title">
+                {t('editor.nodeName')}
+              </Text>
+              <Input value={node.label} disabled />
+            </Card>
+
+            {node.instanceRef ? (
+              <Card
+                size="small"
+                className="workflow-node-panel__template-card workflow-node-panel__template-card--active"
+                styles={{ body: { padding: 16 } }}
+              >
+                <div className="workflow-node-panel__template-reference">
+                  <span className="workflow-node-panel__template-status" />
+                  <div className="workflow-node-panel__template-copy">
+                    <Text className="workflow-node-panel__section-title">
+                      {t('editor.referencedInstance')}
+                    </Text>
+                    <code>{node.instanceRef.instanceCode}</code>
+                  </div>
+                </div>
+                <Text className="workflow-node-panel__section-hint">
+                  {t('editor.referenceHint')}
+                </Text>
+              </Card>
+            ) : (
+              <Card
+                size="small"
+                className="workflow-node-panel__template-card"
+                styles={{ body: { padding: 16 } }}
+              >
+                <div className="workflow-node-panel__section-head">
+                  <div>
+                    <Text className="workflow-node-panel__section-title">
+                      {t('editor.template')}
+                    </Text>
+                    <Text className="workflow-node-panel__section-hint">
+                      {t('editor.templateOptional')}
+                    </Text>
+                  </div>
+                </div>
+                <Select
+                  disabled
+                  placeholder={t('viewer.noTemplate')}
+                  style={{ width: '100%' }}
+                />
+              </Card>
+            )}
+
+            {usesTopLevelApprovalSections && hasReadableConfig ? (
+              <Form
+                key={node.id}
+                layout="vertical"
+                disabled
+                initialValues={{ config }}
+                className="workflow-node-panel__approval-sections"
+              >
+                <SchemaForm schema={schema} uiSchema={uiSchema} disabled />
+              </Form>
+            ) : (
+              <Card
+                size="small"
+                className="workflow-node-panel__parameters-card"
+                styles={{ body: { padding: 16 } }}
+                role="region"
+                aria-label={t('viewer.nodeParameters')}
+              >
+                <Text className="workflow-node-config__section-title">
+                  {t('viewer.nodeParameters')}
+                </Text>
+                {hasReadableConfig ? (
+                  <Form
+                    key={node.id}
+                    layout="vertical"
+                    disabled
+                    initialValues={{ config }}
+                  >
+                    <SchemaForm schema={schema} uiSchema={uiSchema} disabled />
+                  </Form>
+                ) : (
+                  <Text type="secondary">{t('viewer.noParameters')}</Text>
+                )}
+              </Card>
+            )}
+
+            <NodeOutputSummary
+              node={node}
+              nodeType={nodeType}
+              nodes={nodes}
+              edges={edges}
+              nodeTypes={nodeTypes}
+            />
+          </Space>
+        ) : (
+          <Card
+            size="small"
+            className="workflow-readonly-panel__advanced"
+            styles={{ body: { padding: 16 } }}
+            role="region"
+            aria-label={t('viewer.rawNodeConfig')}
+          >
+            <div className="workflow-node-panel__section-head">
+              <div>
+                <Text className="workflow-node-panel__section-title">
+                  {t('viewer.rawNodeConfig')}
+                </Text>
+                <Text className="workflow-node-panel__section-hint">
+                  {t('viewer.rawNodeHint')}
+                </Text>
+              </div>
+              <Tooltip title={t('viewer.copyJson')}>
+                <Button
+                  type="text"
+                  size="small"
+                  aria-label={t('viewer.copyJson')}
+                  icon={<CopyOutlined />}
+                  onClick={copyRawNode}
+                />
+              </Tooltip>
+            </div>
+            <pre className="workflow-readonly-panel__code">{rawNode}</pre>
+          </Card>
+        )}
+      </div>
+    </aside>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/RunWorkflowModal.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { customRequest } from 'helpers/http';
+import i18n from '../../../i18n';
+import { RunWorkflowModal } from './RunWorkflowModal';
+
+vi.mock('helpers/http', () => ({ customRequest: vi.fn() }));
+vi.mock('./WorkflowCodeEditor', () => ({
+  WorkflowCodeEditor: ({ value, onChange, ariaLabel }: any) => (
+    <textarea
+      aria-label={ariaLabel}
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+}));
+
+describe('RunWorkflowModal', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('zh_CN');
+    vi.mocked(customRequest).mockResolvedValue({ instanceId: '99' } as never);
+    const getComputedStyle = window.getComputedStyle.bind(window);
+    vi.spyOn(window, 'getComputedStyle').mockImplementation((element) =>
+      getComputedStyle(element),
+    );
+  });
+
+  afterEach(() => vi.restoreAllMocks());
+
+  it('runs the latest published manual Workflow by stable code', async () => {
+    const user = userEvent.setup();
+    render(
+      <RunWorkflowModal
+        workflowCode="asset-disposal"
+        workflowName="资产报废"
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: /运行/ }));
+    await user.click(screen.getByRole('button', { name: /执\s*行/ }));
+
+    await waitFor(() =>
+      expect(customRequest).toHaveBeenCalledWith(
+        'workflow/actions/asset-disposal/execute',
+        'POST',
+        { workflow: {} },
+        { headers: { 'Idempotency-Key': expect.any(String) } },
+      ),
+    );
+  });
+});