mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-09-21 14:10:11 +08:00
66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
||
<header
|
||
class="window-titlebar sticky top-0 z-20 flex h-10 shrink-0 items-center justify-between border-b border-slate-200/70 bg-white px-3 text-slate-700 dark:border-slate-800/70 dark:bg-slate-950 dark:text-slate-200"
|
||
>
|
||
<div class="flex min-w-0 items-center gap-2">
|
||
<span class="h-3 w-3 rounded-full bg-[#2b7fff]"></span>
|
||
<span class="truncate text-sm font-semibold">星火应用商店</span>
|
||
</div>
|
||
|
||
<div class="window-titlebar-controls flex items-center gap-1">
|
||
<button
|
||
type="button"
|
||
class="rounded-md px-3 py-1 text-sm transition hover:bg-slate-200/80 dark:hover:bg-slate-800"
|
||
aria-label="最小化"
|
||
title="最小化"
|
||
@click="minimize"
|
||
>
|
||
−
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="rounded-md px-3 py-1 text-sm transition hover:bg-slate-200/80 dark:hover:bg-slate-800"
|
||
aria-label="最大化或还原"
|
||
title="最大化或还原"
|
||
@click="toggleMaximize"
|
||
>
|
||
□
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="rounded-md px-3 py-1 text-sm transition hover:bg-red-500 hover:text-white"
|
||
aria-label="关闭"
|
||
title="关闭"
|
||
@click="close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</header>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const minimize = () => {
|
||
window.windowControls.minimize();
|
||
};
|
||
|
||
const toggleMaximize = () => {
|
||
window.windowControls.toggleMaximize();
|
||
};
|
||
|
||
const close = () => {
|
||
window.windowControls.close();
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.window-titlebar {
|
||
-webkit-app-region: drag;
|
||
}
|
||
|
||
.window-titlebar-controls,
|
||
.window-titlebar-controls button {
|
||
-webkit-app-region: no-drag;
|
||
}
|
||
</style>
|