fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 05:29:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: action panel icon missing when icon-only is enabled (#6773)

Browse Source
This commit is contained in:
Katherine 2025-04-25 15:05:26 +08:00 committed by GitHub
parent 757765228f
commit cf57be8fb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx
View File

@ -42,31 +42,35 @@ const useStyles = createStyles(({ token, css }) => ({
`, `,
})); }));
function Button() { function Button({ onlyIcon }) {
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const icon = fieldSchema['x-component-props']?.['icon']; const { icon, iconColor: backgroundColor } = fieldSchema['x-component-props'] || {};
const backgroundColor = fieldSchema['x-component-props']?.['iconColor'];
const { layout, ellipsis = true } = useContext(WorkbenchBlockContext); const { layout, ellipsis = true } = useContext(WorkbenchBlockContext);
const { styles, cx } = useStyles(); const { styles, cx } = useStyles();
const { t } = useTranslation(); const { t } = useTranslation();
const title = t(fieldSchema.title, { ns: NAMESPACE_UI_SCHEMA }); const title = t(fieldSchema.title, { ns: NAMESPACE_UI_SCHEMA });
return layout === WorkbenchLayout.Grid ? (
<div title={title} className={cx(styles.avatar)}> const shouldShowTitle = !onlyIcon;
<Avatar style={{ backgroundColor }} size={48} icon={<Icon type={icon} />} />
<div if (layout === WorkbenchLayout.Grid) {
className={cx(styles.title)} return (
style={{ <div title={title} className={cx(styles.avatar)}>
whiteSpace: ellipsis ? 'nowrap' : 'normal', <Avatar style={{ backgroundColor }} size={48} icon={<Icon type={icon} />} />
textOverflow: ellipsis ? 'ellipsis' : 'clip', <div
overflow: ellipsis ? 'hidden' : 'visible', className={cx(styles.title)}
}} style={{
> whiteSpace: ellipsis ? 'nowrap' : 'normal',
{title} textOverflow: ellipsis ? 'ellipsis' : 'clip',
overflow: ellipsis ? 'hidden' : 'visible',
}}
>
{shouldShowTitle && title}
</div>
</div> </div>
</div> );
) : ( }
<span>{title}</span>
); return <span>{shouldShowTitle && title}</span>;
} }
export const WorkbenchAction = withDynamicSchemaProps((props) => { export const WorkbenchAction = withDynamicSchemaProps((props) => {
@ -79,9 +83,10 @@ export const WorkbenchAction = withDynamicSchemaProps((props) => {
<Component <Component
className={cx(className, styles.action, 'nb-action-panel')} className={cx(className, styles.action, 'nb-action-panel')}
{...others} {...others}
onlyIcon={false}
type="text" type="text"
icon={null} icon={null}
title={<Button />} title={<Button onlyIcon={others?.onlyIcon} />}
confirmTitle={fieldSchema.title} confirmTitle={fieldSchema.title}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
/> />

1
packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx
View File

@ -85,6 +85,7 @@ const InternalIcons = () => {
key={key} key={key}
prefix={<Avatar style={{ backgroundColor }} icon={<Icon type={icon} />} />} prefix={<Avatar style={{ backgroundColor }} icon={<Icon type={icon} />} />}
onClick={() => {}} onClick={() => {}}
style={{ marginTop: '5px' }}
> >
<NocoBaseRecursionField name={key} schema={s} /> <NocoBaseRecursionField name={key} schema={s} />
</List.Item> </List.Item>