|
|
@ -1,46 +1,46 @@ |
|
|
|
<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(); |
|
|
|
}); |
|
|
|
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 generateData = () => { |
|
|
|
return store.allUserList.map((user: any) => ({ |
|
|
|
key: user.id, |
|
|
|
label: user.nickname, |
|
|
|
avatar: user.avatar, // 添加头像数据 |
|
|
|
})); |
|
|
|
}; |
|
|
|
|
|
|
|
const data = ref(generateData()); |
|
|
|
// 声明 users 时指定类型为 any[] |
|
|
|
let users = ref<any[]>([]); |
|
|
|
const myTransfer = ref() |
|
|
|
const data = ref(generateData()); |
|
|
|
// 声明 users 时指定类型为 any[] |
|
|
|
let users = ref<any[]>([]); |
|
|
|
const myTransfer = ref() |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
if (store.allUserList.length > 0) { |
|
|
|
data.value = generateData(); |
|
|
|
} |
|
|
|
}); |
|
|
|
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) |
|
|
|
); |
|
|
|
} |
|
|
|
// 监听搜索输入并更新 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"> |
|
|
@ -48,103 +48,62 @@ |
|
|
|
<el-aside class="menu"> |
|
|
|
<chat-menu /> |
|
|
|
</el-aside> |
|
|
|
<el-container |
|
|
|
class="side" |
|
|
|
v-if="store.currentNavId < 3" |
|
|
|
> |
|
|
|
<el-container class="side" v-if="store.currentNavId < 4"> |
|
|
|
<!--搜索栏--> |
|
|
|
<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> |
|
|
|
<template v-if="store.currentNavId < 2"> |
|
|
|
<el-header class="search"> |
|
|
|
<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> |
|
|
|
</template> |
|
|
|
<ai-chat-left v-if="store.currentNavId == 3" /> |
|
|
|
</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> |
|
|
|
<ai-chat-main v-if="store.currentNavId == 3" /> |
|
|
|
</el-container> |
|
|
|
<el-container |
|
|
|
class="chat-setting" |
|
|
|
v-if="store.currentNavId == 2" |
|
|
|
> |
|
|
|
<iframe |
|
|
|
class="workflow" |
|
|
|
:src="workUrl" |
|
|
|
></iframe> |
|
|
|
<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" |
|
|
|
> |
|
|
|
<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 |
|
|
|
> |
|
|
|
<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-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' }" |
|
|
|
:left-default-checked="[]" |
|
|
|
class="transfer-container" |
|
|
|
ref="myTransfer" |
|
|
|
> |
|
|
|
<el-transfer v-model="users" :data="data" :titles="['可选项', '已选项']" filterable style="height: 250px" |
|
|
|
filter-placeholder="搜索用户名" :props="{ key: 'key', label: 'label', avatar: 'avatar' }" |
|
|
|
:left-default-checked="[]" class="transfer-container" ref="myTransfer"> |
|
|
|
<!-- 自定义穿梭框列表项模板 --> |
|
|
|
<template #default="{ option }"> |
|
|
|
<el-avatar |
|
|
|
:src="option.avatar" |
|
|
|
size="small" |
|
|
|
style="margin-right: 5px" |
|
|
|
/> |
|
|
|
<el-avatar :src="option.avatar" size="small" style="margin-right: 5px" /> |
|
|
|
<span>{{ option.label }}</span> |
|
|
|
</template> |
|
|
|
</el-transfer> |
|
|
@ -152,167 +111,169 @@ |
|
|
|
|
|
|
|
<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 |
|
|
|
> |
|
|
|
<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) { |
|
|
|
:deep(.el-transfer) { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
/* 将布局方向设置为横向 */ |
|
|
|
width: 550px; |
|
|
|
/* 让穿梭框占满宽度 */ |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.el-transfer__buttons { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; /* 将布局方向设置为横向 */ |
|
|
|
width: 550px; /* 让穿梭框占满宽度 */ |
|
|
|
justify-content: center; |
|
|
|
justify-content: space-evenly; |
|
|
|
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; |
|
|
|
} |
|
|
|
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-dialog .el-dialog__header { |
|
|
|
border: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-transfer-panel { |
|
|
|
width: 270px !important; /* 设置每个穿梭框面板的宽度 */ |
|
|
|
height: 250px !important; |
|
|
|
} |
|
|
|
::v-deep .el-transfer-panel { |
|
|
|
width: 270px !important; |
|
|
|
/* 设置每个穿梭框面板的宽度 */ |
|
|
|
height: 250px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-transfer-panel__body { |
|
|
|
height: 200px !important; |
|
|
|
} |
|
|
|
::v-deep .el-transfer-panel__body { |
|
|
|
height: 200px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-checkbox__label { |
|
|
|
margin-left: 10px !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; |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.user-item { |
|
|
|
width: 100%; |
|
|
|
height: 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.inviteGroupChats { |
|
|
|
width: 40px; |
|
|
|
height: 30px; |
|
|
|
border: none; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
.user-item { |
|
|
|
width: 100%; |
|
|
|
height: 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.list { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 0; |
|
|
|
overflow-y: hidden; |
|
|
|
overflow-x: hidden; |
|
|
|
border-left: 1px solid #e8e8e8; |
|
|
|
} |
|
|
|
.dialog-body { |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.chat-box { |
|
|
|
flex: 3; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
max-height: max-content; |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
.list { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 0; |
|
|
|
overflow-y: hidden; |
|
|
|
overflow-x: hidden; |
|
|
|
border-left: 1px solid #e8e8e8; |
|
|
|
} |
|
|
|
|
|
|
|
.chat-setting { |
|
|
|
width: calc(100% - 65px); |
|
|
|
height: 100%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.workflow { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: contain; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
.dialog-body { |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
} |
|
|
|
|
|
|
|
.no-message-container { |
|
|
|
height: 100%; |
|
|
|
margin: 120px auto; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.chat-box { |
|
|
|
flex: 3; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
max-height: max-content; |
|
|
|
background-color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.department-name { |
|
|
|
margin: 10px 0; |
|
|
|
} |
|
|
|
.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> |
|
|
|