fix: 快速按下删除会话导致的问题 #917

This commit is contained in:
ChenZhaoYu 2023-03-28 13:48:49 +08:00
parent 07123b70ad
commit c0a9fd5208
2 changed files with 23 additions and 3 deletions

View File

@ -0,0 +1,18 @@
type CallbackFunc<T extends unknown[]> = (...args: T) => void
export function debounce<T extends unknown[]>(
func: CallbackFunc<T>,
wait: number,
): (...args: T) => void {
let timeoutId: ReturnType<typeof setTimeout> | undefined
return (...args: T) => {
const later = () => {
clearTimeout(timeoutId)
func(...args)
}
clearTimeout(timeoutId)
timeoutId = setTimeout(later, wait)
}
}

View File

@ -4,6 +4,7 @@ import { NInput, NPopconfirm, NScrollbar } from 'naive-ui'
import { SvgIcon } from '@/components/common' import { SvgIcon } from '@/components/common'
import { useAppStore, useChatStore } from '@/store' import { useAppStore, useChatStore } from '@/store'
import { useBasicLayout } from '@/hooks/useBasicLayout' import { useBasicLayout } from '@/hooks/useBasicLayout'
import { debounce } from '@/utils/functions/debounce'
const { isMobile } = useBasicLayout() const { isMobile } = useBasicLayout()
@ -36,6 +37,8 @@ function handleDelete(index: number, event?: MouseEvent | TouchEvent) {
appStore.setSiderCollapsed(true) appStore.setSiderCollapsed(true)
} }
const handleDeleteDebounce = debounce(handleDelete, 600)
function handleEnter({ uuid }: Chat.History, isEdit: boolean, event: KeyboardEvent) { function handleEnter({ uuid }: Chat.History, isEdit: boolean, event: KeyboardEvent) {
event?.stopPropagation() event?.stopPropagation()
if (event.key === 'Enter') if (event.key === 'Enter')
@ -69,8 +72,7 @@ function isActive(uuid: number) {
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap"> <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
<NInput <NInput
v-if="item.isEdit" v-if="item.isEdit"
v-model:value="item.title" v-model:value="item.title" size="tiny"
size="tiny"
@keypress="handleEnter(item, false, $event)" @keypress="handleEnter(item, false, $event)"
/> />
<span v-else>{{ item.title }}</span> <span v-else>{{ item.title }}</span>
@ -85,7 +87,7 @@ function isActive(uuid: number) {
<button class="p-1"> <button class="p-1">
<SvgIcon icon="ri:edit-line" @click="handleEdit(item, true, $event)" /> <SvgIcon icon="ri:edit-line" @click="handleEdit(item, true, $event)" />
</button> </button>
<NPopconfirm placement="bottom" @positive-click="handleDelete(index, $event)"> <NPopconfirm placement="bottom" @positive-click="handleDeleteDebounce(index, $event)">
<template #trigger> <template #trigger>
<button class="p-1"> <button class="p-1">
<SvgIcon icon="ri:delete-bin-line" /> <SvgIcon icon="ri:delete-bin-line" />