feat(Theme): add some tokens (#4137)

* chore: use token better

* chore: use rgba

* feat: add some custom tokens

* Revert "chore: use rgba"

This reverts commit dac660f6936ab795d52561ce79d0e6a7a721cc71.

* feat: adaptor tokens

* chore: adjust details

* chore: fix unit tests

* chore: remove box shadow from buttons in the upper right corner of the page

* fix: font size

packages/core/client/src/application/schema-initializer/withInitializer.tsx

@@ -65,6 +65,9 @@ export function withInitializer<T>(C: ComponentType<T>) {
             .ant-menu-submenu-title {
               margin-block: 0;
             }
+            .ant-popover-inner-content {
+              padding: 0;
+            }
           }
         `;
       }, [token.paddingXXS]);

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

@@ -1,5 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { defaultTheme } from '../global-theme';
 import { useToken } from '../style';
 
@@ -14,11 +14,6 @@ export const CSSVariableProvider = ({ children }) => {
     .onBackground(token.colorFill)
     .toHexShortString();
 
-  const colorBgDrawer = useMemo(() => {
-    const colorBgElevated = new TinyColor(token.colorBgElevated);
-    return colorBgElevated.isDark() ? token.colorBgElevated : colorBgElevated.darken(4).toHexString();
-  }, [token.colorBgElevated]);
-
   useEffect(() => {
     document.body.style.setProperty('--nb-spacing', `${token.marginLG}px`);
     document.body.style.setProperty('--nb-designer-offset', `${token.marginXS}px`);
@@ -40,7 +35,6 @@ export const CSSVariableProvider = ({ children }) => {
     document.body.style.setProperty('--colorBgScrollBar', colorBgScrollBar);
     document.body.style.setProperty('--colorBgScrollBarHover', colorBgScrollBarHover);
     document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive);
-    document.body.style.setProperty('--colorBgDrawer', colorBgDrawer);
     document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
     document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover);
     document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover);
@@ -48,32 +42,29 @@ export const CSSVariableProvider = ({ children }) => {
     // 设置登录页面的背景色
     document.body.style.setProperty('background-color', token.colorBgContainer);
   }, [
-    token.marginLG,
+    colorBgScrollBar,
+    colorBgScrollBarActive,
+    colorBgScrollBarHover,
+    colorBgScrollTrack,
+    token.colorBgContainer,
     token.colorBgLayout,
-    token.sizeXXL,
+    token.colorBgSettingsHover,
-    token.marginXS,
+    token.colorBorderSettingsHover,
-    token.controlHeightLG,
-    token.paddingContentVerticalSM,
-    token.marginSM,
     token.colorInfoBg,
     token.colorInfoBorder,
-    token.colorText,
-    token.colorBgContainer,
-    token.colorFillQuaternary,
-    token.colorFillSecondary,
-    token.colorFill,
-    token.colorFillTertiary,
-    colorBgScrollTrack,
-    colorBgScrollBar,
-    colorBgScrollBarHover,
-    colorBgScrollBarActive,
-    colorBgDrawer,
     token.colorPrimaryText,
     token.colorPrimaryTextActive,
     token.colorPrimaryTextHover,
     token.colorSettings,
-    token.colorBgSettingsHover,
+    token.colorText,
-    token.colorBorderSettingsHover,
+    token.colorWarningBg,
+    token.colorWarningBorder,
+    token.controlHeightLG,
+    token.marginLG,
+    token.marginSM,
+    token.marginXS,
+    token.paddingContentVerticalSM,
+    token.sizeXXL,
   ]);
 
   return children;

packages/core/client/src/global-theme/customAlgorithm.ts

@@ -0,0 +1,42 @@
+import { MappingAlgorithm, theme } from 'antd';
+import { ThemeConfig } from './type';
+
+/**
+ * 该算法用于计算自定义的一些 token
+ */
+export const customAlgorithm: MappingAlgorithm = (designToken, derivativeToken) => {
+  const result: ThemeConfig['token'] = derivativeToken || theme.defaultAlgorithm(designToken);
+
+  if (result.paddingPageHorizontal === undefined) {
+    result.paddingPageHorizontal = result.sizeLG;
+  }
+  if (result.paddingPageVertical === undefined) {
+    result.paddingPageVertical = result.sizeLG;
+  }
+  if (result.paddingPopupHorizontal === undefined) {
+    result.paddingPopupHorizontal = result.sizeLG;
+  }
+  if (result.paddingPopupVertical === undefined) {
+    result.paddingPopupVertical = result.size;
+  }
+  if (result.marginBlock === undefined) {
+    result.marginBlock = result.sizeLG;
+  }
+  if (result.borderRadiusBlock === undefined) {
+    result.borderRadiusBlock = result.borderRadiusLG;
+  }
+
+  return result as any;
+};
+
+export const addCustomAlgorithmToTheme = (theme: ThemeConfig) => {
+  if (Array.isArray(theme.algorithm)) {
+    if (!theme.algorithm.includes(customAlgorithm)) {
+      theme.algorithm.push(customAlgorithm);
+    }
+  } else {
+    theme.algorithm = [theme.algorithm, customAlgorithm].filter(Boolean);
+  }
+  theme.algorithm = theme.algorithm.filter(Boolean);
+  return theme;
+};

packages/core/client/src/global-theme/defaultTheme.ts

@@ -16,6 +16,8 @@ const defaultTheme: ThemeConfig = {
     colorSettings: '#F18B62',
     colorBgSettingsHover: 'rgba(241, 139, 98, 0.06)',
     colorBorderSettingsHover: 'rgba(241, 139, 98, 0.3)',
+
+    // 动画相关
     motionUnit: 0.03,
     motion: !process.env.__E2E__,
   },

packages/core/client/src/global-theme/index.tsx

@@ -2,6 +2,7 @@ import { ConfigProvider, theme as antdTheme } from 'antd';
 import _ from 'lodash';
 import React, { createContext, useCallback, useMemo, useRef } from 'react';
 import compatOldTheme from './compatOldTheme';
+import { addCustomAlgorithmToTheme } from './customAlgorithm';
 import defaultTheme from './defaultTheme';
 import { ThemeConfig } from './type';
 
@@ -62,7 +63,7 @@ export const GlobalThemeProvider = ({ children, theme: themeFromProps }) => {
 
   const value = useMemo(() => {
     return {
-      theme,
+      theme: addCustomAlgorithmToTheme(theme),
       setTheme,
       setCurrentSettingTheme,
       getCurrentSettingTheme,
@@ -81,7 +82,7 @@ export const GlobalThemeProvider = ({ children, theme: themeFromProps }) => {
 
   return (
     <GlobalThemeContext.Provider value={value}>
-      <ConfigProvider theme={compatOldTheme(theme)}>{children}</ConfigProvider>
+      <ConfigProvider theme={compatOldTheme(value.theme)}>{children}</ConfigProvider>
     </GlobalThemeContext.Provider>
   );
 };

packages/core/client/src/global-theme/type.ts

@@ -23,6 +23,21 @@ export interface CustomToken extends AliasToken {
   colorBgSettingsHover: string;
   /** 鼠标悬浮时显示的边框色 */
   colorBorderSettingsHover: string;
+
+  /** 页面左右内边距 */
+  paddingPageHorizontal: number;
+  /** 页面上下内边距 */
+  paddingPageVertical: number;
+
+  /** 弹窗左右内边距 */
+  paddingPopupHorizontal: number;
+  /** 弹窗上下内边距 */
+  paddingPopupVertical: number;
+
+  /** 区块之间的间隔 */
+  marginBlock: number;
+  /** 区块的圆角 */
+  borderRadiusBlock: number;
 }
 
 export interface ThemeConfig extends _ThemeConfig {

packages/core/client/src/plugin-manager/PinnedPluginListProvider.tsx

@@ -36,6 +36,10 @@ export const PinnedPluginList = () => {
             background: rgba(255, 255, 255, 0.1) !important;
           }
         }
+
+        .ant-btn-default {
+          box-shadow: none;
+        }
       `}
       style={{ display: 'inline-block' }}
     >

packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts

@@ -9,14 +9,14 @@ export const useStyles = genStyleHook('nb-action-drawer', (token) => {
       '&.reset': {
         '&.nb-action-popup': {
           '.ant-drawer-header': { display: 'none' },
-          '.ant-drawer-body': { paddingTop: token.paddingContentVerticalLG, backgroundColor: 'var(--colorBgDrawer)' },
+          '.ant-drawer-body': { paddingTop: token.paddingContentVerticalLG, backgroundColor: token.colorBgLayout },
         },
         '&.nb-record-picker-selector': {
           '.ant-drawer-wrapper-body': {
-            backgroundColor: 'var(--colorBgDrawer)',
+            backgroundColor: token.colorBgLayout,
           },
           '.nb-block-item': {
-            marginBottom: token.marginLG,
+            marginBottom: token.marginBlock,
             '.general-schema-designer': {
               top: -token.sizeXS,
               bottom: -token.sizeXS,
@@ -35,7 +35,20 @@ export const useStyles = genStyleHook('nb-action-drawer', (token) => {
       },
 
       '.ant-drawer-content-wrapper': {
-        borderLeft: `1px solid ${token.colorBorder}`,
+        borderLeft: `1px solid rgba(255, 255, 255, 0.1)`,
+      },
+
+      // 这里的样式是为了保证页面 tabs 标签下面的分割线和页面内容对齐（页面内边距可以通过主题编辑器调节）
+      '.ant-tabs-nav': {
+        paddingLeft: token.paddingLG - token.paddingPageHorizontal,
+        paddingRight: token.paddingLG - token.paddingPageHorizontal,
+        marginLeft: token.paddingPageHorizontal - token.paddingLG,
+        marginRight: token.paddingPageHorizontal - token.paddingLG,
+      },
+
+      '.ant-tabs-content-holder': {
+        padding: `${token.paddingPopupVertical}px ${token.paddingPopupHorizontal}px`,
+        margin: `-${token.size}px -${token.paddingLG}px -${token.paddingLG}px`,
       },
     },
   };

packages/core/client/src/schema-component/antd/action/Action.Modal.tsx

@@ -4,6 +4,7 @@ import { Modal, ModalProps } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { OpenSize, useActionContext } from '.';
+import { useToken } from '../../../style';
 import { useSetAriaLabelForModal } from './hooks/useSetAriaLabelForModal';
 import { ComposedActionDrawer } from './types';
 
@@ -19,13 +20,14 @@ export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
     const actualWidth = width ?? openSizeWidthMap.get(openSize);
     const schema = useFieldSchema();
     const field = useField();
+    const { token } = useToken();
     const footerSchema = schema.reduceProperties((buf, s) => {
       if (s['x-component'] === footerNodeName) {
         return s;
       }
       return buf;
     });
-
+    const showFooter = !!footerSchema;
     if (process.env.__E2E__) {
       useSetAriaLabelForModal(visible);
     }
@@ -54,12 +56,30 @@ export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
 
               .ant-modal-content {
                 background: var(--nb-box-bg);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+              }
+
+              // 这里的样式是为了保证页面 tabs 标签下面的分割线和页面内容对齐（页面内边距可以通过主题编辑器调节）
+              .ant-tabs-nav {
+                padding-left: ${token.paddingLG - token.paddingPageHorizontal}px;
+                padding-right: ${token.paddingLG - token.paddingPageHorizontal}px;
+                margin-left: ${token.paddingPageHorizontal - token.paddingLG}px;
+                margin-right: ${token.paddingPageHorizontal - token.paddingLG}px;
+              }
+
+              .ant-tabs-content-holder {
+                padding: ${token.paddingPopupVertical}px ${token.paddingPopupHorizontal}px;
+                margin: -${token.size}px -${token.paddingLG}px -${token.paddingLG}px;
+              }
+
+              .ant-modal-footer {
+                display: ${showFooter ? 'block' : 'none'};
               }
             }
           `,
         )}
         footer={
-          footerSchema ? (
+          showFooter ? (
             <RecursionField
               basePath={field.address}
               schema={schema}

packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx

@@ -1,13 +1,14 @@
-import { css } from '@emotion/css';
+import { useFieldSchema } from '@formily/react';
 import cls from 'classnames';
 import React, { useMemo } from 'react';
+import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
+import { CustomCreateStylesUtils, createStyles } from '../../../style';
 import { SortableItem } from '../../common';
 import { useDesigner, useProps } from '../../hooks';
 import { useGetAriaLabelOfBlockItem } from './hooks/useGetAriaLabelOfBlockItem';
-import { useFieldSchema } from '@formily/react';
-import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 
-const blockItemCss = css`
+const useStyles = createStyles(({ css, token }: CustomCreateStylesUtils) => {
+  return css`
     position: relative;
     &:hover {
       > .general-schema-designer {
@@ -50,12 +51,18 @@ const blockItemCss = css`
         }
       }
     }
-`;
+
+    .ant-card {
+      border-radius: ${token.borderRadiusBlock};
+    }
+  `;
+});
 
 export const BlockItem: React.FC<any> = withDynamicSchemaProps(
   (props) => {
     // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
     const { className, children } = useProps(props);
+    const { styles: blockItemCss } = useStyles();
 
     const Designer = useDesigner();
     const fieldSchema = useFieldSchema();

packages/core/client/src/schema-component/antd/block-item/BlockItemCard.tsx

@@ -1,11 +1,12 @@
+import { Card, CardProps } from 'antd';
 import React from 'react';
-import { Card, CardProps, theme } from 'antd';
+import { useToken } from '../../../style';
 
 export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps>(({ children, ...props }, ref) => {
-  const { token } = theme.useToken();
+  const { token } = useToken();
 
   return (
-    <Card ref={ref} bordered={false} style={{ marginBottom: token.marginLG }} {...props}>
+    <Card ref={ref} bordered={false} style={{ marginBottom: token.marginBlock }} {...props}>
       {children}
     </Card>
   );

packages/core/client/src/schema-component/antd/card-item/style.ts

@@ -5,7 +5,7 @@ const useStyles = genStyleHook('nb-card-item', (token) => {
 
   return {
     [componentCls]: {
-      marginBottom: token.marginLG,
+      marginBottom: token.marginBlock,
     },
   };
 });

packages/core/client/src/schema-component/antd/collection-select/__tests__/collection-select.test.tsx

@@ -36,16 +36,16 @@ describe('CollectionSelect', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div
             aria-label="block-item-demo title"
-            class="nb-sortable-designer nb-block-item nb-form-item css-1hvilub"
+            class="nb-sortable-designer nb-block-item nb-form-item acss-gw2dva"
             role="button"
           >
             <div
-              class="css-1nrq807 ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-1mw46su"
+              class="css-1nrq807 ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-wwtqkl"
             >
               <div
                 class="ant-formily-item-label"
@@ -75,7 +75,7 @@ describe('CollectionSelect', () => {
                     class="ant-formily-item-control-content-component"
                   >
                     <div
-                      class="ant-select css-dev-only-do-not-override-1mw46su ant-select-focused ant-select-single ant-select-show-arrow ant-select-show-search"
+                      class="ant-select css-dev-only-do-not-override-wwtqkl ant-select-focused ant-select-single ant-select-show-arrow ant-select-show-search"
                       data-testid="select-collection"
                       role="button"
                     >
@@ -173,16 +173,16 @@ describe('CollectionSelect', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div
             aria-label="block-item-demo title"
-            class="nb-sortable-designer nb-block-item nb-form-item css-1hvilub"
+            class="nb-sortable-designer nb-block-item nb-form-item acss-gw2dva"
             role="button"
           >
             <div
-              class="css-1nrq807 ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-1mw46su"
+              class="css-1nrq807 ant-formily-item ant-formily-item-layout-horizontal ant-formily-item-feedback-layout-loose ant-formily-item-label-align-right ant-formily-item-control-align-left css-dev-only-do-not-override-wwtqkl"
             >
               <div
                 class="ant-formily-item-label"
@@ -213,7 +213,7 @@ describe('CollectionSelect', () => {
                   >
                     <div>
                       <span
-                        class="ant-tag css-dev-only-do-not-override-1mw46su"
+                        class="ant-tag css-dev-only-do-not-override-wwtqkl"
                       >
                         Users
                       </span>

packages/core/client/src/schema-component/antd/color-picker/__tests__/ColorPicker.test.tsx

@@ -17,7 +17,7 @@ describe('ColorPicker', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div
@@ -26,7 +26,7 @@ describe('ColorPicker', () => {
             style="display: inline-block;"
           >
             <div
-              class="ant-color-picker-trigger css-dev-only-do-not-override-1mw46su"
+              class="ant-color-picker-trigger css-dev-only-do-not-override-wwtqkl"
             >
               <div
                 class="ant-color-picker-color-block"
@@ -81,7 +81,7 @@ describe('ColorPicker', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div
@@ -90,7 +90,7 @@ describe('ColorPicker', () => {
             role="button"
           >
             <div
-              class="ant-color-picker-trigger ant-color-picker-sm css-dev-only-do-not-override-1mw46su ant-color-picker-trigger-disabled"
+              class="ant-color-picker-trigger ant-color-picker-sm css-dev-only-do-not-override-wwtqkl ant-color-picker-trigger-disabled"
             >
               <div
                 class="ant-color-picker-color-block"

packages/core/client/src/schema-component/antd/grid/Grid.style.ts

@@ -7,7 +7,7 @@ const useStyles = genStyleHook('nb-grid', (token) => {
     [componentCls]: {
       '.ColDivider': {
         flexShrink: 0,
-        width: token.marginLG,
+        width: token.marginBlock,
 
         '.DraggableNode': {
           '&::before': {
@@ -20,7 +20,7 @@ const useStyles = genStyleHook('nb-grid', (token) => {
           '&:hover': {
             '&::before': { background: 'var(--colorBgSettingsHover) !important' },
           },
-          width: token.marginLG,
+          width: token.marginBlock,
           height: '100%',
           position: 'absolute',
           cursor: 'col-resize',
@@ -28,10 +28,10 @@ const useStyles = genStyleHook('nb-grid', (token) => {
       },
 
       '.RowDivider': {
-        height: token.marginLG,
+        height: token.marginBlock,
         width: '100%',
         position: 'absolute',
-        marginTop: `calc(-1 * ${token.marginLG}px)`,
+        marginTop: `calc(-1 * ${token.marginBlock}px)`,
       },
 
       '.CardRow': {
@@ -40,7 +40,7 @@ const useStyles = genStyleHook('nb-grid', (token) => {
       },
 
       '.showDivider': {
-        margin: `0 calc(-1 * ${token.marginLG}px)`,
+        margin: `0 calc(-1 * ${token.marginBlock}px)`,
       },
     },
   };

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -485,7 +485,7 @@ Grid.Col = observer(
       let width = '';
       if (cols?.length) {
         const w = schema?.['x-component-props']?.['width'] || 100 / cols.length;
-        width = `calc(${w}% - ${token.marginLG}px *  ${(showDivider ? cols.length + 1 : 0) / cols.length})`;
+        width = `calc(${w}% - ${token.marginBlock}px *  ${(showDivider ? cols.length + 1 : 0) / cols.length})`;
       }
       return { width };
     }, [cols?.length, schema?.['x-component-props']?.['width']]);

packages/core/client/src/schema-component/antd/page/Page.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { FormDialog } from '..';
 import { useStyles as useAClStyles } from '../../../acl/style';
+import { useRequest } from '../../../api-client';
 import { useAppSpin } from '../../../application/hooks/useAppSpin';
 import { useDocumentTitle } from '../../../document-title';
 import { useGlobalTheme } from '../../../global-theme';
@@ -24,7 +25,6 @@ import { ErrorFallback } from '../error-fallback';
 import FixedBlock from './FixedBlock';
 import { PageDesigner, PageTabDesigner } from './PageTabDesigner';
 import { useStyles } from './style';
-import { useRequest } from '../../../api-client';
 
 export const Page = (props) => {
   const { children, ...others } = props;
@@ -62,6 +62,7 @@ export const Page = (props) => {
   const [height, setHeight] = useState(0);
   const { wrapSSR, hashId, componentCls } = useStyles();
   const aclStyles = useAClStyles();
+  const { token } = useToken();
 
   const pageHeaderTitle = hidePageTitle ? undefined : fieldSchema.title || compile(title);
 
@@ -103,6 +104,13 @@ export const Page = (props) => {
                     size={'small'}
                     animated={hasMounted}
                     activeKey={activeKey}
+                    // 这里的样式是为了保证页面 tabs 标签下面的分割线和页面内容对齐（页面内边距可以通过主题编辑器调节）
+                    tabBarStyle={{
+                      paddingLeft: token.paddingLG - token.paddingPageHorizontal,
+                      paddingRight: token.paddingLG - token.paddingPageHorizontal,
+                      marginLeft: token.paddingPageHorizontal - token.paddingLG,
+                      marginRight: token.paddingPageHorizontal - token.paddingLG,
+                    }}
                     onTabClick={(activeKey) => {
                       setLoading(true);
                       setSearchParams([['tab', activeKey]]);
@@ -219,7 +227,7 @@ function PageContent(
       if (schema.name !== activeKey) return null;
 
       return (
-        <FixedBlock key={schema.name} height={`calc(${height}px + 46px + ${token.marginLG}px * 2)`}>
+        <FixedBlock key={schema.name} height={`calc(${height}px + 46px + ${token.paddingPageVertical}px * 2)`}>
           <SchemaComponent
             distributed
             schema={
@@ -234,7 +242,7 @@ function PageContent(
       );
     })
   ) : (
-    <FixedBlock height={`calc(${height}px + 46px + ${token.marginLG}px * 2)`}>
+    <FixedBlock height={`calc(${height}px + 46px + ${token.paddingPageVertical}px * 2)`}>
       <div className={`pageWithFixedBlockCss nb-page-content`}>
         <SchemaComponent schema={fieldSchema} distributed />
       </div>

packages/core/client/src/schema-component/antd/page/style.ts

@@ -111,7 +111,7 @@ export const useStyles = genStyleHook('nb-page', (token) => {
       },
 
       '.nb-page-wrapper': {
-        margin: token.marginLG,
+        padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`,
         flex: 1,
       },
     },

packages/core/client/src/schema-component/antd/pagination/__tests__/pagination.test.tsx

@@ -12,12 +12,12 @@ describe('Pagination', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div>
             <ul
-              class="ant-pagination css-dev-only-do-not-override-1mw46su"
+              class="ant-pagination css-dev-only-do-not-override-wwtqkl"
             >
               <li
                 aria-disabled="true"
@@ -122,7 +122,7 @@ describe('Pagination', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         />
       </div>

packages/core/client/src/schema-component/antd/unixTimestamp/__tests__/UnixTimestamp.test.tsx

@@ -10,11 +10,11 @@ describe('UnixTimestamp', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div
-            class="ant-picker css-dev-only-do-not-override-1mw46su"
+            class="ant-picker css-dev-only-do-not-override-wwtqkl"
           >
             <div
               class="ant-picker-input"
@@ -123,7 +123,7 @@ describe('UnixTimestamp', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div
-          class="css-dev-only-do-not-override-1mw46su ant-app"
+          class="css-dev-only-do-not-override-wwtqkl ant-app"
           style="height: 100%;"
         >
           <div

packages/core/client/src/style/index.ts

@@ -1,3 +1,7 @@
-export { createStyles } from 'antd-style';
+import { CreateStylesUtils, createStyles } from 'antd-style';
+import { CustomToken } from '../global-theme';
 export * from './useToken';
-
+export { createStyles };
+export interface CustomCreateStylesUtils extends CreateStylesUtils {
+  token: CustomToken;
+}

packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/meta/category.ts

@@ -185,7 +185,17 @@ const category: TokenTree<keyof AliasToken | string> = [
             nameEn: 'Margin',
             desc: '',
             descEn: '',
-            mapToken: ['marginXXS', 'marginXS', 'marginSM', 'margin', 'marginMD', 'marginLG', 'marginXL', 'marginXXL'],
+            mapToken: [
+              'marginXXS',
+              'marginXS',
+              'marginSM',
+              'margin',
+              'marginMD',
+              'marginLG',
+              'marginXL',
+              'marginXXL',
+              'marginBlock',
+            ],
           },
           {
             key: 'padding',
@@ -194,7 +204,19 @@ const category: TokenTree<keyof AliasToken | string> = [
             nameEn: 'Padding',
             desc: '',
             descEn: '',
-            mapToken: ['paddingXXS', 'paddingXS', 'paddingSM', 'padding', 'paddingMD', 'paddingLG', 'paddingXL'],
+            mapToken: [
+              'paddingXXS',
+              'paddingXS',
+              'paddingSM',
+              'padding',
+              'paddingMD',
+              'paddingLG',
+              'paddingXL',
+              'paddingPageHorizontal',
+              'paddingPageVertical',
+              'paddingPopupHorizontal',
+              'paddingPopupVertical',
+            ],
             aliasToken: [
               'paddingContentHorizontal',
               'paddingContentVertical',
@@ -222,7 +244,7 @@ const category: TokenTree<keyof AliasToken | string> = [
         desc: '',
         descEn: '',
         seedToken: ['borderRadius'],
-        mapToken: ['borderRadius', 'borderRadiusSM', 'borderRadiusLG', 'borderRadiusXS'],
+        mapToken: ['borderRadius', 'borderRadiusSM', 'borderRadiusLG', 'borderRadiusXS', 'borderRadiusBlock'],
       },
       {
         key: 'boxShadow',

packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/token-meta.json

@@ -1711,5 +1711,53 @@
     "descEn": "Text color of settings",
     "type": "string",
     "source": "seed"
+  },
+  "paddingPageHorizontal": {
+    "name": "页面左右内边距",
+    "nameEn": "Horizontal padding of page",
+    "desc": "用于单独设置页面左右内边距",
+    "descEn": "Used to set the horizontal padding of the page separately",
+    "type": "number",
+    "source": "map"
+  },
+  "paddingPageVertical": {
+    "name": "页面上下内边距",
+    "nameEn": "Vertical padding of page",
+    "desc": "用于单独设置页面上下内边距",
+    "descEn": "Used to set the vertical padding of the page separately",
+    "type": "number",
+    "source": "map"
+  },
+  "paddingPopupHorizontal": {
+    "name": "弹窗左右内边距",
+    "nameEn": "Horizontal padding of popup",
+    "desc": "用于单独设置弹窗左右内边距",
+    "descEn": "Used to set the horizontal padding of the popup separately",
+    "type": "number",
+    "source": "map"
+  },
+  "paddingPopupVertical": {
+    "name": "弹窗上下内边距",
+    "nameEn": "Vertical padding of popup",
+    "desc": "用于单独设置弹窗上下内边距",
+    "descEn": "Used to set the vertical padding of the popup separately",
+    "type": "number",
+    "source": "map"
+  },
+  "marginBlock": {
+    "name": "区块之间的间隔",
+    "nameEn": "Spacing between blocks",
+    "desc": "用于设置区块之间的间隔",
+    "descEn": "Used to set the spacing between blocks",
+    "type": "number",
+    "source": "map"
+  },
+  "borderRadiusBlock": {
+    "name": "区块的圆角",
+    "nameEn": "Radius of block",
+    "desc": "用于设置区块的圆角",
+    "descEn": "Used to set the radius of the block",
+    "type": "number",
+    "source": "map"
   }
 }

packages/plugins/@nocobase/plugin-theme-editor/src/client/components/ThemeList.tsx

@@ -26,7 +26,7 @@ const ThemeList = () => {
   }
 
   return (
-    <Space size={token.sizeLG} wrap>
+    <Space size={token.marginLG} wrap>
       {data?.map((item) => {
         return <ThemeCard item={item} key={item.id} onChange={handleChange} />;
       })}

packages/plugins/@nocobase/plugin-theme-editor/src/client/utils/changeAlgorithmFromFunctionToString.tsx

@@ -9,10 +9,13 @@ export function changeAlgorithmFromFunctionToString(themeConfig: any) {
     return themeConfig;
   }
   if (Array.isArray(themeConfig.algorithm)) {
-    themeConfig.algorithm = themeConfig.algorithm.map((algorithm) => parseAlgorithm(algorithm));
+    themeConfig.algorithm = themeConfig.algorithm.map((algorithm) => parseAlgorithm(algorithm)).filter(Boolean);
   } else {
     themeConfig.algorithm = parseAlgorithm(themeConfig.algorithm);
   }
+  if (_.isEmpty(themeConfig.algorithm)) {
+    delete themeConfig.algorithm;
+  }
   return themeConfig;
 }
 
@@ -26,5 +29,4 @@ function parseAlgorithm(algorithm: ThemeConfig['algorithm']): string {
   if (algorithm.toString() === antdTheme.compactAlgorithm.toString()) {
     return 'compactAlgorithm';
   }
-  return algorithm.toString();
 }