refactor: dashboard preview

Author: ziyujiahao

backend/apps/dashboard/api/dashboard_api.py

@@ -2,10 +2,8 @@
 from fastapi import APIRouter, File, UploadFile, HTTPException
 
 from apps.dashboard.crud.dashboard_service import get_dashboard_list, preview_with_id,create_dashboard
-from apps.dashboard.models.dashboard_model import CreateDashboard, DashboardResponse
+from apps.dashboard.models.dashboard_model import CreateDashboard
 from common.core.deps import SessionDep, CurrentUser
-from typing import List
-from fastapi.encoders import jsonable_encoder
 
 router = APIRouter(tags=["dashboard"], prefix="/dashboard")
 

backend/apps/dashboard/crud/dashboard_service.py

@@ -1,11 +1,12 @@
 from sqlalchemy import select
 from apps.dashboard.models.dashboard_model import CoreDashboard, CreateDashboard
 from common.core.deps import SessionDep, CurrentUser
+from sqlmodel import text
 import uuid
 def get_dashboard_list(session: SessionDep):
-    statement = select(CoreDashboard)
-    dashboard_list = session.exec(statement).scalars().all()
-    return dashboard_list
+    sql = text("SELECT id, name, type,node_type, pid, create_time FROM core_dashboard")
+    for row in session.exec(sql).mappings():
+        yield CoreDashboard(**row)
 
 def preview_with_id(session: SessionDep, dashboard_id: str):
     return  session.query(CoreDashboard).filter(CoreDashboard.id == id).first()

backend/apps/dashboard/models/dashboard_model.py

@@ -122,36 +122,14 @@ class CoreDashboard(SQLModel, table=True):
         sa_column=Column(String(50), nullable=True)
     )
 
-class DashboardResponse(BaseModel):
+class DashboardBaseResponse(BaseModel):
     id: Optional[str] = None
     name: Optional[str] = None
     pid: Optional[str] = None
-    workspace_id: Optional[str] = None
-    org_id: Optional[str] = None
-    level: Optional[int] = None
     node_type: Optional[str] = None
     type: Optional[str] = None
-    canvas_style_data: Optional[str] = None
-    component_data: Optional[str] = None
-    mobile_layout: Optional[int] = None
-    status: Optional[int] = None
-    self_watermark_status: Optional[int] = None
-    sort: Optional[int] = None
     create_time: Optional[int] = None
-    create_by: Optional[str] = None
     update_time: Optional[int] = None
-    update_by: Optional[str] = None
-    remark: Optional[str] = None
-    source: Optional[str] = None
-    delete_flag: Optional[int] = None
-    delete_time: Optional[int] = None
-    delete_by: Optional[str] = None
-    version: Optional[int] = None
-    content_id: Optional[str] = None
-    check_version: Optional[str] = None
-
-    class Config:
-        orm_mode = True
 
 # dashboard create obj
 class CreateDashboard(BaseModel):

frontend/src/assets/svg/icon_add_outlined.svg

@@ -163,7 +163,7 @@ const name = ref('admin')
 const activeMenu = computed(() => route.path)
 const routerList = computed(() => {
   return router.getRoutes().filter(route => {
-    return route.path !== '/login' && !route.path.includes('/system') && !route.redirect && route.path !== '/:pathMatch(.*)*' && !route.path.includes('dsTable')
+    return !route.path.includes('canvas') && route.path !== '/login' && !route.path.includes('/system') && !route.redirect && route.path !== '/:pathMatch(.*)*' && !route.path.includes('dsTable')
   })
 })
 

frontend/src/assets/svg/icon_dashboard.svg

