✨ feat: add Snippet

.dumirc.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'dumi';
 import { homepage } from './package.json';
 
 const isProd = process.env.NODE_ENV === 'production';
+const isWin = process.platform === 'win32';
 
 const themeConfig = {
   name: 'UI',
@@ -21,10 +22,12 @@ export default defineConfig({
   base: '/',
   publicPath: '/',
   ssr: isProd ? {} : false,
-  apiParser: {},
-  resolve: {
-    entryFile: './src/index.ts',
-  },
+  apiParser: isWin ? false : {},
+  resolve: isWin
+    ? undefined
+    : {
+        entryFile: './src/index.ts',
+      },
   define: {
     'process.env': process.env,
   },

packages/dumi-theme-lobehub/src/builtins/SourceCode/index.tsx

@@ -1,14 +1,20 @@
-import { FC } from 'react';
-
 import { Highlighter } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { rgba } from 'polished';
+import { FC } from 'react';
 
 interface SourceCodeProps {
   lang: string;
   children: string;
 }
 
 const SourceCode: FC<SourceCodeProps> = ({ children, lang }) => {
-  return <Highlighter language={lang}>{children}</Highlighter>;
+  const theme = useTheme();
+  return (
+    <Highlighter style={{ background: rgba(theme.colorBgLayout, 0.5) }} language={lang}>
+      {children}
+    </Highlighter>
+  );
 };
 
 export default SourceCode;

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

@@ -4,7 +4,7 @@ import { useResponsive } from 'antd-style';
 import { FC, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Code from '../CodeSnippet';
+import { Snippet } from '@lobehub/ui';
 
 import { ApiHeaderProps } from '@/index';
 import { useStyles } from './style';
@@ -89,16 +89,9 @@ export const ApiHeader: FC<ApiTitleProps> = memo(
           </div>
         )}
         <Flexbox style={{ marginTop: 16 }} gap={mobile ? 16 : 24}>
-          <Flexbox horizontal={!mobile} gap={mobile ? 12 : 0}>
-            <Typography.Text
-              className={styles.label}
-              type={'secondary'}
-              style={{ display: 'flex', alignItems: 'center' }}
-            >
-              Snippet
-            </Typography.Text>
-            <Code>{importStr}</Code>
-          </Flexbox>
+          <div style={{ display: 'flex' }}>
+            <Snippet>{importStr}</Snippet>
+          </div>
           <Divider dashed style={{ margin: '2px 0' }} />
           <Flexbox horizontal={!mobile} gap={mobile ? 24 : 0} distribution={'space-between'}>
             <Space split={<Divider type={'vertical'} />} wrap>