refactor: preview head

Author: ziyujiahao

backend/apps/dashboard/api/dashboard_api.py

@@ -2,7 +2,7 @@
 
 from apps.dashboard.crud.dashboard_service import list_resource, load_resource, \
     create_resource, create_canvas, validate_name, delete_resource, update_resource, update_canvas
-from apps.dashboard.models.dashboard_model import CreateDashboard, BaseDashboard, QueryDashboard
+from apps.dashboard.models.dashboard_model import CreateDashboard, BaseDashboard, QueryDashboard,DashboardResponse
 from common.core.deps import SessionDep, CurrentUser
 
 router = APIRouter(tags=["dashboard"], prefix="/dashboard")

backend/apps/dashboard/crud/dashboard_service.py

@@ -24,8 +24,19 @@ def list_resource(session: SessionDep, dashboard: QueryDashboard):
     return tree
 
 
-def load_resource(session: SessionDep,dashboard: QueryDashboard):
-    return session.query(CoreDashboard).filter(CoreDashboard.id == dashboard.id).first()
+def load_resource(session: SessionDep, dashboard: QueryDashboard):
+    sql = text("""
+               SELECT cd.*,
+                      creator.name AS create_name,
+                      updator.name AS update_name
+               FROM core_dashboard cd
+                        LEFT JOIN sys_user creator ON cd.create_by = creator.id::varchar
+        LEFT JOIN sys_user updator
+               ON cd.update_by = updator.id:: varchar
+               WHERE cd.id = :dashboard_id
+               """)
+    result = session.execute(sql, {"dashboard_id": dashboard.id}).mappings().first()
+    return result
 
 
 def get_create_base_info(user: CurrentUser, dashboard: CreateDashboard):

backend/apps/dashboard/models/dashboard_model.py

@@ -133,6 +133,10 @@ class DashboardBaseResponse(BaseModel):
     update_time: Optional[int] = None
     children: List['DashboardBaseResponse'] = []
 
+class DashboardResponse(CoreDashboard):
+    update_name: Optional[str] = None
+    create_name: Optional[str] = None
+
 class BaseDashboard(BaseModel):
     id: str = ''
     name: str = ''

frontend/package.json

@@ -16,6 +16,7 @@
     "dayjs": "^1.11.13",
     "element-plus": "^2.10.1",
     "element-plus-secondary": "^1.0.0",
+    "element-resize-detector": "^1.2.4",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "snowflake-id": "^1.1.0",
@@ -28,6 +29,7 @@
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@types/crypto-js": "^4.2.2",
+    "@types/element-resize-detector": "^1.1.6",
     "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.2.2",
     "@vue/tsconfig": "^0.7.0",

frontend/src/stores/dashboard/dashboard.ts

@@ -20,12 +20,12 @@ export const dashboardStore = defineStore('dashboard', {
                 workspaceId: null,
                 status: null,
                 dataState: null,
-                type: null,
-                creatorName: null,
+                createName: null,
                 updateName: null,
                 createTime: null,
                 updateTime: null,
-                contentId: null
+                contentId: null,
+                type: null
             }
         }
     },

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

@@ -4,12 +4,12 @@
       Dashboard ID
     </div>
     <div class="info-content">{{ dashboardInfo.id }}</div>
-    <div v-if="dashboardInfo.creatorName" class="info-title">Creator</div>
-    <div v-if="dashboardInfo.creatorName" class="info-content">Creator Name</div>
+    <div v-if="dashboardInfo.createName" class="info-title">Creator</div>
+    <div v-if="dashboardInfo.createName" class="info-content">{{ dashboardInfo.createName }}</div>
     <div class="info-title">Create Time</div>
     <div class="info-content">{{ timestampFormatDate(dashboardInfo.createTime) }}</div>
     <div v-if="dashboardInfo.updateName" class="info-title">Updator</div>
-    <div v-if="dashboardInfo.updateName" class="info-content">Updator Name</div>
+    <div v-if="dashboardInfo.updateName" class="info-content">{{ dashboardInfo.updateName }}</div>
     <div class="info-title">Update Time</div>
     <div v-if="dashboardInfo.updateTime" class="info-content">
       {{ timestampFormatDate(dashboardInfo.updateTime) }}
@@ -19,17 +19,19 @@
 </template>
 
 <script lang="ts" setup>
-import {dashboardStoreWithOut} from "@/stores/dashboard/dashboard.ts";
-import {storeToRefs} from "pinia";
 
-const dashboardStore = dashboardStoreWithOut()
-const {dashboardInfo} = storeToRefs(dashboardStore)
+defineProps({
+  dashboardInfo: {
+    type: Object,
+    required: true
+  }
+})
 
-const timestampFormatDate = (value:any) => {
+const timestampFormatDate = (value: any) => {
   if (!value) {
     return '-'
   }
-  return new Date(value).toLocaleString()
+  return new Date(value * 1000).toLocaleString()
 }
 </script>
 
@@ -45,6 +47,7 @@ const timestampFormatDate = (value:any) => {
     font-size: 14px;
     margin-bottom: 4px;
   }
+
   .info-content {
     color: #1f2329;
     font-size: 14px;

frontend/src/views/dashboard/components/sq-tab/index.vue

@@ -23,6 +23,19 @@ const props = defineProps({
   configItem: {
     type: Object as PropType<CanvasItem>,
     required: true
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
+  canvasId: {
+    type: String,
+    default: 'canvas-main'
   }
 })
 
@@ -220,11 +233,11 @@ defineExpose({
   position: absolute;
   width: 100%;
   height: 100%;
-  margin: 2px!important;// border size
+  margin: 2px !important; // border size
 }
 
-.tab-dashboard-editor-main{
- height: 100%!important;
+.tab-dashboard-editor-main {
+  height: 100% !important;
 }
 
 .tab-moveout {

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

@@ -8,7 +8,6 @@ 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()

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {ref, toRefs, computed} from 'vue'
+import {findComponent} from "@/views/dashboard/components/component-list.ts";
+
+const componentWrapperInnerRef = ref(null)
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  configItem: {
+    type: Object,
+    required: true
+  },
+  canvasViewInfo: {
+    type: Object,
+    required: true
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
+  canvasId: {
+    type: String,
+    default: 'canvas-main'
+  }
+})
+const {configItem, showPosition} = toRefs(props)
+const component = ref(null)
+const wrapperId = 'wrapper-outer-id-' + configItem.value.id
+const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + configItem.value.id)
+
+</script>
+
+<template>
+  <div class="wrapper-outer" :id="wrapperId">
+    <div class="wrapper-inner" ref="componentWrapperInnerRef" :id="viewDemoInnerId">
+      <div class="wrapper-inner-adaptor">
+        <component
+            ref="component"
+            class="component"
+            :is="findComponent(configItem['component'])"
+            :canvas-view-info="canvasViewInfo"
+            :view="canvasViewInfo[configItem.id]"
+            :config-item="configItem"
+            :show-position="showPosition"
+            :active="active"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.wrapper-outer {
+  position: absolute;
+  .wrapper-inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-size: 100% 100% !important;
+
+    .wrapper-inner-adaptor {
+      position: relative;
+      transform-style: preserve-3d;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>