feat: resolve image loading and overall style issues (#6)

Author: wuyiping0628

.vitepress/theme/Home.vue

@@ -45,34 +45,34 @@
 
 const homeList = [
       {
-        icon: '/images/tiny-vue-logo-active.svg',
+        icon: 'images/tiny-vue-logo-active.svg',
         title: 'TinyVue',
         titleTip: 'vue组件库',
-        imgUrl: '/images/banner1.svg',
-        link: '/playground/vue-playground',
+        imgUrl: 'images/banner1.svg',
+        link: 'vue-playground',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
       {
-        icon: '/images/tiny-engine-logo-active.svg',
+        icon: 'images/tiny-engine-logo-active.svg',
         title: 'TinyEngine',
         titleTip: '低代码引擎',
-        imgUrl: '/images/banner2.svg',
-        link: '/playground/tiny-engine#/tiny-engine-editor',
+        imgUrl: 'images/banner2.svg',
+        link: 'tiny-engine#/tiny-engine-editor',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
       {
-        icon: '/images/next-sdk-logo-active.svg',
+        icon: 'images/next-sdk-logo-active.svg',
         title: 'NEXT-SDKs',
         titleTip: '智能应用开发工具包', 
-        imgUrl: '/images/banner3.svg',
+        imgUrl: 'images/banner3.svg',
         link: '',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
       {
-        icon: '/images/tiny-robot-logo-active.svg',
+        icon: 'images/tiny-robot-logo-active.svg',
         title: 'TinyRobot',
         titleTip: 'AI智能助手', 
-        imgUrl: '/images/banner4.svg',
+        imgUrl: 'images/banner4.svg',
         link: '',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },

.vitepress/theme/components/CustomHeader.vue

@@ -242,7 +242,7 @@ watch(
   top: 0;
   z-index: 50;
   width: 100%;
-  background-image: url('./images/bg-playground-home');
+  background-image: url('./images/bg-playground-home.png');
   background-size: cover;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);

.vitepress/theme/components/customContent.vue

@@ -12,6 +12,7 @@
         class="icon-wrapper"
         @mouseenter="showTip(idx)"
         @mouseleave="hideTip"
+        @click="changeIcon(idx)"
         style="position: relative"
       >
         <a :href="iconList.link" rel="noopener noreferrer">
@@ -27,7 +28,7 @@
       </div>
     </div>
     <div class="sidebar-mb" @click="showModal = true">
-      <img src="/images/menu.svg" class="menu-mb" />
+      <img src="./images/menu.svg" class="menu-mb" />
     </div>
     <div class="main-content">
       <label class="iframe-loader">
@@ -54,7 +55,7 @@
         <div class="home-logo-mb">
           <a href="/" class="logo-link">
             <img
-              :src="isDark ? '/images/logo2.svg' : '/images/logo2.svg'"
+              :src="isDark ? 'images/logo2.svg' : 'images/logo2.svg'"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -124,7 +125,7 @@
             class="home-link home-link-mb"
           >
             <img
-              :src="'/images/logo.svg'"
+              :src="'images/logo.svg'"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -150,46 +151,46 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useRoute } from "vitepress";
 const route = useRoute();
 
 const showModal = ref(false);
 
-const iconLists = [
+const iconLists = reactive([
   {
-    src: "/images/tiny-vue-logo.svg",
-    srcActive: "/images/tiny-vue-logo-active.svg",
+    src: "images/tiny-vue-logo.svg",
+    srcActive: "images/tiny-vue-logo-active.svg",
     isActive: true,
     title: "TinyVue",
     titleTip: "vue组件库",
-    link: "/playground/vue-playground",
+    link: "vue-playground",
   },
   {
-    src: "/images/tiny-engine-logo.svg",
-    srcActive: "/images/tiny-engine-logo-active.svg",
+    src: "images/tiny-engine-logo.svg",
+    srcActive: "images/tiny-engine-logo-active.svg",
     isActive: false,
     title: "TinyEngine",
     titleTip: "低代码引擎",
-    link: "/playground/tiny-engine#/tiny-engine-editor",
+    link: "tiny-engine#/tiny-engine-editor",
   },
   {
-    src: "/images/next-sdk-logo.svg",
-    srcActive: "/images/next-sdk-logo-active.svg",
+    src: "images/next-sdk-logo.svg",
+    srcActive: "images/next-sdk-logo-active.svg",
     isActive: false,
     title: "NEXT-SDKs",
     link: "",
     titleTip: "智能应用工具包",
   },
   {
-    src: "/images/tiny-robot-logo.svg",
-    srcActive: "/images/tiny-robot-logo-active.svg",
+    src: "images/tiny-robot-logo.svg",
+    srcActive: "images/tiny-robot-logo-active.svg",
     isActive: false,
     title: "TinyRobot",
     link: "",
     titleTip: "AI智能助手",
   },
-];
+]);
 
 const tipIdx = ref(null);
 const linkUrl = ref("https://opentiny.design/vue-playground");
@@ -199,6 +200,11 @@ function showTip(idx) {
 const hideTip = () => {
   tipIdx.value = null;
 };
+const changeIcon = (idx) => {
+  iconLists.forEach((icon, index) => {
+    icon.isActive = index === idx;
+  });
+};
 
 interface TabItem {
   key: string;
@@ -327,7 +333,6 @@ watch(
 .main-content {
   flex: 1;
   min-width: 0;
-  height: 100vh;
 }
 .iframe-loader {
   display: block;

.vitepress/theme/style.css

@@ -1,9 +1,10 @@
 .opentiny-playground-layout {
-  background-image: url('./images/bg-playground-home');
+  background-image: url('./images/bg-playground-home.png');
+  background-color: #f5f5f5;
 }
 
 .opentiny-playground-layout .is-home {
-  background-image: url('./images/bg-playground-home');
+  height: 800px;
 }
 
 .VPNav .container {
@@ -14,6 +15,14 @@
   max-width: 100%;
 }
 
+.VPHome {
+  margin-bottom: 0 !important;
+}
+
+.Layout {
+  min-height: calc(100vh - 64px) !important;
+}
+
 /* ===== VitePress 导航覆盖 ===== */
 .VPNav .container {
   width: unset;