aurora-admin/frameworks/Tree.vue2.vue

<template>
  <div class="kole-tree">
    <div
      v-for="item in visibleList" :key="item.node.key"
      class="kole-tree-node"
      :class="{ 'is-selected': isSelected(item.node.key) }"
      :style="{ paddingLeft: item.depth * 16 + 4 + 'px' }"
      @click="onRowClick(item.node)"
    >
      <span
        v-if="hasChildren(item.node)"
        class="kole-tree-arrow"
        :class="{ 'is-open': isExpanded(item.node.key) }"
        @click.stop="toggleExpand(item.node.key)"
      >▸</span>
      <span v-else class="kole-tree-arrow-placeholder"></span>

      <input
        v-if="checkable"
        type="checkbox" class="kole-tree-check"
        :checked="isChecked(item.node.key)"
        v-indeterminate="isIndeterminate(item.node.key)"
        @click.stop="toggleCheck(item.node.key)"
      >
      <span class="kole-tree-label">{{ item.node.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleTree',
  directives: {
    indeterminate(el, binding) { el.indeterminate = !!binding.value; }
  },
  props: {
    data: { type: Array, required: true },          // [{ key, title, children, disabled }]
    checkable: { type: Boolean, default: false },
    defaultExpandedKeys: { type: Array, default: () => [] },
    selectedKeys: { type: Array, default: () => [] },   // v-model:selectedKeys
    checkedKeys: { type: Array, default: () => [] }     // v-model:checkedKeys
  },
  data() {
    return {
      expanded: new Set(this.defaultExpandedKeys),
      selected: new Set(this.selectedKeys),
      checked: new Set(this.checkedKeys)
    };
  },
  computed: {
    visibleList() {
      const out = [];
      const walk = (nodes, depth) => {
        nodes.forEach(n => {
          out.push({ node: n, depth });
          if (this.hasChildren(n) && this.expanded.has(n.key)) walk(n.children, depth + 1);
        });
      };
      walk(this.data, 0);
      return out;
    }
  },
  methods: {
    hasChildren(n) { return n.children && n.children.length; },
    findNode(key, nodes = this.data) {
      for (const n of nodes) {
        if (n.key === key) return n;
        if (n.children) { const f = this.findNode(key, n.children); if (f) return f; }
      }
      return null;
    },
    descendantKeys(node) {
      let out = [];
      (node.children || []).forEach(c => { out.push(c.key); out = out.concat(this.descendantKeys(c)); });
      return out;
    },
    allChildrenChecked(node) {
      if (!this.hasChildren(node)) return this.checked.has(node.key);
      return node.children.every(c => this.allChildrenChecked(c));
    },
    isExpanded(k) { return this.expanded.has(k); },
    isSelected(k) { return this.selected.has(k); },
    isChecked(k) { return this.checked.has(k); },
    isIndeterminate(k) {
      const node = this.findNode(k);
      if (!node || !this.hasChildren(node)) return false;
      const desc = this.descendantKeys(node);
      const some = desc.some(d => this.checked.has(d));
      return some && !this.allChildrenChecked(node);
    },
    toggleExpand(key) {
      this.expanded.has(key) ? this.expanded.delete(key) : this.expanded.add(key);
      this.expanded = new Set(this.expanded);
    },
    onRowClick(node) {
      this.selected = new Set([node.key]);
      this.$emit('update:selectedKeys', [node.key]);
      this.$emit('select', node.key);
    },
    toggleCheck(key) {
      const node = this.findNode(key);
      const willCheck = !this.checked.has(key);
      const keys = [key, ...this.descendantKeys(node)];
      keys.forEach(k => willCheck ? this.checked.add(k) : this.checked.delete(k));
      // 向上级联
      const propagate = (nodes) => {
        nodes.forEach(n => {
          if (this.hasChildren(n)) {
            if (this.allChildrenChecked(n)) this.checked.add(n.key); else this.checked.delete(n.key);
            propagate(n.children);
          }
        });
      };
      propagate(this.data);
      this.checked = new Set(this.checked);
      this.$emit('update:checkedKeys', [...this.checked]);
      this.$emit('check', [...this.checked]);
    }
  }
};
</script>

<!-- 样式对齐 组件2.txt Tree 规范 -->
<style>
.kole-tree { min-width: 240px; border: 1px solid #E8ECF1; border-radius: 8px; padding: 4px; background: #fff; }
.kole-tree-node {
  display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;
  cursor: pointer; user-select: none; font-size: 14px; color: #262626; padding-right: 8px;
}
.kole-tree-node:hover { background: #F5F7FA; }
.kole-tree-node.is-selected { background: #F0F5FF; color: #2F54EB; }
.kole-tree-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  font-size: 12px; color: #6E6E6E; transition: transform .15s; flex-shrink: 0;
}
.kole-tree-arrow.is-open { transform: rotate(90deg); }
.kole-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }
.kole-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.kole-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>