初始化

frontend/packages/BigScreenComponentMag/MenuContent.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="right-screen-list-wrap">
+    <ComponentList
+      :catalog-info="catalogInfo"
+    />
+  </div>
+</template>
+<script>
+import ComponentList from 'data-room-ui/ComponentList'
+export default {
+  name: '',
+  props: {
+    catalogInfo: {
+      type: String,
+      default: 'component'
+    }
+  },
+  components: { ComponentList },
+  data () {
+    return { }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-screen-list-wrap {
+  width: 100%;
+  // height: 100%;
+}
+</style>

frontend/packages/BigScreenComponentMag/SideMenu.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="side-catalog-wrap">
+    <el-scrollbar class="side-catalog-box">
+      <div
+        v-for="(com, index) in componentList"
+        :key="index"
+        class="component-item-box"
+        :class="{ 'active-catalog': activeType === com.type }"
+        @click="componentHandle(com)"
+      >
+        {{ com.name }}
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+      componentList: [
+        {
+          name: '自定义组件',
+          type: 'component'
+        },
+        {
+          name: '业务组件',
+          type: 'bizComponent'
+        },
+        {
+          name: '系统组件',
+          type: 'system'
+        }
+      ],
+      activeType: 'component'
+    }
+  },
+  watch: {
+    $route: {
+      handler (val) {
+        const { globalData } = this.$router.app.$options
+        if (globalData?.componentsManagementType) {
+          this.activeType = globalData.componentsManagementType
+          this.$emit('getPageInfo', globalData.componentsManagementType)
+          // 清除this.$router.app.$options.globalData.componentsManagementType
+          delete globalData.componentsManagementType
+        }
+      },
+      immediate: true
+    }
+  },
+  created () { },
+  methods: {
+    // 点击左侧组件
+    componentHandle (com) {
+      this.activeType = com.type
+      this.$emit('getPageInfo', com.type)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import '../assets/style/bsTheme.scss';
+  .side-catalog-wrap {
+    .component-item-box {
+      width: 100%;
+      padding: 0px 16px;
+      line-height: 36px;
+      display: flex;
+      justify-content: space-between;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .side-catalog-wrap{
+    // padding-top: 16px;
+    width: 220px;
+    // height: 100%;
+    // margin-bottom: 16px;
+    box-sizing: border-box;
+    color: var(--bs-el-title);
+    background-color: var(--bs-background-2);
+    .side-catalog-box{
+      height: calc(100% - 50px);
+      overflow-y: auto;
+      .side-catalog-all{
+        font-weight: bold;
+      }
+      .side-catalog-item{
+        width: 100%;
+        padding: 0px 16px;
+        line-height: 36px;
+        display: flex;
+        justify-content: space-between;
+        &:hover{
+          cursor: pointer;
+        }
+        .el-icon-more{
+          transform: rotate(90deg);
+          color: var(--bs-el-title);
+          font-weight: 400;
+        }
+        .active-icon-more{
+          color:var(--bs-el-text);
+        }
+        .catalog-name{
+          overflow:hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          -o-text-overflow:ellipsis;
+        }
+        .page-list-dropdown{
+          opacity: 0;
+        }
+        .dropdown-show{
+          opacity: 1;
+        }
+      }
+      /*菜单激活时的样式*/
+      .active-catalog{
+        position: relative;
+        background-color: rgba(var(--bs-el-color-primary-active), 0.4);
+        color: var(--bs-el-text);
+        &::before{
+          content: '';
+          position: absolute;
+          left: 0;
+          width: 4px;
+          height: 36px;
+          background-color: var(--bs-el-color-primary);
+        }
+      }
+    }
+    .add-catalog-box{
+      padding: 10px 0;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10px;
+      margin: 0 8px;
+      &:hover{
+        background-color: var(--bs-background-1);
+        cursor: pointer;
+        color: var(--bs-el-text);;
+      }
+      .el-icon-plus{
+        padding: 0 5px;
+      }
+    }
+
+  }
+  .dropdown-menu-box{
+    left: 50%;
+    transform: translateX(-40%);
+    width: 100px!important;
+    ::v-deep .el-dropdown-menu__item{
+      text-align: center;
+      padding: 5px;
+    }
+    ::v-deep .popper__arrow{
+      left: 50% !important;
+      transform: translateX(-50%) !important;
+    }
+  }
+</style>

frontend/packages/BigScreenComponentMag/images/more.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684566058652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M560 272a48 48 0 1 1-96 0 48 48 0 0 1 96 0z m0 240a48 48 0 1 1-96 0 48 48 0 0 1 96 0z m0 240a48 48 0 1 1-96 0 48 48 0 0 1 96 0z" fill="#ffffff" p-id="2392"></path></svg>

frontend/packages/BigScreenComponentMag/index.js

@@ -0,0 +1,7 @@
+import BigScreenComponentMag from './index.vue'
+
+BigScreenComponentMag.install = function (Vue) {
+  Vue.component(BigScreenComponentMag.name, BigScreenComponentMag)
+}
+
+export default BigScreenComponentMag

frontend/packages/BigScreenComponentMag/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="bs-manage-main-wrap">
+    <side-menu @getPageInfo="getPageInfo" />
+    <menu-content :catalog-info="catalogInfo" />
+  </div>
+</template>
+<script>
+import SideMenu from './SideMenu'
+import MenuContent from './MenuContent'
+export default {
+  name: '',
+  props: {
+  },
+  components: { SideMenu, MenuContent },
+  data () {
+    return {
+      catalogInfo: 'component'
+    }
+  },
+  mounted () {},
+  methods: {
+    getPageInfo (type) {
+      this.catalogInfo = type
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-manage-main-wrap {
+  position: relative;
+  width: 100%;
+  height:  calc(100vh - 108px);
+  display: flex;
+  background-color: var(--bs-background-1);
+  // padding-top: 16px;
+}
+</style>