lxy/u-desk
Private
Public Access
1
0
Fork 0
Code Activity

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

Browse Source 
- 新增 ConfigAPI 和 ConfigService 实现配置管理
- 新增 SettingsPanel 和 UpdateNotification 组件
- 文件系统模块化重构，提升代码质量
- 提取公共函数，优化代码结构
- 版本号更新至 0.2.0
This commit is contained in:
绝尘
2026-01-28 22:48:10 +08:00
parent 7e79a53dae
commit b849e6cc46
31 changed files with 3024 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
web/src/App.vue
View File

@@ -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 拖拽样式 -->

25
web/src/api/system.ts
View File

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

23
web/src/components/CodeEditor.vue
View File

@@ -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({

701
web/src/components/FileSystem.vue
View File

@@ -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;
}

369
web/src/components/SettingsPanel.vue Normal file
View File

@@ -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>

405
web/src/components/UpdateNotification.vue Normal file
View File

@@ -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>

203
web/src/components/UpdatePanel.vue
View File

@@ -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 {

25
web/src/composables/useFavoriteFiles.js
View File

@@ -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 - 手动保存数据
*/

6
web/src/utils/constants.js
View File

@@ -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