merchant-web/src/views/main-content.vue

<template>
  <main
    class="site-content"
    :class="{ 'site-content--tabs': $route.meta.isTab }"
  >
    <!-- 主入口标签页 s -->
    <el-tabs
      v-if="$route.meta.isTab"
      v-model="mainTabsActiveName"
      :closable="true"
      type="card"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle"
    >
      <el-dropdown class="site-tabs__tools" :show-timeout="0">
        <i class="el-icon-arrow-down el-icon--right"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="tabsCloseCurrentHandle"
            >关闭当前标签页</el-dropdown-item
          >
          <el-dropdown-item @click.native="tabsCloseOtherHandle"
            >关闭其它标签页</el-dropdown-item
          >
          <el-dropdown-item @click.native="tabsCloseAllHandle"
            >关闭全部标签页</el-dropdown-item
          >
          <el-dropdown-item @click.native="refresh()"
            >刷新当前标签页</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-tab-pane
        v-for="item in mainTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <div
          slot="label"
          class="inline-flex justify-center"
          @contextmenu.prevent="(event) => onContextmenu(event, item)"
          style="width: 100px"
        >
          <el-tooltip
            v-if="item.title.length > 6"
            effect="dark"
            :content="item.title"
            placement="top"
          >
            <span class="w-100 flex justify-center">{{
              item.title.length > 6
                ? `${item.title.slice(0, 6)}...`
                : item.title
            }}</span>
          </el-tooltip>
          <span v-else class="w-100 flex justify-center">{{
            item.title.length > 6 ? `${item.title.slice(0, 6)}...` : item.title
          }}</span>
        </div>
        <el-card :body-style="siteContentViewHeight" class="content-card">
          <transition name="fade-transform" mode="out-in">
            <iframe
              v-if="item.type === 'iframe'"
              :src="item.iframeUrl"
              width="100%"
              height="100%"
              frameborder="0"
              scrolling="yes"
            >
            </iframe>
            <micro-app
              v-else-if="item.type === 'microApp'"
              :name="item.name"
              :url="item.iframeUrl"
            >
            </micro-app>
            <keep-alive v-else>
              <router-view v-if="item.name === mainTabsActiveName" />
            </keep-alive>
          </transition>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 主入口标签页 e -->
    <el-card v-else :body-style="siteContentViewHeight" class="content-card">
      <keep-alive>
        <router-view />
      </keep-alive>
    </el-card>
  </main>
</template>

<script>
// ... script部分保持不变 ...
import { isURL } from "@/utils/validate";
export default {
  inject: ["refresh"],
  data() {
    return {};
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight;
      },
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      },
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      },
    },
    siteContentViewHeight() {
      var height = this.documentClientHeight - 50 - 2;
      if (this.$route.meta.isTab) {
        height -= 40;
        return isURL(this.$route.meta.iframeUrl)
          ? { height: height + "px" }
          : { minHeight: height + "px" };
      }
      return { minHeight: height + "px" };
    },
  },
  methods: {
    onContextmenu(event, item) {
      this.$contextmenu({
        items: [
          {
            label: "关闭当前标签页",
            icon:"el-icon-close",
            onClick: () => {
              this.removeTabHandle(item.name);
            },
          },
          {
            label: "关闭其他标签页",
            icon:"el-icon-folder-delete",
            onClick: () => {
              this.tabsCloseOtherHandle()
            },
          },
          {
            label: "关闭右侧标签页",
            icon:"el-icon-d-arrow-right",
            onClick: () => {
              this.mainTabs.splice(
                this.mainTabs.findIndex((el) => {
                  return el.name === item.name;
                }) + 1,
                this.mainTabs.length - 1
              );
              this.mainTabsActiveName = item.name;
            },
          },
          {
            label: "全部关闭标签页",
            icon:"el-icon-document-delete",
            onClick: () => {
              this.tabsCloseAllHandle();
            },
          },
        ],
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "custom-class",
        zIndex: 99999999999999,
        minWidth: 160,
      });
      return false;
    },
    // tabs, 选中tab
    selectedTabHandle(tab) {
      tab = this.mainTabs.filter((item) => item.name === tab.name);
      if (tab.length >= 1) {
        this.$router.push({
          name: tab[0].name,
          query: tab[0].query,
          params: tab[0].params,
        });
      }
    },
    // tabs, 删除tab
    removeTabHandle(tabName) {
      this.mainTabs = this.mainTabs.filter((item) => item.name !== tabName);
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          var tab = this.mainTabs[this.mainTabs.length - 1];
          this.$router.push(
            { name: tab.name, query: tab.query, params: tab.params },
            () => {
              this.mainTabsActiveName = this.$route.name;
            }
          );
        }
      } else {
        this.menuActiveName = "";
        this.$router.push({ name: "home" });
      }
    },
    // tabs, 关闭当前
    tabsCloseCurrentHandle() {
      this.removeTabHandle(this.mainTabsActiveName);
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle() {
      this.mainTabs = this.mainTabs.filter(
        (item) => item.name === this.mainTabsActiveName
      );
    },
    // tabs, 关闭全部
    tabsCloseAllHandle() {
      this.mainTabs = [];
      this.menuActiveName = "";
      this.$router.push({ name: "home" });
    },
    // tabs, 刷新当前
    tabsRefreshCurrentHandle() {
      var tab = this.$route;
      this.removeTabHandle(tab.name);
      this.$nextTick(() => {
        this.$router.push({
          name: tab.name,
          query: tab.query,
          params: tab.params,
        });
      });
    },
  },
};
</script>

<style lang="scss">
.site-content--tabs {
  padding: 48px 0 0;
}

// 优化 el-tabs 样式
.el-tabs--card {
  ::v-deep .el-tabs__header {
    border-bottom: 1px solid #e0e2e5;
    margin: 0;
    padding: 0 8px; // 增加左右内边距
    background-color: #ffffff;
  }

  ::v-deep .el-tabs__nav {
    border: none !important;
  }

  ::v-deep .el-tabs__item {
    height: 40px;
    line-height: 40px;
    color: #5f6368;
    background-color: transparent;
    border: none !important;
    border-radius: 4px 4px 0 0;
    transition: all 0.2s ease-in-out;
    margin: 0 4px; // 增加标签间距
    padding: 0 16px;

    .el-icon-close {
      visibility: hidden; // 默认隐藏关闭按钮
      width: 14px;
      height: 14px;
      font-size: 14px;
      border-radius: 50%;
      transition: all 0.2s;
      &:hover {
        background-color: #c0c4cc;
        color: #fff;
      }
    }

    &:hover {
      background-color: #f5f7fa;
      color: #409eff;
      .el-icon-close {
        visibility: visible; // 悬停时显示
      }
    }
  }

  ::v-deep .el-tabs__item.is-active {
    background-color: #f5f7fa !important; // 激活时增加背景色
    color: #409eff !important;
    position: relative;

    .el-icon-close {
      visibility: visible; // 激活时也显示
    }

    // 顶部指示器
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 2px;
      background-color: #409eff;
      border-radius: 0 0 2px 2px;
    }
  }
}

// 优化 el-card 样式
.content-card {
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px;
}

// 优化过渡动画
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>