From b587ab476e29c30d816b3fd18e9fd25bab770547 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Wed, 3 Dec 2025 14:05:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=82=80=E8=AF=B7=E7=A6=8F=E5=88=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       | 1183 ++++++++++++++---------------
 src/pages/wechat/index.vue        |   97 ++-
 src/static/icon/self/iconfont.css |   30 +
 unocss.config.ts                  |   20 +
 4 files changed, 709 insertions(+), 621 deletions(-)
 create mode 100644 src/static/icon/self/iconfont.css

diff --git a/src/App.vue b/src/App.vue
index 2df9951e..6f89a265 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,632 +1,631 @@
 <script>
-  import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
-  import { ShoproInit } from './sheep';
-  import RecentApi from './sheep/api/member/recent';
+import { onLaunch, onShow, onError } from '@dcloudio/uni-app';
+import { ShoproInit } from './sheep';
+import RecentApi from './sheep/api/member/recent';
 
-  // 与聊天相关的导入
-  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 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';
 
-  export default {
-    /** ↓↓↓ 以下为app启动聊天相关模块初始化，WebSocket链接，加载聊天消息，加载离线消息，加载群组消息，初始化聊天相关的全局状态仓库 */
-    data() {
-      return {
-        isExit: false, // 是否已退出
-        audioTip: null,
-        reconnecting: false, // 正在重连标志
-        privateMessagesBuffer: [],
-        groupMessagesBuffer: [],
-      };
+export default {
+  /** ↓↓↓ 以下为app启动聊天相关模块初始化，WebSocket链接，加载聊天消息，加载离线消息，加载群组消息，初始化聊天相关的全局状态仓库 */
+  data() {
+    return {
+      isExit: false, // 是否已退出
+      audioTip: null,
+      reconnecting: false, // 正在重连标志
+      privateMessagesBuffer: [],
+      groupMessagesBuffer: [],
+    };
+  },
+  methods: {
+    init() {
+      this.reconnecting = false;
+      this.isExit = false;
+      // 加载数据
+      this.loadStore()
+        .then(() => {
+          // 初始化websocket
+          this.initWebSocket();
+        })
+        .catch((e) => {
+          console.log(e);
+          this.exit();
+        });
     },
-    methods: {
-      init() {
-        this.reconnecting = false;
-        this.isExit = false;
-        // 加载数据
-        this.loadStore()
-          .then(() => {
-            // 初始化websocket
-            this.initWebSocket();
-          })
-          .catch((e) => {
-            console.log(e);
-            this.exit();
-          });
-      },
-      initWebSocket() {
-        let loginInfo = uni.getStorageSync('loginInfo');
-        wsApi.connect(CHAT_ENV.WS_URL, loginInfo.accessToken);
-        wsApi.onConnect(() => {
-          if (this.reconnecting) {
-            // 重连成功
-            this.onReconnectWs();
-          } else {
-            // 加载离线消息
-            this.pullOfflineMessage();
-            this.configStore.setAppInit(true);
-          }
-        });
-        wsApi.onMessage((cmd, msgInfo) => {
-          if (cmd == 2) {
-            // 异地登录，强制下线
-            uni.showModal({
-              content: '您已在其他地方登录，将被强制下线',
-              showCancel: false,
-            });
-            this.exit();
-          } else if (cmd == 3) {
-            if (!this.configStore.appInit || this.chatStore.loading) {
-              // 如果正在拉取离线消息，先存入缓存区，等待消息拉取完成再处理，防止消息乱序
-              this.privateMessagesBuffer.push(msgInfo);
-            } else {
-              // 插入私聊消息
-              this.handlePrivateMessage(msgInfo);
-            }
-          } else if (cmd == 4) {
-            if (!this.configStore.appInit || this.chatStore.loading) {
-              // 如果正在拉取离线消息，先存入缓存区，等待消息拉取完成再处理，防止消息乱序
-              this.privateMessagesBuffer.push(msgInfo);
-            } else {
-              // 插入群聊消息
-              this.handleGroupMessage(msgInfo);
-            }
-          } else if (cmd == 5) {
-            // 系统消息
-            this.handleSystemMessage(msgInfo);
-          }
-        });
-        wsApi.onClose((res) => {
-          console.log('ws断开', res);
-          // 重新连接
-          if (!this.reconnecting) {
-            this.reconnectWs();
-            this.configStore.setAppInit(false);
-          }
-        });
-      },
-      loadStore() {
-        return this.userStore.loadUser().then(() => {
-          const promises = [];
-          promises.push(this.friendStore.loadFriend());
-          promises.push(this.groupStore.loadGroup());
-          promises.push(this.chatStore.loadChat());
-          promises.push(this.configStore.loadConfig());
-          return Promise.all(promises);
-        });
-      },
-      unloadStore() {
-        this.friendStore.clear();
-        this.groupStore.clear();
-        this.chatStore.clear();
-        this.configStore.clear();
-        this.userStore.clear();
-      },
-      pullOfflineMessage() {
-        this.chatStore.setLoading(true);
-        const promises = [];
-        promises.push(this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId));
-        promises.push(this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId));
-        Promise.all(promises)
-          .then((messages) => {
-            // 处理离线消息
-            messages[0].forEach((m) => this.handlePrivateMessage(m));
-            messages[1].forEach((m) => this.handleGroupMessage(m));
-            // 处理缓冲区收到的实时消息
-            this.privateMessagesBuffer.forEach((m) => this.handlePrivateMessage(m));
-            this.groupMessagesBuffer.forEach((m) => this.handleGroupMessage(m));
-            // 清空缓冲区
-            this.privateMessagesBuffer = [];
-            this.groupMessagesBuffer = [];
-            // 关闭加载离线标记
-            this.chatStore.setLoading(false);
-            // 刷新会话
-            this.chatStore.refreshChats();
-          })
-          .catch((e) => {
-            console.log(e);
-            uni.showToast({
-              title: '拉取离线消息失败',
-              icon: 'none',
-            });
-            this.exit();
-          });
-      },
-      pullPrivateOfflineMessage(minId) {
-        return this.$http({
-          url: '/message/private/loadOfflineMessage?minId=' + minId,
-          method: 'GET',
-          timeout: 60000,
-        });
-      },
-      pullGroupOfflineMessage(minId) {
-        return this.$http({
-          url: '/message/group/loadOfflineMessage?minId=' + minId,
-          method: 'GET',
-          timeout: 60000,
-        });
-      },
-      handlePrivateMessage(msg) {
-        // 标记这条消息是不是自己发的
-        msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-        // 好友id
-        let friendId = msg.selfSend ? msg.recvId : msg.sendId;
-        // 会话信息
-        let chatInfo = {
-          type: 'PRIVATE',
-          targetId: friendId,
-        };
-        // 消息已读处理，清空已读数量
-        if (msg.type == enums.MESSAGE_TYPE.READED) {
-          this.chatStore.resetUnreadCount(chatInfo);
-          return;
+    initWebSocket() {
+      let loginInfo = uni.getStorageSync('loginInfo');
+      wsApi.connect(CHAT_ENV.WS_URL, loginInfo.accessToken);
+      wsApi.onConnect(() => {
+        if (this.reconnecting) {
+          // 重连成功
+          this.onReconnectWs();
+        } else {
+          // 加载离线消息
+          this.pullOfflineMessage();
+          this.configStore.setAppInit(true);
         }
-        // 消息回执处理,改消息状态为已读
-        if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
-          this.chatStore.readedMessage({
-            friendId: msg.sendId,
-          });
-          return;
-        }
-        // 消息撤回
-        if (msg.type == enums.MESSAGE_TYPE.RECALL) {
-          this.chatStore.recallMessage(msg, chatInfo);
-          return;
-        }
-        // 新增好友
-        if (msg.type == enums.MESSAGE_TYPE.FRIEND_NEW) {
-          this.friendStore.addFriend(JSON.parse(msg.content));
-          return;
-        }
-        // 删除好友
-        if (msg.type == enums.MESSAGE_TYPE.FRIEND_DEL) {
-          this.friendStore.removeFriend(friendId);
-          return;
-        }
-        // 对好友设置免打扰
-        if (msg.type == enums.MESSAGE_TYPE.FRIEND_DND) {
-          this.friendStore.setDnd(friendId, JSON.parse(msg.content));
-          this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
-          return;
-        }
-        // 消息插入
-        let friend = this.loadFriendInfo(friendId);
-        this.insertPrivateMessage(friend, msg);
-      },
-      insertPrivateMessage(friend, msg) {
-        // 单人视频信令
-        if (msgType.isRtcPrivate(msg.type)) {
-          // #ifdef MP-WEIXIN
-          return; // 小程序不支持音视频
-          // #endif
-
-          // 被呼叫，弹出视频页面
-          let delayTime = 100;
-          if (
-            msg.type == enums.MESSAGE_TYPE.RTC_CALL_VOICE ||
-            msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO
-          ) {
-            let mode = msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO ? 'video' : 'voice';
-            let pages = getCurrentPages();
-            let curPage = pages[pages.length - 1].route;
-            if (curPage != 'pages/chat/chat-private-video') {
-              const friendInfo = encodeURIComponent(JSON.stringify(friend));
-              uni.navigateTo({
-                url: `/pages/chat/chat-private-video?mode=${mode}&friend=${friendInfo}&isHost=false`,
-              });
-              delayTime = 500;
-            }
-          }
-          setTimeout(() => {
-            uni.$emit('WS_RTC_PRIVATE', msg);
-          }, delayTime);
-          return;
-        }
-        // 插入消息
-        if (msgType.isNormal(msg.type) || msgType.isTip(msg.type) || msgType.isAction(msg.type)) {
-          let chatInfo = {
-            type: 'PRIVATE',
-            targetId: friend.id,
-            showName: friend.nickName,
-            headImage: friend.headImage,
-            isDnd: friend.isDnd,
-          };
-          // 打开会话
-          this.chatStore.openChat(chatInfo);
-          // 插入消息
-          this.chatStore.insertMessage(msg, chatInfo);
-          // 播放提示音
-          if (
-            !friend.isDnd &&
-            !this.chatStore.loading &&
-            !msg.selfSend &&
-            msgType.isNormal(msg.type) &&
-            msg.status != enums.MESSAGE_STATUS.READED
-          ) {
-            this.playAudioTip();
-          }
-        }
-      },
-      handleGroupMessage(msg) {
-        // 标记这条消息是不是自己发的
-        msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-        let chatInfo = {
-          type: 'GROUP',
-          targetId: msg.groupId,
-        };
-        // 消息已读处理
-        if (msg.type == enums.MESSAGE_TYPE.READED) {
-          // 我已读对方的消息，清空已读数量
-          this.chatStore.resetUnreadCount(chatInfo);
-          return;
-        }
-        // 消息回执处理
-        if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
-          // 更新消息已读人数
-          let msgInfo = {
-            id: msg.id,
-            groupId: msg.groupId,
-            readedCount: msg.readedCount,
-            receiptOk: msg.receiptOk,
-          };
-          this.chatStore.updateMessage(msgInfo, chatInfo);
-          return;
-        }
-        // 消息撤回
-        if (msg.type == enums.MESSAGE_TYPE.RECALL) {
-          this.chatStore.recallMessage(msg, chatInfo);
-          return;
-        }
-        // 新增群
-        if (msg.type == enums.MESSAGE_TYPE.GROUP_NEW) {
-          this.groupStore.addGroup(JSON.parse(msg.content));
-          return;
-        }
-        // 删除群
-        if (msg.type == enums.MESSAGE_TYPE.GROUP_DEL) {
-          this.groupStore.removeGroup(msg.groupId);
-          return;
-        }
-        // 对群设置免打扰
-        if (msg.type == enums.MESSAGE_TYPE.GROUP_DND) {
-          this.groupStore.setDnd(msg.groupId, JSON.parse(msg.content));
-          this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
-          return;
-        }
-        // 插入消息
-        let group = this.loadGroupInfo(msg.groupId);
-        this.insertGroupMessage(group, msg);
-      },
-      handleSystemMessage(msg) {
-        if (msg.type == enums.MESSAGE_TYPE.USER_BANNED) {
-          // 用户被封禁
-          wsApi.close(3099);
+      });
+      wsApi.onMessage((cmd, msgInfo) => {
+        if (cmd == 2) {
+          // 异地登录，强制下线
           uni.showModal({
-            content: '您的账号已被管理员封禁，原因:' + msg.content,
+            content: '您已在其他地方登录，将被强制下线',
             showCancel: false,
           });
           this.exit();
-        }
-      },
-      insertGroupMessage(group, msg) {
-        // 群视频信令
-        if (msgType.isRtcGroup(msg.type)) {
-          // #ifdef MP-WEIXIN
-          return; // 小程序不支持音视频
-          // #endif
-
-          // 被呼叫，弹出视频页面
-          let delayTime = 100;
-          if (msg.type == enums.MESSAGE_TYPE.RTC_GROUP_SETUP) {
-            let pages = getCurrentPages();
-            let curPage = pages[pages.length - 1].route;
-            if (curPage != 'pages/chat/chat-group-video') {
-              const userInfos = encodeURIComponent(msg.content);
-              const inviterId = msg.sendId;
-              const groupId = msg.groupId;
-              uni.navigateTo({
-                url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=false
-    									&inviterId=${inviterId}&userInfos=${userInfos}`,
-              });
-              delayTime = 500;
-            }
+        } else if (cmd == 3) {
+          if (!this.configStore.appInit || this.chatStore.loading) {
+            // 如果正在拉取离线消息，先存入缓存区，等待消息拉取完成再处理，防止消息乱序
+            this.privateMessagesBuffer.push(msgInfo);
+          } else {
+            // 插入私聊消息
+            this.handlePrivateMessage(msgInfo);
           }
-          // 消息转发到chat-group-video页面进行处理
-          setTimeout(() => {
-            uni.$emit('WS_RTC_GROUP', msg);
-          }, delayTime);
-          return;
-        }
-        // 插入消息
-        if (msgType.isNormal(msg.type) || msgType.isTip(msg.type) || msgType.isAction(msg.type)) {
-          let chatInfo = {
-            type: 'GROUP',
-            targetId: group.id,
-            showName: group.showGroupName,
-            headImage: group.headImageThumb,
-            isDnd: group.isDnd,
-          };
-          // 打开会话
-          this.chatStore.openChat(chatInfo);
-          // 插入消息
-          this.chatStore.insertMessage(msg, chatInfo);
-          // 播放提示音
-          if (
-            !group.isDnd &&
-            !this.chatStore.loading &&
-            !msg.selfSend &&
-            msgType.isNormal(msg.type) &&
-            msg.status != enums.MESSAGE_STATUS.READED
-          ) {
-            this.playAudioTip();
+        } else if (cmd == 4) {
+          if (!this.configStore.appInit || this.chatStore.loading) {
+            // 如果正在拉取离线消息，先存入缓存区，等待消息拉取完成再处理，防止消息乱序
+            this.privateMessagesBuffer.push(msgInfo);
+          } else {
+            // 插入群聊消息
+            this.handleGroupMessage(msgInfo);
           }
+        } else if (cmd == 5) {
+          // 系统消息
+          this.handleSystemMessage(msgInfo);
         }
-      },
-      loadFriendInfo(id, callback) {
-        let friend = this.friendStore.findFriend(id);
-        if (!friend) {
-          console.log('未知用户:', id);
-          friend = {
-            id: id,
-            showNickName: '未知用户',
-            headImage: '',
-          };
+      });
+      wsApi.onClose((res) => {
+        console.log('ws断开', res);
+        // 重新连接
+        if (!this.reconnecting) {
+          this.reconnectWs();
+          this.configStore.setAppInit(false);
         }
-        return friend;
-      },
-      loadGroupInfo(id) {
-        let group = this.groupStore.findGroup(id);
-        if (!group) {
-          group = {
-            id: id,
-            showGroupName: '未知群聊',
-            headImageThumb: '',
-          };
-        }
-        return group;
-      },
-      exit() {
-        console.log('exit');
-        this.isExit = true;
-        wsApi.close(3099);
-        uni.removeStorageSync('loginInfo');
-        uni.reLaunch({
-          url: '/pages/login/login',
-        });
-        this.unloadStore();
-      },
-      playAudioTip() {
-        // 音频播放无法成功
-        // this.audioTip = uni.createInnerAudioContext();
-        // this.audioTip.src =  "/static/audio/tip.wav";
-        // this.audioTip.play();
-      },
-      // 刷新token
-      refreshToken(loginInfo) {
-        return new Promise((resolve, reject) => {
-          if (!loginInfo || !loginInfo.refreshToken) {
-            reject();
-            return;
-          }
-          http({
-            url: '/refreshToken',
-            method: 'PUT',
-            header: {
-              refreshToken: loginInfo.refreshToken,
-            },
-          })
-            .then((newLoginInfo) => {
-              uni.setStorageSync('loginInfo', newLoginInfo);
-              resolve();
-            })
-            .catch((e) => {
-              reject(e);
-            });
-        });
-      },
-      reconnectWs() {
-        // 已退出则不再重连
-        if (this.isExit) {
-          return;
-        }
-        // 记录标志
-        this.reconnecting = true;
-        // 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
-        this.userStore
-          .loadUser()
-          .then((userInfo) => {
-            uni.showToast({
-              title: '连接已断开，尝试重新连接...',
-              icon: 'none',
-            });
-            // 重新连接
-            let loginInfo = uni.getStorageSync('loginInfo');
-            wsApi.reconnect(CHAT_ENV.WS_URL, loginInfo.accessToken);
-          })
-          .catch(() => {
-            // 5s后重试
-            setTimeout(() => {
-              this.reconnectWs();
-            }, 5000);
-          });
-      },
-      onReconnectWs() {
-        this.reconnecting = false;
-        // 重新加载好友和群聊
+      });
+    },
+    loadStore() {
+      return this.userStore.loadUser().then(() => {
         const promises = [];
         promises.push(this.friendStore.loadFriend());
         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);
-          })
-          .catch((e) => {
-            console.log(e);
-            this.exit();
-          });
-      },
-      closeSplashscreen(delay) {
-        // #ifdef APP-PLUS
-        // 关闭开机动画
-        setTimeout(() => {
-          plus.navigator.closeSplashscreen();
-        }, delay);
-        // #endif
-      },
-    },
-    /** ↑↑↑ 以上为app启动聊天相关模块初始化，WebSocket链接，加载聊天消息，加载离线消息，加载群组消息，初始化聊天相关的全局状态仓库 */
-
-    onLaunch() {
-      // 隐藏原生导航栏 使用自定义底部导航
-      // uni.hideTabBar({
-      //   fail: () => {},
-      // });
-      // 加载Shopro底层依赖
-      ShoproInit();
-      // app启动时更新用户位置
-      uni.getLocation({
-        geocode: true,
-        success: (res) => {
-          const params = {
-            lat: String(res.latitude),
-            lon: String(res.longitude),
-            province: res.address?.province ?? '',
-            city: res.address?.city ?? '',
-            district: res.address?.district ?? '',
-            address: res.address?.street ?? '',
-          };
-          RecentApi.updateUserLocation(params);
-        },
-        fail: (err) => {
-          uni.showToast({ title: '位置信息获取失败，请打开系统定位', icon: 'none' });
-        },
+        promises.push(this.chatStore.loadChat());
+        promises.push(this.configStore.loadConfig());
+        return Promise.all(promises);
       });
-
-      this.$mountStore();
-      this.closeSplashscreen(1000); // 延迟1s，避免用户看到页面跳转
-      // 登录状态校验
-      let loginInfo = uni.getStorageSync('loginInfo');
-      this.refreshToken(loginInfo)
-        .then(() => {
-          // 聊天初始化
-          this.init();
-          this.closeSplashscreen(0);
+    },
+    unloadStore() {
+      this.friendStore.clear();
+      this.groupStore.clear();
+      this.chatStore.clear();
+      this.configStore.clear();
+      this.userStore.clear();
+    },
+    pullOfflineMessage() {
+      this.chatStore.setLoading(true);
+      const promises = [];
+      promises.push(this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId));
+      promises.push(this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId));
+      Promise.all(promises)
+        .then((messages) => {
+          // 处理离线消息
+          messages[0].forEach((m) => this.handlePrivateMessage(m));
+          messages[1].forEach((m) => this.handleGroupMessage(m));
+          // 处理缓冲区收到的实时消息
+          this.privateMessagesBuffer.forEach((m) => this.handlePrivateMessage(m));
+          this.groupMessagesBuffer.forEach((m) => this.handleGroupMessage(m));
+          // 清空缓冲区
+          this.privateMessagesBuffer = [];
+          this.groupMessagesBuffer = [];
+          // 关闭加载离线标记
+          this.chatStore.setLoading(false);
+          // 刷新会话
+          this.chatStore.refreshChats();
         })
-        .catch(() => {
-          // 跳转到登录页
-          uni.redirectTo({ url: '/pages/login/login' });
+        .catch((e) => {
+          console.log(e);
+          uni.showToast({
+            title: '拉取离线消息失败',
+            icon: 'none',
+          });
+          this.exit();
         });
     },
-    onShow() {
-      // #ifdef APP-PLUS
-      // 获取urlSchemes参数
-      const args = plus.runtime.arguments;
-      if (args) {
-      }
-
-      // 获取剪贴板
-      uni.getClipboardData({
-        success: (res) => {},
+    pullPrivateOfflineMessage(minId) {
+      return this.$http({
+        url: '/message/private/loadOfflineMessage?minId=' + minId,
+        method: 'GET',
+        timeout: 60000,
       });
+    },
+    pullGroupOfflineMessage(minId) {
+      return this.$http({
+        url: '/message/group/loadOfflineMessage?minId=' + minId,
+        method: 'GET',
+        timeout: 60000,
+      });
+    },
+    handlePrivateMessage(msg) {
+      // 标记这条消息是不是自己发的
+      msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+      // 好友id
+      let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+      // 会话信息
+      let chatInfo = {
+        type: 'PRIVATE',
+        targetId: friendId,
+      };
+      // 消息已读处理，清空已读数量
+      if (msg.type == enums.MESSAGE_TYPE.READED) {
+        this.chatStore.resetUnreadCount(chatInfo);
+        return;
+      }
+      // 消息回执处理,改消息状态为已读
+      if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
+        this.chatStore.readedMessage({
+          friendId: msg.sendId,
+        });
+        return;
+      }
+      // 消息撤回
+      if (msg.type == enums.MESSAGE_TYPE.RECALL) {
+        this.chatStore.recallMessage(msg, chatInfo);
+        return;
+      }
+      // 新增好友
+      if (msg.type == enums.MESSAGE_TYPE.FRIEND_NEW) {
+        this.friendStore.addFriend(JSON.parse(msg.content));
+        return;
+      }
+      // 删除好友
+      if (msg.type == enums.MESSAGE_TYPE.FRIEND_DEL) {
+        this.friendStore.removeFriend(friendId);
+        return;
+      }
+      // 对好友设置免打扰
+      if (msg.type == enums.MESSAGE_TYPE.FRIEND_DND) {
+        this.friendStore.setDnd(friendId, JSON.parse(msg.content));
+        this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
+        return;
+      }
+      // 消息插入
+      let friend = this.loadFriendInfo(friendId);
+      this.insertPrivateMessage(friend, msg);
+    },
+    insertPrivateMessage(friend, msg) {
+      // 单人视频信令
+      if (msgType.isRtcPrivate(msg.type)) {
+        // #ifdef MP-WEIXIN
+        return; // 小程序不支持音视频
+        // #endif
+
+        // 被呼叫，弹出视频页面
+        let delayTime = 100;
+        if (
+          msg.type == enums.MESSAGE_TYPE.RTC_CALL_VOICE ||
+          msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO
+        ) {
+          let mode = msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO ? 'video' : 'voice';
+          let pages = getCurrentPages();
+          let curPage = pages[pages.length - 1].route;
+          if (curPage != 'pages/chat/chat-private-video') {
+            const friendInfo = encodeURIComponent(JSON.stringify(friend));
+            uni.navigateTo({
+              url: `/pages/chat/chat-private-video?mode=${mode}&friend=${friendInfo}&isHost=false`,
+            });
+            delayTime = 500;
+          }
+        }
+        setTimeout(() => {
+          uni.$emit('WS_RTC_PRIVATE', msg);
+        }, delayTime);
+        return;
+      }
+      // 插入消息
+      if (msgType.isNormal(msg.type) || msgType.isTip(msg.type) || msgType.isAction(msg.type)) {
+        let chatInfo = {
+          type: 'PRIVATE',
+          targetId: friend.id,
+          showName: friend.nickName,
+          headImage: friend.headImage,
+          isDnd: friend.isDnd,
+        };
+        // 打开会话
+        this.chatStore.openChat(chatInfo);
+        // 插入消息
+        this.chatStore.insertMessage(msg, chatInfo);
+        // 播放提示音
+        if (
+          !friend.isDnd &&
+          !this.chatStore.loading &&
+          !msg.selfSend &&
+          msgType.isNormal(msg.type) &&
+          msg.status != enums.MESSAGE_STATUS.READED
+        ) {
+          this.playAudioTip();
+        }
+      }
+    },
+    handleGroupMessage(msg) {
+      // 标记这条消息是不是自己发的
+      msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+      let chatInfo = {
+        type: 'GROUP',
+        targetId: msg.groupId,
+      };
+      // 消息已读处理
+      if (msg.type == enums.MESSAGE_TYPE.READED) {
+        // 我已读对方的消息，清空已读数量
+        this.chatStore.resetUnreadCount(chatInfo);
+        return;
+      }
+      // 消息回执处理
+      if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
+        // 更新消息已读人数
+        let msgInfo = {
+          id: msg.id,
+          groupId: msg.groupId,
+          readedCount: msg.readedCount,
+          receiptOk: msg.receiptOk,
+        };
+        this.chatStore.updateMessage(msgInfo, chatInfo);
+        return;
+      }
+      // 消息撤回
+      if (msg.type == enums.MESSAGE_TYPE.RECALL) {
+        this.chatStore.recallMessage(msg, chatInfo);
+        return;
+      }
+      // 新增群
+      if (msg.type == enums.MESSAGE_TYPE.GROUP_NEW) {
+        this.groupStore.addGroup(JSON.parse(msg.content));
+        return;
+      }
+      // 删除群
+      if (msg.type == enums.MESSAGE_TYPE.GROUP_DEL) {
+        this.groupStore.removeGroup(msg.groupId);
+        return;
+      }
+      // 对群设置免打扰
+      if (msg.type == enums.MESSAGE_TYPE.GROUP_DND) {
+        this.groupStore.setDnd(msg.groupId, JSON.parse(msg.content));
+        this.chatStore.setDnd(chatInfo, JSON.parse(msg.content));
+        return;
+      }
+      // 插入消息
+      let group = this.loadGroupInfo(msg.groupId);
+      this.insertGroupMessage(group, msg);
+    },
+    handleSystemMessage(msg) {
+      if (msg.type == enums.MESSAGE_TYPE.USER_BANNED) {
+        // 用户被封禁
+        wsApi.close(3099);
+        uni.showModal({
+          content: '您的账号已被管理员封禁，原因:' + msg.content,
+          showCancel: false,
+        });
+        this.exit();
+      }
+    },
+    insertGroupMessage(group, msg) {
+      // 群视频信令
+      if (msgType.isRtcGroup(msg.type)) {
+        // #ifdef MP-WEIXIN
+        return; // 小程序不支持音视频
+        // #endif
+
+        // 被呼叫，弹出视频页面
+        let delayTime = 100;
+        if (msg.type == enums.MESSAGE_TYPE.RTC_GROUP_SETUP) {
+          let pages = getCurrentPages();
+          let curPage = pages[pages.length - 1].route;
+          if (curPage != 'pages/chat/chat-group-video') {
+            const userInfos = encodeURIComponent(msg.content);
+            const inviterId = msg.sendId;
+            const groupId = msg.groupId;
+            uni.navigateTo({
+              url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=false
+    									&inviterId=${inviterId}&userInfos=${userInfos}`,
+            });
+            delayTime = 500;
+          }
+        }
+        // 消息转发到chat-group-video页面进行处理
+        setTimeout(() => {
+          uni.$emit('WS_RTC_GROUP', msg);
+        }, delayTime);
+        return;
+      }
+      // 插入消息
+      if (msgType.isNormal(msg.type) || msgType.isTip(msg.type) || msgType.isAction(msg.type)) {
+        let chatInfo = {
+          type: 'GROUP',
+          targetId: group.id,
+          showName: group.showGroupName,
+          headImage: group.headImageThumb,
+          isDnd: group.isDnd,
+        };
+        // 打开会话
+        this.chatStore.openChat(chatInfo);
+        // 插入消息
+        this.chatStore.insertMessage(msg, chatInfo);
+        // 播放提示音
+        if (
+          !group.isDnd &&
+          !this.chatStore.loading &&
+          !msg.selfSend &&
+          msgType.isNormal(msg.type) &&
+          msg.status != enums.MESSAGE_STATUS.READED
+        ) {
+          this.playAudioTip();
+        }
+      }
+    },
+    loadFriendInfo(id, callback) {
+      let friend = this.friendStore.findFriend(id);
+      if (!friend) {
+        console.log('未知用户:', id);
+        friend = {
+          id: id,
+          showNickName: '未知用户',
+          headImage: '',
+        };
+      }
+      return friend;
+    },
+    loadGroupInfo(id) {
+      let group = this.groupStore.findGroup(id);
+      if (!group) {
+        group = {
+          id: id,
+          showGroupName: '未知群聊',
+          headImageThumb: '',
+        };
+      }
+      return group;
+    },
+    exit() {
+      console.log('exit');
+      this.isExit = true;
+      wsApi.close(3099);
+      uni.removeStorageSync('loginInfo');
+      uni.reLaunch({
+        url: '/pages/login/login',
+      });
+      this.unloadStore();
+    },
+    playAudioTip() {
+      // 音频播放无法成功
+      // this.audioTip = uni.createInnerAudioContext();
+      // this.audioTip.src =  "/static/audio/tip.wav";
+      // this.audioTip.play();
+    },
+    // 刷新token
+    refreshToken(loginInfo) {
+      return new Promise((resolve, reject) => {
+        if (!loginInfo || !loginInfo.refreshToken) {
+          reject();
+          return;
+        }
+        http({
+          url: '/refreshToken',
+          method: 'PUT',
+          header: {
+            refreshToken: loginInfo.refreshToken,
+          },
+        })
+          .then((newLoginInfo) => {
+            uni.setStorageSync('loginInfo', newLoginInfo);
+            resolve();
+          })
+          .catch((e) => {
+            reject(e);
+          });
+      });
+    },
+    reconnectWs() {
+      // 已退出则不再重连
+      if (this.isExit) {
+        return;
+      }
+      // 记录标志
+      this.reconnecting = true;
+      // 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
+      this.userStore
+        .loadUser()
+        .then((userInfo) => {
+          uni.showToast({
+            title: '连接已断开，尝试重新连接...',
+            icon: 'none',
+          });
+          // 重新连接
+          let loginInfo = uni.getStorageSync('loginInfo');
+          wsApi.reconnect(CHAT_ENV.WS_URL, loginInfo.accessToken);
+        })
+        .catch(() => {
+          // 5s后重试
+          setTimeout(() => {
+            this.reconnectWs();
+          }, 5000);
+        });
+    },
+    onReconnectWs() {
+      this.reconnecting = false;
+      // 重新加载好友和群聊
+      const promises = [];
+      promises.push(this.friendStore.loadFriend());
+      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);
+        })
+        .catch((e) => {
+          console.log(e);
+          this.exit();
+        });
+    },
+    closeSplashscreen(delay) {
+      // #ifdef APP-PLUS
+      // 关闭开机动画
+      setTimeout(() => {
+        plus.navigator.closeSplashscreen();
+      }, delay);
       // #endif
     },
-  };
+  },
+  /** ↑↑↑ 以上为app启动聊天相关模块初始化，WebSocket链接，加载聊天消息，加载离线消息，加载群组消息，初始化聊天相关的全局状态仓库 */
+
+  onLaunch() {
+    // 隐藏原生导航栏 使用自定义底部导航
+    // uni.hideTabBar({
+    //   fail: () => {},
+    // });
+    // 加载Shopro底层依赖
+    ShoproInit();
+    // app启动时更新用户位置
+    uni.getLocation({
+      geocode: true,
+      success: (res) => {
+        const params = {
+          lat: String(res.latitude),
+          lon: String(res.longitude),
+          province: res.address?.province ?? '',
+          city: res.address?.city ?? '',
+          district: res.address?.district ?? '',
+          address: res.address?.street ?? '',
+        };
+        RecentApi.updateUserLocation(params);
+      },
+      fail: (err) => {
+        uni.showToast({ title: '位置信息获取失败，请打开系统定位', icon: 'none' });
+      },
+    });
+
+    this.$mountStore();
+    this.closeSplashscreen(1000); // 延迟1s，避免用户看到页面跳转
+    // 登录状态校验
+    let loginInfo = uni.getStorageSync('loginInfo');
+    this.refreshToken(loginInfo)
+      .then(() => {
+        // 聊天初始化
+        this.init();
+        this.closeSplashscreen(0);
+      })
+      .catch(() => {
+        // 跳转到登录页
+        uni.redirectTo({ url: '/pages/login/login' });
+      });
+  },
+  onShow() {
+    // #ifdef APP-PLUS
+    // 获取urlSchemes参数
+    const args = plus.runtime.arguments;
+    if (args) {
+    }
+
+    // 获取剪贴板
+    uni.getClipboardData({
+      success: (res) => { },
+    });
+    // #endif
+  },
+};
 </script>
 
 <style lang="scss">
