调整部分代码
This commit is contained in:
宇阳
@@ -176,7 +176,7 @@ const FootprintPage = () => {
|
||||
const { data } = await axios.get('https://restapi.amap.com/v3/geocode/geo', {
|
||||
params: {
|
||||
address,
|
||||
key: import.meta.env.VITE_GAODE_WEB_API // 替换为你的高德地图 API 密钥
|
||||
key: import.meta.env.VITE_GAODE_WEB_API
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { notification, Divider, Input, Alert, Button, Spin } from 'antd';
|
||||
import { notification, Divider, Input, Alert, Button, Spin, Segmented, Form } from 'antd';
|
||||
import { PictureOutlined, LoadingOutlined, CloudUploadOutlined } from '@ant-design/icons';
|
||||
import { editConfigDataAPI, getConfigDataAPI } from '@/api/Project';
|
||||
import { Theme } from '@/types/app/project';
|
||||
@@ -7,18 +7,16 @@ import FileUpload from '@/components/FileUpload';
|
||||
|
||||
const ThemePage = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||||
const [swiperText, setSwiperText] = useState<string>('');
|
||||
const [social, setSocial] = useState<string>('');
|
||||
const [cover, setCover] = useState<string>('');
|
||||
const [recoArticle, setRecoArticle] = useState<string>('');
|
||||
const [theme, setTheme] = useState<Theme>({} as Theme);
|
||||
const [current, setCurrent] = useState<string>("综合配置");
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onSidebar = (value: string) => {
|
||||
const rightSidebar = JSON.parse(theme.right_sidebar || '[]');
|
||||
const index = rightSidebar.indexOf(value);
|
||||
index > -1 ? rightSidebar.splice(index, 1) : rightSidebar.push(value)
|
||||
index > -1 ? rightSidebar.splice(index, 1) : rightSidebar.push(value);
|
||||
setTheme({ ...theme, right_sidebar: JSON.stringify(rightSidebar) });
|
||||
};
|
||||
|
||||
@@ -26,13 +24,17 @@ const ThemePage = () => {
|
||||
setLoading(true);
|
||||
|
||||
const { data } = await getConfigDataAPI<Theme>("layout");
|
||||
|
||||
setTheme(data);
|
||||
setSwiperText(data.swiper_text ? JSON.parse(data.swiper_text).join('\n') : '');
|
||||
|
||||
setSocial(data.social);
|
||||
setCover(data.covers ? JSON.parse(data.covers).join("\n") : '');
|
||||
setRecoArticle(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") : '',
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
@@ -41,18 +43,19 @@ const ThemePage = () => {
|
||||
getLayoutData();
|
||||
}, []);
|
||||
|
||||
const editLayoutData = async () => {
|
||||
const editLayoutData = async (values: any) => {
|
||||
setLoading(true);
|
||||
|
||||
const updatedLayout = {
|
||||
...theme,
|
||||
swiper_text: JSON.stringify(swiperText.split('\n')),
|
||||
social,
|
||||
covers: JSON.stringify(cover.split('\n')),
|
||||
reco_article: JSON.stringify(recoArticle.split('\n'))
|
||||
...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);
|
||||
|
||||
notification.success({
|
||||
message: '成功',
|
||||
description: '🎉 修改主题成功',
|
||||
@@ -61,111 +64,99 @@ const ThemePage = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// 动态渲染图片
|
||||
const getFile = (name: string) => {
|
||||
return new URL(`./image/${name}.png`, import.meta.url).href
|
||||
}
|
||||
return new URL(`./image/${name}.png`, import.meta.url).href;
|
||||
};
|
||||
|
||||
// 文件上传
|
||||
const UploadBtn = () => (
|
||||
<CloudUploadOutlined className='text-xl cursor-pointer' onClick={() => setIsModalOpen(true)} />
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Spin spinning={loading} indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}>
|
||||
<h2 className="text-xl pb-4 pl-10">主题配置</h2>
|
||||
|
||||
<Segmented<string>
|
||||
size="large"
|
||||
options={['综合配置', '说说配置']}
|
||||
onChange={setCurrent}
|
||||
className='md:ml-10 mb-4'
|
||||
/>
|
||||
<div className='w-full lg:w-[500px] md:ml-10'>
|
||||
{current === "综合配置" && (
|
||||
<Form form={form} onFinish={editLayoutData} layout="vertical">
|
||||
<Divider orientation="left">亮色主题 Logo</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="light_logo" label="亮色主题 Logo">
|
||||
<Input
|
||||
value={theme.light_logo}
|
||||
onChange={(e) => setTheme({ ...theme, light_logo: e.target.value })}
|
||||
prefix={<PictureOutlined />}
|
||||
addonAfter={<UploadBtn />}
|
||||
size='large'
|
||||
placeholder="请输入亮色Logo地址"
|
||||
className='customizeAntdInputAddonAfter'
|
||||
/>
|
||||
<img src={theme.light_logo} alt="" className="w-1/3 mt-4 rounded" />
|
||||
</div>
|
||||
</Form.Item>
|
||||
<img src={form.getFieldValue('light_logo')} alt="" className="w-1/3 mt-4 rounded" />
|
||||
|
||||
<Divider orientation="left">暗色主题 Logo</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="dark_logo" label="暗色主题 Logo">
|
||||
<Input
|
||||
value={theme.dark_logo}
|
||||
onChange={(e) => setTheme({ ...theme, dark_logo: e.target.value })}
|
||||
prefix={<PictureOutlined />}
|
||||
addonAfter={<UploadBtn />}
|
||||
size='large'
|
||||
placeholder="请输入暗色Logo地址"
|
||||
className='customizeAntdInputAddonAfter'
|
||||
/>
|
||||
<img src={theme.dark_logo} alt="" className="w-1/3 mt-4 rounded" />
|
||||
</div>
|
||||
</Form.Item>
|
||||
<img src={form.getFieldValue('dark_logo')} alt="" className="w-1/3 mt-4 rounded" />
|
||||
|
||||
<Divider orientation="left">首页背景图</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="swiper_image" label="首页背景图">
|
||||
<Input
|
||||
value={theme.swiper_image}
|
||||
onChange={(e) => setTheme({ ...theme, swiper_image: e.target.value })}
|
||||
prefix={<PictureOutlined />}
|
||||
addonAfter={<UploadBtn />}
|
||||
size='large'
|
||||
placeholder="请输入背景图地址"
|
||||
className='customizeAntdInputAddonAfter'
|
||||
/>
|
||||
<img src={theme.swiper_image} alt="" className="w-1/3 mt-4 rounded" />
|
||||
</div>
|
||||
</Form.Item>
|
||||
<img src={form.getFieldValue('swiper_image')} alt="" className="w-1/3 mt-4 rounded" />
|
||||
|
||||
<Divider orientation="left">打字机文本</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="swiper_text" label="打字机文本">
|
||||
<Input.TextArea
|
||||
value={swiperText}
|
||||
onChange={(e) => setSwiperText(e.target.value)}
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
size='large'
|
||||
placeholder="请输入打字机文本"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" />
|
||||
</div>
|
||||
|
||||
<Divider orientation="left">社交网站</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="social" label="社交网站">
|
||||
<Input.TextArea
|
||||
value={social}
|
||||
onChange={(e) => setSocial(e.target.value)}
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
size='large'
|
||||
placeholder="请输入社交网站"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Alert message="请务必确保每一项格式正确，否则会导致网站无法访问" type="info" className="mt-2" />
|
||||
</div>
|
||||
|
||||
<Divider orientation="left">文章随机封面</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="covers" label="文章随机封面">
|
||||
<Input.TextArea
|
||||
value={cover}
|
||||
onChange={(e) => setCover(e.target.value)}
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
size='large'
|
||||
placeholder="请输入文章随机封面"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" />
|
||||
</div>
|
||||
|
||||
<Divider orientation="left">作者推荐文章</Divider>
|
||||
<div className="mb-8">
|
||||
<Form.Item name="reco_article" label="作者推荐文章">
|
||||
<Input.TextArea
|
||||
value={recoArticle}
|
||||
onChange={(e) => setRecoArticle(e.target.value)}
|
||||
autoSize={{ minRows: 2, maxRows: 4 }}
|
||||
size='large'
|
||||
placeholder="请输入作者推荐文章ID"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Alert message="以换行分隔，每行表示一段文本" type="info" className="mt-2" />
|
||||
</div>
|
||||
|
||||
<Divider orientation="left">侧边栏</Divider>
|
||||
<div className='overflow-auto w-full'>
|
||||
@@ -175,7 +166,6 @@ const ThemePage = () => {
|
||||
<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>
|
||||
))}
|
||||
@@ -190,14 +180,17 @@ const ThemePage = () => {
|
||||
<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" loading={loading} onClick={editLayoutData}>修改布局</Button>
|
||||
<Button type="primary" size="large" className="w-full mt-4" htmlType="submit" loading={loading}>
|
||||
修改布局
|
||||
</Button>
|
||||
</Form>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ const SetupPage = () => {
|
||||
title: "主题设置",
|
||||
description: "配置网站主题风格",
|
||||
icon: <BiLayout className={iconSty} />,
|
||||
key: "layout"
|
||||
key: "theme"
|
||||
},
|
||||
{
|
||||
title: "个人设置",
|
||||
@@ -80,7 +80,7 @@ const SetupPage = () => {
|
||||
<div className='w-full md:w-[80%] px-0 md:px-8'>
|
||||
{active === "system" && <System />}
|
||||
{active === "web" && <Web />}
|
||||
{active === "layout" && <Theme />}
|
||||
{active === "theme" && <Theme />}
|
||||
{active === "my" && <My />}
|
||||
{/* {active === "other" && <Other />} */}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user