feat: 移动端功能优化 (#132)

* feat: 移动端双击返回顶部 * feat: 深色模式下的底色 * feat: 移动端标题返回顶部和返回底部
Chanzhaoyu · Feb 26, 2023 · 90f6989 · 90f6989
1 parent 1406292
commit 90f6989
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="zh-cmn-Hans">
-
 <head>
 	<meta charset="UTF-8">
 	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
@@ -9,7 +8,7 @@
 	<title>ChatGPT Web</title>
 </head>
 
-<body>
+<body class="dark:bg-black">
 	<div id="app">
 		<style>
 			.loading-wrap {

diff --git a/src/store/modules/chat/index.ts b/src/store/modules/chat/index.ts
@@ -6,6 +6,13 @@ export const useChatStore = defineStore('chat-store', {
   state: (): Chat.ChatState => getLocalState(),
 
   getters: {
+    getChatHistoryByCurrentActive(state: Chat.ChatState) {
+      const index = state.history.findIndex(item => item.uuid === state.active)
+      if (index !== -1)
+        return state.history[index]
+      return null
+    },
+
     getChatByUuid(state: Chat.ChatState) {
       return (uuid?: number) => {
         if (uuid)
@@ -68,6 +75,18 @@ export const useChatStore = defineStore('chat-store', {
       return await this.reloadRoute(uuid)
     },
 
+    getChatByUuidAndIndex(uuid: number, index: number) {
+      if (!uuid || uuid === 0) {
+        if (this.chat.length)
+          return this.chat[0].data[index]
+        return null
+      }
+      const chatIndex = this.chat.findIndex(item => item.uuid === uuid)
+      if (chatIndex !== -1)
+        return this.chat[chatIndex].data[index]
+      return null
+    },
+
     addChatByUuid(uuid: number, chat: Chat.Chat) {
       if (!uuid || uuid === 0) {
         if (this.history.length === 0) {

diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
@@ -310,7 +310,12 @@ onUnmounted(() => {
 <template>
   <div class="flex flex-col h-full" :class="wrapClass">
     <main class="flex-1 overflow-hidden">
-      <div ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" :class="[isMobile ? 'p-2' : 'p-4']">
+      <div
+        id="scrollRef"
+        ref="scrollRef"
+        class="h-full overflow-hidden overflow-y-auto"
+        :class="[isMobile ? 'p-2' : 'p-4']"
+      >
         <template v-if="!dataSources.length">
           <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
             <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />

diff --git a/src/views/chat/layout/header/index.vue b/src/views/chat/layout/header/index.vue
@@ -1,31 +1,54 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useChatStore } from '@/store'
 
 const appStore = useAppStore()
 const chatStore = useChatStore()
 
 const collapsed = computed(() => appStore.siderCollapsed)
-
-function handleAdd() {
-  chatStore.addHistory({ title: 'New Chat', uuid: Date.now(), isEdit: false })
-}
+const currentChatHistory = computed(() => chatStore.getChatHistoryByCurrentActive)
 
 function handleUpdateCollapsed() {
   appStore.setSiderCollapsed(!collapsed.value)
 }
+
+function onScrollToTop() {
+  const scrollRef = document.querySelector('#scrollRef')
+  if (scrollRef)
+    nextTick(() => scrollRef.scrollTop = 0)
+}
+
+function onScrollToBottom() {
+  const scrollRef = document.querySelector('#scrollRef')
+  if (scrollRef)
+    nextTick(() => scrollRef.scrollTop = scrollRef.scrollHeight)
+}
 </script>
 
 <template>
-  <header class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur">
+  <header
+    class="fixed top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 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">
+      <button
+        class="flex items-center justify-center w-11 h-11"
+        @click="handleUpdateCollapsed"
+      >
         <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
         <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
       </button>
-      <button class="flex items-center justify-center w-11 h-11" @click="handleAdd">
-        <SvgIcon class="text-2xl" icon="ri:add-fill" />
+      <h1
+        class="flex-1 px-4 overflow-hidden text-center cursor-pointer select-none text-ellipsis whitespace-nowrap"
+        @dblclick="onScrollToTop"
+      >
+        {{ currentChatHistory?.title ?? '' }}
+      </h1>
+      <button
+        class="flex items-center justify-center w-11 h-11"
+        @click="onScrollToBottom"
+      >
+        <SvgIcon class="text-2xl" icon="ri:arrow-down-s-line" />
       </button>
     </div>
   </header>