kevisual/kevisual-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: delete confirm add

Browse Source
This commit is contained in:
xion 2024-10-08 10:56:19 +08:00
parent c802c4c2f7
commit 1c39c74350
20 changed files with 537 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
src/admin-page/user-manage/edit/List.tsx Normal file
View File

@ -0,0 +1,207 @@
import { Button, Input, message, Modal, Table } from 'antd';
import { Fragment, useEffect, useMemo, useState } from 'react';
import { useUserStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd';
import { useNavigate } from 'react-router';
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined } 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 userStore = useUserStore(
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]);
const onFinish = async (values: any) => {
userStore.updateData(values);
};
const onClose = () => {
userStore.setShowEdit(false);
form.setFieldsValue({});
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 />
</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 navicate = useNavigate();
const userStore = useUserStore(
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(() => {
userStore.getList();
}, []);
const onAdd = () => {
userStore.setFormData({});
userStore.setShowEdit(true);
};
return (
<div className='w-full h-full flex'>
<div className='p-2'>
<Button onClick={onAdd} icon={<PlusOutlined />}></Button>
</div>
<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'>
{userStore.list.length > 0 &&
userStore.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);
userStore.setFormData(item);
setCodeEdit(true);
}}>
<div className='px-4 cursor-pointer'>
<div
className='font-bold'
onClick={(e) => {
e.stopPropagation();
// message.success('copy code success');
}}>
{item.username || '-'}
</div>
<div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
</div>
<div className='flex mt-2 '>
<Button.Group>
<Button
onClick={(e) => {
userStore.setFormData(item);
userStore.setShowEdit(true);
setCodeEdit(false);
e.stopPropagation();
}}
icon={<EditOutlined />}></Button>
<Button
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
userStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>
</Button.Group>
</div>
</div>
</Fragment>
);
})}
<CardBlank className='w-[400px]' />
{userStore.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 && 'hidden', 'hidden')}>
<div className='bg-white p-2'>
<div className='mt-2 ml-2 flex gap-2'>
<Button
onClick={() => {
setCodeEdit(false);
userStore.setFormData({});
}}
icon={<LeftOutlined />}></Button>
<Button
onClick={() => {
console.log('save', userStore.formData);
userStore.updateData({ ...userStore.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>
);
};

15
src/admin-page/user-manage/index.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Navigate, Route, Routes } from 'react-router-dom';
import { List } from './edit/List';
import { Main } from './layouts';
import { Login } from './login/Login';
export const App = () => {
return (
<Routes>
<Route element={<Main />}>
<Route path='/' element={<Navigate to='/user/edit/list' />}></Route>
<Route path='edit/list' element={<List />} />
</Route>
<Route path='login' element={<Login />} />
</Routes>
);
};

4
src/admin-page/user-manage/layouts/index.tsx Normal file
View File

@ -0,0 +1,4 @@
import { LayoutMain } from '@/modules/layout';
export const Main = () => {
return <LayoutMain title='User' />;
};

58
src/admin-page/user-manage/login/Login.tsx Normal file
View File

@ -0,0 +1,58 @@
import { Button, Form, Input } from 'antd';
import { useLoginStore } from '../store/login';
import { useShallow } from 'zustand/react/shallow';
import { useEffect } from 'react';
import { isObjectNull } from '@/utils/is-null';
export const Login = () => {
const [form] = Form.useForm();
const loginStore = useLoginStore(
useShallow((state) => {
return {
login: state.login,
formData: state.formData,
setFormData: state.setFormData,
};
}),
);
useEffect(() => {
const isNull = isObjectNull(loginStore.formData);
if (isNull) {
form.setFieldsValue({});
} else {
form.setFieldsValue(loginStore.formData);
}
}, [loginStore.formData]);
const onFinish = (values: any) => {
loginStore.setFormData(values);
loginStore.login();
};
return (
<div className='flex w-full h-full bg-slate-200'>
<div className='w-[600px] mx-auto mt-[10%] '>
<h1 className='mb-4 tracking-widest'>Login</h1>
<div className='card border-t-2 pt-8 px-8'>
<Form
form={form}
onFinish={onFinish}
labelCol={{
span: 4,
}}>
<Form.Item label='username' name='username'>
<Input />
</Form.Item>
<Form.Item label='password' name='password'>
<Input type='password' />
</Form.Item>
<Form.Item label=' ' colon={false}>
<div className='flex gap-2'>
<Button type='primary' htmlType='submit'>
Login
</Button>
</div>
</Form.Item>
</Form>
</div>
</div>
</div>
);
};

69
src/admin-page/user-manage/store/index.ts Normal file
View File

@ -0,0 +1,69 @@
import { create } from 'zustand';
import { query } from '@/modules';
import { message } from 'antd';
type UserStore = {
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 useUserStore = create<UserStore>((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: 'user',
key: 'list',
});
set({ loading: false });
if (res.code === 200) {
set({ list: res.data });
} else {
message.error(res.message || 'Request failed');
}
},
updateData: async (data) => {
const { getList } = get();
const res = await query.post({
path: 'user',
key: 'update',
data,
});
if (res.code === 200) {
message.success('Success');
set({ showEdit: false, formData: [] });
getList();
} else {
message.error(res.message || 'Request failed');
}
},
deleteData: async (id) => {
const { getList } = get();
const res = await query.post({
path: 'user',
key: 'delete',
id,
});
if (res.code === 200) {
getList();
message.success('Success');
} else {
message.error(res.message || 'Request failed');
}
},
};
});

