From 8546c59f523c8be8074544ee9a66f920a904a1a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Tue, 9 Apr 2024 23:59:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E5=AE=A4=E7=BB=93?=
 =?UTF-8?q?=E5=90=88=E7=94=A8=E6=88=B7=E9=A2=86=E5=9F=9F=E4=BD=93=E7=B3=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/utils/icon.js           | 15 +++++++
 Yi.Bbs.Vue3/src/views/chathub/Index.vue | 54 ++++++++++++++++---------
 2 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 Yi.Bbs.Vue3/src/utils/icon.js

diff --git a/Yi.Bbs.Vue3/src/utils/icon.js b/Yi.Bbs.Vue3/src/utils/icon.js
new file mode 100644
index 00000000..bcd024bf
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/utils/icon.js
@@ -0,0 +1,15 @@
+export const getUrl = (fileId) => {
+    if (fileId == null || fileId == undefined) {
+        return "@/assets/chat_images/friendicon.jpg"
+    }
+    else {
+        return getEnvUrl(fileId)
+    }
+
+};
+
+const getEnvUrl = (str) => {
+    return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
+};
+
+
diff --git a/Yi.Bbs.Vue3/src/views/chathub/Index.vue b/Yi.Bbs.Vue3/src/views/chathub/Index.vue
index 9f79eb16..9f477832 100644
--- a/Yi.Bbs.Vue3/src/views/chathub/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/chathub/Index.vue
@@ -8,7 +8,7 @@ import useChatStore from "@/stores/chat";
 import useUserStore from "@/stores/user";
 const { isLogin } = useAuths();
 import { useRouter } from 'vue-router'
-
+import { getUrl } from '@/utils/icon'
 const router = useRouter();
 //聊天存储
 const chatStore = useChatStore();
@@ -49,17 +49,16 @@ const currentHeaderName = computed(() => {
 const currentUserItem = computed(() => {
   return userList.value.filter(x => x.userId != useUserStore().id)
 });
-var timer=null;
+var timer = null;
 
 //初始化
 onMounted(async () => {
-  console.log(isLogin.value, "isLogin");
   if (!isLogin.value) {
     ElMessage({
       message: '该功能，请登录后使用！即将自动跳转',
       type: 'warning',
     })
-    timer= setTimeout(function () {
+    timer = setTimeout(function () {
       onclickClose();
     }, 3000);
 
@@ -68,9 +67,8 @@ onMounted(async () => {
   chatStore.setMsgList((await getChatAccountMessageList()).data);
   chatStore.setUserList((await getChatUserList()).data);
 })
-onUnmounted(()=>{
-  if(timer !=null)
-  {
+onUnmounted(() => {
+  if (timer != null) {
     clearInterval(timer)
   }
 
@@ -204,11 +202,13 @@ const getLastMessage = ((receiveId, isAll) => {
 </script>
 
 <template>
-    <div style="position: absolute; top: 0;left: 0;">
-      <p>当前版本：1.0.0</p>
-      <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
-      <p>tip:点击聊天窗口右上角“X”可退出</p>
-    </div>
+  <div style="position: absolute; top: 0;left: 0;">
+    <p>当前版本：1.1.0</p>
+    <p>tip:官方学习交流群每次发送消息消耗 1 钱钱</p>
+    <p>tip:点击聊天窗口右上角“X”可退出</p>
+    <p>1.0.0：上线框架基础功能</p>
+    <p>1.1.0：结合用户领域信息</p>
+  </div>
   <div class="body">
 
     <div class="left">
@@ -263,7 +263,8 @@ const getLastMessage = ((receiveId, isAll) => {
         <div v-for="(item, i) in currentUserItem" :key="i" @click="onclickUserItem(item, false)" class="user-div"
           :class="{ 'select-user-item': currentSelectUser?.userId == item.userId }">
           <div class="user-div-left">
-            <img src="@/assets/chat_images/friendicon.jpg" />
+
+            <img :src="getUrl(item.userIcon)"  />
             <div class="user-name-msg">
               <p class="font-name">{{ item.userName }}</p>
               <p class="font-msg">{{ getLastMessage(item.userId, false) }}</p>
@@ -297,14 +298,20 @@ const getLastMessage = ((receiveId, isAll) => {
       <div class="content">
         <div v-for="(item, i) in currentMsgContext" :key="i">
           <div class="content-myself content-common" v-if="item.sendUserId == userStore.id">
-            <!-- Todo... 结合用户体系<div>{{item}}</div> -->
             <div class="content-myself-msg content-msg-common ">{{ item.content }}</div>
-            <img src="@/assets/chat_images/icon.jpg" />
+            <img :src="getUrl(item.sendUserInfo?.user.icon)" />
           </div>
 
           <div class="content-others content-common" v-else>
-            <img src="@/assets/chat_images/friendicon.jpg" />
-            <div class="content-others-msg content-msg-common  ">{{ item.content }}</div>
+
+            <img :src="getUrl(item.sendUserInfo?.user.icon)" />
+            <div>
+    
+              <p  v-if="selectIsAll()" class="content-others-username">{{item.sendUserInfo?.user.userName}}</p>
+              <div class="content-others-msg content-msg-common " :class="{'content-others-msg-group':selectIsAll()}">
+                {{ item.content }}
+              </div>
+            </div>
           </div>
 
         </div>
@@ -704,10 +711,21 @@ const getLastMessage = ((receiveId, isAll) => {
 
 .content-others {
   justify-content: flex-start;
-}
 
+}
+.content-others-username{
+    margin-left: 15px;
+    color: #B2B2B2;
+    position: relative;
+    top: -15px;
+  }
+.content-others-msg-group{
+  position: relative;
+    top: -10px;
+}
 .content-others-msg {
   background-color: #FFFFFF;
+  padding: 10px 15px;
 }
 
 .content-others-msg:hover {