feat: add demo
This commit is contained in:
parent
6f6d64b065
commit
36f865b026
0
packages/react-components/apps/base/edit/Edit.tsx
Normal file
0
packages/react-components/apps/base/edit/Edit.tsx
Normal file
214
packages/react-components/apps/base/edit/List.tsx
Normal file
214
packages/react-components/apps/base/edit/List.tsx
Normal file
@ -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 (
|
||||
<Modal
|
||||
title={isEdit ? 'Edit' : 'Add'}
|
||||
open={demoStore.showEdit}
|
||||
onClose={() => demoStore.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='title' label='title'>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name='description' label='description'>
|
||||
<Input.TextArea rows={4} />
|
||||
</Form.Item>
|
||||
<Form.Item name='code' label='code'>
|
||||
<Input.TextArea />
|
||||
</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 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 (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className='flex flex-grow overflow-hidden h-full'>
|
||||
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
||||
<div className='flex flex-wrap gap-x-10 gap-y-4 rounded pt-10 justify-center'>
|
||||
{demoStore.list.length > 0 &&
|
||||
demoStore.list.map((item) => {
|
||||
return (
|
||||
<Fragment key={item.id}>
|
||||
<div
|
||||
className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setCode(item.code);
|
||||
demoStore.setFormData(item);
|
||||
setCodeEdit(true);
|
||||
}}>
|
||||
<div className='px-4 cursor-pointer'>
|
||||
<div
|
||||
className='font-bold'
|
||||
onClick={(e) => {
|
||||
copy(item.code);
|
||||
e.stopPropagation();
|
||||
message.success('copy code success');
|
||||
}}>
|
||||
{item.title || '-'}
|
||||
</div>
|
||||
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
|
||||
</div>
|
||||
<div className='w-full text-xs'>
|
||||
<Input.TextArea className='max-h-[240px] scrollbar' value={item.code} />
|
||||
</div>
|
||||
<div className='flex mt-2 '>
|
||||
<Button.Group>
|
||||
<Button onClick={() => {}} icon={<SettingOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
demoStore.setFormData(item);
|
||||
demoStore.setShowEdit(true);
|
||||
setCodeEdit(false);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<EditOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
// navicate('/demo/preview/' + item.id);
|
||||
window.open('/demo/preview/' + item.id);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<LinkOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
demoStore.deleteData(item.id);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<DeleteOutlined />}></Button>
|
||||
</Button.Group>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
<CardBlank className='w-[400px]' />
|
||||
{demoStore.list.length == 0 && (
|
||||
<div className='text-center' key={'no-data'}>
|
||||
No Data
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx('bg-gray-100 border-l border-bg-slate-300 w-[600px] flex-shrink-0', (!codeEdit || true) && 'hidden')}>
|
||||
<div className='bg-white p-2'>
|
||||
<div className='mt-2 ml-2 flex gap-2'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCodeEdit(false);
|
||||
demoStore.setFormData({});
|
||||
}}
|
||||
icon={<LeftOutlined />}></Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log('save', demoStore.formData);
|
||||
demoStore.updateData({ ...demoStore.formData, code });
|
||||
}}
|
||||
icon={<SaveOutlined />}></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[94%] p-2 rounded-2 shadow-sm'>
|
||||
<Input.TextArea
|
||||
value={code}
|
||||
onChange={(value) => {
|
||||
setCode(value);
|
||||
}}
|
||||
className='h-full max-h-full scrollbar'
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormModal />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
70
packages/react-components/apps/base/store/index.ts
Normal file
70
packages/react-components/apps/base/store/index.ts
Normal file
@ -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<void>;
|
||||
updateData: (data: any) => Promise<void>;
|
||||
deleteData: (id: string) => Promise<void>;
|
||||
};
|
||||
export const useDemoStore = create<DemoStore>((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');
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -5,3 +5,5 @@ export { Modal, modalStore, BlankModal, DialogModal };
|
||||
import { createDOMElement } from './utils/dom/create-dom-element';
|
||||
|
||||
export { createDOMElement };
|
||||
|
||||
export * from './utils';
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user