@gadmin2n/schematics 0.0.95 → 0.0.97

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/utils/tableCodeUtils.ts

@@ -0,0 +1,338 @@
+/**
+ * Canvas Table 代码字符串解析 / 改写工具。
+ *
+ * 这些函数全部以 JSX 字符串为输入输出，不操作 React 组件实例。
+ * 由 TableConfigModal 与 canvasContextMenuRegistry 中的 tableActions 共用。
+ */
+
+export interface ColumnMeta {
+  title: string;
+  dataIndex: string;
+}
+
+export type SortFilterFlag = true | false | string[];
+
+/**
+ * 在 JSX 对象字面量片段中读取一个字符串属性的值，支持双引号 / 单引号字面量
+ * 与 \" \\ \n 等转义序列。无法解析时返回 null。
+ */
+function readStringProp(obj: string, propName: string): string | null {
+  // 双引号字面量：(?:[^"\\]|\\.)* 表示除 " 和 \ 外的字符 或 反斜杠+任意单字符
+  const dq = obj.match(
+    new RegExp(`${propName}\\s*:\\s*("(?:[^"\\\\]|\\\\.)*")`),
+  );
+  if (dq) {
+    try {
+      return JSON.parse(dq[1]);
+    } catch {
+      return null;
+    }
+  }
+  const sq = obj.match(
+    new RegExp(`${propName}\\s*:\\s*'((?:[^'\\\\]|\\\\.)*)'`),
+  );
+  if (sq) {
+    // 把单引号字面量转成 JSON 双引号字面量（替换未转义的双引号、保留已转义序列）
+    const inner = sq[1].replace(/(^|[^\\])"/g, '$1\\"');
+    try {
+      return JSON.parse(`"${inner}"`);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+/**
+ * 从 Table 组件的 JSX 字符串中解析 columns 数组里每列的 title/dataIndex。
+ *
+ * 解析失败（columns 含复杂 render 函数、JSON 不规范等）时返回 null。
+ * 调用方据此显示 Alert + 禁用确认。
+ */
+export function parseTableColumnsMeta(code: string): ColumnMeta[] | null {
+  const match = code.match(/columns\s*=\s*\{(\[[\s\S]*?\])\}/);
+  if (!match) return null;
+  const arrayLiteral = match[1];
+
+  // 用 regex 提取每个 { ... } 对象内的 title 和 dataIndex 字符串字面量。
+  // 这种方法对含 render: (v) => ... 的列也容错（直接忽略 render）。
+  const objects = arrayLiteral.match(/\{[^{}]*\}/g);
+  if (!objects || objects.length === 0) return null;
+
+  const result: ColumnMeta[] = [];
+  for (const obj of objects) {
+    const title = readStringProp(obj, 'title');
+    const dataIndex = readStringProp(obj, 'dataIndex');
+    if (title != null && dataIndex != null) {
+      result.push({ title, dataIndex });
+    }
+  }
+  return result.length > 0 ? result : null;
+}
+
+/**
+ * 从 code 字符串中读取 sortable / filterable prop 当前状态。
+ *
+ * 返回：
+ *   - true：未设置或显式 {true}（默认全开）
+ *   - false：显式 {false}
+ *   - string[]：显式数组形式 {[...]}
+ */
+export function readTableFlag(
+  code: string,
+  propName: 'sortable' | 'filterable',
+): SortFilterFlag {
+  if (new RegExp(`\\b${propName}\\s*=\\s*\\{false\\}`).test(code)) return false;
+  const arrayMatch = code.match(
+    new RegExp(`\\b${propName}\\s*=\\s*\\{(\\[[^\\]]*\\])\\}`),
+  );
+  if (arrayMatch) {
+    try {
+      const parsed = JSON.parse(arrayMatch[1].replace(/'/g, '"'));
+      if (Array.isArray(parsed)) return parsed as string[];
+    } catch {
+      // 解析失败回退为 true
+    }
+  }
+  return true;
+}
+
+/**
+ * 把 sortable / filterable prop 写回 code 字符串。
+ *
+ * - flag === true：删除 prop（恢复默认）
+ * - flag === false：替换/插入 `propName={false}`
+ * - flag === string[]：替换/插入 `propName={["a","b"]}`
+ *
+ * 注入位置：testId= 那行之前；找不到 testId 则回退到 /> 之前。
+ */
+export function writeTableFlag(
+  code: string,
+  propName: 'sortable' | 'filterable',
+  flag: SortFilterFlag,
+): string {
+  // 先删除现有 prop（无论什么形式）
+  let next = code.replace(
+    new RegExp(`\\s*\\b${propName}\\s*=\\s*\\{(true|false|\\[[^\\]]*\\])\\}`),
+    '',
+  );
+
+  if (flag === true) return next;
+
+  const value = flag === false ? '{false}' : `{${JSON.stringify(flag)}}`;
+  const inject = `${propName}=${value}`;
+
+  if (/testId\s*=/.test(next)) {
+    next = next.replace(/([ \t]*)(testId\s*=)/, `$1${inject}\n$1$2`);
+  } else {
+    next = next.replace(/\/>/, `  ${inject}\n/>`);
+  }
+  return next;
+}
+
+// ─── MultiChart-as-table 列配置 helpers ────────────────────────────────
+
+/** 在 s 中从 start 位置（指向 open）开始，找出与之匹配的 close 字符的位置；不平衡返回 -1。 */
+function findBalancedClose(
+  s: string,
+  start: number,
+  open: string,
+  close: string,
+): number {
+  let depth = 0;
+  for (let i = start; i < s.length; i++) {
+    if (s[i] === open) depth++;
+    else if (s[i] === close) {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * 定位 chartConfig={...} 的 span。
+ *  - start：'chartConfig' 文字开始位置
+ *  - end：JSX 闭合 '}' 之后的位置（半开区间）
+ *  - jsonStr：JSX 大括号里面的内容（trim 后），通常是一个 JSON 对象字面量
+ *
+ * 找不到返回 null。
+ */
+function findChartConfigSpan(
+  code: string,
+): { start: number; end: number; jsonStr: string } | null {
+  const m = code.match(/chartConfig\s*=\s*\{/);
+  if (!m || m.index == null) return null;
+  const propStart = m.index;
+  const jsxOpen = propStart + m[0].length - 1;
+  const jsxClose = findBalancedClose(code, jsxOpen, '{', '}');
+  if (jsxClose === -1) return null;
+  const jsonStr = code.slice(jsxOpen + 1, jsxClose).trim();
+  return { start: propStart, end: jsxClose + 1, jsonStr };
+}
+
+/**
+ * 从 MultiChart code 字符串中解析 data prop，推导出 antd Table columns 元数据。
+ * 与 MultiChart 内部 toTableData(data) 保持一致：
+ *   - 第一列 "分类" / dataIndex "__x"
+ *   - 后续列对应 data.series 各项的 name
+ *
+ * 解析失败返回 null（调用方据此显示 Alert + 禁用确认）。
+ *
+ * 内部用平衡大括号匹配定位 data={{...}}，避免 lazy 正则因 series 中嵌套 [...] 而截断。
+ */
+export function parseMultiChartTableColumns(code: string): ColumnMeta[] | null {
+  const m = code.match(/data\s*=\s*\{/);
+  if (!m || m.index == null) return null;
+  const jsxOpen = m.index + m[0].length - 1;
+  const jsxClose = findBalancedClose(code, jsxOpen, '{', '}');
+  if (jsxClose === -1) return null;
+  const expr = code.slice(jsxOpen + 1, jsxClose);
+
+  // 仅在 series: [...] 范围内抽 name 字段，避免 tooltip.name / itemStyle.name 等污染
+  const seriesIdx = expr.search(/series\s*:\s*\[/);
+  if (seriesIdx === -1) return null;
+  const arrOpen = expr.indexOf('[', seriesIdx);
+  if (arrOpen === -1) return null;
+  const arrClose = findBalancedClose(expr, arrOpen, '[', ']');
+  if (arrClose === -1) return null;
+  const seriesBody = expr.slice(arrOpen + 1, arrClose);
+
+  const nameMatches = Array.from(
+    seriesBody.matchAll(/name\s*:\s*['"]([^'"]+)['"]/g),
+  );
+  const seriesNames = nameMatches.map((mm) => mm[1]);
+  if (seriesNames.length === 0) return null;
+
+  return [
+    { title: '分类', dataIndex: '__x' },
+    ...seriesNames.map((name) => ({ title: name, dataIndex: name })),
+  ];
+}
+
+/**
+ * 从 MultiChart code 中读取 chartConfig.table.sortable / .filterable。
+ * 三态语义同 readTableFlag。缺省返回 { sortable: true, filterable: true }。
+ */
+export function readMultiChartTableFlags(code: string): {
+  sortable: SortFilterFlag;
+  filterable: SortFilterFlag;
+} {
+  const span = findChartConfigSpan(code);
+  if (!span) return { sortable: true, filterable: true };
+
+  let cfg: Record<string, Record<string, unknown>>;
+  try {
+    cfg = JSON.parse(span.jsonStr);
+  } catch {
+    return { sortable: true, filterable: true };
+  }
+
+  const tableCfg = cfg.table ?? {};
+  const readFlag = (v: unknown): SortFilterFlag => {
+    if (v === false) return false;
+    if (Array.isArray(v)) return v as string[];
+    return true;
+  };
+
+  return {
+    sortable: readFlag(tableCfg.sortable),
+    filterable: readFlag(tableCfg.filterable),
+  };
+}
+
+/**
+ * 把 sortable / filterable 写回 MultiChart code 的 chartConfig.table。
+ * - true → 删除该字段（恢复默认）
+ * - false → 写 false
+ * - string[] → 写数组
+ *
+ * 清理空对象：tableCfg 为空 → 删 chartConfig.table；
+ *           chartConfig 整体为空 → 删 prop（同时吃掉前置的换行与缩进，避免空行）。
+ * 保留其它图表的配置（chartConfig.bar / .line 等）不变。
+ */
+export function writeMultiChartTableFlags(
+  code: string,
+  sortable: SortFilterFlag,
+  filterable: SortFilterFlag,
+): string {
+  const span = findChartConfigSpan(code);
+  let cfg: Record<string, Record<string, unknown>> = {};
+  if (span) {
+    try {
+      cfg = JSON.parse(span.jsonStr);
+    } catch {
+      cfg = {};
+    }
+  }
+
+  const tableCfg = { ...(cfg.table ?? {}) };
+
+  if (sortable === true) delete tableCfg.sortable;
+  else tableCfg.sortable = sortable;
+
+  if (filterable === true) delete tableCfg.filterable;
+  else tableCfg.filterable = filterable;
+
+  const newCfg: Record<string, Record<string, unknown>> = { ...cfg };
+  if (Object.keys(tableCfg).length === 0) {
+    delete newCfg.table;
+  } else {
+    newCfg.table = tableCfg;
+  }
+
+  // chartConfig 整体为空 → 删除整段 prop
+  if (Object.keys(newCfg).length === 0) {
+    if (!span) return code;
+    // 向前吃 ' ' / '\t'，以及紧贴的一个 '\n'，避免留下空行
+    let lead = span.start;
+    while (lead > 0 && (code[lead - 1] === ' ' || code[lead - 1] === '\t'))
+      lead--;
+    if (lead > 0 && code[lead - 1] === '\n') lead--;
+    return code.slice(0, lead) + code.slice(span.end);
+  }
+
+  const newCfgStr = `chartConfig={${JSON.stringify(newCfg)}}`;
+  if (span) {
+    return code.slice(0, span.start) + newCfgStr + code.slice(span.end);
+  }
+  // 没有 chartConfig prop，注入到 testId 之前
+  if (/testId\s*=/.test(code)) {
+    return code.replace(/([ \t]*)(testId\s*=)/, `$1${newCfgStr}\n$1$2`);
+  }
+  return code.replace(/\/>/, `  ${newCfgStr}\n/>`);
+}
+
+/**
+ * 构造一段虚拟独立 Table JSX，用于喂给 TableConfigModal。
+ * Modal 内部走原有 parseTableColumnsMeta / readTableFlag 路径，
+ * 完全感知不到这段 code 是合成的。
+ *
+ * 注意：columns 必须输出双引号字符串字面量，否则 parseTableColumnsMeta
+ * 的正则匹配不到 title / dataIndex。
+ */
+export function buildVirtualTableCode(
+  columns: ColumnMeta[],
+  flags: { sortable: SortFilterFlag; filterable: SortFilterFlag },
+): string {
+  const colsStr = columns
+    .map(
+      (c) =>
+        `    { title: ${JSON.stringify(c.title)}, dataIndex: ${JSON.stringify(c.dataIndex)}, key: ${JSON.stringify(c.dataIndex)} }`,
+    )
+    .join(',\n');
+
+  const flagToProp = (name: string, flag: SortFilterFlag): string => {
+    if (flag === true) return '';
+    if (flag === false) return `  ${name}={false}\n`;
+    return `  ${name}={${JSON.stringify(flag)}}\n`;
+  };
+
+  return `<Table
+  dataSource={[]}
+  columns={[
+${colsStr}
+  ]}
+${flagToProp('sortable', flags.sortable)}${flagToProp('filterable', flags.filterable)}  testId="virtual-multichart-table"
+/>`;
+}

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

@@ -13,14 +13,46 @@ const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
 export interface CustomNodeData {
   label: string;
   category: string;
+  type?: string;
+  outputs?: string[];
   isSelected: boolean;
   readonly?: boolean;
   [key: string]: unknown;
 }
 
+const VISIBLE_HANDLE_STYLE: React.CSSProperties = {
+  width: 14,
+  height: 14,
+  background: '#fff',
+  border: '2px solid #555',
+  cursor: 'crosshair',
+};
+
+const HIDDEN_HANDLE_STYLE: React.CSSProperties = {
+  width: 0,
+  height: 0,
+  border: 'none',
+  background: 'transparent',
+  visibility: 'hidden',
+};
+
+const BRANCH_LABEL_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  bottom: -18,
+  fontSize: 11,
+  color: '#8c8c8c',
+  pointerEvents: 'none',
+  whiteSpace: 'nowrap',
+};
+
 export const CustomNode = memo(({ data }: NodeProps) => {
   const nodeData = data as CustomNodeData;
   const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
+  const handleStyle = nodeData.readonly
+    ? HIDDEN_HANDLE_STYLE
+    : VISIBLE_HANDLE_STYLE;
+  const outputs = (nodeData.outputs ?? []) as string[];
+  const multiOut = outputs.length > 1;
 
   return (
     <div
@@ -37,60 +69,43 @@ export const CustomNode = memo(({ data }: NodeProps) => {
         boxShadow: nodeData.isSelected
           ? '0 0 0 2px rgba(22,119,255,0.2)'
           : undefined,
+        position: 'relative',
       }}
     >
-      {!nodeData.readonly && (
-        <Handle
-          type="target"
-          position={Position.Top}
-          style={{
-            width: 14,
-            height: 14,
-            background: '#fff',
-            border: '2px solid #555',
-            cursor: 'crosshair',
-          }}
-        />
-      )}
-      {nodeData.readonly && (
-        <Handle
-          type="target"
-          position={Position.Top}
-          style={{
-            width: 0,
-            height: 0,
-            border: 'none',
-            background: 'transparent',
-            visibility: 'hidden',
-          }}
-        />
-      )}
+      <Handle type="target" position={Position.Top} style={handleStyle} />
       <div>{nodeData.label}</div>
-      {!nodeData.readonly && (
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          style={{
-            width: 14,
-            height: 14,
-            background: '#fff',
-            border: '2px solid #555',
-            cursor: 'crosshair',
-          }}
-        />
-      )}
-      {nodeData.readonly && (
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          style={{
-            width: 0,
-            height: 0,
-            border: 'none',
-            background: 'transparent',
-            visibility: 'hidden',
-          }}
-        />
+      {multiOut ? (
+        <>
+          {outputs.map((id, idx) => (
+            <Handle
+              key={id}
+              id={id}
+              type="source"
+              position={Position.Bottom}
+              style={{
+                ...handleStyle,
+                left: `${((idx + 1) / (outputs.length + 1)) * 100}%`,
+              }}
+            />
+          ))}
+          {!nodeData.readonly && (
+            <>
+              {outputs.map((id, idx) => (
+                <span
+                  key={id}
+                  style={{
+                    ...BRANCH_LABEL_STYLE,
+                    left: `${((idx + 1) / (outputs.length + 1)) * 100 - 5}%`,
+                  }}
+                >
+                  {id}
+                </span>
+              ))}
+            </>
+          )}
+        </>
+      ) : (
+        <Handle type="source" position={Position.Bottom} style={handleStyle} />
       )}
     </div>
   );

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

@@ -18,6 +18,7 @@ import '@xyflow/react/dist/style.css';
 import { CustomNode } from './CustomNode';
 import { ExecutionStatusNode } from './ExecutionStatusNode';
 import type { WorkflowDSL, WorkflowNodeType } from '../types';
+import { resolveOutputs } from '../utils/resolveOutputs';
 
 interface NodeExecution {
   id: string;
@@ -36,7 +37,10 @@ const nodeTypes = { custom: CustomNode, executionStatus: ExecutionStatusNode };
 
 interface EnhancedFlowRendererProps {
   dsl: WorkflowDSL | null;
-  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  nodeTypeMap?: Record<
+    string,
+    { category: string; icon: string; outputs?: string[] | null }
+  >;
   selectedNodeId?: string | null;
   readonly?: boolean;
   onNodeClick?: (nodeId: string) => void;
@@ -104,6 +108,8 @@ function EnhancedFlowCanvas({
       const nodeData: any = {
         label: n.label,
         category,
+        type: n.type,
+        outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
         isSelected: n.id === selectedNodeId,
         readonly: !!readonly,
       };

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

@@ -28,6 +28,8 @@ const STATUS_COLORS: Record<string, string> = {
 export interface ExecutionStatusNodeData {
   label: string;
   category: string;
+  type?: string;
+  outputs?: string[];
   isSelected: boolean;
   readonly?: boolean;
   executionStatus?:
@@ -196,32 +198,70 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
           </div>
         )}
 
-      {!nodeData.readonly && (
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          style={{
-            width: 14,
-            height: 14,
-            background: '#fff',
-            border: '2px solid #555',
-            cursor: 'crosshair',
-          }}
-        />
-      )}
-      {nodeData.readonly && (
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          style={{
-            width: 0,
-            height: 0,
-            border: 'none',
-            background: 'transparent',
-            visibility: 'hidden',
-          }}
-        />
-      )}
+      {(() => {
+        const handleStyle: React.CSSProperties = nodeData.readonly
+          ? {
+              width: 0,
+              height: 0,
+              border: 'none',
+              background: 'transparent',
+              visibility: 'hidden',
+            }
+          : {
+              width: 14,
+              height: 14,
+              background: '#fff',
+              border: '2px solid #555',
+              cursor: 'crosshair',
+            };
+        const outputs = (nodeData.outputs ?? []) as string[];
+        const multiOut = outputs.length > 1;
+        if (multiOut) {
+          return (
+            <>
+              {outputs.map((id, idx) => (
+                <Handle
+                  key={id}
+                  id={id}
+                  type="source"
+                  position={Position.Bottom}
+                  style={{
+                    ...handleStyle,
+                    left: `${((idx + 1) / (outputs.length + 1)) * 100}%`,
+                  }}
+                />
+              ))}
+              {!nodeData.readonly && (
+                <>
+                  {outputs.map((id, idx) => (
+                    <span
+                      key={id}
+                      style={{
+                        position: 'absolute',
+                        bottom: -18,
+                        left: `${((idx + 1) / (outputs.length + 1)) * 100 - 5}%`,
+                        fontSize: 11,
+                        color: '#8c8c8c',
+                        pointerEvents: 'none',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {id}
+                    </span>
+                  ))}
+                </>
+              )}
+            </>
+          );
+        }
+        return (
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            style={handleStyle}
+          />
+        );
+      })()}
     </div>
   );
 });

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

@@ -17,12 +17,16 @@ import {
 import '@xyflow/react/dist/style.css';
 import { CustomNode } from './CustomNode';
 import type { WorkflowDSL, WorkflowNodeType } from '../types';
+import { resolveOutputs } from '../utils/resolveOutputs';
 
 const nodeTypes = { custom: CustomNode };
 
 interface Props {
   dsl: WorkflowDSL | null;
-  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  nodeTypeMap?: Record<
+    string,
+    { category: string; icon: string; outputs?: string[] | null }
+  >;
   selectedNodeId?: string | null;
   readonly?: boolean;
   onNodeClick?: (nodeId: string) => void;
@@ -61,6 +65,8 @@ function FlowCanvas({
         data: {
           label: n.label,
           category,
+          type: n.type,
+          outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
           isSelected: n.id === selectedNodeId,
           readonly: !!readonly,
         },

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

@@ -79,9 +79,16 @@ export default function WorkflowEditorPage() {
   const [aiPromptText, setAiPromptText] = useState('');
 
   const nodeTypeMap = useMemo(() => {
-    const map: Record<string, { category: string; icon: string }> = {};
+    const map: Record<
+      string,
+      { category: string; icon: string; outputs?: string[] | null }
+    > = {};
     for (const nt of nodeTypes) {
-      map[nt.type] = { category: nt.category, icon: nt.icon };
+      map[nt.type] = {
+        category: nt.category,
+        icon: nt.icon,
+        outputs: nt.outputs,
+      };
     }
     return map;
   }, [nodeTypes]);