更新 1.x demo与文档

docs/site/package.json

@@ -13,6 +13,8 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
+		"@any-tdf/vite-plugin-md-ts": "^0.0.2",
+		"@any-tdf/vite-plugin-svg-symbol": "^0.0.3",
 		"@eslint/compat": "^1.2.4",
 		"@sveltejs/adapter-static": "^3.0.6",
 		"@sveltejs/kit": "^2.21.2",
@@ -34,8 +36,6 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"rollup-plugin-md-ts": "file:../../packages/rollup-plugin-md-ts",
-		"rollup-plugin-stdf-icon": "file:../../packages/rollup-plugin-stdf-icon",
 		"stdf": "file:../../packages/stdf",
 		"svelte": "^5.7.1",
 		"svelte-check": "^4.1.1",

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

@@ -69,7 +69,7 @@
 		const nav = $page.url.searchParams.get('nav');
 		// 将 nav 首字母大写
 		const navFirst = nav ? nav.slice(0, 1).toUpperCase() + nav.slice(1) : '';
-		codeValue = `https://github.com/any-tdf/stdf/blob/main/packages/stdf/src/lib/components/${nav}/${navFirst}.svelte`;
+		codeValue = `https://github.com/any-tdf/stdf/blob/1.x/packages/stdf/src/lib/components/${nav}/${navFirst}.svelte`;
 		showCode = true;
 	};
 	let showFull = $state(false);
@@ -85,7 +85,7 @@
 	};
 </script>
 
-<div class="w-82 md:w-102 relative top-14">
+<div class="relative top-14 w-82 md:w-102">
 	<div class="relative rounded-sm bg-gray-100 p-1 dark:bg-gray-700">
 		<!--滑块-->
 		<div
@@ -105,7 +105,7 @@
 			<button
 				onmouseleave={() => (showQr = false)}
 				onmouseenter={mouseenterFun}
-				class="left-106 absolute top-0 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
+				class="absolute top-0 left-106 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 			>
 				<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" />
@@ -115,7 +115,7 @@
 				</svg>
 				{#if showQr}
 					<div
-						class="absolute left-0 top-14 z-50 hidden w-60 rounded-sm bg-black p-6 shadow-lg dark:block"
+						class="absolute top-14 left-0 z-50 hidden w-60 rounded-sm bg-black p-6 shadow-lg dark:block"
 						transition:fade={{ duration: 200 }}
 					>
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -124,7 +124,7 @@
 				{/if}
 				{#if showQr}
 					<div
-						class="absolute left-0 top-14 z-50 block w-60 rounded-sm bg-white p-6 shadow-lg dark:hidden"
+						class="absolute top-14 left-0 z-50 block w-60 rounded-sm bg-white p-6 shadow-lg dark:hidden"
 						transition:fade={{ duration: 200 }}
 					>
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -139,7 +139,7 @@
 			<button
 				onmouseleave={() => (showCode = false)}
 				onmouseenter={showCodeFunc}
-				class="absolute left-[30.5rem] top-0 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
+				class="absolute top-0 left-[30.5rem] hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="fill: currentColor">
 					<path
@@ -150,7 +150,7 @@
 					<div
 						class="{isZh
 							? 'w-28'
-							: 'w-52'} absolute left-0 top-14 z-50 h-12 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
+							: 'w-52'} absolute top-14 left-0 z-50 h-12 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
 						transition:fade={{ duration: 200 }}
 					>
 						{isZh ? '组件源码' : 'Component source code'}
@@ -163,14 +163,14 @@
 			<button
 				onmouseleave={() => (showStackblitz = false)}
 				onmouseenter={showStackblitzFunc}
-				class="absolute left-[34.5rem] top-0 hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
+				class="absolute top-0 left-[34.5rem] hidden h-12 w-12 rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 			>
 				<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="absolute left-0 top-14 z-50 h-12 w-44 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
+						class="absolute top-14 left-0 z-50 h-12 w-44 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
 						transition:fade={{ duration: 200 }}
 					>
 						{isZh ? '在 StackBlitz 中打开' : 'Open in StackBlitz'}
