feat: add layout and org

src/pages/app/edit/List.tsx

@@ -1,8 +1,8 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useUserAppStore } from '../store';
 import { useEffect } from 'react';
-import { Button, Form, Input, Modal } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Modal, Select, Tooltip } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
 import { useNavigate } from 'react-router';
 import { FileUpload } from '../modules/FileUpload';
@@ -61,12 +61,23 @@ const FormModal = () => {
         <Form.Item name='title' label='title'>
           <Input />
         </Form.Item>
+        <Form.Item name='domain' label='domain'>
+          <Input />
+        </Form.Item>
         <Form.Item name='key' label='key'>
           <Input />
         </Form.Item>
         <Form.Item name='description' label='description'>
           <Input.TextArea rows={4} />
         </Form.Item>
+        <Form.Item name='status' label='status'>
+          <Select
+            options={[
+              { label: 'Running', value: 'running' },
+              { label: 'Stop', value: 'stop' },
+            ]}
+          />
+        </Form.Item>
         <Form.Item label=' ' colon={false}>
           <Button type='primary' htmlType='submit'>
             Submit
@@ -87,6 +98,9 @@ export const List = () => {
         list: state.list,
         getList: state.getList,
         setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        deleteData: state.deleteData,
       };
     }),
   );
@@ -109,13 +123,32 @@ export const List = () => {
             <div className='flex flex-wrap gap-2'>
               {userAppStore.list.map((item) => {
                 return (
-                  <div
-                    className='card border-t w-[300px] '
-                    key={item.id}
-                    onClick={() => {
-                      navicate(`/app/${item.key}/verison/list`);
-                    }}>
-                    <div className='card-title'>{item.title}</div>
+                  <div className='card border-t w-[300px] ' key={item.id}>
+                    <div className='card-title' onClick={() => {}}>
+                      {item.title}
+                    </div>
+                    <div className='mt-2'>
+                      <Button.Group>
+                        <Tooltip title={'Edit'}>
+                          <Button
+                            icon={<EditOutlined />}
+                            onClick={() => {
+                              userAppStore.setFormData(item);
+                              userAppStore.setShowEdit(true);
+                            }}></Button>
+                        </Tooltip>
+                        <Tooltip title={'App Version List'}>
+                          <Button
+                            icon={<UnorderedListOutlined />}
+                            onClick={() => {
+                              navicate(`/app/${item.key}/verison/list`);
+                            }}></Button>
+                        </Tooltip>
+                        <Tooltip title={'Delete'}>
+                          <Button icon={<DeleteOutlined />} onClick={() => userAppStore.deleteData(item.id)}></Button>
+                        </Tooltip>
+                      </Button.Group>
+                    </div>
                   </div>
                 );
               })}