在IndexSider.vue中添加了调试输出,更新了TalkItem.vue以使用新的头像组件并调整了样式,增加了TalkItem的高度。

This commit is contained in:
Phoenix 2025-05-09 14:58:59 +08:00
parent 7717fe1fb3
commit d2c8de16bb
7 changed files with 113 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@ -0,0 +1,95 @@
<template>
<div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
<img :src="avatar" v-if="avatar" />
<span v-else :style="customTextStyle">{{ text_avatar }}</span>
</div>
</template>
<script setup>
//
import groupNormal from '@/assets/image/groupNormal.png'
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'
const props = defineProps({
mode: {
//1=2=
type: Number,
default: 0,
},
avatar: {
//
type: String,
default: '',
},
userName: {
//
type: String,
default: '',
},
groupType: {
//1=2=3=4=/
type: Number,
default: 0,
},
customStyle: {
//
type: Object,
default() {
return {}
},
},
customTextStyle: {
//
type: Object,
default() {
return {}
},
},
})
//
const avatar = computed(() => {
let avatar_img = props?.avatar
if (!avatar_img) {
if (props?.mode === 1) {
} else if (props?.mode === 2) {
if (props?.groupType === 1) {
avatar_img = groupNormal
} else if (props?.groupType === 2) {
avatar_img = groupDepartment
} else if (props?.groupType === 3) {
avatar_img = groupProject
} else if (props?.groupType === 4) {
avatar_img = groupCompany
}
}
}
return avatar_img
})
//
const text_avatar = computed(() => {
return props?.userName.length >= 2
? props?.userName.slice(-2)
: props?.userName
})
</script>
<style lang="less" scoped>
.avatar-module {
border-radius: 50%;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #674bbc, #46299d);
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>

View File

@ -38,7 +38,9 @@ const items = computed((): ISession[] => {
return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
})
})
setTimeout(()=>{
console.log('items.value',items.value)
},1000)
watch(() => talkStore, (newValue, oldValue) => {
console.log(newValue);
@ -180,6 +182,7 @@ onMounted(() => {
<main id="talk-session-list" class="el-main me-scrollbar me-scrollbar-thumb">
<template v-if="loadStatus == 2"><Skeleton /></template>
<template v-else>
<TalkItem
v-for="item in items"
:key="item.index_name"

View File

@ -1,22 +1,26 @@
<script lang="ts" setup>
<script setup>
import { ArrowUp, ArrowDown, CloseRemind } from '@icon-park/vue-next'
import Xtime from '@/components/base/Xtime.vue'
import { ISession } from '@/types/chat'
import avatarModule from '@/components/avatar-module/index.vue'
const emit = defineEmits(['tab-talk', 'top-talk'])
defineProps<{
data: ISession
avatar: String
username: String
defineProps({
data: Object,
avatar: String,
username: String,
active: Boolean
}>()
})
</script>
<template>
<div class="talk pointer" :class="{ actived: active }" @click="emit('tab-talk', data)">
<div class="avatar-box">
<im-avatar :src="avatar" :size="34" :username="data.name" />
<avatarModule :mode="data?.group_type === 0 ? 1 : 2"
:avatar="data?.avatar"
:groupType="data?.group_type"
:userName="data?.name" :customStyle="{width:'42px',height:'42px'}"></avatarModule>
<!-- <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" />
</div>
@ -68,7 +72,7 @@ defineProps<{
<style lang="less" scoped>
.talk {
padding: 8px 10px 8px 5px;
height: 50px;
height: 64px;
display: flex;
align-items: center;
transition: 0.2s ease-in;