+
+
-
-
+
+
-
-
+ *
+ */
+export function useFavoriteFiles(storageKey, options = {}) {
+ const {
+ maxLength = 50,
+ onAdd = () => {},
+ onRemove = () => {},
+ } = options
+
+ // 使用 localStorage composable 管理收藏列表
+ const { storedValue: favoriteFiles, load, save } = useLocalStorage(
+ storageKey,
+ []
+ )
+
+ /**
+ * 判断文件/目录是否已收藏
+ * @param {string} path - 文件/目录路径
+ * @returns {boolean} 是否已收藏
+ */
+ const isFavorite = (path) => {
+ if (!path || !Array.isArray(favoriteFiles.value)) {
+ return false
+ }
+ return favoriteFiles.value.some(fav => fav.path === path)
+ }
+
+ /**
+ * 切换收藏状态
+ * @param {Object} item - 文件/目录信息
+ * @param {string} item.path - 路径
+ * @param {string} item.name - 名称
+ * @param {boolean} item.is_dir - 是否为目录
+ * @returns {boolean} 操作后是否为收藏状态
+ */
+ const toggleFavorite = (item) => {
+ if (!item || !item.path) {
+ Message.warning('无效的文件信息')
+ return false
+ }
+
+ const index = favoriteFiles.value.findIndex(fav => fav.path === item.path)
+
+ if (index > -1) {
+ // 已收藏，执行取消收藏
+ favoriteFiles.value.splice(index, 1)
+ save(favoriteFiles.value)
+
+ onRemove(item)
+ Message.info(`已取消收藏: ${item.name}`)
+ return false
+ } else {
+ // 未收藏，执行添加收藏
+ if (favoriteFiles.value.length >= maxLength) {
+ Message.warning(`收藏夹已满，最多只能收藏 ${maxLength} 项`)
+ return false
+ }
+
+ favoriteFiles.value.push({
+ path: item.path,
+ name: item.name,
+ is_dir: item.is_dir || false,
+ created_at: Date.now(), // 添加时间戳
+ })
+
+ save(favoriteFiles.value)
+
+ onAdd(item)
+ Message.success(`已收藏: ${item.name}`)
+ return true
+ }
+ }
+
+ /**
+ * 移除收藏
+ * @param {string} path - 文件/目录路径
+ * @returns {boolean} 是否成功移除
+ */
+ const removeFavorite = (path) => {
+ if (!path) {
+ Message.warning('请提供有效的路径')
+ return false
+ }
+
+ const index = favoriteFiles.value.findIndex(fav => fav.path === path)
+
+ if (index === -1) {
+ Message.warning('该路径不在收藏夹中')
+ return false
+ }
+
+ const item = favoriteFiles.value[index]
+ favoriteFiles.value.splice(index, 1)
+
+ save(favoriteFiles.value)
+
+ onRemove(item)
+ Message.info(`已取消收藏: ${item.name}`)
+ return true
+ }
+
+ /**
+ * 打开收藏的文件/目录
+ * @param {string} path - 文件/目录路径
+ * @param {Function} onOpen - 打开回调函数
+ * @returns {Promise} 是否成功打开
+ */
+ const openFavorite = async (path, onOpen) => {
+ if (!path || !onOpen) {
+ return false
+ }
+
+ const item = favoriteFiles.value.find(fav => fav.path === path)
+ if (!item) {
+ Message.warning('收藏项不存在')
+ return false
+ }
+
+ return await onOpen(item)
+ }
+
+ /**
+ * 清空所有收藏
+ * @param {boolean} [confirm=true] - 是否需要确认
+ * @returns {boolean} 是否成功清空
+ */
+ const clearAll = (confirm = true) => {
+ const executeClear = () => {
+ const count = favoriteFiles.value.length
+ favoriteFiles.value = []
+ save([])
+
+ Message.success(`已清空 ${count} 个收藏项`)
+ return true
+ }
+
+ if (!confirm) {
+ return executeClear()
+ }
+
+ // 使用原生 confirm（简单场景）
+ if (window.confirm(`确定要清空所有 ${favoriteFiles.value.length} 个收藏项吗？`)) {
+ return executeClear()
+ }
+
+ return false
+ }
+
+ /**
+ * 获取收藏列表（按创建时间排序）
+ * @param {string} [order='desc'] - 排序方式：'asc'或'desc'
+ * @returns {Array} 排序后的收藏列表
+ */
+ const getSortedFavorites = (order = 'desc') => {
+ const sorted = [...favoriteFiles.value]
+ sorted.sort((a, b) => {
+ const timeA = a.created_at || 0
+ const timeB = b.created_at || 0
+ return order === 'desc' ? timeB - timeA : timeA - timeB
+ })
+ return sorted
+ }
+
+ /**
+ * 按名称搜索收藏
+ * @param {string} keyword - 搜索关键词
+ * @returns {Array} 匹配的收藏列表
+ */
+ const searchFavorites = (keyword) => {
+ if (!keyword || !keyword.trim()) {
+ return favoriteFiles.value
+ }
+
+ const lowerKeyword = keyword.toLowerCase().trim()
+ return favoriteFiles.value.filter(fav =>
+ fav.name.toLowerCase().includes(lowerKeyword) ||
+ fav.path.toLowerCase().includes(lowerKeyword)
+ )
+ }
+
+ // 组件挂载时加载数据
+ onMounted(() => {
+ load()
+ })
+
+ return {
+ // 状态
+ favoriteFiles,
+
+ // 方法
+ isFavorite,
+ toggleFavorite,
+ removeFavorite,
+ openFavorite,
+ clearAll,
+ getSortedFavorites,
+ searchFavorites,
+ load,
+ save,
+ }
+}
+
+/**
+ * @typedef {Object} UseFavoriteFilesReturn
+ * @property {Ref} favoriteFiles - 收藏列表
+ * @property {Function} isFavorite - 判断是否已收藏
+ * @property {Function} toggleFavorite - 切换收藏状态
+ * @property {Function} removeFavorite - 移除收藏
+ * @property {Function} openFavorite - 打开收藏项
+ * @property {Function} clearAll - 清空所有收藏
+ * @property {Function} getSortedFavorites - 获取排序后的列表
+ * @property {Function} searchFavorites - 搜索收藏
+ * @property {Function} load - 手动加载数据
+ * @property {Function} save - 手动保存数据
+ */
+
+/**
+ * 创建多个收藏夹管理实例
+ * @param {Object} config - 配置对象
+ * @returns {Object} 收藏夹管理实例集合
+ *
+ * @example
+ * const {
+ * filesystemFavs,
+ * deviceTestFavs
+ * } = createMultipleFavorites({
+ * filesystem: 'app-filesystem-favorites',
+ * deviceTest: 'app-device-test-favorites'
+ * })
+ */
+export function createMultipleFavorites(config) {
+ const result = {}
+
+ Object.keys(config).forEach(key => {
+ result[key] = useFavoriteFiles(config[key])
+ })
+
+ return result
+}
diff --git a/web/src/composables/useFileOperations.js b/web/src/composables/useFileOperations.js
new file mode 100644
index 0000000..bf0c19f
--- /dev/null
+++ b/web/src/composables/useFileOperations.js
@@ -0,0 +1,372 @@
+/**
+ * 文件操作逻辑封装
+ *
+ * @module composables/useFileOperations
+ * @description 封装所有文件操作逻辑，提供统一的错误处理和状态管理
+ */
+
+import { ref, watch } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import {
+ listDir,
+ readFile as readFileApi,
+ writeFile as writeFileApi,
+ deletePath as deletePathApi,
+} from '@/api'
+
+/**
+ * LocalStorage 键名
+ */
+const STORAGE_KEY_LAST_PATH = 'app-filesystem-last-path'
+
+/**
+ * 文件操作 composable
+ * @param {Object} [options] - 配置选项
+ * @param {Function} [options.onSuccess] - 操作成功回调
+ * @param {Function} [options.onError] - 操作失败回调
+ * @returns {UseFileOperationsReturn} 文件操作API
+ *
+ * @example
+ * const {
+ * filePath,
+ * fileContent,
+ * fileList,
+ * fileLoading,
+ * listDirectory,
+ * readFile,
+ * writeFile,
+ * deleteFile
+ * } = useFileOperations({
+ * onSuccess: (operation, data) => console.log(operation, data),
+ * onError: (operation, error) => console.error(operation, error)
+ * })
+ */
+export function useFileOperations(options = {}) {
+ const { onSuccess = () => {}, onError = () => {} } = options
+
+ // ========== 响应式状态 ==========
+
+ /**
+ * 当前文件/目录路径
+ * @type {Ref}
+ */
+ // 从 localStorage 恢复上次路径
+ const savedPath = localStorage.getItem(STORAGE_KEY_LAST_PATH)
+ const filePath = ref(savedPath || '')
+
+ /**
+ * 文件内容
+ * @type {Ref}
+ */
+ const fileContent = ref('')
+
+ /**
+ * 文件列表
+ * @type {Ref}
+ */
+ const fileList = ref([])
+
+ /**
+ * 加载状态
+ * @type {Ref}
+ */
+ const fileLoading = ref(false)
+
+ /**
+ * 正在删除状态（防止并发删除）
+ * @type {Ref}
+ */
+ const isDeleting = ref(false)
+
+ // ========== 文件操作方法 ==========
+
+ /**
+ * 列出目录内容
+ * @param {string} [path] - 目录路径，不传则使用当前路径
+ * @returns {Promise} 是否成功
+ */
+ const listDirectory = async (path) => {
+ const targetPath = path || filePath.value
+
+ if (!targetPath) {
+ Message.error('请输入目录路径')
+ return false
+ }
+
+ fileLoading.value = true
+ try {
+ const result = await listDir(targetPath)
+ fileList.value = result
+
+ if (!path) {
+ // 如果没有传参，更新当前路径
+ filePath.value = targetPath
+ }
+
+ onSuccess('listDirectory', { path: targetPath, count: result.length })
+ return true
+ } catch (error) {
+ onError('listDirectory', error)
+ Message.error(`列出目录失败: ${error.message || error}`)
+ return false
+ } finally {
+ fileLoading.value = false
+ }
+ }
+
+ /**
+ * 读取文件内容
+ * @param {string} [path] - 文件路径，不传则使用当前路径
+ * @returns {Promise} 是否成功
+ */
+ const readFile = async (path) => {
+ const targetPath = path || filePath.value
+
+ if (!targetPath) {
+ Message.error('请输入文件路径')
+ return false
+ }
+
+ fileLoading.value = true
+ try {
+ const content = await readFileApi(targetPath)
+ fileContent.value = content
+
+ if (!path) {
+ filePath.value = targetPath
+ }
+
+ onSuccess('readFile', { path: targetPath })
+ // 文件读取成功，静默无提示
+ return true
+ } catch (error) {
+ onError('readFile', error)
+ Message.error(`读取文件失败: ${error.message || error}`)
+ return false
+ } finally {
+ fileLoading.value = false
+ }
+ }
+
+ /**
+ * 写入文件内容
+ * @param {string} [content] - 要写入的内容，不传则使用当前内容
+ * @param {string} [path] - 文件路径，不传则使用当前路径
+ * @param {string} [fileName] - 文件名，用于成功提示显示
+ * @param {boolean} [isShortcut=false] - 是否是快捷键触发（快捷键不显示提示）
+ * @returns {Promise} 是否成功
+ */
+ const writeFile = async (content, path, fileName, isShortcut = false) => {
+ // 忽略事件对象（当点击按钮时 Vue 会传递事件对象）
+ const targetContent = (content !== undefined && typeof content === 'string') ? content : fileContent.value
+ const targetPath = (path !== undefined && typeof path === 'string') ? path : filePath.value
+
+ if (!targetPath) {
+ Message.error('请输入文件路径')
+ return false
+ }
+
+ fileLoading.value = true
+ try {
+ await writeFileApi(targetPath, targetContent)
+
+ if (content !== undefined) {
+ fileContent.value = targetContent
+ }
+ if (path) {
+ filePath.value = path
+ }
+
+ onSuccess('writeFile', { path: targetPath })
+
+ // 差异化反馈：快捷键不显示提示，按钮点击显示轻提示
+ if (!isShortcut) {
+ // 按钮点击保存：显示轻量 Toast 提示
+ if (fileName && typeof fileName === 'string') {
+ Message.success({
+ content: `✓ ${fileName} 已保存`,
+ duration: 1500, // 1.5秒后自动消失
+ position: 'bottom' // 底部显示，不打断操作
+ })
+ } else {
+ Message.success({
+ content: '文件已保存',
+ duration: 1500,
+ position: 'bottom'
+ })
+ }
+ }
+ // 快捷键保存：无提示（静默成功）
+
+ return true
+ } catch (error) {
+ onError('writeFile', error)
+ // 保存失败：总是显示醒目错误提示（需手动关闭）
+ Message.error({
+ content: `文件保存失败: ${error.message || error}`,
+ duration: 5000, // 错误提示显示更久
+ closable: true // 允许手动关闭
+ })
+ return false
+ } finally {
+ fileLoading.value = false
+ }
+ }
+
+ /**
+ * 删除文件或目录
+ * 🔒 安全修复：移除 confirm 参数，始终需要用户确认，防止绕过
+ * 🔒 安全修复：添加并发删除检查，防止批量删除攻击
+ * @param {string} [path] - 文件路径，不传则使用当前路径
+ * @returns {Promise} 用户是否确认及操作是否成功
+ */
+ const deleteFile = async (path) => {
+ const targetPath = path || filePath.value
+
+ if (!targetPath) {
+ Message.error('请输入文件路径')
+ return false
+ }
+
+ // 🔒 安全修复：添加调用频率限制（防止批量删除攻击）
+ if (isDeleting.value) {
+ Message.warning('正在删除中，请稍候...')
+ return false
+ }
+
+ const executeDelete = async () => {
+ isDeleting.value = true
+ fileLoading.value = true
+ try {
+ await deletePathApi(targetPath)
+
+ // 清空状态
+ filePath.value = ''
+ fileContent.value = ''
+ fileList.value = []
+
+ onSuccess('deleteFile', { path: targetPath })
+ Message.success('删除成功')
+ return true
+ } catch (error) {
+ onError('deleteFile', error)
+ Message.error(`删除失败: ${error.message || error}`)
+ return false
+ } finally {
+ fileLoading.value = false
+ isDeleting.value = false
+ }
+ }
+
+ // 🔒 安全修复：始终显示确认对话框，无法绕过
+ return new Promise((resolve) => {
+ Modal.confirm({
+ title: '⚠️ 确认删除',
+ content: `确定要删除 ${targetPath} 吗？此操作不可恢复！`,
+ okText: '确定删除',
+ cancelText: '取消',
+ okButtonProps: { status: 'danger' }, // 红色按钮提醒危险
+ onOk: async () => {
+ const result = await executeDelete()
+ resolve(result)
+ },
+ onCancel: () => {
+ resolve(false)
+ },
+ })
+ })
+ }
+
+ /**
+ * 选择文件（智能判断是文件还是目录）
+ * @param {string} path - 文件/目录路径
+ * @param {Array} fileListData - 文件列表数据
+ * @returns {Promise} 是否成功
+ */
+ const selectFile = async (path, fileListData) => {
+ if (!path) return false
+
+ filePath.value = path
+
+ // 从文件列表中查找该项
+ const item = fileListData.find(f => f.path === path)
+
+ if (!item) {
+ // 如果列表中找不到，尝试根据路径判断
+ // 简单判断：路径以 / 或 \ 结尾可能是目录
+ const isDir = path.endsWith('/') || path.endsWith('\\')
+ if (isDir) {
+ return await listDirectory(path)
+ } else {
+ return await readFile(path)
+ }
+ }
+
+ if (item.is_dir) {
+ // 是目录，列出内容
+ return await listDirectory(path)
+ } else {
+ // 是文件，读取内容
+ return await readFile(path)
+ }
+ }
+
+ /**
+ * 清空所有状态
+ */
+ const clearAll = () => {
+ filePath.value = ''
+ fileContent.value = ''
+ fileList.value = []
+ }
+
+ // ========== 持久化 ==========
+
+ /**
+ * 监听路径变化，自动保存到 localStorage
+ * 用于下次启动时恢复上次访问的路径
+ */
+ watch(filePath, (newPath) => {
+ try {
+ if (newPath) {
+ localStorage.setItem(STORAGE_KEY_LAST_PATH, newPath)
+ } else {
+ localStorage.removeItem(STORAGE_KEY_LAST_PATH)
+ }
+ } catch (e) {
+ console.warn('[useFileOperations] 保存路径失败:', e)
+ }
+ })
+
+ // ========== 返回公共API ==========
+
+ return {
+ // 状态
+ filePath,
+ fileContent,
+ fileList,
+ fileLoading,
+
+ // 方法
+ listDirectory,
+ readFile,
+ writeFile,
+ deleteFile,
+ selectFile,
+ clearAll,
+ }
+}
+
+/**
+ * @typedef {Object} UseFileOperationsReturn
+ * @property {Ref} filePath - 当前文件路径
+ * @property {Ref} fileContent - 文件内容
+ * @property {Ref} fileList - 文件列表
+ * @property {Ref} fileLoading - 加载状态
+ * @property {Function} listDirectory - 列出目录
+ * @property {Function} readFile - 读取文件
+ * @property {Function} writeFile - 写入文件
+ * @property {Function} deleteFile - 删除文件
+ * @property {Function} selectFile - 智能选择文件
+ * @property {Function} clearAll - 清空所有状态
+ */
diff --git a/web/src/composables/useLocalStorage.js b/web/src/composables/useLocalStorage.js
new file mode 100644
index 0000000..6261664
--- /dev/null
+++ b/web/src/composables/useLocalStorage.js
@@ -0,0 +1,258 @@
+/**
+ * localStorage 响应式封装
+ *
+ * @module composables/useLocalStorage
+ * @description 提供响应式的 localStorage 数据持久化能力，自动同步数据变化
+ */
+
+import { ref, watch, onMounted } from 'vue'
+
+/**
+ * 创建响应式的 localStorage 绑定
+ * @param {string} key - localStorage 键名
+ * @param {*} defaultValue - 默认值
+ * @param {Object} [options] - 配置选项
+ * @param {boolean} [options.deep=true] - 是否深度监听对象变化
+ * @param {boolean} [options.immediate=true] - 是否立即加载
+ * @returns {UseLocalStorageReturn} 响应式数据和操作方法
+ *
+ * @example
+ * // 基础用法
+ * const { storedValue, load, save, clear } = useLocalStorage('app-user-name', 'Guest')
+ *
+ * // 对象用法
+ * const { storedValue } = useLocalStorage('app-settings', { theme: 'light' })
+ *
+ * @see {@link https://vueuse.org/core/useLocalStorage/} 参考 VueUse 的实现
+ */
+export function useLocalStorage(key, defaultValue, options = {}) {
+ const {
+ deep = true, // 深度监听
+ immediate = true, // 立即加载
+ serializer = JSON, // 序列化器
+ onError = (error) => console.error('localStorage操作失败:', error),
+ } = options
+
+ // 响应式数据
+ const storedValue = ref(defaultValue)
+
+ /**
+ * 从 localStorage 加载数据
+ * @returns {boolean} 是否加载成功
+ */
+ const load = () => {
+ try {
+ const item = localStorage.getItem(key)
+ if (item === null || item === undefined) {
+ storedValue.value = defaultValue
+ return false
+ }
+
+ // 解析数据
+ const parsed = serializer.parse(item)
+ storedValue.value = parsed
+ return true
+ } catch (error) {
+ onError(error)
+ storedValue.value = defaultValue
+ return false
+ }
+ }
+
+ /**
+ * 保存数据到 localStorage
+ * @param {*} value - 要保存的值
+ * @returns {boolean} 是否保存成功
+ */
+ const save = (value) => {
+ try {
+ const serialized = serializer.stringify(value)
+ localStorage.setItem(key, serialized)
+ return true
+ } catch (error) {
+ onError(error)
+ return false
+ }
+ }
+
+ /**
+ * 清除 localStorage 中的数据
+ * @returns {boolean} 是否清除成功
+ */
+ const clear = () => {
+ try {
+ localStorage.removeItem(key)
+ storedValue.value = defaultValue
+ return true
+ } catch (error) {
+ onError(error)
+ return false
+ }
+ }
+
+ // 监听数据变化自动保存
+ watch(
+ storedValue,
+ (newValue) => {
+ save(newValue)
+ },
+ { deep }
+ )
+
+ // 组件挂载时加载数据
+ if (immediate) {
+ onMounted(() => {
+ load()
+ })
+ }
+
+ return {
+ /**
+ * 响应式数据值
+ * @type {Ref}
+ */
+ storedValue,
+
+ /**
+ * 手动加载数据
+ * @type {() => boolean}
+ */
+ load,
+
+ /**
+ * 手动保存数据
+ * @type {(value: any) => boolean}
+ */
+ save,
+
+ /**
+ * 清除数据
+ * @type {() => boolean}
+ */
+ clear,
+ }
+}
+
+/**
+ * @typedef {Object} UseLocalStorageReturn
+ * @property {Ref} storedValue - 响应式数据
+ * @property {() => boolean} load - 手动加载函数
+ * @property {(value: any) => boolean} save - 手动保存函数
+ * @property {() => boolean} clear - 清除数据函数
+ */
+
+/**
+ * 批量管理多个 localStorage 键
+ * @param {Object} config - 配置对象，键为localStorage键名，值为默认值
+ * @returns {Object} 响应式数据对象
+ *
+ * @example
+ * const {
+ * theme: themeRef,
+ * language: languageRef,
+ * settings: settingsRef
+ * } = useMultiLocalStorage({
+ * 'app-theme': 'light',
+ * 'app-language': 'zh-CN',
+ * 'app-settings': { fontSize: 14 }
+ * })
+ */
+export function useMultiLocalStorage(config) {
+ const result = {}
+
+ Object.keys(config).forEach(key => {
+ const { storedValue } = useLocalStorage(key, config[key])
+ result[key] = storedValue
+ })
+
+ return result
+}
+
+/**
+ * localStorage 辅助工具函数
+ */
+export const localStorageHelpers = {
+ /**
+ * 检查 localStorage 是否可用
+ * @returns {boolean}
+ */
+ isAvailable() {
+ try {
+ const test = '__localStorage_test__'
+ localStorage.setItem(test, test)
+ localStorage.removeItem(test)
+ return true
+ } catch {
+ return false
+ }
+ },
+
+ /**
+ * 获取 localStorage 使用大小（近似值）
+ * @returns {number} 大小（字节）
+ */
+ getSize() {
+ let total = 0
+ for (let key in localStorage) {
+ if (localStorage.hasOwnProperty(key)) {
+ total += localStorage[key].length + key.length
+ }
+ }
+ return total
+ },
+
+ /**
+ * 清空所有 localStorage 数据（谨慎使用）
+ * @param {string[]} [excludeKeys] - 要排除的键名列表
+ */
+ clearAll(excludeKeys = []) {
+ const keysToRemove = []
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i)
+ if (!excludeKeys.includes(key)) {
+ keysToRemove.push(key)
+ }
+ }
+ keysToRemove.forEach(key => localStorage.removeItem(key))
+ },
+
+ /**
+ * 导出所有 localStorage 数据为 JSON
+ * @returns {string} JSON 字符串
+ */
+ exportToJSON() {
+ const data = {}
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i)
+ data[key] = localStorage.getItem(key)
+ }
+ return JSON.stringify(data, null, 2)
+ },
+
+ /**
+ * 从 JSON 导入 localStorage 数据
+ * @param {string} jsonString - JSON 字符串
+ * @param {boolean} [merge=false] - 是否合并（false则清空后导入）
+ * @returns {number} 导入的键数量
+ */
+ importFromJSON(jsonString, merge = false) {
+ try {
+ const data = JSON.parse(jsonString)
+
+ if (!merge) {
+ localStorageHelpers.clearAll()
+ }
+
+ let count = 0
+ Object.keys(data).forEach(key => {
+ localStorage.setItem(key, data[key])
+ count++
+ })
+
+ return count
+ } catch (error) {
+ console.error('导入失败:', error)
+ return 0
+ }
+ },
+}
diff --git a/web/src/utils/constants.js b/web/src/utils/constants.js
new file mode 100644
index 0000000..ce50938
--- /dev/null
+++ b/web/src/utils/constants.js
@@ -0,0 +1,302 @@
+/**
+ * 应用全局常量配置
+ *
+ * @module utils/constants
+ * @description 集中管理所有应用常量，避免硬编码和重复定义
+ */
+
+/**
+ * localStorage 键名管理
+ * @description 统一的localStorage键名规范，避免冲突和重复
+ *
+ * 命名规范：app-{feature}-{key}
+ * - app: 应用级前缀
+ * - feature: 功能模块标识（filesystem/device-test等）
+ * - key: 具体的数据项
+ */
+export const STORAGE_KEYS = {
+ // 文件系统模块
+ FILESYSTEM: {
+ FILE_PATH: 'app-filesystem-file-path',
+ FILE_LIST: 'app-filesystem-file-list',
+ FILE_CONTENT: 'app-filesystem-file-content',
+ PATH_HISTORY: 'app-filesystem-path-history',
+ FILE_CONTENT_HEIGHT: 'app-filesystem-file-content-height',
+ PANEL_WIDTH: 'app-filesystem-panel-width',
+ SIDEBAR_VISIBLE: 'app-filesystem-sidebar-visible',
+ FAVORITE_FILES: 'app-filesystem-favorite-files',
+ EDIT_MODE: 'app-filesystem-edit-mode', // HTML/Markdown 编辑模式状态
+ },
+
+ // 设备测试模块
+ DEVICE_TEST: {
+ FILE_PATH: 'app-device-test-file-path',
+ FILE_LIST: 'app-device-test-file-list',
+ FILE_CONTENT: 'app-device-test-file-content',
+ PATH_HISTORY: 'app-device-test-path-history',
+ FILE_CONTENT_HEIGHT: 'app-device-test-file-content-height',
+ PANEL_WIDTH: 'app-device-test-panel-width',
+ FAVORITE_FILES: 'app-device-test-favorite-files',
+ },
+
+ // 通用配置
+ COMMON: {
+ THEME: 'app-common-theme',
+ LANGUAGE: 'app-common-language',
+ },
+}
+
+/**
+ * 文件扩展名分类
+ * @description 用于文件类型识别和图标映射
+ */
+export const FILE_EXTENSIONS = {
+ // 图片文件
+ IMAGE: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico', 'heic', 'heif'],
+
+ // 视频文件
+ VIDEO_BROWSER: ['mp4', 'webm', 'ogg', 'mov', 'm4v'], // 浏览器原生支持
+ VIDEO_EXTERNAL: ['avi', 'mkv', 'wmv', 'flv', 'rmvb', '3gp', 'ts', 'mts'], // 需要外部播放器
+
+ // 音频文件
+ AUDIO: ['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a', 'opus', 'webm'],
+
+ // 文档文件
+ DOCUMENT: ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf', 'odt', 'ods', 'odp'],
+
+ // 压缩文件
+ ARCHIVE: ['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'z', 'cab', 'iso'],
+
+ // 代码文件
+ CODE: [
+ 'js', 'ts', 'jsx', 'tsx', 'vue', 'py', 'java', 'c', 'cpp', 'h', 'go', 'rs', 'php', 'rb', 'cs', 'swift', 'kt',
+ 'scala', 'html', 'htm', 'css', 'scss', 'sass', 'less', 'json', 'xml', 'yaml', 'yml', 'sql', 'sh', 'bat', 'ps1'
+ ],
+
+ // 数据库文件
+ DATABASE: ['db', 'sqlite', 'mdb', 'accdb'],
+
+ // 可执行文件
+ EXECUTABLE: ['exe', 'msi', 'app', 'dmg', 'deb', 'rpm', 'dll', 'so'],
+
+ // 字体文件
+ FONT: ['ttf', 'otf', 'woff', 'woff2', 'eot'],
+}
+
+/**
+ * 文件类型图标映射
+ * @description 根据文件扩展名返回对应的图标
+ */
+export const FILE_ICONS = {
+ // 图片
+ IMAGE: '🖼️',
+
+ // 视频
+ VIDEO: '🎬',
+
+ // 音频
+ AUDIO: '🎵',
+
+ // 文档
+ PDF: '📕',
+ DOC: '📘',
+ XLS: '📗',
+ PPT: '📙',
+ TXT: '📃',
+ DOCUMENT: '📄',
+
+ // 压缩包
+ ARCHIVE: '📦',
+
+ // 代码
+ CODE: '💻',
+
+ // 编程语言特定图标
+ JAVA: '☕',
+ GO: '🐹',
+ PYTHON: '🐍',
+ JAVASCRIPT: '📜',
+ TYPESCRIPT: '💠',
+ HTML: '🌐',
+ CSS: '🎨',
+ SQL: '🗃️',
+ JSON: '📋',
+ XML: '📰',
+ YAML: '⚙️',
+ SHELL: '🐚',
+ C: '🔷',
+ CPP: '🔶',
+ RUST: '🦀',
+ PHP: '🐘',
+ RUBY: '💎',
+
+ // 数据库
+ DATABASE: '🗄️',
+
+ // 可执行文件
+ EXECUTABLE: '⚙️',
+
+ // 字体
+ FONT: '🔤',
+
+ // 文件夹
+ FOLDER: '📁',
+
+ // 默认文件
+ FILE: '📄',
+}
+
+/**
+ * 文件类型到图标的映射表
+ * @description 扩展名 -> 图标 的快速查找表
+ */
+export const FILE_ICON_MAP = new Map()
+
+// 初始化图标映射表
+const initIconMap = () => {
+ // 图片
+ FILE_EXTENSIONS.IMAGE.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.IMAGE))
+
+ // 视频
+ FILE_EXTENSIONS.VIDEO_BROWSER.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.VIDEO))
+ FILE_EXTENSIONS.VIDEO_EXTERNAL.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.VIDEO))
+
+ // 音频
+ FILE_EXTENSIONS.AUDIO.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.AUDIO))
+
+ // 文档
+ FILE_EXTENSIONS.DOCUMENT.forEach(ext => {
+ if (ext === 'pdf') FILE_ICON_MAP.set(ext, FILE_ICONS.PDF)
+ else if (['doc', 'docx'].includes(ext)) FILE_ICON_MAP.set(ext, FILE_ICONS.DOC)
+ else if (['xls', 'xlsx'].includes(ext)) FILE_ICON_MAP.set(ext, FILE_ICONS.XLS)
+ else if (['ppt', 'pptx'].includes(ext)) FILE_ICON_MAP.set(ext, FILE_ICONS.PPT)
+ else if (ext === 'txt') FILE_ICON_MAP.set(ext, FILE_ICONS.TXT)
+ else FILE_ICON_MAP.set(ext, FILE_ICONS.DOCUMENT)
+ })
+
+ // 压缩文件
+ FILE_EXTENSIONS.ARCHIVE.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.ARCHIVE))
+
+ // 代码文件（通用）
+ FILE_EXTENSIONS.CODE.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.CODE))
+
+ // 编程语言特定图标
+ const langIcons = {
+ // Java
+ 'java': FILE_ICONS.JAVA,
+ // Go
+ 'go': FILE_ICONS.GO,
+ // Python
+ 'py': FILE_ICONS.PYTHON,
+ 'pyw': FILE_ICONS.PYTHON,
+ // JavaScript/TypeScript
+ 'js': FILE_ICONS.JAVASCRIPT,
+ 'jsx': FILE_ICONS.JAVASCRIPT,
+ 'ts': FILE_ICONS.TYPESCRIPT,
+ 'tsx': FILE_ICONS.TYPESCRIPT,
+ 'mjs': FILE_ICONS.JAVASCRIPT,
+ 'cjs': FILE_ICONS.JAVASCRIPT,
+ // Web
+ 'html': FILE_ICONS.HTML,
+ 'htm': FILE_ICONS.HTML,
+ 'xhtml': FILE_ICONS.HTML,
+ 'css': FILE_ICONS.CSS,
+ 'scss': FILE_ICONS.CSS,
+ 'sass': FILE_ICONS.CSS,
+ 'less': FILE_ICONS.CSS,
+ // Data
+ 'json': FILE_ICONS.JSON,
+ 'xml': FILE_ICONS.XML,
+ 'yaml': FILE_ICONS.YAML,
+ 'yml': FILE_ICONS.YAML,
+ // Shell
+ 'sh': FILE_ICONS.SHELL,
+ 'bash': FILE_ICONS.SHELL,
+ 'zsh': FILE_ICONS.SHELL,
+ 'fish': FILE_ICONS.SHELL,
+ 'cmd': FILE_ICONS.SHELL,
+ 'bat': FILE_ICONS.SHELL,
+ 'ps1': FILE_ICONS.SHELL,
+ // C/C++
+ 'c': FILE_ICONS.C,
+ 'h': FILE_ICONS.C,
+ 'cpp': FILE_ICONS.CPP,
+ 'hpp': FILE_ICONS.CPP,
+ 'cc': FILE_ICONS.CPP,
+ 'cxx': FILE_ICONS.CPP,
+ // Rust
+ 'rs': FILE_ICONS.RUST,
+ // PHP
+ 'php': FILE_ICONS.PHP,
+ // Ruby
+ 'rb': FILE_ICONS.RUBY,
+ 'gem': FILE_ICONS.RUBY,
+ // SQL
+ 'sql': FILE_ICONS.SQL,
+ }
+
+ Object.keys(langIcons).forEach(ext => FILE_ICON_MAP.set(ext, langIcons[ext]))
+
+ // 数据库
+ FILE_EXTENSIONS.DATABASE.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.DATABASE))
+
+ // 可执行文件
+ FILE_EXTENSIONS.EXECUTABLE.slice(0, 6).forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.EXECUTABLE))
+
+ // 字体
+ FILE_EXTENSIONS.FONT.forEach(ext => FILE_ICON_MAP.set(ext, FILE_ICONS.FONT))
+}
+
+// 执行初始化
+initIconMap()
+
+/**
+ * 常用路径快捷方式
+ * @description 系统常用路径的emoji标识
+ */
+export const PATH_ICONS = {
+ DESKTOP: '🖥️',
+ DOCUMENTS: '📁',
+ DOWNLOADS: '📥',
+ HOME: '🏠',
+ ROOT: '📂',
+ DRIVE: '💿',
+}
+
+/**
+ * 文件大小单位
+ * @description 用于文件大小格式化的单位数组
+ */
+export const BYTE_UNITS = ['B', 'KMGTPE']
+
+/**
+ * 默认配置值
+ */
+export const DEFAULTS = {
+ // 路径历史最大记录数
+ MAX_HISTORY_LENGTH: 20,
+
+ // 收藏夹最大数量
+ MAX_FAVORITES_LENGTH: 50,
+
+ // 文件内容高度范围（px）
+ MIN_CONTENT_HEIGHT: 100,
+ MAX_CONTENT_HEIGHT: 800,
+ DEFAULT_CONTENT_HEIGHT: 200,
+
+ // 面板宽度范围（%）
+ MIN_PANEL_WIDTH: 20,
+ MAX_PANEL_WIDTH: 80,
+ DEFAULT_PANEL_WIDTH: 50,
+
+ // 侧边栏宽度（px）
+ SIDEBAR_WIDTH: 220,
+}
+
+/**
+ * 文件大小格式化配置
+ */
+export const FILE_SIZE_FORMAT = {
+ UNIT: 1024, // 使用1024进制（KiB, MiB等）
+ DECIMAL_PLACES: 2, // 保留小数位数
+}
diff --git a/web/src/utils/debugLog.js b/web/src/utils/debugLog.js
new file mode 100644
index 0000000..aad6b9e
--- /dev/null
+++ b/web/src/utils/debugLog.js
@@ -0,0 +1,81 @@
+/**
+ * 调试日志工具
+ *
+ * 通过环境变量控制调试日志输出
+ * 开发环境：输出详细日志
+ * 生产环境：仅输出错误
+ */
+
+// 检测是否为开发环境
+const isDevelopment = import.meta.env.DEV || import.meta.env.MODE === 'development'
+
+/**
+ * 调试日志输出（仅开发环境）
+ * @param {...any} args - 要输出的参数
+ */
+export const debugLog = (...args) => {
+ if (isDevelopment) {
+ console.log('[FileSystem]', ...args)
+ }
+}
+
+/**
+ * 警告日志（所有环境）
+ * @param {...any} args - 要输出的参数
+ */
+export const debugWarn = (...args) => {
+ console.warn('[FileSystem]', ...args)
+}
+
+/**
+ * 错误日志（所有环境）
+ * @param {...any} args - 要输出的参数
+ */
+export const debugError = (...args) => {
+ console.error('[FileSystem]', ...args)
+}
+
+/**
+ * 分组日志开始（仅开发环境）
+ * @param {string} label - 分组标签
+ */
+export const debugGroup = (label) => {
+ if (isDevelopment) {
+ console.group(`[FileSystem] ${label}`)
+ }
+}
+
+/**
+ * 分组日志结束（仅开发环境）
+ */
+export const debugGroupEnd = () => {
+ if (isDevelopment) {
+ console.groupEnd()
+ }
+}
+
+/**
+ * 条件日志（仅在满足条件时输出）
+ * @param {boolean} condition - 是否输出
+ * @param {...any} args - 要输出的参数
+ */
+export const debugIf = (condition, ...args) => {
+ if (isDevelopment && condition) {
+ console.log('[FileSystem]', ...args)
+ }
+}
+
+/**
+ * 性能日志（仅开发环境）
+ * @param {string} label - 性能标签
+ * @param {Function} fn - 要测量的函数
+ */
+export const debugTime = (label, fn) => {
+ if (isDevelopment) {
+ console.time(`[FileSystem] ${label}`)
+ const result = fn()
+ console.timeEnd(`[FileSystem] ${label}`)
+ return result
+ }
+ return fn()
+}
diff --git a/web/src/utils/fileUtils.js b/web/src/utils/fileUtils.js
new file mode 100644
index 0000000..d320e4d
--- /dev/null
+++ b/web/src/utils/fileUtils.js
@@ -0,0 +1,321 @@
+/**
+ * 文件工具函数集合
+ *
+ * @module utils/fileUtils
+ * @description 提供文件相关的通用工具函数，避免代码重复
+ */
+
+import { FILE_ICON_MAP, FILE_ICONS, BYTE_UNITS, FILE_SIZE_FORMAT, FILE_EXTENSIONS } from './constants'
+
+/**
+ * 格式化文件大小
+ * @param {number} bytes - 文件大小（字节）
+ * @returns {string} 格式化后的文件大小字符串
+ *
+ * @example
+ * formatBytes(1024) // "1.00 KB"
+ * formatBytes(1048576) // "1.00 MB"
+ * formatBytes(0) // "0 B"
+ */
+export function formatBytes(bytes) {
+ if (!bytes || bytes === 0) return '0 B'
+
+ const unit = FILE_SIZE_FORMAT.UNIT
+ const decimals = FILE_SIZE_FORMAT.DECIMAL_PLACES
+
+ if (bytes < unit) return bytes + ' B'
+
+ const exp = Math.floor(Math.log(bytes) / Math.log(unit))
+ const value = bytes / Math.pow(unit, exp)
+ const unitSymbol = BYTE_UNITS[1][exp - 1] + 'B'
+
+ return value.toFixed(decimals) + ' ' + unitSymbol
+}
+
+/**
+ * 从文件路径中提取文件名
+ * @param {string} path - 文件路径
+ * @returns {string} 文件名
+ *
+ * @example
+ * getFileName('/home/user/docs/file.txt') // "file.txt"
+ * getFileName('C:\\Users\\user\\file.txt') // "file.txt"
+ * getFileName('file.txt') // "file.txt"
+ */
+export function getFileName(path) {
+ if (!path) return ''
+
+ // 统一分隔符为正斜杠
+ const normalizedPath = path.replace(/\\/g, '/')
+
+ // 分割路径并取最后一部分
+ const parts = normalizedPath.split('/')
+
+ return parts[parts.length - 1] || path
+}
+
+/**
+ * 从文件路径中提取文件扩展名
+ * @param {string} path - 文件路径
+ * @returns {string} 扩展名（小写，不含点号）
+ *
+ * @example
+ * getFileExtension('/path/to/file.txt') // "txt"
+ * getFileExtension('/path/to/file.TXT') // "txt"
+ * getFileExtension('/path/to/file') // ""
+ */
+export function getFileExtension(path) {
+ if (!path) return ''
+
+ const fileName = getFileName(path)
+ const lastDotIndex = fileName.lastIndexOf('.')
+
+ if (lastDotIndex === -1 || lastDotIndex === fileName.length - 1) {
+ return ''
+ }
+
+ return fileName.substring(lastDotIndex + 1).toLowerCase()
+}
+
+/**
+ * 根据文件信息获取对应的图标
+ * @param {Object} fileInfo - 文件信息对象
+ * @param {boolean} fileInfo.is_dir - 是否为目录
+ * @param {string} fileInfo.name - 文件名
+ * @returns {string} 文件图标（emoji）
+ *
+ * @example
+ * getFileIcon({ is_dir: true }) // "📁"
+ * getFileIcon({ is_dir: false, name: 'image.png' }) // "🖼️"
+ * getFileIcon({ is_dir: false, name: 'document.pdf' }) // "📕"
+ */
+export function getFileIcon(fileInfo) {
+ if (!fileInfo) return FILE_ICONS.FILE
+
+ // 如果是目录
+ if (fileInfo.is_dir) {
+ return FILE_ICONS.FOLDER
+ }
+
+ // 获取文件扩展名
+ const ext = getFileExtension(fileInfo.name)
+
+ // 从映射表中查找图标
+ return FILE_ICON_MAP.get(ext) || FILE_ICONS.FILE
+}
+
+/**
+ * 判断文件是否为图片
+ * @param {string} path - 文件路径
+ * @returns {boolean} 是否为图片文件
+ */
+export function isImageFile(path) {
+ const ext = getFileExtension(path)
+ return FILE_EXTENSIONS.IMAGE.includes(ext)
+}
+
+/**
+ * 判断文件是否为视频
+ * @param {string} path - 文件路径
+ * @returns {boolean} 是否为视频文件
+ */
+export function isVideoFile(path) {
+ const ext = getFileExtension(path)
+ return [...FILE_EXTENSIONS.VIDEO_BROWSER, ...FILE_EXTENSIONS.VIDEO_EXTERNAL].includes(ext)
+}
+
+/**
+ * 判断文件是否为音频
+ * @param {string} path - 文件路径
+ * @returns {boolean} 是否为音频文件
+ */
+export function isAudioFile(path) {
+ const ext = getFileExtension(path)
+ return FILE_EXTENSIONS.AUDIO.includes(ext)
+}
+
+/**
+ * 判断文件是否为PDF
+ * @param {string} path - 文件路径
+ * @returns {boolean} 是否为PDF文件
+ */
+export function isPdfFile(path) {
+ return getFileExtension(path) === 'pdf'
+}
+
+/**
+ * 规范化文件路径（将反斜杠转换为正斜杠，并进行URL编码）
+ * @param {string} path - 原始路径
+ * @param {boolean} encode - 是否进行URL编码（用于URL路径）
+ * @returns {string} 规范化后的路径
+ *
+ * @example
+ * normalizeFilePath('C:\\Users\\user\\file.txt') // "C:/Users/user/file.txt"
+ * normalizeFilePath('/home/user/file.txt') // "/home/user/file.txt"
+ * normalizeFilePath('E:/中文路径/file.pdf', true) // "E:/%E4%B8%AD%E6%96%87%E8%B7%AF%E5%BE%84/file.pdf"
+ */
+export function normalizeFilePath(path, encode = false) {
+ if (!path) return ''
+ const normalized = path.replace(/\\/g, '/')
+
+ // 如果需要编码，则使用 encodeURIComponent
+ if (encode) {
+ const parts = normalized.split('/')
+ // 只对包含需要编码字符的路径段进行编码
+ // Windows 路径格式: E:/path/to/file，第一部分是盘符（如 E:），不应编码
+ return parts.map((segment, index) => {
+ // 盘符部分（如 "E:"）不编码
+ if (index === 0 && /^[A-Za-z]:$/.test(segment)) {
+ return segment
+ }
+ // 检查是否需要编码（包含非ASCII字符或特殊字符）
+ if (/[^A-Za-z0-9\-_.~]/.test(segment)) {
+ return encodeURIComponent(segment)
+ }
+ return segment
+ }).join('/')
+ }
+
+ return normalized
+}
+
+/**
+ * 获取文件类型的友好名称
+ * @param {string} path - 文件路径
+ * @returns {string} 文件类型名称
+ *
+ * @example
+ * getFileTypeName('image.png') // "PNG图片"
+ * getFileTypeName('document.pdf') // "PDF文档"
+ * getFileTypeName('unknown.xyz') // "XYZ文件"
+ */
+export function getFileTypeName(path) {
+ const ext = getFileExtension(path)
+ const extUpper = ext.toUpperCase()
+
+ // 图片
+ if (['JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'SVG', 'WEBP'].includes(extUpper)) {
+ return `${extUpper}图片`
+ }
+
+ // 视频
+ if (['MP4', 'WEBM', 'AVI', 'MKV'].includes(extUpper)) {
+ return `${extUpper}视频`
+ }
+
+ // 音频
+ if (['MP3', 'WAV', 'FLAC', 'AAC'].includes(extUpper)) {
+ return `${extUpper}音频`
+ }
+
+ // PDF
+ if (extUpper === 'PDF') {
+ return 'PDF文档'
+ }
+
+ // 文档
+ if (['DOC', 'DOCX', 'XLS', 'XLSX', 'PPT', 'PPTX'].includes(extUpper)) {
+ return `${extUpper}文档`
+ }
+
+ // 代码
+ if (['JS', 'TS', 'PY', 'JAVA', 'GO', 'RS', 'CPP'].includes(extUpper)) {
+ return `${extUpper}代码`
+ }
+
+ // 默认返回扩展名
+ return ext ? `${extUpper}文件` : '文件'
+}
+
+/**
+ * 判断文件是否为二进制文件
+ * @param {string} path - 文件路径
+ * @returns {boolean} 是否为二进制文件
+ */
+export function isBinaryFile(path) {
+ const ext = getFileExtension(path)
+ const binaryExtensions = [
+ 'exe', 'dll', 'so', 'dylib', // 可执行文件
+ 'zip', 'rar', '7z', 'tar', 'gz', 'bz2', // 压缩文件
+ 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', // Office文档
+ 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'mp3', 'mp4', // 媒体文件
+ 'eot', 'ttf', 'otf', 'woff', 'woff2', // 字体文件
+ ]
+ return binaryExtensions.includes(ext)
+}
+
+/**
+ * 检查路径是否为绝对路径
+ * @param {string} path - 文件路径
+ * @returns {boolean} 是否为绝对路径
+ *
+ * @example
+ * isAbsolutePath('C:\\Users') // true (Windows)
+ * isAbsolutePath('/home/user') // true (Unix)
+ * isAbsolutePath('folder/file') // false
+ */
+export function isAbsolutePath(path) {
+ if (!path) return false
+
+ // Windows路径：盘符开头
+ if (/^[A-Za-z]:\\/.test(path)) return true
+
+ // Unix路径：以 / 开头
+ if (path.startsWith('/')) return true
+
+ return false
+}
+
+/**
+ * 拼接路径片段
+ * @param {...string} parts - 路径片段
+ * @returns {string} 拼接后的路径
+ *
+ * @example
+ * joinPaths('/home', 'user', 'docs') // "/home/user/docs"
+ * joinPaths('C:\\Users', 'user') // "C:\\Users\\user"
+ */
+export function joinPaths(...parts) {
+ return parts.join('/').replace(/\/+/g, '/')
+}
+
+/**
+ * 获取父目录路径
+ * @param {string} path - 文件路径
+ * @returns {string} 父目录路径
+ *
+ * @example
+ * getParentPath('/home/user/docs/file.txt') // "/home/user/docs"
+ * getParentPath('/home/user/docs/') // "/home/user"
+ */
+export function getParentPath(path) {
+ if (!path) return ''
+
+ const normalizedPath = normalizeFilePath(path)
+ const lastSlashIndex = normalizedPath.lastIndexOf('/')
+
+ if (lastSlashIndex <= 0) {
+ return '/' // 根目录
+ }
+
+ return normalizedPath.substring(0, lastSlashIndex)
+}
+
+/**
+ * 清理文件名，移除非法字符
+ * @param {string} filename - 原始文件名
+ * @param {string} [replacement='_'] - 替换字符
+ * @returns {string} 清理后的文件名
+ *
+ * @example
+ * sanitizeFileName('file/name.txt') // "file_name.txt"
+ * sanitizeFileName('file:name.txt', '-') // "file-name.txt"
+ */
+export function sanitizeFileName(filename, replacement = '_') {
+ if (!filename) return ''
+
+ // Windows不允许的字符: < > : " / \ | ? *
+ const illegalChars = /[<>:"/\\|?*]/g
+
+ return filename.replace(illegalChars, replacement)
+}
diff --git a/web/vite.config.js b/web/vite.config.js
index 332f554..09764ae 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -11,7 +11,49 @@ export default defineConfig({
},
build: {
outDir: 'dist',
- emptyOutDir: true
+ emptyOutDir: true,
+ rollupOptions: {
+ output: {
+ manualChunks: {
+ 'codemirror': [
+ '@codemirror/view',
+ '@codemirror/state',
+ '@codemirror/language',
+ '@codemirror/commands',
+ '@codemirror/lang-javascript',
+ '@codemirror/lang-java',
+ '@codemirror/lang-python',
+ '@codemirror/lang-html',
+ '@codemirror/lang-css',
+ '@codemirror/lang-markdown',
+ '@codemirror/lang-sql'
+ ]
+ }
+ }
+ }
+ },
+ optimizeDeps: {
+ include: [
+ '@codemirror/view',
+ '@codemirror/state',
+ '@codemirror/language',
+ '@codemirror/commands',
+ '@codemirror/lang-javascript',
+ '@codemirror/lang-java',
+ '@codemirror/lang-python',
+ '@codemirror/lang-html',
+ '@codemirror/lang-css',
+ '@codemirror/lang-markdown',
+ '@codemirror/lang-sql',
+ '@codemirror/legacy-modes/mode/go',
+ '@codemirror/legacy-modes/mode/clike',
+ '@codemirror/legacy-modes/mode/ruby',
+ '@codemirror/legacy-modes/mode/rust',
+ '@codemirror/legacy-modes/mode/shell',
+ '@codemirror/legacy-modes/mode/yaml',
+ '@codemirror/legacy-modes/mode/xml'
+ ]
}
})
+
+
-
-
-
-
+
-
-
+
+
-
+ 📋 文件列表
+ {{ fileList.length }} 项
+
+
+
+ {{ item.name }}
+ {{ formatBytes(item.size) }}
+
+
+
+
+ 📭
+ 此文件夹为空
+
+
-
+
diff --git a/web/src/components/UpdatePanel.vue b/web/src/components/UpdatePanel.vue
index 026b909..28cff0e 100644
--- a/web/src/components/UpdatePanel.vue
+++ b/web/src/components/UpdatePanel.vue
@@ -383,14 +383,18 @@ onMounted(async () => {
await loadConfig()
// 监听下载进度事件
- window.EventsOn('download-progress', onDownloadProgress)
- window.EventsOn('download-complete', onDownloadComplete)
+ if (window.runtime?.EventsOn) {
+ window.runtime.EventsOn('download-progress', onDownloadProgress)
+ window.runtime.EventsOn('download-complete', onDownloadComplete)
+ }
})
onUnmounted(() => {
// 取消事件监听
- window.EventsOff('download-progress')
- window.EventsOff('download-complete')
+ if (window.runtime?.EventsOff) {
+ window.runtime.EventsOff('download-progress')
+ window.runtime.EventsOff('download-complete')
+ }
})
diff --git a/web/src/composables/useFavoriteFiles.js b/web/src/composables/useFavoriteFiles.js
new file mode 100644
index 0000000..cf6f3b4
--- /dev/null
+++ b/web/src/composables/useFavoriteFiles.js
@@ -0,0 +1,272 @@
+/**
+ * 收藏夹管理 composable
+ *
+ * @module composables/useFavoriteFiles
+ * @description 封装收藏夹的增删改查逻辑，支持持久化存储
+ */
+
+import { ref, onMounted } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { useLocalStorage } from './useLocalStorage'
+
+/**
+ * 收藏夹 composable
+ * @param {string} storageKey - localStorage 键名
+ * @param {Object} [options] - 配置选项
+ * @param {number} [options.maxLength=50] - 最大收藏数量
+ * @param {Function} [options.onAdd] - 添加收藏回调
+ * @param {Function} [options.onRemove] - 移除收藏回调
+ * @returns {UseFavoriteFilesReturn} 收藏夹操作API
+ *
+ * @example
+ * const {
+ * favoriteFiles,
+ * isFavorite,
+ * toggleFavorite,
+ * removeFavorite,
+ * clearAll
+ * } = useFavoriteFiles('app-favorites')
+ *
+ * // 在模板中使用
+ *
- ![图片预览]()
-
-
-
-
- {{ getImageType() }}
- {{ formatBytes(imageSize) }}
-
+
+
+
+
+
+
+
+
+
+
+ 🖼️ 图片预览
+ 🎬 视频预览
+ 🎵 音频预览
+ 📕 PDF 预览
+ 🌐 HTML 预览
+ 📝 Markdown 预览
+ 📝 文件内容
+
+ {{ currentFileName }}
+
+
+
+
+
+
+ ![预览]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+