feat: add titles for settings

composables/setups.ts

@@ -2,11 +2,10 @@ import { pwaInfo } from 'virtual:pwa-info'
 import type { Link } from '@unhead/schema'
 import type { Directions } from 'vue-i18n-routing'
 import { buildInfo } from 'virtual:build-info'
-import { APP_NAME } from '~/constants'
 import type { LocaleObject } from '#i18n'
 
 export function setupPageHeader() {
-  const i18n = useI18n()
+  const { locale, locales, t } = useI18n()
 
   const link: Link[] = []
 
@@ -30,19 +29,19 @@ export function setupPageHeader() {
     }
   }
 
-  const localeMap = (i18n.locales.value as LocaleObject[]).reduce((acc, l) => {
+  const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
     acc[l.code!] = l.dir ?? 'auto'
     return acc
   }, {} as Record<string, Directions>)
 
   useHeadFixed({
     htmlAttrs: {
-      lang: () => i18n.locale.value,
+      lang: () => locale.value,
-      dir: () => localeMap[i18n.locale.value] ?? 'auto',
+      dir: () => localeMap[locale.value] ?? 'auto',
     },
     titleTemplate: (title) => {
       let titleTemplate = title ? `${title} | ` : ''
-      titleTemplate += APP_NAME
+      titleTemplate += t('app_name')
       if (buildInfo.env !== 'release')
         titleTemplate += ` (${buildInfo.env})`
       return titleTemplate

locales/zh-CN.json

@@ -248,7 +248,7 @@
       },
       "featured_tags": {
         "description": "人们可以在这些标签下浏览你的公共嘟文。",
-        "label": "精选的话题标签"
+        "label": "精选话题标签"
       },
       "label": "个人资料"
     },

pages/settings.vue

@@ -3,6 +3,12 @@ definePageMeta({
   wideLayout: true,
 })
 
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => t('nav.settings'),
+})
+
 const route = useRoute()
 
 const isRootPath = computedEager(() => route.name === 'settings')

pages/settings/about/index.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { buildInfo } from 'virtual:build-info'
 
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
+})
+
 let showCommit = $ref(buildInfo.env !== 'release' && buildInfo.env !== 'dev')
 const builtTime = useFormattedDateTime(buildInfo.time)
 

pages/settings/interface/index.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.interface.label')} | ${t('nav.settings')}`,
+})
+</script>
+
 <template>
   <MainContent back-on-small-screen>
     <template #title>

pages/settings/language/index.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.language.label')} | ${t('nav.settings')}`,
+})
+</script>
+
 <template>
   <MainContent back-on-small-screen>
     <template #title>

pages/settings/preferences/index.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.preferences.label')} | ${t('nav.settings')}`,
+})
+</script>
+
 <template>
   <MainContent back-on-small-screen>
     <template #title>

pages/settings/profile/appearance.vue

@@ -9,6 +9,12 @@ definePageMeta({
   keepalive: false,
 })
 
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.profile.appearance.title')} | ${t('nav.settings')}`,
+})
+
 const account = $computed(() => currentUser.value?.account)
 
 const onlineSrc = $computed(() => ({

pages/settings/profile/featured-tags.vue

@@ -2,6 +2,12 @@
 definePageMeta({
   middleware: 'auth',
 })
+
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.profile.featured_tags.label')} | ${t('nav.settings')}`,
+})
 </script>
 
 <template>

pages/settings/profile/index.vue

@@ -2,6 +2,12 @@
 definePageMeta({
   middleware: 'auth',
 })
+
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.profile.label')} | ${t('nav.settings')}`,
+})
 </script>
 
 <template>

pages/settings/users/index.vue

@@ -2,6 +2,12 @@
 import { fileOpen } from 'browser-fs-access'
 import type { UserLogin } from '~/types'
 
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.users.label')} | ${t('nav.settings')}`,
+})
+
 const loggedInUsers = useUsers()
 
 async function exportTokens() {