refactor: 优化YlSwiper组件样式和功能

1. 统一颜色值为小写十六进制格式
2. 调整代码格式和缩进
3. 优化分页指示器样式
4. 移除未使用的导航配置

src/components/YlSwiper/Index.vue

@@ -86,7 +86,7 @@ const navigationConfig = computed(() => {
   if (hasCustomNavButtons.value) {
     return false;
   }
-  
+
   // 否则使用配置的导航按钮设置
   if (navigation.value === true) {
     return {};
@@ -164,7 +164,8 @@ defineExpose({
         <el-icon :size="24"><arrow-left /></el-icon>
       </slot>
     </div>
-    
+
+    <!-- :navigation="navigationConfig" -->
     <swiper-container
       ref="swiperRef"
       :slides-per-view="slidesPerView"
@@ -174,7 +175,6 @@ defineExpose({
       :loop="loop"
       :autoplay="autoplayConfig"
       :pagination="paginationConfig"
-      :navigation="navigationConfig"
       :breakpoints="breakpoints"
       :allow-touch-move="allowTouchMove"
       @swiperprogress="onProgress"
@@ -194,19 +194,21 @@ defineExpose({
         <slot></slot>
       </template>
     </swiper-container>
-    
+
     <!-- 导航按钮（右） -->
     <div v-if="navigation" class="yl-swiper-button-next" @click="slideNext">
       <slot name="nextButton">
         <el-icon :size="24"><arrow-right /></el-icon>
       </slot>
     </div>
-    
+
     <!-- 自定义分页指示器 -->
     <div v-if="pagination" class="yl-swiper-pagination">
       <slot name="pagination">
-        <div 
-          v-for="(_, index) in slides && slides.length ? slides : (swiperInstance?.value?.slides || [])" 
+        <div
+          v-for="(_, index) in slides && slides.length
+            ? slides
+            : swiperInstance?.value?.slides || []"
           :key="index"
           class="yl-swiper-pagination-bullet"
           :class="{ 'is-active': swiperInstance?.value?.activeIndex === index }"
@@ -222,7 +224,7 @@ defineExpose({
   width: 100%;
   position: relative;
   overflow: hidden;
-  
+
   .yl-swiper-button-prev,
   .yl-swiper-button-next {
     position: absolute;
@@ -234,15 +236,15 @@ defineExpose({
     align-items: center;
     justify-content: center;
   }
-  
+
   .yl-swiper-button-prev {
     left: 10px;
   }
-  
+
   .yl-swiper-button-next {
     right: 10px;
   }
-  
+
   .yl-swiper-button-prev,
   .yl-swiper-button-next {
     width: 32px;
@@ -253,9 +255,9 @@ defineExpose({
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-    color: #409EFF;
+    color: #409eff;
   }
-  
+
   .yl-swiper-pagination {
     position: absolute;
     bottom: 10px;
@@ -266,7 +268,7 @@ defineExpose({
     align-items: center;
     gap: 8px;
     z-index: 10;
-    
+
     .yl-swiper-pagination-bullet {
       width: 8px;
       height: 8px;
@@ -274,9 +276,9 @@ defineExpose({
       background-color: rgba(0, 0, 0, 0.2);
       cursor: pointer;
       transition: all 0.3s;
-      
+
       &.is-active {
-        background-color: #409EFF;
+        background-color: #409eff;
         width: 16px;
         border-radius: 4px;
       }