docs: add TypeScript demos (#2871)

* docs: add typescript demo

* fix(component): add typo

* ci("tsconfig.build.json"): fix ci test

* test(test file): fix test path

* docs: 更新 tsx demo 类型定义

* fix(all components): fix all components

* chore(icon): change icon example type

* chore: change tsconfig build json deploy

* test: update test snapshot

* chore: sync develop

* chore: exclude js demo

* chore: remove ts nocheck

* chore: action check typescript demo type as well

* chore: add tsconfig for develop and demo

* chore: complete type

* chore: revert config

* chore: update common

* chore: update common

* chore: update common

* chore: codesandbox preview

* chore: codesandbox and stackblitz adjust to typescript

* chore: type keyword

* chore: change type keyword

---------

Co-authored-by: HaixingOoO <974758671@qq.com>
Co-authored-by: zwkang <kang95630@gmail.com>
Co-authored-by: Heising <heising@travelconnect.cn>

package.json

@@ -43,7 +43,7 @@
     "postsite:preview": "cp _site/index.html _site/404.html",
     "lint": "npm run lint:tsc && eslint --ext .ts,.tsx ./ --max-warnings 0",
     "lint:fix": "eslint --ext .ts,.tsx ./src --ignore-pattern src/__tests__ --max-warnings 0 --fix",
-    "lint:tsc": "tsc --emitDeclarationOnly -p ./tsconfig.build.json",
+    "lint:tsc": "tsc -p ./tsconfig.dev.json ",
     "generate:usage": "node script/generate-usage/index.js",
     "generate:coverage-badge": "npm run test:coverage && node script/generate-coverage.js",
     "test": "vitest run && npm run test:snap",

script/rollup.config.js

@@ -32,6 +32,7 @@ const inputList = [
   'src/**/*.jsx',
   'src/**/*.tsx',
   '!src/**/_example',
+  '!src/**/_example-js',
   '!src/**/*.d.ts',
   '!src/**/__tests__',
   '!src/**/_usage',

site/plugin-tdoc/demo.js

@@ -6,7 +6,10 @@ function mdInJsx(_md) {
     validate: () => true,
     render(tokens, idx) {
       const { content, info } = tokens[idx];
-      return `<pre className="language-${info}"><code className="language-${info}">{\`${content.replace(/`/g, '\\`')}\`}</code></pre>`;
+      return `<pre className="language-${info}"><code className="language-${info}">{\`${content.replace(
+        /`/g,
+        '\\`',
+      )}\`}</code></pre>`;
     },
   });
 }
