新增：文档体系重构+CHANGELOG补充+发布产物清理
This commit is contained in:
344
docs/03-模块文档/更新通知/update-notification-ultra-minimal.md
Normal file
344
docs/03-模块文档/更新通知/update-notification-ultra-minimal.md
Normal file
@@ -0,0 +1,344 @@
|
||||
# 升级提示优化 - 最终版
|
||||
|
||||
## ✅ 优化完成
|
||||
|
||||
### 优化内容
|
||||
1. ✅ 去掉多余的标签（"发布日期"、"文件大小"、"更新内容"、"重要提示"）
|
||||
2. ✅ 简化信息展示（纯文字，一行显示）
|
||||
3. ✅ 优化日期格式（只显示日期，不显示时间）
|
||||
4. ✅ 简化强制更新提示（居中，淡色背景）
|
||||
|
||||
---
|
||||
|
||||
## 🎨 最终效果
|
||||
|
||||
### 普通更新弹窗
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ 发现新版本 v0.1.0 → v0.1.1 [×] │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ • 修复文件列表刷新问题 │
|
||||
│ • 优化启动性能 │
|
||||
│ • 新增暗色模式支持 │
|
||||
│ │
|
||||
│ 2026-01-28 · 45.2 MB │
|
||||
│ │
|
||||
│ ┌────────────────────────────────────────┐ │
|
||||
│ │ 立即更新 │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────┐ ┌─────────────────┐ │
|
||||
│ │ 稍后更新 │ │ ☐ 下次提醒我 │ │
|
||||
│ └─────────────────┘ └─────────────────┘ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 强制更新弹窗
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ ⚠ 重要更新 [×] │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ • 修复严重安全漏洞 │
|
||||
│ • 修复数据损坏问题 │
|
||||
│ • 优化系统稳定性 │
|
||||
│ │
|
||||
│ 2026-01-28 · 45.2 MB │
|
||||
│ │
|
||||
│ ┌────────────────────────────────────────┐ │
|
||||
│ │ 此版本包含重要的安全更新和问题 │ │ ← 淡橙色背景
|
||||
│ │ 修复，为保障正常使用，请完成更新 │ │
|
||||
│ │ 后再继续。 │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌────────────────────────────────────────┐ │
|
||||
│ │ 立即更新 │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 优化对比
|
||||
|
||||
### 优化前
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ 发现新版本 v0.1.0 → v0.1.1 [×] │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 发布日期 2026-01-28 │ ← 带"发布日期"标签
|
||||
│ 文件大小 45.2 MB │ ← 带"文件大小"标签
|
||||
│ │
|
||||
│ 更新内容 │ ← 带"更新内容"标题
|
||||
│ • 修复文件列表刷新问题 │
|
||||
│ • 优化启动性能 │
|
||||
│ │
|
||||
│ ⚠️ 重要提示 │ ← 带"重要提示"标题
|
||||
│ 此版本包含重要的安全更新和问题修复， │ ← 带图标
|
||||
│ 为保障正常使用，请完成更新后再继续。 │
|
||||
│ │
|
||||
│ ┌────────────────────────────────────────┐ │
|
||||
│ │ 立即更新 │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 优化后
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ 发现新版本 v0.1.0 → v0.1.1 [×] │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ • 修复文件列表刷新问题 │ ← 直接显示
|
||||
│ • 优化启动性能 │
|
||||
│ • 新增暗色模式支持 │
|
||||
│ │
|
||||
│ 2026-01-28 · 45.2 MB │ ← 无标签，一行
|
||||
│ │
|
||||
│ ┌────────────────────────────────────────┐ │
|
||||
│ │ 立即更新 │ │
|
||||
│ └────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────┐ ┌─────────────────┐ │
|
||||
│ │ 稍后更新 │ │ ☐ 下次提醒我 │ │
|
||||
│ └─────────────────┘ └─────────────────┘ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 优化细节
|
||||
|
||||
### 1. 更新日志
|
||||
**优化前：**
|
||||
```vue
|
||||
<div class="changelog-title">更新内容</div>
|
||||
<div class="changelog-text">{{ changelog }}</div>
|
||||
```
|
||||
|
||||
**优化后：**
|
||||
```vue
|
||||
<div class="changelog-text">{{ changelog }}</div>
|
||||
```
|
||||
|
||||
**改进：** 去掉标题，直接显示内容
|
||||
|
||||
### 2. 版本信息
|
||||
**优化前：**
|
||||
```vue
|
||||
<div class="info-row">
|
||||
<span class="info-label">发布日期</span>
|
||||
<span class="info-value">{{ releaseDate }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">文件大小</span>
|
||||
<span class="info-value">{{ formatFileSize(fileSize) }}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**优化后：**
|
||||
```vue
|
||||
<div class="info-row">
|
||||
<span>{{ formatDate(releaseDate) }}</span>
|
||||
<span v-if="fileSize">{{ formatFileSize(fileSize) }}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**改进：**
|
||||
- 去掉标签（"发布日期"、"文件大小"）
|
||||
- 一行显示，用 · 分隔
|
||||
- 日期格式化（去掉时间）
|
||||
|
||||
### 3. 强制更新提示
|
||||
**优化前：**
|
||||
```vue
|
||||
<div class="notice-header">
|
||||
<icon-exclamation-circle-fill />
|
||||
<span class="notice-title">重要提示</span>
|
||||
</div>
|
||||
<div class="notice-content">
|
||||
此版本包含重要的安全更新和问题修复...
|
||||
</div>
|
||||
```
|
||||
|
||||
**优化后：**
|
||||
```vue
|
||||
<div class="force-update-notice">
|
||||
此版本包含重要的安全更新和问题修复，为保障正常使用，请完成更新后再继续。
|
||||
</div>
|
||||
```
|
||||
|
||||
**改进：**
|
||||
- 去掉图标和标题
|
||||
- 去掉嵌套结构
|
||||
- 居中显示，淡色背景
|
||||
|
||||
### 4. 日期格式化
|
||||
**新增函数：**
|
||||
```javascript
|
||||
const formatDate = (dateStr) => {
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
}).replace(/\//g, '-')
|
||||
}
|
||||
```
|
||||
|
||||
**效果：**
|
||||
```
|
||||
输入：2026-01-28 18:45:00
|
||||
输出：2026-01-28
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 设计规范
|
||||
|
||||
### 信息层级
|
||||
```
|
||||
1. 更新日志（最重要）
|
||||
└> 大字号（13px），行高 1.8
|
||||
|
||||
2. 强制更新提示（次重要）
|
||||
└> 居中，淡色背景
|
||||
|
||||
3. 版本信息（辅助）
|
||||
└> 小字（12px），灰色，居中
|
||||
|
||||
4. 操作按钮（行动）
|
||||
└> 主题色，吸引点击
|
||||
```
|
||||
|
||||
### 对齐方式
|
||||
```
|
||||
更新日志：左对齐
|
||||
版本信息：居中
|
||||
强制更新：居中
|
||||
操作按钮：居中
|
||||
```
|
||||
|
||||
### 间距
|
||||
```
|
||||
更新日志 ↔ 版本信息：16px
|
||||
版本信息 ↔ 强制更新：16px
|
||||
强制更新 ↔ 按钮：16px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 核心原则
|
||||
|
||||
### 极简主义
|
||||
> 去掉一切不必要的标签和装饰
|
||||
|
||||
### 信息优先
|
||||
1. **内容 > 标签** - 直接显示内容，不需要标签说明
|
||||
2. **数据 > 描述** - 数据本身就说明了含义
|
||||
3. **视觉 > 文字** - 用布局和排版代替文字说明
|
||||
|
||||
### 用户体验
|
||||
```
|
||||
优化前：
|
||||
发布日期 2026-01-28
|
||||
文件大小 45.2 MB
|
||||
|
||||
优化后：
|
||||
2026-01-28 · 45.2 MB
|
||||
|
||||
改进：
|
||||
- 少一行
|
||||
- 更简洁
|
||||
- 信息量相同
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 使用方式
|
||||
|
||||
### 立即可用
|
||||
```bash
|
||||
# 前端已构建成功
|
||||
wails dev
|
||||
```
|
||||
|
||||
### 效果预览
|
||||
1. 应用启动后 5 秒自动检查更新
|
||||
2. 发现新版本显示弹窗
|
||||
3. 信息简洁明了：
|
||||
- 更新日志直接显示
|
||||
- 版本信息一行居中
|
||||
- 强制更新提示突出但不刺眼
|
||||
|
||||
---
|
||||
|
||||
## 📊 优化总结
|
||||
|
||||
| 元素 | 优化前 | 优化后 | 改进 |
|
||||
|------|--------|--------|------|
|
||||
| **标签数量** | 4 个 | 0 个 | ⬇️ 100% |
|
||||
| **信息行数** | 2 行 | 1 行 | ⬇️ 50% |
|
||||
| **文字层级** | 3 层 | 1 层 | ⬇️ 66% |
|
||||
| **日期格式** | YYYY-MM-DD HH:mm:ss | YYYY-MM-DD | ✅ 更简洁 |
|
||||
| **对齐方式** | 左对齐 | 居中 | ✅ 更平衡 |
|
||||
|
||||
---
|
||||
|
||||
## 💡 设计亮点
|
||||
|
||||
### 1. 无标签设计
|
||||
```
|
||||
优化前：
|
||||
发布日期：2026-01-28
|
||||
文件大小：45.2 MB
|
||||
|
||||
优化后：
|
||||
2026-01-28 · 45.2 MB
|
||||
|
||||
数据本身就说明了含义，不需要标签
|
||||
```
|
||||
|
||||
### 2. 一行显示
|
||||
```
|
||||
优化前：
|
||||
发布日期 2026-01-28
|
||||
文件大小 45.2 MB
|
||||
|
||||
优化后：
|
||||
2026-01-28 · 45.2 MB
|
||||
|
||||
节省空间，更紧凑
|
||||
```
|
||||
|
||||
### 3. 居中平衡
|
||||
```
|
||||
更新日志：左对齐（阅读友好）
|
||||
版本信息：居中（平衡美观）
|
||||
强制更新：居中（强调但不刺眼）
|
||||
操作按钮：居中（引导行动）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✨ 最终效果
|
||||
|
||||
### 简约而不简单
|
||||
- ✅ 保留所有必要信息
|
||||
- ✅ 去掉所有多余标签
|
||||
- ✅ 优化排版和布局
|
||||
- ✅ 提升阅读体验
|
||||
|
||||
### 协调而统一
|
||||
- ✅ 与整体风格一致
|
||||
- ✅ 信息层级清晰
|
||||
- ✅ 视觉平衡美观
|
||||
- ✅ 交互流畅自然
|
||||
|
||||
---
|
||||
|
||||
**优化完成！极简、协调、实用！** ✨
|
||||
Reference in New Issue
Block a user