新增：应用配置管理模块，优化文件系统功能

- 新增 ConfigAPI 和 ConfigService 实现配置管理 - 新增 SettingsPanel 和 UpdateNotification 组件 - 文件系统模块化重构，提升代码质量 - 提取公共函数，优化代码结构 - 版本号更新至 0.2.0
2026-01-28 22:48:10 +08:00
parent 7e79a53dae
commit b849e6cc46
31 changed files with 3024 additions and 917 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -23,6 +23,7 @@
        "@codemirror/lang-python": "^6.2.1",
        "@codemirror/lang-rust": "^6.0.2",
        "@codemirror/lang-sql": "^6.10.0",
+        "@codemirror/lang-yaml": "^6.1.2",
        "@codemirror/language": "^6.12.1",
        "@codemirror/legacy-modes": "^6.5.2",
        "@codemirror/state": "^6.5.3",
@@ -341,6 +342,21 @@
        "@lezer/lr": "^1.0.0"
      }
    },
+    "node_modules/@codemirror/lang-yaml": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmmirror.com/@codemirror/lang-yaml/-/lang-yaml-6.1.2.tgz",
+      "integrity": "sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/lr": "^1.0.0",
+        "@lezer/yaml": "^1.0.0"
+      }
+    },
    "node_modules/@codemirror/language": {
      "version": "6.12.1",
      "resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.12.1.tgz",
@@ -1024,6 +1040,17 @@
        "@lezer/lr": "^1.0.0"
      }
    },
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/@lezer/yaml/-/yaml-1.0.3.tgz",
+      "integrity": "sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
    "node_modules/@marijn/find-cluster-break": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -23,6 +23,7 @@
    "@codemirror/lang-python": "^6.2.1",
    "@codemirror/lang-rust": "^6.0.2",
    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-yaml": "^6.1.2",
    "@codemirror/language": "^6.12.1",
    "@codemirror/legacy-modes": "^6.5.2",
    "@codemirror/state": "^6.5.3",
--- a/web/package.json.md5
+++ b/web/package.json.md5
@@ -1 +1 @@
-b9906c1fd8b30922e23d654093282ace
+810f4ede0f42ca4e7c9d9a4b9c07f018
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -6,16 +6,17 @@
          <h2>U-Desk</h2>
        </div>
        <a-tabs v-model:active-key="activeTab" class="header-tabs">
-          <a-tab-pane key="db-cli" title="数据库"/>
-          <a-tab-pane key="file-system" title="文件管理"/>
-          <a-tab-pane key="user" title="用户查询"/>
-          <a-tab-pane key="device" title="设备调用测试"/>
+          <a-tab-pane
+            v-for="tab in visibleTabs"
+            :key="tab.key"
+            :title="tab.title"
+          />
        </a-tabs>
        <div class="header-actions">
-          <a-tooltip content="版本更新">
-            <a-button type="text" @click="showUpdateModal = true">
+          <a-tooltip content="设置">
+            <a-button type="text" @click="showSettings = true">
              <template #icon>
-                <IconSync />
+                <IconSettings />
              </template>
            </a-button>
          </a-tooltip>
@@ -47,115 +48,248 @@
      </div>
    </a-layout-header>
    <a-layout-content class="content">
-      <!-- 数据库客户端 -->
-      <DbCli v-if="activeTab === 'db-cli'"/>
-
-      <!-- 文件管理 -->
-      <FileSystem v-if="activeTab === 'file-system'"/>
-
-      <!-- 用户查询页面 -->
-      <div v-if="activeTab === 'user'">
-        <!-- 查询表单 -->
-        <a-card class="search-card">
-          <a-form :model="formModel" layout="inline">
-            <a-form-item label="关键字">
-              <a-input
-                  v-model="formModel.keyword"
-                  placeholder="姓名、账号、电话"
-                  allow-clear
-                  style="width: 200px"
-              />
-            </a-form-item>
-            <a-form-item label="状态">
-              <a-select
-                  v-model="formModel.status"
-                  placeholder="选择状态"
-                  style="width: 120px"
-              >
-                <a-option :value="0">全部</a-option>
-                <a-option :value="1">正常</a-option>
-                <a-option :value="2">停用</a-option>
-                <a-option :value="3">已删除</a-option>
-              </a-select>
-            </a-form-item>
-            <a-form-item>
-              <a-space>
-                <a-button type="primary" @click="handleSearch">
-                  <template #icon>
-                    <icon-search/>
-                  </template>
-                  查询
-                </a-button>
-                <a-button @click="handleReset">
-                  <template #icon>
-                    <icon-refresh/>
-                  </template>
-                  重置
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-form>
-        </a-card>
-
-        <!-- 数据表格 -->
-        <a-card class="table-card">
-          <a-table
-              :columns="columns"
-              :data="tableData"
-              :loading="loading"
-              :pagination="pagination"
-              @page-change="handlePageChange"
-              @page-size-change="handlePageSizeChange"
-          >
-            <template #status="{ record }">
-              <a-tag v-if="record.status === 1" color="green">正常</a-tag>
-              <a-tag v-else-if="record.status === 2" color="orange">停用</a-tag>
-              <a-tag v-else-if="record.status === 3" color="gray">已删除</a-tag>
-            </template>
-          </a-table>
-        </a-card>
-      </div>
-
-      <!-- 设备调用测试页面 -->
-      <DeviceTest v-if="activeTab === 'device'"/>
+      <!-- 动态渲染 Tab 内容 -->
+      <template v-for="tab in visibleTabs" :key="tab.key">
+        <KeepAlive>
+          <component :is="getComponent(tab.key)" v-if="activeTab === tab.key" />
+        </KeepAlive>
+      </template>
    </a-layout-content>

-    <!-- 版本更新模态框 -->
-    <a-modal
-      v-model:visible="showUpdateModal"
-      title="版本更新"
-      width="800px"
-      :footer="false"
-    >
-      <UpdatePanel />
-    </a-modal>
+    <!-- 设置抽屉 -->
+    <SettingsPanel
+      v-model="showSettings"
+      :config="appConfig"
+      @save="handleSaveConfig"
+    />
+
+    <!-- 升级提示弹窗 -->
+    <UpdateNotification
+      v-model="showUpdateNotification"
+      :update-info="updateInfo"
+      @install="handleUpdateInstall"
+      @skip="handleUpdateSkip"
+    />
  </a-layout>
 </template>

 <script setup>
-import {onMounted, ref, watch} from 'vue'
-import {Message} from '@arco-design/web-vue'
-import {
-  IconMinus,
-  IconFullscreen,
-  IconFullscreenExit,
-  IconClose,
-  IconSync
-} from '@arco-design/web-vue/es/icon'
+import { ref, watch, computed, onMounted } from 'vue'
+import { IconSettings } from '@arco-design/web-vue/es/icon'
+import { Message } from '@arco-design/web-vue'
 import DeviceTest from './components/DeviceTest.vue'
 import DbCli from './views/db-cli/index.vue'
 import ThemeToggle from './components/ThemeToggle.vue'
 import UpdatePanel from './components/UpdatePanel.vue'
 import FileSystem from './components/FileSystem.vue'
+import SettingsPanel from './components/SettingsPanel.vue'
+import UpdateNotification from './components/UpdateNotification.vue'

 // 存储键
 const ACTIVE_TAB_STORAGE_KEY = 'app-active-tab'

 // 从 localStorage 恢复上次打开的区域，默认为 'db-cli'
-const activeTab = ref(localStorage.getItem(ACTIVE_TAB_STORAGE_KEY) || 'db-cli')
-const showUpdateModal = ref(false)
+const savedTab = localStorage.getItem(ACTIVE_TAB_STORAGE_KEY)
+const activeTab = ref((savedTab === 'user' ? 'db-cli' : savedTab) || 'db-cli')
+const showSettings = ref(false)
 const isMaximized = ref(false)

+// 更新相关状态
+const showUpdateNotification = ref(false)
+const updateInfo = ref(null)
+const checkedUpdate = ref(false)
+
+// 应用配置
+const appConfig = ref({
+  tabs: [],
+  visibleTabs: [],
+  defaultTab: 'db-cli'
+})
+
+// 可见 Tabs（根据配置动态生成）
+const visibleTabs = computed(() => {
+  if (!appConfig.value.tabs || appConfig.value.tabs.length === 0) {
+    // 默认配置
+    return [
+      { key: 'db-cli', title: '数据库' },
+      { key: 'file-system', title: '文件管理' },
+      { key: 'device', title: '设备调用测试' }
+    ]
+  }
+
+  return appConfig.value.tabs
+    .filter(tab => tab.visible)
+    .sort((a, b) => {
+      const aIndex = appConfig.value.visibleTabs.indexOf(a.key)
+      const bIndex = appConfig.value.visibleTabs.indexOf(b.key)
+      return aIndex - bIndex
+    })
+})
+
+// 加载配置
+const loadConfig = async () => {
+  try {
+    // 检查 Wails 绑定是否准备好
+    if (!window.go || !window.go.main || !window.go.main.App) {
+      console.warn('Wails 绑定未准备好，等待重试...')
+      setTimeout(() => loadConfig(), 100)
+      return
+    }
+
+    const result = await window.go.main.App.GetAppConfig()
+    if (result.success) {
+      const tabs = result.data.tabs || []
+      const visibleTabs = result.data.visibleTabs || []
+
+      // 确保 tabs 数组中的 visible 属性与 visibleTabs 同步
+      const syncedTabs = tabs.map(tab => ({
+        ...tab,
+        visible: visibleTabs.includes(tab.key)
+      }))
+
+      appConfig.value = {
+        tabs: syncedTabs,
+        visibleTabs: visibleTabs,
+        defaultTab: result.data.defaultTab || 'db-cli'
+      }
+
+      // 设置默认 Tab
+      activeTab.value = appConfig.value.defaultTab
+    } else {
+      console.error('加载配置失败:', result.message)
+      // 使用默认配置
+      useDefaultConfig()
+    }
+  } catch (error) {
+    console.error('加载配置失败:', error)
+    // 使用默认配置
+    useDefaultConfig()
+  }
+}
+
+// 使用默认配置
+const useDefaultConfig = () => {
+  appConfig.value = {
+    tabs: [
+      { key: 'db-cli', title: '数据库', visible: true, enabled: true },
+      { key: 'file-system', title: '文件管理', visible: true, enabled: true },
+      { key: 'device', title: '设备调用测试', visible: true, enabled: true }
+    ],
+    visibleTabs: ['db-cli', 'file-system', 'device'],
+    defaultTab: 'db-cli'
+  }
+}
+
+// 保存配置
+const handleSaveConfig = async (config) => {
+  try {
+    const result = await window.go.main.App.SaveAppConfig({
+      tabs: config.tabs,
+      visibleTabs: config.visibleTabs,
+      defaultTab: config.defaultTab
+    })
+
+    if (result.success) {
+      // 更新本地配置
+      appConfig.value = {
+        tabs: [...config.tabs],
+        visibleTabs: [...config.visibleTabs],
+        defaultTab: config.defaultTab
+      }
+
+      // 如果当前激活的 Tab 被隐藏，切换到默认 Tab
+      if (!config.visibleTabs.includes(activeTab.value)) {
+        activeTab.value = config.defaultTab
+      }
+
+      Message.success('配置保存成功')
+      showSettings.value = false
+    } else {
+      Message.error(result.message || '保存配置失败')
+      throw new Error(result.message)
+    }
+  } catch (error) {
+    console.error('保存配置失败:', error)
+    throw error
+  }
+}
+
+// 获取组件
+const getComponent = (key) => {
+  const components = {
+    'db-cli': DbCli,
+    'file-system': FileSystem,
+    'device': DeviceTest
+  }
+  return components[key] || null
+}
+
+// 检查更新
+const checkForUpdates = async () => {
+  try {
+    // 等待 Wails 绑定准备好
+    if (!window.go || !window.go.main || !window.go.main.App) {
+      console.warn('Wails 绑定未准备好，延迟检查更新...')
+      setTimeout(() => checkForUpdates(), 1000)
+      return
+    }
+
+    // 获取更新配置
+    const configResult = await window.go.main.App.GetUpdateConfig()
+    if (!configResult.success) {
+      console.error('获取更新配置失败:', configResult.message)
+      return
+    }
+
+    const config = configResult.data
+    const shouldCheck = config.auto_check_enabled
+
+    if (!shouldCheck) {
+      console.log('自动更新检查已关闭')
+      return
+    }
+
+    console.log('[自动检查] 开始检查更新...')
+
+    // 检查更新
+    const result = await window.go.main.App.CheckUpdate()
+    if (result.success && result.data) {
+      checkedUpdate.value = true
+
+      // 检查是否已跳过此版本
+      const skippedVersion = localStorage.getItem('skipped_version')
+      if (result.data.has_update) {
+        // 如果是强制更新，或者未跳过此版本，则显示提示
+        if (result.data.force_update || skippedVersion !== result.data.latest_version) {
+          console.log('[自动检查] 发现新版本:', result.data.latest_version)
+          updateInfo.value = result.data
+          // 延迟显示，让用户先看到应用界面
+          setTimeout(() => {
+            showUpdateNotification.value = true
+          }, 2000)
+        } else {
+          console.log('[自动检查] 此版本已跳过')
+        }
+      } else {
+        console.log('[自动检查] 已是最新版本')
+      }
+    }
+  } catch (error) {
+    console.error('检查更新失败:', error)
+  }
+}
+
+// 组件挂载时加载配置和检查更新
+onMounted(() => {
+  loadConfig()
+  // 延迟检查更新，避免阻塞应用启动
+  setTimeout(() => {
+    if (!checkedUpdate.value) {
+      checkForUpdates()
+    }
+  }, 3000)
+})
+
 // 监听 activeTab 变化，自动保存到 localStorage
 watch(activeTab, (newTab) => {
  localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, newTab)
@@ -192,94 +326,41 @@ const handleClose = async () => {
    console.error('关闭窗口失败:', error)
  }
 }
