v2.5.1 (#75)

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

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

* perf: 增强移动端体验

* chore: version 2.5.1

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