fix: fix hover style for sub table (#3623)

* Revert "style(TableColumn): fix style of mouse hover (#3597)"

This reverts commit 488616f7fe.

* fix: fix hover style for sub table

* fix: style

* Revert "fix: style"

This reverts commit 33901c4ff96458b17f0f68839f726f520370e622.

* fix: style

packages/core/client/src/css-variable/CSSVariableProvider.tsx

@@ -42,9 +42,6 @@ export const CSSVariableProvider = ({ children }) => {
     document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
     document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover);
     document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover);
-    document.body.style.setProperty('--margin', `${token.margin}px`);
-    document.body.style.setProperty('--padding', `${token.padding}px`);
-    document.body.style.setProperty('--paddingXXS', `${token.paddingXXS}px`);
 
     // 设置登录页面的背景色
     document.body.style.setProperty('background-color', token.colorBgContainer);
@@ -75,9 +72,6 @@ export const CSSVariableProvider = ({ children }) => {
     token.colorSettings,
     token.colorBgSettingsHover,
     token.colorBorderSettingsHover,
-    token.margin,
-    token.padding,
-    token.paddingXXS,
   ]);
 
   return children;

packages/core/client/src/global.less

@@ -33,9 +33,3 @@
 .rc-virtual-list-scrollbar-thumb:active {
   background: var(--colorBgScrollBarActive) !important;
 }
-
-// fix https://nocobase.height.app/T-3333/description
-.ant-table-column-has-sorters .nb-sortable-designer {
-  margin-right: calc(0px - var(--margin) - var(--margin));
-  padding-right: calc(var(--padding) + var(--padding));
-}

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

@@ -2,11 +2,12 @@ import { css } from '@emotion/css';
 import { observer } from '@formily/react';
 import React from 'react';
 import { SortableItem, useDesigner } from '../..';
+import { useFlag } from '../../../flag-provider/hooks/useFlag';
 
-export const designerCss = css`
+export const designerCss = ({ margin = '-18px -16px', padding = '18px 16px' } = {}) => css`
   position: relative;
-  margin: calc(0px - var(--margin)) calc(0px - var(--margin));
+  margin: ${margin};
-  padding: calc(var(--padding) + var(--paddingXXS)) var(--padding);
+  padding: ${padding};
 
   &:hover {
     > .general-schema-designer {
@@ -45,8 +46,14 @@ export const designerCss = css`
 export const TableColumnActionBar = observer(
   (props) => {
     const Designer = useDesigner();
+    const { isInSubTable } = useFlag() || {};
     return (
-      <SortableItem className={designerCss}>
+      <SortableItem
+        className={designerCss({
+          margin: isInSubTable ? '-12px -8px' : '-18px -16px',
+          padding: isInSubTable ? '12px 8px' : '18px 16px',
+        })}
+      >
         <Designer />
         {props.children}
       </SortableItem>

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

@@ -7,6 +7,7 @@ import {
   useCompile,
   useDesigner,
   CollectionFieldContext,
+  useFlag,
 } from '../../../';
 import { designerCss } from './Table.Column.ActionBar';
 import { isCollectionFieldComponent } from './utils';
@@ -35,6 +36,7 @@ export const TableColumnDecorator = (props) => {
   const field = useField();
   const { fieldSchema, uiSchema, collectionField } = useColumnSchema();
   const compile = useCompile();
+  const { isInSubTable } = useFlag() || {};
   useLayoutEffect(() => {
     if (field.title) {
       return;
@@ -47,7 +49,12 @@ export const TableColumnDecorator = (props) => {
     }
   }, [uiSchema?.title]);
   return (
-    <SortableItem className={designerCss}>
+    <SortableItem
+      className={designerCss({
+        margin: isInSubTable ? '-12px -8px' : '-18px -16px',
+        padding: isInSubTable ? '12px 8px' : '18px 16px',
+      })}
+    >
       <CollectionFieldContext.Provider value={collectionField}>
         <Designer fieldSchema={fieldSchema} uiSchema={uiSchema} collectionField={collectionField} />
         {/* <RecursionField name={columnSchema.name} schema={columnSchema}/> */}