重构：文件系统模块化架构，优化应用启动流程
This commit is contained in:
302
web/src/utils/constants.js
Normal file
302
web/src/utils/constants.js
Normal file
@@ -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, // 保留小数位数
|
||||
}
|
||||
Reference in New Issue
Block a user