refactor(仪表板): 清除联动按钮始终保持在右上方

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="bg" :style="customStyle" @scroll="canvasScroll">
+    <canvas-opt-bar />
     <div id="canvasInfoMain" ref="canvasInfoMain" :style="canvasInfoMainStyle">
       <el-row v-if="showUnpublishedArea" class="custom-position">
         <div style="text-align: center">
@@ -20,7 +21,6 @@
         @mouseup="deselectCurComponent"
         @mousedown="handleMouseDown"
       >
-        <canvas-opt-bar />
         <ComponentWrapper
           v-for="(item, index) in componentDataInfo"
           :key="index"

frontend/src/components/canvas/components/Editor/PreviewMobile.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="bg" :style="customStyle">
+    <canvas-opt-bar />
     <div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
       <div
         id="canvasInfoTemp"
@@ -12,7 +13,6 @@
         <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
           {{ $t('panel.panelNull') }}
         </el-row>
-        <canvas-opt-bar />
         <ComponentWrapper
           v-for="(item, index) in componentDataInfo"
           :key="index"

frontend/src/components/canvas/components/Editor/index.vue

@@ -16,9 +16,6 @@
     <!-- 网格线 -->
     <Grid v-if="showGrid" :matrix-style="matrixStyle" />
     <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
-
-    <!-- 仪表板联动清除按钮-->
-    <canvas-opt-bar />
     <!--页面组件列表展示-->
     <de-drag
       v-for="(item, index) in componentData"
@@ -203,7 +200,6 @@ import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
-import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import DragShadow from '@/components/DeDrag/shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/LinkJumpSet'
@@ -793,7 +789,6 @@ export default {
     DeDrag,
     UserViewDialog,
     DeOutWidget,
-    CanvasOptBar,
     DragShadow,
     LinkJumpSet
   },

frontend/src/views/panel/edit/index.vue

@@ -158,6 +158,8 @@
           @mouseup="deselectCurComponent"
           @scroll="canvasScroll"
         >
+          <!-- 仪表板联动清除按钮-->
+          <canvas-opt-bar />
           <Editor ref="canvasEditor" :matrix-count="pcMatrixCountBase" :out-style="outStyle" :scroll-top="scrollTop" />
         </div>
         <!--移动端画布区域 保持宽高比2.5-->
@@ -379,6 +381,8 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
 import ChartGroup from '@/views/chart/group/Group'
 import { chartCopy } from '@/api/chart/chart'
+import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+
 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
 import '@/components/canvas/styles/animate.css'
@@ -419,7 +423,8 @@ export default {
     AssistComponent,
     TextAttr,
     ChartGroup,
-    ChartEdit
+    ChartEdit,
+    CanvasOptBar
   },
   data() {
     return {