CN-818：Administration开发之tab组件封装

src/assets/css/components/components/common/chart-tab.scss

@@ -0,0 +1,61 @@
+.chart-tabs {
+  position: relative;
+
+  .chart-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
+  }
+  .el-tabs.el-tabs--border-card {
+    position: absolute;
+    top: 3px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+
+    &>.el-tabs__header {
+      background-color: white;
+      border-color: #E2E5EC;
+
+      .el-tabs__nav-wrap {
+        padding-left: 27px;
+      }
+      .el-tabs__item:first-child {
+        margin-left: 0;
+      }
+    }
+    .el-tabs__content {
+      display: none;
+    }
+  }
+
+  .el-tabs__item.is-top {
+    height: 35px;
+    line-height: 35px;
+
+    .chart-tabs__label {
+      color: #353636;
+      font-size: 14px;
+      font-weight: bold;
+      box-sizing: border-box;
+
+      i {
+        padding-right: 7px;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+    &.is-active {
+      .chart-tabs__label {
+        color: #353636;
+
+        i {
+          color: #046EC9;
+        }
+      }
+    }
+  }
+}

src/assets/css/components/index.scss

@@ -73,6 +73,7 @@
 @import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
 @import './components/common/chart-error';
+@import './components/common/chart-tab';
 
 @import 'views/administration/AdministrationTabs';
 

src/components/common/ChartTabs.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="chart-tabs">
+    <div class="chart-tabs__active-bar" :style="{'background-color': color}"></div>
+    <el-tabs v-model="currentTab" ref="elTabs" type="border-card" @tab-click="handleClick">
+      <el-tab-pane
+          v-for="(tab,index) in tabsData"
+          :key="tab.i18n"
+          :name="index"
+          :disabled="tab.disable">
+        <template #label>
+          <div class="chart-tabs__label">
+            <i :class="tab.icon"></i>
+            <span>{{ $t(tab.i18n) }}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<!--  start----------------调用方式----------------start  -->
+<!--
+   组件名：<chart-tabs></chart-tabs>
+   目前有两种形式，分别是default、router
+   默认default，非路由切换：<chart-tabs :data="tabsData" />
+   路由模式router，点击tab路由切换：<chart-tabs :data="tabsData" router />
+   数据格式：
+   tabsData: [
+      {
+        i18n: 'entities.securityEvents',
+        path: '/detection/securityEvent',
+        icon: 'cn-icon cn-icon-a-SecurityEvent'
+      }
+  ]
+  需要禁用，则对应对象里添加 disable: true
+ -->
+<!--
+  active颜色：<chart-tabs :data="tabsData" color="red" />
+-->
+<!--
+  接收回调：@click
+-->
+<!--  end----------------调用方式----------------end  -->
+<script>
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export default {
+  name: 'ChartTabs',
+  props: {
+    data: {
+      type: Array
+    },
+    router: {
+      type: String,
+      default: 'noRouter'
+    },
+    color: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      leftOffset: 27,
+      // currentTab: '',
+      // tabsData: '',
+      routerList: []
+    }
+  },
+  setup (props) {
+    const tabsData = ref([])
+    const router = useRouter()
+    const routerPath = router.currentRoute.value.path
+    const tabList = window.currentChartTabList
+    let currentTab = 0
+
+    if (props.data) {
+      tabsData.value = [...props.data]
+      tabsData.value.forEach(item => {
+        if (!item.disable) {
+          item.disable = false
+        }
+      })
+
+      // 非路由跳转，获取tabIndex定位
+      // 路由跳转，根据路由名对比传入数据，获取index从而定位
+      // 路由模式为了切换有过渡，需要设置上次tab和当前tab
+      if (props.router === 'noRouter') {
+        const { query } = useRoute()
+        const tabIndexParam = query.tabIndex
+        currentTab = ref(tabIndexParam ? parseInt(tabIndexParam) : 0)
+      } else if (!tabList) {
+        currentTab = tabsData.value.findIndex(item => {
+          return item.path === routerPath
+        })
+      } else {
+        currentTab = tabList[1] ? parseFloat(tabList[1]) : parseFloat(tabList[0])
+      }
+    }
+
+    return {
+      currentTab,
+      tabsData
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      // 添加禁用小手
+      this.tabsData.forEach((item, index) => {
+        if (item.disable) {
+          const tabEle = document.getElementById('tab-' + index)
+          if (tabEle) {
+            tabEle.style.cssText = 'cursor: not-allowed;'
+          }
+        }
+      })
+
+      if (window.currentChartTabList) {
+        window.currentChartTabList.forEach((item) => {
+          this.$nextTick(() => {
+            this.handleActiveBar(parseFloat(item))
+          })
+        })
+      } else {
+        this.$nextTick(() => {
+          this.handleActiveBar(this.currentTab)
+        })
+      }
+    })
+  },
+  watch: {
+    currentTab (n) {
+      if (this.router === 'noRouter') {
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          tabIndex: n
+        })
+        overwriteUrl(newUrl)
+      }
+
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+      })
+    }
+  },
+  methods: {
+    handleActiveBar (index) {
+      const tabDom = document.getElementById('tab-' + index)
+      if (tabDom) {
+        const offsetLeft = tabDom.offsetLeft
+        const clientWidth = tabDom.clientWidth
+        const clientLeft = tabDom.clientLeft
+        const activeBar = document.querySelector('.chart-tabs .chart-tabs__active-bar')
+        activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+      }
+    },
+    handleClick (item) {
+      if (window.currentChartTabList) {
+        window.currentChartTabList.push(item.index)
+        if (window.currentChartTabList.length > 2) {
+          window.currentChartTabList.splice(0, 1)
+        }
+      } else {
+        window.currentChartTabList = [item.index]
+      }
+
+      this.$emit('click', item)
+
+      const query = { t: +new Date() }
+      if (this.router === 'noRouter') {
+        query.tabIndex = this.currentTab
+      }
+
+      this.$router.push({
+        path: this.tabsData[item.index].path,
+        query: query
+      })
+    }
+  }
+}
+</script>

