test: 暂存

src/pages/container/components/TextArea.tsx

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 
 type Props = {
   value?: string;
-  onChange?: (evn: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (data: string) => void;
   readonly?: boolean;
   className?: string;
 };
@@ -13,14 +13,19 @@ export const TextArea = (props: Props) => {
   useEffect(() => {
     setCode(props.value || '');
   }, []);
+  const _onChange = (value: string) => {
+    setCode(value);
+    props.onChange && props.onChange(value);
+  };
   return (
-    <div className={clsx('min-h-16 max-h-52 overflow-scroll p-1')}>
+    <div className={clsx('min-h-16 max-h-52 overflow-scroll p-1 ', props.className)}>
       <CodeEditor
         value={code}
         language='js'
+        className='border rounded-sm'
         readOnly={props.readonly}
         placeholder='Please enter JS code.'
-        onChange={(evn) => setCode(evn.target.value)}
+        onChange={(evn) => _onChange(evn.target.value)}
         padding={10}
         style={{
           backgroundColor: '#f5f5f5',

src/pages/container/edit/List.tsx

@@ -1,4 +1,3 @@
-import { query } from '@/modules';
 import { Button, Input, message, Modal, Table } from 'antd';
 import { useEffect, useState } from 'react';
 import { TextArea } from '../components/TextArea';
@@ -14,6 +13,7 @@ const FormModal = () => {
         showEdit: state.showEdit,
         setShowEdit: state.setShowEdit,
         formData: state.formData,
+        updateData: state.updateData,
       };
     }),
   );
@@ -21,15 +21,16 @@ const FormModal = () => {
     const open = containerStore.showEdit;
     if (open) {
       form.setFieldsValue(containerStore.formData || {});
+    } else {
+      form.resetFields();
     }
   }, [containerStore.showEdit]);
   const onFinish = async (values: any) => {
-    console.log(values);
-    onClose();
+    containerStore.updateData(values);
   };
   const onClose = () => {
     containerStore.setShowEdit(false);
-    form.setFieldsValue({});
+    form.resetFields();
   };
   const isEdit = containerStore.formData.id;
   return (
@@ -39,13 +40,16 @@ const FormModal = () => {
       onClose={() => containerStore.setShowEdit(false)}
       destroyOnClose
       footer={false}
+      width={800}
       onCancel={onClose}>
       <Form
         form={form}
         onFinish={onFinish}
         labelCol={{
           span: 4,
-          offset: 2,
+        }}
+        wrapperCol={{
+          span: 20,
         }}>
         <Form.Item name='id' hidden>
           <Input />
@@ -60,7 +64,7 @@ const FormModal = () => {
           <Button type='primary' htmlType='submit'>
             Submit
           </Button>
-          <Button htmlType='reset' onClick={onClose}>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
             Cancel
           </Button>
         </Form.Item>
@@ -75,7 +79,9 @@ export const ContainerList = () => {
         setFormData: state.setFormData,
         setShowEdit: state.setShowEdit,
         list: state.list,
+        deleteData: state.deleteData,
         getList: state.getList,
+        loading: state.loading,
       };
     }),
   );
@@ -84,10 +90,10 @@ export const ContainerList = () => {
   }, []);
 
   const columns = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-    },
+    // {
+    //   title: 'ID',
+    //   dataIndex: 'id',
+    // },
     {
       title: 'Title',
       dataIndex: 'title',
@@ -95,6 +101,7 @@ export const ContainerList = () => {
     {
       title: 'Code',
       dataIndex: 'code',
+      width: '40%',
       render: (text: string, record: any) => {
         return <TextArea value={text} readonly />;
       },
@@ -117,14 +124,20 @@ export const ContainerList = () => {
               }}>
               Edit
             </Button>
-            <Button danger>Delete</Button>
+            <Button
+              danger
+              onClick={() => {
+                containerStore.deleteData(record.id);
+              }}>
+              Delete
+            </Button>
           </div>
         );
       },
     },
   ];
   return (
-    <div className='w-full h-full '>
+    <div className='w-full h-full flex flex-col'>
       <div className='mb-2 w-full p-2 bg-white rounded-lg'>
         <Button
           className='w-20 '
@@ -136,7 +149,19 @@ export const ContainerList = () => {
           Add
         </Button>
       </div>
-      <Table dataSource={containerStore.list} rowKey='id' columns={columns} />
+      <div className='flex-grow overflow-scroll'>
+        <Table
+          pagination={false}
+          scroll={{
+            y: 600,
+          }}
+          loading={containerStore.loading}
+          dataSource={containerStore.list}
+          rowKey='id'
+          columns={columns}
+        />
+      </div>
+      <div className='h-2'></div>
       <FormModal />
     </div>
   );

src/pages/container/store/index.ts

@@ -10,7 +10,7 @@ type ContainerStore = {
   setLoading: (loading: boolean) => void;
   list: any[];
   getList: () => Promise<void>;
-  postData: (data: any) => Promise<void>;
+  updateData: (data: any) => Promise<void>;
   deleteData: (id: string) => Promise<void>;
 };
 export const useContainerStore = create<ContainerStore>((set, get) => {
@@ -23,17 +23,20 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
     setLoading: (loading) => set({ loading }),
     list: [],
     getList: async () => {
+      set({ loading: true });
+
       const res = await query.post({
         path: 'container',
         key: 'list',
       });
+      set({ loading: false });
       if (res.code === 200) {
         set({ list: res.data });
       } else {
         message.error(res.msg || 'Request failed');
       }
     },
-    postData: async (data) => {
+    updateData: async (data) => {
       const { getList } = get();
       const res = await query.post({
         path: 'container',
@@ -41,6 +44,8 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
         data,
       });
       if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
         getList();
       } else {
         message.error(res.msg || 'Request failed');
@@ -55,6 +60,7 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
       });
       if (res.code === 200) {
         getList();
+        message.success('Success');
       } else {
         message.error(res.msg || 'Request failed');
       }