feat(ui): unified management welcome

i18n/en_US.yaml

@@ -608,7 +608,6 @@ ui:
     msg:
       empty: Cannot be empty.
   login:
-    page_title: Welcome to {{site_name}}
     login_to_continue: Log in to continue
     info_sign: Don't have an account? <1>Sign up</1>
     info_login: Already have an account? <1>Log in</1>
@@ -639,7 +638,6 @@ ui:
       msg:
         empty: Email cannot be empty.
   change_email:
-    page_title: Welcome to Answer
     btn_cancel: Cancel
     btn_update: Update email address
     send_success: >-
@@ -650,7 +648,6 @@ ui:
       msg:
         empty: Email cannot be empty.
   oauth_bind_email:
-    page_title: Welcome to Answer
     subtitle: Add a recovery email to your account.
     btn_update: Update email address
     email:
@@ -858,7 +855,6 @@ ui:
   modal_confirm:
     title: Error...
   account_result:
-    page_title: Welcome to Answer
     success: Your new account is confirmed; you will be redirected to the home page.
     link: Continue to homepage
     invalid: >-
@@ -1046,12 +1042,13 @@ ui:
     login: Login
     plugins: Plugins
     installed_plugins: Installed Plugins
+  website_welcome: Welcome to {{site_name}}
   admin:
     admin_header:
       title: Admin
     dashboard:
       title: Dashboard
-      welcome: Welcome to Answer Admin!
+      welcome: Welcome to {{site_name}} Admin!
       site_statistics: Site Statistics
       questions: "Questions:"
       answers: "Answers:"

i18n/zh_CN.yaml

@@ -585,7 +585,6 @@ ui:
     msg:
       empty: 不能为空
   login:
-    page_title: 欢迎来到 Answer
     info_sign: 没有账户？<1>注册</1>
     info_login: 已经有一个账户？<1>登录</1>
     agreements: 登录即表示您同意<1>隐私政策</1>和<3>服务条款</3>。
@@ -614,7 +613,6 @@ ui:
       msg:
         empty: 邮箱不能为空
   change_email:
-    page_title: 欢迎来到 Answer
     btn_cancel: 取消
     btn_update: 更新电子邮件地址
     send_success: >-
@@ -803,7 +801,6 @@ ui:
   modal_confirm:
     title: 发生错误...
   account_result:
-    page_title: 欢迎来到 Answer
     success: 你的账号已通过验证，即将返回首页。
     link: 返回首页
     invalid: >-
@@ -976,12 +973,13 @@ ui:
     themes: Themes
     css-html: CSS/HTML
     login: Login
+  website_welcome: 欢迎来到 {{site_name}}
   admin:
     admin_header:
       title: 后台管理
     dashboard:
       title: 后台管理
-      welcome: 欢迎来到 Answer 后台管理！
+      welcome: 欢迎来到 {{site_name}} 后台管理！
       site_statistics: 站点统计
       questions: "问题:"
       answers: "回答:"

