fix: 修改登录遮罩

frontend_nuxt/pages/posts/[id]/index.vue

@@ -1,19 +1,8 @@
 <template>
-  <div class="post-page-container">
+  <BasePopup v-if="isRestricted" :visible="true" @close="closeRestrictedPopup">
-    <div v-if="isWaitingFetchingPost" class="loading-container">
-      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-    </div>
-    <div v-else 
-      class="post-page-main-container" 
-      ref="mainContainer"
-      >
-      <!-- 🔒 遮罩层 -->
-      <ClientOnly>
-        <div v-if="isRestricted" class="restricted-overlay">
     <div class="restricted-content">
       <Lock class="restricted-icon" />
 
-            <!-- 🔒 权限文案 -->
       <template v-if="visibleScope === 'ONLY_ME'">
         <p>这是一篇私密文章，仅作者本人及管理员可见</p>
         <div class="restricted-actions">
@@ -24,13 +13,16 @@
       <template v-else-if="visibleScope === 'ONLY_REGISTER'">
         <p>请登录后查看这篇文章</p>
         <div class="restricted-actions">
-                <NuxtLink to="/login" class="restricted-button" v-if="!loggedIn" >登录</NuxtLink>
+          <NuxtLink to="/login" class="restricted-button" v-if="!loggedIn">登录</NuxtLink>
         </div>
       </template>
+    </div></BasePopup
+  >
+  <div class="post-page-container">
+    <div v-if="isWaitingFetchingPost" class="loading-container">
+      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
     </div>
-        </div>
+    <div v-else class="post-page-main-container" ref="mainContainer">
-      </ClientOnly>
-      <div :class="{ 'is-blurred': isRestricted }">
       <div class="article-title-container">
         <div class="article-title-container-left">
           <div class="article-title">{{ title }}</div>
@@ -191,7 +183,6 @@
         </BaseTimeline>
       </div>
     </div>
-    </div>
 
     <!-- <div class="post-page-scroller-container">
       <div class="scroller">
@@ -537,17 +528,23 @@ const tokenHeader = computed(() => {
   const token = getToken()
   return token ? { Authorization: `Bearer ${token}` } : {}
 })
-const { data: postData, pending: pendingPost, error: postError, refresh: refreshPost } =
+const {
-  await useAsyncData(`post-${postId}`, async () => {
+  data: postData,
+  pending: pendingPost,
+  error: postError,
+  refresh: refreshPost,
+} = await useAsyncData(
+  `post-${postId}`,
+  async () => {
     try {
       return await $fetch(`${API_BASE_URL}/api/posts/${postId}`, { headers: tokenHeader.value })
-    } catch (err) {
+    } catch (err) {}
-    }
+  },
-  }, {
+  {
     server: false,
     lazy: false,
-  })
+  },
-
+)
 
 // 用 pendingPost 驱动现有 UI（替代 isWaitingFetchingPost 手控）
 const isWaitingFetchingPost = computed(() => pendingPost.value)
@@ -1385,7 +1382,6 @@ onMounted(async () => {
   position: relative;
 }
 
-
 /* ======== 权限锁定状态 ======== */
 .is-blurred {
   filter: blur(10px);
@@ -1413,11 +1409,8 @@ onMounted(async () => {
 /* 中央提示框 */
 .restricted-content {
   background: #ffff;
-  color:var(--primary-color);
+  color: var(--primary-color);
-  padding: 50px 60px;
-  border-radius: 12px;
   text-align: center;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
 }
 
 .restricted-icon {