Tencent · anlyyao · Nov 14, 2025 · Nov 13, 2025 · Nov 13, 2025 · Nov 13, 2025
@@ -31,7 +31,7 @@
     "site": "run-s site:build",
     "site:build": "cd site && vite build",
     "site:serve": "cd site && vite preview",
-    "site:preview": "cd site && cross-env NODE_ENV=development vite build --mode preview",
+    "site:preview": "cd site && vite build --mode preview",
     "postsite:preview": "cp _site/index.html _site/404.html",
     "lint": "eslint --ext .ts,.tsx ./ --max-warnings 0",
     "lint:fix": "eslint --ext .ts,.tsx ./ --max-warnings 0 --fix",
@@ -88,6 +88,7 @@
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-url": "^6.0.0",
+    "@tdesign/site-components": "^0.18.0-alpha.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -153,7 +154,6 @@
     "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "@tdesign/site-components": "^0.17.0",
     "tdesign-theme-generator": "^1.1.8",
     "typescript": "^5.8.3",
     "vite": "^6.2.3",
@@ -188,4 +188,4 @@
       "npm run lint:fix"
     ]
   }
-}
+}
@@ -4,6 +4,13 @@ import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation, useNavigat
 import packageJson from '@/package.json';
 import siteConfig from './site.config';
 import { filterVersions, getRoute } from './utils';
+import {
+  htmlContent,
+  mainJsContent,
+  styleContent,
+  packageJSONContent,
+  tsconfigContent,
+} from './components/codeSandbox/content';
 
 const LazyDemo = lazy(() => import('./Demo'));
 
