diff --git a/backend/src/main/java/com/openisle/controller/PostController.java b/backend/src/main/java/com/openisle/controller/PostController.java
index 736cba857..3dd4662e0 100644
--- a/backend/src/main/java/com/openisle/controller/PostController.java
+++ b/backend/src/main/java/com/openisle/controller/PostController.java
@@ -62,6 +62,16 @@ public class PostController {
         postService.deletePost(id, auth.getName());
     }
 
+    @PostMapping("/{id}/close")
+    public PostSummaryDto close(@PathVariable Long id, Authentication auth) {
+        return postMapper.toSummaryDto(postService.closePost(id, auth.getName()));
+    }
+
+    @PostMapping("/{id}/reopen")
+    public PostSummaryDto reopen(@PathVariable Long id, Authentication auth) {
+        return postMapper.toSummaryDto(postService.reopenPost(id, auth.getName()));
+    }
+
     @GetMapping("/{id}")
     public ResponseEntity<PostDetailDto> getPost(@PathVariable Long id, Authentication auth) {
         String viewer = auth != null ? auth.getName() : null;
diff --git a/backend/src/main/java/com/openisle/dto/PostSummaryDto.java b/backend/src/main/java/com/openisle/dto/PostSummaryDto.java
index e47a03e11..665c590f7 100644
--- a/backend/src/main/java/com/openisle/dto/PostSummaryDto.java
+++ b/backend/src/main/java/com/openisle/dto/PostSummaryDto.java
@@ -32,5 +32,6 @@ public class PostSummaryDto {
     private PostType type;
     private LotteryDto lottery;
     private boolean rssExcluded;
+    private boolean closed;
 }
 
diff --git a/backend/src/main/java/com/openisle/mapper/PostMapper.java b/backend/src/main/java/com/openisle/mapper/PostMapper.java
index 0ef432228..d36b25e32 100644
--- a/backend/src/main/java/com/openisle/mapper/PostMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/PostMapper.java
@@ -64,6 +64,7 @@ public class PostMapper {
         dto.setStatus(post.getStatus());
         dto.setPinnedAt(post.getPinnedAt());
         dto.setRssExcluded(post.getRssExcluded() == null || post.getRssExcluded());
+        dto.setClosed(post.isClosed());
 
         List<ReactionDto> reactions = reactionService.getReactionsForPost(post.getId())
                 .stream()
diff --git a/backend/src/main/java/com/openisle/model/Post.java b/backend/src/main/java/com/openisle/model/Post.java
index d314ca9a0..ccd614574 100644
--- a/backend/src/main/java/com/openisle/model/Post.java
+++ b/backend/src/main/java/com/openisle/model/Post.java
@@ -64,6 +64,9 @@ public class Post {
     @Column(nullable = false)
     private PostType type = PostType.NORMAL;
 
+    @Column(nullable = false)
+    private boolean closed = false;
+
     @Column
     private LocalDateTime pinnedAt;
 
diff --git a/backend/src/main/java/com/openisle/service/CommentService.java b/backend/src/main/java/com/openisle/service/CommentService.java
index 3ac994e30..8121b80d9 100644
--- a/backend/src/main/java/com/openisle/service/CommentService.java
+++ b/backend/src/main/java/com/openisle/service/CommentService.java
@@ -52,6 +52,9 @@ public class CommentService {
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Post post = postRepository.findById(postId)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        if (post.isClosed()) {
+            throw new IllegalStateException("Post closed");
+        }
         Comment comment = new Comment();
         comment.setAuthor(author);
         comment.setPost(post);
@@ -94,6 +97,9 @@ public class CommentService {
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Comment parent = commentRepository.findById(parentId)
                 .orElseThrow(() -> new IllegalArgumentException("Comment not found"));
+        if (parent.getPost().isClosed()) {
+            throw new IllegalStateException("Post closed");
+        }
         Comment comment = new Comment();
         comment.setAuthor(author);
         comment.setPost(parent.getPost());
diff --git a/backend/src/main/java/com/openisle/service/PostService.java b/backend/src/main/java/com/openisle/service/PostService.java
index 2e1106e04..e9a205fb9 100644
--- a/backend/src/main/java/com/openisle/service/PostService.java
+++ b/backend/src/main/java/com/openisle/service/PostService.java
@@ -512,6 +512,30 @@ public class PostService {
         return postRepository.save(post);
     }
 
+    public Post closePost(Long id, String username) {
+        Post post = postRepository.findById(id)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        if (!user.getId().equals(post.getAuthor().getId()) && user.getRole() != Role.ADMIN) {
+            throw new IllegalArgumentException("Unauthorized");
+        }
+        post.setClosed(true);
+        return postRepository.save(post);
+    }
+
+    public Post reopenPost(Long id, String username) {
+        Post post = postRepository.findById(id)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        if (!user.getId().equals(post.getAuthor().getId()) && user.getRole() != Role.ADMIN) {
+            throw new IllegalArgumentException("Unauthorized");
+        }
+        post.setClosed(false);
+        return postRepository.save(post);
+    }
+
     @org.springframework.transaction.annotation.Transactional
     public Post updatePost(Long id,
                            String username,
diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index d0967523c..6b29dcabd 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -90,7 +90,8 @@ body {
 }
 
 .vditor-toolbar--pin {
-  top: var(--header-height) !important;
+  top: calc(var(--header-height) + 1px) !important;
+  z-index: 2000;
 }
 
 .vditor-panel {
diff --git a/frontend_nuxt/components/CommentEditor.vue b/frontend_nuxt/components/CommentEditor.vue
index 0914d3ef1..422fb563c 100644
--- a/frontend_nuxt/components/CommentEditor.vue
+++ b/frontend_nuxt/components/CommentEditor.vue
@@ -22,6 +22,7 @@ import {
   getEditorTheme as getEditorThemeUtil,
   getPreviewTheme as getPreviewThemeUtil,
 } from '~/utils/vditor'
+import '~/assets/global.css'
 import LoginOverlay from '~/components/LoginOverlay.vue'
 
 export default {
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 2ea71e0d0..10f74bf4e 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -57,7 +57,7 @@
           v-if="showEditor"
           @submit="submitReply"
           :loading="isWaitingForReply"
-          :disabled="!loggedIn"
+          :disabled="!loggedIn || postClosed"
           :show-login-overlay="!loggedIn"
           :parent-user-name="comment.userName"
         />
@@ -76,6 +76,7 @@
               :level="level + 1"
               :default-show-replies="item.openReplies"
               :post-author-id="postAuthorId"
+              :post-closed="postClosed"
             />
           </template>
         </BaseTimeline>
@@ -122,6 +123,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  postClosed: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['deleted'])
@@ -148,6 +153,7 @@ const toggleReplies = () => {
 }
 
 const toggleEditor = () => {
+  if (props.postClosed) return
   showEditor.value = !showEditor.value
   if (showEditor.value) {
     setTimeout(() => {
@@ -213,6 +219,10 @@ const deleteComment = async () => {
 }
 const submitReply = async (parentUserName, text, clear) => {
   if (!text.trim()) return
+  if (props.postClosed) {
+    toast.error('帖子已关闭')
+    return
+  }
   isWaitingForReply.value = true
   const token = getToken()
   if (!token) {
diff --git a/frontend_nuxt/components/ConfirmDialog.vue b/frontend_nuxt/components/ConfirmDialog.vue
index 922dd402a..f3a678d8b 100644
--- a/frontend_nuxt/components/ConfirmDialog.vue
+++ b/frontend_nuxt/components/ConfirmDialog.vue
@@ -1,21 +1,21 @@
 <template>
-  <BasePopup :visible="state.visible" @close="onCancel">
-    <div class="confirm-dialog">
-      <h3 class="confirm-title">{{ state.title }}</h3>
-      <p class="confirm-message">{{ state.message }}</p>
+  <BasePopup :visible="visible" @close="onCancel">
+    <div class="confirm-dialog" role="dialog" aria-modal="true">
+      <h3 class="confirm-title">{{ title }}</h3>
+      <p class="confirm-message">{{ message }}</p>
       <div class="confirm-actions">
-        <button class="cancel-button" @click="onCancel">取消</button>
-        <button class="confirm-button" @click="onConfirm">确认</button>
+        <div class="cancel-button" @click="onCancel">取消</div>
+        <div class="confirm-button" @click="onConfirm">确认</div>
       </div>
     </div>
   </BasePopup>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BasePopup from '~/components/BasePopup.vue'
 import { useConfirm } from '~/composables/useConfirm'
 
-const { state, onConfirm, onCancel } = useConfirm()
+const { visible, title, message, onConfirm, onCancel } = useConfirm()
 </script>
 
 <style scoped>
@@ -25,29 +25,47 @@ const { state, onConfirm, onCancel } = useConfirm()
 }
 .confirm-title {
   margin-top: 0;
+  font-size: 18px;
+  font-weight: 600;
 }
 .confirm-message {
-  margin: 20px 0;
+  margin: 16px 0 20px;
+  line-height: 1.6;
+  color: var(--text-secondary, #666);
 }
 .confirm-actions {
   display: flex;
   justify-content: center;
-  gap: 10px;
+  gap: 12px;
+}
+.confirm-button,
+.cancel-button {
+  min-width: 88px;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
 }
 .confirm-button {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
+  background: var(--primary-color);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.confirm-button:hover {
+  background: var(--primary-color-hover);
 }
 .cancel-button {
-  background-color: #ccc;
-  color: black;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
+  background: transparent;
+  color: var(--primary-color);
+  border-color: currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-</style>
\ No newline at end of file
+.cancel-button:hover {
+  opacity: 0.85;
+}
+</style>
diff --git a/frontend_nuxt/components/PostEditor.vue b/frontend_nuxt/components/PostEditor.vue
index 06994e041..0c9a728f7 100644
--- a/frontend_nuxt/components/PostEditor.vue
+++ b/frontend_nuxt/components/PostEditor.vue
@@ -16,6 +16,7 @@ import {
   getEditorTheme as getEditorThemeUtil,
   getPreviewTheme as getPreviewThemeUtil,
 } from '~/utils/vditor'
+import '~/assets/global.css'
 
 export default {
   name: 'PostEditor',
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index d73861bf2..8465270ff 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -51,7 +51,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { reactionEmojiMap } from '~/utils/reactions'
-import { useReactionTypes   } from '~/composables/useReactionTypes'
+import { useReactionTypes } from '~/composables/useReactionTypes'
 
 const { reactionTypes, initialize } = useReactionTypes()
 
@@ -237,7 +237,7 @@ onMounted(async () => {
 
 .make-reaction-item {
   cursor: pointer;
-  padding: 10px;
+  padding: 4px;
   opacity: 0.5;
   border-radius: 8px;
   font-size: 20px;
diff --git a/frontend_nuxt/composables/useConfirm.js b/frontend_nuxt/composables/useConfirm.js
deleted file mode 100644
index feffa0712..000000000
--- a/frontend_nuxt/composables/useConfirm.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ref } from 'vue'
-
-const state = ref({
-  visible: false,
-  title: '',
-  message: '',
-  resolve: null,
-  reject: null,
-})
-
-export const useConfirm = () => {
-  const confirm = (title, message) => {
-    state.value.title = title
-    state.value.message = message
-    state.value.visible = true
-    return new Promise((resolve, reject) => {
-      state.value.resolve = resolve
-      state.value.reject = reject
-    })
-  }
-
-  const onConfirm = () => {
-    if (state.value.resolve) {
-      state.value.resolve(true)
-    }
-    state.value.visible = false
-  }
-
-  const onCancel = () => {
-    if (state.value.reject) {
-      state.value.reject(false)
-    }
-    state.value.visible = false
-  }
-
-  return {
-    confirm,
-    onConfirm,
-    onCancel,
-    state,
-  }
-}
\ No newline at end of file
diff --git a/frontend_nuxt/composables/useConfirm.ts b/frontend_nuxt/composables/useConfirm.ts
new file mode 100644
index 000000000..d33822a0e
--- /dev/null
+++ b/frontend_nuxt/composables/useConfirm.ts
@@ -0,0 +1,52 @@
+// composables/useConfirm.ts
+import { ref } from 'vue'
+
+// 全局单例（SPA 下即可；Nuxt/SSR 下见文末“SSR 提醒”）
+const visible = ref(false)
+const title = ref('')
+const message = ref('')
+
+let resolver: ((ok: boolean) => void) | null = null
+
+function reset() {
+  visible.value = false
+  title.value = ''
+  message.value = ''
+  resolver = null
+}
+
+export function useConfirm() {
+  /**
+   * 打开确认框，返回 Promise<boolean>
+   * - 确认 => resolve(true)
+   * - 取消/关闭 => resolve(false)
+   * 若并发调用，以最后一次为准（更简单直观）
+   */
+  const confirm = (t: string, m: string) => {
+    title.value = t
+    message.value = m
+    visible.value = true
+    return new Promise<boolean>((resolve) => {
+      resolver = resolve
+    })
+  }
+
+  const onConfirm = () => {
+    resolver?.(true)
+    reset()
+  }
+
+  const onCancel = () => {
+    resolver?.(false)
+    reset()
+  }
+
+  return {
+    visible,
+    title,
+    message,
+    confirm,
+    onConfirm,
+    onCancel,
+  }
+}
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 5771163d9..d62b95792 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -15,13 +15,22 @@
         <div class="article-title-container-right">
           <div v-if="status === 'PENDING'" class="article-pending-button">审核中</div>
           <div v-if="status === 'REJECTED'" class="article-block-button">已拒绝</div>
-          <div v-if="loggedIn && !isAuthor && !subscribed" class="article-subscribe-button" @click="subscribePost">
+          <div v-if="closed" class="article-closed-button">已关闭</div>
+          <div
+            v-if="loggedIn && !isAuthor && !subscribed"
+            class="article-subscribe-button"
+            @click="subscribePost"
+          >
             <i class="fas fa-user-plus"></i>
             <div class="article-subscribe-button-text">
               {{ isMobile ? '订阅' : '订阅文章' }}
             </div>
           </div>
-          <div v-if="loggedIn && !isAuthor && subscribed" class="article-unsubscribe-button" @click="unsubscribePost">
+          <div
+            v-if="loggedIn && !isAuthor && subscribed"
+            class="article-unsubscribe-button"
+            @click="unsubscribePost"
+          >
             <i class="fas fa-user-minus"></i>
             <div class="article-unsubscribe-button-text">
               {{ isMobile ? '退订' : '取消订阅' }}
@@ -44,8 +53,12 @@
             <div class="user-name">
               {{ author.username }}
               <i class="fas fa-medal medal-icon"></i>
-              <NuxtLink v-if="author.displayMedal" class="user-medal" :to="`/users/${author.id}?tab=achievements`">{{
-                getMedalTitle(author.displayMedal) }}</NuxtLink>
+              <NuxtLink
+                v-if="author.displayMedal"
+                class="user-medal"
+                :to="`/users/${author.id}?tab=achievements`"
+                >{{ getMedalTitle(author.displayMedal) }}</NuxtLink
+              >
             </div>
             <div class="post-time">{{ postTime }}</div>
           </div>
@@ -56,12 +69,20 @@
             <div class="user-name">
               {{ author.username }}
               <i class="fas fa-medal medal-icon"></i>
-              <NuxtLink v-if="author.displayMedal" class="user-medal" :to="`/users/${author.id}?tab=achievements`">{{
-                getMedalTitle(author.displayMedal) }}</NuxtLink>
+              <NuxtLink
+                v-if="author.displayMedal"
+                class="user-medal"
+                :to="`/users/${author.id}?tab=achievements`"
+                >{{ getMedalTitle(author.displayMedal) }}</NuxtLink
+              >
             </div>
             <div class="post-time">{{ postTime }}</div>
           </div>
-          <div class="info-content-text" v-html="renderMarkdown(postContent)" @click="handleContentClick"></div>
+          <div
+            class="info-content-text"
+            v-html="renderMarkdown(postContent)"
+            @click="handleContentClick"
+          ></div>
 
           <div class="article-footer-container">
             <ReactionsGroup v-model="postReactions" content-type="post" :content-id="postId">
@@ -78,7 +99,12 @@
           <div class="prize-info">
             <div class="prize-info-left">
               <div class="prize-icon">
-                <img class="prize-icon-img" v-if="lottery.prizeIcon" :src="lottery.prizeIcon" alt="prize" />
+                <img
+                  class="prize-icon-img"
+                  v-if="lottery.prizeIcon"
+                  :src="lottery.prizeIcon"
+                  alt="prize"
+                />
                 <i v-else class="fa-solid fa-gift default-prize-icon"></i>
               </div>
               <div class="prize-name">{{ lottery.prizeDescription }}</div>
@@ -88,7 +114,11 @@
               <div v-if="!isMobile" class="prize-end-time-title">离结束还有</div>
               <div class="prize-end-time-value">{{ countdown }}</div>
               <div v-if="!isMobile" class="join-prize-button-container-desktop">
-                <div v-if="loggedIn && !hasJoined && !lotteryEnded" class="join-prize-button" @click="joinLottery">
+                <div
+                  v-if="loggedIn && !hasJoined && !lotteryEnded"
+                  class="join-prize-button"
+                  @click="joinLottery"
+                >
                   <div class="join-prize-button-text">参与抽奖</div>
                 </div>
                 <div v-else-if="hasJoined" class="join-prize-button-disabled">
@@ -99,7 +129,11 @@
           </div>
 
           <div v-if="isMobile" class="join-prize-button-container-mobile">
-            <div v-if="loggedIn && !hasJoined && !lotteryEnded" class="join-prize-button" @click="joinLottery">
+            <div
+              v-if="loggedIn && !hasJoined && !lotteryEnded"
+              class="join-prize-button"
+              @click="joinLottery"
+            >
               <div class="join-prize-button-text">参与抽奖</div>
             </div>
             <div v-else-if="hasJoined" class="join-prize-button-disabled">
@@ -108,13 +142,25 @@
           </div>
         </div>
         <div class="prize-member-container">
-          <img v-for="p in lotteryParticipants" :key="p.id" class="prize-member-avatar" :src="p.avatar" alt="avatar"
-            @click="gotoUser(p.id)" />
+          <img
+            v-for="p in lotteryParticipants"
+            :key="p.id"
+            class="prize-member-avatar"
+            :src="p.avatar"
+            alt="avatar"
+            @click="gotoUser(p.id)"
+          />
           <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
             <i class="fas fa-medal medal-icon"></i>
             <span class="prize-member-winner-name">获奖者: </span>
-            <img v-for="w in lotteryWinners" :key="w.id" class="prize-member-avatar" :src="w.avatar" alt="avatar"
-              @click="gotoUser(w.id)" />
+            <img
+              v-for="w in lotteryWinners"
+              :key="w.id"
+              class="prize-member-avatar"
+              :src="w.avatar"
+              alt="avatar"
+              @click="gotoUser(w.id)"
+            />
             <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
               {{ lotteryWinners[0].username }}
             </div>
@@ -122,9 +168,16 @@
         </div>
       </div>
 
+      <div class="post-close-container">该帖子已关闭，内容仅供阅读，无法进行互动</div>
+
       <ClientOnly>
-        <CommentEditor @submit="postComment" :loading="isWaitingPostingComment" :disabled="!loggedIn"
-          :show-login-overlay="!loggedIn" :parent-user-name="author.username" />
+        <CommentEditor
+          @submit="postComment"
+          :loading="isWaitingPostingComment"
+          :disabled="!loggedIn || closed"
+          :show-login-overlay="!loggedIn"
+          :parent-user-name="author.username"
+        />
       </ClientOnly>
 
       <div class="comment-config-container">
@@ -140,8 +193,15 @@
       <div v-else class="comments-container">
         <BaseTimeline :items="comments">
           <template #item="{ item }">
-            <CommentItem :key="item.id" :comment="item" :level="0" :default-show-replies="item.openReplies"
-              :post-author-id="author.id" @deleted="onCommentDeleted" />
+            <CommentItem
+              :key="item.id"
+              :comment="item"
+              :level="0"
+              :default-show-replies="item.openReplies"
+              :post-author-id="author.id"
+              :post-closed="closed"
+              @deleted="onCommentDeleted"
+            />
           </template>
         </BaseTimeline>
       </div>
@@ -152,21 +212,40 @@
         <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" />
+          <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" :imgs="lightboxImgs"
-      @hide="lightboxVisible = false" />
+    <vue-easy-lightbox
+      :visible="lightboxVisible"
+      :index="lightboxIndex"
+      :imgs="lightboxImgs"
+      @hide="lightboxVisible = false"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, onActivated } from 'vue'
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch,
+  watchEffect,
+  onActivated,
+} from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRoute } from 'vue-router'
 import CommentItem from '~/components/CommentItem.vue'
@@ -186,6 +265,7 @@ import { useIsMobile } from '~/utils/screen'
 import Dropdown from '~/components/Dropdown.vue'
 import { ClientOnly } from '#components'
 import { useConfirm } from '~/composables/useConfirm'
+const { confirm } = useConfirm()
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -202,6 +282,7 @@ const tags = ref([])
 const postReactions = ref([])
 const comments = ref([])
 const status = ref('PUBLISHED')
+const closed = ref(false)
 const pinnedAt = ref(null)
 const rssExcluded = ref(false)
 const isWaitingPostingComment = ref(false)
@@ -213,7 +294,6 @@ const subscribed = ref(false)
 const commentSort = ref('NEWEST')
 const isFetchingComments = ref(false)
 const isMobile = useIsMobile()
-const { confirm } = useConfirm()
 
 const headerHeight = process.client
   ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 0
@@ -286,6 +366,11 @@ const articleMenuItems = computed(() => {
   if (isAuthor.value || isAdmin.value) {
     items.push({ text: '编辑文章', onClick: () => editPost() })
     items.push({ text: '删除文章', color: 'red', onClick: deletePost })
+    if (closed.value) {
+      items.push({ text: '重新打开帖子', onClick: () => reopenPost() })
+    } else {
+      items.push({ text: '关闭帖子', onClick: () => closePost() })
+    }
   }
   if (isAdmin.value) {
     if (pinnedAt.value) {
@@ -421,6 +506,7 @@ watchEffect(() => {
   postReactions.value = data.reactions || []
   subscribed.value = !!data.subscribed
   status.value = data.status
+  closed.value = data.closed
   pinnedAt.value = data.pinnedAt
   rssExcluded.value = data.rssExcluded
   postTime.value = TimeManager.format(data.createdAt)
@@ -480,6 +566,10 @@ const onSliderInput = (e) => {
 
 const postComment = async (parentUserName, text, clear) => {
   if (!text.trim()) return
+  if (closed.value) {
+    toast.error('帖子已关闭')
+    return
+  }
   console.debug('Posting comment', { postId, text })
   isWaitingPostingComment.value = true
   const token = getToken()
@@ -618,13 +708,46 @@ const includeRss = async () => {
   }
 }
 
+const closePost = async () => {
+  const token = getToken()
+  if (!token) return
+  const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/close`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    closed.value = true
+    toast.success('已关闭')
+    await refreshPost()
+  } else {
+    toast.error('操作失败')
+  }
+}
+
+const reopenPost = async () => {
+  const token = getToken()
+  if (!token) return
+  const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/reopen`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    closed.value = false
+    toast.success('已重新打开')
+    await refreshPost()
+  } else {
+    toast.error('操作失败')
+  }
+}
+
 const editPost = () => {
   navigateTo(`/posts/${postId}/edit`, { replace: true })
 }
 
 const deletePost = async () => {
   try {
-    await confirm('确认删除', '确定要删除这篇文章吗？此操作不可撤销。')
+    const ok = await confirm('删除帖子', '此操作不可恢复，确认要删除吗？')
+    if (!ok) return
     const token = getToken()
     if (!token) {
       toast.error('请先登录')
@@ -818,6 +941,18 @@ onMounted(async () => {
   gap: 10px;
 }
 
+.post-close-container {
+  padding: 40px;
+  margin-top: 15px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: 1px dashed var(--normal-border-color);
+  border-radius: 10px;
+  opacity: 0.5;
+}
+
 .scroller {
   margin-top: 20px;
   margin-left: 20px;
@@ -974,6 +1109,15 @@ onMounted(async () => {
   font-size: 14px;
 }
 
+.article-closed-button {
+  background-color: var(--background-color);
+  color: gray;
+  border: 1px solid gray;
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
 .article-title {
   font-size: 30px;
   font-weight: bold;
diff --git a/frontend_nuxt/utils/markdown.js b/frontend_nuxt/utils/markdown.js
index 4092c3dd8..0d9f8b1c1 100644
--- a/frontend_nuxt/utils/markdown.js
+++ b/frontend_nuxt/utils/markdown.js
@@ -1,4 +1,5 @@
-import hljs from 'highlight.js'
+import hljs from 'highlight.js/lib/common'
+
 if (typeof window !== 'undefined') {
   const theme =
     document.documentElement.dataset.theme ||
diff --git a/frontend_nuxt/utils/vditor.js b/frontend_nuxt/utils/vditor.js
index 900486e74..c38aed7b1 100644
--- a/frontend_nuxt/utils/vditor.js
+++ b/frontend_nuxt/utils/vditor.js
@@ -2,7 +2,6 @@ import Vditor from 'vditor'
 import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
 import { tiebaEmoji } from './tiebaEmoji'
-import '~/assets/global.css'
 
 export function getEditorTheme() {
   return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'