refactor: dashboard view

Author: ziyujiahao

backend/alembic/versions/941e2355a94d_011_update_dashboard.py

@@ -18,11 +18,11 @@
 
 
 def upgrade():
-    op.add_column('core_dashboard', sa.Column('canvas_views', sa.Text(), nullable=True))
+    op.add_column('core_dashboard', sa.Column('canvas_view_info', sa.Text(), nullable=True))
     # ### end Alembic commands ###
 
 
 def downgrade():
     # ### commands auto generated by Alembic - please adjust! ###
-    op.drop_column('core_dashboard', 'canvas_views')
+    op.drop_column('core_dashboard', 'canvas_view_info')
     # ### end Alembic commands ###

backend/apps/dashboard/crud/dashboard_service.py

@@ -71,7 +71,7 @@ def create_canvas(session: SessionDep, user: CurrentUser, dashboard: CreateDashb
     record.node_type = dashboard.node_type
     record.component_data = dashboard.component_data
     record.canvas_style_data = dashboard.canvas_style_data
-    record.canvas_views = dashboard.canvas_views
+    record.canvas_view_info = dashboard.canvas_view_info
     session.add(record)
     session.flush()
     session.refresh(record)
@@ -86,7 +86,7 @@ def update_canvas(session: SessionDep, user: CurrentUser, dashboard: CreateDashb
     record.update_time = int(time.time())
     record.component_data = dashboard.component_data
     record.canvas_style_data = dashboard.canvas_style_data
-    record.canvas_views = dashboard.canvas_views
+    record.canvas_view_info = dashboard.canvas_view_info
     session.add(record)
     session.commit()
     return record

backend/apps/dashboard/models/dashboard_model.py

@@ -50,7 +50,7 @@ class CoreDashboard(SQLModel, table=True):
         default=None,
         sa_column=Column(Text, nullable=True)
     )
-    canvas_views: str = Field(
+    canvas_view_info: str = Field(
         default=None,
         sa_column=Column(Text, nullable=True)
     )
@@ -160,5 +160,5 @@ class QueryDashboard(BaseDashboard):
 class CreateDashboard(QueryDashboard):
     canvas_style_data: str =''
     component_data: str = ''
-    canvas_views: str = ''
+    canvas_view_info: str = ''
     description: str = ''

frontend/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@antv/g2": "^5.3.3",
     "@antv/s2": "^2.4.3",
+    "@eslint/js": "^9.28.0",
     "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
     "dayjs": "^1.11.13",
@@ -27,7 +28,8 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "snowflake-id": "^1.1.0",
-    "tinymce": "^5.8.2",
+    "tinymce": "^5.10.9",
+    "html2canvas": "^1.4.1",
     "vue": "^3.5.13",
     "vue-dompurify-html": "^5.3.0",
     "vue-i18n": "^9.14.4",

frontend/src/style.less

@@ -137,3 +137,11 @@ body {
   min-width: 780px !important;
   flex-wrap: wrap !important;
 }
+.clone_img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 100;
+}

frontend/src/utils/useEmitt.ts

@@ -41,9 +41,9 @@ export const useEmitt = (option?: Option) => {
  * Debounced event emitter
  * @param eventName - Name of the event to emit
  * @param params - Parameters to pass with the event
- * @param delay - Debounce delay in milliseconds (default: 300ms)
+ * @param delay - Debounce delay in milliseconds (default: 200ms)
  */
-export const useEmittLazy = (eventName: string, params: any = null, delay = 500) => {
+export const useEmittLazy = (eventName: string, params: any = null, delay = 150) => {
   // If there's already a pending execution, skip this call
   if (lazyDebounceMap.has(eventName)) {
     const entry = lazyDebounceMap.get(eventName)!

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

@@ -6,7 +6,8 @@ import { type CanvasCoord, type CanvasItem } from '@/utils/canvas.ts'
 import CanvasShape from './CanvasShape.vue'
 import { findComponent } from '@/views/dashboard/components/component-list.ts'
 import { storeToRefs } from 'pinia'
-import { useEmittLazy } from '@/utils/useEmitt.ts'
+import { useEmitt, useEmittLazy } from '@/utils/useEmitt.ts'
+import html2canvas from 'html2canvas'
 
 const dashboardStore = dashboardStoreWithOut()
 const canvasLocked = ref(false) // Is the canvas movement locked， Default false
@@ -815,7 +816,6 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
     infoBox.value.moveItem = item
     infoBox.value.moveItemIndex = index
   }
-
   infoBox.value.cloneItem = null
   infoBox.value.nowItemNode = null
   // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -829,6 +829,15 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
     infoBox.value.cloneItem = infoBox.value.nowItemNode.cloneNode(true)
   }
   infoBox.value.cloneItem.classList.add('cloneNode')
+  const img = new Image()
+  img.classList.add('clone_img')
+  const clonedSlot = infoBox.value.nowItemNode.querySelector('.slot-component')
+
+  html2canvas(clonedSlot).then((canvas) => {
+    img.src = canvas.toDataURL()
+    infoBox.value.cloneItem.appendChild(img)
+  })
+
   if (containerRef.value) {
     containerRef.value.append(infoBox.value.cloneItem)
   }
@@ -1130,6 +1139,11 @@ function tabMoveInCheckSQ() {
   }
 }
 
+useEmitt({
+  name: `editor-delete-${props.canvasId}`,
+  callback: removeItemById,
+})
+
 onMounted(() => {
   currentInstance = getCurrentInstance()
 })
@@ -1171,12 +1185,13 @@ defineExpose({
         :move-animate="moveAnimate"
         :start-move="startMove"
         :start-resize="startResize"
+        :canvas-id="canvasId"
         :style="nowItemStyle(item)"
       >
         <component
           :is="findComponent(item.component)"
           :ref="'shape_component_' + item.id"
-          class="sql-component dragHandle"
+          class="sql-component slot-component dragHandle"
           :config-item="item"
           :view-info="canvasViewInfo[item.id]"
           @parent-add-item-box="(subItem: any) => addItemBox(subItem)"

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

@@ -2,6 +2,8 @@
 import { type CanvasItem } from '@/utils/canvas.ts'
 import { ref, toRefs, type PropType } from 'vue'
 import ResizeHandle from '@/views/dashboard/canvas/ResizeHandle.vue'
+import DragHandle from '@/views/dashboard/canvas/DragHandle.vue'
+import ComponentBar from '@/views/dashboard/canvas/ComponentBar.vue'
 
 const shapeRef = ref(null)
 // Props
@@ -38,6 +40,10 @@ const props = defineProps({
       return {}
     },
   },
+  canvasId: {
+    type: String,
+    default: 'canvas-main',
+  },
 })
 
 const { draggable } = toRefs(props)
@@ -61,6 +67,13 @@ const shapeClick = (e: MouseEvent) => {
     @click="shapeClick"
     @mousedown="startMove($event, configItem, itemIndex)"
   >
+    <component-bar
+      :config-item="configItem"
+      :active="active"
+      :show-position="'canvas'"
+      :canvas-id="canvasId"
+    ></component-bar>
+    <drag-handle></drag-handle>
     <slot></slot>
     <resize-handle
       v-if="active"

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import icon_delete from '@/assets/svg/icon_delete.svg'
+import { Icon } from '@/components/icon-custom'
+import { useEmitt } from '@/utils/useEmitt.ts'
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  configItem: {
+    type: Object,
+    required: true,
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview',
+  },
+  canvasId: {
+    type: String,
+    default: 'canvas-main',
+  },
+})
+
+const { configItem } = toRefs(props)
+
+const doDeleteComponent = (e: MouseEvent) => {
+  e.stopPropagation()
+  e.preventDefault()
+  useEmitt().emitter.emit(`editor-delete-${props.canvasId}`, configItem.value.id)
+}
+</script>
+
+<template>
+  <div class="component-bar-main" :class="{ 'bar-hidden': !active }">
+    <div>
+      <el-icon class="handle-icon" @click="doDeleteComponent">
+        <Icon>
+          <icon_delete class="svg-icon"></icon_delete>
+        </Icon>
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.component-bar-main {
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: flex;
+  z-index: 5;
+  cursor: pointer !important;
+  .handle-icon {
+    color: #646a73;
+  }
+  &:hover {
+    background-color: #e8f0fe;
+    color: var(--el-color-primary);
+  }
+}
+
+.bar-hidden {
+  display: none;
+}
+</style>

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

@@ -60,7 +60,7 @@ const shadowStyle = (size: number, index: number) => {
 .dragHandle {
   background: #c1e2e8;
   position: absolute;
-  cursor: move;
+  cursor: move !important;
   z-index: 3;
 }
 </style>