From 1246e0998726cef5e7b6e6cdc811d9c263f7ca8b Mon Sep 17 00:00:00 2001
From: yyoung <yyoung2001@gmail.com>
Date: Wed, 29 Mar 2023 14:04:07 +0800
Subject: [PATCH 1/3] fix: set page title

---
 packages/website/package.json                 |   1 +
 packages/website/src/App.tsx                  |   9 +-
 packages/website/src/components/Helmet.tsx    |  10 +
 .../pages/index/group/[name]/index/forum.tsx  |   8 +
 .../pages/index/group/[name]/index/index.tsx  |   2 +
 .../index/group/[name]/index/members.tsx      |   8 +
 .../index/group/[name]/new_topic/index.tsx    |  17 +-
 .../src/pages/index/group/reply/[id]/edit.tsx |   2 +
 .../src/pages/index/group/topic/[id]/edit.tsx |   2 +
 .../pages/index/group/topic/[id]/index.tsx    |   2 +
 .../index/subject/[id]/wiki/edit_detail.tsx   | 306 +++++++++---------
 packages/website/src/pages/login/index.tsx    |  66 ++--
 pnpm-lock.yaml                                |  31 ++
 13 files changed, 270 insertions(+), 194 deletions(-)
 create mode 100644 packages/website/src/components/Helmet.tsx

diff --git a/packages/website/package.json b/packages/website/package.json
index 48f5ccf87..55de1fbb9 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.43.8",
     "react-router-dom": "^6.9.0",
     "reset-css": "^5.0.1",
diff --git a/packages/website/src/App.tsx b/packages/website/src/App.tsx
index 9c4c64fa9..c8a27b6d5 100644
--- a/packages/website/src/App.tsx
+++ b/packages/website/src/App.tsx
@@ -1,14 +1,17 @@
 import pageRoutes from '~react-pages';
 import React, { Suspense } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { useRoutes } from 'react-router-dom';
 
 import { UserProvider } from './hooks/use-user';
 
 const App = () => {
   return (
-    <UserProvider>
-      <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
-    </UserProvider>
+    <HelmetProvider>
+      <UserProvider>
+        <Suspense fallback={null}>{useRoutes(pageRoutes)}</Suspense>
+      </UserProvider>
+    </HelmetProvider>
   );
 };
 
diff --git a/packages/website/src/components/Helmet.tsx b/packages/website/src/components/Helmet.tsx
new file mode 100644
index 000000000..94842aa5c
--- /dev/null
+++ b/packages/website/src/components/Helmet.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Helmet as BaseHelmet, type HelmetProps } from 'react-helmet-async';
+
+const Helmet = (props: React.PropsWithChildren<HelmetProps>) => {
+  return (
+    <BaseHelmet defaultTitle='Bangumi 番组计划' titleTemplate='%s | Bangumi 番组计划' {...props} />
+  );
+};
+
+export default Helmet;
diff --git a/packages/website/src/pages/index/group/[name]/index/forum.tsx b/packages/website/src/pages/index/group/[name]/index/forum.tsx
index 2bb02c8b0..6d10e9d49 100644
--- a/packages/website/src/pages/index/group/[name]/index/forum.tsx
+++ b/packages/website/src/pages/index/group/[name]/index/forum.tsx
@@ -3,12 +3,14 @@ import { useParams } from 'react-router-dom';
 
 import { Pagination } from '@bangumi/design';
 import { withErrorBoundary } from '@bangumi/website/components/ErrorBoundary';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroupRecentTopics } from '@bangumi/website/hooks/use-group';
 import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate';
 import { usePaginationParams } from '@bangumi/website/hooks/use-pagination';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
 import TopicForm from '../../components/TopicForm';
+import { useGroupContext } from '..';
 import TopicsTable from '../components/TopicsTable';
 import styles from './style.module.less';
 
