From 641a3940ed1dffddd4a31f87fce3e1072aa668c1 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Mon, 5 Feb 2024 01:24:24 +0800
Subject: [PATCH] refactor: extract button & add enter key watch

---
 components/AiPrompt.vue               | 12 ++++++++++++
 components/SfcButton.vue              | 12 ++++++++++++
 components/SpringFestivalCouplets.vue | 14 +++++++-------
 3 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 components/SfcButton.vue

diff --git a/components/AiPrompt.vue b/components/AiPrompt.vue
index 09ffd4a..237244b 100644
--- a/components/AiPrompt.vue
+++ b/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>
diff --git a/components/SfcButton.vue b/components/SfcButton.vue
new file mode 100644
index 0000000..888d3f6
--- /dev/null
+++ b/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>
diff --git a/components/SpringFestivalCouplets.vue b/components/SpringFestivalCouplets.vue
index a0e7a8f..95f2ad0 100644
--- a/components/SpringFestivalCouplets.vue
+++ b/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>