@gadmin2n/schematics 0.0.139 → 0.0.141

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

@@ -1,7 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import {
+  DeleteOutlined,
+  DisconnectOutlined,
+  LinkOutlined,
+  MinusCircleOutlined,
+  PlusOutlined,
+  SendOutlined,
+} from '@ant-design/icons';
 import {
   Button,
   Checkbox,
+  Form,
   Input,
   InputNumber,
   message,
@@ -14,16 +22,17 @@ import {
   Tooltip,
   Typography,
 } from 'antd';
-import {
-  DeleteOutlined,
-  DisconnectOutlined,
-  LinkOutlined,
-  MinusCircleOutlined,
-  PlusOutlined,
-  SendOutlined,
-} from '@ant-design/icons';
 import { customRequest } from 'helpers/http';
-import type { WorkflowNode, WorkflowNodeType } from '../types';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SchemaForm } from '../node-instances/schema-form/SchemaForm';
+import type {
+  WorkflowNode,
+  WorkflowNodeInstance,
+  WorkflowNodeType,
+} from '../types';
+import type { ParameterBinding } from '../types/parameter-binding';
+import { ParameterBindingEditor } from './ParameterBindingEditor';
 
 const { Text, Title } = Typography;
 const { TextArea } = Input;
@@ -55,7 +64,7 @@ const TEXTAREA_FIELDS = new Set([
   'condition',
   'body',
   'headers',
-  'inputMapping',
+  'inputBindings',
   'script',
   'rawSql',
   'data',
@@ -63,6 +72,21 @@ const TEXTAREA_FIELDS = new Set([
   'fallbackExpression',
 ]);
 
+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),
+  );
+}
+
 // Rich tooltip content for node types (hardcoded)
 const NODE_TOOLTIPS: Record<string, string> = {
   cron_trigger:
@@ -82,10 +106,14 @@ const NODE_TOOLTIPS: Record<string, string> = {
     'Temporal: 事件总线收到事件后调用 WorkflowClient.start() 启动新 Workflow，或通过 Signal 唤醒等待中的 Workflow\n\n' +
     '通常后端会有一个事件总线（如 Redis Pub/Sub、NATS、Kafka、或简单的内存 EventEmitter），当业务代码 emit("order.paid", payload)时，事件中间件查找所有订阅了该事件的 active workflow 定义，并启动对应的 Temporal Workflow。',
   webhook_trigger:
-    '通过 HTTP 请求触发工作流\n' +
+    '接收外部 HTTP 请求并启动 Workflow\n' +
     '━━━━━━━━━━━━━━━━━━━━\n' +
     '示例: 第三方支付回调、GitHub Webhook、表单提交\n' +
-    'Temporal: HTTP 网关接收请求后调用 WorkflowClient.start()，支持同步等待结果或异步返回',
+    '收到的请求体、查询参数和请求头分别放在 workflow.body、workflow.query 和 workflow.headers',
+  submit_approval_result:
+    '提交外部审批结果\n' +
+    '━━━━━━━━━━━━━━━━━━━━\n' +
+    '把 requestId、审批人和审批决定提交给正在等待的人工审核节点',
   manual_trigger:
     '手动触发，用于调试或一次性执行\n' +
     '━━━━━━━━━━━━━━━━━━━━\n' +
@@ -115,12 +143,12 @@ const NODE_TOOLTIPS: Record<string, string> = {
     '执行自定义 JavaScript 代码\n' +
     '━━━━━━━━━━━━━━━━━━━━\n' +
     '示例: 数据格式转换、复杂计算、JSON 结构重组、条件逻辑\n' +
-    'Temporal: 封装为 Activity，在 Worker 中通过 VM2 沙箱执行',
+    'Temporal: 封装为 Activity，通过应用侧受限 Code Runtime 执行',
   set_variable:
     '设置、转换或重命名工作流变量\n' +
     '━━━━━━━━━━━━━━━━━━━━\n' +
     '示例: 提取嵌套字段、重命名 API 返回字段、构造下游所需结构\n' +
-    'Temporal: 在 Workflow 代码中直接操作 context 对象',
+    'Temporal: 读取 input，并把结果传给下一个节点',
   if_else:
     '根据条件走不同分支\n' +
     '━━━━━━━━━━━━━━━━━━━━\n' +
@@ -197,6 +225,7 @@ interface Props {
     updates: {
       label?: string;
       config?: Record<string, any>;
+      configOverride?: Record<string, any> | null;
       instanceRef?: WorkflowNode['instanceRef'] | null;
     },
   ) => void;
@@ -218,22 +247,24 @@ export function NodePropertyPanel({
   onAbort,
   aiLoading,
 }: Props) {
+  const { t } = useTranslation('workflow');
   const [label, setLabel] = useState('');
   const [config, setConfig] = useState<Record<string, any>>({});
   const [prompt, setPrompt] = useState('');
   const [dirty, setDirty] = useState(false);
   const [activeTab, setActiveTab] = useState<'config' | 'ai'>('config');
   const [workflowOptions, setWorkflowOptions] = useState<
-    { label: string; value: string }[]
-  >([]);
-  const [instances, setInstances] = useState<
     {
-      id: string;
-      name: string;
-      description: string | null;
-      config: Record<string, any>;
+      label: string;
+      value: string;
+      inputParameters: Array<{
+        key: string;
+        label?: string;
+        required?: boolean;
+      }>;
     }[]
   >([]);
+  const [instances, setInstances] = useState<WorkflowNodeInstance[]>([]);
   const [selectedInstanceId, setSelectedInstanceId] = useState<string | null>(
     null,
   );
@@ -242,27 +273,79 @@ export function NodePropertyPanel({
   const [newInstanceDesc, setNewInstanceDesc] = useState('');
   const [saveAsLoading, setSaveAsLoading] = useState(false);
   const [alsoSaveAsInstance, setAlsoSaveAsInstance] = useState(false);
+  const [configForm] = Form.useForm();
 
   // Find configSchema for current node type
   const currentNodeType = nodeTypes.find((nt) => nt.type === node?.type);
   const configSchema = (currentNodeType?.configSchema || {}) as any;
   const requiredFields: string[] = configSchema.required || [];
   const properties: Record<string, any> = configSchema.properties || {};
-
+  const currentUiSchema =
+    currentNodeType?.uiSchema &&
+    typeof currentNodeType.uiSchema === 'object' &&
+    !Array.isArray(currentNodeType.uiSchema)
+      ? (currentNodeType.uiSchema as Record<string, any>)
+      : {};
+  const effectiveUiSchema = (() => {
+    if (currentNodeType?.type === 'callable_trigger') {
+      return {
+        ...currentUiSchema,
+        fields: {
+          ...(currentUiSchema.fields ?? {}),
+          inputParameters: {
+            ...(currentUiSchema.fields?.inputParameters ?? {}),
+            widget: 'callable-input-parameters',
+          },
+        },
+      };
+    }
+    if (currentNodeType?.type === 'return_result') {
+      return {
+        ...currentUiSchema,
+        widget: 'return-result-config',
+      };
+    }
+    if (currentNodeType?.type === 'webhook_trigger') {
+      return {
+        ...currentUiSchema,
+        widget: 'external-request-config',
+      };
+    }
+    if (currentNodeType?.type === 'submit_approval_result') {
+      return {
+        ...currentUiSchema,
+        widget: 'submit-approval-result-config',
+      };
+    }
+    if (currentNodeType?.type === 'submit_external_result') {
+      return {
+        ...currentUiSchema,
+        widget: 'submit-external-result-config',
+      };
+    }
+    if (currentNodeType?.type === 'external_wait') {
+      return {
+        ...currentUiSchema,
+        widget: 'external-wait-config',
+      };
+    }
+    return currentNodeType?.uiSchema;
+  })();
+  const usesCustomConfigEditor = hasUiSchemaWidget(effectiveUiSchema);
+  const referencedInstance = instances.find(
+    (instance) => instance.id === node?.instanceRef?.instanceId,
+  );
+  const effectiveNodeConfig =
+    node?.configOverride ?? referencedInstance?.config ?? node?.config ?? {};
   useEffect(() => {
     if (node) {
       setLabel(node.label);
       // Merge existing config with schema defaults
       const mergedConfig: Record<string, any> = {};
       for (const [key, prop] of Object.entries<any>(properties)) {
-        const existingValue = node.config?.[key];
+        const existingValue = effectiveNodeConfig[key];
         if (existingValue !== undefined) {
-          mergedConfig[key] =
-            key === 'approvers' && Array.isArray(existingValue)
-              ? existingValue.map((a: any) =>
-                  typeof a === 'string' ? { type: 'user', id: a } : a,
-                )
-              : existingValue;
+          mergedConfig[key] = existingValue;
         } else if (prop.type === 'string') {
           mergedConfig[key] = '';
         } else if (prop.type === 'number') {
@@ -275,9 +358,15 @@ export function NodePropertyPanel({
           mergedConfig[key] = {};
         }
       }
+      if (node.type === 'webhook_trigger') {
+        mergedConfig.method = 'POST';
+      }
       setConfig(mergedConfig);
+      configForm.resetFields();
+      configForm.setFieldsValue({ config: mergedConfig });
       setDirty(false);
       setPrompt('');
+      setAlsoSaveAsInstance(false);
     }
   }, [node?.id, currentNodeType]);
 
@@ -287,7 +376,7 @@ export function NodePropertyPanel({
     setLabel(node.label);
     const mergedConfig: Record<string, any> = {};
     for (const [key, prop] of Object.entries<any>(properties)) {
-      const existingValue = node.config?.[key];
+      const existingValue = effectiveNodeConfig[key];
       if (existingValue !== undefined) {
         mergedConfig[key] = existingValue;
       } else if (prop.type === 'string') {
@@ -303,19 +392,27 @@ export function NodePropertyPanel({
       }
     }
     setConfig(mergedConfig);
+    configForm.resetFields();
+    configForm.setFieldsValue({ config: mergedConfig });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [node?.label, JSON.stringify(node?.config)]);
+  }, [node?.label, JSON.stringify(effectiveNodeConfig)]);
 
   // Load workflow list for Sub Workflow node
   useEffect(() => {
     if (node?.type === 'sub_workflow') {
-      customRequest<{ data: any[] }>('workflow', 'GET')
+      customRequest<any[]>('workflow/callable', 'GET')
         .then((res) => {
-          const list = Array.isArray(res) ? res : res?.data || [];
+          const list = Array.isArray(res) ? res : [];
           setWorkflowOptions(
             list
               .filter((w: any) => String(w.id) !== currentWorkflowId)
-              .map((w: any) => ({ label: w.name, value: String(w.id) })),
+              .map((w: any) => ({
+                label: w.name,
+                value: String(w.id),
+                inputParameters: Array.isArray(w.inputParameters)
+                  ? w.inputParameters
+                  : [],
+              })),
           );
         })
         .catch(() => {});
@@ -324,7 +421,10 @@ export function NodePropertyPanel({
 
   // Load instances for current node type
   useEffect(() => {
-    if (!currentNodeType?.id) {
+    if (
+      !currentNodeType?.id ||
+      currentNodeType.instancePolicy === 'INLINE_ONLY'
+    ) {
       setInstances([]);
       return;
     }
@@ -335,18 +435,11 @@ export function NodePropertyPanel({
     })
       .then((res) => {
         const list = Array.isArray(res) ? res : res?.data || [];
-        setInstances(
-          list.map((item: any) => ({
-            id: String(item.id),
-            name: item.name,
-            description: item.description,
-            config: item.config ?? {},
-          })),
-        );
+        setInstances(list);
       })
       .catch(() => setInstances([]))
       .finally(() => setInstanceLoading(false));
-  }, [currentNodeType?.id]);
+  }, [currentNodeType?.id, currentNodeType?.instancePolicy]);
 
   // Reset selection when node changes
   useEffect(() => {
@@ -365,21 +458,23 @@ export function NodePropertyPanel({
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            borderLeft: '1px solid #f0f0f0',
-            background: '#fff',
+            borderLeft: '1px solid var(--ant-color-border-secondary)',
+            background: 'var(--ant-color-bg-container)',
             gap: 16,
             padding: 32,
           }}
         >
           <Spin size="large" />
-          <Title level={5} style={{ margin: 0, color: '#595959' }}>
-            AI is generating workflow…
+          <Title
+            level={5}
+            style={{ margin: 0, color: 'var(--ant-color-text-secondary)' }}
+          >
+            {t('editor.aiGenerating')}
           </Title>
           <Text type="secondary" style={{ textAlign: 'center', fontSize: 13 }}>
-            Please wait, the workflow will be updated on the canvas
-            automatically.
+            {t('editor.aiGeneratingHint')}
           </Text>
-          <Button onClick={() => onAbort?.()}>Cancel</Button>
+          <Button onClick={() => onAbort?.()}>{t('common.cancel')}</Button>
         </div>
       );
     }
@@ -390,8 +485,8 @@ export function NodePropertyPanel({
           width: 320,
           display: 'flex',
           flexDirection: 'column',
-          borderLeft: '1px solid #f0f0f0',
-          background: '#fff',
+          borderLeft: '1px solid var(--ant-color-border-secondary)',
+          background: 'var(--ant-color-bg-container)',
           overflow: 'hidden',
         }}
       >
@@ -404,12 +499,18 @@ export function NodePropertyPanel({
             拖拽节点到左侧画布
           </Text>
           {Object.entries(
-            nodeTypes.reduce<Record<string, WorkflowNodeType[]>>((acc, nt) => {
-              const cat = nt.category || 'ACTION';
-              if (!acc[cat]) acc[cat] = [];
-              acc[cat].push(nt);
-              return acc;
-            }, {}),
+            nodeTypes
+              .filter(
+                (nt) =>
+                  nt.type !== 'approval_request_trigger' &&
+                  nt.type !== 'submit_approval_result',
+              )
+              .reduce<Record<string, WorkflowNodeType[]>>((acc, nt) => {
+                const cat = nt.category || 'ACTION';
+                if (!acc[cat]) acc[cat] = [];
+                acc[cat].push(nt);
+                return acc;
+              }, {}),
           ).map(([category, types]) => {
             const colors = CATEGORY_COLORS[category] || CATEGORY_COLORS.ACTION;
             return (
@@ -418,7 +519,7 @@ export function NodePropertyPanel({
                   strong
                   style={{
                     fontSize: 12,
-                    color: '#595959',
+                    color: 'var(--ant-color-text-secondary)',
                     display: 'block',
                     marginBottom: 6,
                   }}
@@ -463,7 +564,9 @@ export function NodePropertyPanel({
                           userSelect: 'none',
                         }}
                       >
-                        {nt.label}
+                        {t(`nodeTypes.${nt.type}`, {
+                          defaultValue: nt.label,
+                        })}
                       </div>
                     </Tooltip>
                   ))}
@@ -490,13 +593,20 @@ export function NodePropertyPanel({
 
   async function handleSave() {
     if (!node) return;
+    const currentConfig = usesCustomConfigEditor
+      ? (configForm.getFieldValue('config') ?? {})
+      : config;
     // Clean undefined values
     const cleanConfig: Record<string, any> = {};
-    for (const [k, v] of Object.entries(config)) {
+    for (const [k, v] of Object.entries(currentConfig)) {
       if (v !== undefined && v !== '') cleanConfig[k] = v;
     }
-
-    if (alsoSaveAsInstance && currentNodeType && newInstanceName.trim()) {
+    if (
+      !node.instanceRef &&
+      alsoSaveAsInstance &&
+      currentNodeType &&
+      newInstanceName.trim()
+    ) {
       // Save node AND create a new instance, then reference it
       setSaveAsLoading(true);
       try {
@@ -511,24 +621,18 @@ export function NodePropertyPanel({
             isEnabled: true,
           },
         );
-        const newId = String(res.id);
+        const created = res;
+        const newId = String(created.id);
         onSave(node.id, {
           label,
-          config: {},
+          config: created.config,
+          configOverride: null,
           instanceRef: {
             instanceId: newId,
-            instanceName: newInstanceName.trim(),
+            instanceCode: created.code,
           },
         });
-        setInstances((prev) => [
-          ...prev,
-          {
-            id: newId,
-            name: newInstanceName.trim(),
-            description: newInstanceDesc.trim() || null,
-            config: cleanConfig,
-          },
-        ]);
+        setInstances((prev) => [...prev, created]);
         setAlsoSaveAsInstance(false);
         setNewInstanceName('');
         setNewInstanceDesc('');
@@ -539,7 +643,11 @@ export function NodePropertyPanel({
         setSaveAsLoading(false);
       }
     } else {
-      onSave(node.id, { label, config: cleanConfig });
+      onSave(node.id, {
+        label,
+        config: cleanConfig,
+        ...(node.instanceRef && { configOverride: cleanConfig }),
+      });
       message.success('节点已保存');
     }
     setDirty(false);
@@ -557,8 +665,12 @@ export function NodePropertyPanel({
     if (!inst) return;
     onSave(node.id, {
       label: inst.name,
-      config: {},
-      instanceRef: { instanceId: inst.id, instanceName: inst.name },
+      config: inst.config,
+      configOverride: null,
+      instanceRef: {
+        instanceId: inst.id,
+        instanceCode: inst.code,
+      },
     });
     setLabel(inst.name);
     setSelectedInstanceId(null);
@@ -580,9 +692,11 @@ export function NodePropertyPanel({
 
   function handleDetachReference() {
     if (!node) return;
-    const inst = instances.find((i) => i.id === node.instanceRef?.instanceId);
-    const resolvedConfig = inst?.config ?? {};
-    onSave(node.id, { config: resolvedConfig, instanceRef: null });
+    onSave(node.id, {
+      config: effectiveNodeConfig,
+      configOverride: null,
+      instanceRef: null,
+    });
   }
 
   // Render a config field based on its schema
@@ -590,6 +704,14 @@ export function NodePropertyPanel({
     const isRequired = requiredFields.includes(key);
     const value = config[key];
     const placeholder = FIELD_PLACEHOLDERS[key] || '';
+    const fieldLabel =
+      node?.type === 'sub_workflow'
+        ? ({
+            workflowId: '调用哪个 Workflow',
+            waitForCompletion: '等待它运行完成',
+            timeout: '最长等待时间（秒）',
+          }[key] ?? key)
+        : key;
 
     // Special: workflowId → Select with workflow list
     if (key === 'workflowId') {
@@ -600,11 +722,26 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           <Select
             value={value || undefined}
-            onChange={(v) => handleConfigChange(key, v)}
+            onChange={(v) => {
+              const selected = workflowOptions.find(
+                (workflow) => workflow.value === v,
+              );
+              setConfig((current) => ({
+                ...current,
+                workflowId: v,
+                inputBindings: Object.fromEntries(
+                  (selected?.inputParameters ?? []).map((parameter) => [
+                    parameter.key,
+                    { source: 'WORKFLOW', path: parameter.key },
+                  ]),
+                ),
+              }));
+              setDirty(true);
+            }}
             placeholder="选择子流程"
             options={workflowOptions}
             style={{ width: '100%' }}
@@ -618,6 +755,66 @@ export function NodePropertyPanel({
       );
     }
 
+    if (key === 'inputBindings' && node?.type === 'sub_workflow') {
+      const selected = workflowOptions.find(
+        (workflow) => workflow.value === config.workflowId,
+      );
+      if (!selected) {
+        return (
+          <Text key={key} type="secondary">
+            请先选择要调用的 Workflow
+          </Text>
+        );
+      }
+      if (selected.inputParameters.length === 0) {
+        return (
+          <Text key={key} type="secondary">
+            这个 Workflow 不需要调用参数
+          </Text>
+        );
+      }
+      const bindings =
+        config.inputBindings &&
+        typeof config.inputBindings === 'object' &&
+        !Array.isArray(config.inputBindings)
+          ? (config.inputBindings as Record<string, ParameterBinding>)
+          : {};
+      return (
+        <Space
+          key={key}
+          direction="vertical"
+          size={12}
+          style={{ width: '100%' }}
+        >
+          <Text strong>调用参数</Text>
+          {selected.inputParameters.map((parameter) => (
+            <div key={parameter.key}>
+              <Text style={{ display: 'block', marginBottom: 6 }}>
+                {parameter.label ?? parameter.key}
+                {parameter.required ? ' *' : ''}
+              </Text>
+              <ParameterBindingEditor
+                name={parameter.label ?? parameter.key}
+                defaultPath={parameter.key}
+                value={
+                  bindings[parameter.key] ?? {
+                    source: 'WORKFLOW',
+                    path: parameter.key,
+                  }
+                }
+                onChange={(binding) =>
+                  handleConfigChange('inputBindings', {
+                    ...bindings,
+                    [parameter.key]: binding,
+                  })
+                }
+              />
+            </div>
+          ))}
+        </Space>
+      );
+    }
+
     // String with enum → Select
     if (schema.type === 'string' && schema.enum) {
       return (
@@ -627,12 +824,12 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           <Select
             value={value || undefined}
             onChange={(v) => handleConfigChange(key, v)}
-            placeholder={`选择 ${key}`}
+            placeholder={`选择 ${fieldLabel}`}
             options={schema.enum.map((e: string) => ({ label: e, value: e }))}
             style={{ width: '100%' }}
           />
@@ -650,7 +847,7 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           {useTextArea ? (
             <TextArea
@@ -679,7 +876,7 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           <InputNumber
             value={value}
@@ -705,7 +902,7 @@ export function NodePropertyPanel({
         >
           <Text type="secondary" style={{ fontSize: 13 }}>
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           <Switch
             checked={!!value}
@@ -725,7 +922,7 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           <Select
             mode="tags"
@@ -750,7 +947,7 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 4 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
           </Text>
           {items.map((item, idx) => (
             <div
@@ -820,7 +1017,7 @@ export function NodePropertyPanel({
             style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
           >
             {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-            {key}
+            {fieldLabel}
             <Text type="secondary" style={{ fontSize: 11 }}>
               {' '}
               (JSON)
@@ -852,7 +1049,7 @@ export function NodePropertyPanel({
           style={{ fontSize: 13, display: 'block', marginBottom: 2 }}
         >
           {isRequired && <span style={{ color: '#ff4d4f' }}>* </span>}
-          {key}
+          {fieldLabel}
         </Text>
         <Input
           value={
@@ -868,9 +1065,9 @@ export function NodePropertyPanel({
   return (
     <div
       style={{
-        width: 320,
-        borderLeft: '1px solid #f0f0f0',
-        background: '#fff',
+        width: usesCustomConfigEditor ? 520 : 320,
+        borderLeft: '1px solid var(--ant-color-border-secondary)',
+        background: 'var(--ant-color-bg-container)',
         display: 'flex',
         flexDirection: 'column',
         overflow: 'hidden',
@@ -880,7 +1077,7 @@ export function NodePropertyPanel({
       <div
         style={{
           padding: '16px 16px 12px',
-          borderBottom: '1px solid #f0f0f0',
+          borderBottom: '1px solid var(--ant-color-border-secondary)',
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'flex-start',
@@ -903,7 +1100,10 @@ export function NodePropertyPanel({
 
       {/* Tab Switcher */}
       <div
-        style={{ padding: '12px 16px 0', borderBottom: '1px solid #f0f0f0' }}
+        style={{
+          padding: '12px 16px 0',
+          borderBottom: '1px solid var(--ant-color-border-secondary)',
+        }}
       >
         <Segmented
           value={activeTab}
@@ -922,66 +1122,69 @@ export function NodePropertyPanel({
         {activeTab === 'config' && (
           <Space direction="vertical" size={12} style={{ width: '100%' }}>
             {/* Instance Selector / Reference Banner */}
-            {!node.instanceRef && (
-              <div
-                style={{
-                  padding: 12,
-                  background: '#fafafa',
-                  borderRadius: 6,
-                }}
-              >
-                <Text
-                  type="secondary"
-                  style={{ fontSize: 12, display: 'block', marginBottom: 6 }}
+            {currentNodeType?.instancePolicy !== 'INLINE_ONLY' &&
+              !node.instanceRef && (
+                <div
+                  style={{
+                    padding: 12,
+                    background: 'var(--ant-color-fill-quaternary)',
+                    borderRadius: 6,
+                  }}
                 >
-                  复用已有实例
-                </Text>
-                <Select
-                  value={selectedInstanceId ?? undefined}
-                  onChange={(v) => setSelectedInstanceId(v)}
-                  placeholder={
-                    instanceLoading
-                      ? '加载中...'
-                      : instances.length === 0
-                        ? '暂无可用实例'
-                        : '选择实例...'
-                  }
-                  options={instances.map((i) => ({
-                    label: i.name,
-                    value: i.id,
-                  }))}
-                  style={{ width: '100%', marginBottom: 8 }}
-                  allowClear
-                  showSearch
-                  loading={instanceLoading}
-                  disabled={instances.length === 0 && !instanceLoading}
-                  filterOption={(input, option) =>
-                    (option?.label ?? '')
-                      .toLowerCase()
-                      .includes(input.toLowerCase())
-                  }
-                />
-                {selectedInstanceId && (
-                  <Space size={8}>
-                    <Button
-                      size="small"
-                      icon={<LinkOutlined />}
-                      onClick={handleReferenceInstance}
-                    >
-                      引用（动态）
-                    </Button>
-                    <Button size="small" onClick={handleCopyAsTemplate}>
-                      复制为模板
-                    </Button>
-                  </Space>
-                )}
-              </div>
-            )}
+                  <Text
+                    type="secondary"
+                    style={{ fontSize: 12, display: 'block', marginBottom: 6 }}
+                  >
+                    复用已有实例
+                  </Text>
+                  <Select
+                    value={selectedInstanceId ?? undefined}
+                    onChange={(v) => setSelectedInstanceId(v)}
+                    placeholder={
+                      instanceLoading
+                        ? '加载中...'
+                        : instances.length === 0
+                          ? '暂无可用实例'
+                          : '选择实例...'
+                    }
+                    options={instances.map((i) => ({
+                      label: i.name,
+                      value: i.id,
+                    }))}
+                    style={{ width: '100%', marginBottom: 8 }}
+                    allowClear
+                    showSearch
+                    loading={instanceLoading}
+                    disabled={instances.length === 0 && !instanceLoading}
+                    filterOption={(input, option) =>
+                      (option?.label ?? '')
+                        .toLowerCase()
+                        .includes(input.toLowerCase())
+                    }
+                  />
+                  {selectedInstanceId && (
+                    <Space size={8}>
+                      <Button
+                        size="small"
+                        icon={<LinkOutlined />}
+                        onClick={handleReferenceInstance}
+                      >
+                        引用实例
+                      </Button>
+                      {currentNodeType?.instancePolicy === 'OPTIONAL' && (
+                        <Button size="small" onClick={handleCopyAsTemplate}>
+                          复制为模板
+                        </Button>
+                      )}
+                    </Space>
+                  )}
+                </div>
+              )}
             {node.instanceRef && (
               <div
                 style={{
                   padding: '10px 12px',
-                  background: '#e6f7ff',
+                  background: 'var(--ant-color-primary-bg)',
                   borderRadius: 6,
                   display: 'flex',
                   alignItems: 'center',
@@ -989,17 +1192,24 @@ export function NodePropertyPanel({
                 }}
               >
                 <Text style={{ fontSize: 13 }}>
-                  🔗 引用: {node.instanceRef.instanceName}
+                  🔗 引用实例: {node.instanceRef.instanceCode}
                 </Text>
-                <Button
-                  size="small"
-                  icon={<DisconnectOutlined />}
-                  onClick={handleDetachReference}
-                >
-                  解除引用
-                </Button>
+                {currentNodeType?.instancePolicy === 'OPTIONAL' && (
+                  <Button
+                    size="small"
+                    icon={<DisconnectOutlined />}
+                    onClick={handleDetachReference}
+                  >
+                    解除引用
+                  </Button>
+                )}
               </div>
             )}
+            {node.instanceRef && (
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                修改只会保存在当前 Workflow，不会修改 Node Template。
+              </Text>
+            )}
 
             {/* Label */}
             <div>
@@ -1007,7 +1217,7 @@ export function NodePropertyPanel({
                 strong
                 style={{ fontSize: 14, display: 'block', marginBottom: 4 }}
               >
-                Label
+                {t('editor.label')}
               </Text>
               <Input
                 value={label}
@@ -1022,43 +1232,22 @@ export function NodePropertyPanel({
                   strong
                   style={{ fontSize: 14, display: 'block', marginBottom: 8 }}
                 >
-                  Config
+                  {t('editor.config')}
                 </Text>
-                {node.instanceRef ? (
-                  <Space
-                    direction="vertical"
-                    size={8}
-                    style={{ width: '100%' }}
+                {usesCustomConfigEditor ? (
+                  <Form
+                    form={configForm}
+                    layout="vertical"
+                    onValuesChange={(_, values) => {
+                      setConfig(values.config ?? {});
+                      setDirty(true);
+                    }}
                   >
-                    {(() => {
-                      const inst = instances.find(
-                        (i) => i.id === node.instanceRef?.instanceId,
-                      );
-                      const refConfig = inst?.config ?? {};
-                      return Object.entries(properties).map(([key]) => (
-                        <div key={key}>
-                          <Text
-                            type="secondary"
-                            style={{
-                              fontSize: 13,
-                              display: 'block',
-                              marginBottom: 2,
-                            }}
-                          >
-                            {key}
-                          </Text>
-                          <Text style={{ fontSize: 13, color: '#595959' }}>
-                            {refConfig[key] !== undefined &&
-                            refConfig[key] !== ''
-                              ? typeof refConfig[key] === 'object'
-                                ? JSON.stringify(refConfig[key])
-                                : String(refConfig[key])
-                              : '—'}
-                          </Text>
-                        </div>
-                      ));
-                    })()}
-                  </Space>
+                    <SchemaForm
+                      schema={currentNodeType?.configSchema ?? null}
+                      uiSchema={effectiveUiSchema ?? null}
+                    />
+                  </Form>
                 ) : (
                   <Space
                     direction="vertical"
@@ -1074,46 +1263,53 @@ export function NodePropertyPanel({
             )}
 
             {/* Save section */}
-            {!node.instanceRef && (
-              <div>
-                <Checkbox
-                  checked={alsoSaveAsInstance}
-                  onChange={(e) => setAlsoSaveAsInstance(e.target.checked)}
-                  style={{ marginBottom: 8 }}
-                >
-                  <Text style={{ fontSize: 13 }}>同时保存为实例(模版)</Text>
-                </Checkbox>
-                {alsoSaveAsInstance && (
-                  <Space
-                    direction="vertical"
-                    size={6}
-                    style={{ width: '100%', marginBottom: 8 }}
-                  >
-                    <Input
-                      value={newInstanceName}
-                      onChange={(e) => setNewInstanceName(e.target.value)}
-                      placeholder="实例名称（必填）"
-                      size="small"
-                    />
-                    <Input
-                      value={newInstanceDesc}
-                      onChange={(e) => setNewInstanceDesc(e.target.value)}
-                      placeholder="描述（可选）"
-                      size="small"
-                    />
-                  </Space>
+            <div>
+              {!node.instanceRef &&
+                currentNodeType?.instancePolicy !== 'REQUIRED' && (
+                  <>
+                    <Checkbox
+                      checked={alsoSaveAsInstance}
+                      onChange={(e) => setAlsoSaveAsInstance(e.target.checked)}
+                      style={{ marginBottom: 8 }}
+                    >
+                      <Text style={{ fontSize: 13 }}>同时保存为实例(模版)</Text>
+                    </Checkbox>
+                    {alsoSaveAsInstance && (
+                      <Space
+                        direction="vertical"
+                        size={6}
+                        style={{ width: '100%', marginBottom: 8 }}
+                      >
+                        <Input
+                          value={newInstanceName}
+                          onChange={(e) => setNewInstanceName(e.target.value)}
+                          placeholder="实例名称（必填）"
+                          size="small"
+                        />
+                        <Input
+                          value={newInstanceDesc}
+                          onChange={(e) => setNewInstanceDesc(e.target.value)}
+                          placeholder="描述（可选）"
+                          size="small"
+                        />
+                      </Space>
+                    )}
+                  </>
                 )}
-                <Button
-                  type="primary"
-                  block
-                  loading={saveAsLoading}
-                  disabled={alsoSaveAsInstance && !newInstanceName.trim()}
-                  onClick={handleSave}
-                >
-                  保存修改
-                </Button>
-              </div>
-            )}
+              <Button
+                type="primary"
+                block
+                loading={saveAsLoading}
+                disabled={
+                  !node.instanceRef &&
+                  alsoSaveAsInstance &&
+                  !newInstanceName.trim()
+                }
+                onClick={handleSave}
+              >
+                {t('editor.saveChanges')}
+              </Button>
+            </div>
           </Space>
         )}