From 7a2e7ebfc41ade1b1d3a1b6377f8b26dfb982179 Mon Sep 17 00:00:00 2001
From: orzi <1063614727@qq.com>
Date: Sun, 15 Mar 2026 17:22:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E7=BB=84=E4=BB=B6=E5=8F=8A?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/follow-item.vue      |  43 +-
 web/src/components/message-item.vue     |  59 +--
 web/src/components/mobile-post-item.vue | 458 ------------------
 web/src/components/post-detail.vue      |  36 +-
 web/src/components/post-item.vue        |  54 ++-
 web/src/utils/useUserAction.ts          |  48 ++
 web/src/views/Collection.vue            |  57 +--
 web/src/views/Home.vue                  |  63 +--
 web/src/views/Profile.vue               | 387 +++-------------
 web/src/views/User.vue                  | 591 ++++++------------------
 10 files changed, 331 insertions(+), 1465 deletions(-)
 delete mode 100644 web/src/components/mobile-post-item.vue
 create mode 100644 web/src/utils/useUserAction.ts

diff --git a/web/src/components/follow-item.vue b/web/src/components/follow-item.vue
index e7ed38c0..5bd4e135 100644
--- a/web/src/components/follow-item.vue
+++ b/web/src/components/follow-item.vue
@@ -63,6 +63,7 @@ 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';
 
 const dialog = useDialog();
 
@@ -79,41 +80,13 @@ const renderIcon = (icon: Component) => {
 };
 
 const handleFollowUser = () => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (props.contact.is_following ? '取消关注 @' : '关注 @') +
