From 284fce48710ef32d920ac68a21be359c3080d514 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 1 Apr 2025 07:50:38 +0800
Subject: [PATCH] site: add componentName for SemanticPreview (#53362)

* site: add componentName for SemanticPreview

* site: add componentName for SemanticPreview

* chore: fix
---
 components/alert/demo/_semantic.tsx           |  1 +
 components/anchor/demo/_semantic.tsx          |  4 +++-
 components/auto-complete/demo/_semantic.tsx   |  1 +
 components/badge/demo/_semantic_ribbon.tsx    |  4 +++-
 components/breadcrumb/demo/_semantic.tsx      |  4 +++-
 components/calendar/demo/_semantic.tsx        |  1 +
 components/card/demo/_semantic_meta.tsx       |  2 +-
 components/cascader/demo/_semantic.tsx        | 13 ++++++------
 components/checkbox/demo/_semantic.tsx        |  1 +
 .../color-picker/__tests__/index.test.tsx     |  4 ++--
 components/color-picker/demo/_semantic.tsx    |  4 +++-
 components/descriptions/demo/_semantic.tsx    | 20 +++++++++----------
 components/form/__tests__/index.test.tsx      |  7 +++++--
 components/form/demo/_semantic.tsx            |  2 +-
 components/image/demo/_semantic.tsx           |  1 +
 components/masonry/demo/_semantic.tsx         |  1 +
 components/mentions/demo/_semantic.tsx        |  1 +
 components/message/demo/_semantic.tsx         |  1 +
 components/notification/demo/_semantic.tsx    |  1 +
 components/pagination/demo/_semantic.tsx      |  1 +
 components/popconfirm/demo/_semantic.tsx      | 16 ++++++++-------
 components/popover/demo/_semantic.tsx         | 15 ++++++++------
 components/radio/demo/_semantic.tsx           |  1 +
 components/result/demo/_semantic.tsx          |  1 +
 components/segmented/demo/_semantic.tsx       |  1 +
 components/select/demo/_semantic.tsx          |  1 +
 components/skeleton/demo/_semantic.tsx        |  1 +
 .../skeleton/demo/_semantic_element.tsx       |  1 +
 components/spin/demo/_semantic.tsx            |  4 +++-
 components/spin/demo/_semantic_fullscreen.tsx |  9 ++++-----
 components/splitter/demo/_semantic.tsx        |  6 +++---
 components/statistic/demo/_semantic.tsx       |  5 +++--
 components/switch/demo/_semantic.tsx          |  1 +
 components/tabs/demo/_semantic.tsx            |  5 ++++-
 components/tag/demo/_semantic.tsx             |  1 +
 components/tag/demo/_semantic_group.tsx       |  1 +
 components/timeline/demo/_semantic.tsx        |  1 +
 components/tooltip/demo/_semantic.tsx         | 15 ++++++++------
 components/tour/demo/_semantic.tsx            | 18 +++++++----------
 components/tree-select/demo/_semantic.tsx     |  8 +++++---
 components/tree/demo/_semantic.tsx            |  1 +
 components/upload/demo/_semantic.tsx          |  4 +++-
 42 files changed, 117 insertions(+), 73 deletions(-)

diff --git a/components/alert/demo/_semantic.tsx b/components/alert/demo/_semantic.tsx
index 930015e394..d637194400 100644
--- a/components/alert/demo/_semantic.tsx
+++ b/components/alert/demo/_semantic.tsx
@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Alert"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/anchor/demo/_semantic.tsx b/components/anchor/demo/_semantic.tsx
index 0710f5a56b..6672e552ee 100644
--- a/components/anchor/demo/_semantic.tsx
+++ b/components/anchor/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Anchor } from 'antd';
+import type { AnchorProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -19,7 +20,7 @@ const locales = {
   },
 };
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<AnchorProps>> = (props) => {
   return (
     <Anchor
       {...props}
@@ -61,6 +62,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Anchor"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },
diff --git a/components/auto-complete/demo/_semantic.tsx b/components/auto-complete/demo/_semantic.tsx
index aae4b7afdc..9a6ae64449 100644
--- a/components/auto-complete/demo/_semantic.tsx
+++ b/components/auto-complete/demo/_semantic.tsx
@@ -51,6 +51,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="AutoComplete"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'input', desc: locale.input, version: '6.0.0' },
diff --git a/components/badge/demo/_semantic_ribbon.tsx b/components/badge/demo/_semantic_ribbon.tsx
index 3798f7b6f8..7c35379a08 100644
--- a/components/badge/demo/_semantic_ribbon.tsx
+++ b/components/badge/demo/_semantic_ribbon.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Badge, Card } from 'antd';
+import type { RibbonProps } from 'antd/es/badge/Ribbon';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -17,7 +18,7 @@ const locales = {
   },
 };
 
