From 6180ec7b7c371c906d87d726f18e9bdae83b3814 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Sat, 2 Nov 2024 22:51:42 +0800
Subject: [PATCH] fix(tree): [button,tree] update tree demos and the plain
 button's border color (#2470)

* fix(tree): fix tree's demo, modify delete popover's button to mini

* fix(button): fix the plain button's border color
---
 .../demos/pc/app/tree/basic-usage-composition-api.vue  |  3 ---
 examples/sites/demos/pc/app/tree/basic-usage.vue       |  3 ---
 .../sites/demos/pc/app/tree/edit-composition-api.vue   |  9 +--------
 examples/sites/demos/pc/app/tree/edit.vue              |  9 +--------
 .../sites/demos/pc/app/tree/other-composition-api.vue  |  2 +-
 examples/sites/demos/pc/app/tree/other.vue             |  2 +-
 .../sites/demos/pc/app/tree/slot-composition-api.vue   |  6 +++---
 examples/sites/demos/pc/app/tree/slot.vue              |  6 +++---
 packages/theme/src/button/vars.less                    | 10 +++++-----
 packages/vue/src/tree/src/pc.vue                       |  4 ++--
 10 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
index 4818f75ebd..3bbc76fe31 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
@@ -76,7 +76,4 @@ function nodeClick(data, node, vm) {
   margin-top: 16px;
   margin-bottom: 16px;
 }
