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

frameworks/EnhancedTabNav.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './EnhancedTabNav.css';
+
+const INITIAL = [
+  { id: 'u', title: '用户管理', dirty: false, desc: '用户列表与权限配置。' },
+  { id: 'r', title: '角色管理', dirty: true, desc: '角色权限分配（有未保存修改）。' },
+  { id: 'm', title: '菜单管理', dirty: false, desc: '导航菜单树形配置。' },
+  { id: 'p', title: '参数配置', dirty: true, desc: '系统参数键值对管理。' },
+  { id: 'l', title: '日志查询', dirty: false, desc: '操作日志检索与导出。' }
+];
+
+export default function EnhancedTabNav() {
+  const [tabs, setTabs] = useState(INITIAL);
+  const [activeId, setActiveId] = useState('u');
+  const [dragId, setDragId] = useState(null);
+  const [menu, setMenu] = useState(null);
+  const [menuId, setMenuId] = useState('');
+  const root = useRef(null);
+
+  useEffect(() => {
+    function onDoc(e) {
+      if (root.current && !root.current.contains(e.target)) setMenu(null);
+    }
+    document.addEventListener('click', onDoc);
+    return () => document.removeEventListener('click', onDoc);
+  }, []);
+
+  const activeTab = tabs.filter((t) => t.id === activeId)[0] || null;
+
+  const closeTab = (id) => {
+    setTabs((ts) => {
+      if (ts.length <= 1) return ts;
+      const idx = ts.findIndex((t) => t.id === id);
+      const next = ts.slice();
+      next.splice(idx, 1);
+      if (activeId === id) setActiveId(next[Math.max(0, idx - 1)].id);
+      return next;
+    });
+  };
+  const onTabContext = (e, id) => {
+    e.preventDefault();
+    setMenu({ x: e.clientX, y: e.clientY });
+    setMenuId(id);
+  };
+  const onBarContext = (e) => {
+    if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault();
+  };
+  const menuAct = (act) => {
+    if (act === 'close') closeTab(menuId);
+    else if (act === 'other') setTabs((ts) => ts.filter((t) => t.id === menuId));
+    else if (act === 'all') setTabs([]);
+    setActiveId(tabs.length ? menuId : '');
+    setMenu(null);
+  };
+  const onDrop = (e) => {
+    const el = e.target.closest('.aa-tabs-enh-tab');
+    const id = el && el.dataset.id;
+    if (!id || !dragId) return;
+    setTabs((ts) => {
+      const from = ts.findIndex((t) => t.id === dragId);
+      const to = ts.findIndex((t) => t.id === id);
+      if (from < 0 || to < 0 || from === to) return ts;
+      const next = ts.slice();
+      const moved = next.splice(from, 1)[0];
+      next.splice(to, 0, moved);
+      return next;
+    });
+  };
+
+  return (
+    <div className="aa-tabs-enh" ref={root}>
+      <div className="aa-tabs-enh-bar" onContextMenu={onBarContext} onDragOver={(e) => e.preventDefault()} onDrop={onDrop}>
+        {tabs.map((t) => (
+          <div
+            key={t.id}
+            className={'aa-tabs-enh-tab' + (t.id === activeId ? ' is-active' : '')}
+            draggable="true"
+            data-id={t.id}
+            onClick={() => setActiveId(t.id)}
+            onDragStart={() => setDragId(t.id)}
+            onContextMenu={(e) => onTabContext(e, t.id)}
+          >
+            {t.dirty && <span className="aa-dot" />}
+            <span className="aa-tabs-enh-text">{t.title}</span>
+            <span className="aa-tabs-enh-close" onClick={(e) => { e.stopPropagation(); closeTab(t.id); }}>×</span>
+          </div>
+        ))}
+      </div>
+      <div className="aa-tabs-enh-panel">{activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签'}</div>
+      {menu && (
+        <div className="aa-tabs-enh-menu" style={{ left: menu.x, top: menu.y }} onClick={(e) => e.stopPropagation()}>
+          <div onClick={() => menuAct('close')}>关闭</div>
+          <div onClick={() => menuAct('other')}>关闭其他</div>
+          <div onClick={() => menuAct('all')}>关闭全部</div>
+        </div>
+      )}
+      <p className="aa-tabs-enh-hint">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>
+    </div>
+  );
+}