fix: fix about page

Dockerfile

@@ -17,6 +17,7 @@ RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat /web/default/VERSION) n
 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,39 +7,58 @@ 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 (
-    <div className='dashboard-container'>
-      <Card fluid className='chart-card'>
-        <Card.Content>
-          <Card.Header className='header'>关于系统</Card.Header>
-          {aboutLoaded && about === '' ? (
-            <>
+    <>
+      {aboutLoaded && about === '' ? (
+        <div className='dashboard-container'>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header className='header'>关于系统</Card.Header>
               <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://') ? (
+            <iframe
+              src={about}
+              style={{ width: '100%', height: '100vh', border: 'none' }}
+            />
           ) : (
-            <>
-              {about.startsWith('https://') ? (
-                <iframe
-                  src={about}
-                  style={{ width: '100%', height: '100vh', border: 'none' }}
-                />
-              ) : (
-                <div
-                  style={{ fontSize: 'larger' }}
-                  dangerouslySetInnerHTML={{ __html: about }}
-                ></div>
-              )}
-            </>
+            <div
+              style={{ fontSize: 'larger' }}
+              dangerouslySetInnerHTML={{ __html: about }}
+            ></div>
           )}
-        </Card.Content>
-      </Card>
-    </div>
+        </>
+      )}
+    </>
   );
 };