-      props.contact.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (props.contact.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: props.contact.user_id,
-        })
-          .then((_res) => {
-            window.$message.success('取消关注成功');
-            props.contact.is_following = false;
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-      } else {
-        Api.v1.user.post.follow({
-          user_id: props.contact.user_id,
-        })
-          .then((_res) => {
-            window.$message.success('关注成功');
-            props.contact.is_following = true;
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-      }
-    },
-  });
+  UserAction.followAction(props.contact.user_id, props.contact.username, props.contact.is_following)
+    .then(_action => {
+      props.contact.is_following = _action;
+    })
+    .catch(err => {
+      console.log(err);
+    });
 };
 
 const props = withDefaults(
diff --git a/web/src/components/message-item.vue b/web/src/components/message-item.vue
index e47b7d52..514f32cc 100644
--- a/web/src/components/message-item.vue
+++ b/web/src/components/message-item.vue
@@ -157,6 +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';
 
 const defaultavatar =
   'https://assets.paopao.info/public/avatar/default/admin.png';
@@ -221,49 +222,21 @@ const emit = defineEmits<{
 }>();
 
 const onHandleFollowAction = (message: Item.MessageProps) => {
-  let user =
-    message.type == 4 && message.sender_user_id == userInfo.value.id
-      ? message.receiver_user
-      : message.sender_user;
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (user.is_following ? '取消关注 @' : '关注 @') +
-      user.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            user.is_following = false;
-            // TODO: 这里暴力处理，简单重新加载，更好的做法是遍历所有message，如果是对应user就更新到新状态
-            setTimeout(() => {
-              emit('reload');
-            }, 50);
-          })
-          .catch((_err) => {});
-      } else {
-        Api.v1.user.post.follow({
-          user_id: user.id,
-        })
-          .then((_res) => {
-            window.$message.success('关注成功');
-            user.is_following = true;
-            // TODO: 这里暴力处理，简单重新加载，更好的做法是遍历所有message，如果是对应user就更新到新状态
-            setTimeout(() => {
-              emit('reload');
-            }, 50);
-          })
-          .catch((_err) => {});
-      }
-    },
-  });
+  	let user =
+		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)
+		.then(_action => {
+			user.is_following = _action;
+			// TODO: 这里暴力处理，简单重新加载，更好的做法是遍历所有message，如果是对应user就更新到新状态
+			setTimeout(() => {
+			emit('reload');
+			}, 50);
+		})
+		.catch(err => {
+			console.log(err);
+		});
 };
 
 const handleAction = (item: 'whisper' | 'follow' | 'unfollow') => {
diff --git a/web/src/components/mobile-post-item.vue b/web/src/components/mobile-post-item.vue
deleted file mode 100644
index a43615a4..00000000
--- a/web/src/components/mobile-post-item.vue
+++ /dev/null
@@ -1,458 +0,0 @@
-<template>
-    <div class="post-item">
-        <n-thing content-indented>
-            <template #avatar>
-                <n-avatar round :size="30" :src="post.user.avatar" />
-            </template>
-            <template #header>
-                    <span class="nickname-wrap">
-                        <router-link
-                            @click.stop
-                            class="username-link"
-                            :to="{
-                                name: 'user',
-                                query: { s: post.user.username },
-                            }"
-                        >
-                            {{ post.user.nickname }}
-                        </router-link>
-                    </span>
-                    <span class="username-wrap"> @{{ post.user.username }} </span>
-                    <n-tag
-                        v-if="post.is_top"
-                        class="top-tag"
-                        type="warning"
-                        size="small"
-                        round
-                    >
-                        置顶
-                    </n-tag>
-                    <n-tag
-                        v-if="post.visibility == 1"
-                        class="top-tag"
-                        type="error"
-                        size="small"
-                        round
-                    >
-                        私密
-                    </n-tag>
-                    <n-tag
-                        v-if="post.visibility == 2"
-                        class="top-tag"
-                        type="info"
-                        size="small"
-                        round
-                    >
-                        好友可见
-                    </n-tag>
-                    <div>
-                        <span class="timestamp-mobile">
-                            {{ formatPrettyDate(post.created_on) }} {{ post.ip_loc }}
-                        </span>
-                    </div>
-            </template>
-            <template #header-extra>
-                <div class="item-header-extra">
-                    <n-dropdown
-                        placement="bottom-end"
-                        trigger="click"
-                        size="small"
-                        :options="tweetOptions"
-                        @select="handleTweetAction"
-                    >
-                        <n-button quaternary circle>
-                            <template #icon>
-                                <n-icon>
-                                    <more-horiz-filled />
-                                </n-icon>
-                            </template>
-                        </n-button>
-                    </n-dropdown>
-                </div>
-            </template>
-            <template #description v-if="post.texts.length > 0">
-                <div @click="goPostDetail(post.id)">
-                    <span v-for="content in post.texts"
-                        :key="content.id"
-                        class="post-text"
-                        @click.stop="doClickText($event, post.id)"
-                        v-html="preparePost(content.content, '展开', '收起', profile.tweetMobileEllipsisSize, inFoldStyle)"
-                    ></span>
-                </div>
-            </template>
-
-            <template #footer>
-                <post-attachment 
-                    v-if="post.attachments.length > 0"
-                    :attachments="post.attachments" />
-                <post-attachment
-                    v-if="post.charge_attachments.length > 0"
-                    :attachments="post.charge_attachments"
-                    :price="post.attachment_price"
-                />
-                <post-image
-                    v-if="post.imgs.length > 0"
-                    :imgs="post.imgs" />
-                <post-video
-                    v-if="post.videos.length > 0"
-                    :videos="post.videos" />
-                <post-link
-                    v-if="post.links.length > 0"
-                    :links="post.links" />
-            </template>
-            <template #action>
-                <n-space justify="space-between">
-                    <div class="opt-item" @click.stop="handlePostStar">
-                        <n-icon size="18" class="opt-item-icon">
-                            <heart-outline />
-                        </n-icon>
-                        {{ post.upvote_count }}
-                    </div>
-                    <div class="opt-item" @click.stop="goPostDetail(post.id)">
-                        <n-icon size="18" class="opt-item-icon">
-                            <chatbox-outline />
-                        </n-icon>
-                        {{ post.comment_count }}
-                    </div>
-                    <div class="opt-item" @click.stop="handlePostCollection">
-                        <n-icon size="18" class="opt-item-icon">
-                            <bookmark-outline />
-                        </n-icon>
-                        {{ post.collection_count }}
-                    </div>
-                </n-space>
-            </template>
-        </n-thing>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { h, ref, computed } from 'vue';
-import type { Component } from 'vue';
-import { NIcon, DropdownOption } from 'naive-ui';
-import { useStoreMain } from '@/store/main';
-import { useRouter } from 'vue-router';
-import { formatPrettyDate } from '@/utils/formatTime';
-import { preparePost } from '@/utils/content';
-import { postStar, postCollection } from '@/api/post';
-import {
-  PaperPlaneOutline,
-  HeartOutline,
-  BookmarkOutline,
-  ChatboxOutline,
-  ShareSocialOutline,
-  PersonAddOutline,
-  PersonRemoveOutline,
-  BodyOutline,
-  WalkOutline,
-} from '@vicons/ionicons5';
-import { MoreHorizFilled } from '@vicons/material';
-import copy from 'copy-to-clipboard';
-import { useStoreProfile } from '@/store/profile';
-import { storeToRefs } from 'pinia';
-
-const router = useRouter();
-
-const storeMain = useStoreMain();
-const storeProfile = useStoreProfile();
-const { profile } = storeToRefs(storeProfile);
-
-const inFoldStyle = ref<boolean>(true);
-const props = withDefaults(
-  defineProps<{
-    post: Item.PostProps;
-    isOwner: boolean;
-    addFriendAction: boolean;
-    addFollowAction: boolean;
-  }>(),
-  {},
-);
-
-const emit = defineEmits<{
-  (e: 'send-whisper', user: Item.UserInfo): void;
-  (e: 'handle-follow-action', user: Item.PostProps): void;
-  (e: 'handle-friend-action', user: Item.PostProps): void;
-}>();
-
-const renderIcon = (icon: Component) => {
-  return () => {
-    return h(NIcon, null, {
-      default: () => h(icon),
-    });
-  };
-};
-
-const tweetOptions = computed(() => {
-  let options: DropdownOption[] = [];
-  if (!props.isOwner) {
-    options.push({
-      label: '私信 @' + props.post.user.username,
-      key: 'whisper',
-      icon: renderIcon(PaperPlaneOutline),
-    });
-  }
-  if (!props.isOwner && props.addFollowAction) {
-    if (props.post.user.is_following) {
-      options.push({
-        label: '取消关注 @' + props.post.user.username,
-        key: 'unfollow',
-        icon: renderIcon(WalkOutline),
-      });
-    } else {
-      options.push({
-        label: '关注 @' + props.post.user.username,
-        key: 'follow',
-        icon: renderIcon(BodyOutline),
-      });
-    }
-  }
-  if (!props.isOwner && props.addFriendAction) {
-    if (props.post.user.is_friend) {
-      options.push({
-        label: '删除好友 @' + props.post.user.username,
-        key: 'delete',
-        icon: renderIcon(PersonRemoveOutline),
-      });
-    } else {
-      options.push({
-        label: '添加朋友 @' + props.post.user.username,
-        key: 'requesting',
-        icon: renderIcon(PersonAddOutline),
-      });
-    }
-  }
-  options.push({
-    label: '复制链接',
-    key: 'copyTweetLink',
-    icon: renderIcon(ShareSocialOutline),
-  });
-  return options;
-});
-
-const handleTweetAction = async (
-  item:
-    | 'copyTweetLink'
-    | 'whisper'
-    | 'follow'
-    | 'unfollow'
-    | 'delete'
-    | 'requesting',
-) => {
-  switch (item) {
-    case 'copyTweetLink':
-      copy(
-        `${window.location.origin}/#/post?id=${post.value.id}&share=copy_link&t=${new Date().getTime()}`,
-      );
-      window.$message.success('链接已复制到剪贴板');
-      break;
-    case 'whisper':
-      emit('send-whisper', props.post.user);
-      break;
-    case 'delete':
-    case 'requesting':
-      emit('handle-friend-action', props.post);
-      break;
-    case 'follow':
-    case 'unfollow':
-      emit('handle-follow-action', props.post);
-      break;
-    default:
-      break;
-  }
-};
-
-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;
-  },
-});
-
-const handlePostStar = () => {
-  postStar({
-    id: post.value.id,
-  })
-    .then((res) => {
-      if (res.status) {
-        post.value = {
-          ...post.value,
-          upvote_count: post.value.upvote_count + 1,
-        };
-      } else {
-        post.value = {
-          ...post.value,
-          upvote_count:
-            post.value.upvote_count > 0 ? post.value.upvote_count - 1 : 0,
-        };
-      }
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-};
-
-const handlePostCollection = () => {
-  postCollection({
-    id: post.value.id,
-  })
-    .then((res) => {
-      if (res.status) {
-        post.value = {
-          ...post.value,
-          collection_count: post.value.collection_count + 1,
-        };
-      } else {
-        post.value = {
-          ...post.value,
-          collection_count:
-            post.value.collection_count > 0
-              ? post.value.collection_count - 1
-              : 0,
-        };
-      }
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-};
-
-const goPostDetail = (id: number) => {
-  router.push({
-    name: 'post',
-    query: {
-      id,
-    },
-  });
-};
-const doClickText = (e: MouseEvent, id: number) => {
-  const detail = (e.target as any).dataset.detail;
-  if (detail && detail !== 'post') {
-    const d = detail.split(':');
-    if (d.length === 2) {
-      storeMain.doRefresh();
-      if (d[0] === 'tag') {
-        router.push({
-          name: 'home',
-          query: {
-            q: d[1],
-            t: 'tag',
-          },
-        });
-      } else {
-        router.push({
-          name: 'user',
-          query: {
-            s: d[1],
-          },
-        });
-      }
-    }
-  } else if (detail && detail === 'post') {
-    inFoldStyle.value = !inFoldStyle.value;
-  } else {
-    goPostDetail(id);
-  }
-};
-</script>
-
-<style lang="less">
-.post-item {
-    width: 100%;
-    padding: 16px;
-    box-sizing: border-box;
-
-    .nickname-wrap {
-        font-size: 14px;
-    }
-    .username-wrap {
-        font-size: 14px;
-        opacity: 0.75;
-    }
-
-    .top-tag {
-        transform: scale(0.75);
-    }
-    .timestamp-mobile {
-        margin-top: 2px;
-        opacity: 0.75;
-        font-size: 11px;
-    }
-    .item-header-extra {
-        display: flex;
-        align-items: center;
-        opacity: 0.75;
-        .timestamp {
-            font-size: 12px;
-        }
-    }
-    .post-text {
-        text-align: justify;
-        overflow: hidden;
-        white-space: pre-wrap;
-        word-break: break-all;
-    }
-
-    .opt-item {
-        display: flex;
-        align-items: center;
-        opacity: 0.7;
-        .opt-item-icon {
-            margin-right: 10px;
-        }
-    }
-    &:hover {
-        background: #f7f9f9;
-        cursor: pointer;
-    }
-
-    .n-thing-avatar {
-        margin-top: 0;
-    }
-    .n-thing-header {
-        line-height: 16px;
-        margin-bottom: 8px !important;
-    }
-}
-.dark {
-    .post-item {
-        &:hover {
-            background: #18181c;
-        }
-        background-color: rgba(16, 16, 20, 0.75);
-    }
-}
-</style>
\ No newline at end of file
diff --git a/web/src/components/post-detail.vue b/web/src/components/post-detail.vue
index 2ed69e16..3e041257 100644
--- a/web/src/components/post-detail.vue
+++ b/web/src/components/post-detail.vue
@@ -259,6 +259,7 @@ 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';
 
 const useFriendship =
   import.meta.env.VITE_USE_FRIENDSHIP.toLowerCase() === 'true';
@@ -491,37 +492,10 @@ const adminOptions = computed(() => {
 });
 
 const onHandleFollowAction = (post: Item.PostProps) => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (post.user.is_following ? '取消关注 @' : '关注 @') +
-      props.post.user.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (post.user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            post.user.is_following = false;
-          })
-          .catch((_err) => {});
-      } else {
-        Api.v1.user.post.follow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            post.user.is_following = true;
-          })
-          .catch((_err) => {});
-      }
-    },
-  });
+	UserAction.followAction(post.user.id, post.user.username, post.user.is_following)
+		.then(_action => {
+			post.user.is_following = _action;
+		})
 };
 
 const goPostDetail = (id: number) => {
diff --git a/web/src/components/post-item.vue b/web/src/components/post-item.vue
index c9f42ac6..7c1c7e62 100644
--- a/web/src/components/post-item.vue
+++ b/web/src/components/post-item.vue
@@ -45,16 +45,21 @@
                     >
                         好友可见
                     </n-tag>
+                    <div v-if="isMobile">
+                        <span class="timestamp-mobile">
+                            {{ formatPrettyDate(post.created_on) }} {{ post.ip_loc }}
+                        </span>
+                    </div>
             </template>
             <template #header-extra>
                 <div class="item-header-extra">
-                    <span class="timestamp">
+                    <span v-if="!isMobile" class="timestamp">
                         {{ post.ip_loc ? post.ip_loc + ' · ' : post.ip_loc }}
                         {{ formatPrettyDate(post.created_on) }}
                     </span>
                     <n-dropdown
                         placement="bottom-end"
-                        trigger="hover"
+                        :trigger="isMobile ? 'click' : 'hover'"
                         size="small"
                         :options="tweetOptions"
                         @select="handleTweetAction"
@@ -70,7 +75,16 @@
                 </div>
             </template>
             <template #description v-if="post.texts.length > 0">
+                <div v-if="isMobile" @click="goPostDetail(post.id)">
+                    <span v-for="content in post.texts"
+                        :key="content.id"
+                        class="post-text"
+                        @click.stop="doClickText($event, post.id)"
+                        v-html="preparePost(content.content, '展开', '收起', profile.tweetMobileEllipsisSize, inFoldStyle)"
+                    ></span>
+                </div>
                 <span
+                    v-else
                     v-for="content in post.texts"
                     :key="content.id"
                     class="post-text hover"
@@ -128,7 +142,7 @@
 import { h, ref, computed } from 'vue';
 import { useStoreMain } from '@/store/main';
 import { useRouter } from 'vue-router';
-import { NIcon } from 'naive-ui';
+import { NIcon, useDialog } from 'naive-ui';
 import type { Component } from 'vue';
 import type { DropdownOption } from 'naive-ui';
 import { formatPrettyDate } from '@/utils/formatTime';
@@ -149,6 +163,8 @@ import { MoreHorizFilled } from '@vicons/material';
 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';
 
 const router = useRouter();
 
@@ -156,21 +172,26 @@ const storeMain = useStoreMain();
 const storeProfile = useStoreProfile();
 const { profile } = storeToRefs(storeProfile);
 
+const dialog = useDialog();
+
 const inFoldStyle = ref<boolean>(true);
-const props = withDefaults(
-  defineProps<{
+const props = withDefaults(defineProps<{
     post: Item.PostProps;
     isOwner: boolean;
-    addFriendAction: boolean;
-    addFollowAction: boolean;
-  }>(),
-  {},
-);
+    addFriendAction?: boolean;
+    addFollowAction?: boolean;
+    isMobile?: boolean;
+}>(), {
+	addFollowAction: false,
+	addFriendAction: false,
+    isMobile: false,
+});
 
 const emit = defineEmits<{
   (e: 'send-whisper', user: Item.UserInfo): void;
   (e: 'handle-follow-action', user: Item.PostProps): void;
   (e: 'handle-friend-action', user: Item.PostProps): void;
+  (e: 'post-follow-action', user_id: number, is_following: boolean): void;
 }>();
 
 const renderIcon = (icon: Component) => {
@@ -253,10 +274,14 @@ const handleTweetAction = async (
       break;
     case 'follow':
     case 'unfollow':
-      emit('handle-follow-action', props.post);
+      UserAction.followAction(props.post.user.id, props.post.user.username, props.post.user.is_following)
+        .then(_action => {
+          emit('post-follow-action', props.post.user.id, _action);
+        })
+		  emit('handle-follow-action', props.post);
       break;
     default:
-      break;
+    	break;
   }
 };
 
@@ -402,6 +427,11 @@ const doClickText = (e: MouseEvent, id: number) => {
     .top-tag {
         transform: scale(0.75);
     }
+    .timestamp-mobile {
+        margin-top: 2px;
+        opacity: 0.75;
+        font-size: 11px;
+    }
     .item-header-extra {
         display: flex;
         align-items: center;
diff --git a/web/src/utils/useUserAction.ts b/web/src/utils/useUserAction.ts
new file mode 100644
index 00000000..2770acef
--- /dev/null
+++ b/web/src/utils/useUserAction.ts
@@ -0,0 +1,48 @@
+import { useDialog } from "naive-ui";
+import { Api } from "./request";
+
+const dialog = useDialog();
+
+export default class UserAction {
+
+    static followAction(userId: number, userName: string, isFollowing: boolean) {
+        return new Promise<boolean>((resolve, reject) => {
+            dialog.success({
+                title: '提示',
+                content:
+                    '确定' +
+                    (isFollowing ? '取消关注 @' : '关注 @') +
+                    userName +
+                    ' 吗？',
+                positiveText: '确定',
+                negativeText: '取消',
+                onPositiveClick: () => {
+                    if (isFollowing) {
+                        Api.v1.user.post.unfollow({
+                            user_id: userId,
+                        })
+                        .then((_res) => {
+                            window.$message.success('操作成功');
+                            resolve(false);
+                        })
+                        .catch((_err) => {
+                            reject(_err);
+                        });
+                    } else {
+                        Api.v1.user.post.follow({
+                            user_id: userId,
+                        })
+                        .then((_res) => {
+                            window.$message.success('关注成功');
+                            resolve(true);
+                        })
+                        .catch((_err) => {
+                            reject(_err);
+                        });
+                    }
+                },
+            });
+        });
+    }
+
+}
\ No newline at end of file
diff --git a/web/src/views/Collection.vue b/web/src/views/Collection.vue
index dfcf08ee..a360f432 100644
--- a/web/src/views/Collection.vue
+++ b/web/src/views/Collection.vue
@@ -11,24 +11,14 @@
                     <n-empty size="large" description="暂无数据" />
                 </div>
 
-                <div v-if="desktopModelShow">
-                    <n-list-item v-for="post in list" :key="post.id">
-                        <post-item :post="post" 
-                            :isOwner="userInfo.id == post.user_id" 
-                            :addFollowAction="true"
-                            @send-whisper="onSendWhisper"
-                            @handle-follow-action="onHandleFollowAction" />
-                    </n-list-item>
-                </div>
-                <div v-else>
-                    <n-list-item v-for="post in list" :key="post.id">
-                        <mobile-post-item :post="post"
-                            :isOwner="userInfo.id == post.user_id" 
-                            :addFollowAction="true"
-                            @send-whisper="onSendWhisper"
-                            @handle-follow-action="onHandleFollowAction" />
-                    </n-list-item>
-                </div>
+                <n-list-item v-for="post in list" :key="post.id">
+                    <post-item :post="post"
+                        :isOwner="userInfo.id == post.user_id"
+                        :isMobile="!desktopModelShow"
+                        addFollowAction
+                        @send-whisper="onSendWhisper"
+                        @post-follow-action="postFollowAction" />
+                </n-list-item>
             </div>
             <!-- 私信组件 -->
             <whisper :show="showWhisper" :user="whisperReceiver" @success="whisperSuccess" />
@@ -94,37 +84,6 @@ const whisperSuccess = () => {
   showWhisper.value = false;
 };
 
-const onHandleFollowAction = (post: Item.PostProps) => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' + (post.user.is_following ? '取消关注' : '关注') + '该用户吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (post.user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            postFollowAction(post.user_id, false);
-          })
-          .catch((_err) => {});
-      } else {
-        Api.v1.user.post.follow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('关注成功');
-            postFollowAction(post.user_id, true);
-          })
-          .catch((_err) => {});
-      }
-    },
-  });
-};
-
 function postFollowAction(userId: number, isFollowing: boolean) {
   for (let index in list.value) {
     if (list.value[index].user_id == userId) {
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index b239ab1a..5604fd1f 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -59,26 +59,15 @@
                 <div class="empty-wrap" v-if="list.length === 0">
                     <n-empty size="large" description="暂无数据" />
                 </div>
-                <div v-if="desktopModelShow">
-                    <n-list-item v-for="post in list" :key="post.id">
-                        <post-item :post="post" 
-                            :isOwner="userInfo.id == post.user_id" 
-                            :addFollowAction="true"
-                            @send-whisper="onSendWhisper"
-                            @handle-follow-action="onHandleFollowAction"
-                            @handle-friend-action="onHandleFriendAction" />
-                    </n-list-item>
-                </div>
-                <div v-else>
-                    <n-list-item v-for="post in list" :key="post.id">
-                        <mobile-post-item :post="post"
-                            :isOwner="userInfo.id == post.user_id" 
-                            :addFollowAction="true"
-                            @send-whisper="onSendWhisper"
-                            @handle-follow-action="onHandleFollowAction"
-                            @handle-friend-action="onHandleFriendAction" />
-                    </n-list-item>
-                </div>
+                <n-list-item v-for="post in list" :key="post.id">
+                    <post-item :post="post"
+                        :isOwner="userInfo.id == post.user_id"
+                        :isMobile="!desktopModelShow"
+                        addFollowAction
+                        @send-whisper="onSendWhisper"
+                        @post-follow-action="postFollowAction"
+                        @handle-friend-action="onHandleFriendAction" />
+                </n-list-item>
             </div>
             <!-- 私信组件 -->
             <whisper :show="showWhisper" :user="whisperReceiver" @success="whisperSuccess" />
@@ -262,40 +251,6 @@ const onHandleFriendAction = (post: Item.PostProps) => {
   }
 };
 
-const onHandleFollowAction = (post: Item.PostProps) => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (post.user.is_following ? '取消关注 @' : '关注 @') +
-      post.user.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (post.user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            postFollowAction(post.user_id, false);
-          })
-          .catch((_err) => {});
-      } else {
-        Api.v1.user.post.follow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('关注成功');
-            postFollowAction(post.user_id, true);
-          })
-          .catch((_err) => {});
-      }
-    },
-  });
-};
-
 function postFollowAction(userId: number, isFollowing: boolean) {
   for (let index in list.value) {
     if (list.value[index].user_id == userId) {
diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue
index eb8c6e51..4ce7dc8f 100644
--- a/web/src/views/Profile.vue
+++ b/web/src/views/Profile.vue
@@ -92,100 +92,14 @@
                 <div class="empty-wrap" v-if="list.length === 0">
                     <n-empty size="large" description="暂无数据" />
                 </div>
-                <div v-if="desktopModelShow">
-                    <div v-if="pageType === 'post'">
-                        <n-list-item v-for="post in postList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'comment'">
-                        <n-list-item v-for="post in commentList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'highlight'">
-                        <n-list-item v-for="post in highlightList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'media'">
-                        <n-list-item v-for="post in mediaList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'star'">
-                        <n-list-item v-for="post in starList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                </div>
-                <div v-else>
-                    <div v-if="pageType === 'post'">
-                        <n-list-item v-for="post in postList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'comment'">
-                        <n-list-item v-for="post in commentList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'highlight'">
-                        <n-list-item v-for="post in highlightList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'media'">
-                        <n-list-item v-for="post in mediaList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'star'">
-                        <n-list-item v-for="post in starList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                </div>
+                  <n-list-item v-for="post in listData" :key="post.id">
+                      <post-item :post="post"
+                          :isOwner="userInfo.id == post.user_id"
+                          :addFollowAction="true"
+                          :isMobile="!desktopModelShow"
+                          @send-whisper="onSendWhisper"
+                          @post-follow-action="postFollowAction" />
+                  </n-list-item>
             </div>
             <!-- 私信组件 -->
             <whisper :show="showWhisper" :user="whisperReceiver" @success="whisperSuccess" />
@@ -219,6 +133,8 @@ import { useStoreUser } from '@/store/user';
 import { storeToRefs } from 'pinia';
 import { Api } from '@/utils/request';
 
+type PageType = 'post' | 'comment' | 'highlight' | 'media' | 'star';
+
 const storeMain = useStoreMain();
 const storeUser = useStoreUser();
 const { refresh, desktopModelShow } = storeToRefs(storeMain);
@@ -235,9 +151,7 @@ const commentList = ref<Item.PostProps[]>([]);
 const highlightList = ref<Item.PostProps[]>([]);
 const mediaList = ref<Item.PostProps[]>([]);
 const starList = ref<Item.PostProps[]>([]);
-const pageType = ref<'post' | 'comment' | 'highlight' | 'media' | 'star'>(
-  'post',
-);
+const pageType = ref<PageType>('post');
 const postPage = ref(+(route.query.p as string) || 1);
 const commentPage = ref(1);
 const highlightPage = ref(1);
@@ -266,6 +180,23 @@ const whisperReceiver = ref<Item.UserInfo>({
   status: 1,
 });
 
+const listData = computed(() => {
+	switch (pageType.value) {
+		case 'post':
+			return postList.value;
+		case 'comment':
+			return commentList.value;
+		case 'highlight':
+			return highlightList.value;
+		case 'media':
+			return mediaList.value;
+		case 'star':
+			return starList.value;
+		default:
+			return [];
+	}
+})
+
 const renderIcon = (icon: Component) => {
   return () => {
     return h(NIcon, null, {
@@ -309,40 +240,6 @@ const whisperSuccess = () => {
   showWhisper.value = false;
 };
 
-const onHandleFollowAction = (post: Item.PostProps) => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (post.user.is_following ? '取消关注 @' : '关注 @') +
-      post.user.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (post.user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            postFollowAction(post.user_id, false);
-          })
-          .catch((_err) => {});
-      } else {
-        Api.v1.user.post.follow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('关注成功');
-            postFollowAction(post.user_id, true);
-          })
-          .catch((_err) => {});
-      }
-    },
-  });
-};
-
 function postFollowAction(userId: number, isFollowing: boolean) {
   updateFolloing(postList.value, userId, isFollowing);
   updateFolloing(commentList.value, userId, isFollowing);
@@ -366,153 +263,27 @@ function updateFolloing(
 }
 
 const loadPage = () => {
-  switch (pageType.value) {
-    case 'post':
-      loadPosts();
-      break;
-    case 'comment':
-      loadCommentPosts();
-      break;
-    case 'highlight':
-      loadHighlightPosts();
-      break;
-    case 'media':
-      loadMediaPosts();
-      break;
-    case 'star':
-      loadStarPosts();
-      break;
-  }
-};
-const loadPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: userInfo.value.username,
-    style: 'post',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      postList.value = list.value;
-      postTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
-};
-const loadCommentPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: userInfo.value.username,
-    style: 'comment',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      commentList.value = list.value;
-      commentTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+  loadPostsByStyle(pageType.value);
 };
