fix: image component, add img cdn

fix: global types

apps/desktop/main/src/fetch.ts

@@ -1,5 +1,5 @@
 import type { IPCFetch } from '@types'
-import { userInfo } from '@core/services'
+import { userDetail, userInfo } from '@core/services'
 import { IPCMain } from '../../utils'
 
 const channel = 'fetch'
@@ -8,4 +8,5 @@ export function setupFetchMainIPC() {
   const IPC = new IPCMain<IPCFetch>(channel)
 
   IPC.on('userInfo', userInfo)
+  IPC.on('userDetail', userDetail)
 }

apps/desktop/preload/src/index.ts

@@ -1,6 +1,7 @@
 import customTitlebar from 'custom-electron-titlebar'
+import { contextBridge } from 'electron'
 import type { DBMethods } from '@database'
-import type { AppConfig, IPCFetch, IPCFile } from '@types'
+import type { IPCFetch, IPCFile } from '@types'
 import { config } from '@core/utils/config'
 import { IPCRenderer } from '../../utils'
 
@@ -21,8 +22,7 @@ export const dbIPC = (() => {
   }
 })()
 
-// TODO: fileIPC
-export const FileIPC: IPCFile = (() => {
+export const fileIPC: IPCFile = (() => {
   const IPC = new IPCRenderer<IPCFile>('files')
 
   return {
@@ -32,19 +32,20 @@ export const FileIPC: IPCFile = (() => {
   }
 })()
 
-export const FetchIPC: IPCFetch = (() => {
+export const fetchIPC: IPCFetch = (() => {
   const IPC = new IPCRenderer<IPCFetch>('fetch')
 
   return {
-    userInfo: (id, name) => IPC.send('userInfo', id, name),
+    userInfo: options => IPC.send('userInfo', options),
+    userDetail: uid => IPC.send('userDetail', uid),
   }
 })()
 
-type OnChange = (callback: (newValue: AppConfig, oldValue: AppConfig) => void) => Function
-export const _config = {
+// unplugin-auto-expose 在 hmr 时总是会导致 undefined 的问题
+contextBridge.exposeInMainWorld('config', {
   set: config.set.bind(config),
   get: config.get.bind(config),
-  onChange: config.onDidAnyChange.bind(config) as OnChange,
+  onChange: config.onDidAnyChange.bind(config),
   path: config.path,
   data: config.store,
-}
+})

apps/desktop/renderer/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-onMounted(() => {
-  lazyLoadImage()
+watchImmediate(isDark, (value) => {
+  window.config.set('theme', value ? 'dark' : 'light')
 })
 </script>
 

apps/desktop/renderer/src/composables/config.ts

@@ -1,12 +1,5 @@
-import { _config } from '#preload'
+export const configRef = ref(window.config.data)
 
-const configRef = ref(_config.data)
-
-_config.onChange((newVal) => {
+window.config.onChange((newVal) => {
   configRef.value = newVal
 })
-
-export {
-  configRef,
-  _config as config,
-}

apps/desktop/renderer/src/pages/index.vue

@@ -1,17 +1,22 @@
 <script lang="ts" setup>
-import { FetchIPC } from '#preload'
+import { fetchIPC } from '#preload'
 
 const router = useRouter()
 
-watchImmediate(isDark, (value) => {
-  config.set('theme', value ? 'dark' : 'light')
-})
-
-const user1 = ref('')
+const user1 = ref<any>()
 
 const cookie = configRef.value.fetchOptions.cookie
 if (!cookie)
   router.push('/intro')
+
+const imgUrl = computed(() => {
+  const url = user1.value?.avatar
+  if (!url)
+    return ''
+
+  const { pathname } = new URL(url)
+  return `https://cdn.ipfsscan.io/weibo${pathname}`
+})
 </script>
 
 <template>
@@ -20,14 +25,28 @@ if (!cookie)
       {{ user1 }}
     </pre>
 
-    <button
-      class="btn"
-      @click="async() => {
-        const res = await FetchIPC.userInfo({ id: '1111681197' })
-        user1 = JSON.stringify(res, null, 2)
-      }"
-    >
-      fetch userInfo
-    </button>
+    <MainImage
+      v-if="user1?.avatar"
+      :src="imgUrl"
+    />
+
+    <div class="flex gap-4">
+      <RouterLink
+        class="btn"
+        to="/intro"
+      >
+        back to intro
+      </RouterLink>
+
+      <button
+        class="btn"
+        @click="async() => {
+          const res = await fetchIPC.userDetail()
+          user1 = res
+        }"
+      >
+        fetch userInfo
+      </button>
+    </div>
   </main>
 </template>

packages/core/src/constants/index.ts

@@ -2,3 +2,8 @@
  * 占位图
  */
 export const imgViewSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+/**
+ * 默认的图片 CDN
+ */
+export const imgCdn = 'https://cdn.ipfsscan.io/weibo'

packages/core/src/services/userService.ts

@@ -42,10 +42,10 @@ export async function userDetail(uid?: string) {
 
   const detail = {
     createdAt: data.created_at,
-    birsday: data.birthday,
+    birthday: data.birthday,
   } as {
     createdAt: string
-    birsday: string
+    birthday: string
   }
 
   const info = await userInfo({ id: _uid })

packages/core/src/utils/config.ts

@@ -19,7 +19,9 @@ const config = new Config<AppConfig>({
     osSep: '/',
     version,
     theme: 'light',
+    useCdn: false,
     fetchOptions: {
+      now,
       uid: '',
       name: '',
       cookie: '',
@@ -37,7 +39,9 @@ const config = new Config<AppConfig>({
 const path = config.path.replace(/config\.json$/, '')
 
 config.set('configPath', path)
-// config.set('fetchOptions.cookie', cookie ?? '')
+config.set('version', version)
+config.set('fetchOptions.now', now)
+config.set('fetchOptions.dateRange', [now, now])
 
 export default config
 export {

packages/core/src/utils/dom.ts

@@ -23,7 +23,9 @@ export function waitForElement<T extends Element = HTMLElement>(
   })
 }
 
-export function lazyLoadImage() {
+export function lazyLoadImage(
+  imgs?: NodeListOf<HTMLImageElement> | HTMLImageElement[],
+) {
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
@@ -39,10 +41,15 @@ export function lazyLoadImage() {
     })
   })
 
-  const imgs = document.querySelectorAll<HTMLImageElement>('.n-image img')
+  if (imgs) {
+    imgs.forEach((img) => {
+      if (img.src.endsWith('/placeholder.webp'))
+        observer.observe(img)
+    })
+  }
 
-  imgs.forEach((img) => {
-    if (img.src.endsWith('/placeholder.webp'))
-      observer.observe(img)
-  })
+  return {
+    observe: (img: HTMLImageElement) => observer.observe(img),
+    disconnect: () => observer.disconnect(),
+  }
 }

packages/core/src/utils/parse.ts

@@ -1,7 +1,8 @@
 import type { CardInfo, Comment, FetchOptions, ParseResult, PicInfo, Post } from '@types'
 import { fetchComments, fetchLongText } from '../services'
 import { imgViewSrc } from '../constants'
-import { getOptions, isInMonkey } from '.'
+import { imgCdn } from './../constants/index'
+import { getOptions } from '.'
 
 export const weibo = 'https://weibo.com'
 
@@ -41,8 +42,9 @@ export function replaceImg(img?: string) {
   if (!img)
     return imgViewSrc
 
-  if (isInMonkey || img.includes('data:image'))
+  if (img.includes('data:image') || img.startsWith(imgCdn))
     return img
+
   const name = img.split('/').pop()?.replace(/\?.+/, '') // 同时去除 params
   const prefix = img.match(/^(?:https?:\/\/)?([^:\/\n]+)/im)?.[1] // 域名