59
src/admin-page/user-manage/store/login.ts Normal file
View File

@ -0,0 +1,59 @@
import { query } from '@/modules';
import { message } from 'antd';
import { create } from 'zustand';
import { history } from '@/utils/history';
type LoginStore = {
loading: boolean;
setLoading: (loading: boolean) => void;
formData: any;
setFormData: (formData: any) => void;
login: () => Promise<void>;
register: () => Promise<void>;
isLogin: boolean;
setIsLogin: (isLogin: boolean) => void;
};
export const useLoginStore = create<LoginStore>((set, get) => {
return {
loading: false,
setLoading: (loading) => set({ loading }),
formData: {},
setFormData: (formData) => set({ formData }),
login: async () => {
const { formData } = get();
const { username, password } = formData;
if (!username || !password) {
message.error('Please input username and password');
return;
}
set({ loading: true });
const loaded = message.loading('loading...', 0);
const res = await query.post({ path: 'user', key: 'login', username, password });
loaded();
if (res.code === 200) {
const { token } = res.data;
message.success('Success');
set({ isLogin: true });
localStorage.setItem('token', token);
// 跳到某一个页面，更新localStorage
history.push('/map');
} else {
message.error(res.message || 'Request failed');
}
},
register: async () => {
set({ loading: true });
const loaded = message.loading('loading...', 0);
const res = await query.post({ path: 'user', key: 'register' });
loaded();
if (res.code === 200) {
message.success('Success');
// 跳到某一个页面
// history.push('/map', {}, true);
} else {
message.error(res.message || 'Request failed');
}
},
isLogin: false,
setIsLogin: (isLogin) => set({ isLogin }),
};
});

7
src/pages/ai-agent/edit/List.tsx
View File

