# 拖拽插入用户名功能说明

## 功能概述

在文档审核对话框中，可以通过拖拽按钮将当前用户的昵称插入到 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
```

## 技术实现

### 拖拽事件处理
```vue
<el-button 
  draggable="true"
  @dragstart="handleUserNameDragStart"
  @dragend="handleUserNameDragEnd"
>
  拖我到文档中
</el-button>
```

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

### 文本插入

#### Word 文档
```typescript
const selection = await app.ActiveDocument.Application.Selection;
await selection.TypeText(userName);
```

#### Excel 表格
```typescript
const activeCell = await app.ActiveCell;
await activeCell.put_Value(userName);
```

#### PowerPoint
```typescript
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 |

## 未来改进

### 计划中的功能
- [ ] 支持拖拽其他用户信息（部门、职位等）
- [ ] 支持自定义拖拽文本
- [ ] 支持拖拽时间戳
- [ ] 支持拖拽签名图片
- [ ] 支持批量插入（姓名+时间）

### 用户体验优化
- [ ] 拖拽时显示预览
- [ ] 插入位置高亮提示
- [ ] 支持键盘快捷键
- [ ] 支持右键菜单插入

## 示例代码

### 完整的拖拽流程
```typescript
// 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);
}
```

## 总结

拖拽插入用户名功能让文档审核更加便捷：
- ✅ 无需手动输入
- ✅ 精确控制位置
- ✅ 自动获取用户信息
- ✅ 支持多种文档类型
- ✅ 直观的拖拽操作

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