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,109 @@
+<!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 · EnhancedTabNav</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./EnhancedTabNav.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">EnhancedTabNav 增强页签导航</h2>
+    <p class="aa-desc">浏览器标签式导航：可拖拽排序、右键菜单（关闭 / 关闭其他 / 关闭全部），未保存状态显示圆点。</p>
+
+    <div class="aa-demo">
+      <div class="aa-tabs-enh" id="tabs">
+        <div class="aa-tabs-enh-bar" id="bar"></div>
+        <div class="aa-tabs-enh-panel" id="panel"></div>
+      </div>
+      <p class="aa-tabs-enh-hint">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>
+    </div>
+  </div>
+
+  <script>
+    var tabs = [
+      { 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: '操作日志检索与导出。' }
+    ];
+    var activeId = 'u';
+    var bar = document.getElementById('bar');
+    var panel = document.getElementById('panel');
+    var menu = null;
+
+    function render() {
+      bar.innerHTML = tabs.map(function (t) {
+        return '<div class="aa-tabs-enh-tab' + (t.id === activeId ? ' is-active' : '') + '" role="tab" tabindex="0" draggable="true" data-id="' + t.id + '" data-idx="' + tabs.indexOf(t) + '">' +
+          (t.dirty ? '<span class="aa-dot"></span>' : '') +
+          '<span class="aa-tabs-enh-text">' + t.title + '</span>' +
+          '<span class="aa-tabs-enh-close" data-close="' + t.id + '">×</span></div>';
+      }).join('');
+      var cur = tabs.filter(function (t) { return t.id === activeId; })[0];
+      panel.textContent = cur ? cur.title + '：' + cur.desc : '请选择页签';
+    }
+
+    bar.addEventListener('click', function (e) {
+      var close = e.target.closest('[data-close]');
+      if (close) { e.stopPropagation(); closeTab(close.dataset.close); return; }
+      var tab = e.target.closest('.aa-tabs-enh-tab');
+      if (tab) activeId = tab.dataset.id;
+      render();
+    });
+    bar.addEventListener('contextmenu', function (e) {
+      var tab = e.target.closest('.aa-tabs-enh-tab');
+      if (!tab) return;
+      e.preventDefault();
+      showMenu(e.clientX, e.clientY, tab.dataset.id);
+    });
+    function closeTab(id) {
+      if (tabs.length <= 1) return;
+      var idx = tabs.findIndex(function (t) { return t.id === id; });
+      tabs.splice(idx, 1);
+      if (activeId === id) activeId = tabs[Math.max(0, idx - 1)].id;
+      render();
+    }
+    function showMenu(x, y, id) {
+      hideMenu();
+      menu = document.createElement('div');
+      menu.className = 'aa-tabs-enh-menu';
+      menu.innerHTML = '<div data-act="close">关闭</div><div data-act="other">关闭其他</div><div data-act="all">关闭全部</div>';
+      menu.style.left = x + 'px'; menu.style.top = y + 'px';
+      menu.addEventListener('click', function (e) {
+        var act = e.target.dataset.act;
+        if (act === 'close') closeTab(id);
+        else if (act === 'other') tabs = tabs.filter(function (t) { return t.id === id; });
+        else if (act === 'all') tabs = [];
+        activeId = tabs.length ? id : '';
+        render(); hideMenu();
+      });
+      document.body.appendChild(menu);
+    }
+    function hideMenu() { if (menu) { menu.remove(); menu = null; } }
+    document.addEventListener('click', function (e) { if (menu && !menu.contains(e.target)) hideMenu(); });
+
+    // 拖拽排序
+    var dragId = null;
+    bar.addEventListener('dragstart', function (e) {
+      var tab = e.target.closest('.aa-tabs-enh-tab');
+      if (tab) dragId = tab.dataset.id;
+    });
+    bar.addEventListener('dragover', function (e) { e.preventDefault(); });
+    bar.addEventListener('drop', function (e) {
+      e.preventDefault();
+      var tab = e.target.closest('.aa-tabs-enh-tab');
+      if (!tab || !dragId) return;
+      var from = tabs.findIndex(function (t) { return t.id === dragId; });
+      var to = tabs.findIndex(function (t) { return t.id === tab.dataset.id; });
+      if (from < 0 || to < 0 || from === to) return;
+      var moved = tabs.splice(from, 1)[0];
+      tabs.splice(to, 0, moved);
+      render();
+    });
+
+    render();
+  </script>
+</body>
+</html>