feat:数据列表样式

src/styles/tdesign.css

@@ -638,3 +638,7 @@
   width: 100%;
   height: 100%;
 }
+
+.t-popup{
+  box-shadow: 0px 9px 28px 8px rgba(8,11,15,0.12), 0px 6px 16px 0px rgba(8,11,15,0.20), 0px 3px 6px -4px rgba(8,11,15,0.26);
+}

src/views/components/DataSource.vue

@@ -33,7 +33,7 @@
             </div>
             <t-dropdown-menu>
               <t-dropdown-item @click="onShowIot"> 物联网平台 </t-dropdown-item>
-              <t-dropdown-item @click="addSql"> sql数据源 </t-dropdown-item>
+              <t-dropdown-item @click="addSql"> SQL数据源 </t-dropdown-item>
               <t-dropdown-item @click="addNetwork('mqtt')"> MQTT </t-dropdown-item>
               <t-dropdown-item @click="addNetwork('websocket')"> Websocket </t-dropdown-item>
               <t-dropdown-item @click="addNetwork('http')"> HTTP </t-dropdown-item>
@@ -2630,10 +2630,25 @@ const deleteMock = (index: number) => {
 }
 
 :deep(.t-tree) {
+  .t-icon {
+      width: 14px;
+      height: 14px;
+    }
   .t-tree__label {
     font-size: 12px;
     color: #bdc7db;
   }
+  .t-tree__item[data-level='0'] {
+    .t-tree__operations{
+     visibility: hidden;
+    }
+    &:hover{
+      .t-tree__operations{
+        visibility: visible;
+      }
+    }
+  }
+  
   .t-tree__item[data-level='1'] {
     padding: 0 0 0 16px;
     .t-checkbox__label {
@@ -2642,10 +2657,17 @@ const deleteMock = (index: number) => {
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    .t-tree__operations{
+      display: none;
+    }
+
     &:hover{
       .t-checkbox__label {
         max-width: 94px;
       }
+      .t-tree__operations{
+        display: block;
+      }
     }
   }
   .t-tree__item[data-level='2'] {
@@ -2657,7 +2679,7 @@ const deleteMock = (index: number) => {
       text-overflow: ellipsis;
     }
   }
-  .t-tree__item{
+  /* .t-tree__item{
     .t-tree__operations{
       display: none;
     }
@@ -2667,7 +2689,7 @@ const deleteMock = (index: number) => {
     .t-tree__operations{
       display: block;
     }
-  }
+  } */
   .t-tree__item .t-icon {
     color: #bdc7db;
   }
@@ -2675,6 +2697,12 @@ const deleteMock = (index: number) => {
     background: none;
   }
 }
+
+:deep(.t-tree--checkable){
+  .t-tree__item[data-level='1'] {
+    padding: 0 0 0 0px;
+  }
+}
 </style>
 <style lang="postcss">
 .menu-item-a {