# 结束编辑功能说明

## 功能概述

添加"结束编辑"按钮，点击后调用 WPS SDK 的 `destroy()` 方法销毁文档，释放 WPS 服务器资源。

## 功能特点

### 1. 一键结束
- 点击"结束编辑"按钮
- 确认后自动销毁 WPS 文档
- 关闭编辑对话框

### 2. 安全确认
在执行前弹出确认对话框：
```
⚠️ 结束编辑

确定要结束编辑吗？这将销毁 WPS 文档，未保存的修改将丢失。

[取消]  [确定]
```

### 3. 自动清理
- 调用 WPS SDK 的 `destroy()` 方法
- 清空 `wpsInstance` 实例
- 关闭编辑对话框
- 释放 WPS 服务器资源

## 技术实现

### 核心代码

```typescript
const handleEndEdit = async () => {
  if (!wpsInstance) {
    ElMessage.warning('WPS 编辑器未初始化');
    return;
  }
  
  // 1. 确认对话框
  await ElMessageBox.confirm(
    '确定要结束编辑吗？这将销毁 WPS 文档，未保存的修改将丢失。',
    '结束编辑',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  );
  
  try {
    endingEdit.value = true;
    
    // 2. 显示加载提示
    const loadingMsg = ElMessage({
      message: '正在结束编辑...',
      duration: 0,
      showClose: false
    });
    
    // 3. 调用 WPS SDK 的销毁方法
    if (wpsInstance.destroy) {
      await wpsInstance.destroy();
    }
    
    // 4. 清空实例
    wpsInstance = null;
    
    // 5. 关闭加载提示
    loadingMsg.close();
    
    // 6. 显示成功提示
    ElMessage.success('编辑已结束，文档已销毁');
    
    // 7. 关闭对话框
    setTimeout(() => {
      dialogVisible.value = false;
    }, 1000);
    
  } catch (err) {
    // 错误处理...
  } finally {
    endingEdit.value = false;
  }
};
```

## 工作流程

```
用户点击"结束编辑"
    ↓
显示确认对话框
    ↓
用户确认
    ↓
显示加载提示："正在结束编辑..."
    ↓
调用 wpsInstance.destroy()
    ↓
WPS 销毁文档（释放服务器资源）
    ↓
清空 wpsInstance = null
    ↓
关闭加载提示
    ↓
显示成功提示："编辑已结束，文档已销毁"
    ↓
1 秒后关闭对话框
    ↓
完成！
```

## 界面变化

### 修改前
```
┌─────────────────────────────────────┐
│ 📄 文档名称.docx                    │
│                                     │
│ [🖼️ 复制签名]                       │
└─────────────────────────────────────┘
```

### 修改后
```
┌─────────────────────────────────────┐
│ 📄 文档名称.docx                    │
│                                     │
│ [🖼️ 复制签名] [⭕ 结束编辑]        │
└─────────────────────────────────────┘
```

## WPS SDK destroy() 方法

### 方法说明

```typescript
wpsInstance.destroy(): Promise<void>
```

**功能**：
- 销毁 WPS 文档实例
- 释放 WPS 服务器资源
- 清理临时文件
- 断开与 WPS 服务器的连接

**返回**：
- Promise，成功时 resolve，失败时 reject

### 调用示例

```typescript
// 基本用法
await wpsInstance.destroy();

// 带错误处理
try {
  await wpsInstance.destroy();
  console.log('文档已销毁');
} catch (err) {
  console.error('销毁失败:', err);
}

// 检查方法是否存在
if (wpsInstance.destroy) {
  await wpsInstance.destroy();
} else {
  console.warn('destroy 方法不存在');
}
```

## 使用场景

### 场景 1：审核完成后结束编辑
```
审核文档
    ↓
提交审核结果
    ↓
点击"结束编辑"
    ↓
销毁 WPS 文档
    ↓
关闭对话框
```

### 场景 2：取消编辑
```
打开文档编辑
    ↓
发现不需要编辑
    ↓
点击"结束编辑"
    ↓
销毁 WPS 文档
    ↓
关闭对话框
```

### 场景 3：释放资源
```
长时间编辑
    ↓
暂时不需要编辑
    ↓
点击"结束编辑"
    ↓
释放 WPS 服务器资源
    ↓
需要时重新打开
```

## 确认对话框

```
⚠️ 结束编辑

确定要结束编辑吗？这将销毁 WPS 文档，未保存的修改将丢失。

[取消]  [确定]
```

**重要提示**：
- 销毁文档后无法恢复
- 未保存的修改将丢失
- 建议先保存文档

## 加载提示

```
ℹ️ 正在结束编辑...
```

**显示时机**：
- 点击确定后立即显示
- 持续显示直到操作完成
- 不自动关闭
- 不显示关闭按钮

## 成功提示

```
✅ 编辑已结束，文档已销毁
```

**显示时机**：
- 操作成功完成后
- 自动关闭（3秒）
- 1秒后关闭对话框

## 错误处理

### 1. 编辑器未初始化
```typescript
if (!wpsInstance) {
  ElMessage.warning('WPS 编辑器未初始化');
  return;
}
```

