perf: publish change and panel to App

src/pages/org/edit/UserList.tsx

@@ -0,0 +1,176 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useOrgStore } from '../store';
+import { useNavigation, useParams } from 'react-router';
+import { useEffect } from 'react';
+import { Button, Input, message, Modal, Select, Tooltip } from 'antd';
+import { DeleteOutlined, EditOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
+import { Form } from 'antd';
+import { useNavigate } from 'react-router';
+import { isObjectNull } from '@/utils/is-null';
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const userStore = useOrgStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+        setFormData: state.setFormData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = userStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(userStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(userStore.formData);
+    }
+  }, [userStore.showEdit, userStore.formData]);
+  const onFinish = async (values: any) => {
+    userStore.updateData(values);
+  };
+  const onClose = () => {
+    userStore.setShowEdit(false);
+    userStore.setFormData({});
+  };
+  const isEdit = userStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={userStore.showEdit}
+      onClose={() => userStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='username' label='username'>
+          <Input disabled={isEdit} />
+        </Form.Item>
+        <Form.Item name='role' label='role'>
+          <Select
+            options={[
+              {
+                label: 'admin',
+                value: 'admin',
+              },
+              {
+                label: 'user',
+                value: 'user',
+              },
+            ]}></Select>
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const UserList = () => {
+  const param = useParams();
+  const navicate = useNavigate();
+  const orgStore = useOrgStore(
+    useShallow((state) => {
+      return {
+        users: state.users,
+        org: state.org,
+        setOrgId: state.setOrgId,
+        getOrg: state.getOrg,
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+      };
+    }),
+  );
+  useEffect(() => {
+    if (param.id) {
+      orgStore.setOrgId(param.id);
+      orgStore.getOrg();
+    }
+    return () => {
+      orgStore.setFormData({});
+    };
+  }, []);
+  return (
+    <div className='w-full h-full bg-gray-200 flex'>
+      <div className='p-2 bg-white mr-2'>
+        <Button
+          icon={<PlusOutlined />}
+          onClick={() => {
+            // orgStore.setShowEdit(true);
+            message.info('Coming soon');
+          }}></Button>
+      </div>
+      <div className='p-4 pt-12  flex-grow relative'>
+        <div className='absolute top-2'>
+          <Tooltip title='返回'>
+            <Button
+              onClick={() => {
+                navicate(-1);
+              }}
+              icon={<LeftOutlined />}></Button>
+          </Tooltip>
+        </div>
+        <div className='p-4  bg-white  rounded-lg border shadow-md h-full'>
+          <div className='flex gap-4'>
+            {orgStore.users.map((item) => {
+              const isOwner = item.role === 'owner';
+              return (
+                <div key={item.id} className='card w-[300px] border-t justify-between p-2 border-b'>
+                  <div className='card-title capitalize'>username: {item.username}</div>
+                  <div className='flex gap-2 capitalize'>{item.role || '-'}</div>
+                  <div className='mt-2'>
+                    <Button.Group>
+                      <Tooltip title='Edit'>
+                        <Button
+                          icon={<EditOutlined />}
+                          disabled={isOwner}
+                          onClick={() => {
+                            // orgStore.setFormData(item);
+                            // orgStore.setShowEdit(true);
+                            message.info('Coming soon');
+                          }}></Button>
+                      </Tooltip>
+                      <Tooltip title='delete'>
+                        <Button
+                          icon={<DeleteOutlined />}
+                          disabled={isOwner}
+                          onClick={() => {
+                            //
+                            message.info('Coming soon');
+                          }}></Button>
+                      </Tooltip>
+                    </Button.Group>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      <FormModal />
+    </div>
+  );
+};