@@ -24,12 +27,13 @@ export default function renderDemo(md, container) {
         const demoName = path.basename(demoPath).trim();
         const demoDefName = `Demo${demoPathOnlyLetters}`;
         const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
+        const demoJsxCodeDefName = `Demo${demoPathOnlyLetters}JsxCode`;
 
         const tpl = `
-            <td-doc-demo code={${demoCodeDefName}} demo-name="${demoName}" component-name="${componentName.trim()}">
+            <td-doc-demo component-name="${componentName.trim()}" demo-name="${demoName}" languages="TypeScript,JavaScript" data-JavaScript={${demoJsxCodeDefName}} data-TypeScript={${demoCodeDefName}}>
               <div slot="action">
-                <Stackblitz code={${demoCodeDefName}} />
-                <Codesandbox code={${demoCodeDefName}} />
+                <Stackblitz code={${demoCodeDefName}} demoName="${demoName}"/>
+                <Codesandbox code={${demoCodeDefName}} demoName="${demoName}"/>
               </div>
               <div className="tdesign-demo-item__body">
                 <div style={{width: '100%'}}><${demoDefName} /></div>

site/plugin-tdoc/transforms.js

@@ -42,15 +42,16 @@ export default {
 
     // 替换成对应 demo 文件
     source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
-      const jsxDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.jsx`);
       const tsxDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.tsx`);
-      const localeDemoPath = path.resolve(resourceDir, `../_example/${demoFileName}.${localeName}.jsx`);
-      // localeDemo 优先级最高
-      if (fs.existsSync(localeDemoPath))
-        return `\n::: demo _example/${demoFileName}.${localeName} ${componentName}\n:::\n`;
+      const jsxDemoPath = path.resolve(resourceDir, `./_example-js/${demoFileName}.jsx`);
 
-      if (!fs.existsSync(jsxDemoPath) && !fs.existsSync(tsxDemoPath)) {
-        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 _example/${demoFileName}.jsx 示例!`);
+      if (!fs.existsSync(tsxDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 _example/${demoFileName}.tsx 示例!`);
+        return '\n<h3>DEMO (🚧建设中）...</h3>';
+      }
+
+      if (!fs.existsSync(jsxDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 _example-js/${demoFileName}.jsx 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }
 
@@ -58,11 +59,15 @@ export default {
     });
 
     source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
+      const jsxDemoPath = `_example-js/${relativeDemoPath.split('/')?.[1]}`;
       const demoPathOnlyLetters = relativeDemoPath.replace(/[^a-zA-Z\d]/g, '');
       const demoDefName = `Demo${demoPathOnlyLetters}`;
+      const demoJsxCodeDefName = `Demo${demoPathOnlyLetters}JsxCode`;
       const demoCodeDefName = `Demo${demoPathOnlyLetters}Code`;
       demoImports[demoDefName] = `import ${demoDefName} from './${relativeDemoPath}';`;
       demoCodesImports[demoCodeDefName] = `import ${demoCodeDefName} from './${relativeDemoPath}?raw';`;
+      if (fs.existsSync(path.resolve(resourceDir, `${jsxDemoPath}.jsx`)))
+        demoCodesImports[demoJsxCodeDefName] = `import ${demoJsxCodeDefName} from './${jsxDemoPath}?raw'`;
     });
 
     return source;

site/src/components/codesandbox/content.js

@@ -36,13 +36,41 @@ export const styleContent = `
   }
 `;
 
+export const tsconfigContent = `{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
+`;
+
 export const pkgContent = JSON.stringify(
   {
     name: 'tdesign-react-demo',
     version: '1.0.0',
     description: 'React example starter project',
     keywords: ['react', 'starter'],
-    main: 'src/main.jsx',
+    main: 'src/main.tsx',
     dependencies: {
       dayjs: orgPkg.dependencies.dayjs,
       react: orgPkg.devDependencies.react,
@@ -50,6 +78,8 @@ export const pkgContent = JSON.stringify(
       'tdesign-react': orgPkg.version,
       'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
       'react-scripts': '^5.0.0',
+      '@types/react': orgPkg.devDependencies['@types/react'],
+      '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
     },
     devDependencies: {
       typescript: '^4.4.4',

site/src/components/codesandbox/index.jsx

@@ -2,14 +2,15 @@ import React, { useState } from 'react';
 import Tooltip from 'tdesign-react/tooltip';
 import Loading from 'tdesign-react/loading';
 
-import { mainJsContent, htmlContent, pkgContent, styleContent } from './content';
+import { mainJsContent, htmlContent, pkgContent, styleContent, tsconfigContent } from './content';
 import '../../styles/Codesandbox.less';
 
 export default function Codesandbox(props) {
-  const { code } = props;
   const [loading, setLoading] = useState(false);
 
   function onRunOnline() {
+    const code = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`)?.currentRenderCode;
+
     setLoading(true);
     fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
       method: 'POST',
@@ -25,21 +26,24 @@ export default function Codesandbox(props) {
           'public/index.html': {
             content: htmlContent,
           },
-          'src/main.jsx': {
+          'src/main.tsx': {
             content: mainJsContent,
           },
           'src/index.css': {
             content: styleContent,
           },
-          'src/demo.jsx': {
+          'src/demo.tsx': {
             content: code,
           },
+          'tsconfig.json': {
+            content: tsconfigContent,
+          },
         },
       }),
     })
       .then((x) => x.json())
       .then(({ sandbox_id: sandboxId }) => {
-        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.jsx`);
+        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.tsx`);
       })
       .finally(() => {
         setLoading(false);

site/src/components/stackblitz/content.js

@@ -38,10 +38,40 @@ export const styleContent = `
   }
 `;
 
+export const tsconfigContent = `{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
+`;
+
 export const dependenciesContent = JSON.stringify({
   'tdesign-react': orgPkg.version,
   'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
   dayjs: orgPkg.dependencies.dayjs,
   react: orgPkg.devDependencies.react,
   'react-dom': orgPkg.devDependencies['react-dom'],
+  '@types/react': orgPkg.devDependencies['@types/react'],
+  '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
 });

site/src/components/stackblitz/index.jsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import Tooltip from 'tdesign-react/tooltip';
 
-import { htmlContent, mainJsContent, styleContent, dependenciesContent } from './content';
+import { htmlContent, mainJsContent, styleContent, dependenciesContent, tsconfigContent } from './content';
 
 export default function Stackblitz(props) {
   const { code } = props;
@@ -14,9 +14,10 @@ export default function Stackblitz(props) {
   return (
     <Tooltip content="在 Stackblitz 中打开">
       <form ref={formRef} method="post" action="https://stackblitz.com/run" target="_blank" onClick={submit}>
-        <input type="hidden" name="project[files][src/demo.jsx]" value={code} />
+        <input type="hidden" name="project[files][src/demo.tsx]" value={code} />
         <input type="hidden" name="project[files][src/index.css]" value={styleContent} />
         <input type="hidden" name="project[files][src/index.js]" value={mainJsContent} />
+        <input type="hidden" name="project[tsconfig.json]" value={tsconfigContent} />
         <input type="hidden" name="project[files][public/index.html]" value={htmlContent} />
         <input type="hidden" name="project[dependencies]" value={dependenciesContent} />
         <input type="hidden" name="project[template]" value="create-react-app" />

src/_common

@@ -1 +1 @@
-Subproject commit 75b330704baad8a9e43aeaeed60272e4dcdbcb2c
+Subproject commit 13dbba032124b2dd6194f0b6433d75b21027366c

src/affix/_example/base.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Affix, Button } from 'tdesign-react';
+
+export default function BaseExample() {
+  const [top, setTop] = useState(150);
+
+  const handleClick = () => {
+    setTop(top + 10);
+  };
+
+  return (
+    <Affix offsetTop={top} offsetBottom={10}>
+      <Button onClick={handleClick}>固钉</Button>
+    </Affix>
+  );
+}

src/affix/_example/container.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Affix, Button } from 'tdesign-react';
+import type { AffixProps } from 'tdesign-react';
+
+export default function ContainerExample() {
+  const [container, setContainer] = useState(null);
+  const [affixed, setAffixed] = useState(false);
+  const affixRef = useRef(null);
+
+  const handleFixedChange: AffixProps['onFixedChange'] = (affixed, { top }) => {
+    console.log('top', top);
+    setAffixed(affixed);
+  };
+
+  useEffect(() => {
+    if (affixRef.current) {
+      const { handleScroll } = affixRef.current;
+      // 防止 affix 移动到容器外
+      window.addEventListener('scroll', handleScroll);
+      return () => window.removeEventListener('scroll', handleScroll);
+    }
+  }, []);
+
+  const backgroundStyle = {
+    height: '1500px',
+    paddingTop: '700px',
+    backgroundColor: '#eee',
+    backgroundImage:
+      'linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0)',
+    backgroundSize: '30px 30px',
+    backgroundPosition: '0 0,15px 15px,15px 15px,0 0',
+  };
+
+  return (
+    <div
+      style={{
+        border: '1px solid var(--component-stroke)',
+        borderRadius: '3px',
+        height: '400px',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        overscrollBehavior: 'none',
+      }}
+      ref={setContainer}
+    >
+      <div style={backgroundStyle}>
+        <Affix
+          offsetTop={50}
+          offsetBottom={50}
+          container={container}
+          zIndex={5}
+          onFixedChange={handleFixedChange}
+          ref={affixRef}
+        >
+          <Button>affixed: {`${affixed}`}</Button>
+        </Affix>
+      </div>
+    </div>
+  );
+}

src/alert/_example/base.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, Space } from 'tdesign-react';
+
+export default function AlertBase() {
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Alert theme="success" message="这是一条成功的消息提示" />
+      <Alert theme="info" message="这是一条普通的消息提示" />
+      <Alert theme="warning" message="这是一条警示消息" />
+      <Alert theme="error" message="高危操作/出错信息提示" />
+    </Space>
+  );
+}

src/alert/_example/close.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, Space } from 'tdesign-react';
+
+export default function AlertClose() {
+  return (
+    <Space direction="vertical">
+      <Alert theme="success" message="这是一条成功的消息提示" close />
+      <Alert theme="info" message="这是一条普通的消息提示" close="关闭" />
+      <Alert theme="warning" message="这是一条警示消息" close="知道了" />
+      <Alert theme="error" message="高危操作/出错信息提示" close={<span>自定义关闭</span>} />
+    </Space>
+  );
+}

