|
|
@@ -3,56 +3,69 @@
|
|
|
import codeGroupSvgData from '../../utils/code-group-svg-data';
|
|
|
const isZh = localStorage.getItem('lang') === 'zh_CN';
|
|
|
|
|
|
+ // 将 codeGroupSvgData 随机打乱
|
|
|
+ const randomCodeGroupSvgData = codeGroupSvgData.sort(() => Math.random() - 0.5);
|
|
|
+
|
|
|
let showCli = $state(0);
|
|
|
let intervalTime: ReturnType<typeof setInterval>;
|
|
|
- let animation = $state(true);
|
|
|
let isClicked = $state(false);
|
|
|
let isHover = $state(false);
|
|
|
+ let textCli = $state('_');
|
|
|
+ let times: ReturnType<typeof setInterval>;
|
|
|
+ // 写一个函数，模拟打字效果，传入一段文字，返回一个打字效果的函数
|
|
|
+ const typeWriter = (text: string, speed: number = 150) => {
|
|
|
+ let number = 0;
|
|
|
+ times = setInterval(() => {
|
|
|
+ number++;
|
|
|
+ if (number >= text.length) {
|
|
|
+ number = 0;
|
|
|
+ textCli = text;
|
|
|
+ clearInterval(times);
|
|
|
+ } else {
|
|
|
+ textCli = text.slice(0, number) + '_';
|
|
|
+ }
|
|
|
+ }, speed);
|
|
|
+ };
|
|
|
+
|
|
|
// 每 3 秒切换一次
|
|
|
onMount(() => {
|
|
|
+ typeWriter(randomCodeGroupSvgData[showCli].cli);
|
|
|
intervalTime = setInterval(() => {
|
|
|
- // 当是最后一个时立马切换到第一个，并且动画结束
|
|
|
if (showCli === codeGroupSvgData.length - 1) {
|
|
|
showCli = 0;
|
|
|
- animation = false;
|
|
|
} else {
|
|
|
- animation = true;
|
|
|
showCli++;
|
|
|
}
|
|
|
+ textCli = '_';
|
|
|
+ setTimeout(() => {
|
|
|
+ typeWriter(randomCodeGroupSvgData[showCli].cli);
|
|
|
+ }, 300);
|
|
|
}, 6000);
|
|
|
});
|
|
|
onDestroy(() => {
|
|
|
clearInterval(intervalTime);
|
|
|
+ clearInterval(times);
|
|
|
});
|
|
|
</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 class="bg-primary/5 dark:bg-dark/10 rounded-l-full text-xs">
|
|
|
+ <div class="mr-2 flex h-7 items-center gap-1 pl-3">{@html randomCodeGroupSvgData[showCli].svg}</div>
|
|
|
</div>
|
|
|
<button
|
|
|
type="button"
|
|
|
onmouseenter={() => (isHover = true)}
|
|
|
onmouseleave={() => (isHover = false)}
|
|
|
- class="relative inline-flex cursor-copy 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"
|
|
|
+ class="bg-primary/5 dark:bg-dark/10 relative inline-flex cursor-copy items-center justify-center rounded-r-full py-1 pr-3"
|
|
|
onclick={async () => {
|
|
|
- await navigator.clipboard.writeText(codeGroupSvgData[showCli].cli);
|
|
|
+ await navigator.clipboard.writeText(randomCodeGroupSvgData[showCli].cli);
|
|
|
isClicked = true;
|
|
|
setTimeout(() => {
|
|
|
isClicked = false;
|
|
|
}, 2000);
|
|
|
}}
|
|
|
>
|
|
|
- <code class="text-sm opacity-80">{codeGroupSvgData[showCli].cli}</code>
|
|
|
+ <code class="text-primary dark:text-dark text-sm opacity-80">{textCli}</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'
|
dufu1991