From 6bc420d57f215caebccd6ea2f9b2cb03ff16d600 Mon Sep 17 00:00:00 2001 From: Aqr-K <95741669+Aqr-K@users.noreply.github.com> Date: Thu, 31 Oct 2024 17:53:45 +0800 Subject: [PATCH] feat(settings): AccountSettingService MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 增加防抖。 - `card` 从父组件获取到的值改为深复制，解决 `card` 内修改数据，会直接导致在父组件中同步更新的问题。 --- src/components/cards/DownloaderCard.vue | 23 +++++++++------------ src/components/cards/MediaServerCard.vue | 23 +++++++++------------ src/views/setting/AccountSettingService.vue | 22 ++++++++++---------- 3 files changed, 31 insertions(+), 37 deletions(-) diff --git a/src/components/cards/DownloaderCard.vue b/src/components/cards/DownloaderCard.vue index 0c8e3196..01f27ada 100644 --- a/src/components/cards/DownloaderCard.vue +++ b/src/components/cards/DownloaderCard.vue @@ -6,6 +6,7 @@ import { useToast } from 'vue-toast-notification' import type { DownloaderInfo } from '@/api/types' import qbittorrent_image from '@images/logos/qbittorrent.png' import transmission_image from '@images/logos/transmission.png' +import {cloneDeep} from "lodash"; // 定义输入 const props = defineProps({ @@ -44,9 +45,6 @@ const download_rate = ref(0) // 下载器详情弹窗 const downloaderInfoDialog = ref(false) -// 下载器名称 -const downloaderName = ref('') - // 下载器详情 const downloaderInfo = ref({ name: '', @@ -84,21 +82,21 @@ async function loadDownloaderInfo() { // 打开详情弹窗 function openDownloaderInfoDialog() { - downloaderInfo.value = props.downloader - downloaderName.value = props.downloader.name + // 深复制 + downloaderInfo.value = cloneDeep(props.downloader) downloaderInfoDialog.value = true } // 保存详情数据 function saveDownloaderInfo() { // 为空不保存，跳出警告框 - if (!downloaderName.value) { + if (!downloaderInfo.value.name) { $toast.error('名称不能为空，请输入后再确定') return } // 重名判断 - if (props.downloaders.some(item => item.name === downloaderName.value && item !== props.downloader)) { - $toast.error(`【${downloaderName.value}】已存在，请替换为其他名称`) + if (props.downloaders.some(item => item.name === downloaderInfo.value.name && item !== props.downloader)) { + $toast.error(`【${downloaderInfo.value.name}】已存在，请替换为其他名称`) return } // 默认下载器去重 @@ -106,14 +104,13 @@ function saveDownloaderInfo() { props.downloaders.forEach(item => { if (item.default && item !== props.downloader) { item.default = false - $toast.info(`【${item.name}】存在默认下载器，已替换成【${downloaderName.value}】`) + $toast.info(`【${item.name}】存在默认下载器，已替换成【${downloaderInfo.value.name}】`) } }) } // 执行保存 downloaderInfoDialog.value = false - downloaderInfo.value.name = downloaderName.value - emit('change', downloaderInfo.value) + emit('change', downloaderInfo.value, props.downloader.name) emit('done') } @@ -192,7 +189,7 @@ onUnmounted(() => { { ([ // 媒体服务器详情弹窗 const mediaServerInfoDialog = ref(false) -// 媒体服务器名称 -const mediaServerName = ref('') - // 媒体服务器详情 const mediaServerInfo = ref({ name: '', @@ -70,8 +68,8 @@ const mediaServerInfo = ref({ // 打开详情弹窗 function openMediaServerInfoDialog() { loadLibrary(props.mediaserver.name) - mediaServerInfo.value = props.mediaserver - mediaServerName.value = props.mediaserver.name + // 深复制 + mediaServerInfo.value = cloneDeep(props.mediaserver) mediaServerInfoDialog.value = true if (!props.mediaserver.sync_libraries) { mediaServerInfo.value.sync_libraries = ['all'] @@ -81,19 +79,18 @@ function openMediaServerInfoDialog() { // 保存详情数据 function saveMediaServerInfo() { // 为空不保存，跳出警告框 - if (!mediaServerName.value) { + if (!mediaServerInfo.value.name) { $toast.error('名称不能为空，请输入后再确定') return } // 重名判断 - if (props.mediaservers.some(item => item.name === mediaServerName.value && item !== props.mediaserver)) { - $toast.error(`【${mediaServerName.value}】已存在，请替换为其他名称`) + if (props.mediaservers.some(item => item.name === mediaServerInfo.value.name && item !== props.mediaserver)) { + $toast.error(`【${mediaServerInfo.value.name}】已存在，请替换为其他名称`) return } // 执行保存 mediaServerInfoDialog.value = false - mediaServerInfo.value.name = mediaServerName.value - emit('change', mediaServerInfo.value) + emit('change', mediaServerInfo.value, props.mediaserver.name) emit('done') } @@ -202,7 +199,7 @@ onMounted(() => { { { { const index = downloaders.value.indexOf(ele) downloaders.value.splice(index, 1) -} +}, debounceTime) // 下载器变化 -function onDownloaderChange(downloader: DownloaderConf) { - const index = downloaders.value.findIndex(item => item.name === downloader.name) - downloaders.value[index] = downloader +function onDownloaderChange(downloader: DownloaderConf, name: string) { + const index = downloaders.value.findIndex(item => item.name === name) + if (index !== -1) downloaders.value[index] = downloader } // 添加媒体服务器 @@ -181,15 +181,15 @@ const addMediaServer = debounce( (mediaserver: string) => { }, debounceTime) // 删除媒体服务器 -function removeMediaServer(ele: MediaServerConf) { +const removeMediaServer = debounce((ele: MediaServerConf) => { const index = mediaServers.value.indexOf(ele) - mediaServers.value.splice(index, 1) -} + if (index !== -1) mediaServers.value.splice(index, 1) +}, debounceTime) // 变更媒体服务器 -function onMediaServerChange(mediaserver: MediaServerConf) { - const index = mediaServers.value.findIndex(item => item.name === mediaserver.name) - mediaServers.value[index] = mediaserver +function onMediaServerChange(mediaserver: MediaServerConf, name: string) { + const index = mediaServers.value.findIndex(item => item.name === name) + if (index !== -1) mediaServers.value[index] = mediaserver } // 禁止保存