feat:新增用户悬浮卡片

Yi.Bbs.Vue3/src/components/AvatarInfo.vue

@@ -1,30 +1,32 @@
 <template>
   <div class="avatar">
     <div class="avatar-left">
-      <el-avatar :size="props.size" :src="iconUrl" />
-
       <div v-if="props.isSelf" class="avatar-center">
+        <el-avatar :size="props.size" :src="iconUrl" />
         <div class="nick">{{ userInfo.nick }}</div>
       </div>
-
-      <div v-if="!props.isSelf">
-        <div class="nick" :class="{ mt_1: props.time != 'undefined' }">
-          <div class="text">{{ userInfo.nick }}</div>
-          <div class="level">
-            <el-tag round effect="light" type="success" v-if="userInfo.level">{{
-              userInfo.level
-            }}</el-tag>
+      <div v-if="!props.isSelf" class="avatar-card">
+        <!-- 悬浮卡片 -->
+        <userInfo-card :userInfo="userInfo" :iconUrl="iconUrl" />
+        <div class="content">
+          <div class="nick" :class="{ mt_1: props.time != 'undefined' }">
+            <div class="text">{{ userInfo.nick }}</div>
+            <div class="level">
+              <el-tag round effect="light" type="success" v-if="userInfo.level"
+                >等级{{ userInfo.level }}</el-tag
+              >
+            </div>
+            <div class="status" v-if="userInfo.userLimit">
+              <el-tag round effect="light" :type="userInfo.userLimit.type">
+                {{ userInfo.userLimit.label }}
+              </el-tag>
+            </div>
           </div>
-          <div class="status" v-if="userInfo.userLimit">
-            <el-tag round effect="light" :type="userInfo.userLimit.type">
-              {{ userInfo.userLimit.label }}
-            </el-tag>
+          <div class="remarks" v-if="props.time">{{ props.time }}</div>
+          <div class="remarks">
+            <slot name="bottom" />
           </div>
         </div>
-        <div class="remarks" v-if="props.time">{{ props.time }}</div>
-        <div class="remarks">
-          <slot name="bottom" />
-        </div>
       </div>
       <div class="info" v-if="!props.isSelf">
         <el-tag class="ml-2" type="warning">V8</el-tag>
@@ -44,6 +46,11 @@
 import useUserStore from "@/stores/user";
 import { reactive, watch, onMounted, computed, ref } from "vue";
 import { upload } from "@/apis/fileApi";
+import useAuths from "@/hooks/useAuths";
+import UserInfoCard from "./UserInfoCard/index.vue";
+
+const { getToken } = useAuths();
+const isHasToken = getToken();
 
 //userInfo
 //{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
@@ -99,7 +106,7 @@ const Init = () => {
     userInfo.nick = props.userInfo.nick;
     userInfo.role = props.userInfo.role;
     userInfo.id = props.userInfo.id;
-    userInfo.level = "等级" + props.userInfo.level;
+    userInfo.level = props.userInfo.level;
     userInfo.userLimit = getStatusInfo(props.userInfo.userLimit);
     iconUrl.value = iconUrlHandler(userInfo.icon);
   }
@@ -136,21 +143,12 @@ const getStatusInfo = (type) => {
   return statusTypeList.filter((item) => item.value === type)[0];
 };
 </script>
-<style scoped>
+
+<style lang="scss" scoped>
 .mt_1 {
   margin-top: 0.5rem;
 }
 
-.nick {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: bold;
-  > div {
-    margin-right: 10px;
-  }
-}
-
 .info {
   flex: 1;
   margin-top: 0.6rem;
@@ -171,12 +169,27 @@ const getStatusInfo = (type) => {
   justify-content: space-between;
 }
 
-.avatar-left {
+.avatar-left,
+.avatar-card {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  .content {
+    margin-left: 10px;
+  }
+  .nick {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: bold;
+    > div {
+      margin-right: 10px;
+    }
+  }
 }
+
 .avatar-center {
+  display: flex;
   flex: 2;
 }
 .el-avatar {