ChatGPT/chatgpt-web
1
0
Fork 0
mirror of https://github.com/Chanzhaoyu/chatgpt-web.git synced 2025-10-19 18:14:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化文件结构、组件、布局

Browse Source
This commit is contained in:
ChenZhaoYu
2023-02-13 11:59:00 +08:00
parent 72df35c929
commit 39f718ef16
15 changed files with 192 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/Chat/index.vue
View File

@@ -1,9 +1,10 @@
<script setup lang='ts'>
import { nextTick, onMounted, ref } from 'vue'
import { NButton, NInput, NPopover, useMessage } from 'naive-ui'
import { NButton, NInput, useMessage } from 'naive-ui'
import { Message } from './components'
import { clearChatContext, fetchChatAPI } from './request'
import { Icon } from '@/components'
import { Layout } from './layout'
import { HoverButton, SvgIcon } from '@/components/common'
interface ListProps {
dateTime: string
@@ -75,44 +76,38 @@ function addMessage(message: string, reversal = false) {
</script>
<template>
<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">
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"
>
<Icon icon="ri:delete-bin-6-line" />
</button>
</template>
<span>Clear Context</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-time="item.dateTime" :message="item.message"
:reversal="item.reversal"
/>
<Layout>
<div class="flex flex-col h-full">
<header class="flex items-center justify-between p-4">
<h1 class="text-xl font-bold">
ChatGPT Web
</h1>
<div class="flex items-center space-x-4">
<HoverButton tooltip="Clear" @click="handleClear">
<SvgIcon icon="ri:delete-bin-6-line" />
</HoverButton>
</div>
</div>
</main>
<footer class="p-4">
<div class="flex items-center justify-between space-x-2">
<NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
<NButton type="primary" :loading="loading" @click="handleSubmit">
<template #icon>
<Icon icon="ri:send-plane-fill" />
</template>
</NButton>
</div>
</footer>
</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-time="item.dateTime" :message="item.message"
:reversal="item.reversal"
/>
</div>
</div>
</main>
<footer class="p-4">
<div class="flex items-center justify-between space-x-2">
<NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
<NButton type="primary" :loading="loading" @click="handleSubmit">
<template #icon>
<SvgIcon icon="ri:send-plane-fill" />
</template>
</NButton>
</div>
</footer>
</div>
</Layout>
</template>

27
src/views/Chat/layout/Layout.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup lang='ts'>
import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
</script>
<template>
<div class="h-full overflow-hidden border rounded-md shadow-md">
<NLayout class="h-full" has-sider>
<NLayoutSider
collapse-mode="width"
:collapsed-width="120"
:width="240"
show-trigger="arrow-circle"
class="p-4"
bordered
>
<span>Sider</span>
</NLayoutSider>
<NLayoutContent class="h-full">
<slot />
</NLayoutContent>
</NLayout>
</div>
</template>
<style>
</style>

3
src/views/Chat/layout/index.ts Normal file
View File

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