feat: basic page for servers and website

src/client/pages/Servers.tsx

@@ -1,6 +1,126 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
+import { Button, Form, Input, Modal, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { PlusOutlined } from '@ant-design/icons';
 
 export const Servers: React.FC = React.memo(() => {
-  return <div>Servers</div>;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div>
+      <div className="h-24 flex items-center">
+        <div className="text-2xl flex-1">Servers</div>
+        <div>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            size="large"
+            onClick={() => setIsModalOpen(true)}
+          >
+            Add Server
+          </Button>
+        </div>
+      </div>
+
+      <ServerList />
+
+      <Modal
+        title="Add Server"
+        open={isModalOpen}
+        onOk={handleOk}
+        onCancel={() => setIsModalOpen(false)}
+      >
+        <Form layout="vertical">
+          <Form.Item label="Server Name">
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
 });
 Servers.displayName = 'Servers';
+
+interface ServerInfoRecordType {
+  status: 'online' | 'offline';
+  nodeName: string;
+  type: string; // KVM | Hyper-V
+  location: string;
+  uptime: number; // second
+  load: number;
+  network: string;
+  traffic: string;
+  cpu: string;
+  ram: string;
+  hdd: string;
+}
+
+export const ServerList: React.FC = React.memo(() => {
+  const dataSource: ServerInfoRecordType[] = [
+    {
+      status: 'online',
+      nodeName: 'node1',
+      type: 'KVM',
+      location: 'Chicago',
+      uptime: 82989,
+      load: 0.2,
+      network: '82.9K | 89.3K',
+      traffic: '21.6G | 18.3G',
+      cpu: '5%',
+      ram: '1G/2G',
+      hdd: '25G/30G',
+    },
+  ];
+
+  const columns = useMemo((): ColumnsType<ServerInfoRecordType> => {
+    return [
+      {
+        dataIndex: 'status',
+        title: 'Status',
+      },
+      {
+        dataIndex: 'nodeName',
+        title: 'Node Name',
+      },
+      {
+        dataIndex: 'type',
+        title: 'Type',
+      },
+      {
+        dataIndex: 'uptime',
+        title: 'Uptime',
+      },
+      {
+        dataIndex: 'load',
+        title: 'Load',
+      },
+      {
+        dataIndex: 'network',
+        title: 'Network',
+      },
+      {
+        dataIndex: 'traffic',
+        title: 'Traffic',
+      },
+      {
+        dataIndex: 'cpu',
+        title: 'cpu',
+      },
+      {
+        dataIndex: 'ram',
+        title: 'ram',
+      },
+      {
+        dataIndex: 'hdd',
+        title: 'hdd',
+      },
+    ];
+  }, []);
+
+  return <Table columns={columns} dataSource={dataSource} pagination={false} />;
+});
+ServerList.displayName = 'ServerList';

src/client/pages/Website.tsx

@@ -1,6 +1,94 @@
-import React from 'react';
+import {
+  BarChartOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+import { Button, Form, Input, Modal, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import React, { useMemo, useState } from 'react';
 
 export const Website: React.FC = React.memo(() => {
-  return <div>Website</div>;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div>
+      <div className="h-24 flex items-center">
+        <div className="text-2xl flex-1">Servers</div>
+        <div>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            size="large"
+            onClick={() => setIsModalOpen(true)}
+          >
+            Add Website
+          </Button>
+        </div>
+      </div>
+
+      <WebsiteList />
+
+      <Modal
+        title="Add Server"
+        open={isModalOpen}
+        onOk={handleOk}
+        onCancel={() => setIsModalOpen(false)}
+      >
+        <Form layout="vertical">
+          <Form.Item label="Server Name">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Domain">
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
 });
 Website.displayName = 'Website';
+
+interface WebsiteInfoRecordType {
+  name: string;
+  domain: string;
+}
+
+export const WebsiteList: React.FC = React.memo(() => {
+  const dataSource: WebsiteInfoRecordType[] = [
+    {
+      name: 'tianji',
+      domain: 'tianji.msgbyte.com',
+    },
+  ];
+
+  const columns = useMemo((): ColumnsType<WebsiteInfoRecordType> => {
+    return [
+      {
+        dataIndex: 'name',
+        title: 'Name',
+      },
+      {
+        dataIndex: 'domain',
+        title: 'Domain',
+      },
+      {
+        key: 'action',
+        render: () => {
+          return (
+            <div className="flex gap-2 justify-end">
+              <Button icon={<EditOutlined />}>Edit</Button>
+              <Button icon={<BarChartOutlined />}>View</Button>
+            </div>
+          );
+        },
+      },
+    ];
+  }, []);
+
+  return <Table columns={columns} dataSource={dataSource} pagination={false} />;
+});
+WebsiteList.displayName = 'WebsiteList';