diff --git a/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx b/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx
index 1c4461922..1b6a9e3fb 100644
--- a/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx
@@ -4,8 +4,7 @@ import { fuzzysearch } from '@tachybase/utils/client';
 
 import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
 import { useAsyncEffect, useDeepCompareEffect } from 'ahooks';
-import { Button, Collapse, CollapseProps, Input, Space, Tabs } from 'antd';
-import { createStyles } from 'antd-style';
+import { Button, Collapse, CollapseProps, Input, Space } from 'antd';
 import flat from 'flat';
 import { useTranslation } from 'react-i18next';
 import { useInView } from 'react-intersection-observer';
@@ -15,36 +14,7 @@ import { useCollectionManager } from '../../../../data-source';
 import { markRecordAsNew } from '../../../../data-source/collection-record/isNewRecord';
 import { useAssociationFieldContext } from '../hooks';
 import { useFieldServiceFilter } from './hook';
-
-const useStyles = createStyles(({ css }) => {
-  return {
-    container: css`
-      display: flex;
-      flex-direction: row;
-      max-height: 30vh;
-      .left-pane {
-        display: flex;
-        flex-direction: column;
-        width: 200px;
-        background-color: red;
-        overflow-y: auto;
-        div {
-          cursor: pointer;
-        }
-      }
-      .right-pane {
-        display: flex;
-        flex-direction: column;
-        overflow-y: auto;
-        flex: 1;
-        background-color: blue;
-        div {
-          margin-bottom: 2px;
-        }
-      }
-    `,
-  };
-});
+import { useStyles } from './styles';
 
 export const ObservableItem = ({ item, onChange, leftRef }) => {
   const { ref } = useInView({
diff --git a/packages/core/client/src/schema-component/antd/association-field/SubTabs/styles.ts b/packages/core/client/src/schema-component/antd/association-field/SubTabs/styles.ts
new file mode 100644
index 000000000..96e920577
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/association-field/SubTabs/styles.ts
@@ -0,0 +1,54 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => {
+  return {
+    container: css`
+      display: flex;
+      flex-direction: row;
+      max-height: 30vh;
+      .left-pane {
+        padding: 2px;
+        display: flex;
+        font-weight: 500;
+        flex-direction: column;
+        width: 100px;
+        overflow-y: auto;
+        /* 隐藏滚动条 微软/火狐 */
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        div {
+          background-color: #ddd;
+          white-space: normal;
+          cursor: pointer;
+          margin-bottom: 2px;
+          padding-left: 2px;
+          padding-right: 2px;
+        }
+        div:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+      /* 隐藏滚动条 谷歌浏览器 */
+      .left-pane::-webkit-scrollbar {
+        display: none;
+      }
+
+      .right-pane {
+        padding: 2px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        flex: 1;
+        div {
+          margin-bottom: 1em;
+          .ant-btn {
+            margin-right: 2px;
+          }
+        }
+        div:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+    `,
+  };
+});