style: 样式拆分.

orion-ops-ui/src/components/app/setting/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 左侧固定配置按钮 -->
   <div v-if="!appStore.navbar" class="fixed-settings" @click="open">
     <a-button type="primary">
       <template #icon>
@@ -6,18 +7,21 @@
       </template>
     </a-button>
   </div>
+  <!-- 偏好配置抽屉 -->
   <a-drawer v-model:visible="visible"
             title="偏好设置"
             :width="300"
             :footer="false"
             :unmount-on-close="true"
             @cancel="() => setVisible(false)">
-    <!-- 布局设置 -->
-    <Block :options="layoutOpts" title="布局设置" />
-    <!-- 数据设置 -->
-    <Block :options="dataOpts" title="数据设置" />
-    <!-- 页面视图 -->
-    <Block :options="viewsOpts" title="页面视图" />
+    <div class="preference-containers">
+      <!-- 布局设置 -->
+      <Block :options="layoutOpts" title="布局设置" />
+      <!-- 数据设置 -->
+      <Block :options="dataOpts" title="数据设置" />
+      <!-- 页面视图 -->
+      <Block :options="viewsOpts" title="页面视图" />
+    </div>
   </a-drawer>
 </template>
 
@@ -151,4 +155,9 @@
       vertical-align: -4px;
     }
   }
+
+  .preference-containers{
+    padding: 0 16px;
+  }
+
 </style>

orion-ops-ui/src/components/asset/host-group/host-group-tree.vue

@@ -3,7 +3,7 @@
     <!-- 分组树 -->
     <a-tree v-if="treeData.length"
             ref="tree"
-            class="tree-container"
+            class="tree-container block-tree"
             :blockNode="true"
             :draggable="editable"
             :data="treeData"
@@ -359,41 +359,8 @@
     color: var(--color-text-3);
   }
 
-  :deep(.arco-tree-node) {
-    cursor: unset;
-
-    .arco-tree-node-switcher {
-      margin-left: 8px;
-    }
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-  }
-
-  :deep(.arco-tree-node-selected) {
-    background-color: var(--color-fill-2);
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-  }
-
   :deep(.arco-tree-node-title) {
     padding: 0 80px 0 0;
-    height: 32px;
-
-    &:hover {
-      background-color: var(--color-fill-1);
-    }
-
-    .arco-tree-node-title-text {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
   }
 
   .node-title-wrapper {