feat: 将配置中的下载速度和代理合并为网络

src/dialogs/SettingsDialog/SettingsDialog.vue

@@ -5,9 +5,8 @@ import { path } from '@tauri-apps/api'
 import { appDataDir } from '@tauri-apps/api/path'
 import { useStore } from '../../store.ts'
 import DownloadSettings from './components/DownloadSettings.vue'
-import ProxySettings from './components/ProxySettings.vue'
 import FmtSettings from './components/FmtSettings.vue'
-import DownloadSpeedSettings from './components/DownloadSpeedSettings.vue'
+import NetworkSettings from './components/NetworkSettings.vue'
 import AssDanmakuSettings from './components/AssDanmakuSettings.vue'
 import { useMessage } from 'naive-ui'
 
@@ -64,11 +63,8 @@ async function showConfigInFileManager() {
           <n-tab-pane name="ass_danmaku_settings" tab="ass弹幕">
             <AssDanmakuSettings />
           </n-tab-pane>
-          <n-tab-pane name="download_speed_settings" tab="下载速度">
+          <n-tab-pane name="network_settings" tab="网络">
-            <DownloadSpeedSettings />
+            <NetworkSettings />
-          </n-tab-pane>
-          <n-tab-pane name="proxy_settings" tab="代理">
-            <ProxySettings />
           </n-tab-pane>
         </n-tabs>
 

src/dialogs/SettingsDialog/components/DownloadSpeedSettings.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { useStore } from '../../../store.ts'
-import { useMessage } from 'naive-ui'
-
-const message = useMessage()
-const store = useStore()
-</script>
-
-<template>
-  <div v-if="store.config !== undefined" class="flex flex-col gap-row-2">
-    <div class="flex gap-1">
-      <n-tooltip placement="top" trigger="hover">
-        <div>最多有多少个任务同时下载</div>
-        <template #trigger>
-          <n-input-group class="w-40%">
-            <n-input-group-label size="small">任务并发</n-input-group-label>
-            <n-input-number
-              class="w-full"
-              v-model:value="store.config.task_concurrency"
-              size="small"
-              @update:value="message.warning('对任务并发的修改需要重启才能生效')"
-              :min="1"
-              :parse="(x: string) => Number(x)" />
-          </n-input-group>
-        </template>
-      </n-tooltip>
-      <n-tooltip placement="top" trigger="hover">
-        <div>每个任务下载完成后休息多久</div>
-        <template #trigger>
-          <n-input-group class="w-60%">
-            <n-input-group-label size="small">任务下载间隔</n-input-group-label>
-            <n-input-number
-              class="w-full"
-              v-model:value="store.config.task_download_interval_sec"
-              size="small"
-              :min="0"
-              :parse="(x: string) => Number(x)" />
-            <n-input-group-label size="small">秒</n-input-group-label>
-          </n-input-group>
-        </template>
-      </n-tooltip>
-    </div>
-
-    <div class="flex gap-1">
-      <n-tooltip placement="top" trigger="hover">
-        <div>最多有多少个分片同时下载</div>
-        <template #trigger>
-          <n-input-group class="w-40%">
-            <n-input-group-label size="small">分片并发</n-input-group-label>
-            <n-input-number
-              class="w-full"
-              v-model:value="store.config.chunk_concurrency"
-              size="small"
-              @update-value="message.warning('对分片并发的修改需要重启才能生效')"
-              :min="1"
-              :parse="(x: string) => Number(x)" />
-          </n-input-group>
-        </template>
-      </n-tooltip>
-      <n-tooltip placement="top" trigger="hover">
-        <div>每个分片下载完成后休息多久</div>
-        <template #trigger>
-          <n-input-group class="w-60%">
-            <n-input-group-label size="small">分片下载间隔</n-input-group-label>
-            <n-input-number
-              class="w-full"
-              v-model:value="store.config.chunk_download_interval_sec"
-              size="small"
-              :min="0"
-              :parse="(x: string) => Number(x)" />
-            <n-input-group-label size="small">秒</n-input-group-label>
-          </n-input-group>
-        </template>
-      </n-tooltip>
-    </div>
-  </div>
-</template>

src/dialogs/SettingsDialog/components/NetworkSettings.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useStore } from '../../../store.ts'
+import { useMessage } from 'naive-ui'
+import { ref } from 'vue'
+
+const message = useMessage()
+const store = useStore()
+
+const proxyHost = ref<string>(store.config?.proxy_host ?? '')
+</script>
+
+<template>
+  <div v-if="store.config !== undefined" class="flex flex-col gap-row-2">
+    <div class="flex flex-col">
+      <span class="font-bold">代理类型</span>
+      <n-radio-group v-model:value="store.config.proxy_mode" size="small">
+        <n-radio-button value="NoProxy">直连</n-radio-button>
+        <n-radio-button value="System">系统代理</n-radio-button>
+        <n-radio-button value="Custom">自定义</n-radio-button>
+      </n-radio-group>
+
+      <n-input-group v-if="store.config.proxy_mode === 'Custom'" class="mt-1">
+        <n-input-group-label size="small">http://</n-input-group-label>
+        <n-input
+          v-model:value="proxyHost"
+          size="small"
+          placeholder=""
+          @blur="store.config.proxy_host = proxyHost"
+          @keydown.enter="store.config.proxy_host = proxyHost" />
+        <n-input-group-label size="small">:</n-input-group-label>
+        <n-input-number
+          v-model:value="store.config.proxy_port"
+          size="small"
+          placeholder=""
+          :parse="(x: string) => parseInt(x)" />
+      </n-input-group>
+    </div>
+
+    <div class="flex flex-col gap-row-1">
+      <span class="font-bold">下载速度</span>
+      <div class="flex gap-1">
+        <n-tooltip placement="top" trigger="hover">
+          <div>最多有多少个任务同时下载</div>
+          <template #trigger>
+            <n-input-group class="w-40%">
+              <n-input-group-label size="small">任务并发</n-input-group-label>
+              <n-input-number
+                class="w-full"
+                v-model:value="store.config.task_concurrency"
+                size="small"
+                @update:value="message.warning('对任务并发的修改需要重启才能生效')"
+                :min="1"
+                :parse="(x: string) => Number(x)" />
+            </n-input-group>
+          </template>
+        </n-tooltip>
+        <n-tooltip placement="top" trigger="hover">
+          <div>每个任务下载完成后休息多久</div>
+          <template #trigger>
+            <n-input-group class="w-60%">
+              <n-input-group-label size="small">任务下载间隔</n-input-group-label>
+              <n-input-number
+                class="w-full"
+                v-model:value="store.config.task_download_interval_sec"
+                size="small"
+                :min="0"
+                :parse="(x: string) => Number(x)" />
+              <n-input-group-label size="small">秒</n-input-group-label>
+            </n-input-group>
+          </template>
+        </n-tooltip>
+      </div>
+
+      <div class="flex gap-1">
+        <n-tooltip placement="top" trigger="hover">
+          <div>最多有多少个分片同时下载</div>
+          <template #trigger>
+            <n-input-group class="w-40%">
+              <n-input-group-label size="small">分片并发</n-input-group-label>
+              <n-input-number
+                class="w-full"
+                v-model:value="store.config.chunk_concurrency"
+                size="small"
+                @update-value="message.warning('对分片并发的修改需要重启才能生效')"
+                :min="1"
+                :parse="(x: string) => Number(x)" />
+            </n-input-group>
+          </template>
+        </n-tooltip>
+        <n-tooltip placement="top" trigger="hover">
+          <div>每个分片下载完成后休息多久</div>
+          <template #trigger>
+            <n-input-group class="w-60%">
+              <n-input-group-label size="small">分片下载间隔</n-input-group-label>
+              <n-input-number
+                class="w-full"
+                v-model:value="store.config.chunk_download_interval_sec"
+                size="small"
+                :min="0"
+                :parse="(x: string) => Number(x)" />
+              <n-input-group-label size="small">秒</n-input-group-label>
+            </n-input-group>
+          </template>
+        </n-tooltip>
+      </div>
+    </div>
+  </div>
+</template>

