大改动

This commit is contained in:
宇阳
2025-01-11 22:10:58 +08:00
parent 9df0370ab6
commit c0946a7f40
15 changed files with 564 additions and 391 deletions

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />

View File

@@ -41,20 +41,24 @@ const CatePage = () => {
};
const editCateData = async (id: number) => {
setIsMethod("edit")
setLoading(true);
setIsMethod("edit")
setIsModelOpen(true);
try {
const { data } = await getCateDataAPI(id);
setIsCateShow(data.type === "cate" ? false : true)
setCate(data);
form.setFieldsValue(data);
} catch (error) {
setLoading(false);
}
};
const delCateData = async (id: number) => {
setLoading(true);
try {
await delCateDataAPI(id);
message.success('🎉 删除分类成功');
@@ -67,6 +71,7 @@ const CatePage = () => {
const submit = async () => {
setBtnLoading(true)
try {
form.validateFields().then(async (values: Cate) => {
if (values.type === "cate") values.url = '/'
@@ -86,8 +91,9 @@ const CatePage = () => {
getCateList();
setIsMethod("create")
})
} catch (error) {
setBtnLoading(false)
}
};
const closeModel = () => {

View File

@@ -20,6 +20,8 @@ const CommentPage = () => {
const user = useUserStore(state => state.user)
const [loading, setLoading] = useState(false);
const [btnLoading, setBtnLoading] = useState(false);
const [comment, setComment] = useState<Comment>({} as Comment);
const [list, setList] = useState<Comment[]>([]);
@@ -27,16 +29,19 @@ const CommentPage = () => {
const getCommentList = async () => {
const { data } = await getCommentListAPI();
setList(data)
setLoading(false)
}
const delCommentData = async (id: number) => {
setLoading(true)
try {
await delCommentDataAPI(id);
getCommentList();
message.success('🎉 删除评论成功');
} catch (error) {
setLoading(false)
}
};
useEffect(() => {
@@ -115,6 +120,9 @@ const CommentPage = () => {
const { RangePicker } = DatePicker;
const onSubmit = async (values: FilterForm) => {
setLoading(true)
try {
const query: FilterData = {
key: values?.title,
content: values?.content,
@@ -124,12 +132,18 @@ const CommentPage = () => {
const { data } = await getCommentListAPI({ query });
setList(data)
} catch (error) {
setLoading(false)
}
}
// 回复内容
const [replyInfo, setReplyInfo] = useState("")
const [isReplyModalOpen, setIsReplyModalOpen] = useState(false);
const handleReply = async () => {
setBtnLoading(true)
try {
await addCommentDataAPI({
avatar: user.avatar,
url: web.url,
@@ -147,6 +161,9 @@ const CommentPage = () => {
setIsReplyModalOpen(false)
setReplyInfo("")
getCommentList()
} catch (error) {
setBtnLoading(false)
}
}
return (
@@ -198,7 +215,7 @@ const CommentPage = () => {
<div><b></b> {comment?.content}</div>
</div>
<Button type='primary' onClick={() => setIsReplyModalOpen(true)} className='w-full mt-4'></Button>
<Button type='primary' loading={btnLoading} onClick={() => setIsReplyModalOpen(true)} className='w-full mt-4'></Button>
</Modal>
<Modal title="回复评论" open={isReplyModalOpen} footer={null} onCancel={() => setIsReplyModalOpen(false)}>
@@ -211,7 +228,7 @@ const CommentPage = () => {
<div className="flex space-x-4">
<Button className="w-full mt-2" onClick={() => setIsReplyModalOpen(false)}></Button>
<Button type="primary" className="w-full mt-2" onClick={handleReply}></Button>
<Button type="primary" loading={btnLoading} onClick={handleReply} className="w-full mt-2"></Button>
</div>
</Modal>
</>

View File

@@ -25,6 +25,7 @@ const EditorMD = ({ value, onChange }: Props) => {
const uploadImages = async (files: File[]) => {
setLoading(true);
try {
// 处理成后端需要的格式
const formData = new FormData();
formData.append("dir", "article");
@@ -37,10 +38,13 @@ const EditorMD = ({ value, onChange }: Props) => {
}
});
setLoading(false);
// 返回图片信息数组
return data.map((url: string) => ({ url }));
} catch (error) {
setLoading(false);
}
setLoading(false);
}
return (

View File

@@ -93,7 +93,7 @@ const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => vo
const onSubmit = async (values: FieldType, isDraft?: boolean) => {
setBtnLoading(true)
console.log(values);
try {
values.isEncrypt = values.isEncrypt ? 1 : 0
// 如果是文章标签,则先判断是否存在,如果不存在则添加
@@ -167,6 +167,9 @@ const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => vo
} as any)
}
}
} catch (error) {
setBtnLoading(false)
}
// 关闭弹框
closeModel()
@@ -176,7 +179,6 @@ const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => vo
isDraft ? navigate("/draft") : navigate("/article")
// 初始化表单
form.resetFields()
setBtnLoading(false)
}

View File

@@ -18,6 +18,8 @@ const CreatePage = () => {
const id = +params.get('id')!
const isDraftParams = Boolean(params.get('draft'))
const [loading, setLoading] = useState(false)
const [data, setData] = useState<Article>({} as Article)
const [content, setContent] = useState('');
const [publishOpen, setPublishOpen] = useState(false)
@@ -29,13 +31,18 @@ const CreatePage = () => {
// 获取文章数据
const getArticleData = async () => {
try {
const { data } = await getArticleDataAPI(id)
setData(data)
setContent(data.content)
} catch (error) {
setLoading(false)
}
}
// 回显数据
useEffect(() => {
setLoading(true)
setPublishOpen(false)
// 有Id就回显指定的数据
@@ -176,7 +183,7 @@ const CreatePage = () => {
</div>
</Title>
<Card className={`${titleSty} overflow-hidden rounded-xl min-h-[calc(100vh-180px)]`}>
<Card loading={loading} className={`${titleSty} overflow-hidden rounded-xl min-h-[calc(100vh-180px)]`}>
<Editor value={content} onChange={(value) => setContent(value)} />
<Drawer

View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Button, Card, Dropdown, Image, Input, message, Modal } from "antd"
import { Button, Card, Dropdown, Image, Input, message, Modal, Spin } from "antd"
import TextArea from "antd/es/input/TextArea"
import { addRecordDataAPI, editRecordDataAPI, getRecordDataAPI } from '@/api/Record'
@@ -19,6 +19,8 @@ export default () => {
const id = +params.get('id')!
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const [content, setContent] = useState("")
const [imageList, setImageList] = useState<string[]>([])
@@ -30,6 +32,9 @@ export default () => {
}
const onSubmit = async () => {
setLoading(true)
try {
const data = {
content,
images: JSON.stringify(imageList),
@@ -48,13 +53,21 @@ export default () => {
}
navigate("/record")
} catch (error) {
setLoading(false)
}
setLoading(false)
}
const getRecordData = async () => {
setLoading(true)
const { data } = await getRecordDataAPI(id)
console.log(data, 222);
setContent(data.content)
setImageList(JSON.parse(data.images as string))
setLoading(false)
}
// 回显数据
@@ -120,6 +133,7 @@ export default () => {
<>
<Title value="闪念" />
<Spin spinning={loading}>
<Card className={`${titleSty} min-h-[calc(100vh-180px)]`}>
<div className="relative flex w-[90%] xl:w-[800px] mx-auto mt-[50px]">
<TextArea
@@ -163,6 +177,7 @@ export default () => {
/>
</div>
</Card>
</Spin>
<FileUpload
dir="record"

View File

@@ -5,8 +5,11 @@ import CardDataStats from "@/components/CardDataStats"
import { AiOutlineEye, AiOutlineMeh, AiOutlineStock, AiOutlineFieldTime } from "react-icons/ai";
import { useEffect, useState } from "react"
import dayjs from 'dayjs';
import { Spin } from "antd";
export default () => {
const [loading, setLoading] = useState(false)
const [stats, setStats] = useState({
pv: 0,
ip: 0,
@@ -28,6 +31,9 @@ export default () => {
// 获取统计数据
const getDataList = async () => {
setLoading(true)
try {
const siteId = import.meta.env.VITE_BAIDU_TONGJI_SITE_ID;
const token = import.meta.env.VITE_BAIDU_TONGJI_ACCESS_TOKEN;
@@ -71,6 +77,12 @@ export default () => {
});
setStats({ pv, ip, bounce: (bounce / count) || 0, avgTime: formatTime(avgTime / count) || "00:00:00" })
} catch (error) {
setLoading(false)
}
setLoading(false)
};
useEffect(() => {
@@ -78,7 +90,7 @@ export default () => {
}, []);
return (
<>
<Spin spinning={loading}>
{/* 基本数据 */}
<div className="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-4">
<CardDataStats title="今日访客" total={stats.pv + ''} rate="0.43%" levelUp>
@@ -104,6 +116,6 @@ export default () => {
{/* <ChartTwo />
<ChatCard /> */}
</div>
</>
</Spin>
)
}

View File

@@ -1,13 +1,13 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Table, Button, Tag, notification, Card, Popconfirm, Form } from 'antd';
import { Table, Button, Tag, notification, Card, Popconfirm, Form, Spin } from 'antd';
import { titleSty } from '@/styles/sty'
import Title from '@/components/Title';
import { delArticleDataAPI, getArticleListAPI, reductionArticleDataAPI } from '@/api/Article';
import type { Tag as ArticleTag } from '@/types/app/tag';
import type { Cate } from '@/types/app/cate';
import type { Article, Config } from '@/types/app/article';
import type { Article } from '@/types/app/article';
import { useWebStore } from '@/stores';
import dayjs from 'dayjs';
@@ -23,33 +23,46 @@ export default () => {
const [form] = Form.useForm();
const getArticleList = async () => {
setLoading(true);
try {
const { data } = await getArticleListAPI({ query: { isDel: 1 } });
setArticleList(data as Article[]);
} catch (error) {
setLoading(false);
}
setLoading(false);
};
useEffect(() => {
setLoading(true);
getArticleList()
}, []);
const delArticleData = async (id: number) => {
setLoading(true);
try {
// 严格删除:彻底从数据库删除,无法恢复
await delArticleDataAPI(id);
await getArticleList();
form.resetFields()
setCurrent(1)
notification.success({ message: '🎉 删除文章成功' })
} catch (error) {
setLoading(false);
}
};
const reductionArticleData = async (id: number) => {
setLoading(true);
try {
await reductionArticleDataAPI(id)
navigate("/article")
notification.success({ message: '🎉 还原文章成功' })
} catch (error) {
setLoading(false);
}
}
// 标签颜色

View File

@@ -21,26 +21,32 @@ export default () => {
const [form] = Form.useForm();
const getArticleList = async () => {
setLoading(true);
try {
const { data } = await getArticleListAPI({ query: { isDraft: 1 } });
setArticleList(data as Article[]);
} catch (error) {
setLoading(false);
}
setLoading(false)
};
useEffect(() => {
setLoading(true)
getArticleList()
}, []);
const delArticleData = async (id: number) => {
setLoading(true);
try {
await delArticleDataAPI(id);
await getArticleList();
form.resetFields()
setCurrent(1)
notification.success({ message: '🎉 删除文章成功' })
} catch (error) {
setLoading(false);
}
};
// 标签颜色

View File

@@ -34,9 +34,13 @@ export default () => {
// 获取目录列表
const getDirList = async () => {
setLoading(true)
try {
const { data } = await getDirListAPI()
setDirList(data)
} catch (error) {
setLoading(false)
}
setLoading(false)
}
@@ -54,13 +58,16 @@ export default () => {
const onDeleteImage = async (data: File) => {
setLoading(true)
try {
await delFileDataAPI(data.url)
message.success("🎉 删除图片成功")
getFileList(dirName)
setFile({} as File)
setOpenFileInfoDrawer(false)
setOpenFilePreviewDrawer(false)
} catch (error) {
setLoading(false)
}
}
// 下载图片

View File

@@ -12,6 +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 [footprintList, setFootprintList] = useState<Footprint[]>([]);
const [isModelOpen, setIsModelOpen] = useState(false);
@@ -86,13 +87,18 @@ const FootprintPage = () => {
const { RangePicker } = DatePicker;
const getFootprintList = async () => {
setLoading(true);
try {
const { data } = await getFootprintListAPI();
setFootprintList(data as Footprint[]);
} catch (error) {
setLoading(false);
}
setLoading(false);
};
useEffect(() => {
setLoading(true);
getFootprintList();
}, []);
@@ -105,10 +111,14 @@ const FootprintPage = () => {
const delFootprintData = async (id: number) => {
setLoading(true);
try {
await delFootprintDataAPI(id);
notification.success({ message: '🎉 删除足迹成功' });
getFootprintList();
} catch (error) {
setLoading(false);
}
};
const addFootprintData = () => {
@@ -119,8 +129,10 @@ const FootprintPage = () => {
};
const editFootprintData = async (id: number) => {
setModalLoading(true);
try {
setIsMethod("edit");
setLoading(true);
setIsModelOpen(true);
const { data } = await getFootprintDataAPI(id);
@@ -130,12 +142,17 @@ const FootprintPage = () => {
setFootprint(data);
form.setFieldsValue(data);
setLoading(false);
} catch (error) {
setModalLoading(false);
}
setModalLoading(false);
};
const onSubmit = async () => {
setBtnLoading(true)
try {
form.validateFields().then(async (values: Footprint) => {
values.createTime = values.createTime.valueOf()
values.images = values.images ? (values.images as string).split("\n") : []
@@ -151,13 +168,17 @@ const FootprintPage = () => {
reset()
getFootprintList();
});
} catch (error) {
setBtnLoading(false)
}
};
const closeModel = () => reset();
const onFilterSubmit = async (values: FilterForm) => {
setLoading(true)
try {
const query: FilterData = {
key: values.address,
startDate: values.createTime && values.createTime[0].valueOf() + '',
@@ -165,14 +186,21 @@ const FootprintPage = () => {
}
const { data } = await getFootprintListAPI({ query });
setFootprintList(data as Footprint[]);
setFootprintList(data);
} catch (error) {
setLoading(false)
}
setLoading(false)
}
// 通过详细地址获取纬度
const getGeocode = async () => {
const address = form.getFieldValue("address")
setModalLoading(true)
try {
const address = form.getFieldValue("address")
const { data } = await axios.get('https://restapi.amap.com/v3/geocode/geo', {
params: {
address,
@@ -187,16 +215,17 @@ const FootprintPage = () => {
// 立即触发校验
form.validateFields(['position']);
setModalLoading(false)
return data.geocodes[0].location;
} else {
message.warning('未找到该地址的经纬度');
return '';
}
} catch (error) {
console.error('获取地理编码时出错:', error);
message.error('获取地理编码时出错');
return '';
setModalLoading(false)
}
};
return (
@@ -237,7 +266,7 @@ const FootprintPage = () => {
/>
</Card>
<Modal title={isMethod === "edit" ? "编辑足迹" : "新增足迹"} open={isModelOpen} onCancel={closeModel} destroyOnClose footer={null}>
<Modal loading={modalLoading} 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="请输入标题" />

View File

@@ -1,4 +1,4 @@
import { Card, Select, Timeline, TimelineItemProps } from 'antd';
import { Card, Select, Spin, Timeline, TimelineItemProps } from 'antd';
import { useEffect, useState } from 'react';
import GitHubCalendar from 'react-github-calendar';
import Title from '@/components/Title';
@@ -12,6 +12,8 @@ interface Commit {
}
const Home = () => {
const [loading, setLoading] = useState<boolean>(false)
const [year, setYear] = useState<number>(new Date().getFullYear())
const [yearList, setYearList] = useState<{ value: number, label: string }[]>([])
@@ -21,6 +23,7 @@ const Home = () => {
// 从github获取最近10次迭代记录
const getCommitData = async (project: string) => {
try {
const res = await fetch(`https://api.github.com/repos/LiuYuYang01/${project}/commits?per_page=10`)
const data = await res.json()
const result = data?.map((item: Commit) => (
@@ -44,9 +47,16 @@ const Home = () => {
setServer_IterativeRecording(result)
break;
}
} catch (error) {
setLoading(false)
}
setLoading(false)
}
useEffect(() => {
setLoading(true)
// 获取当前年份
const currentYear = dayjs().year();
// 生成最近10年的年份数组
@@ -62,12 +72,15 @@ const Home = () => {
const server_project_iterative = JSON.parse(sessionStorage.getItem('server_project_iterative') || '[]')
server_project_iterative.length ? setServer_IterativeRecording(server_project_iterative) : getCommitData("ThriveX-Server")
setLoading(false)
}, [])
return (
<>
<Title value='项目迭代记录'></Title>
<Spin spinning={loading}>
<Card className='mt-2 min-h-[calc(100vh-180px)]'>
<div className='flex flex-col items-center mt-2 mb-22'>
<div className='ml-5 mb-6'>
@@ -104,6 +117,7 @@ const Home = () => {
</div>
</div>
</Card>
</Spin>
</>
);
};

View File

@@ -7,6 +7,8 @@ import { loginDataAPI } from '@/api/User';
import { useUserStore } from '@/stores';
const LoginPage = () => {
const [loading, setLoading] = useState(false)
const [form] = useForm();
const [isPassVisible, setIsPassVisible] = useState(false);
const store = useUserStore();
@@ -15,6 +17,9 @@ const LoginPage = () => {
const returnUrl = new URLSearchParams(location.search).get('returnUrl') || '/';
const onSubmit = async () => {
setLoading(true)
try {
const values = await form.validateFields();
const { data } = await loginDataAPI(values);
@@ -29,6 +34,11 @@ const LoginPage = () => {
});
navigate(returnUrl);
} catch (error) {
setLoading(false)
}
setLoading(false)
};
return (
@@ -70,7 +80,7 @@ const LoginPage = () => {
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="w-full" block></Button>
<Button type="primary" htmlType="submit" loading={loading} className="w-full" block></Button>
</Form.Item>
</Form>
</div>

View File

@@ -9,7 +9,9 @@ import { titleSty } from '@/styles/sty';
const StoragePage = () => {
const [loading, setLoading] = useState<boolean>(false);
const [btnLoading, setBtnLoading] = useState(false);
const [modalLoading, setModalLoading] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false);
const [oss, setOss] = useState<Oss>({} as Oss);
const [ossList, setOssList] = useState<Oss[]>([]);
const [platformList, setPlatformList] = useState<{ label: string, value: string, disabled: boolean }[]>([]);
@@ -51,9 +53,9 @@ const StoragePage = () => {
render: (_, record: Oss) => (
<div className='space-x-2'>
{record.isEnable ? (
<Button type="primary" danger onClick={() => handleDisable(record.id!)}></Button>
<Button type="primary" danger onClick={() => disableOssData(record.id!)}></Button>
) : (
<Button type="primary" onClick={() => handleEnable(record.id!)}></Button>
<Button type="primary" onClick={() => enableOssData(record.id!)}></Button>
)}
<Button onClick={() => editOssData(record)}></Button>
@@ -83,44 +85,71 @@ const StoragePage = () => {
};
const getOssList = async () => {
setLoading(true);
try {
const { data } = await getOssListAPI();
setOssList(data);
} catch (error) {
setLoading(false)
}
setLoading(false);
};
useEffect(() => {
setLoading(true);
getOssList();
getOssPlatformList()
}, []);
const handleEnable = async (id: number) => {
const enableOssData = async (id: number) => {
try {
await enableOssDataAPI(id);
await getOssList();
message.success('启用成功');
getOssList();
} catch (error) {
setLoading(false)
}
};
const handleDisable = async (id: number) => {
const disableOssData = async (id: number) => {
try {
await disableOssDataAPI(id);
await getOssList();
message.success('禁用成功');
getOssList();
} catch (error) {
setLoading(false)
}
};
const editOssData = async (record: Oss) => {
setOss(record);
const { data } = await getOssDataAPI(record.id)
form.setFieldsValue(data);
setModalLoading(true)
try {
setIsModalOpen(true);
const { data } = await getOssDataAPI(record.id)
setOss(data);
form.setFieldsValue(data);
} catch (error) {
setModalLoading(false)
}
setModalLoading(false)
};
const delOssData = async (id: number) => {
setLoading(true);
try {
await delOssDataAPI(id);
await getOssList();
message.success('🎉 删除存储配置成功');
getOssList();
} catch (error) {
setLoading(false)
}
};
const handleAdd = () => {
const addOssData = () => {
setOss({} as Oss);
form.resetFields();
form.setFieldsValue({});
@@ -151,20 +180,22 @@ const StoragePage = () => {
form.resetFields();
setBtnLoading(false);
} catch (error) {
console.error('表单验证失败:', error);
setBtnLoading(false);
}
setBtnLoading(false)
};
return (
<>
<Title value="存储管理">
<Button type="primary" size='large' onClick={handleAdd}></Button>
<Button type="primary" size='large' onClick={addOssData}></Button>
</Title>
<Card className={`${titleSty} min-h-[calc(100vh-180px)]`}>
<Table
rowKey="id"
loading={loading}
dataSource={ossList}
columns={columns}
scroll={{ x: 'max-content' }}
@@ -172,11 +203,11 @@ const StoragePage = () => {
position: ['bottomCenter'],
pageSize: 8
}}
loading={loading}
/>
</Card>
<Modal
loading={modalLoading}
title={oss.id ? "编辑存储配置" : "新增存储配置"}
open={isModalOpen}
onCancel={handleCancel}