feat(i18n): enhance internationalization support by adding mobile titles and computed labels

locales/en/dynamic.json

@@ -9,7 +9,8 @@
   "page": {
     "detail": {
       "title": "Feed detail"
-    }
+    },
+    "mobile_title": "Community"
   },
   "list": {
     "empty": "No feeds yet, share your first moment!",
@@ -48,7 +49,13 @@
       "select_users": "Select users",
       "confirm": "Confirm",
       "confirm_with_count": "Confirm ({count})"
-    }
+    },
+    "comments": {
+      "more": "{count} more comments"
+    },
+    "loading": "loading...",
+    "load_more": "Load more",
+    "loaded_all": "Loaded all feeds"
   },
   "detail": {
     "content": {

locales/zh-CN/dynamic.json

@@ -9,7 +9,8 @@
   "page": {
     "detail": {
       "title": "动态详情"
-    }
+    },
+    "mobile_title": "社区"
   },
   "list": {
     "empty": "暂无动态，快去发布第一条吧！",

src/mobile/views/community/index.vue

@@ -31,7 +31,9 @@
             </template>
           </n-button>
         </div>
-        <div class="flex-1 flex justify-center pt-12px text-16px font-600 text-#303030">我的社区</div>
+        <div class="flex-1 flex justify-center pt-12px text-16px font-600 text-#303030">
+          {{ t('dynamic.page.mobile_title') }}
+        </div>
         <div class="pr-24px opacity-0 pointer-events-none">
           <svg class="w-24px h-24px" viewBox="0 0 24 24" fill="none"></svg>
         </div>
@@ -115,7 +117,9 @@ import DynamicList from '@/components/common/DynamicList.vue'
 import FeedNotificationPopup from '@/components/common/FeedNotificationPopup.vue'
 import { useMitt } from '@/hooks/useMitt'
 import { WsResponseMessageType } from '@/services/wsType'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const router = useRouter()
 const feedStore = useFeedStore()
 const userStore = useUserStore()

src/mobile/views/my/MobileSettings.vue

@@ -66,7 +66,7 @@ const userStore = useUserStore()
 const settings = reactive([
   {
     key: 'notifications',
-    label: t('mobile_setting.silent_label'),
+    label: computed(() => t('mobile_setting.silent_label')),
     type: 'switch',
     value: computed({
       get: () => true,
@@ -77,7 +77,7 @@ const settings = reactive([
   },
   {
     key: 'username',
-    label: t('mobile_setting.nickname'),
+    label: computed(() => t('mobile_setting.nickname')),
     type: 'input',
     value: computed({
       get: () => userStore.userInfo?.name || '',
@@ -86,20 +86,20 @@ const settings = reactive([
   },
   {
     key: 'theme',
-    label: t('mobile_setting.theme'),
+    label: computed(() => t('mobile_setting.theme')),
     type: 'select',
     value: computed({
       get: () => settingStore.themes.content,
       set: (val) => settingStore.toggleTheme(val)
     }),
     options: [
-      { label: t('mobile_setting.themes.light'), value: ThemeEnum.LIGHT },
-      { label: t('mobile_setting.themes.dark'), value: ThemeEnum.DARK }
+      { label: computed(() => t('mobile_setting.themes.light')), value: ThemeEnum.LIGHT },
+      { label: computed(() => t('mobile_setting.themes.dark')), value: ThemeEnum.DARK }
     ]
   },
   {
     key: 'language',
-    label: t('mobile_setting.language'),
+    label: computed(() => t('mobile_setting.language')),
     type: 'select',
     value: computed({
       get: () => settingStore.page.lang,