diff --git a/packages/client/src/schemas/designable-bar/style.less b/packages/client/src/schemas/designable-bar/style.less index 7594628ba..cee7ebf55 100644 --- a/packages/client/src/schemas/designable-bar/style.less +++ b/packages/client/src/schemas/designable-bar/style.less @@ -81,3 +81,25 @@ background: none !important; border: 2px solid rgba(241, 139, 98, 0.3) !important; } + +.action-bar-align-right, +.action-bar-align-left { + position: relative; + &.isOver { + background-color: transparent !important; + .ant-space { + position: relative; + z-index: 2; + } + &::after { + content: ''; + background-color: rgba(241, 139, 98, 0.1) !important; + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + z-index: 1; + } + } +} diff --git a/packages/client/src/schemas/form/DesignableBar.tsx b/packages/client/src/schemas/form/DesignableBar.tsx index 4f3d7afc7..e054d28f6 100644 --- a/packages/client/src/schemas/form/DesignableBar.tsx +++ b/packages/client/src/schemas/form/DesignableBar.tsx @@ -26,14 +26,16 @@ import constate from 'constate'; import { useEffect } from 'react'; import { uid } from '@formily/shared'; import { getSchemaPath } from '../../components/schema-renderer'; -import { useCollection } from '../../constate'; +import { useCollection, useCollectionContext } from '../../constate'; +import { useTable } from '../table'; export const DesignableBar = observer((props) => { const field = useField(); const { designable, schema, refresh, deepRemove } = useDesignable(); const [visible, setVisible] = useState(false); const { dragRef } = useContext(DraggableBlockContext); - const collectionName = field.componentProps.collectionName; + const { props: tableProps } = useTable(); + const collectionName = field.componentProps?.collectionName || tableProps?.collectionName; const { collection } = useCollection({ collectionName }); return (
@@ -44,7 +46,7 @@ export const DesignableBar = observer((props) => { }} className={cls('designable-bar-actions', { active: visible })} > - + {dragRef && } { }, }); const description = values.description || null; - realField.description = description || collectionField?.uiSchema?.description; + realField.description = + description || collectionField?.uiSchema?.description; schema['description'] = description; await updateSchema({ key: schema['key'], diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx index a1e2ffaab..9bbbd77d1 100644 --- a/packages/client/src/schemas/table/index.tsx +++ b/packages/client/src/schemas/table/index.tsx @@ -1612,9 +1612,11 @@ Table.Operation.Cell = observer((props: any) => { }); Table.Operation.DesignableBar = (props) => { - const { schema, remove, refresh, appendChild } = useDesignable(props.path); + const { designable, schema, remove, refresh, appendChild } = useDesignable( + props.path, + ); const [visible, setVisible] = useState(false); - if (!schema?.parent?.parent['x-designable-bar']) { + if (!designable || !schema?.parent?.parent['x-designable-bar']) { return null; } console.log('Table.Operation.DesignableBar', schema?.parent?.parent); diff --git a/packages/client/src/schemas/tabs/index.tsx b/packages/client/src/schemas/tabs/index.tsx index 8e10b65e9..5e85fbf6b 100644 --- a/packages/client/src/schemas/tabs/index.tsx +++ b/packages/client/src/schemas/tabs/index.tsx @@ -1,6 +1,6 @@ import { observer, connect, useField, RecursionField } from '@formily/react'; import React from 'react'; -import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch } from 'antd'; +import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch, Space } from 'antd'; import { findPropertyByPath, getSchemaPath, @@ -104,7 +104,8 @@ export const Tabs: any = observer((props: any) => { {...others} className={cls({ singleton })} tabBarExtraContent={ - designable && schema['x-designable-bar'] && ( + designable && + schema['x-designable-bar'] && (
); @@ -265,74 +268,76 @@ Tabs.TabPane.DesignableBar = () => { }} className={cls('designable-bar-actions', { active: visible })} > - {' '} - { - setVisible(visible); - }} - overlay={ - - { - const values = await FormDialog('修改名称和图标', () => { - return ( - - + {' '} + { + setVisible(visible); + }} + overlay={ + + { + const values = await FormDialog('修改名称和图标', () => { + return ( + + - - ); - }).open({ - initialValues: { - title: schema['title'], - icon: schema['x-component-props']?.['icon'], - }, - }); - field.componentProps.icon = values.icon; - schema.title = values.title; - schema['x-component-props'] = - schema['x-component-props'] || {}; - schema['x-component-props']['icon'] = values.icon; - refresh(); - updateSchema(schema); - }} - > - 修改名称和图标 - - - { - const data = remove(); - await removeSchema(data); - setVisible(false); - }} - > - 移除 - - - } - > - - + }} + /> + + ); + }).open({ + initialValues: { + title: schema['title'], + icon: schema['x-component-props']?.['icon'], + }, + }); + field.componentProps.icon = values.icon; + schema.title = values.title; + schema['x-component-props'] = + schema['x-component-props'] || {}; + schema['x-component-props']['icon'] = values.icon; + refresh(); + updateSchema(schema); + }} + > + 修改名称和图标 + + + { + const data = remove(); + await removeSchema(data); + setVisible(false); + }} + > + 移除 + + + } + > + + + );