refactor: extract button & add enter key watch

components/AiPrompt.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import consola from 'consola'
 
+import { useMagicKeys } from '@vueuse/core'
+
 const app = useAppStore()
 
 /**
  * generate sfc 春联
  */
 async function generate() {
+  if (app.loading)
+    return
+
   app.loading = true
   const data = await $fetch('/api/generate', {
     query: {
@@ -17,6 +22,13 @@ async function generate() {
   app.setCoupletsData(data)
   app.loading = false
 }
+
+// Ctrl + Enter / Cmd + Enter to generate
+const { Ctrl_enter, Cmd_enter } = useMagicKeys()
+watch(() => [Cmd_enter.value, Ctrl_enter.value], (v) => {
+  if (v)
+    generate()
+})
 </script>
 
 <template>

components/SfcButton.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: string
+}>()
+</script>
+
+<template>
+  <button flex items-center justify-center class="w-full btn" text="black">
+    <div :class="icon" mr-1 />
+    <slot />
+  </button>
+</template>

components/SpringFestivalCouplets.vue

@@ -104,18 +104,18 @@ async function shareLink() {
   </div>
 
   <div class="font-zmx mt-4 flex" text="black" gap="2">
-    <button class="w-full btn" text="black" @click="download">
+    <SfcButton icon="i-ri-download-line" @click="download">
       下载图片
-    </button>
-    <button class="w-full btn" text="black" @click="copyImg">
+    </SfcButton>
+    <SfcButton icon="i-ri-clipboard-line" @click="copyImg">
       拷贝图片
-    </button>
+    </SfcButton>
   </div>
 
   <div class="font-zmx mt-2 flex" text="black" gap="2">
-    <button flex items-center justify-center class="w-full btn" text="black" @click="shareLink">
-      分享春联链接 <div class="ml-1" i-ri-link />
-    </button>
+    <SfcButton icon="i-ri-link" @click="shareLink">
+      分享春联链接
+    </SfcButton>
   </div>
 </template>