@gadmin2n/schematics 0.0.147 → 0.0.149

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/node-instance-show.css

@@ -0,0 +1,185 @@
+.node-instance-show__header,
+.node-instance-show__header-main,
+.node-instance-show__title-row,
+.node-instance-show__section-heading {
+  display: flex;
+  align-items: center;
+}
+
+.node-instance-show__header {
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.node-instance-show__header-main {
+  min-width: 0;
+  gap: 8px;
+}
+
+.node-instance-show__heading {
+  min-width: 0;
+}
+
+.node-instance-show__title-row {
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.node-instance-show__title-row .ant-typography {
+  margin: 0;
+}
+
+.node-instance-show__section-heading {
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.node-instance-show__section-heading .ant-typography {
+  margin: 0;
+}
+
+.node-instance-show__section-heading h5.ant-typography {
+  font-size: var(--workflow-content-title-size, 18px);
+  line-height: 28px;
+}
+
+.node-instance-show__summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-show__summary-item {
+  min-width: 0;
+  padding: 16px 18px;
+  border-right: 1px solid var(--ant-color-border-secondary);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.node-instance-show__summary-item:nth-child(3n) {
+  border-right: 0;
+}
+
+.node-instance-show__summary-item:nth-last-child(-n + 3) {
+  border-bottom: 0;
+}
+
+.node-instance-show__summary-item > .ant-typography:first-child {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+
+.node-instance-show__summary-item > div {
+  min-height: 24px;
+  overflow-wrap: anywhere;
+}
+
+.node-instance-show__description {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 16px;
+  margin-top: 16px;
+  padding: 16px 18px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+}
+
+.node-instance-show__configuration {
+  max-width: 960px;
+  padding: 20px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 10px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-show__empty {
+  margin: 0;
+  padding: 28px 0;
+  border: 1px dashed var(--ant-color-border-secondary);
+  border-radius: 10px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.node-instance-show__references-loading {
+  display: flex;
+  min-height: 112px;
+  align-items: center;
+  justify-content: center;
+}
+
+.node-instance-show__workflow-link.ant-btn {
+  height: auto;
+  padding: 0;
+  white-space: normal;
+  text-align: left;
+}
+
+.node-instance-show__loading,
+.node-instance-show__not-found {
+  min-height: calc(100vh - 160px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.node-instance-show__not-found {
+  flex-direction: column;
+  gap: 16px;
+}
+
+@media (max-width: 900px) {
+  .node-instance-show__summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .node-instance-show__summary-item,
+  .node-instance-show__summary-item:nth-child(3n) {
+    border-right: 1px solid var(--ant-color-border-secondary);
+    border-bottom: 1px solid var(--ant-color-border-secondary);
+  }
+
+  .node-instance-show__summary-item:nth-child(2n) {
+    border-right: 0;
+  }
+
+  .node-instance-show__summary-item:nth-last-child(-n + 2) {
+    border-bottom: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .node-instance-show__header,
+  .node-instance-show__section-heading {
+    align-items: flex-start;
+  }
+
+  .node-instance-show__summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .node-instance-show__summary-item,
+  .node-instance-show__summary-item:nth-child(2n),
+  .node-instance-show__summary-item:nth-child(3n) {
+    border-right: 0;
+    border-bottom: 1px solid var(--ant-color-border-secondary);
+  }
+
+  .node-instance-show__summary-item:last-child {
+    border-bottom: 0;
+  }
+
+  .node-instance-show__description {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .node-instance-show__configuration {
+    padding: 16px;
+  }
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/show.tsx

@@ -1,24 +1,48 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Button,
   Card,
-  Descriptions,
+  Empty,
+  Form,
   Popconfirm,
   Space,
   Spin,
-  Switch,
   Table,
   Tag,
+  Typography,
   message,
 } from 'antd';
-import { DeleteOutlined, EditOutlined, LinkOutlined } from '@ant-design/icons';
+import {
+  ArrowLeftOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  LinkOutlined,
+} from '@ant-design/icons';
 import { useNavigate, useParams } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
-import { PageHeader } from 'components';
-import { PAGE_WRAPPER_STYLE } from 'constants/layout';
+import {
+  CARD_GAP_STYLE,
+  HEADER_CARD_PROPS,
+  PAGE_WRAPPER_STYLE,
+} from 'constants/layout';
 import { useTranslation } from 'react-i18next';
+import type { JsonSchema, UiSchema } from './schema-form/schema.types';
+import { SchemaForm } from './schema-form/SchemaForm';
 import { formatWorkflowUtcDateTime } from '../utils/workflowDateTime';
 import '../workflow-ui.css';
+import './node-config.css';
+import './node-instance-show.css';
+
+const { Text, Title } = Typography;
+
+const CATEGORY_COLORS: Record<string, string> = {
+  TRIGGER: 'blue',
+  ACTION: 'green',
+  CONDITION: 'orange',
+  FLOW_CONTROL: 'purple',
+  APPROVAL: 'red',
+  SUB_WORKFLOW: 'geekblue',
+};
 
 interface NodeInstance {
   id: string;
@@ -31,27 +55,29 @@ interface NodeInstance {
   createdAt: string;
   updatedAt: string;
   nodeType?: {
+    type: string;
     label: string;
     category: string;
-    configSchema: Record<string, any>;
+    configSchema: JsonSchema;
+    uiSchema: UiSchema;
   };
 }
 
+interface NodeInstanceReference {
+  workflowId: string;
+  workflowName: string;
+  version: number;
+  nodeId: string;
+  nodeLabel: string;
+}
+
 export default function NodeInstanceShowPage() {
   const { t } = useTranslation('workflow');
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const [record, setRecord] = useState<NodeInstance | null>(null);
   const [loading, setLoading] = useState(true);
-  const [references, setReferences] = useState<
-    {
-      workflowId: string;
-      workflowName: string;
-      version: number;
-      nodeId: string;
-      nodeLabel: string;
-    }[]
-  >([]);
+  const [references, setReferences] = useState<NodeInstanceReference[]>([]);
   const [refsLoading, setRefsLoading] = useState(false);
 
   const fetchRecord = useCallback(async () => {
@@ -71,7 +97,13 @@ export default function NodeInstanceShowPage() {
           createdAt: true,
           updatedAt: true,
           nodeType: {
-            select: { label: true, category: true, configSchema: true },
+            select: {
+              type: true,
+              label: true,
+              category: true,
+              configSchema: true,
+              uiSchema: true,
+            },
           },
         },
       );
@@ -90,7 +122,10 @@ export default function NodeInstanceShowPage() {
   useEffect(() => {
     if (!id) return;
     setRefsLoading(true);
-    customRequest<any[]>(`workflowNodeInstance/${id}/references`, 'POST')
+    customRequest<NodeInstanceReference[]>(
+      `workflowNodeInstance/${id}/references`,
+      'POST',
+    )
       .then((res) => setReferences(Array.isArray(res) ? res : []))
       .catch(() => {
         setReferences([]);
@@ -109,11 +144,16 @@ export default function NodeInstanceShowPage() {
     }
   }
 
+  const nodeTypeLabel = useMemo(() => {
+    if (!record?.nodeType) return '—';
+    return t(`nodeTypes.${record.nodeType.type}`, {
+      defaultValue: record.nodeType.label,
+    });
+  }, [record?.nodeType, t]);
+
   if (loading) {
     return (
-      <div
-        style={{ display: 'flex', justifyContent: 'center', paddingTop: 120 }}
-      >
+      <div className="node-instance-show__loading">
         <Spin size="large" />
       </div>
     );
@@ -121,25 +161,52 @@ export default function NodeInstanceShowPage() {
 
   if (!record) {
     return (
-      <div style={{ padding: 24 }}>{t('nodeInstance.recordNotFound')}</div>
+      <div className="node-instance-show__not-found">
+        <Empty description={t('nodeInstance.recordNotFound')} />
+        <Button onClick={() => navigate('/admin/workflow/node-instances')}>
+          {t('common.back')}
+        </Button>
+      </div>
     );
   }
 
-  const configSchema = record.nodeType?.configSchema as any;
-  const configProperties = configSchema?.properties ?? {};
-  const configData = record.config;
+  const hasConfiguration = Object.keys(record.config).length > 0;
+  const categoryLabel = record.nodeType?.category
+    ? t(`nodeCategories.${record.nodeType.category}`, {
+        defaultValue: record.nodeType.category,
+      })
+    : '—';
 
   return (
-    <div className="workflow-page-stack" style={PAGE_WRAPPER_STYLE}>
-      <PageHeader
-        title={record.name}
-        subtitle={t('nodeInstance.detailDescription')}
-        extra={
-          <Space>
-            <Button onClick={() => navigate('/admin/workflow/node-instances')}>
-              {t('common.back')}
-            </Button>
+    <div
+      className="workflow-node-config node-instance-show"
+      style={PAGE_WRAPPER_STYLE}
+    >
+      <Card {...HEADER_CARD_PROPS}>
+        <div className="node-instance-show__header">
+          <div className="node-instance-show__header-main">
             <Button
+              type="text"
+              icon={<ArrowLeftOutlined />}
+              aria-label={t('common.back')}
+              onClick={() => navigate('/admin/workflow/node-instances')}
+            />
+            <div className="node-instance-show__heading">
+              <div className="node-instance-show__title-row">
+                <Title level={4}>{record.name}</Title>
+                <Tag color={record.isEnabled ? 'success' : 'default'}>
+                  {t(record.isEnabled ? 'common.enabled' : 'common.disabled')}
+                </Tag>
+              </div>
+              <Text type="secondary">
+                {t('nodeInstance.detailDescription')}
+              </Text>
+            </div>
+          </div>
+
+          <Space wrap>
+            <Button
+              type="primary"
               icon={<EditOutlined />}
               onClick={() =>
                 navigate(`/admin/workflow/node-instances/edit/${id}`)
@@ -160,105 +227,142 @@ export default function NodeInstanceShowPage() {
               </Button>
             </Popconfirm>
           </Space>
-        }
-      />
+        </div>
+      </Card>
 
-      <Card title={t('nodeInstance.basicInfo')}>
-        <Descriptions column={2}>
-          <Descriptions.Item label={t('common.name')}>
-            {record.name}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('nodeInstance.nodeType')}>
-            <Space>
-              <span>{record.nodeType?.label ?? '—'}</span>
+      <Card style={CARD_GAP_STYLE}>
+        <div className="node-instance-show__section-heading">
+          <div>
+            <Title level={5}>{t('nodeInstance.basicInfo')}</Title>
+            <Text type="secondary">
+              {t('nodeInstance.detailSummaryDescription')}
+            </Text>
+          </div>
+        </div>
+
+        <div className="node-instance-show__summary-grid">
+          <SummaryItem label={t('nodeInstance.nodeType')}>
+            <Space size={6} wrap>
+              <Text strong>{nodeTypeLabel}</Text>
               {record.nodeType?.category && (
-                <Tag color="blue">
-                  {t(`nodeCategories.${record.nodeType.category}`, {
-                    defaultValue: record.nodeType.category,
-                  })}
+                <Tag color={CATEGORY_COLORS[record.nodeType.category]}>
+                  {categoryLabel}
                 </Tag>
               )}
             </Space>
-          </Descriptions.Item>
-          <Descriptions.Item label={t('common.description')}>
-            {record.description || '—'}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('common.enabled')}>
-            <Switch size="small" checked={record.isEnabled} disabled />
-          </Descriptions.Item>
-          <Descriptions.Item label={t('instances.creator')}>
-            {record.creator || '—'}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('nodeInstance.createdAt')}>
-            {formatWorkflowUtcDateTime(record.createdAt)}
-          </Descriptions.Item>
-          <Descriptions.Item label={t('list.updatedAt')}>
-            {formatWorkflowUtcDateTime(record.updatedAt)}
-          </Descriptions.Item>
-        </Descriptions>
+          </SummaryItem>
+          <SummaryItem label={t('nodeInstance.referenceCount')}>
+            <Text strong>{refsLoading ? '—' : references.length}</Text>
+          </SummaryItem>
+          <SummaryItem label={t('instances.creator')}>
+            <Text strong>{record.creator || '—'}</Text>
+          </SummaryItem>
+          <SummaryItem label={t('nodeInstance.createdAt')}>
+            <Text strong>{formatWorkflowUtcDateTime(record.createdAt)}</Text>
+          </SummaryItem>
+          <SummaryItem label={t('list.updatedAt')}>
+            <Text strong>{formatWorkflowUtcDateTime(record.updatedAt)}</Text>
+          </SummaryItem>
+          <SummaryItem label={t('nodeInstance.instanceId')}>
+            <Text code>{record.id}</Text>
+          </SummaryItem>
+        </div>
+
+        <div className="node-instance-show__description">
+          <Text type="secondary">{t('common.description')}</Text>
+          <Text>{record.description || t('nodeInstance.noDescription')}</Text>
+        </div>
       </Card>
 
-      <Card title={t('common.configuration')}>
-        {Object.keys(configData).length === 0 ? (
-          <span style={{ color: '#999' }}>
-            {t('nodeInstance.noConfiguration')}
-          </span>
-        ) : (
-          <Descriptions column={1} bordered size="small">
-            {Object.entries(configData).map(([key, value]) => {
-              const prop = configProperties[key];
-              const label = prop?.title || key;
-              const displayValue =
-                typeof value === 'boolean'
-                  ? value
-                    ? 'Yes'
-                    : 'No'
-                  : Array.isArray(value)
-                    ? value.join(', ')
-                    : String(value ?? '—');
-              return (
-                <Descriptions.Item key={key} label={label}>
-                  {displayValue}
-                </Descriptions.Item>
-              );
-            })}
-          </Descriptions>
-        )}
+      <Card style={CARD_GAP_STYLE}>
+        <div className="node-instance-show__section-heading">
+          <div>
+            <Title level={5}>{t('editor.parameters')}</Title>
+            <Text type="secondary">
+              {t('nodeInstance.configurationDescription', {
+                name: nodeTypeLabel,
+              })}
+            </Text>
+          </div>
+        </div>
+
+        {!hasConfiguration ? (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            className="node-instance-show__empty"
+            description={t('nodeInstance.noConfiguration')}
+          />
+        ) : record.nodeType?.configSchema ? (
+          <Form
+            key={record.id}
+            layout="vertical"
+            disabled
+            initialValues={{ config: record.config }}
+          >
+            <div className="node-instance-show__configuration">
+              <SchemaForm
+                schema={record.nodeType.configSchema}
+                uiSchema={record.nodeType.uiSchema}
+                disabled
+                validate={false}
+              />
+            </div>
+          </Form>
+        ) : null}
       </Card>
 
-      <Card title={t('nodeInstance.referencedBy')}>
+      <Card>
+        <div className="node-instance-show__section-heading">
+          <div>
+            <Title level={5}>{t('nodeInstance.referencedBy')}</Title>
+            <Text type="secondary">
+              {t('nodeInstance.referencesDescription')}
+            </Text>
+          </div>
+          {!refsLoading && <Tag>{references.length}</Tag>}
+        </div>
+
         {refsLoading ? (
-          <Spin size="small" />
+          <div className="node-instance-show__references-loading">
+            <Spin size="small" />
+          </div>
         ) : references.length === 0 ? (
-          <span style={{ color: '#999' }}>
-            {t('nodeInstance.noReferences')}
-          </span>
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            className="node-instance-show__empty"
+            description={t('nodeInstance.noReferences')}
+          />
         ) : (
-          <Table
+          <Table<NodeInstanceReference>
             dataSource={references}
-            rowKey={(r) => `${r.workflowId}-${r.nodeId}`}
+            rowKey={(reference) =>
+              `${reference.workflowId}-${reference.nodeId}`
+            }
             pagination={false}
             size="small"
+            scroll={{ x: 560 }}
             columns={[
               {
                 title: 'Workflow',
                 dataIndex: 'workflowName',
-                render: (name: string, record: any) => (
-                  <a
+                render: (name: string, reference) => (
+                  <Button
+                    type="link"
+                    className="node-instance-show__workflow-link"
+                    icon={<LinkOutlined />}
                     onClick={() =>
-                      navigate(`/admin/workflow/show/${record.workflowId}`)
+                      navigate(`/admin/workflow/show/${reference.workflowId}`)
                     }
                   >
-                    <LinkOutlined style={{ marginRight: 4 }} />
                     {name}
-                  </a>
+                  </Button>
                 ),
               },
               {
                 title: t('list.version'),
                 dataIndex: 'version',
-                width: 80,
-                render: (v: number) => `v${v}`,
+                width: 100,
+                render: (version: number) => <Tag>{`v${version}`}</Tag>,
               },
               {
                 title: t('nodeInstance.node'),
@@ -271,3 +375,18 @@ export default function NodeInstanceShowPage() {
     </div>
   );
 }
+
+function SummaryItem({
+  label,
+  children,
+}: {
+  label: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="node-instance-show__summary-item">
+      <Text type="secondary">{label}</Text>
+      <div>{children}</div>
+    </div>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/CodeConfigEditor.test.tsx

@@ -25,7 +25,7 @@ describe('CodeConfigEditor context guidance', () => {
     [
       'approverLookup',
       '查询审批人接口返回的 { status, data, headers }。',
-      '返回 { subjects: [{ provider, refs }] }，用于确定本次审批人。',
+      "返回人员 ID 数组，例如 ['zhangsan', 'lisi']。",
     ],
     [
       'approvalCreation',

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/widgets/DbExecuteConfigEditor.tsx

@@ -1,5 +1,6 @@
-import { Input, InputNumber, Space, Switch, Typography } from 'antd';
+import { InputNumber, Space, Switch, Tag, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
+import { WorkflowCodeEditor } from '../../components/WorkflowCodeEditor';
 import type { ParameterBinding } from '../../types/parameter-binding';
 import type { WidgetProps } from '../schema-form/widget-registry';
 import { ParameterBindingListEditor } from './ParameterBindingListEditor';
@@ -82,18 +83,26 @@ export function DbExecuteConfigEditor({
       </div>
 
       <Space direction="vertical" size={6} style={{ width: '100%' }}>
-        <Typography.Text>{t('nodeEditors.database.sql')}</Typography.Text>
-        <Input.TextArea
-          aria-label={t('nodeEditors.database.sql')}
+        <div className="db-execute-config__sql-head">
+          <Typography.Text strong>
+            {t('nodeEditors.database.sql')}
+          </Typography.Text>
+          <Tag bordered={false} color={allowWrite ? 'orange' : 'green'}>
+            {t(
+              allowWrite
+                ? 'nodeEditors.database.writeEnabled'
+                : 'nodeEditors.database.readOnly',
+            )}
+          </Tag>
+        </div>
+        <WorkflowCodeEditor
+          language="sql"
           value={config.sql ?? ''}
-          disabled={disabled}
-          rows={7}
-          placeholder={
-            allowWrite
-              ? 'UPDATE users SET active = $1 WHERE id = $2'
-              : 'SELECT id, name FROM users WHERE id = $1'
-          }
-          onChange={(event) => onChange({ ...config, sql: event.target.value })}
+          readOnly={disabled}
+          height={280}
+          wordWrap="off"
+          ariaLabel={t('nodeEditors.database.sql')}
+          onChange={(sql) => onChange({ ...config, sql })}
         />
       </Space>