✨ Added window title bars for different operating systems
This commit is contained in:
3
frontend/components.d.ts
vendored
3
frontend/components.d.ts
vendored
@@ -8,10 +8,13 @@ export {}
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
LinuxTitleBar: typeof import('./src/components/titlebar/LinuxTitleBar.vue')['default']
|
||||
MacOSTitleBar: typeof import('./src/components/titlebar/MacOSTitleBar.vue')['default']
|
||||
MemoryMonitor: typeof import('./src/components/monitor/MemoryMonitor.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Toolbar: typeof import('./src/components/toolbar/Toolbar.vue')['default']
|
||||
WindowsTitleBar: typeof import('./src/components/titlebar/WindowsTitleBar.vue')['default']
|
||||
WindowTitleBar: typeof import('./src/components/titlebar/WindowTitleBar.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import { useSystemTheme } from '@/composables/useSystemTheme';
|
||||
import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
const { setTheme } = useSystemTheme();
|
||||
|
||||
// 应用启动时加载配置
|
||||
// 操作系统检测
|
||||
const isWindows = ref(false);
|
||||
const isMacOS = ref(false);
|
||||
|
||||
// 根据操作系统计算标题栏高度
|
||||
const titleBarHeight = computed(() => {
|
||||
if (isWindows.value) return '32px';
|
||||
if (isMacOS.value) return '28px';
|
||||
return '34px'; // Linux 默认
|
||||
});
|
||||
|
||||
// 应用启动时加载配置和检测操作系统
|
||||
onMounted(async () => {
|
||||
await configStore.initConfig();
|
||||
await configStore.initializeLanguage();
|
||||
setTheme(configStore.config.appearance.systemTheme);
|
||||
|
||||
// 检测操作系统
|
||||
try {
|
||||
isWindows.value = runtime.System.IsWindows();
|
||||
isMacOS.value = runtime.System.IsMac();
|
||||
} catch (error) {
|
||||
console.error('检测操作系统失败:', error);
|
||||
// 默认使用 Windows
|
||||
isWindows.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<WindowTitleBar />
|
||||
<div class="app-content">
|
||||
<div class="app-content" :style="{ marginTop: titleBarHeight }">
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,7 +58,6 @@ onMounted(async () => {
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
margin-top: 32px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
292
frontend/src/components/titlebar/LinuxTitleBar.vue
Normal file
292
frontend/src/components/titlebar/LinuxTitleBar.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="linux-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
|
||||
<div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
|
||||
<div class="titlebar-icon">
|
||||
<img src="/appicon.png" alt="voidraft" />
|
||||
</div>
|
||||
<div class="titlebar-title">voidraft</div>
|
||||
</div>
|
||||
|
||||
<div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
|
||||
<button
|
||||
class="titlebar-button minimize-button"
|
||||
@click="minimizeWindow"
|
||||
:title="t('titlebar.minimize')"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button maximize-button"
|
||||
@click="toggleMaximize"
|
||||
:title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" v-if="!isMaximized">
|
||||
<rect x="4" y="4" width="8" height="8" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" v-else>
|
||||
<rect x="3" y="5" width="6" height="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<rect x="7" y="3" width="6" height="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button close-button"
|
||||
@click="closeWindow"
|
||||
:title="t('titlebar.close')"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<path d="M4 4l8 8m0-8L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
|
||||
const { t } = useI18n();
|
||||
const isMaximized = ref(false);
|
||||
|
||||
const minimizeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Minimise();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMaximize = async () => {
|
||||
try {
|
||||
const newState = !isMaximized.value;
|
||||
isMaximized.value = newState;
|
||||
|
||||
if (newState) {
|
||||
await runtime.Window.Maximise();
|
||||
} else {
|
||||
await runtime.Window.UnMaximise();
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
await checkMaximizedState();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
isMaximized.value = !isMaximized.value;
|
||||
}
|
||||
};
|
||||
|
||||
const closeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Close();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
const checkMaximizedState = async () => {
|
||||
try {
|
||||
isMaximized.value = await runtime.Window.IsMaximised();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await checkMaximizedState();
|
||||
|
||||
runtime.Events.On('window:maximised', () => {
|
||||
isMaximized.value = true;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:unmaximised', () => {
|
||||
isMaximized.value = false;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:focus', async () => {
|
||||
await checkMaximizedState();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
runtime.Events.Off('window:maximised');
|
||||
runtime.Events.Off('window:unmaximised');
|
||||
runtime.Events.Off('window:focus');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.linux-titlebar {
|
||||
display: flex;
|
||||
height: 34px;
|
||||
background: var(--toolbar-bg, linear-gradient(to bottom, #f6f6f6, #e8e8e8));
|
||||
border-bottom: 1px solid var(--toolbar-border, #d0d0d0);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', system-ui, sans-serif;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-left: 12px;
|
||||
gap: 8px;
|
||||
color: var(--toolbar-text, #333);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-content .titlebar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 13px;
|
||||
color: var(--toolbar-text, #333);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
width: 36px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--toolbar-text, #555);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbar-button-hover, rgba(0, 0, 0, 0.1));
|
||||
|
||||
svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--toolbar-button-active, rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
&:hover {
|
||||
background: #e74c3c;
|
||||
color: #ffffff;
|
||||
|
||||
svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #c0392b;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme support
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.linux-titlebar {
|
||||
background: var(--toolbar-bg, linear-gradient(to bottom, #3c3c3c, #2e2e2e));
|
||||
border-bottom-color: var(--toolbar-border, #1e1e1e);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.titlebar-content,
|
||||
.titlebar-title {
|
||||
color: var(--toolbar-text, #f0f0f0);
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
color: var(--toolbar-text, #ccc);
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbar-button-hover, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--toolbar-button-active, rgba(255, 255, 255, 0.15));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// GNOME-like styling variant
|
||||
.linux-titlebar.gnome-style {
|
||||
height: 38px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
|
||||
.titlebar-button {
|
||||
height: 38px;
|
||||
width: 32px;
|
||||
border-radius: 6px;
|
||||
margin: 3px 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// KDE-like styling variant
|
||||
.linux-titlebar.kde-style {
|
||||
background: var(--toolbar-bg, #eff0f1);
|
||||
border-bottom: 1px solid var(--toolbar-border, #bdc3c7);
|
||||
|
||||
.titlebar-button {
|
||||
border-radius: 4px;
|
||||
margin: 2px 1px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(61, 174, 233, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
266
frontend/src/components/titlebar/MacOSTitleBar.vue
Normal file
266
frontend/src/components/titlebar/MacOSTitleBar.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="macos-titlebar" style="--wails-draggable:drag" @contextmenu.prevent>
|
||||
<div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
|
||||
<button
|
||||
class="titlebar-button close-button"
|
||||
@click="closeWindow"
|
||||
:title="t('titlebar.close')"
|
||||
>
|
||||
<div class="button-icon">
|
||||
<svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons">
|
||||
<path d="M1 1l4 4m0-4L1 5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button minimize-button"
|
||||
@click="minimizeWindow"
|
||||
:title="t('titlebar.minimize')"
|
||||
>
|
||||
<div class="button-icon">
|
||||
<svg width="8" height="1" viewBox="0 0 8 1" v-show="showControlIcons">
|
||||
<path d="M0 0h8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button maximize-button"
|
||||
@click="toggleMaximize"
|
||||
:title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
|
||||
>
|
||||
<div class="button-icon">
|
||||
<svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && !isMaximized">
|
||||
<path d="M1 1l4 0 0 4-4 0z" fill="none" stroke="currentColor" stroke-width="1"/>
|
||||
<path d="M2 2l2 0 0 2" fill="none" stroke="currentColor" stroke-width="1"/>
|
||||
</svg>
|
||||
<svg width="6" height="6" viewBox="0 0 6 6" v-show="showControlIcons && isMaximized">
|
||||
<path d="M1 2l4 0 0 3-4 0z" fill="none" stroke="currentColor" stroke-width="1"/>
|
||||
<path d="M2 1l3 0 0 3" fill="none" stroke="currentColor" stroke-width="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
|
||||
<div class="titlebar-title">voidraft</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
|
||||
const { t } = useI18n();
|
||||
const isMaximized = ref(false);
|
||||
const showControlIcons = ref(false);
|
||||
|
||||
const minimizeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Minimise();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMaximize = async () => {
|
||||
try {
|
||||
const newState = !isMaximized.value;
|
||||
isMaximized.value = newState;
|
||||
|
||||
if (newState) {
|
||||
await runtime.Window.Maximise();
|
||||
} else {
|
||||
await runtime.Window.UnMaximise();
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
await checkMaximizedState();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
isMaximized.value = !isMaximized.value;
|
||||
}
|
||||
};
|
||||
|
||||
const closeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Close();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
const checkMaximizedState = async () => {
|
||||
try {
|
||||
isMaximized.value = await runtime.Window.IsMaximised();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await checkMaximizedState();
|
||||
|
||||
runtime.Events.On('window:maximised', () => {
|
||||
isMaximized.value = true;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:unmaximised', () => {
|
||||
isMaximized.value = false;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:focus', async () => {
|
||||
await checkMaximizedState();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
runtime.Events.Off('window:maximised');
|
||||
runtime.Events.Off('window:unmaximised');
|
||||
runtime.Events.Off('window:focus');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.macos-titlebar {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
background: var(--toolbar-bg, #ececec);
|
||||
border-bottom: 1px solid var(--toolbar-border, rgba(0, 0, 0, 0.1));
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
|
||||
&:hover {
|
||||
.titlebar-button {
|
||||
.button-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
gap: 8px;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
.button-icon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
&:hover .button-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: #ff5f57;
|
||||
|
||||
&:hover {
|
||||
background: #ff453a;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #d7463f;
|
||||
}
|
||||
}
|
||||
|
||||
.minimize-button {
|
||||
background: #ffbd2e;
|
||||
|
||||
&:hover {
|
||||
background: #ffb524;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #e6a220;
|
||||
}
|
||||
}
|
||||
|
||||
.maximize-button {
|
||||
background: #28ca42;
|
||||
|
||||
&:hover {
|
||||
background: #1ebe36;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #1ba932;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
cursor: default;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--toolbar-text, #333);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.macos-titlebar {
|
||||
background: var(--toolbar-bg, #2d2d2d);
|
||||
border-bottom-color: var(--toolbar-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
color: var(--toolbar-text, #fff);
|
||||
}
|
||||
|
||||
.titlebar-button .button-icon {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,250 +1,30 @@
|
||||
<template>
|
||||
<div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
|
||||
<div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
|
||||
<div class="titlebar-icon">
|
||||
<img src="/appicon.png" alt="voidraft" />
|
||||
</div>
|
||||
<div class="titlebar-title">voidraft</div>
|
||||
</div>
|
||||
|
||||
<div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
|
||||
<button
|
||||
class="titlebar-button minimize-button"
|
||||
@click="minimizeWindow"
|
||||
:title="t('titlebar.minimize')"
|
||||
>
|
||||
<span class="titlebar-icon"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button maximize-button"
|
||||
@click="toggleMaximize"
|
||||
:title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
|
||||
>
|
||||
<span class="titlebar-icon" v-html="maximizeIcon"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button close-button"
|
||||
@click="closeWindow"
|
||||
:title="t('titlebar.close')"
|
||||
>
|
||||
<span class="titlebar-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<WindowsTitleBar v-if="isWindows" />
|
||||
<MacOSTitleBar v-else-if="isMacOS" />
|
||||
<LinuxTitleBar v-else />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
import WindowsTitleBar from './WindowsTitleBar.vue';
|
||||
import MacOSTitleBar from './MacOSTitleBar.vue';
|
||||
import LinuxTitleBar from './LinuxTitleBar.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const isMaximized = ref(false);
|
||||
|
||||
// 计算属性用于图标，减少重复渲染
|
||||
const maximizeIcon = computed(() => isMaximized.value ? '' : '');
|
||||
|
||||
const minimizeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Minimise();
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMaximize = async () => {
|
||||
try {
|
||||
// 立即更新UI状态，提供即时反馈
|
||||
const newState = !isMaximized.value;
|
||||
isMaximized.value = newState;
|
||||
|
||||
// 然后执行实际操作
|
||||
if (newState) {
|
||||
await runtime.Window.Maximise();
|
||||
} else {
|
||||
await runtime.Window.UnMaximise();
|
||||
}
|
||||
|
||||
// 操作完成后再次确认状态（防止操作失败时状态不一致）
|
||||
setTimeout(async () => {
|
||||
await checkMaximizedState();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
// 如果操作失败，恢复原状态
|
||||
isMaximized.value = !isMaximized.value;
|
||||
}
|
||||
};
|
||||
|
||||
const closeWindow = async () => {
|
||||
try {
|
||||
// 使用Window的Close方法，会触发窗口关闭事件
|
||||
await runtime.Window.Close();
|
||||
} catch (error) {
|
||||
}
|
||||
};
|
||||
|
||||
const checkMaximizedState = async () => {
|
||||
try {
|
||||
isMaximized.value = await runtime.Window.IsMaximised();
|
||||
} catch (error) {
|
||||
}
|
||||
};
|
||||
// 操作系统检测
|
||||
const isWindows = ref(false);
|
||||
const isMacOS = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
// 检查初始最大化状态
|
||||
await checkMaximizedState();
|
||||
|
||||
// 监听窗口状态变化事件
|
||||
runtime.Events.On('window:maximised', () => {
|
||||
isMaximized.value = true;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:unmaximised', () => {
|
||||
isMaximized.value = false;
|
||||
});
|
||||
|
||||
// 监听窗口焦点事件，确保状态同步
|
||||
runtime.Events.On('window:focus', async () => {
|
||||
await checkMaximizedState();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理事件监听器
|
||||
runtime.Events.Off('window:maximised');
|
||||
runtime.Events.Off('window:unmaximised');
|
||||
runtime.Events.Off('window:focus');
|
||||
});
|
||||
try {
|
||||
isWindows.value = runtime.System.IsWindows();
|
||||
isMacOS.value = runtime.System.IsMac();
|
||||
} catch (error) {
|
||||
// 默认使用 Windows 风格
|
||||
isWindows.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.windows-titlebar {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
background: var(--toolbar-bg);
|
||||
border-bottom: 1px solid var(--toolbar-border);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* 禁用右键菜单 */
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
gap: 8px;
|
||||
color: var(--toolbar-text);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
cursor: default;
|
||||
|
||||
/* 禁用右键菜单 */
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-content .titlebar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 12px;
|
||||
color: var(--toolbar-text);
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
/* 禁用右键菜单 */
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
width: 46px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--toolbar-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.1s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbar-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--toolbar-button-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-button .titlebar-icon {
|
||||
font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', 'Segoe UI', system-ui;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.1s ease;
|
||||
|
||||
.titlebar-button:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.minimize-button:hover,
|
||||
.maximize-button:hover {
|
||||
background: var(--toolbar-button-hover);
|
||||
}
|
||||
|
||||
.minimize-button:active,
|
||||
.maximize-button:active {
|
||||
background: var(--toolbar-button-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: #c42b1c;
|
||||
color: #ffffff;
|
||||
|
||||
.titlebar-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button:active {
|
||||
background: #a93226;
|
||||
|
||||
.titlebar-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
frontend/src/components/titlebar/WindowsTitleBar.vue
Normal file
244
frontend/src/components/titlebar/WindowsTitleBar.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="windows-titlebar" style="--wails-draggable:drag" @contextmenu.prevent @mouseenter="checkMaximizedState" @mouseup="checkMaximizedState">
|
||||
<div class="titlebar-content" @dblclick="toggleMaximize" @contextmenu.prevent>
|
||||
<div class="titlebar-icon">
|
||||
<img src="/appicon.png" alt="voidraft" />
|
||||
</div>
|
||||
<div class="titlebar-title">voidraft</div>
|
||||
</div>
|
||||
|
||||
<div class="titlebar-controls" style="--wails-draggable:no-drag" @contextmenu.prevent>
|
||||
<button
|
||||
class="titlebar-button minimize-button"
|
||||
@click="minimizeWindow"
|
||||
:title="t('titlebar.minimize')"
|
||||
>
|
||||
<span class="titlebar-icon"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button maximize-button"
|
||||
@click="toggleMaximize"
|
||||
:title="isMaximized ? t('titlebar.restore') : t('titlebar.maximize')"
|
||||
>
|
||||
<span class="titlebar-icon" v-html="maximizeIcon"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="titlebar-button close-button"
|
||||
@click="closeWindow"
|
||||
:title="t('titlebar.close')"
|
||||
>
|
||||
<span class="titlebar-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import * as runtime from '@wailsio/runtime';
|
||||
|
||||
const { t } = useI18n();
|
||||
const isMaximized = ref(false);
|
||||
|
||||
// 计算属性用于图标，减少重复渲染
|
||||
const maximizeIcon = computed(() => isMaximized.value ? '' : '');
|
||||
|
||||
const minimizeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Minimise();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMaximize = async () => {
|
||||
try {
|
||||
// 立即更新UI状态，提供即时反馈
|
||||
const newState = !isMaximized.value;
|
||||
isMaximized.value = newState;
|
||||
|
||||
// 然后执行实际操作
|
||||
if (newState) {
|
||||
await runtime.Window.Maximise();
|
||||
} else {
|
||||
await runtime.Window.UnMaximise();
|
||||
}
|
||||
|
||||
// 操作完成后再次确认状态（防止操作失败时状态不一致）
|
||||
setTimeout(async () => {
|
||||
await checkMaximizedState();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
// 如果操作失败，恢复原状态
|
||||
isMaximized.value = !isMaximized.value;
|
||||
}
|
||||
};
|
||||
|
||||
const closeWindow = async () => {
|
||||
try {
|
||||
await runtime.Window.Close();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
const checkMaximizedState = async () => {
|
||||
try {
|
||||
isMaximized.value = await runtime.Window.IsMaximised();
|
||||
} catch (error) {
|
||||
// Error handling
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await checkMaximizedState();
|
||||
|
||||
runtime.Events.On('window:maximised', () => {
|
||||
isMaximized.value = true;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:unmaximised', () => {
|
||||
isMaximized.value = false;
|
||||
});
|
||||
|
||||
runtime.Events.On('window:focus', async () => {
|
||||
await checkMaximizedState();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
runtime.Events.Off('window:maximised');
|
||||
runtime.Events.Off('window:unmaximised');
|
||||
runtime.Events.Off('window:focus');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.windows-titlebar {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
background: var(--toolbar-bg);
|
||||
border-bottom: 1px solid var(--toolbar-border);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
gap: 8px;
|
||||
color: var(--toolbar-text);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
cursor: default;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-content .titlebar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-title {
|
||||
font-size: 12px;
|
||||
color: var(--toolbar-text);
|
||||
}
|
||||
|
||||
.titlebar-controls {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
-webkit-context-menu: none;
|
||||
-moz-context-menu: none;
|
||||
context-menu: none;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
width: 46px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--toolbar-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.1s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--toolbar-button-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--toolbar-button-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-button .titlebar-icon {
|
||||
font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', 'Segoe UI', system-ui;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.1s ease;
|
||||
|
||||
.titlebar-button:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.minimize-button:hover,
|
||||
.maximize-button:hover {
|
||||
background: var(--toolbar-button-hover);
|
||||
}
|
||||
|
||||
.minimize-button:active,
|
||||
.maximize-button:active {
|
||||
background: var(--toolbar-button-hover);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: #c42b1c;
|
||||
color: #ffffff;
|
||||
|
||||
.titlebar-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button:active {
|
||||
background: #a93226;
|
||||
|
||||
.titlebar-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user