refactor: dashboard add item

Author: ziyujiahao

frontend/components.d.ts

@@ -8,32 +8,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     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/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.21",
+    "snowflake-id": "^1.1.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "web-storage-cache": "^1.1.1"

frontend/src/assets/svg/arrow-down.svg

@@ -4,7 +4,8 @@ import Layout from '@/components/layout/index.vue'
 import login from '@/views/login/index.vue'
 import chat from '@/views/chat/index.vue'
 import ds from '@/views/ds/index.vue'
-import DashboardEditor from '@/views/dashboard/DashboardEditor.vue'
+import DashboardEditor from '@/views/dashboard/editor/index.vue'
+import Dashboard from '@/views/dashboard/index.vue'
 import setting from '@/views/setting/index.vue'
 import { watchRouter } from './watch'
 const router = createRouter({
@@ -55,11 +56,24 @@ const router = createRouter({
         {
           path: 'index',
           name: 'dashboard',
-          component: DashboardEditor,
+          component: Dashboard,
           meta: { title: 'Dashboard', icon: 'dashboard' }
         }
       ]
     },
+    {
+      path: '/dashboard-edit',
+      redirect: '/dashboard-edit/index',
+      component: Layout,
+      children: [
+        {
+          path: 'index',
+          name: 'dashboard-edit',
+          component: DashboardEditor,
+          meta: { title: 'dashboard-edit', icon: 'dashboard' }
+        }
+      ]
+    },
     {
       path: '/setting',
       component: Layout,

frontend/src/assets/svg/common-back.svg

@@ -4,7 +4,19 @@ import {store} from "@/stores";
 export const dashboardStore = defineStore('dashboard', {
     state: () => {
         return {
-            curComponent: null
+            curComponent: null,
+            canvasStyle: {},
+            componentData: [],
+            dashboardInfo: {
+                id: null,
+                name: 'New Dashboard',
+                pid: null,
+                dataState: null,
+                optType: null,
+                status: null,
+                type: null,
+                mobileLayout: false
+            }
         }
     },
     getters: {
@@ -15,7 +27,14 @@ export const dashboardStore = defineStore('dashboard', {
     actions: {
         setCurComponent(value: any) {
             this.curComponent = value
+        },
+        setComponentData(value: any) {
+            this.componentData = value
+        },
+        setCanvasStyle(value: any) {
+            this.canvasStyle = value
         }
+
     }
 })
 

frontend/src/assets/svg/dv-tab.svg

@@ -0,0 +1,49 @@
+ // @ts-ignore
+import SnowflakeID from 'snowflake-id';
+
+const snowflake = new SnowflakeID({
+  mid: 42,
+  offset: (2010 - 1970) * 365 * 24 * 3600 * 1000
+});
+
+export const guid = () => {
+  return  snowflake.generate();
+}
+
+export interface CanvasItem {
+    _dragId: string | number
+    x: number
+    y: number
+    sizeX: number
+    sizeY: number
+    [key: string]: any
+}
+
+
+export type CanvasCoord = {
+    x1: number
+    y1: number
+    x2: number
+    y2: number
+    c1: number
+    c2: number
+    el: {
+        x: number
+        y: number
+        sizeX: number
+        sizeY: number
+        _dragId: string | number
+        [key: string]: any
+    }
+}
+
+export type DashboardInfo = {
+    dataState: string,
+    optType: string,
+    id: number,
+    name: string,
+    pid: number,
+    status: number,
+    type: string,
+    mobileLayout: boolean,
+}