From 0dca6376457dfe29bf7875704a6ff1de50be2539 Mon Sep 17 00:00:00 2001
From: Administrator <admin@example.com>
Date: Wed, 17 Jun 2026 17:37:35 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BB=BB=E5=8A=A1FX=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E5=8C=BA=E6=93=8D=E4=BD=9C=E5=8C=BA=E4=BB=8E=E5=8F=B3=E4=B8=8B?=
 =?UTF-8?q?=E8=A7=92=E6=B5=AE=E5=B1=82=E7=A7=BB=E5=85=A5=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E6=A0=8F=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TaskFloatingActions 重命名为 TaskActionsPanel,挂到对话列表底部
- 不再 absolute 覆盖右侧聊天输入框;编辑/下一步/清除记录改为操作卡片
- 左侧栏样式增强(标题/会话数/选中态高亮)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../task-components/TaskFxWorkspace.tsx       | 117 ++++++++++++------
 1 file changed, 76 insertions(+), 41 deletions(-)

diff --git a/frontend-web/src/strategy-components/components/task-components/TaskFxWorkspace.tsx b/frontend-web/src/strategy-components/components/task-components/TaskFxWorkspace.tsx
index e251a68b..8813e37c 100644
--- a/frontend-web/src/strategy-components/components/task-components/TaskFxWorkspace.tsx
+++ b/frontend-web/src/strategy-components/components/task-components/TaskFxWorkspace.tsx
@@ -2,7 +2,7 @@
  * 任务深链（rwfx / 任务FX）的「任务工作区」：一个任务挂多个对话（1:N）。
  *
  *   左侧 = 该任务下的对话列表（按 metadata.taskId 过滤）+「新建对话」；
- *   右下角 = 常驻浮层红色按钮（编辑 / 下一步 / 清除任务记录），absolute 定位，时刻可见、不被内容挤走；
+ *   右下角 = 常驻浮动操作条（编辑 / 下一步 / 清除任务记录），absolute 定位，时刻可见、不被内容挤走；
  *   右侧 = <Outlet/> 渲染选中的对话（AgentChatPage，新建对话顶部带目的树闸门面板）。
  *
  *   - 进入 chats 索引：有历史 → 跳最新；无历史 → 跳 new（=新建，走闸门）。
