From 377c015c91f694585e9f77f79219946c4de37a42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Wed, 4 Jan 2023 21:57:12 +0800
Subject: [PATCH] feat: add titles for settings

---
 composables/setups.ts                    | 11 +++++------
 locales/zh-CN.json                       |  2 +-
 pages/settings.vue                       |  6 ++++++
 pages/settings/about/index.vue           |  6 ++++++
 pages/settings/interface/index.vue       |  8 ++++++++
 pages/settings/language/index.vue        |  8 ++++++++
 pages/settings/preferences/index.vue     |  8 ++++++++
 pages/settings/profile/appearance.vue    |  6 ++++++
 pages/settings/profile/featured-tags.vue |  6 ++++++
 pages/settings/profile/index.vue         |  6 ++++++
 pages/settings/users/index.vue           |  6 ++++++
 11 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/composables/setups.ts b/composables/setups.ts
index 595193791c..5a9947f23d 100644
--- a/composables/setups.ts
+++ b/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,
-      dir: () => localeMap[i18n.locale.value] ?? 'auto',
+      lang: () => locale.value,
+      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
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 79d1b2c8e7..0aabb6a308 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -248,7 +248,7 @@
       },
       "featured_tags": {
         "description": "人们可以在这些标签下浏览你的公共嘟文。",
-        "label": "精选的话题标签"
+        "label": "精选话题标签"
       },
       "label": "个人资料"
     },
diff --git a/pages/settings.vue b/pages/settings.vue
index e4aa13d71f..fe8d34f0c8 100644
--- a/pages/settings.vue
+++ b/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')
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 718ee6d320..c903d06d8a 100644
--- a/pages/settings/about/index.vue
+++ b/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)
 
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index d567efe833..5939bdda2e 100644
--- a/pages/settings/interface/index.vue
+++ b/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>
diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
index 3bf4a7ad24..52112f3e5f 100644
--- a/pages/settings/language/index.vue
+++ b/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>
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 4a095090cf..f657a6402a 100644
--- a/pages/settings/preferences/index.vue
+++ b/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>
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 82442c93f2..9e85233fa5 100644
--- a/pages/settings/profile/appearance.vue
+++ b/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(() => ({
diff --git a/pages/settings/profile/featured-tags.vue b/pages/settings/profile/featured-tags.vue
index 392bb5ced1..0d6e7bdb25 100644
--- a/pages/settings/profile/featured-tags.vue
+++ b/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>
diff --git a/pages/settings/profile/index.vue b/pages/settings/profile/index.vue
index 4e51fe22c3..a546fb174c 100644
--- a/pages/settings/profile/index.vue
+++ b/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>
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index f8acbfd0ec..9eaeacf6e1 100644
--- a/pages/settings/users/index.vue
+++ b/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() {