252 lines
7.9 KiB
Markdown
252 lines
7.9 KiB
Markdown
# 版本更新面板优化总结
|
||
|
||
## 改进内容
|
||
|
||
### 1. 去掉弹出窗，合并更新设置到抽屉 ✅
|
||
|
||
**改进前：**
|
||
- 点击"更新设置"按钮打开模态框
|
||
- 配置项在弹出窗中
|
||
- 需要点击"确定"才能保存
|
||
|
||
**改进后：**
|
||
- 去掉"更新设置"按钮和模态框
|
||
- 配置项直接显示在"版本更新"tab 中
|
||
- 配置修改后自动保存（1秒防抖）
|
||
- 更直观、更高效
|
||
|
||
### 2. 版本信息表格样式优化 ✅
|
||
|
||
**改进前：**
|
||
```vue
|
||
<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个项自动换行，导致表格行很高
|
||
- 内容挤压，显示不美观
|
||
|
||
**改进后：**
|
||
```vue
|
||
<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. 自动保存配置（防抖）
|
||
|
||
```javascript
|
||
// 配置变化时自动保存（防抖）
|
||
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. 版本信息样式
|
||
|
||
```css
|
||
.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. 配置项布局
|
||
|
||
```vue
|
||
<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. **表格换行挤压** - 通过改用卡片式三列布局
|
||
|
||
用户体验得到显著提升，界面更加美观和高效。
|