Skip to content

phsl / new-api

Go to a project
Commit 5aa67994 by 1808837298@qq.com
Options

refactor: Reorganize sidebar navigation and add personal settings route

parent 783c60ee
Showing with 205 additions and 69 deletions
web/src/App.js
...@@ -30,6 +30,7 @@ import { useTranslation } from 'react-i18next'; ...@@ -30,6 +30,7 @@ import { useTranslation } from 'react-i18next';
import { StatusContext } from './context/Status'; import { StatusContext } from './context/Status';
import { setStatusData } from './helpers/data.js'; import { setStatusData } from './helpers/data.js';
import { API, showError } from './helpers'; import { API, showError } from './helpers';
import PersonalSetting from './components/PersonalSetting.js';
const Home = lazy(() => import('./pages/Home')); const Home = lazy(() => import('./pages/Home'));
const Detail = lazy(() => import('./pages/Detail')); const Detail = lazy(() => import('./pages/Detail'));
...@@ -178,6 +179,16 @@ function App() { ...@@ -178,6 +179,16 @@ function App() {
} }
/> />
<Route <Route
path='/personal'
element={
<PrivateRoute>
<Suspense fallback={<Loading></Loading>}>
<PersonalSetting />
</Suspense>
</PrivateRoute>
}
/>
<Route
path='/topup' path='/topup'
element={ element={
<PrivateRoute> <PrivateRoute>
......
web/src/components/PersonalSetting.js
...@@ -393,7 +393,7 @@ const PersonalSetting = () => { ...@@ -393,7 +393,7 @@ const PersonalSetting = () => {
</div> </div>
</div> </div>
</Modal> </Modal>
<div style={{marginTop: 20}}> <div>
<Card <Card
title={ title={
<Card.Meta <Card.Meta
......
web/src/components/SiderBar.js
...@@ -28,7 +28,7 @@ import { ...@@ -28,7 +28,7 @@ import {
IconSetting, IconSetting,
IconUser IconUser
} from '@douyinfe/semi-icons'; } from '@douyinfe/semi-icons';
import { Avatar, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui'; import { Avatar, Dropdown, Layout, Nav, Switch, Divider } from '@douyinfe/semi-ui';
import { setStatusData } from '../helpers/data.js'; import { setStatusData } from '../helpers/data.js';
import { stringToColor } from '../helpers/render.js'; import { stringToColor } from '../helpers/render.js';
import { useSetTheme, useTheme } from '../context/Theme/index.js'; import { useSetTheme, useTheme } from '../context/Theme/index.js';
...@@ -65,36 +65,12 @@ const SiderBar = () => { ...@@ -65,36 +65,12 @@ const SiderBar = () => {
pricing: '/pricing', pricing: '/pricing',
task: '/task', task: '/task',
playground: '/playground', playground: '/playground',
personal: '/personal',
}; };
const headerButtons = useMemo( const workspaceItems = useMemo(
() => [ () => [
{ {
text: 'Playground',
itemKey: 'playground',
to: '/playground',
icon: <IconCommentStroked />,
},
{
text: t('渠道'),
itemKey: 'channel',
to: '/channel',
icon: <IconLayers />,
className: isAdmin() ? '' : 'tableHiddle',
},
{
text: t('聊天'),
itemKey: 'chat',
items: chatItems,
icon: <IconComment />,
},
{
text: t('令牌'),
itemKey: 'token',
to: '/token',
icon: <IconKey />,
},
{
text: t('数据看板'), text: t('数据看板'),
itemKey: 'detail', itemKey: 'detail',
to: '/detail', to: '/detail',
...@@ -105,33 +81,19 @@ const SiderBar = () => { ...@@ -105,33 +81,19 @@ const SiderBar = () => {
: 'tableHiddle', : 'tableHiddle',
}, },
{ {
text: t('兑换码'), text: t('API令牌'),
itemKey: 'redemption', itemKey: 'token',
to: '/redemption', to: '/token',
icon: <IconGift />, icon: <IconKey />,
className: isAdmin() ? '' : 'tableHiddle',
},
{
text: t('钱包'),
itemKey: 'topup',
to: '/topup',
icon: <IconCreditCard />,
},
{
text: t('用户管理'),
itemKey: 'user',
to: '/user',
icon: <IconUser />,
className: isAdmin() ? '' : 'tableHiddle',
}, },
{ {
text: t('日志'), text: t('使用日志'),
itemKey: 'log', itemKey: 'log',
to: '/log', to: '/log',
icon: <IconHistogram />, icon: <IconHistogram />,
}, },
{ {
text: t('绘图'), text: t('绘图日志'),
itemKey: 'midjourney', itemKey: 'midjourney',
to: '/midjourney', to: '/midjourney',
icon: <IconImage />, icon: <IconImage />,
...@@ -141,7 +103,7 @@ const SiderBar = () => { ...@@ -141,7 +103,7 @@ const SiderBar = () => {
: 'tableHiddle', : 'tableHiddle',
}, },
{ {
text: t('异步任务'), text: t('任务日志'),
itemKey: 'task', itemKey: 'task',
to: '/task', to: '/task',
icon: <IconChecklistStroked />, icon: <IconChecklistStroked />,
...@@ -149,23 +111,82 @@ const SiderBar = () => { ...@@ -149,23 +111,82 @@ const SiderBar = () => {
localStorage.getItem('enable_task') === 'true' localStorage.getItem('enable_task') === 'true'
? '' ? ''
: 'tableHiddle', : 'tableHiddle',
}
],
[
localStorage.getItem('enable_data_export'),
localStorage.getItem('enable_drawing'),
localStorage.getItem('enable_task'),
t,
],
);
const financeItems = useMemo(
() => [
{
text: t('钱包'),
itemKey: 'topup',
to: '/topup',
icon: <IconCreditCard />,
}, },
{ {
text: t('设置'), text: t('个人设置'),
itemKey: 'personal',
to: '/personal',
icon: <IconUser />,
},
],
[t],
);
const adminItems = useMemo(
() => [
{
text: t('渠道'),
itemKey: 'channel',
to: '/channel',
icon: <IconLayers />,
className: isAdmin() ? '' : 'tableHiddle',
},
{
text: t('兑换码'),
itemKey: 'redemption',
to: '/redemption',
icon: <IconGift />,
className: isAdmin() ? '' : 'tableHiddle',
},
{
text: t('用户管理'),
itemKey: 'user',
to: '/user',
icon: <IconUser />,
},
{
text: t('系统设置'),
itemKey: 'setting', itemKey: 'setting',
to: '/setting', to: '/setting',
icon: <IconSetting />, icon: <IconSetting />,
}, },
], ],
[ [isAdmin(), t],
localStorage.getItem('enable_data_export'), );
localStorage.getItem('enable_drawing'),
localStorage.getItem('enable_task'), const chatMenuItems = useMemo(
localStorage.getItem('chat_link'), () => [
chatItems, {
isAdmin(), text: 'Playground',
t, itemKey: 'playground',
to: '/playground',
icon: <IconCommentStroked />,
},
{
text: t('聊天'),
itemKey: 'chat',
items: chatItems,
icon: <IconComment />,
},
], ],
[chatItems, t],
); );
useEffect(() => { useEffect(() => {
...@@ -206,10 +227,24 @@ const SiderBar = () => { ...@@ -206,10 +227,24 @@ const SiderBar = () => {
setIsCollapsed(localStorage.getItem('default_collapse_sidebar') === 'true'); setIsCollapsed(localStorage.getItem('default_collapse_sidebar') === 'true');
}, []); }, []);
// Custom divider style
const dividerStyle = {
margin: '8px 0',
opacity: 0.6,
};
// Custom group label style
const groupLabelStyle = {
padding: '8px 16px',
color: 'var(--semi-color-text-2)',
fontSize: '12px',
fontWeight: 'normal',
};
return ( return (
<> <>
<Nav <Nav
style={{ maxWidth: 220, height: '100%' }} style={{ maxWidth: 200, height: '100%' }}
defaultIsCollapsed={ defaultIsCollapsed={
localStorage.getItem('default_collapse_sidebar') === 'true' localStorage.getItem('default_collapse_sidebar') === 'true'
} }
...@@ -249,7 +284,6 @@ const SiderBar = () => { ...@@ -249,7 +284,6 @@ const SiderBar = () => {
</Link> </Link>
); );
}} }}
items={headerButtons}
onSelect={(key) => { onSelect={(key) => {
if (key.itemKey.toString().startsWith('chat')) { if (key.itemKey.toString().startsWith('chat')) {
styleDispatch({ type: 'SET_INNER_PADDING', payload: false }); styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
...@@ -258,12 +292,101 @@ const SiderBar = () => { ...@@ -258,12 +292,101 @@ const SiderBar = () => {
} }
setSelectedKeys([key.itemKey]); setSelectedKeys([key.itemKey]);
}} }}
footer={ >
{/* Chat Section - Only show if there are chat items */}
{chatItems.length > 0 && (
<> <>
{chatMenuItems.map((item) => {
if (item.items && item.items.length > 0) {
return (
<Nav.Sub
key={item.itemKey}
itemKey={item.itemKey}
text={item.text}
icon={item.icon}
>
{item.items.map((subItem) => (
<Nav.Item
key={subItem.itemKey}
itemKey={subItem.itemKey}
text={subItem.text}
/>
))}
</Nav.Sub>
);
} else {
return (
<Nav.Item
key={item.itemKey}
itemKey={item.itemKey}
text={item.text}
icon={item.icon}
/>
);
}
})}
</>
)}
{/* Divider */}
<Divider style={dividerStyle} />
{/* Workspace Section */}
{!isCollapsed && <div style={groupLabelStyle}>{t('控制台')}</div>}
{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}
className={item.className}
/>
))}
{isAdmin() && (
<>
{/* Divider */}
<Divider style={dividerStyle} />
{/* Admin Section */}
{adminItems.map((item) => (
<Nav.Item
key={item.itemKey}
itemKey={item.itemKey}
text={item.text}
icon={item.icon}
className={item.className}
/>
))}
</> </>
)}
<Nav.Footer
collapseButton={true}
collapseText={(collapsed)=>
{
if(collapsed){
return t('展开侧边栏')
} }
> return t('收起侧边栏')
<Nav.Footer collapseButton={true}></Nav.Footer> }
}
/>
</Nav> </Nav>
</> </>
); );
......
web/src/i18n/locales/en.json
...@@ -621,6 +621,7 @@ ...@@ -621,6 +621,7 @@
"窗口等待": "window wait", "窗口等待": "window wait",
"失败": "Failed", "失败": "Failed",
"绘图": "Drawing", "绘图": "Drawing",
"绘图日志": "Drawing log",
"放大": "Upscalers", "放大": "Upscalers",
"微妙放大": "Upscale (Subtle)", "微妙放大": "Upscale (Subtle)",
"创造放大": "Upscale (Creative)", "创造放大": "Upscale (Creative)",
...@@ -1120,7 +1121,7 @@ ...@@ -1120,7 +1121,7 @@
"知识库 ID": "Knowledge Base ID", "知识库 ID": "Knowledge Base ID",
"请输入知识库 ID，例如：123456": "Please enter knowledge base ID, e.g.: 123456", "请输入知识库 ID，例如：123456": "Please enter knowledge base ID, e.g.: 123456",
"可选值": "Optional value", "可选值": "Optional value",
"异步任务": "Async task", "任务日志": "Task log",
"你好": "Hello", "你好": "Hello",
"你好，请问有什么可以帮助您的吗？": "Hello, how may I help you?", "你好，请问有什么可以帮助您的吗？": "Hello, how may I help you?",
"用户分组": "Your default group", "用户分组": "Your default group",
...@@ -1335,5 +1336,7 @@ ...@@ -1335,5 +1336,7 @@
"Claude思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比": "Claude thinking adaptation BudgetTokens = MaxTokens * BudgetTokens percentage", "Claude思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比": "Claude thinking adaptation BudgetTokens = MaxTokens * BudgetTokens percentage",
"思考适配 BudgetTokens 百分比": "Thinking adaptation BudgetTokens percentage", "思考适配 BudgetTokens 百分比": "Thinking adaptation BudgetTokens percentage",
"0.1-1之间的小数": "Decimal between 0.1 and 1", "0.1-1之间的小数": "Decimal between 0.1 and 1",
"模型相关设置": "Model related settings" "模型相关设置": "Model related settings",
"收起侧边栏": "Collapse sidebar",
"展开侧边栏": "Expand sidebar"
} }
web/src/pages/Setting/Model/SettingClaudeModel.js
...@@ -18,6 +18,8 @@ const CLAUDE_HEADER = { ...@@ -18,6 +18,8 @@ const CLAUDE_HEADER = {
const CLAUDE_DEFAULT_MAX_TOKENS = { const CLAUDE_DEFAULT_MAX_TOKENS = {
'default': 8192, 'default': 8192,
"claude-3-haiku-20240307": 4096,
"claude-3-opus-20240229": 4096,
'claude-3-7-sonnet-20250219-thinking': 8192, 'claude-3-7-sonnet-20250219-thinking': 8192,
} }
......
web/src/pages/Setting/index.js
...@@ -18,9 +18,6 @@ const Setting = () => { ...@@ -18,9 +18,6 @@ const Setting = () => {
const [tabActiveKey, setTabActiveKey] = useState('1'); const [tabActiveKey, setTabActiveKey] = useState('1');
let panes = [ let panes = [
{ {
tab: t('个人设置'),
content: <PersonalSetting />,
itemKey: 'personal',
}, },
]; ];
...@@ -61,7 +58,7 @@ const Setting = () => { ...@@ -61,7 +58,7 @@ const Setting = () => {
if (tab) { if (tab) {
setTabActiveKey(tab); setTabActiveKey(tab);
} else { } else {
onChangeTab('personal'); onChangeTab('operation');
} }
}, [location.search]); }, [location.search]);
return ( return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment