mxivideo/docs/COPY_FEATURE_DEMO.md

# 模板导入日志复制功能演示

## 功能演示

### 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不可用
- ✅ 网络错误情况

---

通过这个复制功能，用户可以轻松地复制和分享模板导入日志，大大提升了调试和问题解决的效率。