feat(web): show post detail on clicked

apps/web/nuxt.config.ts

@@ -45,6 +45,7 @@ export default defineNuxtConfig({
   alias: {
     '@core': core,
     '@shared': shared,
+    '@ui': ui,
   },
 
   imports: {

apps/web/src/App.vue

@@ -62,7 +62,9 @@ onNuxtReady(async () => {
 
 <template>
   <nuxt-layout>
-    <NuxtPage v-if="loaded" />
+    <AppMain v-if="loaded">
+      <NuxtPage />
+    </AppMain>
     <n-spin
       v-else
       class="center pt-16"

apps/web/src/pages/album.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import type { Album } from '@shared'
+import { PostItem } from '@ui'
+import { useModal } from 'naive-ui'
+
+import { KeyUser } from '@core/constants/vueProvide'
+
+import { useWindowSize } from '@vueuse/core'
 
 const album = shallowRef<Album[]>([])
 const postStore = usePostStore()
-const width = '12rem'
+
+const { width: windowWidth } = useWindowSize()
+
+const isMobile = computed(() => windowWidth.value < 768)
+const width = computed(() => isMobile.value ? '7rem' : '12rem')
 const loadSize = 16
 
 const loadedAlbum = ref<AlbumGroup[]>([]) // 用于存储已加载的相册
@@ -52,22 +62,49 @@ function handleLoad() {
   })
 }
 
+const modal = useModal()
+const message = useMessage()
+async function openDetail(id: string) {
+  const post = await postStore.getById(id)
+  if (!post)
+    return message.warning('微博不存在本地')
+
+  modal.create({
+    title: '微博详情',
+    preset: 'card',
+    style: {
+      width: '50rem',
+    },
+    content: () =>
+      h(
+        PostItem,
+        {
+          post,
+        },
+      ),
+  })
+}
+const publicStore = usePublicStore()
 onMounted(async () => {
   album.value = await postStore.getAllImgs()
   handleLoad()
+
+  const { curUser } = publicStore
+  console.log(curUser)
+  provide(KeyUser, curUser as unknown as User)
 })
 </script>
 
 <template>
   <main
     id="album"
-    class="mx-auto mt-20 rounded-2 p-4 md:w-70rem"
+    class="mx-auto rounded-2 p-4 md:w-70rem"
     bg="light dark:dark"
   >
     <n-infinite-scroll
       :distance="5"
       :style="{
-        height: 'calc(100vh - 8rem)',
+        height: 'calc(100vh - 6rem)',
       }"
       @load="handleLoad"
     >
@@ -78,13 +115,12 @@ onMounted(async () => {
           :key="item.date"
           class="mb-4 flex flex-col gap-2"
         >
-          <h2 class="w-full text-start text-2xl font-bold">
+          <h2 class="w-full text-start text-5 font-bold">
             {{ item.date }}
           </h2>
           <div
             class="flex flex-wrap items-center gap-1 px-6"
           >
-            <!-- {{ item.imgs }} -->
             <MainImage
               v-for="{ id, url } in item.imgs"
               :id="`img-${id}`"
@@ -95,7 +131,9 @@ onMounted(async () => {
                 height: width,
               }"
               :min-height="width"
+              :preview="false"
               fit="cover"
+              @click="() => openDetail(id)"
             />
           </div>
         </section>

packages/core/src/stores/post.ts

@@ -6,6 +6,7 @@ import { EmptyIDB, IDB } from '../utils/storage'
 export const usePostStore = defineStore('post', () => {
   const publicStore = usePublicStore()
   const followings = shallowRef<UserBio[]>([])
+  const allImages: Album[] = []
 
   const idb = ref(new EmptyIDB())
   watchImmediate(() => publicStore.curUid, async (uid) => {
@@ -206,6 +207,11 @@ export const usePostStore = defineStore('post', () => {
     return posts
   }
 
+  async function getById(id: string) {
+    await waitIDB()
+    return await idb.value.getDBPostById(id)
+  }
+
   async function getFollowings() {
     await waitIDB()
     return await idb.value
@@ -217,17 +223,12 @@ export const usePostStore = defineStore('post', () => {
    * 获取所有图片，以月份分组
    */
   async function getAllImgs() {
+    if (allImages.length)
+      return allImages
+
     await waitIDB()
     const imgs = await idb.value.getImgs()
 
-    /**
-     * [
-     *   {
-     *  date: '2021年01月',
-     *  imgs: ['url1', 'url2', ...]
-     * }
-     * ]
-     */
     const result: Album[] = []
 
     for (const { img, date, id } of imgs) {
@@ -238,6 +239,7 @@ export const usePostStore = defineStore('post', () => {
       const data = { url: img, id, date: key }
       result.push(data)
     }
+    allImages.push(...result)
 
     return result
   }
@@ -275,5 +277,6 @@ export const usePostStore = defineStore('post', () => {
     searchAndTime,
     getFollowings,
     getAllImgs,
+    getById,
   }
 })

packages/core/src/utils/storage.ts

@@ -155,6 +155,11 @@ export class IDB {
     return posts
   }
 
+  async getDBPostById(id: string) {
+    const posts = await this.getAllDBPosts()
+    return posts.find(post => post.mblogid === id)
+  }
+
   /**
    * 获取帖子总数
    */
@@ -381,7 +386,9 @@ export class IDB {
     const posts = await this.getAllDBPosts()
 
     posts
-      .reverse()
+      .sort((a, b) => {
+        return dayjs(b.created_at).valueOf() - dayjs(a.created_at).valueOf()
+      }) // 新帖子在前
       .forEach((post) => {
         post.imgs.forEach((img) => {
           result.push({
@@ -415,6 +422,7 @@ export class EmptyIDB extends IDB {
   async getDBPosts(_page = 1, _limit = 10) { return [] as Post[] }
   async getDBPostByTime(_times: number[]) { return [] as Post[] }
   async getAllDBPosts() { return [] as Post[] }
+  async getDBPostById(_id: string) { return {} as Post | undefined }
   async getPostCount() { return 0 }
   async clearDB() { }
   async getSize() { return '0' }

packages/ui/package.json

@@ -5,7 +5,7 @@
   "author": "",
   "license": "ISC",
   "keywords": [],
-  "main": "index.ts",
+  "main": "src/index.ts",
   "dependencies": {
     "@weibo-archiver/core": "workspace:^",
     "sass": "^1.77.8"

packages/ui/src/AppMain.vue

@@ -2,6 +2,7 @@
 import {
   NConfigProvider,
   NMessageProvider,
+  NModalProvider,
   darkTheme,
   dateZhCN,
   zhCN,
@@ -17,8 +18,10 @@ const theme = computed(() => isInMonkey || !isDark.value ? null : darkTheme)
     :date-locale="dateZhCN"
     :theme
   >
-    <NMessageProvider>
-      <slot />
-    </NMessageProvider>
+    <NModalProvider>
+      <NMessageProvider>
+        <slot />
+      </NMessageProvider>
+    </NModalProvider>
   </NConfigProvider>
 </template>

packages/ui/src/MainHeader.vue

@@ -45,11 +45,25 @@ const showSettings = ref(false)
     :style="headerStyle"
     class="fixed z-99 h-16 w-full flex items-center gap-4 bg-[#69696A30] px-4 backdrop-blur-8 transition-all sm:px-8"
   >
-    <router-link
-      class="i-tabler-brand-weibo icon h-6 w-6"
-      :to="`/post?page=1&pageSize=${route.query.pageSize || 10}`"
-      title="返回首页"
-    />
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <router-link
+          class="i-tabler-brand-weibo icon h-6 w-6"
+          to="/post"
+        />
+      </template>
+      返回首页
+    </n-tooltip>
+
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <router-link
+          class="i-tabler:photo icon h-6 w-6"
+          to="/album"
+        />
+      </template>
+      查看相册
+    </n-tooltip>
 
     <form
       class="relative mr-auto h-12 min-w-2/5"
@@ -66,13 +80,17 @@ const showSettings = ref(false)
       >
     </form>
 
-    <button
-      class="rounded-2 p-1.6"
-      hover:bg="light-200 dark:dark-200"
-      title="打开设置"
-      @click="() => showSettings = true"
-    >
-      <i class="i-tabler:settings icon h-6 w-6" />
-    </button>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <button
+          class="rounded-2 p-1.6"
+          hover:bg="light-200 dark:dark-200"
+          @click="() => showSettings = true"
+        >
+          <i class="i-tabler:settings icon h-6 w-6" />
+        </button>
+      </template>
+      打开设置
+    </n-tooltip>
   </header>
 </template>

packages/ui/src/MainImage.vue

@@ -2,6 +2,8 @@
 import { useStorage } from '@vueuse/core'
 import { ImgPlaceholder } from '@core/constants'
 
+import type { ImageProps } from 'naive-ui'
+
 const props = withDefaults(defineProps<{
   src: string
   alt?: string
@@ -10,10 +12,12 @@ const props = withDefaults(defineProps<{
   minHeight?: string | number
   fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
   lazy?: boolean
-}>(), {
+  preview?: boolean
+} >(), {
   fit: 'contain',
   alt: 'image',
   lazy: true,
+  preview: true,
 })
 
 const realSrc = ref(props.src)
@@ -64,6 +68,7 @@ onUnmounted(() => {
         minHeight,
       },
     }"
+    :preview-disabled="!preview"
   />
 </template>
 

packages/ui/src/index.ts

@@ -0,0 +1,5 @@
+import PostItem from './post/Item.vue'
+
+export {
+  PostItem,
+}

packages/ui/src/post/Profile.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 
 const publicStore = usePublicStore()
 
-const user = toRef(props.user || inject(KeyUser)!)
+const user = toRef(props.user || inject(KeyUser) || publicStore.curUser!)
 
 const avatar = computed(() => {
   const url = user.value.avatar