chore: adjust

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>

.dumi/pages/index/components/BannerRecommends.tsx

@@ -49,7 +49,8 @@ const useStyle = createStyles(({ cssVar, css, cx }) => {
       max-width: 100%;
       margin-inline: auto;
       box-sizing: border-box;
-      column-gap: calc(${cssVar.paddingMD} * 2);
+      column-gap: ${cssVar.paddingMD};
+      padding: 0 ${cssVar.padding};
       align-items: stretch;
       text-align: start;
       min-height: 178px;

.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   Checkbox,
   ColorPicker,
+  ConfigProvider,
   Dropdown,
   Input,
   message,
@@ -18,8 +19,10 @@ import {
   Tooltip,
 } from 'antd';
 import { createStaticStyles } from 'antd-style';
+import type { ConfigProviderProps } from 'antd';
 
 import useLocale from '../../../../hooks/useLocale';
+
 import Tilt from './Tilt';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
@@ -103,117 +106,123 @@ const styles = createStaticStyles(({ cssVar, css }) => {
     `,
   };
 });
+interface ComponentsBlockProps {
+  config: ConfigProviderProps;
+}
 
-const ComponentsBlock: React.FC = () => {
+const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
   const [locale] = useLocale(locales);
+  const { config } = props;
 
   return (
-    <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>
-      <ModalPanel title="Ant Design" width="100%">
-        {locale.text}
-      </ModalPanel>
-      <Alert title={locale.infoText} type="info" />
-      {/* Line */}
-      <div className={styles.flex}>
-        <ColorPicker style={{ flex: 'none' }} />
-        <div style={{ flex: 'none' }}>
-          <Space.Compact>
-            <Button>{locale.dropdown}</Button>
-            <Dropdown
-              menu={{
-                items: Array.from({ length: 5 }).map((_, index) => ({
-                  key: `opt${index}`,
-                  label: `${locale.option} ${index}`,
-                })),
-              }}
-            >
-              <Button icon={<DownOutlined />} />
-            </Dropdown>
-          </Space.Compact>
+    <ConfigProvider {...config}>
+      <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>
+        <ModalPanel title="Ant Design" width="100%">
+          {locale.text}
+        </ModalPanel>
+        <Alert title={locale.infoText} type="info" />
+        {/* Line */}
+        <div className={styles.flex}>
+          <ColorPicker style={{ flex: 'none' }} />
+          <div style={{ flex: 'none' }}>
+            <Space.Compact>
+              <Button>{locale.dropdown}</Button>
+              <Dropdown
+                menu={{
+                  items: Array.from({ length: 5 }).map((_, index) => ({
+                    key: `opt${index}`,
+                    label: `${locale.option} ${index}`,
+                  })),
+                }}
+              >
+                <Button icon={<DownOutlined />} />
+              </Dropdown>
+            </Space.Compact>
+          </div>
+          <Select
+            style={{ flex: 'auto' }}
+            mode="multiple"
+            maxTagCount="responsive"
+            defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
+            options={[
+              { value: 'apple', label: locale.apple },
+              { value: 'banana', label: locale.banana },
+              { value: 'orange', label: locale.orange },
+              { value: 'watermelon', label: locale.watermelon },
+            ]}
+          />
+          <Input style={{ flex: 'none', width: 120 }} />
         </div>
-        <Select
-          style={{ flex: 'auto' }}
-          mode="multiple"
-          maxTagCount="responsive"
-          defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
-          options={[
-            { value: 'apple', label: locale.apple },
-            { value: 'banana', label: locale.banana },
-            { value: 'orange', label: locale.orange },
-            { value: 'watermelon', label: locale.watermelon },
+        <Progress
+          style={{ margin: 0 }}
+          percent={100}
+          strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
+        />
+        <Progress style={{ margin: 0 }} percent={33} status="exception" />
+        <Steps
+          current={1}
+          items={[
+            { title: locale.finished },
+            { title: locale.inProgress },
+            { title: locale.waiting },
           ]}
         />
-        <Input style={{ flex: 'none', width: 120 }} />
-      </div>
-      <Progress
-        style={{ margin: 0 }}
-        percent={100}
-        strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
-      />
-      <Progress style={{ margin: 0 }} percent={33} status="exception" />
-      <Steps
-        current={1}
-        items={[
-          { title: locale.finished },
-          { title: locale.inProgress },
-          { title: locale.waiting },
-        ]}
-      />
-      {/* Line */}
-      <div className={styles.block}>
-        <Slider
-          style={{ marginInline: 20 }}
-          range
-          marks={{
-            0: '0°C',
-            26: '26°C',
-            37: '37°C',
-            100: {
-              style: { color: '#f50' },
-              label: <strong>100°C</strong>,
-            },
-          }}
-          defaultValue={[26, 37]}
-        />
-      </div>
-      {/* Line */}
-      <div className={styles.flex}>
-        <Button className={styles.ptg_20} type="primary">
-          {locale.primary}
-        </Button>
-        <Button className={styles.ptg_20} type="primary" danger>
-          {locale.danger}
-        </Button>
-        <Button className={styles.ptg_20}>{locale.default}</Button>
-        <Button className={styles.ptg_20} type="dashed">
-          {locale.dashed}
-        </Button>
-        <Button className={styles.ptg_20} icon={<AntDesignOutlined />}>
-          {locale.icon}
-        </Button>
-      </div>
-      {/* Line */}
-      <div className={styles.block}>
-        <div className={styles.flex}>
-          <Switch
-            className={styles.ptg_none}
-            defaultChecked
-            checkedChildren={<CheckOutlined />}
-            unCheckedChildren={<CloseOutlined />}
-          />
-          <Checkbox.Group
-            className={styles.ptg_none}
-            options={[locale.apple, locale.banana, locale.orange]}
-            defaultValue={[locale.apple]}
+        {/* Line */}
+        <div className={styles.block}>
+          <Slider
+            style={{ marginInline: 20 }}
+            range
+            marks={{
+              0: '0°C',
+              26: '26°C',
+              37: '37°C',
+              100: {
+                style: { color: '#f50' },
+                label: <strong>100°C</strong>,
+              },
+            }}
+            defaultValue={[26, 37]}
           />
         </div>
-      </div>
-      <div>
-        <InternalMessage content={locale.release} type="success" />
-      </div>
-      <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
-      <Alert title="Ant Design love you!" type="success" />
-    </Tilt>
+        {/* Line */}
+        <div className={styles.flex}>
+          <Button className={styles.ptg_20} type="primary">
+            {locale.primary}
+          </Button>
+          <Button className={styles.ptg_20} type="primary" danger>
+            {locale.danger}
+          </Button>
+          <Button className={styles.ptg_20}>{locale.default}</Button>
+          <Button className={styles.ptg_20} type="dashed">
+            {locale.dashed}
+          </Button>
+          <Button className={styles.ptg_20} icon={<AntDesignOutlined />}>
+            {locale.icon}
+          </Button>
+        </div>
+        {/* Line */}
+        <div className={styles.block}>
+          <div className={styles.flex}>
+            <Switch
+              className={styles.ptg_none}
+              defaultChecked
+              checkedChildren={<CheckOutlined />}
+              unCheckedChildren={<CloseOutlined />}
+            />
+            <Checkbox.Group
+              className={styles.ptg_none}
+              options={[locale.apple, locale.banana, locale.orange]}
+              defaultValue={[locale.apple]}
+            />
+          </div>
+        </div>
+        <div>
+          <InternalMessage content={locale.release} type="success" />
+        </div>
+        <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
+        <Alert title="Ant Design love you!" type="success" />
+      </Tilt>
+    </ConfigProvider>
   );
 };
 

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -1,15 +1,21 @@
-import React, { Suspense, use } from 'react';
-import { Flex, Typography } from 'antd';
+import React, { Suspense, use, useState } from 'react';
+import { Button, Flex, Typography } from 'antd';
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
 import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useLocation } from 'dumi';
 
+import { DarkContext } from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
 import LinkButton from '../../../../theme/common/LinkButton';
+import PromptDrawer from '../../../../theme/common/ThemeSwitch/PromptDrawer';
+import ThemeIcon from '../../../../theme/common/ThemeSwitch/ThemeIcon';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import type { SiteContextProps } from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import GroupMaskLayer from '../GroupMaskLayer';
+import { muiComponentConfig, muiDark, muiLight } from './themes/mui';
+import { shadcnComponentConfig, shadcnDark, shadcnLight } from './themes/shadcn';
 
 import '../SiteContext';
 
@@ -119,64 +125,251 @@ const useStyle = createStyles(({ cssVar, css, cx }, siteConfig: SiteContextProps
       bottom: 120px;
       inset-inline-end: ${siteConfig.isMobile ? 0 : '40%'};
     `,
+    themeBar: css`
+      display: flex;
+      gap: 12px;
+      margin: 24px 0;
+      align-items: center;
+      justify-content: center;
+    `,
+    themeLabel: css`
+      background: ${cssVar.colorBgElevated};
+      padding: 6px 12px;
+      border-radius: 20px;
+      box-shadow: ${cssVar.boxShadowSecondary};
+      color: ${cssVar.colorText};
+      font-weight: 600;
+      font-size: ${cssVar.fontSizeSM};
+    `,
+    presets: css`
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    `,
+    presetButton: cx(css`
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border-radius: 14px;
+      background: ${cssVar.colorBgElevated};
+      color: ${cssVar.colorText};
+      cursor: pointer;
+      border: 1px solid transparent;
+      box-shadow: ${cssVar.boxShadowSecondary};
+      transition: all 0.2s ease;
+      font-size: ${cssVar.fontSizeSM};
+      padding: 7px 18px;
+      line-height: 18px;
+      border-radius: 6px;
+      font-size: 14px;
+      &:hover {
+        transform: translateY(-2px);
+      }
+    `),
+    swatches: css`
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    `,
+    swatch: css`
+      width: 10px;
+      height: 10px;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+    `,
+    name: css`
+      margin-left: 10px;
+      text-transform: capitalize;
+    `,
   };
 });
 
+type THEME_MAP = 'antd' | 'shadcn' | 'mui';
+
+interface Theme {
+  name: THEME_MAP;
+  theme: ThemeConfig;
+  componentsConfig: Partial<ConfigProviderProps>;
+  style?: React.CSSProperties;
+  activeStyle: React.CSSProperties;
+  swatches: string[];
+}
+
 const PreviewBanner: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
+  const { updateSiteConfig } = use<SiteContextProps>(SiteContext);
+  const [isMarketDrawerOpen, setIsMarketDrawerOpen] = useState(false);
   const { children } = props;
   const [locale] = useLocale(locales);
   const siteConfig = use(SiteContext);
   const { styles } = useStyle(siteConfig);
   const { pathname, search } = useLocation();
   const isZhCN = utils.isZhCN(pathname);
+  const [theme, setTheme] = useState<THEME_MAP>('antd');
+  const isDark = React.use(DarkContext);
+
+  const themeMap: Record<THEME_MAP, Theme> = {
+    antd: {
+      name: 'antd',
+      theme: {},
+      componentsConfig: {},
+      activeStyle: {
+        border: '1px solid #1677ff',
+      },
+      swatches: ['#1677ff', '#91d5ff', '#f0f5ff'],
+    },
+    shadcn: {
+      name: 'shadcn',
+      theme: isDark ? shadcnDark : shadcnLight,
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+      },
+      activeStyle: {
+        border: '1px solid oklch(0.205 0 0)',
+      },
+      componentsConfig: shadcnComponentConfig,
+      swatches: ['oklch(0.205 0 0)', 'oklch(0.556 0 0)', 'rgba(0, 0, 0, 0.05)'],
+    },
+    mui: {
+      name: 'mui',
+      theme: isDark ? muiDark : muiLight,
+      componentsConfig: muiComponentConfig,
+      style: {
+        color: '#fff',
+        backgroundColor: 'rgb(2, 136, 209, 0.5)',
+      },
+      activeStyle: {
+        border: '1px solid rgb(25, 118, 210)',
+      },
+      swatches: ['#1677ff', '#91d5ff', '#f0f5ff'],
+    },
+  };
+  const config: ConfigProviderProps = {
+    theme: themeMap[theme].theme,
+    ...themeMap[theme].componentsConfig,
+  };
 
   return (
     <GroupMaskLayer>
-      {/* Image Left Top */}
-      <img
-        alt="bg"
-        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
-        draggable={false}
-        className={clsx(styles.bgImg, styles.bgImgTop)}
-      />
-      {/* Image Right Top */}
-      <img
-        alt="bg"
-        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
-        draggable={false}
-        className={clsx(styles.bgImg, styles.bgImgBottom)}
-      />
+      <div
+        className={styles.holder}
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          justifyContent: 'center',
+          height: 640,
+          position: 'relative',
+          overflow: 'hidden',
+          perspective: 800,
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+            zIndex: 1,
+          }}
+        >
+          <img
+            alt="bg"
+            src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+            draggable={false}
+            className={clsx(styles.bgImg, styles.bgImgTop)}
+            style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}
+          />
+          <div className={styles.mask} />
 
