[doc]Update

docs/site/src/components/cmdk/CmdK.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { fly, fade } from 'svelte/transition';
 	import { location, push, querystring } from 'svelte-spa-router';
-	import menuList from '../../../../demo/src/data/menuList';
+	import { menuList } from '../../data/menuList';
 
 	import { isCmdKStore } from '../../store';
 

docs/site/src/components/tab/Tab.svelte

@@ -1,180 +1,183 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import { querystring } from 'svelte-spa-router';
-	import { currentThemeStore } from '../../store';
-	// @ts-ignore
-	import { encodeData, rendererLine } from 'beautify-qrcode';
+    import { createEventDispatcher } from 'svelte';
+    import { fade } from 'svelte/transition';
+    import { querystring } from 'svelte-spa-router';
+    import { currentThemeStore } from '../../store';
+    // @ts-ignore
+    import { encodeData, rendererLine } from 'beautify-qrcode';
 
-	export let currentTab = 0;
-	const dispatch = createEventDispatcher();
-	const tabList = [
-		{ zh: '示例', en: 'Demo' },
-		{ zh: 'API', en: 'API' },
-		{ zh: '指南', en: 'Guide' },
-		{ zh: 'FAQ', en: 'FAQ' },
-		{ zh: '版本', en: 'Version' },
-	];
-	const changeIndexFun = i => {
-		currentTab = i;
-		dispatch('TabClick', i);
-	};
-	const isZh = localStorage.getItem('lang') === 'zh_CN';
-	let showQr = false;
-	let QRValue = '';
-	let A_a1Svg;
+    export let currentTab = 0;
+    const dispatch = createEventDispatcher();
+    const tabList = [
+        { zh: '示例', en: 'Demo' },
+        { zh: 'API', en: 'API' },
+        { zh: '指南', en: 'Guide' },
+        { zh: 'FAQ', en: 'FAQ' },
+        { zh: '版本', en: 'Version' },
+    ];
+    const changeIndexFun = i => {
+        currentTab = i;
+        dispatch('TabClick', i);
+    };
+    const isZh = localStorage.getItem('lang') === 'zh_CN';
+    let showQr = false;
+    let QRValue = '';
+    let A_a1Svg;
 