-const loadHighlightPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: userInfo.value.username,
-    style: 'highlight',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      highlightList.value = list.value;
-      highlightTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+const styleListMap = {
+  post: { list: postList, totalPage: postTotalPage },
+  comment: { list: commentList, totalPage: commentTotalPage },
+  highlight: { list: highlightList, totalPage: highlightTotalPage },
+  media: { list: mediaList, totalPage: mediaTotalPage },
+  star: { list: starList, totalPage: starTotalPage },
 };
-const loadMediaPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: userInfo.value.username,
-    style: 'media',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      mediaList.value = list.value;
-      mediaTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+const stylePageMap = {
+  post: postPage,
+  comment: commentPage,
+  highlight: highlightPage,
+  media: mediaPage,
+  star: starPage,
 };
-const loadStarPosts = () => {
+function loadPostsByStyle(style: keyof typeof styleListMap) {
   loading.value = true;
   Api.v1.user.get.posts({
     username: userInfo.value.username,
-    style: 'star',
+    style,
     page: page.value,
     page_size: pageSize.value,
   })
@@ -528,77 +299,27 @@ const loadStarPosts = () => {
         window.scrollTo(0, 0);
       }
       totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      starList.value = list.value;
-      starTotalPage.value = totalPage.value;
+      styleListMap[style].list.value = list.value;
+      styleListMap[style].totalPage.value = totalPage.value;
     })
