lxy/u-desk

Private

Public Access

Fork 0

Files

绝尘 6eaaa56eb6 新增：文档体系重构+CHANGELOG补充+发布产物清理

2026-05-01 22:22:06 +08:00

5.7 KiB

Raw Blame History

文件内容区状态管理改进

问题描述

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

需求分析

经过进一步沟通，用户实际上希望：

切换目录浏览时，保留对原文件的关联
这样可以方便跨目录编辑文件
例如：在 A 目录打开文件编辑，然后浏览 B 目录复制内容，再回到编辑器继续编辑原文件

改进方案

修改 1：优化文件列表选择状态

位置： frontend/src/components/FileSystem.vue:843-847

修改内容：

// 切换目录时，保留原文件内容状态，方便跨目录编辑
// 清空 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 - 新增样式

新增计算属性：

isFileInCurrentDirectory - 判断文件是否在当前目录中

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)
})

currentFileFullPath - 获取文件完整路径（用于tooltip）

const currentFileFullPath = computed(() => {
  return selectedFilePath.value || ''
})

更新 currentFileName - 根据文件位置智能显示

const currentFileName = computed(() => {
  // ... ZIP模式处理 ...
  if (selectedFilePath.value) {
    // 如果文件在当前目录，只显示文件名；否则显示完整路径
    if (isFileInCurrentDirectory.value) {
      return getFileName(selectedFilePath.value)
    } else {
      return selectedFilePath.value  // 显示完整路径
    }
  }
  return ''
})

模板更新：

<span
  class="panel-filename"
  :class="{ 'file-outside-dir': !isFileInCurrentDirectory && selectedFilePath }"
>
  {{ currentFileName }}
  <template v-if="!isFileInCurrentDirectory && selectedFilePath">
    <span class="file-location-hint"> (不在当前目录)</span>
  </template>
</span>

样式更新：

.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：跨目录复制
- 用户在 C:\Project 打开 config.ini 编辑
- 浏览到 D:\Templates 复制配置
- 回到编辑器，config.ini 内容仍然保留，可以继续编辑
- 标题显示："C:\Project\config.ini (不在当前目录)"，清晰明了
场景2：浏览参考文件
- 用户在 C:\Work 编辑 main.js
- 浏览到 C:\Docs 查看 API 文档
- 回到编辑器，main.js 内容保留
- 用户可以参考文档内容继续编辑

技术细节

状态管理

selectedFilePath: 选中的文件完整路径（保留，不因切换目录而清空）
selectedFileItem: 文件列表中的选中项（切换目录时清空）
fileContent: 文件内容（保留，支持跨目录编辑）

路径标准化

使用 normalizePath() 函数确保路径比较的一致性，处理不同操作系统的路径分隔符差异。

视觉提示

橙色文字：警告色，提醒用户注意
完整路径：让用户知道文件的准确位置
文字提示："(不在当前目录)" 明确告知状态

测试建议

基本功能测试
- 打开文件A查看内容
- 切换到其他文件夹
- 验证文件内容仍然保留
- 验证标题显示完整路径和提示
跨目录编辑测试
- 在目录A打开文件
- 切换到目录B
- 修改文件内容
- 点击保存
- 验证文件保存到原位置（目录A）
UI显示测试
- 文件在当前目录：只显示文件名
- 文件不在当前目录：显示完整路径 + 橙色 + 提示文字
- 鼠标悬停：显示完整路径 tooltip
边界情况
- ZIP 模式下的行为
- 导航历史（后退/前进）
- 路径包含特殊字符

5.7 KiB Raw Blame History Unescape Escape