fix(web): the new example & use provide/inject the user info

apps/monkey/src/stores/postStore.ts

@@ -51,7 +51,7 @@ export const usePostStore = defineStore('post', () => {
       fetchedCount: 0,
     })
 
-    setDB()
+    await setDB()
     await idb.value.clearDB()
   }
 
@@ -68,8 +68,7 @@ export const usePostStore = defineStore('post', () => {
 
   async function getAll() {
     await waitIDB()
-    const posts = await idb.value.getAllDBPosts()
-    return posts
+    return await idb.value.getAllDBPosts()
   }
 
   async function setCount() {

apps/web/src/App.vue

@@ -37,7 +37,9 @@ useHead({
   ],
 })
 
-const loaded = ref(false)
+const route = useRoute()
+const loaded = ref(route.path === '/example')
+
 onNuxtReady(async () => {
   const publicStore = usePublicStore()
   const users = localStorage.getItem('users')
@@ -47,6 +49,8 @@ onNuxtReady(async () => {
   publicStore.curUid = curUid || ''
 
   watchImmediate(() => publicStore.curUid, async () => {
+    if (route.path === '/example')
+      return
     loaded.value = false
     await publicStore.migrateUser()
     loaded.value = true

packages/core/src/constants/vueProvide.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+import type { User } from '@types'
+
+export const KeyUser = Symbol('user') as InjectionKey<User>

packages/core/src/index.ts

@@ -1,5 +1,6 @@
 export * from './composables'
 export * from './utils'
 export * from './constants'
+export * from './constants/vueProvide'
 export * from './stores'
 export * from './services'

packages/core/src/stores/post.ts

@@ -44,7 +44,7 @@ export const usePostStore = defineStore('post', () => {
     }),
   })
 
-  const seachFn = ref<(text: string) => number[]>()
+  const searchFn = ref<(text: string) => number[]>()
 
   /* 该结果的总帖子数 */
   const total = ref(0)
@@ -70,7 +70,9 @@ export const usePostStore = defineStore('post', () => {
   /**
    * 设置帖子数据，可选择是否替换或是追加合并
    * @param data
-   * @param replace
+   * @param user
+   * @param _followings
+   * @param isReplace
    */
   async function set(
     data: Post[],
@@ -89,7 +91,7 @@ export const usePostStore = defineStore('post', () => {
     const { count, search } = await idb.value.addDBPosts(data, isReplace)
     totalDB.value = count
     total.value = count
-    seachFn.value = search
+    searchFn.value = search
 
     await idb.value.setUserInfo(user)
   }
@@ -99,16 +101,15 @@ export const usePostStore = defineStore('post', () => {
   ) {
     await waitIDB()
 
-    if (!seachFn.value) {
+    if (!searchFn.value) {
       const posts = await idb.value.getAllDBPosts()
       const { search } = idb.value.buildSearch(posts)
-      seachFn.value = search
+      searchFn.value = search
     }
 
-    const result = seachFn.value(query)
+    const result = searchFn.value(query)
 
-    const count = result.length
-    total.value = count
+    total.value = result.length
     return result
   }
 
@@ -131,7 +132,7 @@ export const usePostStore = defineStore('post', () => {
     const path = route.path
     const query = route.query.q as string
 
-    let result: Post[] = []
+    let result: Post[]
 
     await waitIDB()
 
@@ -181,8 +182,7 @@ export const usePostStore = defineStore('post', () => {
     const endIdx = startIdx + pageSize.value
     const sliced = result.slice(startIdx, endIdx)
 
-    const posts = await idb.value.getDBPostByTime(sliced)
-    return posts
+    return await idb.value.getDBPostByTime(sliced)
   }
 
   async function updateTotal() {
@@ -196,7 +196,7 @@ export const usePostStore = defineStore('post', () => {
     const p = _page || curPage.value
     const query = route.query.q as string
 
-    let posts: Post[] = []
+    let posts: Post[]
     if (route.path === '/post')
       posts = await _getByTime(start, end, _page)
 
@@ -226,7 +226,7 @@ export const usePostStore = defineStore('post', () => {
 
     clearDB: async () => {
       await waitIDB()
-      idb.value.clearDB()
+      await idb.value.clearDB()
     },
     getAll: async () => {
       await waitIDB()

packages/core/src/utils/protocol.ts

@@ -3,7 +3,7 @@ import type { ProtocolMap } from '@types'
 export const protocolMap: ProtocolMap = {
   img: {
     text: '查看图片',
-    reg: /\[img:\/\/(.+?)\]/gm,
+    reg: /\[img:\/\/(.+?)]/gm,
     /**
      * 解析包含查看图片协议的文本
      * 将返回包含 <ViewImgBtn /> 组件和原文本的 VNode

packages/core/src/utils/storage.ts

@@ -7,7 +7,7 @@ import type { Post, UID, UserBio, UserInfo } from '@types'
 
 const POST_STORE = 'posts'
 const USER_STORE = 'user'
-const FOLLOWERINGS_STORE = 'followings'
+const FLOWERINGS_STORE = 'followings'
 export const DB_VERSION = 4
 
 type AppDB = DBSchema & {
@@ -22,7 +22,7 @@ type AppDB = DBSchema & {
     key: string
     value: UserInfo
   }
-  [FOLLOWERINGS_STORE]: {
+  [FLOWERINGS_STORE]: {
     key: string
     value: UserBio
   }
@@ -67,8 +67,8 @@ export class IDB {
         if (!db.objectStoreNames.contains(USER_STORE))
           db.createObjectStore(USER_STORE, { keyPath: 'uid' })
 
-        if (!db.objectStoreNames.contains(FOLLOWERINGS_STORE))
-          db.createObjectStore(FOLLOWERINGS_STORE, { keyPath: 'uid' })
+        if (!db.objectStoreNames.contains(FLOWERINGS_STORE))
+          db.createObjectStore(FLOWERINGS_STORE, { keyPath: 'uid' })
       },
     })
   }
@@ -211,13 +211,13 @@ export class IDB {
     await Promise.all([
       db.clear(POST_STORE),
       db.clear(USER_STORE),
-      db.clear(FOLLOWERINGS_STORE),
+      db.clear(FLOWERINGS_STORE),
     ])
   }
 
   async clearFollowings() {
     const db = await this.idb
-    await db.clear(FOLLOWERINGS_STORE)
+    await db.clear(FLOWERINGS_STORE)
   }
 
   /**
@@ -345,7 +345,7 @@ export class IDB {
 
   async addFollowings(followings: UserBio[]) {
     const db = await this.idb
-    const ts = db.transaction(FOLLOWERINGS_STORE, 'readwrite')
+    const ts = db.transaction(FLOWERINGS_STORE, 'readwrite')
     const store = ts.store
 
     followings.forEach((following) => {
@@ -357,11 +357,11 @@ export class IDB {
 
   async getFollowings() {
     const db = await this.idb
-    return await db.getAll(FOLLOWERINGS_STORE)
+    return await db.getAll(FLOWERINGS_STORE)
   }
 }
 
-export type SaerchResult = FuseResult<{
+export type SeachResult = FuseResult<{
   time: number
   text: string
 }>[]

packages/ui/src/AppMain.vue

@@ -9,14 +9,14 @@ import {
 } from 'naive-ui'
 
 // 如果在油猴脚本中，或者不是暗黑模式，不使用暗黑主题
-const theme = computed(() => isInMonkey || !isDark.value ? undefined : darkTheme)
+const theme = computed(() => isInMonkey || !isDark.value ? null : darkTheme)
 </script>
 
 <template>
   <NConfigProvider
     :locale="zhCN"
     :date-locale="dateZhCN"
-    :theme="theme"
+    :theme
   >
     <NMessageProvider>
       <slot />

packages/ui/src/MainImage.vue

@@ -47,8 +47,7 @@ async function setImgSrc() {
     return
 
   const config = window.config.data
-  const src = `file://${config.publicPath}${props.src.slice(1)}`
-  realSrc.value = src
+  realSrc.value = `file://${config.publicPath}${props.src.slice(1)}`
 }
 
 watch(() => props.src, setImgSrc)

packages/ui/src/Preview.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import type { Post } from '@types'
+import type { Post, User } from '@types'
+import { KeyUser } from '@core/constants/vueProvide'
 import { deleteOld } from '@core/utils/storage'
 import { storeToRefs } from 'pinia'
+import { useRoute } from 'vue-router'
 
 const postStore = usePostStore()
-const { curUid, users } = storeToRefs(usePublicStore())
+const { curUid, users, curUser } = storeToRefs(usePublicStore())
 const { totalDB } = storeToRefs(postStore)
 
 const route = useRoute()
@@ -14,6 +16,8 @@ const posts = ref([] as Post[])
 const loaded = ref(false)
 const postsLoaded = ref(false)
 
+provide(KeyUser, curUser as unknown as User)
+
 onMounted(async () => {
   // 删除旧版数据
   await deleteOld()

packages/ui/src/post/Item.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import type { Post } from '@types'
-import { storeToRefs } from 'pinia'
 
 defineProps<{
   post: Post
 }>()
 
 const openComment = ref(false)
 const articleRef = ref<HTMLElement | null>(null)
-const { curUser } = storeToRefs(usePublicStore())
 
 watchEffect(() => {
   if (!articleRef.value)
     return
-  const comments = articleRef.value.querySelector<HTMLDivElement>('.n-collapse-item__content-wrapper')
+  const comments = articleRef.value?.querySelector<HTMLDivElement>('.n-collapse-item__content-wrapper')
 
   comments?.style.setProperty('display', openComment.value ? 'block' : 'none')
 })
@@ -26,7 +24,7 @@ watchEffect(() => {
     class="post"
   >
     <div class="flex justify-between">
-      <post-profile :user="curUser" />
+      <post-profile />
       <post-meta
         :is-body="true"
         :meta="post"

packages/ui/src/post/Meta.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Comment, Post, Retweet } from '@types'
-import { useRoute } from 'vue-router'
+import { useMessage } from 'naive-ui'
 
 const props = defineProps<{
   meta: Post | Comment | Retweet
@@ -9,12 +9,7 @@ const props = defineProps<{
 
 const date = useDateFormat(props.meta.created_at, 'YY-MM-DD HH:mm')
 
-const route = useRoute()
-const { origin } = document.location
-
-const url = computed(() =>
-  `${origin}${route.fullPath.replace(/#.+/, '')}#${(props.meta as any).mblogid}`,
-)
+const url = computed(() => `#${(props.meta as any).mblogid}`)
 const message = useMessage()
 
 const { copy } = useClipboard({

packages/ui/src/post/Profile.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
-import type { UserInfo } from '@types'
+import type { User } from '@types'
+
+import { KeyUser } from '@core/constants/vueProvide'
 
 const props = defineProps<{
-  user: UserInfo
+  user?: User
 }>()
 
 const publicStore = usePublicStore()
-const { user } = toRefs(props)
+
+const user = toRef(props.user || inject(KeyUser)!)
 
 const avatar = computed(() => {
-  const url = props.user.avatar
+  const url = user.value.avatar
   if (!url)
     return '/placeholder.webp'
 
-  if (publicStore.curUid === props.user.uid)
+  if (publicStore.curUid === user.value.uid)
     return replaceImg(url)
 
   // 对于其他人的头像，就使用 CDN

packages/ui/src/settings/base.vue

@@ -89,7 +89,7 @@ async function exportDatas() {
 
 async function clearData() {
   try {
-    postStore.clearDB()
+    await postStore.clearDB()
     publicStore.rmUser()
 
     message.success('清空成功')

packages/ui/src/shared.css

@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100dvh;
-  --uno: bg-light-700 dark:bg-dark-700
+  --uno: bg-light-700 dark:bg-dark-700;
 }
 
 .n-message-container.n-message-container--top {

types/post.ts

@@ -67,8 +67,9 @@ export type Retweet = Omit<Post, 'retweeted_status' | 'card' | 'user'> & {
   user?: User // 转发的微博可能被删除或是被夹
 }
 
-export type Comment = Pick<Post, 'user' | 'text' | 'like_count' | 'comments_count' > & {
+export type Comment = Pick<Post, 'text' | 'like_count' | 'comments_count' > & {
   img: string
+  user: User
 } & Meta
 
 export interface PostMeta {