-	const mouseenterFun = () => {
-		const params = new URLSearchParams('?' + $querystring);
-		QRValue =
-			// @ts-ignore
-			(import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://demo.stdf.design/') +
-			(isZh ? 'zh_CN/' : 'en_US/') +
-			params.get('nav');
-		showQr = true;
-		/**
-		 * A_a1
-		 * @param {Object} qrcode
-		 * @param {Object} options
-		 * @param {String} [options.type]  连线方向 0=>左右 1=>上下 2=>纵横 3=>回环 4=>左上—右下 5=>右上—左下 6=>交叉"
-		 * @param {String} [options.size] 连线粗细
-		 * @param {String} [options.opacity] 连线不透明度
-		 * @param {String} [options.posType] 定位点样式  0=>矩形 1=>圆形 2=>行星 3=>圆角矩形
-		 * @param {String} [options.otherColor] 连线颜色
-		 * @param {String} [options.posColor] 定位点颜色
-		 */
-		const qrcode = encodeData({
-			text: QRValue,
-			isSpace: false,
-		});
-		const color = $currentThemeStore === 'dark' ? 'rgb(var(--theme-color-dark))' : 'rgb(var(--theme-color-primary))';
-		A_a1Svg = rendererLine(qrcode, {
-			posType: 2,
-			otherColor: color,
-			posColor: color,
-		});
-	};
+    const mouseenterFun = () => {
+        const params = new URLSearchParams('?' + $querystring);
+        QRValue =
+            // main -> next
+            // @ts-ignore
+            (import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://next-demo.stdf.design/') +
+            params.get('nav') +
+            (isZh ? '/zh_CN' : '/en_US');
+        showQr = true;
+        /**
+         * A_a1
+         * @param {Object} qrcode
+         * @param {Object} options
+         * @param {String} [options.type]  连线方向 0=>左右 1=>上下 2=>纵横 3=>回环 4=>左上—右下 5=>右上—左下 6=>交叉"
+         * @param {String} [options.size] 连线粗细
+         * @param {String} [options.opacity] 连线不透明度
+         * @param {String} [options.posType] 定位点样式  0=>矩形 1=>圆形 2=>行星 3=>圆角矩形
+         * @param {String} [options.otherColor] 连线颜色
+         * @param {String} [options.posColor] 定位点颜色
+         */
+        const qrcode = encodeData({
+            text: QRValue,
+            isSpace: false,
+        });
+        const color = $currentThemeStore === 'dark' ? 'rgb(var(--theme-color-dark))' : 'rgb(var(--theme-color-primary))';
+        A_a1Svg = rendererLine(qrcode, {
+            posType: 2,
+            otherColor: color,
+            posColor: color,
+        });
+    };
 
-	let showStackblitz = false;
-	let stackblitzValue = '';
-	const showStackblitzFunc = () => {
-		const nav = $querystring.split('&')[0].split('=')[1];
-		stackblitzValue = `https://stackblitz.com/github/any-tdf/demo-stdf?file=src%2Froutes%2F${
-			isZh ? 'zh_CN' : 'en_US'
-		}%2F${nav}%2F%2Bpage.svelte&startScript=${nav}${isZh ? '' : '_en'}`;
-		showStackblitz = true;
-	};
+    let showStackblitz = false;
+    let stackblitzValue = '';
+    const showStackblitzFunc = () => {
+        const nav = $querystring.split('&')[0].split('=')[1];
+        // main -> next
+        stackblitzValue = `https://stackblitz.com/github/any-tdf/next-demo-stdf?file=src%2Froutes%2F${
+            isZh ? 'zh_CN' : 'en_US'
+        }%2F${nav}%2F%2Bpage.svelte&startScript=${nav}${isZh ? '' : '_en'}`;
+        showStackblitz = true;
+    };
 
-	let showCode = false;
-	let codeValue = '';
-	const showCodeFunc = () => {
-		const nav = $querystring.split('&')[0].split('=')[1];
-		// 将nav首字母大写
-		const navFirst = nav.slice(0, 1).toUpperCase() + nav.slice(1);
-		codeValue = `https://github.com/any-tdf/stdf/blob/main/packages/stdf/components/${nav}/${navFirst}.svelte`;
-		showCode = true;
-	};
+    let showCode = false;
+    let codeValue = '';
+    const showCodeFunc = () => {
+        const nav = $querystring.split('&')[0].split('=')[1];
+        // 将nav首字母大写
+        const navFirst = nav.slice(0, 1).toUpperCase() + nav.slice(1);
+        // main -> next
+        codeValue = `https://github.com/any-tdf/stdf/blob/next/packages/stdf/components/${nav}/${navFirst}.svelte`;
+        showCode = true;
+    };
 </script>
 
 <div class="relative top-14 w-82 md:w-102">
-	<div class="relative rounded p-1 bg-gray-100 dark:bg-gray-700">
-		<!--滑块-->
-		<div
-			class="absolute top-1 w-16 md:w-20 h-10 rounded bg-white dark:bg-black shadow-md dark:shadow-white/10 transition-all duration-300"
-			class:left-1={currentTab === 0}
-			class:left-17={currentTab === 1}
-			class:md:left-21={currentTab === 1}
-			class:left-33={currentTab === 2}
-			class:md:left-41={currentTab === 2}
-			class:left-49={currentTab === 3}
-			class:md:left-61={currentTab === 3}
-			class:left-65={currentTab === 4}
-			class:md:left-81={currentTab === 4}
-		/>
-		<!--二维码-->
-		<a href={QRValue} target="_blank">
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				on:mouseleave={() => (showQr = false)}
-				on:mouseenter={mouseenterFun}
-				class="hidden md:block absolute top-0 bg-gray-100 dark:bg-gray-700 rounded p-3 left-106 h-12 w-12"
-			>
-				<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" />
-					<path
-						d="M16 17v-1h-3v-3h3v2h2v2h-1v2h-2v2h-2v-3h2v-1h1zm5 4h-4v-2h2v-2h2v4zM3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v2h-3v-2zM6 6h2v2H6V6zm0 10h2v2H6v-2zM16 6h2v2h-2V6z"
-					/>
-				</svg>
-				{#if showQr}
-					<div
-						class="w-60 rounded bg-black absolute z-50 top-14 left-0 p-6 shadow-lg hidden dark:block"
-						transition:fade={{ duration: 200 }}
-					>
-						<span>{@html A_a1Svg}</span>
-					</div>
-				{/if}
-				{#if showQr}
-					<div
-						class="w-60 rounded bg-white absolute z-50 top-14 left-0 p-6 shadow-lg block dark:hidden"
-						transition:fade={{ duration: 200 }}
-					>
-						<span>{@html A_a1Svg}</span>
-					</div>
-				{/if}
-			</div>
-		</a>
-		<!--StackBlitz-->
-		<a href={stackblitzValue} target="_blank">
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				on:mouseleave={() => (showStackblitz = false)}
-				on:mouseenter={showStackblitzFunc}
-				class="hidden md:block absolute top-0 bg-gray-100 dark:bg-gray-700 rounded p-3 left-[34.5rem] h-12 w-12"
-			>
-				<svg viewBox="0 0 28 28" height="24">
-					<path fill="#3275e7" d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z" />
-				</svg>
-				{#if showStackblitz}
-					<div
-						class="w-44 h-12 leading-[1.5rem] text-center rounded bg-gray-700 text-white absolute z-50 top-14 left-0 py-3 shadow-lg"
-						transition:fade={{ duration: 200 }}
-					>
-						{isZh ? '在 StackBlitz 中打开' : 'Open in StackBlitz'}
-					</div>
-				{/if}
-			</div>
-		</a>
-		<!--组件源码-->
-		<a href={codeValue} target="_blank">
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				on:mouseleave={() => (showCode = false)}
-				on:mouseenter={showCodeFunc}
-				class="hidden md:block absolute top-0 bg-gray-100 dark:bg-gray-700 rounded p-3 left-[30.5rem] h-12 w-12"
-			>
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
-					<path
-						d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM4 5V19H20V5H4ZM20 12L16.4645 15.5355L15.0503 14.1213L17.1716 12L15.0503 9.87868L16.4645 8.46447L20 12ZM6.82843 12L8.94975 14.1213L7.53553 15.5355L4 12L7.53553 8.46447L8.94975 9.87868L6.82843 12ZM11.2443 17H9.11597L12.7557 7H14.884L11.2443 17Z"
-					/>
-				</svg>
-				{#if showCode}
-					<div
-						class="{isZh
-							? 'w-28'
-							: 'w-52'} h-12 leading-[1.5rem] text-center rounded bg-gray-700 text-white absolute z-50 top-14 left-0 py-3 shadow-lg"
-						transition:fade={{ duration: 200 }}
-					>
-						{isZh ? '组件源码' : 'Component source code'}
-					</div>
-				{/if}
-			</div>
-		</a>
-		<div class="flex relative">
-			{#each tabList as item, index}
-				<button on:click={() => changeIndexFun(index)} class="cursor-pointer py-2 w-16 md:w-20 text-center rounded">
-					{isZh ? item.zh : item.en}
-				</button>
-			{/each}
-		</div>
-	</div>
+    <div class="relative rounded p-1 bg-gray-100 dark:bg-gray-700">
+        <!--滑块-->
+        <div
+            class="absolute top-1 w-16 md:w-20 h-10 rounded bg-white dark:bg-black shadow-md dark:shadow-white/10 transition-all duration-300"
+            class:left-1={currentTab === 0}
+            class:left-17={currentTab === 1}
+            class:md:left-21={currentTab === 1}
+            class:left-33={currentTab === 2}
+            class:md:left-41={currentTab === 2}
+            class:left-49={currentTab === 3}
+            class:md:left-61={currentTab === 3}
+            class:left-65={currentTab === 4}
+            class:md:left-81={currentTab === 4}
+        ></div>
+        <!--二维码-->
+        <a href={QRValue} target="_blank">
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+                on:mouseleave={() => (showQr = false)}
+                on:mouseenter={mouseenterFun}
+                class="hidden md:block absolute top-0 bg-gray-100 dark:bg-gray-700 rounded p-3 left-106 h-12 w-12"
+            >
+                <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" />
+                    <path
+                        d="M16 17v-1h-3v-3h3v2h2v2h-1v2h-2v2h-2v-3h2v-1h1zm5 4h-4v-2h2v-2h2v4zM3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v2h-3v-2zM6 6h2v2H6V6zm0 10h2v2H6v-2zM16 6h2v2h-2V6z"
+                    />
+                </svg>
+                {#if showQr}
+                    <div
+                        class="w-60 rounded bg-black absolute z-50 top-14 left-0 p-6 shadow-lg hidden dark:block"
+                        transition:fade={{ duration: 200 }}
+                    >
+                        <span>{@html A_a1Svg}</span>
+                    </div>
+                {/if}
+                {#if showQr}
+                    <div
+                        class="w-60 rounded bg-white absolute z-50 top-14 left-0 p-6 shadow-lg block dark:hidden"
+                        transition:fade={{ duration: 200 }}
+                    >
+                        <span>{@html A_a1Svg}</span>
+                    </div>
+                {/if}
+            </div>
+        </a>
+        <!--StackBlitz-->
+        <a href={stackblitzValue} target="_blank">
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+                on:mouseleave={() => (showStackblitz = false)}
+                on:mouseenter={showStackblitzFunc}
+                class="hidden md:block absolute top-0 bg-gray-100 dark:bg-gray-700 rounded p-3 left-[34.5rem] h-12 w-12"
+            >
+                <svg viewBox="0 0 28 28" height="24">
+                    <path fill="#3275e7" d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z" />
+                </svg>
+                {#if showStackblitz}
+                    <div
+                        class="w-44 h-12 leading-[1.5rem] text-center rounded bg-gray-700 text-white absolute z-50 top-14 left-0 py-3 shadow-lg"
+                        transition:fade={{ duration: 200 }}
+                    >
+                        {isZh ? '在 StackBlitz 中打开' : 'Open in StackBlitz'}
+                    </div>
+                {/if}
+            </div>
+        </a>
+        <!--组件源码-->
+        <a href={codeValue} target="_blank">
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+                on:mouseleave={() => (showCode = false)}
+                on:mouseenter={showCodeFunc}
+                class="hidden md:block absolute top-0 bg-gray-100 dark:bg-gray-700 rounded p-3 left-[30.5rem] h-12 w-12"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
+                    <path
+                        d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM4 5V19H20V5H4ZM20 12L16.4645 15.5355L15.0503 14.1213L17.1716 12L15.0503 9.87868L16.4645 8.46447L20 12ZM6.82843 12L8.94975 14.1213L7.53553 15.5355L4 12L7.53553 8.46447L8.94975 9.87868L6.82843 12ZM11.2443 17H9.11597L12.7557 7H14.884L11.2443 17Z"
+                    />
+                </svg>
+                {#if showCode}
+                    <div
+                        class="{isZh
+                            ? 'w-28'
+                            : 'w-52'} h-12 leading-[1.5rem] text-center rounded bg-gray-700 text-white absolute z-50 top-14 left-0 py-3 shadow-lg"
+                        transition:fade={{ duration: 200 }}
+                    >
+                        {isZh ? '组件源码' : 'Component source code'}
+                    </div>
+                {/if}
+            </div>
+        </a>
+        <div class="flex relative">
+            {#each tabList as item, index}
+                <button on:click={() => changeIndexFun(index)} class="cursor-pointer py-2 w-16 md:w-20 text-center rounded">
+                    {isZh ? item.zh : item.en}
+                </button>
+            {/each}
+        </div>
+    </div>
 </div>

docs/site/src/components/themeSwitch/ThemeSwitch.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { switchTheme } from '../../../../packages/stdf/theme';
-	import themes from '../../../../demo/src/data/themes';
+	import { switchTheme } from 'stdf/theme';
+	import themes from '../../data/themes';
 	import { currentColorStore } from '../../store';
 
 	// 横排还是竖排

docs/site/src/data/menuList.ts

@@ -0,0 +1,414 @@
+export type MenuListChild = {
+	title: string;
+	title_zh: string;
+	title_en: string;
+	nav: string;
+	tip: string;
+	tip_en: string;
+	alias: string;
+};
+export type MenuList = { class: string; class_en: string; childs: MenuListChild[] };
+
+export const menuList: MenuList[] = [
+	{
+		class: '通用',
+		class_en: 'Universal',
+		childs: [
+			{
+				title: '按钮 Button',
+				title_zh: '按钮',
+				title_en: 'Button',
+				nav: 'button',
+				tip: '按下它，让世界变得更美好吧。',
+				tip_en: 'Press it and make the world a better place.',
+				alias: 'button|按钮'
+			},
+			{
+				title: '底部浮窗 BottomSheet',
+				title_zh: '底部浮窗',
+				title_en: 'BottomSheet',
+				nav: 'bottomSheet',
+				tip: '浮窗犹如小偷，突然出现让你焦灼，却也能唤起你的警觉。',
+				tip_en: 'The floating window is like a thief, suddenly appearing to make you anxious, but it can also arouse your alertness.',
+				alias:
+					'bottomSheet|底部浮窗|底部|底|部|浮窗|bottomSheet底部浮窗|bottomSheet 底部浮窗|底部弹窗|bottomSheet底部弹窗|bottomSheet 底部弹窗|底部弹出框|bottomSheet底部弹出框|bottomSheet 底部弹出框|底部弹出层|bottomSheet底部弹出层|bottomSheet 底部弹出层'
+			},
+			{
+				title: '图标 Icon',
+				title_zh: '图标',
+				title_en: 'Icon',
+				nav: 'icon',
+				tip: '使用 SVG Sprites，请参照指南引入与使用。',
+				tip_en: 'Use SVG Sprites, please refer to the guide to import and use.',
+				alias: 'icon|图标|svg'
+			},
+			{
+				title: '遮罩 Mask',
+				title_zh: '遮罩',
+				title_en: 'Mask',
+				nav: 'mask',
+				tip: '遮罩虽能掩盖身形，却无法掩藏内心。',
+				tip_en: 'Although the mask can cover the figure, it cannot hide the heart.',
+				alias: 'mask|遮罩|遮|罩|mask遮罩|mask 遮罩|遮罩层|mask遮罩层|mask 遮罩层|Overlay|maskOverlay|mask Overlay'
+			},
+			{
+				title: '弹出层 Popup',
+				title_zh: '弹出层',
+				title_en: 'Popup',
+				nav: 'popup',
+				tip: '机会就像弹珠，只有你努力地推它，它才会弹出来。',
+				tip_en: 'Opportunity is like a marble, only if you push it hard, it will pop out.',
+				alias:
+					'popup|弹出层|弹出|弹|出|层|popup弹出层|popup 弹出层|弹窗|popup弹窗|popup 弹窗|弹出框|popup弹出框|popup 弹出框|弹出层|popup弹出层|popup 弹出层'
+			}
+		]
+	},
+	{
+		class: '布局',
+		class_en: 'Layout',
+		childs: [
+			{
+				title: '分割线 Divider',
+				title_zh: '分割线',
+				title_en: 'Divider',
+				nav: 'divider',
+				tip: '分开的日子越久，最初的喜悦越发淡薄。',
+				tip_en: 'The longer the days are separated, the more the initial joy fades.',
+				alias: 'divider|分割线|分割|line'
+			},
+			{
+				title: '网格 Grids',
+				title_zh: '网格',
+				title_en: 'Grids',
+				nav: 'grids',
+				tip: '可是怎么说，总觉得，我们之间留了太多空白格。',
+				tip_en: 'How can I say, I always feel that there are too many blank grids between us.',
+				alias: 'grids|网格|grid|row|col|column'
+			},
+			{
+				title: '占位符 Placeholder',
+				title_zh: '占位符',
+				title_en: 'Placeholder',
+				nav: 'placeholder',
+				tip: '人生重要的不是所站的位置，而是所朝的方向。',
+				tip_en: 'What is important in life is not the position you stand, but the direction you face.',
+				alias: 'placeholder|占位符|占位'
+			},
+			{
+				title: '骨架屏 Skeleton',
+				title_zh: '骨架屏',
+				title_en: 'Skeleton',
+				nav: 'skeleton',
+				tip: '骨架是支撑身体的关键，而人生信念则是支撑生命的骨架。',
+				tip_en: 'The skeleton is the key to supporting the body, and the belief in life is the skeleton that supports life.',
+				alias: 'skeleton|骨架屏|骨架'
+			}
+		]
+	},
+	{
+		class: '导航',
+		class_en: 'Navigation',
+		childs: [
+			{
+				title: '索引栏 IndexBar',
+				title_zh: '索引栏',
+				title_en: 'IndexBar',
+				nav: 'indexBar',
+				tip: '你不迷途知返，我怎么给你以索引？',
+				tip_en: "If you don't know the way back, how can I give you an index?",
+				alias: 'indexBar|索引栏|indexbar|index|bar|索引|index 栏|索引条|index条|index 条'
+			},
+			{
+				title: '导航栏 NavBar',
+				title_zh: '导航栏',
+				title_en: 'NavBar',
+				nav: 'navBar',
+				tip: '没有指引，在黑暗中只能乱撞。',
+				tip_en: 'Without guidance, you can only bump in the dark.',
+				alias: 'navBar|导航栏|navbar|nav|bar|导航|nav-bar|nav bar'
+			},
+			{
+				title: '分页 Pagination',
+				title_zh: '分页',
+				title_en: 'Pagination',
+				nav: 'pagination',
+				tip: '人生就像一部电影，不论多么精彩，也有谢幕的时候。',
+				tip_en: 'Life is like a movie, no matter how wonderful it is, there is a curtain call.',
+				alias: 'pagination|分页|page|分|页|pagination分页|pagination 分页|page分页|page 分页'
+			},
+			{
+				title: '步骤条 Steps',
+				title_zh: '步骤条',
+				title_en: 'Steps',
+				nav: 'steps',
+				tip: '人生没有白走的路，每一步都算数。',
+				tip_en: 'Life has no wasted steps, every step counts.',
+				alias: 'steps|step|步骤条|步骤|step条|step 条|步骤栏|step栏|step 栏'
+			},
+			{
+				title: '标签栏 TabBar',
+				title_zh: '标签栏',
+				title_en: 'TabBar',
+				nav: 'tabBar',
+				tip: '看脚下一片黑暗，望头顶星光璀璨。',
+				tip_en: "Looking down, it's all darkness; looking up, the stars are shining brightly.",
+				alias: 'tabBar|标签栏|tabbar|tab|bar|标签|tab 栏'
+			},
+			{
+				title: '标签页 Tabs',
+				title_zh: '标签页',
+				title_en: 'Tabs',
+				nav: 'tabs',
+				tip: '偶尔隐藏，是为了在合适的时候更好地绽放。',
+				tip_en: 'Occasionally hide, it is to bloom better at the right time.',
+				alias: 'tabs|tab|标签页|标签|tab页'
+			}
+		]
+	},
+	{
+		class: '数据输入',
+		class_en: 'Data entry',
+		childs: [
+			{
+				title: '动作面板 ActionSheet',
+				title_zh: '动作面板',
+				title_en: 'ActionSheet',
+				nav: 'actionSheet',
+				tip: '我的世界只有一个选项，就是你。',
+				tip_en: 'There is only one option in my world, and that is you.',
+				alias:
+					'actionSheet|动作面板|动作|动|作|面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板'
+			},
+			{
+				title: '异步选择器 AsyncPicker',
+				title_zh: '异步选择器',
+				title_en: 'AsyncPicker',
+				nav: 'asyncPicker',
+				tip: '错过的话，就请错过一辈子吧！',
+				tip_en: 'If you miss it, please miss it for a lifetime!',
+				alias: 'asyncPicker|异步选择器|异步|asyncPicker异步选择器|asyncPicker 异步选择器|async picker|asyncpicker|异步picker|异步picker'
+			},
+			{
+				title: '日历 Calendar',
+				title_zh: '日历',
+				title_en: 'Calendar',
+				nav: 'calendar',
+				tip: '在无人问津日子里，正是登峰造极的好时机。',
+				tip_en: 'In the days when no one cares, it is a good time to reach the peak.',
+				alias:
+					'calendar|日历|日|历|calendar日历|calendar 日历|日期|calendar日期|calendar 日期|周选择|calendar周选择|calendar 周选择|周|calendar周|calendar 周|日期区间|月选择|日期范围选择'
+			},
+			{
+				title: '复选框 Checkbox',
+				title_zh: '复选框',
+				title_en: 'Checkbox',
+				nav: 'checkbox',
+				tip: '要么全不，要么全部。',
+				tip_en: 'Either all or none.',
+				alias:
+					'checkbox|复选框|复选|checkbox复选框|checkbox 复选框|复选按钮|checkbox复选按钮|checkbox 复选按钮|多选框|多选|checkbox多选框|checkbox 多选框|多选按钮|checkbox多选按钮|checkbox 多选按钮'
+			},
+			{
+				title: '输入框 Input',
+				title_zh: '输入框',
+				title_en: 'Input',
+				nav: 'input',
+				tip: '对方正在输入......',
+				tip_en: 'The other party is typing...',
+				alias:
+					'input|输入框|输入|input输入框|input 输入框|Textarea|textarea|文本域|文本框|文本|textarea文本域|textarea 文本域|多行输入框|多行输入|多行|textarea多行输入框|textarea 多行输入框'
+			},
+			{
+				title: '数字键盘 NumKeyboard',
+				title_zh: '数字键盘',
+				title_en: 'NumKeyboard',
+				nav: 'numKeyboard',
+				tip: '3 0624700 | 3 0624770 | 5 34202 13942 | 4314 0624',
+				tip_en: '3 0624700 | 3 0624770 | 5 34202 13942 | 4314 0624',
+				alias:
+					'numKeyboard|数字键盘|数字|键盘|numKeyboard数字键盘|numKeyboard 数字键盘|金额键盘|numKeyboard金额键盘|numKeyboard 金额键盘|number|keyboard|amount|money|'
+			},
+			{
+				title: '选择器 Picker',
+				title_zh: '选择器',
+				title_en: 'Picker',
+				nav: 'picker',
+				tip: '采摘花瓣时，你得不到花的美丽。',
+				tip_en: 'When you pick petals, you don’t get the beauty of the flower.',
+				alias: 'picker|选择器|选择|picker选择器|picker 选择器'
+			},
+			{
+				title: '单选框 Radio',
+				title_zh: '单选框',
+				title_en: 'Radio',
+				nav: 'radio',
+				tip: '如果要在正确和善良中选择一个，请选择善良。',
+				tip_en: 'If you have to choose between right and good, choose good.',
+				alias: 'radio|单选框|单选|radio单选框|radio 单选框|单选按钮|radio单选按钮|radio 单选按钮'
+			},
+			{
+				title: '评分 Rate',
+				title_zh: '评分',
+				title_en: 'Rate',
+				nav: 'rate',
+				tip: '散场时，对方剩余的手机电量，就是这场约会的评分。',
+				tip_en: 'At the end of the game, the remaining battery power of the other party is the score of this date.',
+				alias: 'rate|评分|评|分|rate评分|rate 评分'
+			},
+			{
+				title: '滑块 Slider',
+				title_zh: '滑块',
+				title_en: 'Slider',
+				nav: 'slider',
+				tip: '请滑动解锁您的烦恼。',
+				tip_en: 'Please slide to unlock your troubles.',
+				alias: 'slider|滑块|滑|块|slider滑块|slider 滑块'
+			},
+			{
+				title: '开关 Switch',
+				title_zh: '开关',
+				title_en: 'Switch',
+				nav: 'switch',
+				tip: '死亡是一个开关，活着却是一根绳索。',
+				tip_en: 'Death is a switch, but life is a rope.',
+				alias: 'switch|开关|开|关|switch开关|switch 开关'
+			},
+			{
+				title: '步进器 Stepper',
+				title_zh: '步进器',
+				title_en: 'Stepper',
+				nav: 'stepper',
+				tip: '人生如同诗行，或进或退皆成章。保持心灵节奏，生命之诗韵味悠长。',
+				tip_en:
+					'Life is like a poem, advancing or retreating all form chapters. Maintain the rhythm of the soul, and the poetic flavor of life will last long.',
+				alias: 'stepper|步进器|步|进|器|stepper步进器|stepper 步进器'
+			},
+			{
+				title: '时间选择器 TimePicker',
+				title_zh: '时间选择器',
+				title_en: 'TimePicker',
+				nav: 'timePicker',
+				tip: '死亡不是失去生命，而是走出了时间的枷锁。',
+				tip_en: 'Death is not the loss of life, but the release of the shackles of time.',
+				alias:
+					'timePicker|时间选择器|时间|timePicker时间选择器|timePicker 时间选择器|time picker|timepicker|时间picker|时间picker|日期选择器|日期|datePicker日期选择器|datePicker 日期选择器|date picker|datepicker|日期picker|日期picker'
+			}
+		]
+	},
+	{
+		class: '信息展示',
+		class_en: 'Info display',
+		childs: [
+			{
+				title: '头像 Avatar',
+				title_zh: '头像',
+				title_en: 'Avatar',
+				nav: 'avatar',
+				tip: '其实我发给您的头像，是情侣头像...',
+				tip_en: 'Actually, the avatar I sent to you is a couple avatar...',
+				alias: 'avatar|头像|头|像|avatar头像|avatar 头像'
+			},
+			{
+				title: '徽标 Badge',
+				title_zh: '徽标',
+				title_en: 'Badge',
+				nav: 'badge',
+				tip: '在标记消失之前，回到我身边。',
+				tip_en: 'Before the mark disappears, come back to me.',
+				alias: 'badge|徽标|徽|标|badge徽标|badge 徽标|标记|badge标记|badge 标记'
+			},
+			{
+				title: '单元格 Cell',
+				title_zh: '单元格',
+				title_en: 'Cell',
+				nav: 'cell',
+				tip: '当全世界抛弃您的时候请记住，您身上有几亿细胞都在为你而活。',
+				tip_en: 'When the whole world abandons you, remember that there are billions of cells on your body that are living for you.',
+				alias: 'cell|单元格|单元|cell单元格|cell 单元格'
+			},
+			{
+				title: '通告栏 NoticeBar',
+				title_zh: '通告栏',
+				title_en: 'NoticeBar',
+				nav: 'noticeBar',
+				tip: '我方开放地下城，这是告知，不是商量。',
+				tip_en: 'Our side opens the dungeon, this is to inform, not to discuss.',
+				alias:
+					'noticeBar|通告栏|通告|通|栏|noticeBar通告栏|noticeBar 通告栏|通知栏|noticeBar通知栏|noticeBar 通知栏|公告栏|noticeBar公告栏|noticeBar 公告栏'
+			},
+			{
+				title: '进度条 Progress',
+				title_zh: '进度条',
+				title_en: 'Progress',
+				nav: 'progress',
+				tip: '好运进度：▓▓▓▓▓▓▓▓▓▓▓▓ 100%',
+				tip_en: 'Good luck progr: ▓▓▓▓▓▓▓▓▓▓▓▓ 100%',
+				alias: 'progress|进度条|进度|进|度|progress进度条|progress 进度条'
+			},
+			{
+				title: '进度环 ProgressLoop',
+				title_zh: '进度环',
+				title_en: 'ProgressLoop',
+				nav: 'progressLoop',
+				tip: '人生不是一个完美的圆环，一旦完美，你就再没有任何可能性。',
+				tip_en: 'Life is not a perfect circle. Once perfect, you have no possibility.',
+				alias:
+					'progressLoop|进度环|进度|进|度|progressLoop进度环|progressLoop 进度环|环形进度条|progressLoop环形进度条|progressLoop 环形进度条|progress loop|progress-loop'
+			},
+			{
+				title: '轮播 Swiper',
+				title_zh: '轮播',
+				title_en: 'Swiper',
+				nav: 'swiper',
+				tip: '人世间悲喜烂剧，昼夜轮播不停。',
+				tip_en: 'The ups and downs of life, day and night, are not stopping.',
+				alias: 'swiper|轮播|轮|播|swiper轮播|swiper 轮播|轮播图|swiper轮播图|swiper 轮播图|走马灯|swiper走马灯|swiper 走马灯|carousel'
+			}
+		]
+	},
+	{
+		class: '反馈',
+		class_en: 'Feedback',
+		childs: [
+			{
+				title: '对话框 Dialog',
+				title_zh: '对话框',
+				title_en: 'Dialog',
+				nav: 'dialog',
+				tip: '无法确定任何事情，尤其是按下“确定”键的那一刻，我最不确定。',
+				tip_en: 'Nothing can be determined, especially at the moment when the "OK" button is pressed, I am the most uncertain.',
+				alias:
+					'dialog|对话框|对话|对|话|框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框'
+			},
+			{
+				title: '加载 Loading',
+				title_zh: '加载',
+				title_en: 'Loading',
+				nav: 'loading',
+				tip: '不要再苦苦等待答案了，没有回复已是答案。',
+				tip_en: "Don't wait for the answer, no reply is the answer.",
+				alias: 'loading|加载|加载中|loading加载|loading 加载|loading加载中|loading 加载中|loading加载中...|loading 加载中...'
+			},
+			{
+				title: '弹框 Modal',
+				title_zh: '弹框',
+				title_en: 'Modal',
+				nav: 'modal',
+				tip: '弹框即人生，要么选择关闭，要么选择继续。',
+				tip_en: 'The modal is life, either choose to close or choose to continue.',
+				alias:
+					'modal|弹框|弹|框|modal弹框|modal 弹框|弹窗|modal弹窗|modal 弹窗|弹出框|modal弹出框|modal 弹出框|弹框|modal弹框|modal 弹框|模态框|modal模态框|modal 模态框'
+			},
+			{
+				title: '轻提示 Toast',
+				title_zh: '轻提示',
+				title_en: 'Toast',
+				nav: 'toast',
+				tip: '总有一些东西，要用消失来证明它的珍贵。',
+				tip_en: 'There are always some things that have to disappear to prove their value.',
+				alias:
+					'toast|轻提示|轻|提示|toast轻提示|toast 轻提示|轻弹窗|toast轻弹窗|toast 轻弹窗|轻提示框|toast轻提示框|toast 轻提示框|吐司|toast吐司|toast 吐司'
+			}
+		]
+	}
+];

docs/site/src/data/themes/azurePink.js

@@ -0,0 +1,46 @@
+export default {
+	name: 'AzurePink',
+	color: {
+		primary: {
+			50: '245, 247, 255', // #F5F7FF
+			100: '232, 237, 255', // #E8EDFF
+			200: '176, 186, 237', // #B0BAED
+			300: '126, 139, 219', // #7E8BDB
+			400: '83, 94, 201', // #535EC9
+			500: '45, 54, 183', // #2D36B7
+			default: '13, 18, 165', // #0D12A5
+			700: '8, 8, 143', // #08088F
+			800: '9, 5, 121', // #090579
+			900: '8, 2, 99', // #080263
+			950: '8, 0, 77', // #08004D
+		},
+		dark: {
+			50: '255, 245, 248', // #FFF5F8
+			100: '255, 232, 240', // #FFE8F0
+			200: '251, 190, 213', // #FBBED5
+			300: '247, 149, 190', // #F795BE
+			400: '243, 109, 169', // #F36DA9
+			500: '239, 70, 152', // #EF4698
+			default: '235, 33, 136', // #EB2188
+			700: '195, 21, 117', // #C31575
+			800: '156, 11, 95', // #9C0B5F
+			900: '116, 4, 73', // #740449
+			950: '77, 0, 50', // #4D0032
+		},
+		primaryBlack: '1, 1, 25', // #010119
+		primaryWhite: '242, 242, 243', // #F2F2F3
+		darkBlack: '25, 1, 13', // #19010D
+		darkWhite: '243, 242, 242', // #F3F2F2
+		functional: {
+			success: '43, 164, 23', // #2ba417
+			warning: '227, 115, 24', // #e37318
+			error: '213, 73, 65', // #d54941
+			info: '0, 82, 217', // #0052d9
+		},
+		extend: [
+			{ color: '20, 40, 160', alias: 'Samsung' }, // #1428A0
+			{ color: '253, 73, 0', alias: 'Xiaomi' }, // #fd4900
+			{ color: '4, 106, 56', alias: 'OPPO' }, // ##046a38
+		],
+	},
+};

docs/site/src/data/themes/camelliaRed.js

@@ -0,0 +1,46 @@
+export default {
+	name: 'CamelliaRed',
+	color: {
+		primary: {
+			50: '255, 246, 245', // #FFF6F5
+			100: '255, 234, 232', // #FFEAE8
+			200: '252, 199, 196', // #FCC7C4
+			300: '248, 163, 162', // #F8A3A2
+			400: '245, 128, 130', // #F58082
+			500: '241, 95, 102', // #F15F66
+			default: '238, 63, 77', // #EE3F4D
+			700: '198, 39, 58', // #C6273A
+			800: '157, 21, 41', // #9D1529
+			900: '117, 8, 28', // #75081C
+			950: '77, 0, 17', // #4D0011
+		},
+		dark: {
+			50: '254, 250, 255', // #FEFAFF
+			100: '251, 232, 255', // #FBE8FF
+			200: '246, 214, 255', // #F6D6FF
+			300: '240, 196, 255', // #F0C4FF
+			400: '233, 179, 255', // #E9B3FF
+			500: '225, 161, 255', // #E1A1FF
+			default: '216, 143, 255', // #D88FFF
+			700: '164, 88, 210', // #A458D2
+			800: '116, 46, 166', // #742EA6
+			900: '74, 17, 121', // #4A1179
+			950: '40, 0, 77', // #28004D
+		},
+		primaryBlack: '25, 1, 3', // #190103
+		primaryWhite: '243, 242, 242', // #F3F2F2
+		darkBlack: '16, 1, 25', // #100119
+		darkWhite: '242, 242, 243', // #F2F2F3
+		functional: {
+			success: '82, 196, 26', // #52c41a
+			warning: '250, 173, 20', // #faad14
+			error: '255, 77, 79', // #ff4d4f
+			info: '22, 119, 255', // #1677ff
+		},
+		extend: [
+			{ color: '59, 89, 152', alias: 'Facebook' }, // #3b5998
+			{ color: '237, 28, 22', alias: 'CocaCola' }, // #ed1c16
+			{ color: '0, 104, 181', alias: 'Intel' }, // #0068b5
+		],
+	},
+};

docs/site/src/data/themes/chameleon.js

@@ -0,0 +1,46 @@
+export default {
+	name: 'Chameleon',
+	color: {
+		primary: {
+			50: '245, 255, 248', // #F5FFF8
+			100: '232, 255, 239', // #E8FFEF
+			200: '173, 236, 195', // #ADECC3
+			300: '120, 218, 157', // #78DA9D
+			400: '74, 199, 126', // #4AC77E
+			500: '35, 181, 100', // #23B564
+			default: '2, 162, 78', // #02A24E
+			700: '1, 141, 73', // #018D49
+			800: '1, 119, 66', // #017742
+			900: '0, 98, 57', // #006239
+			950: '0, 77, 47', // #004D2F
+		},
+		dark: {
+			50: '255, 245, 252', // #FFF5FC
+			100: '255, 232, 250', // #FFE8FA
+			200: '250, 204, 241', // #FACCF1
+			300: '246, 177, 234', // #F6B1EA
+			400: '241, 151, 229', // #F197E5
+			500: '237, 126, 226', // #ED7EE2
+			default: '232, 102, 223', // #E866DF
+			700: '193, 64, 189', // #C140BD
+			800: '154, 34, 154', // #9A229A
+			900: '112, 13, 115', // #700D73
+			950: '71, 0, 77', // #47004D
+		},
+		primaryBlack: '1, 25, 12', // #01190C
+		primaryWhite: '242, 243, 242', // #F2F3F2
+		darkBlack: '25, 1, 23', // #190117
+		darkWhite: '243, 242, 243', // #F3F2F3
+		functional: {
+			success: '103, 194, 58', // #67c23a
+			warning: '230, 162, 60', // #e6a23c
+			error: '245, 108, 108', // #f56c6c
+			info: '144, 147, 153', // #909399
+		},
+		extend: [
+			{ color: '56, 189, 248', alias: 'Tailwind' }, // #38bdf8
+			{ color: '194, 12, 12', alias: 'NetEaseCloudMusic' }, // #c20c0c
+			{ color: '65, 95, 255', alias: 'vivo' }, // #415fff
+		],
+	},
+};

docs/site/src/data/themes/index.js

@@ -0,0 +1,78 @@
+import { STDFTheme } from 'stdf/theme';
+import Chameleon from './chameleon';
+import AzurePink from './azurePink';
+import SmartLive from './smartLive';
+import CamelliaRed from './camelliaRed';
+import Nintendo from './nintendo';
+
+/**
+ * 传入 rgb 格式 255, 255, 255 的颜色值，返回 hex 格式的颜色值
+ * Pass in the color value of rgb format 255, 255, 255 and return the color value of hex format
+ * @param {string} rgb
+ * @returns {string}
+ */
+const rgbToHex = rgb => {
+    // 如果传入的是 hex 格式的颜色值，直接返回
+    // If the color value passed in is in hex format, return directly
+    if (rgb.includes('#')) {
+        return rgb;
+    }
+    const rgbArr = rgb.split(',');
+    let hex = '#';
+    rgbArr.forEach(item => {
+        const num = parseInt(item);
+        hex += num.toString(16).padStart(2, '0');
+    });
+    return hex;
+};
+
+/**
+ * 将 theme 对象中所有的 rgb 格式 255, 255, 255 转换为 hex 格式 #ffffff
+ * Let all rgb formats 255, 255, 255 in the theme object be converted to hex format #ffffff
+ * @param {Object} theme
+ * @returns {Object}
+ */
+const rgbToHexFunc = theme => {
+    const obj = theme.color;
+    const primary = obj.primary;
+    for (const key in primary) {
+        if (Object.hasOwnProperty.call(primary, key)) {
+            const element = primary[key];
+            if (typeof element === 'string' && element.includes(',')) {
+                primary[key] = rgbToHex(element);
+            }
+        }
+    }
+    const dark = obj.dark;
+    for (const key in dark) {
+        if (Object.hasOwnProperty.call(dark, key)) {
+            const element = dark[key];
+            if (typeof element === 'string' && element.includes(',')) {
+                dark[key] = rgbToHex(element);
+            }
+        }
+    }
+    obj.functional.success = rgbToHex(obj.functional.success);
+    obj.functional.warning = rgbToHex(obj.functional.warning);
+    obj.functional.error = rgbToHex(obj.functional.error);
+    obj.functional.info = rgbToHex(obj.functional.info);
+    const extend = obj.extend;
+    extend.forEach(item => {
+        item.color = rgbToHex(item.color);
+    });
+    obj.primaryBlack = rgbToHex(obj.primaryBlack);
+    obj.primaryWhite = rgbToHex(obj.primaryWhite);
+    obj.darkBlack = rgbToHex(obj.darkBlack);
+    obj.darkWhite = rgbToHex(obj.darkWhite);
+    theme.color = obj;
+    return theme;
+};
+
+export default [
+    { name_CN: 'STDF', name: STDFTheme.name, theme: rgbToHexFunc(STDFTheme) },
+    { name_CN: '任天堂', name: Nintendo.name, theme: rgbToHexFunc(Nintendo) },
+    { name_CN: '蔚蓝粉', name: AzurePink.name, theme: rgbToHexFunc(AzurePink) },
+    { name_CN: '变色龙', name: Chameleon.name, theme: rgbToHexFunc(Chameleon) },
+    { name_CN: '慧活力', name: SmartLive.name, theme: rgbToHexFunc(SmartLive) },
+    { name_CN: '山茶红', name: CamelliaRed.name, theme: rgbToHexFunc(CamelliaRed) },
+];

docs/site/src/data/themes/nintendo.js

@@ -0,0 +1,46 @@
+export default {
+	name: 'Nintendo',
+	color: {
+		primary: {
+			50: '255, 246, 245', // #FFF6F5
+			100: '255, 234, 232', // #FFEAE8
+			200: '250, 185, 182', // #FAB9B6
+			300: '245, 136, 134', // #F58886
+			400: '240, 87, 90', // #F0575A
+			500: '235, 43, 52', // #EB2B34
+			default: '230, 0, 18', // #E60012
+			700: '192, 0, 22', // #C00016
+			800: '153, 0, 23', // #990017
+			900: '115, 0, 21', // #730015
+			950: '77, 0, 17', // #4D0011
+		},
+		dark: {
+			50: '245, 255, 254', // #F5FFFE
+			100: '232, 255, 254', // #E8FFFE
+			200: '182, 249, 249', // #B6F9F9
+			300: '133, 240, 244', // #85F0F4
+			400: '87, 228, 238', // #57E4EE
+			500: '42, 214, 233', // #2AD6E9
+			default: '0, 195, 227', // #00C3E3
+			700: '0, 158, 189', // #009EBD
+			800: '0, 121, 152', // #007998
+			900: '0, 87, 114', // #005772
+			950: '0, 56, 77', // #00384D
+		},
+		primaryBlack: '25, 1, 3', // #190103
+		primaryWhite: '243, 242, 242', // #F3F2F2
+		darkBlack: '1, 22, 25', // #011619
+		darkWhite: '242, 243, 243', // #F2F3F3
+		functional: {
+			success: '0, 180, 42', // #00b42a
+			warning: '255, 125, 0', // #ff7d00
+			error: '245, 63, 63', // #f53f3f
+			info: '22, 93, 255', // #165dff
+		},
+		extend: [
+			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
+			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
+			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
+		],
+	},
+};

docs/site/src/data/themes/smartLive.js

@@ -0,0 +1,46 @@
+export default {
+	name: 'SmartLive',
+	color: {
+		primary: {
+			50: '252, 245, 255', // #FCF5FF
+			100: '248, 232, 255', // #F8E8FF
+			200: '205, 174, 222', // #CDAEDE
+			300: '165, 125, 189', // #A57DBD
+			400: '126, 84, 157', // #7E549D
+			500: '91, 51, 124', // #5B337C
+			default: '60, 26, 91', // #3C1A5B
+			700: '52, 19, 87', // #341357
+			800: '44, 12, 84', // #2C0C54
+			900: '37, 6, 80', // #250650
+			950: '29, 0, 77', // #1D004D
+		},
+		dark: {
+			50: '253, 255, 245', // #FDFFF5
+			100: '252, 255, 232', // #FCFFE8
+			200: '250, 255, 200', // #FAFFC8
+			300: '251, 255, 168', // #FBFFA8
+			400: '253, 255, 136', // #FDFF88
+			500: '255, 252, 104', // #FFFC68
+			default: '255, 247, 72', // #FFF748
+			700: '210, 197, 45', // #D2C52D
+			800: '166, 149, 23', // #A69517
+			900: '121, 104, 9', // #796809
+			950: '77, 62, 0', // #4D3E00
+		},
+		primaryBlack: '13, 1, 25', // #0D0119
+		primaryWhite: '242, 242, 243', // #F2F2F3
+		darkBlack: '25, 24, 1', // #191801
+		darkWhite: '243, 243, 242', // #F3F3F2
+		functional: {
+			success: '21, 91, 54', // #155b36
+			warning: '208, 126, 11', // #d07e0b
+			error: '218, 20, 20', // #da1414
+			info: '99, 176, 227', // #63b0e3
+		},
+		extend: [
+			{ color: '118, 185, 0', alias: 'NVIDIA' }, // #76b900
+			{ color: '251, 114, 153', alias: 'bilibili' }, // #fb7299
+			{ color: '22, 119, 255', alias: 'AliPay' }, // #1677ff
+		],
+	},
+};

docs/site/src/main.js

@@ -3,7 +3,7 @@ import App from './App.svelte';
 import './app.css';
 import { delParamsUrl } from './utils/index';
 import { switchTheme } from 'stdf/theme';
-import themes from './data/themes';
+import themes from './data/themes/index.js';
 
 const currentTheme = localStorage.getItem('theme_color') || 'STDF';
 // 设置默认主题色

docs/site/src/pages/components/Api.svelte

@@ -9,7 +9,8 @@
 	let loading = true;
 	const getMdStrFunc = async nav => {
 		loading = true;
-		const rawObj = await import(`../../../../doc/components/${nav}/api${isZh ? '' : '_en'}.md`);
+		// const rawObj = await import(`../../../../doc/components/${nav}/api${isZh ? '' : '_en'}.md`);
+		const rawObj = await import(`../../../../mds/components/${nav}/api${isZh ? '' : '_en'}.md`);
 		const mdStr = rawObj.default;
 		loading = false;
 		return mdTextToHljs(mdStr.replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/components/Components.svelte

@@ -1,317 +1,335 @@
 <script>
-	// @ts-nocheck
-	import { onMount } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import { querystring, push } from 'svelte-spa-router';
-	import { isShowNavStore, isCmdKStore } from '../../store';
-	import menuList from '../../../../demo/src/data/menuList';
+    // @ts-nocheck
+    import { onMount } from 'svelte';
+    import { fly } from 'svelte/transition';
+    import { querystring, push } from 'svelte-spa-router';
+    import { isShowNavStore, isCmdKStore } from '../../store';
+    import { menuList } from '../../data/menuList';
 
-	import Menu from '../../components/menu/Menu.svelte';
-	import Tab from '../../components/tab/Tab.svelte';
+    import Menu from '../../components/menu/Menu.svelte';
+    import Tab from '../../components/tab/Tab.svelte';
 
-	import Component from './Component.svelte';
-	import Guide from './Guide.svelte';
-	import Api from './Api.svelte';
-	import FAQ from './FAQ.svelte';
-	import Version from './Version.svelte';
+    import Component from './Component.svelte';
+    import Guide from './Guide.svelte';
+    import Api from './Api.svelte';
+    import FAQ from './FAQ.svelte';
+    import Version from './Version.svelte';
 
-	// let Guide;
-	// let Api;
-	// let FAQ;
-	// let Version;
-	// let Component;
+    // let Guide;
+    // let Api;
+    // let FAQ;
+    // let Version;
+    // let Component;
 
-	let loading = true;
+    let loading = true;
 
-	const isZh = localStorage.getItem('lang') === 'zh_CN';
+    const isZh = localStorage.getItem('lang') === 'zh_CN';
 
-	let params = new URLSearchParams('?' + $querystring);
-	//数组二级组成新数组
-	const ArrChildFun = arr => {
-		let newArr = [];
-		for (let e = 0; e < arr.length; e++) {
-			newArr.push(...arr[e].childs);
-		}
-		return newArr;
-	};
-	$: menuChildList = ArrChildFun(menuList);
-	let currentNav = {};
-	let currentTab = 0;
-	let titleDom = null;
-	let demoHeight = 0;
-	let highlightedCode = '';
-	let titleWidth = 0;
-	let visible = true;
-	let isShowIframe = true;
-	let navBarHeight = 0;
+    let params = new URLSearchParams('?' + $querystring);
+    //数组二级组成新数组
+    const ArrChildFun = arr => {
+        let newArr = [];
+        for (let e = 0; e < arr.length; e++) {
+            newArr.push(...arr[e].childs);
+        }
+        return newArr;
+    };
+    $: menuChildList = ArrChildFun(menuList);
+    let currentNav = {};
+    let currentTab = 0;
+    let titleDom = null;
+    let demoHeight = 0;
+    let highlightedCode = '';
+    let titleWidth = 0;
+    let visible = true;
+    let isShowIframe = true;
+    let navBarHeight = 0;
 
-	// 动态导入组件字符串
-	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 中所有的 '../../../../../packages/stdf/components' 替换为 'stdf'
-		return componentStr.replace(/from ['"]\.\.\/\.\.\/\.\.\/\.\.\/\.\.\/packages\/stdf\/components['"]/g, "from 'stdf'");
-	};
+    // 动态导入组件字符串
+    const getComponentStrFunc = async name => {
+        const rawObj = await import(`../../../../../packages/stdf/src/routes/${name}/${isZh ? 'zh_CN' : 'en_US'}/+page.svelte?raw`);
+        // 将 componentStr 中所有的 from '$lib/index.js' 替换为 from 'stdf'
+        // 将 componentStr 中所有的 from '$lib/types/index.js' 替换为 from 'stdf/types'
+        return rawObj.default
+            .replace(/from ['"]\$lib\/index\.js['"]/g, "from 'stdf'")
+            .replace(/from ['"]\$lib\/types\/index\.js['"]/g, "from 'stdf/types'");
+    };
 
-	const getDemoHeightFun = () => {
-		demoHeight = document.documentElement.clientHeight - 70 - titleDom.offsetHeight - 100;
-		navBarHeight = document.documentElement.clientHeight - 56;
-	};
-	onMount(async () => {
-		// Component = (await import('./Component.svelte')).default;
-		// Guide = (await import('./Guide.svelte')).default;
-		// Api = (await import('./Api.svelte')).default;
-		// FAQ = (await import('./FAQ.svelte')).default;
-		// Version = (await import('./Version.svelte')).default;
+    const getDemoHeightFun = () => {
+        demoHeight = document.documentElement.clientHeight - 70 - titleDom.offsetHeight - 100;
+        navBarHeight = document.documentElement.clientHeight - 56;
+    };
+    onMount(async () => {
+        // Component = (await import('./Component.svelte')).default;
+        // Guide = (await import('./Guide.svelte')).default;
+        // Api = (await import('./Api.svelte')).default;
+        // FAQ = (await import('./FAQ.svelte')).default;
+        // Version = (await import('./Version.svelte')).default;
 
-		demoHeight = document.documentElement.clientHeight - 70 - titleDom.offsetHeight - 100;
-		navBarHeight = document.documentElement.clientHeight - 56;
-		window.addEventListener('resize', getDemoHeightFun);
-		if (params.get('tab')) {
-			currentTab = Number(params.get('tab'));
-		}
-		if (params.get('nav')) {
-			currentNav = menuChildList.filter(item => item.nav === params.get('nav'))[0];
-		} else {
-			currentNav = menuList[0].childs[1];
-		}
-		loading = true;
-		const componentStr = await getComponentStrFunc(currentNav.nav);
-		loading = false;
-		highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
-		// highlightedCode = hljs.highlight(map[currentNav.nav], { language: 'svelte', ignoreIllegals: true }).value;
-		return () => {
-			window.removeEventListener('resize', getDemoHeightFun);
-		};
-	});
+        demoHeight = document.documentElement.clientHeight - 70 - titleDom.offsetHeight - 100;
+        navBarHeight = document.documentElement.clientHeight - 56;
+        window.addEventListener('resize', getDemoHeightFun);
+        if (params.get('tab')) {
+            currentTab = Number(params.get('tab'));
+        }
+        if (params.get('nav')) {
+            currentNav = menuChildList.filter(item => item.nav === params.get('nav'))[0];
+        } else {
+            currentNav = menuList[0].childs[1];
+        }
+        loading = true;
+        const componentStr = await getComponentStrFunc(currentNav.nav);
+        loading = false;
+        highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
+        // highlightedCode = hljs.highlight(map[currentNav.nav], { language: 'svelte', ignoreIllegals: true }).value;
+        return () => {
+            window.removeEventListener('resize', getDemoHeightFun);
+        };
+    });
 
-	//监听箭头按键，方便键盘操作
-	const handleKeydown = event => {
-		if ($isCmdKStore) {
-			return;
-		}
-		//左右箭头切换Tab
-		if (event.code === 'ArrowLeft') {
-			if (currentTab > 0) {
-				isShowIframe = false;
-				setTimeout(() => {
-					isShowIframe = true;
-				}, 100);
-				currentTab--;
-				params.set('tab', currentTab.toString());
-				push(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
-			}
-		}
-		if (event.code === 'ArrowRight') {
-			if (currentTab < 4) {
-				isShowIframe = false;
-				setTimeout(() => {
-					isShowIframe = true;
-				}, 100);
-				currentTab++;
-				params.set('tab', currentTab.toString());
-				push(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
-			}
-		}
-		//上下箭头切换组件
-		if (event.code === 'ArrowUp') {
-			let currentMenuIndex = menuChildList.findIndex(item => item.nav === currentNav.nav);
-			if (currentMenuIndex > 0) {
-				visible = false;
-				setTimeout(async () => {
-					visible = true;
-					currentNav = menuChildList[currentMenuIndex - 1];
-					params.set('nav', currentNav.nav);
-					push(`/components?nav=${currentNav.nav}&tab=${currentTab}`);
-					const componentStr = await getComponentStrFunc(currentNav.nav);
-					highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
-					// @ts-ignore
-					// highlightedCode = hljs.highlight(map[currentNav.nav], { language: 'svelte', ignoreIllegals: true }).value;
-				}, 10);
-			}
-		}
-		if (event.code === 'ArrowDown') {
-			let currentMenuIndex = menuChildList.findIndex(item => item.nav === currentNav.nav);
-			if (currentMenuIndex < menuChildList.length - 1) {
-				visible = false;
-				setTimeout(async () => {
-					visible = true;
-					currentNav = menuChildList[currentMenuIndex + 1];
-					params.set('nav', currentNav.nav);
-					push(`/components?nav=${currentNav.nav}&tab=${currentTab}`);
-					const componentStr = await getComponentStrFunc(currentNav.nav);
-					highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
-					// @ts-ignore
-					// highlightedCode = hljs.highlight(map[currentNav.nav], { language: 'svelte', ignoreIllegals: true }).value;
-				}, 10);
-			}
-		}
-	};
-	const menuClickFun = currentMenu => {
-		$isShowNavStore && ($isShowNavStore = false);
-		visible = false;
-		setTimeout(async () => {
-			visible = true;
-			currentNav = currentMenu.detail;
-			params.set('nav', currentMenu.detail.nav);
-			push(`/components?nav=${currentMenu.detail.nav}&tab=${params.get('tab') ? params.get('tab') : '0'}`);
-			const componentStr = await getComponentStrFunc(currentNav.nav);
-			highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
-		}, 10);
-	};
+    //监听箭头按键，方便键盘操作
+    const handleKeydown = event => {
+        if ($isCmdKStore) {
+            return;
+        }
+        //左右箭头切换Tab
+        if (event.code === 'ArrowLeft') {
+            if (currentTab > 0) {
+                isShowIframe = false;
+                setTimeout(() => {
+                    isShowIframe = true;
+                }, 100);
+                currentTab--;
+                params.set('tab', currentTab.toString());
+                push(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
+            }
+        }
+        if (event.code === 'ArrowRight') {
+            if (currentTab < 4) {
+                isShowIframe = false;
+                setTimeout(() => {
+                    isShowIframe = true;
+                }, 100);
+                currentTab++;
+                params.set('tab', currentTab.toString());
+                push(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
+            }
+        }
+        //上下箭头切换组件
+        if (event.code === 'ArrowUp') {
+            let currentMenuIndex = menuChildList.findIndex(item => item.nav === currentNav.nav);
+            if (currentMenuIndex > 0) {
+                visible = false;
+                setTimeout(async () => {
+                    visible = true;
+                    currentNav = menuChildList[currentMenuIndex - 1];
+                    params.set('nav', currentNav.nav);
+                    push(`/components?nav=${currentNav.nav}&tab=${currentTab}`);
+                    const componentStr = await getComponentStrFunc(currentNav.nav);
+                    highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
+                    // @ts-ignore
+                    // highlightedCode = hljs.highlight(map[currentNav.nav], { language: 'svelte', ignoreIllegals: true }).value;
+                }, 10);
+            }
+        }
+        if (event.code === 'ArrowDown') {
+            let currentMenuIndex = menuChildList.findIndex(item => item.nav === currentNav.nav);
+            if (currentMenuIndex < menuChildList.length - 1) {
+                visible = false;
+                setTimeout(async () => {
+                    visible = true;
+                    currentNav = menuChildList[currentMenuIndex + 1];
+                    params.set('nav', currentNav.nav);
+                    push(`/components?nav=${currentNav.nav}&tab=${currentTab}`);
+                    const componentStr = await getComponentStrFunc(currentNav.nav);
+                    highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
+                    // @ts-ignore
+                    // highlightedCode = hljs.highlight(map[currentNav.nav], { language: 'svelte', ignoreIllegals: true }).value;
+                }, 10);
+            }
+        }
+    };
+    const menuClickFun = currentMenu => {
+        $isShowNavStore && ($isShowNavStore = false);
+        visible = false;
+        setTimeout(async () => {
+            visible = true;
+            currentNav = currentMenu.detail;
+            params.set('nav', currentMenu.detail.nav);
+            push(`/components?nav=${currentMenu.detail.nav}&tab=${params.get('tab') ? params.get('tab') : '0'}`);
+            const componentStr = await getComponentStrFunc(currentNav.nav);
+            highlightedCode = hljs.highlight(componentStr, { language: 'svelte', ignoreIllegals: true }).value;
+        }, 10);
+    };
 
-	const tabClickFun = i => {
-		isShowIframe = false;
-		setTimeout(() => {
-			isShowIframe = true;
-		}, 100);
-		currentTab = i.detail;
-		params.set('tab', currentTab.toString());
-		push(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
-	};
-	$: QRValue =
-		(import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://demo.stdf.design/') +
-		(isZh ? 'zh_CN/' : 'en_US/') +
-		currentNav.nav;
+    const tabClickFun = i => {
+        isShowIframe = false;
+        setTimeout(() => {
+            isShowIframe = true;
+        }, 100);
+        currentTab = i.detail;
+        params.set('tab', currentTab.toString());
+        push(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
+    };
+    // main -> next
+    $: QRValue =
+        (import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://next-demo.stdf.design/') +
+        currentNav.nav +
+        (isZh ? '/zh_CN' : '/en_US');
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="flex">
-	<div
-		class="fixed -left-52 md:left-0 top-14 w-52 overflow-y-scroll transition-all duration-300 z-[100] bg-white dark:bg-black md:bg-transparent dark:md:bg-transparent border-r border-black/10 dark:border-white/20"
-		class:left-0={$isShowNavStore}
-		class:-left-52={!$isShowNavStore}
-		style="height:{navBarHeight + 'px'}"
-	>
-		<Menu {menuList} currentNav={currentNav.nav} on:MenuClick={menuClickFun} />
-	</div>
-	{#if visible}
-		<div class="md:pl-48 flex flex-col w-full" in:fly={{ x: 100, duration: 500 }} out:fly={{ x: 100, duration: 100 }}>
-			<div class="px-4 pt-4 md:px-8 md:flex md:space-x-4 relative z-20" bind:this={titleDom}>
-				{#if loading}
-					{isZh ? '请等待...' : 'Please wait...'}
-				{:else}
-					<div class="font-bold text-2xl md:text-4xl flex items-center">
-						<div>
-							{isZh ? currentNav.title : currentNav.title_en}
-						</div>
-						<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" />
-									<path
-										d="M13 21v2h-2v-2H3a1 1 0 0 1-1-1V6h20v14a1 1 0 0 1-1 1h-8zm-9-2h16V8H4v11zm9-9h5v2h-5v-2zm0 4h5v2h-5v-2zm-4-4v3h3a3 3 0 1 1-3-3zM2 3h20v2H2V3z"
-									/>
-								</svg>
-							</div>
-						</a>
-					</div>
-					<div class="mt-4 text-xs md:text-sm text-gray-500">{isZh ? currentNav.tip : currentNav.tip_en}</div>
-				{/if}
-			</div>
-			<div class="p-4 md:px-8 md:py-4 -mt-14 relative z-10" bind:clientWidth={titleWidth}>
-				<Tab {currentTab} on:TabClick={tabClickFun} />
-			</div>
-			<div class="my-4 ml-4">
-				<div class="h-px bg-black/10 dark:bg-white/20"></div>
-			</div>
-			<div>
-				<!-- <div class="relative overflow-hidden" style="width:{titleWidth}px;"> -->
-				<!-- <div class="relative flex" style="width:{titleWidth * 3}px;left:-{currentTab * titleWidth}px;"> -->
-				<!-- 示例 -->
-				{#if currentTab === 0}
-					<div
-						in:fly={{ y: 100, duration: 500 }}
-						out:fly={{ y: 100, duration: 100 }}
-						class="flex-1 flex py-4 mt-2 md:pl-8 md:pr-4 justify-around"
-						style="width:{titleWidth}px;"
-					>
-						<div class="grow overflow-y-scroll rounded bg-codeLight dark:bg-codeDark" style="height:{demoHeight}px;">
-							<svelte:component this={Component} {highlightedCode} />
-						</div>
-						<div
-							class="hidden ml-2 md:block border border-black/10 dark:border-white/10 w-[392px] grow-0 shrink-0"
-							style="height:{demoHeight}px"
-						>
-							{#if currentNav.nav}
-								{#if isShowIframe}
-									<iframe
-										title="Demo"
-										id="iframe-id"
-										src={import.meta.env.DEV
-											? `http://localhost:8888/${isZh ? 'zh_CN' : 'en_US'}/${currentNav.nav}?channel=iframe`
-											: `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>
-											<svg class="animate-spin my-1 mx-auto h-10 w-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-												<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-												<path
-													class="opacity-75"
-													fill="currentColor"
-													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-												/>
-											</svg>
-										</div>
-									</div>
-								{/if}
-							{/if}
-						</div>
-					</div>
-				{/if}
-				{#if currentTab === 1}
-					<!-- api -->
-					<div
-						in:fly={{ y: 100, duration: 500 }}
-						out:fly={{ y: 100, duration: 100 }}
-						class={` flex-1 left-full p-4 mt-4 md:px-8 md:py-4`}
-						style="width:{titleWidth}px;"
-					>
-						<svelte:component this={Api} api={currentNav.nav} />
-						<!-- <Api api={currentNav.nav} /> -->
-					</div>
-				{/if}
-				{#if currentTab === 2}
-					<!-- 指南 -->
-					<div
-						in:fly={{ y: 100, duration: 500 }}
-						out:fly={{ y: 100, duration: 100 }}
-						class={`flex-1 p-4 mt-4 md:px-8 md:py-4 rounded `}
-						style="width:{titleWidth}px;"
-					>
-						<svelte:component this={Guide} guide={currentNav.nav} />
-						<!-- <Guide guide={currentNav.nav} /> -->
-					</div>
-				{/if}
-				{#if currentTab === 3}
-					<!-- FAQ -->
-					<div
-						in:fly={{ y: 100, duration: 500 }}
-						out:fly={{ y: 100, duration: 100 }}
-						class={`flex-1 p-4 mt-4 md:px-8 md:py-4 rounded `}
-						style="width:{titleWidth}px;"
-					>
-						<svelte:component this={FAQ} guide={currentNav.nav} />
-						<!-- <FAQ guide={currentNav.nav} /> -->
-					</div>
-				{/if}
-				{#if currentTab === 4}
-					<!-- Version -->
-					<div
-						in:fly={{ y: 100, duration: 500 }}
-						out:fly={{ y: 100, duration: 100 }}
-						class={`flex-1 p-4 mt-4 md:px-8 md:py-4 rounded `}
-						style="width:{titleWidth}px;"
-					>
-						<svelte:component this={Version} guide={currentNav.nav} />
-						<!-- <Version guide={currentNav.nav} /> -->
-					</div>
-				{/if}
-			</div>
-		</div>
-	{/if}
+    <div
+        class="fixed -left-52 md:left-0 top-14 w-52 overflow-y-scroll transition-all duration-300 z-[100] bg-white dark:bg-black md:bg-transparent dark:md:bg-transparent border-r border-black/10 dark:border-white/20"
+        class:left-0={$isShowNavStore}
+        class:-left-52={!$isShowNavStore}
+        style="height:{navBarHeight + 'px'}"
+    >
+        <Menu {menuList} currentNav={currentNav.nav} on:MenuClick={menuClickFun} />
+    </div>
+    {#if visible}
+        <div class="md:pl-48 flex flex-col w-full" in:fly={{ x: 100, duration: 500 }} out:fly={{ x: 100, duration: 100 }}>
+            <div class="px-4 pt-4 md:px-8 md:flex md:space-x-4 relative z-20" bind:this={titleDom}>
+                {#if loading}
+                    {isZh ? '请等待...' : 'Please wait...'}
+                {:else}
+                    <div class="font-bold text-2xl md:text-4xl flex items-center">
+                        <div>
+                            {isZh ? currentNav.title : currentNav.title_en}
+                        </div>
+                        <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" />
+                                    <path
+                                        d="M13 21v2h-2v-2H3a1 1 0 0 1-1-1V6h20v14a1 1 0 0 1-1 1h-8zm-9-2h16V8H4v11zm9-9h5v2h-5v-2zm0 4h5v2h-5v-2zm-4-4v3h3a3 3 0 1 1-3-3zM2 3h20v2H2V3z"
+                                    />
+                                </svg>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="mt-4 text-xs md:text-sm text-gray-500">{isZh ? currentNav.tip : currentNav.tip_en}</div>
+                {/if}
+            </div>
+            <div class="p-4 md:px-8 md:py-4 -mt-14 relative z-10" bind:clientWidth={titleWidth}>
+                <Tab {currentTab} on:TabClick={tabClickFun} />
+            </div>
+            <div class="my-4 ml-4">
+                <div class="h-px bg-black/10 dark:bg-white/20"></div>
+            </div>
+            <div>
+                <!-- <div class="relative overflow-hidden" style="width:{titleWidth}px;"> -->
+                <!-- <div class="relative flex" style="width:{titleWidth * 3}px;left:-{currentTab * titleWidth}px;"> -->
+                <!-- 示例 -->
+                {#if currentTab === 0}
+                    <div
+                        in:fly={{ y: 100, duration: 500 }}
+                        out:fly={{ y: 100, duration: 100 }}
+                        class="flex-1 flex py-4 mt-2 md:pl-8 md:pr-4 justify-around"
+                        style="width:{titleWidth}px;"
+                    >
+                        <div class="grow overflow-y-scroll rounded bg-codeLight dark:bg-codeDark" style="height:{demoHeight}px;">
+                            <svelte:component this={Component} {highlightedCode} />
+                        </div>
+                        <div
+                            class="hidden ml-2 md:block border border-black/10 dark:border-white/10 w-[392px] grow-0 shrink-0"
+                            style="height:{demoHeight}px"
+                        >
+                            {#if currentNav.nav}
+                                {#if isShowIframe}
+                                    <!-- main -> next -->
+                                    <iframe
+                                        title="Demo"
+                                        id="iframe-id"
+                                        src={import.meta.env.DEV
+                                            ? `http://localhost:8888/${currentNav.nav}/${isZh ? 'zh_CN' : 'en_US'}?channel=iframe`
+                                            : `https://next-demo.stdf.design/${currentNav.nav}/${isZh ? 'zh_CN' : 'en_US'}?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>
+                                            <svg
+                                                class="animate-spin my-1 mx-auto h-10 w-10"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                                                <path
+                                                    class="opacity-75"
+                                                    fill="currentColor"
+                                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                                />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                {/if}
+                            {/if}
+                        </div>
+                    </div>
+                {/if}
+                {#if currentTab === 1}
+                    <!-- api -->
+                    <div
+                        in:fly={{ y: 100, duration: 500 }}
+                        out:fly={{ y: 100, duration: 100 }}
+                        class={` flex-1 left-full p-4 mt-4 md:px-8 md:py-4`}
+                        style="width:{titleWidth}px;"
+                    >
+                        <svelte:component this={Api} api={currentNav.nav} />
+                        <!-- <Api api={currentNav.nav} /> -->
+                    </div>
+                {/if}
+                {#if currentTab === 2}
+                    <!-- 指南 -->
+                    <div
+                        in:fly={{ y: 100, duration: 500 }}
+                        out:fly={{ y: 100, duration: 100 }}
+                        class={`flex-1 p-4 mt-4 md:px-8 md:py-4 rounded `}
+                        style="width:{titleWidth}px;"
+                    >
+                        <svelte:component this={Guide} guide={currentNav.nav} />
+                        <!-- <Guide guide={currentNav.nav} /> -->
+                    </div>
+                {/if}
+                {#if currentTab === 3}
+                    <!-- FAQ -->
+                    <div
+                        in:fly={{ y: 100, duration: 500 }}
+                        out:fly={{ y: 100, duration: 100 }}
+                        class={`flex-1 p-4 mt-4 md:px-8 md:py-4 rounded `}
+                        style="width:{titleWidth}px;"
+                    >
+                        <svelte:component this={FAQ} guide={currentNav.nav} />
+                        <!-- <FAQ guide={currentNav.nav} /> -->
+                    </div>
+                {/if}
+                {#if currentTab === 4}
+                    <!-- Version -->
+                    <div
+                        in:fly={{ y: 100, duration: 500 }}
+                        out:fly={{ y: 100, duration: 100 }}
+                        class={`flex-1 p-4 mt-4 md:px-8 md:py-4 rounded `}
+                        style="width:{titleWidth}px;"
+                    >
+                        <svelte:component this={Version} guide={currentNav.nav} />
+                        <!-- <Version guide={currentNav.nav} /> -->
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {/if}
 </div>

docs/site/src/pages/components/FAQ.svelte

@@ -1,52 +1,52 @@
 <script>
-	// @ts-nocheck
+    // @ts-nocheck
 
-	import { mdTextToHljs } from '../../utils/index';
+    import { mdTextToHljs } from '../../utils/index';
 
-	export let guide = 'button';
-	const isZh = localStorage.getItem('lang') === 'zh_CN';
+    export let guide = 'button';
+    const isZh = localStorage.getItem('lang') === 'zh_CN';
 
-	let loading = true;
-	const getMdStrFunc = async nav => {
-		loading = true;
-		const rawObj = await import(`../../../../doc/components/${nav}/FAQ${isZh ? '' : '_en'}.md`);
-		const mdStr = rawObj.default;
-		loading = false;
-		return mdTextToHljs(mdStr.replace(/<a href="/g, '<a target="_blank" href="'));
-	};
-	$: guideText = getMdStrFunc(guide).then(res => {
-		// @ts-ignore
-		guideText = res;
-	});
+    let loading = true;
+    const getMdStrFunc = async nav => {
+        loading = true;
+        const rawObj = await import(`../../../../mds/components/${nav}/FAQ${isZh ? '' : '_en'}.md`);
+        const mdStr = rawObj.default;
+        loading = false;
+        return mdTextToHljs(mdStr.replace(/<a href="/g, '<a target="_blank" href="'));
+    };
+    $: guideText = getMdStrFunc(guide).then(res => {
+        // @ts-ignore
+        guideText = res;
+    });
 </script>
 
 <p class="text-xs mb-4 text-black/40 dark:text-white/30">
-	{isZh
-		? '注：请将开发中遇到的问题或想法提到 GitHub Issue，后续会筛选出有代表性的问题整理在此处。'
-		: 'Note: Please raise any issues or ideas encountered in development to GitHub Issue, and then select representative issues to organize here.'}
+    {isZh
+        ? '注：请将开发中遇到的问题或想法提到 GitHub Issue，后续会筛选出有代表性的问题整理在此处。'
+        : 'Note: Please raise any issues or ideas encountered in development to GitHub Issue, and then select representative issues to organize here.'}
 </p>
 <article
-	class="prose dark:prose-invert max-w-none pb-12 prose-table:break-all overflow-x-auto prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
+    class="prose dark:prose-invert max-w-none pb-12 prose-table:break-all overflow-x-auto prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
 >
-	{#if loading}
-		{isZh ? '请等待...' : 'Please wait...'}
-	{:else}
-		{@html guideText}
-	{/if}
+    {#if loading}
+        {isZh ? '请等待...' : 'Please wait...'}
+    {:else}
+        {@html guideText}
+    {/if}
 </article>
 <div class="pb-8 text-xs flex gap-2">
-	<a
-		href={'https://github.com/any-tdf/stdf/edit/main/doc/components/' + guide + '/FAQ' + (isZh ? '' : '_en') + '.md'}
-		target="_blank"
-		class="flex text-primary dark:text-dark"
-	>
-		<span class="h-4 w-4 mr-1">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
-				<path
-					d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
-				/>
-			</svg>
-		</span>
-		{isZh ? '在 GitHub 上编辑' : 'Edit on GitHub'}
-	</a>
+    <a
+        href={'https://github.com/any-tdf/stdf/edit/main/doc/components/' + guide + '/FAQ' + (isZh ? '' : '_en') + '.md'}
+        target="_blank"
+        class="flex text-primary dark:text-dark"
+    >
+        <span class="h-4 w-4 mr-1">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
+                <path
+                    d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
+                />
+            </svg>
+        </span>
+        {isZh ? '在 GitHub 上编辑' : 'Edit on GitHub'}
+    </a>
 </div>

docs/site/src/pages/components/Guide.svelte

@@ -1,87 +1,87 @@
 <script>
-	// @ts-nocheck
+    // @ts-nocheck
 
-	import { mdTextToHljs } from './../../utils/index';
-	import { themeStore, sysThemeStore, isWideScreenStore } from '../../store';
+    import { mdTextToHljs } from './../../utils/index';
+    import { themeStore, sysThemeStore, isWideScreenStore } from '../../store';
 
-	export let guide = 'button';
+    export let guide = 'button';
 
-	const isZh = localStorage.getItem('lang') === 'zh_CN';
-	let loading = true;
-	$: theme = $themeStore === 'auto' ? ($sysThemeStore === 'dark' ? 'dark' : 'light') : $themeStore;
-	const getMdStrFunc = async nav => {
-		loading = true;
-		const rawObj = await import(`../../../../doc/components/${nav}/guide${isZh ? '' : '_en'}.md`);
-		const mdStr = rawObj.default;
-		loading = false;
-		return mdTextToHljs(
-			mdStr
-				.replace(/<img src="/g, `<img class="w-full md:w-1/2${theme === 'dark' ? ' invert' : ''}" src="./assets/images/guide/`)
-				.replace(/<a href="/g, '<a target="_blank" href="'),
-		);
-	};
-	$: guideText = getMdStrFunc(guide).then(res => {
-		guideText = res;
-	});
+    const isZh = localStorage.getItem('lang') === 'zh_CN';
+    let loading = true;
+    $: theme = $themeStore === 'auto' ? ($sysThemeStore === 'dark' ? 'dark' : 'light') : $themeStore;
+    const getMdStrFunc = async nav => {
+        loading = true;
+        const rawObj = await import(`../../../../mds/components/${nav}/guide${isZh ? '' : '_en'}.md`);
+        const mdStr = rawObj.default;
+        loading = false;
+        return mdTextToHljs(
+            mdStr
+                .replace(/<img src="/g, `<img class="w-full md:w-1/2${theme === 'dark' ? ' invert' : ''}" src="./assets/images/guide/`)
+                .replace(/<a href="/g, '<a target="_blank" href="')
+        );
+    };
+    $: guideText = getMdStrFunc(guide).then(res => {
+        guideText = res;
+    });
 
-	// 全屏
-	const changeFullFunc = () => {
-		if ($isWideScreenStore) {
-			isWideScreenStore.set(false);
-			localStorage.setItem('isFull', 'notFull');
-		} else {
-			isWideScreenStore.set(true);
-			localStorage.setItem('isFull', 'full');
-		}
-	};
+    // 全屏
+    const changeFullFunc = () => {
+        if ($isWideScreenStore) {
+            isWideScreenStore.set(false);
+            localStorage.setItem('isFull', 'notFull');
+        } else {
+            isWideScreenStore.set(true);
+            localStorage.setItem('isFull', 'full');
+        }
+    };
 </script>
 
 <article
-	class="prose prose-strong:text-primary dark:prose-strong:text-dark dark:prose-invert pb-12 {$isWideScreenStore
-		? 'max-w-full'
-		: 'max-w-5xl'}"
+    class="prose prose-strong:text-primary dark:prose-strong:text-dark dark:prose-invert pb-12 {$isWideScreenStore
+        ? 'max-w-full'
+        : 'max-w-5xl'}"
 >
-	{#if loading}
-		{isZh ? '请等待...' : 'Please wait...'}
-	{:else}
-		{@html guideText}
-	{/if}
+    {#if loading}
+        {isZh ? '请等待...' : 'Please wait...'}
+    {:else}
+        {@html guideText}
+    {/if}
 </article>
 
 <div class="pb-8 text-xs flex gap-2">
-	<a
-		href={'https://github.com/any-tdf/stdf/edit/main/doc/components/' + guide + '/guide' + (isZh ? '' : '_en') + '.md'}
-		target="_blank"
-		class="flex text-primary dark:text-dark"
-	>
-		<span class="h-4 w-4 mr-1">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
-				<path
-					d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
-				/>
-			</svg>
-		</span>
-		{isZh ? '在 GitHub 上编辑' : 'Edit on GitHub'}
-	</a>
+    <a
+        href={'https://github.com/any-tdf/stdf/edit/main/doc/components/' + guide + '/guide' + (isZh ? '' : '_en') + '.md'}
+        target="_blank"
+        class="flex text-primary dark:text-dark"
+    >
+        <span class="h-4 w-4 mr-1">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
+                <path
+                    d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
+                />
+            </svg>
+        </span>
+        {isZh ? '在 GitHub 上编辑' : 'Edit on GitHub'}
+    </a>
 </div>
 
 <button
-	class="hidden md:block fixed right-2 bottom-4 z-50 p-1.5 w-8 h-8 rounded-full bg-primary dark:bg-dark text-white dark:text-black shadow-md shadow-primary/50 dark:shadow-dark/50"
-	on:click={changeFullFunc}
+    class="hidden md:block fixed right-2 bottom-4 z-50 p-1.5 w-8 h-8 rounded-full bg-primary dark:bg-dark text-white dark:text-black shadow-md shadow-primary/50 dark:shadow-dark/50"
+    on:click={changeFullFunc}
 >
-	{#if $isWideScreenStore}
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-			><path
-				d="M20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM11 5H5V19H11V15H13V19H19V5H13V9H11V5ZM15 9L18 12L15 15V13H9V15L6 12L9 9V11H15V9Z"
-				fill="currentColor"
-			></path></svg
-		>
-	{:else}
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-			><path
-				d="M20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM11 5H5V10.999H7V9L10 12L7 15V13H5V19H11V17H13V19H19V13H17V15L14 12L17 9V10.999H19V5H13V7H11V5ZM13 13V15H11V13H13ZM13 9V11H11V9H13Z"
-				fill="currentColor"
-			></path></svg
-		>
-	{/if}
+    {#if $isWideScreenStore}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+            ><path
+                d="M20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM11 5H5V19H11V15H13V19H19V5H13V9H11V5ZM15 9L18 12L15 15V13H9V15L6 12L9 9V11H15V9Z"
+                fill="currentColor"
+            ></path></svg
+        >
+    {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+            ><path
+                d="M20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM11 5H5V10.999H7V9L10 12L7 15V13H5V19H11V17H13V19H19V13H17V15L14 12L17 9V10.999H19V5H13V7H11V5ZM13 13V15H11V13H13ZM13 9V11H11V9H13Z"
+                fill="currentColor"
+            ></path></svg
+        >
+    {/if}
 </button>

docs/site/src/pages/components/Version.svelte

@@ -1,128 +1,128 @@
 <script>
-	// @ts-nocheck
+    // @ts-nocheck
 
-	import { mdTextToHljs } from '../../utils/index';
+    import { mdTextToHljs } from '../../utils/index';
 
-	export let guide = 'button';
-	const isZh = localStorage.getItem('lang') === 'zh_CN';
+    export let guide = 'button';
+    const isZh = localStorage.getItem('lang') === 'zh_CN';
 
-	let loading = true;
+    let loading = true;
 
-	//提取字符中以‘[!tag’开头且以‘]’结尾的所有字符串，组成数组，并返回数组
-	const getTags = str => {
-		return str.match(/\[!tag[^\]]+\]/g);
-	};
+    //提取字符中以‘[!tag’开头且以‘]’结尾的所有字符串，组成数组，并返回数组
+    const getTags = str => {
+        return str.match(/\[!tag[^\]]+\]/g);
+    };
 
-	//提取字符中以‘[!issue‘开头且以‘]’结尾的所有字符串，组成数组，并返回数组
-	const getIssues = str => {
-		return str.match(/\[!issue[^\]]+\]/g);
-	};
+    //提取字符中以‘[!issue‘开头且以‘]’结尾的所有字符串，组成数组，并返回数组
+    const getIssues = str => {
+        return str.match(/\[!issue[^\]]+\]/g);
+    };
 
-	//提取字符中以‘[!contribute‘开头且以‘]’结尾的所有字符串，组成数组，并返回数组
-	const getContributes = str => {
-		return str.match(/\[!contribute[^\]]+\]/g);
-	};
+    //提取字符中以‘[!contribute‘开头且以‘]’结尾的所有字符串，组成数组，并返回数组
+    const getContributes = str => {
+        return str.match(/\[!contribute[^\]]+\]/g);
+    };
 
-	// 传入 tag 类型和 index，返回对应的 emoji
-	const spanTextFun = (type, index) => {
-		if (type === 'O') {
-			return '👏';
-		}
-		if (type === 'A') {
-			return '💪';
-		}
-		switch (index) {
-			case '1':
-				return '👊';
-			case '2':
-				return '✊';
-			case '3':
-				return '👎';
-			default:
-				return '👎';
-		}
-	};
-	//替换Markdown中的标签
-	const mdTextToHljsFun = string => {
-		//替换tag
-		const tagList = getTags(string);
-		if (tagList) {
-			tagList.forEach(item => {
-				const arr = item.split('|');
-				// const span = `<span class="w-2 h-2 text-xs inline-block rounded-full mr-1 ${bgClassFun(arr[1], arr[2])}"></span>`;
-				const span = `<span class="mr-1">${spanTextFun(arr[1], arr[2])}</span>`;
-				string = string.replace(item, span);
-			});
-		}
-		//替换issue
-		const issueList = getIssues(string);
-		if (issueList) {
-			issueList.forEach(item => {
-				const arr = item.split('|');
-				const span = `<span><a href="https://github.com/${
-					arr[1]
-				}" target="_blank"><img class="w-4 h-4 ml-1 p-0 m-0 rounded-full overflow-hidden inline" src="https://avatars.githubusercontent.com/${
-					arr[1]
-				}" title="${isZh ? '感谢' : 'Thanks'} ${arr[1]} ${isZh ? '提出 Issue' : 'raise an Issue'}" alt=""></a></span>`;
-				string = string.replace(item, span);
-			});
-		}
-		//替换contribute
-		const contributeList = getContributes(string);
-		if (contributeList) {
-			contributeList.forEach(item => {
-				const arr = item.split('|');
-				const span = `<span><a href="https://github.com/${
-					arr[1]
-				}" target="_blank"><img class="w-4 h-4 ml-1 p-0 m-0 rounded-full overflow-hidden inline" src="https://avatars.githubusercontent.com/${
-					arr[1]
-				}" title="${isZh ? '感谢' : 'Thanks'} ${arr[1]} ${isZh ? '贡献代码' : 'contribute code'}" alt=""></a></span>`;
-				string = string.replace(item, span);
-			});
-		}
-		return string;
-	};
+    // 传入 tag 类型和 index，返回对应的 emoji
+    const spanTextFun = (type, index) => {
+        if (type === 'O') {
+            return '👏';
+        }
+        if (type === 'A') {
+            return '💪';
+        }
+        switch (index) {
+            case '1':
+                return '👊';
+            case '2':
+                return '✊';
+            case '3':
+                return '👎';
+            default:
+                return '👎';
+        }
+    };
+    //替换Markdown中的标签
+    const mdTextToHljsFun = string => {
+        //替换tag
+        const tagList = getTags(string);
+        if (tagList) {
+            tagList.forEach(item => {
+                const arr = item.split('|');
+                // const span = `<span class="w-2 h-2 text-xs inline-block rounded-full mr-1 ${bgClassFun(arr[1], arr[2])}"></span>`;
+                const span = `<span class="mr-1">${spanTextFun(arr[1], arr[2])}</span>`;
+                string = string.replace(item, span);
+            });
+        }
+        //替换issue
+        const issueList = getIssues(string);
+        if (issueList) {
+            issueList.forEach(item => {
+                const arr = item.split('|');
+                const span = `<span><a href="https://github.com/${
+                    arr[1]
+                }" target="_blank"><img class="w-4 h-4 ml-1 p-0 m-0 rounded-full overflow-hidden inline" src="https://avatars.githubusercontent.com/${
+                    arr[1]
+                }" title="${isZh ? '感谢' : 'Thanks'} ${arr[1]} ${isZh ? '提出 Issue' : 'raise an Issue'}" alt=""></a></span>`;
+                string = string.replace(item, span);
+            });
+        }
+        //替换contribute
+        const contributeList = getContributes(string);
+        if (contributeList) {
+            contributeList.forEach(item => {
+                const arr = item.split('|');
+                const span = `<span><a href="https://github.com/${
+                    arr[1]
+                }" target="_blank"><img class="w-4 h-4 ml-1 p-0 m-0 rounded-full overflow-hidden inline" src="https://avatars.githubusercontent.com/${
+                    arr[1]
+                }" title="${isZh ? '感谢' : 'Thanks'} ${arr[1]} ${isZh ? '贡献代码' : 'contribute code'}" alt=""></a></span>`;
+                string = string.replace(item, span);
+            });
+        }
+        return string;
+    };
 
-	const getMdStrFunc = async nav => {
-		loading = true;
-		const rawObj = await import(`../../../../doc/components/${nav}/version${isZh ? '' : '_en'}.md`);
-		const mdStr = rawObj.default;
-		loading = false;
-		return mdTextToHljs(mdStr.replace(/<a href="/g, '<a target="_blank" href="'));
-	};
-	$: guideText = getMdStrFunc(guide).then(res => {
-		// @ts-ignore
-		guideText = mdTextToHljsFun(res);
-	});
+    const getMdStrFunc = async nav => {
+        loading = true;
+        const rawObj = await import(`../../../../mds/components/${nav}/version${isZh ? '' : '_en'}.md`);
+        const mdStr = rawObj.default;
+        loading = false;
+        return mdTextToHljs(mdStr.replace(/<a href="/g, '<a target="_blank" href="'));
+    };
+    $: guideText = getMdStrFunc(guide).then(res => {
+        // @ts-ignore
+        guideText = mdTextToHljsFun(res);
+    });
 </script>
 
 <div class="text-xs mb-4 text-black/40 dark:text-white/30 max-w-5xl">
-	{isZh
-		? '注：👊、✊、👎 分别表示严重、一般、轻微三个等级的 BUG，👏 表示优化，💪 表示新增。描述后面的头像表示此项的提出者或贡献者，感谢他们。'
-		: 'Note: 👊, ✊, and 👎 represent three levels of severity for bugs, with 👊 being the most severe and 👎 the least severe. 👏 means optimization, and 💪 means new feature. The avatar after the description represents the proposer or contributor of the item. We thank them for their contributions. '}
+    {isZh
+        ? '注：👊、✊、👎 分别表示严重、一般、轻微三个等级的 BUG，👏 表示优化，💪 表示新增。描述后面的头像表示此项的提出者或贡献者，感谢他们。'
+        : 'Note: 👊, ✊, and 👎 represent three levels of severity for bugs, with 👊 being the most severe and 👎 the least severe. 👏 means optimization, and 💪 means new feature. The avatar after the description represents the proposer or contributor of the item. We thank them for their contributions. '}
 </div>
 <article
-	class="prose dark:prose-invert max-w-none pb-12 prose-table:break-all overflow-x-auto prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
+    class="prose dark:prose-invert max-w-none pb-12 prose-table:break-all overflow-x-auto prose-td:whitespace-nowrap md:prose-td:whitespace-normal"
 >
-	{#if loading}
-		{isZh ? '请等待...' : 'Please wait...'}
-	{:else}
-		{@html guideText}
-	{/if}
+    {#if loading}
+        {isZh ? '请等待...' : 'Please wait...'}
+    {:else}
+        {@html guideText}
+    {/if}
 </article>
 <div class="pb-8 text-xs flex gap-2">
-	<a
-		href={'https://github.com/any-tdf/stdf/edit/main/doc/components/' + guide + '/version' + (isZh ? '' : '_en') + '.md'}
-		class="flex text-primary dark:text-dark"
-		target="_blank"
-	>
-		<span class="h-4 w-4 mr-1">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
-				<path
-					d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
-				/>
-			</svg>
-		</span>
-		{isZh ? '在 GitHub 上编辑' : 'Edit on GitHub'}
-	</a>
+    <a
+        href={'https://github.com/any-tdf/stdf/edit/main/doc/components/' + guide + '/version' + (isZh ? '' : '_en') + '.md'}
+        class="flex text-primary dark:text-dark"
+        target="_blank"
+    >
+        <span class="h-4 w-4 mr-1">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
+                <path
+                    d="M12.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z"
+                />
+            </svg>
+        </span>
+        {isZh ? '在 GitHub 上编辑' : 'Edit on GitHub'}
+    </a>
 </div>

docs/site/src/pages/guide/About.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/about.md';
-	import text_en from '../../../../doc/guide/about_en.md';
+	import text from '../../../../mds/guide/about.md';
+	import text_en from '../../../../mds/guide/about_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 

docs/site/src/pages/guide/Calendar.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { getNowBeforeOrAfterMonth, getCalendarData, getMonthListRange, getDateRange } from '../../../../packages/stdf/components/utils';
-	import zh_CN from '../../../../packages/stdf/lang/zh_CN';
-	import en_US from '../../../../packages/stdf/lang/en_US';
+	import { getNowBeforeOrAfterMonth, getCalendarData, getMonthListRange, getDateRange } from 'stdf/utils';
+	import {zh_CN,en_US}from 'stdf/lang';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 

docs/site/src/pages/guide/Changelog.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
-	import text from '../../../../doc/guide/changelog.md';
+	import text from '../../../../mds/guide/changelog.md';
 	// @ts-ignore
-	import text_en from '../../../../doc/guide/changelog_en.md';
+	import text_en from '../../../../mds/guide/changelog_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	//提取字符中以‘[!tag’开头且以‘]’结尾的所有字符串，组成数组，并返回数组

docs/site/src/pages/guide/Color.svelte

@@ -3,7 +3,7 @@
 	import ColorCard from '../../components/colorCard/ColorCard.svelte';
 	import ModeSwitch from '../../components/modeSwitch/ModeSwitch.svelte';
 	import ThemeSwitch from '../../components/themeSwitch/ThemeSwitch.svelte';
-	import themes from '../../../../demo/src/data/themes';
+	import themes from '../../data/themes';
 	import { currentColorStore, isWideScreenStore } from '../../store';
 	import { generatePalette, generateThemeBlack, generateThemeWhite, colorConvertFunc } from '../../utils';
 

docs/site/src/pages/guide/Color_en.svelte

@@ -3,7 +3,7 @@
 	import ColorCard from '../../components/colorCard/ColorCard.svelte';
 	import ModeSwitch from '../../components/modeSwitch/ModeSwitch.svelte';
 	import ThemeSwitch from '../../components/themeSwitch/ThemeSwitch.svelte';
-	import themes from '../../../../demo/src/data/themes';
+	import themes from '../../data/themes';
 	import { currentColorStore, isWideScreenStore } from '../../store';
 	import { generatePalette, generateThemeBlack, generateThemeWhite, colorConvertFunc } from '../../utils';
 

docs/site/src/pages/guide/Compatibility.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/compatibility.md';
-	import text_en from '../../../../doc/guide/compatibility_en.md';
+	import text from '../../../../mds/guide/compatibility.md';
+	import text_en from '../../../../mds/guide/compatibility_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/Contribution.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
-	import text from '../../../../doc/guide/contribution.md';
+	import text from '../../../../mds/guide/contribution.md';
 	// @ts-ignore
-	import text_en from '../../../../doc/guide/contribution_en.md';
+	import text_en from '../../../../mds/guide/contribution_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = groupIconMdPlugin(mdTextToHljs(isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/Create.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
-	import createText from '../../../../packages/create-stdf/README_CN.md';
+	import createText from '../../../../../packages/create-stdf/README_CN.md';
 	// @ts-ignore
-	import createText_en from '../../../../packages/create-stdf/README.md';
+	import createText_en from '../../../../../packages/create-stdf/README.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = groupIconMdPlugin(

docs/site/src/pages/guide/Faq.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/faq.md';
-	import text_en from '../../../../doc/guide/faq_en.md';
+	import text from '../../../../mds/guide/faq.md';
+	import text_en from '../../../../mds/guide/faq_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/Future.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
-	import text from '../../../../doc/guide/future.md';
+	import text from '../../../../mds/guide/future.md';
 	// @ts-ignore
-	import text_en from '../../../../doc/guide/future_en.md';
+	import text_en from '../../../../mds/guide/future_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/Generator.svelte

@@ -6,7 +6,7 @@
 	import ModeSwitch from '../../components/modeSwitch/ModeSwitch.svelte';
 	// import SwitchSite from '../../components/switch/Index.svelte';
 	import { currentColorStore } from '../../store';
-	import themes from '../../../../demo/src/data/themes';
+	import themes from '../../data/themes';
 	import { generatePalette, generateThemeBlack, generateThemeWhite, colorConvertFunc, throttle, hexToRgb } from '../../utils';
 	import colorList from '../../data/color';
 	import GeneratorPreview from './GeneratorPreview.svelte';

docs/site/src/pages/guide/GeneratorPreview.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Button, Switch, Progress, ProgressLoop, Loading, NoticeBar, Icon, Slider } from '../../../../packages/stdf/components';
+	import { Button, Switch, Progress, ProgressLoop, Loading, NoticeBar, Icon, Slider } from 'stdf';
 	import Calendar from './Calendar.svelte';
 	import { currentThemeStore } from '../../store';
 

docs/site/src/pages/guide/Guide.svelte

@@ -183,7 +183,7 @@
 					{isZh ? currentNav.title : currentNav.title_en}
 				</div>
 			</div>
-			<div class="h-px bg-black/10 dark:bg-white/20" />
+			<div class="h-px bg-black/10 dark:bg-white/20"></div>
 		{/if}
 		<div class="px-4 pt-4 {currentNav.nav === 'generator' ? 'md:pt-4 md:px-4' : 'md:pt-12 md:px-8'}">
 			<Router routes={guideRoutes} prefix="/guide" />

docs/site/src/pages/guide/Icon.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/icon.md';
-	import text_en from '../../../../doc/guide/icon_en.md';
+	import text from '../../../../mds/guide/icon.md';
+	import text_en from '../../../../mds/guide/icon_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/IconPlugin.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
-	import iconPluginText from '../../../../packages/rollup-plugin-stdf-icon/README_CN.md';
+	import iconPluginText from '../../../../../packages/rollup-plugin-stdf-icon/README_CN.md';
 	// @ts-ignore
-	import iconPluginText_en from '../../../../packages/rollup-plugin-stdf-icon/README.md';
+	import iconPluginText_en from '../../../../../packages/rollup-plugin-stdf-icon/README.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = mdTextToHljs(

docs/site/src/pages/guide/Internation.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/internation.md';
-	import text_en from '../../../../doc/guide/internation_en.md';
+	import text from '../../../../mds/guide/internation.md';
+	import text_en from '../../../../mds/guide/internation_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/Milestone.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/milestone.md';
-	import text_en from '../../../../doc/guide/milestone_en.md';
+	import text from '../../../../mds/guide/milestone.md';
+	import text_en from '../../../../mds/guide/milestone_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 

docs/site/src/pages/guide/QuickStart.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
-	import quickStartText from '../../../../doc/guide/quickStart.md';
+	import quickStartText from '../../../../mds/guide/quickStart.md';
 	// @ts-ignore
-	import quickStartText_en from '../../../../doc/guide/quickStart_en.md';
+	import quickStartText_en from '../../../../mds/guide/quickStart_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = groupIconMdPlugin(

docs/site/src/pages/guide/Theme.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import theme from '../../../../doc/guide/theme.md';
-	import theme_en from '../../../../doc/guide/theme_en.md';
+	import theme from '../../../../mds/guide/theme.md';
+	import theme_en from '../../../../mds/guide/theme_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = mdTextToHljs((isZh ? theme : theme_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/src/pages/guide/Vscode.svelte

@@ -2,8 +2,8 @@
 	import { mdTextToHljs } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
-	import text from '../../../../doc/guide/vscode.md';
-	import text_en from '../../../../doc/guide/vscode_en.md';
+	import text from '../../../../mds/guide/vscode.md';
+	import text_en from '../../../../mds/guide/vscode_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));

docs/site/vite.config.js

@@ -6,93 +6,94 @@ import svgSprite from 'rollup-plugin-stdf-icon';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	base: '/',
-	plugins: [
-		// @ts-ignore
-		svelte(),
-		// @ts-ignore
-		md({
-			// to disable marked set to false
-			marked: {
-				//marked options
-			},
-			include: ['../doc/**/*.md', './src/pages/guide/**/*.md', '../packages/**/*.md'],
-		}),
-		svgSprite([{ inFile: 'src/assets/svgs', outFile: 'public/fonts', fileName: 'symbol' }]),
-	],
-	css: { postcss },
-	server: {
-		hmr: true,
-		host: '0.0.0.0',
-		port: 5555,
-		// 是否开启 https
-		https: false,
-	},
-	build: {
-		assetsDir: 'build',
-		rollupOptions: {
-			manualChunks: id => {
-				// 将 node_modules 中的包拆分到单独的 build/node_modules.js 文件中
-				if (id.includes('node_modules')) {
-					return 'vendor/index';
-				}
-				// 将 src/components/menu 中的包拆分到单独的 build/common/menu/index.js 文件中
-				if (id.includes('site/src/components/menu')) {
-					return 'common/menu/index';
-				}
-				// 将 src/pages/Home.svelte 单独拆分到 build/home/index.js 文件中
-				if (id.includes('src/pages/Home.svelte')) {
-					return 'home/index';
-				}
-				// 将 src/pages/guide/Guide.svelte 单独拆分到 build/guide/index.js 文件中
-				if (id.includes('src/pages/guide/Guide.svelte')) {
-					return 'guide/index';
-				}
-				const guide = [
-					'QuickStart',
-					'Theme',
-					'Faq',
-					'Color',
-					'Color_en',
-					'Icon',
-					'Internation',
-					'Compatibility',
-					'Logo',
-					'About',
-					'Changelog',
-					'Future',
-					'Shortkey',
-					'Contribution',
-					'Milestone',
-					'Vscode',
-					'Generator',
-				];
-				// 循环遍历 guide 文件夹下的所有文件，将其单独拆分到 build/guide/xxx/index.js 文件中
-				for (const item of guide) {
-					if (id.includes(`src/pages/guide/${item}.svelte`)) {
-						return `guide/${item}/index`;
-					}
-				}
-				// 将 src/pages/components/Components.svelte 单独拆分到 build/components/index.js 文件中
-				if (id.includes('src/pages/components/Components.svelte')) {
-					return 'components/index';
-				}
-				const components = ['Api', 'Component', 'FAQ', 'Guide', 'Version'];
-				// 循环遍历 components 文件夹下的所有文件，将其单独拆分到 build/components/xxx/index.js 文件中
-				for (const item of components) {
-					if (id.includes(`src/pages/components/${item}.svelte`)) {
-						return `components/${item}/index`;
-					}
-				}
-				// 如果 id 包含 doc/guide/xxx.md 则单独拆分到 build/doc/guide/xxx/index.js 文件中
-				if (id.includes('doc/guide/')) {
-					return 'doc/guide/' + id.match(/doc\/guide\/(.*)\.md/)[1] + '/index';
-				}
-				// 如果 id 包含 doc/components/xxx.md 则单独拆分到 build/doc/components/xxx/index.js 文件中
-				if (id.includes('doc/components/')) {
-					return 'doc/components/' + id.match(/doc\/components\/(.*)\.md/)[1] + '/index';
-				}
-			},
-		},
-	},
+    base: '/',
+    plugins: [
+        // @ts-ignore
+        svelte(),
+        // @ts-ignore
+        md({
+            // to disable marked set to false
+            marked: {
+                //marked options
+            },
+            // include: ['../doc/**/*.md', './src/pages/guide/**/*.md', '../packages/**/*.md'],
+            include: ['../mds/**/*.md', './src/pages/guide/**/*.md', '../../packages/**/*.md'],
+        }),
+        svgSprite([{ inFile: 'src/assets/svgs', outFile: 'public/fonts', fileName: 'symbol' }]),
+    ],
+    css: { postcss },
+    server: {
+        hmr: true,
+        host: '0.0.0.0',
+        port: 5555,
+        // 是否开启 https
+        https: false,
+    },
+    build: {
+        assetsDir: 'build',
+        rollupOptions: {
+            manualChunks: id => {
+                // 将 node_modules 中的包拆分到单独的 build/node_modules.js 文件中
+                if (id.includes('node_modules')) {
+                    return 'vendor/index';
+                }
+                // 将 src/components/menu 中的包拆分到单独的 build/common/menu/index.js 文件中
+                if (id.includes('site/src/components/menu')) {
+                    return 'common/menu/index';
+                }
+                // 将 src/pages/Home.svelte 单独拆分到 build/home/index.js 文件中
+                if (id.includes('src/pages/Home.svelte')) {
+                    return 'home/index';
+                }
+                // 将 src/pages/guide/Guide.svelte 单独拆分到 build/guide/index.js 文件中
+                if (id.includes('src/pages/guide/Guide.svelte')) {
+                    return 'guide/index';
+                }
+                const guide = [
+                    'QuickStart',
+                    'Theme',
+                    'Faq',
+                    'Color',
+                    'Color_en',
+                    'Icon',
+                    'Internation',
+                    'Compatibility',
+                    'Logo',
+                    'About',
+                    'Changelog',
+                    'Future',
+                    'Shortkey',
+                    'Contribution',
+                    'Milestone',
+                    'Vscode',
+                    'Generator',
+                ];
+                // 循环遍历 guide 文件夹下的所有文件，将其单独拆分到 build/guide/xxx/index.js 文件中
+                for (const item of guide) {
+                    if (id.includes(`src/pages/guide/${item}.svelte`)) {
+                        return `guide/${item}/index`;
+                    }
+                }
+                // 将 src/pages/components/Components.svelte 单独拆分到 build/components/index.js 文件中
+                if (id.includes('src/pages/components/Components.svelte')) {
+                    return 'components/index';
+                }
+                const components = ['Api', 'Component', 'FAQ', 'Guide', 'Version'];
+                // 循环遍历 components 文件夹下的所有文件，将其单独拆分到 build/components/xxx/index.js 文件中
+                for (const item of components) {
+                    if (id.includes(`src/pages/components/${item}.svelte`)) {
+                        return `components/${item}/index`;
+                    }
+                }
+                // 如果 id 包含 doc/guide/xxx.md 则单独拆分到 build/doc/guide/xxx/index.js 文件中
+                if (id.includes('doc/guide/')) {
+                    return 'doc/guide/' + id.match(/doc\/guide\/(.*)\.md/)[1] + '/index';
+                }
+                // 如果 id 包含 doc/components/xxx.md 则单独拆分到 build/doc/components/xxx/index.js 文件中
+                if (id.includes('doc/components/')) {
+                    return 'doc/components/' + id.match(/doc\/components\/(.*)\.md/)[1] + '/index';
+                }
+            },
+        },
+    },
 });