feat(projects): 添加swiper插件

package.json

@@ -29,6 +29,7 @@
     "naive-ui": "^2.20.2",
     "pinia": "^2.0.2",
     "qs": "^6.10.1",
+    "swiper": "^7.2.0",
     "vditor": "^3.8.7",
     "vue": "^3.2.20",
     "vue-router": "^4.0.11",

pnpm-lock.yaml

@@ -43,6 +43,7 @@ specifiers:
   qs: ^6.10.1
   rollup-plugin-visualizer: ^5.5.2
   sass: ^1.43.4
+  swiper: ^7.2.0
   typescript: ^4.4.4
   unplugin-icons: ^0.12.18
   unplugin-vue-components: ^0.17.2
@@ -70,6 +71,7 @@ dependencies:
   naive-ui: registry.npmmirror.com/naive-ui/2.20.2_eslint@8.2.0+vue@3.2.20
   pinia: registry.npmmirror.com/pinia/2.0.2_typescript@4.4.4+vue@3.2.20
   qs: 6.10.1
+  swiper: registry.npmmirror.com/swiper/7.2.0
   vditor: registry.npmmirror.com/vditor/3.8.7
   vue: registry.npmmirror.com/vue/3.2.20
   vue-router: registry.nlark.com/vue-router/4.0.11_vue@3.2.20
@@ -5724,6 +5726,14 @@ packages:
     version: 1.2.0
     engines: {node: '>=0.10.0'}
 
+  registry.npmmirror.com/dom7/4.0.1:
+    resolution: {integrity: sha1-ghIJ3xv9+X3YK1FW5Q98tms/Fmw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dom7/download/dom7-4.0.1.tgz}
+    name: dom7
+    version: 4.0.1
+    dependencies:
+      ssr-window: registry.npmmirror.com/ssr-window/4.0.1
+    dev: false
+
   registry.npmmirror.com/downloadjs/1.4.7:
     resolution: {integrity: sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/downloadjs/download/downloadjs-1.4.7.tgz}
     name: downloadjs
@@ -6489,6 +6499,12 @@ packages:
       readable-stream: registry.nlark.com/readable-stream/3.6.0
     dev: true
 
+  registry.npmmirror.com/ssr-window/4.0.1:
+    resolution: {integrity: sha1-UUvyyoGVL2P+iOiwxiOiP5D3/rM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ssr-window/download/ssr-window-4.0.1.tgz}
+    name: ssr-window
+    version: 4.0.1
+    dev: false
+
   registry.npmmirror.com/string-width/4.2.2:
     resolution: {integrity: sha1-2v1PlVmnWFz7pSnGoKT3NIjr1MU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/string-width/download/string-width-4.2.2.tgz}
     name: string-width
@@ -6547,6 +6563,17 @@ packages:
       ansi-regex: registry.nlark.com/ansi-regex/5.0.1
     dev: true
 
+  registry.npmmirror.com/swiper/7.2.0:
+    resolution: {integrity: sha1-quK7djJ5hGer1cGrPiRBWYpw29c=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/swiper/download/swiper-7.2.0.tgz}
+    name: swiper
+    version: 7.2.0
+    engines: {node: '>= 4.7.0'}
+    requiresBuild: true
+    dependencies:
+      dom7: registry.npmmirror.com/dom7/4.0.1
+      ssr-window: registry.npmmirror.com/ssr-window/4.0.1
+    dev: false
+
   registry.npmmirror.com/type-fest/0.18.1:
     resolution: {integrity: sha1-20vBUaSiz07r+a3V23VQjbbMhB8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/type-fest/download/type-fest-0.18.1.tgz}
     name: type-fest

src/components/custom/GithubLink/index.vue

@@ -1,13 +1,10 @@
 <template>
-  <p>
-    <span>github地址：</span>
-    <a class="text-blue-500" :href="link" target="_blank">
-      {{ link }}
-    </a>
-  </p>
+  <web-site-link label="github地址：" :link="link" />
 </template>
 
 <script setup lang="ts">
