187 lines
5.7 KiB
Markdown
187 lines
5.7 KiB
Markdown
# 文件内容区状态管理改进
|
||
|
||
## 问题描述
|
||
|
||
用户报告：点击文件查看内容后，再点击另一个文件夹，文件内容区仍显示之前文件的内容，看起来与当前目录脱离了关联。
|
||
|
||
## 需求分析
|
||
|
||
经过进一步沟通，用户实际上希望：
|
||
- **切换目录浏览时，保留对原文件的关联**
|
||
- 这样可以方便跨目录编辑文件
|
||
- 例如：在 A 目录打开文件编辑，然后浏览 B 目录复制内容，再回到编辑器继续编辑原文件
|
||
|
||
## 改进方案
|
||
|
||
### 修改 1：优化文件列表选择状态
|
||
|
||
**位置：** `frontend/src/components/FileSystem.vue:843-847`
|
||
|
||
**修改内容：**
|
||
```javascript
|
||
// 切换目录时，保留原文件内容状态，方便跨目录编辑
|
||
// 清空 selectedFileItem，因为原文件可能不在新目录的列表中
|
||
selectedFileItem.value = null
|
||
if (selectedFilePath.value) {
|
||
debugLog('[listDirectory] 目录已切换，保留原文件引用:', selectedFilePath.value)
|
||
}
|
||
```
|
||
|
||
**效果：**
|
||
- 保留 `selectedFilePath` 和 `fileContent`，用户可以继续编辑原文件
|
||
- 清空 `selectedFileItem`，避免在新目录中错误地高亮不存在的文件
|
||
|
||
### 修改 2：增强文件路径显示
|
||
|
||
**位置：**
|
||
- `frontend/src/components/FileSystem.vue:1423-1465` - 新增计算属性
|
||
- `frontend/src/components/FileSystem.vue:192-218` - 更新模板
|
||
- `frontend/src/components/FileSystem.vue:3369-3385` - 新增样式
|
||
|
||
**新增计算属性：**
|
||
|
||
1. **`isFileInCurrentDirectory`** - 判断文件是否在当前目录中
|
||
```javascript
|
||
const isFileInCurrentDirectory = computed(() => {
|
||
if (!selectedFilePath.value || !filePath.value) return false
|
||
const fileDir = selectedFilePath.value.substring(
|
||
0,
|
||
Math.max(
|
||
selectedFilePath.value.lastIndexOf('\\'),
|
||
selectedFilePath.value.lastIndexOf('/')
|
||
)
|
||
)
|
||
return normalizePath(fileDir) === normalizePath(filePath.value)
|
||
})
|
||
```
|
||
|
||
2. **`currentFileFullPath`** - 获取文件完整路径（用于tooltip）
|
||
```javascript
|
||
const currentFileFullPath = computed(() => {
|
||
return selectedFilePath.value || ''
|
||
})
|
||
```
|
||
|
||
3. **更新 `currentFileName`** - 根据文件位置智能显示
|
||
```javascript
|
||
const currentFileName = computed(() => {
|
||
// ... ZIP模式处理 ...
|
||
if (selectedFilePath.value) {
|
||
// 如果文件在当前目录，只显示文件名；否则显示完整路径
|
||
if (isFileInCurrentDirectory.value) {
|
||
return getFileName(selectedFilePath.value)
|
||
} else {
|
||
return selectedFilePath.value // 显示完整路径
|
||
}
|
||
}
|
||
return ''
|
||
})
|
||
```
|
||
|
||
**模板更新：**
|
||
```vue
|
||
<span
|
||
class="panel-filename"
|
||
:class="{ 'file-outside-dir': !isFileInCurrentDirectory && selectedFilePath }"
|
||
>
|
||
{{ currentFileName }}
|
||
<template v-if="!isFileInCurrentDirectory && selectedFilePath">
|
||
<span class="file-location-hint"> (不在当前目录)</span>
|
||
</template>
|
||
</span>
|
||
```
|
||
|
||
**样式更新：**
|
||
```css
|
||
.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;
|
||
}
|
||
```
|
||
|
||
## 用户体验改进
|
||
|
||
### 改进前的问题
|
||
- 切换目录后，文件内容区显示旧文件
|
||
- 只显示文件名（如 "file.txt"）
|
||
- 用户不清楚这个文件在哪里
|
||
- 可能造成混淆
|
||
|
||
### 改进后的效果
|
||
- 切换目录时保留文件内容，方便跨目录编辑 ✅
|
||
- 文件在当前目录时：只显示文件名（简洁）
|
||
- 文件不在当前目录时：
|
||
- 显示完整路径（如 "C:\path\to\file.txt"）
|
||
- 添加 "(不在当前目录)" 提示
|
||
- 文件名以橙色高亮显示
|
||
- 鼠标悬停显示完整路径 tooltip
|
||
|
||
### 使用场景示例
|
||
|
||
1. **场景1：跨目录复制**
|
||
- 用户在 `C:\Project` 打开 `config.ini` 编辑
|
||
- 浏览到 `D:\Templates` 复制配置
|
||
- 回到编辑器，`config.ini` 内容仍然保留，可以继续编辑
|
||
- 标题显示："C:\Project\config.ini (不在当前目录)"，清晰明了
|
||
|
||
2. **场景2：浏览参考文件**
|
||
- 用户在 `C:\Work` 编辑 `main.js`
|
||
- 浏览到 `C:\Docs` 查看 API 文档
|
||
- 回到编辑器，`main.js` 内容保留
|
||
- 用户可以参考文档内容继续编辑
|
||
|
||
## 技术细节
|
||
|
||
### 状态管理
|
||
- `selectedFilePath`: 选中的文件完整路径（保留，不因切换目录而清空）
|
||
- `selectedFileItem`: 文件列表中的选中项（切换目录时清空）
|
||
- `fileContent`: 文件内容（保留，支持跨目录编辑）
|
||
|
||
### 路径标准化
|
||
使用 `normalizePath()` 函数确保路径比较的一致性，处理不同操作系统的路径分隔符差异。
|
||
|
||
### 视觉提示
|
||
- **橙色文字**：警告色，提醒用户注意
|
||
- **完整路径**：让用户知道文件的准确位置
|
||
- **文字提示**："(不在当前目录)" 明确告知状态
|
||
|
||
## 测试建议
|
||
|
||
1. **基本功能测试**
|
||
- 打开文件A查看内容
|
||
- 切换到其他文件夹
|
||
- 验证文件内容仍然保留
|
||
- 验证标题显示完整路径和提示
|
||
|
||
2. **跨目录编辑测试**
|
||
- 在目录A打开文件
|
||
- 切换到目录B
|
||
- 修改文件内容
|
||
- 点击保存
|
||
- 验证文件保存到原位置（目录A）
|
||
|
||
3. **UI显示测试**
|
||
- 文件在当前目录：只显示文件名
|
||
- 文件不在当前目录：显示完整路径 + 橙色 + 提示文字
|
||
- 鼠标悬停：显示完整路径 tooltip
|
||
|
||
4. **边界情况**
|
||
- ZIP 模式下的行为
|
||
- 导航历史（后退/前进）
|
||
- 路径包含特殊字符
|
||
|
||
## 相关代码
|
||
|
||
- `FileSystem.vue:833-859` - `listDirectory()` 函数
|
||
- `FileSystem.vue:944-957` - `selectFile()` 函数
|
||
- `FileSystem.vue:961-1025` - `readFile()` 函数
|
||
- `FileSystem.vue:1423-1465` - 计算属性（`isFileInCurrentDirectory`, `currentFileName`, `currentFileFullPath`）
|
||
- `FileSystem.vue:192-218` - 模板更新
|
||
- `FileSystem.vue:3369-3385` - 样式更新
|