feat: change deck edit style and add agent
This commit is contained in:
127
src/pages/panel/deck/Model.tsx
Normal file
127
src/pages/panel/deck/Model.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { isObjectNull } from '@/utils/is-null';
|
||||
import { Button, Form, Input, message, Modal, Select } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { useDeckPageStore } from './deck-store';
|
||||
export const FormModal = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [options, setOptions] = useState<{ label: string; value: any }[]>([]);
|
||||
const deckPageStore = useDeckPageStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
showEdit: state.showEdit,
|
||||
setShowEdit: state.setShowEdit,
|
||||
pageData: state.pageData,
|
||||
getPageData: state.getPageData,
|
||||
formData: state.formData,
|
||||
setFormData: state.setFormData,
|
||||
id: state.id,
|
||||
setSelected: state.setSelected,
|
||||
getSeleted: state.getSeleted,
|
||||
};
|
||||
}),
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!deckPageStore.showEdit) return;
|
||||
const pageData = deckPageStore.getPageData() || [];
|
||||
const data = pageData.map((item) => {
|
||||
const { container } = item?.data || {};
|
||||
const label = container?.title;
|
||||
return {
|
||||
label: label || item.id,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
setOptions(data);
|
||||
const selected = deckPageStore.getSeleted();
|
||||
const { cid } = selected?.data || {};
|
||||
if (cid) {
|
||||
form.setFieldsValue({ cid });
|
||||
return;
|
||||
}
|
||||
const isNull = isObjectNull(deckPageStore.formData);
|
||||
if (isNull) {
|
||||
form.setFieldsValue({});
|
||||
form.resetFields();
|
||||
} else {
|
||||
form.setFieldsValue(deckPageStore.formData);
|
||||
}
|
||||
}, [deckPageStore.showEdit, deckPageStore.pageData]);
|
||||
const onFinish = async (values: any) => {
|
||||
const pageData = deckPageStore.getPageData() || [];
|
||||
const page = pageData.find((item) => item.id === values.cid);
|
||||
if (!page) {
|
||||
message.error('Page not found');
|
||||
return;
|
||||
}
|
||||
const cid = values.cid;
|
||||
if (!cid) {
|
||||
return;
|
||||
}
|
||||
const el = document.querySelector(`[data-cid="${values.cid}"]`);
|
||||
if (el) {
|
||||
const data = (el as HTMLDivElement).dataset;
|
||||
const { cid, pid } = data;
|
||||
document.querySelectorAll('.active').forEach((item) => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
// el.scrollIntoView({ behavior: 'smooth', });
|
||||
deckPageStore.setSelected({ type: 'active', data: { cid, pid, rid: deckPageStore.id } });
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
const onClose = () => {
|
||||
deckPageStore.setShowEdit(false);
|
||||
deckPageStore.setFormData({});
|
||||
form.setFieldsValue({});
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
title={'Select a element'}
|
||||
open={deckPageStore.showEdit}
|
||||
onClose={() => deckPageStore.setShowEdit(false)}
|
||||
destroyOnClose
|
||||
footer={false}
|
||||
width={800}
|
||||
onCancel={onClose}>
|
||||
<Form
|
||||
className='mt-4'
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
labelCol={{
|
||||
span: 4,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 20,
|
||||
}}>
|
||||
<Form.Item name='id' hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name='cid' label='cid'>
|
||||
<Select
|
||||
options={options.map((item) => {
|
||||
return {
|
||||
label: (
|
||||
<div className='flex justify-between text-black'>
|
||||
{item.label}
|
||||
<div>{item.value}</div>
|
||||
</div>
|
||||
),
|
||||
value: item.value,
|
||||
};
|
||||
})}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label=' ' colon={false}>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
Choose
|
||||
</Button>
|
||||
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
60
src/pages/panel/deck/deck-store.ts
Normal file
60
src/pages/panel/deck/deck-store.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
type DeckPageStore = {
|
||||
id: string;
|
||||
setId: (id: string) => void;
|
||||
showEdit: boolean;
|
||||
setShowEdit: (showEdit: boolean) => void;
|
||||
formData: any;
|
||||
setFormData: (formData: any) => void;
|
||||
loading: boolean;
|
||||
setLoading: (loading: boolean) => void;
|
||||
pageData: any[];
|
||||
setPageData: (data: any[]) => void;
|
||||
getPageData: () => any[];
|
||||
selected: any;
|
||||
setSelected: (data: any) => void;
|
||||
getSeleted: () => any;
|
||||
code: string;
|
||||
setCode: (data: string) => void;
|
||||
getCode: () => string;
|
||||
};
|
||||
export const useDeckPageStore = create<DeckPageStore>((set, get) => ({
|
||||
id: '',
|
||||
setId: (id) => {
|
||||
set({ id });
|
||||
},
|
||||
showEdit: false,
|
||||
setShowEdit: (showEdit) => {
|
||||
set({ showEdit });
|
||||
},
|
||||
formData: {},
|
||||
setFormData: (formData) => {
|
||||
set({ formData });
|
||||
},
|
||||
loading: false,
|
||||
setLoading: (loading) => {
|
||||
set({ loading });
|
||||
},
|
||||
pageData: [],
|
||||
setPageData: (data) => {
|
||||
set({ pageData: data });
|
||||
},
|
||||
getPageData: () => {
|
||||
return get().pageData;
|
||||
},
|
||||
selected: null,
|
||||
setSelected: (data) => {
|
||||
set({ selected: data });
|
||||
},
|
||||
getSeleted: () => {
|
||||
return get().selected;
|
||||
},
|
||||
code: '',
|
||||
setCode: (data) => {
|
||||
set({ code: data });
|
||||
},
|
||||
getCode: () => {
|
||||
return get().code;
|
||||
},
|
||||
}));
|
||||
@@ -1,11 +1,15 @@
|
||||
import { Container, ContainerEdit } from '@abearxiong/container';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import { query, useStore, ws } from '@/modules';
|
||||
import { message } from 'antd';
|
||||
import { Button, message, Tooltip } from 'antd';
|
||||
import { getContainerData } from '@/modules/deck-to-flow/deck';
|
||||
import { usePanelStore } from '../store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { TextArea } from '@/pages/container/components/TextArea';
|
||||
import { CloseOutlined, SaveOutlined, SelectOutlined } from '@ant-design/icons';
|
||||
import { useDeckPageStore } from './deck-store';
|
||||
import { FormModal } from './Model.tsx';
|
||||
export const useListener = (id?: string, opts?: any) => {
|
||||
const { refresh } = opts || {};
|
||||
const connected = useStore((state) => state.connected);
|
||||
@@ -62,13 +66,15 @@ const getParent = (data: { children?: string[]; [key: string]: any }[], id: stri
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
export const Deck = () => {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = params.id;
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const containerRef = useRef<ContainerEdit | null>(null);
|
||||
const [pageData, setPageData] = useState<any>({});
|
||||
const [selected, setSelected] = useState<any>(null);
|
||||
const deckPageStore = useDeckPageStore();
|
||||
const { code, setCode } = deckPageStore;
|
||||
const { selected, setSelected } = deckPageStore;
|
||||
const panelStore = usePanelStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
@@ -78,12 +84,17 @@ export const Deck = () => {
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
deckPageStore.setId(id);
|
||||
fetch();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
ref.current?.addEventListener('onContainer', onContainer);
|
||||
return () => {
|
||||
ref.current?.removeEventListener('onContainer', onContainer);
|
||||
if (ref.current) {
|
||||
const children = ref.current;
|
||||
children.innerHTML = '';
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
const fetch = async () => {
|
||||
@@ -97,23 +108,9 @@ export const Deck = () => {
|
||||
console.log('data', data);
|
||||
const { page, containerList } = data;
|
||||
const result = getContainerData({ page, containerList });
|
||||
setPageData(result);
|
||||
deckPageStore.setPageData(result);
|
||||
init(result);
|
||||
}
|
||||
// if (res.code === 200) {
|
||||
// const data = res.data;
|
||||
// // setData([data]);
|
||||
// console.log('data', data);
|
||||
// const code = {
|
||||
// id: data.id,
|
||||
// title: data.title,
|
||||
// code: data.code,
|
||||
// data: data.data,
|
||||
// };
|
||||
// init([code]);
|
||||
// } else {
|
||||
// message.error(res.msg || 'Failed to fetch data');
|
||||
// }
|
||||
};
|
||||
const refresh = async (data: any) => {
|
||||
console.log('refresh', data);
|
||||
@@ -144,8 +141,6 @@ export const Deck = () => {
|
||||
const types = ['position', 'resize'];
|
||||
if (types.includes(data.type)) {
|
||||
const { type, data: containerData } = data;
|
||||
console.log('containerData', containerData);
|
||||
|
||||
if (type === 'position') {
|
||||
const { cid, left, top, rid } = containerData;
|
||||
const newData = {
|
||||
@@ -154,6 +149,7 @@ export const Deck = () => {
|
||||
id: cid,
|
||||
data: {
|
||||
style: {
|
||||
// position: 'absolute',
|
||||
left,
|
||||
top,
|
||||
},
|
||||
@@ -163,6 +159,10 @@ export const Deck = () => {
|
||||
if (left && top) {
|
||||
panelStore.updateNodeDataStyle(newData);
|
||||
}
|
||||
updateStyle(cid, { left, top });
|
||||
setTimeout(() => {
|
||||
setCodeStyle(cid);
|
||||
}, 1000);
|
||||
} else if (type === 'resize') {
|
||||
const { cid, rid, width, height } = containerData;
|
||||
const newData = {
|
||||
@@ -180,19 +180,85 @@ export const Deck = () => {
|
||||
if (width && height) {
|
||||
panelStore.updateNodeDataStyle(newData);
|
||||
}
|
||||
updateStyle(cid, { width, height });
|
||||
setTimeout(() => {
|
||||
setCodeStyle(cid);
|
||||
}, 1000);
|
||||
}
|
||||
} else if (data.type === 'active') {
|
||||
if (!data?.data?.cid) {
|
||||
setSelected(null);
|
||||
return;
|
||||
}
|
||||
const { cid, rid } = data;
|
||||
console.log('getParent', cid, pageData);
|
||||
const { cid, rid } = data?.data || {};
|
||||
setSelected(data);
|
||||
setCodeStyle(cid);
|
||||
} else {
|
||||
console.log('onContainer', data);
|
||||
}
|
||||
};
|
||||
const onSave = () => {
|
||||
const { cid, rid } = selected?.data || {};
|
||||
let data: any;
|
||||
try {
|
||||
data = JSON.parse(code);
|
||||
} catch (error) {
|
||||
message.error('JSON format error');
|
||||
return;
|
||||
}
|
||||
const newData = {
|
||||
id: rid,
|
||||
nodeData: {
|
||||
id: cid,
|
||||
data: {
|
||||
style: data,
|
||||
},
|
||||
},
|
||||
};
|
||||
panelStore.updateNodeDataStyle(newData);
|
||||
};
|
||||
const setCodeStyle = (cid: string) => {
|
||||
const pageData = deckPageStore.getPageData();
|
||||
const selected = deckPageStore.getSeleted();
|
||||
const _data = pageData.find((item) => item.id === cid);
|
||||
const node = _data?.data?.node || {};
|
||||
if (selected?.data?.cid === cid) {
|
||||
setCode('');
|
||||
setCode(JSON.stringify(node?.data?.style || {}, null, 2));
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (selected) {
|
||||
const { cid } = selected?.data || {};
|
||||
cid && setCodeStyle(cid);
|
||||
}
|
||||
}, [deckPageStore.selected]);
|
||||
|
||||
const updateStyle = (rid: string, style: any) => {
|
||||
const pageData = deckPageStore.getPageData();
|
||||
const _pageData = pageData.map((item) => {
|
||||
if (item.id === rid) {
|
||||
return {
|
||||
...item,
|
||||
data: {
|
||||
...item.data,
|
||||
node: {
|
||||
...item.data.node,
|
||||
data: {
|
||||
...item.data.node.data,
|
||||
style: {
|
||||
...item.data.node.data.style,
|
||||
...style,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
deckPageStore.setPageData([..._pageData]);
|
||||
};
|
||||
const init = async (data: any[]) => {
|
||||
console.log(
|
||||
'init',
|
||||
@@ -215,22 +281,54 @@ export const Deck = () => {
|
||||
return (
|
||||
<div className='w-full h-full relative'>
|
||||
<div className='w-full h-full bg-gray-200 '>
|
||||
<div className='text-center mb-10 font-bold text-4xl mt-4 '>Deck</div>
|
||||
<div className='text-center mb-10 font-bold text-4xl mt-4 flex items-center justify-center group'>
|
||||
Deck
|
||||
<Tooltip>
|
||||
<Button
|
||||
className='ml-4 hidden group-hover:block'
|
||||
icon={<SelectOutlined />}
|
||||
onClick={() => {
|
||||
deckPageStore.setShowEdit(true);
|
||||
}}></Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className='flex '
|
||||
style={{
|
||||
height: 'calc(100% - 32px)',
|
||||
}}>
|
||||
<div className='mx-auto border bg-white w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
|
||||
<div className='mx-auto border rounded-md bg-white w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
|
||||
</div>
|
||||
</div>
|
||||
{selected && (
|
||||
<div className='absolute bottom-5 z-50 w-full h-[200px]'>
|
||||
<div className=' p-2 card w-[80%] mx-auto border bg-red-50 overflow-scroll scrollbar'>
|
||||
<pre>{JSON.stringify(selected, null, 2)}</pre>
|
||||
<div className=' p-2 card w-[80%] mx-auto border bg-slate-200 rounded-md overflow-scroll scrollbar'>
|
||||
{/* <pre>{JSON.stringify(selected, null, 2)}</pre> */}
|
||||
<div>
|
||||
<Button.Group>
|
||||
<Tooltip title='Close'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelected(null);
|
||||
}}
|
||||
icon={<CloseOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title='Save'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
onSave();
|
||||
}}
|
||||
icon={<SaveOutlined />}></Button>
|
||||
</Tooltip>
|
||||
</Button.Group>
|
||||
</div>
|
||||
<div className='h-[200px]'>
|
||||
<TextArea className='h-[100px] rounded-md' value={code} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<FormModal />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user