@@ -69,17 +69,10 @@ const router = createRouter({
       ],
     },
     {
-      path: "/dashboard-edit",
-      redirect: "/dashboard-edit/index",
-      component: Layout,
-      children: [
-        {
-          path: "index",
-          name: "dashboard-edit",
-          component: DashboardEditor,
-          meta: { title: "dashboard-edit", icon: "dashboard" },
-        },
-      ],
+      path: "/canvas",
+      name: "canvas",
+      component: DashboardEditor,
+      meta: { title: "canvas", icon: "dashboard" },
     },
     /* {
       path: "/setting",

frontend/src/assets/svg/icon_folder.svg

@@ -110,3 +110,25 @@ body {
 
 
 
+.hover-icon {
+  cursor: pointer;
+  height: 24px !important;
+  width: 24px !important;
+  font-size: 16px !important;
+  border-radius: 4px;
+  color: #646a73 !important;
+
+  &[aria-expanded='true'] {
+    background: rgba(31, 35, 41, 0.1);
+  }
+
+  &:hover {
+    background: rgba(31, 35, 41, 0.1);
+  }
+
+  &:active {
+    background: rgba(31, 35, 41, 0.2);
+  }
+}
+
+

frontend/src/components/layout/index.vue

@@ -3,9 +3,9 @@ import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import {treeDraggableChart} from '@/views/dashboard/utils/treeDraggableChart'
 import newFolder from '@/assets/svg/new-folder.svg'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
-import Folder from '@/assets/svg/folder.svg'
+import icon_folder from '@/assets/svg/icon_folder.svg'
 import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
-import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
+import icon_dashboard from '@/assets/svg/icon_dashboard.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import {onMounted, reactive, ref, watch, nextTick, computed} from 'vue'
 import {ElIcon, ElScrollbar} from 'element-plus-secondary'
@@ -14,7 +14,6 @@ import {type SQTreeNode} from '@/views/dashboard/utils/treeNode'
 import _ from 'lodash'
 import router from '@/router'
 import {dashboardStoreWithOut} from "@/stores/dashboard/dashboard.ts";
-import HandleMore from "@/views/dashboard/common/HandleMore.vue";
 import ResourceGroupOpt from "@/views/dashboard/common/ResourceGroupOpt.vue";
 import {dashboardApi} from "@/api/dashboard.ts";
 
@@ -58,10 +57,6 @@ const state = reactive({
 })
 
 
-const resourceTypeList = computed(() => {
-  return []
-})
-
 // @ts-ignore
 const {handleDrop, allowDrop, handleDragStart} = treeDraggableChart(
     state,
@@ -118,7 +113,8 @@ const getTree = async () => {
   state.originResourceTree = []
   const params = {}
   dashboardApi.list(params).then((res: SQTreeNode[]) => {
-    state.originResourceTree = res?.data || []
+    state.originResourceTree = res || []
+    state.resourceTree = _.cloneDeep(state.originResourceTree)
     afterTreeInit()
   })
 }
@@ -210,7 +206,7 @@ onMounted(() => {
 // @ts-ignore
 const addOperation = (params: any) => {
   if (params.cmd === 'newLeaf') {
-    const newCanvasUrl = '#/canvas?opt=create' + params.data?.id ? `&pid=${params.data?.id}` : ''
+    const newCanvasUrl = '#/canvas?opt=create' + (params?.id ? `&pid=${params?.id}` : '')
     window.open(newCanvasUrl, '_blank')
   } else {
     // @ts-ignore
@@ -247,6 +243,7 @@ defineExpose({
             <el-icon
                 class="custom-icon btn"
                 style="margin-right: 10px"
+                @click="addOperation({cmd:'newLeaf',type:'dashboard'} )"
             >
               <Icon name="dv-new-folder">
                 <icon_fileAdd_outlined class="svg-icon"/>
@@ -290,22 +287,26 @@ defineExpose({
           @node-drop="handleDrop"
           draggable
       >
-        <template #default="{ data }">
-          <span class="custom-tree-node" :class="{ 'node-disabled-custom': data.extraFlag1 === 0 }">
+        <template #default="{ node, data }">
+          <span class="custom-tree-node">
             <el-icon style="font-size: 18px" v-if="!data.leaf">
-              <Icon name="dv-folder"><Folder class="svg-icon"/></Icon>
+              <Icon name="icon_folder"><icon_folder class="svg-icon"/></Icon>
             </el-icon>
-            <el-icon
-                class="icon-screen-new color-dataV"
-                :class="{ 'color-dataV': data.extraFlag1, 'color-dataV-disabled': !data.extraFlag1 }"
-                style="font-size: 18px"
-                v-else
-            >
-              <Icon name="icon_operation-analysis_outlined"
-              ><icon_operationAnalysis_outlined class="svg-icon"
-              /></Icon>
+            <el-icon style="font-size: 18px" v-else>
+              <Icon name="icon_dashboard"><icon_dashboard class="svg-icon"/></Icon>
             </el-icon>
+            <span :title="node.label" class="label-tooltip">
+              {{ node.label }}
+            </span>
             <div class="icon-more">
+              <el-icon
+                  v-on:click.stop
+                  v-if="!data.leaf"
+                  class="hover-icon"
+                  @click="addOperation({cmd:'newLeaf',type:'dashboard',id:data.id} )"
+              >
+                <Icon><icon_add_outlined class="svg-icon"/></Icon>
+              </el-icon>
               <el-icon
                   v-on:click.stop
                   v-if="data.leaf"
@@ -314,14 +315,14 @@ defineExpose({
               >
                 <Icon><icon_edit_outlined class="svg-icon"/></Icon>
               </el-icon>
-              <HandleMore
-                  @handle-command=" (cmd:string) => addOperation({cmd})
-                "
-                  :menu-list="resourceTypeList"
-                  :icon-name="icon_add_outlined"
-                  placement="bottom-start"
-                  v-if="!data.leaf"
-              ></HandleMore>
+<!--              <HandleMore-->
+<!--                  @handle-command=" (cmd:string) => addOperation({cmd})-->
+<!--                "-->
+<!--                  :menu-list="resourceTypeList"-->
+<!--                  :icon-name="icon_add_outlined"-->
+<!--                  placement="bottom-start"-->
+<!--                  v-if="!data.leaf"-->
+<!--              ></HandleMore>-->
             </div>
           </span>
         </template>
@@ -446,7 +447,7 @@ defineExpose({
   display: flex;
   align-items: center;
   box-sizing: content-box;
-  padding-right: 4px;
+  padding-right: 12px;
 
   .label-tooltip {
     width: 100%;
@@ -459,6 +460,7 @@ defineExpose({
   .icon-more {
     margin-left: auto;
     display: none;
+    color: #bbbfc4;
   }
 
   &:hover {