chore: add modal

2024-05-20 15:43:26 +08:00
parent eeab170970
commit 313da7a9d2
10 changed files with 361 additions and 86 deletions
@@ -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;
@@ -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;
@@ -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>