From ac64fd26ad6067621f1ff6ada7d19a0c135f2347 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Sat, 2 Mar 2024 14:56:32 +0800
Subject: [PATCH 1/2] fix: the content displayed on the homepage is incorrect

---
 web/src/pages/Home/index.js | 118 +++++++++++++++++-------------------
 1 file changed, 57 insertions(+), 61 deletions(-)

diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index 6009486..9baed20 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Card, Grid, Header, Segment } from 'semantic-ui-react';
+import { Card, Col, Row } from '@douyinfe/semi-ui';
 import { API, showError, showNotice, timestamp2string } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
@@ -44,7 +44,7 @@ const Home = () => {
 
     const getStartTimeString = () => {
         const timestamp = statusState?.status?.start_time;
-        return timestamp2string(timestamp);
+        return statusState.status ? timestamp2string(timestamp) : '';
     };
 
     useEffect(() => {
@@ -55,67 +55,63 @@ const Home = () => {
         <>
             {
                 homePageContentLoaded && homePageContent === '' ? <>
-                    <Segment>
-                        <Header as='h3'>系统状况</Header>
-                        <Grid columns={2} stackable>
-                            <Grid.Column>
-                                <Card fluid>
-                                    <Card.Content>
-                                        <Card.Header>系统信息</Card.Header>
-                                        <Card.Meta>系统信息总览</Card.Meta>
-                                        <Card.Description>
-                                            <p>名称：{statusState?.status?.system_name}</p>
-                                            <p>版本：{statusState?.status?.version ? statusState?.status?.version : "unknown"}</p>
-                                            <p>
-                                                源码：
-                                                <a
-                                                    href='https://github.com/songquanpeng/one-api'
-                                                    target='_blank'
-                                                >
-                                                    https://github.com/songquanpeng/one-api
-                                                </a>
-                                            </p>
-                                            <p>启动时间：{getStartTimeString()}</p>
-                                        </Card.Description>
-                                    </Card.Content>
+                   <Card
+                        bordered={false}
+                        headerLine={false}
+                        title='系统状况'
+                        bodyStyle={{padding: '10px 20px'}}
+                        >
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <Card
+                                    title='系统信息'
+                                    headerExtraContent={<span style={{ fontSize:'12px', color: 'var(--semi-color-text-1)'}}>系统信息总览</span>}>
+                                      <p>名称：{statusState?.system_name}</p>
+                                      <p>版本：{statusState?.version ? statusState?.version : "unknown"}</p>
+                                      <p>
+                                          源码：
+                                          <a
+                                              href='https://github.com/songquanpeng/one-api'
+                                              target='_blank' rel="noreferrer"
+                                          >
+                                              https://github.com/songquanpeng/one-api
+                                          </a>
+                                      </p>
+                                      <p>启动时间：{getStartTimeString()}</p>
                                 </Card>
-                            </Grid.Column>
-                            <Grid.Column>
-                                <Card fluid>
-                                    <Card.Content>
-                                        <Card.Header>系统配置</Card.Header>
-                                        <Card.Meta>系统配置总览</Card.Meta>
-                                        <Card.Description>
-                                            <p>
-                                                邮箱验证：
-                                                {statusState?.status?.email_verification === true
-                                                    ? '已启用'
-                                                    : '未启用'}
-                                            </p>
-                                            <p>
-                                                GitHub 身份验证：
-                                                {statusState?.status?.github_oauth === true
-                                                    ? '已启用'
-                                                    : '未启用'}
-                                            </p>
-                                            <p>
-                                                微信身份验证：
-                                                {statusState?.status?.wechat_login === true
-                                                    ? '已启用'
-                                                    : '未启用'}
-                                            </p>
-                                            <p>
-                                                Turnstile 用户校验：
-                                                {statusState?.status?.turnstile_check === true
-                                                    ? '已启用'
-                                                    : '未启用'}
-                                            </p>
-                                        </Card.Description>
-                                    </Card.Content>
+                            </Col>
+                            <Col span={12}>
+                                <Card
+                                    title='系统配置'
+                                    headerExtraContent={<span style={{ fontSize:'12px', color: 'var(--semi-color-text-1)'}}>系统配置总览</span>}>
+                                      <p>
+                                          邮箱验证：
+                                          {statusState?.email_verification === true
+                                              ? '已启用'
+                                              : '未启用'}
+                                      </p>
+                                      <p>
+                                          GitHub 身份验证：
+                                          {statusState?.github_oauth === true
+                                              ? '已启用'
+                                              : '未启用'}
+                                      </p>
+                                      <p>
+                                          微信身份验证：
+                                          {statusState?.wechat_login === true
+                                              ? '已启用'
+                                              : '未启用'}
+                                      </p>
+                                      <p>
+                                          Turnstile 用户校验：
+                                          {statusState?.turnstile_check === true
+                                              ? '已启用'
+                                              : '未启用'}
+                                      </p>
                                 </Card>
-                            </Grid.Column>
-                        </Grid>
-                    </Segment>
+                            </Col>
+                        </Row>
+                    </Card>
                 </> : <>
                     {
                         homePageContent.startsWith('https://') ? <iframe

From 5cb933a27829a37820d0850366765ca36ec8eb10 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Mon, 4 Mar 2024 16:39:42 +0800
Subject: [PATCH 2/2] fix: restore the set of StatusContext

---
 web/src/components/SiderBar.js |  4 +++-
 web/src/pages/Home/index.js    | 22 +++++++---------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index 0d72b97..744f82a 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {UserContext} from '../context/User';
+import { StatusContext } from '../context/Status';
 
 import { API, getLogo, getSystemName, isAdmin, isMobile, showError, showSuccess } from '../helpers';
 import '../index.css';
@@ -24,6 +25,7 @@ import {Nav, Avatar, Dropdown, Layout} from '@douyinfe/semi-ui';
 
 const SiderBar = () => {
     const [userState, userDispatch] = useContext(UserContext);
+    const [statusState, statusDispatch] = useContext(StatusContext);
     const defaultIsCollapsed = isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';
 
     let navigate = useNavigate();
@@ -118,7 +120,7 @@ const SiderBar = () => {
         const { success, data } = res.data;
         if (success) {
             localStorage.setItem('status', JSON.stringify(data));
-            // statusDispatch({ type: 'set', payload: data });
+            statusDispatch({ type: 'set', payload: data });
             localStorage.setItem('system_name', data.system_name);
             localStorage.setItem('logo', data.logo);
             localStorage.setItem('footer_html', data.footer_html);
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index 9baed20..4dd3f37 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -5,7 +5,7 @@ import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
 
 const Home = () => {
-    const [statusState, statusDispatch] = useContext(StatusContext);
+    const [statusState] = useContext(StatusContext);
     const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
     const [homePageContent, setHomePageContent] = useState('');
 
@@ -66,8 +66,8 @@ const Home = () => {
                                 <Card
                                     title='系统信息'
                                     headerExtraContent={<span style={{ fontSize:'12px', color: 'var(--semi-color-text-1)'}}>系统信息总览</span>}>
-                                      <p>名称：{statusState?.system_name}</p>
-                                      <p>版本：{statusState?.version ? statusState?.version : "unknown"}</p>
+                                      <p>名称：{statusState?.status?.system_name}</p>
+                                      <p>版本：{statusState?.status?.version ? statusState?.status?.version : "unknown"}</p>
                                       <p>
                                           源码：
                                           <a
@@ -86,27 +86,19 @@ const Home = () => {
                                     headerExtraContent={<span style={{ fontSize:'12px', color: 'var(--semi-color-text-1)'}}>系统配置总览</span>}>
                                       <p>
                                           邮箱验证：
-                                          {statusState?.email_verification === true
-                                              ? '已启用'
-                                              : '未启用'}
+                                          {statusState?.status?.email_verification === true ? '已启用': '未启用'}
                                       </p>
                                       <p>
                                           GitHub 身份验证：
-                                          {statusState?.github_oauth === true
-                                              ? '已启用'
-                                              : '未启用'}
+                                          {statusState?.status?.github_oauth === true ? '已启用' : '未启用'}
                                       </p>
                                       <p>
                                           微信身份验证：
-                                          {statusState?.wechat_login === true
-                                              ? '已启用'
-                                              : '未启用'}
+                                          {statusState?.status?.wechat_login === true ? '已启用' : '未启用'}
                                       </p>
                                       <p>
                                           Turnstile 用户校验：
-                                          {statusState?.turnstile_check === true
-                                              ? '已启用'
-                                              : '未启用'}
+                                          {statusState?.status?.turnstile_check === true ? '已启用' : '未启用'}
                                       </p>
                                 </Card>
                             </Col>