feat: 移动端按钮调整到顶部

src/views/chat/components/Header/index.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { computed, nextTick } from 'vue'
+import { HoverButton, SvgIcon } from '@/components/common'
+import { useAppStore, useChatStore } from '@/store'
+
+interface Props {
+ usingContext: boolean
+}
+
+interface Emit {
+ (ev: 'export'): void
+ (ev: 'toggleUsingContext'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const appStore = useAppStore()
+const chatStore = useChatStore()
+
+const collapsed = computed(() => appStore.siderCollapsed)
+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 handleExport() {
+ emit('export')
+}
+
+function toggleUsingContext() {
+ emit('toggleUsingContext')
+}
+</script>
+
+<template>
+ <header
+ class="sticky 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 min-w-0 overflow-hidden h-14">
+ <div class="flex items-center">
+ <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>
+ </div>
+ <h1
+ class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
+ @dblclick="onScrollToTop"
+ >
+ {{ currentChatHistory?.title ?? '' }}
+ </h1>
+ <div class="flex items-center space-x-2">
+ <HoverButton @click="toggleUsingContext">
+ <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+ <SvgIcon icon="ri:chat-history-line" />
+ </span>
+ </HoverButton>
+ <HoverButton @click="handleExport">
+ <span class="text-xl text-[#4f555e] dark:text-white">
+ <SvgIcon icon="ri:download-2-line" />
+ </span>
+ </HoverButton>
+ </div>
+ </div>
+ </header>
+</template>

src/views/chat/index.vue

@@ -7,6 +7,7 @@ import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
 import { useChat } from './hooks/useChat'
 import { useCopyCode } from './hooks/useCopyCode'
+import HeaderComponent from './components/Header/index.vue'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore } from '@/store'
@@ -36,7 +37,6 @@ const conversationList = computed(() => dataSources.value.filter(item => (!item.
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
 const usingContext = ref<boolean>(true)
-const actionVisible = ref<boolean>(true)
 
 function handleSubmit() {
  onConversation()
@@ -400,16 +400,6 @@ function toggleUsingContext() {
  ms.warning(t('chat.turnOffContext'))
 }
 
-function onInputFocus() {
- if (isMobile.value)
- actionVisible.value = false
-}
-
-function onInputBlur() {
- if (isMobile.value)
- actionVisible.value = true
-}
-
 const placeholder = computed(() => {
  if (isMobile.value)
  return t('chat.placeholderMobile')
@@ -420,16 +410,10 @@ const buttonDisabled = computed(() => {
  return loading.value || !prompt.value || prompt.value.trim() === ''
 })
 
-const wrapClass = computed(() => {
- if (isMobile.value)
- return ['pt-14']
- return []
-})
-
 const footerClass = computed(() => {
  let classes = ['p-4']
  if (isMobile.value)
- classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'overflow-hidden']
+ classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
  return classes
 })
 
@@ -444,7 +428,13 @@ onUnmounted(() => {
 </script>
 
 <template>
- <div class="flex flex-col w-full h-full" :class="wrapClass">
+ <div class="flex flex-col w-full h-full">
+ <HeaderComponent
+ v-if="isMobile"
+ :using-context="usingContext"
+ @export="handleExport"
+ @toggle-using-context="toggleUsingContext"
+ />
  <main class="flex-1 overflow-hidden">
  <div
  id="scrollRef"
@@ -491,30 +481,26 @@ onUnmounted(() => {
  <footer :class="footerClass">
  <div class="w-full max-w-screen-xl m-auto">
  <div class="flex items-center justify-between space-x-2">
- <div v-if="actionVisible" class="flex items-center space-x-2">
- <HoverButton @click="handleClear">
- <span class="text-xl text-[#4f555e] dark:text-white">
- <SvgIcon icon="ri:delete-bin-line" />
- </span>
- </HoverButton>
- <HoverButton @click="handleExport">
- <span class="text-xl text-[#4f555e] dark:text-white">
- <SvgIcon icon="ri:download-2-line" />
- </span>
- </HoverButton>
- <HoverButton @click="toggleUsingContext">
- <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
- <SvgIcon icon="ri:chat-history-line" />
- </span>
- </HoverButton>
- </div>
+ <HoverButton @click="handleClear">
+ <span class="text-xl text-[#4f555e] dark:text-white">
+ <SvgIcon icon="ri:delete-bin-line" />
+ </span>
+ </HoverButton>
+ <HoverButton v-if="!isMobile" @click="handleExport">
+ <span class="text-xl text-[#4f555e] dark:text-white">
+ <SvgIcon icon="ri:download-2-line" />
+ </span>
+ </HoverButton>
+ <HoverButton v-if="!isMobile" @click="toggleUsingContext">
+ <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
+ <SvgIcon icon="ri:chat-history-line" />
+ </span>
+ </HoverButton>
  <NInput
  v-model:value="prompt"
  type="textarea"
  :autosize="{ minRows: 1, maxRows: 2 }"
  :placeholder="placeholder"
- @focus="onInputFocus"
- @blur="onInputBlur"
  @keypress="handleEnter"
  />
  <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">

src/views/chat/layout/Layout.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { NLayout, NLayoutContent } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import Sider from './sider/index.vue'
-import Header from './header/index.vue'
 import Permission from './Permission.vue'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useAppStore, useAuthStore, useChatStore } from '@/store'
@@ -40,7 +39,6 @@ const getContainerClass = computed(() => {
  <div class="h-full overflow-hidden" :class="getMobileClass">
  <NLayout class="z-40 transition" :class="getContainerClass" has-sider>
  <Sider />
- <Header v-if="isMobile" />
  <NLayoutContent class="h-full">
  <RouterView v-slot="{ Component, route }">
  <component :is="Component" :key="route.fullPath" />