✨ feat(apiheader): add configuration for component API header

This commit introduces a new configuration option to the `dumi` config file for the component API header. The added configuration allows matching routes, defining source and documentation URLs, and specifying the package name. Additionally, the commit also updates the `ApiHeader` component to use customized icons from the `lobehub/ui` library instead of `ant-design/icons`.

Author: canisminor1990

.dumirc.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'dumi';
-import { homepage } from './package.json';
+import { homepage, name } from './package.json';
 
 const isProd = process.env.NODE_ENV === 'production';
 const isWin = process.platform === 'win32';
@@ -12,6 +12,15 @@ const themeConfig = {
   socialLinks: {
     github: homepage,
   },
+  apiHeader: {
+    // 组件库包名，可以从 package.json 中引入名称
+    pkg: name,
+    // 匹配路由，默认为 /api 或 /components
+    match: ['/components'],
+    // github 会匹配 themeConfig.github 字段
+    sourceUrl: `{github}/tree/master/src/{atomId}/index.tsx`,
+    docUrl: `{github}/tree/master/src/{atomId}/index.md`,
+  },
 };
 
 export default defineConfig({
@@ -37,7 +46,7 @@ export default defineConfig({
     : {
         exclude: ['@dqbd/tiktoken'],
       },
-  chainWebpack(config) {
+  chainWebpack(config: any) {
     config.set('experiments', {
       ...config.get('experiments'),
       asyncWebAssembly: true,

packages/dumi-theme-lobehub/src/components/ApiHeader/index.tsx

@@ -1,12 +1,10 @@
-import { EditOutlined, GithubFilled } from '@ant-design/icons';
+import { ApiHeaderProps } from '@/index';
+import { Icon, Snippet } from '@lobehub/ui';
 import { Divider, Space, Typography } from 'antd';
 import { useResponsive } from 'antd-style';
+import { Edit3, Github } from 'lucide-react';
 import { FC, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-
-import { Snippet } from '@lobehub/ui';
-
-import { ApiHeaderProps } from '@/index';
 import { useStyles } from './style';
 
 /**
@@ -63,13 +61,13 @@ export const ApiHeader: FC<ApiTitleProps> = memo(
 
     const items = [
       sourceUrl && {
-        icon: <GithubFilled />,
-        children: '查看源码',
+        icon: <Icon icon={Github} size={{ fontSize: 15 }} />,
+        children: 'Source',
         url: sourceUrl,
       },
       docUrl && {
-        icon: <EditOutlined />,
-        children: '编辑文档',
+        icon: <Icon icon={Edit3} size={{ fontSize: 15 }} />,
+        children: 'Edit',
         url: docUrl,
       },
     ].filter((i) => i) as ServiceItem[];

packages/dumi-theme-lobehub/src/slots/ContentFooter/Linker.tsx

@@ -1,9 +1,8 @@
-import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { Icon } from '@lobehub/ui';
 import { Link } from 'dumi';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { FC } from 'react';
-
 import { memo, useMemo } from 'react';
-
 import { Flexbox } from 'react-layout-kit';
 import { useStyles } from './Linker.style';
 
@@ -20,13 +19,15 @@ const Linker: FC<LinkerProps> = ({ title, link, type }) => {
       case 'prev':
         return (
           <>
-            <ArrowLeftOutlined /> Previous
+            <Icon icon={ArrowLeft} size={{ fontSize: 14 }} />
+            <span style={{ lineHeight: '14px' }}>Previous</span>
           </>
         );
       case 'next':
         return (
           <>
-            Next <ArrowRightOutlined />
+            <span style={{ lineHeight: '14px' }}>Next</span>
+            <Icon icon={ArrowRight} size={{ fontSize: 14 }} />
           </>
         );
     }

packages/dumi-theme-lobehub/src/slots/Sidebar/index.tsx

@@ -23,7 +23,6 @@ const Sidebar: FC = () => {
       placement="left"
       className={styles.sidebar}
       expand={expand}
-      classNames={{ content: styles.sidebarContent }}
       onExpandChange={setExpand}
     >
       <div className={styles.sidebarInner}>

packages/dumi-theme-lobehub/src/slots/Sidebar/style.ts

@@ -4,45 +4,47 @@ export const useStyles = createStyles(({ css, token }) => ({
   sidebar: css`
     margin-top: ${token.headerHeight}px;
   `,
-  sidebarContent: css`
-    &.draggable-panel-fixed {
-      overflow-y: scroll;
-    }
-  `,
   sidebarInner: css`
+    overflow: auto;
+    width: 100%;
+    height: 100%;
     padding: 16px;
     dl {
       margin: 0;
       padding: 0;
       line-height: 1;
 
       > dt {
+        overflow: hidden;
+
         margin: 8px 0;
-        color: ${token.colorText};
+
         font-weight: 500;
-        white-space: nowrap;
-        overflow: hidden;
+        color: ${token.colorText};
         text-overflow: ellipsis;
         text-transform: uppercase;
+        white-space: nowrap;
       }
 
       > dd {
         margin: 0;
         padding: 2px 0;
 
         > a {
-          padding: 6px 12px;
-          border-radius: 6px;
+          overflow: hidden;
           display: block;
+
+          padding: 6px 12px;
+
           font-size: ${token.fontSize}px;
           line-height: ${token.lineHeight};
+          color: ${token.colorTextSecondary};
           text-decoration: none;
-
-          white-space: nowrap;
-          overflow: hidden;
           text-overflow: ellipsis;
+          white-space: nowrap;
+
+          border-radius: 6px;
 
-          color: ${token.colorTextSecondary};
           transition: color 600ms ${token.motionEaseOut},
             background-color 100ms ${token.motionEaseOut};
           &:hover {

src/DraggablePanel/style.ts

@@ -17,7 +17,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
     &:hover,
     &:active {
       &::before {
-        background: ${token.colorPrimary};
+        background: ${token.colorPrimary} !important;
       }
     }
   `;

src/StroyBook/index.tsx

@@ -31,7 +31,9 @@ export const StroyBook = memo<StroyBookProps>(
           placement={mobile ? 'bottom' : 'right'}
           minWidth={280}
         >
-          <LevaPanel fill store={levaStore} titleBar={false} flat />{' '}
+          <div className={styles.leva}>
+            <LevaPanel fill store={levaStore} titleBar={false} flat />{' '}
+          </div>
         </DraggablePanel>
       </div>
     );

src/StroyBook/style.ts

@@ -28,6 +28,9 @@ export const useStyles = createStyles(
         `}
       `,
       right: css`
+        background: ${token.colorBgLayout};
+      `,
+      leva: css`
         --leva-sizes-controlWidth: 66%;
         --leva-colors-elevation1: ${token.colorFillSecondary};
         --leva-colors-elevation2: transparent;
@@ -43,8 +46,11 @@ export const useStyles = createStyles(
         --leva-shadows-level2: unset;
         --leva-fonts-mono: ${token.fontFamilyCode};
 
+        overflow: auto;
+        width: 100%;
+        height: 100%;
         padding: 6px 0;
-        background: ${token.colorBgLayout};
+
         > div {
           background: transparent;
           > div {

src/styles/algorithms/generateColorPalette.ts

@@ -34,10 +34,10 @@ export const generateColorNeutralPalette = ({
   appearance: 'light' | 'dark';
 }): Partial<AliasToken> => {
   return {
-    colorText: scale[`${appearance}A`][12],
-    colorTextSecondary: scale[`${appearance}A`][10],
-    colorTextTertiary: scale[`${appearance}A`][8],
-    colorTextQuaternary: scale[`${appearance}A`][6],
+    colorText: scale[appearance][12],
+    colorTextSecondary: scale[appearance][10],
+    colorTextTertiary: scale[appearance][8],
+    colorTextQuaternary: scale[appearance][6],
     colorBorder: scale[appearance][4],
     colorBorderSecondary: scale[appearance][3],
     colorFill: scale[`${appearance}A`][3],

src/styles/algorithms/generateCustomStylish.ts

@@ -144,18 +144,14 @@ export const generateCustomStylish: GetCustomStylish<LobeCustomStylish> = ({
         max-width: 100%;
       }
 
-      code,
-      pre * {
-        font-size: ${token.fontSizeSM}px;
-      }
-
       pre {
         border-radius: ${token.borderRadius}px;
       }
 
       > :not([data-code-type='highlighter']) code {
         padding: 2px 6px;
 
+        font-size: ${token.fontSizeSM}px;
         color: ${isDarkMode ? token.cyan9A : token.cyan10A};
 
         background: ${isDarkMode ? token.cyan1A : token.cyan3A};