site: update site/demo style (#50107)

* site: update site/demo style

* fix: fix lint

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Badge, Carousel, Skeleton, Typography } from 'antd';
+import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 
 import useLocale from '../../../hooks/useLocale';
@@ -57,6 +57,9 @@ const useStyle = createStyles(({ token, css, cx }) => {
       }
     `,
     carousel,
+    bannerBg: css`
+      height: ${token.fontSize}px;
+    `,
   };
 });
 
@@ -66,8 +69,8 @@ interface RecommendItemProps {
   icons: Icon[];
   className?: string;
 }
+
 const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, className }) => {
-  const token = useTheme();
   const { styles } = useStyle();
 
   if (!extra) {
@@ -87,10 +90,10 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
       <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
         {extra.description}
       </Typography.Paragraph>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <Flex justify="space-between" align="center">
         <Typography.Text>{extra.date}</Typography.Text>
-        {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
+        {icon && <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />}
-      </div>
+      </Flex>
     </a>
   );
 

.dumi/pages/index/components/ComponentsList.tsx

@@ -12,7 +12,7 @@ import {
   Tour,
   Typography,
 } from 'antd';
-import { createStyles, css, useTheme } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 
@@ -104,6 +104,13 @@ const useStyle = () => {
         justify-content: center;
       `,
       carousel,
+      componentsList: css`
+        width: 100%;
+        overflow: hidden;
+      `,
+      mobileComponentsList: css`
+        margin: 0 ${token.margin}px;
+      `,
     };
   })();
 };
