fix(ui): image & add back to top

Chilfish · Mar 4, 2024 · 7aca8c2 · 7aca8c2
1 parent 195c236
commit 7aca8c2
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 31 deletions.
diff --git a/packages/core/src/constants/index.ts b/packages/core/src/constants/index.ts
@@ -7,3 +7,5 @@ export const imgViewSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAE
  * 默认的图片 CDN
  */
 export const imgCdn = 'https://cdn.ipfsscan.io/weibo'
+
+export const ImgPlaceholder = '/placeholder.webp'
diff --git a/packages/core/src/utils/dom.ts b/packages/core/src/utils/dom.ts
@@ -1,3 +1,5 @@
+import { ImgPlaceholder } from '../constants'
+
 /**
  * Wait for an element to be added to the DOM.
  */
@@ -31,19 +33,22 @@ export function lazyLoadImage(
       if (entry.isIntersecting) {
         const img = entry.target as HTMLImageElement
         const src = img.getAttribute('data-preview-src')
-        img.src = src || '/placeholder.webp'
+        img.src = src || ImgPlaceholder
         img.onerror = () => {
-          img.src = '/placeholder.webp'
+          img.src = ImgPlaceholder
           img.parentElement?.classList.add('img-error')
         }
+        img.onload = () => {
+          img.parentElement?.classList.add('loaded')
+        }
         observer.unobserve(img)
       }
     })
   })
 
   if (imgs) {
     imgs.forEach((img) => {
-      if (img.src.endsWith('/placeholder.webp'))
+      if (img.src.endsWith(ImgPlaceholder))
         observer.observe(img)
     })
   }

diff --git a/packages/ui/src/MainImage.vue b/packages/ui/src/MainImage.vue
@@ -59,8 +59,8 @@ onUnmounted(() => {
   <n-image
     ref="imgRef"
     lazy
-    fallback-src="/placeholder.webp"
-    :src="lazy ? '/placeholder.webp' : realSrc"
+    :fallback-src="ImgPlaceholder"
+    :src="lazy ? ImgPlaceholder : realSrc"
     :object-fit="fit"
     :alt="alt"
     :preview-src="realSrc"
@@ -72,29 +72,30 @@ onUnmounted(() => {
       class: 'transition-all',
       referrerpolicy: referrerPolicy,
     }"
-  >
-    <template #placeholder>
-      <img
-        src="/placeholder.webp"
-        class="h-full w-full"
-      >
-    </template>
-  </n-image>
+  />
 </template>
 
 <style lang="scss">
-$error-height: 7rem;
+$width: 7rem;
 
-.n-image img {
-  width: 100%;
-  border-radius: 4px;
-}
-
-.n-image.img-error {
-  width: $error-height !important;
+.n-image {
   img {
-    min-width: $error-height !important;
-    min-height: $error-height !important;
+    min-width: $width !important;
+    width: $width !important;
+    border-radius: 4px;
+  }
+
+  &:not(.img-error) {
+    img {
+      width: auto !important;
+    }
+  }
+
+  &.img-error {
+    width: $width !important;
+    img {
+      min-height: $width !important;
+    }
   }
 }
 </style>
diff --git a/packages/ui/src/Preview.vue b/packages/ui/src/Preview.vue
@@ -6,20 +6,23 @@ const postStore = usePostStore()
 const posts = ref([] as Post[])
 const route = useRoute()
 
-const loaded = ref(false)
+const idLoaded = ref(false)
+const postsLoaded = ref(false)
+
 onMounted(async () => {
   const ids = await indexDB.getItem<string[]>('ids')
 
   postStore.ids = ids || []
   postStore.total = ids?.length ?? 0
-  loaded.value = true
+  idLoaded.value = true
 })
 
 watchEffect(async () => {
-  if (!loaded.value)
+  if (!idLoaded.value)
     return
   const page = route.query.page
   posts.value = await postStore.get(Number(page))
+  postsLoaded.value = true
 })
 </script>
 
@@ -28,12 +31,12 @@ watchEffect(async () => {
     class="min-h-90dvh center-col justify-between pb-4"
   >
     <n-spin
-      v-if="!loaded"
-      class="center"
+      v-if="!idLoaded || !postsLoaded"
+      class="center pt-16"
       size="large"
     />
 
-    <template v-else>
+    <template v-if="idLoaded">
       <div
         v-if="postStore.ids.length === 0"
         class="pt-12"
@@ -53,7 +56,7 @@ watchEffect(async () => {
       />
 
       <h3
-        v-else-if="posts.length === 0"
+        v-else-if="posts.length === 0 && route.path === '/search'"
         class="mt-20 text-center text-2xl font-bold"
       >
         没有相关结果

diff --git a/packages/ui/src/post/Comments.vue b/packages/ui/src/post/Comments.vue
@@ -34,7 +34,7 @@ defineProps<{
       <post-text :text="comment.text" />
 
       <main-image
-        v-if="comment.img"
+        v-if="comment.img && !comment.img.includes('sinaurl')"
         :src="comment.img"
         class="max-h-10rem"
       />

diff --git a/packages/ui/src/post/List.vue b/packages/ui/src/post/List.vue
@@ -10,6 +10,14 @@ defineProps<{
   <div
     class="flex flex-col gap-4 rounded px-2 py-8 md:w-60rem"
   >
+    <n-back-top
+      :bottom="60"
+      :visibility-height="600"
+      title="返回顶部"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><defs><mask id="ipTRocketOne0"><g fill="none" stroke="#fff" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="m20.906 6.063l1.43-.954a3 3 0 0 1 3.328 0l1.43.954A20 20 0 0 1 36 22.703V33H12V22.704a20 20 0 0 1 8.906-16.641" /><circle cx="24" cy="20" r="6" fill="#555" /><path stroke-linecap="round" stroke-linejoin="round" d="m12 22l-6 6.217V33h36v-4.783L36 22M24 38v6m-8-4v2m16-2v2" /></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTRocketOne0)" /></svg>
+    </n-back-top>
+
     <post-item
       v-for="item in posts"
       :key="item.id"

diff --git a/packages/ui/src/post/Text.vue b/packages/ui/src/post/Text.vue
@@ -6,6 +6,7 @@ const props = defineProps<{
 const publicStore = usePublicStore()
 
 const parsedText = parseProtocol(props.text)
+  .replace('https:https:', 'https:') // a patch ...
   .replace(/\/\/weibo.cn\/sinaurl\?u=(.+)/, (_, href) => decodeURIComponent(href)) // 去掉微博的链接跳转
 const textRef = ref<HTMLParagraphElement | null>(null)