-const loading = ref(false)
-const formModel = ref({
-  keyword: '',
-  status: 0,
-  role: 0,
-  organid: 0
-})
-const tableData = ref([])
-const pagination = ref({
-  current: 1,
-  pageSize: 20,
-  total: 0,
-  showPageSize: true,
-  showTotal: true
-})

-const columns = [
-  {title: '编号', dataIndex: 'memberid', width: 80},
-  {title: '姓名', dataIndex: 'membername', width: 120},
-  {title: '账号', dataIndex: 'account', width: 150},
-  {title: '联系电话', dataIndex: 'contactphone', width: 130},
-  {title: '机构ID', dataIndex: 'organid', width: 100},
-  {title: '状态', dataIndex: 'status', slotName: 'status', width: 80},
-  {title: '创建时间', dataIndex: 'createtime', width: 180},
-  {title: '修改时间', dataIndex: 'updatetime', width: 180}
-]
-
-const loadData = async () => {
-  if (!window.go || !window.go.main || !window.go.main.App || !window.go.main.App.QueryUsers) {
-    console.error('Go 后端未就绪，请确保应用已启动')
-    loading.value = false
-    return
-  }
-
-  loading.value = true
+// 升级提示事件处理
+const handleUpdateInstall = async (filePath) => {
  try {
-    const result = await window.go.main.App.QueryUsers(
-        formModel.value.keyword || '',
-        formModel.value.status || 0,
-        formModel.value.role || 0,
-        formModel.value.organid || 0,
-        pagination.value.current,
-        pagination.value.pageSize,
-        'createtime',
-        'descend'
-    )
-
-    if (result && result.rows) {
-      tableData.value = result.rows
-      pagination.value.total = result.total || 0
+    const result = await window.go.main.App.InstallUpdate(filePath, true)
+    if (result.success) {
+      Message.success({
+        content: '安装成功！应用将在几秒后重启...',
+        duration: 3000
+      })
+    } else {
+      Message.error(result.message || '安装失败')
    }
  } catch (error) {
-    console.error('查询失败:', error)
-    Message.error('查询失败: ' + (error.message || error))
-  } finally {
-    loading.value = false
+    console.error('安装失败:', error)
+    Message.error('安装失败：' + (error.message || error))
  }
 }

-const handleSearch = () => {
-  pagination.value.current = 1
-  loadData()
+const handleUpdateSkip = () => {
+  // 清除跳过的版本记录（如果用户选择"稍后提醒"）
+  // 版本记录在组件内部处理
 }

-const handleReset = () => {
-  formModel.value = {
-    keyword: '',
-    status: 0,
-    role: 0,
-    organid: 0
+// 监听 activeTab 变化，如果当前 Tab 不在可见列表中，切换到默认 Tab
+watch(activeTab, (newTab) => {
+  // 保存到 localStorage
+  localStorage.setItem(ACTIVE_TAB_STORAGE_KEY, newTab)
+
+  // 检查 Tab 是否在可见列表中
+  const isVisible = appConfig.value.visibleTabs.includes(newTab)
+  if (!isVisible && appConfig.value.visibleTabs.length > 0) {
+    // 切换到默认 Tab
+    activeTab.value = appConfig.value.defaultTab
  }
-  pagination.value.current = 1
-  loadData()
-}
-
-const handlePageChange = (page) => {
-  pagination.value.current = page
-  loadData()
-}
-
-const handlePageSizeChange = (pageSize) => {
-  pagination.value.pageSize = pageSize
-  pagination.value.current = 1
-  loadData()
-}
-
-onMounted(() => {
-  loadData()
 })
 </script>

@@ -374,14 +455,6 @@ onMounted(() => {
  overflow: auto;
  background: var(--color-bg-1);
 }
-
-.search-card {
-  margin-bottom: 16px;
-}
-
-.table-card {
-  flex: 1;
-}
 </style>

 <!-- Wails 拖拽样式 -->
--- a/web/src/api/system.ts
+++ b/web/src/api/system.ts
@@ -217,3 +217,28 @@ export async function getFileServerURL(): Promise<string> {
  }
  return await window.go.main.App.GetFileServerURL()
 }
+
+/**
+ * 解析快捷方式文件，返回目标路径信息
+ */
+export async function resolveShortcut(lnkPath: string): Promise<{
+  success: boolean
+  message?: string
+  targetPath?: string
+  targetExists?: boolean
+  targetAccessible?: boolean
+  targetInfo?: any
+}> {
+  console.log('[API] resolveShortcut 调用:', lnkPath)
+  if (!window.go?.main?.App?.ResolveShortcut) {
+    throw new Error('ResolveShortcut API 不可用')
+  }
+  try {
+    const result = await window.go.main.App.ResolveShortcut(lnkPath)
+    console.log('[API] resolveShortcut 结果:', result)
+    return result
+  } catch (error) {
+    console.error('[API] resolveShortcut 错误:', error)
+    throw error
+  }
+}
--- a/web/src/components/CodeEditor.vue
+++ b/web/src/components/CodeEditor.vue
@@ -18,9 +18,14 @@ import { json } from '@codemirror/lang-json'
 import { markdown } from '@codemirror/lang-markdown'
 import { html } from '@codemirror/lang-html'
 import { css } from '@codemirror/lang-css'
+import { sql } from '@codemirror/lang-sql'
+import { yaml } from '@codemirror/lang-yaml'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { keymap } from '@codemirror/view'
 import { bracketMatching } from '@codemirror/language'
+import { StreamLanguage } from '@codemirror/language'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell'
 import { useTheme } from '@/composables/useTheme'

 // 使用主题系统
@@ -78,6 +83,24 @@ const LANGUAGE_MAP = {
  'scss': css(),
  'sass': css(),
  'less': css(),
+
+  // SQL
+  'sql': sql(),
+
+  // YAML
+  'yml': yaml(),
+  'yaml': yaml(),
+
+  // Shell/Bash
+  'sh': StreamLanguage.define(shell),
+  'bash': StreamLanguage.define(shell),
+  'zsh': StreamLanguage.define(shell),
+  'fish': StreamLanguage.define(shell),
+
+  // Windows Batch/PowerShell
+  'bat': StreamLanguage.define(powerShell),
+  'cmd': StreamLanguage.define(powerShell),
+  'ps1': StreamLanguage.define(powerShell),
 }

 const props = defineProps({
--- a/web/src/components/FileSystem.vue
+++ b/web/src/components/FileSystem.vue
@@ -139,11 +139,31 @@
              class="compact-list"
            >
              <template #item="{ item }">
-                <div class="file-item-row" @click="selectFile(item.path)" :data-file-path="item.path">
+                <div
+                  class="file-item-row"
+                  :class="{ 'file-item-selected': selectedFileItem?.path === item.path }"
+                  @click="handleFileClick(item)"
+                  :data-file-path="item.path"
+                  @dblclick="handleFileDoubleClick(item)"
+                >
                  <span class="file-item-icon">{{ getFileIcon(item) }}</span>
-                  <span class="file-item-name" :title="item.name">{{ item.name }}</span>
-                  <span v-if="!item.is_dir" class="file-item-size">{{ formatBytes(item.size) }}</span>
+                  <!-- 编辑状态 -->
+                  <a-input
+                    v-if="editingFilePath === item.path"
+                    v-model="editingFileName"
+                    ref="editingInputRef"
+                    size="mini"
+                    class="file-name-edit-input"
+                    @blur="saveEditingFileName"
+                    @keyup.enter="saveEditingFileName"
+                    @keyup.esc="cancelEditingFileName"
+                    @click.stop
+                  />
+                  <!-- 正常显示状态 -->
+                  <span v-else class="file-item-name" :title="item.name">{{ item.name }}</span>
+                  <span v-if="!item.is_dir && editingFilePath !== item.path" class="file-item-size">{{ formatBytes(item.size) }}</span>
                  <a-button
+                    v-if="editingFilePath !== item.path"
                    type="text"
                    size="mini"
                    @click.stop="toggleFavorite(item)"
@@ -179,7 +199,21 @@
              <template v-else-if="isMarkdownFile">📝 Markdown 预览</template>
              <template v-else>📝 文件内容</template>
            </span>
-            <span class="panel-filename" v-if="currentFileName">{{ currentFileName }}</span>
+            <a-tooltip
+              v-if="currentFileName"
+              :content="currentFileFullPath"
+              position="bottom"
+            >
+              <span
+                class="panel-filename"
+                :class="{ 'file-outside-dir': !isFileInCurrentDirectory && selectedFilePath }"
+              >
+                {{ currentFileName }}
+                <template v-if="!isFileInCurrentDirectory && selectedFilePath">
+                  <span class="file-location-hint"> (不在当前目录)</span>
+                </template>
+              </span>
+            </a-tooltip>
          </div>

          <div class="editor-content">
@@ -218,7 +252,7 @@
            </div>

            <!-- PDF 预览 -->
-            <div v-else-if="isPdfFile" class="media-preview">
+            <div v-else-if="isPdfFile" class="media-preview media-preview-pdf">
              <iframe :src="imagePreviewUrl" class="preview-pdf"></iframe>
              <div class="media-meta">
                <a-tag color="orangered">📕 PDF</a-tag>
@@ -229,7 +263,7 @@
            <div v-else-if="isHtmlFile" class="html-preview-wrapper">
              <!-- 编辑模式/预览模式切换按钮 -->
              <div class="preview-mode-switch">
-                <a-tooltip :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
+                <a-tooltip position="left" :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
                  <a-button
                    type="primary"
                    size="small"
@@ -269,7 +303,7 @@
            <div v-else-if="isMarkdownFile" class="markdown-preview-wrapper">
              <!-- 编辑模式/预览模式切换按钮 -->
              <div class="preview-mode-switch">
-                <a-tooltip :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
+                <a-tooltip position="left" :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
                  <a-button
                    type="primary"
                    size="small"
@@ -303,6 +337,23 @@

            <!-- 文本编辑器（带代码高亮） -->
            <div v-else class="text-editor-wrapper" :style="{ height: fileContentHeight + 'px' }">
+              <!-- 编辑模式/预览模式切换按钮（所有文件类型显示，但仅 HTML/Markdown 可用） -->
+              <div class="preview-mode-switch">
+                <a-tooltip position="left" :content="canPreviewFile ? (isEditMode ? '切换到预览' : '切换到编辑') : '该文件不支持预览模式'">
+                  <a-button
+                    type="primary"
+                    size="small"
+                    :disabled="!canPreviewFile"
+                    @click="toggleEditMode"
+                  >
+                    <template #icon>
+                      <icon-edit v-if="!isEditMode" />
+                      <icon-eye v-else />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+              </div>
+
              <CodeEditor
                v-model="fileContent"
                :file-extension="currentFileExtension"
@@ -358,6 +409,11 @@
        <span class="context-menu-icon">🚀</span>
        <span>系统默认程序打开</span>
      </div>
+      <div v-if="contextMenuTarget === 'file'" class="context-menu-item" @click="handleRenameSelectedFile">
+        <span class="context-menu-icon">✏️</span>
+        <span>重命名</span>
+        <span class="context-menu-shortcut">F2</span>
+      </div>
      <div v-if="contextMenuTarget === 'file'" class="context-menu-item danger" @click="handleDeleteSelectedFile">
        <span class="context-menu-icon">🗑️</span>
        <span>删除</span>
@@ -388,7 +444,7 @@
 </template>

 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import { marked } from 'marked'
 import CodeEditor from '@/components/CodeEditor.vue'
@@ -501,6 +557,12 @@ const contextMenuVisible = ref(false) // 是否显示右键菜单
 const contextMenuPosition = ref({ x: 0, y: 0 }) // 右键菜单位置
 const contextMenuTarget = ref('blank') // 右键菜单目标: 'blank' (空白区域) 或 'file' (文件项)
 const selectedContextFile = ref(null) // 右键选中的文件
+const selectedFileItem = ref(null) // 当前选中的文件项（用于 F2/Delete 等快捷键）
+
+// ========== 文件名编辑状态 ==========
+const editingFilePath = ref('') // 正在编辑的文件路径
+const editingFileName = ref('') // 编辑中的文件名
+const editingInputRef = ref() // 编辑输入框引用

 // ========== 输入对话框状态 ==========
 const inputDialogVisible = ref(false) // 是否显示输入对话框
@@ -792,19 +854,28 @@ const listDirectory = async () => {
    exitZipMode()
  }

-  // 注意：不要清空 selectedFilePath，保留原文件引用
-  // 即使切换目录，保存时仍然保存到原文件
-  if (selectedFilePath.value) {
-    debugLog('[listDirectory] 目录已切换，但保留原文件引用:', selectedFilePath.value)
-  }
-
  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
  }
@@ -886,9 +957,9 @@ const selectFile = (path) => {

  if (item.is_dir) {
    // 目录：更新路径并列出内容
+    // 注意：不要清空 selectedFilePath，保留原文件内容以便跨目录编辑
    filePath.value = path
    addToHistory(path)
-    selectedFilePath.value = ''
    listDirectory()
  } else {
    // 文件：路径保持为父目录，保存选中文件完整路径
@@ -911,14 +982,62 @@ const readFile = async () => {
    addToHistory(filePath.value)
  }

-  // 重置所有预览状态
-  isImageFile.value = false
-  isVideoFile.value = false
-  isAudioFile.value = false
-  isPdfFile.value = false
+  // 延迟状态重置，避免不必要的重新渲染
+  // 只在确实需要读取文件内容时才重置

  const ext = fileToRead.split('.').pop()?.toLowerCase() || ''

+  // ========== 优化：大文件和无扩展名文件的智能检测 ==========
+  // 获取文件信息（缓存以避免重复查找）
+  const file = fileList.value.find(f => f.path === fileToRead)
+
+  // 快速路径：无扩展名大文件（>=100KB），直接判定为二进制（极速）
+  if (!ext && file && file.size >= 100 * 1024) {
+    debugLog('[readFile] 快速路径：无扩展名大文件，直接判定为二进制')
+    // 只设置必要的状态，避免触发不必要的渲染
+    isBinaryFile.value = true
+    fileContent.value = getBinaryFileInfo(fileToRead, '', file)
+    return
+  }
+
+  // 情况2：无扩展名小文件（<100KB），快速检测
+
+  // 情况2：无扩展名小文件（<100KB），快速检测
+  if (!ext) {
+    debugLog('[readFile] 无扩展名小文件，快速检测:', fileToRead, '大小:', file?.size)
+    const isBinary = await quickCheckBinarySample(fileToRead)
+    if (isBinary) {
+      const info = getBinaryFileInfo(fileToRead, '', file) // 同步调用
+      isBinaryFile.value = true
+      fileContent.value = info
+      return
+    }
+    // 不是二进制，继续读取完整内容
+  }
+
+  // 情况3：大文件（>1MB）+ 已知二进制扩展名，直接判定
+  if (file && file.size > 1024 * 1024) {
+    const knownBinaryTypes = ['exe', 'dll', 'so', 'bin', 'zip', 'rar', '7z', 'tar', 'gz', 'iso', 'img', 'dmg', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
+    if (knownBinaryTypes.includes(ext)) {
+      debugLog('[readFile] 已知二进制类型（大文件）:', fileToRead)
+      const info = getBinaryFileInfo(fileToRead, ext, file) // 同步调用
+      isBinaryFile.value = true
+      fileContent.value = info
+      return
+    }
+
+    // 情况4：其他大文件，快速检测（只读前100字节）
+    debugLog('[readFile] 大文件，快速检测:', fileToRead, '大小:', file.size)
+    const isBinary = await quickCheckBinarySample(fileToRead)
+    if (isBinary) {
+      const info = getBinaryFileInfo(fileToRead, ext, file) // 同步调用
+      isBinaryFile.value = true
+      fileContent.value = info
+      return
+    }
+    // 不是二进制，继续读取完整内容
+  }
+
  // 图片文件
  if (FILE_EXTENSIONS.IMAGE.includes(ext)) {
    await previewImage(fileToRead)
@@ -999,12 +1118,139 @@ const readFile = async () => {
    return
  }

+  // Windows 快捷方式文件 - 显示二进制文件信息
+  if (ext === 'lnk') {
+    showBinaryFileInfo(ext, fileToRead)
+    return
+  }
+
  // 其他文件直接读取
  await performFileRead()
 }

+/**
+ * 生成二进制文件信息提示（同步函数，极速响应）
+ * @param filePath 文件路径
+ * @param ext 文件扩展名
+ * @param fileInfo 文件信息（从列表中获取）
+ * @returns 格式化的提示信息
+ */
+const getBinaryFileInfo = (filePath, ext, fileInfo) => {
+  const fileName = getFileName(filePath)
+  const fileSize = fileInfo?.size ? formatBytes(fileInfo.size) : '未知'
+  const modifiedTime = fileInfo?.modified_time || '未知'
+
+  const fileTypeDescriptions = {
+    'exe': '可执行文件 (EXE)',
+    'dll': '动态链接库 (DLL)',
+    'so': '共享库 (SO)',
+    'dylib': '动态库 (DYLIB)',
+    'bin': '二进制文件 (BIN)',
+    'dat': '数据文件 (DAT)',
+    'db': '数据库文件 (DB)',
+    'sqlite': 'SQLite 数据库',
+    'zip': '压缩文件 (ZIP)',
+    'rar': '压缩文件 (RAR)',
+    '7z': '压缩文件 (7Z)',
+    'tar': '归档文件 (TAR)',
+    'gz': '压缩文件 (GZ)',
+    'pdf': 'PDF 文档',
+    'doc': 'Word 文档 (DOC)',
+    'docx': 'Word 文档 (DOCX)',
+    'xls': 'Excel 表格 (XLS)',
+    'xlsx': 'Excel 表格 (XLSX)',
+    'ppt': 'PowerPoint 演示文稿 (PPT)',
+    'pptx': 'PowerPoint 演示文稿 (PPTX)'
+  }
+
+  const fileTypeDesc = ext ? (fileTypeDescriptions[ext] || `${ext.toUpperCase()} 文件`) : '二进制文件（无扩展名）'
+  const fileSizeBytes = fileInfo?.size ? `(${fileInfo.size.toLocaleString()} 字节)` : ''
+
+  return `================================================================
+文件信息：${fileTypeDesc}
+================================================================
+
+文件名:    ${fileName}
+完整路径:  ${filePath}
+文件大小:  ${fileSize} ${fileSizeBytes}
+修改时间:  ${modifiedTime}
+文件类型:  ${fileTypeDesc}
+
+================================================================
+ℹ️  这是二进制文件，不支持文本预览
+   如需查看或编辑，请使用专门的工具
+
+💡 提示:
+   • 右键菜单 → "使用系统程序打开" 在默认应用中打开
+   • 右键菜单 → "在资源管理器中显示" 查看文件位置
+================================================================`
+}
+
+/**
+ * 快速检测文件样本是否为二进制（只读取前100字节）
+ * @param filePath 文件路径
+ * @returns 是否为二进制文件
+ */
+const quickCheckBinarySample = async (filePath) => {
+  try {
+    // 只读取前100字节进行快速检测
+    const sample = await readFileApi(filePath)
+
+    // 检查前100个字符
+    const checkLength = Math.min(sample.length, 100)
+    let binaryCharCount = 0
+
+    for (let i = 0; i < checkLength; i++) {
+      const charCode = sample.charCodeAt(i)
+      // 空字节或其他控制字符（除了常见的换行符、制表符等）
+      if (charCode === 0 || (charCode < 32 && charCode !== 9 && charCode !== 10 && charCode !== 13)) {
+        binaryCharCount++
+      }
+    }
+
+    // 如果二进制字符超过10%，认为是二进制文件（使用更宽松的阈值）
+    const binaryRatio = binaryCharCount / checkLength
+    const isBinary = binaryRatio > 0.1
+
+    debugLog(`[quickCheckBinarySample] ${filePath}: 二进制字符比例: ${(binaryRatio * 100).toFixed(1)}%, 判定结果: ${isBinary ? '二进制' : '文本'}`)
+
+    return isBinary
+  } catch (error) {
+    debugWarn('[quickCheckBinarySample] 检测失败:', error)
+    // 检测失败时，保守判定为二进制
+    return true
+  }
+}
+
 // ========== 显示二进制文件信息 ==========

+/**
+ * 计算字符串的显示宽度（中文字符算2个宽度，英文字符算1个宽度）
+ * 注意：emoji 和特殊符号按1个字符宽度计算
+ */
+const getDisplayWidth = (str) => {
+  let width = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    // 中文字符、中文标点算2个宽度，emoji和特殊符号算1个宽度
+    if (/[\u4e00-\u9fa5]/.test(str[i])) {
+      width += 2
+    } else {
+      width += 1
+    }
+  }
+  return width
+}
+
+/**
+ * 根据显示宽度填充字符串
+ */
+const padByDisplayWidth = (str, targetWidth) => {
+  const currentWidth = getDisplayWidth(str)
+  const padding = Math.max(0, targetWidth - currentWidth)
+  return str + ' '.repeat(padding)
+}
+
 const showBinaryFileInfo = (ext, filePathParam) => {
  const file = fileList.value.find(f => f.path === (filePathParam || filePath.value))
  if (!file) return
@@ -1025,26 +1271,29 @@ const showBinaryFileInfo = (ext, filePathParam) => {
  else if (FILE_EXTENSIONS.VIDEO_BROWSER.includes(ext) || FILE_EXTENSIONS.VIDEO_EXTERNAL.includes(ext)) fileType = '视频文件'
  else if (FILE_EXTENSIONS.AUDIO.includes(ext)) fileType = '音频文件'
  else if (['exe', 'dll', 'so'].includes(ext)) fileType = '可执行文件'
+  else if (['jar', 'jsa'].includes(ext)) fileType = 'Java归档文件'
  else if (FILE_EXTENSIONS.ARCHIVE.includes(ext)) fileType = '压缩文件'
  else if (FILE_EXTENSIONS.DOCUMENT.includes(ext)) fileType = '文档文件'
+  else if (ext === 'lnk') fileType = '快捷方式'

  const displayFilePath = filePathParam || filePath.value

-  fileContent.value = `╔════════════════════════════════════════════════════════════╗
-║  📄 ${fileType} - ${extDisplay}                                   ║
-╠════════════════════════════════════════════════════════════╣
-║                                                              ║
-║  📁 文件名:    ${file.name.padEnd(40)}║
-║  📂 完整路径:  ${displayFilePath}                      ║
-║                                                              ║
-║  📊 大小:      ${sizeDisplay.padEnd(10)}  (${file.size.toLocaleString()} 字节)        ║
-║  📅 修改时间:  ${file.mod_time}                     ║
-║  🏷️  类型:      ${fileType.padEnd(15)} (${extDisplay})                    ║
-║                                                              ║
-║  ℹ️  这是二进制文件，不支持文本预览                         ║
-║     如需查看或编辑，请使用专门的工具                     ║
-║                                                              ║
-╚════════════════════════════════════════════════════════════╝`
+  // ========== 通用格式：键值对 + 分隔线 ==========
+
+  fileContent.value = `${'='.repeat(64)}
+文件信息：${fileType} (${extDisplay})
+${'='.repeat(64)}
+
+文件名:    ${file.name}
+完整路径:  ${displayFilePath}
+文件大小:  ${sizeDisplay} (${file.size.toLocaleString()} 字节)
+修改时间:  ${file.mod_time}
+文件类型:  ${fileType} (${extDisplay})
+
+${'='.repeat(64)}
+ℹ️  这是二进制文件，不支持文本预览
+   如需查看或编辑，请使用专门的工具
+${'='.repeat(64)}`

  // 二进制文件信息已加载，静默无提示
 }
@@ -1330,7 +1579,28 @@ const displayPath = computed(() => {
  return filePath.value
 })

-// 获取当前文件名（用于面板标题显示）
+// 判断当前打开的文件是否在当前目录中（优化性能，减少计算）
+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()
+})
+
+// 获取显示的文件路径（用于面板标题显示）
 const currentFileName = computed(() => {
  if (isBrowsingZip.value && selectedFilePath.value) {
    // ZIP 模式：从 zip 内路径中提取文件名
@@ -1338,12 +1608,28 @@ const currentFileName = computed(() => {
    return parts[parts.length - 1] || parts[parts.length - 2] || ''
  }
  if (selectedFilePath.value) {
-    // 正常模式：从完整路径中提取文件名
-    return getFileName(selectedFilePath.value)
+    // 正常模式：如果文件在当前目录，只显示文件名；否则显示完整路径
+    // 使用 try-catch 确保任何错误都不会导致整个计算失败
+    try {
+      if (isFileInCurrentDirectory.value) {
+        return getFileName(selectedFilePath.value)
+      } else {
+        // 文件不在当前目录，显示完整路径以便用户清楚知道
+        return selectedFilePath.value
+      }
+    } catch (error) {
+      debugWarn('[currentFileName] 计算失败，返回文件名:', error)
+      return getFileName(selectedFilePath.value)
+    }
  }
  return ''
 })

+// 获取显示的文件完整路径（用于tooltip）
+const currentFileFullPath = computed(() => {
+  return selectedFilePath.value || ''
+})
+
 // 媒体预览功能

 const previewImage = async (targetPath) => {
@@ -1574,6 +1860,17 @@ const previewHtml = async (targetPath) => {
  const pathToPreview = targetPath || selectedFilePath.value || filePath.value
  if (!pathToPreview) return

+  // ========== 检查文件大小 ==========
+  const file = fileList.value.find(f => f.path === pathToPreview)
+  if (file && file.size) {
+    const maxSize = 5 * 1024 * 1024 // 5MB 限制
+    if (file.size > maxSize) {
+      const fileSize = formatBytes(file.size)
+      showBinaryFileInfo('html', pathToPreview)
+      return
+    }
+  }
+
  // 重置所有状态
  isImageFile.value = false
  isVideoFile.value = false
@@ -1584,7 +1881,9 @@ const previewHtml = async (targetPath) => {
  isBinaryFile.value = false
  isEditMode.value = false // 默认预览模式

-  fileLoading.value = true
+  // 注意：不设置 fileLoading，因为那是给文件列表用的
+  // 这里是读取文件内容，不应该影响列表的显示
+
  try {
    // 读取 HTML 文件内容
    let content = await readFileApi(pathToPreview)
@@ -1704,6 +2003,17 @@ const previewMarkdown = async (targetPath) => {
  const pathToPreview = targetPath || selectedFilePath.value || filePath.value
  if (!pathToPreview) return

+  // ========== 检查文件大小 ==========
+  const file = fileList.value.find(f => f.path === pathToPreview)
+  if (file && file.size) {
+    const maxSize = 5 * 1024 * 1024 // 5MB 限制
+    if (file.size > maxSize) {
+      const fileSize = formatBytes(file.size)
+      showBinaryFileInfo('md', pathToPreview)
+      return
+    }
+  }
+
  // 重置所有状态
  isImageFile.value = false
  isVideoFile.value = false
@@ -1714,7 +2024,8 @@ const previewMarkdown = async (targetPath) => {
  isBinaryFile.value = false
  isEditMode.value = false // 默认预览模式

-  fileLoading.value = true
+  // 注意：不设置 fileLoading，因为那是给文件列表用的
+
  try {
    // 读取 Markdown 文件内容
    const content = await readFileApi(pathToPreview)
@@ -1793,17 +2104,62 @@ const performFileRead = async () => {
  isBinaryFile.value = false
  isEditMode.value = true // 纯文本文件只有编辑模式

-  fileLoading.value = true
+  // ========== 检查文件大小（避免卡死）==========
+  const file = fileList.value.find(f => f.path === fileToRead)
+  if (file && file.size) {
+    const maxSize = 5 * 1024 * 1024 // 5MB 限制（CodeMirror 渲染性能考虑）
+    if (file.size > maxSize) {
+      const fileSize = formatBytes(file.size)
+      const ext = fileToRead.split('.').pop()?.toLowerCase() || ''
+
+      // 根据文件类型提供针对性的建议
+      let suggestion = '• VS Code\n• Sublime Text'
+
+      if (ext === 'sql') {
+        suggestion = '• DBeaver（推荐）\n• HeidiSQL\n• Navicat\n• VS Code'
+      } else if (ext === 'json') {
+        suggestion = '• VS Code（带格式化）\n• 在线 JSON 查看器\n• jq 命令行工具'
+      } else if (FILE_EXTENSIONS.CODE.includes(ext)) {
+        suggestion = '• VS Code（推荐）\n• Sublime Text\n• JetBrains IDE'
+      }
+
+      fileContent.value = `╔════════════════════════════════════════════════════════════╗
+║  ⚠️  文件过大 - 无法在编辑器中打开                          ║
+╠════════════════════════════════════════════════════════════╣
+║                                                              ║
+║  📄 文件名:    ${file.name.substring(0, 50).padEnd(50)}║
+║  📊 文件大小:  ${fileSize.padEnd(20)}                          ║
+║  🚫 大小限制:  5 MB                                             ║
+║                                                              ║
+║  该文件过大，当前编辑器无法流畅打开。                          ║
+║  建议使用以下工具查看和编辑:                                   ║
+║  ${suggestion.split('\n').join('                                                          ║\n║  ')}                                                          ║
+║                                                              ║
+║  💡 提示:                                                     ║
+║     • 右键菜单 → "使用系统程序打开"                            ║
+║     • 或将文件拖拽到专用工具中                                 ║
+║                                                              ║
+╚════════════════════════════════════════════════════════════╝`
+      isBinaryFile.value = true
+      isEditMode.value = false
+      return
+    }
+  }
+
+  // 注意：不设置 fileLoading，因为那是给文件列表用的
+
  try {
    const content = await readFileApi(fileToRead)

-    // 文本文件检查大小（提高到2MB，合理的大文件支持）
-    const maxDisplaySize = 2 * 1024 * 1024 // 2MB
+    // 文本文件检查大小
+    const maxDisplaySize = 5 * 1024 * 1024 // 5MB
    if (content.length > maxDisplaySize) {
-      // 超过 2MB 的文本文件
-      fileContent.value = content.substring(0, maxDisplaySize) + '\n\n... (文件过大，已截断，仅显示前 2MB) ...'
-      // 大文件加载警告改为控制台日志，不打断用户
-      console.warn(`文件过大 (${(content.length / 1024).toFixed(2)} KB)，已截断显示`)
+      // 超过 5MB 的文本文件
+      fileContent.value = content.substring(0, maxDisplaySize) + '\n\n' +
+        '... ═════════════════════════════════════════════════════════════\n' +
+        '⚠️  文件过大，已截断显示（仅显示前 5MB）\n' +
+        '═════════════════════════════════════════════════════════════ ...'
+      console.warn(`文件过大 (${(content.length / 1024 / 1024).toFixed(2)} MB)，已截断显示`)
    } else {
      fileContent.value = content
    }
@@ -1864,6 +2220,7 @@ const handleSaveContent = async () => {

  // 保存到文件
  const fileName = targetPath.split(/[/\\]/).pop()
+
  await saveToFile(targetPath, fileName, false)
 }

@@ -1969,6 +2326,27 @@ const showManualSaveDialog = (isShortcut) => {
 * 保存内容到指定文件
 */
 const saveToFile = async (targetPath, fileName, isShortcut) => {
+  // ========== 安全校验 ==========
+
+  // 验证文件名
+  const validation = validateFileName(fileName)
+  if (!validation.valid) {
+    Message.error(validation.error)
+    return
+  }
+
+  // 验证路径不为空
+  if (!targetPath || targetPath.trim() === '') {
+    Message.error('保存路径为空')
+    return
+  }
+
+  // 验证内容不为空
+  if (!fileContent.value || fileContent.value.trim() === '') {
+    Message.warning('没有内容可保存')
+    return
+  }
+
  // 设置保存状态
  isSaving.value = true
  isShortcutSave.value = isShortcut
@@ -2180,6 +2558,154 @@ const handleOpenWithSystem = async () => {
  }
 }

+/**
+ * 重命名右键选中的文件或目录（启动原地编辑模式）
+ */
+const handleRenameSelectedFile = async () => {
+  if (!selectedContextFile.value) {
+    return
+  }
+
+  const oldPath = selectedContextFile.value.path
+  const oldName = selectedContextFile.value.name
+
+  // 隐藏右键菜单
+  hideContextMenu()
+
+  // 设置编辑状态
+  editingFilePath.value = oldPath
+  editingFileName.value = oldName
+
+  // 自动聚焦并选中文件名（不包括扩展名）
+  nextTick(() => {
+    if (editingInputRef.value && editingInputRef.value.$el) {
+      const input = editingInputRef.value.$el.querySelector('input')
+      if (input) {
+        input.focus()
+        // 选中文件名（不包括扩展名）
+        const lastDotIndex = oldName.lastIndexOf('.')
+        if (lastDotIndex > 0) {
+          input.setSelectionRange(0, lastDotIndex)
+        } else {
+          input.select()
+        }
+      }
+    }
+  })
+}
+
+/**
+ * 点击文件项处理（选中文件）
+ * 优化：对于大文件或无扩展名文件，先加载内容再设置选中状态，避免列表闪烁
+ */
+const handleFileClick = (item) => {
+  const ext = item.path.split('.').pop()?.toLowerCase() || ''
+  const isLargeBinaryCandidate = !ext || item.size > 1024 * 1024
+
+  if (isLargeBinaryCandidate) {
+    // 先不设置选中状态，避免列表重新渲染
+    // 等文件加载完成后再设置（通过 nextTick）
+    selectFile(item.path)
+    nextTick(() => {
+      selectedFileItem.value = item
+    })
+  } else {
+    // 普通文件，正常流程
+    selectedFileItem.value = item
+    selectFile(item.path)
+  }
+}
+
+/**
+ * 双击文件项处理
+ */
+const handleFileDoubleClick = (item) => {
+  // 如果是文件夹，则进入文件夹
+  if (item.is_dir) {
+    navigateToPath(item.path)
+  } else {
+    // 如果是文件，打开查看
+    selectFile(item.path)
+  }
+}
+
+/**
+ * 保存编辑的文件名
+ */
+const saveEditingFileName = async () => {
+  if (!editingFilePath.value) {
+    return
+  }
+
+  const oldPath = editingFilePath.value
+  const oldName = fileList.value.find(f => f.path === oldPath)?.name || ''
+  const newName = editingFileName.value.trim()
+
+  // 清空编辑状态
+  editingFilePath.value = ''
+  editingFileName.value = ''
+
+  // 验证
+  if (!newName) {
+    Message.warning('文件名不能为空')
+    return
+  }
+
+  // 如果名称没有变化，直接返回
+  if (newName === oldName) {
+    return
+  }
+
+  // 验证文件名
+  const invalidChars = /[<>:"/\\|?*]/g
+  if (invalidChars.test(newName)) {
+    Message.error('文件名包含非法字符：<>:"/\\|?*')
+    return
+  }
+
+  fileLoading.value = true
+  try {
+    // 构造新路径
+    const dirPath = oldPath.substring(0, oldPath.lastIndexOf(oldPath.includes('\\') ? '\\' : '/'))
+    const newPath = dirPath + (dirPath.endsWith('\\') || dirPath.endsWith('/') ? '' : (oldPath.includes('\\') ? '\\' : '/')) + newName
+
+    // 调用重命名 API
+    if (!window.go || !window.go.main || !window.go.main.App || !window.go.main.App.RenamePath) {
+      throw new Error('Go 后端未就绪，请确保应用已启动')
+    }
+
+    await window.go.main.App.RenamePath({
+      oldPath: oldPath,
+      newPath: newPath
+    })
+
+    Message.success('重命名成功')
+
+    // 如果重命名的是当前选中的文件，更新选中路径
+    if (selectedFilePath.value === oldPath) {
+      selectedFilePath.value = newPath
+    }
+
+    // 刷新文件列表
+    await listDirectory()
+  } catch (error) {
+    Message.error(`重命名失败: ${error.message || error}`)
+    // 失败时恢复编辑状态
+    editingFilePath.value = oldPath
+    editingFileName.value = oldName
+  } finally {
+    fileLoading.value = false
+  }
+}
+
+/**
+ * 取消编辑文件名
+ */
+const cancelEditingFileName = () => {
+  editingFilePath.value = ''
+  editingFileName.value = ''
+}
+
 /**
 * 删除右键选中的文件
 */
@@ -2492,9 +3018,9 @@ const openFavoriteFile = (path) => {

  if (fav && fav.is_dir) {
    // 目录：列出内容
+    // 注意：不要清空 selectedFilePath，保留原文件内容以便跨目录编辑
    filePath.value = path
    addToHistory(path)
-    selectedFilePath.value = '' // 清空文件选择
    listDirectory()
  } else {
    // 文件：设置选中文件路径并读取
@@ -2743,17 +3269,39 @@ const handleKeyDown = (e) => {
    handleCreateDir()
  }

-  // Ctrl+← 后退到上一个目录
-  if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowLeft') {
+  // Alt+← 后退到上一个目录
+  if (e.altKey && e.key === 'ArrowLeft') {
    e.preventDefault() // 阻止浏览器默认行为
    navigateBack()
  }

-  // Ctrl+→ 前进到下一个目录
-  if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowRight') {
+  // Alt+→ 前进到下一个目录
+  if (e.altKey && e.key === 'ArrowRight') {
    e.preventDefault() // 阻止浏览器默认行为
    navigateForward()
  }
+
+  // F2 重命名选中的文件或目录
+  if (e.key === 'F2') {
+    e.preventDefault()
+    // 优先使用右键选中的文件，否则使用当前选中的文件项
+    const fileToRename = selectedContextFile.value || selectedFileItem.value
+    if (fileToRename) {
+      selectedContextFile.value = fileToRename // 设置右键选中的文件，以便复用 handleRenameSelectedFile
+      handleRenameSelectedFile()
+    }
+  }
+
+  // Delete 删除选中的文件或目录
+  if (e.key === 'Delete') {
+    e.preventDefault()
+    // 优先使用右键选中的文件，否则使用当前选中的文件项
+    const fileToDelete = selectedContextFile.value || selectedFileItem.value
+    if (fileToDelete) {
+      selectedContextFile.value = fileToDelete // 设置右键选中的文件，以便复用 handleDeleteSelectedFile
+      handleDeleteSelectedFile()
+    }
+  }
 }

 onMounted(() => {
@@ -2996,7 +3544,22 @@ onUnmounted(() => {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-  max-width: 300px;
+  max-width: 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;
 }

 .file-list-wrapper {
@@ -3023,6 +3586,11 @@ onUnmounted(() => {
  background: var(--color-fill-2);
 }

+.file-item-selected {
+  background: var(--color-fill-3) !important;
+  font-weight: 500;
+}
+
 .file-item-row:last-child {
  border-bottom: none;
 }
@@ -3044,6 +3612,18 @@ onUnmounted(() => {
  min-width: 0;
 }

+.file-name-edit-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name-edit-input :deep(.arco-input) {
+  font-size: 13px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+}
+
 .file-item-size {
  font-size: 11px;
  color: var(--color-text-3);
@@ -3136,8 +3716,8 @@ onUnmounted(() => {
  display: flex;
  flex-direction: column;
  overflow: hidden;
-  padding: 8px;
-  gap: 8px;
+  padding: 4px;
+  gap: 4px;
 }

 /* ========== HTML 预览 ========== */
@@ -3165,7 +3745,8 @@ onUnmounted(() => {
 }

 .html-preview-wrapper:hover .preview-mode-switch,
-.markdown-preview-wrapper:hover .preview-mode-switch {
+.markdown-preview-wrapper:hover .preview-mode-switch,
+.text-editor-wrapper:hover .preview-mode-switch {
  opacity: 1;
 }

@@ -3368,6 +3949,11 @@ onUnmounted(() => {
  position: relative;
 }

+/* PDF 预览从顶部开始，不居中 */
+.media-preview-pdf {
+  justify-content: flex-start;
+}
+
 .preview-image {
  max-width: 100%;
  max-height: 600px;
@@ -3386,7 +3972,8 @@ onUnmounted(() => {

 .preview-pdf {
  width: 100%;
-  height: 600px;
+  height: 100%;
+  min-height: 500px;
  border: none;
  border-radius: 4px;
 }
--- a/web/src/components/SettingsPanel.vue
+++ b/web/src/components/SettingsPanel.vue
@@ -0,0 +1,369 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    title="设置"
+    width="600px"
+    :footer="false"
+    unmount-on-close
+  >
+    <a-tabs default-active-key="tab-config">
+      <!-- Tab 配置 -->
+      <a-tab-pane key="tab-config" title="Tab 配置">
+        <a-space direction="vertical" style="width: 100%" :size="16">
+
+          <!-- 说明文字 -->
+          <a-alert type="info" :show-icon="true">
+            拖拽可调整 Tab 顺序，勾选复选框控制显示，单选按钮设置默认打开的 Tab
+          </a-alert>
+
+          <!-- 统一的 Tab 配置列表 -->
+          <div class="tab-config-list">
+            <div
+              v-for="(tabKey, index) in localConfig.visibleTabs"
+              :key="tabKey"
+              class="tab-config-item"
+              draggable="true"
+              @dragstart="handleDragStart(index, $event)"
+              @dragover.prevent="handleDragOver(index, $event)"
+              @drop="handleDrop(index, $event)"
+              @dragend="handleDragEnd"
+            >
+              <!-- 拖拽手柄 -->
+              <icon-drag-arrow class="drag-handle" />
+
+              <!-- 显示/隐藏复选框 -->
+              <a-checkbox
+                :model-value="isTabVisible(tabKey)"
+                :disabled="!isTabEnabled(tabKey) || isLastVisibleTab(tabKey)"
+                @change="(value) => handleTabVisibilityChange(tabKey, value)"
+              />
+
+              <!-- Tab 标题 -->
+              <span class="tab-title">{{ getTabTitle(tabKey) }}</span>
+
+              <!-- 默认 Tab 单选按钮 -->
+              <a-radio
+                :model-value="localConfig.defaultTab"
+                :value="tabKey"
+                @change="() => localConfig.defaultTab = tabKey"
+              >
+                默认
+              </a-radio>
+            </div>
+
+            <!-- 隐藏的 Tabs -->
+            <a-divider v-if="hasHiddenTabs">隐藏的 Tabs</a-divider>
+            <div
+              v-for="tab in hiddenTabs"
+              :key="'hidden-' + tab.key"
+              class="tab-config-item hidden"
+            >
+              <icon-drag-arrow class="drag-handle disabled" />
+              <a-checkbox
+                :model-value="false"
+                :disabled="!tab.enabled"
+                @change="(value) => handleTabVisibilityChange(tab.key, value)"
+              />
+              <span class="tab-title">{{ tab.title }}</span>
+              <span class="hidden-tag">已隐藏</span>
+            </div>
+          </div>
+
+          <a-alert
+            v-if="localConfig.visibleTabs.length === 0"
+            type="warning"
+          >
+            至少需要保留一个可见的 Tab
+          </a-alert>
+
+          <!-- 保存按钮 -->
+          <a-space>
+            <a-button type="primary" @click="handleSave" :loading="saving">
+              <template #icon>
+                <icon-check />
+              </template>
+              保存配置
+            </a-button>
+            <a-button @click="handleReset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+
+        </a-space>
+      </a-tab-pane>
+
+      <!-- 版本更新 -->
+      <a-tab-pane key="update" title="版本更新">
+        <UpdatePanel />
+      </a-tab-pane>
+    </a-tabs>
+  </a-drawer>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { IconDragArrow, IconCheck, IconRefresh } from '@arco-design/web-vue/es/icon'
+import UpdatePanel from './UpdatePanel.vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  config: {
+    type: Object,
+    required: true
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'save'])
+
+// 状态
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const localConfig = ref({
+  tabs: [],
+  visibleTabs: [],
+  defaultTab: ''
+})
+
+const saving = ref(false)
+const draggedIndex = ref(null)
+
+// 隐藏的 Tabs（不在 visibleTabs 中）
+const hiddenTabs = computed(() => {
+  return localConfig.value.tabs.filter(tab => !localConfig.value.visibleTabs.includes(tab.key))
+})
+
+// 是否有隐藏的 Tabs
+const hasHiddenTabs = computed(() => {
+  return hiddenTabs.value.length > 0
+})
+
+// 初始化本地配置
+watch(() => props.config, (newConfig) => {
+  if (newConfig && newConfig.tabs) {
+    localConfig.value = {
+      tabs: [...newConfig.tabs],
+      visibleTabs: [...newConfig.visibleTabs],
+      defaultTab: newConfig.defaultTab
+    }
+  }
+}, { immediate: true, deep: true })
+
+// 获取 Tab 标题
+const getTabTitle = (key) => {
+  const tab = localConfig.value.tabs.find(t => t.key === key)
+  return tab ? tab.title : key
+}
+
+// 判断 Tab 是否可见
+const isTabVisible = (key) => {
+  return localConfig.value.visibleTabs.includes(key)
+}
+
+// 判断 Tab 是否启用
+const isTabEnabled = (key) => {
+  const tab = localConfig.value.tabs.find(t => t.key === key)
+  return tab ? tab.enabled : false
+}
+
+// 判断是否是最后一个可见 Tab
+const isLastVisibleTab = (key) => {
+  return localConfig.value.visibleTabs.length === 1 && localConfig.value.visibleTabs[0] === key
+}
+
+// 处理单个 Tab 可见性变化
+const handleTabVisibilityChange = (tabKey, visible) => {
+  if (visible) {
+    // 显示 Tab：添加到 visibleTabs 末尾
+    if (!localConfig.value.visibleTabs.includes(tabKey)) {
+      localConfig.value.visibleTabs.push(tabKey)
+    }
+  } else {
+    // 隐藏 Tab：从 visibleTabs 中移除
+    // 至少保留一个 Tab
+    if (localConfig.value.visibleTabs.length <= 1) {
+      Message.warning('至少需要保留一个可见的 Tab')
+      return
+    }
+
+    // 如果隐藏的是默认 Tab，需要更改默认 Tab
+    if (localConfig.value.defaultTab === tabKey) {
+      const remainingTabs = localConfig.value.visibleTabs.filter(k => k !== tabKey)
+      localConfig.value.defaultTab = remainingTabs[0] || ''
+    }
+
+    localConfig.value.visibleTabs = localConfig.value.visibleTabs.filter(k => k !== tabKey)
+  }
+
+  // 同步更新 tabs 数组中的 visible 属性
+  localConfig.value.tabs = localConfig.value.tabs.map(tab => ({
+    ...tab,
+    visible: localConfig.value.visibleTabs.includes(tab.key)
+  }))
+}
+
+// 拖拽开始
+const handleDragStart = (index, event) => {
+  draggedIndex.value = index
+  event.dataTransfer.effectAllowed = 'move'
+  event.target.classList.add('dragging')
+}
+
+// 拖拽经过
+const handleDragOver = (index, event) => {
+  event.preventDefault()
+  event.dataTransfer.dropEffect = 'move'
+}
+
+// 放置
+const handleDrop = (index, event) => {
+  event.preventDefault()
+  if (draggedIndex.value === null || draggedIndex.value === index) return
+
+  const list = [...localConfig.value.visibleTabs]
+  const [removed] = list.splice(draggedIndex.value, 1)
+  list.splice(index, 0, removed)
+  localConfig.value.visibleTabs = list
+}
+
+// 拖拽结束
+const handleDragEnd = (event) => {
+  event.target.classList.remove('dragging')
+  draggedIndex.value = null
+}
+
+// 保存配置
+const handleSave = async () => {
+  // 验证：至少保留一个可见 Tab
+  if (localConfig.value.visibleTabs.length < 1) {
+    Message.error('至少需要保留一个可见的 Tab')
+    return
+  }
+
+  // 验证：默认 Tab 必须在可见列表中
+  if (!localConfig.value.visibleTabs.includes(localConfig.value.defaultTab)) {
+    Message.error('默认 Tab 必须在可见列表中')
+    return
+  }
+
+  // 确保 tabs 数组中的 visible 属性与 visibleTabs 完全同步
+  const syncedTabs = localConfig.value.tabs.map(tab => ({
+    ...tab,
+    visible: localConfig.value.visibleTabs.includes(tab.key)
+  }))
+
+  const configToSave = {
+    tabs: syncedTabs,
+    visibleTabs: [...localConfig.value.visibleTabs],
+    defaultTab: localConfig.value.defaultTab
+  }
+
+  saving.value = true
+
+  try {
+    await emit('save', configToSave)
+  } catch (error) {
+    console.error('保存配置失败:', error)
+    Message.error('保存配置失败：' + (error.message || error))
+  } finally {
+    saving.value = false
+  }
+}
+
+// 重置配置
+const handleReset = () => {
+  if (props.config) {
+    localConfig.value = {
+      tabs: [...props.config.tabs],
+      visibleTabs: [...props.config.visibleTabs],
+      defaultTab: props.config.defaultTab
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tab-config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tab-config-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--color-fill-1);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: move;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.tab-config-item.dragging {
+  opacity: 0.5;
+  background: var(--color-fill-2);
+  transform: scale(0.98);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.tab-config-item:hover {
+  background: var(--color-fill-2);
+  border-color: var(--color-border-2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.tab-config-item.hidden {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.tab-config-item.hidden:hover {
+  border-color: var(--color-border);
+  box-shadow: none;
+}
+
+.drag-handle {
+  color: var(--color-text-3);
+  cursor: grab;
+  flex-shrink: 0;
+  font-size: 18px;
+}
+
+.drag-handle.disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.tab-config-item:hover .drag-handle:not(.disabled) {
+  color: var(--color-text-1);
+}
+
+.tab-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-1);
+}
+
+.hidden-tag {
+  font-size: 12px;
+  color: var(--color-text-3);
+  padding: 2px 8px;
+  background: var(--color-fill-3);
+  border-radius: 4px;
+}
+</style>
--- a/web/src/components/UpdateNotification.vue
+++ b/web/src/components/UpdateNotification.vue
@@ -0,0 +1,405 @@
+<template>
+  <!-- 升级提示弹窗 -->
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, h, nextTick } from 'vue'
+import { Modal, Message, Progress } from '@arco-design/web-vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  updateInfo: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'skip'])
+
+// State
+const downloading = ref(false)
+const installing = ref(false)
+const downloadProgress = ref(0)
+const progressInfo = ref({
+  speed: 0,
+  downloaded: 0,
+  total: 0
+})
+
+// 节流：防止过度更新
+let lastUpdateTime = 0
+const UPDATE_THROTTLE = 100 // 100ms 最小更新间隔
+
+// 模态框实例
+let confirmModalInstance = null
+let progressModalInstance = null
+
+// Computed
+const currentVersion = computed(() => props.updateInfo?.current_version || '0.1.0')
+const latestVersion = computed(() => props.updateInfo?.latest_version || '')
+const changelog = computed(() => props.updateInfo?.changelog || '')
+const forceUpdate = computed(() => props.updateInfo?.force_update || false)
+
+// Watch
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    showUpdateModal()
+  } else {
+    closeModals()
+  }
+})
+
+// Utility functions
+const parseEventData = (event) => {
+  try {
+    return typeof event === 'string' ? JSON.parse(event) : event
+  } catch {
+    return {}
+  }
+}
+
+const formatFileSize = (bytes) => {
+  if (!bytes || bytes < 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+}
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return ''
+  try {
+    const date = new Date(dateStr)
+    if (!isNaN(date.getTime())) {
+      return date.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      }).replace(/\//g, '-')
+    }
+  } catch {}
+  return dateStr
+}
+
+// 显示更新确认弹窗
+const showUpdateModal = () => {
+  if (confirmModalInstance) return
+
+  confirmModalInstance = Modal.confirm({
+    title: forceUpdate.value ? '重要更新' : '发现新版本',
+    content: () => {
+      const elements = [
+        h('div', { style: { marginBottom: '12px' } }, [
+          h('span', { style: { fontSize: '14px', color: 'var(--color-text-2)' } }, '版本：'),
+          h('span', { style: { fontSize: '14px', color: 'var(--color-text-1)', marginLeft: '8px' } }, currentVersion.value),
+          h('span', { style: { fontSize: '14px', color: 'var(--color-text-2)', marginLeft: '12px', marginRight: '12px' } }, '→'),
+          h('span', { style: { fontSize: '16px', color: 'rgb(var(--primary-6))', fontWeight: '500' } }, latestVersion.value)
+        ])
+      ]
+
+      // 更新日志
+      if (changelog.value) {
+        elements.push(
+          h('div', { style: { marginBottom: '12px' } }, [
+            h('div', { style: { fontSize: '13px', color: 'var(--color-text-2)', marginBottom: '8px' } }, '更新内容：'),
+            h('div', {
+              style: {
+                fontSize: '13px',
+                color: 'var(--color-text-2)',
+                lineHeight: '1.8',
+                padding: '12px',
+                background: 'var(--color-fill-1)',
+                borderRadius: '4px',
+                whiteSpace: 'pre-wrap'
+              }
+            }, changelog.value)
+          ])
+        )
+      }
+
+      // 发布日期和文件大小
+      const metadata = []
+      if (props.updateInfo?.release_date) {
+        metadata.push(formatDate(props.updateInfo.release_date))
+      }
+      if (props.updateInfo?.file_size) {
+        metadata.push(formatFileSize(props.updateInfo.file_size))
+      }
+      if (metadata.length > 0) {
+        elements.push(
+          h('div', { style: { marginBottom: '12px', fontSize: '13px', color: 'var(--color-text-3)' } }, metadata.join(' · '))
+        )
+      }
+
+      // 强制更新提示
+      if (forceUpdate.value) {
+        elements.push(
+          h('div', {
+            style: {
+              marginTop: '12px',
+              padding: '12px',
+              background: 'var(--color-danger-light-1)',
+              border: '1px solid var(--color-danger-light-3)',
+              borderRadius: '4px',
+              color: 'rgb(var(--danger-6))',
+              fontSize: '13px'
+            }
+          }, '⚠️ 此版本包含重要的安全更新和问题修复，为保障正常使用，请完成更新后再继续。')
+        )
+      }
+
+      return elements
+    },
+    okText: '立即更新',
+    cancelText: '稍后提醒',
+    closable: !forceUpdate.value,
+    maskClosable: !forceUpdate.value,
+    onOk: async () => {
+      confirmModalInstance = null
+      await handleDownload()
+    },
+    onCancel: () => {
+      confirmModalInstance = null
+      emit('update:modelValue', false)
+      emit('skip')
+    },
+    onBeforeCancel: () => {
+      if (forceUpdate.value) {
+        Message.warning('此版本为强制更新，无法跳过')
+        return false
+      }
+      return true
+    }
+  })
+}
+
+// 生成进度弹窗内容
+const getProgressModalContent = () => {
+  if (downloading.value) {
+    // 后端返回的 progress 是 0-100，Arco Progress 组件期望 0-1
+    const progressValue = Number(Math.min(100, Math.max(0, downloadProgress.value || 0)))
+    const finalProgress = progressValue / 100
+
+    return [
+      h('div', { style: { marginBottom: '16px' } }, [
+        h('div', { style: { marginBottom: '8px', fontSize: '14px', color: 'var(--color-text-2)' } }, '正在下载更新包...')
+      ]),
+      h('div', { style: { marginBottom: '8px' } }, [
+        h(Progress, {
+          percent: finalProgress,
+          showText: true
+        })
+      ]),
+      h('div', { style: { fontSize: '12px', color: 'var(--color-text-3)', marginTop: '8px' } }, [
+        progressInfo.value.total > 0
+          ? `${formatFileSize(progressInfo.value.downloaded)} / ${formatFileSize(progressInfo.value.total)}`
+          : downloadProgress.value > 0 ? '计算文件大小...' : '准备下载...'
+      ]),
+      progressInfo.value.speed > 0
+        ? h('div', { style: { fontSize: '12px', color: 'var(--color-text-3)', marginTop: '4px' } },
+            `下载速度: ${formatFileSize(progressInfo.value.speed)}/s`
+          )
+        : null
+    ]
+  } else if (installing.value) {
+    return [
+      h('div', { style: { marginBottom: '16px' } }, [
+        h('div', { style: { marginBottom: '8px', fontSize: '14px', color: 'var(--color-text-2)' } }, '正在安装更新...')
+      ]),
+      h('div', { style: { fontSize: '12px', color: 'var(--color-text-3)' } }, '请稍候，应用将在安装完成后自动重启...')
+    ]
+  } else {
+    return [
+      h('div', { style: { marginBottom: '16px', textAlign: 'center' } }, [
+        h('div', { style: { fontSize: '16px', color: 'rgb(var(--success-6))', marginBottom: '8px' } }, '✓ 更新完成')
+      ]),
+      h('div', { style: { fontSize: '14px', color: 'var(--color-text-2)' } }, '应用将在几秒后自动重启...')
+    ]
+  }
+}
+
+// 更新进度弹窗内容
+const updateProgressModal = async () => {
+  if (!progressModalInstance) return
+  await nextTick()
+  progressModalInstance.update({
+    content: () => getProgressModalContent()
+  })
+}
+
+// 显示进度弹窗
+const showProgressModal = async () => {
+  if (progressModalInstance) {
+    progressModalInstance.close()
+    progressModalInstance = null
+  }
+
+  downloading.value = true
+  installing.value = false
+  downloadProgress.value = 0
+  progressInfo.value = { speed: 0, downloaded: 0, total: 0 }
+
+  progressModalInstance = Modal.info({
+    title: '更新进度',
+    content: () => getProgressModalContent(),
+    closable: false,
+    maskClosable: false,
+    footer: false
+  })
+
+  await nextTick()
+
+  const stopWatcher = watch(
+    [downloadProgress, downloading, installing, () => progressInfo.value.total, () => progressInfo.value.downloaded, () => progressInfo.value.speed],
+    async () => {
+      await nextTick(updateProgressModal)
+    },
+    { immediate: true, flush: 'post' }
+  )
+
+  if (progressModalInstance) {
+    progressModalInstance._stopWatcher = stopWatcher
+  }
+}
+
+// 关闭进度弹窗
+const closeProgressModal = () => {
+  if (progressModalInstance) {
+    if (progressModalInstance._stopWatcher) {
+      progressModalInstance._stopWatcher()
+      delete progressModalInstance._stopWatcher
+    }
+    progressModalInstance.close()
+    progressModalInstance = null
+  }
+}
+
+// 关闭所有弹窗
+const closeModals = () => {
+  if (confirmModalInstance) {
+    confirmModalInstance.close()
+    confirmModalInstance = null
+  }
+  closeProgressModal()
+}
+
+// 下载更新
+const handleDownload = async () => {
+  await showProgressModal()
+
+  try {
+    const result = await window.go.main.App.DownloadUpdate(props.updateInfo.download_url)
+    if (!result.success) {
+      closeProgressModal()
+      Message.error(result.message || '下载启动失败')
+      downloading.value = false
+    }
+  } catch (error) {
+    console.error('下载失败:', error)
+    closeProgressModal()
+    Message.error('下载失败：' + (error.message || error))
+    downloading.value = false
+  }
+}
+
+// 下载进度处理
+const onDownloadProgress = (event) => {
+  const now = Date.now()
+
+  // 节流：防止过度更新
+  if (now - lastUpdateTime < UPDATE_THROTTLE) {
+    return
+  }
+  lastUpdateTime = now
+
+  const data = parseEventData(event)
+  progressInfo.value = {
+    speed: data.speed || 0,
+    downloaded: data.downloaded || 0,
+    total: data.total || 0
+  }
+
+  // 确保进度值在 0-100 之间，并转换为数字类型
+  const rawProgress = Number(data.progress) || 0
+  const safeProgress = Math.min(100, Math.max(0, Math.round(rawProgress)))
+
+  // 只有当新值与旧值不同时才更新
+  if (safeProgress !== downloadProgress.value) {
+    downloadProgress.value = safeProgress
+  }
+}
+
+// 下载完成处理
+const onDownloadComplete = async (event) => {
+  const data = parseEventData(event)
+
+  if (data.error) {
+    closeProgressModal()
+    Message.error('下载失败：' + data.error)
+    downloading.value = false
+    return
+  }
+
+  if (!data.success || !data.file_path) {
+    closeProgressModal()
+    Message.error('下载完成但数据不完整')
+    downloading.value = false
+    return
+  }
+
+  downloadProgress.value = Math.min(100, Math.max(0, 100))
+  progressInfo.value.downloaded = data.file_size || 0
+  progressInfo.value.total = data.file_size || 0
+  await nextTick(updateProgressModal)
+  await new Promise(r => setTimeout(r, 800))
+
+  await handleInstallDirect(data.file_path)
+}
+
+// 安装更新
+const handleInstallDirect = async (filePath) => {
+  downloading.value = false
+  installing.value = true
+  await updateProgressModal()
+
+  try {
+    const result = await window.go.main.App.InstallUpdate(filePath, true)
+
+    if (result.success || result.data?.success) {
+      await updateProgressModal()
+      setTimeout(() => {
+        closeProgressModal()
+        emit('update:modelValue', false)
+      }, 3000)
+    } else {
+      installing.value = false
+      await updateProgressModal()
+      Message.error(result.message || '安装失败')
+    }
+  } catch (error) {
+    console.error('安装失败:', error)
+    installing.value = false
+    await updateProgressModal()
+    Message.error('安装失败：' + (error.message || error))
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  if (window.runtime?.EventsOn) {
+    window.runtime.EventsOn('download-progress', onDownloadProgress)
+    window.runtime.EventsOn('download-complete', onDownloadComplete)
+  }
+})
+
+onUnmounted(() => {
+  if (window.runtime?.EventsOff) {
+    window.runtime.EventsOff('download-progress')
+    window.runtime.EventsOff('download-complete')
+  }
+  closeModals()
+})
+</script>
--- a/web/src/components/UpdatePanel.vue
+++ b/web/src/components/UpdatePanel.vue
@@ -1,20 +1,35 @@
 <template>
  <div class="update-panel">
-    <a-card title="版本更新">
-      <a-space direction="vertical" style="width: 100%" :size="16">
+    <a-space direction="vertical" style="width: 100%" :size="20">

-        <!-- 当前版本信息 -->
-        <a-descriptions :column="3" bordered>
-          <a-descriptions-item label="当前版本">{{ currentVersion }}</a-descriptions-item>
-          <a-descriptions-item label="最后检查">{{ lastCheckTime }}</a-descriptions-item>
-          <a-descriptions-item label="自动检查">
-            <a-tag :color="config.auto_check_enabled ? 'green' : 'gray'">
-              {{ config.auto_check_enabled ? '已开启' : '已关闭' }}
-            </a-tag>
-          </a-descriptions-item>
-        </a-descriptions>
+      <!-- 当前版本信息 -->
+      <a-card title="版本信息" :bordered="false">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <div class="info-item">
+              <div class="info-label">当前版本</div>
+              <div class="info-value">{{ currentVersion }}</div>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="info-item">
+              <div class="info-label">最后检查</div>
+              <div class="info-value">{{ lastCheckTime }}</div>
+            </div>
+          </a-col>
+        </a-row>

-        <!-- 检查更新 -->
+        <!-- 更新说明 -->
+        <div v-if="updateInfo && updateInfo.changelog" class="changelog-section">
+          <div class="changelog-title">
+            {{ updateInfo.has_update ? '最新版本更新内容' : '当前版本更新内容' }}
+          </div>
+          <div class="changelog">{{ updateInfo.changelog }}</div>
+        </div>
+      </a-card>
+
+      <!-- 检查更新 -->
+      <a-card title="检查更新" :bordered="false">
        <a-space>
          <a-button type="primary" @click="handleCheckUpdate" :loading="checking">
            <template #icon>
@@ -22,12 +37,6 @@
            </template>
            检查更新
          </a-button>
-          <a-button @click="showConfig = true">
-            <template #icon>
-              <icon-settings />
-            </template>
-            更新设置
-          </a-button>
        </a-space>

        <!-- 更新信息 -->
@@ -41,9 +50,6 @@
          </template>
          <div v-if="updateInfo.has_update">
            <p><strong>最新版本：</strong>{{ updateInfo.latest_version }}</p>
-            <p><strong>当前版本：</strong>{{ updateInfo.current_version }}</p>
-            <p v-if="updateInfo.changelog"><strong>更新日志：</strong></p>
-            <div v-if="updateInfo.changelog" class="changelog">{{ updateInfo.changelog }}</div>
            <p><strong>发布日期：</strong>{{ updateInfo.release_date }}</p>
            <a-space style="margin-top: 12px">
              <a-button
@@ -76,7 +82,7 @@
        <!-- 下载进度 -->
        <div v-if="downloadProgress > 0 || downloading" class="download-progress">
          <a-progress
-            :percent="downloadProgress"
+            :percent="downloadProgress / 100"
            :status="downloadStatus"
          />
          <div class="progress-info">
@@ -94,45 +100,16 @@
          <template #title>{{ installResult.success ? '安装成功' : '安装失败' }}</template>
          <p>{{ installResult.message }}</p>
        </a-alert>
+      </a-card>

-      </a-space>
-    </a-card>
-
-    <!-- 更新设置对话框 -->
-    <a-modal
-      v-model:visible="showConfig"
-      title="更新设置"
-      @ok="handleSaveConfig"
-      @cancel="handleCancelConfig"
-      :confirm-loading="saving"
-    >
-      <a-form :model="config" layout="vertical">
-        <a-form-item label="自动检查更新" field="auto_check_enabled">
-          <a-switch v-model="config.auto_check_enabled" />
-          <span style="margin-left: 8px">{{ config.auto_check_enabled ? '开启' : '关闭' }}</span>
-        </a-form-item>
-        <a-form-item label="检查间隔（分钟）" field="check_interval_minutes">
-          <a-input-number
-            v-model="config.check_interval_minutes"
-            :min="1"
-            :max="1440"
-            style="width: 200px"
-          />
-        </a-form-item>
-        <a-form-item label="更新检查地址" field="check_url">
-          <a-input
-            v-model="config.check_url"
-            placeholder="https://example.com/version.json"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
+    </a-space>
  </div>
 </template>

 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
+import { IconCheck, IconClose } from '@arco-design/web-vue/es/icon'

 // 工具函数：解析事件数据
 const parseEventData = (event) => {
@@ -153,7 +130,6 @@ const saving = ref(false)
 const updateInfo = ref(null)
 const downloadedFile = ref(null)
 const installResult = ref(null)
-const showConfig = ref(false)
 const downloadProgress = ref(0)
 const downloadStatus = ref('active')

@@ -215,6 +191,45 @@ const loadConfig = async () => {
  }
 }

+// 配置变化时自动保存（防抖）
+let saveTimer = null
+const handleConfigChange = () => {
+  // 清除之前的定时器
+  if (saveTimer) {
+    clearTimeout(saveTimer)
+  }
+
+  // 设置新的定时器，1秒后保存
+  saveTimer = setTimeout(async () => {
+    await saveConfig()
+  }, 1000)
+}
+
+// 保存配置
+const saveConfig = async () => {
+  saving.value = true
+
+  try {
+    const result = await window.go.main.App.SetUpdateConfig(
+      config.value.auto_check_enabled,
+      config.value.check_interval_minutes,
+      config.value.check_url
+    )
+
+    if (result.success) {
+      Message.success('配置已自动保存')
+      await loadConfig()
+    } else {
+      Message.error(result.message || '保存配置失败')
+    }
+  } catch (error) {
+    console.error('保存配置失败:', error)
+    Message.error('保存配置失败：' + (error.message || error))
+  } finally {
+    saving.value = false
+  }
+}
+
 // 检查更新
 const handleCheckUpdate = async () => {
  checking.value = true
@@ -317,39 +332,6 @@ const handleInstall = async () => {
  })
 }

-// 保存配置
-const handleSaveConfig = async () => {
-  saving.value = true
-
-  try {
-    const result = await window.go.main.App.SetUpdateConfig(
-      config.value.auto_check_enabled,
-      config.value.check_interval_minutes,
-      config.value.check_url
-    )
-
-    if (result.success) {
-      Message.success('配置保存成功')
-      showConfig.value = false
-      await loadConfig()
-    } else {
-      Message.error(result.message || '保存配置失败')
-    }
-  } catch (error) {
-    console.error('保存配置失败:', error)
-    Message.error('保存配置失败：' + (error.message || error))
-  } finally {
-    saving.value = false
-  }
-}
-
-// 取消配置
-const handleCancelConfig = () => {
-  showConfig.value = false
-  // 恢复原始配置
-  loadConfig()
-}
-
 // 监听下载进度事件
 const onDownloadProgress = (event) => {
  const data = parseEventData(event)
@@ -359,7 +341,10 @@ const onDownloadProgress = (event) => {
    downloaded: data.downloaded || 0,
    total: data.total || 0
  }
-  downloadProgress.value = Math.round(data.progress || 0)
+  // 确保进度值在 0-100 之间
+  const rawProgress = data.progress || 0
+  downloadProgress.value = Math.min(100, Math.max(0, Math.round(rawProgress)))
+  console.log('[下载进度] 原始值:', rawProgress, '处理后:', downloadProgress.value)
 }

 // 监听下载完成事件
@@ -395,6 +380,11 @@ onUnmounted(() => {
    window.runtime.EventsOff('download-progress')
    window.runtime.EventsOff('download-complete')
  }
+
+  // 清除定时器
+  if (saveTimer) {
+    clearTimeout(saveTimer)
+  }
 })
 </script>

@@ -404,6 +394,36 @@ onUnmounted(() => {
  margin: 0 auto;
 }

+.info-item {
+  padding: 12px;
+  background: var(--color-fill-1);
+  border-radius: 6px;
+  text-align: center;
+}
+
+.info-label {
+  font-size: 12px;
+  color: var(--color-text-3);
+  margin-bottom: 8px;
+}
+
+.info-value {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text-1);
+}
+
+.changelog-section {
+  margin-top: 16px;
+}
+
+.changelog-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-1);
+  margin-bottom: 8px;
+}
+
 .changelog {
  background: var(--color-fill-2);
  padding: 12px;
@@ -412,6 +432,9 @@ onUnmounted(() => {
  margin: 8px 0;
  max-height: 200px;
  overflow-y: auto;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-text-2);
 }

 .download-progress {
--- a/web/src/composables/useFavoriteFiles.js
+++ b/web/src/composables/useFavoriteFiles.js
@@ -58,6 +58,20 @@ export function useFavoriteFiles(storageKey, options = {}) {
    return favoriteFiles.value.some(fav => fav.path === path)
  }

+  /**
+   * 排序收藏列表（按创建时间倒序，最新的在上面）
+   */
+  const sortFavorites = () => {
+    if (!Array.isArray(favoriteFiles.value)) {
+      return
+    }
+    favoriteFiles.value.sort((a, b) => {
+      const timeA = a.created_at || 0
+      const timeB = b.created_at || 0
+      return timeB - timeA // 倒序：最新的在上面
+    })
+  }
+
  /**
   * 切换收藏状态
   * @param {Object} item - 文件/目录信息
@@ -77,6 +91,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
    if (index > -1) {
      // 已收藏，执行取消收藏
      favoriteFiles.value.splice(index, 1)
+      sortFavorites() // 排序
      save(favoriteFiles.value)

      onRemove(item)
@@ -96,6 +111,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
        created_at: Date.now(), // 添加时间戳
      })

+      sortFavorites() // 排序
      save(favoriteFiles.value)

      onAdd(item)
@@ -125,6 +141,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
    const item = favoriteFiles.value[index]
    favoriteFiles.value.splice(index, 1)

+    sortFavorites() // 排序
    save(favoriteFiles.value)

    onRemove(item)
@@ -161,6 +178,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
    const executeClear = () => {
      const count = favoriteFiles.value.length
      favoriteFiles.value = []
+      sortFavorites() // 保持一致性
      save([])

      Message.success(`已清空 ${count} 个收藏项`)
@@ -211,9 +229,10 @@ export function useFavoriteFiles(storageKey, options = {}) {
    )
  }

-  // 组件挂载时加载数据
+  // 组件挂载时加载数据并排序
  onMounted(() => {
    load()
+    sortFavorites() // 确保加载后的数据是排序的
  })

  return {
@@ -228,6 +247,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
    clearAll,
    getSortedFavorites,
    searchFavorites,
+    sortFavorites,
    load,
    save,
  }
@@ -235,7 +255,7 @@ export function useFavoriteFiles(storageKey, options = {}) {

 /**
 * @typedef {Object} UseFavoriteFilesReturn
- * @property {Ref<Array>} favoriteFiles - 收藏列表
+ * @property {Ref<Array>} favoriteFiles - 收藏列表（自动按时间倒序排列）
 * @property {Function} isFavorite - 判断是否已收藏
 * @property {Function} toggleFavorite - 切换收藏状态
 * @property {Function} removeFavorite - 移除收藏
@@ -243,6 +263,7 @@ export function useFavoriteFiles(storageKey, options = {}) {
 * @property {Function} clearAll - 清空所有收藏
 * @property {Function} getSortedFavorites - 获取排序后的列表
 * @property {Function} searchFavorites - 搜索收藏
+ * @property {Function} sortFavorites - 手动排序收藏列表
 * @property {Function} load - 手动加载数据
 * @property {Function} save - 手动保存数据
 */
--- a/web/src/utils/constants.js
+++ b/web/src/utils/constants.js
@@ -77,7 +77,7 @@ export const FILE_EXTENSIONS = {
  DATABASE: ['db', 'sqlite', 'mdb', 'accdb'],

  // 可执行文件
-  EXECUTABLE: ['exe', 'msi', 'app', 'dmg', 'deb', 'rpm', 'dll', 'so'],
+  EXECUTABLE: ['exe', 'msi', 'app', 'dmg', 'deb', 'rpm', 'dll', 'so', 'jsa', 'jar'],

  // 字体文件
  FONT: ['ttf', 'otf', 'woff', 'woff2', 'eot'],
@@ -113,6 +113,8 @@ export const FILE_ICONS = {

  // 编程语言特定图标
  JAVA: '☕',
+  JAR: '🏺',
+  JSA: '📦',
  GO: '🐹',
  PYTHON: '🐍',
  JAVASCRIPT: '📜',
@@ -184,6 +186,8 @@ const initIconMap = () => {
  const langIcons = {
    // Java
    'java': FILE_ICONS.JAVA,
+    'jar': FILE_ICONS.JAR,
+    'jsa': FILE_ICONS.JSA,
    // Go
    'go': FILE_ICONS.GO,
    // Python