fix: perfect copy componet

chansee97 · Jun 26, 2024 · eb82842 · eb82842
1 parent 8981f42
commit eb82842
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 6 deletions.
diff --git a/locales/en_US.json b/locales/en_US.json
@@ -148,6 +148,10 @@
       "searchPlaceholder": "Search icon",
       "clearIcon": "Clear icon",
       "selectorTitle": "Icon selection"
+    },
+    "copyText": {
+      "message": "Copied successfully",
+      "tooltip": "Copy"
     }
   }
 }
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
@@ -83,6 +83,10 @@
       "inputPlaceholder": "选择目标图标",
       "searchPlaceholder": "搜索图标",
       "clearIcon": "清除图标"
+    },
+    "copyText":{
+      "tooltip":"复制",
+      "message":"复制成功"
     }
   },
   "login": {

diff --git a/package.json b/package.json
@@ -57,7 +57,6 @@
     "echarts": "^5.5.0",
     "md-editor-v3": "^4.15.2",
     "pinia": "^2.1.7",
-    "pinia-plugin-persist": "^1.0.0",
     "pinia-plugin-persistedstate": "^3.2.1",
     "quill": "^2.0.2",
     "radash": "^12.1.0",

diff --git a/src/components/common/HelpInfo.vue b/src/components/common/HelpInfo.vue
@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 <template>
   <n-tooltip :show-arrow="false" trigger="hover">
     <template #trigger>
-      <icon-park-outline-help />
+      <icon-park-outline-help  class="op-50 cursor-help"/>
     </template>
     {{ props.message }}
   </n-tooltip>

diff --git a/src/components/custom/CopyText.vue b/src/components/custom/CopyText.vue
@@ -10,8 +10,13 @@ const modelValue = defineModel<string>('value')
     <n-ellipsis :style="{ 'max-width': props.maxLength || '12em' }">
       {{ modelValue }}
     </n-ellipsis>
-    <span v-copy="modelValue" class="cursor-pointer">
-      <icon-park-outline-copy />
-    </span>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <span v-copy="modelValue" class="cursor-pointer">
+          <icon-park-outline-copy />
+        </span>
+      </template>
+      {{ $t('components.copyText.tooltip') }}
+    </n-tooltip>
   </div>
 </template>
diff --git a/src/directives/copy.ts b/src/directives/copy.ts
@@ -1,4 +1,5 @@
 import type { App, Directive } from 'vue'
+import { $t } from '@/utils'
 
 interface CopyHTMLElement extends HTMLElement {
   _copyText: string
@@ -25,7 +26,7 @@ export function install(app: App) {
     if (!clipboardEnable())
       return
     copy(this._copyText)
-    window.$message.success('复制成功')
+    window.$message.success($t('components.copyText.message'))
   }
 
   function updataClipboard(el: CopyHTMLElement, text: string) {