mirror of
https://github.com/Chanzhaoyu/chatgpt-web.git
synced 2025-10-19 01:54:24 +00:00
chore: initialize
This commit is contained in:
31
src/views/Chat/components/Message.vue
Normal file
31
src/views/Chat/components/Message.vue
Normal 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
42
src/views/Chat/index.vue
Normal 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> </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>
|
Reference in New Issue
Block a user