From a7e5616e4c923a2cd098e7d9ae56f7835d0cd9fe Mon Sep 17 00:00:00 2001
From: Jevin <69580637+jevin98@users.noreply.github.com>
Date: Tue, 21 Apr 2026 17:40:29 +0800
Subject: [PATCH] fix(devtools-panel): reset diffs and avoid per-click
 clipboard watchers

---
 .../devtools-panel/hooks/useDevToolsPanel.ts  | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts b/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts
index 2fa26e0..11a6daf 100644
--- a/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts
+++ b/entrypoints/devtools-panel/hooks/useDevToolsPanel.ts
@@ -8,6 +8,10 @@ import { formatStyle, type FormatStyleValue } from '../utils'
 export function useDevToolsPanel() {
   const { t } = useI18n()
   const inputValue = ref('')
+  const { copy } = useClipboard({
+    read: true,
+    legacy: true,
+  })
 
   const selectedEl: Array<SelectedElType> = reactive([])
   const cssDiffs: Array<CssDiffsType> = reactive([])
@@ -85,6 +89,7 @@ export function useDevToolsPanel() {
     const [{ style: styles1 = {} }, { style: styles2 = {} }] = selectedEl
 
     const diffs: Array<CssDiffsType> = []
+    cssDiffs.length = 0
 
     const allProperties = new Set([
       ...Object.keys(styles1),
@@ -134,29 +139,14 @@ export function useDevToolsPanel() {
   function handleCopyStyle(row: CssDiffsType, column: any) {
     if (column.property !== 'property') {
       const source = `${row.property}: ${row[column.property as 'left' | 'right']};`
-
-      const { text, copied, copy } = useClipboard({
-        read: true,
-        source,
-        legacy: true,
-      })
-
       copy(source)
-
-      watch(
-        () => copied.value,
-        (copied) => {
-          if (copied) {
-            ElMessage({
-              message: `${t('copyInfo')} > ${text.value}`,
-              type: 'success',
-            })
-          }
-        },
-        {
-          immediate: true,
-        },
-      )
+        .then(() => {
+          ElMessage({
+            message: `${t('copyInfo')} > ${source}`,
+            type: 'success',
+          })
+        })
+        .catch(() => null)
     }
   }