refactor: menu component token

.dumi/theme/slots/Sidebar/index.tsx

@@ -134,7 +134,9 @@ const Sidebar: React.FC = () => {
   } = useSiteToken();
 
   const menuChild = (
-    <ConfigProvider theme={{ components: { Menu: { itemBg: colorBgContainer } } }}>
+    <ConfigProvider
+      theme={{ components: { Menu: { itemBg: colorBgContainer, darkItemBg: colorBgContainer } } }}
+    >
       <Menu
         items={menuItems}
         inlineIndent={30}

components/layout/__tests__/token.test.tsx

@@ -24,7 +24,6 @@ describe('Layout.Token', () => {
       >
         <Header>
           <Menu
-            theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['2']}
             items={new Array(15).fill(null).map((_, index) => {
@@ -62,7 +61,6 @@ describe('Layout.Token', () => {
       >
         <Header>
           <Menu
-            theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['2']}
             items={new Array(15).fill(null).map((_, index) => {

components/menu/demo/component-token.tsx

@@ -1,8 +1,17 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  PieChartOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { ConfigProvider, Menu } from 'antd';
+import { ConfigProvider, Menu, Space } from 'antd';
 import React, { useState } from 'react';
 
+type MenuItem = Required<MenuProps>['items'][number];
+
 const items: MenuProps['items'] = [
   {
     label: 'Navigation One',
@@ -60,6 +69,42 @@ const items: MenuProps['items'] = [
   },
 ];
 
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items2: MenuProps['items'] = [
+  getItem('Option 1', '1', <PieChartOutlined />),
+  getItem('Option 2', '2', <DesktopOutlined />),
+  getItem('Option 3', '3', <ContainerOutlined />),
+
+  getItem('Navigation One', 'sub1', <MailOutlined />, [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Option 7', '7'),
+    getItem('Option 8', '8'),
+  ]),
+
+  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+
+    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
+  ]),
+];
+
 const App: React.FC = () => {
   const [current, setCurrent] = useState('mail');
 
@@ -69,18 +114,44 @@ const App: React.FC = () => {
   };
 
   return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Menu: {
-            horizontalItemBorderRadius: 6,
-            horizontalItemHoverBg: '#f5f5f5',
+    <Space direction="vertical">
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              horizontalItemBorderRadius: 6,
+              horizontalItemHoverBg: '#f5f5f5',
+            },
+          },
+        }}
+      >
+        <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
+      </ConfigProvider>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              darkItemColor: '#91daff',
+              darkItemBg: '#d48806',
+              darkSubMenuItemBg: '#faad14',
+              darkItemSelectedColor: '#ffccc7',
+              darkItemSelectedBg: '#52c41a',
+            },
           },
-        },
-      }}
-    >
-      <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
-    </ConfigProvider>
+        }}
+      >
+        <Menu
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode='inline'
+          theme='dark'
+          items={items2}
+          style={{
+            width: 256,
+          }}
+        />
+      </ConfigProvider>
+    </Space>
   );
 };
 

components/menu/style/horizontal.tsx

@@ -5,16 +5,16 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
   const {
     componentCls,
     motionDurationSlow,
-    menuHorizontalHeight,
+    horizontalLineHeight,
     colorSplit,
     lineWidth,
     lineType,
-    menuItemPaddingInline,
+    itemPaddingInline,
   } = token;
 
   return {
     [`${componentCls}-horizontal`]: {
-      lineHeight: `${menuHorizontalHeight}px`,
+      lineHeight: horizontalLineHeight,
       border: 0,
       borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
       boxShadow: 'none',
@@ -31,7 +31,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
         position: 'relative',
         display: 'inline-block',
         verticalAlign: 'bottom',
-        paddingInline: menuItemPaddingInline,
+        paddingInline: itemPaddingInline,
       },
 
       [`> ${componentCls}-item:hover,