diff --git a/src/renderer/src/components/CustomCollapse.tsx b/src/renderer/src/components/CustomCollapse.tsx index 804c0352..259e259d 100644 --- a/src/renderer/src/components/CustomCollapse.tsx +++ b/src/renderer/src/components/CustomCollapse.tsx @@ -1,4 +1,5 @@ import { Collapse } from 'antd' +import { merge } from 'lodash' import { FC, memo } from 'react' interface CustomCollapseProps { @@ -9,6 +10,11 @@ interface CustomCollapseProps { defaultActiveKey?: string[] activeKey?: string[] collapsible?: 'header' | 'icon' | 'disabled' + style?: React.CSSProperties + styles?: { + header?: React.CSSProperties + body?: React.CSSProperties + } } const CustomCollapse: FC = ({ @@ -18,14 +24,17 @@ const CustomCollapse: FC = ({ destroyInactivePanel = false, defaultActiveKey = ['1'], activeKey, - collapsible = undefined + collapsible = undefined, + style, + styles }) => { - const CollapseStyle = { + const defaultCollapseStyle = { width: '100%', background: 'transparent', border: '0.5px solid var(--color-border)' } - const CollapseItemStyles = { + + const defaultCollapseItemStyles = { header: { padding: '8px 16px', alignItems: 'center', @@ -38,17 +47,21 @@ const CustomCollapse: FC = ({ borderTop: '0.5px solid var(--color-border)' } } + + const collapseStyle = merge({}, defaultCollapseStyle, style) + const collapseItemStyles = merge({}, defaultCollapseItemStyles, styles) + return ( = ({ provider: _provider, resolve }) => { return ( = 5 ? [] : ['1']} + defaultActiveKey={['1']} + styles={{ body: { padding: '0 10px' } }} label={ {group} @@ -233,13 +234,15 @@ const PopupContainer: React.FC = ({ provider: _provider, resolve }) => { /> }> - + {modelGroups[group].map((model) => (