src/views/administration/Index.vue

@@ -5,7 +5,8 @@
       <div class="explorer-top-tools-title">{{$t('overall.administration')}}</div>
     </div>
     <div style="width: 100%;padding-bottom: 26px;">
-      <administration-tabs :tabs-data="tabsData" />
+      <!--<administration-tabs :tabs-data="tabsData" />-->
+      <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->
     <div class="explorer-container administration-container">
@@ -15,47 +16,43 @@
 </template>
 
 <script>
-import AdministrationTabs from '@/views/administration/AdministrationTabs'
+// import AdministrationTabs from '@/views/administration/AdministrationTabs'
+import ChartTabs from '@/components/common/ChartTabs'
 export default {
   name: 'index',
   components: {
-    AdministrationTabs
+    ChartTabs
+    // AdministrationTabs
   },
   data () {
     return {
       tabsData: [
         {
-          name: 'User',
           i18n: 'overall.user',
           path: '/administration/user',
           icon: 'cn-icon cn-icon-user2'
         },
         {
-          name: 'Role',
           i18n: 'overall.role',
           path: '/administration/role',
           icon: 'cn-icon cn-icon-role2'
         },
         {
-          name: 'OperationLog',
           i18n: 'overall.operationLog',
           path: '/administration/operationLog',
           icon: 'cn-icon cn-icon-operation-log'
         },
         {
-          name: 'I18n',
           i18n: 'I18n',
           path: '/administration/i18n',
           icon: 'cn-icon cn-icon-i18n'
         },
         {
-          name: 'GalaxyProxy',
           i18n: 'galaxyProxy.galaxyProxy',
           path: '/administration/galaxyProxy',
           icon: 'cn-icon cn-icon-proxy'
         },
         {
-          name: 'Chart',
           i18n: 'overall.chart',
           path: '/administration/chart',
           icon: 'cn-icon cn-icon-chart'

src/views/detections/DetectionTabs.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="npm-tabs">
-    12345678
     <div class="npm-tabs__active-bar"></div>
     <el-tabs v-model="currentTab" ref="elTabs" type="border-card" @tab-click="jumpPage">
       <el-tab-pane

src/views/detections/Index.vue

@@ -21,8 +21,9 @@
             :end-time="timeFilter.endTime"/>
       </div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
-      <detection-tabs :time-filter="timeFilter" :chart="tabsData" />
+    <div style="width: 100%;padding-bottom: 47px;">
+      <!--<detection-tabs :time-filter="timeFilter" :chart="tabsData" />-->
+      <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
 
     <!-- 搜索组件 -->
@@ -133,7 +134,8 @@ import { reverseSortBy, extensionEchartY } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 // import DetectionNoData from '@/views/detections/DetectionNoData'
 import Loading from '@/components/common/Loading'
-import DetectionTabs from '@/views/detections/DetectionTabs'
+// import DetectionTabs from '@/views/detections/DetectionTabs'
+import ChartTabs from '@/components/common/ChartTabs'
 
 export default {
   name: 'Index',
@@ -146,25 +148,24 @@ export default {
     DetectionList,
     Pagination,
     // DetectionNoData,
-    DetectionTabs
+    // DetectionTabs,
+    ChartTabs
   },
   data () {
     return {
       tabsData: [
         {
-          name: 'SecurityEvents',
           i18n: 'entities.securityEvents',
           path: '/detection/securityEvent',
           icon: 'cn-icon cn-icon-a-SecurityEvent'
         },
         {
-          name: 'Regulatory Risk Event',
           i18n: 'entities.regulatoryRiskEvents',
           path: '/detection/securityEvent',
-          icon: 'cn-icon cn-icon-a-RegulatoryRiskEvent'
+          icon: 'cn-icon cn-icon-a-RegulatoryRiskEvent',
+          disable: true
         },
         {
-          name: 'PerformanceEvents',
           i18n: 'overall.performanceEvents',
           path: '/detection/performanceEvent',
           icon: 'cn-icon cn-icon-a-PerformanceEvent'