-      <div className={styles.holder}>
-        {/* Mobile not show the component preview */}
-        <Suspense fallback={null}>
-          {siteConfig.isMobile ? null : (
-            <div className={styles.block}>
-              <ComponentsBlock />
+          <Typography className={styles.typography}>
+            <h1>Ant Design</h1>
+            <p>{locale.slogan}</p>
+          </Typography>
+          <div className={styles.themeBar}>
+            <div className={styles.presets}>
+              {Object.keys(themeMap).map((v, i) => {
+                const key = v as THEME_MAP;
+                return (
+                  <div
+                    key={i}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setTheme(themeMap[key].name)}
+                    className={clsx(styles.presetButton)}
+                    style={{
+                      ...themeMap[key].style,
+                      ...(theme === themeMap[key].name ? themeMap[key].activeStyle : {}),
+                    }}
+                  >
+                    <div className={styles.swatches}>
+                      {themeMap[key].swatches?.map((s: any) => (
+                        <span key={s} className={styles.swatch} style={{ background: s }} />
+                      ))}
+                    </div>
+                    <span className={styles.name}>{themeMap[key].name}</span>
+                  </div>
+                );
+              })}
+              <Button
+                variant="solid"
+                icon={<ThemeIcon />}
+                onClick={() => setIsMarketDrawerOpen(true)}
+                style={{ fontSize: 16 }}
+              />
             </div>
-          )}
-        </Suspense>
-        <div className={styles.mask} />
-        <Typography className={styles.typography}>
-          <h1>Ant Design</h1>
-          <p>{locale.slogan}</p>
-        </Typography>
-        <Flex gap="middle" className={styles.btnWrap}>
-          <LinkButton
-            size="large"
-            type="primary"
-            to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
-          >
-            {locale.start}
-          </LinkButton>
-          <LinkButton
-            size="large"
-            to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
-          >
-            {locale.designLanguage}
-          </LinkButton>
-        </Flex>
-        <div className={styles.child}>{children}</div>
+          </div>
+          <Flex gap="middle" className={styles.btnWrap}>
+            <LinkButton
+              size="large"
+              type="primary"
+              to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
+            >
+              {locale.start}
+            </LinkButton>
+            <LinkButton
+              size="large"
+              to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
+            >
+              {locale.designLanguage}
+            </LinkButton>
+          </Flex>
+          <div className={styles.child}>{children}</div>
+        </div>
+        <PromptDrawer
+          open={isMarketDrawerOpen}
+          onClose={() => setIsMarketDrawerOpen(false)}
+          onThemeChange={(nextTheme) => {
+            updateSiteConfig({
+              dynamicTheme: nextTheme,
+            });
+          }}
+        />
+        <div
+          style={{
+            width: '40%',
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
+            backgroundColor: isDark ? '#393F4A' : '#f4f8ff',
+            borderRadius: '0 0px 0px 12px',
+          }}
+        >
+          <img
+            alt="bg"
+            src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+            draggable={false}
+            className={clsx(styles.bgImg, styles.bgImgBottom)}
+            style={{ position: 'absolute', right: 0, top: 0, zIndex: 0 }}
+          />
+          <Suspense fallback={null}>
+            {siteConfig.isMobile ? null : (
+              <div className={styles.block} style={{ position: 'relative', zIndex: 1 }}>
+                <ComponentsBlock config={config} />
+              </div>
+            )}
+          </Suspense>
+        </div>
       </div>
     </GroupMaskLayer>
   );

