chore: initialize

This commit is contained in:
ChenZhaoYu
2023-02-09 11:21:33 +08:00
commit 6ad8d59dc4
34 changed files with 5722 additions and 0 deletions

View File

@@ -0,0 +1,31 @@
<script setup lang='ts'>
import { SvgIcon } from '@/components'
interface Props {
user?: boolean
date?: string
message?: string
}
defineProps<Props>()
</script>
<template>
<div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': user }]">
<div
class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
:class="[user ? 'ml-3' : 'mr-3']"
>
<img v-if="user" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
<SvgIcon v-else local-icon="logo" class="text-[26px]" />
</div>
<div class="flex flex-col text-sm" :class="[{ 'items-end': user }]">
<span class="text-xs text-[#b4bbc4]">
{{ date }}
</span>
<div class="p-2 mt-2 rounded-md" :class="[user ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
{{ message }}
</div>
</div>
</div>
</template>

42
src/views/Chat/index.vue Normal file
View File

@@ -0,0 +1,42 @@
<script setup lang='ts'>
import { NButton, NInput, NScrollbar } from 'naive-ui'
import Message from './components/Message.vue'
import { SvgIcon } from '@/components'
</script>
<template>
<div class="h-full p-4">
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
<header class="flex items-center justify-between p-4">
<div>会话</div>
<div>&nbsp;</div>
</header>
<main class="flex-1 overflow-hidden border-y">
<div class="h-full">
<NScrollbar class="h-full p-4">
<div>
<Message date="10 hours ago" message="hello world" />
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
<Message date="10 hours ago" message="hello world" />
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
<Message date="10 hours ago" message="hello world" />
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
<Message date="10 hours ago" message="hello world" />
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
<Message date="10 hours ago" message="hello world" />
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
</div>
</NScrollbar>
</div>
</main>
<footer class="p-4">
<div class="flex items-center justify-between space-x-2">
<NInput placeholder="Type a message" />
<NButton type="primary">
<SvgIcon icon="ri:send-plane-fill" />
</NButton>
</div>
</footer>
</div>
</div>
</template>