Feat:增加清除缓存按钮,增加开关公告选项
This commit is contained in:
54
src/App.tsx
54
src/App.tsx
@@ -6,7 +6,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import PostCard from './components/PostCard';
|
||||
import MainLayout from './layouts/MainLayout';
|
||||
import './App.css';
|
||||
import { fetchArticles } from './api';
|
||||
import { fetchArticles, getNotice } from './api';
|
||||
import CreatePost from './components/CreatePost';
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
@@ -18,6 +18,8 @@ import AdminPage from './components/AdminPage';
|
||||
import InitPage from './pages/InitPage';
|
||||
import NotFound from './pages/NotFound';
|
||||
import ImageViewer from './components/ImageViewer';
|
||||
import NoticeModal from './components/NoticeModal';
|
||||
import type { NoticeData } from './components/NoticeModal';
|
||||
|
||||
function App() {
|
||||
const [isDarkMode, setIsDarkMode] = React.useState(() => {
|
||||
@@ -50,6 +52,30 @@ function App() {
|
||||
const lastRefreshAtRef = useRef<number>(0);
|
||||
const REFRESH_COOLDOWN_MS = 5000; // 刷新冷却时间
|
||||
const [imageViewer, setImageViewer] = useState<{ open: boolean; src?: string; alt?: string }>({ open: false });
|
||||
const [noticeData, setNoticeData] = useState<NoticeData | null>(null);
|
||||
const [showNotice, setShowNotice] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getNotice().then(data => {
|
||||
// Check display status
|
||||
if (data.display === 'false') {
|
||||
setShowNotice(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const savedVersion = localStorage.getItem('notice_version');
|
||||
// 只有当有内容且版本号大于本地存储的版本时才显示
|
||||
if (data.content && (!savedVersion || Number(savedVersion) < Number(data.version))) {
|
||||
setNoticeData({
|
||||
type: data.type,
|
||||
content: data.content,
|
||||
version: Number(data.version),
|
||||
display: data.display
|
||||
});
|
||||
setShowNotice(true);
|
||||
}
|
||||
}).catch(console.error);
|
||||
}, []);
|
||||
|
||||
const openImageViewer = (src?: string, alt?: string) => {
|
||||
if (!src) return;
|
||||
@@ -209,6 +235,29 @@ function App() {
|
||||
{imageViewer.open && imageViewer.src && (
|
||||
<ImageViewer src={imageViewer.src!} alt={imageViewer.alt} onClose={closeImageViewer} />
|
||||
)}
|
||||
{showNotice && noticeData && (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
zIndex: 2000,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<NoticeModal
|
||||
data={noticeData}
|
||||
onClose={() => setShowNotice(false)}
|
||||
onNeverShow={(version) => {
|
||||
localStorage.setItem('notice_version', String(version));
|
||||
setShowNotice(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</FluentProvider>
|
||||
);
|
||||
}
|
||||
@@ -218,3 +267,6 @@ export default App;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -185,17 +185,30 @@ export const adminApiRequest = async (
|
||||
* 修改公告(后端自动递增版本)
|
||||
* POST /admin/modify_notice { type: 'md' | 'url', content: string }
|
||||
*/
|
||||
export const adminModifyNotice = async (
|
||||
payload: { type: 'md' | 'url'; content: string }
|
||||
): Promise<{ status: 'OK'; version?: number }> => {
|
||||
export const adminModifyNotice = async (type: 'md'|'url', content: string, version: number): Promise<void> => {
|
||||
const resp = await adminApiRequest('/modify_notice', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
body: JSON.stringify({ type, content, version }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
throw new Error(`修改公告失败: ${resp.status}`);
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
throw new Error(err.reason || `修改公告失败: ${resp.status}`);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换公告开启状态
|
||||
* POST /admin/notice_switch { value: "true" | "false" }
|
||||
*/
|
||||
export const adminNoticeSwitch = async (value: boolean): Promise<void> => {
|
||||
const resp = await adminApiRequest('/notice_switch', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ value: value ? "true" : "false" }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
throw new Error(err.reason || `切换公告状态失败: ${resp.status}`);
|
||||
}
|
||||
return resp.json();
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -826,4 +839,4 @@ export const setBannedKeywordsList = async (keywords: string[]): Promise<{ statu
|
||||
throw new Error(`保存违禁词失败: ${resp.status}${detail ? ` - ${detail}` : ''}`);
|
||||
}
|
||||
return resp.json();
|
||||
};
|
||||
};
|
||||
571
src/api.ts
571
src/api.ts
@@ -1,284 +1,287 @@
|
||||
import { API_CONFIG } from './config';
|
||||
import { toast } from 'react-hot-toast';
|
||||
|
||||
export interface Article {
|
||||
id: number;
|
||||
content: string;
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
}
|
||||
|
||||
export const fetchArticles = async (page: number, signal?: AbortSignal): Promise<Article[]> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/10_info?page=${page}`, { signal });
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.name !== 'AbortError') {
|
||||
console.error('Error fetching articles:', error);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const voteArticle = async (
|
||||
id: number,
|
||||
type: 'up' | 'down'
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/${type}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.status !== 'OK') {
|
||||
throw new Error(`Vote ${type} failed`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(`点${type === 'up' ? '赞' : '踩'}失败`);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
interface SubmitPostResponse {
|
||||
id: string;
|
||||
status: "Pass" | "Pending" | "Deny";
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export const submitPost = async (postData: { content: string }): Promise<SubmitPostResponse> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/post`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ content: postData.content }),
|
||||
});
|
||||
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
return { status: 'Deny', message: '投稿中包含违禁词', id: 'null'};
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json() as SubmitPostResponse;
|
||||
} catch (error) {
|
||||
console.error('Error submitting post:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const uploadImage = async (formData: FormData): Promise<{ status: 'OK' | 'Error'; url?: string; message?: string }> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/upload_pic`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.url) {
|
||||
result.url = `${API_CONFIG.BASE_URL}${result.url}`;
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Error uploading image:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
interface ReportPostResponse {
|
||||
id: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export const reportPost = async (reportData: { id: number; title: string; content: string }): Promise<ReportPostResponse> => {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/report`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(reportData),
|
||||
});
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return (await response.json()) as ReportPostResponse;
|
||||
};
|
||||
|
||||
export async function getPostState(id: string): Promise<{ status: string }> {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/post_state?id=${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch post state');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getReportState(id: string): Promise<{ status: string }> {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/report_state?id=${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch report state');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
|
||||
export interface Comment {
|
||||
id: number;
|
||||
nickname: string;
|
||||
content: string;
|
||||
parent_comment_id: number;
|
||||
}
|
||||
|
||||
export const getComments = async (id: string | number): Promise<Comment[]> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/comment?id=${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching comments:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export interface PostCommentRequest {
|
||||
content: string;
|
||||
submission_id: number;
|
||||
parent_comment_id: number;
|
||||
nickname: string;
|
||||
}
|
||||
|
||||
export interface PostCommentResponse {
|
||||
id: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export const postComment = async (commentData: PostCommentRequest): Promise<PostCommentResponse> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/comment`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(commentData),
|
||||
});
|
||||
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
throw new Error('评论包含违禁词');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error posting comment:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// === Backend Initialization ===
|
||||
export interface InitPayload {
|
||||
adminToken: string;
|
||||
uploadFolder: string;
|
||||
allowedExtensions: string[];
|
||||
maxFileSize: number;
|
||||
bannedKeywords?: string[];
|
||||
rateLimit: number; // 次/分钟,0为无限制
|
||||
}
|
||||
|
||||
export const initBackend = async (payload: InitPayload): Promise<{ status: string; reason?: string }> => {
|
||||
const body = {
|
||||
ADMIN_TOKEN: payload.adminToken,
|
||||
UPLOAD_FOLDER: payload.uploadFolder,
|
||||
ALLOWED_EXTENSIONS: payload.allowedExtensions,
|
||||
MAX_FILE_SIZE: payload.maxFileSize,
|
||||
...(payload.bannedKeywords ? { BANNED_KEYWORDS: payload.bannedKeywords } : {}),
|
||||
RATE_LIMIT: payload.rateLimit,
|
||||
};
|
||||
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/init`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({ status: 'Fail', reason: 'Invalid response' }));
|
||||
|
||||
if (response.status === 403) {
|
||||
throw new Error(data?.reason || '后端已初始化');
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.reason || `初始化失败,状态码 ${response.status}`);
|
||||
}
|
||||
|
||||
return data as { status: string; reason?: string };
|
||||
};
|
||||
|
||||
// === Notice ===
|
||||
export interface NoticeResponse {
|
||||
type: 'md' | 'url';
|
||||
content: string;
|
||||
version: string | number;
|
||||
}
|
||||
|
||||
export const getNotice = async (): Promise<NoticeResponse> => {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/notice`, { method: 'GET' });
|
||||
if (!response.ok) {
|
||||
throw new Error(`获取公告失败: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return {
|
||||
type: (data?.type === 'url' ? 'url' : 'md') as 'md' | 'url',
|
||||
content: String(data?.content ?? ''),
|
||||
version: data?.version ?? '0',
|
||||
};
|
||||
};
|
||||
import { API_CONFIG } from './config';
|
||||
import { toast } from 'react-hot-toast';
|
||||
|
||||
export interface Article {
|
||||
id: number;
|
||||
content: string;
|
||||
upvotes: number;
|
||||
downvotes: number;
|
||||
}
|
||||
|
||||
export const fetchArticles = async (page: number, signal?: AbortSignal): Promise<Article[]> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/10_info?page=${page}`, { signal });
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.name !== 'AbortError') {
|
||||
console.error('Error fetching articles:', error);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const voteArticle = async (
|
||||
id: number,
|
||||
type: 'up' | 'down'
|
||||
): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/${type}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.status !== 'OK') {
|
||||
throw new Error(`Vote ${type} failed`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(`点${type === 'up' ? '赞' : '踩'}失败`);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
interface SubmitPostResponse {
|
||||
id: string;
|
||||
status: "Pass" | "Pending" | "Deny";
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export const submitPost = async (postData: { content: string }): Promise<SubmitPostResponse> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/post`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ content: postData.content }),
|
||||
});
|
||||
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
return { status: 'Deny', message: '投稿中包含违禁词', id: 'null'};
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json() as SubmitPostResponse;
|
||||
} catch (error) {
|
||||
console.error('Error submitting post:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const uploadImage = async (formData: FormData): Promise<{ status: 'OK' | 'Error'; url?: string; message?: string }> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/upload_pic`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.url) {
|
||||
result.url = `${API_CONFIG.BASE_URL}${result.url}`;
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Error uploading image:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
interface ReportPostResponse {
|
||||
id: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export const reportPost = async (reportData: { id: number; title: string; content: string }): Promise<ReportPostResponse> => {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/report`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(reportData),
|
||||
});
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return (await response.json()) as ReportPostResponse;
|
||||
};
|
||||
|
||||
export async function getPostState(id: string): Promise<{ status: string }> {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/post_state?id=${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch post state');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getReportState(id: string): Promise<{ status: string }> {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/report_state?id=${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch report state');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
|
||||
export interface Comment {
|
||||
id: number;
|
||||
nickname: string;
|
||||
content: string;
|
||||
parent_comment_id: number;
|
||||
}
|
||||
|
||||
export const getComments = async (id: string | number): Promise<Comment[]> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/comment?id=${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching comments:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export interface PostCommentRequest {
|
||||
content: string;
|
||||
submission_id: number;
|
||||
parent_comment_id: number;
|
||||
nickname: string;
|
||||
}
|
||||
|
||||
export interface PostCommentResponse {
|
||||
id: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export const postComment = async (commentData: PostCommentRequest): Promise<PostCommentResponse> => {
|
||||
try {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/comment`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(commentData),
|
||||
});
|
||||
|
||||
if (response.status === 403) {
|
||||
const data = await response.json().catch(() => null);
|
||||
if (data?.reason === 'Rate Limit Exceeded') {
|
||||
toast.error('Rate Limit Exceeded');
|
||||
throw new Error('Rate Limit Exceeded');
|
||||
}
|
||||
throw new Error('评论包含违禁词');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Error posting comment:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// === Backend Initialization ===
|
||||
export interface InitPayload {
|
||||
adminToken: string;
|
||||
uploadFolder: string;
|
||||
allowedExtensions: string[];
|
||||
maxFileSize: number;
|
||||
bannedKeywords?: string[];
|
||||
rateLimit: number; // 次/分钟,0为无限制
|
||||
}
|
||||
|
||||
export const initBackend = async (payload: InitPayload): Promise<{ status: string; reason?: string }> => {
|
||||
const body = {
|
||||
ADMIN_TOKEN: payload.adminToken,
|
||||
UPLOAD_FOLDER: payload.uploadFolder,
|
||||
ALLOWED_EXTENSIONS: payload.allowedExtensions,
|
||||
MAX_FILE_SIZE: payload.maxFileSize,
|
||||
...(payload.bannedKeywords ? { BANNED_KEYWORDS: payload.bannedKeywords } : {}),
|
||||
RATE_LIMIT: payload.rateLimit,
|
||||
};
|
||||
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/init`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({ status: 'Fail', reason: 'Invalid response' }));
|
||||
|
||||
if (response.status === 403) {
|
||||
throw new Error(data?.reason || '后端已初始化');
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.reason || `初始化失败,状态码 ${response.status}`);
|
||||
}
|
||||
|
||||
return data as { status: string; reason?: string };
|
||||
};
|
||||
|
||||
// === Notice ===
|
||||
export interface NoticeResponse {
|
||||
type: 'md' | 'url';
|
||||
content: string;
|
||||
version: string | number;
|
||||
display?: string;
|
||||
}
|
||||
|
||||
export const getNotice = async (): Promise<NoticeResponse> => {
|
||||
const response = await fetch(`${API_CONFIG.BASE_URL}/get/notice`, { method: 'GET' });
|
||||
if (!response.ok) {
|
||||
throw new Error(`获取公告失败: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return {
|
||||
type: (data?.type === 'url' ? 'url' : 'md') as 'md' | 'url',
|
||||
content: String(data?.content ?? ''),
|
||||
version: data?.version ?? '0',
|
||||
display: data?.display ?? 'true',
|
||||
};
|
||||
};
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
} from '@fluentui/react-components';
|
||||
import type { TabValue } from '@fluentui/react-components';
|
||||
import { getAuditMode, setAuditMode, getBackupZip, recoverBackup, getPicLinks, deletePic, type PicLink, getPendingReports, approveReport, rejectReport, type PendingReport, getAdminPostInfo, getPendingPosts, getRejectedPosts, type AdminPostListItem, approvePost, disapprovePost, reauditPost, deletePost,
|
||||
getBannedKeywords, setBannedKeywordsList } from '../admin_api';
|
||||
getBannedKeywords, setBannedKeywordsList, adminNoticeSwitch } from '../admin_api';
|
||||
import { Switch } from '@fluentui/react-components';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import {
|
||||
@@ -182,6 +182,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
const fileInputRef = React.useRef<HTMLInputElement | null>(null);
|
||||
const [selectedBackupFile, setSelectedBackupFile] = React.useState<File | null>(null);
|
||||
const [confirmOpen, setConfirmOpen] = React.useState<boolean>(false);
|
||||
const [clearCacheConfirmOpen, setClearCacheConfirmOpen] = React.useState<boolean>(false);
|
||||
// 图片管理状态
|
||||
const [picPage, setPicPage] = React.useState<number>(1);
|
||||
const [picLoading, setPicLoading] = React.useState<boolean>(false);
|
||||
@@ -233,6 +234,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
const [noticeVersion, setNoticeVersion] = React.useState<number>(0);
|
||||
const [noticeType, setNoticeType] = React.useState<'md' | 'url'>('md');
|
||||
const [noticeContent, setNoticeContent] = React.useState<string>('');
|
||||
const [noticeDisplay, setNoticeDisplay] = React.useState<boolean>(true);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (activeTab === 'systemSettings') {
|
||||
@@ -298,21 +300,47 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
setNoticeLoading(true);
|
||||
getNotice()
|
||||
.then((data) => {
|
||||
const ver = Number(data.version ?? 0) || 0;
|
||||
setNoticeVersion(ver);
|
||||
setNoticeVersion(Number(data.version ?? 0) || 0);
|
||||
setNoticeType((data.type === 'url' ? 'url' : 'md'));
|
||||
setNoticeContent(String(data.content ?? ''));
|
||||
setNoticeDisplay(data.display !== 'false');
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.error(err);
|
||||
const msg = String(err?.message || '获取公告失败');
|
||||
toast.error('获取公告失败');
|
||||
})
|
||||
.finally(() => setNoticeLoading(false));
|
||||
} else if (activeTab === 'postReview') {
|
||||
setLoadingAudit(true);
|
||||
getAuditMode()
|
||||
.then(data => {
|
||||
setNeedAudit(!!data.status);
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.error(err);
|
||||
const msg = String(err?.message || '获取审核模式失败');
|
||||
if (msg.includes('401') || msg.includes('403') || msg.includes('登录已过期')) {
|
||||
toast.error('身份验证失败,请重新登陆');
|
||||
} else {
|
||||
toast.error('获取公告失败');
|
||||
toast.error('获取审核模式失败');
|
||||
}
|
||||
})
|
||||
.finally(() => setNoticeLoading(false));
|
||||
.finally(() => setLoadingAudit(false));
|
||||
|
||||
// 加载违禁词
|
||||
setBannedLoading(true);
|
||||
getBannedKeywords()
|
||||
.then((list) => setBannedKeywords(Array.isArray(list) ? list : []))
|
||||
.catch((err: any) => {
|
||||
console.error(err);
|
||||
const msg = String(err?.message || '获取违禁词失败');
|
||||
if (msg.includes('401') || msg.includes('403') || msg.includes('登录已过期')) {
|
||||
toast.error('身份验证失败,请重新登陆');
|
||||
} else {
|
||||
toast.error('获取违禁词失败');
|
||||
}
|
||||
})
|
||||
.finally(() => setBannedLoading(false));
|
||||
}
|
||||
}, [activeTab, picPage]);
|
||||
|
||||
@@ -569,6 +597,38 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
void handleRecoverBackup(selectedBackupFile);
|
||||
};
|
||||
|
||||
const handleClearCache = async () => {
|
||||
// Clear localStorage
|
||||
localStorage.clear();
|
||||
|
||||
// Clear sessionStorage
|
||||
sessionStorage.clear();
|
||||
|
||||
// Clear cookies
|
||||
document.cookie.split(";").forEach((c) => {
|
||||
document.cookie = c
|
||||
.replace(/^ +/, "")
|
||||
.replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
|
||||
});
|
||||
|
||||
// Clear caches
|
||||
if ('caches' in window) {
|
||||
try {
|
||||
const names = await caches.keys();
|
||||
await Promise.all(names.map(name => caches.delete(name)));
|
||||
} catch (e) {
|
||||
console.error('Failed to clear caches:', e);
|
||||
}
|
||||
}
|
||||
|
||||
toast.success('缓存已清理');
|
||||
setClearCacheConfirmOpen(false);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
try {
|
||||
adminLogout();
|
||||
@@ -713,6 +773,25 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
{activeTab === 'noticeManage' ? (
|
||||
<div>
|
||||
<Text size={400} weight="semibold">公告管理</Text>
|
||||
|
||||
<div style={{ marginTop: tokens.spacingVerticalM }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: tokens.spacingVerticalM }}>
|
||||
<Switch
|
||||
checked={noticeDisplay}
|
||||
onChange={async (_, data) => {
|
||||
try {
|
||||
await adminNoticeSwitch(!!data.checked);
|
||||
setNoticeDisplay(!!data.checked);
|
||||
toast.success(`公告已${data.checked ? '开启' : '关闭'}`);
|
||||
} catch (e: any) {
|
||||
toast.error(e.message || '切换状态失败');
|
||||
}
|
||||
}}
|
||||
label={noticeDisplay ? "公告已开启" : "公告已关闭"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: tokens.spacingVerticalS }}>
|
||||
<Text size={200} color="subtle">当前公告版本:{noticeLoading ? '加载中...' : noticeVersion}</Text>
|
||||
</div>
|
||||
@@ -752,8 +831,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
<div style={{ marginTop: tokens.spacingVerticalM }}>
|
||||
<Button appearance="primary" onClick={async () => {
|
||||
try {
|
||||
const payload = { type: noticeType, content: noticeContent };
|
||||
await adminModifyNotice(payload);
|
||||
await adminModifyNotice(noticeType, noticeContent, noticeVersion + 1);
|
||||
toast.success('公告已修改');
|
||||
setNoticeLoading(true);
|
||||
const data = await getNotice();
|
||||
@@ -877,6 +955,19 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 开发者工具 */}
|
||||
<div style={{ marginTop: tokens.spacingVerticalL }}>
|
||||
<Text size={300}>开发者工具</Text>
|
||||
<div style={{ marginTop: tokens.spacingVerticalS }}>
|
||||
<Button appearance="secondary" onClick={() => setClearCacheConfirmOpen(true)}>
|
||||
清除缓存
|
||||
</Button>
|
||||
</div>
|
||||
<Text size={200} color="subtle" style={{ marginTop: tokens.spacingVerticalS, display: 'block' }}>
|
||||
将清理 localStorage、Cookies 及静态资源缓存。
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 确认对话框 */}
|
||||
<Dialog open={confirmOpen} onOpenChange={(_, data) => setConfirmOpen(!!data.open)}>
|
||||
<DialogSurface>
|
||||
@@ -892,6 +983,22 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
</DialogBody>
|
||||
</DialogSurface>
|
||||
</Dialog>
|
||||
|
||||
{/* 清除缓存确认对话框 */}
|
||||
<Dialog open={clearCacheConfirmOpen} onOpenChange={(_, data) => setClearCacheConfirmOpen(!!data.open)}>
|
||||
<DialogSurface>
|
||||
<DialogBody>
|
||||
<DialogTitle>确认清除缓存</DialogTitle>
|
||||
<DialogContent>
|
||||
确定要清除所有缓存吗?这将包括登录状态和本地设置。
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button appearance="secondary" onClick={() => setClearCacheConfirmOpen(false)}>取消</Button>
|
||||
<Button appearance="primary" onClick={handleClearCache}>确认</Button>
|
||||
</DialogActions>
|
||||
</DialogBody>
|
||||
</DialogSurface>
|
||||
</Dialog>
|
||||
</div>
|
||||
) : activeTab === 'postReview' ? (
|
||||
<div>
|
||||
@@ -1167,3 +1274,5 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({
|
||||
};
|
||||
|
||||
export default AdminDashboard;
|
||||
|
||||
|
||||
|
||||
@@ -1,94 +1,96 @@
|
||||
import React from 'react';
|
||||
import { makeStyles, Button, tokens, Text } from '@fluentui/react-components';
|
||||
import { Dismiss24Regular } from '@fluentui/react-icons';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkIns from 'remark-ins';
|
||||
import remarkBreaks from 'remark-breaks';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
modalContent: {
|
||||
backgroundColor: tokens.colorNeutralBackground1,
|
||||
padding: tokens.spacingHorizontalXXL,
|
||||
borderRadius: tokens.borderRadiusXLarge,
|
||||
boxShadow: tokens.shadow64,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: tokens.spacingVerticalM,
|
||||
width: '520px',
|
||||
maxWidth: '90vw',
|
||||
position: 'relative',
|
||||
},
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
top: tokens.spacingVerticalS,
|
||||
right: tokens.spacingHorizontalS,
|
||||
},
|
||||
title: {
|
||||
fontSize: tokens.fontSizeBase500,
|
||||
fontWeight: tokens.fontWeightSemibold,
|
||||
marginBottom: tokens.spacingVerticalS,
|
||||
},
|
||||
contentBox: {
|
||||
maxHeight: '60vh',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
iframe: {
|
||||
width: '100%',
|
||||
height: '360px',
|
||||
border: 'none',
|
||||
borderRadius: tokens.borderRadiusMedium,
|
||||
backgroundColor: tokens.colorNeutralBackground2,
|
||||
},
|
||||
actions: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: tokens.spacingHorizontalS,
|
||||
},
|
||||
});
|
||||
|
||||
export interface NoticeData {
|
||||
type: 'md' | 'url';
|
||||
content: string;
|
||||
version: number;
|
||||
}
|
||||
|
||||
interface NoticeModalProps {
|
||||
data: NoticeData;
|
||||
onClose: () => void;
|
||||
onNeverShow: (version: number) => void;
|
||||
}
|
||||
|
||||
const NoticeModal: React.FC<NoticeModalProps> = ({ data, onClose, onNeverShow }) => {
|
||||
const styles = useStyles();
|
||||
const { type, content, version } = data;
|
||||
|
||||
return (
|
||||
<div className={styles.modalContent} role="dialog" aria-modal="true" aria-label="公告">
|
||||
<Button
|
||||
icon={<Dismiss24Regular />}
|
||||
appearance="transparent"
|
||||
className={styles.closeButton}
|
||||
onClick={onClose}
|
||||
aria-label="关闭"
|
||||
/>
|
||||
<Text as="h2" className={styles.title}>公告</Text>
|
||||
<div className={styles.contentBox}>
|
||||
{type === 'md' ? (
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm, remarkIns, remarkBreaks]}>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
) : (
|
||||
<iframe className={styles.iframe} src={content} title={`公告-${version}`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.actions}>
|
||||
<Button appearance="primary" onClick={onClose}>确定</Button>
|
||||
<Button appearance="subtle" onClick={() => onNeverShow(version)}>不再显示</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoticeModal;
|
||||
|
||||
import React from 'react';
|
||||
import { makeStyles, Button, tokens, Text } from '@fluentui/react-components';
|
||||
import { Dismiss24Regular } from '@fluentui/react-icons';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkIns from 'remark-ins';
|
||||
import remarkBreaks from 'remark-breaks';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
modalContent: {
|
||||
backgroundColor: tokens.colorNeutralBackground1,
|
||||
padding: tokens.spacingHorizontalXXL,
|
||||
borderRadius: tokens.borderRadiusXLarge,
|
||||
boxShadow: tokens.shadow64,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: tokens.spacingVerticalM,
|
||||
width: '520px',
|
||||
maxWidth: '90vw',
|
||||
position: 'relative',
|
||||
},
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
top: tokens.spacingVerticalS,
|
||||
right: tokens.spacingHorizontalS,
|
||||
},
|
||||
title: {
|
||||
fontSize: tokens.fontSizeBase500,
|
||||
fontWeight: tokens.fontWeightSemibold,
|
||||
marginBottom: tokens.spacingVerticalS,
|
||||
},
|
||||
contentBox: {
|
||||
maxHeight: '60vh',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
iframe: {
|
||||
width: '100%',
|
||||
height: '360px',
|
||||
border: 'none',
|
||||
borderRadius: tokens.borderRadiusMedium,
|
||||
backgroundColor: tokens.colorNeutralBackground2,
|
||||
},
|
||||
actions: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: tokens.spacingHorizontalS,
|
||||
},
|
||||
});
|
||||
|
||||
export interface NoticeData {
|
||||
type: 'md' | 'url';
|
||||
content: string;
|
||||
version: number;
|
||||
display?: string;
|
||||
}
|
||||
|
||||
interface NoticeModalProps {
|
||||
data: NoticeData;
|
||||
onClose: () => void;
|
||||
onNeverShow: (version: number) => void;
|
||||
}
|
||||
|
||||
const NoticeModal: React.FC<NoticeModalProps> = ({ data, onClose, onNeverShow }) => {
|
||||
const styles = useStyles();
|
||||
const { type, content, version } = data;
|
||||
|
||||
return (
|
||||
<div className={styles.modalContent} role="dialog" aria-modal="true" aria-label="公告">
|
||||
<Button
|
||||
icon={<Dismiss24Regular />}
|
||||
appearance="transparent"
|
||||
className={styles.closeButton}
|
||||
onClick={onClose}
|
||||
aria-label="关闭"
|
||||
/>
|
||||
<Text as="h2" className={styles.title}>公告</Text>
|
||||
<div className={styles.contentBox}>
|
||||
{type === 'md' ? (
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm, remarkIns, remarkBreaks]}>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
) : (
|
||||
<iframe className={styles.iframe} src={content} title={`公告-${version}`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.actions}>
|
||||
<Button appearance="primary" onClick={onClose}>确定</Button>
|
||||
<Button appearance="subtle" onClick={() => onNeverShow(version)}>不再显示</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoticeModal;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user