mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 07:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* chore: use token better

* chore: use rgba

* feat: add some custom tokens

* Revert "chore: use rgba"

This reverts commit dac660f693.

* 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
This commit is contained in:
Zeke Zhang 2024-04-23 21:17:20 +08:00 committed by GitHub
parent b0ba197915
commit 785cc525c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 302 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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]);

43
packages/core/client/src/css-variable/CSSVariableProvider.tsx
View File

@ -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.marginXS,
token.controlHeightLG,
token.paddingContentVerticalSM,
token.marginSM,
token.colorBgSettingsHover,
token.colorBorderSettingsHover,
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.colorBorderSettingsHover,
token.colorText,
token.colorWarningBg,
token.colorWarningBorder,
token.controlHeightLG,
token.marginLG,
token.marginSM,
token.marginXS,
token.paddingContentVerticalSM,
token.sizeXXL,
]);
return children;

42
packages/core/client/src/global-theme/customAlgorithm.ts Normal file
View File

@ -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;
};

2
packages/core/client/src/global-theme/defaultTheme.ts
View File

@ -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__,
},

5
packages/core/client/src/global-theme/index.tsx
View File

@ -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>
);
};

15
packages/core/client/src/global-theme/type.ts
View File

@ -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 {

4
packages/core/client/src/plugin-manager/PinnedPluginListProvider.tsx
View File

@ -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' }}
>

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

@ -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`,
},
},
};

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

@ -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}

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

@ -1,61 +1,68 @@
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`
position: relative;
&:hover {
> .general-schema-designer {
display: block;
}
}
&.nb-form-item:hover {
> .general-schema-designer {
background: var(--colorBgSettingsHover) !important;
border: 0 !important;
top: -5px !important;
bottom: -5px !important;
left: -5px !important;
right: -5px !important;
}
}
> .general-schema-designer {
position: absolute;
z-index: 999;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
border: 2px solid var(--colorBorderSettingsHover);
pointer-events: none;
> .general-schema-designer-icons {
position: absolute;
right: 2px;
top: 2px;
line-height: 16px;
pointer-events: all;
.ant-space-item {
background-color: var(--colorSettings);
color: #fff;
line-height: 16px;
width: 16px;
padding-left: 1px;
align-self: stretch;
const useStyles = createStyles(({ css, token }: CustomCreateStylesUtils) => {
return css`
position: relative;
&:hover {
> .general-schema-designer {
display: block;
}
}
}
`;
&.nb-form-item:hover {
> .general-schema-designer {
background: var(--colorBgSettingsHover) !important;
border: 0 !important;
top: -5px !important;
bottom: -5px !important;
left: -5px !important;
right: -5px !important;
}
}
> .general-schema-designer {
position: absolute;
z-index: 999;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
border: 2px solid var(--colorBorderSettingsHover);
pointer-events: none;
> .general-schema-designer-icons {
position: absolute;
right: 2px;
top: 2px;
line-height: 16px;
pointer-events: all;
.ant-space-item {
background-color: var(--colorSettings);
color: #fff;
line-height: 16px;
width: 16px;
padding-left: 1px;
align-self: stretch;
}
}
}
.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();

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

@ -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>
);

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

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

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

@ -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>

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

@ -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"

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

@ -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)`,
},
},
};

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

@ -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']]);

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

@ -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>

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

@ -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,
},
},

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

@ -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>

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

@ -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

8
packages/core/client/src/style/index.ts
View File

@ -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;
}

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

@ -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',

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

@ -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"
}
}

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

@ -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} />;
})}

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

@ -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();
}