@@ -61,44 +61,69 @@ function TaskConversationsList({ taskId, chatsBase }: { taskId: string; chatsBas
   const currentThreadId = useMemo(() => parseThreadId(pathname, chatsBase), [pathname, chatsBase]);
 
   return (
-    <div className="border-border/70 bg-card/40 flex w-60 shrink-0 flex-col border-r">
-      <div className="border-border/70 border-b p-2">
-        <Button size="sm" className="w-full" onClick={() => navigate(`${chatsBase}/new`)}>
+    <div className="bg-background/85 border-border/70 flex w-64 shrink-0 flex-col border-r shadow-[12px_0_30px_-30px_rgba(15,23,42,0.45)] backdrop-blur-xl dark:border-[#1b477e]/70 dark:bg-[#061b35]/82">
+      <div className="border-border/70 border-b p-3 dark:border-[#1b477e]/70">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <div className="min-w-0">
+            <div className="text-foreground text-sm font-semibold">任务对话</div>
+            <div className="text-muted-foreground mt-0.5 text-xs tabular-nums">
+              {isLoading ? "同步中" : `${threads.length} 个会话`}
+            </div>
+          </div>
+        </div>
+        <Button
+          size="sm"
+          className="h-9 w-full bg-[var(--color-main)] text-white shadow-sm hover:bg-[var(--brand-950)]"
+          onClick={() => navigate(`${chatsBase}/new`)}
+        >
           <PlusSquare className="h-4 w-4" /> 新建对话
         </Button>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
+      <div className="min-h-0 flex-1 overflow-y-auto p-2">
         {isLoading ? (
-          <div className="text-muted-foreground p-2 text-sm">加载中…</div>
+          <div className="text-muted-foreground rounded-md border border-dashed p-3 text-center text-sm dark:border-[#1b477e]/60">
+            加载中…
+          </div>
         ) : threads.length === 0 ? (
-          <div className="text-muted-foreground p-2 text-sm">暂无对话</div>
+          <div className="text-muted-foreground rounded-md border border-dashed p-3 text-center text-sm dark:border-[#1b477e]/60">
+            暂无对话
+          </div>
         ) : (
           threads.map((thread) => (
             <button
               key={thread.thread_id}
               onClick={() => navigate(`${chatsBase}/${thread.thread_id}`)}
               className={cn(
-                "hover:bg-accent flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm",
-                thread.thread_id === currentThreadId && "bg-accent font-medium",
+                "group relative flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm transition-colors",
+                "hover:bg-[var(--bg-color)] dark:hover:bg-[#0d2a4d]/85",
+                thread.thread_id === currentThreadId &&
+                  "bg-[var(--bg-color)] font-medium text-[var(--color-main)] shadow-sm dark:bg-[#0d2a4d] dark:text-[#9fe3ff]",
               )}
               title={desensitize(titleOfThread(thread, "新对话"))}
             >
-              <MessageSquare className="h-3.5 w-3.5 shrink-0" />
+              <span
+                className={cn(
+                  "absolute inset-y-2 left-0 w-0.5 rounded-full bg-transparent transition-colors",
+                  thread.thread_id === currentThreadId && "bg-[var(--color-main)] dark:bg-[#64cdf5]",
+                )}
+              />
+              <MessageSquare className="text-muted-foreground group-hover:text-foreground h-3.5 w-3.5 shrink-0" />
               <span className="truncate">{desensitize(titleOfThread(thread, "新对话"))}</span>
             </button>
           ))
         )}
       </div>
+      <TaskActionsPanel taskId={taskId} />
     </div>
   );
 }
 
 /**
- * 右下角常驻红色操作浮层：编辑 / 下一步 / 清除任务记录。
- * absolute 定位在工作区右侧面板内，z-40，时刻可见、不被聊天内容挤走。
+ * 左侧任务栏底部操作区：编辑 / 下一步 / 清除任务记录。
+ * 跟随任务对话面板布局，不再覆盖右侧聊天输入框。
  */
-function TaskFloatingActions({ taskId }: { taskId: string }) {
+function TaskActionsPanel({ taskId }: { taskId: string }) {
   const [clearOpen, setClearOpen] = useState(false);
   const [clearing, setClearing] = useState(false);
 
@@ -123,32 +148,43 @@ function TaskFloatingActions({ taskId }: { taskId: string }) {
 
   return (
     <>
-      <div className="pointer-events-none absolute bottom-4 right-4 z-40 flex flex-col items-end gap-2">
-        <Button
-          size="sm"
-          variant="destructive"
-          className="pointer-events-auto shadow-lg"
-          onClick={() => openExternal(buildTreemapEditUrl(taskId), "编辑")}
-        >
-          <ExternalLink className="h-3.5 w-3.5" /> 编辑
-        </Button>
-        <Button
-          size="sm"
-          variant="destructive"
-          className="pointer-events-auto shadow-lg"
-          onClick={() => openExternal(buildTreemapNextUrl(taskId), "下一步")}
-        >
-          <ArrowRight className="h-3.5 w-3.5" /> 下一步
-        </Button>
-        <Button
-          size="sm"
-          variant="destructive"
-          className="pointer-events-auto shadow-lg"
-          onClick={() => setClearOpen(true)}
-          disabled={!taskId}
-        >
-          <Trash2 className="h-3.5 w-3.5" /> 清除任务记录
-        </Button>
+      <div className="border-border/70 shrink-0 border-t p-3 dark:border-[#1b477e]/70">
+        <div className="rounded-md border border-[var(--card-border)] bg-background/80 p-2 shadow-sm dark:border-[#2b8ffe]/45 dark:bg-[#0b2546]/72">
+          <div className="text-muted-foreground mb-2 px-1 text-xs font-medium">
+            任务操作
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-8 border-[var(--card-border)] bg-background/80 text-[var(--color-main)] hover:bg-[var(--bg-color)] hover:text-[var(--color-main)] dark:border-[#2b8ffe]/50 dark:bg-[#0b2546]/80 dark:text-[#bde9ff] dark:hover:bg-[#10375f]"
+              onClick={() => openExternal(buildTreemapEditUrl(taskId), "编辑")}
+              disabled={!taskId}
+              title="编辑任务"
+            >
+              <ExternalLink className="h-3.5 w-3.5" /> 编辑
+            </Button>
+            <Button
+              size="sm"
+              className="h-8 bg-[var(--color-main)] text-white shadow-[0_8px_18px_-12px_var(--color-main)] hover:bg-[var(--brand-950)]"
+              onClick={() => openExternal(buildTreemapNextUrl(taskId), "下一步")}
+              disabled={!taskId}
+              title="进入下一步"
+            >
+              下一步 <ArrowRight className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="col-span-2 h-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive dark:text-[#ccd2da] dark:hover:bg-[#5c0011]/35"
+              onClick={() => setClearOpen(true)}
+              disabled={!taskId}
+              title="清除任务记录"
+            >
+              <Trash2 className="h-3.5 w-3.5" /> 清除记录
+            </Button>
+          </div>
+        </div>
       </div>
 
       <Dialog open={clearOpen} onOpenChange={(o) => !clearing && setClearOpen(o)}>
@@ -173,7 +209,7 @@ function TaskFloatingActions({ taskId }: { taskId: string }) {
   );
 }
 
-/** 任务工作区布局：左列表 + 右 Outlet + 右下角常驻红色操作浮层。 */
+/** 任务工作区布局：左列表 + 右 Outlet。 */
 export function TaskFxWorkspace({ taskBase }: { taskBase: string }) {
   const { taskId, chatsBase } = useChatsBase(taskBase);
   // 预拉配置，保证「编辑/下一步」的同步 URL 构造能读到缓存。
@@ -185,7 +221,6 @@ export function TaskFxWorkspace({ taskBase }: { taskBase: string }) {
       <TaskConversationsList taskId={taskId} chatsBase={chatsBase} />
       <div className="relative min-h-0 min-w-0 flex-1">
         <Outlet />
-        <TaskFloatingActions taskId={taskId} />
       </div>
     </div>
   );