-    .catch((err) => {
+    .catch((_err) => {
       list.value = [];
       if (page.value > 1) {
         page.value--;
       }
       loading.value = false;
     });
-};
-const changeTab = (
-  tab: 'post' | 'comment' | 'highlight' | 'media' | 'star',
-) => {
+}
+const changeTab = (tab: PageType) => {
   pageType.value = tab;
-  switch (pageType.value) {
-    case 'post':
-      list.value = postList.value;
-      page.value = postPage.value;
-      totalPage.value = postTotalPage.value;
-      loadPosts();
-      break;
-    case 'comment':
-      list.value = commentList.value;
-      page.value = commentPage.value;
-      totalPage.value = commentTotalPage.value;
-      loadCommentPosts();
-      break;
-    case 'highlight':
-      list.value = highlightList.value;
-      page.value = highlightPage.value;
-      totalPage.value = highlightTotalPage.value;
-      loadHighlightPosts();
-      break;
-    case 'media':
-      list.value = mediaList.value;
-      page.value = mediaPage.value;
-      totalPage.value = mediaTotalPage.value;
-      loadMediaPosts();
-      break;
-    case 'star':
-      list.value = starList.value;
-      page.value = starPage.value;
-      totalPage.value = starTotalPage.value;
-      loadStarPosts();
-      break;
-  }
+  list.value = styleListMap[tab].list.value;
+  page.value = stylePageMap[tab].value;
+  totalPage.value = styleListMap[tab].totalPage.value;
+  loadPostsByStyle(tab);
 };
 const updatePage = () => {
-  switch (pageType.value) {
-    case 'post':
-      postPage.value = page.value;
-      loadPosts();
-      break;
-    case 'comment':
-      commentPage.value = page.value;
-      loadCommentPosts();
-      break;
-    case 'highlight':
-      highlightPage.value = page.value;
-      loadHighlightPosts();
-      break;
-    case 'media':
-      mediaPage.value = page.value;
-      loadMediaPosts();
-      break;
-    case 'star':
-      starPage.value = page.value;
-      loadStarPosts();
-      break;
-  }
+  stylePageMap[pageType.value].value = page.value;
+  loadPostsByStyle(pageType.value);
 };
 const nextPage = () => {
   if (page.value < totalPage.value || totalPage.value == 0) {
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index d9353379..193700f7 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -104,100 +104,14 @@
                 <div class="empty-wrap" v-if="list.length === 0">
                     <n-empty size="large" description="暂无数据" />
                 </div>
-                <div v-if="desktopModelShow">
-                    <div v-if="pageType === 'post'">
-                        <n-list-item v-for="post in postList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'comment'">
-                        <n-list-item v-for="post in commentList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'highlight'">
-                        <n-list-item v-for="post in highlightList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'media'">
-                        <n-list-item v-for="post in mediaList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'star'">
-                        <n-list-item v-for="post in starList" :key="post.id">
-                            <post-item :post="post" 
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                </div>
-                <div v-else>
-                    <div v-if="pageType === 'post'">
-                        <n-list-item v-for="post in postList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'comment'">
-                        <n-list-item v-for="post in commentList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'highlight'">
-                        <n-list-item v-for="post in highlightList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'media'">
-                        <n-list-item v-for="post in mediaList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                    <div v-if="pageType === 'star'">
-                        <n-list-item v-for="post in starList" :key="post.id">
-                            <mobile-post-item :post="post"
-                                :isOwner="userInfo.id == post.user_id" 
-                                :addFollowAction="true"
-                                @send-whisper="onSendWhisper"
-                                @handle-follow-action="onHandleFollowAction" />
-                        </n-list-item>
-                    </div>
-                </div>
+                <n-list-item v-for="post in listData" :key="post.id">
+                    <post-item :post="post"
+                        :isOwner="userInfo.id == post.user_id"
+                        :isMobile="!desktopModelShow"
+                        addFollowAction
+                        @send-whisper="onSendWhisper"
+                        @post-follow-action="postFollowAction" />
+                </n-list-item>
             </div>
         </n-list>
 
@@ -239,6 +153,9 @@ import { useStoreUser } from '@/store/user';
 import { useStoreProfile } from '@/store/profile';
 import { storeToRefs } from 'pinia';
 import { Api } from '@/utils/request';
+import UserAction from '@/utils/useUserAction';
+
+type PageType = 'post' | 'comment' | 'highlight' | 'media' | 'star';
 
 const dialog = useDialog();
 
@@ -255,18 +172,18 @@ const router = useRouter();
 const loading = ref(false);
 const noMore = ref(false);
 const user = reactive<Item.UserInfo>({
-  id: 0,
-  avatar: '',
-  username: '',
-  nickname: '',
-  is_admin: false,
-  is_friend: true,
-  is_following: false,
-  created_on: 0,
-  follows: 0,
-  followings: 0,
-  tweets_count: 0,
-  status: 1,
+	id: 0,
+	avatar: '',
+	username: '',
+	nickname: '',
+	is_admin: false,
+	is_friend: true,
+	is_following: false,
+	created_on: 0,
+	follows: 0,
+	followings: 0,
+	tweets_count: 0,
+	status: 1,
 });
 const userLoading = ref(false);
 const showWhisper = ref(false);
@@ -279,9 +196,7 @@ const mediaList = ref<Item.PostProps[]>([]);
 const starList = ref<Item.PostProps[]>([]);
 const username = ref(route.query.s || '');
 const page = ref(+(route.query.p as string) || 1);
-const pageType = ref<'post' | 'comment' | 'highlight' | 'media' | 'star'>(
-  'post',
-);
+const pageType = ref<PageType>('post');
 const postPage = ref(+(route.query.p as string) || 1);
 const commentPage = ref(1);
 const highlightPage = ref(1);
@@ -295,302 +210,129 @@ const highlightTotalPage = ref(0);
 const mediaTotalPage = ref(0);
 const starTotalPage = ref(0);
 
-const onSendWhisper = (receiver: Item.UserInfo) => {
-  user.id = receiver.id;
-  user.username = receiver.username;
-  user.nickname = receiver.nickname;
-  user.avatar = receiver.avatar;
-  showWhisper.value = true;
-};
+const listData = computed(() => {
+	switch (pageType.value) {
+		case 'post':
+			return postList.value;
+		case 'comment':
+			return commentList.value;
+		case 'highlight':
+			return highlightList.value;
+		case 'media':
+			return mediaList.value;
+		case 'star':
+			return starList.value;
+		default:
+			return [];
+	}
+})
 
-const onHandleFollowAction = (post: Item.PostProps) => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (post.user.is_following ? '取消关注 @' : '关注 @') +
-      post.user.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      if (post.user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('操作成功');
-            postFollowAction(post.user_id, false);
-          })
-          .catch((_err) => {});
-      } else {
-        Api.v1.user.post.follow({
-          user_id: post.user.id,
-        })
-          .then((_res) => {
-            window.$message.success('关注成功');
-            postFollowAction(post.user_id, true);
-          })
-          .catch((_err) => {});
-      }
-    },
-  });
+const onSendWhisper = (receiver: Item.UserInfo) => {
+	user.id = receiver.id;
+	user.username = receiver.username;
+	user.nickname = receiver.nickname;
+	user.avatar = receiver.avatar;
+	showWhisper.value = true;
 };
 
 function postFollowAction(userId: number, isFollowing: boolean) {
-  updateFolloing(postList, userId, isFollowing);
-  updateFolloing(commentList, userId, isFollowing);
-  updateFolloing(highlightList, userId, isFollowing);
-  updateFolloing(mediaList, userId, isFollowing);
-  updateFolloing(starList, userId, isFollowing);
+	updateFolloing(postList, userId, isFollowing);
+	updateFolloing(commentList, userId, isFollowing);
+	updateFolloing(highlightList, userId, isFollowing);
+	updateFolloing(mediaList, userId, isFollowing);
+	updateFolloing(starList, userId, isFollowing);
 }
 
 function updateFolloing(
-  posts: Ref<Item.PostProps[]>,
-  userId: number,
-  isFollowing: boolean,
+	posts: Ref<Item.PostProps[]>,
+	userId: number,
+	isFollowing: boolean,
 ) {
-  if (posts.value && posts.value.length > 0) {
-    for (let index in posts.value) {
-      if (posts.value[index].user_id == userId) {
-        posts.value[index].user.is_following = isFollowing;
-      }
-    }
-  }
+	if (posts.value && posts.value.length > 0) {
+		for (let index in posts.value) {
+			if (posts.value[index].user_id == userId) {
+				posts.value[index].user.is_following = isFollowing;
+			}
+		}
+	}
 }
 
 const reset = () => {
-  noMore.value = false;
-  list.value = [];
-  postList.value = [];
-  commentList.value = [];
-  highlightList.value = [];
-  mediaList.value = [];
-  starList.value = [];
-  pageType.value = 'post';
-  page.value = 1;
-  postPage.value = 1;
-  commentPage.value = 1;
-  highlightPage.value = 1;
-  mediaPage.value = 1;
-  starPage.value = 1;
-  totalPage.value = 0;
-  postTotalPage.value = 0;
-  commentTotalPage.value = 0;
-  highlightTotalPage.value = 0;
-  mediaTotalPage.value = 0;
-  starTotalPage.value = 0;
+	noMore.value = false;
+	list.value = [];
+	postList.value = [];
+	commentList.value = [];
+	highlightList.value = [];
+	mediaList.value = [];
+	starList.value = [];
+	pageType.value = 'post';
+	page.value = 1;
+	postPage.value = 1;
+	commentPage.value = 1;
+	highlightPage.value = 1;
+	mediaPage.value = 1;
+	starPage.value = 1;
+	totalPage.value = 0;
+	postTotalPage.value = 0;
+	commentTotalPage.value = 0;
+	highlightTotalPage.value = 0;
+	mediaTotalPage.value = 0;
+	starTotalPage.value = 0;
 };
 const loadPage = () => {
-  switch (pageType.value) {
-    case 'post':
-      loadPosts();
-      break;
-    case 'comment':
-      loadCommentPosts();
-      break;
-    case 'highlight':
-      loadHighlightPosts();
-      break;
-    case 'media':
-      loadMediaPosts();
-      break;
-    case 'star':
-      loadStarPosts();
-      break;
-  }
-};
-const loadPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: username.value as string,
-    style: 'post',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      postList.value = list.value;
-      postTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
-};
-const loadCommentPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: username.value as string,
-    style: 'comment',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      commentList.value = list.value;
-      commentTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+	loadPostsByStyle(pageType.value);
 };