-const BlockList = (props: any) => {
+const BlockList: React.FC<Readonly<RibbonProps>> = (props) => {
   return (
     <div style={{ width: '100%' }}>
       <Badge.Ribbon {...props} text="Hippies" color="pink">
@@ -33,6 +34,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Badge"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'indicator', desc: locale.indicator, version: '6.0.0' },
diff --git a/components/breadcrumb/demo/_semantic.tsx b/components/breadcrumb/demo/_semantic.tsx
index 09e238138e..802541622e 100644
--- a/components/breadcrumb/demo/_semantic.tsx
+++ b/components/breadcrumb/demo/_semantic.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 import { Breadcrumb } from 'antd';
+import type { BreadcrumbProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -18,7 +19,7 @@ const locales = {
   },
 };
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<BreadcrumbProps>> = (props) => {
   return (
     <Breadcrumb
       {...props}
@@ -48,6 +49,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Breadcrumb"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },
diff --git a/components/calendar/demo/_semantic.tsx b/components/calendar/demo/_semantic.tsx
index 4a4fd404f4..8665d54bfd 100644
--- a/components/calendar/demo/_semantic.tsx
+++ b/components/calendar/demo/_semantic.tsx
@@ -25,6 +25,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Calendar"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },
diff --git a/components/card/demo/_semantic_meta.tsx b/components/card/demo/_semantic_meta.tsx
index b9a6eb6e59..5a742c9d58 100644
--- a/components/card/demo/_semantic_meta.tsx
+++ b/components/card/demo/_semantic_meta.tsx
@@ -25,7 +25,6 @@ const locales = {
 
 const BlockCard: React.FC<React.PropsWithChildren> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute' }}>
       <Card style={{ width: 300 }}>
@@ -44,6 +43,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Card.Meta"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'section', desc: locale.section, version: '6.0.0' },
diff --git a/components/cascader/demo/_semantic.tsx b/components/cascader/demo/_semantic.tsx
index 098b448f89..5e00d2e227 100644
--- a/components/cascader/demo/_semantic.tsx
+++ b/components/cascader/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Cascader } from 'antd';
+import type { CascaderProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -31,12 +32,9 @@ const options = [
   },
 ];
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<CascaderProps<any, any, any>>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   const [value, setValue] = React.useState<string[]>(['contributors', 'aojunhao123']);
-  const onChange = (newValue: string[]) => {
-    setValue(newValue);
-  };
   return (
     <div ref={divRef} style={{ marginBottom: 60 }}>
       <Cascader
@@ -48,20 +46,21 @@ const Block = (props: any) => {
             height: 70,
           },
         }}
-        getPopupContainer={() => divRef.current}
+        getPopupContainer={() => divRef.current!}
         value={value}
-        onChange={onChange}
+        onChange={setValue}
         options={options}
         placement="bottomLeft"
       />
     </div>
   );
 };
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Cascader"
       semantics={[
         { name: 'root', desc: locale.root, version: '5.25.0' },
         { name: 'popup', desc: locale.popup, version: '5.25.0' },
diff --git a/components/checkbox/demo/_semantic.tsx b/components/checkbox/demo/_semantic.tsx
index 0abf871481..cb15f28616 100644
--- a/components/checkbox/demo/_semantic.tsx
+++ b/components/checkbox/demo/_semantic.tsx
@@ -21,6 +21,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Checkbox"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index 290eddb87d..2069d71d02 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -698,7 +698,7 @@ describe('ColorPicker', () => {
   });
 
   it('Controlled string value should work with allowClear correctly', async () => {
-    const Demo = (props: any) => {
+    const Demo: React.FC<Readonly<ColorPickerProps>> = (props) => {
       const [color, setColor] = useState<ColorValueType>(generateColor('#FF0000'));
 
       useEffect(() => {
@@ -737,7 +737,7 @@ describe('ColorPicker', () => {
   });
 
   it('Controlled value should work with allowClear correctly', async () => {
-    const Demo = (props: any) => {
+    const Demo: React.FC<Readonly<ColorPickerProps>> = (props) => {
       const [color, setColor] = useState<ColorValueType>(generateColor('red'));
 
       useEffect(() => {
diff --git a/components/color-picker/demo/_semantic.tsx b/components/color-picker/demo/_semantic.tsx
index ef1b2318b2..7d58d1a3f4 100644
--- a/components/color-picker/demo/_semantic.tsx
+++ b/components/color-picker/demo/_semantic.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ColorPickerProps } from 'antd';
 import { ColorPicker } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
@@ -15,7 +16,7 @@ const locales = {
   },
 };
 
-const Block: React.FC = (props: any) => {
+const Block: React.FC<Readonly<ColorPickerProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   return (
     <div ref={divRef} style={{ height: 300 }}>
@@ -34,6 +35,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="ColorPicker"
       semantics={[
         { name: 'root', desc: locale.root },
         { name: 'popup', desc: locale.popup },
diff --git a/components/descriptions/demo/_semantic.tsx b/components/descriptions/demo/_semantic.tsx
index a263c5653d..8b7a42733e 100644
--- a/components/descriptions/demo/_semantic.tsx
+++ b/components/descriptions/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, Descriptions, DescriptionsProps, Divider, Switch } from 'antd';
+import { Button, Descriptions, Divider, Switch } from 'antd';
+import type { DescriptionsProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -31,25 +32,24 @@ const items: DescriptionsProps['items'] = [
   },
 ];
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<DescriptionsProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
   const [bordered, setBordered] = React.useState(false);
-
-  const handleBorderChange = (checked: boolean) => {
-    setBordered(checked);
-  };
-
   return (
     <div ref={divRef} style={{ width: '100%', height: '100%' }}>
-      <Switch checked={bordered} onChange={handleBorderChange} /> Toggle Border
+      <Switch checked={bordered} onChange={setBordered} />
+      Toggle Border
       <Divider />
       <Descriptions
         title="User Info"
         items={items}
         extra={<Button type="primary">Edit</Button>}
         bordered={bordered}
-        {...props}
-      />
+        {...rest}
+      >
+        {children}
+      </Descriptions>
     </div>
   );
 };
diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
index efb0602cee..232647ce57 100644
--- a/components/form/__tests__/index.test.tsx
+++ b/components/form/__tests__/index.test.tsx
@@ -19,6 +19,7 @@ import ConfigProvider from '../../config-provider';
 import DatePicker from '../../date-picker';
 import Drawer from '../../drawer';
 import Input from '../../input';
+import type { InputProps } from '../../input';
 import InputNumber from '../../input-number';
 import zhCN from '../../locale/zh_CN';
 import Modal from '../../modal';
@@ -565,7 +566,9 @@ describe('Form', () => {
         return <input {...props} ref={internalRef} />;
       });
 
-      const NormalInput = (props: any) => <input {...props} />;
+      const NormalInput: React.FC<Readonly<React.DOMAttributes<HTMLInputElement>>> = (props) => (
+        <input {...props} />
+      );
 
       const { getByRole, getAllByRole } = render(
         <Form scrollToFirstError>
@@ -2249,7 +2252,7 @@ describe('Form', () => {
   it('validate status should be change in order', async () => {
     const onChange = jest.fn();
 
-    const CustomInput = (props: any) => {
+    const CustomInput: React.FC<Readonly<InputProps>> = (props) => {
       const { status } = Form.Item.useStatus();
       useEffect(() => {
         onChange(status);
diff --git a/components/form/demo/_semantic.tsx b/components/form/demo/_semantic.tsx
index 93990ddbab..dc9c308b87 100644
--- a/components/form/demo/_semantic.tsx
+++ b/components/form/demo/_semantic.tsx
@@ -21,6 +21,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Form"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'label', desc: locale.label, version: '6.0.0' },
@@ -42,7 +43,6 @@ const App: React.FC = () => {
         >
           <Input />
         </Form.Item>
-
         <Form.Item
           label="Password"
           name="password"
diff --git a/components/image/demo/_semantic.tsx b/components/image/demo/_semantic.tsx
index 3cefd6145a..99717e3b8c 100644
--- a/components/image/demo/_semantic.tsx
+++ b/components/image/demo/_semantic.tsx
@@ -108,6 +108,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Image"
       padding={false}
       semantics={[
         { name: 'root', desc: locale.root },
diff --git a/components/masonry/demo/_semantic.tsx b/components/masonry/demo/_semantic.tsx
index 73ecf8665a..031e31a2fa 100644
--- a/components/masonry/demo/_semantic.tsx
+++ b/components/masonry/demo/_semantic.tsx
@@ -24,6 +24,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Masonry"
       semantics={[
         { name: 'root', desc: locale.root },
         { name: 'item', desc: locale.item },
diff --git a/components/mentions/demo/_semantic.tsx b/components/mentions/demo/_semantic.tsx
index edc4a5f2b0..ae1bd4d1fa 100644
--- a/components/mentions/demo/_semantic.tsx
+++ b/components/mentions/demo/_semantic.tsx
@@ -59,6 +59,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Mentions"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'textarea', desc: locale.textarea, version: '6.0.0' },
diff --git a/components/message/demo/_semantic.tsx b/components/message/demo/_semantic.tsx
index 6310c2583a..b3ba7c6f9b 100644
--- a/components/message/demo/_semantic.tsx
+++ b/components/message/demo/_semantic.tsx
@@ -23,6 +23,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Message"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/notification/demo/_semantic.tsx b/components/notification/demo/_semantic.tsx
index 37b9b187ae..f35b1cabb1 100644
--- a/components/notification/demo/_semantic.tsx
+++ b/components/notification/demo/_semantic.tsx
@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Notification"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/pagination/demo/_semantic.tsx b/components/pagination/demo/_semantic.tsx
index 26b944fb8b..f7be497391 100644
--- a/components/pagination/demo/_semantic.tsx
+++ b/components/pagination/demo/_semantic.tsx
@@ -19,6 +19,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Pagination"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },
diff --git a/components/popconfirm/demo/_semantic.tsx b/components/popconfirm/demo/_semantic.tsx
index 83c9365fa8..9110546752 100644
--- a/components/popconfirm/demo/_semantic.tsx
+++ b/components/popconfirm/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Popconfirm } from 'antd';
+import type { PopconfirmProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,19 +16,20 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<PopconfirmProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
       <Popconfirm
-        title="prompt text"
         open
         placement="top"
         autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Popconfirm>
     </div>
   );
 };
@@ -42,7 +44,7 @@ const App: React.FC = () => {
         { name: 'body', desc: locale.body, version: '5.23.0' },
       ]}
     >
-      <BlockList />
+      <BlockList title="popconfirm prompt text" />
     </SemanticPreview>
   );
 };
diff --git a/components/popover/demo/_semantic.tsx b/components/popover/demo/_semantic.tsx
index 6b9c5a2188..a19b152216 100644
--- a/components/popover/demo/_semantic.tsx
+++ b/components/popover/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Popover } from 'antd';
+import type { PopoverProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,19 +16,21 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<PopoverProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
       <Popover
-        title="prompt text"
         open
         placement="top"
+        title="popover prompt text"
         autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Popover>
     </div>
   );
 };
diff --git a/components/radio/demo/_semantic.tsx b/components/radio/demo/_semantic.tsx
index a6612ab7a0..0d0fd2f294 100644
--- a/components/radio/demo/_semantic.tsx
+++ b/components/radio/demo/_semantic.tsx
@@ -21,6 +21,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Radio"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/result/demo/_semantic.tsx b/components/result/demo/_semantic.tsx
index 66e7531f43..b4978c4882 100644
--- a/components/result/demo/_semantic.tsx
+++ b/components/result/demo/_semantic.tsx
@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Result"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/segmented/demo/_semantic.tsx b/components/segmented/demo/_semantic.tsx
index 0a5bac9b0d..2cbe12c03d 100644
--- a/components/segmented/demo/_semantic.tsx
+++ b/components/segmented/demo/_semantic.tsx
@@ -24,6 +24,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Segmented"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },
diff --git a/components/select/demo/_semantic.tsx b/components/select/demo/_semantic.tsx
index 0af993e4e5..25c3688960 100644
--- a/components/select/demo/_semantic.tsx
+++ b/components/select/demo/_semantic.tsx
@@ -52,6 +52,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="Select"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'prefix', desc: locale.prefix, version: '6.0.0' },
diff --git a/components/skeleton/demo/_semantic.tsx b/components/skeleton/demo/_semantic.tsx
index e1329b5f7d..8eca8de41e 100644
--- a/components/skeleton/demo/_semantic.tsx
+++ b/components/skeleton/demo/_semantic.tsx
@@ -28,6 +28,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Skeleton"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },
diff --git a/components/skeleton/demo/_semantic_element.tsx b/components/skeleton/demo/_semantic_element.tsx
index 70017dfa5b..f6f7204feb 100644
--- a/components/skeleton/demo/_semantic_element.tsx
+++ b/components/skeleton/demo/_semantic_element.tsx
@@ -75,6 +75,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="Skeleton.Element"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'content', desc: locale.content, version: '6.0.0' },
diff --git a/components/spin/demo/_semantic.tsx b/components/spin/demo/_semantic.tsx
index 25af624cc9..9389265bec 100644
--- a/components/spin/demo/_semantic.tsx
+++ b/components/spin/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Spin } from 'antd';
+import type { SpinProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,7 +16,7 @@ const locales = {
   },
 };
 
-const SpinBlock = (props: any) => {
+const SpinBlock: React.FC<Readonly<SpinProps>> = (props) => {
   return (
     <div
       style={{
@@ -37,6 +38,7 @@ const App: React.FC = () => {
 
   return (
     <SemanticPreview
+      componentName="Spin"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'indicator', desc: locale.indicator, version: '6.0.0' },
diff --git a/components/spin/demo/_semantic_fullscreen.tsx b/components/spin/demo/_semantic_fullscreen.tsx
index 28d234628f..a530f9fc83 100644
--- a/components/spin/demo/_semantic_fullscreen.tsx
+++ b/components/spin/demo/_semantic_fullscreen.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Spin } from 'antd';
+import type { SpinProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,16 +16,14 @@ const locales = {
   },
 };
 
-const SpinBlock = (props: any) => {
+const SpinBlock: React.FC<Readonly<SpinProps>> = (props) => {
   return (
     <div style={{ position: 'absolute', inset: 0 }}>
       <div style={{ position: 'relative', width: '100%', height: 150 }}>
         <Spin
           percent={0}
           fullscreen
-          styles={{
-            mask: { position: 'absolute', height: '100%', width: '100%' },
-          }}
+          styles={{ mask: { position: 'absolute', height: '100%', width: '100%' } }}
           {...props}
         />
       </div>
@@ -34,9 +33,9 @@ const SpinBlock = (props: any) => {
 
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Spin"
       semantics={[
         { name: 'mask', desc: locale.mask, version: '6.0.0' },
         { name: 'indicator', desc: locale.indicator, version: '6.0.0' },
diff --git a/components/splitter/demo/_semantic.tsx b/components/splitter/demo/_semantic.tsx
index 6abafa4cea..da13ab4a89 100644
--- a/components/splitter/demo/_semantic.tsx
+++ b/components/splitter/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Splitter } from 'antd';
+import type { SplitterProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -18,7 +19,7 @@ const locales = {
   },
 };
 
-const Block: React.FC = (props: any) => {
+const Block: React.FC<Readonly<SplitterProps>> = (props) => {
   return (
     <Splitter
       {...props}
@@ -28,7 +29,6 @@ const Block: React.FC = (props: any) => {
       <Splitter.Panel>
         <Desc text="First" />
       </Splitter.Panel>
-
       <Splitter.Panel>
         <Desc text="Second" />
       </Splitter.Panel>
@@ -38,9 +38,9 @@ const Block: React.FC = (props: any) => {
 
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Splitter"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'panel', desc: locale.panel, version: '6.0.0' },
diff --git a/components/statistic/demo/_semantic.tsx b/components/statistic/demo/_semantic.tsx
index 1a10cbc3d2..77a153591f 100644
--- a/components/statistic/demo/_semantic.tsx
+++ b/components/statistic/demo/_semantic.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ArrowUpOutlined } from '@ant-design/icons';
 import { Statistic } from 'antd';
+import type { StatisticProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -24,9 +25,8 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<StatisticProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute' }}>
       <Statistic
@@ -46,6 +46,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Statistic"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },
diff --git a/components/switch/demo/_semantic.tsx b/components/switch/demo/_semantic.tsx
index 2fe220e7a9..d0d556d165 100644
--- a/components/switch/demo/_semantic.tsx
+++ b/components/switch/demo/_semantic.tsx
@@ -19,6 +19,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Switch"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'content', desc: locale.content, version: '6.0.0' },
diff --git a/components/tabs/demo/_semantic.tsx b/components/tabs/demo/_semantic.tsx
index c0388b13a7..643226be50 100644
--- a/components/tabs/demo/_semantic.tsx
+++ b/components/tabs/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tabs } from 'antd';
+import type { TabsProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -22,7 +23,8 @@ const locales = {
     popup: 'Popup element',
   },
 };
-const Block = (props: any) => {
+
+const Block: React.FC<Readonly<TabsProps>> = (props) => {
   return (
     <Tabs
       {...props}
@@ -46,6 +48,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tabs"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'header', desc: locale.root, version: '6.0.0' },
diff --git a/components/tag/demo/_semantic.tsx b/components/tag/demo/_semantic.tsx
index 91a1541b05..66ec5bab6c 100644
--- a/components/tag/demo/_semantic.tsx
+++ b/components/tag/demo/_semantic.tsx
@@ -22,6 +22,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tag"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'icon', desc: locale.icon, version: '6.0.0' },
diff --git a/components/tag/demo/_semantic_group.tsx b/components/tag/demo/_semantic_group.tsx
index a7bb620601..0d878ce4b6 100644
--- a/components/tag/demo/_semantic_group.tsx
+++ b/components/tag/demo/_semantic_group.tsx
@@ -19,6 +19,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tag"
       semantics={[
         { name: 'root', desc: locale.root },
         { name: 'item', desc: locale.item },
diff --git a/components/timeline/demo/_semantic.tsx b/components/timeline/demo/_semantic.tsx
index d7a27011cf..b5e1e8639f 100644
--- a/components/timeline/demo/_semantic.tsx
+++ b/components/timeline/demo/_semantic.tsx
@@ -27,6 +27,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Timeline"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },
diff --git a/components/tooltip/demo/_semantic.tsx b/components/tooltip/demo/_semantic.tsx
index ff53eb6f7f..1991a95c7a 100644
--- a/components/tooltip/demo/_semantic.tsx
+++ b/components/tooltip/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Tooltip } from 'antd';
+import type { TooltipProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -15,19 +16,21 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<TooltipProps>> = (props) => {
+  const { children, ...rest } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
     <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>
       <Tooltip
-        title="prompt text"
         open
         placement="top"
+        title="tooltip prompt text"
         autoAdjustOverflow={false}
-        getPopupContainer={() => divRef.current}
-        {...props}
-      />
+        getPopupContainer={() => divRef.current!}
+        {...rest}
+      >
+        {children}
+      </Tooltip>
     </div>
   );
 };
diff --git a/components/tour/demo/_semantic.tsx b/components/tour/demo/_semantic.tsx
index 59ed941165..1b961498c6 100644
--- a/components/tour/demo/_semantic.tsx
+++ b/components/tour/demo/_semantic.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, Tour } from 'antd';
+import type { TourProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -33,7 +34,7 @@ const locales = {
   },
 };
 
-const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
+const BlockList: React.FC<React.PropsWithChildren<TourProps>> = (props) => {
   const [open, setOpen] = React.useState(true);
   const createBtnRef = React.useRef<HTMLButtonElement>(null);
   return (
@@ -48,12 +49,7 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
         overflow: 'hidden',
       }}
     >
-      <Button
-        ref={createBtnRef}
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
+      <Button ref={createBtnRef} onClick={() => setOpen(true)}>
         Show
       </Button>
       <Tour
@@ -61,7 +57,7 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
         zIndex={1}
         open={open}
         defaultCurrent={0}
-        getPopupContainer={false}
+        getPopupContainer={false as unknown as TourProps['getPopupContainer']}
         onClose={() => setOpen(false)}
         steps={[
           {
@@ -73,13 +69,13 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
                 src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
               />
             ),
-            target: () => createBtnRef.current,
+            target: () => createBtnRef.current!,
             mask: true,
           },
           {
             title: 'Save',
             description: 'Save your changes.',
-            target: () => createBtnRef.current,
+            target: () => createBtnRef.current!,
           },
         ]}
       />
@@ -89,9 +85,9 @@ const BlockList: React.FC<React.PropsWithChildren> = (props: any) => {
 
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="Tour"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'mask', desc: locale.mask, version: '6.0.0' },
diff --git a/components/tree-select/demo/_semantic.tsx b/components/tree-select/demo/_semantic.tsx
index 4692519317..8c4e089192 100644
--- a/components/tree-select/demo/_semantic.tsx
+++ b/components/tree-select/demo/_semantic.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { TreeSelect } from 'antd';
+import type { TreeSelectProps } from 'antd';
 
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
@@ -43,7 +44,7 @@ const treeData = [
   },
 ];
 
-const Block = (props: any) => {
+const Block: React.FC<Readonly<TreeSelectProps>> = (props) => {
   const divRef = React.useRef<HTMLDivElement>(null);
   const [value, setValue] = React.useState<string>();
   const onChange = (newValue: string) => {
@@ -53,7 +54,7 @@ const Block = (props: any) => {
     <div ref={divRef}>
       <TreeSelect
         {...props}
-        getPopupContainer={() => divRef.current}
+        getPopupContainer={() => divRef.current!}
         showSearch
         placement="bottomLeft"
         prefix="Prefix"
@@ -77,11 +78,12 @@ const Block = (props: any) => {
     </div>
   );
 };
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
-
   return (
     <SemanticPreview
+      componentName="TreeSelect"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'prefix', desc: locale.prefix, version: '6.0.0' },
diff --git a/components/tree/demo/_semantic.tsx b/components/tree/demo/_semantic.tsx
index e8fb746c4d..0f15cd820e 100644
--- a/components/tree/demo/_semantic.tsx
+++ b/components/tree/demo/_semantic.tsx
@@ -49,6 +49,7 @@ const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Tree"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'item', desc: locale.item, version: '6.0.0' },
diff --git a/components/upload/demo/_semantic.tsx b/components/upload/demo/_semantic.tsx
index f1fdc26bcf..33eef5c4eb 100644
--- a/components/upload/demo/_semantic.tsx
+++ b/components/upload/demo/_semantic.tsx
@@ -50,15 +50,17 @@ const uploadProps: UploadProps = {
   ],
 };
 
-const Block: React.FC = (props: any) => (
+const Block: React.FC<Readonly<UploadProps<any>>> = (props) => (
   <Upload {...uploadProps} {...props}>
     <Button icon={<UploadOutlined />}>Upload</Button>
   </Upload>
 );
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <SemanticPreview
+      componentName="Upload"
       semantics={[
         { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'list', desc: locale.list, version: '6.0.0' },