Skip to content

Commit 5221762

Browse files
anlyyaoliweijie0812
anlyyao
and
liweijie0812
authored
chore(site): support ai-search (#825)
* chore(site): support codeSandbox * chore(site): support ai-search * chore: remove cross-env * chore: upgrade @tdesign/site-components 0.18.0-alpha.5 * chore: fix typos * chore: fix typos * chore: rename codesandbox → CodeSandbox * 更新 md-to-react.js * chore: upgrade @tdesign/site-components to 0.18.0-alpha.6 --------- Co-authored-by: lwj <674416404@qq.com>
1 parent 5f7b69c commit 5221762

File tree

6 files changed

+270
-7
lines changed

6 files changed

+270
-7
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"site": "run-s site:build",
3232
"site:build": "cd site && vite build",
3333
"site:serve": "cd site && vite preview",
34-
"site:preview": "cd site && cross-env NODE_ENV=development vite build --mode preview",
34+
"site:preview": "cd site && vite build --mode preview",
3535
"postsite:preview": "cp _site/index.html _site/404.html",
3636
"lint": "eslint --ext .ts,.tsx ./ --max-warnings 0",
3737
"lint:fix": "eslint --ext .ts,.tsx ./ --max-warnings 0 --fix",
@@ -88,6 +88,7 @@
8888
"@rollup/plugin-node-resolve": "^13.0.4",
8989
"@rollup/plugin-replace": "^3.0.0",
9090
"@rollup/plugin-url": "^6.0.0",
91+
"@tdesign/site-components": "^0.18.0-alpha.6",
9192
"@testing-library/dom": "^10.4.0",
9293
"@testing-library/jest-dom": "^6.6.3",
9394
"@testing-library/react": "^16.3.0",
@@ -153,7 +154,6 @@
153154
"rollup-plugin-styles": "^3.14.1",
154155
"rollup-plugin-terser": "^7.0.2",
155156
"rollup-plugin-typescript2": "^0.31.2",
156-
"@tdesign/site-components": "^0.17.0",
157157
"tdesign-theme-generator": "^1.1.8",
158158
"typescript": "^5.8.3",
159159
"vite": "^6.2.3",
@@ -188,4 +188,4 @@
188188
"npm run lint:fix"
189189
]
190190
}
191-
}
191+
}

‎site/web/App.jsx‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation, useNavigat
44
import packageJson from '@/package.json';
55
import siteConfig from './site.config';
66
import { filterVersions, getRoute } from './utils';
7+
import {
8+
htmlContent,
9+
mainJsContent,
10+
styleContent,
11+
packageJSONContent,
12+
tsconfigContent,
13+
} from './components/codeSandbox/content';
714

815
const LazyDemo = lazy(() => import('./Demo'));
916

