fix(web): routing & pagination

packages/core/package.json

@@ -7,7 +7,6 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.9.0",
-    "@vueuse/router": "^10.9.0",
     "conf": "^12.0.0",
     "dayjs": "^1.11.10",
     "fuse.js": "^7.0.0",

packages/core/src/composables/index.ts

@@ -1,5 +1,3 @@
-export * from './pagination'
-
 export const isDark = useDark({
   valueLight: 'light',
   valueDark: 'dark',

packages/core/src/stores/post.ts

@@ -19,9 +19,27 @@ export const usePostStore = defineStore('post', () => {
   })
 
   const route = useRoute()
+  const router = useRouter()
+
+  const curPage = computed({
+    get: () => Number(route.query.page) || 1,
+    set: (val: number) => router.push({
+      query: {
+        ...route.query,
+        page: val,
+      },
+    }),
+  })
 
-  const curPage = ref(1)
-  const pageSize = ref(10)
+  const pageSize = computed({
+    get: () => Number(route.query.pageSize) || 10,
+    set: (val: number) => router.push({
+      query: {
+        ...route.query,
+        pageSize: val,
+      },
+    }),
+  })
 
   const seachFn = ref<(text: string) => SaerchResult>()
 
@@ -70,10 +88,8 @@ export const usePostStore = defineStore('post', () => {
     seachFn.value = search
   }
 
-  async function searchPost(
+  async function _searchPost(
     query: string,
-    page: number,
-    pageSize: number,
   ) {
     await waitIDB()
 
@@ -88,11 +104,21 @@ export const usePostStore = defineStore('post', () => {
       .sort((a, b) => b.time - a.time)
 
     const count = result.length
-    const start = (page - 1) * pageSize
-    const end = start + pageSize
-    const posts = result.slice(start, end)
+    total.value = count
+    return result
+  }
+
+  async function searchPost(
+    query: string,
+    page: number,
+  ) {
+    const p = page || curPage.value
+
+    const result = await _searchPost(query)
 
-    return { posts, count }
+    const start = (p - 1) * pageSize.value
+    const end = start + pageSize.value
+    return result.slice(start, end)
   }
 
   async function get(page?: number) {
@@ -110,16 +136,15 @@ export const usePostStore = defineStore('post', () => {
       total.value = totalDB.value
     }
     else {
-      const { posts, count } = await searchPost(query, p, pageSize.value)
+      const _result = await searchPost(query, p)
 
-      result = await idb.value.getDBPost(posts.map(p => p.time))
-      total.value = count
+      result = await idb.value.getDBPost(_result.map(p => p.time))
     }
 
     return result
   }
 
-  async function getByTime(
+  async function _getByTime(
     start: number,
     end: number,
     page?: number,
@@ -133,13 +158,50 @@ export const usePostStore = defineStore('post', () => {
     return posts
   }
 
+  async function searchAndTime(
+    query: string,
+    start: number,
+    end: number,
+    page?: number,
+  ) {
+    await waitIDB()
+
+    const p = page || curPage.value
+
+    const result = await _searchPost(query)
+      .then(posts => posts.filter(p => p.time >= start && p.time <= end))
+
+    total.value = result.length
+
+    const startIdx = (p - 1) * pageSize.value
+    const endIdx = startIdx + pageSize.value
+    const sliced = result.slice(startIdx, endIdx)
+
+    const posts = await idb.value.getDBPost(sliced.map(p => p.time))
+    return posts
+  }
+
   async function updateTotal() {
     await waitIDB()
 
     total.value = await idb.value.getPostCount()
     totalDB.value = total.value
   }
 
+  async function getByTime(_page: number, start: number, end: number) {
+    const p = _page || curPage.value
+    const query = route.query.q as string
+
+    let posts: Post[] = []
+    if (route.path === '/post')
+      posts = await _getByTime(start, end, _page)
+
+    else
+      posts = await searchAndTime(query, start, end, p)
+
+    return posts
+  }
+
   return {
     total,
     totalDB,
@@ -165,5 +227,7 @@ export const usePostStore = defineStore('post', () => {
     },
     updateTotal,
     getByTime,
+    searchPost,
+    searchAndTime,
   }
 })

packages/core/src/utils/storage.ts

@@ -223,7 +223,7 @@ export class IDB {
     const count = await index.count(range)
 
     if (!cursor)
-      return posts
+      return { posts, count }
 
     try {
       const target = (page - 1) * limit

packages/ui/src/DatePick.vue

@@ -2,17 +2,17 @@
 import dayjs from 'dayjs'
 import type { Post } from '@types'
 
-import { useRouteQuery } from '@vueuse/router'
+import { storeToRefs } from 'pinia'
 
 const emits = defineEmits<{
   picked: [posts: Post[]]
 }>()
-const page = useRouteQuery('page', 1, { transform: Number })
-const pageSize = useRouteQuery('pageSize', 10, { transform: Number })
+
 const postStore = usePostStore()
 const router = useRouter()
 const route = useRoute()
 
+const { pageSize, curPage } = storeToRefs(postStore)
 const now = dayjs().valueOf()
 const start = ref(now)
 const end = ref(now)
@@ -22,39 +22,55 @@ const dateRange = computed<[number, number]>({
     return [start.value, end.value]
   },
   set(val) {
+    if (!val) {
+      start.value = end.value = now
+      return
+    }
+
     start.value = dayjs(val[0]).hour(0).valueOf()
     end.value = dayjs(val[1]).hour(23).minute(59).second(59).valueOf()
   },
 })
 
 onMounted(() => {
   const query = route.query
-  start.value = Number(query.start) || now
-  end.value = Number(query.end) || now
+  if (query.start && query.end) {
+    start.value = Number(query.start) || now
+    end.value = Number(query.end) || now
+  }
 })
 
-async function getPosts(page = 1) {
-  const data = await postStore.getByTime(start.value, end.value, page)
-  emits('picked', data)
-}
-
 watchImmediate([start, end], async () => {
-  if (start.value === now)
+  if (start.value === now && end.value === now) {
+    router.push({
+      query: {
+        ...route.query,
+        start: undefined,
+        end: undefined,
+        page: 1,
+      },
+    })
     return
+  }
 
-  await getPosts()
+  const posts = await postStore.getByTime(1, start.value, end.value)
   router.push({
     query: {
       ...route.query,
+      page: 1,
       start: start.value,
       end: end.value,
     },
   })
+  emits('picked', posts)
 })
 
-watch([page, pageSize], async () => {
-  if (route.query.start)
-    await getPosts(page.value)
+watch([curPage, pageSize], async () => {
+  if (start.value === now || end.value === now)
+    return
+
+  const posts = await postStore.getByTime(curPage.value, start.value, end.value)
+  emits('picked', posts)
 })
 </script>
 
@@ -69,7 +85,6 @@ watch([page, pageSize], async () => {
       size="small"
       clearable
       bind-calendar-months
-      @confirm="getPosts"
     />
   </div>
 </template>

packages/ui/src/Preview.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import type { Post } from '@types'
 import { deleteOld } from '@core/utils/storage'
-import { useRouteQuery } from '@vueuse/router'
-
-import DatePick from './DatePick.vue'
 
 const postStore = usePostStore()
 const publicStore = usePublicStore()
 
-const page = useRouteQuery('page', 1, { transform: Number })
-const pageSize = useRouteQuery('pageSize', 10, { transform: Number })
-const start = useRouteQuery('start')
+const route = useRoute()
 
 const posts = ref([] as Post[])
 
@@ -33,17 +28,16 @@ onMounted(async () => {
 })
 
 watchImmediate(
-  [loaded, page, pageSize, start, postStore.totalDB, publicStore.curUid],
+  [() => route.query, loaded, postStore.totalDB, publicStore.curUid],
+
   async () => {
     postsLoaded.value = false
-    postStore.pageSize = pageSize.value
-    postStore.curPage = page.value
 
     if (!loaded.value)
       return
 
-    if (!start.value)
-      posts.value = await postStore.get(page.value)
+    if (!route.query.start)
+      posts.value = await postStore.get()
     postsLoaded.value = true
   },
 )
@@ -87,7 +81,7 @@ watchImmediate(
 
   <div
     v-else
-    class="min-h-90dvh center-col justify-between p-4 pb-8"
+    class="min-h-90dvh center-col justify-start p-4 pb-8"
   >
     <DatePick
       @picked="(data: Post[]) => posts = data"

packages/ui/src/post/List.vue

@@ -26,5 +26,5 @@ defineProps<{
     />
   </div>
 
-  <post-pagination v-if="posts.length" />
+  <post-pagination v-show="posts.length" />
 </template>