@yh-ui/components 0.1.0

package/dist/tree/src/tree.vue

@@ -0,0 +1,1081 @@
+<script setup>
+import { ref, computed, provide, watch, shallowRef } from "vue";
+import { useNamespace, useLocale } from "@yh-ui/hooks";
+import { useComponentTheme } from "@yh-ui/theme";
+import { treeProps, treeEmits, TREE_INJECTION_KEY } from "./tree";
+import TreeNodeComponent from "./tree-node.vue";
+defineOptions({ name: "YhTree" });
+const props = defineProps(treeProps);
+const emit = defineEmits(treeEmits);
+const ns = useNamespace("tree");
+const { t } = useLocale();
+const { themeStyle } = useComponentTheme(
+  "tree",
+  computed(() => props.themeOverrides)
+);
+const expandedKeys = ref(new Set(props.defaultExpandedKeys));
+const checkedKeys = ref(new Set(props.defaultCheckedKeys));
+const currentNodeKey = ref(props.currentNodeKey);
+const nodeMap = shallowRef(/* @__PURE__ */ new Map());
+const treeNodes = ref([]);
+const scrollTop = ref(0);
+const handleScroll = (e) => {
+  scrollTop.value = e.target.scrollTop;
+};
+const totalHeight = computed(() => flattenedNodes.value.length * props.itemHeight);
+const startIndex = computed(() => Math.floor(scrollTop.value / props.itemHeight));
+const visibleCount = computed(() => Math.ceil(props.height / props.itemHeight));
+const endIndex = computed(() => startIndex.value + visibleCount.value);
+const visibleNodes = computed(
+  () => flattenedNodes.value.slice(startIndex.value, endIndex.value + 1)
+);
+const offset = computed(() => startIndex.value * props.itemHeight);
+const buildTree = (data, parent = null, level = 0) => {
+  const {
+    label: labelKey = "label",
+    children: childrenKey = "children",
+    disabled: disabledKey = "disabled"
+  } = props.props || {};
+  return data.map((item) => {
+    const key = item[props.nodeKey] ?? item.key ?? item.id;
+    const node = {
+      ...item,
+      key,
+      label: String(item[labelKey] ?? item.label ?? ""),
+      disabled: !!item[disabledKey] || !!item.disabled,
+      level,
+      parent,
+      expanded: props.defaultExpandAll || expandedKeys.value.has(key),
+      checked: checkedKeys.value.has(key),
+      indeterminate: false,
+      visible: true,
+      loading: false,
+      loaded: !props.lazy,
+      rawData: item,
+      children: void 0
+    };
+    nodeMap.value.set(key, node);
+    const childrenData = item[childrenKey];
+    if (childrenData && childrenData.length > 0) {
+      node.children = buildTree(childrenData, node, level + 1);
+    }
+    return node;
+  });
+};
+watch(
+  () => props.data,
+  (newData) => {
+    nodeMap.value.clear();
+    treeNodes.value = buildTree(newData);
+    if (currentNodeKey.value) {
+      const node = nodeMap.value.get(currentNodeKey.value);
+      if (node) {
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+watch(
+  () => props.currentNodeKey,
+  (val) => {
+    if (val !== currentNodeKey.value) {
+      currentNodeKey.value = val;
+    }
+  }
+);
+const flattenedNodes = computed(() => {
+  const result = [];
+  const traverse = (nodes) => {
+    nodes.forEach((node) => {
+      if (!node.visible) return;
+      result.push(node);
+      if (node.expanded && node.children) {
+        traverse(node.children);
+      }
+    });
+  };
+  traverse(treeNodes.value);
+  return result;
+});
+const handleNodeClick = (node, e) => {
+  if (node.disabled) return;
+  currentNodeKey.value = node.key;
+  emit("update:currentNodeKey", node.key);
+  emit("current-change", node);
+  if (props.expandOnClickNode && !node.isLeaf && (node.children?.length || props.lazy)) {
+    handleNodeExpand(node);
+  }
+  if (props.checkOnClickNode && props.showCheckbox) {
+    handleNodeCheck(node, !node.checked);
+  }
+  emit("node-click", node, e);
+};
+const handleNodeExpand = async (node) => {
+  if (node.isLeaf) return;
+  if (props.lazy && !node.loaded && props.load) {
+    if (node.loading) return;
+    node.loading = true;
+    try {
+      const children = await props.load(node);
+      node.children = buildTree(children, node, node.level + 1);
+      node.loaded = true;
+    } finally {
+      node.loading = false;
+    }
+  }
+  const newExpanded = !node.expanded;
+  node.expanded = newExpanded;
+  if (newExpanded) {
+    expandedKeys.value.add(node.key);
+    if (props.accordion) {
+      const siblings = node.parent ? node.parent.children : treeNodes.value;
+      siblings?.forEach((sibling) => {
+        if (sibling.key !== node.key && sibling.expanded) {
+          sibling.expanded = false;
+          expandedKeys.value.delete(sibling.key);
+        }
+      });
+    }
+  } else {
+    expandedKeys.value.delete(node.key);
+  }
+  emit("node-expand", node, newExpanded);
+};
+const handleNodeCheck = (node, checked) => {
+  if (node.disabled) return;
+  node.checked = checked;
+  node.indeterminate = false;
+  if (checked) {
+    checkedKeys.value.add(node.key);
+  } else {
+    checkedKeys.value.delete(node.key);
+  }
+  if (!props.checkStrictly) {
+    const updateChildren = (children) => {
+      children?.forEach((child) => {
+        if (!child.disabled) {
+          child.checked = checked;
+          child.indeterminate = false;
+          if (checked) {
+            checkedKeys.value.add(child.key);
+          } else {
+            checkedKeys.value.delete(child.key);
+          }
+          updateChildren(child.children);
+        }
+      });
+    };
+    updateChildren(node.children);
+    const updateParent = (parent) => {
+      if (!parent) return;
+      const children = parent.children || [];
+      const checkedCount = children.filter((c) => c.checked).length;
+      const indeterminateCount = children.filter((c) => c.indeterminate).length;
+      if (checkedCount === children.length) {
+        parent.checked = true;
+        parent.indeterminate = false;
+        checkedKeys.value.add(parent.key);
+      } else if (checkedCount > 0 || indeterminateCount > 0) {
+        parent.checked = false;
+        parent.indeterminate = true;
+        checkedKeys.value.delete(parent.key);
+      } else {
+        parent.checked = false;
+        parent.indeterminate = false;
+        checkedKeys.value.delete(parent.key);
+      }
+      updateParent(parent.parent);
+    };
+    updateParent(node.parent);
+  }
+  emit("check", node, checked, Array.from(checkedKeys.value));
+};
+const setCurrentKey = (key) => {
+  currentNodeKey.value = key;
+  emit("update:currentNodeKey", key);
+};
+const filter = (query) => {
+  const filterFn = props.filterMethod || ((q, node) => node.label.includes(q));
+  const filterNodes = (nodes) => {
+    let hasVisible = false;
+    nodes.forEach((node) => {
+      let visible = filterFn(query, node);
+      if (node.children) {
+        const childVisible = filterNodes(node.children);
+        visible = visible || childVisible;
+      }
+      node.visible = visible;
+      if (visible) hasVisible = true;
+    });
+    return hasVisible;
+  };
+  if (query) {
+    filterNodes(treeNodes.value);
+  } else {
+    const resetVisible = (nodes) => {
+      nodes.forEach((node) => {
+        node.visible = true;
+        if (node.children) resetVisible(node.children);
+      });
+    };
+    resetVisible(treeNodes.value);
+  }
+};
+const getCheckedNodes = () => {
+  return flattenedNodes.value.filter((node) => node.checked);
+};
+const getCheckedKeys = () => {
+  return Array.from(checkedKeys.value);
+};
+const setCheckedKeys = (keys) => {
+  checkedKeys.value = new Set(keys);
+  nodeMap.value.forEach((node, key) => {
+    node.checked = keys.includes(key);
+    node.indeterminate = false;
+  });
+};
+const dragNode = ref(null);
+const draggingNodeKey = ref(void 0);
+const dropTargetNodeKey = ref(void 0);
+const dropPosition = ref(void 0);
+const handleDragStart = (node, e) => {
+  dragNode.value = node;
+  draggingNodeKey.value = node.key;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", "");
+  }
+  emit("node-drag-start", node, e);
+};
+const handleDragOver = (node, e) => {
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  const el = e.currentTarget;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const offsetTop = e.clientY - rect.top;
+  let position = "inner";
+  if (offsetTop < rect.height * 0.25) {
+    position = "before";
+  } else if (offsetTop > rect.height * 0.75) {
+    position = "after";
+  }
+  dropPosition.value = position;
+  dropTargetNodeKey.value = node.key;
+  emit("node-drag-over", node, e);
+};
+const handleDragEnter = (node, e) => {
+  e.preventDefault();
+  dropTargetNodeKey.value = node.key;
+  emit("node-drag-enter", node, e);
+};
+const handleDragLeave = (node, e) => {
+  if (dropTargetNodeKey.value === node.key) {
+  }
+  emit("node-drag-leave", node, e);
+};
+const handleDragEnd = (_node, _e) => {
+  dragNode.value = null;
+  draggingNodeKey.value = void 0;
+  dropTargetNodeKey.value = void 0;
+  dropPosition.value = void 0;
+};
+const handleDrop = (node, e) => {
+  e.preventDefault();
+  if (!dragNode.value) return;
+  let curr = node.parent;
+  while (curr) {
+    if (curr.key === dragNode.value.key) return;
+    curr = curr.parent;
+  }
+  emit("node-drop", dragNode.value, node, dropPosition.value || "inner", e);
+  draggingNodeKey.value = void 0;
+  dropTargetNodeKey.value = void 0;
+  dropPosition.value = void 0;
+};
+watch(
+  () => props.currentNodeKey,
+  (val) => {
+    currentNodeKey.value = val;
+  }
+);
+provide(TREE_INJECTION_KEY, {
+  props,
+  currentNodeKey,
+  expandedKeys,
+  checkedKeys,
+  draggingNodeKey,
+  dropTargetNodeKey,
+  dropPosition,
+  handleNodeClick,
+  handleNodeExpand,
+  handleNodeCheck,
+  setCurrentKey,
+  handleDragStart,
+  handleDragOver,
+  handleDragEnter,
+  handleDragLeave,
+  handleDragEnd,
+  handleDrop
+});
+const getNode = (key) => {
+  return nodeMap.value.get(key);
+};
+const getHalfCheckedNodes = () => {
+  const result = [];
+  nodeMap.value.forEach((node) => {
+    if (node.indeterminate) result.push(node);
+  });
+  return result;
+};
+const getHalfCheckedKeys = () => {
+  return getHalfCheckedNodes().map((node) => node.key);
+};
+const getCurrentKey = () => currentNodeKey.value;
+const getCurrentNode = () => currentNodeKey.value ? nodeMap.value.get(currentNodeKey.value) : void 0;
+const setExpandedKeys = (keys) => {
+  expandedKeys.value = new Set(keys);
+  nodeMap.value.forEach((node, key) => {
+    node.expanded = keys.includes(key);
+  });
+};
+const expandNode = (key) => {
+  const node = nodeMap.value.get(key);
+  if (node && !node.expanded) handleNodeExpand(node);
+};
+const collapseNode = (key) => {
+  const node = nodeMap.value.get(key);
+  if (node && node.expanded) handleNodeExpand(node);
+};
+const setChecked = (key, checked, deep = true) => {
+  const node = nodeMap.value.get(key);
+  if (!node || node.disabled) return;
+  if (deep && !props.checkStrictly) {
+    handleNodeCheck(node, checked);
+  } else {
+    node.checked = checked;
+    if (checked) checkedKeys.value.add(key);
+    else checkedKeys.value.delete(key);
+    emit("check", node, checked, Array.from(checkedKeys.value));
+  }
+};
+const innerScrollRef = ref();
+const scrollTo = (options) => {
+  if (props.virtual) {
+    innerScrollRef.value?.scrollTo(typeof options === "number" ? { top: options } : options);
+  }
+};
+const scrollToNode = (key) => {
+  if (!props.virtual) return;
+  const index = flattenedNodes.value.findIndex((n) => n.key === key);
+  if (index !== -1) {
+    scrollTo(index * props.itemHeight);
+  }
+};
+const setCheckedNodes = (nodes) => {
+  const keys = nodes.map(
+    (node) => node[props.nodeKey] ?? node.key ?? node.id
+  );
+  setCheckedKeys(keys);
+};
+const setData = (data) => {
+  nodeMap.value.clear();
+  treeNodes.value = buildTree(data);
+};
+defineExpose({
+  filter,
+  getNode,
+  getCheckedNodes,
+  getCheckedKeys,
+  getHalfCheckedNodes,
+  getHalfCheckedKeys,
+  getCurrentKey,
+  getCurrentNode,
+  setChecked,
+  setCheckedKeys,
+  setCheckedNodes,
+  setCurrentKey,
+  setExpandedKeys,
+  setData,
+  expandNode,
+  collapseNode,
+  scrollTo,
+  scrollToNode,
+  expandedKeys,
+  checkedKeys
+});
+</script>
+
+<template>
+  <div :class="[ns.b(), showLine && ns.m('show-line')]" :style="themeStyle" role="tree">
+    <div
+      v-if="props.virtual"
+      ref="innerScrollRef"
+      :style="{
+  height: props.height + 'px',
+  overflowY: 'auto'
+}"
+      @scroll="handleScroll"
+    >
+      <div :style="{
+  height: totalHeight + 'px',
+  position: 'relative'
+}">
+        <div :style="{
+  transform: `translateY(${offset}px)`
+}">
+          <TreeNodeComponent v-for="node in visibleNodes" :key="node.key" :node="node">
+            <template #default="{ node: childNode, data: childData }">
+              <slot name="default" :node="childNode" :data="childData" />
+            </template>
+            <template #icon="{ node: childNode, data: childData }">
+              <slot name="icon" :node="childNode" :data="childData" />
+            </template>
+            <template #prefix="{ node: childNode, data: childData }">
+              <slot name="prefix" :node="childNode" :data="childData" />
+            </template>
+            <template #suffix="{ node: childNode, data: childData }">
+              <slot name="suffix" :node="childNode" :data="childData" />
+            </template>
+          </TreeNodeComponent>
+        </div>
+      </div>
+    </div>
+    <template v-else-if="treeNodes.length > 0">
+      <TreeNodeComponent v-for="node in treeNodes" :key="node.key" :node="node">
+        <template #default="{ node: childNode, data: childData }">
+          <slot name="default" :node="childNode" :data="childData" />
+        </template>
+        <template #icon="{ node: childNode, data: childData }">
+          <slot name="icon" :node="childNode" :data="childData" />
+        </template>
+        <template #prefix="{ node: childNode, data: childData }">
+          <slot name="prefix" :node="childNode" :data="childData" />
+        </template>
+        <template #suffix="{ node: childNode, data: childData }">
+          <slot name="suffix" :node="childNode" :data="childData" />
+        </template>
+      </TreeNodeComponent>
+    </template>
+    <div v-else :class="ns.e('empty')">
+      <slot name="empty">{{ emptyText || t("tree.emptyText") }}</slot>
+    </div>
+  </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-tree {
+  --yh-tree-node-height: 28px;
+  --yh-tree-text-color: var(--yh-text-color-primary, #1d1d1f);
+  --yh-tree-hover-bg: var(--yh-color-primary-light-9, #ecf5ff);
+  --yh-tree-current-bg: var(--yh-color-primary-light-8, #d9ecff);
+  font-size: 14px;
+  color: var(--yh-tree-text-color);
+  user-select: none;
+}
+.yh-tree__node {
+  position: relative;
+}
+.yh-tree__node.is-disabled .yh-tree__label {
+  color: var(--yh-text-color-disabled, #c0c4cc);
+  cursor: not-allowed;
+}
+
+.yh-tree__node.is-dragging {
+  opacity: 0.5;
+}
+
+.yh-tree__node.is-drop-inner {
+  background-color: var(--yh-color-primary-light-9, #ecf5ff);
+}
+.yh-tree__node.is-drop-inner .yh-tree__content {
+  background-color: var(--yh-color-primary-light-8, #d9ecff);
+}
+
+.yh-tree__node.is-drop-before::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--yh-color-primary, #409eff);
+  z-index: 10;
+}
+
+.yh-tree__node.is-drop-after::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--yh-color-primary, #409eff);
+  z-index: 10;
+}
+
+.yh-tree__content {
+  display: flex;
+  align-items: center;
+  height: var(--yh-tree-node-height);
+  padding-right: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.yh-tree__content:hover {
+  background-color: var(--yh-tree-hover-bg);
+}
+.yh-tree__node.is-current > .yh-tree__content {
+  background-color: var(--yh-tree-current-bg);
+  color: var(--yh-color-primary, #409eff);
+  font-weight: 500;
+}
+
+.yh-tree__expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--yh-text-color-placeholder, #c0c4cc);
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
+}
+.yh-tree__expand-icon:hover {
+  color: var(--yh-color-primary, #409eff);
+}
+.yh-tree__expand-icon.is-expanded {
+  color: var(--yh-text-color-secondary, #86868b);
+}
+
+.yh-tree__expand-icon.is-loading {
+  animation: yh-tree-rotate 1s linear infinite;
+  color: var(--yh-color-primary, #409eff) !important;
+}
+
+.yh-tree__expand-icon svg {
+  transition: fill 0.3s ease;
+}
+
+.yh-tree__expand-placeholder {
+  display: inline-block;
+  width: 24px;
+}
+
+.yh-tree__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: var(--yh-tree-node-height);
+}
+
+.yh-tree__icon {
+  margin-right: 4px;
+  color: var(--yh-text-color-secondary);
+}
+
+.yh-tree__empty {
+  padding: 20px;
+  text-align: center;
+  color: var(--yh-text-color-secondary);
+  font-size: 13px;
+}
+
+.yh-tree--show-line .yh-tree__node {
+  position: relative;
+}
+.yh-tree--show-line .yh-tree__node::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--yh-border-color-light, #dcdfe6);
+}
+.yh-tree--show-line .yh-tree__node:last-child::before {
+  height: 14px;
+}
+.yh-tree--show-line .yh-tree__content::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 14px;
+  width: 12px;
+  height: 1px;
+  background-color: var(--yh-border-color-light, #dcdfe6);
+}
+.yh-tree--show-line > .yh-tree__node::before {
+  display: none;
+}
+.yh-tree--show-line > .yh-tree__node > .yh-tree__content::before {
+  display: none;
+}
+
+.yh-tree .yh-checkbox {
+  margin-right: 8px;
+}
+
+@keyframes yh-tree-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>