Эх сурвалжийг харах

[doc]优化Header组件样式,更新Tab和页面链接为HTTPS,调整二维码显示效果。

dufu1991 1 жил өмнө
parent
commit
819284bb64

+ 13 - 17
docs/site/src/lib/header/Header.svelte

@@ -176,7 +176,7 @@
 					<!-- AI 问答 -->
 					<a
 						href="https://deepwiki.com/any-tdf/stdf"
-						class="rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="px-4 py-1 text-center"
 						target="_blank"
 						title={isZh ? '到 DeepWiki 提问' : 'Ask questions on DeepWiki'}
 						aria-label={isZh ? '到 DeepWiki 提问' : 'Ask questions on DeepWiki'}
@@ -189,22 +189,18 @@
 						</svg>
 					</a>
 					<a
-						href="/guide"
-						class="rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
-						class:bg-gray-100={currentRoute === '/guide'}
-						class:dark:bg-gray-500={currentRoute === '/guide'}>{isZh ? '指南' : 'Guide'}</a
+						href={currentRoute.includes('/guide') ? 'javascript:void(0)' : '/guide'}
+						class="px-4 py-1 text-center {currentRoute.includes('/guide') ? ' text-primary dark:text-dark' : ''}"
 					>
+						{isZh ? '指南' : 'Guide'}
+					</a>
 					<a
-						href="/components?nav=button&tab=0"
-						class="rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
-						class:bg-gray-100={currentRoute === '/components'}
-						class:dark:bg-gray-500={currentRoute === '/components'}>{isZh ? '组件' : 'Components'}</a
-					>
-					<button
-						class="relative rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
-						onclick={showThemeFunc}
-						bind:this={ThemeSwitchDom}
+						href={currentRoute.includes('/components') ? 'javascript:void(0)' : '/components?nav=button&tab=0'}
+						class="px-4 py-1 text-center {currentRoute.includes('/components') ? ' text-primary dark:text-dark' : ''}"
 					>
+						{isZh ? '组件' : 'Components'}
+					</a>
+					<button class="relative px-4 py-1 text-center" onclick={showThemeFunc} bind:this={ThemeSwitchDom}>
 						{isZh ? '主题' : 'Theme'}
 						{#if $showThemeSwitchStore}
 							<div
@@ -217,7 +213,7 @@
 							</div>
 						{/if}
 					</button>
-					<button class="rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700" onclick={toggleFundFunc}>
+					<button class="px-4 py-1 text-center" onclick={toggleFundFunc}>
 						{isZh ? '支持' : 'Support'}
 					</button>
 
@@ -225,7 +221,7 @@
 					<button
 						onclick={switchLangFunc}
 						aria-label={isZh ? '跳转英文站点' : 'Jump to Chinese Site'}
-						class="cursor-pointer rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="cursor-pointer px-4 py-1 text-center"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="inline-block">
 							<path fill="none" d="M0 0h24v24H0z" />
@@ -238,7 +234,7 @@
 					<!-- GitHub -->
 					<a
 						href="https://github.com/any-tdf/stdf"
-						class="rounded-sm px-4 py-1 text-center hover:bg-gray-100 dark:hover:bg-gray-700"
+						class="px-4 py-1 text-center"
 						target="_blank"
 						aria-label={isZh ? '跳转至 GitHub' : 'Jump to GitHub'}
 					>

+ 1 - 1
docs/site/src/lib/tab/Tab.svelte

@@ -26,7 +26,7 @@
 	const mouseenterFun = () => {
 		const params = new URLSearchParams('?' + $page.url.searchParams);
 		QRValue =
-			(import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'https://demo.stdf.design/') +
+			(import.meta.env.DEV ? location.protocol + '//' + location.hostname + ':8888/' : 'HTTPS://DEMO.STDF.DESIGN/') +
 			params.get('nav') +
 			(isZh ? '/zh_CN' : '/en_US');
 		showQr = true;

+ 7 - 9
docs/site/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
 	import { Confetti } from 'svelte-confetti';
 	import { currentThemeStore, currentColorStore } from '../store';
 	// @ts-ignore
@@ -405,7 +405,7 @@
 		 * @param {String} [options.posColor] 定位点颜色
 		 */
 		const qrcode = encodeData({
-			text: `https://demo.stdf.design?lang=${isZh ? 'zh_CN' : 'en_US'}`,
+			text: `HTTPS://DEMO.STDF.DESIGN?lang=${isZh ? 'zh_CN' : 'en_US'}`,
 			isSpace: false
 		});
 		const color = $currentThemeStore === 'dark' ? 'var(--color-dark)' : 'var(--color-primary)';
@@ -557,16 +557,14 @@
 					{isZh ? '示例' : 'Demo'}
 					{#if showQr}
 						<div
-							class="absolute left-full top-0 z-10 block w-52 -translate-y-1/3 translate-x-2 rounded-lg border border-black/5 p-2 shadow-lg dark:hidden"
-							in:fade={{ duration: 300 }}
-							out:fade={{ duration: 0 }}
+							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"
 						>
 							<span>{@html A_a1Svg}</span>
 						</div>
 						<div
-							class="absolute left-full top-0 z-10 hidden w-52 -translate-y-1/3 translate-x-2 rounded-lg border border-white/5 bg-black p-2 shadow-lg dark:block"
-							in:fade={{ duration: 300 }}
-							out:fade={{ duration: 0 }}
+							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"
 						>
 							<span>{@html A_a1Svg}</span>
 						</div>