klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 01:06:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: dashboard preview

Browse Source
This commit is contained in:
wangjiahao
2025-06-06 14:39:55 +08:00
parent 20ec595120
commit 2511e07abf
12 changed files with 77 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/apps/dashboard/api/dashboard_api.py
+1 -3
View File
@@ -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
+4 -3
View File
@@ -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
+1 -23
View File
@@ -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
+1 -1
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M11 11V2.64097C11 2.41809 11.0232 2.33727 11.0668 2.25579C11.1104 2.17431 11.1743 2.11036 11.2558 2.06678C11.3373 2.02321 11.4181 2 11.641 2H12.359C12.5819 2 12.6627 2.02321 12.7442 2.06678C12.8257 2.11036 12.8896 2.17431 12.9332 2.25579C12.9768 2.33727 13 2.41809 13 2.64097V11H21.359C21.5819 11 21.6627 11.0232 21.7442 11.0668C21.8257 11.1104 21.8896 11.1743 21.9332 11.2558C21.9768 11.3373 22 11.4181 22 11.641V12.359C22 12.5819 21.9768 12.6627 21.9332 12.7442C21.8896 12.8257 21.8257 12.8896 21.7442 12.9332C21.6627 12.9768 21.5819 13 21.359 13H13V21.359C13 21.5819 12.9768 21.6627 12.9332 21.7442C12.8896 21.8257 12.8257 21.8896 12.7442 21.9332C12.6627 21.9768 12.5819 22 12.359 22H11.641C11.4181 22 11.3373 21.9768 11.2558 21.9332C11.1743 21.8896 11.1104 21.8257 11.0668 21.7442C11.0232 21.6627 11 21.5819 11 21.359V13H2.64097C2.41809 13 2.33727 12.9768 2.25579 12.9332C2.17431 12.8896 2.11036 12.8257 2.06678 12.7442C2.02321 12.6627 2 12.5819 2 12.359V11.641C2 11.4181 2.02321 11.3373 2.06678 11.2558C2.11036 11.1743 2.17431 11.1104 2.25579 11.0668C2.33727 11.0232 2.41809 11 2.64097 11H11Z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

frontend/src/assets/svg/icon_dashboard.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3C0 1.34315 1.59845 0 3.57025 0H14.4298C16.4015 0 18 1.34315 18 3V15C18 16.6569 16.4015 18 14.4298 18H3.57025C1.59845 18 0 16.6569 0 15V3Z" fill="#3370FF"/>
<path d="M4.25 13V8.77273C4.25 8.48403 4.48985 8.25 4.78571 8.25H7V4.52632C7 4.23564 7.25584 4 7.57143 4H10.4286C10.7442 4 11 4.23564 11 4.52632V7H13.2143C13.5102 7 13.75 7.22386 13.75 7.5V13H14C14.1381 13 14.25 13.1119 14.25 13.25V13.75C14.25 13.8881 14.1381 14 14 14H4C3.86193 14 3.75 13.8881 3.75 13.75V13.25C3.75 13.1119 3.86193 13 4 13H4.25ZM12.75 13V8H11V13H12.75ZM10 13V5H8V13H10ZM7 13V9.25H5.25V13H7Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 697 B

frontend/src/assets/svg/icon_folder.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 3C0.75 2.58579 1.08579 2.25 1.5 2.25H7.78647C8.07055 2.25 8.33025 2.4105 8.45729 2.66459L9 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V15C17.25 15.4142 16.9142 15.75 16.5 15.75H1.5C1.08579 15.75 0.75 15.4142 0.75 15V3Z" fill="#FFA53D"/>
<path d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V15C17.25 15.4142 16.9142 15.75 16.5 15.75H1.5C1.08579 15.75 0.75 15.4142 0.75 15V4.5Z" fill="#FFC60A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 558 B

frontend/src/components/layout/index.vue
+1 -1
View File
@@ -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/router/index.ts
+4 -11
View File
@@ -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/style.less
+22
View File
@@ -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/views/dashboard/common/ResourceTree.vue
+32 -30
View File
@@ -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 {
frontend/src/views/dashboard/editor/DashboardEditor.vue
+1 -1
View File
@@ -109,7 +109,7 @@ const emits = defineEmits(["parentAddItemBox"]);
<style scoped lang="less">
.dashboard-editor-main {
width: 100%;
height: calc(100% - 56px);
height: 100%;
overflow-y: auto;
}
frontend/src/views/dashboard/editor/index.vue
+2 -1
View File
@@ -67,6 +67,7 @@ const componentData = ref([
.editor-main {
position: relative;
width: 100vw;
height: calc(100vh - 61px);
height: 100vh;
background: #f5f6f7;
}
</style>