Browse Source

add:内网聊天移动端样式适配

master
tiantian 5 months ago
parent
commit
97f7fa7779
  1. 13
      frontend/src/assets/chat.scss
  2. 3
      frontend/src/components/localchat/AiChatLeft.vue
  3. 4
      frontend/src/components/localchat/AiChatMain.vue
  4. 11
      frontend/src/components/localchat/ChatContent.vue
  5. 4
      frontend/src/components/localchat/ChatDomain.vue
  6. 23
      frontend/src/components/localchat/LocalChat.vue
  7. 4
      frontend/src/components/window/WindowTemplate.vue

13
frontend/src/assets/chat.scss

@ -105,3 +105,16 @@
border-radius: 50%; border-radius: 50%;
} }
} }
@media screen and (max-width: 768px) {
.chat-bot{
.input-area{
width: 90%;
.file-btn{
margin-left: vw(-20);
}
.websearch-btn{
margin-left: vw(-5);
}
}
}
}

3
frontend/src/components/localchat/AiChatLeft.vue

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useAiChatStore } from "@/stores/aichat"; import { useAiChatStore } from "@/stores/aichat";
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
import { isMobileDevice } from "@/util/device";
// import { t } from "@/i18n"; // import { t } from "@/i18n";
// import { notifyInfo,notifySuccess } from "@/util/msg.ts"; // import { notifyInfo,notifySuccess } from "@/util/msg.ts";
const chatStore = useAiChatStore(); const chatStore = useAiChatStore();
@ -22,7 +23,7 @@ const handleSearch = async () => {
</script> </script>
<template> <template>
<el-dialog v-model="chatStore.showInfo" width="600" append-to-body> <el-dialog v-model="chatStore.showInfo" width="600" append-to-body :fullscreen="isMobileDevice() ? true : false">
<ai-chat-info /> <ai-chat-info />
</el-dialog> </el-dialog>
<el-scrollbar> <el-scrollbar>

4
frontend/src/components/localchat/AiChatMain.vue

@ -230,14 +230,14 @@ const uploadImage = async (event: any) => {
<div class="input-panel"> <div class="input-panel">
<el-row :gutter="24" style="border-bottom: none;"> <el-row :gutter="24" style="border-bottom: none;">
<el-col :span="2"> <el-col :span="2">
<el-button @click="selectImage" size="large" icon="Paperclip" circle <el-button class="file-btn" @click="selectImage" size="large" icon="Paperclip" circle
:class="{ 'selected-image': imageData != '' || fileContent != '' }" /> :class="{ 'selected-image': imageData != '' || fileContent != '' }" />
<input type="file" ref="imageInput" <input type="file" ref="imageInput"
accept="image/*,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf" accept="image/*,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf"
style="display: none" @change="uploadImage" /> style="display: none" @change="uploadImage" />
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-button @click="webSearch = !webSearch" size="large" icon="ChromeFilled" circle <el-button class="websearch-btn" @click="webSearch = !webSearch" size="large" icon="ChromeFilled" circle
:type="webSearch ? 'primary' : 'default'" /> :type="webSearch ? 'primary' : 'default'" />
</el-col> </el-col>
<el-col :span="17"> <el-col :span="17">

11
frontend/src/components/localchat/ChatContent.vue

@ -320,4 +320,15 @@ $win10-light-grey: #f2f2f2;
/* -webkit-box-orient: vertical; */ /* -webkit-box-orient: vertical; */
/* overflow: hidden; */ /* overflow: hidden; */
} }
@media screen and (max-width: 768px) {
.chatContentContainer {
display: flex;
flex-direction: column;
.message-area {
flex: 1 !important;
}
}
}
</style> </style>

4
frontend/src/components/localchat/ChatDomain.vue

@ -65,7 +65,7 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
<el-dialog v-model="store.showAddUser" title="系统设置" width="500"> <el-dialog v-model="store.showAddUser" title="系统设置" width="500" :fullscreen="isMobileDevice() ? true : false">
<el-form> <el-form>
<el-form-item label=" IP段第一位"> <el-form-item label=" IP段第一位">
@ -114,6 +114,7 @@
import { useLocalChatStore } from "@/stores/localchat"; import { useLocalChatStore } from "@/stores/localchat";
import { formatChatTime } from "@/util/common"; import { formatChatTime } from "@/util/common";
import { getSystemKey } from "@/system/config"; import { getSystemKey } from "@/system/config";
import { isMobileDevice } from "@/util/device";
const store = useLocalChatStore(); const store = useLocalChatStore();
const conf = ref(getSystemKey('chatConf')) const conf = ref(getSystemKey('chatConf'))
</script> </script>
@ -255,6 +256,7 @@ const conf = ref(getSystemKey('chatConf'))
.el-empty { .el-empty {
margin: auto; margin: auto;
} }
.text-center { .text-center {
text-align: center; text-align: center;
} }

23
frontend/src/components/localchat/LocalChat.vue

@ -63,4 +63,27 @@ onMounted(async () => {
max-height: max-content; max-height: max-content;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
@media screen and (max-width: 768px) {
.container {
height: calc(100vh - vh(90));
}
.menu {
position: fixed;
bottom: 0;
width: 100vw;
display: flex;
justify-content: space-evenly;
}
.side {
height: 100%;
background-color: #fff;
}
.chat-box {
height: 100%;
}
}
</style> </style>

4
frontend/src/components/window/WindowTemplate.vue

@ -401,8 +401,10 @@ const dragBorders = [
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.wintmp_outer { .wintmp_outer {
height: vh(100); box-sizing: border-box;
height: 100vh;
padding-top: vh(40); padding-top: vh(40);
border: 0px;
} }
.title { .title {

Loading…
Cancel
Save