aurora-admin/frameworks/TreeTable.jsx

import React, { useState, useMemo, useRef } from 'react';
import './TreeTable.css';

/**
 * Aurora Admin TreeTable（React）
 * 对齐 组件7.txt TreeTable 规范：层级缩进16px/级、展开/折叠箭头、父级汇总（叶子合计）、选择父级联动子级
 * columns: [{ key, title, align? }]
 * data: 树形行 [{ key, children, ...字段 }]
 * summaryColumn: 指定数值列，父级与表尾显示叶子求和
 */
function hasChildren(n) { return !!(n.children && n.children.length); }
function leafSum(node, key) {
  if (!hasChildren(node)) return Number(node[key]) || 0;
  return node.children.reduce((s, c) => s + leafSum(c, key), 0);
}
function leafKeys(data, rowKey) {
  const out = [];
  const walk = (nodes) => nodes.forEach(n => { if (hasChildren(n)) walk(n.children); else out.push(n[rowKey]); });
  walk(data);
  return out;
}
function descendantKeys(node, rowKey) { let o = []; (node.children || []).forEach(c => { o.push(c[rowKey]); o = o.concat(descendantKeys(c, rowKey)); }); return o; }
function allChildrenSelected(node, set, rowKey) { if (!hasChildren(node)) return set.has(node[rowKey]); return node.children.every(c => allChildrenSelected(c, set, rowKey)); }

export default function TreeTable({
  columns = [],
  data = [],
  rowKey = 'key',
  selectable = false,
  selectedKeys = [],
  defaultExpandedKeys = [],
  summaryColumn = '',
  summary = { label: '合计' },
  onSelectionChange
}) {
  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));
  const [selected, setSelected] = useState(() => new Set(selectedKeys));

  const visibleList = useMemo(() => {
    const out = [];
    const walk = (nodes, depth) => nodes.forEach(n => {
      out.push({ node: n, depth });
      if (hasChildren(n) && expanded.has(n[rowKey])) walk(n.children, depth + 1);
    });
    walk(data, 0);
    return out;
  }, [data, expanded, rowKey]);

  const totalOf = (key) => data.reduce((s, n) => s + leafSum(n, key), 0);
  const allSelected = data.length > 0 && leafKeys(data, rowKey).every(k => selected.has(k));
  const leaves = leafKeys(data, rowKey);
  const nSel = leaves.filter(k => selected.has(k)).length;
  const someSelected = nSel > 0 && nSel < leaves.length;

  const toggleExpand = (key) => setExpanded(prev => { const n = new Set(prev); n.has(key) ? n.delete(key) : n.add(key); return n; });

  const toggleCheck = (node) => {
    const key = node[rowKey];
    const willCheck = !selected.has(key);
    const keys = [key, ...descendantKeys(node, rowKey)];
    const next = new Set(selected);
    keys.forEach(k => willCheck ? next.add(k) : next.delete(k));
    const propagate = (nodes) => nodes.forEach(n => {
      if (hasChildren(n)) { allChildrenSelected(n, next, rowKey) ? next.add(n[rowKey]) : next.delete(n[rowKey]); propagate(n.children); }
    });
    propagate(data);
    setSelected(next);
    onSelectionChange && onSelectionChange([...next]);
  };

  const toggleAll = () => {
    const next = allSelected ? [] : leafKeys(data, rowKey);
    setSelected(new Set(next));
    onSelectionChange && onSelectionChange(next);
  };

  const onRowClick = (node) => { setSelected(new Set([node[rowKey]])); onSelectionChange && onSelectionChange([node[rowKey]]); };

  const cellValue = (node, key) => (hasChildren(node) && key === summaryColumn ? leafSum(node, key) : node[key]);

  return (
    <div className="aa-tt">
      <table>
        <thead>
          <tr>
            {selectable && <th className="col-selection" style={{ width: 48 }}>
              <input type="checkbox" className="tt-check" checked={allSelected}
                ref={el => el && (el.indeterminate = someSelected)} onChange={toggleAll} />
            </th>}
            {columns.map(col => (
              <th key={col.key} className={col.align === 'right' ? 'align-right' : ''}>{col.title}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {visibleList.map(({ node, depth }) => (
            <tr key={node[rowKey]} className={selected.has(node[rowKey]) ? 'is-selected' : ''} onClick={() => onRowClick(node)}>
              {selectable && (
                <td className="col-selection">
                  <input type="checkbox" className="tt-check" checked={selected.has(node[rowKey])}
                    onClick={e => e.stopPropagation()} onChange={() => toggleCheck(node)} />
                </td>
              )}
              {columns.map(col => (
                <td key={col.key} className={col.align === 'right' ? 'align-right' : ''}>
                  {col.key === columns[0].key ? (
                    <div className="tree-cell" style={{ paddingLeft: depth * 16 }}>
                      {hasChildren(node) ? (
                        <span className={`tt-arrow${expanded.has(node[rowKey]) ? ' is-open' : ''}`} onClick={e => { e.stopPropagation(); toggleExpand(node[rowKey]); }}>▸</span>
                      ) : <span className="tt-arrow-placeholder" />}
                      <span>{node[col.key]}</span>
                      {hasChildren(node) && summaryColumn && <span className="tt-summary">(汇总)</span>}
                    </div>
                  ) : cellValue(node, col.key)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
        {summaryColumn && (
          <tfoot>
            <tr>
              {selectable && <td />}
              <td>{summary.label || '合计'}</td>
              {columns.slice(1).map(col => (
                <td key={col.key} className={col.align === 'right' ? 'align-right' : ''}>
                  {col.key === summaryColumn ? totalOf(col.key) : ''}
                </td>
              ))}
            </tr>
          </tfoot>
        )}
      </table>
    </div>
  );
}

/*
用法示例：
import TreeTable from './TreeTable';
const columns = [
  { key: 'name', title: '部门/人员' },
  { key: 'count', title: '人数', align: 'right' },
  { key: 'budget', title: '预算(万)', align: 'right' }
];
const data = [{ key: 'tech', name: '技术中心', children: [{ key: 'fe', name: '前端组', count: 12, budget: 80 }] }];
<TreeTable columns={columns} data={data} selectable summaryColumn="budget" defaultExpandedKeys={['tech']} onSelectionChange={setSel} />
*/