-  /* @import '@/sheep/scss/index.scss'; */
+/* @import '@/sheep/scss/index.scss'; */
 
-  :root,
-  page {
-    font-family: Noto Sans SC, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
-      Microsoft YaHei, SimSun, sans-serif, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
+:root,
+page {
+  font-family: Noto Sans SC, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, SimSun, sans-serif, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
-    user-select: none;
-    background-color: #222222;
-    color: #ffffff;
-    font-size: 14px;
-    height: 100%;
-    --wot-color-theme: #d29e52;
-    --wot-backtop-bg: #d29e52;
-    --wot-dark-background: #222;
-    --wot-dark-background2: #222;
-    --wot-dark-color: #d29e52;
-    --wot-picker-toolbar-title-color: #fff;
-    // background-image: url(./static/page-bg.png);
-    // background-repeat: no-repeat;
-    // background-size: 100% 100%;
-  }
+  user-select: none;
+  background-color: #222222;
+  color: #ffffff;
+  font-size: 14px;
+  height: 100%;
+  --wot-color-theme: #d29e52;
+  --wot-backtop-bg: #d29e52;
+  --wot-dark-background: #222;
+  --wot-dark-background2: #222;
+  --wot-dark-color: #d29e52;
+  --wot-picker-toolbar-title-color: #fff;
+  // background-image: url(./static/page-bg.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+}
 
-  @import '@/im.scss';
-  @import url('./static/icon/iconfont.css');
+@import '@/im.scss';
+@import url('./static/icon/iconfont.css');
+@import url('./static/icon/self/iconfont.css');
+
+// #ifdef H5
+uni-page-head {
+  display: none; // h5浏览器本身就有标题
+}
+
+// #endif
+.tab-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   // #ifdef H5
-  uni-page-head {
-    display: none; // h5浏览器本身就有标题
-  }
+  height: calc(100vh - 50px - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
+  top: $im-nav-bar-height;
   // #endif
-  .tab-page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    // #ifdef H5
-    height: calc(100vh - 50px - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
-    top: $im-nav-bar-height;
-    // #endif
 
-    // #ifdef APP-PLUS
-    height: calc(
-      100vh - var(--status-bar-height) - $im-nav-bar-height
-    ); // app平台还要减去顶部手机状态栏高度
-    top: calc($im-nav-bar-height + var(--status-bar-height));
-    // #endif
+  // #ifdef APP-PLUS
+  height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height ); // app平台还要减去顶部手机状态栏高度
+  top: calc($im-nav-bar-height + var(--status-bar-height));
+  // #endif
 
-    // #ifdef MP-WEIXIN
-    height: calc(100vh - $im-nav-bar-height);
-    top: $im-nav-bar-height;
+  // #ifdef MP-WEIXIN
+  height: calc(100vh - $im-nav-bar-height);
+  top: $im-nav-bar-height;
 
-    // #endif
-    color: $im-text-color;
-    background: $im-bg-linear;
-    font-size: $im-font-size;
-  }
+  // #endif
+  color: $im-text-color;
+  background: $im-bg-linear;
+  font-size: $im-font-size;
+}
 
