优化对话框和消息视图组件:调整消息对话框最大宽度,增加全屏支持,更新消息内容引用,修改消息项的样式,提升用户体验

This commit is contained in:
jxxghp
2025-04-29 17:08:55 +08:00
parent ba09afb744
commit 6fd5e30fdc
3 changed files with 17 additions and 11 deletions

View File

@@ -286,7 +286,14 @@ onMounted(() => {
</VCard>
</VDialog>
<!-- 消息中心弹窗 -->
<VDialog v-if="messageDialog" v-model="messageDialog" max-width="35rem" scrollable>
<VDialog
v-if="messageDialog"
v-model="messageDialog"
max-width="40rem"
scrollable
:fullscreen="!display.mdAndUp.value"
ref="messageDialogRef"
>
<VCard>
<VCardItem>
<VCardTitle>
@@ -296,8 +303,8 @@ onMounted(() => {
<VDialogCloseBtn @click="messageDialog = false" />
</VCardItem>
<VDivider />
<VCardText>
<MessageView ref="chatContainer" />
<VCardText ref="messageContentRef">
<MessageView ref="messageViewRef" @scroll="scrollMessageToEnd" />
</VCardText>
<VDivider />
<VCardActions class="pa-4">
@@ -311,15 +318,14 @@ onMounted(() => {
@keyup.enter="sendMessage"
/>
<VBtn
variant="elevated"
:disabled="sendButtonDisabled"
@click="sendMessage"
:loading="sendButtonDisabled"
color="primary"
min-width="auto"
width="46"
height="38"
>{{ t('common.send') }}</VBtn
>
prepend-icon="mdi-send"
>{{ t('common.send') }}
</VBtn>
</div>
</VCardActions>
</VCard>

View File

@@ -117,7 +117,7 @@ onBeforeUnmount(() => {
<div
v-for="(msg, index) in messages"
:key="index"
class="chat-group d-flex mb-8"
class="chat-group d-flex mt-5 mb-8"
:class="msg.action == 1 ? 'flex-row align-start' : 'flex-row-reverse align-end'"
>
<div class="d-inline-flex flex-column" :class="msg.action == 1 ? 'align-start' : 'align-end'">

View File

@@ -199,7 +199,7 @@ onMounted(async () => {
</script>
<template>
<VList lines="two" border rounded>
<VList lines="two" rounded>
<template v-for="(target, index) of targets" :key="target.name">
<VListItem>
<template #prepend>
@@ -219,7 +219,7 @@ onMounted(async () => {
<VBtn size="small" icon="mdi-connection" :disabled="target.btndisable" @click="netTest(index)" />
</template>
</VListItem>
<VDivider v-if="index !== targets.length - 1" />
<VDivider inset v-if="index !== targets.length - 1" />
</template>
</VList>
</template>