mxivideo/docs/COPY_FEATURE_DEMO.md

257 lines
9.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 模板导入日志复制功能演示
## 功能演示
### 1. 基础界面
```
┌─────────────────────────────────────────────────────────────┐
│ 模板导入进度 │
├─────────────────────────────────────────────────────────────┤
│ 进度条: ████████████████████████████████████████ 100% │
│ 状态: 导入完成 │
├─────────────────────────────────────────────────────────────┤
│ 导入结果: ✅ 成功导入 8 个模板 │
├─────────────────────────────────────────────────────────────┤
│ 导入日志 [复制日志] [▼] │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ [14:30:20] 开始扫描模板目录... │ │
│ │ [14:30:21] 发现 10 个模板文件 │ │
│ │ [14:30:22] 开始导入模板: template1 │ │
│ │ [14:30:23] ✅ 成功导入: template1 │ │
│ │ [14:30:24] 开始导入模板: template2 │ │
│ │ [14:30:25] ✅ 成功导入: template2 │ │
│ │ ... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ [关闭] │
└─────────────────────────────────────────────────────────────┘
```
### 2. 复制按钮状态
#### 默认状态
```
[📋 复制日志] [▼]
```
#### 复制成功状态2秒后自动恢复
```
[✅ 已复制] [▼]
```
### 3. 下拉菜单展开
```
┌─────────────────────────────────────────────────────────────┐
│ 导入日志 [复制日志] [▲] │
│ ┌─────────────────┐ │
│ │ 复制详细日志 │ │
│ │ 仅复制日志内容 │ │
│ └─────────────────┘ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 日志内容... │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
## 复制内容示例
### 详细格式复制内容
```
=== 模板导入日志 ===
导出时间: 2024-01-15 14:30:25
当前进度: 导入模板 - 导入完成 (100.0%)
导入结果: 成功 - 导入完成 (成功导入 8 个模板)
=== 详细日志 ===
[2024-01-15 14:30:20] 开始扫描模板目录...
[2024-01-15 14:30:21] 发现 10 个模板文件
[2024-01-15 14:30:22] 开始导入模板: template1
[2024-01-15 14:30:23] ✅ 成功导入: template1
[2024-01-15 14:30:24] 开始导入模板: template2
[2024-01-15 14:30:25] ✅ 成功导入: template2
[2024-01-15 14:30:26] 开始导入模板: template3
[2024-01-15 14:30:27] ✅ 成功导入: template3
[2024-01-15 14:30:28] 开始导入模板: template4
[2024-01-15 14:30:29] ✅ 成功导入: template4
[2024-01-15 14:30:30] 开始导入模板: template5
[2024-01-15 14:30:31] ✅ 成功导入: template5
[2024-01-15 14:30:32] 开始导入模板: template6
[2024-01-15 14:30:33] ✅ 成功导入: template6
[2024-01-15 14:30:34] 开始导入模板: template7
[2024-01-15 14:30:35] ✅ 成功导入: template7
[2024-01-15 14:30:36] 开始导入模板: template8
[2024-01-15 14:30:37] ✅ 成功导入: template8
[2024-01-15 14:30:38] 跳过重复模板: template9 (已存在)
[2024-01-15 14:30:39] ❌ 导入失败: template10 - 文件格式错误
[2024-01-15 14:30:40] 导入完成,成功: 8失败: 1跳过: 1
```
### 简单格式复制内容
```
[2024-01-15 14:30:20] 开始扫描模板目录...
[2024-01-15 14:30:21] 发现 10 个模板文件
[2024-01-15 14:30:22] 开始导入模板: template1
[2024-01-15 14:30:23] ✅ 成功导入: template1
[2024-01-15 14:30:24] 开始导入模板: template2
[2024-01-15 14:30:25] ✅ 成功导入: template2
[2024-01-15 14:30:26] 开始导入模板: template3
[2024-01-15 14:30:27] ✅ 成功导入: template3
[2024-01-15 14:30:28] 开始导入模板: template4
[2024-01-15 14:30:29] ✅ 成功导入: template4
[2024-01-15 14:30:30] 开始导入模板: template5
[2024-01-15 14:30:31] ✅ 成功导入: template5
[2024-01-15 14:30:32] 开始导入模板: template6
[2024-01-15 14:30:33] ✅ 成功导入: template6
[2024-01-15 14:30:34] 开始导入模板: template7
[2024-01-15 14:30:35] ✅ 成功导入: template7
[2024-01-15 14:30:36] 开始导入模板: template8
[2024-01-15 14:30:37] ✅ 成功导入: template8
[2024-01-15 14:30:38] 跳过重复模板: template9 (已存在)
[2024-01-15 14:30:39] ❌ 导入失败: template10 - 文件格式错误
[2024-01-15 14:30:40] 导入完成,成功: 8失败: 1跳过: 1
```
## 用户操作流程
### 场景1快速复制详细日志
1. 用户点击模板导入
2. 导入进度弹窗显示
3. 导入完成后,用户直接点击 **[复制日志]** 按钮
4. 系统复制详细格式日志到剪贴板
5. 按钮显示 **[✅ 已复制]** 状态
6. 2秒后自动恢复为 **[📋 复制日志]**
### 场景2选择复制格式
1. 用户点击模板导入
2. 导入进度弹窗显示
3. 用户点击下拉箭头 **[▼]** 展开菜单
4. 用户选择 **"仅复制日志内容"**
5. 系统复制简单格式日志到剪贴板
6. 下拉菜单自动关闭
7. 主按钮显示 **[✅ 已复制]** 状态
### 场景3导入失败时复制错误信息
```
=== 模板导入日志 ===
导出时间: 2024-01-15 14:35:12
当前进度: 导入模板 - 导入失败 (60.0%)
导入结果: 失败 - 部分模板导入失败 (成功导入 3 个模板) (失败 2 个模板)
=== 详细日志 ===
[2024-01-15 14:35:05] 开始扫描模板目录...
[2024-01-15 14:35:06] 发现 5 个模板文件
[2024-01-15 14:35:07] 开始导入模板: template1
[2024-01-15 14:35:08] ✅ 成功导入: template1
[2024-01-15 14:35:09] 开始导入模板: template2
[2024-01-15 14:35:10] ❌ 导入失败: template2 - 文件损坏,无法读取
[2024-01-15 14:35:11] 开始导入模板: template3
[2024-01-15 14:35:12] ❌ 导入失败: template3 - 缺少必要的配置文件
[2024-01-15 14:35:13] 导入中断,请检查错误信息
```
## 技术细节
### 按钮样式
```css
/* 主复制按钮 */
.copy-button {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-size: 12px;
background-color: #e5e7eb;
color: #374151;
border-radius: 6px 0 0 6px;
transition: background-color 0.2s;
}
.copy-button:hover {
background-color: #d1d5db;
}
/* 下拉按钮 */
.dropdown-button {
display: flex;
align-items: center;
padding: 4px;
font-size: 12px;
background-color: #e5e7eb;
color: #374151;
border-radius: 0 6px 6px 0;
border-left: 1px solid #d1d5db;
transition: background-color 0.2s;
}
/* 下拉菜单 */
.dropdown-menu {
position: absolute;
right: 0;
top: 100%;
margin-top: 4px;
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 10;
min-width: 128px;
}
.dropdown-item {
width: 100%;
text-align: left;
padding: 8px 12px;
font-size: 12px;
color: #374151;
transition: background-color 0.2s;
}
.dropdown-item:hover {
background-color: #f9fafb;
}
```
### 响应式设计
- **桌面端**: 完整的按钮组和下拉菜单
- **平板端**: 保持完整功能,调整按钮大小
- **移动端**: 简化为单个复制按钮,长按显示选项
### 无障碍支持
- **键盘导航**: 支持 Tab 键切换和 Enter 键激活
- **屏幕阅读器**: 提供完整的 aria-label 和 title 属性
- **高对比度**: 确保在高对比度模式下可见性
## 测试场景
### 功能测试
- ✅ 有日志时显示复制按钮
- ✅ 无日志时隐藏复制按钮
- ✅ 详细格式复制正确
- ✅ 简单格式复制正确
- ✅ 复制状态反馈正确
- ✅ 下拉菜单交互正常
### 兼容性测试
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
### 错误处理测试
- ✅ 剪贴板权限被拒绝
- ✅ 剪贴板API不可用
- ✅ 网络错误情况
---
通过这个复制功能,用户可以轻松地复制和分享模板导入日志,大大提升了调试和问题解决的效率。