From b3bb43dcdfce7706e5b1202d35575e570a756071 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Fri, 19 Sep 2025 01:26:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor(TabFunction):=20=E6=95=B4=E7=90=86?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B9=EF=BC=8C=E6=95=B4=E5=90=88=E4=B8=80?=
 =?UTF-8?q?=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/setting/TabFunction.vue | 195 ++++++++++++++++++++-
 frontend/src/views/setting/TabStart.vue    |  58 ------
 frontend/src/views/setting/TabUpdate.vue   | 108 ------------
 frontend/src/views/setting/TabVoice.vue    |  58 ------
 frontend/src/views/setting/index.vue       |  20 +--
 5 files changed, 197 insertions(+), 242 deletions(-)
 delete mode 100644 frontend/src/views/setting/TabStart.vue
 delete mode 100644 frontend/src/views/setting/TabUpdate.vue
 delete mode 100644 frontend/src/views/setting/TabVoice.vue

diff --git a/frontend/src/views/setting/TabFunction.vue b/frontend/src/views/setting/TabFunction.vue
index e6dd1cf..8ff5bfb 100644
--- a/frontend/src/views/setting/TabFunction.vue
+++ b/frontend/src/views/setting/TabFunction.vue
@@ -2,14 +2,65 @@
 import { QuestionCircleOutlined } from '@ant-design/icons-vue'
 import type { SettingsData } from '@/types/settings'
 
