修改页面风格

src/components/ArticleSidebar.astro

@@ -0,0 +1,64 @@
+---
+import type { BlogPost } from '@/lib/posts';
+
+type TocItem = {
+  depth: number;
+  text: string;
+  id: string;
+};
+
+interface Props {
+  post: BlogPost;
+  toc: TocItem[];
+  relatedPosts: BlogPost[];
+}
+
+const { post, toc, relatedPosts } = Astro.props;
+const avatar = 'https://free.picui.cn/free/2025/08/10/689845496a283.png';
+---
+
+<aside class="article-sidebar" aria-label="文章侧边栏">
+  <section class="sidebar-card article-author-card">
+    <img class="profile-avatar" src={avatar} alt="biss" loading="lazy" />
+    <div class="profile-name">biss</div>
+    <div class="article-author-meta">
+      <span>{post.dateText}</span>
+      {post.categories[0] && <a href={`/categories/${encodeURIComponent(post.categories[0])}/`}>{post.categories[0]}</a>}
+    </div>
+  </section>
+
+  {toc.length > 0 && (
+    <section class="sidebar-card toc-card">
+      <h2>
+        <span aria-hidden="true">☰</span>
+        文章目录
+        <em>{toc.length}</em>
+      </h2>
+      <nav class="toc-list" aria-label="文章目录">
+        {toc.map((item) => (
+          <a class={`toc-depth-${item.depth}`} href={`#${item.id}`}>{item.text}</a>
+        ))}
+      </nav>
+    </section>
+  )}
+
+  <section class="sidebar-card same-category-card">
+    <h2>
+      <span aria-hidden="true">▣</span>
+      同类文章
+      <em>{relatedPosts.length}</em>
+    </h2>
+    {relatedPosts.length > 0 ? (
+      <div class="same-category-list">
+        {relatedPosts.map((item) => (
+          <a href={item.href}>
+            <strong>{item.title}</strong>
+            <time datetime={item.date.toISOString()}>{item.dateText}</time>
+          </a>
+        ))}
+      </div>
+    ) : (
+      <p class="sidebar-empty">这个分类下暂时没有其他文章。</p>
+    )}
+  </section>
+</aside>