卡片移动端显示优化

Author: CatCodeMe

src/pages/index.astro

@@ -53,10 +53,10 @@ const currentReading = bookshelfData.find((item: any) => item.status === 'readin
                       <Icon name='book' class='size-6 text-purple-600 dark:text-purple-400' />
                     </div>
                     <div class='flex-1 min-w-0'>
-                      <div class='flex items-center justify-between mb-1'>
+                      <div class='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-1'>
                         <div class='flex items-center gap-2'>
                           <span class='text-sm text-muted-foreground'>最近在读</span>
-                          <span class='text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400 font-medium'>
+                          <span class='text-xs px-1.5 py-0.5 sm:px-2 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400 font-medium whitespace-nowrap'>
                             进行中
                           </span>
                         </div>

src/pages/shelf/index.astro

@@ -193,24 +193,28 @@ const getTagColor = (index: number) => {
                 </div>
 
                 {/* 移动端显示状态和评分 */}
-                <div class="flex items-center gap-2 sm:hidden">
-                  <div class={`flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium bg-${statusInfo.color}-100 text-${statusInfo.color}-800 dark:bg-${statusInfo.color}-900 dark:text-${statusInfo.color}-200`}>
-                    <Icon name={statusInfo.icon} class={`size-3.5`} />
-                    <span>
-                      {statusInfo.label}
-                      {item.progress !== undefined && ` / ${item.progress}%`}
-                    </span>
-                  </div>
-                  {item.rating && (
-                    <div class="flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium">
-                      <Icon name="star" class="size-3.5 text-yellow-400" />
-                      <span>{item.rating.toFixed(1)}</span>
+                <div class="flex flex-col gap-2 sm:hidden">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <div class={`flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium bg-${statusInfo.color}-100 text-${statusInfo.color}-800 dark:bg-${statusInfo.color}-900 dark:text-${statusInfo.color}-200 whitespace-nowrap`}>
+                      <Icon name={statusInfo.icon} class={`size-3.5`} />
+                      <span>
+                        {statusInfo.label}
+                        {item.progress !== undefined && ` / ${item.progress}%`}
+                      </span>
                     </div>
-                  )}
+                    {item.rating && (
+                      <div class="flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium whitespace-nowrap">
+                        <Icon name="star" class="size-3.5 text-yellow-400" />
+                        <span>{item.rating.toFixed(1)}</span>
+                      </div>
+                    )}
+                  </div>
                   {item.identifier && (
-                    <div class="flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium">
-                      <Icon name="hashtag" class="size-3.5" />
-                      <span class="text-xs">{item.identifier}</span>
+                    <div class="flex items-center gap-1">
+                      <div class="flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium">
+                        <Icon name="hashtag" class="size-3.5" />
+                        <span class="text-xs">{item.identifier}</span>
+                      </div>
                     </div>
                   )}
                 </div>