* perf: 新增会话添加在列表前方

* fix: 路由模式改为 hash 保证兼容性

* perf: 增强移动端体验

* chore: version 2.5.1
This commit is contained in:
Redon 2023-02-21 08:57:54 +08:00 committed by GitHub
parent cb90d81c69
commit 4ab9f709de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 33 additions and 17 deletions

View File

@ -1,3 +1,11 @@
## v2.5.1
`2023-02-21`
### Enhancement
- 调整路由模式为 `hash`
- 调整新增会话添加到列表最前
- 调整移动端样式
## v2.5.0
`2023-02-20`

View File

@ -1,6 +1,6 @@
{
"name": "chatgpt-web",
"version": "2.5.0",
"version": "2.5.1",
"private": false,
"description": "ChatGPT Web",
"author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",

View File

@ -1,6 +1,6 @@
import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router'
import { ChatLayout } from '@/views/chat/layout'
const routes: RouteRecordRaw[] = [
@ -20,7 +20,7 @@ const routes: RouteRecordRaw[] = [
]
export const router = createRouter({
history: createWebHistory(),
history: createWebHashHistory(),
routes,
scrollBehavior: () => ({ left: 0, top: 0 }),
})

View File

@ -17,8 +17,8 @@ export const useChatStore = defineStore('chat-store', {
actions: {
addHistory(history: Chat.History, chatData: Chat.Chat[] = []) {
this.history.push(history)
this.chat.push({ uuid: history.uuid, data: chatData })
this.history.unshift(history)
this.chat.unshift({ uuid: history.uuid, data: chatData })
this.active = history.uuid
this.reloadRoute(history.uuid)
},
@ -63,9 +63,9 @@ export const useChatStore = defineStore('chat-store', {
}
},
setActive(uuid: number) {
async setActive(uuid: number) {
this.active = uuid
this.reloadRoute(uuid)
return await this.reloadRoute(uuid)
},
addChatByUuid(uuid: number, chat: Chat.Chat) {

View File

@ -227,7 +227,7 @@ const buttonDisabled = computed(() => {
const footerClass = computed(() => {
let classes = ['p-4']
if (isMobile.value)
classes = [...classes, 'pl-2', 'pt-2', 'pb-2', 'fixed', 'bottom-0', 'left-0', 'right-0', 'z-30']
classes = ['p-2', 'pr-4', 'fixed', 'bottom-4', 'left-0', 'right-0', 'z-30', 'h-14', 'overflow-hidden']
return classes
})
@ -242,7 +242,7 @@ onUnmounted(() => {
</script>
<template>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full pt-14 pb-14">
<main class="flex-1 overflow-hidden">
<div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto" :class="[{ 'p-2': isMobile }]">
<template v-if="!dataSources.length">

View File

@ -26,14 +26,13 @@ const getMobileClass = computed(() => {
const getContainerClass = computed(() => {
return [
'h-full',
{ 'pt-14': isMobile.value },
{ 'pl-[260px]': !isMobile.value && !collapsed.value },
]
})
</script>
<template>
<div class="h-screen" :class="[isMobile ? 'p-0' : 'p-4']">
<div class="h-full" :class="[isMobile ? 'p-0' : 'p-4']">
<div class="h-full overflow-hidden" :class="getMobileClass">
<NLayout class="z-40 transition" :class="getContainerClass" has-sider>
<Sider />

View File

@ -18,7 +18,7 @@ function handleUpdateCollapsed() {
</script>
<template>
<header class="fixed top-0 left-0 right-0 z-50 border-b bg-white/80 backdrop-blur">
<header class="fixed top-0 left-0 right-0 z-30 border-b bg-white/80 backdrop-blur">
<div class="relative flex items-center justify-between h-14">
<button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
<SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />

View File

@ -2,8 +2,12 @@
import { computed } from 'vue'
import { NInput, NPopconfirm, NScrollbar } from 'naive-ui'
import { SvgIcon } from '@/components/common'
import { useChatStore } from '@/store'
import { useAppStore, useChatStore } from '@/store'
import { useBasicLayout } from '@/hooks/useBasicLayout'
const { isMobile } = useBasicLayout()
const appStore = useAppStore()
const chatStore = useChatStore()
const dataSources = computed(() => chatStore.history)
@ -12,7 +16,10 @@ async function handleSelect({ uuid }: Chat.History) {
if (isActive(uuid))
return
chatStore.setActive(uuid)
await chatStore.setActive(uuid)
if (isMobile.value)
appStore.setSiderCollapsed(true)
}
function handleEdit({ uuid }: Chat.History, isEdit: boolean, event?: MouseEvent) {

View File

@ -56,14 +56,16 @@ watch(
:style="getMobileClass"
@update-collapsed="handleUpdateCollapsed"
>
<div class="flex flex-col h-full" :class="[{ 'pt-14': isMobile }]">
<main class="flex-1 min-h-0 overflow-hidden">
<div class="flex flex-col h-full">
<main class="flex flex-col flex-1 min-h-0">
<div class="p-4">
<NButton dashed block @click="handleAdd">
New chat
</NButton>
</div>
<List />
<div class="flex-1 min-h-0 pb-4 overflow-hidden">
<List />
</div>
</main>
<footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t">
<UserAvatar />