From bd50a860a305dc7ecda9fa8e6aa360d4cd559fce Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 15 Aug 2024 16:59:18 +0800
Subject: [PATCH] =?UTF-8?q?style(editor):=20=E4=BC=98=E5=8C=96=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=BA=90=E6=96=B0=E5=A2=9E=E5=88=97=E8=A1=A8=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/layouts/sidebar/Sidebar.vue    | 20 ++++++++++++--
 .../data-source/DataSourceListPanel.vue       | 26 +++++++++----------
 packages/editor/src/theme/data-source.scss    | 13 ++++++----
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index cd8e4724..d0e23da2 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -148,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
@@ -196,7 +196,23 @@ const props = withDefaults(
 const services = inject<Services>('services');
 
 const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
-const { height: columnLeftHeight } = useEditorContentHeight();
+const { height: editorContentHeight } = useEditorContentHeight();
+const columnLeftHeight = ref(0);
+
+const unWatchEditorContentHeight = watch(
+  editorContentHeight,
+  (height) => {
+    if (height) {
+      columnLeftHeight.value = height * 0.5;
+      nextTick().then(() => {
+        unWatchEditorContentHeight();
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const activeTabName = ref(props.data?.status);
 
diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
index 49c86167..ad98f81d 100644
--- a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -2,23 +2,21 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover v-if="editable" placement="right">
+      <TMagicPopover v-if="editable" placement="right" trigger="hover" popper-class="data-source-list-panel-add-menu">
         <template #reference>
           <TMagicButton type="primary" size="small">新增</TMagicButton>
         </template>
-        <div class="data-source-list-panel-add-menu">
-          <ToolButton
-            v-for="(item, index) in datasourceTypeList"
-            :data="{
-              type: 'button',
-              text: item.text,
-              handler: () => {
-                addHandler(item.type);
-              },
-            }"
-            :key="index"
-          ></ToolButton>
-        </div>
+        <ToolButton
+          v-for="(item, index) in datasourceTypeList"
+          :data="{
+            type: 'button',
+            text: item.text,
+            handler: () => {
+              addHandler(item.type);
+            },
+          }"
+          :key="index"
+        ></ToolButton>
       </TMagicPopover>
 
       <slot name="data-source-panel-search"></slot>
diff --git a/packages/editor/src/theme/data-source.scss b/packages/editor/src/theme/data-source.scss
index bb1c0c5b..3bf6cc83 100644
--- a/packages/editor/src/theme/data-source.scss
+++ b/packages/editor/src/theme/data-source.scss
@@ -17,12 +17,15 @@
 }
 
 .data-source-list-panel-add-menu {
-  .tmagic-design-button {
-    width: 100%;
-    text-align: left;
+  padding: 4px 0;
 
-    span {
-      width: 100%;
+  .menu-item {
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+
+    &:hover {
+      background-color: $--hover-color;
     }
   }
 }