91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<template>
|
|
<div class="dock-layout">
|
|
<!-- 主区域 -->
|
|
<Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import Area from './Area.vue';
|
|
import Panel from './Panel.vue';
|
|
|
|
// 主区域状态
|
|
const windowState = ref('最大化')
|
|
|
|
// 浮动区域列表
|
|
const floatingAreas = ref([])
|
|
|
|
// 区域ID计数器
|
|
let areaIdCounter = 1
|
|
|
|
// 添加新的浮动区域
|
|
const addFloatingArea = () => {
|
|
const newArea = {
|
|
id: `floating-area-${areaIdCounter++}`,
|
|
title: `浮动区域 ${areaIdCounter - 1}`,
|
|
x: 50 + (areaIdCounter - 2) * 20, // 错开位置
|
|
y: 50 + (areaIdCounter - 2) * 20,
|
|
width: 300,
|
|
height: 200,
|
|
collapsed: false,
|
|
toolbarExpanded: false
|
|
}
|
|
floatingAreas.value.push(newArea)
|
|
}
|
|
|
|
// 切换折叠状态
|
|
const onToggleCollapse = (id) => {
|
|
const area = floatingAreas.value.find(a => a.id === id)
|
|
if (area) {
|
|
area.collapsed = !area.collapsed
|
|
}
|
|
}
|
|
|
|
// 最大化/还原
|
|
const onMaximize = (id) => {
|
|
const area = floatingAreas.value.find(a => a.id === id)
|
|
if (area) {
|
|
// 简单实现：交换宽高
|
|
const temp = area.width
|
|
area.width = area.height
|
|
area.height = temp
|
|
}
|
|
}
|
|
|
|
// 关闭浮动区域
|
|
const onCloseFloatingArea = (id) => {
|
|
const index = floatingAreas.value.findIndex(a => a.id === id)
|
|
if (index !== -1) {
|
|
floatingAreas.value.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
// 切换工具栏
|
|
const onToggleToolbar = (id) => {
|
|
const area = floatingAreas.value.find(a => a.id === id)
|
|
if (area) {
|
|
area.toolbarExpanded = !area.toolbarExpanded
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dock-layout {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 添加浮动区域按钮样式 */
|
|
.add-floating-btn {
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.add-floating-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
</style> |