feat: preview image

components/ChatList.vue

@@ -18,6 +18,35 @@ const md: MarkdownIt = markdownit({
     return `<pre class="hljs"><code>${hljs.highlightAuto(code).value}</code></pre>`;
   },
 })
+
+function handleZoom(e: MouseEvent) {
+  const img = e.target as HTMLImageElement
+  const container = document.createElement('div')
+  container.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+    opacity: 0;
+    z-index: 9999;
+  `
+  const imgZoom = document.createElement('img')
+  imgZoom.src = img.src
+  container.appendChild(imgZoom)
+  document.body.appendChild(container)
+  container.addEventListener('click', () => {
+    container.style.opacity = '0'
+    setTimeout(() => {
+      document.body.removeChild(container)
+    }, 300)
+  })
+
+  imgZoom.height
+  container.style.opacity = '1'
+}
 </script>
 
 <template>
@@ -31,7 +60,9 @@ const md: MarkdownIt = markdownit({
             :class="[i.role==='user'?'send':'reply-text', index+1===history.length && loading ?  'loading':'' ]"
             v-html="i.role === 'user'? i.content: md.render(i.content)"/>
         <li v-else-if="i.type === 'image'">
-          <img class="chat-item slide-top" :src="i.content" :alt="history[index-1].content"/>
+          <img @click="handleZoom" class="chat-item slide-top cursor-pointer hover:brightness-75 transition-all"
+               :src="i.content"
+               :alt="history[index-1].content"/>
         </li>
         <li v-else-if="i.type==='error'" class="chat-item slide-top reply-error">
           {{ i.content }}

components/Header.vue

@@ -12,13 +12,17 @@ onMounted(() => {
 watch(openAside, (v) => {
   localStorage.setItem('openAside', v.toString())
 })
+
+function handleReload() {
+  location.reload()
+}
 </script>
 
 <template>
-  <header class="blur-global dark:bg-neutral-800 shadow h-16 fixed w-full z-50 rounded-b-lg">
+  <header class="blur-global dark:bg-neutral-800 shadow h-16 fixed w-full z-30 rounded-b-lg">
     <UContainer class="h-full flex items-center">
       <IButton name="i-heroicons-bars-3-20-solid" @click="openAside = !openAside"/>
-      <h1 @click="()=>location.reload()" class="text-lg font-bold ml-2 hover:cursor-pointer">CF AI Web</h1>
+      <h1 @click="handleReload" class="text-lg font-bold ml-2 hover:cursor-pointer">CF AI Web</h1>
       <IButton class="ml-auto" :name="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
                @click="toggleDark()"/>
     </UContainer>