feat(frontend): 添加网站 Logo 和界面预览图片

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="logo.png" alt="微信数据库解密工具" width="200">
+  <img src="frontend/public/logo.png" alt="微信数据库解密工具" width="200">
 </div>
 
 # 微信数据库解密工具
@@ -62,6 +62,22 @@ npm run dev
 - API服务: http://localhost:8000
 - API文档: http://localhost:8000/docs
 
+## 界面预览
+
+### 检测页面
+<div align="center">
+  <img src="检测.jpg" alt="微信检测页面" width="800">
+</div>
+
+自动检测微信安装路径和数据库文件位置，支持多账户识别。
+
+### 解密页面
+<div align="center">
+  <img src="解密.jpg" alt="数据库解密页面" width="800">
+</div>
+
+输入解密密钥，选择数据库文件进行批量解密操作。
+
 ## 使用指南
 
 ### 获取解密密钥

frontend/nuxt.config.ts

@@ -26,6 +26,9 @@ export default defineNuxtConfig({
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         { name: 'description', content: '微信4.x版本数据库解密工具' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/png', href: '/logo.png' }
       ]
     },
     pageTransition: { name: 'page', mode: 'out-in' }

frontend/pages/index.vue

@@ -10,8 +10,13 @@
     
     <!-- 主要内容区域 -->
     <div class="relative z-10 text-center">
-      <!-- 标题部分 -->
+      <!-- Logo和标题部分 -->
       <div class="mb-12 animate-fade-in">
+        <!-- Logo -->
+        <div class="flex justify-center mb-8">
+          <img src="/logo.png" alt="微信解密助手Logo" class="w-48 h-48 object-contain">
+        </div>
+        
         <h1 class="text-5xl font-bold text-[#000000e6] mb-4">
           <span class="bg-gradient-to-r from-[#07C160] to-[#10AEEF] bg-clip-text text-transparent">微信</span>
           <span class="text-[#000000e6]">解密助手</span>