ui/src/components/Modal/LoginToContinueModal.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { loginToContinueStore, siteInfoStore } from '@/stores';
+import { WelcomeTitle } from '@/components';
 
 interface IProps {
   visible: boolean;
@@ -32,7 +33,7 @@ const Index: React.FC<IProps> = ({ visible = false }) => {
       </Modal.Header>
       <Modal.Body className="p-5">
         <div className="d-flex flex-column align-items-center text-center text-body">
-          <h3>{t('page_title', { site_name: siteInfo.name })}</h3>
+          <WelcomeTitle className="mb-2" />
           <p>{siteInfo.description}</p>
         </div>
         <div className="d-grid gap-2">

ui/src/components/WelcomeTitle/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import classnames from 'classnames';
+
+import { siteInfoStore } from '@/stores';
+
+interface Props {
+  as?: React.ElementType;
+  className?: string;
+}
+
+const Index: FC<Props> = ({ as: Component = 'h3', className = 'mb-5' }) => {
+  const { t } = useTranslation();
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
+  return (
+    <Component className={classnames('text-center', className)}>
+      {t('website_welcome', { site_name: siteName })}
+    </Component>
+  );
+};
+
+export default memo(Index);

ui/src/components/index.ts

@@ -32,6 +32,7 @@ import CustomizeTheme from './CustomizeTheme';
 import PageTags from './PageTags';
 import QuestionListLoader from './QuestionListLoader';
 import TagsLoader from './TagsLoader';
+import WelcomeTitle from './WelcomeTitle';
 
 export {
   Avatar,
@@ -70,5 +71,6 @@ export {
   PageTags,
   QuestionListLoader,
   TagsLoader,
+  WelcomeTitle,
 };
 export type { EditorRef, JSONSchema, UISchema };

ui/src/pages/Admin/Dashboard/index.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import { siteInfoStore } from '@/stores';
 import { useDashBoard } from '@/services';
 
 import {
@@ -13,6 +14,7 @@ import {
 
 const Dashboard: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'admin.dashboard' });
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
   const { data } = useDashBoard();
 
   if (!data) {
@@ -22,7 +24,7 @@ const Dashboard: FC = () => {
   return (
     <>
       <h3 className="text-capitalize">{t('title')}</h3>
-      <p className="mt-4">{t('welcome')}</p>
+      <p className="mt-4">{t('welcome', { site_name: siteName })}</p>
       <Row>
         <Col lg={6}>
           <Statistics data={data.info} />

ui/src/pages/Users/ActivationResult/index.tsx

@@ -4,6 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
+import { WelcomeTitle } from '@/components';
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'account_result' });
@@ -15,7 +16,7 @@ const Index: FC = () => {
     <Container className="pt-4 mt-2 mb-5">
       <Row className="justify-content-center">
         <Col lg={6}>
-          <h3 className="text-center mt-3 mb-5">{t('page_title')}</h3>
+          <WelcomeTitle className="mt-3 mb-5" />
           {location.pathname?.includes('success') && (
             <>
               <p className="text-center">{t('success')}</p>

ui/src/pages/Users/ChangeEmail/index.tsx

@@ -3,6 +3,7 @@ import { Container, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
+import { WelcomeTitle } from '@/components';
 
 import SendEmail from './components/sendEmail';
 
@@ -13,7 +14,7 @@ const Index: FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '6rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <WelcomeTitle />
       <Col className="mx-auto" md={3}>
         <SendEmail />
       </Col>

ui/src/pages/Users/Login/index.tsx

@@ -11,13 +11,9 @@ import type {
   ImgCodeRes,
   FormDataType,
 } from '@/common/interface';
-import { Unactivate } from '@/components';
+import { Unactivate, WelcomeTitle } from '@/components';
 import { PluginOauth } from '@/plugins';
-import {
-  loggedUserInfoStore,
-  loginSettingStore,
-  siteInfoStore,
-} from '@/stores';
+import { loggedUserInfoStore, loginSettingStore } from '@/stores';
 import { guard, floppyNavigation, handleFormError } from '@/utils';
 import { login, checkImgCode } from '@/services';
 import { PicAuthCodeModal } from '@/components/Modal';
@@ -28,7 +24,6 @@ const Index: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [refresh, setRefresh] = useState(0);
-  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
   const { user: storeUser, update: updateUser } = loggedUserInfoStore((_) => _);
   const loginSetting = loginSettingStore((state) => state.login);
   const [formData, setFormData] = useState<FormDataType>({
@@ -175,9 +170,7 @@ const Index: React.FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
-      <h3 className="text-center mb-5">
-        {t('page_title', { site_name: siteName })}
-      </h3>
+      <WelcomeTitle />
       {step === 1 && (
         <Col className="mx-auto" md={3}>
           <PluginOauth className="mb-5" />

ui/src/pages/Users/OauthBindEmail/index.tsx

@@ -3,7 +3,7 @@ import { Container, Col, Form, Button } from 'react-bootstrap';
 import { useTranslation, Trans } from 'react-i18next';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 
-import { Modal } from '@/components';
+import { Modal, WelcomeTitle } from '@/components';
 import type { FormDataType } from '@/common/interface';
 import { usePageTags } from '@/hooks';
 import { loggedUserInfoStore } from '@/stores';
@@ -135,7 +135,7 @@ const Index: FC = () => {
   }, []);
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '6rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <WelcomeTitle />
       {showResult ? (
         <Col md={6} className="mx-auto text-center">
           <p>

ui/src/pages/Users/Register/index.tsx

@@ -3,15 +3,13 @@ import { Container } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
-import { Unactivate } from '@/components';
-import { siteInfoStore } from '@/stores';
+import { Unactivate, WelcomeTitle } from '@/components';
 
 import SignUpForm from './components/SignUpForm';
 
 const Index: React.FC = () => {
   const [showForm, setShowForm] = useState(true);
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
-  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
   const onStep = () => {
     setShowForm((bol) => !bol);
   };
@@ -20,9 +18,7 @@ const Index: React.FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
-      <h3 className="text-center mb-5">
-        {t('page_title', { site_name: siteName })}
-      </h3>
+      <WelcomeTitle />
       {showForm ? (
         <SignUpForm callback={onStep} />
       ) : (