441 lines
14 KiB
Markdown
441 lines
14 KiB
Markdown
# 文件内容区显示问题修复（Bug Fixes）
|
||
|
||
---
|
||
|
||
## 修复记录：Excel/Word 预览失败
|
||
|
||
### 修复日期
|
||
2026-02-16
|
||
|
||
### 问题描述
|
||
用户点击 Excel 文件时，预览区域显示错误：
|
||
```
|
||
❌ Excel 预览失败
|
||
Failed to fetch
|
||
💡 提示：尝试使用外部应用打开文件
|
||
```
|
||
|
||
### 根本原因
|
||
在 Wails 应用中，前端通过 `fetch` 请求本地 HTTP 服务器 (`http://localhost:18765`) 获取 Office 文件内容。这种方式在 Wails 的 webview 环境中可能会失败：
|
||
1. Wails webview 对外部 HTTP 请求有限制
|
||
2. 本地文件服务器的启动时机可能存在竞态条件
|
||
3. 网络请求在桌面应用环境中不够可靠
|
||
|
||
### 解决方案
|
||
改用 Wails IPC 机制直接读取二进制文件，不再依赖本地 HTTP 服务器。
|
||
|
||
### 修改的文件
|
||
|
||
#### 1. 后端：添加二进制文件读取 API
|
||
**位置：** `internal/filesystem/service.go`
|
||
|
||
添加 `ReadFileAsBase64` 方法：
|
||
```go
|
||
// ReadFileAsBase64 读取二进制文件并返回 base64 编码的字符串
|
||
func (s *FileSystemService) ReadFileAsBase64(path string) (string, error) {
|
||
// 路径验证
|
||
if err := s.validatePath(path); err != nil {
|
||
return "", err
|
||
}
|
||
|
||
// 检查文件扩展名是否在允许列表中
|
||
ext := strings.ToLower(filepath.Ext(path))
|
||
if !s.fileTypeManager.IsAllowed(ext) {
|
||
return "", fmt.Errorf("不允许的文件类型: %s", ext)
|
||
}
|
||
|
||
// 限制文件大小（最大 100MB）
|
||
const maxFileSize = 100 * 1024 * 1024
|
||
// ... 读取文件并编码为 base64 ...
|
||
|
||
// 返回 data URI 格式
|
||
return fmt.Sprintf("data:%s;base64,%s", mimeType, encoded), nil
|
||
}
|
||
```
|
||
|
||
#### 2. 后端：暴露 API 接口
|
||
**位置：** `app.go`
|
||
|
||
```go
|
||
// ReadFileAsBase64 读取二进制文件并返回 base64 编码的字符串
|
||
func (a *App) ReadFileAsBase64(path string) (string, error) {
|
||
return a.filesystem.ReadFileAsBase64(path)
|
||
}
|
||
```
|
||
|
||
#### 3. 前端：添加 API 调用
|
||
**位置：** `frontend/src/api/system.ts`
|
||
|
||
```typescript
|
||
export async function readFileAsBase64(path: string): Promise<string> {
|
||
if (!window.go?.main?.App?.ReadFileAsBase64) {
|
||
throw new Error('ReadFileAsBase64 API 不可用')
|
||
}
|
||
return await window.go.main.App.ReadFileAsBase64(path)
|
||
}
|
||
```
|
||
|
||
#### 4. 前端：修改预览函数
|
||
**位置：** `frontend/src/components/FileSystem/components/FileEditorPanel.vue`
|
||
|
||
修改前（通过 HTTP 服务器）：
|
||
```javascript
|
||
const response = await fetch(`${serverURL}/localfs/${encodedPath}`)
|
||
const blob = await response.blob()
|
||
```
|
||
|
||
修改后（通过 Wails IPC）：
|
||
```javascript
|
||
// 直接通过 Wails API 读取文件（base64 编码）
|
||
const dataUri = await readFileAsBase64(filePath)
|
||
|
||
// 将 data URI 转换为 Blob
|
||
const response = await fetch(dataUri)
|
||
const blob = await response.blob()
|
||
```
|
||
|
||
### 优点
|
||
- **更可靠**：直接通过 Wails IPC 通信，不依赖网络请求
|
||
- **更安全**：在后端进行文件类型验证和大小限制
|
||
- **更简洁**：移除了复杂的重试逻辑和错误处理
|
||
|
||
### 测试验证
|
||
- [x] Excel 文件预览正常显示
|
||
- [x] Word 文件预览正常显示
|
||
- [x] 文件大小限制生效
|
||
- [x] 不允许的文件类型被正确拒绝
|
||
|
||
---
|
||
|
||
## 修复记录：文件内容区状态管理
|
||
|
||
### 修复日期
|
||
2026-01-28
|
||
|
||
## 问题描述
|
||
|
||
用户报告了三个问题：
|
||
1. **闪烁问题**：打开新的目录或文件后，整个文件管理区域闪烁刷新
|
||
2. **文件名不显示**：文件内容区上面之前有文件名现在没有了
|
||
3. **切换目录后文件名消失**：点击切换到别的目录后，文件名消失了
|
||
4. **二进制文件乱码**：点击没有后缀的文件时，加载了一堆乱码字符（实际是二进制文件）
|
||
|
||
## 根本原因
|
||
|
||
### 问题1：函数名错误
|
||
在计算属性 `isFileInCurrentDirectory` 中使用了不存在的 `normalizePath` 函数，应该使用 `normalizeFilePath`。这导致了运行时错误，使得计算失败并返回空值。
|
||
|
||
**错误代码：**
|
||
```javascript
|
||
return normalizePath(fileDir) === normalizePath(filePath.value)
|
||
```
|
||
|
||
### 问题2：频繁的计算和重新渲染
|
||
- `isFileInCurrentDirectory` 计算属性频繁调用 `normalizeFilePath`，性能较差
|
||
- `listDirectory` 函数在目录切换时立即清空 `selectedFileItem`，导致视觉闪烁
|
||
|
||
## 修复方案
|
||
|
||
### 修复1：使用正确的函数名
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:1437-1449`
|
||
|
||
**修复内容：**
|
||
```javascript
|
||
// 判断当前打开的文件是否在当前目录中（优化性能，减少计算）
|
||
const isFileInCurrentDirectory = computed(() => {
|
||
if (!selectedFilePath.value || !filePath.value) return false
|
||
|
||
// 提取文件的父目录
|
||
const lastBackslash = selectedFilePath.value.lastIndexOf('\\')
|
||
const lastSlash = selectedFilePath.value.lastIndexOf('/')
|
||
const lastSeparator = Math.max(lastBackslash, lastSlash)
|
||
|
||
if (lastSeparator === -1) return false
|
||
|
||
const fileDir = selectedFilePath.value.substring(0, lastSeparator)
|
||
|
||
// 直接比较路径，避免频繁调用 normalizeFilePath
|
||
// 只在必要时才进行路径标准化
|
||
const fileDirNormalized = fileDir.replace(/\\/g, '/').replace(/\/$/, '')
|
||
const currentPathNormalized = filePath.value.replace(/\\/g, '/').replace(/\/$/, '')
|
||
|
||
return fileDirNormalized.toLowerCase() === currentPathNormalized.toLowerCase()
|
||
})
|
||
```
|
||
|
||
**改进点：**
|
||
- 不再调用 `normalizeFilePath` 函数，改用简单的字符串替换
|
||
- 性能优化：直接进行字符串比较而不是函数调用
|
||
- 统一路径格式：将反斜杠转换为正斜杠，并移除尾部斜杠
|
||
- 忽略大小写：使用 `toLowerCase()` 进行大小写不敏感比较
|
||
|
||
### 修复2：添加错误处理
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:1452-1473`
|
||
|
||
**修复内容：**
|
||
```javascript
|
||
const currentFileName = computed(() => {
|
||
if (isBrowsingZip.value && selectedFilePath.value) {
|
||
const parts = selectedFilePath.value.split('/')
|
||
return parts[parts.length - 1] || parts[parts.length - 2] || ''
|
||
}
|
||
if (selectedFilePath.value) {
|
||
try {
|
||
if (isFileInCurrentDirectory.value) {
|
||
return getFileName(selectedFilePath.value)
|
||
} else {
|
||
return selectedFilePath.value
|
||
}
|
||
} catch (error) {
|
||
debugWarn('[currentFileName] 计算失败，返回文件名:', error)
|
||
return getFileName(selectedFilePath.value)
|
||
}
|
||
}
|
||
return ''
|
||
})
|
||
```
|
||
|
||
**改进点：**
|
||
- 添加 try-catch 错误处理
|
||
- 即使计算失败也能返回基本的文件名
|
||
- 防止因计算错误导致文件名完全不显示
|
||
|
||
### 修复3：减少视觉闪烁
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:847-883`
|
||
|
||
**修复内容：**
|
||
```javascript
|
||
const listDirectory = async () => {
|
||
if (!filePath.value) return
|
||
|
||
if (isBrowsingZip.value && filePath.value !== originalPathBeforeZip.value) {
|
||
debugLog('检测到路径切换，退出 ZIP 模式')
|
||
exitZipMode()
|
||
}
|
||
|
||
addToHistory(filePath.value)
|
||
pushToNavigationHistory(filePath.value)
|
||
fileLoading.value = true
|
||
try {
|
||
fileList.value = await listDir(filePath.value)
|
||
|
||
// 目录加载完成后，检查原选中的文件是否还在新目录中
|
||
// 如果不在，清空 selectedFileItem，避免视觉闪烁
|
||
if (selectedFileItem.value) {
|
||
const stillExists = fileList.value.some(f => f.path === selectedFileItem.value.path)
|
||
if (!stillExists) {
|
||
selectedFileItem.value = null
|
||
}
|
||
}
|
||
|
||
if (selectedFilePath.value) {
|
||
debugLog('[listDirectory] 目录已切换，保留原文件引用:', selectedFilePath.value)
|
||
}
|
||
} catch (error) {
|
||
Message.error('列出目录失败: ' + error.message)
|
||
selectedFileItem.value = null
|
||
} finally {
|
||
fileLoading.value = false
|
||
}
|
||
}
|
||
```
|
||
|
||
**改进点：**
|
||
- 延迟清空 `selectedFileItem`，等到新目录加载完成后再检查
|
||
- 如果原文件仍在新目录中，保持选中状态
|
||
- 如果原文件不在新目录中，再清空选中状态
|
||
- 减少了不必要的视觉闪烁
|
||
|
||
### 修复4：优化样式
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:3389-3406`
|
||
|
||
**修复内容：**
|
||
```css
|
||
.panel-filename {
|
||
font-weight: normal;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 500px; /* 从 300px 增加到 500px */
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.panel-filename.file-outside-dir {
|
||
color: rgb(var(--warning-6));
|
||
font-weight: 500;
|
||
}
|
||
|
||
.file-location-hint {
|
||
font-size: 11px;
|
||
color: var(--color-text-3);
|
||
font-weight: normal;
|
||
white-space: nowrap;
|
||
display: inline;
|
||
}
|
||
```
|
||
|
||
**改进点：**
|
||
- 增加最大宽度到 500px，可以显示更长的路径
|
||
- 添加 `display: inline-block` 确保布局正确
|
||
- 提示文字使用 `display: inline` 避免换行
|
||
|
||
### 修复5：切换目录时保留文件名
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:958-967`
|
||
|
||
**问题描述：**
|
||
当用户点击切换到其他目录时，文件名消失了。这是因为在 `selectFile` 函数中，当点击目录时会清空 `selectedFilePath`。
|
||
|
||
**修复内容：**
|
||
```javascript
|
||
if (item.is_dir) {
|
||
// 目录：更新路径并列出内容
|
||
// 注意：不要清空 selectedFilePath，保留原文件内容以便跨目录编辑
|
||
filePath.value = path
|
||
addToHistory(path)
|
||
listDirectory()
|
||
}
|
||
```
|
||
|
||
**同时修复收藏目录跳转：**
|
||
**位置：** `frontend/src/components/FileSystem.vue:2866-2875`
|
||
|
||
```javascript
|
||
if (fav && fav.is_dir) {
|
||
// 目录：列出内容
|
||
// 注意：不要清空 selectedFilePath，保留原文件内容以便跨目录编辑
|
||
filePath.value = path
|
||
addToHistory(path)
|
||
listDirectory()
|
||
}
|
||
```
|
||
|
||
**改进点：**
|
||
- 移除了 `selectedFilePath.value = ''` 语句
|
||
- 保留了跨目录编辑的文件内容
|
||
- 用户可以在浏览其他目录时继续编辑原文件
|
||
|
||
### 修复6：二进制文件检测
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:2008-2045`
|
||
|
||
**问题描述：**
|
||
点击没有后缀的文件时，加载了一堆乱码字符。这些文件实际上是二进制文件，但代码没有检测，直接当作文本显示。
|
||
|
||
**修复内容：**
|
||
添加二进制内容检测逻辑：
|
||
```javascript
|
||
// 检查前 1000 个字符中二进制字符的比例
|
||
const checkLength = Math.min(content.length, 1000)
|
||
let binaryCharCount = 0
|
||
for (let i = 0; i < checkLength; i++) {
|
||
const charCode = content.charCodeAt(i)
|
||
// 检查是否为空字节或其他控制字符（除了常见的换行符、制表符等）
|
||
if (charCode === 0 || (charCode < 32 && charCode !== 9 && charCode !== 10 && charCode !== 13)) {
|
||
binaryCharCount++
|
||
}
|
||
}
|
||
|
||
// 如果二进制字符超过 5%，认为是二进制文件
|
||
const binaryRatio = binaryCharCount / checkLength
|
||
if (binaryRatio > 0.05) {
|
||
// 显示友好的二进制文件提示信息
|
||
isBinaryFile.value = true
|
||
isEditMode.value = false
|
||
// ... 显示提示信息 ...
|
||
return
|
||
}
|
||
```
|
||
|
||
**改进点：**
|
||
- 自动检测二进制内容（不依赖文件扩展名）
|
||
- 检查前 1000 个字符中的二进制字符比例
|
||
- 阈值设置为 5%，平衡误报和漏报
|
||
- 显示友好的提示信息，而不是乱码
|
||
- 支持有后缀和无后缀的二进制文件检测
|
||
|
||
**检测算法：**
|
||
- 空字节（charCode === 0）肯定是二进制
|
||
- 控制字符（charCode < 32）除了 Tab(9)、LF(10)、CR(13) 外都是二进制
|
||
- 如果二进制字符比例超过 5%，判定为二进制文件
|
||
|
||
## 技术要点
|
||
|
||
1. **函数命名一致性**：确保所有函数调用都使用正确的名称
|
||
2. **性能优化**：避免在计算属性中进行昂贵的操作
|
||
3. **延迟更新**：等到数据加载完成后再更新UI状态
|
||
4. **错误处理**：在关键路径添加 try-catch，防止连锁失败
|
||
5. **样式优化**：合理的布局和宽度设置，确保内容正确显示
|
||
6. **状态保留**：跨目录操作时保留编辑状态，提升用户体验
|
||
7. **内容检测**：智能检测二进制文件，避免显示乱码
|
||
|
||
## 相关文件
|
||
|
||
- `frontend/src/components/FileSystem.vue` - 主要修改文件
|
||
- `frontend/src/utils/fileUtils.js` - 工具函数（normalizeFilePath 等）
|
||
- `docs/file-content-state-fix.md` - 之前的改进文档
|
||
|
||
### 1. 文件名显示测试
|
||
- [x] 打开文件后，文件名正确显示在内容区标题
|
||
- [x] 切换目录后，文件名仍然显示（如果之前打开了文件）
|
||
- [x] 文件在当前目录时，只显示文件名
|
||
- [x] 文件不在当前目录时，显示完整路径和提示
|
||
|
||
### 2. 性能测试
|
||
- [x] 切换目录时无明显闪烁
|
||
- [x] 打开文件时响应迅速
|
||
- [x] 计算属性不会频繁触发重新渲染
|
||
|
||
### 3. 错误处理测试
|
||
- [x] 即使路径计算失败，文件名仍能显示
|
||
- [x] 控制台不会有运行时错误
|
||
|
||
### 4. 跨目录编辑测试
|
||
- [x] 打开文件A
|
||
- [x] 切换到目录B
|
||
- [x] 文件A的内容和文件名仍然保留
|
||
- [x] 可以继续编辑文件A
|
||
- [x] 保存时正确保存到文件A的原位置
|
||
|
||
### 5. 二进制文件检测测试
|
||
- [x] 打开无后缀的二进制文件，显示友好提示
|
||
- [x] 不会显示乱码字符
|
||
- [x] 检测算法不会误判文本文件
|
||
- [x] 有后缀的二进制文件也能正确识别
|
||
|
||
## 用户体验改进
|
||
|
||
### 修复前
|
||
- ❌ 文件名完全不显示
|
||
- ❌ 切换目录时整个区域闪烁
|
||
- ❌ 控制台有函数未定义错误
|
||
- ❌ 切换目录后文件名消失
|
||
- ❌ 二进制文件显示乱码
|
||
|
||
### 修复后
|
||
- ✅ 文件名正常显示
|
||
- ✅ 切换目录时流畅无闪烁
|
||
- ✅ 性能优化，响应更快
|
||
- ✅ 错误处理更健壮
|
||
- ✅ 切换目录后保留文件名和内容
|
||
- ✅ 二进制文件显示友好提示
|
||
|
||
## 技术要点
|
||
|
||
1. **函数命名一致性**：确保所有函数调用都使用正确的名称
|
||
2. **性能优化**：避免在计算属性中进行昂贵的操作
|
||
3. **延迟更新**：等到数据加载完成后再更新UI状态
|
||
4. **错误处理**：在关键路径添加 try-catch，防止连锁失败
|
||
5. **样式优化**：合理的布局和宽度设置，确保内容正确显示
|
||
|
||
## 相关文件
|
||
|
||
- `frontend/src/components/FileSystem.vue` - 主要修改文件
|
||
- `frontend/src/utils/fileUtils.js` - 工具函数（normalizeFilePath 等）
|
||
- `docs/file-content-state-fix.md` - 之前的改进文档
|