feat: resolve image 404 and playground jump link issues (#88)

Author: wuyiping0628

.vitepress/theme/components/CustomHeader.vue

@@ -9,8 +9,8 @@
             <img
               :src="
                 isDark
-                  ? '/images/logo-opentiny-next-text-dark.svg'
-                  : '/images/logo-opentiny-next-text.svg'
+                  ? `${prefix}images/logo-opentiny-next-text-dark.svg`
+                  : `${prefix}images/logo-opentiny-next-text.svg`
               "
               alt="OpenTiny NEXT"
               class="logo-icon"
@@ -119,8 +119,8 @@
               <img
                 :src="
                   isDark
-                    ? '/images/logo-opentiny-next-text-dark.svg'
-                    : '/images/logo-opentiny-next-text.svg'
+                    ? `${prefix}logo-opentiny-next-text-dark.svg`
+                    : `${prefix}logo-opentiny-next-text.svg`
                 "
                 alt="OpenTiny NEXT"
                 class="logo-icon"

.vitepress/theme/home/index.vue

@@ -67,11 +67,15 @@
   </div>
 </template>
 <script setup>
+import { useData } from "vitepress";
+const { site } = useData();
+const prefix = site.value.base || "/";
+
 const nextDates = [
   {
     nextDateLeft: [
       {
-        icon: '/images/logo-active-next-sdk.svg',
+        icon: `${prefix}images/logo-active-next-sdk.svg`,
         title: 'NEXT-SDKs',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
@@ -92,8 +96,8 @@ const nextDates = [
         title: '快速开始',
         desc: '使用 OpenTiny NEXT-SDKs，只需要以下四步，就可以把你的前端应用变成智能应用。',
         links: [
-          { text: '让你的应用智能化',icon: '/images/icon-app.svg',  url: '/next-sdk/guide/#让你的应用智能化' },
-          { text: '浏览器直接引入',icon: '/images/icon-browser.svg',  url: '/next-sdk/guide/#浏览器直接引入' },
+          { text: '让你的应用智能化',icon: `${prefix}images/icon-app.svg`,  url: '/next-sdk/guide/#让你的应用智能化' },
+          { text: '浏览器直接引入',icon: `${prefix}images/icon-browser.svg`,  url: '/next-sdk/guide/#浏览器直接引入' },
         ]
       },
       {
@@ -111,7 +115,7 @@ const nextDates = [
     nextDateLeft: [
       {
         title: 'TinyRobot',
-      icon: '/images/logo-active-tiny-robot.svg',
+      icon: `${prefix}images/logo-active-tiny-robot.svg`,
         desc: 'TinyRobot是符合OpenTiny Design 设计体系的 AI 组件库，提供了丰富的AI交互组件，助力开发者快速构建AI应用。'
       },
       {
@@ -140,8 +144,8 @@ const nextDates = [
         title: '指南',
         desc: 'TinyRobot是符合OpenTiny Design 设计体系的 AI 组件库，提供了丰富的AI交互组件，助力开发者快速构建AI应用。',
         links: [
-          { text: '安装',icon: '/images/icon-tool.svg', url: '/tiny-robot/guide/quick-start.html#安装' },
-          { text: '引入与使用',icon: '/images/icon-download.svg', url: '/tiny-robot/guide/quick-start.html#引入与使用' },
+          { text: '安装',icon: `${prefix}images/icon-tool.svg`, url: '/tiny-robot/guide/quick-start.html#安装' },
+          { text: '引入与使用',icon: `${prefix}images/icon-download.svg`, url: '/tiny-robot/guide/quick-start.html#引入与使用' },
         ]
       },
       {

.vitepress/theme/index.ts

@@ -86,6 +86,7 @@ function listenCodePlaygroundEvent() {
   if (typeof window === 'undefined' || window.__CODE_PLAYGROUND_LISTENED__) {
     return
   }
+  const route = useRoute();
 
   window.__CODE_PLAYGROUND_LISTENED__ = true
   document.addEventListener('code-playground', (event) => {
@@ -136,7 +137,8 @@ function listenCodePlaygroundEvent() {
       files,
       extraImports,
     })
-
-    window.open(`https://playground.opentiny.design/tiny-robot.html` + store.serialize(), '_blank')
+    if(route.path.includes('tiny-robot')){
+      window.open(`https://playground.opentiny.design/tiny-robot.html` + store.serialize(), '_blank')
+    }
   })
 }