diff --git a/apps/desktop/main/src/fetch.ts b/apps/desktop/main/src/fetch.ts
index f174934..3a5b1d6 100644
--- a/apps/desktop/main/src/fetch.ts
+++ b/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)
 }
diff --git a/apps/desktop/preload/src/index.ts b/apps/desktop/preload/src/index.ts
index b850188..2c74196 100644
--- a/apps/desktop/preload/src/index.ts
+++ b/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,
-}
+})
diff --git a/apps/desktop/renderer/src/App.vue b/apps/desktop/renderer/src/App.vue
index e1b4ca2..f8287f8 100644
--- a/apps/desktop/renderer/src/App.vue
+++ b/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>
 
diff --git a/apps/desktop/renderer/src/components/File.vue b/apps/desktop/renderer/src/components/File.vue
deleted file mode 100644
index 883b592..0000000
--- a/apps/desktop/renderer/src/components/File.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { FileIPC } from '#preload'
-
-const selectedFolder = ref('')
-const selectedFile = ref({
-  path: '',
-  name: '',
-  size: 0,
-})
-</script>
-
-<template>
-  <div>
-    <p>Selected folder: {{ selectedFolder }}</p>
-    <button
-      class="btn"
-      @click="async() => {
-        let res = await FileIPC.selectFolder()
-        if (res === '')
-          res = configRef.configPath
-
-        selectedFolder = res
-        config.set('dataPath', res)
-      }"
-    >
-      Select folder
-    </button>
-
-    <p>Selectd File {{ selectedFile }}</p>
-    <button
-      class="btn"
-      @click="async() => {
-        const path = await FileIPC.selectFile()
-        if (path === '')
-          return
-        const file = await FileIPC.readFile(path)
-
-        if (!file)
-          return console.error('File not found')
-
-        const separator = path.includes('/') ? '/' : '\\'
-
-        selectedFile = {
-          path,
-          name: path.split(separator).pop() || '',
-          size: file.byteLength,
-        }
-      }"
-    >
-      Select File
-    </button>
-  </div>
-</template>
diff --git a/apps/desktop/renderer/src/components/Sqlite.vue b/apps/desktop/renderer/src/components/Sqlite.vue
deleted file mode 100644
index 94a5459..0000000
--- a/apps/desktop/renderer/src/components/Sqlite.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { IAccessor } from '@types'
-import type { DBMethods, UserTable } from '@database'
-
-const { userService } = defineProps<{
-  userService: IAccessor<DBMethods>
-}>()
-
-const users = ref([] as UserTable[])
-
-async function createUser() {
-  const user = {
-    name: 'John Doe',
-    email: 'jogn@mail.com',
-  }
-
-  const newUser = await userService.send('addUser', user)
-  users.value.push(newUser)
-}
-
-onMounted(async () => {
-  const data = await userService.send('getAllUsers')
-  users.value = data
-})
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <p>Use Sqlite3 </p>
-
-    <div>
-      <span> All users:</span>
-      <button
-        class="ml-2 rounded-md bg-blue-500 px-2 py-1 text-white"
-        @click="createUser"
-      >
-        Create user
-      </button>
-    </div>
-
-    <ul>
-      <li
-        v-for="user in users"
-        :key="user.id"
-      >
-        {{ user.id }} - {{ user.name }} - {{ user.email }}
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/apps/desktop/renderer/src/composables/config.ts b/apps/desktop/renderer/src/composables/config.ts
index 18789ad..dc3debf 100644
--- a/apps/desktop/renderer/src/composables/config.ts
+++ b/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,
-}
diff --git a/apps/desktop/renderer/src/pages/index.vue b/apps/desktop/renderer/src/pages/index.vue
index dfaea62..56b339d 100644
--- a/apps/desktop/renderer/src/pages/index.vue
+++ b/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>
diff --git a/packages/core/src/constants/index.ts b/packages/core/src/constants/index.ts
index 7bd1e2b..a784122 100644
--- a/packages/core/src/constants/index.ts
+++ b/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'
diff --git a/packages/core/src/services/userService.ts b/packages/core/src/services/userService.ts
index 61fa4c6..7754595 100644
--- a/packages/core/src/services/userService.ts
+++ b/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 })
diff --git a/packages/core/src/utils/config.ts b/packages/core/src/utils/config.ts
index e76c4fe..277f1e0 100644
--- a/packages/core/src/utils/config.ts
+++ b/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 {
diff --git a/packages/core/src/utils/dom.ts b/packages/core/src/utils/dom.ts
index 3daddbc..8a35b50 100644
--- a/packages/core/src/utils/dom.ts
+++ b/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(),
+  }
 }
