intelligent-etmf-system-web/结束编辑功能说明.md

结束编辑功能说明

功能概述

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

功能特点

1. 一键结束

• 点击"结束编辑"按钮
• 确认后自动销毁 WPS 文档
• 关闭编辑对话框

2. 安全确认

在执行前弹出确认对话框：

⚠️ 结束编辑

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

[取消]  [确定]

3. 自动清理

• 调用 WPS SDK 的 destroy() 方法
• 清空 wpsInstance 实例
• 关闭编辑对话框
• 释放 WPS 服务器资源

技术实现

核心代码

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() 方法

方法说明

wpsInstance.destroy(): Promise<void>

功能：

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

返回：

• Promise，成功时 resolve，失败时 reject

调用示例

// 基本用法
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. 编辑器未初始化

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

2. destroy 方法不存在

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

3. 销毁失败

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

4. 用户取消

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

与关闭对话框的区别

关闭对话框（点击 X 或取消）

watch(dialogVisible, (val) => {
  if (!val) {
    // 销毁编辑器
    destroyWpsEditor();
  }
});

行为：

• 调用 destroyWpsEditor() 函数
• 清理前端编辑器实例
• 但 WPS 服务器可能仍保留文档

结束编辑（点击"结束编辑"按钮）

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. 优化建议

减少延迟：

// 不需要等待 1 秒
// setTimeout(() => {
//   dialogVisible.value = false;
// }, 1000);

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

并行操作：

// 同时销毁和显示提示
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. 确认对话框

防止误操作：

await ElMessageBox.confirm(
  '确定要结束编辑吗？这将销毁 WPS 文档，未保存的修改将丢失。',
  '结束编辑',
  { type: 'warning' }
);

2. 状态检查

确保编辑器已初始化：

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

3. 错误容忍

即使失败也清理资源：

catch (err) {
  // 即使失败也尝试清空实例
  wpsInstance = null;
  
  // 仍然关闭对话框
  dialogVisible.value = false;
}

总结

核心功能

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

实现步骤

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

用户操作

点击"结束编辑" → 确认 → 等待 2-3 秒 → 对话框关闭

优势

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

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