refactor: add view to dashboard

Author: ziyujiahao

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

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",

frontend/src/i18n/zh-CN.json

@@ -44,6 +44,7 @@
     "or": "或者"
   },
   "dashboard": {
+    "open_dashboard": "打开仪表板",
     "add_dashboard_name_tips": "请输入仪表板名称",
     "existing_dashboard": "存量仪表板",
     "add_success": "添加成功",

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;
+  }
+}

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 = {}

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 {