feat:完善discuss主题相关功能及界面

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

@@ -1,24 +1,26 @@
 <template >
     <div class="avatar">
+        <div class="avatar-left">
+            <el-avatar :size="props.size" :src="iconUrl" />
 
-        <div class="avatar-left" >      
-            <el-avatar :size="props.size" :src="userInfo.icon ?? '/src/assets/logo.ico'" />
-
-<div v-if="props.isSelf">
-    <div class="nick" > {{userInfo.name}}</div>
-    </div>
+            <div v-if="props.isSelf">
+                <div class="nick"> {{ userInfo.nick }}</div>
+            </div>
 
             <div v-if="!props.isSelf">
-                <div class="nick" :class="{mt_1: props.time!='undefined'}"> {{userInfo.name}}</div>
-                <div class="remarks" v-if="props.time"> {{props.time}}</div>
-                <div class="remarks">  <slot name="bottom" /></div>
+
+                <div class="nick" :class="{ mt_1: props.time != 'undefined' }"> {{ userInfo.nick }}</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">V6</el-tag>
-                <el-tag class="ml-2" type="danger">管理员</el-tag>
+                <el-tag class="ml-2" type="warning">V8</el-tag>
+                <el-tag class="ml-2" type="danger">会员</el-tag>
             </div>
         </div>
-        
+
 
         <el-button v-if="props.showWatching" type="primary" size="default" icon="Plus">关注</el-button>
 
@@ -26,57 +28,84 @@
 </template>
 <script setup>
 import useUserStore from '@/stores/user'
-import { reactive, watch ,onMounted  } from 'vue';
+import { reactive, watch, onMounted, computed } from 'vue';
 //userInfo
 //{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
-const props = defineProps(['size','showWatching','time','userInfo','isSelf'])
-const userStore=useUserStore();
-const userInfo=reactive({
-    icon:"",
-    name:"",
-    role:[],
-    id:""
-    });
+const props = defineProps(['size', 'showWatching', 'time', 'userInfo', 'isSelf'])
+const userStore = useUserStore();
+const userInfo = reactive({
+    icon: "",
+    nick: "",
+    role: [],
+    id: ""
+});
+
+const iconUrl = computed(() => {
+    if (userInfo.icon == null || userInfo.icon == undefined || userInfo.icon == '') {
+
+        return '/src/assets/logo.ico';
+    }
+
+    if (userInfo.icon.includes(import.meta.env.VITE_APP_BASEAPI)) {
+        return userInfo.icon;
+    }
+
+
+    return `${import.meta.env.VITE_APP_BASEAPI}/file/${userInfo.icon}`;
+})
+
+watch(userStore, (n) => {
+    if (props.userInfo == undefined) {
+        userInfo.nick = n.name;
+    }
+
+})
+
+watch(() => props, (n) => {
+    Init();
+}, { deep: true })
 
 onMounted(() => {
+    Init();
+})
+
+const Init = () => {
     //使用传入值
-    if(props.userInfo!= undefined)
-    {
-        userInfo.icon=props.userInfo.icon;
-        userInfo.name=props.userInfo.name;
-        userInfo.role=props.userInfo.role;
-        userInfo.id=props.userInfo.id;
+    if (props.userInfo != undefined) {
+        userInfo.icon = props.userInfo.icon;
+        userInfo.nick = props.userInfo.nick;
+        userInfo.role = props.userInfo.role;
+        userInfo.id = props.userInfo.id;
     }
 
     //使用当前登录用户
-    else
-    { 
-        userInfo.icon=userStore.icon;
-        userInfo.name=userStore.name;
-        userInfo.role=userStore.role;
-        userInfo.id=userStore.id;
+    else {
+        userInfo.icon = userStore.icon;
+        userInfo.nick = userStore.name;
+        userInfo.role = userStore.role;
+        userInfo.id = userStore.id;
     }
-})
+}
 
 </script>
 <style scoped>
-.mt_1
-{
-  margin-top: 0.5rem;  
+.mt_1 {
+    margin-top: 0.5rem;
 }
-.nick
-{
-    font-weight:bold;
+
+.nick {
+    font-weight: bold;
 }
-.info
-{
+
+.info {
     margin-top: 0.6rem;
     margin-left: 1rem;
 }
-.info .el-tag
-{
-    margin-right:1rem;
+
+.info .el-tag {
+    margin-right: 1rem;
 }
+
 .el-icon {
     color: white;