feat: update frontend i18n interface

icebergtsn · icebergtsn · commit 7be29bbb0417 · 2024-09-24T18:07:06.000+08:00
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -11,13 +11,15 @@ 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(
@@ -39,6 +41,7 @@ export default {
 
 		onMounted(async () => {
 			await appStore.prefetch();
+			await menuStore.init();
 			if (!appStore.isPublic) {
 				// testSatisfies();
 				websocketStore.start();
diff --git a/frontend/src/api/language.ts b/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 [];
+	}
+}
diff --git a/frontend/src/components/appcard/AppCard.vue b/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';
diff --git a/frontend/src/components/appcard/AppSmallCard.vue b/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';
diff --git a/frontend/src/components/appcard/MyAppCard.vue b/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';
diff --git a/frontend/src/components/appintro/AppTitleBar.vue b/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';
 
diff --git a/frontend/src/components/topic/AppStoreRecItem.vue b/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: {
diff --git a/frontend/src/constants/constants.ts b/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 '';
+			}
+	}
+}
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
@@ -104,7 +104,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { useMenuStore } from 'src/stores/menu';
 import { MENU_TYPE, TRANSACTION_PAGE } from '../constants/constants';
@@ -113,54 +113,6 @@ import { useAppStore } from 'src/stores/app';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const itemsRef = ref([
-	{
-		label: t('base.extensions'),
-		key: 'Application',
-		children: [
-			{
-				label: t('main.discover'),
-				key: MENU_TYPE.Application.Home,
-				icon: 'sym_r_radar'
-			},
-			{
-				label: t('main.productivity'),
-				key: MENU_TYPE.Application.Productivity,
-				icon: 'sym_r_business_center'
-			},
-			{
-				label: t('main.utilities'),
-				key: MENU_TYPE.Application.Utilities,
-				icon: 'sym_r_extension'
-			},
-			{
-				label: t('main.entertainment'),
-				key: MENU_TYPE.Application.Entertainment,
-				icon: 'sym_r_interests'
-			},
-			{
-				label: t('main.social_network'),
-				key: MENU_TYPE.Application.SocialNetwork,
-				icon: 'sym_r_group'
-			},
-			{
-				label: t('main.blockchain'),
-				key: MENU_TYPE.Application.Blockchain,
-				icon: 'sym_r_stack'
-			},
-			{
-				label: t('main.recommendation'),
-				key: MENU_TYPE.Application.Recommendation,
-				icon: 'sym_r_featured_play_list'
-			}
-			// {
-			// 	label: t('main.models'),
-			// 	key: MENU_TYPE.Application.Models,
-			// 	icon: 'sym_r_neurology'
-			// }
-		]
-	}
-]);
 const leftDrawerOpen = ref(false);
 const menuStore = useMenuStore();
 const Router = useRouter();
@@ -174,6 +126,19 @@ const appStore = useAppStore();
 const updateCount = ref(0);
 const showBarShadow = ref(false);
 
+const itemsRef = computed(() => {
+	if (menuStore.menuList.length === 0) {
+		return [];
+	}
+	return [
+		{
+			label: t('base.extensions'),
+			key: 'Application',
+			children: menuStore.menuList
+		}
+	];
+});
+
 const changeItemMenu = (data: any): void => {
 	const type = data.key;
 	menuStore.changeItemMenu(type);
diff --git a/frontend/src/pages/application/AppDetailPage.vue b/frontend/src/pages/application/AppDetailPage.vue
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
diff --git a/frontend/src/stores/menu.ts b/frontend/src/stores/menu.ts