.dumi/pages/index/components/PreviewBanner/themes/mui.ts

@@ -0,0 +1,244 @@
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+const { darkAlgorithm, defaultAlgorithm } = theme;
+
+export const mui: ThemeConfig = {
+  token: {
+    colorPrimary: '#1976d2',
+    colorSuccess: '#2e7d32',
+    colorWarning: '#ed6c02',
+    colorError: '#d32f2f',
+    colorInfo: '#0288d1',
+    colorTextBase: '#212121',
+    colorBgBase: '#fafafa',
+    colorPrimaryBg: '#e3f2fd',
+    colorPrimaryBgHover: '#bbdefb',
+    colorPrimaryBorder: '#90caf9',
+    colorPrimaryBorderHover: '#64b5f6',
+    colorPrimaryHover: '#42a5f5',
+    colorPrimaryActive: '#1565c0',
+    colorPrimaryText: '#1976d2',
+    colorPrimaryTextHover: '#42a5f5',
+    colorPrimaryTextActive: '#1565c0',
+    colorSuccessBg: '#e8f5e9',
+    colorSuccessBgHover: '#c8e6c9',
+    colorSuccessBorder: '#a5d6a7',
+    colorSuccessBorderHover: '#81c784',
+    colorSuccessHover: '#4caf50',
+    colorSuccessActive: '#1b5e20',
+    colorSuccessText: '#2e7d32',
+    colorSuccessTextHover: '#4caf50',
+    colorSuccessTextActive: '#1b5e20',
+    colorWarningBg: '#fff3e0',
+    colorWarningBgHover: '#ffe0b2',
+    colorWarningBorder: '#ffcc02',
+    colorWarningBorderHover: '#ffb74d',
+    colorWarningHover: '#ff9800',
+    colorWarningActive: '#e65100',
+    colorWarningText: '#ed6c02',
+    colorWarningTextHover: '#ff9800',
+    colorWarningTextActive: '#e65100',
+    colorErrorBg: '#ffebee',
+    colorErrorBgHover: '#ffcdd2',
+    colorErrorBorder: '#ef9a9a',
+    colorErrorBorderHover: '#e57373',
+    colorErrorHover: '#ef5350',
+    colorErrorActive: '#c62828',
+    colorErrorText: '#d32f2f',
+    colorErrorTextHover: '#ef5350',
+    colorErrorTextActive: '#c62828',
+    colorInfoBg: '#e1f5fe',
+    colorInfoBgHover: '#b3e5fc',
+    colorInfoBorder: '#81d4fa',
+    colorInfoBorderHover: '#4fc3f7',
+    colorInfoHover: '#03a9f4',
+    colorInfoActive: '#01579b',
+    colorInfoText: '#0288d1',
+    colorInfoTextHover: '#03a9f4',
+    colorInfoTextActive: '#01579b',
+    colorText: 'rgba(33, 33, 33, 0.87)',
+    colorTextSecondary: 'rgba(33, 33, 33, 0.6)',
+    colorTextTertiary: 'rgba(33, 33, 33, 0.38)',
+    colorTextQuaternary: 'rgba(33, 33, 33, 0.26)',
+    colorTextDisabled: 'rgba(33, 33, 33, 0.38)',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBgLayout: '#f5f5f5',
+    colorBgSpotlight: 'rgba(33, 33, 33, 0.85)',
+    colorBgMask: 'rgba(33, 33, 33, 0.5)',
+    colorBorder: '#e0e0e0',
+    colorBorderSecondary: '#eeeeee',
+    borderRadius: 4,
+    borderRadiusXS: 1,
+    borderRadiusSM: 2,
+    borderRadiusLG: 6,
+    padding: 16,
+    paddingSM: 8,
+    paddingLG: 24,
+    margin: 16,
+    marginSM: 8,
+    marginLG: 24,
+    boxShadow:
+      '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+    boxShadowSecondary:
+      '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+  },
+  components: {
+    Button: {
+      primaryShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      defaultShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      dangerShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      fontWeight: 500,
+      defaultBorderColor: 'rgba(0, 0, 0, 0.23)',
+      defaultColor: 'rgba(0, 0, 0, 0.87)',
+      defaultBg: '#ffffff',
+      defaultHoverBg: 'rgba(25, 118, 210, 0.04)',
+      defaultHoverBorderColor: 'rgba(0, 0, 0, 0.23)',
+      paddingInline: 16,
+      paddingBlock: 6,
+      contentFontSize: 14,
+      borderRadius: 4,
+    },
+    Alert: {
+      borderRadiusLG: 4,
+    },
+    Modal: {
+      borderRadiusLG: 4,
+    },
+    Progress: {
+      defaultColor: '#1976d2',
+      remainingColor: 'rgba(25, 118, 210, 0.12)',
+    },
+    Steps: {
+      iconSize: 24,
+    },
+    Checkbox: {
+      borderRadiusSM: 2,
+    },
+    Slider: {
+      trackBg: 'rgba(25, 118, 210, 0.26)',
+      trackHoverBg: 'rgba(25, 118, 210, 0.38)',
+      handleSize: 20,
+      handleSizeHover: 20,
+      railSize: 4,
+    },
+    ColorPicker: {
+      borderRadius: 4,
+    },
+  },
+};
+export const muiLight: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: mui.token,
+  components: mui.components,
+};
+
+export const muiDark: ThemeConfig = {
+  algorithm: darkAlgorithm,
+  token: {
+    ...mui.token,
+  },
+  components: {
+    ...mui.components,
+    Message: {
+      contentBg: '#212121',
+      contentPadding: '8px 16px',
+      zIndexPopup: 1010,
+    },
+  },
+};
+
+export const muiComponentConfig: Partial<ConfigProviderProps> = {
+  button: {
+    styles: (info) => {
+      const { props } = info;
+      if (props.type === 'primary') {
+        return {
+          root: {
+            backgroundColor: '#1976d2',
+            color: '#ffffff',
+            border: 'none',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            boxShadow:
+              '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.type === 'default') {
+        return {
+          root: {
+            backgroundColor: '#ffffff',
+            color: 'rgba(0, 0, 0, 0.87)',
+            border: '1px solid rgba(0, 0, 0, 0.23)',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.danger) {
+        return {
+          root: {
+            backgroundColor: '#d32f2f',
+            color: '#ffffff',
+            border: 'none',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            boxShadow:
+              '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+          },
+        };
+      }
+      return {};
+    },
+  },
+  input: {
+    styles: (info) => {
+      const { props } = info;
+      const baseStyle = {
+        root: {
+          borderColor: 'rgba(0, 0, 0, 0.23)',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        input: {
+          color: 'rgba(0, 0, 0, 0.87)',
+          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        },
+      };
+      if (props.status === 'error') {
+        return {
+          ...baseStyle,
+          root: {
+            ...baseStyle.root,
+            borderColor: '#d32f2f',
+          },
+        };
+      }
+      return baseStyle;
+    },
+  },
+  select: {
+    styles: {
+      root: {
+        borderColor: 'rgba(0, 0, 0, 0.23)',
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      },
+      popup: {
+        root: {
+          borderRadius: 4,
+          boxShadow:
+            '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+        },
+      },
+    },
+  },
+};

.dumi/pages/index/components/PreviewBanner/themes/shadcn.ts

@@ -0,0 +1,243 @@
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+const { darkAlgorithm, defaultAlgorithm } = theme;
+
+export const shadcn: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: {
+    colorPrimary: '#262626',
+    colorSuccess: '#22c55e',
+    colorWarning: '#f97316',
+    colorError: '#ef4444',
+    colorInfo: '#262626',
+    colorTextBase: '#262626',
+    colorBgBase: '#ffffff',
+    colorPrimaryBg: '#f5f5f5',
+    colorPrimaryBgHover: '#e5e5e5',
+    colorPrimaryBorder: '#d4d4d4',
+    colorPrimaryBorderHover: '#a3a3a3',
+    colorPrimaryHover: '#404040',
+    colorPrimaryActive: '#171717',
+    colorPrimaryText: '#262626',
+    colorPrimaryTextHover: '#404040',
+    colorPrimaryTextActive: '#171717',
+    colorSuccessBg: '#f0fdf4',
+    colorSuccessBgHover: '#dcfce7',
+    colorSuccessBorder: '#bbf7d0',
+    colorSuccessBorderHover: '#86efac',
+    colorSuccessHover: '#16a34a',
+    colorSuccessActive: '#15803d',
+    colorSuccessText: '#16a34a',
+    colorSuccessTextHover: '#16a34a',
+    colorSuccessTextActive: '#15803d',
+    colorWarningBg: '#fff7ed',
+    colorWarningBgHover: '#fed7aa',
+    colorWarningBorder: '#fdba74',
+    colorWarningBorderHover: '#fb923c',
+    colorWarningHover: '#ea580c',
+    colorWarningActive: '#c2410c',
+    colorWarningText: '#ea580c',
+    colorWarningTextHover: '#ea580c',
+    colorWarningTextActive: '#c2410c',
+    colorErrorBg: '#fef2f2',
+    colorErrorBgHover: '#fecaca',
+    colorErrorBorder: '#fca5a5',
+    colorErrorBorderHover: '#f87171',
+    colorErrorHover: '#dc2626',
+    colorErrorActive: '#b91c1c',
+    colorErrorText: '#dc2626',
+    colorErrorTextHover: '#dc2626',
+    colorErrorTextActive: '#b91c1c',
+    colorInfoBg: '#f5f5f5',
+    colorInfoBgHover: '#e5e5e5',
+    colorInfoBorder: '#d4d4d4',
+    colorInfoBorderHover: '#a3a3a3',
+    colorInfoHover: '#404040',
+    colorInfoActive: '#171717',
+    colorInfoText: '#262626',
+    colorInfoTextHover: '#404040',
+    colorInfoTextActive: '#171717',
+    colorText: '#262626',
+    colorTextSecondary: '#525252',
+    colorTextTertiary: '#737373',
+    colorTextQuaternary: '#a3a3a3',
+    colorTextDisabled: '#a3a3a3',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBgLayout: '#fafafa',
+    colorBgSpotlight: 'rgba(38, 38, 38, 0.85)',
+    colorBgMask: 'rgba(38, 38, 38, 0.45)',
+    colorBorder: '#e5e5e5',
+    colorBorderSecondary: '#f5f5f5',
+    borderRadius: 10,
+    borderRadiusXS: 2,
+    borderRadiusSM: 6,
+    borderRadiusLG: 14,
+    padding: 16,
+    paddingSM: 12,
+    paddingLG: 24,
+    margin: 16,
+    marginSM: 12,
+    marginLG: 24,
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  },
+  components: {
+    Button: {
+      primaryShadow: 'none',
+      defaultShadow: 'none',
+      dangerShadow: 'none',
+      defaultBorderColor: '#e4e4e7',
+      defaultColor: '#18181b',
+      defaultBg: '#ffffff',
+      defaultHoverBg: '#f4f4f5',
+      defaultHoverBorderColor: '#d4d4d8',
+      defaultHoverColor: '#18181b',
+      defaultActiveBg: '#e4e4e7',
+      defaultActiveBorderColor: '#d4d4d8',
+      borderRadius: 6,
+    },
+    Input: {
+      activeShadow: 'none',
+      hoverBorderColor: '#a1a1aa',
+      activeBorderColor: '#18181b',
+      borderRadius: 6,
+    },
+    Select: {
+      optionSelectedBg: '#f4f4f5',
+      optionActiveBg: '#fafafa',
+      optionSelectedFontWeight: 500,
+      borderRadius: 6,
+    },
+    Alert: {
+      borderRadiusLG: 8,
+    },
+    Modal: {
+      borderRadiusLG: 12,
+    },
+    Progress: {
+      defaultColor: '#18181b',
+      remainingColor: '#f4f4f5',
+    },
+    Steps: {
+      iconSize: 32,
+    },
+    Switch: {
+      trackHeight: 24,
+      trackMinWidth: 44,
+      innerMinMargin: 4,
+      innerMaxMargin: 24,
+    },
+    Checkbox: {
+      borderRadiusSM: 4,
+    },
+    Slider: {
+      trackBg: '#f4f4f5',
+      trackHoverBg: '#e4e4e7',
+      handleSize: 18,
+      handleSizeHover: 20,
+      railSize: 6,
+    },
+    ColorPicker: {
+      borderRadius: 6,
+    },
+  },
+};
+
+export const shadcnLight: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: shadcn.token,
+  components: shadcn.components,
+};
+
+export const shadcnDark: ThemeConfig = {
+  algorithm: darkAlgorithm,
+  token: {
+    ...shadcn.token,
+  },
+  components: {
+    ...shadcn.components,
+    Message: {
+      contentBg: '#212121',
+    },
+  },
+};
+
+export const shadcnComponentConfig: Partial<ConfigProviderProps> = {
+  button: {
+    styles: (info) => {
+      const { props } = info;
+      if (props.type === 'primary') {
+        return {
+          root: {
+            backgroundColor: '#18181b',
+            color: '#ffffff',
+            border: '1px solid #18181b',
+            fontWeight: 500,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.type === 'default') {
+        return {
+          root: {
+            backgroundColor: '#ffffff',
+            color: '#18181b',
+            border: '1px solid #e4e4e7',
+            fontWeight: 500,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.danger) {
+        return {
+          root: {
+            backgroundColor: '#dc2626',
+            color: '#ffffff',
+            border: '1px solid #dc2626',
+            fontWeight: 500,
+          },
+        };
+      }
+      return {};
+    },
+  },
+  input: {
+    styles: (info) => {
+      const { props } = info;
+      const baseStyle = {
+        root: {
+          borderColor: '#e4e4e7',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        input: {
+          color: '#18181b',
+        },
+      };
+      if (props.status === 'error') {
+        return {
+          ...baseStyle,
+          root: {
+            ...baseStyle.root,
+            borderColor: '#dc2626',
+          },
+        };
+      }
+      return baseStyle;
+    },
+  },
+  select: {
+    styles: {
+      root: {
+        borderColor: '#e4e4e7',
+      },
+      popup: {
+        root: {
+          borderRadius: 8,
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+        },
+      },
+    },
+  },
+};

.dumi/pages/index/index.tsx

@@ -49,13 +49,6 @@ const Homepage: React.FC = () => {
       </PreviewBanner>
 
       <div>
-        {/* 定制主题 */}
-        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
-          <Suspense fallback={null}>
-            <Theme />
-          </Suspense>
-        </ConfigProvider>
-
         {/* 组件列表 */}
         <Group
           background={token.colorBgElevated}
@@ -69,11 +62,18 @@ const Homepage: React.FC = () => {
           </Suspense>
         </Group>
 
+        {/* 定制主题 */}
+        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
+          <Suspense fallback={null}>
+            <Theme />
+          </Suspense>
+        </ConfigProvider>
+
         {/* 设计语言 */}
         <Group
           title={locale.designTitle}
           description={locale.designDesc}
-          background={isDark ? '#393F4A' : '#F5F8FF'}
+          background={isDark ? '#393F4A' : token.colorBgContainer}
           decoration={
             <img
               draggable={false}