vadim/microchat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vip

Browse Source
This commit is contained in:
Vadim
2026-02-22 18:35:59 +03:00
parent fd54fa75bd
commit 25750fee51
21 changed files with 400 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/App.vue
View File

@@ -1,143 +1,20 @@
<script setup lang="ts">
import WebSocketComponent from '@/components/WebSocketComponent.vue'
import { ref } from 'vue'
import ChatMessageText from '@/components/ChatMessageText.vue'
import ChatMessage from '@/components/ChatMessage.vue'
import ChatView from '@/views/ChatView.vue'
import LoginView from '@/views/LoginView.vue'
import { useAuthStore } from '@/stores/auth.ts'
import { computed } from 'vue'
const email = ref('vadim.olonin@gmail.com')
const search = ref('foobar')
const authStore = useAuthStore()
async function onSubmit() {
console.log('onSubmit')
try {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email: email.value }),
}
const res = await fetch('http://localhost:5173/login', options)
if (res.ok) {
const data = await res.json()
console.log(data)
}
} catch (error) {
console.log(error)
}
}
const isAuth = computed(() => !!authStore.token)
</script>
<template>
<v-app>
<v-main class="chat-fullscreen">
<v-container fluid class="h-100 pa-0">
<v-row no-gutters class="h-100">
<v-col cols="12" md="3">
<v-sheet class="pa-4 d-flex flex-column h-100" theme="dark">
<div class="d-flex align-center ga-4">
<v-btn icon="mdi-menu" variant="text"></v-btn>
<v-text-field
v-model="search"
rounded="xl"
density="compact"
hide-details
variant="outlined"
bg-color="black"
base-color="black"
color="primary"
/>
</div>
<v-list theme="dark" density="compact" lines="two">
<v-list-subheader>Чаты</v-list-subheader>
<v-list-item
v-for="n in 5"
:key="n"
:title="'Контакт ' + n"
:subtitle="'Последнее сообщение...'"
>
<template v-slot:prepend>
<v-avatar color="grey-lighten-1" text="V"> </v-avatar>
</template>
<template v-slot:append>
<div class="d-flex flex-column align-end">
<v-chip density="compact" size="small">2</v-chip>
<div class="text-caption">22:22</div>
</div>
</template>
</v-list-item>
</v-list>
</v-sheet>
</v-col>
<v-col cols="9" class="d-flex flex-column h-100">
<v-toolbar color="white" class="flex-grow-0 px-4">
<v-avatar color="grey-lighten-1" text="V"></v-avatar>
<v-toolbar-title class="">name</v-toolbar-title>
</v-toolbar>
<v-card
rounded="0"
variant="flat"
color="grey-lighten-3"
class="flex-grow-1 d-flex flex-column"
style="overflow: hidden"
>
<v-card-text
class="flex-grow-1 d-flex ga-4 flex-column flex-column-reverse"
style="overflow-y: auto"
>
<!-- <div class="d-flex justify-center">-->
<!-- <v-chip size="small">Сегодня</v-chip>-->
<!-- </div>-->
<chat-message />
<chat-message username="Vadim" text="Привет! Как дела? Что нового?" />
<chat-message
username="Vadim"
text="Привет! Как дела? Что нового?"
created-at="2020-02-04T05:45:00.000Z"
/>
</v-card-text>
<v-card-actions class="flex-grow-0 bg-white pa-4">
<v-row dense align="center">
<v-col>
<v-text-field
rounded="xl"
bg-color="white"
variant="outlined"
hide-details
label="message"
>
<template v-slot:prepend-inner>
<v-btn icon variant="text" density="compact" color="grey-darken-1">
<v-icon>mdi-emoticon-outline</v-icon>
</v-btn>
</template>
</v-text-field>
</v-col>
<v-col cols="auto">
<v-btn icon variant="text" color="grey-darken-1">
<v-icon>mdi-paperclip</v-icon>
</v-btn>
</v-col>
<v-col cols="auto">
<v-btn icon variant="flat" color="primary">
<v-icon>mdi-send</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<chat-view v-if="isAuth" />
<login-view v-else />
</v-container>
</v-main>
</v-app>
@@ -147,4 +24,7 @@ async function onSubmit() {
.chat-fullscreen {
height: 100vh;
}
.message-shaped {
border-radius: 0 24px;
}
</style>