feat: 移动端下按钮收缩

src/views/chat/index.vue

@@ -34,6 +34,7 @@ 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()
@@ -367,20 +368,20 @@ function handleStop() {
 
 function toggleUsingContext() {
  usingContext.value = !usingContext.value
- if (usingContext.value) {
- dialog.info({
-  title: t('chat.usingContext'),
-  content: t('chat.turnOnContext'),
- positiveText: t('common.yes'),
- })
- }
- else {
- dialog.info({
- title: t('chat.usingContext'),
- content: t('chat.turnOffContext'),
- positiveText: t('common.yes'),
-  })
- }
+ if (usingContext.value)
+ ms.success(t('chat.turnOnContext'))
+ else
+ ms.warning(t('chat.turnOffContext'))
+}
+
+function onInputFocus() {
+ if (isMobile.value)
+ actionVisible.value = false
+}
+
+function onInputBlur() {
+ if (isMobile.value)
+  actionVisible.value = true
 }
 
 const placeholder = computed(() => {
@@ -402,7 +403,7 @@ const wrapClass = computed(() => {
 const footerClass = computed(() => {
  let classes = ['p-4']
  if (isMobile.value)
- classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
+ classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'overflow-hidden']
  return classes
 })
 
@@ -464,26 +465,30 @@ onUnmounted(() => {
  <footer :class="footerClass">
  <div class="w-full max-w-screen-xl m-auto">
  <div class="flex items-center justify-between 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 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>
  <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">