fix: multi-select问题默认使用modal而非drawer,改善checkbox间距

- DialogStyleContext: multi-select推荐样式从drawer改为modal
- A2UIPopupCard: DrawerPopup增加multi-select间距处理
- A2UICheckbox: 增大水平间距、行高和label-description间距
This commit is contained in:
catlog22
2026-02-17 20:24:58 +08:00
parent c67bf86244
commit c588aa69d2
3 changed files with 26 additions and 9 deletions

View File

@@ -810,6 +810,7 @@ function DrawerPopup({ surface, onClose, drawerSide, drawerSize }: StyleProps) {
[sendA2UIAction, surface.surfaceId, onClose]
);
const questionType = detectQuestionType(surface);
const bodyComponents = surface.components.filter(
(c) => !['title', 'message', 'description'].includes(c.id) && !isActionButton(c)
);
@@ -823,10 +824,26 @@ function DrawerPopup({ surface, onClose, drawerSide, drawerSize }: StyleProps) {
</DrawerHeader>
<div className="flex-1 overflow-y-auto">
{bodyComponents.length > 0 && (
<A2UIRenderer
surface={{ ...surface, components: bodyComponents }}
onAction={handleAction}
/>
<div className={cn(
'py-3',
questionType === 'multi-select' && 'space-y-3 px-1'
)}>
{questionType === 'multi-select' ? (
bodyComponents.map((comp) => (
<div key={comp.id} className="py-1">
<A2UIRenderer
surface={{ ...surface, components: [comp] }}
onAction={handleAction}
/>
</div>
))
) : (
<A2UIRenderer
surface={{ ...surface, components: bodyComponents }}
onAction={handleAction}
/>
)}
</div>
)}
</div>
{actionButtons.length > 0 && (

View File

@@ -61,7 +61,7 @@ export const DEFAULT_A2UI_PREFERENCES: A2UIPreferences = {
const STYLE_RECOMMENDATIONS: Record<string, DialogStyle> = {
confirm: 'modal',
select: 'modal',
'multi-select': 'drawer',
'multi-select': 'modal',
input: 'modal',
'multi-question': 'drawer',
form: 'drawer',

View File

@@ -50,20 +50,20 @@ export const A2UICheckbox: ComponentRenderer = ({ component, onAction, resolveBi
: '';
return (
<div className="flex items-start space-x-2">
<div className="flex items-start space-x-3 py-1">
<Checkbox
className="mt-0.5"
checked={checked}
onCheckedChange={handleChange}
/>
<div className="grid gap-0.5">
<div className="grid gap-1">
{labelText && (
<Label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
<Label className="text-sm font-medium leading-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{labelText}
</Label>
)}
{descriptionText && (
<p className="text-xs text-muted-foreground">{descriptionText}</p>
<p className="text-xs text-muted-foreground leading-relaxed">{descriptionText}</p>
)}
</div>
</div>