foucui 1.0.1

package/components/QiuLoading/spinner.vue

@@ -0,0 +1,820 @@
+<template>
+  <div
+    class="qiu-loading"
+    :class="[
+      `qiu-loading--${effect}`,
+      {
+        'is-fullscreen': fullscreen,
+        'is-transparent': transparent,
+      },
+    ]"
+  >
+    <div class="qiu-loading__mask" />
+    <div class="qiu-loading__content">
+      <!-- spinner：圆环 -->
+      <span v-if="effect === 'spinner'" class="qiu-loading__spinner" />
+
+      <!-- dual-ring：双环 -->
+      <span v-else-if="effect === 'dual-ring'" class="qiu-loading__dual-ring" aria-hidden="true" />
+
+      <!-- crescent：月牙 -->
+      <span v-else-if="effect === 'crescent'" class="qiu-loading__crescent" aria-hidden="true" />
+
+      <!-- gradient：渐变环 -->
+      <span v-else-if="effect === 'gradient'" class="qiu-loading__gradient" aria-hidden="true" />
+
+      <!-- dash：虚线环 -->
+      <span v-else-if="effect === 'dash'" class="qiu-loading__dash" aria-hidden="true" />
+
+      <!-- dots：三点跳动 -->
+      <span v-else-if="effect === 'dots'" class="qiu-loading__dots" aria-hidden="true">
+        <i /><i /><i />
+      </span>
+
+      <!-- wave：波浪点 -->
+      <span v-else-if="effect === 'wave'" class="qiu-loading__wave" aria-hidden="true">
+        <i /><i /><i /><i /><i />
+      </span>
+
+      <!-- bounce：弹跳球 -->
+      <span v-else-if="effect === 'bounce'" class="qiu-loading__bounce" aria-hidden="true">
+        <i /><i /><i />
+      </span>
+
+      <!-- bars：音量条 -->
+      <span v-else-if="effect === 'bars'" class="qiu-loading__bars" aria-hidden="true">
+        <i /><i /><i /><i />
+      </span>
+
+      <!-- bricks：方块阶梯 -->
+      <span v-else-if="effect === 'bricks'" class="qiu-loading__bricks" aria-hidden="true">
+        <i /><i /><i /><i /><i /><i /><i /><i /><i />
+      </span>
+
+      <!-- square：翻转方块 -->
+      <span v-else-if="effect === 'square'" class="qiu-loading__square" aria-hidden="true" />
+
+      <!-- flip：3D 翻转 -->
+      <span v-else-if="effect === 'flip'" class="qiu-loading__flip" aria-hidden="true">
+        <i />
+      </span>
+
+      <!-- pulse：呼吸圆 -->
+      <span v-else-if="effect === 'pulse'" class="qiu-loading__pulse" aria-hidden="true">
+        <i />
+      </span>
+
+      <!-- ripple：水波纹 -->
+      <span v-else-if="effect === 'ripple'" class="qiu-loading__ripple" aria-hidden="true">
+        <i /><i />
+      </span>
+
+      <!-- orbit：双环绕 -->
+      <span v-else-if="effect === 'orbit'" class="qiu-loading__orbit" aria-hidden="true">
+        <i /><i />
+      </span>
+
+      <!-- radar：雷达扫描 -->
+      <span v-else-if="effect === 'radar'" class="qiu-loading__radar" aria-hidden="true">
+        <i />
+      </span>
+
+      <!-- spiral：螺旋点 -->
+      <span v-else-if="effect === 'spiral'" class="qiu-loading__spiral" aria-hidden="true">
+        <i /><i /><i /><i /><i /><i /><i /><i />
+      </span>
+
+      <!-- infinity：∞ 轨迹 -->
+      <span v-else-if="effect === 'infinity'" class="qiu-loading__infinity" aria-hidden="true">
+        <i />
+      </span>
+
+      <!-- hourglass：沙漏 -->
+      <span v-else-if="effect === 'hourglass'" class="qiu-loading__hourglass" aria-hidden="true" />
+
+      <!-- skeleton：骨架条 -->
+      <span v-else-if="effect === 'skeleton'" class="qiu-loading__skeleton" aria-hidden="true">
+        <i /><i /><i />
+      </span>
+
+      <!-- default fallback -->
+      <span v-else class="qiu-loading__spinner" />
+
+      <p v-if="text" class="qiu-loading__text">{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { QiuLoadingEffect } from './types'
+
+defineOptions({ name: 'QiuLoading' })
+
+withDefaults(
+  defineProps<{
+    text?: string
+    fullscreen?: boolean
+    transparent?: boolean
+    effect?: QiuLoadingEffect
+  }>(),
+  {
+    text: '',
+    fullscreen: false,
+    transparent: false,
+    effect: 'spinner',
+  }
+)
+</script>
+
+<style lang="scss">
+.qiu-loading {
+  --qiu-loading-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
+
+  position: absolute;
+  inset: 0;
+  z-index: 2000;
+  pointer-events: none;
+
+  &.is-fullscreen {
+    position: fixed;
+  }
+
+  &.is-transparent .qiu-loading__mask {
+    background: rgb(255 255 255 / 45%);
+  }
+}
+
+.qiu-loading__mask {
+  position: absolute;
+  inset: 0;
+  background: var(--qiu-mask-color, rgb(255 255 255 / 88%));
+  pointer-events: auto;
+  backdrop-filter: blur(1px);
+}
+
+.qiu-loading__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.qiu-loading__text {
+  margin: 0;
+  font-size: 13px;
+  color: var(--qiu-loading-color);
+  letter-spacing: 0.02em;
+}
+
+/* ---- spinner ---- */
+.qiu-loading__spinner {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--qiu-border-color-lighter, #ebeef5);
+  border-top-color: var(--qiu-loading-color);
+  border-radius: 50%;
+  animation: qiu-loading-spin 0.75s linear infinite;
+}
+
+/* ---- dual-ring ---- */
+.qiu-loading__dual-ring {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    border: 3px solid transparent;
+    border-radius: 50%;
+  }
+
+  &::before {
+    border-top-color: var(--qiu-loading-color);
+    border-right-color: var(--qiu-loading-color);
+    animation: qiu-loading-spin 0.9s linear infinite;
+  }
+
+  &::after {
+    inset: 6px;
+    border-bottom-color: var(--qiu-loading-color);
+    border-left-color: var(--qiu-loading-color);
+    opacity: 0.55;
+    animation: qiu-loading-spin 1.2s linear infinite reverse;
+  }
+}
+
+/* ---- crescent ---- */
+.qiu-loading__crescent {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  border: 3px solid transparent;
+  border-top-color: var(--qiu-loading-color);
+  border-right-color: var(--qiu-loading-color);
+  border-radius: 50%;
+  animation: qiu-loading-spin 0.7s linear infinite;
+}
+
+/* ---- gradient ---- */
+.qiu-loading__gradient {
+  display: inline-block;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    transparent 0%,
+    var(--qiu-loading-color) 70%,
+    transparent 100%
+  );
+  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
+  animation: qiu-loading-spin 0.85s linear infinite;
+}
+
+/* ---- dash ---- */
+.qiu-loading__dash {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 34px;
+  height: 34px;
+  border: 3px dashed var(--qiu-loading-color);
+  border-radius: 50%;
+  animation: qiu-loading-spin 1.2s linear infinite;
+}
+
+/* ---- dots ---- */
+.qiu-loading__dots {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  height: 28px;
+
+  i {
+    display: block;
+    width: 8px;
+    height: 8px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-dot 1s ease-in-out infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+}
+
+/* ---- wave ---- */
+.qiu-loading__wave {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 28px;
+
+  i {
+    display: block;
+    width: 5px;
+    height: 5px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-wave 1s ease-in-out infinite;
+
+    @for $n from 1 through 5 {
+      &:nth-child(#{$n}) {
+        animation-delay: #{($n - 1) * 0.1}s;
+      }
+    }
+  }
+}
+
+/* ---- bounce ---- */
+.qiu-loading__bounce {
+  display: inline-flex;
+  gap: 6px;
+  align-items: flex-end;
+  height: 28px;
+
+  i {
+    display: block;
+    width: 10px;
+    height: 10px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-bounce 0.7s ease-in-out infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.12s;
+      opacity: 0.75;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.24s;
+      opacity: 0.5;
+    }
+  }
+}
+
+/* ---- bars ---- */
+.qiu-loading__bars {
+  display: inline-flex;
+  gap: 4px;
+  align-items: flex-end;
+  height: 28px;
+
+  i {
+    display: block;
+    width: 4px;
+    height: 12px;
+    background: var(--qiu-loading-color);
+    border-radius: 2px;
+    animation: qiu-loading-bar 0.9s ease-in-out infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.12s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.24s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: 0.36s;
+    }
+  }
+}
+
+/* ---- bricks ---- */
+.qiu-loading__bricks {
+  display: grid;
+  grid-template-columns: repeat(3, 8px);
+  gap: 3px;
+  width: 30px;
+  height: 30px;
+
+  i {
+    display: block;
+    background: var(--qiu-loading-color);
+    border-radius: 1px;
+    animation: qiu-loading-brick 1s ease-in-out infinite;
+    opacity: 0.25;
+
+    @for $n from 1 through 9 {
+      &:nth-child(#{$n}) {
+        animation-delay: #{($n - 1) * 0.08}s;
+      }
+    }
+  }
+}
+
+/* ---- square ---- */
+.qiu-loading__square {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background: var(--qiu-loading-color);
+  border-radius: 3px;
+  animation: qiu-loading-square 1s ease-in-out infinite;
+}
+
+/* ---- flip ---- */
+.qiu-loading__flip {
+  display: inline-flex;
+  perspective: 80px;
+  width: 28px;
+  height: 28px;
+
+  i {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: var(--qiu-loading-color);
+    border-radius: 4px;
+    animation: qiu-loading-flip 1.1s ease-in-out infinite;
+  }
+}
+
+/* ---- pulse ---- */
+.qiu-loading__pulse {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+
+  i {
+    display: block;
+    width: 14px;
+    height: 14px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-pulse 1.2s ease-out infinite;
+  }
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: '';
+    border: 2px solid var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-ring 1.2s ease-out infinite;
+  }
+}
+
+/* ---- ripple ---- */
+.qiu-loading__ripple {
+  position: relative;
+  width: 40px;
+  height: 40px;
+
+  i {
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--qiu-loading-color);
+    border-radius: 50%;
+    opacity: 0;
+    animation: qiu-loading-ripple 1.4s ease-out infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.7s;
+    }
+  }
+}
+
+/* ---- orbit ---- */
+.qiu-loading__orbit {
+  position: relative;
+  width: 36px;
+  height: 36px;
+
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    margin: -5px 0 0 -5px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-orbit 1s linear infinite;
+
+    &:nth-child(2) {
+      width: 7px;
+      height: 7px;
+      margin: -3.5px 0 0 -3.5px;
+      opacity: 0.55;
+      animation-duration: 1.4s;
+      animation-direction: reverse;
+    }
+  }
+}
+
+/* ---- radar ---- */
+.qiu-loading__radar {
+  position: relative;
+  box-sizing: border-box;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border: 2px solid rgb(15 118 110 / 25%);
+  border-radius: 50%;
+
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 2px;
+    margin-top: -1px;
+    background: linear-gradient(90deg, var(--qiu-loading-color), transparent);
+    transform-origin: left center;
+    animation: qiu-loading-radar 1.2s linear infinite;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 25%;
+    content: '';
+    border: 1px solid rgb(15 118 110 / 18%);
+    border-radius: 50%;
+  }
+
+  &::after {
+    inset: 40%;
+  }
+}
+
+/* ---- spiral ---- */
+.qiu-loading__spiral {
+  position: relative;
+  width: 36px;
+  height: 36px;
+
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 6px;
+    height: 6px;
+    margin: -3px 0 0 -3px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-spiral 1.2s linear infinite;
+
+    @for $n from 1 through 8 {
+      &:nth-child(#{$n}) {
+        animation-delay: #{($n - 1) * -0.15}s;
+        opacity: #{1 - ($n - 1) * 0.1};
+      }
+    }
+  }
+}
+
+/* ---- infinity ---- */
+.qiu-loading__infinity {
+  position: relative;
+  width: 48px;
+  height: 24px;
+
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    margin: -4px 0 0 -4px;
+    background: var(--qiu-loading-color);
+    border-radius: 50%;
+    animation: qiu-loading-infinity 1.4s linear infinite;
+  }
+}
+
+/* ---- hourglass ---- */
+.qiu-loading__hourglass {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 16px 10px;
+  border-color: var(--qiu-loading-color) transparent;
+  animation: qiu-loading-hourglass 1.2s ease-in-out infinite;
+}
+
+/* ---- skeleton ---- */
+.qiu-loading__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 160px;
+
+  i {
+    display: block;
+    height: 10px;
+    background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
+    background-size: 400% 100%;
+    border-radius: 4px;
+    animation: qiu-loading-shimmer 1.2s ease infinite;
+
+    &:nth-child(1) {
+      width: 100%;
+    }
+
+    &:nth-child(2) {
+      width: 72%;
+    }
+
+    &:nth-child(3) {
+      width: 88%;
+    }
+  }
+}
+
+@keyframes qiu-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes qiu-loading-dot {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0) scale(0.85);
+  }
+
+  40% {
+    opacity: 1;
+    transform: translateY(-6px) scale(1);
+  }
+}
+
+@keyframes qiu-loading-wave {
+  0%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+
+  50% {
+    transform: translateY(-10px);
+    opacity: 1;
+  }
+}
+
+@keyframes qiu-loading-bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-14px);
+  }
+}
+
+@keyframes qiu-loading-bar {
+  0%,
+  100% {
+    height: 10px;
+    opacity: 0.45;
+  }
+
+  50% {
+    height: 26px;
+    opacity: 1;
+  }
+}
+
+@keyframes qiu-loading-brick {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.85);
+  }
+
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes qiu-loading-square {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(180deg) scale(0.7);
+    border-radius: 50%;
+  }
+
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes qiu-loading-flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+
+  50% {
+    transform: rotateY(180deg);
+  }
+
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes qiu-loading-pulse {
+  0%,
+  100% {
+    transform: scale(0.85);
+    opacity: 0.7;
+  }
+
+  50% {
+    transform: scale(1.15);
+    opacity: 1;
+  }
+}
+
+@keyframes qiu-loading-ring {
+  0% {
+    transform: scale(0.55);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: scale(1.15);
+    opacity: 0;
+  }
+}
+
+@keyframes qiu-loading-ripple {
+  0% {
+    transform: scale(0.2);
+    opacity: 0.75;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes qiu-loading-orbit {
+  from {
+    transform: rotate(0deg) translateX(12px) rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg) translateX(12px) rotate(-360deg);
+  }
+}
+
+@keyframes qiu-loading-radar {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes qiu-loading-spiral {
+  from {
+    transform: rotate(0deg) translateX(12px) scale(1);
+  }
+
+  to {
+    transform: rotate(360deg) translateX(12px) scale(0.6);
+  }
+}
+
+@keyframes qiu-loading-infinity {
+  0% {
+    transform: translate(-14px, 0);
+  }
+
+  25% {
+    transform: translate(0, -8px);
+  }
+
+  50% {
+    transform: translate(14px, 0);
+  }
+
+  75% {
+    transform: translate(0, 8px);
+  }
+
+  100% {
+    transform: translate(-14px, 0);
+  }
+}
+
+@keyframes qiu-loading-hourglass {
+  0% {
+    transform: rotate(0deg);
+    border-top-color: var(--qiu-loading-color);
+    border-bottom-color: transparent;
+  }
+
+  50% {
+    transform: rotate(180deg);
+    border-top-color: transparent;
+    border-bottom-color: var(--qiu-loading-color);
+  }
+
+  100% {
+    transform: rotate(360deg);
+    border-top-color: var(--qiu-loading-color);
+    border-bottom-color: transparent;
+  }
+}
+
+@keyframes qiu-loading-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: 0 0;
+  }
+}
+</style>