-const loadHighlightPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: username.value as string,
-    style: 'highlight',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      highlightList.value = list.value;
-      highlightTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+const styleListMap = {
+	post: { list: postList, totalPage: postTotalPage },
+	comment: { list: commentList, totalPage: commentTotalPage },
+	highlight: { list: highlightList, totalPage: highlightTotalPage },
+	media: { list: mediaList, totalPage: mediaTotalPage },
+	star: { list: starList, totalPage: starTotalPage },
 };
-const loadMediaPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: username.value as string,
-    style: 'media',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      mediaList.value = list.value;
-      mediaTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+function loadPostsByStyle(style: keyof typeof styleListMap) {
+	loading.value = true;
+	Api.v1.user.get.posts({
+		username: username.value as string,
+		style,
+		page: page.value,
+		page_size: pageSize.value,
+	})
+		.then((rsp) => {
+			loading.value = false;
+			if (rsp.list.length === 0) {
+				noMore.value = true;
+			}
+			if (page.value > 1) {
+				list.value = list.value.concat(rsp.list);
+			} else {
+				list.value = rsp.list || [];
+				window.scrollTo(0, 0);
+			}
+			totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
+			styleListMap[style].list.value = list.value;
+			styleListMap[style].totalPage.value = totalPage.value;
+		})
+		.catch((_err) => {
+			list.value = [];
+			if (page.value > 1) {
+				page.value--;
+			}
+			loading.value = false;
+		});
 };
