style: 修改整体布局，并修复组件库搜索失效的问题

data-room-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcpaas/data-room-ui",
-  "version": "0.0.1-2023070402-Alpha",
+  "version": "0.0.1-2023070501-Alpha",
   "description": "自定义大屏",
   "author": "gc-starter",
   "license": "MIT",

data-room-ui/packages/BigScreenComponentMag/MenuContent.vue

@@ -27,6 +27,6 @@ export default {
 <style lang="scss" scoped>
 .right-screen-list-wrap {
   width: 100%;
-  // padding-bottom: 16px;
+  height: 100%;
 }
 </style>

data-room-ui/packages/BigScreenComponentMag/index.vue

@@ -17,14 +17,16 @@ export default {
     }
   },
   mounted () { },
-  methods: {}
+  methods: { }
 }
 </script>
 
 <style lang="scss" scoped>
 .bs-manage-main-wrap {
-  display: flex;
+  position: relative;
+  width: 100%;
   height: 100%;
+  display: flex;
   background-color: var(--bs-background-1);
   // padding-top: 16px;
 }

data-room-ui/packages/BigScreenList/index.vue

@@ -341,7 +341,8 @@ export default {
     overflow: auto;
     // 间隙自适应
     justify-content: space-around;
-    max-height: calc(100vh - 304px);
+    // max-height: calc(100vh - 304px);
+    height: calc(100% - 96px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;

data-room-ui/packages/BigScreenMag/MenuContent.vue

@@ -35,6 +35,6 @@ export default {
 <style lang="scss" scoped>
 .right-screen-list-wrap {
   width: 100%;
-  // padding-bottom: 16px;
+  height: 100%;
 }
 </style>

data-room-ui/packages/BigScreenMag/index.vue

@@ -45,8 +45,10 @@ export default {
 
 <style lang="scss" scoped>
 .bs-manage-main-wrap {
-  display: flex;
+  position: relative;
+  width: 100%;
   height: 100%;
+  display: flex;
   background-color: var(--bs-background-1);
   // padding-top: 16px;
 }

data-room-ui/packages/BigScreenTempMag/index.vue

@@ -26,5 +26,7 @@ export default {
 <style lang="scss" scoped>
   .bs-template-mag-wrap{
     height: 100%;
+    width: 100%;
+    position: relative;
   }
 </style>

data-room-ui/packages/ComponentList/index.vue

@@ -18,7 +18,7 @@
         />
       </el-select>
       <el-input
-        v-model="name"
+        v-model="searchKey"
         class="bs-el-input"
         placeholder="请输入组件名称"
         prefix-icon="el-icon-search"
@@ -248,7 +248,11 @@ export default {
   },
   methods: {
     reset () {
-      this.name = ''
+      this.searchKey = ''
+      this.current = 1
+      this.size = 10
+      this.catalogCode = ''
+      this.init()
     },
     init () {
       if (this.catalogInfo !== 'system') {
@@ -268,7 +272,7 @@ export default {
         this.getDataList()
       } else {
         const arr = [...innerRemoteComponents, ...getRemoteComponents()]
-        this.list = arr?.filter((item) => item.title.indexOf(this.name) !== -1)
+        this.list = arr?.filter((item) => item.title.indexOf(this.searchKey) !== -1)
       }
     },
     catalogManage () {
@@ -303,8 +307,8 @@ export default {
         get('/bigScreen/bizComponent/page', {
           current: this.current,
           size: this.size,
-          searchKey: this.searchKey,
+          // searchKey: this.searchKey,
-          name: this.name,
+          name: this.searchKey,
           type: this.catalogCode || null
         })
           .then((data) => {
@@ -453,7 +457,8 @@ export default {
     overflow: auto;
     // 间隙自适应
     justify-content: space-around;
-    max-height: calc(100vh - 304px);
+    // max-height: calc(100vh - 304px);
+    height: calc(100% - 96px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;

data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue

@@ -103,9 +103,7 @@ export default {
   box-sizing: border-box;
 }
 .big-screen-home-wrap {
-  position: relative;
+  height: 100%;
-  overflow: hidden;
-  height: 100vh;
 
   .big-screen-home-wrap-top {
     position: absolute;

data-room-ui/packages/SourceList/index.vue

@@ -328,6 +328,7 @@ export default {
 .big-screen-list-wrap {
   position: relative;
   height: 100%;
+  // height: calc(100% - 16px);
   padding: 16px;
   color: #9ea9b2;
   // margin:0 16px;
@@ -361,7 +362,8 @@ export default {
     overflow: auto;
     // 间隙自适应
     justify-content: space-around;
-    max-height: calc(100vh - 304px);
+    // max-height: calc(100vh - 304px);
+    height: calc(100% - 96px);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 15px;

data-room-ui/packages/SourceMag/MenuContent.vue

@@ -33,6 +33,6 @@ export default {
 <style lang="scss" scoped>
 .right-screen-list-wrap {
   width: 100%;
-  // padding-bottom: 16px;
+  height: 100%;
 }
 </style>

data-room-ui/packages/SourceMag/index.vue

@@ -42,8 +42,10 @@ export default {
 
 <style lang="scss" scoped>
 .bs-manage-main-wrap {
-  display: flex;
+  position: relative;
+  width: 100%;
   height: 100%;
+  display: flex;
   background-color: var(--bs-background-1);
   // padding-top: 16px;
 }

data-room-ui/packages/SourceManagement/index.vue

@@ -14,7 +14,7 @@ export default {
   data () {
     return {}
   },
-  mounted () {},
+  mounted () { },
   methods: {}
 }
 </script>
@@ -22,5 +22,7 @@ export default {
 <style lang="scss" scoped>
 .bs-template-mag-wrap {
   height: 100%;
+  width: 100%;
+  position: relative;
 }
 </style>