fix(i18n): relocalize opened tab titles

Author: gqcn

apps/lina-vben/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -3,7 +3,7 @@ import type { TabDefinition } from '@vben-core/typings';
 
 import type { TabConfig, TabsProps } from '../../types';
 
-import { computed, ref } from 'vue';
+import { computed, ref, unref } from 'vue';
 
 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
@@ -53,7 +53,7 @@ const tabsView = computed(() => {
       meta,
       name,
       path,
-      title: (newTabTitle || title || name) as string,
+      title: String(unref(newTabTitle) || title || name || ''),
     } as TabConfig;
   });
 });

apps/lina-vben/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -3,7 +3,7 @@ import type { TabDefinition } from '@vben-core/typings';
 
 import type { TabConfig, TabsProps } from '../../types';
 
-import { computed } from 'vue';
+import { computed, unref } from 'vue';
 
 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
@@ -58,7 +58,7 @@ const tabsView = computed(() => {
       meta,
       name,
       path,
-      title: (newTabTitle || title || name) as string,
+      title: String(unref(newTabTitle) || title || name || ''),
     } as TabConfig;
   });
 });

apps/lina-vben/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts

@@ -4,7 +4,7 @@ import type { TabDefinition } from '@vben/types';
 
 import type { IContextMenuItem } from '@vben-core/tabs-ui';
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref, unref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useContentMaximize, useTabs } from '@vben/hooks';
@@ -21,7 +21,7 @@ import {
   RotateCw,
   X,
 } from '@vben/icons';
-import { $t, useI18n } from '@vben/locales';
+import { $t, $te, useI18n } from '@vben/locales';
 import { getTabKey, useAccessStore, useTabbarStore } from '@vben/stores';
 import { filterTree } from '@vben/utils';
 
@@ -86,15 +86,45 @@ export function useTabbar() {
   };
 
   function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
+    const title = resolveTabTitle(tab);
+    const newTabTitle = tab?.meta?.newTabTitle
+      ? computed(() => translateIfExists(tab?.meta?.newTabTitle))
+      : undefined;
     return {
       ...tab,
       meta: {
         ...tab?.meta,
-        title: $t(tab?.meta?.title as string),
+        ...(newTabTitle ? { newTabTitle } : {}),
+        title,
       },
     };
   }
 