-.option-row > span {
-  font-size: 18px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/tree/basic-usage.vue b/examples/sites/demos/pc/app/tree/basic-usage.vue
index 48068f2867..ea051c5311 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage.vue
@@ -88,7 +88,4 @@ export default {
   margin-top: 16px;
   margin-bottom: 16px;
 }
-.option-row > span {
-  font-size: 18px;
-}
 </style>
diff --git a/examples/sites/demos/pc/app/tree/edit-composition-api.vue b/examples/sites/demos/pc/app/tree/edit-composition-api.vue
index 9c23e17eef..b6264aae94 100644
--- a/examples/sites/demos/pc/app/tree/edit-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/edit-composition-api.vue
@@ -8,14 +8,7 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree
-      ref="treeRef"
-      show-checkbox
-      node-key="id"
-      :data="data"
-      current-node-key="1"
-      default-expand-all
-    ></tiny-tree>
+    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tree/edit.vue b/examples/sites/demos/pc/app/tree/edit.vue
index 769e9e96ae..88d2774bc4 100644
--- a/examples/sites/demos/pc/app/tree/edit.vue
+++ b/examples/sites/demos/pc/app/tree/edit.vue
@@ -8,14 +8,7 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree
-      ref="treeRef"
-      show-checkbox
-      node-key="id"
-      :data="data"
-      current-node-key="1"
-      default-expand-all
-    ></tiny-tree>
+    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/tree/other-composition-api.vue b/examples/sites/demos/pc/app/tree/other-composition-api.vue
index ce8ce1957e..52da34ec1c 100644
--- a/examples/sites/demos/pc/app/tree/other-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/other-composition-api.vue
@@ -5,7 +5,7 @@
     </tiny-tree>
     <br />
     <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
-    <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
+    <tiny-tree :data="data" show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
       </template>
diff --git a/examples/sites/demos/pc/app/tree/other.vue b/examples/sites/demos/pc/app/tree/other.vue
index ff31748936..6d94e69cd1 100644
--- a/examples/sites/demos/pc/app/tree/other.vue
+++ b/examples/sites/demos/pc/app/tree/other.vue
@@ -5,7 +5,7 @@
     </tiny-tree>
     <br />
     <div class="tips">提示：非手风琴模式，自定义自动勾选的内容</div>
-    <tiny-tree :data="data" accordion show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
+    <tiny-tree :data="data" show-checkbox check-strictly show-check-easily :icon-trigger-click-node="false">
       <template #switchText>
         <span>自定义开关的内容</span>
       </template>
diff --git a/examples/sites/demos/pc/app/tree/slot-composition-api.vue b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
index 05bd499a4e..efd8cfb6da 100644
--- a/examples/sites/demos/pc/app/tree/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/slot-composition-api.vue
@@ -13,7 +13,7 @@
         </template>
         <!-- 默认插槽 -->
         <template #default="node">
-          <div style="color: red">{{ node.data.label }}</div>
+          <div style="margin: 0 8px">{{ node.data.label }}</div>
         </template>
         <!-- 后缀插槽 -->
         <template #suffix="{ node }">
@@ -22,7 +22,7 @@
         <!-- 操作插槽 -->
         <template #operation="{ node }">
           <div style="width: 80px; text-align: right">
-            <tiny-link :underline="true" title="一些功能操作" type="primary"> 新增 </tiny-link> &nbsp;
+            <tiny-link :underline="true" title="一些功能操作"> 新增 </tiny-link> &nbsp;
             <tiny-link :underline="true" title="一些功能操作" type="danger"> 删除 </tiny-link>
           </div>
         </template>
@@ -78,7 +78,7 @@ function clearData() {
 function renderContent(h, { node, data }) {
   return (
     <span>
-      {node.label} <TinyIconPlusSquare fill="red" />
+      {node.label} <TinyIconPlusSquare fill="#666" />
     </span>
   )
 }
diff --git a/examples/sites/demos/pc/app/tree/slot.vue b/examples/sites/demos/pc/app/tree/slot.vue
index a119573a84..b3f5b8bbdc 100644
--- a/examples/sites/demos/pc/app/tree/slot.vue
+++ b/examples/sites/demos/pc/app/tree/slot.vue
@@ -13,7 +13,7 @@
         </template>
         <!-- 默认插槽 -->
         <template #default="node">
-          <div style="color: red">{{ node.data.label }}</div>
+          <div style="margin: 0 8px">{{ node.data.label }}</div>
         </template>
         <!-- 后缀插槽 -->
         <template #suffix="{ node }">
@@ -22,7 +22,7 @@
         <!-- 操作插槽 -->
         <template #operation="{ node }">
           <div style="width: 80px; text-align: right">
-            <tiny-link :underline="true" title="一些功能操作" type="primary"> 新增 </tiny-link> &nbsp;
+            <tiny-link :underline="true" title="一些功能操作"> 新增 </tiny-link> &nbsp;
             <tiny-link :underline="true" title="一些功能操作" type="danger"> 删除 </tiny-link>
           </div>
         </template>
@@ -87,7 +87,7 @@ export default {
     renderContent(h, { node, data }) {
       return (
         <span>
-          {node.label} <TinyIconPlusSquare fill="red" />
+          {node.label} <TinyIconPlusSquare fill="#666" />
         </span>
       )
     }
diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
index 1b7582debc..3480f23dca 100644
--- a/packages/theme/src/button/vars.less
+++ b/packages/theme/src/button/vars.less
@@ -150,35 +150,35 @@
   // primary 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-primary: var(--tv-color-act-primary-bg-white);
   // primary 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-primary: var(--tv-color-act-primary-border-active);
+  --tv-Button-border-color-plain-primary: var(--tv-color-act-primary-border-light);
 
   // success 主题时按钮朴素文本色
   --tv-Button-text-color-plain-success: var(--tv-color-act-success-text);
   // success 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-success: var(--tv-color-act-success-bg-light);
   // success 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-success: var(--tv-color-act-success-border-active-1);
+  --tv-Button-border-color-plain-success: var(--tv-color-act-success-border-light);
 
   // warning 主题时按钮朴素文本色
   --tv-Button-text-color-plain-warning: var(--tv-color-act-warning-text);
   // warning 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-warning: var(--tv-color-act-warning-bg-light);
   // warning 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-warning: var(--tv-color-act-warning-border-active-1);
+  --tv-Button-border-color-plain-warning: var(--tv-color-act-warning-border-light);
 
   // danger 主题时按钮朴素文本色
   --tv-Button-text-color-plain-danger: var(--tv-color-act-danger-text);
   // danger 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-danger: var(--tv-color-act-danger-bg-light);
   // danger 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-danger: var(--tv-color-act-danger-border-active-1);
+  --tv-Button-border-color-plain-danger: var(--tv-color-act-danger-border-light);
 
   // info 主题时按钮朴素文本色
   --tv-Button-text-color-plain-info: var(--tv-color-act-info-text);
   // info 主题时按钮朴素背景色
   --tv-Button-bg-color-plain-info: var(--tv-color-act-info-bg-light);
   // info 主题时按钮朴素边框色
-  --tv-Button-border-color-plain-info: var(--tv-color-act-info-border-active-1);
+  --tv-Button-border-color-plain-info: var(--tv-color-act-info-border-light);
 
   // 幽灵态和plain是平级的关系. 如果同时存在，优先级不能保证稳定。
 
diff --git a/packages/vue/src/tree/src/pc.vue b/packages/vue/src/tree/src/pc.vue
index 175861f73e..7a34213a79 100644
--- a/packages/vue/src/tree/src/pc.vue
+++ b/packages/vue/src/tree/src/pc.vue
@@ -146,8 +146,8 @@
         </div>
       </div>
       <div class="tiny-tree__del-footer">
-        <tiny-button @click="cancelDelete">{{ t('ui.base.cancel') }}</tiny-button>
-        <tiny-button type="primary" @click="deleteAction">{{ t('ui.base.confirm') }}</tiny-button>
+        <tiny-button @click="cancelDelete" size="mini">{{ t('ui.base.cancel') }}</tiny-button>
+        <tiny-button type="primary" @click="deleteAction" size="mini">{{ t('ui.base.confirm') }}</tiny-button>
       </div>
     </tiny-popover>
   </div>