From 35e0a36ada3142f88cd6eb35967df94381e1aa9a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 21 Jul 2025 17:43:19 +0800
Subject: [PATCH] refactor: dashboard view enlarge

---
 frontend/src/i18n/en.json                     |  5 ++
 frontend/src/i18n/zh-CN.json                  |  1 +
 .../chat/component/DisplayChartBlock.vue      |  1 +
 .../src/views/dashboard/canvas/CanvasCore.vue |  6 ++
 .../views/dashboard/canvas/CanvasShape.vue    |  3 +-
 .../views/dashboard/canvas/ComponentBar.vue   | 11 +++-
 .../dashboard/components/sq-view/index.vue    | 55 ++++++++++++++++++-
 .../src/views/dashboard/css/CanvasStyle.less  |  4 +-
 .../dashboard/preview/SQComponentWrapper.vue  |  1 +
 9 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 0dafe579..ad24337e 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -32,6 +32,11 @@
     "password_reset_successful": "Password reset successful"
   },
   "dashboard": {
+    "exit_preview": "Exit preview",
+    "no_chat": "No conversations",
+    "today": "Today",
+    "this_week": "This week",
+    "earlier": "Earlier",
     "add_component_tips": "Select components from the top toolbar and add them here to create a dashboard",
     "add_view": "Add Chart",
     "delete_dashboard_warn": "Delete This Dashboard: {0}",
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 1e9fe9f5..61bb02b2 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -34,6 +34,7 @@
     "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
+    "exit_preview": "退出预览",
     "no_chat": "暂无对话",
     "today": "今日",
     "this_week": "本周",
diff --git a/frontend/src/views/chat/component/DisplayChartBlock.vue b/frontend/src/views/chat/component/DisplayChartBlock.vue
index 77f1264c..2b639b57 100644
--- a/frontend/src/views/chat/component/DisplayChartBlock.vue
+++ b/frontend/src/views/chat/component/DisplayChartBlock.vue
@@ -81,6 +81,7 @@ defineExpose({
 .chart-base-container {
   height: 100%;
   width: 100%;
+  border-radius: 12px;
   background: rgba(224, 224, 226, 0.29);
 }
 </style>
diff --git a/frontend/src/views/dashboard/canvas/CanvasCore.vue b/frontend/src/views/dashboard/canvas/CanvasCore.vue
index dfca61a8..b03619df 100644
--- a/frontend/src/views/dashboard/canvas/CanvasCore.vue
+++ b/frontend/src/views/dashboard/canvas/CanvasCore.vue
@@ -1149,6 +1149,11 @@ onMounted(() => {
   currentInstance = getCurrentInstance()
 })
 
+const enlargeView = (itemId: string) => {
+  const refTabInstance = currentInstance.refs['shape_component_' + itemId][0]
+  refTabInstance.enlargeView()
+}
+
 defineExpose({
   getRenderState,
   init,
@@ -1194,6 +1199,7 @@ defineExpose({
         :start-resize="startResize"
         :canvas-id="canvasId"
         :style="nowItemStyle(item)"
+        @enlarge-view="() => enlargeView(item.id)"
       >
         <component
           :is="findComponent(item.component)"
diff --git a/frontend/src/views/dashboard/canvas/CanvasShape.vue b/frontend/src/views/dashboard/canvas/CanvasShape.vue
index b7d47892..3d93959f 100644
--- a/frontend/src/views/dashboard/canvas/CanvasShape.vue
+++ b/frontend/src/views/dashboard/canvas/CanvasShape.vue
@@ -4,7 +4,7 @@ import { ref, toRefs, type PropType } from 'vue'
 import ResizeHandle from '@/views/dashboard/canvas/ResizeHandle.vue'
 import DragHandle from '@/views/dashboard/canvas/DragHandle.vue'
 import ComponentBar from '@/views/dashboard/canvas/ComponentBar.vue'
-
+const emits = defineEmits(['enlargeView'])
 const shapeRef = ref(null)
 // Props
 const props = defineProps({
@@ -76,6 +76,7 @@ const shapeClick = (e: MouseEvent) => {
       :active="active && canEdit"
       :show-position="'canvas'"
       :canvas-id="canvasId"
+      @enlarge-view="() => emits('enlargeView')"
     ></component-bar>
     <template v-if="canEdit">
       <drag-handle></drag-handle>
diff --git a/frontend/src/views/dashboard/canvas/ComponentBar.vue b/frontend/src/views/dashboard/canvas/ComponentBar.vue
index 0c7b1df3..ac2ee942 100644
--- a/frontend/src/views/dashboard/canvas/ComponentBar.vue
+++ b/frontend/src/views/dashboard/canvas/ComponentBar.vue
@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import icon_chart_preview from '@/assets/svg/icon_chart_preview.svg'
 const { t } = useI18n()
+const emits = defineEmits(['enlargeView'])
 
 const props = defineProps({
   active: {
@@ -32,6 +33,7 @@ const { configItem } = toRefs(props)
 
 const doPreview = () => {
   // do preview
+  emits('enlargeView')
 }
 
 const doDeleteComponent = (e: MouseEvent) => {
@@ -52,9 +54,12 @@ const doDeleteComponent = (e: MouseEvent) => {
         </el-icon>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item :icon="icon_chart_preview" @click="doPreview">{{
-              t('dashboard.preview')
-            }}</el-dropdown-item>
+            <el-dropdown-item
+              v-if="configItem.component === 'SQView'"
+              :icon="icon_chart_preview"
+              @click="doPreview"
+              >{{ t('dashboard.preview') }}</el-dropdown-item
+            >
             <el-dropdown-item divided :icon="icon_delete" @click="doDeleteComponent">{{
               t('dashboard.delete')
             }}</el-dropdown-item>
diff --git a/frontend/src/views/dashboard/components/sq-view/index.vue b/frontend/src/views/dashboard/components/sq-view/index.vue
index 6d3fecfe..0bf0ff36 100644
--- a/frontend/src/views/dashboard/components/sq-view/index.vue
+++ b/frontend/src/views/dashboard/components/sq-view/index.vue
@@ -1,22 +1,36 @@
 <script setup lang="ts">
 import ChartComponent from '@/views/chat/component/ChartComponent.vue'
+import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg'
+import SqViewDisplay from '@/views/dashboard/components/sq-view/index.vue'
 defineProps({
   viewInfo: {
     type: Object,
     required: true,
   },
+  outerId: {
+    type: String,
+    required: false,
+    default: null,
+  },
 })
 
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 const chartRef = ref(null)
 const renderChart = () => {
   //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   chartRef.value?.renderChart
 }
+const enlargeDialogVisible = ref(false)
 
+const enlargeView = () => {
+  enlargeDialogVisible.value = true
+}
 defineExpose({
   renderChart,
+  enlargeView,
 })
 </script>
 
@@ -30,7 +44,7 @@ defineExpose({
     <div class="chart-show-area">
       <ChartComponent
         v-if="viewInfo.id"
-        :id="viewInfo.id"
+        :id="outerId || viewInfo.id"
         ref="chartRef"
         :type="viewInfo.chart.type"
         :columns="viewInfo.chart.columns"
@@ -40,15 +54,54 @@ defineExpose({
         :data="viewInfo.data?.data"
       />
     </div>
+    <el-dialog
+      v-if="enlargeDialogVisible"
+      v-model="enlargeDialogVisible"
+      fullscreen
+      :show-close="false"
+      class="chart-fullscreen-dialog-view"
+      header-class="chart-fullscreen-dialog-header-view"
+      body-class="chart-fullscreen-dialog-body-view"
+    >
+      <div style="position: absolute; right: 15px; top: 15px; cursor: pointer">
+        <el-tooltip effect="dark" :content="t('dashboard.exit_preview')" placement="top">
+          <el-button
+            class="tool-btn"
+            style="width: 26px"
+            text
+            @click="() => (enlargeDialogVisible = false)"
+          >
+            <el-icon size="16">
+              <icon_window_mini_outlined />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
+      <SqViewDisplay :view-info="viewInfo" :outer-id="'enlarge-' + viewInfo.id" />
+    </el-dialog>
   </div>
 </template>
 
+<style lang="less">
+.chart-fullscreen-dialog-view {
+  padding: 0;
+}
+.chart-fullscreen-dialog-header-view {
+  display: none;
+}
+.chart-fullscreen-dialog-body-view {
+  padding: 0;
+  height: 100%;
+}
+</style>
+
 <style scoped lang="less">
 .chart-base-container {
   width: 100%;
   height: 100%;
   background: #fff;
   padding: 12px !important;
+  border-radius: 12px;
   .header-bar {
     height: 32px;
     display: flex;
diff --git a/frontend/src/views/dashboard/css/CanvasStyle.less b/frontend/src/views/dashboard/css/CanvasStyle.less
index c321082f..29254bff 100644
--- a/frontend/src/views/dashboard/css/CanvasStyle.less
+++ b/frontend/src/views/dashboard/css/CanvasStyle.less
@@ -24,6 +24,7 @@
     height: 100px;
     background-color: #fff;
     cursor: move;
+    border-radius: 12px;
     .resizeHandle {
       position: absolute;
       background: #fff;
@@ -56,8 +57,9 @@
     z-index: 100;
 
     transition: none;
-
+    border-radius: 12px;
     opacity: .5;
+    overflow: hidden;
   }
 
   .movingItem {
diff --git a/frontend/src/views/dashboard/preview/SQComponentWrapper.vue b/frontend/src/views/dashboard/preview/SQComponentWrapper.vue
index a4e4b5e1..2986488a 100644
--- a/frontend/src/views/dashboard/preview/SQComponentWrapper.vue
+++ b/frontend/src/views/dashboard/preview/SQComponentWrapper.vue
@@ -57,6 +57,7 @@ const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + configItem.val
 .wrapper-outer {
   position: absolute;
   overflow: hidden;
+  border-radius: 12px;
   .wrapper-inner {
     width: 100%;
     height: 100%;