UI optimize

zhaohehuhu · Nov 6, 2023 · 5ac8ce3 · 5ac8ce3
1 parent f23b6de
commit 5ac8ce3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git 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/...b-ui/src/components/monaco-editor/type.ts → ...-ui/src/components/monaco-editor/types.ts b/...b-ui/src/components/monaco-editor/type.ts → ...-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
@@ -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
@@ -18,7 +18,6 @@
 
 <template>
   <main>
-    Swagger
     <div id="swagger-ui" class="swagger-ui"> </div>
   </main>
 </template>