Merge pull request #49 from beclab/feat/app-service

feat: Update desktop application status and interaction

package.json

@@ -19,7 +19,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@bytetrade/core": "0.3.60",
+    "@bytetrade/core": "0.3.66",
     "axios": "^0.21.1",
     "uuid": "9.0.1"
   },

packages/frontend/src/components/ConfirmDialog.vue

@@ -0,0 +1,147 @@
+<template>
+	<q-dialog class="card-dialog" v-model="show" ref="dialogRef" @hide="onCancel">
+		<q-card class="card-continer" flat>
+			<div class="dialog-header row items-center justify-between">
+				<div class="text-ink-1">
+					{{ title }}
+				</div>
+				<q-space />
+				<q-btn
+					dense
+					flat
+					icon="close"
+					size="sm"
+					color="ink-3"
+					@click="onCancel"
+				>
+					<q-tooltip>{{ t('buttons.close') }}</q-tooltip>
+				</q-btn>
+			</div>
+
+			<div class="dialog-desc left row item-center justify-start">
+				<img class="img q-mr-md" :src="icon" v-if="icon" />
+				<div class="message text-grey-8">
+					{{ message }}
+				</div>
+			</div>
+
+			<span class="confirm bg-blue-default text-white" @click="submit">{{
+				t('buttons.confirm')
+			}}</span>
+
+			<span
+				class="cancel text-ink-2 q-mr-md"
+				v-if="showCancel"
+				@click="onCancel"
+				>{{ t('buttons.cancel') }}</span
+			>
+		</q-card>
+	</q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+import { ref } from 'vue';
+
+defineProps({
+	title: {
+		type: String,
+		default: 'Confirmation',
+		required: false
+	},
+	message: {
+		type: String,
+		default: 'This is a message',
+		required: false
+	},
+	icon: {
+		type: String,
+		default: '',
+		required: false
+	},
+	showCancel: {
+		type: Boolean,
+		default: false,
+		required: false
+	}
+});
+
+const { t } = useI18n();
+const { dialogRef, onDialogCancel, onDialogOK } = useDialogPluginComponent();
+
+const show = ref(true);
+
+const submit = async () => {
+	onDialogOK();
+};
+
+const onCancel = async () => {
+	onDialogCancel();
+};
+</script>
+
+<style lang="scss" scoped>
+.card-dialog {
+	.card-continer {
+		width: 400px;
+		border-radius: 12px;
+		padding: 20px;
+
+		.dialog-header {
+			width: 100%;
+			height: 36px;
+			line-height: 36px;
+			font-size: 16px;
+			font-weight: 500;
+			line-height: 24px;
+			text-align: left;
+			margin-bottom: 12px;
+		}
+
+		.dialog-desc {
+			.img {
+				width: 32px;
+				height: 32px;
+				border-radius: 8px;
+			}
+			.message {
+				max-width: 310px;
+				font-size: 12px;
+				line-height: 16px;
+			}
+		}
+
+		.confirm {
+			width: 60px;
+			text-align: center;
+			margin-top: 40px;
+			padding: 8px 12px;
+			border-radius: 8px;
+			font-size: 12px;
+			line-height: 16px;
+			float: right;
+			cursor: pointer;
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+
+		.cancel {
+			width: 60px;
+			text-align: center;
+			margin-top: 40px;
+			padding: 8px 12px;
+			border-radius: 8px;
+			font-size: 12px;
+			line-height: 16px;
+			float: right;
+			cursor: pointer;
+			border: 1px solid $btn-stroke;
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+	}
+}
+</style>

packages/frontend/src/i18n/en-US/index.ts

@@ -22,5 +22,18 @@ export default {
 		Dashboard: 'Dashboard',
 		Settings: 'Settings',
 		'Control Hub': 'Control Hub'
+	},
+	buttons: {
+		close: 'Close',
+		confirm: 'Confirm',
+		cancel: 'Cancel'
+	},
+	confirmation: 'Confirmation',
+	delete: 'Delete',
+	mseeage: {
+		suspended:
+			'This application has been suspended. You can resume it on the Application page in Settings.',
+		crashed: 'The application has crashed. Please wait while it restarts.',
+		delete_app: 'Are you sure you want to delete the application "{appName}"?'
 	}
 };

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

@@ -22,5 +22,17 @@ export default {
 		Dashboard: '仪表盘',
 		Settings: '设置',
 		'Control Hub': '控制面板'
+	},
+	buttons: {
+		close: '关闭',
+		confirm: '确定',
+		cancel: '取消'
+	},
+	confirmation: '确认',
+	delete: '删除',
+	mseeage: {
+		suspended: '此应用程序已暂停。您可以在“设置”中的“应用”恢复它。',
+		crashed: '应用程序已崩溃。正在重新启动，请稍候。',
+		delete_app: '您确定要删除 "{appName}" 这个应用吗？'
 	}
 };

packages/frontend/src/layouts/MainLayout.vue

@@ -46,6 +46,12 @@ bus.on('close', () => {
 });
 
 bus.on('app_installation_event', () => {
+	console.log('into app_installation_event');
+	appStore.update_my_apps_info();
+});
+
+bus.on('entrance_state_event', () => {
+	console.log('into entrance_state_event');
 	appStore.update_my_apps_info();
 });
 
@@ -146,6 +152,7 @@ bus.on('ai_message', (cdata: any) => {
 onUnmounted(() => {
 	bus.off('close');
 	bus.off('app_installation_event');
+	bus.off('entrance_state_event');
 	bus.off('system_upgrade_event');
 	bus.off('ai');
 	bus.off('ai_message');