root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: side menu style

Browse Source
This commit is contained in:
jialin
2025-06-23 15:13:49 +08:00
parent 6be7140a47
commit fd3d7a6f29
13 changed files with 169 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+21 -7
View File
@@ -5,13 +5,17 @@ export default [
name: 'dashboard',
path: '/dashboard',
key: 'dashboard',
icon: 'AppstoreOutlined',
icon: 'icon-dashboard',
selectedIcon: 'icon-dashboard-filled',
defaultIcon: 'icon-dashboard',
access: 'canSeeAdmin',
component: './dashboard'
},
{
name: 'playground',
icon: 'ExperimentOutlined',
icon: 'icon-experiment',
selectedIcon: 'icon-experiment-filled',
defaultIcon: 'icon-experiment',
path: '/playground',
key: 'playground',
routes: [
@@ -65,7 +69,9 @@ export default [
name: 'modelCatalog',
path: '/models/catalog',
key: 'modelsCatalog',
icon: 'icon-catalog',
icon: 'icon-layers',
selectedIcon: 'icon-layers-filled',
defaultIcon: 'icon-layers',
access: 'canSeeAdmin',
component: './llmodels/catalog'
},
@@ -73,7 +79,9 @@ export default [
name: 'models',
path: '/models/list',
key: 'models',
icon: 'Block',
icon: 'icon-model',
selectedIcon: 'icon-model-filled',
defaultIcon: 'icon-model',
access: 'canSeeAdmin',
component: './llmodels/index'
},
@@ -81,7 +89,9 @@ export default [
name: 'resources',
path: '/resources',
key: 'resources',
icon: 'CloudServer',
icon: 'icon-resources',
selectedIcon: 'icon-resources-filled',
defaultIcon: 'icon-resources',
access: 'canSeeAdmin',
component: './resources'
},
@@ -89,14 +99,18 @@ export default [
name: 'apikeys',
path: '/api-keys',
key: 'apikeys',
icon: 'KeyOutlined',
selectedIcon: 'icon-key-filled',
icon: 'icon-key',
defaultIcon: 'icon-key',
component: './api-keys'
},
{
name: 'users',
path: '/users',
key: 'users',
icon: 'Team',
icon: 'icon-users',
selectedIcon: 'icon-users-filled',
defaultIcon: 'icon-users',
access: 'canSeeAdmin',
component: './users'
},
src/assets/styles/common.less
+4
View File
@@ -204,6 +204,10 @@
font-size: 20px;
}
.font-size-18 {
font-size: 18px;
}
.font-size-24 {
font-size: 24px;
}
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_njee9tsv0mp.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_w50kuuord8o.js'
});
export default IconFont;
src/config/theme/light.ts
+1 -1
View File
@@ -33,7 +33,7 @@ export default {
iconMarginInlineEnd: 12,
itemBorderRadius: 4,
itemSelectedColor: '#007BFF',
itemHeight: 44,
itemHeight: 36,
groupTitleColor: 'rgba(0,0,0,1)',
itemHoverColor: 'rgba(0,0,0,1)',
itemColor: 'rgba(0,0,0,1)',
src/global.less
+9 -8
View File
@@ -313,19 +313,20 @@ body {
.ant-menu {
.ant-menu-item {
color: var(--ant-color-text) !important;
// color: var(--ant-color-text) !important;
&:active {
background-color: var(--ant-menu-item-selected-bg);
// background-color: var(--ant-menu-item-selected-bg);
}
}
.ant-menu-item:not(.ant-menu-item-selected) {
color: var(--ant-color-text);
// color: var(--ant-color-text);
}
.ant-menu-item.ant-menu-item-selected {
color: var(--ant-color-primary) !important;
// color: var(--ant-color-primary) !important;
font-weight: 400;
}
}
}
@@ -368,7 +369,7 @@ body {
.ant-menu {
.ant-menu-submenu-title {
color: var(--ant-color-text) !important;
// color: var(--ant-color-text) !important;
}
}
@@ -376,7 +377,7 @@ body {
.user-avatar.ant-menu-submenu {
.ant-menu-submenu-title {
padding-left: 10px;
color: var(--ant-color-text) !important;
// color: var(--ant-color-text) !important;
}
}
@@ -385,7 +386,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
color: var(--ant-color-text) !important;
// color: var(--ant-color-text) !important;
padding-inline: unset !important;
width: 100%;
margin-inline: 0 !important;
@@ -412,7 +413,7 @@ body {
display: flex;
justify-content: flex-start;
align-items: center;
color: var(--ant-color-text) !important;
// color: var(--ant-color-text) !important;
}
}
src/layouts/index.tsx
+110 -94
View File
@@ -3,6 +3,7 @@
import { routeCacheAtom, setRouteCache } from '@/atoms/route-cache';
import { GPUStackVersionAtom, UpdateCheckAtom, userAtom } from '@/atoms/user';
import DarkMask from '@/components/dark-mask';
import IconFont from '@/components/icon-font';
import ShortCuts, {
modalConfig as ShortCutsConfig
} from '@/components/short-cuts';
@@ -14,7 +15,6 @@ import useUserSettings from '@/hooks/use-user-settings';
import { logout } from '@/pages/login/apis';
import { useAccessMarkedRoutes } from '@@/plugin-access';
import { useModel } from '@@/plugin-model';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { ProLayout } from '@ant-design/pro-components';
import {
Link,
@@ -32,7 +32,7 @@ import { Button, ConfigProvider, Modal, theme } from 'antd';
import 'driver.js/dist/driver.css';
import { useAtom } from 'jotai';
import 'overlayscrollbars/overlayscrollbars.css';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import Exception from './Exception';
import './Layout.css';
import { LogoIcon, SLogoIcon } from './Logo';
@@ -256,53 +256,51 @@ export default (props: any) => {
return () => clearTimeout(timeout);
}, [initializeMenu, matchedRoute, location]);
const renderMenuHeader = useCallback(
(logo, title) => {
return (
<>
{logo}
<div className="collapse-wrap" onClick={handleToggleCollapse}>
<Button
style={{ marginRight: collapsed ? 0 : -14 }}
size="small"
type={collapsed ? 'default' : 'text'}
>
<>
<MenuUnfoldOutlined
style={{ display: collapsed ? 'block' : 'none' }}
/>
<MenuFoldOutlined
style={{ display: !collapsed ? 'block' : 'none' }}
/>
</>
</Button>
</div>
</>
);
},
[collapsed]
);
const renderMenuHeader = (logo, title) => {
return (
<>
{logo}
<div className="collapse-wrap" onClick={handleToggleCollapse}>
<Button
style={{ marginRight: collapsed ? 0 : -14 }}
size="small"
type={collapsed ? 'default' : 'text'}
>
<>
<IconFont
type="icon-expand-left"
className="font-size-18 text-secondary"
style={{ display: collapsed ? 'block' : 'none' }}
/>
<IconFont
type="icon-expand-right"
className="font-size-18 text-secondary"
style={{ display: !collapsed ? 'block' : 'none' }}
/>
</>
</Button>
</div>
</>
);
};
const actionRender = useCallback(
(layoutProps) => {
const dom = getRightRenderContent({
runtimeConfig,
loading,
initialState,
setInitialState,
intl,
isDarkTheme: userSettings.isDarkTheme,
siderWidth: layoutProps.siderWidth,
collapsed: layoutProps.collapsed,
showUpgrade
});
const actionRender = (layoutProps) => {
const dom = getRightRenderContent({
runtimeConfig,
loading,
initialState,
setInitialState,
intl,
isDarkTheme: userSettings.isDarkTheme,
siderWidth: layoutProps.siderWidth,
collapsed: layoutProps.collapsed,
showUpgrade
});
return dom;
},
[intl, showUpgrade, userSettings.theme, userSettings.isDarkTheme]
);
return dom;
};
const itemRender = useCallback((route, _, routes) => {
const itemRender = (route, _, routes) => {
const { breadcrumbName, title, path } = route;
const label = title || breadcrumbName;
const last = routes[routes.length - 1];
@@ -312,63 +310,81 @@ export default (props: any) => {
}
}
return <Link to={path}>{label}</Link>;
}, []);
};
const menuItemRender = useCallback(
(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || menuItemProps.children) {
return defaultDom;
}
if (menuItemProps.path && location.pathname !== menuItemProps.path) {
return (
<Link
to={menuItemProps.path.replace('/*', '')}
target={menuItemProps.target}
>
{defaultDom}
</Link>
const menuItemRender = (menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || menuItemProps.children) {
return defaultDom;
}
if (menuItemProps.path && location.pathname !== menuItemProps.path) {
return (
<Link
to={menuItemProps.path.replace('/*', '')}
target={menuItemProps.target}
>
{defaultDom}
</Link>
);
}
return <>{defaultDom}</>;
};
const menuDataRender = (menuData) => {
const currentItem = menuData.find((s) => location.pathname === s.path);
return menuData.map((item) => {
const newItem = { ...item };
const selected =
location.pathname === newItem.path ||
location.pathname.indexOf(newItem.path) > -1;
if (newItem.icon) {
newItem.icon = selected ? (
<IconFont type={newItem.selectedIcon} />
) : (
<IconFont type={newItem.defaultIcon} />
);
}
return <>{defaultDom}</>;
},
[location.pathname]
);
if (newItem.children) {
newItem.children = menuDataRender(newItem.children);
const onPageChange = useCallback(
(route) => {
const { location } = history;
const { pathname } = location;
initRouteCacheValue(pathname);
dropRouteCache(pathname);
// if user is not change password, redirect to change password page
if (
location.pathname !== loginPath &&
userInfo?.require_password_change
) {
history.push(loginPath);
return;
if (selected) {
newItem.icon = <IconFont type={newItem.selectedIcon} />;
}
}
return newItem;
});
};
// if user is not logged in, redirect to login page
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
} else if (location.pathname === '/') {
const pathname = initialState?.currentUser?.is_admin
? '/dashboard'
: '/playground';
history.push(pathname);
}
},
[userInfo?.require_password_change, initialState?.currentUser]
);
const onPageChange = (route) => {
const { location } = history;
const { pathname } = location;
const onMenuHeaderClick = useCallback((e) => {
initRouteCacheValue(pathname);
dropRouteCache(pathname);
// if user is not change password, redirect to change password page
if (location.pathname !== loginPath && userInfo?.require_password_change) {
history.push(loginPath);
return;
}
// if user is not logged in, redirect to login page
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
} else if (location.pathname === '/') {
const pathname = initialState?.currentUser?.is_admin
? '/dashboard'
: '/playground';
history.push(pathname);
}
};
const onMenuHeaderClick = (e) => {
e.stopPropagation();
e.preventDefault();
navigate('/dashboard');
}, []);
};
const onCollapse = (value) => {
setCollapsed(value);
@@ -417,7 +433,6 @@ export default (props: any) => {
: theme.defaultAlgorithm,
...themeData
};
console.log('currentTheme====', data);
return data;
}, [userSettings.isDarkTheme, themeData]);
@@ -461,6 +476,7 @@ export default (props: any) => {
logo={collapsed ? SLogoIcon : LogoIcon}
menuItemRender={menuItemRender}
itemRender={itemRender}
menuDataRender={menuDataRender}
disableContentMargin
fixSiderbar
fixedHeader
src/layouts/rightRender.tsx
+5 -6
View File
@@ -6,12 +6,11 @@ import langConfigMap from '@/locales/lang-config-map';
import {
DiscordOutlined,
GithubOutlined,
GlobalOutlined,
HomeOutlined,
InfoCircleOutlined,
LogoutOutlined,
MoonOutlined,
QuestionCircleOutlined,
MoreOutlined,
ReadOutlined,
SettingOutlined,
SunOutlined
@@ -140,7 +139,7 @@ export const getRightRenderContent = (opts: {
items: [
{
key: 'help',
icon: <QuestionCircleOutlined />,
icon: <IconFont type="icon-help" />,
label: (
<span className="sub-title ">
<span className="flex-center">
@@ -213,7 +212,7 @@ export const getRightRenderContent = (opts: {
items: [
{
key: 'lang',
icon: <GlobalOutlined />,
icon: <IconFont type="icon-language" />,
label: (
<span className="sub-title">
{intl?.formatMessage?.({ id: 'common.settings.language' })}
@@ -265,7 +264,7 @@ export const getRightRenderContent = (opts: {
? 'user-menu-container user-menu-collapsed'
: 'user-menu-container',
mode: 'vertical',
expandIcon: false,
expandIcon: collapsed ? false : <MoreOutlined />,
// inlineCollapsed: collapsed,
triggerSubMenuAction: 'hover',
items: [
@@ -274,7 +273,7 @@ export const getRightRenderContent = (opts: {
key: 'user',
className: 'user-avatar',
icon: (
<span>
<span className="avatar-container">
<Avatar
size={28}
style={{
src/pages/dashboard/components/usage-inner/index.tsx
+10 -1
View File
@@ -1,5 +1,6 @@
import { ExportOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Col, DatePicker, Row, Select } from 'antd';
import { Button, Col, DatePicker, Row, Select, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { FC, memo, useContext, useState } from 'react';
import styled from 'styled-components';
@@ -107,6 +108,14 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
})}
style={{ width: 160 }}
></Select>
<Tooltip
title={intl.formatMessage({ id: 'common.button.export' })}
>
<Button
icon={<ExportOutlined />}
onClick={handleExport}
></Button>
</Tooltip>
</div>
</FilterWrapper>
</div>
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import CardWrapper from '@/components/card-wrapper';
import { SimpleCard } from '@/components/card-wrapper/simple-card';
import MixLineBar from '@/components/echarts/mix-line-bar';
import { ExportOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import dayjs from 'dayjs';
@@ -79,14 +78,14 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
return (
<CardWrapperBox>
<CardWrapper style={{ width: '100%', position: 'relative' }}>
<DownloadButton
{/* <DownloadButton
type="link"
icon={<ExportOutlined />}
size="small"
onClick={onExport}
>
{intl.formatMessage({ id: 'common.button.export' })}
</DownloadButton>
</DownloadButton> */}
<SimpleCard dataList={dataList} height={80}></SimpleCard>
<MixLineBar
chartData={{
src/pages/playground/components/multiple-chat/content-item.tsx
+1 -1
View File
@@ -174,7 +174,7 @@ const ContentItem: React.FC<MessageItemProps> = ({
<IconFont
type="icon-assistant-filled"
className="font-size-16 m-r-5"
style={{ color: 'var(--ant-blue-5)' }}
style={{ color: 'var(--ant-blue-6)' }}
/>
);
}
src/pages/playground/components/multiple-chat/model-item.tsx
+1 -1
View File
@@ -288,7 +288,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
></Button>
</Dropdown>
<Popover
placement="bottomRight"
autoAdjustOverflow={true}
overlayInnerStyle={{ width: 384, paddingInline: 0 }}
content={
<OverlayScroller
src/pages/playground/style/play-ground.less
+1 -1
View File
@@ -93,7 +93,7 @@
right: 32px;
bottom: 0;
height: 1px;
background-color: var(--ant-color-split);
border-bottom: 1px solid var(--ant-color-split);
}
}
}
src/pages/playground/style/think-content.less
+3 -3
View File
@@ -10,10 +10,10 @@
.think-content {
margin-bottom: 8px;
padding: 12px;
padding: 0 12px;
border-left: 2px solid var(--ant-color-fill-secondary);
background-color: var(--ant-color-fill-tertiary);
// background-color: var(--ant-color-fill-tertiary);
color: var(--ant-color-text-tertiary);
border-radius: var(--border-radius-base);
// border-radius: var(--border-radius-base);
}
}