From 71e7b9dd632b56508b60e70ab9441b7a4b6507a1 Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Thu, 25 Jun 2026 19:54:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ai-writing/SkillStepsCard.tsx  | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
index 0faf8d74..78e01ddb 100644
--- a/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
+++ b/frontend-web/src/open-canvas/components/ai-writing/SkillStepsCard.tsx
@@ -33,9 +33,16 @@ const STEP_LABEL: Record<SkillSearchStep['type'], string> = {
 };
 
 export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
-  const [expanded, setExpanded] = useState(true);
+  // 默认收起：收起时只展示最新一条消息（类似聊天页的折叠态），需要细节再点开看全部步骤。
+  const [expanded, setExpanded] = useState(false);
   if (steps.length === 0 && !inProgress) return null;
 
+  // 收起态预览：最新一条步骤的文案（进行中且还没有步骤时给个准备提示）。
+  const latest = steps.length > 0 ? steps[steps.length - 1] : null;
+  const previewText = latest
+    ? latest.message || STEP_LABEL[latest.type] || latest.type
+    : '正在准备技能检索…';
+
   // 进行中的步骤：最后一条是 invoke_skill 且还没出对应的 skill_result，
   // 说明该技能的 web 检索正在 await 中——把它的序号徽标换成 spinner，
   // 让每次（可能数秒~数十秒的）检索等待都有"正在调用技能X检索中"的实时反馈。
@@ -68,6 +75,20 @@ export function SkillStepsCard({ steps, inProgress }: SkillStepsCardProps) {
         />
       </button>
 
+      {/* 收起态：只显示最新一条消息（单行），点击即可展开看全部步骤 */}
+      {!expanded && (
+        <button
+          type="button"
+          onClick={() => setExpanded(true)}
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-[11px] text-left border-t border-violet-200/60 dark:border-violet-900/30 hover:bg-violet-100/40 dark:hover:bg-violet-900/20 transition-colors"
+        >
+          {inProgress && <Loader2 className="size-3 animate-spin shrink-0 text-violet-500" />}
+          <span className="flex-1 min-w-0 truncate text-violet-700/90 dark:text-violet-300/90">
+            {previewText}
+          </span>
+        </button>
+      )}
+
       <CollapseTransition open={expanded}>
         <ol className="px-3 pb-2.5 pt-1 space-y-1.5 border-t border-violet-200/60 dark:border-violet-900/30">
           {steps.map((step, idx) => {