Browse Source

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

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

17
frontend/src/assets/chat.scss

@ -74,7 +74,7 @@
gap: 10px; /* 按钮之间的间距 */
padding: 10px; /* 内边距,可以根据需要调整 */
}
.top-menu-button {
display: flex;
align-items: center;
@ -87,7 +87,7 @@
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.2s; /* 平滑过渡效果 */
}
.top-menu-button:hover {
background-color: #f0f8ff; /* 悬停时的背景颜色 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 悬停时的阴影效果 */
@ -104,4 +104,17 @@
background-color: red;
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);
}
}
}
}

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

@ -1,6 +1,7 @@
<script setup lang="ts">
import { useAiChatStore } from "@/stores/aichat";
import { Search } from "@element-plus/icons-vue";
import { isMobileDevice } from "@/util/device";
// import { t } from "@/i18n";
// import { notifyInfo,notifySuccess } from "@/util/msg.ts";
const chatStore = useAiChatStore();
@ -12,17 +13,17 @@ const handleSearch = async () => {
return item;
}
})
if(res.length > 0){
if (res.length > 0) {
chatStore.chatList = res
}
}else{
} else {
await chatStore.getChatList()
}
};
</script>
<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 />
</el-dialog>
<el-scrollbar>

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

@ -230,14 +230,14 @@ const uploadImage = async (event: any) => {
<div class="input-panel">
<el-row :gutter="24" style="border-bottom: none;">
<el-col :span="2">
<el-button @click="selectImage" size="large" icon="Paperclip" circle
:class="{ 'selected-image': imageData != ''|| fileContent != '' }" />
<el-button class="file-btn" @click="selectImage" size="large" icon="Paperclip" circle
:class="{ 'selected-image': imageData != '' || fileContent != '' }" />
<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"
style="display: none" @change="uploadImage" />
</el-col>
<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'" />
</el-col>
<el-col :span="17">

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

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

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

@ -64,11 +64,11 @@
</div>
</el-scrollbar>
</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-item label="IP段第一位">
<el-form-item label=" IP段第一位">
<el-input v-model="conf.first" autocomplete="off" placeholder="输入ip段第一位 例如:192" />
</el-form-item>
<el-form-item label="IP段第二位">
@ -114,6 +114,7 @@
import { useLocalChatStore } from "@/stores/localchat";
import { formatChatTime } from "@/util/common";
import { getSystemKey } from "@/system/config";
import { isMobileDevice } from "@/util/device";
const store = useLocalChatStore();
const conf = ref(getSystemKey('chatConf'))
</script>
@ -255,7 +256,8 @@ const conf = ref(getSystemKey('chatConf'))
.el-empty {
margin: auto;
}
.text-center{
.text-center {
text-align: center;
}
</style>

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

@ -63,4 +63,27 @@ onMounted(async () => {
max-height: max-content;
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>

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

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

Loading…
Cancel
Save