refactor: optimize page layout for enhanced user experience

Author: fecommunity

client/pages/knowledge/[pId]/index.tsx

@@ -1,5 +1,4 @@
 import { RightOutlined } from '@ant-design/icons';
-import { Footer } from '@components/Footer';
 import { Breadcrumb, Button } from 'antd';
 import cls from 'classnames';
 import { NextPage } from 'next';
@@ -144,7 +143,6 @@ const Page: NextPage<IProps> = ({ pId, book, otherBooks = [] }) => {
         }
         isRightNodeMobileHidden={false}
       />
-      <Footer className={style.footer} setting={setting} />
     </div>
   );
 };
@@ -163,7 +161,7 @@ Page.getInitialProps = async (ctx) => {
     pId,
     book,
     otherBooks: allBooks.filter((b) => b.id !== book.id),
-    needLayoutFooter: false,
+    needLayoutFooter: true,
     hasBg: true,
   };
 };

client/pages/knowledge/index.tsx

@@ -11,9 +11,6 @@ import { GlobalContext } from '@/context/global';
 import { DoubleColumnLayout } from '@/layout/DoubleColumnLayout';
 import { KnowledgeProvider } from '@/providers/knowledge';
 
-import { Footer } from '@/components/Footer';
-import styles from '../index.module.scss';
-
 interface IHomeProps {
   books: IKnowledge[];
   total: number;
@@ -43,36 +40,33 @@ const Page: NextPage<IHomeProps> = ({ books: defaultBooks = [], total = 0 }) =>
   }, []);
 
   return (
-    <>
-      <DoubleColumnLayout
-        leftNode={
-          <>
-            <Helmet>
-              <title>{`${t('knowledge')} - ${setting.systemTitle}`}</title>
-            </Helmet>
-            <InfiniteScroll
-              pageStart={1}
-              loadMore={getArticles}
-              hasMore={page * pageSize < total}
-              loader={
-                <div className={'loading'} key={0}>
-                  {t('gettingKnowledge')}
-                </div>
-              }
-            >
-              <KnowledgeList knowledges={books} />
-            </InfiniteScroll>
-          </>
-        }
-        rightNode={
-          <div className={'sticky'}>
-            <ArticleRecommend mode="inline" />
-            <Categories categories={categories} />
-          </div>
-        }
-      />
-      <Footer className={styles.footer} setting={setting} />
-    </>
+    <DoubleColumnLayout
+      leftNode={
+        <>
+          <Helmet>
+            <title>{`${t('knowledge')} - ${setting.systemTitle}`}</title>
+          </Helmet>
+          <InfiniteScroll
+            pageStart={1}
+            loadMore={getArticles}
+            hasMore={page * pageSize < total}
+            loader={
+              <div className={'loading'} key={0}>
+                {t('gettingKnowledge')}
+              </div>
+            }
+          >
+            <KnowledgeList knowledges={books} />
+          </InfiniteScroll>
+        </>
+      }
+      rightNode={
+        <div className={'sticky'}>
+          <ArticleRecommend mode="inline" />
+          <Categories categories={categories} />
+        </div>
+      }
+    />
   );
 };
 
@@ -86,7 +80,7 @@ Page.getInitialProps = async () => {
   return {
     books,
     total,
-    needLayoutFooter: false,
+    needLayoutFooter: true,
   };
 };
 

client/src/components/AboutUs/index.tsx

@@ -112,26 +112,24 @@ export const ContactInfo = () => {
 const AboutUs = ({ setting, className = '', hasBg = false }: IProps) => {
   const t = useTranslations();
   return (
-    <footer>
-      <Card title={t('aboutUs')} className={style.card}>
-        <div className={style.wrapper}>
-          {setting?.systemFooterInfo && (
-            <div
-              className={style.copyright}
-              dangerouslySetInnerHTML={{
-                __html: setting.systemFooterInfo,
-              }}
-            ></div>
-          )}
-          <div className={cls(style.footer, className, hasBg && style.hasBg)}>
-            <div className={style.container}>
-              <Divider dashed />
-              <ContactInfo />
-            </div>
+    <Card title={t('aboutUs')} className={style.card}>
+      <div className={style.wrapper}>
+        {setting?.systemFooterInfo && (
+          <div
+            className={style.copyright}
+            dangerouslySetInnerHTML={{
+              __html: setting.systemFooterInfo,
+            }}
+          ></div>
+        )}
+        <div className={cls(style.footer, className, hasBg && style.hasBg)}>
+          <div className={style.container}>
+            <Divider dashed />
+            <ContactInfo />
           </div>
         </div>
-      </Card>
-    </footer>
+      </div>
+    </Card>
   );
 };
 

client/src/components/Footer/index.tsx

@@ -2,13 +2,15 @@ import { ContactInfo } from '@/components/AboutUs';
 import cls from 'classnames';
 
 import style from './index.module.scss';
+import { useTranslations } from 'next-intl';
 
 export const Footer = ({ setting, className = '', hasBg = false }) => {
+  const t = useTranslations();
   return (
     <footer className={cls(style.footer, className, hasBg && style.hasBg)}>
       <div className={cls('container', style.container)}>
         <ul className={style.left}>
-          <span className={style.title}>关于我们</span>
+          <span className={style.title}>{t('aboutUs')}</span>
           {setting && setting.systemFooterInfo && (
             <div
               className={style.copyright}