feat(datasource): Datasource table virtualization

Author: dataeaseShu

.gitignore

@@ -6,6 +6,7 @@ node_modules/
 /playwright/.cache/
 *.lock
 *-lock.json
+components.d.ts
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

frontend/src/style.less

@@ -12,9 +12,8 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-
   /* --primary-color: var(--el-color-primary); */
-  --primary-color: #1CBA90;
+  --primary-color: #1cba90;
   --primary-light: #e8f0fe;
   --secondary-color: #5f6368;
   --danger-color: #ea4335;
@@ -30,7 +29,7 @@
   --border-radius: 8px;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
-  --el-color-primary: #1CBA90 !important;
+  --el-color-primary: #1cba90 !important;
 }
 
 a {
@@ -50,6 +49,12 @@ body {
   min-height: 100vh;
 }
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 #app {
   width: 100%;
   margin: 0;
@@ -67,3 +72,40 @@ body {
     background-color: #f9f9f9;
   }
 }
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item_primary {
+  height: 40px;
+  border-radius: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  .ed-icon + .label {
+    margin-left: 5.33px;
+  }
+
+  .label {
+    width: 85%;
+    font-size: 14px;
+    .ellipsis;
+  }
+
+  &:not(.active):hover {
+    background: rgba(31, 35, 41, 0.1);
+  }
+
+  &.active {
+    background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+    color: var(--ed-color-primary);
+  }
+}
+
+
+