From 313da7a9d224f1e428242429a8cc8c8266370776 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 20 May 2024 15:43:26 +0800 Subject: [PATCH] chore: add modal --- src/components/drop-down-actions/index.tsx | 35 +++ src/components/modal-footer/index.tsx | 20 ++ src/components/seal-form/seal-select.tsx | 2 + src/config/index.ts | 7 + src/config/types.ts | 9 + src/global.less | 10 + src/hooks/use-table-sort.ts | 25 ++ src/pages/models/components/add-modal.tsx | 51 ++++ src/pages/models/index.tsx | 281 +++++++++++++----- .../playground/components/params-settings.tsx | 7 +- 10 files changed, 361 insertions(+), 86 deletions(-) create mode 100644 src/components/drop-down-actions/index.tsx create mode 100644 src/components/modal-footer/index.tsx create mode 100644 src/config/types.ts create mode 100644 src/hooks/use-table-sort.ts create mode 100644 src/pages/models/components/add-modal.tsx diff --git a/src/components/drop-down-actions/index.tsx b/src/components/drop-down-actions/index.tsx new file mode 100644 index 00000000..78cb702f --- /dev/null +++ b/src/components/drop-down-actions/index.tsx @@ -0,0 +1,35 @@ +import * as icons from '@ant-design/icons'; +import { Button, Dropdown, Space } from 'antd'; +import type { MenuProps } from 'antd/es/menu'; +import react from 'react'; + +type DropdownProps = { + trigger?: Array<'click' | 'hover' | 'contextMenu'>; + items: MenuProps['items']; + onClick: (e: any) => void; +}; +const renderIcon = (icon: string) => { + if (!icon) { + return null; + } + // @ts-ignore + const Icon = icons[icon] as React.FC; + return react.createElement(Icon); +}; +const DropDownActions: React.FC = (props) => { + const { trigger, items, onClick } = props; + return ( + + + + + + ); +}; + +export default DropDownActions; diff --git a/src/components/modal-footer/index.tsx b/src/components/modal-footer/index.tsx new file mode 100644 index 00000000..ad6e4622 --- /dev/null +++ b/src/components/modal-footer/index.tsx @@ -0,0 +1,20 @@ +import { Button, Space } from 'antd'; + +type ModalFooterProps = { + onOk: () => void; + onCancel: () => void; +}; +const ModalFooter: React.FC = ({ onOk, onCancel }) => { + return ( + + + + + ); +}; + +export default ModalFooter; diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx index 807c24e4..9d1c6dba 100644 --- a/src/components/seal-form/seal-select.tsx +++ b/src/components/seal-form/seal-select.tsx @@ -39,6 +39,7 @@ const SealSelect: React.FC = (props) => { }; const handleOnBlur = (e: any) => { + setIsFocus(false); props.onBlur?.(e); }; @@ -61,6 +62,7 @@ const SealSelect: React.FC = (props) => { onBlur={handleOnBlur} onSearch={handleOnSearch} onChange={handleChange} + notFoundContent={null} > {children} diff --git a/src/config/index.ts b/src/config/index.ts index e69de29b..7815d469 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -0,0 +1,7 @@ +import { PageActionType } from './types'; + +export const PageAction: Record = { + CREATE: 'create', + UPDATE: 'update', + VIEW: 'view' +}; diff --git a/src/config/types.ts b/src/config/types.ts new file mode 100644 index 00000000..4960c262 --- /dev/null +++ b/src/config/types.ts @@ -0,0 +1,9 @@ +export interface DropDownItem { + key: string; + label: string; + icon?: React.ReactNode; + disabled?: boolean; + iconfont?: boolean; +} + +export type PageActionType = 'create' | 'update' | 'view'; diff --git a/src/global.less b/src/global.less index c193860b..d54ad3c2 100644 --- a/src/global.less +++ b/src/global.less @@ -50,6 +50,16 @@ html { &.ant-table-css-var { --ant-table-row-hover-bg: #e6e6e6; } + &.ant-modal-css-var { + --ant-modal-title-font-size: 14px; + --ant-modal-header-margin-bottom: 26px; + --ant-modal-footer-margin-top: 30px; + } + } + .css-var-ru.ant-btn { + --ant-button-content-font-size-lg: 13px; + --ant-button-content-font-size: 12px; + --ant-button-content-font-size-sm: 12px; } .css-var-rf.ant-menu-css-var { diff --git a/src/hooks/use-table-sort.ts b/src/hooks/use-table-sort.ts new file mode 100644 index 00000000..f802ee54 --- /dev/null +++ b/src/hooks/use-table-sort.ts @@ -0,0 +1,25 @@ +import type { SortOrder } from 'antd/es/table/interface'; +import { useState } from 'react'; + +export default function useTableSort({ + defaultSortOrder = 'descend' +}: { + defaultSortOrder?: SortOrder; +}) { + const [sortOrder, setSortOrder] = useState(defaultSortOrder); + + const handleSortChange = (order: SortOrder) => { + if (order) { + setSortOrder(order); + } else if (defaultSortOrder === 'descend') { + setSortOrder('ascend'); + } else if (defaultSortOrder === 'ascend') { + setSortOrder('descend'); + } + }; + + return { + sortOrder, + setSortOrder: handleSortChange + }; +} diff --git a/src/pages/models/components/add-modal.tsx b/src/pages/models/components/add-modal.tsx new file mode 100644 index 00000000..b94c24b3 --- /dev/null +++ b/src/pages/models/components/add-modal.tsx @@ -0,0 +1,51 @@ +import ModalFooter from '@/components/modal-footer'; +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'; + +type AddModalProps = { + title: string; + action: PageActionType; + open: boolean; + onOk: () => void; + onCancel: () => void; +}; +const AddModal: React.FC = ({ + title, + action, + open, + onOk, + onCancel +}) => { + const [form] = Form.useForm(); + return ( + } + > +
+ + + + + + + + + +
+ + ); +}; + +export default AddModal; diff --git a/src/pages/models/index.tsx b/src/pages/models/index.tsx index 5d4fd72d..e9c397c7 100644 --- a/src/pages/models/index.tsx +++ b/src/pages/models/index.tsx @@ -1,8 +1,22 @@ 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 { PlusOutlined, SyncOutlined } from '@ant-design/icons'; +import useTableSort from '@/hooks/use-table-sort'; +import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons'; import { PageContainer } from '@ant-design/pro-components'; -import { Button, Input, Progress, Space, Table } from 'antd'; +import { + Button, + Input, + Modal, + Progress, + Space, + Table, + Tooltip, + message +} from 'antd'; +import { useState } from 'react'; +import AddModal from './components/add-modal'; const { Column } = Table; const dataSource = [ @@ -13,7 +27,7 @@ const dataSource = [ }, { key: '2', - name: 'meta-llama/Meta-Llama-3-8B', + name: 'meta-llama/Meta-Llama-3-8B-nksrlsl-esLscs-1:latest', createTime: '2021-09-01 12:00:00' }, { @@ -23,86 +37,193 @@ const dataSource = [ } ]; -const columns = [ - { - title: '姓名', - dataIndex: 'name', - key: 'name' - }, - { - title: '年龄', - dataIndex: 'age', - key: 'age' - }, - { - title: '住址', - dataIndex: 'address', - key: 'address' - } -]; - -const Dashboard: React.FC = () => { +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(PageAction.CREATE); + const [title, setTitle] = useState(''); + 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 handleAddModal = () => { + setOpenAddModal(true); + setAction(PageAction.CREATE); + setTitle('Import Module'); + }; + + 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 models?', + onOk() { + console.log('OK'); + message.success('successfully!'); + }, + onCancel() { + console.log('Cancel'); + } + }); + }; return ( - - - - - - } - right={ -
- -
- } - > - - { - return ( - <> - {text} - - - ); + <> + + + + + + } + right={ + + + + + } + > +
- a.createTime - b.createTime} - /> - { - return ; - }} - /> -
- + > + { + return ( + <> + {text} + + + ); + }} + /> + + { + return ( + + + + + ); + }} + /> + + + + ); }; -export default Dashboard; +export default Models; diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index ddf6b194..d9fc9516 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -64,7 +64,6 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => { > @@ -72,11 +71,7 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => { name="select" rules={[{ required: true }]} > - + 1 2 3