You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

315 lines
6.5 KiB

<script setup lang="ts">
import { useChatStore } from "@/stores/chat";
import { getWorkflowUrl } from "@/system/config";
import { Search } from "@element-plus/icons-vue";
const store = useChatStore()
const workUrl = getWorkflowUrl();
onMounted(() => {
store.initChat();
});
const generateData = () => {
return store.allUserList.map((user: any) => ({
key: user.id,
label: user.nickname,
avatar: user.avatar, // 添加头像数据
}));
};
const data = ref(generateData());
// 声明 users 时指定类型为 any[]
const users = ref<any[]>([]);
watchEffect(() => {
if (store.allUserList.length > 0) {
data.value = generateData();
}
});
// 监听搜索输入并更新 searchList
watch(
() => store.searchInput,
(newSearchInput) => {
if (newSearchInput === "") {
store.searchList = []; // 当搜索输入为空时,清空搜索列表
} else {
store.searchList = store.chatList.filter(
(user: { displayName: string | string[] }) =>
user.displayName.includes(newSearchInput)
);
}
}
);
</script>
<template>
<el-container class="container">
<!--菜单-->
<el-aside class="menu">
<chat-menu />
</el-aside>
<el-container
class="side"
v-if="store.currentNavId < 3"
>
<!--搜索栏-->
<el-header
class="search"
v-if="store.currentNavId < 2"
>
<el-input
placeholder="搜索"
:prefix-icon="Search"
class="search-input"
v-model="store.searchInput"
/>
<!-- 邀请群聊 -->
<button
class="inviteGroupChats"
@click="store.setGroupChatInvitedDialogVisible(true)"
>
<el-icon><Plus /></el-icon>
</button>
</el-header>
<!--好友列表-->
<el-main class="list">
<el-scrollbar>
<chat-msg-list v-if="store.currentNavId == 0" />
<chat-user-list v-if="store.currentNavId == 1" />
</el-scrollbar>
</el-main>
</el-container>
<el-container class="chat-box">
<chat-box v-if="store.currentNavId < 1" />
<chat-user-info v-if="store.currentNavId == 1"></chat-user-info>
</el-container>
<el-container
class="chat-setting"
v-if="store.currentNavId == 2"
>
<iframe
class="workflow"
:src="workUrl"
></iframe>
</el-container>
<el-container
class="chat-setting"
v-if="store.currentNavId == 5"
>
<ChatUserSetting />
</el-container>
</el-container>
<!-- 邀请群聊弹窗 -->
<el-dialog
v-model="store.groupChatInvitedDialogVisible"
width="80%"
title="创建群聊"
style="height: 550px"
align-center
>
<div class="dialog-body">
<!-- 添加输入部门名的输入框 -->
<div>
<el-form label-position="top">
<el-form-item label="群聊名称:">
<el-input
maxlength="8"
show-word-limit
style="width: 240px; height: 30px"
class="department-name"
v-model="store.departmentName"
placeholder="请输入群聊名称"
></el-input>
</el-form-item>
</el-form>
</div>
<!-- 使用 Element 的 el-transfer 组件替换自定义穿梭框 -->
<el-transfer
v-model="users"
:data="data"
:titles="['可选项', '已选项']"
filterable
style="height: 250px"
filter-placeholder="搜索用户名"
:props="{ key: 'key', label: 'label', avatar: 'avatar' }"
class="transfer-container"
>
<!-- 自定义穿梭框列表项模板 -->
<template #default="{ option }">
<el-avatar
:src="option.avatar"
size="small"
style="margin-right: 5px"
/>
<span>{{ option.label }}</span>
</template>
</el-transfer>
</div>
<template #footer>
<span class="dialog-footer">
<el-button
style="background-color: #0078d4; color: #fff"
@click="store.groupChatInvitedDialogVisible = false"
>取消</el-button
>
<el-button
style="background-color: #0078d4; color: #fff"
@click="store.createGroupChat(users)"
>确定</el-button
>
</span>
</template>
</el-dialog>
</template>
<style scoped>
:deep(.el-transfer) {
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: 120px;
padding: 0 0 !important;
.el-button {
width: 40px !important;
height: 30px !important;
background-color: #0078d4;
color: #fff;
}
}
}
::v-deep .el-dialog .el-dialog__header {
border: none !important;
}
::v-deep .el-transfer-panel {
width: 270px !important; /* 设置每个穿梭框面板的宽度 */
height: 250px !important;
}
::v-deep .el-transfer-panel__body {
height: 200px !important;
}
::v-deep .el-checkbox__label {
margin-left: 10px !important;
}
.container {
display: flex;
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-top: 1px solid #e8e8e8;
}
.menu {
width: 55px;
background-color: #ffffff;
overflow-y: hidden;
overflow-x: hidden;
-webkit-app-region: drag;
}
.side {
flex: 1;
/* 占据剩余宽度 */
max-width: 200px;
min-width: 200px;
min-height: 650px;
max-height: max-content;
border-right: 1px solid #e8e8e8;
overflow-y: hidden;
overflow-x: hidden;
}
.search {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 50px;
padding: 0;
padding-right: 10px;
-webkit-app-region: drag;
border-bottom: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
}
.inviteGroupChats {
width: 40px;
height: 30px;
border: none;
border-radius: 4px;
background-color: #f0f0f0;
}
.user-item {
width: 100%;
height: 30px;
display: flex;
align-items: center;
}
.search-input {
width: calc(100% - 20px);
margin: 10px;
height: 32px;
-webkit-app-region: no-drag;
--el-input-placeholder-color: #bfbfbf !important;
--el-input-icon-color: #bfbfbf !important;
}
.list {
width: 100%;
height: 100%;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
border-left: 1px solid #e8e8e8;
}
.dialog-body {
width: 100%;
height: 350px;
}
.chat-box {
flex: 3;
width: 100%;
height: 100%;
max-height: max-content;
background-color: #ffffff;
}
.chat-setting {
width: calc(100% - 65px);
height: 100%;
overflow: hidden;
}
.workflow {
width: 100%;
height: 100%;
object-fit: contain;
border: none;
}
.no-message-container {
height: 100%;
margin: 120px auto;
text-align: center;
font-size: 14px;
justify-content: center;
}
.department-name {
margin: 10px 0;
}
</style>