chore: update default theme style

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Header, Segment } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 
@@ -7,52 +7,40 @@ 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 === '' ? <>
-          <Segment>
-            <Header as='h3'>关于</Header>
               <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
               项目仓库地址：
               <a href='https://github.com/songquanpeng/one-api'>
                 https://github.com/songquanpeng/one-api
               </a>
-          </Segment>
+            </>
-        </> : <>
+          ) : (
-          {
+            <>
-            about.startsWith('https://') ? <iframe
+              {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>
   );
 };
 
-
 export default About;

web/default/src/pages/Dashboard/Dashboard.css

@@ -84,3 +84,27 @@
         padding: 0.25rem !important;
     }
 }
+
+/* 设置页面的 Tab 样式 */
+.settings-tab {
+    margin-top: 1rem !important;
+    border-bottom: none !important;
+}
+
+.settings-tab .item {
+    color: #2B3674 !important;
+    font-weight: 500 !important;
+    padding: 0.8rem 1.2rem !important;
+}
+
+.settings-tab .active.item {
+    color: #4318FF !important;
+    font-weight: 600 !important;
+    border-color: #4318FF !important;
+}
+
+.ui.tab.segment {
+    border: none !important;
+    box-shadow: none !important;
+    padding: 1rem 0 !important;
+} 

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

@@ -1,11 +1,16 @@
 import React from 'react';
-import { Header, Segment } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import LogsTable from '../../components/LogsTable';
 
-const Token = () => (
+const Log = () => (
-  <>
+  <div className='dashboard-container'>
+    <Card fluid className='chart-card'>
+      <Card.Content>
+        <Card.Header className='header'>操作日志</Card.Header>
         <LogsTable />
-  </>
+      </Card.Content>
+    </Card>
+  </div>
 );
 
-export default Token;
+export default Log;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Segment, Tab } from 'semantic-ui-react';
+import { Card, Tab } from 'semantic-ui-react';
 import SystemSetting from '../../components/SystemSetting';
 import { isRoot } from '../../helpers';
 import OtherSetting from '../../components/OtherSetting';
@@ -14,8 +14,8 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <PersonalSetting />
         </Tab.Pane>
-      )
+      ),
-    }
+    },
   ];
 
   if (isRoot()) {
@@ -25,7 +25,7 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <OperationSetting />
         </Tab.Pane>
-      )
+      ),
     });
     panes.push({
       menuItem: '系统设置',
@@ -33,7 +33,7 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <SystemSetting />
         </Tab.Pane>
-      )
+      ),
     });
     panes.push({
       menuItem: '其他设置',
@@ -41,14 +41,26 @@ const Setting = () => {
         <Tab.Pane attached={false}>
           <OtherSetting />
         </Tab.Pane>
-      )
+      ),
     });
   }
 
   return (
-    <Segment>
+    <div className='dashboard-container'>
-      <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+      <Card fluid className='chart-card'>
-    </Segment>
+        <Card.Content>
+          <Card.Header className='header'>系统设置</Card.Header>
+          <Tab
+            menu={{
+              secondary: true,
+              pointing: true,
+              className: 'settings-tab', // 添加自定义类名以便样式化
+            }}
+            panes={panes}
+          />
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Segment, Statistic } from 'semantic-ui-react';
+import { Button, Form, Grid, Header, Card, Statistic } from 'semantic-ui-react';
 import { API, showError, showInfo, showSuccess } from '../../helpers';
 import { renderQuota } from '../../helpers/render';
 
@@ -12,13 +12,13 @@ const TopUp = () => {
 
   const topUp = async () => {
     if (redemptionCode === '') {
-      showInfo('请输入充值码！')
+      showInfo('请输入充值码！');
       return;
     }
     setIsSubmitting(true);
     try {
       const res = await API.post('/api/user/topup', {
-        key: redemptionCode
+        key: redemptionCode,
       });
       const { success, message, data } = res.data;
       if (success) {
@@ -52,16 +52,16 @@ const TopUp = () => {
     window.open(url.toString(), '_blank');
   };
 
-  const getUserQuota = async ()=>{
+  const getUserQuota = async () => {
     let res = await API.get(`/api/user/self`);
-    const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
       setUserQuota(data.quota);
       setUser(data);
     } else {
       showError(message);
     }
-  }
+  };
 
   useEffect(() => {
     let status = localStorage.getItem('status');
@@ -75,8 +75,10 @@ const TopUp = () => {
   }, []);
 
   return (
-    <Segment>
+    <div className='dashboard-container'>
-      <Header as='h3'>充值额度</Header>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>充值额度</Card.Header>
           <Grid columns={2} stackable>
             <Grid.Column>
               <Form>
@@ -105,7 +107,9 @@ const TopUp = () => {
               </Statistic.Group>
             </Grid.Column>
           </Grid>
-    </Segment>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };