intelligent-etmf-system-web/拖拽插入用户名功能说明.md

拖拽插入用户名功能说明

功能概述

在文档审核对话框中，可以通过拖拽按钮将当前用户的昵称插入到 WPS 文档的任意位置。

使用方法

1. 找到拖拽按钮

• 打开文档审核对话框
• 在顶部工具栏找到"拖我到文档中"按钮
• 按钮上有用户图标

2. 拖拽插入

1. 按住鼠标左键点击"拖我到文档中"按钮
2. 保持按住，拖动鼠标到 WPS 编辑器中
3. 移动到想要插入的位置
4. 松开鼠标，用户名自动插入

3. 插入位置

Word 文档（.docx/.doc）

• 插入到当前光标位置
• 建议先在文档中点击要插入的位置
• 插入后可以继续编辑

Excel 表格（.xlsx/.xls）

• 插入到当前选中的单元格
• 会替换单元格原有内容
• 插入后可以修改或移动

PowerPoint 演示（.pptx/.ppt）

• 插入到当前选中的文本框
• 如果没有选中文本框，会提示"请先选择一个文本框"
• 需要先点击一个文本框，然后再拖拽

PDF 文档（.pdf）

• 不支持插入文本
• 会提示"PDF 文档不支持插入文本"

功能特点

1. 自动获取用户名

• 自动读取当前登录用户的昵称
• 无需手动输入
• 确保信息准确

2. 拖拽式操作

• 直观的拖拽交互
• 精确控制插入位置
• 符合用户习惯

3. 智能适配

• 根据文档类型自动选择插入方式
• Word：文本插入
• Excel：单元格赋值
• PPT：文本框追加

4. 视觉反馈

• 按钮有移动光标样式
• 拖拽时光标变为抓取状态
• 插入成功后显示提示消息

使用场景

场景 1：文档审核签名

审核人：[拖拽插入用户名]
审核时间：2025-12-29
审核意见：通过

场景 2：批注标记

[拖拽插入用户名] 于 2025-12-29 批注：
此处需要修改...

场景 3：表格填写

姓名	部门	审核意见
[拖拽插入]	技术部	通过

场景 4：幻灯片署名

报告人：[拖拽插入用户名]
日期：2025-12-29

技术实现

拖拽事件处理

<el-button 
  draggable="true"
  @dragstart="handleUserNameDragStart"
  @dragend="handleUserNameDragEnd"
>
  拖我到文档中
</el-button>

数据传递

// 开始拖拽时设置数据
const handleUserNameDragStart = (e: DragEvent) => {
  const userName = userStore.userName || '当前用户';
  e.dataTransfer!.setData('text/plain', userName);
};

文本插入

Word 文档

const selection = await app.ActiveDocument.Application.Selection;
await selection.TypeText(userName);

Excel 表格

const activeCell = await app.ActiveCell;
await activeCell.put_Value(userName);

PowerPoint

const selection = await app.ActiveWindow.Selection;
const textRange = await selection.TextRange;
await textRange.InsertAfter(userName);

注意事项

1. WPS 编辑器必须已初始化

• 如果编辑器未加载，会提示"WPS 编辑器未初始化"
• 等待编辑器加载完成后再拖拽

2. Word 文档需要先定位光标

• 在拖拽前，先在文档中点击要插入的位置
• 否则会插入到默认位置（通常是文档开头）

3. Excel 需要选中单元格

• 拖拽前先点击要插入的单元格
• 插入会替换单元格原有内容

4. PowerPoint 需要选中文本框

• 必须先点击一个文本框
• 如果没有选中文本框，会提示错误
• 可以先创建一个文本框，然后再拖拽

5. PDF 不支持编辑

• PDF 是只读格式
• 无法插入文本
• 会提示"PDF 文档不支持插入文本"

6. 用户名来源

• 从 userStore.userName 获取
• 如果未设置，显示"当前用户"
• 确保用户已登录

常见问题

Q1: 拖拽后没有反应？

可能原因：

1. WPS 编辑器未初始化
2. 没有正确松开鼠标
3. 拖拽到了编辑器外部

解决方法：

1. 等待编辑器加载完成
2. 确保在编辑器内部松开鼠标
3. 重新拖拽

Q2: 插入位置不对？

原因：

• Word：光标位置不正确
• Excel：未选中目标单元格
• PPT：未选中文本框

解决方法：

• Word：先点击要插入的位置
• Excel：先选中目标单元格
• PPT：先点击文本框

Q3: PowerPoint 提示"请先选择一个文本框"？

原因：

• 没有选中任何文本框
• 或者选中的不是文本框

解决方法：

1. 点击幻灯片中的文本框
2. 确保文本框被选中（有边框）
3. 然后再拖拽按钮

Q4: 显示"当前用户"而不是真实姓名？

原因：

• 用户信息未正确加载
• userStore.userName 为空

解决方法：

1. 检查用户是否已登录
2. 刷新页面重新加载用户信息
3. 联系管理员检查用户数据

Q5: 可以拖拽多次吗？

答案：

• 可以！每次拖拽都会插入一次用户名
• 可以在文档的不同位置多次插入
• 每次插入都是独立的文本

与图片拖拽的区别

特性	用户名拖拽	图片拖拽
拖拽源	按钮	外部文件
数据类型	文本	图片
插入方式	文本插入	图片插入
Word	光标位置	光标位置
Excel	单元格	浮动图片
PPT	文本框	幻灯片
PDF	不支持	不支持

浏览器兼容性

浏览器	支持情况	备注
Chrome 90+	✅ 完全支持	推荐使用
Edge 90+	✅ 完全支持	推荐使用
Firefox 88+	✅ 完全支持
Safari 14+	✅ 完全支持
IE 11	❌ 不支持	不支持拖放 API

未来改进

计划中的功能

• 支持拖拽其他用户信息（部门、职位等）
• 支持自定义拖拽文本
• 支持拖拽时间戳
• 支持拖拽签名图片
• 支持批量插入（姓名+时间）

用户体验优化

• 拖拽时显示预览
• 插入位置高亮提示
• 支持键盘快捷键
• 支持右键菜单插入

示例代码

完整的拖拽流程

// 1. 开始拖拽
handleUserNameDragStart(e) {
  const userName = userStore.userName || '当前用户';
  e.dataTransfer.setData('text/plain', userName);
  isDraggingUserName.value = true;
}

// 2. 拖拽到编辑器
handleDrop(e) {
  const userName = e.dataTransfer.getData('text/plain');
  if (isDraggingUserName.value && userName) {
    await insertUserNameToWps(userName);
  }
}

// 3. 插入到文档
async insertUserNameToWps(userName) {
  const app = await wpsInstance.Application;
  const selection = await app.ActiveDocument.Application.Selection;
  await selection.TypeText(userName);
}

总结

拖拽插入用户名功能让文档审核更加便捷：

• ✅ 无需手动输入
• ✅ 精确控制位置
• ✅ 自动获取用户信息
• ✅ 支持多种文档类型
• ✅ 直观的拖拽操作

现在就可以试试拖拽按钮到文档中！