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

site/sources/tree/vue3.txt

@@ -0,0 +1,134 @@
+<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)"
+        :indeterminate.prop="isIndeterminate(item.node.key)"
+        @click.stop="toggleCheck(item.node.key)"
+      >
+      <span class="aa-tree-label">{{ item.node.title }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, reactive } from 'vue';
+
+const props = defineProps({
+  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
+});
+const emit = defineEmits(['update:selectedKeys', 'select', 'update:checkedKeys', 'check']);
+
+const state = reactive({
+  expanded: new Set(props.defaultExpandedKeys),
+  selected: new Set(props.selectedKeys),
+  checked: new Set(props.checkedKeys)
+});
+
+const hasChildren = (n) => !!(n.children && n.children.length);
+function findNode(key, nodes = props.data) {
+  for (const n of nodes) {
+    if (n.key === key) return n;
+    if (n.children) { const f = findNode(key, n.children); if (f) return f; }
+  }
+  return null;
+}
+function descendantKeys(node) {
+  let out = [];
+  (node.children || []).forEach(c => { out.push(c.key); out = out.concat(descendantKeys(c)); });
+  return out;
+}
+function allChildrenChecked(node) {
+  if (!hasChildren(node)) return state.checked.has(node.key);
+  return node.children.every(c => allChildrenChecked(c));
+}
+
+const visibleList = computed(() => {
+  const out = [];
+  const walk = (nodes, depth) => {
+    nodes.forEach(n => {
+      out.push({ node: n, depth });
+      if (hasChildren(n) && state.expanded.has(n.key)) walk(n.children, depth + 1);
+    });
+  };
+  walk(props.data, 0);
+  return out;
+});
+
+function isExpanded(k) { return state.expanded.has(k); }
+function isSelected(k) { return state.selected.has(k); }
+function isChecked(k) { return state.checked.has(k); }
+function isIndeterminate(k) {
+  const node = findNode(k);
+  if (!node || !hasChildren(node)) return false;
+  const desc = descendantKeys(node);
+  return desc.some(d => state.checked.has(d)) && !allChildrenChecked(node);
+}
+
+function toggleExpand(key) {
+  state.expanded.has(key) ? state.expanded.delete(key) : state.expanded.add(key);
+  state.expanded = new Set(state.expanded);
+}
+function onRowClick(node) {
+  state.selected = new Set([node.key]);
+  emit('update:selectedKeys', [node.key]);
+  emit('select', node.key);
+}
+function toggleCheck(key) {
+  const node = findNode(key);
+  const willCheck = !state.checked.has(key);
+  const keys = [key, ...descendantKeys(node)];
+  keys.forEach(k => willCheck ? state.checked.add(k) : state.checked.delete(k));
+  const propagate = (nodes) => {
+    nodes.forEach(n => {
+      if (hasChildren(n)) {
+        if (allChildrenChecked(n)) state.checked.add(n.key); else state.checked.delete(n.key);
+        propagate(n.children);
+      }
+    });
+  };
+  propagate(props.data);
+  state.checked = new Set(state.checked);
+  emit('update:checkedKeys', [...state.checked]);
+  emit('check', [...state.checked]);
+}
+</script>
+
+<!-- 样式对齐 组件2.txt Tree 规范 -->
+<style scoped>
+.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>