From 1b758030a9a4bd7cf3063c60b88a51bc1b97f9ed Mon Sep 17 00:00:00 2001 From: TaurusXin Date: Thu, 25 Apr 2024 15:11:57 +0800 Subject: [PATCH] feat: copy to clipboard --- components.d.ts | 3 ++ package.json | 3 +- pnpm-lock.yaml | 35 +++++++++++++++++++ src/App.vue | 89 ++++++++++++++++++++++++++++++++++--------------- 4 files changed, 103 insertions(+), 27 deletions(-) diff --git a/components.d.ts b/components.d.ts index d558051..6fab9f4 100644 --- a/components.d.ts +++ b/components.d.ts @@ -7,8 +7,11 @@ export {} declare module 'vue' { export interface GlobalComponents { + NButton: typeof import('naive-ui')['NButton'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] + NIcon: typeof import('naive-ui')['NIcon'] NInput: typeof import('naive-ui')['NInput'] + NMessageProvider: typeof import('naive-ui')['NMessageProvider'] NTable: typeof import('naive-ui')['NTable'] } } diff --git a/package.json b/package.json index 5bc1b41..c3ff52d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ }, "dependencies": { "@tauri-apps/api": "^1", - "vue": "^3.3.4" + "vue": "^3.3.4", + "vue-clipboard3": "^2.0.0" }, "devDependencies": { "@tauri-apps/cli": "^1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 730af0d..d85ecf3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: vue: specifier: ^3.3.4 version: 3.4.21(typescript@5.4.2) + vue-clipboard3: + specifier: ^2.0.0 + version: 2.0.0 devDependencies: '@tauri-apps/cli': @@ -777,6 +780,14 @@ packages: fsevents: 2.3.3 dev: true + /clipboard@2.0.11: + resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==} + dependencies: + good-listener: 1.2.2 + select: 1.1.2 + tiny-emitter: 2.1.0 + dev: false + /computeds@0.0.1: resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} dev: true @@ -832,6 +843,10 @@ packages: ms: 2.1.2 dev: true + /delegate@3.2.0: + resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==} + dev: false + /entities@4.5.0: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} @@ -937,6 +952,12 @@ packages: is-glob: 4.0.3 dev: true + /good-listener@1.2.2: + resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==} + dependencies: + delegate: 3.2.0 + dev: false + /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} requiresBuild: true @@ -1302,6 +1323,10 @@ packages: resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==} dev: true + /select@1.1.2: + resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==} + dev: false + /semver@5.7.2: resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==} hasBin: true @@ -1339,6 +1364,10 @@ packages: engines: {node: '>= 0.4'} dev: true + /tiny-emitter@2.1.0: + resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==} + dev: false + /to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -1513,6 +1542,12 @@ packages: vue: 3.4.21(typescript@5.4.2) dev: true + /vue-clipboard3@2.0.0: + resolution: {integrity: sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==} + dependencies: + clipboard: 2.0.11 + dev: false + /vue-template-compiler@2.7.16: resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==} dependencies: diff --git a/src/App.vue b/src/App.vue index 15faae2..a280a65 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,13 @@ import { ref, computed } from 'vue' import { codecs } from '@/utils/codecs.ts' import { EncodingConverter } from '@/utils/converter' import { useOsTheme, darkTheme } from 'naive-ui' +import { CopyOutline as CopyIcon } from '@vicons/ionicons5' +import useClipboard from 'vue-clipboard3' + +import { createDiscreteApi } from "naive-ui"; +const { message } = createDiscreteApi(["message"]); + +const { toClipboard } = useClipboard() const osThemeRef = useOsTheme() const theme = computed(() => (osThemeRef.value === 'dark' ? darkTheme : undefined)) @@ -20,36 +27,66 @@ const handleTextInput = (text: string) => { }) }) } + +const copyToClipboard = async (msg: string) => { + try { + await toClipboard(msg) + message.success('复制成功！') + } catch (e) { + message.error('复制失败！') + } +} + +const handleCopyResult = (text: string) => { + copyToClipboard(text) +}