@yh-ui/components 0.1.16 → 0.1.21

package/dist/filter-bar/src/filter-bar.vue

@@ -0,0 +1,1087 @@
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import { useNamespace } from "@yh-ui/hooks";
+import { useComponentTheme } from "@yh-ui/theme";
+import { useLocale } from "@yh-ui/hooks";
+import { filterBarProps, filterBarEmits } from "./filter-bar";
+defineOptions({ name: "YhFilterBar" });
+const props = defineProps(filterBarProps);
+const emit = defineEmits(filterBarEmits);
+const ns = useNamespace("filter-bar");
+const { themeStyle } = useComponentTheme(
+  "filter-bar",
+  computed(() => props.themeOverrides)
+);
+const { t } = useLocale();
+const innerSort = ref({ ...props.sort });
+watch(
+  () => props.sort,
+  (v) => {
+    innerSort.value = { ...v };
+  },
+  { deep: true }
+);
+function handleSortClick(key) {
+  let order;
+  if (innerSort.value.key !== key) {
+    order = "desc";
+  } else if (innerSort.value.order === "desc") {
+    order = "asc";
+  } else if (innerSort.value.order === "asc") {
+    order = null;
+  } else {
+    order = "desc";
+  }
+  const newSort = { key: order === null ? null : key, order };
+  innerSort.value = newSort;
+  emit("update:sort", newSort);
+  emit("sortChange", newSort);
+}
+const isPanelOpen = ref(false);
+const panelFilter = ref(null);
+const tempPanelValue = ref({});
+const innerFilterValue = ref({ ...props.filterValue });
+watch(
+  () => props.filterValue,
+  (v) => {
+    innerFilterValue.value = { ...v };
+  },
+  { deep: true }
+);
+function openFilterPanel(item) {
+  panelFilter.value = item;
+  tempPanelValue.value = { ...innerFilterValue.value };
+  isPanelOpen.value = true;
+}
+function closePanel() {
+  isPanelOpen.value = false;
+  panelFilter.value = null;
+}
+function confirmPanel() {
+  innerFilterValue.value = { ...tempPanelValue.value };
+  emit("update:filterValue", { ...innerFilterValue.value });
+  emit("filterChange", { ...innerFilterValue.value });
+  emit("confirm", { ...innerFilterValue.value });
+  closePanel();
+}
+function resetPanel() {
+  if (panelFilter.value) {
+    const key = panelFilter.value.key;
+    tempPanelValue.value = { ...tempPanelValue.value, [key]: null };
+    emit("resetPanel", panelFilter.value, tempPanelValue.value);
+    confirmPanel();
+  }
+}
+function resetAll() {
+  innerFilterValue.value = {};
+  innerSort.value = { key: null, order: null };
+  emit("update:filterValue", {});
+  emit("update:sort", { key: null, order: null });
+  emit("reset");
+}
+function toggleOption(item, option) {
+  const key = item.key;
+  const currentVal = tempPanelValue.value[key];
+  if (item.type === "checkbox") {
+    const arr = Array.isArray(currentVal) ? [...currentVal] : [];
+    const idx = arr.indexOf(option.value);
+    if (idx >= 0) arr.splice(idx, 1);
+    else arr.push(option.value);
+    tempPanelValue.value = { ...tempPanelValue.value, [key]: arr.length ? arr : null };
+  } else {
+    const newVal = currentVal === option.value ? null : option.value;
+    tempPanelValue.value = { ...tempPanelValue.value, [key]: newVal };
+    if (!props.filterInPanel) {
+      innerFilterValue.value = { ...tempPanelValue.value };
+      emit("update:filterValue", { ...innerFilterValue.value });
+      emit("filterChange", { ...innerFilterValue.value });
+    }
+  }
+}
+function isOptionSelected(item, option) {
+  const val = props.filterInPanel ? tempPanelValue.value[item.key] : innerFilterValue.value[item.key];
+  if (item.type === "checkbox") {
+    return Array.isArray(val) && val.includes(option.value);
+  }
+  return val === option.value;
+}
+const activeFilterCount = computed(() => {
+  return Object.values(innerFilterValue.value).filter((v) => {
+    if (v === null || v === void 0) return false;
+    if (Array.isArray(v)) return v.length > 0;
+    return true;
+  }).length;
+});
+const barRef = ref(null);
+const isStuck = ref(false);
+let observer = null;
+onMounted(() => {
+  if (!props.sticky || typeof IntersectionObserver === "undefined") return;
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      isStuck.value = !entry.isIntersecting;
+    },
+    { rootMargin: `-${props.stickyOffset}px 0px 0px 0px`, threshold: 1 }
+  );
+  if (barRef.value) observer.observe(barRef.value);
+});
+onUnmounted(() => {
+  observer?.disconnect();
+});
+function handleViewToggle() {
+  const next = props.viewType === "list" ? "grid" : "list";
+  emit("update:viewType", next);
+  emit("viewChange", next);
+}
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    :class="[ns.b(), ns.is('sticky', sticky), ns.is('stuck', isStuck)]"
+    :style="[themeStyle, sticky ? {
+  top: `${stickyOffset}px`
+} : {}]"
+  >
+    <!-- 筛选/排序 tab 行 -->
+    <div :class="ns.e('bar')">
+      <!-- 全部 tab -->
+      <button
+        v-if="showAll"
+        :class="[ns.e('tab'), ns.is('active', !innerSort.key && !activeFilterCount)]"
+        @click="resetAll"
+      >
+        {{ t('filterbar.all') }}
+      </button>
+
+      <!-- 排序 tabs -->
+      <button
+        v-for="sortItem in sorts"
+        :key="sortItem.key"
+        :class="[ns.e('tab'), ns.e('sort-tab'), ns.is('active', innerSort.key === sortItem.key)]"
+        @click="handleSortClick(sortItem.key)"
+      >
+        <span>{{ sortItem.label }}</span>
+        <span :class="[ns.e('sort-arrows')]">
+          <i
+            :class="[ns.e('arrow-up'), ns.is('active', innerSort.key === sortItem.key && innerSort.order === 'asc')]"
+          >
+            <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+              <path d="M512 320L192 704h640z" />
+            </svg>
+          </i>
+          <i
+            :class="[ns.e('arrow-down'), ns.is('active', innerSort.key === sortItem.key && innerSort.order === 'desc')]"
+          >
+            <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+              <path d="M512 704L832 320H192z" />
+            </svg>
+          </i>
+        </span>
+      </button>
+
+      <!-- 筛选 tabs -->
+      <template v-if="filterInPanel">
+        <button
+          v-for="filterItem in filters"
+          :key="filterItem.key"
+          :class="[ns.e('tab'), ns.e('filter-tab'), ns.is('active', !!innerFilterValue[filterItem.key] && (Array.isArray(innerFilterValue[filterItem.key]) ? innerFilterValue[filterItem.key].length > 0 : true))]"
+          @click="openFilterPanel(filterItem)"
+        >
+          <span>{{ filterItem.label }}</span>
+          <i :class="ns.e('arrow-icon')">
+            <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+              <path d="M512 704L832 320H192z" />
+            </svg>
+          </i>
+        </button>
+        <!-- 综合筛选按钮 -->
+        <button
+          v-if="showGlobalFilter"
+          :class="[ns.e('tab'), ns.e('filter-btn'), ns.is('active', activeFilterCount > 0)]"
+          @click="emit('openFilter')"
+        >
+          <span>{{ t("filterbar.filter") }}</span>
+          <span v-if="activeFilterCount" :class="ns.e('badge')">{{ activeFilterCount }}</span>
+          <slot name="filter-icon">
+            <i :class="ns.e('filter-icon')">
+              <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+                <path
+                  d="M880.005 224H143.995c-23.778 0-38.653 25.492-22.95 45.418L384 602.822v263.854c0 15.365 17.554 24.088 29.818 14.89l185.394-139.046c6.242-4.682 9.924-12.072 9.924-19.866V602.823l293.818-333.406c15.704-19.926.83-45.417-22.949-45.417z"
+                ></path>
+              </svg>
+            </i>
+          </slot>
+        </button>
+      </template>
+
+      <!-- 内联筛选 -->
+      <template v-else>
+        <div v-for="filterItem in filters" :key="filterItem.key" :class="ns.e('inline-filter')">
+          <span :class="ns.e('inline-label')">{{ filterItem.label }}</span>
+          <button
+            v-for="opt in filterItem.options"
+            :key="String(opt.value)"
+            :class="[ns.e('inline-opt'), ns.is('active', isOptionSelected(filterItem, opt))]"
+            @click="toggleOption(filterItem, opt)"
+          >
+            {{ opt.label }}
+          </button>
+        </div>
+      </template>
+
+      <!-- 视图切换按钮 -->
+      <button
+        v-if="showViewToggle"
+        :class="[ns.e('tab'), ns.e('view-btn')]"
+        @click="handleViewToggle"
+      >
+        <slot name="view-icon" :view-type="viewType">
+          <svg
+            v-if="viewType === 'list'"
+            viewBox="0 0 1024 1024"
+            width="1.2em"
+            height="1.2em"
+            fill="currentColor"
+          >
+            <path d="M128 320h768v85.333H128V320zM128 618.667h768V704H128v-85.333z" />
+          </svg>
+          <svg v-else viewBox="0 0 1024 1024" width="1.2em" height="1.2em" fill="currentColor">
+            <path
+              d="M213.333 213.333h256v256h-256v-256zM554.667 213.333h256v256h-256v-256zM213.333 554.667h256v256h-256v-256zM554.667 554.667h256v256h-256v-256z"
+            />
+          </svg>
+        </slot>
+      </button>
+
+      <!-- 自定义扩展区 -->
+      <slot name="extra" />
+    </div>
+
+    <!-- 筛选面板（下拉浮层） -->
+    <Transition :name="ns.b('panel')">
+      <div
+        v-if="isPanelOpen && filterInPanel && panelFilter"
+        :class="ns.e('panel')"
+        role="dialog"
+        :aria-label="t('filterbar.filter')"
+      >
+        <!-- 面板遮罩 -->
+        <div :class="ns.e('overlay')" @click="closePanel" />
+        <div :class="ns.e('panel-body')">
+          <!-- 标题 -->
+          <div :class="ns.e('panel-header')">
+            <span :class="ns.e('panel-title')">{{ panelFilter.label }}</span>
+            <button
+              :class="ns.e('panel-close')"
+              :aria-label="t('filterbar.cancel')"
+              @click="closePanel"
+            >
+              <svg viewBox="0 0 1024 1024" width="14" height="14" fill="currentColor">
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </button>
+          </div>
+          <!-- 内容 -->
+          <div :class="ns.e('panel-content')">
+            <slot
+              name="panel-content"
+              :filter="panelFilter"
+              :value="tempPanelValue"
+              :toggle="toggleOption"
+            >
+              <div v-if="panelFilter.options?.length" :class="ns.e('panel-options')">
+                <button
+                  v-for="opt in panelFilter.options"
+                  :key="String(opt.value)"
+                  :class="[ns.e('panel-opt'), ns.is('active', isOptionSelected(panelFilter, opt))]"
+                  @click="toggleOption(panelFilter, opt)"
+                >
+                  {{ opt.label }}
+                </button>
+              </div>
+              <p v-else :class="ns.e('no-options')">
+                {{ t("filterbar.noOptions") }}
+              </p>
+            </slot>
+          </div>
+          <!-- 操作区 -->
+          <div :class="ns.e('panel-footer')">
+            <button :class="[ns.e('btn'), ns.e('btn-reset')]" @click="resetPanel">
+              {{ t("filterbar.reset") }}
+            </button>
+            <button :class="[ns.e('btn'), ns.e('btn-confirm')]" @click="confirmPanel">
+              {{ t("filterbar.confirm") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </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-filter-bar {
+  --yh-filter-bar-bg: var(--yh-bg-color);
+  --yh-filter-bar-border: var(--yh-border-color-lighter);
+  --yh-filter-bar-height: 44px;
+  --yh-filter-bar-tab-color: var(--yh-text-color-regular);
+  --yh-filter-bar-tab-active-color: var(--yh-color-primary);
+  --yh-filter-bar-tab-active-bg: var(--yh-color-primary-light-9);
+  --yh-filter-bar-tab-radius: var(--yh-radius-base);
+  --yh-filter-bar-badge-bg: var(--yh-color-danger);
+  --yh-filter-bar-panel-bg: var(--yh-bg-color);
+  --yh-filter-bar-panel-shadow: 0 4px 20px var(--yh-shadow-color);
+  --yh-filter-bar-panel-opt-bg: var(--yh-fill-color-light);
+  --yh-filter-bar-panel-opt-active-bg: var(--yh-color-primary-light-9);
+  --yh-filter-bar-panel-opt-active-color: var(--yh-color-primary);
+  --yh-filter-bar-panel-opt-active-border: var(--yh-color-primary);
+  --yh-filter-bar-z-index: 100;
+  position: relative;
+  background: var(--yh-filter-bar-bg);
+  border-bottom: 1px solid var(--yh-filter-bar-border);
+  z-index: var(--yh-filter-bar-z-index);
+  transition: box-shadow var(--yh-transition-base);
+}
+.yh-filter-bar.is-sticky {
+  position: sticky;
+  top: 0;
+}
+
+.yh-filter-bar.is-stuck {
+  box-shadow: 0 2px 12px var(--yh-shadow-color);
+}
+
+.yh-filter-bar__bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 12px;
+  height: var(--yh-filter-bar-height);
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.yh-filter-bar__bar::-webkit-scrollbar {
+  display: none;
+}
+
+.yh-filter-bar__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 5px 12px;
+  border: none;
+  background: transparent;
+  color: var(--yh-filter-bar-tab-color);
+  font-size: var(--yh-font-size-sm);
+  font-weight: var(--yh-font-weight-medium);
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: color var(--yh-transition-base), background var(--yh-transition-base);
+}
+.yh-filter-bar__tab:hover {
+  color: var(--yh-filter-bar-tab-active-color);
+}
+.yh-filter-bar__tab:active {
+  transform: scale(0.96);
+}
+.yh-filter-bar__tab.is-active {
+  color: var(--yh-filter-bar-tab-active-color);
+  background: transparent;
+  font-weight: 600;
+}
+
+.yh-filter-bar__view-btn {
+  margin-left: auto;
+  padding: 0 4px; /* Slightly tighter padding for the icon */
+  font-size: 16px; /* Icon size */
+  color: var(--yh-text-color-secondary);
+}
+.yh-filter-bar__view-btn:hover {
+  color: var(--yh-filter-bar-tab-active-color);
+}
+
+.yh-filter-bar__sort-arrows {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 1px;
+  font-size: 10px;
+  line-height: 1;
+  margin-left: 4px;
+  color: var(--yh-text-color-placeholder);
+}
+
+.yh-filter-bar__arrow-up {
+  display: inline-flex;
+  transition: color var(--yh-transition-base);
+}
+.yh-filter-bar__arrow-up.is-active {
+  color: var(--yh-filter-bar-tab-active-color);
+}
+
+.yh-filter-bar__arrow-down {
+  display: inline-flex;
+  transition: color var(--yh-transition-base);
+}
+.yh-filter-bar__arrow-down.is-active {
+  color: var(--yh-filter-bar-tab-active-color);
+}
+
+.yh-filter-bar__arrow-icon {
+  font-style: normal;
+  display: inline-flex;
+  font-size: 10px;
+  margin-left: 2px;
+  color: var(--yh-text-color-placeholder);
+  transition: transform var(--yh-transition-base);
+}
+
+.yh-filter-bar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--yh-filter-bar-badge-bg);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.yh-filter-bar__filter-icon {
+  font-style: normal;
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.yh-filter-bar__inline-filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.yh-filter-bar__inline-label {
+  font-size: var(--yh-font-size-xs);
+  color: var(--yh-text-color-secondary);
+  white-space: nowrap;
+}
+
+.yh-filter-bar__inline-opt {
+  padding: 4px 14px;
+  border: none;
+  border-radius: 999px;
+  background: var(--yh-fill-color-light);
+  font-size: var(--yh-font-size-xs);
+  font-weight: 500;
+  color: var(--yh-text-color-regular);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.3s ease, background 0.3s ease, transform 0.2s cubic-bezier(0.3, 1.5, 0.4, 1.5);
+}
+.yh-filter-bar__inline-opt:active {
+  transform: scale(0.95);
+}
+.yh-filter-bar__inline-opt.is-active {
+  color: var(--yh-filter-bar-tab-active-color);
+  background: var(--yh-filter-bar-panel-opt-active-bg);
+  font-weight: 600;
+}
+
+.yh-filter-bar__panel {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--yh-filter-bar-z-index) + 1);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.yh-filter-bar__overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--yh-overlay-color-light, rgba(0, 0, 0, 0.45));
+}
+
+.yh-filter-bar__panel-body {
+  position: relative;
+  background: var(--yh-filter-bar-panel-bg);
+  border-radius: var(--yh-radius-large) var(--yh-radius-large) 0 0;
+  box-shadow: var(--yh-filter-bar-panel-shadow);
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.yh-filter-bar__panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--yh-border-color-lighter);
+  flex-shrink: 0;
+}
+
+.yh-filter-bar__panel-title {
+  font-size: var(--yh-font-size-md);
+  font-weight: 600;
+  color: var(--yh-text-color-primary);
+}
+
+.yh-filter-bar__panel-close {
+  border: none;
+  background: none;
+  font-size: var(--yh-font-size-sm);
+  color: var(--yh-text-color-secondary);
+  cursor: pointer;
+  padding: 0;
+}
+
+.yh-filter-bar__panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.yh-filter-bar__panel-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.yh-filter-bar__panel-opt {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 999px;
+  background: var(--yh-filter-bar-panel-opt-bg);
+  font-size: var(--yh-font-size-sm);
+  color: var(--yh-text-color-regular);
+  cursor: pointer;
+  transition: color 0.3s ease, transform 0.3s ease, background 0.3s ease;
+}
+.yh-filter-bar__panel-opt:active {
+  transform: scale(0.95);
+}
+.yh-filter-bar__panel-opt.is-active {
+  color: var(--yh-filter-bar-panel-opt-active-color);
+  background: var(--yh-filter-bar-panel-opt-active-bg);
+  font-weight: 600;
+}
+
+.yh-filter-bar__no-options {
+  color: var(--yh-text-color-placeholder);
+  text-align: center;
+  font-size: var(--yh-font-size-sm);
+  padding: 20px 0;
+}
+
+.yh-filter-bar__panel-footer {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--yh-border-color-lighter);
+  flex-shrink: 0;
+}
+
+.yh-filter-bar__btn {
+  flex: 1;
+  height: 40px;
+  border-radius: var(--yh-radius-base);
+  font-size: var(--yh-font-size-base);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: background var(--yh-transition-base), color var(--yh-transition-base);
+}
+
+.yh-filter-bar__btn-reset {
+  background: var(--yh-fill-color-light);
+  color: var(--yh-text-color-regular);
+}
+
+.yh-filter-bar__btn-confirm {
+  background: var(--yh-color-primary);
+  color: #fff;
+}
+.yh-filter-bar__btn-confirm:hover {
+  background: var(--yh-color-primary-dark-2);
+}
+
+.yh-filter-bar-panel-enter-active,
+.yh-filter-bar-panel-leave-active {
+  transition: opacity 0.25s ease;
+}
+.yh-filter-bar-panel-enter-active .yh-filter-bar__panel-body,
+.yh-filter-bar-panel-leave-active .yh-filter-bar__panel-body {
+  transition: transform 0.25s ease;
+}
+
+.yh-filter-bar-panel-enter-from,
+.yh-filter-bar-panel-leave-to {
+  opacity: 0;
+}
+.yh-filter-bar-panel-enter-from .yh-filter-bar__panel-body,
+.yh-filter-bar-panel-leave-to .yh-filter-bar__panel-body {
+  transform: translateY(100%);
+}
+</style>