fix: update iframe theme

.github/workflows/update-frontend.yml

@@ -6,6 +6,7 @@ on:
     push:
         branches:
             - "main"
+            - "feat/app-service"
 
         tags:
           - 'v*'

packages/frontend/package.json

@@ -13,7 +13,7 @@
     "build": "quasar build -m pwa"
   },
   "dependencies": {
-    "@bytetrade/ui": "^0.1.15",
+    "@bytetrade/ui": "^0.1.28",
     "@desktop/core": "0.1.0",
     "@quasar/extras": "^1.16.7",
     "@types/ua-parser-js": "0.7.36",

packages/frontend/src/components/BasicWindow.vue

@@ -17,7 +17,7 @@
 		v-on:resizestop="resizeStop"
 		@click="onTop"
 		:stickSize="24"
-		class="iframe-box"
+		class="iframe-box bg-background-1"
 		:class="
 			isFull ? (value.isResizable ? 'animationClass' : 'animationClass2') : ''
 		"
@@ -125,7 +125,14 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted, nextTick, onUnmounted } from 'vue';
+import {
+	ref,
+	defineComponent,
+	onMounted,
+	nextTick,
+	onUnmounted,
+	watch
+} from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
@@ -177,6 +184,7 @@ export default defineComponent({
 		const isFull = ref(false);
 		const clickNew = ref(false);
 		const $q = useQuasar();
+		const { locale } = useI18n();
 
 		const app_icon: string = value.value.icon;
 
@@ -266,18 +274,33 @@ export default defineComponent({
 			}
 		};
 
-		const message = (event: any) => {
-			if (event.data.message === 'theme_update') {
-				if (event.data.info.theme.toString() === '1') {
-					$q.dark.set(false);
-				} else {
-					$q.dark.set(true);
-				}
+		// const message = (event: any) => {
+		// 	if (event.data.message === 'theme_update') {
+		// 		if (event.data.info.theme.toString() === '1') {
+		// 			$q.dark.set(false);
+		// 		} else {
+		// 			$q.dark.set(true);
+		// 		}
+		// 	}
+		// };
+
+		watch(
+			() => locale,
+			() => {
+				iframeRef.value.contentWindow.postMessage(
+					{
+						message: 'theme_update',
+						info: {
+							theme: locale.value
+						}
+					},
+					'*'
+				);
 			}
-		};
+		);
 
 		onMounted(() => {
-			window.addEventListener('message', message);
+			// window.addEventListener('message', message);
 
 			nextTick(() => {
 				new MutationObserver(function (mutations) {
@@ -316,7 +339,7 @@ export default defineComponent({
 		});
 
 		onUnmounted(() => {
-			window.removeEventListener('message', message);
+			// window.removeEventListener('message', message);
 		});
 
 		return {
@@ -379,7 +402,6 @@ export default defineComponent({
 .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;
 
 	.iframe-window {

packages/frontend/src/components/ConfirmDialog.vue

@@ -113,7 +113,7 @@ const onCancel = async () => {
 		}
 
 		.confirm {
-			width: 60px;
+			width: 68px;
 			text-align: center;
 			margin-top: 40px;
 			padding: 8px 12px;
@@ -128,10 +128,10 @@ const onCancel = async () => {
 		}
 
 		.cancel {
-			width: 60px;
+			width: 68px;
 			text-align: center;
 			margin-top: 40px;
-			padding: 8px 12px;
+			padding: 8px 0;
 			border-radius: 8px;
 			font-size: 12px;
 			line-height: 16px;

packages/frontend/src/i18n/zh-CN/index.ts

@@ -17,7 +17,7 @@ export default {
 	file_no_data: '无匹配结果',
 	use_search: '使用 "{content}" 搜索...',
 	app: {
-		Files: '文件管理',
+		Files: '文件管理器',
 		Market: '应用市场',
 		Dashboard: '仪表盘',
 		Settings: '设置',

packages/frontend/src/pages/LaunchPad.vue

@@ -83,7 +83,6 @@
 										appStore.desktopApps[element].icon,
 										appStore.desktopApps[element].title,
 										element,
-										indexList,
 										$event
 									)
 								"
@@ -94,6 +93,10 @@
 								:style="`
 										width:${appStore.DESKTOP_APP_SIZE}px;
 										height:${appStore.DESKTOP_APP_SIZE}px;
+										border-radius: ${borderRadiusFormat(
+											appStore.DESKTOP_APP_SIZE,
+											appStore.DESKTOP_APP_SIZE
+										)}px;
 										`"
 								v-if="
 									[
@@ -110,16 +113,22 @@
 								</svg>
 							</div>
 							<img
+								:key="appStore.desktopApps[element].title"
 								:src="appStore.desktopApps[element].icon"
 								:style="`width:${appStore.DESKTOP_APP_SIZE}px;height:${
 									appStore.DESKTOP_APP_SIZE
 								}px;border-radius: ${borderRadiusFormat(
 									appStore.DESKTOP_APP_SIZE,
 									appStore.DESKTOP_APP_SIZE
-								)}px;`"
+								)}px;${
+									appStore.desktopApps[element].state == 'suspend' ||
+									appStore.desktopApps[element].state == 'crash'
+										? 'filter: grayscale(100%) brightness(0.8)'
+										: 'filter: grayscale(0%)'
+								}`"
 							/>
 							<div
-								class="launch_pad_apps_name row items-center justify-center"
+								class="launch_pad_apps_name"
 								:data-index="appStore.desktopApps[element].id"
 							>
 								<span
@@ -323,7 +332,6 @@ function deleteLaunch(
 	icon: string,
 	launchTitle: string,
 	index: number,
-	indexList: number,
 	e: any
 ) {
 	console.log('deleteLaunch e', e);
@@ -340,15 +348,10 @@ function deleteLaunch(
 		}
 	}).onOk(async () => {
 		e.target.parentNode.classList.add('uninstallAni');
+		const fatherName = appStore.desktopApps[index].fatherName;
 
 		setTimeout(async () => {
-			const fatherName = appStore.desktopApps[index].fatherName;
-			let categoryLaunchPadApps = appStore.launchPadApps[indexList];
-			appStore.launchPadApps[indexList] = categoryLaunchPadApps.filter(
-				(item, itemIndex) => itemIndex !== index
-			);
 			await appStore.uninstall_application(fatherName);
-			await appStore.get_my_apps_info();
 			e.target.parentNode.classList.remove('uninstallAni');
 		}, 500);
 	});
@@ -670,7 +673,6 @@ const goto = (value: number) => {
 		background-position: center;
 		background-size: 100% 100%;
 		background-repeat: no-repeat;
-		border-radius: 16px;
 		display: flex;
 		align-items: center;
 		justify-content: center;

packages/frontend/src/pages/mobile/BasicWindow.vue

@@ -25,7 +25,7 @@
 		ref="dragRef"
 	> -->
 	<div
-		class="iframe-box-mobile"
+		class="iframe-box-mobile bg-background-1"
 		:class="isFull ? 'animationClass-mobile' : ''"
 		:style="{
 			width: `${value.width}px`,
@@ -346,7 +346,6 @@ export default defineComponent({
 .iframe-box-mobile {
 	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;
 

packages/frontend/src/stores/app.ts

@@ -508,11 +508,13 @@ export const useAppStore = defineStore('app', {
 			if (!app_name) {
 				return;
 			}
+
+			this.myApps = this.myApps.filter((item) => item.fatherName !== app_name);
+			this.relocate_application_place(this.myApps);
 			const data: any = await axios.get(
 				tokenStore.url + '/server/uninstall/' + app_name,
 				{}
 			);
-			console.log(data);
 		}
 	}
 });