fix: update parent child style

This commit is contained in:
NFish
2024-12-18 11:46:41 +08:00
parent 330cfaf6d6
commit 4e6db1f4fb
6 changed files with 69 additions and 57 deletions

View File

@ -24,30 +24,29 @@ type Props = {
const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1, min = 0, max, value, enable, onChange, hasSwitch, onSwitchChange }) => {
return (
<div className={className}>
<div className="flex items-center h-8 justify-between">
<div className="flex items-center justify-between">
<div className="flex items-center">
{hasSwitch && (
<Switch
size='md'
className='mr-2'
defaultValue={enable}
onChange={async (val) => {
onSwitchChange?.(id, val)
}}
/>
)}
<span className="mx-1 text-text-secondary text-[13px] leading-[18px] font-medium">{name}</span>
<span className="mr-1 text-text-secondary system-sm-semibold">{name}</span>
{!noTooltip && (
<Tooltip
triggerClassName='w-4 h-4 shrink-0'
popupContent={<div className="w-[200px]">{tip}</div>}
/>
)}
</div>
<div className="flex items-center"></div>
</div>
<div className="mt-2 flex items-center">
<div className="mr-4 flex shrink-0 items-center">
<div className="mt-1 flex items-center">
<div className="mr-3 flex shrink-0 items-center">
<InputNumber
disabled={!enable}
type="number"
@ -62,7 +61,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
className='w-[72px]'
/>
</div>
<div className="flex items-center h-7 grow">
<div className="flex items-center grow">
<Slider
className='w-full'
disabled={!enable}

View File

@ -31,21 +31,21 @@ const RadioCard: FC<Props> = ({
return (
<div
className={cn(
'border border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl hover:shadow-xs cursor-pointer',
isChosen && 'bg-components-option-card-option-selected-bg border-components-panel-border shadow-xs',
'relative p-3 border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl cursor-pointer',
isChosen && 'border-[1.5px] bg-components-option-card-option-selected-bg',
className,
)}
>
<div className='flex py-3 pl-3 pr-4' onClick={onChosen}>
<div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}>
<div className='flex gap-x-2' onClick={onChosen}>
<div className={cn(iconBgClassName, 'shrink-0 flex size-8 justify-center items-center rounded-lg shadow-md')}>
{icon}
</div>
<div className='grow'>
<div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
<div className='system-sm-semibold text-text-secondary mb-1'>{title}</div>
<div className='system-sm-regular text-text-tertiary'>{description}</div>
</div>
{!noRadio && (
<div className='shrink-0 flex items-center h-8'>
<div className='absolute top-3 right-3'>
<div className={cn(
'w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
isChosen && 'border-[5px] border-components-radio-border-checked',
@ -54,8 +54,11 @@ const RadioCard: FC<Props> = ({
)}
</div>
{((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'p-3')}>
{chosenConfig}
<div className='flex gap-x-2 mt-2'>
<div className='size-8 shrink-0'></div>
<div className={cn(chosenConfigWrapClassName, 'grow')}>
{chosenConfig}
</div>
</div>
)}
</div>