diff --git a/README.md b/README.md
index 61e89ac..0a9f772 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ docker compose -f docker-compose.prebuilt.yml ps
 1. 打开 `http://<服务器地址>:8080`。
 2. 在服务器的 `logs/initial-admin-password.txt` 读取初始密码，以 `admin` 登录并修改密码。
 3. 在“系统配置”填写 TeamSpeak 地址、频道和音乐源配置，点击“应用配置”，确认机器人进入频道。
-   首次登录改密后也可跟随“部署向导”完成配置，使用“应用并检查”分别检查 Voice、TeamSpeak 和音乐接口。
+   首次登录改密后进入设置，按“TeamSpeak 连接”“音乐账号登录”等分类完成配置；每类均附用途说明。
 4. 在 Web 搜索并加入一首歌曲，或在 TeamSpeak 发送 `帮助` 查看聊天指令。
 
 网易云功能需要自行部署 `NeteaseCloudMusicApi`；QQ 音乐和 B 站适配已内建。部分播放和账号功能需要对应平台登录态，实际可播放内容受账号权限及平台限制影响。
diff --git a/docs/DEMO.md b/docs/DEMO.md
index e07ddd8..271e1cf 100644
--- a/docs/DEMO.md
+++ b/docs/DEMO.md
@@ -14,7 +14,7 @@ npm --prefix web run preview:demo
 
 访问终端显示的地址，并保留 `/NeteaseTSBot/` 子目录。演示默认使用哈希路由，例如 `/NeteaseTSBot/#/queue`，直接打开或刷新子页面都不需要服务器路由重写。
 
-演示支持三平台模拟搜索、添加/移除/重排队列、模拟播放暂停和进度、歌词、示例歌单、历史记录、本地收藏和部署向导。队列与配置只保存在当前页面内存中，刷新即重置；收藏、搜索历史和主题使用浏览器本地存储。
+演示支持三平台模拟搜索、添加/移除/重排队列、模拟播放暂停和进度、歌词、示例歌单、历史记录、本地收藏和分类设置。队列与配置只保存在当前页面内存中，刷新即重置；收藏、搜索历史和主题使用浏览器本地存储。
 
 界面明确标注模拟数据，不播放真实音频，不连接音乐平台或 TeamSpeak。演示构建中的 API 只调用本地适配器；未实现的接口会明确报错，不会回退到真实请求。平台登录界面不展示，也不接收 Cookie、密码或上传文件。
 
@@ -33,9 +33,9 @@ npm --prefix web run preview:demo
 
 `VITE_DEMO_MODE` 是构建时开关，不能用 URL 参数打开或关闭。不要给演示构建配置真实 API Token、Cookie 或平台凭据；公开前端构建不应包含这些信息。
 
-## 部署向导与连接诊断
+## 分类设置与连接诊断
 
-真实部署首次登录改密后进入“设置 → 部署向导”（`/settings?group=setup`），已有管理员可以在设置内切换到部署向导。旧 `/setup` 地址自动跳转到该分类。前两步只保存 TeamSpeak 与网易云 API 配置，最后一步应用所有已保存的配置，等待 Voice 确认配置版本后检查连接。
+真实部署首次登录改密后进入设置。常用设置包含 TeamSpeak 连接、音乐账号登录、音乐接口与缓存、界面外观；高级设置包含服务与日志、外部 API、ServerQuery 兼容。每类均显示用途说明，原有 `/setup` 地址兼容跳转到 TeamSpeak 连接。修改后保存配置，再点击“应用配置”使其生效。
 
 `GET /admin/diagnostics` 仅管理员会话可访问，分别检查数据库、待应用配置、Voice gRPC、TeamSpeak 会话和可选的网易云 API。Voice 检查最多等待 3 秒；音乐 API 使用 4 秒 HTTP 超时，两者并发执行。错误响应不会包含上游异常文本、地址中的凭据或 Cookie。
 
