创建浮动区
This commit is contained in:
zqm
@@ -1,53 +1,53 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vs-area-wrapper">
|
<div class="vs-area-wrapper">
|
||||||
<div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
|
<div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
|
||||||
<!-- 顶部标题栏 -->
|
<!-- 顶部标题栏 -->
|
||||||
<div v-if="showTitleBar" class="vs-title-bar">
|
<div v-if="showTitleBar" class="vs-title-bar">
|
||||||
<div class="vs-title-left">
|
<div class="vs-title-left">
|
||||||
<div class="vs-app-icon" aria-label="AppIcon">
|
<div class="vs-app-icon" aria-label="AppIcon">
|
||||||
<svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
|
<svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
|
||||||
<path
|
|
||||||
fill="#68217A"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
style="shape-rendering: crispEdges;"
|
|
||||||
d="M0 4.2 L1.8 3.4 L5.8 6.6 L12.6 0 L16.6 1.8 L16.6 15 L12.4 16.6 L6 10.2 L1.8 13.4 L0 12.6 Z
|
|
||||||
M1.8 5.8 L4.2 8.4 L1.8 10.8 Z
|
|
||||||
M8.2 8.4 L12.6 5 L12.4 11.6 Z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<span class="vs-title-text">{{ title || '面板区' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
|
|
||||||
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" :aria-label="isMaximized ? '还原' : '最大化'" @click="onToggleMaximize">
|
|
||||||
<svg v-if="!isMaximized" class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
|
|
||||||
<rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
|
|
||||||
<rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
|
|
||||||
<rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
|
|
||||||
</svg>
|
|
||||||
<svg v-else class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
|
|
||||||
<path
|
<path
|
||||||
fill="#CED4DD"
|
fill="#68217A"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M1 4 L4 4 L4 1 L11 1 L11 8 L8 8 L8 11 L1 11 Z
|
style="shape-rendering: crispEdges;"
|
||||||
M5 4 L5 3 L10 3 L10 7 L8 7 L8 4 Z
|
d="M0 4.2 L1.8 3.4 L5.8 6.6 L12.6 0 L16.6 1.8 L16.6 15 L12.4 16.6 L6 10.2 L1.8 13.4 L0 12.6 Z
|
||||||
M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />
|
M1.8 5.8 L4.2 8.4 L1.8 10.8 Z
|
||||||
</svg>
|
M8.2 8.4 L12.6 5 L12.4 11.6 Z" />
|
||||||
</button>
|
</svg>
|
||||||
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
|
</div>
|
||||||
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
|
<span class="vs-title-text">{{ title || '面板区' }}</span>
|
||||||
<line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
|
</div>
|
||||||
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
|
<div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
|
||||||
</svg>
|
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" :aria-label="isMaximized ? '还原' : '最大化'" @click="onToggleMaximize">
|
||||||
</button>
|
<svg v-if="!isMaximized" class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
|
||||||
|
<rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
|
||||||
|
<rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
|
||||||
|
<rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
|
||||||
|
<path
|
||||||
|
fill="#CED4DD"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M1 4 L4 4 L4 1 L11 1 L11 8 L8 8 L8 11 L1 11 Z
|
||||||
|
M5 4 L5 3 L10 3 L10 7 L8 7 L8 4 Z
|
||||||
|
M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
|
||||||
|
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
|
||||||
|
<line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
|
||||||
|
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 内容区域（空） -->
|
<!-- 内容区域（空） -->
|
||||||
<div class="vs-content">
|
<div class="vs-content">
|
||||||
<!-- 内容区域已清空 -->
|
<!-- 内容区域已清空 -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -4,27 +4,23 @@
|
|||||||
<Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
|
<Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
|
||||||
|
|
||||||
<!-- 浮动区域列表 -->
|
<!-- 浮动区域列表 -->
|
||||||
<div
|
<Area
|
||||||
v-for="area in floatingAreas"
|
v-for="area in floatingAreas"
|
||||||
:key="area.id"
|
:key="area.id"
|
||||||
class="floating-area"
|
:id="area.id"
|
||||||
|
:title="area.title"
|
||||||
|
:WindowState="area.WindowState"
|
||||||
|
:showTitleBar="area.showTitleBar"
|
||||||
|
:width="area.width"
|
||||||
|
:height="area.height"
|
||||||
:style="{
|
:style="{
|
||||||
|
position: 'absolute',
|
||||||
left: area.x + 'px',
|
left: area.x + 'px',
|
||||||
top: area.y + 'px',
|
top: area.y + 'px',
|
||||||
width: area.width + 'px',
|
zIndex: 10
|
||||||
height: area.height + 'px'
|
|
||||||
}"
|
}"
|
||||||
>
|
@close="onCloseFloatingArea(area.id)"
|
||||||
<Area
|
/>
|
||||||
:id="area.id"
|
|
||||||
:title="area.title"
|
|
||||||
:WindowState="'正常'"
|
|
||||||
:showTitleBar="true"
|
|
||||||
:width="area.width"
|
|
||||||
:height="area.height"
|
|
||||||
@close="onCloseFloatingArea(area.id)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -44,6 +40,7 @@ let areaIdCounter = 1
|
|||||||
|
|
||||||
// 添加新的浮动区域
|
// 添加新的浮动区域
|
||||||
const addFloatingArea = () => {
|
const addFloatingArea = () => {
|
||||||
|
// 创建新的Area组件配置
|
||||||
const newArea = {
|
const newArea = {
|
||||||
id: `floating-area-${areaIdCounter++}`,
|
id: `floating-area-${areaIdCounter++}`,
|
||||||
title: `浮动区域 ${areaIdCounter - 1}`,
|
title: `浮动区域 ${areaIdCounter - 1}`,
|
||||||
@@ -51,8 +48,8 @@ const addFloatingArea = () => {
|
|||||||
y: 50 + (areaIdCounter - 2) * 20,
|
y: 50 + (areaIdCounter - 2) * 20,
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 200,
|
height: 200,
|
||||||
collapsed: false,
|
WindowState: '正常',
|
||||||
toolbarExpanded: false
|
showTitleBar: true
|
||||||
}
|
}
|
||||||
floatingAreas.value.push(newArea)
|
floatingAreas.value.push(newArea)
|
||||||
}
|
}
|
||||||
@@ -106,15 +103,7 @@ defineExpose({
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 浮动区域样式 */
|
/* 浮动区域样式已直接应用到Area组件 */
|
||||||
.floating-area {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
background-color: #fff;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加浮动区域按钮样式 */
|
/* 添加浮动区域按钮样式 */
|
||||||
.add-floating-btn {
|
.add-floating-btn {
|
||||||
|
|||||||
Reference in New Issue
Block a user