site: update site/demo style (#50107)

* site: update site/demo style * fix: fix lint
2024-11-24 02:59:58 +08:00 · 2024-07-27 16:13:25 +08:00 · 2024-07-27 16:13:25 +08:00 · f56fee1333
commit f56fee1333
parent cd4199e83f
20 changed files with 104 additions and 50 deletions
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { Badge, Carousel, Skeleton, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { Badge, Carousel, Flex, Skeleton, Typography } from 'antd';
+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" />}
-      </div>
+        {icon && <img src={icon.href} draggable={false} className={styles.bannerBg} alt="banner" />}
+      </Flex>
    </a>
  );

--- a/.dumi/pages/index/components/ComponentsList.tsx
+++ b/.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' }}>
-      <div style={{ display: 'flex', alignItems: 'stretch', columnGap: token.paddingLG }}>
+    <Flex justify="center" className={styles.componentsList}>
+      <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>
-    </div>
+      </Flex>
+    </Flex>
  );
 };

--- a/.dumi/pages/index/components/DesignFramework.tsx
+++ b/.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}
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.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"
--- a/.dumi/pages/index/components/Theme/BackgroundImage.tsx
+++ b/.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>
        );
--- a/.dumi/pages/index/components/Theme/MobileCarousel.tsx
+++ b/.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>
--- a/.dumi/pages/index/index.tsx
+++ b/.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"
            />
          }
        >
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.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
-        icon={<HistoryOutlined />}
-        onClick={() => {
-          setShow(true);
-        }}
-      >
+      <Button 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={() => {
-          setShow(false);
-        }}
-        destroyOnClose
+        onClose={() => setShow(false)}
      >
        <Timeline items={timelineItems} />
      </Drawer>
--- a/.dumi/theme/common/ThemeSwitch/index.tsx
+++ b/.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)}
--- a/.dumi/theme/common/styles/Markdown.tsx
+++ b/.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;
--- a/components/affix/tests/snapshots/demo-extend.test.ts.snap
+++ b/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;"
--- a/components/affix/tests/snapshots/demo.test.tsx.snap
+++ b/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"
--- a/components/affix/demo/target.tsx
+++ b/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 = {
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/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;
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/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>;

--- a/components/date-picker/generatePicker/index.tsx
+++ b/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;
--- a/components/grid/index.en-US.md
+++ b/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.
--- a/components/grid/index.zh-CN.md
+++ b/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 等分的原则进行划分。
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/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"
--- a/components/layout/demo/fixed-sider.tsx
+++ b/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
-        style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }}
-      >
+      <Sider style={siderStyle}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
      </Sider>