🎯 项目简介

随机查看是一个功能强大的 uTools 插件，专为网页开发者和设计师设计。它可以帮助你快速浏览和预览项目文件夹中的图片、视频和 HTML 文件，支持随机查看和顺序浏览模式。

🚀 主要功能

1. 🖼️ 随机查看图片

- 随机浏览：从指定文件夹中随机显示图片
- 顺序导航：支持上一个/下一个按钮切换图片
- 缩放拖拽：图片支持鼠标滚轮缩放和拖拽移动
- 文件信息：显示图片路径、大小、修改时间等信息

2. 🎬 随机播放视频

- 智能播放：使用数组乱序算法实现真正的随机播放
- 自动播放：视频结束后自动播放下一个
- 播放控制：支持播放/暂停、上一个/下一个切换
- 完整信息：显示视频路径、大小、时长等详细信息

3. 🌐 HTML 文件预览

- 三种模式：
- 🖥️ 电脑模式：全屏预览，保持原始尺寸
- 📱 手机模式：375×812px 手机屏幕预览，带圆角设计
- 📱 平铺模式：所有 HTML 页面同时显示，响应式网格布局
- 左侧目录：显示所有 HTML 文件列表，支持键盘导航
- 实时切换：点击文件或使用键盘上下键快速切换
- 隐藏滚动条：手机和平铺模式自动隐藏滚动条，界面更美观

📋 使用方法

基础使用流程：

1. 选择文件夹：包含图片、视频或 HTML 文件的文件夹
2. 调用 uTools：按鼠标中键或使用快捷键打开 uTools
3. 选择功能：
- 选择文件夹 → 点击"随机查看图片"
- 选择文件夹 → 点击"随机播放视频"
- 选择文件夹 → 点击"查看HTML文件"

详细操作说明：

🖼️ 图片查看器

- 鼠标操作：
- 滚轮：放大/缩小图片
- 拖拽：移动图片位置
- 点击：查看文件信息
- 键盘快捷键：
- ←/→：上一个/下一个图片
- +/-：放大/缩小
- R：重新随机
- F5：刷新
- ESC：退出

🎬 视频播放器

- 播放控制：
- 空格键：播放/暂停
- ←/→：上一个/下一个视频
- R：重新随机播放列表
- 自动播放：视频结束后自动切换到下一个
- 文件操作：支持复制路径、打开文件夹

🌐 HTML 查看器

- 模式切换：顶部工具栏切换电脑/手机/平铺模式
- 文件导航：
- 左侧文件列表点击切换
- 键盘上下键导航
- 平铺模式特色：
- 响应式网格：1-4列自动调整
- 每个页面都是手机屏幕尺寸
- 支持垂直滚动查看所有页面

🛠️ 高级功能

文件管理

- 📂 选择文件夹：重新选择新的文件夹
- 🗑️ 清除历史：清除上一次选择的文件夹记录
- 📁 打开文件夹：在资源管理器中打开当前文件夹
- 🔄 刷新：重新扫描当前文件夹

开发者优化

- 智能扫描：自动排除 node_modules、.git、dist 等开发目录
- 格式支持：
- 图片：JPG, PNG, GIF, BMP, WebP, SVG, ICO 等
- 视频：MP4, AVI, MOV, WMV, FLV, MKV, WebM, M4V 等
- HTML：HTML, HTM

💡 使用场景

1. 网页开发

- 多页面预览：快速查看项目中的所有 HTML 页面
- 移动端调试：手机模式预览响应式设计
- 设计稿对比：平铺模式同时查看多个页面设计

2. 媒体管理

- 图片整理：快速浏览和筛选大量图片文件
- 视频预览：随机播放视频文件进行内容审核
- 文件归档：批量查看媒体文件进行分类

3. 设计评审

- 设计展示：手机模式展示移动端设计效果
- 快速切换：键盘导航快速浏览多个设计稿
- 细节检查：缩放功能查看设计细节

⚡ 技术特点

- 高性能：使用 Vue 3 + Vite 构建，响应迅速
- 跨平台：支持 Windows、macOS、Linux
- 智能算法：Fisher-Yates 洗牌算法确保真正随机
- 现代技术：DOMParser + XMLSerializer 实现 HTML 样式注入
- 用户友好：直观的界面设计和丰富的快捷键支持

🎨 界面设计

- 暗色主题：专业的深色界面，减少视觉疲劳
- 响应式布局：自适应不同屏幕尺寸
- 圆角设计：手机模式采用圆角设计，更贴近真实设备
- 清晰图标：使用 emoji 图标，界面生动直观

这个插件是开发者和设计师的得力助手，让文件预览和管理变得简单高效！