From ca2619900ca3f02184c185165ba244e498bdf81a Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Fri, 14 Jul 2023 10:42:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8Ddialog=20=E5=92=8C?=
 =?UTF-8?q?=20select=20=E6=A0=B7=E5=BC=8F=E5=9C=A8=E5=85=B6=E4=BB=96?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E8=A2=AB=E6=B1=A1=E6=9F=93=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/Button/setting.vue        |   1 -
 .../BasicComponents/Input/setting.vue         |  33 -
 .../BigScreenDesign/ComponentDialog/index.vue | 692 +++++++-----------
 .../BigScreenDesign/SourceDialog/index.vue    | 160 ++--
 data-room-ui/packages/BigScreenList/index.vue | 184 ++---
 data-room-ui/packages/ComponentList/index.vue | 242 +++---
 data-room-ui/packages/SourceList/index.vue    |  21 +-
 .../packages/assets/style/bsTheme.scss        |   1 +
 .../packages/assets/style/common/index.scss   |  14 +-
 .../packages/assets/style/settingWrap.scss    |  86 ++-
 10 files changed, 531 insertions(+), 903 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/Button/setting.vue b/data-room-ui/packages/BasicComponents/Button/setting.vue
index ab242d95..bf70ef18 100644
--- a/data-room-ui/packages/BasicComponents/Button/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Button/setting.vue
@@ -216,6 +216,5 @@ export default {
 .lc-field-body {
   width: 97%;
   padding: 16px;
-  //padding-bottom: 70px;
 }
 </style>
diff --git a/data-room-ui/packages/BasicComponents/Input/setting.vue b/data-room-ui/packages/BasicComponents/Input/setting.vue
index 06c1587a..1d3f0e2a 100644
--- a/data-room-ui/packages/BasicComponents/Input/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Input/setting.vue
@@ -72,39 +72,6 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-
-          <!-- <el-form-item label="输入框类型">
-            <el-select
-              v-model="config.customize.type"
-              popper-class="bs-el-select"
-              class="bs-el-select"
-            >
-              <el-option
-                v-for="typeItem in typeOptions"
-                :key="typeItem.value"
-                :label="typeItem.label"
-                :value="typeItem.value"
-              />
-            </el-select>
-          </el-form-item> -->
-
-          <!-- <el-form-item
-            v-if="config.customize.showTitle"
-            label="标题位置"
-          >
-            <el-select
-              v-model="config.customize.titlePosition"
-              popper-class="bs-el-select"
-              class="bs-el-select"
-            >
-              <el-option
-                v-for="titlePosition in titlePositionOptions"
-                :key="titlePosition.value"
-                :label="titlePosition.label"
-                :value="titlePosition.value"
-              />
-            </el-select>
-          </el-form-item> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="输入值字体大小">
diff --git a/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue b/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue
index 2793cb3e..46235df8 100644
--- a/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue
@@ -1,96 +1,37 @@
 <template>
-  <el-dialog
-    title="组件库"
-    :visible.sync="dialogVisible"
-    width="80%"
-    :modal="true"
-    :modal-append-to-body="false"
-    :appen-to-body="true"
-    class="bs-dialog-wrap bs-el-dialog"
-    @closed="close"
-  >
+  <el-dialog title="组件库" :visible.sync="dialogVisible" width="80%" :modal="true" :modal-append-to-body="false"
+    :appen-to-body="true" class="bs-dialog-wrap bs-el-dialog" @closed="close">
     <div class="content">
       <el-tabs v-model="activeName">
-        <el-tab-pane
-          label="自定义组件"
-          name="combination"
-        >
+        <el-tab-pane label="自定义组件" name="combination">
           <div class="big-screen-list-wrap">
             <div class="top-search-wrap">
-              <el-input
-                v-model="searchKey"
-                class="bs-el-input"
-                placeholder="请输入组件名称"
-                prefix-icon="el-icon-search"
-                clearable
-                @clear="reSearch"
-                @keyup.enter.native="reSearch"
-              />
-              <el-select
-                v-model="code"
-                class="bs-el-select"
-                popper-class="bs-el-select"
-                placeholder="请选择分组"
-                clearable
-                @change="reSearch"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.code"
-                  :label="item.name"
-                  :value="item.code"
-                />
+              <el-input v-model="searchKey" class="bs-el-input" placeholder="请输入组件名称" prefix-icon="el-icon-search"
+                clearable @clear="reSearch" @keyup.enter.native="reSearch" />
+              <el-select v-model="code" class="bs-el-select" popper-class="bs-el-select" placeholder="请选择分组" clearable
+                @change="reSearch">
+                <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code" />
               </el-select>
-              <el-button
-                size="small"
-                style="margin-right: 20px"
-                type="primary"
-                @click="reSearch"
-              >
+              <el-button size="small" style="margin-right: 20px" type="primary" @click="reSearch">
                 搜索
               </el-button>
             </div>
-            <div
-              v-if="list.length !== 0"
-              v-loading="loading"
-              class="list-wrap bs-scrollbar"
-              element-loading-text="加载中"
+            <div v-if="list.length !== 0" v-loading="loading" class="list-wrap bs-scrollbar" element-loading-text="加载中"
               :style="{
                 display: gridComputed ? 'grid' : 'flex',
                 justifyContent: gridComputed ? 'space-around' : 'flex-start'
-              }"
-            >
+              }">
               <!-- <div v-if="list.length !== 0"> -->
-              <div
-                v-for="screen in list"
-                :key="screen.id"
-                class="big-screen-card-wrap"
-                :style="{
-                  width: gridComputed ? 'auto' : '290px'
-                }"
-                @click="chooseComponent(screen)"
-              >
-                <div
-                  :class="focus.id == screen.id ? 'focus' : ''"
-                  class="big-screen-card-inner"
-                >
+              <div v-for="screen in list" :key="screen.id" class="big-screen-card-wrap" :style="{
+                width: gridComputed ? 'auto' : '290px'
+              }" @click="chooseComponent(screen)">
+                <div :class="focus.id == screen.id ? 'focus' : ''" class="big-screen-card-inner">
                   <div class="big-screen-card-img">
-                    <el-image
-                      :src="screen.coverPicture"
-                      fit="contain"
-                      style="width: 100%; height: 100%"
-                    >
-                      <div
-                        slot="placeholder"
-                        class="image-slot"
-                      >
+                    <el-image :src="screen.coverPicture" fit="contain" style="width: 100%; height: 100%">
+                      <div slot="placeholder" class="image-slot">
                         加载中···
                       </div>
-                      <div
-                        slot="error"
-                        class="image-slot"
-                        style="font-size: 20px"
-                      >
+                      <div slot="error" class="image-slot" style="font-size: 20px">
                         <div class="error-img-text">
                           {{ screen.name }}
                         </div>
@@ -98,122 +39,55 @@
                     </el-image>
                   </div>
                   <div class="big-screen-bottom">
-                    <div
-                      class="left-bigscreen-title"
-                      :title="screen.name"
-                    >
+                    <div class="left-bigscreen-title" :title="screen.name">
                       {{ screen.name }}
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              v-else
-              class="empty"
-            >
+            <div v-else class="empty">
               暂无数据
             </div>
             <div class="footer-pagination-wrap">
               <div class="bs-pagination">
-                <el-pagination
-                  class="bs-el-pagination"
-                  popper-class="bs-el-pagination"
-                  background
-                  layout="total, prev, pager, next, sizes"
-                  :page-size="size"
-                  prev-text="上一页"
-                  next-text="下一页"
-                  :total="totalCount"
-                  :page-sizes="[10, 20, 50, 100]"
-                  :current-page="current"
-                  @current-change="currentChangeHandle"
-                  @size-change="sizeChangeHandle"
-                />
+                <el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background
+                  layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页"
+                  :total="totalCount" :page-sizes="[10, 20, 50, 100]" :current-page="current"
+                  @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
               </div>
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane
-          label="业务组件"
-          name="bizComponent"
-        >
+        <el-tab-pane label="业务组件" name="bizComponent">
           <div class="big-screen-list-wrap">
             <div class="top-search-wrap">