diff --git a/packages/core/src/utils/parse.ts b/packages/core/src/utils/parse.ts
index 9232f9d..5905660 100644
--- a/packages/core/src/utils/parse.ts
+++ b/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] // 域名
 
diff --git a/packages/ui/src/MainImage.vue b/packages/ui/src/MainImage.vue
index 9b815df..f5ec6b8 100644
--- a/packages/ui/src/MainImage.vue
+++ b/packages/ui/src/MainImage.vue
@@ -14,28 +14,41 @@ const props = withDefaults(defineProps<{
 })
 
 const realSrc = ref(props.src)
-const inElectron = computed(() => import.meta.env.PROD && isElectron && !props.src.startsWith('/'))
+const imgRef = ref<any>()
+const disconnectFn = ref<() => void>()
 
-// TODO: build:web 的时候注释下面这段
-onBeforeMount(async () => {
-  if (!inElectron.value)
+onMounted(() => {
+  const img = imgRef.value.imageRef as HTMLImageElement
+  const { disconnect } = lazyLoadImage([img])
+  disconnectFn.value = disconnect
+
+  if (!isElectron) {
+    realSrc.value = replaceImg(props.src)
+    return
+  }
+
+  if (import.meta.env.DEV || !props.src.startsWith('/'))
     return
 
-  const { _config } = await import('#preload')
-  const { publicPath } = _config.data
-  const src = `file://${publicPath}${props.src.slice(1)}`
+  const config = window.config.data
+  const src = `file://${config.publicPath}${props.src.slice(1)}`
   realSrc.value = src
 })
+
+onUnmounted(() => {
+  disconnectFn.value?.()
+})
 </script>
 
 <template>
   <n-image
+    ref="imgRef"
     lazy
     fallback-src="/placeholder.webp"
     :src="lazy ? '/placeholder.webp' : realSrc"
     :object-fit="fit"
     :alt="alt"
-    :preview-src="inElectron ? realSrc : replaceImg(src)"
+    :preview-src="realSrc"
     :img-props="{
       style: {
         minHeight,
diff --git a/packages/ui/src/Preview.vue b/packages/ui/src/Preview.vue
index 2850a18..12e6d1e 100644
--- a/packages/ui/src/Preview.vue
+++ b/packages/ui/src/Preview.vue
@@ -8,12 +8,10 @@ watch(posts, async () => {
   if (posts.value.length === 0 || !loaded.value)
     return
   await delay(4000)
-  lazyLoadImage()
 })
 
 onMounted(() => {
   loaded.value = true
-  lazyLoadImage()
 })
 </script>
 
diff --git a/tsconfig.json b/tsconfig.json
index 08e69a4..6beab0d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,6 +30,7 @@
     "packages",
     "*.ts",
     "*.tsx",
+    "*.d.ts",
     "types/*.d.ts"
   ],
   "exclude": [
diff --git a/types/IPC.ts b/types/IPC.ts
index aa71dc5..ecf162c 100644
--- a/types/IPC.ts
+++ b/types/IPC.ts
@@ -1,4 +1,5 @@
 import type { Buffer } from 'node:buffer'
+import type { UserInfo } from './post'
 
 export type FileExt = 'json' | 'js' | '.mjs'
 
@@ -11,4 +12,5 @@ export interface IPCFile {
 
 export interface IPCFetch {
   userInfo: (options: { id?: string, name?: string }) => Promise<{ uid: string, name: string }>
+  userDetail: (uid?: string) => Promise<UserInfo>
 }
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
index 31133f4..a042277 100644
--- a/types/auto-imports.d.ts
+++ b/types/auto-imports.d.ts
@@ -17,7 +17,7 @@ declare global {
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
-  const config: typeof import('../apps/desktop/renderer/src/composables/config')['config']
+  const config: window.config: typeof import('../apps/desktop/renderer/src/composables/config')['config: window.config']
   const configRef: typeof import('../apps/desktop/renderer/src/composables/config')['configRef']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
@@ -53,6 +53,7 @@ declare global {
   const h: typeof import('vue')['h']
   const hasProtocol: typeof import('../packages/core/src/utils/protocol')['hasProtocol']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const imgCdn: typeof import('../packages/core/src/constants/index')['imgCdn']
   const imgViewSrc: typeof import('../packages/core/src/constants/index')['imgViewSrc']
   const imgsParser: typeof import('../packages/core/src/utils/parse')['imgsParser']
   const inject: typeof import('vue')['inject']
@@ -358,7 +359,6 @@ declare module 'vue' {
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
-    readonly config: UnwrapRef<typeof import('../apps/desktop/renderer/src/composables/config')['config']>
     readonly configRef: UnwrapRef<typeof import('../apps/desktop/renderer/src/composables/config')['configRef']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
@@ -393,6 +393,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hasProtocol: UnwrapRef<typeof import('../packages/core/src/utils/protocol')['hasProtocol']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly imgCdn: UnwrapRef<typeof import('../packages/core/src/constants/index')['imgCdn']>
     readonly imgViewSrc: UnwrapRef<typeof import('../packages/core/src/constants/index')['imgViewSrc']>
     readonly imgsParser: UnwrapRef<typeof import('../packages/core/src/utils/parse')['imgsParser']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
@@ -689,7 +690,6 @@ declare module '@vue/runtime-core' {
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
-    readonly config: UnwrapRef<typeof import('../apps/desktop/renderer/src/composables/config')['config']>
     readonly configRef: UnwrapRef<typeof import('../apps/desktop/renderer/src/composables/config')['configRef']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
@@ -724,6 +724,7 @@ declare module '@vue/runtime-core' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly hasProtocol: UnwrapRef<typeof import('../packages/core/src/utils/protocol')['hasProtocol']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly imgCdn: UnwrapRef<typeof import('../packages/core/src/constants/index')['imgCdn']>
     readonly imgViewSrc: UnwrapRef<typeof import('../packages/core/src/constants/index')['imgViewSrc']>
     readonly imgsParser: UnwrapRef<typeof import('../packages/core/src/utils/parse')['imgsParser']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
diff --git a/types/config.ts b/types/config.ts
index e655f71..a185e2e 100644
--- a/types/config.ts
+++ b/types/config.ts
@@ -1,3 +1,5 @@
+import type Conf from 'conf'
+
 /**
  * 解析、爬取时的配置
  */
@@ -59,5 +61,13 @@ export interface AppConfig {
   publicPath: string
   osSep: '\\' | '/'
 
+  useCdn: boolean
   fetchOptions: FetchOptions
 }
+
+type OnChange = (callback: (newValue: AppConfig, oldValue: AppConfig) => void) => Function
+
+export type Config = Pick<Conf<AppConfig>, 'get' | 'set' | 'path'> & {
+  data: AppConfig
+  onChange: OnChange
+}
diff --git a/types/env.d.ts b/types/env.d.ts
index 6ef3623..391fc3f 100644
--- a/types/env.d.ts
+++ b/types/env.d.ts
@@ -1,9 +1,3 @@
-declare global {
-  interface Window {
-    $message: typeof import('naive-ui')['useMessage']
-  }
-}
-
 /// <reference types="vite/client" />
 
 /**
diff --git a/types/global.d.ts b/types/global.d.ts
index ffea976..696f9aa 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,11 +1,10 @@
-declare global {
-  import type { useMessage } from 'naive-ui'
-  import type { FetchOptions } from './config'
-  import type { db } from '#preload'
+import type { useMessage } from 'naive-ui'
+import type { Config, FetchOptions } from './config'
 
+declare global {
   interface Window {
     $message: ReturnType<typeof useMessage>
-    db: ReturnType<typeof db>
+    config: Config
   }
 
   interface Global {
diff --git a/types/post.ts b/types/post.ts
index f6faf38..9ad53cc 100644
--- a/types/post.ts
+++ b/types/post.ts
@@ -4,6 +4,17 @@ export interface User {
   profile_image_url: string
 }
 
+export interface UserInfo {
+  uid: string
+  name: string
+  avatar: string
+  followers: number
+  followings: number
+  bio: string
+  createdAt: string
+  birthday: string
+}
+
 export type PicInfo = Record<string, {
   url: string
 }>