refactor: dashboard canvas edit update

Author: ziyujiahao

frontend/src/views/dashboard/canvas/CanvasCore.vue

@@ -10,12 +10,13 @@ import { useEmitt, useEmittLazy } from '@/utils/useEmitt.ts'
 import html2canvas from 'html2canvas'
 import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import { useI18n } from 'vue-i18n'
+import { isMainCanvas } from '@/views/dashboard/utils/canvasUtils.ts'
 
 const { t } = useI18n()
 const dashboardStore = dashboardStoreWithOut()
 const canvasLocked = ref(false) // Is the canvas movement locked， Default false
 const emits = defineEmits(['parentAddItemBox'])
-const { curComponentId, curComponent } = storeToRefs(dashboardStore)
+const { curComponentId, curComponent, fullscreenFlag } = storeToRefs(dashboardStore)
 let currentInstance: any
 const props = defineProps({
   canvasId: {
@@ -1178,14 +1179,15 @@ defineExpose({
     @mousemove="moving()"
   >
     <EmptyBackground
-      v-if="!canvasComponentData.length"
+      v-if="!canvasComponentData.length && isMainCanvas(canvasId)"
       :description="t('dashboard.add_component_tips')"
       img-type="selectDashboard"
     />
     <template v-if="renderOk">
       <CanvasShape
         v-for="(item, index) in canvasComponentData"
         :key="'item' + index"
+        :can-edit="!fullscreenFlag"
         :active="curComponentId === item.id"
         :config-item="item"
         :draggable="draggable"

frontend/src/views/dashboard/canvas/CanvasShape.vue

@@ -12,6 +12,10 @@ const props = defineProps({
     type: Object as PropType<CanvasItem>,
     required: true,
   },
+  canEdit: {
+    type: Boolean,
+    default: true,
+  },
   active: {
     type: Boolean,
     default: false,
@@ -69,14 +73,16 @@ const shapeClick = (e: MouseEvent) => {
   >
     <component-bar
       :config-item="configItem"
-      :active="active"
+      :active="active && canEdit"
       :show-position="'canvas'"
       :canvas-id="canvasId"
     ></component-bar>
-    <drag-handle></drag-handle>
+    <template v-if="canEdit">
+      <drag-handle></drag-handle>
+    </template>
     <slot></slot>
     <resize-handle
-      v-if="active"
+      v-if="active && canEdit"
       :start-resize="
         (event: MouseEvent, point: string) => startResize(event, point, configItem, itemIndex)
       "

frontend/src/views/dashboard/common/SQFullscreen.vue

@@ -2,7 +2,7 @@
 import { dashboardStoreWithOut } from '@/stores/dashboard/dashboard.ts'
 
 const dashboardStore = dashboardStoreWithOut()
-import { nextTick, onBeforeUnmount, onMounted } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { useEmitt } from '@/utils/useEmitt.ts'
 defineProps({
   themes: {
@@ -37,8 +37,7 @@ const toggleFullscreen = () => {
   }
 }
 
-// 针对钉钉windows版无法退出全屏问题 这里主动退出
-const handleKeydown = (event) => {
+const handleKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Escape' && document.fullscreenElement) {
     document.exitFullscreen()
   }

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -141,6 +141,7 @@ const addChatChart = (views: any) => {
 
 const previewInner = () => {
   if (fullScreeRef.value) {
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     fullScreeRef.value.toggleFullscreen()
   }
 }

frontend/src/views/dashboard/utils/canvasUtils.ts

@@ -34,6 +34,10 @@ export const load_resource_prepare = (params: any, callBack: (obj: any) => void)
     })
 }
 
+export const isMainCanvas = (canvasId: string) => {
+  return canvasId === 'canvas-main'
+}
+
 export const initCanvasData = (params: any, callBack: () => void) => {
   load_resource_prepare(params, function (result: any) {
     dashboardStore.setDashboardInfo(result?.dashboardInfo)