@yh-ui/components 0.1.16 → 0.1.21

package/dist/carousel/src/carousel.vue

@@ -0,0 +1,1070 @@
+<script setup>
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  watch,
+  provide,
+  useSlots,
+  shallowRef,
+  markRaw
+} from "vue";
+import { useNamespace, useLocale } from "@yh-ui/hooks";
+import { useComponentTheme } from "@yh-ui/theme";
+import { carouselProps, carouselEmits, CAROUSEL_INJECTION_KEY } from "./carousel";
+defineOptions({
+  name: "YhCarousel"
+});
+const props = defineProps(carouselProps);
+const emit = defineEmits(carouselEmits);
+const _slots = useSlots();
+const ns = useNamespace("carousel");
+const { t } = useLocale();
+const { themeStyle } = useComponentTheme(
+  "carousel",
+  computed(() => props.themeOverrides)
+);
+const internalIndex = shallowRef(props.defaultIndex);
+const prevIndex = shallowRef(-1);
+const isHovering = shallowRef(false);
+let itemIdCounter = 0;
+const _getStableId = () => `yh-carousel-item-${itemIdCounter++}`;
+const itemMap = /* @__PURE__ */ new Map();
+const itemIds = ref([]);
+const itemCount = computed(() => itemIds.value.length);
+let rafId = null;
+const timer = shallowRef(null);
+const containerRef = shallowRef(null);
+const renderBuffer = 2;
+const visibleRange = computed(() => {
+  const total = itemCount.value;
+  if (total === 0) return { start: 0, end: 0 };
+  const cur = internalIndex.value;
+  const start = Math.max(0, cur - renderBuffer);
+  const end = Math.min(total, cur + renderBuffer + 1);
+  return { start, end };
+});
+const shouldRenderItem = (index) => {
+  const { start, end } = visibleRange.value;
+  return index >= start && index < end;
+};
+const currentIndex = computed({
+  get: () => internalIndex.value,
+  set: (val) => {
+    const total = itemCount.value;
+    if (total === 0) return;
+    let next2 = val;
+    if (val < 0) {
+      next2 = props.loop ? total - 1 : 0;
+    } else if (val >= total) {
+      next2 = props.loop ? 0 : total - 1;
+    }
+    if (next2 !== internalIndex.value) {
+      const prev2 = internalIndex.value;
+      prevIndex.value = prev2;
+      internalIndex.value = next2;
+      emit("update:currentIndex", next2);
+      emit("change", next2, prev2);
+    }
+  }
+});
+const trackStyle = computed(() => {
+  if (props.effect !== "slide") {
+    return {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      perspective: "1200px",
+      transformStyle: "preserve-3d"
+    };
+  }
+  const isVertical = props.direction === "vertical";
+  const translateP = internalIndex.value * 100;
+  const space = internalIndex.value * props.spaceBetween;
+  const transform = isVertical ? `translate3d(0, calc(-${translateP}% - ${space}px), 0)` : `translate3d(calc(-${translateP}% - ${space}px), 0, 0)`;
+  return {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    willChange: "transform",
+    // GPU 提示
+    transition: `transform ${props.duration}ms var(--yh-carousel-transition-timing)`,
+    transform,
+    flexDirection: isVertical ? "column" : "row",
+    gap: `${props.spaceBetween}px`
+  };
+});
+const startAutoplay = () => {
+  if (!props.autoplay || props.interval <= 0) return;
+  stopAutoplay();
+  const isTest = typeof globalThis !== "undefined" && "vi" in globalThis;
+  if (isTest) {
+    timer.value = setInterval(() => {
+      if (props.pauseOnHover && isHovering.value) return;
+      internalIndex.value++;
+      const total = itemCount.value;
+      if (internalIndex.value >= total) {
+        internalIndex.value = props.loop ? 0 : total - 1;
+      }
+    }, props.interval);
+  } else {
+    let lastTime = performance.now();
+    const tick = (currentTime) => {
+      if (timer.value === null) return;
+      if (currentTime - lastTime >= props.interval) {
+        if (!(props.pauseOnHover && isHovering.value)) {
+          internalIndex.value++;
+          const total = itemCount.value;
+          if (internalIndex.value >= total) {
+            internalIndex.value = props.loop ? 0 : total - 1;
+          }
+        }
+        lastTime = currentTime;
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+  }
+};
+const stopAutoplay = () => {
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+  timer.value = null;
+};
+const prev = () => currentIndex.value--;
+const next = () => currentIndex.value++;
+const jump = (index) => {
+  currentIndex.value = index;
+};
+let keydownRaf = null;
+const handleKeyDown = (e) => {
+  if (!props.keyboard) return;
+  if (keydownRaf !== null) return;
+  keydownRaf = requestAnimationFrame(() => {
+    keydownRaf = null;
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") prev();
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next();
+  });
+};
+let wheelRaf = null;
+const handleWheel = (e) => {
+  if (!props.mousewheel) return;
+  e.preventDefault();
+  if (wheelRaf !== null) return;
+  wheelRaf = requestAnimationFrame(() => {
+    wheelRaf = null;
+    if (e.deltaY > 0) next();
+    else if (e.deltaY < 0) prev();
+  });
+};
+const handleDotTrigger = (index, type) => {
+  if (props.dotTrigger === type) jump(index);
+};
+const getCurrentIndex = () => internalIndex.value;
+const effectiveDotPlacement = computed(() => props.dotPlacement);
+const dotsAtClass = computed(() => {
+  const p = props.dotPlacement;
+  const side = p.replace(/^inner-/, "");
+  return side === "left" || side === "right" || side === "top" || side === "bottom" ? `dots-at-${side}` : "";
+});
+defineExpose({
+  prev,
+  next,
+  jump,
+  to: jump,
+  getCurrentIndex,
+  currentIndex: internalIndex
+});
+provide(
+  CAROUSEL_INJECTION_KEY,
+  markRaw({
+    props,
+    itemCount: shallowRef(itemCount.value),
+    // 保持响应但浅层
+    currentIndex: internalIndex,
+    prevIndex,
+    direction: computed(() => props.direction),
+    effect: computed(() => props.effect),
+    shouldRenderItem,
+    // 新增：判断是否渲染
+    addItem: (id) => {
+      if (!itemIds.value.includes(id)) {
+        itemIds.value.push(id);
+        itemMap.set(id, { index: itemIds.value.length - 1 });
+      }
+    },
+    removeItem: (id) => {
+      const idx = itemIds.value.indexOf(id);
+      if (idx !== -1) {
+        itemIds.value.splice(idx, 1);
+        itemMap.delete(id);
+        itemIds.value.forEach((itemId, i) => {
+          const item = itemMap.get(itemId);
+          if (item) item.index = i;
+        });
+      }
+    },
+    getItemIndex: (id) => {
+      const item = itemMap.get(id);
+      return item ? item.index : -1;
+    },
+    jump
+  })
+);
+onMounted(() => {
+  startAutoplay();
+  if (props.keyboard) {
+    window.addEventListener("keydown", handleKeyDown);
+  }
+});
+onUnmounted(() => {
+  stopAutoplay();
+  if (keydownRaf !== null) cancelAnimationFrame(keydownRaf);
+  if (wheelRaf !== null) cancelAnimationFrame(wheelRaf);
+  window.removeEventListener("keydown", handleKeyDown);
+});
+watch(
+  () => props.autoplay,
+  (val) => {
+    if (val) {
+      startAutoplay();
+    } else {
+      stopAutoplay();
+    }
+  }
+);
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :class="[ns.b(), ns.m(props.direction), ns.m(props.effect), {
+  'has-arrow': props.showArrow !== 'never' && itemCount > 1
+}, dotsAtClass]"
+    :style="themeStyle"
+    @mouseenter="isHovering = true"
+    @mouseleave="isHovering = false"
+    @wheel="handleWheel"
+  >
+    <!-- 轮播主轨道 -->
+    <div
+      :class="[ns.e('slides'), ns.is('vertical', props.direction === 'vertical')]"
+      :style="trackStyle"
+    >
+      <slot />
+    </div>
+
+    <!-- 指示点 -->
+    <slot
+      name="dots"
+      v-if="props.showDots && itemCount > 0"
+      :total="itemCount"
+      :current-index="internalIndex"
+      :to="jump"
+    >
+      <div
+        :class="[ns.e('dots'), ns.em('dots', effectiveDotPlacement), ns.em('dots', props.dotType)]"
+      >
+        <div
+          v-for="i in itemCount"
+          :key="i"
+          :class="[ns.e('dots-item'), ns.is('active', internalIndex === i - 1)]"
+          @click="handleDotTrigger(i - 1, 'click')"
+          @mouseenter="handleDotTrigger(i - 1, 'hover')"
+        ></div>
+      </div>
+    </slot>
+
+    <!-- 左右箭头 -->
+    <slot
+      name="arrow"
+      v-if="props.showArrow !== 'never' && itemCount > 1"
+      :total="itemCount"
+      :current-index="internalIndex"
+      :to="jump"
+      :prev="prev"
+      :next="next"
+    >
+      <div
+        :class="[ns.e('arrow'), ns.em('arrow', 'prev'), ns.is('visible', props.showArrow === 'always' || props.showArrow === 'hover' && isHovering), ns.is('vertical', props.direction === 'vertical')]"
+        :aria-label="t('carousel.prev')"
+        @click="prev"
+      >
+        <slot name="prev-arrow">
+          <svg
+            viewBox="0 0 1024 1024"
+            :width="20"
+            :height="20"
+            fill="currentColor"
+            :class="ns.e('arrow-icon')"
+          >
+            <path
+              d="M603.3 172.7c11-10.4 28.5-9.9 38.9 1.1s9.9 28.5-1.1 38.9L322.6 512l318.5 299.3c11 10.4 11.5 27.9 1.1 38.9s-27.9 11.5-38.9 1.1L256 512l347.3-339.3z"
+            />
+          </svg>
+        </slot>
+      </div>
+      <div
+        :class="[ns.e('arrow'), ns.em('arrow', 'next'), ns.is('visible', props.showArrow === 'always' || props.showArrow === 'hover' && isHovering), ns.is('vertical', props.direction === 'vertical')]"
+        :aria-label="t('carousel.next')"
+        @click="next"
+      >
+        <slot name="next-arrow">
+          <svg
+            viewBox="0 0 1024 1024"
+            :width="20"
+            :height="20"
+            fill="currentColor"
+            :class="ns.e('arrow-icon')"
+          >
+            <path
+              d="M420.7 851.3c-11 10.4-28.5 9.9-38.9-1.1s-9.9-28.5 1.1-38.9L701.4 512 382.9 212.7c-11-10.4-11.5-27.9-1.1-38.9s27.9-11.5 38.9-1.1L768 512l-347.3 339.3z"
+            />
+          </svg>
+        </slot>
+      </div>
+    </slot>
+  </div>
+</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-carousel {
+  --yh-carousel-dot-color: rgba(255, 255, 255, 0.4);
+  --yh-carousel-dot-active-color: #ffffff;
+  --yh-carousel-dot-size: 8px;
+  --yh-carousel-dot-active-width: 24px;
+  --yh-carousel-arrow-bg: rgba(255, 255, 255, 0.2);
+  --yh-carousel-arrow-hover-bg: rgba(255, 255, 255, 0.35);
+  --yh-carousel-arrow-color: #ffffff;
+  --yh-carousel-arrow-size: 36px;
+  --yh-carousel-arrow-icon-size: 20px;
+  --yh-carousel-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+  background-color: transparent;
+}
+.yh-carousel__slides {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  transition-timing-function: var(--yh-carousel-transition-timing);
+  will-change: transform;
+}
+.yh-carousel__slides.is-vertical {
+  flex-direction: column;
+}
+
+.yh-carousel__dots {
+  position: absolute;
+  z-index: 20;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  pointer-events: none;
+}
+.yh-carousel__dots--bottom {
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.yh-carousel__dots--top {
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.yh-carousel__dots--left {
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.yh-carousel__dots--right {
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.yh-carousel__dots--inner-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.yh-carousel__dots--inner-top {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.yh-carousel__dots--inner-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.yh-carousel__dots--inner-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.yh-carousel__dots-item {
+  width: var(--yh-carousel-dot-size);
+  height: var(--yh-carousel-dot-size);
+  border-radius: calc(var(--yh-carousel-dot-size) / 2);
+  background-color: var(--yh-carousel-dot-color);
+  cursor: pointer;
+  pointer-events: auto;
+  transition: all 0.3s var(--yh-carousel-transition-timing);
+}
+.yh-carousel__dots-item:hover {
+  background-color: var(--yh-carousel-dot-active-color);
+  opacity: 0.8;
+}
+.yh-carousel__dots-item.is-active {
+  width: var(--yh-carousel-dot-active-width);
+  background-color: var(--yh-carousel-dot-active-color);
+}
+
+.yh-carousel {
+  --yh-carousel-arrow-zone: 52px;
+}
+.yh-carousel:not(.yh-carousel--vertical).has-arrow.dots-at-left .yh-carousel__arrow--prev {
+  left: var(--yh-carousel-arrow-zone);
+}
+.yh-carousel:not(.yh-carousel--vertical).has-arrow.dots-at-right .yh-carousel__arrow--next {
+  right: var(--yh-carousel-arrow-zone);
+}
+.yh-carousel__arrow {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--yh-carousel-arrow-size);
+  height: var(--yh-carousel-arrow-size);
+  border-radius: 50%;
+  background-color: var(--yh-carousel-arrow-bg);
+  color: var(--yh-carousel-arrow-color);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
+  opacity: 0;
+  --arrow-inset: 20px;
+}
+.yh-carousel__arrow:hover {
+  background-color: var(--yh-carousel-arrow-hover-bg);
+  /* 不添加 transform，避免横向/纵向箭头 hover 时出现下移或位移 */
+}
+.yh-carousel__arrow--prev {
+  left: var(--arrow-inset);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.yh-carousel__arrow--next {
+  right: var(--arrow-inset);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.yh-carousel__arrow.is-visible {
+  opacity: 1;
+}
+
+.yh-carousel__arrow-icon {
+  width: var(--yh-carousel-arrow-icon-size);
+  height: var(--yh-carousel-arrow-icon-size);
+  flex-shrink: 0;
+}
+
+.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--prev {
+  left: 50%;
+  right: auto;
+  top: var(--arrow-inset, 20px);
+  bottom: auto;
+  transform: translateX(-50%);
+}
+.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--next {
+  left: 50%;
+  right: auto;
+  top: auto;
+  bottom: var(--arrow-inset, 20px);
+  transform: translateX(-50%);
+}
+.yh-carousel.yh-carousel--vertical.has-arrow.dots-at-top .yh-carousel__arrow--prev {
+  top: var(--yh-carousel-arrow-zone);
+}
+.yh-carousel.yh-carousel--vertical.has-arrow.dots-at-bottom .yh-carousel__arrow--next {
+  bottom: var(--yh-carousel-arrow-zone);
+}
+.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--prev:hover,
+.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--next:hover {
+  /* 仅背景色变化，无位移/缩放 */
+  transform: translateX(-50%);
+}
+.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--prev .yh-carousel__arrow-icon {
+  transform: rotate(-90deg); /* 左箭头逆时针90° → 指向上 */
+}
+.yh-carousel.yh-carousel--vertical .yh-carousel__arrow--next .yh-carousel__arrow-icon {
+  transform: rotate(-90deg); /* 右箭头逆时针90° → 指向下 */
+}
+.yh-carousel:hover .yh-carousel__arrow--hover {
+  opacity: 1;
+}
+.yh-carousel:hover .yh-carousel__arrow--hover.yh-carousel-arrow--prev {
+  transform: translateY(-50%) translateX(0);
+}
+.yh-carousel:hover .yh-carousel__arrow--hover.yh-carousel-arrow--next {
+  transform: translateY(-50%) translateX(0);
+}
+
+.yh-carousel__arrow-always {
+  opacity: 1;
+}
+.yh-carousel__arrow-always--prev {
+  transform: translateY(-50%) translateX(0);
+}
+
+.yh-carousel__arrow-always--next {
+  transform: translateY(-50%) translateX(0);
+}
+
+.yh-carousel-item {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.yh-carousel-item.is-fade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--yh-carousel-transition-timing);
+}
+.yh-carousel-item.is-fade.is-active {
+  opacity: 1;
+  z-index: 2;
+}
+
+.yh-carousel-item.is-card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.4s var(--yh-carousel-transition-timing), opacity 0.4s ease;
+  opacity: 0;
+  z-index: 1;
+}
+.yh-carousel-item.is-card.is-in-stage {
+  opacity: 1;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.yh-carousel-item.is-card.is-active {
+  z-index: 10;
+}
+
+/* Dot Type: Line 支持 */
+.yh-carousel__dots--line .yh-carousel__dots-item {
+  width: 24px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: var(--yh-carousel-dot-color, rgba(255, 255, 255, 0.4));
+  transition: all 0.3s;
+}
+.yh-carousel__dots--line .yh-carousel__dots-item.is-active {
+  width: 32px;
+  background-color: var(--yh-carousel-dot-active-color, #fff);
+}
+
+/* left/right 的 line 为纵向条 */
+.yh-carousel__dots--left.yh-carousel__dots--line,
+.yh-carousel__dots--right.yh-carousel__dots--line {
+  transform: translateY(-50%);
+}
+.yh-carousel__dots--left.yh-carousel__dots--line .yh-carousel__dots-item,
+.yh-carousel__dots--right.yh-carousel__dots--line .yh-carousel__dots-item {
+  width: 4px;
+  height: 24px;
+  border-radius: 2px;
+}
+.yh-carousel__dots--left.yh-carousel__dots--line .yh-carousel__dots-item.is-active,
+.yh-carousel__dots--right.yh-carousel__dots--line .yh-carousel__dots-item.is-active {
+  width: 4px;
+  height: 32px;
+}
+</style>