[doc]新增Clis组件

docs/site/src/lib/clis/Clis.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import codeGroupSvgData from '../../utils/code-group-svg-data';
+	const isZh = localStorage.getItem('lang') === 'zh_CN';
+
+	let showCli = $state(0);
+	let intervalTime: ReturnType<typeof setInterval>;
+	let animation = $state(true);
+	let isClicked = $state(false);
+	let isHover = $state(false);
+	// 每 3 秒切换一次
+	onMount(() => {
+		intervalTime = setInterval(() => {
+			// 当是最后一个时立马切换到第一个，并且动画结束
+			if (showCli === codeGroupSvgData.length - 1) {
+				showCli = 0;
+				animation = false;
+			} else {
+				animation = true;
+				showCli++;
+			}
+		}, 6000);
+	});
+	onDestroy(() => {
+		clearInterval(intervalTime);
+	});
+</script>
+
+<div class="inline-flex justify-center">
+	<div
+		class="w-18 relative overflow-hidden rounded-l-lg border border-black/5 border-r-transparent bg-black/5 text-xs dark:border-white/10 dark:border-r-transparent dark:bg-white/10"
+	>
+		<div class="absolute {animation ? 'transition-all duration-300' : ''}" style="top: -{showCli * 28}px">
+			{#each codeGroupSvgData as cli}
+				<div class="flex h-7 items-center gap-1 px-3">
+					<span class="translate-y-px">{@html cli.svg}</span>
+					{cli.name}
+				</div>
+			{/each}
+		</div>
+	</div>
+	<button
+		type="button"
+		onmouseenter={() => (isHover = true)}
+		onmouseleave={() => (isHover = false)}
+		class="relative inline-flex items-center justify-center rounded-r-lg border border-black/5 bg-black/5 px-4 py-1 transition-all duration-300 dark:border-white/10 dark:bg-white/10"
+		onclick={async () => {
+			await navigator.clipboard.writeText(codeGroupSvgData[showCli].cli);
+			isClicked = true;
+			setTimeout(() => {
+				isClicked = false;
+			}, 2000);
+		}}
+	>
+		<code class="cursor-copy text-sm opacity-80">{codeGroupSvgData[showCli].cli}</code>
+		<div
+			class="bg-primary dark:bg-dark rounded-xs absolute -top-3 left-1/2 size-3 -translate-x-1/2 rotate-45 transition-all {isHover
+				? '-translate-y-1/2 opacity-100'
+				: '-translate-y-4 opacity-0'}"
+		></div>
+		<div
+			class="bg-primary dark:bg-dark absolute -top-8 left-1/2 -translate-x-1/2 rounded-sm px-2 py-1 text-xs text-white transition-all dark:text-black {isHover
+				? 'translate-y-0 opacity-100'
+				: '-translate-y-2 opacity-0'}"
+		>
+			{isZh ? (isClicked ? '已复制' : '复制') : isClicked ? 'Copied' : 'Copy'}
+		</div>
+	</button>
+</div>

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

@@ -10,7 +10,7 @@
 	import { menuList, type MenuList } from '../data/menuList';
 	import themes from '../data/themes/index.js';
 	import { switchTheme } from 'stdf/theme';
-
+	import Clis from '../lib/clis/Clis.svelte';
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 
 	// 随机生成 1_0 到 1_53 这种字符串
@@ -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 hidden h-20 flex-col items-center justify-center md:flex md:h-28">
+			<div class="relative mb-20 mt-16 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
@@ -517,12 +517,12 @@
 					</a>
 				{/if}
 			</div>
-			<div class="mb-8 mt-8 flex justify-center gap-4 space-x-8 md:mb-10 md:mt-16">
+			<div class="mb-16 mt-8 flex justify-center gap-8 md:mt-16">
 				<a
 					href="/guide"
 					onmouseenter={() => (showConfetti = true)}
 					onmouseleave={() => (showConfetti = false)}
-					class="bg-primary hover:bg-primary/80 dark:bg-dark hover:dark:bg-dark/80 group relative rounded-sm px-4 py-2 text-white transition-all dark:text-black"
+					class="bg-primary hover:bg-primary/80 dark:bg-dark hover:dark:bg-dark/80 group relative rounded-sm px-6 py-2 text-white transition-all dark:text-black"
 				>
 					<div class="group flex items-center gap-2">
 						{isZh ? '开始使用' : 'Get Started'}
@@ -581,6 +581,7 @@
 					{isZh ? '示例' : 'Demo'}
 				</a>
 			</div>
+			<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">