fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-01 18:52:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: style optimization to resolve misalignment of table column setting button

Browse Source
This commit is contained in:
katherinehhh 2025-01-20 11:42:27 +08:00
parent aadb52b74b
commit f617fcdc54
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx
View File

@ -12,6 +12,7 @@ import { observer } from '@formily/react';
import React from 'react';
import { SortableItem, useDesigner, useSchemaComponentContext } from '../..';
import { useFlag } from '../../../flag-provider/hooks/useFlag';
import { useToken } from '../__builtins__';
export const designerCss = ({ margin = '-18px -16px', padding = '18px 16px' } = {}) => css`
position: relative;
@ -57,6 +58,7 @@ export const TableColumnActionBar = observer(
const Designer = useDesigner();
const { isInSubTable } = useFlag() || {};
const { designable } = useSchemaComponentContext();
const { token } = useToken();
if (!designable || Designer.isNullComponent) {
return props.children;
@ -65,8 +67,8 @@ export const TableColumnActionBar = observer(
return (
<SortableItem
className={designerCss({
margin: isInSubTable ? '-12px -8px' : '-18px -16px',
padding: isInSubTable ? '12px 8px' : '12px 16px',
margin: `-${token.margin}px -${token.marginXS}px`,
padding: `${token.margin}px ${token.marginXS}px`,
})}
>
<Designer />

8
packages/core/client/src/schema-component/antd/table-v2/Table.Column.Decorator.tsx
View File

@ -19,6 +19,7 @@ import {
useFlag,
useSchemaComponentContext,
} from '../../../';
import { useToken } from '../__builtins__';
import { designerCss } from './Table.Column.ActionBar';
import { isCollectionFieldComponent } from './utils';
@ -75,6 +76,8 @@ export const TableColumnDecorator = (props) => {
const { designable } = useSchemaComponentContext();
const compile = useCompile();
const { isInSubTable } = useFlag() || {};
const { token } = useToken();
useLayoutEffect(() => {
if (field.title) {
return;
@ -98,11 +101,12 @@ export const TableColumnDecorator = (props) => {
</CollectionFieldContext.Provider>
);
}
return (
<SortableItem
className={designerCss({
margin: isInSubTable ? '-12px -8px' : '-18px -16px',
padding: isInSubTable ? '12px 8px' : '12px 16px',
margin: `-${token.margin}px -${token.marginXS}px`,
padding: `${token.margin}px ${token.marginXS}px`,
})}
>
<CollectionFieldContext.Provider value={collectionField}>