浏览代码

[doc]更新Header组件,添加AI问答链接,优化移动端和PC端的样式及布局。

dufu1991 1 年之前
父节点
当前提交
1d21247287
共有 1 个文件被更改,包括 33 次插入3 次删除
  1. 33 3
      docs/site/src/lib/header/Header.svelte

+ 33 - 3
docs/site/src/lib/header/Header.svelte

@@ -170,8 +170,24 @@
 			{#if showNav}
 				<!-- 移动端 -->
 				<div
-					class="absolute right-2 top-16 flex flex-col space-y-4 rounded-sm border border-black/10 bg-white p-1 pt-4 text-center font-bold shadow-lg backdrop-blur-sm dark:border-white/20 dark:bg-gray-950 dark:shadow-white/20"
+					transition:slide={{ duration: 300, axis: 'y' }}
+					class="absolute right-2 top-14 flex flex-col space-y-3 rounded-sm border border-black/10 bg-white p-1 pt-4 text-center text-sm font-bold shadow-lg backdrop-blur-sm dark:border-white/20 dark:bg-gray-950 dark:shadow-white/20"
 				>
+					<!-- 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"
+						target="_blank"
+						title={isZh ? '到 DeepWiki 提问' : 'Ask questions on DeepWiki'}
+						aria-label={isZh ? '到 DeepWiki 提问' : 'Ask questions on DeepWiki'}
+					>
+						<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="inline-block" fill="currentColor">
+							<path
+								d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM10 3H14V5H10C6.68629 5 4 7.68629 4 11C4 14.61 6.46208 16.9656 12 19.4798V17H14C17.3137 17 20 14.3137 20 11H22C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3Z"
+							>
+							</path>
+						</svg>
+					</a>
 					<a
 						href="/guide"
 						class="rounded-sm px-4 py-1 hover:bg-gray-100 dark:hover:bg-gray-700"
@@ -192,8 +208,8 @@
 						{isZh ? '主题' : 'Theme'}
 						{#if $showThemeSwitchStore}
 							<div
-								transition:slide={{ duration: 300, axis: 'y' }}
-								class="absolute right-4 top-0 rounded-lg bg-white p-4 shadow-lg dark:bg-black/95 dark:shadow-white/10"
+								transition:slide={{ duration: 300, axis: 'x' }}
+								class="absolute right-16 top-0 h-80 overflow-y-auto rounded-lg bg-white p-3 shadow-lg dark:bg-black/95 dark:shadow-white/40"
 							>
 								<ModeSwitch useViewTransition={false} />
 								<ThemeSwitch vertical />
@@ -239,6 +255,20 @@
 		</div>
 		<!--PC 端-->
 		<div class="hidden items-center space-x-2 px-6 font-bold md:flex">
+			<!-- AI 问答 -->
+			<a
+				href="https://deepwiki.com/any-tdf/stdf"
+				class="inline-block px-2 py-1"
+				target="_blank"
+				title={isZh ? '到 DeepWiki 提问' : 'Ask questions on DeepWiki'}
+				aria-label={isZh ? '到 DeepWiki 提问' : 'Ask questions on DeepWiki'}
+			>
+				<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+					><path
+						d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM10 3H14V5H10C6.68629 5 4 7.68629 4 11C4 14.61 6.46208 16.9656 12 19.4798V17H14C17.3137 17 20 14.3137 20 11H22C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3Z"
+					></path></svg
+				>
+			</a>
 			<button
 				class="flex cursor-pointer rounded-sm border border-black/10 p-0.5 text-xs font-normal text-black/40 transition-all hover:border-black/20 dark:border-white/10 dark:text-white/40 dark:hover:border-white/20"
 				onclick={clickCmdKFun}