From 73063d1fafe1c0505c54b0de2ad5711beedde356 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 19 May 2025 13:52:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=B4=E5=83=8F=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8C=E6=96=B0=E5=A2=9E=E7=BE=A4=E8=81=8A=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=A0=87=E7=AD=BE=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91=EF=BC=9B=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=B6=88=E6=81=AF=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A=E6=8E=89=E6=9C=AA=E4=BD=BF=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E5=83=8F=E5=A4=84=E7=90=86=E5=87=BD=E6=95=B0=EF=BC=9B?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=AF=B9=E8=AF=9D=E5=AD=98=E5=82=A8=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=B4=E5=83=8F=E5=92=8C=E7=BE=A4=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=AD=97=E6=AE=B5=EF=BC=9B=E4=BF=AE=E5=A4=8D=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E8=A7=86=E5=9B=BE=E4=B8=AD=E7=9A=84=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/avatar-module/index.vue        | 51 ++++++++++-
 src/components/talk/message/VideoMessage.vue  | 86 +++++++++----------
 src/store/modules/dialogue.js                 | 10 ++-
 src/utils/auth.js                             |  2 +-
 src/views/message/inner/IndexContent.vue      |  6 +-
 src/views/message/inner/IndexSider.vue        |  5 +-
 src/views/message/inner/TalkItem.vue          |  4 +-
 src/views/message/inner/panel/PanelHeader.vue | 15 +++-
 8 files changed, 124 insertions(+), 55 deletions(-)

diff --git a/src/components/avatar-module/index.vue b/src/components/avatar-module/index.vue
index 7023c27..b527a2a 100644
--- a/src/components/avatar-module/index.vue
+++ b/src/components/avatar-module/index.vue
@@ -1,8 +1,20 @@
 <template>
+<div class="relative">
   <div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
     <img :src="avatar" v-if="avatar" />
     <span v-else :style="customTextStyle">{{ text_avatar }}</span>
   </div>
+  <div 
+    v-if="[2,3,4].includes(groupType)&&showGroupType" 
+    class="absolute border-2px border-solid rounded-3px bg-#fff flex justify-center items-center leading-none" 
+    :style="[
+      groupLabelStyle,
+      `color:${labelColor.find(x=>x.group_type===groupType)?.color};border-color:${labelColor.find(x=>x.group_type===groupType)?.color}`
+    ]"
+  >
+    {{ labelColor.find(x=>x.group_type===groupType)?.label }}
+  </div>
+</div>
 </template>
 <script setup>
 //群聊默认头像
@@ -11,13 +23,22 @@ import groupDepartment from '@/assets/image/groupDepartment.png'
 import groupProject from '@/assets/image/groupProject.png'
 import groupCompany from '@/assets/image/groupCompany.png'
 import { computed, defineProps } from 'vue'
