From bdcc1488b979f8b9a3d142006231da70152cbc00 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Thu, 23 Oct 2025 17:54:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8F=AF=E8=A7=81?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 deploy/deploy_staging.sh                 |  1 -
 docker/docker-compose.yaml               |  4 +-
 frontend_nuxt/pages/posts/[id]/index.vue | 59 ++++++++++++++----------
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/deploy/deploy_staging.sh b/deploy/deploy_staging.sh
index 2f6a3d066..fbeda44a7 100644
--- a/deploy/deploy_staging.sh
+++ b/deploy/deploy_staging.sh
@@ -36,7 +36,6 @@ echo "👉 Pull base images (for image-based services)..."
 docker compose -f "$compose_file" --env-file "$env_file" pull --ignore-pull-failures
 
 echo "👉 Build images (staging)..."
-# 前端 + OpenSearch 都是自建镜像；--pull 更新其基础镜像
 docker compose -f "$compose_file" --env-file "$env_file" \
   build --pull \
   --build-arg NUXT_ENV=staging \
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 6fd60458a..5bf093c77 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -161,8 +161,8 @@ services:
         condition: service_started
       websocket-service:
         condition: service_healthy
-      opensearch:
-        condition: service_healthy
+      # opensearch:
+      #   condition: service_healthy
     command: >
       sh -c "apt-get update && apt-get install -y --no-install-recommends curl &&
              mvn clean spring-boot:run -Dmaven.test.skip=true"
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 36a81c772..45eea0f0e 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -1,8 +1,7 @@
 <template>
   <BasePopup v-if="isRestricted" :visible="true" @close="closeRestrictedPopup">
     <div class="restricted-content">
-      <Lock class="restricted-icon" />
-
+      <lock class="restricted-icon" />
       <template v-if="visibleScope === 'ONLY_ME'">
         <p>这是一篇私密文章，仅作者本人及管理员可见</p>
         <div class="restricted-actions">
@@ -16,8 +15,8 @@
           <NuxtLink to="/login" class="restricted-button" v-if="!loggedIn">登录</NuxtLink>
         </div>
       </template>
-    </div></BasePopup
-  >
+    </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>
@@ -104,7 +103,9 @@
             </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"
@@ -161,7 +162,7 @@
         </div>
       </div>
 
-      <div v-if="isFetchingComments" class="loading-container">
+      <div v-if="isFetchingComments || isRestricted" 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">
@@ -184,25 +185,6 @@
       </div>
     </div>
 
-    <!-- <div class="post-page-scroller-container">
-      <div class="scroller">
-        <div v-if="isWaitingFetchingPost" class="scroller-time">loading...</div>
-        <div v-else class="scroller-time">{{ scrollerTopTime }}</div>
-        <div class="scroller-middle">
-          <input
-            type="range"
-            class="scroller-range"
-            :max="totalPosts"
-            :min="1"
-            v-model.number="currentIndex"
-            @input="onSliderInput"
-          />
-          <div class="scroller-index">{{ currentIndex }}/{{ totalPosts }}</div>
-        </div>
-        <div v-if="isWaitingFetchingPost" class="scroller-time">loading...</div>
-        <div v-else class="scroller-time">{{ lastReplyTime }}</div>
-      </div>
-    </div> -->
     <vue-easy-lightbox
       :visible="lightboxVisible"
       :index="lightboxIndex"
@@ -1043,6 +1025,35 @@ onMounted(async () => {
   opacity: 0.5;
 }
 
+.skeleton {
+  background-color: #eee;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  height: 20px;
+  margin-top: 5px;
+}
+
+.skeleton::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: linear-gradient(90deg, #eee 0%, #f5f5f7 40%, #e0e0e0 100%);
+  transform: translateX(-100%);
+  animation: skeleton-shimmer 1.5s infinite linear;
+  z-index: 1;
+  border-radius: 8px;
+}
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 .user-avatar-container {
   display: flex;
   flex-direction: row;