From fa6f2a90706f37e1aca35730ec0b2d24fa2ff141 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 1 Jan 2026 16:05:48 +0800
Subject: [PATCH] :sparkles: Feature(custom): add rotate for pin icon of title
 bar and backgroud color for button

---
 src/renderer/components/ui/TitleBar.vue | 43 ++++++++++++-------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/ui/TitleBar.vue b/src/renderer/components/ui/TitleBar.vue
index 68e60e4a..d0587b11 100644
--- a/src/renderer/components/ui/TitleBar.vue
+++ b/src/renderer/components/ui/TitleBar.vue
@@ -3,7 +3,7 @@
     <div class="title-bar-content">
       <div v-if="osGlobal !== 'darwin'" class="title-left">
         <div class="app-icon">
-          <img :src="defaultLogo" alt="App Icon" width="20" height="20" />
+          <img :src="defaultLogo" width="20" height="20" />
         </div>
       </div>
 
@@ -19,13 +19,8 @@
 
       <div class="title-right">
         <div class="window-controls">
-          <button
-            class="control-button pin-button"
-            :class="{ active: isAlwaysOnTop }"
-            :title="$t('titleBar.alwaysOnTop')"
-            @click="setAlwaysOnTop"
-          >
-            <PinIcon :color="isAlwaysOnTop ? '#CE6769' : '#6B7280'" :size="14" />
+          <button class="control-button pin-button" :title="$t('titleBar.alwaysOnTop')" @click="setAlwaysOnTop">
+            <PinIcon :size="14" class="pin-icon" :class="{ active: isAlwaysOnTop }" />
           </button>
           <template v-if="osGlobal !== 'darwin'">
             <button class="control-button minimize-button" :title="$t('titleBar.minimize')" @click="minimizeWindow">
@@ -61,17 +56,9 @@ function setAlwaysOnTop() {
   window.electron.sendRPC(IRPCActionType.MAIN_WINDOW_ON_TOP)
 }
 
-function minimizeWindow() {
-  window.electron.sendRPC(IRPCActionType.MINIMIZE_WINDOW)
-}
-
-function openMiniWindow() {
-  window.electron.sendRPC(IRPCActionType.OPEN_MINI_WINDOW)
-}
-
-function closeWindow() {
-  window.electron.sendRPC(IRPCActionType.CLOSE_WINDOW)
-}
+const minimizeWindow = () => window.electron.sendRPC(IRPCActionType.MINIMIZE_WINDOW)
+const openMiniWindow = () => window.electron.sendRPC(IRPCActionType.OPEN_MINI_WINDOW)
+const closeWindow = () => window.electron.sendRPC(IRPCActionType.CLOSE_WINDOW)
 
 const uploadProcessHandler = (data: { progress: number }) => {
   isShowprogress.value = data.progress !== 100 && data.progress !== 0
@@ -212,10 +199,22 @@ onBeforeUnmount(() => {
   color: var(--color-text-primary);
   background: var(--color-surface-elevated);
 }
+.pin-icon {
+  color: #6b7280;
+}
+.pin-icon.active {
+  rotate: 90deg;
+  color: #ce6769;
+}
 
-.pin-button.active {
-  color: var(--color-accent);
-  background: var(--color-accent) 20;
+.minimize-button:hover {
+  color: white;
+  background: color-mix(in srgb, var(--color-warning), transparent 15%);
+}
+
+.mini-button:hover {
+  color: white;
+  background: color-mix(in srgb, var(--color-success), transparent 15%);
 }
 
 .close-button:hover {