feat(query): data view fullscreen mode (#548)

Author: ZonaHex

src/assets/style/new.less

@@ -53,60 +53,60 @@
     }
   }
 
-  .arco-tabs.arco-tabs-type-line.panel-tabs {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+  .has-panel {
+    .layout-space {
+      height: 100%;
+    }
+  }
+}
 
-    > .arco-tabs-nav {
-      height: 28px;
+.arco-tabs.panel-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
-      &:before {
-        background-color: var(--border-color);
-      }
+  > .arco-tabs-nav {
+    height: 28px;
 
-      .arco-tabs-nav-tab {
+    &:before {
+      background-color: var(--border-color);
+    }
+
+    .arco-tabs-nav-tab {
+      height: 100%;
+
+      .arco-tabs-tab {
+        border-radius: 0;
+        font-size: 13px;
         height: 100%;
+        margin: 0;
+        padding: 0 12px;
 
-        .arco-tabs-tab {
-          border-radius: 0;
-          font-size: 13px;
-          height: 100%;
-          margin: 0;
-          padding: 0 12px;
-
-          &.arco-tabs-tab-active {
-            color: var(--main-font-color);
-            font-weight: 600;
-          }
+        &.arco-tabs-tab-active {
+          color: var(--main-font-color);
+          font-weight: 600;
         }
       }
-      .arco-tabs-nav-ink {
-        background: var(--brand-color);
-      }
     }
+    .arco-tabs-nav-ink {
+      background: var(--brand-color);
+    }
+  }
 
-    .arco-tabs-content {
-      height: calc(100% - 28px);
+  .arco-tabs-content {
+    height: calc(100% - 28px);
 
-      padding: 0;
+    padding: 0;
 
-      > .arco-tabs-content-list {
+    > .arco-tabs-content-list {
+      height: 100%;
+      > .arco-tabs-content-item {
         height: 100%;
-        > .arco-tabs-content-item {
-          height: 100%;
-          overflow: auto;
-          > .arco-tabs-pane {
-            height: 100%;
-          }
+        overflow: auto;
+        > .arco-tabs-pane {
+          height: 99%;
         }
       }
     }
   }
-
-  .has-panel {
-    .layout-space {
-      height: 100%;
-    }
-  }
 }

src/locale/en-US/dashboard.ts

@@ -63,6 +63,8 @@ export default {
   'dashboard.details': 'Information',
   'dashboard.quickSelect': 'Quick Query',
   'dashboard.clearCode': 'Clear Code',
+  'dashboard.fullSizeMode': 'View fullscreen',
+  'dashboard.exitFullSize': 'Exit fullscreen',
   'dashboard.refresh': 'Refresh',
   'dashboard.hints.columns': 'View column name and type, create quick query from any column.',
   'dashboard.hints.details': 'Metadata of the table',

src/locale/zh-CN/dashboard.ts

@@ -63,6 +63,8 @@ export default {
   'dashboard.details': 'Information',
   'dashboard.quickSelect': 'Quick Query',
   'dashboard.clearCode': 'Clear Code',
+  'dashboard.fullSizeMode': '全屏模式',
+  'dashboard.exitFullSize': '退出全屏',
   'dashboard.refresh': 'Refresh',
   'dashboard.hints.columns': 'View column name and type, create quick query from any column.',
   'dashboard.hints.details': 'View metadata of the table.',

src/views/dashboard/modules/data-view/index.vue

@@ -9,14 +9,20 @@ a-tabs.panel-tabs(
   @delete="deleteTab"
 )
   template(#extra)
-    a-popconfirm(
-      content="Clear results?"
-      type="warning"
-      ok-text="Clear"
-      cancel-text=""
-      @ok="clearResults"
-    )
-      a-button(status="danger" size="small") {{ $t('dashboard.clear') }}
+    a-space(:size="8")
+      a-tooltip(mini :content="props.isInFullSizeMode ? $t('dashboard.exitFullSize') : $t('dashboard.fullSizeMode')")
+        a-button(size="small" @click="toggleFullSize")
+          template(#icon)
+            svg.icon-16
+              use(href="#zoom")
+      a-popconfirm(
+        content="Clear results?"
+        type="warning"
+        ok-text="Clear"
+        cancel-text=""
+        @ok="clearResults"
+      )
+        a-button(status="danger" size="small") {{ $t('dashboard.clear') }}
   a-tab-pane(
     v-if="explainResult"
     key="explain"
@@ -96,9 +102,10 @@ a-tabs.panel-tabs(
     results: ResultType[]
     types: string[]
     explainResult?: ResultType
+    isInFullSizeMode?: boolean
   }>()
 
-  const emit = defineEmits(['update:explainResult'])
+  const emit = defineEmits(['update:explainResult', 'toggleFullSize'])
 
   const { removeResult, clear } = useCodeRunStore()
   const activeTabKey = ref<string | number>()
@@ -143,6 +150,10 @@ a-tabs.panel-tabs(
     clear(props.types)
   }
 
+  const toggleFullSize = () => {
+    emit('toggleFullSize', !props.isInFullSizeMode)
+  }
+
   watch(
     () => ({ ...props }),
     (value, old) => {
@@ -341,6 +352,15 @@ a-tabs.panel-tabs(
     }
   }
 
+  &.full-size {
+    :deep(> .arco-tabs-nav) {
+      height: 40px;
+    }
+    :deep(> .arco-tabs-content) {
+      height: calc(100% - 40px);
+    }
+  }
+
   .raw-json-card {
     padding: 8px 12px;
 

src/views/dashboard/query/index.vue

@@ -23,7 +23,9 @@ a-layout.new-layout
           :results="results"
           :types="types"
           :explainResult="explainResult"
+          :is-in-full-size-mode="false"
           @update:explainResult="(val) => (explainResult = val)"
+          @toggle-full-size="handleToggleFullSize"
         )
       a-resize-box.panel-resize(
         v-model:height="logsHeight"
@@ -33,6 +35,27 @@ a-layout.new-layout
         a-tabs.panel-tabs
           a-tab-pane(title="Log" key="log")
             LogsNew(:logs="queryLogs")
+
+  a-modal.full-size-modal(
+    v-model:visible="isFullSizeMode"
+    :class="{ 'full-screen': isFullSizeMode }"
+    :align-center="false"
+    :footer="false"
+    :closable="false"
+    :header="false"
+    :esc-to-close="true"
+    :mask-style="{ backgroundColor: 'transparent', 'pointer-events': 'auto' }"
+  )
+    DataView.full-size(
+      v-if="!!results?.length || !!explainResult"
+      :results="results"
+      :types="types"
+      :explainResult="explainResult"
+      :show-full-size-button="false"
+      :is-in-full-size-mode="true"
+      @update:explainResult="(val) => (explainResult = val)"
+      @toggle-full-size="isFullSizeMode = false"
+    )
 </template>
 
 <script lang="ts" setup name="QueryNew">
@@ -41,7 +64,7 @@ a-layout.new-layout
   import 'driver.js/dist/driver.css'
   import { navbarSteps, tableSteps } from '../config'
 
-  const { s, q } = useMagicKeys()
+  const { s, q, escape } = useMagicKeys()
   const activeElement = useActiveElement()
   const { hideSidebar, databaseList } = storeToRefs(useAppStore())
   const { logs } = storeToRefs(useLogStore())
@@ -52,6 +75,7 @@ a-layout.new-layout
   const { explainResult } = storeToRefs(useCodeRunStore())
   const types = ['sql', 'promql']
   const logsHeight = ref(66)
+  const isFullSizeMode = ref(false)
 
   const sidebarWidth = useStorage('sidebarWidth', 320)
 
@@ -88,12 +112,26 @@ a-layout.new-layout
       queryType.value = 'promql'
   })
 
+  watch(escape, (v) => {
+    if (v && isFullSizeMode.value) {
+      isFullSizeMode.value = false
+    }
+  })
+
   const selectExplainTab = () => {
     if (dataViewRef.value) {
       dataViewRef.value.selectTab('explain')
     }
   }
 
+  const handleToggleFullSize = (fullSize: boolean) => {
+    isFullSizeMode.value = fullSize
+  }
+
+  const toggleFullSize = () => {
+    isFullSizeMode.value = !isFullSizeMode.value
+  }
+
   const globalTour = driver({
     showProgress: false,
     allowClose: false,
@@ -168,3 +206,30 @@ a-layout.new-layout
     }
   }
 </style>
+
+<style lang="less">
+  .full-size-modal {
+    .arco-modal-wrapper {
+      overflow: hidden;
+      .arco-modal {
+        pointer-events: auto;
+        box-shadow: 0 2px 10px 0 var(--box-shadow-color);
+        width: calc(100vw - var(--navbar-width-collapsed) - 16px);
+        border: 1px solid var(--border-color);
+        .arco-modal-body {
+          padding: 8px 16px;
+          height: calc(100vh - var(--footer-height) - 20px);
+        }
+      }
+    }
+
+    &.full-screen {
+      .arco-modal {
+        transform: none !important;
+        position: fixed !important;
+        right: 6px !important;
+        top: 10px !important;
+      }
+    }
+  }
+</style>