fix: modify the story frame path base on the base path

Author: Jimco

docs/.vitepress/config/en.ts

@@ -15,7 +15,7 @@ export const en = defineConfig({
             { text: 'Design', link: '/design/basic', activeMatch: '/design/' },
             {
                 text: 'Style',
-                link: '/style/start/install',
+                link: '/style/start/quick-start',
                 activeMatch: '/style/',
             },
         ],

docs/.vitepress/config/shared.ts

@@ -3,9 +3,10 @@ import { whyframe } from '@whyframe/core';
 import { whyframeVue } from '@whyframe/vue';
 
 const isProd = process.env.NODE_ENV === 'production';
+const base = !isProd ? '/' : '/responsive-toolkit/';
 
 export const shared = defineConfig({
-    base: !isProd ? '/' : '/responsive-toolkit/',
+    base,
 
     title: 'Responsive Toolkit',
     description:
@@ -31,7 +32,7 @@ export const shared = defineConfig({
                 /**
                  * vitepress doesn't support whyframe default html, so we need to use a custom one
                  */
-                defaultSrc: '/frames/default.html',
+                defaultSrc: `${base}frames/default.html`,
                 components: [{ name: 'Story', showSource: true }],
             }),
             whyframeVue({

docs/.vitepress/config/zh.ts

@@ -11,7 +11,7 @@ export const zh = defineConfig({
             { text: 'Design', link: '/zh/design/basic', activeMatch: '/zh/design/' },
             {
                 text: 'Style',
-                link: '/zh/style/setup',
+                link: '/zh/style/quick-start',
                 activeMatch: '/zh/style',
             },
         ],

docs/.vitepress/theme/components/Story/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { codeToHtml } from 'shiki';
-import { useData } from 'vitepress';
+import { useData, withBase } from 'vitepress';
 import { getWhyframeSource } from '@whyframe/core/utils';
 import { computed, ref, useTemplateRef, watch } from 'vue';
 import VueDraggableResizable from 'vue-draggable-resizable';
@@ -37,7 +37,7 @@ const props = defineProps({
     },
     src: {
         type: String,
-        default: '/frames/default.html',
+        default: withBase('/frames/default.html'),
     },
 
     defaultShowCode: {
@@ -131,7 +131,6 @@ watch(isVisible, (val) => {
                     data-why
                     class="story-iframe"
                     :title="title"
-                    :src="src"
                 >
                     <slot />
                 </iframe>