Vision Compare（你的眼睛不是尺）

🎯 专业的设计稿对比浏览器扩展

让像素级精度验证变得简单高效，支持流光科技风界面

📦 安装扩展 • ⌨️ 快捷键 • 🛠️ 开发指南 • 🎨 界面预览

---

✨ 功能特性

🎯 核心功能

• 像素级精准对比 - 支持设计稿与页面的像素级精准对比，快速发现差异
• 智能混合模式 - 支持16种混合模式（正片叠底、滤色、差值等），增强对比效果
• 灵活调整工具 - 可调整透明度、位置、尺寸，支持多种对齐方式和宽高比锁定
• 状态管理 - 锁定/冻结功能，支持状态持久化，刷新页面后自动恢复

⌨️ 交互体验

• 快捷键操作 - 支持丰富的键盘快捷键，提高工作效率
• 响应式设计 - 完美适配桌面端、平板和移动端屏幕
• 拖拽上传 - 支持拖拽上传图片，操作简单直观
• 实时预览 - 实时查看对比效果，支持精确的数值输入

🎨 界面设计

• 流光科技风 - 采用流光边框和扫描线效果的现代化控制面板
• 图标系统 - 使用 Iconify 图标库，支持状态高亮显示
• 现代化架构 - 基于 Vue 3 + TypeScript + Vite 构建

🚀 安装使用

方式一：开发者模式安装

1. 下载或克隆项目到本地
2. 运行构建命令：

   npm install
   npm run build

3. 在 Chrome 浏览器中打开 chrome://extensions/
4. 启用右上角的"开发者模式"
5. 点击"加载已解压的扩展程序"，选择项目中的 dist 文件夹
6. 扩展安装完成，图标会出现在浏览器工具栏中

使用步骤

1. 打开任意网页
2. 点击浏览器工具栏中的 Vision Compare 图标
3. 在弹出窗口中上传设计稿图片（支持拖拽上传）
4. 图片将覆盖在页面上，可以进行对比调整
5. 使用工具栏或快捷键调整图片位置、大小、透明度等

⌨️ 快捷键指南

基础操作

快捷键	功能	说明
F	显示/隐藏控制面板	切换控制面板的显示状态
V	显示/隐藏图片	快速切换图片的可见性
ESC	退出对比模式	完全退出对比模式并清理状态

状态控制

快捷键	功能	说明
L	锁定/解锁图片	锁定后图片无法移动和调整，同时自动冻结状态
Z	冻结/解冻状态	保存当前图片的位置、尺寸等状态，刷新页面后自动恢复

图片调整

快捷键	功能	说明
↑/↓	调整透明度	上箭头增加透明度，下箭头减少透明度
←/→	水平移动图片	左右箭头移动图片位置（1px步长）
Shift + 方向键	快速移动	配合Shift键快速移动（10px步长）

全局快捷键（需在扩展设置中配置）

快捷键	功能
Ctrl+Shift+V	切换控制面板
Ctrl+Shift+L	切换锁定状态
Ctrl+Shift+D	切换冻结状态
Ctrl+Shift+X	退出对比模式

🛠️ 开发

环境要求

• Node.js 22+
• pnpm

开发命令

# 安装依赖
npm install

# 开发模式（用于开发 Vue 组件）
npm run dev

# 构建扩展
npm run build

🎨 界面预览

流光科技风控制面板

• 流光背景: 深色科技风配色，8秒循环的背景流光效果
• 彩色边框: 蓝色→紫色→青色→绿色的流光边框动画
• 扫描线效果: 3秒循环的内部光效扫描线
• 响应式布局: 完美适配各种屏幕尺寸

功能区域

• 透明度控制: 滑块调节，实时预览效果
• 尺寸控制: 支持宽高比锁定，一键适应宽度/高度/原始尺寸
• 位置控制: 6种定位模式（自由、左上、右上、左下、右下、居中）
• 混合模式: 16种CSS混合模式，增强对比效果
• 状态控制: 显示/隐藏、锁定/解锁、冻结/解冻、退出功能

🔧 技术栈

核心技术

• 前端框架: Vue 3.5.12 + Composition API
• 开发语言: TypeScript 5.6.3
• 构建工具: Vite 6.0.1
• 扩展平台: Chrome Extension Manifest V3

UI 组件

• 图标系统: @qxs-bns/components (Iconify)
• 样式预处理: SCSS
• 工具库: @vueuse/core

开发工具

• 代码规范: ESLint + Prettier + Stylelint
• 类型检查: TypeScript 严格模式
• 状态管理: Vue 3 响应式系统

📝 更新日志

v2.0.0 (2025-08-29) - 流光科技风版本

🎨 界面升级

• ✨ 流光科技风控制面板 - 全新的流光背景、彩色边框和扫描线效果
• 🎯 Iconify 图标系统 - 替换所有 emoji 为专业图标，支持状态高亮
• 📱 完全响应式设计 - 完美适配桌面端、平板和移动端

🚀 功能增强

• 🎭 16种混合模式 - 支持正片叠底、滤色、差值等CSS混合模式
• 🔒 智能状态管理 - 锁定功能自动冻结，冻结状态页面刷新后恢复
• 📐 宽高比锁定 - 调整尺寸时自动保持原始宽高比
• 🎯 精确定位系统 - 6种定位模式，支持数值输入

🛠️ 技术优化

• 🔧 代码质量提升 - 修复所有 ESLint、TypeScript、Stylelint 错误
• 📦 类型安全 - 完善的 Chrome API 类型声明
• 🎪 DOM结构优化 - 图片直接插入body，确保混合模式正常工作

v1.0.0 (2025-08-27) - 基础版本

• ✨ 全面重构为 Vue 3 + TypeScript
• 🎨 使用 <script setup lang="ts"> 语法
• 📁 规范化项目目录结构
• 🔧 修复消息通信问题
• 🎯 使用提供的 logo.svg 作为扩展图标
• 🚀 改进构建流程和错误处理
• 📦 优化打包体积和性能

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License