@ -135,6 +135,13 @@ export const List = () => {
onClick={(e) => {
// agentStore.deleteData(item.id);
message.error('Not implemented');
// Modal.confirm({
// title: 'Delete',
// content: 'Are you sure delete this data?',
// onOk: () => {
// agentStore.deleteData(item.id);
// },
// });
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>

18
src/pages/ai-chat/AiModule.tsx
View File

@ -2,14 +2,14 @@ import { useShallow } from 'zustand/react/shallow';
import { useAiStore } from './store/ai-store';
import { CloseOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, Form, Input, message, Modal, Tooltip } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
import { TextArea } from '../container/components/TextArea';
import clsx from 'clsx';
import { query } from '@/modules';
import { nanoid } from 'nanoid';
import { ChatMessage } from './module/ChatMessage';
import { isObjectNull } from '@/utils/is-null';
import { useNavigate } from 'react-router';
import { useLocation, useNavigate } from 'react-router';
const testId = '60aca66b-4be9-4266-9568-6001032c7e13';
const NormalMessage = ({ onSend }: { onSend: any }) => {
const [message, setMessage] = useState('');
@ -194,6 +194,8 @@ export const AiMoudle = () => {
}),
);
const [noPrompt, setNoPrompt] = useState(false);
const [currentPage, setCurrentPage] = useState('');
const location = useLocation();
useEffect(() => {
if (!aiStore.open) {
return;
@ -204,7 +206,6 @@ export const AiMoudle = () => {
} else {
form.setFieldsValue({ inputs: [] });
}
console.log('formData', aiStore.formData);
}, [aiStore.open, aiStore.formData]);
useEffect(() => {
if (!aiStore.open) {
@ -214,6 +215,12 @@ export const AiMoudle = () => {
}
}, [aiStore.open]);
const { send } = useListenQuery();
useLayoutEffect(() => {
if (aiStore.open) {
aiStore.setOpen(false);
}
}, [location.pathname]);
const onSend = () => {
const data = form.getFieldsValue();
send({ type: 'messages', data: { ...data, root: true } });
@ -221,11 +228,12 @@ export const AiMoudle = () => {
const onSendNoPrompt = (value) => {
send({ type: 'messages', data: { message: value, root: true } });
};
const inputs = useMemo(() => {
if (!aiStore.open) return [];
const inputs = form.getFieldValue('inputs');
const inputs = aiStore.formData?.inputs || [];
return inputs;
}, [aiStore.open]);
}, [aiStore.open, aiStore.formData]);
const isNotShow = inputs?.length === 0 || !inputs;
const OnlyNormalMessage = (
<Tooltip title='不需要任何预设prompt'>

9
src/pages/app/edit/AppVersionList.tsx
View File

@ -160,8 +160,15 @@ export const AppVersionList = () => {
/> */}
<Tooltip title='Delete'>
<Button
onClick={() => {
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
versionStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}
/>

13
src/pages/app/edit/List.tsx
View File

@ -157,7 +157,18 @@ export const List = () => {
}}></Button>
</Tooltip>
<Tooltip title={'Delete'}>
<Button icon={<DeleteOutlined />} onClick={() => userAppStore.deleteData(item.id)}></Button>
<Button
icon={<DeleteOutlined />}
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
userAppStore.deleteData(item.id);
},
});
e.stopPropagation();
}}></Button>
</Tooltip>
</Button.Group>
</div>

6
src/pages/chat-manager/chat-prompt/List.tsx
View File

