hrp-ui-base 1.4.7 → 1.4.8

package/src/components/layout/SysHeaderTabs.vue

@@ -1,289 +1,289 @@
-<template>
-  <div class="top-tabs-header" @wheel="handleWheel">
-    <el-scrollbar ref="scrollbar" class="scroll-container">
-      <div ref="container" class="scrollbar-flex-content">
-        <div
-          v-for="item in tabs"
-          :key="item.path"
-          :ref="(el) => setTabRef(item.path, el)"
-          :class="{ active: activeTab === item.path }"
-          class="tags-view-item"
-        >
-          <span
-            class="tags-view-item-link"
-            @click="handleTabClick(item)"
-            @contextmenu.prevent="openMenu(item, $event)"
-          >
-            {{ item.name || item.title }}
-          </span>
-          <el-icon v-if="item.path !== homeUrl" @click="handleTabClose(item)">
-            <Close />
-          </el-icon>
-        </div>
-      </div>
-    </el-scrollbar>
-    <ul
-      v-show="visible"
-      :style="{ left: coord.left + 'px', top: coord.top + 'px' }"
-      class="contextmenu"
-    >
-      <li
-        v-if="selectedTag?.path !== homeUrl"
-        @click="handleTabClose(selectedTag!)"
-      >
-        关闭当前
-      </li>
-      <li @click="handleCloseOthers">关闭其他</li>
-      <li v-if="!isFirstView()" @click="handleCloseLeft">关闭左侧</li>
-      <li v-if="!isLastView()" @click="handleCloseRight">关闭右侧</li>
-      <li @click="handleCloseAll">全部关闭</li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch, nextTick, PropType } from "vue";
-import { ElScrollbar } from "element-plus";
-import type { TabItem } from "./types";
-
-const props = defineProps({
-  tabs: {
-    type: Array as PropType<TabItem[]>,
-    default: () => []
-  },
-  activeTab: {
-    type: String,
-    default: ''
-  },
-  homeUrl: {
-    type: String,
-    default: '/application-entry'
-  }
-});
-
-const emit = defineEmits<{
-  (e: 'tab-click', tab: TabItem): void
-  (e: 'tab-close', tab: TabItem): void
-  (e: 'tab-close-other', tab: TabItem): void
-  (e: 'tab-close-all'): void
-  (e: 'tab-close-left', tab: TabItem): void
-  (e: 'tab-close-right', tab: TabItem): void
-}>();
-
-const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
-const container = ref<HTMLElement>();
-const tabRefs = ref<Record<string, HTMLElement | null>>({});
-
-/** 右键菜单状态 */
-const visible = ref(false);
-const coord = ref({ left: 0, top: 0 });
-const selectedTag = ref<TabItem>();
-
-/** 设置标签引用 */
-function setTabRef(path: string, el: any) {
-  tabRefs.value["tag" + path] = el;
-}
-
-/** 点击标签 */
-function handleTabClick(tab: TabItem) {
-  emit('tab-click', tab);
-}
-
-/** 关闭标签 */
-function handleTabClose(tab: TabItem) {
-  if (tab.path === props.homeUrl) return;
-  emit('tab-close', tab);
-}
-
-/** 打开右键菜单 */
-function openMenu(tag: TabItem, e: MouseEvent) {
-  coord.value.left = e.clientX;
-  coord.value.top = e.clientY;
-  visible.value = true;
-  selectedTag.value = tag;
-}
-
-/** 关闭右键菜单 */
-function closeMenu() {
-  visible.value = false;
-}
-
-/** 关闭其他标签 */
-function handleCloseOthers() {
-  if (selectedTag.value) {
-    emit('tab-close-other', selectedTag.value);
-  }
-}
-
-/** 关闭全部标签 */
-function handleCloseAll() {
-  emit('tab-close-all');
-}
-
-/** 关闭左侧标签 */
-function handleCloseLeft() {
-  if (selectedTag.value) {
-    emit('tab-close-left', selectedTag.value);
-  }
-}
-
-/** 关闭右侧标签 */
-function handleCloseRight() {
-  if (selectedTag.value) {
-    emit('tab-close-right', selectedTag.value);
-  }
-}
-
-/** 是否是第一个标签 */
-function isFirstView(): boolean {
-  if (!selectedTag.value || props.tabs.length === 0) return true;
-  return selectedTag.value.path === props.tabs[0]?.path;
-}
-
-/** 是否是最后一个标签 */
-function isLastView(): boolean {
-  if (!selectedTag.value || props.tabs.length === 0) return true;
-  return selectedTag.value.path === props.tabs[props.tabs.length - 1]?.path;
-}
-
-/** 滚动到当前标签 */
-function scrollToActiveTab() {
-  nextTick(() => {
-    const activeTabRef = tabRefs.value["tag" + props.activeTab];
-    if (activeTabRef && scrollbar.value) {
-      const containerWidth = container.value?.offsetWidth || 0;
-      const tabLeft = activeTabRef.offsetLeft;
-      const tabWidth = activeTabRef.offsetWidth;
-      if (tabLeft + tabWidth > containerWidth) {
-        scrollbar.value.setScrollLeft(tabLeft - containerWidth + tabWidth + 20);
-      }
-    }
-  });
-}
-
-/** 处理鼠标滚轮事件 */
-function handleWheel(event: WheelEvent) {
-  event.preventDefault();
-  if (scrollbar.value) {
-    const wrapRef = scrollbar.value.wrapRef;
-    if (wrapRef) {
-      wrapRef.scrollLeft += event.deltaY;
-    }
-  }
-}
-
-/** 监听右键菜单显示状态 */
-watch(visible, (value) => {
-  if (value) {
-    document.body.addEventListener("click", closeMenu);
-  } else {
-    document.body.removeEventListener("click", closeMenu);
-  }
-});
-
-/** 监听 activeTab 变化滚动到对应位置 */
-watch(() => props.activeTab, () => {
-  scrollToActiveTab();
-});
-
-/** 暴露方法 */
-defineExpose({ scrollToActiveTab });
-</script>
-
-<style lang="scss" scoped>
-.top-tabs-header {
-  height: 32px;
-  position: relative;
-  overflow: visible;
-  box-sizing: border-box;
-  background: var(--custom-theme-fill-1);
-
-  :deep(.el-scrollbar) {
-    height: 32px;
-    overflow: visible;
-
-    .el-scrollbar__wrap {
-      overflow-x: scroll;
-      overflow-y: hidden;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar { display: none; }
-    }
-
-    .el-scrollbar__bar.is-horizontal {
-      height: 6px;
-      bottom: -6px;
-      left: 0;
-      right: 0;
-      border-radius: 3px;
-      background-color: var(--custom-theme-fill-4);
-      .el-scrollbar__thumb {
-        background-color: var(--custom-theme-text-4);
-        border-radius: 3px;
-        &:hover { background-color: var(--custom-theme-text-3); }
-      }
-    }
-
-    .el-scrollbar__bar.is-vertical { display: none; }
-  }
-
-  .scrollbar-flex-content {
-    display: flex;
-    background: var(--custom-theme-fill-7);
-    height: 32px;
-    padding-top: 2px;
-  }
-
-  .tags-view-item {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    height: 30px;
-    line-height: 30px;
-    border-right: 1px solid var(--custom-theme-border-3);
-    border-bottom: 1px solid var(--custom-theme-border-3);
-    color: var(--custom-theme-text-2);
-    background: var(--custom-theme-fill-7);
-    font-size: var(--el-menu-item-font-size);
-    padding: 0 10px;
-
-    .tags-view-item-link {
-      display: inline-block;
-      padding: 0 8px;
-    }
-  }
-
-  .tags-view-item.active {
-    background: var(--custom-main-bg-fill);
-    color: var(--custom-theme-normal-normal);
-    border-bottom: none;
-  }
-
-  .contextmenu {
-    margin: 0;
-    background: var(--custom-theme-fill-7);
-    z-index: 3000;
-    position: fixed;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--custom-theme-text-1);
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--custom-theme-border-3);
-
-    li {
-      margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;
-      &:hover {
-        background: var(--custom-theme-fill-4);
-        color: var(--custom-theme-normal-normal);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="top-tabs-header" @wheel="handleWheel">
+    <el-scrollbar ref="scrollbar" class="scroll-container">
+      <div ref="container" class="scrollbar-flex-content">
+        <div
+          v-for="item in tabs"
+          :key="item.path"
+          :ref="(el) => setTabRef(item.path, el)"
+          :class="{ active: activeTab === item.path }"
+          class="tags-view-item"
+        >
+          <span
+            class="tags-view-item-link"
+            @click="handleTabClick(item)"
+            @contextmenu.prevent="openMenu(item, $event)"
+          >
+            {{ item.name || item.title }}
+          </span>
+          <el-icon v-if="item.path !== homeUrl" @click="handleTabClose(item)">
+            <Close />
+          </el-icon>
+        </div>
+      </div>
+    </el-scrollbar>
+    <ul
+      v-show="visible"
+      :style="{ left: coord.left + 'px', top: coord.top + 'px' }"
+      class="contextmenu"
+    >
+      <li
+        v-if="selectedTag?.path !== homeUrl"
+        @click="handleTabClose(selectedTag!)"
+      >
+        关闭当前
+      </li>
+      <li @click="handleCloseOthers">关闭其他</li>
+      <li v-if="!isFirstView()" @click="handleCloseLeft">关闭左侧</li>
+      <li v-if="!isLastView()" @click="handleCloseRight">关闭右侧</li>
+      <li @click="handleCloseAll">全部关闭</li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch, nextTick, PropType } from "vue";
+import { ElScrollbar } from "element-plus";
+import type { TabItem } from "./types";
+
+const props = defineProps({
+  tabs: {
+    type: Array as PropType<TabItem[]>,
+    default: () => []
+  },
+  activeTab: {
+    type: String,
+    default: ''
+  },
+  homeUrl: {
+    type: String,
+    default: '/application-entry'
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'tab-click', tab: TabItem): void
+  (e: 'tab-close', tab: TabItem): void
+  (e: 'tab-close-other', tab: TabItem): void
+  (e: 'tab-close-all'): void
+  (e: 'tab-close-left', tab: TabItem): void
+  (e: 'tab-close-right', tab: TabItem): void
+}>();
+
+const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
+const container = ref<HTMLElement>();
+const tabRefs = ref<Record<string, HTMLElement | null>>({});
+
+/** 右键菜单状态 */
+const visible = ref(false);
+const coord = ref({ left: 0, top: 0 });
+const selectedTag = ref<TabItem>();
+
+/** 设置标签引用 */
+function setTabRef(path: string, el: any) {
+  tabRefs.value["tag" + path] = el;
+}
+
+/** 点击标签 */
+function handleTabClick(tab: TabItem) {
+  emit('tab-click', tab);
+}
+
+/** 关闭标签 */
+function handleTabClose(tab: TabItem) {
+  if (tab.path === props.homeUrl) return;
+  emit('tab-close', tab);
+}
+
+/** 打开右键菜单 */
+function openMenu(tag: TabItem, e: MouseEvent) {
+  coord.value.left = e.clientX;
+  coord.value.top = e.clientY;
+  visible.value = true;
+  selectedTag.value = tag;
+}
+
+/** 关闭右键菜单 */
+function closeMenu() {
+  visible.value = false;
+}
+
+/** 关闭其他标签 */
+function handleCloseOthers() {
+  if (selectedTag.value) {
+    emit('tab-close-other', selectedTag.value);
+  }
+}
+
+/** 关闭全部标签 */
+function handleCloseAll() {
+  emit('tab-close-all');
+}
+
+/** 关闭左侧标签 */
+function handleCloseLeft() {
+  if (selectedTag.value) {
+    emit('tab-close-left', selectedTag.value);
+  }
+}
+
+/** 关闭右侧标签 */
+function handleCloseRight() {
+  if (selectedTag.value) {
+    emit('tab-close-right', selectedTag.value);
+  }
+}
+
+/** 是否是第一个标签 */
+function isFirstView(): boolean {
+  if (!selectedTag.value || props.tabs.length === 0) return true;
+  return selectedTag.value.path === props.tabs[0]?.path;
+}
+
+/** 是否是最后一个标签 */
+function isLastView(): boolean {
+  if (!selectedTag.value || props.tabs.length === 0) return true;
+  return selectedTag.value.path === props.tabs[props.tabs.length - 1]?.path;
+}
+
+/** 滚动到当前标签 */
+function scrollToActiveTab() {
+  nextTick(() => {
+    const activeTabRef = tabRefs.value["tag" + props.activeTab];
+    if (activeTabRef && scrollbar.value) {
+      const containerWidth = container.value?.offsetWidth || 0;
+      const tabLeft = activeTabRef.offsetLeft;
+      const tabWidth = activeTabRef.offsetWidth;
+      if (tabLeft + tabWidth > containerWidth) {
+        scrollbar.value.setScrollLeft(tabLeft - containerWidth + tabWidth + 20);
+      }
+    }
+  });
+}
+
+/** 处理鼠标滚轮事件 */
+function handleWheel(event: WheelEvent) {
+  event.preventDefault();
+  if (scrollbar.value) {
+    const wrapRef = scrollbar.value.wrapRef;
+    if (wrapRef) {
+      wrapRef.scrollLeft += event.deltaY;
+    }
+  }
+}
+
+/** 监听右键菜单显示状态 */
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener("click", closeMenu);
+  } else {
+    document.body.removeEventListener("click", closeMenu);
+  }
+});
+
+/** 监听 activeTab 变化滚动到对应位置 */
+watch(() => props.activeTab, () => {
+  scrollToActiveTab();
+});
+
+/** 暴露方法 */
+defineExpose({ scrollToActiveTab });
+</script>
+
+<style lang="scss" scoped>
+.top-tabs-header {
+  height: 32px;
+  position: relative;
+  overflow: visible;
+  box-sizing: border-box;
+  background: var(--custom-theme-fill-1);
+
+  :deep(.el-scrollbar) {
+    height: 32px;
+    overflow: visible;
+
+    .el-scrollbar__wrap {
+      overflow-x: scroll;
+      overflow-y: hidden;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar { display: none; }
+    }
+
+    .el-scrollbar__bar.is-horizontal {
+      height: 6px;
+      bottom: -6px;
+      left: 0;
+      right: 0;
+      border-radius: 3px;
+      background-color: var(--custom-theme-fill-4);
+      .el-scrollbar__thumb {
+        background-color: var(--custom-theme-text-4);
+        border-radius: 3px;
+        &:hover { background-color: var(--custom-theme-text-3); }
+      }
+    }
+
+    .el-scrollbar__bar.is-vertical { display: none; }
+  }
+
+  .scrollbar-flex-content {
+    display: flex;
+    background: var(--custom-theme-fill-7);
+    height: 32px;
+    padding-top: 2px;
+  }
+
+  .tags-view-item {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    height: 30px;
+    line-height: 30px;
+    border-right: 1px solid var(--custom-theme-border-3);
+    border-bottom: 1px solid var(--custom-theme-border-3);
+    color: var(--custom-theme-text-2);
+    background: var(--custom-theme-fill-7);
+    font-size: var(--el-menu-item-font-size);
+    padding: 0 10px;
+
+    .tags-view-item-link {
+      display: inline-block;
+      padding: 0 8px;
+    }
+  }
+
+  .tags-view-item.active {
+    background: var(--custom-main-bg-fill);
+    color: var(--custom-theme-normal-normal);
+    border-bottom: none;
+  }
+
+  .contextmenu {
+    margin: 0;
+    background: var(--custom-theme-fill-7);
+    z-index: 3000;
+    position: fixed;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--custom-theme-text-1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--custom-theme-border-3);
+
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+      &:hover {
+        background: var(--custom-theme-fill-4);
+        color: var(--custom-theme-normal-normal);
+      }
+    }
+  }
+}
+</style>