Update docs

Author: Ayideyia

.vitepress/theme/components/HomeLayout.vue

@@ -6,6 +6,9 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 
+import GUIforClash from "/components/GUIforClash.vue";
+import GUIforSingBox from "/components/GUIforSingBox.vue";
+
 const modules = [Navigation, Pagination];
 </script>
 
@@ -20,10 +23,10 @@ const modules = [Navigation, Pagination];
           navigation
         >
           <SwiperSlide class="swiper-slide">
-            <iframe src="/apps/gfc/"></iframe>
+            <GUIforClash />
           </SwiperSlide>
           <SwiperSlide class="swiper-slide">
-            <iframe src="/apps/gfs/"></iframe>
+            <GUIforSingBox />
           </SwiperSlide>
         </Swiper>
       </div>
@@ -41,14 +44,6 @@ const modules = [Navigation, Pagination];
     align-items: center;
     padding: 40px;
   }
-  iframe {
-    width: 800px;
-    height: 540px;
-    border: none;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
-  }
 }
 
 @media screen and (max-width: 768px) {

components/GUIforClash.vue

@@ -0,0 +1,14 @@
+<template>
+  <iframe src="/apps/gfc/"></iframe>
+</template>
+
+<style scoped>
+iframe {
+  width: 800px;
+  height: 540px;
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
+}
+</style>

components/GUIforSingBox.vue

@@ -0,0 +1,14 @@
+<template>
+  <iframe src="/apps/gfs/"></iframe>
+</template>
+
+<style scoped>
+iframe {
+  width: 800px;
+  height: 540px;
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
+}
+</style>

en/guide/gfc/index.md

@@ -1,5 +1,9 @@
+<script setup>
+import GUIforClash from "/components/GUIforClash.vue";
+</script>
+
 # GUI.for.Clash
 
 A GUI client application for Clash / (mihomo / meta), project page, [GUI.for.Clash](https://github.com/GUI-for-Cores/GUI.for.Clash)
 
-![](/zh/resources/gfc/preview.png)
+<GUIforClash />

en/guide/gfs/index.md

@@ -1,5 +1,9 @@
+<script setup>
+import GUIforSingBox from "/components/GUIforSingBox.vue";
+</script>
+
 # GUI.for.SingBox
 
 A GUI client application for sing-box, project page, [GUI.for.SingBox](https://github.com/GUI-for-Cores/GUI.for.SingBox)
 
-![](/zh/resources/gfs/preview.png)
+<GUIforSingBox />

zh/guide/gfc/index.md

@@ -1,5 +1,9 @@
+<script setup>
+import GUIforClash from "/components/GUIforClash.vue";
+</script>
+
 # GUI.for.Clash
 
 一个 Clash / (mihomo / meta) 的 GUI 客户端，项目地址，[GUI.for.Clash](https://github.com/GUI-for-Cores/GUI.for.Clash)
 
-![](/zh/resources/gfc/preview.png)
+<GUIforClash />

zh/guide/gfs/index.md

@@ -1,5 +1,9 @@
+<script setup>
+import GUIforSingBox from "/components/GUIforSingBox.vue";
+</script>
+
 # GUI.for.SingBox
 
 一个 SingBox 的 GUI 客户端，项目地址，[GUI.for.SingBox](https://github.com/GUI-for-Cores/GUI.for.SingBox)
 
-![](/zh/resources/gfs/preview.png)
+<GUIforSingBox />