初始化

frontend/packages/Layout/BigScreenHomeLayout/NavTop.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="nav-main">
+    <span
+      v-for="nav in navs"
+      :key="nav.id"
+      class="nav-span"
+      :class="{ 'nav-active': activeNav === nav.id }"
+    >
+      <a
+        class="nav-link"
+        @click="toggleNav(nav)"
+      >
+        <span class="nav-icon">
+          <!-- <i :class="['iconfont-bigscreen', nav.icon]" /> -->
+        </span>
+        {{ nav.name }}
+      </a>
+    </span>
+    <span class="nav-span nav-span-last" />
+  </div>
+</template>
+
+<script lang='ts'>
+export default {
+  name: 'NavMain',
+  components: {},
+  data () {
+    return {
+      nc: null,
+      activeNav: 0
+    }
+  },
+  props: {
+    navs: {
+      type: Array,
+      required: true
+    }
+  },
+  watch: {
+    $route () {
+      const nav = this.navs.find(m => m.path === this.$route.path)
+      if (nav) {
+        this.activeNav = nav.id
+      }
+    }
+  },
+  mounted () {
+    const nav = this.navs.find(m => m.path === this.$route.path)
+    this.activeNav = nav ? nav.id : 0
+  },
+  beforeDestroy () {
+  },
+  methods: {
+    toggleNav (nav) {
+      this.activeNav = nav.id
+      this.$emit('change', nav)
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.nav-main {
+  z-index: 10;
+  display: flex;
+  top: 30px;
+  position: sticky;
+  width: 100%;
+  margin-top: 109px;
+  min-width: 1024px;
+  user-select: none;
+
+  .nav-span {
+    position: relative;
+    top: 1px;
+    // background-image: url('./images/line.png');
+    background-repeat: repeat-x;
+    background-position: 0 34px;
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      transition: color 0.2s;
+      text-decoration: none !important;
+      color: var(--bs-el-title);
+      width: auto;
+      min-width: 140px;
+      line-height: 40px;
+      font-size: 14px;
+      text-align: left;
+      cursor: pointer;
+      padding: 0 40px;
+
+      &.nav-active,
+      &:hover {
+        color: var(--bs-el-text) !important;
+      }
+    }
+
+    .nav-icon {
+      margin-right: 5px;
+    }
+
+    &.nav-active {
+      background-color: var(--bs-background-1);
+      &:after{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: var(--bs-el-color-primary);
+      }
+      // background-image: url('./images/tab.png');
+      // background-size: 100% 100%;
+      // background-repeat: no-repeat;
+      // background-position: center bottom;
+      /* border-bottom: 1px solid var(--bs-background-1); */
+      /* background-color: var(--bs-background-1) */
+    }
+
+  }
+
+  .nav-span-last {
+    flex: 1;
+  }
+}
+</style>

frontend/packages/Layout/BigScreenHomeLayout/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="big-screen-home-wrap">
+    <header class="big-screen-home-wrap-top">
+      <div class="logo-title">
+        <img
+          class="logo"
+          :src="logo"
+        >
+        <span>{{ title }}</span><span style="font-size: 18px;margin-left: 8px">2.x</span>
+      </div>
+
+      <div class="big-screen-nav-container">
+        <Nav
+          :navs="tabList"
+          @change="changeTab"
+        />
+      </div>
+      <a
+        v-if="giteeSvg && giteeHref"
+        class="fork-me-on-gitee"
+        :href="giteeHref"
+        target="_blank"
+      >
+        <img
+          :src="giteeSvg"
+          alt="Fork me on Gitee"
+        >
+      </a>
+    </header>
+    <div class="big-screen-router-view-wrap">
+      <keep-alive>
+        <router-view />
+      </keep-alive>
+    </div>
+  </div>
+</template>
+<script>
+import Nav from './NavTop.vue'
+// import Nav from './Nav.vue'
+export default {
+  name: 'BigScreenHome',
+  components: {
+    Nav
+  },
+  props: [],
+  data () {
+    return {
+      // 和此处路由保持一致，将会激活tab，请按需更改
+      giteeHref: '',
+      giteeSvg: ''
+    }
+  },
+  computed: {
+    title () {
+      if (this.$route.query.edit) return '大屏设计器'
+      return window?.BS_CONFIG?.starter?.title ?? 'DataRoom大屏设计器'
+    },
+    logo () {
+      return window?.BS_CONFIG?.starter?.logo ?? require('./images/logo.png')
+    },
+    tabList () {
+      if (this.$route.query.edit) {
+        return [
+          {
+            id: 1,
+            name: '资源库',
+            path: window?.BS_CONFIG?.routers?.sourceUrl || '/big-screen-source',
+            icon: 'icon-tupian'
+          },
+          {
+            id: 2,
+            name: '组件库',
+            path: window?.BS_CONFIG?.routers?.componentUrl || '/big-screen-components',
+            icon: 'icon-zujian1'
+          }
+        ]
+      }
+      return [
+        {
+          id: 0,
+          name: '大屏管理',
+          path: window?.BS_CONFIG?.routers?.pageListUrl || '/big-screen-list',
+          icon: 'icon-icon-shujudaping'
+        },
+        // {
+        //   id: 1,
+        //   name: '模版管理',
+        //   path: window?.BS_CONFIG?.routers?.templateListUrl || '/big-screen-template',
+        //   icon: 'icon-xiangmuwenjianmobanku_mobanku'
+        // },
+        {
+          id: 1,
+          name: '资源库',
+          path: window?.BS_CONFIG?.routers?.sourceUrl || '/big-screen-source',
+          icon: 'icon-tupian'
+        },
+        {
+          id: 2,
+          name: '组件库',
+          path: window?.BS_CONFIG?.routers?.componentUrl || '/big-screen-components',
+          icon: 'icon-zujian1'
+        },
+        {
+          id: 3,
+          name: '数据源管理',
+          path:
+            window?.BS_CONFIG?.routers?.dataSourceUrl ||
+            '/big-screen-dataSource',
+          icon: 'icon-datafull'
+        },
+        {
+          id: 4,
+          name: '数据集管理',
+          path: window?.BS_CONFIG?.routers?.dataSetUrl || '/big-screen-dataSet',
+          icon: 'icon-data'
+        },
+        {
+          id: 5,
+          name: '地图数据管理',
+          path: '/big-screen-map-data',
+          icon: 'icon-data'
+        }
+      ]
+    }
+  },
+  created () {
+    document.title = this.title
+  },
+  mounted () {
+    this.giteeHref = 'https://gitee.com/gcpaas/DataRoom'
+    this.giteeSvg = 'https://gitee.com/gcpaas/DataRoom/widgets/widget_1.svg?color=007bff'
+  },
+  methods: {
+    changeTab (tab) {
+      if (this.$route.query.edit) {
+        this.$router.push({
+          path: tab.path,
+          query: { edit: 1 }
+        })
+      } else {
+        this.$router.push({
+          path: tab.path
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.big-screen-home-wrap > * {
+  box-sizing: border-box;
+}
+.big-screen-home-wrap {
+  height: 100%;
+
+  .big-screen-home-wrap-top {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 150px;
+    background-image: url('./images/nav_img.png');
+    background-size: 100% 150px;
+    background-color: #0D0F12;
+    background-position: center right;
+
+    .logo-title {
+      // 禁用可选
+      user-select: none;
+      font-size: 30px;
+      position: absolute;
+      z-index: 23;
+      top: 40px;
+      left: 40px;
+      display: flex;
+      align-items: center;
+      color: var(--bs-el-color-primary);
+
+      .logo {
+        height: 30px;
+      }
+
+      span {
+        font-family: Source Han Sans CN;
+        font-size: 30px;
+        font-weight: 700;
+        padding-left: 8px;
+        -webkit-background-clip: text;
+        background-size: 400% 400%;
+      }
+    }
+  }
+
+  .big-screen-router-view-wrap {
+    position: absolute;
+    top: 150px;
+    overflow: hidden;
+    // padding-top: 16px;
+    width: 100%;
+    height: calc(100vh - 150px);
+    background-color: var(--bs-background-1);
+    box-sizing: border-box;
+    padding-top: 16px;
+    padding-right: 16px;
+    padding-bottom: 16px;
+  }
+}
+
+@keyframes text-animate {
+  0% {
+    background-position: 0 0;
+    -webkit-background-clip: text;
+  }
+
+  50% {
+    background-position: 0 0;
+    -webkit-background-clip: text;
+  }
+
+  100% {
+    background-position: 0 0;
+    -webkit-background-clip: text;
+  }
+}
+.fork-me-on-gitee{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 999;
+  img{
+    width: 120px;
+    height: 120px;
+  }
+}
+</style>