+import WebSiteLink from '../WebSiteLink/index.vue';
+
 interface Props {
   /** github链接 */
   link: string;

src/components/custom/WebSiteLink/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <p>
+    <span>{{ label }}</span>
+    <a class="text-blue-500" :href="link" target="_blank">
+      {{ link }}
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  /** 网址名称 */
+  label: string;
+  /** 网址链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>

src/components/custom/index.ts

@@ -3,6 +3,7 @@ import IconClose from './IconClose/index.vue';
 import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
 import BetterScroll from './BetterScroll/index.vue';
+import WebSiteLink from './WebSiteLink/index.vue';
 import GithubLink from './GithubLink/index.vue';
 
-export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, GithubLink };
+export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, WebSiteLink, GithubLink };

src/enum/route.ts

@@ -19,6 +19,7 @@ export enum EnumRoutePath {
   'component_editor' = '/component/editor',
   'component_editor_quill' = '/component/editor/quill',
   'component_editor_markdown' = '/component/editor/markdown',
+  'component_swiper' = '/component/swiper',
   'multi-menu' = '/multi-menu',
   'multi-menu_first' = '/multi-menu/first',
   'multi-menu_first_second' = '/multi-menu/first/second',
@@ -50,6 +51,7 @@ export enum EnumRouteTitle {
   'component_editor' = '编辑器',
   'component_editor_quill' = '富文本编辑器',
   'component_editor_markdown' = 'markdown编辑器',
+  'component_swiper' = 'Swiper插件',
   'multi-menu' = '多级菜单',
   'multi-menu_first' = '一级菜单',
   'multi-menu_first_second' = '二级菜单',

src/layouts/BasicLayout/index.vue

@@ -1,21 +1,16 @@
 <template>
   <n-layout class="h-full" has-sider>
-    <global-sider v-if="theme.isVerticalNav" :z-index="3" />
-    <global-header v-if="isHorizontalMix" :z-index="4" />
+    <global-sider v-if="theme.isVerticalNav" :z-index="13" />
+    <global-header v-if="isHorizontalMix" :z-index="14" />
     <div class="flex-1-hidden flex h-full">
-      <global-sider v-if="isHorizontalMix" :z-index="3" />
-      <n-scrollbar
-        ref="scrollbar"
-        class="h-full"
-        :x-scrollable="true"
-        :content-class="routeProps.fullPage ? 'h-full' : ''"
-      >
+      <global-sider v-if="isHorizontalMix" :z-index="13" />
+      <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
         <div
           class="inline-flex-col-stretch w-full"
           :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
         >
-          <global-header v-if="!isHorizontalMix" :z-index="2" />
-          <global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
+          <global-header v-if="!isHorizontalMix" :z-index="12" />
+          <global-tab v-if="theme.multiTabStyle.visible" :z-index="11" />
           <global-content />
           <global-footer />
         </div>

src/layouts/BlankLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
+  <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
     <div class="inline-block wh-full bg-[#F6F9F8]">
       <router-view v-slot="{ Component, route: itemRoute }">
         <transition :name="theme.pageAnimateType" mode="out-in" appear>

src/main.ts

@@ -30,4 +30,5 @@ async function setupApp() {
 }
 
 setupPlugins();
+
 setupApp();

src/plugins/assets.ts

@@ -1,5 +1,8 @@
 import 'virtual:windi.css';
 import '../styles/css/global.css';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 
 /** 引入静态资源 */
 export default function setupAssets() {}

src/router/modules/component.ts

@@ -6,11 +6,13 @@ import ComponentMap from '@/views/component/map/index.vue';
 import ComponentVideo from '@/views/component/video/index.vue';
 import EditorQuill from '@/views/component/editor/quill/index.vue';
 import EditorMarkdown from '@/views/component/editor/markdown/index.vue';
+import ComponentSwiper from '@/views/component/swiper/index.vue';
 
 setRouterCacheName(ComponentMap, ROUTE_NAME_MAP.get('component_map'));
 setRouterCacheName(ComponentVideo, ROUTE_NAME_MAP.get('component_video'));
 setRouterCacheName(EditorQuill, ROUTE_NAME_MAP.get('component_editor_quill'));
 setRouterCacheName(EditorMarkdown, ROUTE_NAME_MAP.get('component_editor_markdown'));
+setRouterCacheName(ComponentSwiper, ROUTE_NAME_MAP.get('component_swiper'));
 
 const COMPONENT: CustomRoute = {
   name: ROUTE_NAME_MAP.get('component'),
@@ -75,6 +77,15 @@ const COMPONENT: CustomRoute = {
           }
         }
       ]
