✨ feat: 支持自定义主题 token 的初始值配置

close #9

example/docs/config/apiHeader.zh-CN.md

@@ -12,7 +12,7 @@ nav: 配置
 
 ```tsx | pure
 import { SmileOutlined } from '@ant-design/icons';
-import { ApiHeader as Header, siteSelectors, useSiteStore } from 'dumi-theme-antdstyle';
+import { ApiHeader as Header, siteSelectors, useSiteStore } from 'dumi-theme-antd-style';
 import { FC, memo } from 'react';
 
 const ApiHeader: FC = memo(() => {

example/docs/config/index.zh-CN.md

@@ -229,3 +229,32 @@ export default defineConfig({
   },
 });
 ```
+
+### siteToken
+
+- 类型：`SiteConfigToken`
+- 默认值：`undefined`
+
+网站主题 Token 配置，该配置会传递给 [DumiSiteProvider](/components/dumi-site-provider) 组件
+
+```ts
+export default defineConfig({
+  themeConfig: {
+    siteToken: {
+      headerHeight: 64,
+      footerHeight: 300,
+      sidebarWidth: 240,
+      tocWidth: 176,
+      contentMaxWidth: 1152,
+    },
+  },
+});
+```
+
+| 属性名          | 类型     | 默认值 | 描述         |
+| --------------- | -------- | ------ | ------------ |
+| headerHeight    | `number` | `64`   | 网站头部高度 |
+| footerHeight    | `number` | `300`  | 网站底部高度 |
+| sidebarWidth    | `number` | `240`  | 侧边栏宽度   |
+| tocWidth        | `number` | `176`  | 目录宽度     |
+| contentMaxWidth | `number` | `1152` | 内容最大宽度 |

src/components/DumiSiteProvider/ThemeProvider.tsx

@@ -1,12 +1,31 @@
-import { StyleProvider, ThemeProvider as Provider } from 'antd-style';
-import { PropsWithChildren } from 'react';
+import { CustomTokenParams, StyleProvider, ThemeProvider as Provider } from 'antd-style';
+import { ReactNode, useCallback } from 'react';
 
 import { useThemeStore } from '../../store/useThemeStore';
-import { getAntdTheme, getCustomStylish, getCustomToken } from '../../styles';
+import { createCustomToken, getAntdTheme, getCustomStylish } from '../../styles';
+import { SiteConfigToken } from '../../types';
 
-export const ThemeProvider = ({ children }: PropsWithChildren) => {
+export interface ThemeProviderProps {
+  token?: Partial<SiteConfigToken>;
+  children?: ReactNode;
+}
+
+export const ThemeProvider = ({ children, token }: ThemeProviderProps) => {
   const themeMode = useThemeStore((s) => s.themeMode);
 
+  const getCustomToken = useCallback(
+    (params: CustomTokenParams) => {
+      const base = createCustomToken(params);
+
+      if (token) {
+        return { ...base, ...token };
+      } else {
+        return base;
+      }
+    },
+    [token],
+  );
+
   return (
     <StyleProvider speedy={process.env.NODE_ENV === 'production'} prefix={'site'}>
       <Provider

src/components/DumiSiteProvider/index.tsx

@@ -1,13 +1,12 @@
 import { App } from 'antd';
 import { StyleProvider } from 'antd-style';
-import { PropsWithChildren } from 'react';
 
-import { ThemeProvider } from './ThemeProvider';
+import { ThemeProvider, ThemeProviderProps } from './ThemeProvider';
 
-export default ({ children }: PropsWithChildren) => {
+export default ({ children, token }: ThemeProviderProps) => {
   return (
     <StyleProvider speedy={process.env.NODE_ENV === 'production'} prefix={'site'}>
-      <ThemeProvider>
+      <ThemeProvider token={token}>
         <App>{children}</App>
       </ThemeProvider>
     </StyleProvider>

src/layouts/DocLayout/index.tsx

@@ -1,9 +1,9 @@
 import animateScrollTo from 'animated-scroll-to';
 import { Helmet, useIntl, useLocation } from 'dumi';
 import isEqual from 'fast-deep-equal';
-import { memo, StrictMode, useEffect, type FC } from 'react';
+import { memo, PropsWithChildren, StrictMode, useEffect, type FC } from 'react';
 
-import SiteProvider from '../../components/DumiSiteProvider';
+import DumiSiteProvider from '../../components/DumiSiteProvider';
 import { StoreUpdater } from '../../components/StoreUpdater';
 
 import Docs from '../../pages/Docs';
@@ -53,12 +53,17 @@ const DocLayout: FC = memo(() => {
   );
 });
 
+const THemeProvider = ({ children }: PropsWithChildren) => {
+  const siteToken = useSiteStore((s) => s.siteData.themeConfig.siteToken, isEqual);
+  return <DumiSiteProvider token={siteToken}>{children}</DumiSiteProvider>;
+};
+
 export default () => (
   <StrictMode>
-    <SiteProvider>
-      <StoreUpdater />
+    <StoreUpdater />
+    <THemeProvider>
       <GlobalStyle />
       <DocLayout />
-    </SiteProvider>
+    </THemeProvider>
   </StrictMode>
 );

src/styles/customToken.ts

@@ -7,10 +7,10 @@ declare module 'antd-style' {
 }
 
 /**
- * @title 站点令牌
+ * @title 站点主题 Token
  * @description 站点的一些基础配置信息
  */
-interface SiteToken {
+export interface SiteToken {
   /**
    * @title 头部高度
    */
@@ -62,7 +62,7 @@ interface SiteToken {
   fontFamilyHighlighter: string;
 }
 
-export const getCustomToken: GetCustomToken<SiteToken> = ({ isDarkMode, token }) => {
+export const createCustomToken: GetCustomToken<SiteToken> = ({ isDarkMode, token }) => {
   const gradientColor1 = token.blue;
   const gradientColor2 = isDarkMode ? token.pink : token.cyan;
   const gradientColor3 = token.purple;

src/types/config.ts

@@ -1,3 +1,4 @@
+import { SiteToken } from 'dumi-theme-antd-style/styles';
 import { FooterColumn } from 'rc-footer/es/column';
 import { ApiHeaderConfig, HighlighterSyntaxTheme, IHero } from '../types';
 
@@ -62,4 +63,12 @@ export interface SiteThemeConfig {
    * @type HighlighterSyntaxTheme
    */
   syntaxTheme?: HighlighterSyntaxTheme;
+  /**
+   * 网站主题 Token 配置
+   */
+  siteToken?: SiteConfigToken;
 }
+
+export type SiteConfigToken = Partial<
+  Pick<SiteToken, 'headerHeight' | 'footerHeight' | 'sidebarWidth' | 'tocWidth' | 'contentMaxWidth'>
+>;