fix: view inline image

Chilfish · Feb 29, 2024 · 8503d3c · 8503d3c
1 parent f7f771e
commit 8503d3c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/packages/ui/src/ImgViewer.vue b/packages/ui/src/ImgViewer.vue
@@ -12,10 +12,13 @@ async function onClose() {
   }, { once: true }))
 }
 
+const src = computed(() => postStore.viewImg)
+
 watch(() => postStore.viewImg, async () => {
   if (postStore.viewImg === imgViewSrc)
     return
   const img = await waitForElement<HTMLImageElement>('#img-viewer img')
+
   img?.click()
   await onClose()
 })
@@ -28,7 +31,8 @@ watch(() => postStore.viewImg, async () => {
   >
     <main-image
       class="h-0 w-0"
-      :src="postStore.viewImg"
+      :lazy="false"
+      :src="src"
     />
   </div>
 </template>
diff --git a/packages/ui/src/MainHeader.vue b/packages/ui/src/MainHeader.vue
@@ -58,10 +58,11 @@ onMounted(() => {
     </form>
 
     <!-- TODO: 设成 settings 的弹窗，来手动设置图床链接 -->
-    <div>
+    <div class="center gap-2 text-3">
       使用远程图片
       <n-switch
         v-model:value="useLocalImage"
+        size="small"
       />
     </div>
 

diff --git a/packages/ui/src/MainImage.vue b/packages/ui/src/MainImage.vue
@@ -24,7 +24,10 @@ watch(useCdn, () => {
   imgRef.value.imageRef.parentElement.classList.remove('img-error')
 })
 
-onMounted(() => {
+function setImgSrc() {
+  if (!imgRef.value)
+    return
+
   const img = imgRef.value.imageRef as HTMLImageElement
   const { disconnect } = lazyLoadImage([img])
   disconnectFn.value = disconnect
@@ -40,7 +43,10 @@ onMounted(() => {
   const config = window.config.data
   const src = `file://${config.publicPath}${props.src.slice(1)}`
   realSrc.value = src
-})
+}
+
+watch(() => props.src, setImgSrc)
+onMounted(setImgSrc)
 
 onUnmounted(() => {
   disconnectFn.value?.()

diff --git a/packages/ui/src/post/List.vue b/packages/ui/src/post/List.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <div
-    class="flex flex-col gap-4 rounded px-2 py-8 sm:max-w-60rem"
+    class="flex flex-col gap-4 rounded px-2 py-8 md:w-60rem"
   >
     <post-item
       v-for="item in posts"