@yh-ui/components 0.1.0

package/dist/spin/src/spin.vue

@@ -0,0 +1,1235 @@
+<script setup>
+import { ref, watch, computed, useSlots, useId } from "vue";
+import { useNamespace, useLocale } from "@yh-ui/hooks";
+import { useComponentTheme } from "@yh-ui/theme";
+import { spinProps } from "./spin";
+defineOptions({
+  name: "YhSpin",
+  inheritAttrs: false
+});
+const props = defineProps(spinProps);
+const ns = useNamespace("spin");
+const { t } = useLocale();
+const gradientId = useId();
+const { themeStyle } = useComponentTheme(
+  "spin",
+  computed(() => props.themeOverrides)
+);
+const emit = defineEmits(["show", "hide"]);
+const internalVisible = ref(false);
+const visible = computed(() => props.delay === 0 ? props.show : internalVisible.value);
+let timer = null;
+const handleShow = () => {
+  if (props.delay > 0) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      internalVisible.value = true;
+      emit("show");
+    }, props.delay);
+  } else {
+    internalVisible.value = true;
+    emit("show");
+  }
+};
+const handleHide = () => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  internalVisible.value = false;
+  emit("hide");
+};
+const sizePx = computed(() => {
+  if (typeof props.size === "number") return props.size;
+  const map = { small: 20, default: 32, large: 48 };
+  return map[props.size] || 32;
+});
+const isGradient = computed(() => {
+  if (typeof props.color === "string") {
+    return props.color.includes("gradient");
+  }
+  return typeof props.color === "object" && props.color !== null || Array.isArray(props.color);
+});
+const gradientStops = computed(() => {
+  const { color } = props;
+  if (!isGradient.value || !color) return [];
+  if (typeof color === "string") {
+    const colorRegex = /(?:#[a-fA-F0-9]{3,8}|rgba?\s*\([^)]+\)|hsla?\s*\([^)]+\)|(?:\b[a-z]{3,}\b))/gi;
+    const matchedColors = color.match(colorRegex)?.filter((c) => !/gradient|deg|to|top|bottom|left|right/i.test(c));
+    if (matchedColors && matchedColors.length > 0) {
+      const len = matchedColors.length;
+      return matchedColors.map((c, i) => ({
+        color: c.trim(),
+        offset: `${i / (len - 1 || 1) * 100}%`
+      }));
+    }
+    return [];
+  }
+  if (Array.isArray(color)) {
+    const len = color.length;
+    return color.map((c, i) => ({
+      color: c,
+      offset: `${i / (len - 1 || 1) * 100}%`
+    }));
+  }
+  return Object.entries(color).map(([offset, c]) => ({
+    offset,
+    color: c
+  }));
+});
+const spinStyle = computed(() => {
+  const style = {};
+  if (!props.color) return style;
+  if (isGradient.value) {
+    style["--yh-spin-color-is-gradient"] = "true";
+    if (typeof props.color === "string") {
+      style["--yh-spin-gradient"] = props.color;
+    } else {
+      const stops = gradientStops.value.map((s) => `${s.color} ${s.offset}`).join(", ");
+      style["--yh-spin-gradient"] = `linear-gradient(135deg, ${stops})`;
+    }
+  } else {
+    style.color = props.color;
+  }
+  return {
+    ...themeStyle.value,
+    ...style
+  };
+});
+watch(
+  () => props.show,
+  (val) => {
+    if (val) handleShow();
+    else handleHide();
+  },
+  { immediate: true }
+);
+const spinClasses = computed(() => [
+  ns.b(),
+  ns.m(typeof props.size === "string" ? props.size : "custom"),
+  ns.is("vertical", props.vertical),
+  ns.is("glass", props.glass || !!useSlots().default),
+  ns.is("dot", props.dot),
+  ns.is("gradient", isGradient.value)
+]);
+defineExpose({
+  /** 是否可见 */
+  visible
+});
+</script>
+
+<template>
+  <svg
+    v-if="visible && isGradient"
+    style="width: 0; height: 0; position: absolute; visibility: hidden; pointer-events: none"
+  >
+    <defs>
+      <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop
+          v-for="(stop, i) in gradientStops"
+          :key="i"
+          :offset="stop.offset"
+          :stop-color="stop.color"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+
+  <div v-if="$slots.default" :class="ns.b('wrapper')" v-bind="$attrs">
+    <slot />
+    <Transition name="yh-spin-fade">
+      <div v-if="visible" :class="spinClasses" :style="spinStyle">
+        <div v-if="glass" :class="ns.e('mask')" />
+        <div :class="ns.e('container')">
+          <!-- Dot 模式 (兼容旧版) -->
+          <div v-if="dot" :class="ns.e('dots')">
+            <i v-for="i in 4" :key="i" />
+          </div>
+
+          <!-- Chaser 模式 (追逐点) -->
+          <div
+            v-else-if="type === 'chaser'"
+            :class="ns.e('chaser')"
+            :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+          >
+            <i v-for="i in 8" :key="i" />
+          </div>
+
+          <!-- Gear 模式 (齿轮线) -->
+          <div
+            v-else-if="type === 'gear'"
+            :class="ns.e('gear')"
+            :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+          >
+            <i v-for="i in 12" :key="i" />
+          </div>
+
+          <!-- Dual Ring 模式 -->
+          <div
+            v-else-if="type === 'dual-ring'"
+            :class="ns.e('dual-ring')"
+            :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+          />
+
+          <!-- Rect 模式 (矩阵块) -->
+          <div
+            v-else-if="type === 'rect'"
+            :class="ns.e('rect')"
+            :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+          >
+            <i v-for="i in 9" :key="i" />
+          </div>
+
+          <!-- 默认 Circle 模式 (SVG) -->
+          <svg
+            v-else
+            :class="ns.e('svg')"
+            viewBox="0 0 50 50"
+            :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+          >
+            <circle
+              :class="ns.e('circle')"
+              cx="25"
+              cy="25"
+              r="20"
+              fill="none"
+              stroke-width="5"
+              :style="{
+  stroke: isGradient ? `url(#${gradientId})` : 'currentColor'
+}"
+            ></circle>
+          </svg>
+
+          <div v-if="tip || $slots.tip" :class="ns.e('tip')">
+            <slot name="tip">{{ tip || t("spin.text") }}</slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+
+  <Transition v-else name="yh-spin-fade">
+    <div v-if="visible" v-bind="$attrs" :class="spinClasses" :style="spinStyle">
+      <div v-if="glass" :class="ns.e('mask')" />
+      <div :class="ns.e('container')">
+        <!-- Dot 模式 (兼容旧版) -->
+        <div v-if="dot" :class="ns.e('dots')">
+          <i v-for="i in 4" :key="i" />
+        </div>
+
+        <!-- Chaser 模式 -->
+        <div
+          v-else-if="type === 'chaser'"
+          :class="ns.e('chaser')"
+          :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+        >
+          <i v-for="i in 8" :key="i" />
+        </div>
+
+        <!-- Gear 模式 -->
+        <div
+          v-else-if="type === 'gear'"
+          :class="ns.e('gear')"
+          :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+        >
+          <i v-for="i in 12" :key="i" />
+        </div>
+
+        <!-- Dual Ring 模式 -->
+        <div
+          v-else-if="type === 'dual-ring'"
+          :class="ns.e('dual-ring')"
+          :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+        />
+
+        <!-- Rect 模式 -->
+        <div
+          v-else-if="type === 'rect'"
+          :class="ns.e('rect')"
+          :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+        >
+          <i v-for="i in 9" :key="i" />
+        </div>
+
+        <!-- 默认 Circle 模式 -->
+        <svg
+          v-else
+          :class="ns.e('svg')"
+          viewBox="0 0 50 50"
+          :style="{
+  width: sizePx + 'px',
+  height: sizePx + 'px'
+}"
+        >
+          <circle
+            :class="ns.e('circle')"
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke-width="5"
+            :style="{
+  stroke: isGradient ? `url(#${gradientId})` : 'currentColor'
+}"
+          ></circle>
+        </svg>
+
+        <div v-if="tip || $slots.default || $slots.tip" :class="ns.e('tip')">
+          <slot name="tip">
+            <slot>{{ tip || t("spin.text") }}</slot>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style>
+@charset "UTF-8";
+/**
+ * YH-UI CSS Variables
+ * 全局 CSS 变量定义 - 业内最佳主题系统
+ */
+:root {
+  /* ==================== 密度/紧凑度系统 ==================== */
+  --yh-density-factor: 1;
+  --yh-component-size-default: 32px;
+  --yh-component-size-small: 24px;
+  --yh-component-size-large: 40px;
+  --yh-padding-default: 12px 16px;
+  --yh-padding-small: 8px 12px;
+  --yh-padding-large: 16px 20px;
+  --yh-spacing-unit: 8px;
+  /* ==================== 基础颜色 ==================== */
+  --yh-color-white: #ffffff;
+  --yh-color-black: #000000;
+  /* ==================== 颜色系统 ==================== */
+  /* 主色 */
+  --yh-color-primary: #409eff;
+  --yh-color-primary-light-1: #53a8ff;
+  --yh-color-primary-light-2: #66b1ff;
+  --yh-color-primary-light-3: #79bbff;
+  --yh-color-primary-light-4: #8cc5ff;
+  --yh-color-primary-light-5: #a0cfff;
+  --yh-color-primary-light-6: #b3d8ff;
+  --yh-color-primary-light-7: #c6e2ff;
+  --yh-color-primary-light-8: #d9ecff;
+  --yh-color-primary-light-9: #ecf5ff;
+  --yh-color-primary-dark-2: #337ecc;
+  /* 成功色 */
+  --yh-color-success: #67c23a;
+  --yh-color-success-light-3: #95d475;
+  --yh-color-success-light-5: #b3e19d;
+  --yh-color-success-light-7: #d1edc4;
+  --yh-color-success-light-9: #f0f9eb;
+  --yh-color-success-dark-2: #529b2e;
+  /* 警告色 */
+  --yh-color-warning: #e6a23c;
+  --yh-color-warning-light-3: #eebe77;
+  --yh-color-warning-light-5: #f3d19e;
+  --yh-color-warning-light-7: #f8e3c5;
+  --yh-color-warning-light-9: #fdf6ec;
+  --yh-color-warning-dark-2: #b88230;
+  /* 危险色 */
+  --yh-color-danger: #f56c6c;
+  --yh-color-danger-light-3: #f89898;
+  --yh-color-danger-light-5: #fab6b6;
+  --yh-color-danger-light-7: #fcd3d3;
+  --yh-color-danger-light-9: #fef0f0;
+  --yh-color-danger-dark-2: #c45656;
+  /* 信息色 */
+  --yh-color-info: #909399;
+  --yh-color-info-light-3: #b1b3b8;
+  --yh-color-info-light-5: #c8c9cc;
+  --yh-color-info-light-7: #dedfe0;
+  --yh-color-info-light-9: #f4f4f5;
+  --yh-color-info-dark-2: #73767a;
+  /* 文字颜色 */
+  --yh-text-color-primary: #303133;
+  --yh-text-color-regular: #606266;
+  --yh-text-color-secondary: #909399;
+  --yh-text-color-placeholder: #a8abb2;
+  --yh-text-color-disabled: #c0c4cc;
+  /* 边框颜色 */
+  --yh-border-color: #dcdfe6;
+  --yh-border-color-hover: var(--yh-color-primary);
+  --yh-border-color-light: #e4e7ed;
+  --yh-border-color-lighter: #ebeef5;
+  --yh-border-color-extra-light: #f2f6fc;
+  --yh-border-color-dark: #d4d7de;
+  --yh-border-color-darker: #cdd0d6;
+  /* 填充颜色 */
+  --yh-fill-color: #f0f2f5;
+  --yh-fill-color-light: #f5f7fa;
+  --yh-fill-color-lighter: #fafafa;
+  --yh-fill-color-extra-light: #fafcff;
+  --yh-fill-color-dark: #ebedf0;
+  --yh-fill-color-darker: #e6e8eb;
+  --yh-fill-color-blank: #ffffff;
+  /* 背景颜色 */
+  --yh-bg-color: #ffffff;
+  --yh-bg-color-page: #f2f3f5;
+  --yh-bg-color-overlay: #ffffff;
+  /* ==================== 间距系统 ==================== */
+  --yh-spacing-none: 0;
+  --yh-spacing-xs: 4px;
+  --yh-spacing-sm: 8px;
+  --yh-spacing-md: 16px;
+  --yh-spacing-lg: 24px;
+  --yh-spacing-xl: 32px;
+  --yh-spacing-xxl: 48px;
+  /* ==================== 圆角系统 ==================== */
+  --yh-radius-none: 0;
+  --yh-radius-sm: 2px;
+  --yh-radius-base: 4px;
+  --yh-radius-md: 8px;
+  --yh-radius-lg: 12px;
+  --yh-radius-xl: 16px;
+  --yh-radius-round: 20px;
+  --yh-radius-circle: 50%;
+  /* ==================== 字体系统 ==================== */
+  --yh-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  /* 字号 */
+  --yh-font-size-xs: 12px;
+  --yh-font-size-sm: 13px;
+  --yh-font-size-base: 14px;
+  --yh-font-size-md: 16px;
+  --yh-font-size-lg: 18px;
+  --yh-font-size-xl: 20px;
+  --yh-font-size-xxl: 24px;
+  /* 行高 */
+  --yh-line-height-none: 1;
+  --yh-line-height-tight: 1.25;
+  --yh-line-height-snug: 1.375;
+  --yh-line-height-normal: 1.5;
+  --yh-line-height-relaxed: 1.625;
+  --yh-line-height-loose: 2;
+  /* 字重 */
+  --yh-font-weight-light: 300;
+  --yh-font-weight-normal: 400;
+  --yh-font-weight-medium: 500;
+  --yh-font-weight-semibold: 600;
+  --yh-font-weight-bold: 700;
+  /* ==================== 阴影系统 ==================== */
+  --yh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --yh-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --yh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --yh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --yh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  /* ==================== 过渡动效 ==================== */
+  --yh-duration-fast: 150ms;
+  --yh-duration-base: 200ms;
+  --yh-duration-slow: 300ms;
+  --yh-timing-ease: ease;
+  --yh-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --yh-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --yh-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --yh-timing-linear: linear;
+  --yh-transition-base: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
+  --yh-transition-fast: all var(--yh-duration-fast) var(--yh-timing-ease-in-out);
+  --yh-transition-slow: all var(--yh-duration-slow) var(--yh-timing-ease-in-out);
+  /* ==================== 层级系统 ==================== */
+  --yh-z-index-normal: 1;
+  --yh-z-index-top: 1000;
+  --yh-z-index-popper: 2000;
+  --yh-z-index-overlay: 2001;
+  --yh-z-index-modal: 2002;
+  --yh-z-index-popover: 2003;
+  --yh-z-index-tooltip: 2004;
+  --yh-z-index-loading: 2005;
+  /* ==================== 组件尺寸 ==================== */
+  /* Large */
+  --yh-component-size-large: 40px;
+  --yh-component-size-large-font: 14px;
+  --yh-component-size-large-padding: 20px;
+  /* Default */
+  --yh-component-size-default: 32px;
+  --yh-component-size-default-font: 14px;
+  --yh-component-size-default-padding: 16px;
+  /* Small */
+  --yh-component-size-small: 24px;
+  --yh-component-size-small-font: 12px;
+  --yh-component-size-small-padding: 12px;
+  /* ==================== 组件语义化变量 ==================== */
+  --yh-border-radius-base: var(--yh-radius-base);
+  --yh-border-radius-small: var(--yh-radius-sm);
+  --yh-border-radius-round: var(--yh-radius-round);
+  /* Message 消息提示 */
+  --yh-message-bg-color: var(--yh-bg-color-overlay);
+  --yh-message-border-color: var(--yh-border-color-lighter);
+  --yh-message-shadow: var(--yh-shadow-lg);
+  --yh-message-text-color: var(--yh-text-color-primary);
+  --yh-message-close-color: var(--yh-text-color-secondary);
+  --yh-message-close-hover-color: var(--yh-text-color-primary);
+  /* Notification 通知 */
+  --yh-notification-bg-color: var(--yh-bg-color-overlay);
+  --yh-notification-border-color: var(--yh-border-color-lighter);
+  --yh-notification-shadow: var(--yh-shadow-lg);
+  --yh-notification-title-color: var(--yh-text-color-primary);
+  --yh-notification-content-color: var(--yh-text-color-regular);
+  /* Badge 徽标 */
+  --yh-badge-bg-color: var(--yh-color-danger);
+  --yh-badge-text-color: #ffffff;
+  --yh-badge-border-color: var(--yh-bg-color);
+  /* Card 卡片 */
+  --yh-card-bg-color: var(--yh-bg-color-overlay);
+  --yh-card-border-color: var(--yh-border-color-lighter);
+  --yh-card-shadow: var(--yh-shadow-base);
+  --yh-card-header-padding: 18px 20px;
+  --yh-card-body-padding: 20px;
+  /* Input 输入框 */
+  --yh-input-bg-color: var(--yh-fill-color-blank);
+  --yh-input-text-color: var(--yh-text-color-regular);
+  --yh-input-border-color: var(--yh-border-color);
+  --yh-input-hover-border-color: var(--yh-color-primary);
+  --yh-input-focus-border-color: var(--yh-color-primary);
+  --yh-input-placeholder-color: var(--yh-text-color-placeholder);
+  --yh-input-icon-color: var(--yh-text-color-placeholder);
+  --yh-input-disabled-bg-color: var(--yh-fill-color-light);
+  --yh-input-disabled-text-color: var(--yh-text-color-disabled);
+  --yh-input-disabled-border-color: var(--yh-border-color-light);
+  /* Image 图片 */
+  --yh-image-placeholder-bg-color: var(--yh-fill-color-light);
+  --yh-image-placeholder-text-color: var(--yh-text-color-placeholder);
+  --yh-image-error-bg-color: var(--yh-fill-color-extra-light);
+  --yh-image-error-text-color: var(--yh-text-color-placeholder);
+  /* Image Viewer 预览器 */
+  --yh-image-viewer-mask-bg-color: rgba(0, 0, 0, 0.5);
+  --yh-image-viewer-btn-bg-color: var(--yh-text-color-regular);
+  --yh-image-viewer-btn-color: #ffffff;
+  --yh-image-viewer-btn-hover-bg-color: var(--yh-color-primary);
+  /* Calendar 日历 */
+  --yh-calendar-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  --yh-calendar-border-color: rgba(0, 0, 0, 0.06);
+  --yh-calendar-border-radius: var(--yh-radius-xl);
+  --yh-calendar-header-bg: rgba(255, 255, 255, 0.95);
+  --yh-calendar-header-border: rgba(0, 0, 0, 0.04);
+  --yh-calendar-header-padding: 18px 22px;
+  --yh-calendar-body-padding: 14px 18px 18px;
+  /* Calendar 尺寸 */
+  --yh-calendar-cell-height: 85px;
+  --yh-calendar-cell-height-small: 52px;
+  --yh-calendar-cell-height-large: 110px;
+  --yh-calendar-cell-radius: 10px;
+  --yh-calendar-cell-radius-small: 6px;
+  --yh-calendar-cell-radius-large: 12px;
+  /* Calendar 颜色 */
+  --yh-calendar-primary: var(--yh-color-primary);
+  --yh-calendar-primary-light: rgba(59, 130, 246, 0.1);
+  --yh-calendar-selected-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  --yh-calendar-selected-border: rgba(59, 130, 246, 0.4);
+  --yh-calendar-today-dot: var(--yh-color-primary);
+  --yh-calendar-weekend-color: #f97316;
+  --yh-calendar-disabled-color: var(--yh-text-color-disabled);
+  --yh-calendar-other-month-opacity: 0.35;
+  /* Calendar 假日 */
+  --yh-calendar-holiday-color: var(--yh-color-success);
+  --yh-calendar-holiday-bg: rgba(16, 185, 129, 0.12);
+  --yh-calendar-holiday-border: rgba(16, 185, 129, 0.25);
+  --yh-calendar-workday-color: var(--yh-color-warning);
+  --yh-calendar-workday-bg: rgba(245, 158, 11, 0.12);
+  --yh-calendar-workday-border: rgba(245, 158, 11, 0.25);
+  /* Calendar 范围选择 */
+  --yh-calendar-range-bg: rgba(59, 130, 246, 0.08);
+  --yh-calendar-range-border: rgba(59, 130, 246, 0.2);
+  /* Calendar 字体 */
+  --yh-calendar-weekday-font-size: var(--yh-font-size-sm);
+  --yh-calendar-weekday-color: var(--yh-text-color-secondary);
+  --yh-calendar-day-font-size: 15px;
+  --yh-calendar-day-color: var(--yh-text-color-primary);
+  --yh-calendar-badge-font-size: 9px;
+  /* Table 表格 */
+  --yh-table-border-color: var(--yh-border-color-lighter);
+  --yh-table-header-bg: var(--yh-fill-color-light);
+  --yh-table-header-text-color: var(--yh-text-color-primary);
+  --yh-table-header-font-weight: var(--yh-font-weight-semibold);
+  --yh-table-row-bg: var(--yh-bg-color);
+  --yh-table-row-hover-bg: var(--yh-fill-color-light);
+  --yh-table-row-stripe-bg: var(--yh-fill-color-lighter);
+  --yh-table-row-current-bg: var(--yh-color-primary-light-9);
+  --yh-table-row-selected-bg: var(--yh-color-primary-light-8);
+  --yh-table-row-success-bg: var(--yh-color-success-light-9);
+  --yh-table-row-warning-bg: var(--yh-color-warning-light-9);
+  --yh-table-text-color: var(--yh-text-color-regular);
+  --yh-table-empty-text-color: var(--yh-text-color-secondary);
+  --yh-table-font-size: var(--yh-font-size-base);
+  --yh-table-cell-padding: 12px 0;
+  --yh-table-cell-spacing: 12px;
+  --yh-table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  --yh-table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  /* ==================== 边框基础 ==================== */
+  --yh-border-width: 1px;
+  --yh-border-style: solid;
+  --yh-border: var(--yh-border-width) var(--yh-border-style) var(--yh-border-color);
+  /* ==================== 断点系统 ==================== */
+  --yh-breakpoint-xs: 0;
+  --yh-breakpoint-sm: 576px;
+  --yh-breakpoint-md: 768px;
+  --yh-breakpoint-lg: 992px;
+  --yh-breakpoint-xl: 1200px;
+  --yh-breakpoint-xxl: 1400px;
+  /* ==================== 字体系统扩展 ==================== */
+  --yh-font-family-monospace:
+    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --yh-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
+  /* ==================== 无障碍/聚焦系统 ==================== */
+  --yh-focus-ring-color: var(--yh-color-primary);
+  --yh-focus-ring-width: 2px;
+  --yh-focus-ring-offset: 2px;
+  --yh-focus-ring-opacity: 0.2;
+  --yh-focus-ring:
+    0 0 0 var(--yh-focus-ring-offset) var(--yh-bg-color),
+    0 0 0 calc(var(--yh-focus-ring-offset) + var(--yh-focus-ring-width)) var(--yh-focus-ring-color);
+  /* 高对比度模式支持 */
+  --yh-high-contrast-outline: 2px solid transparent;
+  --yh-high-contrast-outline-offset: 2px;
+  /* ==================== 滚动条样式 ==================== */
+  --yh-scrollbar-width: 6px;
+  --yh-scrollbar-thumb-color: var(--yh-text-color-disabled);
+  --yh-scrollbar-thumb-hover-color: var(--yh-text-color-secondary);
+  --yh-scrollbar-track-color: transparent;
+  --yh-scrollbar-thumb-radius: 3px;
+  /* ==================== 遮罩层 ==================== */
+  --yh-mask-color: rgba(0, 0, 0, 0.5);
+  --yh-mask-color-light: rgba(0, 0, 0, 0.3);
+  --yh-mask-color-extra-light: rgba(0, 0, 0, 0.1);
+}
+
+/* ==================== 暗黑模式 ==================== */
+html.dark {
+  --yh-color-primary: #409eff;
+  --yh-color-primary-light-3: #3375b9;
+  --yh-color-primary-light-5: #2a598a;
+  --yh-color-primary-light-7: #213d5b;
+  --yh-color-primary-light-9: #18222c;
+  --yh-color-primary-dark-2: #66b1ff;
+  --yh-color-success: #67c23a;
+  --yh-color-success-light-3: #4e8e2f;
+  --yh-color-success-light-5: #3e6b27;
+  --yh-color-success-light-7: #2d481f;
+  --yh-color-success-light-9: #1d2518;
+  --yh-color-warning: #e6a23c;
+  --yh-color-warning-light-3: #a77730;
+  --yh-color-warning-light-5: #7d5b28;
+  --yh-color-warning-light-7: #533f20;
+  --yh-color-warning-light-9: #292218;
+  --yh-color-danger: #f56c6c;
+  --yh-color-danger-light-3: #b25252;
+  --yh-color-danger-light-5: #854040;
+  --yh-color-danger-light-7: #582e2e;
+  --yh-color-danger-light-9: #2b1d1d;
+  --yh-color-info: #909399;
+  --yh-color-info-light-3: #6b6d71;
+  --yh-color-info-light-5: #525457;
+  --yh-color-info-light-7: #393b3e;
+  --yh-color-info-light-9: #202124;
+  --yh-text-color-primary: #e5eaf3;
+  --yh-text-color-regular: #cfd3dc;
+  --yh-text-color-secondary: #a3a6ad;
+  --yh-text-color-placeholder: #8d9095;
+  --yh-text-color-disabled: #6c6e72;
+  --yh-border-color: #4c4d4f;
+  --yh-border-color-light: #414243;
+  --yh-border-color-lighter: #363637;
+  --yh-border-color-extra-light: #2b2b2c;
+  --yh-border-color-dark: #58585b;
+  --yh-border-color-darker: #636466;
+  --yh-fill-color: #303030;
+  --yh-fill-color-light: #262727;
+  --yh-fill-color-lighter: #1d1d1d;
+  --yh-fill-color-extra-light: #191919;
+  --yh-fill-color-dark: #39393a;
+  --yh-fill-color-darker: #424243;
+  --yh-fill-color-blank: transparent;
+  --yh-bg-color: #141414;
+  --yh-bg-color-page: #0a0a0a;
+  --yh-bg-color-overlay: #1d1e1f;
+  /* 组件暗色模式覆盖 */
+  --yh-message-bg-color: var(--yh-bg-color-overlay);
+  --yh-message-border-color: var(--yh-border-color-lighter);
+  --yh-notification-bg-color: var(--yh-bg-color-overlay);
+  --yh-notification-border-color: var(--yh-border-color-lighter);
+  --yh-badge-border-color: var(--yh-bg-color);
+  --yh-card-bg-color: var(--yh-bg-color-overlay);
+  --yh-card-border-color: var(--yh-border-color-lighter);
+  /* Calendar 暗黑模式 */
+  --yh-calendar-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  --yh-calendar-border-color: rgba(255, 255, 255, 0.08);
+  --yh-calendar-header-bg: rgba(30, 30, 30, 0.95);
+  --yh-calendar-header-border: rgba(255, 255, 255, 0.06);
+  --yh-calendar-day-color: var(--yh-text-color-primary);
+  --yh-calendar-weekday-color: var(--yh-text-color-secondary);
+  --yh-calendar-selected-bg: linear-gradient(
+    135deg,
+    rgba(59, 130, 246, 0.2) 0%,
+    rgba(59, 130, 246, 0.1) 100%
+  );
+  /* Table 暗黑模式 */
+  --yh-table-border-color: var(--yh-border-color-lighter);
+  --yh-table-header-bg: var(--yh-fill-color-dark);
+  --yh-table-header-text-color: var(--yh-text-color-primary);
+  --yh-table-row-bg: var(--yh-bg-color);
+  --yh-table-row-hover-bg: var(--yh-fill-color);
+  --yh-table-row-stripe-bg: var(--yh-fill-color-light);
+  --yh-table-row-current-bg: var(--yh-color-primary-light-9);
+  --yh-table-row-selected-bg: var(--yh-color-primary-light-9);
+  --yh-table-row-success-bg: var(--yh-color-success-light-9);
+  --yh-table-row-warning-bg: var(--yh-color-warning-light-9);
+  --yh-table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
+  --yh-table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
+  /* 遮罩层暗黑模式 */
+  --yh-mask-color: rgba(0, 0, 0, 0.7);
+  --yh-mask-color-light: rgba(0, 0, 0, 0.5);
+  --yh-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+  /* 滚动条暗黑模式 */
+  --yh-scrollbar-thumb-color: var(--yh-fill-color-darker);
+  --yh-scrollbar-thumb-hover-color: var(--yh-text-color-placeholder);
+}
+
+/* ==================== 减少动画偏好支持 ==================== */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  html.dark {
+    --yh-duration-fast: 0ms;
+    --yh-duration-base: 0ms;
+    --yh-duration-slow: 0ms;
+    --yh-transition-base: none;
+    --yh-transition-fast: none;
+    --yh-transition-slow: none;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* ==================== 高对比度模式支持 ==================== */
+@media (prefers-contrast: high) {
+  :root {
+    --yh-border-color: #000000;
+    --yh-border-color-light: #333333;
+    --yh-text-color-primary: #000000;
+    --yh-text-color-regular: #1a1a1a;
+    --yh-focus-ring-width: 3px;
+    --yh-focus-ring-color: #000000;
+  }
+  html.dark {
+    --yh-border-color: #ffffff;
+    --yh-border-color-light: #cccccc;
+    --yh-text-color-primary: #ffffff;
+    --yh-text-color-regular: #e5e5e5;
+    --yh-focus-ring-color: #ffffff;
+  }
+}
+/* ==================== 强制颜色模式支持 (Windows 高对比度) ==================== */
+@media (forced-colors: active) {
+  :root {
+    --yh-color-primary: LinkText;
+    --yh-border-color: ButtonBorder;
+    --yh-bg-color: Canvas;
+    --yh-text-color-primary: CanvasText;
+    --yh-focus-ring-color: Highlight;
+  }
+}
+.yh-spin-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.yh-spin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--yh-color-primary, #409eff);
+}
+.yh-spin--small {
+  font-size: 12px;
+}
+
+.yh-spin--default {
+  font-size: 14px;
+}
+
+.yh-spin--large {
+  font-size: 16px;
+}
+
+.yh-spin.is-vertical {
+  flex-direction: column;
+}
+.yh-spin.is-vertical .yh-spin__tip {
+  margin-left: 0;
+  margin-top: 8px;
+}
+
+.yh-spin.is-glass {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  /* 核心：模糊与背景必须连带应用，且避开 3D transform 冲突 */
+  background: var(--yh-spin-mask-bg, rgba(255, 255, 255, 0.65));
+  backdrop-filter: blur(var(--yh-spin-blur-radius, 4px));
+  -webkit-backdrop-filter: blur(var(--yh-spin-blur-radius, 4px));
+}
+@media (prefers-color-scheme: dark) {
+  .yh-spin.is-glass {
+    background: var(--yh-spin-mask-bg-dark, rgba(0, 0, 0, 0.5));
+  }
+}
+
+.yh-spin {
+  /* 独立增强层：仅处理噪点纹理，确保不干扰模糊捕获 */
+}
+.yh-spin__mask {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+.yh-spin__mask::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
+.yh-spin__container {
+  display: flex;
+  flex-direction: inherit;
+  align-items: center;
+  justify-content: center;
+  /* 容器独立加速，确保旋转图标在滤镜上方丝滑运行 */
+  transform: translateZ(0);
+  will-change: transform;
+  z-index: 1;
+}
+
+.yh-spin__svg {
+  animation: yh-spin-rotate 2s linear infinite;
+  shape-rendering: geometricPrecision;
+  will-change: transform;
+}
+
+.yh-spin__circle {
+  stroke: currentColor;
+  stroke-linecap: round;
+  animation: yh-spin-dash 1.5s ease-in-out infinite;
+}
+
+.yh-spin__tip {
+  margin-left: 10px;
+  color: inherit;
+  font-weight: 500;
+  transition: all 0.3s;
+}
+
+.yh-spin {
+  /* 渐变状态下的特殊处理 */
+}
+.yh-spin.is-gradient .yh-spin__tip {
+  background: var(--yh-spin-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+}
+
+.yh-spin.is-gradient .yh-spin__dots i {
+  background: var(--yh-spin-gradient);
+  background-color: transparent;
+}
+
+.yh-spin {
+  /* Dot 模式样式 */
+}
+.yh-spin__dots {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  display: inline-block;
+  transform: rotate(45deg);
+  animation: yh-spin-rotate 1.2s infinite linear;
+}
+.yh-spin__dots i {
+  width: 0.45em;
+  height: 0.45em;
+  position: absolute;
+  display: block;
+  background-color: currentColor;
+  border-radius: 100%;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  animation: yh-spin-move 1s infinite linear alternate;
+}
+.yh-spin__dots i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.yh-spin__dots i:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+.yh-spin__dots i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+.yh-spin__dots i:nth-child(4) {
+  left: 0;
+  bottom: 0;
+  animation-delay: 1.2s;
+}
+
+.yh-spin {
+  /* Chaser 模式 (追逐点) - 模拟彗星拖尾效果 */
+}
+.yh-spin__chaser {
+  position: relative;
+}
+.yh-spin__chaser i {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.yh-spin__chaser i::after {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 18%;
+  height: 18%;
+  background-color: currentColor;
+  border-radius: 100%;
+  animation: yh-spin-chaser 1.2s infinite ease-in-out both;
+}
+.yh-spin__chaser i:nth-child(1) {
+  transform: rotate(0deg);
+}
+.yh-spin__chaser i:nth-child(1)::after {
+  animation-delay: -1.05s;
+}
+.yh-spin__chaser i:nth-child(2) {
+  transform: rotate(45deg);
+}
+.yh-spin__chaser i:nth-child(2)::after {
+  animation-delay: -0.9s;
+}
+.yh-spin__chaser i:nth-child(3) {
+  transform: rotate(90deg);
+}
+.yh-spin__chaser i:nth-child(3)::after {
+  animation-delay: -0.75s;
+}
+.yh-spin__chaser i:nth-child(4) {
+  transform: rotate(135deg);
+}
+.yh-spin__chaser i:nth-child(4)::after {
+  animation-delay: -0.6s;
+}
+.yh-spin__chaser i:nth-child(5) {
+  transform: rotate(180deg);
+}
+.yh-spin__chaser i:nth-child(5)::after {
+  animation-delay: -0.45s;
+}
+.yh-spin__chaser i:nth-child(6) {
+  transform: rotate(225deg);
+}
+.yh-spin__chaser i:nth-child(6)::after {
+  animation-delay: -0.3s;
+}
+.yh-spin__chaser i:nth-child(7) {
+  transform: rotate(270deg);
+}
+.yh-spin__chaser i:nth-child(7)::after {
+  animation-delay: -0.15s;
+}
+.yh-spin__chaser i:nth-child(8) {
+  transform: rotate(315deg);
+}
+.yh-spin__chaser i:nth-child(8)::after {
+  animation-delay: 0s;
+}
+
+.yh-spin {
+  /* Gear 模式 (齿轮线) - 经典 Spinner */
+}
+.yh-spin__gear {
+  position: relative;
+}
+.yh-spin__gear i {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.yh-spin__gear i::after {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 8%;
+  height: 25%;
+  background-color: currentColor;
+  border-radius: 5px;
+  animation: yh-spin-fade 1.1s infinite ease-in-out both;
+}
+.yh-spin__gear i:nth-child(1) {
+  transform: rotate(0deg);
+}
+.yh-spin__gear i:nth-child(1)::after {
+  animation-delay: -1.001s;
+}
+.yh-spin__gear i:nth-child(2) {
+  transform: rotate(30deg);
+}
+.yh-spin__gear i:nth-child(2)::after {
+  animation-delay: -0.91s;
+}
+.yh-spin__gear i:nth-child(3) {
+  transform: rotate(60deg);
+}
+.yh-spin__gear i:nth-child(3)::after {
+  animation-delay: -0.819s;
+}
+.yh-spin__gear i:nth-child(4) {
+  transform: rotate(90deg);
+}
+.yh-spin__gear i:nth-child(4)::after {
+  animation-delay: -0.728s;
+}
+.yh-spin__gear i:nth-child(5) {
+  transform: rotate(120deg);
+}
+.yh-spin__gear i:nth-child(5)::after {
+  animation-delay: -0.637s;
+}
+.yh-spin__gear i:nth-child(6) {
+  transform: rotate(150deg);
+}
+.yh-spin__gear i:nth-child(6)::after {
+  animation-delay: -0.546s;
+}
+.yh-spin__gear i:nth-child(7) {
+  transform: rotate(180deg);
+}
+.yh-spin__gear i:nth-child(7)::after {
+  animation-delay: -0.455s;
+}
+.yh-spin__gear i:nth-child(8) {
+  transform: rotate(210deg);
+}
+.yh-spin__gear i:nth-child(8)::after {
+  animation-delay: -0.364s;
+}
+.yh-spin__gear i:nth-child(9) {
+  transform: rotate(240deg);
+}
+.yh-spin__gear i:nth-child(9)::after {
+  animation-delay: -0.273s;
+}
+.yh-spin__gear i:nth-child(10) {
+  transform: rotate(270deg);
+}
+.yh-spin__gear i:nth-child(10)::after {
+  animation-delay: -0.182s;
+}
+.yh-spin__gear i:nth-child(11) {
+  transform: rotate(300deg);
+}
+.yh-spin__gear i:nth-child(11)::after {
+  animation-delay: -0.091s;
+}
+.yh-spin__gear i:nth-child(12) {
+  transform: rotate(330deg);
+}
+.yh-spin__gear i:nth-child(12)::after {
+  animation-delay: 0s;
+}
+
+.yh-spin {
+  /* Dual Ring 模式 - 极简之美 */
+}
+.yh-spin__dual-ring {
+  display: inline-block;
+}
+.yh-spin__dual-ring::after {
+  content: " ";
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-color: currentColor transparent currentColor transparent;
+  animation: yh-spin-rotate 1s linear infinite;
+}
+
+.yh-spin {
+  /* Rect 模式 (矩阵块) - 灵动跳跃 */
+}
+.yh-spin__rect {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 12%;
+}
+.yh-spin__rect i {
+  width: 100%;
+  height: 100%;
+  background: currentColor;
+  border-radius: 15%;
+  animation: yh-spin-rect 1.2s infinite ease-in-out;
+}
+.yh-spin__rect i:nth-child(1) {
+  animation-delay: 0s;
+}
+.yh-spin__rect i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.yh-spin__rect i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.yh-spin__rect i:nth-child(4) {
+  animation-delay: 0.15s;
+}
+.yh-spin__rect i:nth-child(5) {
+  animation-delay: 0.3s;
+}
+.yh-spin__rect i:nth-child(6) {
+  animation-delay: 0.45s;
+}
+.yh-spin__rect i:nth-child(7) {
+  animation-delay: 0.3s;
+}
+.yh-spin__rect i:nth-child(8) {
+  animation-delay: 0.45s;
+}
+.yh-spin__rect i:nth-child(9) {
+  animation-delay: 0.6s;
+}
+
+.yh-spin {
+  /* 渐变支持增强 - 修复: 仅应用到可见元素，不应用到定位容器 i 上 */
+}
+.yh-spin.is-gradient .yh-spin__chaser i::after, .yh-spin.is-gradient .yh-spin__gear i::after {
+  background: var(--yh-spin-gradient);
+}
+
+.yh-spin.is-gradient .yh-spin__rect i {
+  background: var(--yh-spin-gradient);
+}
+
+.yh-spin.is-gradient .yh-spin__dual-ring::after {
+  /* 这里的技巧：即使是渐变，我们也取第一个颜色作为边框回退，
+     或者通过 mask 增强，但基础修复是确保它不是全圆 */
+  border-color: var(--yh-color-primary, #00d2ff) transparent;
+}
+
+@keyframes yh-spin-chaser {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes yh-spin-rect {
+  0%, 70%, 100% {
+    transform: scale3D(1, 1, 1);
+    opacity: 1;
+  }
+  35% {
+    transform: scale3D(0.4, 0.4, 1);
+    opacity: 0.3;
+  }
+}
+@keyframes yh-spin-fade {
+  0%, 39%, 100% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes yh-spin-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes yh-spin-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+@keyframes yh-spin-move {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.yh-spin-fade-enter-active,
+.yh-spin-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.yh-spin-fade-enter-from,
+.yh-spin-fade-leave-to {
+  opacity: 0;
+}
+</style>