refactor: dashboard view enlarge

Author: ziyujiahao

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

frontend/src/i18n/zh-CN.json

@@ -34,6 +34,7 @@
     "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
+    "exit_preview": "退出预览",
     "no_chat": "暂无对话",
     "today": "今日",
     "this_week": "本周",

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>

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

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>

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>

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;

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 {

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%;