mirror of https://gitee.com/godoos/godoos.git
11 changed files with 3093 additions and 447 deletions
File diff suppressed because it is too large
After Width: | Height: | Size: 3.4 KiB |
@ -1,343 +1,368 @@ |
|||||
<template> |
<template> |
||||
<div |
<div |
||||
class="wintmp_outer dragwin" |
class="wintmp_outer dragwin" |
||||
:class="{ |
:class="{ |
||||
topwin: istop, |
topwin: istop, |
||||
max: windowInfo.state == WindowStateEnum.maximize, |
max: windowInfo.state == WindowStateEnum.maximize, |
||||
min: windowInfo.state == WindowStateEnum.minimize, |
min: windowInfo.state == WindowStateEnum.minimize, |
||||
fullscreen: windowInfo.state == WindowStateEnum.fullscreen, |
fullscreen: windowInfo.state == WindowStateEnum.fullscreen, |
||||
noframe: !windowInfo.frame, |
noframe: !windowInfo.frame, |
||||
disable: windowInfo.disable, |
disable: windowInfo.disable, |
||||
}" |
}" |
||||
:style="customerStyle" |
:style="customerStyle" |
||||
@touchstart.passive="onFocus" |
@touchstart.passive="onFocus" |
||||
@mousedown="onFocus" |
@mousedown="onFocus" |
||||
ref="$win_outer" |
ref="$win_outer" |
||||
v-dragable |
v-dragable |
||||
> |
> |
||||
<!-- 窗口标题栏 --> |
<!-- 窗口标题栏 --> |
||||
<div class="wintmp_uper" @contextmenu.prevent> |
<div |
||||
<MenuBar :browser-window="browserWindow"></MenuBar> |
class="wintmp_uper" |
||||
</div> |
@contextmenu.prevent |
||||
|
> |
||||
<div |
<MenuBar :browser-window="browserWindow"></MenuBar> |
||||
class="wintmp_main" |
</div> |
||||
:class="{ resizeing: resizemode != 'null' }" |
|
||||
@mousedown.stop="predown" |
<div |
||||
@touchstart.stop.passive="predown" |
class="wintmp_main" |
||||
@contextmenu.stop.prevent |
:class="{ resizeing: resizemode != 'null' }" |
||||
> |
@mousedown.stop="predown" |
||||
<div |
@touchstart.stop.passive="predown" |
||||
class="content-mask" |
@contextmenu.stop.prevent |
||||
v-if="!istop && typeof browserWindow.content === 'string'" |
> |
||||
></div> |
<div |
||||
<WindowInner :win="browserWindow"></WindowInner> |
class="content-mask" |
||||
</div> |
v-if="!istop && typeof browserWindow.content === 'string'" |
||||
<!-- 使用 v-for 生成拖拽边界 --> |
></div> |
||||
<div |
<WindowInner :win="browserWindow"></WindowInner> |
||||
v-for="border in dragBorders" |
</div> |
||||
:key="border.type" |
<!-- 使用 v-for 生成拖拽边界 --> |
||||
:class="[ |
<div |
||||
border.class, |
v-for="border in dragBorders" |
||||
'win_drag_border', |
:key="border.type" |
||||
{ isChoseMode: resizemode == border.type }, |
:class="[ |
||||
border.cursorClass |
border.class, |
||||
]" |
'win_drag_border', |
||||
v-if="resizable" |
{ isChoseMode: resizemode == border.type }, |
||||
draggable="false" |
border.cursorClass, |
||||
@mousedown.stop.prevent="startScale($event, border.type)" |
]" |
||||
@touchstart.stop.passive="startScale($event, border.type)" |
v-if="resizable" |
||||
></div> |
draggable="false" |
||||
</div> |
@mousedown.stop.prevent="startScale($event, border.type)" |
||||
|
@touchstart.stop.passive="startScale($event, border.type)" |
||||
|
></div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { onUnmounted, provide, ref } from "vue"; |
import { useSystem } from "@/system"; |
||||
import { onMounted, computed, UnwrapNestedRefs } from "vue"; |
import { emitEvent } from "@/system/event"; |
||||
import { WindowStateEnum } from "@/system/window/BrowserWindow"; |
import { |
||||
import { ScaleElement } from "@/system/window/dom/ScaleElement"; |
BrowserWindow, |
||||
import { BrowserWindow } from "@/system/window/BrowserWindow"; |
WindowStateEnum, |
||||
import { emitEvent } from "@/system/event"; |
} from "@/system/window/BrowserWindow"; |
||||
import { useSystem } from "@/system"; |
import { ScaleElement } from "@/system/window/dom/ScaleElement"; |
||||
import { vDragable } from "@/system/window/MakeDragable"; |
import { vDragable } from "@/system/window/MakeDragable"; |
||||
|
import { |
||||
const sys = useSystem(); |
computed, |
||||
const props = defineProps<{ |
onMounted, |
||||
browserWindow: UnwrapNestedRefs<BrowserWindow>; |
onUnmounted, |
||||
}>(); |
provide, |
||||
|
ref, |
||||
const browserWindow = props.browserWindow; |
UnwrapNestedRefs, |
||||
const windowInfo = browserWindow.windowInfo; |
} from "vue"; |
||||
provide("browserWindow", browserWindow); |
|
||||
provide("system", sys); |
const sys = useSystem(); |
||||
|
const props = defineProps<{ |
||||
function predown() { |
browserWindow: UnwrapNestedRefs<BrowserWindow>; |
||||
browserWindow.moveTop(); |
}>(); |
||||
emitEvent("window.content.click", browserWindow); |
|
||||
} |
const browserWindow = props.browserWindow; |
||||
|
const windowInfo = browserWindow.windowInfo; |
||||
const customerStyle = ref<NonNullable<unknown>>({}); |
provide("browserWindow", browserWindow); |
||||
|
provide("system", sys); |
||||
function onFocus(e: MouseEvent | TouchEvent): void { |
|
||||
browserWindow?.moveTop(); |
function predown() { |
||||
if (windowInfo.state === WindowStateEnum.maximize) { |
browserWindow.moveTop(); |
||||
if (e instanceof MouseEvent) { |
emitEvent("window.content.click", browserWindow); |
||||
e.preventDefault(); |
} |
||||
e.stopPropagation(); |
|
||||
} |
const customerStyle = ref<NonNullable<unknown>>({}); |
||||
} |
|
||||
} |
function onFocus(e: MouseEvent | TouchEvent): void { |
||||
|
browserWindow?.moveTop(); |
||||
const istop = computed(() => windowInfo.istop); |
if (windowInfo.state === WindowStateEnum.maximize) { |
||||
|
if (e instanceof MouseEvent) { |
||||
onMounted(() => { |
e.preventDefault(); |
||||
customerStyle.value = { |
e.stopPropagation(); |
||||
width: computed(() => windowInfo.width + "px"), |
} |
||||
height: computed(() => windowInfo.height + "px"), |
} |
||||
left: computed(() => windowInfo.x + "px"), |
} |
||||
top: computed(() => windowInfo.y + "px"), |
|
||||
zIndex: computed(() => { |
const istop = computed(() => windowInfo.istop); |
||||
if (windowInfo.alwaysOnTop) { |
|
||||
return 9999; |
onMounted(() => { |
||||
} |
customerStyle.value = { |
||||
return windowInfo.zindex; |
width: computed(() => windowInfo.width + "px"), |
||||
}), |
height: computed(() => windowInfo.height + "px"), |
||||
backgroundColor: computed(() => windowInfo.backgroundColor), |
left: computed(() => windowInfo.x + "px"), |
||||
}; |
top: computed(() => windowInfo.y + "px"), |
||||
}); |
zIndex: computed(() => { |
||||
|
if (windowInfo.alwaysOnTop) { |
||||
const resizable = ref(windowInfo.resizable); |
return 9999; |
||||
const resizemode = ref("null"); |
} |
||||
let scaleAble: ScaleElement; |
return windowInfo.zindex; |
||||
|
}), |
||||
onMounted(() => { |
backgroundColor: computed(() => windowInfo.backgroundColor), |
||||
scaleAble = new ScaleElement( |
}; |
||||
resizemode, |
}); |
||||
windowInfo.width, |
|
||||
windowInfo.height, |
const resizable = ref(windowInfo.resizable); |
||||
windowInfo.x, |
const resizemode = ref("null"); |
||||
windowInfo.y |
let scaleAble: ScaleElement; |
||||
); |
|
||||
scaleAble.onResize((width: number, height: number, x: number, y: number) => { |
onMounted(() => { |
||||
windowInfo.width = width || windowInfo.width; |
scaleAble = new ScaleElement( |
||||
windowInfo.height = height || windowInfo.height; |
resizemode, |
||||
windowInfo.x = x || windowInfo.x; |
windowInfo.width, |
||||
windowInfo.y = y || windowInfo.y; |
windowInfo.height, |
||||
browserWindow.emit("resize", windowInfo.width, windowInfo.height); |
windowInfo.x, |
||||
}); |
windowInfo.y |
||||
}); |
); |
||||
|
scaleAble.onResize( |
||||
function startScale(e: MouseEvent | TouchEvent, dire: string) { |
(width: number, height: number, x: number, y: number) => { |
||||
console.log(e); |
windowInfo.width = width || windowInfo.width; |
||||
if (windowInfo.disable) { |
windowInfo.height = height || windowInfo.height; |
||||
return; |
windowInfo.x = x || windowInfo.x; |
||||
} |
windowInfo.y = y || windowInfo.y; |
||||
scaleAble?.startScale( |
browserWindow.emit( |
||||
e, |
"resize", |
||||
dire, |
windowInfo.width, |
||||
windowInfo.x, |
windowInfo.height |
||||
windowInfo.y, |
); |
||||
windowInfo.width, |
} |
||||
windowInfo.height |
); |
||||
); |
}); |
||||
} |
|
||||
|
function startScale(e: MouseEvent | TouchEvent, dire: string) { |
||||
onUnmounted(() => { |
console.log(e); |
||||
scaleAble.unMount(); |
if (windowInfo.disable) { |
||||
}); |
return; |
||||
|
} |
||||
const dragBorders = [ |
scaleAble?.startScale( |
||||
{ type: 'r', class: 'right_border', cursorClass: 'ew-resize' }, |
e, |
||||
{ type: 'b', class: 'bottom_border', cursorClass: 'ns-resize' }, |
dire, |
||||
{ type: 'l', class: 'left_border', cursorClass: 'ew-resize' }, |
windowInfo.x, |
||||
{ type: 't', class: 'top_border', cursorClass: 'ns-resize' }, |
windowInfo.y, |
||||
{ type: 'rb', class: 'right_bottom_border', cursorClass: 'nwse-resize' }, |
windowInfo.width, |
||||
{ type: 'lb', class: 'left_bottom_border', cursorClass: 'nesw-resize' }, |
windowInfo.height |
||||
{ type: 'lt', class: 'left_top_border', cursorClass: 'nwse-resize' }, |
); |
||||
{ type: 'rt', class: 'right_top_border', cursorClass: 'nesw-resize' }, |
} |
||||
]; |
|
||||
|
onUnmounted(() => { |
||||
|
scaleAble.unMount(); |
||||
|
}); |
||||
|
|
||||
|
const dragBorders = [ |
||||
|
{ type: "r", class: "right_border", cursorClass: "ew-resize" }, |
||||
|
{ type: "b", class: "bottom_border", cursorClass: "ns-resize" }, |
||||
|
{ type: "l", class: "left_border", cursorClass: "ew-resize" }, |
||||
|
{ type: "t", class: "top_border", cursorClass: "ns-resize" }, |
||||
|
{ |
||||
|
type: "rb", |
||||
|
class: "right_bottom_border", |
||||
|
cursorClass: "nwse-resize", |
||||
|
}, |
||||
|
{ type: "lb", class: "left_bottom_border", cursorClass: "nesw-resize" }, |
||||
|
{ type: "lt", class: "left_top_border", cursorClass: "nwse-resize" }, |
||||
|
{ type: "rt", class: "right_top_border", cursorClass: "nesw-resize" }, |
||||
|
]; |
||||
</script> |
</script> |
||||
<style> |
<style> |
||||
.dragwin { |
.dragwin { |
||||
position: absolute; |
position: absolute; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
</style> |
</style> |
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.wintmp_outer { |
.wintmp_outer { |
||||
position: absolute; |
position: absolute; |
||||
padding: 0; |
padding: 0; |
||||
margin: 0; |
margin: 0; |
||||
// left: 0; |
// left: 0; |
||||
// top: 0; |
// top: 0; |
||||
width: max-content; |
min-width: 950px; |
||||
height: max-content; |
width: max-content; |
||||
background-color: #fff; |
height: max-content; |
||||
border: var(--window-border); |
min-height: 650px; |
||||
display: flex; |
border-radius: 10px; |
||||
flex-direction: column; |
overflow: hidden; |
||||
box-shadow: var(--window-box-shadow); |
background-color: #fff; |
||||
border-radius: var(--window-border-radius); |
// border: var(--window-border); |
||||
.wintmp_main { |
display: flex; |
||||
position: relative; |
flex-direction: column; |
||||
width: 100%; |
// box-shadow: var(--window-box-shadow); |
||||
height: 100%; |
// border-radius: var(--window-border-radius); |
||||
// background-color: rgb(255, 255, 255); |
.wintmp_main { |
||||
overflow: hidden; |
position: relative; |
||||
contain: content; |
width: 100%; |
||||
} |
height: 100%; |
||||
} |
// background-color: rgb(255, 255, 255); |
||||
|
overflow: hidden; |
||||
.topwin { |
contain: content; |
||||
border: 1px solid #0078d7; |
} |
||||
box-shadow: var(--window-top-box-shadow); |
} |
||||
} |
|
||||
|
.topwin { |
||||
.icon { |
// border: 1px solid #0078d7; |
||||
width: 12px; |
// box-shadow: var(--window-top-box-shadow); |
||||
height: 12px; |
} |
||||
} |
|
||||
|
.icon { |
||||
.max { |
width: 12px; |
||||
position: absolute; |
height: 12px; |
||||
left: 0 !important; |
} |
||||
top: 0 !important; |
|
||||
width: 100% !important; |
.max { |
||||
height: 100% !important; |
position: absolute; |
||||
transition: left 0.1s ease-in-out, top 0.1s ease-in-out, width 0.1s ease-in-out, |
left: 0 !important; |
||||
height 0.1s ease-in-out; |
top: 0 !important; |
||||
} |
width: 100% !important; |
||||
|
height: 100% !important; |
||||
.disable { |
transition: left 0.1s ease-in-out, top 0.1s ease-in-out, |
||||
.wintmp_uper, |
width 0.1s ease-in-out, height 0.1s ease-in-out; |
||||
.wintmp_main { |
} |
||||
pointer-events: none; |
|
||||
user-select: none; |
.disable { |
||||
box-shadow: none; |
.wintmp_uper, |
||||
} |
.wintmp_main { |
||||
} |
pointer-events: none; |
||||
.min { |
user-select: none; |
||||
visibility: hidden; |
box-shadow: none; |
||||
display: none; |
} |
||||
} |
} |
||||
|
.min { |
||||
.fullscreen { |
visibility: hidden; |
||||
// 将声明移动到嵌套规则之上 |
display: none; |
||||
position: fixed; |
} |
||||
left: 0 !important; |
|
||||
top: 0 !important; |
.fullscreen { |
||||
width: 100% !important; |
// 将声明移动到嵌套规则之上 |
||||
height: 100% !important; |
position: fixed; |
||||
z-index: 205 !important; |
left: 0 !important; |
||||
border: none; |
top: 0 !important; |
||||
.wintmp_uper { |
width: 100% !important; |
||||
display: none; |
height: 100% !important; |
||||
} |
z-index: 205 !important; |
||||
} |
border: none; |
||||
|
.wintmp_uper { |
||||
.noframe { |
display: none; |
||||
border: none; |
} |
||||
box-shadow: none; |
} |
||||
.wintmp_uper { |
|
||||
display: none; |
.noframe { |
||||
} |
border: none; |
||||
} |
box-shadow: none; |
||||
|
.wintmp_uper { |
||||
.transparent { |
display: none; |
||||
background-color: transparent; |
} |
||||
|
} |
||||
.wintmp_main { |
|
||||
background-color: transparent; |
.transparent { |
||||
} |
background-color: transparent; |
||||
|
|
||||
.wintmp_uper { |
.wintmp_main { |
||||
background-color: rgba(255, 255, 255, 0.774); |
background-color: transparent; |
||||
} |
} |
||||
} |
|
||||
|
.wintmp_uper { |
||||
.win_drag_border { |
background-color: rgba(255, 255, 255, 0.774); |
||||
position: absolute; |
} |
||||
background-color: rgba(0, 0, 0, 0); |
} |
||||
} |
|
||||
|
.win_drag_border { |
||||
.right_border { |
position: absolute; |
||||
cursor: ew-resize; |
background-color: rgba(0, 0, 0, 0); |
||||
right: -12px; |
} |
||||
width: 16px; |
|
||||
height: calc(100% - 4px); |
.right_border { |
||||
} |
cursor: ew-resize; |
||||
|
right: -12px; |
||||
.bottom_border { |
width: 16px; |
||||
cursor: ns-resize; |
height: calc(100% - 4px); |
||||
bottom: -12px; |
} |
||||
width: calc(100% - 4px); |
|
||||
height: 16px; |
.bottom_border { |
||||
} |
cursor: ns-resize; |
||||
|
bottom: -12px; |
||||
.left_border { |
width: calc(100% - 4px); |
||||
cursor: ew-resize; |
height: 16px; |
||||
left: -12px; |
} |
||||
width: 16px; |
|
||||
height: calc(100% - 4px); |
.left_border { |
||||
} |
cursor: ew-resize; |
||||
|
left: -12px; |
||||
.top_border { |
width: 16px; |
||||
cursor: ns-resize; |
height: calc(100% - 4px); |
||||
top: -12px; |
} |
||||
width: calc(100% - 4px); |
|
||||
height: 16px; |
.top_border { |
||||
} |
cursor: ns-resize; |
||||
|
top: -12px; |
||||
.left_top_border { |
width: calc(100% - 4px); |
||||
cursor: nwse-resize; |
height: 16px; |
||||
left: -12px; |
} |
||||
top: -12px; |
|
||||
width: 16px; |
.left_top_border { |
||||
height: 16px; |
cursor: nwse-resize; |
||||
} |
left: -12px; |
||||
|
top: -12px; |
||||
.right_top_border { |
width: 16px; |
||||
cursor: nesw-resize; |
height: 16px; |
||||
right: -12px; |
} |
||||
top: -12px; |
|
||||
width: 16px; |
.right_top_border { |
||||
height: 16px; |
cursor: nesw-resize; |
||||
} |
right: -12px; |
||||
|
top: -12px; |
||||
.left_bottom_border { |
width: 16px; |
||||
cursor: nesw-resize; |
height: 16px; |
||||
left: -12px; |
} |
||||
bottom: -12px; |
|
||||
width: 16px; |
.left_bottom_border { |
||||
height: 16px; |
cursor: nesw-resize; |
||||
} |
left: -12px; |
||||
|
bottom: -12px; |
||||
.right_bottom_border { |
width: 16px; |
||||
cursor: nwse-resize; |
height: 16px; |
||||
right: -12px; |
} |
||||
bottom: -12px; |
|
||||
width: 16px; |
.right_bottom_border { |
||||
height: 16px; |
cursor: nwse-resize; |
||||
} |
right: -12px; |
||||
|
bottom: -12px; |
||||
.isChoseMode { |
width: 16px; |
||||
width: 100vw; |
height: 16px; |
||||
height: 100vh; |
} |
||||
position: fixed; |
|
||||
left: 0; |
.isChoseMode { |
||||
top: 0; |
width: 100vw; |
||||
} |
height: 100vh; |
||||
|
position: fixed; |
||||
.resizeing { |
left: 0; |
||||
user-select: none; |
top: 0; |
||||
pointer-events: none; |
} |
||||
} |
|
||||
|
.resizeing { |
||||
.content-mask { |
user-select: none; |
||||
position: absolute; |
pointer-events: none; |
||||
width: 100%; |
} |
||||
height: 100%; |
|
||||
background-color: rgba(0, 0, 0, 0); |
.content-mask { |
||||
z-index: 100; |
position: absolute; |
||||
} |
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
z-index: 100; |
||||
|
} |
||||
</style> |
</style> |
Loading…
Reference in new issue