From 34618579c85bbd6822c72514c240ad322758a8c8 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Tue, 1 Sep 2026 14:42:59 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BD=91=E9=A1=B5=E7=AB=AF=E6=B5=81?=
 =?UTF-8?q?=E8=BD=AC=E6=A0=91=E4=B8=BB=E8=BD=B4=E8=BF=9E=E7=BA=BF=E4=B8=8E?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E6=9D=A1=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 中央垂直线按行渲染:首行从卡片中间起、末行到卡片中间止
- 操作日志改为全行蓝色横条(查看操作日志 x条),整条可点击
---
 .../src/components/TaskTree/TaskFlowView.tsx  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TaskTree/TaskFlowView.tsx b/frontend/src/components/TaskTree/TaskFlowView.tsx
index 9ecd5a6..ac9d3e4 100644
--- a/frontend/src/components/TaskTree/TaskFlowView.tsx
+++ b/frontend/src/components/TaskTree/TaskFlowView.tsx
@@ -150,11 +150,13 @@ const SlimCard = memo(function SlimCard({
           <button onClick={() => onAction({ task, action: "transfer" })} className={`flex-1 rounded border border-orange-200 bg-orange-50 ${sz.btn} text-orange-600`}>强制转交</button>
         </div>
       )}
-      {/* 记录：右下角普通文本链接 + 蓝色 > 箭头 */}
+      {/* 操作日志：全行蓝色横条，整条可点击 */}
       {task.records && task.records.length > 0 && (
-        <div onClick={(e) => { e.stopPropagation(); onViewRecords?.(task); }} className={`${sz.record} flex cursor-pointer items-center justify-end gap-0.5 text-blue-600 hover:text-blue-400`}>
-          <FileText className={sz.recordIcon} />{task.records.length}条
-          <span className="font-bold text-blue-500">›</span>
+        <div
+          onClick={(e) => { e.stopPropagation(); onViewRecords?.(task); }}
+          className={`${size === "lg" ? "-mx-4 -mb-4" : "-mx-2.5 -mb-2.5"} mt-3 py-1.5 w-full bg-blue-50 text-blue-600 text-center text-sm cursor-pointer hover:bg-blue-100 border-t border-blue-100 rounded-b-md transition-colors`}
+        >
+          查看操作日志 ({task.records.length}条)
         </div>
       )}
     </div>
@@ -252,7 +254,7 @@ export const TaskFlowView = memo(function TaskFlowView({ tasks, onAction, curren
 
       {/* ─── 统一垂直时间线布局（焦点/全景共用） ─── */}
       <div className="space-y-6">
-        {visibleMains.map(mainTask => {
+        {visibleMains.map((mainTask, mainIdx) => {
           // 🔧 侧翼严格过滤：主线归主轴，仅 SPAWN 协助分支进入左右翼
           const directChildren = (childMap[mainTask.id] || []).filter(c => !isMain(c));
           const hasLegacyActive = directChildren.some(c => !isMain(c) && !active(mainTask.status));
@@ -262,7 +264,14 @@ export const TaskFlowView = memo(function TaskFlowView({ tasks, onAction, curren
 
           return (
             <div key={mainTask.id} className="relative">
-              <div className={`absolute left-1/2 top-0 bottom-0 -translate-x-1/2 z-0 bg-gray-200 ${size === "lg" ? "w-1" : "w-0.5"}`} />
+              {/* 中央垂直线：按行渲染；首行从卡片中间起，末行到卡片中间止，避免冒出/多截 */}
+              <div
+                className={`absolute left-1/2 -translate-x-1/2 z-0 bg-gray-200 ${size === "lg" ? "w-1" : "w-0.5"}`}
+                style={{
+                  top: mainIdx === 0 ? "50%" : 0,
+                  bottom: mainIdx === visibleMains.length - 1 ? "50%" : 0,
+                }}
+              />
               <div className="flex flex-row items-start w-full">
                 {/* 左翼 — 递归渲染，子子孙孙向外延伸 */}
                 <div className="flex-1 flex flex-col items-end justify-center gap-2 pr-2">