c3825e6d43
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.
77 lines
2.5 KiB
Vue
77 lines
2.5 KiB
Vue
<template>
|
|
<header class="flex items-start justify-between h-[40px]">
|
|
<div class="title-bar-main flex-auto">
|
|
<slot>{{ title ?? '' }}</slot>
|
|
</div>
|
|
|
|
<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] 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] 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" />
|
|
<iconify-icon icon="material-symbols:chrome-restore-outline-sharp" :color="color" :width="btnSize"
|
|
:height="btnSize" v-show="isMaximized" />
|
|
</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] hover:bg-[#ff0000] hover:text-[#fff]"
|
|
@click="handleClose">
|
|
<iconify-icon icon="material-symbols:close" :color="color" :width="btnSize" :height="btnSize" />
|
|
</button>
|
|
</native-tooltip>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon as IconifyIcon } from '@iconify/vue'
|
|
import { useWinManager } from '@hooks/useWinManager'
|
|
|
|
import NativeTooltip from '@components/NativeTooltip/index.vue'
|
|
|
|
interface HeaderBarProps {
|
|
title?: string;
|
|
isMaximizable?: boolean;
|
|
isMinimizable?: boolean;
|
|
isClosable?: boolean;
|
|
color?: string;
|
|
}
|
|
|
|
defineOptions({ name: 'HeaderBar', color: '#525866' })
|
|
|
|
withDefaults(defineProps<HeaderBarProps>(), {
|
|
isMaximizable: true,
|
|
isMinimizable: true,
|
|
isClosable: true,
|
|
})
|
|
const emit = defineEmits(['close']);
|
|
const { t } = useI18n();
|
|
|
|
const btnSize = 16;
|
|
|
|
const {
|
|
isMaximized,
|
|
closeWindow,
|
|
minimizeWindow,
|
|
maximizeWindow
|
|
} = useWinManager();
|
|
|
|
function handleClose() {
|
|
emit('close');
|
|
closeWindow();
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|