From 97c2226f9d7a5cd5d7c25475993971b617ade0b8 Mon Sep 17 00:00:00 2001
From: xiamuceer <xiamuceer@gmail.com>
Date: Tue, 24 Mar 2026 10:57:01 +0800
Subject: [PATCH] =?UTF-8?q?sytle:=20=E4=BC=98=E5=8C=96=E5=A4=A7=E7=BA=B2?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E6=94=AF=E6=8C=81=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E5=A4=A7=E7=BA=B2=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Outline.tsx          | 59 ++++++++++++++++++++++---
 frontend/src/pages/ProjectWizardNew.tsx |  2 +-
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Outline.tsx b/frontend/src/pages/Outline.tsx
index d02e751..fb81b61 100644
--- a/frontend/src/pages/Outline.tsx
+++ b/frontend/src/pages/Outline.tsx
@@ -105,6 +105,17 @@ function parseOutlineStructure(structure?: string): OutlineStructureData {
   }
 }
 
+function getOutlinePreview(content: string, maxLength = 120): { text: string; truncated: boolean } {
+  const normalized = (content || '').replace(/\s+/g, ' ').trim();
+  if (normalized.length <= maxLength) {
+    return { text: normalized, truncated: false };
+  }
+  return {
+    text: `${normalized.slice(0, maxLength).trimEnd()}...`,
+    truncated: true
+  };
+}
+
 const { TextArea } = Input;
 
 export default function Outline() {
@@ -123,6 +134,9 @@ export default function Outline() {
   const alphaColor = (color: string, alpha: number) =>
     `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
 
+  // ✅ 新增：记录大纲卡片内容的展开/折叠状态（默认折叠）
+  const [outlineContentExpandStatus, setOutlineContentExpandStatus] = useState<Record<string, boolean>>({});
+
   // ✅ 新增：记录场景区域的展开/折叠状态
   const [scenesExpandStatus, setScenesExpandStatus] = useState<Record<string, boolean>>({});
 
@@ -1993,6 +2007,8 @@ export default function Outline() {
                   const characterEntries = parseCharacterEntries(structureData.characters);
                   const characterNames = getCharacterNames(characterEntries);
                   const organizationNames = getOrganizationNames(characterEntries);
+                  const isOutlineExpanded = outlineContentExpandStatus[item.id] || false;
+                  const previewContent = getOutlinePreview(item.content, isMobile ? 70 : 140);
                   
                   return (
                     <List.Item
@@ -2061,12 +2077,35 @@ export default function Outline() {
                                 lineHeight: '1.6'
                               }}>
                                 <div style={{
-                                  fontWeight: 600,
-                                  color: token.colorTextSecondary,
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  justifyContent: 'space-between',
+                                  gap: 8,
                                   marginBottom: isMobile ? 4 : 6,
-                                  fontSize: isMobile ? 12 : 13
+                                  flexWrap: isMobile ? 'wrap' : 'nowrap'
                                 }}>
-                                  📝 大纲内容
+                                  <div style={{
+                                    fontWeight: 600,
+                                    color: token.colorTextSecondary,
+                                    fontSize: isMobile ? 12 : 13
+                                  }}>
+                                    📝 大纲内容
+                                  </div>
+                                  <Button
+                                    type="link"
+                                    size="small"
+                                    onClick={() => setOutlineContentExpandStatus(prev => ({
+                                      ...prev,
+                                      [item.id]: !isOutlineExpanded
+                                    }))}
+                                    style={{
+                                      padding: 0,
+                                      height: 'auto',
+                                      fontSize: isMobile ? 12 : 13
+                                    }}
+                                  >
+                                    {isOutlineExpanded ? '收起' : '展开'}
+                                  </Button>
                                 </div>
                                 <div style={{
                                   padding: isMobile ? '6px 8px' : '6px 10px',
@@ -2075,12 +2114,16 @@ export default function Outline() {
                                   borderRadius: token.borderRadiusSM,
                                   fontSize: isMobile ? 12 : 13,
                                   color: token.colorText,
-                                  lineHeight: '1.6'
+                                  lineHeight: '1.8',
+                                  whiteSpace: isOutlineExpanded ? 'pre-wrap' : 'normal',
+                                  wordBreak: 'break-word'
                                 }}>
-                                  {item.content}
+                                  {isOutlineExpanded ? item.content : previewContent.text || '暂无内容'}
                                 </div>
                               </div>
-                              
+
+                              {isOutlineExpanded && (
+                                <>
                               {/* ✨ 涉及角色展示 - 优化版（支持角色/组织分类显示） */}
                               {characterNames.length > 0 && (
                                 <div style={{
@@ -2679,6 +2722,8 @@ export default function Outline() {
                                 </div>
                               </div>
                             )}
+                              </>
+                            )}
                           </div>
                         }
                       />
diff --git a/frontend/src/pages/ProjectWizardNew.tsx b/frontend/src/pages/ProjectWizardNew.tsx
index 3af6180..668b901 100644
--- a/frontend/src/pages/ProjectWizardNew.tsx
+++ b/frontend/src/pages/ProjectWizardNew.tsx
@@ -372,7 +372,7 @@ export default function ProjectWizardNew() {
       <div style={{
         maxWidth: 800,
         margin: '0 auto',
-        padding: isMobile ? '16px 12px' : '24px 24px',
+        padding: isMobile ? '8px 12px 12px' : '12px 20px 16px',
       }}>
         {currentStep === 'form' && renderForm()}
         {currentStep === 'generating' && generationConfig && (