diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 8e05e5d80..a07337b1d 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -230,7 +230,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRoute } from 'vue-router'
@@ -243,7 +243,7 @@ import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
 import { getMedalTitle } from '~/utils/medal'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { getToken, authState } from '~/utils/auth'
 import TimeManager from '~/utils/time'
 import { useRouter } from 'vue-router'
@@ -251,609 +251,535 @@ import { useIsMobile } from '~/utils/screen'
 import Dropdown from '~/components/Dropdown.vue'
 import { ClientOnly } from '#components'
 
-export default {
-  name: 'PostPageView',
-  components: {
-    CommentItem,
-    CommentEditor,
-    BaseTimeline,
-    ArticleTags,
-    ArticleCategory,
-    ReactionsGroup,
-    DropdownMenu,
-    VueEasyLightbox,
-    Dropdown,
-    ClientOnly,
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
+
+const route = useRoute()
+const postId = route.params.id
+const router = useRouter()
+
+const title = ref('')
+const author = ref('')
+const postContent = ref('')
+const category = ref('')
+const tags = ref([])
+const postReactions = ref([])
+const comments = ref([])
+const status = ref('PUBLISHED')
+const pinnedAt = ref(null)
+const isWaitingFetchingPost = ref(false)
+const isWaitingPostingComment = ref(false)
+const postTime = ref('')
+const postItems = ref([])
+const mainContainer = ref(null)
+const currentIndex = ref(1)
+const subscribed = ref(false)
+const commentSort = ref('NEWEST')
+const isFetchingComments = ref(false)
+const isMobile = useIsMobile()
+
+const headerHeight = process.client
+  ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 0
+  : 0
+
+useHead(() => ({
+  title: title.value ? `OpenIsle - ${title.value}` : 'OpenIsle',
+  meta: [
+    {
+      name: 'description',
+      content: stripMarkdownLength(postContent.value, 400),
+    },
+  ],
+}))
+
+if (process.client) {
+  onBeforeUnmount(() => {
+    window.removeEventListener('scroll', updateCurrentIndex)
+    if (countdownTimer) clearInterval(countdownTimer)
+  })
+}
+
+const lightboxVisible = ref(false)
+const lightboxIndex = ref(0)
+const lightboxImgs = ref([])
+const loggedIn = computed(() => authState.loggedIn)
+const isAdmin = computed(() => authState.role === 'ADMIN')
+const isAuthor = computed(() => authState.username === author.value.username)
+const lottery = ref(null)
+const countdown = ref('00:00:00')
+let countdownTimer = null
+const lotteryParticipants = computed(() => lottery.value?.participants || [])
+const lotteryWinners = computed(() => lottery.value?.winners || [])
+const lotteryEnded = computed(() => {
+  if (!lottery.value || !lottery.value.endTime) return false
+  return new Date(lottery.value.endTime).getTime() <= Date.now()
+})
+const hasJoined = computed(() => {
+  if (!loggedIn.value) return false
+  return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
+})
+const updateCountdown = () => {
+  if (!lottery.value || !lottery.value.endTime) {
+    countdown.value = '00:00:00'
+    return
+  }
+  const diff = new Date(lottery.value.endTime).getTime() - Date.now()
+  if (diff <= 0) {
+    countdown.value = '00:00:00'
+    if (countdownTimer) {
+      clearInterval(countdownTimer)
+      countdownTimer = null
+    }
+    return
+  }
+  const h = String(Math.floor(diff / 3600000)).padStart(2, '0')
+  const m = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
+  const s = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
+  countdown.value = `${h}:${m}:${s}`
+}
+const startCountdown = () => {
+  if (!process.client) return
+  if (countdownTimer) clearInterval(countdownTimer)
+  updateCountdown()
+  countdownTimer = setInterval(updateCountdown, 1000)
+}
+const gotoUser = (id) => router.push(`/users/${id}`)
+const articleMenuItems = computed(() => {
+  const items = []
+  if (isAuthor.value || isAdmin.value) {
+    items.push({ text: '编辑文章', onClick: () => editPost() })
+    items.push({ text: '删除文章', color: 'red', onClick: () => deletePost() })
+  }
+  if (isAdmin.value) {
+    if (pinnedAt.value) {
+      items.push({ text: '取消置顶', onClick: () => unpinPost() })
+    } else {
+      items.push({ text: '置顶', onClick: () => pinPost() })
+    }
+  }
+  if (isAdmin.value && status.value === 'PENDING') {
+    items.push({ text: '通过审核', onClick: () => approvePost() })
+    items.push({ text: '驳回', color: 'red', onClick: () => rejectPost() })
+  }
+  return items
+})
+
+const gatherPostItems = () => {
+  const items = []
+  if (mainContainer.value) {
+    const main = mainContainer.value.querySelector('.info-content-container')
+    if (main) items.push({ el: main, top: getTop(main) })
+
+    for (const c of comments.value) {
+      const el = document.getElementById('comment-' + c.id)
+      if (el) {
+        items.push({ el, top: getTop(el) })
+      }
+    }
+    // 根据 top 排序，防止评论异步插入后顺序错乱
+    items.sort((a, b) => a.top - b.top)
+    postItems.value = items.map((i) => i.el)
+  }
+}
+
+const mapComment = (c, parentUserName = '', level = 0) => ({
+  id: c.id,
+  userName: c.author.username,
+  medal: c.author.displayMedal,
+  userId: c.author.id,
+  time: TimeManager.format(c.createdAt),
+  avatar: c.author.avatar,
+  text: c.content,
+  reactions: c.reactions || [],
+  reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
+  openReplies: level === 0,
+  src: c.author.avatar,
+  iconClick: () => router.push(`/users/${c.author.id}`),
+  parentUserName: parentUserName,
+})
+
+const getTop = (el) => {
+  return el.getBoundingClientRect().top + window.scrollY
+}
+
+const findCommentPath = (id, list) => {
+  for (const item of list) {
+    if (item.id === Number(id) || item.id === id) {
+      return [item]
+    }
+    if (item.reply && item.reply.length) {
+      const sub = findCommentPath(id, item.reply)
+      if (sub) return [item, ...sub]
+    }
+  }
+  return null
+}
+
+const expandCommentPath = (id) => {
+  const path = findCommentPath(id, comments.value)
+  if (!path) return
+  for (let i = 0; i < path.length - 1; i++) {
+    path[i].openReplies = true
+  }
+}
+
+const removeCommentFromList = (id, list) => {
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+    if (item.id === id) {
+      list.splice(i, 1)
+      return true
+    }
+    if (item.reply && item.reply.length) {
+      if (removeCommentFromList(id, item.reply)) return true
+    }
+  }
+  return false
+}
+
+const handleContentClick = (e) => {
+  handleMarkdownClick(e)
+  if (e.target.tagName === 'IMG') {
+    const container = e.target.parentNode
+    const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
+    lightboxImgs.value = imgs
+    lightboxIndex.value = imgs.indexOf(e.target.src)
+    lightboxVisible.value = true
+  }
+}
+
+const onCommentDeleted = (id) => {
+  removeCommentFromList(Number(id), comments.value)
+  fetchComments()
+}
+
+const fetchPost = async () => {
+  try {
+    isWaitingFetchingPost.value = true
+    const token = getToken()
+    const res = await fetch(`${API_BASE_URL}/api/posts/${postId}`, {
+      headers: { Authorization: token ? `Bearer ${token}` : '' },
+    })
+    isWaitingFetchingPost.value = false
+    if (!res.ok) {
+      if (res.status === 404 && process.client) {
+        router.replace('/404')
+      }
+      return
+    }
+    const data = await res.json()
+    postContent.value = data.content
+    author.value = data.author
+    title.value = data.title
+    category.value = data.category
+    tags.value = data.tags || []
+    postReactions.value = data.reactions || []
+    subscribed.value = !!data.subscribed
+    status.value = data.status
+    pinnedAt.value = data.pinnedAt
+    postTime.value = TimeManager.format(data.createdAt)
+    lottery.value = data.lottery || null
+    if (lottery.value && lottery.value.endTime) startCountdown()
+    await nextTick()
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+const totalPosts = computed(() => comments.value.length + 1)
+const lastReplyTime = computed(() =>
+  comments.value.length ? comments.value[comments.value.length - 1].time : postTime.value,
+)
+const firstReplyTime = computed(() =>
+  comments.value.length ? comments.value[0].time : postTime.value,
+)
+const scrollerTopTime = computed(() =>
+  commentSort.value === 'OLDEST' ? postTime.value : firstReplyTime.value,
+)
+
+watch(
+  () => comments.value.length,
+  async () => {
+    await nextTick()
+    gatherPostItems()
+    updateCurrentIndex()
   },
-  async setup() {
-    const route = useRoute()
-    const postId = route.params.id
-    const router = useRouter()
+)
 
-    const title = ref('')
-    const author = ref('')
-    const postContent = ref('')
-    const category = ref('')
-    const tags = ref([])
-    const postReactions = ref([])
-    const comments = ref([])
-    const status = ref('PUBLISHED')
-    const pinnedAt = ref(null)
-    const isWaitingFetchingPost = ref(false)
-    const isWaitingPostingComment = ref(false)
-    const postTime = ref('')
-    const postItems = ref([])
-    const mainContainer = ref(null)
-    const currentIndex = ref(1)
-    const subscribed = ref(false)
-    const commentSort = ref('NEWEST')
-    const isFetchingComments = ref(false)
-    const isMobile = useIsMobile()
+const updateCurrentIndex = () => {
+  const scrollTop = window.scrollY
 
-    const headerHeight = process.client
-      ? parseFloat(
-          getComputedStyle(document.documentElement).getPropertyValue('--header-height'),
-        ) || 0
-      : 0
+  for (let i = 0; i < postItems.value.length; i++) {
+    const el = postItems.value[i]
+    const top = getTop(el)
+    const bottom = top + el.offsetHeight
 
-    useHead(() => ({
-      title: title.value ? `OpenIsle - ${title.value}` : 'OpenIsle',
-      meta: [
-        {
-          name: 'description',
-          content: stripMarkdownLength(postContent.value, 400),
-        },
-      ],
-    }))
-
-    if (process.client) {
-      onBeforeUnmount(() => {
-        window.removeEventListener('scroll', updateCurrentIndex)
-        if (countdownTimer) clearInterval(countdownTimer)
-      })
+    if (bottom > scrollTop) {
+      currentIndex.value = i + 1
+      break
     }
+  }
+}
 
-    const lightboxVisible = ref(false)
-    const lightboxIndex = ref(0)
-    const lightboxImgs = ref([])
-    const loggedIn = computed(() => authState.loggedIn)
-    const isAdmin = computed(() => authState.role === 'ADMIN')
-    const isAuthor = computed(() => authState.username === author.value.username)
-    const lottery = ref(null)
-    const countdown = ref('00:00:00')
-    let countdownTimer = null
-    const lotteryParticipants = computed(() => lottery.value?.participants || [])
-    const lotteryWinners = computed(() => lottery.value?.winners || [])
-    const lotteryEnded = computed(() => {
-      if (!lottery.value || !lottery.value.endTime) return false
-      return new Date(lottery.value.endTime).getTime() <= Date.now()
+const onSliderInput = (e) => {
+  const index = Number(e.target.value)
+  currentIndex.value = index
+  const target = postItems.value[index - 1]
+  if (target) {
+    const top = getTop(target) - headerHeight - 20 // 20 for beauty
+    window.scrollTo({ top, behavior: 'auto' })
+  }
+}
+
+const postComment = async (parentUserName, text, clear) => {
+  if (!text.trim()) return
+  console.debug('Posting comment', { postId, text })
+  isWaitingPostingComment.value = true
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    isWaitingPostingComment.value = false
+    return
+  }
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/comments`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      body: JSON.stringify({ content: text }),
     })
-    const hasJoined = computed(() => {
-      if (!loggedIn.value) return false
-      return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
-    })
-    const updateCountdown = () => {
-      if (!lottery.value || !lottery.value.endTime) {
-        countdown.value = '00:00:00'
-        return
+    console.debug('Post comment response status', res.status)
+    if (res.ok) {
+      const data = await res.json()
+      console.debug('Post comment response data', data)
+      await fetchComments()
+      clear()
+      if (data.reward && data.reward > 0) {
+        toast.success(`评论成功，获得 ${data.reward} 经验值`)
+      } else {
+        toast.success('评论成功')
       }
-      const diff = new Date(lottery.value.endTime).getTime() - Date.now()
-      if (diff <= 0) {
-        countdown.value = '00:00:00'
-        if (countdownTimer) {
-          clearInterval(countdownTimer)
-          countdownTimer = null
-        }
-        return
-      }
-      const h = String(Math.floor(diff / 3600000)).padStart(2, '0')
-      const m = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
-      const s = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
-      countdown.value = `${h}:${m}:${s}`
+    } else if (res.status === 429) {
+      toast.error('评论过于频繁，请稍后再试')
+    } else {
+      toast.error(`评论失败: ${res.status} ${res.statusText}`)
     }
-    const startCountdown = () => {
-      if (!process.client) return
-      if (countdownTimer) clearInterval(countdownTimer)
-      updateCountdown()
-      countdownTimer = setInterval(updateCountdown, 1000)
-    }
-    const gotoUser = (id) => router.push(`/users/${id}`)
-    const articleMenuItems = computed(() => {
-      const items = []
-      if (isAuthor.value || isAdmin.value) {
-        items.push({ text: '编辑文章', onClick: () => editPost() })
-        items.push({ text: '删除文章', color: 'red', onClick: () => deletePost() })
-      }
-      if (isAdmin.value) {
-        if (pinnedAt.value) {
-          items.push({ text: '取消置顶', onClick: () => unpinPost() })
-        } else {
-          items.push({ text: '置顶', onClick: () => pinPost() })
-        }
-      }
-      if (isAdmin.value && status.value === 'PENDING') {
-        items.push({ text: '通过审核', onClick: () => approvePost() })
-        items.push({ text: '驳回', color: 'red', onClick: () => rejectPost() })
-      }
-      return items
-    })
+  } catch (e) {
+    console.debug('Post comment error', e)
+    toast.error(`评论失败: ${e.message}`)
+  } finally {
+    isWaitingPostingComment.value = false
+  }
+}
 
-    const gatherPostItems = () => {
-      const items = []
-      if (mainContainer.value) {
-        const main = mainContainer.value.querySelector('.info-content-container')
-        if (main) items.push({ el: main, top: getTop(main) })
+const copyPostLink = () => {
+  navigator.clipboard.writeText(location.href.split('#')[0]).then(() => {
+    toast.success('已复制')
+  })
+}
 
-        for (const c of comments.value) {
-          const el = document.getElementById('comment-' + c.id)
-          if (el) {
-            items.push({ el, top: getTop(el) })
-          }
-        }
-        // 根据 top 排序，防止评论异步插入后顺序错乱
-        items.sort((a, b) => a.top - b.top)
-        postItems.value = items.map((i) => i.el)
-      }
-    }
+const subscribePost = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/subscriptions/posts/${postId}`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    subscribed.value = true
+    toast.success('已订阅')
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const mapComment = (c, parentUserName = '', level = 0) => ({
-      id: c.id,
-      userName: c.author.username,
-      medal: c.author.displayMedal,
-      userId: c.author.id,
-      time: TimeManager.format(c.createdAt),
-      avatar: c.author.avatar,
-      text: c.content,
-      reactions: c.reactions || [],
-      reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
-      openReplies: level === 0,
-      src: c.author.avatar,
-      iconClick: () => router.push(`/users/${c.author.id}`),
-      parentUserName: parentUserName,
-    })
+const approvePost = async () => {
+  const token = getToken()
+  if (!token) return
+  const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/approve`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    status.value = 'PUBLISHED'
+    toast.success('已通过审核')
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const getTop = (el) => {
-      return el.getBoundingClientRect().top + window.scrollY
-    }
+const pinPost = async () => {
+  const token = getToken()
+  if (!token) return
+  const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/pin`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    pinnedAt.value = new Date().toISOString()
+    toast.success('已置顶')
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const findCommentPath = (id, list) => {
-      for (const item of list) {
-        if (item.id === Number(id) || item.id === id) {
-          return [item]
-        }
-        if (item.reply && item.reply.length) {
-          const sub = findCommentPath(id, item.reply)
-          if (sub) return [item, ...sub]
-        }
-      }
-      return null
-    }
+const unpinPost = async () => {
+  const token = getToken()
+  if (!token) return
+  const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/unpin`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    pinnedAt.value = null
+    toast.success('已取消置顶')
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const expandCommentPath = (id) => {
-      const path = findCommentPath(id, comments.value)
-      if (!path) return
-      for (let i = 0; i < path.length - 1; i++) {
-        path[i].openReplies = true
-      }
-    }
+const editPost = () => {
+  router.push(`/posts/${postId}/edit`)
+}
 
-    const removeCommentFromList = (id, list) => {
-      for (let i = 0; i < list.length; i++) {
-        const item = list[i]
-        if (item.id === id) {
-          list.splice(i, 1)
-          return true
-        }
-        if (item.reply && item.reply.length) {
-          if (removeCommentFromList(id, item.reply)) return true
-        }
-      }
-      return false
-    }
+const deletePost = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/posts/${postId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    toast.success('已删除')
+    router.push('/')
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const handleContentClick = (e) => {
-      handleMarkdownClick(e)
-      if (e.target.tagName === 'IMG') {
-        const container = e.target.parentNode
-        const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
-        lightboxImgs.value = imgs
-        lightboxIndex.value = imgs.indexOf(e.target.src)
-        lightboxVisible.value = true
-      }
-    }
+const rejectPost = async () => {
+  const token = getToken()
+  if (!token) return
+  const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/reject`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    status.value = 'REJECTED'
+    toast.success('已驳回')
+  } else {
+    toast.error('操作失败')
+  }
+}
+const unsubscribePost = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
 
-    const onCommentDeleted = (id) => {
-      removeCommentFromList(Number(id), comments.value)
-      fetchComments()
-    }
+  const res = await fetch(`${API_BASE_URL}/api/subscriptions/posts/${postId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    subscribed.value = false
+    toast.success('已取消订阅')
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const fetchPost = async () => {
-      try {
-        isWaitingFetchingPost.value = true
-        const token = getToken()
-        const res = await fetch(`${API_BASE_URL}/api/posts/${postId}`, {
-          headers: { Authorization: token ? `Bearer ${token}` : '' },
-        })
-        isWaitingFetchingPost.value = false
-        if (!res.ok) {
-          if (res.status === 404 && process.client) {
-            router.replace('/404')
-          }
-          return
-        }
-        const data = await res.json()
-        postContent.value = data.content
-        author.value = data.author
-        title.value = data.title
-        category.value = data.category
-        tags.value = data.tags || []
-        postReactions.value = data.reactions || []
-        subscribed.value = !!data.subscribed
-        status.value = data.status
-        pinnedAt.value = data.pinnedAt
-        postTime.value = TimeManager.format(data.createdAt)
-        lottery.value = data.lottery || null
-        if (lottery.value && lottery.value.endTime) startCountdown()
-        await nextTick()
-      } catch (e) {
-        console.error(e)
-      }
-    }
+const joinLottery = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/lottery/join`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    toast.success('已参与抽奖')
+    await fetchPost()
+  } else {
+    toast.error('操作失败')
+  }
+}
 
-    const totalPosts = computed(() => comments.value.length + 1)
-    const lastReplyTime = computed(() =>
-      comments.value.length ? comments.value[comments.value.length - 1].time : postTime.value,
-    )
-    const firstReplyTime = computed(() =>
-      comments.value.length ? comments.value[0].time : postTime.value,
-    )
-    const scrollerTopTime = computed(() =>
-      commentSort.value === 'OLDEST' ? postTime.value : firstReplyTime.value,
-    )
+const fetchCommentSorts = () => {
+  return Promise.resolve([
+    { id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
+    { id: 'OLDEST', name: '最旧', icon: 'fas fa-hourglass-start' },
+    // { id: 'MOST_INTERACTIONS', name: '最多互动', icon: 'fas fa-fire' }
+  ])
+}
 
-    watch(
-      () => comments.value.length,
-      async () => {
-        await nextTick()
-        gatherPostItems()
-        updateCurrentIndex()
+const fetchComments = async () => {
+  isFetchingComments.value = true
+  console.debug('Fetching comments', { postId, sort: commentSort.value })
+  try {
+    const token = getToken()
+    const res = await fetch(
+      `${API_BASE_URL}/api/posts/${postId}/comments?sort=${commentSort.value}`,
+      {
+        headers: { Authorization: token ? `Bearer ${token}` : '' },
       },
     )
-
-    const updateCurrentIndex = () => {
-      const scrollTop = window.scrollY
-
-      for (let i = 0; i < postItems.value.length; i++) {
-        const el = postItems.value[i]
-        const top = getTop(el)
-        const bottom = top + el.offsetHeight
-
-        if (bottom > scrollTop) {
-          currentIndex.value = i + 1
-          break
-        }
-      }
+    console.debug('Fetch comments response status', res.status)
+    if (res.ok) {
+      const data = await res.json()
+      console.debug('Fetched comments count', data.length)
+      comments.value = data.map(mapComment)
+      isFetchingComments.value = false
+      await nextTick()
+      gatherPostItems()
     }
-
-    const onSliderInput = (e) => {
-      const index = Number(e.target.value)
-      currentIndex.value = index
-      const target = postItems.value[index - 1]
-      if (target) {
-        const top = getTop(target) - headerHeight - 20 // 20 for beauty
-        window.scrollTo({ top, behavior: 'auto' })
-      }
-    }
-
-    const postComment = async (parentUserName, text, clear) => {
-      if (!text.trim()) return
-      console.debug('Posting comment', { postId, text })
-      isWaitingPostingComment.value = true
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        isWaitingPostingComment.value = false
-        return
-      }
-      try {
-        const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/comments`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-          body: JSON.stringify({ content: text }),
-        })
-        console.debug('Post comment response status', res.status)
-        if (res.ok) {
-          const data = await res.json()
-          console.debug('Post comment response data', data)
-          await fetchComments()
-          clear()
-          if (data.reward && data.reward > 0) {
-            toast.success(`评论成功，获得 ${data.reward} 经验值`)
-          } else {
-            toast.success('评论成功')
-          }
-        } else if (res.status === 429) {
-          toast.error('评论过于频繁，请稍后再试')
-        } else {
-          toast.error(`评论失败: ${res.status} ${res.statusText}`)
-        }
-      } catch (e) {
-        console.debug('Post comment error', e)
-        toast.error(`评论失败: ${e.message}`)
-      } finally {
-        isWaitingPostingComment.value = false
-      }
-    }
-
-    const copyPostLink = () => {
-      navigator.clipboard.writeText(location.href.split('#')[0]).then(() => {
-        toast.success('已复制')
-      })
-    }
-
-    const subscribePost = async () => {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-      const res = await fetch(`${API_BASE_URL}/api/subscriptions/posts/${postId}`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        subscribed.value = true
-        toast.success('已订阅')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const approvePost = async () => {
-      const token = getToken()
-      if (!token) return
-      const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/approve`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        status.value = 'PUBLISHED'
-        toast.success('已通过审核')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const pinPost = async () => {
-      const token = getToken()
-      if (!token) return
-      const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/pin`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        pinnedAt.value = new Date().toISOString()
-        toast.success('已置顶')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const unpinPost = async () => {
-      const token = getToken()
-      if (!token) return
-      const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/unpin`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        pinnedAt.value = null
-        toast.success('已取消置顶')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const editPost = () => {
-      router.push(`/posts/${postId}/edit`)
-    }
-
-    const deletePost = async () => {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-      const res = await fetch(`${API_BASE_URL}/api/posts/${postId}`, {
-        method: 'DELETE',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        toast.success('已删除')
-        router.push('/')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const rejectPost = async () => {
-      const token = getToken()
-      if (!token) return
-      const res = await fetch(`${API_BASE_URL}/api/admin/posts/${postId}/reject`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        status.value = 'REJECTED'
-        toast.success('已驳回')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-    const unsubscribePost = async () => {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-
-      const res = await fetch(`${API_BASE_URL}/api/subscriptions/posts/${postId}`, {
-        method: 'DELETE',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        subscribed.value = false
-        toast.success('已取消订阅')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const joinLottery = async () => {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-      const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/lottery/join`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        toast.success('已参与抽奖')
-        await fetchPost()
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const fetchCommentSorts = () => {
-      return Promise.resolve([
-        { id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
-        { id: 'OLDEST', name: '最旧', icon: 'fas fa-hourglass-start' },
-        // { id: 'MOST_INTERACTIONS', name: '最多互动', icon: 'fas fa-fire' }
-      ])
-    }
-
-    const fetchComments = async () => {
-      isFetchingComments.value = true
-      console.debug('Fetching comments', { postId, sort: commentSort.value })
-      try {
-        const token = getToken()
-        const res = await fetch(
-          `${API_BASE_URL}/api/posts/${postId}/comments?sort=${commentSort.value}`,
-          {
-            headers: { Authorization: token ? `Bearer ${token}` : '' },
-          },
-        )
-        console.debug('Fetch comments response status', res.status)
-        if (res.ok) {
-          const data = await res.json()
-          console.debug('Fetched comments count', data.length)
-          comments.value = data.map(mapComment)
-          isFetchingComments.value = false
-          await nextTick()
-          gatherPostItems()
-        }
-      } catch (e) {
-        console.debug('Fetch comments error', e)
-      } finally {
-        isFetchingComments.value = false
-      }
-    }
-
-    watch(commentSort, fetchComments)
-
-    const jumpToHashComment = async () => {
-      const hash = location.hash
-      if (hash.startsWith('#comment-')) {
-        const id = hash.substring('#comment-'.length)
-        await new Promise((resolve) => setTimeout(resolve, 500))
-        const el = document.getElementById('comment-' + id)
-        if (el) {
-          const top = el.getBoundingClientRect().top + window.scrollY - headerHeight - 20 // 20 for beauty
-          window.scrollTo({ top, behavior: 'smooth' })
-          el.classList.add('comment-highlight')
-          setTimeout(() => el.classList.remove('comment-highlight'), 4000)
-        }
-      }
-    }
-
-    const gotoProfile = () => {
-      router.push(`/users/${author.value.id}`)
-    }
-
-    onMounted(async () => {
-      await fetchComments()
-      const hash = location.hash
-      const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null
-      if (id) expandCommentPath(id)
-      updateCurrentIndex()
-      window.addEventListener('scroll', updateCurrentIndex)
-      jumpToHashComment()
-    })
-
-    await fetchPost()
-
-    return {
-      postContent,
-      author,
-      title,
-      category,
-      tags,
-      comments,
-      postTime,
-      scrollerTopTime,
-      lastReplyTime,
-      postItems,
-      mainContainer,
-      currentIndex,
-      totalPosts,
-      postReactions,
-      articleMenuItems,
-      postId,
-      postComment,
-      onSliderInput,
-      copyPostLink,
-      subscribePost,
-      unsubscribePost,
-      joinLottery,
-      renderMarkdown,
-      isWaitingFetchingPost,
-      isWaitingPostingComment,
-      gotoProfile,
-      gotoUser,
-      subscribed,
-      loggedIn,
-      isAuthor,
-      status,
-      isAdmin,
-      approvePost,
-      editPost,
-      onCommentDeleted,
-      deletePost,
-      pinPost,
-      unpinPost,
-      rejectPost,
-      lightboxVisible,
-      lightboxIndex,
-      lightboxImgs,
-      handleContentClick,
-      isMobile,
-      pinnedAt,
-      commentSort,
-      fetchCommentSorts,
-      isFetchingComments,
-      getMedalTitle,
-      lottery,
-      countdown,
-      lotteryParticipants,
-      lotteryWinners,
-      lotteryEnded,
-      hasJoined,
-    }
-  },
+  } catch (e) {
+    console.debug('Fetch comments error', e)
+  } finally {
+    isFetchingComments.value = false
+  }
 }
+
+watch(commentSort, fetchComments)
+
+const jumpToHashComment = async () => {
+  const hash = location.hash
+  if (hash.startsWith('#comment-')) {
+    const id = hash.substring('#comment-'.length)
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    const el = document.getElementById('comment-' + id)
+    if (el) {
+      const top = el.getBoundingClientRect().top + window.scrollY - headerHeight - 20 // 20 for beauty
+      window.scrollTo({ top, behavior: 'smooth' })
+      el.classList.add('comment-highlight')
+      setTimeout(() => el.classList.remove('comment-highlight'), 4000)
+    }
+  }
+}
+
+const gotoProfile = () => {
+  router.push(`/users/${author.value.id}`)
+}
+
+onMounted(async () => {
+  await fetchComments()
+  const hash = location.hash
+  const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null
+  if (id) expandCommentPath(id)
+  updateCurrentIndex()
+  window.addEventListener('scroll', updateCurrentIndex)
+  jumpToHashComment()
+})
+
+await fetchPost()
 </script>
 <style>
 .post-page-container {
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 26381d870..5507e8e2a 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -296,7 +296,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import AchievementList from '~/components/AchievementList.vue'
@@ -304,278 +304,242 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import UserList from '~/components/UserList.vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
 import { stripMarkdown, stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
-  name: 'ProfileView',
-  components: { BaseTimeline, UserList, BasePlaceholder, LevelProgress, AchievementList },
-  setup() {
-    definePageMeta({
-      alias: ['/users/:id/'],
-    })
-    const route = useRoute()
-    const router = useRouter()
-    const username = route.params.id
+definePageMeta({
+  alias: ['/users/:id/'],
+})
+const route = useRoute()
+const router = useRouter()
+const username = route.params.id
 
-    const user = ref({})
-    const hotPosts = ref([])
-    const hotReplies = ref([])
-    const hotTags = ref([])
-    const timelineItems = ref([])
-    const followers = ref([])
-    const followings = ref([])
-    const medals = ref([])
-    const subscribed = ref(false)
-    const isLoading = ref(true)
-    const tabLoading = ref(false)
-    const selectedTab = ref(
-      ['summary', 'timeline', 'following', 'achievements'].includes(route.query.tab)
-        ? route.query.tab
-        : 'summary',
-    )
-    const followTab = ref('followers')
+const user = ref({})
+const hotPosts = ref([])
+const hotReplies = ref([])
+const hotTags = ref([])
+const timelineItems = ref([])
+const followers = ref([])
+const followings = ref([])
+const medals = ref([])
+const subscribed = ref(false)
+const isLoading = ref(true)
+const tabLoading = ref(false)
+const selectedTab = ref(
+  ['summary', 'timeline', 'following', 'achievements'].includes(route.query.tab)
+    ? route.query.tab
+    : 'summary',
+)
+const followTab = ref('followers')
 
-    const levelInfo = computed(() => {
-      const exp = user.value.experience || 0
-      const currentLevel = user.value.currentLevel || 0
-      const nextExp = user.value.nextLevelExp || 0
-      const prevExp = prevLevelExp(currentLevel)
-      const total = nextExp - prevExp
-      const ratio = total > 0 ? (exp - prevExp) / total : 1
-      const percent = Math.max(0, Math.min(1, ratio)) * 100
-      return { exp, currentLevel, nextExp, percent }
-    })
+const levelInfo = computed(() => {
+  const exp = user.value.experience || 0
+  const currentLevel = user.value.currentLevel || 0
+  const nextExp = user.value.nextLevelExp || 0
+  const prevExp = prevLevelExp(currentLevel)
+  const total = nextExp - prevExp
+  const ratio = total > 0 ? (exp - prevExp) / total : 1
+  const percent = Math.max(0, Math.min(1, ratio)) * 100
+  return { exp, currentLevel, nextExp, percent }
+})
 
-    const isMine = computed(function () {
-      const mine = authState.username === username || String(authState.userId) === username
-      console.log(mine)
-      return mine
-    })
+const isMine = computed(function () {
+  const mine = authState.username === username || String(authState.userId) === username
+  console.log(mine)
+  return mine
+})
 
-    const formatDate = (d) => {
-      if (!d) return ''
-      return TimeManager.format(d)
-    }
-
-    const fetchUser = async () => {
-      const token = getToken()
-      const headers = token ? { Authorization: `Bearer ${token}` } : {}
-      const res = await fetch(`${API_BASE_URL}/api/users/${username}`, { headers })
-      if (res.ok) {
-        const data = await res.json()
-        user.value = data
-        subscribed.value = !!data.subscribed
-      } else if (res.status === 404) {
-        router.replace('/404')
-      }
-    }
-
-    const fetchSummary = async () => {
-      const postsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-posts`)
-      if (postsRes.ok) {
-        const data = await postsRes.json()
-        hotPosts.value = data.map((p) => ({ icon: 'fas fa-book', post: p }))
-      }
-
-      const repliesRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-replies`)
-      if (repliesRes.ok) {
-        const data = await repliesRes.json()
-        hotReplies.value = data.map((c) => ({ icon: 'fas fa-comment', comment: c }))
-      }
-
-      const tagsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-tags`)
-      if (tagsRes.ok) {
-        const data = await tagsRes.json()
-        hotTags.value = data.map((t) => ({ icon: 'fas fa-tag', tag: t }))
-      }
-    }
-
-    const fetchTimeline = async () => {
-      const [postsRes, repliesRes, tagsRes] = await Promise.all([
-        fetch(`${API_BASE_URL}/api/users/${username}/posts?limit=50`),
-        fetch(`${API_BASE_URL}/api/users/${username}/replies?limit=50`),
-        fetch(`${API_BASE_URL}/api/users/${username}/tags?limit=50`),
-      ])
-      const posts = postsRes.ok ? await postsRes.json() : []
-      const replies = repliesRes.ok ? await repliesRes.json() : []
-      const tags = tagsRes.ok ? await tagsRes.json() : []
-      const mapped = [
-        ...posts.map((p) => ({
-          type: 'post',
-          icon: 'fas fa-book',
-          post: p,
-          createdAt: p.createdAt,
-        })),
-        ...replies.map((r) => ({
-          type: r.parentComment ? 'reply' : 'comment',
-          icon: 'fas fa-comment',
-          comment: r,
-          createdAt: r.createdAt,
-        })),
-        ...tags.map((t) => ({
-          type: 'tag',
-          icon: 'fas fa-tag',
-          tag: t,
-          createdAt: t.createdAt,
-        })),
-      ]
-      mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-      timelineItems.value = mapped
-    }
-
-    const fetchFollowUsers = async () => {
-      const [followerRes, followingRes] = await Promise.all([
-        fetch(`${API_BASE_URL}/api/users/${username}/followers`),
-        fetch(`${API_BASE_URL}/api/users/${username}/following`),
-      ])
-      followers.value = followerRes.ok ? await followerRes.json() : []
-      followings.value = followingRes.ok ? await followingRes.json() : []
-    }
-
-    const loadSummary = async () => {
-      tabLoading.value = true
-      await fetchSummary()
-      tabLoading.value = false
-    }
-
-    const loadTimeline = async () => {
-      tabLoading.value = true
-      await fetchTimeline()
-      tabLoading.value = false
-    }
-
-    const loadFollow = async () => {
-      tabLoading.value = true
-      await fetchFollowUsers()
-      tabLoading.value = false
-    }
-
-    const fetchAchievements = async () => {
-      const res = await fetch(`${API_BASE_URL}/api/medals?userId=${user.value.id}`)
-      if (res.ok) {
-        medals.value = await res.json()
-      } else {
-        medals.value = []
-        toast.error('获取成就失败')
-      }
-    }
-
-    const loadAchievements = async () => {
-      tabLoading.value = true
-      await fetchAchievements()
-      tabLoading.value = false
-    }
-
-    const subscribeUser = async () => {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-      const res = await fetch(`${API_BASE_URL}/api/subscriptions/users/${username}`, {
-        method: 'POST',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        subscribed.value = true
-        toast.success('已关注')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const unsubscribeUser = async () => {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-      const res = await fetch(`${API_BASE_URL}/api/subscriptions/users/${username}`, {
-        method: 'DELETE',
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      if (res.ok) {
-        subscribed.value = false
-        toast.success('已取消关注')
-      } else {
-        toast.error('操作失败')
-      }
-    }
-
-    const gotoTag = (tag) => {
-      const value = encodeURIComponent(tag.id ?? tag.name)
-      router.push({ path: '/', query: { tags: value } })
-    }
-
-    const init = async () => {
-      try {
-        await fetchUser()
-        if (selectedTab.value === 'summary') {
-          await loadSummary()
-        } else if (selectedTab.value === 'timeline') {
-          await loadTimeline()
-        } else if (selectedTab.value === 'following') {
-          await loadFollow()
-        } else if (selectedTab.value === 'achievements') {
-          await loadAchievements()
-        }
-      } catch (e) {
-        console.error(e)
-      } finally {
-        isLoading.value = false
-      }
-    }
-
-    onMounted(init)
-
-    watch(selectedTab, async (val) => {
-      // router.replace({ query: { ...route.query, tab: val } })
-      if (val === 'timeline' && timelineItems.value.length === 0) {
-        await loadTimeline()
-      } else if (
-        val === 'following' &&
-        followers.value.length === 0 &&
-        followings.value.length === 0
-      ) {
-        await loadFollow()
-      } else if (val === 'achievements' && medals.value.length === 0) {
-        await loadAchievements()
-      }
-    })
-
-    return {
-      user,
-      hotPosts,
-      hotReplies,
-      timelineItems,
-      followers,
-      followings,
-      medals,
-      subscribed,
-      isMine,
-      isLoading,
-      tabLoading,
-      selectedTab,
-      followTab,
-      formatDate,
-      stripMarkdown,
-      stripMarkdownLength,
-      loadTimeline,
-      loadFollow,
-      loadAchievements,
-      loadSummary,
-      subscribeUser,
-      unsubscribeUser,
-      gotoTag,
-      hotTags,
-      levelInfo,
-    }
-  },
+const formatDate = (d) => {
+  if (!d) return ''
+  return TimeManager.format(d)
 }
+
+const fetchUser = async () => {
+  const token = getToken()
+  const headers = token ? { Authorization: `Bearer ${token}` } : {}
+  const res = await fetch(`${API_BASE_URL}/api/users/${username}`, { headers })
+  if (res.ok) {
+    const data = await res.json()
+    user.value = data
+    subscribed.value = !!data.subscribed
+  } else if (res.status === 404) {
+    router.replace('/404')
+  }
+}
+
+const fetchSummary = async () => {
+  const postsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-posts`)
+  if (postsRes.ok) {
+    const data = await postsRes.json()
+    hotPosts.value = data.map((p) => ({ icon: 'fas fa-book', post: p }))
+  }
+
+  const repliesRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-replies`)
+  if (repliesRes.ok) {
+    const data = await repliesRes.json()
+    hotReplies.value = data.map((c) => ({ icon: 'fas fa-comment', comment: c }))
+  }
+
+  const tagsRes = await fetch(`${API_BASE_URL}/api/users/${username}/hot-tags`)
+  if (tagsRes.ok) {
+    const data = await tagsRes.json()
+    hotTags.value = data.map((t) => ({ icon: 'fas fa-tag', tag: t }))
+  }
+}
+
+const fetchTimeline = async () => {
+  const [postsRes, repliesRes, tagsRes] = await Promise.all([
+    fetch(`${API_BASE_URL}/api/users/${username}/posts?limit=50`),
+    fetch(`${API_BASE_URL}/api/users/${username}/replies?limit=50`),
+    fetch(`${API_BASE_URL}/api/users/${username}/tags?limit=50`),
+  ])
+  const posts = postsRes.ok ? await postsRes.json() : []
+  const replies = repliesRes.ok ? await repliesRes.json() : []
+  const tags = tagsRes.ok ? await tagsRes.json() : []
+  const mapped = [
+    ...posts.map((p) => ({
+      type: 'post',
+      icon: 'fas fa-book',
+      post: p,
+      createdAt: p.createdAt,
+    })),
+    ...replies.map((r) => ({
+      type: r.parentComment ? 'reply' : 'comment',
+      icon: 'fas fa-comment',
+      comment: r,
+      createdAt: r.createdAt,
+    })),
+    ...tags.map((t) => ({
+      type: 'tag',
+      icon: 'fas fa-tag',
+      tag: t,
+      createdAt: t.createdAt,
+    })),
+  ]
+  mapped.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+  timelineItems.value = mapped
+}
+
+const fetchFollowUsers = async () => {
+  const [followerRes, followingRes] = await Promise.all([
+    fetch(`${API_BASE_URL}/api/users/${username}/followers`),
+    fetch(`${API_BASE_URL}/api/users/${username}/following`),
+  ])
+  followers.value = followerRes.ok ? await followerRes.json() : []
+  followings.value = followingRes.ok ? await followingRes.json() : []
+}
+
+const loadSummary = async () => {
+  tabLoading.value = true
+  await fetchSummary()
+  tabLoading.value = false
+}
+
+const loadTimeline = async () => {
+  tabLoading.value = true
+  await fetchTimeline()
+  tabLoading.value = false
+}
+
+const loadFollow = async () => {
+  tabLoading.value = true
+  await fetchFollowUsers()
+  tabLoading.value = false
+}
+
+const fetchAchievements = async () => {
+  const res = await fetch(`${API_BASE_URL}/api/medals?userId=${user.value.id}`)
+  if (res.ok) {
+    medals.value = await res.json()
+  } else {
+    medals.value = []
+    toast.error('获取成就失败')
+  }
+}
+
+const loadAchievements = async () => {
+  tabLoading.value = true
+  await fetchAchievements()
+  tabLoading.value = false
+}
+
+const subscribeUser = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/subscriptions/users/${username}`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    subscribed.value = true
+    toast.success('已关注')
+  } else {
+    toast.error('操作失败')
+  }
+}
+
+const unsubscribeUser = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/subscriptions/users/${username}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    subscribed.value = false
+    toast.success('已取消关注')
+  } else {
+    toast.error('操作失败')
+  }
+}
+
+const gotoTag = (tag) => {
+  const value = encodeURIComponent(tag.id ?? tag.name)
+  router.push({ path: '/', query: { tags: value } })
+}
+
+const init = async () => {
+  try {
+    await fetchUser()
+    if (selectedTab.value === 'summary') {
+      await loadSummary()
+    } else if (selectedTab.value === 'timeline') {
+      await loadTimeline()
+    } else if (selectedTab.value === 'following') {
+      await loadFollow()
+    } else if (selectedTab.value === 'achievements') {
+      await loadAchievements()
+    }
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(init)
+
+watch(selectedTab, async (val) => {
+  // router.replace({ query: { ...route.query, tab: val } })
+  if (val === 'timeline' && timelineItems.value.length === 0) {
+    await loadTimeline()
+  } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {
+    await loadFollow()
+  } else if (val === 'achievements' && medals.value.length === 0) {
+    await loadAchievements()
+  }
+})
 </script>
 
 <style scoped>
diff --git a/frontend_nuxt/utils/auth.js b/frontend_nuxt/utils/auth.js
index a5dec2019..a4f87e15e 100644
--- a/frontend_nuxt/utils/auth.js
+++ b/frontend_nuxt/utils/auth.js
@@ -1,4 +1,3 @@
-import { API_BASE_URL } from '~/main'
 import { reactive } from 'vue'
 
 const TOKEN_KEY = 'token'
@@ -65,6 +64,8 @@ export function clearUserInfo() {
 }
 
 export async function fetchCurrentUser() {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   const token = getToken()
   if (!token) return null
   try {
@@ -91,6 +92,8 @@ export function isLogin() {
 }
 
 export async function checkToken() {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   const token = getToken()
   if (!token) return false
   try {
diff --git a/frontend_nuxt/utils/discord.js b/frontend_nuxt/utils/discord.js
index 880671a05..4dca13206 100644
--- a/frontend_nuxt/utils/discord.js
+++ b/frontend_nuxt/utils/discord.js
@@ -1,4 +1,4 @@
-import { API_BASE_URL, DISCORD_CLIENT_ID, toast } from '../main'
+import { DISCORD_CLIENT_ID, toast } from '../main'
 import { WEBSITE_BASE_URL } from '../constants'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
@@ -15,6 +15,8 @@ export function discordAuthorize(state = '') {
 
 export async function discordExchange(code, state, reason) {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
     const res = await fetch(`${API_BASE_URL}/api/auth/discord`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
diff --git a/frontend_nuxt/utils/github.js b/frontend_nuxt/utils/github.js
index e978d6e07..e06e915c7 100644
--- a/frontend_nuxt/utils/github.js
+++ b/frontend_nuxt/utils/github.js
@@ -1,4 +1,4 @@
-import { API_BASE_URL, GITHUB_CLIENT_ID, toast } from '../main'
+import { GITHUB_CLIENT_ID, toast } from '../main'
 import { setToken, loadCurrentUser } from './auth'
 import { WEBSITE_BASE_URL } from '../constants'
 import { registerPush } from './push'
@@ -15,6 +15,8 @@ export function githubAuthorize(state = '') {
 
 export async function githubExchange(code, state, reason) {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
     const res = await fetch(`${API_BASE_URL}/api/auth/github`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
diff --git a/frontend_nuxt/utils/google.js b/frontend_nuxt/utils/google.js
index c641fb374..36687bf7e 100644
--- a/frontend_nuxt/utils/google.js
+++ b/frontend_nuxt/utils/google.js
@@ -1,4 +1,4 @@
-import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
+import { GOOGLE_CLIENT_ID, toast } from '../main'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
 import { WEBSITE_BASE_URL } from '../constants'
@@ -32,6 +32,8 @@ export function googleAuthorize() {
 
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
     const res = await fetch(`${API_BASE_URL}/api/auth/google`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 16e37aa0f..b0715274b 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -1,4 +1,3 @@
-import { API_BASE_URL } from '~/main'
 import { getToken } from './auth'
 import { reactive } from 'vue'
 
@@ -7,6 +6,8 @@ export const notificationState = reactive({
 })
 
 export async function fetchUnreadCount() {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   try {
     const token = getToken()
     if (!token) {
@@ -31,6 +32,9 @@ export async function fetchUnreadCount() {
 
 export async function markNotificationsRead(ids) {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+
     const token = getToken()
     if (!token || !ids || ids.length === 0) return false
     const res = await fetch(`${API_BASE_URL}/api/notifications/read`, {
@@ -49,6 +53,9 @@ export async function markNotificationsRead(ids) {
 
 export async function fetchNotificationPreferences() {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+
     const token = getToken()
     if (!token) return []
     const res = await fetch(`${API_BASE_URL}/api/notifications/prefs`, {
@@ -63,6 +70,8 @@ export async function fetchNotificationPreferences() {
 
 export async function updateNotificationPreference(type, enabled) {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
     const token = getToken()
     if (!token) return false
     const res = await fetch(`${API_BASE_URL}/api/notifications/prefs`, {
diff --git a/frontend_nuxt/utils/push.js b/frontend_nuxt/utils/push.js
index b80fd366d..534526015 100644
--- a/frontend_nuxt/utils/push.js
+++ b/frontend_nuxt/utils/push.js
@@ -1,4 +1,3 @@
-import { API_BASE_URL } from '../main'
 import { getToken } from './auth'
 
 function urlBase64ToUint8Array(base64String) {
@@ -21,6 +20,8 @@ function arrayBufferToBase64(buffer) {
 
 export async function registerPush() {
   if (!('serviceWorker' in navigator) || !('PushManager' in window)) return
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   try {
     const reg = await navigator.serviceWorker.register('/notifications-sw.js')
     const res = await fetch(`${API_BASE_URL}/api/push/public-key`)
diff --git a/frontend_nuxt/utils/twitter.js b/frontend_nuxt/utils/twitter.js
index b8477eeff..af044a078 100644
--- a/frontend_nuxt/utils/twitter.js
+++ b/frontend_nuxt/utils/twitter.js
@@ -1,4 +1,4 @@
-import { API_BASE_URL, TWITTER_CLIENT_ID, toast } from '../main'
+import { TWITTER_CLIENT_ID, toast } from '../main'
 import { WEBSITE_BASE_URL } from '../constants'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
@@ -42,6 +42,8 @@ export async function twitterAuthorize(state = '') {
 
 export async function twitterExchange(code, state, reason) {
   try {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
     const codeVerifier = sessionStorage.getItem('twitter_code_verifier')
     sessionStorage.removeItem('twitter_code_verifier')
     const res = await fetch(`${API_BASE_URL}/api/auth/twitter`, {
diff --git a/frontend_nuxt/utils/user.js b/frontend_nuxt/utils/user.js
index f0291a563..f5a0061b6 100644
--- a/frontend_nuxt/utils/user.js
+++ b/frontend_nuxt/utils/user.js
@@ -1,7 +1,7 @@
-import { API_BASE_URL } from '../main'
-
 export async function fetchFollowings(username) {
   if (!username) return []
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   try {
     const res = await fetch(`${API_BASE_URL}/api/users/${username}/following`)
     return res.ok ? await res.json() : []
@@ -11,6 +11,8 @@ export async function fetchFollowings(username) {
 }
 
 export async function fetchAdmins() {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   try {
     const res = await fetch(`${API_BASE_URL}/api/users/admins`)
     return res.ok ? await res.json() : []
@@ -21,6 +23,8 @@ export async function fetchAdmins() {
 
 export async function searchUsers(keyword) {
   if (!keyword) return []
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
   try {
     const res = await fetch(
       `${API_BASE_URL}/api/search/users?keyword=${encodeURIComponent(keyword)}`,
diff --git a/frontend_nuxt/utils/vditor.js b/frontend_nuxt/utils/vditor.js
index b4a366066..c38aed7b1 100644
--- a/frontend_nuxt/utils/vditor.js
+++ b/frontend_nuxt/utils/vditor.js
@@ -1,5 +1,4 @@
 import Vditor from 'vditor'
-import { API_BASE_URL } from '../main'
 import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
 import { tiebaEmoji } from './tiebaEmoji'
@@ -14,6 +13,8 @@ export function getPreviewTheme() {
 
 export function createVditor(editorId, options = {}) {
   const { placeholder = '', preview = {}, input, after } = options
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
 
   const fetchMentions = async (value) => {
     if (!value) {