fix(ui): fixs in mobile

fix(core): router pushing in paginaton
Chilfish · Mar 1, 2024 · 7a3ce1c · 7a3ce1c
1 parent 4d5dead
commit 7a3ce1c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 20 deletions.
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
@@ -6,7 +6,7 @@
   <app-main>
     <n-modal-provider>
       <main-header />
-      <router-view class="mt-20" />
+      <router-view class="mt-12" />
 
       <img-viewer />
     </n-modal-provider>

diff --git a/packages/core/src/composables/pagination.ts b/packages/core/src/composables/pagination.ts
@@ -4,23 +4,26 @@ export function usePagination() {
   const postStore = usePostStore()
   const router = useRouter()
   const route = useRoute()
-  const path = ref(route.path.replace(/\/\d+$/, '') || '/p')
+  const path = ref(route.path.replace(/\/\d+$/, '') || '/p/1')
   const query = ref(route.query)
 
   const pageSize = ref(postStore.postsPerPage)
   const curPage = ref(postStore.curPage)
 
-  watch([pageSize, curPage], ([newPageSize, newCurPage]) => {
+  function pushPage(page: number) {
     router.push({
-      path: `${path.value}/${newCurPage}`,
+      path: `${path.value}/${page}`,
       query: {
         ...query.value,
-        pageSize: newPageSize,
+        pageSize: pageSize.value,
       },
     })
+    postStore.curPage = page
+  }
 
+  watch([pageSize, curPage], ([newPageSize, newCurPage]) => {
+    pushPage(newCurPage)
     postStore.postsPerPage = newPageSize
-    postStore.curPage = newCurPage
   })
 
   watchEffect(() => {
@@ -35,7 +38,7 @@ export function usePagination() {
     const routePage = Number.parseInt(params.page as string) || postStore.curPage
     const page = routePage > postStore.pages ? postStore.pages : routePage
 
-    postStore.curPage = page
+    pushPage(page)
     curPage.value = page
   })
 

diff --git a/packages/ui/src/MainHeader.vue b/packages/ui/src/MainHeader.vue
@@ -62,23 +62,24 @@ onUnmounted(() => {
     />
 
     <form
-      class="relative mr-auto h-12 w-3/5 sm:w-2/5"
+      class="relative mr-auto h-12 min-w-2/5"
       @submit.prevent="search"
     >
-      <span
+      <i
         class="i-tabler-search absolute left-3 top-50% icon translate-y-[-50%]"
         @click="search"
       />
       <input
         v-model="searchInput"
         class="w-full rounded-2 bg-gray-100 p-3 pl-9 text-4 dark:bg-dark-700"
-        placeholder="搜索我的微博"
+        placeholder="搜索微博"
       >
     </form>
 
     <button
       class="rounded-2 p-1.6"
       hover:bg="light-200 dark:dark-200"
+      title="打开设置"
       @click="openSettings"
     >
       <i class="i-tabler:settings icon h-6 w-6" />

diff --git a/packages/ui/src/Profile.vue b/packages/ui/src/Profile.vue
@@ -24,19 +24,20 @@ const avatar = computed(() => {
 
 <template>
   <a
-    class="mr-auto flex items-center gap-2"
+    class="mr-auto flex items-center gap-3"
     :href="`https://weibo.com/u/${user.id}`"
     target="_blank"
   >
     <n-avatar
-
       lazy round
       fallback-src="/placeholder.webp"
       :size="30"
       :src="avatar"
     />
 
-    <span class="text-3! font-bold! hover:text-teal-700!">
+    <span
+      class="text-3.5! font-bold! hover:text-teal-700!"
+    >
       {{ user.screen_name }}
     </span>
   </a>

diff --git a/packages/ui/src/post/Comments.vue b/packages/ui/src/post/Comments.vue
@@ -7,17 +7,24 @@ defineProps<{
 </script>
 
 <template>
-  <div class="comments flex flex-col pl-5">
+  <div class="comments flex flex-col pl-2">
     <article
       v-for="comment in comments"
       :key="comment.id"
       class="flex flex-col gap-2 rounded-2 bg-white p-3 pl-10 dark:bg-dark"
     >
       <div class="flex">
-        <profile :user="comment.user" class="ml-[-2.5rem] mr-4!" />
+        <profile
+          :user="comment.user"
+          class="ml-[-2.5rem] mr-4!"
+        />
+
         <div class="flex items-center gap-3 text-3 text-gray">
-          <post-meta :meta="comment" class="justify-start!" />
-          <span>
+          <post-meta
+            :meta="comment"
+            class="justify-start!"
+          />
+          <span class="hidden sm:inline-block">
             评论 {{ comment.comments_count }} |
             点赞 {{ comment.like_count }}
           </span>

diff --git a/packages/ui/src/post/Meta.vue b/packages/ui/src/post/Meta.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
   isBody?: boolean
 }>()
 
-const date = useDateFormat(props.meta.created_at, 'YY-MM-DD HH:mm dddd')
+const date = useDateFormat(props.meta.created_at, 'YY-MM-DD HH:mm')
 
 const route = useRoute()
 const { origin } = document.location
@@ -48,10 +48,10 @@ const { copy } = useClipboard({
 
     <span>{{ date }}</span>
 
-    <span> {{ meta.region_name }} </span>
+    <span> {{ meta.region_name?.replace(' ', '') }} </span>
 
     <span v-if="meta.source" class="hidden sm:inline">
-      来自 <span v-html="meta.source" />
+      来自<span v-html="meta.source" />
     </span>
   </div>
 </template>