新增: 设置页 UX 重构(master-detail 左导航 + 搜索 + 即时反馈 + 导入导出)

- SettingsNav 左导航 7 类 + 顶部搜索(索引匹配 label/desc 高亮定位)
- GeneralPanel 拆分 Appearance/Performance/Advanced Section
- SettingRow 统一行 + 即时反馈(已保存)+ 下轮生效 badge
- 统一组件库 settings.css(scoped 重复 class 抽全局)
- 导入导出(默认排除 keyring 密钥)
- activeCategory 持久化 + 窄屏折叠 tab

src/components/settings/ConnectionPanel.vue

@@ -2,7 +2,10 @@
   <!-- ═══ 连接管理 ═══ -->
   <section class="panel">
     <div class="panel-header">
-      <h2>{{ $t('settings.panelConnection') }}</h2>
+      <div class="panel-title-group">
+        <h2>{{ $t('settings.panelConnection') }}</h2>
+        <span class="experimental-badge">{{ $t('settings.experimentalBadge') }}</span>
+      </div>
       <button class="btn btn-ghost btn-sm" @click="openConnForm()">{{ $t('settings.addConnection') }}</button>
     </div>
     <div class="connection-list" v-if="connections.length > 0">
@@ -67,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppSettingsStore } from '@/stores/appSettings'
 
@@ -185,39 +188,39 @@ async function removeConn(id: string) {
   emit('toast', t('settings.toastDeleted'), 'info')
 }
 
-/** 暴露给 shell onMounted 调用 */
+/** 暴露给 shell(loadConnections 仍保留供外部主动刷新) */
 defineExpose({ loadConnections })
+
+// 阶段3 UX 重构:本面板改为 advanced 类懒挂载,不再由 Settings.vue onMounted 调用,
+// 改为自身挂载时载入(localStorage 读,同步无网络)。
+onMounted(loadConnections)
 </script>
 
 <style scoped>
-/* ===== 面板容器(原 Settings.vue 抽出,各子组件自持 scoped 副本) ===== */
-.panel {
-  background: var(--df-bg-card);
-  border: 0.5px solid var(--df-border);
-  border-radius: var(--df-radius-lg);
-  padding: var(--df-pad-panel);
-}
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--df-gap-head);
-}
-.panel-header h2 { font-size: 15px; font-weight: 500; }
-.empty-hint { font-size: 13px; color: var(--df-text-dim); padding: 12px 0; }
+/* 阶段1/3 UX 重构:panel/panel-header/empty-hint/btn 系列/setting-select/
+   已迁移到 settings.css 全局。
+   本 scoped 仅保留 ConnectionPanel 特有样式:connection-card/conn 系列/type 系列/form 系列/
+   setting-input/btn-link 等。 */
 
-/* ===== 按钮 ===== */
-.btn { padding: 8px 16px; border: none; border-radius: var(--df-radius-sm); font-size: 13px; cursor: pointer; transition: all 0.15s; }
-.btn-primary { background: var(--df-accent); color: #fff; }
-.btn-primary:hover { background: var(--df-accent-hover); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-.btn-ghost { background: transparent; color: var(--df-text-secondary); border: 0.5px solid var(--df-border); }
-.btn-ghost:hover { background: var(--df-bg-card); color: var(--df-text); }
-.btn-sm { padding: 4px 12px; font-size: 12px; }
+/* ===== 链接按钮(本面板特有,未进全局) ===== */
 .btn-link { background: none; border: none; color: var(--df-accent); font-size: 12px; cursor: pointer; padding: 2px 6px; }
 .btn-link:hover { text-decoration: underline; }
 .btn-link-danger { color: var(--df-danger); }
 
+/* ===== 标题组(panel-header 内 标题+badge 一组,与右侧按钮 space-between) ===== */
+.panel-title-group { display: flex; align-items: center; gap: 8px; }
+
+/* badge"实验功能·暂未接入 AI"(阶段7:warning 色,沿用 default-badge/pool-badge 模式) */
+.experimental-badge {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: var(--df-radius-xs);
+  background: var(--df-warning-bg);
+  color: var(--df-warning);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
 /* ===== 连接卡片 ===== */
 .connection-list { display: flex; flex-direction: column; gap: 8px; }
 .connection-card {
@@ -257,7 +260,7 @@ defineExpose({ loadConnections })
 }
 .conn-actions { display: flex; gap: 4px; }
 
-/* 表单 */
+/* 表单(本面板特有输入控件样式;.setting-select 走全局) */
 .form-grid { display: flex; flex-direction: column; gap: 14px; }
 .form-field { display: flex; flex-direction: column; gap: 4px; }
 .form-label { font-size: 12px; font-weight: 500; color: var(--df-text-secondary); }
@@ -265,6 +268,4 @@ defineExpose({ loadConnections })
 
 .setting-input { padding: 6px 12px; background: var(--df-bg); border: 0.5px solid var(--df-border); border-radius: var(--df-radius-sm); color: var(--df-text); font-size: 13px; outline: none; min-width: 260px; }
 .setting-input:focus { border-color: var(--df-accent); }
-.setting-select { padding: 6px 12px; background: var(--df-bg); border: 0.5px solid var(--df-border); border-radius: var(--df-radius-sm); color: var(--df-text); font-size: 13px; outline: none; cursor: pointer; min-width: 160px; }
-.setting-select:focus { border-color: var(--df-accent); }
 </style>