little-dizzy 2.3.0 → 2.5.0

package/src/components/Carousel.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="ld-carousel" :class="{ 'ld-carousel--vertical': direction === 'vertical' }" :style="{ height: height }">
+    <div class="carousel-container" :style="containerStyle">
+      <div v-for="(item, index) in items" :key="index" class="carousel-slide"
+        :class="{ active: index === currentIndex }">
+        <slot name="item" :item="item" :index="index">
+          <img v-if="item.image" :src="item.image" :alt="item.title || ''" />
+          <div v-if="item.title" class="slide-title">{{ item.title }}</div>
+        </slot>
+      </div>
+    </div>
+
+    <!-- 指示器 -->
+    <div v-if="showIndicators" class="carousel-indicators">
+      <span v-for="(_, index) in items" :key="index" class="indicator" :class="{ active: index === currentIndex }"
+        @click="goTo(index)" />
+    </div>
+
+    <!-- 箭头 -->
+    <template v-if="showArrows">
+      <button class="carousel-arrow prev" @click="prev">
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <path fill="currentColor" :d="direction === 'vertical'
+            ? 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'
+            : 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'" />
+        </svg>
+      </button>
+      <button class="carousel-arrow next" @click="next">
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <path fill="currentColor" :d="direction === 'vertical'
+            ? 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'
+            : 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'" />
+        </svg>
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+defineOptions({
+  name: 'Carousel'
+})
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: String,
+    default: '300px'
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['horizontal', 'vertical'].includes(val)
+  },
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  interval: {
+    type: Number,
+    default: 3000
+  },
+  showIndicators: {
+    type: Boolean,
+    default: true
+  },
+  showArrows: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const currentIndex = ref(0)
+let timer = null
+
+const containerStyle = computed(() => {
+  const offset = currentIndex.value * 100
+  return props.direction === 'vertical'
+    ? { transform: `translateY(-${offset}%)` }
+    : { transform: `translateX(-${offset}%)` }
+})
+
+const next = () => {
+  currentIndex.value = (currentIndex.value + 1) % props.items.length
+  emit('change', currentIndex.value)
+}
+
+const prev = () => {
+  currentIndex.value = (currentIndex.value - 1 + props.items.length) % props.items.length
+  emit('change', currentIndex.value)
+}
+
+const goTo = (index) => {
+  currentIndex.value = index
+  emit('change', currentIndex.value)
+}
+
+const startAutoplay = () => {
+  if (props.autoplay && props.items.length > 1) {
+    timer = setInterval(next, props.interval)
+  }
+}
+
+const stopAutoplay = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+onMounted(() => {
+  startAutoplay()
+})
+
+onUnmounted(() => {
+  stopAutoplay()
+})
+
+defineExpose({
+  next,
+  prev,
+  goTo,
+  currentIndex
+})
+</script>
+
+<style scoped>
+.ld-carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ld-color-bg-secondary, #f5f5f5);
+}
+
+.carousel-container {
+  display: flex;
+  height: 100%;
+  transition: transform 0.5s ease;
+}
+
+.carousel-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slide-title {
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #fff;
+  font-size: 18px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.indicator.active {
+  background: #fff;
+  width: 24px;
+  border-radius: 4px;
+}
+
+.carousel-arrow {
+  position: absolute;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.carousel-arrow:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.carousel-arrow.prev {
+  left: -50px;
+  transform: translateY(-50%);
+}
+
+.carousel-arrow.next {
+  right: -50px;
+  transform: translateY(-50%);
+}
+
+.ld-carousel:hover .carousel-arrow.prev {
+  left: 12px;
+}
+
+.ld-carousel:hover .carousel-arrow.next {
+  right: 12px;
+}
+
+/* 垂直方向样式 */
+.ld-carousel--vertical .carousel-container {
+  flex-direction: column;
+}
+
+.ld-carousel--vertical .carousel-slide {
+  width: 100%;
+  height: 100%;
+}
+
+.ld-carousel--vertical .carousel-indicators {
+  flex-direction: column;
+  right: 12px;
+  top: 50%;
+  left: auto;
+  bottom: auto;
+  transform: translateY(-50%);
+}
+
+.ld-carousel--vertical .indicator.active {
+  width: 8px;
+  height: 24px;
+}
+
+.ld-carousel--vertical .carousel-arrow {
+  left: 50%;
+  right: auto;
+}
+
+.ld-carousel--vertical .carousel-arrow.prev {
+  top: -50px;
+  bottom: auto;
+  transform: translateX(-50%);
+}
+
+.ld-carousel--vertical .carousel-arrow.next {
+  top: auto;
+  bottom: -50px;
+  transform: translateX(-50%);
+}
+
+.ld-carousel--vertical:hover .carousel-arrow.prev {
+  left: 50%;
+  top: 12px;
+}
+
+.ld-carousel--vertical:hover .carousel-arrow.next {
+  right: auto;
+  bottom: 12px;
+}
+</style>

package/src/components/Loading.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ld-loading" :class="[`ld-loading--${type}`, { 'ld-loading--fullscreen': fullscreen }]">
+    <!-- Spinner -->
+    <template v-if="type === 'spinner'">
+      <div class="spinner" :style="spinnerStyle">
+        <div v-for="i in 12" :key="i" class="spinner-blade" />
+      </div>
+    </template>
+
+    <!-- Dots -->
+    <template v-else-if="type === 'dots'">
+      <div class="dots">
+        <span v-for="i in 3" :key="i" class="dot" :style="{ background: color }" />
+      </div>
+    </template>
+
+    <!-- Ring -->
+    <template v-else-if="type === 'ring'">
+      <div class="ring" :style="ringStyle">
+        <div class="ring-inner" />
+      </div>
+    </template>
+
+    <!-- Pulse -->
+    <template v-else-if="type === 'pulse'">
+      <div class="pulse" :style="{ background: color, width: size, height: size }" />
+    </template>
+
+    <!-- Bars -->
+    <template v-else-if="type === 'bars'">
+      <div class="bars">
+        <span v-for="i in 5" :key="i" class="bar" :style="{ background: color }" />
+      </div>
+    </template>
+
+    <!-- 文字 -->
+    <div v-if="text" class="loading-text">{{ text }}</div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'Loading'
+})
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'spinner',
+    validator: (val) => ['spinner', 'dots', 'ring', 'pulse', 'bars'].includes(val)
+  },
+  size: {
+    type: String,
+    default: '40px'
+  },
+  color: {
+    type: String,
+    default: 'var(--ld-color-primary, #6366f1)'
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const spinnerStyle = computed(() => ({
+  width: props.size,
+  height: props.size,
+  '--spinner-color': props.color
+}))
+
+const ringStyle = computed(() => ({
+  width: props.size,
+  height: props.size,
+  '--ring-color': props.color
+}))
+</script>
+
+<style scoped>
+.ld-loading {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.ld-loading--fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ld-loading-fullscreen-bg, rgba(255, 255, 255, 0.9));
+  z-index: 9999;
+}
+
+.loading-text {
+  color: var(--ld-color-text-secondary, #666);
+  font-size: 14px;
+}
+
+/* Spinner */
+.spinner {
+  position: relative;
+}
+
+.spinner-blade {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 8%;
+  height: 24%;
+  background: var(--spinner-color, #6366f1);
+  border-radius: 4px;
+  transform-origin: center bottom;
+  animation: spinner-fade 1s infinite linear;
+}
+
+.spinner-blade:nth-child(1) { transform: translateX(-50%) rotate(0deg) translateY(-120%); animation-delay: -0.083s; }
+.spinner-blade:nth-child(2) { transform: translateX(-50%) rotate(30deg) translateY(-120%); animation-delay: -0.166s; }
+.spinner-blade:nth-child(3) { transform: translateX(-50%) rotate(60deg) translateY(-120%); animation-delay: -0.25s; }
+.spinner-blade:nth-child(4) { transform: translateX(-50%) rotate(90deg) translateY(-120%); animation-delay: -0.333s; }
+.spinner-blade:nth-child(5) { transform: translateX(-50%) rotate(120deg) translateY(-120%); animation-delay: -0.416s; }
+.spinner-blade:nth-child(6) { transform: translateX(-50%) rotate(150deg) translateY(-120%); animation-delay: -0.5s; }
+.spinner-blade:nth-child(7) { transform: translateX(-50%) rotate(180deg) translateY(-120%); animation-delay: -0.583s; }
+.spinner-blade:nth-child(8) { transform: translateX(-50%) rotate(210deg) translateY(-120%); animation-delay: -0.666s; }
+.spinner-blade:nth-child(9) { transform: translateX(-50%) rotate(240deg) translateY(-120%); animation-delay: -0.75s; }
+.spinner-blade:nth-child(10) { transform: translateX(-50%) rotate(270deg) translateY(-120%); animation-delay: -0.833s; }
+.spinner-blade:nth-child(11) { transform: translateX(-50%) rotate(300deg) translateY(-120%); animation-delay: -0.916s; }
+.spinner-blade:nth-child(12) { transform: translateX(-50%) rotate(330deg) translateY(-120%); animation-delay: -1s; }
+
+@keyframes spinner-fade {
+  0%, 100% { opacity: 0.2; }
+  50% { opacity: 1; }
+}
+
+/* Dots */
+.dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  animation: dots-bounce 1.4s ease-in-out infinite both;
+}
+
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+.dot:nth-child(3) { animation-delay: 0s; }
+
+@keyframes dots-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Ring */
+.ring {
+  position: relative;
+  border: 3px solid var(--ld-loading-ring-border, rgba(99, 102, 241, 0.2));
+  border-radius: 50%;
+}
+
+.ring-inner {
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  right: -3px;
+  bottom: -3px;
+  border: 3px solid transparent;
+  border-top-color: var(--ring-color, #6366f1);
+  border-radius: 50%;
+  animation: ring-spin 1s linear infinite;
+}
+
+@keyframes ring-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Pulse */
+.pulse {
+  border-radius: 50%;
+  animation: pulse-scale 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-scale {
+  0%, 100% { transform: scale(0.8); opacity: 0.5; }
+  50% { transform: scale(1); opacity: 1; }
+}
+
+/* Bars */
+.bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 30px;
+}
+
+.bar {
+  width: 6px;
+  animation: bars-grow 1.2s ease-in-out infinite;
+}
+
+.bar:nth-child(1) { animation-delay: 0s; }
+.bar:nth-child(2) { animation-delay: 0.1s; }
+.bar:nth-child(3) { animation-delay: 0.2s; }
+.bar:nth-child(4) { animation-delay: 0.3s; }
+.bar:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes bars-grow {
+  0%, 40%, 100% { height: 40%; }
+  20% { height: 100%; }
+}
+</style>
+