<script setup lang="ts">
|
import { getCurrentWindow } from '@tauri-apps/api/window';
|
import { defineEmits } from 'vue';
|
|
const appWindow = getCurrentWindow();
|
|
const emit = defineEmits(['start-service', 'select-display']);
|
|
|
|
|
const minimize = async () => {
|
await appWindow.minimize();
|
};
|
|
const close = async () => {
|
await appWindow.close();
|
};
|
|
</script>
|
|
<template>
|
<div data-tauri-drag-region class="title-bar" >
|
<div class="title-bar-left">
|
<img src="../assets/logo.png" class="app-icon" alt="app icon" />
|
<span class="title">六维力传感器实时数据</span>
|
<!-- <button class="start-service-button" @click="handleStartService">启动服务</button> -->
|
</div>
|
<!-- Display mode buttons will be moved to the right -->
|
|
<div class="window-controls">
|
<button class="control-button minimize" @click="minimize">
|
<svg width="12" height="12" viewBox="0 0 12 12">
|
<rect x="2" y="5" width="8" height="2" fill="currentColor" />
|
</svg>
|
</button>
|
<button class="control-button close" @click="close">
|
<svg width="12" height="12" viewBox="0 0 12 12">
|
<path d="M2.4 1L1 2.4L4.6 6L1 9.6L2.4 11L6 7.4L9.6 11L11 9.6L7.4 6L11 2.4L9.6 1L6 4.6L2.4 1Z" fill="currentColor" />
|
</svg>
|
</button>
|
</div>
|
|
</div>
|
</template>
|
|
<style scoped>
|
.title-bar {
|
height: 32px;
|
background: linear-gradient(to right, #2c3e50, #3498db);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 16px;
|
-webkit-user-select: none;
|
user-select: none;
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 1000;
|
}
|
|
.title-bar-left {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
margin-right: 16px; /* Add some space between left and center */
|
}
|
|
.app-icon {
|
width: 16px;
|
height: 16px;
|
}
|
|
.title {
|
color: white;
|
font-size: 14px;
|
font-weight: 500;
|
}
|
|
.window-controls {
|
display: flex;
|
gap: 8px;
|
}
|
|
.control-button {
|
width: 24px;
|
height: 24px;
|
border: none;
|
background: transparent;
|
color: white;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 4px;
|
padding: 0;
|
transition: background-color 0.2s;
|
}
|
|
.control-button:hover {
|
background-color: rgba(255, 255, 255, 0.1);
|
}
|
|
.close:hover {
|
background-color: #e81123;
|
}
|
|
.start-service-button {
|
background-color: #28a745;
|
color: white;
|
padding: 4px 8px;
|
font-size: 12px;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-left: 16px; /* Keep margin-left for spacing from title */
|
}
|
|
.start-service-button:hover {
|
background-color: #218838;
|
}
|
|
.title-bar-center {
|
/* Removed as buttons are moved */
|
flex-grow: 1; /* Allow the container to grow and take available space */
|
}
|
|
|
|
</style>
|
