feat: add inverse option

README.md

@@ -2,6 +2,11 @@
 
 Powered by [DeepSeek 开发平台](https://platform.deepseek.com/).
 
+## Desc
+
+- 横批从右往左，上联在右，下联在左。
+- 横批从左往右，上联在左，下联在右。
+
 ## Dev
 
 ### Config API Key

components/AiPrompt.vue

@@ -19,7 +19,11 @@ async function generate() {
     },
   })
   consola.info(data)
-  app.setCoupletsData(data)
+  if (data) {
+    // TODO: add 生成失败提示
+    app.setCoupletsData(data)
+  }
+
   app.loading = false
 }
 

components/SpringFestivalCouplets.vue

@@ -60,19 +60,33 @@ async function shareLink() {
 </script>
 
 <template>
-  <div id="spring-festival-container" ref="sfcContainer" flex="col" class="font-zmx spring-festival-container">
-    <div class="font-zmx m-auto bg-#ff0000 p-2" w="50" text="4xl black">
+  <div
+    id="spring-festival-container" ref="sfcContainer" flex="col"
+    class="font-zmx spring-festival-container"
+  >
+    <div
+      class="font-zmx m-auto bg-#ff0000 p-2" w="50" text="4xl black"
+      :class="{
+        rtl: !app.options.inverseCouplets,
+      }"
+    >
       {{ coupletsData['横批'] }}
     </div>
-    <div flex class="mt-4 items-center justify-between">
+    <div
+      flex
+      class="mt-4 items-center justify-between"
+      :class="{
+        'flex-row-reverse': !app.options.inverseCouplets,
+      }"
+    >
       <div class="spring-festival-couplet">
         {{ coupletsData['上联'] }}
       </div>
 
       <div
         relative class="spring-festival-fu-container transition duration-400"
         :class="{
-          'rotate-180': app.inverseFu,
+          'rotate-180': app.options.inverseFu,
         }"
       >
         <div class="spring-festival-fu" />
@@ -94,7 +108,22 @@ async function shareLink() {
     </label>
     <SwitchRoot
       id="airplane-mode"
-      v-model:checked="app.inverseFu"
+      v-model:checked="app.options.inverseFu"
+      class="relative h-[25px] w-[42px] flex cursor-default rounded-full bg-red-500 shadow-sm data-[state=checked]:bg-yellow-500 focus-within:outline-yellow focus-within:outline"
+    >
+      <SwitchThumb
+        class="my-auto block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-sm transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]"
+      />
+    </SwitchRoot>
+  </div>
+
+  <div class="font-zmx flex items-center justify-center gap-2" text="2xl" m="4">
+    <label class="select-none pr-[15px] leading-none" for="airplane-mode">
+      翻转春联
+    </label>
+    <SwitchRoot
+      id="airplane-mode"
+      v-model:checked="app.options.inverseCouplets"
       class="relative h-[25px] w-[42px] flex cursor-default rounded-full bg-red-500 shadow-sm data-[state=checked]:bg-yellow-500 focus-within:outline-yellow focus-within:outline"
     >
       <SwitchThumb
@@ -124,6 +153,11 @@ async function shareLink() {
   --ac-fu-font-size: 5rem;
 }
 
+.rtl {
+  direction: rtl;
+  unicode-bidi: bidi-override;
+}
+
 .spring-festival-fu {
   // square
   width: var(--ac-fu-font-size);

composables/app.ts

@@ -15,10 +15,16 @@ export const useAppStore = defineStore('app', () => {
     总结: '福',
   })
 
-  /**
-   * 是否反转福字
-   */
-  const inverseFu = useStorage(`${ns}:inverse-fu`, true)
+  const options = useStorage(`${ns}:options`, {
+    /**
+     * 是否翻转对联
+     */
+    inverseCouplets: true,
+    /**
+     * 是否反转福字
+     */
+    inverseFu: true,
+  })
 
   const route = useRoute()
   onMounted(() => {
@@ -31,7 +37,7 @@ export const useAppStore = defineStore('app', () => {
   return {
     loading,
     prompt,
-    inverseFu,
+    options,
 
     coupletsData,