style: side menu
This commit is contained in:
+3
-3
@@ -100,9 +100,9 @@ export default [
|
|||||||
name: 'deployment',
|
name: 'deployment',
|
||||||
path: '/models/deployments',
|
path: '/models/deployments',
|
||||||
key: 'modelDeployments',
|
key: 'modelDeployments',
|
||||||
icon: 'icon-model',
|
icon: 'icon-rocket-launch1',
|
||||||
selectedIcon: 'icon-model-filled',
|
selectedIcon: 'icon-rocket-launch-fill',
|
||||||
defaultIcon: 'icon-model',
|
defaultIcon: 'icon-rocket-launch1',
|
||||||
access: 'canSeeAdmin',
|
access: 'canSeeAdmin',
|
||||||
component: './llmodels/index'
|
component: './llmodels/index'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -129,9 +129,15 @@ const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
|
|||||||
legend
|
legend
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const isEmpty = useMemo(() => {
|
||||||
|
return seriesData?.every?.((item: any) => {
|
||||||
|
return !item?.data?.length;
|
||||||
|
});
|
||||||
|
}, [seriesData]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!seriesData.length ? (
|
{isEmpty ? (
|
||||||
<EmptyData height={height} title={title}></EmptyData>
|
<EmptyData height={height} title={title}></EmptyData>
|
||||||
) : (
|
) : (
|
||||||
<Chart
|
<Chart
|
||||||
|
|||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import IconFont from '@/components/icon-font';
|
||||||
|
import {
|
||||||
|
ApiOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
ExperimentOutlined,
|
||||||
|
RetweetOutlined,
|
||||||
|
ThunderboltOutlined
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
EditOutlined: React.createElement(EditOutlined),
|
||||||
|
ExperimentOutlined: React.createElement(ExperimentOutlined),
|
||||||
|
DeleteOutlined: React.createElement(DeleteOutlined),
|
||||||
|
ThunderboltOutlined: React.createElement(ThunderboltOutlined),
|
||||||
|
RetweetOutlined: React.createElement(RetweetOutlined),
|
||||||
|
DownloadOutlined: React.createElement(DownloadOutlined),
|
||||||
|
ApiOutlined: React.createElement(ApiOutlined),
|
||||||
|
Stop: React.createElement(IconFont, { type: 'icon-stop1' }),
|
||||||
|
Play: React.createElement(IconFont, { type: 'icon-outline-play' }),
|
||||||
|
Catalog: React.createElement(IconFont, { type: 'icon-catalog' }),
|
||||||
|
HF: React.createElement(IconFont, { type: 'icon-huggingface' }),
|
||||||
|
Ollama: React.createElement(IconFont, { type: 'icon-ollama' }),
|
||||||
|
ModelScope: React.createElement(IconFont, { type: 'icon-tu2' }),
|
||||||
|
LocalPath: React.createElement(IconFont, { type: 'icon-hard-disk' }),
|
||||||
|
Launch: React.createElement(IconFont, { type: 'icon-rocket-launch' }),
|
||||||
|
Deployment: React.createElement(IconFont, { type: 'icon-rocket-launch1' })
|
||||||
|
};
|
||||||
|
|
||||||
|
export default icons;
|
||||||
@@ -17,6 +17,7 @@ interface MenuItem {
|
|||||||
interface SiderMenuProps {
|
interface SiderMenuProps {
|
||||||
menuData: MenuItem[];
|
menuData: MenuItem[];
|
||||||
collapsed?: boolean;
|
collapsed?: boolean;
|
||||||
|
initialState: Global.InitialState;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = createStyles(({ css, token }) => {
|
const useStyles = createStyles(({ css, token }) => {
|
||||||
@@ -122,7 +123,8 @@ const useStyles = createStyles(({ css, token }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const SiderMenu: React.FC<SiderMenuProps> = (props) => {
|
const SiderMenu: React.FC<SiderMenuProps> = (props) => {
|
||||||
const { menuData, collapsed } = props;
|
const { menuData, collapsed, initialState } = props;
|
||||||
|
const is_admin = initialState?.currentUser?.is_admin || false;
|
||||||
const { styles, cx } = useStyles();
|
const { styles, cx } = useStyles();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
|
const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
|
||||||
@@ -220,9 +222,9 @@ const SiderMenu: React.FC<SiderMenuProps> = (props) => {
|
|||||||
rotate={collapseKeys.has(item.key) ? -90 : 0}
|
rotate={collapseKeys.has(item.key) ? -90 : 0}
|
||||||
></CaretDownOutlined>
|
></CaretDownOutlined>
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : is_admin ? (
|
||||||
<Divider style={dividerStyles} />
|
<Divider style={dividerStyles} />
|
||||||
)}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={cx(styles.menuItemGroup, {
|
className={cx(styles.menuItemGroup, {
|
||||||
|
|||||||
@@ -1,36 +1,9 @@
|
|||||||
import IconFont from '@/components/icon-font';
|
import icons from '@/components/icon-font/icons';
|
||||||
import HotKeys from '@/config/hotkeys';
|
import HotKeys from '@/config/hotkeys';
|
||||||
import {
|
|
||||||
ApiOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
DownloadOutlined,
|
|
||||||
EditOutlined,
|
|
||||||
ExperimentOutlined,
|
|
||||||
RetweetOutlined,
|
|
||||||
ThunderboltOutlined
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { modelCategoriesMap, modelSourceMap } from './index';
|
import { modelCategoriesMap, modelSourceMap } from './index';
|
||||||
|
|
||||||
const icons = {
|
|
||||||
EditOutlined: React.createElement(EditOutlined),
|
|
||||||
ExperimentOutlined: React.createElement(ExperimentOutlined),
|
|
||||||
DeleteOutlined: React.createElement(DeleteOutlined),
|
|
||||||
ThunderboltOutlined: React.createElement(ThunderboltOutlined),
|
|
||||||
RetweetOutlined: React.createElement(RetweetOutlined),
|
|
||||||
DownloadOutlined: React.createElement(DownloadOutlined),
|
|
||||||
ApiOutlined: React.createElement(ApiOutlined),
|
|
||||||
Stop: React.createElement(IconFont, { type: 'icon-stop1' }),
|
|
||||||
Play: React.createElement(IconFont, { type: 'icon-outline-play' }),
|
|
||||||
Catalog: React.createElement(IconFont, { type: 'icon-catalog' }),
|
|
||||||
HF: React.createElement(IconFont, { type: 'icon-huggingface' }),
|
|
||||||
Ollama: React.createElement(IconFont, { type: 'icon-ollama' }),
|
|
||||||
ModelScope: React.createElement(IconFont, { type: 'icon-tu2' }),
|
|
||||||
LocalPath: React.createElement(IconFont, { type: 'icon-hard-disk' }),
|
|
||||||
Launch: React.createElement(IconFont, { type: 'icon-rocket-launch' })
|
|
||||||
};
|
|
||||||
|
|
||||||
export const modalConfig: Record<
|
export const modalConfig: Record<
|
||||||
string,
|
string,
|
||||||
{ show: boolean; width: string | number; source: any; isGGUF?: boolean }
|
{ show: boolean; width: string | number; source: any; isGGUF?: boolean }
|
||||||
@@ -196,7 +169,7 @@ export const modelFileActions = [
|
|||||||
{
|
{
|
||||||
label: 'common.button.deploy',
|
label: 'common.button.deploy',
|
||||||
key: 'deploy',
|
key: 'deploy',
|
||||||
icon: icons.Launch
|
icon: icons.Deployment
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'resources.modelfiles.retry.download',
|
label: 'resources.modelfiles.retry.download',
|
||||||
|
|||||||
Reference in New Issue
Block a user