Merge branch 'main' into pr

web/.prettierrc.mjs

@@ -1 +1 @@
-module.exports = require("@so1ve/prettier-config");
+module.exports = require('@so1ve/prettier-config');

web/package.json

@@ -23,7 +23,7 @@
     "react-turnstile": "^1.0.5",
     "semantic-ui-offline": "^2.5.0",
     "semantic-ui-react": "^2.1.3",
-    "sse": "github:mpetazzoni/sse.js",
+    "sse": "https://github.com/mpetazzoni/sse.js",
     "i18next": "^23.16.8",
     "react-i18next": "^13.0.0",
     "i18next-browser-languagedetector": "^7.2.0"

web/src/App.js

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useContext, useEffect } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import Loading from './components/Loading';
 import User from './pages/User';
 import { PrivateRoute } from './components/PrivateRoute';
@@ -8,10 +8,8 @@ import LoginForm from './components/LoginForm';
 import NotFound from './pages/NotFound';
 import Setting from './pages/Setting';
 import EditUser from './pages/User/EditUser';
-import { getLogo, getSystemName } from './helpers';
 import PasswordResetForm from './components/PasswordResetForm';
 import PasswordResetConfirm from './components/PasswordResetConfirm';
-import { UserContext } from './context/User';
 import Channel from './pages/Channel';
 import Token from './pages/Token';
 import EditChannel from './pages/Channel/EditChannel';
@@ -23,31 +21,39 @@ import Chat2Link from './pages/Chat2Link';
 import { Layout } from '@douyinfe/semi-ui';
 import Midjourney from './pages/Midjourney';
 import Pricing from './pages/Pricing/index.js';
-import Task from "./pages/Task/index.js";
+import Task from './pages/Task/index.js';
 import Playground from './pages/Playground/Playground.js';
-import OAuth2Callback from "./components/OAuth2Callback.js";
-import { useTranslation } from 'react-i18next';
-import { StatusContext } from './context/Status';
-import { setStatusData } from './helpers/data.js';
-import { API, showError } from './helpers';
+import OAuth2Callback from './components/OAuth2Callback.js';
 import PersonalSetting from './components/PersonalSetting.js';
