💥 破坏性更新咱不推荐更新

2024-03-25 06:55:06 +08:00
parent 9bb0fbd9a6
commit 410dc1ac58
52 changed files with 3645 additions and 1337 deletions
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { RefreshCcw,XCircle,ArrowRightLeft,ArrowLeftFromLine,ArrowRightFromLine } from 'lucide-vue-next';
+import {useTabStore} from "~/stores/admin/tab";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  currentPath: {
+    type: String,
+    default: '',
+  },
+  x: {
+    type: Number,
+    default: 0,
+  },
+  y: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['update:show'])
+
+const tabStore = useTabStore()
+
+const options = computed(() => [
+  {
+    label: '重新加载',
+    key: 'reload',
+    disabled: props.currentPath !== tabStore.activeTab,
+    icon: () => h(RefreshCcw),
+  },
+  {
+    label: '关闭',
+    key: 'close',
+    disabled: tabStore.tabs.length <= 1,
+    icon: () => h(XCircle),
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    disabled: tabStore.tabs.length <= 1,
+    icon: () => h(ArrowRightLeft),
+  },
+  {
+    label: '关闭左侧',
+    key: 'close-left',
+    disabled: tabStore.tabs.length <= 1 || props.currentPath === tabStore.tabs[0].path,
+    icon: () => h(ArrowLeftFromLine),
+  },
+  {
+    label: '关闭右侧',
+    key: 'close-right',
+    disabled:
+        tabStore.tabs.length <= 1 ||
+        props.currentPath === tabStore.tabs[tabStore.tabs.length - 1].path,
+    icon: () => h(ArrowRightFromLine),
+  },
+])
+
+const route = useRoute()
+const actionMap = new Map([
+  [
+    'reload',
+    () => {
+      tabStore.reloadTab(route.fullPath)
+    },
+  ],
+  [
+    'close',
+    () => {
+      tabStore.removeTab(props.currentPath)
+    },
+  ],
+  [
+    'close-other',
+    () => {
+      tabStore.removeOther(props.currentPath)
+    },
+  ],
+  [
+    'close-left',
+    () => {
+      tabStore.removeLeft(props.currentPath)
+    },
+  ],
+  [
+    'close-right',
+    () => {
+      tabStore.removeRight(props.currentPath)
+    },
+  ],
+])
+
+function handleHideDropdown() {
+  emit('update:show', false)
+}
+
+function handleSelect(key:any) {
+  const actionFn = actionMap.get(key)
+  actionFn && actionFn()
+  handleHideDropdown()
+}
+</script>
+
+<template>
+  <n-dropdown
+      :show="show"
+      :options="options"
+      :x="x"
+      :y="y"
+      placement="bottom-start"
+      @clickoutside="handleHideDropdown"
+      @select="handleSelect"
+  />
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import ContextMenu from './ContextMenu.vue'
+import {useTabStore} from "~/stores/admin/tab";
+
+
+const router = useRouter()
+// const appStore = useAppStore()
+const tabStore = useTabStore()
+
+const contextMenuOption = reactive({
+  show: false,
+  x: 0,
+  y: 0,
+  currentPath: '',
+})
+
+const handleItemClick = (path:any) => {
+  tabStore.setActiveTab(path)
+  router.push(path)
+}
+
+function showContextMenu() {
+  contextMenuOption.show = true
+}
+function hideContextMenu() {
+  contextMenuOption.show = false
+}
+function setContextMenu(x:any, y:any, currentPath:any) {
+  Object.assign(contextMenuOption, { x, y, currentPath })
+}
+
+// 右击菜单
+async function handleContextMenu(e:any, tagItem:any) {
+  const { clientX, clientY } = e
+  hideContextMenu()
+  setContextMenu(clientX, clientY, tagItem.path)
+  await nextTick()
+  showContextMenu()
+}
+
+</script>
+
+<template>
+  <div>
+    <n-tabs
+        :value="tabStore.activeTab"
+        :closable="tabStore.tabs.length > 1"
+        :style="`--selected-bg: ${appStore.isDark ? '#1b2429' : '#eaf0f1'}`"
+        type="card"
+        @close="(path) => tabStore.removeTab(path)"
+    >
+      <n-tab
+          v-for="item in tabStore.tabs"
+          :key="item.path"
+          :name="item.path"
+          @click="handleItemClick(item.path)"
+          @contextmenu.prevent="handleContextMenu($event, item)"
+      >
+        {{ item.title }}
+      </n-tab>
+    </n-tabs>
+
+    <ContextMenu
+        v-if="contextMenuOption.show"
+        v-model:show="contextMenuOption.show"
+        :current-path="contextMenuOption.currentPath"
+        :x="contextMenuOption.x"
+        :y="contextMenuOption.y"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.n-tabs) {
+  .n-tabs-tab {
+    padding-left: 16px;
+    height: 36px;
+    background: transparent !important;
+    border-radius: 4px !important;
+    margin-right: 4px;
+    &:hover {
+      border: 1px solid var(--primary-color) !important;
+    }
+  }
+  .n-tabs-tab--active {
+    border: 1px solid var(--primary-color) !important;
+    background-color: var(--selected-bg) !important;
+  }
+  .n-tabs-pad,
+  .n-tabs-tab-pad,
+  .n-tabs-scroll-padding {
+    border: none !important;
+  }
+}
+</style>