v2.5.1 (#75)

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

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

* perf: 增强移动端体验

* chore: version 2.5.1

Author: Chanzhaoyu

CHANGELOG.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-web",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "private": false,
   "description": "ChatGPT Web",
   "author": "ChenZhaoYu <[email protected]>",

src/router/index.ts

@@ -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 }),
 })

src/store/modules/chat/index.ts

@@ -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) {

src/views/chat/index.vue

@@ -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">

src/views/chat/layout/Layout.vue

@@ -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 />

src/views/chat/layout/header/index.vue

@@ -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" />

src/views/chat/layout/sider/List.vue

@@ -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) {

src/views/chat/layout/sider/index.vue

@@ -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 />