agentworkshop 0.7.41 → 0.7.46

package/app/pages/settings.vue

@@ -1,1562 +1,168 @@
-<script setup lang="ts">
-import { message } from 'ant-design-vue'
-import { useUserStore } from '@/app/stores/workshop/user'
-import { useRuntimeConfigStore } from '@/app/stores/runtime-config'
-import { useWorkshopApi, type WorkshopPluginDto } from '@/app/composables/workshop/useWorkshopApi'
-import { apiErrorMessage } from '@/app/utils/api-error'
-
-const { t, locale, locales, setLocale } = useI18n()
-const store = useAppStore()
-const site = useSiteConfig()
-const config = useRuntimeConfig().public
-const userStore = useUserStore()
-const api = useWorkshopApi()
-
-const activeTab = ref('appearance')
-
-/* ================= 运行配置（服务端持久化 + 热重载） ================= */
-const rcStore = useRuntimeConfigStore()
-const draft = ref<Record<string, unknown>>({})
-const dirtyKeys = ref<Set<string>>(new Set())
-const savingRuntime = ref(false)
-const runtimeNotice = ref<{ type: 'success' | 'warning' | 'error', text: string } | null>(null)
-
-function syncRuntimeDraft() {
-  draft.value = { ...rcStore.effective }
-  dirtyKeys.value = new Set()
-}
-// immediate:store 由启动插件在应用初始化时拉取,进入本页时通常已 loaded=true,
-// 非 immediate 的 watch 永不触发 → 草稿恒空、所有值输入框显示为空(表单不可用)。
-watch(() => rcStore.loaded, (v) => {
-  if (v) syncRuntimeDraft()
-}, { immediate: true })
-watch(() => rcStore.effective, () => {
-  // 外部写入(CLI/其他窗口/文件监听)推来的变化,未编辑时才回填草稿
-  if (dirtyKeys.value.size === 0) syncRuntimeDraft()
-}, { deep: true })
-
-function markDirty(key: string) {
-  dirtyKeys.value.add(key)
-  runtimeNotice.value = null
-}
-
-async function saveRuntime() {
-  if (!dirtyKeys.value.size) return
-  savingRuntime.value = true
-  runtimeNotice.value = null
-  try {
-    const patchMap: Record<string, unknown> = {}
-    for (const k of dirtyKeys.value) patchMap[k] = draft.value[k]
-    const res = await rcStore.patch(patchMap)
-    syncRuntimeDraft()
-    const restart = res.restartRequired ?? []
-    runtimeNotice.value = restart.length
-      ? { type: 'warning', text: t('settings.runtime.restartNotice', { keys: restart.join(', ') }) }
-      : { type: 'success', text: t('settings.runtime.savedLive') }
-  }
-  catch (e) {
-    const err = e as { response?: { data?: { message?: string } }, message?: string }
-    runtimeNotice.value = { type: 'error', text: err?.response?.data?.message || err?.message || String(e) }
-  }
-  finally {
-    savingRuntime.value = false
-  }
-}
-
-async function resetRuntimeKey(key: string) {
-  try {
-    await rcStore.patch({ [key]: null })
-    // 只收敛被重置的键:整表 sync 会静默丢弃用户其他未保存编辑
-    dirtyKeys.value.delete(key)
-    draft.value[key] = rcStore.effective[key]
-    runtimeNotice.value = { type: 'success', text: t('settings.runtime.keyReset', { key }) }
-  }
-  catch (e) {
-    const err = e as { response?: { data?: { message?: string } }, message?: string }
-    runtimeNotice.value = { type: 'error', text: err?.response?.data?.message || err?.message || String(e) }
-  }
-}
-
-async function resetAllRuntime() {
-  try {
-    await rcStore.resetAll()
-    syncRuntimeDraft()
-    runtimeNotice.value = { type: 'success', text: t('settings.runtime.resetAllDone') }
-  }
-  catch (e) {
-    const err = e as { response?: { data?: { message?: string } }, message?: string }
-    runtimeNotice.value = { type: 'error', text: err?.response?.data?.message || err?.message || String(e) }
-  }
-}
-
-/** 内置分组的 i18n 标签(id → i18n key);插件/自建分组走自己的 label */
-const KNOWN_GROUP_LABELS: Record<string, string> = { server: 'settings.runtime.groupServer', app: 'settings.runtime.groupApp', api: 'settings.runtime.groupApi', theme: 'settings.runtime.groupTheme', i18n: 'settings.runtime.groupI18n', security: 'settings.runtime.groupSecurity', daq: 'settings.runtime.groupDaq', memory: 'settings.runtime.groupMemory', omp: 'settings.runtime.groupOmp', harness: 'settings.runtime.groupHarness', dcw: 'settings.runtime.groupDcw', workshop: 'settings.runtime.groupWorkshop', backup: 'settings.runtime.groupBackup', retention: 'settings.runtime.groupRetention', log: 'settings.runtime.groupLog', plugins: 'settings.runtime.groupPlugins' }
-
-/**
- * 分组标题解析优先级:
- *  1) 分组自带 labelKey(插件可本地化自己分区的标题)
- *  2) 服务端下发的 label 与 id 不同 —— 管理员改过名 / 插件声明的展示名
- *  3) 内置分组的 i18n 映射(注册表里内置组 label 就是 id,需要前端补语言)
- *  4) 兜底用 id
- */
-function groupLabel(g: { id: string, label?: string, labelKey?: string }): string {
-  if (g.labelKey && t(g.labelKey) !== g.labelKey) return t(g.labelKey)
-  if (g.label && g.label !== g.id) return g.label
-  const known = KNOWN_GROUP_LABELS[g.id]
-  if (known) return t(known)
-  return g.label || g.id
-}
-function groupSourceBadge(g: { source: string, plugin?: string }): string {
-  if (g.source === 'plugin') return g.plugin ? `${t('settings.groups.srcPlugin')}: ${g.plugin}` : t('settings.groups.srcPlugin')
-  if (g.source === 'user') return t('settings.groups.srcUser')
-  return t('settings.groups.srcBuiltin')
-}
-function sourceClass(s: string): string {
-  return s === 'runtime' ? 'src-runtime' : s === 'env' ? 'src-env' : 'src-yaml'
-}
-function itemLabel(item: { label: string, labelKey?: string }): string {
-  const k = item.labelKey
-  return (k && t(k) !== k) ? t(k) : item.label
-}
-
-/* ---------------- 分组折叠 + 分组管理(后端为权威,本地只管展开偏好) ---------------- */
-const GROUP_COLLAPSE_KEY = 'aw.settings.groups.collapsed'
-/** 本地展开/收起偏好:{ [groupId]: collapsed } */
-const groupCollapsed = ref<Record<string, boolean>>({})
-function loadCollapsePref(): void {
-  try {
-    groupCollapsed.value = JSON.parse(localStorage.getItem(GROUP_COLLAPSE_KEY) ?? '{}') ?? {}
-  }
-  catch {
-    groupCollapsed.value = {}
-  }
-}
-function saveCollapsePref(): void {
-  try {
-    localStorage.setItem(GROUP_COLLAPSE_KEY, JSON.stringify(groupCollapsed.value))
-  }
-  catch { /* 隐私模式等场景忽略 */ }
-}
-function isCollapsed(g: { id: string, collapsed: boolean }): boolean {
-  const local = groupCollapsed.value[g.id]
-  return local === undefined ? g.collapsed : local
-}
-function toggleGroup(g: { id: string, collapsed: boolean, collapsible: boolean }): void {
-  if (!g.collapsible) return
-  groupCollapsed.value = { ...groupCollapsed.value, [g.id]: !isCollapsed(g) }
-  saveCollapsePref()
-}
-/** 全部展开/收起(一键;按当前是否已全展开决定方向) */
-function toggleAllGroups(): void {
-  const list = rcStore.groups.filter(g => g.collapsible)
-  const anyExpanded = list.some(g => !isCollapsed(g))
-  const next = { ...groupCollapsed.value }
-  for (const g of list) next[g.id] = anyExpanded
-  groupCollapsed.value = next
-  saveCollapsePref()
-}
-const allExpanded = computed(() => rcStore.groups.filter(g => g.collapsible).some(g => !isCollapsed(g)))
-
-/* 分组 CRUD(admin):内联表单 + 行内改名,避免引入全局弹窗依赖 */
-const isAdmin = computed(() => userStore.isAdmin)
-const groupFormOpen = ref(false)
-const groupForm = reactive({ label: '', description: '', collapsed: false })
-const groupBusy = ref('')
-const renamingId = ref('')
-const renameDraft = ref('')
-
-async function submitGroupForm(): Promise<void> {
-  if (!groupForm.label.trim()) return
-  groupBusy.value = 'create'
-  try {
-    await rcStore.createGroup({ label: groupForm.label.trim(), description: groupForm.description.trim(), collapsed: groupForm.collapsed })
-    groupFormOpen.value = false
-    groupForm.label = ''
-    groupForm.description = ''
-    groupForm.collapsed = false
-    message.success(t('settings.groups.created'))
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e, t('settings.groups.createFail')))
-  }
-  finally {
-    groupBusy.value = ''
-  }
-}
-
-function startRename(g: { id: string, label: string }): void {
-  renamingId.value = g.id
-  renameDraft.value = g.label
-}
-async function commitRename(id: string): Promise<void> {
-  const label = renameDraft.value.trim()
-  renamingId.value = ''
-  if (!label) return
-  groupBusy.value = id
-  try {
-    await rcStore.updateGroup(id, { label })
-    message.success(t('settings.groups.renamed'))
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e, t('settings.groups.updateFail')))
-  }
-  finally {
-    groupBusy.value = ''
-  }
-}
-
-/** 排序:与相邻同源分组交换 order(通过各自的 order 值互换实现稳定重排) */
-async function moveGroup(id: string, dir: -1 | 1): Promise<void> {
-  const list = [...rcStore.groups]
-  const i = list.findIndex(g => g.id === id)
-  const j = i + dir
-  if (i < 0 || j < 0 || j >= list.length) return
-  const a = list[i]!
-  const b = list[j]!
-  groupBusy.value = id
-  try {
-    // 顺序值可能相等(插件组同 order)→ 用「重排后的显式序号」写回,保证结果确定
-    const ordered = [...list]
-    ordered.splice(i, 1)
-    ordered.splice(j, 0, a)
-    const patchA = (j + 1) * 10
-    const patchB = (i + 1) * 10
-    await rcStore.updateGroup(a.id, { order: patchA })
-    await rcStore.updateGroup(b.id, { order: patchB })
-    void b
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e, t('settings.groups.updateFail')))
-  }
-  finally {
-    groupBusy.value = ''
-  }
-}
-
-async function setGroupDefaultCollapsed(g: { id: string, collapsed: boolean }): Promise<void> {
-  groupBusy.value = g.id
-  try {
-    await rcStore.updateGroup(g.id, { collapsed: !g.collapsed })
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e, t('settings.groups.updateFail')))
-  }
-  finally {
-    groupBusy.value = ''
-  }
-}
-
-async function removeGroup(g: { id: string, label: string, fieldCount?: number }): Promise<void> {
-  const count = g.fieldCount ?? 0
-  if (count > 0) {
-    message.warning(t('settings.groups.deleteHasFields', { p0: groupLabel(g), p1: count }))
-    return
-  }
-  groupBusy.value = g.id
-  try {
-    await rcStore.deleteGroup(g.id)
-    message.success(t('settings.groups.deleted'))
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e, t('settings.groups.deleteFail')))
-  }
-  finally {
-    groupBusy.value = ''
-  }
-}
-/* ============================================================= */
-
-/* ================= 插件管理(清单/启停/健康检测) ================= */
-interface PluginHealth {
-  ok: boolean
-  reason?: string
-}
-
-const plugins = ref<WorkshopPluginDto[]>([])
-const pluginsLoading = ref(false)
-const pluginsLoaded = ref(false)
-const togglingPlugins = ref<Set<string>>(new Set())
-const healthMap = ref<Record<string, PluginHealth | 'checking'>>({})
-
-const hasHealthRoute = (p: WorkshopPluginDto): boolean =>
-  (p.routes ?? []).some(r => String(r.path || '').endsWith('/health'))
-
-async function loadPlugins() {
-  pluginsLoading.value = true
-  try {
-    const res = await api.listPlugins()
-    // 顶层 plugins key(非信封);兼容 {code,data} 信封
-    const list = res?.plugins ?? (res as { data?: { plugins?: WorkshopPluginDto[] } })?.data?.plugins ?? []
-    plugins.value = Array.isArray(list) ? list : []
-    pluginsLoaded.value = true
-  }
-  catch (e) {
-    message.error(apiErrorMessage(e, t('plugins.loadFail')))
-  }
-  finally {
-    pluginsLoading.value = false
-  }
-}
-
-async function togglePlugin(p: WorkshopPluginDto, next: boolean) {
-  if (togglingPlugins.value.has(p.name)) return
-  togglingPlugins.value.add(p.name)
-  try {
-    if (next) await api.enablePlugin(p.name)
-    else await api.disablePlugin(p.name)
-    p.enabled = next
-    message.success(next ? t('plugins.enabled') : t('plugins.disabled'))
-  }
-  catch (e) {
-    // 普通用户 403 → 需要管理员权限
-    message.error(apiErrorMessage(e, t('plugins.adminRequired')))
-  }
-  finally {
-    togglingPlugins.value.delete(p.name)
-  }
-}
-
-async function checkPluginHealth(p: WorkshopPluginDto) {
-  if (!hasHealthRoute(p)) return
-  healthMap.value = { ...healthMap.value, [p.name]: 'checking' }
-  try {
-    const res = await api.pluginHealth(p.name)
-    healthMap.value = { ...healthMap.value, [p.name]: judgePluginHealth(p.name, res) }
-  }
-  catch (e) {
-    healthMap.value = { ...healthMap.value, [p.name]: { ok: false, reason: apiErrorMessage(e, t('plugins.loadFail')) } }
-  }
-}
-
-/** 健康判定:rag-bridge 看 backend.ok && web.ok;diag-bridge 看 remote.status==='ok';未知形状回退无报错即视为正常 */
-function judgePluginHealth(name: string, res: Record<string, unknown>): PluginHealth {
-  if (name === 'rag-bridge') {
-    const backend = res.backend as { ok?: boolean, error?: string, status?: string } | undefined
-    const web = res.web as { ok?: boolean, error?: string, status?: string } | undefined
-    const ok = Boolean(backend?.ok) && Boolean(web?.ok)
-    const reason = !backend?.ok
-      ? (backend?.error || backend?.status || 'backend')
-      : (web?.error || web?.status || 'web')
-    return ok ? { ok: true } : { ok: false, reason }
-  }
-  if (name === 'diag-bridge') {
-    const remote = res.remote as { status?: string } | undefined
-    const ok = remote?.status === 'ok'
-    return ok ? { ok: true } : { ok: false, reason: remote?.status || 'remote' }
-  }
-  return { ok: true }
-}
-
-/** 模板辅助:检测中 / 检测结果(避免模板内窄化) */
-function isCheckingHealth(name: string): boolean {
-  return healthMap.value[name] === 'checking'
-}
-function healthOf(name: string): PluginHealth | null {
-  const h = healthMap.value[name]
-  return (h && h !== 'checking') ? h : null
-}
-function isToggling(name: string): boolean {
-  return togglingPlugins.value.has(name)
-}
-
-// 进入运行配置 Tab 时懒加载插件清单(端点需登录)
-watch(activeTab, (v) => {
-  if (v === 'runtime' && !pluginsLoaded.value && !pluginsLoading.value && userStore.isLoggedIn) void loadPlugins()
-}, { immediate: true })
-
-// 折叠偏好只在浏览器侧读写(localStorage);SSR 首帧用服务端默认折叠态,水合后无缝接管
-onMounted(loadCollapsePref)
-/* ============================================================= */
-
-/** 强调色预设(控制室低饱和族;默认 = 品牌绿,跟随 config.yml) */
-const defaultAccent = String(config.primaryColor)
-const colorPresets = [
-  { value: defaultAccent, label: t('settings.accentInk') },
-  { value: '#c9963f', label: t('settings.accentStone') },
-  { value: '#44615a', label: t('settings.accentMoss') },
-  { value: '#3f6094', label: t('settings.accentSlate') },
-  { value: '#6b5aa0', label: t('settings.accentPlum') },
-  { value: '#9c5744', label: t('settings.accentClay') },
-]
-
-const currentAccent = computed(() => store.accent ?? defaultAccent)
-
-function pickAccent(c: string) {
-  store.setAccent(c === defaultAccent ? null : c)
-  message.success(t('settings.accentApplied'))
-}
-
-/** 恢复默认(品牌绿,跟随 config.yml) */
-function resetAccent() {
-  store.setAccent(null)
-  message.success(t('settings.accentReset'))
-}
-
-const localeOptions = computed(() =>
-  (locales.value as Array<{ code: string, name: string }>).map(l => ({
-    label: l.name,
-    value: l.code,
-  })),
-)
-
-const switchLocale = (value: unknown) => {
-  if (value != null) {
-    // 持久化 + 强刷:与 AppHeader 同策略(setup 期词条需重载整体切换)
-    localStorage.setItem('aw.locale', String(value))
-    setLocale(String(value) as 'zh-CN' | 'en')
-    window.location.reload()
-  }
-}
-
-/** 系统态概览(只读,同源 config.yml) */
-const systemRows = computed(() => [
-  { label: t('home.fields.name'), value: site.name },
-  { label: t('home.fields.version'), value: `v${site.version}` },
-  { label: t('home.fields.mode'), value: site.mode },
-  { label: t('home.fields.apiBase'), value: `${site.apiBase} (${config.apiTimeout}ms)` },
-  { label: t('home.fields.primary'), value: defaultAccent },
-  { label: 'i18n', value: locale.value },
-])
-
-const tabs = computed(() => [
-  { key: 'appearance', icon: 'i-tabler-palette', label: t('settings.theme') },
-  { key: 'runtime', icon: 'i-tabler-settings', label: t('settings.runtimeTab') },
-  { key: 'system', icon: 'i-tabler-server-2', label: t('settings.systemTab') },
-])
-</script>
-
-<template>
-  <div class="settings-page">
-    <div class="aw-page-head">
-      <div>
-        <p class="aw-kicker">
-          {{ t('menu.system') }} / settings
-        </p>
-        <h1>{{ t('settings.title') }}</h1>
-      </div>
-      <span class="aw-stamp">v{{ site.version }}</span>
-    </div>
-
-    <a-card
-      :bordered="false"
-      class="settings-card"
-    >
-      <div class="settings-layout">
-        <!-- 左侧 Tab 导航 -->
-        <div class="settings-nav">
-          <button
-            v-for="tab in tabs"
-            :key="tab.key"
-            class="nav-item"
-            :class="{ active: activeTab === tab.key }"
-            @click="activeTab = tab.key"
-          >
-            <span :class="tab.icon" />
-            <span>{{ tab.label }}</span>
-          </button>
-        </div>
-
-        <!-- 右侧内容区 -->
-        <div class="settings-body">
-          <!-- 外观:主题色 / 深浅 / 语言(全部实时生效并持久化) -->
-          <div v-show="activeTab === 'appearance'">
-            <h3 class="section-title">
-              {{ t('settings.theme') }}
-            </h3>
-            <p class="section-desc">
-              {{ t('settings.appearanceDesc') }}
-            </p>
-
-            <div class="set-row">
-              <div class="set-text">
-                <div class="set-title">
-                  {{ t('settings.primaryColor') }}
-                </div>
-                <div class="set-sub">
-                  {{ t('settings.accentDesc') }}
-                </div>
-              </div>
-            </div>
-            <div class="color-swatches">
-              <button
-                v-for="c in colorPresets"
-                :key="c.value"
-                class="swatch"
-                :class="{ on: currentAccent.toLowerCase() === c.value.toLowerCase() }"
-                :style="{ '--sw': c.value }"
-                :title="c.label"
-                @click="pickAccent(c.value)"
-              >
-                <span class="swatch-dot" />
-                <span class="swatch-label">{{ c.label }}</span>
-                <span
-                  v-if="currentAccent.toLowerCase() === c.value.toLowerCase()"
-                  class="i-tabler-check swatch-check"
-                />
-              </button>
-            </div>
-            <button
-              class="aw-pill outline reset-btn"
-              @click="resetAccent"
-            >
-              <span class="i-tabler-rotate" />
-              {{ t('settings.accentResetAction') }}
-            </button>
-
-            <div class="toggle-row">
-              <div class="set-text">
-                <div class="set-title">
-                  {{ store.isDark ? t('common.dark') : t('common.light') }}
-                </div>
-                <div class="set-sub">
-                  {{ t('settings.darkDesc') }}
-                </div>
-              </div>
-              <button
-                class="switch"
-                :class="{ on: store.isDark }"
-                role="switch"
-                :aria-checked="store.isDark"
-                @click="store.toggleDark()"
-              >
-                <span class="knob" />
-              </button>
-            </div>
-
-            <div class="toggle-row">
-              <div class="set-text">
-                <div class="set-title">
-                  {{ t('header.language') }}
-                </div>
-                <div class="set-sub">
-                  {{ t('settings.languageDesc') }}
-                </div>
-              </div>
-              <a-select
-                :value="locale"
-                :options="localeOptions"
-                style="width: 140px"
-                @change="switchLocale"
-              />
-            </div>
-          </div>
-
-          <!-- 运行配置:服务端持久化 + live 热重载/restart 重启生效 -->
-          <div v-show="activeTab === 'runtime'">
-            <h3 class="section-title">
-              {{ t('settings.runtimeTab') }}
-            </h3>
-            <p class="section-desc">
-              {{ t('settings.runtime.desc') }}
-            </p>
-
-            <a-alert
-              v-if="runtimeNotice"
-              :type="runtimeNotice.type"
-              show-icon
-              class="rt-notice"
-              :message="runtimeNotice.text"
-            />
-
-            <!-- 分组工具条:一键展开/收起 + (admin) 新建分组 -->
-            <div class="rt-groups-bar">
-              <button
-                class="aw-pill outline rt-groups-toggle"
-                :title="t('settings.groups.toggleAll')"
-                @click="toggleAllGroups"
-              >
-                <span :class="allExpanded ? 'i-tabler-chevrons-up' : 'i-tabler-chevrons-down'" />
-                {{ allExpanded ? t('settings.groups.collapseAll') : t('settings.groups.expandAll') }}
-              </button>
-              <span class="rt-groups-count">{{ t('settings.groups.count', { p0: rcStore.groups.length }) }}</span>
-              <button
-                v-if="isAdmin"
-                class="aw-pill outline rt-groups-add"
-                @click="groupFormOpen = !groupFormOpen"
-              >
-                <span class="i-tabler-plus" />
-                {{ t('settings.groups.newGroup') }}
-              </button>
-            </div>
-
-            <!-- 新建分组(内联表单;id 由服务端按 label 派生,创建后即可用 API 归属字段) -->
-            <div
-              v-if="isAdmin && groupFormOpen"
-              class="rt-group-form"
-            >
-              <a-input
-                v-model:value="groupForm.label"
-                :placeholder="t('settings.groups.namePlaceholder')"
-                style="width: 220px"
-                @press-enter="submitGroupForm"
-              />
-              <a-input
-                v-model:value="groupForm.description"
-                :placeholder="t('settings.groups.descPlaceholder')"
-                style="width: 320px"
-                @press-enter="submitGroupForm"
-              />
-              <a-checkbox v-model:checked="groupForm.collapsed">
-                {{ t('settings.groups.defaultCollapsed') }}
-              </a-checkbox>
-              <button
-                class="aw-pill primary"
-                :disabled="!groupForm.label.trim() || groupBusy === 'create'"
-                @click="submitGroupForm"
-              >
-                {{ groupBusy === 'create' ? '…' : t('settings.groups.create') }}
-              </button>
-              <button
-                class="aw-pill outline"
-                @click="groupFormOpen = false"
-              >
-                {{ t('settings.groups.cancel') }}
-              </button>
-            </div>
-
-            <!-- 分组分区:顺序/标题/折叠态全部来自后端 groups 接口 -->
-            <section
-              v-for="g in rcStore.groups"
-              :key="g.id"
-              class="rt-group"
-              :class="{ 'collapsed': isCollapsed(g), 'grp-plugin': g.source === 'plugin' }"
-            >
-              <header
-                class="rt-group-head"
-                :role="g.collapsible ? 'button' : undefined"
-                :tabindex="g.collapsible ? 0 : undefined"
-                @click="toggleGroup(g)"
-                @keydown.enter.prevent="toggleGroup(g)"
-                @keydown.space.prevent="toggleGroup(g)"
-              >
-                <span
-                  v-if="g.collapsible"
-                  class="rt-caret"
-                  :class="isCollapsed(g) ? 'i-tabler-chevron-right' : 'i-tabler-chevron-down'"
-                />
-                <span
-                  v-if="g.icon"
-                  class="rt-group-icon"
-                  :class="g.icon"
-                />
-                <template v-if="renamingId === g.id">
-                  <input
-                    v-model="renameDraft"
-                    class="rt-rename aw-mono"
-                    @click.stop
-                    @keydown.enter.prevent="commitRename(g.id)"
-                    @keydown.esc.prevent="renamingId = ''"
-                  >
-                  <button
-                    class="mini-btn"
-                    @click.stop="commitRename(g.id)"
-                  >
-                    {{ t('settings.groups.ok') }}
-                  </button>
-                </template>
-                <h4
-                  v-else
-                  class="rt-group-title"
-                >
-                  {{ groupLabel(g) }}
-                </h4>
-                <span class="rt-group-badge">{{ groupSourceBadge(g) }}</span>
-                <span class="rt-group-fields">{{ t('settings.groups.fields', { p0: g.fieldCount ?? 0 }) }}</span>
-                <span
-                  v-if="g.description"
-                  class="rt-group-desc"
-                >{{ g.description }}</span>
-                <!-- 分组操作(admin):插件声明的分组由插件权威,不提供改名/删除 -->
-                <span
-                  v-if="isAdmin && g.source !== 'plugin'"
-                  class="rt-group-ops"
-                  @click.stop
-                >
-                  <button
-                    class="mini-btn"
-                    :disabled="groupBusy === g.id"
-                    :title="t('settings.groups.moveUp')"
-                    @click="moveGroup(g.id, -1)"
-                  >
-                    <span class="i-tabler-arrow-up" />
-                  </button>
-                  <button
-                    class="mini-btn"
-                    :disabled="groupBusy === g.id"
-                    :title="t('settings.groups.moveDown')"
-                    @click="moveGroup(g.id, 1)"
-                  >
-                    <span class="i-tabler-arrow-down" />
-                  </button>
-                  <button
-                    class="mini-btn"
-                    :disabled="groupBusy === g.id"
-                    :title="t('settings.groups.rename')"
-                    @click="startRename(g)"
-                  >
-                    <span class="i-tabler-pencil" />
-                  </button>
-                  <button
-                    class="mini-btn"
-                    :disabled="groupBusy === g.id"
-                    :title="t('settings.groups.defaultCollapsed')"
-                    @click="setGroupDefaultCollapsed(g)"
-                  >
-                    <span :class="g.collapsed ? 'i-tabler-chevrons-down' : 'i-tabler-chevrons-up'" />
-                  </button>
-                  <button
-                    v-if="g.source === 'user'"
-                    class="mini-btn"
-                    :disabled="groupBusy === g.id"
-                    :title="t('settings.groups.delete')"
-                    @click="removeGroup(g)"
-                  >
-                    <span class="i-tabler-trash" />
-                  </button>
-                </span>
-              </header>
-
-              <div
-                v-show="!isCollapsed(g)"
-                class="rt-group-body"
-              >
-                <p
-                  v-if="!(g.fieldCount ?? 0)"
-                  class="rt-group-empty"
-                >
-                  {{ t('settings.groups.emptyHint') }}
-                </p>
-                <div
-                  v-for="item in rcStore.fieldsOf(g.id)"
-                  :key="item.key"
-                  class="rt-row"
-                >
-                  <div class="rt-main">
-                    <div class="rt-title">
-                      {{ itemLabel(item) }}
-                      <span
-                        class="rt-tag"
-                        :class="sourceClass(rcStore.sourceOf(item.key))"
-                      >{{ rcStore.sourceOf(item.key) }}</span>
-                      <span
-                        class="rt-tag"
-                        :class="item.applies"
-                      >{{ item.applies === 'live' ? t('settings.runtime.live') : t('settings.runtime.restart') }}</span>
-                    </div>
-                    <div class="rt-sub">
-                      {{ item.description }}
-                    </div>
-                  </div>
-                  <div class="rt-ctrl">
-                    <a-input-number
-                      v-if="item.type === 'number'"
-                      v-model:value="(draft[item.key] as string | number | undefined)"
-                      :min="item.min"
-                      :max="item.max"
-                      @change="markDirty(item.key)"
-                    />
-                    <a-switch
-                      v-else-if="item.type === 'boolean'"
-                      v-model:checked="(draft[item.key] as string | number | boolean | undefined)"
-                      @change="markDirty(item.key)"
-                    />
-                    <a-select
-                      v-else-if="item.type === 'select'"
-                      v-model:value="(draft[item.key] as string | number | undefined)"
-                      style="width: 160px"
-                      :options="(item.options ?? []).map(o => ({ label: o, value: o }))"
-                      @change="markDirty(item.key)"
-                    />
-                    <span
-                      v-else-if="item.type === 'color'"
-                      class="rt-color"
-                    >
-                      <input
-                        type="color"
-                        :value="String(draft[item.key] ?? '#35e0a0')"
-                        @input="draft[item.key] = ($event.target as HTMLInputElement).value; markDirty(item.key)"
-                      >
-                      <a-input
-                        :value="String(draft[item.key] ?? '')"
-                        style="width: 110px"
-                        class="aw-mono"
-                        @change="draft[item.key] = ($event.target as HTMLInputElement).value; markDirty(item.key)"
-                      />
-                    </span>
-                    <a-input
-                      v-else
-                      v-model:value="(draft[item.key] as string | number | undefined)"
-                      style="width: 220px"
-                      @change="markDirty(item.key)"
-                    />
-                    <button
-                      class="aw-pill outline rt-reset"
-                      :title="t('settings.runtime.resetKey')"
-                      @click="resetRuntimeKey(item.key)"
-                    >
-                      <span class="i-tabler-rotate" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            <div class="rt-actions">
-              <button
-                class="aw-pill primary"
-                :disabled="!dirtyKeys.size || savingRuntime"
-                @click="saveRuntime"
-              >
-                <span class="i-tabler-device-floppy" />
-                {{ savingRuntime ? '…' : t('settings.runtime.save') }}
-              </button>
-              <button
-                class="aw-pill outline"
-                @click="resetAllRuntime"
-              >
-                {{ t('settings.runtime.resetAll') }}
-              </button>
-              <span class="rt-path aw-mono">{{ rcStore.settingsPath }}</span>
-            </div>
-
-            <!-- 插件管理:清单 / 启停(admin) / 健康检测 -->
-            <h4 class="rt-group-title plugin-group-title">
-              {{ t('plugins.title') }}
-            </h4>
-            <p class="section-desc">
-              {{ t('plugins.desc') }}
-            </p>
-
-            <div
-              v-if="!userStore.isLoggedIn"
-              class="identity-note"
-            >
-              {{ t('plugins.needLogin') }}
-            </div>
-            <a-spin
-              v-else
-              :spinning="pluginsLoading"
-            >
-              <div
-                v-for="p in plugins"
-                :key="p.name"
-                class="plugin-row"
-                :class="{ off: p.enabled === false }"
-              >
-                <div class="plugin-main">
-                  <div class="rt-title">
-                    <span class="aw-mono">{{ p.name }}</span>
-                    <span
-                      v-if="p.version"
-                      class="rt-tag"
-                    >v{{ p.version }}</span>
-                    <span
-                      v-if="p.builtin"
-                      class="rt-tag src-runtime"
-                    >{{ t('plugins.builtin') }}</span>
-                    <span
-                      v-if="p.error"
-                      class="rt-tag restart"
-                    >{{ p.error }}</span>
-                  </div>
-                  <div class="rt-sub">
-                    {{ p.description || '—' }}
-                  </div>
-                </div>
-                <div class="rt-ctrl">
-                  <span
-                    v-if="isCheckingHealth(p.name)"
-                    class="plugin-health faint"
-                  >
-                    <span class="i-tabler-loader-2 spin" />
-                    {{ t('plugins.healthChecking') }}
-                  </span>
-                  <span
-                    v-else-if="healthOf(p.name)"
-                    class="plugin-health"
-                    :class="healthOf(p.name)!.ok ? 'ok' : 'bad'"
-                  >
-                    <span :class="healthOf(p.name)!.ok ? 'i-tabler-circle-check' : 'i-tabler-alert-circle'" />
-                    {{ healthOf(p.name)!.ok ? t('plugins.healthOk') : `${t('plugins.healthBad')}: ${healthOf(p.name)!.reason ?? ''}` }}
-                  </span>
-                  <button
-                    v-if="hasHealthRoute(p)"
-                    class="aw-pill outline rt-reset"
-                    @click="checkPluginHealth(p)"
-                  >
-                    <span class="i-tabler-heartbeat" />
-                    {{ t('plugins.healthCheck') }}
-                  </button>
-                  <button
-                    class="switch"
-                    :class="{ on: p.enabled !== false }"
-                    role="switch"
-                    :aria-checked="p.enabled !== false"
-                    :disabled="isToggling(p.name)"
-                    @click="togglePlugin(p, p.enabled === false)"
-                  >
-                    <span class="knob" />
-                  </button>
-                </div>
-              </div>
-              <div
-                v-if="plugins.length === 0 && !pluginsLoading"
-                class="identity-note"
-              >
-                {{ t('plugins.empty') }}
-              </div>
-            </a-spin>
-
-            <!-- 插件 UI 注入区:client 面板经 ctx.ui.registerPanel({slot:'settings.plugins'}) 注入 -->
-            <workshop-plugin-slot
-              v-if="plugins.length"
-              slot-name="settings.plugins"
-            />
-          </div>
-
-          <!-- 系统:只读运行参数 -->
-          <div v-show="activeTab === 'system'">
-            <h3 class="section-title">
-              {{ t('settings.systemTab') }}
-            </h3>
-            <p class="section-desc">
-              {{ t('settings.systemDesc') }}
-            </p>
-            <a-descriptions
-              bordered
-              :column="1"
-              size="small"
-            >
-              <a-descriptions-item
-                v-for="row in systemRows"
-                :key="row.label"
-                :label="row.label"
-              >
-                <span class="aw-mono">{{ row.value }}</span>
-              </a-descriptions-item>
-            </a-descriptions>
-            <p class="identity-note">
-              {{ userStore.isLoggedIn
-                ? `${t('settings.identity')}: ${userStore.user?.name} (${userStore.user?.role})`
-                : t('settings.identityGuest') }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </a-card>
-  </div>
-</template>
-
-<style scoped>
-.settings-page {
-  padding: 4px;
-}
-
-.settings-card {
-  overflow: hidden;
-}
-
-.settings-layout {
-  display: flex;
-  min-height: 420px;
-}
-
-/* 左侧导航:8px 圆角条目(active = surface-strong 墨字) */
-.settings-nav {
-  display: flex;
-  flex: 0 0 180px;
-  flex-direction: column;
-  gap: 2px;
-  padding: 14px;
-  border-right: 1px solid var(--line);
-}
-
-.nav-item {
-  display: flex;
-  gap: 9px;
-  align-items: center;
-  width: 100%;
-  padding: 8px 10px;
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--ink-faint);
-  text-align: left;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-panel-sm);
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-
-.nav-item:hover {
-  color: var(--ink);
-  background: var(--paper-deep);
-}
-
-.nav-item.active {
-  font-weight: 600;
-  color: var(--ink);
-  background: var(--paper-deep);
-}
-
-.settings-body {
-  flex: 1;
-  min-width: 0;
-  padding: 22px 26px;
-}
-
-.section-title {
-  margin: 0 0 4px;
-  font-family: var(--font-display);
-  font-size: 22px;
-  font-weight: 400;
-  letter-spacing: -0.01em;
-  color: var(--ink);
-}
-
-.section-desc {
-  margin: 0 0 18px;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--ink-faint);
-}
-
-/* 色板:粉彩圆点 + 名称;选中 = 墨描边 */
-.color-swatches {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 12px 0 4px;
-}
-
-.swatch {
-  position: relative;
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  padding: 8px 14px;
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--ink-soft);
-  cursor: pointer;
-  background: var(--paper-raised);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-pill);
-  transition: border-color var(--transition-fast), background var(--transition-fast);
-}
-
-.swatch:hover {
-  background: var(--paper-deep);
-}
-
-.swatch.on {
-  color: var(--ink);
-  border-color: var(--ink);
-}
-
-.swatch-dot {
-  width: 14px;
-  height: 14px;
-  background: var(--sw);
-  border: 1px solid rgb(0 0 0 / 8%);
-  border-radius: 50%;
-}
-
-.swatch-check {
-  font-size: 13px;
-  color: var(--ink);
-}
-
-.reset-btn {
-  margin: 10px 0 4px;
-}
-
-/* 开关行(设置页 toggle row) */
-.toggle-row,
-.set-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 18px 0;
-  border-bottom: 1px solid var(--line);
-}
-
-.set-text {
-  min-width: 0;
-}
-
-.set-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ink-soft);
-}
-
-.set-sub {
-  max-width: 52ch;
-  margin-top: 3px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--ink-faint);
-}
-
-/* 药丸开关(ink on 态) */
-.switch {
-  position: relative;
-  flex: none;
-  width: 42px;
-  height: 25px;
-  padding: 0;
-  cursor: pointer;
-  background: var(--line-strong);
-  border: 0;
-  border-radius: var(--radius-pill);
-  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.switch .knob {
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 19px;
-  height: 19px;
-  background: var(--paper-raised);
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgb(12 10 9 / 25%);
-  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.switch.on {
-  background: var(--accent);
-}
-
-.switch.on .knob {
-  transform: translateX(17px);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .switch,
-  .switch .knob {
-    transition: none;
-  }
-}
-
-.identity-note {
-  margin: 14px 0 0;
-  font-size: 12.5px;
-  color: var(--ink-faint);
-}
-
-/* ============ 运行配置标签 ============ */
-.rt-notice {
-  margin: 0 0 14px;
-}
-
-/* ── 分组分区(后端 groups 接口驱动:顺序/标题/折叠态均来自服务端) ── */
-.rt-groups-bar {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 12px 0 10px;
-}
-
-.rt-groups-count {
-  font-size: 11.5px;
-  color: var(--ink-faint);
-}
-
-.rt-groups-add {
-  margin-left: auto;
-}
-
-.rt-group-form {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  background: var(--frost-bg);
-  border: 1px solid var(--glass-line);
-  border-radius: 10px;
-}
-
-.rt-group {
-  margin: 0 0 10px;
-  background: var(--surface-glass);
-  border: 1px solid var(--glass-line);
-  border-radius: 10px;
-}
-
-/* 插件声明的分区:左侧一道强调色,与平台内置分区一眼可分 */
-.rt-group.grp-plugin {
-  border-left: 3px solid color-mix(in srgb, var(--tone-info-dot) 55%, transparent);
-}
-
-.rt-group-head {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 10px 14px;
-  border-radius: 10px;
-}
-
-.rt-group.collapsed .rt-group-head {
-  border-radius: 10px;
-}
-
-.rt-group-head[role='button'] {
-  cursor: pointer;
-}
-
-.rt-group-head[role='button']:hover {
-  background: var(--hover-tint);
-}
-
-.rt-caret {
-  flex: none;
-  font-size: 15px;
-  color: var(--ink-faint);
-}
-
-.rt-group-icon {
-  flex: none;
-  font-size: 14px;
-  color: var(--accent);
-}
-
-.rt-rename {
-  width: 200px;
-  padding: 2px 8px;
-  font-size: 14px;
-  color: var(--ink);
-  background: var(--paper-deep);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-chip);
-}
-
-.rt-group-badge {
-  flex: none;
-  padding: 1px 7px;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-  border: 1px solid var(--glass-line);
-  border-radius: 99px;
-}
-
-.rt-group.grp-plugin .rt-group-badge {
-  color: var(--tone-info-dot);
-  border-color: color-mix(in srgb, var(--tone-info-dot) 40%, transparent);
-}
-
-.rt-group-fields {
-  flex: none;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-}
-
-.rt-group-desc {
-  min-width: 0;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rt-group-ops {
-  display: flex;
-  gap: 2px;
-  align-items: center;
-  margin-left: auto;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.rt-group-head:hover .rt-group-ops,
-.rt-group-ops:focus-within {
-  opacity: 1;
-}
-
-.rt-group-body {
-  padding: 0 14px 6px;
-  border-top: 1px solid var(--line);
-}
-
-.rt-group-empty {
-  margin: 10px 0 4px;
-  font-size: 12.5px;
-  color: var(--ink-faint);
-}
-
-.rt-group-title {
-  margin: 0;
-  font-family: var(--font-display);
-  font-size: 14.5px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--ink-soft);
-}
-
-/* 插件管理页的同名标题保留旧观感(独立于分组分区) */
-.rt-group-title.plugin-group-title {
-  margin: 20px 0 2px;
-  font-size: 15px;
-}
-
-.rt-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 11px 0;
-  border-bottom: 1px solid var(--line);
-}
-
-.rt-main {
-  min-width: 0;
-}
-
-.rt-title {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 13.5px;
-  font-weight: 500;
-  color: var(--ink-soft);
-}
-
-.rt-sub {
-  max-width: 46ch;
-  margin-top: 3px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--ink-faint);
-}
-
-.rt-tag {
-  padding: 1px 7px;
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  font-weight: 500;
-  line-height: 1.5;
-  color: var(--ink-faint);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-pill);
-}
-
-.rt-tag.src-runtime {
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
-}
-
-.rt-tag.src-env {
-  color: #c9963f;
-  border-color: rgb(201 150 63 / 45%);
-}
-
-.rt-tag.live {
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
-}
-
-.rt-tag.restart {
-  color: #c9963f;
-  border-color: rgb(201 150 63 / 45%);
-}
-
-.rt-ctrl {
-  display: flex;
-  flex: none;
-  gap: 8px;
-  align-items: center;
-}
-
-.rt-color {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.rt-color input[type='color'] {
-  width: 36px;
-  height: 32px;
-  padding: 2px;
-  cursor: pointer;
-  background: var(--paper-raised);
-  border: 1px solid var(--line-strong);
-  border-radius: 6px;
-}
-
-.rt-reset {
-  padding: 4px 9px;
-  font-size: 12px;
-}
-
-.rt-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  margin-top: 18px;
-}
-
-.rt-path {
-  margin-left: auto;
-  font-size: 11.5px;
-  color: var(--ink-faint);
-}
-
-/* ============ 插件管理 ============ */
-.plugin-group-title {
-  margin-top: 30px;
-  padding-top: 22px;
-  border-top: 1px solid var(--line);
-}
-
-.plugin-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 13px 0;
-  border-bottom: 1px solid var(--line);
-  transition: opacity var(--transition-fast);
-}
-
-.plugin-row.off {
-  opacity: 0.55;
-}
-
-.plugin-main {
-  min-width: 0;
-}
-
-.plugin-health {
-  display: inline-flex;
-  gap: 5px;
-  align-items: center;
-  max-width: 320px;
-  font-size: 12.5px;
-  line-height: 1.4;
-}
-
-.plugin-health.ok {
-  color: #2e9e6b;
-}
-
-.plugin-health.bad {
-  color: #c2554a;
-}
-
-.plugin-health.faint {
-  color: var(--ink-faint);
-}
-
-.plugin-health .spin {
-  animation: plugin-spin 0.9s linear infinite;
-}
-
-@keyframes plugin-spin {
-  to { transform: rotate(360deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .plugin-health .spin {
-    animation: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .rt-row,
-  .plugin-row {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-  .rt-actions {
-    flex-wrap: wrap;
-  }
-  .rt-path {
-    margin-left: 0;
-  }
-}
-
-/* ══ 窄屏(≤899px,对齐 useResponsive 的 drawer 档)═══════════════════════
-   桌面是"左栏菜单 180px + 右栏内容"的双栏仪表台。窄屏若仍并排,
-   内容区只剩 ~170px,描述文字被压成"一次一个字"的竖排长条(375px 实测)。
-   窄屏改为:菜单在上,收成一条可横扫的标签带;内容在下,占满整宽。
-   注:原先把这段堆叠规则误写在 prefers-reduced-motion 里 ——
-   那样只有"减少动效"的用户才看到正确布局,是反的,已移到宽度断点。 */
-@media (max-width: 899px) {
-  .settings-layout {
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .settings-nav {
-    flex: none;
-    flex-direction: row;
-    gap: 6px;
-    padding: 8px 10px;
-    overflow-x: auto;
-    overscroll-behavior-x: contain;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
-    scrollbar-width: none;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .settings-nav::-webkit-scrollbar {
-    display: none;
-  }
-
-  .nav-item {
-    flex: none;
-    width: auto;
-    min-height: 40px;
-    padding: 8px 14px;
-    white-space: nowrap;
-  }
-
-  .settings-body {
-    padding: 16px 12px;
-  }
-
-  /* 卡片内边距在窄屏收边,把宽度让给内容 */
-  .settings-card :deep(.ant-card-body) {
-    padding: 12px;
-  }
-
-  /* 正文说明文字窄屏抬到 13px 地板 */
-  .set-sub,
-  .rt-sub,
-  .section-desc,
-  .identity-note,
-  .rt-group-empty,
-  .plugin-health {
-    font-size: 13px;
-  }
-
-  .rt-group-desc {
-    flex: 1 1 100%;
-  }
-
-  /* 手指命中区:分组操作按钮只有 24px 高 */
-  .rt-group-ops .mini-btn,
-  .rt-group-head .mini-btn {
-    min-width: 40px;
-    min-height: 40px;
-    padding: 6px 10px;
-  }
-}
-
-/* 无 hover 的设备(手机/平板):分组操作不能只在 hover 时才出现 */
-@media (hover: none) {
-  .rt-group-ops {
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import AppearancePane from '~/components/settings/AppearancePane.vue'
+import RuntimePane from '~/components/settings/RuntimePane.vue'
+import SystemPane from '~/components/settings/SystemPane.vue'
+
+const { t } = useI18n()
+const site = useSiteConfig()
+
+const activeTab = ref('appearance')
+
+const tabs = computed(() => [
+  { key: 'appearance', icon: 'i-tabler-palette', label: t('settings.theme') },
+  { key: 'runtime', icon: 'i-tabler-settings', label: t('settings.runtimeTab') },
+  { key: 'system', icon: 'i-tabler-server-2', label: t('settings.systemTab') },
+])
+</script>
+
+<template>
+  <div class="settings-page">
+    <div class="aw-page-head">
+      <div>
+        <p class="aw-kicker">
+          {{ t('menu.system') }} / settings
+        </p>
+        <h1>{{ t('settings.title') }}</h1>
+      </div>
+      <span class="aw-stamp">v{{ site.version }}</span>
+    </div>
+
+    <a-card
+      :bordered="false"
+      class="settings-card"
+    >
+      <div class="settings-layout">
+        <!-- 左侧 Tab 导航 -->
+        <div class="settings-nav">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            class="nav-item"
+            :class="{ active: activeTab === tab.key }"
+            @click="activeTab = tab.key"
+          >
+            <span :class="tab.icon" />
+            <span>{{ tab.label }}</span>
+          </button>
+        </div>
+
+        <!-- 右侧内容区 -->
+        <div class="settings-body">
+          <!-- 外观:主题色 / 深浅 / 语言(全部实时生效并持久化) -->
+          <AppearancePane :active-tab="activeTab" />
+          <!-- 运行配置:服务端持久化 + live 热重载/restart 重启生效 -->
+          <RuntimePane :active-tab="activeTab" />
+          <!-- 系统:只读运行参数 -->
+          <SystemPane :active-tab="activeTab" />
+        </div>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<style scoped>
+.settings-page {
+  padding: 4px;
+}
+
+.settings-card {
+  overflow: hidden;
+}
+
+.settings-layout {
+  display: flex;
+  min-height: 420px;
+}
+
+/* 左侧导航:8px 圆角条目(active = surface-strong 墨字) */
+.settings-nav {
+  display: flex;
+  flex: 0 0 180px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px;
+  border-right: 1px solid var(--line);
+}
+
+.nav-item {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  width: 100%;
+  padding: 8px 10px;
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink-faint);
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-panel-sm);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+.nav-item:hover {
+  color: var(--ink);
+  background: var(--paper-deep);
+}
+
+.nav-item.active {
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--paper-deep);
+}
+
+.settings-body {
+  flex: 1;
+  min-width: 0;
+  padding: 22px 26px;
+}
+
+/* ══ 窄屏(≤899px,对齐 useResponsive 的 drawer 档)═══════════════════════
+   桌面是"左栏菜单 180px + 右栏内容"的双栏仪表台。窄屏若仍并排,
+   内容区只剩 ~170px,描述文字被压成"一次一个字"的竖排长条(375px 实测)。
+   窄屏改为:菜单在上,收成一条可横扫的标签带;内容在下,占满整宽。
+   注:原先把这段堆叠规则误写在 prefers-reduced-motion 里 ——
+   那样只有"减少动效"的用户才看到正确布局,是反的,已移到宽度断点。 */
+@media (max-width: 899px) {
+  .settings-layout {
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .settings-nav {
+    flex: none;
+    flex-direction: row;
+    gap: 6px;
+    padding: 8px 10px;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .settings-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-item {
+    flex: none;
+    width: auto;
+    min-height: 40px;
+    padding: 8px 14px;
+    white-space: nowrap;
+  }
+
+  .settings-body {
+    padding: 16px 12px;
+  }
+
+  /* 卡片内边距在窄屏收边,把宽度让给内容 */
+  .settings-card :deep(.ant-card-body) {
+    padding: 12px;
+  }
+}
+</style>