From bbacb11bcee7bf1faf176925f11c0bf554663da2 Mon Sep 17 00:00:00 2001
From: xy <10816187@qq.com>
Date: Wed, 8 Jul 2026 18:11:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E7=89=88ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 astro.config.mjs                |   5 +-
 src/components/BaseFooter.astro |   2 +-
 src/components/BaseHeader.astro |  25 +++++---
 src/pages/index.astro           |  85 ++++++++++++++++++--------
 src/pages/posts/[...slug].astro | 105 +++++++++++++++++---------------
 src/styles/github-markdown.css  |   5 ++
 src/styles/global.css           |   8 ++-
 7 files changed, 149 insertions(+), 86 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 298dddf..6dc2691 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import {defineConfig} from 'astro/config';
 import solidJs from '@astrojs/solid-js';
 import node from '@astrojs/node';
 
@@ -7,6 +7,9 @@ import node from '@astrojs/node';
 export default defineConfig({
   site: 'https://ua42.com',
   output: 'server',
+  server: {
+    host: "0.0.0.0",
+  },
   integrations: [solidJs()],
   adapter: node({
     mode: 'standalone'
diff --git a/src/components/BaseFooter.astro b/src/components/BaseFooter.astro
index 3f706d3..6e2f81d 100644
--- a/src/components/BaseFooter.astro
+++ b/src/components/BaseFooter.astro
@@ -4,7 +4,7 @@
     height: 70px;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 2px;
   }
 
   .content {
diff --git a/src/components/BaseHeader.astro b/src/components/BaseHeader.astro
index 0668fc1..4fb3640 100644
--- a/src/components/BaseHeader.astro
+++ b/src/components/BaseHeader.astro
@@ -8,7 +8,7 @@ import { metadata } from "../consts";
     position: sticky;
     top: 0;
     z-index: 99999;
-    box-shadow: rgba(17, 17, 26, 0.1) 0 1px 0;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     flex-shrink: 0;
     background: #fff;
   }
@@ -23,6 +23,12 @@ import { metadata } from "../consts";
     justify-content: space-between;
   }
 
+  @media (max-width: 768px) {
+    .main-nav{
+      padding: 16px;
+    }
+  }
+
   .main-nav h1 {
     user-select: none;
     cursor: pointer;
@@ -37,11 +43,16 @@ import { metadata } from "../consts";
     align-items: center;
   }
 
+  .menu-item{
+    text-align: center;
+  }
+
   .main-nav .menu-item a {
     text-decoration: none;
   }
 
   .main-nav .menu-item a:hover {
+    color: #64748b;
   }
 </style>
 
@@ -50,11 +61,11 @@ import { metadata } from "../consts";
     <h1>
       <a href="/">{metadata.siteTitle}</a>
     </h1>
-    <!--<ul class="menu">-->
-    <!--  <li class="menu-item"><a href="/">首页</a></li>-->
-    <!--  <li class="menu-item"><a href="/">文章</a></li>-->
-    <!--  <li class="menu-item"><a href="/">分类</a></li>-->
-    <!--  <li class="menu-item"><a href="/">关于</a></li>-->
-    <!--</ul>-->
+    <ul class="menu">
+      <li class="menu-item"><a href="/">首页</a></li>
+      <!--<li class="menu-item"><a href="/">文章</a></li>-->
+      <li class="menu-item"><a href="/">分类</a></li>
+      <!--<li class="menu-item"><a href="/">关于</a></li>-->
+    </ul>
   </nav>
 </header>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5165058..228b608 100644
--- a/src/pages/index.astro
+++ b/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>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 75f130f..2074c44 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -10,73 +10,80 @@ import {formatDatetime} from "@/lib/format.ts";
 const {slug} = Astro.params;
 
 interface Post {
-	title: string;
-	summary: string;
-	slug: string;
-	cover: string;
-	published_at: string;
-	content: string;
+  title: string;
+  summary: string;
+  slug: string;
+  cover: string;
+  published_at: string;
+  content: string;
 }
 
 const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`);
 
 const content = await highlightHtmlWithJsdom(data.content)
+
+data.published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
 ---
 
 <Layout>
-    <h1 class="post-title">{data.title}</h1>
+  <h1 class="post-title">{data.title}</h1>
 
-    <div class="published-at">
-        <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-calendar-days-icon lucide-calendar-days">
-            <path d="M8 2v4"/>
-            <path d="M16 2v4"/>
-            <rect width="18" height="18" x="3" y="4" rx="2"/>
-            <path d="M3 10h18"/>
-            <path d="M8 14h.01"/>
-            <path d="M12 14h.01"/>
-            <path d="M16 14h.01"/>
-            <path d="M8 18h.01"/>
-            <path d="M12 18h.01"/>
-            <path d="M16 18h.01"/>
-        </svg>
-			{formatDatetime(data.published_at,'YYYY 年 MM 月 DD 日')}
-    </div>
+  <div class="published-at">
+    <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-calendar-days-icon lucide-calendar-days">
+      <path d="M8 2v4"/>
+      <path d="M16 2v4"/>
+      <rect width="18" height="18" x="3" y="4" rx="2"/>
+      <path d="M3 10h18"/>
+      <path d="M8 14h.01"/>
+      <path d="M12 14h.01"/>
+      <path d="M16 14h.01"/>
+      <path d="M8 18h.01"/>
+      <path d="M12 18h.01"/>
+      <path d="M16 18h.01"/>
+    </svg>
+    {data.published_at}
+  </div>
 
-    <div class="post markdown-body" set:html={content}></div>
+  <div class="post markdown-body" set:html={content}></div>
 </Layout>
 
 <style>
-    .post-title{
-        margin-bottom: 16px;
-    }
+  .post-title {
+    margin-bottom: 16px;
+    font-size: 24px;
+  }
 
-    @media (max-width: 768px) {
-        .post-title {
-            font-size: 24px;
-        }
-    }
+  .published-at {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #6b7280;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
 
-    .published-at{
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: #6b7280;
-        font-size: 16px;
-        margin-bottom: 24px;
-    }
+  .published-at svg {
+    width: 18px;
+    height: 18px;
+  }
 
-    .published-at svg{
-        width: 18px;
-        height: 18px;
+  .post {
+    background: #fff;
+    border-radius: 16px;
+    overflow: auto;
+    padding: 24px;
+    box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
+  }
+
+  @media (max-width: 768px) {
+    .post-title {
+      font-size: 20px;
     }
 
     .post {
-        background: #fff;
-        border-radius: 16px;
-        overflow: auto;
-        padding: 24px;
-        box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
+      padding: 12px;
     }
+  }
 </style>
diff --git a/src/styles/github-markdown.css b/src/styles/github-markdown.css
index 1532fb2..3d4295f 100644
--- a/src/styles/github-markdown.css
+++ b/src/styles/github-markdown.css
@@ -16,3 +16,8 @@ h1{
     border-bottom: none ;
 }
 
+@media (max-width: 768px) {
+  .markdown-body pre code{
+    font-size: inherit;
+  }
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 7a3ea52..72a0040 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -24,4 +24,10 @@ main {
   width: 100%;
   margin: 0 auto;
   padding: 32px;
-}
\ No newline at end of file
+}
+
+@media (max-width: 768px) {
+  main{
+    padding: 16px;
+  }
+}