From 499069573e5448ee29b71802ef980e0e2862de23 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Fri, 24 Oct 2025 10:11:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BC=B9=E7=AA=97=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAoverlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/LoginOverlay.vue | 21 ++++++++--
 frontend_nuxt/pages/index.vue             |  4 +-
 frontend_nuxt/pages/posts/[id]/index.vue  | 47 +++++++++++------------
 3 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/frontend_nuxt/components/LoginOverlay.vue b/frontend_nuxt/components/LoginOverlay.vue
index af508a404..7149c4fc6 100644
--- a/frontend_nuxt/components/LoginOverlay.vue
+++ b/frontend_nuxt/components/LoginOverlay.vue
@@ -3,15 +3,30 @@
     <div class="login-overlay-blur"></div>
     <div class="login-overlay-content">
       <user-icon class="login-overlay-icon" />
-      <div class="login-overlay-text">请先登录，点击跳转到登录页面</div>
-      <div class="login-overlay-button" @click="goLogin">登录</div>
+      <div class="login-overlay-text">{{ props.text }}</div>
+      <div class="login-overlay-button" @click="goLogin">{{ props.buttonText }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: '请先登录，点击跳转到登录页面',
+  },
+  buttonText: {
+    type: String,
+    default: '登录',
+  },
+  buttonLink: {
+    type: String,
+    default: '/login',
+  },
+})
+
 const goLogin = () => {
-  navigateTo('/login', { replace: true })
+  navigateTo(props.buttonLink, { replace: true })
 }
 </script>
 
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index 74e3c994b..ca18a3a7c 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -70,7 +70,7 @@
               <hands v-else-if="article.type === 'PROPOSAL'" class="proposal-icon" />
               <star v-if="!article.rssExcluded" class="featured-icon" />
               {{ article.title }}
-              <preview-close-one class="preview-close-icon" v-if="article.rssExcluded" />
+              <lock class="preview-close-icon" v-if="article.isRestricted" />
             </NuxtLink>
             <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
               <div v-html="stripMarkdownWithTiebaMoji(article.description, 500)"></div>
@@ -296,6 +296,7 @@ const {
       comments: p.commentCount,
       views: p.views,
       rssExcluded: p.rssExcluded || false,
+      isRestricted: p.visibleScope === 'ONLY_ME' || p.visibleScope === 'ONLY_REGISTER',
       time: TimeManager.format(
         selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
       ),
@@ -337,6 +338,7 @@ const fetchNextPage = async () => {
     members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
     comments: p.commentCount,
     views: p.views,
+    isRestricted: p.visibleScope === 'ONLY_ME' || p.visibleScope === 'ONLY_REGISTER',
     rssExcluded: p.rssExcluded || false,
     time: TimeManager.format(
       selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 45eea0f0e..31ce3bf8c 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -1,23 +1,22 @@
 <template>
-  <BasePopup v-if="isRestricted" :visible="true" @close="closeRestrictedPopup">
-    <div class="restricted-content">
-      <lock class="restricted-icon" />
-      <template v-if="visibleScope === 'ONLY_ME'">
-        <p>这是一篇私密文章，仅作者本人及管理员可见</p>
-        <div class="restricted-actions">
-          <NuxtLink to="/" class="restricted-button">返回首页</NuxtLink>
-        </div>
-      </template>
+  <div v-if="isRestricted" class="restricted-content">
+    <template v-if="visibleScope === 'ONLY_ME'">
+      <LoginOverlay
+        text="这是一篇私密文章，仅作者本人及管理员可见"
+        button-text="返回首页"
+        button-link="/"
+      />
+    </template>
 
-      <template v-else-if="visibleScope === 'ONLY_REGISTER'">
-        <p>请登录后查看这篇文章</p>
-        <div class="restricted-actions">
-          <NuxtLink to="/login" class="restricted-button" v-if="!loggedIn">登录</NuxtLink>
-        </div>
-      </template>
-    </div>
-  </BasePopup>
-  <div class="post-page-container">
+    <template v-else-if="visibleScope === 'ONLY_REGISTER'">
+      <LoginOverlay
+        text="这是一篇仅登录用户可见的文章，请先登录"
+        button-text="登录"
+        button-link="/login"
+      />
+    </template>
+  </div>
+  <div v-else 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>
@@ -34,7 +33,9 @@
           <div v-if="status === 'PENDING'" class="article-pending-button">审核中</div>
           <div v-if="status === 'REJECTED'" class="article-block-button">已拒绝</div>
           <div v-if="!rssExcluded" class="article-featured-button">精品</div>
-          <div v-if="closed" class="article-closed-button">已关闭</div>
+          <div v-if="closed" class="article-gray-button">已关闭</div>
+          <div v-if="visibleScope === 'ONLY_ME'" class="article-gray-button">仅自己可见</div>
+          <div v-if="visibleScope === 'ONLY_REGISTER'" class="article-gray-button">仅登录可见</div>
           <div
             v-if="!closed && loggedIn && !isAuthor && !subscribed"
             class="article-subscribe-button"
@@ -103,9 +104,7 @@
             </div>
             <div class="post-time">{{ postTime }}</div>
           </div>
-          <div v-if="isRestricted" v-for="n in 3" :key="n" class="info-content-text skeleton"></div>
           <div
-            v-else
             class="info-content-text"
             v-html="renderMarkdown(postContent)"
             @click="handleContentClick"
@@ -162,7 +161,7 @@
         </div>
       </div>
 
-      <div v-if="isFetchingComments || isRestricted" class="loading-container">
+      <div v-if="isFetchingComments" class="loading-container">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
       <div v-else class="comments-container">
@@ -1158,7 +1157,7 @@ onMounted(async () => {
   white-space: nowrap;
 }
 
-.article-closed-button,
+.article-gray-button,
 .article-subscribe-button-text,
 .article-featured-button,
 .article-unsubscribe-button-text {
@@ -1211,7 +1210,7 @@ onMounted(async () => {
   font-size: 14px;
 }
 
-.article-closed-button {
+.article-gray-button {
   background-color: var(--background-color);
   color: gray;
   border: 1px solid gray;