feat: 首页优化

web/src/components/HeaderBar.js

@@ -33,14 +33,6 @@ let headerButtons = [
   },
 ];
 
-let buttons = [
-  {
-    text: '首页',
-    itemKey: 'home',
-    to: '/',
-  },
-];
-
 if (localStorage.getItem('chat_link')) {
   headerButtons.splice(1, 0, {
     name: '聊天',
@@ -64,6 +56,19 @@ const HeaderBar = () => {
       currentDate.getDate() >= 9 &&
       currentDate.getDate() <= 24);
 
+  let buttons = [
+    {
+      text: '首页',
+      itemKey: 'home',
+      to: '/',
+    },
+    {
+      text: '控制台',
+      itemKey: 'detail',
+      to: '/',
+    },
+  ];
+
   async function logout() {
     await API.get('/api/user/logout');
     showSuccess('注销成功!');
@@ -102,21 +107,30 @@ const HeaderBar = () => {
         <div style={{ width: '100%' }}>
           <Nav
             mode={'horizontal'}
-            // bodyStyle={{ height: 100 }}
             renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
               const routerMap = {
                 about: '/about',
                 login: '/login',
                 register: '/register',
+                detail: '/detail',
                 home: '/',
               };
               return (
-                <Link
-                  style={{ textDecoration: 'none' }}
-                  to={routerMap[props.itemKey]}
-                >
-                  {itemElement}
-                </Link>
+                <div onClick={(e) => {
+                  if (props.itemKey === 'home') {
+                    styleDispatch({ type: 'SET_SIDER', payload: true });
+                  } else {
+                    styleDispatch({ type: 'SET_SIDER', payload: false });
+                  }
+                }}>
+                  <Link
+                    className="header-bar-text"
+                    style={{ textDecoration: 'none' }}
+                    to={routerMap[props.itemKey]}
+                  >
+                    {itemElement}
+                  </Link>
+                </div>
               );
             }}
             selectedKeys={[]}
@@ -127,10 +141,10 @@ const HeaderBar = () => {
                 <>
                   {
                     styleState.showSider ?
-                      <Button icon={<IconMenu />} theme="light" style={{ marginRight: 10 }} aria-label="展开侧边栏" onClick={
+                      <Button icon={<IconMenu />} theme="light" aria-label="展开侧边栏" onClick={
                         () => styleDispatch({ type: 'SET_SIDER', payload: false })
                       } />:
-                      <Button icon={<IconIndentLeft />} theme="light" style={{ marginRight: 10 }} aria-label="关闭侧边栏" onClick={
+                      <Button icon={<IconIndentLeft />} theme="light" aria-label="关闭侧边栏" onClick={
                         () => styleDispatch({ type: 'SET_SIDER', payload: true })
                       } />
                   }

web/src/index.css

@@ -17,6 +17,10 @@ body {
   flex-direction: column;
 }
 
+#root > section > header > section > div > div > div > div.semi-navigation-header-list-outer > div.semi-navigation-list-wrapper > ul > div > a > li > span{
+  font-weight: 600 !important;
+}
+
 @media only screen and (max-width: 767px) {
   .semi-table-tbody,
   .semi-table-row,
@@ -39,6 +43,10 @@ body {
     row-gap: 3px;
     column-gap: 10px;
   }
+
+  .semi-navigation-horizontal .semi-navigation-header {
+    margin-right: 0;
+  }
 }
 
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {

web/src/pages/Home/index.js

@@ -3,11 +3,13 @@ import { Card, Col, Row } from '@douyinfe/semi-ui';
 import { API, showError, showNotice, timestamp2string } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
+import { StyleContext } from '../../context/Style/index.js';
 
 const Home = () => {
   const [statusState] = useContext(StatusContext);
   const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
   const [homePageContent, setHomePageContent] = useState('');
+  const [styleState, styleDispatch] = useContext(StyleContext);
 
   const displayNotice = async () => {
     const res = await API.get('/api/notice');