From 507c4de2f412ad8f211e6f2fa086f48c8d9b4d96 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 6 Aug 2025 09:57:31 +0800
Subject: [PATCH] refactor: add view to dashboard

---
 frontend/auto-imports.d.ts                    |  1 +
 frontend/src/i18n/en.json                     |  1 +
 frontend/src/i18n/zh-CN.json                  |  1 +
 frontend/src/style.less                       | 59 +++++++++++++++++++
 .../dashboard/common/AddViewDashboard.vue     | 54 ++++++++++++++---
 .../src/views/dashboard/utils/canvasUtils.ts  |  4 +-
 6 files changed, 111 insertions(+), 9 deletions(-)

diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
index f66cb83b..5583f547 100644
--- a/frontend/auto-imports.d.ts
+++ b/frontend/auto-imports.d.ts
@@ -6,6 +6,7 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const ElButton: typeof import('element-plus-secondary/es')['ElButton']
   const ElMessage: typeof import('element-plus-secondary/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus-secondary/es')['ElMessageBox']
   const LicenseGenerator: any
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 9f8fd569..cfa7ee66 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -44,6 +44,7 @@
     "or": "Or"
   },
   "dashboard": {
+    "open_dashboard": "Open Dashboard",
     "add_dashboard_name_tips": "Please Input Dashboard Name",
     "existing_dashboard": "Existing Dashboard",
     "add_success": "Add Success",
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 92d993d0..94a04269 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -44,6 +44,7 @@
     "or": "或者"
   },
   "dashboard": {
+    "open_dashboard": "打开仪表板",
     "add_dashboard_name_tips": "请输入仪表板名称",
     "existing_dashboard": "存量仪表板",
     "add_success": "添加成功",
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 71a0263e..94557a8f 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -230,3 +230,62 @@ strong {
     height: 1px !important;
   }
 }
+
+.sq-message-success {
+  border: 1px solid #34c724 !important;
+  background: #f0fbef !important;
+
+  .ed-message__icon {
+    color: #34c724
+  }
+}
+
+
+.sq-message-export {
+  min-width: 20px !important;
+  padding: 16px 20px !important;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+
+  & > p {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+    display: flex;
+    align-items: center;
+    padding-right: 24px;
+  }
+
+  .m50-export {
+    max-width: 200px;
+  }
+
+  .btn-text {
+    padding: 2px 4px;
+
+    &:hover {
+      background: var(--primary10, #3370ff1a);
+    }
+  }
+
+  .ed-message__closeBtn {
+    margin-left: 28px;
+    position: relative;
+    margin-right: 0;
+    top: 0;
+    right: 0;
+    transform: translateY(0);
+    color: #646a73;
+  }
+
+  .ed-message__icon {
+    height: 16px;
+    width: 16px;
+    margin-right: 8px;
+  }
+}
diff --git a/frontend/src/views/dashboard/common/AddViewDashboard.vue b/frontend/src/views/dashboard/common/AddViewDashboard.vue
index 47dc7e00..4ef2b519 100644
--- a/frontend/src/views/dashboard/common/AddViewDashboard.vue
+++ b/frontend/src/views/dashboard/common/AddViewDashboard.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, h } from 'vue'
+import { ElButton, ElMessage } from 'element-plus-secondary'
 import {
   findNextComponentIndex,
   saveDashboardResourceTarget,
@@ -18,7 +19,7 @@ const optInit = (viewInfo: any) => {
   resourceDialogShow.value = true
   state.viewInfo = viewInfo
 }
-
+const curOptDashboardId = ref(null)
 const state = reactive({
   dashboardList: [] as SQTreeNode[],
   viewInfo: null,
@@ -123,16 +124,55 @@ const saveResourcePrepare = () => {
 }
 
 const saveResource = (params: any, commonParams: any) => {
-  saveDashboardResourceTarget(params, commonParams, function () {
+  saveDashboardResourceTarget(params, commonParams, (res: any) => {
     const messageTips = t('dashboard.add_success')
-    ElMessage({
-      type: 'success',
-      message: messageTips,
-    })
+    curOptDashboardId.value = res?.id
+    openMessageLoading(messageTips, 'success', callbackExportSuc)
     resetForm()
   })
 }
 
+const callbackExportSuc = () => {
+  // do open dashboard
+  const url = `#/canvas?resourceId=${curOptDashboardId.value}`
+  window.open(url, '_self')
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+const openMessageLoading = (text: string, type = 'success', cb: Function) => {
+  // success error loading
+  const customClass = `sq-message-${type || 'success'} sq-message-export`
+  ElMessage({
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    message: h('p', null, [
+      h(
+        'span',
+        {
+          title: t(text),
+          class: 'ellipsis m50-export',
+        },
+        t(text)
+      ),
+      h(
+        ElButton,
+        {
+          text: true,
+          size: 'small',
+          class: 'btn-text',
+          onClick: () => {
+            cb()
+          },
+        },
+        t('dashboard.open_dashboard')
+      ),
+    ]),
+    type,
+    showClose: true,
+    duration: 0,
+    customClass,
+  })
+}
+
 const initDashboardList = () => {
   state.dashboardList = []
   const params = {}
diff --git a/frontend/src/views/dashboard/utils/canvasUtils.ts b/frontend/src/views/dashboard/utils/canvasUtils.ts
index 99c502df..14095b3d 100644
--- a/frontend/src/views/dashboard/utils/canvasUtils.ts
+++ b/frontend/src/views/dashboard/utils/canvasUtils.ts
@@ -116,8 +116,8 @@ export const saveDashboardResourceTarget = (params: any, commonParams: any, call
           canvas_style_data: JSON.stringify(commonParams.canvasStyleData),
           canvas_view_info: JSON.stringify(commonParams.canvasViewInfo),
         }
-        dashboardApi.update_canvas(requestParams).then(() => {
-          callBack()
+        dashboardApi.update_canvas(requestParams).then((res: any) => {
+          callBack(res)
         })
       }
     } else {