feat: allow setting sidebar width in theme config (#6720)

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 {

packages/core/client/src/route-switch/antd/admin-layout/index.tsx

@@ -503,6 +503,8 @@ const subMenuItemRender = (item, dom) => {
 };
 
 const CollapsedButton: FC<{ collapsed: boolean }> = (props) => {
+  const { token } = useToken();
+
   return (
     <RouteContext.Consumer>
       {(context) =>
@@ -515,7 +517,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;
                 }
@@ -671,7 +673,7 @@ export const InternalAdminLayout = () => {
     <DndContext onDragEnd={onDragEnd}>
       <ProLayout
         contentStyle={contentStyle}
-        siderWidth={200}
+        siderWidth={token.siderWidth || 200}
         className={resetStyle}
         location={location}
         route={route}

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

@@ -279,7 +279,7 @@ const category: TokenTree<keyof AliasToken | string> = [
         nameEn: 'Others',
         desc: '',
         descEn: '',
-        seedToken: ['wireframe'],
+        seedToken: ['wireframe', 'siderWidth'],
       },
     ],
   },

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<SeedTokenProps> = ({ theme, tokenName, disabled, alph
         />
       )}
       {tokenName === 'wireframe' && <Switch checked={tokenValue} onChange={handleChange} />}
+      {['siderWidth'].includes(tokenName) && (
+        <InputNumber defaultValue={200} value={tokenValue} onChange={handleChange} />
+      )}
     </div>
   );
 };

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