Merge pull request #40 from beclab/fix/i18n

feat: update title i18n info

frontend/package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@quasar/app-webpack": "^3.0.0",
     "@types/node": "^12.20.21",
+		"@types/he": "^1.2.3",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
     "autoprefixer": "^10.4.2",

frontend/src/boot/i18n.ts

@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import { createI18n } from 'vue-i18n';
-
+import { get } from 'lodash';
 import messages, { defaultLanguage } from 'src/i18n';
 
 export type MessageLanguages = keyof typeof messages;
@@ -24,7 +24,11 @@ declare module 'vue-i18n' {
 export const i18n = createI18n({
 	locale: defaultLanguage,
 	legacy: false,
-	messages
+	messages,
+	//https://github.com/intlify/vue-i18n/issues/118
+	//https://github.com/intlify/vue-i18n/issues/531#issuecomment-1589250658
+	messageResolver: (obj, path) =>
+		get(obj, path, '')?.replaceAll(/@/g, "{'@'}") || null
 });
 
 export default boot(({ app }) => {

frontend/src/components/appcard/MyAppCard.vue

@@ -72,15 +72,15 @@
 					<app-tag
 						:label="
 							item.categories && item.categories.length > 0
-								? item.categories[0]
+								? getTempI18nValue(item.categories[0], true)
 								: item.subCategory
 						"
 						class="text-positive"
 					/>
 					<app-tag
 						:label="
-							item.language && item.language.length > 0
-								? convertLanguageCodeToName(item.language[0])
+							item.locale && item.locale.length > 0
+								? convertLanguageCodeToName(item.locale[0])
 								: ''
 						"
 						class="second-tag q-ml-sm"
@@ -93,7 +93,7 @@
 					<app-tag
 						:label="
 							item.categories && item.categories.length > 0
-								? item.categories[0]
+								? getTempI18nValue(item.categories[0], true)
 								: item.subCategory
 						"
 						class="text-positive"
@@ -122,7 +122,7 @@
 					<app-tag
 						:label="
 							item.categories && item.categories.length > 0
-								? item.categories[0]
+								? getTempI18nValue(item.categories[0], true)
 								: item.subCategory
 						"
 						class="second-tag text-positive q-ml-sm"
@@ -140,7 +140,8 @@ import {
 	AppStoreInfo,
 	getAppFieldI18n,
 	SOURCE_TYPE,
-	TRANSACTION_PAGE
+	TRANSACTION_PAGE,
+	getTempI18nValue
 } from 'src/constants/constants';
 import InstallButton from 'src/components/appcard/InstallButton.vue';
 import { useRouter } from 'vue-router';

frontend/src/components/topic/TopicView.vue

@@ -1,17 +1,13 @@
 <template>
-	<div
-		v-if="skeleton"
-		class="column justify-start items-start"
-		style="cursor: pointer"
-	>
+	<div v-if="skeleton" class="column justify-start items-start">
 		<div class="topic-skeleton-square">
 			<q-skeleton class="topic-skeleton-item" />
 		</div>
 		<q-skeleton width="100px" height="12px" style="margin-top: 12px" />
 		<q-skeleton width="200px" height="22px" style="margin-top: 2px" />
 		<q-skeleton width="180px" height="18px" style="margin-top: 2px" />
 	</div>
-	<div v-else class="column justify-start items-start cursor-pointer">
+	<div v-else class="column justify-start items-start">
 		<q-img
 			class="topic-item-img"
 			:src="item.iconimg ? item.iconimg : '../appIntro.svg'"
@@ -23,18 +19,20 @@
 			</template>
 		</q-img>
 		<span class="topic-item-overflow text-ink-3 text-caption q-mt-md">{{
-			item.des
+			getTempI18nValue(item.des)
+		}}</span>
+		<span class="topic-item-overflow text-ink-1 text-h6">{{
+			getTempI18nValue(item.name)
 		}}</span>
-		<span class="topic-item-overflow text-ink-1 text-h6">{{ item.name }}</span>
 		<span class="topic-item-overflow text-ink-3 text-body2">{{
-			item.introduction
+			getTempI18nValue(item.introduction)
 		}}</span>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue';
-import { TopicInfo } from 'src/constants/constants';
+import { getTempI18nValue, TopicInfo } from 'src/constants/constants';
 
 defineProps({
 	item: {

frontend/src/constants/constants.ts

@@ -74,7 +74,7 @@ export interface AppStoreInfo {
 	installTime: string;
 	uid: string;
 	status: APP_STATUS;
-	language: string[];
+	locale: string[];
 	submitter: string;
 	doc: string;
 	website: string;
@@ -404,3 +404,30 @@ export function getAppFieldI18n(
 		return defaultConfig();
 	}
 }
+
+export function getTempI18nValue(input, camelCase = false) {
+	try {
+		let key = input.toLowerCase();
+		if (camelCase) {
+			key = key.replace(/(?:\s+)([a-z])/g, (match, letter) =>
+				letter.toUpperCase()
+			);
+			key = key.replace(/[^a-zA-Z0-9_]/g, '');
+		} else {
+			key = key.replace(/\s+/g, '_');
+			key = key.replace(/[^a-z0-9_]/g, '');
+		}
+
+		if (key) {
+			const exist = i18n.global.te(key);
+			if (exist) {
+				return i18n.global.t(key);
+			}
+		}
+		return input;
+	} catch (e) {
+		console.log(`${input} i18n get error`);
+		console.log(e);
+		return input;
+	}
+}

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

@@ -198,5 +198,34 @@ export default {
 		sure_to_uninstall_the_app: "Are you sure to uninstall '{title}'？",
 		upload_custom_chart: 'Upload custom chart',
 		logs: 'Logs'
-	}
+	},
+
+	//temp
+	discover_amazing_apps: 'Discover amazing apps',
+	featured_app: 'FEATURED APP',
+	control_your_own_social_network: 'Control your own social network.',
+	decentralized_social_media: 'Decentralized social media',
+	get_started: 'GET STARTED',
+	booster_your_software_development_productivity:
+		'Boost your software development productivity.',
+	enjoy_coding_on_terminus: 'Enjoy coding on Terminus',
+	diving_into_ai_image_generation: 'Dive into AI image generation.',
+	unleashing_your_creativity: 'Unleash your creativity!',
+	great_on_terminus: 'GREAT ON TERMINUS',
+	mastering_your_photo_with_a_personal_library:
+		'Master your photos with a personal library.',
+	organize_your_memories: 'Organize your memories',
+	nocode_solution_for_your_data_management:
+		'No-code solution for your data management.',
+	build_databases_as_spreadsheets: 'Build databases as spreadsheets',
+	top_app_in: 'Top apps in {category}',
+	latest_app_in: 'Latest apps in {category}',
+	communitys_choices: 'Community choices',
+	top_app_on_terminus: 'Top apps on Terminus',
+	latest_app_on_terminus: 'Latest apps on Terminus',
+	featured_apps_in_discover: 'Featured apps in Discover',
+	featured_apps_in_productivity: 'Featured apps in Productivity',
+	featured_apps_in_utilities: 'Featured apps in Utilities',
+	featured_apps_in_entertainment: 'Featured apps in Entertainment',
+	featured_apps_in_social_network: 'Featured apps in Social Network'
 };

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

@@ -179,5 +179,30 @@ export default {
 		sure_to_uninstall_the_app: '您确定要卸载“{title}”吗？',
 		upload_custom_chart: '上传自定义 chart',
 		logs: '日志'
-	}
+	},
+	//temp
+	discover_amazing_apps: '发现精彩应用',
+	featured_app: '精选应用',
+	control_your_own_social_network: '掌控自己的社交网络。',
+	decentralized_social_media: '去中心化社交媒体',
+	get_started: '开始',
+	booster_your_software_development_productivity: '提升软件开发效率。',
+	enjoy_coding_on_terminus: '在 Terminus 上享受编码',
+	diving_into_ai_image_generation: '探索 AI 图像生成。',
+	unleashing_your_creativity: '释放你的创造力！',
+	great_on_terminus: '在 Terminus 上表现出色',
+	mastering_your_photo_with_a_personal_library: '打造个人图库，掌控您的照片',
+	organize_your_memories: '整理您的回忆',
+	nocode_solution_for_your_data_management: '无代码数据管理方案。',
+	build_databases_as_spreadsheets: '轻松构建数据库',
+	top_app_in: '{category}最受欢迎应用',
+	latest_app_in: '{category}最新应用',
+	communitys_choices: '社区推荐',
+	top_app_on_terminus: 'Terminus 最受欢迎应用',
+	latest_app_on_terminus: 'Terminus 最新应用',
+	featured_apps_in_discover: '发现精选应用',
+	featured_apps_in_productivity: '效率精选应用',
+	featured_apps_in_utilities: '实用工具精选应用',
+	featured_apps_in_entertainment: '娱乐精选应用',
+	featured_apps_in_social_network: '社交网络精选应用'
 };

frontend/src/pages/application/AppDetailPage.vue

@@ -105,8 +105,8 @@
 								:name="t('base.language')"
 								:data="language.toUpperCase()"
 								:unit="
-									languageLength > 0
-										? `+ ${languageLength} more`
+									item && item.locale.length > 0
+										? `+ ${item.locale.length - 1} more`
 										: convertLanguageCodeToName(language)
 								"
 							/>
@@ -454,7 +454,11 @@
 											class="q-mt-lg"
 											:title="t('base.category')"
 											separator=" · "
-											:content-array="item.categories"
+											:content-array="
+												item.categories.map((category) => {
+													return getTempI18nValue(category, true);
+												})
+											"
 										/>
 										<app-intro-item
 											class="q-mt-lg"
@@ -470,8 +474,8 @@
 											class="q-mt-lg"
 											:title="t('base.language')"
 											:content-array="
-												item.language
-													? convertLanguageCodesToNames(item.language)
+												item.locale
+													? convertLanguageCodesToNames(item.locale)
 													: ''
 											"
 										/>
@@ -628,6 +632,7 @@ import {
 	CLIENT_TYPE,
 	DEPENDENCIES_TYPE,
 	getAppFieldI18n,
+	getTempI18nValue,
 	PERMISSION_SYSDATA_GROUP,
 	PermissionNode,
 	TRANSACTION_PAGE
@@ -711,7 +716,6 @@ const compatible = ref<string>('');
 const entrancePermissionData = ref<PermissionNode[]>([]);
 const filePermissionData = ref<PermissionNode[]>([]);
 const language = ref('en');
-const languageLength = ref(0);
 const cfgType = ref<string>();
 const readMeHtml = ref('');
 
@@ -1012,13 +1016,10 @@ const appScopeTask: OnUpdateUITask = {
 const languageTask: OnUpdateUITask = {
 	onInit() {
 		language.value = 'en';
-		languageLength.value = 0;
 	},
 	onUpdate(app: AppStoreInfo) {
-		if (app.language) {
-			language.value = app.language[0];
-			languageLength.value =
-				app.language.length > 0 ? 0 : app.language.length - 1;
+		if (app.locale) {
+			language.value = app.locale[0];
 		}
 	}
 };