pref: reduce code
This commit is contained in:
parent
e8cb651db3
commit
ac6e860a67
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ChatGPT Bot</title>
|
||||
<title>ChatGPT Web</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
@ -28,7 +28,7 @@
|
|||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
border-radius: 50%;
|
||||
background-color: #267dff;
|
||||
background-color: #4b9e5f;
|
||||
}
|
||||
|
||||
.balls div:nth-of-type(1) {
|
||||
|
|
|
@ -43,7 +43,6 @@
|
|||
"tailwindcss": "^3.2.6",
|
||||
"typescript": "~4.7.4",
|
||||
"vite": "^4.0.0",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^1.0.12"
|
||||
}
|
||||
}
|
||||
|
|
1014
pnpm-lock.yaml
1014
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
18
src/App.vue
18
src/App.vue
|
@ -1,25 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { NaiveProvider } from '@/components'
|
||||
import { GithubSite, NaiveProvider } from '@/components'
|
||||
import Chat from '@/views/Chat/index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider class="h-full" preflight-style-disabled>
|
||||
<NaiveProvider>
|
||||
<div class="h-full overflow-hidden">
|
||||
<div class="h-full pb-[50px] p-4">
|
||||
<div class="h-full overflow-hidden pb-[50px] p-4">
|
||||
<Chat />
|
||||
</div>
|
||||
<div class="fixed bottom-0 left-0 right-0 p-4 text-sm text-center text-neutral-500">
|
||||
<span class="text-center">
|
||||
❤️ Made By ChenZhaoYu -
|
||||
<a href="https://github.com/Chanzhaoyu/chatgpt-bot" target="_blank" class="text-blue-500">
|
||||
Github
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<GithubSite />
|
||||
</div>
|
||||
</NaiveProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<div class="fixed bottom-0 left-0 right-0 p-4 text-sm text-center text-neutral-500">
|
||||
<span class="text-center">
|
||||
❤️ Made By ChenZhaoYu -
|
||||
<a href="https://github.com/Chanzhaoyu/chatgpt-bot" target="_blank" class="text-blue-500">
|
||||
Github
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang='ts'>
|
||||
import { computed, useAttrs } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
interface Props {
|
||||
icon?: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const bindAttrs = computed<{ class: string; style: string }>(() => ({
|
||||
class: (attrs.class as string) || '',
|
||||
style: (attrs.style as string) || '',
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Icon :icon="icon" v-bind="bindAttrs" />
|
||||
</template>
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { defineComponent, h } from 'vue'
|
||||
import { NMessageProvider, useMessage } from 'naive-ui'
|
||||
import { NConfigProvider, NMessageProvider, useMessage } from 'naive-ui'
|
||||
|
||||
function registerNaiveTools() {
|
||||
window.$message = useMessage()
|
||||
|
@ -18,8 +18,10 @@ const NaiveProviderContent = defineComponent({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider class="h-full">
|
||||
<NMessageProvider>
|
||||
<slot />
|
||||
<NaiveProviderContent />
|
||||
</NMessageProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
|
|
|
@ -1,36 +0,0 @@
|
|||
<script setup lang='ts'>
|
||||
import { computed, useAttrs } from 'vue'
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
interface Props {
|
||||
icon?: string
|
||||
localIcon?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
const bindAttrs = computed<{ class: string; style: string }>(() => ({
|
||||
class: (attrs.class as string) || '',
|
||||
style: (attrs.style as string) || '',
|
||||
}))
|
||||
|
||||
const symbolId = computed(() => {
|
||||
const icon = props.localIcon || 'no-icon'
|
||||
return `#icon-local-${icon}`
|
||||
})
|
||||
|
||||
const renderLocalIcon = computed(() => props.localIcon || !props.icon)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="renderLocalIcon">
|
||||
<svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
|
||||
<use :xlink:href="symbolId" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
|
||||
</template>
|
||||
</template>
|
|
@ -1,4 +1,5 @@
|
|||
import NaiveProvider from './NaiveProvider.vue'
|
||||
import SvgIcon from './SvgIcon.vue'
|
||||
import Icon from './Icon.vue'
|
||||
import GithubSite from './GithubSite.vue'
|
||||
|
||||
export { NaiveProvider, SvgIcon }
|
||||
export { NaiveProvider, Icon, GithubSite }
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<svg id="openai-symbol" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><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>
|
Before Width: | Height: | Size: 1.0 KiB |
11
src/main.ts
11
src/main.ts
|
@ -1,19 +1,18 @@
|
|||
import 'virtual:svg-icons-register'
|
||||
import './styles/tailwind.css'
|
||||
import './styles/global.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './styles/global.css'
|
||||
|
||||
function injectMeta() {
|
||||
/** Tailwind's Preflight Style Override */
|
||||
function naiveStyleOverride() {
|
||||
const meta = document.createElement('meta')
|
||||
meta.name = 'naive-ui-style'
|
||||
document.head.appendChild(meta)
|
||||
}
|
||||
|
||||
/** Setup */
|
||||
function bootstrap() {
|
||||
const app = createApp(App)
|
||||
injectMeta()
|
||||
naiveStyleOverride()
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
|
@ -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>
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<span class="leading-relaxed whitespace-pre">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
|
@ -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>
|
|
@ -0,0 +1,3 @@
|
|||
import Message from './Message/index.vue'
|
||||
|
||||
export { Message }
|
|
@ -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>
|
||||
<NPopover>
|
||||
<template #trigger>
|
||||
<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" />
|
||||
<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>
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
"strictNullChecks": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"paths": {
|
||||
"~/*": ["./*"],
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"types": ["vite/client", "node", "naive-ui/volar"]
|
||||
|
|
|
@ -1,22 +1,15 @@
|
|||
import path from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
|
||||
export default defineConfig(() => {
|
||||
return {
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': path.resolve(process.cwd()),
|
||||
'@': path.resolve(process.cwd(), 'src'),
|
||||
},
|
||||
},
|
||||
plugins: [vue(), createSvgIconsPlugin({
|
||||
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
|
||||
symbolId: 'icon-local-[dir]-[name]',
|
||||
inject: 'body-last',
|
||||
customDomId: '__svg__icons__dom__',
|
||||
})],
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 1002,
|
||||
host: '0.0.0.0',
|
||||
|
|
Loading…
Reference in New Issue