From 5ac8ce377412593519daff0920a2c2bee884be6f Mon Sep 17 00:00:00 2001
From: weitong <weitong@cisco.com>
Date: Mon, 6 Nov 2023 16:52:29 +0800
Subject: [PATCH] UI optimize

---
 .../src/components/monaco-editor/index.vue    |  2 +-
 .../monaco-editor/{type.ts => types.ts}       |  0
 .../src/layout/components/aside/index.vue     | 38 ++++++++++---------
 .../web-ui/src/views/swagger/index.vue        |  1 -
 4 files changed, 21 insertions(+), 20 deletions(-)
 rename kyuubi-server/web-ui/src/components/monaco-editor/{type.ts => types.ts} (100%)

diff --git a/kyuubi-server/web-ui/src/components/monaco-editor/index.vue b/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
index 4c387172a1a..a98a3f31b79 100644
--- a/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
+++ b/kyuubi-server/web-ui/src/components/monaco-editor/index.vue
@@ -24,7 +24,7 @@
   import * as monaco from 'monaco-editor'
   import { format } from 'sql-formatter'
   import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-  import { editorProps } from './type'
+  import { editorProps } from './types'
   import { useEditorStore } from '@/pinia/editor'
   import { ref, toRaw, watch, onBeforeUnmount, onMounted } from 'vue'
 
diff --git a/kyuubi-server/web-ui/src/components/monaco-editor/type.ts b/kyuubi-server/web-ui/src/components/monaco-editor/types.ts
similarity index 100%
rename from kyuubi-server/web-ui/src/components/monaco-editor/type.ts
rename to kyuubi-server/web-ui/src/components/monaco-editor/types.ts
diff --git a/kyuubi-server/web-ui/src/layout/components/aside/index.vue b/kyuubi-server/web-ui/src/layout/components/aside/index.vue
index 78cbbc7743c..be8121a3633 100644
--- a/kyuubi-server/web-ui/src/layout/components/aside/index.vue
+++ b/kyuubi-server/web-ui/src/layout/components/aside/index.vue
@@ -20,7 +20,7 @@
   <header>
     <img v-if="!isCollapse" src="@/assets/kyuubi-logo.svg" />
     <img v-else class="collapsed-logo" src="@/assets/kyuubi.png" />
-    <pre v-if="!isCollapse">{{ version }}</pre>
+    <span v-if="!isCollapse">{{ version }}</span>
   </header>
   <c-menu :is-collapse="isCollapse" :active-path="activePath" :menus="menus" />
 </template>
@@ -42,35 +42,37 @@
 </script>
 
 <style lang="scss" scoped>
+  $height: 64px;
   header {
+    width: 100%;
     position: absolute;
     top: 0;
     left: 0;
-    height: 64px;
-    padding-left: 16px;
-    line-height: 64px;
+    height: $height;
+    line-height: $height;
+    padding: 0 16px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    box-sizing: border-box;
     img {
-      display: inline-block;
       width: 140px;
       height: 50px;
-      top: -10px;
-      position: relative;
-      vertical-align: middle;
+      &.collapsed-logo {
+        width: 40px;
+        height: 40px;
+        position: relative;
+        top: -4px;
+        left: -4px;
+      }
     }
-    pre {
+    span {
+      position: relative;
+      top: 17px;
       font-size: 10px;
-      display: inline-block;
-      width: 100px;
-      margin-top: 20px;
-      text-align: center;
       font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
       color: rgba(255, 255, 255, 0.87);
     }
-    .collapsed-logo {
-      width: 40px;
-      height: 40px;
-      margin-top: 30px;
-    }
   }
   .el-menu {
     margin-top: 64px;
diff --git a/kyuubi-server/web-ui/src/views/swagger/index.vue b/kyuubi-server/web-ui/src/views/swagger/index.vue
index 7f8fb7f99a8..1ff671d1f14 100644
--- a/kyuubi-server/web-ui/src/views/swagger/index.vue
+++ b/kyuubi-server/web-ui/src/views/swagger/index.vue
@@ -18,7 +18,6 @@
 
 <template>
   <main>
-    Swagger
     <div id="swagger-ui" class="swagger-ui"> </div>
   </main>
 </template>