@yh-ui/components 0.1.0

package/dist/message-box/src/message-box.vue

@@ -0,0 +1,1148 @@
+<script setup>
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  h,
+  onMounted,
+  onUnmounted,
+  markRaw,
+  nextTick,
+  shallowReactive
+} from "vue";
+import { useNamespace, useScrollLock, useLocale } from "@yh-ui/hooks";
+import { useComponentTheme } from "@yh-ui/theme";
+import { YhButton } from "../../button";
+import { YhInput } from "../../input";
+import { YhIcon, IconClose, IconSuccess, IconWarning, IconError, IconInfo } from "../../icon";
+defineOptions({
+  name: "YhMessageBox",
+  inheritAttrs: false
+});
+const ns = useNamespace("message-box");
+const { t } = useLocale();
+const DEFAULT_OPTIONS = {
+  confirmButtonLoading: false,
+  cancelButtonLoading: false,
+  showClose: true,
+  lockScroll: true,
+  draggableBoundary: true,
+  autofocus: true,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  width: 420
+};
+const props = defineProps({
+  title: { type: String, required: false },
+  message: { type: [String, Object, Function], required: false },
+  type: { type: String, required: false },
+  dangerouslyUseHTMLString: { type: Boolean, required: false },
+  iconType: { type: String, required: false },
+  icon: { type: null, required: false },
+  confirmButtonText: { type: String, required: false },
+  cancelButtonText: { type: String, required: false },
+  showCancelButton: { type: Boolean, required: false },
+  showConfirmButton: { type: Boolean, required: false },
+  showClose: { type: Boolean, required: false },
+  closeOnClickModal: { type: Boolean, required: false },
+  closeOnPressEscape: { type: Boolean, required: false },
+  lockScroll: { type: Boolean, required: false },
+  glass: { type: Boolean, required: false },
+  center: { type: Boolean, required: false },
+  roundButton: { type: Boolean, required: false },
+  draggable: { type: Boolean, required: false },
+  draggableBoundary: { type: Boolean, required: false },
+  width: { type: [String, Number], required: false },
+  customClass: { type: String, required: false },
+  inputPlaceholder: { type: String, required: false },
+  inputValue: { type: String, required: false },
+  inputPattern: { type: null, required: false },
+  inputValidator: { type: Function, required: false },
+  inputErrorMessage: { type: String, required: false },
+  beforeClose: { type: Function, required: false },
+  callback: { type: Function, required: false },
+  appContext: { type: [Object, null], required: false },
+  autofocus: { type: Boolean, required: false },
+  appendTo: { type: null, required: false },
+  confirmButtonLoading: { type: Boolean, required: false },
+  cancelButtonLoading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  themeOverrides: { type: null, required: false }
+});
+const { themeStyle } = useComponentTheme(
+  "message-box",
+  computed(() => state.options.themeOverrides)
+);
+const visible = ref(
+  typeof window === "undefined" || !!props.title || !!props.message || !!props.type || !!props.glass
+);
+const boxRef = ref(null);
+const inputRef = ref(null);
+const confirmRef = ref(null);
+const state = shallowReactive({
+  options: Object.assign({}, DEFAULT_OPTIONS, props),
+  confirmLoading: false,
+  cancelLoading: false,
+  inputValue: props.inputValue || "",
+  validateError: ""
+});
+watch(
+  props,
+  (val) => {
+    state.options = { ...state.options, ...val };
+  },
+  { deep: true }
+);
+watch(
+  () => visible.value,
+  async (val) => {
+    if (val && state.options.autofocus !== false) {
+      await nextTick();
+      if (state.options.type === "prompt") {
+        inputRef.value?.focus?.();
+      } else {
+        const el = confirmRef.value?.$el || confirmRef.value;
+        el?.focus?.();
+      }
+    }
+  }
+);
+const shouldLockScroll = computed(() => !!(visible.value && state.options.lockScroll));
+useScrollLock(shouldLockScroll);
+const isDragging = ref(false);
+const transform = reactive({ x: 0, y: 0 });
+const onMousedown = (e) => {
+  if (!state.options.draggable || !boxRef.value) return;
+  if (e.target.closest(`.${ns.e("close")}`)) return;
+  isDragging.value = true;
+  e.preventDefault();
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const { x: initialX, y: initialY } = transform;
+  const onMousemove = (moveE) => {
+    if (!isDragging.value) return;
+    const deltaX = moveE.clientX - startX;
+    const deltaY = moveE.clientY - startY;
+    let nextX = initialX + deltaX;
+    let nextY = initialY + deltaY;
+    if (state.options.draggableBoundary && boxRef.value) {
+      const rect = boxRef.value.getBoundingClientRect();
+      const viewportW = window.innerWidth;
+      const viewportH = window.innerHeight;
+      const maxX = Math.max(0, (viewportW - rect.width) / 2);
+      const maxY = Math.max(0, (viewportH - rect.height) / 2);
+      nextX = Math.max(-maxX, Math.min(maxX, nextX));
+      nextY = Math.max(-maxY, Math.min(maxY, nextY));
+    }
+    transform.x = nextX;
+    transform.y = nextY;
+  };
+  const onMouseup = () => {
+    isDragging.value = false;
+    document.removeEventListener("mousemove", onMousemove);
+    document.removeEventListener("mouseup", onMouseup);
+  };
+  document.addEventListener("mousemove", onMousemove);
+  document.addEventListener("mouseup", onMouseup);
+};
+let isMousedownOnWrapper = false;
+const handleWrapperMousedown = (e) => {
+  isMousedownOnWrapper = e.target === e.currentTarget;
+};
+const handleWrapperClick = (e) => {
+  if (isMousedownOnWrapper && e.target === e.currentTarget) {
+    if (state.options.closeOnClickModal) {
+      handleAction("close");
+    }
+  }
+  isMousedownOnWrapper = false;
+};
+const validate = () => {
+  if (state.options.type !== "prompt") return true;
+  const { inputPattern, inputValidator, inputErrorMessage } = state.options;
+  const value = state.inputValue;
+  if (inputPattern && !inputPattern.test(value)) {
+    state.validateError = inputErrorMessage || t("messagebox.error");
+    return false;
+  }
+  if (inputValidator) {
+    const result = inputValidator(value);
+    if (typeof result === "string") {
+      state.validateError = result;
+      return false;
+    } else if (result === false) {
+      state.validateError = inputErrorMessage || t("messagebox.error");
+      return false;
+    }
+  }
+  state.validateError = "";
+  return true;
+};
+watch(
+  () => state.inputValue,
+  () => {
+    if (state.options.type === "prompt" && state.validateError) {
+      validate();
+    }
+  }
+);
+const open = (options) => {
+  const { appContext, ...rest } = options;
+  state.options = {
+    ...DEFAULT_OPTIONS,
+    ...rest,
+    appContext: appContext ? markRaw(appContext) : null
+  };
+  state.inputValue = options.inputValue || "";
+  state.validateError = "";
+  state.confirmLoading = false;
+  state.cancelLoading = false;
+  transform.x = 0;
+  transform.y = 0;
+  visible.value = true;
+};
+const close = () => {
+  visible.value = false;
+};
+const handleAction = (action) => {
+  if (action === "confirm" && !validate()) {
+    return;
+  }
+  if (state.options.beforeClose) {
+    state.options.beforeClose(action, exposed, () => {
+      state.confirmLoading = false;
+      state.cancelLoading = false;
+      doClose(action);
+    });
+  } else {
+    doClose(action);
+  }
+};
+let _callback;
+const setCallback = (cb) => {
+  _callback = cb;
+};
+const doClose = (action) => {
+  close();
+  if (_callback) {
+    _callback({
+      action,
+      value: state.inputValue
+    });
+  }
+};
+const onKeydown = (e) => {
+  if (visible.value && state.options.closeOnPressEscape && e.code === "Escape") {
+    handleAction("close");
+  }
+};
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onUnmounted(() => {
+  document.removeEventListener("keydown", onKeydown);
+});
+const MessageContent = () => {
+  const { message, dangerouslyUseHTMLString } = state.options;
+  if (!message) return null;
+  if (typeof message === "function") return message();
+  if (typeof message === "object") return message;
+  if (dangerouslyUseHTMLString) {
+    return h("div", { class: ns.e("html"), innerHTML: message });
+  }
+  return h("span", message);
+};
+const boxStyle = computed(() => ({
+  width: typeof state.options.width === "number" ? `${state.options.width}px` : state.options.width,
+  transform: `translate(${transform.x}px, ${transform.y}px)`
+}));
+const exposed = reactive({
+  open,
+  close,
+  setCallback,
+  get confirmLoading() {
+    return state.confirmLoading;
+  },
+  set confirmLoading(val) {
+    state.confirmLoading = val;
+  },
+  get cancelLoading() {
+    return state.cancelLoading;
+  },
+  set cancelLoading(val) {
+    state.cancelLoading = val;
+  }
+});
+defineExpose(exposed);
+const getStatusIcon = (type) => {
+  switch (type) {
+    case "success":
+      return IconSuccess;
+    case "warning":
+      return IconWarning;
+    case "error":
+      return IconError;
+    default:
+      return IconInfo;
+  }
+};
+</script>
+
+<template>
+  <Transition :name="ns.b('fade')">
+    <div
+      v-if="visible"
+      :class="ns.b('wrapper')"
+      @mousedown="handleWrapperMousedown"
+      @click="handleWrapperClick"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        ref="boxRef"
+        :class="[ns.b(), state.options.customClass, {
+  [ns.m('glass')]: state.options.glass
+}, {
+  [ns.m('center')]: state.options.center
+}, {
+  'is-dragging': isDragging
+}]"
+        :style="[boxStyle, themeStyle]"
+      >
+        <div v-if="state.options.glass" :class="ns.e('bg')" />
+
+        <div
+          :class="[ns.e('header'), {
+  'is-draggable': state.options.draggable
+}]"
+          @mousedown="onMousedown"
+        >
+          <div :class="ns.e('title')">{{ state.options.title || t("messagebox.title") }}</div>
+          <button
+            v-if="state.options.showClose !== false"
+            :class="ns.e('close')"
+            @click="handleAction('close')"
+            :aria-label="t('messagebox.close')"
+          >
+            <YhIcon :svg="IconClose.svg" :view-box="IconClose.viewBox" />
+          </button>
+        </div>
+
+        <div :class="ns.e('content')">
+          <div
+            v-if="state.options.iconType || state.options.icon"
+            :class="[ns.e('status'), ns.is(state.options.iconType || '')]"
+          >
+            <template v-if="state.options.icon">
+              <component
+                :is="typeof state.options.icon === 'string' ? YhIcon : state.options.icon"
+                v-bind="typeof state.options.icon === 'string' ? {
+  name: state.options.icon
+} : {}"
+              />
+            </template>
+            <YhIcon
+              v-else-if="state.options.iconType"
+              :svg="getStatusIcon(state.options.iconType).svg"
+              :view-box="getStatusIcon(state.options.iconType).viewBox"
+            />
+          </div>
+          <div :class="ns.e('message')">
+            <MessageContent />
+          </div>
+        </div>
+
+        <div v-if="state.options.type === 'prompt'" :class="ns.e('input')">
+          <YhInput
+            ref="inputRef"
+            v-model="state.inputValue"
+            :placeholder="state.options.inputPlaceholder"
+            :class="{
+  'is-error': !!state.validateError
+}"
+            @keyup.enter="handleAction('confirm')"
+            @blur="validate"
+            @input="state.validateError && validate()"
+          />
+          <Transition name="yh-zoom-in-top">
+            <div v-show="state.validateError" :class="ns.e('err-msg')">
+              {{ state.validateError }}
+            </div>
+          </Transition>
+        </div>
+
+        <div :class="ns.e('footer')">
+          <YhButton
+            v-if="state.options.showCancelButton !== false"
+            size="small"
+            :round="state.options.roundButton"
+            :loading="state.cancelLoading || state.options.cancelButtonLoading"
+            :disabled="state.confirmLoading || state.cancelLoading"
+            @click="handleAction('cancel')"
+          >
+            {{ state.options.cancelButtonText || t("messagebox.cancel") }}
+          </YhButton>
+          <YhButton
+            v-if="state.options.showConfirmButton !== false"
+            ref="confirmRef"
+            type="primary"
+            size="small"
+            :loading="state.confirmLoading || state.options.confirmButtonLoading"
+            :disabled="state.confirmLoading || state.cancelLoading"
+            :round="state.options.roundButton"
+            @click="handleAction('confirm')"
+          >
+            {{ state.options.confirmButtonText || t("messagebox.confirm") }}
+          </YhButton>
+        </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-message-box-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  padding-right: var(--yh-scrollbar-width, 0px);
+  overflow: hidden;
+}
+
+.yh-message-box {
+  position: relative;
+  background: var(--yh-bg-color-overlay, #ffffff);
+  border-radius: 20px;
+  border: 1px solid var(--yh-border-color-light, #ebeef5);
+  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
+  width: 420px;
+  max-width: 90vw;
+  outline: none;
+  overflow: visible;
+  transform-origin: center center;
+  backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+}
+.yh-message-box.is-dragging {
+  transition: none !important;
+}
+.yh-message-box--glass {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+.yh-message-box--glass .yh-message-box__bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35));
+  backdrop-filter: blur(25px) saturate(180%);
+  -webkit-backdrop-filter: blur(25px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2), 0 20px 60px rgba(0, 0, 0, 0.15);
+  transform: translate3d(0, 0, 0);
+  will-change: transform;
+}
+.yh-message-box--glass .yh-message-box__bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.04;
+  pointer-events: none;
+  border-radius: inherit;
+  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");
+}
+@media (prefers-color-scheme: dark) {
+  .yh-message-box--glass .yh-message-box__bg {
+    background: linear-gradient(135deg, rgba(45, 45, 45, 0.85), rgba(30, 30, 30, 0.7));
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+}
+:root.dark .yh-message-box--glass .yh-message-box__bg, html.dark .yh-message-box--glass .yh-message-box__bg, body.dark .yh-message-box--glass .yh-message-box__bg {
+  background: linear-gradient(135deg, rgba(45, 45, 45, 0.85), rgba(30, 30, 30, 0.7));
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.yh-message-box--glass .yh-message-box__header .yh-message-box__title {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+@media (prefers-color-scheme: dark) {
+  .yh-message-box--glass .yh-message-box__header .yh-message-box__title {
+    color: #ffffff;
+  }
+}
+:root.dark .yh-message-box--glass .yh-message-box__header .yh-message-box__title, html.dark .yh-message-box--glass .yh-message-box__header .yh-message-box__title, body.dark .yh-message-box--glass .yh-message-box__header .yh-message-box__title {
+  color: #ffffff;
+}
+
+.yh-message-box--glass .yh-message-box__message {
+  font-weight: 500;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+@media (prefers-color-scheme: dark) {
+  .yh-message-box--glass .yh-message-box__message {
+    color: #ffffff;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+:root.dark .yh-message-box--glass .yh-message-box__message, html.dark .yh-message-box--glass .yh-message-box__message, body.dark .yh-message-box--glass .yh-message-box__message {
+  color: #ffffff;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.yh-message-box--glass .yh-message-box__footer .yh-button:not(.yh-button--primary) {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+@media (prefers-color-scheme: dark) {
+  .yh-message-box--glass .yh-message-box__footer .yh-button:not(.yh-button--primary) {
+    color: #ffffff;
+  }
+}
+:root.dark .yh-message-box--glass .yh-message-box__footer .yh-button:not(.yh-button--primary), html.dark .yh-message-box--glass .yh-message-box__footer .yh-button:not(.yh-button--primary), body.dark .yh-message-box--glass .yh-message-box__footer .yh-button:not(.yh-button--primary) {
+  color: #ffffff;
+}
+
+.yh-message-box--center .yh-message-box__header {
+  justify-content: center;
+}
+.yh-message-box--center .yh-message-box__header .yh-message-box__close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+
+.yh-message-box--center .yh-message-box__content {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 24px;
+}
+
+.yh-message-box--center .yh-message-box__status {
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 40px;
+}
+
+.yh-message-box--center .yh-message-box__footer {
+  justify-content: center;
+}
+
+.yh-message-box__header {
+  padding: 24px 24px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.yh-message-box__header.is-draggable {
+  cursor: move;
+  user-select: none;
+}
+
+.yh-message-box__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--yh-text-color-primary, #1d1d1f);
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.yh-message-box__close {
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  color: var(--yh-text-color-placeholder);
+  font-size: 20px;
+  transition: all 0.2s;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.yh-message-box__close:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--yh-text-color-primary);
+  transform: rotate(90deg);
+}
+
+.yh-message-box__content {
+  padding: 12px 24px 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.yh-message-box__status {
+  font-size: 28px;
+  display: flex;
+  align-items: center;
+}
+.yh-message-box__status.is-success {
+  color: #34c759;
+}
+.yh-message-box__status.is-warning {
+  color: #ff9f0a;
+}
+.yh-message-box__status.is-error {
+  color: #ff3b30;
+}
+.yh-message-box__status.is-info {
+  color: #007aff;
+}
+
+.yh-message-box__message {
+  font-size: 15px;
+  color: var(--yh-text-color-regular, #3a3a3c);
+  line-height: 1.6;
+  flex: 1;
+}
+
+.yh-message-box__input {
+  padding: 0 24px 20px;
+}
+.yh-message-box__input .yh-input.is-error {
+  --yh-input-border-color: var(--yh-color-danger);
+  --yh-input-hover-border-color: var(--yh-color-danger);
+  --yh-input-focus-border-color: var(--yh-color-danger);
+}
+
+.yh-message-box__err-msg {
+  color: var(--yh-color-danger);
+  font-size: 12px;
+  margin-top: 4px;
+  padding-left: 2px;
+}
+
+.yh-message-box__footer {
+  padding: 12px 24px 24px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+}
+.yh-message-box__footer .yh-button {
+  min-width: 80px;
+  font-weight: 500;
+}
+.yh-message-box__footer .yh-button--small {
+  padding: 8px 16px;
+  height: auto;
+}
+
+.yh-message-box {
+  /* 响应式适配 */
+}
+@media (max-width: 480px) {
+  .yh-message-box {
+    width: calc(100vw - 32px);
+    margin: 0 16px;
+    border-radius: 16px;
+  }
+  .yh-message-box__header {
+    padding: 20px 20px 8px;
+  }
+  .yh-message-box__content {
+    padding: 8px 20px 20px;
+  }
+  .yh-message-box__footer {
+    padding: 8px 20px 20px;
+  }
+}
+
+.yh-zoom-in-top-enter-active,
+.yh-zoom-in-top-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+  transform-origin: top;
+}
+
+.yh-zoom-in-top-enter-from,
+.yh-zoom-in-top-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+html.yh-popup-parent--hidden {
+  overflow: hidden !important;
+}
+html.yh-popup-parent--hidden body {
+  overflow: hidden !important;
+}
+
+.yh-message-box-fade-enter-active {
+  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.yh-message-box-fade-enter-active .yh-message-box__bg {
+  backdrop-filter: blur(10px) saturate(150%);
+}
+.yh-message-box-fade-leave-active {
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+.yh-message-box-fade-enter-from, .yh-message-box-fade-leave-to {
+  opacity: 0;
+}
+.yh-message-box-fade-enter-from .yh-message-box, .yh-message-box-fade-leave-to .yh-message-box {
+  transform: scale(0.95) translate3d(0, -15px, 0);
+}
+</style>