From dc261bb6ceb181a2d273c2d0d0bcda3f110f6677 Mon Sep 17 00:00:00 2001
From: putyy <putyy@qq.com>
Date: Fri, 16 May 2025 16:41:17 +0800
Subject: [PATCH] perf: Simulate Mac operation icons

---
 frontend/src/components/Footer.vue       |  4 +--
 frontend/src/components/Screen.vue       | 33 +++++++++++++++++-------
 frontend/src/components/layout/Sider.vue |  9 +++----
 frontend/src/locales/en.json             |  6 ++++-
 frontend/src/locales/zh.json             |  6 ++++-
 frontend/src/router/index.ts             |  2 +-
 6 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index b1d37b7..201cb37 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -11,8 +11,8 @@
       <div class="flex flex-col">
         <div class="flex flex-row">
           <div>
-            <div class="flex flex-row items-center">
-              <div class="text-4xl font-bold">{{ store.appInfo.AppName.charAt(0).toUpperCase() + store.appInfo.AppName.slice(1) }}</div>
+            <div class="flex flex-row items-end">
+              <div class="text-4xl font-bold">{{ store.appInfo.AppName }}</div>
               <div class="text-xs pl-5 text-slate-400">
                 Version {{ store.appInfo.Version }}
               </div>
diff --git a/frontend/src/components/Screen.vue b/frontend/src/components/Screen.vue
index 516453b..c4d24a0 100644
--- a/frontend/src/components/Screen.vue
+++ b/frontend/src/components/Screen.vue
@@ -1,21 +1,32 @@
 <template>
   <div class="flex justify-around px-2 pt-3">
-    <button class="w-3 h-3 rounded-full flex items-center justify-center p-[2px] bg-[#fd5b5b]" @click="closeWindow">
-      <svg t="1729232659670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11784" width="200" height="200">
-        <path d="M617.92 516.096l272 272-101.824 101.824-272-272-272 272-101.856-101.824 272-272-275.008-275.04L241.056 139.2l275.04 275.04 275.04-275.04 101.824 101.824-275.04 275.04z" fill="#2c2c2c" p-id="11785"/>
+    <button
+        class="w-4 h-4 rounded-full bg-[#ff5c57] flex items-center justify-center transition-all duration-200 hover:bg-[#e0443e] group"
+        @click="closeWindow"
+        :title="t('components.screen_close')"
+    >
+      <svg class="w-[0.7rem] h-[0.7rem] text-[#2c2c2c] opacity-0 group-hover:opacity-100 transition-opacity duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
       </svg>
     </button>
-    <button class="w-3 h-3 rounded-full bg-yellow-500 flex items-center justify-center p-[2px]" @click="minimizeWindow">
-      <svg t="1729223652686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9954" width="200" height="200">
-        <path d="M892 472c22.1 0 40 17.9 40 40 0 21.9-17.6 39.6-39.3 40H132c-22.1 0-40-17.9-40-40 0-21.9 17.6-39.6 39.3-40H892z" fill="#111111" p-id="9955"/>
-        <path d="M892 472c22.1 0 40 17.9 40 40 0 21.9-17.6 39.6-39.3 40H132c-22.1 0-40-17.9-40-40 0-21.9 17.6-39.6 39.3-40H892z" fill="#111111" p-id="9956"/>
+    <button
+        class="w-4 h-4 rounded-full bg-[#ffbc38] flex items-center justify-center transition-all duration-200 hover:bg-[#e0a824] group"
+        @click="minimizeWindow"
+        :title="t('components.screen_minimize')"
+    >
+      <svg class="w-[0.7rem] h-[0.7rem] text-[#2c2c2c] opacity-0 group-hover:opacity-100 transition-opacity duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 12H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
       </svg>
     </button>
