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,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Aurora Admin · Tree (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<style>
+  /* 对齐 组件2.txt Tree 规范：节点高32px、缩进16px/级、箭头12px、选中 #F0F5FF/#2F54EB */
+  .demo { padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }
+  h1 { font-size: 20px; margin: 0 0 4px; }
+  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
+  .aa-tree { min-width: 240px; border: 1px solid var(--au-color-border); border-radius: 8px; padding: 4px; background: var(--au-color-card-bg); }
+
+  .aa-tree-node {
+    display: flex; align-items: center; gap: 4px; height: 32px; border-radius: 4px;
+    cursor: pointer; user-select: none; font-size: 14px; color: var(--au-color-text-body); padding-right: 8px;
+  }
+  .aa-tree-node:hover { background: var(--au-color-page-bg); }
+  .aa-tree-node.is-selected { background: var(--au-color-brand-bg); color: var(--au-color-brand); }
+  .aa-tree-arrow {
+    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
+    font-size: 12px; color: var(--au-color-text-secondary); 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>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Tree 组件（纯 H5）</h1>
+  <p class="sub">对齐 Tree 规范：节点高32px、缩进16px/级、箭头12px、选中态 #F0F5FF + 品牌色、支持复选框级联</p>
+
+  <label style="font-size:13px;color:var(--color-text-secondary);margin-right:16px;">
+    <input type="checkbox" id="chkToggle" checked onchange="checkable=this.checked; render();"> 启用复选框
+  </label>
+  <div class="aa-tree" role="tree" id="tree" style="margin-top:12px"></div>
+</div>
+
+<script>
+const treeData = [
+  { key: 'org', title: '某某科技', children: [
+    { key: 'tech', title: '技术中心', children: [
+      { key: 'fe', title: '前端组' },
+      { key: 'be', title: '后端组' }
+    ]},
+    { key: 'product', title: '产品中心', children: [
+      { key: 'pm', title: '产品组' },
+      { key: 'ux', title: '设计组' }
+    ]}
+  ]}
+];
+
+let checkable = true;
+let expanded = new Set(['org']);
+let selected = new Set(['fe']);
+let checked = new Set(['tech']);
+
+function findNode(key, nodes = treeData) {
+  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, set) {
+  if (!node.children || !node.children.length) return set.has(node.key);
+  return node.children.every(c => allChildrenChecked(c, set));
+}
+function hasChildren(n) { return n.children && n.children.length; }
+
+function toggleExpand(key) {
+  expanded.has(key) ? expanded.delete(key) : expanded.add(key);
+  render();
+}
+function selectRow(key) {
+  selected = new Set([key]); render();
+}
+function toggleCheck(key) {
+  const node = findNode(key);
+  const willCheck = !checked.has(key);
+  const keys = [key, ...descendantKeys(node)];
+  keys.forEach(k => willCheck ? checked.add(k) : checked.delete(k));
+  // 向上级联：父节点 = 其所有子节点均勾选
+  propagateUp(node);
+  render();
+}
+function propagateUp(node) {
+  // 简单向上：遍历所有有父的节点
+  function walk(nodes, parent) {
+    nodes.forEach(n => {
+      if (parent && hasChildren(parent)) {
+        if (allChildrenChecked(parent, checked)) checked.add(parent.key);
+        else checked.delete(parent.key);
+      }
+      if (n.children) walk(n.children, n);
+    });
+  }
+  walk(treeData, null);
+}
+
+function visibleList() {
+  const out = [];
+  (function walk(nodes, depth) {
+    nodes.forEach(n => {
+      out.push({ node: n, depth });
+      if (hasChildren(n) && expanded.has(n.key)) walk(n.children, depth + 1);
+    });
+  })(treeData, 0);
+  return out;
+}
+
+function render() {
+  const root = document.getElementById('tree');
+  root.innerHTML = visibleList().map(({ node, depth }) => {
+    const open = expanded.has(node.key);
+    const arrow = hasChildren(node)
+      ? `<span class="aa-tree-arrow ${open ? 'is-open' : ''}" role="tree" onclick="toggleExpand('${node.key}')">▸</span>`
+      : `<span class="aa-tree-arrow-placeholder"></span>`;
+    const check = checkable
+      ? `<input type="checkbox" class="aa-tree-check" role="tree" ${checked.has(node.key) ? 'checked' : ''} onclick="event.stopPropagation();toggleCheck('${node.key}')">`
+      : '';
+    const sel = selected.has(node.key) ? ' is-selected' : '';
+    return `<div class="aa-tree-node${sel}" role="treeitem" tabindex="0" style="padding-left:${depth * 16 + 4}px" onclick="selectRow('${node.key}')">
+      ${arrow}${check}<span class="aa-tree-label">${node.title}</span>
+    </div>`;
+  }).join('');
+}
+render();
+</script>
+</body>
+</html>
@@ -0,0 +1,129 @@
+import React, { useState, useMemo, useRef } from 'react';
+import './Tree.css';
+
+/**
+ * Aurora Admin Tree（React）
+ * 对齐 组件2.txt Tree 规范：节点高32px、缩进16px/级、箭头12px、选中 #F0F5FF/#2F54EB、复选框级联
+ * nodes: [{ key, title, children, disabled }]
+ * 受控：selectedKeys / checkedKeys（均为数组），通过 onSelect / onCheck 回调更新
+ */
+function findNode(key, nodes) {
+  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, set) {
+  if (!node.children || !node.children.length) return set.has(node.key);
+  return node.children.every((c) => allChildrenChecked(c, set));
+}
+
+export default function Tree({
+  data = [],
+  checkable = false,
+  defaultExpandedKeys = [],
+  selectedKeys = [],
+  checkedKeys = [],
+  onSelect,
+  onCheck
+}) {
+  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));
+  const [selected, setSelected] = useState(() => new Set(selectedKeys));
+  const [checked, setChecked] = useState(() => new Set(checkedKeys));
+
+  const visibleList = useMemo(() => {
+    const out = [];
+    const walk = (nodes, depth) => {
+      nodes.forEach((n) => {
+        out.push({ node: n, depth });
+        if (n.children && n.children.length && expanded.has(n.key)) walk(n.children, depth + 1);
+      });
+    };
+    walk(data, 0);
+    return out;
+  }, [data, expanded]);
+
+  const hasChildren = (n) => !!(n.children && n.children.length);
+  const isIndeterminate = (key) => {
+    const node = findNode(key, data);
+    if (!node || !hasChildren(node)) return false;
+    const desc = descendantKeys(node);
+    return desc.some((d) => checked.has(d)) && !allChildrenChecked(node, checked);
+  };
+
+  const toggleExpand = (key) =>
+    setExpanded((prev) => { const n = new Set(prev); n.has(key) ? n.delete(key) : n.add(key); return n; });
+
+  const onRowClick = (node) => {
+    setSelected(new Set([node.key]));
+    onSelect && onSelect(node.key);
+  };
+
+  const toggleCheck = (key) => {
+    const node = findNode(key, data);
+    const willCheck = !checked.has(key);
+    const keys = [key, ...descendantKeys(node)];
+    const next = new Set(checked);
+    keys.forEach((k) => (willCheck ? next.add(k) : next.delete(k)));
+    const propagate = (nodes) => {
+      nodes.forEach((n) => {
+        if (hasChildren(n)) {
+          if (allChildrenChecked(n, next)) next.add(n.key); else next.delete(n.key);
+          propagate(n.children);
+        }
+      });
+    };
+    propagate(data);
+    setChecked(next);
+    onCheck && onCheck([...next]);
+  };
+
+  return (
+    <div className="aa-tree">
+      {visibleList.map(({ node, depth }) => {
+        const open = expanded.has(node.key);
+        const arrow = hasChildren(node) ? (
+          <span className={`aa-tree-arrow${open ? ' is-open' : ''}`} onClick={(e) => { e.stopPropagation(); toggleExpand(node.key); }}>▸</span>
+        ) : <span className="aa-tree-arrow-placeholder" />;
+        const check = checkable ? (
+          <input
+            type="checkbox" className="aa-tree-check"
+            checked={checked.has(node.key)}
+            ref={(el) => el && (el.indeterminate = isIndeterminate(node.key))}
+            onClick={(e) => e.stopPropagation()}
+            onChange={() => toggleCheck(node.key)}
+          />
+        ) : null;
+        return (
+          <div
+            key={node.key}
+            className={`aa-tree-node${selected.has(node.key) ? ' is-selected' : ''}`}
+            style={{ paddingLeft: depth * 16 + 4 }}
+            onClick={() => onRowClick(node)}
+          >
+            {arrow}
+            {check}
+            <span className="aa-tree-label">{node.title}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Tree from './Tree';
+const data = [
+  { key: 'org', title: '某某科技', children: [
+    { key: 'tech', title: '技术中心', children: [{ key: 'fe', title: '前端组' }] }
+  ]}
+];
+<Tree data={data} checkable defaultExpandedKeys={['org']} onSelect={setSel} onCheck={setChecked} />
+*/
@@ -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>
@@ -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>