From 57636f88a88f2326fae8157c65c6dfa01559090a Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Wed, 26 Mar 2025 20:38:16 -0700
Subject: [PATCH 1/2] fix(popconfirm): [popconfirm] Adapt to dark themes

---
 .../popconfirm/custom-class-composition-api.vue  |  4 ++--
 .../demos/pc/app/popconfirm/custom-class.vue     |  4 ++--
 .../popconfirm/slot-footer-composition-api.vue   |  2 +-
 .../demos/pc/app/popconfirm/slot-footer.vue      |  2 +-
 .../pc/app/popconfirm/type-composition-api.vue   |  8 +++++++-
 examples/sites/demos/pc/app/popconfirm/type.vue  |  8 +++++++-
 packages/vue/src/popconfirm/src/pc.vue           | 16 ++++++++++++++--
 7 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue
index b2a0f2067e..eaa7d42f7b 100644
--- a/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/custom-class-composition-api.vue
@@ -21,7 +21,7 @@ const message = ref('这是气泡确认框提示内容文本描述，这是两
   background-color: #ccc;
 }
 
-.tiny-popover.tiny-popper.custom-class .popper__arrow::after {
-  border-top-color: #ccc;
+.tiny-popover.tiny-popper.custom-class .popper__arrow {
+  background-color: #ccc;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/popconfirm/custom-class.vue b/examples/sites/demos/pc/app/popconfirm/custom-class.vue
index 54a96d912d..b0ca418f0d 100644
--- a/examples/sites/demos/pc/app/popconfirm/custom-class.vue
+++ b/examples/sites/demos/pc/app/popconfirm/custom-class.vue
@@ -30,7 +30,7 @@ export default {
   background-color: #ccc;
 }
 
-.tiny-popover.tiny-popper.custom-class .popper__arrow::after {
-  border-top-color: #ccc;
+.tiny-popover.tiny-popper.custom-class .popper__arrow {
+  background-color: #ccc;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
index 308000db11..90b18d6195 100644
--- a/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
@@ -5,7 +5,7 @@
         <tiny-button>悬浮我提示</tiny-button>
       </template>
       <template #footer>
-        <tiny-button @click="handleClose"> 自定义关闭按钮 </tiny-button>
+        <tiny-button @click="handleClose" round> 自定义关闭按钮 </tiny-button>
       </template>
     </tiny-popconfirm>
   </div>
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-footer.vue b/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
index 732a679d2a..e5c6286224 100644
--- a/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
+++ b/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
@@ -5,7 +5,7 @@
         <tiny-button>悬浮我提示</tiny-button>
       </template>
       <template #footer>
-        <tiny-button @click="handleClose"> 自定义关闭按钮 </tiny-button>
+        <tiny-button @click="handleClose" round> 自定义关闭按钮 </tiny-button>
       </template>
     </tiny-popconfirm>
   </div>
diff --git a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
index 1a3d75bf6c..2ee63cafdc 100644
--- a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
@@ -24,7 +24,7 @@
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" :type="TinyIconDel" :message="message">
+    <tiny-popconfirm :title="title" :type="TinyIconDel" :message="message" custom-class="custom-icon">
       <template #reference>
         <tiny-button>自定义</tiny-button>
       </template>
@@ -51,3 +51,9 @@ const TinyIconDel = iconDel()
   margin-bottom: 10px;
 }
 </style>
+
+<style>
+.custom-icon svg {
+  fill: var(--tv-color-icon-active);
+}
+</style>
diff --git a/examples/sites/demos/pc/app/popconfirm/type.vue b/examples/sites/demos/pc/app/popconfirm/type.vue
index 39fd3d91c2..557f9192b5 100644
--- a/examples/sites/demos/pc/app/popconfirm/type.vue
+++ b/examples/sites/demos/pc/app/popconfirm/type.vue
@@ -24,7 +24,7 @@
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" :type="TinyIconDel" :message="message">
+    <tiny-popconfirm :title="title" :type="TinyIconDel" :message="message" custom-class="custom-icon">
       <template #reference>
         <tiny-button>自定义</tiny-button>
       </template>
@@ -60,3 +60,9 @@ export default {
   margin-bottom: 10px;
 }
 </style>
+
+<style>
+.custom-icon svg {
+  fill: var(--tv-color-icon-active);
+}
+</style>
diff --git a/packages/vue/src/popconfirm/src/pc.vue b/packages/vue/src/popconfirm/src/pc.vue
index f256d6e58d..f8b9c3119b 100644
--- a/packages/vue/src/popconfirm/src/pc.vue
+++ b/packages/vue/src/popconfirm/src/pc.vue
@@ -31,10 +31,22 @@
           </div>
           <div class="tiny-popconfirm-popover__footer">
             <slot name="footer">
-              <tiny-button v-if="cancelButton" class="tiny-popconfirm-popover__cancel-button" size="mini" @click="hide">
+              <tiny-button
+                v-if="cancelButton"
+                class="tiny-popconfirm-popover__cancel-button"
+                size="mini"
+                round
+                @click="hide"
+              >
                 {{ t('ui.button.cancel') }}
               </tiny-button>
-              <tiny-button class="tiny-popconfirm-popover__confirm-button" size="mini" type="primary" @click="confirm">
+              <tiny-button
+                class="tiny-popconfirm-popover__confirm-button"
+                size="mini"
+                type="primary"
+                round
+                @click="confirm"
+              >
                 {{ t('ui.button.confirm') }}
               </tiny-button>
             </slot>

From a21bb6e0a5e4e6d623f6732e51441426ab308b4c Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Wed, 26 Mar 2025 23:21:35 -0700
Subject: [PATCH 2/2] fix(popconfirm): [popconfirm] Adapt to dark themes

---
 .../popconfirm/slot-footer-composition-api.vue   |  2 +-
 .../demos/pc/app/popconfirm/slot-footer.vue      |  2 +-
 packages/vue/src/popconfirm/src/pc.vue           | 16 ++--------------
 3 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
index 90b18d6195..308000db11 100644
--- a/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/popconfirm/slot-footer-composition-api.vue
@@ -5,7 +5,7 @@
         <tiny-button>悬浮我提示</tiny-button>
       </template>
       <template #footer>
-        <tiny-button @click="handleClose" round> 自定义关闭按钮 </tiny-button>
+        <tiny-button @click="handleClose"> 自定义关闭按钮 </tiny-button>
       </template>
     </tiny-popconfirm>
   </div>
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-footer.vue b/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
index e5c6286224..732a679d2a 100644
--- a/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
+++ b/examples/sites/demos/pc/app/popconfirm/slot-footer.vue
@@ -5,7 +5,7 @@
         <tiny-button>悬浮我提示</tiny-button>
       </template>
       <template #footer>
-        <tiny-button @click="handleClose" round> 自定义关闭按钮 </tiny-button>
+        <tiny-button @click="handleClose"> 自定义关闭按钮 </tiny-button>
       </template>
     </tiny-popconfirm>
   </div>
diff --git a/packages/vue/src/popconfirm/src/pc.vue b/packages/vue/src/popconfirm/src/pc.vue
index f8b9c3119b..f256d6e58d 100644
--- a/packages/vue/src/popconfirm/src/pc.vue
+++ b/packages/vue/src/popconfirm/src/pc.vue
@@ -31,22 +31,10 @@
           </div>
           <div class="tiny-popconfirm-popover__footer">
             <slot name="footer">
-              <tiny-button
-                v-if="cancelButton"
-                class="tiny-popconfirm-popover__cancel-button"
-                size="mini"
-                round
-                @click="hide"
-              >
+              <tiny-button v-if="cancelButton" class="tiny-popconfirm-popover__cancel-button" size="mini" @click="hide">
                 {{ t('ui.button.cancel') }}
               </tiny-button>
-              <tiny-button
-                class="tiny-popconfirm-popover__confirm-button"
-                size="mini"
-                type="primary"
-                round
-                @click="confirm"
-              >
+              <tiny-button class="tiny-popconfirm-popover__confirm-button" size="mini" type="primary" @click="confirm">
                 {{ t('ui.button.confirm') }}
               </tiny-button>
             </slot>