-    <button class="w-3 h-3 rounded-full bg-green-500 flex items-center justify-center" :class="isMaximized ? 'p-[2px]' : 'p-[3px]'" @click="maximizeWindow">
-      <svg v-if="isMaximized" t="1729223337944" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2168" width="200" height="200">
+    <button
+        class="w-4 h-4 rounded-full bg-[#28c840] flex items-center justify-center transition-all duration-200 hover:bg-[#1ea230] group"
+        @click="maximizeWindow"
+        :title="isMaximized ? t('components.screen_restore') : t('components.screen_maximize')"
+    >
+      <svg v-if="isMaximized" class="w-[0.5rem] h-[0.5rem] text-[#2c2c2c] opacity-0 group-hover:opacity-100 transition-opacity duration-150" t="1729223337944" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2168">
         <path d="M965.6 512.8L564 512c-28.8 0-52 23.2-52 51.2l1.6 401.6c0 28.8 16.8 35.2 36.8 15.2l430.4-431.2c20-20 12.8-36-15.2-36zM510.4 58.4c0-28.8-16.8-35.2-36.8-15.2L44 474.4c-20 20-12.8 36.8 15.2 36.8l401.6 0.8c28.8 0 51.2-23.2 51.2-51.2l-1.6-402.4z" fill="#2c2c2c" p-id="2169"/>
       </svg>
-      <svg v-else t="1729223289826" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1881" width="200" height="200">
+      <svg v-else class="w-[0.5rem] h-[0.5rem] text-[#2c2c2c] opacity-0 group-hover:opacity-100 transition-opacity duration-150" t="1729223289826" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1881">
         <path d="M966.2236448 410.53297813l0 496.32142187a56.61582187 56.61582187 0 0 1-56.59306667 56.61582187l-496.32142293-1e-8a56.59306667 56.59306667 0 0 1-39.9815104-96.68835519L869.53528854 370.57422187a56.61582187 56.61582187 0 0 1 96.71111146 39.95875626z m-905.67111147 200.15786666L60.55253333 114.39217812a56.61582187 56.61582187 0 0 1 56.59306667-56.61582292l496.29866667 0a56.59306667 56.59306667 0 0 1 39.98151146 96.68835626l-496.2076448 496.20764374a56.61582187 56.61582187 0 0 1-96.68835519-39.9815104z" fill="#373C43" p-id="1882"/>
       </svg>
     </button>
@@ -25,7 +36,9 @@
 <script lang="ts" setup>
 import {ref} from "vue"
 import {Quit, WindowFullscreen, WindowMinimise, WindowUnfullscreen} from "../../wailsjs/runtime"
+import {useI18n} from 'vue-i18n'
 
+const {t} = useI18n()
 const isMaximized = ref(false)
 
 const closeWindow = () => {
diff --git a/frontend/src/components/layout/Sider.vue b/frontend/src/components/layout/Sider.vue
index bdef97b..38ec380 100644
--- a/frontend/src/components/layout/Sider.vue
+++ b/frontend/src/components/layout/Sider.vue
@@ -93,12 +93,11 @@ watch(() => route.path, (newPath, oldPath) => {
 })
 
 onMounted(()=>{
-  let collapsedTemp = localStorage.getItem("collapsed");
-  console.log("collapsedTemp:", collapsedTemp)
-  if (collapsedTemp) {
-    collapsed.value = JSON.parse(collapsedTemp).collapsed
-    is.value = true
+  const collapsedCache = localStorage.getItem("collapsed");
+  if (collapsedCache) {
+    collapsed.value = JSON.parse(collapsedCache).collapsed
   }
+  is.value = true
 })
 
 const renderIcon = (icon: any) => {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index feff50c..fe996e2 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -15,7 +15,11 @@
     "password_tip": "The password entered this time is only valid during this session, used for installing certificates or setting system proxy!",
     "password_placeholder": "Please enter your computer password",
     "password_cache": "Cache Password",
-    "password_empty": "Password cannot be empty"
+    "password_empty": "Password cannot be empty",
+    "screen_minimize": "Minimize",
+    "screen_restore": "Restore",
+    "screen_maximize": "Maximize",
+    "screen_close": "Close"
   },
   "menu": {
     "index": "Intercept",
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index 53ecb7b..0cf1199 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -15,7 +15,11 @@
     "password_tip": "本次输入的密码仅在本次运行期间有效，用于安装证书或设置系统代理！",
     "password_placeholder": "请输入你的电脑密码",
     "password_cache": "是否缓存",
-    "password_empty": "密码不能为空"
+    "password_empty": "密码不能为空",
+    "screen_minimize": "最小化",
+    "screen_restore": "还原",
+    "screen_maximize": "最大化",
+    "screen_close": "关闭"
   },
   "menu": {
     "index": "获取资源",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 552ce48..d7470ab 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -16,7 +16,7 @@ const routes = [
       {
         path: "/setting",
         name: "setting",
-        meta: {keepAlive: true},
+        meta: {keepAlive: false},
         component: () => import("@/views/setting.vue"),
       },
     ]