From 4e6e6734029c5505e60c693ec36b18060eb9c207 Mon Sep 17 00:00:00 2001
From: jiao <jiao@gmail.com>
Date: Thu, 11 Jun 2026 14:10:23 +0800
Subject: [PATCH] refactor(sidebar): simplify script recommend card layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构话术推荐卡片的样式与结构，移除冗余的STYLES样式映射，改用内联样式统一管理，合并状态标签与操作按钮布局，优化页面排版与代码可读性
---
 .../src/components/ScriptRecommendStream.tsx  | 54 ++++++++-----------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/frontend/sidebar/src/components/ScriptRecommendStream.tsx b/frontend/sidebar/src/components/ScriptRecommendStream.tsx
index 8b9f5ab..8a297af 100644
--- a/frontend/sidebar/src/components/ScriptRecommendStream.tsx
+++ b/frontend/sidebar/src/components/ScriptRecommendStream.tsx
@@ -299,29 +299,11 @@ export default function ScriptRecommendStream({ userInfo, customerId: propCustom
 
       {/* 三条话术卡片 */}
       {utterances.map((item, index) => {
-        const style = STYLES[index]
         return (
-          <div key={style.id} style={{
+          <div key={index} style={{
             background: '#fff', borderRadius: 12, padding: '14px 16px',
-            marginBottom: 12, boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
-            borderLeft: `4px solid ${style.color}`
+            marginBottom: 12, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'
           }}>
-            {/* 风格标签 */}
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
-              <span style={{
-                display: 'inline-flex', alignItems: 'center', gap: 4,
-                background: style.bgColor, color: style.color,
-                fontSize: 12, fontWeight: 600, padding: '3px 10px', borderRadius: 10
-              }}>{style.name}</span>
-              <span style={{ fontSize: 11, color: '#999' }}>{style.desc}</span>
-              {item.isTyping && (
-                <span style={{ fontSize: 11, color: '#1677ff', marginLeft: 'auto' }}>生成中...</span>
-              )}
-              {item.isComplete && (
-                <span style={{ fontSize: 11, color: '#52c41a', marginLeft: 'auto' }}>✓ 已完成</span>
-              )}
-            </div>
-
             {/* 话术内容 */}
             <div style={{ fontSize: 14, lineHeight: 1.7, color: '#333', minHeight: 40, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
               {item.text}
@@ -331,20 +313,30 @@ export default function ScriptRecommendStream({ userInfo, customerId: propCustom
               )}
             </div>
 
-            {/* 操作按钮 */}
-            {item.isComplete && (
-              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
-                <Button color='primary' size='small' onClick={() => handleSend(item.text)} style={{ flex: 1 }}>
-                  一键发送
-                </Button>
-                <Button size='small' fill='outline' onClick={() => handleCopy(item.text)}>
-                  复制
-                </Button>
+            {/* 状态 + 操作按钮 */}
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
+              <div>
+                {item.isTyping && (
+                  <span style={{ fontSize: 11, color: '#1677ff' }}>生成中...</span>
+                )}
+                {item.isComplete && (
+                  <span style={{ fontSize: 11, color: '#52c41a' }}>✓ 已完成</span>
+                )}
               </div>
-            )}
+              {item.isComplete && (
+                <div style={{ display: 'flex', gap: 8 }}>
+                  <Button color='primary' size='small' onClick={() => handleSend(item.text)}>
+                    一键发送
+                  </Button>
+                  <Button size='small' fill='outline' onClick={() => handleCopy(item.text)}>
+                    复制
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
         )
-      })}
+      })}\
 
       {/* 重新生成 */}
       {!generating && utterances.some(u => u.isComplete) && (