@ -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 ( ) ) ;
/ / 声 明 u s e r s 时 指 定 类 型 为 a n y [ ]
let users = ref < any [ ] > ( [ ] ) ;
const myTransfer = ref ( )
const data = ref ( generateData ( ) ) ;
/ / 声 明 u s e r s 时 指 定 类 型 为 a n y [ ]
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 ( ) ;
}
} ) ;
/ / 监 听 搜 索 输 入 并 更 新 s e a r c h L i s t
watch (
( ) => store . searchInput ,
( newSearchInput ) => {
if ( newSearchInput === "" ) {
store . searchList = [ ] ; / / 当 搜 索 输 入 为 空 时 , 清 空 搜 索 列 表
} else {
store . searchList = store . chatList . filter (
( user : { displayName : string | string [ ] } ) =>
user . displayName . includes ( newSearchInput )
) ;
}
/ / 监 听 搜 索 输 入 并 更 新 s e a r c h L i s t
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 / >
< / e l - a s i d e >
< 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 / > < / e l - i c o n >
< / button >
< / e l - h e a d e r >
<!-- 好友列表 -- >
< el -main class = "list" >
< el -scrollbar >
< chat -msg -list v -if = " store.currentNavId = = 0 " / >
< chat -user -list v -if = " store.currentNavId = = 1 " / >
< / e l - s c r o l l b a r >
< / e l - m a i n >
< 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 / >
< / e l - i c o n >
< / button >
< / e l - h e a d e r >
<!-- 好友列表 -- >
< el -main class = "list" >
< el -scrollbar >
< chat -msg -list v -if = " store.currentNavId = = 0 " / >
< chat -user -list v -if = " store.currentNavId = = 1 " / >
< / e l - s c r o l l b a r >
< / e l - m a i n >
< / template >
< ai -chat -left v -if = " store.currentNavId = = 3 " / >
< / e l - c o n t a i n e r >
< 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 " / >
< / e l - c o n t a i n e r >
< 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 >
< / e l - c o n t a i n e r >
< el -container
class = "chat-setting"
v - if = "store.currentNavId == 5"
>
< el -container class = "chat-setting" v-if ="store.currentNavId == 5" >
< ChatUserSetting / >
< / e l - c o n t a i n e r >
< / e l - c o n t a i n e r >
<!-- 邀请群聊弹窗 -- >
< 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 = "请输入群聊名称"
> < / e l - i n p u t >
< el -input maxlength = "8" show -word -limit style = "width: 240px; height: 30px"
class = "department-name" v - model = "store.departmentName" placeholder = "请输入群聊名称" > < / e l - i n p u t >
< / e l - f o r m - i t e m >
< / e l - f o r m >
< / 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 >
< / e l - t r a n s f e r >
@ -152,167 +111,169 @@
< template # footer >
< span class = "dialog-footer" >
< el -button
style = "background-color: #0078d4; color: #fff"
@ click = "store.groupChatInvitedDialogVisible = false"
> 取消 < / e l - b u t t o n
>
< el -button
style = "background-color: #0078d4; color: #fff"
@ click = "store.createGroupChat(users)"
> 确定 < / e l - b u t t o n
>
< el -button style = "background-color: #0078d4; color: #fff"
@ click = "store.groupChatInvitedDialogVisible = false" > 取消 < / e l - b u t t o n >
< el -button style = "background-color: #0078d4; color: #fff"
@ click = "store.createGroupChat(users)" > 确定 < / e l - b u t t o n >
< / span >
< / template >
< / e l - d i a l o g >
< / template >
< style scoped >
: deep ( . el - transfer ) {
: deep ( . el - transfer ) {
display : flex ;
flex - direction : row ;
/* 将布局方向设置为横向 */
width : 550 px ;
/* 让穿梭框占满宽度 */
justify - content : center ;
align - items : center ;
. el - transfer__buttons {
display : flex ;
flex - direction : row ; /* 将布局方向设置为横向 */
width : 550 px ; /* 让穿梭框占满宽度 */
justify - content : center ;
justify - content : space - evenly ;
align - items : center ;
. el - transfer__buttons {
display : flex ;
justify - content : space - evenly ;
align - items : center ;
width : 120 px ;
padding : 0 0 ! important ;
. el - button {
width : 40 px ! important ;
height : 30 px ! important ;
background - color : # 0078 d4 ;
color : # fff ;
}
width : 120 px ;
padding : 0 0 ! important ;
. el - button {
width : 40 px ! important ;
height : 30 px ! important ;
background - color : # 0078 d4 ;
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 : 270 px ! important ; /* 设置每个穿梭框面板的宽度 */
height : 250 px ! important ;
}
: : v - deep . el - transfer - panel {
width : 270 px ! important ;
/* 设置每个穿梭框面板的宽度 */
height : 250 px ! important ;
}
: : v - deep . el - transfer - panel__body {
height : 200 px ! important ;
}
: : v - deep . el - transfer - panel__body {
height : 200 px ! important ;
}
: : v - deep . el - checkbox__label {
margin - left : 10 px ! important ;
}
: : v - deep . el - checkbox__label {
margin - left : 10 px ! important ;
}
. container {
display : flex ;
height : 100 % ;
width : 100 % ;
overflow - y : hidden ;
overflow - x : hidden ;
border - top : 1 px solid # e8e8e8 ;
}
. container {
display : flex ;
height : 100 % ;
width : 100 % ;
overflow - y : hidden ;
overflow - x : hidden ;
border - top : 1 px solid # e8e8e8 ;
}
. menu {
width : 55 px ;
background - color : # ffffff ;
overflow - y : hidden ;
overflow - x : hidden ;
- webkit - app - region : drag ;
}
. menu {
width : 55 px ;
background - color : # ffffff ;
overflow - y : hidden ;
overflow - x : hidden ;
- webkit - app - region : drag ;
}
. side {
flex : 1 ;
/* 占据剩余宽度 */
/* max-width: 200px; */
/* min-width: 200px; */
min - height : 650 px ;
max - height : max - content ;
border - right : 1 px solid # e8e8e8 ;
overflow - y : hidden ;
overflow - x : hidden ;
}
. side {
flex : 1 ;
/* 占据剩余宽度 */
/* max-width: 200px; */
/* min-width: 200px; */
min - height : 650 px ;
max - height : max - content ;
border - right : 1 px solid # e8e8e8 ;
overflow - y : hidden ;
overflow - x : hidden ;
}
. search {
display : flex ;
align - items : center ;
justify - content : space - evenly ;
width : 100 % ;
height : 50 px ;
padding : 0 ;
padding - right : 10 px ;
- webkit - app - region : drag ;
border - bottom : 1 px solid # e8e8e8 ;
border - left : 1 px solid # e8e8e8 ;
}
. inviteGroupChats {
width : 40 px ;
height : 30 px ;
border : none ;
border - radius : 4 px ;
background - color : # f0f0f0 ;
}
. search {
display : flex ;
align - items : center ;
justify - content : space - evenly ;
width : 100 % ;
height : 50 px ;
padding : 0 ;
padding - right : 10 px ;
- webkit - app - region : drag ;
border - bottom : 1 px solid # e8e8e8 ;
border - left : 1 px solid # e8e8e8 ;
}
. user - item {
width : 100 % ;
height : 30 px ;
display : flex ;
align - items : center ;
}
. inviteGroupChats {
width : 40 px ;
height : 30 px ;
border : none ;
border - radius : 4 px ;
background - color : # f0f0f0 ;
}
. search - input {
width : calc ( 100 % - 20 px ) ;
margin : 10 px ;
height : 32 px ;
- webkit - app - region : no - drag ;
-- el - input - placeholder - color : # bfbfbf ! important ;
-- el - input - icon - color : # bfbfbf ! important ;
}
. user - item {
width : 100 % ;
height : 30 px ;
display : flex ;
align - items : center ;
}
. list {
width : 100 % ;
height : 100 % ;
padding : 0 ;
overflow - y : hidden ;
overflow - x : hidden ;
border - left : 1 px solid # e8e8e8 ;
}
. dialog - body {
width : 100 % ;
height : 350 px ;
}
. search - input {
width : calc ( 100 % - 20 px ) ;
margin : 10 px ;
height : 32 px ;
- 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 : 1 px solid # e8e8e8 ;
}
. chat - setting {
width : calc ( 100 % - 65 px ) ;
height : 100 % ;
overflow : hidden ;
}
. workflow {
width : 100 % ;
height : 100 % ;
object - fit : contain ;
border : none ;
}
. dialog - body {
width : 100 % ;
height : 350 px ;
}
. no - message - container {
height : 100 % ;
margin : 120 px auto ;
text - align : center ;
font - size : 14 px ;
justify - content : center ;
}
. chat - box {
flex : 3 ;
width : 100 % ;
height : 100 % ;
max - height : max - content ;
background - color : # ffffff ;
}
. department - name {
margin : 10 px 0 ;
}
. chat - setting {
width : calc ( 100 % - 65 px ) ;
height : 100 % ;
overflow : hidden ;
}
. workflow {
width : 100 % ;
height : 100 % ;
object - fit : contain ;
border : none ;
}
. no - message - container {
height : 100 % ;
margin : 120 px auto ;
text - align : center ;
font - size : 14 px ;
justify - content : center ;
}
. department - name {
margin : 10 px 0 ;
}
< / style >