src/alert/_example/collapse.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert } from 'tdesign-react';
+
+export default function AlertCollapsed() {
+  const message = [
+    '1.这是一条普通的消息提示描述，',
+    '2.这是一条普通的消息提示描述，',
+    '3.这是一条普通的消息提示描述，',
+    '4.这是一条普通的消息提示描述，',
+    '5.这是一条普通的消息提示描述，',
+  ];
+  return <Alert message={message} maxLine={2} close />;
+}

src/alert/_example/icon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, Space } from 'tdesign-react';
+
+export default function AlertIcon() {
+  return (
+    <Space direction="vertical">
+      <Alert theme="success" message="这是一条成功的消息提示" />
+      <Alert theme="info" message="这是一条普通的消息提示" />
+      <Alert theme="warning" message="这是一条警示消息" />
+      <Alert theme="error" message="高危操作/出错信息提示" />
+    </Space>
+  );
+}

src/alert/_example/operation.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Alert, Space } from 'tdesign-react';
+
+export default function AlertOperation() {
+  const operation = <span>相关操作</span>;
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Alert
+        theme="success"
+        message="这是一条成功的消息提示"
+        operation={operation}
+        close
+        onClosed={() => {
+          console.log('onClosed');
+        }}
+      />
+      <Alert theme="info" message="这是一条普通的消息提示" operation={operation} close />
+      <Alert theme="warning" message="这是一条警示消息" operation={operation} close />
+      <Alert theme="error" message="高危操作/出错信息提示" operation={operation} close />
+    </Space>
+  );
+}

src/alert/_example/swiper.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, Space } from 'tdesign-react';
+
+export default function AlertBase() {
+  return (
+    <Space direction="vertical">
+      <Alert theme="success" message="这是一条成功的消息提示" />
+      <Alert theme="info" message="这是一条普通的消息提示" />
+      <Alert theme="warning" message="这是一条警示消息" />
+      <Alert theme="error" message="高危操作/出错信息提示" />
+    </Space>
+  );
+}

src/alert/_example/title.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Alert } from 'tdesign-react';
+
+export default function AlertDescription() {
+  const operation = <span>相关操作</span>;
+  return (
+    <Alert
+      message="这是一条普通的消息提示描述，这是一条普通的消息提示描述"
+      title="这是一条普通的消息提示"
+      operation={operation}
+      close
+    />
+  );
+}

src/anchor/_example/base.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+import type { AnchorProps } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+export default function AnchorBase() {
+  const handleClick: AnchorProps['onClick'] = ({ e, href, title }) => {
+    console.log('handleClick', e, href, title);
+  };
+  const handleChange: AnchorProps['onChange'] = (currentLink, prevLink) => {
+    console.log('currentLink', currentLink, 'prevLink', prevLink);
+  };
+  return (
+    <div style={{ display: 'flex' }}>
+      <div style={{ flex: '1' }}></div>
+      <Anchor onClick={handleClick} onChange={handleChange} targetOffset={150} affixProps={{ offsetTop: 150 }}>
+        <AnchorItem href="#基础锚点" title="基础锚点" />
+        <AnchorItem href="#多级锚点" title="多级锚点" />
+        <AnchorItem href="#指定容器锚点" title="指定容器锚点" />
+        <AnchorItem href="#特定交互锚点" title="特定交互锚点" />
+        <AnchorItem href="#尺寸" title="尺寸"></AnchorItem>
+      </Anchor>
+    </div>
+  );
+}

