refactor: set public form page title to the configured title upon creation (#6538)

packages/plugins/@nocobase/plugin-public-forms/src/client/components/AdminPublicFormPage.tsx

@@ -24,6 +24,7 @@ import {
   TextAreaWithGlobalScope,
   ApplicationContext,
   useGlobalVariable,
+  useCompile,
 } from '@nocobase/client';
 import {
   Breadcrumb,
@@ -71,6 +72,7 @@ export function AdminPublicFormPage() {
   const { t } = usePublicFormTranslation();
   const { theme } = useGlobalTheme();
   const apiClient = useAPIClient();
+  const compile = useCompile();
   const { token } = AntdTheme.useToken();
   const app = useApp();
   const environmentCtx = useGlobalVariable('$env');
@@ -150,7 +152,7 @@ export function AdminPublicFormPage() {
               title: <Link to={`/admin/settings/public-forms`}>{t('Public forms', { ns: NAMESPACE })}</Link>,
             },
             {
-              title: title,
+              title: compile(title),
             },
           ]}
         />

packages/plugins/@nocobase/plugin-public-forms/src/client/components/PublicFormPage.tsx

@@ -28,17 +28,20 @@ import {
   useApp,
   useRequest,
   VariablesProvider,
+  useCompile,
 } from '@nocobase/client';
 import { Input, Modal, Spin } from 'antd';
+import { useTranslation } from 'react-i18next';
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { isDesktop } from 'react-device-detect';
 import { useParams } from 'react-router';
 import { usePublicSubmitActionProps } from '../hooks';
 import { UnEnabledFormPlaceholder, UnFoundFormPlaceholder } from './UnEnabledFormPlaceholder';
-
 import { Button as MobileButton, Dialog as MobileDialog } from 'antd-mobile';
 import { MobileDateTimePicker } from './components/MobileDatePicker';
 import { MobilePicker } from './components/MobilePicker';
+import { usePublicFormTranslation } from '../locale';
+
 class PublicDataSource extends DataSource {
   async getDataSource() {
     return {};
@@ -83,6 +86,14 @@ function PublicAPIClientProvider({ children }) {
   return <APIClientProvider apiClient={apiClient}>{children}</APIClientProvider>;
 }
 
+function useTitle(data) {
+  const compile = useCompile();
+  useEffect(() => {
+    if (!data) return;
+    document.title = compile(data?.data?.title);
+  }, [data]);
+}
+
 export const PublicFormMessageContext = createContext<any>({});
 export const PageBackgroundColor = '#f5f5f5';
 
@@ -174,6 +185,7 @@ function InternalPublicForm() {
   );
   const [pwd, setPwd] = useState('');
   const ctx = useContext(SchemaComponentContext);
+  useTitle(data);
   // 设置的移动端 meta
   useEffect(() => {
     if (!isDesktop) {

packages/plugins/@nocobase/plugin-public-forms/src/server/plugin.ts

@@ -73,6 +73,7 @@ export class PluginPublicFormsServer extends Plugin {
     const keys = instance.collection.split(':');
     const collectionName = keys.pop();
     const dataSourceKey = keys.pop() || 'main';
+    const title = instance.get('title');
     const schema = await uiSchema.getJsonSchema(filterByTk);
     const { getAssociationAppends } = parseAssociationNames(dataSourceKey, collectionName, this.app, schema);
     const { appends } = getAssociationAppends();
@@ -94,6 +95,7 @@ export class PluginPublicFormsServer extends Plugin {
         },
       ),
       schema,
+      title,
     };
   }