@@ -18,6 +20,11 @@ const GroupForum = () => {
   const { curPage, offset, pageSize } = usePaginationParams();
   const { user } = useUser();
 
+  const groupContext = useGroupContext();
+  const {
+    groupRet: { group },
+  } = groupContext;
+
   const topics = useGroupRecentTopics(name!, {
     offset,
     limit: pageSize,
@@ -29,6 +36,7 @@ const GroupForum = () => {
 
   return (
     <>
+      <Helmet title={`${group.group.title}小组的讨论`} />
       <TopicsTable topics={topics.data} />
       <Pagination
         total={topics.total}
diff --git a/packages/website/src/pages/index/group/[name]/index/index.tsx b/packages/website/src/pages/index/group/[name]/index/index.tsx
index b9a0954ff..457e08da8 100644
--- a/packages/website/src/pages/index/group/[name]/index/index.tsx
+++ b/packages/website/src/pages/index/group/[name]/index/index.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import { Button, CollapsibleContent, Section } from '@bangumi/design';
 import { ArrowRightCircle } from '@bangumi/icons';
 import { render as renderBBCode, UnreadableCodeError } from '@bangumi/utils';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroupRecentTopics } from '@bangumi/website/hooks/use-group';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
@@ -29,6 +30,7 @@ const GroupHome: React.FC = () => {
 
   return (
     <>
+      <Helmet title={`${group.group.title}小组`} />
       <CollapsibleContent
         threshold={193}
         content={parsedDescription}
diff --git a/packages/website/src/pages/index/group/[name]/index/members.tsx b/packages/website/src/pages/index/group/[name]/index/members.tsx
index 74b5b867e..0fb51695b 100644
--- a/packages/website/src/pages/index/group/[name]/index/members.tsx
+++ b/packages/website/src/pages/index/group/[name]/index/members.tsx
@@ -3,11 +3,13 @@ import { useParams } from 'react-router-dom';
 
 import { Pagination, Section } from '@bangumi/design';
 import { UnreadableCodeError } from '@bangumi/utils';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroupMembers } from '@bangumi/website/hooks/use-group-members';
 import { useTransitionNavigate } from '@bangumi/website/hooks/use-navigate';
 import { usePaginationParams } from '@bangumi/website/hooks/use-pagination';
 
 import { UserCard } from '../../components/UserCard';
+import { useGroupContext } from '..';
 import styles from './style.module.less';
 
 const GroupMembersPage = () => {
@@ -18,6 +20,11 @@ const GroupMembersPage = () => {
     throw new UnreadableCodeError('BUG: name is undefined');
   }
 
+  const groupContext = useGroupContext();
+  const {
+    groupRet: { group },
+  } = groupContext;
+
   // 仅第一页获取管理员
   const { data: groupModMembers } = useGroupMembers(name, {
     offset,
@@ -39,6 +46,7 @@ const GroupMembersPage = () => {
   // TODO: 遵循旧站的交互规则，可能需要改动
   return (
     <>
+      <Helmet title={`${group.group.title}小组成员`} />
       {curPage === 1 && (
         <Section title='小组管理员'>
           <div className={styles.members}>
diff --git a/packages/website/src/pages/index/group/[name]/new_topic/index.tsx b/packages/website/src/pages/index/group/[name]/new_topic/index.tsx
index 69e3d71bc..196d5de80 100644
--- a/packages/website/src/pages/index/group/[name]/new_topic/index.tsx
+++ b/packages/website/src/pages/index/group/[name]/new_topic/index.tsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 
 import { Typography } from '@bangumi/design';
 import { withErrorBoundary } from '@bangumi/website/components/ErrorBoundary';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroup } from '@bangumi/website/hooks/use-group';
 
 import GroupInfo from '../../components/GroupInfo';
@@ -11,25 +12,23 @@ import styles from './style.module.less';
 
 const GroupNewTopicPage = () => {
   const { name } = useParams();
-  const { group } = useGroup(name!);
+  const { group: groupProfile } = useGroup(name!);
+  const { group } = groupProfile;
 
   return (
     <>
+      <Helmet title={`在${group.title}小组发表新话题`} />
       <Typography.Text type='secondary' className={styles.tipText}>
         在
-        <Typography.Link
-          to={`/group/${group.group.name}`}
-          fontWeight='bold'
-          className={styles.groupLink}
-        >
-          {group.group.title}
+        <Typography.Link to={`/group/${group.name}`} fontWeight='bold' className={styles.groupLink}>
+          {group.title}
         </Typography.Link>
         发表新话题
       </Typography.Text>
       <div className={styles.grid}>
-        <TopicForm groupName={name} />
+        <TopicForm groupName={group.name} />
         <div className={styles.rightColumn}>
-          <GroupInfo group={group.group} />
+          <GroupInfo group={group} />
         </div>
       </div>
     </>
diff --git a/packages/website/src/pages/index/group/reply/[id]/edit.tsx b/packages/website/src/pages/index/group/reply/[id]/edit.tsx
index 6e229c55d..217d04e9b 100644
--- a/packages/website/src/pages/index/group/reply/[id]/edit.tsx
+++ b/packages/website/src/pages/index/group/reply/[id]/edit.tsx
@@ -5,6 +5,7 @@ import { useSWRConfig } from 'swr';
 
 import { ozaClient } from '@bangumi/client';
 import { EditorForm, toast, Typography } from '@bangumi/design';
+import Helmet from '@bangumi/website/components/Helmet';
 import useGroupPost from '@bangumi/website/hooks/use-group-post';
 import { useUser } from '@bangumi/website/hooks/use-user';
 
@@ -65,6 +66,7 @@ const EditReplyPage = () => {
 
   return (
     <>
+      <Helmet title={`修改主题“${data.topicTitle}”的回复`} />
       <Typography.Text type='secondary' className={styles.tipText}>
         修改主题
         <Typography.Link
diff --git a/packages/website/src/pages/index/group/topic/[id]/edit.tsx b/packages/website/src/pages/index/group/topic/[id]/edit.tsx
index 7f7f76c61..0749c758f 100644
--- a/packages/website/src/pages/index/group/topic/[id]/edit.tsx
+++ b/packages/website/src/pages/index/group/topic/[id]/edit.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Typography } from '@bangumi/design';
+import Helmet from '@bangumi/website/components/Helmet';
 import useGroupTopic from '@bangumi/website/hooks/use-group-topic';
 
 import TopicForm from '../../components/TopicForm';
@@ -17,6 +18,7 @@ const EditTopicPage = () => {
 
   return (
     <>
+      <Helmet title={`修改主题“${data.title}”`} />
       <Typography.Text type='secondary' className={styles.tipText}>
         修改主题
         <Typography.Link
diff --git a/packages/website/src/pages/index/group/topic/[id]/index.tsx b/packages/website/src/pages/index/group/topic/[id]/index.tsx
index 02b78beb0..922558239 100644
--- a/packages/website/src/pages/index/group/topic/[id]/index.tsx
+++ b/packages/website/src/pages/index/group/topic/[id]/index.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { Avatar, Button, Layout, RichContent, Topic } from '@bangumi/design';
 import ReplyForm from '@bangumi/design/components/Topic/ReplyForm';
+import Helmet from '@bangumi/website/components/Helmet';
 import { useGroup } from '@bangumi/website/hooks/use-group';
 import useGroupTopic from '@bangumi/website/hooks/use-group-topic';
 import { useUser } from '@bangumi/website/hooks/use-user';
@@ -54,6 +55,7 @@ const TopicPage: FC = () => {
 
   return (
     <>
+      <Helmet title={topicDetail.title} />
       <GroupTopicHeader
         id={topicDetail.id}
         title={topicDetail.title}
diff --git a/packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx b/packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx
index b50d66a5b..8e28bae08 100644
--- a/packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx
+++ b/packages/website/src/pages/index/subject/[id]/wiki/edit_detail.tsx
@@ -19,6 +19,7 @@ import {
   WikiSyntaxError,
 } from '@bangumi/utils';
 import { withErrorBoundary } from '@bangumi/website/components/ErrorBoundary';
+import Helmet from '@bangumi/website/components/Helmet';
 import WikiEditor from '@bangumi/website/components/WikiEditor/WikiEditor';
 import { getWikiTemplate, WikiEditTabsItemsByKey } from '@bangumi/website/shared/wiki';
 
@@ -209,178 +210,181 @@ function WikiEditDetailDetailPage() {
   );
 
   return (
-    <Layout
-      type='alpha'
-      leftChildren={
-        <>
-          <div className={style.title}>修改详细描述</div>
-          <Divider className={style.divider} />
-          <Form labelWidth={120} onSubmit={handleSubmit(onSubmit)} className={style.form}>
-            <Form.Item label='条目名'>
-              <Input
-                type='text'
-                wrapperClass={style.formInput}
-                defaultValue={subjectWikiInfo.name}
-                {...register('subject.name', { required: true })}
-              />
-            </Form.Item>
+    <>
+      <Helmet title={`${subjectWikiInfo.name} 的新描述`} />
+      <Layout
+        type='alpha'
+        leftChildren={
+          <>
+            <div className={style.title}>修改详细描述</div>
+            <Divider className={style.divider} />
+            <Form labelWidth={120} onSubmit={handleSubmit(onSubmit)} className={style.form}>
+              <Form.Item label='条目名'>
+                <Input
+                  type='text'
+                  wrapperClass={style.formInput}
+                  defaultValue={subjectWikiInfo.name}
+                  {...register('subject.name', { required: true })}
+                />
+              </Form.Item>
 
-            {subjectWikiInfo.availablePlatform.length && (
-              <Form.Item label='类型'>
-                <div className='flex-1'>
+              {subjectWikiInfo.availablePlatform.length && (
+                <Form.Item label='类型'>
+                  <div className='flex-1'>
+                    <Radio.Group>
+                      {subjectWikiInfo.availablePlatform.map((type) => (
+                        <Radio
+                          id={type.text}
+                          data-tpl={type.wiki_tpl}
+                          className={style.formRadio}
+                          key={type.id}
+                          label={type.text}
+                          value={type.id}
+                          defaultChecked={subjectWikiInfo.platform === type.id}
+                          {...register('subject.platform', {
+                            required: true,
+                            onChange: handlePlatformChange,
+                          })}
+                        />
+                      ))}
+                    </Radio.Group>
+                    <div className={style.tips}>
+                      注意：切换类型会导致项目顺序发生变化，请先选择好模板再进行排序
+                    </div>
+                  </div>
+                </Form.Item>
+              )}
+
+              <Form.Item label='描述信息'>
+                <div className={style.formDetailInfo}>
                   <Radio.Group>
-                    {subjectWikiInfo.availablePlatform.map((type) => (
+                    {EditorTypeRadio.map((type) => (
                       <Radio
-                        id={type.text}
-                        data-tpl={type.wiki_tpl}
                         className={style.formRadio}
-                        key={type.id}
-                        label={type.text}
-                        value={type.id}
-                        defaultChecked={subjectWikiInfo.platform === type.id}
-                        {...register('subject.platform', {
-                          required: true,
-                          onChange: handlePlatformChange,
-                        })}
+                        key={type.key}
+                        name='editor_mode'
+                        label={type.label}
+                        onClick={() => {
+                          handleSetEditorType(type.key);
+                        }}
+                        checked={editorType === type.key}
+                        readOnly
                       />
                     ))}
                   </Radio.Group>
-                  <div className={style.tips}>
-                    注意：切换类型会导致项目顺序发生变化，请先选择好模板再进行排序
-                  </div>
-                </div>
-              </Form.Item>
-            )}
 
-            <Form.Item label='描述信息'>
-              <div className={style.formDetailInfo}>
-                <Radio.Group>
-                  {EditorTypeRadio.map((type) => (
-                    <Radio
-                      className={style.formRadio}
-                      key={type.key}
-                      name='editor_mode'
-                      label={type.label}
-                      onClick={() => {
-                        handleSetEditorType(type.key);
+                  {/* 入门编辑模式 */}
+                  <div hidden={editorType !== EditorType.Beginner}>
+                    <WikiBeginnerEditor
+                      elements={wikiElement}
+                      onChange={(els) => {
+                        setWikiElement(els);
                       }}
-                      checked={editorType === type.key}
-                      readOnly
                     />
-                  ))}
-                </Radio.Group>
+                  </div>
 
-                {/* 入门编辑模式 */}
-                <div hidden={editorType !== EditorType.Beginner}>
-                  <WikiBeginnerEditor
-                    elements={wikiElement}
-                    onChange={(els) => {
-                      setWikiElement(els);
-                    }}
-                  />
+                  {/* Wiki 编辑模式 */}
+                  <div hidden={editorType !== EditorType.Wiki}>
+                    <WikiEditor instanceRef={monoEditorInstanceRef} />
+                  </div>
                 </div>
+              </Form.Item>
 
-                {/* Wiki 编辑模式 */}
-                <div hidden={editorType !== EditorType.Wiki}>
-                  <WikiEditor instanceRef={monoEditorInstanceRef} />
+              <Form.Item label='剧情介绍'>
+                <textarea
+                  className={style.formTextArea}
+                  defaultValue={subjectWikiInfo.summary}
+                  {...register('subject.summary', { required: true })}
+                />
+              </Form.Item>
+
+              <Form.Item label='受限内容'>
+                <div className={style.formRadio}>
+                  <Radio
+                    id='nsfw'
+                    type='checkbox'
+                    label='标记为受限内容'
+                    defaultChecked={subjectWikiInfo.nsfw}
+                    {...register('subject.nsfw')}
+                  />
                 </div>
-              </div>
-            </Form.Item>
+              </Form.Item>
 
-            <Form.Item label='剧情介绍'>
-              <textarea
-                className={style.formTextArea}
-                defaultValue={subjectWikiInfo.summary}
-                {...register('subject.summary', { required: true })}
-              />
-            </Form.Item>
+              <Form.Item label='编辑摘要'>
+                <Input.Group className={style.formInputGroup}>
+                  <Select
+                    defaultValue='0'
+                    options={BuiltInCommitMessage}
+                    className={style.formSelect}
+                    onChange={(value) => {
+                      setValue('commitMessage', value?.label ?? '');
+                    }}
+                  />
+                  <Input
+                    wrapperClass={style.formInput}
+                    {...register('commitMessage', { required: true })}
+                  />
+                </Input.Group>
+              </Form.Item>
 
-            <Form.Item label='受限内容'>
-              <div className={style.formRadio}>
-                <Radio
-                  id='nsfw'
-                  type='checkbox'
-                  label='标记为受限内容'
-                  defaultChecked={subjectWikiInfo.nsfw}
-                  {...register('subject.nsfw')}
-                />
+              <Button htmlType='submit' color='blue' className={style.formButton}>
+                提交修改
+              </Button>
+            </Form>
+          </>
+        }
+        rightChildren={
+          <div className='flex flex-col'>
+            <div className={style.editorHandbook}>
+              <div className={style.title}>编辑说明</div>
+              <Divider className={style.divider} />
+              <div className={style.editorHandbookContent}>
+                <p>切换类型会导致已编辑项目顺序发生变化，请先选择好类型模板再进行排序</p>
+                <p>可拖拽改变行顺序</p>
+                <p>
+                  欲把一级项目切换为二级，将光标移至「项目名」输入框最右侧即可看到缩进按钮；从二级切换回一级的按钮位于二级项目名左侧
+                </p>
+                <p>
+                  按 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 可将一级项目切换为二级项目
+                </p>
+                <p>
+                  按 <kbd>Ctrl</kbd> + <kbd>X</kbd> 可删除当前行的项目
+                </p>
               </div>
-            </Form.Item>
-
-            <Form.Item label='编辑摘要'>
-              <Input.Group className={style.formInputGroup}>
-                <Select
-                  defaultValue='0'
-                  options={BuiltInCommitMessage}
-                  className={style.formSelect}
-                  onChange={(value) => {
-                    setValue('commitMessage', value?.label ?? '');
-                  }}
-                />
-                <Input
-                  wrapperClass={style.formInput}
-                  {...register('commitMessage', { required: true })}
-                />
-              </Input.Group>
-            </Form.Item>
-
-            <Button htmlType='submit' color='blue' className={style.formButton}>
-              提交修改
-            </Button>
-          </Form>
-        </>
-      }
-      rightChildren={
-        <div className='flex flex-col'>
-          <div className={style.editorHandbook}>
-            <div className={style.title}>编辑说明</div>
-            <Divider className={style.divider} />
-            <div className={style.editorHandbookContent}>
-              <p>切换类型会导致已编辑项目顺序发生变化，请先选择好类型模板再进行排序</p>
-              <p>可拖拽改变行顺序</p>
-              <p>
-                欲把一级项目切换为二级，将光标移至「项目名」输入框最右侧即可看到缩进按钮；从二级切换回一级的按钮位于二级项目名左侧
-              </p>
-              <p>
-                按 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> 可将一级项目切换为二级项目
-              </p>
-              <p>
-                按 <kbd>Ctrl</kbd> + <kbd>X</kbd> 可删除当前行的项目
-              </p>
             </div>
-          </div>
 
-          {/* history */}
-          <div className='flex flex-col'>
-            <div className={style.title}>条目修订历史</div>
-            <Divider className={style.divider} />
-            <div className={style.history}>
-              {subjectEditHistory.map((his, idx) => (
-                <div key={idx} className={style.historyItem}>
-                  <span className={style.historyUserName}>{his.creator.username}</span>
-                  <span className={style.historyMsg} title={his.commitMessage}>
-                    {his.commitMessage}
-                  </span>
-                  <span className={cn(style.historySuffix, style.historyCreateAt)}>
-                    @ {dayjs.unix(his.createdAt).format('YYYY-MM-DD HH:mm')}
-                  </span>
-                  <span className={style.historySuffix}>|</span>
-                  <span className={style.historySuffix}>恢复</span>
-                </div>
-              ))}
-              <Button.Link
-                type='plain'
-                to={WikiEditTabsItemsByKey.history.to(subjectId.toString())}
-                className={style.historyMore}
-              >
-                更多修改记录
-                <ArrowRightCircle />
-              </Button.Link>
+            {/* history */}
+            <div className='flex flex-col'>
+              <div className={style.title}>条目修订历史</div>
+              <Divider className={style.divider} />
+              <div className={style.history}>
+                {subjectEditHistory.map((his, idx) => (
+                  <div key={idx} className={style.historyItem}>
+                    <span className={style.historyUserName}>{his.creator.username}</span>
+                    <span className={style.historyMsg} title={his.commitMessage}>
+                      {his.commitMessage}
+                    </span>
+                    <span className={cn(style.historySuffix, style.historyCreateAt)}>
+                      @ {dayjs.unix(his.createdAt).format('YYYY-MM-DD HH:mm')}
+                    </span>
+                    <span className={style.historySuffix}>|</span>
+                    <span className={style.historySuffix}>恢复</span>
+                  </div>
+                ))}
+                <Button.Link
+                  type='plain'
+                  to={WikiEditTabsItemsByKey.history.to(subjectId.toString())}
+                  className={style.historyMore}
+                >
+                  更多修改记录
+                  <ArrowRightCircle />
+                </Button.Link>
+              </div>
             </div>
           </div>
-        </div>
-      }
-    />
+        }
+      />
+    </>
   );
 }
 
diff --git a/packages/website/src/pages/login/index.tsx b/packages/website/src/pages/login/index.tsx
index 6e2246584..152e7650c 100644
--- a/packages/website/src/pages/login/index.tsx
+++ b/packages/website/src/pages/login/index.tsx
@@ -6,6 +6,7 @@ import { useInput } from 'rooks';
 
 import { Button, Input, Message } from '@bangumi/design';
 import { Password, UserLogin } from '@bangumi/icons';
+import Helmet from '@bangumi/website/components/Helmet';
 
 import {
   CaptureError,
@@ -98,39 +99,42 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className={style.wrapper}>
-      <div className={style.container}>
-        <LoginLogo className={style.logo} />
-        {errorMessage && (
-          <Message type='error' blockWidth>
-            {errorMessage}
-          </Message>
-        )}
-        <Input type='email' prefix={<UserLogin />} placeholder='你的 Email 地址' {...email} />
-        <Input type='password' prefix={<Password />} placeholder='你的登录密码' {...password} />
-        <div className={style.hcaptcha}>
-          <Turnstile
-            options={{
-              theme: 'light',
-              action: 'login',
-            }}
-            siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY}
-            onSuccess={(token: string) => {
-              setCaptchaToken(token);
-            }}
-            ref={captcha}
-          />
-        </div>
-        <div className={style.buttonGroup}>
-          <Button className={style.button} color='gray' disabled>
-            注册新用户
-          </Button>
-          <Button className={style.button} onClick={handleLogin}>
-            登录
-          </Button>
+    <>
+      <Helmet title='登录' />
+      <div className={style.wrapper}>
+        <div className={style.container}>
+          <LoginLogo className={style.logo} />
+          {errorMessage && (
+            <Message type='error' blockWidth>
+              {errorMessage}
+            </Message>
+          )}
+          <Input type='email' prefix={<UserLogin />} placeholder='你的 Email 地址' {...email} />
+          <Input type='password' prefix={<Password />} placeholder='你的登录密码' {...password} />
+          <div className={style.hcaptcha}>
+            <Turnstile
+              options={{
+                theme: 'light',
+                action: 'login',
+              }}
+              siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY}
+              onSuccess={(token: string) => {
+                setCaptchaToken(token);
+              }}
+              ref={captcha}
+            />
+          </div>
+          <div className={style.buttonGroup}>
+            <Button className={style.button} color='gray' disabled>
+              注册新用户
+            </Button>
+            <Button className={style.button} onClick={handleLogin}>
+              登录
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7822384cb..edd28d7e4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -261,6 +261,7 @@ importers:
       react: ^18.2.0
       react-beautiful-dnd: ^13.1.1
       react-dom: ^18.2.0
+      react-helmet-async: ^1.3.0
       react-hook-form: ^7.43.8
       react-router-dom: ^6.9.0
       reset-css: ^5.0.1
@@ -282,6 +283,7 @@ importers:
       react: 18.2.0
       react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y
       react-dom: 18.2.0_react@18.2.0
+      react-helmet-async: 1.3.0_biqbaboplfbrettd7655fr4n2y
       react-hook-form: 7.43.8_react@18.2.0
       react-router-dom: 6.9.0_biqbaboplfbrettd7655fr4n2y
       reset-css: 5.0.1
@@ -10764,6 +10766,12 @@ packages:
     engines: {node: '>= 0.10'}
     dev: true
 
+  /invariant/2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /ip/2.0.0:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: true
@@ -13779,6 +13787,25 @@ packages:
       react-is: 17.0.2
     dev: true
 
+  /react-fast-compare/3.2.1:
+    resolution: {integrity: sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==}
+    dev: false
+
+  /react-helmet-async/1.3.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      invariant: 2.2.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-fast-compare: 3.2.1
+      shallowequal: 1.1.0
+    dev: false
+
   /react-hook-form/7.43.8_react@18.2.0:
     resolution: {integrity: sha512-BQm+Ge5KjTk1EchDBRhdP8Pkb7MArO2jFF+UWYr3rtvh6197khi22uloLqlWeuY02ItlCzPunPsFt1/q9wQKnw==}
     engines: {node: '>=12.22.0'}
@@ -14527,6 +14554,10 @@ packages:
       kind-of: 6.0.3
     dev: true
 
+  /shallowequal/1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+    dev: false
+
   /shebang-command/1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}

From f5b70f3f98a0722a97688a7bd8382b267d0fc4a6 Mon Sep 17 00:00:00 2001
From: yyoung <yyoung2001@gmail.com>
Date: Wed, 29 Mar 2023 14:39:47 +0800
Subject: [PATCH 2/3] fix: test

---
 .../group/[name]/__tests__/members.spec.tsx   | 10 ++++--
 .../components/WikiBeginnerEditor.spec.tsx    |  2 --
 .../website/src/pages/login/index.spec.tsx    | 31 +++++++++----------
 packages/website/src/utils/test-utils.tsx     |  7 ++++-
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/website/src/pages/index/group/[name]/__tests__/members.spec.tsx b/packages/website/src/pages/index/group/[name]/__tests__/members.spec.tsx
index 33d816ba4..839d46cff 100644
--- a/packages/website/src/pages/index/group/[name]/__tests__/members.spec.tsx
+++ b/packages/website/src/pages/index/group/[name]/__tests__/members.spec.tsx
@@ -2,7 +2,7 @@ import type { RenderResult } from '@testing-library/react';
 import { waitFor } from '@testing-library/react';
 import { rest } from 'msw';
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { Outlet, Route, Routes, useParams } from 'react-router-dom';
 
 import type { GroupMember, ResponseWithPagination } from '@bangumi/client/group';
 
@@ -50,7 +50,13 @@ class GroupMembersTest {
       }),
     );
 
-    this.page = renderPage(<GroupMembers />);
+    this.page = renderPage(
+      <Routes>
+        <Route element={<Outlet context={{ groupRet: { group: Sandbox } }} />}>
+          <Route index element={<GroupMembers />} />
+        </Route>
+      </Routes>,
+    );
   }
 
   async assertMembersExist(expectMembers: string[]): Promise<void> {
diff --git a/packages/website/src/pages/index/subject/[id]/components/WikiBeginnerEditor.spec.tsx b/packages/website/src/pages/index/subject/[id]/components/WikiBeginnerEditor.spec.tsx
index 2540d9ec1..501428a26 100644
--- a/packages/website/src/pages/index/subject/[id]/components/WikiBeginnerEditor.spec.tsx
+++ b/packages/website/src/pages/index/subject/[id]/components/WikiBeginnerEditor.spec.tsx
@@ -41,8 +41,6 @@ it('add WikiElement properly', async () => {
   addRootWikiElementBtn.click();
   editor.rerender(<WikiBeginnerEditor elements={res} onChange={onChange} />);
 
-  console.log(res);
-
   expect(res[1]).toBeInstanceOf(WikiElement);
   expect(res[1]?.value?.length).toBe(2);
   expect(res.length).toBe(3);
diff --git a/packages/website/src/pages/login/index.spec.tsx b/packages/website/src/pages/login/index.spec.tsx
index 708031d2c..3eed69959 100644
--- a/packages/website/src/pages/login/index.spec.tsx
+++ b/packages/website/src/pages/login/index.spec.tsx
@@ -1,9 +1,11 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { rest } from 'msw';
 import React from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
-import { UserProvider } from '../../hooks/use-user';
+import { UserProvider } from '@bangumi/website/hooks/use-user';
+
 import { server as mockServer } from '../../mocks/server';
 import LoginPage from '.';
 
@@ -29,6 +31,15 @@ const mockedUseNavigate = vi.mocked(useNavigate);
 const mockedUseLocation = vi.mocked(useLocation);
 const mockedUseSearchParams = vi.mocked(useSearchParams);
 
+const renderLoginPage = () =>
+  render(
+    <HelmetProvider>
+      <UserProvider>
+        <LoginPage />
+      </UserProvider>
+    </HelmetProvider>,
+  );
+
 function mockLogin(
   statusCode: number,
   response: Object = {},
@@ -44,11 +55,7 @@ function mockLogin(
 function mockSuccessfulLogin() {
   mockLogin(200);
 
-  const { getByPlaceholderText, getByText } = render(
-    <UserProvider>
-      <LoginPage />
-    </UserProvider>,
-  );
+  const { getByPlaceholderText, getByText } = renderLoginPage();
   const fakeEmail = 'fake-email';
   const fakePassword = 'fakepassword';
 
@@ -120,11 +127,7 @@ it.each([
   'should show error message when response is $statusCode',
   async ({ statusCode, resp = {}, headers = {}, expectedError }) => {
     mockLogin(statusCode, resp, headers);
-    const { getByPlaceholderText, getByText } = render(
-      <UserProvider>
-        <LoginPage />
-      </UserProvider>,
-    );
+    const { getByPlaceholderText, getByText } = renderLoginPage();
     const fakeEmail = 'fake-email';
     const fakePassword = 'fakepassword';
 
@@ -140,11 +143,7 @@ it.each([
 );
 
 it('should validate user input', async () => {
-  const { getByPlaceholderText, getByText } = render(
-    <UserProvider>
-      <LoginPage />
-    </UserProvider>,
-  );
+  const { getByPlaceholderText, getByText } = renderLoginPage();
 
   fireEvent.click(getByText('登录'));
 
diff --git a/packages/website/src/utils/test-utils.tsx b/packages/website/src/utils/test-utils.tsx
index 867892bfa..95c7a6694 100644
--- a/packages/website/src/utils/test-utils.tsx
+++ b/packages/website/src/utils/test-utils.tsx
@@ -2,13 +2,18 @@ import type { RenderOptions, RenderResult } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { MemoryRouter } from 'react-router-dom';
 
 import { UserProvider } from '../hooks/use-user';
 
+HelmetProvider.canUseDOM = false;
+
 const PageWrapper = ({ children }: PropsWithChildren) => (
   <MemoryRouter>
-    <UserProvider>{children}</UserProvider>
+    <HelmetProvider>
+      <UserProvider>{children}</UserProvider>
+    </HelmetProvider>
   </MemoryRouter>
 );
 

From c2260de43ff7ee0edb57bf3003009f4d24c72d87 Mon Sep 17 00:00:00 2001
From: yyoung <yyoung2001@gmail.com>
Date: Wed, 29 Mar 2023 16:33:03 +0800
Subject: [PATCH 3/3] refactor: group deconstruction

---
 .../website/src/pages/index/group/[name]/new_topic/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/pages/index/group/[name]/new_topic/index.tsx b/packages/website/src/pages/index/group/[name]/new_topic/index.tsx
index 196d5de80..3c5f74ed7 100644
--- a/packages/website/src/pages/index/group/[name]/new_topic/index.tsx
+++ b/packages/website/src/pages/index/group/[name]/new_topic/index.tsx
@@ -12,8 +12,9 @@ import styles from './style.module.less';
 
 const GroupNewTopicPage = () => {
   const { name } = useParams();
-  const { group: groupProfile } = useGroup(name!);
-  const { group } = groupProfile;
+  const {
+    group: { group },
+  } = useGroup(name!);
 
   return (
     <>