feat: remove comma & add transition

components/AiPrompt.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import consola from 'consola'
-
 import { useMagicKeys } from '@vueuse/core'
 import { config } from '~/config'
 import { apiGenerate } from '~/utils'
@@ -16,11 +14,6 @@ async function generate() {
     return
 
   app.loading = true
-  // const data = await $fetch('/api/generate', {
-  //   query: {
-  //     prompt: app.prompt,
-  //   },
-  // })
   const data = await apiGenerate({
     prompt: app.prompt,
   })

components/SpringFestivalCouplets.vue

@@ -70,7 +70,9 @@ async function shareLink() {
         rtl: !app.options.inverseCouplets,
       }"
     >
-      {{ coupletsData['横批'] }}
+      <Transition name="fade" mode="out-in">
+        <span v-if="app.visible">{{ coupletsData['横批'] }}</span>
+      </Transition>
     </div>
     <div
       flex
@@ -80,7 +82,9 @@ async function shareLink() {
       }"
     >
       <div class="spring-festival-couplet">
-        {{ coupletsData['上联'] }}
+        <Transition name="fade" mode="out-in">
+          <span v-if="app.visible">{{ coupletsData['上联'] }}</span>
+        </Transition>
       </div>
 
       <div
@@ -92,12 +96,16 @@ async function shareLink() {
         <div class="spring-festival-fu" />
         <!-- not inset-0 for compatibility -->
         <span class="fu-char absolute bottom-0 left-0 right-0 top-0">
-          {{ coupletsData['总结'].slice(0, 1) }}
+          <Transition name="fade" mode="out-in">
+            <span v-if="app.visible">{{ coupletsData['总结'].slice(0, 1) }}</span>
+          </Transition>
         </span>
       </div>
 
       <div class="spring-festival-couplet">
-        {{ coupletsData['下联'] }}
+        <Transition name="fade" mode="out-in">
+          <span v-if="app.visible">{{ coupletsData['下联'] }}</span>
+        </Transition>
       </div>
     </div>
   </div>

composables/app.ts

@@ -7,6 +7,10 @@ const ns = 'ai-sfc'
 export const useAppStore = defineStore('app', () => {
   const loading = ref(false)
   const prompt = useStorage(`${ns}:prompt`, '')
+  /**
+   * toggle for fade transition
+   */
+  const visible = ref(true)
 
   const coupletsData = useStorage<SprintFestivalCouplets>(`${ns}:couplets-data`, {
     上联: '这里是上联',
@@ -35,14 +39,18 @@ export const useAppStore = defineStore('app', () => {
   })
 
   return {
+    visible,
     loading,
     prompt,
     options,
 
     coupletsData,
 
-    setCoupletsData(data: SprintFestivalCouplets) {
+    async setCoupletsData(data: SprintFestivalCouplets) {
+      visible.value = false
       coupletsData.value = data
+      await nextTick()
+      visible.value = true
     },
   }
 })

server/api/generate.ts

@@ -21,6 +21,12 @@ export default defineEventHandler(async (event) => {
   let coupletData: SprintFestivalCouplets | undefined
   try {
     coupletData = JSON.parse(unWrapperContent) as SprintFestivalCouplets
+
+    // remove the last comma and period
+    if (coupletData['上联'].endsWith('，') && coupletData['下联'].endsWith('。')) {
+      coupletData['下联'] = coupletData['下联'].slice(0, -1)
+      coupletData['上联'] = coupletData['上联'].slice(0, -1)
+    }
   }
   catch (e) {
     // eslint-disable-next-line no-console

styles/index.scss

@@ -1,3 +1,14 @@
+// transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 // https://fonts.google.com/specimen/Ma+Shan+Zheng
 .font-zmx {
   font-family: 'Ma Shan Zheng', 华文楷体, KaiTi, 'STKaiti', 'Kaiti SC', '楷体',
@@ -9,4 +20,5 @@
 @font-face {
   font-family: 'Ma Shan Zheng';
   src: url('/fonts/MaShanZheng-Regular.ttf') format('truetype');
+  font-display: swap;
 }