style: common component style
This commit is contained in:
jialin
+5
-1
@@ -1,3 +1,7 @@
|
||||
module.exports = {
|
||||
extends: require.resolve('@umijs/max/eslint')
|
||||
extends: require.resolve('@umijs/max/eslint'),
|
||||
// react/no-unstable-nested-components config
|
||||
rules: {
|
||||
'react/no-unstable-nested-components': 'on'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -35,6 +35,13 @@ export default [
|
||||
icon: 'CloudServer',
|
||||
component: './nodes'
|
||||
},
|
||||
{
|
||||
name: 'API Keys',
|
||||
path: '/api-keys',
|
||||
key: 'apikeys',
|
||||
icon: 'LockOutlined',
|
||||
component: './api-keys'
|
||||
},
|
||||
{
|
||||
name: 'Users',
|
||||
path: '/users',
|
||||
|
||||
-20
@@ -1,20 +0,0 @@
|
||||
// import { RunTimeLayoutConfig } from '@umijs/max';
|
||||
|
||||
// 运行时配置
|
||||
|
||||
// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
|
||||
// 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
|
||||
export async function getInitialState(): Promise<{ name: string }> {
|
||||
return { name: 'admin' };
|
||||
}
|
||||
|
||||
// export const layout: RunTimeLayoutConfig = () => {
|
||||
// return {
|
||||
// title: '',
|
||||
// logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
|
||||
|
||||
// menu: {
|
||||
// locale: true,
|
||||
// },
|
||||
// };
|
||||
// };
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
// 运行时配置
|
||||
|
||||
// 全局初始化数据配置，用于 Layout 用户信息和权限初始化
|
||||
// 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
|
||||
export async function getInitialState(): Promise<{ name: string }> {
|
||||
console.log('getInitialState+++++++++++++++');
|
||||
return {
|
||||
name: 'admin'
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.label-text {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.note-info {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.star {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { InfoCircleOutlined } from '@ant-design/icons';
|
||||
import { Tooltip } from 'antd';
|
||||
import React from 'react';
|
||||
import './label-info.less';
|
||||
|
||||
interface NoteInfoProps {
|
||||
required?: boolean;
|
||||
label: string;
|
||||
description?: React.ReactNode;
|
||||
}
|
||||
const NoteInfo: React.FC<NoteInfoProps> = (props) => {
|
||||
console.log('props+++++++++', props);
|
||||
const { required, description, label } = props || {};
|
||||
return (
|
||||
<span className="label-text">
|
||||
<span>{label}</span>
|
||||
<span className="note-info">
|
||||
{required && (
|
||||
<span style={{ color: 'red' }} className="star">
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
{description && (
|
||||
<span style={{ marginLeft: 5, color: 'gray' }} className="desc">
|
||||
<Tooltip title={description}>
|
||||
<InfoCircleOutlined />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoteInfo;
|
||||
@@ -60,7 +60,7 @@
|
||||
pointer-events: all;
|
||||
z-index: 5;
|
||||
&.isfoucs-has-value {
|
||||
top: 8px;
|
||||
top: 10px;
|
||||
transition: all 0.2s var(--seal-transition-func);
|
||||
}
|
||||
&.blur-no-value {
|
||||
@@ -68,6 +68,7 @@
|
||||
transition: all 0.2s var(--seal-transition-func);
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== select ==================
|
||||
:global(.ant-select) {
|
||||
display: flex;
|
||||
@@ -84,6 +85,12 @@
|
||||
}
|
||||
:global(.ant-select-selection-item) {
|
||||
height: @inputheight !important;
|
||||
padding-block: 5px !important;
|
||||
line-height: 22px !important;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
:global(.ant-select-arrow) {
|
||||
top: 10px;
|
||||
}
|
||||
:global(
|
||||
.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
|
||||
@@ -91,6 +98,9 @@
|
||||
) {
|
||||
background-color: transparent;
|
||||
}
|
||||
:global(.ant-select-selection-search-input) {
|
||||
height: @inputheight !important;
|
||||
}
|
||||
// ==================== input ====================
|
||||
:global(.ant-input),
|
||||
:global(.ant-input-password) {
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import LabelInfo from './label-info';
|
||||
import wrapperStyle from './wrapper.less';
|
||||
interface WrapperProps {
|
||||
children: React.ReactNode;
|
||||
label: string;
|
||||
isFocus: boolean;
|
||||
status?: string;
|
||||
required?: boolean;
|
||||
description?: React.ReactNode;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
onClick?: () => void;
|
||||
@@ -17,6 +21,8 @@ const Wrapper: React.FC<WrapperProps> = ({
|
||||
status,
|
||||
className,
|
||||
disabled,
|
||||
description,
|
||||
required,
|
||||
onClick
|
||||
}) => {
|
||||
return (
|
||||
@@ -38,7 +44,11 @@ const Wrapper: React.FC<WrapperProps> = ({
|
||||
: wrapperStyle['blur-no-value']
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
<LabelInfo
|
||||
label={label}
|
||||
required={required}
|
||||
description={description}
|
||||
></LabelInfo>
|
||||
</label>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import classNames from 'classnames';
|
||||
import LabelInfo from './components/label-info';
|
||||
import wrapperStyle from './components/wrapper.less';
|
||||
interface WrapperProps {
|
||||
children: React.ReactNode;
|
||||
label: string;
|
||||
status?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
description?: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Wrapper: React.FC<WrapperProps> = ({
|
||||
children,
|
||||
label,
|
||||
status,
|
||||
className,
|
||||
disabled,
|
||||
required,
|
||||
description
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
wrapperStyle.wrapper,
|
||||
wrapperStyle[`validate-status-${status}`],
|
||||
disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
|
||||
className ? wrapperStyle[className] : ''
|
||||
)}
|
||||
>
|
||||
<label
|
||||
className={classNames(
|
||||
wrapperStyle['label'],
|
||||
wrapperStyle['isfoucs-has-value']
|
||||
)}
|
||||
>
|
||||
<LabelInfo
|
||||
label={label}
|
||||
required={required}
|
||||
description={description}
|
||||
></LabelInfo>
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
padding: '0 calc(var(--ant-padding-sm) - 5px)',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
@@ -7,7 +7,7 @@ import { SealFormItemProps } from './types';
|
||||
const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
|
||||
props
|
||||
) => {
|
||||
const { label, placeholder, ...rest } = props;
|
||||
const { label, placeholder, required, description, ...rest } = props;
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
const inputRef = useRef<any>(null);
|
||||
const { status } = Form.Item.useStatus();
|
||||
@@ -50,6 +50,8 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
|
||||
status={status}
|
||||
label={label || (placeholder as string)}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
|
||||
@@ -16,7 +16,7 @@ type OnSearch = (
|
||||
) => void;
|
||||
|
||||
const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
|
||||
const { label, placeholder, ...rest } = props;
|
||||
const { label, placeholder, required, description, ...rest } = props;
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
const inputRef = useRef<any>(null);
|
||||
const { status } = Form.Item.useStatus();
|
||||
@@ -59,6 +59,8 @@ const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
|
||||
status={status}
|
||||
label={label || (placeholder as string)}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Wrapper from './components/wrapper';
|
||||
import { SealFormItemProps } from './types';
|
||||
|
||||
const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
const { label, placeholder, ...rest } = props;
|
||||
const { label, placeholder, required, description, ...rest } = props;
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
const inputRef = useRef<any>(null);
|
||||
const { status } = Form.Item.useStatus();
|
||||
@@ -44,6 +44,8 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
status={status}
|
||||
label={label || (placeholder as string)}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
|
||||
@@ -17,6 +17,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
|
||||
onBlur,
|
||||
onInput,
|
||||
style,
|
||||
required,
|
||||
description,
|
||||
...rest
|
||||
} = props;
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
@@ -73,6 +75,8 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
|
||||
status={status}
|
||||
label={label || (placeholder as string)}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
className="seal-textarea-wrapper"
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
@@ -92,7 +96,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
|
||||
};
|
||||
|
||||
const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
const { label, placeholder, ...rest } = props;
|
||||
const { label, placeholder, required, description, ...rest } = props;
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
const inputRef = useRef<any>(null);
|
||||
const { status } = Form.Item.useStatus();
|
||||
@@ -135,6 +139,8 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
|
||||
status={status}
|
||||
label={label || (placeholder as string)}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
|
||||
@@ -6,7 +6,8 @@ import Wrapper from './components/wrapper';
|
||||
import { SealFormItemProps } from './types';
|
||||
|
||||
const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
|
||||
const { label, placeholder, children, ...rest } = props;
|
||||
const { label, placeholder, children, required, description, ...rest } =
|
||||
props;
|
||||
const [isFocus, setIsFocus] = useState(false);
|
||||
const inputRef = useRef<any>(null);
|
||||
const { status } = Form.Item.useStatus();
|
||||
@@ -39,7 +40,9 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
|
||||
};
|
||||
|
||||
const handleOnBlur = (e: any) => {
|
||||
setIsFocus(false);
|
||||
if (!props.value) {
|
||||
setIsFocus(false);
|
||||
}
|
||||
props.onBlur?.(e);
|
||||
};
|
||||
|
||||
@@ -48,6 +51,8 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
|
||||
status={status}
|
||||
label={label || (placeholder as string)}
|
||||
isFocus={isFocus}
|
||||
required={required}
|
||||
description={description}
|
||||
disabled={props.disabled}
|
||||
onClick={handleClickWrapper}
|
||||
>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
export interface SealFormItemProps {
|
||||
label?: string;
|
||||
}
|
||||
required?: boolean;
|
||||
description?: React.ReactNode;
|
||||
}
|
||||
|
||||
+17
-1
@@ -26,6 +26,20 @@ html {
|
||||
.css-var-rf {
|
||||
--ant-font-size: var(--font-size-base);
|
||||
}
|
||||
.css-var-rg,
|
||||
.css-var-ri,
|
||||
.css-var-rh {
|
||||
--ant-font-size: var(--font-size-base);
|
||||
&.ant-menu-css-var {
|
||||
--ant-menu-item-height: 46px;
|
||||
--ant-menu-item-selected-bg: var(--color-white-1);
|
||||
--ant-menu-item-border-radius: 24px;
|
||||
--ant-menu-item-selected-color: var(--ant-color-primary);
|
||||
--ant-menu-item-hover-bg: var(--color-white-1);
|
||||
--ant-menu-item-color: var(--color-text-1);
|
||||
--ant-menu-item-active-bg: var(--color-white-1);
|
||||
}
|
||||
}
|
||||
.css-var-r0 {
|
||||
// --ant-control-height: 36px;
|
||||
--ant-font-size-sm: var(--font-size-base);
|
||||
@@ -64,7 +78,9 @@ html {
|
||||
--ant-modal-content-padding: 24px 30px;
|
||||
}
|
||||
|
||||
.css-var-rf.ant-menu-css-var {
|
||||
.css-var-rf.ant-menu-css-var,
|
||||
.css-var-ri.ant-menu-css-var,
|
||||
.css-var-rh.ant-menu-css-var {
|
||||
--ant-menu-item-height: 46px;
|
||||
--ant-menu-item-selected-bg: var(--color-white-1);
|
||||
--ant-menu-item-border-radius: 24px;
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Access, useAccess } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const access = useAccess();
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Dashboard',
|
||||
}}
|
||||
>
|
||||
<Access accessible={access.canSeeAdmin}>
|
||||
<Button type="primary">==================</Button>
|
||||
</Access>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
+17
-9
@@ -93,17 +93,25 @@ export default (props: any) => {
|
||||
|
||||
const formatMessage = undefined;
|
||||
|
||||
const runtimeConfig = pluginManager.applyPlugins({
|
||||
key: 'layout',
|
||||
type: 'modify',
|
||||
logout: true,
|
||||
initialValue: {
|
||||
...initialInfo,
|
||||
notFound: <div>not found</div>
|
||||
}
|
||||
});
|
||||
// const runtimeConfig = pluginManager.applyPlugins({
|
||||
// key: 'layout',
|
||||
// type: 'modify',
|
||||
// logout: true,
|
||||
// initialValue: {
|
||||
// ...initialInfo,
|
||||
// notFound: <div>not found</div>
|
||||
// }
|
||||
// });
|
||||
const runtimeConfig = {
|
||||
...initialInfo,
|
||||
logout: () => {
|
||||
console.log('logout');
|
||||
},
|
||||
notFound: <div>not found</div>
|
||||
};
|
||||
console.log(
|
||||
'clientRoute==========2=',
|
||||
props,
|
||||
clientRoutes,
|
||||
runtimeConfig,
|
||||
initialInfo
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// @ts-nocheck
|
||||
// This file is generated by Umi automatically
|
||||
// DO NOT CHANGE IT MANUALLY!
|
||||
|
||||
import avatarImg from '@/assets/images/avatar.png';
|
||||
import { LogoutOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Dropdown, Menu, Spin, version } from 'antd';
|
||||
@@ -11,6 +10,7 @@ export function getRightRenderContent(opts: {
|
||||
initialState: any;
|
||||
setInitialState: any;
|
||||
}) {
|
||||
console.log('runtimeConfig==', opts.runtimeConfig, opts);
|
||||
if (opts.runtimeConfig.rightRender) {
|
||||
return opts.runtimeConfig.rightRender(
|
||||
opts.initialState,
|
||||
@@ -67,6 +67,20 @@ export function getRightRenderContent(opts: {
|
||||
onClick: () => {
|
||||
opts?.runtimeConfig?.logout?.(opts.initialState);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'theme',
|
||||
label: <>外观</>,
|
||||
onClick: () => {
|
||||
console.log('theme');
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'lang',
|
||||
label: '语言',
|
||||
onClick: () => {
|
||||
console.log('lang');
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -96,12 +110,15 @@ export function getRightRenderContent(opts: {
|
||||
return (
|
||||
<div className="umi-plugin-layout-right anticon">
|
||||
{opts.runtimeConfig.logout ? (
|
||||
<Dropdown
|
||||
{...dropdownProps}
|
||||
overlayClassName="umi-plugin-layout-container"
|
||||
>
|
||||
{avatar}
|
||||
</Dropdown>
|
||||
<>
|
||||
<Dropdown
|
||||
{...dropdownProps}
|
||||
overlayClassName="umi-plugin-layout-container"
|
||||
>
|
||||
{avatar}
|
||||
</Dropdown>
|
||||
<span></span>
|
||||
</>
|
||||
) : (
|
||||
avatar
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { CopyOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { Form, Modal } from 'antd';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
action: PageActionType;
|
||||
open: boolean;
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
const AddModal: React.FC<AddModalProps> = ({
|
||||
title,
|
||||
action,
|
||||
open,
|
||||
onOk,
|
||||
onCancel
|
||||
}) => {
|
||||
const [form] = Form.useForm();
|
||||
const Suffix = (
|
||||
<SyncOutlined
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: '#1677ff'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const RenderCopyButton = () => {
|
||||
return <CopyOutlined></CopyOutlined>;
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
open={open}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
destroyOnClose={true}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
keyboard={false}
|
||||
width={600}
|
||||
styles={{}}
|
||||
footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
|
||||
>
|
||||
<Form name="addAPIKey" form={form} onFinish={onOk}>
|
||||
<Form.Item name="name" rules={[{ required: true }]}>
|
||||
<SealInput.Input label="Display Name" required></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item name="secretkey" rules={[{ required: true }]}>
|
||||
<SealInput.Input
|
||||
label="Secret Key"
|
||||
addonAfter={<RenderCopyButton></RenderCopyButton>}
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddModal;
|
||||
@@ -0,0 +1,246 @@
|
||||
import PageTools from '@/components/page-tools';
|
||||
import { PageAction } from '@/config';
|
||||
import type { PageActionType } from '@/config/types';
|
||||
import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import useTableSort from '@/hooks/use-table-sort';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import AddAPIKeyModal from './components/add-apikey';
|
||||
const { Column } = Table;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'local',
|
||||
secretKey: `auk_uzem...owsa`,
|
||||
lastusedTime: '2024-05-22 12:20:10',
|
||||
createTime: '2024-05-20 12:13:25'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'dev',
|
||||
secretKey: `auk_uzem...okwa`,
|
||||
lastusedTime: '2024-05-19 13:30:22',
|
||||
createTime: '2024-05-18 10:28:32'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'prod',
|
||||
secretKey: `auk_uzem...uuds`,
|
||||
lastusedTime: '2024-05-18 10:28:32',
|
||||
createTime: '2024-05-17 08:21:09'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'test',
|
||||
secretKey: `auk_uzem...uksa`,
|
||||
lastusedTime: '2024-05-18 10:28:32',
|
||||
createTime: '2024-05-16 13:33:23'
|
||||
}
|
||||
];
|
||||
|
||||
const Models: React.FC = () => {
|
||||
const rowSelection = useTableRowSelection();
|
||||
const { sortOrder, setSortOrder } = useTableSort({
|
||||
defaultSortOrder: 'descend'
|
||||
});
|
||||
const [total, setTotal] = useState(100);
|
||||
const [openAddModal, setOpenAddModal] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
name: ''
|
||||
});
|
||||
const handleShowSizeChange = (current: number, size: number) => {
|
||||
console.log(current, size);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number | undefined) => {
|
||||
console.log(page, pageSize);
|
||||
};
|
||||
|
||||
const handleTableChange = (pagination: any, filters: any, sorter: any) => {
|
||||
console.log('handleTableChange=======', pagination, filters, sorter);
|
||||
setSortOrder(sorter.order);
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
console.log('fetchData');
|
||||
};
|
||||
const handleSearch = (e: any) => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const handleNameChange = (e: any) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
name: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddUser = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle('Add User');
|
||||
};
|
||||
|
||||
const handleClickMenu = (e: any) => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
const handleModalOk = () => {
|
||||
console.log('handleModalOk');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleModalCancel = () => {
|
||||
console.log('handleModalCancel');
|
||||
setOpenAddModal(false);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '',
|
||||
content: 'Are you sure you want to delete the selected keys?',
|
||||
onOk() {
|
||||
console.log('OK');
|
||||
message.success('successfully!');
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditUser = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.EDIT);
|
||||
setTitle('Edit User');
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'API Keys'
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<PageTools
|
||||
marginBottom={22}
|
||||
left={
|
||||
<Space>
|
||||
<Input
|
||||
placeholder="按名称查询"
|
||||
style={{ width: 300 }}
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: 'var(--ant-color-primary)' }}
|
||||
onClick={handleSearch}
|
||||
icon={<SyncOutlined></SyncOutlined>}
|
||||
></Button>
|
||||
</Space>
|
||||
}
|
||||
right={
|
||||
<Space size={20}>
|
||||
<Button
|
||||
icon={<PlusOutlined></PlusOutlined>}
|
||||
type="primary"
|
||||
onClick={handleAddUser}
|
||||
>
|
||||
Add API-key
|
||||
</Button>
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
danger
|
||||
onClick={handleDelete}
|
||||
disabled={!rowSelection.selectedRowKeys.length}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
></PageTools>
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
rowSelection={rowSelection}
|
||||
loading={loading}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
pageSize: 10,
|
||||
current: 2,
|
||||
total: total,
|
||||
hideOnSinglePage: true,
|
||||
onShowSizeChange: handleShowSizeChange,
|
||||
onChange: handlePageChange
|
||||
}}
|
||||
>
|
||||
<Column title="Name" dataIndex="name" key="name" width={400} />
|
||||
<Column title="Secret Key" dataIndex="secretKey" key="secretKey" />
|
||||
<Column
|
||||
title="Create Time"
|
||||
dataIndex="createTime"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder={sortOrder}
|
||||
showSorterTooltip={false}
|
||||
sorter={true}
|
||||
/>
|
||||
<Column
|
||||
title="Last Used"
|
||||
dataIndex="lastusedTime"
|
||||
key="lastusedTime"
|
||||
/>
|
||||
<Column
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<Tooltip title="编辑">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={handleEditUser}
|
||||
icon={<EditOutlined></EditOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
danger
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</PageContainer>
|
||||
<AddAPIKeyModal
|
||||
open={openAddModal}
|
||||
action={action}
|
||||
title={title}
|
||||
onCancel={handleModalCancel}
|
||||
onOk={handleModalOk}
|
||||
></AddAPIKeyModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Models;
|
||||
@@ -15,9 +15,9 @@ const models = [
|
||||
const dataSource: NodeItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.2',
|
||||
hostname: 'node-1',
|
||||
name: 'bj-web-service-1',
|
||||
address: '183.14.31.136',
|
||||
hostname: 'bj-web-service-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -33,13 +33,13 @@ const dataSource: NodeItem[] = [
|
||||
gram: '24 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.5',
|
||||
hostname: 'node-2',
|
||||
name: 'bj-db-service-2',
|
||||
address: '172.24.1.36',
|
||||
hostname: 'bj-db-service-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -55,29 +55,51 @@ const dataSource: NodeItem[] = [
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '192.168.1.3',
|
||||
address: '192.168.1.3',
|
||||
hostname: 'node-3',
|
||||
name: 'guangzhou-computed-node-2',
|
||||
address: '170.10.2.10',
|
||||
hostname: 'guangzhou-computed-node-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 4,
|
||||
gpu: 2,
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 1,
|
||||
gpu: 0.5,
|
||||
memory: '28 GiB',
|
||||
gram: '6 Gib'
|
||||
cpu: 2,
|
||||
gpu: 1.5,
|
||||
memory: '32 GiB',
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'hangzhou-cache-node-1',
|
||||
address: '115.2.21.10',
|
||||
hostname: 'hangzhou-cache-node-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 4,
|
||||
gpu: 2.5,
|
||||
memory: '40 GiB',
|
||||
gram: '16 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import ModalFooter from '@/components/modal-footer';
|
||||
import FieldWrapper from '@/components/seal-form/field-wrapper';
|
||||
import SealInput from '@/components/seal-form/seal-input';
|
||||
import SealSelect from '@/components/seal-form/seal-select';
|
||||
import { PageActionType } from '@/config/types';
|
||||
import { Form, Modal } from 'antd';
|
||||
import { Form, Modal, Slider } from 'antd';
|
||||
|
||||
type AddModalProps = {
|
||||
title: string;
|
||||
@@ -11,6 +12,11 @@ type AddModalProps = {
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
const sourceOptions = [
|
||||
{ label: 'Huggingface', value: 'huggingface' },
|
||||
{ label: 'S3', value: 's3' }
|
||||
];
|
||||
const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
const { title, action, open, onOk, onCancel } = props || {};
|
||||
if (!open) {
|
||||
@@ -33,14 +39,27 @@ const AddModal: React.FC<AddModalProps> = (props) => {
|
||||
footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
|
||||
>
|
||||
<Form name="addModalForm" form={form} onFinish={onOk}>
|
||||
<Form.Item name="displayName" rules={[{ required: true }]}>
|
||||
<SealInput.Input label="Display Name"></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item name="catagory" rules={[{ required: true }]}>
|
||||
<SealSelect label="Catagory"></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item name="name" rules={[{ required: true }]}>
|
||||
<SealInput.Input label="Model Name"></SealInput.Input>
|
||||
<SealInput.Input
|
||||
label="Name"
|
||||
required
|
||||
description="description info"
|
||||
></SealInput.Input>
|
||||
</Form.Item>
|
||||
<Form.Item name="source" rules={[{ required: true }]}>
|
||||
<SealSelect label="Model Source" options={sourceOptions}></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item name="id" rules={[{ required: true }]}>
|
||||
<SealSelect label="Huggingface ID" showSearch></SealSelect>
|
||||
</Form.Item>
|
||||
<Form.Item name="tokenPers" rules={[{ required: true }]}>
|
||||
<FieldWrapper
|
||||
label="tokenPers"
|
||||
required
|
||||
description="description info"
|
||||
>
|
||||
<Slider defaultValue={30} style={{ width: '100%' }} />
|
||||
</FieldWrapper>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
@@ -30,17 +30,19 @@ const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'llama3:latest',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
progress: 30,
|
||||
transition: true,
|
||||
createTime: '2024-05-22 12:20:10'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'meta-llama/Meta-Llama-3-8B-nksrlsl-esLscs-1:latest',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
name: 'openbmb/MiniCPM-Llama3-V-2_5',
|
||||
createTime: '2024-05-19 13:30:22'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'apple/OpenELM-3B-Instructor',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
name: 'openbmb/MiniCPM-Llama3-V-2_5',
|
||||
createTime: '2024-05-18 10:28:32'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -92,7 +94,7 @@ const Models: React.FC = () => {
|
||||
const handleAddModal = () => {
|
||||
setOpenAddModal(true);
|
||||
setAction(PageAction.CREATE);
|
||||
setTitle('Import Module');
|
||||
setTitle('Deploy Model');
|
||||
};
|
||||
|
||||
const handleClickMenu = (e: any) => {
|
||||
@@ -197,10 +199,12 @@ const Models: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Tooltip>{text}</Tooltip>
|
||||
<Progress
|
||||
percent={30}
|
||||
strokeColor="var(--ant-color-primary)"
|
||||
/>
|
||||
{record.progress && (
|
||||
<Progress
|
||||
percent={record.progress}
|
||||
strokeColor="var(--ant-color-primary)"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
@@ -218,7 +222,7 @@ const Models: React.FC = () => {
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
return !record.transition ? (
|
||||
<Space>
|
||||
<Tooltip title="Open in PlayGround">
|
||||
<Button
|
||||
@@ -237,7 +241,7 @@ const Models: React.FC = () => {
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
);
|
||||
) : null;
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Progress } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo } from 'react';
|
||||
import { NodeItem } from '../config/types';
|
||||
|
||||
const RenderProgress = memo(
|
||||
(props: { record: NodeItem; dataIndex: string }) => {
|
||||
const { record, dataIndex } = props;
|
||||
const value1 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'allocable', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
const value2 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'capacity', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
if (!value1 || !value2) {
|
||||
return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
|
||||
}
|
||||
const percent = _.round(value1 / value2, 2) * 100;
|
||||
const strokeColor = useMemo(() => {
|
||||
if (percent <= 50) {
|
||||
return 'var(--ant-color-primary)';
|
||||
}
|
||||
if (percent <= 80) {
|
||||
return 'var(--ant-color-warning)';
|
||||
}
|
||||
return 'var(--ant-color-error)';
|
||||
}, [percent]);
|
||||
return (
|
||||
<Progress
|
||||
steps={5}
|
||||
format={() => {
|
||||
return (
|
||||
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
|
||||
);
|
||||
}}
|
||||
percent={percent}
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default RenderProgress;
|
||||
+56
-59
@@ -4,18 +4,18 @@ import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import useTableSort from '@/hooks/use-table-sort';
|
||||
import { SyncOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Input, Progress, Space, Table } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useMemo, useState } from 'react';
|
||||
import { Button, Input, Space, Table } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import RenderProgress from './components/render-progress';
|
||||
import { NodeItem } from './config/types';
|
||||
const { Column } = Table;
|
||||
|
||||
const dataSource: NodeItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.2',
|
||||
hostname: 'node-1',
|
||||
name: 'bj-web-service-1',
|
||||
address: '183.14.31.136',
|
||||
hostname: 'bj-web-service-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -31,13 +31,13 @@ const dataSource: NodeItem[] = [
|
||||
gram: '24 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '192.168.1.2',
|
||||
address: '192.168.1.5',
|
||||
hostname: 'node-2',
|
||||
name: 'bj-db-service-2',
|
||||
address: '172.24.1.36',
|
||||
hostname: 'bj-db-service-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
@@ -53,7 +53,51 @@ const dataSource: NodeItem[] = [
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ALIVE'
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'guangzhou-computed-node-2',
|
||||
address: '170.10.2.10',
|
||||
hostname: 'guangzhou-computed-node-2',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 2,
|
||||
gpu: 1.5,
|
||||
memory: '32 GiB',
|
||||
gram: '12 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'hangzhou-cache-node-1',
|
||||
address: '115.2.21.10',
|
||||
hostname: 'hangzhou-cache-node-1',
|
||||
labels: {},
|
||||
resources: {
|
||||
capacity: {
|
||||
cpu: 8,
|
||||
gpu: 4,
|
||||
memory: '64 GiB',
|
||||
gram: '24 Gib'
|
||||
},
|
||||
allocable: {
|
||||
cpu: 4,
|
||||
gpu: 2.5,
|
||||
memory: '40 GiB',
|
||||
gram: '16 Gib'
|
||||
}
|
||||
},
|
||||
state: 'ACTIVE'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -62,7 +106,7 @@ const Models: React.FC = () => {
|
||||
const { sortOrder, setSortOrder } = useTableSort({
|
||||
defaultSortOrder: 'descend'
|
||||
});
|
||||
const [total, setTotal] = useState(100);
|
||||
const [total, setTotal] = useState(10);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [queryParams, setQueryParams] = useState({
|
||||
current: 1,
|
||||
@@ -95,53 +139,6 @@ const Models: React.FC = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const RenderProgress = memo(
|
||||
(props: { record: NodeItem; dataIndex: string }) => {
|
||||
const { record, dataIndex } = props;
|
||||
const value1 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'allocable', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
const value2 = useMemo(() => {
|
||||
let value = _.get(record, ['resources', 'capacity', dataIndex]);
|
||||
if (['gram', 'memory'].includes(dataIndex)) {
|
||||
value = _.toNumber(value.replace(/GiB|Gib/, ''));
|
||||
}
|
||||
return value;
|
||||
}, [record, dataIndex]);
|
||||
|
||||
if (!value1 || !value2) {
|
||||
return <Progress percent={0} strokeColor="var(--ant-color-primary)" />;
|
||||
}
|
||||
const percent = _.round(value1 / value2, 2) * 100;
|
||||
const strokeColor = useMemo(() => {
|
||||
if (percent <= 50) {
|
||||
return 'var(--ant-color-primary)';
|
||||
}
|
||||
if (percent <= 80) {
|
||||
return 'var(--ant-color-warning)';
|
||||
}
|
||||
return 'var(--ant-color-error)';
|
||||
}, [percent]);
|
||||
return (
|
||||
<Progress
|
||||
steps={5}
|
||||
format={() => {
|
||||
return (
|
||||
<span style={{ color: 'var(--ant-color-text)' }}>{percent}%</span>
|
||||
);
|
||||
}}
|
||||
percent={percent}
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageContainer
|
||||
|
||||
Reference in New Issue
Block a user