feat: change deck edit style and add agent
This commit is contained in:
156
src/pages/ai-agent/edit/List.tsx
Normal file
156
src/pages/ai-agent/edit/List.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { useAgentStore } from '../store';
|
||||
import { useEffect } from 'react';
|
||||
import { CardBlank } from '@/components/card/CardBlank';
|
||||
import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined } from '@ant-design/icons';
|
||||
import clsx from 'clsx';
|
||||
import { isObjectNull } from '@/utils/is-null';
|
||||
const FormModal = () => {
|
||||
const [form] = Form.useForm();
|
||||
const containerStore = useAgentStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
showEdit: state.showEdit,
|
||||
setShowEdit: state.setShowEdit,
|
||||
formData: state.formData,
|
||||
updateData: state.updateData,
|
||||
};
|
||||
}),
|
||||
);
|
||||
useEffect(() => {
|
||||
const open = containerStore.showEdit;
|
||||
if (open) {
|
||||
const isNull = isObjectNull(containerStore.formData);
|
||||
if (isNull) {
|
||||
form.setFieldsValue({});
|
||||
} else form.setFieldsValue(containerStore.formData);
|
||||
}
|
||||
}, [containerStore.showEdit]);
|
||||
const onFinish = async (values: any) => {
|
||||
if (!values.id) {
|
||||
message.error('Cant add data');
|
||||
return;
|
||||
}
|
||||
containerStore.updateData(values);
|
||||
};
|
||||
const onClose = () => {
|
||||
containerStore.setShowEdit(false);
|
||||
form.resetFields();
|
||||
};
|
||||
const isEdit = containerStore.formData.id;
|
||||
return (
|
||||
<Modal
|
||||
title={isEdit ? 'Edit' : 'Add'}
|
||||
open={containerStore.showEdit}
|
||||
onClose={() => containerStore.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='key' label='key'>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name='description' label='description'>
|
||||
<Input.TextArea rows={4} />
|
||||
</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 agentStore = useAgentStore(
|
||||
useShallow((state) => {
|
||||
return {
|
||||
setFormData: state.setFormData,
|
||||
setShowEdit: state.setShowEdit,
|
||||
list: state.list,
|
||||
deleteData: state.deleteData,
|
||||
getList: state.getList,
|
||||
loading: state.loading,
|
||||
publishData: state.publishData,
|
||||
updateData: state.updateData,
|
||||
formData: state.formData,
|
||||
};
|
||||
}),
|
||||
);
|
||||
useEffect(() => {
|
||||
agentStore.getList();
|
||||
}, []);
|
||||
return (
|
||||
<div className='w-full h-full bg-gray-200 p-4 '>
|
||||
<div className='h-full bg-white p-4 rounded-md'>
|
||||
<div className='flex gap-2 flex-wrap'>
|
||||
{agentStore.list.map((item) => {
|
||||
return (
|
||||
<div className='card w-[300px]' key={item.id}>
|
||||
<div className='card-title flex flex-col justify-between '>
|
||||
{item.model} <div className='card-key'>{item.key}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className='flex mt-2 '>
|
||||
<Button.Group>
|
||||
<Tooltip title='Edit'>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
agentStore.setFormData(item);
|
||||
agentStore.setShowEdit(true);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<EditOutlined />}></Button>
|
||||
</Tooltip>
|
||||
<Tooltip title='Run Chat'>
|
||||
<Button
|
||||
icon={<CaretRightOutlined />}
|
||||
onClick={() => {
|
||||
// aiStore.setData(item);
|
||||
// aiStore.setOpen(true);
|
||||
message.error('Not implemented');
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title='Delete'>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
// agentStore.deleteData(item.id);
|
||||
message.error('Not implemented');
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<DeleteOutlined />}></Button>
|
||||
</Tooltip>
|
||||
</Button.Group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{agentStore.list.length === 0 && <div className='text-center w-full'>No data</div>}
|
||||
<CardBlank className='w-[300px]' />
|
||||
</div>
|
||||
</div>
|
||||
<FormModal />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
14
src/pages/ai-agent/index.tsx
Normal file
14
src/pages/ai-agent/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import { List } from './edit/List';
|
||||
import { Main } from './layouts';
|
||||
export const App = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<Main />}>
|
||||
<Route path='/' element={<Navigate to='/agent/edit/list' />}></Route>
|
||||
<Route path='edit/list' element={<List />} />
|
||||
<Route path='*' element={'Not Found'}></Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
14
src/pages/ai-agent/layouts/index.tsx
Normal file
14
src/pages/ai-agent/layouts/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Outlet } from 'react-router';
|
||||
|
||||
export const Main = () => {
|
||||
return (
|
||||
<div className='flex w-full h-full flex-col bg-gray-200'>
|
||||
<div className='layout-menu'>Agent</div>
|
||||
<div className='flex-grow w-full'>
|
||||
<div className='w-full h-full overflow-hidden'>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
94
src/pages/ai-agent/store/index.ts
Normal file
94
src/pages/ai-agent/store/index.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { create } from 'zustand';
|
||||
import { query } from '@/modules';
|
||||
import { message } from 'antd';
|
||||
type AgentStore = {
|
||||
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>;
|
||||
publishData: (data: any) => Promise<void>;
|
||||
};
|
||||
export const useAgentStore = create<AgentStore>((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: 'agent',
|
||||
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: 'agent',
|
||||
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: 'agent',
|
||||
key: 'delete',
|
||||
id,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
getList();
|
||||
message.success('Success');
|
||||
} else {
|
||||
message.error(res.msg || 'Request failed');
|
||||
}
|
||||
},
|
||||
publishData: async (data) => {
|
||||
const hasPublish = !!data.publish?.name;
|
||||
const publish = {
|
||||
name: 'test-import',
|
||||
};
|
||||
if (!hasPublish) {
|
||||
console.error('need publish.name');
|
||||
return;
|
||||
}
|
||||
const res = await query.post({
|
||||
path: 'agent',
|
||||
key: 'publish',
|
||||
data: {
|
||||
id: data.id,
|
||||
publish: publish,
|
||||
type: 'patch',
|
||||
},
|
||||
});
|
||||
if (res.code === 200) {
|
||||
message.success('Success');
|
||||
} else {
|
||||
message.error(res.msg || 'Request failed');
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user