Merge pull request #34 from beclab/feat/i18n

feat: app support i18n

.gitignore

@@ -15,6 +15,7 @@
 # vendor/
 
 .vscode/
+.idea/
 .DS_Store
 data
 output

frontend/src/App.vue

@@ -4,20 +4,22 @@
 
 <script lang="ts">
 import { useAppStore } from 'src/stores/app';
-import { onBeforeUnmount, onMounted } from 'vue';
+import { onBeforeMount, onBeforeUnmount } from 'vue';
 import { useSocketStore } from 'src/stores/websocketStore';
 import { BtNotify, NotifyDefinedType } from '@bytetrade/ui';
 import { bus, BUS_EVENT } from 'src/utils/bus';
 import { useUserStore } from 'src/stores/user';
 import { i18n } from 'src/boot/i18n';
 import { supportLanguages } from 'src/i18n';
+import { useMenuStore } from 'src/stores/menu';
 // import { testSatisfies } from 'src/utils/version';
 
 export default {
 	setup() {
 		const appStore = useAppStore();
 		const websocketStore = useSocketStore();
 		const userStore = useUserStore();
+		const menuStore = useMenuStore();
 
 		let terminusLanguage = '';
 		let terminusLanguageInfo: any = document.querySelector(
@@ -37,8 +39,8 @@ export default {
 			}
 		}
 
-		onMounted(async () => {
-			await appStore.prefetch();
+		onBeforeMount(async () => {
+			await menuStore.init();
 			if (!appStore.isPublic) {
 				// testSatisfies();
 				websocketStore.start();

frontend/src/api/language.ts

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import globalConfig from 'src/api/config';
+import { MenuData } from 'src/constants/constants';
+
+export async function getMenuData(): Promise<MenuData | null> {
+	try {
+		const { data }: any = await axios.get(
+			globalConfig.url + '/app-store/v1/applications/menutypes'
+		);
+		console.log('getMenuData');
+		console.log(data);
+		return data ? data : null;
+	} catch (e) {
+		console.log(e);
+		return null;
+	}
+}
+
+export async function getAppMultiLanguage() {
+	try {
+		const { data }: any = await axios.get(
+			globalConfig.url + '/app-store/v1/applications/i18ns'
+		);
+		console.log('getAppMultiLanguage');
+		console.log(data);
+		return data ? data : [];
+	} catch (e) {
+		console.log(e);
+		return [];
+	}
+}

frontend/src/api/storeApi.ts

@@ -108,7 +108,6 @@ export async function getTop(category?: string): Promise<AppStoreInfo[]> {
 		return [];
 	}
 }
-
 export async function getLatest(category?: string): Promise<AppStoreInfo[]> {
 	try {
 		let url = '/app-store/v1/applications/latest';

frontend/src/components/appcard/AppCard.vue

@@ -128,7 +128,9 @@
 
 		<div class="application_right column justify-center items-start">
 			<div class="application_title_layout row justify-start items-baseline">
-				<div class="application_title text-ink-1">{{ item.title }}</div>
+				<div class="application_title text-ink-1">
+					{{ getAppFieldI18n(item, APP_FIELD.TITLE) }}
+				</div>
 				<div v-if="version" class="application_version">
 					{{ item.versionName }}
 				</div>
@@ -142,7 +144,7 @@
 						: 'application_content'
 				"
 			>
-				{{ item.desc }}
+				{{ getAppFieldI18n(item, APP_FIELD.DESCRIPTION) }}
 			</div>
 			<span
 				v-if="!appStore.isPublic"
@@ -175,7 +177,12 @@
 
 <script lang="ts" setup>
 import { onMounted, PropType, ref } from 'vue';
-import { AppStoreInfo, TRANSACTION_PAGE } from 'src/constants/constants';
+import {
+	AppStoreInfo,
+	getAppFieldI18n,
+	APP_FIELD,
+	TRANSACTION_PAGE
+} from 'src/constants/constants';
 import InstallButton from 'components/appcard/InstallButton.vue';
 import { useRouter } from 'vue-router';
 import { useAppStore } from 'src/stores/app';

frontend/src/components/appcard/AppSmallCard.vue

@@ -34,10 +34,10 @@
 				<div
 					class="app-small-card__right__text__title text-subtitle2 text-ink-1"
 				>
-					{{ item.title }}
+					{{ getAppFieldI18n(item, APP_FIELD.TITLE) }}
 				</div>
 				<div class="app-small-card__right__text__content text-body3 text-ink-2">
-					{{ item.desc }}
+					{{ getAppFieldI18n(item, APP_FIELD.DESCRIPTION) }}
 				</div>
 			</div>
 			<install-button v-if="!appStore.isPublic" :item="item" />
@@ -53,7 +53,12 @@
 
 <script lang="ts" setup>
 import { onMounted, PropType, ref } from 'vue';
-import { AppStoreInfo, TRANSACTION_PAGE } from 'src/constants/constants';
+import {
+	APP_FIELD,
+	AppStoreInfo,
+	getAppFieldI18n,
+	TRANSACTION_PAGE
+} from 'src/constants/constants';
 import InstallButton from 'src/components/appcard/InstallButton.vue';
 import { useRouter } from 'vue-router';
 import { useAppStore } from 'src/stores/app';

frontend/src/components/appcard/MyAppCard.vue

@@ -39,7 +39,7 @@
 		<div class="my-application-info column justify-start items-start">
 			<div class="my-application-title-layout row justify-start items-center">
 				<div class="my-application-title text-h6 text-ink-1">
-					{{ item.title }}
+					{{ getAppFieldI18n(item, APP_FIELD.TITLE) }}
 				</div>
 				<div
 					v-if="version"
@@ -50,7 +50,7 @@
 			</div>
 
 			<div class="my-application-content text-body3 text-ink-3">
-				{{ item.desc }}
+				{{ getAppFieldI18n(item, APP_FIELD.DESCRIPTION) }}
 			</div>
 
 			<div
@@ -136,7 +136,9 @@
 <script lang="ts" setup>
 import { onMounted, PropType, ref } from 'vue';
 import {
+	APP_FIELD,
 	AppStoreInfo,
+	getAppFieldI18n,
 	SOURCE_TYPE,
 	TRANSACTION_PAGE
 } from 'src/constants/constants';

frontend/src/components/appintro/AppTitleBar.vue

@@ -19,7 +19,7 @@
 					</template>
 				</q-img>
 				<div class="q-ml-md text-h5 text-ink-1">
-					{{ item.title }}
+					{{ getAppFieldI18n(item, APP_FIELD.TITLE) }}
 				</div>
 				<div class="q-ml-sm text-h6 text-ink-1">{{ item.versionName }}</div>
 			</div>
@@ -37,7 +37,11 @@
 <script lang="ts" setup>
 import InstallButton from 'components/appcard/InstallButton.vue';
 import { PropType } from 'vue';
-import { AppStoreInfo } from 'src/constants/constants';
+import {
+	APP_FIELD,
+	AppStoreInfo,
+	getAppFieldI18n
+} from 'src/constants/constants';
 import { useRouter } from 'vue-router';
 import { useAppStore } from 'src/stores/app';
 

frontend/src/components/topic/AppStoreRecItem.vue

@@ -7,9 +7,11 @@
 			<img :src="item ? item.icon : ''" class="application_top_logo" />
 		</div>
 		<div class="modal_application_text">
-			<p class="modal_application_title">{{ item ? item.title : '' }}</p>
+			<p class="modal_application_title">
+				{{ item ? getAppFieldI18n(item, APP_FIELD.TITLE) : '' }}
+			</p>
 			<p class="modal_application_content">
-				{{ item ? item.desc : '' }}
+				{{ item ? getAppFieldI18n(item, APP_FIELD.DESCRIPTION) : '' }}
 			</p>
 		</div>
 		<div class="modal_application_install">
@@ -46,7 +48,11 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { useAppStore } from 'src/stores/app';
-import { AppStoreInfo } from 'src/constants/constants';
+import {
+	APP_FIELD,
+	AppStoreInfo,
+	getAppFieldI18n
+} from 'src/constants/constants';
 
 defineProps({
 	item: {

frontend/src/constants/constants.ts

@@ -1,4 +1,5 @@
 import { CFG_TYPE } from 'src/constants/config';
+import { i18n } from 'src/boot/i18n';
 
 export interface AppStoreInfo {
 	id: string;
@@ -207,6 +208,17 @@ export enum ROLE_TYPE {
 	Admin = 'platform-admin'
 }
 
+export interface MenuType {
+	label: string;
+	key: string;
+	icon: string;
+}
+
+export interface MenuData {
+	menuTypes: MenuType[];
+	i18n: any;
+}
+
 export enum TRANSACTION_PAGE {
 	App = 'App',
 	List = 'List',
@@ -321,3 +333,67 @@ export enum PERMISSION_SYSDATA_GROUP {
 	secret_infisical = 'secret.infisical',
 	secret_vault = 'secret.vault'
 }
+
+export enum APP_FIELD {
+	TITLE = 'title',
+	ENTRANCES_TITLE = 'entrances?_title',
+	ENTRANCES_NAME = 'entrances?_name',
+	DESCRIPTION = 'description',
+	FULL_DESCRIPTION = 'fullDescription',
+	UPGRADE_DESCRIPTION = 'upgradeDescription'
+}
+
+export function getAppFieldI18n(
+	app: AppStoreInfo,
+	field: APP_FIELD,
+	index = -1
+) {
+	let key = '';
+	switch (field) {
+		case APP_FIELD.DESCRIPTION:
+		case APP_FIELD.TITLE:
+		case APP_FIELD.FULL_DESCRIPTION:
+		case APP_FIELD.UPGRADE_DESCRIPTION:
+			key = app.name + '_' + field;
+			break;
+		case APP_FIELD.ENTRANCES_NAME:
+		case APP_FIELD.ENTRANCES_TITLE:
+			if (index !== -1) {
+				key =
+					app.name +
+					'_' +
+					APP_FIELD.ENTRANCES_NAME.replace('?', index.toString());
+			}
+			break;
+	}
+	if (key) {
+		const exist = i18n.global.te(key);
+		// console.log(key, exist);
+		if (exist) {
+			return i18n.global.t(key);
+		}
+	}
+
+	switch (field) {
+		case APP_FIELD.DESCRIPTION:
+			return app.desc;
+		case APP_FIELD.TITLE:
+		case APP_FIELD.FULL_DESCRIPTION:
+		case APP_FIELD.UPGRADE_DESCRIPTION:
+			return app[field];
+		case APP_FIELD.ENTRANCES_NAME:
+			if (index !== -1) {
+				const array1 = app.entrances;
+				return array1[index].name;
+			} else {
+				return '';
+			}
+		case APP_FIELD.ENTRANCES_TITLE:
+			if (index !== -1) {
+				const array2 = app.entrances;
+				return array2[index].title;
+			} else {
+				return '';
+			}
+	}
+}