feat: copy to clipboard

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']
   }
 }

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",

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:

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)
+}
 </script>
 
 <template>
   <n-config-provider :theme="theme">
-    <div class="container">
-      <n-input
-        v-model:value="content"
-        type="textarea"
-        placeholder="请输入待恢复的乱码文本"
-        clearable
-        class="input"
-        @input="handleTextInput"
-      />
-      <n-table :single-line="false" striped class="table">
-        <thead>
-          <tr>
-            <th class="encode title">原来编码</th>
-            <th class="encode title">目标编码</th>
-            <th class="result title">结果</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, index) in codecs" :key="index">
-            <td>{{ item.origin }}</td>
-            <td>{{ item.target }}</td>
-            <td>{{ result[index] }}</td>
-          </tr>
-        </tbody>
-      </n-table>
-    </div>
+    <n-message-provider>
+      <div class="container">
+        <n-input
+          v-model:value="content"
+          type="textarea"
+          placeholder="请输入待恢复的乱码文本"
+          clearable
+          class="input"
+          @input="handleTextInput"
+        />
+        <n-table :single-line="false" striped class="table">
+          <thead>
+            <tr>
+              <th class="encode title">原来编码</th>
+              <th class="encode title">目标编码</th>
+              <th class="result title">结果</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in codecs" :key="index">
+              <td>{{ item.origin }}</td>
+              <td>{{ item.target }}</td>
+              <td>
+                {{ result[index] }}
+                <n-button
+                  icon-placement="left"
+                  strong
+                  size="tiny"
+                  v-if="result[index]"
+                  @click="handleCopyResult(result[index])"
+                >
+                  <template #icon>
+                    <n-icon>
+                      <copy-icon />
+                    </n-icon>
+                  </template>
+                </n-button>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </div>
+    </n-message-provider>
   </n-config-provider>
 </template>