@ -141,7 +141,13 @@ export const List = () => {
<Tooltip title='Delete'>
<Button
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
chatPromptStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>

15
src/pages/chat-manager/history/List.tsx
View File

@ -2,7 +2,7 @@ import { useShallow } from 'zustand/react/shallow';
import { useHistoryStore } from '../store/history';
import { useEffect } from 'react';
import { CardBlank } from '@/components/card/CardBlank';
import { Button, Tooltip } from 'antd';
import { Button, Modal, Tooltip } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
export const List = () => {
@ -33,7 +33,18 @@ export const List = () => {
<div className='card-footer mt-3'>
<Button.Group>
<Tooltip title='Delete'>
<Button onClick={() => historyStore.deleteData(item.id)} icon={<DeleteOutlined />}></Button>
<Button
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
historyStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>
</Tooltip>
</Button.Group>
</div>

13
src/pages/chat-manager/session/List.tsx
View File

@ -121,7 +121,18 @@ export const List = () => {
icon={<HistoryOutlined />}></Button>
</Tooltip>
<Tooltip title='Delete'>
<Button onClick={() => sessionStore.deleteData(item.id)} icon={<DeleteOutlined />}></Button>
<Button
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
sessionStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>
</Tooltip>
</Button.Group>
</div>

14
src/pages/container/edit/List.tsx
View File

@ -6,7 +6,7 @@ import { useShallow } from 'zustand/react/shallow';
import { Form } from 'antd';
import copy from 'copy-to-clipboard';
import { useNavigate } from 'react-router';
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, MessageOutlined } from '@ant-design/icons';
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, MessageOutlined, PlusOutlined } from '@ant-design/icons';
import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null';
import { CardBlank } from '@/components/card/CardBlank';
@ -124,7 +124,10 @@ export const ContainerList = () => {
containerStore.setShowEdit(true);
};
return (
<div className='w-full h-full flex flex-col'>
<div className='w-full h-full flex '>
<div className='p-2'>
<Button onClick={onAdd} icon={<PlusOutlined />}></Button>
</div>
<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'>
@ -180,7 +183,14 @@ export const ContainerList = () => {
icon={<LinkOutlined />}></Button>
<Button
onClick={(e) => {
e.stopPropagation();
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
containerStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>

35
src/pages/container/layouts/index.tsx
View File

@ -1,38 +1,5 @@
import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { Outlet, useLocation } from 'react-router';
import { useContainerStore } from '../store';
import { useEffect } from 'react';
import { useShallow } from 'zustand/react/shallow';
import { AiMoudle } from '@/pages/ai-chat';
import { LayoutMain } from '@/modules/layout';
export const Main = () => {
const containerStore = useContainerStore(
useShallow((state) => {
return {
setFormData: state.setFormData,
setShowEdit: state.setShowEdit,
};
}),
);
const location = useLocation();
const isEdit = location.pathname.includes('edit/list');
return (
<LayoutMain
title={
<>
Container
<Button
className={!isEdit ? 'hidden' : ''}
icon={<PlusOutlined />}
onClick={() => {
console.log('add');
containerStore.setFormData({});
containerStore.setShowEdit(true);
}}
/>
</>
}></LayoutMain>
);
return <LayoutMain title={<>Container</>}></LayoutMain>;
};

8
src/pages/file/edit/List.tsx
View File

@ -5,6 +5,7 @@ import path from 'path-browserify';
import prettyBytes from 'pretty-bytes';
import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null';
import { FileOutlined, FolderOutlined } from '@ant-design/icons';
export const CardPath = ({ children }: any) => {
const userAppStore = useFileStore(
useShallow((state) => {
@ -92,7 +93,9 @@ export const List = () => {
onClick={() => {
onDirectoryClick(item.prefix);
}}>
<div>Directory: </div>
<div>
<FolderOutlined />
</div>
<div>{showPrefix}</div>
</div>
);
@ -106,6 +109,9 @@ export const List = () => {
onClick={() => {
userAppStore.getFile(item.name);
}}>
<div>
<FileOutlined />
</div>
<div>{name}</div>
<div>size: {size}</div>
</div>

6
src/pages/org/edit/List.tsx
View File

@ -156,7 +156,13 @@ export const List = () => {
icon={<EditOutlined />}></Button>
<Button
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
userStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>

9
src/pages/panel/edit/List.tsx
View File

@ -174,8 +174,15 @@ export const List = () => {
</Tooltip>
<Tooltip title='delete'>
<Button
onClick={() => {
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
editStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}
/>

7
src/pages/prompt/edit/List.tsx
View File

@ -235,7 +235,14 @@ export const List = () => {
icon={<EditOutlined />}></Button>
<Button
onClick={(e) => {
e.stopPropagation();
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
promptStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>

6
src/pages/user/edit/List.tsx
View File

@ -148,7 +148,13 @@ export const List = () => {
icon={<EditOutlined />}></Button>
<Button
onClick={(e) => {
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
userStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>