achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大改动

Browse Source
This commit is contained in:
宇阳
2025-01-11 22:53:12 +08:00
parent c0946a7f40
commit 2a1391da72
13 changed files with 443 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/Footprint/index.tsx
View File

@@ -12,7 +12,7 @@ import axios from 'axios';
const FootprintPage = () => {
const [loading, setLoading] = useState<boolean>(false);
const [btnLoading, setBtnLoading] = useState(false)
const [modalLoading, setModalLoading] = useState(false)
const [editLoading, setEditLoading] = useState(false)
const [footprintList, setFootprintList] = useState<Footprint[]>([]);
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 = () => {
/>
</Card>
<Modal loading={modalLoading} title={isMethod === "edit" ? "编辑足迹" : "新增足迹"} open={isModelOpen} onCancel={closeModel} destroyOnClose footer={null}>
<Modal loading={editLoading} title={isMethod === "edit" ? "编辑足迹" : "新增足迹"} open={isModelOpen} onCancel={closeModel} destroyOnClose footer={null}>
<Form form={form} layout="vertical" initialValues={footprint} size='large' preserve={false} className='mt-6'>
<Form.Item label="标题" name="title" rules={[{ required: true, message: '标题不能为空' }]}>
<Input placeholder="请输入标题" />

10
src/pages/Oss/index.tsx
View File

@@ -9,7 +9,7 @@ import { titleSty } from '@/styles/sty';
const StoragePage = () => {
const [loading, setLoading] = useState<boolean>(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<Oss>({} 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 = () => {
</Card>
<Modal
loading={modalLoading}
loading={editLoading}
title={oss.id ? "编辑存储配置" : "新增存储配置"}
open={isModalOpen}
onCancel={handleCancel}

57
src/pages/Record/index.tsx
View File

@@ -15,34 +15,39 @@ export interface FilterForm {
}
const RecordPage = () => {
const [current, setCurrent] = useState<number>(1);
const [loading, setLoading] = useState<boolean>(false);
const [recordList, setRecordList] = useState<Record[]>([]);
const [recordList, setRecordList] = useState<Record[]>([]);
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 = () => {
<Title value="说说管理" />
<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>

108
src/pages/Role/index.tsx
View File

@@ -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

77
src/pages/Route/index.tsx
View File

@@ -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) => {
try {
form.validateFields().then(async (values: Route) => {
if (route.id) {
await editRouteDataAPI({ ...route, ...values });
message.success('🎉 编辑路由成功');
} else {
await addRouteDataAPI(values);
message.success('🎉 新增路由成功');
}
if (route.id) {
await editRouteDataAPI({ ...route, ...values });
message.success('🎉 编辑路由成功');
} else {
await addRouteDataAPI(values);
message.success('🎉 新增路由成功');
}
await getRouteList();
form.resetFields();
form.setFieldsValue({ path: '', description: '' })
setRoute({} as Route);
});
} catch (error) {
setLoading(false)
setBtnLoading(true)
}
getRouteList();
form.resetFields();
form.setFieldsValue({ path: '', description: '' })
setRoute({} as Route);
});
setBtnLoading(false)
setLoading(false)
setBtnLoading(true)
};
return (

26
src/pages/Rss/index.tsx
View File

@@ -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;

37
src/pages/Setup/components/My/index.tsx
View File

@@ -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>

22
src/pages/Setup/components/System/index.tsx
View File

@@ -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>

72
src/pages/Setup/components/Theme/components/RecordTheme/index.tsx
View File

@@ -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>
);
};

256
src/pages/Setup/components/Theme/components/SynthesisTheme/index.tsx
View File

@@ -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>
);
};

18
src/pages/Setup/components/Web/index.tsx
View File

@@ -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>

1
src/pages/Setup/index.tsx
View File

@@ -22,6 +22,7 @@ const SetupPage = () => {
const [active, setActive] = useState("system");
const iconSty = "w-5 h-8 mr-1"
const list: Setup[] = [
{
title: "系统设置",

83
src/pages/Swiper/index.tsx
View File

@@ -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>
)
}
];