Browse Source

移动端工作台聊天样式

master
tiantian 5 months ago
parent
commit
c985b9d178
  1. 92
      frontend/src/components/chat/Chat.vue

92
frontend/src/components/chat/Chat.vue

@ -1,6 +1,7 @@
<script setup lang="ts">
import { useChatStore } from "@/stores/chat";
import { getWorkflowUrl } from "@/system/config";
import { isMobileDevice } from "@/util/device";
import { Search } from "@element-plus/icons-vue";
const store = useChatStore();
const workUrl = getWorkflowUrl();
@ -41,6 +42,7 @@ watch(
}
}
);
const drawer = ref(false)
</script>
<template>
<el-container class="container">
@ -70,7 +72,31 @@ watch(
</div>
<ai-chat-left v-if="store.currentNavId == 3" />
</el-container>
<!-- 手机端侧边栏 -->
<el-drawer v-if="isMobileDevice()" v-model="drawer" :with-header="false" direction="ltr" size="50%">
<!--搜索栏-->
<div 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>
</div>
<ai-chat-left v-if="store.currentNavId == 3" />
</el-drawer>
<el-container class="chat-box">
<el-button v-if="isMobileDevice()" icon="Menu" size="small" @click="drawer = !drawer"></el-button>
<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" />
@ -84,8 +110,19 @@ watch(
</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: isMobileDevice() ? '100%' : '550px' }" align-center
:fullscreen="isMobileDevice() ? true : false" :show-close="isMobileDevice() ? false : true">
<template #header v-if="isMobileDevice()">
<div class="dialog-header">
<el-button style="background-color: #0078d4; color: #fff"
@click="store.groupChatInvitedDialogVisible = false">取消</el-button>
<div class="dialog-title">创建群聊</div>
<el-button style="background-color: #0078d4; color: #fff"
@click="store.createGroupChat(users)">确定</el-button>
</div>
</template>
<div class="dialog-body">
<!-- 添加输入部门名的输入框 -->
<div>
@ -109,7 +146,7 @@ watch(
</el-transfer>
</div>
<template #footer>
<template #footer v-if="!isMobileDevice()">
<span class="dialog-footer">
<el-button style="background-color: #0078d4; color: #fff"
@click="store.groupChatInvitedDialogVisible = false">取消</el-button>
@ -287,5 +324,54 @@ watch(
position: fixed;
bottom: 0;
}
.side {
display: none;
}
:deep(.el-drawer__body) {
padding: 0;
}
.chat-box {
position: relative;
.el-button {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
}
::v-deep.dialog-body {
height: max-content;
}
::v-deep.el-transfer {
flex-direction: column;
width: auto;
height: max-content !important;
.el-transfer-panel {
width: 100% !important;
}
.el-transfer__buttons {
transform: rotate(90deg);
margin: 40px 0;
}
}
.chat-setting {
width: 100%;
}
}
</style>

Loading…
Cancel
Save