feat: support set document title

packages/api/src/migrations/ui-schema/login.ts

@@ -1,6 +1,7 @@
 export const login = {
   key: 'dtf9j0b8p9u',
   type: 'object',
+  title: '登录',
   properties: {
     email: {
       type: 'string',

packages/api/src/migrations/ui-schema/register.ts

@@ -1,6 +1,7 @@
 export const register = {
   key: '46qlxqam3xk',
   type: 'object',
+  title: '注册',
   properties: {
     email: {
       type: 'string',

packages/client/src/components/admin-layout/SiteTitle.tsx

@@ -30,6 +30,11 @@ export function SystemSettingsProvider(props) {
   );
 }
 
+export const useSystemSettings = () => {
+  const ctx = useContext(SystemSettingsContext);
+  return ctx?.service?.data || {};
+};
+
 export const SiteTitle = () => {
   const { service = {} } = useContext(SystemSettingsContext);
   const { loading, data } = service;

packages/client/src/components/admin-layout/index.tsx

@@ -38,8 +38,13 @@ import { uid } from '@formily/shared';
 import { Permissions } from './Permissions';
 import { More } from './More';
 import { UserInfo } from './UserInfo';
-import { SiteTitle, SystemSettingsProvider } from './SiteTitle';
+import {
+  SiteTitle,
+  SystemSettingsProvider,
+  useSystemSettings,
+} from './SiteTitle';
 import { AuthProvider } from './Auth';
+import { Helmet } from 'react-helmet';
 
 function DesignableToggle() {
   const { designable, setDesignable } = useDesignableSwitchContext();
@@ -69,6 +74,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
   const match = useRouteMatch<any>();
   const sideMenuRef = useRef();
   const history = useHistory();
+  const { title } = useSystemSettings();
   const [activeKey, setActiveKey] = useState(match.params.name);
   const [, setPageTitle] = usePageTitleContext();
   const onSelect = (info) => {
@@ -91,6 +97,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
   const onMenuItemRemove = () => {
     history.push(`/admin`);
   };
+  console.log({ activeKey });
   return (
     <Layout>
       <Layout.Header className={'site-header'} style={{ display: 'flex' }}>
@@ -117,7 +124,13 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
           width={200}
         ></Layout.Sider>
         <Layout.Content style={{ minHeight: 'calc(100vh - 46px)' }}>
-          {activeKey && <Content activeKey={activeKey} />}
+          {activeKey ? (
+            <Content activeKey={activeKey} />
+          ) : (
+            <Helmet>
+              <title>{title}</title>
+            </Helmet>
+          )}
         </Layout.Content>
       </Layout>
     </Layout>

packages/client/src/components/auth-layout/index.tsx

@@ -1,6 +1,7 @@
 import { Card } from 'antd';
 import React from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
+import { SystemSettingsProvider } from '../admin-layout/SiteTitle';
 
 export function AuthLayout({ children, route }: any) {
   const location = useLocation();
@@ -8,7 +9,7 @@ export function AuthLayout({ children, route }: any) {
   return (
     <div style={{ maxWidth: 320, margin: '0 auto', paddingTop: '20vh' }}>
       <h1>NocoBase</h1>
-      {children}
+      <SystemSettingsProvider>{children}</SystemSettingsProvider>
     </div>
   );
 }

packages/client/src/components/route-schema-renderer/index.tsx

@@ -5,6 +5,7 @@ import { useRequest } from 'ahooks';
 import { request, SchemaRenderer } from '../../schemas';
 import { useForm } from '@formily/react';
 import { useHistory, useLocation } from 'react-router-dom';
+import { useSystemSettings } from '../admin-layout/SiteTitle';
 
 function Div(props) {
   return <div {...props}></div>;
@@ -56,11 +57,15 @@ export function RouteSchemaRenderer({ route }) {
       formatResult: (result) => result?.data,
     },
   );
+  const { title } = useSystemSettings();
   if (loading) {
     return <Spin />;
   }
   return (
     <div>
+      <Helmet>
+        <title>{title ? `${data.title} - ${title}` : data.title}</title>
+      </Helmet>
       <SchemaRenderer
         components={{ Div }}
         scope={{ useLogin, useRegister }}

packages/client/src/constate/PageTitle.ts

@@ -1,12 +1,15 @@
 import constate from 'constate';
 import { useState } from 'react';
+import { useSystemSettings } from '../components/admin-layout/SiteTitle';
 
 export interface PageTitleProviderProps {
   defaultPageTitle?: string;
 }
 
 const [PageTitleProvider, usePageTitleContext] = constate(({ defaultPageTitle }: PageTitleProviderProps) => {
-  return useState(defaultPageTitle);
+  const { title } = useSystemSettings();
+  const [pageTitle, setPageTitle] = useState(defaultPageTitle);
+  return [title ? `${pageTitle} - ${title}` : pageTitle, setPageTitle];
 });
 
 export { PageTitleProvider, usePageTitleContext };

packages/client/src/schemas/page/index.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import { PageHeader as AntdPageHeader } from 'antd';
 import { observer } from '@formily/react';
 import { usePageTitleContext } from '../../constate/PageTitle';
+import { Helmet } from 'react-helmet';
 
 export const Page = observer((props) => {
   const { children, ...others } = props;
   const [pageTitle] = usePageTitleContext();
-
   return (
     <>
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
       <AntdPageHeader ghost={false} title={pageTitle} {...others} />
       <div style={{margin: 24}}>
         {children}