From 2511e07abf96fadfe2c699cc32c4b710563704d6 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 6 Jun 2025 14:39:55 +0800 Subject: [PATCH] refactor: dashboard preview --- backend/apps/dashboard/api/dashboard_api.py | 4 +- .../apps/dashboard/crud/dashboard_service.py | 7 ++- .../apps/dashboard/models/dashboard_model.py | 24 +------ frontend/src/assets/svg/icon_add_outlined.svg | 2 +- frontend/src/assets/svg/icon_dashboard.svg | 4 ++ frontend/src/assets/svg/icon_folder.svg | 4 ++ frontend/src/components/layout/index.vue | 2 +- frontend/src/router/index.ts | 15 ++--- frontend/src/style.less | 22 +++++++ .../views/dashboard/common/ResourceTree.vue | 62 ++++++++++--------- .../dashboard/editor/DashboardEditor.vue | 2 +- frontend/src/views/dashboard/editor/index.vue | 3 +- 12 files changed, 77 insertions(+), 74 deletions(-) create mode 100644 frontend/src/assets/svg/icon_dashboard.svg create mode 100644 frontend/src/assets/svg/icon_folder.svg diff --git a/backend/apps/dashboard/api/dashboard_api.py b/backend/apps/dashboard/api/dashboard_api.py index eb40ac2c..a984f2c4 100644 --- a/backend/apps/dashboard/api/dashboard_api.py +++ b/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") diff --git a/backend/apps/dashboard/crud/dashboard_service.py b/backend/apps/dashboard/crud/dashboard_service.py index 873da621..ac7d2800 100644 --- a/backend/apps/dashboard/crud/dashboard_service.py +++ b/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() diff --git a/backend/apps/dashboard/models/dashboard_model.py b/backend/apps/dashboard/models/dashboard_model.py index 1c79335e..31507cb6 100644 --- a/backend/apps/dashboard/models/dashboard_model.py +++ b/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): diff --git a/frontend/src/assets/svg/icon_add_outlined.svg b/frontend/src/assets/svg/icon_add_outlined.svg index f3364bbc..a3841e6d 100644 --- a/frontend/src/assets/svg/icon_add_outlined.svg +++ b/frontend/src/assets/svg/icon_add_outlined.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/assets/svg/icon_dashboard.svg b/frontend/src/assets/svg/icon_dashboard.svg new file mode 100644 index 00000000..1da45d61 --- /dev/null +++ b/frontend/src/assets/svg/icon_dashboard.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/svg/icon_folder.svg b/frontend/src/assets/svg/icon_folder.svg new file mode 100644 index 00000000..57fdb021 --- /dev/null +++ b/frontend/src/assets/svg/icon_folder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/components/layout/index.vue b/frontend/src/components/layout/index.vue index 0d50c449..1a14ad5f 100644 --- a/frontend/src/components/layout/index.vue +++ b/frontend/src/components/layout/index.vue @@ -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') }) }) diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index d26a47ca..b6ed972d 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -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", diff --git a/frontend/src/style.less b/frontend/src/style.less index 5b837fc3..7d40fb14 100644 --- a/frontend/src/style.less +++ b/frontend/src/style.less @@ -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); + } +} + + diff --git a/frontend/src/views/dashboard/common/ResourceTree.vue b/frontend/src/views/dashboard/common/ResourceTree.vue index 8bb22c93..cc7c2dd0 100644 --- a/frontend/src/views/dashboard/common/ResourceTree.vue +++ b/frontend/src/views/dashboard/common/ResourceTree.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({ @@ -290,22 +287,26 @@ defineExpose({ @node-drop="handleDrop" draggable > - + @@ -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 { diff --git a/frontend/src/views/dashboard/editor/DashboardEditor.vue b/frontend/src/views/dashboard/editor/DashboardEditor.vue index 1d33eeca..4bbb2cec 100644 --- a/frontend/src/views/dashboard/editor/DashboardEditor.vue +++ b/frontend/src/views/dashboard/editor/DashboardEditor.vue @@ -109,7 +109,7 @@ const emits = defineEmits(["parentAddItemBox"]); \ No newline at end of file