feat: add copy & share

components/SpringFestivalCouplets.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { toPng } from 'html-to-image'
+import { toBlob, toPng } from 'html-to-image'
 import { downloadDataUrlAsImage } from '@yunlefun/utils'
 import { SwitchRoot, SwitchThumb } from 'radix-vue'
+import { copyBlobToClipboard } from 'copy-image-clipboard'
+import { useClipboard } from '@vueuse/core'
 import { suggestedCoupletsFilename } from '~/config'
 import type { SprintFestivalCouplets } from '~/packages/ai/src'
 
@@ -11,6 +13,9 @@ defineProps<{
 
 const app = useAppStore()
 
+/**
+ * Download image
+ */
 async function download() {
   const container = document.getElementById('spring-festival-container')
   if (!container)
@@ -24,6 +29,34 @@ async function download() {
   if (url)
     downloadDataUrlAsImage(url, suggestedCoupletsFilename)
 }
+
+/**
+ * Copy image to clipboard
+ */
+async function copyImg() {
+  const container = document.getElementById('girid-container')
+  if (!container)
+    return
+  // const url = await screenShotToBase64(container)
+
+  const blob = await toBlob(container, {
+    includeQueryParams: true,
+  })
+
+  if (blob)
+    copyBlobToClipboard(blob)
+}
+
+const { copy, copied } = useClipboard()
+async function shareLink() {
+  const txt = `${window.location.origin}${import.meta.env.BASE_URL.replace('_nuxt/', '')}?couplets=${encodeURIComponent(JSON.stringify(app.coupletsData))}&prompt=${encodeURIComponent(app.prompt)}`
+  await copy(txt)
+
+  if (copied.value) {
+    // eslint-disable-next-line no-alert
+    alert('已复制链接')
+  }
+}
 </script>
 
 <template>
@@ -74,10 +107,16 @@ async function download() {
     <button class="w-full btn" text="black" @click="download">
       下载图片
     </button>
-    <button class="w-full btn" text="black" @click="download">
+    <button class="w-full btn" text="black" @click="copyImg">
       拷贝图片
     </button>
   </div>
+
+  <div class="font-zmx mt-4 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>
+  </div>
 </template>
 
 <style lang="scss">

composables/app.ts

@@ -20,6 +20,17 @@ export const useAppStore = defineStore('app', () => {
    */
   const inverseFu = useStorage(`${ns}:inverse-fu`, true)
 
+  const route = useRoute()
+  onMounted(() => {
+    if (route.query.couplets) {
+      console.log(decodeURIComponent(route.query.couplets as string))
+      coupletsData.value = JSON.parse(decodeURIComponent(route.query.couplets as string))
+      console.log('coupletsData', coupletsData.value)
+    }
+    if (route.query.prompt)
+      prompt.value = decodeURIComponent(route.query.prompt as string)
+  })
+
   return {
     loading,
     prompt,

public/fonts/README.md

@@ -0,0 +1,3 @@
+# Fonts
+
+- Google Fonts: [MaShanZheng](https://fonts.google.com/share?selection.family=Zhi+Mang+Xing)

uno.config.ts

@@ -11,7 +11,7 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'text-xl px-4 py-2 rounded inline-block bg-yellow-500 text-white cursor-pointer focus:bg-yellow-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'text-xl px-4 py-2 rounded inline-block bg-yellow-500 text-white cursor-pointer active:bg-yellow-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-red-600'],
   ],
   presets: [