cacb25a2ca
- 引入 Sprite 组件统一管理 SVG 图标 - 创建 Icon 组件支持动态加载图标- 定义 icon-ids 类型确保图标引用安全- 更新 Sidebar 使用新图标组件替换 emoji - 添加 HomeIcon 和 network 图标资源- 调整侧边栏样式和宽度 - 修复 Header 按钮 title 属性替代 aria-label - 新增 IP 工具页面路由 - 添加全局阴影变量 --main-border-shadow
101 lines
2.5 KiB
Svelte
101 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { getCurrentWindow } from '@tauri-apps/api/window';
|
|
|
|
|
|
const win = getCurrentWindow();
|
|
|
|
const minimize = () => win.minimize();
|
|
const closeWindow = () => win.close();
|
|
const maximize = () => win.toggleMaximize();
|
|
|
|
</script>
|
|
|
|
<header class="custom-titlebar" data-tauri-drag-region>
|
|
|
|
<div class="app-title" data-tauri-drag-region></div>
|
|
|
|
<div class="window-controls">
|
|
<button type="button" title="最小化窗口" data-tauri-drag-region="false" class="h-btn btn-minimize" on:click={minimize}></button>
|
|
<button
|
|
type="button"
|
|
data-tauri-drag-region="false"
|
|
class="h-btn btn-max"
|
|
title="最大化窗口"
|
|
on:click={maximize}></button>
|
|
<button type="button"
|
|
data-tauri-drag-region="false"
|
|
class="h-btn btn-close"
|
|
title="关闭应用"
|
|
on:click={closeWindow}></button>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.custom-titlebar {
|
|
height: 30px;
|
|
background-color: #1f1f1f;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
user-select: none;
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.window-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.window-controls button {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
/* 🟡 最小化按钮 */
|
|
.window-controls button.btn-minimize {
|
|
background-color: #febc2e;
|
|
}
|
|
.window-controls button.btn-minimize:hover {
|
|
background-color: #ffca45;
|
|
box-shadow: 0 0 4px #ffca45;
|
|
}
|
|
.window-controls button.btn-minimize:active {
|
|
background-color: #d9a323;
|
|
}
|
|
|
|
/* 🔴 关闭按钮 */
|
|
.window-controls button.btn-close {
|
|
background-color: #ff5f57;
|
|
}
|
|
.window-controls button.btn-close:hover {
|
|
background-color: #ff7b73;
|
|
box-shadow: 0 0 4px #ff7b73;
|
|
}
|
|
.window-controls button.btn-close:active {
|
|
background-color: #e0463c;
|
|
}
|
|
|
|
/* 🟢 最大化按钮（未最大化状态） */
|
|
.window-controls button.btn-max {
|
|
background-color: #28c940;
|
|
}
|
|
.window-controls button.btn-max:hover {
|
|
background-color: #34d058;
|
|
box-shadow: 0 0 4px #34d058;
|
|
}
|
|
.window-controls button.btn-max:active {
|
|
background-color: #1fae39;
|
|
}
|
|
|
|
</style>
|