diff --git a/packages/tree-design/CHANGELOG.md b/packages/tree-design/CHANGELOG.md
index 3692d53610b90aa523d356a4d762ad43e4f1091f..25f636bdaa2521bea5912eb189912331563d5233 100644
--- a/packages/tree-design/CHANGELOG.md
+++ b/packages/tree-design/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+### Change
+
+-   更新树设计工具操作和预览区样式
+
 ### Add
 
 -   更新预览区默认展开根节点，左侧预览区树节点点击时，操作区进行对应节点选中
diff --git a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss
index 62205f2c065acc5bb2f4180d8ea1654bfb1db0c2..2754a3ace97cc9908f7f796ece4f671aa074b030 100644
--- a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss
+++ b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.scss
@@ -1,20 +1,33 @@
 @include b('tree-design-popover') {
-  padding: 5px;
+  padding: getCssVar(spacing, tight);
   @include e('search') {
     display: flex;
-    gap: 4px;
+    gap: getCssVar(spacing, extra-tight);
     align-items: center;
     @include m('title') {
       flex: 1;
+      font-size: getCssVar(font-size, regular);
       white-space: nowrap;
     }
+    @include m('input') {
+      --el-input-height: #{getCssVar(spacing, loose)};
+      font-size: getCssVar(font-size, small);
+      .el-input__suffix {
+        font-size: getCssVar(font-size, regular);
+      }
+    }
+  }
+  @include e('nodeitems'){
+    padding: getCssVar(spacing,extra-tight) 0;
   }
   @include e('item') {
     position: relative;
     display: flex;
     align-items: center;
-    height: 24px;
-    font-size: 12px;
+    padding-left: getCssVar(spacing, base-tight);
+    height: getCssVar(font-size, header-3);
+    font-size: getCssVar(font-size, small);
+    line-height: 1.5;
     cursor: pointer;
     @include m('index') {
       position: absolute;
@@ -25,7 +38,7 @@
       justify-content: center;
       width: 100%;
       height: 100%;
-      background-color: lightgray;
+      background-color: #bcbcbc;
       opacity: 0.8;
       @include when('selected') {
         display: flex;
@@ -36,12 +49,22 @@
       height: 24px;
       line-height: 24px;
       text-align: center;
-      background-color: getCssVar(color, border);
+      background: #e6ebf1;
+      color: #808695;
       border-radius: 50%;
     }
   }
   @include e('footer') {
     display: flex;
     justify-content: end;
+
+    @include m('btn') {
+      font-size: getCssVar(font-size, regular);
+      margin-right: 12px;
+      cursor: pointer;
+      &:hover {
+        color: #57a3f3;
+      }
+    }
   }
 }
diff --git a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx
index 098346e4f886b26189ec6a8ff8c0fa00b65437f5..f9fedce36ef2564d4a21bf11d0d7ae0428459615 100644
--- a/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx
+++ b/packages/tree-design/src/components/tree-design-popover/tree-design-popover.tsx
@@ -54,6 +54,7 @@ export default defineComponent({
           <el-input
             class={this.ns.em('search', 'input')}
             v-model={this.searchValue}
+            placeholder='过滤节点'
           >
             {{
               suffix: () => {
@@ -62,7 +63,7 @@ export default defineComponent({
             }}
           </el-input>
         </div>
-        <div>
+        <div class={this.ns.e('nodeitems')}>
           {this.items
             .filter((item: IData) => {
               return (
@@ -92,12 +93,12 @@ export default defineComponent({
             })}
         </div>
         <div class={this.ns.e('footer')}>
-          <el-button type='text' onClick={this.onOk}>
+          <div class={this.ns.em('footer', 'btn')} onClick={this.onOk}>
             确定
-          </el-button>
-          <el-button type='text' onClick={this.onCancel}>
+          </div>
+          <div class={this.ns.em('footer', 'btn')} onClick={this.onCancel}>
             取消
-          </el-button>
+          </div>
         </div>
       </div>
     );
diff --git a/packages/tree-design/src/components/tree-shell/tree-shell.scss b/packages/tree-design/src/components/tree-shell/tree-shell.scss
index 9e3a45b857b067ef16d9cdcaeea919c7c4e70996..ca1cc0508f4407da427a4bb0f2bc81db9e1d3bb5 100644
--- a/packages/tree-design/src/components/tree-shell/tree-shell.scss
+++ b/packages/tree-design/src/components/tree-shell/tree-shell.scss
@@ -4,36 +4,19 @@ $tree-shell: (
 
 // 亮色主题
 @mixin mixin-light-theme {
+
   #{getCssVarName(grey, 9)}: 29, 31, 35;
-  #{getCssVarName(control-treeview, item-disabled-button)}: rgba(
-    var(#{getCssVarName(grey, 4)}),
-    0.5
-  );
-  #{getCssVarName(control-treeview, row-hover-bg-color)}: rgba(
-    var(#{getCssVarName(blue, cyan, 4)}),
-    1
-  );
-
-  #{getCssVarName(editor, default, text-color)}: rgba(
-    var(#{getCssVarName(grey, 9)}),
-    1
-  );
-  #{getCssVarName(control-treeview, row-select-color)}: rgba(
-    var(#{getCssVarName(grey, 9)}),
-    1
-  );
-  #{getCssVarName(control-treeview, row-hover-color)}: rgba(
-    var(#{getCssVarName(grey, 9)}),
-    1
-  );
-  #{getCssVarName(control-treeview, text-color)}: rgba(
-    var(#{getCssVarName(grey, 9)}),
-    1
-  );
-  #{getCssVarName(control-treeview, row-select-bg-color)}: rgba(
-    var(#{getCssVarName(blue, cyan, 0)}),
-    1
-  );
+  #{getCssVarName(control-treeview, item-disabled-button)}: rgba(var(#{getCssVarName(grey, 4)}),0.5);
+  #{getCssVarName(control-treeview, row-hover-bg-color)}: rgba(#e6f7ff, 1 );
+
+  #{getCssVarName(editor, default, text-color)}: rgba(  var(#{getCssVarName(grey, 9)}),  1);
+  #{getCssVarName(control-treeview, row-select-color)}: rgba(var(#{getCssVarName(grey, 9)}), 1);
+  #{getCssVarName(control-treeview, row-hover-color)}: rgba(var(#{getCssVarName(grey, 9)}), 1);
+  #{getCssVarName(control-treeview, text-color)}: rgba(var(#{getCssVarName(grey, 9)}), 1);
+  #{getCssVarName(control-treeview, row-select-bg-color)}: rgba(#bae7ff, 1);
+
+  --el-tree-node-hover-bg-color:rgba(#bae7ff, 1);
+  --el-tree-expand-icon-color:rgba(  var(#{getCssVarName(grey, 9)}),  1);
 }
 
 @include b('tree-shell') {
diff --git a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss
index 1e7e4df37abb557fcc9e44920b2eb4b3aff5f3c1..159428de664aae72857d2ccc9a8535fdefa67460 100644
--- a/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss
+++ b/packages/tree-design/src/panel-items/tree_design_content/tree-design-content.scss
@@ -1,4 +1,5 @@
 @include b(tree-design-content) {
   width: 100%;
   height: 100%;
+  border: 1px  solid getCssVar(color, border);
 }
diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss
index ea461f11a8259e045644b3021fcd4bea4de7eac4..45bb2c9d901095157e081e22ea3fc5d537be0827 100644
--- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss
+++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.scss
@@ -5,6 +5,7 @@ $tree_design_operation: (
   header-caption-padding: 5px,
   header-title-padding: 10px,
   header-height: 52px,
+  header-line-height: 21px,
   collapse-item-icon-margin: 4px,
   item-node-padding: 5px,
   item-select: getCssVar(color, primary, light-active),
@@ -26,7 +27,9 @@ $tree_design_operation: (
     align-items: center;
     padding: getCssVar(tree_design_operation, header-caption-padding);
     color: getCssVar(color, primary, text);
-    background-color: getCssVar(color, primary);
+    background-color: getCssVar(tree_design_operation, item-selected-bg);
+    font-size: getCssVar(font-size, regular);
+    line-height: getCssVar(tree_design_operation, header-line-height);
     border-radius: getCssVar(border-radius, small);
     @include m('title') {
       flex: 1;
@@ -36,10 +39,13 @@ $tree_design_operation: (
   }
   @include e('icon') {
     padding: getCssVar(spacing, extra, tight);
-    color: getCssVar(color, primary);
+    color: getCssVar(color, text, 0);
     cursor: pointer;
     background-color: getCssVar(color, primary, text);
     border-radius: getCssVar(border-radius, small);
+    &:hover {
+      color: getCssVar(tree_design_operation, item-selected-bg);
+    }
   }
   @include e('search') {
     display: flex;
@@ -52,6 +58,7 @@ $tree_design_operation: (
     @include m('icon') {
       padding: getCssVar(tree_design_operation, item-node-padding);
       cursor: pointer;
+      opacity: 0.5;
     }
   }
   @include when('selected') {
@@ -111,10 +118,20 @@ $tree_design_operation: (
     font-size: getCssVar(tree_design_operation, item-actions-font-size);
     @include m('icon') {
       margin: 0 getCssVar(tree_design_operation, item-actions-icon-margin);
-      color: getCssVar(color, primary);
+      color: getCssVar(color, text, 1);
       cursor: pointer;
       background-color: getCssVar(color, primary, text);
       border-radius: getCssVar(border-radius, small);
+      @include when('delete') {
+        &:hover {
+          color: getCssVar(color, danger);
+        }
+      }
+      @include when('add') {
+        &:hover {
+          color: getCssVar(tree_design_operation, item-selected-bg);
+        }
+      }
     }
   }
   @include e('children') {
@@ -146,6 +163,11 @@ $tree_design_operation: (
       border: 1px solid getCssVar(color, border);
       border-radius: getCssVar(border-radius, small);
       opacity: 0;
+      @include when('delete') {
+        &:hover {
+          color: getCssVar(color, danger);
+        }
+      }
     }
 
     &:hover {
@@ -161,11 +183,12 @@ $tree_design_operation: (
 }
 
 // 暗色主题
-:root.studio_dark {
+:root.studio_dark,:root.dark {
   @include b('tree_design_operation-header') {
     @include e('icon') {
       color: getCssVar(color, primary, text);
       background-color: transparent;
+      font-size: getCssVar(font-size,header-6);
     }
     @include e('caption') {
       background-color: getCssVar(color, bg, 0);
diff --git a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx
index 1a7b182b819b056b0374f525fc83a9135b8c647f..3cac6e5186079e13123e19aeb348eb005dc30453 100644
--- a/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx
+++ b/packages/tree-design/src/panel-items/tree_design_operation/tree_design_operation.tsx
@@ -67,8 +67,11 @@ export default defineComponent({
           </div>
           <ion-icon
             name='close-outline'
-            title='移除'
-            class={ns.bem('tree-item', 'rs-item', 'icon')}
+            title='删除'
+            class={[
+              ns.bem('tree-item', 'rs-item', 'icon'),
+              ns.is('delete', true),
+            ]}
             onClick={() => c.removeRsItem(data)}
           ></ion-icon>
         </div>
@@ -99,6 +102,7 @@ export default defineComponent({
           <div class={ns.be('header', 'search')}>
             <el-input
               class={ns.bem('header', 'search', 'input')}
+              placeholder='请输入要搜索的内容'
               v-model={searchValue.value}
             >
               {{
@@ -111,13 +115,13 @@ export default defineComponent({
             </el-input>
             <span class={ns.be('header', 'collapse')}>
               <ion-icon
-                title='展开所有'
+                title='全部展开'
                 name='chevron-down-outline'
                 class={ns.bem('header', 'collapse', 'icon')}
                 onClick={onExpandAll}
               ></ion-icon>
               <ion-icon
-                title='收缩所有'
+                title='全部折叠'
                 name='chevron-up-outline'
                 class={ns.bem('header', 'collapse', 'icon')}
                 onClick={onCollapseAll}
@@ -150,7 +154,7 @@ export default defineComponent({
                 ></ion-icon>
               ) : (
                 <ion-icon
-                  title='收缩'
+                  title='折叠'
                   name='chevron-down-outline'
                   class={ns.bem('tree-item', 'collapse', 'icon')}
                   onClick={() => collapse(data.srfkey)}
@@ -166,13 +170,19 @@ export default defineComponent({
               <ion-icon
                 name='close-outline'
                 title='删除'
-                class={ns.bem('tree-item', 'actions', 'icon')}
+                class={[
+                  ns.bem('tree-item', 'actions', 'icon'),
+                  ns.is('delete', true),
+                ]}
                 onClick={() => c.removeItem(data)}
               ></ion-icon>
               <ion-icon
                 name='add-outline'
                 title='新增'
-                class={ns.bem('tree-item', 'actions', 'icon')}
+                class={[
+                  ns.bem('tree-item', 'actions', 'icon'),
+                  ns.is('add', true),
+                ]}
                 onClick={(e: MouseEvent) => c.createRsItem(e, data, children)}
               ></ion-icon>
             </div>