# FileVibe 智能安全的文件管理助手 **Repository Path**: cnt-code/filevibe ## Basic Information - **Project Name**: FileVibe 智能安全的文件管理助手 - **Description**: FileVibe 是一款融合安全、智能与现代美学的文件管理工具，采用AES-256-CBC加密算法保护文件安全，集成模力方舟API支持多种视觉模型的AI图片解读，支持图片、音频、视频、文本等多格式预览，并内置音乐播放器与幻灯片播放功能，同时以渐变背景、毛玻璃效果和动态光影打造沉浸式现代界面，为用户带来安全高效、流畅愉悦的数字资产管理体验。 - **Primary Language**: JavaScript - **License**: MulanPSL-2.0 - **Default Branch**: project - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-02-15 - **Last Updated**: 2026-02-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: AI, JavaScript, 安全, Nodejs ## README # FileVibe | 安全智能的文件管理助手 FileVibe是一个安全、智能、美观的文件管理和预览工具，提供文件加密保护、AI图片解读、多格式文件预览、音乐播放、幻灯片播放等功能，具有现代化的用户界面和流畅的动画效果。 ![UI](public/image/UI.png) ## 核心功能 ### 🛡️ 文件加密保护 - 使用AES-256-CBC加密算法对文件进行加密存储 - 支持批量加密项目同级目录中的所有文件 - 加密文件自动添加.encrypted扩展名 - 登录后自动解密文件，确保数据安全 - 首次使用时自动引导设置密码 - 密码设置完成后自动开始加密文件 #### 加密前文件： ![加密前](public/image/image.png) #### 加密后文件： ![加密后](public/image/image2.png) ### 📁 文件管理与预览 - 支持浏览项目同级目录中的所有文件和文件夹 - 支持多种文件格式的预览： - 图片文件（JPG、PNG、GIF、WebP等） - 音频文件（MP3、WAV、OGG等） - 视频文件（MP4、AVI、MKV等） - 文本文件和代码文件（支持语法高亮） - Office文件（Word、Excel、PowerPoint） ### 🤖 AI图片解读 - 集成模力方舟API平台，支持多种视觉模型 - 默认使用GLM-4.6V-Flash模型（免费） - 支持流式响应，实时显示AI解读结果 - 支持Markdown格式回复，包含标题、列表、代码块等 ### 🔑 API设置功能 - 在右上角添加模力方舟API设置功能 - 支持多种视觉模型选项，包括： - GLM-4.6V-Flash（免费） - Qwen2.5-VL-32B-Instruct - InternVL3-78B - Qwen2-VL-72B - InternVL2.5-78B - InternVL3-38B - InternVL2-8B - InternVL2.5-26B - GLM-4_5V - Align-DS-V - ERNIE-4.5-Turbo-VL - Kimi-K2.5 - AutoGLM-Phone-9B-Multilingual - Qwen3-VL-30B-A3B-Instruct - Qwen3-VL-4B-Instruct - Qwen3-VL-8B-Instruct - MAI-UI-8B - Qwen2.5-VL-7B-Instruct - GLM-4.6V - 支持保存API密钥到本地存储 - 点击视觉模型选择框时，右侧拉出模型选项面板 - 模型选择列表高度适应窗口高度 ![API](public/image/api.png) ### 🎨 现代化视觉设计 - 渐变背景和半透明毛玻璃效果 - 流畅的动画过渡效果 - 响应式设计，适配不同屏幕尺寸 - 统一的颜色方案和视觉风格 - 动态光影背景效果（多个彩色光源，大范围运动） - 平滑的按钮悬停和点击动画 - 统一的模态框动画效果 ### 🎵 音乐播放 - 内置音乐播放器，支持播放背景音乐 - 支持播放列表管理 - 支持键盘控制（上一首、下一首、播放/暂停） - 模态框动画效果 ![音乐](public/image/music.png) ### 🖼️ 幻灯片播放 - 支持自动播放图片幻灯片 - 支持键盘控制（左箭头、右箭头、空格键暂停/播放、Esc退出） - 支持加密图片的幻灯片播放 - 模态框动画效果 ![幻灯片](public/image/show.png) ### ℹ️ 关于我们 - 应用信息和版本说明 - 模态框动画效果 ## 技术实现 ### 后端技术 - **Node.js**: 运行环境 - **Express.js**: 后端框架，提供API接口 - **Crypto模块**: 实现文件加密/解密功能 - **Mime-types**: 识别文件MIME类型 - **文件系统**: 处理文件读写操作 ### 前端技术 - **HTML5/CSS3**: 页面结构和样式 - **JavaScript (ES6+)**: 前端交互逻辑 - **ES6模块系统**: 使用`import`/`export`组织代码 - **Tailwind CSS**: 响应式UI框架 - **Flex布局**: 页面布局和响应式设计 - **CSS动画**: 实现流畅的过渡效果和动态背景 - **Font Awesome**: 提供丰富的图标库 - **LocalStorage**: 本地存储API密钥和模型选择 ### 模块化设计 - **功能模块化**: 将功能拆分为独立模块（slideshow.js、music-player.js、api-settings.js、about.js等） - **前端模块化**: 使用ES6模块系统组织代码 - **后端模块化**: 分离路由、加密、密码管理等功能 ### 模块化文件说明 - **api-settings.js**: API设置功能，管理模力方舟API密钥和模型选择 - **music-player.js**: 音乐播放功能，支持播放列表和键盘控制 - **slideshow.js**: 幻灯片播放功能，支持自动播放和键盘控制 - **about.js**: 关于我们功能，显示应用信息 ### 动画效果 - **按钮动画**: 点击时的按压效果和悬停时的渐变过渡 - **模态框动画**: 淡入淡出和缩放效果 - **背景动画**: 动态光影效果，增强视觉体验 - **平滑过渡**: 所有UI变化都有平滑的过渡效果 ### 加密系统实现 #### 密钥生成 ```javascript function generateKey(password) { return crypto.createHash('sha256').update(password).digest('base64').substring(0, 32); } ``` #### 文件加密 ```javascript function encryptBuffer(buffer, password) { const key = generateKey(password); const iv = crypto.randomBytes(16); // 16 bytes for AES const cipher = crypto.createCipheriv('aes-256-cbc', Buffer.from(key), iv); const encrypted = Buffer.concat([cipher.update(buffer), cipher.final()]); return Buffer.concat([iv, encrypted]); } ``` #### 文件解密 ```javascript function decryptBuffer(buffer, key) { const finalKey = key.length === 32 ? key : generateKey(key); const iv = buffer.slice(0, 16); const encryptedText = buffer.slice(16); const decipher = crypto.createDecipheriv('aes-256-cbc', Buffer.from(finalKey), iv); const decrypted = Buffer.concat([decipher.update(encryptedText), decipher.final()]); return decrypted; } ``` ### AI图片解读实现 #### API配置 ```javascript // 从localStorage读取API配置 function getOpenAIConfig() { return { baseURL: "https://api.moark.com/v1", apiKey: localStorage.getItem('moarkApiKey') || "", model: localStorage.getItem('moarkModel') || "GLM-4.6V-Flash", }; } ``` #### 图片分析 ```javascript async function analyzeImage(imageUrl, userMessage = "请你解读这张图片") { try { const openAIConfig = getOpenAIConfig(); // 添加流式消息容器 addStreamingMessage(); // 使用fetch直接调用API，启用流式响应 const response = await fetch(`${openAIConfig.baseURL}/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${openAIConfig.apiKey}` }, body: JSON.stringify({ messages: [ { "role": "system", "content": "You are a helpful and harmless assistant. You should think step-by-step." }, { "role": "user", "content": [ { "type": "image_url", "image_url": { "url": imageUrl } }, { "type": "text", "text": userMessage } ] } ], model: openAIConfig.model, max_tokens: 2048, temperature: 0.7, top_p: 1, top_k: -1, frequency_penalty: 0, stream: true // 启用流式响应 }) }); if (!response.ok) { throw new Error(`API请求失败: ${response.statusText}`); } // 处理流式响应 await handleStreamingResponse(response); } catch (error) { console.error('图片分析失败:', error); throw error; } } ``` ### 批量加密脚本 `encrypt-all.js`脚本用于加密项目同级目录中的所有文件： - 递归遍历目录，加密所有文件 - 自动跳过已加密的文件（带.encrypted扩展名） - 跳过应用程序文件（filevibe目录） - 加密后删除原始文件，只保留加密文件 ## 项目结构 ``` filevibe/ ├── public/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ ├── api.js │ │ ├── chat.js # AI聊天和图片解读 │ │ ├── list.js # 文件列表 │ │ ├── main.js # 主模块 │ │ ├── preview.js # 文件预览 │ │ ├── utils.js # 工具函数 │ │ ├── api-settings.js # API设置功能 │ │ ├── music-player.js # 音乐播放功能 │ │ ├── slideshow.js # 幻灯片播放功能 │ │ └── about.js # 关于我们功能 │ ├── music/ # 背景音乐 │ ├── index.html # 主页面 │ └── login.html # 登录页面 ├── LICENSE ├── README.md ├── encrypt-all.js # 批量加密脚本 ├── package-lock.json ├── package.json ├── server.js # 核心后端文件 ├── password-manager.js # 密码管理模块 └── start.bat # 启动脚本 ``` ## 快速开始 ### 1. 安装依赖 ```bash npm install ``` ### 2. 批量加密文件 运行批量加密脚本，加密项目同级目录中的所有文件： ```bash node encrypt-all.js ``` ### 3. 启动服务器 ```bash npm start # 或 node server.js # 或双击 start.bat ``` ### 4. 访问应用 打开浏览器，访问： ``` http://localhost:3000 ``` ### 5. 登录与密码设置 首次使用时，系统会自动引导您设置密码： 1. **设置密码**：输入强密码并确认 2. **密码强度检测**：系统会实时评估密码强度 3. **自动加密**：密码设置完成后，系统会自动开始加密项目同级目录中的所有文件 4. **登录**：加密完成后，使用设置的密码登录系统 ![密码](public/image/login.png) **密码安全提示**： - 使用包含大小写字母、数字和特殊字符的强密码 - 不要与其他网站使用相同的密码 - 定期更换密码 - 忘记密码将无法恢复加密文件，请妥善保管 ![登录](public/image/login2.png) ## 技术亮点 ### 1. 文件加密解密系统 - **AES-256-CBC加密算法**：使用行业标准的对称加密算法，确保文件安全 - **智能密钥管理**：从用户密码生成加密密钥，支持直接使用生成好的32字节密钥 - **加密文件识别**：通过.encrypted扩展名识别加密文件，只对加密文件进行解密操作 - **批量加密功能**：支持递归加密整个目录结构，自动跳过已加密文件 ### 2. AI图片解读 - **模力方舟API集成**：使用专业的AI平台提供图像理解能力 - **Qwen2.5-VL-32B-Instruct模型**：采用先进的多模态大语言模型，提供高质量的图像解读 - **流式响应处理**：实现AI回复的实时反馈，提升用户体验 - **Markdown解析**：将AI回复转换为格式化的HTML，支持标题、列表、代码块等 ### 3. 前端用户体验 - **响应式设计**：适配不同屏幕尺寸，提供良好的移动端体验 - **图片等比例缩放**：自动调整图片尺寸，确保图片在容器内完整显示 - **文件图标识别**：根据文件类型显示对应的图标，提升视觉体验 - **隐藏加密扩展名**：前端显示时自动移除.encrypted扩展名，保持界面整洁 - **键盘快捷键支持**：音乐播放和幻灯片播放支持键盘控制 - **流畅的动画效果**：按钮点击、模态框显示/隐藏都有平滑的动画过渡 - **动态光影背景**：多个彩色光源大范围运动，营造现代感 ### 4. 多格式文件预览 - **图片预览**：支持多种图片格式，实现等比例缩放 - **音频播放**：内置音乐播放器，支持播放列表管理 - **视频预览**：支持在线播放视频文件 - **代码高亮**：支持多种编程语言的语法高亮 - **Office文件支持**：提供Word、Excel、PowerPoint文件的信息展示 ### 5. 模块化设计 - **功能分离**：将幻灯片播放、音乐播放、API设置和关于我们功能拆分为独立模块 - **代码组织**：使用ES6模块系统，提高代码可维护性和可读性 - **按需加载**：各功能模块独立工作，减少初始加载时间 ### 6. 现代化UI设计 - **渐变效果**：按钮和背景使用渐变色，提升视觉层次感 - **毛玻璃效果**：半透明背景和模态框，营造现代感 - **统一的视觉风格**：一致的颜色方案和设计语言 - **平滑的过渡动画**：所有UI变化都有流畅的过渡效果 - **交互反馈**：按钮悬停和点击都有明确的视觉反馈 ## 安全特性 - **密码认证**：只有输入正确密码才能访问和查看文件 - **会话管理**：使用Map存储用户会话信息，确保密钥安全 - **自动加密**：批量加密脚本自动加密所有文件，防止未授权访问 - **加密传输**：所有API请求都需要携带认证令牌，防止未授权访问 - **文件大小限制**：预览文件大小限制为500MB，防止服务器资源滥用 ## 注意事项 1. **密码安全**：密码由用户首次使用时自行设置，确保使用强密码 2. **文件备份**：运行批量加密脚本前，请确保已备份重要文件 3. **存储空间**：加密后文件大小会略有增加，请确保有足够的存储空间 4. **API密钥**：AI图片解读功能需要在API设置中配置模力方舟API密钥 - 可以使用GLM-4.6V-Flash模型（免费） - 其他模型可能需要付费或有调用限制 5. **端口占用**：如果端口3000被占用，请修改代码中的PORT配置 6. **模型选择**：不同模型的性能和功能可能有所差异，请根据实际需求选择 7. **首次使用**：首次使用时，系统会自动引导设置密码并加密文件，请耐心等待 ## 故障排除 ### 1. 端口占用错误 如果出现`EADDRINUSE: address already in use :::3000`错误，请执行以下操作： ```bash # 查找占用端口3000的进程 netstat -ano | findstr :3000 # 终止占用端口的进程（替换<进程ID>为实际的进程ID） taskkill /F /PID <进程ID> ``` ### 2. 解密失败错误 如果出现解密失败错误，请检查： - 密码是否正确 - 文件是否被篡改 - 文件是否为有效的加密文件 ### 3. 音乐播放失败 如果音乐播放失败，请检查： - music文件夹是否存在 - music文件夹中是否有音频文件 - 音频文件格式是否支持 ### 4. 幻灯片播放失败 如果幻灯片播放失败，请检查： - 当前文件夹中是否有图片文件 - 图片文件格式是否支持 ## 更新日志 ### v1.1.0 - 功能模块化：将幻灯片播放、音乐播放、API设置和关于我们功能拆分为独立模块 - API设置功能：添加模力方舟API设置，支持多种视觉模型选择 - 现代化UI：添加渐变背景、毛玻璃效果和动态光影动画 - 动画效果：为按钮、模态框添加流畅的过渡动画 - 密码设置流程优化：实现首次使用自动引导设置密码，完成后自动加密文件 - 登录页面美化：添加灵动的背景光影动画效果 - Gitee widget集成：在登录页面添加Gitee widget - 性能优化：改进代码结构，提高系统响应速度 ### v1.0.0 - 初始版本发布 - 实现文件加密解密功能 - 实现AI图片解读功能 - 实现多格式文件预览 - 实现音乐播放和幻灯片播放功能 ## 技术支持 如果您遇到任何问题，请随时联系我们。 --- **FileVibe** - 安全、智能的文件管理工具