From 2721da5d4cff2a26a74e28f93a365f7221498c9a Mon Sep 17 00:00:00 2001
From: QihuAI Design <ai@qihuyun.com>
Date: Thu, 23 Jul 2026 22:00:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=80=9D=E8=80=83=E8=BF=87=E7=A8=8B?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96=20=E2=80=94=20=E5=85=88?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E5=86=8D=E8=87=AA=E5=8A=A8=E6=94=B6=E6=8B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AiProcessBlock 改进:
- 超时从 2.6s 延至 6s，用户有充足时间阅读思考链路
- 新增 aiProcessPulse 脉冲高亮动画，强调'思考过程刚出炉'
- 展开时自动 scrollIntoView，确保不被正文遮挡
- 摘要文案改为'AI 思考 / 执行过程（N步 — 自动收拢中...）'

CSS 新增:
- .ai-process-fresh 脉冲动画 + summary 文字高亮
- @keyframes aiProcessPulse: 0→50%→100% 边框扩散+收拢
---
 frontend/src/pages/front/ChatPage.css | 24 ++++++++++++++++++++++++
 frontend/src/pages/front/ChatPage.tsx | 24 +++++++++++++++++++-----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/front/ChatPage.css b/frontend/src/pages/front/ChatPage.css
index 294e026..f8bc2fd 100644
--- a/frontend/src/pages/front/ChatPage.css
+++ b/frontend/src/pages/front/ChatPage.css
@@ -1574,6 +1574,30 @@ del {
   border-color: color-mix(in srgb, var(--color-accent, #5B5FED) 35%, transparent);
 }
 
+/* 新鲜出炉的思考面板 — 脉冲高亮动画 */
+.ai-process-fresh {
+  animation: aiProcessPulse 1.2s ease-out;
+}
+.ai-process-fresh .ai-process-summary {
+  color: var(--color-accent, #5B5FED);
+  font-weight: 700;
+}
+
+@keyframes aiProcessPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(91, 95, 237, 0.4);
+    border-color: var(--color-accent, #5B5FED);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(91, 95, 237, 0.08);
+    border-color: color-mix(in srgb, var(--color-accent, #5B5FED) 60%, transparent);
+  }
+  100% {
+    box-shadow: 0 6px 22px rgba(91, 95, 237, 0.10);
+    border-color: color-mix(in srgb, var(--color-accent, #5B5FED) 35%, transparent);
+  }
+}
+
 .ai-process-summary {
   list-style: none;
   cursor: pointer;
diff --git a/frontend/src/pages/front/ChatPage.tsx b/frontend/src/pages/front/ChatPage.tsx
index 4abef3e..2da97c3 100644
--- a/frontend/src/pages/front/ChatPage.tsx
+++ b/frontend/src/pages/front/ChatPage.tsx
@@ -478,22 +478,35 @@ const Dropdown: React.FC<DropdownProps> = ({ trigger, children, className = '',
 
 // ===== AI 思考 / 执行过程面板（顶部展开 + 自动收拢） =====
 // autoExpand=true 时（本轮刚产生的助手消息）首屏展开呈现思考链路，
-// 2.6s 后若用户未手动干预则自动收拢为一行摘要，避免与回复内容冲突。
+// 6s 后若用户未手动干预则自动收拢为一行摘要，避免与回复内容冲突。
+// 展开时自动滚动到视图内，带脉冲动画提示用户注意。
 const AiProcessBlock: React.FC<{ steps: any[]; autoExpand: boolean }> = ({ steps, autoExpand }) => {
   const [open, setOpen] = useState(autoExpand);
+  const [fresh, setFresh] = useState(autoExpand);
   const timerRef = useRef<number | null>(null);
   const touchedRef = useRef(false);
+  const blockRef = useRef<HTMLDetailsElement>(null);
 
   useEffect(() => {
     if (!autoExpand) {
       setOpen(false);
+      setFresh(false);
       return;
     }
     setOpen(true);
+    setFresh(true);
     touchedRef.current = false;
+    // 自动滚动到视图内（上方留 60px 避免被顶部遮挡）
+    if (blockRef.current) {
+      blockRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
     timerRef.current = window.setTimeout(() => {
-      if (!touchedRef.current) setOpen(false);
-    }, 2600);
+      if (!touchedRef.current) {
+        setOpen(false);
+        // 收拢后短暂保留 fresh 样式再移除
+        setTimeout(() => setFresh(false), 500);
+      }
+    }, 6000);
     return () => {
       if (timerRef.current) window.clearTimeout(timerRef.current);
     };
@@ -503,6 +516,7 @@ const AiProcessBlock: React.FC<{ steps: any[]; autoExpand: boolean }> = ({ steps
 
   const toggle = () => {
     touchedRef.current = true;
+    setFresh(false);
     if (timerRef.current) {
       window.clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -511,10 +525,10 @@ const AiProcessBlock: React.FC<{ steps: any[]; autoExpand: boolean }> = ({ steps
   };
 
   return (
-    <details className="ai-process" open={open}>
+    <details ref={blockRef} className={`ai-process${open ? '' : ''}${fresh ? ' ai-process-fresh' : ''}`} open={open}>
       <summary className="ai-process-summary" onClick={(e) => { e.preventDefault(); toggle(); }}>
         <span className="ai-process-badge">🧠</span>
-        思考 / 执行过程（{steps.length} 步，{open ? '点击收起' : '点击展开'}）
+        AI 思考 / 执行过程（{steps.length} 步 — {open ? '自动收拢中... 点击手动收起' : '点击展开查看'}）
       </summary>
       <div className="ai-process-list">
         {steps.map((s: any, i: number) => (