+import Setup from './pages/Setup/index.js';
+import SetupCheck from './components/SetupCheck';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
 const About = lazy(() => import('./pages/About'));
 
 function App() {
+  const location = useLocation();
+
   return (
-    <>
+    <SetupCheck>
       <Routes>
         <Route
           path='/'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <Home />
             </Suspense>
           }
         />
+        <Route
+          path='/setup'
+          element={
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
+              <Setup />
+            </Suspense>
+          }
+        />
         <Route
           path='/channel'
           element={
@@ -59,7 +65,7 @@ function App() {
         <Route
           path='/channel/edit/:id'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditChannel />
             </Suspense>
           }
@@ -67,7 +73,7 @@ function App() {
         <Route
           path='/channel/add'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditChannel />
             </Suspense>
           }
@@ -107,7 +113,7 @@ function App() {
         <Route
           path='/user/edit/:id'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditUser />
             </Suspense>
           }
@@ -115,7 +121,7 @@ function App() {
         <Route
           path='/user/edit'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditUser />
             </Suspense>
           }
@@ -123,7 +129,7 @@ function App() {
         <Route
           path='/user/reset'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <PasswordResetConfirm />
             </Suspense>
           }
@@ -131,7 +137,7 @@ function App() {
         <Route
           path='/login'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <LoginForm />
             </Suspense>
           }
@@ -139,7 +145,7 @@ function App() {
         <Route
           path='/register'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <RegisterForm />
             </Suspense>
           }
@@ -147,7 +153,7 @@ function App() {
         <Route
           path='/reset'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <PasswordResetForm />
             </Suspense>
           }
@@ -155,16 +161,24 @@ function App() {
         <Route
           path='/oauth/github'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <OAuth2Callback type='github'></OAuth2Callback>
             </Suspense>
           }
         />
+        <Route
+          path='/oauth/oidc'
+          element={
+            <Suspense fallback={<Loading></Loading>}>
+              <OAuth2Callback type='oidc'></OAuth2Callback>
+            </Suspense>
+          }
+        />
         <Route
           path='/oauth/linuxdo'
           element={
-            <Suspense fallback={<Loading></Loading>}>
-                <OAuth2Callback type='linuxdo'></OAuth2Callback>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
+              <OAuth2Callback type='linuxdo'></OAuth2Callback>
             </Suspense>
           }
         />
@@ -172,7 +186,7 @@ function App() {
           path='/setting'
           element={
             <PrivateRoute>
-              <Suspense fallback={<Loading></Loading>}>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
                 <Setting />
               </Suspense>
             </PrivateRoute>
@@ -182,7 +196,7 @@ function App() {
           path='/personal'
           element={
             <PrivateRoute>
-              <Suspense fallback={<Loading></Loading>}>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
                 <PersonalSetting />
               </Suspense>
             </PrivateRoute>
@@ -192,7 +206,7 @@ function App() {
           path='/topup'
           element={
             <PrivateRoute>
-              <Suspense fallback={<Loading></Loading>}>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
                 <TopUp />
               </Suspense>
             </PrivateRoute>
@@ -210,7 +224,7 @@ function App() {
           path='/detail'
           element={
             <PrivateRoute>
-              <Suspense fallback={<Loading></Loading>}>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
                 <Detail />
               </Suspense>
             </PrivateRoute>
@@ -220,7 +234,7 @@ function App() {
           path='/midjourney'
           element={
             <PrivateRoute>
-              <Suspense fallback={<Loading></Loading>}>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
                 <Midjourney />
               </Suspense>
             </PrivateRoute>
@@ -230,7 +244,7 @@ function App() {
           path='/task'
           element={
             <PrivateRoute>
-              <Suspense fallback={<Loading></Loading>}>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
                 <Task />
               </Suspense>
             </PrivateRoute>
@@ -239,7 +253,7 @@ function App() {
         <Route
           path='/pricing'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <Pricing />
             </Suspense>
           }
@@ -247,7 +261,7 @@ function App() {
         <Route
           path='/about'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <About />
             </Suspense>
           }
@@ -255,25 +269,25 @@ function App() {
         <Route
           path='/chat/:id?'
           element={
-            <Suspense fallback={<Loading></Loading>}>
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <Chat />
             </Suspense>
           }
         />
         {/* 方便使用chat2link直接跳转聊天... */}
-          <Route
-            path='/chat2link'
-            element={
-              <PrivateRoute>
-                <Suspense fallback={<Loading></Loading>}>
-                    <Chat2Link />
-                </Suspense>
-              </PrivateRoute>
-            }
-          />
-          <Route path='*' element={<NotFound />} />
-        </Routes>
-      </>
+        <Route
+          path='/chat2link'
+          element={
+            <PrivateRoute>
+              <Suspense fallback={<Loading></Loading>} key={location.pathname}>
+                <Chat2Link />
+              </Suspense>
+            </PrivateRoute>
+          }
+        />
+        <Route path='*' element={<NotFound />} />
+      </Routes>
+    </SetupCheck>
   );
 }
 

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;

web/src/constants/channel.constants.js

@@ -3,88 +3,89 @@ export const CHANNEL_OPTIONS = [
   {
     value: 2,
     color: 'light-blue',
-    label: 'Midjourney Proxy'
+    label: 'Midjourney Proxy',
   },
   {
     value: 5,
     color: 'blue',
-    label: 'Midjourney Proxy Plus'
+    label: 'Midjourney Proxy Plus',
   },
   {
     value: 36,
     color: 'purple',
-    label: 'Suno API'
+    label: 'Suno API',
   },
   { value: 4, color: 'grey', label: 'Ollama' },
   {
     value: 14,
     color: 'indigo',
-    label: 'Anthropic Claude'
+    label: 'Anthropic Claude',
   },
   {
     value: 33,
     color: 'indigo',
-    label: 'AWS Claude'
+    label: 'AWS Claude',
   },
   { value: 41, color: 'blue', label: 'Vertex AI' },
   {
     value: 3,
     color: 'teal',
-    label: 'Azure OpenAI'
+    label: 'Azure OpenAI',
   },
   {
     value: 34,
     color: 'purple',
-    label: 'Cohere'
+    label: 'Cohere',
   },
   { value: 39, color: 'grey', label: 'Cloudflare' },
   { value: 43, color: 'blue', label: 'DeepSeek' },
   {
     value: 15,
     color: 'blue',
-    label: '百度文心千帆'
+    label: '百度文心千帆',
   },
   {
     value: 46,
     color: 'blue',
-    label: '百度文心千帆V2'
+    label: '百度文心千帆V2',
   },
   {
     value: 17,
     color: 'orange',
-    label: '阿里通义千问'
+    label: '阿里通义千问',
   },
   {
     value: 18,
     color: 'blue',
-    label: '讯飞星火认知'
+    label: '讯飞星火认知',
   },
   {
     value: 16,
     color: 'violet',
-    label: '智谱 ChatGLM'
+    label: '智谱 ChatGLM',
   },
   {
     value: 26,
     color: 'purple',
-    label: '智谱 GLM-4V'
+    label: '智谱 GLM-4V',
   },
   {
     value: 24,
     color: 'orange',
-    label: 'Google Gemini'
+    label: 'Google Gemini',
   },
   {
     value: 11,
     color: 'orange',
-    label: 'Google PaLM2'
+    label: 'Google PaLM2',
   },
   {
-    value: 45,
+    value: 47,
     color: 'blue',
-    label: '字节火山方舟、豆包、DeepSeek通用'
+    label: 'Xinference',
   },
   { value: 25, color: 'green', label: 'Moonshot' },
+  { value: 20, color: 'green', label: 'OpenRouter' },
   { value: 19, color: 'blue', label: '360 智脑' },
   { value: 23, color: 'teal', label: '腾讯混元' },
   { value: 31, color: 'green', label: '零一万物' },
@@ -97,16 +98,26 @@ export const CHANNEL_OPTIONS = [
   {
     value: 22,
     color: 'blue',
-    label: '知识库：FastGPT'
+    label: '知识库：FastGPT',
   },
   {
     value: 21,
     color: 'purple',
-    label: '知识库：AI Proxy'
+    label: '知识库：AI Proxy',
   },
   {
     value: 44,
     color: 'purple',
-    label: '嵌入模型：MokaAI M3E'
+    label: '嵌入模型：MokaAI M3E',
+  },
+  {
+    value: 45,
+    color: 'blue',
+    label: '字节火山方舟、豆包、DeepSeek通用',
+  },
+  {
+    value: 48,
+    color: 'blue',
+    label: 'xAI'
   }
 ];

web/src/context/Style/index.js

@@ -9,8 +9,9 @@ export const StyleContext = React.createContext({
 
 export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
-    isMobile: false,
+    isMobile: isMobile(),
     showSider: false,
+    siderCollapsed: false,
     shouldInnerPadding: false,
   });
 
@@ -18,28 +19,37 @@ export const StyleProvider = ({ children }) => {
     if ('type' in action) {
       switch (action.type) {
         case 'TOGGLE_SIDER':
-          setState(prev => ({ ...prev, showSider: !prev.showSider }));
+          setState((prev) => ({ ...prev, showSider: !prev.showSider }));
           break;
         case 'SET_SIDER':
-          setState(prev => ({ ...prev, showSider: action.payload }));
+          setState((prev) => ({ ...prev, showSider: action.payload }));
           break;
         case 'SET_MOBILE':
-          setState(prev => ({ ...prev, isMobile: action.payload }));
+          setState((prev) => ({ ...prev, isMobile: action.payload }));
+          break;
+        case 'SET_SIDER_COLLAPSED':
+          setState((prev) => ({ ...prev, siderCollapsed: action.payload }));
           break;
         case 'SET_INNER_PADDING':
-          setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
+          setState((prev) => ({ ...prev, shouldInnerPadding: action.payload }));
           break;
         default:
-          setState(prev => ({ ...prev, ...action }));
+          setState((prev) => ({ ...prev, ...action }));
       }
     } else {
-      setState(prev => ({ ...prev, ...action }));
+      setState((prev) => ({ ...prev, ...action }));
     }
   };
 
   useEffect(() => {
     const updateIsMobile = () => {
-      dispatch({ type: 'SET_MOBILE', payload: isMobile() });
+      const mobileDetected = isMobile();
+      dispatch({ type: 'SET_MOBILE', payload: mobileDetected });
+
+      // If on mobile, we might want to auto-hide the sidebar
+      if (mobileDetected && state.showSider) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+      }
     };
 
     updateIsMobile();
@@ -47,28 +57,44 @@ export const StyleProvider = ({ children }) => {
     const updateShowSider = () => {
       // check pathname
       const pathname = window.location.pathname;
-      if (pathname === '' || pathname === '/' || pathname.includes('/home') || pathname.includes('/chat')) {
+      if (
+        pathname === '' ||
+        pathname === '/' ||
+        pathname.includes('/home') ||
+        pathname.includes('/chat')
+      ) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+        dispatch({ type: 'SET_INNER_PADDING', payload: false });
+      } else if (pathname === '/setup') {
         dispatch({ type: 'SET_SIDER', payload: false });
         dispatch({ type: 'SET_INNER_PADDING', payload: false });
       } else {
-        dispatch({ type: 'SET_SIDER', payload: true });
+        // Only show sidebar on non-mobile devices by default
+        dispatch({ type: 'SET_SIDER', payload: !isMobile() });
         dispatch({ type: 'SET_INNER_PADDING', payload: true });
       }
-
-      if (isMobile()) {
-        dispatch({ type: 'SET_SIDER', payload: false });
-      }
     };
 
-    updateShowSider()
+    updateShowSider();
 
+    const updateSiderCollapsed = () => {
+      const isCollapsed =
+        localStorage.getItem('default_collapse_sidebar') === 'true';
+      dispatch({ type: 'SET_SIDER_COLLAPSED', payload: isCollapsed });
+    };
 
-    // Optionally, add event listeners to handle window resize
-    window.addEventListener('resize', updateIsMobile);
+    updateSiderCollapsed();
+
+    // Add event listeners to handle window resize
+    const handleResize = () => {
+      updateIsMobile();
+    };
+
+    window.addEventListener('resize', handleResize);
 
     // Cleanup event listener on component unmount
     return () => {
-      window.removeEventListener('resize', updateIsMobile);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
 

web/src/helpers/api.js

@@ -7,8 +7,8 @@ export let API = axios.create({
     : '',
   headers: {
     'New-API-User': getUserIdFromLocalStorage(),
-    'Cache-Control': 'no-store'
-  }
+    'Cache-Control': 'no-store',
+  },
 });
 
 export function updateAPI() {
@@ -18,8 +18,8 @@ export function updateAPI() {
       : '',
     headers: {
       'New-API-User': getUserIdFromLocalStorage(),
-      'Cache-Control': 'no-store'
-    }
+      'Cache-Control': 'no-store',
+    },
   });
 }
 

web/src/helpers/other.js

@@ -1,7 +1,7 @@
-export function getLogOther(otherStr) {
-    if (otherStr === undefined || otherStr === '') {
-        otherStr = '{}'
-    }
-    let other = JSON.parse(otherStr)
-    return other
-}
+export function getLogOther(otherStr) {
+  if (otherStr === undefined || otherStr === '') {
+    otherStr = '{}';
+  }
+  let other = JSON.parse(otherStr);
+  return other;
+}

web/src/helpers/render.js

@@ -44,7 +44,10 @@ export function renderGroup(group) {
             if (await copy(group)) {
               showSuccess(i18next.t('已复制：') + group);
             } else {
-              Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: group });
+              Modal.error({
+                title: t('无法复制到剪贴板，请手动复制'),
+                content: group,
+              });
             }
           }}
         >
@@ -64,28 +67,37 @@ export function renderRatio(ratio) {
   } else if (ratio > 1) {
     color = 'blue';
   }
-  return <Tag color={color}>{ratio}x {i18next.t('倍率')}</Tag>;
+  return (
+    <Tag color={color}>
+      {ratio}x {i18next.t('倍率')}
+    </Tag>
+  );
 }
 
-const measureTextWidth = (text, style = {
-  fontSize: '14px',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-}, containerWidth) => {
+const measureTextWidth = (
+  text,
+  style = {
+    fontSize: '14px',
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  containerWidth,
+) => {
   const span = document.createElement('span');
-  
+
   span.style.visibility = 'hidden';
   span.style.position = 'absolute';
   span.style.whiteSpace = 'nowrap';
   span.style.fontSize = style.fontSize;
   span.style.fontFamily = style.fontFamily;
-  
+
   span.textContent = text;
-  
+
   document.body.appendChild(span);
   const width = span.offsetWidth;
-  
+
   document.body.removeChild(span);
-  
+
   return width;
 };
 
@@ -94,7 +106,7 @@ export function truncateText(text, maxWidth = 200) {
     return text;
   }
   if (!text) return text;
-  
+
   try {
     // Handle percentage-based maxWidth
     let actualMaxWidth = maxWidth;
@@ -103,19 +115,19 @@ export function truncateText(text, maxWidth = 200) {
       // Use window width as fallback container width
       actualMaxWidth = window.innerWidth * percentage;
     }
-    
+
     const width = measureTextWidth(text);
     if (width <= actualMaxWidth) return text;
-    
+
     let left = 0;
     let right = text.length;
     let result = text;
-    
+
     while (left <= right) {
       const mid = Math.floor((left + right) / 2);
       const truncated = text.slice(0, mid) + '...';
       const currentWidth = measureTextWidth(truncated);
-      
+
       if (currentWidth <= actualMaxWidth) {
         result = truncated;
         left = mid + 1;
@@ -123,10 +135,13 @@ export function truncateText(text, maxWidth = 200) {
         right = mid - 1;
       }
     }
-    
+
     return result;
   } catch (error) {
-    console.warn('Text measurement failed, falling back to character count', error);
+    console.warn(
+      'Text measurement failed, falling back to character count',
+      error,
+    );
     if (text.length > 20) {
       return text.slice(0, 17) + '...';
     }
@@ -149,11 +164,11 @@ export const renderGroupOption = (item) => {
     emptyContent,
     ...rest
   } = item;
-  
+
   const baseStyle = {
-    display: 'flex', 
-    justifyContent: 'space-between', 
-    alignItems: 'center', 
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: '8px 16px',
     cursor: disabled ? 'not-allowed' : 'pointer',
     backgroundColor: focused ? 'var(--semi-color-fill-0)' : 'transparent',
@@ -162,8 +177,8 @@ export const renderGroupOption = (item) => {
       backgroundColor: 'var(--semi-color-primary-light-default)',
     }),
     '&:hover': {
-      backgroundColor: !disabled && 'var(--semi-color-fill-1)'
-    }
+      backgroundColor: !disabled && 'var(--semi-color-fill-1)',
+    },
   };
 
   const handleClick = () => {
@@ -177,9 +192,9 @@ export const renderGroupOption = (item) => {
       onMouseEnter(e);
     }
   };
-  
+
   return (
-    <div 
+    <div
       style={baseStyle}
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}
@@ -188,7 +203,7 @@ export const renderGroupOption = (item) => {
         <Typography.Text strong type={disabled ? 'tertiary' : undefined}>
           {value}
         </Typography.Text>
-        <Typography.Text type="secondary" size="small">
+        <Typography.Text type='secondary' size='small'>
           {label}
         </Typography.Text>
       </div>
@@ -222,8 +237,7 @@ export function renderQuotaNumberWithDigit(num, digits = 2) {
 }
 
 export function renderNumberWithPoint(num) {
-  if (num === undefined)
-    return '';
+  if (num === undefined) return '';
   num = num.toFixed(2);
   if (num >= 100000) {
     // Convert number to string to manipulate it
@@ -302,11 +316,14 @@ export function renderModelPrice(
   cacheRatio = 1.0,
 ) {
   if (modelPrice !== -1) {
-    return i18next.t('模型价格：${{price}} * 分组倍率：{{ratio}} = ${{total}}', {
-      price: modelPrice,
-      ratio: groupRatio,
-      total: modelPrice * groupRatio
-    });
+    return i18next.t(
+      '模型价格：${{price}} * 分组倍率：{{ratio}} = ${{total}}',
+      {
+        price: modelPrice,
+        ratio: groupRatio,
+        total: modelPrice * groupRatio,
+      },
+    );
   } else {
     if (completionRatio === undefined) {
       completionRatio = 0;
@@ -314,55 +331,72 @@ export function renderModelPrice(
     let inputRatioPrice = modelRatio * 2.0;
     let completionRatioPrice = modelRatio * 2.0 * completionRatio;
     let cacheRatioPrice = modelRatio * 2.0 * cacheRatio;
-    
+
     // Calculate effective input tokens (non-cached + cached with ratio applied)
-    const effectiveInputTokens = (inputTokens - cacheTokens) + (cacheTokens * cacheRatio);
-    
+    const effectiveInputTokens =
+      inputTokens - cacheTokens + cacheTokens * cacheRatio;
+
     let price =
       (effectiveInputTokens / 1000000) * inputRatioPrice * groupRatio +
       (completionTokens / 1000000) * completionRatioPrice * groupRatio;
-    
+
     return (
       <>
         <article>
-          <p>{i18next.t('提示价格：${{price}} = ${{total}} / 1M tokens', {
-            price: inputRatioPrice,
-            total: inputRatioPrice
-          })}</p>
-          <p>{i18next.t('补全价格：${{price}} * {{completionRatio}} = ${{total}} / 1M tokens (补全倍率: {{completionRatio}})', {
-            price: inputRatioPrice,
-            total: completionRatioPrice,
-            completionRatio: completionRatio
-          })}</p>
-          {cacheTokens > 0 && (
-            <p>{i18next.t('缓存价格：${{price}} * {{cacheRatio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})', {
+          <p>
+            {i18next.t('提示价格：${{price}} / 1M tokens', {
               price: inputRatioPrice,
-              total: inputRatioPrice * cacheRatio,
-              cacheRatio: cacheRatio
-            })}</p>
+            })}
+          </p>
+          <p>
+            {i18next.t(
+              '补全价格：${{price}} * {{completionRatio}} = ${{total}} / 1M tokens (补全倍率: {{completionRatio}})',
+              {
+                price: inputRatioPrice,
+                total: completionRatioPrice,
+                completionRatio: completionRatio,
+              },
+            )}
+          </p>
+          {cacheTokens > 0 && (
+            <p>
+              {i18next.t(
+                '缓存价格：${{price}} * {{cacheRatio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})',
+                {
+                  price: inputRatioPrice,
+                  total: inputRatioPrice * cacheRatio,
+                  cacheRatio: cacheRatio,
+                },
+              )}
+            </p>
           )}
           <p></p>
           <p>
-            {cacheTokens > 0 ? 
-              i18next.t('提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}', {
-                nonCacheInput: inputTokens - cacheTokens,
-                cacheInput: cacheTokens,
-                cachePrice: inputRatioPrice * cacheRatio,
-                price: inputRatioPrice,
-                completion: completionTokens,
-                compPrice: completionRatioPrice,
-                ratio: groupRatio,
-                total: price.toFixed(6)
-              }) :
-              i18next.t('提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}', {
-                input: inputTokens,
-                price: inputRatioPrice,
-                completion: completionTokens,
-                compPrice: completionRatioPrice,
-                ratio: groupRatio,
-                total: price.toFixed(6)
-              })
-            }
+            {cacheTokens > 0
+              ? i18next.t(
+                  '提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}',
+                  {
+                    nonCacheInput: inputTokens - cacheTokens,
+                    cacheInput: cacheTokens,
+                    cachePrice: inputRatioPrice * cacheRatio,
+                    price: inputRatioPrice,
+                    completion: completionTokens,
+                    compPrice: completionRatioPrice,
+                    ratio: groupRatio,
+                    total: price.toFixed(6),
+                  },
+                )
+              : i18next.t(
+                  '提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}',
+                  {
+                    input: inputTokens,
+                    price: inputRatioPrice,
+                    completion: completionTokens,
+                    compPrice: completionRatioPrice,
+                    ratio: groupRatio,
+                    total: price.toFixed(6),
+                  },
+                )}
           </p>
           <p>{i18next.t('仅供参考，以实际扣费为准')}</p>
         </article>
@@ -381,19 +415,22 @@ export function renderModelPriceSimple(
   if (modelPrice !== -1) {
     return i18next.t('价格：${{price}} * 分组：{{ratio}}', {
       price: modelPrice,
-      ratio: groupRatio
+      ratio: groupRatio,
     });
   } else {
     if (cacheTokens !== 0) {
-      return i18next.t('模型: {{ratio}} * 分组: {{groupRatio}} * 缓存: {{cacheRatio}}', {
-        ratio: modelRatio,
-        groupRatio: groupRatio,
-        cacheRatio: cacheRatio
-      });
+      return i18next.t(
+        '模型: {{ratio}} * 分组: {{groupRatio}} * 缓存: {{cacheRatio}}',
+        {
+          ratio: modelRatio,
+          groupRatio: groupRatio,
+          cacheRatio: cacheRatio,
+        },
+      );
     } else {
       return i18next.t('模型: {{ratio}} * 分组: {{groupRatio}}', {
         ratio: modelRatio,
-        groupRatio: groupRatio
+        groupRatio: groupRatio,
       });
     }
   }
@@ -415,11 +452,14 @@ export function renderAudioModelPrice(
 ) {
   // 1 ratio = $0.002 / 1K tokens
   if (modelPrice !== -1) {
-    return i18next.t('模型价格：${{price}} * 分组倍率：{{ratio}} = ${{total}}', {
-      price: modelPrice,
-      ratio: groupRatio,
-      total: modelPrice * groupRatio
-    });
+    return i18next.t(
+      '模型价格：${{price}} * 分组倍率：{{ratio}} = ${{total}}',
+      {
+        price: modelPrice,
+        ratio: groupRatio,
+        total: modelPrice * groupRatio,
+      },
+    );
   } else {
     if (completionRatio === undefined) {
       completionRatio = 0;
@@ -431,82 +471,120 @@ export function renderAudioModelPrice(
     let inputRatioPrice = modelRatio * 2.0;
     let completionRatioPrice = modelRatio * 2.0 * completionRatio;
     let cacheRatioPrice = modelRatio * 2.0 * cacheRatio;
-    
+
     // Calculate effective input tokens (non-cached + cached with ratio applied)
-    const effectiveInputTokens = (inputTokens - cacheTokens) + (cacheTokens * cacheRatio);
-    
+    const effectiveInputTokens =
+      inputTokens - cacheTokens + cacheTokens * cacheRatio;
+
     let textPrice =
       (effectiveInputTokens / 1000000) * inputRatioPrice * groupRatio +
-      (completionTokens / 1000000) * completionRatioPrice * groupRatio
+      (completionTokens / 1000000) * completionRatioPrice * groupRatio;
     let audioPrice =
       (audioInputTokens / 1000000) * inputRatioPrice * audioRatio * groupRatio +
-      (audioCompletionTokens / 1000000) * inputRatioPrice * audioRatio * audioCompletionRatio * groupRatio;
+      (audioCompletionTokens / 1000000) *
+        inputRatioPrice *
+        audioRatio *
+        audioCompletionRatio *
+        groupRatio;
     let price = textPrice + audioPrice;
     return (
       <>
         <article>
-          <p>{i18next.t('提示价格：${{price}} = ${{total}} / 1M tokens', {
-            price: inputRatioPrice,
-            total: inputRatioPrice
-          })}</p>
-          <p>{i18next.t('补全价格：${{price}} * {{completionRatio}} = ${{total}} / 1M tokens (补全倍率: {{completionRatio}})', {
-            price: inputRatioPrice,
-            total: completionRatioPrice,
-            completionRatio: completionRatio
-          })}</p>
-          {cacheTokens > 0 && (
-            <p>{i18next.t('缓存价格：${{price}} * {{cacheRatio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})', {
+          <p>
+            {i18next.t('提示价格：${{price}} / 1M tokens', {
               price: inputRatioPrice,
-              total: inputRatioPrice * cacheRatio,
-              cacheRatio: cacheRatio
-            })}</p>
+            })}
+          </p>
+          <p>
+            {i18next.t(
+              '补全价格：${{price}} * {{completionRatio}} = ${{total}} / 1M tokens (补全倍率: {{completionRatio}})',
+              {
+                price: inputRatioPrice,
+                total: completionRatioPrice,
+                completionRatio: completionRatio,
+              },
+            )}
+          </p>
+          {cacheTokens > 0 && (
+            <p>
+              {i18next.t(
+                '缓存价格：${{price}} * {{cacheRatio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})',
+                {
+                  price: inputRatioPrice,
+                  total: inputRatioPrice * cacheRatio,
+                  cacheRatio: cacheRatio,
+                },
+              )}
+            </p>
           )}
-          <p>{i18next.t('音频提示价格：${{price}} * {{audioRatio}} = ${{total}} / 1M tokens (音频倍率: {{audioRatio}})', {
-            price: inputRatioPrice,
-            total: inputRatioPrice * audioRatio,
-            audioRatio: audioRatio
-          })}</p>
-          <p>{i18next.t('音频补全价格：${{price}} * {{audioRatio}} * {{audioCompRatio}} = ${{total}} / 1M tokens (音频补全倍率: {{audioCompRatio}})', {
-            price: inputRatioPrice,
-            total: inputRatioPrice * audioRatio * audioCompletionRatio,
-            audioRatio: audioRatio,
-            audioCompRatio: audioCompletionRatio
-          })}</p>
           <p>
-            {cacheTokens > 0 ? 
-              i18next.t('文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}', {
-                nonCacheInput: inputTokens - cacheTokens,
-                cacheInput: cacheTokens,
-                cachePrice: inputRatioPrice * cacheRatio,
+            {i18next.t(
+              '音频提示价格：${{price}} * {{audioRatio}} = ${{total}} / 1M tokens (音频倍率: {{audioRatio}})',
+              {
                 price: inputRatioPrice,
-                completion: completionTokens,
-                compPrice: completionRatioPrice,
-                total: textPrice.toFixed(6)
-              }) :
-              i18next.t('文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}', {
-                input: inputTokens,
-                price: inputRatioPrice,
-                completion: completionTokens,
-                compPrice: completionRatioPrice,
-                total: textPrice.toFixed(6)
-              })
-            }
+                total: inputRatioPrice * audioRatio,
+                audioRatio: audioRatio,
+              },
+            )}
           </p>
           <p>
-            {i18next.t('音频提示 {{input}} tokens / 1M tokens * ${{audioInputPrice}} + 音频补全 {{completion}} tokens / 1M tokens * ${{audioCompPrice}} = ${{total}}', {
-              input: audioInputTokens,
-              completion: audioCompletionTokens,
-              audioInputPrice: audioRatio * inputRatioPrice,
-              audioCompPrice: audioRatio * audioCompletionRatio * inputRatioPrice,
-              total: audioPrice.toFixed(6)
-            })}
+            {i18next.t(
+              '音频补全价格：${{price}} * {{audioRatio}} * {{audioCompRatio}} = ${{total}} / 1M tokens (音频补全倍率: {{audioCompRatio}})',
+              {
+                price: inputRatioPrice,
+                total: inputRatioPrice * audioRatio * audioCompletionRatio,
+                audioRatio: audioRatio,
+                audioCompRatio: audioCompletionRatio,
+              },
+            )}
           </p>
           <p>
-            {i18next.t('总价：文字价格 {{textPrice}} + 音频价格 {{audioPrice}} = ${{total}}', {
-              total: price.toFixed(6),
-              textPrice: textPrice.toFixed(6),
-              audioPrice: audioPrice.toFixed(6)
-            })}
+            {cacheTokens > 0
+              ? i18next.t(
+                  '文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
+                  {
+                    nonCacheInput: inputTokens - cacheTokens,
+                    cacheInput: cacheTokens,
+                    cachePrice: inputRatioPrice * cacheRatio,
+                    price: inputRatioPrice,
+                    completion: completionTokens,
+                    compPrice: completionRatioPrice,
+                    total: textPrice.toFixed(6),
+                  },
+                )
+              : i18next.t(
+                  '文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
+                  {
+                    input: inputTokens,
+                    price: inputRatioPrice,
+                    completion: completionTokens,
+                    compPrice: completionRatioPrice,
+                    total: textPrice.toFixed(6),
+                  },
+                )}
+          </p>
+          <p>
+            {i18next.t(
+              '音频提示 {{input}} tokens / 1M tokens * ${{audioInputPrice}} + 音频补全 {{completion}} tokens / 1M tokens * ${{audioCompPrice}} = ${{total}}',
+              {
+                input: audioInputTokens,
+                completion: audioCompletionTokens,
+                audioInputPrice: audioRatio * inputRatioPrice,
+                audioCompPrice:
+                  audioRatio * audioCompletionRatio * inputRatioPrice,
+                total: audioPrice.toFixed(6),
+              },
+            )}
+          </p>
+          <p>
+            {i18next.t(
+              '总价：文字价格 {{textPrice}} + 音频价格 {{audioPrice}} = ${{total}}',
+              {
+                total: price.toFixed(6),
+                textPrice: textPrice.toFixed(6),
+                audioPrice: audioPrice.toFixed(6),
+              },
+            )}
           </p>
           <p>{i18next.t('仅供参考，以实际扣费为准')}</p>
         </article>
@@ -519,7 +597,9 @@ export function renderQuotaWithPrompt(quota, digits) {
   let displayInCurrency = localStorage.getItem('display_in_currency');
   displayInCurrency = displayInCurrency === 'true';
   if (displayInCurrency) {
-    return ' | ' + i18next.t('等价金额') + ': ' + renderQuota(quota, digits) + '';
+    return (
+      ' | ' + i18next.t('等价金额') + ': ' + renderQuota(quota, digits) + ''
+    );
   }
   return '';
 }
@@ -539,7 +619,7 @@ const colors = [
   'red',
   'teal',
   'violet',
-  'yellow'
+  'yellow',
 ];
 
 // 基础10色色板 (N ≤ 10)
@@ -553,7 +633,7 @@ const baseColors = [
   '#304D77',
   '#B48DEB',
   '#009488',
-  '#FF7DDA'
+  '#FF7DDA',
 ];
 
 // 扩展20色色板 (10 < N ≤ 20)
@@ -577,7 +657,7 @@ const extendedColors = [
   '#009488',
   '#59BAA8',
   '#FF7DDA',
-  '#FFCFEE'
+  '#FFCFEE',
 ];
 
 export const modelColorMap = {
@@ -633,14 +713,14 @@ export function modelToColor(modelName) {
   // 2. 生成一个稳定的数字作为索引
   let hash = 0;
   for (let i = 0; i < modelName.length; i++) {
-    hash = ((hash << 5) - hash) + modelName.charCodeAt(i);
+    hash = (hash << 5) - hash + modelName.charCodeAt(i);
     hash = hash & hash; // Convert to 32-bit integer
   }
   hash = Math.abs(hash);
 
   // 3. 根据模型名称长度选择不同的色板
   const colorPalette = modelName.length > 10 ? extendedColors : baseColors;
-  
+
   // 4. 使用hash值选择颜色
   const index = hash % colorPalette.length;
   return colorPalette[index];
@@ -654,3 +734,229 @@ export function stringToColor(str) {
   let i = sum % colors.length;
   return colors[i];
 }
+
+export function renderClaudeModelPrice(
+  inputTokens,
+  completionTokens,
+  modelRatio,
+  modelPrice = -1,
+  completionRatio,
+  groupRatio,
+  cacheTokens = 0,
+  cacheRatio = 1.0,
+  cacheCreationTokens = 0,
+  cacheCreationRatio = 1.0,
+) {
+  const ratioLabel = false ? i18next.t('专属倍率') : i18next.t('分组倍率');
+
+  if (modelPrice !== -1) {
+    return i18next.t(
+      '模型价格：${{price}} * {{ratioType}}：{{ratio}} = ${{total}}',
+      {
+        price: modelPrice,
+        ratioType: ratioLabel,
+        ratio: groupRatio,
+        total: modelPrice * groupRatio,
+      },
+    );
+  } else {
+    if (completionRatio === undefined) {
+      completionRatio = 0;
+    }
+
+    const completionRatioValue = completionRatio || 0;
+    const inputRatioPrice = modelRatio * 2.0;
+    const completionRatioPrice = modelRatio * 2.0 * completionRatioValue;
+    let cacheRatioPrice = (modelRatio * 2.0 * cacheRatio).toFixed(2);
+    let cacheCreationRatioPrice = modelRatio * 2.0 * cacheCreationRatio;
+
+    // Calculate effective input tokens (non-cached + cached with ratio applied + cache creation with ratio applied)
+    const nonCachedTokens = inputTokens;
+    const effectiveInputTokens =
+      nonCachedTokens +
+      cacheTokens * cacheRatio +
+      cacheCreationTokens * cacheCreationRatio;
+
+    let price =
+      (effectiveInputTokens / 1000000) * inputRatioPrice * groupRatio +
+      (completionTokens / 1000000) * completionRatioPrice * groupRatio;
+
+    return (
+      <>
+        <article>
+          <p>
+            {i18next.t('提示价格：${{price}} / 1M tokens', {
+              price: inputRatioPrice,
+            })}
+          </p>
+          <p>
+            {i18next.t(
+              '补全价格：${{price}} * {{ratio}} = ${{total}} / 1M tokens',
+              {
+                price: inputRatioPrice,
+                ratio: completionRatio,
+                total: completionRatioPrice,
+              },
+            )}
+          </p>
+          {cacheTokens > 0 && (
+            <p>
+              {i18next.t(
+                '缓存价格：${{price}} * {{ratio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})',
+                {
+                  price: inputRatioPrice,
+                  ratio: cacheRatio,
+                  total: cacheRatioPrice,
+                  cacheRatio: cacheRatio,
+                },
+              )}
+            </p>
+          )}
+          {cacheCreationTokens > 0 && (
+            <p>
+              {i18next.t(
+                '缓存创建价格：${{price}} * {{ratio}} = ${{total}} / 1M tokens (缓存创建倍率: {{cacheCreationRatio}})',
+                {
+                  price: inputRatioPrice,
+                  ratio: cacheCreationRatio,
+                  total: cacheCreationRatioPrice,
+                  cacheCreationRatio: cacheCreationRatio,
+                },
+              )}
+            </p>
+          )}
+          <p></p>
+          <p>
+            {cacheTokens > 0 || cacheCreationTokens > 0
+              ? i18next.t(
+                  '提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 缓存创建 {{cacheCreationInput}} tokens / 1M tokens * ${{cacheCreationPrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}',
+                  {
+                    nonCacheInput: nonCachedTokens,
+                    cacheInput: cacheTokens,
+                    cacheRatio: cacheRatio,
+                    cacheCreationInput: cacheCreationTokens,
+                    cacheCreationRatio: cacheCreationRatio,
+                    cachePrice: cacheRatioPrice,
+                    cacheCreationPrice: cacheCreationRatioPrice,
+                    price: inputRatioPrice,
+                    completion: completionTokens,
+                    compPrice: completionRatioPrice,
+                    ratio: groupRatio,
+                    total: price.toFixed(6),
+                  },
+                )
+              : i18next.t(
+                  '提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}',
+                  {
+                    input: inputTokens,
+                    price: inputRatioPrice,
+                    completion: completionTokens,
+                    compPrice: completionRatioPrice,
+                    ratio: groupRatio,
+                    total: price.toFixed(6),
+                  },
+                )}
+          </p>
+          <p>{i18next.t('仅供参考，以实际扣费为准')}</p>
+        </article>
+      </>
+    );
+  }
+}
+
+export function renderClaudeLogContent(
+  modelRatio,
+  completionRatio,
+  modelPrice = -1,
+  groupRatio,
+  cacheRatio = 1.0,
+  cacheCreationRatio = 1.0,
+) {
+  const ratioLabel = false ? i18next.t('专属倍率') : i18next.t('分组倍率');
+
+  if (modelPrice !== -1) {
+    return i18next.t('模型价格 ${{price}}，{{ratioType}} {{ratio}}', {
+      price: modelPrice,
+      ratioType: ratioLabel,
+      ratio: groupRatio,
+    });
+  } else {
+    return i18next.t(
+      '模型倍率 {{modelRatio}}，补全倍率 {{completionRatio}}，缓存倍率 {{cacheRatio}}，缓存创建倍率 {{cacheCreationRatio}}，{{ratioType}} {{ratio}}',
+      {
+        modelRatio: modelRatio,
+        completionRatio: completionRatio,
+        cacheRatio: cacheRatio,
+        cacheCreationRatio: cacheCreationRatio,
+        ratioType: ratioLabel,
+        ratio: groupRatio,
+      },
+    );
+  }
+}
+
+export function renderClaudeModelPriceSimple(
+  modelRatio,
+  modelPrice = -1,
+  groupRatio,
+  cacheTokens = 0,
+  cacheRatio = 1.0,
+  cacheCreationTokens = 0,
+  cacheCreationRatio = 1.0,
+) {
+  const ratioLabel = false ? i18next.t('专属倍率') : i18next.t('分组');
+
+  if (modelPrice !== -1) {
+    return i18next.t('价格：${{price}} * {{ratioType}}：{{ratio}}', {
+      price: modelPrice,
+      ratioType: ratioLabel,
+      ratio: groupRatio,
+    });
+  } else {
+    if (cacheTokens !== 0 || cacheCreationTokens !== 0) {
+      return i18next.t(
+        '模型: {{ratio}} * {{ratioType}}: {{groupRatio}} * 缓存: {{cacheRatio}}',
+        {
+          ratio: modelRatio,
+          ratioType: ratioLabel,
+          groupRatio: groupRatio,
+          cacheRatio: cacheRatio,
+          cacheCreationRatio: cacheCreationRatio,
+        },
+      );
+    } else {
+      return i18next.t('模型: {{ratio}} * {{ratioType}}: {{groupRatio}}', {
+        ratio: modelRatio,
+        ratioType: ratioLabel,
+        groupRatio: groupRatio,
+      });
+    }
+  }
+}
+
+export function renderLogContent(
+  modelRatio,
+  completionRatio,
+  modelPrice = -1,
+  groupRatio,
+) {
+  const ratioLabel = false ? i18next.t('专属倍率') : i18next.t('分组倍率');
+
+  if (modelPrice !== -1) {
+    return i18next.t('模型价格 ${{price}}，{{ratioType}} {{ratio}}', {
+      price: modelPrice,
+      ratioType: ratioLabel,
+      ratio: groupRatio,
+    });
+  } else {
+    return i18next.t(
+      '模型倍率 {{modelRatio}}，补全倍率 {{completionRatio}}，{{ratioType}} {{ratio}}',
+      {
+        modelRatio: modelRatio,
+        completionRatio: completionRatio,
+        ratioType: ratioLabel,
+        ratio: groupRatio,
+      },
+    );
+  }
+}

web/src/helpers/utils.js

@@ -51,11 +51,11 @@ export async function copy(text) {
   } catch (e) {
     try {
       // 构建input 执行 复制命令
-      var _input = window.document.createElement("input");
+      var _input = window.document.createElement('input');
       _input.value = text;
       window.document.body.appendChild(_input);
       _input.select();
-      window.document.execCommand("Copy");
+      window.document.execCommand('Copy');
       window.document.body.removeChild(_input);
     } catch (e) {
       okay = false;
@@ -143,6 +143,7 @@ export function openPage(url) {
 }
 
 export function removeTrailingSlash(url) {
+  if (!url) return '';
   if (url.endsWith('/')) {
     return url.slice(0, -1);
   } else {
@@ -191,7 +192,7 @@ export function timestamp2string1(timestamp, dataExportDefaultTime = 'hour') {
   let day = date.getDate().toString();
   let hour = date.getHours().toString();
   if (day === '24') {
-    console.log("timestamp", timestamp);
+    console.log('timestamp', timestamp);
   }
   if (month.length === 1) {
     month = '0' + month;
@@ -247,7 +248,6 @@ export function verifyJSONPromise(value) {
   }
 }
 
-
 export function shouldShowPrompt(id) {
   let prompt = localStorage.getItem(`prompt-${id}`);
   return !prompt;

web/src/i18n/i18n.js

@@ -11,16 +11,16 @@ i18n
   .init({
     resources: {
       en: {
-        translation: enTranslation
+        translation: enTranslation,
       },
       zh: {
-        translation: zhTranslation
-      }
+        translation: zhTranslation,
+      },
     },
     fallbackLng: 'zh',
     interpolation: {
-      escapeValue: false
-    }
+      escapeValue: false,
+    },
   });
 
-export default i18n; 
+export default i18n;

web/src/i18n/locales/en.json

@@ -1,5 +1,6 @@
 {
   "主页": "Home",
+  "文档": "Docs",
   "控制台": "Console",
   "$%.6f 额度": "$%.6f quota",
   "%d 点额度": "%d point quota",
@@ -192,6 +193,8 @@
   "通用设置": "General Settings",
   "充值链接": "Recharge Link",
   "例如发卡网站的购买链接": "E.g., purchase link from card issuing website",
+  "文档地址": "Document Link",
+  "例如 https://docs.newapi.pro": "E.g., https://docs.newapi.pro",
   "聊天页面链接": "Chat Page Link",
   "例如 ChatGPT Next Web 的部署地址": "E.g., ChatGPT Next Web deployment address",
   "单位美元额度": "Quota per USD",
@@ -489,7 +492,7 @@
   "请输入默认 API 版本，例如：2023-03-15-preview，该配置可以被实际的请求查询参数所覆盖": "Please enter the default API version, for example: 2023-03-15-preview, this configuration can be overridden by the actual request query parameters",
   "默认": "default",
   "图片演示": "Image demo",
-  "参数替换为你的部署名称（模型名称中的点会被剔除）": "Replace the parameter with your deployment name (dots in the model name will be removed)",
+  "注意，系统请求的时模型名称中的点会被剔除，例如：gpt-4.5-preview会请求为gpt-45-preview，所以部署的模型名称需要去掉点": "Note that the dot in the model name requested by the system will be removed, for example: gpt-4.5-preview will be requested as gpt-45-preview, so the deployed model name needs to remove the dot",
   "模型映射必须是合法的 JSON 格式！": "Model mapping must be in valid JSON format!",
   "取消无限额度": "Cancel unlimited quota",
   "取消": "Cancel",
@@ -511,7 +514,7 @@
   "，图片演示。": "related image demo.",
   "令牌创建成功，请在列表页面点击复制获取令牌！": "Token created successfully, please click copy on the list page to get the token!",
   "代理": "Proxy",
-  "此项可选，用于通过代理站来进行 API 调用，请输入代理站地址，格式为：https://domain.com": "This is optional, used to make API calls through the proxy site, please enter the proxy site address, the format is: https://domain.com",
+  "此项可选，用于通过自定义API地址来进行 API 调用，请输入API地址，格式为：https://domain.com": "This is optional, used to make API calls through the proxy site, please enter the proxy site address, the format is: https://domain.com",
   "取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？": "Canceling password login will cause all users (including administrators) who have not bound other login methods to be unable to log in via password, confirm cancel?",
   "按照如下格式输入：": "Enter in the following format:",
   "模型版本": "Model version",
@@ -1062,7 +1065,7 @@
   "价格：${{price}} * 分组：{{ratio}}": "Price: ${{price}} * Group: {{ratio}}",
   "模型: {{ratio}} * 分组: {{groupRatio}}": "Model: {{ratio}} * Group: {{groupRatio}}",
   "统计额度": "Statistical quota",
-  "统计Tokens": "Statistical Tokens", 
+  "统计Tokens": "Statistical Tokens",
   "统计次数": "Statistical count",
   "平均RPM": "Average RPM",
   "平均TPM": "Average TPM",
@@ -1108,7 +1111,7 @@
   "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "If you are connecting to upstream One API or New API forwarding projects, please use OpenAI type. Do not use this type unless you know what you are doing.",
   "完整的 Base URL，支持变量{model}": "Complete Base URL, supports variable {model}",
   "请输入完整的URL，例如：https://api.openai.com/v1/chat/completions": "Please enter complete URL, e.g.: https://api.openai.com/v1/chat/completions",
-  "此项可选，用于通过代理站来进行 API 调用，末尾不要带/v1和/": "Optional for API calls through proxy sites, do not end with /v1 and /",
+  "此项可选，用于通过自定义API地址来进行 API 调用，末尾不要带/v1和/": "Optional for API calls through custom API address, do not add /v1 and / at the end",
   "私有部署地址": "Private Deployment Address",
   "请输入私有部署地址，格式为：https://fastgpt.run/api/openapi": "Please enter private deployment address, format: https://fastgpt.run/api/openapi",
   "注意非Chat API，请务必填写正确的API地址，否则可能导致无法使用": "Note: For non-Chat API, please make sure to enter the correct API address, otherwise it may not work",
@@ -1269,9 +1272,10 @@
   "通知邮箱": "Notification email",
   "设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱": "Set the email address for receiving quota warning notifications, if not set, the email address bound to the account will be used",
   "留空则使用账号绑定的邮箱": "If left blank, the email address bound to the account will be used",
-  "代理站地址": "Base URL",
+  "API地址": "Base URL",
   "对于官方渠道，new-api已经内置地址，除非是第三方代理站点或者Azure的特殊接入地址，否则不需要填写": "For official channels, the new-api has a built-in address. Unless it is a third-party proxy site or a special Azure access address, there is no need to fill it in",
   "渠道额外设置": "Channel extra settings",
+  "参数覆盖": "Parameters override",
   "模型请求速率限制": "Model request rate limit",
   "启用用户模型请求速率限制（可能会影响高并发性能）": "Enable user model request rate limit (may affect high concurrency performance)",
   "限制周期": "Limit period",
@@ -1342,5 +1346,26 @@
   "提示缓存倍率": "Prompt cache ratio",
   "缓存：${{price}} * {{ratio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})": "Cache: ${{price}} * {{ratio}} = ${{total}} / 1M tokens (cache ratio: {{cacheRatio}})",
   "提示 {{nonCacheInput}} tokens + 缓存 {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}": "Prompt {{nonCacheInput}} tokens + cache {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + completion {{completion}} tokens / 1M tokens * ${{compPrice}} * group {{ratio}} = ${{total}}",
-  "缓存 Tokens": "Cache Tokens"
+  "缓存 Tokens": "Cache Tokens",
+  "系统初始化": "System initialization",
+  "管理员账号已经初始化过，请继续设置系统参数": "The admin account has already been initialized, please continue to set the system parameters",
+  "管理员账号": "Admin account",
+  "请输入管理员用户名": "Please enter the admin username",
+  "请输入管理员密码": "Please enter the admin password",
+  "请确认管理员密码": "Please confirm the admin password",
+  "请选择使用模式": "Please select the usage mode",
+  "数据库警告": "Database warning",
+  "您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！": "You are using the SQLite database. If you are running in a container environment, please ensure that the database file persistence mapping is correctly set, otherwise all data will be lost after container restart!",
+  "建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。": "It is recommended to use MySQL or PostgreSQL databases in production environments, or ensure that the SQLite database file is mapped to the persistent storage of the host machine.",
+  "使用模式": "Usage mode",
+  "对外运营模式": "Default mode",
+  "密码长度至少为8个字符": "Password must be at least 8 characters long",
+  "表单引用错误，请刷新页面重试": "Form reference error, please refresh the page and try again",
+  "默认模式，适用于为多个用户提供服务的场景。": "Default mode, suitable for scenarios where multiple users are provided.",
+  "此模式下，系统将计算每次调用的用量，您需要对每个模型都设置价格，如果没有设置价格，用户将无法使用该模型。": "In this mode, the system will calculate the usage of each call, you need to set the price for each model, if the price is not set, the user will not be able to use the model.",
+  "适用于个人使用的场景。": "Suitable for personal use.",
+  "不需要设置模型价格，系统将弱化用量计算，您可专注于使用模型。": "No need to set the model price, the system will weaken the usage calculation, you can focus on using the model.",
+  "适用于展示系统功能的场景。": "Suitable for scenarios where the system functions are displayed.",
+  "可在初始化后修改": "Can be modified after initialization",
+  "初始化系统": "Initialize system"
 }

web/src/i18n/locales/zh.json

@@ -10,4 +10,4 @@
   "展开侧边栏": "展开侧边栏",
   "关闭侧边栏": "关闭侧边栏",
   "注销成功!": "注销成功!"
-} 
+}

web/src/index.css

@@ -1,9 +1,8 @@
 body {
   margin: 0;
-  padding-top: 55px;
-  overflow-y: scroll;
-  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
-    sans-serif;
+  padding-top: 0;
+  font-family:
+    Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scrollbar-width: none;
@@ -13,11 +12,26 @@ body {
 }
 
 #root {
-  height: 100vh;
+  height: 100%;
+  display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
-#root > section > header > section > div > div > div > div.semi-navigation-header-list-outer > div.semi-navigation-list-wrapper > ul > div > a > li > span{
+#root
+  > section
+  > header
+  > section
+  > div
+  > div
+  > div
+  > div.semi-navigation-header-list-outer
+  > div.semi-navigation-list-wrapper
+  > ul
+  > div
+  > a
+  > li
+  > span {
   font-weight: 600 !important;
 }
 
@@ -29,18 +43,59 @@ body {
   /*.semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {*/
   /*  padding: 0 0;*/
   /*}*/
+  .topnav {
+    padding: 0 8px;
+  }
+
+  .topnav .semi-navigation-item {
+    margin: 0 1px;
+    padding: 0 4px;
+  }
+
   .topnav .semi-navigation-list-wrapper {
     max-width: calc(55vw - 20px);
     overflow-x: auto;
     scrollbar-width: none;
   }
-  #root > section > header > section > div > div > div > div.semi-navigation-footer > div > a > li {
+  #root
+    > section
+    > header
+    > section
+    > div
+    > div
+    > div
+    > div.semi-navigation-footer
+    > div
+    > a
+    > li {
     padding: 0 0;
   }
-  #root > section > header > section > div > div > div > div.semi-navigation-header-list-outer > div.semi-navigation-list-wrapper > ul > div > a > li {
+  #root
+    > section
+    > header
+    > section
+    > div
+    > div
+    > div
+    > div.semi-navigation-header-list-outer
+    > div.semi-navigation-list-wrapper
+    > ul
+    > div
+    > a
+    > li {
     padding: 0 5px;
   }
-  #root > section > header > section > div > div > div > div.semi-navigation-footer > div:nth-child(1) > a > li {
+  #root
+    > section
+    > header
+    > section
+    > div
+    > div
+    > div
+    > div.semi-navigation-footer
+    > div:nth-child(1)
+    > a
+    > li {
     padding: 0 5px;
   }
   .semi-navigation-footer {
@@ -72,6 +127,31 @@ body {
   .semi-navigation-horizontal .semi-navigation-header {
     margin-right: 0;
   }
+
+  /* 确保移动端内容可滚动 */
+  .semi-layout-content {
+    -webkit-overflow-scrolling: touch !important;
+    overscroll-behavior-y: auto !important;
+  }
+
+  /* 修复移动端下拉刷新 */
+  body {
+    overflow: visible !important;
+    overscroll-behavior-y: auto !important;
+    position: static !important;
+    height: 100% !important;
+  }
+
+  /* 确保内容区域在移动端可以正常滚动 */
+  #root {
+    overflow: visible !important;
+    height: 100% !important;
+  }
+
+  /* 隐藏在移动设备上 */
+  .hide-on-mobile {
+    display: none !important;
+  }
 }
 
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
@@ -112,23 +192,55 @@ body::-webkit-scrollbar {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .semi-navigation-item {
   margin-bottom: 0;
 }
 
-.semi-navigation-vertical {
-  /*flex: 0 0 auto;*/
-  /*display: flex;*/
-  /*flex-direction: column;*/
-  /*width: 100%;*/
-  height: 100%;
+/* 自定义侧边栏按钮悬停效果 */
+.semi-navigation-item:hover {
+  transform: translateX(2px);
+  box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
+}
+
+/* 自定义侧边栏按钮选中效果 */
+.semi-navigation-item-selected {
+  position: relative;
   overflow: hidden;
 }
 
+.semi-navigation-item-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 4px;
+  background-color: var(--semi-color-primary);
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/*.semi-navigation-vertical {*/
+/*  !*flex: 0 0 auto;*!*/
+/*  !*display: flex;*!*/
+/*  !*flex-direction: column;*!*/
+/*  !*width: 100%;*!*/
+/*  height: 100%;*/
+/*  overflow: hidden;*/
+/*}*/
+
 .main-content {
   padding: 4px;
   height: 100%;
@@ -142,8 +254,67 @@ code {
   font-size: 1.1em;
 }
 
-@media only screen and (max-width: 600px) {
-  .hide-on-mobile {
-    display: none !important;
-  }
+/* 顶部栏样式 */
+.topnav {
+  padding: 0 16px;
 }
+
+.topnav .semi-navigation-item {
+  border-radius: 4px;
+  margin: 0 2px;
+  transition: all 0.3s ease;
+}
+
+.topnav .semi-navigation-item:hover {
+  background-color: var(--semi-color-primary-light-default);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
+}
+
+.topnav .semi-navigation-item-selected {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+/* 顶部栏文本样式 */
+.header-bar-text {
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.header-bar-text:hover {
+  color: var(--semi-color-primary);
+}
+
+/* 自定义滚动条样式 */
+.semi-layout-content::-webkit-scrollbar,
+.semi-sider::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.semi-layout-content::-webkit-scrollbar-thumb,
+.semi-sider::-webkit-scrollbar-thumb {
+  background: var(--semi-color-tertiary-light-default);
+  border-radius: 3px;
+}
+
+.semi-layout-content::-webkit-scrollbar-thumb:hover,
+.semi-sider::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-tertiary);
+}
+
+.semi-layout-content::-webkit-scrollbar-track,
+.semi-sider::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Custom sidebar shadow */
+/*.custom-sidebar-nav {*/
+/*  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
+/*  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
+/*  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
+/*  min-height: 100%;*/
+/*}*/

web/src/index.js

@@ -28,7 +28,7 @@ root.render(
         <BrowserRouter>
           <ThemeProvider>
             <StyleProvider>
-              <PageLayout/>
+              <PageLayout />
             </StyleProvider>
           </ThemeProvider>
         </BrowserRouter>

web/src/pages/Channel/EditChannel.js

@@ -7,7 +7,8 @@ import {
   showError,
   showInfo,
   showSuccess,
-  verifyJSON
+  showWarning,
+  verifyJSON,
 } from '../../helpers';
 import { CHANNEL_OPTIONS } from '../../constants';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
@@ -22,27 +23,24 @@ import {
   Select,
   TextArea,
   Checkbox,
-  Banner
+  Banner,
+  Modal,
 } from '@douyinfe/semi-ui';
-import { Divider } from 'semantic-ui-react';
 import { getChannelModels, loadChannelModels } from '../../components/utils.js';
-import axios from 'axios';
 
 const MODEL_MAPPING_EXAMPLE = {
-  'gpt-3.5-turbo': 'gpt-3.5-turbo-0125'
+  'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
 };
 
 const STATUS_CODE_MAPPING_EXAMPLE = {
-  400: '500'
+  400: '500',
 };
 
 const REGION_EXAMPLE = {
-  'default': 'us-central1',
-  'claude-3-5-sonnet-20240620': 'europe-west1'
+  default: 'us-central1',
+  'claude-3-5-sonnet-20240620': 'europe-west1',
 };
 
-const fetchButtonTips = '1. 新建渠道时，请求通过当前浏览器发出；2. 编辑已有渠道，请求通过后端服务器发出';
-
 function type2secretPrompt(type) {
   // inputs.type === 15 ? '按照如下格式输入：APIKey|SecretKey' : (inputs.type === 18 ? '按照如下格式输入：APPID|APISecret|APIKey' : '请输入渠道对应的鉴权密钥')
   switch (type) {
@@ -86,7 +84,7 @@ const EditChannel = (props) => {
     groups: ['default'],
     priority: 0,
     weight: 0,
-    tag: ''
+    tag: '',
   };
   const [batch, setBatch] = useState(false);
   const [autoBan, setAutoBan] = useState(true);
@@ -99,6 +97,17 @@ const EditChannel = (props) => {
   const [fullModels, setFullModels] = useState([]);
   const [customModel, setCustomModel] = useState('');
   const handleInputChange = (name, value) => {
+    if (name === 'base_url' && value.endsWith('/v1')) {
+      Modal.confirm({
+        title: '警告',
+        content:
+          '不需要在末尾加/v1，New API会自动处理，添加后可能导致请求失败，是否继续？',
+        onOk: () => {
+          setInputs((inputs) => ({ ...inputs, [name]: value }));
+        },
+      });
+      return;
+    }
     setInputs((inputs) => ({ ...inputs, [name]: value }));
     if (name === 'type') {
       let localModels = [];
@@ -111,7 +120,7 @@ const EditChannel = (props) => {
             'mj_blend',
             'mj_upscale',
             'mj_describe',
-            'mj_uploads'
+            'mj_uploads',
           ];
           break;
         case 5:
@@ -131,14 +140,11 @@ const EditChannel = (props) => {
             'mj_high_variation',
             'mj_low_variation',
             'mj_pan',
-            'mj_uploads'
+            'mj_uploads',
           ];
           break;
         case 36:
-          localModels = [
-            'suno_music',
-            'suno_lyrics'
-          ];
+          localModels = ['suno_music', 'suno_lyrics'];
           break;
         default:
           localModels = getChannelModels(value);
@@ -174,7 +180,7 @@ const EditChannel = (props) => {
         data.model_mapping = JSON.stringify(
           JSON.parse(data.model_mapping),
           null,
-          2
+          2,
         );
       }
       setInputs(data);
@@ -191,7 +197,6 @@ const EditChannel = (props) => {
     setLoading(false);
   };
 
-
   const fetchUpstreamModelList = async (name) => {
     // if (inputs['type'] !== 1) {
     //   showError(t('仅支持 OpenAI 接口格式'));
@@ -219,9 +224,9 @@ const EditChannel = (props) => {
           const res = await API.post('/api/channel/fetch_models', {
             base_url: inputs['base_url'],
             type: inputs['type'],
-            key: inputs['key']
+            key: inputs['key'],
           });
-          
+
           if (res.data && res.data.success) {
             models.push(...res.data.data);
           } else {
@@ -248,7 +253,7 @@ const EditChannel = (props) => {
       let res = await API.get(`/api/channel/models`);
       let localModelOptions = res.data.data.map((model) => ({
         label: model.id,
-        value: model.id
+        value: model.id,
       }));
       setOriginModelOptions(localModelOptions);
       setFullModels(res.data.data.map((model) => model.id));
@@ -257,7 +262,7 @@ const EditChannel = (props) => {
           .filter((model) => {
             return model.id.startsWith('gpt-') || model.id.startsWith('text-');
           })
-          .map((model) => model.id)
+          .map((model) => model.id),
       );
     } catch (error) {
       showError(error.message);
@@ -273,8 +278,8 @@ const EditChannel = (props) => {
       setGroupOptions(
         res.data.data.map((group) => ({
           label: group,
-          value: group
-        }))
+          value: group,
+        })),
       );
     } catch (error) {
       showError(error.message);
@@ -287,7 +292,7 @@ const EditChannel = (props) => {
       if (!localModelOptions.find((option) => option.label === model)) {
         localModelOptions.push({
           label: model,
-          value: model
+          value: model,
         });
       }
     });
@@ -298,7 +303,7 @@ const EditChannel = (props) => {
     fetchModels().then();
     fetchGroups().then();
     if (isEdit) {
-      loadChannel().then(() => {});
+      loadChannel().then(() => { });
     } else {
       setInputs(originInputs);
       let localModels = getChannelModels(inputs.type);
@@ -324,7 +329,7 @@ const EditChannel = (props) => {
     if (localInputs.base_url && localInputs.base_url.endsWith('/')) {
       localInputs.base_url = localInputs.base_url.slice(
         0,
-        localInputs.base_url.length - 1
+        localInputs.base_url.length - 1,
       );
     }
     if (localInputs.type === 18 && localInputs.other === '') {
@@ -342,7 +347,7 @@ const EditChannel = (props) => {
     if (isEdit) {
       res = await API.put(`/api/channel/`, {
         ...localInputs,
-        id: parseInt(channelId)
+        id: parseInt(channelId),
       });
     } else {
       res = await API.post(`/api/channel/`, localInputs);
@@ -376,7 +381,7 @@ const EditChannel = (props) => {
         localModelOptions.push({
           key: model,
           text: model,
-          value: model
+          value: model,
         });
       } else if (model) {
         showError(t('某些模型已存在！'));
@@ -391,14 +396,15 @@ const EditChannel = (props) => {
     handleInputChange('models', localModels);
   };
 
-
   return (
     <>
       <SideSheet
         maskClosable={false}
         placement={isEdit ? 'right' : 'left'}
         title={
-          <Title level={3}>{isEdit ? t('更新渠道信息') : t('创建新的渠道')}</Title>
+          <Title level={3}>
+            {isEdit ? t('更新渠道信息') : t('创建新的渠道')}
+          </Title>
         }
         headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
@@ -406,11 +412,11 @@ const EditChannel = (props) => {
         footer={
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Space>
-              <Button theme="solid" size={'large'} onClick={submit}>
+              <Button theme='solid' size={'large'} onClick={submit}>
                 {t('提交')}
               </Button>
               <Button
-                theme="solid"
+                theme='solid'
                 size={'large'}
                 type={'tertiary'}
                 onClick={handleCancel}
@@ -426,11 +432,10 @@ const EditChannel = (props) => {
       >
         <Spin spinning={loading}>
           <div style={{ marginTop: 10 }}>
-            
             <Typography.Text strong>{t('类型')}：</Typography.Text>
           </div>
           <Select
-            name="type"
+            name='type'
             required
             optionList={CHANNEL_OPTIONS}
             value={inputs.type}
@@ -443,17 +448,17 @@ const EditChannel = (props) => {
           {inputs.type === 40 && (
             <div style={{ marginTop: 10 }}>
               <Banner
-                type="info" 
+                type='info'
                 description={
                   <div>
-                    <Typography.Text strong>
-                      {t('邀请链接')}: 
-                    </Typography.Text>
-                    <Typography.Text 
+                    <Typography.Text strong>{t('邀请链接')}:</Typography.Text>
+                    <Typography.Text
                       link
-                      underline 
-                      style={{marginLeft: 8}}
-                      onClick={() => window.open('https://cloud.siliconflow.cn/i/hij0YNTZ')}
+                      underline
+                      style={{ marginLeft: 8 }}
+                      onClick={() =>
+                        window.open('https://cloud.siliconflow.cn/i/hij0YNTZ')
+                      }
                     >
                       https://cloud.siliconflow.cn/i/hij0YNTZ
                     </Typography.Text>
@@ -467,7 +472,7 @@ const EditChannel = (props) => {
               <div style={{ marginTop: 10 }}>
                 <Banner
                   type={'warning'}
-                  description={t('注意，模型部署名称必须和模型名称保持一致')}
+                  description={t('注意，系统请求的时模型名称中的点会被剔除，例如：gpt-4.5-preview会请求为gpt-45-preview，所以部署的模型名称需要去掉点')}
                 ></Banner>
               </div>
               <div style={{ marginTop: 10 }}>
@@ -476,27 +481,29 @@ const EditChannel = (props) => {
                 </Typography.Text>
               </div>
               <Input
-                label="AZURE_OPENAI_ENDPOINT"
-                name="azure_base_url"
-                placeholder={t('请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com')}
+                label='AZURE_OPENAI_ENDPOINT'
+                name='azure_base_url'
+                placeholder={t(
+                  '请输入 AZURE_OPENAI_ENDPOINT，例如：https://docs-test-001.openai.azure.com',
+                )}
                 onChange={(value) => {
                   handleInputChange('base_url', value);
                 }}
                 value={inputs.base_url}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
               <div style={{ marginTop: 10 }}>
                 <Typography.Text strong>{t('默认 API 版本')}：</Typography.Text>
               </div>
               <Input
                 label={t('默认 API 版本')}
-                name="azure_other"
+                name='azure_other'
                 placeholder={t('请输入默认 API 版本，例如：2024-12-01-preview')}
                 onChange={(value) => {
                   handleInputChange('other', value);
                 }}
                 value={inputs.other}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
@@ -505,7 +512,9 @@ const EditChannel = (props) => {
               <div style={{ marginTop: 10 }}>
                 <Banner
                   type={'warning'}
-                  description={t('如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。')}
+                  description={t(
+                    '如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。',
+                  )}
                 ></Banner>
               </div>
               <div style={{ marginTop: 10 }}>
@@ -514,39 +523,53 @@ const EditChannel = (props) => {
                 </Typography.Text>
               </div>
               <Input
-                name="base_url"
-                placeholder={t('请输入完整的URL，例如：https://api.openai.com/v1/chat/completions')}
+                name='base_url'
+                placeholder={t(
+                  '请输入完整的URL，例如：https://api.openai.com/v1/chat/completions',
+                )}
                 onChange={(value) => {
                   handleInputChange('base_url', value);
                 }}
                 value={inputs.base_url}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
+          {inputs.type === 37 && (
+            <>
+              <div style={{ marginTop: 10 }}>
+                <Banner
+                  type={'warning'}
+                  description={t(
+                    'Dify渠道只适配chatflow和agent，并且agent不支持图片！',
+                  )}
+                ></Banner>
+              </div>
+            </>
+          )}
           <div style={{ marginTop: 10 }}>
             <Typography.Text strong>{t('名称')}：</Typography.Text>
           </div>
           <Input
             required
-            name="name"
+            name='name'
             placeholder={t('请为渠道命名')}
             onChange={(value) => {
               handleInputChange('name', value);
             }}
             value={inputs.name}
-            autoComplete="new-password"
+            autoComplete='new-password'
           />
           {inputs.type !== 3 && inputs.type !== 8 && inputs.type !== 22 && inputs.type !== 36 && inputs.type !== 45 && (
             <>
               <div style={{ marginTop: 10 }}>
-                <Typography.Text strong>{t('代理站地址')}：</Typography.Text>
+                <Typography.Text strong>{t('API地址')}：</Typography.Text>
               </div>
               <Tooltip content={t('对于官方渠道，new-api已经内置地址，除非是第三方代理站点或者Azure的特殊接入地址，否则不需要填写')}>
                 <Input
-                  label={t('代理站地址')}
+                  label={t('API地址')}
                   name="base_url"
-                  placeholder={t('此项可选，用于通过代理站来进行 API 调用，末尾不要带/v1和/')}
+                  placeholder={t('此项可选，用于通过自定义API地址来进行 API 调用，末尾不要带/v1和/')}
                   onChange={(value) => {
                     handleInputChange('base_url', value);
                   }}
@@ -562,7 +585,7 @@ const EditChannel = (props) => {
           {batch ? (
             <TextArea
               label={t('密钥')}
-              name="key"
+              name='key'
               required
               placeholder={t('请输入密钥，一行一个')}
               onChange={(value) => {
@@ -570,16 +593,17 @@ const EditChannel = (props) => {
               }}
               value={inputs.key}
               style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete="new-password"
+              autoComplete='new-password'
             />
           ) : (
             <>
               {inputs.type === 41 ? (
                 <TextArea
                   label={t('鉴权json')}
-                  name="key"
+                  name='key'
                   required
-                  placeholder={'{\n' +
+                  placeholder={
+                    '{\n' +
                     '  "type": "service_account",\n' +
                     '  "project_id": "abc-bcd-123-456",\n' +
                     '  "private_key_id": "123xxxxx456",\n' +
@@ -591,25 +615,26 @@ const EditChannel = (props) => {
                     '  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",\n' +
                     '  "client_x509_cert_url": "https://xxxxx.gserviceaccount.com",\n' +
                     '  "universe_domain": "googleapis.com"\n' +
-                    '}'}
+                    '}'
+                  }
                   onChange={(value) => {
                     handleInputChange('key', value);
                   }}
                   autosize={{ minRows: 10 }}
                   value={inputs.key}
-                  autoComplete="new-password"
+                  autoComplete='new-password'
                 />
               ) : (
                 <Input
                   label={t('密钥')}
-                  name="key"
+                  name='key'
                   required
                   placeholder={t(type2secretPrompt(inputs.type))}
                   onChange={(value) => {
                     handleInputChange('key', value);
                   }}
                   value={inputs.key}
-                  autoComplete="new-password"
+                  autoComplete='new-password'
                 />
               )}
             </>
@@ -620,7 +645,7 @@ const EditChannel = (props) => {
                 <Checkbox
                   checked={batch}
                   label={t('批量创建')}
-                  name="batch"
+                  name='batch'
                   onChange={() => setBatch(!batch)}
                 />
                 <Typography.Text strong>{t('批量创建')}</Typography.Text>
@@ -633,13 +658,15 @@ const EditChannel = (props) => {
                 <Typography.Text strong>{t('私有部署地址')}：</Typography.Text>
               </div>
               <Input
-                name="base_url"
-                placeholder={t('请输入私有部署地址，格式为：https://fastgpt.run/api/openapi')}
+                name='base_url'
+                placeholder={t(
+                  '请输入私有部署地址，格式为：https://fastgpt.run/api/openapi',
+                )}
                 onChange={(value) => {
                   handleInputChange('base_url', value);
                 }}
                 value={inputs.base_url}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
@@ -647,17 +674,21 @@ const EditChannel = (props) => {
             <>
               <div style={{ marginTop: 10 }}>
                 <Typography.Text strong>
-                  {t('注意非Chat API，请务必填写正确的API地址，否则可能导致无法使用')}
+                  {t(
+                    '注意非Chat API，请务必填写正确的API地址，否则可能导致无法使用',
+                  )}
                 </Typography.Text>
               </div>
               <Input
-                name="base_url"
-                placeholder={t('请输入到 /suno 前的路径，通常就是域名，例如：https://api.example.com')}
+                name='base_url'
+                placeholder={t(
+                  '请输入到 /suno 前的路径，通常就是域名，例如：https://api.example.com',
+                )}
                 onChange={(value) => {
                   handleInputChange('base_url', value);
                 }}
                 value={inputs.base_url}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
@@ -666,7 +697,7 @@ const EditChannel = (props) => {
           </div>
           <Select
             placeholder={t('请选择可以使用该渠道的分组')}
-            name="groups"
+            name='groups'
             required
             multiple
             selection
@@ -676,7 +707,7 @@ const EditChannel = (props) => {
               handleInputChange('groups', value);
             }}
             value={inputs.groups}
-            autoComplete="new-password"
+            autoComplete='new-password'
             optionList={groupOptions}
           />
           {inputs.type === 18 && (
@@ -685,7 +716,7 @@ const EditChannel = (props) => {
                 <Typography.Text strong>模型版本：</Typography.Text>
               </div>
               <Input
-                name="other"
+                name='other'
                 placeholder={
                   '请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1'
                 }
@@ -693,7 +724,7 @@ const EditChannel = (props) => {
                   handleInputChange('other', value);
                 }}
                 value={inputs.other}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
@@ -703,29 +734,31 @@ const EditChannel = (props) => {
                 <Typography.Text strong>{t('部署地区')}：</Typography.Text>
               </div>
               <TextArea
-                name="other"
-                placeholder={t('请输入部署地区，例如：us-central1\n支持使用模型映射格式\n' +
+                name='other'
+                placeholder={t(
+                  '请输入部署地区，例如：us-central1\n支持使用模型映射格式\n' +
                   '{\n' +
                   '    "default": "us-central1",\n' +
                   '    "claude-3-5-sonnet-20240620": "europe-west1"\n' +
-                  '}')}
+                  '}',
+                )}
                 autosize={{ minRows: 2 }}
                 onChange={(value) => {
                   handleInputChange('other', value);
                 }}
                 value={inputs.other}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
               <Typography.Text
                 style={{
                   color: 'rgba(var(--semi-blue-5), 1)',
                   userSelect: 'none',
-                  cursor: 'pointer'
+                  cursor: 'pointer',
                 }}
                 onClick={() => {
                   handleInputChange(
                     'other',
-                    JSON.stringify(REGION_EXAMPLE, null, 2)
+                    JSON.stringify(REGION_EXAMPLE, null, 2),
                   );
                 }}
               >
@@ -739,14 +772,14 @@ const EditChannel = (props) => {
                 <Typography.Text strong>知识库 ID：</Typography.Text>
               </div>
               <Input
-                label="知识库 ID"
-                name="other"
+                label='知识库 ID'
+                name='other'
                 placeholder={'请输入知识库 ID，例如：123456'}
                 onChange={(value) => {
                   handleInputChange('other', value);
                 }}
                 value={inputs.other}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
@@ -756,7 +789,7 @@ const EditChannel = (props) => {
                 <Typography.Text strong>Account ID：</Typography.Text>
               </div>
               <Input
-                name="other"
+                name='other'
                 placeholder={
                   '请输入Account ID，例如：d6b5da8hk1awo8nap34ube6gh'
                 }
@@ -764,7 +797,7 @@ const EditChannel = (props) => {
                   handleInputChange('other', value);
                 }}
                 value={inputs.other}
-                autoComplete="new-password"
+                autoComplete='new-password'
               />
             </>
           )}
@@ -773,7 +806,7 @@ const EditChannel = (props) => {
           </div>
           <Select
             placeholder={'请选择该渠道所支持的模型'}
-            name="models"
+            name='models'
             required
             multiple
             selection
@@ -783,13 +816,13 @@ const EditChannel = (props) => {
               handleInputChange('models', value);
             }}
             value={inputs.models}
-            autoComplete="new-password"
+            autoComplete='new-password'
             optionList={modelOptions}
           />
           <div style={{ lineHeight: '40px', marginBottom: '12px' }}>
             <Space>
               <Button
-                type="primary"
+                type='primary'
                 onClick={() => {
                   handleInputChange('models', basicModels);
                 }}
@@ -797,16 +830,20 @@ const EditChannel = (props) => {
                 {t('填入相关模型')}
               </Button>
               <Button
-                type="secondary"
+                type='secondary'
                 onClick={() => {
                   handleInputChange('models', fullModels);
                 }}
               >
                 {t('填入所有模型')}
               </Button>
-              <Tooltip content={t('新建渠道时，请求通过当前浏览器发出；编辑已有渠道，请求通过后端服务器发出')}>
+              <Tooltip
+                content={t(
+                  '新建渠道时，请求通过当前浏览器发出；编辑已有渠道，请求通过后端服务器发出',
+                )}
+              >
                 <Button
-                  type="tertiary"
+                  type='tertiary'
                   onClick={() => {
                     fetchUpstreamModelList('models');
                   }}
@@ -815,7 +852,7 @@ const EditChannel = (props) => {
                 </Button>
               </Tooltip>
               <Button
-                type="warning"
+                type='warning'
                 onClick={() => {
                   handleInputChange('models', []);
                 }}
@@ -825,7 +862,7 @@ const EditChannel = (props) => {
             </Space>
             <Input
               addonAfter={
-                <Button type="primary" onClick={addCustomModels}>
+                <Button type='primary' onClick={addCustomModels}>
                   {t('填入')}
                 </Button>
               }
@@ -840,53 +877,53 @@ const EditChannel = (props) => {
             <Typography.Text strong>{t('模型重定向')}：</Typography.Text>
           </div>
           <TextArea
-            placeholder={t('此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：') + `\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`}
-            name="model_mapping"
+            placeholder={
+              t(
+                '此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，例如：',
+              ) + `\n${JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)}`
+            }
+            name='model_mapping'
             onChange={(value) => {
               handleInputChange('model_mapping', value);
             }}
             autosize
             value={inputs.model_mapping}
-            autoComplete="new-password"
+            autoComplete='new-password'
           />
           <Typography.Text
             style={{
               color: 'rgba(var(--semi-blue-5), 1)',
               userSelect: 'none',
-              cursor: 'pointer'
+              cursor: 'pointer',
             }}
             onClick={() => {
               handleInputChange(
                 'model_mapping',
-                JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)
+                JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2),
               );
             }}
           >
             {t('填入模板')}
           </Typography.Text>
           <div style={{ marginTop: 10 }}>
-            <Typography.Text strong>
-              {t('渠道标签')}
-            </Typography.Text>
+            <Typography.Text strong>{t('渠道标签')}</Typography.Text>
           </div>
           <Input
             label={t('渠道标签')}
-            name="tag"
+            name='tag'
             placeholder={t('渠道标签')}
             onChange={(value) => {
               handleInputChange('tag', value);
             }}
             value={inputs.tag}
-            autoComplete="new-password"
+            autoComplete='new-password'
           />
           <div style={{ marginTop: 10 }}>
-            <Typography.Text strong>
-              {t('渠道优先级')}
-            </Typography.Text>
+            <Typography.Text strong>{t('渠道优先级')}</Typography.Text>
           </div>
           <Input
             label={t('渠道优先级')}
-            name="priority"
+            name='priority'
             placeholder={t('渠道优先级')}
             onChange={(value) => {
               const number = parseInt(value);
@@ -897,16 +934,14 @@ const EditChannel = (props) => {
               }
             }}
             value={inputs.priority}
-            autoComplete="new-password"
+            autoComplete='new-password'
           />
           <div style={{ marginTop: 10 }}>
-            <Typography.Text strong>
-              {t('渠道权重')}
-            </Typography.Text>
+            <Typography.Text strong>{t('渠道权重')}</Typography.Text>
           </div>
           <Input
             label={t('渠道权重')}
-            name="weight"
+            name='weight'
             placeholder={t('渠道权重')}
             onChange={(value) => {
               const number = parseInt(value);
@@ -917,37 +952,43 @@ const EditChannel = (props) => {
               }
             }}
             value={inputs.weight}
-            autoComplete="new-password"
+            autoComplete='new-password'
           />
           <>
             <div style={{ marginTop: 10 }}>
-              <Typography.Text strong>
-                {t('渠道额外设置')}：
-              </Typography.Text>
+              <Typography.Text strong>{t('渠道额外设置')}：</Typography.Text>
             </div>
             <TextArea
-              placeholder={t('此项可选，用于配置渠道特定设置，为一个 JSON 字符串，例如：') + '\n{\n  "force_format": true\n}'}
-              name="setting"
+              placeholder={
+                t(
+                  '此项可选，用于配置渠道特定设置，为一个 JSON 字符串，例如：',
+                ) + '\n{\n  "force_format": true\n}'
+              }
+              name='setting'
               onChange={(value) => {
                 handleInputChange('setting', value);
               }}
               autosize
               value={inputs.setting}
-              autoComplete="new-password"
+              autoComplete='new-password'
             />
             <Space>
               <Typography.Text
                 style={{
                   color: 'rgba(var(--semi-blue-5), 1)',
                   userSelect: 'none',
-                  cursor: 'pointer'
+                  cursor: 'pointer',
                 }}
                 onClick={() => {
                   handleInputChange(
                     'setting',
-                    JSON.stringify({
-                      force_format: true
-                    }, null, 2)
+                    JSON.stringify(
+                      {
+                        force_format: true,
+                      },
+                      null,
+                      2,
+                    ),
                   );
                 }}
               >
@@ -957,16 +998,37 @@ const EditChannel = (props) => {
                 style={{
                   color: 'rgba(var(--semi-blue-5), 1)',
                   userSelect: 'none',
-                  cursor: 'pointer'
+                  cursor: 'pointer',
                 }}
                 onClick={() => {
-                  window.open('https://github.com/Calcium-Ion/new-api/blob/main/docs/channel/other_setting.md');
+                  window.open(
+                    'https://github.com/Calcium-Ion/new-api/blob/main/docs/channel/other_setting.md',
+                  );
                 }}
               >
                 {t('设置说明')}
               </Typography.Text>
             </Space>
           </>
+          <>
+            <div style={{ marginTop: 10 }}>
+              <Typography.Text strong>{t('参数覆盖')}：</Typography.Text>
+            </div>
+            <TextArea
+              placeholder={
+                t(
+                  '此项可选，用于覆盖请求参数。不支持覆盖 stream 参数。为一个 JSON 字符串，例如：',
+                ) + '\n{\n  "temperature": 0\n}'
+              }
+              name='setting'
+              onChange={(value) => {
+                handleInputChange('param_override', value);
+              }}
+              autosize
+              value={inputs.param_override}
+              autoComplete='new-password'
+            />
+          </>
           {inputs.type === 1 && (
             <>
               <div style={{ marginTop: 10 }}>
@@ -974,7 +1036,7 @@ const EditChannel = (props) => {
               </div>
               <Input
                 label={t('组织，可选，不填则为默认组织')}
-                name="openai_organization"
+                name='openai_organization'
                 placeholder={t('请输入组织org-xxx')}
                 onChange={(value) => {
                   handleInputChange('openai_organization', value);
@@ -987,7 +1049,7 @@ const EditChannel = (props) => {
             <Typography.Text strong>{t('默认测试模型')}：</Typography.Text>
           </div>
           <Input
-            name="test_model"
+            name='test_model'
             placeholder={t('不填则为模型列表第一个')}
             onChange={(value) => {
               handleInputChange('test_model', value);
@@ -997,14 +1059,16 @@ const EditChannel = (props) => {
           <div style={{ marginTop: 10, display: 'flex' }}>
             <Space>
               <Checkbox
-                name="auto_ban"
+                name='auto_ban'
                 checked={autoBan}
                 onChange={() => {
                   setAutoBan(!autoBan);
                 }}
               />
               <Typography.Text strong>
-                {t('是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道：')}
+                {t(
+                  '是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道：',
+                )}
               </Typography.Text>
             </Space>
           </div>
@@ -1014,26 +1078,31 @@ const EditChannel = (props) => {
             </Typography.Text>
           </div>
           <TextArea
-            placeholder={t('此项可选，用于复写返回的状态码，比如将claude渠道的400错误复写为500（用于重试），请勿滥用该功能，例如：') +
-              '\n' + JSON.stringify(STATUS_CODE_MAPPING_EXAMPLE, null, 2)}
-            name="status_code_mapping"
+            placeholder={
+              t(
+                '此项可选，用于复写返回的状态码，比如将claude渠道的400错误复写为500（用于重试），请勿滥用该功能，例如：',
+              ) +
+              '\n' +
+              JSON.stringify(STATUS_CODE_MAPPING_EXAMPLE, null, 2)
+            }
+            name='status_code_mapping'
             onChange={(value) => {
               handleInputChange('status_code_mapping', value);
             }}
             autosize
             value={inputs.status_code_mapping}
-            autoComplete="new-password"
+            autoComplete='new-password'
           />
           <Typography.Text
             style={{
               color: 'rgba(var(--semi-blue-5), 1)',
               userSelect: 'none',
-              cursor: 'pointer'
+              cursor: 'pointer',
             }}
             onClick={() => {
               handleInputChange(
                 'status_code_mapping',
-                JSON.stringify(STATUS_CODE_MAPPING_EXAMPLE, null, 2)
+                JSON.stringify(STATUS_CODE_MAPPING_EXAMPLE, null, 2),
               );
             }}
           >

web/src/pages/Channel/EditTagModal.js

@@ -1,11 +1,29 @@
 import React, { useState, useEffect } from 'react';
-import { API, showError, showInfo, showSuccess, showWarning, verifyJSON } from '../../helpers';
-import { SideSheet, Space, Button, Input, Typography, Spin, Modal, Select, Banner, TextArea } from '@douyinfe/semi-ui';
+import {
+  API,
+  showError,
+  showInfo,
+  showSuccess,
+  showWarning,
+  verifyJSON,
+} from '../../helpers';
+import {
+  SideSheet,
+  Space,
+  Button,
+  Input,
+  Typography,
+  Spin,
+  Modal,
+  Select,
+  Banner,
+  TextArea,
+} from '@douyinfe/semi-ui';
 import TextInput from '../../components/custom/TextInput.js';
 import { getChannelModels } from '../../components/utils.js';
 
 const MODEL_MAPPING_EXAMPLE = {
-  'gpt-3.5-turbo': 'gpt-3.5-turbo-0125'
+  'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
 };
 
 const EditTagModal = (props) => {
@@ -23,7 +41,7 @@ const EditTagModal = (props) => {
     model_mapping: null,
     groups: [],
     models: [],
-  }
+  };
   const [inputs, setInputs] = useState(originInputs);
 
   const handleInputChange = (name, value) => {
@@ -39,7 +57,7 @@ const EditTagModal = (props) => {
             'mj_blend',
             'mj_upscale',
             'mj_describe',
-            'mj_uploads'
+            'mj_uploads',
           ];
           break;
         case 5:
@@ -59,14 +77,11 @@ const EditTagModal = (props) => {
             'mj_high_variation',
             'mj_low_variation',
             'mj_pan',
-            'mj_uploads'
+            'mj_uploads',
           ];
           break;
         case 36:
-          localModels = [
-            'suno_music',
-            'suno_lyrics'
-          ];
+          localModels = ['suno_music', 'suno_lyrics'];
           break;
         default:
           localModels = getChannelModels(value);
@@ -84,7 +99,7 @@ const EditTagModal = (props) => {
       let res = await API.get(`/api/channel/models`);
       let localModelOptions = res.data.data.map((model) => ({
         label: model.id,
-        value: model.id
+        value: model.id,
       }));
       setOriginModelOptions(localModelOptions);
       setFullModels(res.data.data.map((model) => model.id));
@@ -93,7 +108,7 @@ const EditTagModal = (props) => {
           .filter((model) => {
             return model.id.startsWith('gpt-') || model.id.startsWith('text-');
           })
-          .map((model) => model.id)
+          .map((model) => model.id),
       );
     } catch (error) {
       showError(error.message);
@@ -109,27 +124,26 @@ const EditTagModal = (props) => {
       setGroupOptions(
         res.data.data.map((group) => ({
           label: group,
-          value: group
-        }))
+          value: group,
+        })),
       );
     } catch (error) {
       showError(error.message);
     }
   };
 
-
   const handleSave = async () => {
     setLoading(true);
     let data = {
       tag: tag,
-    }
+    };
     if (inputs.model_mapping !== null && inputs.model_mapping !== '') {
       if (inputs.model_mapping !== '' && !verifyJSON(inputs.model_mapping)) {
         showInfo('模型映射必须是合法的 JSON 格式！');
         setLoading(false);
         return;
       }
-      data.model_mapping = inputs.model_mapping
+      data.model_mapping = inputs.model_mapping;
     }
     if (inputs.groups.length > 0) {
       data.groups = inputs.groups.join(',');
@@ -139,7 +153,12 @@ const EditTagModal = (props) => {
     }
     data.new_tag = inputs.new_tag;
     // check have any change
-    if (data.model_mapping === undefined && data.groups === undefined && data.models === undefined && data.new_tag === undefined) {
+    if (
+      data.model_mapping === undefined &&
+      data.groups === undefined &&
+      data.models === undefined &&
+      data.new_tag === undefined
+    ) {
       showWarning('没有任何修改！');
       setLoading(false);
       return;
@@ -159,7 +178,7 @@ const EditTagModal = (props) => {
     } catch (error) {
       showError(error);
     }
-  }
+  };
 
   useEffect(() => {
     let localModelOptions = [...originModelOptions];
@@ -167,7 +186,7 @@ const EditTagModal = (props) => {
       if (!localModelOptions.find((option) => option.label === model)) {
         localModelOptions.push({
           label: model,
-          value: model
+          value: model,
         });
       }
     });
@@ -179,7 +198,7 @@ const EditTagModal = (props) => {
       ...originInputs,
       tag: tag,
       new_tag: tag,
-    })
+    });
     fetchModels().then();
     fetchGroups().then();
   }, [visible]);
@@ -201,7 +220,7 @@ const EditTagModal = (props) => {
           // 添加到下拉选项
           key: model,
           text: model,
-          value: model
+          value: model,
         });
       } else if (model) {
         showError('某些模型已存在！');
@@ -217,17 +236,18 @@ const EditTagModal = (props) => {
     handleInputChange('models', localModels);
   };
 
-
   return (
     <SideSheet
-      title="编辑标签"
+      title='编辑标签'
       visible={visible}
       onCancel={handleClose}
       footer={
         <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <Space>
             <Button onClick={handleClose}>取消</Button>
-            <Button type="primary" onClick={handleSave} loading={loading}>保存</Button>
+            <Button type='primary' onClick={handleSave} loading={loading}>
+              保存
+            </Button>
           </Space>
         </div>
       }
@@ -235,27 +255,23 @@ const EditTagModal = (props) => {
       <div style={{ marginTop: 10 }}>
         <Banner
           type={'warning'}
-          description={
-            <>
-              所有编辑均为覆盖操作，留空则不更改
-            </>
-          }
+          description={<>所有编辑均为覆盖操作，留空则不更改</>}
         ></Banner>
       </div>
       <Spin spinning={loading}>
         <TextInput
-          label="标签名，留空则解散标签"
-          name="newTag"
+          label='标签名，留空则解散标签'
+          name='newTag'
           value={inputs.new_tag}
           onChange={(value) => setInputs({ ...inputs, new_tag: value })}
-          placeholder="请输入新标签"
+          placeholder='请输入新标签'
         />
         <div style={{ marginTop: 10 }}>
           <Typography.Text strong>模型，留空则不更改：</Typography.Text>
         </div>
         <Select
           placeholder={'请选择该渠道所支持的模型，留空则不更改'}
-          name="models"
+          name='models'
           required
           multiple
           selection
@@ -265,16 +281,16 @@ const EditTagModal = (props) => {
             handleInputChange('models', value);
           }}
           value={inputs.models}
-          autoComplete="new-password"
+          autoComplete='new-password'
           optionList={modelOptions}
         />
         <Input
           addonAfter={
-            <Button type="primary" onClick={addCustomModels}>
+            <Button type='primary' onClick={addCustomModels}>
               填入
             </Button>
           }
-          placeholder="输入自定义模型名称"
+          placeholder='输入自定义模型名称'
           value={customModel}
           onChange={(value) => {
             setCustomModel(value.trim());
@@ -285,7 +301,7 @@ const EditTagModal = (props) => {
         </div>
         <Select
           placeholder={'请选择可以使用该渠道的分组，留空则不更改'}
-          name="groups"
+          name='groups'
           required
           multiple
           selection
@@ -295,7 +311,7 @@ const EditTagModal = (props) => {
             handleInputChange('groups', value);
           }}
           value={inputs.groups}
-          autoComplete="new-password"
+          autoComplete='new-password'
           optionList={groupOptions}
         />
         <div style={{ marginTop: 10 }}>
@@ -303,25 +319,25 @@ const EditTagModal = (props) => {
         </div>
         <TextArea
           placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改`}
-          name="model_mapping"
+          name='model_mapping'
           onChange={(value) => {
             handleInputChange('model_mapping', value);
           }}
           autosize
           value={inputs.model_mapping}
-          autoComplete="new-password"
+          autoComplete='new-password'
         />
         <Space>
           <Typography.Text
             style={{
               color: 'rgba(var(--semi-blue-5), 1)',
               userSelect: 'none',
-              cursor: 'pointer'
+              cursor: 'pointer',
             }}
             onClick={() => {
               handleInputChange(
                 'model_mapping',
-                JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2)
+                JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2),
               );
             }}
           >
@@ -331,13 +347,10 @@ const EditTagModal = (props) => {
             style={{
               color: 'rgba(var(--semi-blue-5), 1)',
               userSelect: 'none',
-              cursor: 'pointer'
+              cursor: 'pointer',
             }}
             onClick={() => {
-              handleInputChange(
-                'model_mapping',
-                JSON.stringify({}, null, 2)
-              );
+              handleInputChange('model_mapping', JSON.stringify({}, null, 2));
             }}
           >
             清空重定向
@@ -346,13 +359,10 @@ const EditTagModal = (props) => {
             style={{
               color: 'rgba(var(--semi-blue-5), 1)',
               userSelect: 'none',
-              cursor: 'pointer'
+              cursor: 'pointer',
             }}
             onClick={() => {
-              handleInputChange(
-                'model_mapping',
-                ""
-              );
+              handleInputChange('model_mapping', '');
             }}
           >
             不更改
@@ -363,4 +373,4 @@ const EditTagModal = (props) => {
   );
 };
 
-export default EditTagModal;
+export default EditTagModal;

web/src/pages/Channel/index.js

@@ -9,10 +9,10 @@ const File = () => {
     <>
       <Layout>
         <Layout.Header>
-        <h3>{t('管理渠道')}</h3>
-      </Layout.Header>
-      <Layout.Content>
-        <ChannelsTable />
+          <h3>{t('管理渠道')}</h3>
+        </Layout.Header>
+        <Layout.Content>
+          <ChannelsTable />
         </Layout.Content>
       </Layout>
     </>

web/src/pages/Chat/index.js

@@ -1,6 +1,6 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import { useTokenKeys } from '../../components/fetchTokenKeys';
-import {Banner, Layout} from '@douyinfe/semi-ui';
+import { Banner, Layout } from '@douyinfe/semi-ui';
 import { useParams } from 'react-router-dom';
 
 const ChatPage = () => {
@@ -10,21 +10,24 @@ const ChatPage = () => {
   const comLink = (key) => {
     // console.log('chatLink:', chatLink);
     if (!serverAddress || !key) return '';
-      let link = "";
-      if (id) {
-          let chats = localStorage.getItem('chats');
-          if (chats) {
-              chats = JSON.parse(chats);
-              if (Array.isArray(chats) && chats.length > 0) {
-                  for (let k in chats[id]) {
-                      link = chats[id][k];
-                      link = link.replaceAll('{address}', encodeURIComponent(serverAddress));
-                      link = link.replaceAll('{key}', 'sk-' + key);
-                  }
-              }
+    let link = '';
+    if (id) {
+      let chats = localStorage.getItem('chats');
+      if (chats) {
+        chats = JSON.parse(chats);
+        if (Array.isArray(chats) && chats.length > 0) {
+          for (let k in chats[id]) {
+            link = chats[id][k];
+            link = link.replaceAll(
+              '{address}',
+              encodeURIComponent(serverAddress),
+            );
+            link = link.replaceAll('{key}', 'sk-' + key);
           }
+        }
       }
-      return link;
+    }
+    return link;
   };
 
   const iframeSrc = keys.length > 0 ? comLink(keys[0]) : '';
@@ -33,21 +36,18 @@ const ChatPage = () => {
     <iframe
       src={iframeSrc}
       style={{ width: '100%', height: '100%', border: 'none' }}
-      title="Token Frame"
-      allow="camera;microphone"
+      title='Token Frame'
+      allow='camera;microphone'
     />
   ) : (
     <div>
       <Layout>
         <Layout.Header>
-          <Banner
-              description={"正在跳转......"}
-              type={"warning"}
-          />
+          <Banner description={'正在跳转......'} type={'warning'} />
         </Layout.Header>
       </Layout>
     </div>
   );
 };
 
-export default ChatPage;
+export default ChatPage;

web/src/pages/Chat2Link/index.js

@@ -18,9 +18,9 @@ const chat2page = () => {
 
   return (
     <div>
-        <h3>正在加载，请稍候...</h3>
+      <h3>正在加载，请稍候...</h3>
     </div>
   );
 };
 
-export default chat2page;
+export default chat2page;

web/src/pages/Detail/index.js

@@ -1,8 +1,18 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
 
-import { Button, Card, Col, Descriptions, Form, Layout, Row, Spin, Tabs } from '@douyinfe/semi-ui';
-import { VChart } from "@visactor/react-vchart";
+import {
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Form,
+  Layout,
+  Row,
+  Spin,
+  Tabs,
+} from '@douyinfe/semi-ui';
+import { VChart } from '@visactor/react-vchart';
 import {
   API,
   isAdmin,
@@ -59,10 +69,12 @@ const Detail = (props) => {
   const [lineData, setLineData] = useState([]);
   const [spec_pie, setSpecPie] = useState({
     type: 'pie',
-    data: [{
-      id: 'id0',
-      values: pieData
-    }],
+    data: [
+      {
+        id: 'id0',
+        values: pieData,
+      },
+    ],
     outerRadius: 0.8,
     innerRadius: 0.5,
     padAngle: 0.6,
@@ -113,10 +125,12 @@ const Detail = (props) => {
   });
   const [spec_line, setSpecLine] = useState({
     type: 'bar',
-    data: [{
-      id: 'barData',
-      values: lineData
-    }],
+    data: [
+      {
+        id: 'barData',
+        values: lineData,
+      },
+    ],
     xField: 'Time',
     yField: 'Usage',
     seriesField: 'Model',
@@ -158,7 +172,7 @@ const Detail = (props) => {
           array.sort((a, b) => b.value - a.value);
           let sum = 0;
           for (let i = 0; i < array.length; i++) {
-            if (array[i].key == "其他") {
+            if (array[i].key == '其他') {
               continue;
             }
             let value = parseFloat(array[i].value);
@@ -245,7 +259,7 @@ const Detail = (props) => {
     let totalTokens = 0;
 
     // 收集所有唯一的模型名称
-    data.forEach(item => {
+    data.forEach((item) => {
       uniqueModels.add(item.model_name);
       totalTokens += item.token_used;
       totalQuota += item.quota;
@@ -255,15 +269,16 @@ const Detail = (props) => {
     // 处理颜色映射
     const newModelColors = {};
     Array.from(uniqueModels).forEach((modelName) => {
-      newModelColors[modelName] = modelColorMap[modelName] || 
-        modelColors[modelName] || 
+      newModelColors[modelName] =
+        modelColorMap[modelName] ||
+        modelColors[modelName] ||
         modelToColor(modelName);
     });
     setModelColors(newModelColors);
 
     // 按时间和模型聚合数据
     let aggregatedData = new Map();
-    data.forEach(item => {
+    data.forEach((item) => {
       const timeKey = timestamp2string1(item.created_at, dataExportDefaultTime);
       const modelKey = item.model_name;
       const key = `${timeKey}-${modelKey}`;
@@ -273,10 +288,10 @@ const Detail = (props) => {
           time: timeKey,
           model: modelKey,
           quota: 0,
-          count: 0
+          count: 0,
         });
       }
-      
+
       const existing = aggregatedData.get(key);
       existing.quota += item.quota;
       existing.count += item.count;
@@ -293,48 +308,53 @@ const Detail = (props) => {
 
     newPieData = Array.from(modelTotals).map(([model, count]) => ({
       type: model,
-      value: count
+      value: count,
     }));
 
     // 生成时间点序列
-    let timePoints = Array.from(new Set([...aggregatedData.values()].map(d => d.time)));
+    let timePoints = Array.from(
+      new Set([...aggregatedData.values()].map((d) => d.time)),
+    );
     if (timePoints.length < 7) {
-      const lastTime = Math.max(...data.map(item => item.created_at));
-      const interval = dataExportDefaultTime === 'hour' ? 3600 
-                      : dataExportDefaultTime === 'day' ? 86400 
-                      : 604800;
-      
-      timePoints = Array.from({length: 7}, (_, i) => 
-        timestamp2string1(lastTime - (6-i) * interval, dataExportDefaultTime)
+      const lastTime = Math.max(...data.map((item) => item.created_at));
+      const interval =
+        dataExportDefaultTime === 'hour'
+          ? 3600
+          : dataExportDefaultTime === 'day'
+            ? 86400
+            : 604800;
+
+      timePoints = Array.from({ length: 7 }, (_, i) =>
+        timestamp2string1(lastTime - (6 - i) * interval, dataExportDefaultTime),
       );
     }
 
     // 生成柱状图数据
-    timePoints.forEach(time => {
+    timePoints.forEach((time) => {
       // 为每个时间点收集所有模型的数据
-      let timeData = Array.from(uniqueModels).map(model => {
+      let timeData = Array.from(uniqueModels).map((model) => {
         const key = `${time}-${model}`;
         const aggregated = aggregatedData.get(key);
         return {
           Time: time,
           Model: model,
           rawQuota: aggregated?.quota || 0,
-          Usage: aggregated?.quota ? getQuotaWithUnit(aggregated.quota, 4) : 0
+          Usage: aggregated?.quota ? getQuotaWithUnit(aggregated.quota, 4) : 0,
         };
       });
-      
+
       // 计算该时间点的总计
       const timeSum = timeData.reduce((sum, item) => sum + item.rawQuota, 0);
-      
+
       // 按照 rawQuota 从大到小排序
       timeData.sort((a, b) => b.rawQuota - a.rawQuota);
-      
+
       // 为每个数据点添加该时间的总计
-      timeData = timeData.map(item => ({
+      timeData = timeData.map((item) => ({
         ...item,
-        TimeSum: timeSum
+        TimeSum: timeSum,
       }));
-      
+
       // 将排序后的数据添加到 newLineData
       newLineData.push(...timeData);
     });
@@ -344,30 +364,30 @@ const Detail = (props) => {
     newLineData.sort((a, b) => a.Time.localeCompare(b.Time));
 
     // 更新图表配置和数据
-    setSpecPie(prev => ({
+    setSpecPie((prev) => ({
       ...prev,
       data: [{ id: 'id0', values: newPieData }],
       title: {
         ...prev.title,
-        subtext: `${t('总计')}：${renderNumber(totalTimes)}`
+        subtext: `${t('总计')}：${renderNumber(totalTimes)}`,
       },
       color: {
-        specified: newModelColors
-      }
+        specified: newModelColors,
+      },
     }));
 
-    setSpecLine(prev => ({
+    setSpecLine((prev) => ({
       ...prev,
       data: [{ id: 'barData', values: newLineData }],
       title: {
         ...prev.title,
-        subtext: `${t('总计')}：${renderQuota(totalQuota, 2)}`
+        subtext: `${t('总计')}：${renderQuota(totalQuota, 2)}`,
       },
       color: {
-        specified: newModelColors
-      }
+        specified: newModelColors,
+      },
     }));
-    
+
     setPieData(newPieData);
     setLineData(newLineData);
     setConsumeQuota(totalQuota);
@@ -377,16 +397,16 @@ const Detail = (props) => {
 
   const getUserData = async () => {
     let res = await API.get(`/api/user/self`);
-    const {success, message, data} = res.data;
+    const { success, message, data } = res.data;
     if (success) {
-      userDispatch({type: 'login', payload: data});
+      userDispatch({ type: 'login', payload: data });
     } else {
       showError(message);
     }
   };
 
   useEffect(() => {
-    getUserData()
+    getUserData();
     if (!initialized.current) {
       initVChartSemiTheme({
         isWatchingThemeSwitch: true,
@@ -468,15 +488,19 @@ const Detail = (props) => {
               >
                 {t('查询')}
               </Button>
-              <Form.Section>
-              </Form.Section>
+              <Form.Section></Form.Section>
             </>
           </Form>
           <Spin spinning={loading}>
-            <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }} style={{marginTop: 20}} type="flex" justify="space-between">
-              <Col span={styleState.isMobile?24:8}>
+            <Row
+              gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}
+              style={{ marginTop: 20 }}
+              type='flex'
+              justify='space-between'
+            >
+              <Col span={styleState.isMobile ? 24 : 8}>
                 <Card className='panel-desc-card'>
-                  <Descriptions row size="small">
+                  <Descriptions row size='small'>
                     <Descriptions.Item itemKey={t('当前余额')}>
                       {renderQuota(userState?.user?.quota)}
                     </Descriptions.Item>
@@ -489,9 +513,9 @@ const Detail = (props) => {
                   </Descriptions>
                 </Card>
               </Col>
-              <Col span={styleState.isMobile?24:8}>
+              <Col span={styleState.isMobile ? 24 : 8}>
                 <Card>
-                  <Descriptions row size="small">
+                  <Descriptions row size='small'>
                     <Descriptions.Item itemKey={t('统计额度')}>
                       {renderQuota(consumeQuota)}
                     </Descriptions.Item>
@@ -508,40 +532,43 @@ const Detail = (props) => {
                 <Card>
                   <Descriptions row size='small'>
                     <Descriptions.Item itemKey={t('平均RPM')}>
-                      {(times /
+                      {(
+                        times /
                         ((Date.parse(end_timestamp) -
                           Date.parse(start_timestamp)) /
-                          60000)).toFixed(3)}
+                          60000)
+                      ).toFixed(3)}
                     </Descriptions.Item>
                     <Descriptions.Item itemKey={t('平均TPM')}>
-                      {(consumeTokens /
+                      {(
+                        consumeTokens /
                         ((Date.parse(end_timestamp) -
                           Date.parse(start_timestamp)) /
-                          60000)).toFixed(3)}
+                          60000)
+                      ).toFixed(3)}
                     </Descriptions.Item>
                   </Descriptions>
                 </Card>
               </Col>
             </Row>
-            <Card style={{marginTop: 20}}>
-              <Tabs type="line" defaultActiveKey="1">
-                <Tabs.TabPane tab={t('消耗分布')} itemKey="1">
+            <Card style={{ marginTop: 20 }}>
+              <Tabs type='line' defaultActiveKey='1'>
+                <Tabs.TabPane tab={t('消耗分布')} itemKey='1'>
                   <div style={{ height: 500 }}>
                     <VChart
                       spec={spec_line}
-                      option={{ mode: "desktop-browser" }}
+                      option={{ mode: 'desktop-browser' }}
                     />
                   </div>
                 </Tabs.TabPane>
-                <Tabs.TabPane tab={t('调用次数分布')} itemKey="2">
+                <Tabs.TabPane tab={t('调用次数分布')} itemKey='2'>
                   <div style={{ height: 500 }}>
                     <VChart
                       spec={spec_pie}
-                      option={{ mode: "desktop-browser" }}
+                      option={{ mode: 'desktop-browser' }}
                     />
                   </div>
                 </Tabs.TabPane>
-
               </Tabs>
             </Card>
           </Spin>

web/src/pages/Home/index.js

@@ -40,19 +40,19 @@ const Home = () => {
       setHomePageContent(content);
       localStorage.setItem('home_page_content', content);
 
-        // 如果内容是 URL，则发送主题模式
-        if (data.startsWith('https://')) {
-            const iframe = document.querySelector('iframe');
-            if (iframe) {
-                const theme = localStorage.getItem('theme-mode') || 'light';
-                // 测试是否正确传递theme-mode给iframe
-                // console.log('Sending theme-mode to iframe:', theme); 
-                iframe.onload = () => {
-                    iframe.contentWindow.postMessage({ themeMode: theme }, '*');
-                    iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
-                };
-            }
+      // 如果内容是 URL，则发送主题模式
+      if (data.startsWith('https://')) {
+        const iframe = document.querySelector('iframe');
+        if (iframe) {
+          const theme = localStorage.getItem('theme-mode') || 'light';
+          // 测试是否正确传递theme-mode给iframe
+          // console.log('Sending theme-mode to iframe:', theme);
+          iframe.onload = () => {
+            iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+            iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
+          };
         }
+      }
     } else {
       showError(message);
       setHomePageContent('加载首页内容失败...');
@@ -68,7 +68,7 @@ const Home = () => {
   useEffect(() => {
     displayNotice().then();
     displayHomePageContent().then();
-  });
+  }, []);
 
   return (
     <>
@@ -95,7 +95,9 @@ const Home = () => {
                     </span>
                   }
                 >
-                  <p>{t('名称')}：{statusState?.status?.system_name}</p>
+                  <p>
+                    {t('名称')}：{statusState?.status?.system_name}
+                  </p>
                   <p>
                     {t('版本')}：
                     {statusState?.status?.version
@@ -112,6 +114,7 @@ const Home = () => {
                       https://github.com/Calcium-Ion/new-api
                     </a>
                   </p>
+                  
                   <p>
                     {t('协议')}：
                     <a
@@ -122,7 +125,9 @@ const Home = () => {
                       Apache-2.0 License
                     </a>
                   </p>
-                  <p>{t('启动时间')}：{getStartTimeString()}</p>
+                  <p>
+                    {t('启动时间')}：{getStartTimeString()}
+                  </p>
                 </Card>
               </Col>
               <Col span={12}>
@@ -151,6 +156,12 @@ const Home = () => {
                       ? t('已启用')
                       : t('未启用')}
                   </p>
+                  <p>
+                    {t('OIDC 身份验证')}：
+                    {statusState?.status?.oidc === true
+                      ? t('已启用')
+                      : t('未启用')}
+                  </p>
                   <p>
                     {t('微信身份验证')}：
                     {statusState?.status?.wechat_login === true

web/src/pages/Playground/Playground.js

@@ -1,8 +1,23 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../../context/User/index.js';
-import { API, getUserIdFromLocalStorage, showError } from '../../helpers/index.js';
-import { Card, Chat, Input, Layout, Select, Slider, TextArea, Typography, Button, Highlight } from '@douyinfe/semi-ui';
+import {
+  API,
+  getUserIdFromLocalStorage,
+  showError,
+} from '../../helpers/index.js';
+import {
+  Card,
+  Chat,
+  Input,
+  Layout,
+  Select,
+  Slider,
+  TextArea,
+  Typography,
+  Button,
+  Highlight,
+} from '@douyinfe/semi-ui';
 import { SSE } from 'sse';
 import { IconSetting } from '@douyinfe/semi-icons';
 import { StyleContext } from '../../context/Style/index.js';
@@ -12,26 +27,28 @@ import { renderGroupOption, truncateText } from '../../helpers/render.js';
 const roleInfo = {
   user: {
     name: 'User',
-    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'
+    avatar:
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
   },
   assistant: {
     name: 'Assistant',
-    avatar: 'logo.png'
+    avatar: 'logo.png',
   },
   system: {
     name: 'System',
-    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
-  }
-}
+    avatar:
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',
+  },
+};
 
 let id = 4;
 function getId() {
-  return `${id++}`
+  return `${id++}`;
 }
 
 const Playground = () => {
   const { t } = useTranslation();
-  
+
   const defaultMessage = [
     {
       role: 'user',
@@ -44,7 +61,7 @@ const Playground = () => {
       id: '3',
       createAt: 1715676751919,
       content: t('你好，请问有什么可以帮助您的吗？'),
-    }
+    },
   ];
 
   const [inputs, setInputs] = useState({
@@ -56,7 +73,9 @@ const Playground = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [userState, userDispatch] = useContext(UserContext);
   const [status, setStatus] = useState({});
-  const [systemPrompt, setSystemPrompt] = useState('You are a helpful assistant. You can help me by answering my questions. You can also ask me questions.');
+  const [systemPrompt, setSystemPrompt] = useState(
+    'You are a helpful assistant. You can help me by answering my questions. You can also ask me questions.',
+  );
   const [message, setMessage] = useState(defaultMessage);
   const [models, setModels] = useState([]);
   const [groups, setGroups] = useState([]);
@@ -99,26 +118,35 @@ const Playground = () => {
     const { success, message, data } = res.data;
     if (success) {
       let localGroupOptions = Object.entries(data).map(([group, info]) => ({
-        label: truncateText(info.desc, "50%"),
+        label: truncateText(info.desc, '50%'),
         value: group,
         ratio: info.ratio,
-        fullLabel: info.desc // 保存完整文本用于tooltip
+        fullLabel: info.desc, // 保存完整文本用于tooltip
       }));
 
       if (localGroupOptions.length === 0) {
-        localGroupOptions = [{
-          label: t('用户分组'),
-          value: '',
-          ratio: 1
-        }];
+        localGroupOptions = [
+          {
+            label: t('用户分组'),
+            value: '',
+            ratio: 1,
+          },
+        ];
       } else {
         const localUser = JSON.parse(localStorage.getItem('user'));
-        const userGroup = (userState.user && userState.user.group) || (localUser && localUser.group);
-        
+        const userGroup =
+          (userState.user && userState.user.group) ||
+          (localUser && localUser.group);
+
         if (userGroup) {
-          const userGroupIndex = localGroupOptions.findIndex(g => g.value === userGroup);
+          const userGroupIndex = localGroupOptions.findIndex(
+            (g) => g.value === userGroup,
+          );
           if (userGroupIndex > -1) {
-            const userGroupOption = localGroupOptions.splice(userGroupIndex, 1)[0];
+            const userGroupOption = localGroupOptions.splice(
+              userGroupIndex,
+              1,
+            )[0];
             localGroupOptions.unshift(userGroupOption);
           }
         }
@@ -135,7 +163,7 @@ const Playground = () => {
     border: '1px solid var(--semi-color-border)',
     borderRadius: '16px',
     margin: '0px 8px',
-  }
+  };
 
   const getSystemMessage = () => {
     if (systemPrompt !== '') {
@@ -144,22 +172,22 @@ const Playground = () => {
         id: '1',
         createAt: 1715676751919,
         content: systemPrompt,
-      }
+      };
     }
-  }
+  };
 
   let handleSSE = (payload) => {
     let source = new SSE('/pg/chat/completions', {
       headers: {
-        "Content-Type": "application/json",
-        "New-Api-User": getUserIdFromLocalStorage(),
+        'Content-Type': 'application/json',
+        'New-Api-User': getUserIdFromLocalStorage(),
       },
-      method: "POST",
+      method: 'POST',
       payload: JSON.stringify(payload),
     });
-    source.addEventListener("message", (e) => {
+    source.addEventListener('message', (e) => {
       // 只有收到 [DONE] 时才结束
-      if (e.data === "[DONE]") {
+      if (e.data === '[DONE]') {
         source.close();
         completeMessage();
         return;
@@ -172,12 +200,12 @@ const Playground = () => {
       }
     });
 
-    source.addEventListener("error", (e) => {
-      generateMockResponse(e.data)
-      completeMessage('error')
+    source.addEventListener('error', (e) => {
+      generateMockResponse(e.data);
+      completeMessage('error');
     });
 
-    source.addEventListener("readystatechange", (e) => {
+    source.addEventListener('readystatechange', (e) => {
       if (e.readyState >= 2) {
         if (source.status === undefined) {
           source.close();
@@ -186,55 +214,58 @@ const Playground = () => {
       }
     });
     source.stream();
-  }
+  };
 
-  const onMessageSend = useCallback((content, attachment) => {
-    console.log("attachment: ", attachment);
-    setMessage((prevMessage) => {
-      const newMessage = [
-        ...prevMessage,
-        {
-          role: 'user',
-          content: content,
-          createAt: Date.now(),
-          id: getId()
-        }
-      ];
+  const onMessageSend = useCallback(
+    (content, attachment) => {
+      console.log('attachment: ', attachment);
+      setMessage((prevMessage) => {
+        const newMessage = [
+          ...prevMessage,
+          {
+            role: 'user',
+            content: content,
+            createAt: Date.now(),
+            id: getId(),
+          },
+        ];
 
-      // 将 getPayload 移到这里
-      const getPayload = () => {
-        let systemMessage = getSystemMessage();
-        let messages = newMessage.map((item) => {
-          return {
-            role: item.role,
-            content: item.content,
+        // 将 getPayload 移到这里
+        const getPayload = () => {
+          let systemMessage = getSystemMessage();
+          let messages = newMessage.map((item) => {
+            return {
+              role: item.role,
+              content: item.content,
+            };
+          });
+          if (systemMessage) {
+            messages.unshift(systemMessage);
           }
-        });
-        if (systemMessage) {
-          messages.unshift(systemMessage);
-        }
-        return {
-          messages: messages,
-          stream: true,
-          model: inputs.model,
-          group: inputs.group,
-          max_tokens: parseInt(inputs.max_tokens),
-          temperature: inputs.temperature,
+          return {
+            messages: messages,
+            stream: true,
+            model: inputs.model,
+            group: inputs.group,
+            max_tokens: parseInt(inputs.max_tokens),
+            temperature: inputs.temperature,
+          };
         };
-      };
 
-      // 使用更新后的消息状态调用 handleSSE
-      handleSSE(getPayload());
-      newMessage.push({
-        role: 'assistant',
-        content: '',
-        createAt: Date.now(),
-        id: getId(),
-        status: 'loading'
+        // 使用更新后的消息状态调用 handleSSE
+        handleSSE(getPayload());
+        newMessage.push({
+          role: 'assistant',
+          content: '',
+          createAt: Date.now(),
+          id: getId(),
+          status: 'loading',
+        });
+        return newMessage;
       });
-      return newMessage;
-    });
-  }, [getSystemMessage]);
+    },
+    [getSystemMessage],
+  );
 
   const completeMessage = useCallback((status = 'complete') => {
     // console.log("Complete Message: ", status)
@@ -244,27 +275,27 @@ const Playground = () => {
       if (lastMessage.status === 'complete' || lastMessage.status === 'error') {
         return prevMessage;
       }
-      return [
-        ...prevMessage.slice(0, -1),
-        { ...lastMessage, status: status }
-      ];
+      return [...prevMessage.slice(0, -1), { ...lastMessage, status: status }];
     });
-  }, [])
+  }, []);
 
   const generateMockResponse = useCallback((content) => {
     // console.log("Generate Mock Response: ", content);
     setMessage((message) => {
       const lastMessage = message[message.length - 1];
-      let newMessage = {...lastMessage};
-      if (lastMessage.status === 'loading' || lastMessage.status === 'incomplete') {
+      let newMessage = { ...lastMessage };
+      if (
+        lastMessage.status === 'loading' ||
+        lastMessage.status === 'incomplete'
+      ) {
         newMessage = {
           ...newMessage,
           content: (lastMessage.content || '') + content,
-          status: 'incomplete'
-        }
+          status: 'incomplete',
+        };
       }
-      return [ ...message.slice(0, -1), newMessage ]
-    })
+      return [...message.slice(0, -1), newMessage];
+    });
   }, []);
 
   const SettingsToggle = () => {
@@ -285,34 +316,47 @@ const Playground = () => {
           boxShadow: '2px 0 8px rgba(0, 0, 0, 0.15)',
         }}
         onClick={() => setShowSettings(!showSettings)}
-        theme="solid"
-        type="primary"
+        theme='solid'
+        type='primary'
       />
     );
   };
 
   function CustomInputRender(props) {
     const { detailProps } = props;
-    const { clearContextNode, uploadNode, inputNode, sendNode, onClick } = detailProps;
+    const { clearContextNode, uploadNode, inputNode, sendNode, onClick } =
+      detailProps;
 
-    return <div style={{margin: '8px 16px', display: 'flex', flexDirection:'row',
-      alignItems: 'flex-end', borderRadius: 16,padding: 10, border: '1px solid var(--semi-color-border)'}}
-                onClick={onClick}
-    >
-      {/*{uploadNode}*/}
-      {inputNode}
-      {sendNode}
-    </div>
+    return (
+      <div
+        style={{
+          margin: '8px 16px',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-end',
+          borderRadius: 16,
+          padding: 10,
+          border: '1px solid var(--semi-color-border)',
+        }}
+        onClick={onClick}
+      >
+        {/*{uploadNode}*/}
+        {inputNode}
+        {sendNode}
+      </div>
+    );
   }
 
   const renderInputArea = useCallback((props) => {
-    return (<CustomInputRender {...props} />)
+    return <CustomInputRender {...props} />;
   }, []);
 
   return (
-    <Layout style={{height: '100%'}}>
+    <Layout style={{ height: '100%' }}>
       {(showSettings || !styleState.isMobile) && (
-        <Layout.Sider style={{ display: styleState.isMobile ? 'block' : 'initial' }}>
+        <Layout.Sider
+          style={{ display: styleState.isMobile ? 'block' : 'initial' }}
+        >
           <Card style={commonOuterStyle}>
             <div style={{ marginTop: 10 }}>
               <Typography.Text strong>{t('分组')}：</Typography.Text>
@@ -390,18 +434,17 @@ const Playground = () => {
                 setSystemPrompt(value);
               }}
             />
-
           </Card>
         </Layout.Sider>
       )}
       <Layout.Content>
-        <div style={{height: '100%', position: 'relative'}}>
+        <div style={{ height: '100%', position: 'relative' }}>
           <SettingsToggle />
           <Chat
             chatBoxRenderConfig={{
               renderChatBoxAction: () => {
-                return <div></div>
-              }
+                return <div></div>;
+              },
             }}
             renderInputArea={renderInputArea}
             roleConfig={roleInfo}

web/src/pages/Redemption/EditRedemption.js

@@ -8,7 +8,11 @@ import {
   showError,
   showSuccess,
 } from '../../helpers';
-import { getQuotaPerUnit, renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
+import {
+  getQuotaPerUnit,
+  renderQuota,
+  renderQuotaWithPrompt,
+} from '../../helpers/render';
 import {
   AutoComplete,
   Button,
@@ -171,7 +175,9 @@ const EditRedemption = (props) => {
           />
           <Divider />
           <div style={{ marginTop: 20 }}>
-            <Typography.Text>{t('额度') + renderQuotaWithPrompt(quota)}</Typography.Text>
+            <Typography.Text>
+              {t('额度') + renderQuotaWithPrompt(quota)}
+            </Typography.Text>
           </div>
           <AutoComplete
             style={{ marginTop: 8 }}

web/src/pages/Redemption/index.js

@@ -9,14 +9,14 @@ const Redemption = () => {
     <>
       <Layout>
         <Layout.Header>
-        <h3>{t('管理兑换码')}</h3>
-      </Layout.Header>
-      <Layout.Content>
-        <RedemptionsTable />
-      </Layout.Content>
-    </Layout>
-  </>
-);
-}
+          <h3>{t('管理兑换码')}</h3>
+        </Layout.Header>
+        <Layout.Content>
+          <RedemptionsTable />
+        </Layout.Content>
+      </Layout>
+    </>
+  );
+};
 
 export default Redemption;

web/src/pages/Setting/Model/SettingClaudeModel.js

@@ -5,23 +5,27 @@ import {
   API,
   showError,
   showSuccess,
-  showWarning, verifyJSON
+  showWarning,
+  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
 const CLAUDE_HEADER = {
   'claude-3-7-sonnet-20250219-thinking': {
-    'anthropic-beta': ['output-128k-2025-02-19', 'token-efficient-tools-2025-02-19'],
-  }
+    'anthropic-beta': [
+      'output-128k-2025-02-19',
+      'token-efficient-tools-2025-02-19',
+    ],
+  },
 };
 
 const CLAUDE_DEFAULT_MAX_TOKENS = {
-  'default': 8192,
-  "claude-3-haiku-20240307": 4096,
-  "claude-3-opus-20240229": 4096,
+  default: 8192,
+  'claude-3-haiku-20240307': 4096,
+  'claude-3-opus-20240229': 4096,
   'claude-3-7-sonnet-20250219-thinking': 8192,
-}
+};
 
 export default function SettingClaudeModel(props) {
   const { t } = useTranslation();
@@ -41,7 +45,7 @@ export default function SettingClaudeModel(props) {
     if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
     const requestQueue = updateArray.map((item) => {
       let value = String(inputs[item.key]);
-      
+
       return API.put('/api/option/', {
         key: item.key,
         value,
@@ -53,7 +57,8 @@ export default function SettingClaudeModel(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -88,42 +93,63 @@ export default function SettingClaudeModel(props) {
         >
           <Form.Section text={t('Claude设置')}>
             <Row>
-              <Col span={16}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.TextArea
                   label={t('Claude请求头覆盖')}
                   field={'claude.model_headers_settings'}
-                  placeholder={t('为一个 JSON 文本，例如：') + '\n' + JSON.stringify(CLAUDE_HEADER, null, 2)}
-                  extraText={t('示例') + '\n' + JSON.stringify(CLAUDE_HEADER, null, 2)}
+                  placeholder={
+                    t('为一个 JSON 文本，例如：') +
+                    '\n' +
+                    JSON.stringify(CLAUDE_HEADER, null, 2)
+                  }
+                  extraText={
+                    t('示例') + '\n' + JSON.stringify(CLAUDE_HEADER, null, 2)
+                  }
                   autosize={{ minRows: 6, maxRows: 12 }}
                   trigger='blur'
                   stopValidateWithError
                   rules={[
                     {
                       validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串')
-                    }
+                      message: t('不是合法的 JSON 字符串'),
+                    },
                   ]}
-                  onChange={(value) => setInputs({ ...inputs, 'claude.model_headers_settings': value })}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      'claude.model_headers_settings': value,
+                    })
+                  }
                 />
               </Col>
             </Row>
             <Row>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.TextArea
                   label={t('缺省 MaxTokens')}
                   field={'claude.default_max_tokens'}
-                  placeholder={t('为一个 JSON 文本，例如：') + '\n' + JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)}
-                  extraText={t('示例') + '\n' + JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)}
+                  placeholder={
+                    t('为一个 JSON 文本，例如：') +
+                    '\n' +
+                    JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)
+                  }
+                  extraText={
+                    t('示例') +
+                    '\n' +
+                    JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)
+                  }
                   autosize={{ minRows: 6, maxRows: 12 }}
                   trigger='blur'
                   stopValidateWithError
                   rules={[
                     {
                       validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串')
-                    }
+                      message: t('不是合法的 JSON 字符串'),
+                    },
                   ]}
-                  onChange={(value) => setInputs({ ...inputs, 'claude.default_max_tokens': value })}
+                  onChange={(value) =>
+                    setInputs({ ...inputs, 'claude.default_max_tokens': value })
+                  }
                 />
               </Col>
             </Row>
@@ -132,7 +158,12 @@ export default function SettingClaudeModel(props) {
                 <Form.Switch
                   label={t('启用Claude思考适配（-thinking后缀）')}
                   field={'claude.thinking_adapter_enabled'}
-                  onChange={(value) => setInputs({ ...inputs, 'claude.thinking_adapter_enabled': value })}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      'claude.thinking_adapter_enabled': value,
+                    })
+                  }
                 />
               </Col>
             </Row>
@@ -140,12 +171,14 @@ export default function SettingClaudeModel(props) {
               <Col span={16}>
                 {/*//展示MaxTokens和BudgetTokens的计算公式, 并展示实际数字*/}
                 <Text>
-                  {t('Claude思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比')}
+                  {t(
+                    'Claude思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比',
+                  )}
                 </Text>
               </Col>
             </Row>
             <Row>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('思考适配 BudgetTokens 百分比')}
                   field={'claude.thinking_adapter_budget_tokens_percentage'}
@@ -153,7 +186,12 @@ export default function SettingClaudeModel(props) {
                   extraText={t('0.1-1之间的小数')}
                   min={0.1}
                   max={1}
-                  onChange={(value) => setInputs({ ...inputs, 'claude.thinking_adapter_budget_tokens_percentage': value })}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      'claude.thinking_adapter_budget_tokens_percentage': value,
+                    })
+                  }
                 />
               </Col>
             </Row>

web/src/pages/Setting/Model/SettingGeminiModel.js

@@ -5,20 +5,21 @@ import {
   API,
   showError,
   showSuccess,
-  showWarning, verifyJSON
+  showWarning,
+  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text.js';
 
 const GEMINI_SETTING_EXAMPLE = {
-  'default': 'OFF',
-  'HARM_CATEGORY_CIVIC_INTEGRITY': 'BLOCK_NONE',
+  default: 'OFF',
+  HARM_CATEGORY_CIVIC_INTEGRITY: 'BLOCK_NONE',
 };
 
 const GEMINI_VERSION_EXAMPLE = {
-  'default': 'v1beta',
+  default: 'v1beta',
 };
 
-
 export default function SettingGeminiModel(props) {
   const { t } = useTranslation();
 
@@ -26,6 +27,9 @@ export default function SettingGeminiModel(props) {
   const [inputs, setInputs] = useState({
     'gemini.safety_settings': '',
     'gemini.version_settings': '',
+    'gemini.supported_imagine_models': [],
+    'gemini.thinking_adapter_enabled': false,
+    'gemini.thinking_adapter_budget_tokens_percentage': 0.6,
   });
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
@@ -34,12 +38,7 @@ export default function SettingGeminiModel(props) {
     const updateArray = compareObjects(inputs, inputsRow);
     if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
     const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
+      let value = String(inputs[item.key]);
       return API.put('/api/option/', {
         key: item.key,
         value,
@@ -51,7 +50,8 @@ export default function SettingGeminiModel(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -86,30 +86,42 @@ export default function SettingGeminiModel(props) {
         >
           <Form.Section text={t('Gemini设置')}>
             <Row>
-              <Col span={16}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.TextArea
                   label={t('Gemini安全设置')}
-                  placeholder={t('为一个 JSON 文本，例如：') + '\n' + JSON.stringify(GEMINI_SETTING_EXAMPLE, null, 2)}
+                  placeholder={
+                    t('为一个 JSON 文本，例如：') +
+                    '\n' +
+                    JSON.stringify(GEMINI_SETTING_EXAMPLE, null, 2)
+                  }
                   field={'gemini.safety_settings'}
-                  extraText={t('default为默认设置，可单独设置每个分类的安全等级')}
+                  extraText={t(
+                    'default为默认设置，可单独设置每个分类的安全等级',
+                  )}
                   autosize={{ minRows: 6, maxRows: 12 }}
                   trigger='blur'
                   stopValidateWithError
                   rules={[
                     {
                       validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串')
-                    }
+                      message: t('不是合法的 JSON 字符串'),
+                    },
                   ]}
-                  onChange={(value) => setInputs({ ...inputs, 'gemini.safety_settings': value })}
+                  onChange={(value) =>
+                    setInputs({ ...inputs, 'gemini.safety_settings': value })
+                  }
                 />
               </Col>
             </Row>
             <Row>
-              <Col span={16}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.TextArea
                   label={t('Gemini版本设置')}
-                  placeholder={t('为一个 JSON 文本，例如：') + '\n' + JSON.stringify(GEMINI_VERSION_EXAMPLE, null, 2)}
+                  placeholder={
+                    t('为一个 JSON 文本，例如：') +
+                    '\n' +
+                    JSON.stringify(GEMINI_VERSION_EXAMPLE, null, 2)
+                  }
                   field={'gemini.version_settings'}
                   extraText={t('default为默认设置，可单独设置每个模型的版本')}
                   autosize={{ minRows: 6, maxRows: 12 }}
@@ -118,20 +130,87 @@ export default function SettingGeminiModel(props) {
                   rules={[
                     {
                       validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串')
-                    }
+                      message: t('不是合法的 JSON 字符串'),
+                    },
                   ]}
-                  onChange={(value) => setInputs({ ...inputs, 'gemini.version_settings': value })}
+                  onChange={(value) =>
+                    setInputs({ ...inputs, 'gemini.version_settings': value })
+                  }
                 />
               </Col>
             </Row>
-
             <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存')}
-              </Button>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+                <Form.TextArea
+                  field={'gemini.supported_imagine_models'}
+                  label={t('支持的图像模型')}
+                  placeholder={t('例如：') + '\n' + JSON.stringify(['gemini-2.0-flash-exp-image-generation'], null, 2)}
+                  onChange={(value) => setInputs({ ...inputs, 'gemini.supported_imagine_models': value })}
+                />
+              </Col>
             </Row>
           </Form.Section>
+
+          <Form.Section text={t('Gemini思考适配设置')}>
+            <Row>
+              <Col span={16}>
+                <Text>
+                  {t(
+                    "和Claude不同，默认情况下Gemini的思考模型会自动决定要不要思考，就算不开启适配模型也可以正常使用，" +
+                    "如果您需要计费，推荐设置无后缀模型价格按思考价格设置"
+                  )}
+                </Text>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={16}>
+                <Form.Switch
+                  label={t('启用Gemini思考后缀适配')}
+                  field={'gemini.thinking_adapter_enabled'}
+                  extraText={"适配-thinking和-nothinking后缀"}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      'gemini.thinking_adapter_enabled': value,
+                    })
+                  }
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Col span={16}>
+                <Text>
+                  {t(
+                    'Gemini思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比',
+                  )}
+                </Text>
+              </Col>
+            </Row>
+            <Row>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+                <Form.InputNumber
+                  label={t('请求模型带-thinking后缀的BudgetTokens数（超出24576的部分将被忽略）')}
+                  field={'gemini.thinking_adapter_budget_tokens_percentage'}
+                  initValue={''}
+                  extraText={t('0.1-1之间的小数')}
+                  min={0.1}
+                  max={1}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      'gemini.thinking_adapter_budget_tokens_percentage': value,
+                    })
+                  }
+                />
+              </Col>
+            </Row>
+          </Form.Section>
+
+          <Row>
+            <Button size='default' onClick={onSubmit}>
+              {t('保存')}
+            </Button>
+          </Row>
         </Form>
       </Spin>
     </>

web/src/pages/Setting/Model/SettingGlobalModel.js

@@ -0,0 +1,135 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Button, Col, Form, Row, Spin, Banner } from '@douyinfe/semi-ui';
+import {
+  compareObjects,
+  API,
+  showError,
+  showSuccess,
+  showWarning,
+  verifyJSON,
+} from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+
+export default function SettingGlobalModel(props) {
+  const { t } = useTranslation();
+
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState({
+    'global.pass_through_request_enabled': false,
+    'general_setting.ping_interval_enabled': false,
+    'general_setting.ping_interval_seconds': 60,
+  });
+  const refForm = useRef();
+  const [inputsRow, setInputsRow] = useState(inputs);
+
+  function onSubmit() {
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+    const requestQueue = updateArray.map((item) => {
+      let value = String(inputs[item.key]);
+
+      return API.put('/api/option/', {
+        key: item.key,
+        value,
+      });
+    });
+    setLoading(true);
+    Promise.all(requestQueue)
+      .then((res) => {
+        if (requestQueue.length === 1) {
+          if (res.includes(undefined)) return;
+        } else if (requestQueue.length > 1) {
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
+        }
+        showSuccess(t('保存成功'));
+        props.refresh();
+      })
+      .catch(() => {
+        showError(t('保存失败，请重试'));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    const currentInputs = {};
+    for (let key in props.options) {
+      if (Object.keys(inputs).includes(key)) {
+        currentInputs[key] = props.options[key];
+      }
+    }
+    setInputs(currentInputs);
+    setInputsRow(structuredClone(currentInputs));
+    refForm.current.setValues(currentInputs);
+  }, [props.options]);
+
+  return (
+    <>
+      <Spin spinning={loading}>
+        <Form
+          values={inputs}
+          getFormApi={(formAPI) => (refForm.current = formAPI)}
+          style={{ marginBottom: 15 }}
+        >
+          <Form.Section text={t('全局设置')}>
+            <Row>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+                <Form.Switch
+                  label={t('启用请求透传')}
+                  field={'global.pass_through_request_enabled'}
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      'global.pass_through_request_enabled': value,
+                    })
+                  }
+                  extraText={
+                    '开启后，所有请求将直接透传给上游，不会进行任何处理（重定向和渠道适配也将失效）,请谨慎开启'
+                  }
+                />
+              </Col>
+            </Row>
+            
+            <Form.Section text={t('连接保活设置')}>
+            <Row style={{ marginTop: 10 }}>
+                  <Col span={24}>
+                    <Banner 
+                      type="warning"
+                      description="警告：启用保活后，如果已经写入保活数据后渠道出错，系统无法重试，如果必须开启，推荐设置尽可能大的Ping间隔"
+                    />
+                  </Col>
+                </Row>
+              <Row>
+                <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+                  <Form.Switch
+                    label={t('启用Ping间隔')}
+                    field={'general_setting.ping_interval_enabled'}
+                    onChange={(value) => setInputs({ ...inputs, 'general_setting.ping_interval_enabled': value })}
+                    extraText={'开启后，将定期发送ping数据保持连接活跃'}
+                  />
+                </Col>
+                <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+                  <Form.InputNumber
+                    label={t('Ping间隔（秒）')}
+                    field={'general_setting.ping_interval_seconds'}
+                    onChange={(value) => setInputs({ ...inputs, 'general_setting.ping_interval_seconds': value })}
+                    min={1}
+                    disabled={!inputs['general_setting.ping_interval_enabled']}
+                  />
+                </Col>
+              </Row>
+            </Form.Section>
+
+            <Row>
+              <Button size='default' onClick={onSubmit}>
+                {t('保存')}
+              </Button>
+            </Row>
+          </Form.Section>
+        </Form>
+      </Spin>
+    </>
+  );
+}

web/src/pages/Setting/Operation/GroupRatioSettings.js

@@ -15,50 +15,59 @@ export default function GroupRatioSettings(props) {
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     GroupRatio: '',
-    UserUsableGroups: ''
+    UserUsableGroups: '',
   });
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
 
   async function onSubmit() {
     try {
-      await refForm.current.validate().then(() => {
-        const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-        
-        const requestQueue = updateArray.map((item) => {
-          const value = typeof inputs[item.key] === 'boolean' 
-            ? String(inputs[item.key]) 
-            : inputs[item.key];
-          return API.put('/api/option/', { key: item.key, value });
-        });
+      await refForm.current
+        .validate()
+        .then(() => {
+          const updateArray = compareObjects(inputs, inputsRow);
+          if (!updateArray.length)
+            return showWarning(t('你似乎并没有修改什么'));
 
-        setLoading(true);
-        Promise.all(requestQueue)
-          .then((res) => {
-            if (res.includes(undefined)) {
-              return showError(requestQueue.length > 1 ? t('部分保存失败，请重试') : t('保存失败'));
-            }
-            
-            for (let i = 0; i < res.length; i++) {
-              if (!res[i].data.success) {
-                return showError(res[i].data.message);
-              }
-            }
-            
-            showSuccess(t('保存成功'));
-            props.refresh();
-          })
-          .catch(error => {
-            console.error('Unexpected error:', error);
-            showError(t('保存失败，请重试'));
-          })
-          .finally(() => {
-            setLoading(false);
+          const requestQueue = updateArray.map((item) => {
+            const value =
+              typeof inputs[item.key] === 'boolean'
+                ? String(inputs[item.key])
+                : inputs[item.key];
+            return API.put('/api/option/', { key: item.key, value });
           });
-      }).catch(() => {
-        showError(t('请检查输入'));
-      });
+
+          setLoading(true);
+          Promise.all(requestQueue)
+            .then((res) => {
+              if (res.includes(undefined)) {
+                return showError(
+                  requestQueue.length > 1
+                    ? t('部分保存失败，请重试')
+                    : t('保存失败'),
+                );
+              }
+
+              for (let i = 0; i < res.length; i++) {
+                if (!res[i].data.success) {
+                  return showError(res[i].data.message);
+                }
+              }
+
+              showSuccess(t('保存成功'));
+              props.refresh();
+            })
+            .catch((error) => {
+              console.error('Unexpected error:', error);
+              showError(t('保存失败，请重试'));
+            })
+            .finally(() => {
+              setLoading(false);
+            });
+        })
+        .catch(() => {
+          showError(t('请检查输入'));
+        });
     } catch (error) {
       showError(t('请检查输入'));
       console.error(error);
@@ -86,7 +95,7 @@ export default function GroupRatioSettings(props) {
       >
         <Form.Section text={t('分组设置')}>
           <Row gutter={16}>
-            <Col span={16}>
+            <Col xs={24} sm={16}>
               <Form.TextArea
                 label={t('分组倍率')}
                 placeholder={t('为一个 JSON 文本，键为分组名称，值为倍率')}
@@ -97,15 +106,17 @@ export default function GroupRatioSettings(props) {
                 rules={[
                   {
                     validator: (rule, value) => verifyJSON(value),
-                    message: t('不是合法的 JSON 字符串')
-                  }
+                    message: t('不是合法的 JSON 字符串'),
+                  },
                 ]}
-                onChange={(value) => setInputs({ ...inputs, GroupRatio: value })}
+                onChange={(value) =>
+                  setInputs({ ...inputs, GroupRatio: value })
+                }
               />
             </Col>
           </Row>
           <Row gutter={16}>
-            <Col span={16}>
+            <Col xs={24} sm={16}>
               <Form.TextArea
                 label={t('用户可选分组')}
                 placeholder={t('为一个 JSON 文本，键为分组名称，值为分组描述')}
@@ -116,10 +127,12 @@ export default function GroupRatioSettings(props) {
                 rules={[
                   {
                     validator: (rule, value) => verifyJSON(value),
-                    message: t('不是合法的 JSON 字符串')
-                  }
+                    message: t('不是合法的 JSON 字符串'),
+                  },
                 ]}
-                onChange={(value) => setInputs({ ...inputs, UserUsableGroups: value })}
+                onChange={(value) =>
+                  setInputs({ ...inputs, UserUsableGroups: value })
+                }
               />
             </Col>
           </Row>
@@ -128,4 +141,4 @@ export default function GroupRatioSettings(props) {
       <Button onClick={onSubmit}>{t('保存分组倍率设置')}</Button>
     </Spin>
   );
-} 
+}

web/src/pages/Setting/Operation/ModelRatioSettings.js

@@ -1,5 +1,13 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Popconfirm, Row, Space, Spin } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Col,
+  Form,
+  Popconfirm,
+  Row,
+  Space,
+  Spin,
+} from '@douyinfe/semi-ui';
 import {
   compareObjects,
   API,
@@ -24,43 +32,52 @@ export default function ModelRatioSettings(props) {
 
   async function onSubmit() {
     try {
-      await refForm.current.validate().then(() => {
-        const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-        
-        const requestQueue = updateArray.map((item) => {
-          const value = typeof inputs[item.key] === 'boolean' 
-            ? String(inputs[item.key]) 
-            : inputs[item.key];
-          return API.put('/api/option/', { key: item.key, value });
-        });
+      await refForm.current
+        .validate()
+        .then(() => {
+          const updateArray = compareObjects(inputs, inputsRow);
+          if (!updateArray.length)
+            return showWarning(t('你似乎并没有修改什么'));
 
-        setLoading(true);
-        Promise.all(requestQueue)
-          .then((res) => {
-            if (res.includes(undefined)) {
-              return showError(requestQueue.length > 1 ? t('部分保存失败，请重试') : t('保存失败'));
-            }
-            
-            for (let i = 0; i < res.length; i++) {
-              if (!res[i].data.success) {
-                return showError(res[i].data.message);
-              }
-            }
-            
-            showSuccess(t('保存成功'));
-            props.refresh();
-          })
-          .catch(error => {
-            console.error('Unexpected error:', error);
-            showError(t('保存失败，请重试'));
-          })
-          .finally(() => {
-            setLoading(false);
+          const requestQueue = updateArray.map((item) => {
+            const value =
+              typeof inputs[item.key] === 'boolean'
+                ? String(inputs[item.key])
+                : inputs[item.key];
+            return API.put('/api/option/', { key: item.key, value });
           });
-      }).catch(() => {
-        showError(t('请检查输入'));
-      });
+
+          setLoading(true);
+          Promise.all(requestQueue)
+            .then((res) => {
+              if (res.includes(undefined)) {
+                return showError(
+                  requestQueue.length > 1
+                    ? t('部分保存失败，请重试')
+                    : t('保存失败'),
+                );
+              }
+
+              for (let i = 0; i < res.length; i++) {
+                if (!res[i].data.success) {
+                  return showError(res[i].data.message);
+                }
+              }
+
+              showSuccess(t('保存成功'));
+              props.refresh();
+            })
+            .catch((error) => {
+              console.error('Unexpected error:', error);
+              showError(t('保存失败，请重试'));
+            })
+            .finally(() => {
+              setLoading(false);
+            });
+        })
+        .catch(() => {
+          showError(t('请检查输入'));
+        });
     } catch (error) {
       showError(t('请检查输入'));
       console.error(error);
@@ -102,11 +119,13 @@ export default function ModelRatioSettings(props) {
       >
         <Form.Section>
           <Row gutter={16}>
-            <Col span={16}>
+            <Col xs={24} sm={16}>
               <Form.TextArea
                 label={t('模型固定价格')}
                 extraText={t('一次调用消耗多少刀，优先级大于模型倍率')}
-                placeholder={t('为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀')}
+                placeholder={t(
+                  '为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀',
+                )}
                 field={'ModelPrice'}
                 autosize={{ minRows: 6, maxRows: 12 }}
                 trigger='blur'
@@ -114,15 +133,17 @@ export default function ModelRatioSettings(props) {
                 rules={[
                   {
                     validator: (rule, value) => verifyJSON(value),
-                    message: '不是合法的 JSON 字符串'
-                  }
+                    message: '不是合法的 JSON 字符串',
+                  },
                 ]}
-                onChange={(value) => setInputs({ ...inputs, ModelPrice: value })}
+                onChange={(value) =>
+                  setInputs({ ...inputs, ModelPrice: value })
+                }
               />
             </Col>
           </Row>
           <Row gutter={16}>
-            <Col span={16}>
+            <Col xs={24} sm={16}>
               <Form.TextArea
                 label={t('模型倍率')}
                 placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
@@ -133,15 +154,17 @@ export default function ModelRatioSettings(props) {
                 rules={[
                   {
                     validator: (rule, value) => verifyJSON(value),
-                    message: '不是合法的 JSON 字符串'
-                  }
+                    message: '不是合法的 JSON 字符串',
+                  },
                 ]}
-                onChange={(value) => setInputs({ ...inputs, ModelRatio: value })}
+                onChange={(value) =>
+                  setInputs({ ...inputs, ModelRatio: value })
+                }
               />
             </Col>
           </Row>
           <Row gutter={16}>
-            <Col span={16}>
+            <Col xs={24} sm={16}>
               <Form.TextArea
                 label={t('提示缓存倍率')}
                 placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
@@ -152,15 +175,17 @@ export default function ModelRatioSettings(props) {
                 rules={[
                   {
                     validator: (rule, value) => verifyJSON(value),
-                    message: '不是合法的 JSON 字符串'
-                  }
+                    message: '不是合法的 JSON 字符串',
+                  },
                 ]}
-                onChange={(value) => setInputs({ ...inputs, CacheRatio: value })}
+                onChange={(value) =>
+                  setInputs({ ...inputs, CacheRatio: value })
+                }
               />
             </Col>
           </Row>
           <Row gutter={16}>
-            <Col span={16}>
+            <Col xs={24} sm={16}>
               <Form.TextArea
                 label={t('模型补全倍率（仅对自定义模型有效）')}
                 extraText={t('仅对自定义模型有效')}
@@ -172,10 +197,12 @@ export default function ModelRatioSettings(props) {
                 rules={[
                   {
                     validator: (rule, value) => verifyJSON(value),
-                    message: '不是合法的 JSON 字符串'
-                  }
+                    message: '不是合法的 JSON 字符串',
+                  },
                 ]}
-                onChange={(value) => setInputs({ ...inputs, CompletionRatio: value })}
+                onChange={(value) =>
+                  setInputs({ ...inputs, CompletionRatio: value })
+                }
               />
             </Col>
           </Row>
@@ -195,4 +222,4 @@ export default function ModelRatioSettings(props) {
       </Space>
     </Spin>
   );
-} 
+}

web/src/pages/Setting/Operation/ModelRationNotSetEditor.js

@@ -1,6 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Table, Button, Input, Modal, Form, Space, Typography, Radio, Notification } from '@douyinfe/semi-ui';
-import { IconDelete, IconPlus, IconSearch, IconSave, IconBolt } from '@douyinfe/semi-icons';
+import {
+  Table,
+  Button,
+  Input,
+  Modal,
+  Form,
+  Space,
+  Typography,
+  Radio,
+  Notification,
+} from '@douyinfe/semi-ui';
+import {
+  IconDelete,
+  IconPlus,
+  IconSearch,
+  IconSave,
+  IconBolt,
+} from '@douyinfe/semi-icons';
 import { showError, showSuccess } from '../../../helpers';
 import { API } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +36,8 @@ export default function ModelRatioNotSetEditor(props) {
   const [batchFillType, setBatchFillType] = useState('ratio');
   const [batchFillValue, setBatchFillValue] = useState('');
   const [batchRatioValue, setBatchRatioValue] = useState('');
-  const [batchCompletionRatioValue, setBatchCompletionRatioValue] = useState('');
+  const [batchCompletionRatioValue, setBatchCompletionRatioValue] =
+    useState('');
   const { Text } = Typography;
   // 定义可选的每页显示条数
   const pageSizeOptions = [10, 20, 50, 100];
@@ -38,7 +55,7 @@ export default function ModelRatioNotSetEditor(props) {
       console.error(t('获取启用模型失败:'), error);
       showError(t('获取启用模型失败'));
     }
-  }
+  };
 
   useEffect(() => {
     // 获取所有启用的模型
@@ -52,20 +69,20 @@ export default function ModelRatioNotSetEditor(props) {
       const completionRatio = JSON.parse(props.options.CompletionRatio || '{}');
 
       // 找出所有未设置价格和倍率的模型
-      const unsetModels = enabledModels.filter(modelName => {
+      const unsetModels = enabledModels.filter((modelName) => {
         const hasPrice = modelPrice[modelName] !== undefined;
         const hasRatio = modelRatio[modelName] !== undefined;
-        
+
         // 如果模型没有价格或者没有倍率设置，则显示
         return !hasPrice && !hasRatio;
       });
 
       // 创建模型数据
-      const modelData = unsetModels.map(name => ({
+      const modelData = unsetModels.map((name) => ({
         name,
         price: modelPrice[name] || '',
         ratio: modelRatio[name] || '',
-        completionRatio: completionRatio[name] || ''
+        completionRatio: completionRatio[name] || '',
       }));
 
       setModels(modelData);
@@ -94,8 +111,10 @@ export default function ModelRatioNotSetEditor(props) {
   };
 
   // 在 return 语句之前，先处理过滤和分页逻辑
-  const filteredModels = models.filter(model =>
-    searchText ? model.name.toLowerCase().includes(searchText.toLowerCase()) : true
+  const filteredModels = models.filter((model) =>
+    searchText
+      ? model.name.toLowerCase().includes(searchText.toLowerCase())
+      : true,
   );
 
   // 然后基于过滤后的数据计算分页数据
@@ -106,19 +125,23 @@ export default function ModelRatioNotSetEditor(props) {
     const output = {
       ModelPrice: JSON.parse(props.options.ModelPrice || '{}'),
       ModelRatio: JSON.parse(props.options.ModelRatio || '{}'),
-      CompletionRatio: JSON.parse(props.options.CompletionRatio || '{}')
+      CompletionRatio: JSON.parse(props.options.CompletionRatio || '{}'),
     };
 
     try {
       // 数据转换 - 只处理已修改的模型
-      models.forEach(model => {
+      models.forEach((model) => {
         // 只有当用户设置了值时才更新
         if (model.price !== '') {
           // 如果价格不为空，则转换为浮点数，忽略倍率参数
           output.ModelPrice[model.name] = parseFloat(model.price);
         } else {
-          if (model.ratio !== '') output.ModelRatio[model.name] = parseFloat(model.ratio);
-          if (model.completionRatio !== '') output.CompletionRatio[model.name] = parseFloat(model.completionRatio);
+          if (model.ratio !== '')
+            output.ModelRatio[model.name] = parseFloat(model.ratio);
+          if (model.completionRatio !== '')
+            output.CompletionRatio[model.name] = parseFloat(
+              model.completionRatio,
+            );
         }
       });
 
@@ -126,13 +149,13 @@ export default function ModelRatioNotSetEditor(props) {
       const finalOutput = {
         ModelPrice: JSON.stringify(output.ModelPrice, null, 2),
         ModelRatio: JSON.stringify(output.ModelRatio, null, 2),
-        CompletionRatio: JSON.stringify(output.CompletionRatio, null, 2)
+        CompletionRatio: JSON.stringify(output.CompletionRatio, null, 2),
       };
 
       const requestQueue = Object.entries(finalOutput).map(([key, value]) => {
         return API.put('/api/option/', {
           key,
-          value
+          value,
         });
       });
 
@@ -159,7 +182,6 @@ export default function ModelRatioNotSetEditor(props) {
       props.refresh();
       // 重新获取未设置的模型
       getAllEnabledModels();
-
     } catch (error) {
       console.error(t('保存失败:'), error);
       showError(t('保存失败，请重试'));
@@ -182,9 +204,9 @@ export default function ModelRatioNotSetEditor(props) {
         <Input
           value={text}
           placeholder={t('按量计费')}
-          onChange={value => updateModel(record.name, 'price', value)}
+          onChange={(value) => updateModel(record.name, 'price', value)}
         />
-      )
+      ),
     },
     {
       title: t('模型倍率'),
@@ -195,9 +217,9 @@ export default function ModelRatioNotSetEditor(props) {
           value={text}
           placeholder={record.price !== '' ? t('模型倍率') : t('输入模型倍率')}
           disabled={record.price !== ''}
-          onChange={value => updateModel(record.name, 'ratio', value)}
+          onChange={(value) => updateModel(record.name, 'ratio', value)}
         />
-      )
+      ),
     },
     {
       title: t('补全倍率'),
@@ -208,10 +230,12 @@ export default function ModelRatioNotSetEditor(props) {
           value={text}
           placeholder={record.price !== '' ? t('补全倍率') : t('输入补全倍率')}
           disabled={record.price !== ''}
-          onChange={value => updateModel(record.name, 'completionRatio', value)}
+          onChange={(value) =>
+            updateModel(record.name, 'completionRatio', value)
+          }
         />
-      )
-    }
+      ),
+    },
   ];
 
   const updateModel = (name, field, value) => {
@@ -219,27 +243,28 @@ export default function ModelRatioNotSetEditor(props) {
       showError(t('请输入数字'));
       return;
     }
-    setModels(prev =>
-      prev.map(model =>
-        model.name === name
-          ? { ...model, [field]: value }
-          : model
-      )
+    setModels((prev) =>
+      prev.map((model) =>
+        model.name === name ? { ...model, [field]: value } : model,
+      ),
     );
   };
 
   const addModel = (values) => {
     // 检查模型名称是否存在, 如果存在则拒绝添加
-    if (models.some(model => model.name === values.name)) {
+    if (models.some((model) => model.name === values.name)) {
       showError(t('模型名称已存在'));
       return;
     }
-    setModels(prev => [{
-      name: values.name,
-      price: values.price || '',
-      ratio: values.ratio || '',
-      completionRatio: values.completionRatio || ''
-    }, ...prev]);
+    setModels((prev) => [
+      {
+        name: values.name,
+        price: values.price || '',
+        ratio: values.ratio || '',
+        completionRatio: values.completionRatio || '',
+      },
+      ...prev,
+    ]);
     setVisible(false);
     showSuccess(t('添加成功'));
   };
@@ -272,39 +297,39 @@ export default function ModelRatioNotSetEditor(props) {
     }
 
     // 根据选择的类型批量更新模型
-    setModels(prev => 
-      prev.map(model => {
+    setModels((prev) =>
+      prev.map((model) => {
         if (selectedRowKeys.includes(model.name)) {
           if (batchFillType === 'price') {
             return {
               ...model,
               price: batchFillValue,
               ratio: '',
-              completionRatio: ''
+              completionRatio: '',
             };
           } else if (batchFillType === 'ratio') {
             return {
               ...model,
               price: '',
-              ratio: batchFillValue
+              ratio: batchFillValue,
             };
           } else if (batchFillType === 'completionRatio') {
             return {
               ...model,
               price: '',
-              completionRatio: batchFillValue
+              completionRatio: batchFillValue,
             };
           } else if (batchFillType === 'bothRatio') {
             return {
               ...model,
               price: '',
               ratio: batchRatioValue,
-              completionRatio: batchCompletionRatioValue
+              completionRatio: batchCompletionRatioValue,
             };
           }
         }
         return model;
-      })
+      }),
     );
 
     setBatchVisible(false);
@@ -312,9 +337,14 @@ export default function ModelRatioNotSetEditor(props) {
       title: t('批量设置成功'),
       content: t('已为 {{count}} 个模型设置{{type}}', {
         count: selectedRowKeys.length,
-        type: batchFillType === 'price' ? t('固定价格') : 
-              batchFillType === 'ratio' ? t('模型倍率') : 
-              batchFillType === 'completionRatio' ? t('补全倍率') : t('模型倍率和补全倍率')
+        type:
+          batchFillType === 'price'
+            ? t('固定价格')
+            : batchFillType === 'ratio'
+              ? t('模型倍率')
+              : batchFillType === 'completionRatio'
+                ? t('补全倍率')
+                : t('模型倍率和补全倍率'),
       }),
       duration: 3,
     });
@@ -323,7 +353,7 @@ export default function ModelRatioNotSetEditor(props) {
   const handleBatchTypeChange = (value) => {
     console.log(t('Changing batch type to:'), value);
     setBatchFillType(value);
-    
+
     // 切换类型时清空对应的值
     if (value !== 'bothRatio') {
       setBatchFillValue('');
@@ -342,56 +372,63 @@ export default function ModelRatioNotSetEditor(props) {
 
   return (
     <>
-      <Space vertical align="start" style={{ width: '100%' }}>
+      <Space vertical align='start' style={{ width: '100%' }}>
         <Space>
           <Button icon={<IconPlus />} onClick={() => setVisible(true)}>
             {t('添加模型')}
           </Button>
-          <Button 
-            icon={<IconBolt />} 
-            type="secondary"
+          <Button
+            icon={<IconBolt />}
+            type='secondary'
             onClick={() => setBatchVisible(true)}
             disabled={selectedRowKeys.length === 0}
           >
             {t('批量设置')} ({selectedRowKeys.length})
           </Button>
-          <Button type="primary" icon={<IconSave />} onClick={SubmitData} loading={loading}>
+          <Button
+            type='primary'
+            icon={<IconSave />}
+            onClick={SubmitData}
+            loading={loading}
+          >
             {t('应用更改')}
           </Button>
           <Input
             prefix={<IconSearch />}
             placeholder={t('搜索模型名称')}
             value={searchText}
-            onChange={value => {
-              setSearchText(value)
+            onChange={(value) => {
+              setSearchText(value);
               setCurrentPage(1);
             }}
             style={{ width: 200 }}
           />
         </Space>
 
-        <Text>{t('此页面仅显示未设置价格或倍率的模型，设置后将自动从列表中移除')}</Text>
-        
+        <Text>
+          {t('此页面仅显示未设置价格或倍率的模型，设置后将自动从列表中移除')}
+        </Text>
+
         <Table
           columns={columns}
           dataSource={pagedData}
           rowSelection={rowSelection}
-          rowKey="name"
+          rowKey='name'
           pagination={{
             currentPage: currentPage,
             pageSize: pageSize,
             total: filteredModels.length,
-            onPageChange: page => setCurrentPage(page),
+            onPageChange: (page) => setCurrentPage(page),
             onPageSizeChange: handlePageSizeChange,
             pageSizeOptions: pageSizeOptions,
             formatPageText: (page) =>
               t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
                 start: page.currentStart,
                 end: page.currentEnd,
-                total: filteredModels.length
+                total: filteredModels.length,
               }),
             showTotal: true,
-            showSizeChanger: true
+            showSizeChanger: true,
           }}
           empty={
             <div style={{ textAlign: 'center', padding: '20px' }}>
@@ -412,45 +449,61 @@ export default function ModelRatioNotSetEditor(props) {
       >
         <Form>
           <Form.Input
-            field="name"
+            field='name'
             label={t('模型名称')}
-            placeholder="strawberry"
+            placeholder='strawberry'
             required
-            onChange={value => setCurrentModel(prev => ({ ...prev, name: value }))}
+            onChange={(value) =>
+              setCurrentModel((prev) => ({ ...prev, name: value }))
+            }
           />
           <Form.Switch
-            field="priceMode"
-            label={<>{t('定价模式')}：{currentModel?.priceMode ? t("固定价格") : t("倍率模式")}</>}
-            onChange={checked => {
-              setCurrentModel(prev => ({
+            field='priceMode'
+            label={
+              <>
+                {t('定价模式')}：
+                {currentModel?.priceMode ? t('固定价格') : t('倍率模式')}
+              </>
+            }
+            onChange={(checked) => {
+              setCurrentModel((prev) => ({
                 ...prev,
                 price: '',
                 ratio: '',
                 completionRatio: '',
-                priceMode: checked
+                priceMode: checked,
               }));
             }}
           />
           {currentModel?.priceMode ? (
             <Form.Input
-              field="price"
+              field='price'
               label={t('固定价格(每次)')}
               placeholder={t('输入每次价格')}
-              onChange={value => setCurrentModel(prev => ({ ...prev, price: value }))}
+              onChange={(value) =>
+                setCurrentModel((prev) => ({ ...prev, price: value }))
+              }
             />
           ) : (
             <>
               <Form.Input
-                field="ratio"
+                field='ratio'
                 label={t('模型倍率')}
                 placeholder={t('输入模型倍率')}
-                onChange={value => setCurrentModel(prev => ({ ...prev, ratio: value }))}
+                onChange={(value) =>
+                  setCurrentModel((prev) => ({ ...prev, ratio: value }))
+                }
               />
               <Form.Input
-                field="completionRatio"
+                field='completionRatio'
                 label={t('补全倍率')}
                 placeholder={t('输入补全价格')}
-                onChange={value => setCurrentModel(prev => ({ ...prev, completionRatio: value }))}
+                onChange={(value) =>
+                  setCurrentModel((prev) => ({
+                    ...prev,
+                    completionRatio: value,
+                  }))
+                }
               />
             </>
           )}
@@ -496,50 +549,56 @@ export default function ModelRatioNotSetEditor(props) {
               </Space>
             </div>
           </Form.Section>
-          
+
           {batchFillType === 'bothRatio' ? (
             <>
               <Form.Input
-                field="batchRatioValue"
+                field='batchRatioValue'
                 label={t('模型倍率值')}
                 placeholder={t('请输入模型倍率')}
                 value={batchRatioValue}
-                onChange={value => setBatchRatioValue(value)}
+                onChange={(value) => setBatchRatioValue(value)}
               />
               <Form.Input
-                field="batchCompletionRatioValue"
+                field='batchCompletionRatioValue'
                 label={t('补全倍率值')}
                 placeholder={t('请输入补全倍率')}
                 value={batchCompletionRatioValue}
-                onChange={value => setBatchCompletionRatioValue(value)}
+                onChange={(value) => setBatchCompletionRatioValue(value)}
               />
             </>
           ) : (
             <Form.Input
-              field="batchFillValue"
+              field='batchFillValue'
               label={
-                batchFillType === 'price' 
-                  ? t('固定价格值') 
+                batchFillType === 'price'
+                  ? t('固定价格值')
                   : batchFillType === 'ratio'
                     ? t('模型倍率值')
                     : t('补全倍率值')
               }
               placeholder={t('请输入数值')}
               value={batchFillValue}
-              onChange={value => setBatchFillValue(value)}
+              onChange={(value) => setBatchFillValue(value)}
             />
           )}
-          
-          <Text type="tertiary">
-            {t('将为选中的 ')} <Text strong>{selectedRowKeys.length}</Text> {t(' 个模型设置相同的值')}
+
+          <Text type='tertiary'>
+            {t('将为选中的 ')} <Text strong>{selectedRowKeys.length}</Text>{' '}
+            {t(' 个模型设置相同的值')}
           </Text>
           <div style={{ marginTop: '8px' }}>
-            <Text type="tertiary">
-              {t('当前设置类型: ')} <Text strong>{
-                batchFillType === 'price' ? t('固定价格') : 
-                batchFillType === 'ratio' ? t('模型倍率') : 
-                batchFillType === 'completionRatio' ? t('补全倍率') : t('模型倍率和补全倍率')
-              }</Text>
+            <Text type='tertiary'>
+              {t('当前设置类型: ')}{' '}
+              <Text strong>
+                {batchFillType === 'price'
+                  ? t('固定价格')
+                  : batchFillType === 'ratio'
+                    ? t('模型倍率')
+                    : batchFillType === 'completionRatio'
+                      ? t('补全倍率')
+                      : t('模型倍率和补全倍率')}
+              </Text>
             </Text>
           </div>
         </Form>

web/src/pages/Setting/Operation/ModelSettingsVisualEditor.js

@@ -1,10 +1,29 @@
 // ModelSettingsVisualEditor.js
-import React, { useEffect, useState } from 'react';
-import { Table, Button, Input, Modal, Form, Space } from '@douyinfe/semi-ui';
-import { IconDelete, IconPlus, IconSearch, IconSave } from '@douyinfe/semi-icons';
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import {
+  Table,
+  Button,
+  Input,
+  Modal,
+  Form,
+  Space,
+  RadioGroup,
+  Radio,
+  Tabs,
+  TabPane,
+} from '@douyinfe/semi-ui';
+import {
+  IconDelete,
+  IconPlus,
+  IconSearch,
+  IconSave,
+  IconEdit,
+} from '@douyinfe/semi-icons';
 import { showError, showSuccess } from '../../../helpers';
 import { API } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { StatusContext } from '../../../context/Status/index.js';
+import { getQuotaPerUnit } from '../../../helpers/render.js';
 
 export default function ModelSettingsVisualEditor(props) {
   const { t } = useTranslation();
@@ -14,7 +33,11 @@ export default function ModelSettingsVisualEditor(props) {
   const [searchText, setSearchText] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [loading, setLoading] = useState(false);
+  const [pricingMode, setPricingMode] = useState('per-token'); // 'per-token' or 'per-request'
+  const [pricingSubMode, setPricingSubMode] = useState('ratio'); // 'ratio' or 'token-price'
+  const formRef = useRef(null);
   const pageSize = 10;
+  const quotaPerUnit = getQuotaPerUnit();
 
   useEffect(() => {
     try {
@@ -26,14 +49,15 @@ export default function ModelSettingsVisualEditor(props) {
       const modelNames = new Set([
         ...Object.keys(modelPrice),
         ...Object.keys(modelRatio),
-        ...Object.keys(completionRatio)
+        ...Object.keys(completionRatio),
       ]);
 
-      const modelData = Array.from(modelNames).map(name => ({
+      const modelData = Array.from(modelNames).map((name) => ({
         name,
         price: modelPrice[name] === undefined ? '' : modelPrice[name],
         ratio: modelRatio[name] === undefined ? '' : modelRatio[name],
-        completionRatio: completionRatio[name] === undefined ? '' : completionRatio[name]
+        completionRatio:
+          completionRatio[name] === undefined ? '' : completionRatio[name],
       }));
 
       setModels(modelData);
@@ -50,8 +74,10 @@ export default function ModelSettingsVisualEditor(props) {
   };
 
   // 在 return 语句之前，先处理过滤和分页逻辑
-  const filteredModels = models.filter(model =>
-    searchText ? model.name.toLowerCase().includes(searchText.toLowerCase()) : true
+  const filteredModels = models.filter((model) =>
+    searchText
+      ? model.name.toLowerCase().includes(searchText.toLowerCase())
+      : true,
   );
 
   // 然后基于过滤后的数据计算分页数据
@@ -62,20 +88,24 @@ export default function ModelSettingsVisualEditor(props) {
     const output = {
       ModelPrice: {},
       ModelRatio: {},
-      CompletionRatio: {}
+      CompletionRatio: {},
     };
     let currentConvertModelName = '';
 
     try {
       // 数据转换
-      models.forEach(model => {
+      models.forEach((model) => {
         currentConvertModelName = model.name;
         if (model.price !== '') {
           // 如果价格不为空，则转换为浮点数，忽略倍率参数
-          output.ModelPrice[model.name] = parseFloat(model.price)
+          output.ModelPrice[model.name] = parseFloat(model.price);
         } else {
-          if (model.ratio !== '') output.ModelRatio[model.name] = parseFloat(model.ratio);
-          if (model.completionRatio !== '') output.CompletionRatio[model.name] = parseFloat(model.completionRatio);
+          if (model.ratio !== '')
+            output.ModelRatio[model.name] = parseFloat(model.ratio);
+          if (model.completionRatio !== '')
+            output.CompletionRatio[model.name] = parseFloat(
+              model.completionRatio,
+            );
         }
       });
 
@@ -83,13 +113,13 @@ export default function ModelSettingsVisualEditor(props) {
       const finalOutput = {
         ModelPrice: JSON.stringify(output.ModelPrice, null, 2),
         ModelRatio: JSON.stringify(output.ModelRatio, null, 2),
-        CompletionRatio: JSON.stringify(output.CompletionRatio, null, 2)
+        CompletionRatio: JSON.stringify(output.CompletionRatio, null, 2),
       };
 
       const requestQueue = Object.entries(finalOutput).map(([key, value]) => {
         return API.put('/api/option/', {
           key,
-          value
+          value,
         });
       });
 
@@ -114,7 +144,6 @@ export default function ModelSettingsVisualEditor(props) {
 
       showSuccess('保存成功');
       props.refresh();
-
     } catch (error) {
       console.error('保存失败:', error);
       showError('保存失败，请重试');
@@ -137,9 +166,9 @@ export default function ModelSettingsVisualEditor(props) {
         <Input
           value={text}
           placeholder={t('按量计费')}
-          onChange={value => updateModel(record.name, 'price', value)}
+          onChange={(value) => updateModel(record.name, 'price', value)}
         />
-      )
+      ),
     },
     {
       title: t('模型倍率'),
@@ -150,9 +179,9 @@ export default function ModelSettingsVisualEditor(props) {
           value={text}
           placeholder={record.price !== '' ? t('模型倍率') : t('默认补全倍率')}
           disabled={record.price !== ''}
-          onChange={value => updateModel(record.name, 'ratio', value)}
+          onChange={(value) => updateModel(record.name, 'ratio', value)}
         />
-      )
+      ),
     },
     {
       title: t('补全倍率'),
@@ -163,21 +192,30 @@ export default function ModelSettingsVisualEditor(props) {
           value={text}
           placeholder={record.price !== '' ? t('补全倍率') : t('默认补全倍率')}
           disabled={record.price !== ''}
-          onChange={value => updateModel(record.name, 'completionRatio', value)}
+          onChange={(value) =>
+            updateModel(record.name, 'completionRatio', value)
+          }
         />
-      )
+      ),
     },
     {
       title: t('操作'),
       key: 'action',
       render: (_, record) => (
-        <Button
-          icon={<IconDelete />}
-          type="danger"
-          onClick={() => deleteModel(record.name)}
-        />
-      )
-    }
+        <Space>
+          <Button
+            type='primary'
+            icon={<IconEdit />}
+            onClick={() => editModel(record)}
+          ></Button>
+          <Button
+            icon={<IconDelete />}
+            type='danger'
+            onClick={() => deleteModel(record.name)}
+          />
+        </Space>
+      ),
+    },
   ];
 
   const updateModel = (name, field, value) => {
@@ -185,51 +223,211 @@ export default function ModelSettingsVisualEditor(props) {
       showError('请输入数字');
       return;
     }
-    setModels(prev =>
-      prev.map(model =>
-        model.name === name
-          ? { ...model, [field]: value }
-          : model
-      )
+    setModels((prev) =>
+      prev.map((model) =>
+        model.name === name ? { ...model, [field]: value } : model,
+      ),
     );
   };
 
   const deleteModel = (name) => {
-    setModels(prev => prev.filter(model => model.name !== name));
-  };
-  const addModel = (values) => {
-    // 检查模型名称是否存在, 如果存在则拒绝添加
-    if (models.some(model => model.name === values.name)) {
-      showError('模型名称已存在');
-      return;
-    }
-    setModels(prev => [{
-      name: values.name,
-      price: values.price || '',
-      ratio: values.ratio || '',
-      completionRatio: values.completionRatio || ''
-    }, ...prev]);
-    setVisible(false);
-    showSuccess('添加成功');
+    setModels((prev) => prev.filter((model) => model.name !== name));
   };
 
+  const calculateRatioFromTokenPrice = (tokenPrice) => {
+    return tokenPrice / 2;
+  };
+
+  const calculateCompletionRatioFromPrices = (
+    modelTokenPrice,
+    completionTokenPrice,
+  ) => {
+    if (!modelTokenPrice || modelTokenPrice === '0') {
+      showError('模型价格不能为0');
+      return '';
+    }
+    return completionTokenPrice / modelTokenPrice;
+  };
+
+  const handleTokenPriceChange = (value) => {
+    // Use a temporary variable to hold the new state
+    let newState = {
+      ...(currentModel || {}),
+      tokenPrice: value,
+      ratio: 0,
+    };
+
+    if (!isNaN(value) && value !== '') {
+      const tokenPrice = parseFloat(value);
+      const ratio = calculateRatioFromTokenPrice(tokenPrice);
+      newState.ratio = ratio;
+    }
+
+    // Set the state with the complete updated object
+    setCurrentModel(newState);
+  };
+
+  const handleCompletionTokenPriceChange = (value) => {
+    // Use a temporary variable to hold the new state
+    let newState = {
+      ...(currentModel || {}),
+      completionTokenPrice: value,
+      completionRatio: 0,
+    };
+
+    if (!isNaN(value) && value !== '' && currentModel?.tokenPrice) {
+      const completionTokenPrice = parseFloat(value);
+      const modelTokenPrice = parseFloat(currentModel.tokenPrice);
+
+      if (modelTokenPrice > 0) {
+        const completionRatio = calculateCompletionRatioFromPrices(
+          modelTokenPrice,
+          completionTokenPrice,
+        );
+        newState.completionRatio = completionRatio;
+      }
+    }
+
+    // Set the state with the complete updated object
+    setCurrentModel(newState);
+  };
+
+  const addOrUpdateModel = (values) => {
+    // Check if we're editing an existing model or adding a new one
+    const existingModelIndex = models.findIndex(
+      (model) => model.name === values.name,
+    );
+
+    if (existingModelIndex >= 0) {
+      // Update existing model
+      setModels((prev) =>
+        prev.map((model, index) =>
+          index === existingModelIndex
+            ? {
+                name: values.name,
+                price: values.price || '',
+                ratio: values.ratio || '',
+                completionRatio: values.completionRatio || '',
+              }
+            : model,
+        ),
+      );
+      setVisible(false);
+      showSuccess(t('更新成功'));
+    } else {
+      // Add new model
+      // Check if model name already exists
+      if (models.some((model) => model.name === values.name)) {
+        showError(t('模型名称已存在'));
+        return;
+      }
+
+      setModels((prev) => [
+        {
+          name: values.name,
+          price: values.price || '',
+          ratio: values.ratio || '',
+          completionRatio: values.completionRatio || '',
+        },
+        ...prev,
+      ]);
+      setVisible(false);
+      showSuccess(t('添加成功'));
+    }
+  };
+
+  const calculateTokenPriceFromRatio = (ratio) => {
+    return ratio * 2;
+  };
+
+  const resetModalState = () => {
+    setCurrentModel(null);
+    setPricingMode('per-token');
+    setPricingSubMode('ratio');
+  };
+
+  const editModel = (record) => {
+    // Determine which pricing mode to use based on the model's current configuration
+    let initialPricingMode = 'per-token';
+    let initialPricingSubMode = 'ratio';
+
+    if (record.price !== '') {
+      initialPricingMode = 'per-request';
+    } else {
+      initialPricingMode = 'per-token';
+      // We default to ratio mode, but could set to token-price if needed
+    }
+
+    // Set the pricing modes for the form
+    setPricingMode(initialPricingMode);
+    setPricingSubMode(initialPricingSubMode);
+
+    // Create a copy of the model data to avoid modifying the original
+    const modelCopy = { ...record };
+
+    // If the model has ratio data and we want to populate token price fields
+    if (record.ratio) {
+      modelCopy.tokenPrice = calculateTokenPriceFromRatio(
+        parseFloat(record.ratio),
+      ).toString();
+
+      if (record.completionRatio) {
+        modelCopy.completionTokenPrice = (
+          parseFloat(modelCopy.tokenPrice) * parseFloat(record.completionRatio)
+        ).toString();
+      }
+    }
+
+    // Set the current model
+    setCurrentModel(modelCopy);
+
+    // Open the modal
+    setVisible(true);
+
+    // Use setTimeout to ensure the form is rendered before setting values
+    setTimeout(() => {
+      if (formRef.current) {
+        // Update the form fields based on pricing mode
+        const formValues = {
+          name: modelCopy.name,
+        };
+
+        if (initialPricingMode === 'per-request') {
+          formValues.priceInput = modelCopy.price;
+        } else if (initialPricingMode === 'per-token') {
+          formValues.ratioInput = modelCopy.ratio;
+          formValues.completionRatioInput = modelCopy.completionRatio;
+          formValues.modelTokenPrice = modelCopy.tokenPrice;
+          formValues.completionTokenPrice = modelCopy.completionTokenPrice;
+        }
+
+        formRef.current.setValues(formValues);
+      }
+    }, 0);
+  };
 
   return (
     <>
-      <Space vertical align="start" style={{ width: '100%' }}>
+      <Space vertical align='start' style={{ width: '100%' }}>
         <Space>
-          <Button icon={<IconPlus />} onClick={() => setVisible(true)}>
+          <Button
+            icon={<IconPlus />}
+            onClick={() => {
+              resetModalState();
+              setVisible(true);
+            }}
+          >
             {t('添加模型')}
           </Button>
-          <Button type="primary" icon={<IconSave />} onClick={SubmitData}>
+          <Button type='primary' icon={<IconSave />} onClick={SubmitData}>
             {t('应用更改')}
           </Button>
           <Input
             prefix={<IconSearch />}
             placeholder={t('搜索模型名称')}
             value={searchText}
-            onChange={value => {
-              setSearchText(value)
+            onChange={(value) => {
+              setSearchText(value);
               setCurrentPage(1);
             }}
             style={{ width: 200 }}
@@ -242,70 +440,274 @@ export default function ModelSettingsVisualEditor(props) {
             currentPage: currentPage,
             pageSize: pageSize,
             total: filteredModels.length,
-            onPageChange: page => setCurrentPage(page),
+            onPageChange: (page) => setCurrentPage(page),
             formatPageText: (page) =>
               t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
                 start: page.currentStart,
                 end: page.currentEnd,
-                total: filteredModels.length
+                total: filteredModels.length,
               }),
             showTotal: true,
-            showSizeChanger: false
+            showSizeChanger: false,
           }}
         />
       </Space>
 
       <Modal
-        title={t('添加模型')}
+        title={
+          currentModel &&
+          currentModel.name &&
+          models.some((model) => model.name === currentModel.name)
+            ? t('编辑模型')
+            : t('添加模型')
+        }
         visible={visible}
-        onCancel={() => setVisible(false)}
+        onCancel={() => {
+          resetModalState();
+          setVisible(false);
+        }}
         onOk={() => {
-          currentModel && addModel(currentModel);
+          if (currentModel) {
+            // If we're in token price mode, make sure ratio values are properly set
+            const valuesToSave = { ...currentModel };
+
+            if (
+              pricingMode === 'per-token' &&
+              pricingSubMode === 'token-price' &&
+              currentModel.tokenPrice
+            ) {
+              // Calculate and set ratio from token price
+              const tokenPrice = parseFloat(currentModel.tokenPrice);
+              valuesToSave.ratio = (tokenPrice / 2).toString();
+
+              // Calculate and set completion ratio if both token prices are available
+              if (
+                currentModel.completionTokenPrice &&
+                currentModel.tokenPrice
+              ) {
+                const completionPrice = parseFloat(
+                  currentModel.completionTokenPrice,
+                );
+                const modelPrice = parseFloat(currentModel.tokenPrice);
+                if (modelPrice > 0) {
+                  valuesToSave.completionRatio = (
+                    completionPrice / modelPrice
+                  ).toString();
+                }
+              }
+            }
+
+            // Clear price if we're in per-token mode
+            if (pricingMode === 'per-token') {
+              valuesToSave.price = '';
+            } else {
+              // Clear ratios if we're in per-request mode
+              valuesToSave.ratio = '';
+              valuesToSave.completionRatio = '';
+            }
+
+            addOrUpdateModel(valuesToSave);
+          }
         }}
       >
-        <Form>
+        <Form getFormApi={(api) => (formRef.current = api)}>
           <Form.Input
-            field="name"
+            field='name'
             label={t('模型名称')}
-            placeholder="strawberry"
+            placeholder='strawberry'
             required
-            onChange={value => setCurrentModel(prev => ({ ...prev, name: value }))}
+            disabled={
+              currentModel &&
+              currentModel.name &&
+              models.some((model) => model.name === currentModel.name)
+            }
+            onChange={(value) =>
+              setCurrentModel((prev) => ({ ...prev, name: value }))
+            }
           />
-          <Form.Switch
-            field="priceMode"
-            label={<>{t('定价模式')}：{currentModel?.priceMode ? t("固定价格") : t("倍率模式")}</>}
-            onChange={checked => {
-              setCurrentModel(prev => ({
-                ...prev,
-                price: '',
-                ratio: '',
-                completionRatio: '',
-                priceMode: checked
-              }));
-            }}
-          />
-          {currentModel?.priceMode ? (
+
+          <Form.Section text={t('定价模式')}>
+            <div style={{ marginBottom: '16px' }}>
+              <RadioGroup
+                type='button'
+                value={pricingMode}
+                onChange={(e) => {
+                  const newMode = e.target.value;
+                  const oldMode = pricingMode;
+                  setPricingMode(newMode);
+
+                  // Instead of resetting all values, convert between modes
+                  if (currentModel) {
+                    const updatedModel = { ...currentModel };
+
+                    // Update formRef with converted values
+                    if (formRef.current) {
+                      const formValues = {
+                        name: updatedModel.name,
+                      };
+
+                      if (newMode === 'per-request') {
+                        formValues.priceInput = updatedModel.price || '';
+                      } else if (newMode === 'per-token') {
+                        formValues.ratioInput = updatedModel.ratio || '';
+                        formValues.completionRatioInput =
+                          updatedModel.completionRatio || '';
+                        formValues.modelTokenPrice =
+                          updatedModel.tokenPrice || '';
+                        formValues.completionTokenPrice =
+                          updatedModel.completionTokenPrice || '';
+                      }
+
+                      formRef.current.setValues(formValues);
+                    }
+
+                    // Update the model state
+                    setCurrentModel(updatedModel);
+                  }
+                }}
+              >
+                <Radio value='per-token'>{t('按量计费')}</Radio>
+                <Radio value='per-request'>{t('按次计费')}</Radio>
+              </RadioGroup>
+            </div>
+          </Form.Section>
+
+          {pricingMode === 'per-token' && (
+            <>
+              <Form.Section text={t('价格设置方式')}>
+                <div style={{ marginBottom: '16px' }}>
+                  <RadioGroup
+                    type='button'
+                    value={pricingSubMode}
+                    onChange={(e) => {
+                      const newSubMode = e.target.value;
+                      const oldSubMode = pricingSubMode;
+                      setPricingSubMode(newSubMode);
+
+                      // Handle conversion between submodes
+                      if (currentModel) {
+                        const updatedModel = { ...currentModel };
+
+                        // Convert between ratio and token price
+                        if (
+                          oldSubMode === 'ratio' &&
+                          newSubMode === 'token-price'
+                        ) {
+                          if (updatedModel.ratio) {
+                            updatedModel.tokenPrice =
+                              calculateTokenPriceFromRatio(
+                                parseFloat(updatedModel.ratio),
+                              ).toString();
+
+                            if (updatedModel.completionRatio) {
+                              updatedModel.completionTokenPrice = (
+                                parseFloat(updatedModel.tokenPrice) *
+                                parseFloat(updatedModel.completionRatio)
+                              ).toString();
+                            }
+                          }
+                        } else if (
+                          oldSubMode === 'token-price' &&
+                          newSubMode === 'ratio'
+                        ) {
+                          // Ratio values should already be calculated by the handlers
+                        }
+
+                        // Update the form values
+                        if (formRef.current) {
+                          const formValues = {};
+
+                          if (newSubMode === 'ratio') {
+                            formValues.ratioInput = updatedModel.ratio || '';
+                            formValues.completionRatioInput =
+                              updatedModel.completionRatio || '';
+                          } else if (newSubMode === 'token-price') {
+                            formValues.modelTokenPrice =
+                              updatedModel.tokenPrice || '';
+                            formValues.completionTokenPrice =
+                              updatedModel.completionTokenPrice || '';
+                          }
+
+                          formRef.current.setValues(formValues);
+                        }
+
+                        setCurrentModel(updatedModel);
+                      }
+                    }}
+                  >
+                    <Radio value='ratio'>{t('按倍率设置')}</Radio>
+                    <Radio value='token-price'>{t('按价格设置')}</Radio>
+                  </RadioGroup>
+                </div>
+              </Form.Section>
+
+              {pricingSubMode === 'ratio' && (
+                <>
+                  <Form.Input
+                    field='ratioInput'
+                    label={t('模型倍率')}
+                    placeholder={t('输入模型倍率')}
+                    onChange={(value) =>
+                      setCurrentModel((prev) => ({
+                        ...(prev || {}),
+                        ratio: value,
+                      }))
+                    }
+                    initValue={currentModel?.ratio || ''}
+                  />
+                  <Form.Input
+                    field='completionRatioInput'
+                    label={t('补全倍率')}
+                    placeholder={t('输入补全倍率')}
+                    onChange={(value) =>
+                      setCurrentModel((prev) => ({
+                        ...(prev || {}),
+                        completionRatio: value,
+                      }))
+                    }
+                    initValue={currentModel?.completionRatio || ''}
+                  />
+                </>
+              )}
+
+              {pricingSubMode === 'token-price' && (
+                <>
+                  <Form.Input
+                    field='modelTokenPrice'
+                    label={t('输入价格')}
+                    onChange={(value) => {
+                      handleTokenPriceChange(value);
+                    }}
+                    initValue={currentModel?.tokenPrice || ''}
+                    suffix={t('$/1M tokens')}
+                  />
+                  <Form.Input
+                    field='completionTokenPrice'
+                    label={t('输出价格')}
+                    onChange={(value) => {
+                      handleCompletionTokenPriceChange(value);
+                    }}
+                    initValue={currentModel?.completionTokenPrice || ''}
+                    suffix={t('$/1M tokens')}
+                  />
+                </>
+              )}
+            </>
+          )}
+
+          {pricingMode === 'per-request' && (
             <Form.Input
-              field="price"
+              field='priceInput'
               label={t('固定价格(每次)')}
               placeholder={t('输入每次价格')}
-              onChange={value => setCurrentModel(prev => ({ ...prev, price: value }))}
+              onChange={(value) =>
+                setCurrentModel((prev) => ({
+                  ...(prev || {}),
+                  price: value,
+                }))
+              }
+              initValue={currentModel?.price || ''}
             />
-          ) : (
-            <>
-              <Form.Input
-                field="ratio"
-                label={t('模型倍率')}
-                placeholder={t('输入模型倍率')}
-                onChange={value => setCurrentModel(prev => ({ ...prev, ratio: value }))}
-              />
-              <Form.Input
-                field="completionRatio"
-                label={t('补全倍率')}
-                placeholder={t('输入补全价格')}
-                onChange={value => setCurrentModel(prev => ({ ...prev, completionRatio: value }))}
-              />
-            </>
           )}
         </Form>
       </Modal>

web/src/pages/Setting/Operation/SettingsChats.js

@@ -1,5 +1,14 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Banner, Button, Col, Form, Popconfirm, Row, Space, Spin } from '@douyinfe/semi-ui';
+import {
+  Banner,
+  Button,
+  Col,
+  Form,
+  Popconfirm,
+  Row,
+  Space,
+  Spin,
+} from '@douyinfe/semi-ui';
 import {
   compareObjects,
   API,
@@ -7,7 +16,7 @@ import {
   showSuccess,
   showWarning,
   verifyJSON,
-  verifyJSONPromise
+  verifyJSONPromise,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +24,7 @@ export default function SettingsChats(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
-    Chats: "[]",
+    Chats: '[]',
   });
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
@@ -23,44 +32,48 @@ export default function SettingsChats(props) {
   async function onSubmit() {
     try {
       console.log('Starting validation...');
-      await refForm.current.validate().then(() => {
-        console.log('Validation passed');
-        const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-        const requestQueue = updateArray.map((item) => {
-          let value = '';
-          if (typeof inputs[item.key] === 'boolean') {
-            value = String(inputs[item.key]);
-          } else {
-            value = inputs[item.key];
-          }
-          return API.put('/api/option/', {
-            key: item.key,
-            value
-          });
-        });
-        setLoading(true);
-        Promise.all(requestQueue)
-          .then((res) => {
-            if (requestQueue.length === 1) {
-              if (res.includes(undefined)) return;
-            } else if (requestQueue.length > 1) {
-              if (res.includes(undefined))
-                return showError(t('部分保存失败，请重试'));
+      await refForm.current
+        .validate()
+        .then(() => {
+          console.log('Validation passed');
+          const updateArray = compareObjects(inputs, inputsRow);
+          if (!updateArray.length)
+            return showWarning(t('你似乎并没有修改什么'));
+          const requestQueue = updateArray.map((item) => {
+            let value = '';
+            if (typeof inputs[item.key] === 'boolean') {
+              value = String(inputs[item.key]);
+            } else {
+              value = inputs[item.key];
             }
-            showSuccess(t('保存成功'));
-            props.refresh();
-          })
-          .catch(() => {
-            showError(t('保存失败，请重试'));
-          })
-          .finally(() => {
-            setLoading(false);
+            return API.put('/api/option/', {
+              key: item.key,
+              value,
+            });
           });
-      }).catch((error) => {
-        console.error('Validation failed:', error);
-        showError(t('请检查输入'));
-      });
+          setLoading(true);
+          Promise.all(requestQueue)
+            .then((res) => {
+              if (requestQueue.length === 1) {
+                if (res.includes(undefined)) return;
+              } else if (requestQueue.length > 1) {
+                if (res.includes(undefined))
+                  return showError(t('部分保存失败，请重试'));
+              }
+              showSuccess(t('保存成功'));
+              props.refresh();
+            })
+            .catch(() => {
+              showError(t('保存失败，请重试'));
+            })
+            .finally(() => {
+              setLoading(false);
+            });
+        })
+        .catch((error) => {
+          console.error('Validation failed:', error);
+          showError(t('请检查输入'));
+        });
     } catch (error) {
       showError(t('请检查输入'));
       console.error(error);
@@ -109,11 +122,15 @@ export default function SettingsChats(props) {
         <Form.Section text={t('令牌聊天设置')}>
           <Banner
             type='warning'
-            description={t('必须将上方聊天链接全部设置为空，才能使用下方聊天设置功能')}
+            description={t(
+              '必须将上方聊天链接全部设置为空，才能使用下方聊天设置功能',
+            )}
           />
           <Banner
             type='info'
-            description={t('链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1')}
+            description={t(
+              '链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1',
+            )}
           />
           <Form.TextArea
             label={t('聊天配置')}
@@ -128,22 +145,20 @@ export default function SettingsChats(props) {
                 validator: (rule, value) => {
                   return verifyJSON(value);
                 },
-                message: t('不是合法的 JSON 字符串')
-              }
+                message: t('不是合法的 JSON 字符串'),
+              },
             ]}
             onChange={(value) =>
               setInputs({
                 ...inputs,
-                Chats: value
+                Chats: value,
               })
             }
           />
         </Form.Section>
       </Form>
       <Space>
-        <Button onClick={onSubmit}>
-          {t('保存聊天设置')}
-        </Button>
+        <Button onClick={onSubmit}>{t('保存聊天设置')}</Button>
       </Space>
     </Spin>
   );

web/src/pages/Setting/Operation/SettingsCreditLimit.js

@@ -42,7 +42,8 @@ export default function SettingsCreditLimit(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -76,7 +77,7 @@ export default function SettingsCreditLimit(props) {
         >
           <Form.Section text={t('额度设置')}>
             <Row gutter={16}>
-              <Col span={6}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('新用户初始额度')}
                   field={'QuotaForNewUser'}
@@ -92,7 +93,7 @@ export default function SettingsCreditLimit(props) {
                   }
                 />
               </Col>
-              <Col span={6}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('请求预扣费额度')}
                   field={'PreConsumedQuota'}
@@ -109,7 +110,7 @@ export default function SettingsCreditLimit(props) {
                   }
                 />
               </Col>
-              <Col span={6}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('邀请新用户奖励额度')}
                   field={'QuotaForInviter'}
@@ -126,7 +127,9 @@ export default function SettingsCreditLimit(props) {
                   }
                 />
               </Col>
-              <Col span={6}>
+            </Row>
+            <Row>
+              <Col xs={24} sm={12} md={8} lg={8} xl={6}>
                 <Form.InputNumber
                   label={t('新用户使用邀请码奖励额度')}
                   field={'QuotaForInvitee'}

web/src/pages/Setting/Operation/SettingsDataDashboard.js

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 
 export default function DataDashboard(props) {
   const { t } = useTranslation();
-  
+
   const optionsDataExportDefaultTime = [
     { key: 'hour', label: t('小时'), value: 'hour' },
     { key: 'day', label: t('天'), value: 'day' },
@@ -47,7 +47,8 @@ export default function DataDashboard(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -86,7 +87,7 @@ export default function DataDashboard(props) {
         >
           <Form.Section text={t('数据看板设置')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'DataExportEnabled'}
                   label={t('启用数据看板（实验性）')}
@@ -103,7 +104,7 @@ export default function DataDashboard(props) {
               </Col>
             </Row>
             <Row>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('数据看板更新间隔')}
                   step={1}
@@ -120,7 +121,7 @@ export default function DataDashboard(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Select
                   label={t('数据看板默认时间粒度')}
                   optionList={optionsDataExportDefaultTime}

web/src/pages/Setting/Operation/SettingsDrawing.js

@@ -44,7 +44,8 @@ export default function SettingsDrawing(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -80,7 +81,7 @@ export default function SettingsDrawing(props) {
         >
           <Form.Section text={t('绘图设置')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'DrawingEnabled'}
                   label={t('启用绘图功能')}
@@ -95,7 +96,7 @@ export default function SettingsDrawing(props) {
                   }}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'MjNotifyEnabled'}
                   label={t('允许回调（会泄露服务器 IP 地址）')}
@@ -110,7 +111,7 @@ export default function SettingsDrawing(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'MjAccountFilterEnabled'}
                   label={t('允许 AccountFilter 参数')}
@@ -125,7 +126,7 @@ export default function SettingsDrawing(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'MjForwardUrlEnabled'}
                   label={t('开启之后将上游地址替换为服务器地址')}
@@ -140,13 +141,14 @@ export default function SettingsDrawing(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'MjModeClearEnabled'}
                   label={
                     <>
                       {t('开启之后会清除用户提示词中的')} <Tag>--fast</Tag> 、
-                      <Tag>--relax</Tag> {t('以及')} <Tag>--turbo</Tag> {t('参数')}
+                      <Tag>--relax</Tag> {t('以及')} <Tag>--turbo</Tag>{' '}
+                      {t('参数')}
                     </>
                   }
                   size='default'
@@ -160,7 +162,7 @@ export default function SettingsDrawing(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'MjActionCheckSuccessEnabled'}
                   label={t('检测必须等待绘图成功才能进行放大等操作')}

web/src/pages/Setting/Operation/SettingsGeneral.js

@@ -1,5 +1,14 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Banner, Button, Col, Form, Row, Spin, Collapse, Modal } from '@douyinfe/semi-ui';
+import {
+  Banner,
+  Button,
+  Col,
+  Form,
+  Row,
+  Spin,
+  Collapse,
+  Modal,
+} from '@douyinfe/semi-ui';
 import {
   compareObjects,
   API,
@@ -27,9 +36,10 @@ export default function GeneralSettings(props) {
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
 
-  function onChange(value, e) {
-    const name = e.target.id;
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  function handleFieldChange(fieldName) {
+    return (value) => {
+      setInputs((inputs) => ({ ...inputs, [fieldName]: value }));
+    };
   }
 
   function onSubmit() {
@@ -53,7 +63,8 @@ export default function GeneralSettings(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -92,112 +103,92 @@ export default function GeneralSettings(props) {
         >
           <Form.Section text={t('通用设置')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Input
                   field={'TopUpLink'}
                   label={t('充值链接')}
                   initValue={''}
                   placeholder={t('例如发卡网站的购买链接')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('TopUpLink')}
                   showClear
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Input
                   field={'general_setting.docs_link'}
                   label={t('文档地址')}
                   initValue={''}
                   placeholder={t('例如 https://docs.newapi.pro')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('general_setting.docs_link')}
                   showClear
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Input
                   field={'QuotaPerUnit'}
                   label={t('单位美元额度')}
                   initValue={''}
                   placeholder={t('一单位货币能兑换的额度')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('QuotaPerUnit')}
                   showClear
                   onClick={() => setShowQuotaWarning(true)}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Input
                   field={'RetryTimes'}
                   label={t('失败重试次数')}
                   initValue={''}
                   placeholder={t('失败重试次数')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('RetryTimes')}
                   showClear
                 />
               </Col>
             </Row>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'DisplayInCurrencyEnabled'}
                   label={t('以货币形式显示额度')}
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      DisplayInCurrencyEnabled: value,
-                    });
-                  }}
+                  onChange={handleFieldChange('DisplayInCurrencyEnabled')}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'DisplayTokenStatEnabled'}
                   label={t('额度查询接口返回令牌额度而非用户额度')}
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DisplayTokenStatEnabled: value,
-                    })
-                  }
+                  onChange={handleFieldChange('DisplayTokenStatEnabled')}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'DefaultCollapseSidebar'}
                   label={t('默认折叠侧边栏')}
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DefaultCollapseSidebar: value,
-                    })
-                  }
+                  onChange={handleFieldChange('DefaultCollapseSidebar')}
                 />
               </Col>
             </Row>
             <Row>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'DemoSiteEnabled'}
                   label={t('演示站点模式')}
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DemoSiteEnabled: value
-                    })
-                  }
+                  onChange={handleFieldChange('DemoSiteEnabled')}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'SelfUseModeEnabled'}
                   label={t('自用模式')}
@@ -205,12 +196,7 @@ export default function GeneralSettings(props) {
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      SelfUseModeEnabled: value
-                    })
-                  }
+                  onChange={handleFieldChange('SelfUseModeEnabled')}
                 />
               </Col>
             </Row>
@@ -222,7 +208,7 @@ export default function GeneralSettings(props) {
           </Form.Section>
         </Form>
       </Spin>
-      
+
       <Modal
         title={t('警告')}
         visible={showQuotaWarning}
@@ -233,7 +219,9 @@ export default function GeneralSettings(props) {
       >
         <Banner
           type='warning'
-          description={t('此设置用于系统内部计算，默认值500000是为了精确到6位小数点设计，不推荐修改。')}
+          description={t(
+            '此设置用于系统内部计算，默认值500000是为了精确到6位小数点设计，不推荐修改。',
+          )}
           bordered
           fullMode={false}
           closeIcon={null}

web/src/pages/Setting/Operation/SettingsLog.js

@@ -45,7 +45,8 @@ export default function SettingsLog(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -100,7 +101,7 @@ export default function SettingsLog(props) {
         >
           <Form.Section text={t('日志设置')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'LogConsumeEnabled'}
                   label={t('启用额度消费日志记录')}
@@ -115,7 +116,7 @@ export default function SettingsLog(props) {
                   }}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Spin spinning={loadingCleanHistoryLog}>
                   <Form.DatePicker
                     label={t('日志记录时间')}

web/src/pages/Setting/Operation/SettingsMagnification.js

@@ -1,273 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Popconfirm, Row, Space, Spin } from '@douyinfe/semi-ui';
-import {
-  compareObjects,
-  API,
-  showError,
-  showSuccess,
-  showWarning,
-  verifyJSON,
-  verifyJSONPromise
-} from '../../../helpers';
-
-export default function SettingsMagnification(props) {
-  const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    ModelPrice: '',
-    ModelRatio: '',
-    CompletionRatio: '',
-    GroupRatio: '',
-    UserUsableGroups: ''
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  async function onSubmit() {
-    try {
-      console.log('Starting validation...');
-      await refForm.current.validate().then(() => {
-        console.log('Validation passed');
-        const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning('你似乎并没有修改什么');
-        const requestQueue = updateArray.map((item) => {
-          let value = '';
-          if (typeof inputs[item.key] === 'boolean') {
-            value = String(inputs[item.key]);
-          } else {
-            value = inputs[item.key];
-          }
-          return API.put('/api/option/', {
-            key: item.key,
-            value
-          });
-        });
-        setLoading(true);
-        Promise.all(requestQueue)
-          .then((res) => {
-            if (requestQueue.length === 1) {
-              if (res.includes(undefined)) return;
-            } else if (requestQueue.length > 1) {
-              if (res.includes(undefined))
-                return showError('部分保存失败，请重试');
-            }
-            for (let i = 0; i < res.length; i++) {
-              if (!res[i].data.success) {
-                return showError(res[i].data.message)
-              }
-            }
-            showSuccess('保存成功');
-            props.refresh();
-          })
-          .catch(error => {
-            console.error('Unexpected error in Promise.all:', error);
-
-            showError('保存失败，请重试');
-          })
-          .finally(() => {
-            setLoading(false);
-          });
-      }).catch((error) => {
-        console.error('Validation failed:', error);
-        showError('请检查输入');
-      });
-    } catch (error) {
-      showError('请检查输入');
-      console.error(error);
-    }
-  }
-
-  async function resetModelRatio() {
-    try {
-      let res = await API.post(`/api/option/rest_model_ratio`);
-      // return {success, message}
-      if (res.data.success) {
-        showSuccess(res.data.message);
-        props.refresh();
-      } else {
-        showError(res.data.message);
-      }
-    } catch (error) {
-      showError(error);
-    }
-  }
-
-  useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
-      }
-    }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
-  }, [props.options]);
-
-  return (
-    <Spin spinning={loading}>
-      <Form
-        values={inputs}
-        getFormApi={(formAPI) => (refForm.current = formAPI)}
-        style={{ marginBottom: 15 }}
-      >
-        <Form.Section text={'倍率设置'}>
-          <Row gutter={16}>
-            <Col span={16}>
-              <Form.TextArea
-                label={'模型固定价格'}
-                extraText={'一次调用消耗多少刀，优先级大于模型倍率'}
-                placeholder={
-                  '为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀'
-                }
-                field={'ModelPrice'}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                trigger='blur'
-                stopValidateWithError
-                rules={[
-                  {
-                    validator: (rule, value) => {
-                      return verifyJSON(value);
-                    },
-                    message: '不是合法的 JSON 字符串'
-                  }
-                ]}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    ModelPrice: value
-                  })
-                }
-              />
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={16}>
-              <Form.TextArea
-                label={'模型倍率'}
-                extraText={''}
-                placeholder={'为一个 JSON 文本，键为模型名称，值为倍率'}
-                field={'ModelRatio'}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                trigger='blur'
-                stopValidateWithError
-                rules={[
-                  {
-                    validator: (rule, value) => {
-                      return verifyJSON(value);
-                    },
-                    message: '不是合法的 JSON 字符串'
-                  }
-                ]}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    ModelRatio: value
-                  })
-                }
-              />
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={16}>
-              <Form.TextArea
-                label={'模型补全倍率（仅对自定义模型有效）'}
-                extraText={'仅对自定义模型有效'}
-                placeholder={'为一个 JSON 文本，键为模型名称，值为倍率'}
-                field={'CompletionRatio'}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                trigger='blur'
-                stopValidateWithError
-                rules={[
-                  {
-                    validator: (rule, value) => {
-                      return verifyJSON(value);
-                    },
-                    message: '不是合法的 JSON 字符串'
-                  }
-                ]}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    CompletionRatio: value
-                  })
-                }
-              />
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={16}>
-              <Form.TextArea
-                label={'分组倍率'}
-                extraText={''}
-                placeholder={'为一个 JSON 文本，键为分组名称，值为倍率'}
-                field={'GroupRatio'}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                trigger='blur'
-                stopValidateWithError
-                rules={[
-                  {
-                    validator: (rule, value) => {
-                      return verifyJSON(value);
-                    },
-                    message: '不是合法的 JSON 字符串'
-                  }
-                ]}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    GroupRatio: value
-                  })
-                }
-              />
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={16}>
-              <Form.TextArea
-                  label={'用户可选分组'}
-                  extraText={''}
-                  placeholder={'为一个 JSON 文本，键为分组名称，值为倍率'}
-                  field={'UserUsableGroups'}
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => {
-                        return verifyJSON(value);
-                      },
-                      message: '不是合法的 JSON 字符串'
-                    }
-                  ]}
-                  onChange={(value) =>
-                      setInputs({
-                        ...inputs,
-                        UserUsableGroups: value
-                      })
-                  }
-              />
-            </Col>
-          </Row>
-        </Form.Section>
-      </Form>
-      <Space>
-        <Button onClick={onSubmit}>
-          保存倍率设置
-        </Button>
-        <Popconfirm
-          title='确定重置模型倍率吗？'
-          content='此修改将不可逆'
-          okType={'danger'}
-          position={'top'}
-          onConfirm={() => {
-            resetModelRatio();
-          }}
-        >
-          <Button type={'danger'}>
-            重置模型倍率
-          </Button>
-        </Popconfirm>
-      </Space>
-    </Spin>
-  );
-}

web/src/pages/Setting/Operation/SettingsMonitoring.js

@@ -5,7 +5,8 @@ import {
   API,
   showError,
   showSuccess,
-  showWarning, verifyJSON
+  showWarning,
+  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
@@ -43,7 +44,8 @@ export default function SettingsMonitoring(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -67,7 +69,7 @@ export default function SettingsMonitoring(props) {
     setInputsRow(structuredClone(currentInputs));
     refForm.current.setValues(currentInputs);
   }, [props.options]);
-  
+
   return (
     <>
       <Spin spinning={loading}>
@@ -78,13 +80,15 @@ export default function SettingsMonitoring(props) {
         >
           <Form.Section text={t('监控设置')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('测试所有渠道的最长响应时间')}
                   step={1}
                   min={0}
                   suffix={t('秒')}
-                  extraText={t('当运行通道全部测试时，超过此时间将自动禁用通道')}
+                  extraText={t(
+                    '当运行通道全部测试时，超过此时间将自动禁用通道',
+                  )}
                   placeholder={''}
                   field={'ChannelDisableThreshold'}
                   onChange={(value) =>
@@ -95,7 +99,7 @@ export default function SettingsMonitoring(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('额度提醒阈值')}
                   step={1}
@@ -114,7 +118,7 @@ export default function SettingsMonitoring(props) {
               </Col>
             </Row>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'AutomaticDisableChannelEnabled'}
                   label={t('失败时自动禁用通道')}
@@ -129,7 +133,7 @@ export default function SettingsMonitoring(props) {
                   }}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'AutomaticEnableChannelEnabled'}
                   label={t('成功时自动启用通道')}
@@ -146,14 +150,18 @@ export default function SettingsMonitoring(props) {
               </Col>
             </Row>
             <Row gutter={16}>
-              <Col span={16}>
+              <Col xs={24} sm={16}>
                 <Form.TextArea
                   label={t('自动禁用关键词')}
                   placeholder={t('一行一个，不区分大小写')}
-                  extraText={t('当上游通道返回错误中包含这些关键词时（不区分大小写），自动禁用通道')}
+                  extraText={t(
+                    '当上游通道返回错误中包含这些关键词时（不区分大小写），自动禁用通道',
+                  )}
                   field={'AutomaticDisableKeywords'}
                   autosize={{ minRows: 6, maxRows: 12 }}
-                  onChange={(value) => setInputs({ ...inputs, AutomaticDisableKeywords: value })}
+                  onChange={(value) =>
+                    setInputs({ ...inputs, AutomaticDisableKeywords: value })
+                  }
                 />
               </Col>
             </Row>

web/src/pages/Setting/Operation/SettingsSensitiveWords.js

@@ -41,7 +41,8 @@ export default function SettingsSensitiveWords(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -75,7 +76,7 @@ export default function SettingsSensitiveWords(props) {
         >
           <Form.Section text={t('屏蔽词过滤设置')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'CheckSensitiveEnabled'}
                   label={t('启用屏蔽词过滤功能')}
@@ -90,7 +91,7 @@ export default function SettingsSensitiveWords(props) {
                   }}
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'CheckSensitiveOnPromptEnabled'}
                   label={t('启用 Prompt 检查')}
@@ -107,7 +108,7 @@ export default function SettingsSensitiveWords(props) {
               </Col>
             </Row>
             <Row>
-              <Col span={16}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.TextArea
                   label={t('屏蔽词列表')}
                   extraText={t('一行一个屏蔽词，不需要符号分割')}

web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.js

@@ -17,7 +17,7 @@ export default function RequestRateLimit(props) {
     ModelRequestRateLimitEnabled: false,
     ModelRequestRateLimitCount: -1,
     ModelRequestRateLimitSuccessCount: 1000,
-    ModelRequestRateLimitDurationMinutes: 1
+    ModelRequestRateLimitDurationMinutes: 1,
   });
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
@@ -43,7 +43,8 @@ export default function RequestRateLimit(props) {
         if (requestQueue.length === 1) {
           if (res.includes(undefined)) return;
         } else if (requestQueue.length > 1) {
-          if (res.includes(undefined)) return showError(t('部分保存失败，请重试'));
+          if (res.includes(undefined))
+            return showError(t('部分保存失败，请重试'));
         }
         showSuccess(t('保存成功'));
         props.refresh();
@@ -78,7 +79,7 @@ export default function RequestRateLimit(props) {
         >
           <Form.Section text={t('模型请求速率限制')}>
             <Row gutter={16}>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.Switch
                   field={'ModelRequestRateLimitEnabled'}
                   label={t('启用用户模型请求速率限制（可能会影响高并发性能）')}
@@ -95,7 +96,7 @@ export default function RequestRateLimit(props) {
               </Col>
             </Row>
             <Row>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('限制周期')}
                   step={1}
@@ -113,7 +114,7 @@ export default function RequestRateLimit(props) {
               </Col>
             </Row>
             <Row>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('用户每周期最多请求次数')}
                   step={1}
@@ -129,7 +130,7 @@ export default function RequestRateLimit(props) {
                   }
                 />
               </Col>
-              <Col span={8}>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
                 <Form.InputNumber
                   label={t('用户每周期最多请求完成次数')}
                   step={1}

web/src/pages/Setup/index.js

@@ -0,0 +1,300 @@
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import {
+  Card,
+  Col,
+  Row,
+  Form,
+  Button,
+  Typography,
+  Space,
+  RadioGroup,
+  Radio,
+  Modal,
+  Banner,
+} from '@douyinfe/semi-ui';
+import { API, showError, showNotice, timestamp2string } from '../../helpers';
+import { StatusContext } from '../../context/Status';
+import { marked } from 'marked';
+import { StyleContext } from '../../context/Style/index.js';
+import { useTranslation } from 'react-i18next';
+import {
+  IconHelpCircle,
+  IconInfoCircle,
+  IconAlertTriangle,
+} from '@douyinfe/semi-icons';
+
+const Setup = () => {
+  const { t, i18n } = useTranslation();
+  const [statusState] = useContext(StatusContext);
+  const [styleState, styleDispatch] = useContext(StyleContext);
+  const [loading, setLoading] = useState(false);
+  const [selfUseModeInfoVisible, setUsageModeInfoVisible] = useState(false);
+  const [setupStatus, setSetupStatus] = useState({
+    status: false,
+    root_init: false,
+    database_type: '',
+  });
+  const { Text, Title } = Typography;
+  const formRef = useRef(null);
+
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    usageMode: 'external',
+  });
+
+  useEffect(() => {
+    fetchSetupStatus();
+  }, []);
+
+  const fetchSetupStatus = async () => {
+    try {
+      const res = await API.get('/api/setup');
+      const { success, data } = res.data;
+      if (success) {
+        setSetupStatus(data);
+
+        // If setup is already completed, redirect to home
+        if (data.status) {
+          window.location.href = '/';
+        }
+      } else {
+        showError(t('获取初始化状态失败'));
+      }
+    } catch (error) {
+      console.error('Failed to fetch setup status:', error);
+      showError(t('获取初始化状态失败'));
+    }
+  };
+
+  const handleUsageModeChange = (val) => {
+    setFormData({ ...formData, usageMode: val });
+  };
+
+  const onSubmit = () => {
+    if (!formRef.current) {
+      console.error('Form reference is null');
+      showError(t('表单引用错误，请刷新页面重试'));
+      return;
+    }
+
+    const values = formRef.current.getValues();
+    console.log('Form values:', values);
+
+    // For root_init=false, validate admin username and password
+    if (!setupStatus.root_init) {
+      if (!values.username || !values.username.trim()) {
+        showError(t('请输入管理员用户名'));
+        return;
+      }
+
+      if (!values.password || values.password.length < 8) {
+        showError(t('密码长度至少为8个字符'));
+        return;
+      }
+
+      if (values.password !== values.confirmPassword) {
+        showError(t('两次输入的密码不一致'));
+        return;
+      }
+    }
+
+    // Prepare submission data
+    const formValues = { ...values };
+    formValues.SelfUseModeEnabled = values.usageMode === 'self';
+    formValues.DemoSiteEnabled = values.usageMode === 'demo';
+
+    // Remove usageMode as it's not needed by the backend
+    delete formValues.usageMode;
+
+    console.log('Submitting data to backend:', formValues);
+    setLoading(true);
+
+    // Submit to backend
+    API.post('/api/setup', formValues)
+      .then((res) => {
+        const { success, message } = res.data;
+        console.log('API response:', res.data);
+
+        if (success) {
+          showNotice(t('系统初始化成功，正在跳转...'));
+          setTimeout(() => {
+            window.location.reload();
+          }, 1500);
+        } else {
+          showError(message || t('初始化失败，请重试'));
+        }
+      })
+      .catch((error) => {
+        console.error('API error:', error);
+        showError(t('系统初始化失败，请重试'));
+        setLoading(false);
+      })
+      .finally(() => {
+        // setLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+        <Card>
+          <Title heading={2} style={{ marginBottom: '24px' }}>
+            {t('系统初始化')}
+          </Title>
+
+          {setupStatus.database_type === 'sqlite' && (
+            <Banner
+              type='warning'
+              icon={<IconAlertTriangle size='large' />}
+              closeIcon={null}
+              title={t('数据库警告')}
+              description={
+                <div>
+                  <p>
+                    {t(
+                      '您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！',
+                    )}
+                  </p>
+                  <p>
+                    {t(
+                      '建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。',
+                    )}
+                  </p>
+                </div>
+              }
+              style={{ marginBottom: '24px' }}
+            />
+          )}
+
+          <Form
+            getFormApi={(formApi) => {
+              formRef.current = formApi;
+              console.log('Form API set:', formApi);
+            }}
+            initValues={formData}
+          >
+            {setupStatus.root_init ? (
+              <Banner
+                type='info'
+                icon={<IconInfoCircle />}
+                closeIcon={null}
+                description={t('管理员账号已经初始化过，请继续设置系统参数')}
+                style={{ marginBottom: '24px' }}
+              />
+            ) : (
+              <Form.Section text={t('管理员账号')}>
+                <Form.Input
+                  field='username'
+                  label={t('用户名')}
+                  placeholder={t('请输入管理员用户名')}
+                  showClear
+                  onChange={(value) =>
+                    setFormData({ ...formData, username: value })
+                  }
+                />
+                <Form.Input
+                  field='password'
+                  label={t('密码')}
+                  placeholder={t('请输入管理员密码')}
+                  type='password'
+                  showClear
+                  onChange={(value) =>
+                    setFormData({ ...formData, password: value })
+                  }
+                />
+                <Form.Input
+                  field='confirmPassword'
+                  label={t('确认密码')}
+                  placeholder={t('请确认管理员密码')}
+                  type='password'
+                  showClear
+                  onChange={(value) =>
+                    setFormData({ ...formData, confirmPassword: value })
+                  }
+                />
+              </Form.Section>
+            )}
+
+            <Form.Section
+              text={
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  {t('系统设置')}
+                </div>
+              }
+            >
+              <Form.RadioGroup
+                field='usageMode'
+                label={
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    {t('使用模式')}
+                    <IconHelpCircle
+                      style={{
+                        marginLeft: '4px',
+                        color: 'var(--semi-color-primary)',
+                        verticalAlign: 'middle',
+                        cursor: 'pointer',
+                      }}
+                      onClick={(e) => {
+                        // e.preventDefault();
+                        // e.stopPropagation();
+                        setUsageModeInfoVisible(true);
+                      }}
+                    />
+                  </div>
+                }
+                extraText={t('可在初始化后修改')}
+                initValue='external'
+                onChange={handleUsageModeChange}
+              >
+                <Form.Radio value='external'>{t('对外运营模式')}</Form.Radio>
+                <Form.Radio value='self'>{t('自用模式')}</Form.Radio>
+                <Form.Radio value='demo'>{t('演示站点模式')}</Form.Radio>
+              </Form.RadioGroup>
+            </Form.Section>
+          </Form>
+
+          <div style={{ marginTop: '24px', textAlign: 'right' }}>
+            <Button type='primary' onClick={onSubmit} loading={loading}>
+              {t('初始化系统')}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      <Modal
+        title={t('使用模式说明')}
+        visible={selfUseModeInfoVisible}
+        onOk={() => setUsageModeInfoVisible(false)}
+        onCancel={() => setUsageModeInfoVisible(false)}
+        closeOnEsc={true}
+        okText={t('确定')}
+        cancelText={null}
+      >
+        <div style={{ padding: '8px 0' }}>
+          <Title heading={6}>{t('对外运营模式')}</Title>
+          <p>{t('默认模式，适用于为多个用户提供服务的场景。')}</p>
+          <p>
+            {t(
+              '此模式下，系统将计算每次调用的用量，您需要对每个模型都设置价格，如果没有设置价格，用户将无法使用该模型。',
+            )}
+          </p>
+        </div>
+        <div style={{ padding: '8px 0' }}>
+          <Title heading={6}>{t('自用模式')}</Title>
+          <p>{t('适用于个人使用的场景。')}</p>
+          <p>
+            {t('不需要设置模型价格，系统将弱化用量计算，您可专注于使用模型。')}
+          </p>
+        </div>
+        <div style={{ padding: '8px 0' }}>
+          <Title heading={6}>{t('演示站点模式')}</Title>
+          <p>{t('适用于展示系统功能的场景。')}</p>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default Setup;

web/src/pages/Task/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TaskLogsTable from "../../components/TaskLogsTable.js";
+import TaskLogsTable from '../../components/TaskLogsTable.js';
 
 const Task = () => (
   <>

web/src/pages/Token/EditToken.js

@@ -18,8 +18,9 @@ import {
   Select,
   SideSheet,
   Space,
-  Spin, TextArea,
-  Typography
+  Spin,
+  TextArea,
+  Typography,
 } from '@douyinfe/semi-ui';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import { Divider } from 'semantic-ui-react';
@@ -47,7 +48,7 @@ const EditToken = (props) => {
     model_limits_enabled,
     model_limits,
     allow_ips,
-    group
+    group,
   } = inputs;
   // const [visible, setVisible] = useState(false);
   const [models, setModels] = useState([]);
@@ -100,7 +101,7 @@ const EditToken = (props) => {
       let localGroupOptions = Object.entries(data).map(([group, info]) => ({
         label: info.desc,
         value: group,
-        ratio: info.ratio
+        ratio: info.ratio,
       }));
       setGroups(localGroupOptions);
     } else {
@@ -229,9 +230,7 @@ const EditToken = (props) => {
       }
 
       if (successCount > 0) {
-        showSuccess(
-          t('令牌创建成功，请在列表页面点击复制获取令牌！')
-        );
+        showSuccess(t('令牌创建成功，请在列表页面点击复制获取令牌！'));
         props.refresh();
         props.handleClose();
       }
@@ -246,7 +245,9 @@ const EditToken = (props) => {
       <SideSheet
         placement={isEdit ? 'right' : 'left'}
         title={
-          <Title level={3}>{isEdit ? t('更新令牌信息') : t('创建新的令牌')}</Title>
+          <Title level={3}>
+            {isEdit ? t('更新令牌信息') : t('创建新的令牌')}
+          </Title>
         }
         headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
         bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
@@ -333,7 +334,9 @@ const EditToken = (props) => {
           <Divider />
           <Banner
             type={'warning'}
-            description={t('注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。')}
+            description={t(
+              '注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。',
+            )}
           ></Banner>
           <div style={{ marginTop: 20 }}>
             <Typography.Text>{`${t('额度')}${renderQuotaWithPrompt(remain_quota)}`}</Typography.Text>
@@ -396,7 +399,9 @@ const EditToken = (props) => {
           </div>
           <Divider />
           <div style={{ marginTop: 10 }}>
-            <Typography.Text>{t('IP白名单（请勿过度信任此功能）')}</Typography.Text>
+            <Typography.Text>
+              {t('IP白名单（请勿过度信任此功能）')}
+            </Typography.Text>
           </div>
           <TextArea
             label={t('IP白名单')}
@@ -440,7 +445,7 @@ const EditToken = (props) => {
           <div style={{ marginTop: 10 }}>
             <Typography.Text>{t('令牌分组，默认为用户的分组')}</Typography.Text>
           </div>
-          {groups.length > 0 ?
+          {groups.length > 0 ? (
             <Select
               style={{ marginTop: 8 }}
               placeholder={t('令牌分组，默认为用户的分组')}
@@ -455,14 +460,15 @@ const EditToken = (props) => {
               value={inputs.group}
               autoComplete='new-password'
               optionList={groups}
-            />:
+            />
+          ) : (
             <Select
               style={{ marginTop: 8 }}
               placeholder={t('管理员未设置用户可选分组')}
               name='gruop'
               disabled={true}
             />
-          }
+          )}
         </Spin>
       </SideSheet>
     </>

web/src/pages/Token/index.js

@@ -8,13 +8,15 @@ const Token = () => {
     <>
       <Layout>
         <Layout.Header>
-        <Banner
-          type='warning'
-          description={t('令牌无法精确控制使用额度，只允许自用，请勿直接将令牌分发给他人。')}
-        />
-      </Layout.Header>
-      <Layout.Content>
-        <TokensTable />
+          <Banner
+            type='warning'
+            description={t(
+              '令牌无法精确控制使用额度，只允许自用，请勿直接将令牌分发给他人。',
+            )}
+          />
+        </Layout.Header>
+        <Layout.Content>
+          <TokensTable />
         </Layout.Content>
       </Layout>
     </>

web/src/pages/TopUp/index.js

@@ -228,8 +228,12 @@ const TopUp = () => {
             size={'small'}
             centered={true}
           >
-            <p>{t('充值数量')}：{topUpCount}</p>
-            <p>{t('实付金额')}：{renderAmount()}</p>
+            <p>
+              {t('充值数量')}：{topUpCount}
+            </p>
+            <p>
+              {t('实付金额')}：{renderAmount()}
+            </p>
             <p>{t('是否确认充值？')}</p>
           </Modal>
           <div
@@ -280,7 +284,9 @@ const TopUp = () => {
                     disabled={!enableOnlineTopUp}
                     field={'redemptionCount'}
                     label={t('实付金额：') + ' ' + renderAmount()}
-                    placeholder={t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)}
+                    placeholder={
+                      t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
+                    }
                     name='redemptionCount'
                     type={'number'}
                     value={topUpCount}

web/src/pages/User/EditUser.js

@@ -26,6 +26,7 @@ const EditUser = (props) => {
     display_name: '',
     password: '',
     github_id: '',
+    oidc_id: '',
     wechat_id: '',
     email: '',
     quota: 0,
@@ -37,6 +38,7 @@ const EditUser = (props) => {
     display_name,
     password,
     github_id,
+    oidc_id,
     wechat_id,
     telegram_id,
     email,
@@ -199,7 +201,9 @@ const EditUser = (props) => {
                 search
                 selection
                 allowAdditions
-                additionLabel={t('请在系统设置页面编辑分组倍率以添加新的分组：')}
+                additionLabel={t(
+                  '请在系统设置页面编辑分组倍率以添加新的分组：',
+                )}
                 onChange={(value) => handleInputChange('group', value)}
                 value={inputs.group}
                 autoComplete='new-password'
@@ -229,7 +233,20 @@ const EditUser = (props) => {
             name='github_id'
             value={github_id}
             autoComplete='new-password'
-            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
+            placeholder={t(
+              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+            )}
+            readonly
+          />
+          <div style={{ marginTop: 20 }}>
+            <Typography.Text>{t('`已绑定的 OIDC 账户')}</Typography.Text>
+          </div>
+          <Input
+            name='oidc_id'
+            value={oidc_id}
+            placeholder={t(
+              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+            )}
             readonly
           />
           <div style={{ marginTop: 20 }}>
@@ -239,7 +256,9 @@ const EditUser = (props) => {
             name='wechat_id'
             value={wechat_id}
             autoComplete='new-password'
-            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
+            placeholder={t(
+              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+            )}
             readonly
           />
           <div style={{ marginTop: 20 }}>
@@ -249,7 +268,9 @@ const EditUser = (props) => {
             name='email'
             value={email}
             autoComplete='new-password'
-            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
+            placeholder={t(
+              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+            )}
             readonly
           />
           <div style={{ marginTop: 20 }}>
@@ -259,7 +280,9 @@ const EditUser = (props) => {
             name='telegram_id'
             value={telegram_id}
             autoComplete='new-password'
-            placeholder={t('此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改')}
+            placeholder={t(
+              '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
+            )}
             readonly
           />
         </Spin>

web/src/pages/User/index.js

@@ -9,10 +9,10 @@ const User = () => {
     <>
       <Layout>
         <Layout.Header>
-        <h3>{t('管理用户')}</h3>
-      </Layout.Header>
-      <Layout.Content>
-        <UsersTable />
+          <h3>{t('管理用户')}</h3>
+        </Layout.Header>
+        <Layout.Content>
+          <UsersTable />
         </Layout.Content>
       </Layout>
     </>

web/vite.config.js

@@ -46,12 +46,17 @@ export default defineConfig({
             'react-toastify',
             'react-turnstile',
           ],
-          'i18n': ['i18next', 'react-i18next', 'i18next-browser-languagedetector'],
+          i18n: [
+            'i18next',
+            'react-i18next',
+            'i18next-browser-languagedetector',
+          ],
         },
       },
     },
   },
   server: {
+    host: '0.0.0.0',
     proxy: {
       '/api': {
         target: 'http://localhost:3000',