@@ -142,7 +149,6 @@ interface ComponentItemProps {
 }
 
 const ComponentsList: React.FC = () => {
-  const token = useTheme();
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const { isMobile } = useContext(SiteContext);
@@ -260,21 +266,33 @@ const ComponentsList: React.FC = () => {
   );
 
   return isMobile ? (
-    <div style={{ margin: '0 16px' }}>
+    <div className={styles.mobileComponentsList}>
       <Carousel className={styles.carousel}>
         {COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
-          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+          <ComponentItem
+            title={title}
+            node={node}
+            type={type}
+            index={index}
+            key={`mobile-item-${index}`}
+          />
         ))}
       </Carousel>
     </div>
   ) : (
-    <div style={{ width: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center' }}>
+    <Flex justify="center" className={styles.componentsList}>
-      <div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
+      <Flex align="stretch" gap="large">
         {COMPONENTS.map<React.ReactNode>(({ title, node, type }, index) => (
-          <ComponentItem title={title} node={node} type={type} index={index} key={index} />
+          <ComponentItem
+            title={title}
+            node={node}
+            type={type}
+            index={index}
+            key={`desktop-item-${index}`}
+          />
         ))}
-      </div>
+      </Flex>
-    </div>
+    </Flex>
   );
 };
 

.dumi/pages/index/components/DesignFramework.tsx

@@ -134,7 +134,7 @@ const DesignFramework: React.FC = () => {
           <Col key={index} span={colSpan}>
             <Link to={path}>
               <div className={styles.card}>
-                <img alt={title} src={img} />
+                <img draggable={false} alt={title} src={img} />
 
                 <Typography.Title
                   level={4}
@@ -158,7 +158,12 @@ const DesignFramework: React.FC = () => {
         return (
           <Col key={index} span={colSpan}>
             <a className={styles.cardMini} target="_blank" href={url} rel="noreferrer">
-              <img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
+              <img
+                draggable={false}
+                alt={title}
+                src={img}
+                style={{ transform: `scale(${imgScale})` }}
+              />
 
               <Typography.Title
                 level={4}

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

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import { ConfigProvider, Flex, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { useLocation } from 'dumi';
+
 import useLocale from '../../../../hooks/useLocale';
 import LinkButton from '../../../../theme/common/LinkButton';
 import SiteContext from '../../../../theme/slots/SiteContext';
@@ -117,12 +118,14 @@ const PreviewBanner: React.FC<React.PropsWithChildren> = (props) => {
     <GroupMaskLayer>
       {/* Image Left Top */}
       <img
+        draggable={false}
         style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
         src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
         alt="bg"
       />
       {/* Image Right Top */}
       <img
+        draggable={false}
         style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }}
         src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
         alt="bg"

.dumi/pages/index/components/Theme/BackgroundImage.tsx

@@ -64,10 +64,11 @@ const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight
             <source srcSet={entity.webp} type="image/webp" />
             <source srcSet={entity.url} type="image/jpeg" />
             <img
+              draggable={false}
               className={cls}
               style={{ ...style, opacity: isLight ? opacity : 0 }}
               src={entity.url}
-              alt=""
+              alt="bg"
             />
           </picture>
         );

.dumi/pages/index/components/Theme/MobileCarousel.tsx

@@ -113,7 +113,7 @@ const MobileCarousel: React.FC<MobileCarouselProps> = (props) => {
       <Carousel className={styles.carousel} afterChange={setCurrentSlider}>
         {mobileImageConfigList.map((item, index) => (
           <div key={index}>
-            <img src={item.imageSrc} className={styles.img} alt="" />
+            <img draggable={false} src={item.imageSrc} className={styles.img} alt="carousel" />
           </div>
         ))}
       </Carousel>

.dumi/pages/index/index.tsx

@@ -78,12 +78,13 @@ const Homepage: React.FC = () => {
         <Group
           title={locale.designTitle}
           description={locale.designDesc}
-          background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
+          background={isRootDark ? '#393F4A' : '#F5F8FF'}
           decoration={
             <img
+              draggable={false}
               className={styles.image}
               src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
-              alt=""
+              alt="bg"
             />
           }
         >

.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx

@@ -28,7 +28,7 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }
 
 const useStyle = createStyles(({ token, css }) => ({
-  ref: css`
+  linkRef: css`
     margin-inline-start: ${token.marginXS}px;
   `,
   bug: css`
@@ -57,6 +57,16 @@ const useStyle = createStyles(({ token, css }) => ({
       }
     }
   `,
+  extraLink: css`
+    font-size: ${token.fontSize}px;
+  `,
+  drawerContent: {
+    position: 'relative',
+    [`> ${token.antCls}-drawer-body`]: {
+      scrollbarWidth: 'thin',
+      scrollbarColor: 'unset',
+    },
+  },
 }));
 
 export interface ComponentChangelogProps {
@@ -117,7 +127,7 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
       <span>{parsedChangelog}</span>
       {/* Refs */}
       {refs?.map((ref) => (
-        <a className={styles.ref} key={ref} href={ref} target="_blank" rel="noreferrer">
+        <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
           #{ref.match(/^.*\/(\d+)$/)?.[1]}
         </a>
       ))}
@@ -223,27 +233,21 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
 
   return (
     <>
-      <Button
+      <Button icon={<HistoryOutlined />} onClick={() => setShow(true)}>
-        icon={<HistoryOutlined />}
-        onClick={() => {
-          setShow(true);
-        }}
-      >
         {locale.changelog}
       </Button>
       <Drawer
+        destroyOnClose
+        className={styles.drawerContent}
         title={locale.changelog}
         extra={
-          <Link style={{ fontSize: 14 }} to={`/changelog${lang === 'cn' ? '-cn' : ''}`}>
+          <Link className={styles.extraLink} to={`/changelog${lang === 'cn' ? '-cn' : ''}`}>
             {locale.full}
           </Link>
         }
         open={show}
         width={width}
-        onClose={() => {
+        onClose={() => setShow(false)}
-          setShow(false);
-        }}
-        destroyOnClose
       >
         <Timeline items={timelineItems} />
       </Drawer>

.dumi/theme/common/ThemeSwitch/index.tsx

@@ -35,7 +35,6 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
       icon={<ThemeIcon />}
       aria-label="Theme Switcher"
       badge={{ dot: true }}
-      style={{ zIndex: 1010 }}
     >
       <Link
         to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}

.dumi/theme/common/styles/Markdown.tsx

@@ -24,6 +24,7 @@ const GlobalStyle: React.FC = () => {
         }
 
         .markdown img {
+          display: block;
           max-width: calc(100% - 32px);
           max-height: 100%;
         }
@@ -183,6 +184,8 @@ const GlobalStyle: React.FC = () => {
           background-color: ${token.siteMarkdownCodeBg};
           border-radius: ${token.borderRadius}px;
           > pre.prism-code {
+            scrollbar-width: thin;
+            scrollbar-color: unset;
             padding: ${token.paddingSM}px ${token.paddingMD}px;
             font-size: ${token.fontSize}px;
             line-height: 2;

components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -90,7 +90,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 2`
 
 exports[`renders components/affix/demo/target.tsx extend context correctly 1`] = `
 <div
-  style="width: 100%; height: 100px; overflow: auto; box-shadow: 0 0 0 1px #40a9ff;"
+  style="width: 100%; height: 100px; overflow: auto; box-shadow: 0 0 0 1px #1677ff;"
 >
   <div
     style="width: 100%; height: 1000px;"

components/affix/__tests__/__snapshots__/demo.test.tsx.snap

@@ -84,7 +84,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
 
 exports[`renders components/affix/demo/target.tsx correctly 1`] = `
 <div
-  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #40a9ff"
+  style="width:100%;height:100px;overflow:auto;box-shadow:0 0 0 1px #1677ff;scrollbar-width:thin;scrollbar-color:unset"
 >
   <div
     style="width:100%;height:1000px"

components/affix/demo/target.tsx

@@ -5,7 +5,9 @@ const containerStyle: React.CSSProperties = {
   width: '100%',
   height: 100,
   overflow: 'auto',
-  boxShadow: '0 0 0 1px #40a9ff',
+  boxShadow: '0 0 0 1px #1677ff',
+  scrollbarWidth: 'thin',
+  scrollbarColor: 'unset',
 };
 
 const style: React.CSSProperties = {

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -28,9 +28,9 @@ import { TIME } from './constant';
 import type { RangePickerProps } from './interface';
 import useComponents from './useComponents';
 
-export default function generateRangePicker<DateType extends AnyObject>(
+const generateRangePicker = <DateType extends AnyObject = AnyObject>(
   generateConfig: GenerateConfig<DateType>,
-) {
+) => {
   type DateRangePickerProps = RangePickerProps<DateType>;
 
   const RangePicker = forwardRef<PickerRef, DateRangePickerProps>((props, ref) => {
@@ -179,4 +179,6 @@ export default function generateRangePicker<DateType extends AnyObject>(
   }
 
   return RangePicker;
-}
+};
+
+export default generateRangePicker;

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -39,7 +39,9 @@ import {
 import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
 import useComponents from './useComponents';
 
-const generatePicker = <DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) => {
+const generatePicker = <DateType extends AnyObject = AnyObject>(
+  generateConfig: GenerateConfig<DateType>,
+) => {
   type DatePickerProps = PickerProps<DateType>;
   type TimePickerProps = GenericTimePickerProps<DateType>;
 

components/date-picker/generatePicker/index.tsx

@@ -6,7 +6,9 @@ import generateSinglePicker from './generateSinglePicker';
 
 export type { PickerLocale, PickerProps } from './interface';
 
-function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConfig<DateType>) {
+const generatePicker = <DateType extends AnyObject = AnyObject>(
+  generateConfig: GenerateConfig<DateType>,
+) => {
   // =========================== Picker ===========================
   const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } =
     generateSinglePicker(generateConfig);
@@ -39,6 +41,6 @@ function generatePicker<DateType extends AnyObject>(generateConfig: GenerateConf
   }
 
   return MergedDatePicker;
-}
+};
 
 export default generatePicker;

components/grid/index.en-US.md

@@ -10,7 +10,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
 ## Design concept
 
 <div class="grid-demo">
-  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
+  <img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
 </div>
 
 In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

components/grid/index.zh-CN.md

@@ -11,7 +11,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA
 ## 设计理念
 
 <div class="grid-demo">
-  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
+  <img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
 </div>
 
 在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。

components/layout/__tests__/__snapshots__/demo.test.ts.snap

@@ -747,7 +747,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
 >
   <aside
     class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow:auto;height:100vh;position:fixed;left:0;top:0;bottom:0;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+    style="overflow:auto;height:100vh;position:fixed;left:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-color:unset;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="ant-layout-sider-children"

components/layout/demo/fixed-sider.tsx

@@ -14,6 +14,17 @@ import { Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
+const siderStyle: React.CSSProperties = {
+  overflow: 'auto',
+  height: '100vh',
+  position: 'fixed',
+  left: 0,
+  top: 0,
+  bottom: 0,
+  scrollbarWidth: 'thin',
+  scrollbarColor: 'unset',
+};
+
 const items: MenuProps['items'] = [
   UserOutlined,
   VideoCameraOutlined,
@@ -36,9 +47,7 @@ const App: React.FC = () => {
 
   return (
     <Layout hasSider>
-      <Sider
+      <Sider style={siderStyle}>
-        style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }}
-      >
         <div className="demo-logo-vertical" />
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
       </Sider>