Aura
/
aura-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: avatar flickering and preview size

main
sp mac bookpro 2605 2026-06-01 16:27:26 +08:00
parent 284a151f44
commit 2a237e5ac9
3 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ChatPreview.tsx
View File

@ -128,14 +128,14 @@ export default function ChatPreview({ agent, agentId }: Props) {
} }
}; };
const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/'); const isImageUrl = (url: string | undefined) => url?.startsWith('http') || url?.startsWith('/');
return ( return (
<div className="flex flex-col h-full bg-gray-50 border-l"> <div className="flex flex-col h-full bg-gray-50 border-l">
<div className="p-4 border-b bg-white flex items-center gap-3"> <div className="p-4 border-b bg-white flex items-center gap-3">
<div <div
className="w-8 h-8 rounded-full text-white flex items-center justify-center font-bold overflow-hidden" className="rounded-full text-white flex items-center justify-center font-bold overflow-hidden"
style={{ background: agent.avatar || '#0891b2' }} style={{ width: 84, height: 84, background: agent.avatar || '#0891b2' }}
> >
{isImageUrl(agent.avatar) ? ( {isImageUrl(agent.avatar) ? (
<img src={agent.avatar} className="w-full h-full object-cover" alt="avatar" /> <img src={agent.avatar} className="w-full h-full object-cover" alt="avatar" />

25
src/pages/AgentEditor/components/CapabilitySettings.tsx
View File

@ -51,30 +51,19 @@ export default function CapabilitySettings({
<div className="agent-editor-intro" style={{ marginBottom: 18 }}> <div className="agent-editor-intro" style={{ marginBottom: 18 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
<div <div
className="avatar-container" className="rounded-full flex items-center justify-center text-3xl text-white font-bold shadow-xl relative transition-all duration-500 overflow-hidden ring-4 ring-white mx-auto"
style={{ style={{
width: 72, width: 88,
height: 72, height: 88,
borderRadius: '50%', background: isImageUrl(agent?.avatar) ? '#f3f4f6' : agent?.avatar,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 24,
color: 'white',
fontWeight: 'bold',
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
cursor: 'pointer',
overflow: 'hidden',
position: 'relative',
background: isImageUrl(agent?.avatar || selectedAvatar) ? '#f3f4f6' : agent?.avatar || selectedAvatar,
border: '3px solid rgba(255,255,255,0.92)', border: '3px solid rgba(255,255,255,0.92)',
}} }}
onClick={() => setAvatarSelectorOpen(true)} onClick={() => setAvatarSelectorOpen(true)}
> >
{isImageUrl(agent?.avatar || selectedAvatar) ? ( {isImageUrl(agent?.avatar) ? (
<img src={agent?.avatar || selectedAvatar} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="avatar" /> <img src={agent?.avatar} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="avatar" />
) : ( ) : (
(agentName?.charAt(0) || '?').toUpperCase() (agent?.name?.charAt(0) || agentName?.charAt(0) || '?').toUpperCase()
)} )}
<div className="avatar-overlay"> <div className="avatar-overlay">
<span className="avatar-overlay-text">更换形象</span> <span className="avatar-overlay-text">更换形象</span>

2
src/pages/AgentEditor/constants.ts
View File

@ -30,7 +30,7 @@ export const TYPE_TAG: Record<SkillType, { color: string; icon: string; label: s
js: { color: 'volcano', icon: '⚙️', label: 'JS' }, js: { color: 'volcano', icon: '⚙️', label: 'JS' },
}; };
export const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/'); export const isImageUrl = (url: string | undefined) => url?.startsWith('http') || url?.startsWith('/');
export const parseModelSelections = (value?: string | string[]) => export const parseModelSelections = (value?: string | string[]) =>
Array.isArray(value) Array.isArray(value)