diff --git a/index.html b/index.html
index f8a54cb6..ba557490 100644
--- a/index.html
+++ b/index.html
@@ -3,11 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <script>
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
-        CSS.supports('top: constant(a)'))
+      var coverSupport =
+        'CSS' in window &&
+        typeof CSS.supports === 'function' &&
+        (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'));
       document.write(
         '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+          (coverSupport ? ', viewport-fit=cover' : '') +
+          '" />',
+      );
     </script>
     <title></title>
     <!--preload-links-->
diff --git a/src/App.vue b/src/App.vue
index 5f69c76c..d82569d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,15 @@
 <script>
+import { mapState } from 'pinia';
 import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
 import { ShoproInit } from './sheep';
-
-// 与聊天相关的导入
 import http from './common/request';
 import * as msgType from './common/messageType';
 import * as enums from './common/enums';
 import * as wsApi from './common/wssocket';
 import CHAT_ENV from '@/chat-env.js';
 
+import useChatStore from '@/chat-store/chatStore.js';
+
 export default {
   /** ↓↓↓ 以下为app启动聊天相关模块初始化，WebSocket链接，加载聊天消息，加载离线消息，加载群组消息，初始化聊天相关的全局状态仓库 */
   data() {
@@ -22,9 +23,10 @@ export default {
   },
   // #ifndef MP-WEIXIN
   computed: {
+    ...mapState(useChatStore, ['chats']),
     unreadCount() {
       let count = 0;
-      this.chatStore?.chats?.forEach((chat) => {
+      this.chats?.forEach((chat) => {
         if (!chat.isDnd && !chat.delete && chat.targetId != -200) {
           count += chat.unreadCount;
         }
@@ -34,15 +36,24 @@ export default {
   },
   watch: {
     unreadCount(newCount, oldCount) {
+      console.log("watch:");
       this.refreshUnreadBadge();
     },
   },
   methods: {
     refreshUnreadBadge() {
-      if (this.unreadCount > 0) {
+      let count = this.unreadCount
+      if (count <= 0) {
+        this.chatStore?.chats?.forEach((chat) => {
+          if (!chat.isDnd && !chat.delete && chat.targetId != -200) {
+            count += chat.unreadCount;
+          }
+        });
+      }
+      if (count > 0) {
         uni.setTabBarBadge({
           index: 2,
-          text: this.unreadCount + '',
+          text: count + '',
         });
       } else {
         uni.removeTabBarBadge({
@@ -60,6 +71,7 @@ export default {
         await this.loadStore()
         // 初始化websocket
         this.initWebSocket();
+        this.refreshUnreadBadge()
       } catch (error) {
         console.log("初始化聊天:", error);
         this.exit();
@@ -153,7 +165,6 @@ export default {
           this.chatStore.setLoading(false);
           // 刷新会话
           this.chatStore.refreshChats();
-          this.refreshUnreadBadge()
         })
         .catch((e) => {
           console.log(e);
@@ -467,10 +478,6 @@ export default {
       this.userStore
         .loadUser()
         .then((userInfo) => {
-          // uni.showToast({
-          //   title: '连接已断开，尝试重新连接...',
-          //   icon: 'none',
-          // });
           // 重新连接
           let loginInfo = uni.getStorageSync('loginInfo');
           wsApi.reconnect(CHAT_ENV.WS_URL, loginInfo.accessToken);
@@ -490,15 +497,10 @@ export default {
       promises.push(this.groupStore.loadGroup());
       Promise.all(promises)
         .then(() => {
-          // uni.showToast({
-          //   title: '已重新连接',
-          //   icon: 'none',
-          // });
           // 加载离线消息
           this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId);
           this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId);
           this.configStore.setAppInit(true);
-          this.refreshUnreadBadge()
         })
         .catch((e) => {
           console.log(e);
diff --git a/src/chat-store/chatStore.js b/src/chat-store/chatStore.js
index dda13619..84dddab3 100644
--- a/src/chat-store/chatStore.js
+++ b/src/chat-store/chatStore.js
@@ -29,6 +29,9 @@ export default defineStore('chatStore', {
 			}
 			this.privateMsgMaxId = chatsData.privateMsgMaxId || 0;
 			this.groupMsgMaxId = chatsData.groupMsgMaxId || 0;
+			console.log("=================================");
+			console.log("chats:", this.chats);
+			console.log("=================================");
 		},
 		openChat(chatInfo) {
 			let chats = this.curChats;
diff --git a/src/pages/tabbar/profile.vue b/src/pages/tabbar/profile.vue
index b56fef0d..ab3a3dbd 100644
--- a/src/pages/tabbar/profile.vue
+++ b/src/pages/tabbar/profile.vue
@@ -65,22 +65,24 @@
       </view>
 
       <!-- 开通vip -->
-      <navigator url="/pages/profile/apply-vip" open-type="navigate" hover-class="navigator-hover">
-        <view class="menu flex items-center py-2 px-3 mx-4">
+      <navigator class="relative mx-4 overflow-hidden" url="/pages/profile/apply-vip" open-type="navigate"
+        hover-class="navigator-hover">
+        <image class="w-full block" src="/src/static/me/bg.png" mode="widthFix">
+        </image>
+        <view class="z-100 absolute top-16rpx left-24rpx flex items-center">
           <image class="size-48rpx" src="/src/static/me/vip.png" mode="scaleToFill" />
           <view class="color-#222 font-size-sm font-bold">
             开通会员 尊享特权
           </view>
-          <view class="absolute right-18rpx top-18rpx flex items-center text-color-theme font-size-24rpx">
-            <text>去开通</text>
-            <text class="iconfont icon-youjiantou font-size-24rpx!"></text>
-          </view>
+        </view>
+        <view class="absolute right-18rpx top-18rpx flex items-center text-color-theme font-size-24rpx">
+          <text>去开通</text>
+          <text class="iconfont icon-youjiantou font-size-24rpx!"></text>
         </view>
       </navigator>
       <view
         class="mx-4 px-1 py-2 rounded-b-2 bg-gradient-to-b from-#111 to-#222 b-b-4 b-solid b-t-#D29E52/60 b-l-#D29E52/40 b-r-#D29E52/40 b-b-#D29E52/20 flex items-center justify-evenly">
-        <view v-for="(v, i) in menu" :key="i" class="menu-item flex flex-col-center size-150rpx relative"
-          @tap="onTapMenu(v)">
+        <view v-for="(v, i) in menu" :key="i" class="flex flex-col-center size-150rpx relative" @tap="onTapMenu(v)">
           <image :src="v.icon" mode="aspectFill" class="size-full" />
           <text class="text-xs absolute bottom-20rpx font-size-24rpx" :style="{ color: v.titleColor }">{{ v.title
           }}</text>
@@ -315,10 +317,4 @@ const onTapMenu = (item: any) => {
 }
 </script>
 
-<style lang="scss" scope>
-.menu {
-  background: url("/src/static/me/bg.png") no-repeat;
-  background-size: 100%;
-  position: relative;
-}
-</style>
\ No newline at end of file
+<style lang="scss" scope></style>
\ No newline at end of file