style(editor): 优化数据源新增列表样式

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);
 

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>

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;
     }
   }
 }