v2.5.1 (#75)
* perf: 新增会话添加在列表前方 * fix: 路由模式改为 hash 保证兼容性 * perf: 增强移动端体验 * chore: version 2.5.1
This commit is contained in:
parent
cb90d81c69
commit
4ab9f709de
|
@ -1,3 +1,11 @@
|
|||
## v2.5.1
|
||||
|
||||
`2023-02-21`
|
||||
### Enhancement
|
||||
- 调整路由模式为 `hash`
|
||||
- 调整新增会话添加到列表最前
|
||||
- 调整移动端样式
|
||||
|
||||
## v2.5.0
|
||||
|
||||
`2023-02-20`
|
||||
|
|
|
@ -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>",
|
||||
|
|
|
@ -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 }),
|
||||
})
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in New Issue