feat: able to customize home page now (#24)

web/src/components/OtherSetting.js

@@ -8,6 +8,7 @@ const OtherSetting = () => {
     Footer: '',
     Notice: '',
     About: '',
+    HomePageContent: '',
   });
   let originInputs = {};
   let [loading, setLoading] = useState(false);
@@ -69,6 +70,10 @@ const OtherSetting = () => {
     await updateOption('About', inputs.About);
   };
 
+  const submitOption = async (key) => {
+    await updateOption(key, inputs[key]);
+  };
+
   const openGitHubRelease = () => {
     window.location =
       'https://github.com/songquanpeng/one-api/releases/latest';
@@ -109,6 +114,17 @@ const OtherSetting = () => {
           <Form.Button onClick={submitNotice}>保存公告</Form.Button>
           <Divider />
           <Header as='h3'>个性化设置</Header>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='首页内容'
+              placeholder='在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示'
+              value={inputs.HomePageContent}
+              name='HomePageContent'
+              onChange={handleInputChange}
+              style={{ minHeight: 300, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Button onClick={()=>submitOption('HomePageContent')}>保存首页内容</Form.Button>
           <Form.Group widths='equal'>
             <Form.TextArea
               label='关于'

web/src/pages/Home/index.js

@@ -1,10 +1,12 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Card, Grid, Header, Segment } from 'semantic-ui-react';
 import { API, showError, showNotice, timestamp2string } from '../../helpers';
 import { StatusContext } from '../../context/Status';
+import { marked } from 'marked';
 
 const Home = () => {
   const [statusState, statusDispatch] = useContext(StatusContext);
+  const [homePageContent, setHomePageContent] = useState('');
 
   const displayNotice = async () => {
     const res = await API.get('/api/notice');
@@ -20,6 +22,19 @@ const Home = () => {
     }
   };
 
+  const displayHomePageContent = async () => {
+    const res = await API.get('/api/home_page_content');
+    const { success, message, data } = res.data;
+    if (success) {
+      let HTMLContent = marked.parse(data);
+      localStorage.setItem('home_page_content', HTMLContent);
+      setHomePageContent(HTMLContent);
+    } else {
+      showError(message);
+      setHomePageContent('加载首页内容失败...');
+    }
+  };
+
   const getStartTimeString = () => {
     const timestamp = statusState?.status?.start_time;
     return timestamp2string(timestamp);
@@ -27,69 +42,76 @@ const Home = () => {
 
   useEffect(() => {
     displayNotice().then();
+    displayHomePageContent().then();
   }, []);
   return (
     <>
       <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}</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>
-          </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>
-            </Card>
-          </Grid.Column>
-        </Grid>
+        {
+          homePageContent  === '' ? <>
+          <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}</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>
+            </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>
+              </Card>
+            </Grid.Column>
+          </Grid>
+          </> : <>
+          <div dangerouslySetInnerHTML={{ __html: homePageContent}}></div>
+          </>
+        }
       </Segment>
     </>
   );