feat: support click copy css

Author: jevin98

README.md

@@ -13,7 +13,8 @@ You need to download the zip file from my release and manually drag it into your
 
 ## Specific operations
 
-Select two elements in the Elements tab of the DevTools panel.
+- Select two elements in the Elements tab of the DevTools panel.
+- Click on different styles to automatically copy
 
 # Inspiration
 

entrypoints/devtools-panel/devtools-panel.vue

@@ -10,6 +10,7 @@ const {
   handleClearSelection,
   onTableCellClassName,
   onTableRowClassName,
+  handleCopyStyle,
 } = useDevToolsPanel()
 </script>
 
@@ -46,6 +47,7 @@ const {
       :data="renderCssDiffs"
       :cell-class-name="onTableCellClassName"
       :row-class-name="onTableRowClassName"
+      @cell-click="handleCopyStyle"
     >
       <ElTableColumn prop="property" :label="$t('property')" />
       <template v-for="(el) in selectedEl" :key="el.valueType">

entrypoints/devtools-panel/hooks/useDevToolsPanel.ts

@@ -1,7 +1,12 @@
 import type { CssDiffsType, SelectedElType } from '../types'
+import { useClipboard } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
 import { formatStyle, type FormatStyleValue } from '../utils'
 
 export function useDevToolsPanel() {
+  const { t } = useI18n()
+
   const selectedEl: Array<SelectedElType> = reactive([])
   const cssDiffs: Array<CssDiffsType> = reactive([])
 
@@ -84,16 +89,45 @@ export function useDevToolsPanel() {
 
   function onTableCellClassName({ columnIndex }: { columnIndex: number }) {
     if (!columnIndex) {
-      return 'text-[var(--el-table-text-color)]'
+      return 'text-[var(--el-table-text-color)] cursor-auto'
     }
   }
 
   function onTableRowClassName({ row }: { row: CssDiffsType }) {
     if (row.isDiff) {
-      return '!bg-[#ffe6e6] text-[red]'
+      return '!bg-[#ffe6e6] text-[red] cursor-pointer'
     }
     else {
-      return '!bg-[#e6ffe6] text-[green]'
+      return '!bg-[#e6ffe6] text-[green] cursor-pointer'
+    }
+  }
+
+  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,
+        },
+      )
     }
   }
 
@@ -104,5 +138,6 @@ export function useDevToolsPanel() {
     handleClearSelection,
     onTableCellClassName,
     onTableRowClassName,
+    handleCopyStyle,
   }
 }

entrypoints/devtools-panel/lang.ts

@@ -6,6 +6,7 @@ export default {
     property: 'property',
     isAllProperty: 'Show all',
     tableColumnInfo: 'The header name is concatenated from the DOM\'s `TagName`, `Id`, and `Class` attributes using `$$`.',
+    copyInfo: 'Copy Success',
   },
 
   'zh-CN': {
@@ -15,5 +16,6 @@ export default {
     property: '属性名',
     isAllProperty: '显示全部',
     tableColumnInfo: '表头名称由DOM的 `TagName`、`Id`、`Class` 属性使用 `$$` 拼接而成。',
+    copyInfo: '复制成功',
   },
 }

entrypoints/devtools-panel/main.ts

@@ -1,13 +1,13 @@
-import { createApp } from 'vue';
-import App from './devtools-panel.vue';
+import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
+import App from './devtools-panel.vue'
 
 import messages from './lang'
 import 'element-plus/dist/index.css'
 
 const i18n = createI18n({
-  locale: 'zh-CN',
-  messages
+  locale: 'en',
+  messages,
 })
 
-createApp(App).use(i18n).mount('#app');
+createApp(App).use(i18n).mount('#app')

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.1",
   "private": true,
   "packageManager": "[email protected]",
-  "description": "manifest.json description",
+  "description": "A browser extension that compares different CSS",
   "scripts": {
     "dev": "wxt",
     "dev:firefox": "wxt -b firefox",
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.0",
     "@types/chrome": "^0.0.280",
+    "@vueuse/core": "^12.0.0",
     "@wxt-dev/module-vue": "^1.0.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",