src/anchor/_example/container.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+import type { TdAnchorProps } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+export default function AnchorAttach() {
+  const handleClick: TdAnchorProps['onClick'] = ({ e, href, title }) => {
+    e.preventDefault();
+    console.log('handleClick', href, title);
+  };
+
+  return (
+    <>
+      <div style={{ display: 'flex' }} id="attach" className="anchor-demo-attach">
+        <Anchor container="#anchor-container" onClick={handleClick}>
+          <AnchorItem href="#content-1" title="content-1" />
+          <AnchorItem href="#content-2" title="content-2" />
+          <AnchorItem href="#content-3" title="content-3" />
+          <AnchorItem href="#content-4" title="content-4" />
+        </Anchor>
+        <div
+          id="anchor-container"
+          style={{ width: '100%', height: '200px', overflow: 'auto', textAlign: 'center', fontSize: '22px' }}
+        >
+          <div id="content-1" style={{ background: '#DFEFFF', lineHeight: '100px' }}>
+            content-1
+          </div>
+          <div id="content-2" style={{ background: '#BFDBF7', lineHeight: '100px' }}>
+            content-2
+          </div>
+          <div id="content-3" style={{ background: '#9BC5F2', lineHeight: '100px' }}>
+            content-3
+          </div>
+          <div id="content-4" style={{ background: '#7BAFED', lineHeight: '100px' }}>
+            content-4
+          </div>
+          <div id="content-5" style={{ background: '#5C99EB', lineHeight: '100px' }}>
+            content-5
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/anchor/_example/cursor.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+const cursorStyle: React.CSSProperties = {
+  width: '10px',
+  height: '10px',
+  backgroundColor: '#0052D9',
+  position: 'absolute',
+  borderRadius: '50%',
+  left: '50%',
+  marginLeft: '-5px',
+  top: '50%',
+  marginTop: '-5px',
+};
+
+export default function AnchorBase() {
+  return (
+    <div style={{ display: 'flex' }}>
+      <Anchor targetOffset={150} cursor={<div style={cursorStyle}></div>}>
+        <AnchorItem href="#基础锚点" title="基础锚点" />
+        <AnchorItem href="#多级锚点" title="多级锚点" />
+        <AnchorItem href="#指定容器锚点" title="指定容器锚点" />
+        <AnchorItem href="#特定交互锚点" title="特定交互锚点" />
+        <AnchorItem href="#尺寸" title="尺寸"></AnchorItem>
+      </Anchor>
+    </div>
+  );
+}

src/anchor/_example/customize-highlight.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+export default function AnchorBase() {
+  return (
+    <div style={{ display: 'flex' }}>
+      <div style={{ flex: '1' }}></div>
+      <Anchor getCurrentAnchor={() => '#基础锚点'}>
+        <AnchorItem href="#基础锚点" title="基础锚点" />
+        <AnchorItem href="#多级锚点" title="多级锚点" />
+        <AnchorItem href="#自定义游标锚点" title="自定义游标锚点" />
+        <AnchorItem href="#指定容器锚点" title="指定容器锚点" />
+        <AnchorItem href="#特定交互锚点" title="特定交互锚点" />
+        <AnchorItem href="#不同尺寸的锚点" title="不同尺寸的锚点" />
+        <AnchorItem href="#自定义锚点高亮" title="自定义锚点高亮" />
+      </Anchor>
+    </div>
+  );
+}

src/anchor/_example/large.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+export default function AnchorSizeLarge() {
+  return (
+    <div id="size-large">
+      <Anchor bounds={100} targetOffset={50} size="large">
+        <AnchorItem href="#default" title="基础锚点" />
+        <AnchorItem href="#multiple" title="多级锚点" />
+        <AnchorItem href="#size" title="尺寸大小">
+          <AnchorItem href="#size" title="size-medium"></AnchorItem>
+          <AnchorItem href="#size-large" title="size-large"></AnchorItem>
+        </AnchorItem>
+        <AnchorItem href="#attach" title="指定容器" />
+      </Anchor>
+    </div>
+  );
+}

src/anchor/_example/multiple.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+export default function AnchorMultiple() {
+  return (
+    <>
+      <Anchor bounds={100} targetOffset={50}>
+        <AnchorItem href="#基础锚点" title="基础锚点" />
+        <AnchorItem href="#多级锚点" title="多级锚点" />
+        <AnchorItem href="#指定容器锚点" title="指定容器锚点" />
+        <AnchorItem href="#特定交互锚点" title="特定交互锚点" />
+        <AnchorItem href="#尺寸" title="尺寸">
+          <AnchorItem href="#size" title="size-medium"></AnchorItem>
+          <AnchorItem href="#size-large" title="size-large"></AnchorItem>
+        </AnchorItem>
+      </Anchor>
+    </>
+  );
+}

src/anchor/_example/small.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+
+const { AnchorItem } = Anchor;
+
+export default function AnchorSize() {
+  return (
+    <div id="size-small">
+      <Anchor bounds={100} targetOffset={50} size="small">
+        <AnchorItem href="#default" title="基础锚点" />
+        <AnchorItem href="#multiple" title="多级锚点" />
+        <AnchorItem href="#size" title="尺寸大小">
+          <AnchorItem href="#size" title="size-medium"></AnchorItem>
+          <AnchorItem href="#size-large" title="size-large"></AnchorItem>
+        </AnchorItem>
+        <AnchorItem href="#attach" title="指定容器" />
+      </Anchor>
+    </div>
+  );
+}

src/anchor/_example/target.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Anchor } from 'tdesign-react';
+
+const { AnchorTarget } = Anchor;
+
+export default function AnchorTargetExample() {
+  return (
+    <div id="/components/anchor/#anchor-target" className="anchor-demo">
+      <AnchorTarget id="/components/anchor/#default" tag="h1">
+        基础锚点
+      </AnchorTarget>
+      <AnchorTarget id="/components/anchor/#multiple" tag="h1">
+        多级锚点
+      </AnchorTarget>
+      <AnchorTarget id="/components/anchor/#size" tag="h1">
+        尺寸大小
+      </AnchorTarget>
+      <AnchorTarget id="/components/anchor/#attach" tag="h1">
+        指定容器
+      </AnchorTarget>
+    </div>
+  );
+}

src/auto-complete/_example/base.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { Space, AutoComplete, Button } from 'tdesign-react';
+import type { AutoCompleteProps } from 'tdesign-react';
+
+import { SearchIcon } from 'tdesign-icons-react';
+
+const classStyles = `
+<style>
+.t-demo-autocomplete__search .t-input {
+  padding-right: 0;
+}
+.t-demo-auto-complete__base .t-button svg {
+  font-size: 20px;
+}
+</style>
+`;
+
+let timer: ReturnType<typeof setTimeout> = null;
+const AutoCompleteBase = () => {
+  const [value, setValue] = useState('');
+  const [value2, setValue2] = useState('');
+  const [options, setOptions] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
+  const [options2] = useState(['第一个默认联想词', '第二个默认联想词', '第三个默认联想词']);
+
+  // 输入框内容发生变化时进行搜索，100ms 搜索一次
+  const onChange: AutoCompleteProps['onChange'] = (val) => {
+    setValue(val);
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      const text = '搜索联想词';
+      const pureValue = val.replace(`第一个${text}`, '').replace(`第二个${text}`, '').replace(`第三个${text}`, '');
+      setOptions([`${pureValue}第一个${text}`, `${pureValue}第二个${text}`, `${pureValue}第三个${text}`]);
+      clearTimeout(timer);
+    }, 100);
+  };
+
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
+  return (
+    <Space direction="vertical" className="t-demo-auto-complete__base" style={{ width: '100%' }}>
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={onChange}
+        highlightKeyword
+        filterable={false}
+        clearable
+        placeholder="请输入关键词搜索"
+        onBlur={() => {
+          console.log('blur');
+        }}
+      />
+
+      {/* 左侧图标可以使用 label，同 input */}
+      <AutoComplete
+        value={value2}
+        options={options2}
+        onChange={setValue2}
+        highlightKeyword
+        filterable
+        placeholder="请输入关键词搜索（自定义右侧图标）"
+        className="t-demo-autocomplete__search"
+        inputProps={{
+          suffix: (
+            <Button shape="square">
+              <SearchIcon />
+            </Button>
+          ),
+        }}
+      />
+    </Space>
+  );
+};
+
+AutoCompleteBase.displayName = 'AutoCompleteBase';
+
+export default AutoCompleteBase;

src/auto-complete/_example/filter.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Space, AutoComplete } from 'tdesign-react';
+import type { AutoCompleteProps } from 'tdesign-react';
+import escapeRegExp from 'lodash/escapeRegExp';
+
+const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
+
+const AutoCompleteBaseFilter = () => {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+
+  const filterWords: AutoCompleteProps['filter'] = (keyword, option: string) => {
+    const regExp = new RegExp(escapeRegExp(keyword));
+    return regExp.test(option);
+  };
+
+  return (
+    <Space style={{ width: '100%' }}>
+      <AutoComplete
+        value={value1}
+        options={[...LIST]}
+        onChange={setValue1}
+        highlightKeyword
+        filterable
+        placeholder="组件默认过滤规则（不区分大小写）"
+        style={{ width: '280px' }}
+      />
+
+      <AutoComplete
+        value={value2}
+        options={[...LIST]}
+        onChange={setValue2}
+        highlightKeyword
+        filter={filterWords}
+        placeholder="组件默认过滤规则（不区分大小写）"
+        style={{ width: '280px' }}
+      />
+    </Space>
+  );
+};
+
+AutoCompleteBaseFilter.displayName = 'AutoCompleteBaseFilter';
+
+export default AutoCompleteBaseFilter;

