From 0c4d0230ded72ff68670135028e67bf7e475a310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?=
 <dreamer_paul@126.com>
Date: Wed, 9 Aug 2023 01:18:29 +0800
Subject: [PATCH] fix: some ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

博客列表标题靠左，浮动图片间距，描述排版，Meta 信息间距
---
 src/components/widgets/post/PostItem.tsx       | 13 ++++++++-----
 src/components/widgets/post/PostMetaBar.tsx    |  2 +-
 src/components/widgets/post/PostPagination.tsx |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/widgets/post/PostItem.tsx b/src/components/widgets/post/PostItem.tsx
index 63e787721c..0796dda830 100644
--- a/src/components/widgets/post/PostItem.tsx
+++ b/src/components/widgets/post/PostItem.tsx
@@ -22,10 +22,13 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => {
   return (
     <Link
       href={postLink}
-      className="relative flex flex-col py-6 focus-visible:!shadow-none"
+      className="relative flex flex-col py-8 focus-visible:!shadow-none"
     >
       <PostItemHoverOverlay />
-      <h2 className="relative text-center text-2xl font-medium lg:text-left">
+      <h2
+        className="relative text-2xl font-medium"
+        style={{ wordBreak: 'break-word' }}
+      >
         <Balancer>{data.title}</Balancer>
 
         <PostPinIcon pin={!!data.pin} id={data.id} />
@@ -36,12 +39,12 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => {
             摘要： {data.summary}
           </p>
         )}
-        <div className="relative overflow-hidden">
+        <div className="relative overflow-hidden text-justify">
           {hasImage && (
             <div
               className={clsx(
-                'float-right h-24 w-24 overflow-hidden rounded-md',
-                'bg-contain bg-center bg-no-repeat',
+                'float-right mb-2 ml-3 h-[5.5rem] w-[5.5rem] overflow-hidden rounded-md',
+                'bg-cover bg-center bg-no-repeat',
               )}
               style={{ backgroundImage: `url(${hasImage})` }}
             />
diff --git a/src/components/widgets/post/PostMetaBar.tsx b/src/components/widgets/post/PostMetaBar.tsx
index 2617bd93dd..f7bdd5e213 100644
--- a/src/components/widgets/post/PostMetaBar.tsx
+++ b/src/components/widgets/post/PostMetaBar.tsx
@@ -18,7 +18,7 @@ export const PostMetaBar: Component<{
   return (
     <div
       className={clsxm(
-        'flex min-w-0 flex-shrink flex-grow flex-wrap space-x-2 text-sm',
+        'flex min-w-0 flex-shrink flex-grow flex-wrap gap-2 text-sm',
         className,
       )}
     >
diff --git a/src/components/widgets/post/PostPagination.tsx b/src/components/widgets/post/PostPagination.tsx
index 268b4b35cd..605ebe12e4 100644
--- a/src/components/widgets/post/PostPagination.tsx
+++ b/src/components/widgets/post/PostPagination.tsx
@@ -5,7 +5,7 @@ import type { FC } from 'react'
 import { MotionButtonBase } from '~/components/ui/button'
 
 const className =
-  'rounded-md border-[2px] border-accent/50 px-4 py-2 hover:border-accent transition-colors'
+  'rounded-md border-[2px] border-accent/50 px-4 py-2 hover:border-accent text-accent transition-colors'
 
 export const PostPagination: FC<{ pagination: Pager }> = ({ pagination }) => {
   return (