diff --git a/backend/src/main/java/com/openisle/config/SecurityConfig.java b/backend/src/main/java/com/openisle/config/SecurityConfig.java
index 5c9572837..51aa0d89e 100644
--- a/backend/src/main/java/com/openisle/config/SecurityConfig.java
+++ b/backend/src/main/java/com/openisle/config/SecurityConfig.java
@@ -77,8 +77,8 @@ public class SecurityConfig {
                 "http://127.0.0.1",
                 "http://localhost:8080",
                 "http://localhost",
-                "http://30.211.98.193:8080",
-                "http://30.211.98.193",
+                "http://30.211.106.178:8080",
+                "http://30.211.106.178",
                 "http://192.168.7.70",
                 "http://192.168.7.70:8080",
                 websiteUrl,
diff --git a/frontend/package.json b/frontend/package.json
index 372208730..b67b5739d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "cropperjs": "^1.6.2",
     "echarts": "^5.6.0",
+    "highlight.js": "^10.7.1",
     "ldrs": "^1.1.7",
     "markdown-it": "^14.1.0",
     "vditor": "^3.11.1",
diff --git a/frontend/src/assets/global.css b/frontend/src/assets/global.css
index 1eaff1765..af5513209 100644
--- a/frontend/src/assets/global.css
+++ b/frontend/src/assets/global.css
@@ -65,7 +65,22 @@ body {
  *************************/
 .vditor {
   min-height: 200px;
-} 
+}
+
+.vditor-toolbar--pin {
+  top: var(--header-height) !important;
+}
+
+.vditor-panel {
+  min-width: 400px;
+}
+
+.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
 /* .vditor {
   --textarea-background-color: transparent;
   border: none !important;
@@ -220,7 +235,7 @@ body {
   } 
 
   .vditor-toolbar {
-    display: none;
+    overflow-x: auto;
   }
 
   .about-content h1,
@@ -240,6 +255,11 @@ body {
     margin-bottom: 3px;
   }
 
+
+  .vditor-toolbar--pin {
+    top: 0 !important;
+  }
+
   .about-content li,
   .info-content-text li {
     font-size: 14px;
@@ -248,4 +268,9 @@ body {
   .info-content-text pre {
     line-height: 1.1;
   }
+
+  .vditor-panel {
+    position: relative;
+    min-width: 0;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/components/CommentEditor.vue b/frontend/src/components/CommentEditor.vue
index 15bab89d6..fe3bc7dd8 100644
--- a/frontend/src/components/CommentEditor.vue
+++ b/frontend/src/components/CommentEditor.vue
@@ -67,9 +67,11 @@ export default {
       if (!vditorInstance.value || isDisabled.value) return
       const value = vditorInstance.value.getValue()
       console.debug('CommentEditor submit', value)
-      emit('submit', value)
-      vditorInstance.value.setValue('')
-      text.value = ''
+      emit('submit', value, () => {
+        if (!vditorInstance.value) return
+        vditorInstance.value.setValue('')
+        text.value = ''
+      })
     }
 
     onMounted(() => {
diff --git a/frontend/src/components/CommentItem.vue b/frontend/src/components/CommentItem.vue
index bf8201dda..3eab5be1b 100644
--- a/frontend/src/components/CommentItem.vue
+++ b/frontend/src/components/CommentItem.vue
@@ -157,7 +157,7 @@ const CommentItem = {
         toast.error('操作失败')
       }
     }
-    const submitReply = async (text) => {
+    const submitReply = async (text, clear) => {
       if (!text.trim()) return
       isWaitingForReply.value = true
       const token = getToken()
@@ -201,6 +201,7 @@ const CommentItem = {
             src: data.author.avatar,
             iconClick: () => router.push(`/users/${data.author.id}`)
           })
+          clear()
           showEditor.value = false
           toast.success('回复成功')
         } else if (res.status === 429) {
diff --git a/frontend/src/components/Dropdown.vue b/frontend/src/components/Dropdown.vue
index 27f5a641c..062521262 100644
--- a/frontend/src/components/Dropdown.vue
+++ b/frontend/src/components/Dropdown.vue
@@ -1,13 +1,24 @@
 <template>
   <div class="dropdown" ref="wrapper">
     <div class="dropdown-display" @click="toggle">
-      <slot name="display" :selected="selectedLabels" :toggle="toggle" :search="search" :setSearch="setSearch">
+      <slot
+        name="display"
+        :selected="selectedLabels"
+        :toggle="toggle"
+        :search="search"
+        :setSearch="setSearch"
+      >
         <template v-if="multiple">
           <span v-if="selectedLabels.length">
             <template v-for="(label, idx) in selectedLabels" :key="label.id">
               <div class="selected-label">
                 <template v-if="label.icon">
-                    <img v-if="isImageIcon(label.icon)" :src="label.icon" class="option-icon" :alt="label.name" />
+                  <img
+                    v-if="isImageIcon(label.icon)"
+                    :src="label.icon"
+                    class="option-icon"
+                    :alt="label.name"
+                  />
                   <i v-else :class="['option-icon', label.icon]"></i>
                 </template>
                 <span>{{ label.name }}</span>
@@ -21,7 +32,12 @@
           <span v-if="selectedLabels.length">
             <div class="selected-label">
               <template v-if="selectedLabels[0].icon">
-                  <img v-if="isImageIcon(selectedLabels[0].icon)" :src="selectedLabels[0].icon" class="option-icon" :alt="selectedLabels[0].name" />
+                <img
+                  v-if="isImageIcon(selectedLabels[0].icon)"
+                  :src="selectedLabels[0].icon"
+                  class="option-icon"
+                  :alt="selectedLabels[0].name"
+                />
                 <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
               </template>
               <span>{{ selectedLabels[0].name }}</span>
@@ -32,20 +48,46 @@
         <i class="fas fa-caret-down dropdown-caret"></i>
       </slot>
     </div>
-    <div v-if="open && !isMobile && (loading || filteredOptions.length > 0 || showSearch)" :class="['dropdown-menu', menuClass]">
+    <div
+      v-if="
+        open &&
+        !isMobile &&
+        (loading || filteredOptions.length > 0 || showSearch)
+      "
+      :class="['dropdown-menu', menuClass]"
+      v-click-outside="close"
+    >
       <div v-if="showSearch" class="dropdown-search">
         <i class="fas fa-search search-icon"></i>
         <input type="text" v-model="search" placeholder="搜索" />
       </div>
       <div v-if="loading" class="dropdown-loading">
-        <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        <l-hatch
+          size="20"
+          stroke="4"
+          speed="3.5"
+          color="var(--primary-color)"
+        ></l-hatch>
       </div>
       <template v-else>
-        <div v-for="o in filteredOptions" :key="o.id" @click="select(o.id)"
-          :class="['dropdown-option', optionClass, { 'selected': isSelected(o.id) }]">
+        <div
+          v-for="o in filteredOptions"
+          :key="o.id"
+          @click="select(o.id)"
+          :class="[
+            'dropdown-option',
+            optionClass,
+            { selected: isSelected(o.id) },
+          ]"
+        >
           <slot name="option" :option="o" :isSelected="isSelected(o.id)">
             <template v-if="o.icon">
-                <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+              <img
+                v-if="isImageIcon(o.icon)"
+                :src="o.icon"
+                class="option-icon"
+                :alt="o.name"
+              />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
             <span>{{ o.name }}</span>
@@ -65,14 +107,32 @@
             <input type="text" v-model="search" placeholder="搜索" />
           </div>
           <div v-if="loading" class="dropdown-loading">
-            <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+            <l-hatch
+              size="20"
+              stroke="4"
+              speed="3.5"
+              color="var(--primary-color)"
+            ></l-hatch>
           </div>
           <template v-else>
-            <div v-for="o in filteredOptions" :key="o.id" @click="select(o.id)"
-              :class="['dropdown-option', optionClass, { 'selected': isSelected(o.id) }]">
+            <div
+              v-for="o in filteredOptions"
+              :key="o.id"
+              @click="select(o.id)"
+              :class="[
+                'dropdown-option',
+                optionClass,
+                { selected: isSelected(o.id) },
+              ]"
+            >
               <slot name="option" :option="o" :isSelected="isSelected(o.id)">
                 <template v-if="o.icon">
-                  <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+                  <img
+                    v-if="isImageIcon(o.icon)"
+                    :src="o.icon"
+                    class="option-icon"
+                    :alt="o.name"
+                  />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
                 <span>{{ o.name }}</span>
@@ -86,47 +146,49 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
-import { hatch } from 'ldrs'
-import { isMobile } from '../utils/screen'
+import { ref, computed, watch, onMounted } from "vue"
+import { hatch } from "ldrs"
+import { isMobile } from "../utils/screen"
 hatch.register()
 
 export default {
-  name: 'BaseDropdown',
+  name: "BaseDropdown",
   props: {
     modelValue: { type: [Array, String, Number], default: () => [] },
-    placeholder: { type: String, default: '返回' },
+    placeholder: { type: String, default: "返回" },
     multiple: { type: Boolean, default: false },
     fetchOptions: { type: Function, required: true },
     remote: { type: Boolean, default: false },
-    menuClass: { type: String, default: '' },
-    optionClass: { type: String, default: '' },
+    menuClass: { type: String, default: "" },
+    optionClass: { type: String, default: "" },
     showSearch: { type: Boolean, default: true },
-    initialOptions: { type: Array, default: () => [] }
+    initialOptions: { type: Array, default: () => [] },
   },
-  emits: ['update:modelValue', 'update:search', 'close'],
+  emits: ["update:modelValue", "update:search", "close"],
   setup(props, { emit, expose }) {
     const open = ref(false)
-    const search = ref('')
+    const search = ref("")
     const setSearch = (val) => {
       search.value = val
     }
-    const options = ref(Array.isArray(props.initialOptions) ? [...props.initialOptions] : [])
+    const options = ref(
+      Array.isArray(props.initialOptions) ? [...props.initialOptions] : []
+    )
     const loaded = ref(false)
     const loading = ref(false)
     const wrapper = ref(null)
 
     const toggle = () => {
       open.value = !open.value
-      if (!open.value) emit('close')
+      if (!open.value) emit("close")
     }
 
     const close = () => {
       open.value = false
-      emit('close')
+      emit("close")
     }
 
-    const select = id => {
+    const select = (id) => {
       if (props.multiple) {
         const arr = Array.isArray(props.modelValue) ? [...props.modelValue] : []
         const idx = arr.indexOf(id)
@@ -135,28 +197,23 @@ export default {
         } else {
           arr.push(id)
         }
-        emit('update:modelValue', arr)
+        emit("update:modelValue", arr)
       } else {
-        emit('update:modelValue', id)
+        emit("update:modelValue", id)
         close()
       }
-      search.value = ''
+      search.value = ""
     }
 
     const filteredOptions = computed(() => {
       if (props.remote) return options.value
       if (!search.value) return options.value
-      return options.value.filter(o => o.name.toLowerCase().includes(search.value.toLowerCase()))
+      return options.value.filter((o) =>
+        o.name.toLowerCase().includes(search.value.toLowerCase())
+      )
     })
 
-    const clickOutside = e => {
-      if (isMobile) return
-      if (wrapper.value && !wrapper.value.contains(e.target)) {
-        close()
-      }
-    }
-
-    const loadOptions = async (kw = '') => {
+    const loadOptions = async (kw = "") => {
       if (!props.remote && loaded.value) return
       try {
         loading.value = true
@@ -172,14 +229,14 @@ export default {
 
     watch(
       () => props.initialOptions,
-      val => {
+      (val) => {
         if (Array.isArray(val)) {
           options.value = [...val]
         }
       }
     )
 
-    watch(open, async val => {
+    watch(open, async (val) => {
       if (val) {
         if (props.remote) {
           await loadOptions(search.value)
@@ -189,39 +246,36 @@ export default {
       }
     })
 
-    watch(search, async val => {
-      emit('update:search', val)
+    watch(search, async (val) => {
+      emit("update:search", val)
       if (props.remote && open.value) {
         await loadOptions(val)
       }
     })
 
     onMounted(() => {
-      document.addEventListener('click', clickOutside)
       if (!props.remote) {
         loadOptions()
       }
     })
 
-    onBeforeUnmount(() => {
-      document.removeEventListener('click', clickOutside)
-    })
-
     const selectedLabels = computed(() => {
       if (props.multiple) {
-        return options.value.filter(o => (props.modelValue || []).includes(o.id))
+        return options.value.filter((o) =>
+          (props.modelValue || []).includes(o.id)
+        )
       }
-      const match = options.value.find(o => o.id === props.modelValue)
+      const match = options.value.find((o) => o.id === props.modelValue)
       return match ? [match] : []
     })
 
     const isSelected = (id) => {
-      return selectedLabels.value.some(label => label.id === id)
+      return selectedLabels.value.some((label) => label.id === id)
     }
 
-    const isImageIcon = icon => {
+    const isImageIcon = (icon) => {
       if (!icon) return false
-      return /^https?:\/\//.test(icon) || icon.startsWith('/')
+      return /^https?:\/\//.test(icon) || icon.startsWith("/")
     }
 
     expose({ toggle, close })
@@ -239,9 +293,9 @@ export default {
       loading,
       isImageIcon,
       setSearch,
-      isMobile
+      isMobile,
     }
-  }
+  },
 }
 </script>
 
diff --git a/frontend/src/components/PostEditor.vue b/frontend/src/components/PostEditor.vue
index 645f5ff4e..63644222d 100644
--- a/frontend/src/components/PostEditor.vue
+++ b/frontend/src/components/PostEditor.vue
@@ -19,10 +19,9 @@ import { clearVditorStorage } from '../utils/clearVditorStorage'
 import { hatch } from 'ldrs'
 hatch.register()
 
-
 export default {
   name: 'PostEditor',
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'update:loading'],
   props: {
     modelValue: {
       type: String,
@@ -43,6 +42,8 @@ export default {
   },
   setup(props, { emit }) {
     const vditorInstance = ref(null)
+    let vditorRender = false
+
     const getEditorTheme = getEditorThemeUtil
     const getPreviewTheme = getPreviewThemeUtil
     const applyTheme = () => {
@@ -54,6 +55,7 @@ export default {
     watch(
       () => props.loading,
       val => {
+        if (!vditorRender) return
         if (val) {
           vditorInstance.value.disabled()
         } else {
@@ -91,12 +93,15 @@ export default {
     )
 
     onMounted(() => {
+      emit('update:loading', true)
       vditorInstance.value = createVditor(props.editorId, {
         placeholder: '请输入正文...',
         input(value) {
           emit('update:modelValue', value)
         },
         after() {
+          vditorRender = true
+          emit('update:loading', false)
           vditorInstance.value.setValue(props.modelValue)
           if (props.loading || props.disabled) {
             vditorInstance.value.disabled()
@@ -118,8 +123,8 @@ export default {
 
 <style scoped>
 .post-editor-container {
-  border: 1px solid var(--normal-border-color);
   position: relative;
+  min-height: 200px;
 }
 
 .editor-loading-overlay {
@@ -135,4 +140,11 @@ export default {
   pointer-events: all;
   z-index: 10;
 }
+
+@media (max-width: 768px) {
+  .post-editor-container {
+    min-height: 100px;
+  }
+}
+
 </style>
diff --git a/frontend/src/components/ReactionsGroup.vue b/frontend/src/components/ReactionsGroup.vue
index be996796d..2398c22be 100644
--- a/frontend/src/components/ReactionsGroup.vue
+++ b/frontend/src/components/ReactionsGroup.vue
@@ -4,7 +4,7 @@
       <div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide"
         @mouseleave="scheduleHide">
         <template v-if="displayedReactions.length">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div>
+          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ reactionEmojiMap[r.type] }}</div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
         <div v-else class="reactions-viewer-item placeholder">
@@ -24,7 +24,7 @@
     <div v-if="panelVisible" class="reactions-panel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
       <div v-for="t in panelTypes" :key="t" class="reaction-option" @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }">
-        {{ iconMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
       </div>
     </div>
   </div>
@@ -34,6 +34,7 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
+import { reactionEmojiMap } from '../utils/reactions'
 
 let cachedTypes = null
 const fetchTypes = async () => {
@@ -54,32 +55,6 @@ const fetchTypes = async () => {
   return cachedTypes
 }
 
-const iconMap = {
-  LIKE: '❤️',
-  DISLIKE: '👎',
-  RECOMMEND: '👏',
-  ANGRY: '😡',
-  FLUSHED: '😳',
-  STAR_STRUCK: '🤩',
-  ROFL: '🤣',
-  HOLDING_BACK_TEARS: '🥹',
-  MIND_BLOWN: '🤯',
-  POOP: '💩',
-  CLOWN: '🤡',
-  SKULL: '☠️',
-  FIRE: '🔥',
-  EYES: '👀',
-  FROWN: '☹️',
-  HOT: '🥵',
-  EAGLE: '🦅',
-  SPIDER: '🕷️',
-  BAT: '🦇',
-  CHINA: '🇨🇳',
-  USA: '🇺🇸',
-  JAPAN: '🇯🇵',
-  KOREA: '🇰🇷'
-}
-
 export default {
   name: 'ReactionsGroup',
   props: {
@@ -202,7 +177,7 @@ export default {
     }
 
     return {
-      iconMap,
+      reactionEmojiMap,
       counts,
       totalCount,
       likeCount,
diff --git a/frontend/src/directives/clickOutside.js b/frontend/src/directives/clickOutside.js
new file mode 100644
index 000000000..22dae7e97
--- /dev/null
+++ b/frontend/src/directives/clickOutside.js
@@ -0,0 +1,159 @@
+/**
+ * @file clickOutsideDirective.js
+ * @description 一个用于检测元素外部点击的Vue 3自定义指令。
+ *
+ * @example
+ * // 在 main.js 中全局注册
+ * import { createApp } from 'vue'
+ * import App from './App.vue'
+ * import ClickOutside from './clickOutsideDirective.js'
+ *
+ * const app = createApp(App)
+ * app.directive('click-outside', ClickOutside)
+ * app.mount('#app')
+ *
+ * // 在组件中使用
+ * <div v-click-outside="myMethod">...</div>
+ *
+ * // 排除特定元素
+ * <div v-click-outside:[myExcludedElement]="myMethod">...</div>
+ * <div v-click-outside:[[el1, el2]]="myMethod">...</div>
+ */
+
+// 使用一个Map来存储所有指令绑定的元素及其对应的处理器
+// 键是HTMLElement，值是一个包含处理器和回调函数的对象数组
+const nodeList = new Map();
+
+// 检查是否在客户端环境，以避免在SSR（服务器端渲染）时执行
+const isClient = typeof window !== 'undefined';
+
+// 在客户端环境中，只设置一次全局的 mousedown 和 mouseup 监听器
+if (isClient) {
+  let startClick;
+
+  document.addEventListener('mousedown', (e) => (startClick = e));
+
+  document.addEventListener('mouseup', (e) => {
+    // 遍历所有注册的元素和它们的处理器
+    for (const handlers of nodeList.values()) {
+      for (const { documentHandler } of handlers) {
+        // 调用每个处理器，传入 mouseup 和 mousedown 事件
+        documentHandler(e, startClick);
+      }
+    }
+    // 完成后重置 startClick
+    startClick = undefined;
+  });
+}
+
+/**
+ * 创建一个文档事件处理器。
+ * @param {HTMLElement} el - 指令绑定的元素。
+ * @param {import('vue').DirectiveBinding} binding - 指令的绑定对象。
+ * @returns {Function} 返回一个处理函数。
+ */
+function createDocumentHandler(el, binding) {
+  let excludes = [];
+  // binding.arg 可以是一个元素或一个元素数组，用于排除不需要触发回调的点击
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg;
+  } else if (binding.arg instanceof HTMLElement) {
+    excludes.push(binding.arg);
+  }
+
+  return function (mouseup, mousedown) {
+    // 从组件实例中获取 popper 引用（如果存在），这对于处理下拉菜单、弹窗等很有用
+    const popperRef = binding.instance?.popperRef;
+    const mouseUpTarget = mouseup.target;
+    const mouseDownTarget = mousedown?.target;
+
+    // 检查各种条件，如果满足任一条件，则不执行回调
+    const isBound = !binding || !binding.instance;
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+    const isSelf = el === mouseUpTarget;
+
+    // 检查点击是否发生在任何被排除的元素内部
+    const isTargetExcluded =
+      (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget));
+
+    // 检查点击是否发生在关联的 popper 元素内部
+    const isContainedByPopper =
+      popperRef &&
+      (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
+
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return;
+    }
+
+    // 如果所有检查都通过，说明点击发生在外部，执行指令传入的回调函数
+    binding.value(mouseup, mousedown);
+  };
+}
+
+const ClickOutside = {
+  /**
+   * 在绑定元素的 attribute 或事件监听器被应用之前调用。
+   * @param {HTMLElement} el
+   * @param {import('vue').DirectiveBinding} binding
+   */
+  beforeMount(el, binding) {
+    if (!nodeList.has(el)) {
+      nodeList.set(el, []);
+    }
+
+    nodeList.get(el).push({
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+
+  /**
+   * 在包含组件的 VNode 及其子组件的 VNode 更新后调用。
+   * @param {HTMLElement} el
+   * @param {import('vue').DirectiveBinding} binding
+   */
+  updated(el, binding) {
+    if (!nodeList.has(el)) {
+      nodeList.set(el, []);
+    }
+
+    const handlers = nodeList.get(el);
+    // 查找旧的回调函数对应的处理器
+    const oldHandlerIndex = handlers.findIndex(
+      (item) => item.bindingFn === binding.oldValue
+    );
+
+    const newHandler = {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    };
+
+    if (oldHandlerIndex >= 0) {
+      // 如果找到了，就替换成新的处理器
+      handlers.splice(oldHandlerIndex, 1, newHandler);
+    } else {
+      // 否则，直接添加新的处理器
+      handlers.push(newHandler);
+    }
+  },
+
+  /**
+   * 在绑定元素的父组件卸载后调用。
+   * @param {HTMLElement} el
+   */
+  unmounted(el) {
+    // 当元素卸载时，从Map中移除它，以进行垃圾回收并防止内存泄漏
+    nodeList.delete(el);
+  },
+};
+
+export default ClickOutside;
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 6fe6cf3a4..cb0db8df5 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -12,6 +12,8 @@ import { checkToken, clearToken, isLogin } from './utils/auth'
 import { loginWithGoogle } from './utils/google'
 import { initTheme } from './utils/theme'
 import { clearVditorStorage } from './utils/clearVditorStorage'
+import ClickOutside from './directives/clickOutside' // 确保路径正确
+
 
 // 采用本地开发环境
 // export const API_DOMAIN = 'http://127.0.0.1'
@@ -38,16 +40,18 @@ clearVditorStorage()
 const app = createApp(App)
 app.use(router)
 app.use(
-  Toast, 
-  { 
+  Toast,
+  {
     position: POSITION.TOP_RIGHT,
     containerClassName: "open-isle-toast-style-v1",
     transition: "Vue-Toastification__fade",
     // closeButton: false,
     timeout: 2000,
-  }, 
+  },
 )
 
+app.directive('click-outside', ClickOutside)
+
 app.mount('#app')
 
 checkToken().then(valid => {
diff --git a/frontend/src/utils/markdown.js b/frontend/src/utils/markdown.js
index a3ed32ec7..dbcd352b7 100644
--- a/frontend/src/utils/markdown.js
+++ b/frontend/src/utils/markdown.js
@@ -2,6 +2,7 @@ import MarkdownIt from 'markdown-it'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/github.css'
 import { toast } from '../main'
+import { tiebaEmoji } from './tiebaEmoji'
 
 function mentionPlugin(md) {
   const mentionReg = /^@\[([^\]]+)\]/
@@ -27,6 +28,28 @@ function mentionPlugin(md) {
   md.inline.ruler.before('emphasis', 'mention', mention)
 }
 
+function tiebaEmojiPlugin(md) {
+  md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
+    const name = tokens[idx].content
+    const file = tiebaEmoji[name]
+    return `<img class="emoji" src="${file}" alt="${name}">`
+  }
+  md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
+    const pos = state.pos
+    if (state.src.charCodeAt(pos) !== 0x3a) return false
+    const match = state.src.slice(pos).match(/^:tieba(\d+):/)
+    if (!match) return false
+    const key = `tieba${match[1]}`
+    if (!tiebaEmoji[key]) return false
+    if (!silent) {
+      const token = state.push('tieba-emoji', '', 0)
+      token.content = key
+    }
+    state.pos += match[0].length
+    return true
+  })
+}
+
 const md = new MarkdownIt({
   html: false,
   linkify: true,
@@ -43,6 +66,7 @@ const md = new MarkdownIt({
 })
 
 md.use(mentionPlugin)
+md.use(tiebaEmojiPlugin)
 
 export function renderMarkdown(text) {
   return md.render(text || '')
diff --git a/frontend/src/utils/reactions.js b/frontend/src/utils/reactions.js
new file mode 100644
index 000000000..7fa967de7
--- /dev/null
+++ b/frontend/src/utils/reactions.js
@@ -0,0 +1,25 @@
+export const reactionEmojiMap = {
+  LIKE: '❤️',
+  DISLIKE: '👎',
+  RECOMMEND: '👏',
+  ANGRY: '😡',
+  FLUSHED: '😳',
+  STAR_STRUCK: '🤩',
+  ROFL: '🤣',
+  HOLDING_BACK_TEARS: '🥹',
+  MIND_BLOWN: '🤯',
+  POOP: '💩',
+  CLOWN: '🤡',
+  SKULL: '☠️',
+  FIRE: '🔥',
+  EYES: '👀',
+  FROWN: '☹️',
+  HOT: '🥵',
+  EAGLE: '🦅',
+  SPIDER: '🕷️',
+  BAT: '🦇',
+  CHINA: '🇨🇳',
+  USA: '🇺🇸',
+  JAPAN: '🇯🇵',
+  KOREA: '🇰🇷'
+}
diff --git a/frontend/src/utils/tiebaEmoji.js b/frontend/src/utils/tiebaEmoji.js
new file mode 100644
index 000000000..ce91ea0ff
--- /dev/null
+++ b/frontend/src/utils/tiebaEmoji.js
@@ -0,0 +1,11 @@
+export const TIEBA_EMOJI_CDN = 'https://cdn.jsdelivr.net/gh/microlong666/tieba_mobile_emotions@master/'
+// export const TIEBA_EMOJI_CDN = 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor/dist/images/emoji/'
+
+export const tiebaEmoji = (() => {
+  const map = { tieba1: TIEBA_EMOJI_CDN + 'image_emoticon.png' }
+  for (let i = 2; i <= 124; i++) {
+    if (i > 50 && i < 62) continue
+    map[`tieba${i}`] = TIEBA_EMOJI_CDN + `image_emoticon${i}.png`
+  }
+  return map
+})()
diff --git a/frontend/src/utils/vditor.js b/frontend/src/utils/vditor.js
index 2e9a2628c..93564b7d0 100644
--- a/frontend/src/utils/vditor.js
+++ b/frontend/src/utils/vditor.js
@@ -3,6 +3,7 @@ import 'vditor/dist/index.css'
 import { API_BASE_URL } from '../main'
 import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
+import { tiebaEmoji } from './tiebaEmoji'
 
 export function getEditorTheme() {
   return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
@@ -37,13 +38,38 @@ export function createVditor(editorId, options = {}) {
     return searchUsers(value)
   }
 
+  const isMobile = window.innerWidth <= 768
+  const toolbar = isMobile
+    ? ['emoji', 'upload']
+    : [
+        'emoji',
+        'bold',
+        'italic',
+        'strike',
+        '|',
+        'list',
+        'line',
+        'quote',
+        'code',
+        'inline-code',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'link',
+        'upload'
+      ]
+
   let vditor
   vditor = new Vditor(editorId, {
     placeholder,
     height: 'auto',
     theme: getEditorTheme(),
-    preview: Object.assign({ theme: { current: getPreviewTheme() } }, preview),
+    preview: Object.assign({
+      theme: { current: getPreviewTheme() },
+    }, preview),
     hint: {
+      emoji: tiebaEmoji,
       extend: [
         {
           key: '@',
@@ -58,24 +84,7 @@ export function createVditor(editorId, options = {}) {
       ],
     },
     cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',
-    toolbar: [
-      'emoji',
-      'bold',
-      'italic',
-      'strike',
-      '|',
-      'list',
-      'line',
-      'quote',
-      'code',
-      'inline-code',
-      '|',
-      'undo',
-      'redo',
-      '|',
-      'link',
-      'upload'
-    ],
+    toolbar,
     upload: {
       accept: 'image/*,video/*',
       multiple: false,
diff --git a/frontend/src/views/AboutPageView.vue b/frontend/src/views/AboutPageView.vue
index f36ba3489..669218787 100644
--- a/frontend/src/views/AboutPageView.vue
+++ b/frontend/src/views/AboutPageView.vue
@@ -75,13 +75,11 @@ export default {
   max-width: var(--page-max-width);
   background-color: var(--background-color);
   margin: 0 auto;
-  height: 100%;
-  overflow-y: auto;
 }
 
 .about-tabs {
   position: sticky;
-  top: 1px;
+  top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;
diff --git a/frontend/src/views/HomePageView.vue b/frontend/src/views/HomePageView.vue
index bbae20c0b..bd5a3ab13 100644
--- a/frontend/src/views/HomePageView.vue
+++ b/frontend/src/views/HomePageView.vue
@@ -433,7 +433,7 @@ export default {
 
 .topic-container {
   position: sticky;
-  top: 1px;
+  top: calc(var(--header-height) + 1px);
   z-index: 10;
   background-color: var(--background-color-blur);
   display: flex;
diff --git a/frontend/src/views/MessagePageView.vue b/frontend/src/views/MessagePageView.vue
index 03b79d59f..af15a4c2d 100644
--- a/frontend/src/views/MessagePageView.vue
+++ b/frontend/src/views/MessagePageView.vue
@@ -299,11 +299,12 @@ import BaseTimeline from '../components/BaseTimeline.vue'
 import BasePlaceholder from '../components/BasePlaceholder.vue'
 import NotificationContainer from '../components/NotificationContainer.vue'
 import { getToken, authState } from '../utils/auth'
-import { markNotificationsRead, fetchUnreadCount } from '../utils/notification'
+import { markNotificationsRead, fetchUnreadCount, notificationState } from '../utils/notification'
 import { toast } from '../main'
 import { stripMarkdownLength } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import { hatch } from 'ldrs'
+import { reactionEmojiMap } from '../utils/reactions'
 hatch.register()
 
 export default {
@@ -322,28 +323,42 @@ export default {
 
     const markRead = async id => {
       if (!id) return
+      const n = notifications.value.find(n => n.id === id)
+      if (!n || n.read) return
+      n.read = true
+      if (notificationState.unreadCount > 0) notificationState.unreadCount--
       const ok = await markNotificationsRead([id])
-      if (ok) {
-        const n = notifications.value.find(n => n.id === id)
-        if (n) n.read = true
-        await fetchUnreadCount()
+      if (!ok) {
+        n.read = false
+        notificationState.unreadCount++
+      } else {
+        fetchUnreadCount()
       }
     }
 
     const markAllRead = async () => {
       // 除了 REGISTER_REQUEST 类型消息
-      const idsToMark = notifications.value.filter(n => n.type !== 'REGISTER_REQUEST').map(n => n.id)
+      const idsToMark = notifications.value
+        .filter(n => n.type !== 'REGISTER_REQUEST' && !n.read)
+        .map(n => n.id)
+      if (idsToMark.length === 0) return
+      notifications.value.forEach(n => {
+        if (n.type !== 'REGISTER_REQUEST') n.read = true
+      })
+      notificationState.unreadCount = notifications.value.filter(n => !n.read).length
       const ok = await markNotificationsRead(idsToMark)
-      if (ok) {
+      if (!ok) {
         notifications.value.forEach(n => {
-          if (n.type !== 'REGISTER_REQUEST') n.read = true
+          if (idsToMark.includes(n.id)) n.read = false
         })
         await fetchUnreadCount()
-        if (authState.role === 'ADMIN') {
-          toast.success('已读所有消息（注册请求除外）')
-        } else {
-          toast.success('已读所有消息')
-        }
+        return
+      }
+      fetchUnreadCount()
+      if (authState.role === 'ADMIN') {
+        toast.success('已读所有消息（注册请求除外）')
+      } else {
+        toast.success('已读所有消息')
       }
     }
 
@@ -364,32 +379,6 @@ export default {
       MENTION: 'fas fa-at'
     }
 
-    const reactionEmojiMap = {
-      LIKE: '❤️',
-      DISLIKE: '👎',
-      RECOMMEND: '👏',
-      ANGRY: '😡',
-      FLUSHED: '😳',
-      STAR_STRUCK: '🤩',
-      ROFL: '🤣',
-      HOLDING_BACK_TEARS: '🥹',
-      MIND_BLOWN: '🤯',
-      POOP: '💩',
-      CLOWN: '🤡',
-      SKULL: '☠️',
-      FIRE: '🔥',
-      EYES: '👀',
-      FROWN: '☹️',
-      HOT: '🥵',
-      EAGLE: '🦅',
-      SPIDER: '🕷️',
-      BAT: '🦇',
-      CHINA: '🇨🇳',
-      USA: '🇺🇸',
-      JAPAN: '🇯🇵',
-      KOREA: '🇰🇷'
-    }
-
     const fetchNotifications = async () => {
       try {
         const token = getToken()
@@ -628,6 +617,7 @@ export default {
 
 .message-page {
   background-color: var(--background-color);
+  overflow-x: hidden;
 }
 
 .message-page-header {
@@ -769,9 +759,5 @@ export default {
   .has_read_button {
     display: none;
   }
-
-  .message-page {
-    overflow-x: hidden;
-  }
 }
 </style>
diff --git a/frontend/src/views/NewPostPageView.vue b/frontend/src/views/NewPostPageView.vue
index 0f4fe3a92..9eec8eda2 100644
--- a/frontend/src/views/NewPostPageView.vue
+++ b/frontend/src/views/NewPostPageView.vue
@@ -3,8 +3,8 @@
     <div class="new-post-form">
       <input class="post-title-input" v-model="title" placeholder="标题"/>
       <div class="post-editor-container">
-        <PostEditor v-model="content" :loading="isAiLoading" :disabled="!isLogin"/>
-        <LoginOverlay v-if="!isLogin"/>
+        <PostEditor v-model="content" v-model:loading="isAiLoading" :disabled="!isLogin" />
+        <LoginOverlay v-if="!isLogin" />
       </div>
       <div class="post-options">
         <div class="post-options-left">
@@ -282,10 +282,8 @@ export default {
   display: flex;
   justify-content: center;
   background-color: var(--background-color);
-  height: 100%;
   padding-right: 20px;
   padding-left: 20px;
-  overflow-y: auto;
 }
 
 .new-post-form {
diff --git a/frontend/src/views/PostPageView.vue b/frontend/src/views/PostPageView.vue
index 8a247d6ef..9cba854f6 100644
--- a/frontend/src/views/PostPageView.vue
+++ b/frontend/src/views/PostPageView.vue
@@ -375,7 +375,7 @@ export default {
       }
     }
 
-    const postComment = async (text) => {
+    const postComment = async (text, clear) => {
       if (!text.trim()) return
       console.debug('Posting comment', {postId, text})
       isWaitingPostingComment.value = true
@@ -396,6 +396,7 @@ export default {
           const data = await res.json()
           console.debug('Post comment response data', data)
           await fetchComments()
+          clear()
 
           const reward = Math.max(0, Number(data?.reward) || 0)        // 经验值
           const points = Math.max(0, Number(data?.pointReward) || 0)   // 积分值
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index 4470100dd..672e8d463 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -497,9 +497,6 @@ export default {
 
 .profile-page {
   background-color: var(--background-color);
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden; 
 }
 
 .profile-page-header {
@@ -639,7 +636,7 @@ export default {
 
 .profile-tabs {
   position: sticky;
-  top: 1px;
+  top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;