diff --git a/frontend/components.d.ts b/frontend/components.d.ts index c6ed83f..f98742a 100644 --- a/frontend/components.d.ts +++ b/frontend/components.d.ts @@ -61,6 +61,9 @@ declare module 'vue' { ElContainer: typeof import('element-plus/es')['ElContainer'] ElDialog: typeof import('element-plus/es')['ElDialog'] ElDrawer: typeof import('element-plus/es')['ElDrawer'] + ElDropdown: typeof import('element-plus/es')['ElDropdown'] + ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] + ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElFooter: typeof import('element-plus/es')['ElFooter'] ElForm: typeof import('element-plus/es')['ElForm'] diff --git a/frontend/src/components/chat/Chat.vue b/frontend/src/components/chat/Chat.vue index a8a29db..79f826c 100644 --- a/frontend/src/components/chat/Chat.vue +++ b/frontend/src/components/chat/Chat.vue @@ -132,6 +132,10 @@ :data="data" :titles="['可选项', '已选项']" filterable + :style="{ + height: store.groupTitle === '创建群聊' ? '250px' : '350px', + }" + filter-placeholder="搜索用户名" :props="{ key: 'key', label: 'label', avatar: 'avatar' }" class="transfer-container" > @@ -169,22 +173,25 @@ display: flex; flex-direction: row; /* 将布局方向设置为横向 */ width: 550px; /* 让穿梭框占满宽度 */ + justify-content: center; + align-items: center; .el-transfer__buttons { display: flex; justify-content: space-evenly; align-items: center; - width: 160px; + width: 120px; padding: 0 0 !important; .el-button { - width: 50px !important; + width: 40px !important; + height: 30px !important; + background-color: #0078d4; + color: #fff; } } } - .el-transfer { - display: flex; - flex-direction: row; /* 将布局方向设置为横向 */ - width: 550px; /* 让穿梭框占满宽度 */ - height: 250px; + + ::v-deep .el-dialog .el-dialog__header { + border: none !important; } ::v-deep .el-transfer-panel { diff --git a/frontend/src/components/chat/ChatBox.vue b/frontend/src/components/chat/ChatBox.vue index d4f30ee..5a7cbf5 100644 --- a/frontend/src/components/chat/ChatBox.vue +++ b/frontend/src/components/chat/ChatBox.vue @@ -3,7 +3,6 @@ class="chatbox-main" v-if="store.targetChatId" > -
@@ -15,10 +14,16 @@ {{ store.targetGroupInfo.displayName }}{{ 1 }}{{ store.targetGroupInfo.displayName }} -
+
+
+ + + + +
+ - -
+ +
@@ -201,6 +217,32 @@ const choose = useChooseStore(); const imgExt = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"]; const choosetype = ref(""); + const scrollbarRef = ref(null); + const innerRef = ref(null); + + function scrollToBottom() { + store.setScrollToBottom(innerRef, scrollbarRef); + } + + // 监听store中的messageSendStatus.value = true,调用scrollToBottom + watch( + () => store.messageSendStatus, + (newVal, _) => { + if (newVal) { + scrollToBottom(); + } + } + ); + + // 监听store中的messageReceiveStatus,调用scrollToBottom + watch( + () => store.messageReceiveStatus, + (newVal, _) => { + if (newVal) { + scrollToBottom(); + } + } + ); // 监听store.drawerVisible watch( @@ -251,6 +293,14 @@