feat: able to use any link as about page (#60)

web/src/components/OtherSetting.js

@@ -121,14 +121,14 @@ const OtherSetting = () => {
               value={inputs.HomePageContent}
               name='HomePageContent'
               onChange={handleInputChange}
-              style={{ minHeight: 300, fontFamily: 'JetBrains Mono, Consolas' }}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
             />
           </Form.Group>
           <Form.Button onClick={()=>submitOption('HomePageContent')}>保存首页内容</Form.Button>
           <Form.Group widths='equal'>
             <Form.TextArea
               label='关于'
-              placeholder='在此输入新的关于内容，支持 Markdown & HTML 代码'
+              placeholder='在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'
               value={inputs.About}
               name='About'
               onChange={handleInputChange}

web/src/pages/About/index.js

@@ -12,9 +12,12 @@ const About = () => {
     const res = await API.get('/api/about');
     const { success, message, data } = res.data;
     if (success) {
-      let HTMLAbout = marked.parse(data);
-      setAbout(HTMLAbout);
-      localStorage.setItem('about', HTMLAbout);
+      let aboutContent = data;
+      if (!data.startsWith('https://')) {
+        aboutContent = marked.parse(data);
+      }
+      setAbout(aboutContent);
+      localStorage.setItem('about', aboutContent);
     } else {
       showError(message);
       setAbout('加载关于内容失败...');
@@ -28,20 +31,27 @@ const About = () => {
 
   return (
     <>
-      <Segment>
-        {
-          aboutLoaded && about === '' ? <>
+      {
+        aboutLoaded && about === '' ? <>
+          <Segment>
             <Header as='h3'>关于</Header>
             <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
             项目仓库地址：
-            <a href="https://github.com/songquanpeng/one-api">
+            <a href='https://github.com/songquanpeng/one-api'>
               https://github.com/songquanpeng/one-api
             </a>
-          </> : <>
-            <div dangerouslySetInnerHTML={{ __html: about}}></div>
-          </>
-        }
-      </Segment>
+          </Segment>
+        </> : <>
+          {
+            about.startsWith('https://') ? <iframe
+              src={about}
+              style={{ width: '100%', height: '100vh', border: 'none' }}
+            /> : <Segment>
+              <div style={{ fontSize: 'larger' }} dangerouslySetInnerHTML={{ __html: about }}></div>
+            </Segment>
+          }
+        </>
+      }
     </>
   );
 };