更新博客展示UI

Author: yyyCode

frontend/src/assets/blog.css

@@ -838,6 +838,9 @@ body {
   .all-layout-3 {
     grid-template-columns: 1fr;
   }
+  .blog-container.all-articles-page .right-rail {
+    display: none;
+  }
 }
 
 .all-sidebar {
@@ -912,6 +915,18 @@ body {
 
 .all-main {
   min-width: 0;
+  /* 让正文卡片在右侧区域内居中展示（避免三列占位导致正文变窄） */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.blog-container.all-articles-page .all-main .all-main-inner {
+  width: min(720px, 100%);
+}
+
+.blog-container.all-articles-page .all-main .card {
+  width: min(720px, 100%);
 }
 
 /* 不要用 overflow:hidden 裁切头像：历史上负 margin 与横幅重叠，现无横幅时会把头像顶部切掉 */

frontend/src/views/AllArticlesView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="blog-container all-articles-page">
-    <div class="all-layout-3">
+    <div class="all-layout">
       <!-- 左侧：头像 + 搜索 + 文章列表 -->
       <aside class="all-sidebar">
 
@@ -44,7 +44,7 @@
           <div class="card-body" style="padding: 22px; color: var(--muted)">请选择一篇文章</div>
         </div>
 
-        <div v-else>
+        <div v-else class="all-main-inner">
           <div class="card">
             <div class="article-content">
               <div v-if="selectedArticle.coverMediaKey" style="margin-bottom: 14px">
@@ -68,9 +68,6 @@
           <CommentSection v-if="selectedArticle?.id" :article-id="selectedArticle.id" />
         </div>
       </main>
-
-      <!-- 右侧占位：让中间正文列在大屏时实现居中 -->
-      <div class="right-rail" aria-hidden="true" />
     </div>
   </div>
 </template>