321 lines
11 KiB
Markdown
321 lines
11 KiB
Markdown
# 文件操作增强：多选 / 复制粘贴剪切 / 移动
|
||
|
||
> 状态：方案设计完成，待实施
|
||
> 日期：2026-04-12
|
||
|
||
## 一、现状
|
||
|
||
| 功能 | 前端 | 后端 | 状态 |
|
||
|------|------|------|------|
|
||
| **多选** (Ctrl+Click / Shift+Click) | 无，单选 `selectedFileItem: FileItem \| null` | N/A | **缺失** |
|
||
| **全选** (Ctrl+A) | 无 | N/A | **缺失** |
|
||
| **复制文件** (Ctrl+C) | TODO stub（弹"暂未实现"） | 无 API | **缺失** |
|
||
| **剪切文件** (Ctrl+X) | 无 | 无 API | **缺失** |
|
||
| **粘贴文件** (Ctrl+V) | 仅支持图片粘贴 | 无 API | **部分** |
|
||
| **移动文件** | TODO stub（弹"暂未实现"） | 无 API | **缺失** |
|
||
| **重命名** (F2) | 完整 | 完整 | 已完成 |
|
||
| **删除** (Del) | 完整（含回收站） | 完整 | 已完成 |
|
||
| **右键菜单 Copy/Cut/Paste** | 无菜单项 | N/A | 缺失 |
|
||
|
||
### 关键发现
|
||
|
||
1. `useFileOperations.ts` 中 `copy()` 和 `move()` 已有函数签名但都是 TODO stub
|
||
2. 回收站模块 (`recycle_bin.go`) 内部有 `copyRecursively`/`copyFile`/`copyDirectory` 私有方法可复用
|
||
3. 快捷键已有 F5/F2/Del/Ctrl+S 等 12 个，缺 Ctrl+C/V/X/A 四个
|
||
4. 右键菜单只有：新建文件、新建文件夹、系统打开、重命名、删除 — 缺复制/剪切/粘贴/移动
|
||
|
||
## 二、方案架构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 前端 (Vue 3) │
|
||
│ │
|
||
│ 1. 多选状态管理 (selectedFiles: FileItem[]) │
|
||
│ 2. 剪贴板状态 (clipboard: {op, files[]}) │
|
||
│ 3. FileListPanel: Ctrl+Click / Shift+Click │
|
||
│ 4. ContextMenu: +Copy / Cut / Paste 项 │
|
||
│ 5. 快捷键: Ctrl+C / V / X / A │
|
||
└──────────────────┬──────────────────────────┘
|
||
│ window.go.main.App.*
|
||
┌──────────────────▼──────────────────────────┐
|
||
│ 后端 (Go) │
|
||
│ │
|
||
│ 6. App.CopyPath(src, dst) → FileSystemService │
|
||
│ 7. App.MovePath(src, dst) → os.Rename │
|
||
│ 8. 复用 recycle_bin.go 的 copy 辅助函数 │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 三、实施步骤
|
||
|
||
### Step 1：后端 — 新增 Copy / Move API
|
||
|
||
**文件**: `internal/filesystem/service.go`
|
||
|
||
新增两个公开方法（复用已有的私有 copy 函数）：
|
||
|
||
```go
|
||
// CopyPath 复制文件或目录
|
||
func (s *FileSystemService) CopyPath(src, dst string) error {
|
||
return copyRecursively(src, dst)
|
||
}
|
||
|
||
// MovePath 移动文件或目录（跨盘需 copy+delete）
|
||
func (s *FileSystemService) MovePath(src, dst string) error {
|
||
// 同盘: os.Rename (原子操作)
|
||
// 跨盘: copyRecursively + DeletePathWithContext
|
||
}
|
||
```
|
||
|
||
**文件**: `app.go`
|
||
|
||
新增两个绑定方法 + 请求结构体：
|
||
|
||
```go
|
||
type CopyMoveRequest struct {
|
||
Src string `json:"src"`
|
||
Dst string `json:"dst"`
|
||
}
|
||
|
||
func (a *App) CopyPath(req CopyMoveRequest) error {
|
||
return a.filesystem.CopyPath(req.Src, req.Dst)
|
||
}
|
||
|
||
func (a *App) MovePath(req CopyMoveRequest) error {
|
||
return a.filesystem.MovePath(req.Src, req.Dst)
|
||
}
|
||
```
|
||
|
||
**文件**: `frontend/src/api/system.ts`
|
||
|
||
```ts
|
||
export async function copyPath(src: string, dst: string): Promise<void>
|
||
export async function movePath(src: string, dst: string): Promise<void>
|
||
```
|
||
|
||
### Step 2：前端 — 多选状态管理
|
||
|
||
**文件**: `frontend/src/components/FileSystem/index.vue`
|
||
|
||
核心改动：`selectedFileItem: FileItem | null` → `selectedFiles: FileItem[]`
|
||
|
||
```ts
|
||
// 改前
|
||
const selectedFileItem = ref<FileItem | null>(null)
|
||
|
||
// 改后
|
||
const selectedFiles = ref<FileItem[]>([])
|
||
const selectedFileItem = computed(() => selectedFiles.value[0] || null) // 兼容现有单选逻辑
|
||
```
|
||
|
||
**文件**: `frontend/src/types/file-system.ts`
|
||
|
||
`FileListPanelConfig.selectedFileItem` 类型改为 `selectedFiles: FileItem[]`
|
||
|
||
**文件**: `frontend/src/components/FileSystem/components/FileListPanel.vue`
|
||
|
||
改造行点击支持多选：
|
||
|
||
```ts
|
||
const handleRowClick = (record: FileItem, ev: MouseEvent) => {
|
||
if (target.closest('.arco-btn') || target.closest('.arco-input-wrapper')) return
|
||
|
||
if (ev.ctrlKey || ev.metaKey) {
|
||
emit('toggleSelect', record) // Ctrl+Click: 切换选中
|
||
} else if (ev.shiftKey && props.selectedFiles.length > 0) {
|
||
emit('rangeSelect', record) // Shift+Click: 范围选择
|
||
} else {
|
||
emit('fileClick', record) // 普通点击: 单选
|
||
}
|
||
}
|
||
```
|
||
|
||
`getRowClassName` 改为匹配数组：
|
||
```ts
|
||
const getRowClassName = (record: FileItem): string => [
|
||
props.selectedFiles.some(f => f.path === record.path) && 'row-selected',
|
||
props.config.editingFilePath === record.path && 'row-editing'
|
||
].filter(Boolean).join(' ')
|
||
```
|
||
|
||
Props 变更：
|
||
```ts
|
||
// 改前
|
||
selectedFileItem: FileItem | null
|
||
// 改后
|
||
selectedFiles: FileItem[]
|
||
```
|
||
|
||
新增 Emits:
|
||
```ts
|
||
(e: 'toggleSelect', file: FileItem): void
|
||
(e: 'rangeSelect', file: FileItem): void
|
||
```
|
||
|
||
### Step 3：前端 — 剪贴板状态（应用级）
|
||
|
||
**新建文件**: `frontend/src/components/FileSystem/composables/useClipboard.ts`
|
||
|
||
```ts
|
||
type ClipboardOp = 'copy' | 'cut'
|
||
|
||
interface ClipboardState {
|
||
op: ClipboardOp | null
|
||
files: FileItem[] // 源文件列表
|
||
sourceDir: string // 来源目录
|
||
}
|
||
|
||
const clipboard = reactive<ClipboardState>({
|
||
op: null, files: [], sourceDir: '',
|
||
})
|
||
|
||
export function useClipboard() {
|
||
const copy = (files: FileItem[]) => { /* ... */ }
|
||
const cut = (files: FileItem[]) => { /* ... */ }
|
||
const clear = () => { clipboard.op = null; clipboard.files = [] }
|
||
const canPaste = computed(() => clipboard.op !== null && clipboard.files.length > 0)
|
||
return { clipboard, copy, cut, clear, canPaste }
|
||
}
|
||
```
|
||
|
||
### Step 4：前端 — 右键菜单扩展
|
||
|
||
**文件**: `frontend/src/components/FileSystem/components/ContextMenu.vue`
|
||
|
||
文件菜单追加 Copy / Cut：
|
||
```vue
|
||
<div class="context-menu-item" @click="handleCopy">
|
||
<span>📋</span><span>复制</span><span class="shortcut">Ctrl+C</span>
|
||
</div>
|
||
<div class="context-menu-item" @click="handleCut">
|
||
<span>✂️</span><span>剪切</span><span class="shortcut">Ctrl+X</span>
|
||
</div>
|
||
<div class="context-menu-divider"></div>
|
||
<!-- 现有重命名/删除保持不变 -->
|
||
```
|
||
|
||
空白区域菜单追加 Paste：
|
||
```vue
|
||
<div class="context-menu-divider"></div>
|
||
<div class="context-menu-item" :disabled="!canPaste" @click="handlePaste">
|
||
<span>📌</span><span>粘贴</span><span class="shortcut">Ctrl+V</span>
|
||
</div>
|
||
```
|
||
|
||
新增 Props: `selectedCount?: number`, `canPaste?: boolean`
|
||
新增 Emits: `'action': 'copy' | 'cut' | 'paste'`
|
||
|
||
### Step 5：前端 — 快捷键扩展
|
||
|
||
**文件**: `frontend/src/components/FileSystem/index.vue` 的 `handleKeyDown`
|
||
|
||
在 Delete 处理之后追加：
|
||
|
||
```ts
|
||
// Ctrl+C 复制
|
||
if ((event.ctrlKey || event.metaKey) && event.key === 'c' && selectedFiles.value.length > 0) {
|
||
event.preventDefault(); handleCopy(); return
|
||
}
|
||
// Ctrl+X 剪切
|
||
if ((event.ctrlKey || event.metaKey) && event.key === 'x' && selectedFiles.value.length > 0) {
|
||
event.preventDefault(); handleCut(); return
|
||
}
|
||
// Ctrl+V 粘贴
|
||
if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
|
||
event.preventDefault(); await handlePaste(); return
|
||
}
|
||
// Ctrl+A 全选
|
||
if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
|
||
event.preventDefault()
|
||
selectedFiles.value = [...fileList.value]
|
||
return
|
||
}
|
||
```
|
||
|
||
### Step 6：前端 — 操作执行逻辑
|
||
|
||
**文件**: `frontend/src/components/FileSystem/composables/useFileOperations.ts`
|
||
|
||
实现 `copy()` 和 `move()`（替换 TODO stub）：
|
||
|
||
```ts
|
||
const copy = async (fromPath: string, toPath: string): Promise<void> => {
|
||
await copyPathApi(fromPath, toPath)
|
||
Message.success('复制完成')
|
||
}
|
||
const move = async (fromPath: string, toPath: string): Promise<void> => {
|
||
await movePathApi(fromPath, toPath)
|
||
Message.success('移动完成')
|
||
}
|
||
```
|
||
|
||
**文件**: `frontend/src/components/FileSystem/index.vue`
|
||
|
||
核心处理函数：
|
||
|
||
```ts
|
||
const { clipboard, copy: clipCopy, cut: clipCut, canPaste } = useClipboard()
|
||
|
||
const handleCopy = () => {
|
||
clipCopy(selectedFiles.value)
|
||
Message.info(`已复制 ${selectedFiles.value.length} 项`)
|
||
}
|
||
const handleCut = () => {
|
||
clipCut(selectedFiles.value)
|
||
Message.info(`已剪切 ${selectedFiles.value.length} 项`)
|
||
}
|
||
const handlePaste = async () => {
|
||
for (const file of clipboard.files) {
|
||
const dst = filePath.value + '/' + file.name
|
||
clipboard.op === 'cut'
|
||
? await fileOps.move(file.path, dst)
|
||
: await fileOps.copy(file.path, dst)
|
||
}
|
||
if (clipboard.op === 'cut') clipClear()
|
||
loadDirectory(filePath.value)
|
||
}
|
||
const handleToggleSelect = (file: FileItem) => { /* 切换单项 */ }
|
||
const handleRangeSelect = (file: FileItem) => { /* 范围选择 */ }
|
||
|
||
// handleContextMenuAction 扩展
|
||
case 'copy': handleCopy(); break
|
||
case 'cut': handleCut(); break
|
||
case 'paste': await handlePaste(); break
|
||
```
|
||
|
||
## 四、改动文件清单
|
||
|
||
| 文件 | 改动类型 | 说明 |
|
||
|------|---------|------|
|
||
| `internal/filesystem/service.go` | 修改 | 新增 `CopyPath()`、`MovePath()` |
|
||
| `app.go` | 修改 | 新增绑定方法 + `CopyMoveRequest` 结构体 |
|
||
| `frontend/src/api/system.ts` | 修改 | 新增 `copyPath()`、`movePath()` |
|
||
| `frontend/src/types/file-system.ts` | 修改 | `selectedFileItem` → `selectedFiles` 数组 |
|
||
| `frontend/src/components/FileSystem/composables/useClipboard.ts` | **新建** | 剪贴板 composable |
|
||
| `frontend/src/components/FileSystem/composables/useFileOperations.ts` | 修改 | 实现 copy/move TODO |
|
||
| `frontend/src/components/FileSystem/components/FileListPanel.vue` | 修改 | 多选行点击 + 行样式 |
|
||
| `frontend/src/components/FileSystem/components/ContextMenu.vue` | 修改 | 追加 Copy/Cut/Paste 菜单项 |
|
||
| `frontend/src/components/FileSystem/index.vue` | 修改 | 多选状态 + 快捷键 + 操作函数 |
|
||
|
||
共 **9 个文件**（1 个新建 + 8 个修改）
|
||
|
||
## 五、验证标准
|
||
|
||
1. **Ctrl+Click** 切换单文件选中状态，高亮多行
|
||
2. **Shift+Click** 选中范围文件
|
||
3. **Ctrl+A** 全选当前目录所有文件
|
||
4. **Ctrl+C** 复制选中文件 → 提示"N 项已复制"
|
||
5. **Ctrl+X** 剪切选中文件 → 提示"N 项已剪切"
|
||
6. **Ctrl+V** 在目标目录粘贴 → 文件出现
|
||
7. **右键菜单** 显示 Copy / Cut / Paste（空白区）
|
||
8. **跨目录粘贴** 正确复制到目标路径
|
||
9. **剪切粘贴** 源文件消失（移动效果）
|
||
10. **大文件夹** 复制不卡顿（Go io.Copy 流式）
|
||
|
||
## 六、不做（明确边界）
|
||
|
||
- **拖拽移动文件** — 本轮不做，后续可加
|
||
- **外部文件粘贴** — 不支持从系统资源管理器粘贴到 u-desk（Wails 限制）
|
||
- **进度条** — 大文件复制暂不加进度条
|
||
- **撤销(Ctrl+Z)** — 仅保留编辑器内容重置，不做操作历史撤销
|