diff --git a/src/pages/Footprint/index.tsx b/src/pages/Footprint/index.tsx index ec40211..2462c42 100644 --- a/src/pages/Footprint/index.tsx +++ b/src/pages/Footprint/index.tsx @@ -12,7 +12,7 @@ import axios from 'axios'; const FootprintPage = () => { const [loading, setLoading] = useState(false); const [btnLoading, setBtnLoading] = useState(false) - const [modalLoading, setModalLoading] = useState(false) + const [editLoading, setEditLoading] = useState(false) const [footprintList, setFootprintList] = useState([]); const [isModelOpen, setIsModelOpen] = useState(false); @@ -129,7 +129,7 @@ const FootprintPage = () => { }; const editFootprintData = async (id: number) => { - setModalLoading(true); + setEditLoading(true); try { setIsMethod("edit"); @@ -143,10 +143,10 @@ const FootprintPage = () => { setFootprint(data); form.setFieldsValue(data); } catch (error) { - setModalLoading(false); + setEditLoading(false); } - setModalLoading(false); + setEditLoading(false); }; const onSubmit = async () => { @@ -196,7 +196,7 @@ const FootprintPage = () => { // 通过详细地址获取纬度 const getGeocode = async () => { - setModalLoading(true) + setEditLoading(true) try { const address = form.getFieldValue("address") @@ -215,14 +215,14 @@ const FootprintPage = () => { // 立即触发校验 form.validateFields(['position']); - setModalLoading(false) + setEditLoading(false) return data.geocodes[0].location; } else { message.warning('未找到该地址的经纬度'); } } catch (error) { - setModalLoading(false) + setEditLoading(false) } @@ -266,7 +266,7 @@ const FootprintPage = () => { /> - +
diff --git a/src/pages/Oss/index.tsx b/src/pages/Oss/index.tsx index cee902f..e23a467 100644 --- a/src/pages/Oss/index.tsx +++ b/src/pages/Oss/index.tsx @@ -9,7 +9,7 @@ import { titleSty } from '@/styles/sty'; const StoragePage = () => { const [loading, setLoading] = useState(false); const [btnLoading, setBtnLoading] = useState(false); - const [modalLoading, setModalLoading] = useState(false) + const [editLoading, setEditLoading] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false); const [oss, setOss] = useState({} as Oss); @@ -122,7 +122,7 @@ const StoragePage = () => { }; const editOssData = async (record: Oss) => { - setModalLoading(true) + setEditLoading(true) try { setIsModalOpen(true); @@ -131,10 +131,10 @@ const StoragePage = () => { setOss(data); form.setFieldsValue(data); } catch (error) { - setModalLoading(false) + setEditLoading(false) } - setModalLoading(false) + setEditLoading(false) }; const delOssData = async (id: number) => { @@ -207,7 +207,7 @@ const StoragePage = () => { { - const [current, setCurrent] = useState(1); const [loading, setLoading] = useState(false); - const [recordList, setRecordList] = useState([]); + const [recordList, setRecordList] = useState([]); const [form] = Form.useForm(); const { RangePicker } = DatePicker; const getRecordList = async () => { - setLoading(true); - const { data } = await getRecordListAPI(); - setRecordList(data as Record[]); + try { + const { data } = await getRecordListAPI(); + setRecordList(data as Record[]); + } catch (error) { + setLoading(false); + } + setLoading(false); }; useEffect(() => { + setLoading(true); getRecordList() }, []); const delRecordData = async (id: number) => { setLoading(true); - await delRecordDataAPI(id); - await getRecordList(); - form.resetFields() - setCurrent(1) - notification.success({ message: '🎉 删除说说成功' }) - - setLoading(false); + try { + await delRecordDataAPI(id); + await getRecordList(); + form.resetFields() + notification.success({ message: '🎉 删除说说成功' }) + } catch (error) { + setLoading(false); + } }; const columns = [ @@ -110,15 +115,23 @@ const RecordPage = () => { }, ]; - const onSubmit = async (values: FilterForm) => { - const query = { - key: values.content, - startDate: values.createTime && values.createTime[0].valueOf() + '', - endDate: values.createTime && values.createTime[1].valueOf() + '' + const onFilterSubmit = async (values: FilterForm) => { + setLoading(true); + + try { + const query = { + key: values.content, + startDate: values.createTime && values.createTime[0].valueOf() + '', + endDate: values.createTime && values.createTime[1].valueOf() + '' + } + + const { data } = await getRecordListAPI({ query }); + setRecordList(data as Record[]); + } catch (error) { + setLoading(false); } - const { data } = await getRecordListAPI({ query }); - setRecordList(data as Record[]); + setLoading(false); } return ( @@ -126,7 +139,7 @@ const RecordPage = () => { <Card className='my-2 overflow-scroll'> - <Form form={form} layout="inline" onFinish={onSubmit} autoComplete="off" className='flex-nowrap'> + <Form form={form} layout="inline" onFinish={onFilterSubmit} autoComplete="off" className='flex-nowrap'> <Form.Item label="内容" name="content" className='min-w-[200px]'> <Input placeholder='请输入关键词' /> </Form.Item> @@ -150,11 +163,7 @@ const RecordPage = () => { scroll={{ x: 'max-content' }} pagination={{ position: ['bottomCenter'], - current, defaultPageSize: 8, - onChange(current) { - setCurrent(current) - } }} /> </Card> diff --git a/src/pages/Role/index.tsx b/src/pages/Role/index.tsx index ac3c604..5232d3d 100644 --- a/src/pages/Role/index.tsx +++ b/src/pages/Role/index.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { Table, Button, Form, Input, Popconfirm, message, Card, Modal, Transfer, Spin } from 'antd'; import { getRouteListAPI } from '@/api/Route'; -import { getRoleListAPI, addRoleDataAPI, editRoleDataAPI, delRoleDataAPI, getRouteListAPI as getRoleRouteListAPI, bindingRouteAPI } from '@/api/Role'; +import { getRoleListAPI, addRoleDataAPI, editRoleDataAPI, delRoleDataAPI, getRouteListAPI as getRoleRouteListAPI, bindingRouteAPI, getRoleDataAPI } from '@/api/Role'; import { Role } from '@/types/app/role'; import Title from '@/components/Title'; import { ColumnsType } from 'antd/es/table'; @@ -9,8 +9,11 @@ import "./index.scss" const RolePage = () => { const [loading, setLoading] = useState<boolean>(false); + const [btnLoading, setBtnLoading] = useState(false) + const [editLoading, setEditLoading] = useState<boolean>(false); const [bindingLoading, setBindingLoading] = useState<boolean>(false); - const [addLoading, setAddLoading] = useState(false) + + const [form] = Form.useForm(); const [id, setId] = useState(0) const [role, setRole] = useState<Role>({} as Role); @@ -44,7 +47,6 @@ const RolePage = () => { // 获取指定角色的路由列表 const getRoleRouteList = async (id: number) => { const { data } = await getRoleRouteListAPI(id); - setTargetKeys(data.map(item => item.id) as number[]) }; @@ -56,75 +58,95 @@ const RolePage = () => { // 获取角色列表 const getRoleList = async () => { - setLoading(true); - const { data } = await getRoleListAPI(); - setRoleList(data as Role[]); + try { + const { data } = await getRoleListAPI(); + setRoleList(data as Role[]); + } catch (error) { + setLoading(false); + } + setLoading(false); }; useEffect(() => { + setLoading(true); getRoleList() getRouteList() }, []); - - const [form] = Form.useForm(); - + // 绑定路由 const bindingRoute = (record: Role) => { setIsModalOpen(true) getRoleRouteList(record.id) setId(record.id) } - const editRoleData = (record: Role) => { - setRole(record); - form.setFieldsValue(record); + const editRoleData = async (record: Role) => { + setEditLoading(true); + + try { + const { data } = await getRoleDataAPI(record.id); + setRole(data); + form.setFieldsValue(data); + } catch (error) { + setEditLoading(false); + } + + setEditLoading(false); }; const delRoleData = async (id: number) => { setLoading(true); - await delRoleDataAPI(id); - message.success('🎉 删除角色成功'); - getRoleList(); + + try { + await delRoleDataAPI(id); + await getRoleList(); + message.success('🎉 删除角色成功'); + } catch (error) { + setLoading(false); + } }; const onSubmit = async () => { - setLoading(true); - setAddLoading(true) + setBtnLoading(true) - form.validateFields().then(async (values: Role) => { - if (role.id) { - await editRoleDataAPI({ ...role, ...values }); - message.success('🎉 编辑角色成功'); - } else { - await addRoleDataAPI(values); - message.success('🎉 新增角色成功'); - } + try { + form.validateFields().then(async (values: Role) => { + if (role.id) { + await editRoleDataAPI({ ...role, ...values }); + message.success('🎉 编辑角色成功'); + } else { + await addRoleDataAPI(values); + message.success('🎉 新增角色成功'); + } - getRoleList(); - form.resetFields(); - form.setFieldsValue({ name: '', description: '' }) - setRole({} as Role); - }); + await getRoleList(); + form.resetFields(); + form.setFieldsValue({ name: '', description: '' }) + setRole({} as Role); + }); + } catch (error) { + setBtnLoading(false) + } - setAddLoading(false) + setBtnLoading(false) }; - const onChange: any = (list: number[]) => { - setTargetKeys(list); - }; + // 设置目标路由 + const onChange: any = (list: number[]) => setTargetKeys(list); // 绑定路由 const onBindingRouteSubmit = async () => { setBindingLoading(true); - await bindingRouteAPI(id, targetKeys) - setBindingLoading(false) - message.success('🎉 绑定成功'); - setIsModalOpen(false) - - // 刷新页面 - window.location.reload() + try { + await bindingRouteAPI(id, targetKeys) + message.success('🎉 绑定成功'); + // 刷新页面 + window.location.reload() + } catch (error) { + setBindingLoading(false); + } } // 让n改变 触发Transfer重新渲染 @@ -157,7 +179,7 @@ const RolePage = () => { </Form.Item> <Form.Item> - <Button type="primary" htmlType="submit" loading={addLoading} className="w-full">{role.id ? '编辑角色' : '新增角色'}</Button> + <Button type="primary" htmlType="submit" loading={btnLoading} className="w-full">{role.id ? '编辑角色' : '新增角色'}</Button> </Form.Item> </Form> </Card> @@ -177,7 +199,7 @@ const RolePage = () => { </Card> </div> - <Modal title="角色权限" open={isModalOpen} onCancel={() => [setIsModalOpen(false), setN(n + 1)]} footer={null} className='RolePageModal'> + <Modal loading={editLoading} title="角色权限" open={isModalOpen} onCancel={() => [setIsModalOpen(false), setN(n + 1)]} footer={null} className='RolePageModal'> <div className='flex justify-center py-6'> <Spin spinning={bindingLoading}> <Transfer diff --git a/src/pages/Route/index.tsx b/src/pages/Route/index.tsx index a76b321..3dc6fd4 100644 --- a/src/pages/Route/index.tsx +++ b/src/pages/Route/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { Table, Button, Form, Input, Popconfirm, message, Card } from 'antd'; -import { getRouteListAPI, addRouteDataAPI, editRouteDataAPI, delRouteDataAPI } from '@/api/Route'; +import { getRouteListAPI, addRouteDataAPI, editRouteDataAPI, delRouteDataAPI, getRouteDataAPI } from '@/api/Route'; import { Route } from '@/types/app/route'; import Title from '@/components/Title'; import { ColumnsType } from 'antd/es/table'; @@ -9,6 +9,8 @@ const RoutePage = () => { const [loading, setLoading] = useState<boolean>(false); const [btnLoading, setBtnLoading] = useState(false) + const [form] = Form.useForm(); + const [route, setRoute] = useState<Route>({} as Route); const [list, setList] = useState<Route[]>([]); @@ -30,50 +32,73 @@ const RoutePage = () => { ]; const getRouteList = async () => { - setLoading(true); - const { data } = await getRouteListAPI(); - setList(data as Route[]); + try { + const { data } = await getRouteListAPI(); + setList(data); + } catch (error) { + setLoading(false); + } + setLoading(false); }; useEffect(() => { + setLoading(true); getRouteList(); }, []); - const [form] = Form.useForm(); - const editRouteData = (record: Route) => { - setRoute(record); - form.setFieldsValue(record); + const editRouteData = async (record: Route) => { + setLoading(true) + + try { + const { data } = await getRouteDataAPI(record.id); + setRoute(data); + form.setFieldsValue(data); + } catch (error) { + setLoading(false) + } + + setLoading(false) }; const delRouteData = async (id: number) => { setLoading(true); - await delRouteDataAPI(id); - message.success('🎉 删除路由成功'); - getRouteList(); + + try { + await delRouteDataAPI(id); + await getRouteList(); + message.success('🎉 删除路由成功'); + } catch (error) { + setLoading(false) + } }; const onSubmit = async () => { setLoading(true); setBtnLoading(true) - - form.validateFields().then(async (values: Route) => { - - if (route.id) { - await editRouteDataAPI({ ...route, ...values }); - message.success('🎉 编辑路由成功'); - } else { - await addRouteDataAPI(values); - message.success('🎉 新增路由成功'); - } - getRouteList(); - form.resetFields(); - form.setFieldsValue({ path: '', description: '' }) - setRoute({} as Route); - }); + try { + form.validateFields().then(async (values: Route) => { + if (route.id) { + await editRouteDataAPI({ ...route, ...values }); + message.success('🎉 编辑路由成功'); + } else { + await addRouteDataAPI(values); + message.success('🎉 新增路由成功'); + } - setBtnLoading(false) + await getRouteList(); + form.resetFields(); + form.setFieldsValue({ path: '', description: '' }) + setRoute({} as Route); + }); + } catch (error) { + setLoading(false) + setBtnLoading(true) + } + + setLoading(false) + setBtnLoading(true) }; return ( diff --git a/src/pages/Rss/index.tsx b/src/pages/Rss/index.tsx index c203e2b..ac16217 100644 --- a/src/pages/Rss/index.tsx +++ b/src/pages/Rss/index.tsx @@ -13,18 +13,24 @@ const IconText = ({ icon, text }: { icon: React.FC; text: string }) => ( </Space> ); -const RssPage = () => { - const [list, setList] = useState<Rss[]>([]); +export default () => { const [loading, setLoading] = useState<boolean>(true); + const [list, setList] = useState<Rss[]>([]); + const getRssList = async () => { - setLoading(true); - const { data } = await getRssListAPI(); - setList(data as Rss[]); + try { + const { data } = await getRssListAPI(); + setList(data); + } catch (error) { + setLoading(false); + } + setLoading(false); }; useEffect(() => { + setLoading(true); getRssList(); }, []); @@ -32,8 +38,8 @@ const RssPage = () => { <> <Title value='订阅中心' /> - <Card className='mt-2 min-h-[calc(100vh-180px)]'> - <Spin spinning={loading}> + <Spin spinning={loading}> + <Card className='mt-2 min-h-[calc(100vh-180px)]'> <List dataSource={list} size="large" @@ -62,10 +68,8 @@ const RssPage = () => { </List.Item> )} /> - </Spin> - </Card> + </Card> + </Spin> </> ); -}; - -export default RssPage; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/pages/Setup/components/My/index.tsx b/src/pages/Setup/components/My/index.tsx index 2eb0b24..be6f45c 100644 --- a/src/pages/Setup/components/My/index.tsx +++ b/src/pages/Setup/components/My/index.tsx @@ -12,36 +12,43 @@ interface UserForm { } const UserPage = () => { - const [form] = Form.useForm<UserForm>(); const [loading, setLoading] = useState<boolean>(false); + + const [form] = Form.useForm<UserForm>(); const store = useUserStore(); const getUserData = async () => { - setLoading(true); - - const { data } = await getUserDataAPI(store.user?.id); - store.setUser(data); - form.setFieldsValue(data); + try { + const { data } = await getUserDataAPI(store.user?.id); + store.setUser(data); + form.setFieldsValue(data); + } catch (error) { + setLoading(false); + } setLoading(false); }; useEffect(() => { + setLoading(true); getUserData(); }, []); const onSubmit = async (values: UserForm) => { setLoading(true) - await editUserDataAPI({ - id: store.user.id, ...values, - role: undefined - }); - message.success("🎉 修改用户信息成功"); - store.setUser(values as User); - getUserData(); + try { + await editUserDataAPI({ + id: store.user.id, ...values, + role: undefined + }); - setLoading(false) + await getUserData(); + message.success("🎉 修改用户信息成功"); + store.setUser(values as User); + } catch (error) { + setLoading(false) + } }; return ( @@ -88,7 +95,7 @@ const UserPage = () => { </Form.Item> <Form.Item> - <Button type="primary" htmlType="submit" className="w-full" loading={loading}>编辑信息</Button> + <Button type="primary" htmlType="submit" className="w-full" loading={loading}>保存</Button> </Form.Item> </Form> </div> diff --git a/src/pages/Setup/components/System/index.tsx b/src/pages/Setup/components/System/index.tsx index 0136143..32ca598 100644 --- a/src/pages/Setup/components/System/index.tsx +++ b/src/pages/Setup/components/System/index.tsx @@ -35,29 +35,23 @@ const SystemPage = () => { }; const handleSubmit = async (values: EditUser) => { - try { - setLoading(true) + setLoading(true) + try { await editAdminPassAPI(values); + confirm({ title: '提示', content: '🔒️ 修改成功，请重新登录', okText: '确定', - onOk: () => { - store.quitLogin(); - }, + onOk: store.quitLogin, cancelButtonProps: { style: { display: 'none' } } }); - - setLoading(false) } catch (error) { setLoading(false) - - notification.error({ - message: '错误', - description: '修改密码失败，请重试：' + error - }); } + + setLoading(false) }; return ( @@ -97,9 +91,7 @@ const SystemPage = () => { </Form.Item> <Form.Item> - <Button type="primary" htmlType="submit" loading={loading} className="w-full"> - 保存 - </Button> + <Button type="primary" htmlType="submit" loading={loading} className="w-full">保存</Button> </Form.Item> </Form> </div> diff --git a/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx b/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx index 89d7b86..a697bfa 100644 --- a/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx +++ b/src/pages/Setup/components/Theme/components/RecordTheme/index.tsx @@ -6,66 +6,68 @@ import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project'; const RecordTheme = () => { const [loading, setLoading] = useState<boolean>(false); - // const [theme, setTheme] = useState<Theme>({} as Theme); const [form] = Form.useForm(); const getLayoutData = async () => { - setLoading(true); + try { + const { data } = await getConfigDataAPI<Theme>("layout"); - const { data } = await getConfigDataAPI<Theme>("layout"); - - // setTheme(data); - - form.setFieldsValue({ - record_name: data.record_name, - record_info: data.record_info - }); + form.setFieldsValue({ + record_name: data.record_name, + record_info: data.record_info + }); + } catch (error) { + setLoading(false); + } setLoading(false); }; useEffect(() => { + setLoading(true); getLayoutData(); }, []); const editThemeData = async (values: { record_name: string, record_info: string }) => { setLoading(true); - await editConfigDataAPI("layout", values); + try { + await editConfigDataAPI("layout", values); - notification.success({ - message: '成功', - description: '🎉 修改主题成功', - }); + notification.success({ + message: '成功', + description: '🎉 修改主题成功', + }); + } catch (error) { + setLoading(false); + } setLoading(false); }; return ( - <> - <Spin spinning={loading} indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}> - <h2 className="text-xl pb-4 pl-10">说说配置</h2> + <div> + <h2 className="text-xl pb-4 pl-10">说说配置</h2> - <div className='w-full lg:w-[500px] md:ml-10'> - <Form form={form} onFinish={editThemeData} layout="vertical"> - <Form.Item name="record_name" label="个人名称"> - <Input size='large' placeholder="请输入个人名称" /> - </Form.Item> + <div className='w-full lg:w-[500px] md:ml-10'> + <Form form={form} onFinish={editThemeData} layout="vertical"> + <Form.Item name="record_name" label="个人名称"> + <Input size='large' placeholder="请输入个人名称" /> + </Form.Item> - <Form.Item name="record_info" label="个人介绍"> - <Input.TextArea - size='large' - autoSize={{ minRows: 2, maxRows: 4 }} - placeholder="请输入个人介绍" - /> - </Form.Item> + <Form.Item name="record_info" label="个人介绍"> + <Input.TextArea + size='large' + autoSize={{ minRows: 2, maxRows: 4 }} + placeholder="请输入个人介绍" + /> + </Form.Item> - <Button type="primary" size="large" className="w-full mt-4" htmlType="submit" loading={loading}>修改主题</Button> - </Form> - </div> - </Spin> - </> + <Button type="primary" size="large" className="w-full mt-4" htmlType="submit" loading={loading}>保存</Button> + </Form> + </div> + </div> ); }; diff --git a/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx b/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx index 95b3a1b..dbbe0a3 100644 --- a/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx +++ b/src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx @@ -7,6 +7,7 @@ import FileUpload from '@/components/FileUpload'; const SynthesisTheme = () => { const [loading, setLoading] = useState<boolean>(false); + const [isModalOpen, setIsModalOpen] = useState<boolean>(false); const [theme, setTheme] = useState<Theme>({} as Theme); @@ -20,45 +21,52 @@ const SynthesisTheme = () => { }; const getLayoutData = async () => { - setLoading(true); + try { + const { data } = await getConfigDataAPI<Theme>("layout"); + setTheme(data); - const { data } = await getConfigDataAPI<Theme>("layout"); - setTheme(data); - - form.setFieldsValue({ - light_logo: data.light_logo, - dark_logo: data.dark_logo, - swiper_image: data.swiper_image, - swiper_text: data.swiper_text ? JSON.parse(data.swiper_text).join('\n') : '', - social: data.social, - covers: data.covers ? JSON.parse(data.covers).join("\n") : '', - reco_article: data.reco_article ? JSON.parse(data.reco_article).join("\n") : '', - }); + form.setFieldsValue({ + light_logo: data.light_logo, + dark_logo: data.dark_logo, + swiper_image: data.swiper_image, + swiper_text: data.swiper_text ? JSON.parse(data.swiper_text).join('\n') : '', + social: data.social, + covers: data.covers ? JSON.parse(data.covers).join("\n") : '', + reco_article: data.reco_article ? JSON.parse(data.reco_article).join("\n") : '', + }); + } catch (error) { + setLoading(false); + } setLoading(false); }; useEffect(() => { + setLoading(true); getLayoutData(); }, []); const editThemeData = async (values: any) => { setLoading(true); - const updatedLayout = { - ...theme, - ...values, - swiper_text: JSON.stringify(values.swiper_text.split('\n')), - covers: JSON.stringify(values.covers.split('\n')), - reco_article: JSON.stringify(values.reco_article.split('\n')), - }; + try { + const updatedLayout = { + ...theme, + ...values, + swiper_text: JSON.stringify(values.swiper_text.split('\n')), + covers: JSON.stringify(values.covers.split('\n')), + reco_article: JSON.stringify(values.reco_article.split('\n')), + }; - await editConfigDataAPI("layout", updatedLayout); + await editConfigDataAPI("layout", updatedLayout); - notification.success({ - message: '成功', - description: '🎉 修改主题成功', - }); + notification.success({ + message: '成功', + description: '🎉 修改主题成功', + }); + } catch (error) { + setLoading(false); + } setLoading(false); }; @@ -72,117 +80,115 @@ const SynthesisTheme = () => { ); return ( - <> - <Spin spinning={loading} indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}> - <h2 className="text-xl pb-4 pl-10">综合配置</h2> + <div> + <h2 className="text-xl pb-4 pl-10">综合配置</h2> - <div className='w-full lg:w-[500px] md:ml-10'> - <Form form={form} onFinish={editThemeData} layout="vertical"> - <Divider orientation="left">亮色主题 Logo</Divider> - <Form.Item name="light_logo" label="亮色主题 Logo"> - <Input - prefix={<PictureOutlined />} - addonAfter={<UploadBtn />} - size='large' - placeholder="请输入亮色Logo地址" - /> - </Form.Item> - <img src={form.getFieldValue('light_logo')} alt="" className="w-1/3 mt-4 rounded" /> + <div className='w-full lg:w-[500px] md:ml-10'> + <Form form={form} onFinish={editThemeData} layout="vertical"> + <Divider orientation="left">亮色主题 Logo</Divider> + <Form.Item name="light_logo" label="亮色主题 Logo"> + <Input + prefix={<PictureOutlined />} + addonAfter={<UploadBtn />} + size='large' + placeholder="请输入亮色Logo地址" + /> + </Form.Item> + <img src={form.getFieldValue('light_logo')} alt="" className="w-1/3 mt-4 rounded" /> - <Divider orientation="left">暗色主题 Logo</Divider> - <Form.Item name="dark_logo" label="暗色主题 Logo"> - <Input - prefix={<PictureOutlined />} - addonAfter={<UploadBtn />} - size='large' - placeholder="请输入暗色Logo地址" - /> - </Form.Item> - <img src={form.getFieldValue('dark_logo')} alt="" className="w-1/3 mt-4 rounded" /> + <Divider orientation="left">暗色主题 Logo</Divider> + <Form.Item name="dark_logo" label="暗色主题 Logo"> + <Input + prefix={<PictureOutlined />} + addonAfter={<UploadBtn />} + size='large' + placeholder="请输入暗色Logo地址" + /> + </Form.Item> + <img src={form.getFieldValue('dark_logo')} alt="" className="w-1/3 mt-4 rounded" /> - <Divider orientation="left">首页背景图</Divider> - <Form.Item name="swiper_image" label="首页背景图"> - <Input - prefix={<PictureOutlined />} - addonAfter={<UploadBtn />} - size='large' - placeholder="请输入背景图地址" - /> - </Form.Item> - <img src={form.getFieldValue('swiper_image')} alt="" className="w-1/3 mt-4 rounded" /> + <Divider orientation="left">首页背景图</Divider> + <Form.Item name="swiper_image" label="首页背景图"> + <Input + prefix={<PictureOutlined />} + addonAfter={<UploadBtn />} + size='large' + placeholder="请输入背景图地址" + /> + </Form.Item> + <img src={form.getFieldValue('swiper_image')} alt="" className="w-1/3 mt-4 rounded" /> - <Divider orientation="left">打字机文本</Divider> - <Form.Item name="swiper_text" label="打字机文本"> - <Input.TextArea - autoSize={{ minRows: 2, maxRows: 4 }} - size='large' - placeholder="请输入打字机文本" - /> - </Form.Item> - <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" /> + <Divider orientation="left">打字机文本</Divider> + <Form.Item name="swiper_text" label="打字机文本"> + <Input.TextArea + autoSize={{ minRows: 2, maxRows: 4 }} + size='large' + placeholder="请输入打字机文本" + /> + </Form.Item> + <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" /> - <Divider orientation="left">社交网站</Divider> - <Form.Item name="social" label="社交网站"> - <Input.TextArea - autoSize={{ minRows: 2, maxRows: 4 }} - size='large' - placeholder="请输入社交网站" - /> - </Form.Item> - <Alert message="请务必确保每一项格式正确，否则会导致网站无法访问" type="info" className="mt-2" /> + <Divider orientation="left">社交网站</Divider> + <Form.Item name="social" label="社交网站"> + <Input.TextArea + autoSize={{ minRows: 2, maxRows: 4 }} + size='large' + placeholder="请输入社交网站" + /> + </Form.Item> + <Alert message="请务必确保每一项格式正确，否则会导致网站无法访问" type="info" className="mt-2" /> - <Divider orientation="left">文章随机封面</Divider> - <Form.Item name="covers" label="文章随机封面"> - <Input.TextArea - autoSize={{ minRows: 2, maxRows: 4 }} - size='large' - placeholder="请输入文章随机封面" - /> - </Form.Item> - <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" /> + <Divider orientation="left">文章随机封面</Divider> + <Form.Item name="covers" label="文章随机封面"> + <Input.TextArea + autoSize={{ minRows: 2, maxRows: 4 }} + size='large' + placeholder="请输入文章随机封面" + /> + </Form.Item> + <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" /> - <Divider orientation="left">作者推荐文章</Divider> - <Form.Item name="reco_article" label="作者推荐文章"> - <Input.TextArea - autoSize={{ minRows: 2, maxRows: 4 }} - size='large' - placeholder="请输入作者推荐文章ID" - /> - </Form.Item> - <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" /> + <Divider orientation="left">作者推荐文章</Divider> + <Form.Item name="reco_article" label="作者推荐文章"> + <Input.TextArea + autoSize={{ minRows: 2, maxRows: 4 }} + size='large' + placeholder="请输入作者推荐文章ID" + /> + </Form.Item> + <Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" /> - <Divider orientation="left">侧边栏</Divider> - <div className='overflow-auto w-full'> - <div className="sidebar w-[750px] flex mb-4"> - {['author', 'randomArticle', 'newComments', 'hotArticle'].map((item) => ( - <div key={item} className={`item flex flex-col items-center p-4 m-4 border-2 rounded cursor-pointer ${theme.right_sidebar && JSON.parse(theme.right_sidebar).includes(item) ? 'border-primary' : 'border-[#eee]'}`} onClick={() => onSidebar(item)}> - <p className={`text-center ${theme.right_sidebar && JSON.parse(theme.right_sidebar).includes(item) ? 'text-primary' : ''}`}> - {item === 'author' ? '作者信息模块' : item === 'hotArticle' ? '作者推荐模块' : item === 'randomArticle' ? '随机推荐模块' : '最新评论模块'} - </p> - <img src={`${getFile(item)}`} alt="" className="mt-4 rounded" /> - </div> - ))} - </div> + <Divider orientation="left">侧边栏</Divider> + <div className='overflow-auto w-full'> + <div className="sidebar w-[750px] flex mb-4"> + {['author', 'randomArticle', 'newComments', 'hotArticle'].map((item) => ( + <div key={item} className={`item flex flex-col items-center p-4 m-4 border-2 rounded cursor-pointer ${theme.right_sidebar && JSON.parse(theme.right_sidebar).includes(item) ? 'border-primary' : 'border-[#eee]'}`} onClick={() => onSidebar(item)}> + <p className={`text-center ${theme.right_sidebar && JSON.parse(theme.right_sidebar).includes(item) ? 'text-primary' : ''}`}> + {item === 'author' ? '作者信息模块' : item === 'hotArticle' ? '作者推荐模块' : item === 'randomArticle' ? '随机推荐模块' : '最新评论模块'} + </p> + <img src={`${getFile(item)}`} alt="" className="mt-4 rounded" /> + </div> + ))} </div> + </div> - <Divider orientation="left">文章布局</Divider> - <div className='overflow-auto w-full'> - <div className="article flex w-[650px]"> - {['classics', 'card', 'waterfall'].map((item) => ( - <div key={item} onClick={() => setTheme({ ...theme, is_article_layout: item })} className={`item flex flex-col items-center p-4 m-4 border-2 rounded cursor-pointer ${theme.is_article_layout === item ? 'border-primary' : 'border-[#eee]'}`}> - <p className={`text-center ${theme.is_article_layout === item ? 'text-primary' : ''}`}> - {item === 'classics' ? '经典布局' : item === 'card' ? '卡片布局' : '瀑布流布局'} - </p> - <img src={`${getFile(item)}`} alt="" className="w-[200px] mt-4 rounded" /> - </div> - ))} - </div> + <Divider orientation="left">文章布局</Divider> + <div className='overflow-auto w-full'> + <div className="article flex w-[650px]"> + {['classics', 'card', 'waterfall'].map((item) => ( + <div key={item} onClick={() => setTheme({ ...theme, is_article_layout: item })} className={`item flex flex-col items-center p-4 m-4 border-2 rounded cursor-pointer ${theme.is_article_layout === item ? 'border-primary' : 'border-[#eee]'}`}> + <p className={`text-center ${theme.is_article_layout === item ? 'text-primary' : ''}`}> + {item === 'classics' ? '经典布局' : item === 'card' ? '卡片布局' : '瀑布流布局'} + </p> + <img src={`${getFile(item)}`} alt="" className="w-[200px] mt-4 rounded" /> + </div> + ))} </div> + </div> - <Button type="primary" size="large" className="w-full mt-4" htmlType="submit" loading={loading}>修改主题</Button> - </Form> - </div> - </Spin> + <Button type="primary" size="large" className="w-full mt-4" htmlType="submit" loading={loading}>保存</Button> + </Form> + </div> <FileUpload dir="swiper" @@ -190,7 +196,7 @@ const SynthesisTheme = () => { onSuccess={(url: string[]) => setTheme({ ...theme, swiper_image: url.join("\n") })} onCancel={() => setIsModalOpen(false)} /> - </> + </div> ); }; diff --git a/src/pages/Setup/components/Web/index.tsx b/src/pages/Setup/components/Web/index.tsx index 3166817..31242e7 100644 --- a/src/pages/Setup/components/Web/index.tsx +++ b/src/pages/Setup/components/Web/index.tsx @@ -5,19 +5,25 @@ import { Web } from '@/types/app/project' import { useWebStore } from '@/stores'; const WebPage = () => { - const [form] = Form.useForm(); const [loading, setLoading] = useState(false); + const [form] = Form.useForm(); + const web = useWebStore(state => state.web) const setWeb = useWebStore(state => state.setWeb) const onSubmit = async (values: Web) => { setLoading(true); - await editConfigDataAPI("web", values); - message.success("🎉 编辑网站成功"); - setWeb(values) - form.setFieldsValue(values); + try { + await editConfigDataAPI("web", values); + message.success("🎉 编辑网站成功"); + setWeb(values) + form.setFieldsValue(values); + } catch (error) { + setLoading(false); + } + setLoading(false); }; @@ -90,7 +96,7 @@ const WebPage = () => { </Form.Item> <Form.Item> - <Button type="primary" htmlType="submit" loading={loading} block>编辑网站</Button> + <Button type="primary" htmlType="submit" loading={loading} block>保存</Button> </Form.Item> </Form> </div> diff --git a/src/pages/Setup/index.tsx b/src/pages/Setup/index.tsx index e6d9d2a..db95d9e 100644 --- a/src/pages/Setup/index.tsx +++ b/src/pages/Setup/index.tsx @@ -22,6 +22,7 @@ const SetupPage = () => { const [active, setActive] = useState("system"); const iconSty = "w-5 h-8 mr-1" + const list: Setup[] = [ { title: "系统设置", diff --git a/src/pages/Swiper/index.tsx b/src/pages/Swiper/index.tsx index 6f31b7e..44e2871 100644 --- a/src/pages/Swiper/index.tsx +++ b/src/pages/Swiper/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; -import { Table, Button, Image, Form, Input, Tabs, Card, Popconfirm, message } from 'antd'; -import { getSwiperListAPI, addSwiperDataAPI, editSwiperDataAPI, delSwiperDataAPI } from '@/api/Swiper'; +import { Table, Button, Image, Form, Input, Tabs, Card, Popconfirm, message, Spin } from 'antd'; +import { getSwiperListAPI, addSwiperDataAPI, editSwiperDataAPI, delSwiperDataAPI, getSwiperDataAPI } from '@/api/Swiper'; import { Swiper } from '@/types/app/swiper'; import Title from '@/components/Title'; import { ColumnsType } from 'antd/es/table'; @@ -10,6 +10,9 @@ import FileUpload from '@/components/FileUpload'; const SwiperPage = () => { const [loading, setLoading] = useState<boolean>(false); const [btnLoading, setBtnLoading] = useState(false) + const [editLoading, setEditLoading] = useState(false) + + const [form] = Form.useForm(); const [swiper, setSwiper] = useState<Swiper>({} as Swiper); const [list, setList] = useState<Swiper[]>([]); @@ -39,8 +42,13 @@ const SwiperPage = () => { ]; const getSwiperList = async () => { - const { data } = await getSwiperListAPI(); - setList(data as Swiper[]); + try { + const { data } = await getSwiperListAPI(); + setList(data as Swiper[]); + } catch (error) { + setLoading(false); + } + setLoading(false); }; @@ -49,39 +57,56 @@ const SwiperPage = () => { getSwiperList(); }, []); - const [form] = Form.useForm(); - const editSwiperData = (record: Swiper) => { - setSwiper(record); - form.setFieldsValue(record); + const editSwiperData = async (record: Swiper) => { + setEditLoading(true); setTab('operate'); + + try { + const { data } = await getSwiperDataAPI(record.id) + setSwiper(data); + form.setFieldsValue(record); + } catch (error) { + setEditLoading(false); + } + + setEditLoading(false); }; const delSwiperData = async (id: number) => { - setLoading(true); - await delSwiperDataAPI(id); - message.success('🎉 删除轮播图成功'); - getSwiperList(); + setBtnLoading(true); + + try { + await delSwiperDataAPI(id); + await getSwiperList(); + message.success('🎉 删除轮播图成功'); + } catch (error) { + setBtnLoading(false); + } + + setBtnLoading(false); }; const onSubmit = async () => { setBtnLoading(true) - form.validateFields().then(async (values: Swiper) => { - if (swiper.id) { - await editSwiperDataAPI({ ...swiper, ...values }); - message.success('🎉 编辑轮播图成功'); - } else { - await addSwiperDataAPI({ ...swiper, ...values }); - message.success('🎉 新增轮播图成功'); - } + try { + form.validateFields().then(async (values: Swiper) => { + if (swiper.id) { + await editSwiperDataAPI({ ...swiper, ...values }); + message.success('🎉 编辑轮播图成功'); + } else { + await addSwiperDataAPI({ ...swiper, ...values }); + message.success('🎉 新增轮播图成功'); + } - getSwiperList(); - setTab('list'); - form.resetFields(); - setSwiper({} as Swiper); - }) - - setBtnLoading(false) + await getSwiperList(); + setTab('list'); + form.resetFields(); + setSwiper({} as Swiper); + }) + } catch (error) { + setBtnLoading(false) + } }; const handleTabChange = (key: string) => { @@ -118,7 +143,7 @@ const SwiperPage = () => { label: swiper.id ? '编辑轮播图' : '新增轮播图', key: 'operate', children: ( - <> + <Spin spinning={editLoading}> <h2 className="text-xl pb-4 text-center">{swiper.id ? '编辑轮播图' : '新增轮播图'}</h2> <Form @@ -149,7 +174,7 @@ const SwiperPage = () => { <Button type="primary" htmlType="submit" loading={btnLoading} className="w-full">{swiper.id ? '编辑轮播图' : '新增轮播图'}</Button> </Form.Item> </Form> - </> + </Spin> ) } ];