style: edit ui

src/assets/style/form.less

@@ -92,30 +92,6 @@
   }
 }
 
-.arco-drawer {
-  height: calc(100% - 52px);
-  margin-top: 52px;
-  border-radius: 10px 0 0 10px;
-  box-shadow: 0 4px 10px 0 var(--border-color);
-
-  .arco-drawer-header {
-    height: 58px;
-    padding: 0 20px;
-    border-bottom: 0;
-
-    .arco-drawer-title {
-      display: flex;
-      align-items: center;
-      font-weight: 600;
-      font-size: 18px;
-    }
-  }
-
-  .arco-drawer-body {
-    padding: 8px 20px;
-  }
-}
-
 .drawer-icon {
   width: 20px;
   height: 20px;

src/assets/style/global.less

@@ -119,9 +119,9 @@ body {
 
 .menu-dropdown {
   .arco-dropdown {
-    padding: 0;
+    padding: 2px 0;
     border: 0;
-    border-radius: 6px;
+    border-radius: 4px;
     box-shadow: 0 2px 10px 0 var(--box-shadow-color);
 
     .arco-dropdown-option {
@@ -136,7 +136,7 @@ body {
       width: 100%;
       height: 32px;
       line-height: 32px;
-      border-radius: 6px;
+      border-radius: 0;
     }
 
     .arco-link {
@@ -150,7 +150,7 @@ body {
 
     .arco-link:hover {
       color: var(--small-font-color);
-      background-color: var(--light-brand-color);
+      background-color: var(--main-bg-color);
     }
 
     .arco-btn-text[type='button'] {

src/components/global-setting/index.vue

@@ -1,20 +1,18 @@
 <template lang="pug">
-.fixed-settings(v-if="!navbar" @click="setVisible")
+.fixed-settings(v-if="false" @click="setVisible")
   a-button(type="primary")
     template(#icon)
       icon-settings
-a-drawer(
+a-drawer.settings-drawer(
   unmount-on-close
+  placement="left"
   :width="262"
   :visible="globalSettings"
   :mask-closable="true"
   :footer="false"
+  :drawer-style="{ bottom: MARGIN_BOTTOM }"
   @cancel="cancel"
 )
-  template(#title)
-    svg.drawer-icon
-      use(href="#setting2")
-    | {{ $t('settings.title') }}
   a-form(layout="vertical" :model="settingsForm")
     a-form-item(:label="$t('settings.host')")
       a-input(v-model="settingsForm.host")
@@ -40,6 +38,7 @@ a-drawer(
   import { useStorage } from '@vueuse/core'
   import editorAPI from '@/api/editor'
 
+  const MARGIN_BOTTOM = `${16 + 32 * 2 + 2}px`
   const emit = defineEmits(['cancel'])
 
   const { t } = useI18n()
@@ -115,3 +114,24 @@ a-drawer(
     }
   }
 </style>
+
+<style lang="less">
+  .settings-drawer {
+    .arco-drawer {
+      height: 335px;
+      margin-left: 24px;
+      border-radius: 4px;
+      box-shadow: 0 4px 10px 0 var(--border-color);
+      .arco-form-item {
+        margin-bottom: 16px;
+      }
+      .arco-drawer-header {
+        display: none;
+      }
+
+      .arco-drawer-body {
+        padding: 16px 10px 0 10px;
+      }
+    }
+  }
+</style>

src/components/markdown-render/components/code-editor.vue

@@ -57,13 +57,13 @@
       a-tab-pane(v-if="hasChart" key="2" title="Chart")
         DataChart(:data="result" :hasHeader="false" :defaultChartForm="chartForm")
   .logs(v-if="log")
-    a-list.log-list(
+    a-list(
       size="small"
       :hoverable="true"
       :bordered="false"
       :split="false"
     )
-      Log(:codeType="lang" :log="log")
+      Log(:codeType="lang" :log="log" :has-action="false")
 </template>
 
 <script lang="ts" setup name="CodeEditor">
@@ -246,4 +246,22 @@
       min-width: 80px;
     }
   }
+
+  :deep(.arco-list-content) {
+    background: var(--main-bg-color);
+  }
+
+  :deep(.arco-list-item-action) {
+    width: 32px;
+    margin: 0;
+    padding-left: 0;
+  }
+
+  :deep(.arco-list-item-main) {
+    width: 100%;
+  }
+
+  :deep(.arco-list-small .arco-list-content-wrapper .arco-list-content > .arco-list-item) {
+    padding: 10px 20px;
+  }
 </style>

src/components/navbar/index.vue

@@ -28,7 +28,7 @@ a-layout.navbar
               use(href="#settings")
           | {{ $t('settings.title') }}
       li
-        a-dropdown.menu-dropdown(trigger="hover" position="right" :popup-max-height="false")
+        a-dropdown.menu-dropdown(trigger="click" position="right" :popup-max-height="false")
           a-button(style="width: 100%")
             template(#icon)
               svg.icon-18

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

@@ -9,7 +9,7 @@ a-tabs.result-tabs(
   @delete="deleteTab"
 )
   template(#extra)
-    a-button(status="danger" @click="clearResults") {{ $t('dashboard.clear') }}
+    a-button(status="danger" size="small" @click="clearResults") {{ $t('dashboard.clear') }}
   a-tab-pane(
     v-for="(result, index) of results"
     :key="result.key"

src/views/dashboard/modules/log.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 a-list-item.smaller-divider
-  template(v-if="log.type !== 'python' && !log.error" #actions)
+  template(v-if="hasAction && log.type !== 'python' && !log.error" #actions)
     a-button.play(type="text" @click="openEditor")
       template(#icon)
         icon-play-arrow
@@ -54,6 +54,10 @@ a-list-item.smaller-divider
       type: String,
       default: 'sql',
     },
+    hasAction: {
+      type: Boolean,
+      default: true,
+    },
   })
 
   const hasExecutionTime = Reflect.has(props.log, 'execution_time_ms')

src/views/dashboard/modules/logs-layout.vue

@@ -11,12 +11,14 @@ a-card.logs-card(:bordered="false")
       @click="clear"
     ) {{ $t('dashboard.clear') }}
   a-list(
-    v-if="logs.length"
     size="small"
     :hoverable="true"
     :bordered="false"
+    :class="{ 'empty-list': !logs.length }"
   )
     Log(v-for="log of logs" :key="log" :log="log")
+    template(#empty)
+      EmptyStatus.empty-log
 </template>
 
 <script lang="ts" name="Log" setup>
@@ -43,16 +45,27 @@ a-card.logs-card(:bordered="false")
       font-weight: 800;
     }
   }
+  .empty-list {
+    :deep(.arco-list-content) {
+      border: none;
+    }
+  }
   :deep(.arco-list) {
     border-radius: 0;
   }
+
   :deep(.arco-list-content) {
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
     width: calc(100% - 32px);
     display: flex;
     flex-direction: column-reverse;
   }
+
+  :deep(.arco-list-item-main) {
+    width: calc(100% - 32px);
+  }
+
   :deep(.arco-list-item:not(:last-child)) {
     border-color: var(--border-color);
   }
@@ -68,11 +81,13 @@ a-card.logs-card(:bordered="false")
     width: 32px;
   }
 
-  :deep(.arco-list-item-main) {
-    width: calc(100% - 32px);
-  }
-
   :deep(.arco-list-small .arco-list-content-wrapper .arco-list-content > .arco-list-item) {
     padding: 4px 10px 4px 20px;
   }
+
+  .empty-log {
+    border: none;
+    flex-direction: column;
+    height: 50vh;
+  }
 </style>

src/views/dashboard/modules/query-modal/index.vue

@@ -4,7 +4,7 @@ a-modal.query-modal(
   :class="{ 'full-screen': isFullscreen }"
   :ok-text="$t('guide.confirm')"
   :hide-cancel="true"
-  :width="isFullscreen ? 'calc(100vw - 286px)' : 636"
+  :width="isFullscreen ? `calc(100vw - ${MENU_WIDTH}px)` : 636"
   :mask="false"
   :align-center="false"
   :mask-style="{ 'pointer-events': 'none' }"
@@ -15,15 +15,16 @@ a-modal.query-modal(
   template(#title)
     | {{ $t('menu.dashboard.query') }}
     a-space(fill :size="0")
-      a-button.screen-button(type="text" @click="clearCode")
+      a-button.screen-button(type="text" size="small" @click="clearCode")
         template(#icon)
           svg.icon-18
             use(href="#clear")
-      a-button.screen-button(type="text" @click="isFullscreen = !isFullscreen")
+      a-button.screen-button(type="text" size="small" @click="isFullscreen = !isFullscreen")
         template(#icon)
-          svg.icon-16(v-if="!isFullscreen")
+          svg.icon-18(v-if="isFullscreen")
+            use(href="#zoom-out")
+          svg.icon-16(v-else)
             use(href="#zoom")
-          icon-fullscreen-exit(v-else)
   a-space.editor-space(align="start" fill :size="0")
     a-scrollbar(style="height: calc(100vh - 68px); overflow: auto")
       Editor
@@ -39,6 +40,7 @@ a-modal.query-modal(
 
   const HEADER_HEIGHT = 48
   const MODAL_TO_TOP = 20
+  const MENU_WIDTH = 258
   const isFullscreen = ref(false)
   const isLeft = ref(false)
 
@@ -57,8 +59,6 @@ a-modal.query-modal(
 </script>
 
 <style lang="less" scoped>
-  .arco-btn-size-medium.arco-btn-only-icon {
-  }
   .button-space {
     width: 25px;
     height: 25px;
@@ -102,10 +102,18 @@ a-modal.query-modal(
           font-size: 22px;
           color: var(--small-font-color);
           display: flex;
+          height: 28px;
+          width: 28px;
+          align-items: center;
+          justify-content: center;
+          border-radius: 6px;
           svg {
             stroke-width: 3px;
           }
         }
+        .arco-modal-close-btn:hover {
+          background: var(--th-bg-color);
+        }
       }
     }
 
@@ -145,34 +153,59 @@ a-modal.query-modal(
             background: transparent;
           }
           .arco-tabs-tab {
-            padding: 4px 8px;
-            margin: 10px 4px 0 0;
+            padding: 4px 0;
+            margin: 10px 0 0 0;
             background: var(--th-bg-color);
-            border-radius: 4px;
             color: var(--main-font-color);
-            height: 30px;
+            border-radius: 0 4px 4px 0;
+            &:first-of-type {
+              border-radius: 4px 0 0 4px;
+              > .arco-tabs-tab-title {
+                border-right: 1px solid var(--border-color);
+              }
+            }
+
             &.arco-tabs-tab-active {
               color: var(--brand-color);
               font-weight: 800;
+              letter-spacing: -0.5px;
             }
-            > .arco-tabs-title {
+            > .arco-tabs-tab-title {
+              width: 85px;
+              padding-left: 8px;
               display: flex;
+              font-size: 16px;
+              height: 20px;
+
+              &::before {
+                border-radius: 4px;
+                left: 0;
+                right: 0;
+                top: -4px;
+                bottom: -4px;
+              }
             }
           }
         }
       }
       > .arco-tabs-nav-type-rounded {
         border-bottom: 1px solid var(--border-color);
         padding-bottom: 10px;
+        .arco-icon-hover:hover::before {
+          width: 20px;
+          background-color: var(--card-bg-color);
+        }
         > .arco-tabs-nav-tab {
           > .arco-tabs-nav-tab-list {
             > .arco-tabs-tab:not(:last-of-type) {
               margin-right: 10px;
             }
             > .arco-tabs-tab {
               background-color: var(--th-bg-color);
-              border-radius: 6px;
-              padding: 10px 10px;
+              border-radius: 4px;
+              padding: 6px 8px;
+              font-size: 14px;
+              line-height: 16px;
             }
           }
         }

src/views/dashboard/modules/table-list.vue

@@ -54,8 +54,7 @@ a-spin(style="width: 100%" :loading="tablesLoading")
                   a-button(type="text" @click="copy(nodeData.title)") Copy name
     template(#switcher-icon)
       IconDown
-  .tree-scrollbar(v-else)
-    EmptyStatus
+  EmptyStatus.empty(v-else)
 </template>
 
 <script lang="ts" setup name="TableList">