样式修改

frontend-web/src/roundtable-planning/components/Step3ReportMode.tsx

@@ -9,7 +9,7 @@
  *
  * 进入即自动开跑（`useStep3Report.start`），右上角「重新绘制」可重跑。
  */
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import {
@@ -23,6 +23,7 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   RefreshCw,
+  SendHorizontal,
   Sparkles,
   X,
 } from "lucide-react";
@@ -197,7 +198,7 @@ export function Step3ReportMode({
         <div className="flex items-center gap-2">
           <button
             type="button"
-            onClick={redraw}
+            onClick={() => redraw()}
             disabled={phase === "creating" || phase === "streaming"}
             className="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed text-[10.5px] font-bold px-3 py-1.5 rounded-xl flex items-center gap-1 transition"
           >
@@ -311,6 +312,7 @@ export function Step3ReportMode({
               dialogues={dialogues}
               error={error}
               onRetry={redraw}
+              onRevisionSubmit={redraw}
               onArtifactStepClick={openArtifactFromStep}
               onArtifactPreview={openArtifactPreview}
               selectedModel={selectedModel}
@@ -432,6 +434,7 @@ function AgentProgressPanel({
   dialogues,
   error,
   onRetry,
+  onRevisionSubmit,
   onArtifactStepClick,
   onArtifactPreview,
   selectedModel,
@@ -443,6 +446,7 @@ function AgentProgressPanel({
   dialogues: ReturnType<typeof useStep3Report>["dialogues"];
   error: string | null;
   onRetry: () => void;
+  onRevisionSubmit: (revisionInstruction: string) => void;
   onArtifactStepClick: ReturnType<typeof useStep3Report>["openArtifactFromStep"];
   onArtifactPreview: ReturnType<typeof useStep3Report>["openArtifactPreview"];
   selectedModel: string;
@@ -453,6 +457,15 @@ function AgentProgressPanel({
   const busy = phase === "creating" || phase === "streaming";
   const scrollRef = useRef<HTMLDivElement>(null);
   const { atBottom, scrollToBottom } = useAutoScroll(scrollRef, [dialogues]);
+  const [revisionText, setRevisionText] = useState("");
+
+  const handleRevisionSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const text = revisionText.trim();
+    if (!text || busy) return;
+    setRevisionText("");
+    onRevisionSubmit(text);
+  };
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-slate-50/20">
@@ -549,6 +562,39 @@ function AgentProgressPanel({
           )}
         </div>
         {!atBottom && <ScrollToBottomButton onClick={scrollToBottom} />}
+        <form
+          onSubmit={handleRevisionSubmit}
+          className="shrink-0 border-t border-slate-100 bg-white px-3 py-3"
+        >
+          <div className="flex items-end gap-2 rounded-2xl border border-slate-200 bg-slate-50/70 px-3 py-2 focus-within:border-primary/60 focus-within:bg-white focus-within:ring-2 focus-within:ring-[var(--brand-200)]/40">
+            <textarea
+              value={revisionText}
+              onChange={(e) => setRevisionText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  e.currentTarget.form?.requestSubmit();
+                }
+              }}
+              disabled={busy}
+              rows={1}
+              placeholder="输入修改要求，例如：把右侧页面改成深色风格，并增加风险矩阵"
+              className="min-h-8 max-h-28 flex-1 resize-none bg-transparent py-1.5 text-xs leading-relaxed text-slate-800 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+            />
+            <button
+              type="submit"
+              disabled={busy || revisionText.trim().length === 0}
+              title={busy ? "正在绘制，请稍后发送" : "发送修改要求"}
+              className="mb-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-primary text-white transition hover:bg-[var(--brand-900)] disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {busy ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <SendHorizontal className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </form>
       </div>
     </div>
   );