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>
@@ -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>
+  );
+}
@@ -0,0 +1,89 @@
+<template>
+  <div class="aa-tabs-enh" v-click-outside="hideMenu">
+    <div class="aa-tabs-enh-bar" @contextmenu="onBarContext" @dragover.prevent @drop="onDrop">
+      <div
+        v-for="t in tabs"
+        :key="t.id"
+        class="aa-tabs-enh-tab"
+        :class="{ 'is-active': t.id === activeId }"
+        draggable="true"
+        :data-id="t.id"
+        @click="activeId = t.id"
+        @dragstart="dragId = t.id"
+        @contextmenu="onTabContext($event, t.id)"
+      >
+        <span v-if="t.dirty" class="aa-dot"></span>
+        <span class="aa-tabs-enh-text">{{ t.title }}</span>
+        <span class="aa-tabs-enh-close" @click.stop="closeTab(t.id)">×</span>
+      </div>
+    </div>
+    <div class="aa-tabs-enh-panel">{{ activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签' }}</div>
+    <div v-if="menu" class="aa-tabs-enh-menu" :style="{ left: menu.x + 'px', top: menu.y + 'px' }" @click.stop>
+      <div @click="menuAct('close')">关闭</div>
+      <div @click="menuAct('other')">关闭其他</div>
+      <div @click="menuAct('all')">关闭全部</div>
+    </div>
+    <p class="aa-tabs-enh-hint">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaEnhancedTabNav',
+  directives: {
+    clickOutside: {
+      bind(el, binding) { el.__doc = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener('click', el.__doc); },
+      unbind(el) { document.removeEventListener('click', el.__doc); }
+    }
+  },
+  data() {
+    return {
+      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: '操作日志检索与导出。' }
+      ],
+      activeId: 'u',
+      dragId: null,
+      menu: null,
+      menuId: ''
+    };
+  },
+  computed: {
+    activeTab() {
+      return this.tabs.filter((t) => t.id === this.activeId)[0] || null;
+    }
+  },
+  methods: {
+    closeTab(id) {
+      if (this.tabs.length <= 1) return;
+      const idx = this.tabs.findIndex((t) => t.id === id);
+      this.tabs.splice(idx, 1);
+      if (this.activeId === id) this.activeId = this.tabs[Math.max(0, idx - 1)].id;
+    },
+    onTabContext(e, id) { e.preventDefault(); this.menu = { x: e.clientX, y: e.clientY }; this.menuId = id; },
+    onBarContext(e) { if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault(); },
+    menuAct(act) {
+      if (act === 'close') this.closeTab(this.menuId);
+      else if (act === 'other') this.tabs = this.tabs.filter((t) => t.id === this.menuId);
+      else if (act === 'all') this.tabs = [];
+      this.activeId = this.tabs.length ? this.menuId : '';
+      this.hideMenu();
+    },
+    hideMenu() { this.menu = null; },
+    onDrop(e) {
+      const id = e.target.closest('.aa-tabs-enh-tab') && e.target.closest('.aa-tabs-enh-tab').dataset.id;
+      if (!id || !this.dragId) return;
+      const from = this.tabs.findIndex((t) => t.id === this.dragId);
+      const to = this.tabs.findIndex((t) => t.id === id);
+      if (from < 0 || to < 0 || from === to) return;
+      const moved = this.tabs.splice(from, 1)[0];
+      this.tabs.splice(to, 0, moved);
+    }
+  }
+};
+</script>
+
+<style src="./EnhancedTabNav.css"></style>
@@ -0,0 +1,78 @@
+<template>
+  <div class="aa-tabs-enh" ref="root">
+    <div class="aa-tabs-enh-bar" @contextmenu="onBarContext" @dragover.prevent @drop="onDrop">
+      <div
+        v-for="t in tabs"
+        :key="t.id"
+        class="aa-tabs-enh-tab"
+        :class="{ 'is-active': t.id === activeId }"
+        draggable="true"
+        :data-id="t.id"
+        @click="activeId = t.id"
+        @dragstart="dragId = t.id"
+        @contextmenu="onTabContext($event, t.id)"
+      >
+        <span v-if="t.dirty" class="aa-dot"></span>
+        <span class="aa-tabs-enh-text">{{ t.title }}</span>
+        <span class="aa-tabs-enh-close" @click.stop="closeTab(t.id)">×</span>
+      </div>
+    </div>
+    <div class="aa-tabs-enh-panel">{{ activeTab ? activeTab.title + '：' + activeTab.desc : '请选择页签' }}</div>
+    <div v-if="menu" class="aa-tabs-enh-menu" :style="{ left: menu.x + 'px', top: menu.y + 'px' }">
+      <div @click="menuAct('close')">关闭</div>
+      <div @click="menuAct('other')">关闭其他</div>
+      <div @click="menuAct('all')">关闭全部</div>
+    </div>
+    <p class="aa-tabs-enh-hint">拖拽标签可排序；右键标签打开菜单；带 ● 表示未保存。</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const tabs = ref([
+  { 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: '操作日志检索与导出。' }
+]);
+const activeId = ref('u');
+const dragId = ref(null);
+const menu = ref(null);
+const menuId = ref('');
+const root = ref(null);
+
+const activeTab = computed(() => tabs.value.filter((t) => t.id === activeId.value)[0] || null);
+
+function closeTab(id) {
+  if (tabs.value.length <= 1) return;
+  const idx = tabs.value.findIndex((t) => t.id === id);
+  tabs.value.splice(idx, 1);
+  if (activeId.value === id) activeId.value = tabs.value[Math.max(0, idx - 1)].id;
+}
+function onTabContext(e, id) { e.preventDefault(); menu.value = { x: e.clientX, y: e.clientY }; menuId.value = id; }
+function onBarContext(e) { if (e.target.closest('.aa-tabs-enh-tab')) e.preventDefault(); }
+function menuAct(act) {
+  if (act === 'close') closeTab(menuId.value);
+  else if (act === 'other') tabs.value = tabs.value.filter((t) => t.id === menuId.value);
+  else if (act === 'all') tabs.value = [];
+  activeId.value = tabs.value.length ? menuId.value : '';
+  menu.value = null;
+}
+function onDrop(e) {
+  const el = e.target.closest('.aa-tabs-enh-tab');
+  const id = el && el.dataset.id;
+  if (!id || !dragId.value) return;
+  const from = tabs.value.findIndex((t) => t.id === dragId.value);
+  const to = tabs.value.findIndex((t) => t.id === id);
+  if (from < 0 || to < 0 || from === to) return;
+  const moved = tabs.value.splice(from, 1)[0];
+  tabs.value.splice(to, 0, moved);
+}
+function onDoc(e) { if (root.value && !root.value.contains(e.target)) menu.value = null; }
+onMounted(() => document.addEventListener('click', onDoc));
+onBeforeUnmount(() => document.removeEventListener('click', onDoc));
+</script>
+
+<style src="./EnhancedTabNav.css"></style>