scout666/chat-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更换转发、es搜索接口为/v2；处理搜索判断是否还有更多数据的逻辑；解决聊天记录中视频类型点击播放会全屏关不掉问题；更换鼠标悬浮背景色；新增列表中省略内容悬浮显示完整功能；修改回到聊天底部功能实现

Browse Source
This commit is contained in:
wangyifeng 2025-06-09 13:29:06 +08:00
parent 642992640f
commit 031411ba49
10 changed files with 153 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/chat.js
View File

@ -35,7 +35,7 @@ export const ServeTalkRecords = (data = {}) => {
// 获取转发会话记录详情列表服务接口
export const ServeGetForwardRecords = (data = {}) => {
return get('/api/v1/talk/records/forward', data)
return get('/api/v1/talk/records/forward/v2', data)
}
// 对话列表置顶服务接口

4
src/api/search.js
View File

@ -2,12 +2,12 @@ import { post, get, upload } from '@/utils/request'
//ES搜索-主页搜索什么都有、指定用户、指定群、群与用户概览
export const ServeSeachQueryAll = (data = {}) => {
return post('/api/v1/elasticsearch/query-all', data)
return post('/api/v1/elasticsearch/query-all/v2', data)
}
// ES搜索用户数据
export const ServeQueryUser = (data) => {
return post('/api/v1/elasticsearch/query-user', data)
return post('/api/v1/elasticsearch/query-user/v2', data)
}
// ES搜索群组数据

70
src/components/search/searchByCondition.vue
View File

@ -168,35 +168,13 @@
</n-scrollbar>
</div>
<div class="condition-result-imgAndVideo-area" v-if="item?.extra?.url">
<template v-if="item?.msg_type === 3">
<n-image
:src="item?.extra?.url"
:lazy="true"
:preview-src="item?.extra?.url"
:width="131"
:height="131"
object-fit="cover"
></n-image>
</template>
<template v-else-if="item?.msg_type === 5">
<div class="video-preview" @click="onPlay(item?.extra?.url)">
<video :src="item?.extra?.url" :controls="false"></video>
<!-- <n-image
:src="
item?.extra?.url
? item?.extra?.url + '#t=0.001'
: item?.extra?.cover
"
:width="131"
:height="131"
object-fit="cover"
></n-image> -->
<div class="btn-video">
<!-- <img :src="playCircle" /> -->
<n-icon :component="Play" size="40" />
</div>
</div>
</template>
<div class="message-component-wrapper">
<component
:is="MessageComponents[item.msg_type] || 'unknown-message'"
:extra="item.extra"
:data="item"
/>
</div>
</div>
</div>
<!-- <div
@ -326,8 +304,13 @@ import { ServeTalkDate, ServeGetSessionId } from '@/api/search.js'
import { parseTime } from '@/utils/datetime'
import { fileFormatSize, fileSuffix } from '@/utils/strings'
import { NImage, NInfiniteScroll, NScrollbar, NIcon, NDatePicker } from 'naive-ui'
import { MessageComponents } from '@/constant/message'
const emits = defineEmits(['clearSearchMemberByAlphabet', 'getDisabledDateArray', 'hideSearchResultModal'])
const emits = defineEmits([
'clearSearchMemberByAlphabet',
'getDisabledDateArray',
'hideSearchResultModal'
])
const dialogueStore = useDialogueStore()
// 当前对话参数
@ -1126,4 +1109,31 @@ body:deep(.round-3) {
margin: 13px 0 0;
}
}
.message-component-wrapper {
width: 131px;
height: 131px;
display: inline-block;
overflow: hidden;
position: relative;
.im-message-video,
.im-message-image,
.image-container {
width: 100% !important;
height: 100% !important;
}
:deep(.n-image) {
width: 100% !important;
height: 100% !important;
}
:deep(img),
:deep(video) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
</style>

2
src/components/search/searchItem.vue
View File

@ -372,7 +372,7 @@ const resultDetail = computed(() => {
border: 0;
}
.search-item:hover {
background-color: #f8f8f8;
background-color: rgba(70, 41, 157, 0.1);
.info-detail-searchRecordDetail {
.searchRecordDetail-fastLocal {

86
src/components/search/searchList.vue
View File

@ -41,13 +41,13 @@
>
<searchItem
@click="clickSearchItem(searchResultKey, item)"
v-if="(
searchResultKey === 'user_infos'
? (state.userInfosShowAll || (props.listLimit && index < 3))
v-if="
(searchResultKey === 'user_infos'
? state.userInfosShowAll || (props.listLimit && index < 3)
: searchResultKey === 'combinedGroup'
? (state.groupInfosShowAll || (props.listLimit && index < 3))
: (props.listLimit && index < 3)
) || !props.listLimit"
? state.groupInfosShowAll || (props.listLimit && index < 3)
: props.listLimit && index < 3) || !props.listLimit
"
:searchResultKey="searchResultKey"
:searchItem="item"
:searchText="state.searchText"
@ -403,11 +403,57 @@ const queryAllSearch = (doClearSearchResult) => {
} else if (state?.first_talk_record_infos?.talk_type === 2) {
total = data.group_record_count
}
}
if (total < props.searchResultPageSize) {
state.hasMore = false
let noMoreSearchResultRecord = true
if (
Object.keys(data).includes('talk_record_infos') &&
state.searchResult['talk_record_infos']?.length > 0
) {
//搜聊天记录详情
if (state.searchResult['talk_record_infos']?.length < total) {
noMoreSearchResultRecord = false
}
}
if (noMoreSearchResultRecord) {
state.hasMore = false
} else {
state.hasMore = true
}
} else {
state.hasMore = true
let noMoreSearchResultUser = true
let noMoreSearchResultGroup = true
let noMoreSearchResultGeneral = true
if (
Object.keys(data).includes('user_infos') &&
state.searchResult['user_infos']?.length > 0
) {
//搜人
if (state.searchResult['user_infos']?.length < total) {
noMoreSearchResultUser = false
}
}
if (
Object.keys(data).includes('group_member_infos' || 'group_infos') &&
state.searchResult['combinedGroup']?.length > 0
) {
//搜群
if (state.searchResult['combinedGroup']?.length < total) {
noMoreSearchResultGroup = false
}
}
if (
Object.keys(data).includes('general_infos') &&
state.searchResult['general_infos']?.length > 0
) {
//搜聊天记录
if (state.searchResult['general_infos']?.length < total) {
noMoreSearchResultGeneral = false
}
}
if (noMoreSearchResultUser && noMoreSearchResultGroup && noMoreSearchResultGeneral) {
state.hasMore = false
} else {
state.hasMore = true
}
}
emits('resultTotalCount', total)
// zPaging.value?.completeByTotal([data], total)
@ -673,18 +719,21 @@ async function loadMoreGroupInfos() {
const resp = await ServeQueryGroup(params)
if (resp.code === 200) {
const groupInfos = Array.isArray(resp.data.group_infos) ? resp.data.group_infos : []
const groupMemberInfos = Array.isArray(resp.data.group_member_infos) ? resp.data.group_member_infos : []
const groupMemberInfos = Array.isArray(resp.data.group_member_infos)
? resp.data.group_member_infos
: []
// 给新数据加上 groupTempType
groupInfos.forEach(item => {
groupInfos.forEach((item) => {
item.groupTempType = 'group_infos'
item.group_type = item.type // 保持一致性
})
groupMemberInfos.forEach(item => {
groupMemberInfos.forEach((item) => {
item.groupTempType = 'group_member_infos'
})
const isFirstLoad = (!state.groupInfosLastGroupId && !state.groupInfosLastMemberId) ||
const isFirstLoad =
(!state.groupInfosLastGroupId && !state.groupInfosLastMemberId) ||
(state.groupInfosLastGroupId === 0 && state.groupInfosLastMemberId === 0)
if (isFirstLoad) {
// 第一次加载，直接替换
@ -697,7 +746,9 @@ async function loadMoreGroupInfos() {
} else {
// 后续加载，追加
const allGroupInfos = (state.searchResult.group_infos || []).concat(groupInfos)
const allGroupMemberInfos = (state.searchResult.group_member_infos || []).concat(groupMemberInfos)
const allGroupMemberInfos = (state.searchResult.group_member_infos || []).concat(
groupMemberInfos
)
state.searchResult = {
...state.searchResult,
group_infos: allGroupInfos,
@ -708,10 +759,9 @@ async function loadMoreGroupInfos() {
state.groupInfosLastGroupId = resp.data.last_group_id
state.groupInfosLastMemberId = resp.data.last_member_id
// 判断是否全部加载完
const noMoreData = (
const noMoreData =
(!groupInfos.length && !groupMemberInfos.length) ||
(resp.data.last_group_id === 0 && resp.data.last_member_id === 0)
)
if (noMoreData) {
state.groupInfosExpand = true
}
@ -774,7 +824,7 @@ async function loadMoreGroupInfos() {
}
}
.result-has-more:hover {
background-color: #f8f8f8;
background-color: rgba(70, 41, 157, 0.1);
}
}
}

8
src/components/talk/ForwardRecord.vue
View File

@ -7,10 +7,15 @@ import { ITalkRecord } from '@/types/chat'
import { useInject } from '@/hooks'
import customModal from '@/components/common/customModal.vue'
import { voiceToText } from '@/api/chat.js'
import { parseTime } from '@/utils/datetime'
const props = defineProps({
msgId: {
type: String,
required: true
},
createdAt: {
type: String,
required: false
}
})
const isShow=defineModel<boolean>('show')
@ -24,7 +29,8 @@ const onMaskClick = () => {
const onLoadData = () => {
ServeGetForwardRecords({
msg_id: props.msgId
msg_id: props.msgId,
biz_date: parseTime(new Date(props.createdAt), '{y}{m}')
}).then((res) => {
if (res.code == 200) {
items.value = res.data.items || []

2
src/components/talk/message/ForwardMessage.vue
View File

@ -33,7 +33,7 @@ const onClick = () => {
<span>转发：聊天会话记录 ({{ extra.msg_ids.length }}条)</span>
</div>
<ForwardRecord v-model:show="isShowRecord" :msg-id="data.msg_id" @close="isShowRecord = false" />
<ForwardRecord v-model:show="isShowRecord" :msg-id="data.msg_id" @close="isShowRecord = false" :created-at="data.created_at"/>
</section>
</template>

22
src/views/message/inner/IndexSider.vue
View File

@ -171,6 +171,9 @@ const state = reactive({
title: '姓名 【工号】',
field: 'nickName',
width: 200,
ellipsis: {
tooltip: true
},
render(row, index) {
return row.nickName + '【' + row.jobNum + '】'
}
@ -179,7 +182,9 @@ const state = reactive({
title: '岗位名称',
field: 'positionName',
width: 400,
ellipsis: true,
ellipsis: {
tooltip: true
},
render(row, index) {
let positionNames = Array.isArray(row.depPositions)
? row.depPositions.flatMap((dep) =>
@ -192,7 +197,7 @@ const state = reactive({
{
title: '操作',
field: 'action',
width: 200,
width: 180,
align: 'center',
fixed: 'right',
render(row, index) {
@ -213,7 +218,10 @@ const state = reactive({
{
title: '群聊名称',
field: 'groupName',
width: 200,
width: 400,
ellipsis: {
tooltip: true
},
render(row, index) {
return row.group_name
}
@ -221,7 +229,7 @@ const state = reactive({
{
title: '群类型',
field: 'groupType',
width: 400,
width: 200,
ellipsis: true,
render(row, index) {
let groupType = row.group_type
@ -239,7 +247,7 @@ const state = reactive({
{
title: '操作',
field: 'action',
width: 200,
width: 180,
align: 'center',
fixed: 'right',
render(row, index) {
@ -1177,6 +1185,7 @@ html[theme-mode='dark'] {
background-color: #46299d;
color: #fff;
}
.groupChatList-pagination {
display: flex;
justify-content: flex-end;
@ -1261,4 +1270,7 @@ html[theme-mode='dark'] {
}
}
}
:deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
background-color: rgba(70, 41, 157, 0.1) !important;
}
</style>

8
src/views/message/inner/panel/PanelContent.vue
View File

@ -716,6 +716,12 @@ const loadMoreReadListDetail = () => {
state.value.loadingReadListDetail = false
})
}
const onCustomSkipBottomEvent = () => {
console.log('onCustomSkipBottomEvent')
onLoad({ ...props, limit: 30 })
// scrollToBottom()
}
</script>
<template>
@ -943,7 +949,7 @@ const loadMoreReadListDetail = () => {
</div>
<!-- 置底按钮 -->
<SkipBottom v-model="skipBottom" />
<SkipBottom v-model="skipBottom" :customSkipBottomEvent="true" @customSkipBottomEvent="onCustomSkipBottomEvent"/>
</section>
<!-- 右键菜单 -->

12
src/views/message/inner/panel/SkipBottom.vue
View File

@ -3,20 +3,26 @@ import { useDialogueStore } from '@/store'
import { DoubleDown } from '@icon-park/vue-next'
import { scrollToBottom } from '@/utils/dom'
defineProps(['modelValue'])
const props = defineProps(['modelValue', 'customSkipBottomEvent'])
const emit = defineEmits(['customSkipBottomEvent'])
const dialogueStore = useDialogueStore()
// 聊天版本滚动到底部
const onSkipBottom = () => {
console.log('onSkipBottom')
scrollToBottom()
if(props?.customSkipBottomEvent){
emit('customSkipBottomEvent')
}else{
scrollToBottom()
}
}
</script>
<template>
<!-- 置底按钮 -->
<div class="skip-bottom pointer" :class="{ show: modelValue }" @click="onSkipBottom">
<div class="skip-bottom pointer" :class="{ show: props?.modelValue }" @click="onSkipBottom">
<span v-if="dialogueStore.unreadBubble">{{ dialogueStore.unreadBubble }} 条未读消息</span>
<span v-else>回到底部</span>
<n-icon size="14" color="#fff" :component="DoubleDown" />