-
+
+
+
-
diff --git a/frontend/src/components/HomeView.vue b/frontend/src/components/HomeView.vue
new file mode 100644
index 0000000..26c4a86
--- /dev/null
+++ b/frontend/src/components/HomeView.vue
@@ -0,0 +1,423 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/SettingsView.vue b/frontend/src/components/SettingsView.vue
new file mode 100644
index 0000000..9aa1503
--- /dev/null
+++ b/frontend/src/components/SettingsView.vue
@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ToolView.vue b/frontend/src/components/ToolView.vue
new file mode 100644
index 0000000..9a7e5d8
--- /dev/null
+++ b/frontend/src/components/ToolView.vue
@@ -0,0 +1,840 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文件输出
+ 配置处理后文件的默认保存位置
+
+
+
+
+ 默认输出目录
+
+
+
+
+ 留空则输出文件保存在与源文件相同的目录下
+
+ 重置
+
+
+
+
+
+ 关于
+
+
+
+ 应用名称
+ XK 文件工具箱
+
+
+ 版本
+ 1.0.0
+
+
+ 支持格式
+ PDF / Word / Excel / 图片
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageBlurTool.vue b/frontend/src/components/image/ImageBlurTool.vue
new file mode 100644
index 0000000..0ba7de2
--- /dev/null
+++ b/frontend/src/components/image/ImageBlurTool.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentAction?.name || currentCat.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 点击选择文件
+ 支持拖拽文件到此处
+
+
+
+
+
+
+
+
+
+
+
+ {{ getFileName() }}
+ {{ filePath }}
+
+
+
+
+
+
+ 目标格式
+
+
+ JPEG
+ PNG
+ GIF
+ BMP
+ TIFF
+ ICO
+
+
+
+ 质量
+
+
+ {{ q.name }}
+
+
+
+ 旋转角度: {{ angle }}°
+
+
+ {{ a }}°
+
+
+ 水印文字
+
+
+
+
+ 输出路径
+ 重置为默认
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 处理对比
+
+
+
+
+
+ ![]()
+
+ 原图
+ 原始文件
+
+
+
+ ![]()
+
+ 处理后
+ 处理结果
+
+
+
+
+ 输出文件
+ {{ resultInfo.path }}
+
+
+ 文件大小
+
+
+
+ {{ resultInfo.originalSize }}
+ →
+ {{ resultInfo.size }}
+
+ (减少 {{ Math.round((1 - resultInfo.sizeBytes / resultInfo.originalSizeBytes) * 100) }}%)
+
+
+
+
+ {{ resultInfo.size }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageBrightnessTool.vue b/frontend/src/components/image/ImageBrightnessTool.vue
new file mode 100644
index 0000000..9ff13e7
--- /dev/null
+++ b/frontend/src/components/image/ImageBrightnessTool.vue
@@ -0,0 +1,80 @@
+
+
+
+
+ ![]()
+
+
+
+
+ 模糊设置
+ 模糊半径: {{ blurRadius }}
输出路径
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageCompressTool.vue b/frontend/src/components/image/ImageCompressTool.vue
new file mode 100644
index 0000000..e6edaa6
--- /dev/null
+++ b/frontend/src/components/image/ImageCompressTool.vue
@@ -0,0 +1,274 @@
+
+
+
+
+ ![]()
+
+
+
+
+ 调整亮度
+ 亮度: {{ brightnessVal > 0 ? '+' : '' }}{{ brightnessVal }}
对比度: {{ contrastVal > 0 ? '+' : '' }}{{ contrastVal }}
饱和度: {{ saturationVal > 0 ? '+' : '' }}{{ saturationVal }}
输出路径
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageConvertTool.vue b/frontend/src/components/image/ImageConvertTool.vue
new file mode 100644
index 0000000..3017654
--- /dev/null
+++ b/frontend/src/components/image/ImageConvertTool.vue
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ 压缩设置
+
+
+ 输出格式
+
+
+ JPEG
+ PNG
+
+
+ 质量: {{ qualityInt }}
+
+
+
+
+
+ 尺寸 (宽 × 高)
+
+
+
+ 处理后大小: {{ resultInfo.size }}
+
+
+
+
+ 输出路径
+
+
+
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageCropTool.vue b/frontend/src/components/image/ImageCropTool.vue
new file mode 100644
index 0000000..2008a07
--- /dev/null
+++ b/frontend/src/components/image/ImageCropTool.vue
@@ -0,0 +1,275 @@
+
+
+
+
+ ![]()
+
+
+
+
+ {{ getFileName() }}
+
+
+
+
+
+
+ 目标格式
+
+
+ {{ fmt.name }}
+
+
+ JPEG 质量: {{ qualityInt }}
+
+
+
+ 输出路径
+
+
+
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageGrayscaleTool.vue b/frontend/src/components/image/ImageGrayscaleTool.vue
new file mode 100644
index 0000000..3963390
--- /dev/null
+++ b/frontend/src/components/image/ImageGrayscaleTool.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 裁剪区域
+
+
+ 裁剪比例
+
+
+ 自由
+ 1:1
+ 4:3
+ 16:9
+
+
+
+ X:
+ Y:
+ W:
+ H:
+ 输出路径
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageInvertTool.vue b/frontend/src/components/image/ImageInvertTool.vue
new file mode 100644
index 0000000..83cf2fb
--- /dev/null
+++ b/frontend/src/components/image/ImageInvertTool.vue
@@ -0,0 +1,72 @@
+
+
+
+
+ ![]()
+
+
+
+
+ 灰度设置
+ 灰度强度: {{ grayscaleIntensity }}%
输出路径
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageRemoveBgTool.vue b/frontend/src/components/image/ImageRemoveBgTool.vue
new file mode 100644
index 0000000..aec5663
--- /dev/null
+++ b/frontend/src/components/image/ImageRemoveBgTool.vue
@@ -0,0 +1,630 @@
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ 反色
+ 反转图片中的所有颜色
输出路径
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageResizeTool.vue b/frontend/src/components/image/ImageResizeTool.vue
new file mode 100644
index 0000000..056d88d
--- /dev/null
+++ b/frontend/src/components/image/ImageResizeTool.vue
@@ -0,0 +1,239 @@
+
+
+
+
+ ![]()
+
+
+
+
+ {{ getFileName() }}
+
+
+
+
+
+
+ 背景灵敏度: {{ removebgThreshold }}
+
+
+
+
+
+
+
+
+ 模式
+
+
+
+
+
+
+ 容差
+
+
+
+ {{ bgRemovalTolerance }}
+
+
+ 当前颜色
+
+
+
+ {{ bgColorCode }}
+
+
+
+
+ 快捷
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 原图 · 点击取色
+
+
+
+
+
+
+ 预览 · 透明背景
+
+
+
+
+
+
+
+ 输出路径
+
+
+
+
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageRotateTool.vue b/frontend/src/components/image/ImageRotateTool.vue
new file mode 100644
index 0000000..ce299b6
--- /dev/null
+++ b/frontend/src/components/image/ImageRotateTool.vue
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ 调整大小
+
+
+ 缩放比例
+
+ 重置
+
+
+
+ 预设比例
+
+
+ 自由
+ 1:1
+ 4:3
+ 16:9
+
+
+
+ 尺寸 (宽 × 高)
+
+
+
+
+
+
+
+
+
+
+
+
+ 输出路径
+
+
+
+
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/components/image/ImageSharpenTool.vue b/frontend/src/components/image/ImageSharpenTool.vue
new file mode 100644
index 0000000..f4abadb
--- /dev/null
+++ b/frontend/src/components/image/ImageSharpenTool.vue
@@ -0,0 +1,77 @@
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ 旋转设置
+
+
+ 角度: {{ angleSlider }}°
+
+
+ 背景颜色
+
+
+ 白色
+ 透明
+ 黑色
+
+
+ 翻转
+
+
+
+
+ 输出路径
+
+ 点击选择图片
+ 支持拖拽图片到此处
+
+
+
+
+
diff --git a/frontend/src/composables/useImageTool.js b/frontend/src/composables/useImageTool.js
new file mode 100644
index 0000000..2799659
--- /dev/null
+++ b/frontend/src/composables/useImageTool.js
@@ -0,0 +1,265 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+export function useImageTool() {
+ const filePath = ref('')
+ const filePreview = ref('')
+ const imageInfo = ref(null)
+ const processing = ref(false)
+ const resultInfo = ref(null)
+ const outputPath = ref('')
+ const compareImages = ref({ original: '', processed: '' })
+ const config = ref({ defaultOutputDir: '' })
+
+ const showPreview = ref(false)
+ const previewSrc = ref('')
+ const previewIndex = ref(0)
+ const previewScale = ref(1)
+ const previewX = ref(0)
+ const previewY = ref(0)
+ const isDragging = ref(false)
+ const dragStart = ref({ x: 0, y: 0 })
+
+ onMounted(async () => {
+ try {
+ config.value = await window.go.main.FileHandler.GetConfig()
+ } catch (e) {}
+ })
+
+ function formatSize(bytes) {
+ if (!bytes) return '0 B'
+ const k = 1024
+ const sizes = ['B', 'KB', 'MB', 'GB']
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+ }
+
+ function getFileName() {
+ if (!filePath.value) return '未选择文件'
+ return filePath.value.split(/[/\\]/).pop()
+ }
+
+ async function selectFile(fileFilters) {
+ try {
+ const path = await window.go.main.FileHandler.OpenFileDialog('选择文件', fileFilters)
+ if (path) {
+ filePath.value = path
+ resetState()
+ outputPath.value = ''
+ await loadFilePreview()
+ }
+ } catch (e) {
+ ElMessage.error('选择文件失败: ' + e.message)
+ }
+ }
+
+ async function loadFilePreview() {
+ if (!filePath.value) return
+ try {
+ const b64 = await window.go.main.FileHandler.GetImageBase64(filePath.value)
+ if (b64) {
+ filePreview.value = b64
+ const info = await window.go.main.FileHandler.GetFileInfo(filePath.value)
+ imageInfo.value = info
+ }
+ } catch (e) {
+ console.error('加载预览失败:', e)
+ }
+ }
+
+ function resetState() {
+ resultInfo.value = null
+ compareImages.value = { original: '', processed: '' }
+ previewScale.value = 1
+ previewX.value = 0
+ previewY.value = 0
+ filePreview.value = ''
+ imageInfo.value = null
+ }
+
+ function clearImageFile() {
+ filePath.value = ''
+ filePreview.value = ''
+ imageInfo.value = null
+ resultInfo.value = null
+ compareImages.value = { original: '', processed: '' }
+ outputPath.value = ''
+ }
+
+ async function processFile(req) {
+ if (!filePath.value) {
+ ElMessage.warning('请先选择文件')
+ return
+ }
+
+ processing.value = true
+ resultInfo.value = null
+ compareImages.value = { original: '', processed: '' }
+
+ try {
+ const result = await window.go.main.FileHandler.ProcessFile(req)
+
+ if (result.success) {
+ resultInfo.value = {
+ path: result.path,
+ size: formatSize(result.size),
+ sizeBytes: result.size,
+ originalSize: result.originalSize ? formatSize(result.originalSize) : '',
+ originalSizeBytes: result.originalSize || 0,
+ tempPath: result.path,
+ isImageOp: true,
+ }
+
+ try {
+ const b64 = await window.go.main.FileHandler.GetImageBase64(filePath.value)
+ compareImages.value.original = b64
+ compareImages.value.processed = await window.go.main.FileHandler.GetImageBase64(result.path)
+ if (!compareImages.value.processed) {
+ compareImages.value.processed = b64
+ }
+ } catch (e) {}
+
+ await window.go.main.FileHandler.AddRecentUse({
+ id: req.format,
+ name: '',
+ category: 'image',
+ usedAt: Date.now(),
+ })
+
+ ElMessage.success('处理完成')
+ } else {
+ ElMessage.error(result.message)
+ }
+ } catch (e) {
+ ElMessage.error('处理失败: ' + e.message)
+ } finally {
+ processing.value = false
+ }
+ }
+
+ async function selectOutputPath(outputFilters, defaultName) {
+ try {
+ const path = await window.go.main.FileHandler.OpenSaveDialog('保存文件', defaultName, outputFilters)
+ if (path) {
+ outputPath.value = path
+ }
+ } catch (e) {}
+ }
+
+ async function downloadResult(outputFilters, getOutputExtFn, getOutputDefaultNameFn) {
+ if (!resultInfo.value?.tempPath) return
+
+ try {
+ const ext = getOutputExtFn ? getOutputExtFn() : '.png'
+ const defaultName = getOutputDefaultNameFn ? getOutputDefaultNameFn() : ('output' + ext)
+ const savePath = await window.go.main.FileHandler.OpenSaveDialog('保存文件', defaultName, outputFilters)
+
+ if (savePath) {
+ const result = await window.go.main.FileHandler.SaveResult(resultInfo.value.tempPath, savePath)
+ if (result.success) {
+ ElMessage.success('文件已保存到: ' + savePath)
+ resultInfo.value.path = savePath
+ } else {
+ ElMessage.error(result.message)
+ }
+ }
+ } catch (e) {
+ ElMessage.error('保存失败: ' + e.message)
+ }
+ }
+
+ function openPreview(src, index) {
+ previewSrc.value = src
+ previewIndex.value = index
+ previewScale.value = 1
+ previewX.value = 0
+ previewY.value = 0
+ showPreview.value = true
+ }
+
+ function closePreview() {
+ showPreview.value = false
+ }
+
+ function onWheel(e) {
+ e.preventDefault()
+ const delta = e.deltaY > 0 ? -0.1 : 0.1
+ previewScale.value = Math.max(0.1, Math.min(5, previewScale.value + delta))
+ }
+
+ function onMouseDown(e) {
+ if (e.button !== 0) return
+ isDragging.value = true
+ dragStart.value = { x: e.clientX - previewX.value, y: e.clientY - previewY.value }
+ }
+
+ function onMouseMove(e) {
+ if (!isDragging.value) return
+ previewX.value = e.clientX - dragStart.value.x
+ previewY.value = e.clientY - dragStart.value.y
+ }
+
+ function onMouseUp() {
+ isDragging.value = false
+ }
+
+ function resetPreview() {
+ previewScale.value = 1
+ previewX.value = 0
+ previewY.value = 0
+ }
+
+ function switchPreview(dir) {
+ previewIndex.value = dir
+ previewSrc.value = dir === 0 ? compareImages.value.original : compareImages.value.processed
+ resetPreview()
+ }
+
+ async function openOutputFolder() {
+ if (resultInfo.value?.path) {
+ const dir = resultInfo.value.path.replace(/[/\\][^/\\]+$/, '')
+ try {
+ await window.go.main.FileHandler.OpenFolder(dir)
+ } catch (e) {
+ ElMessage.error('打开文件夹失败')
+ }
+ }
+ }
+
+ return {
+ filePath,
+ filePreview,
+ imageInfo,
+ processing,
+ resultInfo,
+ outputPath,
+ compareImages,
+ config,
+ showPreview,
+ previewSrc,
+ previewIndex,
+ previewScale,
+ previewX,
+ previewY,
+ isDragging,
+ dragStart,
+ formatSize,
+ getFileName,
+ selectFile,
+ loadFilePreview,
+ resetState,
+ clearImageFile,
+ processFile,
+ selectOutputPath,
+ downloadResult,
+ openPreview,
+ closePreview,
+ onWheel,
+ onMouseDown,
+ onMouseMove,
+ onMouseUp,
+ resetPreview,
+ switchPreview,
+ openOutputFolder,
+ }
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f9754fe..cbcfb5d 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,17 @@
-import {createApp} from 'vue'
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
import App from './App.vue'
-import './style.css';
+import router from './router'
+import './style.css'
-createApp(App).mount('#app')
+const app = createApp(App)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ app.component(key, component)
+}
+
+app.use(ElementPlus)
+app.use(router)
+app.mount('#app')
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 0000000..731b6e6
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,17 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import HomeView from '../components/HomeView.vue'
+import ToolView from '../components/ToolView.vue'
+import SettingsView from '../components/SettingsView.vue'
+
+const routes = [
+ { path: '/', name: 'home', component: HomeView },
+ { path: '/tool/:category/:action?', name: 'tool', component: ToolView },
+ { path: '/settings', name: 'settings', component: SettingsView }
+]
+
+const router = createRouter({
+ history: createWebHashHistory(),
+ routes
+})
+
+export default router
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3940d6c..29d0e87 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,26 +1,321 @@
-html {
- background-color: rgba(27, 38, 54, 1);
- text-align: center;
- color: white;
+:root {
+ --bg-primary: #0a0a0f;
+ --bg-secondary: #12121a;
+ --bg-surface: #1a1a25;
+ --bg-glass: rgba(255, 255, 255, 0.03);
+
+ --text-primary: #f0f0f5;
+ --text-secondary: #8888a0;
+ --text-muted: #555570;
+
+ --accent-primary: #3b82f6;
+ --accent-primary-hover: #60a5fa;
+ --accent-primary-glow: rgba(59, 130, 246, 0.3);
+ --accent-blue: #3b82f6;
+
+ --accent-green: #22c55e;
+ --accent-red: #ef4444;
+ --accent-yellow: #f59e0b;
+ --accent-purple: #a855f7;
+
+ --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
+ --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
+
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+ --shadow-glow: 0 0 20px var(--accent-primary-glow);
+
+ --glass-blur: 20px;
+ --glass-bg: rgba(18, 18, 26, 0.8);
+ --glass-border: rgba(255, 255, 255, 0.08);
+
+ --radius-sm: 8px;
+ --radius-md: 12px;
+ --radius-lg: 16px;
+ --radius-xl: 20px;
+
+ --transition-fast: 0.15s ease;
+ --transition-normal: 0.25s ease;
+ --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+ --tool-pdf: #f38ba8;
+ --tool-word: #89b4fa;
+ --tool-excel: #a6e3a1;
+ --tool-image: #f9e2af;
+ --tool-convert: #cba6f7;
}
-body {
- margin: 0;
- color: white;
- font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
- "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
-@font-face {
- font-family: "Nunito";
- font-style: normal;
- font-weight: 400;
- src: local(""),
- url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+html, body {
+ height: 100%;
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
+ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
#app {
- height: 100vh;
- text-align: center;
+ height: 100vh;
+ overflow: hidden;
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--bg-surface);
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--text-secondary);
+}
+
+/* Element Plus Overrides */
+.el-menu {
+ border-right: none !important;
+ background-color: transparent !important;
+}
+
+.el-card {
+ background-color: var(--bg-secondary) !important;
+ border-color: var(--glass-border) !important;
+ border-radius: var(--radius-md) !important;
+ backdrop-filter: blur(var(--glass-blur));
+}
+
+.el-input__wrapper {
+ background-color: var(--bg-surface) !important;
+ box-shadow: 0 0 0 1px var(--glass-border) inset !important;
+ border-radius: var(--radius-sm) !important;
+ transition: all var(--transition-normal) !important;
+}
+
+.el-input__wrapper:hover {
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset !important;
+}
+
+.el-input__wrapper.is-focus {
+ box-shadow: 0 0 0 1px var(--accent-primary) inset, 0 0 12px var(--accent-primary-glow) !important;
+}
+
+.el-input__inner {
+ color: var(--text-primary) !important;
+}
+
+.el-input-number {
+ --el-input-number-step-button-bg-color: var(--bg-surface);
+ --el-input-number-step-button-border-color: var(--glass-border);
+}
+
+.el-button--primary {
+ --el-button-bg-color: var(--accent-primary);
+ --el-button-border-color: var(--accent-primary);
+ --el-button-text-color: #ffffff;
+ --el-button-hover-bg-color: var(--accent-primary-hover);
+ --el-button-hover-border-color: var(--accent-primary-hover);
+ --el-button-hover-text-color: #ffffff;
+ --el-button-active-bg-color: #2563eb;
+ --el-button-active-border-color: #2563eb;
+ border-radius: var(--radius-sm) !important;
+ transition: all var(--transition-normal) !important;
+}
+
+.el-button--primary:hover {
+ box-shadow: var(--shadow-glow);
+}
+
+.el-button {
+ border-radius: var(--radius-sm) !important;
+ transition: all var(--transition-fast) !important;
+}
+
+.el-button:active {
+ transform: scale(0.98);
+}
+
+.el-button.is-text {
+ border-radius: 6px !important;
+}
+
+.el-message-box {
+ background-color: var(--glass-bg) !important;
+ border-color: var(--glass-border) !important;
+ backdrop-filter: blur(var(--glass-blur));
+ border-radius: var(--radius-lg) !important;
+}
+
+.el-progress-bar__outer {
+ background-color: var(--bg-surface) !important;
+ border-radius: 100px !important;
+}
+
+.el-progress-bar__inner {
+ border-radius: 100px !important;
+}
+
+.el-tag {
+ border-radius: var(--radius-sm) !important;
+}
+
+.el-upload-dragger {
+ background-color: var(--bg-surface) !important;
+ border-color: var(--glass-border) !important;
+ border-radius: var(--radius-md) !important;
+ transition: all var(--transition-normal) !important;
+}
+
+.el-upload-dragger:hover {
+ border-color: var(--accent-primary) !important;
+ background-color: rgba(59, 130, 246, 0.05) !important;
+}
+
+.el-scrollbar__bar {
+ opacity: 0 !important;
+}
+
+.el-scrollbar:hover .el-scrollbar__bar {
+ opacity: 1 !important;
+}
+
+/* macOS Window Controls */
+.window-controls {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 16px;
+ height: 52px;
+ -webkit-app-region: drag;
+ user-select: none;
+}
+
+.window-btn {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: none;
+ cursor: pointer;
+ position: relative;
+ transition: all var(--transition-fast);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ -webkit-app-region: no-drag;
+}
+
+.window-btn svg {
+ width: 8px;
+ height: 8px;
+ opacity: 0;
+ transition: opacity var(--transition-fast);
+}
+
+.window-btn:hover svg {
+ opacity: 1;
+}
+
+.window-btn-close {
+ background-color: #ff5f57;
+}
+
+.window-btn-close:hover {
+ background-color: #ff4040;
+}
+
+.window-btn-close svg {
+ stroke: #4a0000;
+}
+
+.window-btn-minimize {
+ background-color: #febc2e;
+}
+
+.window-btn-minimize:hover {
+ background-color: #f5a623;
+}
+
+.window-btn-minimize svg {
+ stroke: #5a3e00;
+}
+
+.window-btn-maximize {
+ background-color: #28c840;
+}
+
+.window-btn-maximize:hover {
+ background-color: #1aab29;
+}
+
+.window-btn-maximize svg {
+ stroke: #003d00;
+}
+
+/* Glass Card */
+.glass-card {
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
+ border-radius: var(--radius-md);
+}
+
+.glass-card:hover {
+ border-color: rgba(255, 255, 255, 0.12);
+}
+
+/* Glow Effect */
+.glow-on-hover {
+ transition: all var(--transition-normal);
+}
+
+.glow-on-hover:hover {
+ box-shadow: var(--shadow-glow);
+ border-color: var(--accent-primary);
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+
+.animate-fade-in {
+ animation: fadeIn var(--transition-slow) forwards;
+}
+
+.animate-slide-up {
+ animation: slideUp var(--transition-slow) forwards;
+}
+
+.animate-pulse {
+ animation: pulse 2s ease-in-out infinite;
}
diff --git a/frontend/wailsjs/go/main/FileHandler.d.ts b/frontend/wailsjs/go/main/FileHandler.d.ts
new file mode 100644
index 0000000..30745df
--- /dev/null
+++ b/frontend/wailsjs/go/main/FileHandler.d.ts
@@ -0,0 +1,31 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+import {main} from '../models';
+
+export function AddRecentUse(arg1:main.RecentUse):Promise
+ ![]()
+
+
+
+
+ 锐化设置
+ 锐化强度: {{ sharpenAmount }}%
输出路径