                <!-- 设置面板 -->
                <div
                    v-show="mainTab === 'settings'"
                    class="mode-content"
                    id="panel-settings"
                    role="tabpanel"
                    :aria-labelledby="'tab-settings'">
                    <div class="settings-subtabs-bar" role="tablist" :aria-label="t('settings.tabs.aria')">
                        <button
                            id="settings-tab-general"
                            role="tab"
                            aria-controls="settings-panel-general"
                            :aria-selected="settingsTab === 'general'"
                            :tabindex="settingsTab === 'general' ? 0 : -1"
                            :class="['settings-subtab', { active: settingsTab === 'general' }]"
                            @click="onSettingsTabClick('general')">
                            {{ t('settings.tab.general') }}
                        </button>
                        <button
                            id="settings-tab-data"
                            role="tab"
                            aria-controls="settings-panel-data"
                            :aria-selected="settingsTab === 'data'"
                            :tabindex="settingsTab === 'data' ? 0 : -1"
                            :class="['settings-subtab', { active: settingsTab === 'data' }]"
                            @click="onSettingsTabClick('data')">
                            {{ t('settings.tab.data') }}
                        </button>
                    </div>

                    <div
                        v-show="settingsTab === 'general'"
                        id="settings-panel-general"
                        role="tabpanel"
                        aria-labelledby="settings-tab-general">
                        <div class="settings-layout">
                            <div class="settings-grid">
                                <section class="settings-card settings-card--wide" :aria-label="t('settings.sharePrefix.title')">
                                    <div class="settings-card-header">
                                        <div class="settings-card-title">{{ t('settings.sharePrefix.title') }}</div>
                                        <div class="settings-card-meta">{{ t('settings.sharePrefix.meta') }}</div>
                                    </div>
                                    <div class="settings-card-body">
                                        <div class="settings-field-row">
                                            <label class="settings-field-label" for="settings-share-prefix">{{ t('settings.sharePrefix.label') }}</label>
                                            <select
                                                id="settings-share-prefix"
                                                class="model-select"
                                                :value="shareCommandPrefix"
                                                @change="setShareCommandPrefix($event.target.value)">
                                                <option value="npm start">npm start</option>
                                                <option value="codexmate">codexmate</option>
                                            </select>
                                        </div>
                                        <div class="settings-card-hint">
                                            {{ t('settings.sharePrefix.hint') }}
                                        </div>
                                    </div>
                                </section>

                                <section class="settings-card settings-card--wide" :aria-label="t('settings.templateConfirm.title')">
                                    <div class="settings-card-header">
                                        <div class="settings-card-title">{{ t('settings.templateConfirm.title') }}</div>
                                        <div class="settings-card-meta">{{ t('settings.templateConfirm.meta') }}</div>
                                    </div>
                                    <div class="settings-card-body">
                                        <label class="health-remote-toggle settings-toggle">
                                            <input
                                                type="checkbox"
                                                :checked="configTemplateDiffConfirmEnabled"
                                                @change="setConfigTemplateDiffConfirmEnabled($event.target.checked)">
                                            <span>{{ t('settings.templateConfirm.toggle') }}</span>
                                        </label>
                                        <div class="settings-card-hint">
                                            {{ t('settings.templateConfirm.hint') }}
                                        </div>
                                    </div>
                                </section>

                                <section class="settings-card settings-card--wide" :aria-label="t('settings.webhook.title')">
                                    <div class="settings-card-header settings-card-header-row">
                                        <div>
                                            <div class="settings-card-title">Webhook</div>
                                            <div class="settings-card-meta">配置变更外发通知</div>
                                        </div>
                                        <span :class="webhookConfig.enabled ? 'status-on' : 'status-off'">{{ webhookConfig.enabled ? '● 已启用' : '○ 已禁用' }}</span>
                                    </div>
                                    <div class="settings-card-body">
                                        <div v-if="webhookConfig.url" class="webhook-readonly-row">
                                            <span class="webhook-readonly-label">URL</span>
                                            <code class="webhook-readonly-value">{{ webhookConfig.url }}</code>
                                        </div>
                                        <div class="webhook-readonly-row">
                                            <span class="webhook-readonly-label">事件</span>
                                            <div class="webhook-readonly-tags">
                                                <span v-for="ev in webhookConfig.events" :key="ev" class="webhook-event-tag">{{ ev }}</span>
                                                <span v-if="!webhookConfig.events.length" class="settings-card-hint">无</span>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>

                    <div
                        v-show="settingsTab === 'data'"
                        id="settings-panel-data"
                        role="tabpanel"
                        aria-labelledby="settings-tab-data">
                        <div class="settings-layout">
                            <div class="settings-grid">
                                <section class="settings-card settings-card--wide" :aria-label="t('settings.backup.title')">
                                    <div class="settings-card-header settings-card-header-row">
                                        <div>
                                            <div class="settings-card-title">{{ t('settings.backup.title') }}</div>
                                            <div class="settings-card-meta">{{ t('settings.backup.meta') }}</div>
                                        </div>
                                    </div>
                                    <div class="settings-card-body">
                                        <div class="settings-backup-grid">
                                            <div class="settings-backup-slot">
                                                <div class="settings-backup-slot-label">Claude</div>
                                                <div class="settings-actions">
                                                    <button class="btn-tool" @click="downloadClaudeDirectory" :disabled="claudeDownloadLoading">
                                                        {{ claudeDownloadLoading ? t('settings.backup.progress', { percent: claudeDownloadProgress }) : t('settings.backup.oneClickClaude') }}
                                                    </button>
                                                    <button class="btn-tool" @click="triggerClaudeImport" :disabled="claudeImportLoading">
                                                        {{ claudeImportLoading ? t('settings.importing') : t('settings.backup.importClaude') }}
                                                    </button>
                                                </div>
                                                <input ref="claudeImportInput" class="sr-only" type="file" accept=".zip" @change="handleClaudeImportChange">
                                            </div>
                                            <div class="settings-backup-slot">
                                                <div class="settings-backup-slot-label">Codex</div>
                                                <div class="settings-actions">
                                                    <button class="btn-tool" @click="downloadCodexDirectory" :disabled="codexDownloadLoading">
                                                        {{ codexDownloadLoading ? t('settings.backup.progress', { percent: codexDownloadProgress }) : t('settings.backup.oneClickCodex') }}
                                                    </button>
                                                    <button class="btn-tool" @click="triggerCodexImport" :disabled="codexImportLoading">
                                                        {{ codexImportLoading ? t('settings.importing') : t('settings.backup.importCodex') }}
                                                    </button>
                                                </div>
                                                <input ref="codexImportInput" class="sr-only" type="file" accept=".zip" @change="handleCodexImportChange">
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <section class="settings-card settings-card--wide" :aria-label="t('settings.trashConfig.title')">
                                    <div class="settings-card-header settings-card-header-row">
                                        <div>
                                            <div class="settings-card-title">{{ t('settings.trashConfig.title') }}</div>
                                            <div class="settings-card-meta">{{ t('settings.trashConfig.meta') }}</div>
                                        </div>
                                    </div>
                                    <div class="settings-card-body">
                                        <div class="settings-trash-config-grid">
                                            <label class="settings-toggle">
                                                <input type="checkbox" :checked="sessionTrashEnabled" @change="setSessionTrashEnabled($event.target.checked)">
                                                <span>{{ t('settings.deleteBehavior.toggle') }}</span>
                                            </label>
                                            <label class="settings-retention-row">
                                                <span>{{ t('settings.trash.retentionLabel') }}</span>
                                                <input type="number" min="1" max="365" :value="sessionTrashRetentionDays" @change="setSessionTrashRetentionDays(Number($event.target.value))" class="settings-retention-input" />
                                            </label>
                                        </div>
                                        <div class="settings-card-hint">{{ t('settings.trash.retentionHint') }}</div>
                                    </div>
                                </section>


                                <section class="settings-card settings-card--wide settings-card--danger" :aria-label="t('settings.reset.title')">
                                    <div class="settings-card-header">
                                        <div class="settings-card-title">{{ t('settings.reset.title') }}</div>
                                        <div class="settings-card-meta">{{ t('settings.reset.meta') }}</div>
                                    </div>
                                    <div class="settings-card-body">
                                        <div class="settings-card-hint">{{ t('settings.reset.hint') }}</div>
                                        <div class="settings-actions">
                                            <button class="btn-tool" @click="resetConfig" :disabled="resetConfigLoading || loading || !!initError">
                                                {{ resetConfigLoading ? t('settings.reset.loading') : t('settings.reset.button') }}
                                            </button>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
