u-desk/docs/03-模块文档/更新通知/update-panel-improvements.md

版本更新面板优化总结

改进内容

1. 去掉弹出窗，合并更新设置到抽屉 ✅

改进前：

• 点击"更新设置"按钮打开模态框
• 配置项在弹出窗中
• 需要点击"确定"才能保存

改进后：

• 去掉"更新设置"按钮和模态框
• 配置项直接显示在"版本更新"tab 中
• 配置修改后自动保存（1秒防抖）
• 更直观、更高效

2. 版本信息表格样式优化 ✅

改进前：

<a-descriptions :column="2" bordered>
  <a-descriptions-item label="当前版本">{{ currentVersion }}</a-descriptions-item>
  <a-descriptions-item label="最后检查">{{ lastCheckTime }}</a-descriptions-item>
  <a-descriptions-item label="自动检查">
    <a-tag>...</a-tag>
  </a-descriptions-item>
</a-descriptions>

问题：

• 使用 a-descriptions 组件，2列布局
• 第3个项自动换行，导致表格行很高
• 内容挤压，显示不美观

改进后：

<a-row :gutter="16">
  <a-col :span="8">
    <div class="info-item">
      <div class="info-label">当前版本</div>
      <div class="info-value">{{ currentVersion }}</div>
    </div>
  </a-col>
  <a-col :span="8">
    <div class="info-item">...</div>
  </a-col>
  <a-col :span="8">
    <div class="info-item">...</div>
  </a-col>
</a-row>

优势：

• 使用 a-row 和 a-col 实现三列均匀布局
• 每列占 8 个栅格（共24格），三列均分
• 信息项使用卡片样式，视觉更清晰
• 标签和值分行显示，不会挤压

新的界面布局

版本更新 Tab 结构

┌─────────────────────────────────────────────────────┐
│ 版本信息                                              │
├─────────────────┬─────────────────┬─────────────────┤
│  当前版本       │  最后检查       │  自动检查       │
│   0.1.0         │  2026-01-28     │   已开启        │
└─────────────────┴─────────────────┴─────────────────┘

┌─────────────────────────────────────────────────────┐
│ 更新设置                                              │
│                                                      │
│ 自动检查更新    [✓] 已开启                            │
│ 检查间隔      [60] 分钟                               │
│ 更新检查地址  https://...                             │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│ 检查更新                                              │
│                                                      │
│ [🔍 检查更新]                                         │
│                                                      │
│ （更新信息显示区域）                                   │
│ （下载进度条）                                        │
│ （安装结果提示）                                      │
└─────────────────────────────────────────────────────┘

技术实现

1. 自动保存配置（防抖）

// 配置变化时自动保存（防抖）
let saveTimer = null
const handleConfigChange = () => {
  // 清除之前的定时器
  if (saveTimer) {
    clearTimeout(saveTimer)
  }

  // 设置新的定时器，1秒后保存
  saveTimer = setTimeout(async () => {
    await saveConfig()
  }, 1000)
}

// 保存配置
const saveConfig = async () => {
  saving.value = true

  try {
    const result = await window.go.main.App.SetUpdateConfig(
      config.value.auto_check_enabled,
      config.value.check_interval_minutes,
      config.value.check_url
    )

    if (result.success) {
      Message.success('配置已自动保存')
      await loadConfig()
    } else {
      Message.error(result.message || '保存配置失败')
    }
  } catch (error) {
    console.error('保存配置失败:', error)
    Message.error('保存配置失败：' + (error.message || error))
  } finally {
    saving.value = false
  }
}

防抖机制：

• 用户修改配置后，等待1秒再自动保存
• 如果1秒内再次修改，重新计时
• 避免频繁保存，提升性能

2. 版本信息样式

.info-item {
  padding: 12px;
  background: var(--color-fill-1);
  border-radius: 6px;
  text-align: center;
}

.info-label {
  font-size: 12px;
  color: var(--color-text-3);
  margin-bottom: 8px;
}

.info-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-1);
}

样式特点：

• 卡片式设计，圆角背景
• 标签和值垂直居中对齐
• 标签小字体灰色，值大字体加粗
• 三列均分，视觉平衡

3. 配置项布局

<a-row :gutter="16">
  <a-col :span="12">
    <a-form-item label="自动检查更新">
      <a-switch v-model="config.auto_check_enabled" @change="handleConfigChange">
        <template #checked-icon><icon-check /></template>
        <template #unchecked-icon><icon-close /></template>
      </a-switch>
      <span>{{ config.auto_check_enabled ? '已开启' : '已关闭' }}</span>
    </a-form-item>
  </a-col>
  <a-col :span="12">
    <a-form-item label="检查间隔（分钟）">
      <a-input-number
        v-model="config.check_interval_minutes"
        :disabled="!config.auto_check_enabled"
        @change="handleConfigChange"
      />
    </a-form-item>
  </a-col>
</a-row>

布局优化：

• 自动检查和检查间隔并排显示
• 更新检查地址独占一行
• 禁用自动检查时，检查间隔输入框自动禁用
• 修改任一配置项都会触发自动保存

用户体验改进

1. 更直观 - 所有配置一目了然，无需打开弹出窗
2. 更高效 - 自动保存，无需点击确定按钮
3. 更美观 - 三列均分布局，不会出现换行挤压
4. 更智能 - 防抖保存，避免频繁操作
5. 更合理 - 禁用自动检查时，相关配置项自动禁用

修改的文件

• frontend/src/components/UpdatePanel.vue
  • 模板：去掉模态框，改用卡片布局
  • 样式：添加 .info-item 相关样式
  • 逻辑：添加自动保存和防抖机制

功能对比

功能	改进前	改进后
配置入口	点击按钮打开弹出窗	直接显示在界面中
保存方式	手动点击确定	自动保存（1秒防抖）
版本信息	表格换行挤压	三列卡片式布局
交互步骤	打开 → 修改 → 确定	直接修改
视觉效果	表格行很高	三列均分，美观

测试要点

基础功能

• ✅ 修改自动检查开关，1秒后自动保存
• ✅ 修改检查间隔，自动保存
• ✅ 修改检查地址，自动保存
• ✅ 禁用自动检查，检查间隔自动禁用
• ✅ 版本信息三列均分显示

边界情况

• ✅ 快速连续修改，只保存最后一次
• ✅ 保存失败时显示错误提示
• ✅ 检查间隔范围限制（1-1440分钟）

UI 验证

• ✅ 版本信息不换行挤压
• ✅ 三列宽度均匀
• ✅ 卡片样式美观

总结

本次优化解决了两个主要问题：

1. 弹出窗体验不佳 - 通过直接显示配置项并自动保存
2. 表格换行挤压 - 通过改用卡片式三列布局

用户体验得到显著提升，界面更加美观和高效。