Merge pull request #9 from hyt1004/main

文档搜索优化、页面优化

Author: hyt1004

README.md

@@ -2,7 +2,7 @@
 
 ## 安装
 
-``` shell
+```shell
 npm install
 ```
 
@@ -11,16 +11,17 @@ npm install
 ```shell
 npm run docs:dev
 ```
-浏览器打开 http://localhost:5173
+
+浏览器打开 <http://localhost:5173>
 
 ## 部署
 
 ```shell
 npm run docs:build
 ```
 
-本地预览，执行下列命令后，生成一个本地静态 Web 服务 http://localhost:4173，该服务以 .vitepress/dist 作为源文件
+本地预览，执行下列命令后，生成一个本地静态 Web 服务 <http://localhost:4173>，该服务以 .vitepress/dist 作为源文件
+
 ```shell
 npm run docs:preview
 ```
-

docs/.vitepress/config.mts

@@ -7,21 +7,12 @@ const sidebarItems = getChapterItems(1, 2);
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  lang: "zh",
   title: "灵矽文档中心",
   description: "A 灵矽 Documentation Project",
   lastUpdated: true,
   cleanUrls: true,
   base: "/Xrobot-docs/",
-  locales: {
-    root: {
-      label: "简体中文",
-      lang: "cn",
-    },
-    // en: {
-    //   label: "English",
-    //   lang: "en",
-    // },
-  },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     outline: [2, 4],
@@ -41,8 +32,8 @@ export default defineConfig({
       },
     ],
     search: {
-      provider: "local",
-    },
+      provider: 'local',
+    }
   },
   markdown: {
     toc: {

docs/.vitepress/theme/components/ChapterContents.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
 import { useData } from "vitepress";
 import {
+  ChapterItem,
   ChapterItems,
   Chapters,
   isChapter,
 } from "../../../.vitepress/theme/constrants/route";
-
-function apply_prefix(link: string, prefix: string) {
-  if (!prefix) return link;
-  if (link.startsWith("/") && prefix.endsWith("/")) {
-    return prefix.slice(0, -1) + link;
-  } else if (!link.startsWith("/") && !prefix.endsWith("/")) {
-    return prefix + "/" + link;
-  }
-  return prefix + link;
-}
+import { apply_prefix } from "../utils";
 
 const { chapter: chapter_root, root = true } = defineProps<{
   // 参数chapter应该是如 Chapter.xrobot_device这样的
@@ -28,12 +20,13 @@ const base = site.value.base;
 
 // console.log("contents");
 let chapter_name: string[] = [];
-let tocs: { link: string; text: string }[][] = [];
+let tocs: ChapterItem[][] = [];
 
 // console.log("chapter_root", chapter_root);
 // console.log("ChapterItems[chapter_root]", ChapterItems[chapter_root]);
 
-const items = ChapterItems[chapter_root];
+const items: ChapterItem[] = ChapterItems[chapter_root];
+
 if (!items) {
   const { page } = useData();
   console.warn(

docs/.vitepress/theme/components/SearchBox.vue

@@ -0,0 +1,108 @@
+<!-- .vitepress/theme/components/SearchBox.vue -->
+<template>
+  <div class="custom-search">
+    <button
+      ref="searchButton"
+      class="search-button"
+      @click="openSearch"
+      aria-label="搜索文档"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <path d="M21 21l-4.35-4.35"></path>
+      </svg>
+      <span class="DocSearch-Button-Placeholder">搜索文档...</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+const openSearch = async () => {
+  const ele = document.getElementById("local-search").querySelector("button");
+  console.log("search", ele);
+  ele.click();
+};
+</script>
+
+<style scoped>
+.custom-search {
+  max-width: 580px;
+  width: 100%;
+  margin: 0 auto 32px;
+  padding: 0 24px;
+}
+
+.search-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 16px;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: var(--vp-shadow-1);
+  text-align: left;
+}
+
+.search-button:hover {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-brand);
+  box-shadow: var(--vp-shadow-2);
+}
+
+.search-button:active {
+  transform: translateY(1px);
+}
+
+.search-button svg {
+  width: 18px;
+  height: 18px;
+  margin-right: 12px;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s ease;
+}
+
+.search-button:hover svg {
+  color: var(--vp-c-brand);
+}
+
+.search-button span {
+  font-size: 15px;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s ease;
+}
+
+.search-button:hover span {
+  color: var(--vp-c-text-1);
+}
+
+/* 在首页的特殊样式 */
+.VPHero.has-image .custom-search {
+  margin-top: 24px;
+  margin-bottom: 48px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .custom-search {
+    padding: 0 16px;
+    margin-bottom: 24px;
+  }
+
+  .search-button {
+    padding: 8px 14px;
+  }
+
+  .search-button span {
+    font-size: 14px;
+  }
+}
+</style>

docs/.vitepress/theme/index.css

@@ -18,11 +18,18 @@
   /* border: 1px solid #e5e7eb; */
 }
 
-div[class="VPContent is-home"] {
-  /* todo 移除测试背景-该背景被应用到整个页面 */
+/* 居中 */
+.name.clip,
+.VPHomeFeatures .VPImage,
+.VPHomeFeatures .link-text {
+  margin: auto;
+}
+
+/* todo 移除测试背景-该背景被应用到整个页面 */
+/* div[class="VPContent is-home"] {
   background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
 }
 
 html.dark div[class="VPContent is-home"] {
   background: none;
-}
+} */

docs/.vitepress/theme/layout.vue

@@ -1,5 +1,6 @@
 <script setup>
 import DefaultTheme from "vitepress/theme";
+import SearchBox from "./components/SearchBox.vue";
 
 const { Layout } = DefaultTheme;
 </script>
@@ -8,5 +9,8 @@ const { Layout } = DefaultTheme;
   <Layout>
     <!-- <template #not-found> 404 not-found </template> -->
     <!-- <template #home-hero-image>  </template> -->
+    <template #home-hero-after>
+      <SearchBox></SearchBox>
+    </template>
   </Layout>
 </template>

docs/index.md

@@ -6,45 +6,47 @@ hero:
   name: "灵矽文档中心"
   # text: "Xrobot Docs"
   # tagline: ddddddddddddddddddddddddd
-  actions:
-    - theme: brand
-      text: 开发文档
-      link: /xrobot/
-    - theme: brand
-      text: 常见问题
-      link: /xrobot/faq/
-    - theme: alt
-      text: 去体验-灵矽
-      link: https://xrobo.qiniu.com/#/home
 features:
   - linkText: 设备接入协议
     icon:
-      src: /icons/protocol.png
+      light: /icons/light/protocol.svg
+      dark: /icons/dark/protocol.svg
       width: 100
       height: 100
     link: ./xrobot/platform
   - linkText: 平台API
     icon:
-      src: /icons/API.png
+      light: /icons/light/API.svg
+      dark: /icons/dark/API.svg
       width: 100
       height: 100
     link: ./xrobot/api
   - linkText: MCP接入
     icon:
-      src: /icons/mcp.png
+      light: /icons/light/mcp.svg
+      dark: /icons/dark/mcp.svg
       width: 100
       height: 100
     link: ./xrobot/mcp
   - linkText: 最佳实践
     icon:
-      src: /icons/best-practice.png
+      light: /icons/light/best-practice.svg
+      dark: /icons/dark/best-practice.svg
       width: 100
       height: 100
     link: ./xrobot/guide
   - linkText: FAQ
     icon: 
-      src: /icons/faq.png
+      light: /icons/light/faq.svg
+      dark: /icons/dark/faq.svg
       width: 100
       height: 100
     link: ./xrobot/faq
+  - linkText: 去体验
+    icon: 
+      light: /icons/light/experience.svg
+      dark: /icons/dark/experience.svg
+      width: 100
+      height: 100
+    link: https://xrobo.qiniu.com/#/home
 ---