chore: feature merge master

.antd-tools.config.js

@@ -1,23 +1,21 @@
 const fs = require('fs');
 const path = require('path');
 
+const restCssPath = path.join(process.cwd(), 'components', 'style', 'reset.css');
+
 function finalizeCompile() {
   if (fs.existsSync(path.join(__dirname, './es'))) {
-    // Build less entry file: dist/antd.less
-    fs.copyFileSync(
-      path.join(process.cwd(), 'components', 'style', 'reset.css'),
-      path.join(process.cwd(), 'es', 'style', 'reset.css'),
-    );
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'es', 'style', 'reset.css'));
+  }
+
+  if (fs.existsSync(path.join(__dirname, './lib'))) {
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'lib', 'style', 'reset.css'));
   }
 }
 
 function finalizeDist() {
   if (fs.existsSync(path.join(__dirname, './dist'))) {
-    // Build less entry file: dist/antd.less
-    fs.copyFileSync(
-      path.join(process.cwd(), 'components', 'style', 'reset.css'),
-      path.join(process.cwd(), 'dist', 'reset.css'),
-    );
+    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'dist', 'reset.css'));
   }
 }
 

.dumi/hooks/useMenu.tsx

@@ -58,7 +58,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
             }, {});
             const childItems = [];
             childItems.push(
-              ...childrenGroup.default.map(item => ({
+              ...childrenGroup.default.map((item) => ({
                 label: (
                   <Link to={item.link}>
                     {before}
@@ -75,7 +75,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                   type: 'group',
                   label: type,
                   key: type,
-                  children: children?.map(item => ({
+                  children: children?.map((item) => ({
                     label: (
                       <Link to={item.link}>
                         {before}
@@ -98,7 +98,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               type: 'group',
               label: group.title,
               key: group.title,
-              children: group.children?.map(item => ({
+              children: group.children?.map((item) => ({
                 label: (
                   <Link to={item.link}>
                     {before}
@@ -115,7 +115,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           }
         } else {
           result.push(
-            ...group.children?.map(item => ({
+            ...group.children?.map((item) => ({
               label: (
                 <Link to={item.link}>
                   {before}

.dumi/hooks/useSiteToken.ts

@@ -26,7 +26,7 @@ const useSiteToken = () => {
       /** 80 */
       marginFarSM: (token.marginXXL / 3) * 5,
       /** 96 */
-      marginFar: token.marginXXL * 1.8,
+      marginFar: token.marginXXL * 2,
       codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
     },
   };

.dumi/pages/index/components/Banner.tsx

@@ -8,14 +8,14 @@ import * as utils from '../../../theme/utils';
 
 const locales = {
   cn: {
-    slogan: '助力设计开发者「更灵活」的搭建出「更美」的产品，让用户「快乐工作」～',
+    slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～',
     start: '开始使用',
     designLanguage: '设计语言',
   },
   en: {
     slogan:
-      'Help design developers "more flexible" to build "more beautiful" products, helping users to "work happily"~',
-    start: 'Get Start',
+      'Help designers/developers building beautiful products more flexible and working with happiness',
+    start: 'Getting Started',
     designLanguage: 'Design Language',
   },
 };
@@ -36,7 +36,7 @@ export default function Banner({ children }: BannerProps) {
       {/* Banner Placeholder Motion */}
       <div
         style={{
-          height: 240,
+          height: 320,
           background: '#77C6FF',
           display: 'flex',
           flexWrap: 'nowrap',
@@ -53,12 +53,7 @@ export default function Banner({ children }: BannerProps) {
           }}
         />
 
-        <video
-          style={{ height: '100%', objectFit: 'contain' }}
-          autoPlay
-          muted
-          loop
-        >
+        <video style={{ height: '100%', objectFit: 'contain' }} autoPlay muted loop>
           <source
             src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
             type="video/webm"
@@ -76,6 +71,7 @@ export default function Banner({ children }: BannerProps) {
             backgroundRepeat: 'repeat-x',
             backgroundPosition: '0 0',
             backgroundSize: 'auto 100%',
+            marginLeft: -1,
           }}
         />
       </div>
@@ -91,7 +87,7 @@ export default function Banner({ children }: BannerProps) {
         <GroupMask
           style={{
             textAlign: 'center',
-            paddingTop: token.marginFar,
+            paddingTop: token.marginFar - 16,
             paddingBottom: token.marginFarSM,
           }}
         >

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

@@ -54,7 +54,7 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco
     >
       {first3.map((extra, index) => {
         if (!extra) {
-          return <Skeleton />;
+          return <Skeleton key={index} />;
         }
         const icon = icons.find((icon) => icon.name === extra.source);
         return (

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

@@ -10,7 +10,6 @@ import {
   Modal,
   FloatButton,
   Progress,
-  ConfigProvider,
 } from 'antd';
 import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
@@ -222,7 +221,7 @@ export default function ComponentsList() {
           const tagText = type === 'new' ? locale.new : locale.update;
 
           return (
-            <div key={index} css={styles.card} style={{ pointerEvents: 'none' }}>
+            <div key={index} css={styles.card}>
               {/* Decorator */}
               <div
                 css={styles.cardCircle}

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

@@ -54,7 +54,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
     const valueStr = new TinyColor(value).toRgbString();
     let existActive = false;
 
-    const colors = PRESET_COLORS.map(color => {
+    const colors = PRESET_COLORS.map((color) => {
       const colorStr = new TinyColor(color).toRgbString();
       const active = colorStr === valueStr;
       existActive = existActive || active;
@@ -80,7 +80,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
     <Space size="large">
       <Input
         value={value}
-        onChange={event => {
+        onChange={(event) => {
           onChange?.(event.target.value);
         }}
         style={{ width: 120 }}
@@ -109,7 +109,10 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                 key={color}
                 overlayInnerStyle={{ padding: 0 }}
                 content={
-                  <DebouncedColorPanel color={value || ''} onChange={color => onChange?.(color)} />
+                  <DebouncedColorPanel
+                    color={value || ''}
+                    onChange={(color) => onChange?.(color)}
+                  />
                 }
                 trigger="click"
                 showArrow={false}

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

@@ -14,8 +14,8 @@ export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
         onChange={onChange}
         style={{ width: 120 }}
         min={0}
-        formatter={val => `${val}px`}
-        parser={str => (str ? parseFloat(str) : (str as any))}
+        formatter={(val) => `${val}px`}
+        parser={(str) => (str ? parseFloat(str) : (str as any))}
       />
 
       <Slider

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

@@ -74,7 +74,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
 
   return (
     <Space size={token.paddingLG}>
-      {Object.keys(THEMES).map(theme => {
+      {Object.keys(THEMES).map((theme) => {
         const url = THEMES[theme as THEME];
 
         return (

.dumi/pages/index/components/Theme/colorUtil.ts

@@ -73,7 +73,7 @@ export function getAvatarURL(color?: string | null) {
   }
 
   return (
-    COLOR_IMAGES.find(obj => obj.color === closestColor)?.url ||
+    COLOR_IMAGES.find((obj) => obj.color === closestColor)?.url ||
     'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*CLp0Qqc11AkAAAAAAAAAAAAAARQnAQ'
   );
 }

.dumi/pages/index/components/util.tsx

@@ -72,7 +72,7 @@ export function preLoad(list: string[]) {
     const div = document.createElement('div');
     div.style.display = 'none';
     document.body.appendChild(div);
-    list.forEach(src => {
+    list.forEach((src) => {
       const img = new Image();
       img.src = src;
       div.appendChild(img);
@@ -88,8 +88,8 @@ export function useSiteData(): [Partial<SiteData>, boolean] {
     if (Object.keys(data ?? {}).length === 0 && typeof fetch !== 'undefined') {
       setLoading(true);
       fetch(`https://render.alipay.com/p/h5data/antd4-config_website-h5data.json`)
-        .then(res => res.json())
-        .then(result => {
+        .then((res) => res.json())
+        .then((result) => {
           setData(result);
           setLoading(false);
         });

.dumi/pages/theme-editor/index.tsx

@@ -24,7 +24,7 @@ const CustomTheme = () => {
           theme={{ name: 'test', key: 'test', config: theme }}
           simple
           style={{ height: 'calc(100vh - 64px)' }}
-          onThemeChange={newTheme => {
+          onThemeChange={(newTheme) => {
             setTheme(newTheme.config);
           }}
         />

.dumi/rehypeAntd.ts

@@ -6,6 +6,8 @@ import { type HastRoot, type UnifiedTransformer, unistUtilVisit } from 'dumi';
  */
 function rehypeAntd(): UnifiedTransformer<HastRoot> {
   return (tree, vFile) => {
+    const filename = (vFile.data.frontmatter as any).filename;
+
     unistUtilVisit.visit(tree, 'element', (node) => {
       if (node.tagName === 'DumiDemoGrid') {
         // replace DumiDemoGrid to DemoWrapper, to implement demo toolbar
@@ -16,9 +18,7 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
 
         assert(
           contentNode.type === 'text',
-          `ResourceCards content must be plain text!\nat ${
-            (vFile.data.frontmatter as any).filename
-          }`,
+          `ResourceCards content must be plain text!\nat ${filename}`,
         );
 
         // clear children
@@ -52,6 +52,14 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
             ),
           },
         ];
+      } else if (
+        node.type === 'element' &&
+        node.tagName === 'Table' &&
+        /^components/.test(filename)
+      ) {
+        if (!node.properties) return;
+        node.properties.className ??= [];
+        (node.properties.className as string[]).push('component-api-table');
       }
     });
   };

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -29,7 +29,6 @@ const useStyle = () => {
       align-items: center;
       justify-content: center;
       height: 152px;
-      background-color: ${token.colorBgElevated};
     `,
     componentsOverviewCard: css`
       cursor: pointer;
@@ -68,7 +67,7 @@ const onClickCard = (pathname: string) => {
   }
 };
 
-const reportSearch = debounce<(value: string) => void>(value => {
+const reportSearch = debounce<(value: string) => void>((value) => {
   if (window.gtag) {
     window.gtag('event', '搜索', {
       event_category: '组件总览卡片',
@@ -91,19 +90,19 @@ const Overview: React.FC = () => {
 
   const sectionRef = React.useRef<HTMLElement>(null);
 
-  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = event => {
+  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (event.keyCode === 13 && search.trim().length) {
       sectionRef.current?.querySelector<HTMLElement>('.components-overview-card')?.click();
     }
   };
 
   const groups = useMemo<{ title: string; children: Component[] }[]>(() => {
     return data
-      .filter(item => item.title)
-      .map<{ title: string; children: Component[] }>(item => {
+      .filter((item) => item.title)
+      .map<{ title: string; children: Component[] }>((item) => {
         return {
           title: item.title!,
-          children: item.children.map(child => ({
+          children: item.children.map((child) => ({
             title: child.frontmatter.title,
             subtitle: child.frontmatter.subtitle,
             cover: child.frontmatter.cover,
@@ -114,7 +113,10 @@ const Overview: React.FC = () => {
       .concat([
         {
           title: locale === 'zh-CN' ? '重型组件' : 'Others',
-          children: proComponentsList,
+          children:
+            locale === 'zh-CN'
+              ? proComponentsList
+              : proComponentsList.map((component) => ({ ...component, subtitle: '' })),
         },
       ]);
   }, [data, locale]);
@@ -126,7 +128,7 @@ const Overview: React.FC = () => {
         value={search}
         placeholder={formatMessage({ id: 'app.components.overview.search' })}
         css={style.componentsOverviewSearch}
-        onChange={e => {
+        onChange={(e) => {
           setSearch(e.target.value);
           reportSearch(e.target.value);
         }}
@@ -136,10 +138,10 @@ const Overview: React.FC = () => {
       />
       <Divider />
       {groups
-        .filter(i => i.title)
-        .map(group => {
+        .filter((i) => i.title)
+        .map((group) => {
           const components = group?.children?.filter(
-            component =>
+            (component) =>
               !search.trim() ||
               component.title.toLowerCase().includes(search.trim().toLowerCase()) ||
               (component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),
@@ -153,7 +155,7 @@ const Overview: React.FC = () => {
                 </Space>
               </Title>
               <Row gutter={[24, 24]}>
-                {components.map(component => {
+                {components.map((component) => {
                   const url = `${component.link}/`;
 
                   /** Link 不能跳转到外链 */

.dumi/theme/builtins/IconSearch/Category.tsx

@@ -12,7 +12,7 @@ interface CategoryProps {
   newIcons: string[];
 }
 
-const Category: React.FC<CategoryProps> = props => {
+const Category: React.FC<CategoryProps> = (props) => {
   const { icons, title, newIcons, theme } = props;
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
@@ -40,7 +40,7 @@ const Category: React.FC<CategoryProps> = props => {
     <div>
       <h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
       <ul className="anticons-list">
-        {icons.map(name => (
+        {icons.map((name) => (
           <CopyableIcon
             key={name}
             name={name}