# 设置面板 UI 改进总结

## 问题修复

### 1. 保存后未立即生效 ✅

**原因分析：**
- `tabs` 数组中的 `visible` 属性与 `visibleTabs` 数组不同步
- `watch(selectedTabs)` 覆盖了拖拽排序的顺序

**修复方案：**
1. 在 `handleTabVisibilityChange` 中同步更新 `tabs` 数组的 `visible` 属性
2. 移除 `watch(selectedTabs)`，避免覆盖排序
3. 在 `handleSave` 中确保数据完全同步
4. 在 `loadConfig` 中从后端加载时同步 `visible` 属性

### 2. UI 合并优化 ✅

**改进前：**
- Tab 显示、默认 Tab、拖拽排序分成三个独立的卡片
- 用户需要在不同区域操作，不够直观

**改进后：**
- 统一到一个列表中，每行包含所有控制项
- 更直观、更高效的配置体验

## 新的 UI 设计

### Tab 配置列表结构

```
┌─────────────────────────────────────────────────────┐
│ ℹ️ 拖拽可调整 Tab 顺序，勾选复选框控制显示，单选按钮  │
│    设置默认打开的 Tab                                  │
├─────────────────────────────────────────────────────┤
│ ⋮  ☑  数据库        ○ 默认打开                       │
│ ⋮  ☑  文件管理      ○ 默认打开                       │
│ ⋮  ☑  设备调用测试  ⦿ 默认打开                       │
├─────────────────────────────────────────────────────┤
│ 隐藏的 Tabs                                           │
├─────────────────────────────────────────────────────┤
│ ⋮  ☐  （其他隐藏的 Tab）                              │
└─────────────────────────────────────────────────────┘
```

### 每行包含的元素

1. **拖拽手柄** (⋮) - 拖拽调整顺序
2. **复选框** (☑/☐) - 控制显示/隐藏
3. **Tab 标题** - 显示 Tab 名称
4. **单选按钮** (⦿) - 设置默认打开的 Tab

## 技术实现

### 新增辅助函数

```javascript
// 判断 Tab 是否可见
const isTabVisible = (key) => {
  return localConfig.value.visibleTabs.includes(key)
}

// 判断 Tab 是否启用
const isTabEnabled = (key) => {
  const tab = localConfig.value.tabs.find(t => t.key === key)
  return tab ? tab.enabled : false
}

// 隐藏的 Tabs 计算属性
const hiddenTabs = computed(() => {
  return localConfig.value.tabs.filter(
    tab => !localConfig.value.visibleTabs.includes(tab.key)
  )
})
```

### 改进的可见性处理

```javascript
// 处理单个 Tab 可见性变化
const handleTabVisibilityChange = (tabKey, visible) => {
  if (visible) {
    // 显示 Tab：添加到 visibleTabs 末尾
    localConfig.value.visibleTabs.push(tabKey)
  } else {
    // 隐藏 Tab：从 visibleTabs 中移除
    // 至少保留一个 Tab
    if (localConfig.value.visibleTabs.length <= 1) {
      Message.warning('至少需要保留一个可见的 Tab')
      return
    }

    // 如果隐藏的是默认 Tab，需要更改默认 Tab
    if (localConfig.value.defaultTab === tabKey) {
      const remainingTabs = localConfig.value.visibleTabs.filter(k => k !== tabKey)
      localConfig.value.defaultTab = remainingTabs[0] || ''
    }

    localConfig.value.visibleTabs = localConfig.value.visibleTabs.filter(
      k => k !== tabKey
    )
  }

  // 同步更新 tabs 数组中的 visible 属性
  localConfig.value.tabs = localConfig.value.tabs.map(tab => ({
    ...tab,
    visible: localConfig.value.visibleTabs.includes(tab.key)
  }))
}
```

### 保存前数据同步

```javascript
// 保存配置
const handleSave = async () => {
  // ... 验证逻辑 ...

  // 确保 tabs 数组中的 visible 属性与 visibleTabs 完全同步
  const syncedTabs = localConfig.value.tabs.map(tab => ({
    ...tab,
    visible: localConfig.value.visibleTabs.includes(tab.key)
  }))

  const configToSave = {
    tabs: syncedTabs,
    visibleTabs: [...localConfig.value.visibleTabs],
    defaultTab: localConfig.value.defaultTab
  }

  // ... 保存逻辑 ...
}
```

## 样式改进

### 配置项样式

```css
.tab-config-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-fill-1);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: move;
  transition: all 0.2s;
}

.tab-config-item:hover {
  background: var(--color-fill-2);
  border-color: var(--color-border-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-config-item.dragging {
  opacity: 0.5;
  background: var(--color-fill-2);
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
```

### 隐藏项样式

```css
.tab-config-item.hidden {
  opacity: 0.6;
  cursor: default;
}

.tab-config-item.hidden:hover {
  border-color: var(--color-border);
  box-shadow: none;
}
```

## 用户体验改进

1. **一目了然** - 所有配置集中在一行，无需来回查看
2. **即时反馈** - 拖拽时有视觉反馈（透明度、缩放、阴影）
3. **智能提示** - 顶部说明文字告知用户如何操作
4. **分组显示** - 可见和隐藏的 Tab 分开展示
5. **保护机制** - 至少保留一个可见 Tab，最后一个 Tab 的复选框禁用

## 数据流保证

### 配置加载
```
后端 → GetAppConfig → loadConfig → 同步 visible 属性 → 显示
```

### 配置保存
```
用户操作 → localConfig → handleSave → 同步数据 → 后端保存 → 刷新 UI
```

### 关键同步点

1. **复选框改变** → 同步 `visibleTabs` 和 `tabs[].visible`
2. **拖拽排序** → 更新 `visibleTabs` 顺序
3. **保存前** → 确保所有 `visible` 属性与 `visibleTabs` 一致
4. **加载后** → 根据后端数据同步 `visible` 属性

## 测试清单

### 基础功能
- ✅ 拖拽排序 Tab
- ✅ 勾选/取消勾选复选框
- ✅ 设置默认 Tab
- ✅ 保存配置后立即生效
- ✅ 刷新页面后配置保持

### 边界情况
- ✅ 至少保留一个可见 Tab
- ✅ 隐藏默认 Tab 时自动切换
- ✅ 禁用的 Tab 不可操作
- ✅ 配置为空时显示默认值

### UI 交互
- ✅ 拖拽时视觉反馈
- ✅ hover 状态提示
- ✅ 隐藏项分组显示
- ✅ 说明文字清晰

## 修复文件

- `frontend/src/components/SettingsPanel.vue` - UI 合并和逻辑修复
- `frontend/src/App.vue` - loadConfig 和 handleSaveConfig 数据同步

## 总结

本次改进解决了两个主要问题：
1. **保存后未立即生效** - 通过数据同步机制修复
2. **UI 不够直观** - 通过统一配置列表优化

用户体验得到显著提升，配置操作更加高效和直观。