### 2. destroy 方法不存在
```typescript
if (wpsInstance.destroy) {
  await wpsInstance.destroy();
} else {
  console.warn('destroy 方法不存在');
}
```

### 3. 销毁失败
```typescript
catch (err) {
  console.error('[WPS] 结束编辑失败:', err);
  
  // 即使失败也尝试清空实例
  wpsInstance = null;
  
  ElMessage.warning('结束编辑可能未完全成功: ' + err.message);
  
  // 仍然关闭对话框
  setTimeout(() => {
    dialogVisible.value = false;
  }, 1000);
}
```

### 4. 用户取消
```typescript
try {
  await ElMessageBox.confirm(...);
} catch {
  // 用户点击取消，直接返回
  return;
}
```

## 与关闭对话框的区别

### 关闭对话框（点击 X 或取消）
```typescript
watch(dialogVisible, (val) => {
  if (!val) {
    // 销毁编辑器
    destroyWpsEditor();
  }
});
```

**行为**：
- 调用 `destroyWpsEditor()` 函数
- 清理前端编辑器实例
- 但 WPS 服务器可能仍保留文档

### 结束编辑（点击"结束编辑"按钮）
```typescript
const handleEndEdit = async () => {
  // 调用 WPS SDK 的 destroy 方法
  await wpsInstance.destroy();
  
  // 清空实例
  wpsInstance = null;
  
  // 关闭对话框
  dialogVisible.value = false;
};
```

**行为**：
- 调用 WPS SDK 的 `destroy()` 方法
- 通知 WPS 服务器销毁文档
- 释放服务器资源
- 清理临时文件
- 然后关闭对话框

## 性能考虑

### 1. 操作时间
```
调用 destroy()：1-2 秒
清空实例：< 0.1 秒
关闭对话框：1 秒延迟
总计：2-3 秒
```

### 2. 资源释放
- ✅ WPS 服务器资源
- ✅ 临时文件
- ✅ 网络连接
- ✅ 内存占用

### 3. 优化建议

**减少延迟**：
```typescript
// 不需要等待 1 秒
// setTimeout(() => {
//   dialogVisible.value = false;
// }, 1000);

// 立即关闭
dialogVisible.value = false;
```

**并行操作**：
```typescript
// 同时销毁和显示提示
await Promise.all([
  wpsInstance.destroy(),
  ElMessage.success('编辑已结束')
]);
```

## 调试日志

```
[WPS] 开始结束编辑
[WPS] 调用 destroy 方法
[WPS] destroy 方法调用成功
[WPS] 结束编辑成功
```

**失败日志**：
```
[WPS] 开始结束编辑
[WPS] 调用 destroy 方法
[WPS] 结束编辑失败: Error: ...
```

## 常见问题

### Q1: 结束编辑后还能重新打开吗？
**答**：可以，重新打开对话框会重新初始化 WPS 编辑器。

### Q2: 未保存的修改会丢失吗？
**答**：是的，结束编辑会销毁文档，未保存的修改将丢失。

### Q3: 结束编辑和关闭对话框有什么区别？
**答**：
- **结束编辑**：调用 WPS SDK 销毁文档，释放服务器资源
- **关闭对话框**：只清理前端实例，服务器可能仍保留文档

### Q4: 结束编辑需要多长时间？
**答**：通常 2-3 秒，取决于网络速度。

### Q5: 结束编辑失败怎么办？
**答**：即使失败，也会清空前端实例并关闭对话框。

### Q6: 可以撤销结束编辑吗？
**答**：不可以，销毁后无法恢复。

## 安全考虑

### 1. 确认对话框
防止误操作：
```typescript
await ElMessageBox.confirm(
  '确定要结束编辑吗？这将销毁 WPS 文档，未保存的修改将丢失。',
  '结束编辑',
  { type: 'warning' }
);
```

### 2. 状态检查
确保编辑器已初始化：
```typescript
if (!wpsInstance) {
  ElMessage.warning('WPS 编辑器未初始化');
  return;
}
```

### 3. 错误容忍
即使失败也清理资源：
```typescript
catch (err) {
  // 即使失败也尝试清空实例
  wpsInstance = null;
  
  // 仍然关闭对话框
  dialogVisible.value = false;
}
```

## 总结

### 核心功能
1. ✅ **一键结束**：点击按钮即可
2. ✅ **安全确认**：防止误操作
3. ✅ **释放资源**：调用 WPS SDK 销毁文档
4. ✅ **自动关闭**：操作完成后关闭对话框

### 实现步骤
```
1. 确认操作
2. 调用 wpsInstance.destroy()
3. 清空实例
4. 关闭对话框
```

### 用户操作
```
点击"结束编辑" → 确认 → 等待 2-3 秒 → 对话框关闭
```

### 优势
- ✅ 释放 WPS 服务器资源
- ✅ 清理临时文件
- ✅ 防止资源泄漏
- ✅ 用户体验好

现在用户可以通过"结束编辑"按钮主动销毁 WPS 文档，释放服务器资源！