Merge branch 'main' into pr

web/src/components/Footer.js

@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getFooterHTML, getSystemName } from '../helpers';
 import { Layout, Tooltip } from '@douyinfe/semi-ui';
+import { StyleContext } from '../context/Style/index.js';
 
 const FooterBar = () => {
   const { t } = useTranslation();
   const systemName = getSystemName();
   const [footer, setFooter] = useState(getFooterHTML());
+  const [styleState] = useContext(StyleContext);
   let remainCheckTimes = 5;
 
   const loadFooter = () => {
@@ -26,11 +28,7 @@ const FooterBar = () => {
         New API {import.meta.env.VITE_REACT_APP_VERSION}{' '}
       </a>
       {t('由')}{' '}
-      <a
-        href='https://github.com/Calcium-Ion'
-        target='_blank'
-        rel='noreferrer'
-      >
+      <a href='https://github.com/Calcium-Ion' target='_blank' rel='noreferrer'>
         Calcium-Ion
       </a>{' '}
       {t('开发，基于')}{' '}
@@ -57,7 +55,12 @@ const FooterBar = () => {
   }, []);
 
   return (
-    <div style={{ textAlign: 'center' }}>
+    <div
+      style={{
+        textAlign: 'center',
+        paddingBottom: '5px',
+      }}
+    >
       {footer ? (
         <div
           className='custom-footer'

web/src/components/HeaderBar.js

@@ -13,20 +13,101 @@ import {
   IconClose,
   IconHelpCircle,
   IconHome,
-  IconHomeStroked, IconIndentLeft,
+  IconHomeStroked,
+  IconIndentLeft,
   IconComment,
-  IconKey, IconMenu,
+  IconKey,
+  IconMenu,
   IconNoteMoneyStroked,
   IconPriceTag,
   IconUser,
-  IconLanguage
+  IconLanguage,
+  IconInfoCircle,
+  IconCreditCard,
+  IconTerminal,
 } from '@douyinfe/semi-icons';
-import { Avatar, Button, Dropdown, Layout, Nav, Switch, Tag } from '@douyinfe/semi-ui';
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  Layout,
+  Nav,
+  Switch,
+  Tag,
+} from '@douyinfe/semi-ui';
 import { stringToColor } from '../helpers/render';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import { StyleContext } from '../context/Style/index.js';
 import { StatusContext } from '../context/Status/index.js';
 
+// 自定义顶部栏样式
+const headerStyle = {
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+  borderBottom: '1px solid var(--semi-color-border)',
+  background: 'var(--semi-color-bg-0)',
+  transition: 'all 0.3s ease',
+  width: '100%',
+};
+
+// 自定义顶部栏按钮样式
+const headerItemStyle = {
+  borderRadius: '4px',
+  margin: '0 4px',
+  transition: 'all 0.3s ease',
+};
+
+// 自定义顶部栏按钮悬停样式
+const headerItemHoverStyle = {
+  backgroundColor: 'var(--semi-color-primary-light-default)',
+  color: 'var(--semi-color-primary)',
+};
+
+// 自定义顶部栏Logo样式
+const logoStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '0 10px',
+  height: '100%',
+};
+
+// 自定义顶部栏系统名称样式
+const systemNameStyle = {
+  fontWeight: 'bold',
+  fontSize: '18px',
+  background:
+    'linear-gradient(45deg, var(--semi-color-primary), var(--semi-color-secondary))',
+  WebkitBackgroundClip: 'text',
+  WebkitTextFillColor: 'transparent',
+  padding: '0 5px',
+};
+
+// 自定义顶部栏按钮图标样式
+const headerIconStyle = {
+  fontSize: '18px',
+  transition: 'all 0.3s ease',
+};
+
+// 自定义头像样式
+const avatarStyle = {
+  margin: '4px',
+  cursor: 'pointer',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+  transition: 'all 0.3s ease',
+};
+
+// 自定义下拉菜单样式
+const dropdownStyle = {
+  borderRadius: '8px',
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+  overflow: 'hidden',
+};
+
+// 自定义主题切换开关样式
+const switchStyle = {
+  margin: '0 8px',
+};
+
 const HeaderBar = () => {
   const { t, i18n } = useTranslation();
   const [userState, userDispatch] = useContext(UserContext);
@@ -39,8 +120,7 @@ const HeaderBar = () => {
   const logo = getLogo();
   const currentDate = new Date();
   // enable fireworks on new year(1.1 and 2.9-2.24)
-  const isNewYear =
-    (currentDate.getMonth() === 0 && currentDate.getDate() === 1);
+  const isNewYear = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
 
   // Check if self-use mode is enabled
   const isSelfUseMode = statusState?.status?.self_use_mode_enabled || false;
@@ -52,28 +132,37 @@ const HeaderBar = () => {
       text: t('首页'),
       itemKey: 'home',
       to: '/',
+      icon: <IconHome style={headerIconStyle} />,
     },
     {
       text: t('控制台'),
       itemKey: 'detail',
       to: '/',
+      icon: <IconTerminal style={headerIconStyle} />,
     },
     {
       text: t('定价'),
       itemKey: 'pricing',
       to: '/pricing',
+      icon: <IconPriceTag style={headerIconStyle} />,
     },
     // Only include the docs button if docsLink exists
-    ...(docsLink ? [{
-      text: t('文档'),
-      itemKey: 'docs',
-      isExternal: true,
-      externalLink: docsLink,
-    }] : []),
+    ...(docsLink
+      ? [
+          {
+            text: t('文档'),
+            itemKey: 'docs',
+            isExternal: true,
+            externalLink: docsLink,
+            icon: <IconHelpCircle style={headerIconStyle} />,
+          },
+        ]
+      : []),
     {
       text: t('关于'),
       itemKey: 'about',
       to: '/about',
+      icon: <IconInfoCircle style={headerIconStyle} />,
     },
   ];
 
@@ -143,6 +232,9 @@ const HeaderBar = () => {
           <Nav
             className={'topnav'}
             mode={'horizontal'}
+            style={headerStyle}
+            itemStyle={headerItemStyle}
+            hoverStyle={headerItemHoverStyle}
             renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
               const routerMap = {
                 about: '/about',
@@ -154,30 +246,38 @@ const HeaderBar = () => {
                 chat: '/chat',
               };
               return (
-                <div onClick={(e) => {
-                  if (props.itemKey === 'home') {
-                    styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
-                    styleDispatch({ type: 'SET_SIDER', payload: false });
-                  } else {
-                    styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
-                    if (!styleState.isMobile) {
-                      styleDispatch({ type: 'SET_SIDER', payload: true });
+                <div
+                  onClick={(e) => {
+                    if (props.itemKey === 'home') {
+                      styleDispatch({
+                        type: 'SET_INNER_PADDING',
+                        payload: false,
+                      });
+                      styleDispatch({ type: 'SET_SIDER', payload: false });
+                    } else {
+                      styleDispatch({
+                        type: 'SET_INNER_PADDING',
+                        payload: true,
+                      });
+                      if (!styleState.isMobile) {
+                        styleDispatch({ type: 'SET_SIDER', payload: true });
+                      }
                     }
-                  }
-                }}>
+                  }}
+                >
                   {props.isExternal ? (
                     <a
-                      className="header-bar-text"
+                      className='header-bar-text'
                       style={{ textDecoration: 'none' }}
                       href={props.externalLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
+                      target='_blank'
+                      rel='noopener noreferrer'
                     >
                       {itemElement}
                     </a>
                   ) : (
                     <Link
-                      className="header-bar-text"
+                      className='header-bar-text'
                       style={{ textDecoration: 'none' }}
                       to={routerMap[props.itemKey]}
                     >
@@ -190,65 +290,98 @@ const HeaderBar = () => {
             selectedKeys={[]}
             // items={headerButtons}
             onSelect={(key) => {}}
-            header={styleState.isMobile?{
-              logo: (
-                <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
-                  {
-                    !styleState.showSider ?
-                      <Button icon={<IconMenu />} theme="light" aria-label={t('展开侧边栏')} onClick={
-                        () => styleDispatch({ type: 'SET_SIDER', payload: true })
-                      } />:
-                      <Button icon={<IconIndentLeft />} theme="light" aria-label={t('闭侧边栏')} onClick={
-                        () => styleDispatch({ type: 'SET_SIDER', payload: false })
-                      } />
+            header={
+              styleState.isMobile
+                ? {
+                    logo: (
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          position: 'relative',
+                        }}
+                      >
+                        {!styleState.showSider ? (
+                          <Button
+                            icon={<IconMenu />}
+                            theme='light'
+                            aria-label={t('展开侧边栏')}
+                            onClick={() =>
+                              styleDispatch({
+                                type: 'SET_SIDER',
+                                payload: true,
+                              })
+                            }
+                          />
+                        ) : (
+                          <Button
+                            icon={<IconIndentLeft />}
+                            theme='light'
+                            aria-label={t('闭侧边栏')}
+                            onClick={() =>
+                              styleDispatch({
+                                type: 'SET_SIDER',
+                                payload: false,
+                              })
+                            }
+                          />
+                        )}
+                        {(isSelfUseMode || isDemoSiteMode) && (
+                          <Tag
+                            color={isSelfUseMode ? 'purple' : 'blue'}
+                            style={{
+                              position: 'absolute',
+                              top: '-8px',
+                              right: '-15px',
+                              fontSize: '0.7rem',
+                              padding: '0 4px',
+                              height: 'auto',
+                              lineHeight: '1.2',
+                              zIndex: 1,
+                              pointerEvents: 'none',
+                            }}
+                          >
+                            {isSelfUseMode ? t('自用模式') : t('演示站点')}
+                          </Tag>
+                        )}
+                      </div>
+                    ),
                   }
-                  {(isSelfUseMode || isDemoSiteMode) && (
-                    <Tag 
-                      color={isSelfUseMode ? 'purple' : 'blue'}
-                      style={{ 
-                        position: 'absolute',
-                        top: '-8px',
-                        right: '-15px',
-                        fontSize: '0.7rem',
-                        padding: '0 4px',
-                        height: 'auto',
-                        lineHeight: '1.2',
-                        zIndex: 1,
-                        pointerEvents: 'none'
-                      }}
-                    >
-                      {isSelfUseMode ? t('自用模式') : t('演示站点')}
-                    </Tag>
-                  )}
-                </div>
-              ),
-            }:{
-              logo: (
-                <img src={logo} alt='logo' />
-              ),
-              text: (
-                <div style={{ position: 'relative', display: 'inline-block' }}>
-                  {systemName}
-                  {(isSelfUseMode || isDemoSiteMode) && (
-                    <Tag 
-                      color={isSelfUseMode ? 'purple' : 'blue'}
-                      style={{ 
-                        position: 'absolute', 
-                        top: '-10px', 
-                        right: '-25px', 
-                        fontSize: '0.7rem',
-                        padding: '0 4px',
-                        whiteSpace: 'nowrap',
-                        zIndex: 1,
-                        boxShadow: '0 0 3px rgba(255, 255, 255, 0.7)'
-                      }}
-                    >
-                      {isSelfUseMode ? t('自用模式') : t('演示站点')}
-                    </Tag>
-                  )}
-                </div>
-              ),
-            }}
+                : {
+                    logo: (
+                      <div style={logoStyle}>
+                        <img src={logo} alt='logo' style={{ height: '28px' }} />
+                      </div>
+                    ),
+                    text: (
+                      <div
+                        style={{
+                          position: 'relative',
+                          display: 'inline-block',
+                        }}
+                      >
+                        <span style={systemNameStyle}>{systemName}</span>
+                        {(isSelfUseMode || isDemoSiteMode) && (
+                          <Tag
+                            color={isSelfUseMode ? 'purple' : 'blue'}
+                            style={{
+                              position: 'absolute',
+                              top: '-10px',
+                              right: '-25px',
+                              fontSize: '0.7rem',
+                              padding: '0 4px',
+                              whiteSpace: 'nowrap',
+                              zIndex: 1,
+                              boxShadow: '0 0 3px rgba(255, 255, 255, 0.7)',
+                            }}
+                          >
+                            {isSelfUseMode ? t('自用模式') : t('演示站点')}
+                          </Tag>
+                        )}
+                      </div>
+                    ),
+                  }
+            }
             items={buttons}
             footer={
               <>
@@ -257,7 +390,7 @@ const HeaderBar = () => {
                   <Dropdown
                     position='bottomRight'
                     render={
-                      <Dropdown.Menu>
+                      <Dropdown.Menu style={dropdownStyle}>
                         <Dropdown.Item onClick={handleNewYearClick}>
                           Happy New Year!!!
                         </Dropdown.Item>
@@ -271,9 +404,10 @@ const HeaderBar = () => {
                 <>
                   <Switch
                     checkedText='🌞'
-                    size={styleState.isMobile?'default':'large'}
+                    size={styleState.isMobile ? 'default' : 'large'}
                     checked={theme === 'dark'}
                     uncheckedText='🌙'
+                    style={switchStyle}
                     onChange={(checked) => {
                       setTheme(checked);
                     }}
@@ -282,7 +416,7 @@ const HeaderBar = () => {
                 <Dropdown
                   position='bottomRight'
                   render={
-                    <Dropdown.Menu>
+                    <Dropdown.Menu style={dropdownStyle}>
                       <Dropdown.Item
                         onClick={() => handleLanguageChange('zh')}
                         type={currentLang === 'zh' ? 'primary' : 'tertiary'}
@@ -300,7 +434,7 @@ const HeaderBar = () => {
                 >
                   <Nav.Item
                     itemKey={'language'}
-                    icon={<IconLanguage />}
+                    icon={<IconLanguage style={headerIconStyle} />}
                   />
                 </Dropdown>
                 {userState.user ? (
@@ -308,27 +442,33 @@ const HeaderBar = () => {
                     <Dropdown
                       position='bottomRight'
                       render={
-                        <Dropdown.Menu>
-                          <Dropdown.Item onClick={logout}>{t('退出')}</Dropdown.Item>
+                        <Dropdown.Menu style={dropdownStyle}>
+                          <Dropdown.Item onClick={logout}>
+                            {t('退出')}
+                          </Dropdown.Item>
                         </Dropdown.Menu>
                       }
                     >
                       <Avatar
                         size='small'
                         color={stringToColor(userState.user.username)}
-                        style={{ margin: 4 }}
+                        style={avatarStyle}
                       >
                         {userState.user.username[0]}
                       </Avatar>
-                      {styleState.isMobile?null:<Text>{userState.user.username}</Text>}
+                      {styleState.isMobile ? null : (
+                        <Text style={{ marginLeft: '4px', fontWeight: '500' }}>
+                          {userState.user.username}
+                        </Text>
+                      )}
                     </Dropdown>
                   </>
                 ) : (
                   <>
                     <Nav.Item
                       itemKey={'login'}
-                      text={!styleState.isMobile?t('登录'):null}
-                      icon={<IconUser />}
+                      text={!styleState.isMobile ? t('登录') : null}
+                      icon={<IconUser style={headerIconStyle} />}
                     />
                     {
                       // Hide register option in self-use mode
@@ -336,7 +476,7 @@ const HeaderBar = () => {
                         <Nav.Item
                           itemKey={'register'}
                           text={t('注册')}
-                          icon={<IconKey />}
+                          icon={<IconKey style={headerIconStyle} />}
                         />
                       )
                     }

web/src/components/LinuxDoIcon.js

@@ -6,17 +6,27 @@ const LinuxDoIcon = (props) => {
     return (
       <svg
         className='icon'
-        viewBox='0 0 24 24'
+        viewBox='0 0 16 16'
         version='1.1'
         xmlns='http://www.w3.org/2000/svg'
         width='1em'
         height='1em'
         {...props}
       >
-        <path
-          d='M19.7,17.6c-0.1-0.2-0.2-0.4-0.2-0.6c0-0.4-0.2-0.7-0.5-1c-0.1-0.1-0.3-0.2-0.4-0.2c0.6-1.8-0.3-3.6-1.3-4.9c0,0,0,0,0,0c-0.8-1.2-2-2.1-1.9-3.7c0-1.9,0.2-5.4-3.3-5.1C8.5,2.3,9.5,6,9.4,7.3c0,1.1-0.5,2.2-1.3,3.1c-0.2,0.2-0.4,0.5-0.5,0.7c-1,1.2-1.5,2.8-1.5,4.3c-0.2,0.2-0.4,0.4-0.5,0.6c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.3,0.2-0.5,0.3c-0.4,0.1-0.7,0.3-0.9,0.7c-0.1,0.3-0.2,0.7-0.1,1.1c0.1,0.2,0.1,0.4,0,0.7c-0.2,0.4-0.2,0.9,0,1.4c0.3,0.4,0.8,0.5,1.5,0.6c0.5,0,1.1,0.2,1.6,0.4l0,0c0.5,0.3,1.1,0.5,1.7,0.5c0.3,0,0.7-0.1,1-0.2c0.3-0.2,0.5-0.4,0.6-0.7c0.4,0,1-0.2,1.7-0.2c0.6,0,1.2,0.2,2,0.1c0,0.1,0,0.2,0.1,0.3c0.2,0.5,0.7,0.9,1.3,1c0.1,0,0.1,0,0.2,0c0.8-0.1,1.6-0.5,2.1-1.1l0,0c0.4-0.4,0.9-0.7,1.4-0.9c0.6-0.3,1-0.5,1.1-1C20.3,18.6,20.1,18.2,19.7,17.6z M12.8,4.8c0.6,0.1,1.1,0.6,1,1.2c0,0.3-0.1,0.6-0.3,0.9c0,0,0,0-0.1,0c-0.2-0.1-0.3-0.1-0.4-0.2c0.1-0.1,0.1-0.3,0.2-0.5c0-0.4-0.2-0.7-0.4-0.7c-0.3,0-0.5,0.3-0.5,0.7c0,0,0,0.1,0,0.1c-0.1-0.1-0.3-0.1-0.4-0.2c0,0,0-0.1,0-0.1C11.8,5.5,12.2,4.9,12.8,4.8z M12.5,6.8c0.1,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.4,0.2,0.4,0.5c0,0.3-0.3,0.6-0.9,0.8c-0.2,0.1-0.3,0.1-0.4,0.2c-0.3,0.2-0.6,0.3-1,0.3c-0.3,0-0.6-0.2-0.8-0.4c-0.1-0.1-0.2-0.2-0.4-0.3C10.1,8.2,9.9,8,9.8,7.7c0-0.1,0.1-0.2,0.2-0.3c0.3-0.2,0.4-0.3,0.5-0.4l0.1-0.1c0.2-0.3,0.6-0.5,1-0.5C11.9,6.5,12.2,6.6,12.5,6.8z M10.4,5c0.4,0,0.7,0.4,0.8,1.1c0,0.1,0,0.1,0,0.2c-0.1,0-0.3,0.1-0.4,0.2c0,0,0-0.1,0-0.2c0-0.3-0.2-0.6-0.4-0.5c-0.2,0-0.3,0.3-0.3,0.6c0,0.2,0.1,0.3,0.2,0.4l0,0c0,0-0.1,0.1-0.2,0.1C9.9,6.7,9.7,6.4,9.7,6.1C9.7,5.5,10,5,10.4,5z M9.4,21.1c-0.7,0.3-1.6,0.2-2.2-0.2c-0.6-0.3-1.1-0.4-1.8-0.4c-0.5-0.1-1-0.1-1.1-0.3c-0.1-0.2-0.1-0.5,0.1-1c0.1-0.3,0.1-0.6,0-0.9c-0.1-0.3-0.1-0.5,0-0.8C4.5,17.2,4.7,17.1,5,17c0.3-0.1,0.5-0.2,0.7-0.4c0.1-0.1,0.2-0.2,0.3-0.4c0.3-0.4,0.5-0.6,0.8-0.6c0.6,0.1,1.1,1,1.5,1.9c0.2,0.3,0.4,0.7,0.7,1c0.4,0.5,0.9,1.2,0.9,1.6C9.9,20.6,9.7,20.9,9.4,21.1z M14.3,18.9c0,0.1,0,0.1-0.1,0.2c-1.2,0.9-2.8,1-4.1,0.3c-0.2-0.3-0.4-0.6-0.6-0.9c0.9-0.1,0.7-1.3-1.2-2.5c-2-1.3-0.6-3.7,0.1-4.8c0.1-0.1,0.1,0-0.3,0.8c-0.3,0.6-0.9,2.1-0.1,3.2c0-0.8,0.2-1.6,0.5-2.4c0.7-1.3,1.2-2.8,1.5-4.3c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.3,0.6,0.4,0.9,0.4c0,0,0.1,0,0.1,0c0.4,0,0.8-0.1,1.1-0.4c0.1-0.1,0.2-0.2,0.4-0.2c0.3-0.1,0.6-0.3,0.9-0.6c0.4,1.3,0.8,2.5,1.4,3.6c0.4,0.8,0.7,1.6,0.9,2.5c0.3,0,0.7,0.1,1,0.3c0.8,0.4,1.1,0.7,1,1.2c-0.1,0-0.1,0-0.2,0c0-0.3-0.2-0.6-0.9-0.9c-0.7-0.3-1.3-0.3-1.5,0.4c-0.1,0-0.2,0.1-0.3,0.1c-0.8,0.4-0.8,1.5-0.9,2.6C14.5,18.2,14.4,18.5,14.3,18.9z M18.9,19.5c-0.6,0.2-1.1,0.6-1.5,1.1c-0.4,0.6-1.1,1-1.9,0.9c-0.4,0-0.8-0.3-0.9-0.7c-0.1-0.6-0.1-1.2,0.2-1.8c0.1-0.4,0.2-0.7,0.3-1.1c0.1-1.2,0.1-1.9,0.6-2.2h0c0,0.5,0.3,0.8,0.7,1c0.5,0,1-0.1,1.4-0.5c0.1,0,0.1,0,0.2,0c0.3,0,0.5,0,0.7,0.2c0.2,0.2,0.3,0.5,0.3,0.7c0,0.3,0.2,0.6,0.3,0.9c0.5,0.5,0.5,0.8,0.5,0.9C19.7,19.1,19.3,19.3,18.9,19.5z M9.9,7.5c-0.1,0-0.1,0-0.1,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0.1,0,0.1,0.1,0.1,0.1c0.3,0.4,0.8,0.6,1.4,0.7c0.5-0.1,1-0.2,1.5-0.6c0.2-0.1,0.4-0.2,0.6-0.3c0.1,0,0.1-0.1,0.1-0.1c0-0.1,0-0.1-0.1-0.1l0,0c-0.2,0.1-0.5,0.2-0.7,0.3c-0.4,0.3-0.9,0.5-1.4,0.5c-0.5,0-0.9-0.3-1.2-0.6C10.1,7.6,10,7.5,9.9,7.5z'
-          fill='currentColor'
-        />
+        <g id='linuxdo_icon' data-name='linuxdo_icon'>
+          <path
+            d='m7.44,0s.09,0,.13,0c.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0q.12,0,.25,0t.26.08c.15.03.29.06.44.08,1.97.38,3.78,1.47,4.95,3.11.04.06.09.12.13.18.67.96,1.15,2.11,1.3,3.28q0,.19.09.26c0,.15,0,.29,0,.44,0,.04,0,.09,0,.13,0,.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0,.08,0,.17,0,.25q0,.19-.08.26c-.03.15-.06.29-.08.44-.38,1.97-1.47,3.78-3.11,4.95-.06.04-.12.09-.18.13-.96.67-2.11,1.15-3.28,1.3q-.19,0-.26.09c-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25,0q-.19,0-.26-.08c-.15-.03-.29-.06-.44-.08-1.97-.38-3.78-1.47-4.95-3.11q-.07-.09-.13-.18c-.67-.96-1.15-2.11-1.3-3.28q0-.19-.09-.26c0-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25q0-.19.08-.26c.03-.15.06-.29.08-.44.38-1.97,1.47-3.78,3.11-4.95.06-.04.12-.09.18-.13C4.42.73,5.57.26,6.74.1,7,.07,7.15,0,7.44,0Z'
+            fill='#EFEFEF'
+          />
+          <path
+            d='m1.27,11.33h13.45c-.94,1.89-2.51,3.21-4.51,3.88-1.99.59-3.96.37-5.8-.57-1.25-.7-2.67-1.9-3.14-3.3Z'
+            fill='#FEB005'
+          />
+          <path
+            d='m12.54,1.99c.87.7,1.82,1.59,2.18,2.68H1.27c.87-1.74,2.33-3.13,4.2-3.78,2.44-.79,5-.47,7.07,1.1Z'
+            fill='#1D1D1F'
+          />
+        </g>
       </svg>
     );
   }
@@ -24,4 +34,4 @@ const LinuxDoIcon = (props) => {
   return <Icon svg={<CustomIcon />} />;
 };
 
-export default LinuxDoIcon;
+export default LinuxDoIcon;

web/src/components/LoginForm.js

@@ -9,7 +9,11 @@ import {
   showSuccess,
   updateAPI,
 } from '../helpers';
-import { onGitHubOAuthClicked, onLinuxDOOAuthClicked } from './utils';
+import {
+  onGitHubOAuthClicked,
+  onOIDCClicked,
+  onLinuxDOOAuthClicked,
+} from './utils';
 import Turnstile from 'react-turnstile';
 import {
   Button,
@@ -25,6 +29,7 @@ import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import TelegramLoginButton from 'react-telegram-login';
 
 import { IconGithubLogo, IconAlarm } from '@douyinfe/semi-icons';
+import OIDCIcon from './OIDCIcon.js';
 import WeChatIcon from './WeChatIcon';
 import { setUserData } from '../helpers/data.js';
 import LinuxDoIcon from './LinuxDoIcon.js';
@@ -70,7 +75,6 @@ const LoginForm = () => {
     }
   }, []);
 
-
   const onWeChatLoginClicked = () => {
     setShowWeChatLoginModal(true);
   };
@@ -222,13 +226,15 @@ const LoginForm = () => {
                   }}
                 >
                   <Text>
-                    {t('没有账户？')} <Link to='/register'>{t('点击注册')}</Link>
+                    {t('没有账户？')}{' '}
+                    <Link to='/register'>{t('点击注册')}</Link>
                   </Text>
                   <Text>
                     {t('忘记密码？')} <Link to='/reset'>{t('点击重置')}</Link>
                   </Text>
                 </div>
                 {status.github_oauth ||
+                status.oidc_enabled ||
                 status.wechat_login ||
                 status.telegram_oauth ||
                 status.linuxdo_oauth ? (
@@ -254,6 +260,20 @@ const LoginForm = () => {
                       ) : (
                         <></>
                       )}
+                      {status.oidc_enabled ? (
+                        <Button
+                          type='primary'
+                          icon={<OIDCIcon />}
+                          onClick={() =>
+                            onOIDCClicked(
+                              status.oidc_authorization_endpoint,
+                              status.oidc_client_id,
+                            )
+                          }
+                        />
+                      ) : (
+                        <></>
+                      )}
                       {status.linuxdo_oauth ? (
                         <Button
                           icon={<LinuxDoIcon />}
@@ -318,7 +338,9 @@ const LoginForm = () => {
                   </div>
                   <div style={{ textAlign: 'center' }}>
                     <p>
-                      {t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}
+                      {t(
+                        '微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）',
+                      )}
                     </p>
                   </div>
                   <Form size='large'>

web/src/components/LogsTable.js

@@ -12,25 +12,33 @@ import {
 
 import {
   Avatar,
-  Button, Descriptions,
+  Button,
+  Descriptions,
   Form,
   Layout,
-  Modal, Popover,
+  Modal,
+  Popover,
   Select,
   Space,
   Spin,
   Table,
   Tag,
   Tooltip,
-  Checkbox
+  Checkbox,
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
 import {
-  renderAudioModelPrice, renderGroup,
-  renderModelPrice, renderModelPriceSimple,
+  renderAudioModelPrice,
+  renderClaudeLogContent,
+  renderClaudeModelPrice,
+  renderClaudeModelPriceSimple,
+  renderGroup,
+  renderLogContent,
+  renderModelPrice,
+  renderModelPriceSimple,
   renderNumber,
   renderQuota,
-  stringToColor
+  stringToColor,
 } from '../helpers/render';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 import { getLogOther } from '../helpers/other.js';
@@ -72,23 +80,51 @@ const LogsTable = () => {
   function renderType(type) {
     switch (type) {
       case 1:
-        return <Tag color='cyan' size='large'>{t('充值')}</Tag>;
+        return (
+          <Tag color='cyan' size='large'>
+            {t('充值')}
+          </Tag>
+        );
       case 2:
-        return <Tag color='lime' size='large'>{t('消费')}</Tag>;
+        return (
+          <Tag color='lime' size='large'>
+            {t('消费')}
+          </Tag>
+        );
       case 3:
-        return <Tag color='orange' size='large'>{t('管理')}</Tag>;
+        return (
+          <Tag color='orange' size='large'>
+            {t('管理')}
+          </Tag>
+        );
       case 4:
-        return <Tag color='purple' size='large'>{t('系统')}</Tag>;
+        return (
+          <Tag color='purple' size='large'>
+            {t('系统')}
+          </Tag>
+        );
       default:
-        return <Tag color='black' size='large'>{t('未知')}</Tag>;
+        return (
+          <Tag color='black' size='large'>
+            {t('未知')}
+          </Tag>
+        );
     }
   }
 
   function renderIsStream(bool) {
     if (bool) {
-      return <Tag color='blue' size='large'>{t('流')}</Tag>;
+      return (
+        <Tag color='blue' size='large'>
+          {t('流')}
+        </Tag>
+      );
     } else {
-      return <Tag color='purple' size='large'>{t('非流')}</Tag>;
+      return (
+        <Tag color='purple' size='large'>
+          {t('非流')}
+        </Tag>
+      );
     }
   }
 
@@ -146,56 +182,70 @@ const LogsTable = () => {
   }
 
   function renderModelName(record) {
-
     let other = getLogOther(record.other);
-    let modelMapped = other?.is_model_mapped && other?.upstream_model_name && other?.upstream_model_name !== '';
+    let modelMapped =
+      other?.is_model_mapped &&
+      other?.upstream_model_name &&
+      other?.upstream_model_name !== '';
     if (!modelMapped) {
-      return <Tag
-        color={stringToColor(record.model_name)}
-        size='large'
-        onClick={(event) => {
-          copyText(event, record.model_name).then(r => {});
-        }}
-      >
-        {' '}{record.model_name}{' '}
-      </Tag>;
+      return (
+        <Tag
+          color={stringToColor(record.model_name)}
+          size='large'
+          onClick={(event) => {
+            copyText(event, record.model_name).then((r) => {});
+          }}
+        >
+          {' '}
+          {record.model_name}{' '}
+        </Tag>
+      );
     } else {
       return (
         <>
           <Space vertical align={'start'}>
-            <Popover content={
-              <div style={{padding: 10}}> 
-                <Space vertical align={'start'}>
-                  <Tag
-                    color={stringToColor(record.model_name)}
-                    size='large'
-                    onClick={(event) => {
-                      copyText(event, record.model_name).then(r => {});
-                    }}
-                  >
-                    {t('请求并计费模型')}{' '}{record.model_name}{' '}
-                  </Tag>
-                  <Tag
-                    color={stringToColor(other.upstream_model_name)}
-                    size='large'
-                    onClick={(event) => {
-                      copyText(event, other.upstream_model_name).then(r => {});
-                    }}
-                  >
-                    {t('实际模型')}{' '}{other.upstream_model_name}{' '}
-                  </Tag>
-                </Space>
-              </div>
-            }>
+            <Popover
+              content={
+                <div style={{ padding: 10 }}>
+                  <Space vertical align={'start'}>
+                    <Tag
+                      color={stringToColor(record.model_name)}
+                      size='large'
+                      onClick={(event) => {
+                        copyText(event, record.model_name).then((r) => {});
+                      }}
+                    >
+                      {t('请求并计费模型')} {record.model_name}{' '}
+                    </Tag>
+                    <Tag
+                      color={stringToColor(other.upstream_model_name)}
+                      size='large'
+                      onClick={(event) => {
+                        copyText(event, other.upstream_model_name).then(
+                          (r) => {},
+                        );
+                      }}
+                    >
+                      {t('实际模型')} {other.upstream_model_name}{' '}
+                    </Tag>
+                  </Space>
+                </div>
+              }
+            >
               <Tag
                 color={stringToColor(record.model_name)}
                 size='large'
                 onClick={(event) => {
-                  copyText(event, record.model_name).then(r => {});
+                  copyText(event, record.model_name).then((r) => {});
                 }}
-                suffixIcon={<IconRefresh style={{width: '0.8em', height: '0.8em', opacity: 0.6}} />}
+                suffixIcon={
+                  <IconRefresh
+                    style={{ width: '0.8em', height: '0.8em', opacity: 0.6 }}
+                  />
+                }
               >
-                {' '}{record.model_name}{' '}
+                {' '}
+                {record.model_name}{' '}
               </Tag>
             </Popover>
             {/*<Tooltip content={t('实际模型')}>*/}
@@ -213,7 +263,6 @@ const LogsTable = () => {
         </>
       );
     }
-
   }
 
   // Define column keys for selection
@@ -230,7 +279,7 @@ const LogsTable = () => {
     COMPLETION: 'completion',
     COST: 'cost',
     RETRY: 'retry',
-    DETAILS: 'details'
+    DETAILS: 'details',
   };
 
   // State for column visibility
@@ -271,7 +320,7 @@ const LogsTable = () => {
       [COLUMN_KEYS.COMPLETION]: true,
       [COLUMN_KEYS.COST]: true,
       [COLUMN_KEYS.RETRY]: isAdminUser,
-      [COLUMN_KEYS.DETAILS]: true
+      [COLUMN_KEYS.DETAILS]: true,
     };
   };
 
@@ -290,18 +339,23 @@ const LogsTable = () => {
 
   // Handle "Select All" checkbox
   const handleSelectAll = (checked) => {
-    const allKeys = Object.keys(COLUMN_KEYS).map(key => COLUMN_KEYS[key]);
+    const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]);
     const updatedColumns = {};
-    
-    allKeys.forEach(key => {
+
+    allKeys.forEach((key) => {
       // For admin-only columns, only enable them if user is admin
-      if ((key === COLUMN_KEYS.CHANNEL || key === COLUMN_KEYS.USERNAME || key === COLUMN_KEYS.RETRY) && !isAdminUser) {
+      if (
+        (key === COLUMN_KEYS.CHANNEL ||
+          key === COLUMN_KEYS.USERNAME ||
+          key === COLUMN_KEYS.RETRY) &&
+        !isAdminUser
+      ) {
         updatedColumns[key] = false;
       } else {
         updatedColumns[key] = checked;
       }
     });
-    
+
     setVisibleColumns(updatedColumns);
   };
 
@@ -355,7 +409,7 @@ const LogsTable = () => {
               style={{ marginRight: 4 }}
               onClick={(event) => {
                 event.stopPropagation();
-                showUserInfo(record.user_id)
+                showUserInfo(record.user_id);
               }}
             >
               {typeof text === 'string' && text.slice(0, 1)}
@@ -397,32 +451,27 @@ const LogsTable = () => {
       dataIndex: 'group',
       render: (text, record, index) => {
         if (record.type === 0 || record.type === 2) {
-         if (record.group) {
-            return (
-              <>
-                {renderGroup(record.group)}
-              </>
-            );
-         } else {
-           let other = null;
-           try {
-             other = JSON.parse(record.other);
-           } catch (e) {
-             console.error(`Failed to parse record.other: "${record.other}".`, e);
-           }
-           if (other === null) {
-             return <></>;
-           }
-           if (other.group !== undefined) {
-             return (
-               <>
-                 {renderGroup(other.group)}
-               </>
-             );
-           } else {
-             return <></>;
-           }
-         }
+          if (record.group) {
+            return <>{renderGroup(record.group)}</>;
+          } else {
+            let other = null;
+            try {
+              other = JSON.parse(record.other);
+            } catch (e) {
+              console.error(
+                `Failed to parse record.other: "${record.other}".`,
+                e,
+              );
+            }
+            if (other === null) {
+              return <></>;
+            }
+            if (other.group !== undefined) {
+              return <>{renderGroup(other.group)}</>;
+            } else {
+              return <></>;
+            }
+          }
         } else {
           return <></>;
         }
@@ -564,22 +613,32 @@ const LogsTable = () => {
           );
         }
 
-        let content = renderModelPriceSimple(
-          other.model_ratio,
-          other.model_price,
-          other.group_ratio,
-          other.cache_tokens || 0,
-          other.cache_ratio || 1.0,
-        );
+        let content = other?.claude
+          ? renderClaudeModelPriceSimple(
+              other.model_ratio,
+              other.model_price,
+              other.group_ratio,
+              other.cache_tokens || 0,
+              other.cache_ratio || 1.0,
+              other.cache_creation_tokens || 0,
+              other.cache_creation_ratio || 1.0,
+            )
+          : renderModelPriceSimple(
+              other.model_ratio,
+              other.model_price,
+              other.group_ratio,
+              other.cache_tokens || 0,
+              other.cache_ratio || 1.0,
+            );
         return (
-            <Paragraph
-                ellipsis={{
-                  rows: 2,
-                }}
-                style={{ maxWidth: 240 }}
-            >
-              {content}
-            </Paragraph>
+          <Paragraph
+            ellipsis={{
+              rows: 2,
+            }}
+            style={{ maxWidth: 240 }}
+          >
+            {content}
+          </Paragraph>
         );
       },
     },
@@ -589,13 +648,16 @@ const LogsTable = () => {
   useEffect(() => {
     if (Object.keys(visibleColumns).length > 0) {
       // Save to localStorage
-      localStorage.setItem('logs-table-columns', JSON.stringify(visibleColumns));
+      localStorage.setItem(
+        'logs-table-columns',
+        JSON.stringify(visibleColumns),
+      );
     }
   }, [visibleColumns]);
 
   // Filter columns based on visibility settings
   const getVisibleColumns = () => {
-    return allColumns.filter(column => visibleColumns[column.key]);
+    return allColumns.filter((column) => visibleColumns[column.key]);
   };
 
   // Column selector modal
@@ -608,42 +670,59 @@ const LogsTable = () => {
         footer={
           <>
             <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
-            <Button onClick={() => setShowColumnSelector(false)}>{t('取消')}</Button>
-            <Button type="primary" onClick={() => setShowColumnSelector(false)}>{t('确定')}</Button>
+            <Button onClick={() => setShowColumnSelector(false)}>
+              {t('取消')}
+            </Button>
+            <Button type='primary' onClick={() => setShowColumnSelector(false)}>
+              {t('确定')}
+            </Button>
           </>
         }
       >
         <div style={{ marginBottom: 20 }}>
           <Checkbox
-            checked={Object.values(visibleColumns).every(v => v === true)}
-            indeterminate={Object.values(visibleColumns).some(v => v === true) && !Object.values(visibleColumns).every(v => v === true)}
-            onChange={e => handleSelectAll(e.target.checked)}
+            checked={Object.values(visibleColumns).every((v) => v === true)}
+            indeterminate={
+              Object.values(visibleColumns).some((v) => v === true) &&
+              !Object.values(visibleColumns).every((v) => v === true)
+            }
+            onChange={(e) => handleSelectAll(e.target.checked)}
           >
             {t('全选')}
           </Checkbox>
         </div>
-        <div style={{ 
-          display: 'flex', 
-          flexWrap: 'wrap',
-          maxHeight: '400px',
-          overflowY: 'auto',
-          border: '1px solid var(--semi-color-border)',
-          borderRadius: '6px',
-          padding: '16px'
-        }}>
-          {allColumns.map(column => {
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            maxHeight: '400px',
+            overflowY: 'auto',
+            border: '1px solid var(--semi-color-border)',
+            borderRadius: '6px',
+            padding: '16px',
+          }}
+        >
+          {allColumns.map((column) => {
             // Skip admin-only columns for non-admin users
-            if (!isAdminUser && (column.key === COLUMN_KEYS.CHANNEL || 
-                                column.key === COLUMN_KEYS.USERNAME || 
-                                column.key === COLUMN_KEYS.RETRY)) {
+            if (
+              !isAdminUser &&
+              (column.key === COLUMN_KEYS.CHANNEL ||
+                column.key === COLUMN_KEYS.USERNAME ||
+                column.key === COLUMN_KEYS.RETRY)
+            ) {
               return null;
             }
-            
+
             return (
-              <div key={column.key} style={{ width: '50%', marginBottom: 16, paddingRight: 8 }}>
+              <div
+                key={column.key}
+                style={{ width: '50%', marginBottom: 16, paddingRight: 8 }}
+              >
                 <Checkbox
                   checked={!!visibleColumns[column.key]}
-                  onChange={e => handleColumnVisibilityChange(column.key, e.target.checked)}
+                  onChange={(e) =>
+                    handleColumnVisibilityChange(column.key, e.target.checked)
+                  }
                 >
                   {column.title}
                 </Checkbox>
@@ -693,7 +772,7 @@ const LogsTable = () => {
   });
 
   const handleInputChange = (value, name) => {
-    setInputs(inputs => ({ ...inputs, [name]: value }));
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
 
   const getLogSelfStat = async () => {
@@ -749,10 +828,18 @@ const LogsTable = () => {
         title: t('用户信息'),
         content: (
           <div style={{ padding: 12 }}>
-            <p>{t('用户名')}: {data.username}</p>
-            <p>{t('余额')}: {renderQuota(data.quota)}</p>
-            <p>{t('已用额度')}：{renderQuota(data.used_quota)}</p>
-            <p>{t('请求次数')}：{renderNumber(data.request_count)}</p>
+            <p>
+              {t('用户名')}: {data.username}
+            </p>
+            <p>
+              {t('余额')}: {renderQuota(data.quota)}
+            </p>
+            <p>
+              {t('已用额度')}：{renderQuota(data.used_quota)}
+            </p>
+            <p>
+              {t('请求次数')}：{renderNumber(data.request_count)}
+            </p>
           </div>
         ),
         centered: true,
@@ -787,11 +874,11 @@ const LogsTable = () => {
         //   key: '渠道重试',
         //   value: content,
         // })
-      }      
+      }
       if (isAdminUser && (logs[i].type === 0 || logs[i].type === 2)) {
         expandDataLocal.push({
           key: t('渠道信息'),
-          value: `${logs[i].channel} - ${logs[i].channel_name || '[未知]'}`
+          value: `${logs[i].channel} - ${logs[i].channel_name || '[未知]'}`,
         });
       }
       if (other?.ws || other?.audio) {
@@ -818,12 +905,39 @@ const LogsTable = () => {
           value: other.cache_tokens,
         });
       }
-      expandDataLocal.push({
-        key: t('日志详情'),
-        value: logs[i].content,
-      });
+      if (other?.cache_creation_tokens > 0) {
+        expandDataLocal.push({
+          key: t('缓存创建 Tokens'),
+          value: other.cache_creation_tokens,
+        });
+      }
       if (logs[i].type === 2) {
-        let modelMapped = other?.is_model_mapped && other?.upstream_model_name && other?.upstream_model_name !== '';
+        expandDataLocal.push({
+          key: t('日志详情'),
+          value: other?.claude
+            ? renderClaudeLogContent(
+                other?.model_ratio,
+                other.completion_ratio,
+                other.model_price,
+                other.group_ratio,
+                other.user_group_ratio,
+                other.cache_ratio || 1.0,
+                other.cache_creation_ratio || 1.0,
+              )
+            : renderLogContent(
+                other?.model_ratio,
+                other.completion_ratio,
+                other.model_price,
+                other.group_ratio,
+                other.user_group_ratio,
+              ),
+        });
+      }
+      if (logs[i].type === 2) {
+        let modelMapped =
+          other?.is_model_mapped &&
+          other?.upstream_model_name &&
+          other?.upstream_model_name !== '';
         if (modelMapped) {
           expandDataLocal.push({
             key: t('请求并计费模型'),
@@ -850,6 +964,19 @@ const LogsTable = () => {
             other?.cache_tokens || 0,
             other?.cache_ratio || 1.0,
           );
+        } else if (other?.claude) {
+          content = renderClaudeModelPrice(
+            logs[i].prompt_tokens,
+            logs[i].completion_tokens,
+            other.model_ratio,
+            other.model_price,
+            other.completion_ratio,
+            other.group_ratio,
+            other.cache_tokens || 0,
+            other.cache_ratio || 1.0,
+            other.cache_creation_tokens || 0,
+            other.cache_creation_ratio || 1.0,
+          );
         } else {
           content = renderModelPrice(
             logs[i].prompt_tokens,
@@ -958,16 +1085,44 @@ const LogsTable = () => {
     <>
       {renderColumnSelector()}
       <Layout>
-        <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+        <Header>
           <Spin spinning={loadingStat}>
             <Space>
-              <Tag color='green' size='large' style={{ padding: 15 }}>
-                {t('总消耗额度')}: {renderQuota(stat.quota)}
+              <Tag
+                color='blue'
+                size='large'
+                style={{
+                  padding: 15,
+                  borderRadius: '8px',
+                  fontWeight: 500,
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                }}
+              >
+                {t('消耗额度')}: {renderQuota(stat.quota)}
               </Tag>
-              <Tag color='blue' size='large' style={{ padding: 15 }}>
+              <Tag
+                color='pink'
+                size='large'
+                style={{
+                  padding: 15,
+                  borderRadius: '8px',
+                  fontWeight: 500,
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                }}
+              >
                 RPM: {stat.rpm}
               </Tag>
-              <Tag color='purple' size='large' style={{ padding: 15 }}>
+              <Tag
+                color='white'
+                size='large'
+                style={{
+                  padding: 15,
+                  border: 'none',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                  borderRadius: '8px',
+                  fontWeight: 500,
+                }}
+              >
                 TPM: {stat.tpm}
               </Tag>
             </Space>
@@ -977,46 +1132,46 @@ const LogsTable = () => {
           <>
             <Form.Section>
               <div style={{ marginBottom: 10 }}>
-              {
-                  styleState.isMobile ? (
-                    <div>
-                      <Form.DatePicker
-                        field='start_timestamp'
-                        label={t('起始时间')}
-                        style={{ width: 272 }}
-                        initValue={start_timestamp}
-                        type='dateTime'
-                        onChange={(value) => {
-                          console.log(value);
-                          handleInputChange(value, 'start_timestamp')
-                        }}
-                      />
-                      <Form.DatePicker
-                        field='end_timestamp'
-                        fluid
-                        label={t('结束时间')}
-                        style={{ width: 272 }}
-                        initValue={end_timestamp}
-                        type='dateTime'
-                        onChange={(value) => handleInputChange(value, 'end_timestamp')}
-                      />
-                    </div>
-                  ) : (
+                {styleState.isMobile ? (
+                  <div>
                     <Form.DatePicker
-                      field="range_timestamp"
-                      label={t('时间范围')}
-                      initValue={[start_timestamp, end_timestamp]}
-                      type="dateTimeRange"
-                      name="range_timestamp"
+                      field='start_timestamp'
+                      label={t('起始时间')}
+                      style={{ width: 272 }}
+                      initValue={start_timestamp}
+                      type='dateTime'
                       onChange={(value) => {
-                        if (Array.isArray(value) && value.length === 2) {
-                          handleInputChange(value[0], 'start_timestamp');
-                          handleInputChange(value[1], 'end_timestamp');
-                        }
+                        console.log(value);
+                        handleInputChange(value, 'start_timestamp');
                       }}
                     />
-                  )
-                }
+                    <Form.DatePicker
+                      field='end_timestamp'
+                      fluid
+                      label={t('结束时间')}
+                      style={{ width: 272 }}
+                      initValue={end_timestamp}
+                      type='dateTime'
+                      onChange={(value) =>
+                        handleInputChange(value, 'end_timestamp')
+                      }
+                    />
+                  </div>
+                ) : (
+                  <Form.DatePicker
+                    field='range_timestamp'
+                    label={t('时间范围')}
+                    initValue={[start_timestamp, end_timestamp]}
+                    type='dateTimeRange'
+                    name='range_timestamp'
+                    onChange={(value) => {
+                      if (Array.isArray(value) && value.length === 2) {
+                        handleInputChange(value[0], 'start_timestamp');
+                        handleInputChange(value[1], 'end_timestamp');
+                      }
+                    }}
+                  />
+                )}
               </div>
             </Form.Section>
             <Form.Input
@@ -1077,14 +1232,14 @@ const LogsTable = () => {
             <Form.Section></Form.Section>
           </>
         </Form>
-        <div style={{marginTop:10}}>
+        <div style={{ marginTop: 10 }}>
           <Select
-              defaultValue='0'
-              style={{ width: 120 }}
-              onChange={(value) => {
-                setLogType(parseInt(value));
-                loadLogs(0, pageSize, parseInt(value));
-              }}
+            defaultValue='0'
+            style={{ width: 120 }}
+            onChange={(value) => {
+              setLogType(parseInt(value));
+              loadLogs(0, pageSize, parseInt(value));
+            }}
           >
             <Select.Option value='0'>{t('全部')}</Select.Option>
             <Select.Option value='1'>{t('充值')}</Select.Option>
@@ -1108,13 +1263,13 @@ const LogsTable = () => {
           expandedRowRender={expandRowRender}
           expandRowByClick={true}
           dataSource={logs}
-          rowKey="key"
+          rowKey='key'
           pagination={{
             formatPageText: (page) =>
               t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
                 start: page.currentStart,
                 end: page.currentEnd,
-                total: logCount
+                total: logCount,
               }),
             currentPage: activePage,
             pageSize: pageSize,

web/src/components/MjLogsTable.js

@@ -46,7 +46,6 @@ const LogsTable = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState('');
   function renderType(type) {
-    
     switch (type) {
       case 'IMAGINE':
         return (
@@ -98,9 +97,9 @@ const LogsTable = () => {
         );
       case 'UPLOAD':
         return (
-            <Tag color='blue' size='large'>
-              上传文件
-            </Tag>
+          <Tag color='blue' size='large'>
+            上传文件
+          </Tag>
         );
       case 'SHORTEN':
         return (
@@ -152,9 +151,8 @@ const LogsTable = () => {
         );
     }
   }
-  
+
   function renderCode(code) {
-    
     switch (code) {
       case 1:
         return (
@@ -188,9 +186,8 @@ const LogsTable = () => {
         );
     }
   }
-  
+
   function renderStatus(type) {
-    
     switch (type) {
       case 'SUCCESS':
         return (
@@ -236,22 +233,21 @@ const LogsTable = () => {
         );
     }
   }
-  
+
   const renderTimestamp = (timestampInSeconds) => {
     const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
-  
+
     const year = date.getFullYear(); // 获取年份
     const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
     const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
     const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
     const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
     const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
-  
+
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
   };
   // 修改renderDuration函数以包含颜色逻辑
   function renderDuration(submit_time, finishTime) {
-    
     if (!submit_time || !finishTime) return 'N/A';
 
     const start = new Date(submit_time);
@@ -261,7 +257,7 @@ const LogsTable = () => {
     const color = durationSec > 60 ? 'red' : 'green';
 
     return (
-      <Tag color={color} size="large">
+      <Tag color={color} size='large'>
         {durationSec} {t('秒')}
       </Tag>
     );
@@ -560,7 +556,9 @@ const LogsTable = () => {
         {isAdminUser && showBanner ? (
           <Banner
             type='info'
-            description={t('当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。')}
+            description={t(
+              '当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。',
+            )}
           />
         ) : (
           <></>
@@ -634,7 +632,7 @@ const LogsTable = () => {
               t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
                 start: page.currentStart,
                 end: page.currentEnd,
-                total: logCount
+                total: logCount,
               }),
           }}
           loading={loading}

web/src/components/ModelPricing.js

@@ -34,12 +34,12 @@ const ModelPricing = () => {
   const [selectedGroup, setSelectedGroup] = useState('default');
 
   const rowSelection = useMemo(
-      () => ({
-          onChange: (selectedRowKeys, selectedRows) => {
-            setSelectedRowKeys(selectedRowKeys);
-          },
-      }),
-      []
+    () => ({
+      onChange: (selectedRowKeys, selectedRows) => {
+        setSelectedRowKeys(selectedRowKeys);
+      },
+    }),
+    [],
   );
 
   const handleChange = (value) => {
@@ -59,7 +59,7 @@ const ModelPricing = () => {
     const newFilteredValue = value ? [value] : [];
     setFilteredValue(newFilteredValue);
   };
-  
+
   function renderQuotaType(type) {
     // Ensure all cases are string literals by adding quotes.
     switch (type) {
@@ -79,7 +79,7 @@ const ModelPricing = () => {
         return t('未知');
     }
   }
-  
+
   function renderAvailable(available) {
     return available ? (
       <Popover
@@ -96,7 +96,7 @@ const ModelPricing = () => {
           borderStyle: 'solid',
         }}
       >
-        <IconVerify style={{ color: 'green' }}  size="large" />
+        <IconVerify style={{ color: 'green' }} size='large' />
       </Popover>
     ) : null;
   }
@@ -106,7 +106,7 @@ const ModelPricing = () => {
       title: t('可用性'),
       dataIndex: 'available',
       render: (text, record, index) => {
-         // if record.enable_groups contains selectedGroup, then available is true
+        // if record.enable_groups contains selectedGroup, then available is true
         return renderAvailable(record.enable_groups.includes(selectedGroup));
       },
       sorter: (a, b) => {
@@ -150,7 +150,6 @@ const ModelPricing = () => {
       title: t('可用分组'),
       dataIndex: 'enable_groups',
       render: (text, record, index) => {
-        
         // enable_groups is a string array
         return (
           <Space>
@@ -158,11 +157,7 @@ const ModelPricing = () => {
               if (usableGroup[group]) {
                 if (group === selectedGroup) {
                   return (
-                    <Tag
-                      color='blue'
-                      size='large'
-                      prefixIcon={<IconVerify />}
-                    >
+                    <Tag color='blue' size='large' prefixIcon={<IconVerify />}>
                       {group}
                     </Tag>
                   );
@@ -173,10 +168,12 @@ const ModelPricing = () => {
                       size='large'
                       onClick={() => {
                         setSelectedGroup(group);
-                        showInfo(t('当前查看的分组为：{{group}}，倍率为：{{ratio}}', {
-                          group: group,
-                          ratio: groupRatio[group]
-                        }));
+                        showInfo(
+                          t('当前查看的分组为：{{group}}，倍率为：{{ratio}}', {
+                            group: group,
+                            ratio: groupRatio[group],
+                          }),
+                        );
                       }}
                     >
                       {group}
@@ -191,22 +188,23 @@ const ModelPricing = () => {
     },
     {
       title: () => (
-        <span style={{'display':'flex','alignItems':'center'}}>
+        <span style={{ display: 'flex', alignItems: 'center' }}>
           {t('倍率')}
           <Popover
             content={
               <div style={{ padding: 8 }}>
-                {t('倍率是为了方便换算不同价格的模型')}<br/>
+                {t('倍率是为了方便换算不同价格的模型')}
+                <br />
                 {t('点击查看倍率说明')}
               </div>
             }
             position='top'
             style={{
-                backgroundColor: 'rgba(var(--semi-blue-4),1)',
-                borderColor: 'rgba(var(--semi-blue-4),1)',
-                color: 'var(--semi-color-white)',
-                borderWidth: 1,
-                borderStyle: 'solid',
+              backgroundColor: 'rgba(var(--semi-blue-4),1)',
+              borderColor: 'rgba(var(--semi-blue-4),1)',
+              color: 'var(--semi-color-white)',
+              borderWidth: 1,
+              borderStyle: 'solid',
             }}
           >
             <IconHelpCircle
@@ -224,11 +222,18 @@ const ModelPricing = () => {
         let completionRatio = parseFloat(record.completion_ratio.toFixed(3));
         content = (
           <>
-            <Text>{t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}</Text>
+            <Text>
+              {t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}
+            </Text>
             <br />
-            <Text>{t('补全倍率')}：{record.quota_type === 0 ? completionRatio : t('无')}</Text>
+            <Text>
+              {t('补全倍率')}：
+              {record.quota_type === 0 ? completionRatio : t('无')}
+            </Text>
             <br />
-            <Text>{t('分组倍率')}：{groupRatio[selectedGroup]}</Text>
+            <Text>
+              {t('分组倍率')}：{groupRatio[selectedGroup]}
+            </Text>
           </>
         );
         return <div>{content}</div>;
@@ -241,21 +246,31 @@ const ModelPricing = () => {
         let content = text;
         if (record.quota_type === 0) {
           // 这里的 *2 是因为 1倍率=0.002刀，请勿删除
-          let inputRatioPrice = record.model_ratio * 2 * groupRatio[selectedGroup];
+          let inputRatioPrice =
+            record.model_ratio * 2 * groupRatio[selectedGroup];
           let completionRatioPrice =
             record.model_ratio *
-            record.completion_ratio * 2 *
+            record.completion_ratio *
+            2 *
             groupRatio[selectedGroup];
           content = (
             <>
-              <Text>{t('提示')} ${inputRatioPrice} / 1M tokens</Text>
+              <Text>
+                {t('提示')} ${inputRatioPrice} / 1M tokens
+              </Text>
               <br />
-              <Text>{t('补全')} ${completionRatioPrice} / 1M tokens</Text>
+              <Text>
+                {t('补全')} ${completionRatioPrice} / 1M tokens
+              </Text>
             </>
           );
         } else {
           let price = parseFloat(text) * groupRatio[selectedGroup];
-          content = <>${t('模型价格')}：${price}</>;
+          content = (
+            <>
+              ${t('模型价格')}：${price}
+            </>
+          );
         }
         return <div>{content}</div>;
       },
@@ -305,7 +320,7 @@ const ModelPricing = () => {
     if (success) {
       setGroupRatio(group_ratio);
       setUsableGroup(usable_group);
-      setSelectedGroup(userState.user ? userState.user.group : 'default')
+      setSelectedGroup(userState.user ? userState.user.group : 'default');
       setModelsFormat(data, group_ratio);
     } else {
       showError(message);
@@ -335,32 +350,38 @@ const ModelPricing = () => {
       <Layout>
         {userState.user ? (
           <Banner
-            type="success"
+            type='success'
             fullMode={false}
-            closeIcon="null"
+            closeIcon='null'
             description={t('您的默认分组为：{{group}}，分组倍率为：{{ratio}}', {
               group: userState.user.group,
-              ratio: groupRatio[userState.user.group]
+              ratio: groupRatio[userState.user.group],
             })}
           />
         ) : (
           <Banner
             type='warning'
             fullMode={false}
-            closeIcon="null"
+            closeIcon='null'
             description={t('您还未登陆，显示的价格为默认分组倍率: {{ratio}}', {
-              ratio: groupRatio['default']
+              ratio: groupRatio['default'],
             })}
           />
         )}
-        <br/>
-        <Banner 
-            type="info"
-            fullMode={false}
-            description={<div>{t('按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）')}</div>}
-            closeIcon="null"
+        <br />
+        <Banner
+          type='info'
+          fullMode={false}
+          description={
+            <div>
+              {t(
+                '按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）',
+              )}
+            </div>
+          }
+          closeIcon='null'
         />
-        <br/>
+        <br />
         <Space style={{ marginBottom: 16 }}>
           <Input
             placeholder={t('模糊搜索模型名称')}
@@ -373,11 +394,11 @@ const ModelPricing = () => {
           <Button
             theme='light'
             type='tertiary'
-            style={{width: 150}}
+            style={{ width: 150 }}
             onClick={() => {
               copyText(selectedRowKeys);
             }}
-            disabled={selectedRowKeys == ""}
+            disabled={selectedRowKeys == ''}
           >
             {t('复制选中模型')}
           </Button>
@@ -392,7 +413,7 @@ const ModelPricing = () => {
               t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
                 start: page.currentStart,
                 end: page.currentEnd,
-                total: models.length
+                total: models.length,
               }),
             pageSize: models.length,
             showSizeChanger: false,

web/src/components/ModelSetting.js

@@ -1,21 +1,27 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 
-
 import { API, showError, showSuccess } from '../helpers';
 import { useTranslation } from 'react-i18next';
 import SettingGeminiModel from '../pages/Setting/Model/SettingGeminiModel.js';
 import SettingClaudeModel from '../pages/Setting/Model/SettingClaudeModel.js';
+import SettingGlobalModel from '../pages/Setting/Model/SettingGlobalModel.js';
 
 const ModelSetting = () => {
   const { t } = useTranslation();
   let [inputs, setInputs] = useState({
     'gemini.safety_settings': '',
     'gemini.version_settings': '',
+    'gemini.supported_imagine_models': '',
     'claude.model_headers_settings': '',
     'claude.thinking_adapter_enabled': true,
     'claude.default_max_tokens': '',
     'claude.thinking_adapter_budget_tokens_percentage': 0.8,
+    'global.pass_through_request_enabled': false,
+    'general_setting.ping_interval_enabled': false,
+    'general_setting.ping_interval_seconds': 60,
+    'gemini.thinking_adapter_enabled': false,
+    'gemini.thinking_adapter_budget_tokens_percentage': 0.6,
   });
 
   let [loading, setLoading] = useState(false);
@@ -29,14 +35,13 @@ const ModelSetting = () => {
         if (
           item.key === 'gemini.safety_settings' ||
           item.key === 'gemini.version_settings' ||
-          item.key === 'claude.model_headers_settings'||
-          item.key === 'claude.default_max_tokens'
+          item.key === 'claude.model_headers_settings' ||
+          item.key === 'claude.default_max_tokens' ||
+          item.key === 'gemini.supported_imagine_models'
         ) {
           item.value = JSON.stringify(JSON.parse(item.value), null, 2);
         }
-        if (
-          item.key.endsWith('Enabled')
-        ) {
+        if (item.key.endsWith('Enabled') || item.key.endsWith('enabled')) {
           newInputs[item.key] = item.value === 'true' ? true : false;
         } else {
           newInputs[item.key] = item.value;
@@ -67,6 +72,10 @@ const ModelSetting = () => {
   return (
     <>
       <Spin spinning={loading} size='large'>
+        {/* OpenAI */}
+        <Card style={{ marginTop: '10px' }}>
+          <SettingGlobalModel options={inputs} refresh={onRefresh} />
+        </Card>
         {/* Gemini */}
         <Card style={{ marginTop: '10px' }}>
           <SettingGeminiModel options={inputs} refresh={onRefresh} />

web/src/components/OAuth2Callback.js

@@ -6,56 +6,58 @@ import { UserContext } from '../context/User';
 import { setUserData } from '../helpers/data.js';
 
 const OAuth2Callback = (props) => {
-    const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
-    const [userState, userDispatch] = useContext(UserContext);
-    const [prompt, setPrompt] = useState('处理中...');
-    const [processing, setProcessing] = useState(true);
+  const [userState, userDispatch] = useContext(UserContext);
+  const [prompt, setPrompt] = useState('处理中...');
+  const [processing, setProcessing] = useState(true);
 
-    let navigate = useNavigate();
+  let navigate = useNavigate();
 
-    const sendCode = async (code, state, count) => {
-        const res = await API.get(`/api/oauth/${props.type}?code=${code}&state=${state}`);
-        const { success, message, data } = res.data;
-        if (success) {
-            if (message === 'bind') {
-                showSuccess('绑定成功！');
-                navigate('/setting');
-            } else {
-                userDispatch({ type: 'login', payload: data });
-                localStorage.setItem('user', JSON.stringify(data));
-                setUserData(data);
-                updateAPI()
-                showSuccess('登录成功！');
-                navigate('/token');
-            }
-        } else {
-            showError(message);
-            if (count === 0) {
-                setPrompt(`操作失败，重定向至登录界面中...`);
-                navigate('/setting'); // in case this is failed to bind GitHub
-                return;
-            }
-            count++;
-            setPrompt(`出现错误，第 ${count} 次重试中...`);
-            await new Promise((resolve) => setTimeout(resolve, count * 2000));
-            await sendCode(code, state, count);
-        }
-    };
-
-    useEffect(() => {
-        let code = searchParams.get('code');
-        let state = searchParams.get('state');
-        sendCode(code, state, 0).then();
-    }, []);
-
-    return (
-        <Segment style={{ minHeight: '300px' }}>
-            <Dimmer active inverted>
-                <Loader size='large'>{prompt}</Loader>
-            </Dimmer>
-        </Segment>
+  const sendCode = async (code, state, count) => {
+    const res = await API.get(
+      `/api/oauth/${props.type}?code=${code}&state=${state}`,
     );
+    const { success, message, data } = res.data;
+    if (success) {
+      if (message === 'bind') {
+        showSuccess('绑定成功！');
+        navigate('/setting');
+      } else {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        setUserData(data);
+        updateAPI();
+        showSuccess('登录成功！');
+        navigate('/token');
+      }
+    } else {
+      showError(message);
+      if (count === 0) {
+        setPrompt(`操作失败，重定向至登录界面中...`);
+        navigate('/setting'); // in case this is failed to bind GitHub
+        return;
+      }
+      count++;
+      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      await new Promise((resolve) => setTimeout(resolve, count * 2000));
+      await sendCode(code, state, count);
+    }
+  };
+
+  useEffect(() => {
+    let code = searchParams.get('code');
+    let state = searchParams.get('state');
+    sendCode(code, state, 0).then();
+  }, []);
+
+  return (
+    <Segment style={{ minHeight: '300px' }}>
+      <Dimmer active inverted>
+        <Loader size='large'>{prompt}</Loader>
+      </Dimmer>
+    </Segment>
+  );
 };
 
 export default OAuth2Callback;

web/src/components/OIDCIcon.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Icon } from '@douyinfe/semi-ui';
+
+const OIDCIcon = (props) => {
+  function CustomIcon() {
+    return (
+      <svg
+        t='1723135116886'
+        className='icon'
+        viewBox='0 0 1024 1024'
+        version='1.1'
+        xmlns='http://www.w3.org/2000/svg'
+        p-id='10969'
+        width='1em'
+        height='1em'
+      >
+        <path
+          d='M512 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448z m0-882.6c-239.7 0-434.6 195-434.6 434.6s195 434.6 434.6 434.6 434.6-195 434.6-434.6S751.7 77.4 512 77.4z'
+          p-id='10970'
+          fill='#2c2c2c'
+          stroke='#2c2c2c'
+          stroke-width='60'
+        ></path>
+        <path
+          d='M197.7 512c0-78.3 31.6-98.8 87.2-98.8 56.2 0 87.2 20.5 87.2 98.8s-31 98.8-87.2 98.8c-55.7 0-87.2-20.5-87.2-98.8z m130.4 0c0-46.8-7.8-64.5-43.2-64.5-35.2 0-42.9 17.7-42.9 64.5 0 47.1 7.8 63.7 42.9 63.7 35.4 0 43.2-16.6 43.2-63.7zM409.7 415.9h42.1V608h-42.1V415.9zM653.9 512c0 74.2-37.1 96.1-93.6 96.1h-65.9V415.9h65.9c56.5 0 93.6 16.1 93.6 96.1z m-43.5 0c0-49.3-17.7-60.6-52.3-60.6h-21.6v120.7h21.6c35.4 0 52.3-13.3 52.3-60.1zM686.5 512c0-74.2 36.3-98.8 92.7-98.8 18.3 0 33.2 2.2 44.8 6.4v36.3c-11.9-4.2-26-6.6-42.1-6.6-34.6 0-49.8 15.5-49.8 62.6 0 50.1 15.2 62.6 49.3 62.6 15.8 0 30.2-2.2 44.8-7.5v36c-11.3 4.7-28.5 8-46.8 8-56.1-0.2-92.9-18.7-92.9-99z'
+          p-id='10971'
+          fill='#2c2c2c'
+          stroke='#2c2c2c'
+          stroke-width='20'
+        ></path>
+      </svg>
+    );
+  }
+
+  return <Icon svg={<CustomIcon />} />;
+};
+
+export default OIDCIcon;

web/src/components/OperationSetting.js

@@ -7,12 +7,10 @@ import SettingsLog from '../pages/Setting/Operation/SettingsLog.js';
 import SettingsDataDashboard from '../pages/Setting/Operation/SettingsDataDashboard.js';
 import SettingsMonitoring from '../pages/Setting/Operation/SettingsMonitoring.js';
 import SettingsCreditLimit from '../pages/Setting/Operation/SettingsCreditLimit.js';
-import SettingsMagnification from '../pages/Setting/Operation/SettingsMagnification.js';
 import ModelSettingsVisualEditor from '../pages/Setting/Operation/ModelSettingsVisualEditor.js';
 import GroupRatioSettings from '../pages/Setting/Operation/GroupRatioSettings.js';
 import ModelRatioSettings from '../pages/Setting/Operation/ModelRatioSettings.js';
 
-
 import { API, showError, showSuccess } from '../helpers';
 import SettingsChats from '../pages/Setting/Operation/SettingsChats.js';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +57,7 @@ const OperationSetting = () => {
     DataExportInterval: 5,
     DefaultCollapseSidebar: false, // 默认折叠侧边栏
     RetryTimes: 0,
-    Chats: "[]",
+    Chats: '[]',
     DemoSiteEnabled: false,
     SelfUseModeEnabled: false,
     AutomaticDisableKeywords: '',
@@ -155,14 +153,14 @@ const OperationSetting = () => {
         </Card>
         {/* 合并模型倍率设置和可视化倍率设置 */}
         <Card style={{ marginTop: '10px' }}>
-          <Tabs type="line">
-            <Tabs.TabPane tab={t('模型倍率设置')} itemKey="model">
+          <Tabs type='line'>
+            <Tabs.TabPane tab={t('模型倍率设置')} itemKey='model'>
               <ModelRatioSettings options={inputs} refresh={onRefresh} />
             </Tabs.TabPane>
-            <Tabs.TabPane tab={t('可视化倍率设置')} itemKey="visual">
+            <Tabs.TabPane tab={t('可视化倍率设置')} itemKey='visual'>
               <ModelSettingsVisualEditor options={inputs} refresh={onRefresh} />
             </Tabs.TabPane>
-            <Tabs.TabPane tab={t('未设置倍率模型')} itemKey="unset_models">
+            <Tabs.TabPane tab={t('未设置倍率模型')} itemKey='unset_models'>
               <ModelRatioNotSetEditor options={inputs} refresh={onRefresh} />
             </Tabs.TabPane>
           </Tabs>

web/src/components/OtherSetting.js

@@ -1,5 +1,14 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Banner, Button, Col, Form, Row, Modal, Space } from '@douyinfe/semi-ui';
+import {
+  Banner,
+  Button,
+  Col,
+  Form,
+  Row,
+  Modal,
+  Space,
+  Card,
+} from '@douyinfe/semi-ui';
 import { API, showError, showSuccess, timestamp2string } from '../helpers';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
@@ -46,7 +55,7 @@ const OtherSetting = () => {
     HomePageContent: false,
     About: false,
     Footer: false,
-    CheckUpdate: false
+    CheckUpdate: false,
   });
   const handleInputChange = async (value, e) => {
     const name = e.target.id;
@@ -151,27 +160,30 @@ const OtherSetting = () => {
 
   const checkUpdate = async () => {
     try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, CheckUpdate: true }));
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        CheckUpdate: true,
+      }));
       // Use a CORS proxy to avoid direct cross-origin requests to GitHub API
       // Option 1: Use a public CORS proxy service
       // const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
       // const res = await API.get(
       //   `${proxyUrl}https://api.github.com/repos/Calcium-Ion/new-api/releases/latest`,
       // );
-      
+
       // Option 2: Use the JSON proxy approach which often works better with GitHub API
       const res = await fetch(
         'https://api.github.com/repos/Calcium-Ion/new-api/releases/latest',
         {
           headers: {
-            'Accept': 'application/json',
+            Accept: 'application/json',
             'Content-Type': 'application/json',
             // Adding User-Agent which is often required by GitHub API
-            'User-Agent': 'new-api-update-checker'
-          }
-        }
-      ).then(response => response.json());
-      
+            'User-Agent': 'new-api-update-checker',
+          },
+        },
+      ).then((response) => response.json());
+
       // Option 3: Use a local proxy endpoint
       // Create a cached version of the response to avoid frequent GitHub API calls
       // const res = await API.get('/api/status/github-latest-release');
@@ -190,7 +202,10 @@ const OtherSetting = () => {
       console.error('Failed to check for updates:', error);
       showError('检查更新失败，请稍后再试');
     } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, CheckUpdate: false }));
+      setLoadingInput((loadingInput) => ({
+        ...loadingInput,
+        CheckUpdate: false,
+      }));
     }
   };
   const getOptions = async () => {
@@ -217,7 +232,10 @@ const OtherSetting = () => {
 
   // Function to open GitHub release page
   const openGitHubRelease = () => {
-    window.open(`https://github.com/Calcium-Ion/new-api/releases/tag/${updateData.tag_name}`, '_blank');
+    window.open(
+      `https://github.com/Calcium-Ion/new-api/releases/tag/${updateData.tag_name}`,
+      '_blank',
+    );
   };
 
   const getStartTimeString = () => {
@@ -227,120 +245,149 @@ const OtherSetting = () => {
 
   return (
     <Row>
-      <Col span={24}>
+      <Col
+        span={24}
+        style={{
+          marginTop: '10px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+        }}
+      >
         {/* 版本信息 */}
-        <Form style={{ marginBottom: 15 }}>
-          <Form.Section text={t('系统信息')}>
-            <Row>
-              <Col span={16}>
-                <Space>
+        <Form>
+          <Card>
+            <Form.Section text={t('系统信息')}>
+              <Row>
+                <Col span={16}>
+                  <Space>
+                    <Text>
+                      {t('当前版本')}：
+                      {statusState?.status?.version || t('未知')}
+                    </Text>
+                    <Button
+                      type='primary'
+                      onClick={checkUpdate}
+                      loading={loadingInput['CheckUpdate']}
+                    >
+                      {t('检查更新')}
+                    </Button>
+                  </Space>
+                </Col>
+              </Row>
+              <Row>
+                <Col span={16}>
                   <Text>
-                    {t('当前版本')}：{statusState?.status?.version || t('未知')}
+                    {t('启动时间')}：{getStartTimeString()}
                   </Text>
-                  <Button type="primary" onClick={checkUpdate} loading={loadingInput['CheckUpdate']}>
-                    {t('检查更新')}
-                  </Button>
-                </Space>
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                <Text>{t('启动时间')}：{getStartTimeString()}</Text>
-              </Col>
-            </Row>
-          </Form.Section>
+                </Col>
+              </Row>
+            </Form.Section>
+          </Card>
         </Form>
         {/* 通用设置 */}
         <Form
           values={inputs}
           getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
-          style={{ marginBottom: 15 }}
         >
-          <Form.Section text={t('通用设置')}>
-            <Form.TextArea
-              label={t('公告')}
-              placeholder={t('在此输入新的公告内容，支持 Markdown & HTML 代码')}
-              field={'Notice'}
-              onChange={handleInputChange}
-              style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-              autosize={{ minRows: 6, maxRows: 12 }}
-            />
-            <Button onClick={submitNotice} loading={loadingInput['Notice']}>
-              {t('设置公告')}
-            </Button>
-          </Form.Section>
+          <Card>
+            <Form.Section text={t('通用设置')}>
+              <Form.TextArea
+                label={t('公告')}
+                placeholder={t(
+                  '在此输入新的公告内容，支持 Markdown & HTML 代码',
+                )}
+                field={'Notice'}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+              />
+              <Button onClick={submitNotice} loading={loadingInput['Notice']}>
+                {t('设置公告')}
+              </Button>
+            </Form.Section>
+          </Card>
         </Form>
         {/* 个性化设置 */}
         <Form
           values={inputs}
           getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
-          style={{ marginBottom: 15 }}
         >
-          <Form.Section text={t('个性化设置')}>
-            <Form.Input
-              label={t('系统名称')}
-              placeholder={t('在此输入系统名称')}
-              field={'SystemName'}
-              onChange={handleInputChange}
-            />
-            <Button
-              onClick={submitSystemName}
-              loading={loadingInput['SystemName']}
-            >
-              {t('设置系统名称')}
-            </Button>
-            <Form.Input
-              label={t('Logo 图片地址')}
-              placeholder={t('在此输入 Logo 图片地址')}
-              field={'Logo'}
-              onChange={handleInputChange}
-            />
-            <Button onClick={submitLogo} loading={loadingInput['Logo']}>
-              {t('设置 Logo')}
-            </Button>
-            <Form.TextArea
-              label={t('首页内容')}
-              placeholder={t('在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页')}
-              field={'HomePageContent'}
-              onChange={handleInputChange}
-              style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-              autosize={{ minRows: 6, maxRows: 12 }}
-            />
-            <Button
-              onClick={() => submitOption('HomePageContent')}
-              loading={loadingInput['HomePageContent']}
-            >
-              {t('设置首页内容')}
-            </Button>
-            <Form.TextArea
-              label={t('关于')}
-              placeholder={t('在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面')}
-              field={'About'}
-              onChange={handleInputChange}
-              style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-              autosize={{ minRows: 6, maxRows: 12 }}
-            />
-            <Button onClick={submitAbout} loading={loadingInput['About']}>
-              {t('设置关于')}
-            </Button>
-            {/*  */}
-            <Banner
-              fullMode={false}
-              type='info'
-              description={t('移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目')}
-              closeIcon={null}
-              style={{ marginTop: 15 }}
-            />
-            <Form.Input
-              label={t('页脚')}
-              placeholder={t('在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码')}
-              field={'Footer'}
-              onChange={handleInputChange}
-            />
-            <Button onClick={submitFooter} loading={loadingInput['Footer']}>
-              {t('设置页脚')}
-            </Button>
-          </Form.Section>
+          <Card>
+            <Form.Section text={t('个性化设置')}>
+              <Form.Input
+                label={t('系统名称')}
+                placeholder={t('在此输入系统名称')}
+                field={'SystemName'}
+                onChange={handleInputChange}
+              />
+              <Button
+                onClick={submitSystemName}
+                loading={loadingInput['SystemName']}
+              >
+                {t('设置系统名称')}
+              </Button>
+              <Form.Input
+                label={t('Logo 图片地址')}
+                placeholder={t('在此输入 Logo 图片地址')}
+                field={'Logo'}
+                onChange={handleInputChange}
+              />
+              <Button onClick={submitLogo} loading={loadingInput['Logo']}>
+                {t('设置 Logo')}
+              </Button>
+              <Form.TextArea
+                label={t('首页内容')}
+                placeholder={t(
+                  '在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
+                )}
+                field={'HomePageContent'}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+              />
+              <Button
+                onClick={() => submitOption('HomePageContent')}
+                loading={loadingInput['HomePageContent']}
+              >
+                {t('设置首页内容')}
+              </Button>
+              <Form.TextArea
+                label={t('关于')}
+                placeholder={t(
+                  '在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
+                )}
+                field={'About'}
+                onChange={handleInputChange}
+                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
+                autosize={{ minRows: 6, maxRows: 12 }}
+              />
+              <Button onClick={submitAbout} loading={loadingInput['About']}>
+                {t('设置关于')}
+              </Button>
+              {/*  */}
+              <Banner
+                fullMode={false}
+                type='info'
+                description={t(
+                  '移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
+                )}
+                closeIcon={null}
+                style={{ marginTop: 15 }}
+              />
+              <Form.Input
+                label={t('页脚')}
+                placeholder={t(
+                  '在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
+                )}
+                field={'Footer'}
+                onChange={handleInputChange}
+              />
+              <Button onClick={submitFooter} loading={loadingInput['Footer']}>
+                {t('设置页脚')}
+              </Button>
+            </Form.Section>
+          </Card>
         </Form>
       </Col>
       <Modal
@@ -348,16 +395,16 @@ const OtherSetting = () => {
         visible={showUpdateModal}
         onCancel={() => setShowUpdateModal(false)}
         footer={[
-          <Button 
-            key="details" 
-            type="primary" 
+          <Button
+            key='details'
+            type='primary'
             onClick={() => {
               setShowUpdateModal(false);
               openGitHubRelease();
             }}
           >
             {t('详情')}
-          </Button>
+          </Button>,
         ]}
       >
         <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>

web/src/components/PageLayout.js

@@ -13,7 +13,6 @@ import { UserContext } from '../context/User/index.js';
 import { StatusContext } from '../context/Status/index.js';
 const { Sider, Content, Header, Footer } = Layout;
 
-
 const PageLayout = () => {
   const [userState, userDispatch] = useContext(UserContext);
   const [statusState, statusDispatch] = useContext(StatusContext);
@@ -62,31 +61,104 @@ const PageLayout = () => {
     if (savedLang) {
       i18n.changeLanguage(savedLang);
     }
+
+    // 默认显示侧边栏
+    styleDispatch({ type: 'SET_SIDER', payload: true });
   }, [i18n]);
 
+  // 获取侧边栏折叠状态
+  const isSidebarCollapsed =
+    localStorage.getItem('default_collapse_sidebar') === 'true';
+
   return (
-    <Layout style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <Header>
+    <Layout
+      style={{
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: styleState.isMobile ? 'visible' : 'hidden',
+      }}
+    >
+      <Header
+        style={{
+          padding: 0,
+          height: 'auto',
+          lineHeight: 'normal',
+          position: styleState.isMobile ? 'sticky' : 'fixed',
+          width: '100%',
+          top: 0,
+          zIndex: 100,
+          boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)',
+        }}
+      >
         <HeaderBar />
       </Header>
-      <Layout style={{ flex: 1, overflow: 'hidden' }}>
-        <Sider>
-          {styleState.showSider ? <SiderBar /> : null}
-        </Sider>
-        <Layout>
+      <Layout
+        style={{
+          marginTop: styleState.isMobile ? '0' : '56px',
+          height: styleState.isMobile ? 'auto' : 'calc(100vh - 56px)',
+          overflow: styleState.isMobile ? 'visible' : 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {styleState.showSider && (
+          <Sider
+            style={{
+              position: 'fixed',
+              left: 0,
+              top: '56px',
+              zIndex: 99,
+              background: 'var(--semi-color-bg-1)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+              border: 'none',
+              paddingRight: '0',
+              height: 'calc(100vh - 56px)',
+            }}
+          >
+            <SiderBar />
+          </Sider>
+        )}
+        <Layout
+          style={{
+            marginLeft: styleState.isMobile
+              ? '0'
+              : styleState.showSider
+                ? styleState.siderCollapsed
+                  ? '60px'
+                  : '200px'
+                : '0',
+            transition: 'margin-left 0.3s ease',
+            flex: '1 1 auto',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
           <Content
-            style={{ overflowY: 'auto', padding: styleState.shouldInnerPadding? '24px': '0' }}
+            style={{
+              flex: '1 0 auto',
+              overflowY: styleState.isMobile ? 'visible' : 'auto',
+              WebkitOverflowScrolling: 'touch',
+              padding: styleState.shouldInnerPadding ? '24px' : '0',
+              position: 'relative',
+              marginTop: styleState.isMobile ? '2px' : '0',
+            }}
           >
             <App />
           </Content>
-          <Layout.Footer>
+          <Layout.Footer
+            style={{
+              flex: '0 0 auto',
+              width: '100%',
+            }}
+          >
             <FooterBar />
           </Layout.Footer>
         </Layout>
       </Layout>
       <ToastContainer />
     </Layout>
-  )
-}
+  );
+};
 
-export default PageLayout;
+export default PageLayout;

web/src/components/RateLimitSetting.js

@@ -1,17 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
-import SettingsGeneral from '../pages/Setting/Operation/SettingsGeneral.js';
-import SettingsDrawing from '../pages/Setting/Operation/SettingsDrawing.js';
-import SettingsSensitiveWords from '../pages/Setting/Operation/SettingsSensitiveWords.js';
-import SettingsLog from '../pages/Setting/Operation/SettingsLog.js';
-import SettingsDataDashboard from '../pages/Setting/Operation/SettingsDataDashboard.js';
-import SettingsMonitoring from '../pages/Setting/Operation/SettingsMonitoring.js';
-import SettingsCreditLimit from '../pages/Setting/Operation/SettingsCreditLimit.js';
-import SettingsMagnification from '../pages/Setting/Operation/SettingsMagnification.js';
-import ModelSettingsVisualEditor from '../pages/Setting/Operation/ModelSettingsVisualEditor.js';
-import GroupRatioSettings from '../pages/Setting/Operation/GroupRatioSettings.js';
-import ModelRatioSettings from '../pages/Setting/Operation/ModelRatioSettings.js';
-
 
 import { API, showError, showSuccess } from '../helpers';
 import SettingsChats from '../pages/Setting/Operation/SettingsChats.js';
@@ -35,9 +23,7 @@ const RateLimitSetting = () => {
     if (success) {
       let newInputs = {};
       data.forEach((item) => {
-        if (
-          item.key.endsWith('Enabled')
-        ) {
+        if (item.key.endsWith('Enabled')) {
           newInputs[item.key] = item.value === 'true' ? true : false;
         } else {
           newInputs[item.key] = item.value;

web/src/components/RedemptionsTable.js

@@ -10,7 +10,8 @@ import {
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
 import {
-  Button, Divider,
+  Button,
+  Divider,
   Form,
   Modal,
   Popconfirm,
@@ -193,15 +194,17 @@ const RedemptionsTable = () => {
   };
 
   const loadRedemptions = async (startIdx, pageSize) => {
-    const res = await API.get(`/api/redemption/?p=${startIdx}&page_size=${pageSize}`);
+    const res = await API.get(
+      `/api/redemption/?p=${startIdx}&page_size=${pageSize}`,
+    );
     const { success, message, data } = res.data;
     if (success) {
-        const newPageData = data.items;
-        setActivePage(data.page);
-        setTokenCount(data.total);
-        setRedemptionFormat(newPageData);
+      const newPageData = data.items;
+      setActivePage(data.page);
+      setTokenCount(data.total);
+      setRedemptionFormat(newPageData);
     } else {
-        showError(message);
+      showError(message);
     }
     setLoading(false);
   };
@@ -282,19 +285,21 @@ const RedemptionsTable = () => {
 
   const searchRedemptions = async (keyword, page, pageSize) => {
     if (searchKeyword === '') {
-        await loadRedemptions(page, pageSize);
-        return;
+      await loadRedemptions(page, pageSize);
+      return;
     }
     setSearching(true);
-    const res = await API.get(`/api/redemption/search?keyword=${keyword}&p=${page}&page_size=${pageSize}`);
+    const res = await API.get(
+      `/api/redemption/search?keyword=${keyword}&p=${page}&page_size=${pageSize}`,
+    );
     const { success, message, data } = res.data;
     if (success) {
-        const newPageData = data.items;
-        setActivePage(data.page);
-        setTokenCount(data.total);
-        setRedemptionFormat(newPageData);
+      const newPageData = data.items;
+      setActivePage(data.page);
+      setTokenCount(data.total);
+      setRedemptionFormat(newPageData);
     } else {
-        showError(message);
+      showError(message);
     }
     setSearching(false);
   };
@@ -355,9 +360,11 @@ const RedemptionsTable = () => {
         visiable={showEdit}
         handleClose={closeEdit}
       ></EditRedemption>
-      <Form onSubmit={()=> {
-        searchRedemptions(searchKeyword, activePage, pageSize).then();
-      }}>
+      <Form
+        onSubmit={() => {
+          searchRedemptions(searchKeyword, activePage, pageSize).then();
+        }}
+      >
         <Form.Input
           label={t('搜索关键字')}
           field='keyword'
@@ -369,35 +376,36 @@ const RedemptionsTable = () => {
           onChange={handleKeywordChange}
         />
       </Form>
-      <Divider style={{margin:'5px 0 15px 0'}}/>
+      <Divider style={{ margin: '5px 0 15px 0' }} />
       <div>
         <Button
-            theme='light'
-            type='primary'
-            style={{ marginRight: 8 }}
-            onClick={() => {
-              setEditingRedemption({
-                id: undefined,
-              });
-              setShowEdit(true);
-            }}
+          theme='light'
+          type='primary'
+          style={{ marginRight: 8 }}
+          onClick={() => {
+            setEditingRedemption({
+              id: undefined,
+            });
+            setShowEdit(true);
+          }}
         >
           {t('添加兑换码')}
         </Button>
         <Button
-            label={t('复制所选兑换码')}
-            type='warning'
-            onClick={async () => {
-              if (selectedKeys.length === 0) {
-                showError(t('请至少选择一个兑换码！'));
-                return;
-              }
-              let keys = '';
-              for (let i = 0; i < selectedKeys.length; i++) {
-                keys += selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
-              }
-              await copyText(keys);
-            }}
+          label={t('复制所选兑换码')}
+          type='warning'
+          onClick={async () => {
+            if (selectedKeys.length === 0) {
+              showError(t('请至少选择一个兑换码！'));
+              return;
+            }
+            let keys = '';
+            for (let i = 0; i < selectedKeys.length; i++) {
+              keys +=
+                selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
+            }
+            await copyText(keys);
+          }}
         >
           {t('复制所选兑换码到剪贴板')}
         </Button>
@@ -417,7 +425,7 @@ const RedemptionsTable = () => {
             t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
               start: page.currentStart,
               end: page.currentEnd,
-              total: tokenCount
+              total: tokenCount,
             }),
           onPageSizeChange: (size) => {
             setPageSize(size);

web/src/components/RegisterForm.js

@@ -1,12 +1,32 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { API, getLogo, showError, showInfo, showSuccess, updateAPI } from '../helpers';
+import {
+  API,
+  getLogo,
+  showError,
+  showInfo,
+  showSuccess,
+  updateAPI,
+} from '../helpers';
 import Turnstile from 'react-turnstile';
-import { Button, Card, Divider, Form, Icon, Layout, Modal } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Card,
+  Divider,
+  Form,
+  Icon,
+  Layout,
+  Modal,
+} from '@douyinfe/semi-ui';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import { IconGithubLogo } from '@douyinfe/semi-icons';
-import { onGitHubOAuthClicked, onLinuxDOOAuthClicked } from './utils.js';
+import {
+  onGitHubOAuthClicked,
+  onLinuxDOOAuthClicked,
+  onOIDCClicked,
+} from './utils.js';
+import OIDCIcon from './OIDCIcon.js';
 import LinuxDoIcon from './LinuxDoIcon.js';
 import WeChatIcon from './WeChatIcon.js';
 import TelegramLoginButton from 'react-telegram-login/src';
@@ -21,7 +41,7 @@ const RegisterForm = () => {
     password: '',
     password2: '',
     email: '',
-    verification_code: ''
+    verification_code: '',
   });
   const { username, password, password2 } = inputs;
   const [showEmailVerification, setShowEmailVerification] = useState(false);
@@ -53,7 +73,6 @@ const RegisterForm = () => {
     }
   });
 
-
   const onWeChatLoginClicked = () => {
     setShowWeChatLoginModal(true);
   };
@@ -105,7 +124,7 @@ const RegisterForm = () => {
       inputs.aff_code = affCode;
       const res = await API.post(
         `/api/user/register?turnstile=${turnstileToken}`,
-        inputs
+        inputs,
       );
       const { success, message } = res.data;
       if (success) {
@@ -126,7 +145,7 @@ const RegisterForm = () => {
     }
     setLoading(true);
     const res = await API.get(
-      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
     );
     const { success, message } = res.data;
     if (success) {
@@ -168,7 +187,6 @@ const RegisterForm = () => {
     }
   };
 
-
   return (
     <div>
       <Layout>
@@ -178,7 +196,7 @@ const RegisterForm = () => {
             style={{
               justifyContent: 'center',
               display: 'flex',
-              marginTop: 120
+              marginTop: 120,
             }}
           >
             <div style={{ width: 500 }}>
@@ -186,28 +204,28 @@ const RegisterForm = () => {
                 <Title heading={2} style={{ textAlign: 'center' }}>
                   {t('新用户注册')}
                 </Title>
-                <Form size="large">
+                <Form size='large'>
                   <Form.Input
                     field={'username'}
                     label={t('用户名')}
                     placeholder={t('用户名')}
-                    name="username"
+                    name='username'
                     onChange={(value) => handleChange('username', value)}
                   />
                   <Form.Input
                     field={'password'}
                     label={t('密码')}
                     placeholder={t('输入密码，最短 8 位，最长 20 位')}
-                    name="password"
-                    type="password"
+                    name='password'
+                    type='password'
                     onChange={(value) => handleChange('password', value)}
                   />
                   <Form.Input
                     field={'password2'}
                     label={t('确认密码')}
                     placeholder={t('确认密码')}
-                    name="password2"
-                    type="password"
+                    name='password2'
+                    type='password'
                     onChange={(value) => handleChange('password2', value)}
                   />
                   {showEmailVerification ? (
@@ -217,10 +235,13 @@ const RegisterForm = () => {
                         label={t('邮箱')}
                         placeholder={t('输入邮箱地址')}
                         onChange={(value) => handleChange('email', value)}
-                        name="email"
-                        type="email"
+                        name='email'
+                        type='email'
                         suffix={
-                          <Button onClick={sendVerificationCode} disabled={loading}>
+                          <Button
+                            onClick={sendVerificationCode}
+                            disabled={loading}
+                          >
                             {t('获取验证码')}
                           </Button>
                         }
@@ -229,8 +250,10 @@ const RegisterForm = () => {
                         field={'verification_code'}
                         label={t('验证码')}
                         placeholder={t('输入验证码')}
-                        onChange={(value) => handleChange('verification_code', value)}
-                        name="verification_code"
+                        onChange={(value) =>
+                          handleChange('verification_code', value)
+                        }
+                        name='verification_code'
                       />
                     </>
                   ) : (
@@ -251,17 +274,16 @@ const RegisterForm = () => {
                   style={{
                     display: 'flex',
                     justifyContent: 'space-between',
-                    marginTop: 20
+                    marginTop: 20,
                   }}
                 >
                   <Text>
                     {t('已有账户？')}
-                    <Link to="/login">
-                      {t('点击登录')}
-                    </Link>
+                    <Link to='/login'>{t('点击登录')}</Link>
                   </Text>
                 </div>
                 {status.github_oauth ||
+                status.oidc_enabled ||
                 status.wechat_login ||
                 status.telegram_oauth ||
                 status.linuxdo_oauth ? (
@@ -287,6 +309,20 @@ const RegisterForm = () => {
                       ) : (
                         <></>
                       )}
+                      {status.oidc_enabled ? (
+                        <Button
+                          type='primary'
+                          icon={<OIDCIcon />}
+                          onClick={() =>
+                            onOIDCClicked(
+                              status.oidc_authorization_endpoint,
+                              status.oidc_client_id,
+                            )
+                          }
+                        />
+                      ) : (
+                        <></>
+                      )}
                       {status.linuxdo_oauth ? (
                         <Button
                           icon={<LinuxDoIcon />}
@@ -352,7 +388,9 @@ const RegisterForm = () => {
                 </div>
                 <div style={{ textAlign: 'center' }}>
                   <p>
-                    {t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}
+                    {t(
+                      '微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）',
+                    )}
                   </p>
                 </div>
                 <Form size='large'>

web/src/components/SafetySetting.js

@@ -1,790 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Divider,
-  Form,
-  Grid,
-  Header,
-  Message,
-  Modal,
-} from 'semantic-ui-react';
-import { API, removeTrailingSlash, showError, verifyJSON } from '../helpers';
-
-import { useTheme } from '../context/Theme';
-
-const SafetySetting = () => {
-  let [inputs, setInputs] = useState({
-    PasswordLoginEnabled: '',
-    PasswordRegisterEnabled: '',
-    EmailVerificationEnabled: '',
-    GitHubOAuthEnabled: '',
-    GitHubClientId: '',
-    GitHubClientSecret: '',
-    Notice: '',
-    SMTPServer: '',
-    SMTPPort: '',
-    SMTPAccount: '',
-    SMTPFrom: '',
-    SMTPToken: '',
-    ServerAddress: '',
-    WorkerUrl: '',
-    WorkerValidKey: '',
-    EpayId: '',
-    EpayKey: '',
-    Price: 7.3,
-    MinTopUp: 1,
-    TopupGroupRatio: '',
-    PayAddress: '',
-    CustomCallbackAddress: '',
-    Footer: '',
-    WeChatAuthEnabled: '',
-    WeChatServerAddress: '',
-    WeChatServerToken: '',
-    WeChatAccountQRCodeImageURL: '',
-    TurnstileCheckEnabled: '',
-    TurnstileSiteKey: '',
-    TurnstileSecretKey: '',
-    RegisterEnabled: '',
-    EmailDomainRestrictionEnabled: '',
-    EmailAliasRestrictionEnabled: '',
-    SMTPSSLEnabled: '',
-    EmailDomainWhitelist: [],
-    // telegram login
-    TelegramOAuthEnabled: '',
-    TelegramBotToken: '',
-    TelegramBotName: '',
-  });
-  const [originInputs, setOriginInputs] = useState({});
-  let [loading, setLoading] = useState(false);
-  const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
-  const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
-  const [showPasswordWarningModal, setShowPasswordWarningModal] =
-    useState(false);
-
-  const theme = useTheme();
-  const isDark = theme === 'dark';
-
-  const getOptions = async () => {
-    const res = await API.get('/api/option/');
-    const { success, message, data } = res.data;
-    if (success) {
-      let newInputs = {};
-      data.forEach((item) => {
-        if (item.key === 'TopupGroupRatio') {
-          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
-        }
-        newInputs[item.key] = item.value;
-      });
-      setInputs({
-        ...newInputs,
-        EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(','),
-      });
-      setOriginInputs(newInputs);
-
-      setEmailDomainWhitelist(
-        newInputs.EmailDomainWhitelist.split(',').map((item) => {
-          return { key: item, text: item, value: item };
-        }),
-      );
-    } else {
-      showError(message);
-    }
-  };
-
-  useEffect(() => {
-    getOptions().then();
-  }, []);
-  useEffect(() => {}, [inputs.EmailDomainWhitelist]);
-
-  const updateOption = async (key, value) => {
-    setLoading(true);
-    switch (key) {
-      case 'PasswordLoginEnabled':
-      case 'PasswordRegisterEnabled':
-      case 'EmailVerificationEnabled':
-      case 'GitHubOAuthEnabled':
-      case 'WeChatAuthEnabled':
-      case 'TelegramOAuthEnabled':
-      case 'TurnstileCheckEnabled':
-      case 'EmailDomainRestrictionEnabled':
-      case 'EmailAliasRestrictionEnabled':
-      case 'SMTPSSLEnabled':
-      case 'RegisterEnabled':
-        value = inputs[key] === 'true' ? 'false' : 'true';
-        break;
-      default:
-        break;
-    }
-    const res = await API.put('/api/option/', {
-      key,
-      value,
-    });
-    const { success, message } = res.data;
-    if (success) {
-      if (key === 'EmailDomainWhitelist') {
-        value = value.split(',');
-      }
-      if (key === 'Price') {
-        value = parseFloat(value);
-      }
-      setInputs((inputs) => ({
-        ...inputs,
-        [key]: value,
-      }));
-    } else {
-      showError(message);
-    }
-    setLoading(false);
-  };
-
-  const handleInputChange = async (e, { name, value }) => {
-    if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
-      // block disabling password login
-      setShowPasswordWarningModal(true);
-      return;
-    }
-    if (
-      name === 'Notice' ||
-      (name.startsWith('SMTP') && name !== 'SMTPSSLEnabled') ||
-      name === 'ServerAddress' ||
-      name === 'WorkerUrl' ||
-      name === 'WorkerValidKey' ||
-      name === 'EpayId' ||
-      name === 'EpayKey' ||
-      name === 'Price' ||
-      name === 'PayAddress' ||
-      name === 'GitHubClientId' ||
-      name === 'GitHubClientSecret' ||
-      name === 'WeChatServerAddress' ||
-      name === 'WeChatServerToken' ||
-      name === 'WeChatAccountQRCodeImageURL' ||
-      name === 'TurnstileSiteKey' ||
-      name === 'TurnstileSecretKey' ||
-      name === 'EmailDomainWhitelist' ||
-      name === 'TopupGroupRatio' ||
-      name === 'TelegramBotToken' ||
-      name === 'TelegramBotName'
-    ) {
-      setInputs((inputs) => ({ ...inputs, [name]: value }));
-    } else {
-      await updateOption(name, value);
-    }
-  };
-
-  const submitServerAddress = async () => {
-    let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
-    await updateOption('ServerAddress', ServerAddress);
-  };
-
-  const submitWorker = async () => {
-    let WorkerUrl = removeTrailingSlash(inputs.WorkerUrl);
-    await updateOption('WorkerUrl', WorkerUrl);
-    if (inputs.WorkerValidKey !== '') {
-      await updateOption('WorkerValidKey', inputs.WorkerValidKey);
-    }
-  }
-
-  const submitPayAddress = async () => {
-    if (inputs.ServerAddress === '') {
-      showError('请先填写服务器地址');
-      return;
-    }
-    if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
-      if (!verifyJSON(inputs.TopupGroupRatio)) {
-        showError('充值分组倍率不是合法的 JSON 字符串');
-        return;
-      }
-      await updateOption('TopupGroupRatio', inputs.TopupGroupRatio);
-    }
-    let PayAddress = removeTrailingSlash(inputs.PayAddress);
-    await updateOption('PayAddress', PayAddress);
-    if (inputs.EpayId !== '') {
-      await updateOption('EpayId', inputs.EpayId);
-    }
-    if (inputs.EpayKey !== undefined && inputs.EpayKey !== '') {
-      await updateOption('EpayKey', inputs.EpayKey);
-    }
-    await updateOption('Price', '' + inputs.Price);
-  };
-
-  const submitSMTP = async () => {
-    if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
-      await updateOption('SMTPServer', inputs.SMTPServer);
-    }
-    if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
-      await updateOption('SMTPAccount', inputs.SMTPAccount);
-    }
-    if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
-      await updateOption('SMTPFrom', inputs.SMTPFrom);
-    }
-    if (
-      originInputs['SMTPPort'] !== inputs.SMTPPort &&
-      inputs.SMTPPort !== ''
-    ) {
-      await updateOption('SMTPPort', inputs.SMTPPort);
-    }
-    if (
-      originInputs['SMTPToken'] !== inputs.SMTPToken &&
-      inputs.SMTPToken !== ''
-    ) {
-      await updateOption('SMTPToken', inputs.SMTPToken);
-    }
-  };
-
-  const submitEmailDomainWhitelist = async () => {
-    if (
-      originInputs['EmailDomainWhitelist'] !==
-        inputs.EmailDomainWhitelist.join(',') &&
-      inputs.SMTPToken !== ''
-    ) {
-      await updateOption(
-        'EmailDomainWhitelist',
-        inputs.EmailDomainWhitelist.join(','),
-      );
-    }
-  };
-
-  const submitWeChat = async () => {
-    if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
-      await updateOption(
-        'WeChatServerAddress',
-        removeTrailingSlash(inputs.WeChatServerAddress),
-      );
-    }
-    if (
-      originInputs['WeChatAccountQRCodeImageURL'] !==
-      inputs.WeChatAccountQRCodeImageURL
-    ) {
-      await updateOption(
-        'WeChatAccountQRCodeImageURL',
-        inputs.WeChatAccountQRCodeImageURL,
-      );
-    }
-    if (
-      originInputs['WeChatServerToken'] !== inputs.WeChatServerToken &&
-      inputs.WeChatServerToken !== ''
-    ) {
-      await updateOption('WeChatServerToken', inputs.WeChatServerToken);
-    }
-  };
-
-  const submitGitHubOAuth = async () => {
-    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
-      await updateOption('GitHubClientId', inputs.GitHubClientId);
-    }
-    if (
-      originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret &&
-      inputs.GitHubClientSecret !== ''
-    ) {
-      await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
-    }
-  };
-
-  const submitTelegramSettings = async () => {
-    // await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled);
-    await updateOption('TelegramBotToken', inputs.TelegramBotToken);
-    await updateOption('TelegramBotName', inputs.TelegramBotName);
-  };
-
-  const submitTurnstile = async () => {
-    if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
-      await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
-    }
-    if (
-      originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
-      inputs.TurnstileSecretKey !== ''
-    ) {
-      await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
-    }
-  };
-
-  const submitNewRestrictedDomain = () => {
-    const localDomainList = inputs.EmailDomainWhitelist;
-    if (
-      restrictedDomainInput !== '' &&
-      !localDomainList.includes(restrictedDomainInput)
-    ) {
-      setRestrictedDomainInput('');
-      setInputs({
-        ...inputs,
-        EmailDomainWhitelist: [...localDomainList, restrictedDomainInput],
-      });
-      setEmailDomainWhitelist([
-        ...EmailDomainWhitelist,
-        {
-          key: restrictedDomainInput,
-          text: restrictedDomainInput,
-          value: restrictedDomainInput,
-        },
-      ]);
-    }
-  };
-
-  return (
-    <Grid columns={1}>
-      <Grid.Column>
-        <Form loading={loading} inverted={isDark}>
-          <Header as='h3' inverted={isDark}>
-            通用设置
-          </Header>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='服务器地址'
-              placeholder='例如：https://yourdomain.com'
-              value={inputs.ServerAddress}
-              name='ServerAddress'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitServerAddress}>
-            更新服务器地址
-          </Form.Button>
-          <Header as='h3' inverted={isDark}>
-            代理设置（支持 <a href='https://github.com/Calcium-Ion/new-api-worker' target='_blank' rel='noreferrer'>new-api-worker</a>）
-          </Header>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='Worker地址，不填写则不启用代理'
-              placeholder='例如：https://workername.yourdomain.workers.dev'
-              value={inputs.WorkerUrl}
-              name='WorkerUrl'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='Worker密钥，根据你部署的 Worker 填写'
-              placeholder='例如：your_secret_key'
-              value={inputs.WorkerValidKey}
-              name='WorkerValidKey'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitWorker}>
-            更新Worker设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
-          </Header>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='支付地址，不填写则不启用在线支付'
-              placeholder='例如：https://yourdomain.com'
-              value={inputs.PayAddress}
-              name='PayAddress'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='易支付商户ID'
-              placeholder='例如：0001'
-              value={inputs.EpayId}
-              name='EpayId'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='易支付商户密钥'
-              placeholder='敏感信息不会发送到前端显示'
-              value={inputs.EpayKey}
-              name='EpayKey'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='回调地址，不填写则使用上方服务器地址作为回调地址'
-              placeholder='例如：https://yourdomain.com'
-              value={inputs.CustomCallbackAddress}
-              name='CustomCallbackAddress'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='充值价格（x元/美金）'
-              placeholder='例如：7，就是7元/美金'
-              value={inputs.Price}
-              name='Price'
-              min={0}
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='最低充值美元数量（以美金为单位，如果使用额度请自行换算！）'
-              placeholder='例如：2，就是最低充值2$'
-              value={inputs.MinTopUp}
-              name='MinTopUp'
-              min={1}
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Group widths='equal'>
-            <Form.TextArea
-              label='充值分组倍率'
-              name='TopupGroupRatio'
-              onChange={handleInputChange}
-              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete='new-password'
-              value={inputs.TopupGroupRatio}
-              placeholder='为一个 JSON 文本，键为组名称，值为倍率'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置登录注册
-          </Header>
-          <Form.Group inline>
-            <Form.Checkbox
-              checked={inputs.PasswordLoginEnabled === 'true'}
-              label='允许通过密码进行登录'
-              name='PasswordLoginEnabled'
-              onChange={handleInputChange}
-            />
-            {showPasswordWarningModal && (
-              <Modal
-                open={showPasswordWarningModal}
-                onClose={() => setShowPasswordWarningModal(false)}
-                size={'tiny'}
-                style={{ maxWidth: '450px' }}
-              >
-                <Modal.Header>警告</Modal.Header>
-                <Modal.Content>
-                  <p>
-                    取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？
-                  </p>
-                </Modal.Content>
-                <Modal.Actions>
-                  <Button onClick={() => setShowPasswordWarningModal(false)}>
-                    取消
-                  </Button>
-                  <Button
-                    color='yellow'
-                    onClick={async () => {
-                      setShowPasswordWarningModal(false);
-                      await updateOption('PasswordLoginEnabled', 'false');
-                    }}
-                  >
-                    确定
-                  </Button>
-                </Modal.Actions>
-              </Modal>
-            )}
-            <Form.Checkbox
-              checked={inputs.PasswordRegisterEnabled === 'true'}
-              label='允许通过密码进行注册'
-              name='PasswordRegisterEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.EmailVerificationEnabled === 'true'}
-              label='通过密码注册时需要进行邮箱验证'
-              name='EmailVerificationEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.GitHubOAuthEnabled === 'true'}
-              label='允许通过 GitHub 账户登录 & 注册'
-              name='GitHubOAuthEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.WeChatAuthEnabled === 'true'}
-              label='允许通过微信登录 & 注册'
-              name='WeChatAuthEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.TelegramOAuthEnabled === 'true'}
-              label='允许通过 Telegram 进行登录'
-              name='TelegramOAuthEnabled'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Group inline>
-            <Form.Checkbox
-              checked={inputs.RegisterEnabled === 'true'}
-              label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）'
-              name='RegisterEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.TurnstileCheckEnabled === 'true'}
-              label='启用 Turnstile 用户校验'
-              name='TurnstileCheckEnabled'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置邮箱域名白名单
-            <Header.Subheader>
-              用以防止恶意用户利用临时邮箱批量注册
-            </Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Checkbox
-              label='启用邮箱域名白名单'
-              name='EmailDomainRestrictionEnabled'
-              onChange={handleInputChange}
-              checked={inputs.EmailDomainRestrictionEnabled === 'true'}
-            />
-          </Form.Group>
-          <Form.Group widths={3}>
-            <Form.Checkbox
-              label='启用邮箱别名限制（例如：ab.cd@gmail.com）'
-              name='EmailAliasRestrictionEnabled'
-              onChange={handleInputChange}
-              checked={inputs.EmailAliasRestrictionEnabled === 'true'}
-            />
-          </Form.Group>
-          <Form.Group widths={2}>
-            <Form.Dropdown
-              label='允许的邮箱域名'
-              placeholder='允许的邮箱域名'
-              name='EmailDomainWhitelist'
-              required
-              fluid
-              multiple
-              selection
-              onChange={handleInputChange}
-              value={inputs.EmailDomainWhitelist}
-              autoComplete='new-password'
-              options={EmailDomainWhitelist}
-            />
-            <Form.Input
-              label='添加新的允许的邮箱域名'
-              action={
-                <Button
-                  type='button'
-                  onClick={() => {
-                    submitNewRestrictedDomain();
-                  }}
-                >
-                  填入
-                </Button>
-              }
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  submitNewRestrictedDomain();
-                }
-              }}
-              autoComplete='new-password'
-              placeholder='输入新的允许的邮箱域名'
-              value={restrictedDomainInput}
-              onChange={(e, { value }) => {
-                setRestrictedDomainInput(value);
-              }}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitEmailDomainWhitelist}>
-            保存邮箱域名白名单设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 SMTP
-            <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='SMTP 服务器地址'
-              name='SMTPServer'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPServer}
-              placeholder='例如：smtp.qq.com'
-            />
-            <Form.Input
-              label='SMTP 端口'
-              name='SMTPPort'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPPort}
-              placeholder='默认: 587'
-            />
-            <Form.Input
-              label='SMTP 账户'
-              name='SMTPAccount'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPAccount}
-              placeholder='通常是邮箱地址'
-            />
-          </Form.Group>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='SMTP 发送者邮箱'
-              name='SMTPFrom'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPFrom}
-              placeholder='通常和邮箱地址保持一致'
-            />
-            <Form.Input
-              label='SMTP 访问凭证'
-              name='SMTPToken'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              checked={inputs.RegisterEnabled === 'true'}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Group widths={3}>
-            <Form.Checkbox
-              label='启用SMTP SSL（465端口强制开启）'
-              name='SMTPSSLEnabled'
-              onChange={handleInputChange}
-              checked={inputs.SMTPSSLEnabled === 'true'}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 GitHub OAuth App
-            <Header.Subheader>
-              用以支持通过 GitHub 进行登录注册，
-              <a
-                href='https://github.com/settings/developers'
-                target='_blank'
-                rel='noreferrer'
-              >
-                点击此处
-              </a>
-              管理你的 GitHub OAuth App
-            </Header.Subheader>
-          </Header>
-          <Message>
-            Homepage URL 填 <code>{inputs.ServerAddress}</code>
-            ，Authorization callback URL 填{' '}
-            <code>{`${inputs.ServerAddress}/oauth/github`}</code>
-          </Message>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='GitHub Client ID'
-              name='GitHubClientId'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.GitHubClientId}
-              placeholder='输入你注册的 GitHub OAuth APP 的 ID'
-            />
-            <Form.Input
-              label='GitHub Client Secret'
-              name='GitHubClientSecret'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              value={inputs.GitHubClientSecret}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitGitHubOAuth}>
-            保存 GitHub OAuth 设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 WeChat Server
-            <Header.Subheader>
-              用以支持通过微信进行登录注册，
-              <a
-                href='https://github.com/songquanpeng/wechat-server'
-                target='_blank'
-                rel='noreferrer'
-              >
-                点击此处
-              </a>
-              了解 WeChat Server
-            </Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='WeChat Server 服务器地址'
-              name='WeChatServerAddress'
-              placeholder='例如：https://yourdomain.com'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.WeChatServerAddress}
-            />
-            <Form.Input
-              label='WeChat Server 访问凭证'
-              name='WeChatServerToken'
-              type='password'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.WeChatServerToken}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-            <Form.Input
-              label='微信公众号二维码图片链接'
-              name='WeChatAccountQRCodeImageURL'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.WeChatAccountQRCodeImageURL}
-              placeholder='输入一个图片链接'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitWeChat}>
-            保存 WeChat Server 设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 Telegram 登录
-          </Header>
-          <Form.Group inline>
-            <Form.Input
-              label='Telegram Bot Token'
-              name='TelegramBotToken'
-              onChange={handleInputChange}
-              value={inputs.TelegramBotToken}
-              placeholder='输入你的 Telegram Bot Token'
-            />
-            <Form.Input
-              label='Telegram Bot 名称'
-              name='TelegramBotName'
-              onChange={handleInputChange}
-              value={inputs.TelegramBotName}
-              placeholder='输入你的 Telegram Bot 名称'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitTelegramSettings}>
-            保存 Telegram 登录设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 Turnstile
-            <Header.Subheader>
-              用以支持用户校验，
-              <a
-                href='https://dash.cloudflare.com/'
-                target='_blank'
-                rel='noreferrer'
-              >
-                点击此处
-              </a>
-              管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
-            </Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='Turnstile Site Key'
-              name='TurnstileSiteKey'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.TurnstileSiteKey}
-              placeholder='输入你注册的 Turnstile Site Key'
-            />
-            <Form.Input
-              label='Turnstile Secret Key'
-              name='TurnstileSecretKey'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              value={inputs.TurnstileSecretKey}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitTurnstile}>
-            保存 Turnstile 设置
-          </Form.Button>
-        </Form>
-      </Grid.Column>
-    </Grid>
-  );
-};
-
-export default SystemSetting;

web/src/components/SetupCheck.js

@@ -0,0 +1,18 @@
+import React, { useContext, useEffect } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { StatusContext } from '../context/Status';
+
+const SetupCheck = ({ children }) => {
+  const [statusState] = useContext(StatusContext);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (statusState?.status?.setup === false && location.pathname !== '/setup') {
+      window.location.href = '/setup';
+    }
+  }, [statusState?.status?.setup, location.pathname]);
+
+  return children;
+};
+
+export default SetupCheck; 

web/src/components/SiderBar.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { StatusContext } from '../context/Status';
 import { useTranslation } from 'react-i18next';
@@ -15,10 +15,13 @@ import {
 import '../index.css';
 
 import {
-  IconCalendarClock, IconChecklistStroked,
-  IconComment, IconCommentStroked,
+  IconCalendarClock,
+  IconChecklistStroked,
+  IconComment,
+  IconCommentStroked,
   IconCreditCard,
-  IconGift, IconHelpCircle,
+  IconGift,
+  IconHelpCircle,
   IconHistogram,
   IconHome,
   IconImage,
@@ -26,15 +29,69 @@ import {
   IconLayers,
   IconPriceTag,
   IconSetting,
-  IconUser
+  IconUser,
 } from '@douyinfe/semi-icons';
-import { Avatar, Dropdown, Layout, Nav, Switch, Divider } from '@douyinfe/semi-ui';
+import {
+  Avatar,
+  Dropdown,
+  Layout,
+  Nav,
+  Switch,
+  Divider,
+} from '@douyinfe/semi-ui';
 import { setStatusData } from '../helpers/data.js';
 import { stringToColor } from '../helpers/render.js';
 import { useSetTheme, useTheme } from '../context/Theme/index.js';
 import { StyleContext } from '../context/Style/index.js';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
-// HeaderBar Buttons
+// 自定义侧边栏按钮样式
+const navItemStyle = {
+  borderRadius: '6px',
+  margin: '4px 8px',
+};
+
+// 自定义侧边栏按钮悬停样式
+const navItemHoverStyle = {
+  backgroundColor: 'var(--semi-color-primary-light-default)',
+  color: 'var(--semi-color-primary)',
+};
+
+// 自定义侧边栏按钮选中样式
+const navItemSelectedStyle = {
+  backgroundColor: 'var(--semi-color-primary-light-default)',
+  color: 'var(--semi-color-primary)',
+  fontWeight: '600',
+};
+
+// 自定义图标样式
+const iconStyle = (itemKey, selectedKeys) => {
+  return {
+    fontSize: '18px',
+    color: selectedKeys.includes(itemKey)
+      ? 'var(--semi-color-primary)'
+      : 'var(--semi-color-text-2)',
+  };
+};
+
+// Define routerMap as a constant outside the component
+const routerMap = {
+  home: '/',
+  channel: '/channel',
+  token: '/token',
+  redemption: '/redemption',
+  topup: '/topup',
+  user: '/user',
+  log: '/log',
+  midjourney: '/midjourney',
+  setting: '/setting',
+  about: '/about',
+  detail: '/detail',
+  pricing: '/pricing',
+  task: '/task',
+  playground: '/playground',
+  personal: '/personal',
+};
 
 const SiderBar = () => {
   const { t } = useTranslation();
@@ -46,27 +103,47 @@ const SiderBar = () => {
   const [selectedKeys, setSelectedKeys] = useState(['home']);
   const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
   const [chatItems, setChatItems] = useState([]);
+  const [openedKeys, setOpenedKeys] = useState([]);
   const theme = useTheme();
   const setTheme = useSetTheme();
+  const location = useLocation();
+  const [routerMapState, setRouterMapState] = useState(routerMap);
 
-  const routerMap = {
-    home: '/',
-    channel: '/channel',
-    token: '/token',
-    redemption: '/redemption',
-    topup: '/topup',
-    user: '/user',
-    log: '/log',
-    midjourney: '/midjourney',
-    setting: '/setting',
-    about: '/about',
-    chat: '/chat',
-    detail: '/detail',
-    pricing: '/pricing',
-    task: '/task',
-    playground: '/playground',
-    personal: '/personal',
-  };
+  // 预先计算所有可能的图标样式
+  const allItemKeys = useMemo(() => {
+    const keys = [
+      'home',
+      'channel',
+      'token',
+      'redemption',
+      'topup',
+      'user',
+      'log',
+      'midjourney',
+      'setting',
+      'about',
+      'chat',
+      'detail',
+      'pricing',
+      'task',
+      'playground',
+      'personal',
+    ];
+    // 添加聊天项的keys
+    for (let i = 0; i < chatItems.length; i++) {
+      keys.push('chat' + i);
+    }
+    return keys;
+  }, [chatItems]);
+
+  // 使用useMemo一次性计算所有图标样式
+  const iconStyles = useMemo(() => {
+    const styles = {};
+    allItemKeys.forEach((key) => {
+      styles[key] = iconStyle(key, selectedKeys);
+    });
+    return styles;
+  }, [allItemKeys, selectedKeys]);
 
   const workspaceItems = useMemo(
     () => [
@@ -108,10 +185,8 @@ const SiderBar = () => {
         to: '/task',
         icon: <IconChecklistStroked />,
         className:
-          localStorage.getItem('enable_task') === 'true'
-            ? ''
-            : 'tableHiddle',
-      }
+          localStorage.getItem('enable_task') === 'true' ? '' : 'tableHiddle',
+      },
     ],
     [
       localStorage.getItem('enable_data_export'),
@@ -189,16 +264,24 @@ const SiderBar = () => {
     [chatItems, t],
   );
 
-  useEffect(() => {
-    let localKey = window.location.pathname.split('/')[1];
-    if (localKey === '') {
-      localKey = 'home';
-    }
-    setSelectedKeys([localKey]);
+  // Function to update router map with chat routes
+  const updateRouterMapWithChats = (chats) => {
+    const newRouterMap = { ...routerMap };
 
+    if (Array.isArray(chats) && chats.length > 0) {
+      for (let i = 0; i < chats.length; i++) {
+        newRouterMap['chat' + i] = '/chat/' + i;
+      }
+    }
+
+    setRouterMapState(newRouterMap);
+    return newRouterMap;
+  };
+
+  // Update the useEffect for chat items
+  useEffect(() => {
     let chats = localStorage.getItem('chats');
     if (chats) {
-      // console.log(chats);
       try {
         chats = JSON.parse(chats);
         if (Array.isArray(chats)) {
@@ -210,19 +293,46 @@ const SiderBar = () => {
               chat.itemKey = 'chat' + i;
               chat.to = '/chat/' + i;
             }
-            // setRouterMap({ ...routerMap, chat: '/chat/' + i })
             chatItems.push(chat);
           }
           setChatItems(chatItems);
+
+          // Update router map with chat routes
+          updateRouterMapWithChats(chats);
         }
       } catch (e) {
         console.error(e);
-        showError('聊天数据解析失败')
+        showError('聊天数据解析失败');
+      }
+    }
+  }, []);
+
+  // Update the useEffect for route selection
+  useEffect(() => {
+    const currentPath = location.pathname;
+    let matchingKey = Object.keys(routerMapState).find(
+      (key) => routerMapState[key] === currentPath,
+    );
+
+    // Handle chat routes
+    if (!matchingKey && currentPath.startsWith('/chat/')) {
+      const chatIndex = currentPath.split('/').pop();
+      if (!isNaN(chatIndex)) {
+        matchingKey = 'chat' + chatIndex;
+      } else {
+        matchingKey = 'chat';
       }
     }
 
-    setIsCollapsed(localStorage.getItem('default_collapse_sidebar') === 'true');
-  }, []);
+    // If we found a matching key, update the selected keys
+    if (matchingKey) {
+      setSelectedKeys([matchingKey]);
+    }
+  }, [location.pathname, routerMapState]);
+
+  useEffect(() => {
+    setIsCollapsed(styleState.siderCollapsed);
+  }, [styleState.siderCollapsed]);
 
   // Custom divider style
   const dividerStyle = {
@@ -235,44 +345,62 @@ const SiderBar = () => {
     padding: '8px 16px',
     color: 'var(--semi-color-text-2)',
     fontSize: '12px',
-    fontWeight: 'normal',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
   };
 
   return (
     <>
       <Nav
-        style={{ maxWidth: 200, height: '100%' }}
+        className='custom-sidebar-nav'
+        style={{
+          width: isCollapsed ? '60px' : '200px',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+          borderRight: '1px solid var(--semi-color-border)',
+          background: 'var(--semi-color-bg-1)',
+          borderRadius: styleState.isMobile ? '0' : '0 8px 8px 0',
+          position: 'relative',
+          zIndex: 95,
+          height: '100%',
+          overflowY: 'auto',
+          WebkitOverflowScrolling: 'touch', // Improve scrolling on iOS devices
+        }}
         defaultIsCollapsed={
           localStorage.getItem('default_collapse_sidebar') === 'true'
         }
         isCollapsed={isCollapsed}
         onCollapseChange={(collapsed) => {
           setIsCollapsed(collapsed);
-        }}
-        selectedKeys={selectedKeys}
-        renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
-          let chats = localStorage.getItem('chats');
-          if (chats) {
-            chats = JSON.parse(chats);
-            if (Array.isArray(chats) && chats.length > 0) {
-              for (let i = 0; i < chats.length; i++) {
-                routerMap['chat' + i] = '/chat/' + i;
-              }
-              if (chats.length > 1) {
-                // delete /chat
-                if (routerMap['chat']) {
-                  delete routerMap['chat'];
-                }
-              } else {
-                // rename /chat to /chat/0
-                routerMap['chat'] = '/chat/0';
-              }
+          // styleDispatch({ type: 'SET_SIDER', payload: true });
+          styleDispatch({ type: 'SET_SIDER_COLLAPSED', payload: collapsed });
+          localStorage.setItem('default_collapse_sidebar', collapsed);
+
+          // 确保在收起侧边栏时有选中的项目，避免不必要的计算
+          if (selectedKeys.length === 0) {
+            const currentPath = location.pathname;
+            const matchingKey = Object.keys(routerMapState).find(
+              (key) => routerMapState[key] === currentPath,
+            );
+
+            if (matchingKey) {
+              setSelectedKeys([matchingKey]);
+            } else if (currentPath.startsWith('/chat/')) {
+              setSelectedKeys(['chat']);
+            } else {
+              setSelectedKeys(['detail']); // 默认选中首页
             }
           }
+        }}
+        selectedKeys={selectedKeys}
+        itemStyle={navItemStyle}
+        hoverStyle={navItemHoverStyle}
+        selectedStyle={navItemSelectedStyle}
+        renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
           return (
             <Link
               style={{ textDecoration: 'none' }}
-              to={routerMap[props.itemKey]}
+              to={routerMapState[props.itemKey] || routerMap[props.itemKey]}
             >
               {itemElement}
             </Link>
@@ -284,8 +412,18 @@ const SiderBar = () => {
           } else {
             styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
           }
+
+          // 如果点击的是已经展开的子菜单的父项，则收起子菜单
+          if (openedKeys.includes(key.itemKey)) {
+            setOpenedKeys(openedKeys.filter((k) => k !== key.itemKey));
+          }
+
           setSelectedKeys([key.itemKey]);
         }}
+        openKeys={openedKeys}
+        onOpenChange={(data) => {
+          setOpenedKeys(data.openKeys);
+        }}
       >
         {/* Chat Section - Only show if there are chat items */}
         {chatMenuItems.map((item) => {
@@ -295,7 +433,9 @@ const SiderBar = () => {
                 key={item.itemKey}
                 itemKey={item.itemKey}
                 text={item.text}
-                icon={item.icon}
+                icon={React.cloneElement(item.icon, {
+                  style: iconStyles[item.itemKey],
+                })}
               >
                 {item.items.map((subItem) => (
                   <Nav.Item
@@ -312,39 +452,27 @@ const SiderBar = () => {
                 key={item.itemKey}
                 itemKey={item.itemKey}
                 text={item.text}
-                icon={item.icon}
+                icon={React.cloneElement(item.icon, {
+                  style: iconStyles[item.itemKey],
+                })}
               />
             );
           }
         })}
 
-
         {/* Divider */}
         <Divider style={dividerStyle} />
 
         {/* Workspace Section */}
-        {!isCollapsed && <div style={groupLabelStyle}>{t('控制台')}</div>}
+        {!isCollapsed && <Text style={groupLabelStyle}>{t('控制台')}</Text>}
         {workspaceItems.map((item) => (
           <Nav.Item
             key={item.itemKey}
             itemKey={item.itemKey}
             text={item.text}
-            icon={item.icon}
-            className={item.className}
-          />
-        ))}
-
-        {/* Divider */}
-        <Divider style={dividerStyle} />
-
-        {/* Finance Management Section */}
-        {!isCollapsed && <div style={groupLabelStyle}>{t('个人中心')}</div>}
-        {financeItems.map((item) => (
-          <Nav.Item
-            key={item.itemKey}
-            itemKey={item.itemKey}
-            text={item.text}
-            icon={item.icon}
+            icon={React.cloneElement(item.icon, {
+              style: iconStyles[item.itemKey],
+            })}
             className={item.className}
           />
         ))}
@@ -355,28 +483,49 @@ const SiderBar = () => {
             <Divider style={dividerStyle} />
 
             {/* Admin Section */}
+            {!isCollapsed && <Text style={groupLabelStyle}>{t('管理员')}</Text>}
             {adminItems.map((item) => (
               <Nav.Item
                 key={item.itemKey}
                 itemKey={item.itemKey}
                 text={item.text}
-                icon={item.icon}
+                icon={React.cloneElement(item.icon, {
+                  style: iconStyles[item.itemKey],
+                })}
                 className={item.className}
               />
             ))}
           </>
         )}
 
+        {/* Divider */}
+        <Divider style={dividerStyle} />
+
+        {/* Finance Management Section */}
+        {!isCollapsed && <Text style={groupLabelStyle}>{t('个人中心')}</Text>}
+        {financeItems.map((item) => (
+          <Nav.Item
+            key={item.itemKey}
+            itemKey={item.itemKey}
+            text={item.text}
+            icon={React.cloneElement(item.icon, {
+              style: iconStyles[item.itemKey],
+            })}
+            className={item.className}
+          />
+        ))}
+
         <Nav.Footer
+          style={{
+            paddingBottom: styleState?.isMobile ? '112px' : '',
+          }}
           collapseButton={true}
-          collapseText={(collapsed)=>
-            {
-              if(collapsed){
-                return t('展开侧边栏')
-              }
-                return t('收起侧边栏')
+          collapseText={(collapsed) => {
+            if (collapsed) {
+              return t('展开侧边栏');
             }
-          }
+            return t('收起侧边栏');
+          }}
         />
       </Nav>
     </>

web/src/components/TaskLogsTable.js

@@ -1,400 +1,512 @@
 import React, { useEffect, useState } from 'react';
 import { Label } from 'semantic-ui-react';
-import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  isAdmin,
+  showError,
+  showSuccess,
+  timestamp2string,
+} from '../helpers';
 
 import {
-    Table,
-    Tag,
-    Form,
-    Button,
-    Layout,
-    Modal,
-    Typography, Progress, Card
+  Table,
+  Tag,
+  Form,
+  Button,
+  Layout,
+  Modal,
+  Typography,
+  Progress,
+  Card,
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
 
-const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
-    'light-blue', 'lime', 'orange', 'pink',
-    'purple', 'red', 'teal', 'violet', 'yellow'
-]
-
+const colors = [
+  'amber',
+  'blue',
+  'cyan',
+  'green',
+  'grey',
+  'indigo',
+  'light-blue',
+  'lime',
+  'orange',
+  'pink',
+  'purple',
+  'red',
+  'teal',
+  'violet',
+  'yellow',
+];
 
 const renderTimestamp = (timestampInSeconds) => {
-    const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
+  const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
 
-    const year = date.getFullYear(); // 获取年份
-    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
-    const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
-    const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
-    const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
-    const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
+  const year = date.getFullYear(); // 获取年份
+  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
+  const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
+  const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
+  const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
+  const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
 
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
 };
 
 function renderDuration(submit_time, finishTime) {
-    // 确保startTime和finishTime都是有效的时间戳
-    if (!submit_time || !finishTime) return 'N/A';
+  // 确保startTime和finishTime都是有效的时间戳
+  if (!submit_time || !finishTime) return 'N/A';
 
-    // 将时间戳转换为Date对象
-    const start = new Date(submit_time);
-    const finish = new Date(finishTime);
+  // 将时间戳转换为Date对象
+  const start = new Date(submit_time);
+  const finish = new Date(finishTime);
 
-    // 计算时间差（毫秒）
-    const durationMs = finish - start;
+  // 计算时间差（毫秒）
+  const durationMs = finish - start;
 
-    // 将时间差转换为秒，并保留一位小数
-    const durationSec = (durationMs / 1000).toFixed(1);
+  // 将时间差转换为秒，并保留一位小数
+  const durationSec = (durationMs / 1000).toFixed(1);
 
-    // 设置颜色：大于60秒则为红色，小于等于60秒则为绿色
-    const color = durationSec > 60 ? 'red' : 'green';
+  // 设置颜色：大于60秒则为红色，小于等于60秒则为绿色
+  const color = durationSec > 60 ? 'red' : 'green';
 
-    // 返回带有样式的颜色标签
-    return (
-        <Tag color={color} size="large">
-            {durationSec} 秒
-        </Tag>
-    );
+  // 返回带有样式的颜色标签
+  return (
+    <Tag color={color} size='large'>
+      {durationSec} 秒
+    </Tag>
+  );
 }
 
 const LogsTable = () => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [modalContent, setModalContent] = useState('');
-    const isAdminUser = isAdmin();
-    const columns = [
-        {
-            title: "提交时间",
-            dataIndex: 'submit_time',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        {text ? renderTimestamp(text) : "-"}
-                    </div>
-                );
-            },
-        },
-        {
-            title: "结束时间",
-            dataIndex: 'finish_time',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        {text ? renderTimestamp(text) : "-"}
-                    </div>
-                );
-            },
-        },
-        {
-            title: '进度',
-            dataIndex: 'progress',
-            width: 50,
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        {
-                            // 转换例如100%为数字100，如果text未定义，返回0
-                            isNaN(text.replace('%', '')) ? text : <Progress width={42} type="circle" showInfo={true} percent={Number(text.replace('%', '') || 0)} aria-label="drawing progress" />
-                        }
-                    </div>
-                );
-            },
-        },
-        {
-            title: '花费时间',
-            dataIndex: 'finish_time', // 以finish_time作为dataIndex
-            key: 'finish_time',
-            render: (finish, record) => {
-                // 假设record.start_time是存在的，并且finish是完成时间的时间戳
-                return <>
-                    {
-                        finish ? renderDuration(record.submit_time, finish) : "-"
-                    }
-                </>
-            },
-        },
-        {
-            title: "渠道",
-            dataIndex: 'channel_id',
-            className: isAdminUser ? 'tableShow' : 'tableHiddle',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        <Tag
-                            color={colors[parseInt(text) % colors.length]}
-                            size='large'
-                            onClick={() => {
-                                copyText(text); // 假设copyText是用于文本复制的函数
-                            }}
-                        >
-                            {' '}
-                            {text}{' '}
-                        </Tag>
-                    </div>
-                );
-            },
-        },
-        {
-            title: "平台",
-            dataIndex: 'platform',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        {renderPlatform(text)}
-                    </div>
-                );
-            },
-        },
-        {
-            title: '类型',
-            dataIndex: 'action',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        {renderType(text)}
-                    </div>
-                );
-            },
-        },
-        {
-            title: '任务ID（点击查看详情）',
-            dataIndex: 'task_id',
-            render: (text, record, index) => {
-                return (<Typography.Text
-                    ellipsis={{ showTooltip: true }}
-                    //style={{width: 100}}
-                    onClick={() => {
-                        setModalContent(JSON.stringify(record, null, 2));
-                        setIsModalOpen(true);
-                    }}
-                >
-                    <div>
-                        {text}
-                    </div>
-                </Typography.Text>);
-            },
-        },
-        {
-            title: '任务状态',
-            dataIndex: 'status',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        {renderStatus(text)}
-                    </div>
-                );
-            },
-        },
-
-        {
-            title: '失败原因',
-            dataIndex: 'fail_reason',
-            render: (text, record, index) => {
-                // 如果text未定义，返回替代文本，例如空字符串''或其他
-                if (!text) {
-                    return '无';
-                }
-
-                return (
-                    <Typography.Text
-                        ellipsis={{ showTooltip: true }}
-                        style={{ width: 100 }}
-                        onClick={() => {
-                            setModalContent(text);
-                            setIsModalOpen(true);
-                        }}
-                    >
-                        {text}
-                    </Typography.Text>
-                );
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalContent, setModalContent] = useState('');
+  const isAdminUser = isAdmin();
+  const columns = [
+    {
+      title: '提交时间',
+      dataIndex: 'submit_time',
+      render: (text, record, index) => {
+        return <div>{text ? renderTimestamp(text) : '-'}</div>;
+      },
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'finish_time',
+      render: (text, record, index) => {
+        return <div>{text ? renderTimestamp(text) : '-'}</div>;
+      },
+    },
+    {
+      title: '进度',
+      dataIndex: 'progress',
+      width: 50,
+      render: (text, record, index) => {
+        return (
+          <div>
+            {
+              // 转换例如100%为数字100，如果text未定义，返回0
+              isNaN(text.replace('%', '')) ? (
+                text
+              ) : (
+                <Progress
+                  width={42}
+                  type='circle'
+                  showInfo={true}
+                  percent={Number(text.replace('%', '') || 0)}
+                  aria-label='drawing progress'
+                />
+              )
             }
+          </div>
+        );
+      },
+    },
+    {
+      title: '花费时间',
+      dataIndex: 'finish_time', // 以finish_time作为dataIndex
+      key: 'finish_time',
+      render: (finish, record) => {
+        // 假设record.start_time是存在的，并且finish是完成时间的时间戳
+        return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>;
+      },
+    },
+    {
+      title: '渠道',
+      dataIndex: 'channel_id',
+      className: isAdminUser ? 'tableShow' : 'tableHiddle',
+      render: (text, record, index) => {
+        return (
+          <div>
+            <Tag
+              color={colors[parseInt(text) % colors.length]}
+              size='large'
+              onClick={() => {
+                copyText(text); // 假设copyText是用于文本复制的函数
+              }}
+            >
+              {' '}
+              {text}{' '}
+            </Tag>
+          </div>
+        );
+      },
+    },
+    {
+      title: '平台',
+      dataIndex: 'platform',
+      render: (text, record, index) => {
+        return <div>{renderPlatform(text)}</div>;
+      },
+    },
+    {
+      title: '类型',
+      dataIndex: 'action',
+      render: (text, record, index) => {
+        return <div>{renderType(text)}</div>;
+      },
+    },
+    {
+      title: '任务ID（点击查看详情）',
+      dataIndex: 'task_id',
+      render: (text, record, index) => {
+        return (
+          <Typography.Text
+            ellipsis={{ showTooltip: true }}
+            //style={{width: 100}}
+            onClick={() => {
+              setModalContent(JSON.stringify(record, null, 2));
+              setIsModalOpen(true);
+            }}
+          >
+            <div>{text}</div>
+          </Typography.Text>
+        );
+      },
+    },
+    {
+      title: '任务状态',
+      dataIndex: 'status',
+      render: (text, record, index) => {
+        return <div>{renderStatus(text)}</div>;
+      },
+    },
+
+    {
+      title: '失败原因',
+      dataIndex: 'fail_reason',
+      render: (text, record, index) => {
+        // 如果text未定义，返回替代文本，例如空字符串''或其他
+        if (!text) {
+          return '无';
         }
-    ];
 
-    const [logs, setLogs] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [activePage, setActivePage] = useState(1);
-    const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
-    const [logType] = useState(0);
+        return (
+          <Typography.Text
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
+            onClick={() => {
+              setModalContent(text);
+              setIsModalOpen(true);
+            }}
+          >
+            {text}
+          </Typography.Text>
+        );
+      },
+    },
+  ];
 
-    let now = new Date();
-    // 初始化start_timestamp为前一天
-    let zeroNow = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const [inputs, setInputs] = useState({
-        channel_id: '',
-        task_id: '',
-        start_timestamp: timestamp2string(zeroNow.getTime() /1000),
-        end_timestamp: '',
-    });
-    const { channel_id, task_id, start_timestamp, end_timestamp } = inputs;
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
+  const [logType] = useState(0);
 
-    const handleInputChange = (value, name) => {
-        setInputs((inputs) => ({ ...inputs, [name]: value }));
-    };
+  let now = new Date();
+  // 初始化start_timestamp为前一天
+  let zeroNow = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const [inputs, setInputs] = useState({
+    channel_id: '',
+    task_id: '',
+    start_timestamp: timestamp2string(zeroNow.getTime() / 1000),
+    end_timestamp: '',
+  });
+  const { channel_id, task_id, start_timestamp, end_timestamp } = inputs;
 
+  const handleInputChange = (value, name) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
 
-    const setLogsFormat = (logs) => {
-        for (let i = 0; i < logs.length; i++) {
-            logs[i].timestamp2string = timestamp2string(logs[i].created_at);
-            logs[i].key = '' + logs[i].id;
-        }
-        // data.key = '' + data.id
-        setLogs(logs);
-        setLogCount(logs.length + ITEMS_PER_PAGE);
-        // console.log(logCount);
+  const setLogsFormat = (logs) => {
+    for (let i = 0; i < logs.length; i++) {
+      logs[i].timestamp2string = timestamp2string(logs[i].created_at);
+      logs[i].key = '' + logs[i].id;
     }
+    // data.key = '' + data.id
+    setLogs(logs);
+    setLogCount(logs.length + ITEMS_PER_PAGE);
+    // console.log(logCount);
+  };
 
-    const loadLogs = async (startIdx) => {
-        setLoading(true);
+  const loadLogs = async (startIdx) => {
+    setLoading(true);
 
-        let url = '';
-        let localStartTimestamp = parseInt(Date.parse(start_timestamp) / 1000);
-        let localEndTimestamp = parseInt(Date.parse(end_timestamp) / 1000 );
-        if (isAdminUser) {
-            url = `/api/task/?p=${startIdx}&channel_id=${channel_id}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
-        } else {
-            url = `/api/task/self?p=${startIdx}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
-        }
-        const res = await API.get(url);
-        let { success, message, data } = res.data;
-        if (success) {
-            if (startIdx === 0) {
-                setLogsFormat(data);
-            } else {
-                let newLogs = [...logs];
-                newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
-                setLogsFormat(newLogs);
-            }
-        } else {
-            showError(message);
-        }
-        setLoading(false);
-    };
-
-    const pageData = logs.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
-
-    const handlePageChange = page => {
-        setActivePage(page);
-        if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
-            // In this case we have to load more data and then append them.
-            loadLogs(page - 1).then(r => {
-            });
-        }
-    };
-
-    const refresh = async () => {
-        // setLoading(true);
-        setActivePage(1);
-        await loadLogs(0);
-    };
-
-    const copyText = async (text) => {
-        if (await copy(text)) {
-            showSuccess('已复制：' + text);
-        } else {
-            // setSearchKeyword(text);
-            Modal.error({ title: "无法复制到剪贴板，请手动复制", content: text });
-        }
+    let url = '';
+    let localStartTimestamp = parseInt(Date.parse(start_timestamp) / 1000);
+    let localEndTimestamp = parseInt(Date.parse(end_timestamp) / 1000);
+    if (isAdminUser) {
+      url = `/api/task/?p=${startIdx}&channel_id=${channel_id}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+    } else {
+      url = `/api/task/self?p=${startIdx}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     }
-
-    useEffect(() => {
-        refresh().then();
-    }, [logType]);
-
-    const renderType = (type) => {
-        switch (type) {
-            case 'MUSIC':
-                return <Label basic color='grey'> 生成音乐 </Label>;
-            case 'LYRICS':
-                return <Label basic color='pink'> 生成歌词 </Label>;
-
-            default:
-                return <Label basic color='black'> 未知 </Label>;
-        }
+    const res = await API.get(url);
+    let { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setLogsFormat(data);
+      } else {
+        let newLogs = [...logs];
+        newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+        setLogsFormat(newLogs);
+      }
+    } else {
+      showError(message);
     }
+    setLoading(false);
+  };
 
-    const renderPlatform = (type) => {
-        switch (type) {
-            case "suno":
-                return <Label basic color='green'> Suno </Label>;
-            default:
-                return <Label basic color='black'> 未知 </Label>;
-        }
+  const pageData = logs.slice(
+    (activePage - 1) * ITEMS_PER_PAGE,
+    activePage * ITEMS_PER_PAGE,
+  );
+
+  const handlePageChange = (page) => {
+    setActivePage(page);
+    if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
+      // In this case we have to load more data and then append them.
+      loadLogs(page - 1).then((r) => {});
     }
+  };
 
-    const renderStatus = (type) => {
-        switch (type) {
-            case 'SUCCESS':
-                return <Label basic color='green'> 成功 </Label>;
-            case 'NOT_START':
-                return <Label basic color='black'> 未启动 </Label>;
-            case 'SUBMITTED':
-                return <Label basic color='yellow'> 队列中 </Label>;
-            case 'IN_PROGRESS':
-                return <Label basic color='blue'> 执行中 </Label>;
-            case 'FAILURE':
-                return <Label basic color='red'> 失败 </Label>;
-            case 'QUEUED':
-                return <Label basic color='red'> 排队中 </Label>;
-            case 'UNKNOWN':
-                return <Label basic color='red'> 未知 </Label>;
-            case '':
-                return <Label basic color='black'> 正在提交 </Label>;
-            default:
-                return <Label basic color='black'> 未知 </Label>;
-        }
+  const refresh = async () => {
+    // setLoading(true);
+    setActivePage(1);
+    await loadLogs(0);
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制：' + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
     }
+  };
 
-    return (
-        <>
+  useEffect(() => {
+    refresh().then();
+  }, [logType]);
 
-            <Layout>
-                <Form layout='horizontal' labelPosition='inset'>
-                    <>
-                        {isAdminUser && <Form.Input field="channel_id" label='渠道 ID' style={{ width: '236px', marginBottom: '10px' }} value={channel_id}
-                                                    placeholder={'可选值'} name='channel_id'
-                                                    onChange={value => handleInputChange(value, 'channel_id')} />
-                        }
-                        <Form.Input field="task_id" label={"任务 ID"} style={{ width: '236px', marginBottom: '10px' }} value={task_id}
-                            placeholder={"可选值"}
-                            name='task_id'
-                            onChange={value => handleInputChange(value, 'task_id')} />
+  const renderType = (type) => {
+    switch (type) {
+      case 'MUSIC':
+        return (
+          <Label basic color='grey'>
+            {' '}
+            生成音乐{' '}
+          </Label>
+        );
+      case 'LYRICS':
+        return (
+          <Label basic color='pink'>
+            {' '}
+            生成歌词{' '}
+          </Label>
+        );
 
-                        <Form.DatePicker field="start_timestamp" label={"起始时间"} style={{ width: '236px', marginBottom: '10px' }}
-                            initValue={start_timestamp}
-                            value={start_timestamp} type='dateTime'
-                            name='start_timestamp'
-                            onChange={value => handleInputChange(value, 'start_timestamp')} />
-                        <Form.DatePicker field="end_timestamp" fluid label={"结束时间"} style={{ width: '236px', marginBottom: '10px' }}
-                            initValue={end_timestamp}
-                            value={end_timestamp} type='dateTime'
-                            name='end_timestamp'
-                            onChange={value => handleInputChange(value, 'end_timestamp')} />
-                        <Button label={"查询"} type="primary" htmlType="submit" className="btn-margin-right"
-                            onClick={refresh}>查询</Button>
-                    </>
-                </Form>
-                <Card>
-                    <Table columns={columns} dataSource={pageData} pagination={{
-                        currentPage: activePage,
-                        pageSize: ITEMS_PER_PAGE,
-                        total: logCount,
-                        pageSizeOpts: [10, 20, 50, 100],
-                        onPageChange: handlePageChange,
-                    }} loading={loading} />
-                </Card>
-                <Modal
-                    visible={isModalOpen}
-                    onOk={() => setIsModalOpen(false)}
-                    onCancel={() => setIsModalOpen(false)}
-                    closable={null}
-                    bodyStyle={{ height: '400px', overflow: 'auto' }} // 设置模态框内容区域样式
-                    width={800} // 设置模态框宽度
-                >
-                    <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
-                </Modal>
-            </Layout>
-        </>
-    );
+      default:
+        return (
+          <Label basic color='black'>
+            {' '}
+            未知{' '}
+          </Label>
+        );
+    }
+  };
+
+  const renderPlatform = (type) => {
+    switch (type) {
+      case 'suno':
+        return (
+          <Label basic color='green'>
+            {' '}
+            Suno{' '}
+          </Label>
+        );
+      default:
+        return (
+          <Label basic color='black'>
+            {' '}
+            未知{' '}
+          </Label>
+        );
+    }
+  };
+
+  const renderStatus = (type) => {
+    switch (type) {
+      case 'SUCCESS':
+        return (
+          <Label basic color='green'>
+            {' '}
+            成功{' '}
+          </Label>
+        );
+      case 'NOT_START':
+        return (
+          <Label basic color='black'>
+            {' '}
+            未启动{' '}
+          </Label>
+        );
+      case 'SUBMITTED':
+        return (
+          <Label basic color='yellow'>
+            {' '}
+            队列中{' '}
+          </Label>
+        );
+      case 'IN_PROGRESS':
+        return (
+          <Label basic color='blue'>
+            {' '}
+            执行中{' '}
+          </Label>
+        );
+      case 'FAILURE':
+        return (
+          <Label basic color='red'>
+            {' '}
+            失败{' '}
+          </Label>
+        );
+      case 'QUEUED':
+        return (
+          <Label basic color='red'>
+            {' '}
+            排队中{' '}
+          </Label>
+        );
+      case 'UNKNOWN':
+        return (
+          <Label basic color='red'>
+            {' '}
+            未知{' '}
+          </Label>
+        );
+      case '':
+        return (
+          <Label basic color='black'>
+            {' '}
+            正在提交{' '}
+          </Label>
+        );
+      default:
+        return (
+          <Label basic color='black'>
+            {' '}
+            未知{' '}
+          </Label>
+        );
+    }
+  };
+
+  return (
+    <>
+      <Layout>
+        <Form layout='horizontal' labelPosition='inset'>
+          <>
+            {isAdminUser && (
+              <Form.Input
+                field='channel_id'
+                label='渠道 ID'
+                style={{ width: '236px', marginBottom: '10px' }}
+                value={channel_id}
+                placeholder={'可选值'}
+                name='channel_id'
+                onChange={(value) => handleInputChange(value, 'channel_id')}
+              />
+            )}
+            <Form.Input
+              field='task_id'
+              label={'任务 ID'}
+              style={{ width: '236px', marginBottom: '10px' }}
+              value={task_id}
+              placeholder={'可选值'}
+              name='task_id'
+              onChange={(value) => handleInputChange(value, 'task_id')}
+            />
+
+            <Form.DatePicker
+              field='start_timestamp'
+              label={'起始时间'}
+              style={{ width: '236px', marginBottom: '10px' }}
+              initValue={start_timestamp}
+              value={start_timestamp}
+              type='dateTime'
+              name='start_timestamp'
+              onChange={(value) => handleInputChange(value, 'start_timestamp')}
+            />
+            <Form.DatePicker
+              field='end_timestamp'
+              fluid
+              label={'结束时间'}
+              style={{ width: '236px', marginBottom: '10px' }}
+              initValue={end_timestamp}
+              value={end_timestamp}
+              type='dateTime'
+              name='end_timestamp'
+              onChange={(value) => handleInputChange(value, 'end_timestamp')}
+            />
+            <Button
+              label={'查询'}
+              type='primary'
+              htmlType='submit'
+              className='btn-margin-right'
+              onClick={refresh}
+            >
+              查询
+            </Button>
+          </>
+        </Form>
+        <Card>
+          <Table
+            columns={columns}
+            dataSource={pageData}
+            pagination={{
+              currentPage: activePage,
+              pageSize: ITEMS_PER_PAGE,
+              total: logCount,
+              pageSizeOpts: [10, 20, 50, 100],
+              onPageChange: handlePageChange,
+            }}
+            loading={loading}
+          />
+        </Card>
+        <Modal
+          visible={isModalOpen}
+          onOk={() => setIsModalOpen(false)}
+          onCancel={() => setIsModalOpen(false)}
+          closable={null}
+          bodyStyle={{ height: '400px', overflow: 'auto' }} // 设置模态框内容区域样式
+          width={800} // 设置模态框宽度
+        >
+          <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
+        </Modal>
+      </Layout>
+    </>
+  );
 };
 
 export default LogsTable;

web/src/components/TokensTable.js

@@ -8,14 +8,16 @@ import {
 } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import {renderGroup, renderQuota} from '../helpers/render';
+import { renderGroup, renderQuota } from '../helpers/render';
 import {
-  Button, Divider,
+  Button,
+  Divider,
   Dropdown,
   Form,
   Modal,
   Popconfirm,
-  Popover, Space,
+  Popover,
+  Space,
   SplitButtonGroup,
   Table,
   Tag,
@@ -30,7 +32,6 @@ function renderTimestamp(timestamp) {
 }
 
 const TokensTable = () => {
-
   const { t } = useTranslation();
 
   const renderStatus = (status, model_limits_enabled = false) => {
@@ -86,12 +87,14 @@ const TokensTable = () => {
       dataIndex: 'status',
       key: 'status',
       render: (text, record, index) => {
-        return <div>
-          <Space>
-            {renderStatus(text, record.model_limits_enabled)}
-            {renderGroup(record.group)}
-          </Space>
-        </div>;
+        return (
+          <div>
+            <Space>
+              {renderStatus(text, record.model_limits_enabled)}
+              {renderGroup(record.group)}
+            </Space>
+          </div>
+        );
       },
     },
     {
@@ -143,7 +146,7 @@ const TokensTable = () => {
       dataIndex: 'operate',
       render: (text, record, index) => {
         let chats = localStorage.getItem('chats');
-        let chatsArray = []
+        let chatsArray = [];
         let shouldUseCustom = true;
 
         if (shouldUseCustom) {
@@ -153,7 +156,7 @@ const TokensTable = () => {
             // check chats is array
             if (Array.isArray(chats)) {
               for (let i = 0; i < chats.length; i++) {
-                let chat = {}
+                let chat = {};
                 chat.node = 'item';
                 // c is a map
                 // chat.key = chats[i].name;
@@ -164,13 +167,12 @@ const TokensTable = () => {
                     chat.name = key;
                     chat.onClick = () => {
                       onOpenLink(key, chats[i][key], record);
-                    }
+                    };
                   }
                 }
                 chatsArray.push(chat);
               }
             }
-
           } catch (e) {
             console.log(e);
             showError(t('聊天链接配置错误，请联系管理员'));
@@ -208,7 +210,11 @@ const TokensTable = () => {
                   if (chatsArray.length === 0) {
                     showError(t('请联系管理员配置聊天链接'));
                   } else {
-                    onOpenLink('default', chats[0][Object.keys(chats[0])[0]], record);
+                    onOpenLink(
+                      'default',
+                      chats[0][Object.keys(chats[0])[0]],
+                      record,
+                    );
                   }
                 }}
               >
@@ -539,36 +545,36 @@ const TokensTable = () => {
           {t('查询')}
         </Button>
       </Form>
-      <Divider style={{margin:'15px 0'}}/>
+      <Divider style={{ margin: '15px 0' }} />
       <div>
         <Button
-            theme='light'
-            type='primary'
-            style={{ marginRight: 8 }}
-            onClick={() => {
-              setEditingToken({
-                id: undefined,
-              });
-              setShowEdit(true);
-            }}
+          theme='light'
+          type='primary'
+          style={{ marginRight: 8 }}
+          onClick={() => {
+            setEditingToken({
+              id: undefined,
+            });
+            setShowEdit(true);
+          }}
         >
-            {t('添加令牌')}
+          {t('添加令牌')}
         </Button>
         <Button
-            label={t('复制所选令牌')}
-            type='warning'
-            onClick={async () => {
-              if (selectedKeys.length === 0) {
-                showError(t('请至少选择一个令牌！'));
-                return;
-              }
-              let keys = '';
-              for (let i = 0; i < selectedKeys.length; i++) {
-                keys +=
-                    selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
-              }
-              await copyText(keys);
-            }}
+          label={t('复制所选令牌')}
+          type='warning'
+          onClick={async () => {
+            if (selectedKeys.length === 0) {
+              showError(t('请至少选择一个令牌！'));
+              return;
+            }
+            let keys = '';
+            for (let i = 0; i < selectedKeys.length; i++) {
+              keys +=
+                selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
+            }
+            await copyText(keys);
+          }}
         >
           {t('复制所选令牌到剪贴板')}
         </Button>
@@ -588,7 +594,7 @@ const TokensTable = () => {
             t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
               start: page.currentStart,
               end: page.currentEnd,
-              total: tokens.length
+              total: tokens.length,
             }),
           onPageSizeChange: (size) => {
             setPageSize(size);

web/src/components/UsersTable.js

@@ -167,7 +167,11 @@ const UsersTable = () => {
                   manageUser(record.id, 'demote', record);
                 }}
               >
-                <Button theme='light' type='secondary' style={{ marginRight: 1 }}>
+                <Button
+                  theme='light'
+                  type='secondary'
+                  style={{ marginRight: 1 }}
+                >
                   {t('降级')}
                 </Button>
               </Popconfirm>
@@ -261,7 +265,7 @@ const UsersTable = () => {
       users[i].key = users[i].id;
     }
     setUsers(users);
-  }
+  };
 
   const loadUsers = async (startIdx, pageSize) => {
     const res = await API.get(`/api/user/?p=${startIdx}&page_size=${pageSize}`);
@@ -277,7 +281,6 @@ const UsersTable = () => {
     setLoading(false);
   };
 
-
   useEffect(() => {
     loadUsers(0, pageSize)
       .then()
@@ -327,22 +330,29 @@ const UsersTable = () => {
     }
   };
 
-  const searchUsers = async (startIdx, pageSize, searchKeyword, searchGroup) => {
+  const searchUsers = async (
+    startIdx,
+    pageSize,
+    searchKeyword,
+    searchGroup,
+  ) => {
     if (searchKeyword === '' && searchGroup === '') {
-        // if keyword is blank, load files instead.
-        await loadUsers(startIdx, pageSize);
-        return;
+      // if keyword is blank, load files instead.
+      await loadUsers(startIdx, pageSize);
+      return;
     }
     setSearching(true);
-    const res = await API.get(`/api/user/search?keyword=${searchKeyword}&group=${searchGroup}&p=${startIdx}&page_size=${pageSize}`);
+    const res = await API.get(
+      `/api/user/search?keyword=${searchKeyword}&group=${searchGroup}&p=${startIdx}&page_size=${pageSize}`,
+    );
     const { success, message, data } = res.data;
     if (success) {
-        const newPageData = data.items;
-        setActivePage(data.page);
-        setUserCount(data.total);
-        setUserFormat(newPageData);
+      const newPageData = data.items;
+      setActivePage(data.page);
+      setUserCount(data.total);
+      setUserFormat(newPageData);
     } else {
-        showError(message);
+      showError(message);
     }
     setSearching(false);
   };
@@ -354,9 +364,9 @@ const UsersTable = () => {
   const handlePageChange = (page) => {
     setActivePage(page);
     if (searchKeyword === '' && searchGroup === '') {
-        loadUsers(page, pageSize).then();
+      loadUsers(page, pageSize).then();
     } else {
-        searchUsers(page, pageSize, searchKeyword, searchGroup).then();
+      searchUsers(page, pageSize, searchKeyword, searchGroup).then();
     }
   };
 
@@ -372,7 +382,7 @@ const UsersTable = () => {
   };
 
   const refresh = async () => {
-    setActivePage(1)
+    setActivePage(1);
     if (searchKeyword === '') {
       await loadUsers(activePage, pageSize);
     } else {
@@ -431,7 +441,9 @@ const UsersTable = () => {
       >
         <div style={{ display: 'flex' }}>
           <Space>
-            <Tooltip content={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}>
+            <Tooltip
+              content={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}
+            >
               <Form.Input
                 label={t('搜索关键字')}
                 icon='search'
@@ -443,7 +455,7 @@ const UsersTable = () => {
                 onChange={(value) => handleKeywordChange(value)}
               />
             </Tooltip>
-            
+
             <Form.Select
               field='group'
               label={t('分组')}
@@ -482,7 +494,7 @@ const UsersTable = () => {
             t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
               start: page.currentStart,
               end: page.currentEnd,
-              total: users.length
+              total: users.length,
             }),
           currentPage: activePage,
           pageSize: pageSize,

web/src/components/custom/TextInput.js

@@ -1,7 +1,14 @@
 import { Input, Typography } from '@douyinfe/semi-ui';
 import React from 'react';
 
-const TextInput = ({ label, name, value, onChange, placeholder, type = 'text' }) => {
+const TextInput = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+}) => {
   return (
     <>
       <div style={{ marginTop: 10 }}>
@@ -12,10 +19,10 @@ const TextInput = ({ label, name, value, onChange, placeholder, type = 'text' })
         placeholder={placeholder}
         onChange={(value) => onChange(value)}
         value={value}
-        autoComplete="new-password"
+        autoComplete='new-password'
       />
     </>
   );
-}
+};
 
-export default TextInput;
+export default TextInput;

web/src/components/custom/TextNumberInput.js

@@ -12,10 +12,10 @@ const TextNumberInput = ({ label, name, value, onChange, placeholder }) => {
         placeholder={placeholder}
         onChange={(value) => onChange(value)}
         value={value}
-        autoComplete="new-password"
+        autoComplete='new-password'
       />
     </>
   );
-}
+};
 
-export default TextNumberInput;
+export default TextNumberInput;

web/src/components/fetchTokenKeys.js

@@ -13,7 +13,7 @@ async function fetchTokenKeys() {
       throw new Error('Failed to fetch token keys');
     }
   } catch (error) {
-    console.error("Error fetching token keys:", error);
+    console.error('Error fetching token keys:', error);
     return [];
   }
 }
@@ -27,7 +27,7 @@ function getServerAddress() {
       status = JSON.parse(status);
       serverAddress = status.server_address || '';
     } catch (error) {
-      console.error("Failed to parse status from localStorage:", error);
+      console.error('Failed to parse status from localStorage:', error);
     }
   }
 
@@ -65,4 +65,4 @@ export function useTokenKeys(id) {
   }, []);
 
   return { keys, serverAddress, isLoading };
-}
+}

web/src/components/utils.js

@@ -16,6 +16,20 @@ export async function getOAuthState() {
   }
 }
 
+export async function onOIDCClicked(auth_url, client_id, openInNewTab = false) {
+  const state = await getOAuthState();
+  if (!state) return;
+  const redirect_uri = `${window.location.origin}/oauth/oidc`;
+  const response_type = 'code';
+  const scope = 'openid profile email';
+  const url = `${auth_url}?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}`;
+  if (openInNewTab) {
+    window.open(url);
+  } else {
+    window.location.href = url;
+  }
+}
+
 export async function onGitHubOAuthClicked(github_client_id) {
   const state = await getOAuthState();
   if (!state) return;