Skip to content

feature: 项目详情页增加举报按钮#64

Merged
chenyme merged 9 commits intomasterfrom
copilot/fix-63
Jul 6, 2025
Merged

feature: 项目详情页增加举报按钮#64
chenyme merged 9 commits intomasterfrom
copilot/fix-63

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jul 6, 2025 •
edited
Loading

在项目详情页增加了举报按钮，用户可以通过弹窗填写举报理由来举报存在问题的项目，以防止分发站被滥用。

功能特性

🎯 按钮位置

  • 按钮位于"立刻领取"按钮下方，符合用户界面设计规范
  • 使用 outline 样式，保持界面简洁

📝 举报流程

  • 点击按钮打开弹窗，用户可填写举报理由
  • 表单验证：必填字段 + 最大255字符限制（与后端验证保持一致）
  • 实时字符计数器，帮助用户了解输入长度

🔐 用户状态管理

  • 未登录用户：按钮显示"请先登录"并禁用
  • 已举报用户：按钮显示"已举报"并禁用
  • 正常用户：按钮显示"举报项目"，可正常使用

⚡ 交互体验

  • 提交过程中显示加载状态
  • 成功举报后显示成功提示
  • 错误处理：显示友好的错误信息（包括重复举报提示）
  • 良好的无障碍支持：包含适当的标签和 ARIA 属性

技术实现

后端集成

  • 调用现有的 /api/v1/projects/{id}/report API 接口
  • 请求体格式：{"reason": string}
  • 完整的错误处理，包括"已举报过当前项目"的情况

前端组件

  • 创建了 ReportButton 组件，使用现有的 Dialog UI 组件
  • 在 ReceiveContent 组件中集成，位置在 ReceiveButton 下方
  • 添加了相应的 TypeScript 类型定义和服务方法

代码质量

  • 所有 ESLint 和 TypeScript 检查通过
  • 遵循项目现有的代码规范和组件模式
  • 包含完整的 JSDoc 注释

界面展示

应用程序运行状态

举报按钮将显示在项目详情页的"立刻领取"按钮下方，用户点击后可以通过弹窗填写举报理由并提交。

Fixes #63.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot AI changed the title [WIP] feature: 项目详情页增加举报按钮 feature: 项目详情页增加举报按钮 Jul 6, 2025
Copilot AI requested a review from OrenZhang July 6, 2025 08:10
@OrenZhang OrenZhang marked this pull request as ready for review July 6, 2025 08:18
Copilot AI review requested due to automatic review settings July 6, 2025 08:18
Copilot AI reviewed Jul 6, 2025
View reviewed changes
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

本次 PR 为项目详情页新增“举报按钮”功能，允许用户在发现违规或问题项目时提交举报理由。

  • 新增举报相关的类型定义和服务接口
  • 实现前端 ReportButton 组件并集成到 ReceiveContent
  • 添加本地环境变量配置

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
frontend/lib/services/project/types.ts 新增 ReportProjectRequest、ReportProjectResponse 类型
frontend/lib/services/project/project.service.ts 新增 reportProject / reportProjectSafe 方法
frontend/components/common/receive/index.ts 导出 ReportButton 组件
frontend/components/common/receive/ReportButton.tsx 实现举报按钮的 UI 组件
frontend/components/common/receive/ReceiveContent.tsx 在详情页内容中集成 ReportButton
frontend/.env.local 新增本地环境变量配置
Comments suppressed due to low confidence (2)