-
+//群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
+const labelColor=[
+  {group_type:2,color:'#377EC6',label:'部门'},
+  {group_type:3,color:'#C1691C',label:'项目'},
+  {group_type:4,color:'#7A58DE',label:'公司'},
+]
 const props = defineProps({
   mode: {
     //模式：1=人；2=群
     type: Number,
     default: 0,
   },
+  showGroupType:{
+    type:Boolean,
+    default:false
+  },
   avatar: {
     //头像
     type: String,
@@ -75,6 +96,34 @@ const text_avatar = computed(() => {
     ? props?.userName.slice(-2)
     : props?.userName
 })
+
+// 计算群标签的动态样式
+const groupLabelStyle = computed(() => {
+  // 获取头像的宽高
+  const avatarWidth = parseInt(props.customStyle.width) || 42
+  const avatarHeight = parseInt(props.customStyle.height) || 42
+  
+  // 计算标签的尺寸比例（基于原始尺寸：头像42px，标签宽32px高18px，文字10px）
+  const widthRatio = avatarWidth / 42
+  const heightRatio = avatarHeight / 42
+  
+  // 计算标签的尺寸
+  const labelWidth = Math.round(32 * widthRatio)
+  const labelHeight = Math.round(18 * heightRatio)
+  const fontSize = Math.round(10 * widthRatio)
+  
+  // 计算标签的位置（基于原始位置：top-28px）
+  const topPosition = Math.round(28 * heightRatio)
+  
+  return {
+    width: `${labelWidth}px`,
+    height: `${labelHeight}px`,
+    fontSize: `${fontSize}px`,
+    top: `${topPosition}px`,
+    left: '50%',
+    transform: 'translateX(-50%)'
+  }
+})
 </script>
 <style lang="less" scoped>
 .avatar-module {
diff --git a/src/components/talk/message/VideoMessage.vue b/src/components/talk/message/VideoMessage.vue
index b4385ae..7aa0ce5 100644
--- a/src/components/talk/message/VideoMessage.vue
+++ b/src/components/talk/message/VideoMessage.vue
@@ -19,31 +19,31 @@ const props = defineProps<{
   maxWidth?: Boolean
 }>()
 
-const img = (src: string, width = 200) => {
-  const info: any = getImageInfo(src)
+// const img = (src: string, width = 200) => {
+//   const info: any = getImageInfo(src)
 
-  if (info.width == 0 || info.height == 0) {
-    return {}
-  }
+//   if (info.width == 0 || info.height == 0) {
+//     return {}
+//   }
 
-  if (info.height > 300) {
-    return {
-      height: '300px'
-    }
-  }
+//   if (info.height > 300) {
+//     return {
+//       height: '300px'
+//     }
+//   }
 
-  if (info.width < width) {
-    return {
-      width: `${info.width}px`,
-      height: `${info.height}px`
-    }
-  }
+//   if (info.width < width) {
+//     return {
+//       width: `${info.width}px`,
+//       height: `${info.height}px`
+//     }
+//   }
 
-  return {
-    width: width + 'px',
-    height: info.height / (info.width / width) + 'px'
-  }
-}
+//   return {
+//     width: width + 'px',
+//     height: info.height / (info.width / width) + 'px'
+//   }
+// }
 
 const open = ref(false)
 const isPaused = ref(false)
@@ -64,18 +64,18 @@ const updatePauseStatus = () => {
 // 初始化时检查状态
 updatePauseStatus()
 
-// 监听关键道具变化
-watch(() => props.extra.percentage, (newVal: number | undefined) => {
-  // 确保进度更新时 UI 也实时更新  
-  // 检测上传失败状态 (-1表示上传失败)
-  if (newVal === -1) {
-    uploadFailed.value = true
-    // 显示上传失败提示
-    message.error('视频发送失败，请点击红色感叹号重试')
-  } else if (newVal !== undefined && newVal > 0) {
-    uploadFailed.value = false
-  }
-}, { immediate: true })
+// // 监听关键道具变化
+// watch(() => props.extra.percentage, (newVal: number | undefined) => {
+//   // 确保进度更新时 UI 也实时更新  
+//   // 检测上传失败状态 (-1表示上传失败)
+//   if (newVal === -1) {
+//     uploadFailed.value = true
+//     // 显示上传失败提示
+//     message.error('视频发送失败，请点击红色感叹号重试')
+//   } else if (newVal !== undefined && newVal > 0) {
+//     uploadFailed.value = false
+//   }
+// }, { immediate: true })
 
 async function onPlay() {
   // 如果视频正在上传，不执行播放操作
@@ -116,17 +116,17 @@ function resumeUpload(e) {
 }
 
 // 重新上传视频
-function retryUpload(e) {
-  e.stopPropagation()
-  if (props.extra.upload_id) {
-    // 重置失败状态
-    uploadFailed.value = false
+// function retryUpload(e) {
+//   e.stopPropagation()
+//   if (props.extra.upload_id) {
+//     // 重置失败状态
+//     uploadFailed.value = false
     
-    // 恢复上传
-    uploadsStore.resumeUpload(props.extra.upload_id)
-    message.success('正在重新上传视频...')
-  }
-}
+//     // 恢复上传
+//     uploadsStore.resumeUpload(props.extra.upload_id)
+//     message.success('正在重新上传视频...')
+//   }
+// }
 </script>
 <template>
   <section
diff --git a/src/store/modules/dialogue.js b/src/store/modules/dialogue.js
index 398fb4f..78526b7 100644
--- a/src/store/modules/dialogue.js
+++ b/src/store/modules/dialogue.js
@@ -19,9 +19,11 @@ export const useDialogueStore = defineStore('dialogue', {
 
       // 对话节点
       talk: {
+        avatar:'',
         username: '',
         talk_type: 0, // 对话来源[1:私聊;2:群聊]
-        receiver_id: 0
+        receiver_id: 0,
+        group_type:0
       },
 
       // 好友是否正在输入文字
@@ -73,11 +75,15 @@ export const useDialogueStore = defineStore('dialogue', {
 
     // 更新对话信息
     setDialogue(data = {}) {
+
+      console.log('data',data)
       this.online = data.is_online == 1
       this.talk = {
         username: data.remark || data.name,
         talk_type: data.talk_type,
-        receiver_id: data.receiver_id
+        receiver_id: data.receiver_id,
+        avatar:data.avatar,
+        group_type:data.group_type
       }
 
       this.index_name = `${data.talk_type}_${data.receiver_id}`
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 7496763..1f95033 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22851b5e2f6cbf01ab4b3da6e3d06b57c8f750e106226a5a4b9d7fc1d381a54cb92375c09ba1fa8e5fde0392d919c2f2cbcc7e4e2eca8d9860749af00374b249f7d04e2bc43a1fa4e7d7384dde0212f0a5'
+  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22939bb2aea0008a0e4b687680750f2fcff1dd71da701d0a961f65313915a1712826f5c8d3d1fdf999ba3f94912e4744eea50d51ecd72470f47b87cc42ffad74ec3b3c7ff13a011bfbe3a816adfc923db8'
 }
 
 /**
diff --git a/src/views/message/inner/IndexContent.vue b/src/views/message/inner/IndexContent.vue
index dfc3af7..f788dbe 100644
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@@ -12,6 +12,7 @@ import UploadsModal from '@/components/base/UploadsModal.vue'
 const userStore = useUserStore()
 const dialogueStore = useDialogueStore()
 const uploadsStore = useUploadsStore()
+console.log('dialogueStore',dialogueStore);
 
 const members = computed(() => dialogueStore.members)
 const isShowEditor = computed(() => dialogueStore.isShowEditor)
@@ -25,7 +26,8 @@ const talkParams = reactive({
   username: computed(() => dialogueStore.talk.username),
   online: computed(() => dialogueStore.online),
   keyboard: computed(() => dialogueStore.keyboard),
-  num: computed(() => dialogueStore.members.length)
+  num: computed(() => dialogueStore.members.length),
+  avatar:computed(() => dialogueStore.talk.avatar)
 })
 
 const state = reactive({
@@ -59,12 +61,14 @@ const onPanelHeaderEvent = (eventType: string) => {
   <section id="drawer-container" class="el-container is-vertical">
     <!-- 头部区域 -->
     <header class="el-header bdr-b">
+      
       <PanelHeader
         :type="talkParams.type"
         :username="talkParams.username"
         :online="talkParams.online"
         :keyboard="talkParams.keyboard"
         :num="talkParams.num"
+        :avatar="talkParams.avatar"
         @evnet="onPanelHeaderEvent"
       />
     </header>
diff --git a/src/views/message/inner/IndexSider.vue b/src/views/message/inner/IndexSider.vue
index 69ff6ca..1fde2e7 100644
--- a/src/views/message/inner/IndexSider.vue
+++ b/src/views/message/inner/IndexSider.vue
@@ -239,9 +239,6 @@ const items = computed((): ISession[] => {
     return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
   })
 })
-setTimeout(() => {
-  console.log('items.value', items.value)
-}, 1000)
 watch(
   () => talkStore,
   (newValue, oldValue) => {
@@ -273,6 +270,8 @@ const indexName = computed(() => dialogueStore.index_name)
 
 // 切换会话
 const onTabTalk = (item: ISession, follow = false) => {
+  console.log('onTabTalk');
+  
   if (item.index_name === indexName.value) return
 
   searchKeyword.value = ''
diff --git a/src/views/message/inner/TalkItem.vue b/src/views/message/inner/TalkItem.vue
index fd26310..fb11c5a 100644
--- a/src/views/message/inner/TalkItem.vue
+++ b/src/views/message/inner/TalkItem.vue
@@ -22,11 +22,11 @@ const labelColor=[
   <div class="talk pointer" :class="{ actived: active }" @click="emit('tab-talk', data)">
     <div class="avatar-box relative">
       
-      <avatarModule    :mode="data?.group_type === 0 ? 1 : 2"
+      <avatarModule  showGroupType  :mode="data?.group_type === 0 ? 1 : 2"
               :avatar="data?.avatar"
               :groupType="data?.group_type"
               :userName="data?.name" :customStyle="{width:'42px',height:'42px'}"></avatarModule>
-              <div v-if="[2,3,4].includes(data.group_type)" class="absolute w-32px h-18px border-2px border-solid rounded-3px top-28px bg-#fff text-10px flex justify-center items-center leading-none" :style="`color:${labelColor.find(x=>x.group_type===data.group_type)?.color};border-color:${labelColor.find(x=>x.group_type===data.group_type)?.color}`">{{ labelColor.find(x=>x.group_type===data.group_type)?.label }}</div>
+              <!-- <div v-if="[2,3,4].includes(data.group_type)" class="absolute w-32px h-18px border-2px border-solid rounded-3px top-28px bg-#fff text-10px flex justify-center items-center leading-none" :style="`color:${labelColor.find(x=>x.group_type===data.group_type)?.color};border-color:${labelColor.find(x=>x.group_type===data.group_type)?.color}`">{{ labelColor.find(x=>x.group_type===data.group_type)?.label }}</div> -->
       <!-- <im-avatar :src="avatar" :size="34" :username="data.name" /> -->
       <!-- <div class="top-mask" @click.stop="emit('top-talk', data)">
         <n-icon :component="data.is_top == 1 ? ArrowDown : ArrowUp" />
diff --git a/src/views/message/inner/panel/PanelHeader.vue b/src/views/message/inner/panel/PanelHeader.vue
index 18237e5..a4d243e 100644
--- a/src/views/message/inner/panel/PanelHeader.vue
+++ b/src/views/message/inner/panel/PanelHeader.vue
@@ -19,6 +19,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  avatar:{
+    type: String,
+    default: ''
+  },
   num: {
     type: Number,
     default: 0
@@ -41,14 +45,20 @@ const onSetMenu = () => {
         :size="22"
       />
     </div> -->
-
-    <div class="module left-module">
+    <div class="flex items-center">
+      <avatarModule class="mr-10px"   :mode="dialogueStore.talk.talk_type"
+              :avatar="avatar"
+              :groupType="dialogueStore.talk?.group_type"
+              :userName="username" :customStyle="{width:'42px',height:'42px'}"></avatarModule>
+      <div class="module left-module">
       <!-- <span class="tag" :class="{ red: type == 1 }">
         {{ type == 1 ? '好友' : '群聊' }}
       </span> -->
       <span class="nickname">{{ username }}</span>
       <span class="num" v-show="type == 2 && num">({{ num }})</span>
     </div>
+    </div>
+  
 
     <div class="module center-module" v-if="type == 1">
       <p class="online">
@@ -125,6 +135,7 @@ const onSetMenu = () => {
     }
 
     .nickname {
+      font-size: 14px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;