@gadmin2n/schematics 0.0.143 → 0.0.145

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

@@ -7,8 +7,6 @@ import React, {
 } from 'react';
 import {
   Button,
-  Card,
-  Descriptions,
   Input,
   message,
   Modal,
@@ -17,10 +15,11 @@ import {
   Space,
   Spin,
   Tag,
-  Typography,
+  Tooltip,
 } from 'antd';
 import {
-  ArrowLeftOutlined,
+  ApartmentOutlined,
+  CodeOutlined,
   CopyOutlined,
   DiffOutlined,
   EditOutlined,
@@ -32,37 +31,64 @@ 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 { ReadonlyNodePanel } from './components/ReadonlyNodePanel';
+import { WorkflowWorkspaceHeader } from './components/WorkflowWorkspaceHeader';
 import { DslView, type DslViewHandle } from './components/DslView';
 import { RunWorkflowModal } from './components/RunWorkflowModal';
 import { resolveWorkflowDisplay } from './utils/resolveWorkflowDisplay';
+import { workflowPublishErrorMessage } from './utils/workflowPublishError';
+import { buildWorkflowSkillPrompt } from './utils/workflowSkillPrompt';
+import { useReferencedNodeInstanceConfigs } from './hooks/useReferencedNodeInstanceConfigs';
 import type {
   Workflow,
   WorkflowDSL,
   WorkflowNodeType,
   WorkflowVersion,
 } from './types';
-
-const { Title } = Typography;
+import { useTranslation } from 'react-i18next';
+import './workflow-ui.css';
 
 const STATUS_COLOR: Record<string, string> = {
   DRAFT: 'default',
   PUBLISHED: 'success',
+  DELETING: 'warning',
+};
+
+const SCHEDULE_STATUS_COLOR: Record<string, string> = {
+  ACTIVE: 'success',
+  PAUSED: 'default',
+  MISSING: 'error',
+  UNAVAILABLE: 'warning',
 };
 
 import { useIsAgentAllowed } from 'config/agentAllowed';
 
 export default function WorkflowShowPage() {
+  const { t } = useTranslation('workflow');
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
 
   const [workflow, setWorkflow] = useState<Workflow | null>(null);
   const [versions, setVersions] = useState<WorkflowVersion[]>([]);
   const [nodeTypes, setNodeTypes] = useState<WorkflowNodeType[]>([]);
+  const [nodeTypesError, setNodeTypesError] = useState(false);
   const [loading, setLoading] = useState(true);
   const isDev = useIsAgentAllowed();
 
   const [dsl, setDsl] = useState<WorkflowDSL | null>(null);
   const [currentVersion, setCurrentVersion] = useState<number | null>(null);
+  const viewingDraft =
+    Boolean(workflow?.hasUnpublishedChanges) && currentVersion === null;
+  const hasDraftToPublish = Boolean(
+    workflow?.hasUnpublishedChanges && workflow.dsl,
+  );
+  const isDeleting = workflow?.status === 'DELETING';
+  const isManualWorkflow = Boolean(
+    dsl?.nodes.some((node) => node.type === 'manual_trigger'),
+  );
+  const referencedNodeConfigs = useReferencedNodeInstanceConfigs(
+    viewingDraft ? dsl : null,
+  );
   const [viewMode, setViewMode] = useState<'canvas' | 'dsl'>('canvas');
   const dslViewRef = useRef<DslViewHandle>(null);
 
@@ -99,15 +125,33 @@ export default function WorkflowShowPage() {
 
   const selectedNode = useMemo(() => {
     if (!selectedNodeId || !dsl) return null;
-    return dsl.nodes.find((n) => n.id === selectedNodeId) || null;
-  }, [selectedNodeId, dsl]);
+    const node = dsl.nodes.find((item) => item.id === selectedNodeId) || null;
+    if (!node || !viewingDraft || !node.instanceRef) return node;
+    const config =
+      node.configOverride ??
+      referencedNodeConfigs.configs[node.instanceRef.instanceId] ??
+      node.config;
+    return { ...node, config };
+  }, [dsl, referencedNodeConfigs.configs, selectedNodeId, viewingDraft]);
 
-  useEffect(() => {
-    customRequest<WorkflowNodeType[]>('workflow-node-types', 'GET')
-      .then(setNodeTypes)
-      .catch(() => {});
+  const selectedNodeType = useMemo(
+    () => nodeTypes.find((nodeType) => nodeType.type === selectedNode?.type),
+    [nodeTypes, selectedNode?.type],
+  );
+
+  const loadNodeTypes = useCallback(async () => {
+    try {
+      setNodeTypes(
+        await customRequest<WorkflowNodeType[]>('workflow-node-types', 'GET'),
+      );
+      setNodeTypesError(false);
+    } catch {
+      setNodeTypesError(true);
+    }
   }, []);
 
+  useEffect(() => void loadNodeTypes(), [loadNodeTypes]);
+
   useEffect(() => {
     if (!id) return;
     setLoading(true);
@@ -133,6 +177,12 @@ export default function WorkflowShowPage() {
   const handleSelectVersion = useCallback(
     async (version: number) => {
       if (!id) return;
+      if (version === 0 && workflow?.dsl) {
+        setDsl(workflow.dsl);
+        setCurrentVersion(null);
+        setSelectedNodeId(null);
+        return;
+      }
       try {
         const v = await customRequest<WorkflowVersion>(
           `workflow/${id}/versions/${version}`,
@@ -144,7 +194,7 @@ export default function WorkflowShowPage() {
         message.error(e?.message ?? 'Failed to load version');
       }
     },
-    [id],
+    [id, workflow?.dsl],
   );
 
   const handleOpenDiff = useCallback(() => {
@@ -191,6 +241,14 @@ export default function WorkflowShowPage() {
 
   const handlePublish = useCallback(async () => {
     if (!id) return;
+    if (referencedNodeConfigs.status !== 'ready') {
+      message.error(
+        referencedNodeConfigs.status === 'error'
+          ? t('editor.templateConfigLoadFailedHint')
+          : t('editor.templateConfigLoading'),
+      );
+      return;
+    }
     setPublishLoading(true);
     try {
       await customRequest(`workflow/${id}/publish`, 'POST', {
@@ -210,18 +268,26 @@ export default function WorkflowShowPage() {
       setDsl(display.dsl);
       setCurrentVersion(display.version);
     } catch (e: any) {
-      message.error(e?.message ?? 'Failed to publish workflow');
+      message.error(
+        workflowPublishErrorMessage(e, t('list.publishFailedHint')),
+        8,
+      );
     } finally {
       setPublishLoading(false);
     }
-  }, [id, publishSummary]);
+  }, [id, publishSummary, referencedNodeConfigs.status, t]);
 
   const handleAiExplainDiff = useCallback(() => {
     if (!diffLeftDsl || !diffRightDsl) {
       message.warning('请先选择两个版本');
       return;
     }
-    const prompt = `请对比以下两个版本的 Workflow DSL JSON，用中文解读主要变更内容（新增/删除/修改了哪些节点、连线、配置等）。
+    const skillContext = buildWorkflowSkillPrompt(
+      nodeTypes.map((nodeType) => nodeType.type),
+    );
+    const prompt = `${skillContext}
+
+请对比以下两个版本的 Workflow DSL JSON，用中文解读主要变更内容（新增/删除/修改了哪些节点、连线、配置等）。
 
 版本 v${diffLeft}（旧）:
 \`\`\`json
@@ -240,7 +306,7 @@ ${diffRightDsl}
       '*',
     );
     message.success('已发送给 AI，请到右侧的Coding Agent对话窗口查看结果');
-  }, [diffLeftDsl, diffRightDsl, diffLeft, diffRight]);
+  }, [diffLeftDsl, diffRightDsl, diffLeft, diffRight, nodeTypes]);
 
   if (loading) {
     return (
@@ -258,50 +324,55 @@ ${diffRightDsl}
   }
 
   return (
-    <div
-      style={{
-        height: 'calc(100vh - 96px)',
-        display: 'flex',
-        flexDirection: 'column',
-        background: 'var(--ant-color-bg-layout)',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Header */}
-      <Card style={{ marginBottom: 16, flexShrink: 0 }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Space>
-            <Button
-              type="text"
-              icon={<ArrowLeftOutlined />}
-              onClick={() => navigate('/admin/workflow')}
-            ></Button>
-            <Title level={4} style={{ margin: 0 }}>
-              {workflow?.name || 'Workflow'}
-            </Title>
-            {workflow?.status && (
-              <Tag color={STATUS_COLOR[workflow.status]}>{workflow.status}</Tag>
-            )}
-          </Space>
-          <Space>
+    <div className="workflow-workspace">
+      <WorkflowWorkspaceHeader
+        eyebrow={t('viewer.workspaceEyebrow')}
+        title={workflow?.name || 'Workflow'}
+        status={
+          workflow?.status ? (
+            <Space size={4}>
+              <Tag color={STATUS_COLOR[workflow.status]}>
+                {t(`workflowStatus.${workflow.status.toLowerCase()}`, {
+                  defaultValue: workflow.status,
+                })}
+              </Tag>
+              {workflow.scheduleStatus &&
+                workflow.scheduleStatus !== 'NOT_APPLICABLE' && (
+                  <Tag color={SCHEDULE_STATUS_COLOR[workflow.scheduleStatus]}>
+                    {t(
+                      `viewer.scheduleStatus.${workflow.scheduleStatus.toLowerCase()}`,
+                    )}
+                  </Tag>
+                )}
+            </Space>
+          ) : null
+        }
+        onBack={() => navigate('/admin/workflow')}
+        backLabel={t('common.back')}
+        actions={
+          <Space wrap={false}>
             {versions.length > 0 && (
               <Select
-                value={currentVersion ?? undefined}
+                value={viewingDraft ? 0 : (currentVersion ?? undefined)}
                 onChange={handleSelectVersion}
                 style={{ width: 200 }}
                 placeholder={
-                  workflow?.status === 'DRAFT' ? 'Saved draft' : '选择版本'
+                  workflow?.hasUnpublishedChanges ? 'Saved draft' : '选择版本'
                 }
-                options={versions.map((v) => ({
-                  label: `v${v.version} - ${v.changeSummary?.slice(0, 20) || 'Saved'}`,
-                  value: v.version,
-                }))}
+                options={[
+                  ...(workflow?.hasUnpublishedChanges && workflow.dsl
+                    ? [
+                        {
+                          label: t('viewer.savedDraft'),
+                          value: 0,
+                        },
+                      ]
+                    : []),
+                  ...versions.map((v) => ({
+                    label: `v${v.version} - ${v.changeSummary?.slice(0, 20) || 'Saved'}`,
+                    value: v.version,
+                  })),
+                ]}
               />
             )}
             <Button
@@ -309,138 +380,164 @@ ${diffRightDsl}
               onClick={handleOpenDiff}
               disabled={versions.length < 2}
             >
-              Diff
+              {t('viewer.compareVersions')}
             </Button>
-            {workflow?.status === 'DRAFT' && (
-              <Button
-                icon={<SendOutlined />}
-                onClick={() => setPublishModalOpen(true)}
-              >
-                Publish
-              </Button>
-            )}
-            {workflow?.status === 'PUBLISHED' && workflow?.isEnabled && (
-              <RunWorkflowModal
-                workflowId={id!}
-                workflowName={workflow.name}
-                onSuccess={(instanceId) =>
-                  navigate(`/admin/workflow/instance/show/${instanceId}`)
-                }
-              />
-            )}
+            <Tooltip
+              title={
+                !hasDraftToPublish
+                  ? t('viewer.noChangesToPublish')
+                  : !viewingDraft
+                    ? t('viewer.publishSavedDraft')
+                    : undefined
+              }
+            >
+              <span>
+                <Button
+                  icon={<SendOutlined />}
+                  onClick={() => setPublishModalOpen(true)}
+                  disabled={
+                    !hasDraftToPublish ||
+                    isDeleting ||
+                    referencedNodeConfigs.status !== 'ready'
+                  }
+                >
+                  {t('list.publish')}
+                </Button>
+              </span>
+            </Tooltip>
+            {workflow?.status === 'PUBLISHED' &&
+              workflow?.isEnabled &&
+              !viewingDraft &&
+              isManualWorkflow && (
+                <RunWorkflowModal
+                  workflowCode={workflow.code}
+                  workflowName={workflow.name}
+                  onSuccess={(instanceId) =>
+                    navigate(`/admin/workflow/instance/show/${instanceId}`)
+                  }
+                />
+              )}
             <Button
               icon={<HistoryOutlined />}
               onClick={() => navigate(`/admin/workflow/instances/show/${id}`)}
             >
-              History
+              {t('list.runHistory')}
             </Button>
             <Button
               type="primary"
               icon={<EditOutlined />}
-              onClick={() => navigate(`/admin/workflow/edit/${id}`)}
+              disabled={isDeleting}
+              onClick={() =>
+                navigate(
+                  currentVersion === null
+                    ? `/admin/workflow/edit/${id}`
+                    : `/admin/workflow/edit/${id}?version=${currentVersion}`,
+                )
+              }
             >
-              Edit
+              {t('common.edit')}
             </Button>
           </Space>
-        </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: '画布', value: 'canvas' },
-            { label: 'DSL', value: 'dsl' },
-          ]}
-        />
-        {viewMode === 'dsl' && (
-          <Button
-            icon={<CopyOutlined />}
-            onClick={() => dslViewRef.current?.copy()}
-          >
-            Copy
-          </Button>
-        )}
+      <div className="workflow-workspace__toolbar">
+        <div className="workflow-workspace__view-switcher">
+          <Segmented
+            className="workflow-workspace__segmented"
+            aria-label={t('editor.viewMode')}
+            value={viewMode}
+            onChange={(v) => setViewMode(v as 'canvas' | 'dsl')}
+            options={[
+              {
+                label: t('editor.canvas'),
+                value: 'canvas',
+                icon: <ApartmentOutlined />,
+              },
+              {
+                label: t('editor.dsl'),
+                value: 'dsl',
+                icon: <CodeOutlined />,
+              },
+            ]}
+          />
+        </div>
+        <Space className="workflow-workspace__toolbar-actions" size={8}>
+          {nodeTypesError && (
+            <span className="workflow-inline-error">
+              {t('editor.nodeTypesLoadFailed')}{' '}
+              <Button type="link" size="small" onClick={loadNodeTypes}>
+                {t('common.retry')}
+              </Button>
+            </span>
+          )}
+          {viewingDraft && referencedNodeConfigs.status === 'loading' && (
+            <span className="workflow-template-sync-state">
+              <Spin size="small" />
+              {t('editor.templateConfigLoading')}
+            </span>
+          )}
+          {viewingDraft && referencedNodeConfigs.status === 'error' && (
+            <span className="workflow-inline-error">
+              {t('editor.templateConfigLoadFailed')}{' '}
+              <Button
+                type="link"
+                size="small"
+                onClick={referencedNodeConfigs.retry}
+              >
+                {t('common.retry')}
+              </Button>
+            </span>
+          )}
+          {viewMode === 'dsl' && (
+            <Button
+              className="workflow-workspace__toolbar-action"
+              type="text"
+              icon={<CopyOutlined />}
+              onClick={() => dslViewRef.current?.copy()}
+            >
+              {t('viewer.copyDsl')}
+            </Button>
+          )}
+        </Space>
       </div>
 
       {/* Canvas + Node Detail Panel */}
-      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
+      <div className="workflow-workspace__body">
         {viewMode === 'canvas' ? (
           <>
-            <div style={{ flex: 1, position: 'relative' }}>
+            <div className="workflow-workspace__canvas">
               <FlowRenderer
                 dsl={dsl}
                 nodeTypeMap={nodeTypeMap}
                 selectedNodeId={selectedNodeId}
                 readonly
+                fitViewOnLoad
+                referencedConfigs={
+                  viewingDraft ? referencedNodeConfigs.configs : undefined
+                }
+                referencedConfigStatus={
+                  viewingDraft ? referencedNodeConfigs.status : 'ready'
+                }
+                onRetryReferencedConfigs={
+                  viewingDraft ? referencedNodeConfigs.retry : undefined
+                }
                 onNodeClick={(nodeId) => setSelectedNodeId(nodeId || null)}
               />
             </div>
-            {selectedNode && (
-              <div
-                style={{
-                  width: 320,
-                  flexShrink: 0,
-                  borderLeft: '1px solid var(--ant-color-border-secondary)',
-                  background: 'var(--ant-color-bg-container)',
-                  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.instanceCode}
-                    </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>
-            )}
+            {selectedNode &&
+              (!viewingDraft || referencedNodeConfigs.status === 'ready') && (
+                <ReadonlyNodePanel
+                  key={selectedNode.id}
+                  node={selectedNode}
+                  nodeType={selectedNodeType}
+                  nodes={dsl?.nodes ?? []}
+                  edges={dsl?.edges ?? []}
+                  nodeTypes={nodeTypes}
+                  currentWorkflowId={id}
+                />
+              )}
           </>
         ) : (
           <DslView ref={dslViewRef} dsl={dsl} readonly />
@@ -449,7 +546,7 @@ ${diffRightDsl}
 
       {/* Diff Modal */}
       <Modal
-        title="版本对比"
+        title={t('viewer.versionComparison')}
         open={diffModalOpen}
         onCancel={() => setDiffModalOpen(false)}
         footer={null}
@@ -461,7 +558,7 @@ ${diffRightDsl}
             value={diffLeft}
             onChange={(v) => setDiffLeft(v)}
             style={{ width: 200 }}
-            placeholder="选择左侧版本"
+            placeholder={t('viewer.selectOlderVersion')}
             options={versions.map((v) => ({
               label: `v${v.version} - ${v.changeSummary?.slice(0, 20) || 'Saved'}`,
               value: v.version,
@@ -472,7 +569,7 @@ ${diffRightDsl}
             value={diffRight}
             onChange={(v) => setDiffRight(v)}
             style={{ width: 200 }}
-            placeholder="选择右侧版本"
+            placeholder={t('viewer.selectNewerVersion')}
             options={versions.map((v) => ({
               label: `v${v.version} - ${v.changeSummary?.slice(0, 20) || 'Saved'}`,
               value: v.version,
@@ -485,7 +582,7 @@ ${diffRightDsl}
               onClick={handleAiExplainDiff}
               disabled={!diffLeftDsl || !diffRightDsl}
             >
-              AI 解读
+              {t('viewer.aiExplain')}
             </Button>
           )}
         </Space>
@@ -507,16 +604,16 @@ ${diffRightDsl}
 
       {/* Publish Modal */}
       <Modal
-        title="Publish Workflow"
+        title={t('list.publishTitle')}
         open={publishModalOpen}
         onCancel={() => setPublishModalOpen(false)}
         onOk={handlePublish}
         confirmLoading={publishLoading}
-        okText="Publish"
+        okText={t('list.publish')}
       >
         <Input.TextArea
           rows={3}
-          placeholder="Version description (changeSummary)"
+          placeholder={t('list.publishPlaceholder')}
           value={publishSummary}
           onChange={(e) => setPublishSummary(e.target.value)}
         />

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

@@ -31,6 +31,8 @@ import { HEADER_CARD_PROPS, PAGE_WRAPPER_STYLE } from 'constants/layout';
 import { customRequest } from 'helpers/http';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import '../workflow-ui.css';
+import { useWorkflowFormValidation } from '../useWorkflowFormValidation';
 
 const { Paragraph, Text, Title } = Typography;
 
@@ -107,7 +109,7 @@ function SensitiveValue({
           whiteSpace: 'normal',
         }}
       >
-        {visible ? value : maskedValue ?? maskSecret(value)}
+        {visible ? value : (maskedValue ?? maskSecret(value))}
       </Text>
       <Button
         type="text"
@@ -123,6 +125,7 @@ function SensitiveValue({
 export default function TemporalTenantPage() {
   const navigate = useNavigate();
   const [form] = Form.useForm<TenantConfigFormValues>();
+  const formValidation = useWorkflowFormValidation();
   const { token } = theme.useToken();
   const { data: identity } = useGetIdentity<any>();
   const isAdmin = (identity?.configPerms?.roles || []).includes('SYSTEM_ADMIN');
@@ -267,7 +270,7 @@ export default function TemporalTenantPage() {
   }
 
   return (
-    <div style={PAGE_WRAPPER_STYLE}>
+    <div className="workflow-page-stack" style={PAGE_WRAPPER_STYLE}>
       <Card {...HEADER_CARD_PROPS}>
         <div
           style={{
@@ -429,13 +432,6 @@ export default function TemporalTenantPage() {
                 />
               </Descriptions.Item>
             </Descriptions>
-
-            <Alert
-              type="info"
-              showIcon
-              message="保存修改后，Temporal Worker 会自动加载本 GAdmin 的最新连接配置。"
-              style={{ marginTop: 20 }}
-            />
           </>
         ) : (
           <Empty
@@ -511,6 +507,7 @@ export default function TemporalTenantPage() {
           layout="vertical"
           onFinish={handleSave}
           requiredMark="optional"
+          {...formValidation}
         >
           <Title level={5}>Temporal 管理连接</Title>
           <Form.Item