refactor: update toolbar

Author: ziyujiahao

backend/apps/dashboard/api/dashboard_api.py

@@ -1,40 +1,48 @@
 from fastapi import APIRouter, File, UploadFile, HTTPException
 
 from apps.dashboard.crud.dashboard_service import list_resource, load_resource, \
-    create_resource, create_canvas, validate_name,delete_resource,update_resource
+    create_resource, create_canvas, validate_name, delete_resource, update_resource, update_canvas
 from apps.dashboard.models.dashboard_model import CreateDashboard, BaseDashboard, QueryDashboard
 from common.core.deps import SessionDep, CurrentUser
 
 router = APIRouter(tags=["dashboard"], prefix="/dashboard")
 
+
 @router.post("/list_resource")
-async def list_resource_api(session: SessionDep,dashboard: QueryDashboard):
-    return list_resource(session=session,dashboard=dashboard)
+async def list_resource_api(session: SessionDep, dashboard: QueryDashboard):
+    return list_resource(session=session, dashboard=dashboard)
+
 
 @router.post("/load_resource")
-async def load_resource_api(session: SessionDep,dashboard: QueryDashboard):
-    return load_resource(session=session,dashboard=dashboard)
+async def load_resource_api(session: SessionDep, dashboard: QueryDashboard):
+    return load_resource(session=session, dashboard=dashboard)
+
 
 @router.post("/create_resource", response_model=BaseDashboard)
 async def create_resource_api(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
     return create_resource(session, user, dashboard)
 
+
 @router.post("/update_resource", response_model=BaseDashboard)
 async def update_resource_api(session: SessionDep, user: CurrentUser, dashboard: QueryDashboard):
     return update_resource(session=session, user=user, dashboard=dashboard)
+
+
 @router.delete("/delete_resource/{resource_id}")
-async def delete_resource_api(session: SessionDep,resource_id:str):
-    return delete_resource(session,resource_id)
+async def delete_resource_api(session: SessionDep, resource_id: str):
+    return delete_resource(session, resource_id)
+
+
 @router.post("/create_canvas", response_model=BaseDashboard)
 async def create_canvas_api(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
     return create_canvas(session, user, dashboard)
 
+
 @router.post("/update_canvas", response_model=BaseDashboard)
 async def update_canvas_api(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
-    return
+    return update_canvas(session, user, dashboard)
+
 
 @router.post("/check_name")
 async def check_name_api(session: SessionDep, dashboard: QueryDashboard):
-    return validate_name(session,dashboard)
-
-
+    return validate_name(session, dashboard)

backend/apps/dashboard/crud/dashboard_service.py

@@ -69,6 +69,14 @@ def create_canvas(session: SessionDep, user: CurrentUser, dashboard: CreateDashb
 
 def update_canvas(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
     record = session.query(CoreDashboard).filter(CoreDashboard.id == dashboard.id).first()
+    record.name = dashboard.name
+    record.update_by = user.id
+    record.update_time = int(time.time())
+    record.component_data = dashboard.component_data
+    record.canvas_style_data = dashboard.canvas_style_data
+    session.add(record)
+    session.commit()
+    return record
 
 
 def validate_name(session: SessionDep, dashboard: QueryDashboard) -> bool:

frontend/src/i18n/zh-CN.json

@@ -9,7 +9,9 @@
     "back": "返回",
     "confirm": "确认",
     "cancel": "取消",
-    "system_manage": "系统管理"
+    "system_manage": "系统管理",
+    "update_success": "更新",
+    "save_success": "保存成功"
   },
   "dashboard": {
     "length_1_64_characters": "名称字段长度1-64个字符",

frontend/src/views/dashboard/common/ResourceTree.vue

@@ -178,7 +178,7 @@ function createNewObject() {
 
 // @ts-ignore
 const resourceEdit = resourceId => {
-
+  window.open(`#/canvas?resourceId=${resourceId}`, '_blank')
 }
 
 // @ts-ignore
@@ -249,7 +249,7 @@ const operation = (opt: string, data: SQTreeNode) => {
     })
   } else if (opt === 'rename') {
     //@ts-ignore
-    resourceGroupOptRef.value?.optInit({opt: 'rename',id: data.id,name:data.name})
+    resourceGroupOptRef.value?.optInit({opt: 'rename', id: data.id, name: data.name})
   }
 }
 

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -11,6 +11,8 @@ import {useI18n} from 'vue-i18n'
 import {snapshotStoreWithOut} from "@/stores/dashboard/snapshot.ts";
 import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
 import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
+import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import {saveDashboardResource} from "@/views/dashboard/utils/canvasUtils.ts";
 
 const {t} = useI18n()
 const dashboardStore = dashboardStoreWithOut()
@@ -43,6 +45,19 @@ const saveCanvasWithCheck = () => {
     }
     // @ts-ignore
     resourceGroupOptRef.value?.optInit(createParams)
+  } else if (dashboardInfo.value.id) {
+    const updateParams = {
+      opt: 'updateLeaf',
+      id: dashboardInfo.value.id,
+      name: dashboardInfo.value.name,
+      pid: dashboardInfo.value.pid
+    }
+    saveDashboardResource(updateParams, function () {
+      ElMessage({
+        type: 'success',
+        message: t('common.save_success'),
+      })
+    })
   }
 }
 
@@ -100,10 +115,28 @@ const redo = () => {
   }
 }
 
