style: Update AccountSettingSystem.vue to include change events for downloader and media server cards

2026-05-31 21:30:33 +08:00 · 2024-08-16 13:42:12 +08:00
parent 57f6547b91
commit cca3368d8f
3 changed files with 44 additions and 27 deletions
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -15,7 +15,7 @@ const props = defineProps({
 })

 // 定义触发的自定义事件
-const emit = defineEmits(['close', 'change'])
+const emit = defineEmits(['close', 'done', 'change'])

 // timeout定时器
 let timeoutTimer: NodeJS.Timeout | undefined = undefined
@@ -76,13 +76,9 @@ function saveDownloaderInfo() {
  downloaderInfoDialog.value = false
  downloaderInfo.value.name = downloaderName.value
  emit('change', downloaderInfo.value)
+  emit('done')
 }

-// 速度
-const getSpeedText = computed(() => {
-  return `↑ ${formatFileSize(upload_rate.value, 1)}/s ↓ ${formatFileSize(download_rate.value, 1)}/s`
-})
-
 // 根据存储类型选择图标
 const getIcon = computed(() => {
  switch (props.downloader.type) {
@@ -166,7 +162,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="downloaderInfo.config.QB_HOST"
+                  v-model="downloaderInfo.config.host"
                  label="地址"
                  placeholder="http(s)://ip:port"
                  hint="服务端地址，格式：http(s)://ip:port"
@@ -175,7 +171,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="downloaderInfo.config.QB_USER"
+                  v-model="downloaderInfo.config.username"
                  label="用户名"
                  placeholder="admin"
                  hint="登录使用的用户名"
@@ -184,7 +180,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="downloaderInfo.config.QB_PASSWORD"
+                  v-model="downloaderInfo.config.password"
                  type="password"
                  label="密码"
                  hint="登录使用的密码"
@@ -193,7 +189,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VSwitch
-                  v-model="downloaderInfo.config.QB_CATEGORY"
+                  v-model="downloaderInfo.config.category"
                  label="自动分类管理"
                  hint="由下载器自动管理分类和下载目录"
                  persistent-hint
@@ -201,7 +197,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VSwitch
-                  v-model="downloaderInfo.config.QB_SEQUENTIAL"
+                  v-model="downloaderInfo.config.sequentail"
                  label="顺序下载"
                  hint="按顺序依次下载文件"
                  persistent-hint
@@ -209,7 +205,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VSwitch
-                  v-model="downloaderInfo.config.QB_FORCE_RESUME"
+                  v-model="downloaderInfo.config.force_resume"
                  label="强制继续"
                  hint="强制继续、强制上传模式"
                  persistent-hint
@@ -228,7 +224,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="downloaderInfo.config.TR_HOST"
+                  v-model="downloaderInfo.config.host"
                  label="地址"
                  placeholder="http(s)://ip:port"
                  hint="服务端地址，格式：http(s)://ip:port"
@@ -237,7 +233,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="downloaderInfo.config.TR_USER"
+                  v-model="downloaderInfo.config.username"
                  label="用户名"
                  placeholder="admin"
                  hint="登录使用的用户名"
@@ -246,7 +242,7 @@ onUnmounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="downloaderInfo.config.TR_PASSWORD"
+                  v-model="downloaderInfo.config.password"
                  type="password"
                  label="密码"
                  hint="登录使用的密码"
--- a/src/components/cards/MediaServerCard.vue
+++ b/src/components/cards/MediaServerCard.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 })

 // 定义触发的自定义事件
-const emit = defineEmits(['close', 'change'])
+const emit = defineEmits(['close', 'done', 'change'])

 // 媒体统计数据
 const infoItems = ref([
@@ -61,6 +61,7 @@ function saveMediaServerInfo() {
  mediaServerInfoDialog.value = false
  mediaServerInfo.value.name = mediaServerName.value
  emit('change', mediaServerInfo.value)
+  emit('done')
 }

 // 根据存储类型选择图标
@@ -156,7 +157,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.EMBY_HOST"
+                  v-model="mediaServerInfo.config.host"
                  label="地址"
                  placeholder="http(s)://ip:port"
                  hint="服务端地址，格式：http(s)://ip:port"
@@ -165,7 +166,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.EMBY_PLAY_HOST"
+                  v-model="mediaServerInfo.config.play_host"
                  label="外网播放地址"
                  placeholder="http(s)://domain:port"
                  hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
@@ -174,7 +175,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.EMBY_API_KEY"
+                  v-model="mediaServerInfo.config.apikey"
                  label="API密钥"
                  hint="Emby设置->高级->API密钥中生成的密钥"
                  persistent-hint
@@ -193,7 +194,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.JELLYFIN_HOST"
+                  v-model="mediaServerInfo.config.host"
                  label="地址"
                  placeholder="http(s)://ip:port"
                  hint="服务端地址，格式：http(s)://ip:port"
@@ -202,7 +203,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.JELLYFIN_PLAY_HOST"
+                  v-model="mediaServerInfo.config.play_host"
                  label="外网播放地址"
                  placeholder="http(s)://domain:port"
                  hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
@@ -211,7 +212,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.JELLYFIN_API_KEY"
+                  v-model="mediaServerInfo.config.apikey"
                  label="API密钥"
                  hint="Jellyfin设置->高级->API密钥中生成的密钥"
                  persistent-hint
@@ -230,7 +231,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.PLEX_HOST"
+                  v-model="mediaServerInfo.config.host"
                  label="地址"
                  placeholder="http(s)://ip:port"
                  hint="服务端地址，格式：http(s)://ip:port"
@@ -239,7 +240,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.PLEX_PLAY_HOST"
+                  v-model="mediaServerInfo.config.play_host"
                  label="外网播放地址"
                  placeholder="http(s)://domain:port"
                  hint="跳转播放页面使用的地址，格式：http(s)://domain:port"
@@ -248,7 +249,7 @@ onMounted(() => {
              </VCol>
              <VCol cols="12" md="6">
                <VTextField
-                  v-model="mediaServerInfo.config.PLEX_TOKEN"
+                  v-model="mediaServerInfo.config.token"
                  label="X-Plex-Token"
                  hint="浏览器F12->网络，从Plex请求URL中获取的X-Plex-Token"
                  persistent-hint
--- a/src/views/setting/AccountSettingSystem.vue
+++ b/src/views/setting/AccountSettingSystem.vue
@@ -38,6 +38,8 @@ async function saveDownloaderSetting() {
    const result: { [key: string]: any } = await api.post('system/setting/Downloaders', downloaders.value)
    if (result.success) $toast.success('下载器设置保存成功')
    else $toast.error('下载器设置保存失败！')
+
+    loadDownloaderSetting()
  } catch (error) {
    console.log(error)
  }
@@ -59,6 +61,8 @@ async function saveMediaServerSetting() {
    const result: { [key: string]: any } = await api.post('system/setting/MediaServers', mediaServers.value)
    if (result.success) $toast.success('媒体服务器设置保存成功')
    else $toast.error('媒体服务器设置保存失败！')
+
+    loadMediaServerSetting()
  } catch (error) {
    console.log(error)
  }
@@ -108,6 +112,12 @@ function removeDownloader(ele: DownloaderConf) {
  downloaders.value.splice(index, 1)
 }

+// 下载器变化
+function onDownloaderChange(downloader: DownloaderConf) {
+  const index = downloaders.value.findIndex(item => item.name === downloader.name)
+  downloaders.value[index] = downloader
+}
+
 // 添加媒体服务器
 function addMediaServer(mediaserver: string) {
  mediaServers.value.push({
@@ -124,6 +134,12 @@ function removeMediaServer(ele: MediaServerConf) {
  mediaServers.value.splice(index, 1)
 }

+// 变更媒体服务器
+function onMediaServerChange(mediaserver: MediaServerConf) {
+  const index = mediaServers.value.findIndex(item => item.name === mediaserver.name)
+  mediaServers.value[index] = mediaserver
+}
+
 // 加载数据
 onMounted(() => {
  loadDownloaderSetting()
@@ -178,7 +194,7 @@ onMounted(() => {
            :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
          >
            <template #item="{ element }">
-              <DownloaderCard :downloader="element" @close="removeDownloader(element)" />
+              <DownloaderCard :downloader="element" @close="removeDownloader(element)" @change="onDownloaderChange" />
            </template>
          </draggable>
        </VCardText>
@@ -221,7 +237,11 @@ onMounted(() => {
            :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
          >
            <template #item="{ element }">
-              <MediaServerCard :mediaserver="element" @close="removeMediaServer(element)" />
+              <MediaServerCard
+                :mediaserver="element"
+                @close="removeMediaServer(element)"
+                @change="onMediaServerChange"
+              />
            </template>
          </draggable>
        </VCardText>