+    },
+    {
+      name: ROUTE_NAME_MAP.get('component_swiper'),
+      path: EnumRoutePath.component_swiper,
+      component: ComponentSwiper,
+      meta: {
+        requiresAuth: true,
+        title: EnumRouteTitle.component_swiper
+      }
     }
   ]
 };

src/views/component/map/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden">
+  <div>
     <n-card title="地图插件" class="h-full shadow-sm rounded-16px" content-style="overflow:hidden">
       <n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
         <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
 import { NCard, NTabs, NTabPane } from 'naive-ui';
-import { BaiduMap, GaodeMap, TencentMap } from './components';
+import { GaodeMap, TencentMap } from './components';
 
 interface Map {
   id: string;
@@ -22,7 +22,6 @@ interface Map {
 }
 
 const maps: Map[] = [
-  { id: 'baidu', label: '百度地图', component: BaiduMap },
   { id: 'gaode', label: '高德地图', component: GaodeMap },
   { id: 'tencent', label: '腾讯地图', component: TencentMap }
 ];

src/views/component/swiper/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <n-card title="Swiper插件" class="shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <github-link link="https://github.com/nolimits4web/swiper" />
+        <web-site-link label="vue3版文档地址：" link="https://swiperjs.com/vue" />
+        <web-site-link label="插件demo地址：" link="https://swiperjs.com/demos" />
+      </n-space>
+      <n-space :vertical="true">
+        <div v-for="item in swiperExample" :key="item.id">
+          <h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
+          <swiper v-bind="item.options">
+            <swiper-slide v-for="i in 5" :key="i">
+              <div class="flex-center h-240px border-1px border-[#999] text-18px font-bold">Slide{{ i }}</div>
+            </swiper-slide>
+          </swiper>
+        </div>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NSpace } from 'naive-ui';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import type { SwiperOptions } from 'swiper';
+import { WebSiteLink, GithubLink } from '@/components';
+
+type SwiperExampleOptions = Pick<
+  SwiperOptions,
+  | 'navigation'
+  | 'pagination'
+  | 'scrollbar'
+  | 'slidesPerView'
+  | 'slidesPerGroup'
+  | 'spaceBetween'
+  | 'direction'
+  | 'loop'
+  | 'loopFillGroupWithBlank'
+>;
+
+interface SwiperExample {
+  id: number;
+  label: string;
+  options: Partial<SwiperExampleOptions>;
+}
+
+SwiperCore.use([Navigation, Pagination]);
+
+const swiperExample: SwiperExample[] = [
+  { id: 0, label: 'Default', options: {} },
+  {
+    id: 1,
+    label: 'Navigation',
+    options: {
+      navigation: true
+    }
+  },
+  {
+    id: 2,
+    label: 'Pagination',
+    options: {
+      pagination: true
+    }
+  },
+  {
+    id: 3,
+    label: 'Pagination dynamic',
+    options: {
+      pagination: { dynamicBullets: true }
+    }
+  },
+  {
+    id: 4,
+    label: 'Pagination progress',
+    options: {
+      navigation: true,
+      pagination: {
+        type: 'progressbar'
+      }
+    }
+  },
+  {
+    id: 5,
+    label: 'Pagination fraction',
+    options: {
+      navigation: true,
+      pagination: {
+        type: 'fraction'
+      }
+    }
+  },
+  {
+    id: 6,
+    label: 'Slides per view',
+    options: {
+      pagination: {
+        clickable: true
+      },
+      slidesPerView: 3,
+      spaceBetween: 30
+    }
+  },
+  {
+    id: 7,
+    label: 'Infinite loop',
+    options: {
+      navigation: true,
+      pagination: {
+        clickable: true
+      },
+      loop: true
+    }
+  }
+];
+</script>
+<style scoped></style>