+  function translateIfExists(title: unknown) {
+    const rawTitle = String(unref(title) ?? '');
+    const titleKey = rawTitle.trim();
+    if (!titleKey) {
+      return '';
+    }
+    return $te(titleKey) ? $t(titleKey) : rawTitle;
+  }
+
+  function resolveTabTitle(tab: RouteLocationNormalizedGeneric) {
+    const meta = tab?.meta;
+
+    const i18nKey = String(meta?.i18nKey || '').trim();
+    if (i18nKey && $te(i18nKey)) {
+      return $t(i18nKey);
+    }
+
+    const title = translateIfExists(meta?.title);
+    if (title) {
+      return title;
+    }
+
+    return String(tab?.name || '');
+  }
+
   watch(
     () => accessStore.accessMenus,
     () => {

hack/tests/e2e/dialect/TC0165-sqlite-mode-business-zero-impact.ts

@@ -30,13 +30,17 @@ type ServerMonitorResult = {
   };
 };
 
+const sqliteMonitorPluginId = "monitor-server";
+
 test.describe("TC-165 SQLite mode business zero impact", () => {
   requireSQLiteE2E();
 
   test("TC-165a~d: user CRUD, execution log list, source plugin lifecycle, and monitor database version work on SQLite", async () => {
     const api = await createAdminApiContext();
     const username = `sqlite_e2e_${Date.now()}`;
     let createdUserId = 0;
+    let originalMonitorInstalled = 0;
+    let originalMonitorEnabled = 0;
 
     try {
       const created = await expectApiSuccess<UserCreateResult>(
@@ -105,6 +109,21 @@ test.describe("TC-165 SQLite mode business zero impact", () => {
       expect(plugin?.installed).toBe(1);
       expect(plugin?.enabled).toBe(1);
 
+      let monitorPlugin = await findPlugin(api, sqliteMonitorPluginId);
+      expect(
+        monitorPlugin,
+        `expected ${sqliteMonitorPluginId} to be discoverable`,
+      ).toBeTruthy();
+      originalMonitorInstalled = monitorPlugin?.installed ?? 0;
+      originalMonitorEnabled = monitorPlugin?.enabled ?? 0;
+      if (monitorPlugin?.installed !== 1) {
+        await installPlugin(api, sqliteMonitorPluginId);
+        monitorPlugin = await findPlugin(api, sqliteMonitorPluginId);
+      }
+      if (monitorPlugin?.enabled !== 1) {
+        await updatePluginStatus(api, sqliteMonitorPluginId, true);
+      }
+
       const monitor = await expectApiSuccess<ServerMonitorResult>(
         await api.get("monitor/server"),
         "query server monitor in SQLite mode",
@@ -118,6 +137,16 @@ test.describe("TC-165 SQLite mode business zero impact", () => {
       if (createdUserId > 0) {
         await api.delete(`user/${createdUserId}`).catch(() => undefined);
       }
+      if (originalMonitorEnabled !== 1) {
+        await updatePluginStatus(api, sqliteMonitorPluginId, false).catch(
+          () => undefined,
+        );
+      }
+      if (originalMonitorInstalled !== 1) {
+        await uninstallPlugin(api, sqliteMonitorPluginId, true).catch(
+          () => undefined,
+        );
+      }
       await uninstallPlugin(api, sqliteSourcePluginId, true).catch(
         () => undefined,
       );

hack/tests/e2e/i18n/TC0177-tab-title-language-switch.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "../../fixtures/auth";
+import { waitForRouteReady } from "../../support/ui";
+
+test.describe("TC-177 tab title language switch", () => {
+  test("TC-177a: opened tab titles relocalize immediately after language switch", async ({
+    adminPage,
+    mainLayout,
+  }) => {
+    await mainLayout.switchLanguage("简体中文");
+
+    await adminPage.goto("/dashboard/workspace", { waitUntil: "domcontentloaded" });
+    await waitForRouteReady(adminPage);
+    await adminPage.goto("/system/user", { waitUntil: "domcontentloaded" });
+    await waitForRouteReady(adminPage);
+
+    await expect(mainLayout.tabTitle("分析页")).toBeVisible();
+    await expect(mainLayout.tabTitle("工作台")).toBeVisible();
+    await expect(mainLayout.tabTitle("用户管理")).toBeVisible();
+
+    await mainLayout.switchLanguage("English");
+
+    await expect(mainLayout.tabTitle("Analytics")).toBeVisible();
+    await expect(mainLayout.tabTitle("Workspace")).toBeVisible();
+    await expect(mainLayout.tabTitle("Users")).toBeVisible();
+    await expect(mainLayout.tabTitle("分析页")).toHaveCount(0);
+    await expect(mainLayout.tabTitle("工作台")).toHaveCount(0);
+    await expect(mainLayout.tabTitle("用户管理")).toHaveCount(0);
+
+    await mainLayout.switchLanguage("简体中文");
+
+    await expect(mainLayout.tabTitle("分析页")).toBeVisible();
+    await expect(mainLayout.tabTitle("工作台")).toBeVisible();
+    await expect(mainLayout.tabTitle("用户管理")).toBeVisible();
+    await expect(mainLayout.tabTitle("Analytics")).toHaveCount(0);
+    await expect(mainLayout.tabTitle("Workspace")).toHaveCount(0);
+    await expect(mainLayout.tabTitle("Users")).toHaveCount(0);
+  });
+});

openspec/changes/switch-default-database-to-postgres/tasks.md

@@ -229,6 +229,7 @@
 - FB-19 verification passed after adding SQLite translation debug diagnostics for skipped `COMMENT ON TABLE/COLUMN` statements and explicit index-preservation coverage: `cd apps/lina-core && go test -count=1 ./pkg/dialect/internal/sqlite`; `cd apps/lina-core && go test -count=1 ./pkg/dialect`; `cd apps/lina-core && go test -run 'TestTranslateDDLDropsCommentsWithDebugLogPreservingIndexes|TestSQLiteTranslateDDLExecutesPostgreSQLFixture' -count=3 ./pkg/dialect/internal/sqlite ./pkg/dialect`; and `openspec validate switch-default-database-to-postgres`. Review found no issues: the logger uses the propagated translation context, comment filtering remains scoped to PostgreSQL comment metadata, and `CREATE INDEX` / `CREATE UNIQUE INDEX` / `DROP INDEX` / `REINDEX` statements stay on the compatible SQL path. i18n resources, runtime cache behavior, API behavior, and role data-permission behavior are unchanged.
 - FB-20 verification passed after converting the `apps/lina-core/Makefile` terminal/help-facing Chinese text to English: `rg -n "[\\p{Han}]" apps/lina-core/Makefile` returned no matches; `make -C apps/lina-core init` printed the English confirmation guidance; and `openspec validate switch-default-database-to-postgres` passed. This is a project governance feedback item, so no unit test or E2E test is required; runtime behavior, API behavior, cache behavior, data-permission behavior, and i18n resources are unchanged.
 - FB-21 verification passed after moving the remaining root `Makefile` command implementations into `hack/makefiles`: `make help`; `make -n init confirm=init`; and `make -n mock confirm=mock` all passed. A root target scan confirmed the root `Makefile` now only keeps shared variables and split makefile includes. This is a project governance feedback item, so no unit test or E2E test is required; runtime behavior, API behavior, cache behavior, data-permission behavior, and i18n resources are unchanged.
+- FB-22 verification passed after resolving opened tab titles from stable runtime i18n keys at render time: `cd apps/lina-vben && pnpm -F @lina/web-antd run typecheck`; `cd hack/tests && pnpm run test:validate`; `cd hack/tests && E2E_BROWSER_CHANNEL=chrome pnpm exec playwright test e2e/i18n/TC0177-tab-title-language-switch.ts`; and `openspec validate switch-default-database-to-postgres`. i18n impact is limited to frontend tab title relocalization behavior; no runtime language resource, backend API, cache behavior, or role data-permission behavior changed.
 
 ## Feedback
 
@@ -253,3 +254,4 @@
 - [x] **FB-19**: SQLite SQL 翻译器丢弃 `COMMENT ON TABLE/COLUMN` 注释语句时输出 Debug 日志，并确保创建和更新索引语句不会被误丢弃
 - [x] **FB-20**: 将 `apps/lina-core/Makefile` 中会输出到终端或帮助文本的中文提示统一改为英文
 - [x] **FB-21**: 将根目录 `Makefile` 中剩余命令迁移到 `hack/makefiles` 对应命令文件中
+- [x] **FB-22**: 切换 i18n 语言时已打开 tab 页标题应联动切换到当前语言