src/auto-complete/_example/option.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { AutoComplete, HighlightOption } from 'tdesign-react';
+
+const classStyles = `
+<style>
+.t-demo-autocomplete-option-list .t-select-option {
+  height: 50px;
+}
+
+.t-demo-autocomplete-option-list .custom-option {
+  display: flex;
+  align-items: center;
+}
+
+.t-demo-autocomplete-option-list .custom-option > img {
+  max-height: 40px;
+  border-radius: 50%;
+}
+
+.t-demo-autocomplete-option-list .custom-option__main {
+  margin-left: 8px;
+}
+
+.t-demo-autocomplete-option-list .custom-option .description {
+  color: var(--td-gray-color-9);
+}
+</style>
+`;
+
+const TEXTS = ['第一个默认联想词', '第二个默认联想词', '第三个默认联想词'];
+
+const AutoCompleteOption = () => {
+  const [value, setValue] = useState('');
+
+  const options = TEXTS.map(text => ({
+    text,
+    label: (
+      <div className="custom-option">
+        <img src="https://tdesign.gtimg.com/site/avatar.jpg" />
+        <div className="custom-option__main">
+          <HighlightOption content={text} keyword={value} />
+          <small className="description">这是关于联想词的描述，使用 label 渲染</small>
+        </div>
+      </div>
+    )
+  }));
+
+  useEffect(() => {
+    // 添加示例代码所需样式
+    document.head.insertAdjacentHTML('beforeend', classStyles);
+  }, []);
+
+  return (
+    <div className="t-demo-autocomplete-option">
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        highlightKeyword
+        placeholder="请输入关键词搜索"
+        popupProps={{ overlayClassName: 't-demo-autocomplete-option-list' }}
+      />
+    </div>
+  );
+};
+
+AutoCompleteOption.displayName = 'AutoCompleteOption';
+
+export default AutoCompleteOption;

src/auto-complete/_example/size.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { AutoComplete, Space } from 'tdesign-react';
+
+const options = ['第一个联想词', '第二个联想词', '第三个联想词'];
+
+const AutoCompleteSize = () => {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  const [value3, setValue3] = useState('');
+
+  return (
+    <Space direction='vertical' style={{ width: '100%' }}>
+      <AutoComplete
+        value={value1}
+        options={options}
+        onChange={setValue1}
+        size="small"
+        inputProps={{ label: '小尺寸：' }}
+      />
+      <AutoComplete
+        value={value2}
+        options={options}
+        onChange={setValue2}
+        inputProps={{ label: '中尺寸：' }}
+      />
+      <AutoComplete
+        value={value3}
+        options={options}
+        onChange={setValue3}
+        size="large"
+        inputProps={{ label: '大尺寸：' }}
+      />
+    </Space>
+  );
+};
+
+AutoCompleteSize.displayName = 'AutoCompleteSize';
+
+export default AutoCompleteSize;

src/auto-complete/_example/status.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { AutoComplete, Space } from 'tdesign-react';
+
+const options = ['第一个联想词', '第二个联想词', '第三个联想词'];
+
+const AutoCompleteStatus = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <Space direction='vertical' style={{ width: '100%' }} size="32px">
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        disabled
+        tips="这是禁用状态"
+        placeholder="请输入关键词搜索"
+      />
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        readonly
+        tips="这是只读状态"
+        placeholder="请输入关键词搜索"
+      />
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        tips="这是普通状态"
+        placeholder="请输入关键词搜索"
+      />
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        tips="这是告警状态"
+        status="warning"
+        placeholder="请输入关键词搜索"
+      />
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        tips="这是错误状态"
+        status="error"
+        placeholder="请输入关键词搜索"
+      />
+      <AutoComplete
+        value={value}
+        options={options}
+        onChange={setValue}
+        tips="这是成功状态"
+        status="success"
+        placeholder="请输入关键词搜索"
+      />
+    </Space>
+  );
+};
+
+AutoCompleteStatus.displayName = 'AutoCompleteStatus';
+
+export default AutoCompleteStatus;

src/auto-complete/_example/trigger-element.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { AutoComplete, Textarea } from 'tdesign-react';
+import type { AutoCompleteProps } from 'tdesign-react';
+
+let timer: ReturnType<typeof setTimeout> = null;
+
+const AutoCompleteTriggerElement = () => {
+  const [value, setValue] = useState('');
+  const [options, setOptions] = useState([
+    'First AutoComplete Textarea',
+    'Second AutoComplete Textarea',
+    'Third AutoComplete Textarea',
+  ]);
+
+  // 输入框内容发生变化时进行搜索，200ms 搜索一次
+  const onChange: AutoCompleteProps['onChange'] = (val) => {
+    setValue(val);
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      const text = 'AutoComplete Textarea';
+      const pureValue = val.replace(`First ${text}`, '').replace(`Second ${text}`, '').replace(`Third ${text}`, '');
+      setOptions([`${pureValue}First ${text}`, `${pureValue}Second ${text}`, `${pureValue}Third ${text}`]);
+      clearTimeout(timer);
+    }, 200);
+  };
+
+  return (
+    <AutoComplete value={value} options={options} onChange={onChange} highlightKeyword>
+      <Textarea value={value} onChange={setValue} placeholder="自定义联想词触发元素" />
+    </AutoComplete>
+  );
+};
+
+AutoCompleteTriggerElement.displayName = 'AutoCompleteTriggerElement';
+
+export default AutoCompleteTriggerElement;

src/avatar/_example/adjust.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+
+export default function AdjustAvatar() {
+  return (
+    <Space>
+      <Avatar style={{ marginRight: '40px' }}>王</Avatar>
+      <Avatar style={{ marginRight: '40px' }}>王亿</Avatar>
+      <Avatar style={{ marginRight: '40px' }}>王亿亿</Avatar>
+    </Space>
+  );
+}

src/avatar/_example/base.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+export default function BasicAvatar() {
+  return (
+    <Space>
+      <Avatar icon={<UserIcon />} style={{ marginRight: '40px' }} />
+      <Avatar
+        image="https://tdesign.gtimg.com/site/avatar.jpg"
+        hideOnLoadFailed={false}
+        style={{ marginRight: '40px' }}
+      />
+      <Avatar style={{ marginRight: '40px' }}>W</Avatar>
+    </Space>
+  );
+}

src/avatar/_example/group-cascading.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+const { Group: AvatarGroup } = Avatar;
+
+export default function GroupCascadingAvatar() {
+  return (
+    <Space direction="vertical">
+      <AvatarGroup>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup cascading="left-up">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
+  );
+}

