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

feat: update TitleBar component for platform-specific styling and integrate into login page

Browse Source
This commit is contained in:
DEV_DSW
2026-04-15 10:31:43 +08:00
parent b5a67ff650
commit 9afb518a19
3 changed files with 27 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Layout/TitleBar/index.vue
View File

@@ -1,23 +1,25 @@
<template>
<!-- macOS: just drag region -->
<div v-if="platform === 'darwin'" class="drag-region h-10 shrink-0 border-b border-b-gray-300" style="background: transparent;" />
<div v-if="platform === 'darwin'" class="drag-region h-10 shrink-0 border-b" :class="borderColorClass" style="background: transparent;" />
<!-- Linux: no custom title bar -->
<template v-else-if="platform !== 'win32'" />
<!-- Windows: custom controls -->
<div v-else class="drag-region flex h-10 shrink-0 items-center justify-end border-b" style="background: transparent;">
<div v-else class="drag-region flex h-10 shrink-0 items-center justify-end border-b" :class="borderColorClass" style="background: transparent;">
<div class="no-drag flex h-full">
<button
@click="handleMinimize"
class="flex h-full w-11 items-center justify-center text-[#525866] hover:bg-[#999] hover:text-white transition-colors"
class="flex h-full w-11 items-center justify-center hover:bg-[#999] hover:text-white transition-colors"
:class="iconColorClass"
title="Minimize"
>
<Minus class="h-4 w-4" />
</button>
<button
@click="handleMaximize"
class="flex h-full w-11 items-center justify-center text-[#525866] hover:bg-[#999] hover:text-white transition-colors"
class="flex h-full w-11 items-center justify-center hover:bg-[#999] hover:text-white transition-colors"
:class="iconColorClass"
:title="maximized ? 'Restore' : 'Maximize'"
>
<Copy v-if="maximized" class="h-3.5 w-3.5" />
@@ -25,7 +27,8 @@
</button>
<button
@click="handleClose"
class="flex h-full w-11 items-center justify-center text-[#525866] hover:bg-[#ff0000] hover:text-white transition-colors"
class="flex h-full w-11 items-center justify-center hover:bg-[#ff0000] hover:text-white transition-colors"
:class="iconColorClass"
title="Close"
>
<X class="h-4 w-4" />
@@ -35,12 +38,24 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { Minus, Square, Copy, X } from '@lucide/vue'
const props = defineProps<{
variant?: 'default' | 'light'
}>()
const platform = (window as any).api?.platform ?? ''
const maximized = ref(false)
const iconColorClass = computed(() =>
props.variant === 'light' ? 'text-white' : 'text-[#525866]'
)
const borderColorClass = computed(() =>
props.variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300'
)
onMounted(async () => {
maximized.value = await (window as any).api.windowIsMaximized()
})