新增：文档体系重构+CHANGELOG补充+发布产物清理

2026-05-01 22:22:06 +08:00
parent 3e1a540b83
commit 6eaaa56eb6
164 changed files with 40346 additions and 64 deletions
--- a/docs/03-模块文档/更新通知/update-panel-improvements.md
+++ b/docs/03-模块文档/更新通知/update-panel-improvements.md
@@ -0,0 +1,251 @@
+# 版本更新面板优化总结
+
+## 改进内容
+
+### 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. **表格换行挤压** - 通过改用卡片式三列布局
+
+用户体验得到显著提升，界面更加美观和高效。