From 233c7906ad16419713ab5035f7a825855b3b616a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 18 Jul 2025 14:19:22 +0800
Subject: [PATCH] refactor: dashboard canvas edit update

---
 frontend/src/views/dashboard/canvas/CanvasCore.vue   |  6 ++++--
 frontend/src/views/dashboard/canvas/CanvasShape.vue  | 12 +++++++++---
 frontend/src/views/dashboard/common/SQFullscreen.vue |  5 ++---
 frontend/src/views/dashboard/editor/Toolbar.vue      |  1 +
 frontend/src/views/dashboard/utils/canvasUtils.ts    |  4 ++++
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/dashboard/canvas/CanvasCore.vue b/frontend/src/views/dashboard/canvas/CanvasCore.vue
index 3f7eeee1..cd43be39 100644
--- a/frontend/src/views/dashboard/canvas/CanvasCore.vue
+++ b/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,7 +1179,7 @@ defineExpose({
     @mousemove="moving()"
   >
     <EmptyBackground
-      v-if="!canvasComponentData.length"
+      v-if="!canvasComponentData.length && isMainCanvas(canvasId)"
       :description="t('dashboard.add_component_tips')"
       img-type="selectDashboard"
     />
@@ -1186,6 +1187,7 @@ defineExpose({
       <CanvasShape
         v-for="(item, index) in canvasComponentData"
         :key="'item' + index"
+        :can-edit="!fullscreenFlag"
         :active="curComponentId === item.id"
         :config-item="item"
         :draggable="draggable"
diff --git a/frontend/src/views/dashboard/canvas/CanvasShape.vue b/frontend/src/views/dashboard/canvas/CanvasShape.vue
index 00096a7a..b7d47892 100644
--- a/frontend/src/views/dashboard/canvas/CanvasShape.vue
+++ b/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)
       "
diff --git a/frontend/src/views/dashboard/common/SQFullscreen.vue b/frontend/src/views/dashboard/common/SQFullscreen.vue
index 0b3f9635..83f94457 100644
--- a/frontend/src/views/dashboard/common/SQFullscreen.vue
+++ b/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()
   }
diff --git a/frontend/src/views/dashboard/editor/Toolbar.vue b/frontend/src/views/dashboard/editor/Toolbar.vue
index fe4e774d..a42b4434 100644
--- a/frontend/src/views/dashboard/editor/Toolbar.vue
+++ b/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()
   }
 }
diff --git a/frontend/src/views/dashboard/utils/canvasUtils.ts b/frontend/src/views/dashboard/utils/canvasUtils.ts
index 5dbeb7f8..97806d85 100644
--- a/frontend/src/views/dashboard/utils/canvasUtils.ts
+++ b/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)