From 1294aabbcc6260c5b3fe1a2a253371c75e8aa43b Mon Sep 17 00:00:00 2001 From: zhaoying Date: Tue, 14 Apr 2026 16:38:59 +0800 Subject: [PATCH] feat(web): update document title --- web/src/App.tsx | 55 ++++++++++++++++++++-- web/src/hooks/useBreadcrumbManager.ts | 10 ++-- web/src/routes/routes.json | 1 - web/src/store/menu.json | 15 +++--- web/src/views/ApplicationConfig/index.tsx | 11 ++++- web/src/views/MemoryManagement/index.tsx | 7 +-- web/src/views/Ontology/pages/Detail.tsx | 6 ++- web/src/views/Skills/pages/SkillConfig.tsx | 3 +- web/src/views/UserMemoryDetail/Neo4j.tsx | 17 ++++--- web/src/views/UserMemoryDetail/Rag.tsx | 6 ++- 10 files changed, 101 insertions(+), 30 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index a10f9409..1af38372 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -16,7 +16,7 @@ import { ConfigProvider, App as AntdApp } from 'antd'; -import { useTranslation } from 'react-i18next'; +import i18n from 'i18next'; import { lightTheme } from './styles/antdThemeConfig.ts' import router from './routes'; @@ -29,11 +29,58 @@ import 'dayjs/plugin/utc' import { cookieUtils } from './utils/request'; import { useUser } from '@/store/user'; +import menuJson from '@/store/menu.json'; + +type MenuEntry = { path: string; i18nKey: string }; + +function flattenMenuEntries(list: any[]): MenuEntry[] { + const result: MenuEntry[] = []; + for (const item of list) { + if (item.path && item.i18nKey && item.type !== 'group') result.push({ path: item.path, i18nKey: item.i18nKey }); + if (item.subs?.length) result.push(...flattenMenuEntries(item.subs)); + } + return result; +} + +const menuEntries: MenuEntry[] = flattenMenuEntries([...menuJson.manage, ...menuJson.space]); + +function pathMatches(pattern: string, path: string): boolean { + if (pattern === path) return true; + if (pattern.includes(':')) { + return new RegExp('^' + pattern.replace(/:[\w-]+/g, '[^/]+') + '$').test(path); + } + return false; +} + +function getPageTitle(pathname: string): string { + const appName = i18n.t('memoryBear'); + const entry = menuEntries.find(e => pathMatches(e.path, pathname)); + if (!entry) return appName; + return `${i18n.t(entry.i18nKey)} - ${appName}`; +} + +const SKIP_TITLE_PATTERNS = [ + '/user-memory/detail/:id/:type', + '/forgetting-engine/:id', + '/memory-extraction-engine/:id', + '/emotion-engine/:id', + '/reflection-engine/:id', +]; + + + function App() { - const { t } = useTranslation(); const { locale, language, timeZone } = useI18n() const { checkJump } = useUser(); + useEffect(() => { + const unsubscribe = router.subscribe(({ location }) => { + if (SKIP_TITLE_PATTERNS.some(p => pathMatches(p, location.pathname))) return; + document.title = getPageTitle(location.pathname); + }); + return () => unsubscribe(); + }, []) + useEffect(() => { const authToken = cookieUtils.get('authToken') if (!authToken && !window.location.hash.includes('#/login') && !window.location.hash.includes('#/conversation/') && !window.location.hash.includes('#/jump') && !window.location.hash.includes('#/invite-register')) { @@ -44,7 +91,9 @@ function App() { }, []) useEffect(() => { - document.title = t('memoryBear') + if (!SKIP_TITLE_PATTERNS.some(p => pathMatches(p, router.state.location.pathname))) { + document.title = getPageTitle(router.state.location.pathname) + } dayjs.locale(language) localStorage.setItem('language', language) }, [language]) diff --git a/web/src/hooks/useBreadcrumbManager.ts b/web/src/hooks/useBreadcrumbManager.ts index 161fbb65..1b7cf4b2 100644 --- a/web/src/hooks/useBreadcrumbManager.ts +++ b/web/src/hooks/useBreadcrumbManager.ts @@ -1,8 +1,8 @@ /* * @Author: ZhaoYing * @Date: 2026-02-02 16:24:44 - * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-02-02 16:24:44 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-04-14 15:52:57 */ /** * useBreadcrumbManager Hook @@ -18,6 +18,7 @@ import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useTranslation } from 'react-i18next' import { useMenu } from '@/store/menu'; import type { MenuItem } from '@/store/menu'; @@ -53,6 +54,7 @@ export interface BreadcrumbOptions { export const useBreadcrumbManager = (options?: BreadcrumbOptions) => { const { allBreadcrumbs, setCustomBreadcrumbs } = useMenu(); const navigate = useNavigate(); + const { t } = useTranslation() /** Update breadcrumbs based on current path and type */ const updateBreadcrumbs = useCallback((breadcrumbPath: BreadcrumbPath) => { @@ -336,8 +338,8 @@ export const useBreadcrumbManager = (options?: BreadcrumbOptions) => { /** Use different keys based on breadcrumb type to implement independent breadcrumb paths */ const breadcrumbKey = breadcrumbType === 'list' ? 'space' : 'space-detail'; - - + const lastMenu = customBreadcrumbs[customBreadcrumbs.length - 1] + document.title = `${lastMenu.i18nKey ? t(lastMenu.i18nKey) : lastMenu.label} - ${t('memoryBear') }`; setCustomBreadcrumbs(customBreadcrumbs, breadcrumbKey); }, [setCustomBreadcrumbs, navigate, options?.breadcrumbType, options?.onKnowledgeBaseMenuClick, options?.onKnowledgeBaseFolderClick]); diff --git a/web/src/routes/routes.json b/web/src/routes/routes.json index 5ff1f90c..f6dc631d 100644 --- a/web/src/routes/routes.json +++ b/web/src/routes/routes.json @@ -48,7 +48,6 @@ { "path": "/application/config/:id", "element": "ApplicationConfig" }, { "path": "/application/config/:id/:source", "element": "ApplicationConfig" }, { "path": "/user-memory/neo4j/:id", "element": "Neo4jUserMemoryDetail" }, - { "path": "/statement/:id", "element": "StatementDetail" }, { "path": "/user-memory/detail/:id/:type", "element": "MemoryNodeDetail" }, { "path": "/ontology/:id", "element": "OntologyDetail" } ] diff --git a/web/src/store/menu.json b/web/src/store/menu.json index 8d30dcc4..ec80a384 100644 --- a/web/src/store/menu.json +++ b/web/src/store/menu.json @@ -6,7 +6,7 @@ "code": "workbench", "label": "workbench", "i18nKey": "menu.workbench", - "path": "/", + "path": null, "enable": true, "display": true, "level": 1, @@ -174,7 +174,7 @@ "code": "workbench", "label": "workbench", "i18nKey": "menu.workbench", - "path": "/", + "path": null, "enable": true, "display": true, "level": 1, @@ -425,15 +425,14 @@ { "id": 2211, "parent": 221, - "code": "statementDetail", + "code": "userMemoryDetail", "label": "记忆详情", - "i18nKey": "menu.statementDetail", - "path": "/statement/:id", + "i18nKey": "menu.userMemoryDetail", + "path": "/user-memory/detail/:id/:type", "enable": true, "display": false, - "level": 4, - "sort": 0, - "subs": null + "level": 3, + "sort": 0 } ] }, diff --git a/web/src/views/ApplicationConfig/index.tsx b/web/src/views/ApplicationConfig/index.tsx index a9e1df5d..fa6f9939 100644 --- a/web/src/views/ApplicationConfig/index.tsx +++ b/web/src/views/ApplicationConfig/index.tsx @@ -2,11 +2,12 @@ * @Author: ZhaoYing * @Date: 2026-02-03 16:29:37 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-03-26 15:37:18 + * @Last Modified time: 2026-04-14 10:01:05 */ import React, { useEffect, useState, useRef } from 'react'; import { useParams } from 'react-router-dom'; import { Flex } from 'antd' +import { useTranslation } from 'react-i18next' import ConfigHeader from './components/ConfigHeader' import type { AgentRef, ClusterRef, WorkflowRef, Config } from './types' @@ -30,6 +31,7 @@ import Logs from './Logs'; const ApplicationConfig: React.FC = () => { // Hooks const { id, source } = useParams(); + const { t } = useTranslation() // Refs for different application types const agentRef = useRef(null) @@ -95,6 +97,13 @@ const ApplicationConfig: React.FC = () => { getApplicationInfo() }, [id]) + useEffect(() => { + if (application?.name) { + const appName = t('memoryBear'); + document.title = `${application.name} - ${appName}`; + } + }, [application?.name]) + /** * Fetch application information */ diff --git a/web/src/views/MemoryManagement/index.tsx b/web/src/views/MemoryManagement/index.tsx index 1fb945b0..5bbbb8bd 100644 --- a/web/src/views/MemoryManagement/index.tsx +++ b/web/src/views/MemoryManagement/index.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-03 17:33:15 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-03-26 14:56:00 + * @Last Modified time: 2026-04-14 16:17:29 */ /** * Memory Management Page @@ -74,7 +74,8 @@ const MemoryManagement: React.FC = () => { }; /** Navigate to engine configuration page */ - const handleClick = (id: number, type: string) => { + const handleClick = (id: number, type: string, config_name: string) => { + document.title = `${config_name} - ${t('memoryBear')}`; switch (type) { case 'memoryExtractionEngine': navigate(`/memory-extraction-engine/${id}`) @@ -130,7 +131,7 @@ const MemoryManagement: React.FC = () => { align="center" justify="space-between" className="rb:cursor-pointer rb:bg-[#F6F6F6] rb:h-8 rb:rounded-lg rb:font-medium rb:leading-5 rb:pl-2! rb:pr-1! rb:hover:shadow-[0px_2px_8px_0px_rgba(23,23,25,0.16)]" - onClick={() => handleClick(item.config_id, key)} + onClick={() => handleClick(item.config_id, key, item.config_name)} > {t(`memory.${key}`)}
{ getData() }, [id, query]) + useEffect(() => { + document.title = `${data.scene_name} - ${t('memoryBear')}`; + }, [data.scene_name]) + /** * Fetch ontology class list data */ diff --git a/web/src/views/Skills/pages/SkillConfig.tsx b/web/src/views/Skills/pages/SkillConfig.tsx index 84c82378..91cd710a 100644 --- a/web/src/views/Skills/pages/SkillConfig.tsx +++ b/web/src/views/Skills/pages/SkillConfig.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-05 10:44:08 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-02-05 10:56:28 + * @Last Modified time: 2026-04-14 16:27:08 */ import { type FC, useEffect, useRef, useState } from "react"; import { useTranslation } from 'react-i18next'; @@ -71,6 +71,7 @@ const SkillConfig: FC = () => { .then(res => { form.setFieldsValue(res as SkillFormData) setData(res as SkillFormData) + document.title = `${(res as SkillFormData).name} - ${t('memoryBear')}`; }) .finally(() => { setLoading(false) diff --git a/web/src/views/UserMemoryDetail/Neo4j.tsx b/web/src/views/UserMemoryDetail/Neo4j.tsx index 51be7c8d..67ddc065 100644 --- a/web/src/views/UserMemoryDetail/Neo4j.tsx +++ b/web/src/views/UserMemoryDetail/Neo4j.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-03 17:57:26 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-03-26 18:59:53 + * @Last Modified time: 2026-04-14 16:38:21 */ /** * Neo4j User Memory Detail View @@ -22,7 +22,7 @@ import InterestDistribution from './components/InterestDistribution' import NodeStatistics from './components/NodeStatistics' import RelationshipNetwork from './components/RelationshipNetwork' import MemoryInsight from './components/MemoryInsight' -import type { EndUserProfileRef, MemoryInsightRef, AboutMeRef } from './types' +import type { EndUserProfileRef, MemoryInsightRef, AboutMeRef, EndUser } from './types' import { analyticsRefresh, } from '@/api/memory' @@ -39,8 +39,11 @@ const Neo4j: FC = () => { const [selectedKey, setSelectedKey] = useState(null) /** Update displayed name */ - const handleNameUpdate = (data: { other_name?: string; id: string }) => { - setName(data.other_name && data.other_name !== '' ? data.other_name : data.id) + const handleNameUpdate = (data?: EndUser) => { + if (!data) return + let name = data.other_name && data.other_name !== '' ? data.other_name : data.id || data.end_user_id + setName(name) + document.title = `${name} - ${t('memoryBear')}`; } /** Navigate back */ @@ -78,7 +81,7 @@ const Neo4j: FC = () => { - {
- {
- + diff --git a/web/src/views/UserMemoryDetail/Rag.tsx b/web/src/views/UserMemoryDetail/Rag.tsx index ff9069c7..a1da95d4 100644 --- a/web/src/views/UserMemoryDetail/Rag.tsx +++ b/web/src/views/UserMemoryDetail/Rag.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-03 17:57:11 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-03-31 15:29:45 + * @Last Modified time: 2026-04-14 15:56:15 */ /** * RAG User Memory Detail View @@ -97,6 +97,10 @@ const Rag: FC = () => { } const name = loading.detail ? '' : data?.name && data?.name !== '' ? data.name : id + useEffect(() => { + document.title = `${name} - ${t('memoryBear')}`; + }, [name]) + const [refreshLoading, setRefreshLoading] = useState(false) const handleRefresh = () => { if (refreshLoading || !id) return