fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-02 03:02:19 +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 React from 'react';
import { SortableItem, useDesigner, useSchemaComponentContext } from '../..'; import { SortableItem, useDesigner, useSchemaComponentContext } from '../..';
import { useFlag } from '../../../flag-provider/hooks/useFlag'; import { useFlag } from '../../../flag-provider/hooks/useFlag';
import { useToken } from '../__builtins__';
export const designerCss = ({ margin = '-18px -16px', padding = '18px 16px' } = {}) => css` export const designerCss = ({ margin = '-18px -16px', padding = '18px 16px' } = {}) => css`
position: relative; position: relative;
@ -57,6 +58,7 @@ export const TableColumnActionBar = observer(
const Designer = useDesigner(); const Designer = useDesigner();
const { isInSubTable } = useFlag() || {}; const { isInSubTable } = useFlag() || {};
const { designable } = useSchemaComponentContext(); const { designable } = useSchemaComponentContext();
const { token } = useToken();
if (!designable || Designer.isNullComponent) { if (!designable || Designer.isNullComponent) {
return props.children; return props.children;
@ -65,8 +67,8 @@ export const TableColumnActionBar = observer(
return ( return (
<SortableItem <SortableItem
className={designerCss({ className={designerCss({
margin: isInSubTable ? '-12px -8px' : '-18px -16px', margin: `-${token.margin}px -${token.marginXS}px`,
padding: isInSubTable ? '12px 8px' : '12px 16px', padding: `${token.margin}px ${token.marginXS}px`,
})} })}
> >
<Designer /> <Designer />

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

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