diff --git a/frontend/components.d.ts b/frontend/components.d.ts index a036034d..933af49f 100644 --- a/frontend/components.d.ts +++ b/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'] diff --git a/frontend/package.json b/frontend/package.json index ad54c7df..4ee98c4a 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/assets/svg/arrow-down.svg b/frontend/src/assets/svg/arrow-down.svg new file mode 100644 index 00000000..53c2220e --- /dev/null +++ b/frontend/src/assets/svg/arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/svg/common-back.svg b/frontend/src/assets/svg/common-back.svg new file mode 100644 index 00000000..88339b6c --- /dev/null +++ b/frontend/src/assets/svg/common-back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/svg/dv-tab.svg b/frontend/src/assets/svg/dv-tab.svg new file mode 100644 index 00000000..5625982e --- /dev/null +++ b/frontend/src/assets/svg/dv-tab.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/svg/dv-text.svg b/frontend/src/assets/svg/dv-text.svg new file mode 100644 index 00000000..ff6d406b --- /dev/null +++ b/frontend/src/assets/svg/dv-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/svg/dv-view.svg b/frontend/src/assets/svg/dv-view.svg new file mode 100644 index 00000000..19093125 --- /dev/null +++ b/frontend/src/assets/svg/dv-view.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index 3c98ed22..8838ce4b 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -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, diff --git a/frontend/src/stores/dashboard/dashboard.ts b/frontend/src/stores/dashboard/dashboard.ts index 15f37dd1..8ada9869 100644 --- a/frontend/src/stores/dashboard/dashboard.ts +++ b/frontend/src/stores/dashboard/dashboard.ts @@ -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 } + } }) diff --git a/frontend/src/utils/canvas.ts b/frontend/src/utils/canvas.ts new file mode 100644 index 00000000..058ee9e1 --- /dev/null +++ b/frontend/src/utils/canvas.ts @@ -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, +} \ No newline at end of file diff --git a/frontend/src/views/dashboard/DashboardEditor.vue b/frontend/src/views/dashboard/DashboardEditor.vue index 642e9f89..87d69bb4 100644 --- a/frontend/src/views/dashboard/DashboardEditor.vue +++ b/frontend/src/views/dashboard/DashboardEditor.vue @@ -1,5 +1,5 @@ diff --git a/frontend/src/views/dashboard/canvas/DsCanvasCore.vue b/frontend/src/views/dashboard/canvas/CanvasCore.vue similarity index 96% rename from frontend/src/views/dashboard/canvas/DsCanvasCore.vue rename to frontend/src/views/dashboard/canvas/CanvasCore.vue index e9b3e2bd..955f2bf5 100644 --- a/frontend/src/views/dashboard/canvas/DsCanvasCore.vue +++ b/frontend/src/views/dashboard/canvas/CanvasCore.vue @@ -2,8 +2,9 @@ import {ref, nextTick, toRefs, type PropType} from 'vue' import _ from 'lodash' import {dashboardStoreWithOut} from '@/stores/dashboard/dashboard' -import {type CanvasCoord, type CanvasItem} from '../utils/CanvasUtils' +import {type CanvasCoord, type CanvasItem} from '@/utils/canvas.ts' import CanvasShape from './CanvasShape.vue' +import {findComponent} from "@/views/dashboard/components/component-list.ts"; const dashboardStore = dashboardStoreWithOut() @@ -218,9 +219,19 @@ function recomputeCellWidth() { maxCell.value = Math.round(containerRef.value.offsetWidth / cellWidth.value) } -function init() { +function sizeInit() { + cellsInit() + recomputeCellWidth() + itemMaxX = maxCell.value +} + +function cellsInit() { cellWidth.value = baseWidth.value + baseMarginLeft.value cellHeight.value = baseHeight.value + baseMarginTop.value +} + +function init() { + cellsInit() positionBox.value = [] coordinates.value = [] @@ -790,7 +801,7 @@ function startMove(e: MouseEvent, item: CanvasItem, index: number) { moveYSize % cellHeight.value > cellHeight.value / 4 ? parseInt(String(moveYSize / cellHeight.value + 1)) : parseInt(String(moveYSize / cellHeight.value)) - // 根据坐标点 判断resize方向 + // Determine the resizing direction based on the coordinate points const { nowSizeX, nowSizeY, @@ -943,6 +954,7 @@ function moving() { defineExpose({ getRenderState, init, + sizeInit, afterInitOk, addItemBox, getMaxCell, @@ -959,14 +971,19 @@ defineExpose({ diff --git a/frontend/src/views/dashboard/canvas/CanvasShape.vue b/frontend/src/views/dashboard/canvas/CanvasShape.vue index 034e7b06..dce46a3e 100644 --- a/frontend/src/views/dashboard/canvas/CanvasShape.vue +++ b/frontend/src/views/dashboard/canvas/CanvasShape.vue @@ -1,104 +1,56 @@ \ No newline at end of file diff --git a/frontend/src/views/dashboard/canvas/ResizeHandle.vue b/frontend/src/views/dashboard/canvas/ResizeHandle.vue new file mode 100644 index 00000000..1988efdf --- /dev/null +++ b/frontend/src/views/dashboard/canvas/ResizeHandle.vue @@ -0,0 +1,69 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/components/button-label/ComponentButtonLabel.vue b/frontend/src/views/dashboard/components/button-label/ComponentButtonLabel.vue new file mode 100644 index 00000000..cfbb46a9 --- /dev/null +++ b/frontend/src/views/dashboard/components/button-label/ComponentButtonLabel.vue @@ -0,0 +1,77 @@ + + + + diff --git a/frontend/src/views/dashboard/components/component-list.ts b/frontend/src/views/dashboard/components/component-list.ts new file mode 100644 index 00000000..04230d36 --- /dev/null +++ b/frontend/src/views/dashboard/components/component-list.ts @@ -0,0 +1,67 @@ +import SQTab from '@/views/dashboard/components/sq-tab/index.vue' +import SQText from '@/views/dashboard/components/sq-text/index.vue' +import SQView from '@/views/dashboard/components/sq-view/index.vue' +import SQEmpty from '@/views/dashboard/components/sq-empty/index.vue' + +const COMPONENT_LIST = [ + { + id: 1001, + component: 'SQView', + name: 'new-view', + propValue: ' ', + icon: 'icon_graphical', + innerType: 'bar', + x: 1, + y: 1, + sizeX: 36, + sizeY: 14, + style: {} + }, + { + id: 1002, + component: 'SQTab', + name: 'new-tabs', + propValue: [ + { + name: 'tab', + title: 'new_tab', + componentData: [], + closable: true + } + ], + canvasActive: false, + x: 1, + y: 1, + sizeX: 36, + sizeY: 14, + style: {} + }, + { + id: 1003, + component: 'SQText', + name: 'new text', + propValue: ' ', + x: 1, + y: 1, + sizeX: 36, + sizeY: 14, + style: {} + } +] + +export function findNewComponentFromList(component: string) { + return COMPONENT_LIST.find(item => item.component === component) || null; +} + +export const componentsMap = { + SQTab: SQTab, + SQText: SQText, + SQView: SQView +} + +export function findComponent(key = 'SQEmpty') { + //@ts-ignore + return componentsMap[key] ? componentsMap[key] : SQEmpty +} + +export default COMPONENT_LIST diff --git a/frontend/src/views/dashboard/components/sq-empty/index.vue b/frontend/src/views/dashboard/components/sq-empty/index.vue new file mode 100644 index 00000000..363461c9 --- /dev/null +++ b/frontend/src/views/dashboard/components/sq-empty/index.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/components/sq-tab/CustomTab.vue b/frontend/src/views/dashboard/components/sq-tab/CustomTab.vue new file mode 100644 index 00000000..ee267b9b --- /dev/null +++ b/frontend/src/views/dashboard/components/sq-tab/CustomTab.vue @@ -0,0 +1,194 @@ + + + + + diff --git a/frontend/src/views/dashboard/components/sq-tab/index.vue b/frontend/src/views/dashboard/components/sq-tab/index.vue new file mode 100644 index 00000000..a3fb5505 --- /dev/null +++ b/frontend/src/views/dashboard/components/sq-tab/index.vue @@ -0,0 +1,167 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/components/sq-text/index.vue b/frontend/src/views/dashboard/components/sq-text/index.vue new file mode 100644 index 00000000..2f86b473 --- /dev/null +++ b/frontend/src/views/dashboard/components/sq-text/index.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/components/sq-view/index.vue b/frontend/src/views/dashboard/components/sq-view/index.vue new file mode 100644 index 00000000..2f86b473 --- /dev/null +++ b/frontend/src/views/dashboard/components/sq-view/index.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/css/CanvasStyle.less b/frontend/src/views/dashboard/css/CanvasStyle.less index c062b541..68076dce 100644 --- a/frontend/src/views/dashboard/css/CanvasStyle.less +++ b/frontend/src/views/dashboard/css/CanvasStyle.less @@ -2,6 +2,7 @@ { position: relative; user-select: none; + width: 100%; * { box-sizing: border-box; @@ -24,7 +25,7 @@ width: 8px; height: 8px; border-radius: 50%; - z-index: 0; + z-index: 5; } } .moveAnimation @@ -65,6 +66,9 @@ { display: none; } + .slot-component { + display: none; + } } .positionBox diff --git a/frontend/src/views/dashboard/editor/DashboardEditor.vue b/frontend/src/views/dashboard/editor/DashboardEditor.vue new file mode 100644 index 00000000..d2887aa5 --- /dev/null +++ b/frontend/src/views/dashboard/editor/DashboardEditor.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/frontend/src/views/dashboard/editor/Toolbar.vue b/frontend/src/views/dashboard/editor/Toolbar.vue new file mode 100644 index 00000000..aca51957 --- /dev/null +++ b/frontend/src/views/dashboard/editor/Toolbar.vue @@ -0,0 +1,68 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/editor/index.vue b/frontend/src/views/dashboard/editor/index.vue new file mode 100644 index 00000000..0fadf7b4 --- /dev/null +++ b/frontend/src/views/dashboard/editor/index.vue @@ -0,0 +1,34 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/preview/index.vue b/frontend/src/views/dashboard/preview/index.vue new file mode 100644 index 00000000..2f86b473 --- /dev/null +++ b/frontend/src/views/dashboard/preview/index.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/dashboard/utils/CanvasUtils.ts b/frontend/src/views/dashboard/utils/CanvasUtils.ts deleted file mode 100644 index 8db686e4..00000000 --- a/frontend/src/views/dashboard/utils/CanvasUtils.ts +++ /dev/null @@ -1,26 +0,0 @@ -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 - } -} \ No newline at end of file