wui-components-v2 1.1.69 → 1.1.71

package/components/wui-menus1/components/banner-carousel.vue

@@ -1,320 +1,320 @@
-<script setup lang="ts">
-/**
- * BannerCarousel.vue
- * 原生实现的 Banner 轮播组件
- * 功能：自动播放、手动滑动切换、鼠标悬停暂停、分页器点击跳转
- */
-import { onMounted, onUnmounted, ref } from 'vue'
-
-/** 从 mockData 获取轮播数据 */
-const banners: any = [
-  {
-    id: 1,
-    title: '欢迎使用企业门户',
-    subtitle: '高效协同，智慧办公',
-    bgColor: 'bg-gradient-to-r from-indigo-500 to-purple-600',
-    icon: 'building-office',
-  },
-  {
-    id: 2,
-    title: '本周会议安排',
-    subtitle: '3场会议待参加',
-    bgColor: 'bg-gradient-to-r from-emerald-500 to-teal-600',
-    icon: 'calendar',
-  },
-  {
-    id: 3,
-    title: '系统升级通知',
-    subtitle: 'v2.5.0 新功能上线',
-    bgColor: 'bg-gradient-to-r from-orange-500 to-amber-600',
-    icon: 'sparkles',
-  },
-]
-
-/**
- * 图标映射表
- * 根据 banner.icon 字段映射对应的 Heroicons 组件
- */
-// const iconMap: Record<string, any> = {
-//   'building-office': BuildingOfficeIcon,
-//   'calendar': CalendarIcon,
-//   'sparkles': SparklesIcon
-// }
-
-/** 当前显示的轮播项索引 */
-const currentIndex = ref(0)
-
-/** 鼠标是否悬停在轮播区域 */
-const isHovered = ref(false)
-
-/** 是否正在拖动（手动滑动中） */
-const isDragging = ref(false)
-
-/** 拖动偏移量（px），用于实时跟随手指/鼠标移动 */
-const dragOffset = ref(0)
-
-/** 自动播放的定时器引用 */
-let autoplayTimer: ReturnType<typeof setInterval> | null = null
-
-/** 拖动开始时的 X 坐标 */
-let startX = 0
-
-/**
- * 启动自动播放
- * 每 3 秒切换到下一张，循环播放
- */
-function startAutoplay() {
-  if (autoplayTimer)
-    clearInterval(autoplayTimer)
-  autoplayTimer = setInterval(() => {
-    currentIndex.value = (currentIndex.value + 1) % banners.length
-  }, 10000)
-}
-
-/**
- * 停止自动播放
- * 清除定时器并置空引用
- */
-function stopAutoplay() {
-  if (autoplayTimer) {
-    clearInterval(autoplayTimer)
-    autoplayTimer = null
-  }
-}
-
-/**
- * 跳转到指定索引的轮播项
- * @param index 目标索引
- */
-function goToSlide(index: number) {
-  currentIndex.value = index
-}
-
-/**
- * 切换到下一张轮播项
- * 使用取模实现循环（最后一张 -> 第一张）
- */
-function nextSlide() {
-  currentIndex.value = (currentIndex.value + 1) % banners.length
-}
-
-/**
- * 切换到上一张轮播项
- * 使用取模实现循环（第一张 -> 最后一张）
- */
-function prevSlide() {
-  currentIndex.value = (currentIndex.value - 1 + banners.length) % banners.length
-}
-
-/**
- * 鼠标进入轮播区域
- * 停止自动播放
- */
-function onMouseEnter() {
-  isHovered.value = true
-  stopAutoplay()
-}
-
-/**
- * 拖动开始
- * 记录起始 X 坐标，重置拖动偏移量
- * @param clientX 鼠标/触摸的 X 坐标
- */
-function onDragStart(clientX: number) {
-  isDragging.value = true
-  startX = clientX
-  dragOffset.value = 0
-}
-
-/**
- * 拖动中
- * 实时更新 dragOffset，实现跟随效果
- * @param clientX 鼠标/触摸的当前 X 坐标
- */
-function onDragMove(clientX: number) {
-  if (!isDragging.value)
-    return
-  dragOffset.value = clientX - startX
-}
-
-/**
- * 拖动结束
- * 判断滑动方向和距离：
- * - 左滑 > 50px：切换下一张
- * - 右滑 > 50px：切换上一张
- * - 否则：回弹到原位
- * 拖动结束后恢复自动播放
- */
-function onDragEnd() {
-  if (!isDragging.value)
-    return
-  isDragging.value = false
-
-  const threshold = 50
-  if (dragOffset.value < -threshold) {
-    nextSlide()
-  }
-  else if (dragOffset.value > threshold) {
-    prevSlide()
-  }
-
-  dragOffset.value = 0
-  startAutoplay()
-}
-
-/** 触摸开始事件（移动端） */
-function onTouchStart(e: TouchEvent) {
-  onDragStart(e.touches[0]?.clientX ?? 0)
-}
-
-/** 触摸移动事件（移动端） */
-function onTouchMove(e: TouchEvent) {
-  onDragMove(e.touches[0]?.clientX ?? 0)
-}
-
-/** 触摸结束事件（移动端） */
-function onTouchEnd() {
-  onDragEnd()
-}
-
-/** 鼠标按下事件（桌面端） */
-function onMouseDown(e: MouseEvent) {
-  onDragStart(e.clientX)
-}
-
-/** 鼠标移动事件（桌面端拖动中） */
-function onMouseMove(e: MouseEvent) {
-  onDragMove(e.clientX)
-}
-
-/** 鼠标释放事件（桌面端拖动结束） */
-function onMouseUp() {
-  onDragEnd()
-}
-
-/**
- * 鼠标离开轮播区域
- * 如果正在拖动中则触发拖动结束
- * 恢复自动播放
- */
-function onMouseLeave() {
-  if (isDragging.value) {
-    onDragEnd()
-  }
-  isHovered.value = false
-  startAutoplay()
-}
-
-/** 组件挂载时启动自动播放 */
-onMounted(() => {
-  startAutoplay()
-})
-
-/** 组件卸载时停止自动播放，防止内存泄漏 */
-onUnmounted(() => {
-  stopAutoplay()
-})
-</script>
-
-<template>
-  <!--
-    外层容器：
-    - select-none：防止拖动时选中文本
-    - 监听 mouseenter/mouseleave 用于悬停暂停
-  -->
-  <view
-    class="mt-6 select-none overflow-hidden rounded-2xl pb-2"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-  >
-    <!--
-      轮播内容区：
-      - overflow-hidden：裁剪只显示当前 slide
-      - cursor-grab/active：拖动时显示抓取手势
-      - 监听 mousedown/mousemove/mouseup（桌面端）
-      - 监听 touchstart/touchmove/touchend（移动端）
-    -->
-    <view
-      class="cursor-grab overflow-hidden active:cursor-grabbing"
-      @mousedown="onMouseDown"
-      @mousemove="onMouseMove"
-      @mouseup="onMouseUp"
-      @mouseleave="onMouseLeave"
-      @touchstart="onTouchStart"
-      @touchmove="onTouchMove"
-      @touchend="onTouchEnd"
-    >
-      <!--
-        轮播轨道：
-        - flex：水平排列所有 slide
-        - transition-transform：
-          - 拖动中：transition-none（实时跟随，无动画）
-          - 正常切换：transition-transform duration-[600ms] ease（600ms 动画）
-        - translateX 计算：
-          - 基准位置：-${currentIndex * 100}%
-          - 拖动偏移：+ ${dragOffset}px
-      -->
-      <view
-        class="flex"
-        :class="isDragging ? 'transition-none' : 'transition-transform duration-[600ms] ease'"
-        :style="{ transform: `translateX(calc(-${currentIndex * 100}% + ${dragOffset}px))` }"
-      >
-        <!--
-          单个轮播项：
-          - w-full flex-shrink-0：每个 slide 占满宽度且不压缩
-        -->
-        <view
-          v-for="banner in banners"
-          :key="banner.id"
-          class="w-full flex-shrink-0 cursor-pointer"
-        >
-          <!--
-            Banner 内容卡片：
-            - 动态背景色（bgColor）
-            - h-36：固定高度
-            - flex items-center：垂直居中
-            - px-6：水平内边距
-            - rounded-2xl：圆角
-          -->
-          <view
-            :class="banner.bgColor"
-            class="h-36 flex items-center rounded-2xl px-6"
-          >
-            <!-- 左侧文字区域 -->
-            <view class="flex-1">
-              <h3 class="text-lg text-white font-semibold">
-                {{ banner.title }}
-              </h3>
-              <p class="mt-1 text-sm text-white/80">
-                {{ banner.subtitle }}
-              </p>
-            </view>
-
-            <!-- 右侧图标区域 -->
-            <view class="h-14 w-14 flex items-center justify-center rounded-full bg-white/20">
-              <!-- <component :is="iconMap[banner.icon]" class="w-8 h-8 text-white" /> -->
-              <wd-icon name="calendar" size="26px" />
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!--
-      分页器：
-      - flex justify-center gap-2：水平居中，dot 之间 8px 间距
-      - mt-4：与轮播内容保持间距
-    -->
-    <view class="mt-4 flex justify-center gap-2">
-      <view
-        v-for="(_, index) in banners"
-        :key="index"
-        class="h-1 w-1 cursor-pointer rounded-full transition-all duration-300"
-        :class="index === currentIndex
-          ? 'bg-white opacity-100'
-          : 'bg-white/50'"
-        @click="goToSlide(Number(index))"
-      />
-    </view>
-  </view>
-</template>
+<script setup lang="ts">
+/**
+ * BannerCarousel.vue
+ * 原生实现的 Banner 轮播组件
+ * 功能：自动播放、手动滑动切换、鼠标悬停暂停、分页器点击跳转
+ */
+import { onMounted, onUnmounted, ref } from 'vue'
+
+/** 从 mockData 获取轮播数据 */
+const banners: any = [
+  {
+    id: 1,
+    title: '欢迎使用企业门户',
+    subtitle: '高效协同，智慧办公',
+    bgColor: 'bg-gradient-to-r from-indigo-500 to-purple-600',
+    icon: 'building-office',
+  },
+  {
+    id: 2,
+    title: '本周会议安排',
+    subtitle: '3场会议待参加',
+    bgColor: 'bg-gradient-to-r from-emerald-500 to-teal-600',
+    icon: 'calendar',
+  },
+  {
+    id: 3,
+    title: '系统升级通知',
+    subtitle: 'v2.5.0 新功能上线',
+    bgColor: 'bg-gradient-to-r from-orange-500 to-amber-600',
+    icon: 'sparkles',
+  },
+]
+
+/**
+ * 图标映射表
+ * 根据 banner.icon 字段映射对应的 Heroicons 组件
+ */
+// const iconMap: Record<string, any> = {
+//   'building-office': BuildingOfficeIcon,
+//   'calendar': CalendarIcon,
+//   'sparkles': SparklesIcon
+// }
+
+/** 当前显示的轮播项索引 */
+const currentIndex = ref(0)
+
+/** 鼠标是否悬停在轮播区域 */
+const isHovered = ref(false)
+
+/** 是否正在拖动（手动滑动中） */
+const isDragging = ref(false)
+
+/** 拖动偏移量（px），用于实时跟随手指/鼠标移动 */
+const dragOffset = ref(0)
+
+/** 自动播放的定时器引用 */
+let autoplayTimer: ReturnType<typeof setInterval> | null = null
+
+/** 拖动开始时的 X 坐标 */
+let startX = 0
+
+/**
+ * 启动自动播放
+ * 每 3 秒切换到下一张，循环播放
+ */
+function startAutoplay() {
+  if (autoplayTimer)
+    clearInterval(autoplayTimer)
+  autoplayTimer = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % banners.length
+  }, 10000)
+}
+
+/**
+ * 停止自动播放
+ * 清除定时器并置空引用
+ */
+function stopAutoplay() {
+  if (autoplayTimer) {
+    clearInterval(autoplayTimer)
+    autoplayTimer = null
+  }
+}
+
+/**
+ * 跳转到指定索引的轮播项
+ * @param index 目标索引
+ */
+function goToSlide(index: number) {
+  currentIndex.value = index
+}
+
+/**
+ * 切换到下一张轮播项
+ * 使用取模实现循环（最后一张 -> 第一张）
+ */
+function nextSlide() {
+  currentIndex.value = (currentIndex.value + 1) % banners.length
+}
+
+/**
+ * 切换到上一张轮播项
+ * 使用取模实现循环（第一张 -> 最后一张）
+ */
+function prevSlide() {
+  currentIndex.value = (currentIndex.value - 1 + banners.length) % banners.length
+}
+
+/**
+ * 鼠标进入轮播区域
+ * 停止自动播放
+ */
+function onMouseEnter() {
+  isHovered.value = true
+  stopAutoplay()
+}
+
+/**
+ * 拖动开始
+ * 记录起始 X 坐标，重置拖动偏移量
+ * @param clientX 鼠标/触摸的 X 坐标
+ */
+function onDragStart(clientX: number) {
+  isDragging.value = true
+  startX = clientX
+  dragOffset.value = 0
+}
+
+/**
+ * 拖动中
+ * 实时更新 dragOffset，实现跟随效果
+ * @param clientX 鼠标/触摸的当前 X 坐标
+ */
+function onDragMove(clientX: number) {
+  if (!isDragging.value)
+    return
+  dragOffset.value = clientX - startX
+}
+
+/**
+ * 拖动结束
+ * 判断滑动方向和距离：
+ * - 左滑 > 50px：切换下一张
+ * - 右滑 > 50px：切换上一张
+ * - 否则：回弹到原位
+ * 拖动结束后恢复自动播放
+ */
+function onDragEnd() {
+  if (!isDragging.value)
+    return
+  isDragging.value = false
+
+  const threshold = 50
+  if (dragOffset.value < -threshold) {
+    nextSlide()
+  }
+  else if (dragOffset.value > threshold) {
+    prevSlide()
+  }
+
+  dragOffset.value = 0
+  startAutoplay()
+}
+
+/** 触摸开始事件（移动端） */
+function onTouchStart(e: TouchEvent) {
+  onDragStart(e.touches[0]?.clientX ?? 0)
+}
+
+/** 触摸移动事件（移动端） */
+function onTouchMove(e: TouchEvent) {
+  onDragMove(e.touches[0]?.clientX ?? 0)
+}
+
+/** 触摸结束事件（移动端） */
+function onTouchEnd() {
+  onDragEnd()
+}
+
+/** 鼠标按下事件（桌面端） */
+function onMouseDown(e: MouseEvent) {
+  onDragStart(e.clientX)
+}
+
+/** 鼠标移动事件（桌面端拖动中） */
+function onMouseMove(e: MouseEvent) {
+  onDragMove(e.clientX)
+}
+
+/** 鼠标释放事件（桌面端拖动结束） */
+function onMouseUp() {
+  onDragEnd()
+}
+
+/**
+ * 鼠标离开轮播区域
+ * 如果正在拖动中则触发拖动结束
+ * 恢复自动播放
+ */
+function onMouseLeave() {
+  if (isDragging.value) {
+    onDragEnd()
+  }
+  isHovered.value = false
+  startAutoplay()
+}
+
+/** 组件挂载时启动自动播放 */
+onMounted(() => {
+  startAutoplay()
+})
+
+/** 组件卸载时停止自动播放，防止内存泄漏 */
+onUnmounted(() => {
+  stopAutoplay()
+})
+</script>
+
+<template>
+  <!--
+    外层容器：
+    - select-none：防止拖动时选中文本
+    - 监听 mouseenter/mouseleave 用于悬停暂停
+  -->
+  <view
+    class="mt-6 select-none overflow-hidden rounded-2xl pb-2"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <!--
+      轮播内容区：
+      - overflow-hidden：裁剪只显示当前 slide
+      - cursor-grab/active：拖动时显示抓取手势
+      - 监听 mousedown/mousemove/mouseup（桌面端）
+      - 监听 touchstart/touchmove/touchend（移动端）
+    -->
+    <view
+      class="cursor-grab overflow-hidden active:cursor-grabbing"
+      @mousedown="onMouseDown"
+      @mousemove="onMouseMove"
+      @mouseup="onMouseUp"
+      @mouseleave="onMouseLeave"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      <!--
+        轮播轨道：
+        - flex：水平排列所有 slide
+        - transition-transform：
+          - 拖动中：transition-none（实时跟随，无动画）
+          - 正常切换：transition-transform duration-[600ms] ease（600ms 动画）
+        - translateX 计算：
+          - 基准位置：-${currentIndex * 100}%
+          - 拖动偏移：+ ${dragOffset}px
+      -->
+      <view
+        class="flex"
+        :class="isDragging ? 'transition-none' : 'transition-transform duration-[600ms] ease'"
+        :style="{ transform: `translateX(calc(-${currentIndex * 100}% + ${dragOffset}px))` }"
+      >
+        <!--
+          单个轮播项：
+          - w-full flex-shrink-0：每个 slide 占满宽度且不压缩
+        -->
+        <view
+          v-for="banner in banners"
+          :key="banner.id"
+          class="w-full flex-shrink-0 cursor-pointer"
+        >
+          <!--
+            Banner 内容卡片：
+            - 动态背景色（bgColor）
+            - h-36：固定高度
+            - flex items-center：垂直居中
+            - px-6：水平内边距
+            - rounded-2xl：圆角
+          -->
+          <view
+            :class="banner.bgColor"
+            class="h-36 flex items-center rounded-2xl px-6"
+          >
+            <!-- 左侧文字区域 -->
+            <view class="flex-1">
+              <h3 class="text-lg text-white font-semibold">
+                {{ banner.title }}
+              </h3>
+              <p class="mt-1 text-sm text-white/80">
+                {{ banner.subtitle }}
+              </p>
+            </view>
+
+            <!-- 右侧图标区域 -->
+            <view class="h-14 w-14 flex items-center justify-center rounded-full bg-white/20">
+              <!-- <component :is="iconMap[banner.icon]" class="w-8 h-8 text-white" /> -->
+              <wd-icon name="calendar" size="26px" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!--
+      分页器：
+      - flex justify-center gap-2：水平居中，dot 之间 8px 间距
+      - mt-4：与轮播内容保持间距
+    -->
+    <view class="mt-4 flex justify-center gap-2">
+      <view
+        v-for="(_, index) in banners"
+        :key="index"
+        class="h-1 w-1 cursor-pointer rounded-full transition-all duration-300"
+        :class="index === currentIndex
+          ? 'bg-white opacity-100'
+          : 'bg-white/50'"
+        @click="goToSlide(Number(index))"
+      />
+    </view>
+  </view>
+</template>