From 019f8114cb480dbaa3cb13fd043ed354d4fb662e Mon Sep 17 00:00:00 2001
From: zhf <1204297681@qq.com>
Date: Fri, 20 Sep 2024 11:27:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E8=AE=BE=E8=AE=A1=E5=B7=A5=E5=85=B7=E7=9A=84?=
 =?UTF-8?q?=E5=91=88=E7=8E=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-query-cond-tree.scss                 | 10 +++-
 .../data-query-design-tree.scss               | 51 +++++++------------
 .../data_query_design_operation.scss          | 22 ++++++++
 .../data_query_design_operation.tsx           |  2 +-
 4 files changed, 49 insertions(+), 36 deletions(-)

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 1d99ef7b..62879b9e 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 b93c1f57..9fbe495d 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 127b5eeb..d4ad4b16 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 d1daa497..17830c43 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}
-- 
Gitee