diff --git a/web/src/components/SetupWizard.vue b/web/src/components/SetupWizard.vue
deleted file mode 100644
index 504b31e..0000000
--- a/web/src/components/SetupWizard.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { ArrowLeft, ArrowRight, Check, AlertCircle, Loader2, RefreshCw } from 'lucide-vue-next'
-import { apiGet, apiPut } from '../api'
-import { DEMO_MODE } from '../demoMode'
-import type { DiagnosticReport, SetupSettings } from '../types/settings'
-
-const emit = defineEmits<{ saved: [] }>()
-
-const steps = ['连接 TeamSpeak', '选择音乐源', '应用并检查']
-const step = ref(0)
-const settings = ref<SetupSettings | null>(null)
-const values = ref<Record<string, unknown>>({})
-const busy = ref(false)
-const error = ref('')
-const message = ref('')
-const report = ref<DiagnosticReport | null>(null)
-let active = true
-const teamspeakKeys = ['voice.ts3_host', 'voice.ts3_port', 'voice.ts3_nickname', 'voice.ts3_channel_id', 'voice.ts3_channel_path', 'voice.ts3_server_password', 'voice.ts3_channel_password']
-const visibleFields = computed(() => settings.value?.fields.filter(field => step.value === 0 ? teamspeakKeys.includes(field.key) : field.key === 'backend.netease_api_base') || [])
-
-function hydrate(result: SetupSettings) {
-  settings.value = result
-  values.value = Object.fromEntries(result.fields.filter(field => teamspeakKeys.includes(field.key) || field.key === 'backend.netease_api_base').map(field => [field.key, field.sensitive ? '' : field.value]))
-}
-onMounted(async () => {
-  busy.value = true
-  try { hydrate(await apiGet<SetupSettings>('/admin/settings')) }
-  catch (e) { error.value = e instanceof Error ? e.message : '无法加载配置' }
-  finally { busy.value = false }
-})
-onBeforeUnmount(() => { active = false })
-
-async function saveStep() {
-  busy.value = true; error.value = ''; message.value = ''; report.value = null
-  try {
-    const selected = Object.fromEntries(visibleFields.value.map(field => [field.key, values.value[field.key]]))
-    hydrate(await apiPut<SetupSettings>('/admin/settings', { values: selected, apply: false }))
-    emit('saved')
-    step.value += 1
-  } catch (e) { error.value = e instanceof Error ? e.message : '配置保存失败' }
-  finally { busy.value = false }
-}
-async function runDiagnostics() {
-  busy.value = true; error.value = ''; report.value = null
-  try { report.value = await apiGet<DiagnosticReport>('/admin/diagnostics') }
-  catch (e) { error.value = e instanceof Error ? e.message : '连接检查失败，请确认后端可访问并重新登录' }
-  finally { busy.value = false }
-}
-async function applyAndCheck() {
-  busy.value = true; error.value = ''; message.value = ''; report.value = null
-  try {
-    const result = await apiPut<SetupSettings>('/admin/settings', { values: {}, apply: true })
-    hydrate(result)
-    emit('saved')
-    if (result.voice_restart_requested && result.voice_config_revision) {
-      message.value = '配置已应用，等待 Voice 使用新配置重启…'
-      const deadline = Date.now() + 60000
-      let restored = false
-      while (active && Date.now() < deadline) {
-        try {
-          const status = await apiGet<{ voice_connected: boolean; voice_config_revision: string }>('/voice/status')
-          if (status.voice_connected && status.voice_config_revision === result.voice_config_revision) { restored = true; break }
-        } catch { /* Voice can briefly go offline during restart. */ }
-        await new Promise(resolve => setTimeout(resolve, 1000))
-      }
-      if (!active) return
-      if (!restored) throw new Error('Voice 未在 60 秒内使用新配置恢复。请检查容器或 Voice 日志，再重新检查连接。')
-    }
-    message.value = DEMO_MODE ? '模拟配置已应用。下面的结果仅用于体验。' : '配置已应用。连接检查不能代替实际播放，请最后点播一首可用曲目。'
-    report.value = await apiGet<DiagnosticReport>('/admin/diagnostics')
-  } catch (e) { message.value = ''; error.value = e instanceof Error ? e.message : '应用配置失败' }
-  finally { busy.value = false }
-}
-</script>
-
-<template>
-  <section class="theme-setup-shell" aria-label="部署向导">
-    <div>
-      <h2 class="text-2xl font-bold text-gray-900 md:text-3xl">让机器人加入你的频道</h2>
-      <p class="mt-2 text-sm leading-6 text-gray-500">准备好 TeamSpeak 地址，按顺序配置并检查连接。</p>
-
-      <ol class="my-8 flex gap-3 border-b border-gray-200 pb-5 md:gap-6" aria-label="配置进度">
-        <li v-for="(label, index) in steps" :key="label" :aria-current="step === index ? 'step' : undefined" class="flex flex-1 items-center gap-2 text-xs md:text-sm" :class="index <= step ? 'font-semibold text-blue-700' : 'text-gray-400'">
-          <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full" :class="index <= step ? 'bg-blue-600 text-white' : 'bg-gray-200'">{{ index + 1 }}</span>{{ label }}
-        </li>
-      </ol>
-      <p v-if="error" role="alert" class="mb-5 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">{{ error }}</p>
-      <p v-if="message" role="status" class="mb-5 text-sm leading-6 text-blue-700">{{ message }}</p>
-      <p v-if="!settings && busy" class="py-12 text-gray-500">正在加载配置…</p>
-      <template v-if="settings">
-        <h3 class="text-lg font-semibold text-gray-900">{{ steps[step] }}</h3>
-        <p v-if="step === 0" class="mt-2 text-sm leading-6 text-gray-500">填写语音服务器端口（通常为 9987）。频道 ID 或路径选填其一；都留空则使用默认频道。</p>
-        <div v-if="step < 2" class="mt-6 space-y-5">
-          <div v-for="field in visibleFields" :key="field.key">
-            <label :for="`setup-${field.key}`" class="mb-1.5 block text-sm font-medium text-gray-800">{{ field.label }}</label>
-            <input :id="`setup-${field.key}`" v-model="values[field.key]" :type="field.sensitive ? 'password' : field.type === 'integer' ? 'number' : field.type === 'url' ? 'url' : 'text'" :min="field.minimum ?? undefined" :max="field.maximum ?? undefined" :disabled="busy || (DEMO_MODE && field.sensitive)" :placeholder="field.sensitive && field.configured ? '已配置，留空保持原值' : ''" :autocomplete="field.sensitive ? 'new-password' : 'off'" class="input-field w-full disabled:opacity-50" />
-          </div>
-          <div v-if="step === 1" class="space-y-3 border-t border-gray-200 pt-5 text-sm leading-6 text-gray-600">
-            <p>网易云音乐需要单独部署 NeteaseCloudMusicApi。暂时不用网易云，可以保留地址并跳过；连接检查会单独显示其状态。</p>
-            <p>QQ 音乐和 B 站适配已内建，部分功能需要平台登录态。</p>
-            <RouterLink v-if="!DEMO_MODE" to="/settings?group=authorization" class="inline-block font-medium text-blue-600 underline underline-offset-4">管理音乐平台登录 ↗</RouterLink>
-            <p v-else>在线体验不接收账号、Cookie 或密码。</p>
-          </div>
-        </div>
-        <div v-else class="mt-5">
-          <p class="text-sm leading-6 text-gray-500">前两步只保存配置。点击“应用并检查”后，TeamSpeak 改动会自动重启 Voice；结果会分别列出后端、语音服务与音乐接口状态。</p>
-          <div class="mt-5 flex flex-wrap gap-3">
-            <button type="button" class="btn-primary gap-2" :disabled="busy" @click="applyAndCheck"><Loader2 v-if="busy" :size="16" class="animate-spin" /><Check v-else :size="16" />应用并检查</button>
-            <button type="button" class="btn-secondary gap-2" :disabled="busy" @click="runDiagnostics"><RefreshCw :size="16" />重新检查连接</button>
-          </div>
-          <section v-if="report" class="mt-7" aria-label="连接检查结果" aria-live="polite">
-            <h4 class="font-semibold text-gray-900">{{ report.demo ? '模拟检查结果' : report.ready ? '必要连接已就绪' : '还有连接需要处理' }}</h4>
-            <ul class="mt-3 divide-y divide-gray-200">
-              <li v-for="item in report.checks" :key="item.id" class="flex gap-3 py-4">
-                <Check v-if="item.status === 'success'" :size="19" class="mt-0.5 shrink-0 text-green-600" />
-                <AlertCircle v-else :size="19" class="mt-0.5 shrink-0" :class="item.status === 'error' ? 'text-red-600' : 'text-amber-600'" />
-                <div class="min-w-0 text-sm"><div class="font-semibold text-gray-800">{{ item.label }} <span class="ml-1 font-normal text-gray-500">{{ item.status === 'success' ? '正常' : item.status === 'error' ? '失败' : '待处理' }}</span></div><p class="mt-1 leading-6 text-gray-500">{{ item.detail }}</p><p v-if="item.action" class="mt-1 leading-6 text-gray-700">{{ item.action }}</p><RouterLink v-if="item.status !== 'success' && item.group" :to="`/settings?group=${item.group}`" class="mt-1 inline-block text-blue-600 underline">查看对应配置</RouterLink></div>
-              </li>
-            </ul>
-            <RouterLink to="/search" class="mt-5 inline-flex items-center gap-2 font-semibold text-blue-600">去点播第一首歌 <ArrowRight :size="17" /></RouterLink>
-          </section>
-        </div>
-        <div class="mt-8 flex justify-between border-t border-gray-200 pt-5">
-          <button type="button" class="btn-secondary gap-2" :disabled="step === 0 || busy" @click="step -= 1; error = ''; message = ''"><ArrowLeft :size="16" />上一步</button>
-          <button v-if="step < 2" type="button" class="btn-primary gap-2" :disabled="busy" @click="saveStep"><Loader2 v-if="busy" :size="16" class="animate-spin" />保存并继续 <ArrowRight v-if="!busy" :size="16" /></button>
-        </div>
-      </template>
-    </div>
-  </section>
-</template>
diff --git a/web/src/router.ts b/web/src/router.ts
index 693ceeb..76023bc 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -27,7 +27,7 @@ export const router = createRouter({
     { path: '/login', name: 'login', component: LoginView, meta: { authPage: true } },
     { path: '/change-password', name: 'change-password', component: ChangePasswordView, meta: { authPage: true, requiresAuth: true } },
     { path: '/settings', component: SettingsView, meta: { requiresAuth: true } },
-    { path: '/setup', redirect: { path: '/settings', query: { group: 'setup' } } },
+    { path: '/setup', redirect: { path: '/settings', query: { group: 'teamspeak' } } },
     { path: '/cookie', redirect: { path: '/settings', query: { group: 'authorization' } } },
     { path: '/lyrics', component: LyricsView },
   ],
diff --git a/web/src/style.css b/web/src/style.css
index 406b8f1..1a4fd04 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -791,7 +791,7 @@ body.theme-dark .demo-banner {
 }
 
 body.theme-dark .demo-banner a,
-body.theme-dark .theme-setup-shell .text-blue-600,
-body.theme-dark .theme-setup-shell .text-blue-700 {
+body.theme-dark .theme-settings-shell .text-blue-600,
+body.theme-dark .theme-settings-shell .text-blue-700 {
   color: #93c5fd !important;
 }
diff --git a/web/src/types/settings.ts b/web/src/types/settings.ts
index 687c990..f8729e8 100644
--- a/web/src/types/settings.ts
+++ b/web/src/types/settings.ts
@@ -1,20 +1,3 @@
-export interface SetupField {
-  key: string
-  label: string
-  type: string
-  value: unknown
-  sensitive: boolean
-  configured: boolean
-  minimum: number | null
-  maximum: number | null
-  help: string
-}
-export interface SetupSettings {
-  fields: SetupField[]
-  apply_pending: boolean
-  voice_restart_requested?: boolean
-  voice_config_revision?: string
-}
 export interface DiagnosticCheck {
   id: string
   label: string
diff --git a/web/src/views/ChangePasswordView.vue b/web/src/views/ChangePasswordView.vue
index 321f948..f272be2 100644
--- a/web/src/views/ChangePasswordView.vue
+++ b/web/src/views/ChangePasswordView.vue
@@ -20,9 +20,8 @@ async function submit() {
   }
   submitting.value = true
   try {
-    const firstLogin = authState.must_change_password
     await changePassword(currentPassword.value, newPassword.value)
-    await router.replace(firstLogin ? '/settings?group=setup' : '/settings')
+    await router.replace('/settings')
   } catch (e: any) {
     error.value = String(e?.message || e)
   } finally {
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index d160b64..329b24f 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -7,7 +7,6 @@ import { logout } from '../auth'
 import { loadAppBranding } from '../appConfig'
 import FloatingToast from '../components/FloatingToast.vue'
 import CookieView from './CookieView.vue'
-import SetupWizard from '../components/SetupWizard.vue'
 import { DEMO_MODE } from '../demoMode'
 
 interface SettingField {
@@ -50,17 +49,54 @@ interface ManagedAsset {
 }
 
 const GROUPS = [
-  ['setup', '部署向导'],
-  ['web', 'Web 配置'],
-  ['backend', 'Voice 服务'],
-  ['music', '音乐接口配置'],
-  ['authorization', '音乐会员登录'],
-  ['teamspeak', 'TeamSpeak 配置'],
-  ['serverquery', 'ServerQuery 兼容'],
-  ['access', '外部 api'],
+  { id: 'teamspeak', label: 'TeamSpeak 连接', section: 'common', summary: '服务器、频道与机器人资料', description: '设置机器人要加入的语音服务器和频道，以及机器人在 TeamSpeak 中显示的昵称、头像与简介。' },
+  { id: 'authorization', label: '音乐账号登录', section: 'common', summary: '网易云、QQ 音乐与 B 站账号', description: '连接你的音乐平台账号，用于读取个人歌单、收藏及账号有权限使用的音乐内容。各平台分别登录。' },
+  { id: 'music', label: '音乐接口与缓存', section: 'common', summary: '音乐服务地址与下载限制', description: '配置网易云音乐 API 地址，以及 B 站点播时长和音频缓存大小。QQ 音乐与 B 站使用内建接口，无需填写服务地址。' },
+  { id: 'web', label: '界面外观', section: 'common', summary: '网页名称与图标', description: '修改网页显示名称和浏览器标签页图标，用于定制自己的机器人界面。' },
+  { id: 'backend', label: '服务与日志', section: 'advanced', summary: '语音服务通信与问题排查', description: '配置后端与 Voice 语音服务的通信地址、各服务日志等级和播放状态文件。连接异常或排查问题时使用。' },
+  { id: 'access', label: '外部 API', section: 'advanced', summary: '供脚本与其他系统调用', description: '为外部程序调用机器人接口配置访问 Token，适合接入脚本或其他系统。多个 Token 使用逗号分隔。' },
+  { id: 'serverquery', label: 'ServerQuery 兼容', section: 'advanced', summary: 'TeamSpeak 管理接口', description: '配置 TeamSpeak 的 ServerQuery 管理接口，供机器人更新头像、简介等资料时使用。通常只在需要此兼容方式时配置。' },
 ] as const
 
+const NAV_SECTIONS = [
+  { id: 'common', label: '常用设置', groups: GROUPS.filter(group => group.section === 'common') },
+  { id: 'advanced', label: '高级设置', groups: GROUPS.filter(group => group.section === 'advanced') },
+]
+
+const FIELD_HELP: Record<string, string> = {
+  'voice.ts3_host': '填写 TeamSpeak 服务器域名或 IP，不要包含 http:// 或 https://。',
+  'voice.ts3_port': 'TeamSpeak 语音连接使用的 UDP 端口，通常为 9987。',
+  'voice.ts3_nickname': '机器人加入频道后显示的名称。',
+  'voice.ts3_server_password': '服务器设置了加入密码时填写；已有密码留空不修改。',
+  'voice.ts3_channel_id': '机器人要加入的频道 ID。与频道路径二选一；均留空时使用默认频道。',
+  'voice.ts3_channel_path': '用频道名称路径指定目标频道；已填写频道 ID 时通常无需再填。',
+  'voice.ts3_channel_password': '目标频道设有加入密码时填写。',
+  'voice.ts3_identity_file': 'Voice 服务读取的身份文件路径。保留原文件可让机器人延续已有身份与权限。',
+  'voice.ts3_identity': '直接指定 TeamSpeak 身份内容；通常保留现有身份文件即可，无需填写。',
+  'voice.allow_direct_description': '允许通过 TeamSpeak 客户端连接直接更新机器人简介。',
+  'voice.description_title': '显示在机器人 TeamSpeak 客户端简介中的标题。',
+  'voice.description_intro': '显示在机器人 TeamSpeak 客户端简介中的说明文字。',
+  'backend.netease_api_base': '填写单独部署的 NeteaseCloudMusicApi 服务地址，用于网易云搜索、歌单及播放。',
+  'backend.bilibili_max_duration_minutes': '限制单个 B 站点播视频的长度，避免下载过长内容。',
+  'backend.bilibili_audio_cache_ttl_hours': '缓存音频保留多久，过期内容会被清理。',
+  'backend.bilibili_audio_cache_max_mb': '限制 B 站音频缓存占用的磁盘空间。',
+  'backend.bilibili_audio_partial_ttl_minutes': '未完成的下载保留多久，避免临时文件长期占用空间。',
+  'backend.voice_grpc_addr': '后端连接 Voice 的地址。源码部署通常为 127.0.0.1:50051，Docker 部署通常为 voice-service:50051。',
+  'backend.log_level': '控制后端日志详细程度。排查问题时可临时使用 DEBUG。',
+  'backend.log_file': '后端日志写入的位置，用于查看请求和运行错误。',
+  'web.log_level': '控制浏览器控制台中前端日志的详细程度。',
+  'voice.log_level': '控制 Voice 语音服务日志的详细程度。',
+  'voice.state_file': '保存播放状态的文件路径，供 Voice 恢复运行状态使用。',
+  'voice.serverquery_user': 'TeamSpeak ServerQuery 管理账号，与音乐账号无关。',
+  'voice.serverquery_password': '上述 ServerQuery 管理账号的密码。',
+  'voice.serverquery_host': 'ServerQuery 管理接口所在服务器的域名或 IP。',
+  'voice.serverquery_port': 'ServerQuery 管理端口，通常为 TCP 10011，不是语音端口 9987。',
+  'voice.serverquery_sid': '需要管理的 TeamSpeak 虚拟服务器 ID。',
+  'voice.serverquery_use_port': '通过语音端口定位需要管理的 TeamSpeak 虚拟服务器。',
+}
+
 const GROUP_ALIASES: Record<string, string> = {
+  setup: 'teamspeak',
   description: 'teamspeak',
   voice: 'backend',
 }
@@ -70,7 +106,7 @@ const route = useRoute()
 const payload = ref<SettingsPayload | null>(null)
 const rawRequestedGroup = String(route.query.group || '')
 const requestedGroup = GROUP_ALIASES[rawRequestedGroup] || rawRequestedGroup
-const activeGroup = ref(GROUPS.some((group) => group[0] === requestedGroup) ? requestedGroup : 'web')
+const activeGroup = ref(GROUPS.some((group) => group.id === requestedGroup) ? requestedGroup : 'teamspeak')
 const draft = ref<Record<string, any>>({})
 const revealed = ref<Record<string, boolean>>({})
 const assetBusy = ref<Record<string, boolean>>({})
@@ -83,7 +119,8 @@ const toastType = ref<'success' | 'error' | 'info'>('info')
 let toastTimer: ReturnType<typeof setTimeout> | null = null
 let waitGeneration = 0
 
-const activeFields = computed(() => payload.value?.fields.filter((field) => field.group === activeGroup.value) || [])
+const activeCategory = computed(() => GROUPS.find(group => group.id === activeGroup.value)!)
+const activeFields = computed(() => payload.value?.fields.filter((field) => (field.key === 'web.log_level' ? 'backend' : field.group) === activeGroup.value) || [])
 const activeAssets = computed(() => payload.value?.assets.filter((asset) => asset.group === activeGroup.value) || [])
 const activeNeedsVoiceRestart = computed(() => (
   activeFields.value.some((field) => field.restart === 'voice')
@@ -247,14 +284,6 @@ function clearSecret(field: SettingField) {
   field.configured = false
 }
 
-async function refreshAfterSetup() {
-  try {
-    hydrate(await apiGet<SettingsPayload>('/admin/settings'))
-  } catch (e: any) {
-    showToast(String(e?.message || e), 'error', 8000)
-  }
-}
-
 function selectGroup(group: string) {
   activeGroup.value = group
   error.value = ''
@@ -278,12 +307,12 @@ onBeforeUnmount(() => {
       <div class="min-w-0">
         <h1 class="text-xl font-bold text-gray-900 flex items-center gap-2">
           <ServerCog :size="22" class="text-blue-600" />
-          系统配置
+          设置
         </h1>
-        <p class="text-sm text-gray-500 mt-1">运行配置与服务连接</p>
+        <p class="text-sm text-gray-500 mt-1">按用途管理机器人、音乐账号和运行参数</p>
       </div>
       <div class="ml-auto flex flex-wrap items-center justify-end gap-2">
-        <template v-if="activeGroup !== 'authorization' && activeGroup !== 'setup'">
+        <template v-if="activeGroup !== 'authorization'">
           <button class="btn-secondary settings-header-action" type="button" :disabled="loading || saving || applying" @click="saveConfig">
             <Save :size="17" />
             {{ saving ? '正在保存' : '保存配置' }}
@@ -304,122 +333,125 @@ onBeforeUnmount(() => {
 
     <div class="flex-1 min-h-0 flex flex-col md:flex-row">
       <nav class="theme-settings-nav bg-white border-b md:border-b-0 md:border-r border-gray-200 md:w-56 p-3 overflow-x-auto md:overflow-y-auto flex md:block gap-1">
-        <button
-          v-for="group in GROUPS"
-          :key="group[0]"
-          type="button"
-          :class="['whitespace-nowrap w-auto md:w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-colors', activeGroup === group[0] ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-100']"
-          @click="selectGroup(group[0])"
-        >
-          {{ group[1] }}
-        </button>
+        <div v-for="section in NAV_SECTIONS" :key="section.id" class="contents md:block md:mb-4">
+          <p class="hidden md:block px-3 pt-2 pb-2 text-xs font-semibold text-gray-400">{{ section.label }}</p>
+          <button
+            v-for="group in section.groups"
+            :key="group.id"
+            type="button"
+            :aria-current="activeGroup === group.id ? 'page' : undefined"
+            :class="['whitespace-nowrap w-auto md:w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-colors', activeGroup === group.id ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-100']"
+            @click="selectGroup(group.id)"
+          >
+            <span class="block">{{ group.label }}</span>
+            <span class="hidden md:block mt-1 text-xs font-normal opacity-70">{{ group.summary }}</span>
+          </button>
+        </div>
       </nav>
 
       <main class="theme-settings-workspace flex-1 overflow-y-auto px-4 md:px-8 py-6 pb-8">
         <div class="max-w-3xl mx-auto">
           <div v-if="loading" class="py-20 text-center text-gray-500">正在加载配置...</div>
           <template v-else-if="payload">
-            <SetupWizard v-if="activeGroup === 'setup'" @saved="refreshAfterSetup" />
-            <template v-else>
-              <div class="flex items-center justify-between mb-6">
-                <h2 class="text-lg font-semibold text-gray-900">{{ GROUPS.find((item) => item[0] === activeGroup)?.[1] }}</h2>
-                <span v-if="activeNeedsVoiceRestart" class="theme-settings-restart text-xs px-2 py-1 rounded bg-amber-50 text-amber-700 border border-amber-200">应用时自动重启 Voice</span>
-              </div>
-
-              <p v-if="DEMO_MODE && activeGroup === 'authorization'" class="text-sm text-gray-500">在线体验不提供账号登录，也不接收 Cookie、Token 或密码。部署后可在这里管理音乐平台授权。</p>
-              <CookieView v-else-if="activeGroup === 'authorization'" embedded />
-
-              <section v-if="activeAssets.length" class="theme-settings-panel bg-white border border-gray-200 rounded-lg divide-y divide-gray-100 mb-6">
-                <div v-for="asset in activeAssets" :key="asset.key" class="p-4 md:p-5 grid md:grid-cols-[240px_minmax(0,1fr)] gap-3 md:gap-6 items-center">
-                  <div>
-                    <div class="text-sm font-medium text-gray-800">{{ asset.label }}</div>
-                    <p class="text-xs text-gray-500 mt-1">{{ asset.help }}</p>
-                    <p class="text-xs text-gray-400 mt-1 font-mono break-all">{{ asset.storage_path }}</p>
+            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
+              <h2 class="text-lg font-semibold text-gray-900">{{ activeCategory.label }}</h2>
+              <span v-if="activeNeedsVoiceRestart" class="theme-settings-restart text-xs px-2 py-1 rounded bg-amber-50 text-amber-700 border border-amber-200">应用时自动重启 Voice</span>
+            </div>
+            <p class="mb-6 text-sm leading-6 text-gray-500">{{ activeCategory.description }}</p>
+
+            <p v-if="DEMO_MODE && activeGroup === 'authorization'" class="text-sm text-gray-500">在线体验不提供账号登录，也不接收 Cookie、Token 或密码。部署后可在这里管理音乐平台授权。</p>
+            <CookieView v-else-if="activeGroup === 'authorization'" embedded />
+
+            <section v-if="activeAssets.length" class="theme-settings-panel bg-white border border-gray-200 rounded-lg divide-y divide-gray-100 mb-6">
+              <div v-for="asset in activeAssets" :key="asset.key" class="p-4 md:p-5 grid md:grid-cols-[240px_minmax(0,1fr)] gap-3 md:gap-6 items-center">
+                <div>
+                  <div class="text-sm font-medium text-gray-800">{{ asset.label }}</div>
+                  <p class="text-xs text-gray-500 mt-1">{{ asset.help }}</p>
+                  <p class="text-xs text-gray-400 mt-1 font-mono break-all">{{ asset.storage_path }}</p>
+                </div>
+                <div class="flex flex-wrap items-center gap-3 min-w-0">
+                  <div class="w-14 h-14 flex-shrink-0 border border-gray-200 rounded-md bg-gray-50 overflow-hidden flex items-center justify-center text-gray-400">
+                    <img v-if="asset.configured" :src="assetPreviewUrl(asset)" :alt="asset.label" class="w-full h-full object-contain" />
+                    <ImageIcon v-else :size="22" />
                   </div>
-                  <div class="flex flex-wrap items-center gap-3 min-w-0">
-                    <div class="w-14 h-14 flex-shrink-0 border border-gray-200 rounded-md bg-gray-50 overflow-hidden flex items-center justify-center text-gray-400">
-                      <img v-if="asset.configured" :src="assetPreviewUrl(asset)" :alt="asset.label" class="w-full h-full object-contain" />
-                      <ImageIcon v-else :size="22" />
-                    </div>
-                    <div class="min-w-0 flex-1">
-                      <div class="text-sm text-gray-700">{{ asset.configured ? '已上传' : '尚未上传' }}</div>
-                      <div class="text-xs text-gray-500 mt-1">PNG、JPEG、WebP、GIF，最大 {{ asset.max_size_mb }} MiB</div>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <label :class="['btn-secondary cursor-pointer', assetBusy[asset.key] ? 'opacity-50 pointer-events-none' : '']">
-                        <Upload :size="17" />
-                        {{ asset.configured ? '更换' : '上传' }}
-                        <input type="file" class="sr-only" :accept="asset.accept" :disabled="assetBusy[asset.key]" @change="uploadAsset(asset, $event)" />
-                      </label>
-                      <button v-if="asset.configured" type="button" class="p-2 text-gray-500 hover:text-red-600" :disabled="assetBusy[asset.key]" title="清除图片" @click="clearAsset(asset)">
-                        <Trash2 :size="18" />
-                      </button>
-                    </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="text-sm text-gray-700">{{ asset.configured ? '已上传' : '尚未上传' }}</div>
+                    <div class="text-xs text-gray-500 mt-1">PNG、JPEG、WebP、GIF，最大 {{ asset.max_size_mb }} MiB</div>
                   </div>
-                </div>
-              </section>
-
-              <section v-if="activeFields.length" class="theme-settings-panel bg-white border border-gray-200 rounded-lg divide-y divide-gray-100">
-                <div v-for="field in activeFields" :key="field.key" class="p-4 md:p-5 grid md:grid-cols-[240px_minmax(0,1fr)] gap-2 md:gap-6 items-center">
-                  <div>
-                    <label :for="field.key" class="text-sm font-medium text-gray-800">{{ field.label }}</label>
-                    <p v-if="field.help" class="text-xs text-gray-500 mt-1">{{ field.help }}</p>
-                    <p v-if="field.sensitive && field.configured" class="text-xs text-green-600 mt-1 flex items-center gap-1"><Check :size="12" /> 已配置</p>
+                  <div class="flex items-center gap-2">
+                    <label :class="['btn-secondary cursor-pointer', assetBusy[asset.key] ? 'opacity-50 pointer-events-none' : '']">
+                      <Upload :size="17" />
+                      {{ asset.configured ? '更换' : '上传' }}
+                      <input type="file" class="sr-only" :accept="asset.accept" :disabled="assetBusy[asset.key]" @change="uploadAsset(asset, $event)" />
+                    </label>
+                    <button v-if="asset.configured" type="button" class="p-2 text-gray-500 hover:text-red-600" :disabled="assetBusy[asset.key]" title="清除图片" @click="clearAsset(asset)">
+                      <Trash2 :size="18" />
+                    </button>
                   </div>
+                </div>
+              </div>
+            </section>
+
+            <section v-if="activeFields.length" class="theme-settings-panel bg-white border border-gray-200 rounded-lg divide-y divide-gray-100">
+              <div v-for="field in activeFields" :key="field.key" class="p-4 md:p-5 grid md:grid-cols-[240px_minmax(0,1fr)] gap-2 md:gap-6 items-center">
+                <div>
+                  <label :for="field.key" class="text-sm font-medium text-gray-800">{{ field.label }}</label>
+                  <p v-if="field.help || FIELD_HELP[field.key]" class="text-xs leading-5 text-gray-500 mt-1">{{ field.help || FIELD_HELP[field.key] }}</p>
+                  <p v-if="field.sensitive && field.configured" class="text-xs text-green-600 mt-1 flex items-center gap-1"><Check :size="12" /> 已配置</p>
+                </div>
 
-                  <label v-if="field.type === 'boolean'" class="inline-flex items-center gap-3 cursor-pointer">
-                    <input v-model="draft[field.key]" type="checkbox" class="w-4 h-4 accent-blue-600" />
-                    <span class="text-sm text-gray-600">{{ draft[field.key] ? '启用' : '停用' }}</span>
-                  </label>
-
-                  <select v-else-if="field.type === 'select'" :id="field.key" v-model="draft[field.key]" class="input-field w-full">
-                    <option v-for="option in field.options" :key="option" :value="option">{{ option }}</option>
-                  </select>
-
-                  <textarea v-else-if="field.type === 'multiline'" :id="field.key" v-model="draft[field.key]" rows="4" class="input-field w-full resize-y" />
-
-                  <div v-else-if="field.sensitive" class="flex gap-2 min-w-0">
-                    <div class="relative flex-1 min-w-0">
-                      <input
-                        :id="field.key"
-                        v-model="draft[field.key]"
-                        :type="revealed[field.key] ? 'text' : 'password'"
-                        :placeholder="field.configured ? '留空表示保持当前值' : '尚未配置'"
-                        autocomplete="new-password"
-                        :disabled="DEMO_MODE"
-                        class="input-field w-full pr-10 font-mono text-sm"
-                      />
-                      <button type="button" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700" :title="revealed[field.key] ? '隐藏' : '显示'" @click="revealed[field.key] = !revealed[field.key]">
-                        <EyeOff v-if="revealed[field.key]" :size="17" />
-                        <Eye v-else :size="17" />
-                      </button>
-                    </div>
-                    <button v-if="field.configured" type="button" class="px-3 text-sm text-red-600 hover:bg-red-50 rounded-md" @click="clearSecret(field)">清除</button>
+                <label v-if="field.type === 'boolean'" class="inline-flex items-center gap-3 cursor-pointer">
+                  <input v-model="draft[field.key]" type="checkbox" class="w-4 h-4 accent-blue-600" />
+                  <span class="text-sm text-gray-600">{{ draft[field.key] ? '启用' : '停用' }}</span>
+                </label>
+
+                <select v-else-if="field.type === 'select'" :id="field.key" v-model="draft[field.key]" class="input-field w-full">
+                  <option v-for="option in field.options" :key="option" :value="option">{{ option }}</option>
+                </select>
+
+                <textarea v-else-if="field.type === 'multiline'" :id="field.key" v-model="draft[field.key]" rows="4" class="input-field w-full resize-y" />
+
+                <div v-else-if="field.sensitive" class="flex gap-2 min-w-0">
+                  <div class="relative flex-1 min-w-0">
+                    <input
+                      :id="field.key"
+                      v-model="draft[field.key]"
+                      :type="revealed[field.key] ? 'text' : 'password'"
+                      :placeholder="field.configured ? '留空表示保持当前值' : '尚未配置'"
+                      autocomplete="new-password"
+                      :disabled="DEMO_MODE"
+                      class="input-field w-full pr-10 font-mono text-sm"
+                    />
+                    <button type="button" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700" :title="revealed[field.key] ? '隐藏' : '显示'" @click="revealed[field.key] = !revealed[field.key]">
+                      <EyeOff v-if="revealed[field.key]" :size="17" />
+                      <Eye v-else :size="17" />
+                    </button>
                   </div>
+                  <button v-if="field.configured" type="button" class="px-3 text-sm text-red-600 hover:bg-red-50 rounded-md" @click="clearSecret(field)">清除</button>
+                </div>
 
-                  <input
-                    v-else
-                    :id="field.key"
-                    v-model="draft[field.key]"
-                    :type="field.type === 'integer' ? 'number' : field.type === 'url' ? 'url' : 'text'"
-                    :min="field.minimum ?? undefined"
-                    :max="field.maximum ?? undefined"
-                    class="input-field w-full"
-                  />
+                <input
+                  v-else
+                  :id="field.key"
+                  v-model="draft[field.key]"
+                  :type="field.type === 'integer' ? 'number' : field.type === 'url' ? 'url' : 'text'"
+                  :min="field.minimum ?? undefined"
+                  :max="field.maximum ?? undefined"
+                  class="input-field w-full"
+                />
+              </div>
+            </section>
+
+            <section v-if="activeGroup === 'backend'" class="mt-6 border-t border-gray-200 pt-5">
+              <h3 class="text-sm font-semibold text-gray-800 mb-3">启动配置（只读）</h3>
+              <dl class="grid sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                <div v-for="(value, key) in payload.bootstrap" :key="key" class="min-w-0">
+                  <dt class="text-gray-500">{{ key }}</dt>
+                  <dd class="text-gray-800 font-mono break-all mt-0.5">{{ value }}</dd>
                 </div>
-              </section>
-
-              <section v-if="activeGroup === 'backend'" class="mt-6 border-t border-gray-200 pt-5">
-                <h3 class="text-sm font-semibold text-gray-800 mb-3">启动配置（只读）</h3>
-                <dl class="grid sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
-                  <div v-for="(value, key) in payload.bootstrap" :key="key" class="min-w-0">
-                    <dt class="text-gray-500">{{ key }}</dt>
-                    <dd class="text-gray-800 font-mono break-all mt-0.5">{{ value }}</dd>
-                  </div>
-                </dl>
-              </section>
+              </dl>
+            </section>
 
-            </template>
           </template>
           <p v-if="error && !payload" class="text-red-600">{{ error }}</p>
         </div>