-const { settings, historyRetentionOptions, handleSettingChange } = defineProps<{
+const { settings, historyRetentionOptions, updateSourceOptions, voiceTypeOptions, handleSettingChange, checkUpdate } = defineProps<{
   settings: SettingsData
   historyRetentionOptions: { label: string; value: number }[]
+  updateSourceOptions: { label: string; value: string }[]
+  voiceTypeOptions: { label: string; value: string }[]
   handleSettingChange: (category: keyof SettingsData, key: string, value: any) => Promise<void>
+  checkUpdate: () => Promise<void>
 }>()
 </script>
 <template>
   <div class="tab-content">
+    <!-- 启动设置 - 移到最上方 -->
+    <div class="form-section">
+      <div class="section-header">
+        <h3>启动配置</h3>
+      </div>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">开机自启</span>
+              <a-tooltip title="在系统启动时自动启动应用">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-select
+              v-model:value="settings.Start.IfSelfStart"
+              @change="(checked: any) => handleSettingChange('Start', 'IfSelfStart', checked)"
+              size="large"
+              style="width:100%"
+            >
+              <a-select-option :value="true">是</a-select-option>
+              <a-select-option :value="false">否</a-select-option>
+            </a-select>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">启动后直接最小化</span>
+              <a-tooltip title="启动后直接最小化">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-select
+              v-model:value="settings.Start.IfMinimizeDirectly"
+              @change="(checked: any) => handleSettingChange('Start', 'IfMinimizeDirectly', checked)"
+              size="large"
+              style="width:100%"
+            >
+              <a-select-option :value="true">是</a-select-option>
+              <a-select-option :value="false">否</a-select-option>
+            </a-select>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <!-- 原有的功能设置 -->
     <div class="form-section">
       <div class="section-header">
         <h3>功能设置</h3>
@@ -147,5 +198,147 @@ const { settings, historyRetentionOptions, handleSettingChange } = defineProps<{
         </a-col>
       </a-row>
     </div>
+
+    <!-- 更新设置 - 移到最下方 -->
+    <div class="form-section">
+      <div class="section-header">
+        <h3>更新配置</h3>
+        <a-button type="primary" @click="checkUpdate" size="small" class="section-update-button">
+          <template #icon>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
+            </svg>
+          </template>
+          检查更新
+        </a-button>
+      </div>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">自动检查更新</span>
+              <a-tooltip title="启动时自动检测软件更新">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-select
+              v-model:value="settings.Update.IfAutoUpdate"
+              @change="(checked: any) => handleSettingChange('Update', 'IfAutoUpdate', checked)"
+              size="large"
+              style="width:100%"
+            >
+              <a-select-option :value="true">是</a-select-option>
+              <a-select-option :value="false">否</a-select-option>
+            </a-select>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">更新源</span>
+              <a-tooltip title="选择下载软件更新的来源">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-select
+              v-model:value="settings.Update.Source"
+              @change="(value: any) => handleSettingChange('Update', 'Source', value)"
+              :options="updateSourceOptions"
+              size="large"
+              style="width:100%"
+            />
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">网络代理地址</span>
+              <a-tooltip title="使用网络代理软件时，若出现网络连接问题，请尝试设置代理地址，此设置全局生效">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-input
+              v-model:value="settings.Update.ProxyAddress"
+              @blur="handleSettingChange('Update', 'ProxyAddress', settings.Update.ProxyAddress)"
+              placeholder="请输入网络代理地址"
+              size="large"
+            />
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">Mirror酱 CDK</span>
+              <a-tooltip>
+                <template #title>
+                  <div>
+                    Mirror酱CDK是使用Mirror源进行高速下载的凭证，可前往
+                    <a href="https://mirrorchyan.com/zh/get-start?source=auto-mas-setting" target="_blank" class="tooltip-link" @click.stop>Mirror酱官网</a>
+                    获取
+                  </div>
+                </template>
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-input-password
+              v-model:value="settings.Update.MirrorChyanCDK"
+              @blur="handleSettingChange('Update','MirrorChyanCDK', settings.Update.MirrorChyanCDK)"
+              :disabled="settings.Update.Source !== 'MirrorChyan'"
+              placeholder="使用Mirror源时请输入Mirror酱CDK"
+              :visibilityToggle="true"
+              size="large"
+            />
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <!-- 语音设置 - 移到最下方 -->
+    <div class="form-section">
+      <div class="section-header">
+        <h3>语音配置</h3>
+      </div>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">启用语音提示</span>
+              <a-tooltip title="开启后将在特定时刻播放语音提示">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-select
+              v-model:value="settings.Voice.Enabled"
+              @change="(checked: any) => handleSettingChange('Voice', 'Enabled', checked)"
+              size="large"
+              style="width:100%"
+            >
+              <a-select-option :value="true">是</a-select-option>
+              <a-select-option :value="false">否</a-select-option>
+            </a-select>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="form-item-vertical">
+            <div class="form-label-wrapper">
+              <span class="form-label">语音类型</span>
+              <a-tooltip title="选择语音提示的详细程度">
+                <QuestionCircleOutlined class="help-icon" />
+              </a-tooltip>
+            </div>
+            <a-select
+              v-model:value="settings.Voice.Type"
+              @change="(value: any) => handleSettingChange('Voice', 'Type', value)"
+              :options="voiceTypeOptions"
+              :disabled="!settings.Voice.Enabled"
+              size="large"
+              style="width:100%"
+            />
+          </div>
+        </a-col>
+      </a-row>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/views/setting/TabStart.vue b/frontend/src/views/setting/TabStart.vue
deleted file mode 100644
index 2f995f8..0000000
--- a/frontend/src/views/setting/TabStart.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { QuestionCircleOutlined } from '@ant-design/icons-vue'
-import type { SettingsData } from '@/types/settings'
-
-const { settings, handleSettingChange } = defineProps<{
-  settings: SettingsData
-  handleSettingChange: (category: keyof SettingsData, key: string, value: any) => Promise<void>
-}>()
-</script>
-<template>
-  <div class="tab-content">
-    <div class="form-section">
-      <div class="section-header">
-        <h3>启动配置</h3>
-      </div>
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">开机自启</span>
-              <a-tooltip title="在系统启动时自动启动应用">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-select
-              v-model:value="settings.Start.IfSelfStart"
-              @change="(checked: any) => handleSettingChange('Start', 'IfSelfStart', checked)"
-              size="large"
-              style="width:100%"
-            >
-              <a-select-option :value="true">是</a-select-option>
-              <a-select-option :value="false">否</a-select-option>
-            </a-select>
-          </div>
-        </a-col>
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">启动后直接最小化</span>
-              <a-tooltip title="启动后直接最小化">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-select
-              v-model:value="settings.Start.IfMinimizeDirectly"
-              @change="(checked: any) => handleSettingChange('Start', 'IfMinimizeDirectly', checked)"
-              size="large"
-              style="width:100%"
-            >
-              <a-select-option :value="true">是</a-select-option>
-              <a-select-option :value="false">否</a-select-option>
-            </a-select>
-          </div>
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/views/setting/TabUpdate.vue b/frontend/src/views/setting/TabUpdate.vue
deleted file mode 100644
index debdcf0..0000000
--- a/frontend/src/views/setting/TabUpdate.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { QuestionCircleOutlined } from '@ant-design/icons-vue'
-import type { SettingsData } from '@/types/settings'
-
-const { settings, updateSourceOptions, handleSettingChange, checkUpdate } = defineProps<{
-  settings: SettingsData
-  updateSourceOptions: { label: string; value: string }[]
-  handleSettingChange: (category: keyof SettingsData, key: string, value: any) => Promise<void>
-  checkUpdate: () => Promise<void>
-}>()
-</script>
-<template>
-  <div class="tab-content">
-    <div class="form-section">
-      <div class="section-header">
-        <h3>更新配置</h3>
-        <a-button type="primary" @click="checkUpdate" size="medium" class="section-update-button">
-          <template #icon>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
-            </svg>
-          </template>
-          检查更新
-        </a-button>
-      </div>
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">自动检查更新</span>
-              <a-tooltip title="启动时自动检测软件更新">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-select
-              v-model:value="settings.Update.IfAutoUpdate"
-              @change="(checked: any) => handleSettingChange('Update', 'IfAutoUpdate', checked)"
-              size="large"
-              style="width:100%"
-            >
-              <a-select-option :value="true">是</a-select-option>
-              <a-select-option :value="false">否</a-select-option>
-            </a-select>
-          </div>
-        </a-col>
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">更新源</span>
-              <a-tooltip title="选择下载软件更新的来源">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-select
-              v-model:value="settings.Update.Source"
-              @change="(value: any) => handleSettingChange('Update', 'Source', value)"
-              :options="updateSourceOptions"
-              size="large"
-              style="width:100%"
-            />
-          </div>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">网络代理地址</span>
-              <a-tooltip title="使用网络代理软件时，若出现网络连接问题，请尝试设置代理地址，此设置全局生效">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-input
-              v-model:value="settings.Update.ProxyAddress"
-              @blur="handleSettingChange('Update', 'ProxyAddress', settings.Update.ProxyAddress)"
-              placeholder="请输入网络代理地址"
-              size="large"
-            />
-          </div>
-        </a-col>
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">Mirror酱 CDK</span>
-              <a-tooltip>
-                <template #title>
-                  <div>
-                    Mirror酱CDK是使用Mirror源进行高速下载的凭证，可前往
-                    <a href="https://mirrorchyan.com/zh/get-start?source=auto-mas-setting" target="_blank" class="tooltip-link" @click.stop>Mirror酱官网</a>
-                    获取
-                  </div>
-                </template>
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-input
-              v-model:value="settings.Update.MirrorChyanCDK"
-              @blur="handleSettingChange('Update','MirrorChyanCDK', settings.Update.MirrorChyanCDK)"
-              :disabled="settings.Update.Source !== 'MirrorChyan'"
-              placeholder="使用Mirror源时请输入Mirror酱CDK"
-              size="large"
-            />
-          </div>
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/views/setting/TabVoice.vue b/frontend/src/views/setting/TabVoice.vue
deleted file mode 100644
index 70f2372..0000000
--- a/frontend/src/views/setting/TabVoice.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { QuestionCircleOutlined } from '@ant-design/icons-vue'
-import type { SettingsData } from '@/types/settings'
-
-const { settings, voiceTypeOptions, handleSettingChange } = defineProps<{
-  settings: SettingsData
-  voiceTypeOptions: { label: string; value: string }[]
-  handleSettingChange: (category: keyof SettingsData, key: string, value: any) => Promise<void>
-}>()
-</script>
-<template>
-  <div class="tab-content">
-    <div class="form-section">
-      <div class="section-header">
-        <h3>语音配置</h3>
-      </div>
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">启用音效</span>
-              <a-tooltip title="是否启用音效功能">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-select
-              v-model:value="settings.Voice.Enabled"
-              @change="(checked: any) => handleSettingChange('Voice', 'Enabled', checked)"
-              size="large"
-              style="width:100%"
-            >
-              <a-select-option :value="true">是</a-select-option>
-              <a-select-option :value="false">否</a-select-option>
-            </a-select>
-          </div>
-        </a-col>
-        <a-col :span="12">
-          <div class="form-item-vertical">
-            <div class="form-label-wrapper">
-              <span class="form-label">音效模式</span>
-              <a-tooltip title="选择音效的播报模式">
-                <QuestionCircleOutlined class="help-icon" />
-              </a-tooltip>
-            </div>
-            <a-select
-              v-model:value="settings.Voice.Type"
-              @change="(value: any) => handleSettingChange('Voice', 'Type', value)"
-              :options="voiceTypeOptions"
-              :disabled="!settings.Voice.Enabled"
-              size="large"
-              style="width:100%"
-            />
-          </div>
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-</template>
diff --git a/frontend/src/views/setting/index.vue b/frontend/src/views/setting/index.vue
index 8cde780..4f178a3 100644
--- a/frontend/src/views/setting/index.vue
+++ b/frontend/src/views/setting/index.vue
@@ -16,9 +16,6 @@ import { mirrorManager } from '@/utils/mirrorManager'
 import TabBasic from './TabBasic.vue'
 import TabFunction from './TabFunction.vue'
 import TabNotify from './TabNotify.vue'
-import TabUpdate from './TabUpdate.vue'
-import TabStart from './TabStart.vue'
-import TabVoice from './TabVoice.vue'
 import TabAdvanced from './TabAdvanced.vue'
 import TabOthers from './TabOthers.vue'
 
@@ -278,7 +275,10 @@ onMounted(() => {
           <TabFunction
             :settings="settings"
             :history-retention-options="historyRetentionOptions"
+            :update-source-options="updateSourceOptions"
+            :voice-type-options="voiceTypeOptions"
             :handle-setting-change="handleSettingChange"
+            :check-update="checkUpdate"
           />
         </a-tab-pane>
         <a-tab-pane key="notify" tab="通知设置">
@@ -290,20 +290,6 @@ onMounted(() => {
             :testing-notify="testingNotify"
           />
         </a-tab-pane>
-        <a-tab-pane key="update" tab="更新设置">
-          <TabUpdate
-            :settings="settings"
-            :update-source-options="updateSourceOptions"
-            :handle-setting-change="handleSettingChange"
-            :check-update="checkUpdate"
-          />
-        </a-tab-pane>
-        <a-tab-pane key="start" tab="启动设置">
-          <TabStart :settings="settings" :handle-setting-change="handleSettingChange" />
-        </a-tab-pane>
-        <a-tab-pane key="voice" tab="语音设置">
-          <TabVoice :settings="settings" :voice-type-options="voiceTypeOptions" :handle-setting-change="handleSettingChange" />
-        </a-tab-pane>
         <a-tab-pane key="advanced" tab="高级设置">
           <TabAdvanced 
             :go-to-logs="goToLogs"