jialin
2 years ago
parent
c948110153
commit
eeab170970
@ -1,15 +1,26 @@
|
||||
.ant-pro-layout {
|
||||
.ant-pro-sider {
|
||||
padding: 10px;
|
||||
&.ant-layout-sider {
|
||||
background: var(--color-white-1);
|
||||
}
|
||||
&.ant-layout-sider {
|
||||
background: var(--color-white-1);
|
||||
}
|
||||
.ant-layout-sider-children {
|
||||
background-color: var(--color-fill-1);
|
||||
border-inline: none;
|
||||
border-radius: 32px;
|
||||
border-radius: var(--menu-border-radius-base);
|
||||
padding-inline: 16px;
|
||||
padding-block-end: 12px;
|
||||
}
|
||||
.umi-plugin-layout-right {
|
||||
width: 100%;
|
||||
.umi-plugin-layout-action {
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
border-radius: var(--menu-border-radius-base);
|
||||
&:hover {
|
||||
background-color: var(--color-white-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
.page-tools {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import { useMemo } from 'react';
|
||||
import styles from './index.less';
|
||||
|
||||
type PageToolsProps = {
|
||||
left?: React.ReactNode;
|
||||
right?: React.ReactNode;
|
||||
marginBottom?: number;
|
||||
marginTop?: number;
|
||||
};
|
||||
|
||||
const PageTools: React.FC<PageToolsProps> = (props) => {
|
||||
const { left, right, marginBottom, marginTop } = props;
|
||||
|
||||
const newStyle: Record<string, string> = useMemo(() => {
|
||||
const style: Record<string, string> = {};
|
||||
if (marginBottom) {
|
||||
style.marginBottom = `${marginBottom}px`;
|
||||
}
|
||||
if (marginTop) {
|
||||
style.marginTop = `${marginTop}px`;
|
||||
}
|
||||
return style;
|
||||
}, [marginBottom, marginTop]);
|
||||
|
||||
return (
|
||||
<div className={styles['page-tools']} style={newStyle}>
|
||||
<div className="left">{left}</div>
|
||||
<div className="right">{right}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageTools;
|
||||
@ -0,0 +1,16 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function useTableRowSelection() {
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
|
||||
const onSelectChange = (selectedRowKeys: React.Key[]) => {
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
};
|
||||
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: onSelectChange
|
||||
};
|
||||
|
||||
return rowSelection;
|
||||
}
|
||||
@ -1,16 +1,108 @@
|
||||
import PageTools from '@/components/page-tools';
|
||||
import useTableRowSelection from '@/hooks/use-table-row-selection';
|
||||
import { PlusOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Input, Progress, Space, Table } from 'antd';
|
||||
const { Column } = Table;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'llama3:latest',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'meta-llama/Meta-Llama-3-8B',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'apple/OpenELM-3B-Instructor',
|
||||
createTime: '2021-09-01 12:00:00'
|
||||
}
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 'address'
|
||||
}
|
||||
];
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const rowSelection = useTableRowSelection();
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: 'Dashboard',
|
||||
title: 'Dashboard'
|
||||
}}
|
||||
extra={[]}
|
||||
>
|
||||
<div>Models</div>
|
||||
<PageTools
|
||||
marginBottom={22}
|
||||
left={
|
||||
<Space>
|
||||
<Input placeholder="按名称查询" style={{ width: 300 }}></Input>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ color: 'var(--ant-color-primary)' }}
|
||||
icon={<SyncOutlined></SyncOutlined>}
|
||||
></Button>
|
||||
</Space>
|
||||
}
|
||||
right={
|
||||
<div>
|
||||
<Button icon={<PlusOutlined></PlusOutlined>} type="primary">
|
||||
Import Module
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
></PageTools>
|
||||
<Table dataSource={dataSource} rowSelection={rowSelection}>
|
||||
<Column
|
||||
title="Model Name"
|
||||
dataIndex="name"
|
||||
key="name"
|
||||
render={(text, record) => {
|
||||
return (
|
||||
<>
|
||||
<span>{text}</span>
|
||||
<Progress percent={30} strokeColor="var(--ant-color-primary)" />
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
title="Create Time"
|
||||
dataIndex="createTime"
|
||||
key="createTime"
|
||||
defaultSortOrder="descend"
|
||||
sortOrder="descend"
|
||||
sorter={(a, b) => a.createTime - b.createTime}
|
||||
/>
|
||||
<Column
|
||||
title="Operation"
|
||||
key="operation"
|
||||
render={(text, record) => {
|
||||
return <Button size="middle">Open in PlayGround</Button>;
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
export default Dashboard;
|
||||
|
||||
@ -1,26 +1,43 @@
|
||||
import { Input,Button} from 'antd';
|
||||
import { useState } from 'react';
|
||||
import { SendOutlined } from '@ant-design/icons';
|
||||
import './message-input.less'
|
||||
import { Button, Input } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import './message-input.less';
|
||||
|
||||
const MessageInput: React.FC = () => {
|
||||
const { TextArea } = Input;
|
||||
const [message, setMessage] = useState('')
|
||||
const handleInputChange = (value:string) => {
|
||||
setMessage(value)
|
||||
}
|
||||
const [message, setMessage] = useState('');
|
||||
const handleInputChange = (value: string) => {
|
||||
setMessage(value);
|
||||
};
|
||||
const handleSendMessage = () => {
|
||||
console.log('send message:', message)
|
||||
}
|
||||
console.log('send message:', message);
|
||||
};
|
||||
const SendButton: React.FC = () => {
|
||||
return <Button type="primary" shape="circle" size="middle" icon={<SendOutlined />} onClick={() => handleSendMessage()}></Button>
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
size="middle"
|
||||
icon={<SendOutlined />}
|
||||
onClick={() => handleSendMessage()}
|
||||
></Button>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="messageInput">
|
||||
<TextArea placeholder='send your message' autoSize={{minRows: 1,maxRows: 6}} onChange={e => handleInputChange(e.target.value)} value={message} size="large" variant='borderless'></TextArea>
|
||||
<span className="send-btn"><SendButton/></span>
|
||||
<TextArea
|
||||
placeholder="send your message"
|
||||
autoSize={{ minRows: 1, maxRows: 6 }}
|
||||
onChange={(e) => handleInputChange(e.target.value)}
|
||||
value={message}
|
||||
size="large"
|
||||
variant="borderless"
|
||||
></TextArea>
|
||||
<span className="send-btn">
|
||||
<SendButton />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageInput;
|
||||
export default MessageInput;
|
||||
|
||||
Loading…
Reference in new issue