refactor: dashboard canvas edit update

This commit is contained in:
wangjiahao
2025-07-18 14:19:22 +08:00
parent b498355d44
commit 233c7906ad
5 changed files with 20 additions and 8 deletions
@@ -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"
@@ -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)
"
@@ -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()
}
@@ -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()
}
}
@@ -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)