docs: 文档更新 添加轮播图组件

- 引入vue3-carousel
- types抽离d.ts 需手动导入

docs/.vitepress/components/ImgSlider.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="img-slider">
+    <Carousel :autoplay="2000" :wrap-around="true">
+      <Slide v-for="{ src, alt } of imgSliderList" :key="src">
+        <img class="carousel__item" :src="src" :alt="alt" />
+      </Slide>
+    </Carousel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import type { ImgSliderList } from '../types'
+
+import 'vue3-carousel/dist/carousel.css'
+import { Carousel, Slide } from 'vue3-carousel'
+
+defineProps({
+  imgSliderList: {
+    type: Object as PropType<ImgSliderList>,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+.carousel__item {
+  width: 90%;
+}
+</style>

docs/.vitepress/components/Title.vue

@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
+import type { LinkList } from '../types'
 import Link from './Link.vue'
 
 const props = defineProps({

docs/.vitepress/theme/index.ts

@@ -1,16 +1,25 @@
+import type { EnhanceAppContext } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, watchEffect } from 'vue'
 import { inBrowser, useRouter } from 'vitepress'
 import mediumZoom from 'medium-zoom'
+
 import Title from '../components/Title.vue'
+import ImgSlider from '../components/ImgSlider.vue'
+
 import './index.css'
 
 export default {
   ...DefaultTheme,
-  enhanceApp(ctx) {
+  enhanceApp(ctx: EnhanceAppContext) {
+    // 使用默认主题的增强应用程序功能
     DefaultTheme.enhanceApp(ctx)
+
+    // 注册组件
     const { app } = ctx
     app.component('Title', Title)
+    app.component('ImgSlider', ImgSlider)
+    console.log(app)
   },
   setup() {
     const router = useRouter()

docs/.vitepress/type.d.ts

@@ -3,10 +3,3 @@ declare module '*.vue' {
   const componentOptions: ComponentOptions
   export default componentOptions
 }
-
-interface LinkItem {
-  content: string
-  target: string
-}
-
-type LinkList = LinkItem[]

docs/.vitepress/types/index.ts

@@ -0,0 +1,13 @@
+export interface LinkItem {
+  content: string
+  target: string
+}
+
+export type LinkList = LinkItem[]
+
+export interface ImgSliderItem {
+  src: string
+  alt?: string
+}
+
+export type ImgSliderList = ImgSliderItem[]