@@ -44,10 +51,30 @@ function Components() {
4451
const tdDocAsideRef = useRef();
4552
const tdDocContentRef = useRef();
4653
const tdSelectRef = useRef();
47-
// const tdDocSearch = useRef();
54+
const tdDocSearch = useRef();
4855

4956
const [version] = useState(currentVersion);
5057

58+
const demoRequestBody = JSON.stringify({
59+
files: {
60+
'package.json': {
61+
content: packageJSONContent,
62+
},
63+
'public/index.html': {
64+
content: htmlContent,
65+
},
66+
'src/main.tsx': {
67+
content: mainJsContent,
68+
},
69+
'src/index.css': {
70+
content: styleContent,
71+
},
72+
'tsconfig.json': {
73+
content: tsconfigContent,
74+
},
75+
},
76+
});
77+
5178
function initHistoryVersions() {
5279
fetch(registryUrl)
5380
.then((res) => res.json())
@@ -68,7 +95,7 @@ function Components() {
6895

6996
useEffect(() => {
7097
tdHeaderRef.current.framework = 'react';
71-
// tdDocSearch.current.docsearchInfo = { indexName: 'tdesign_doc_react_mobile' };
98+
tdDocSearch.current.docsearchInfo = { indexName: 'tdesign_doc_react_mobile' };
7299

73100
const isEn = window.location.pathname.endsWith('en');
74101

@@ -104,8 +131,10 @@ function Components() {
104131
return (
105132
<td-doc-layout>
106133
<td-header ref={tdHeaderRef} slot="header" platform="mobile">
107-
{/* 暂时注释，等 algolia 重新更新后可直接放开 */}
108-
{/* <td-doc-search slot="search" ref={tdDocSearch} /> */}
134+
<div slot="search" style={{ display: 'flex', alignItems: 'center' }}>
135+
<td-ai-button style={{ marginRight: '8px' }} framework="mobile-react" demoRequestBody={demoRequestBody} />
136+
<td-doc-search ref={tdDocSearch} />
137+
</div>
109138
</td-header>
110139
<td-doc-aside ref={tdDocAsideRef} title="React for Mobile">
111140
<td-select ref={tdSelectRef} value={version} slot="extra"></td-select>

‎site/web/components/codeSandbox/content.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import orgPkg from '../../../../package.json';
2+
3+
export const htmlContent = `
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
10+
<link rel="icon" href="/favicon.ico">
11+
<title>TDesign</title>
12+
<!--[if lte IE 9]>
13+
<style>
14+
#app {
15+
display: none;
16+
}
17+
</style>
18+
<![endif]-->
19+
</head>
20+
21+
<body>
22+
<!--[if lte IE 9]>
23+
<h1 style="position: absolute; width: 100%; text-align:center; top: 45%">请使用 IE 10 以及更新版本的浏览器访问，建议使用 <a href="https://www.google.cn/chrome/">Chrome</a></h1>
24+
<![endif]-->
25+
26+
<div id="app"></div>
27+
</body>
28+
29+
</html>
30+
`;
31+
32+
export const mainJsContent = `
33+
import React from 'react';
34+
import ReactDOM from 'react-dom/client';
35+
36+
import Demo from './demo';
37+
import './index.css';
38+
import 'tdesign-mobile-react/es/style/index.css';
39+
40+
const root = ReactDOM.createRoot(document.getElementById('app'));
41+
42+
root.render(
43+
<React.StrictMode>
44+
<Demo />
45+
</React.StrictMode>,
46+
);
47+
`;
48+
49+
export const styleContent = `
50+
/* 竖排展示 demo 行间距 16px */
51+
.tdesign-demo-block-column {
52+
display: flex;
53+
flex-direction: column;
54+
row-gap: 16px;
55+
}
56+
57+
/* 竖排展示 demo 行间距 32px */
58+
.tdesign-demo-block-column-large {
59+
display: flex;
60+
flex-direction: column;
61+
row-gap: 32px;
62+
}
63+
64+
/* 横排排展示 demo 列间距 16px */
65+
.tdesign-demo-block-row {
66+
display: flex;
67+
column-gap: 16px;
68+
align-items: center;
69+
}
70+
`;
71+
72+
export const tsconfigContent = `{
73+
"compilerOptions": {
74+
"target": "es5",
75+
"lib": [
76+
"dom",
77+
"dom.iterable",
78+
"esnext"
79+
],
80+
"allowJs": true,
81+
"skipLibCheck": true,
82+
"esModuleInterop": true,
83+
"allowSyntheticDefaultImports": true,
84+
"strict": true,
85+
"forceConsistentCasingInFileNames": true,
86+
"noFallthroughCasesInSwitch": true,
87+
"module": "esnext",
88+
"moduleResolution": "node",
89+
"resolveJsonModule": true,
90+
"isolatedModules": true,
91+
"noEmit": true,
92+
"jsx": "react-jsx"
93+
},
94+
"include": [
95+
"src"
96+
]
97+
}
98+
`;
99+
100+
export const packageJSONContent = JSON.stringify(
101+
{
102+
name: 'tdesign-mobile-react-demo',
103+
version: '0.0.0',
104+
description: 'React example starter project',
105+
keywords: ['react', 'starter'],
106+
main: 'src/main.tsx',
107+
dependencies: {
108+
react: orgPkg.devDependencies.react,
109+
dayjs: orgPkg.dependencies.dayjs,
110+
'react-dom': orgPkg.devDependencies['react-dom'],
111+
'tdesign-mobile-react': orgPkg.version,
112+
'tdesign-icons-react': orgPkg.dependencies['tdesign-icons-react'],
113+
'@types/react': orgPkg.devDependencies['@types/react'],
114+
'@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
115+
},
116+
devDependencies: {
117+
typescript: '^4.4.4',
118+
'react-scripts': '^5.0.0',
119+
},
120+
scripts: {
121+
start: 'react-scripts start',
122+
build: 'react-scripts build',
123+
test: 'react-scripts test --env=jsdom',
124+
eject: 'react-scripts eject',
125+
},
126+
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
127+
},
128+
null,
129+
2,
130+
);

‎site/web/components/codeSandbox/index.jsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
3+
import { mainJsContent, htmlContent, styleContent, tsconfigContent, packageJSONContent } from './content';
4+
5+
const TypeScriptType = 0;
6+
7+
export default function codeSandbox(props) {
8+
function onRunOnline() {
9+
const demoDom = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`);
10+
const code = demoDom?.currentRenderCode;
11+
const isTypeScriptDemo = demoDom?.currentLangIndex === TypeScriptType;
12+
13+
if (isTypeScriptDemo) {
14+
fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
15+
method: 'POST',
16+
headers: {
17+
'Content-Type': 'application/json',
18+
Accept: 'application/json',
19+
},
20+
body: JSON.stringify({
21+
files: {
22+
'package.json': {
23+
content: packageJSONContent,
24+
},
25+
'public/index.html': {
26+
content: htmlContent,
27+
},
28+
'src/main.tsx': {
29+
content: mainJsContent,
30+
},
31+
'src/index.css': {
32+
content: styleContent,
33+
},
34+
'src/demo.tsx': {
35+
content: code,
36+
},
37+
'tsconfig.json': {
38+
content: tsconfigContent,
39+
},
40+
},
41+
}),
42+
})
43+
.then((x) => x.json())
44+
.then(({ sandbox_id: sandboxId }) => {
45+
window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.tsx`);
46+
})
47+
.finally(() => {});
48+
return;
49+
}
50+
fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
51+
method: 'POST',
52+
headers: {
53+
'Content-Type': 'application/json',
54+
Accept: 'application/json',
55+
},
56+
body: JSON.stringify({
57+
files: {
58+
'package.json': {
59+
content: packageJSONContent,
60+
},
61+
'public/index.html': {
62+
content: htmlContent,
63+
},
64+
'src/main.jsx': {
65+
content: mainJsContent,
66+
},
67+
'src/index.css': {
68+
content: styleContent,
69+
},
70+
'src/demo.jsx': {
71+
content: code,
72+
},
73+
},
74+
}),
75+
})
76+
.then((x) => x.json())
77+
.then(({ sandbox_id: sandboxId }) => {
78+
window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.jsx`);
79+
})
80+
.finally(() => {});
81+
}
82+
83+
return (
84+
<td-tooltip trigger-type="hover">
85+
<div className="action-online" onClick={onRunOnline}>
86+
<svg fill="none" height="20" viewBox="0 0 23 23" width="20" xmlns="http://www.w3.org/2000/svg">
87+
<g clipRule="evenodd" fillRule="evenodd">
88+
<path
89+
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"
90+
fill="currentColor"
91+
/>
92+
<path
93+
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"
94+
fill="currentColor"
95+
/>
96+
</g>
97+
</svg>
98+
</div>
99+
<span slot="content">在 CodeSandbox 中打开</span>
100+
</td-tooltip>
101+
);
102+
}

‎site/web/plugins/plugin-tdoc/demo.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default function renderDemo(md, container) {
3434
>
3535
<div slot="action">
3636
<Stackblitz demoName="${demoName}" componentName="${componentName}" code={${demoCodeDefName}} />
37+
<Codesandbox demoName="${demoName}" componentName="${componentName}" code={${demoCodeDefName}} />
3738
</div>
3839
</td-doc-demo>
3940
`;

‎site/web/plugins/plugin-tdoc/md-to-react.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function mdToReact(options) {
2424
import Prismjs from 'prismjs';
2525
import 'prismjs/components/prism-bash.js';
2626
import Stackblitz from '@web/components/stackblitz/index.jsx';
27+
import Codesandbox from '@web/components/codeSandbox/index.jsx';
2728
2829
${demoCodesDefsStr}
2930

0 commit comments

Comments
 (0)