feat: 新版ui

src/pages/index.astro

@@ -14,24 +14,27 @@ interface Post {
 }
 
 const {list} = await http.get<ApiPageResponse<Post>>("post");
+
+list.map((post) => {
+  post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日')
+})
 ---
 
 <Layout>
   <div class="posts">
     {
       list.map((post) => (
-        <a
-          class="post"
-          href={`/posts/${post.slug}`}
-        >
-          <div class="cover">
-            <img src={post.cover} alt={post.title}/>
-          </div>
-          <div class="post-content">
-            <h2>{post.title}</h2>
-            <p class="summary">summary:{post.summary}</p>
-            <p class="summary">category_name:{post.category_name}</p>
-            <div>{formatDatetime(post.published_at, 'YYYY 年 MM 月 DD 日')}</div>
+        <a class="post" href={`/posts/${post.slug}`}>
+          <div class="published-at">{post.published_at}</div>
+          <div class="category-name">{post.category_name}</div>
+          <div class="post-title">{post.title}</div>
+          <div class="link">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                 class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
+              <path d="M7 7h10v10"/>
+              <path d="M7 17 17 7"/>
+            </svg>
           </div>
         </a>
       ))
@@ -50,31 +53,59 @@ const {list} = await http.get<ApiPageResponse<Post>>("post");
     background: #fff;
     padding: 16px;
     border-radius: 12px;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     display: flex;
-    gap: 20px;
+    align-items: center;
+    transition: transform 0.2s linear;
   }
 
-  .post-content {
+  .post:hover {
+    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
+  }
+
+  .published-at {
+    white-space: nowrap;
+    font-size: 14px;
+    color: #4b5563;
+    min-width: 130px;
+    margin-right: 20px;
+  }
+
+  .category-name {
+    border-radius: 999px;
+    background: #fceeda;
+    padding: 4px 12px;
+    font-size: 14px;
+    margin-right: 24px;
+  }
+
+  .post-title {
     flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  .summary {
-    font-size: 16px;
-    color: rgb(66, 63, 63);
+  .link {
   }
 
-  .cover {
-    width: 250px;
-    height: 150px;
-    border-radius: 8px;
-    overflow: hidden;
+  .link svg {
+    width: 16px;
+    height: 16px;
+    color: #6b7280;
   }
 
-  .cover img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  @media (max-width: 640px) {
+    .posts {
+      gap: 12px;
+    }
+
+    .published-at {
+      margin-right: 8px;
+    }
+
+    .category-name {
+      display: none;
+    }
   }
 </style>