From f57acee817a38856d3d8c3eeb3b24728464704ed Mon Sep 17 00:00:00 2001
From: yumi <z1181806270@gmail.com>
Date: Wed, 21 Oct 2026 15:37:16 +0800
Subject: [PATCH] refactor(web): move deployment wizard into settings

---
 docs/DEMO.md                                  |   2 +-
 web/src/App.vue                               |  18 +-
 .../SetupWizard.vue}                          |  19 +-
 web/src/router.ts                             |   2 +-
 web/src/views/ChangePasswordView.vue          |   2 +-
 web/src/views/SettingsView.vue                | 199 +++++++++---------
 6 files changed, 120 insertions(+), 122 deletions(-)
 rename web/src/{views/SetupView.vue => components/SetupWizard.vue} (92%)

diff --git a/docs/DEMO.md b/docs/DEMO.md
index af9a235..e07ddd8 100644
--- a/docs/DEMO.md
+++ b/docs/DEMO.md
@@ -35,7 +35,7 @@ npm --prefix web run preview:demo
 
 ## 部署向导与连接诊断
 
-真实部署首次登录改密后进入 `/setup`，已有管理员可以从导航或系统配置进入。前两步只保存 TeamSpeak 与网易云 API 配置，最后一步应用所有已保存的配置，等待 Voice 确认配置版本后检查连接。
+真实部署首次登录改密后进入“设置 → 部署向导”（`/settings?group=setup`），已有管理员可以在设置内切换到部署向导。旧 `/setup` 地址自动跳转到该分类。前两步只保存 TeamSpeak 与网易云 API 配置，最后一步应用所有已保存的配置，等待 Voice 确认配置版本后检查连接。
 
 `GET /admin/diagnostics` 仅管理员会话可访问，分别检查数据库、待应用配置、Voice gRPC、TeamSpeak 会话和可选的网易云 API。Voice 检查最多等待 3 秒；音乐 API 使用 4 秒 HTTP 超时，两者并发执行。错误响应不会包含上游异常文本、地址中的凭据或 Cookie。
 
diff --git a/web/src/App.vue b/web/src/App.vue
index 07f6062..3c9c3f2 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -5,7 +5,7 @@ import MusicPlayer from './components/MusicPlayer.vue'
 import { appConfig } from './appConfig'
 import { applyTheme, getInitialTheme } from './theme'
 import { DEMO_MODE } from './demoMode'
