GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-23 23:10:13 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

add mobile sidebar

Browse Source
This commit is contained in:
Zhang Minghan 2023-08-14 18:16:42 +08:00
parent 0e6b470d24
commit 6fecd0f4f0
2 changed files with 68 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/src/App.vue
View File

@ -9,8 +9,12 @@ import Heart from "./components/icons/heart.vue";
import Chat from "./components/icons/chat.vue"; import Chat from "./components/icons/chat.vue";
import Delete from "./components/icons/delete.vue"; import Delete from "./components/icons/delete.vue";
import { deleteConversation } from "./assets/script/api"; import { deleteConversation } from "./assets/script/api";
import {ref} from "vue";
import Close from "./components/icons/close.vue";
const current = manager.getCurrent(); const current = manager.getCurrent();
const sidebar = ref(false);
function goto() { function goto() {
window.location.href = "https://deeptrain.net/login?app=chatnio"; window.location.href = "https://deeptrain.net/login?app=chatnio";
} }
@ -19,6 +23,15 @@ function toggle(n: boolean) {
gpt4.value = mobile.value ? !gpt4.value : n; gpt4.value = mobile.value ? !gpt4.value : n;
if (gpt4.value && !auth.value) return goto(); if (gpt4.value && !auth.value) return goto();
} }
function setSidebar(n: boolean) {
sidebar.value = n;
}
function toggleConversation(id: number) {
manager.toggle(id);
setSidebar(false);
}
</script> </script>
<template> <template>
@ -42,11 +55,17 @@ function toggle(n: boolean) {
<heart /> <heart />
捐助我们 捐助我们
</a> </a>
<div class="conversation-container" v-if="auth && !mobile"> <div class="conversation-container" v-if="auth" :class="{'mobile': mobile, 'active': sidebar}">
<div class="operation-wrapper" v-if="mobile">
<div class="grow" />
<div class="operation" @click="setSidebar(false)">
<close />
</div>
</div>
<div class="conversation" <div class="conversation"
v-for="(conversation, idx) in list" :key="idx" v-for="(conversation, idx) in list" :key="idx"
:class="{'active': current === conversation.id}" :class="{'active': current === conversation.id}"
@click="manager.toggle(conversation.id)" @click="toggleConversation(conversation.id)"
> >
<chat class="icon" /> <chat class="icon" />
<div class="title">{{ conversation.name }}</div> <div class="title">{{ conversation.name }}</div>
@ -55,7 +74,7 @@ function toggle(n: boolean) {
</div> </div>
</div> </div>
<div class="grow" /> <div class="grow" />
<div class="user" v-if="auth"> <div class="user" v-if="auth" @click="setSidebar(true)">
<img class="avatar" :src="'https://api.deeptrain.net/avatar/' + username" alt=""> <img class="avatar" :src="'https://api.deeptrain.net/avatar/' + username" alt="">
<span class="username">{{ username }}</span> <span class="username">{{ username }}</span>
</div> </div>
@ -93,6 +112,7 @@ function toggle(n: boolean) {
max-width: 1200px; max-width: 1200px;
max-height: 650px; max-height: 650px;
z-index: 1; z-index: 1;
overflow: hidden;
} }
aside { aside {
@ -107,6 +127,8 @@ aside {
.user { .user {
display: flex; display: flex;
cursor: pointer;
user-select: none;
flex-direction: row; flex-direction: row;
margin: 28px auto; margin: 28px auto;
} }
@ -216,6 +238,44 @@ aside {
scrollbar-width: thin; scrollbar-width: thin;
} }
.conversation-container.mobile {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgb(32, 33, 35);
transition: .5s;
z-index: 2;
margin: 0;
padding: 16px;
transform: translateX(-32px);
pointer-events: none;
opacity: 0;
}
.conversation-container.mobile.active {
width: calc(100% - 32px);
transform: translateX(0);
pointer-events: all;
opacity: 1;
}
.operation-wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: max-content;
}
.operation-wrapper svg {
width: 24px;
height: 24px;
stroke: var(--card-text);
cursor: pointer;
transition: .25s;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
} }

5
app/src/components/icons/close.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/>
</svg>
</template>