feat: 去除访问统计信息

src/components/IndexSidebar.astro

@@ -1,23 +1,25 @@
 ---
 import Folder from "@/assets/icon/folder.png?url";
-import type {CategoriesStats} from "@/types";
+import type { CategoriesStats } from "@/types";
+import { createHttp } from "@/lib/request";
+const http = createHttp(Astro.request.headers);
 
-interface Props {
-  categories: CategoriesStats[]
-}
-const {categories} = Astro.props
+const { data: categories } =
+  await http.get<ApiResponse<CategoriesStats[]>>("category/stats");
 ---
+
 <aside class="sidebar">
   <div class="widget">
     <h3 class="widget-title">
-      <img src={Folder} alt="Folder">
+      <img src={Folder} alt="Folder" />
       文章分类
     </h3>
     <ul class="category-list">
       {
         categories.map((category) => (
           <li>
-            <a>{category.name}</a><span class="count">{category.post_count}</span>
+            <a>{category.name}</a>
+            <span class="count">{category.post_count}</span>
           </li>
         ))
       }
@@ -29,6 +31,9 @@ const {categories} = Astro.props
   .sidebar {
     width: 300px;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
   }
 
   .widget {
@@ -80,9 +85,14 @@ const {categories} = Astro.props
   }
 
   @media (max-width: 860px) {
-    .sidebar{
+    .sidebar {
       width: 100%;
-      display: none;
+    }
+  }
+
+  @media (max-width: 860px) {
+    .sidebar {
+      gap: 16px;
     }
   }
 </style>

src/components/IndexView.astro

@@ -1,25 +1,24 @@
 ---
-import type {Post, CategoriesStats} from "@/types/post";
+import type { Post } from "@/types/post";
 import IndexSidebar from "@/components/IndexSidebar.astro";
-import PostList from '@/components/PostList.astro'
+import PostList from "@/components/PostList.astro";
 
 interface Props {
-  posts: Post[]
-  page: number
-  totalPage: number
-  categories: CategoriesStats[]
+  posts: Post[];
+  page: number;
+  totalPage: number;
 }
 
-const {posts, page, totalPage, categories} = Astro.props
+const { posts, page, totalPage } = Astro.props;
 ---
+
 <div class="page-content">
   <div class="container">
-    <PostList posts={posts} page={page} totalPage={totalPage}/>
-    <IndexSidebar categories={categories}/>
+    <PostList posts={posts} page={page} totalPage={totalPage} />
+    <IndexSidebar />
   </div>
 </div>
 
-
 <style>
   .container {
     width: 100%;
@@ -27,4 +26,9 @@ const {posts, page, totalPage, categories} = Astro.props
     gap: 28px;
   }
 
+  @media (max-width: 860px) {
+    .container {
+      flex-direction: column;
+    }
+  }
 </style>