src/avatar/_example/group-max.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+import { UserIcon, EllipsisIcon } from 'tdesign-icons-react';
+
+const { Group: AvatarGroup } = Avatar;
+
+export default function GroupMaxAvatar() {
+  return (
+    <Space direction="vertical">
+      <AvatarGroup size="large" max={2}>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large" max={2} collapseAvatar={<EllipsisIcon />}>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large" max={2} collapseAvatar="more">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
+  );
+}

src/avatar/_example/group.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+const { Group: AvatarGroup } = Avatar;
+
+export default function GroupAvatar() {
+  return (
+    <Space direction="vertical">
+      <AvatarGroup>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
+  );
+}

src/avatar/_example/shape.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+
+export default function ShapeAvatar() {
+  return (
+    <Space>
+      <Avatar style={{ marginRight: '40px' }}>W</Avatar>
+      <Avatar shape="round" style={{ marginRight: '40px' }}>
+        W
+      </Avatar>
+    </Space>
+  );
+}

src/avatar/_example/size.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Avatar, Space } from 'tdesign-react';
+
+export default function SizeAvatar() {
+  return (
+    <Space direction="vertical" size="large">
+      <Space align="center">
+        <Avatar size="small" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+        <Avatar size="medium" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+        <Avatar size="large" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+        <Avatar size="100px" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+      </Space>
+      <Space align="center">
+        <Avatar shape="round" size="small" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+        <Avatar shape="round" size="medium" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+        <Avatar shape="round" size="large" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+        <Avatar shape="round" size="100px" style={{ marginRight: '40px' }}>
+          W
+        </Avatar>
+      </Space>
+      <Space align="center">
+        <Avatar alt='test' image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="small" style={{ marginRight: '40px' }}>
+        </Avatar>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="medium" style={{ marginRight: '40px' }}>
+        </Avatar>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="large" style={{ marginRight: '40px' }}>
+        </Avatar>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="100px" style={{ marginRight: '40px' }}>
+        </Avatar>
+      </Space>
+    </Space>
+  );
+}

src/back-top/_example-js/baseList.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { BackTop, List } from 'tdesign-react';
+
+export default function BasicBackTop() {
+  const [container, setContainer] = useState(null);
+
+  const style = {
+    position: 'absolute',
+    insetInlineEnd: 24,
+    insetBlockEnd: 80,
+  };
+
+  const listWrapStyle = {
+    width: '100%',
+    height: '280px',
+    position: 'relative',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    border: '1px solid #dcdcdcff',
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div id="demo_1" style={listWrapStyle} ref={setContainer}>
+        <List>
+          {Array.from(Array(50), () => '列表内容').map((item, index) => (
+            <List.ListItem key={index}>{item}</List.ListItem>
+          ))}
+        </List>
+      </div>
+      <BackTop container={() => container} visibleHeight={46} style={style}></BackTop>
+    </div>
+  );
+}

src/back-top/_example-js/baseListSmall.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { BackTop, List } from 'tdesign-react';
+
+export default function BasicBackTop() {
+  const [container, setContainer] = useState(null);
+
+  const style = {
+    position: 'absolute',
+    insetInlineEnd: 24,
+    insetBlockEnd: 80,
+  };
+
+  const listWrapStyle = {
+    width: '100%',
+    height: '280px',
+    position: 'relative',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    border: '1px solid #dcdcdcff',
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div id="demo_1" style={listWrapStyle} ref={setContainer}>
+        <List>
+          {Array.from(Array(50), () => '列表内容').map((item, index) => (
+            <List.ListItem key={index}>{item}</List.ListItem>
+          ))}
+        </List>
+      </div>
+      <BackTop container={() => container} visibleHeight={46} style={style} size="small" duration={500}></BackTop>
+    </div>
+  );
+}

src/back-top/_example-js/custom.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BackTop, Space } from 'tdesign-react';
+
+export default function BasicBackTop() {
+  const style = {
+    position: 'relative',
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+  };
+
+  return (
+    <Space size={24}>
+      <BackTop style={style} visibleHeight={0} offset={['24px', '500px']} container={() => document}>
+        <span className="custom-node">返回</span>
+      </BackTop>
+      <BackTop
+        style={style}
+        visibleHeight={0}
+        default={<span>TOP</span>}
+        offset={['124px', '500px']}
+        container={() => document}
+      />
+      <BackTop
+        style={style}
+        visibleHeight={0}
+        content={<span>UP</span>}
+        offset={['224px', '500px']}
+        container={() => document}
+      />
+    </Space>
+  );
+}

src/back-top/_example-js/shape.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BackTop, Space } from 'tdesign-react';
+
+export default function BasicBackTop() {
+  const style = {
+    position: 'relative',
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+  };
+
+  return (
+    <Space direction="vertical" size={32}>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} shape="circle" container={() => document} />
+        <BackTop style={style} visibleHeight={0} shape="square" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} shape="circle" theme="primary" container={() => document} />
+        <BackTop style={style} visibleHeight={0} shape="square" theme="primary" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} shape="circle" theme="dark" container={() => document} />
+        <BackTop style={style} visibleHeight={0} shape="square" theme="dark" container={() => document} />
+      </Space>
+    </Space>
+  );
+}

src/back-top/_example/baseList.jsx

@@ -1,33 +0,0 @@
-// @ts-nocheck
-import React, { useState } from 'react';
-import { BackTop, List } from 'tdesign-react';
-
-export default function BasicBackTop() {
-  const [container, setContainer] = useState(null);
-
-  const style = {
-    position: 'absolute',
-    insetInlineEnd: 24,
-    insetBlockEnd: 80,
-  };
-
-  const listWrapStyle = {
-    width: '100%',
-    height: '280px',
-    position: 'relative',
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    border: '1px solid #dcdcdcff',
-  };
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <div id='demo_1' style={listWrapStyle} ref={setContainer}>
-        <List>
-          {Array.from(Array(50), () => '列表内容').map((item, index) => <List.ListItem key={index}>{item}</List.ListItem>) }
-        </List>
-      </div>
-      <BackTop container={() => container} visibleHeight={46} style={style}></BackTop>
-    </div>
-  );
-}

src/back-top/_example/baseList.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { BackTop, List } from 'tdesign-react';
+import type { CSSProperties } from 'react';
+
+export default function BasicBackTop() {
+  const [container, setContainer] = useState(null);
+
+  const style: CSSProperties = {
+    position: 'absolute',
+    insetInlineEnd: 24,
+    insetBlockEnd: 80,
+  };
+
+  const listWrapStyle: CSSProperties = {
+    width: '100%',
+    height: '280px',
+    position: 'relative',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    border: '1px solid #dcdcdcff',
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div id="demo_1" style={listWrapStyle} ref={setContainer}>
+        <List>
+          {Array.from(Array(50), () => '列表内容').map((item, index) => (
+            <List.ListItem key={index}>{item}</List.ListItem>
+          ))}
+        </List>
+      </div>
+      <BackTop container={() => container} visibleHeight={46} style={style}></BackTop>
+    </div>
+  );
+}

