hy-virtual-tree 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+## Changelog
+
+### 1.0.0
+
+_2025-07-28_
+
+#### Features
+
+- 组件 [VirtualTree] 完成开发

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025-present
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,300 @@
+## VirtualTree虚拟树
+
+### 一、使用案例
+```vue
+<template>
+  <div ref="treeRef"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [
+        {
+          "id": "node-1",
+          "label": "node-1",
+          "status": 2,
+          "isDevice": false,
+          "children": [
+            {
+              "id": "node-1-1",
+              "label": "node-1-1",
+              "status": 1,
+              "isDevice": true
+            },
+          ]
+        },
+        {
+          "id": "node-2",
+          "label": "node-2",
+          "status": 1,
+          "isDevice": false,
+          "children": [
+            {
+              "id": "node-2-1",
+              "label": "node-2-1",
+              "status": 1,
+              "isDevice": true
+            },
+            {
+              "id": "node-2-2",
+              "label": "node-2-2",
+              "status": 1,
+              "isDevice": true
+            },
+          ]
+        }
+      ],
+      type: 'checkbox',
+    }
+  },
+  mounted() {
+    this.virtualTree = new VirtualTree({
+      // 指定容器
+      container: this.$refs.treeRef,
+      // 数据
+      data: this.data,
+      // 每一项的高度
+      itemHeight: 30,
+      // 可视区域外的缓冲项数量
+      bufferSize: 10,
+      // 可视区域外的缓冲项数量
+      indent: 16,
+      props: {
+        // 设置value值
+        value: 'id',
+        // 设置label值
+        label: 'label',
+        // 设置children值
+        children: 'children',
+        // 自定义每一项class值
+        class(data, node) {
+          if (node.level > 1) return 'children'
+          return 'parent'
+        },
+        // 自定义每一项要显示统计模块
+        showCount: (data, node) => {
+          return !data.isDevice
+        },
+        // 自定义要统计的模块（只统计最后一个子节点）
+        countFilter(data) {
+          return data.isDevice && data.status === 1
+        },
+        // 自定义要统计的模块（只统计最后一个子节点）
+        totalFilter(data) {
+          return data.isDevice
+        }
+      },
+      // 点击节点时，触发展开/收起
+      expandOnClickNode: true,
+      // 点击节点时，触发选中/取消选中
+      checkOnClickNode: false,
+      // 选中项配置
+      rowSelection: {
+        // 选中类型，checkbox/radio
+        type: this.type,
+        // 自定义每一项是否显示选中
+        showSelect: (data, node) => {
+          if (this.type === 'checkbox') return true
+          return this.type === 'radio' && data.isDevice
+        },
+        // 点击选中/取消选中触发回调
+        onCheckChange(data, info, checked) {
+          console.log("onCheckChange", data, info, checked)
+        }
+      },
+      // 自定义过滤逻辑
+      filterMethod: (params, data) => {
+        if (!params) return true;
+        return data.id === params
+      },
+      // 自定义渲染状态模块
+      renderStatus(data, node) {
+        const el = document.createElement('div')
+        if (data.children?.length) return;
+        // console.log('data', data)
+        el.innerHTML = data.status === 1 ? '在线' : '离线'
+        return el
+      },
+      // 自定义点击事件
+      onNodeClick(data, node, e) {
+        console.log("onNodeClicks??", data, node, e)
+      },
+      // 节点展开回调
+      onNodeExpand(data, node) {
+        console.log('onNodeExpand', node, data)
+      },
+      // 节点收起回调
+      onNodeCollapse(data, node) {
+        console.log('onNodeCollapse', node, data)
+      },
+    })
+  },
+  methods: {
+    // 全量更新数据
+    setData() {
+      this.virtualTree.setData([])
+    },
+    // 更新当前已有的数据（有新增删除项请使用 setData 方法）
+    updateData() {
+      this.virtualTree.updateData([{
+          "id": "node-1-1",
+          "label": "node-1-1.1",
+          "status": 1,
+          "isDevice": true
+      }])
+    },
+    setChecked(key) {
+      this.virtualTree.setChecked(key)
+    },
+    // 获取当前选中的选项
+    getCheckedKeys() {
+      const keys = this.virtualTree.getCheckedKeys()
+      const list = this.virtualTree.getCheckedNodes()
+      console.log('list', keys, list)
+    }
+  }
+}
+</script>
+```
+
+### 二、传参
+|  选项 |  类型 |  描述 | 默认值 |
+| --- | --- | --- | --- |
+| container | string、HTMLElement | 容器 | - |
+| data | Array<Record<string, any>> | <font style="color:rgb(48, 49, 51);">展示数据</font> | [] |
+| props | Props | <font style="color:rgb(48, 49, 51);">配置选项，具体看下表</font> | |
+| itemHeight | number | <font style="color:rgb(48, 49, 51);">每一行高度</font> | 30 |
+| bufferSize | number | <font style="color:rgb(48, 49, 51);">可视区域外的缓冲项数量</font> | 10 |
+| indent | number | <font style="color:rgb(48, 49, 51);">相邻级节点间的水平缩进，单位为像素</font> | 16 |
+| rowSelection | RowSelection | <font style="color:rgba(0, 0, 0, 0.88);background-color:rgba(60, 90, 100, 0.01);">是否可选择</font> |  |
+| expandOnClickNode | boolean | <font style="color:rgb(48, 49, 51);">是否在点击节点的时候展开或者收缩节点</font> | true |
+| checkOnClickNode | boolean | <font style="color:rgb(48, 49, 51);">是否在点击节点的时候选中节点</font> | false |
+| renderIcon | (data: TreeNodeData, node: TreeNode) => HTMLElement | <font style="color:rgb(48, 49, 51);">自定义渲染图标</font> |  |
+| renderItem | (data: TreeNodeData, node: TreeNode) => HTMLElement | <font style="color:rgb(48, 49, 51);">自定义渲染内容</font> |  |
+| onNodeClick | (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void | <font style="color:rgb(48, 49, 51);">当节点被鼠标左键点击的时候触发</font> |  |
+| onNodeContextmenu | (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void | <font style="color:rgb(48, 49, 51);">当节点被鼠标右键点击的时候触发</font> |  |
+
+
+### 三、Props
+|  选项 |  类型 |  描述 | 默认值 |
+| --- | --- | --- | --- |
+| <font style="color:rgb(48, 49, 51);">value</font> | string | <font style="color:rgb(48, 49, 51);">每个树节点用来作为唯一标识的属性，在整棵树中应该是唯一的</font> | value |
+| label | string | <font style="color:rgb(48, 49, 51);">指定节点标签为节点对象的某个属性值</font> | label |
+| <font style="color:rgb(48, 49, 51);">children</font> | string | <font style="color:rgb(48, 49, 51);">指定子树为节点对象的某个属性值</font> | children |
+| <font style="color:rgb(48, 49, 51);">disabled</font> | string | <font style="color:rgb(48, 49, 51);">指定节点选择框是否禁用为节点对象的某个属性值</font> | <font style="color:rgb(48, 49, 51);">disabled</font> |
+| <font style="color:rgb(48, 49, 51);">class </font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">string/Function</font> | <font style="color:rgb(48, 49, 51);">自定义节点类名</font> | <font style="color:rgb(48, 49, 51);">-</font> |
+| <font style="color:rgb(48, 49, 51);">showCount</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">boolean | ((data: TreeNodeData, node: TreeNode) => boolean)</font> | <font style="color:rgb(48, 49, 51);">是否显示统计模块</font> | <font style="color:rgb(48, 49, 51);"></font> |
+| <font style="color:rgb(48, 49, 51);">total</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">string</font> | <font style="color:rgb(48, 49, 51);">指定统计总数属性名称</font> | <font style="color:rgb(48, 49, 51);">total</font> |
+| <font style="color:rgb(48, 49, 51);">count</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">string</font> | <font style="color:rgb(48, 49, 51);">指定统计个数属性名称</font> | <font style="color:rgb(48, 49, 51);">count</font> |
+| <font style="color:rgb(48, 49, 51);">countFilter</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(data: TreeNodeData) => boolean</font> | <font style="color:rgb(48, 49, 51);">自定义过滤个数统计逻辑，优先级高于count</font> | <font style="color:rgb(48, 49, 51);"></font> |
+| <font style="color:rgb(48, 49, 51);">totalFilter</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(data: TreeNodeData) => boolean</font> | <font style="color:rgb(48, 49, 51);">自定义过滤总数统计逻辑，优先级高于total</font> | <font style="color:rgb(48, 49, 51);"></font> |
+
+
+### 四、RowSelection
+|  选项 |  类型 |  描述 | 默认值 |
+| --- | --- | --- | --- |
+| <font style="color:rgb(48, 49, 51);">type</font> | 'checkbox' | 'radio' | <font style="color:rgb(48, 49, 51);">选项类型</font> | checkbox |
+| checkStrictly | boolean | <font style="color:rgb(48, 49, 51);">在type='checkbox'有效，是否严格的遵循父子不互相关联的做法</font> | false |
+| <font style="color:rgb(48, 49, 51);">children</font> | string | <font style="color:rgb(48, 49, 51);">指定子树为节点对象的某个属性值</font> | children |
+| <font style="color:rgb(48, 49, 51);">showSelect</font> | boolean | ((data: TreeNodeData, node: TreeNode) => boolean) | <font style="color:rgb(48, 49, 51);">是否显示选项</font> | <font style="color:rgb(48, 49, 51);">false</font> |
+| <font style="color:rgb(48, 49, 51);">onCheckChange </font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(data: TreeNodeData, info: {</font><br/><font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">checkedKeys: TreeKey[], checkedNodes: TreeNodeData[], halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeNodeData[]</font><br/><font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">}, checked: boolean) => void</font> | <font style="color:rgb(48, 49, 51);">选项变化回调事件</font> | <font style="color:rgb(48, 49, 51);">-</font> |
+
+
+### 五、方法
+|  选项 |  描述 | 参数 |
+| --- | --- | --- |
+| setData | 全量更新数据 | (data: TreeData) |
+| updateData | 局部更新数据，仅可更新已有的数据 | (data: TreeData) |
+| getNode | 获取指定节点数据 | (data: TreeKey | TreeNodeData) => TreeNode |
+| scrollToIndex | 滚动到指定下标位置 | (index: number) |
+| scrollToNode | 滚动到指定key的位置 | (key: TreeKey) |
+| filter | 手动触发filterMethod函数 | (params: any) |
+| <font style="color:rgb(48, 49, 51);">getCheckedKeys</font> | 若节点可被选择（即 showCheckbox 为 true），则返回目前被选中的节点所组成的数组，<font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">leafOnly </font>是否只返回根节点 | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(leafOnly: boolean)</font> |
+| getCheckedNodes | 若节点可被选择（即 showCheckbox 为 true），则返回目前被选中的节点所组成的数组，<font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">leafOnly </font>是否只返回根节点 | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(leafOnly: boolean)</font> |
+| <font style="color:rgb(48, 49, 51);">setChecked</font> | <font style="color:rgb(48, 49, 51);">通过 key 设置某个节点的勾选状态</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(key: TreeKey, checked: boolean)</font> |
+| <font style="color:rgb(48, 49, 51);">setCheckedKeys</font> | <font style="color:rgb(48, 49, 51);">通过 keys 设置目前勾选的节点</font> | <font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">(keys: TreeKey[])</font> |
+| refresh | 刷新视图 |  |
+| destroy | 销毁组件 |  |
+
+
+### 六、声明类型
+```typescript
+export type TreeKey = string | number
+export type TreeNodeData = Record<string, any>
+export type TreeData = Array<TreeNodeData>
+export interface TreeNode {
+  key: TreeKey
+  level: number
+  parent?: TreeNode
+  children?: TreeNode[]
+  data: TreeNodeData
+  disabled?: boolean
+  label?: string
+  isLeaf?: boolean
+  expanded?: boolean
+  count?: number
+  total?: number
+}
+export interface Tree {
+  treeNodeMap: Map<TreeKey, TreeNode>
+  levelTreeNodeMap: Map<number, TreeNode[]>
+  treeNodes: TreeNode[]
+  maxLevel: number
+}
+export interface Props {
+  value: string
+  label: string
+  children: string
+  disabled: string
+  class: string | ((data: TreeNodeData, node: TreeNode) => string)
+  // total、count 和 countFilter、totalFilter 只能二选一
+  showCount: boolean | ((data: TreeNodeData, node: TreeNode) => boolean) // 是否显示统计模块
+  total: string // 总数字段
+  count: string // 统计字段
+  countFilter?: (data: TreeNodeData) => boolean // 自定义过滤个数统计，优先级高于count
+  totalFilter?: (data: TreeNodeData) => boolean // 自定义过滤总数统计，优先级高于total、count
+}
+export interface RowSelection {
+  type: 'checkbox' | 'radio'
+  checkStrictly?: boolean // 在type='checkbox'有效，是否严格的遵循父子不互相关联的做法
+  showSelect?: boolean | ((data: TreeNodeData, node: TreeNode) => boolean)
+  onCheckChange?: (
+    data: TreeNodeData,
+    info: {
+      checkedKeys: TreeKey[]
+      checkedNodes: TreeNodeData[]
+      halfCheckedKeys: TreeKey[]
+      halfCheckedNodes: TreeNodeData[]
+    },
+    checked: boolean
+  ) => void
+}
+
+export interface VirtualTreeProps {
+  container: string | Element | HTMLElement
+  data: TreeData
+  emptyText?: string // 内容为空的时候展示的文本
+  props?: Partial<Props>
+  itemHeight?: number
+  bufferSize?: number
+  showSelected?: boolean
+  indent?: number
+  expandOnClickNode?: boolean // 是否在点击节点的时候展开或者收缩节点
+  checkOnClickNode?: boolean // 是否在点击节点的时候选中节点
+  rowSelection?: RowSelection
+  filterMethod?: (params: any, data: TreeNodeData, node: TreeNode) => boolean // 自定义过滤方法
+  renderIcon?: (data: TreeNodeData, node: TreeNode) => Element // 自定义渲染图标
+  renderItem?: (data: TreeNodeData, node: TreeNode) => Element // 自定义渲染内容
+  renderStatus?: (data: TreeNodeData, node: TreeNode) => Element | undefined // 自定义状态文本
+  onNodeClick?: (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void // 当节点被鼠标左键点击的时候触发
+  onNodeContextmenu?: (
+    data: TreeNodeData,
+    node: TreeNode,
+    e: MouseEvent
+  ) => void // 当节点被鼠标右键点击的时候触发
+}
+
+```
+

package/dist/index.css

@@ -0,0 +1,278 @@
+.hy-checkbox {
+  --hy-checkbox-height: 26px;
+  --hy-checkbox-font-size: 14px;
+  --hy-checkbox-font-weight: 500;
+  --hy-checkbox-text-color: #fff;
+  --hy-checkbox-input-height: 14px;
+  --hy-checkbox-input-width: 14px;
+  --hy-checkbox-checked-icon-color: #fff;
+  --hy-checkbox-checked-text-color: var(--hy-color-primary);
+  --hy-checkbox-checked-input-border-color: var(--hy-color-primary);
+  --hy-checkbox-checked-bg-color: var(--hy-bg-color-primary);
+  --hy-checkbox-input-border: 1px solid #dcdfe6;
+  --hy-checkbox-input-border-color-hover: var(--hy-color-primary);
+  --hy-checkbox-disabled-input-fill: #f5f7fa;
+  --hy-checkbox-disabled-border-color: #dcdfe6;
+  --hy-checkbox-border-radius: 2px;
+  --hy-index-normal: 1;
+  align-items: center;
+  color: var(--hy-checkbox-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--hy-font-size-base);
+  font-weight: var(--hy-checkbox-font-weight);
+  height: var(--hy-checkbox-height, 32px);
+  margin-right: 8px;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+}
+.hy-checkbox.disabled .hy-checkbox__input {
+  cursor: not-allowed;
+}
+.hy-checkbox.is-checked .hy-checkbox__input .hy-checkbox__inner {
+  background-color: var(--hy-checkbox-checked-bg-color);
+  box-shadow: 0 0 4px 0 var(--hy-color-primary);
+  border-color: var(--hy-checkbox-checked-input-border-color);
+}
+.hy-checkbox.is-checked .hy-checkbox__input .hy-checkbox__inner::after {
+  border-color: var(--hy-checkbox-checked-icon-color);
+  transform: translate(-45%, -60%) rotate(45deg) scaleY(1);
+}
+.hy-checkbox.is-disabled .hy-checkbox__input .hy-checkbox__inner {
+  background-color: var(--hy-checkbox-disabled-input-fill);
+  border-color: var(--hy-checkbox-disabled-border-color);
+  cursor: not-allowed;
+}
+.hy-checkbox.is-indeterminate .hy-checkbox__input .hy-checkbox__inner {
+  background-color: var(--hy-checkbox-checked-bg-color);
+  border-color: var(--hy-checkbox-checked-input-border-color);
+}
+.hy-checkbox.is-indeterminate .hy-checkbox__input .hy-checkbox__inner::before {
+  background-color: var(--hy-checkbox-checked-icon-color);
+  content: "";
+  display: block;
+  height: 2px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 5px;
+  transform: scale(0.5);
+}
+.hy-checkbox.is-indeterminate .hy-checkbox__input .hy-checkbox__inner::after {
+  display: none;
+}
+.hy-checkbox:not(.is-disabled) .hy-checkbox__input .hy-checkbox__inner:hover {
+  border-color: var(--hy-checkbox-input-border-color-hover);
+}
+.hy-checkbox .hy-checkbox__input {
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  position: relative;
+}
+.hy-checkbox .hy-checkbox__input .hy-checkbox__inner {
+  background-color: transparent;
+  border: var(--hy-checkbox-input-border);
+  border-radius: var(--hy-checkbox-border-radius);
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--hy-checkbox-input-height);
+  position: relative;
+  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+  width: var(--hy-checkbox-input-width);
+  z-index: var(--hy-index-normal);
+}
+.hy-checkbox .hy-checkbox__input .hy-checkbox__inner::after {
+  border: 1px solid transparent;
+  border-left: 0;
+  border-top: 0;
+  box-sizing: content-box;
+  content: "";
+  height: 7px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-45%, -60%) rotate(45deg) scaleY(0);
+  transform-origin: center;
+  transition: transform 0.15s ease-in 0.05s;
+  width: 3px;
+}
+.hy-checkbox .hy-checkbox__label {
+  display: inline-block;
+  padding-left: 8px;
+  line-height: 1;
+  font-size: var(--hy-font-size-base);
+  color: var(--hy-checkbox-checked-text-color);
+}
+
+.hy-radio {
+  --hy-radio-height: 26px;
+  --hy-radio-font-size: 14px;
+  --hy-radio-font-weight: 500;
+  --hy-radio-text-color: #fff;
+  --hy-radio-input-height: 14px;
+  --hy-radio-input-width: 14px;
+  --hy-radio-checked-icon-color: #fff;
+  --hy-radio-checked-text-color: var(--hy-color-primary);
+  --hy-radio-checked-input-border-color: var(--hy-color-primary);
+  --hy-radio-checked-bg-color: transparent;
+  --hy-radio-input-border: 1px solid #dcdfe6;
+  --hy-radio-input-border-color-hover: var(--hy-color-primary);
+  --hy-radio-disabled-input-fill: #f5f7fa;
+  --hy-radio-disabled-border-color: #dcdfe6;
+  --hy-radio-border-radius: 100%;
+  --hy-index-normal: 1;
+  align-items: center;
+  color: var(--hy-radio-text-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--hy-font-size-base);
+  font-weight: var(--hy-radio-font-weight);
+  height: var(--hy-radio-height, 32px);
+  margin-right: 8px;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+}
+.hy-radio.disabled .hy-radio__input {
+  cursor: not-allowed;
+}
+.hy-radio.is-checked .hy-radio__input .hy-radio__inner {
+  background-color: var(--hy-radio-checked-bg-color);
+  border-color: var(--hy-radio-checked-input-border-color);
+}
+.hy-radio.is-checked .hy-radio__input .hy-radio__inner::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+.hy-radio.is-disabled .hy-radio__input .hy-radio__inner {
+  background-color: var(--hy-radio-disabled-input-fill);
+  border-color: var(--hy-radio-disabled-border-color);
+  cursor: not-allowed;
+}
+.hy-radio:not(.is-disabled) .hy-radio__input .hy-radio__inner:hover {
+  border-color: var(--hy-radio-input-border-color-hover);
+}
+.hy-radio .hy-radio__input {
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-flex;
+  position: relative;
+}
+.hy-radio .hy-radio__input .hy-radio__inner {
+  background-color: transparent;
+  border: var(--hy-radio-input-border);
+  border-radius: var(--hy-radio-border-radius);
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--hy-radio-input-height);
+  position: relative;
+  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), outline 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+  width: var(--hy-radio-input-width);
+  z-index: var(--hy-index-normal);
+}
+.hy-radio .hy-radio__input .hy-radio__inner::after {
+  width: 4px;
+  height: 4px;
+  border-radius: var(--hy-radio-border-radius);
+  background-color: var(--hy-radio-checked-input-border-color);
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: center;
+  transition: transform 0.15s ease-in 0.05s;
+}
+.hy-radio .hy-radio__label {
+  display: inline-block;
+  padding-left: 8px;
+  line-height: 1;
+  font-size: var(--hy-font-size-base);
+  color: var(--hy-radio-checked-text-color);
+}
+
+.hy-tree {
+  --icon-color: #ffffff;
+  --text-color: #ffffff;
+  --text-size: 14px;
+  --node-bg: #1c334a;
+  --node-hover-bg: var(--hy-color-primary);
+  color: var(--text-color);
+  background: var(--node-bg);
+}
+.hy-tree > div {
+  padding: 0 10px;
+}
+.hy-tree .hy-tree-node {
+  width: 100%;
+  padding: 0 10px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+.hy-tree .hy-tree-node:hover {
+  box-shadow: 0 0 10px 0 var(--node-hover-bg) inset;
+  border: 1px solid var(--node-hover-bg);
+}
+.hy-tree .hy-tree-node.active {
+  box-shadow: 0 0 20px 0 var(--node-hover-bg) inset;
+}
+.hy-tree .hy-tree-node .hy-tree-node__content {
+  display: flex;
+  align-items: center;
+}
+.hy-tree .hy-expand {
+  width: var(--text-size);
+  height: var(--text-size);
+  margin-right: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hy-tree .hy-expand.expanded .hy-expand-icon {
+  transform: rotate(0);
+}
+.hy-tree .hy-expand .hy-expand-icon {
+  --icon-size: 6px;
+  width: 0;
+  height: 0;
+  border-top: var(--icon-size) solid var(--icon-color);
+  border-left: var(--icon-size) solid transparent;
+  border-right: var(--icon-size) solid transparent;
+  text-align: center;
+  transform: rotate(-90deg);
+  transition: all 0.3s linear;
+}
+.hy-tree .hy-tree-icon {
+  margin-right: 4px;
+}
+.hy-tree .hy-tree-content {
+  width: 0;
+  flex: 1;
+  font-size: var(--text-size);
+}
+.hy-tree .hy-tree-content .hy-tree-statistics {
+  margin-left: 4px;
+}
+.hy-tree .hy-tree-content .hy-tree-statistics > span {
+  color: var(--hy-color-primary);
+}
+.hy-tree .disabled {
+  cursor: disabled;
+}
+
+:root {
+  --hy-font-size-base: 14px;
+  --hy-color-primary: #2df2ff;
+  --hy-bg-color-primary: rgba(45, 242, 255, 0.5);
+  --hy-text-color-placeholder: #a8abb2;
+}