chore: add modal

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<DropdownProps> = (props) => {
+  const { trigger, items, onClick } = props;
+  return (
+    <Space>
+      <Dropdown menu={{ items, onClick }} trigger={trigger}>
+        <Button
+          onClick={(e) => e.preventDefault()}
+          style={{ fontSize: '14px' }}
+          type="text"
+          icon={renderIcon('MoreOutlined')}
+        ></Button>
+      </Dropdown>
+    </Space>
+  );
+};
+
+export default DropDownActions;

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<ModalFooterProps> = ({ onOk, onCancel }) => {
+  return (
+    <Space size={20}>
+      <Button onClick={onCancel} style={{ width: '88px' }}>
+        取消
+      </Button>
+      <Button type="primary" onClick={onOk} style={{ width: '88px' }}>
+        确定
+      </Button>
+    </Space>
+  );
+};
+
+export default ModalFooter;

src/components/seal-form/seal-select.tsx

@@ -39,6 +39,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   };
 
   const handleOnBlur = (e: any) => {
+    setIsFocus(false);
     props.onBlur?.(e);
   };
 
@@ -61,6 +62,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
         onBlur={handleOnBlur}
         onSearch={handleOnSearch}
         onChange={handleChange}
+        notFoundContent={null}
       >
         {children}
       </Select>

src/config/index.ts

@@ -0,0 +1,7 @@
+import { PageActionType } from './types';
+
+export const PageAction: Record<string, PageActionType> = {
+  CREATE: 'create',
+  UPDATE: 'update',
+  VIEW: 'view'
+};

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';

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 {

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<SortOrder>(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
+  };
+}

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<AddModalProps> = ({
+  title,
+  action,
+  open,
+  onOk,
+  onCancel
+}) => {
+  const [form] = Form.useForm();
+  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="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>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddModal;

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<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 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 (
-    <PageContainer
-      ghost
-      header={{
-        title: 'Dashboard'
-      }}
-      extra={[]}
-    >
-      <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)" />
-              </>
-            );
+    <>
+      <PageContainer
+        ghost
+        header={{
+          title: 'Models'
+        }}
+        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={handleAddModal}
+              >
+                Import Module
+              </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="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>
+        >
+          <Column
+            title="Model Name"
+            dataIndex="name"
+            key="name"
+            width={400}
+            render={(text, record) => {
+              return (
+                <>
+                  <Tooltip>{text}</Tooltip>
+                  <Progress
+                    percent={30}
+                    strokeColor="var(--ant-color-primary)"
+                  />
+                </>
+              );
+            }}
+          />
+          <Column
+            title="Create Time"
+            dataIndex="createTime"
+            key="createTime"
+            defaultSortOrder="descend"
+            sortOrder={sortOrder}
+            showSorterTooltip={false}
+            sorter={true}
+          />
+          <Column
+            title="Operation"
+            key="operation"
+            render={(text, record) => {
+              return (
+                <Space>
+                  <Button size="middle">Open in PlayGround</Button>
+                  <Button size="middle" danger>
+                    Delete
+                  </Button>
+                </Space>
+              );
+            }}
+          />
+        </Table>
+      </PageContainer>
+      <AddModal
+        open={openAddModal}
+        action={action}
+        title={title}
+        onCancel={handleModalCancel}
+        onOk={handleModalOk}
+      ></AddModal>
+    </>
   );
 };
 
-export default Dashboard;
+export default Models;

src/pages/playground/components/params-settings.tsx

@@ -64,7 +64,6 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         >
           <SealInput.Input
             label="Seed"
-            disabled={true}
             style={{ width: INPUT_WIDTH.default }}
           ></SealInput.Input>
         </Form.Item>
@@ -72,11 +71,7 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
           name="select"
           rules={[{ required: true }]}
         >
-          <SealSelect
-            label="Select"
-            disabled={true}
-            style={{ width: INPUT_WIDTH.default }}
-          >
+          <SealSelect label="Select" style={{ width: INPUT_WIDTH.default }}>
             <Select.Option value={1}>1</Select.Option>
             <Select.Option value={2}>2</Select.Option>
             <Select.Option value={3}>3</Select.Option>