feat: modify image path and replace image (#42)

* fix: fix the issue where the path cannot be found

* feat: modify image path and replace image

Author: wuyiping0628

.vitepress/config.mts

@@ -38,7 +38,7 @@ export default defineConfig({
   outDir: 'dist',
   srcExclude: ['**/README*.md','**/develop-demo-en.md','**/theme-en.md'],
   base: process.env.VITEPRESS_BASE || '/',
-  head: [['link', { rel: 'icon', href: '/logo-mini.svg' }]],
+  head: [['link', { rel: 'icon', href: '/images/logo-mini.svg' }]],
   vite: {
     // 允许以大写扩展名结尾的图片/静态资源被当作资产处理，避免被 import-analyze 当作 JS 解析
     assetsInclude: ['**/*.{png,PNG,jpg,JPG,jpeg,JPEG,gif,GIF,webp,WEBP,svg,SVG}'],
@@ -69,7 +69,7 @@ export default defineConfig({
   },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
-    logo: '/logo-mini.svg',
+    logo: '/images/logo-mini.svg',
     siteTitle: 'OpenTiny NEXT',
     nav: [
       { text: '指南', link: '/tiny-robot/guide/quick-start', activeMatch: '/guide/' },

.vitepress/theme/components/CustomHeader.vue

@@ -9,8 +9,8 @@
             <img
               :src="
                 isDark
-                  ? '/logo-opentiny-next-text-dark.svg'
-                  : '/logo-opentiny-next-text.svg'
+                  ? '/images/logo-opentiny-next-text-dark.svg'
+                  : '/images/logo-opentiny-next-text.svg'
               "
               alt="OpenTiny NEXT"
               class="logo-icon"
@@ -138,8 +138,8 @@
               <img
                 :src="
                   isDark
-                    ? '/logo-opentiny-next-text-dark.svg'
-                    : '/logo-opentiny-next-text.svg'
+                    ? '/images/logo-opentiny-next-text-dark.svg'
+                    : '/images/logo-opentiny-next-text.svg'
                 "
                 alt="OpenTiny NEXT"
                 class="logo-icon"
@@ -455,29 +455,33 @@ const productTabs = computed(() => [
     key: "next-sdk",
     name: "NEXT-SDKs",
     link: `${prefix}next-sdk/guide`,
-    src: `${prefix}logo-${
+    src: `${prefix}images/logo-${
       activeProductTab.value === "next-sdk" ? "active" : "normal"
     }-next-sdk.svg`,
   },
   {
     key: "tiny-robot",
     name: "TinyRobot",
     link: `${prefix}tiny-robot/guide/quick-start`,
-    src: `${prefix}logo-${
+    src: `${prefix}images/logo-${
       activeProductTab.value === "tiny-robot" ? "active" : "normal"
     }-tiny-robot.svg`,
   },
   {
     key: "tiny-vue",
     name: "TinyVue",
     link: `${prefix}tiny-vue/guide/envpreparation-open`,
-    src: `${prefix}logo-active-next-sdk.svg`,
+    src: `${prefix}images/logo-${
+      activeProductTab.value === "tiny-vue" ? "active" : "normal"
+    }-tiny-vue.svg`,
   },
   {
     key: "tiny-engine",
     name: "TinyEngine",
     link: `${prefix}tiny-engine/engines/introduction`,
-    src: `${prefix}logo-active-next-sdk.svg`,
+    src: `${prefix}images/logo-${
+      activeProductTab.value === "tiny-engine" ? "active" : "normal"
+    }-tiny-engine.svg`,
   },
 ]);
 

.vitepress/theme/home/index.vue

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

.vitepress/theme/style.css

@@ -345,16 +345,16 @@ a.result:hover .titles .title .text mark{
   width: 24px;
   background-size: 16px 16px;
   opacity: 1;
-  background-image: url("../../public/icon-copy.svg");
+  background-image: url("../../public/images/icon-copy.svg");
 } 
 .vp-doc .vp-adaptive-theme button.copy.copied { 
-  background-image: url("../../public/icon-check-mark.svg");
+  background-image: url("../../public/images/icon-check-mark.svg");
 } 
 .vp-doc .vp-adaptive-theme button.copy.copied:hover { 
-  background-image: url("../../public/icon-check-mark.svg");
+  background-image: url("../../public/images/icon-check-mark.svg");
 } 
 .vp-doc .vp-adaptive-theme button.copy:hover{
-  background-image: url("../../public/icon-copy-hover.svg");
+  background-image: url("../../public/images/icon-copy-hover.svg");
 }
 
 .vp-doc .vp-adaptive-theme button.copy.copied::before ,.vp-doc .vp-adaptive-theme button.copy:hover.copied::before {
@@ -415,7 +415,7 @@ info{
   width: 100%;
 }
 .vp-doc .header-anchor:before{
-  content: url("../../public/header-anchor.svg");
+  content: url("../../public/images/header-anchor.svg");
   margin-bottom: 10px;
 }
 .vp-doc .header-anchor{
@@ -468,7 +468,7 @@ info{
   width: 12px;               
   height: 12px;            
   margin-right: 8px;       
-  background-image: url("../../public/icon-lists.svg");
+  background-image: url("../../public/images/icon-lists.svg");
   background-repeat: no-repeat;
   background-size: contain;  /* 或用 '12px 12px' 精确控制 */
   background-position: center;
@@ -526,16 +526,16 @@ info{
   transform: translateY(0);  /* 需要微调时改为 translateY(1px) / -1px */
 }
 .vp-doc .custom-block.info::before {
-  content: url("../../public/icon-info.svg");
+  content: url("../../public/images/icon-info.svg");
 }
 .vp-doc .custom-block.warning::before {
-  content: url("../../public/icon-warning.svg");
+  content: url("../../public/images/icon-warning.svg");
 }
 .vp-doc .custom-block.danger::before {
-  content: url("../../public/icon-error.svg");
+  content: url("../../public/images/icon-error.svg");
 }
 .vp-doc .custom-block.tip::before {
-  content: url("../../public/icon-success.svg");
+  content: url("../../public/images/icon-success.svg");
 }
 
 /* 暗色模式下全局样式 */
@@ -638,14 +638,14 @@ info{
   background-color: #1476FF;
 }
 .dark .vp-doc .vp-adaptive-theme button.copy { 
-  background-image: url("../../public/icon-copy-dark.svg");
+  background-image: url("../../public/images/icon-copy-dark.svg");
 
 } 
 .dark .vp-doc .vp-adaptive-theme button.copy:hover{
-  background-image: url("../../public/icon-copy-dark-hover.svg");
+  background-image: url("../../public/images/icon-copy-dark-hover.svg");
 }
 .dark .vp-doc .vp-adaptive-theme button.copy.copied ,.dark .vp-doc .vp-adaptive-theme button.copy.copied:hover { 
-  background-image: url("../../public/icon-check-mark.svg");
+  background-image: url("../../public/images/icon-check-mark.svg");
 } 
 .dark a.result:hover{
   background-color: #1a1a1a;
@@ -664,7 +664,7 @@ info{
  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .dark .outline-title::before {
-  background-image: url("../../public/icon-lists-dark.svg");
+  background-image: url("../../public/images/icon-lists-dark.svg");
 }
 .dark .vp-doc .custom-block.info{
   background: rgba(82, 145, 255, 0.1);
@@ -687,16 +687,16 @@ info{
   color: #5ba854;
 }
 .dark .vp-doc .custom-block.info::before {
-  content: url("../../public/icon-info-dark.svg");
+  content: url("../../public/images/icon-info-dark.svg");
 }
 .dark .vp-doc .custom-block.warning::before {
-  content: url("../../public/icon-warning-dark.svg");
+  content: url("../../public/images/icon-warning-dark.svg");
 }
 .dark .vp-doc .custom-block.danger::before {
-  content: url("../../public/icon-error-dark.svg");
+  content: url("../../public/images/icon-error-dark.svg");
 }
 .dark .vp-doc .custom-block.tip::before {
-  content: url("../../public/icon-success-dark.svg");
+  content: url("../../public/images/icon-success-dark.svg");
 }
 /* ===== 响应式布局 ===== */
 @media (min-width: 980px) {