frontend/lib/services/project/project.service.ts:206

  • 可在 post 方法中指定请求体类型，如 apiClient.post<ReportProjectResponse, ReportProjectRequest>，提升类型安全。
    const response = await apiClient.post<ReportProjectResponse>(`${this.basePath}/${projectId}/report`, {

frontend/.env.local:1

  • 建议将 .env.local 添加到 .gitignore，并提供 .env.example 以避免提交本地配置文件到仓库。
FRONTEND_BASE_URL=http://localhost:3000

@OrenZhang OrenZhang requested review from TethysPlex and chenyme July 6, 2025 08:21
TethysPlex

This comment was marked as resolved.

Sign in to view

@OrenZhang

This comment was marked as resolved.

Sign in to view
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jul 6, 2025

@copilot 移除 tsconfig.tsbuildinfo 文件，并添加到 gitignore 中

已移除 tsconfig.tsbuildinfo 文件并更新了 .gitignore，同时也移除了不应提交的 .env.local 文件。构建产物和本地环境文件现在已被正确排除。(0edd0ab)

TethysPlex
TethysPlex reviewed Jul 6, 2025
View reviewed changes
@OrenZhang
Copy link
Copy Markdown
Contributor

OrenZhang commented Jul 6, 2025

@copilot 参考 UsSubDidIt 的评论处理

  1. 将举报按钮放到页面左下角，参考截图中的内容处理
  2. 优化 gitignore
  3. 维护举报按钮的内部状态，接口成功后就隐藏按钮或者切换一下展示的信息，如果是失败，但是响应 body 的 error_message 是 “已举报过当前项目” 也需要同样的操作 { "error_msg": "已举报过当前项目", "data": null }

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jul 6, 2025 •
edited
Loading

@copilot 参考 UsSubDidIt 的评论处理

  1. 将举报按钮放到页面左下角，参考截图中的内容处理
  2. 优化 gitignore
    ...

已完成所有三个改进要求：1) 举报按钮移至页面左下角footer位置；2) 优化gitignore使用通配符模式；3) 修复按钮状态管理，支持实时状态更新。(d39b04f)

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

@TethysPlex
Copy link
Copy Markdown
Collaborator

TethysPlex commented Jul 6, 2025

let me see see

@OrenZhang
Copy link
Copy Markdown
Contributor

OrenZhang commented Jul 6, 2025

@copilot
举报按钮放错位置了，应该放在 “项目描述” 下方，用 <hr/> 分隔开，参考上半部分的分隔的样式，然后使用 icon + 文本描述的文本按钮，而不是一个常规的按钮，icon 使用举报 icon，文本描述为 "举报项目"

Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jul 6, 2025 •
edited
Loading

@copilot
举报按钮放错位置了，应该放在 “项目描述” 下方，用 <hr/> 分隔开，参考上半部分的分隔的样式，然后使用 icon + 文本描述的文本按钮，而��...

已完成所有要求的更改：1) 将举报按钮移动到项目描述下方，使用 <hr/> 分隔；2) 改为文本按钮样式，使用 Flag 图标 + "举报项目" 文本；3) 移除了之前的固定定位样式。(d9837c2)

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

chenyme
chenyme previously approved these changes Jul 6, 2025
View reviewed changes
TethysPlex
TethysPlex previously approved these changes Jul 6, 2025
View reviewed changes
Copy link
Copy Markdown
Collaborator

@TethysPlex TethysPlex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

基本上 LGTM～

Copilot AI dismissed stale reviews from TethysPlex and chenyme via 0fc667b July 6, 2025 09:16
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jul 6, 2025

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

TethysPlex
TethysPlex approved these changes Jul 6, 2025
View reviewed changes
Copy link
Copy Markdown
Collaborator

@TethysPlex TethysPlex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

此处 LGTM 既可以解释为 Looks Good to Merge, 也可解释为 Looks Good to Me, 令人忍俊不禁。

@chenyme chenyme merged commit d109559 into master Jul 6, 2025
9 checks passed
@OrenZhang OrenZhang deleted the copilot/fix-63 branch July 6, 2025 09:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chenyme chenyme chenyme left review comments

Copilot code review Copilot Copilot left review comments

@TethysPlex TethysPlex TethysPlex approved these changes

+1 more reviewer

@OrenZhang OrenZhang OrenZhang approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@OrenZhang OrenZhang

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

feature: 项目详情页增加举报按钮

5 participants

@OrenZhang @TethysPlex @chenyme