feat(editor): support resize

GreptimeTeam · Dec 19, 2023 · 52e5a96 · 52e5a96
1 parent 9edfb0b
commit 52e5a96
Showing 1 changed file with 41 additions and 25 deletions.
diff --git a/src/views/dashboard/query/editor.vue b/src/views/dashboard/query/editor.vue
@@ -49,31 +49,32 @@ a-card.editor-card(:bordered="false")
                   a-list-item
                     span.ml-2 {{ $t('dashboard.examples') }}
                     a-typography-text(v-for="item of durationExamples" :key="item" code) {{ item }}
-  a-tabs.query-tabs(:default-active-key="'sql'" :active-key="queryType")
-    a-tab-pane(key="sql")
-      CodeMirror(
-        v-model="codes.sql"
-        :style="style"
-        :spellcheck="spellcheck"
-        :autofocus="autofocus"
-        :indent-with-tab="indentWithTab"
-        :tabSize="tabSize"
-        :extensions="extensions.sql"
-        @ready="handleReadySql"
-        @update="codeUpdate('sql')"
-      )
-    a-tab-pane(key="promql")
-      CodeMirror(
-        v-model="codes.promql"
-        :style="style"
-        :spellcheck="spellcheck"
-        :autofocus="autofocus"
-        :indent-with-tab="indentWithTab"
-        :tabSize="tabSize"
-        :extensions="extensions.promql"
-        @ready="handleReadyPromql"
-        @update="codeUpdate('promql')"
-      )
+  a-resize-box(:directions="['bottom']")
+    a-tabs.query-tabs(:default-active-key="'sql'" :active-key="queryType")
+      a-tab-pane(key="sql")
+        CodeMirror(
+          v-model="codes.sql"
+          :style="style"
+          :spellcheck="spellcheck"
+          :autofocus="autofocus"
+          :indent-with-tab="indentWithTab"
+          :tabSize="tabSize"
+          :extensions="extensions.sql"
+          @ready="handleReadySql"
+          @update="codeUpdate('sql')"
+        )
+      a-tab-pane(key="promql")
+        CodeMirror(
+          v-model="codes.promql"
+          :style="style"
+          :spellcheck="spellcheck"
+          :autofocus="autofocus"
+          :indent-with-tab="indentWithTab"
+          :tabSize="tabSize"
+          :extensions="extensions.promql"
+          @ready="handleReadyPromql"
+          @update="codeUpdate('promql')"
+        )
 </template>
 
 <script lang="ts" setup name="Editor">
@@ -246,16 +247,31 @@ a-card.editor-card(:bordered="false")
 <style lang="less" scoped>
   .editor-card {
     width: 100%;
+    :deep(.ͼo) {
+      height: 100%;
+    }
+  }
+
+  .arco-resizebox {
+    height: 260px;
   }
 </style>
 
 <style lang="less">
   .query-tabs {
+    height: 100%;
     > .arco-tabs-nav {
       height: 0;
     }
     > .arco-tabs-content {
       padding-top: 0;
+      height: 100%;
+      > .arco-tabs-content-list {
+        height: 100%;
+        .arco-tabs-pane {
+          height: 100%;
+        }
+      }
     }
   }
 </style>