src/back-top/_example/baseListSmall.jsx

@@ -1,33 +0,0 @@
-// @ts-nocheck
-import React, { useState } from 'react';
-import { BackTop, List } from 'tdesign-react';
-
-export default function BasicBackTop() {
-  const [container, setContainer] = useState(null);
-
-  const style = {
-    position: 'absolute',
-    insetInlineEnd: 24,
-    insetBlockEnd: 80,
-  };
-
-  const listWrapStyle = {
-    width: '100%',
-    height: '280px',
-    position: 'relative',
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    border: '1px solid #dcdcdcff',
-  };
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <div id='demo_1' style={listWrapStyle} ref={setContainer}>
-        <List>
-          {Array.from(Array(50), () => '列表内容').map((item, index) => <List.ListItem key={index}>{item}</List.ListItem>) }
-        </List>
-      </div>
-      <BackTop container={() => container} visibleHeight={46} style={style} size="small" duration={500}></BackTop>
-    </div>
-  );
-}

src/back-top/_example/baseListSmall.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { BackTop, List } from 'tdesign-react';
+import type { CSSProperties } from 'react';
+
+export default function BasicBackTop() {
+  const [container, setContainer] = useState(null);
+
+  const style: CSSProperties = {
+    position: 'absolute',
+    insetInlineEnd: 24,
+    insetBlockEnd: 80,
+  };
+
+  const listWrapStyle: CSSProperties = {
+    width: '100%',
+    height: '280px',
+    position: 'relative',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    border: '1px solid #dcdcdcff',
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div id="demo_1" style={listWrapStyle} ref={setContainer}>
+        <List>
+          {Array.from(Array(50), () => '列表内容').map((item, index) => (
+            <List.ListItem key={index}>{item}</List.ListItem>
+          ))}
+        </List>
+      </div>
+      <BackTop container={() => container} visibleHeight={46} style={style} size="small" duration={500}></BackTop>
+    </div>
+  );
+}

src/back-top/_example/custom.jsx

@@ -1,33 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { BackTop, Space } from 'tdesign-react';
-
-export default function BasicBackTop() {
-  const style = {
-    position: 'relative',
-    insetInlineEnd: 0,
-    insetBlockEnd: 0,
-  };
-
-  return (
-    <Space size={24}>
-      <BackTop style={style} visibleHeight={0} offset={['24px', '500px']} container={() => document}>
-        <span className="custom-node">返回</span>
-      </BackTop>
-      <BackTop
-        style={style}
-        visibleHeight={0}
-        default={<span>TOP</span>}
-        offset={['124px', '500px']}
-        container={() => document}
-      />
-      <BackTop
-        style={style}
-        visibleHeight={0}
-        content={<span>UP</span>}
-        offset={['224px', '500px']}
-        container={() => document}
-      />
-    </Space>
-  );
-}

src/back-top/_example/custom.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
+
+export default function BasicBackTop() {
+  const style: CSSProperties = {
+    position: 'relative',
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+  };
+
+  return (
+    <Space size={24}>
+      <BackTop style={style} visibleHeight={0} offset={['24px', '500px']} container={() => document}>
+        <span className="custom-node">返回</span>
+      </BackTop>
+      <BackTop
+        style={style}
+        visibleHeight={0}
+        default={<span>TOP</span>}
+        offset={['124px', '500px']}
+        container={() => document}
+      />
+      <BackTop
+        style={style}
+        visibleHeight={0}
+        content={<span>UP</span>}
+        offset={['224px', '500px']}
+        container={() => document}
+      />
+    </Space>
+  );
+}

src/back-top/_example/shape.jsx

@@ -1,28 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { BackTop, Space } from 'tdesign-react';
-
-export default function BasicBackTop() {
-  const style = {
-    position: 'relative',
-    insetInlineEnd: 0,
-    insetBlockEnd: 0,
-  };
-
-  return (
-    <Space direction="vertical" size={32}>
-      <Space size={24}>
-        <BackTop style={style} visibleHeight={0} shape="circle" container={() => document} />
-        <BackTop style={style} visibleHeight={0} shape="square" container={() => document} />
-      </Space>
-      <Space size={24}>
-        <BackTop style={style} visibleHeight={0} shape="circle" theme="primary" container={() => document} />
-        <BackTop style={style} visibleHeight={0} shape="square" theme="primary" container={() => document} />
-      </Space>
-      <Space size={24}>
-        <BackTop style={style} visibleHeight={0} shape="circle" theme="dark" container={() => document} />
-        <BackTop style={style} visibleHeight={0} shape="square" theme="dark" container={() => document} />
-      </Space>
-    </Space>
-  );
-}

src/back-top/_example/shape.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
+
+export default function BasicBackTop() {
+  const style: CSSProperties = {
+    position: 'relative',
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+  };
+
+  return (
+    <Space direction="vertical" size={32}>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} shape="circle" container={() => document} />
+        <BackTop style={style} visibleHeight={0} shape="square" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} shape="circle" theme="primary" container={() => document} />
+        <BackTop style={style} visibleHeight={0} shape="square" theme="primary" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} shape="circle" theme="dark" container={() => document} />
+        <BackTop style={style} visibleHeight={0} shape="square" theme="dark" container={() => document} />
+      </Space>
+    </Space>
+  );
+}

src/back-top/_example/size.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
+
+export default function BasicBackTop() {
+  const style: CSSProperties = {
+    position: 'relative',
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+  };
+
+  return (
+    <Space direction="vertical" size={32}>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} size="small" offset={['24px', '300px']} container={() => document} />
+        <BackTop style={style} visibleHeight={0} size="medium" offset={['124px', '300px']} container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop
+          style={style}
+          visibleHeight={0}
+          size="small"
+          theme="primary"
+          offset={['24px', '300px']}
+          container={() => document}
+        />
+        <BackTop
+          style={style}
+          visibleHeight={0}
+          size="medium"
+          theme="primary"
+          offset={['124px', '300px']}
+          container={() => document}
+        />
+      </Space>
+      <Space size={24}>
+        <BackTop
+          style={style}
+          visibleHeight={0}
+          size="small"
+          theme="dark"
+          offset={['24px', '300px']}
+          container={() => document}
+        />
+        <BackTop
+          style={style}
+          visibleHeight={0}
+          size="medium"
+          theme="dark"
+          offset={['124px', '300px']}
+          container={() => document}
+        />
+      </Space>
+    </Space>
+  );
+}

