From b24bdc5891f00398bec2474c8ea9e13adb9431cb Mon Sep 17 00:00:00 2001 From: ASLant <77436463+Y-ASLant@users.noreply.github.com> Date: Tue, 13 Jan 2026 13:10:29 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=20ESLint=20?= =?UTF-8?q?=E5=92=8C=20Prettier=20=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 ESLint 和 Prettier 配置文件 - 配置代码规范：4空格缩进、单引号、无分号 - 更新文档：README.md 和 CLAUDE.md - 格式化所有前端代码 Co-Authored-By: Claude Opus 4.5 --- .eslintignore | 9 + .eslintrc.json | 27 ++ .gitignore | 5 + .prettierignore | 10 + .prettierrc.json | 10 + CLAUDE.md | 22 ++ README.md | 36 ++- package.json | 18 ++ ui/css/style.css | 41 ++- ui/css/tailwind-custom.css | 633 +++++++++++++++++++++++++++---------- ui/index.html | 506 ++++++++++++++++++++--------- ui/js/main.js | 572 +++++++++++++++++---------------- 12 files changed, 1275 insertions(+), 614 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.json create mode 100644 .prettierignore create mode 100644 .prettierrc.json create mode 100644 package.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..379aa79 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,9 @@ +node_modules/ +src-tauri/ +upx/ +icons/ +img/ +*.min.js +*.min.css +dist/ +target/ diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..743c877 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,27 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["html"], + "rules": { + "indent": ["error", 4], + "quotes": ["error", "single", { "avoidEscape": true }], + "semi": ["error", "never"], + "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }], + "no-constant-condition": ["warn", { "checkLoops": false }], + "no-console": "off" + }, + "globals": { + "invoke": "readonly", + "open": "readonly", + "save": "readonly", + "getCurrentWindow": "readonly", + "listen": "readonly" + } +} diff --git a/.gitignore b/.gitignore index fcd113b..9e72ba7 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,11 @@ target .claude/ *-cwd +# Node.js +node_modules/ +package-lock.json +dist/ + # RustRover # JetBrains specific template is maintained in a separate JetBrains.gitignore that can # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..d29c248 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,10 @@ +node_modules/ +src-tauri/ +upx/ +icons/ +img/ +*.min.js +*.min.css +dist/ +target/ +package-lock.json diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..5935c2e --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,10 @@ +{ + "printWidth": 100, + "tabWidth": 4, + "useTabs": false, + "semi": false, + "singleQuote": true, + "htmlWhitespaceSensitivity": "ignore", + "endOfLine": "lf", + "trailingComma": "es5" +} diff --git a/CLAUDE.md b/CLAUDE.md index 1701d87..078e16c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -29,6 +29,12 @@ cargo tauri build # 编译产物位置 # src-tauri/target/release/bundle/ # 生成 MSI 和 NSIS 两种安装包 + +# 前端代码检查 +npm run lint # 检查代码问题 +npm run lint:fix # 自动修复 +npm run format # 格式化代码 +npm run check # 完整检查 ``` ## 代码结构 @@ -70,3 +76,19 @@ batchSize = Math.max(2, Math.min(cpuCores * 2, 16)) - 使用 `window.__TAURI__` 全局对象（需启用 `withGlobalTauri: true`） - 命令调用：`invoke('command_name', { options })` - 拖放事件：`listen('tauri://drag-drop', handler)` + +## 代码规范 + +### 前端 (JavaScript/HTML/CSS) +- **缩进**：4 空格 +- **字符串**：单引号优先 +- **分号**：不使用分号结尾 +- **命名**： + - 常量：`UPPER_SNAKE_CASE` + - 函数/变量：`camelCase` + - DOM ID：`kebab-case` +- **修改前端代码后必须运行**：`npm run format` + +### 后端 (Rust) +- 使用 `cargo fmt` 格式化 +- 使用 `cargo clippy` 检查代码质量 diff --git a/README.md b/README.md index 09bf899..f6cd1c8 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,9 @@ ### 安装依赖 ```bash +# 安装前端开发依赖（ESLint + Prettier） +npm install + # 安装 Tauri CLI cargo install tauri-cli @@ -83,6 +86,32 @@ cargo install tauri-cli npm install -g @tauri-apps/cli ``` +### 代码检查与格式化 + +项目使用 ESLint 和 Prettier 进行代码质量控制： + +```bash +# 检查代码问题 +npm run lint + +# 自动修复代码问题 +npm run lint:fix + +# 格式化代码 +npm run format + +# 检查代码格式 +npm run format:check + +# 完整检查（lint + format） +npm run check +``` + +**代码规范**： +- 缩进：4 空格 +- 字符串：单引号 +- 结尾：无分号 + ### 项目结构 ``` @@ -94,8 +123,11 @@ UPX-GUI/ ├── src-tauri/ # Rust 后端 │ ├── src/ # Rust 源码 │ └── tauri.conf.json # Tauri 配置 -└── upx/ # UPX 工具 - └── upx.exe # UPX 可执行文件 +├── upx/ # UPX 工具 +│ └── upx.exe # UPX 可执行文件 +├── .eslintrc.json # ESLint 配置 +├── .prettierrc.json # Prettier 配置 +└── package.json # npm 依赖配置 ``` ## 编译方法 diff --git a/package.json b/package.json new file mode 100644 index 0000000..d89081d --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "upx-gui", + "version": "1.0.0", + "description": "UPX 可视化加壳/脱壳工具", + "scripts": { + "lint": "eslint \"ui/**/*.{js,html}\" --max-warnings 0", + "lint:fix": "eslint \"ui/**/*.{js,html}\" --fix", + "format": "prettier --write \"ui/**/*.{js,html,css}\"", + "format:check": "prettier --check \"ui/**/*.{js,html,css}\"", + "check": "npm run lint && npm run format:check" + }, + "devDependencies": { + "eslint": "^8.57.1", + "eslint-plugin-html": "^8.1.1", + "prettier": "^3.3.3" + }, + "private": true +} diff --git a/ui/css/style.css b/ui/css/style.css index 3438c47..58465bb 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -23,15 +23,27 @@ } body { - font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', - 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: + 'HarmonyOS Sans SC', + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 呼吸灯效果 */ @keyframes breathing { - 0%, 100% { + 0%, + 100% { opacity: 1; transform: scale(1); } @@ -168,23 +180,24 @@ button:active { } /* 输入框聚焦效果 */ -input:focus, select:focus { +input:focus, +select:focus { outline: none; } /* 自定义复选框 */ -input[type="checkbox"] { +input[type='checkbox'] { cursor: pointer; outline: none; } -input[type="checkbox"]:focus { +input[type='checkbox']:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* 滑动条样式 */ -input[type="range"].slider { +input[type='range'].slider { -webkit-appearance: none; appearance: none; width: 100%; @@ -196,12 +209,12 @@ input[type="range"].slider { font-family: inherit; } -input[type="range"].slider:hover { +input[type='range'].slider:hover { opacity: 0.9; } /* 滑块样式 - Webkit浏览器 */ -input[type="range"].slider::-webkit-slider-thumb { +input[type='range'].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; @@ -214,18 +227,18 @@ input[type="range"].slider::-webkit-slider-thumb { transition: all 0.2s; } -input[type="range"].slider::-webkit-slider-thumb:hover { +input[type='range'].slider::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } -input[type="range"].slider::-webkit-slider-thumb:active { +input[type='range'].slider::-webkit-slider-thumb:active { transform: scale(1.05); background: #eff6ff; } /* 滑块样式 - Firefox */ -input[type="range"].slider::-moz-range-thumb { +input[type='range'].slider::-moz-range-thumb { width: 24px; height: 24px; background: white; @@ -236,12 +249,12 @@ input[type="range"].slider::-moz-range-thumb { transition: all 0.2s; } -input[type="range"].slider::-moz-range-thumb:hover { +input[type='range'].slider::-moz-range-thumb:hover { transform: scale(1.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } -input[type="range"].slider::-moz-range-thumb:active { +input[type='range'].slider::-moz-range-thumb:active { transform: scale(1.05); background: #eff6ff; } diff --git a/ui/css/tailwind-custom.css b/ui/css/tailwind-custom.css index df8503d..44e71d8 100644 --- a/ui/css/tailwind-custom.css +++ b/ui/css/tailwind-custom.css @@ -2,7 +2,9 @@ /* 仅包含项目中实际使用的类，优化加载性能 */ /* Reset & Base */ -*, ::before, ::after { +*, +::before, +::after { box-sizing: border-box; border-width: 0; border-style: solid; @@ -10,236 +12,545 @@ } /* Layout */ -.h-screen { height: 100vh; } -.h-10 { height: 2.5rem; } -.h-9 { height: 2.25rem; } -.h-4 { height: 1rem; } -.h-2 { height: 0.5rem; } -.h-full { height: 100%; } -.h-\[calc\(100vh-2\.5rem\)\] { height: calc(100vh - 2.5rem); } +.h-screen { + height: 100vh; +} +.h-10 { + height: 2.5rem; +} +.h-9 { + height: 2.25rem; +} +.h-4 { + height: 1rem; +} +.h-2 { + height: 0.5rem; +} +.h-full { + height: 100%; +} +.h-\[calc\(100vh-2\.5rem\)\] { + height: calc(100vh - 2.5rem); +} -.w-full { width: 100%; } -.w-16 { width: 4rem; } -.w-9 { width: 2.25rem; } -.w-4 { width: 1rem; } -.w-2 { width: 0.5rem; } +.w-full { + width: 100%; +} +.w-16 { + width: 4rem; +} +.w-9 { + width: 2.25rem; +} +.w-4 { + width: 1rem; +} +.w-2 { + width: 0.5rem; +} -.min-h-0 { min-height: 0; } -.min-w-0 { min-width: 0; } -.max-w-\[700px\] { max-width: 700px; } +.min-h-0 { + min-height: 0; +} +.min-w-0 { + min-width: 0; +} +.max-w-\[700px\] { + max-width: 700px; +} /* Flexbox */ -.flex { display: flex; } -.flex-1 { flex: 1 1 0%; } -.flex-col { flex-direction: column; } -.flex-shrink-0 { flex-shrink: 0; } -.items-center { align-items: center; } -.items-start { align-items: flex-start; } -.justify-between { justify-content: space-between; } -.justify-center { justify-content: center; } +.flex { + display: flex; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-col { + flex-direction: column; +} +.flex-shrink-0 { + flex-shrink: 0; +} +.items-center { + align-items: center; +} +.items-start { + align-items: flex-start; +} +.justify-between { + justify-content: space-between; +} +.justify-center { + justify-content: center; +} /* Grid */ -.grid { display: grid; } -.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } -.col-span-2 { grid-column: span 2 / span 2; } +.grid { + display: grid; +} +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} +.col-span-2 { + grid-column: span 2 / span 2; +} /* Spacing */ -.gap-3 { gap: 0.75rem; } -.gap-6 { gap: 1.5rem; } -.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; } -.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.625rem; } -.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; } -.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; } +.gap-3 { + gap: 0.75rem; +} +.gap-6 { + gap: 1.5rem; +} +.space-x-1 > :not([hidden]) ~ :not([hidden]) { + margin-left: 0.25rem; +} +.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) { + margin-left: 0.625rem; +} +.space-x-3 > :not([hidden]) ~ :not([hidden]) { + margin-left: 0.75rem; +} +.space-y-5 > :not([hidden]) ~ :not([hidden]) { + margin-top: 1.25rem; +} -.p-3 { padding: 0.75rem; } -.p-4 { padding: 1rem; } -.p-6 { padding: 1.5rem; } -.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } -.px-4 { padding-left: 1rem; padding-right: 1rem; } -.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } -.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } -.py-8 { padding-top: 2rem; padding-bottom: 2rem; } +.p-3 { + padding: 0.75rem; +} +.p-4 { + padding: 1rem; +} +.p-6 { + padding: 1.5rem; +} +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} -.m-0 { margin: 0; } -.mx-4 { margin-left: 1rem; margin-right: 1rem; } -.mx-auto { margin-left: auto; margin-right: auto; } -.mt-0\.5 { margin-top: 0.125rem; } -.mb-2 { margin-bottom: 0.5rem; } -.mb-3 { margin-bottom: 0.75rem; } -.mb-4 { margin-bottom: 1rem; } -.mb-5 { margin-bottom: 1.25rem; } -.mb-6 { margin-bottom: 1.5rem; } -.mt-6 { margin-top: 1.5rem; } -.pt-5 { padding-top: 1.25rem; } +.m-0 { + margin: 0; +} +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.mt-0\.5 { + margin-top: 0.125rem; +} +.mb-2 { + margin-bottom: 0.5rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.mb-4 { + margin-bottom: 1rem; +} +.mb-5 { + margin-bottom: 1.25rem; +} +.mb-6 { + margin-bottom: 1.5rem; +} +.mt-6 { + margin-top: 1.5rem; +} +.pt-5 { + padding-top: 1.25rem; +} /* Position */ -.relative { position: relative; } -.fixed { position: fixed; } -.inset-0 { top: 0; right: 0; bottom: 0; left: 0; } -.z-50 { z-index: 50; } +.relative { + position: relative; +} +.fixed { + position: fixed; +} +.inset-0 { + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.z-50 { + z-index: 50; +} /* Display */ -.hidden { display: none; } -.block { display: block; } +.hidden { + display: none; +} +.block { + display: block; +} /* Overflow */ -.overflow-hidden { overflow: hidden; } -.overflow-y-auto { overflow-y: auto; } -.overflow-x-hidden { overflow-x: hidden; } +.overflow-hidden { + overflow: hidden; +} +.overflow-y-auto { + overflow-y: auto; +} +.overflow-x-hidden { + overflow-x: hidden; +} /* Colors - Background */ -.bg-transparent { background-color: transparent; } -.bg-white { background-color: rgb(255 255 255); } -.bg-gray-50 { background-color: rgb(249 250 251); } -.bg-gray-100 { background-color: rgb(243 244 246); } -.bg-gray-200 { background-color: rgb(229 231 235); } -.bg-gray-900 { background-color: rgb(17 24 39); } -.bg-blue-50 { background-color: rgb(239 246 255); } -.bg-blue-500 { background-color: rgb(59 130 246); } -.bg-red-50 { background-color: rgb(254 242 242); } -.bg-black { background-color: rgb(0 0 0); } +.bg-transparent { + background-color: transparent; +} +.bg-white { + background-color: rgb(255 255 255); +} +.bg-gray-50 { + background-color: rgb(249 250 251); +} +.bg-gray-100 { + background-color: rgb(243 244 246); +} +.bg-gray-200 { + background-color: rgb(229 231 235); +} +.bg-gray-900 { + background-color: rgb(17 24 39); +} +.bg-blue-50 { + background-color: rgb(239 246 255); +} +.bg-blue-500 { + background-color: rgb(59 130 246); +} +.bg-red-50 { + background-color: rgb(254 242 242); +} +.bg-black { + background-color: rgb(0 0 0); +} -.bg-opacity-50 { --tw-bg-opacity: 0.5; } -.bg-opacity-50 { background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } +.bg-opacity-50 { + --tw-bg-opacity: 0.5; +} +.bg-opacity-50 { + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} /* Colors - Text */ -.text-gray-400 { color: rgb(156 163 175); } -.text-gray-500 { color: rgb(107 114 128); } -.text-gray-600 { color: rgb(75 85 99); } -.text-gray-700 { color: rgb(55 65 81); } -.text-gray-800 { color: rgb(31 41 55); } -.text-blue-600 { color: rgb(37 99 235); } -.text-blue-700 { color: rgb(29 78 216); } -.text-green-400 { color: rgb(74 222 128); } -.text-green-600 { color: rgb(22 163 74); } -.text-green-700 { color: rgb(21 128 61); } -.text-white { color: rgb(255 255 255); } +.text-gray-400 { + color: rgb(156 163 175); +} +.text-gray-500 { + color: rgb(107 114 128); +} +.text-gray-600 { + color: rgb(75 85 99); +} +.text-gray-700 { + color: rgb(55 65 81); +} +.text-gray-800 { + color: rgb(31 41 55); +} +.text-blue-600 { + color: rgb(37 99 235); +} +.text-blue-700 { + color: rgb(29 78 216); +} +.text-green-400 { + color: rgb(74 222 128); +} +.text-green-600 { + color: rgb(22 163 74); +} +.text-green-700 { + color: rgb(21 128 61); +} +.text-white { + color: rgb(255 255 255); +} /* Colors - Border */ -.border { border-width: 1px; } -.border-2 { border-width: 2px; } -.border-b { border-bottom-width: 1px; } -.border-t { border-top-width: 1px; } -.border-gray-200 { border-color: rgb(229 231 235); } -.border-gray-300 { border-color: rgb(209 213 219); } -.border-blue-300 { border-color: rgb(147 197 253); } -.border-blue-500 { border-color: rgb(59 130 246); } -.border-green-500 { border-color: rgb(34 197 94); } +.border { + border-width: 1px; +} +.border-2 { + border-width: 2px; +} +.border-b { + border-bottom-width: 1px; +} +.border-t { + border-top-width: 1px; +} +.border-gray-200 { + border-color: rgb(229 231 235); +} +.border-gray-300 { + border-color: rgb(209 213 219); +} +.border-blue-300 { + border-color: rgb(147 197 253); +} +.border-blue-500 { + border-color: rgb(59 130 246); +} +.border-green-500 { + border-color: rgb(34 197 94); +} /* Border Radius */ -.rounded { border-radius: 0.25rem; } -.rounded-lg { border-radius: 0.5rem; } -.rounded-full { border-radius: 9999px; } +.rounded { + border-radius: 0.25rem; +} +.rounded-lg { + border-radius: 0.5rem; +} +.rounded-full { + border-radius: 9999px; +} /* Shadow */ -.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } -.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } -.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } -.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } +.shadow-md { + box-shadow: + 0 4px 6px -1px rgb(0 0 0 / 0.1), + 0 2px 4px -2px rgb(0 0 0 / 0.1); +} +.shadow-lg { + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); +} +.shadow-xl { + box-shadow: + 0 20px 25px -5px rgb(0 0 0 / 0.1), + 0 8px 10px -6px rgb(0 0 0 / 0.1); +} +.shadow-2xl { + box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); +} /* Typography */ -.text-xs { font-size: 0.75rem; line-height: 1rem; } -.text-sm { font-size: 0.875rem; line-height: 1.25rem; } -.text-base { font-size: 1rem; line-height: 1.5rem; } -.text-lg { font-size: 1.125rem; line-height: 1.75rem; } -.text-xl { font-size: 1.25rem; line-height: 1.75rem; } +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} -.font-medium { font-weight: 500; } -.font-semibold { font-weight: 600; } -.font-bold { font-weight: 700; } -.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } +.font-medium { + font-weight: 500; +} +.font-semibold { + font-weight: 600; +} +.font-bold { + font-weight: 700; +} +.font-mono { + font-family: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', + monospace; +} /* Appearance */ -.appearance-none { appearance: none; } +.appearance-none { + appearance: none; +} /* Cursor */ -.cursor-pointer { cursor: pointer; } +.cursor-pointer { + cursor: pointer; +} /* Select */ -.select-none { user-select: none; } +.select-none { + user-select: none; +} /* Transform */ -.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.hover\:-translate-y-1:hover { + --tw-translate-y: -0.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} /* Transition */ -.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.duration-200 { transition-duration: 200ms; } +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.duration-200 { + transition-duration: 200ms; +} /* Gradient */ -.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } -.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-to: rgb(239 246 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-blue-100 { --tw-gradient-from: #dbeafe; --tw-gradient-to: rgb(219 234 254 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-to: rgb(240 253 244 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.from-green-100 { --tw-gradient-from: #dcfce7; --tw-gradient-to: rgb(220 252 231 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } -.to-blue-100 { --tw-gradient-to: #dbeafe; } -.to-blue-200 { --tw-gradient-to: #bfdbfe; } -.to-green-100 { --tw-gradient-to: #dcfce7; } -.to-green-200 { --tw-gradient-to: #bbf7d0; } +.bg-gradient-to-br { + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); +} +.from-blue-50 { + --tw-gradient-from: #eff6ff; + --tw-gradient-to: rgb(239 246 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.from-blue-100 { + --tw-gradient-from: #dbeafe; + --tw-gradient-to: rgb(219 234 254 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.from-green-50 { + --tw-gradient-from: #f0fdf4; + --tw-gradient-to: rgb(240 253 244 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.from-green-100 { + --tw-gradient-from: #dcfce7; + --tw-gradient-to: rgb(220 252 231 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.to-blue-100 { + --tw-gradient-to: #dbeafe; +} +.to-blue-200 { + --tw-gradient-to: #bfdbfe; +} +.to-green-100 { + --tw-gradient-to: #dcfce7; +} +.to-green-200 { + --tw-gradient-to: #bbf7d0; +} /* Hover States - Background */ -.hover\:bg-gray-100:hover { - background-color: rgb(243 244 246) !important; +.hover\:bg-gray-100:hover { + background-color: rgb(243 244 246) !important; } -.hover\:bg-red-50:hover { - background-color: rgb(254 242 242) !important; +.hover\:bg-red-50:hover { + background-color: rgb(254 242 242) !important; } -.hover\:bg-blue-50:hover { - background-color: rgb(239 246 255) !important; +.hover\:bg-blue-50:hover { + background-color: rgb(239 246 255) !important; } -.hover\:bg-blue-600:hover { - background-color: rgb(37 99 235) !important; +.hover\:bg-blue-600:hover { + background-color: rgb(37 99 235) !important; } /* Hover States - Border */ -.hover\:border-blue-300:hover { - border-color: rgb(147 197 253) !important; +.hover\:border-blue-300:hover { + border-color: rgb(147 197 253) !important; } /* Hover States - Text */ -.hover\:text-blue-600:hover { - color: rgb(37 99 235) !important; +.hover\:text-blue-600:hover { + color: rgb(37 99 235) !important; } -.hover\:text-red-600:hover { - color: rgb(220 38 38) !important; +.hover\:text-red-600:hover { + color: rgb(220 38 38) !important; } /* Hover States - Shadow */ -.hover\:shadow-xl:hover { - box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; +.hover\:shadow-xl:hover { + box-shadow: + 0 20px 25px -5px rgb(0 0 0 / 0.1), + 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; } -.hover\:shadow-lg:hover { - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; +.hover\:shadow-lg:hover { + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; } /* Hover States - Gradient */ -.hover\:from-blue-100:hover { - --tw-gradient-from: #dbeafe !important; - --tw-gradient-to: rgb(219 234 254 / 0) !important; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; +.hover\:from-blue-100:hover { + --tw-gradient-from: #dbeafe !important; + --tw-gradient-to: rgb(219 234 254 / 0) !important; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } -.hover\:from-green-100:hover { - --tw-gradient-from: #dcfce7 !important; - --tw-gradient-to: rgb(220 252 231 / 0) !important; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; +.hover\:from-green-100:hover { + --tw-gradient-from: #dcfce7 !important; + --tw-gradient-to: rgb(220 252 231 / 0) !important; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } -.hover\:to-blue-200:hover { - --tw-gradient-to: #bfdbfe !important; +.hover\:to-blue-200:hover { + --tw-gradient-to: #bfdbfe !important; } -.hover\:to-green-200:hover { - --tw-gradient-to: #bbf7d0 !important; +.hover\:to-green-200:hover { + --tw-gradient-to: #bbf7d0 !important; } /* Active States */ -.active\:bg-blue-700:active { background-color: rgb(29 78 216); } +.active\:bg-blue-700:active { + background-color: rgb(29 78 216); +} /* Focus States */ -.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-blue-500:focus { --tw-ring-color: rgb(59 130 246); } +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.focus\:ring-blue-500:focus { + --tw-ring-color: rgb(59 130 246); +} /* Group Hover */ -.group:hover .group-hover\:text-red-600 { color: rgb(220 38 38); } +.group:hover .group-hover\:text-red-600 { + color: rgb(220 38 38); +} /* Drop Zone */ -.drop-zone { transition: all 0.3s ease; position: relative; } +.drop-zone { + transition: all 0.3s ease; + position: relative; +} diff --git a/ui/index.html b/ui/index.html index 10c9930..f28942b 100644 --- a/ui/index.html +++ b/ui/index.html @@ -1,172 +1,364 @@ - + - - - - UPX GUI - - - - - - - - -
-
-
- UPX-加壳脱壳 - -
-
- - - - - -
-
- - -
- -
-
- -
- - -
-

执行日志

-
-
等待操作...
-
-
-
- - -