uview-ultra 4.5.46

package/components/up-tree/up-tree.uvue

@@ -0,0 +1,825 @@
+<template>
+  <view class="up-tree">
+    <view
+      v-for="item in visibleNodes"
+      :key="item.key"
+      class="up-tree-node"
+      :class="getNodeClass(item)"
+    >
+      <view
+        class="up-tree-node__content"
+        :class="getNodeContentClass(item)"
+        :style="getNodeContentStyle(item)"
+        @tap="handleNodeClick(item)"
+      >
+        <view class="up-tree-node__switcher" @tap.stop="handleExpandClick(item)">
+          <up-icon
+            v-if="getItemHasChildren(item)"
+            :name="getItemExpanded(item) ? collapseIcon : expandIcon"
+            :size="iconSize"
+            :color="switcherColor"
+          />
+        </view>
+        <up-checkbox
+          v-if="showCheckbox"
+          class="up-tree-node__checkbox"
+          usedAlone
+          :size="checkboxSize"
+          :checked="getItemChecked(item)"
+          :disabled="getItemDisabled(item)"
+          @change="handleCheckboxChangeEvent(item, $event)"
+        />
+        <view class="up-tree-node__label">
+          <!-- #ifndef MP-WEIXIN -->
+          <slot
+            :node="item.node"
+            :data="item.node"
+            :level="getItemSlotLevel(item)"
+            :expanded="getItemExpanded(item)"
+            :checked="getItemChecked(item)"
+            :indeterminate="getItemIndeterminate(item)"
+            :disabled="getItemDisabled(item)"
+          >
+            <text class="up-tree-node__text">{{ getItemLabel(item) }}</text>
+          </slot>
+          <!-- #endif -->
+          <!-- #ifdef MP-WEIXIN -->
+          <text class="up-tree-node__text">{{ getItemLabel(item) }}</text>
+          <!-- #endif -->
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import type { PropType } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { deepClone } from '../../libs/function/index.uts';
+
+function createTreeList(): UTSJSONObject[] {
+  return [] as UTSJSONObject[];
+}
+
+function createAnyList(): any[] {
+  return [] as any[];
+}
+
+function normalizeAnyList(value: any | null): any[] {
+  if (value == null || !Array.isArray(value)) {
+    return createAnyList();
+  }
+  return value as any[];
+}
+
+function createNodeMap(): Map<string, UTSJSONObject> {
+  return new Map<string, UTSJSONObject>();
+}
+
+function createTreeProps(): UTSJSONObject {
+  return {
+    label: 'label',
+    children: 'children',
+    nodeKey: 'id',
+    disabled: 'disabled'
+  } as UTSJSONObject;
+}
+
+function valueToString(value: any | null): string {
+  return value == null ? '' : value.toString();
+}
+
+function valueToBoolean(value: any | null): boolean {
+  return value == true;
+}
+
+defineOptions({
+  styleIsolation: 'app-and-page',
+  name: 'up-tree'
+})
+
+const componentProps = defineProps({
+  data: {
+    type: Array as PropType<UTSJSONObject[]>,
+    default(): UTSJSONObject[] {
+      return [] as UTSJSONObject[];
+    }
+  },
+  props: {
+    type: Object as PropType<UTSJSONObject>,
+    default(): UTSJSONObject {
+      return {
+        label: 'label',
+        children: 'children',
+        nodeKey: 'id',
+        disabled: 'disabled',
+      } as UTSJSONObject;
+    }
+  },
+  nodeKey: {
+    type: String,
+    default: ''
+  },
+  showCheckbox: {
+    type: Boolean,
+    default: false
+  },
+  defaultExpandAll: {
+    type: Boolean,
+    default: false
+  },
+  defaultExpandedKeys: {
+    type: Array as PropType<any[]>,
+    default(): any[] {
+      return [] as any[];
+    }
+  },
+  defaultCheckedKeys: {
+    type: Array as PropType<any[]>,
+    default(): any[] {
+      return [] as any[];
+    }
+  },
+  expandOnClickNode: {
+    type: Boolean,
+    default: true
+  },
+  checkOnClickNode: {
+    type: Boolean,
+    default: false
+  },
+  checkStrictly: {
+    type: Boolean,
+    default: false
+  },
+  accordion: {
+    type: Boolean,
+    default: false
+  },
+  highlightCurrent: {
+    type: Boolean,
+    default: false
+  },
+  currentNodeKey: {
+    type: [String, Number],
+    default: ''
+  },
+  indent: {
+    type: [String, Number],
+    default: 32
+  },
+  iconSize: {
+    type: [String, Number],
+    default: 14
+  },
+  checkboxSize: {
+    type: [String, Number],
+    default: 16
+  },
+  expandIcon: {
+    type: String,
+    default: 'play-right-fill'
+  },
+  collapseIcon: {
+    type: String,
+    default: 'arrow-down-fill'
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({})
+  },
+  customClass: {
+    type: String,
+    default: ''
+  },
+  url: {
+    type: String,
+    default: ''
+  },
+  linkType: {
+    type: String,
+    default: 'navigateTo'
+  }
+})
+
+const emit = defineEmits(['node-click', 'check-change', 'check', 'node-expand', 'node-collapse', 'current-change'])
+
+const treeData = ref<UTSJSONObject[]>(createTreeList())
+const currentKey = ref('')
+const nodeMap = ref<Map<string, UTSJSONObject>>(createNodeMap())
+const privateKeySeed = ref(0)
+
+const treeProps = computed((): UTSJSONObject => {
+  const merged = createTreeProps();
+  const custom = componentProps.props as UTSJSONObject;
+  const label = custom['label'];
+  if (valueToString(label) != '') {
+    merged['label'] = label;
+  }
+  const children = custom['children'];
+  if (valueToString(children) != '') {
+    merged['children'] = children;
+  }
+  const nodeKey = custom['nodeKey'];
+  if (valueToString(nodeKey) != '') {
+    merged['nodeKey'] = nodeKey;
+  }
+  const disabled = custom['disabled'];
+  if (valueToString(disabled) != '') {
+    merged['disabled'] = disabled;
+  }
+  return merged;
+})
+
+const labelKey = computed((): string => {
+  return valueToString((treeProps.value as UTSJSONObject)['label']) == '' ? 'label' : valueToString((treeProps.value as UTSJSONObject)['label']);
+})
+
+const childrenKey = computed((): string => {
+  return valueToString((treeProps.value as UTSJSONObject)['children']) == '' ? 'children' : valueToString((treeProps.value as UTSJSONObject)['children']);
+})
+
+const disabledKey = computed((): string => {
+  return valueToString((treeProps.value as UTSJSONObject)['disabled']) == '' ? 'disabled' : valueToString((treeProps.value as UTSJSONObject)['disabled']);
+})
+
+const keyField = computed((): string => {
+  return componentProps.nodeKey != '' ? componentProps.nodeKey : valueToString((treeProps.value as UTSJSONObject)['nodeKey']);
+})
+
+function getChildren(node: UTSJSONObject): UTSJSONObject[] {
+  const rawChildren = node[childrenKey.value] as UTSJSONObject[] | null;
+  if (Array.isArray(rawChildren)) {
+    return rawChildren as UTSJSONObject[];
+  }
+  return createTreeList();
+}
+
+function getNodeKey(node: UTSJSONObject): string {
+  return valueToString(node['__upTreeKey']);
+}
+
+function getNodeLabel(node: UTSJSONObject): string {
+  return valueToString(node[labelKey.value]);
+}
+
+function isNodeDisabled(node: UTSJSONObject): boolean {
+  return valueToBoolean(node[disabledKey.value]);
+}
+
+function includesKey(keys: any[], key: string): boolean {
+  for (let i = 0; i < keys.length; i++) {
+    if (valueToString(keys[i]) == key) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function collectVisibleNodes(nodes: UTSJSONObject[], level: number, result: UTSJSONObject[]): void {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i] as UTSJSONObject;
+    const children = getChildren(node);
+    const item = {
+      key: getNodeKey(node),
+      node,
+      level,
+      slotLevel: level + 1,
+      label: getNodeLabel(node),
+      hasChildren: children.length > 0,
+      expanded: valueToBoolean(node['expanded']),
+      checked: valueToBoolean(node['checked']),
+      indeterminate: valueToBoolean(node['indeterminate']),
+      disabled: isNodeDisabled(node)
+    } as UTSJSONObject;
+    result.push(item);
+    if (children.length > 0 && valueToBoolean(node['expanded'])) {
+      collectVisibleNodes(children, level + 1, result);
+    }
+  }
+}
+
+const visibleNodes = computed((): UTSJSONObject[] => {
+  const result = [] as UTSJSONObject[];
+  collectVisibleNodes(treeData.value as UTSJSONObject[], 0, result);
+  return result;
+})
+
+const switcherColor = computed((): string => {
+  return '#606266';
+})
+
+function getItemHasChildren(item: UTSJSONObject): boolean {
+  return valueToBoolean(item['hasChildren']);
+}
+
+function getItemExpanded(item: UTSJSONObject): boolean {
+  return valueToBoolean(item['expanded']);
+}
+
+function getItemChecked(item: UTSJSONObject): boolean {
+  return valueToBoolean(item['checked']);
+}
+
+function getItemIndeterminate(item: UTSJSONObject): boolean {
+  return valueToBoolean(item['indeterminate']);
+}
+
+function getItemDisabled(item: UTSJSONObject): boolean {
+  return valueToBoolean(item['disabled']);
+}
+
+function getItemSlotLevel(item: UTSJSONObject): number {
+  const value = item['slotLevel'];
+  if (typeof value === 'number') {
+    return value;
+  }
+  return parseInt(valueToString(value));
+}
+
+function getItemLabel(item: UTSJSONObject): string {
+  return valueToString(item['label']);
+}
+
+function getIndentValue(level: number): string {
+  const raw = componentProps.indent;
+  if (typeof raw == 'number') {
+    return ((raw as number) * level).toString() + 'rpx';
+  }
+  const value = valueToString(raw);
+  if (value == '') {
+    return '0rpx';
+  }
+  if (value.endsWith('px')) {
+    return (parseFloat(value.replace('px', '')) * level).toString() + 'px';
+  }
+  if (value.endsWith('rpx')) {
+    return (parseFloat(value.replace('rpx', '')) * level).toString() + 'rpx';
+  }
+  return (parseFloat(value) * level).toString() + 'rpx';
+}
+
+function getNodeContentStyle(item: UTSJSONObject): UTSJSONObject {
+  return {
+    paddingLeft: getIndentValue(item['level'] as number)
+  } as UTSJSONObject;
+}
+
+function getNodeClass(item: UTSJSONObject): string {
+  const classes = [] as string[];
+  if (componentProps.highlightCurrent && valueToString(item['key']) == currentKey.value) {
+    classes.push('up-tree-node--current');
+  }
+  if (valueToBoolean(item['disabled'])) {
+    classes.push('up-tree-node--disabled');
+  }
+  return classes.join(' ');
+}
+
+function getNodeContentClass(item: UTSJSONObject): string {
+  if (componentProps.highlightCurrent && valueToString(item['key']) == currentKey.value) {
+    return 'up-tree-node__content--current';
+  }
+  return '';
+}
+
+function resolveNodeKey(node: UTSJSONObject, parentKey: string, index: number): string {
+  const rawKey = node[keyField.value];
+  const normalized = valueToString(rawKey);
+  if (normalized != '') {
+    return normalized;
+  }
+  privateKeySeed.value = privateKeySeed.value + 1;
+  return (parentKey == '' ? 'root' : parentKey) + '-' + index.toString() + '-' + privateKeySeed.value.toString();
+}
+
+function setChildrenChecked(node: UTSJSONObject, checked: boolean): void {
+  const children = getChildren(node);
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i] as UTSJSONObject;
+    if (!isNodeDisabled(child)) {
+      child['checked'] = checked;
+      child['indeterminate'] = false;
+      setChildrenChecked(child, checked);
+    }
+  }
+}
+
+function cloneNodes(nodes: UTSJSONObject[], parentKey: string, level: number): UTSJSONObject[] {
+  const list = [] as UTSJSONObject[];
+  for (let i = 0; i < nodes.length; i++) {
+    const source = nodes[i] as UTSJSONObject;
+    const cloned = deepClone(source) as UTSJSONObject | null;
+    const clone = cloned == null ? ({} as UTSJSONObject) : cloned;
+    const key = resolveNodeKey(clone, parentKey, i);
+    const rawChildren = source[childrenKey.value] as UTSJSONObject[] | null;
+    const children = Array.isArray(rawChildren) ? rawChildren as UTSJSONObject[] : createTreeList();
+    const expanded = componentProps.defaultExpandAll || includesKey(normalizeAnyList(componentProps.defaultExpandedKeys), key) || valueToBoolean(clone['expanded']);
+    const checked = includesKey(normalizeAnyList(componentProps.defaultCheckedKeys), key) || valueToBoolean(clone['checked']);
+
+    clone['__upTreeKey'] = key;
+    clone['__upTreeParentKey'] = parentKey;
+    clone['__upTreeLevel'] = level;
+    clone['expanded'] = expanded;
+    clone['checked'] = checked;
+    clone['indeterminate'] = false;
+    clone[childrenKey.value] = cloneNodes(children, key, level + 1);
+    if (checked && !componentProps.checkStrictly) {
+      setChildrenChecked(clone, true);
+    }
+
+    const map = nodeMap.value as Map<string, UTSJSONObject>;
+    map.set(key, clone);
+    list.push(clone);
+  }
+  return list;
+}
+
+function getParentNode(node: UTSJSONObject): UTSJSONObject | null {
+  const parentKey = valueToString(node['__upTreeParentKey']);
+  if (parentKey == '') {
+    return null;
+  }
+  const map = nodeMap.value as Map<string, UTSJSONObject>;
+  return map.get(parentKey) as UTSJSONObject | null;
+}
+
+function syncParentChecked(nodes: UTSJSONObject[]): void {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i] as UTSJSONObject;
+    const children = getChildren(node);
+    if (children.length > 0) {
+      syncParentChecked(children);
+      let enabledCount = 0;
+      let checkedCount = 0;
+      let someChecked = false;
+      for (let j = 0; j < children.length; j++) {
+        const child = children[j] as UTSJSONObject;
+        if (!isNodeDisabled(child)) {
+          enabledCount = enabledCount + 1;
+          if (valueToBoolean(child['checked'])) {
+            checkedCount = checkedCount + 1;
+          }
+          if (valueToBoolean(child['checked']) || valueToBoolean(child['indeterminate'])) {
+            someChecked = true;
+          }
+        }
+      }
+      const allChecked = enabledCount > 0 && checkedCount == enabledCount;
+      node['checked'] = allChecked;
+      node['indeterminate'] = !allChecked && someChecked;
+    }
+  }
+}
+
+function updateParentChecked(node: UTSJSONObject): void {
+  const parent = getParentNode(node);
+  if (parent == null) {
+    return;
+  }
+  const children = getChildren(parent);
+  let enabledCount = 0;
+  let checkedCount = 0;
+  let someChecked = false;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i] as UTSJSONObject;
+    if (!isNodeDisabled(child)) {
+      enabledCount = enabledCount + 1;
+      if (valueToBoolean(child['checked'])) {
+        checkedCount = checkedCount + 1;
+      }
+      if (valueToBoolean(child['checked']) || valueToBoolean(child['indeterminate'])) {
+        someChecked = true;
+      }
+    }
+  }
+  const allChecked = enabledCount > 0 && checkedCount == enabledCount;
+  parent['checked'] = allChecked;
+  parent['indeterminate'] = !allChecked && someChecked;
+  updateParentChecked(parent);
+}
+
+function setNodeChecked(node: UTSJSONObject, checked: boolean, deep: boolean): void {
+  node['checked'] = checked;
+  node['indeterminate'] = false;
+  if (!componentProps.checkStrictly && deep) {
+    setChildrenChecked(node, checked);
+  }
+  if (!componentProps.checkStrictly) {
+    updateParentChecked(node);
+  }
+}
+
+function getNodeByKey(key: any): UTSJSONObject | null {
+  const map = nodeMap.value as Map<string, UTSJSONObject>;
+  return map.get(valueToString(key)) as UTSJSONObject | null;
+}
+
+function getCurrentNode(): UTSJSONObject | null {
+  return getNodeByKey(currentKey.value);
+}
+
+function collapseSiblingNodes(node: UTSJSONObject): void {
+  const parent = getParentNode(node);
+  const siblings = parent == null ? (treeData.value as UTSJSONObject[]) : getChildren(parent);
+  const currentKeyLocal = getNodeKey(node);
+  for (let i = 0; i < siblings.length; i++) {
+    const sibling = siblings[i] as UTSJSONObject;
+    if (getNodeKey(sibling) != currentKeyLocal) {
+      sibling['expanded'] = false;
+    }
+  }
+}
+
+function toggleExpand(item: UTSJSONObject): void {
+  const node = item['node'] as UTSJSONObject;
+  const nextExpanded = !valueToBoolean(node['expanded']);
+  if (componentProps.accordion && nextExpanded) {
+    collapseSiblingNodes(node);
+  }
+  node['expanded'] = nextExpanded;
+  if (nextExpanded) {
+    emit('node-expand', node);
+  } else {
+    emit('node-collapse', node);
+  }
+}
+
+function walkNodes(nodes: UTSJSONObject[], callback: (node: UTSJSONObject) => void): void {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i] as UTSJSONObject;
+    callback(node);
+    walkNodes(getChildren(node), callback);
+  }
+}
+
+function getCheckedNodes(leafOnly: boolean = false): UTSJSONObject[] {
+  const result = [] as UTSJSONObject[];
+  walkNodes(treeData.value as UTSJSONObject[], (node: UTSJSONObject): void => {
+    const isLeaf = getChildren(node).length == 0;
+    if (valueToBoolean(node['checked']) && (!leafOnly || isLeaf)) {
+      result.push(node);
+    }
+  });
+  return result;
+}
+
+function getCheckedKeys(leafOnly: boolean = false): string[] {
+  const checkedNodes = getCheckedNodes(leafOnly);
+  const result = [] as string[];
+  for (let i = 0; i < checkedNodes.length; i++) {
+    result.push(getNodeKey(checkedNodes[i] as UTSJSONObject));
+  }
+  return result;
+}
+
+function getHalfCheckedNodes(): UTSJSONObject[] {
+  const result = [] as UTSJSONObject[];
+  walkNodes(treeData.value as UTSJSONObject[], (node: UTSJSONObject): void => {
+    if (valueToBoolean(node['indeterminate'])) {
+      result.push(node);
+    }
+  });
+  return result;
+}
+
+function getHalfCheckedKeys(): string[] {
+  const halfCheckedNodes = getHalfCheckedNodes();
+  const result = [] as string[];
+  for (let i = 0; i < halfCheckedNodes.length; i++) {
+    result.push(getNodeKey(halfCheckedNodes[i] as UTSJSONObject));
+  }
+  return result;
+}
+
+function emitCheck(node: UTSJSONObject): void {
+  emit('check', node, {
+    checkedNodes: getCheckedNodes(false),
+    checkedKeys: getCheckedKeys(false),
+    halfCheckedNodes: getHalfCheckedNodes(),
+    halfCheckedKeys: getHalfCheckedKeys()
+  } as UTSJSONObject);
+}
+
+function handleNodeClick(item: UTSJSONObject): void {
+  const node = item['node'] as UTSJSONObject;
+  const oldCurrentNode = getCurrentNode();
+  currentKey.value = valueToString(item['key']);
+  if (componentProps.expandOnClickNode && valueToBoolean(item['hasChildren'])) {
+    toggleExpand(item);
+  }
+  if (componentProps.checkOnClickNode && componentProps.showCheckbox && !valueToBoolean(item['disabled'])) {
+    setNodeChecked(node, !valueToBoolean(node['checked']), true);
+    emitCheck(node);
+  }
+  emit('node-click', node);
+  if (oldCurrentNode !== node) {
+    emit('current-change', node, oldCurrentNode);
+  }
+}
+
+function handleExpandClick(item: UTSJSONObject): void {
+  if (valueToBoolean(item['hasChildren'])) {
+    toggleExpand(item);
+  }
+}
+
+function handleCheckboxChange(item: UTSJSONObject, checked: boolean): void {
+  if (valueToBoolean(item['disabled'])) {
+    return;
+  }
+  const node = item['node'] as UTSJSONObject;
+  setNodeChecked(node, checked, true);
+  emit('check-change', node, checked);
+  emitCheck(node);
+}
+
+function handleCheckboxChangeEvent(item: UTSJSONObject, event: any | null): void {
+  handleCheckboxChange(item, valueToBoolean(event));
+}
+
+function setCheckedKeys(keys: any[], leafOnly: boolean = false): void {
+  walkNodes(treeData.value as UTSJSONObject[], (node: UTSJSONObject): void => {
+    node['checked'] = false;
+    node['indeterminate'] = false;
+  });
+  for (let i = 0; i < keys.length; i++) {
+    const node = getNodeByKey(keys[i]);
+    if (node != null) {
+      const isLeaf = getChildren(node).length == 0;
+      if (!leafOnly || isLeaf) {
+        setNodeChecked(node, true, !componentProps.checkStrictly);
+      }
+    }
+  }
+  if (!componentProps.checkStrictly) {
+    syncParentChecked(treeData.value as UTSJSONObject[]);
+  }
+}
+
+function setChecked(key: any, checked: boolean, deep: boolean = true): void {
+  const node = getNodeByKey(key);
+  if (node != null) {
+    setNodeChecked(node, checked, deep);
+  }
+}
+
+function setCurrentKey(key: any): void {
+  currentKey.value = valueToString(key);
+}
+
+function getCurrentKey(): string {
+  return currentKey.value;
+}
+
+function initTree(): void {
+  privateKeySeed.value = 0;
+  nodeMap.value = createNodeMap();
+  treeData.value = cloneNodes(componentProps.data as UTSJSONObject[], '', 0);
+  if (!componentProps.checkStrictly) {
+    syncParentChecked(treeData.value as UTSJSONObject[]);
+  }
+}
+
+watch((): UTSJSONObject[] => componentProps.data as UTSJSONObject[], () => {
+  initTree();
+}, { deep: true, immediate: true })
+
+watch((): UTSJSONObject => componentProps.props as UTSJSONObject, () => {
+  initTree();
+}, { deep: true })
+
+watch((): string => componentProps.nodeKey, () => {
+  initTree();
+})
+
+watch((): boolean => componentProps.defaultExpandAll, () => {
+  initTree();
+})
+
+watch((): any[] => normalizeAnyList(componentProps.defaultExpandedKeys), () => {
+  initTree();
+})
+
+watch((): any[] => normalizeAnyList(componentProps.defaultCheckedKeys), () => {
+  initTree();
+})
+
+watch((): boolean => componentProps.checkStrictly, () => {
+  initTree();
+})
+
+watch((): any => componentProps.currentNodeKey, (value: any): void => {
+  currentKey.value = valueToString(value);
+}, { immediate: true })
+
+defineExpose({
+  treeData,
+  currentKey,
+  nodeMap,
+  privateKeySeed,
+  treeProps,
+  labelKey,
+  childrenKey,
+  disabledKey,
+  keyField,
+  visibleNodes,
+  switcherColor,
+  getItemHasChildren,
+  getItemExpanded,
+  getItemChecked,
+  getItemIndeterminate,
+  getItemDisabled,
+  getItemSlotLevel,
+  getItemLabel,
+  initTree,
+  cloneNodes,
+  resolveNodeKey,
+  collectVisibleNodes,
+  getChildren,
+  getNodeKey,
+  getNodeLabel,
+  isNodeDisabled,
+  includesKey,
+  getNodeClass,
+  getNodeContentClass,
+  getNodeContentStyle,
+  getIndentValue,
+  handleNodeClick,
+  handleExpandClick,
+  toggleExpand,
+  collapseSiblingNodes,
+  handleCheckboxChange,
+  handleCheckboxChangeEvent,
+  setNodeChecked,
+  setChildrenChecked,
+  updateParentChecked,
+  syncParentChecked,
+  getParentNode,
+  walkNodes,
+  getNodeByKey,
+  getCheckedNodes,
+  getCheckedKeys,
+  getHalfCheckedNodes,
+  getHalfCheckedKeys,
+  setCheckedKeys,
+  setChecked,
+  setCurrentKey,
+  getCurrentKey,
+  getCurrentNode,
+  emitCheck
+})
+</script>
+
+<style scoped>
+.up-tree {
+  font-size: 28rpx;
+  color: var(--up-main-color, #303133);
+}
+
+.up-tree-node__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 72rpx;
+  box-sizing: border-box;
+  border-radius: 8rpx;
+}
+
+.up-tree-node__content--current {
+  background-color: var(--up-primary-light, #ecf5ff);
+}
+
+.up-tree-node--disabled {
+  opacity: 0.55;
+}
+
+.up-tree-node__switcher {
+  width: 36rpx;
+  height: 36rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.up-tree-node__checkbox {
+  margin-left: 8rpx;
+  margin-right: 8rpx;
+}
+
+.up-tree-node__label {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.up-tree-node__text {
+  color: var(--up-main-color, #303133);
+  font-size: 28rpx;
+  line-height: 40rpx;
+}
+</style>