From 5f042d8fa87e901628f2308f9a746c89075185c3 Mon Sep 17 00:00:00 2001
From: * <8>
Date: Wed, 23 Mar 2022 11:08:28 +0800
Subject: [PATCH] Match-id-af5f4471321b0cdce3f5343e1c2f451887b30c17

---
 libs/extension/src/components/VTree.less | 10 ++++++
 libs/extension/src/components/VTree.tsx  |  6 ++--
 libs/extension/webpack.dev.js            | 39 +++++++++++++-----------
 3 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 libs/extension/src/components/VTree.less

diff --git a/libs/extension/src/components/VTree.less b/libs/extension/src/components/VTree.less
new file mode 100644
index 00000000..81b716be
--- /dev/null
+++ b/libs/extension/src/components/VTree.less
@@ -0,0 +1,10 @@
+.tree_container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.tree_item{
+  width: 100%;
+}
\ No newline at end of file
diff --git a/libs/extension/src/components/VTree.tsx b/libs/extension/src/components/VTree.tsx
index 040ea892..59c8ec0c 100644
--- a/libs/extension/src/components/VTree.tsx
+++ b/libs/extension/src/components/VTree.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'horizon';
+import styles from './VTree.less';
 
 export interface IData {
   id: string;
@@ -24,7 +25,7 @@ function Item({ name, style, userKey, hasChild, onExpand, id, indentation }: IIt
     onExpand(id);
   }
   return (
-    <div style={style}>
+    <div style={style} className={styles.tree_item}>
       <div style={{ display: 'inline-block', marginLeft: indentation * 20, width: 10 }} onClick={onClickExpand} >{showIcon}</div>
       {name + key}
     </div>
@@ -72,7 +73,6 @@ function VTree({ data }: { data: IData[] }) {
           style={{
             position: 'absolute',
             transform: `translateY(${totalHeight}px)`,
-            width: '100%'
           }}
           onExpand={changeExpandNode}
           {...item} />
@@ -92,7 +92,7 @@ function VTree({ data }: { data: IData[] }) {
   }
 
   return (
-    <div style={{ position: 'absolute', width: '100%', height: '100%', overflowY: 'auto' }} onScroll={scroll}>
+    <div className={styles.tree_container} onScroll={scroll}>
       {showList}
       {/* 确保有足够的高度 */}
       <div style={{ marginTop: totalHeight }} />
diff --git a/libs/extension/webpack.dev.js b/libs/extension/webpack.dev.js
index 57f8730a..0ee87691 100644
--- a/libs/extension/webpack.dev.js
+++ b/libs/extension/webpack.dev.js
@@ -16,24 +16,29 @@ module.exports = {
     extensions: ['.ts', '.tsx', '.js']
   },
   module: {
-    rules: [{
-      test: /\.tsx?$/,
-      exclude: /node_modules/,
-      use: [
-        {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', 
-            '@babel/preset-typescript',
-            ['@babel/preset-react', {
-              runtime: 'classic',
-              "pragma": "Horizon.createElement",
-              "pragmaFrag": "Horizon.Fragment", 
-            }]],
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env',
+                '@babel/preset-typescript',
+                ['@babel/preset-react', {
+                  runtime: 'classic',
+                  "pragma": "Horizon.createElement",
+                  "pragmaFrag": "Horizon.Fragment",
+                }]],
+            }
           }
-        }
-      ]
-    }]
+        ]
+      },
+      {
+        test: /\.less/i,
+        use: ["style-loader", { loader: "css-loader", options: { modules: true } }, 'less-loader'],
+      }]
   },
   externals: {
     'horizon': 'Horizon',