feat:修改设计页面样式以及退出新增确认弹框

data-room-ui/packages/BigScreenDesign/CloseDialog/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dialog
+    title="提示"
+    :visible.sync="backDialog"
+    width="40%"
+    :modal="true"
+    :modal-append-to-body="false"
+    :appen-to-body="true"
+    class="bs-dialog-wrap bs-el-dialog"
+  >
+  <span style="color:#fff">确定返回主页面吗？未保存的配置将会丢失!</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="backDialog = false">留在页面</el-button>
+    <el-button @click="goBack">离开页面</el-button>
+    <el-button type="primary" @click="goBackSave">保存后离开页面</el-button>
+  </span>
+  </el-dialog>
+</template>
+<script>
+import { pageMixins } from 'data-room-ui/js/mixins/page'
+export default {
+  name: 'ComponentDialog',
+  mixins: [pageMixins],
+  props: {},
+  data () {
+    return {
+      backDialog: false
+    }
+  },
+  computed: {},
+  mounted () {},
+  methods: {
+    init () {
+      this.backDialog = true
+    },
+    // 点击确定
+    confirm () {
+      this.backDialog = false
+    },
+    goBack(){
+      this.$emit('back')
+    },
+    goBackSave(){
+     this.$emit('backSave')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/bsTheme.scss';
+/deep/.el-dialog__body{
+  min-height: 100px !important;
+}
+</style>

data-room-ui/packages/BigScreenDesign/LeftPanel.vue

@@ -563,6 +563,7 @@ export default {
           display: block;
           width: 100%;
           font-size: 12px;
+          text-align: center;
         }
       }
     }

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -5,11 +5,13 @@
         class="menu-img"
         src="../BigScreenDesign/images/app.png"
         alt="返回"
-        @click="backManagement"
+        @click="goBackManage"
       >
       <span class="logo-text name-span">{{ pageInfo.name }}</span>
     </div>
     <div class="head-btn-group">
+      <span style="margin-right:8px;font-size:12px">缩放比例</span>
+      <el-input-number style="margin-right:20px" :value="zoom" @change="changeZoom" :min="1" :max="100" label="描述文字"></el-input-number>
       <el-dropdown
         trigger="click"
         class="align-list-dropdown"
@@ -96,6 +98,7 @@
       :page-info="pageInfo"
       @replaceItByTemplate="replaceItByTemplate"
     />
+    <CloseDialog ref="CloseDialog" @back="backManagement" @backSave="backSave" />
     <AssignDialog ref="AssignDialog" />
     <HistoryList ref="HistoryList" />
   </div>
@@ -111,6 +114,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import uniqBy from 'lodash/uniqBy'
 import { stringifyObjectFunctions } from 'data-room-ui/js/utils/evalFunctions'
 import AssignDialog from 'data-room-ui/BigScreenDesign/AssignDialog/index.vue'
+import CloseDialog from 'data-room-ui/BigScreenDesign/CloseDialog/index.vue'
 import HistoryList from 'data-room-ui/BigScreenDesign/HistoryList/index.vue'
 import CusBtn from './BtnLoading'
 import icons from 'data-room-ui/assets/images/alignIcon/export'
@@ -129,7 +133,8 @@ export default {
     ChooseTemplateDialog,
     AssignDialog,
     CusBtn,
-    HistoryList
+    HistoryList,
+    CloseDialog
   },
   props: {
     code: {
@@ -189,7 +194,8 @@ export default {
       pageInfo: (state) => state.bigScreen.pageInfo,
       timelineStore: (state) => state.bigScreen.timelineStore,
       currentTimeLine: (state) => state.bigScreen.currentTimeLine,
-      activeCodes: state => state.bigScreen.activeCodes
+      activeCodes: state => state.bigScreen.activeCodes,
+      zoom: (state) => state.bigScreen.zoom,
     }),
     pageCode () {
       return this.$route.query.code || this.code
@@ -218,6 +224,10 @@ export default {
       undoTimeLine: 'bigScreen/undoTimeLine',
       saveTimeLine: 'bigScreen/saveTimeLine'
     }),
+    changeZoom(val){
+      this.$emit('changeZoom', val)
+      // console.log(val)
+    },
     // 切换主题
     changeTheme (val) {
       // 调取每个组件内部切换主题的方法
@@ -323,6 +333,13 @@ export default {
         return value1 - value2 // 升序
       }
     },
+    goBackManage(){
+      this.$refs.CloseDialog.init()
+    },
+    async backSave(){
+      await this.save()
+      this.backManagement()
+    },
     backManagement () {
       this.$router.push({ path: this.pageInfo.type === 'component' ? (window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components') : (window.BS_CONFIG?.routers?.pageManagementUrl || '/home') })
       const data = { componentsManagementType: 'component' }
@@ -616,4 +633,13 @@ export default {
   }
 
 }
+::v-deep .el-input__inner,
+::v-deep .el-color-picker__color-inner,
+::v-deep .el-input-number--mini,
+::v-deep .el-textarea__inner,
+::v-deep .el-input-group__append {
+  background: var(--bs-el-background-1);
+  color: var(--bs-el-text);
+  border: 0 !important;
+}
 </style>

data-room-ui/packages/BigScreenDesign/RulerTool/SketchRuler.vue

@@ -191,7 +191,7 @@ export default {
         }
 
         // 30是grid-wrap-box的底部工具栏高度
-        this.innerHeight = screensRect.height - 30
+        this.innerHeight = screensRect.height
         this.innerWidth = screensRect.width
         this.diffX = this.width - screensRect.width
         this.diffY = this.height - screensRect.height

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

@@ -10,6 +10,7 @@
       @updateRightVisiable="updateRightVisiable"
       @showPageInfo="showPageInfo"
       @updateTheme="updateTheme"
+      @changeZoom="changeScreenZoom"
       @empty="empty"
     />
     <div class="drag-wrap">
@@ -54,7 +55,7 @@
             />
           </MouseSelect>
         </SketchDesignRuler>
-        <div class="footer-tools-bar">
+        <!-- <div class="footer-tools-bar">
           <el-slider
             class="bs-slider-wrap"
             :value="zoom"
@@ -76,7 +77,7 @@
               :value="zoom.value"
             />
           </el-select>
-        </div>
+        </div> -->
       </div>
       <!-- 右侧折叠设置面板   -->
       <SettingPanel