@@ -44,10 +51,30 @@ function Components() {
   const tdDocAsideRef = useRef();
   const tdDocContentRef = useRef();
   const tdSelectRef = useRef();
-  // const tdDocSearch = useRef();
+  const tdDocSearch = useRef();
 
   const [version] = useState(currentVersion);
 
+  const demoRequestBody = JSON.stringify({
+    files: {
+      'package.json': {
+        content: packageJSONContent,
+      },
+      'public/index.html': {
+        content: htmlContent,
+      },
+      'src/main.tsx': {
+        content: mainJsContent,
+      },
+      'src/index.css': {
+        content: styleContent,
+      },
+      'tsconfig.json': {
+        content: tsconfigContent,
+      },
+    },
+  });
+
   function initHistoryVersions() {
     fetch(registryUrl)
       .then((res) => res.json())
@@ -68,7 +95,7 @@ function Components() {
 
   useEffect(() => {
     tdHeaderRef.current.framework = 'react';
-    // tdDocSearch.current.docsearchInfo = { indexName: 'tdesign_doc_react_mobile' };
+    tdDocSearch.current.docsearchInfo = { indexName: 'tdesign_doc_react_mobile' };
 
     const isEn = window.location.pathname.endsWith('en');
 
@@ -104,8 +131,10 @@ function Components() {
   return (
     <td-doc-layout>
       <td-header ref={tdHeaderRef} slot="header" platform="mobile">
-        {/* 暂时注释，等 algolia 重新更新后可直接放开 */}
-        {/* <td-doc-search slot="search" ref={tdDocSearch} />  */}
+        <div slot="search" style={{ display: 'flex', alignItems: 'center' }}>
+          <td-ai-button style={{ marginRight: '8px' }} framework="mobile-react" demoRequestBody={demoRequestBody} />
+          <td-doc-search ref={tdDocSearch} />
+        </div>
       </td-header>
       <td-doc-aside ref={tdDocAsideRef} title="React for Mobile">
         <td-select ref={tdSelectRef} value={version} slot="extra"></td-select>

@@ -0,0 +1,130 @@
+import orgPkg from '../../../../package.json';
+
+export const htmlContent = `
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <link rel="icon" href="/favicon.ico">
+      <title>TDesign</title>
+      <!--[if lte IE 9]>
+      <style>
+        #app {
+          display: none;
+        }
+      </style>
+      <![endif]-->
+    </head>
+
+    <body>
+      <!--[if lte IE 9]>
+        <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
+      <![endif]-->
+
+      <div id="app"></div>
+    </body>
+
+  </html>
+`;
+
+export const mainJsContent = `
+  import React from 'react';
+  import ReactDOM from 'react-dom/client';
+
+  import Demo from './demo';
+  import './index.css';
+  import 'tdesign-mobile-react/es/style/index.css';
+
+  const root = ReactDOM.createRoot(document.getElementById('app'));
+
+  root.render(
+  <React.StrictMode>
+    <Demo />
+  </React.StrictMode>,
+  );
+`;
+
+export const styleContent = `
+  /* 竖排展示 demo 行间距 16px */
+  .tdesign-demo-block-column {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+  }
+
+  /* 竖排展示 demo 行间距 32px */
+  .tdesign-demo-block-column-large {
+    display: flex;
+    flex-direction: column;
+    row-gap: 32px;
+  }
+
+  /* 横排排展示 demo 列间距 16px */
+  .tdesign-demo-block-row {
+    display: flex;
+    column-gap: 16px;
+    align-items: center;
+  }
+`;
+
+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 packageJSONContent = JSON.stringify(
+  {
+    name: 'tdesign-mobile-react-demo',
+    version: '0.0.0',
+    description: 'React example starter project',
+    keywords: ['react', 'starter'],
+    main: 'src/main.tsx',
+    dependencies: {
+      react: orgPkg.devDependencies.react,
+      dayjs: orgPkg.dependencies.dayjs,
+      'react-dom': orgPkg.devDependencies['react-dom'],
+      'tdesign-mobile-react': orgPkg.version,
+      'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
+      '@types/react': orgPkg.devDependencies['@types/react'],
+      '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
+    },
+    devDependencies: {
+      typescript: '^4.4.4',
+      'react-scripts': '^5.0.0',
+    },
+    scripts: {
+      start: 'react-scripts start',
+      build: 'react-scripts build',
+      test: 'react-scripts test --env=jsdom',
+      eject: 'react-scripts eject',
+    },
+    browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
+  },
+  null,
+  2,
+);
@@ -0,0 +1,102 @@
+import React from 'react';
+
+import { mainJsContent, htmlContent, styleContent, tsconfigContent, packageJSONContent } from './content';
+
+const TypeScriptType = 0;
+
+export default function codeSandbox(props) {
+  function onRunOnline() {
+    const demoDom = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`);
+    const code = demoDom?.currentRenderCode;
+    const isTypeScriptDemo = demoDom?.currentLangIndex === TypeScriptType;
+
+    if (isTypeScriptDemo) {
+      fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          files: {
+            'package.json': {
+              content: packageJSONContent,
+            },
+            'public/index.html': {
+              content: htmlContent,
+            },
+            'src/main.tsx': {
+              content: mainJsContent,
+            },
+            'src/index.css': {
+              content: styleContent,
+            },
+            '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.tsx`);
+        })
+        .finally(() => {});
+      return;
+    }
+    fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        files: {
+          'package.json': {
+            content: packageJSONContent,
+          },
+          'public/index.html': {
+            content: htmlContent,
+          },
+          'src/main.jsx': {
+            content: mainJsContent,
+          },
+          'src/index.css': {
+            content: styleContent,
+          },
+          'src/demo.jsx': {
+            content: code,
+          },
+        },
+      }),
+    })
+      .then((x) => x.json())
+      .then(({ sandbox_id: sandboxId }) => {
+        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.jsx`);
+      })
+      .finally(() => {});
+  }
+
+  return (
+    <td-tooltip trigger-type="hover">
+      <div className="action-online" onClick={onRunOnline}>
+        <svg fill="none" height="20" viewBox="0 0 23 23" width="20" xmlns="http://www.w3.org/2000/svg">
+          <g clipRule="evenodd" fillRule="evenodd">
+            <path
+              d="m11.5 11.6166v11.1704c.1945 0 .3223-.0422.4969-.1419l8.9445-5.1111c.3531-.2024.4971-.5158.4971-.9229v-10.36419c0-.2042-.043-.32636-.1422-.49691l-9.5102 5.3735c-.1769.1011-.2861.2893-.2861.4931zm4.9691 6.4143c0 .2839-.1064.4259-.3549.5679l-2.9815 1.7037c-.2129.1419-.4969.071-.4969-.213v-7.5957c0-.2032.1788-.4665.3549-.5679l6.8149-3.90429c.1893-.10894.3549.06554.3549.28395v4.04634c0 .2097-.0989.3982-.284.4969l-3.0524 1.6327c-.1851.0987-.355.2871-.355.4969z"
+              fill="currentColor"
+            />
+            <path
+              d="m1.56152 16.611v-10.36416c0-.40759.21402-.7916.5679-.99383l8.66048-4.898146c.1866-.098883.4969-.141973.7099-.141973s.5415.052741.7099.141975l8.5895 4.898144c.1699.10042.4008.33172.4969.49692l-9.5124 5.39507c-.1769.1011-.2839.2931-.2839.4969v11.1451c-.1945 0-.3933-.0423-.5679-.142l-8.73149-5.0401c-.35389-.2023-.63889-.5863-.63889-.9939zm1.27778-8.30552v4.04632c0 .2839.07099.4259.35494.5679l2.98148 1.7037c.28395.142.35494.3549.35494.5679v2.8395c0 .2839.07099.4259.35494.5679l2.98148 1.7037c.28392.142.49692.071.49692-.213v-7.5956c0-.213-.071-.426-.3549-.5679l-6.67289-3.83338c-.21296-.14197-.49691-.07099-.49691.21296zm11.642-4.82716-2.6266 1.49074c-.2129.14198-.4969.14198-.7098 0l-2.62659-1.49074c-.17289-.09772-.39472-.09722-.5679 0l-3.26543 1.84568c-.28395.14198-.28395.42593 0 .5679l6.53082 3.76235c.1748.10006.3932.10006.5679 0l6.5309-3.76235c.213-.14197.284-.42592 0-.5679l-3.2654-1.84568c-.1732-.09722-.395-.09772-.5679 0z"
+              fill="currentColor"
+            />
+          </g>
+        </svg>
+      </div>
+      <span slot="content">在 CodeSandbox 中打开</span>
+    </td-tooltip>
+  );
+}
@@ -34,6 +34,7 @@ export default function renderDemo(md, container) {
             >
               <div slot="action">
                 <Stackblitz demoName="${demoName}" componentName="${componentName}" code={${demoCodeDefName}} />
+                <Codesandbox demoName="${demoName}" componentName="${componentName}" code={${demoCodeDefName}} />
               </div>
             </td-doc-demo>
           `;

@@ -24,6 +24,7 @@ export default function mdToReact(options) {
     import Prismjs from 'prismjs';
     import 'prismjs/components/prism-bash.js';
     import Stackblitz from '@web/components/stackblitz/index.jsx';
+    import Codesandbox from '@web/components/codeSandbox/index.jsx';
 
     ${demoCodesDefsStr}