From 75f431d7bf3579105f3a39d8c1ff7a549296e77c Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Wed, 20 Mar 2024 18:00:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=98=E7=94=BB=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E5=9B=BE=E7=89=87=E5=AD=98=E5=82=A8=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20ui:=20=E4=BC=98=E5=8C=96=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.config.ts                           |  2 +-
 assets/css/tailwind.css                 |  9 +++
 components/aigc/drawing/ResultBlock.vue | 75 +++++++++++++++++++++++--
 composables/useHistory.ts               |  3 +-
 nuxt.config.ts                          | 57 ++++++++++---------
 package.json                            |  2 +
 pages/aigc/drawing/index.vue            | 42 +++++++++-----
 tailwind.config.ts                      | 24 ++++----
 yarn.lock                               | 26 ++++++++-
 9 files changed, 181 insertions(+), 59 deletions(-)
 create mode 100644 assets/css/tailwind.css

diff --git a/app.config.ts b/app.config.ts
index 614fe62..17218a8 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,6 +1,6 @@
 export default defineAppConfig({
     ui: {
-        primary: 'green',
+        primary: 'indigo',
         gray: 'neutral',
         strategy: 'merge',
         button: {
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
new file mode 100644
index 0000000..585aad5
--- /dev/null
+++ b/assets/css/tailwind.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Rubik', 'Noto Sans SC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  }
+}
diff --git a/components/aigc/drawing/ResultBlock.vue b/components/aigc/drawing/ResultBlock.vue
index e95a43c..d34f801 100644
--- a/components/aigc/drawing/ResultBlock.vue
+++ b/components/aigc/drawing/ResultBlock.vue
@@ -2,6 +2,7 @@
 import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
 import type {PropType} from 'vue';
 import dayjs from 'dayjs';
+import {get} from 'idb-keyval';
 
 const props = defineProps({
   icon: {
@@ -14,17 +15,62 @@ const props = defineProps({
   prompt: {
     type: String,
   },
+  fid: {
+    type: String,
+    required: true,
+  },
   images: {
     type: Array,
-    default: (): Array<string> => [],
   },
   meta: {
     type: Object as PropType<ResultBlockMeta>,
   },
 })
 
+const toast = useToast()
+
 const expand_prompt = ref(false)
 const show_meta = ref(true)
+
+const cachedImages = ref<string[]>([])
+const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
+
+onMounted(async () => {
+  cachedImagesInterval.value = setInterval(async () => {
+    cachedImages.value = await get(props.fid) as string[] || []
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (cachedImagesInterval.value) {
+    clearInterval(cachedImagesInterval.value)
+  }
+})
+
+const handle_download = (url: string) => {
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `xsh_ai_drawing-${dayjs(props.meta?.datetime! * 1000).format('YYYY-MM-DD-HH-mm-ss')}.png`
+  a.click()
+}
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    toast.add({
+      title: '复制成功',
+      description: '已将内容复制到剪贴板',
+      color: 'primary',
+      icon: 'i-tabler-copy',
+    })
+  }).catch(() => {
+    toast.add({
+      title: '复制失败',
+      description: '无法复制到剪贴板',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+  })
+}
 </script>
 
 <template>
@@ -47,13 +93,30 @@ const show_meta = ref(true)
          @click="expand_prompt = !expand_prompt">
         {{ prompt }}
       </p>
-      <UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"></UButton>
+      <UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"
+               @click="copyToClipboard(prompt)"></UButton>
     </div>
-    <div v-if="images.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
-      <img v-for="(url, i) in images" class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated" :key="i"/>
+    <div v-if="cachedImages.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
+      <div class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
+           v-for="(url, i) in cachedImages" :key="`${fid}-${i}`">
+        <div class="absolute inset-0 bg-gradient-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end
+                    scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition">
+          <div class="w-full flex justify-end gap-1 p-1">
+            <UTooltip text="以此图为参考创作">
+              <UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-copy" square></UButton>
+            </UTooltip>
+            <UTooltip text="下载">
+              <UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-download" square
+              @click="handle_download(url)"></UButton>
+            </UTooltip>
+          </div>
+        </div>
+        <img class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated"/>
+      </div>
+
     </div>
     <div v-else class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center">
-      <UIcon name="i-svg-spinners-tadpole" class="text-3xl" />
+      <UIcon name="i-svg-spinners-tadpole" class="text-3xl"/>
     </div>
     <Transition v-if="meta" name="meta">
       <div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
@@ -95,7 +158,7 @@ const show_meta = ref(true)
 
 .result-image {
   @apply snap-start;
-  @apply h-full aspect-auto object-cover rounded-lg shadow-md;
+  @apply w-full h-full object-cover;
 }
 
 .placeholder-gradient {
diff --git a/composables/useHistory.ts b/composables/useHistory.ts
index 21beeee..09c84a4 100644
--- a/composables/useHistory.ts
+++ b/composables/useHistory.ts
@@ -1,4 +1,3 @@
-import {string} from 'yup';
 import type {ResultBlockMeta} from '~/components/aigc/drawing';
 
 export interface HistoryItem {
@@ -6,7 +5,7 @@ export interface HistoryItem {
   data_id?: string
   prompt: string
   meta: ResultBlockMeta
-  images: string[]
+  images?: string[]
 }
 
 export const useHistory = defineStore('aigc_history', () => {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7476c90..d1041e7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,29 +1,36 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    devtools: {enabled: true},
-    runtimeConfig: {
-        public: {
-            API_BASE: 'https://service1.fenshenzhike.com/'
-        }
+  devtools: {enabled: true},
+  runtimeConfig: {
+    public: {
+      API_BASE: 'https://service1.fenshenzhike.com/',
     },
-    modules: [
-        '@nuxt/ui',
-        'radix-vue/nuxt',
-        'dayjs-nuxt',
-        "@pinia/nuxt",
-        "@pinia-plugin-persistedstate/nuxt",
-        "@vite-pwa/nuxt",
-    ],
-    ui: {
-        icons: ['tabler', 'solar', 'line-md', 'svg-spinners']
-    },
-    colorMode: {
-        preference: 'dark'
-    },
-    dayjs: {
-        locales: ['zh', 'en'],
-        plugins: ['relativeTime', 'utc', 'timezone'],
-        defaultLocale: 'zh',
-        defaultTimezone: 'Asia/Shanghai',
-    }
+  },
+  modules: [
+    '@nuxt/ui',
+    'radix-vue/nuxt',
+    'dayjs-nuxt',
+    '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
+    '@vite-pwa/nuxt',
+    ['@nuxtjs/google-fonts', {
+      display: 'swap',
+      families: {
+        Rubik: '100..900',
+        'Noto Sans SC': '100..900',
+      }
+    }],
+  ],
+  ui: {
+    icons: ['tabler', 'solar', 'line-md', 'svg-spinners'],
+  },
+  colorMode: {
+    preference: 'dark',
+  },
+  dayjs: {
+    locales: ['zh', 'en'],
+    plugins: ['relativeTime', 'utc', 'timezone'],
+    defaultLocale: 'zh',
+    defaultTimezone: 'Asia/Shanghai',
+  },
 })
\ No newline at end of file
diff --git a/package.json b/package.json
index 2218cdc..178922e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@iconify-json/svg-spinners": "^1.1.2",
     "@iconify-json/tabler": "^1.1.105",
     "@nuxt/ui": "^2.14.1",
+    "idb-keyval": "^6.2.1",
     "nuxt": "^3.10.3",
     "radix-vue": "^1.4.9",
     "vue": "^3.4.19",
@@ -22,6 +23,7 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@nuxtjs/google-fonts": "^3.2.0",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@pinia/nuxt": "^0.5.1",
     "@vite-pwa/nuxt": "^0.5.0",
diff --git a/pages/aigc/drawing/index.vue b/pages/aigc/drawing/index.vue
index 74bce99..d24a719 100644
--- a/pages/aigc/drawing/index.vue
+++ b/pages/aigc/drawing/index.vue
@@ -9,6 +9,7 @@ import RatioSelector from '~/components/aigc/RatioSelector.vue';
 import {useFetchWrapped} from '~/composables/useFetchWrapped';
 import type {ResultBlockMeta} from '~/components/aigc/drawing';
 import {useHistory} from '~/composables/useHistory';
+import {del, set} from 'idb-keyval';
 
 useHead({
   title: '绘画 | XSH AI',
@@ -22,6 +23,7 @@ const loginState = useLoginState()
 
 const leftSection = ref<HTMLElement | null>(null)
 const leftHandler = ref<HTMLElement | null>(null)
+const showSidebar = ref(false)
 
 const generating = ref(false)
 
@@ -213,7 +215,6 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
     fid,
     meta,
     prompt: event.data.prompt,
-    images: [],
   })
   const styleItem = event.data.styles as StyleItem
   useFetchWrapped<
@@ -233,14 +234,19 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
         color: 'red',
         icon: 'i-tabler-circle-x',
       })
+      history.text2img = history.text2img.filter(item => item.fid !== fid)
       return
     }
-    const record = history.text2img.find(item => item.fid === fid)
-    record!.images = [`data:image/png;base64,${res.data.request_image}`]
-    record!.meta = {
-      ...record!.meta,
-      id: res.data.data_id as string,
-    }
+    history.text2img = history.text2img.map(item => {
+      if (item.fid === fid) {
+        set(`${item.fid}`, [`data:image/png;base64,${res.data.request_image}`])
+        item.meta = {
+          ...item.meta,
+          id: res.data.data_id as string,
+        }
+      }
+      return item
+    })
   }).catch(err => {
     toast.add({
       title: '生成失败',
@@ -255,10 +261,10 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
 </script>
 
 <template>
-  <div class="w-full flex">
+  <div class="w-full flex relative">
     <div ref="leftSection"
-         class="sticky hidden md:block h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
-         style="width: 320px">
+         class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
+         style="width: 320px" :class="{'translate-x-0': showSidebar}">
       <div ref="leftHandler"
            class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
            @dblclick="leftSection?.style.setProperty('width', '320px')"
@@ -266,6 +272,10 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
         <span
           class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
       </div>
+      <div
+        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-800 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
+        <UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
+      </div>
       <div class="h-full flex flex-col overflow-y-auto">
         <UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
           <div class="flex flex-col gap-2 p-4 pb-28">
@@ -324,8 +334,8 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
           <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
         </div>
         <ResultBlock v-else v-for="(result, k) in history.text2img"
-                     title="文生图" :images="result.images" :meta="result.meta"
-                     :prompt="result.prompt">
+                     title="文生图" :fid="result.fid" :meta="result.meta"
+                     :prompt="result.prompt" :key="result.fid">
           <template #header-right>
             <UPopover overlay>
               <UButton color="black" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
@@ -337,7 +347,11 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
                       取消
                     </UButton>
                     <UButton color="red" size="xs" class="font-bold"
-                             @click="() => {history.text2img.splice(k, 1); close();}">
+                             @click="() => {
+                               history.text2img.splice(k, 1)
+                               del(result.fid)
+                               close()
+                             }">
                       仍然删除
                     </UButton>
                   </div>
@@ -347,7 +361,7 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
           </template>
         </ResultBlock>
         <div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
-          <UIcon name="i-tabler-info-triangle" />
+          <UIcon name="i-tabler-info-triangle"/>
           <p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
         </div>
       </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 971aec0..49ef129 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,13 +1,17 @@
-import type { Config } from 'tailwindcss'
+import type {Config} from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
 
 export default <Partial<Config>>{
-    theme: {
-        extend: {
-            aspectRatio: {
-                auto: 'auto',
-                square: '1 / 1',
-                video: '16 / 9'
-            }
-        }
-    }
+  theme: {
+    fontFamily: {
+      sans: ['Rubik', 'Noto Sans SC', 'sans-serif'],
+    },
+    extend: {
+      aspectRatio: {
+        auto: 'auto',
+        square: '1 / 1',
+        video: '16 / 9',
+      },
+    },
+  },
 }
diff --git a/yarn.lock b/yarn.lock
index 72c978f..ff98774 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1825,6 +1825,15 @@
     lodash.template "^4.5.0"
     pathe "^1.1.1"
 
+"@nuxtjs/google-fonts@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.npmmirror.com/@nuxtjs/google-fonts/-/google-fonts-3.2.0.tgz#03e3284dc980e6bcaa0c67c3080aecda76574b1c"
+  integrity sha512-cGAjDJoeQ2jm6VJCo4AtSmKO6KjsbO9RSLj8q261fD0lMVNMZCxkCxBkg8L0/2Vfgp+5QBHWVXL71p1tiybJFw==
+  dependencies:
+    "@nuxt/kit" "^3.10.3"
+    google-fonts-helper "^3.5.0"
+    pathe "^1.1.2"
+
 "@nuxtjs/tailwindcss@^6.11.4":
   version "6.11.4"
   resolved "https://registry.npmmirror.com/@nuxtjs/tailwindcss/-/tailwindcss-6.11.4.tgz#820bc635f47f632637511932f62e4d87184471f8"
@@ -3449,7 +3458,7 @@ deep-equal@~1.0.1:
   resolved "https://registry.npmmirror.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
   integrity sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==
 
-deepmerge@^4.2.2:
+deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -4262,6 +4271,16 @@ globby@^14.0.0, globby@^14.0.1:
     slash "^5.1.0"
     unicorn-magic "^0.1.0"
 
+google-fonts-helper@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.npmmirror.com/google-fonts-helper/-/google-fonts-helper-3.5.0.tgz#744f661531b4b7894ce3f6f986ebb1a677df5d89"
+  integrity sha512-QcKvB3Y+jJFpvBUp/iG1oe9BbKirrjwU2mzJzKGGb5czz6T93CCP9A8IlfCoZnko7b1+gPH3yVghXP5EBvunDg==
+  dependencies:
+    deepmerge "^4.3.1"
+    hookable "^5.5.3"
+    ofetch "^1.3.3"
+    ufo "^1.4.0"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -4471,6 +4490,11 @@ iconv-lite@^0.6.2:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+idb-keyval@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmmirror.com/idb-keyval/-/idb-keyval-6.2.1.tgz#94516d625346d16f56f3b33855da11bfded2db33"
+  integrity sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==
+
 idb@^7.0.1:
   version "7.1.1"
   resolved "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"