Add backend feedback submission and image preview
Some checks failed
CI / verify (push) Has been cancelled
Some checks failed
CI / verify (push) Has been cancelled
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
|
||||
在平台“我的”页签新增“反馈”入口。用户点击后进入独立路由 `/profile/feedback`，看到移动端优先的“帮助与反馈”表单页面，用于提交问题描述、上传问题截图凭证并选填联系电话。
|
||||
|
||||
本次目标是补齐用户反馈入口和前端提交流程，不重新发明新的个人中心系统，不在“我的”页签当前面板下方展开表单。
|
||||
本次目标是补齐用户反馈入口、图片预览、后端提交接口和 SpacetimeDB 持久化闭环，不重新发明新的个人中心系统，不在“我的”页签当前面板下方展开表单。
|
||||
|
||||
## 1. 参考图
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
|
||||
页面结构以该参考图为准：
|
||||
|
||||
1. 顶部白色导航栏，标题为“帮助与反馈”。
|
||||
2. 内容背景为浅灰色。
|
||||
1. 页面顶部保留项目风格返回按钮和标题“帮助与反馈”，不保留无实际功能的仿客户端顶部栏。
|
||||
2. 内容背景、卡片、按钮和状态色使用现有平台主题变量，避免硬编码成与主站不一致的蓝灰色页面。
|
||||
3. 分区标题为“反馈问题”。
|
||||
4. 第一张白色圆角卡片为“问题描述”。
|
||||
5. 第二张白色圆角卡片为“上传凭证(提供问题截图)”。
|
||||
@@ -41,21 +41,19 @@
|
||||
- 展示虚线上传方块。
|
||||
- 支持选择图片时，最多 4 张。
|
||||
- 前端可预览已选图片。
|
||||
- 不接后端时，提交只进入前端成功态。
|
||||
- 已选图片使用 Data URL 预览，并随提交请求作为首版反馈凭证入库。
|
||||
- 联系电话：
|
||||
- 选填。
|
||||
- placeholder：`选填，如您填写则将会同步开发者与您联系`。
|
||||
- 提交后显示成功态。
|
||||
- 提交后通过 `POST /api/profile/feedback` 写入 SpacetimeDB，接口成功后显示成功态。
|
||||
- 返回后回到平台首页并定位“我的”页签。
|
||||
|
||||
### 2.2 不包含
|
||||
|
||||
- 不新增后端反馈存储接口。
|
||||
- 不新增 SpacetimeDB 表结构和 migration。
|
||||
- 不新增后台反馈记录管理页。
|
||||
- 不实现真实“反馈与投诉记录”列表。
|
||||
|
||||
如果后续要求真实存储反馈，需要另起后端 PRD/技术方案，覆盖 `shared-contracts`、`api-server`、SpacetimeDB 表与后台管理入口。
|
||||
后端接入细节以 [`docs/technical/PROFILE_FEEDBACK_BACKEND_INTEGRATION_2026-05-08.md`](../technical/PROFILE_FEEDBACK_BACKEND_INTEGRATION_2026-05-08.md) 为准。
|
||||
|
||||
## 3. 入口设计
|
||||
|
||||
@@ -80,15 +78,14 @@
|
||||
### 4.1 页面整体
|
||||
|
||||
- 移动端优先。
|
||||
- 背景为浅灰色或与现有平台浅色 surface 接近的背景。
|
||||
- 表单容器使用白色圆角卡片。
|
||||
- 背景、表单容器、输入框、提示和按钮复用 `platform-*` 主题变量。
|
||||
- 桌面端居中展示，最大宽度不超过移动表单阅读范围，避免横向拉满。
|
||||
|
||||
### 4.2 顶部栏
|
||||
### 4.2 返回区
|
||||
|
||||
- 标题：`帮助与反馈`。
|
||||
- 左侧返回/首页图标：点击返回平台首页“我的”页签。
|
||||
- 右侧胶囊控制区可不完全复刻；项目内若没有同类控件，保持简洁，不强行新增无实际功能按钮。
|
||||
- 左侧返回按钮：点击返回平台首页“我的”页签。
|
||||
- 不展示右侧胶囊控制区、假系统按钮或无实际功能顶部栏。
|
||||
|
||||
### 4.3 问题描述卡片
|
||||
|
||||
@@ -107,6 +104,8 @@
|
||||
- `(最多四张)`
|
||||
- 支持图片选择时，只允许 `image/*`。
|
||||
- 超过 4 张时提示：`最多上传四张凭证`。
|
||||
- 单张图片最大 1MB，总大小最大 4MB。
|
||||
- 选择图片后必须立即展示缩略图预览，删除后从待提交凭证中移除。
|
||||
|
||||
### 4.5 联系电话卡片
|
||||
|
||||
@@ -142,7 +141,7 @@
|
||||
3. 联系电话超过 40 字符：提示 `联系电话不能超过 40 字`。
|
||||
4. 上传凭证超过 4 张：提示 `最多上传四张凭证`。
|
||||
|
||||
校验通过后进入前端成功态。
|
||||
校验通过后调用 `POST /api/profile/feedback`，请求成功后进入成功态。
|
||||
|
||||
## 7. 验收标准
|
||||
|
||||
@@ -154,6 +153,9 @@
|
||||
- 空内容或少于 10 个字提交时显示校验错误。
|
||||
- 有效内容提交后显示成功态。
|
||||
- 上传凭证最多 4 张。
|
||||
- 上传凭证选择后显示图片预览。
|
||||
- 有效反馈提交后写入 `profile_feedback_submission` 表。
|
||||
- 提交接口返回 `feedbackId`、状态、提交时间和凭证元数据。
|
||||
- 联系电话为空时可以提交。
|
||||
- 返回后回到“我的”页签。
|
||||
- 页面在 390×844 移动端视口不横向溢出。
|
||||
@@ -165,8 +167,16 @@
|
||||
- 路由：`src/routing/appPageRoutes.ts`
|
||||
- 阶段类型：`src/components/platform-entry/platformEntryTypes.ts`
|
||||
- 反馈页：`src/components/platform-entry/PlatformFeedbackView.tsx`
|
||||
- 前端 profile client：`src/services/rpg-entry/rpgProfileClient.ts`
|
||||
- 我的页签入口：`src/components/rpg-entry/RpgEntryHomeView.tsx`
|
||||
- 页面接入：`src/components/platform-entry/PlatformEntryFlowShellImpl.tsx`
|
||||
- 共享契约：`packages/shared/src/contracts/runtime.ts`、`server-rs/crates/shared-contracts/src/runtime.rs`
|
||||
- 后端 API：`server-rs/crates/api-server/src/runtime_profile.rs`
|
||||
- SpacetimeDB：`server-rs/crates/spacetime-module/src/runtime/profile.rs`
|
||||
- 领域规则：`server-rs/crates/module-runtime/src/*`
|
||||
- 测试：
|
||||
- `src/routing/appPageRoutes.test.ts`
|
||||
- `src/components/platform-entry/PlatformFeedbackView.test.tsx`
|
||||
- `src/services/rpg-entry/rpgProfileClient.test.ts`
|
||||
- `server-rs/crates/module-runtime`
|
||||
- `server-rs/crates/api-server/src/runtime_profile.rs`
|
||||
|
||||
Reference in New Issue
Block a user