Add report flow and post_info by id

front/src/api.ts

@@ -299,6 +299,37 @@ export const postComment = async (commentData: PostCommentRequest): Promise<Post
   }
 };
 
+export interface ReportPostResponse {
+  id: number;
+}
+
+export const reportPost = async (reportData: { id: number; title: string; content: string }): Promise<ReportPostResponse> => {
+  try {
+    const identity = await get_id_token();
+    const response = await fetch('/api/report', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        ...reportData,
+        identity,
+      }),
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const json = await response.json();
+    if (json.code === 1001 && json.data?.id !== undefined) {
+      return { id: Number(json.data.id) };
+    }
+    throw new Error(json.data || 'Report failed');
+  } catch (error) {
+    console.error('Failed to report post:', error);
+    throw error;
+  }
+};
+
 export const uploadImage = async (file: File): Promise<string> => {
   try {
     const identity_token = await get_id_token();

front/src/components/CommentSection.tsx

@@ -139,7 +139,7 @@ interface CommentSectionProps {
 
 const CommentSection: React.FC<CommentSectionProps> = ({ postId }) => {
   const styles = useStyles();
-  const { toasterId } = useLayout();
+  const { toasterId, triggerStaticsRefresh } = useLayout();
   const { dispatchToast } = useToastController(toasterId);
   const [comments, setComments] = useState<CommentType[]>([]);
   const [content, setContent] = useState('');
@@ -214,6 +214,7 @@ useEffect(() => {
       setContent('');
       if (replyTo) setReplyTo(null);
       fetchComments(1, false);
+      triggerStaticsRefresh();
     } catch (error: any) {
       dispatchToast(
         <Toast>

front/src/components/PostCard.tsx

@@ -21,6 +21,7 @@ import {
 } from '@fluentui/react-icons';
 import { useLayout } from '../context/LayoutContext';
 import CommentSection from './CommentSection';
+import ReportPost from './ReportPost';
 
 // 自定义 remark 插件，用于高亮 #tag
 const remarkTagPlugin = () => {
@@ -150,6 +151,19 @@ const useStyles = makeStyles({
     justifyItems: 'center',
     gap: '0 8px',
   },
+  modalOverlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backdropFilter: 'blur(5px)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
   commentSection: {
     marginTop: tokens.spacingVerticalM,
     borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
@@ -178,6 +192,7 @@ const PostCard = ({
   const [votes, setVotes] = React.useState({ upvotes, downvotes });
   const [hasVoted, setHasVoted] = React.useState(false);
   const [showComments, setShowComments] = React.useState(false);
+  const [showReportModal, setShowReportModal] = React.useState(false);
 
   React.useEffect(() => {
     setVotes({ upvotes, downvotes });
@@ -279,7 +294,7 @@ const PostCard = ({
           <Button
             icon={<Warning24Regular />}
             appearance="transparent"
-            onClick={() => {}}
+            onClick={() => setShowReportModal(true)}
           />
         </div>
       </CardFooter>
@@ -288,6 +303,11 @@ const PostCard = ({
           <CommentSection postId={id} />
         </div>
       )}
+      {showReportModal && (
+        <div className={styles.modalOverlay}>
+          <ReportPost postId={id} onClose={() => setShowReportModal(false)} />
+        </div>
+      )}
     </Card>
   );
 };

front/src/components/ReportPost.tsx

@@ -0,0 +1,92 @@
+import { makeStyles, Button, Input, Textarea, tokens, useToastController, Toast, ToastTitle } from '@fluentui/react-components';
+import { Dismiss24Regular } from '@fluentui/react-icons';
+import React from 'react';
+import { reportPost } from '../api';
+import { useLayout } from '../context/LayoutContext';
+
+const useStyles = makeStyles({
+  modalContent: {
+    backgroundColor: tokens.colorNeutralBackground1,
+    padding: tokens.spacingHorizontalXXL,
+    borderRadius: tokens.borderRadiusXLarge,
+    boxShadow: tokens.shadow64,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+    width: '400px',
+    position: 'relative',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: tokens.spacingVerticalS,
+    right: tokens.spacingHorizontalS,
+  },
+  title: {
+    fontSize: tokens.fontSizeBase500,
+    fontWeight: tokens.fontWeightSemibold,
+    marginBottom: tokens.spacingVerticalS,
+  },
+});
+
+interface ReportPostProps {
+  onClose: () => void;
+  postId: number;
+}
+
+const ReportPost: React.FC<ReportPostProps> = ({ onClose, postId }) => {
+  const styles = useStyles();
+  const { toasterId } = useLayout();
+  const { dispatchToast } = useToastController(toasterId);
+  const [title, setTitle] = React.useState('');
+  const [content, setContent] = React.useState('');
+
+  const handleSubmit = async () => {
+    try {
+      const response = await reportPost({ id: postId, title, content });
+      dispatchToast(
+        <Toast>
+          <ToastTitle>投诉成功！id={response.id}</ToastTitle>
+        </Toast>,
+        { intent: 'success' }
+      );
+      onClose();
+    } catch (error) {
+      console.error('Failed to report post:', error);
+      const message = error instanceof Error ? `投诉失败：${error.message}` : '投诉失败，请稍后重试';
+      dispatchToast(
+        <Toast>
+          <ToastTitle>{message}</ToastTitle>
+        </Toast>,
+        { intent: 'error' }
+      );
+    }
+  };
+
+  return (
+    <div className={styles.modalContent}>
+      <Button
+        icon={<Dismiss24Regular />}
+        appearance="transparent"
+        className={styles.closeButton}
+        onClick={onClose}
+      />
+      <h2 className={styles.title}>投诉帖子</h2>
+      <Input
+        placeholder="简述投诉类型"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <Textarea
+        placeholder="投诉具体内容"
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        rows={5}
+      />
+      <Button appearance="primary" onClick={handleSubmit}>
+        提交
+      </Button>
+    </div>
+  );
+};
+
+export default ReportPost;

front/src/components/StatusDisplay.tsx

@@ -76,7 +76,7 @@ const useStyles = makeStyles({
 
 const StatusDisplay: React.FC = () => {
   const styles = useStyles();
-  const { toasterId, refreshTrigger } = useLayout();
+  const { toasterId, refreshTrigger, staticsRefreshTrigger } = useLayout();
   const { dispatchToast } = useToastController(toasterId);
   const [isApiOnline, setIsApiOnline] = useState<boolean | null>(null);
   const [statics, setStatics] = useState<StaticsData | null>(null);
@@ -128,6 +128,12 @@ const StatusDisplay: React.FC = () => {
     }
   }, [refreshTrigger, refreshStatics]);
 
+  useEffect(() => {
+    if (staticsRefreshTrigger > 0) {
+      refreshStatics(false);
+    }
+  }, [staticsRefreshTrigger, refreshStatics]);
+
   return (
     <div className={styles.container}>
       <Card className={styles.card}>

front/src/context/LayoutContext.tsx

@@ -12,6 +12,8 @@ interface LayoutContextType {
   toasterId: string;
   refreshTrigger: number;
   triggerRefresh: () => void;
+  staticsRefreshTrigger: number;
+  triggerStaticsRefresh: () => void;
 }
 
 const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
@@ -21,6 +23,7 @@ export const LayoutProvider: React.FC<{ children: React.ReactNode; toasterId: st
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [staticsRefreshTrigger, setStaticsRefreshTrigger] = useState(0);
   const { dispatchToast } = useToastController(toasterId);
 
   useEffect(() => {
@@ -51,9 +54,10 @@ export const LayoutProvider: React.FC<{ children: React.ReactNode; toasterId: st
   const toggleSidebar = () => setIsSidebarCollapsed(prev => !prev);
   const toggleTheme = () => setIsDarkMode(prev => !prev);
   const triggerRefresh = () => setRefreshTrigger(prev => prev + 1);
+  const triggerStaticsRefresh = () => setStaticsRefreshTrigger(prev => prev + 1);
 
   return (
-    <LayoutContext.Provider value={{ settings, isSidebarCollapsed, toggleSidebar, isDarkMode, toggleTheme, toasterId, refreshTrigger, triggerRefresh }}>
+    <LayoutContext.Provider value={{ settings, isSidebarCollapsed, toggleSidebar, isDarkMode, toggleTheme, toasterId, refreshTrigger, triggerRefresh, staticsRefreshTrigger, triggerStaticsRefresh }}>
       {children}
     </LayoutContext.Provider>
   );