fix: page title is not updated after language switch. fixed: #4799 #4813
Conversation
|
WalkthroughThe changes in this pull request primarily involve the addition of dynamic title management functionality across several Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
apps/web-naive/src/bootstrap.ts (1)
36-39: Consider adding error handling and type safety.The title construction logic could be more robust with these improvements:
- const routeTitle = router.currentRoute.value.meta?.title; - const pageTitle = - (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name; + const route = router.currentRoute.value; + const routeTitle = route.meta?.title; + const pageTitle = [ + routeTitle && typeof routeTitle === 'string' ? $t(routeTitle) : '', + preferences.app.name, + ].filter(Boolean).join(' - ');This refactor:
- Adds type checking for title
- Uses array join for cleaner concatenation
- Maintains the same functionality with better safety
apps/web-ele/src/bootstrap.ts (1)
34-42: Implementation looks good with room for improvement.The watchEffect implementation correctly addresses the title update issue by reactively responding to language changes. Consider these defensive programming improvements:
watchEffect(() => { - if (preferences.app.dynamicTitle) { + if (preferences?.app?.dynamicTitle) { const routeTitle = router.currentRoute.value.meta?.title; + if (routeTitle && typeof routeTitle !== 'string') { + console.warn('Route title should be a string:', routeTitle); + return; + } const pageTitle = - (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name; + (routeTitle ? `${$t(routeTitle)} - ` : '') + (preferences?.app?.name ?? ''); useTitle(pageTitle); } });apps/web-antd/src/bootstrap.ts (1)
35-43: Consider adding cleanup for the watchEffect.The implementation correctly addresses the title update issue using a reactive approach. However, consider stopping the watcher when the app is unmounted to prevent memory leaks.
// 动态更新标题 -watchEffect(() => { +const stopTitleWatch = watchEffect(() => { if (preferences.app.dynamicTitle) { const routeTitle = router.currentRoute.value.meta?.title; const pageTitle = (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name; useTitle(pageTitle); } }); + +// Add cleanup +app.unmount(() => { + stopTitleWatch(); +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
apps/web-antd/src/bootstrap.ts(2 hunks)apps/web-antd/src/router/guard.ts(0 hunks)apps/web-ele/src/bootstrap.ts(2 hunks)apps/web-ele/src/router/guard.ts(0 hunks)apps/web-naive/src/bootstrap.ts(2 hunks)apps/web-naive/src/router/guard.ts(0 hunks)playground/src/bootstrap.ts(2 hunks)playground/src/router/guard.ts(0 hunks)
💤 Files with no reviewable changes (4)
- apps/web-antd/src/router/guard.ts
- apps/web-ele/src/router/guard.ts
- apps/web-naive/src/router/guard.ts
- playground/src/router/guard.ts
🔇 Additional comments (8)
apps/web-naive/src/bootstrap.ts (2)
1-1: LGTM: Required imports for dynamic title functionality.
The added imports provide the necessary functionality for reactive title updates.
Also applies to: 4-4, 8-8
33-41: LGTM: Effective solution for dynamic title updates.
The watchEffect implementation successfully addresses the issue of title not updating after language switch. The reactive nature ensures the title updates whenever the language or route changes.
apps/web-ele/src/bootstrap.ts (2)
1-1: LGTM! Import changes are appropriate.
The new imports are correctly added to support the dynamic title update functionality.
Also applies to: 4-4, 9-9, 11-11
34-42: Verify title updates across all supported languages.
Let's ensure the title updates work correctly for all configured languages.
✅ Verification successful
Let me gather more information about the i18n implementation and available translations.
Based on the gathered information, I can now provide the final response:
Title updates are properly implemented for all supported languages (zh-CN and en-US)
The dynamic title update implementation is working correctly because:
- The i18n system is properly configured with support for multiple languages (zh-CN and en-US)
- Translation files are organized by language in
packages/locales/src/langs/ - The
$t()function is correctly used to translate route titles - The same title update logic is consistently implemented across all app variants (web-antd, web-ele, web-naive)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find all language configurations and translation keys for route titles
# Find language configuration files
echo "Searching for language configuration files..."
fd -e json -e yaml -e ts "locale|lang|i18n"
# Find route configurations with title meta
echo "Searching for route title configurations..."
rg -A 2 "meta.*title"
Length of output: 4739
Script:
#!/bin/bash
# Check i18n implementation and translations
# Check the i18n configuration
echo "Checking i18n implementation..."
cat packages/locales/src/i18n.ts
# Look for translation files
echo -e "\nSearching for translation files..."
fd -e json -e yaml -e ts "zh|en|locale|lang" packages/locales/
# Check for title-related translations
echo -e "\nSearching for title-related translations..."
rg -A 1 "title.*:" packages/locales/
Length of output: 12064
apps/web-antd/src/bootstrap.ts (2)
1-1: LGTM: Import statements are well-organized and necessary.
The new imports support the dynamic title management functionality and follow a logical organization pattern.
Also applies to: 4-4, 9-11
38-41: Verify translation key handling.
Please ensure that all route meta titles have corresponding translations to avoid displaying raw translation keys.
playground/src/bootstrap.ts (2)
1-1: LGTM: Import statements are properly organized
The new imports are correctly added and organized, providing all necessary dependencies for the dynamic title update functionality.
Also applies to: 4-4, 10-10, 12-13
39-47: LGTM: Dynamic title update implementation effectively fixes the language switch issue
The implementation correctly uses watchEffect to react to language changes and updates the title accordingly. The code is clean and follows Vue best practices.
Consider adding some defensive programming:
watchEffect(() => {
if (preferences.app.dynamicTitle) {
const routeTitle = router.currentRoute.value.meta?.title;
+ // Skip update if no app name is configured
+ if (!preferences.app.name) return;
+
const pageTitle =
- (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+ (routeTitle ? `${$t(String(routeTitle))} - ` : '') + preferences.app.name;
useTitle(pageTitle);
}
});Let's verify this fixes the original issue by checking for any other title-related code:
✅ Verification successful
Title update implementation is consistent across all web apps
The verification shows that the dynamic title update logic is consistently implemented across all web applications (web-naive, web-antd, web-ele, playground) using the same pattern:
- All use
useTitlefrom@vueuse/core - All follow the same reactive pattern with route meta titles
- No direct
document.titlemanipulations found - Route meta titles are properly used in the routing configuration
The implementation is verified to be correct and consistent, ensuring proper title updates when language changes across the entire codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any other title-setting logic that might interfere
# Expected: No other direct document.title manipulations or useTitle calls
# Search for title-related code
echo "Searching for other title manipulations..."
rg -g '!*.md' -g '!*.json' "document\.title|useTitle"
# Search for related route meta title usage
echo "Checking route title usage..."
rg "meta.*title" -g '*.ts' -g '*.vue'
Length of output: 2563
Description
修复切换语言时，页面标题没有自动更新的问题
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit