151 lines
2.6 KiB
Vue
151 lines
2.6 KiB
Vue
<template>
|
||
<div class="toolbar-panel">
|
||
<!-- 左侧工具组 -->
|
||
<div class="toolbar-group">
|
||
<button class="toolbar-btn" title="新建场景">
|
||
📄
|
||
</button>
|
||
<button class="toolbar-btn" title="打开场景">
|
||
📁
|
||
</button>
|
||
<button class="toolbar-btn" title="保存场景">
|
||
💾
|
||
</button>
|
||
<div class="toolbar-separator"></div>
|
||
<button class="toolbar-btn" title="撤销">
|
||
↶
|
||
</button>
|
||
<button class="toolbar-btn" title="重做">
|
||
↷
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 中间运行按钮 -->
|
||
<div class="toolbar-group">
|
||
<button class="toolbar-btn run-btn" title="运行场景">
|
||
▶️
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 右侧重置布局按钮 -->
|
||
<div class="toolbar-group">
|
||
<button
|
||
class="toolbar-btn"
|
||
@click="layoutStore.resetLayout"
|
||
title="重置布局"
|
||
>
|
||
🔄
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useLayoutStore } from '@/stores/Layout'
|
||
|
||
// 使用布局store
|
||
const layoutStore = useLayoutStore()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.toolbar-panel {
|
||
height: 100%;
|
||
background: #3c3c3c;
|
||
border-bottom: 1px solid #4a4a4a;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 12px;
|
||
color: #cccccc;
|
||
}
|
||
|
||
.toolbar-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.toolbar-btn {
|
||
background: transparent;
|
||
border: 1px solid transparent;
|
||
color: #888;
|
||
cursor: pointer;
|
||
padding: 6px 8px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
min-width: 32px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.toolbar-btn:hover {
|
||
background: #4a4a4a;
|
||
border-color: #5a5a5a;
|
||
color: #cccccc;
|
||
}
|
||
|
||
.toolbar-btn:active {
|
||
background: #2d2d2d;
|
||
border-color: #007acc;
|
||
}
|
||
|
||
.toolbar-btn.active {
|
||
background: #007acc;
|
||
border-color: #005a9e;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.run-btn {
|
||
background: #28a745;
|
||
border-color: #1e7e34;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
min-width: 48px;
|
||
height: 32px;
|
||
}
|
||
|
||
.run-btn:hover {
|
||
background: #218838;
|
||
border-color: #1c7430;
|
||
}
|
||
|
||
.run-btn:active {
|
||
background: #1e7e34;
|
||
border-color: #1c7430;
|
||
}
|
||
|
||
.toolbar-separator {
|
||
width: 1px;
|
||
height: 20px;
|
||
background: #4a4a4a;
|
||
margin: 0 4px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.toolbar-panel {
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.toolbar-group {
|
||
gap: 2px;
|
||
}
|
||
|
||
.toolbar-btn {
|
||
padding: 4px 6px;
|
||
min-width: 28px;
|
||
height: 24px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.run-btn {
|
||
min-width: 40px;
|
||
height: 28px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
</style>
|
||
|