-const loadStarPosts = () => {
-  loading.value = true;
-  Api.v1.user.get.posts({
-    username: username.value as string,
-    style: 'star',
-    page: page.value,
-    page_size: pageSize.value,
-  })
-    .then((rsp) => {
-      loading.value = false;
-      if (rsp.list.length === 0) {
-        noMore.value = true;
-      }
-      if (page.value > 1) {
-        list.value = list.value.concat(rsp.list);
-      } else {
-        list.value = rsp.list || [];
-        window.scrollTo(0, 0);
-      }
-      totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
-      starList.value = list.value;
-      starTotalPage.value = totalPage.value;
-    })
-    .catch((err) => {
-      list.value = [];
-      if (page.value > 1) {
-        page.value--;
-      }
-      loading.value = false;
-    });
+const stylePageMap = {
+  post: postPage,
+  comment: commentPage,
+  highlight: highlightPage,
+  media: mediaPage,
+  star: starPage,
 };
-const changeTab = (
-  tab: 'post' | 'comment' | 'highlight' | 'media' | 'star',
-) => {
-  pageType.value = tab;
-  switch (pageType.value) {
-    case 'post':
-      list.value = postList.value;
-      page.value = postPage.value;
-      totalPage.value = postTotalPage.value;
-      loadPosts();
-      break;
-    case 'comment':
-      list.value = commentList.value;
-      page.value = commentPage.value;
-      totalPage.value = commentTotalPage.value;
-      loadCommentPosts();
-      break;
-    case 'highlight':
-      list.value = highlightList.value;
-      page.value = highlightPage.value;
-      totalPage.value = highlightTotalPage.value;
-      loadHighlightPosts();
-      break;
-    case 'media':
-      list.value = mediaList.value;
-      page.value = mediaPage.value;
-      totalPage.value = mediaTotalPage.value;
-      loadMediaPosts();
-      break;
-    case 'star':
-      list.value = starList.value;
-      page.value = starPage.value;
-      totalPage.value = starTotalPage.value;
-      loadStarPosts();
-      break;
-  }
+function changeTab(tab: PageType) {
+	pageType.value = tab;
+	list.value = styleListMap[tab].list.value;
+	page.value = stylePageMap[tab].value;
+	totalPage.value = styleListMap[tab].totalPage.value;
+	loadPostsByStyle(tab);
 };
 const loadUser = () => {
   userLoading.value = true;
@@ -621,28 +363,8 @@ const loadUser = () => {
     });
 };
 const updatePage = () => {
-  switch (pageType.value) {
-    case 'post':
-      postPage.value = page.value;
-      loadPosts();
-      break;
-    case 'comment':
-      commentPage.value = page.value;
-      loadCommentPosts();
-      break;
-    case 'highlight':
-      highlightPage.value = page.value;
-      loadHighlightPosts();
-      break;
-    case 'media':
-      mediaPage.value = page.value;
-      loadMediaPosts();
-      break;
-    case 'star':
-      starPage.value = page.value;
-      loadStarPosts();
-      break;
-  }
+  stylePageMap[pageType.value].value = page.value;
+  loadPostsByStyle(pageType.value);
 };
 const openWhisper = () => {
   showWhisper.value = true;
@@ -780,10 +502,10 @@ const openDeleteFriend = () => {
       Api.v1.friend.post.delete({
         user_id: user.id,
       })
-        .then((res) => {
+        .then((_res) => {
           userLoading.value = false;
           user.is_friend = false;
-          loadPosts();
+          loadPostsByStyle('post');
         })
         .catch((err) => {
           userLoading.value = false;
@@ -793,46 +515,15 @@ const openDeleteFriend = () => {
   });
 };
 const handleFollowUser = () => {
-  dialog.success({
-    title: '提示',
-    content:
-      '确定' +
-      (user.is_following ? '取消关注 @' : '关注 @') +
-      user.username +
-      ' 吗？',
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: () => {
-      userLoading.value = true;
-      if (user.is_following) {
-        Api.v1.user.post.unfollow({
-          user_id: user.id,
-        })
-          .then((_res) => {
+	UserAction.followAction(user.id, user.username, user.is_following)
+		.then(_action => {
             userLoading.value = false;
-            window.$message.success('操作成功');
             loadUser();
-          })
-          .catch((err) => {
-            userLoading.value = false;
-            console.log(err);
-          });
-      } else {
-        Api.v1.user.post.follow({
-          user_id: user.id,
-        })
-          .then((_res) => {
-            userLoading.value = false;
-            window.$message.success('操作成功');
-            loadUser();
-          })
-          .catch((err) => {
-            userLoading.value = false;
-            console.log(err);
-          });
-      }
-    },
-  });
+		})
+		.catch(err => {
+			userLoading.value = false;
+			console.log(err);
+		});
 };
 const banUser = () => {
   dialog.warning({