+
+const backToMain = () => {
+  let url = '#/dashboard/index'
+  if (dashboardInfo.value.id) {
+    url = url + '?resourceId=' + dashboardInfo.value.id
+  }
+  if (!!history.state.back) {
+    history.back()
+  } else {
+    window.open(url, '_self')
+  }
+}
+
 </script>
 
 <template>
   <div class="toolbar-main">
+    <el-icon class="custom-el-icon back-icon" @click="backToMain()">
+      <Icon name="icon_left_outlined">
+        <icon_left_outlined class="toolbar-hover-icon toolbar-icon"/>
+      </Icon>
+    </el-icon>
     <div class="left-area">
           <span id="canvas-name" class="name-area" @dblclick="editCanvasName">
             {{ dashboardInfo.name }}
@@ -169,12 +202,12 @@ const redo = () => {
         Save
       </el-button>
     </div>
-        <Teleport v-if="nameEdit" :to="'#canvas-name'">
+    <Teleport v-if="nameEdit" :to="'#canvas-name'">
       <input
-        @change="onDvNameChange"
-        ref="nameInput"
-        v-model="inputName"
-        @blur="closeEditCanvasName"
+          @change="onDvNameChange"
+          ref="nameInput"
+          v-model="inputName"
+          @blur="closeEditCanvasName"
       />
     </Teleport>
     <ResourceGroupOpt @finish="groupOptFinish " ref="resourceGroupOptRef"></ResourceGroupOpt>
@@ -205,6 +238,7 @@ const redo = () => {
       width: 300px;
       overflow: hidden;
       cursor: pointer;
+      color: #fff;
 
       input {
         position: absolute;
@@ -245,4 +279,28 @@ const redo = () => {
   }
 }
 
+.toolbar-icon {
+  width: 20px;
+  height: 20px;
+  color: #fff;
+}
+
+
+.toolbar-hover-icon {
+  cursor: pointer;
+  font-size: 18px !important;
+  width: 26px !important;
+  height: 26px !important;
+  color: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: transparent;
+  }
+}
+
 </style>

frontend/src/views/dashboard/editor/index.vue

@@ -8,11 +8,13 @@ import cloneDeep from 'lodash/cloneDeep';
 import {storeToRefs} from "pinia";
 import {dashboardStoreWithOut} from "@/stores/dashboard/dashboard.ts";
 import router from '@/router'
+import {dashboardApi} from "@/api/dashboard.ts";
+import {initCanvasData} from "@/views/dashboard/utils/canvasUtils.ts";
 
 const dashboardStore = dashboardStoreWithOut()
 const {componentData} = storeToRefs(dashboardStore)
 
-
+const dataInitState = ref(false)
 const state = reactive({
   routerPid: null,
   resourceId: null,
@@ -45,6 +47,11 @@ onMounted(() => {
   state.routerPid = router.currentRoute.value.query.pid
   if (state.opt === 'create') {
     dashboardStore.updateDashboardInfo({dataState: 'prepare', name: 'New Dashboard', pid: state.routerPid})
+  } else if (state.resourceId) {
+    dataInitState.value = false
+    initCanvasData({id: state.resourceId}, function () {
+      dataInitState.value = true
+    })
   }
 })
 

frontend/src/views/dashboard/preview/SQPreviewShow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import {reactive, ref, toRefs, onBeforeMount, computed} from 'vue'
-import {initCanvasData} from '@/views/dashboard/utils/canvasUtils'
+import {initCanvasData, load_resource_prepare} from '@/views/dashboard/utils/canvasUtils'
 import {Icon} from '@/components/icon-custom'
 import ResourceTree from "@/views/dashboard/common/ResourceTree.vue";
 import SQPreview from "@/views/dashboard/preview/SQPreview.vue";
@@ -62,7 +62,7 @@ function createNew() {
 const loadCanvasData = (params: any) => {
   dataInitState.value = false
   //@ts-ignore
-  initCanvasData({id:params.id}, function ({dashboardInfo, canvasDataResult, canvasStyleResult, canvasViewInfoPreview}) {
+  load_resource_prepare({id:params.id}, function ({dashboardInfo, canvasDataResult, canvasStyleResult, canvasViewInfoPreview}) {
         state.canvasDataPreview = canvasDataResult
         state.canvasStylePreview = canvasStyleResult
         state.canvasViewInfoPreview = canvasViewInfoPreview

frontend/src/views/dashboard/utils/canvasUtils.ts

@@ -6,7 +6,7 @@ const dashboardStore = dashboardStoreWithOut()
 const {componentData, canvasStyleData} = storeToRefs(dashboardStore)
 
 const workspace_id = 'default' // temp
-export const initCanvasData = (params: any, callBack: Function) => {
+export const load_resource_prepare = (params: any, callBack: Function) => {
     dashboardApi.load_resource(params).then((canvasInfo: any) => {
         const dashboardInfo = {
             id: canvasInfo.id,
@@ -28,6 +28,16 @@ export const initCanvasData = (params: any, callBack: Function) => {
     })
 }
 
+export const initCanvasData = (params: any, callBack: Function) => {
+    load_resource_prepare(params, function (result: any) {
+        dashboardStore.setDashboardInfo(result.dashboardInfo)
+        dashboardStore.setCanvasStyleData(result.canvasStyleResult)
+        dashboardStore.setComponentData(result.canvasDataResult)
+        dashboardStore.setCanvasViewInfo(result.canvasViewInfoPreview)
+        callBack()
+    })
+}
+
 export const saveDashboardResource = (params: any, callBack: Function) => {
     params['workspace_id'] = workspace_id
     dashboardApi.check_name(params).then((resCheck: any) => {
@@ -50,6 +60,15 @@ export const saveDashboardResource = (params: any, callBack: Function) => {
                 dashboardApi.update_resource(params).then((res: any) => {
                     callBack(res)
                 })
+            }else if (params.opt === 'updateLeaf') {
+                const reqeustParams = {
+                    ...params,
+                    component_data: JSON.stringify(componentData.value),
+                    canvas_style_data: JSON.stringify(canvasStyleData.value)
+                }
+                dashboardApi.update_canvas(reqeustParams).then(() => {
+                    callBack()
+                })
             }
         } else {
             ElMessage({