@@ -185,7 +185,7 @@
 			onmouseenter={() => (showFull = true)}
 			onfocus={() => (showFull = true)}
 			onblur={() => (showFull = false)}
-			class="absolute left-[38.5rem] top-0 hidden h-12 w-12 cursor-pointer rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
+			class="absolute top-0 left-[38.5rem] hidden h-12 w-12 cursor-pointer rounded-sm bg-gray-100 p-3 md:block dark:bg-gray-700"
 		>
 			{#if $isWideScreenStore}
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -206,7 +206,7 @@
 				<div
 					class="{isZh
 						? 'w-20'
-						: 'w-32'} absolute left-0 top-14 z-50 h-12 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
+						: 'w-32'} absolute top-14 left-0 z-50 h-12 rounded-sm bg-gray-700 py-3 text-center leading-[1.5rem] text-white shadow-lg"
 					transition:fade={{ duration: 200 }}
 				>
 					{isZh ? '宽屏' : 'Full screen'}

docs/site/src/routes/+page.svelte

@@ -436,7 +436,7 @@
 <div class="mx-auto max-w-[1536px]">
 	<div class="justify-center lg:flex">
 		<div class="flex basis-2/5 flex-col justify-center py-16 text-center md:py-20">
-			<div class="relative mb-20 mt-16 flex h-20 flex-col items-center justify-center md:h-28">
+			<div class="relative mt-16 mb-20 flex h-20 flex-col items-center justify-center md:h-28">
 				<div class="animate-dynamicsBg absolute rounded-full opacity-50 blur-xl md:opacity-100 md:blur-3xl">
 					<svg viewBox="0 0 100 100">
 						<path
@@ -475,7 +475,7 @@
 				</div>
 			</div>
 			<div class="text-6xl md:text-8xl">STDF</div>
