# 文件内容区状态管理改进

## 问题描述

用户报告：点击文件查看内容后，再点击另一个文件夹，文件内容区仍显示之前文件的内容，看起来与当前目录脱离了关联。

## 需求分析

经过进一步沟通，用户实际上希望：
- **切换目录浏览时，保留对原文件的关联**
- 这样可以方便跨目录编辑文件
- 例如：在 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` - 样式更新