Browse Source

style: 工作台菜单栏移动端样式

master
tiantian 5 months ago
parent
commit
05f3ea206d
  1. 432
      frontend/src/components/chat/Chat.vue
  2. 170
      frontend/src/components/chat/ChatMenu.vue

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

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

170
frontend/src/components/chat/ChatMenu.vue

@ -1,76 +1,117 @@
<script setup> <script setup>
import { useChatStore } from "@/stores/chat"; import { useChatStore } from "@/stores/chat";
import { isMobileDevice } from "@/util/device";
import { Setting as SettingIcon } from "@element-plus/icons-vue"; import { Setting as SettingIcon } from "@element-plus/icons-vue";
const store = useChatStore(); const store = useChatStore();
</script> </script>
<template> <template>
<!-- 头像 --> <template v-if="!isMobileDevice()">
<el-row> <!-- 头像 -->
<el-avatar shape="square" :size="30" class="userAvatar" :src="store.userInfo.avatar" /> <el-row>
</el-row> <el-avatar shape="square" :size="30" class="userAvatar" :src="store.userInfo.avatar" />
</el-row>
<!-- 菜单按钮 --> <!-- 菜单按钮 -->
<el-row @click="store.setCurrentNavId(0)"> <el-row @click="store.setCurrentNavId(0)">
<div class="menu-icon-box"> <div class="menu-icon-box">
<el-icon v-if="store.currentNavId === 0" class="menu-icon-on"> <el-icon v-if="store.currentNavId === 0" class="menu-icon-on">
<Comment /> <Comment />
</el-icon> </el-icon>
<el-icon v-else class="menu-icon"> <el-icon v-else class="menu-icon">
<Comment /> <Comment />
</el-icon> </el-icon>
</div> </div>
</el-row> </el-row>
<el-row @click="store.setCurrentNavId(1)"> <el-row @click="store.setCurrentNavId(1)">
<div class="menu-icon-box"> <div class="menu-icon-box">
<el-icon v-if="store.currentNavId === 1" class="menu-icon-on"> <el-icon v-if="store.currentNavId === 1" class="menu-icon-on">
<UserFilled /> <UserFilled />
</el-icon> </el-icon>
<el-icon v-else class="menu-icon"> <el-icon v-else class="menu-icon">
<User /> <User />
</el-icon> </el-icon>
</div> </div>
</el-row> </el-row>
<el-row @click="store.setCurrentNavId(3)"> <el-row @click="store.setCurrentNavId(3)">
<div class="menu-icon-box"> <div class="menu-icon-box">
<el-icon v-if="store.currentNavId === 3" class="menu-icon-on"> <el-icon v-if="store.currentNavId === 3" class="menu-icon-on">
<Promotion /> <Promotion />
</el-icon> </el-icon>
<el-icon v-else class="menu-icon"> <el-icon v-else class="menu-icon">
<Position /> <Position />
</el-icon> </el-icon>
</div> </div>
</el-row> </el-row>
<el-row @click="store.setCurrentNavId(2)"> <el-row @click="store.setCurrentNavId(2)">
<div class="menu-icon-box"> <div class="menu-icon-box">
<el-icon <el-icon v-if="store.currentNavId === 2" class="menu-icon-on">
v-if="store.currentNavId === 2" <Platform />
class="menu-icon-on" </el-icon>
> <el-icon v-else class="menu-icon">
<Platform /> <Monitor />
</el-icon> </el-icon>
<el-icon </div>
v-else </el-row>
class="menu-icon"
>
<Monitor />
</el-icon>
</div>
</el-row>
<!-- 设置按钮固定在底部 --> <!-- 设置按钮固定在底部 -->
<el-row class="settings-icon-row" @click="store.setCurrentNavId(5)"> <el-row class="settings-icon-row" @click="store.setCurrentNavId(5)">
<div class="menu-icon-box"> <div class="menu-icon-box">
<el-icon v-if="store.currentNavId === 5" class="menu-icon-on"> <el-icon v-if="store.currentNavId === 5" class="menu-icon-on">
<Tools /> <Tools />
</el-icon> </el-icon>
<el-icon v-else class="menu-icon"> <el-icon v-else class="menu-icon">
<Tools /> <Tools />
</el-icon> </el-icon>
</div>
</el-row>
</template>
<template v-else>
<div class="menubar">
<div class="menu-icon-box" @click="store.setCurrentNavId(0)">
<el-icon v-if="store.currentNavId === 0" class="menu-icon-on">
<Comment />
</el-icon>
<el-icon v-else class="menu-icon">
<Comment />
</el-icon>
</div>
<div class="menu-icon-box" @click="store.setCurrentNavId(1)">
<el-icon v-if="store.currentNavId === 1" class="menu-icon-on">
<UserFilled />
</el-icon>
<el-icon v-else class="menu-icon">
<User />
</el-icon>
</div>
<div class="menu-icon-box" @click="store.setCurrentNavId(3)">
<el-icon v-if="store.currentNavId === 3" class="menu-icon-on">
<Promotion />
</el-icon>
<el-icon v-else class="menu-icon">
<Position />
</el-icon>
</div>
<div class="menu-icon-box" @click="store.setCurrentNavId(2)">
<el-icon v-if="store.currentNavId === 2" class="menu-icon-on">
<Platform />
</el-icon>
<el-icon v-else class="menu-icon">
<Monitor />
</el-icon>
</div>
<div class="menu-icon-box" @click="store.setCurrentNavId(5)">
<el-icon v-if="store.currentNavId === 5" class="menu-icon-on">
<Tools />
</el-icon>
<el-icon v-else class="menu-icon">
<Tools />
</el-icon>
</div>
</div> </div>
</el-row> </template>
</template> </template>
<style scoped> <style scoped>
@ -117,4 +158,11 @@ const store = useChatStore();
width: 55px; width: 55px;
height: 55px; height: 55px;
} }
@media screen and (max-width: 768px) {
.menubar {
display: flex;
height: 60px;
}
}
</style> </style>

Loading…
Cancel
Save