-  .page {
-    position: relative;
-    // #ifdef H5
-    height: calc(100vh - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
-    top: $im-nav-bar-height;
-    // #endif
+.page {
+  position: relative;
+  // #ifdef H5
+  height: calc(100vh - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
+  top: $im-nav-bar-height;
+  // #endif
 
-    // #ifdef APP-PLUS
-    height: calc(
-      100vh - var(--status-bar-height) - $im-nav-bar-height
-    ); // app平台还要减去顶部手机状态栏高度
-    top: calc($im-nav-bar-height + var(--status-bar-height));
-    // #endif
+  // #ifdef APP-PLUS
+  height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height ); // app平台还要减去顶部手机状态栏高度
+  top: calc($im-nav-bar-height + var(--status-bar-height));
+  // #endif
 
-    // #ifdef MP-WEIXIN
-    height: calc(100vh - $im-nav-bar-height);
-    top: $im-nav-bar-height;
-    // #endif
+  // #ifdef MP-WEIXIN
+  height: calc(100vh - $im-nav-bar-height);
+  top: $im-nav-bar-height;
+  // #endif
 
-    color: $im-text-color;
-    background: $im-bg-linear;
-    font-size: $im-font-size;
-  }
+  color: $im-text-color;
+  background: $im-bg-linear;
+  font-size: $im-font-size;
+}
 </style>
diff --git a/src/pages/wechat/index.vue b/src/pages/wechat/index.vue
index 143b2b75..314c3f06 100644
--- a/src/pages/wechat/index.vue
+++ b/src/pages/wechat/index.vue
@@ -7,11 +7,11 @@
             </template>
         </wd-navbar>
         <!-- 用户信息 -->
-        <view class="bg-gradient-to-b flex justify-between items-center">
-            <view class="flex items-center p-6">
-                <image :src="userInfo.avatar"
-                    class="mr-4 size-50px rounded-full bg-#333 border border-amber border-solid" mode="aspectFill" />
-                <view class="flex-1">
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx flex justify-between items-center px-6 py-4">
+            <view class="flex items-center">
+                <image :src="userInfo.avatar" class="size-50px rounded-full bg-#333 border border-amber border-solid"
+                    mode="aspectFill" />
+                <view class="flex-1 ml-20rpx">
                     <view class="mb-1 text-base">{{ userInfo.nickname }}</view>
                     <view class="mb-2 text-xs text-#ffffff80 flex items-center">
                         <text>ID: {{ userInfo.id }}</text>
@@ -19,43 +19,66 @@
                     </view>
                 </view>
             </view>
-            <view>
+            <view
+                class="text-color-theme-dark border-color-theme border-1px border-solid active_cl_bg-color-theme text-xs text-center px-2 py-8rpx rounded-full">
                 退出登录
             </view>
         </view>
         <!-- 提现相关 -->
-        <view>
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
             <view class="flex items-center justify-center">
                 <view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.txTab" :key="i">
-                    <text>{{ v.title }}</text>
-                    <text>{{ v.value }}</text>
+                    <text class="text-color-theme text-2xl">{{ v.value }}</text>
+                    <text class="mt-10rpx">{{ v.title }}</text>
                 </view>
             </view>
-            <view class="flex justify-center items-center">
-                <text>立即提现</text>
+            <view class="flex justify-center items-center mt-30rpx">
+                <text
+                    class="bg-color-theme-dark active_cl_bg-color-theme text-base text-center px-80rpx py-12rpx rounded-full">
+                    立即提现
+                </text>
             </view>
         </view>
         <!-- tab -->
-        <view class="flex justify-center items-center">
-            <view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.menuTab" :key="i">
-                <image class="size-40rpx" :src="v.icon" mode="aspectFill" />
-                <text>{{ v.title }}</text>
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx py-4 flex justify-evenly items-center">
+            <view class="flex-1 flex-col justify-center items-center" v-for="(v, i) in data.menuTab" :key="i"
+                @tap="doItem(v)">
+                <div class="size-100rpx flex justify-center items-center rounded-full"
+                    :style="{ backgroundColor: v.bgColor }">
+                    <text class="iconfont text-2xl" :class="v.icon" />
+                </div>
+                <text class="mt-10rpx">{{ v.title }}</text>
             </view>
         </view>
         <!-- 规则 -->
-        <view>
-            <view>邀请奖励规则</view>
-            <view>
-                <view v-for="(v, i) in data.rule">
-                    <text>{{ i + 1 }}</text>
-                    <text>{{ v.title }}</text>
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
+            <view class="text-lg">邀请奖励规则</view>
+            <view class="mt-30rpx">
+                <view class="card-thin flex items-start px-16rpx py-12rpx mb-15rpx" v-for="(v, i) in data.rule">
+                    <view class="size-40rpx flex justify-center items-center bg-color-theme-dark rounded-8rpx">
+                        <text class="text-base">{{ i + 1 }}</text>
+                    </view>
+                    <text class="ml-20rpx text-xs">{{ v.title }}</text>
                 </view>
             </view>
         </view>
         <!-- 海报 -->
-        <view>
-            <view>我的邀请海报</view>
+        <view class="mx-20rpx mt-30rpx bg-color-dark rounded-12rpx px-6 py-4">
+            <view class="text-lg">我的邀请海报</view>
+            <image class="mt-30rpx" src="/src/static/upload-icon.png" mode="widthFix" />
+            <view class="mt-30rpx flex justify-between items-center text-xs">
+                <view
+                    class="flex-1 text-center px-2 py-8rpx border-1px border-solid rounded-full border-color-theme active_cl_bg-color-theme">
+                    复制链接
+                </view>
+                <view class="w-30rpx" />
+                <view
+                    class="flex-1 text-center px-2 py-8rpx border-1px border-solid rounded-full border-color-theme-dark bg-color-theme-dark active_cl_bg-color-theme">
+                    保存海报
+                </view>
+            </view>
         </view>
+        <view class="h-30rpx" />
     </wd-config-provider>
 </template>
 
@@ -86,29 +109,45 @@ const data = {
     menuTab: [
         {
             title: '礼物奖励',
-            value: '100',
+            icon: 'icon-liwu',
+            bgColor: '#fad34a',
+            path: "",
         },
         {
             title: '钻石充值',
-            value: '100',
+            icon: 'icon-lv_zuanshi_fill',
+            bgColor: '#ff5081',
+            path: "/pages/profile/recharge",
         },
         {
             title: '会员中心',
-            value: '100',
+            icon: 'icon-huiyuan',
+            bgColor: '#ebc26a',
+            path: "/pages/profile/apply-vip",
         },
         {
             title: '邀请好友',
-            value: '100',
+            icon: 'icon-tianjiahaoyou',
+            bgColor: '#a4e55a',
+            path: "",
         },
     ],
     rule: [
         {
-            title: '邀请好友注册，即可获得100钻石',
+            title: '通过链接/二维码邀请用户首次充值,可获得50%现金奖励',
         },
         {
-            title: '好友注册后，即可获得100钻石',
+            title: '邀请奖励满200元可提现,3个月工作日内到账',
         },
     ],
 }
 
+const doItem = (item) => {
+    if (item.path) {
+        uni.navigateTo({
+            url: item.path,
+        });
+    }
+}
+
 </script>
\ No newline at end of file
diff --git a/src/static/icon/self/iconfont.css b/src/static/icon/self/iconfont.css
new file mode 100644
index 00000000..e5d50cfd
--- /dev/null
+++ b/src/static/icon/self/iconfont.css
@@ -0,0 +1,30 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5079650 */
+  src: url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.woff2?t=1764739737667') format('woff2'),
+       url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.woff?t=1764739737667') format('woff'),
+       url('//at.alicdn.com/t/c/font_5079650_q7e82zvyi4j.ttf?t=1764739737667') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-huiyuan:before {
+  content: "\e67e";
+}
+
+.icon-lv_zuanshi_fill:before {
+  content: "\e601";
+}
+
+.icon-tianjiahaoyou:before {
+  content: "\e618";
+}
+
+.icon-liwu:before {
+  content: "\e600";
+}
diff --git a/unocss.config.ts b/unocss.config.ts
index 93eadc62..cbfcdf3a 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -47,6 +47,18 @@ export default {
         'background-color': '#B37B2E',
       },
     ],
+    [
+      'border-color-theme',
+      {
+        'border-color': '#F9C26F',
+      },
+    ],
+    [
+      'border-color-theme-dark',
+      {
+        'border-color': '#D29E52',
+      },
+    ],
     [
       'text-color-theme',
       {
@@ -85,6 +97,14 @@ export default {
         'border-radius': '16rpx',
       },
     ],
+    [
+      'card-thin',
+      {
+        'background-color': 'rgba(0, 0, 0, 0.3)',
+        'box-shadow': 'rgba(0, 0, 0, 0.05) 0px 0px 0px 1px',
+        'border-radius': '16rpx',
+      },
+    ],
   ],
 
   transformers: [transformerAttributify(), transformerClass()],