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[]

docs/project/ClipboardManager/index.md

@@ -16,6 +16,15 @@ navbar: false
       { content: '🚚 更新日志', target: './log/' },
     ]
   }
+  const imgSliders = [
+    { src: './assets/11.png' },
+    { src: './assets/22.png' },
+    { src: './assets/33.png' },
+    { src: './assets/44.png' },
+    { src: './assets/55.png' },
+    { src: './assets/66.png' },
+    { src: './assets/77.png' },
+  ]
 </script>
 
 <Title v-bind="titleInfo" />
@@ -37,10 +46,9 @@ navbar: false
 - ✅ 优雅的界面动效与交互 跟随系统的深色模式
 - ✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···
 
---------
+<ImgSlider :imgSliderList="imgSliders" />
 
-![](./assets/hero-1.png)
+--------
-![](./assets/hero-2.png)
 
 ## 📚 安装方式
 

package.json

@@ -10,6 +10,7 @@
     "vue": "^3.2.45"
   },
   "dependencies": {
-    "medium-zoom": "^1.0.8"
+    "medium-zoom": "^1.0.8",
+    "vue3-carousel": "^0.2.9"
   }
 }