diff --git a/web/src/components/follow-item.vue b/web/src/components/follow-item.vue
index 5bd4e135..e768d5a7 100644
--- a/web/src/components/follow-item.vue
+++ b/web/src/components/follow-item.vue
@@ -63,12 +63,13 @@ import { formatDate } from '@/utils/formatTime';
 import { MoreHorizFilled } from '@vicons/material';
 import { PaperPlaneOutline, BodyOutline, WalkOutline } from '@vicons/ionicons5';
 import { Api } from '@/utils/request';
-import UserAction from '@/utils/useUserAction';
+import UserAction from '@/composables/useUserAction';
 
 const dialog = useDialog();
 
 const emit = defineEmits<{
   (e: 'send-whisper', user: Item.UserInfo): void;
+  (e: 'unfollow-success'): void;
 }>();
 
 const renderIcon = (icon: Component) => {
@@ -80,9 +81,14 @@ const renderIcon = (icon: Component) => {
 };
 
 const handleFollowUser = () => {
-  UserAction.followAction(props.contact.user_id, props.contact.username, props.contact.is_following)
+  const wasFollowing = props.contact.is_following;
+  UserAction.followAction(dialog, props.contact.user_id, props.contact.username, props.contact.is_following)
     .then(_action => {
       props.contact.is_following = _action;
+      // 如果是取消关注操作，触发事件
+      if (wasFollowing && !_action) {
+        emit('unfollow-success');
+      }
     })
     .catch(err => {
       console.log(err);
diff --git a/web/src/components/infinite-load-more.vue b/web/src/components/infinite-load-more.vue
new file mode 100644
index 00000000..91e59e58
--- /dev/null
+++ b/web/src/components/infinite-load-more.vue
@@ -0,0 +1,55 @@
+<template>
+    <n-space v-if="totalPage > 0" justify="center">
+        <InfiniteLoading
+            class="load-more"
+            :slots="{ complete: completeText, error: '加载出错' }"
+            @infinite="handleInfinite"
+        >
+            <template #spinner>
+                <div class="load-more-wrap">
+                    <n-spin :size="14" v-if="!noMore" />
+                    <span class="load-more-spinner">{{ noMore ? completeText : '加载更多' }}</span>
+                </div>
+            </template>
+        </InfiniteLoading>
+    </n-space>
+</template>
+
+<script setup lang="ts">
+import InfiniteLoading from 'v3-infinite-loading';
+
+withDefaults(defineProps<{
+    totalPage: number;
+    noMore: boolean;
+    completeText?: string;
+}>(), {
+    completeText: '没有更多了',
+});
+
+const emit = defineEmits<{
+    (e: 'load-more'): void;
+}>();
+
+const handleInfinite = () => {
+    emit('load-more');
+};
+</script>
+
+<style lang="less" scoped>
+.load-more {
+    margin: 20px;
+
+    .load-more-wrap {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 14px;
+
+        .load-more-spinner {
+            font-size: 14px;
+            opacity: 0.65;
+        }
+    }
+}
+</style>
diff --git a/web/src/components/message-item.vue b/web/src/components/message-item.vue
index 514f32cc..58dc27a3 100644
--- a/web/src/components/message-item.vue
+++ b/web/src/components/message-item.vue
@@ -157,7 +157,7 @@ import { formatRelativeTime } from '@/utils/formatTime';
 import { MoreHorizFilled } from '@vicons/material';
 import { storeToRefs } from 'pinia';
 import { Api } from '@/utils/request';
-import UserAction from '@/utils/useUserAction';
+import UserAction from '@/composables/useUserAction';
 
 const defaultavatar =
   'https://assets.paopao.info/public/avatar/default/admin.png';
@@ -226,7 +226,7 @@ const onHandleFollowAction = (message: Item.MessageProps) => {
 		message.type == 4 && message.sender_user_id == userInfo.value.id
 		? message.receiver_user
 		: message.sender_user;
-	UserAction.followAction(user.id, user.username, user.is_following)
+	UserAction.followAction(dialog, user.id, user.username, user.is_following)
 		.then(_action => {
 			user.is_following = _action;
 			// TODO: 这里暴力处理，简单重新加载，更好的做法是遍历所有message，如果是对应user就更新到新状态
diff --git a/web/src/components/post-detail.vue b/web/src/components/post-detail.vue
index 3e041257..02b9800d 100644
--- a/web/src/components/post-detail.vue
+++ b/web/src/components/post-detail.vue
@@ -259,7 +259,8 @@ import copy from 'copy-to-clipboard';
 import { storeToRefs } from 'pinia';
 import { useStoreUser } from '@/store/user';
 import { Api } from '@/utils/request';
-import UserAction from '@/utils/useUserAction';
+import UserAction from '@/composables/useUserAction';
+import { usePostContent } from '@/composables/usePostContent';
 
 const useFriendship =
   import.meta.env.VITE_USE_FRIENDSHIP.toLowerCase() === 'true';
@@ -314,48 +315,8 @@ const emit = defineEmits<{
   (e: 'reload', post_id: number): void;
 }>();
 
-const post = computed({
-  get: () => {
-    let post: Item.PostComponentProps = Object.assign(
-      {
-        texts: [],
-        imgs: [],
-        videos: [],
-        links: [],
-        attachments: [],
-        charge_attachments: [],
-      },
-      props.post,
-    );
-    post.contents.map((content) => {
-      if (+content.type === 1 || +content.type === 2) {
-        post.texts.push(content);
-      }
-      if (+content.type === 3) {
-        post.imgs.push(content);
-      }
-      if (+content.type === 4) {
-        post.videos.push(content);
-      }
-      if (+content.type === 6) {
-        post.links.push(content);
-      }
-      if (+content.type === 7) {
-        post.attachments.push(content);
-      }
-      if (+content.type === 8) {
-        post.charge_attachments.push(content);
-      }
-    });
-    return post;
-  },
-  set: (newVal) => {
-    props.post.upvote_count = newVal.upvote_count;
-    props.post.comment_count = newVal.comment_count;
-    props.post.collection_count = newVal.collection_count;
-    props.post.is_essence = newVal.is_essence;
-  },
-});
+// 使用 usePostContent composable (包含额外字段)
+const post = usePostContent(props.post, true);
 
 const renderIcon = (icon: Component) => {
   return () => {
@@ -492,7 +453,7 @@ const adminOptions = computed(() => {
 });
 
 const onHandleFollowAction = (post: Item.PostProps) => {
-	UserAction.followAction(post.user.id, post.user.username, post.user.is_following)
+	UserAction.followAction(dialog, post.user.id, post.user.username, post.user.is_following)
 		.then(_action => {
 			post.user.is_following = _action;
 		})
diff --git a/web/src/components/post-item.vue b/web/src/components/post-item.vue
index 7c1c7e62..0b05c5cb 100644
--- a/web/src/components/post-item.vue
+++ b/web/src/components/post-item.vue
@@ -164,7 +164,8 @@ import copy from 'copy-to-clipboard';
 import { useStoreProfile } from '@/store/profile';
 import { storeToRefs } from 'pinia';
 import { Api } from '@/utils/request';
-import UserAction from '@/utils/useUserAction';
+import UserAction from '@/composables/useUserAction';
+import { usePostContent } from '@/composables/usePostContent';
 
 const router = useRouter();
 
@@ -274,7 +275,7 @@ const handleTweetAction = async (
       break;
     case 'follow':
     case 'unfollow':
-      UserAction.followAction(props.post.user.id, props.post.user.username, props.post.user.is_following)
+      UserAction.followAction(dialog, props.post.user.id, props.post.user.username, props.post.user.is_following)
         .then(_action => {
           emit('post-follow-action', props.post.user.id, _action);
         })
@@ -285,46 +286,8 @@ const handleTweetAction = async (
   }
 };
 
-const post = computed({
-  get: () => {
-    let post: Item.PostComponentProps = Object.assign(
-      {
-        texts: [],
-        imgs: [],
-        videos: [],
-        links: [],
-        attachments: [],
-        charge_attachments: [],
-      },
-      props.post,
-    );
-    post.contents.map((content) => {
-      if (+content.type === 1 || +content.type === 2) {
-        post.texts.push(content);
-      }
-      if (+content.type === 3) {
-        post.imgs.push(content);
-      }
-      if (+content.type === 4) {
-        post.videos.push(content);
-      }
-      if (+content.type === 6) {
-        post.links.push(content);
-      }
-      if (+content.type === 7) {
-        post.attachments.push(content);
-      }
-      if (+content.type === 8) {
-        post.charge_attachments.push(content);
-      }
-    });
-    return post;
-  },
-  set: (newVal) => {
-    props.post.upvote_count = newVal.upvote_count;
-    props.post.collection_count = newVal.collection_count;
-  },
-});
+// 使用 usePostContent composable
+const post = usePostContent(props.post);
 const handlePostStar = () => {
   postStar({
     id: post.value.id,
diff --git a/web/src/composables/usePagination.ts b/web/src/composables/usePagination.ts
new file mode 100644
index 00000000..6b5a73f7
--- /dev/null
+++ b/web/src/composables/usePagination.ts
@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+
+/**
+ * 通用分页逻辑 composable
+ * 保持与原有代码完全一致的行为
+ */
+export function usePagination(initialPageSize: number = 20) {
+  const loading = ref(false);
+  const noMore = ref(false);
+  const page = ref(1);
+  const pageSize = ref(initialPageSize);
+  const totalPage = ref(0);
+
+  const reset = () => {
+    loading.value = false;
+    noMore.value = false;
+    page.value = 1;
+    totalPage.value = 0;
+  };
+
+  const nextPage = (loadCallback: () => void) => {
+    if (page.value < totalPage.value || totalPage.value == 0) {
+      noMore.value = false;
+      page.value++;
+      loadCallback();
+    } else {
+      noMore.value = true;
+    }
+  };
+
+  return {
+    loading,
+    noMore,
+    page,
+    pageSize,
+    totalPage,
+    reset,
+    nextPage,
+  };
+}
diff --git a/web/src/composables/usePostContent.ts b/web/src/composables/usePostContent.ts
new file mode 100644
index 00000000..ce5cb845
--- /dev/null
+++ b/web/src/composables/usePostContent.ts
@@ -0,0 +1,53 @@
+import { computed } from 'vue';
+
+/**
+ * Post 内容解析 composable
+ * 将 post.contents 按类型分类到 texts, imgs, videos, links, attachments, charge_attachments
+ * 保持与原有代码完全一致的行为
+ */
+export function usePostContent(post: Item.PostProps, includeExtraFields: boolean = false) {
+  return computed({
+    get: () => {
+      let postData: Item.PostComponentProps = Object.assign(
+        {
+          texts: [],
+          imgs: [],
+          videos: [],
+          links: [],
+          attachments: [],
+          charge_attachments: [],
+        },
+        post,
+      );
+      postData.contents.map((content) => {
+        if (+content.type === 1 || +content.type === 2) {
+          postData.texts.push(content);
+        }
+        if (+content.type === 3) {
+          postData.imgs.push(content);
+        }
+        if (+content.type === 4) {
+          postData.videos.push(content);
+        }
+        if (+content.type === 6) {
+          postData.links.push(content);
+        }
+        if (+content.type === 7) {
+          postData.attachments.push(content);
+        }
+        if (+content.type === 8) {
+          postData.charge_attachments.push(content);
+        }
+      });
+      return postData;
+    },
+    set: (newVal) => {
+      post.upvote_count = newVal.upvote_count;
+      post.collection_count = newVal.collection_count;
+      if (includeExtraFields) {
+        post.comment_count = newVal.comment_count;
+        post.is_essence = newVal.is_essence;
+      }
+    },
+  });
+}
diff --git a/web/src/utils/useUserAction.ts b/web/src/composables/useUserAction.ts
similarity index 51%
rename from web/src/utils/useUserAction.ts
rename to web/src/composables/useUserAction.ts
index 2770acef..20695ae5 100644
--- a/web/src/utils/useUserAction.ts
+++ b/web/src/composables/useUserAction.ts
@@ -1,11 +1,17 @@
+import { ref } from 'vue';
 import { useDialog } from "naive-ui";
-import { Api } from "./request";
-
-const dialog = useDialog();
+import { Api } from "../utils/request";
 
 export default class UserAction {
 
-    static followAction(userId: number, userName: string, isFollowing: boolean) {
+    /**
+     * 用户关注/取消关注操作
+     * @param dialog dialog 实例（从组件中传入）
+     * @param userId 目标用户ID
+     * @param userName 目标用户名（用于提示）
+     * @param isFollowing 当前是否已关注（用于确定操作类型和提示文案）
+     */
+    static followAction(dialog: ReturnType<typeof useDialog>, userId: number, userName: string, isFollowing: boolean) {
         return new Promise<boolean>((resolve, reject) => {
             dialog.success({
                 title: '提示',
@@ -45,4 +51,41 @@ export default class UserAction {
         });
     }
 
-}
\ No newline at end of file
+    /**
+     * 用户私信相关操作
+     * 保持与原有代码完全一致的行为
+     */
+    static useWhisper() {
+        const showWhisper = ref(false);
+        const whisperReceiver = ref<Item.UserInfo>({
+            id: 0,
+            avatar: '',
+            username: '',
+            nickname: '',
+            is_admin: false,
+            is_friend: true,
+            is_following: false,
+            created_on: 0,
+            follows: 0,
+            followings: 0,
+            status: 1,
+        });
+
+        const onSendWhisper = (user: Item.UserInfo) => {
+            whisperReceiver.value = user;
+            showWhisper.value = true;
+        };
+
+        const whisperSuccess = () => {
+            showWhisper.value = false;
+        };
+
+        return {
+            showWhisper,
+            whisperReceiver,
+            onSendWhisper,
+            whisperSuccess,
+        };
+    }
+
+}
diff --git a/web/src/views/Following.vue b/web/src/views/Following.vue
index a0ef8e22..eb0988ac 100644
--- a/web/src/views/Following.vue
+++ b/web/src/views/Following.vue
@@ -16,7 +16,7 @@
                 </div>
 
                 <n-list-item v-for="contact in list" :key="contact.user_id">
-                    <follow-item :contact="contact" @send-whisper="onSendWhisper" />
+                    <follow-item :contact="contact" @send-whisper="onSendWhisper" @unfollow-success="handleUnfollowSuccess" />
                 </n-list-item>
             </div>
             <!-- 私信组件 -->
@@ -24,7 +24,7 @@
         </n-list>
     </div>
     <n-space v-if="totalPage > 0" justify="center">
-            <InfiniteLoading class="load-more" :slots="{ complete: completeStr, error: '加载出错' }" @infinite="nextPage">
+            <InfiniteLoading class="load-more" :slots="{ complete: completeStr, error: '加载出错' }" @infinite="handleNextPage">
                 <template #spinner>
                     <div class="load-more-wrap">
                         <n-spin :size="14" v-if="!noMore" />
@@ -40,38 +40,26 @@ import { ref, onMounted, computed } from 'vue';
 import InfiniteLoading from 'v3-infinite-loading';
 import { useRoute } from 'vue-router';
 import { Api } from '@/utils/request';
+import { usePagination } from '@/composables/usePagination';
+import UserAction from '@/composables/useUserAction';
 
 const route = useRoute();
-const loading = ref(false);
-const noMore = ref(false);
+
 const list = ref<Item.ContactItemProps[]>([]);
 const nickname = (route.query.n as string) || '粉丝详情';
 const username = (route.query.s as string) || '';
 const tabler = ref((route.query.t as string) || 'follows');
-const page = ref(+(route.query.p as string) || 1);
-const pageSize = ref(20);
-const totalPage = ref(0);
-const showWhisper = ref(false);
-const whisperReceiver = ref<Item.UserInfo>({
-  id: 0,
-  avatar: '',
-  username: '',
-  nickname: '',
-  is_admin: false,
-  is_friend: true,
-  is_following: false,
-  created_on: 0,
-  follows: 0,
-  followings: 0,
-  status: 1,
-});
+const showAddFriendWhisper = ref(false);
+
+// 使用 usePagination composable
+const { loading, noMore, page, pageSize, totalPage, reset, nextPage } = usePagination(20);
+
+// 使用 UserAction.useWhisper()
+const { showWhisper, whisperReceiver, onSendWhisper, whisperSuccess } = UserAction.useWhisper();
 
 function resetPage(tab: 'follows' | 'followings') {
   list.value = [];
-  loading.value = false;
-  noMore.value = false;
-  page.value = 1;
-  totalPage.value = 0;
+  reset();
   tabler.value = tab;
 }
 
@@ -83,23 +71,8 @@ const completeStr = computed(() => {
   }
 });
 
-const onSendWhisper = (user: Item.UserInfo) => {
-  whisperReceiver.value = user;
-  showWhisper.value = true;
-};
-
-const whisperSuccess = () => {
-  showWhisper.value = false;
-};
-
-const nextPage = () => {
-  if (page.value < totalPage.value || totalPage.value == 0) {
-    noMore.value = false;
-    page.value++;
-    loadPage();
-  } else {
-    noMore.value = true;
-  }
+const handleNextPage = () => {
+  nextPage(loadPage);
 };
 
 const changeTab = (tab: 'follows' | 'followings') => {
@@ -115,6 +88,14 @@ const loadPage = () => {
   }
 };
 
+const handleUnfollowSuccess = () => {
+  // 只在【正在关注】页面刷新列表
+  if (tabler.value === 'follows') {
+    resetPage('follows');
+    loadPage();
+  }
+};
+
 const loadFollows = (username: string, scrollToBottom: boolean = false) => {
   if (list.value.length === 0) {
     loading.value = true;
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 5604fd1f..6ed8ac03 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -31,23 +31,18 @@
             </n-list-item>
             <div  class="style-wrap" v-else-if="showTrendsTag">
             <n-space >
-                <n-button v-if="newestTweetsStyle !== 'newest'" size="small" :bordered="false" @click="onNewestTweets" class="style-item" secondary round>
-                    全部
-                </n-button>
-                <n-button v-if="newestTweetsStyle === 'newest'" size="small" type="success"  :bordered="false" @click="onNewestTweets"  class="style-item" secondary round>
-                    全部
-                </n-button>
-                <n-button v-if="newestTweetsStyle !== 'hots'" size="small" :bordered="false" @click="onHotTweets" class="style-item" secondary round>
-                    热门推荐
-                </n-button>
-                <n-button v-if="newestTweetsStyle === 'hots'" size="small" type="success" :bordered="false" @click="onHotTweets" class="style-item" secondary round>
-                    热门推荐
-                </n-button>
-                <n-button v-if="newestTweetsStyle !== 'following'" size="small" :bordered="false" @click="onFollowingTweets" class="style-item" secondary round>
-                    正在关注
-                </n-button>
-                <n-button v-if="newestTweetsStyle === 'following'" size="small" type="success" :bordered="false" @click="onFollowingTweets" class="style-item" secondary round>
-                    正在关注
+                <n-button
+                    v-for="btn in filterButtons"
+                    :key="btn.key"
+                    size="small"
+                    :type="newestTweetsStyle === btn.key ? 'success' : undefined"
+                    :bordered="false"
+                    @click="onFilterClick(btn.key, btn.index)"
+                    class="style-item"
+                    secondary
+                    round
+                >
+                    {{ btn.label }}
                 </n-button>
             </n-space>
             </div>
@@ -76,7 +71,7 @@
         </n-list>
 
         <n-space v-if="totalPage > 0" justify="center">
-            <InfiniteLoading class="load-more" :slots="{ complete: '没有更多泡泡了', error: '加载出错' }" @infinite="nextPage()">
+            <InfiniteLoading class="load-more" :slots="{ complete: '没有更多泡泡了', error: '加载出错' }" @infinite="handleNextPage">
                 <template #spinner>
                     <div class="load-more-wrap">
                         <n-spin :size="14" v-if="!noMore" />
@@ -103,6 +98,8 @@ import { useStoreUser } from '@/store/user';
 import { useStoreProfile } from '@/store/profile';
 import { storeToRefs } from 'pinia';
 import { Api } from '@/utils/request';
+import { usePagination } from '@/composables/usePagination';
+import UserAction from '@/composables/useUserAction';
 
 const storeMain = useStoreMain();
 const storeUser = useStoreUser();
@@ -116,6 +113,20 @@ const router = useRouter();
 const dialog = useDialog();
 
 const newestTweetsStyle = ref<'newest' | 'hots' | 'following'>('newest');
+
+// 筛选按钮配置
+const filterButtons = [
+  { key: 'newest' as const, label: '全部', index: 0 },
+  { key: 'hots' as const, label: '热门推荐', index: 1 },
+  { key: 'following' as const, label: '正在关注', index: 2 },
+];
+
+const onFilterClick = (key: 'newest' | 'hots' | 'following', index: number) => {
+  newestTweetsStyle.value = key;
+  handleBarClick(slideBarList.value[index], index);
+};
+
+// 保留原有的方法以确保兼容性
 const onNewestTweets = () => {
   newestTweetsStyle.value = 'newest';
   handleBarClick(slideBarList.value[0], 0);
@@ -175,38 +186,16 @@ const user = reactive<Item.UserInfo>({
 const inActionPost = ref<Item.PostProps | null>(null);
 
 const title = ref<string>('泡泡广场');
-const loading = ref(false);
-const noMore = ref(false);
 const targetStyle = ref<number>(1);
 const targetUsername = ref<string>('');
 const list = ref<any[]>([]);
-const page = ref(1);
-const pageSize = ref(20);
-const totalPage = ref(0);
-const showWhisper = ref(false);
 const showAddFriendWhisper = ref(false);
-const whisperReceiver = ref<Item.UserInfo>({
-  id: 0,
-  avatar: '',
-  username: '',
-  nickname: '',
-  is_admin: false,
-  is_friend: true,
-  is_following: false,
-  created_on: 0,
-  follows: 0,
-  followings: 0,
-  status: 1,
-});
 
-const onSendWhisper = (user: Item.UserInfo) => {
-  whisperReceiver.value = user;
-  showWhisper.value = true;
-};
+// 使用 usePagination composable
+const { loading, noMore, page, pageSize, totalPage, reset, nextPage } = usePagination(20);
 
-const whisperSuccess = () => {
-  showWhisper.value = false;
-};
+// 使用 UserAction.useWhisper()
+const { showWhisper, whisperReceiver, onSendWhisper, whisperSuccess } = UserAction.useWhisper();
 
 const openAddFriendWhisper = () => {
   showAddFriendWhisper.value = true;
@@ -257,6 +246,12 @@ function postFollowAction(userId: number, isFollowing: boolean) {
       list.value[index].user.is_following = isFollowing;
     }
   }
+
+  // 如果是在【正在关注】tab，且是取消关注操作（isFollowing 为 false），则刷新列表
+  if (targetStyle.value === 3 && !isFollowing) {
+    resetAll();
+    loadPosts('following');
+  }
 }
 
 const updateTitle = () => {
@@ -286,16 +281,14 @@ const showTrendsBar = computed(() => {
   );
 });
 
-const reset = () => {
-  loading.value = false;
-  noMore.value = false;
+// 重写 reset 方法以包含 list 的重置
+const resetAll = () => {
+  reset();
   list.value = [];
-  page.value = 1;
-  totalPage.value = 0;
 };
 
 const handleBarClick = (data: Item.SlideBarItem, index: number) => {
-  reset();
+  resetAll();
   targetStyle.value = data.style;
   if (route.query.q) {
     route.query.q = null;
@@ -483,18 +476,12 @@ const loadMorePosts = () => {
   }
 };
 
-const nextPage = () => {
-  if (page.value < totalPage.value || totalPage.value == 0) {
-    noMore.value = false;
-    page.value++;
-    loadMorePosts();
-  } else {
-    noMore.value = true;
-  }
+const handleNextPage = () => {
+  nextPage(loadMorePosts);
 };
 
 onMounted(() => {
-  reset();
+  resetAll();
   loadContacts();
   loadPosts('newest');
 });
@@ -508,7 +495,7 @@ watch(
   (to, from) => {
     updateTitle();
     if (to.refresh !== from.refresh) {
-      reset();
+      resetAll();
       setTimeout(() => {
         loadContacts();
         loadMorePosts();
@@ -516,7 +503,7 @@ watch(
       return;
     }
     if (from.path !== '/post' && to.path === '/') {
-      reset();
+      resetAll();
       setTimeout(() => {
         loadContacts();
         loadMorePosts();
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 193700f7..f134dcc7 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -153,7 +153,7 @@ import { useStoreUser } from '@/store/user';
 import { useStoreProfile } from '@/store/profile';
 import { storeToRefs } from 'pinia';
 import { Api } from '@/utils/request';
-import UserAction from '@/utils/useUserAction';
+import UserAction from '@/composables/useUserAction';
 
 type PageType = 'post' | 'comment' | 'highlight' | 'media' | 'star';
 
@@ -515,7 +515,7 @@ const openDeleteFriend = () => {
   });
 };
 const handleFollowUser = () => {
-	UserAction.followAction(user.id, user.username, user.is_following)
+	UserAction.followAction(dialog, user.id, user.username, user.is_following)
 		.then(_action => {
             userLoading.value = false;
             loadUser();