refactor(sidebar): simplify script recommend card layout
重构话术推荐卡片的样式与结构,移除冗余的STYLES样式映射,改用内联样式统一管理,合并状态标签与操作按钮布局,优化页面排版与代码可读性
This commit is contained in:
parent
5606a56777
commit
4e6e673402
@ -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) && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user