From 31da3c78e90967f51b067be3516d5635546b4429 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Mon, 21 Apr 2025 09:19:31 +0800
Subject: [PATCH] feat: allow setting sidebar width in theme config (#6720)

---
 packages/core/client/src/global-theme/type.ts             | 2 ++
 .../client/src/route-switch/antd/admin-layout/index.tsx   | 6 ++++--
 .../src/client/antd-token-previewer/meta/category.ts      | 2 +-
 .../antd-token-previewer/token-panel-pro/TokenContent.tsx | 5 ++++-
 .../antd-token-previewer/token-panel-pro/token-meta.json  | 8 ++++++++
 5 files changed, 19 insertions(+), 4 deletions(-)

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 692c9e3f0c..0c7ba92b4f 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
@@ -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}
diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/meta/category.ts b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/meta/category.ts
index 3b2509f3ce..fd7ca4ad71 100644
--- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/meta/category.ts
+++ b/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'],
       },
     ],
   },
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<SeedTokenProps> = ({ theme, tokenName, disabled, alph
         />
       )}
       {tokenName === 'wireframe' && <Switch checked={tokenValue} onChange={handleChange} />}
+      {['siderWidth'].includes(tokenName) && (
+        <InputNumber defaultValue={200} value={tokenValue} onChange={handleChange} />
+      )}
     </div>
   );
 };
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",