duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add hover effects to window control buttons

Browse Source 
Add hover background and text color changes to minimize, maximize, and close buttons in the header bar for better visual feedback. The close button now turns red on hover for clearer destructive action indication.

Remove backup package.json file and add comprehensive agent system development plan document (agents.md) detailing architecture analysis and implementation roadmap.
This commit is contained in:
duanshuwen
2026-04-08 21:24:51 +08:00
parent eb9acae071
commit c3825e6d43
3 changed files with 421 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/HeaderBar/index.vue
View File

@@ -6,14 +6,16 @@
<div class="title-bar-controls w-[168px] flex items-center justify-end text-tx-secondary">
<native-tooltip :content="t('window.minimize')">
<button v-show="isMinimizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
<button v-show="isMinimizable"
class="flex items-center justify-center cursor-pointer w-[40px] h-[40px] hover:bg-[#999] hover:text-[#fff]"
@click="minimizeWindow">
<iconify-icon icon="material-symbols:check-indeterminate-small" :color="color" :width="btnSize"
:height="btnSize" />
</button>
</native-tooltip>
<native-tooltip :content="isMaximized ? t('window.restore') : t('window.maximize')">
<button v-show="isMaximizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
<button v-show="isMaximizable"
class="flex items-center justify-center cursor-pointer w-[40px] h-[40px] hover:bg-[#999] hover:text-[#fff]"
@click="maximizeWindow">
<iconify-icon icon="material-symbols:chrome-maximize-outline-sharp" :color="color" :width="btnSize"
:height="btnSize" v-show="!isMaximized" />
@@ -22,7 +24,8 @@
</button>
</native-tooltip>
<native-tooltip :content="t('window.close')">
<button v-show="isClosable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
<button v-show="isClosable"
class="flex items-center justify-center cursor-pointer w-[40px] h-[40px] hover:bg-[#ff0000] hover:text-[#fff]"
@click="handleClose">
<iconify-icon icon="material-symbols:close" :color="color" :width="btnSize" :height="btnSize" />
</button>