From 4463529e764fe61f2f5ec8b0f95499b038de4499 Mon Sep 17 00:00:00 2001
From: huaiyuan <1029848564@qq.com>
Date: Fri, 7 Jun 2024 21:08:58 +0800
Subject: [PATCH] fix: update BasicWindow evnet

---
 packages/frontend/src/index.template.html     |   1 +
 packages/frontend/src/pages/LaunchPad.vue     |   3 +-
 .../frontend/src/pages/mobile/BasicWindow.vue | 428 ++++++++++++++++++
 .../frontend/src/pages/mobile/IndexPage.vue   | 152 +++++--
 .../frontend/src/pages/mobile/LaunchPad.vue   |   1 +
 5 files changed, 547 insertions(+), 38 deletions(-)
 create mode 100644 packages/frontend/src/pages/mobile/BasicWindow.vue

diff --git a/packages/frontend/src/index.template.html b/packages/frontend/src/index.template.html
index 48b308a..c3acbc5 100644
--- a/packages/frontend/src/index.template.html
+++ b/packages/frontend/src/index.template.html
@@ -39,6 +39,7 @@
 <style>
 	body {
 		overflow: hidden;
+		touch-action: none;
 	}
 
 	#Loading {
diff --git a/packages/frontend/src/pages/LaunchPad.vue b/packages/frontend/src/pages/LaunchPad.vue
index ae321af..d1f0b21 100644
--- a/packages/frontend/src/pages/LaunchPad.vue
+++ b/packages/frontend/src/pages/LaunchPad.vue
@@ -526,12 +526,11 @@ const cleanSearchVal = () => {
 .dragMask {
 	width: 140%;
 	height: 120%;
-	transform: translate(-14%, -10%);
+	transform: translate(-13%, -10%);
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
-	border-radius: 10px;
 	overflow: hidden;
 	cursor: pointer;
 }
diff --git a/packages/frontend/src/pages/mobile/BasicWindow.vue b/packages/frontend/src/pages/mobile/BasicWindow.vue
new file mode 100644
index 0000000..ae7924e
--- /dev/null
+++ b/packages/frontend/src/pages/mobile/BasicWindow.vue
@@ -0,0 +1,428 @@
+<template>
+	<!-- <VueDragResize
+		:isActive="true"
+		:key="value"
+		:w="value.width"
+		:h="value.height"
+		:parentWidth="value.max_width"
+		:parentHeight="value.max_height"
+		:minw="value.min_width"
+		:minh="value.min_height"
+		:x="value.left"
+		:y="value.top"
+		:isResizable="value.isResizable"
+		v-on:dragging="dragging"
+		v-on:dragstop="dragstop"
+		v-on:resizing="resizing"
+		v-on:resizestop="resizestop"
+		@click="onTop"
+		:stickSize="24"
+		class="iframe-box"
+		:class="
+			isFull ? (value.isResizable ? 'animationClass' : 'animationClass2') : ''
+		"
+		:parentLimitation="true"
+		ref="dragRef"
+	> -->
+	<div
+		class="iframe-box"
+		:class="isFull ? 'animationClass' : ''"
+		:style="{
+			width: `${value.width}px`,
+			height: `${value.height}px`,
+			position: 'relative',
+			left: `${value.left}px`,
+			top: `${value.top}px`
+		}"
+		@click="onTop"
+	>
+		<div class="iframeDiv" v-if="!value.active || isDrag || isResize"></div>
+		<iframe
+			class="iframe-window"
+			allow="web-share; clipboard-read; clipboard-write"
+			:src="value.pathto ? value.url + '?pathto=' + value.pathto : value.url"
+			ref="iframeRef"
+		/>
+
+		<div class="title" style="width: 100%; height: 40px; padding: 0 12px">
+			<q-img class="app_icon" :src="value.icon" />
+
+			<span class="app_title"> {{ value.title }} {{ value.isResizable }}</span>
+
+			<q-space />
+
+			<q-btn
+				flat
+				round
+				size="xs"
+				class="window_btn"
+				@click="onMini"
+				@mouseover="h_min = true"
+				@mouseleave="h_min = false"
+			>
+				<q-img v-show="h_min" src="../../assets/window_min_h.svg" />
+				<q-img v-show="!h_min" src="../../assets/window_min_n.svg" />
+			</q-btn>
+
+			<q-btn
+				flat
+				round
+				size="xs"
+				class="window_btn"
+				@click="onFull"
+				@mouseover="h_full = true"
+				@mouseleave="h_full = false"
+			>
+				<q-img v-show="h_full" src="../../assets/window_full_h.svg" />
+				<q-img v-show="!h_full" src="../../assets/window_full_n.svg" />
+			</q-btn>
+
+			<q-btn
+				flat
+				round
+				size="xs"
+				class="window_btn"
+				@click="onNew"
+				@mouseover="h_new = true"
+				@mouseleave="h_new = false"
+			>
+				<q-img
+					v-show="h_new"
+					style="width: 13px; height: 13px"
+					src="../../assets/window_new_h.svg"
+				/>
+				<q-img
+					v-show="!h_new"
+					style="width: 13px; height: 13px"
+					src="../../assets/window_new_n.svg"
+				/>
+			</q-btn>
+
+			<q-btn
+				flat
+				round
+				size="xs"
+				@click.once="onClose"
+				class="window_btn"
+				@mouseover="h_close = true"
+				@mouseleave="h_close = false"
+			>
+				<q-img v-show="h_close" src="../../assets/window_close_h.svg" />
+				<q-img v-show="!h_close" src="../../assets/window_close_n.svg" />
+			</q-btn>
+		</div>
+
+		<BtLoading
+			v-if="iframeLoad"
+			:show="true"
+			textColor="#4999ff"
+			color="#4999ff"
+			text=""
+			backgroundColor="#ffffff"
+		>
+		</BtLoading>
+	</div>
+
+	<!-- </VueDragResize> -->
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, onMounted, nextTick } from 'vue';
+
+interface WindowRect {
+	left: number;
+	top: number;
+	width: number;
+	height: number;
+}
+
+export default defineComponent({
+	name: 'BasicWindow',
+	props: {
+		modelValue: {
+			type: Object,
+			default: () => {
+				return {
+					id: '',
+					width: 400,
+					height: 300,
+					max_width: 400,
+					max_height: 300,
+					min_width: 400,
+					min_height: 300,
+					top: 0,
+					left: 0,
+					title: '',
+					url: '',
+					icon: '',
+					active: true
+				};
+			}
+		}
+	},
+
+	setup(props, context) {
+		const value = ref(props.modelValue);
+		const h_close = ref(false);
+		const h_min = ref(false);
+		const h_full = ref(false);
+		const h_new = ref(false);
+		const isActive = ref(false);
+		const isDrag = ref(false);
+		const isResize = ref(false);
+		const iframeLoad = ref(true);
+		const iframeRef = ref();
+		const dragRef = ref();
+		const isFull = ref(false);
+		const clickNew = ref(false);
+
+		const app_icon: string = value.value.icon;
+
+		let dragging = (rect: WindowRect) => {
+			if (!value.value.active) {
+				context.emit('ontop', value.value);
+			}
+			isDrag.value = true;
+			let callback_obj = {};
+			Object.assign(callback_obj, value.value, rect);
+			context.emit('update:modelValue', callback_obj);
+		};
+
+		let dragstop = () => {
+			isDrag.value = false;
+		};
+
+		let resizing = (rect: WindowRect) => {
+			if (!value.value.active) {
+				context.emit('ontop', value.value);
+			}
+			isResize.value = true;
+			let callback_obj = {};
+			Object.assign(callback_obj, value.value, rect);
+			context.emit('update:modelValue', callback_obj);
+		};
+
+		let resizestop = () => {
+			isResize.value = false;
+		};
+
+		let activated = () => {
+			isActive.value = true;
+		};
+
+		let deactivated = () => {
+			isActive.value = false;
+		};
+
+		let onClose = () => {
+			context.emit('close', value.value);
+		};
+
+		let onMini = () => {
+			context.emit('mini', value.value);
+		};
+
+		let onFull = () => {
+			isFull.value = !isFull.value;
+		};
+
+		let onNew = () => {
+			clickNew.value = true;
+			setTimeout(() => {
+				clickNew.value = false;
+			}, 500);
+			window.open(value.value.url);
+		};
+
+		let onTop = () => {
+			if (clickNew.value) {
+				return false;
+			}
+			if (checkDoubleClick()) {
+				isFull.value = !isFull.value;
+			}
+			context.emit('ontop', value.value);
+		};
+
+		let lastTapTimeFunc: NodeJS.Timeout;
+		let lastTapDiffTime = 0;
+		const checkDoubleClick = function () {
+			let curT = new Date().getTime();
+			let lastT = lastTapDiffTime;
+			lastTapDiffTime = curT;
+			let diff = curT - lastT;
+			if (diff < 300) {
+				clearTimeout(lastTapTimeFunc);
+				return true;
+			} else {
+				lastTapTimeFunc = setTimeout(function () {
+					return false;
+				}, 300);
+			}
+		};
+
+		onMounted(() => {
+			nextTick(() => {
+				new MutationObserver(function (mutations) {
+					mutations.some(function (mutation) {
+						if (
+							mutation.type === 'attributes' &&
+							mutation.attributeName === 'src'
+						) {
+							return true;
+						}
+
+						return false;
+					});
+				}).observe(document.body, {
+					attributes: true,
+					attributeFilter: ['src'],
+					attributeOldValue: true,
+					characterData: false,
+					characterDataOldValue: false,
+					childList: false,
+					subtree: true
+				});
+
+				if (iframeRef.value.attachEvent) {
+					// IE
+					iframeRef.value.attachEvent('onload', () => {
+						iframeLoad.value = false;
+					});
+				} else {
+					// not IE
+					iframeRef.value.onload = function () {
+						iframeLoad.value = false;
+					};
+				}
+			});
+		});
+
+		return {
+			value,
+			isActive,
+			isDrag,
+			isResize,
+			h_close,
+			h_min,
+			h_full,
+			h_new,
+			app_icon,
+			iframeLoad,
+			iframeRef,
+			dragRef,
+			isFull,
+			dragging,
+			dragstop,
+			resizing,
+			resizestop,
+			activated,
+			deactivated,
+			onClose,
+			onMini,
+			onFull,
+			onTop,
+			onNew
+		};
+	}
+});
+</script>
+
+<style lang="scss">
+.animationClass {
+	top: 0 !important;
+	left: 100vw !important;
+	transition: all 0.3s;
+	width: 100vw !important;
+	height: 100vh !important;
+	z-index: 10 !important;
+}
+
+.animationClass2 {
+	top: 0 !important;
+	transition: all 0.3s;
+
+	.content-container {
+		height: 100vh !important;
+		transition: all 0.3s;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.iframe-box {
+	box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
+		0 3px 1px -2px rgb(0 0 0 / 12%);
+	background: white;
+	border-radius: 10px;
+	overflow: hidden;
+
+	.iframe-window {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		padding-top: 40px;
+		border-radius: 10px;
+		border-width: 0px;
+		z-index: -1;
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		border-bottom: 1px solid #e0e0e0;
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		.app_title {
+			font-family: 'Source Han Sans CN';
+			font-style: normal;
+			font-weight: 500;
+			font-size: 16px;
+			line-height: 20px;
+			/* identical to box height, or 100% */
+
+			color: #414141;
+			margin-left: 15px;
+		}
+
+		.app_icon {
+			width: 20px;
+			height: 20px;
+			padding: 0px;
+			border-radius: 4px;
+		}
+
+		.window_btn {
+			width: 16px;
+			height: 16px;
+			min-width: 16px;
+			min-height: 16px;
+			margin-left: 20px;
+			padding: 2px;
+			// margin-top: 4px;
+			.q-focus-helper {
+				display: none;
+			}
+		}
+	}
+}
+
+.iframeDiv {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 1111;
+	filter: alpha(opacity=0);
+	opacity: 0;
+	background: transparent;
+	margin-top: 30px;
+	/*display: none;*/
+}
+</style>
diff --git a/packages/frontend/src/pages/mobile/IndexPage.vue b/packages/frontend/src/pages/mobile/IndexPage.vue
index 4c80f89..8ab66a2 100644
--- a/packages/frontend/src/pages/mobile/IndexPage.vue
+++ b/packages/frontend/src/pages/mobile/IndexPage.vue
@@ -39,7 +39,7 @@
 
 		<div style="width: 100%; height: 100vh" ref="window_parent">
 			<div
-				:style="`position: fixed;width: 300%;height: 200%; left: -100%; top: 0;`"
+				:style="`position: relative;width: 300%;height: 200%; left: -100%; top: 0;`"
 			>
 				<template v-for="window_info in window_infos" :key="window_info.id">
 					<BasicWindow
@@ -49,7 +49,6 @@
 						@close="onWindowClose"
 						@mini="onWindowMiniSize"
 						@ontop="onWindowRequestOnTop"
-						@full="onWindowFullSize"
 						:style="`z-index:${window_info.z};`"
 					/>
 				</template>
@@ -97,7 +96,7 @@ import { expiresStorage } from 'src/utils/location';
 import Notification from '../Notification.vue';
 import Search from '../Search/IndexPage.vue';
 import AvatorComponent from 'components/AvatorComponent.vue';
-import BasicWindow from 'components/BasicWindow.vue';
+import BasicWindow from './BasicWindow.vue';
 import UpgradeComponent from 'components/UpgradeComponent.vue';
 
 import DockComponent from './DockComponent.vue';
@@ -173,37 +172,37 @@ const onWindowRequestOnTop = (window_info: WindowInfo) => {
 	need_save_window = true;
 };
 
-const onWindowFullSize = async (window_info: WindowInfo) => {
-	let index = window_infos.value.findIndex(
-		(window) => window.id == window_info.id
-	);
-
-	if (index < 0) {
-		return;
-	}
-
-	if (window_infos.value[index].isResizable) {
-		window_infos.value[index].width = window_parent.value?.offsetWidth
-			? window_parent.value?.offsetWidth - 108
-			: 800;
-		await nextTick();
-		await nextTick();
-		window_infos.value[index].left = 108 + screenWidth.value;
-		await nextTick();
-		await nextTick();
-	}
-
-	await nextTick();
-	await nextTick();
-	window_infos.value[index].height = window_parent.value?.offsetHeight
-		? window_parent.value?.offsetHeight
-		: 600;
-	await nextTick();
-	await nextTick();
-	window_infos.value[index].top = 0;
-	await nextTick();
-	await nextTick();
-};
+// const onWindowFullSize = async (window_info: WindowInfo) => {
+// 	let index = window_infos.value.findIndex(
+// 		(window) => window.id == window_info.id
+// 	);
+
+// 	if (index < 0) {
+// 		return;
+// 	}
+
+// 	if (window_infos.value[index].isResizable) {
+// 		window_infos.value[index].width = window_parent.value?.offsetWidth
+// 			? window_parent.value?.offsetWidth - 108
+// 			: 800;
+// 		await nextTick();
+// 		await nextTick();
+// 		window_infos.value[index].left = 108 + screenWidth.value;
+// 		await nextTick();
+// 		await nextTick();
+// 	}
+
+// 	await nextTick();
+// 	await nextTick();
+// 	window_infos.value[index].height = window_parent.value?.offsetHeight
+// 		? window_parent.value?.offsetHeight
+// 		: 600;
+// 	await nextTick();
+// 	await nextTick();
+// 	window_infos.value[index].top = 0;
+// 	await nextTick();
+// 	await nextTick();
+// };
 
 const closeUpgrade = () => {
 	upgradeFlag.value = false;
@@ -466,8 +465,89 @@ const onAppClick = async (click: AppClickInfo) => {
 			url = url + '/' + click.data.path;
 			url = url.replaceAll('//', '/');
 		}
+		if (app.openMethod == 'window') {
+			window.open('//' + url);
+			return;
+		}
+
+		let w = window_infos.value.find((window) => window.id == rid);
 
-		window.open('https://' + url);
+		if (w) {
+			w.is_show = true;
+			for (let i = 0; i < window_infos.value.length; ++i) {
+				if (window_infos.value[i].z > w.z) {
+					window_infos.value[i].z--;
+					window_infos.value[i].active = false;
+				}
+			}
+			w.z = window_infos.value.length;
+			w.active = true;
+		} else {
+			let width = window_parent.value?.offsetWidth
+				? window_parent.value?.offsetWidth * 0.9
+				: 800;
+			let height = window_parent.value?.offsetHeight
+				? window_parent.value?.offsetHeight * 0.9 - 100
+				: 600;
+
+			if (app.id.startsWith('settings')) {
+				height = window_parent.value?.offsetHeight
+					? window_parent.value?.offsetHeight * 0.8
+					: 600;
+				// width = (height / 544) * 720;
+				width = 858;
+			}
+
+			let left = window_parent.value?.offsetWidth
+				? (window_parent.value?.offsetWidth - width) / 2
+				: 0;
+			let top = window_parent.value?.offsetHeight
+				? (window_parent.value?.offsetHeight - height) / 2
+				: 0;
+
+			let obj: WindowInfo = {
+				width: width,
+				height: height,
+				max_height: window_parent.value?.offsetHeight || 800,
+				max_width: window_parent.value?.offsetWidth || 600,
+				min_width: 400,
+				min_height: 200,
+				left: left + screenWidth.value,
+				top: top,
+				id: app.id,
+				url: '//' + url,
+				ssl_type: 'http',
+				title: app.title,
+				is_show: true,
+				z: window_infos.value.length,
+				icon: app.icon,
+				active: true,
+				isResizable: true
+			};
+
+			if (app.id.startsWith('settings')) {
+				obj.isResizable = false;
+				obj.min_width = obj.width;
+				obj.min_height = obj.height;
+				obj.max_width = obj.width;
+			} else if (app.id.startsWith('appstore')) {
+				obj.min_width = obj.width / 2;
+				obj.min_height = obj.height / 2;
+			} else {
+				obj.left = obj.left + window_infos.value.length * 25;
+				obj.top = obj.top + window_infos.value.length * 25;
+			}
+
+			window_infos.value.push(obj);
+
+			for (let i = 0; i < window_infos.value.length - 1; ++i) {
+				window_infos.value[i].active = false;
+			}
+
+			if (rid != 'home') {
+				dockRef.value?.handleOpenApp(rid);
+			}
+		}
 	} else {
 		Notify.create({
 			type: 'negative',
@@ -559,7 +639,7 @@ const onLogout = async () => {
 	position: fixed;
 	right: 20px;
 	top: 20px;
-	z-index: 1;
+	z-index: -1;
 }
 .desktop-box {
 	width: 100%;
diff --git a/packages/frontend/src/pages/mobile/LaunchPad.vue b/packages/frontend/src/pages/mobile/LaunchPad.vue
index d9488a6..8814db8 100644
--- a/packages/frontend/src/pages/mobile/LaunchPad.vue
+++ b/packages/frontend/src/pages/mobile/LaunchPad.vue
@@ -327,6 +327,7 @@ function deleteLaunch(
 	position: absolute;
 	top: 0px;
 	left: 0px;
+	touch-action: none;
 }
 .launch_pad_box {
 	width: 100%;