fix(tree): [button,tree] update tree demos and the plain button's bor…

…der color (#2470) * fix(tree): fix tree's demo, modify delete popover's button to mini * fix(button): fix the plain button's border color
opentiny · Nov 2, 2024 · 6180ec7 · 6180ec7
1 parent 299d7fe
commit 6180ec7
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>