refactor: dashboard rich text

Author: ziyujiahao

frontend/components.d.ts

@@ -13,6 +13,8 @@ declare module '@vue/runtime-core' {
     ElAvatar: typeof import('element-plus-secondary/es')['ElAvatar']
     ElButton: typeof import('element-plus-secondary/es')['ElButton']
     ElCheckbox: typeof import('element-plus-secondary/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus-secondary/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus-secondary/es')['ElCol']
     ElContainer: typeof import('element-plus-secondary/es')['ElContainer']
     ElDialog: typeof import('element-plus-secondary/es')['ElDialog']
     ElDivider: typeof import('element-plus-secondary/es')['ElDivider']
@@ -30,15 +32,21 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus-secondary/es')['ElMenuItem']
     ElOption: typeof import('element-plus-secondary/es')['ElOption']
     ElPagination: typeof import('element-plus-secondary/es')['ElPagination']
+    ElRadio: typeof import('element-plus-secondary/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus-secondary/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus-secondary/es')['ElRow']
     ElScrollbar: typeof import('element-plus-secondary/es')['ElScrollbar']
     ElSelect: typeof import('element-plus-secondary/es')['ElSelect']
     ElSlider: typeof import('element-plus-secondary/es')['ElSlider']
+    ElStep: typeof import('element-plus-secondary/es')['ElStep']
+    ElSteps: typeof import('element-plus-secondary/es')['ElSteps']
     ElSwitch: typeof import('element-plus-secondary/es')['ElSwitch']
     ElTable: typeof import('element-plus-secondary/es')['ElTable']
     ElTableColumn: typeof import('element-plus-secondary/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus-secondary/es')['ElTabPane']
     ElTabs: typeof import('element-plus-secondary/es')['ElTabs']
     ElTooltip: typeof import('element-plus-secondary/es')['ElTooltip']
+    ElUpload: typeof import('element-plus-secondary/es')['ElUpload']
     Icon: typeof import('./src/components/icon-custom/src/Icon.vue')['default']
     Layout: typeof import('./src/components/layout/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

frontend/src/stores/dashboard/dashboard.ts

@@ -7,6 +7,7 @@ export const dashboardStore = defineStore('dashboard', {
             tabCollisionActiveId: null,
             tabMoveInActiveId: null,
             curComponent: null,
+            curComponentId: null,
             canvasStyle: {},
             componentData: [],
             dashboardInfo: {
@@ -29,6 +30,7 @@ export const dashboardStore = defineStore('dashboard', {
     actions: {
         setCurComponent(value: any) {
             this.curComponent = value
+            this.curComponentId = value && value.id ? value.id : null
         },
         setComponentData(value: any) {
             this.componentData = value

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

@@ -5,10 +5,12 @@ import {dashboardStoreWithOut} from '@/stores/dashboard/dashboard'
 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";
 
 const dashboardStore = dashboardStoreWithOut()
 const canvasLocked = ref(false) // Is the canvas movement locked， Default false
 const emits = defineEmits(["parentAddItemBox"]);
+const {curComponentId, curComponent} = storeToRefs(dashboardStore)
 // @ts-ignore
 let currentInstance
 // Props
@@ -411,7 +413,7 @@ function getNextDragId() {
   if (validIds.length === 0) {
     return 0;
   }
- //@ts-ignore
+  //@ts-ignore
   const maxDragId = Math.max(...validIds);
   return maxDragId + 1;
 }
@@ -420,7 +422,7 @@ function addItem(item: CanvasItem, index: any) {
   if (index < 0) {
     index = canvasComponentData.value.length
   }
-  item._dragId = getNextDragId()
+  item._dragId = item.id || getNextDragId()
   checkItemPosition(item, {x: item.x, y: item.y})
   emptyTargetCell(item)
   addItemToPositionBox(item)
@@ -702,15 +704,23 @@ function startResize(e: MouseEvent, point: string, item: CanvasItem, index: numb
   infoBox.value.point = point
 }
 
+function containerClick() {
+  // remove current component info
+  dashboardStore.setCurComponent(null)
+}
+
 function containerMouseDown(e: MouseEvent) {
-  // e.preventDefault();
   if (!infoBox.value) {
     infoBox.value = {} // Reinitialize
   }
   infoBox.value.startX = e.pageX
   infoBox.value.startY = e.pageY
-  e.preventDefault()
-  e.stopPropagation()
+  // @ts-ignore
+  if (curComponent.value?.component !== 'SQText') {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
 }
 
 function getNowPosition(addSizeX: number, addSizeY: number, moveXSize: number, moveYSize: number) {
@@ -959,6 +969,7 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) {
     window.removeEventListener('mouseup', itemMouseUp)
   }
 
+  // This will prevent click events from being passed to the parent level
   window.addEventListener('mouseup', itemMouseUp)
 }
 
@@ -1147,10 +1158,12 @@ defineExpose({
 </script>
 
 <template>
-  <div class="dragAndResize" ref="containerRef" @mousedown="containerMouseDown($event)" @mouseup="endMove()"
+  <div class="dragAndResize" ref="containerRef" @click="containerClick" @mousedown="containerMouseDown($event)"
+       @mouseup="endMove()"
        @mousemove="moving()">
     <template v-if="renderOk">
       <CanvasShape v-for="(item, index) in canvasComponentData"
+                   :active="curComponentId === item.id"
                    :config-item="item"
                    :draggable="draggable"
                    :item-index="index"

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

@@ -10,6 +10,10 @@ const props = defineProps({
     type: Object as PropType<CanvasItem>,
     required: true
   },
+  active: {
+    type: Boolean,
+    default: false
+  },
   itemIndex: {
     type: Number,
     required: true
@@ -37,18 +41,23 @@ const props = defineProps({
 })
 
 const { draggable } = toRefs(props)
+const shapeClick = (e: MouseEvent) => {
+  e.stopPropagation()
+  e.preventDefault()
+}
 </script>
 
 <template>
   <div :class="{
         item: true,
+        itemActive: active,
         itemCursorDefault: configItem.component === 'SQTab',
         moveAnimation: moveAnimate,
         movingItem: configItem.isPlayer,
         canNotDrag: !draggable
-    }" @mousedown="startMove($event, configItem, itemIndex)" ref="shapeRef">
+    }" @click="shapeClick" @mousedown="startMove($event, configItem, itemIndex)" ref="shapeRef">
     <slot></slot>
-    <resize-handle
+    <resize-handle v-if="active"
         :start-resize="(event : MouseEvent, point: string) => startResize(event, point, configItem, itemIndex)">
     </resize-handle>
   </div>

frontend/src/views/dashboard/components/component-list.ts

@@ -12,6 +12,7 @@ const COMPONENT_LIST = [
         icon: 'icon_graphical',
         innerType: 'bar',
         locked: false,
+        editing: false,
         x: 1,
         y: 1,
         sizeX: 36,
@@ -36,6 +37,7 @@ const COMPONENT_LIST = [
             }
         ],
         canvasActive: false,
+        editing: false,
         x: 1,
         y: 1,
         sizeX: 36,
@@ -47,7 +49,8 @@ const COMPONENT_LIST = [
         component: 'SQText',
         name: 'new text',
         locked: false,
-        propValue: ' ',
+        propValue: 'Double click to edit text',
+        editing: false,
         x: 1,
         y: 1,
         sizeX: 36,

frontend/src/views/dashboard/components/sq-tab/index.vue

@@ -220,6 +220,7 @@ defineExpose({
   position: absolute;
   width: 100%;
   height: 100%;
+  margin: 2px!important;// border size
 }
 
 .tab-dashboard-editor-main{