55

src/layout/index.vue

@@ -49,7 +49,8 @@
     @tab-context-menu="onTabContextMenu"
   >
     <!-- 路由出口 -->
-    <router-layout />
+    <router-layout /> 
+   
     <!-- logo 图标 -->
     <template v-slot:logo>
       <el-image v-if="logoImg" fit="contain" :src="logoImg" alt="logo" />

src/router/index.js

@@ -54,11 +54,12 @@ router.beforeEach((to, from, next) => {
           next();
         });
     } else {
+
       // 判断外链并跳转
       if (to.meta) {
         if (to.meta.source && to.meta.source == 2) {
           next({
-            path: `/page-main-data/source`,
+            path: `/sourceLink`,
             query: { link: to.meta.path }
           });
           return;

src/router/routes.js

@@ -1,23 +1,45 @@
-import { menuToRoutes, eachTreeData } from 'ele-admin';
-import { HOME_PATH, LAYOUT_PATH, REDIRECT_PATH } from '@/config/setting';
+import {
+  menuToRoutes,
+  eachTreeData
+} from 'ele-admin';
+import {
+  HOME_PATH,
+  LAYOUT_PATH,
+  REDIRECT_PATH
+} from '@/config/setting';
 import EleLayout from '@/layout/index.vue';
 import RedirectLayout from '@/components/RedirectLayout';
-import { iframeMixins } from '@/utils/iframe-mixin';
+import {
+  iframeMixins
+} from '@/utils/iframe-mixin';
 
 /**
  * 静态路由
  */
-export const routes = [
-  {
+export const routes = [{
     path: '/login',
     component: () => import('@/views/login/index.vue'),
-    meta: { title: '登录' }
+    meta: {
+      title: '登录'
+    }
   },
   {
     path: '/forget',
     component: () => import('@/views/forget/index.vue'),
-    meta: { title: '忘记密码' }
-  }
+    meta: {
+      title: '忘记密码'
+    }
+  },
+
+  {
+    path: '/sourceLink',
+    component: () => import('@/views/sourceLink.vue'),
+    meta: {
+      title: '外链'
+    }
+  },
+
+
   // {
   //   path: '/main-data/*',
   //   component: EleLayout,
@@ -46,19 +68,19 @@ export function getMenuRoutes(menus, homePath) {
     {
       path: REDIRECT_PATH + '/:path(.*)',
       component: RedirectLayout,
-      meta: { hideFooter: true }
+      meta: {
+        hideFooter: true
+      }
     }
-    // {
-    //   path: '/source',
-    //   component: () => import('@/views/source/index.vue'),
-    //   meta: { hideFooter: true }
-    // }
   ];
   // 路由铺平处理
   eachTreeData(
     menuToRoutes(menus, getComponent, [], null, null, iframeMixins),
     (route) => {
-      routes.push({ ...route, children: null });
+      routes.push({
+        ...route,
+        children: null
+      });
     }
   );
   return {

src/store/modules/user.js

@@ -40,7 +40,6 @@ const formatRouter = (list) => {
       };
       p.link = null;
       arr.push(p);
-      // }
     }
 
     return arr;

src/views/dashboard.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="ele-body ele-body-card">
-
-  </div>
-</template>
-
-<script>
-
-
-  export default {
-    name: '',
-    components: {
-
-    },
-    data() {
-      return {
-
-      }
-    },
-    computed: {
-
-    },
-    methods: {
-
-    }
-  };
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/source/index.vue

@@ -1,40 +1,36 @@
 <template>
   <div>
-    <iframe style="width: 100%; height: 100vh" :src="link + `?token=${token}`">
-    </iframe>
+    555
+    <!-- <iframe style="width: 100%; height: 100vh" :src="link + `?token=${token}`">
+    </iframe> -->
   </div>
 </template>
-  
-  <script>
-import { getToken } from '@/utils/token-util';
-export default {
-  data() {
-    return {
-      link: '',
-      token: ''
-    };
-  },
-  mounted() {
-    // console.log(this.$route, 11111);
-    // if (this.$route.query && this.$route.query.link) {
-    //   this.link = this.$route.query.link;
-    // }
-  },
-  watch: {
-    // 监视搜索词变化
-    '$route.query.link': {
-      immediate: true,
-      handler() {
-        // console.log(2222);
-        this.link = this.$route.query.link;
-        this.token = getToken();
+
+<script>
+  import { getToken } from '@/utils/token-util';
+  export default {
+    data() {
+      return {
+        link: '',
+        token: ''
+      };
+    },
+    mounted() {
+     
+    },
+    watch: {
+      // 监视搜索词变化
+      '$route.query.link': {
+        immediate: true,
+        handler() {
+          // console.log(2222);
+          this.link = this.$route.query.link;
+          this.token = getToken();
+        }
       }
-    }
-  },
-  methods: {}
-};
+    },
+    methods: {}
+  };
 </script>
-  
-  <style lang="scss" scoped>
-</style>
-  
+
+<style lang="scss" scoped></style>

src/views/sourceLink.vue

@@ -0,0 +1,397 @@
+<template>
+  <ele-pro-layout
+    :menus="menus"
+    :tabs="theme.tabs"
+    :showRefresh="false"
+    :collapse="theme.collapse"
+    :side-nav-collapse="theme.sideNavCollapse"
+    :body-fullscreen="theme.bodyFullscreen"
+    :show-tabs="theme.showTabs"
+    :show-footer="theme.showFooter"
+    :head-style="theme.headStyle"
+    :side-style="theme.sideStyle"
+    :layout-style="theme.layoutStyle"
+    :side-menu-style="theme.sideMenuStyle"
+    :tab-style="theme.tabStyle"
+    :fixed-header="theme.fixedHeader"
+    :fixed-sidebar="theme.fixedSidebar"
+    :fixed-body="theme.fixedBody"
+    :body-full="theme.bodyFull"
+    :logo-auto-size="theme.logoAutoSize"
+    :colorful-icon="theme.colorfulIcon"
+    :side-unique-open="theme.sideUniqueOpen"
+    :style-responsive="theme.styleResponsive"
+    :project-name="projectName"
+    :hide-footers="HIDE_FOOTERS"
+    :hide-sidebars="HIDE_SIDEBARS"
+    :repeatable-tabs="REPEATABLE_TABS"
+    :home-title="HOME_TITLE || $t('layout.home')"
+    :home-path="HOME_PATH"
+    :layout-path="LAYOUT_PATH"
+    :redirect-path="REDIRECT_PATH"
+    :tab-sortable="true"
+    :locale="locale"
+    :i18n="i18n"
+    @update:collapse="updateCollapse"
+    @update:side-nav-collapse="updateSideNavCollapse"
+    @update:body-fullscreen="updateBodyFullscreen"
+    @tab-add="addPageTab"
+    @tab-remove="removePageTab"
+    @tab-remove-all="removeAllPageTab"
+    @tab-remove-left="removeLeftPageTab"
+    @tab-remove-right="removeRightPageTab"
+    @tab-remove-other="removeOtherPageTab"
+    @tabSortChange="setPageTabs"
+    @reload-page="reloadPageTab"
+    @logo-click="onLogoClick"
+    @screen-size-change="screenSizeChange"
+    @set-home-components="setHomeComponents"
+    @tab-context-menu="onTabContextMenu"
+  >
+    <!-- 路由出口 -->
+     445555
+
+
+    <!-- logo 图标 -->
+    <template v-slot:logo>
+      <el-image v-if="logoImg" fit="contain" :src="logoImg" alt="logo" />
+    </template>
+
+    <!-- 顶栏右侧区域 -->
+    <template v-slot:right>
+      <header-tools
+        v-if="token"
+        :fullscreen="fullscreen"
+        @fullscreen="onFullscreen"
+      />
+    </template>
+    <!-- 全局页脚 -->
+    <!-- <template v-slot:footer>
+        <page-footer />
+      </template> -->
+    <!-- 自定义菜单标题增加徽章、小红点 -->
+    <template v-slot:title="{ title, item }">
+      <span>{{ title }} </span>
+      <span
+        v-if="item.meta.secretLevel != 1"
+        :style="getSecretLevelStyle(item)"
+        >{{ getSecretLevel(item) }}</span
+      >
+      <div v-if="item.meta && item.meta.badge" class="ele-menu-badge">
+        <el-badge :value="item.meta.badge" :type="item.meta.badgeColor" />
+      </div>
+    </template>
+    <template v-slot:top-title="{ title, item }">
+      <span>{{ title }} </span>
+      <span
+        v-if="item.meta.secretLevel != 1"
+        :style="getSecretLevelStyle(item)"
+        >{{ getSecretLevel(item) }}</span
+      >
+      <div v-if="item.meta && item.meta.badge" class="ele-menu-badge">
+        <el-badge :value="item.meta.badge" :type="item.meta.badgeColor" />
+      </div>
+    </template>
+    <template v-slot:nav-title="{ title, item }">
+      <span>{{ title }} </span>
+      <span
+        v-if="item.meta.secretLevel != 1"
+        :style="getSecretLevelStyle(item)"
+        >{{ getSecretLevel(item) }}</span
+      >
+      <div v-if="item.meta && item.meta.badge" class="ele-menu-badge">
+        <el-badge :value="item.meta.badge" :type="item.meta.badgeColor" />
+      </div>
+    </template>
+  </ele-pro-layout>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import { toggleFullscreen, isFullscreen } from 'ele-admin';
+  import RouterLayout from '@/components/RouterLayout/index.vue';
+  import HeaderTools from '@/layout/components/header-tools.vue';
+  // import PageFooter from './components/page-footer.vue';
+  import { getToken } from '@/utils/token-util';
+
+  import { logoByCode } from '@/api/login/index';
+  import {
+    PROJECT_NAME,
+    HIDE_SIDEBARS,
+    HIDE_FOOTERS,
+    REPEATABLE_TABS,
+    HOME_TITLE,
+    HOME_PATH,
+    LAYOUT_PATH,
+    REDIRECT_PATH,
+    I18N_ENABLE
+  } from '@/config/setting';
+  import {
+    addPageTab,
+    removePageTab,
+    removeAllPageTab,
+    removeLeftPageTab,
+    removeRightPageTab,
+    removeOtherPageTab,
+    reloadPageTab,
+    setHomeComponents,
+    setPageTabs
+  } from '@/utils/page-tab-util';
+  import {secretLevelList} from "@/enum/dict";
+
+  export default {
+    name: 'EleLayout',
+    components: {
+      RouterLayout,
+      HeaderTools
+      // PageFooter
+    },
+    data() {
+      return {
+        // PROJECT_NAME,
+        HIDE_SIDEBARS,
+        HIDE_FOOTERS,
+        REPEATABLE_TABS,
+        HOME_PATH,
+        HOME_TITLE,
+        LAYOUT_PATH,
+        REDIRECT_PATH,
+        // 是否全屏
+        fullscreen: false,
+
+        logoImg: null,
+        projectName: null,
+        token: ''
+      };
+    },
+    computed: {
+      // 当前语言
+      locale() {
+        return this.$i18n.locale;
+      },
+      // 菜单数据
+      menus() {
+        return this.$store.state.user.menus;
+      },
+      // 主题状态
+      ...mapGetters(['theme'])
+    },
+    created() {
+      this.token = getToken();
+      if (this.token) {
+        this.getLogo();
+      }
+    },
+    methods: {
+      getSecretLevelStyle(item) {
+        return {
+          color: item.meta.secretLevel > 1 ? 'red' : 'green',
+          fontWeight: 'bold',
+          fontSize: '15px'
+        };
+      },
+      getSecretLevel(item) {
+        let find =
+          secretLevelList.find((i) => item.meta.secretLevel == i.value) || {};
+        return '(' + find.label + ')';
+      },
+      getLogo() {
+        logoByCode('logoCode').then((res) => {
+          this.logoImg = res.logoUrl;
+          this.projectName = res.logoName;
+        });
+      },
+
+      /* 侧栏折叠切换 */
+      updateCollapse(value) {
+        // console.log('value:', this.$store.state.user.menus);
+        this.$store.dispatch('theme/setCollapse', value);
+      },
+      /* 双侧栏一级折叠切换 */
+      updateSideNavCollapse(value) {
+        this.$store.dispatch('theme/setSideNavCollapse', value);
+      },
+      /* 内容区域全屏切换 */
+      updateBodyFullscreen(value) {
+        this.$store.dispatch('theme/setBodyFullscreen', value);
+      },
+      /* logo 点击事件 */
+      onLogoClick(isHome) {
+        isHome || this.$router.push(LAYOUT_PATH);
+      },
+      /* 监听屏幕尺寸改变 */
+      screenSizeChange() {
+        this.$store.dispatch('theme/updateScreenSize');
+        this.fullscreen = isFullscreen();
+      },
+      /* 全屏切换 */
+      onFullscreen() {
+        try {
+          this.fullscreen = toggleFullscreen();
+        } catch (e) {
+          this.$message.error('您的浏览器不支持全屏模式');
+        }
+      },
+      /* 页签右键菜单点击事件 */
+      onTabContextMenu({ key, tabKey, item, active }) {
+        switch (key) {
+          case 'reload': // 刷新
+            reloadPageTab({
+              isHome: !item,
+              fullPath: item?.fullPath ?? tabKey
+            });
+            break;
+          case 'close': // 关闭当前
+            removePageTab({
+              key: item?.fullPath ?? tabKey,
+              active
+            });
+            break;
+          case 'left': // 关闭左侧
+            removeLeftPageTab({
+              key: tabKey,
+              active
+            });
+            break;
+          case 'right': // 关闭右侧
+            removeRightPageTab({
+              key: tabKey,
+              active
+            });
+            break;
+          case 'other': // 关闭其他
+            removeOtherPageTab({
+              key: tabKey,
+              active
+            });
+            break;
+        }
+      },
+      /* 菜单标题国际化 */
+      i18n(_path, key) {
+        if (!I18N_ENABLE || !key) {
+          return;
+        }
+        const k = 'route.' + key + '._name';
+        const title = this.$t(k);
+        if (title !== k) {
+          return title;
+        }
+      },
+      //
+      addPageTab,
+      removePageTab,
+      removeAllPageTab,
+      removeLeftPageTab,
+      removeRightPageTab,
+      removeOtherPageTab,
+      reloadPageTab,
+      setHomeComponents,
+      setPageTabs
+    }
+  };
+</script>
+
+<style lang="scss">
+  .ele-admin-logo {
+    font-size: 18px !important;
+    justify-content: flex-start !important;
+    align-items: center !important;
+    img {
+      height: 35px !important;
+      max-width: 86px;
+      width: auto;
+      margin-right: 6px;
+    }
+  }
+
+  // 侧栏菜单徽章样式，定位在右侧垂直居中并调小尺寸
+  .ele-menu-badge {
+    position: absolute;
+    top: 50%;
+    right: 14px;
+    line-height: 1;
+    margin-top: -9px;
+    font-size: 0;
+
+    .el-badge__content {
+      height: 18px;
+      line-height: 18px;
+      border-radius: 9px;
+      border: none;
+      min-width: 18px;
+      padding: 0 4px;
+      box-sizing: border-box;
+    }
+  }
+
+  // 父级菜单标题中右侧多定位一点，避免与箭头重合
+  .el-submenu > .el-submenu__title .ele-menu-badge {
+    right: 36px;
+  }
+
+  // 折叠悬浮中样式调整
+  .el-menu--popup {
+    .el-submenu > .el-submenu__title .ele-menu-badge {
+      right: 20px;
+    }
+  }
+
+  // 侧栏折叠后样式调整
+  .ele-admin-collapse .ele-admin-sidebar-menus > .el-scrollbar {
+    & > .el-scrollbar__wrap > .el-scrollbar__view > .el-menu {
+      & > .el-menu-item,
+      & > .el-submenu > .el-submenu__title {
+        .ele-menu-badge {
+          top: 2px;
+          right: 2px;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  // 顶栏菜单标题中样式调整
+  .ele-admin-header-nav > .el-scrollbar > .el-scrollbar__wrap {
+    & > .el-scrollbar__view > .el-menu {
+      & > .el-menu-item,
+      & > .el-submenu > .el-submenu__title {
+        .ele-menu-badge {
+          position: static;
+          right: auto;
+          top: auto;
+          display: inline-block;
+          vertical-align: 6px;
+          margin: 0 0 0 2px;
+        }
+      }
+    }
+  }
+
+  // 双侧栏时一级侧栏菜单中样式调整，定位在右上角
+  .ele-admin-sidebar-nav-menu > .el-scrollbar > .el-scrollbar__wrap {
+    & > .el-scrollbar__view > .el-menu {
+      & > .el-menu-item,
+      & > .el-submenu > .el-submenu__title {
+        .ele-menu-badge {
+          top: 0;
+          right: 0;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  // 双侧栏时一级侧栏菜单折叠后样式调整
+  .ele-admin-nav-collapse .ele-admin-sidebar-nav-menu > .el-scrollbar {
+    & > .el-scrollbar__wrap > .el-scrollbar__view > .el-menu {
+      & > .el-menu-item,
+      & > .el-submenu > .el-submenu__title {
+        .ele-menu-badge {
+          top: 0;
+          right: 0;
+        }
+      }
+    }
+  }
+</style>