[site]Update

site/package.json

@@ -13,19 +13,19 @@
 		"build": "npm run env && vite build && npm run miniglobal"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^2.0.4",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
 		"@tailwindcss/typography": "^0.5.15",
-		"autoprefixer": "^10.4.13",
+		"autoprefixer": "^10.4.20",
 		"beautify-qrcode": "^1.0.3",
 		"clipboard": "^2.0.11",
 		"color": "^4.2.3",
-		"postcss": "^8.4.24",
+		"postcss": "^8.4.49",
 		"rollup-plugin-md": "^1.0.1",
-		"rollup-plugin-stdf-icon": "^0.0.11",
-		"svelte": "^4.2.2",
-		"svelte-confetti": "^1.3.0",
-		"svelte-spa-router": "^3.3.0",
-		"tailwindcss": "^3.2.4",
-		"vite": "^4.3.9"
+		"rollup-plugin-stdf-icon": "^0.0.15",
+		"svelte": "^5.2.9",
+		"svelte-confetti": "^2.2.0",
+		"svelte-spa-router": "^4.0.1",
+		"tailwindcss": "^3.4.15",
+		"vite": "^6.0.1"
 	}
 }

site/src/pages/components/Components.svelte

@@ -49,8 +49,8 @@
 	const getComponentStrFunc = async name => {
 		const rawObj = await import(`../../../../demo/src/routes/${isZh ? 'zh_CN' : 'en_US'}/${name}/+page.svelte?raw`);
 		const componentStr = rawObj.default;
-		// 将 componentStr 中的 from '../../../../../packages/stdf/components' 替换为 from 'stdf'
-		return componentStr.replace('../../../../../packages/stdf/components', 'stdf');
+		// 将 componentStr 中所有的 '../../../../../packages/stdf/components' 替换为 'stdf'
+		return componentStr.replace(/from ['"]\.\.\/\.\.\/\.\.\/\.\.\/\.\.\/packages\/stdf\/components['"]/g, "from 'stdf'");
 	};
 
 	const getDemoHeightFun = () => {
@@ -196,7 +196,7 @@
 						<div>
 							{isZh ? currentNav.title : currentNav.title_en}
 						</div>
-						<a href={QRValue} target="_blank">
+						<a href={QRValue} target="_blank" aria-label={isZh ? '扫码预览' : 'Scan to preview'}>
 							<div class="md:hidden bg-gray-100 dark:bg-gray-700 text-gray-500 rounded h-8 w-8 ml-2 p-1">
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
 									<path fill="none" d="M0 0h24v24H0z" />
@@ -214,7 +214,7 @@
 				<Tab {currentTab} on:TabClick={tabClickFun} />
 			</div>
 			<div class="my-4 ml-4">
-				<div class="h-px bg-black/10 dark:bg-white/20" />
+				<div class="h-px bg-black/10 dark:bg-white/20"></div>
 			</div>
 			<div>
 				<!-- <div class="relative overflow-hidden" style="width:{titleWidth}px;"> -->
@@ -244,7 +244,7 @@
 											: `https://demo.stdf.design/${isZh ? 'zh_CN' : 'en_US'}/${currentNav.nav}?channel=iframe`}
 										height={demoHeight - 2}
 										width="390"
-									/>
+									></iframe>
 								{:else}
 									<div class="flex justify-center flex-col text-primary dark:text-dark" style="width:390px;height:{demoHeight - 2}px;">
 										<div>

site/src/utils/index.js

@@ -63,6 +63,8 @@ const replacePart = (str, findText, replaceText) => {
  * mdTextToHljs('```js\nconsole.log(123)\n```') // <code class="hljs language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span>)</code>
  */
 export const mdTextToHljs = mdText => {
+	// 将所有 <td><code> 标签替换为 <td><code class="hljs language-typescript">
+	mdText = mdText.replace(/<td><code>/g, '<td><code class="hljs language-typescript">');
 	if (mdText.indexOf('<code class="') > 0) {
 		let apiText = mdText.indexOf('<code class="') > 0 ? htmlFilter(mdText).replace(/<code class="/g, '<code class="hljs ') : mdText;
 		const codeTexts = apiText.match(/<code[\s\S]*?<\/code>/g);
@@ -74,16 +76,18 @@ export const mdTextToHljs = mdText => {
 			const code = codeTexts[t].match(/<code[\s\S]*?>([\s\S]*?)<\/code>/)[1];
 			const highlightedCode = language
 				? // @ts-ignore
-				  hljs.highlight(code, {
+					hljs.highlight(code, {
 						language,
 						ignoreIllegals: true,
-				  }).value
+					}).value
 				: // @ts-ignore
-				  hljs.highlightAuto(code).value;
+					hljs.highlightAuto(code).value;
 			// 将高亮代码替换原代码
 			const newCode = codeTexts[t].replace(code, highlightedCode);
 			apiText = replacePart(apiText, codeTexts[t], newCode);
 		}
+		// 将所有 <td><code class="hljs hljs language-typescript"> 标签替换为 <td><code class="hljs language-typescript">
+		apiText = apiText.replace(/<td><code class="hljs hljs language-typescript">/g, '<td><code class="hljs language-typescript">');
 		return apiText;
 	} else {
 		return mdText;
@@ -287,7 +291,7 @@ const colorPalette = (originColor, i, format) => {
 					h: getNewHue(isLight, index),
 					s: getNewSaturation(isLight, index) < 0 ? 4 : getNewSaturation(isLight, index),
 					v: getNewValue(isLight, index),
-			  });
+				});
 	return getColorString(retColor, format);
 };
 

site/svelte.config.js

@@ -10,4 +10,9 @@ export default {
 	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
+	compilerOptions: {
+		compatibility: {
+			componentApi: 4,
+		},
+	},
 };