src/back-top/_example/theme.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { BackTop, Space } from 'tdesign-react';
+import type { CSSProperties } from 'react';
+
+export default function BasicBackTop() {
+  const style: CSSProperties = {
+    position: 'relative',
+    insetInlineEnd: 0,
+    insetBlockEnd: 0,
+  };
+
+  return (
+    <Space direction="vertical" size={32}>
+      <Space size={24}>
+        <BackTop style={style} visibleHeight={0} container={() => document} />
+        <BackTop style={style} visibleHeight={0} theme="primary" container={() => document} />
+        <BackTop style={style} visibleHeight={0} theme="dark" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} shape="circle" visibleHeight={0} container={() => document} />
+        <BackTop style={style} shape="circle" visibleHeight={0} theme="primary" container={() => document} />
+        <BackTop style={style} shape="circle" visibleHeight={0} theme="dark" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} size="small" visibleHeight={0} container={() => document} />
+        <BackTop style={style} size="small" visibleHeight={0} theme="primary" container={() => document} />
+        <BackTop style={style} size="small" visibleHeight={0} theme="dark" container={() => document} />
+      </Space>
+      <Space size={24}>
+        <BackTop style={style} shape="circle" size="small" visibleHeight={0} container={() => document} />
+        <BackTop
+          style={style}
+          shape="circle"
+          size="small"
+          visibleHeight={0}
+          theme="primary"
+          container={() => document}
+        />
+        <BackTop style={style} shape="circle" size="small" visibleHeight={0} theme="dark" container={() => document} />
+      </Space>
+    </Space>
+  );
+}

src/badge/_example/base.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+export default function BadgeExample() {
+  return (
+    <>
+      <Badge dot count={2}>
+        <Button size="large"> </Button>
+      </Badge>
+      <Badge dot count={99}>
+        解锁新徽章
+      </Badge>
+      <Badge dot count={100}>
+        <UserIcon size={24} />
+      </Badge>
+    </>
+  );
+}

src/badge/_example/color.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Badge, Checkbox } from 'tdesign-react';
+
+const colors = [
+  '#f44336',
+  '#e91e63',
+  '#9c27b0',
+  '#3f51b5',
+  '#2196f3',
+  '#03a9f4',
+  '#00bcd4',
+  '#009688',
+  '#4caf50',
+  '#8bc34a',
+  '#cddc39',
+  '#ffeb3b',
+  '#ffc107',
+  '#ff9800',
+  '#ff5722',
+  '#795548',
+  '#9e9e9e',
+  '#607d8b',
+];
+
+export default function BadgeExample() {
+  const [dot, setDot] = useState(true);
+
+  return (
+    <>
+      <Checkbox value={dot} onChange={setDot}>
+        红点样式
+      </Checkbox>
+      <div>
+        {colors.map((color) => (
+          <Badge color={color} dot={dot} key={color} count={100} />
+        ))}
+      </div>
+    </>
+  );
+}

src/badge/_example/custom.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Badge, Space } from 'tdesign-react';
+
+export default function BadgeExample() {
+  const badgeBlockStyle = {
+    width: '40px',
+    height: '40px',
+    background: '#EEEEEE',
+    border: '1px solid #DCDCDC',
+    borderRadius: '3px',
+  };
+
+  return (
+    <Space direction="vertical">
+      <Space size={24}>
+        <Badge count="2" dot>
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+        <Badge count="hot">
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+        <Badge count="new" color="var(--td-success-color)">
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+        <Badge count="100" color="var(--brand-main)" shape="round">
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+      </Space>
+
+      <Space size={24}>
+        <Badge count="2" dot>
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+        <Badge count={<span style={{ color: 'var(--td-error-color)' }}>hot</span>} color="var(--td-error-color-1)">
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+        <Badge count={<span style={{ color: 'var(--td-success-color)' }}>new</span>} color="var(--td-success-color-1)">
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+        <Badge count={<span style={{ color: 'var(--td-brand-color)' }}>new</span>} color="var(--td-brand-color-1)">
+          <div style={badgeBlockStyle}></div>
+        </Badge>
+      </Space>
+    </Space>
+  );
+}

src/badge/_example/number.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-react';
+
+export default function BadgeExample() {
+  return (
+    <>
+      <Badge count={2}>
+        <Button size="large"> </Button>
+      </Badge>
+      <Badge count={99}>
+        <Button size="large"> </Button>
+      </Badge>
+      <Badge count={100}>
+        <Button size="large"> </Button>
+      </Badge>
+    </>
+  );
+}

src/badge/_example/offset.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-react';
+
+export default function BadgeExample() {
+  return (
+    <>
+      <Badge count={2}>
+        <Button>默认</Button>
+      </Badge>
+      <Badge count={2} offset={[10, 10]}>
+        <Button>[10,10]</Button>
+      </Badge>
+      <Badge count={2} offset={[-10, 10]}>
+        <Button>[-10,10]</Button>
+      </Badge>
+      <Badge count={2} offset={[-10, -10]}>
+        <Button>[-10,-10]</Button>
+      </Badge>
+      <Badge count={2} offset={[10, -10]}>
+        <Button>[10,-10]</Button>
+      </Badge>
+    </>
+  );
+}

src/badge/_example/shape.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-react';
+
+export default function BadgeExample() {
+  return (
+    <>
+      <Badge shape={'circle'} count={2}>
+        <Button> circle</Button>
+      </Badge>
+      <Badge shape={'round'} count={99}>
+        <Button>round</Button>
+      </Badge>
+    </>
+  );
+}

src/badge/_example/size.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-react';
+
+export default function BadgeExample() {
+  return (
+    <>
+      <h3 style={{ marginBottom: 16 }}>1.默认大小</h3>
+      <Badge count={2}>
+        <Button>按钮</Button>
+      </Badge>
+      <Badge count={99}>
+        <Button>按钮</Button>
+      </Badge>
+      <Badge count={999}>
+        <Button>按钮</Button>
+      </Badge>
+      <h3 style={{ marginBottom: 16, marginTop: 32 }}>2.小</h3>
+      <Badge count={2} size="small">
+        <Button>按钮</Button>
+      </Badge>
+      <Badge count={99} size="small">
+        <Button>按钮</Button>
+      </Badge>
+      <Badge count={999} size="small">
+        <Button>按钮</Button>
+      </Badge>
+    </>
+  );
+}