feat: models list

src/pages/models/index.tsx

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

src/pages/playground/components/chatContent.tsx

@@ -1,6 +1,11 @@
 import avatar from '@/assets/images/avatar.png';
 import logo from '@/assets/images/logo.png';
-import { CopyOutlined, DislikeOutlined, EditOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  CopyOutlined,
+  DislikeOutlined,
+  EditOutlined,
+  SyncOutlined
+} from '@ant-design/icons';
 import { Button, Space, Tooltip } from 'antd';
 import chatStyle from './chat-style.less';
 import ChatEmpty from './chatEmpty';

src/pages/playground/components/messageInput.tsx

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