src/dialogs/SettingsDialog/components/ProxySettings.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useStore } from '../../../store.ts'
-
-const store = useStore()
-
-const proxyHost = ref<string>(store.config?.proxy_host ?? '')
-
-const disableProxyHostAndPort = computed(() => store.config?.proxy_mode !== 'Custom')
-</script>
-
-<template>
-  <div v-if="store.config !== undefined" class="flex flex-col gap-row-2">
-    <n-radio-group v-model:value="store.config.proxy_mode" size="small">
-      <n-radio-button value="NoProxy">直连</n-radio-button>
-      <n-radio-button value="System">系统代理</n-radio-button>
-      <n-radio-button value="Custom">自定义</n-radio-button>
-    </n-radio-group>
-
-    <n-input-group>
-      <n-input-group-label size="small">http://</n-input-group-label>
-      <n-input
-        :disabled="disableProxyHostAndPort"
-        v-model:value="proxyHost"
-        size="small"
-        placeholder=""
-        @blur="store.config.proxy_host = proxyHost"
-        @keydown.enter="store.config.proxy_host = proxyHost" />
-      <n-input-group-label size="small">:</n-input-group-label>
-      <n-input-number
-        :disabled="disableProxyHostAndPort"
-        v-model:value="store.config.proxy_port"
-        size="small"
-        placeholder=""
-        :parse="(x: string) => parseInt(x)" />
-    </n-input-group>
-  </div>
-</template>