pref: reduce code

This commit is contained in:
ChenZhaoYu
2023-02-10 09:19:37 +08:00
parent e8cb651db3
commit ac6e860a67
21 changed files with 147 additions and 1126 deletions

View File

@@ -0,0 +1,16 @@
<script lang="ts" setup>
interface Props {
image?: boolean
}
defineProps<Props>()
</script>
<template>
<img v-if="image" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
<span v-else class="text-[27px]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
<path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z" />
</svg>
</span>
</template>

View File

@@ -0,0 +1,5 @@
<template>
<span class="leading-relaxed whitespace-pre">
<slot />
</span>
</template>

View File

@@ -0,0 +1,31 @@
<script setup lang='ts'>
import Avatar from './Avatar.vue'
import Text from './Text.vue'
interface Props {
message?: string
dateTime?: string
reversal?: boolean
}
defineProps<Props>()
</script>
<template>
<div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': reversal }]">
<div
class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
:class="[reversal ? 'ml-3' : 'mr-3']"
>
<Avatar :image="reversal" />
</div>
<div class="flex flex-col flex-1 text-sm" :class="[{ 'items-end': reversal }]">
<span class="text-xs text-[#b4bbc4]">
{{ dateTime }}
</span>
<div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
<Text>{{ message }}</Text>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,3 @@
import Message from './Message/index.vue'
export { Message }

View File

@@ -1,15 +1,14 @@
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { NButton, NInput, useMessage } from 'naive-ui'
import Message from './Message.vue'
import { NButton, NInput, NPopover, useMessage } from 'naive-ui'
import { Message } from './components'
import { fetchChatAPI } from './request'
import { SvgIcon } from '@/components'
import { Icon } from '@/components'
interface ListProps {
date: string
dateTime: string
message: string
user?: boolean
error?: boolean
reversal?: boolean
}
const scrollRef = ref<HTMLDivElement>()
@@ -53,7 +52,7 @@ async function handleSubmit() {
addMessage(text, false)
}
catch (error: any) {
addMessage(error.message ?? 'Request failed, please try again later.', false, true)
addMessage(error.message ?? 'Request failed, please try again later.', false)
}
finally {
loading.value = false
@@ -61,12 +60,11 @@ async function handleSubmit() {
}
}
function addMessage(message: string, user = false, error = false) {
function addMessage(message: string, reversal = false) {
list.value.push({
date: new Date().toLocaleString(),
dateTime: new Date().toLocaleString(),
message,
user,
error,
reversal,
})
}
</script>
@@ -75,23 +73,31 @@ function addMessage(message: string, user = false, error = false) {
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
<header class="flex items-center justify-between p-4">
<h1 class="text-xl font-bold">
Chat
ChatGPT Web
</h1>
<div>
<button
class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
@click="handleClear"
>
<SvgIcon icon="ri:delete-bin-6-line" />
</button>
<NPopover>
<template #trigger>
<button
class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
@click="handleClear"
>
<Icon icon="ri:delete-bin-6-line" />
</button>
</template>
<span>Clear</span>
</NPopover>
</div>
</header>
<main class="flex-1 overflow-hidden border-y">
<div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
<div>
<Message
v-for="(item, index) of list" :key="index" :date="item.date" :message="item.message"
:user="item.user"
v-for="(item, index) of list"
:key="index"
:date-time="item.dateTime"
:message="item.message"
:reversal="item.reversal"
/>
</div>
</div>
@@ -100,13 +106,13 @@ function addMessage(message: string, user = false, error = false) {
<div class="flex items-center justify-between space-x-2">
<NInput
v-model:value="value"
placeholder="Type a message"
:disabled="loading"
placeholder="Type a message..."
@keyup="handleEnter"
/>
<NButton type="primary" :loading="loading" @click="handleSubmit">
<template #icon>
<SvgIcon icon="ri:send-plane-fill" />
<Icon icon="ri:send-plane-fill" />
</template>
</NButton>
</div>

View File

@@ -4,18 +4,16 @@ async function fetchChatAPI(message: string) {
const url = `${import.meta.env.VITE_GLOB_API_URL}/chat`
if (!message || message.trim() === '')
return Promise.reject(new Error('Message is empty'))
return
try {
const { status, data } = await axios.post(
url,
{ message },
)
const { status, data } = await axios.post(url, { message })
if (status === 200) {
if (data.text)
return Promise.resolve(data)
else if (data.statusText)
if (data.statusText)
return Promise.reject(new Error(data.statusText))
}