-              <el-input
-                v-model="name"
-                class="bs-el-input"
-                placeholder="请输入组件名称"
-                prefix-icon="el-icon-search"
-                clearable
-                @clear="reSearch"
-                @keyup.enter.native="reSearch"
-              />
-              <el-select
-                v-model="code"
-                class="bs-el-select"
-                popper-class="bs-el-select"
-                placeholder="请选择分组"
-                clearable
-                @change="reSearch"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.code"
-                  :label="item.name"
-                  :value="item.code"
-                />
+              <el-input v-model="name" class="bs-el-input" placeholder="请输入组件名称" prefix-icon="el-icon-search" clearable
+                @clear="reSearch" @keyup.enter.native="reSearch" />
+              <el-select v-model="code" class="bs-el-select" popper-class="bs-el-select" placeholder="请选择分组" clearable
+                @change="reSearch">
+                <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code" />
               </el-select>
-              <el-button
-                size="small"
-                style="margin-right: 20px"
-                type="primary"
-                @click="reSearch"
-              >
+              <el-button size="small" style="margin-right: 20px" type="primary" @click="reSearch">
                 搜索
               </el-button>
             </div>
-            <div
-              v-if="bizComponentList.length !== 0"
-              v-loading="loading"
-              class="list-wrap bs-scrollbar"
-              element-loading-text="加载中"
-              :style="{
+            <div v-if="bizComponentList.length !== 0" v-loading="loading" class="list-wrap bs-scrollbar"
+              element-loading-text="加载中" :style="{
                 display: bizFridComputed ? 'grid' : 'flex',
                 justifyContent: bizFridComputed ? 'space-around' : 'flex-start'
-              }"
-            >
+              }">
               <!-- <div v-if="list.length !== 0"> -->
-              <div
-                v-for="screen in bizComponentList"
-                :key="screen.id"
-                class="big-screen-card-wrap"
-                :style="{
-                  width: bizFridComputed ? 'auto' : '290px'
-                }"
-                @click="chooseComponent(screen)"
-              >
-                <div
-                  :class="focus.id == screen.id ? 'focus' : ''"
-                  class="big-screen-card-inner"
-                >
+              <div v-for="screen in bizComponentList" :key="screen.id" class="big-screen-card-wrap" :style="{
+                width: bizFridComputed ? 'auto' : '290px'
+              }" @click="chooseComponent(screen)">
+                <div :class="focus.id == screen.id ? 'focus' : ''" class="big-screen-card-inner">
                   <div class="big-screen-card-img">
-                    <el-image
-                      :src="screen.coverPicture"
-                      fit="contain"
-                      style="width: 100%; height: 100%"
-                    >
-                      <div
-                        slot="placeholder"
-                        class="image-slot"
-                      >
+                    <el-image :src="screen.coverPicture" fit="contain" style="width: 100%; height: 100%">
+                      <div slot="placeholder" class="image-slot">
                         加载中···
                       </div>
-                      <div
-                        slot="error"
-                        class="image-slot"
-                        style="font-size: 20px"
-                      >
+                      <div slot="error" class="image-slot" style="font-size: 20px">
                         <div class="error-img-text">
                           {{ screen.name }}
                         </div>
@@ -221,119 +95,64 @@
                     </el-image>
                   </div>
                   <div class="big-screen-bottom">
-                    <div
-                      class="left-bigscreen-title"
-                      :title="screen.name"
-                    >
+                    <div class="left-bigscreen-title" :title="screen.name">
                       {{ screen.name }}
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              v-else
-              class="empty"
-            >
+            <div v-else class="empty">
               暂无数据
             </div>
             <div class="footer-pagination-wrap">
               <div class="bs-pagination">
-                <el-pagination
-                  class="bs-el-pagination"
-                  popper-class="bs-el-pagination"
-                  background
-                  layout="total, prev, pager, next, sizes"
-                  :page-size="size"
-                  prev-text="上一页"
-                  next-text="下一页"
-                  :total="totalCount"
-                  :page-sizes="[10, 20, 50, 100]"
-                  :current-page="current"
-                  @current-change="currentChangeHandle"
-                  @size-change="sizeChangeHandle"
-                />
+                <el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background
+                  layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页"
+                  :total="totalCount" :page-sizes="[10, 20, 50, 100]" :current-page="current"
+                  @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
               </div>
             </div>
           </div>
         </el-tab-pane>
-        <el-tab-pane
-          label="系统组件"
-          name="remote"
-        >
+        <el-tab-pane label="系统组件" name="remote">
           <div class="big-screen-list-wrap">
-            <div
-              v-if="remoteComponentlist.length !== 0"
-              v-loading="loading"
-              class="list-wrap bs-scrollbar"
-              element-loading-text="加载中"
-              :style="{
+            <div v-if="remoteComponentlist.length !== 0" v-loading="loading" class="list-wrap bs-scrollbar"
+              element-loading-text="加载中" :style="{
                 display: remoteComponentsGridComputed ? 'grid' : 'flex',
                 justifyContent: remoteComponentsGridComputed ? 'space-around' : 'flex-start'
-              }"
-            >
-              <div
-                v-for="component in remoteComponentlist"
-                :key="component.title"
-                class="big-screen-card-wrap"
-                :style="{
-                  width: remoteComponentsGridComputed ? 'auto' : '290px'
-                }"
-                @click="chooseComponent(component)"
-              >
-                <div
-                  :class="component.title == focus.title ? 'focus' : ''"
-                  class="big-screen-card-inner"
-                >
+              }">
+              <div v-for="component in remoteComponentlist" :key="component.title" class="big-screen-card-wrap" :style="{
+                width: remoteComponentsGridComputed ? 'auto' : '290px'
+              }" @click="chooseComponent(component)">
+                <div :class="component.title == focus.title ? 'focus' : ''" class="big-screen-card-inner">
                   <div class="big-screen-card-img">
-                    <el-image
-                      :src="component.img"
-                      fit="contain"
-                      style="width: 100%; height: 100%"
-                    >
-                      <div
-                        slot="placeholder"
-                        class="image-slot"
-                      >
+                    <el-image :src="component.img" fit="contain" style="width: 100%; height: 100%">
+                      <div slot="placeholder" class="image-slot">
                         加载中···
                       </div>
                     </el-image>
                   </div>
                   <div class="big-screen-bottom">
-                    <div
-                      class="left-bigscreen-title"
-                      :title="component.title"
-                    >
+                    <div class="left-bigscreen-title" :title="component.title">
                       {{ component.title }}
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              v-else
-              class="empty"
-            >
+            <div v-else class="empty">
               暂无数据
             </div>
           </div>
         </el-tab-pane>
       </el-tabs>
     </div>
-    <div
-      slot="footer"
-      class="dialog-footer"
-    >
-      <el-button
-        class="bs-el-button-default"
-        @click="dialogVisible = false"
-      >
+    <div slot="footer" class="dialog-footer">
+      <el-button class="bs-el-button-default" @click="dialogVisible = false">
         取消
       </el-button>
-      <el-button
-        type="primary"
-        @click="confirm"
-      >
+      <el-button type="primary" @click="confirm">
         确定
       </el-button>
     </div>
