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

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -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>