流程详情:版本卡与图平齐 + 显式「新建版本」+ 节点属性成卡

三处走查反馈:

① 版本列改成**固定高度卡片,与右侧的图等高**(grid stretch):
   头部 = 标题 + 版本数 + 「新建版本」;中段版本行,多了在卡内滚,不把页面撑长;
   卡尾一句常驻说明(恰一个生效;在途按启动版本跑完)。实测两侧 591px 对 591px,顶对齐。

② 版本从此有**显式的新建入口** —— 之前只能靠改图保存来隐式长版本。
   「新建版本」= 以当前看的版本为底克隆一版(服务端定版号并即刻生效)。
   与「激活」分工明确:激活只是切生效指针,不长版本;新建才长 ——
   把旧版本的画法复活成最新版、或在现状上另起一版接着画,都走这儿。
   画布有未保存改动时确认卡会明说「克隆不带未保存的改动」。
   实测:以 v3 为底建 v4 → v4 生效、v3 自动停用、列表实时刷新。

③ 节点属性从裸块改成**卡片**(与页面其它卡同一形制),标题右侧带状态
   (只读 / 有改动待保存 / 点节点就地填写)。

typecheck ✓ lint ✓ depcruise ✓ api:check ✓ 498 测试 ✓

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/features/gov-process/internal/panel.tsx

@@ -435,6 +435,48 @@ function FlowLab({
     },
   });
 
+  /**
+   * 新建版本 = **以当前看的版本为底克隆一版**(服务端定版号并即刻生效)。
+   * 与「激活」分工明确:激活只是把生效指针切过去,不产生新版本;
+   * 新建版本才长一版 —— 把旧定义复活成最新版、或在现状上另起一版接着画,都走这儿。
+   */
+  const cloneVersion = useMutation({
+    mutationFn: () => call<{ pkg: ProcessPackage; report: ClosureReport }>(saveProcessRoute, { body: { pkg } }),
+    onSuccess: (out) => {
+      setReport(out.report);
+      void queryClient.invalidateQueries({ queryKey: ['gov', 'process'] });
+      void queryClient.invalidateQueries({ queryKey: ['gov', 'process-reports'] });
+      setAsk(undefined);
+      onSaved();
+    },
+  });
+
+  const askClone = () =>
+    setAsk({
+      spec: {
+        title: `新建版本:以 v${pkg.version} 为底 → v${nextVersion}`,
+        note:
+          dirty && !readOnly ? (
+            <Note tone="warn">
+              画布上有<b>未保存的改动</b>,新建版本不会带上它们(克隆的是已存的 v{pkg.version})。
+              想连改动一起走,用下面的「保存并生效」。
+            </Note>
+          ) : (
+            <Note>
+              把 v{pkg.version} 的定义原样复制成 v{nextVersion} 并即刻生效
+              {readOnly ? ' —— 这就是「把旧版本的画法复活成最新版」的路' : ',再在新版上接着画'}。
+            </Note>
+          ),
+        impact: {
+          who: `此后新起的工作流走 v${nextVersion}`,
+          undo: '版本并存,可把生效切回任一版',
+          when: '确认即建并生效',
+        },
+        okLabel: `建 v${nextVersion} 并生效`,
+        onOk: () => cloneVersion.mutate(),
+      },
+    });
+
   const askActivate = (v: ProcessPackage) =>
     setAsk({
       spec: {
@@ -588,69 +630,73 @@ function FlowLab({
         }
       >
         <div className="g-flowlab">
-          <aside className="g-vers">
-            <div className="g-side-h">
+          <aside className="g-vercard">
+            <div className="g-vercard-h">
               <Ico name="history" s={13} />
-              版本
-              <span className="x">恰一个生效 · 切换不动在途</span>
+              <b>版本</b>
+              <span className="n">{versions.length}</span>
+              <button className="g-ver-act t-go" onClick={askClone} disabled={cloneVersion.isPending}>
+                <Ico name="plus" s={12} /> 新建版本
+              </button>
             </div>
-            {versions.map((v) => {
-              const isActive = v.version === activeVersion;
-              const isShown = v.version === pkg.version;
-              return (
-                <div
-                  key={v.version}
-                  className={'g-ver' + (isShown ? ' on' : '') + (isActive ? ' t-live' : '')}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => onPick(v.version)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') onPick(v.version);
-                  }}
-                >
-                  <b>v{v.version}</b>
-                  {isActive ? (
-                    <St tone="ok" ico="circle-check">
-                      生效中
-                    </St>
-                  ) : (
-                    <St tone="mute" ico="pause">
-                      停用
-                    </St>
-                  )}
-                  <span className="m">
-                    <span className="cnt">
-                      {v.nodes.length} 节点 · {v.edges.length} 边
-                    </span>
+            <div className="g-vercard-list">
+              {versions.map((v) => {
+                const isActive = v.version === activeVersion;
+                const isShown = v.version === pkg.version;
+                return (
+                  <div
+                    key={v.version}
+                    className={'g-ver' + (isShown ? ' on' : '')}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => onPick(v.version)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') onPick(v.version);
+                    }}
+                  >
+                    <b>v{v.version}</b>
                     {isActive ? (
-                      <button
-                        className="g-ver-act"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          askRetire(v);
-                        }}
-                      >
-                        停用
-                      </button>
+                      <St tone="ok" ico="circle-check">
+                        生效中
+                      </St>
                     ) : (
-                      <button
-                        className="g-ver-act t-go"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          askActivate(v);
-                        }}
-                      >
-                        激活
-                      </button>
+                      <St tone="mute" ico="pause">
+                        停用
+                      </St>
                     )}
-                  </span>
-                </div>
-              );
-            })}
-            <Note>
-              保存恒存成新版本并即刻生效;旧版本原样留着,在途工作流按启动时的版本跑完。
-              把生效切回旧版即是回退 —— 不用改图。
-            </Note>
+                    <span className="m">
+                      <span className="cnt">
+                        {v.nodes.length} 节点 · {v.edges.length} 边
+                      </span>
+                      {isActive ? (
+                        <button
+                          className="g-ver-act"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            askRetire(v);
+                          }}
+                        >
+                          停用
+                        </button>
+                      ) : (
+                        <button
+                          className="g-ver-act t-go"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            askActivate(v);
+                          }}
+                        >
+                          激活
+                        </button>
+                      )}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="g-vercard-f">
+              恰一个生效版本;在途工作流按启动时的版本跑完,启停与新建都不影响它们。
+            </div>
           </aside>
 
           <div className="g-canvas" ref={canvasRef}>
@@ -690,13 +736,13 @@ function FlowLab({
           </div>
         </div>
 
-        {/* 图下:节点属性 —— 点画布或点节点条,属性就地填 */}
-        <div className="g-side g-wide">
-          <div className="g-side-h">
-            <Ico name="sliders-horizontal" s={13} />
-            节点属性
-            <span className="x">{readOnly ? `v${pkg.version} 只读` : dirty ? '有改动待保存' : '点节点就地填写'}</span>
-          </div>
+        {/* 图下:节点属性卡 —— 点画布或点节点条,属性就地填 */}
+        <div className="g-wide">
+        <Card
+          ico="sliders-horizontal"
+          title="节点属性"
+          extra={readOnly ? `v${pkg.version} 只读` : dirty ? '有改动待保存' : '点节点就地填写'}
+        >
           <div className="g-picker">
             {nodes
               .filter((n) => n.kind !== 'start' && n.kind !== 'end' && n.kind !== 'end-bad')
@@ -936,6 +982,7 @@ function FlowLab({
               />
             </>
           )}
+        </Card>
         </div>
       </Sec>