diff --git a/packages/react-components/apps/base/edit/Edit.tsx b/packages/react-components/apps/base/edit/Edit.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/react-components/apps/base/edit/List.tsx b/packages/react-components/apps/base/edit/List.tsx new file mode 100644 index 0000000..7f05504 --- /dev/null +++ b/packages/react-components/apps/base/edit/List.tsx @@ -0,0 +1,214 @@ +// @ts-nocheck +import { Button, Input, message, Modal, Table } from 'antd'; +import { Fragment, useEffect, useMemo, useState } from 'react'; +import { useDemoStore } from '../store'; +import { useShallow } from 'zustand/react/shallow'; +import { Form } from 'antd'; +import { useNavigate } from 'react-router'; +import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons'; +import clsx from 'clsx'; +import { isObjectNull } from '@/utils/is-null'; +import { CardBlank } from '@/components/card/CardBlank'; + +const FormModal = () => { + const [form] = Form.useForm(); + const demoStore = useDemoStore( + useShallow((state) => { + return { + showEdit: state.showEdit, + setShowEdit: state.setShowEdit, + formData: state.formData, + updateData: state.updateData, + setFormData: state.setFormData, + }; + }), + ); + useEffect(() => { + const open = demoStore.showEdit; + if (open) { + const isNull = isObjectNull(demoStore.formData); + if (isNull) { + form.setFieldsValue({}); + } else form.setFieldsValue(demoStore.formData); + } + }, [demoStore.showEdit]); + const onFinish = async (values: any) => { + demoStore.updateData(values); + }; + const onClose = () => { + demoStore.setShowEdit(false); + form.setFieldsValue({}); + demoStore.setFormData({}); + }; + const isEdit = demoStore.formData.id; + return ( + demoStore.setShowEdit(false)} + destroyOnClose + footer={false} + width={800} + onCancel={onClose}> +
+ + + + + + + + + + + + + + +
+ + ); +}; +export const List = () => { + const navicate = useNavigate(); + const demoStore = useDemoStore( + useShallow((state) => { + return { + setFormData: state.setFormData, + setShowEdit: state.setShowEdit, + list: state.list, + deleteData: state.deleteData, + getList: state.getList, + loading: state.loading, + updateData: state.updateData, + formData: state.formData, + }; + }), + ); + const [codeEdit, setCodeEdit] = useState(false); + const [code, setCode] = useState(''); + useEffect(() => { + demoStore.getList(); + }, []); + + const onAdd = () => { + demoStore.setFormData({}); + demoStore.setShowEdit(true); + }; + return ( +
+
+
+
+ {demoStore.list.length > 0 && + demoStore.list.map((item) => { + return ( + +
{ + setCode(item.code); + demoStore.setFormData(item); + setCodeEdit(true); + }}> +
+
{ + copy(item.code); + e.stopPropagation(); + message.success('copy code success'); + }}> + {item.title || '-'} +
+
{item.description ? item.description : '-'}
+
+
+ +
+
+ + + + + + +
+
+ + ); + })} + + {demoStore.list.length == 0 && ( +
+ No Data +
+ )} +
+
+
+
+
+ + +
+
+
+ { + setCode(value); + }} + className='h-full max-h-full scrollbar' + style={{ overflow: 'auto' }} + /> +
+
+
+ +
+ ); +}; diff --git a/packages/react-components/apps/base/store/index.ts b/packages/react-components/apps/base/store/index.ts new file mode 100644 index 0000000..08c035e --- /dev/null +++ b/packages/react-components/apps/base/store/index.ts @@ -0,0 +1,70 @@ +import { create } from 'zustand'; +// @ts-ignore +import { query } from '@/modules'; +import { message } from 'antd'; +type DemoStore = { + showEdit: boolean; + setShowEdit: (showEdit: boolean) => void; + formData: any; + setFormData: (formData: any) => void; + loading: boolean; + setLoading: (loading: boolean) => void; + list: any[]; + getList: () => Promise; + updateData: (data: any) => Promise; + deleteData: (id: string) => Promise; +}; +export const useDemoStore = create((set, get) => { + return { + showEdit: false, + setShowEdit: (showEdit) => set({ showEdit }), + formData: {}, + setFormData: (formData) => set({ formData }), + loading: false, + setLoading: (loading) => set({ loading }), + list: [], + getList: async () => { + set({ loading: true }); + + const res = await query.post({ + path: 'demo', + key: 'list', + }); + set({ loading: false }); + if (res.code === 200) { + set({ list: res.data }); + } else { + message.error(res.msg || 'Request failed'); + } + }, + updateData: async (data) => { + const { getList } = get(); + const res = await query.post({ + path: 'demo', + key: 'update', + data, + }); + if (res.code === 200) { + message.success('Success'); + set({ showEdit: false, formData: [] }); + getList(); + } else { + message.error(res.msg || 'Request failed'); + } + }, + deleteData: async (id) => { + const { getList } = get(); + const res = await query.post({ + path: 'demo', + key: 'delete', + id, + }); + if (res.code === 200) { + getList(); + message.success('Success'); + } else { + message.error(res.msg || 'Request failed'); + } + }, + }; +}); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 6ba9c58..e8f0492 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -5,3 +5,5 @@ export { Modal, modalStore, BlankModal, DialogModal }; import { createDOMElement } from './utils/dom/create-dom-element'; export { createDOMElement }; + +export * from './utils'; diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts index 2d3ed6b..66907db 100644 --- a/packages/ui/src/utils/index.ts +++ b/packages/ui/src/utils/index.ts @@ -1,2 +1,7 @@ -export * from './query-el'; +export * from './css'; +export * from './extra'; +export * from './history'; +export * from './is-null'; +export * from './nanoid'; export * from './store'; +export * from './query-el';