-import { PROJECT_URL, ISSUE_URL, CONTRIBUTE_URL, INSTALL_URL } from './projectLinks'
+import { PROJECT_URL, INSTALL_URL } from './projectLinks'
 import { 
   Home, 
   Music,
@@ -18,10 +18,7 @@ import {
   Moon,
   Sun,
   Menu,
-  X,
-  MessageSquare,
-  GitPullRequest,
-  Compass
+  X
 } from 'lucide-vue-next'
 
 const sidebarOpen = ref(false)
@@ -113,11 +110,6 @@ function toggleTheme() {
                 <Search :size="20" />
                 <span>搜索</span>
               </RouterLink>
-
-              <RouterLink to="/setup" class="nav-item" active-class="nav-item-active" @click="sidebarOpen = false">
-                <Compass :size="20" />
-                <span>部署向导</span>
-              </RouterLink>
               
               <RouterLink 
                 to="/playlists" 
@@ -209,12 +201,6 @@ function toggleTheme() {
             >
               <Github :size="20" />
             </a>
-            <a :href="ISSUE_URL" target="_blank" rel="noopener noreferrer" class="theme-toolbar-btn p-2 text-gray-500 hover:text-blue-600 rounded-lg" title="反馈问题" aria-label="反馈问题">
-              <MessageSquare :size="20" />
-            </a>
-            <a :href="CONTRIBUTE_URL" target="_blank" rel="noopener noreferrer" class="theme-toolbar-btn p-2 text-gray-500 hover:text-blue-600 rounded-lg" title="参与贡献" aria-label="参与贡献">
-              <GitPullRequest :size="20" />
-            </a>
             <button
               type="button"
               :class="[
diff --git a/web/src/views/SetupView.vue b/web/src/components/SetupWizard.vue
similarity index 92%
rename from web/src/views/SetupView.vue
rename to web/src/components/SetupWizard.vue
index 138148e..504b31e 100644
--- a/web/src/views/SetupView.vue
+++ b/web/src/components/SetupWizard.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { ArrowLeft, ArrowRight, Check, AlertCircle, Compass, Loader2, RefreshCw } from 'lucide-vue-next'
+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)
@@ -34,6 +36,7 @@ async function saveStep() {
   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 }
@@ -49,6 +52,7 @@ async function applyAndCheck() {
   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
@@ -71,10 +75,9 @@ async function applyAndCheck() {
 </script>
 
 <template>
-  <div class="theme-setup-shell h-full overflow-y-auto bg-gray-50 pb-8">
-    <div class="mx-auto max-w-3xl px-5 py-8 md:px-8 md:py-10">
-      <div class="flex items-center gap-3 text-blue-600"><Compass :size="24" /><span class="text-sm font-semibold">TSBot 部署向导</span></div>
-      <h1 class="mt-3 text-2xl font-bold text-gray-900 md:text-3xl">让机器人加入你的频道</h1>
+  <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="配置进度">
@@ -86,7 +89,7 @@ async function applyAndCheck() {
       <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">
-        <h2 class="text-lg font-semibold text-gray-900">{{ steps[step] }}</h2>
+        <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">
@@ -107,7 +110,7 @@ async function applyAndCheck() {
             <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">
-            <h3 class="font-semibold text-gray-900">{{ report.demo ? '模拟检查结果' : report.ready ? '必要连接已就绪' : '还有连接需要处理' }}</h3>
+            <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" />
@@ -124,5 +127,5 @@ async function applyAndCheck() {
         </div>
       </template>
     </div>
-  </div>
+  </section>
 </template>
diff --git a/web/src/router.ts b/web/src/router.ts
index dfad1f5..693ceeb 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', component: () => import('./views/SetupView.vue'), meta: { requiresAuth: true } },
+    { path: '/setup', redirect: { path: '/settings', query: { group: 'setup' } } },
     { path: '/cookie', redirect: { path: '/settings', query: { group: 'authorization' } } },
     { path: '/lyrics', component: LyricsView },
   ],
diff --git a/web/src/views/ChangePasswordView.vue b/web/src/views/ChangePasswordView.vue
index 087ee2d..321f948 100644
--- a/web/src/views/ChangePasswordView.vue
+++ b/web/src/views/ChangePasswordView.vue
@@ -22,7 +22,7 @@ async function submit() {
   try {
     const firstLogin = authState.must_change_password
     await changePassword(currentPassword.value, newPassword.value)
-    await router.replace(firstLogin ? '/setup' : '/settings')
+    await router.replace(firstLogin ? '/settings?group=setup' : '/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 1651cdf..d160b64 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -7,6 +7,7 @@ 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 {
@@ -49,6 +50,7 @@ interface ManagedAsset {
 }
 
 const GROUPS = [
+  ['setup', '部署向导'],
   ['web', 'Web 配置'],
   ['backend', 'Voice 服务'],
   ['music', '音乐接口配置'],
@@ -245,6 +247,14 @@ 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 = ''
@@ -273,7 +283,7 @@ onBeforeUnmount(() => {
         <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'">
+        <template v-if="activeGroup !== 'authorization' && activeGroup !== 'setup'">
           <button class="btn-secondary settings-header-action" type="button" :disabled="loading || saving || applying" @click="saveConfig">
             <Save :size="17" />
             {{ saving ? '正在保存' : '保存配置' }}
@@ -309,108 +319,107 @@ onBeforeUnmount(() => {
         <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">
-            <RouterLink to="/setup" class="mb-6 flex items-center justify-between gap-3 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800 hover:bg-blue-100">
-              <span>首次部署或连接异常？使用部署向导逐步配置并检查连接。</span>
-              <span class="whitespace-nowrap font-semibold">打开向导 →</span>
-            </RouterLink>
-            <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>
-                <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>
+            <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>
-                  <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 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>
                 </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>
+              </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>
 
-                <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>
+                  <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>
-                  <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"
-                />
-              </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>
+                  <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>
-              </dl>
-            </section>
+              </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>
 
+            </template>
           </template>
           <p v-if="error && !payload" class="text-red-600">{{ error }}</p>
         </div>