feat: save

packages/web/src/pages/index.vue

@@ -37,12 +37,36 @@
               </div>
 
             </swiper-slide>
-            <!-- <div class="swiper-button-prev">
-              <button @click="swiperInstance.slidePrev()">Prev</button>
+            <div class=" flex flex-row items-center justify-center m-t-[30px] ">
+              <div class="swiper-button-prev">
+                <!-- <button @click="handlePrev">Prev</button> -->
+                <n-icon :class="{ disable: activeIndex === 0 }" class="icon" size="32" @click="handlePrev"
+                  color="#0661C9">
+                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    viewBox="0 0 32 32">
+                    <defs></defs>
+                    <path
+                      d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm8 15H11.85l5.58 5.573L16 24l-8-8l8-8l1.43 1.393L11.85 15H24z">
+                    </path>
+                  </svg>
+
+                </n-icon>
               </div>
               <div class="swiper-button-next">
-                <button @click="swiperInstance.slideNext()">next</button>
-              </div> -->
+                <n-icon :class="{ disable: activeIndex === (item.children.length - item.grid) }" class="icon" size="32"
+                  @click="handleNext" color="#0661C9">
+                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    viewBox="0 0 32 32">
+                    <defs></defs>
+                    <path
+                      d="M2 16A14 14 0 1 0 16 2A14 14 0 0 0 2 16zm6-1h12.15l-5.58-5.607L16 8l8 8l-8 8l-1.43-1.427L20.15 17H8z">
+                    </path>
+                  </svg>
+                </n-icon>
+                <!-- <button @click="handleNext">next</button> -->
+              </div>
+            </div>
+
           </swiper>
         </template>
 
@@ -141,14 +165,15 @@ layout: "default"
 }
 </route>
 <script setup lang="ts">
-import { NH1, NH5, NGrid, NGi } from 'naive-ui'
+import { NH1, NH5, NIcon, NGrid, NGi } from 'naive-ui'
 import { getMenuList, type ArticleDetailType } from '@/api'
 import type { MenuItem } from '@/api'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css'
 import router from '@/plugins/router.ts'
 const { t } = useI18n()
-// import { useSwiper } from 'swiper/vue';
+
+
 
 const otherstyleEnum = [
   {
@@ -163,6 +188,7 @@ const otherstyleEnum = [
 
 const list = ref<MenuItem[]>([])
 const swiperInstance = ref();
+const activeIndex = ref(0)
 getMenuList().then((data) => {
   if (data.data) {
     list.value = data.data
@@ -170,13 +196,13 @@ getMenuList().then((data) => {
 })
 
 const onSwiper = (swiper: unknown) => {
-  console.log(swiper)
-  swiperInstance.value = swiper
-}
-const onSlideChange = (index: number) => {
-  console.log('slide change', index)
+  if (!swiperInstance.value) {
+    console.log(swiper)
+    swiperInstance.value = swiper
+  }
 }
 
+
 const handleToDoc = (child: ArticleDetailType) => {
   const { articleId, categoryId } = child
   console.log("handleToDoc", child)
@@ -193,6 +219,19 @@ const handleToMore = (item: ArticleDetailType) => {
     router.push({ path: `/showcate/${cateId}` })
   }
 }
+const onSlideChange = (swiper) => {
+  console.log('slide change', swiper);
+  activeIndex.value = swiper.activeIndex
+};
+const handlePrev = () => {
+  console.log('handlePrev')
+  swiperInstance.value.slidePrev()
+}
+const handleNext = () => {
+  console.log('handleNext')
+  swiperInstance.value.slideNext()
+
+}
 </script>
 
 <style lang="scss" scoped>
@@ -200,6 +239,20 @@ const handleToMore = (item: ArticleDetailType) => {
   background: rgba(255, 255, 255, 0.5);
 }
 
+.icon {
+  color: #0661C9;
+  margin: 0 5px;
+
+  &.disable {
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .cover {
   background-repeat: no-repeat;
   background-position: center top;