feat: 基础文章编辑功能

src/pages/posts/[...slug].astro

@@ -2,40 +2,81 @@
 import Layout from "@/layouts/Layout.astro";
 import {http} from "@/lib/request.ts";
 import {highlightHtmlWithJsdom} from "@/lib/highlight.js";
-import 'github-markdown-css/github-markdown-light.css';
+import "github-markdown-css/github-markdown-light.css"
+import "@/styles/github-markdown.css"
+import {formatDatetime} from "@/lib/format.ts";
 
-const { slug } = Astro.params;
+const {slug} = Astro.params;
 
 interface Post {
-  title: string;
-  summary: string;
-  slug: string;
-  cover: string;
-  published_at: string;
-  content_html: 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_html)
+const content = await highlightHtmlWithJsdom(data.content)
 ---
 
 <Layout>
-  <h1>{data.title}</h1>
+    <h1 class="post-title">{data.title}</h1>
 
-  <div>{data.published_at}</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>
+			{formatDatetime(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{
-    background: #fff;
-    border-radius: 12px;
-    overflow: auto;
-    padding: 16px;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
-  }
+    .post-title{
+        margin-block-start: 0;
+        margin-block-end: 24px;
+    }
+
+    @media (max-width: 768px) {
+        .post-title {
+            font-size: 24px;
+        }
+    }
+
+    .published-at{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #6b7280;
+        font-size: 16px;
+        margin-bottom: 24px;
+    }
+
+    .published-at svg{
+        width: 18px;
+        height: 18px;
+    }
+
+    .post {
+        background: #fff;
+        border-radius: 12px;
+        overflow: auto;
+        padding: 24px;
+        box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
+    }
 </style>