feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,140 @@
+<template>
+  <div class="aa-tree">
+    <div
+      v-for="item in visibleList" :key="item.node.key"
+      class="aa-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="aa-tree-arrow"
+        :class="{ 'is-open': isExpanded(item.node.key) }"
+        @click.stop="toggleExpand(item.node.key)"
+      >▸</span>
+      <span v-else class="aa-tree-arrow-placeholder"></span>
+
+      <input
+        v-if="checkable"
+        type="checkbox" class="aa-tree-check"
+        :checked="isChecked(item.node.key)"
+        v-indeterminate="isIndeterminate(item.node.key)"
+        @click.stop="toggleCheck(item.node.key)"
+      >
+      <span class="aa-tree-label">{{ item.node.title }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaTree',
+  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>
+.aa-tree { min-width: 240px; border: 1px solid #E8ECF1; border-radius: 8px; padding: 4px; background: #fff; }
+.aa-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;
+}
+.aa-tree-node:hover { background: #F5F7FA; }
+.aa-tree-node.is-selected { background: #F0F5FF; color: #2F54EB; }
+.aa-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;
+}
+.aa-tree-arrow.is-open { transform: rotate(90deg); }
+.aa-tree-arrow-placeholder { width: 16px; flex-shrink: 0; }
+.aa-tree-check { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
+.aa-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>