-			<div class="md:text-md mb-10 mt-4 px-4 text-gray-700 md:mb-0 dark:text-gray-300">
+			<div class="md:text-md mt-4 mb-10 px-4 text-gray-700 md:mb-0 dark:text-gray-300">
 				{#if isZh}
 					基于
 					<a
@@ -517,7 +517,7 @@
 					</a>
 				{/if}
 			</div>
-			<div class="mb-16 mt-8 flex justify-center gap-8 md:mt-16">
+			<div class="mt-8 mb-16 flex justify-center gap-8 md:mt-16">
 				<a
 					href="/guide"
 					onmouseenter={() => (showConfetti = true)}
@@ -534,7 +534,7 @@
 									width="10"
 									height="2"
 									fill="currentColor"
-									class="scale-x-135 -translate-x-2 -translate-y-2 transition-all duration-500 group-hover:translate-x-0 group-hover:translate-y-0"
+									class="-translate-x-2 -translate-y-2 scale-x-135 transition-all duration-500 group-hover:translate-x-0 group-hover:translate-y-0"
 								/>
 								<path
 									d="M8.48535 7.07129L1.41406 14.1426L0 12.7275L5.65625 7.07031L0 1.41406L1.41406 0L8.48535 7.07129Z"
@@ -544,14 +544,14 @@
 							</svg>
 						</div>
 						{#if showConfetti}
-							<span class="absolute left-1/2 top-0">
+							<span class="absolute top-0 left-1/2">
 								<Confetti rounded />
 							</span>
 						{/if}
 					</div>
 				</a>
 				<a
-					href={`https://demo.stdf.design?lang=${isZh ? 'zh_CN' : 'en_US'}`}
+					href={`https://1.demo.stdf.design?lang=${isZh ? 'zh_CN' : 'en_US'}`}
 					target="_blank"
 					onmouseleave={() => (showQr = false)}
 					onmouseenter={mouseenterFun}
@@ -561,20 +561,20 @@
 					{#if showQr}
 						<div
 							transition:fly={{ duration: 300, x: -10, opacity: 0 }}
-							class="z-100 absolute left-full top-0 block w-44 -translate-y-1/3 translate-x-1 rounded-lg border border-black/5 p-2 shadow-lg dark:hidden"
+							class="absolute top-0 left-full z-100 block w-44 translate-x-1 -translate-y-1/3 rounded-lg border border-black/5 p-2 shadow-lg dark:hidden"
 						>
 							<span>{@html A_a1Svg}</span>
 						</div>
 						<div
 							transition:fly={{ duration: 300, x: -10, opacity: 0 }}
-							class="z-100 absolute left-full top-0 hidden w-44 -translate-y-1/3 translate-x-1 rounded-lg border bg-black p-2 shadow-lg shadow-white/10 dark:block dark:border-white/10"
+							class="absolute top-0 left-full z-100 hidden w-44 translate-x-1 -translate-y-1/3 rounded-lg border bg-black p-2 shadow-lg shadow-white/10 dark:block dark:border-white/10"
 						>
 							<span>{@html A_a1Svg}</span>
 						</div>
 					{/if}
 				</a>
 				<a
-					href={'https://demo.stdf.design?lang=' + (isZh ? 'zh_CN' : 'en_US')}
+					href={'https://1.demo.stdf.design?lang=' + (isZh ? 'zh_CN' : 'en_US')}
 					target="_blank"
 					class="border-primary dark:border-dark block rounded-sm border border-solid px-6 py-2 transition-all md:hidden"
 				>
@@ -584,7 +584,7 @@
 			<Clis />
 		</div>
 		<div class="relative mt-10 hidden basis-3/5 xl:mt-0 xl:block">
-			<div class="animate-elementUpDownMove1 -translate-x-18 absolute inset-1/2 size-20 -translate-y-12">
+			<div class="animate-elementUpDownMove1 absolute inset-1/2 size-20 -translate-x-18 -translate-y-12">
 				{#if avatar}
 					<Avatar size="md" radius={avatarRadius} image={avatar} injClass="shadow-lg dark:shadow-white/10" />
 				{:else}
@@ -594,14 +594,14 @@
 			<div class="animate-elementUpDownMove1 absolute inset-1/2 -translate-x-96 -translate-y-40">
 				<Loading type={randomNumStr} theme />
 			</div>
-			<div class="animate-elementUpDownMove3 absolute inset-1/2 -translate-y-48 translate-x-52">
+			<div class="animate-elementUpDownMove3 absolute inset-1/2 translate-x-52 -translate-y-48">
 				<Switch radius={switchRadius} inside={switchInside} active />
 			</div>
-			<div class="animate-elementUpDownMove6 -translate-y-42 absolute inset-1/2 w-96 -translate-x-72">
+			<div class="animate-elementUpDownMove6 absolute inset-1/2 w-96 -translate-x-72 -translate-y-42">
 				<Tab {labels} radius={tabRadius} {lineType} />
 			</div>
 			<div
-				class="animate-elementUpDownMove5 w-84 absolute inset-1/2 h-24 translate-x-20 translate-y-6 rounded-lg bg-white px-2 shadow-lg dark:bg-black/80 dark:shadow-white/10"
+				class="animate-elementUpDownMove5 absolute inset-1/2 h-24 w-84 translate-x-20 translate-y-6 rounded-lg bg-white px-2 shadow-lg dark:bg-black/80 dark:shadow-white/10"
 			>
 				<Input
 					title={inputTitle}
@@ -613,7 +613,7 @@
 					clear
 					onchange={inputFun}
 				/>
-				<span class="absolute left-0 top-1/2 {showInputConfetti ? 'block' : 'hidden'}">
+				<span class="absolute top-1/2 left-0 {showInputConfetti ? 'block' : 'hidden'}">
 					<Confetti infinite rounded x={[-0.5, 0.5]} y={[-0.5, 0.5]} />
 				</span>
 			</div>
@@ -640,17 +640,17 @@
 				{/if}
 			</div>
 			<div
-				class="animate-elementUpDownMove3 h-15 absolute inset-1/2 w-96 -translate-x-96 -translate-y-72 rounded-lg bg-white p-3 shadow-lg dark:bg-black/80 dark:shadow-white/10"
+				class="animate-elementUpDownMove3 absolute inset-1/2 h-15 w-96 -translate-x-96 -translate-y-72 rounded-lg bg-white p-3 shadow-lg dark:bg-black/80 dark:shadow-white/10"
 			>
 				<NoticeBar vertical {textList}></NoticeBar>
 			</div>
-			<div class="animate-elementUpDownMove1 absolute inset-1/2 w-64 -translate-y-20 translate-x-32">
+			<div class="animate-elementUpDownMove1 absolute inset-1/2 w-64 translate-x-32 -translate-y-20">
 				<Slider value={sliderValue} showTip={sliderShowTip} radius={sliderRadius} />
 			</div>
-			<div class="animate-elementUpDownMove5 h-54 -translate-x-110 absolute inset-1/2 w-[390px] translate-y-16 overflow-hidden">
+			<div class="animate-elementUpDownMove5 absolute inset-1/2 h-54 w-[390px] -translate-x-110 translate-y-16 overflow-hidden">
 				<Swiper {...swiperOption} />
 			</div>
-			<div class="animate-elementUpDownMove1 -translate-y-74 group absolute inset-1/2 w-64 translate-x-32">
+			<div class="animate-elementUpDownMove1 group absolute inset-1/2 w-64 translate-x-32 -translate-y-74">
 				<Button heightIn="2" onclick={randomThemeFunc}>
 					<span class="transition-all duration-500 group-hover:translate-x-1">
 						{themes.find((item) => item.name === $currentColorStore)?.[isZh ? 'name_CN' : 'name']}
@@ -675,17 +675,17 @@
 			>
 				<div class="relative w-full">
 					<img
-						class="aspect-5/3 block h-full w-full object-cover transition-all duration-500 group-hover:scale-125 dark:hidden"
+						class="block aspect-5/3 h-full w-full object-cover transition-all duration-500 group-hover:scale-125 dark:hidden"
 						src={desc.icon}
 						alt=""
 					/>
 					<img
-						class="aspect-5/3 hidden h-full w-full object-cover transition-all duration-500 group-hover:scale-125 dark:block"
+						class="hidden aspect-5/3 h-full w-full object-cover transition-all duration-500 group-hover:scale-125 dark:block"
 						src={desc.icon_d}
 						alt=""
 					/>
 					<div
-						class="text-shadow-lg bg-primary/10 dark:bg-dark/10 absolute bottom-1.5 left-0 right-0 mx-1.5 flex flex-col justify-center rounded-2xl border border-white/30 px-3 py-1.5 text-white backdrop-blur-sm"
+						class="bg-primary/10 dark:bg-dark/10 absolute right-0 bottom-1.5 left-0 mx-1.5 flex flex-col justify-center rounded-2xl border border-white/30 px-3 py-1.5 text-white backdrop-blur-sm text-shadow-lg"
 					>
 						<div class="mb-0.5 text-3xl font-bold transition-all duration-500 group-hover:translate-x-4">{desc.title}</div>
 						<div class="text-xs font-bold transition-all duration-500">

docs/site/src/routes/components/+page.svelte

@@ -180,7 +180,7 @@
 		goto(`/components?nav=${params.get('nav') ? params.get('nav') : 'button'}&tab=${currentTab}`);
 	};
 	let QRValue = $derived(
-		(import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://demo.stdf.design/') +
+		(import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://1.demo.stdf.design/') +
 			currentNav?.nav +
 			(isZh ? '/zh_CN' : '/en_US')
 	);
@@ -190,7 +190,7 @@
 
 <div class="flex">
 	<div
-		class="fixed -left-52 top-14 z-[100] w-52 overflow-y-scroll border-black/10 bg-white transition-all duration-300 md:left-0 md:bg-transparent dark:border-white/20 dark:bg-black dark:md:bg-transparent"
+		class="fixed top-14 -left-52 z-[100] w-52 overflow-y-scroll border-black/10 bg-white transition-all duration-300 md:left-0 md:bg-transparent dark:border-white/20 dark:bg-black dark:md:bg-transparent"
 		class:left-0={$isShowNavStore}
 		class:-left-52={!$isShowNavStore}
 		style="height:{navBarHeight + 'px'}"
@@ -239,7 +239,7 @@
 					<div
 						in:fly={{ y: 100, duration: 500 }}
 						out:fly={{ y: 100, duration: 100 }}
-						class="mt-2 flex flex-1 justify-around py-4 md:pl-8 md:pr-4"
+						class="mt-2 flex flex-1 justify-around py-4 md:pr-4 md:pl-8"
 						style="width:{titleWidth}px;"
 					>
 						<div class="bg-codeLight dark:bg-codeDark grow overflow-y-scroll rounded-sm" style="height:{demoHeight}px;">
@@ -256,7 +256,7 @@
 										id="iframe-id"
 										src={import.meta.env.DEV
 											? `http://localhost:8888/${currentNav?.nav}/${isZh ? 'zh_CN' : 'en_US'}?channel=iframe&theme=${$currentColorStore}&darkMode=${$currentThemeStore}&lang=${localStorage.getItem('lang')}`
-											: `https://demo.stdf.design/${currentNav?.nav}/${isZh ? 'zh_CN' : 'en_US'}?channel=iframe&theme=${$currentColorStore}&darkMode=${$currentThemeStore}&lang=${localStorage.getItem('lang')}`}
+											: `https://1.demo.stdf.design/${currentNav?.nav}/${isZh ? 'zh_CN' : 'en_US'}?channel=iframe&theme=${$currentColorStore}&darkMode=${$currentThemeStore}&lang=${localStorage.getItem('lang')}`}
 										height={demoHeight - 2}
 										width="390"
 									></iframe>

docs/site/vite.config.ts

@@ -1,15 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
-import md from 'rollup-plugin-md-ts';
-import svgSprite from 'rollup-plugin-stdf-icon';
+import md from '@any-tdf/vite-plugin-md-ts';
+import svgSymbol from '@any-tdf/vite-plugin-svg-symbol';
 
 export default defineConfig({
 	plugins: [
 		sveltekit(),
 		tailwindcss(),
 		md({ marked: {}, include: ['../mds/**/*.md', '../../packages/**/*.md'] }),
-		svgSprite([{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: 'symbol' }])
+		svgSymbol([{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: 'symbol' }])
 	],
 	server: { hmr: true, host: '0.0.0.0', port: 5555 },
 	build: { assetsDir: 'build' }

packages/stdf/package.json

@@ -149,6 +149,7 @@
 		"tailwindcss": "^4.0.0"
 	},
 	"devDependencies": {
+		"@any-tdf/vite-plugin-svg-symbol": "^0.0.3",
 		"@iconify-json/carbon": "^1.2.8",
 		"@iconify-json/fluent-color": "^1.2.12",
 		"@iconify-json/material-symbols": "^1.2.21",
@@ -167,7 +168,6 @@
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.9",
-		"rollup-plugin-stdf-icon": "file:../rollup-plugin-stdf-icon",
 		"svelte": "^5.22.6",
 		"svelte-check": "^4.1.5",
 		"svelte-confetti": "^2.3.1",

packages/stdf/vite.config.ts

@@ -1,9 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
-import svgSprite from 'rollup-plugin-stdf-icon';
+import svgSymbol from '@any-tdf/vite-plugin-svg-symbol';
 
 export default defineConfig({
-	plugins: [sveltekit(), tailwindcss(), svgSprite([{ inFile: 'src/assets/svgs', outFile: 'static/fonts', fileName: 'symbol' }])],
+	plugins: [sveltekit(), tailwindcss(), svgSymbol([{ inFile: 'src/assets/svgs', outFile: 'static/fonts', fileName: 'symbol' }])],
 	server: { hmr: true, host: '0.0.0.0', port: 8888 }
 });