Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/AnchorNav.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import './AnchorNav.css';
+
+/**
+ * Aurora Admin AnchorNav（React）
+ * 对齐 组件7.txt AnchorNav 规范：右侧目录、滚动高亮、层级嵌套、点击平滑滚动
+ *
+ * props:
+ *  - items  : [{ key, label, children? }]（key 对应页面元素 id）
+ *  - fixed
+ *  - offset : 滚动偏移（避开吸顶高度）
+ */
+export default function AnchorNav({ items = [], fixed = false, offset = 24 }) {
+  const allKeys = [];
+  (function collect(list) { list.forEach(i => { allKeys.push(i.key); if (i.children) collect(i.children); }); })(items);
+  const [active, setActive] = useState(items[0] ? items[0].key : '');
+
+  const go = (key) => {
+    const el = document.getElementById(key);
+    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - offset, behavior: 'smooth' });
+  };
+  useEffect(() => {
+    const onScroll = () => {
+      const pos = window.scrollY + 80;
+      let cur = allKeys[0];
+      for (const k of allKeys) {
+        const el = document.getElementById(k);
+        if (el && el.offsetTop <= pos) cur = k;
+      }
+      setActive(cur);
+    };
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <nav className={`aa-anchor${fixed ? ' fixed' : ''}`}>
+      {items.map(it => (
+        <div key={it.key}>
+          <button className={`aa-anchor-item${active === it.key ? ' is-active' : ''}`} onClick={() => go(it.key)}>{it.label}</button>
+          {it.children && (
+            <div className="aa-anchor-sub">
+              {it.children.map(c => (
+                <button key={c.key} className={`aa-anchor-item${active === c.key ? ' is-active' : ''}`} onClick={() => go(c.key)}>{c.label}</button>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+/*
+用法示例：
+import AnchorNav from './AnchorNav';
+const items = [{ key: 'intro', label: '简介' }, { key: 'guide', label: '指南', children: [{ key: 'layout', label: '布局' }] }];
+<AnchorNav items={items} fixed />
+*/