From 66717405db1907908fdaf8d60d698983971acbbb Mon Sep 17 00:00:00 2001
From: xy <10816187@qq.com>
Date: Fri, 10 Jul 2026 20:07:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=BE=E7=A4=BA=E5=8D=9A=E5=AE=A2?=
 =?UTF-8?q?=E8=AE=BF=E9=97=AE=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/posts/[...slug].astro | 76 ++++++++++++++++++++++-----------
 src/types/post.ts               |  2 +
 2 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 4794705..8e2260c 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -6,18 +6,10 @@ import Layout from "@/layouts/Layout.astro";
 import {http} from "@/lib/request.ts";
 import {highlightHtmlWithJsdom} from "@/lib/highlight.js";
 import {formatDatetime} from "@/lib/format.ts";
+import type {Post} from "@/types";
 
 const {slug} = Astro.params;
 
-interface Post {
-  title: string;
-  summary: string;
-  slug: string;
-  cover: string;
-  published_at: string;
-  content: string;
-}
-
 let data: Post;
 
 try {
@@ -33,22 +25,34 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
 <Layout title={data.title} description={data.summary}>
   <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>
-    {published_at}
+  <div class="post-meta">
+    <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>
+      {published_at}
+    </div>
+
+    <div class="post-view">
+      <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+           p-id="5122">
+        <path
+          d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
+          p-id="5123"></path>
+      </svg>
+      {data.view}
+    </div>
   </div>
 
   <div class="post markdown-body" set:html={content}></div>
@@ -60,6 +64,12 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
     font-size: 24px;
   }
 
+  .post-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   .published-at {
     display: flex;
     align-items: center;
@@ -82,6 +92,22 @@ const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
     box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
   }
 
+  .post-view {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #6b7280;
+    padding-right: 12px;
+    font-size: 14px;
+  }
+
+  .post-view svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;   /* 让填充跟随 color */
+    stroke: currentColor; /* 让描边也跟随 color */
+  }
+
   @media (max-width: 768px) {
     .post-title {
       font-size: 20px;
diff --git a/src/types/post.ts b/src/types/post.ts
index 86ac85d..51b2548 100644
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -5,4 +5,6 @@ export type  Post = {
   cover: string;
   category_name: string;
   published_at: string;
+  view: number;
+  content: string;
 }