diff --git a/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.scss b/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.scss
index 1d99ef7b50b121cd0e9d9d73a07dba51c704ef67..62879b9ea5e6390238069d30d2e64f72b73acfe1 100644
--- a/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.scss
+++ b/packages/data-query-design/src/components/data-query-cond-tree/data-query-cond-tree.scss
@@ -1,6 +1,10 @@
+/* stylelint-disable no-descending-specificity */
 /* stylelint-disable selector-class-pattern */
 @include b(data-query-cond-tree) {
   > .el-tree {
+    --el-tree-text-color: #{getCssVar(color, text, 1)};
+    --el-tree-expand-icon-color: #{getCssVar(color, text, 3)};
+
     > .el-tree-node {
       > .el-tree-node__content.el-tree-node__content.el-tree-node__content {
         --el-tree-node-content-height: 40px;
@@ -10,6 +14,8 @@
 
       .el-tree-node__expand-icon {
         align-self: center;
+        padding: 6px;
+        margin: 0 8px;
         font-size: 14px;
       }
 
@@ -56,7 +62,6 @@
 }
 
 @include b(data-query-cond-tree-item-icon) {
-  flex: 0 0 auto;
   padding: 4px 6px 4px 0;
 }
 
@@ -79,7 +84,7 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding: 1px 5px;
+  padding: 0 5px;
 }
 
 @include b(data-query-cond-tree-item-actions) {
@@ -101,4 +106,5 @@
   align-items: center;
   justify-content: center;
   padding: 0 3px;
+  font-size: 14px;
 }
diff --git a/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss b/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss
index b93c1f575f9186d0c642e4a14b3fbea88c3c6d16..9fbe495db913cd317d436704c27042c6d1548413 100644
--- a/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss
+++ b/packages/data-query-design/src/components/data-query-design-tree/data-query-design-tree.scss
@@ -5,6 +5,9 @@
   overflow: auto;
 
   > .el-tree {
+    --el-tree-text-color: #{getCssVar(color, text, 1)};
+    --el-tree-expand-icon-color: #{getCssVar(color, text, 3)};
+
     > .el-tree-node {
       > .el-tree-node__content {
         --el-tree-node-content-height: 40px;
@@ -17,16 +20,8 @@
 
         @include b(data-query-design-tree-item) {
           padding-left: 30px;
-        }
-      }
-
-      > .el-tree-node__children {
-        > .el-tree-node {
-          > .el-tree-node__content {
-            .el-tree-node__expand-icon.is-leaf {
-              display: flex;
-            }
-          }
+          font-size: 14px;
+          color: getCssVar(color, text, 0);
         }
       }
     }
@@ -34,6 +29,7 @@
     .el-tree-node__expand-icon {
       align-self: flex-start;
       padding: 10px 6px;
+      margin: 0 8px;
       font-size: 14px;
     }
 
@@ -47,41 +43,25 @@
     .el-tree-node__children {
       background-color: rgba(var(#{getCssVarName(indigo, 0)}), 1);
     }
-
-    .el-tree-node__expand-icon.is-leaf {
-      display: none;
-    }
   }
 
   @include b(data-query-design-tree-icon) {
-    &.el-tree-node > .el-tree-node__content .el-tree-node__expand-icon.is-leaf {
+    &.el-tree-node
+      > .el-tree-node__content
+      > .el-tree-node__expand-icon.is-leaf {
       display: flex;
     }
   }
 
   @include b(data-query-design-tree-hidden-icon) {
-    &.el-tree-node > .el-tree-node__content .el-tree-node__expand-icon.is-leaf {
+    &.el-tree-node
+      > .el-tree-node__content
+      > .el-tree-node__expand-icon.is-leaf {
       display: none;
     }
   }
 }
 
-@include b(data-query-design-tree-hidden-tree) {
-  &.el-tree {
-    > .el-tree-node {
-      > .el-tree-node__children {
-        > .el-tree-node {
-          > .el-tree-node__content {
-            .el-tree-node__expand-icon.is-leaf {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 @include b(data-query-design-tree-component) {
   width: 100%;
   overflow: hidden;
@@ -116,7 +96,7 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  padding: 1px 5px;
+  padding: 0 5px;
 }
 
 @include b(data-query-design-tree-item-actions) {
@@ -140,4 +120,9 @@
   align-items: center;
   justify-content: center;
   padding: 0 3px;
+  font-size: 14px;
+
+  .el-button {
+    padding: 8px 10px;
+  }
 }
diff --git a/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.scss b/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.scss
index 127b5eeb1a20aa3be01efb1cdd99717346a4ce89..d4ad4b16974460df63f472e286fbf9879340cd32 100644
--- a/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.scss
+++ b/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.scss
@@ -24,19 +24,30 @@
   z-index: 99;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
   height: 40px;
+  overflow: hidden;
   font-size: 14px;
   line-height: 1.5;
   cursor: pointer;
+  user-select: none;
   transform: translateX(-50%);
 
   @include e(icon) {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
     margin-right: 12px;
     font-size: 22px;
   }
+
+  @include e(text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 @include b(data_query_design_operation-loading-content) {
@@ -73,7 +84,18 @@
   @include e(text) {
     flex: 1 10;
     overflow: hidden;
+    font-size: 13px;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }
+
+@include b(data_query_design_operation-preview-content) {
+  .el-tree {
+    --el-tree-node-content-height: 24px;
+  }
+
+  @include b(code-editor) {
+    margin-top: 6px;
+  }
+}
diff --git a/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.tsx b/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.tsx
index d1daa4974ee238adacb6424e6e93753d6f9eb185..17830c43f92e2fcaf2e8436263e46858d5122cf9 100644
--- a/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.tsx
+++ b/packages/data-query-design/src/panel-items/data_query_design_operation/data_query_design_operation.tsx
@@ -107,7 +107,7 @@ export default defineComponent({
                   </div>
                 )
               ) : this.controller.state.codeContent !== '' ? (
-                <div>
+                <div class={this.ns.b('preview-content')}>
                   <el-tree
                     data={this.controller.state.files}
                     current-node-key={this.controller.state.selectedKey}