fix: fix about page

Dockerfile

@@ -4,21 +4,20 @@ WORKDIR /web
 COPY ./VERSION .
 COPY ./web .
 
-WORKDIR /web/default
-RUN npm install
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+RUN npm install --prefix /web/default & \
+    npm install --prefix /web/berry & \
+    npm install --prefix /web/air & \
+    wait
 
-WORKDIR /web/berry
-RUN npm install
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
-
-WORKDIR /web/air
-RUN npm install
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/default/VERSION) npm run build --prefix /web/default & \
+    DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/berry/VERSION) npm run build --prefix /web/berry & \
+    DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/air/VERSION) npm run build --prefix /web/air & \
+    wait
 
 FROM golang:alpine AS builder2
 
 RUN apk add --no-cache g++
+RUN apk add --no-cache gcc musl-dev libc-dev sqlite-dev
 
 ENV GO111MODULE=on \
     CGO_ENABLED=1 \

web/default/src/pages/About/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Card } from 'semantic-ui-react';
+import { Card, Header, Segment } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 
@@ -7,21 +7,42 @@ const About = () => {
   const [about, setAbout] = useState('');
   const [aboutLoaded, setAboutLoaded] = useState(false);
 
-  // ... 其他函数保持不变 ...
+  const displayAbout = async () => {
+    setAbout(localStorage.getItem('about') || '');
+    const res = await API.get('/api/about');
+    const { success, message, data } = res.data;
+    if (success) {
+      let aboutContent = data;
+      if (!data.startsWith('https://')) {
+        aboutContent = marked.parse(data);
+      }
+      setAbout(aboutContent);
+      localStorage.setItem('about', aboutContent);
+    } else {
+      showError(message);
+      setAbout('加载关于内容失败...');
+    }
+    setAboutLoaded(true);
+  };
 
+  useEffect(() => {
+    displayAbout().then();
+  }, []);
   return (
+    <>
+      {aboutLoaded && about === '' ? (
         <div className='dashboard-container'>
           <Card fluid className='chart-card'>
             <Card.Content>
               <Card.Header className='header'>关于系统</Card.Header>
-          {aboutLoaded && about === '' ? (
-            <>
               <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
               项目仓库地址：
               <a href='https://github.com/songquanpeng/one-api'>
                 https://github.com/songquanpeng/one-api
               </a>
-            </>
+            </Card.Content>
+          </Card>
+        </div>
       ) : (
         <>
           {about.startsWith('https://') ? (
@@ -37,9 +58,7 @@ const About = () => {
           )}
         </>
       )}
-        </Card.Content>
-      </Card>
-    </div>
+    </>
   );
 };
 

web/default/src/pages/Home/index.js

@@ -56,6 +56,8 @@ const Home = () => {
   }, []);
 
   return (
+    <>
+      {homePageContentLoaded && homePageContent === '' ? (
         <div className='dashboard-container'>
           <Card fluid className='chart-card'>
             <Card.Content>
@@ -63,7 +65,8 @@ const Home = () => {
               <Card.Description style={{ lineHeight: '1.6' }}>
                 <p>
                   One API 是一个 LLM API
-              接口管理和分发系统，可以帮助您更好地管理和使用各大厂商的 LLM API。
+                  接口管理和分发系统，可以帮助您更好地管理和使用各大厂商的 LLM
+                  API。
                 </p>
                 {!userState.user && (
                   <p>
@@ -74,8 +77,6 @@ const Home = () => {
               </Card.Description>
             </Card.Content>
           </Card>
-
-      {homePageContentLoaded && homePageContent === '' ? (
           <Card fluid className='chart-card'>
             <Card.Content>
               <Card.Header>
@@ -117,7 +118,9 @@ const Home = () => {
                         >
                           <i className='code branch icon'></i>
                           <span style={{ fontWeight: 'bold' }}>版本：</span>
-                        <span>{statusState?.status?.version || 'unknown'}</span>
+                          <span>
+                            {statusState?.status?.version || 'unknown'}
+                          </span>
                         </p>
                         <p
                           style={{
@@ -267,7 +270,8 @@ const Home = () => {
                 </Grid.Column>
               </Grid>
             </Card.Content>
-        </Card>
+          </Card>{' '}
+        </div>
       ) : (
         <>
           {homePageContent.startsWith('https://') ? (
@@ -283,7 +287,7 @@ const Home = () => {
           )}
         </>
       )}
-    </div>
+    </>
   );
 };