fix(web): view the inline image

Chilfish · Mar 3, 2024 · 2e29fd7 · 2e29fd7
1 parent b5fd038
commit 2e29fd7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/packages/core/src/stores/index.ts b/packages/core/src/stores/index.ts
@@ -1 +1,2 @@
 export * from './post'
+export * from './public'
diff --git a/packages/core/src/stores/public.ts b/packages/core/src/stores/public.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+
+export const usePublicStore = defineStore('public', () => {
+  const globalImg = ref('')
+
+  return {
+    globalImg,
+  }
+})
diff --git a/packages/ui/src/ImgViewer.vue b/packages/ui/src/ImgViewer.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const viewImg = ref('')
+import { storeToRefs } from 'pinia'
+
+const { globalImg } = storeToRefs(usePublicStore())
 
 async function onClose() {
   const btn = await waitForElement('.n-image-preview-toolbar')
@@ -8,12 +10,12 @@ async function onClose() {
   const arr = [btn, mask]
 
   arr.forEach(e => e?.addEventListener('click', () => {
-    viewImg.value = imgViewSrc
+    globalImg.value = imgViewSrc
   }, { once: true }))
 }
 
-watch(viewImg, async () => {
-  if (viewImg.value === imgViewSrc)
+watch(globalImg, async () => {
+  if (globalImg.value === imgViewSrc)
     return
   const img = await waitForElement<HTMLImageElement>('#img-viewer img')
 
@@ -30,7 +32,7 @@ watch(viewImg, async () => {
     <main-image
       class="h-0 w-0"
       :lazy="false"
-      :src="viewImg"
+      :src="globalImg"
     />
   </div>
 </template>
diff --git a/packages/ui/src/post/Text.vue b/packages/ui/src/post/Text.vue
@@ -3,9 +3,10 @@ const props = defineProps<{
   text: string
 }>()
 
+const publicStore = usePublicStore()
+
 const parsedText = parseProtocol(props.text)
   .replace(/\/\/weibo.cn\/sinaurl\?u=(.+)/, (_, href) => decodeURIComponent(href)) // 去掉微博的链接跳转
-const postStore = usePostStore()
 const textRef = ref<HTMLParagraphElement | null>(null)
 
 onMounted(() => {
@@ -18,7 +19,7 @@ onMounted(() => {
       return
 
     const src = target.dataset.src
-    postStore.viewImg = src
+    publicStore.globalImg = src
   })
 })
 </script>