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) => {
|
{utterances.map((item, index) => {
|
||||||
const style = STYLES[index]
|
|
||||||
return (
|
return (
|
||||||
<div key={style.id} style={{
|
<div key={index} style={{
|
||||||
background: '#fff', borderRadius: 12, padding: '14px 16px',
|
background: '#fff', borderRadius: 12, padding: '14px 16px',
|
||||||
marginBottom: 12, boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
|
marginBottom: 12, boxShadow: '0 1px 4px rgba(0,0,0,0.06)'
|
||||||
borderLeft: `4px solid ${style.color}`
|
|
||||||
}}>
|
}}>
|
||||||
{/* 风格标签 */}
|
|
||||||
<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' }}>
|
<div style={{ fontSize: 14, lineHeight: 1.7, color: '#333', minHeight: 40, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
|
||||||
{item.text}
|
{item.text}
|
||||||
@ -331,20 +313,30 @@ export default function ScriptRecommendStream({ userInfo, customerId: propCustom
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 操作按钮 */}
|
{/* 状态 + 操作按钮 */}
|
||||||
{item.isComplete && (
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
|
||||||
<div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
|
<div>
|
||||||
<Button color='primary' size='small' onClick={() => handleSend(item.text)} style={{ flex: 1 }}>
|
{item.isTyping && (
|
||||||
一键发送
|
<span style={{ fontSize: 11, color: '#1677ff' }}>生成中...</span>
|
||||||
</Button>
|
)}
|
||||||
<Button size='small' fill='outline' onClick={() => handleCopy(item.text)}>
|
{item.isComplete && (
|
||||||
复制
|
<span style={{ fontSize: 11, color: '#52c41a' }}>✓ 已完成</span>
|
||||||
</Button>
|
)}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}\
|
||||||
|
|
||||||
{/* 重新生成 */}
|
{/* 重新生成 */}
|
||||||
{!generating && utterances.some(u => u.isComplete) && (
|
{!generating && utterances.some(u => u.isComplete) && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user