diff --git a/packages/core/client/src/global-theme/type.ts b/packages/core/client/src/global-theme/type.ts index 319cf01086..1a2377962d 100644 --- a/packages/core/client/src/global-theme/type.ts +++ b/packages/core/client/src/global-theme/type.ts @@ -49,6 +49,8 @@ export interface CustomToken extends AliasToken { marginBlock: number; /** 区块的圆角 */ borderRadiusBlock: number; + + siderWidth: number; } export interface ThemeConfig extends _ThemeConfig { diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx index 16e7df68af..59677ef1f6 100644 --- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx +++ b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx @@ -516,6 +516,8 @@ const subMenuItemRender = (item, dom) => { }; const CollapsedButton: FC<{ collapsed: boolean }> = (props) => { + const { token } = useToken(); + return ( {(context) => @@ -528,7 +530,7 @@ const CollapsedButton: FC<{ collapsed: boolean }> = (props) => { // Fix the issue where the collapse/expand button is covered by subpages .ant-pro-sider-collapsed-button { top: 64px; - left: ${props.collapsed ? 52 : 188}px; + left: ${props.collapsed ? 52 : (token.siderWidth || 200) - 12}px; z-index: 200; transition: left 0.2s; } @@ -684,7 +686,7 @@ export const InternalAdminLayout = () => { = [ nameEn: 'Others', desc: '', descEn: '', - seedToken: ['wireframe'], + seedToken: ['wireframe', 'siderWidth'], }, ], }, diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenContent.tsx b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenContent.tsx index 86f129146d..88b89eb58b 100644 --- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenContent.tsx +++ b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenContent.tsx @@ -10,7 +10,7 @@ import { CaretRightOutlined, ExpandOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import type { ThemeConfig } from '@nocobase/client'; import { StablePopover } from '@nocobase/client'; -import { Button, Checkbox, Collapse, ConfigProvider, Switch, Tooltip, Typography } from 'antd'; +import { Button, Checkbox, Collapse, ConfigProvider, InputNumber, Switch, Tooltip, Typography } from 'antd'; import seed from 'antd/es/theme/themes/seed'; import classNames from 'classnames'; import type { FC } from 'react'; @@ -346,6 +346,9 @@ const SeedTokenPreview: FC = ({ theme, tokenName, disabled, alph /> )} {tokenName === 'wireframe' && } + {['siderWidth'].includes(tokenName) && ( + + )} ); }; diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/token-meta.json b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/token-meta.json index 54ff50a523..5209098ea7 100644 --- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/token-meta.json +++ b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/token-meta.json @@ -1592,6 +1592,14 @@ "type": "boolean", "source": "seed" }, + "siderWidth": { + "name": "侧边栏宽度(px)", + "nameEn": "Sider width (px)", + "desc": "调整侧边栏展示区域的宽度,宽度单位通常为像素(px)", + "descEn": "Adjust the width of the sidebar display area. The width is usually measured in pixels (px).", + "type": "number", + "source": "map" + }, "zIndexBase": { "name": "基础 zIndex", "nameEn": "Base zIndex",