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

fix: avatar grid layout to 6 columns per row

main
sp mac bookpro 2605 2026-06-01 15:27:38 +08:00
parent 31759b92f9
commit 8d31644f80
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/AgentEditor/components/AvatarSelector.tsx
View File

@ -21,7 +21,7 @@ export default function AvatarSelector({
onAvatarChange, onAvatarChange,
}: AvatarSelectorProps) { }: AvatarSelectorProps) {
return ( return (
<Modal title="选择头像形象" open={open} onCancel={onCancel} footer={null} width={520} centered> <Modal title="选择头像形象" open={open} onCancel={onCancel} footer={null} width={600} centered>
<div className="py-4"> <div className="py-4">
<div className="flex items-center justify-between gap-3 mb-4"> <div className="flex items-center justify-between gap-3 mb-4">
<div className="text-[11px] font-bold text-gray-400 uppercase tracking-widest"> <div className="text-[11px] font-bold text-gray-400 uppercase tracking-widest">
@ -33,7 +33,7 @@ export default function AvatarSelector({
</Button> </Button>
</Upload> </Upload>
</div> </div>
<div className="grid grid-cols-5 gap-4 bg-gray-50 p-4 rounded-2xl max-h-[400px] overflow-y-auto monica-scrollbar"> <div className="bg-gray-50 p-4 rounded-2xl max-h-[400px] overflow-y-auto monica-scrollbar" style={{ width: '100%', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px' }}>
{[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => ( {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
<div <div
key={url} key={url}
@ -43,8 +43,8 @@ export default function AvatarSelector({
onCancel(); onCancel();
await onAvatarChange(); await onAvatarChange();
}} }}
className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 flex-shrink-0 ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`} className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 mx-auto ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
style={{ width: 80, height: 80, borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }} style={{ width: 80, height: 80, minWidth: 80, borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }}
> >
<img src={url} className="w-full h-full object-cover" alt="preset" /> <img src={url} className="w-full h-full object-cover" alt="preset" />
{agent?.avatar === url && ( {agent?.avatar === url && (

6
src/pages/AgentEditor/components/InitModal.tsx
View File

@ -202,13 +202,13 @@ export default function InitModal({
</Button> </Button>
</Upload> </Upload>
</div> </div>
<div className="grid grid-cols-6 gap-3 agent-editor-avatar-grid monica-scrollbar"> <div className="agent-editor-avatar-grid monica-scrollbar" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px' }}>
{[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => ( {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
<div <div
key={url} key={url}
onClick={() => setSelectedAvatar(url)} onClick={() => setSelectedAvatar(url)}
className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 flex-shrink-0 ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`} className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 mx-auto ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
style={{ width: 80, height: 80, borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }} style={{ width: 80, height: 80, minWidth: 80, borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
> >
<img src={url} className="w-full h-full object-cover" alt="preset" /> <img src={url} className="w-full h-full object-cover" alt="preset" />
{selectedAvatar === url && ( {selectedAvatar === url && (