feat: 改进举报功能 - 移动到页面底部左下角并优化状态管理

Copilot · OrenZhang · Copilot · commit d39b04f26671 · 2025-07-06T08:49:00.000Z
Co-authored-by: U8F69 &lt;41963680+U8F69@users.noreply.github.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -16,9 +16,9 @@ frontend/node_modules/*
 frontend/.next/*
 frontend/next-env.d.ts
 frontend/package-lock.json
-frontend/.env
-frontend/.env.local
-frontend/tsconfig.tsbuildinfo
+.env.*
+!.env.example
+*.tsbuildinfo
 
 # os
 .DS_Store
diff --git a/frontend/components/common/receive/ReceiveContent.tsx b/frontend/components/common/receive/ReceiveContent.tsx
@@ -13,7 +13,6 @@ import {BasicUserInfo} from '@/lib/services/core';
 import {GetProjectResponseData} from '@/lib/services/project';
 import {formatDateTimeWithSeconds, copyToClipboard} from '@/lib/utils';
 import {motion} from 'motion/react';
-import {ReportButton} from './ReportButton';
 
 
 /**
@@ -321,7 +320,6 @@ export function ReceiveContent({data}: ReceiveContentProps) {
           receivedContent={receivedContent}
           onReceive={handleReceive}
         />
-        <ReportButton projectId={projectId} user={user} />
       </motion.div>
 
       <motion.div className="pt-6 border-t border-gray-200" variants={itemVariants}>
diff --git a/frontend/components/common/receive/ReceiveMain.tsx b/frontend/components/common/receive/ReceiveMain.tsx
@@ -7,6 +7,7 @@ import {Button} from '@/components/ui/button';
 import {Skeleton} from '@/components/ui/skeleton';
 import {ArrowLeftIcon, AlertCircle, RefreshCw} from 'lucide-react';
 import {ReceiveContent} from '@/components/common/receive';
+import {ReportButton} from '@/components/common/receive/ReportButton';
 import {EmptyState} from '@/components/common/layout/EmptyState';
 import services from '@/lib/services';
 import {GetProjectResponseData} from '@/lib/services/project';
@@ -205,6 +206,19 @@ export function ReceiveMain() {
           />
         </motion.div>
       )}
+
+      {/* 页面底部举报按钮 */}
+      {!Loading && !error && project && (
+        <div className="fixed bottom-4 left-4 z-50">
+          <div className="bg-background/80 backdrop-blur-sm border border-border rounded-lg p-2 shadow-lg">
+            <ReportButton
+              projectId={projectId || ''}
+              user={user}
+              hasReported={false}
+            />
+          </div>
+        </div>
+      )}
     </motion.div>
   );
 }
diff --git a/frontend/components/common/receive/ReportButton.tsx b/frontend/components/common/receive/ReportButton.tsx
@@ -38,6 +38,7 @@ export function ReportButton({projectId, user, hasReported = false}: ReportButto
   const [isOpen, setIsOpen] = useState(false);
   const [reason, setReason] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hasReportedLocal, setHasReportedLocal] = useState(hasReported);
 
   /**
    * 处理举报提交
@@ -60,13 +61,23 @@ export function ReportButton({projectId, user, hasReported = false}: ReportButto
 
       if (result.success) {
         toast.success('举报提交成功，感谢您的反馈');
+        setHasReportedLocal(true);
         setIsOpen(false);
         setReason('');
       } else {
+        // 检查是否是重复举报的错误
+        if (result.error && result.error.includes('已举报过当前项目')) {
+          setHasReportedLocal(true);
+        }
         toast.error(result.error || '举报失败，请稍后重试');
       }
     } catch (error) {
-      toast.error(error instanceof Error ? error.message : '举报失败，请稍后重试');
+      const errorMessage = error instanceof Error ? error.message : '举报失败，请稍后重试';
+      // 检查是否是重复举报的错误
+      if (errorMessage.includes('已举报过当前项目')) {
+        setHasReportedLocal(true);
+      }
+      toast.error(errorMessage);
     } finally {
       setIsSubmitting(false);
     }
@@ -88,11 +99,11 @@ export function ReportButton({projectId, user, hasReported = false}: ReportButto
         <Button
           variant="outline"
           size="sm"
-          disabled={!user || hasReported}
-          className="w-full mt-2"
+          disabled={!user || hasReportedLocal}
+          className="h-8 px-3 text-xs border-muted-foreground/30 text-muted-foreground hover:text-foreground hover:border-muted-foreground"
         >
-          <Flag className="w-4 h-4 mr-2" />
-          {!user ? '请先登录' : hasReported ? '已举报' : '举报项目'}
+          <Flag className="w-3 h-3 mr-1" />
+          {!user ? '请先登录' : hasReportedLocal ? '已举报' : '举报项目'}
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
