@gadmin2n/schematics 0.0.85 → 0.0.87

package/dist/lib/application/application.factory.js

@@ -74,11 +74,6 @@ function generateProject(options, path) {
 }
 function generateServer(options, path) {
     const framework = options['server-framework'];
-    if (framework === 'iris') {
-        return (0, schematics_1.apply)((0, schematics_1.url)((0, core_1.join)('./files/customize/server', framework)), [
-            (0, schematics_1.move)((0, core_1.join)(path, 'server')),
-        ]);
-    }
     return (0, schematics_1.apply)((0, schematics_1.url)((0, core_1.join)('./files/customize/server', framework)), [
         (0, schematics_1.template)(Object.assign(Object.assign({}, core_1.strings), options)),
         (0, schematics_1.move)((0, core_1.join)(path, 'server')),

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/agenda/index.tsx

@@ -102,16 +102,20 @@ function RunDot({
   count,
   color,
   label,
+  onClick,
 }: {
   count: number;
   color: string;
   label: string;
+  onClick?: () => void;
 }) {
   const size = 28;
   const hasCount = count > 0;
+  const clickable = hasCount && !!onClick;
   return (
     <Tooltip title={`${label}: ${count}`}>
       <span
+        onClick={clickable ? onClick : undefined}
         style={{
           display: 'inline-flex',
           alignItems: 'center',
@@ -124,7 +128,7 @@ function RunDot({
           fontSize: 11,
           fontWeight: 600,
           color: hasCount ? color : '#d9d9d9',
-          cursor: 'default',
+          cursor: clickable ? 'pointer' : 'default',
           lineHeight: 1,
         }}
       >
@@ -339,14 +343,38 @@ export default function AgendaJobsPage() {
       title: 'Runs',
       key: 'runs',
       width: 170,
-      render: (_: any, record: JobItem) => (
-        <Space size={6}>
-          <RunDot count={record.runs.queued} color="#faad14" label="Queued" />
-          <RunDot count={record.runs.success} color="#006d32" label="Success" />
-          <RunDot count={record.runs.running} color="#52c41a" label="Running" />
-          <RunDot count={record.runs.failed} color="#ff4d4f" label="Failed" />
-        </Space>
-      ),
+      render: (_: any, record: JobItem) => {
+        const go = (status: string) =>
+          navigate(`show/${encodeURIComponent(record.name)}?status=${status}`);
+        return (
+          <Space size={6}>
+            <RunDot
+              count={record.runs.queued}
+              color="#faad14"
+              label="Queued"
+              onClick={() => go('queued')}
+            />
+            <RunDot
+              count={record.runs.success}
+              color="#006d32"
+              label="Success"
+              onClick={() => go('success')}
+            />
+            <RunDot
+              count={record.runs.running}
+              color="#52c41a"
+              label="Running"
+              onClick={() => go('running')}
+            />
+            <RunDot
+              count={record.runs.failed}
+              color="#ff4d4f"
+              label="Failed"
+              onClick={() => go('failed')}
+            />
+          </Space>
+        );
+      },
     },
     {
       title: 'Schedule',
@@ -451,7 +479,7 @@ export default function AgendaJobsPage() {
                 icon={<DatabaseOutlined />}
                 onClick={() => navigate('/admin/data-mngt/agenda-job')}
               >
-                AgendaJob 表
+                任务原始表
               </Button>
             </Tooltip>
             <Button

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

@@ -22,7 +22,7 @@ import {
   DeleteOutlined,
   PlayCircleOutlined,
 } from '@ant-design/icons';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
 import { useECharts } from 'hooks/useECharts';
 import dayjs from 'dayjs';
@@ -216,6 +216,8 @@ export default function AgendaJobShow() {
   const { jobName: rawJobName } = useParams<{ jobName: string }>();
   const jobName = decodeURIComponent(rawJobName || '');
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const initialStatus = searchParams.get('status') || undefined;
 
   const [detail, setDetail] = useState<JobDetail | null>(null);
   const [loading, setLoading] = useState(true);
@@ -231,7 +233,9 @@ export default function AgendaJobShow() {
   // Chart filters
   const [filterBefore, setFilterBefore] = useState<dayjs.Dayjs | null>(dayjs());
   const [filterLimit, setFilterLimit] = useState(25);
-  const [filterStatus, setFilterStatus] = useState<string | undefined>();
+  const [filterStatus, setFilterStatus] = useState<string | undefined>(
+    initialStatus,
+  );
 
   // Fetch job detail
   const fetchDetail = useCallback(async () => {
@@ -327,9 +331,10 @@ export default function AgendaJobShow() {
   if (!detail) {
     return (
       <div style={{ padding: 24 }}>
-        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate(-1)}>
-          返回
-        </Button>
+        <Button
+          icon={<ArrowLeftOutlined />}
+          onClick={() => navigate(-1)}
+        ></Button>
         <div style={{ marginTop: 24, textAlign: 'center', color: '#999' }}>
           Job 不存在
         </div>

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

@@ -0,0 +1,205 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { Alert, Input, message } from 'antd';
+import type { WorkflowDSL } from '../types';
+
+const { TextArea } = Input;
+
+const EMPTY_TEMPLATE = '{\n  "nodes": [],\n  "edges": []\n}';
+
+interface DslViewProps {
+  dsl: WorkflowDSL | null;
+  readonly?: boolean;
+  onApply?: (newDsl: WorkflowDSL) => void;
+  onDirtyChange?: (dirty: boolean) => void;
+}
+
+export interface DslViewHandle {
+  apply: () => void;
+  copy: () => Promise<void>;
+}
+
+function stringifyDsl(dsl: WorkflowDSL | null): string {
+  if (!dsl) return EMPTY_TEMPLATE;
+  return JSON.stringify(dsl, null, 2);
+}
+
+/** 形状级校验：只检查必需字段，深层字段（position/config 等）由画布或保存时暴露 */
+function validateDsl(
+  parsed: any,
+): { ok: true; dsl: WorkflowDSL } | { ok: false; error: string } {
+  if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return { ok: false, error: '根必须是对象 { nodes, edges }' };
+  }
+  if (!Array.isArray(parsed.nodes)) {
+    return { ok: false, error: '字段 nodes 必须是数组' };
+  }
+  if (!Array.isArray(parsed.edges)) {
+    return { ok: false, error: '字段 edges 必须是数组' };
+  }
+  for (let i = 0; i < parsed.nodes.length; i++) {
+    const n = parsed.nodes[i];
+    if (!n || typeof n !== 'object') {
+      return { ok: false, error: `节点 [${i}] 必须是对象` };
+    }
+    if (typeof n.id !== 'string' || !n.id) {
+      return { ok: false, error: `节点 [${i}] 缺少必需字段：id` };
+    }
+    if (typeof n.type !== 'string' || !n.type) {
+      return { ok: false, error: `节点 [${i}] 缺少必需字段：type` };
+    }
+  }
+  for (let i = 0; i < parsed.edges.length; i++) {
+    const e = parsed.edges[i];
+    if (!e || typeof e !== 'object') {
+      return { ok: false, error: `连线 [${i}] 必须是对象` };
+    }
+    if (typeof e.id !== 'string' || !e.id) {
+      return { ok: false, error: `连线 [${i}] 缺少必需字段：id` };
+    }
+    if (typeof e.source !== 'string' || !e.source) {
+      return { ok: false, error: `连线 [${i}] 缺少必需字段：source` };
+    }
+    if (typeof e.target !== 'string' || !e.target) {
+      return { ok: false, error: `连线 [${i}] 缺少必需字段：target` };
+    }
+  }
+  return { ok: true, dsl: parsed as WorkflowDSL };
+}
+
+async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // fallthrough
+  }
+  // Fallback for non-secure context
+  try {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+export const DslView = forwardRef<DslViewHandle, DslViewProps>(function DslView(
+  { dsl, readonly = false, onApply, onDirtyChange },
+  ref,
+) {
+  const initial = useMemo(() => stringifyDsl(dsl), [dsl]);
+  const [text, setText] = useState(initial);
+  const [error, setError] = useState<string | null>(null);
+
+  // dsl prop 变化时重置 text（应用、版本切换、AI 生成等场景）
+  useEffect(() => {
+    setText(initial);
+    setError(null);
+    onDirtyChange?.(false);
+    // onDirtyChange 故意不放进依赖数组：调用方传不稳定函数会导致死循环
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initial]);
+
+  function handleTextChange(next: string) {
+    setText(next);
+    if (error) setError(null);
+    if (!readonly) {
+      const dirty = next !== initial;
+      onDirtyChange?.(dirty);
+    }
+  }
+
+  function handleApply() {
+    let parsed: any;
+    try {
+      parsed = JSON.parse(text);
+    } catch (e: any) {
+      setError(`JSON 解析失败：${e?.message ?? String(e)}`);
+      return;
+    }
+    const result = validateDsl(parsed);
+    if (!result.ok) {
+      setError(result.error);
+      return;
+    }
+    const normalized = JSON.stringify(result.dsl, null, 2);
+    setText(normalized);
+    setError(null);
+    onApply?.(result.dsl);
+    onDirtyChange?.(false);
+    message.success('已应用到画布');
+  }
+
+  async function handleCopy() {
+    const ok = await copyToClipboard(text);
+    if (ok) {
+      message.success('已复制到剪贴板');
+    } else {
+      message.error('复制失败，请手动选择文本复制');
+    }
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      apply: handleApply,
+      copy: handleCopy,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [text, onApply, onDirtyChange],
+  );
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        background: '#fff',
+        padding: 16,
+      }}
+    >
+      {error && (
+        <Alert
+          type="error"
+          message={error}
+          showIcon
+          closable
+          onClose={() => setError(null)}
+          style={{ marginBottom: 8, flexShrink: 0 }}
+        />
+      )}
+
+      <TextArea
+        value={text}
+        onChange={(e) => handleTextChange(e.target.value)}
+        readOnly={readonly}
+        spellCheck={false}
+        autoSize={false}
+        style={{
+          flex: 1,
+          fontFamily:
+            'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          fontSize: 13,
+          lineHeight: 1.5,
+          resize: 'none',
+        }}
+      />
+    </div>
+  );
+});

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

@@ -11,6 +11,7 @@ import {
   Input,
   message,
   Modal,
+  Segmented,
   Select,
   Space,
   Spin,
@@ -19,6 +20,7 @@ import {
 } from 'antd';
 import {
   ArrowLeftOutlined,
+  CheckOutlined,
   EditOutlined,
   RobotOutlined,
   RocketOutlined,
@@ -28,6 +30,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
 import { FlowRenderer } from './components/FlowRenderer';
 import { NodePropertyPanel } from './components/NodePropertyPanel';
+import { DslView, type DslViewHandle } from './components/DslView';
 import { useWorkflowAgent } from './hooks/useWorkflowAgent';
 import type {
   Workflow,
@@ -59,6 +62,9 @@ export default function WorkflowEditorPage() {
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'canvas' | 'dsl'>('canvas');
+  const [dslDirty, setDslDirty] = useState(false);
+  const dslViewRef = useRef<DslViewHandle>(null);
 
   // Title editing state
   const [title, setTitle] = useState(isNewMode ? 'Untitled Workflow' : '');
@@ -334,10 +340,12 @@ export default function WorkflowEditorPage() {
   async function handleSelectVersion(version: number) {
     if (!id) return;
 
-    if (hasUnsavedChanges) {
+    if (hasUnsavedChanges || (viewMode === 'dsl' && dslDirty)) {
       Modal.confirm({
-        title: '未保存的修改',
-        content: '当前有未保存的修改，切换版本将丢失这些更改。确定要继续吗？',
+        title: hasUnsavedChanges ? '未保存的修改' : 'DSL 有未应用的编辑',
+        content: hasUnsavedChanges
+          ? '当前有未保存的修改，切换版本将丢失这些更改。确定要继续吗？'
+          : 'DSL 视图中有未应用到画布的编辑，切换版本将丢弃这些内容。确定要继续吗？',
         okText: '确定切换',
         cancelText: '取消',
         onOk: () => doLoadVersion(version),
@@ -369,6 +377,30 @@ export default function WorkflowEditorPage() {
     setSelectedNodeId(nodeId || null);
   }
 
+  function handleViewModeChange(next: 'canvas' | 'dsl') {
+    if (next === 'canvas' && dslDirty) {
+      Modal.confirm({
+        title: '未应用的修改',
+        content:
+          'DSL 视图中有未应用到画布的修改，切换到 Canvas 将丢弃这些修改。确定要继续吗？',
+        okText: '确定切换',
+        cancelText: '取消',
+        onOk: () => {
+          setDslDirty(false);
+          setViewMode('canvas');
+        },
+      });
+      return;
+    }
+    setViewMode(next);
+  }
+
+  function handleDslApply(newDsl: WorkflowDSL) {
+    setDsl(newDsl);
+    setHasUnsavedChanges(true);
+    setSelectedNodeId(null);
+  }
+
   if (loading) {
     return (
       <div
@@ -408,9 +440,7 @@ export default function WorkflowEditorPage() {
               type="text"
               icon={<ArrowLeftOutlined />}
               onClick={() => navigate('/admin/workflow')}
-            >
-              Back
-            </Button>
+            ></Button>
             {editingTitle ? (
               <Input
                 ref={titleInputRef}
@@ -448,7 +478,7 @@ export default function WorkflowEditorPage() {
                 }))}
               />
             )}
-            {isDev && (
+            {isDev && viewMode === 'canvas' && (
               <Button
                 type="primary"
                 icon={<RobotOutlined />}
@@ -470,30 +500,73 @@ export default function WorkflowEditorPage() {
         </div>
       </Card>
 
+      {/* View toggle row + DSL actions */}
+      <div
+        style={{
+          marginBottom: 12,
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Segmented
+          value={viewMode}
+          onChange={(v) => handleViewModeChange(v as 'canvas' | 'dsl')}
+          options={[
+            { label: 'Canvas', value: 'canvas' },
+            { label: 'DSL', value: 'dsl' },
+          ]}
+        />
+        {viewMode === 'dsl' && (
+          <Space>
+            {dslDirty && <Tag color="orange">未应用</Tag>}
+            <Button
+              type="primary"
+              icon={<CheckOutlined />}
+              onClick={() => dslViewRef.current?.apply()}
+            >
+              应用到画布
+            </Button>
+          </Space>
+        )}
+      </div>
+
       {/* Main area: Flow + Property Panel */}
       <div
         style={{ flex: 1, display: 'flex', overflow: 'hidden', minHeight: 0 }}
       >
-        <div style={{ flex: 1, position: 'relative' }}>
-          <FlowRenderer
+        {viewMode === 'canvas' ? (
+          <>
+            <div style={{ flex: 1, position: 'relative' }}>
+              <FlowRenderer
+                dsl={dsl}
+                nodeTypeMap={nodeTypeMap}
+                selectedNodeId={selectedNodeId}
+                onNodeClick={handleNodeClick}
+                onDslChange={handleDslChange}
+              />
+            </div>
+            <NodePropertyPanel
+              node={selectedNode}
+              nodeTypes={nodeTypes}
+              currentWorkflowId={id}
+              onSave={handleNodePropertySave}
+              onLabelChange={handleNodeLabelChange}
+              onAiEdit={handleNodeAiEdit}
+              onDelete={handleNodeDelete}
+              onAbort={abortAgent}
+              aiLoading={agentLoading}
+            />
+          </>
+        ) : (
+          <DslView
+            ref={dslViewRef}
             dsl={dsl}
-            nodeTypeMap={nodeTypeMap}
-            selectedNodeId={selectedNodeId}
-            onNodeClick={handleNodeClick}
-            onDslChange={handleDslChange}
+            onApply={handleDslApply}
+            onDirtyChange={setDslDirty}
           />
-        </div>
-        <NodePropertyPanel
-          node={selectedNode}
-          nodeTypes={nodeTypes}
-          currentWorkflowId={id}
-          onSave={handleNodePropertySave}
-          onLabelChange={handleNodeLabelChange}
-          onAiEdit={handleNodeAiEdit}
-          onDelete={handleNodeDelete}
-          onAbort={abortAgent}
-          aiLoading={agentLoading}
-        />
+        )}
       </div>
 
       {/* Name modal for untitled workflows */}

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

@@ -420,7 +420,7 @@ export default function WorkflowListPage() {
                   navigate('/admin/data-mngt/workflow-event-outbox')
                 }
               >
-                EventOutbox 表
+                PG表事件队列
               </Button>
             </Tooltip>
             <Button

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

@@ -234,9 +234,7 @@ export default function WorkflowInstanceDetailPage() {
               type="text"
               icon={<ArrowLeftOutlined />}
               onClick={() => navigate(-1)}
-            >
-              Back
-            </Button>
+            ></Button>
             <Title level={4} style={{ margin: 0 }}>
               {data.workflow.name} — Instance #{data.id}
             </Title>

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

@@ -197,9 +197,7 @@ export default function WorkflowInstancesPage() {
               type="text"
               icon={<ArrowLeftOutlined />}
               onClick={() => navigate('/admin/workflow')}
-            >
-              Back
-            </Button>
+            ></Button>
             <Title level={4} style={{ margin: 0 }}>
               {workflowName || 'Workflow'} — Execution History
             </Title>

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

@@ -93,9 +93,11 @@ export function NodeInstanceForm({
           }}
         >
           <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <Button type="text" icon={<ArrowLeftOutlined />} onClick={onBack}>
-              返回
-            </Button>
+            <Button
+              type="text"
+              icon={<ArrowLeftOutlined />}
+              onClick={onBack}
+            ></Button>
             <Title level={4} style={{ margin: 0 }}>
               {title}
             </Title>

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

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Button,
   Card,
@@ -6,6 +12,7 @@ import {
   Input,
   message,
   Modal,
+  Segmented,
   Select,
   Space,
   Spin,
@@ -14,6 +21,7 @@ import {
 } from 'antd';
 import {
   ArrowLeftOutlined,
+  CopyOutlined,
   DiffOutlined,
   EditOutlined,
   HistoryOutlined,
@@ -24,6 +32,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
 import { customRequest } from 'helpers/http';
 import { FlowRenderer } from './components/FlowRenderer';
+import { DslView, type DslViewHandle } from './components/DslView';
 import { RunWorkflowModal } from './components/RunWorkflowModal';
 import type {
   Workflow,
@@ -52,6 +61,8 @@ export default function WorkflowShowPage() {
 
   const [dsl, setDsl] = useState<WorkflowDSL | null>(null);
   const [currentVersion, setCurrentVersion] = useState<number | null>(null);
+  const [viewMode, setViewMode] = useState<'canvas' | 'dsl'>('canvas');
+  const dslViewRef = useRef<DslViewHandle>(null);
 
   // Publish modal state
   const [publishModalOpen, setPublishModalOpen] = useState(false);
@@ -260,9 +271,7 @@ ${diffRightDsl}
               type="text"
               icon={<ArrowLeftOutlined />}
               onClick={() => navigate('/admin/workflow')}
-            >
-              Back
-            </Button>
+            ></Button>
             <Title level={4} style={{ margin: 0 }}>
               {workflow?.name || 'Workflow'}
             </Title>
@@ -324,69 +333,105 @@ ${diffRightDsl}
         </div>
       </Card>
 
+      {/* View toggle row + DSL actions */}
+      <div
+        style={{
+          marginBottom: 12,
+          flexShrink: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Segmented
+          value={viewMode}
+          onChange={(v) => setViewMode(v as 'canvas' | 'dsl')}
+          options={[
+            { label: 'Canvas', value: 'canvas' },
+            { label: 'DSL', value: 'dsl' },
+          ]}
+        />
+        {viewMode === 'dsl' && (
+          <Button
+            icon={<CopyOutlined />}
+            onClick={() => dslViewRef.current?.copy()}
+          >
+            Copy
+          </Button>
+        )}
+      </div>
+
       {/* Canvas + Node Detail Panel */}
       <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
-        <div style={{ flex: 1, position: 'relative' }}>
-          <FlowRenderer
-            dsl={dsl}
-            nodeTypeMap={nodeTypeMap}
-            selectedNodeId={selectedNodeId}
-            readonly
-            onNodeClick={(nodeId) => setSelectedNodeId(nodeId || null)}
-          />
-        </div>
-        {selectedNode && (
-          <div
-            style={{
-              width: 320,
-              flexShrink: 0,
-              borderLeft: '1px solid #f0f0f0',
-              background: '#fff',
-              overflowY: 'auto',
-              padding: 16,
-            }}
-          >
-            <Title level={5} style={{ marginTop: 0 }}>
-              {selectedNode.label}
-            </Title>
-            <Descriptions column={1} size="small" bordered>
-              <Descriptions.Item label="ID">
-                <Typography.Text copyable style={{ fontSize: 12 }}>
-                  {selectedNode.id}
-                </Typography.Text>
-              </Descriptions.Item>
-              <Descriptions.Item label="类型">
-                {selectedNode.type}
-              </Descriptions.Item>
-              <Descriptions.Item label="分类">
-                <Tag>
-                  {nodeTypeMap[selectedNode.type]?.category || 'ACTION'}
-                </Tag>
-              </Descriptions.Item>
-              {selectedNode.instanceRef && (
-                <Descriptions.Item label="节点实例">
-                  {selectedNode.instanceRef.instanceName}
-                </Descriptions.Item>
-              )}
-            </Descriptions>
-            {selectedNode.config &&
-              Object.keys(selectedNode.config).length > 0 && (
-                <>
-                  <Title level={5} style={{ marginTop: 16 }}>
-                    配置
-                  </Title>
-                  <Descriptions column={1} size="small" bordered>
-                    {Object.entries(selectedNode.config).map(([key, value]) => (
-                      <Descriptions.Item key={key} label={key}>
-                        {typeof value === 'object'
-                          ? JSON.stringify(value, null, 2)
-                          : String(value ?? '')}
-                      </Descriptions.Item>
-                    ))}
-                  </Descriptions>
-                </>
-              )}
-          </div>
+        {viewMode === 'canvas' ? (
+          <>
+            <div style={{ flex: 1, position: 'relative' }}>
+              <FlowRenderer
+                dsl={dsl}
+                nodeTypeMap={nodeTypeMap}
+                selectedNodeId={selectedNodeId}
+                readonly
+                onNodeClick={(nodeId) => setSelectedNodeId(nodeId || null)}
+              />
+            </div>
+            {selectedNode && (
+              <div
+                style={{
+                  width: 320,
+                  flexShrink: 0,
+                  borderLeft: '1px solid #f0f0f0',
+                  background: '#fff',
+                  overflowY: 'auto',
+                  padding: 16,
+                }}
+              >
+                <Title level={5} style={{ marginTop: 0 }}>
+                  {selectedNode.label}
+                </Title>
+                <Descriptions column={1} size="small" bordered>
+                  <Descriptions.Item label="ID">
+                    <Typography.Text copyable style={{ fontSize: 12 }}>
+                      {selectedNode.id}
+                    </Typography.Text>
+                  </Descriptions.Item>
+                  <Descriptions.Item label="类型">
+                    {selectedNode.type}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="分类">
+                    <Tag>
+                      {nodeTypeMap[selectedNode.type]?.category || 'ACTION'}
+                    </Tag>
+                  </Descriptions.Item>
+                  {selectedNode.instanceRef && (
+                    <Descriptions.Item label="节点实例">
+                      {selectedNode.instanceRef.instanceName}
+                    </Descriptions.Item>
+                  )}
+                </Descriptions>
+                {selectedNode.config &&
+                  Object.keys(selectedNode.config).length > 0 && (
+                    <>
+                      <Title level={5} style={{ marginTop: 16 }}>
+                        配置
+                      </Title>
+                      <Descriptions column={1} size="small" bordered>
+                        {Object.entries(selectedNode.config).map(
+                          ([key, value]) => (
+                            <Descriptions.Item key={key} label={key}>
+                              {typeof value === 'object'
+                                ? JSON.stringify(value, null, 2)
+                                : String(value ?? '')}
+                            </Descriptions.Item>
+                          ),
+                        )}
+                      </Descriptions>
+                    </>
+                  )}
+              </div>
+            )}
+          </>
+        ) : (
+          <DslView ref={dslViewRef} dsl={dsl} readonly />
         )}
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadmin2n/schematics",
-  "version": "0.0.85",
+  "version": "0.0.87",
   "description": "Gadmin - modern, fast, powerful node.js web framework (@schematics)",
   "main": "dist/index.js",
   "files": [