react-extjs 0.0.1

package/src/components/Writer.tsx

@@ -0,0 +1,303 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { EditorGrid, type EditorColumn, type EditorGridHandle } from './EditorGrid';
+import { FormPanel, FormField, TextField } from './Form';
+import { Panel } from './Panel';
+import { Toolbar, type ToolbarItem } from './Toolbar';
+import { MessageBox, type MessageBoxIcon } from './MessageBox';
+
+export interface WriterUser {
+  id: number;
+  email: string;
+  first: string;
+  last: string;
+}
+
+export interface WriterProps {
+  /** 初始数据（前端 JSON 模拟，保留数据接口形态；等价于原版 Store 的本地数据加载） */
+  data?: WriterUser[];
+  width?: number;
+  height?: number;
+  /** 保留"写回后端"接口（等价于原版 JsonWriter 的 save 调用）；纯前端模拟下作为状态条回调 */
+  onSave?: (data: WriterUser[]) => void;
+}
+
+export interface WriterHandle {
+  setData: (data: WriterUser[]) => void;
+  getData: () => WriterUser[];
+}
+
+const DEFAULT_USERS: WriterUser[] = [
+  { id: 1, email: 'ed@extjs.com', first: 'Ed', last: 'Spencer' },
+  { id: 2, email: 'abe@extjs.com', first: 'Abe', last: 'Elias' },
+  { id: 3, email: 'aram@extjs.com', first: 'Aram', last: 'Misk' },
+  { id: 4, email: 'jack@extjs.com', first: 'Jack', last: 'Slocum' },
+  { id: 5, email: 'tommy@extjs.com', first: 'Tommy', last: 'Maintz' },
+];
+
+const columns: EditorColumn[] = [
+  { header: 'ID', dataIndex: 'id', width: 40, editor: false },
+  { header: 'Email', dataIndex: 'email', width: 130, editor: true },
+  { header: 'First', dataIndex: 'first', width: 80, editor: true },
+  { header: 'Last', dataIndex: 'last', width: 80, editor: true },
+];
+
+// 全局提示改用项目自有 MessageBox 组件（对齐 Ext.MessageBox 外观、跟随 xtheme 主题）。
+// status 沿用原生 App.setAlert 语义：'ok'(写成功) | 'notice'(提示) | 'error'(阻断/异常)，
+// 映射到 MessageBox 的标题与图标；停留时长沿用原生 App.addMessage 算法（msg.length/13.3 钳制 3~9 秒）。
+type ToastStatus = 'ok' | 'notice' | 'error';
+const STATUS_TO_MB: Record<ToastStatus, { title: string; icon: MessageBoxIcon }> = {
+  ok: { title: 'Success', icon: 'info' },
+  notice: { title: 'Notice', icon: 'info' },
+  error: { title: 'Error', icon: 'error' },
+};
+type WriterMsgState = { title: string; msg: string; icon: MessageBoxIcon; key: number };
+
+// EditorGrid 数据层是通用 Record<string,unknown>，本组件用强类型 WriterUser；
+// 二者转换统一走 unknown 断言（用户数据是受控 JSON，结构由列定义保证）。
+const asUsers = (rows: Record<string, unknown>[]): WriterUser[] => rows as unknown as WriterUser[];
+const asRecords = (users: WriterUser[]): Record<string, unknown>[] =>
+  users as unknown as Record<string, unknown>[];
+
+/**
+ * 保真复刻 examples/writer（writer.js + UserGrid.js + UserForm.js）：
+ * - 左侧 Panel(frame, title=Users) 包 EditorGrid（可编辑用户表），tbar=[Add,Delete]、
+ *   bbar=[autoSave/batch/writeAllFields 三个 toggle]、fbar=[Save]；
+ * - 右侧 FormPanel(frame, labelAlign=right, title=User) 含 email(vtype email, allowBlank false)/
+ *   first/last 三个受控 TextField（各由 FormField 承载 label），底部 Toolbar=[Save,Create,Reset]；
+ * - 行点击 → 表单 loadRecord 填充；Add 顶部插入空记录、Delete 删选中行、Form Save 更新选中记录、
+ *   Form Create 顶部新增、Form Reset 清空；数据层用本地 state 模拟 Store+JsonWriter 写回。
+ * - 全局消息提示（等价原版 App.setAlert 的写成功/阻断反馈）改用项目自有 MessageBox 组件
+ *   （对齐 Ext.MessageBox 外观、跟随 xtheme 主题），停留时长沿用原生 App.addMessage 算法，可手动关闭。
+ */
+export const Writer = forwardRef<WriterHandle, WriterProps>(function Writer(
+  { data = DEFAULT_USERS, width = 840, height = 300, onSave },
+  ref,
+) {
+  const [users, setUsers] = useState<WriterUser[]>(() => data.map((u) => ({ ...u })));
+  const [selectedRow, setSelectedRow] = useState<number>(-1);
+  const [form, setForm] = useState<WriterUser>({ id: 0, email: '', first: '', last: '' });
+  const [autoSave, setAutoSave] = useState(true);
+  const [batch, setBatch] = useState(false);
+  const [writeAllFields, setWriteAllFields] = useState(true);
+  const [msg, setMsg] = useState<WriterMsgState | null>(null);
+
+  const gridRef = useRef<EditorGridHandle>(null);
+  // 初始数据副本（稳定引用），仅用于首次装配 EditorGrid；后续内部修改走 ref 句柄 +
+  // onDataChange 单向回写 users，避免把 users 回传给 data 触发 EditorGrid 内部
+  // setRows→onDataChange→setUsers 的引用循环。
+  const initialData = useRef(asRecords(data.map((u) => ({ ...u })))).current;
+  const nextId = useRef(Math.max(0, ...data.map((u) => u.id)) + 1);
+  const msgTimer = useRef<number | undefined>(undefined);
+
+  // 提示改用 MessageBox：status → 标题/图标（STATUS_TO_MB），停留时长沿用原生 App.addMessage 算法。
+  const showToast = useCallback((text: string, status: ToastStatus = 'ok') => {
+    const { title, icon } = STATUS_TO_MB[status];
+    setMsg({ title, msg: text, icon, key: Date.now() });
+    window.clearTimeout(msgTimer.current);
+    const delay = Math.min(9, Math.max(3, text.length / 13.3)) * 1000;
+    msgTimer.current = window.setTimeout(() => setMsg(null), delay);
+  }, []);
+
+  useEffect(() => () => window.clearTimeout(msgTimer.current), []);
+
+  // 外部 data prop 变化 → 单向同步进 EditorGrid（不回流 users，防循环）
+  useEffect(() => {
+    gridRef.current?.setData(asRecords(data.map((u) => ({ ...u }))));
+  }, [data]);
+
+  // 同步 EditorGrid 内部数据源到本地 users（单一数据源，等价 Store）
+  const handleDataChange = useCallback((rows: Record<string, unknown>[]) => {
+    setUsers(asUsers(rows));
+  }, []);
+
+  const onRowClick = useCallback(
+    (idx: number) => {
+      setSelectedRow(idx);
+    },
+    [],
+  );
+
+  // 选中行 / 网格数据变化 → 右侧表单实时同步该行最新值（等价 Ext 选中即回填，
+  // 且单元格编辑提交后右侧表单随之刷新，避免「右侧不实时更新」）。
+  useEffect(() => {
+    if (selectedRow >= 0 && users[selectedRow]) {
+      setForm({ ...users[selectedRow] });
+    }
+  }, [users, selectedRow]);
+
+  // —— 网格工具栏动作 ——
+  const onAdd = useCallback(() => {
+    const rec: WriterUser = { id: nextId.current++, email: 'new@extjs.com', first: '', last: '' };
+    const current = asUsers(gridRef.current?.getData() ?? []);
+    gridRef.current?.setData(asRecords([rec, ...current])); // 顶部插入（等价 Ext.Store.insert(0, rec)）
+    setSelectedRow(0);
+    setForm({ ...rec });
+    showToast('Add', 'ok');
+  }, [showToast]);
+
+  const onDelete = useCallback(() => {
+    if (selectedRow < 0) {
+      showToast('Select a row first', 'error');
+      return;
+    }
+    gridRef.current?.removeRecord(selectedRow);
+    setSelectedRow(-1);
+    setForm({ id: 0, email: '', first: '', last: '' });
+    showToast('Delete', 'ok');
+  }, [selectedRow, showToast]);
+
+  const onGridSave = useCallback(() => {
+    const current = asUsers(gridRef.current?.getData() ?? []);
+    onSave?.(current);
+    showToast(`Saved ${current.length} record(s)`, 'ok');
+  }, [onSave, showToast]);
+
+  // autoSave：单元格编辑提交即写回（等价 JsonWriter 自动保存）
+  const handleCellEdit = useCallback(() => {
+    if (autoSave) {
+      onSave?.(asUsers(gridRef.current?.getData() ?? []));
+      showToast('Auto saved', 'ok');
+    }
+  }, [autoSave, onSave, showToast]);
+
+  // —— 表单动作 ——
+  const onFormSave = useCallback(() => {
+    if (selectedRow < 0) {
+      showToast('Select a row first', 'error');
+      return;
+    }
+    gridRef.current?.updateRecord(
+      selectedRow,
+      { ...form, id: users[selectedRow].id } as unknown as Record<string, unknown>,
+    );
+    showToast('Save');
+  }, [selectedRow, users, form, showToast]);
+
+  const onCreate = useCallback(() => {
+    const rec: WriterUser = {
+      id: nextId.current++,
+      email: form.email,
+      first: form.first,
+      last: form.last,
+    };
+    const current = asUsers(gridRef.current?.getData() ?? []);
+    gridRef.current?.setData(asRecords([rec, ...current])); // 顶部新增
+    setSelectedRow(0);
+    showToast('Create', 'ok');
+  }, [form, showToast]);
+
+  const onReset = useCallback(() => {
+    setForm({ id: 0, email: '', first: '', last: '' });
+    setSelectedRow(-1);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setData: (d) => gridRef.current?.setData(asRecords(d)),
+      getData: () => asUsers(gridRef.current?.getData() ?? []),
+    }),
+    [],
+  );
+
+  const gridTbar: ToolbarItem[] = [
+    { text: 'Add', handler: onAdd },
+    { text: 'Delete', handler: onDelete },
+  ];
+  const gridBbar: ToolbarItem[] = [
+    { text: 'autoSave', enableToggle: true, pressed: autoSave, onToggle: (v) => setAutoSave(v) },
+    { text: 'batch', enableToggle: true, pressed: batch, onToggle: (v) => setBatch(v) },
+    { text: 'writeAllFields', enableToggle: true, pressed: writeAllFields, onToggle: (v) => setWriteAllFields(v) },
+  ];
+  const gridFbar: ToolbarItem[] = [{ text: 'Save', handler: onGridSave }];
+  const formButtons: ToolbarItem[] = [
+    { text: 'Save', handler: onFormSave },
+    { text: 'Create', handler: onCreate },
+    { text: 'Reset', handler: onReset },
+  ];
+
+  // Panel 高度分配：header + tbar + body(grid) + bbar + fbar + 底框 之和应等于 height。
+  // 实测各项：header 23、tbar/bbar/fbar 各 27、body 上下内边距各 8、底框 6，
+  // 故 gridH = height - (23+27+27+27+16+6) = height - 126，使网格恰好填满、无底部空隙。
+  const gridH = height - 126;
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-flex', gap: 8, width, height }}>
+      <Panel
+        title="Users"
+        frame
+        width={500}
+        height={height}
+        tbar={<Toolbar items={gridTbar} />}
+        bbar={<Toolbar items={gridBbar} />}
+        fbar={<Toolbar items={gridFbar} />}
+      >
+        <EditorGrid
+          ref={gridRef}
+          columns={columns}
+          data={initialData}
+          width={500}
+          height={gridH}
+          stripeRows
+          selectedRow={selectedRow >= 0 ? selectedRow : undefined}
+          onRowClick={onRowClick}
+          onDataChange={handleDataChange}
+          onCellEdit={handleCellEdit}
+        />
+      </Panel>
+      <FormPanel title="User" labelAlign="right" width={300} height={height}>
+        <FormField fieldLabel="Email" labelAlign="right">
+          <TextField
+            name="email"
+            vtype="email"
+            allowBlank={false}
+            value={form.email}
+            onChange={(v) => setForm((f) => ({ ...f, email: v }))}
+          />
+        </FormField>
+        <FormField fieldLabel="First" labelAlign="right">
+          <TextField
+            name="first"
+            value={form.first}
+            onChange={(v) => setForm((f) => ({ ...f, first: v }))}
+          />
+        </FormField>
+        <FormField fieldLabel="Last" labelAlign="right">
+          <TextField
+            name="last"
+            value={form.last}
+            onChange={(v) => setForm((f) => ({ ...f, last: v }))}
+          />
+        </FormField>
+        <Toolbar items={formButtons} />
+      </FormPanel>
+      {msg && (
+        // 项目自有 MessageBox 提示（对齐 Ext.MessageBox 外观、跟随 xtheme 主题），顶部居中覆盖在
+        // Writer 之上；容器定宽并居中，内部 MessageBox 绝对定位 0,0 即与容器同宽居中。OK 按钮或关闭
+        // 可手动消失，否则停留原生 App.addMessage 算法时长后自动卸载隐藏。
+        <div
+          key={msg.key}
+          style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 320, zIndex: 9000 }}
+        >
+          <MessageBox
+            title={msg.title}
+            msg={msg.msg}
+            width={320}
+            icon={msg.icon}
+            buttons={[{ text: 'OK', onClick: () => setMsg(null), width: 75 }]}
+            onClose={() => setMsg(null)}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default Writer;

package/src/components/XmlTreeLoader.tsx

@@ -0,0 +1,233 @@
+/**
+ * Ext.ux.tree.XmlTreeLoader 保真复刻（来源 examples/ux/XmlTreeLoader.js + src/widgets/tree/TreeLoader.js）。
+ *
+ * 保真契约（行为对齐源码）：
+ *  - 继承 Ext.tree.TreeLoader 的「XML 文档 → TreeNode 层级」转换能力：
+ *      processResponse → 读取 responseXML，取 documentElement 作为根；
+ *      parseXml → 递归遍历 XML 元素节点，元素节点经 createNode 转为树节点，
+ *                 元素内的纯文本节点值作为 innerText 属性挂到父节点；
+ *      createNode → 收集元素的所有 XML 属性，额外写入 tagName，调用 processAttributes
+ *                 （模板方法，供子类/调用方定制属性，等价于 Ext 的 processAttributes），
+ *                 最终转为 React TreePanel 使用的 TreeNodeData。
+ *  - XML_NODE_ELEMENT = 1，XML_NODE_TEXT = 3（与 Ext 一致，只读常量）。
+ *  - 兼容两种数据源：
+ *      dataUrl：通过 fetch 拉取 XML 文本后解析（对齐 Ext 的 dataUrl 远程加载）；
+ *      data：直接传入 XML 字符串或已解析的 Document（便于内联/测试，对齐 Ext 内存数据）。
+ *
+ * 与原 Ext 的差异（刻意修正，不影响保真）：
+ *  - Ext 的 parseXml 在「元素节点 + 文本节点共存」时会因 `return nodes = text` 把元素节点丢弃；
+ *    此处改为：元素子节点恒转为 children，纯文本恒合并为 innerText，二者互不覆盖，结果更正确。
+ *  - Ext 的 TreeNode 自动 id 由 TreePanel 分配；此处用「父路径 + 标签名 + 序号」生成稳定 id，
+ *    保证 React key / 选中 / 异步加载定位可用。
+ */
+import { type TreeNodeData } from './Tree';
+
+export type XmlAttrMap = Record<string, any>;
+
+/** processAttributes 模板方法签名：直接修改 attr（无需返回值），对齐 Ext 同名钩子 */
+export type XmlProcessAttributes = (attr: XmlAttrMap) => void;
+
+export interface XmlTreeLoaderConfig {
+  /** 远程 XML 地址（与 data 二选一） */
+  dataUrl?: string;
+  /** 内联 XML：字符串或已解析的 Document（与 dataUrl 二选一） */
+  data?: string | Document;
+  /**
+   * 模板方法，在创建每个节点前定制属性（对齐 Ext.ux.tree.XmlTreeLoader#processAttributes）。
+   * 例：根据 author/book 标签设置 text、iconCls、leaf 等。
+   */
+  processAttributes?: XmlProcessAttributes;
+  /** 应用到所有节点的基础属性（对齐 Ext TreeLoader#baseAttrs，已有属性优先） */
+  baseAttrs?: XmlAttrMap;
+}
+
+/** 由 XmlTreeLoader 产出的节点：在 TreeNodeData 基础上保留全部原始 XML 属性，供模板/详情读取 */
+export type XmlTreeNode = TreeNodeData & XmlAttrMap;
+
+export class XmlTreeLoader {
+  /** XML 元素节点（只读，对齐 Ext.XML_NODE_ELEMENT） */
+  static readonly XML_NODE_ELEMENT = 1;
+  /** XML 文本节点（只读，对齐 Ext.XML_NODE_TEXT） */
+  static readonly XML_NODE_TEXT = 3;
+
+  dataUrl?: string;
+  data?: string | Document;
+  processAttributes: XmlProcessAttributes;
+  baseAttrs?: XmlAttrMap;
+
+  constructor(config: XmlTreeLoaderConfig = {}) {
+    this.dataUrl = config.dataUrl;
+    this.data = config.data;
+    this.baseAttrs = config.baseAttrs;
+    this.processAttributes = config.processAttributes ?? (() => {});
+  }
+
+  /**
+   * 加载并解析为 TreeNodeData[]（等价于 Ext 的 load + processResponse）。
+   * 返回的数组可直接作为 TreePanel 的 `nodes`（或 root.children）使用。
+   */
+  async load(): Promise<XmlTreeNode[]> {
+    let doc: Document;
+    if (this.data) {
+      doc = typeof this.data === 'string' ? this.parseString(this.data) : this.data;
+    } else if (this.dataUrl) {
+      const res = await fetch(this.dataUrl);
+      if (!res.ok) throw new Error(`XmlTreeLoader: fetch ${this.dataUrl} failed (${res.status})`);
+      const text = await res.text();
+      doc = this.parseString(text);
+    } else {
+      throw new Error('XmlTreeLoader: 必须提供 data 或 dataUrl 之一');
+    }
+    const root = doc.documentElement || doc;
+    return this.parseXml(root);
+  }
+
+  // private：字符串 → Document
+  private parseString(xml: string): Document {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xml, 'application/xml');
+    const err = doc.querySelector('parsererror');
+    if (err) throw new Error('XmlTreeLoader: XML 解析失败 - ' + err.textContent);
+    return doc;
+  }
+
+  /**
+   * 递归解析 XML 元素（对齐 Ext.ux.tree.XmlTreeLoader#parseXml）。
+   * 返回该元素直接子节点对应的树节点数组；元素内的纯文本合并为 innerText 挂到父节点属性上。
+   */
+  private parseXml(node: Element | Document, parentPath = ''): XmlTreeNode[] {
+    const out: XmlTreeNode[] = [];
+    let index = 0;
+    const childNodes = node.childNodes;
+    for (let i = 0; i < childNodes.length; i++) {
+      const n = childNodes[i];
+      if (n.nodeType === XmlTreeLoader.XML_NODE_ELEMENT) {
+        const el = n as Element;
+        const treeNode = this.createNode(el, parentPath, index);
+        // 递归子元素（转 children）
+        const kids = this.parseXml(el, treeNode.id);
+        if (kids.length) treeNode.children = kids;
+        // 元素内的纯文本 → innerText（对齐 Ext 把文本节点值挂为 innerText）
+        const text = this.collectText(el);
+        if (text) (treeNode as XmlAttrMap).innerText = text;
+        out.push(treeNode);
+        index++;
+      }
+    }
+    return out;
+  }
+
+  // private：收集元素内直接文本节点的拼接值（trim）
+  private collectText(el: Element): string {
+    let buf = '';
+    const childNodes = el.childNodes;
+    for (let i = 0; i < childNodes.length; i++) {
+      const n = childNodes[i];
+      if (n.nodeType === XmlTreeLoader.XML_NODE_TEXT && n.nodeValue) {
+        buf += n.nodeValue;
+      }
+    }
+    return buf.trim();
+  }
+
+  /**
+   * 由 XML 元素创建树节点（对齐 Ext.ux.tree.XmlTreeLoader#createNode）：
+   *  1. 写入 tagName；
+   *  2. 拷贝全部 XML 属性；
+   *  3. 调用 processAttributes 允许调用方定制；
+   *  4. 合并 baseAttrs（已有属性不覆盖）；
+   *  5. 生成稳定 id 并转为 XmlTreeNode。
+   */
+  private createNode(el: Element, parentPath: string, index: number): XmlTreeNode {
+    const attr: XmlAttrMap = { tagName: el.tagName };
+    for (let i = 0; i < el.attributes.length; i++) {
+      const a = el.attributes[i];
+      attr[a.nodeName] = a.nodeValue;
+    }
+
+    this.processAttributes(attr);
+
+    if (this.baseAttrs) {
+      for (const k in this.baseAttrs) {
+        if (!(k in attr)) attr[k] = this.baseAttrs[k];
+      }
+    }
+
+    const baseId = attr.id ?? `${parentPath ? parentPath + '/' : ''}${el.tagName}-${index}`;
+    attr.id = baseId;
+
+    return this.toTreeNodeData(attr);
+  }
+
+  // private：属性映射 → XmlTreeNode（已知字段映射到 TreeNodeData，其余原样保留）
+  private toTreeNodeData(attr: XmlAttrMap): XmlTreeNode {
+    const node: XmlTreeNode = {
+      id: attr.id,
+      text: attr.text ?? '',
+    };
+    const known = ['id', 'text', 'tagName', 'innerText'];
+    if (attr.iconCls) node.iconCls = attr.iconCls;
+    if (attr.icon) node.icon = attr.icon;
+    if (attr.expanded) node.expanded = true;
+    if (attr.expandable) node.expandable = true;
+    if (attr.leaf) node.leaf = true;
+    if (attr.disabled) node.disabled = true;
+    if (attr.checked !== undefined) node.checked = !!attr.checked;
+    if (attr.cls) node.cls = attr.cls;
+    if (attr.innerText !== undefined) node.innerText = attr.innerText;
+    // 保留其它原始 XML 属性，供模板/详情面板读取（如 first/last/gender/published/url/title 等）
+    for (const k of Object.keys(attr)) {
+      if (!known.includes(k) && !(k in node)) (node as XmlAttrMap)[k] = attr[k];
+    }
+    return node;
+  }
+
+  /**
+   * 便捷方法：返回一个兼容 TreePanel `loader` 属性的异步加载器。
+   * 适用于「每次展开节点时按 id 拉取该节点的 XML 子节点」的场景：
+   * 配置 dataUrl 时，loader 会请求 `${dataUrl}?node=<id>`（与 Ext 行为一致，由服务端按 node 参数返回子 XML）。
+   */
+  makeLoader(): (node: TreeNodeData) => Promise<TreeNodeData[]> {
+    return async (node: TreeNodeData) => {
+      let doc: Document;
+      if (this.dataUrl) {
+        const sep = this.dataUrl.includes('?') ? '&' : '?';
+        const res = await fetch(`${this.dataUrl}${sep}node=${encodeURIComponent(node.id)}`);
+        if (!res.ok) throw new Error(`XmlTreeLoader: fetch ${this.dataUrl} failed (${res.status})`);
+        doc = this.parseString(await res.text());
+      } else if (this.data && typeof this.data === 'string') {
+        doc = this.parseString(this.data);
+      } else if (this.data) {
+        doc = this.data as Document;
+      } else {
+        throw new Error('XmlTreeLoader: makeLoader 需要 dataUrl 或 data');
+      }
+      const root = doc.documentElement || doc;
+      // 以命中 id 的子树作为该节点的子节点
+      const nodeEl = this.findElementById(root, node.id);
+      const target = nodeEl ?? root;
+      return this.parseXml(target, node.id);
+    };
+  }
+
+  private findElementById(root: Element | Document, id: string): Element | null {
+    const els = (root as Element).querySelectorAll?.('*') ?? [];
+    for (let i = 0; i < els.length; i++) {
+      const el = els[i] as Element;
+      if (el.getAttribute('id') === id) return el;
+    }
+    return null;
+  }
+}
+
+/** 便捷函数：直接把 XML 解析为 XmlTreeNode[]（不构造实例时使用） */
+export function parseXmlTree(
+  xml: string | Document,
+  processAttributes?: XmlProcessAttributes,
+  baseAttrs?: XmlAttrMap,
+): XmlTreeNode[] {
+  const loader = new XmlTreeLoader({ data: xml, processAttributes, baseAttrs });
+  const doc = typeof xml === 'string' ? loader['parseString'](xml) : xml;
+  const root = doc.documentElement || doc;
+  return loader['parseXml'](root);
+}