@@ -349,7 +168,7 @@ export default {
   name: 'ComponentDialog',
   mixins: [pageMixins],
   props: {},
-  data () {
+  data() {
     return {
       dialogVisible: false,
       loading: false,
@@ -366,30 +185,30 @@ export default {
     }
   },
   computed: {
-    gridComputed () {
+    gridComputed() {
       return this.list.length > 3
     },
-    remoteComponentsGridComputed () {
+    remoteComponentsGridComputed() {
       return this.remoteComponentlist.length > 3
     },
-    bizFridComputed () {
+    bizFridComputed() {
       return this.bizComponentList.length > 3
     }
   },
   watch: {
-    activeName () {
+    activeName() {
       this.getCatalogList()
     }
   },
-  mounted () {
+  mounted() {
     this.remoteComponentlist = [...innerRemoteComponents, ...getRemoteComponents()]
   },
   methods: {
-    chooseComponent (component) {
+    chooseComponent(component) {
       this.focus = _.cloneDeep(component)
     },
-    close () {},
-    init () {
+    close() { },
+    init() {
       this.dialogVisible = true
       this.current = 1
       this.searchKey = ''
@@ -399,7 +218,7 @@ export default {
       this.getCatalogList()
     },
     // 点击确定
-    confirm () {
+    confirm() {
       this.dialogVisible = false
       if (this.activeName === 'combination') {
         if (Object.keys(this.focus).length) {
@@ -421,7 +240,7 @@ export default {
         this.$emit('setRemoteComponent', config)
       }
     },
-    getDataList () {
+    getDataList() {
       this.loading = true
       this.$dataRoomAxios.get('/bigScreen/design/page', {
         parentCode: this.code || null,
@@ -451,227 +270,242 @@ export default {
       })
     },
     // 获取目录的列表
-    getCatalogList () {
+    getCatalogList() {
       const url = this.activeName === 'combination' ? '/bigScreen/type/list/componentCatalog' : '/bigScreen/type/list/bizComponentCatalog'
       get(url)
         .then((data) => {
           this.options = data
         })
-        .catch(() => {})
+        .catch(() => { })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import '../../assets/style/bsTheme.scss';
-  .big-screen-list-wrap {
-    position: relative;
-    height: 100%;
-    // margin:0 16px;
-    // padding: 16px;
-    margin-bottom: 56px;
-    color: #9ea9b2;
-    background-color: var(--bs-background-2) !important;
-
-    .top-search-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      margin-bottom: 12px;
-
-      .el-input {
-        width: 200px;
-        margin-right: 20px;
-        ::v-deep.el-input__inner {
-          background-color: var(--bs-background-1) !important;
-        }
+@import '../../assets/style/bsTheme.scss';
+
+.big-screen-list-wrap {
+  .el-select {
+    display: inline-block !important;
+    position: relative !important;
+    width: auto !important;
+  }
+
+  position: relative;
+  height: 100%;
+  // margin:0 16px;
+  // padding: 16px;
+  margin-bottom: 56px;
+  color: #9ea9b2;
+  background-color: var(--bs-background-2) !important;
+
+  .top-search-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 12px;
+
+    .el-input {
+      width: 200px;
+      margin-right: 20px;
+
+      ::v-deep.el-input__inner {
+        background-color: var(--bs-background-1) !important;
       }
+    }
 
-      .el-select {
-        margin-right: 20px;
-        ::v-deep.el-input__inner {
-          background-color: var(--bs-background-1) !important;
-        }
+    .el-select {
+      margin-right: 20px;
+
+      ::v-deep.el-input__inner {
+        background-color: var(--bs-background-1) !important;
       }
     }
+  }
 
-    .list-wrap {
-      /* display: grid; */
-      overflow: auto;
-      // 间隙自适应
-      justify-content: space-around;
-      // max-height: calc(100vh - 270px);
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      grid-gap: 15px;
-
-      // ::v-deep .el-loading-mask {
-      //   display: flex;
-      //   align-items: center;
-      //   justify-content: center;
-      //   height: calc(100vh - 260px) !important;
-      //   z-index: 999;
-      //   top: 50px;
-      // }
-      .big-screen-card-wrap {
-        position: relative;
-        height: 230px;
-        cursor: pointer;
+  .list-wrap {
+    /* display: grid; */
+    overflow: auto;
+    // 间隙自适应
+    justify-content: space-around;
+    // max-height: calc(100vh - 270px);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-gap: 15px;
 
-        &:hover {
-          .screen-card__hover {
-            height: 180px;
-          }
-        }
+    // ::v-deep .el-loading-mask {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   height: calc(100vh - 260px) !important;
+    //   z-index: 999;
+    //   top: 50px;
+    // }
+    .big-screen-card-wrap {
+      position: relative;
+      height: 230px;
+      cursor: pointer;
 
+      &:hover {
         .screen-card__hover {
-          position: absolute;
-          z-index: 999;
-          top: 0;
-          right: 0;
-          left: 0;
-          display: flex;
-          overflow: hidden;
-          align-items: center;
-          justify-content: center;
-          height: 0;
-          transition: height 0.4s;
-          background: #00000099;
+          height: 180px;
+        }
+      }
+
+      .screen-card__hover {
+        position: absolute;
+        z-index: 999;
+        top: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        justify-content: center;
+        height: 0;
+        transition: height 0.4s;
+        background: #00000099;
+      }
+
+      .focus {
+        color: var(--bs-el-text) !important;
+        border: 1px solid var(--bs-el-color-primary) !important;
+      }
+
+      .big-screen-card-inner {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background-color: var(--bs-background-2);
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        color: var(--bs-el-title);
+        border: 1px solid var(--bs-background-1);
+
+        &:hover {
+          color: var(--bs-el-text);
+          border: 1px solid var(--bs-el-color-primary);
         }
 
-        .focus {
-          color: var(--bs-el-text) !important;
-          border: 1px solid var(--bs-el-color-primary) !important;
+        .add-big-screen-card-text {
+          color: var(--bs-el-color-primary);
+          font-size: 24px;
         }
 
-        .big-screen-card-inner {
-          overflow: hidden;
+        .big-screen-card-img {
           width: 100%;
-          height: 100%;
-          cursor: pointer;
-          background-color: var(--bs-background-2);
-          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-          color: var(--bs-el-title);
-          border: 1px solid var(--bs-background-1);
-          &:hover {
-            color: var(--bs-el-text);
-            border: 1px solid var(--bs-el-color-primary);
-          }
-
-          .add-big-screen-card-text {
-            color: var(--bs-el-color-primary);
-            font-size: 24px;
-          }
+          height: 180px;
 
-          .big-screen-card-img {
+          img {
             width: 100%;
-            height: 180px;
-
-            img {
-              width: 100%;
-              height: 100%;
-
-              object-fit: cover;
-            }
-
-            ::v-deep.image-slot {
-              height: 100%;
-              background-color: var(--bs-background-2);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-            ::v-deep.el-image__error {
-              background-color: #1d1d1d;
-            }
+            height: 100%;
+
+            object-fit: cover;
           }
 
-          .big-screen-bottom {
+          ::v-deep.image-slot {
+            height: 100%;
+            background-color: var(--bs-background-2);
             display: flex;
             align-items: center;
-            flex-direction: row;
-            justify-content: space-between;
-            box-sizing: border-box;
-            width: 100%;
-            /*height: 26px;*/
-            padding: 0 10px;
-            height: calc(100% - 180px);
-            color: var(--bs-el-title);
-            background-color: var(--bs-background-2);
-
-            .left-bigscreen-title {
-              font-size: 14px;
-              overflow: hidden;
-              width: 120px;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            }
-
-            .right-bigscreen-time-title {
-              font-size: 14px;
-              overflow: hidden;
-              width: 140px;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            }
+            justify-content: center;
           }
 
-          .big-screen-card-text {
-            font-size: 14px;
-            padding: 10px;
-            text-align: center;
-            color: #333;
+          ::v-deep.el-image__error {
+            background-color: #1d1d1d;
           }
         }
 
-        .big-screen-card-inner-add {
+        .big-screen-bottom {
           display: flex;
           align-items: center;
-          justify-content: center;
+          flex-direction: row;
+          justify-content: space-between;
+          box-sizing: border-box;
+          width: 100%;
+          /*height: 26px;*/
+          padding: 0 10px;
+          height: calc(100% - 180px);
+          color: var(--bs-el-title);
+          background-color: var(--bs-background-2);
+
+          .left-bigscreen-title {
+            font-size: 14px;
+            overflow: hidden;
+            width: 120px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .right-bigscreen-time-title {
+            font-size: 14px;
+            overflow: hidden;
+            width: 140px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
         }
-      }
-    }
 
-    .el-loading-parent--relative {
-      position: unset !important;
-    }
+        .big-screen-card-text {
+          font-size: 14px;
+          padding: 10px;
+          text-align: center;
+          color: #333;
+        }
+      }
 
-    .footer-pagination-wrap {
-      margin-top: 16px;
-      position: absolute;
-      width: 100%;
+      .big-screen-card-inner-add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
-  .bs-pagination {
-    ::v-deep .el-input__inner {
-      width: 110px !important;
-      border: none;
-      background: var(--bs-el-background-1);
-    }
+
+  .el-loading-parent--relative {
+    position: unset !important;
   }
-  .empty {
+
+  .footer-pagination-wrap {
+    margin-top: 16px;
+    position: absolute;
     width: 100%;
-    height: 70%;
-    min-height: 300px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  ::v-deep .el-tabs__item {
-    color: var(--bs-el-text);
   }
-  .error-img-text{
-    overflow:hidden;
-    padding:0 10px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -o-text-overflow:ellipsis;
+}
+
+.bs-pagination {
+  ::v-deep .el-input__inner {
+    width: 110px !important;
+    border: none;
+    background: var(--bs-el-background-1);
   }
+}
 
-  ::v-deep .el-tabs__nav-wrap{
-    &:after{
-      display: none;
-    }
+.empty {
+  width: 100%;
+  height: 70%;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+::v-deep .el-tabs__item {
+  color: var(--bs-el-text);
+}
+
+.error-img-text {
+  overflow: hidden;
+  padding: 0 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
+
+::v-deep .el-tabs__nav-wrap {
+  &:after {
+    display: none;
   }
+}
 </style>
diff --git a/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue b/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
index 47bb9867..0df04de1 100644
--- a/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue
@@ -1,139 +1,62 @@
 <template>
-  <el-dialog
-    title="资源库"
-    :visible.sync="dialogVisible"
-    width="80%"
-    :modal="true"
-    :modal-append-to-body="false"
-    :appen-to-body="true"
-    class="bs-dialog-wrap bs-el-dialog"
-    @closed="close"
-  >
+  <el-dialog title="资源库" :visible.sync="dialogVisible" width="80%" :modal="true" :modal-append-to-body="false"
+    :appen-to-body="true" class="bs-dialog-wrap bs-el-dialog" @closed="close">
     <div class="content">
       <div class="big-screen-list-wrap">
         <div class="top-search-wrap">
-          <el-input
-            v-model="searchKey"
-            class="bs-el-input"
-            placeholder="请输入图片名称"
-            prefix-icon="el-icon-search"
-            clearable
-            @clear="reSearch"
-            @keyup.enter.native="reSearch"
-          />
-          <el-select
-            v-model="code"
-            class="bs-el-select"
-            popper-class="bs-el-select"
-            placeholder="请选择类型"
-            clearable
-            @change="reSearch"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.code"
-            />
+          <el-input v-model="searchKey" class="bs-el-input" placeholder="请输入图片名称" prefix-icon="el-icon-search" clearable
+            @clear="reSearch" @keyup.enter.native="reSearch" />
+          <el-select v-model="code" class="bs-el-select" popper-class="bs-el-select" placeholder="请选择类型" clearable
+            @change="reSearch">
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.code" />
           </el-select>
-          <el-button
-            size="small"
-            style="margin-right: 20px"
-            type="primary"
-            @click="reSearch"
-          >
+          <el-button size="small" style="margin-right: 20px" type="primary" @click="reSearch">
             搜索
           </el-button>
         </div>
-        <div
-          v-if="list.length !== 0"
-          v-loading="loading"
-          class="list-wrap bs-scrollbar"
-          element-loading-text="加载中"
+        <div v-if="list.length !== 0" v-loading="loading" class="list-wrap bs-scrollbar" element-loading-text="加载中"
           :style="{
             display: gridComputed ? 'grid' : 'flex',
             justifyContent: gridComputed ? 'space-around' : 'flex-start'
-          }"
-        >
+          }">
           <!-- <div v-if="list.length !== 0"> -->
-          <div
-            v-for="screen in list"
-            :key="screen.id"
-            class="big-screen-card-wrap"
-            :style="{
-              width: gridComputed ? 'auto' : '290px'
-            }"
-            @click="chooseImg(screen)"
-          >
-            <div
-              :class="focus.id == screen.id ? 'focus' : ''"
-              class="big-screen-card-inner"
-            >
+          <div v-for="screen in list" :key="screen.id" class="big-screen-card-wrap" :style="{
+            width: gridComputed ? 'auto' : '290px'
+          }" @click="chooseImg(screen)">
+            <div :class="focus.id == screen.id ? 'focus' : ''" class="big-screen-card-inner">
               <div class="big-screen-card-img">
-                <el-image
-                  :src="screen.url"
-                  fit="contain"
-                  style="width: 100%; height: 100%"
-                >
-                  <div
-                    slot="placeholder"
-                    class="image-slot"
-                  >
+                <el-image :src="screen.url" fit="contain" style="width: 100%; height: 100%">
+                  <div slot="placeholder" class="image-slot">
                     加载中···
                   </div>
                 </el-image>
               </div>
               <div class="big-screen-bottom">
-                <div
-                  class="left-bigscreen-title"
-                  :title="screen.originalName"
-                >
+                <div class="left-bigscreen-title" :title="screen.originalName">
                   {{ screen.originalName }}
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          v-else
-          class="empty"
-        >
+        <div v-else class="empty">
           暂无数据
         </div>
         <div class="footer-pagination-wrap">
           <div class="bs-pagination">
-            <el-pagination
-              class="bs-el-pagination"
-              popper-class="bs-el-pagination"
-              background
-              layout="total, prev, pager, next, sizes"
-              :page-size="size"
-              prev-text="上一页"
-              next-text="下一页"
-              :total="totalCount"
-              :page-sizes="[10, 20, 50, 100]"
-              :current-page="current"
-              @current-change="currentChangeHandle"
-              @size-change="sizeChangeHandle"
-            />
+            <el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background
+              layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页"
+              :total="totalCount" :page-sizes="[10, 20, 50, 100]" :current-page="current"
+              @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
           </div>
         </div>
       </div>
     </div>
-    <div
-      slot="footer"
-      class="dialog-footer"
-    >
-      <el-button
-        class="bs-el-button-default"
-        @click="dialogVisible = false"
-      >
+    <div slot="footer" class="dialog-footer">
+      <el-button class="bs-el-button-default" @click="dialogVisible = false">
         取消
       </el-button>
-      <el-button
-        type="primary"
-        @click="confirm"
-      >
+      <el-button type="primary" @click="confirm">
         确定
       </el-button>
     </div>
@@ -147,7 +70,7 @@ export default {
   name: 'SourceDialog',
   mixins: [pageMixins],
   props: {},
-  data () {
+  data() {
     return {
       dialogVisible: false,
       loading: false,
@@ -159,17 +82,17 @@ export default {
     }
   },
   computed: {
-    gridComputed () {
+    gridComputed() {
       return this.list.length > 3
     }
   },
-  mounted () {},
+  mounted() { },
   methods: {
-    chooseImg (img) {
+    chooseImg(img) {
       this.focus = _.cloneDeep(img)
     },
-    close () {},
-    init () {
+    close() { },
+    init() {
       this.dialogVisible = true
       this.current = 1
       this.searchKey = ''
@@ -178,13 +101,13 @@ export default {
       this.getDataList()
       this.getCatalogList()
     },
-    confirm () {
+    confirm() {
       this.dialogVisible = false
       if (this.focus !== -1) {
         this.$emit('getImg', this.focus)
       }
     },
-    getDataList () {
+    getDataList() {
       this.loading = true
       this.$dataRoomAxios.get('/bigScreen/file', {
         module: this.code,
@@ -202,12 +125,12 @@ export default {
         })
     },
     // 获取目录的列表
-    getCatalogList () {
+    getCatalogList() {
       this.$dataRoomAxios.get('/bigScreen/type/list/resourceCatalog')
         .then((data) => {
           this.options = data
         })
-        .catch(() => {})
+        .catch(() => { })
     }
   }
 }
@@ -215,7 +138,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/style/bsTheme.scss';
+
 .big-screen-list-wrap {
+  .el-select {
+    display: inline-block !important;
+    position: relative !important;
+    width: auto !important;
+  }
+
   position: relative;
   height: 100%;
   // margin:0 16px;
@@ -232,6 +162,7 @@ export default {
     .el-input {
       width: 200px;
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background-color: var(--bs-background-1) !important;
       }
@@ -239,6 +170,7 @@ export default {
 
     .el-select {
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background: var(--bs-background-1) !important;
         background-color: var(--bs-background-1) !important;
@@ -305,6 +237,7 @@ export default {
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
         border: 1px solid var(--bs-background-2);
+
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -333,6 +266,7 @@ export default {
             align-items: center;
             justify-content: center;
           }
+
           ::v-deep.el-image__error {
             background-color: #1d1d1d;
           }
@@ -394,6 +328,7 @@ export default {
     margin-top: 16px;
   }
 }
+
 .bs-pagination {
   ::v-deep .el-input__inner {
     width: 110px !important;
@@ -401,6 +336,7 @@ export default {
     background: var(--bs-el-background-1);
   }
 }
+
 .empty {
   width: 100%;
   height: 70%;
diff --git a/data-room-ui/packages/BigScreenList/index.vue b/data-room-ui/packages/BigScreenList/index.vue
index 307827f6..17c8e7e4 100644
--- a/data-room-ui/packages/BigScreenList/index.vue
+++ b/data-room-ui/packages/BigScreenList/index.vue
@@ -2,39 +2,21 @@
   <div class="big-screen-list-wrap">
     <div class="internal-box">
       <div class="top-search-wrap">
-        <el-input
-          v-model="searchKey"
-          class="bs-el-input bs-el-input-search"
-          :placeholder="type === 'bigScreenCatalog' ?'请输入大屏名称':'请输入组件名称'"
-          prefix-icon="el-icon-search"
-          clearable
-          @clear="reSearch"
-          @keyup.enter.native="reSearch"
-        />
-        <el-button
-          type="primary"
-          @click="reSearch"
-        >
+        <el-input v-model="searchKey" class="bs-el-input bs-el-input-search"
+          :placeholder="type === 'bigScreenCatalog' ? '请输入大屏名称' : '请输入组件名称'" prefix-icon="el-icon-search" clearable
+          @clear="reSearch" @keyup.enter.native="reSearch" />
+        <el-button type="primary" @click="reSearch">
           搜索
         </el-button>
       </div>
-      <div
-        v-loading="loading"
-        class="list-wrap bs-scrollbar"
-        element-loading-text="加载中"
-        :style="{
-          display: gridComputed ? 'grid' : 'flex',
-          justifyContent: gridComputed ? 'space-around' : 'flex-start'
-        }"
-      >
+      <div v-loading="loading" class="list-wrap bs-scrollbar" element-loading-text="加载中" :style="{
+        display: gridComputed ? 'grid' : 'flex',
+        justifyContent: gridComputed ? 'space-around' : 'flex-start'
+      }">
         <!-- 第一个是新增大屏卡片 -->
-        <div
-          class="big-screen-card-wrap"
-          :style="{
-            width: gridComputed ? 'auto' : '290px'
-          }"
-          @click="add"
-        >
+        <div class="big-screen-card-wrap" :style="{
+          width: gridComputed ? 'auto' : '290px'
+        }" @click="add">
           <div class="big-screen-card-inner big-screen-card-inner-add">
             <div class="add-big-screen-card">
               <div class="add-big-screen-card-inner">
@@ -46,68 +28,37 @@
           </div>
         </div>
         <!-- 后面遍历 list -->
-        <div
-          v-for="screen in list"
-          :key="screen.id"
-          class="big-screen-card-wrap"
-          :style="{
-            width: gridComputed ? 'auto' : '290px'
-          }"
-        >
+        <div v-for="screen in list" :key="screen.id" class="big-screen-card-wrap" :style="{
+          width: gridComputed ? 'auto' : '290px'
+        }">
           <div class="big-screen-card-inner">
             <div class="screen-card__hover">
               <div class="screen-card__hover-box">
                 <div class="preview">
-                  <div
-                    class="screen-card__oper-label circle"
-                    @click="preview(screen)"
-                  >
+                  <div class="screen-card__oper-label circle" @click="preview(screen)">
                     <span>预览</span>
                   </div>
-                  <div
-                    class="circle"
-                    @click="design(screen)"
-                  >
+                  <div class="circle" @click="design(screen)">
                     <span>设计</span>
                   </div>
-                  <div
-                    class="circle"
-                    @click="edit(screen)"
-                  >
+                  <div class="circle" @click="edit(screen)">
                     <span>编辑</span>
                   </div>
-                  <div
-                    class="circle"
-                    @click="copy(screen)"
-                  >
+                  <div class="circle" @click="copy(screen)">
                     <span>复制</span>
                   </div>
-                  <div
-                    class="circle"
-                    @click="del(screen)"
-                  >
+                  <div class="circle" @click="del(screen)">
                     <span>删除</span>
                   </div>
                 </div>
               </div>
             </div>
             <div class="big-screen-card-img">
-              <el-image
-                :src="screen.coverPicture"
-                fit="fill"
-                style="width: 100%; height: 100%"
-              >
-                <div
-                  slot="placeholder"
-                  class="image-slot"
-                >
+              <el-image :src="screen.coverPicture" fit="fill" style="width: 100%; height: 100%">
+                <div slot="placeholder" class="image-slot">
                   加载中···
                 </div>
-                <div
-                  slot="error"
-                  class="image-slot"
-                  style="font-size: 20px"
-                >
+                <div slot="error" class="image-slot" style="font-size: 20px">
                   <div class="error-img-text">
                     {{ screen.name }}
                   </div>
@@ -115,15 +66,12 @@
               </el-image>
             </div>
             <div class="big-screen-bottom">
-              <div
-                class="left-bigscreen-title"
-                :title="screen.name"
-              >
+              <div class="left-bigscreen-title" :title="screen.name">
                 {{ screen.name }}
               </div>
-            <!--            <div class="right-bigscreen-time-title">-->
-            <!--              {{ screen.updateDate || '-' }}-->
-            <!--            </div>-->
+              <!--            <div class="right-bigscreen-time-title">-->
+              <!--              {{ screen.updateDate || '-' }}-->
+              <!--            </div>-->
             </div>
           </div>
         </div>
@@ -134,30 +82,16 @@
         总共 {{ totalCount }} 个项目
       </div> -->
         <div class="bs-pagination">
-          <el-pagination
-            class="bs-el-pagination"
-            popper-class="bs-el-pagination"
-            background
-            layout="total, prev, pager, next, sizes"
-            :page-size="size"
-            prev-text="上一页"
-            next-text="下一页"
-            :total="totalCount"
-            :page-sizes="[10, 20, 50, 100]"
-            :current-page="current"
-            @current-change="currentChangeHandle"
-            @size-change="sizeChangeHandle"
-          />
+          <el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background
+            layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页" :total="totalCount"
+            :page-sizes="[10, 20, 50, 100]" :current-page="current" @current-change="currentChangeHandle"
+            @size-change="sizeChangeHandle" />
         </div>
       </div>
     </div>
 
     <!-- 新增或编辑弹窗 -->
-    <EditForm
-      ref="EditForm"
-      :type="pageType"
-      @refreshData="reSearch"
-    />
+    <EditForm ref="EditForm" :type="pageType" @refreshData="reSearch" />
   </div>
 </template>
 <script>
@@ -174,11 +108,11 @@ export default {
     },
     catalogInfo: {
       type: Object,
-      default: () => {}
+      default: () => { }
     }
   },
   components: { EditForm },
-  data () {
+  data() {
     return {
       templateLoading: false,
       searchKey: '',
@@ -188,30 +122,30 @@ export default {
     }
   },
   computed: {
-    hint () {
+    hint() {
       return this.pageType === 'bigScreen' ? '大屏' : '组件'
     },
-    code () {
+    code() {
       return this.catalogInfo?.page?.code
     },
-    gridComputed () {
+    gridComputed() {
       return this.list.length > 2
     },
-    pageType () {
+    pageType() {
       return this.type === 'bigScreenCatalog' ? 'bigScreen' : 'component'
     }
   },
   watch: {
-    code (value) {
+    code(value) {
       this.current = 1
       this.getDataList()
     }
   },
-  mounted () {
+  mounted() {
     this.getDataList()
   },
   methods: {
-    getDataList () {
+    getDataList() {
       this.loading = true
       this.$dataRoomAxios.get('/bigScreen/design/page', {
         parentCode: this.code || null,
@@ -228,7 +162,7 @@ export default {
           this.loading = false
         })
     },
-    preview (screen) {
+    preview(screen) {
       const { href } = this.$router.resolve({
         path: window.BS_CONFIG?.routers?.previewUrl || '/big-screen/preview', // 这里写的是要跳转的路由地址
         query: {
@@ -237,7 +171,7 @@ export default {
       })
       window.open(href, '_blank')
     },
-    design (screen) {
+    design(screen) {
       const path = window.BS_CONFIG?.routers?.designUrl || '/big-screen/design'
       const { href } = this.$router.resolve({
         path,
@@ -247,17 +181,17 @@ export default {
       })
       window.open(href, '_self')
     },
-    add () {
+    add() {
       const page = {
         code: '',
         type: 'bigScreen'
       }
       this.$refs.EditForm.init(page, this.catalogInfo.page)
     },
-    edit (screen) {
+    edit(screen) {
       this.$refs.EditForm.init(screen, this.catalogInfo.page)
     },
-    del (screen) {
+    del(screen) {
       this.$confirm(`确定删除该${this.hint}？`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -282,7 +216,7 @@ export default {
         })
         .catch()
     },
-    copy (screen) {
+    copy(screen) {
       this.$confirm(`确定复制该${this.hint}？`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -315,7 +249,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '../assets/style/bsTheme.scss';
+
 .big-screen-list-wrap {
+  .el-select {
+    display: inline-block !important;
+    position: relative !important;
+    width: auto !important;
+  }
+
   position: relative;
   height: 100%;
   // margin:0 16px;
@@ -323,10 +264,12 @@ export default {
   // padding: 16px;
   color: #9ea9b2;
   background-color: var(--bs-background-2) !important;
-  .internal-box{
+
+  .internal-box {
     height: calc(100% - 32px);
     padding: 16px;
   }
+
   .top-search-wrap {
     display: flex;
     align-items: center;
@@ -336,6 +279,7 @@ export default {
     .el-input {
       width: 200px;
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background-color: var(--bs-background-1) !important;
       }
@@ -387,6 +331,7 @@ export default {
         height: 0;
         transition: height 0.4s;
         background: #00000099;
+
         .screen-card__hover-box {
           position: absolute;
           width: 100%;
@@ -397,6 +342,7 @@ export default {
           align-items: center;
           justify-content: center;
         }
+
         .preview {
           display: flex;
           flex-direction: row;
@@ -436,6 +382,7 @@ export default {
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
         border: 1px solid var(--bs-background-1);
+
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -464,6 +411,7 @@ export default {
             align-items: center;
             justify-content: center;
           }
+
           ::v-deep.el-image__error {
             background-color: #1d1d1d;
           }
@@ -513,12 +461,13 @@ export default {
         justify-content: center;
       }
     }
-    .error-img-text{
-      overflow:hidden;
-      padding:0 10px;
+
+    .error-img-text {
+      overflow: hidden;
+      padding: 0 10px;
       white-space: nowrap;
       text-overflow: ellipsis;
-      -o-text-overflow:ellipsis;
+      -o-text-overflow: ellipsis;
     }
   }
 
@@ -540,6 +489,7 @@ export default {
     // padding: 0 16px;
   }
 }
+
 .bs-pagination {
   ::v-deep .el-input__inner {
     width: 110px !important;
diff --git a/data-room-ui/packages/ComponentList/index.vue b/data-room-ui/packages/ComponentList/index.vue
index fae2cffa..b74bcb3e 100644
--- a/data-room-ui/packages/ComponentList/index.vue
+++ b/data-room-ui/packages/ComponentList/index.vue
@@ -2,63 +2,27 @@
   <div class="big-screen-list-wrap">
     <div class="internal-box">
       <div class="top-search-wrap">
-        <el-select
-          v-if="catalogInfo !== 'system'"
-          v-model="catalogCode"
-          class="bs-el-select"
-          popper-class="bs-el-select"
-          placeholder="请选择分组"
-          clearable
-          @change="reSearch"
-        >
-          <el-option
-            v-for="item in catalogList"
-            :key="item.code"
-            :label="item.name"
-            :value="item.code"
-          />
+        <el-select v-if="catalogInfo !== 'system'" v-model="catalogCode" class="bs-el-select" popper-class="bs-el-select"
+          placeholder="请选择分组" clearable @change="reSearch">
+          <el-option v-for="item in catalogList" :key="item.code" :label="item.name" :value="item.code" />
         </el-select>
-        <el-input
-          v-model="searchKey"
-          class="bs-el-input"
-          placeholder="请输入组件名称"
-          prefix-icon="el-icon-search"
-          clearable
-          @clear="reSearch"
-          @keyup.enter.native="reSearch"
-        />
-        <el-button
-          type="primary"
-          @click="reSearch"
-        >
+        <el-input v-model="searchKey" class="bs-el-input" placeholder="请输入组件名称" prefix-icon="el-icon-search" clearable
+          @clear="reSearch" @keyup.enter.native="reSearch" />
+        <el-button type="primary" @click="reSearch">
           搜索
         </el-button>
-        <el-button
-          v-if="catalogInfo !== 'system'"
-          type="primary"
-          @click="catalogManage"
-        >
+        <el-button v-if="catalogInfo !== 'system'" type="primary" @click="catalogManage">
           分组管理
         </el-button>
       </div>
-      <div
-        v-loading="loading"
-        class="list-wrap bs-scrollbar"
-        element-loading-text="加载中"
-        :style="{
-          display: gridComputed ? 'grid' : 'flex',
-          justifyContent: gridComputed ? 'space-around' : 'flex-start'
-        }"
-      >
+      <div v-loading="loading" class="list-wrap bs-scrollbar" element-loading-text="加载中" :style="{
+        display: gridComputed ? 'grid' : 'flex',
+        justifyContent: gridComputed ? 'space-around' : 'flex-start'
+      }">
         <!-- 第一个是新增大屏卡片 -->
-        <div
-          v-if="catalogInfo !== 'system'"
-          class="big-screen-card-wrap"
-          :style="{
-            width: gridComputed ? 'auto' : '290px'
-          }"
-          @click="add"
-        >
+        <div v-if="catalogInfo !== 'system'" class="big-screen-card-wrap" :style="{
+          width: gridComputed ? 'auto' : '290px'
+        }" @click="add">
           <div class="big-screen-card-inner big-screen-card-inner-add">
             <div class="add-big-screen-card">
               <div class="add-big-screen-card-inner">
@@ -70,127 +34,68 @@
           </div>
         </div>
         <!-- 后面遍历 list -->
-        <div
-          v-for="screen in list"
-          :key="screen.id"
-          class="big-screen-card-wrap"
-          :style="{
-            width: gridComputed ? 'auto' : '290px'
-          }"
-        >
+        <div v-for="screen in list" :key="screen.id" class="big-screen-card-wrap" :style="{
+          width: gridComputed ? 'auto' : '290px'
+        }">
           <div class="big-screen-card-inner">
             <div class="screen-card__hover">
               <div class="screen-card__hover-box">
                 <div class="preview">
-                  <div
-                    class="screen-card__oper-label circle"
-                    @click="preview(screen)"
-                  >
+                  <div class="screen-card__oper-label circle" @click="preview(screen)">
                     <span>预览</span>
                   </div>
-                  <div
-                    v-if="catalogInfo !== 'system'"
-                    class="circle"
-                    @click="design(screen)"
-                  >
+                  <div v-if="catalogInfo !== 'system'" class="circle" @click="design(screen)">
                     <span>设计</span>
                   </div>
-                  <div
-                    v-if="catalogInfo !== 'system'"
-                    class="circle"
-                    @click="edit(screen)"
-                  >
+                  <div v-if="catalogInfo !== 'system'" class="circle" @click="edit(screen)">
                     <span>编辑</span>
                   </div>
-                  <div
-                    v-if="catalogInfo !== 'system'"
-                    class="circle"
-                    @click="copy(screen)"
-                  >
+                  <div v-if="catalogInfo !== 'system'" class="circle" @click="copy(screen)">
                     <span>复制</span>
                   </div>
-                  <div
-                    v-if="catalogInfo !== 'system'"
-                    class="circle"
-                    @click="del(screen)"
-                  >
+                  <div v-if="catalogInfo !== 'system'" class="circle" @click="del(screen)">
                     <span>删除</span>
                   </div>
                 </div>
               </div>
             </div>
             <div class="big-screen-card-img">
-              <el-image
-                :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
-                fit="fill"
-                style="width: 100%; height: 100%"
-              >
-                <div
-                  slot="placeholder"
-                  class="image-slot"
-                >
+              <el-image :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img" fit="fill"
+                style="width: 100%; height: 100%">
+                <div slot="placeholder" class="image-slot">
                   加载中···
                 </div>
-                <div
-                  slot="error"
-                  class="image-slot"
-                  style="font-size: 20px"
-                >
+                <div slot="error" class="image-slot" style="font-size: 20px">
                   <div class="error-img-text">
-                    {{ catalogInfo !== 'system'? screen.name : screen.title }}
+                    {{ catalogInfo !== 'system' ? screen.name : screen.title }}
                   </div>
                 </div>
               </el-image>
             </div>
             <div class="big-screen-bottom">
-              <div
-                class="left-bigscreen-title"
-                :title="catalogInfo !== 'system'? screen.name : screen.title"
-              >
-                {{ catalogInfo !== 'system'? screen.name : screen.title }}
+              <div class="left-bigscreen-title" :title="catalogInfo !== 'system' ? screen.name : screen.title">
+                {{ catalogInfo !== 'system' ? screen.name : screen.title }}
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        v-if="catalogInfo !== 'system'"
-        class="footer-pagination-wrap"
-      >
+      <div v-if="catalogInfo !== 'system'" class="footer-pagination-wrap">
         <!-- <div class="footer-pagination-wrap-text">
         总共 {{ totalCount }} 个项目
       </div> -->
         <div class="bs-pagination">
-          <el-pagination
-            class="bs-el-pagination"
-            popper-class="bs-el-pagination"
-            background
-            layout="total, prev, pager, next, sizes"
-            :page-size="size"
-            prev-text="上一页"
-            next-text="下一页"
-            :total="totalCount"
-            :page-sizes="[10, 20, 50, 100]"
-            :current-page="current"
-            @current-change="currentChangeHandle"
-            @size-change="sizeChangeHandle"
-          />
+          <el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background
+            layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页" :total="totalCount"
+            :page-sizes="[10, 20, 50, 100]" :current-page="current" @current-change="currentChangeHandle"
+            @size-change="sizeChangeHandle" />
         </div>
       </div>
     </div>
     <!-- 新增或编辑弹窗 -->
-    <EditForm
-      v-if="catalogInfo !== 'system'"
-      ref="EditForm"
-      :type="catalogInfo"
-      @refreshData="reSearch"
-    />
-    <CatalogEditForm
-      v-if="catalogInfo !== 'system'"
-      ref="CatalogEditForm"
-      :catalog-type="catalogType"
-      @updateCatalogList="updateCatalogList"
-    />
+    <EditForm v-if="catalogInfo !== 'system'" ref="EditForm" :type="catalogInfo" @refreshData="reSearch" />
+    <CatalogEditForm v-if="catalogInfo !== 'system'" ref="CatalogEditForm" :catalog-type="catalogType"
+      @updateCatalogList="updateCatalogList" />
   </div>
 </template>
 <script>
@@ -209,7 +114,7 @@ export default {
     }
   },
   components: { EditForm, CatalogEditForm },
-  data () {
+  data() {
     return {
       name: '',
       catalogVisible: false,
@@ -223,41 +128,41 @@ export default {
     }
   },
   computed: {
-    catalogType () {
+    catalogType() {
       if (this.catalogInfo === 'component') {
         return 'componentCatalog'
       } else {
         return 'bizComponentCatalog'
       }
     },
-    code () {
+    code() {
       return ''
     },
-    gridComputed () {
+    gridComputed() {
       return this.list.length > 2
     }
   },
   watch: {
-    catalogInfo () {
+    catalogInfo() {
       this.reset()
       this.init()
     },
-    catalogCode (value) {
+    catalogCode(value) {
       this.reSearch()
     }
   },
-  mounted () {
+  mounted() {
     this.init()
   },
   methods: {
-    reset () {
+    reset() {
       this.searchKey = ''
       this.current = 1
       this.size = 10
       this.catalogCode = ''
       this.init()
     },
-    init () {
+    init() {
       if (this.catalogInfo !== 'system') {
         this.getDataList()
         this.getCatalogList()
@@ -266,10 +171,10 @@ export default {
         this.list = [...innerRemoteComponents, ...getRemoteComponents()]
       }
     },
-    updateCatalogList (list) {
+    updateCatalogList(list) {
       this.catalogList = list
     },
-    reSearch () {
+    reSearch() {
       if (this.catalogInfo !== 'system') {
         this.current = 1
         this.getDataList()
@@ -278,18 +183,18 @@ export default {
         this.list = arr?.filter((item) => item.title.indexOf(this.searchKey) !== -1)
       }
     },
-    catalogManage () {
+    catalogManage() {
       this.$refs.CatalogEditForm.formVisible = true
     },
     // 获取分组列表
-    getCatalogList () {
+    getCatalogList() {
       this.$dataRoomAxios.get(`/bigScreen/type/list/${this.catalogType}`)
         .then((data) => {
           this.catalogList = data
         })
-        .catch(() => {})
+        .catch(() => { })
     },
-    getDataList () {
+    getDataList() {
       this.loading = true
       if (this.catalogInfo === 'component') {
         this.$dataRoomAxios.get('/bigScreen/design/page', {
@@ -323,7 +228,7 @@ export default {
           })
       }
     },
-    preview (screen) {
+    preview(screen) {
       let path = ''
       let query = {
         code: screen.code
@@ -344,7 +249,7 @@ export default {
       })
       window.open(href, '_blank')
     },
-    design (screen) {
+    design(screen) {
       const path = this.catalogInfo === 'component' ? (window.BS_CONFIG?.routers?.designUrl || '/big-screen/design') : (window.BS_CONFIG?.routers?.bizComponentDesignUrl || 'big-screen-biz-component-design')
       const { href } = this.$router.resolve({
         path,
@@ -354,17 +259,17 @@ export default {
       })
       window.open(href, '_self')
     },
-    add () {
+    add() {
       const page = {
         code: '',
         type: this.catalogInfo === 'component' ? 'bigScreen' : 'bizComponent'
       }
       this.$refs.EditForm.init(page, this.catalogCode)
     },
-    edit (screen) {
+    edit(screen) {
       this.$refs.EditForm.init(screen, this.catalogCode)
     },
-    del (screen) {
+    del(screen) {
       this.$confirm('确定删除该组件', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -390,7 +295,7 @@ export default {
         })
         .catch()
     },
-    copy (screen) {
+    copy(screen) {
       const url = this.catalogInfo === 'component' ? `/bigScreen/design/copy/${screen.code}` : `/bigScreen/bizComponent/copy/${screen.code}`
       this.$confirm('确定复制该组件', '提示', {
         confirmButtonText: '确定',
@@ -424,7 +329,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '../assets/style/bsTheme.scss';
+
 .big-screen-list-wrap {
+  .el-select {
+    display: inline-block !important;
+    position: relative !important;
+    width: auto !important;
+  }
+
   position: relative;
   height: 100%;
   // padding: 16px;
@@ -432,10 +344,12 @@ export default {
   margin-left: 16px;
   color: #9ea9b2;
   background-color: var(--bs-background-2) !important;
-  .internal-box{
+
+  .internal-box {
     height: calc(100% - 32px);
     padding: 16px;
   }
+
   .top-search-wrap {
     display: flex;
     align-items: center;
@@ -445,6 +359,7 @@ export default {
     .el-input {
       width: 200px;
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background-color: var(--bs-background-1) !important;
       }
@@ -452,6 +367,7 @@ export default {
 
     .el-select {
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background-color: var(--bs-background-1) !important;
       }
@@ -460,8 +376,8 @@ export default {
 
   .list-wrap {
     /* display: grid; */
-  overflow: auto;
-  padding-right: 5px;
+    overflow: auto;
+    padding-right: 5px;
     // 间隙自适应
     justify-content: space-around;
     // max-height: calc(100vh - 304px);
@@ -503,6 +419,7 @@ export default {
         height: 0;
         transition: height 0.4s;
         background: #00000099;
+
         .screen-card__hover-box {
           position: absolute;
           width: 100%;
@@ -513,6 +430,7 @@ export default {
           align-items: center;
           justify-content: center;
         }
+
         .preview {
           display: flex;
           flex-direction: row;
@@ -552,6 +470,7 @@ export default {
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
         border: 1px solid var(--bs-background-1);
+
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -580,6 +499,7 @@ export default {
             align-items: center;
             justify-content: center;
           }
+
           ::v-deep.el-image__error {
             background-color: #1d1d1d;
           }
@@ -648,14 +568,16 @@ export default {
     right: 12px;
     // padding: 0 16px;
   }
-  .error-img-text{
-    overflow:hidden;
-    padding:0 10px;
+
+  .error-img-text {
+    overflow: hidden;
+    padding: 0 10px;
     white-space: nowrap;
     text-overflow: ellipsis;
-    -o-text-overflow:ellipsis;
+    -o-text-overflow: ellipsis;
   }
 }
+
 .bs-pagination {
   ::v-deep .el-input__inner {
     width: 110px !important;
diff --git a/data-room-ui/packages/SourceList/index.vue b/data-room-ui/packages/SourceList/index.vue
index 290c1da1..a2cd331b 100644
--- a/data-room-ui/packages/SourceList/index.vue
+++ b/data-room-ui/packages/SourceList/index.vue
@@ -181,7 +181,7 @@ export default {
     },
     catalogInfo: {
       type: Object,
-      default: () => {}
+      default: () => { }
     }
   },
   components: { EditForm },
@@ -328,7 +328,14 @@ export default {
 
 <style lang="scss" scoped>
 @import '../assets/style/bsTheme.scss';
+
 .big-screen-list-wrap {
+  .el-select {
+    display: inline-block !important;
+    position: relative !important;
+    width: auto !important;
+  }
+
   position: relative;
   height: calc(100%);
   // height: calc(100% - 16px);
@@ -337,10 +344,12 @@ export default {
   // margin:0 16px;
   margin-left: 16px;
   background-color: var(--bs-background-2) !important;
-  .internal-box{
+
+  .internal-box {
     height: calc(100% - 32px);
     padding: 16px;
   }
+
   .top-search-wrap {
     display: flex;
     align-items: center;
@@ -350,6 +359,7 @@ export default {
     .el-input {
       width: 200px;
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background-color: var(--bs-background-1) !important;
       }
@@ -357,6 +367,7 @@ export default {
 
     .el-select {
       margin-right: 20px;
+
       ::v-deep.el-input__inner {
         background-color: var(--bs-background-1) !important;
       }
@@ -408,6 +419,7 @@ export default {
         height: 0;
         transition: height 0.4s;
         background: #00000099;
+
         .screen-card__hover-box {
           position: absolute;
           width: 100%;
@@ -418,6 +430,7 @@ export default {
           align-items: center;
           justify-content: center;
         }
+
         .preview {
           display: flex;
           flex-direction: row;
@@ -457,6 +470,7 @@ export default {
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
         color: var(--bs-el-title);
         border: 1px solid var(--bs-background-1);
+
         &:hover {
           color: var(--bs-el-text);
           border: 1px solid var(--bs-el-color-primary);
@@ -485,6 +499,7 @@ export default {
             align-items: center;
             justify-content: center;
           }
+
           ::v-deep.el-image__error {
             background-color: #1d1d1d;
           }
@@ -553,6 +568,7 @@ export default {
     // padding: 0 16px;
   }
 }
+
 .bs-pagination {
   ::v-deep .el-input__inner {
     width: 110px !important;
@@ -560,6 +576,7 @@ export default {
     background: var(--bs-el-background-1);
   }
 }
+
 .empty {
   width: 100%;
   height: 70%;
diff --git a/data-room-ui/packages/assets/style/bsTheme.scss b/data-room-ui/packages/assets/style/bsTheme.scss
index 5af869e4..c70888a5 100644
--- a/data-room-ui/packages/assets/style/bsTheme.scss
+++ b/data-room-ui/packages/assets/style/bsTheme.scss
@@ -232,6 +232,7 @@
 
   .el-dialog__footer {
     background: var(--bs-background-2) !important;
+    background-color: var(--bs-background-2) !important;
   }
 
   ::v-deep .el-dialog__body {
diff --git a/data-room-ui/packages/assets/style/common/index.scss b/data-room-ui/packages/assets/style/common/index.scss
index 09764f41..b2774364 100644
--- a/data-room-ui/packages/assets/style/common/index.scss
+++ b/data-room-ui/packages/assets/style/common/index.scss
@@ -264,17 +264,21 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
     // dialog设置
     .bs-dialog-wrap {
+      .el-select{
+        display: inline-block !important;
+        position: relative !important;
+        width: auto !important;
+      }
+      .el-dialog{
+        margin-top: 13vh !important;
+      }
       .el-dialog__wrapper {
         overflow: hidden !important;
       }
 
-      // .el-dialog {
-      //   margin-bottom: 100px !important;
-      // }
-
       .el-dialog__body {
         padding: 18px 24px !important;
-        max-height: calc(90vh - 200px) !important;
+        max-height: calc(90vh - 250px) !important;
         min-height: 200px;
         overflow-y: auto;
       }
diff --git a/data-room-ui/packages/assets/style/settingWrap.scss b/data-room-ui/packages/assets/style/settingWrap.scss
index 671e61fc..94aa8bb0 100644
--- a/data-room-ui/packages/assets/style/settingWrap.scss
+++ b/data-room-ui/packages/assets/style/settingWrap.scss
@@ -26,7 +26,7 @@
     }
   }
 }
-.bs-setting-wrap{
+.bs-setting-wrap {
   position: relative;
   height: 100%;
 
@@ -36,15 +36,14 @@
   ::v-deep .el-collapse-item__wrap {
     border: none !important;
   }
-
   /*overflow-y: auto;*/
-.table-header{
-  border-bottom: 2px solid var(--bs-el-color-primary);
-}
+  .table-header {
+    border-bottom: 2px solid var(--bs-el-color-primary);
+  }
   ::v-deep .el-form-item {
     margin-bottom: 6px;
   }
-  .toolbar{
+  .toolbar {
     width: 320px;
     height: 50px;
     bottom: 0;
@@ -56,15 +55,15 @@
     justify-content: center;
     background: var(--bs-background-1);
 
-    .el-button{
+    .el-button {
       margin-right: 10px;
     }
   }
-  ::v-deep .CodeMirror{
-    height: 150px!important;
+  ::v-deep .CodeMirror {
+    height: 150px !important;
   }
- ::v-deep .CodeMirror-scroll{
-    height: 150px!important;
+  ::v-deep .CodeMirror-scroll {
+    height: 150px !important;
   }
 }
 ::v-deep .el-tabs__nav-scroll {
@@ -80,11 +79,11 @@
   background: var(--bs-background-2);
   height: 32px;
   padding: 0 12px;
-  border:none
+  border: none;
 }
 
 ::v-deep .el-collapse-item__content {
-  padding-bottom: 0
+  padding-bottom: 0;
 }
 
 ::v-deep .lc-field-title {
@@ -95,14 +94,14 @@
   padding: 12px;
   background: var(--bs-background-2);
 
-  input, textarea {
+  input,
+  textarea {
     background-color: var(--bs-el-background-1) !important;
     color: var(--bs-el-text) !important;
     border-color: var(--bs-el-text) !important;
   }
-
 }
-.data-form-item{
+.data-form-item {
   padding: 12px;
 }
 
@@ -120,10 +119,10 @@
   height: 0;
 }
 
-  .design-tab-warp{
-    padding: 10px;
-  }
-::v-deep.el-tabs--top{
+.design-tab-warp {
+  padding: 10px;
+}
+::v-deep.el-tabs--top {
   height: 100%;
 }
 ::v-deep .el-tabs__content {
@@ -155,15 +154,15 @@
   font-size: 12px;
 }
 
-.setting-body{
+.setting-body {
   height: 100%;
 }
-.el-icon-circle-plus-outline{
-  &:hover{
+.el-icon-circle-plus-outline {
+  &:hover {
     cursor: pointer;
   }
 }
-.analysisSql-box{
+.analysisSql-box {
   text-align: right;
 }
 
@@ -172,21 +171,21 @@
 }
 
 // 筛选条件的按钮样式
-.add-filter-box{
+.add-filter-box {
   position: relative;
-  .add-filter{
+  .add-filter {
     margin-left: 80px;
     margin-bottom: 10px;
   }
-  .add-filter-btn{
+  .add-filter-btn {
     position: absolute;
     top: 0;
   }
 }
-.source-key-option{
+.source-key-option {
   display: flex;
   justify-content: space-between;
-  .option-txt{
+  .option-txt {
     color: rgb(132, 146, 166);
   }
 }
@@ -202,52 +201,46 @@
 }
 
 // 参数配置
-.params-config{
-  ::v-deep .el-form-item__content{
-    display:flex;
+.params-config {
+  ::v-deep .el-form-item__content {
+    display: flex;
     align-items: center;
     margin-left: 0 !important;
   }
-  .el-tooltip{
+  .el-tooltip {
     margin-left: 4px;
   }
 }
 ::v-deep .el-form-item__label,
 ::v-deep .el-tabs__item,
-::v-deep .el-collapse-item__arrow
-{
-  color: var(--bs-el-title) !important
+::v-deep .el-collapse-item__arrow {
+  color: var(--bs-el-title) !important;
 }
 ::v-deep .el-collapse-item__wrap {
   background: var(--bs-background-1);
   color: var(--bs-el-title);
 }
 
-
 ::v-deep .el-input__inner,
 ::v-deep .el-color-picker__color-inner,
 ::v-deep .el-radio__inner,
 ::v-deep .el-input-number--mini,
 ::v-deep .el-textarea__inner,
-::v-deep .el-input-group__append
-{
+::v-deep .el-input-group__append {
   background: var(--bs-el-background-1);
   color: var(--bs-el-text);
   border: 0 !important;
 }
 
-::v-deep .el-radio__label
-{
+::v-deep .el-radio__label {
   font-size: 12px;
   background: var(--bs-el-background-1-1);
   color: var(--bs-el-title);
   border: 0 !important;
 }
 
-
-
 ::v-deep .el-radio {
-  margin-right: 10px
+  margin-right: 10px;
 }
 
 ::v-deep .el-table {
@@ -261,3 +254,8 @@
   border-color: var(--bs-el-text) !important;
 }
 
+::v-deep .el-select {
+  display: inline-block;
+  position: relative;
+  width: auto;
+}