freefire
02a5ad0c30
SSR /admin/users 复用 ListUsers/BanUser/SetVerified/AdminAdjust，并回写 02/06/09 指针至徽章。 Co-authored-by: Cursor <cursoragent@cursor.com>
223 lines
10 KiB
Markdown
223 lines
10 KiB
Markdown
# 06 · 页面、交互与信息架构
|
||
|
||
> **读者**：实现前台 / 后台 UI 的 AI
|
||
> **前置**：[02-features.md](02-features.md)
|
||
> **源码**：[`frontend/src/App.tsx`](（仅 main）frontend/src/App.tsx)、[`frontend/src/pages/`](（仅 main）frontend/src/pages/)、[`frontend/src/components/`](（仅 main）frontend/src/components/)、[`frontend/src/layouts/`](（仅 main）frontend/src/layouts/)
|
||
|
||
视觉可重设；**信息架构与关键操作流应对齐**。新站建议 SSR 直出同等信息，而不是先空壳再 fetch。
|
||
|
||
---
|
||
|
||
## 1. 路由表
|
||
|
||
> **本分支（`rebuild/gitea-ssr`）**：浏览器 UI 走 `routers/web` 模板 + 表单，**不依赖**论坛 JSON `/api`。下表「SSR」列表示是否已迁。
|
||
|
||
### 1.1 认证
|
||
|
||
| 路径 | 说明 | SSR |
|
||
|------|------|-----|
|
||
| `/login` | 登录 / 登出 | 已迁 |
|
||
| `/register` | 注册（图形验证码；邮件就绪时要邮箱验证码） | 已迁 |
|
||
| `/forgot-password` | 忘记密码 | 已迁 |
|
||
|
||
### 1.2 前台
|
||
|
||
| 路径 | 说明 | SSR |
|
||
|------|------|-----|
|
||
| `/` | Feed | 已迁 |
|
||
| `/board/:id` | 板块 Feed | 已迁 |
|
||
| `/boards` | 板块索引 | 已迁 |
|
||
| `/post/:id` | 帖详情 + 评论（回复/赞/私密）/赞/藏 | 已迁 |
|
||
| `/compose` | 发帖（normal / question / poll / bounty / lottery；textarea + 图片 + 门控插入） | 已迁 |
|
||
| `/post/:id/edit` | 编辑帖 | 已迁 |
|
||
| `/profile` | 个人中心（资料/密码/头像/积分钱包） | 已迁 |
|
||
| `/user/:id` | 公开用户页 | 已迁 |
|
||
| `/favorites` | 收藏 | 已迁 |
|
||
| `/projects` | Gitea 码桶 | 后置 |
|
||
| `/links` | 友链 | 已迁 |
|
||
| `/messages` | 私信/通知会话列表 | 已迁 |
|
||
| `/messages/with/:peerId` | 会话详情（peer=0 系统通知） | 已迁 |
|
||
| `/page/:slug` | 站点单页 | 已迁 |
|
||
| `*` | 404 / pending | 已迁 |
|
||
|
||
### 1.3 后台（Admin SSR，表单 + CSRF，不挂管理 JSON `/api`）
|
||
|
||
| 路径 | 说明 | SSR |
|
||
|------|------|-----|
|
||
| `/admin` | 重定向 dashboard | 已迁 |
|
||
| `/admin/dashboard` | 概览计数 | 已迁 |
|
||
| `/admin/boards` | 板块 CRUD | 已迁 |
|
||
| `/admin/moderation` | 待审帖/评 通过/拒绝 | 已迁 |
|
||
| `/admin/settings` | 品牌 + 基础限流 + 敏感词 + SMTP | 已迁 |
|
||
| `/admin/friend-links` | 品牌友链、申请审核、入口开关 | 已迁 |
|
||
| `/admin/pages` | 站点单页 CRUD / 发布 | 已迁 |
|
||
| `/admin/reports` | 举报处理 | 已迁 |
|
||
| `/admin/users` | 用户列表、禁言、认证、调积分 | 已迁 |
|
||
| `/admin/trash` | 帖回收站 | 已迁 |
|
||
| `/admin/login` | 重定向前台登录 | 已迁 |
|
||
|
||
未迁（原 SPA）：badges / media / 完整 Limits 等。
|
||
|
||
---
|
||
|
||
## 2. 三栏布局（桌面）
|
||
|
||
```text
|
||
+------------------+---------------------------+------------------+
|
||
| Sidebar | Feed / 主内容 | RightPanel |
|
||
| - 全部/收藏/码桶 | - FeedHeader / SortBar | - 签到条(登录) |
|
||
| - 板块列表 | - VirtualPostList | - 热门帖 |
|
||
| - 站点页/友链 | - 或 PostDetail 等 | - aside_widgets |
|
||
| - 管理入口 | | 标签云/评论/ |
|
||
| | | 用户/友链 |
|
||
+------------------+---------------------------+------------------+
|
||
| Footer: ICP / 友链入口 / 站点页链接 |
|
||
+------------------------------------------------------------------+
|
||
```
|
||
|
||
### 2.1 左栏 Sidebar
|
||
|
||
- 全部帖子、我的收藏（登录）、开源码桶
|
||
- 板块列表（图标 + 色点 + 名称）；空站引导「创建第一个板块」
|
||
- 站点区：友链入口（`nav_show_friend_links`）、`show_in_nav` 的站点页
|
||
- 管理员：管理后台入口
|
||
|
||
### 2.2 中栏
|
||
|
||
**Feed**：排序条（最新发帖 / 最新回复 / 热门）+ 搜索面板（关键词、标签、作者、仅标题；已迁 SSR GET）+ 列表项（标题、作者、板块徽章、回复数、置顶/精华）。虚拟滚动 / `feed_list_style` 未迁。
|
||
|
||
**帖子详情**：标题区操作（赞、藏、举报、编辑、管理操作）→ 待审/被拒横幅（作者/管理员）→ 特殊组件（投票卡 / 悬赏条 / 抽奖卡）→ 正文 `PostContent`（门控块 UI）→ 文章目录 → 作者卡片 → 修订入口 → 评论线程 + 评论框。
|
||
|
||
### 2.3 右栏 RightPanel
|
||
|
||
- 登录用户：`AsideCheckInStrip`（签到 + 抽奖 + 积分入口）— **已迁** SSR 右栏；流水/详情仍在 `/profile#wallet`
|
||
- 热门帖 — **已迁** SSR（固定块）
|
||
- 可配置 widgets：`tag_cloud` / `recent_comments` / `recent_users` / `friend_links`（顺序与开关来自 `aside_widgets`）— **已迁** SSR；Admin `/admin/settings` 侧栏组件开关与排序；友链页 aside 勾选共用同一 JSON
|
||
- 桌面三列；≤900px 隐藏右栏
|
||
|
||
### 2.4 移动端
|
||
|
||
- 侧栏抽屉化；顶栏搜索/发帖/登录触手可及
|
||
- `PullToRefresh` 下拉刷新
|
||
- 触控友好列表行高
|
||
|
||
### 2.5 主题
|
||
|
||
- 浅色 / 暗色；`localStorage` 记忆；可跟随系统
|
||
|
||
---
|
||
|
||
## 3. 发帖页 Compose
|
||
|
||
组件：`ComposeHeader`、`ComposeContextBar`（帖类型）、`ComposeSpecialFields`、`ComposeDocument` / `ArticleEditor`。
|
||
|
||
### 3.1 帖类型切换
|
||
|
||
| 类型 | 附加 UI |
|
||
|------|---------|
|
||
| 讨论 | 无 |
|
||
| 问答 | 无额外字段（解决状态在详情）— SSR compose 可选；详情切换已迁 |
|
||
| 投票 | 选项列表、多选开关、最多可选、截止时间或无截止 |
|
||
| 悬赏 | 积分输入（显示余额）— SSR compose；发帖托管 |
|
||
| 抽奖 | 中奖人数 1–20 — SSR compose |
|
||
|
||
### 3.2 编辑器能力（应对齐）
|
||
|
||
源：[`ArticleEditor.tsx`](（仅 main）frontend/src/components/ArticleEditor.tsx) 与 `editor/` 扩展
|
||
|
||
- 标题 h2–h6（无 h1，避免与帖标题冲突）
|
||
- 粗体/斜体/删除线等基础标记
|
||
- 链接对话框
|
||
- 代码块（语言、选项对话框）
|
||
- 表格插入/编辑
|
||
- 图片上传 + 图片组布局 + 浮动/清除浮动
|
||
- 表情 / 贴纸选择器（多套：bilibili/douyin/tieba/weibo 等静态资源）
|
||
- **登录可见** / **回复可见** / **积分可见**（价格 1–9999）节点
|
||
- 富文本 ↔ Markdown 双模（门控块有 markdown 约定，见 [`utils/markdownContent.ts`](（仅 main）frontend/src/utils/markdownContent.ts)）
|
||
- Tab 缩进
|
||
|
||
未保存离开：`UnsavedChangesDialog`。
|
||
|
||
---
|
||
|
||
## 4. 帖子详情关键交互
|
||
|
||
| 模块 | 行为 |
|
||
|------|------|
|
||
| 门控块 | 锁定壳 UI（长度/价格/引导）；`POST /post/:id/unlock` 返回 inner HTML 后替换 |
|
||
| 问答状态 | 已解决/未解决徽章；作者或管理员 `POST /post/:id/question/resolve` 切换 — SSR |
|
||
| 投票卡 | 选选项提交；显示百分比；作者可结束 — SSR `/post/:id/poll/vote|close` |
|
||
| 悬赏条 | 显示积分与状态；采纳按钮在他人评论上；退款按钮按规则禁用并提示 — SSR `/post/:id/bounty/award|refund` |
|
||
| 抽奖卡 | 显示参与人数；开奖；中奖名单 — SSR `/post/:id/lottery/draw` |
|
||
| 评论 | 楼层列表、`reply_to` 引用、私密开关、点赞、举报、编辑（时限）、删除、回复/@ 通知 — SSR；嵌套树 UI 未做 |
|
||
| 修订 | 列表 + 单条快照 — SSR `/post/:id/revisions`（作者/管理员；无 diff） |
|
||
| 图片 | Lightbox 查看 |
|
||
|
||
---
|
||
|
||
## 5. 消息页
|
||
|
||
- 左：会话列表（系统会话单独）— SSR `/messages`；快捷链到回复/提及筛选
|
||
- 右：消息时间线；发送框 — SSR `/messages/with/:peerId`
|
||
- 顶：未读角标（全局导航也可显示）
|
||
- 通知筛选（kind）— 系统会话 `?kind=reply|mention|…`
|
||
|
||
---
|
||
|
||
## 6. 个人中心 / 公开主页
|
||
|
||
- 资料编辑、密码、头像直传（**本迭代无裁剪器**）— SSR `/profile`
|
||
- 公开页：签名、等级/积分只读、统计、最近帖 — SSR `/user/:id`（无邮箱）
|
||
- 收藏列表 — SSR `/favorites`
|
||
- 积分钱包面板（余额、近 N 条流水、签到/抽奖表单 PRG）— SSR `/profile`；导航展示当前积分
|
||
- 徽章展示：**未迁**
|
||
|
||
---
|
||
|
||
## 7. 友链页
|
||
|
||
- 展示品牌友链 — SSR `/links`
|
||
- 登录申请表单：名称、URL、Logo（地址或上传）、是否上首页、回链页 — `POST /links/apply`
|
||
- 我的申请状态列表；待审可取消
|
||
- Admin：`/admin/friend-links` 品牌增删、申请通过/拒绝、nav/footer/回链检测开关
|
||
|
||
---
|
||
|
||
## 8. 管理后台操作流（按页）
|
||
|
||
| 页 | 关键操作 |
|
||
|----|----------|
|
||
| Dashboard | 看计数与待办；点进对应列表 |
|
||
| Boards | 拖拽或数字排序；图标/色板选择；增删改 |
|
||
| Pages | 列表发布开关；编辑正文（HTML textarea）；nav/footer 勾选 — SSR `/admin/pages` |
|
||
| Links | 品牌友链增删；申请通过/拒绝/回链复检；回链检测开关；nav/footer/aside 开关 — SSR `/admin/friend-links`（aside 与 Settings 侧栏组件共用 `aside_widgets`） |
|
||
| Posts | 审核通过/拒绝 — SSR `/admin/moderation`；置顶/版顶/精华/锁编/锁评/软删 — 帖详情 Admin 条；回收站恢复/清除 — SSR `/admin/trash` |
|
||
| Comments | 审核 — SSR `/admin/moderation`；修订查看未迁 |
|
||
| Reports | 处理动作：dismiss / resolve / reject_post / reject_comment — SSR `/admin/reports` |
|
||
| Users | 搜索；禁言；认证；设等级；调积分；授徽章 |
|
||
| Badges | 定义自动/限定徽章 |
|
||
| Media | 分类浏览；批量删 |
|
||
| Settings | Tab：论坛限制、侧栏组件、伪静态、邮件、OIDC+客户端、Gitea、存储、品牌、敏感词、备份 — SSR `/admin/settings` 已迁品牌/限流/侧栏/敏感词/邮件/SQLite 备份（OIDC/Gitea/存储/伪静态未迁） |
|
||
|
||
---
|
||
|
||
## 9. 全局 UX 细节
|
||
|
||
- Toast（sonner）反馈成功/失败
|
||
- 路由级 ErrorBoundary / AppRouteError
|
||
- 懒加载页面 + retry（`lazyWithRetry`）
|
||
- 新标签打开帖子 / 正文外链：受 `open_posts_in_new_tab`、`open_content_links_in_new_tab` 控制
|
||
- 文档标题：`站点名 - 标语`；详情页应换成帖标题（SSR 时首屏即正确）
|
||
|
||
---
|
||
|
||
## 10. SSR 重构提示（交互层）
|
||
|
||
当前 SPA 在客户端挂载后才拉 `/api/posts/:id`。新站应：
|
||
|
||
1. 服务端渲染列表项与帖文 HTML（已按门控红action）
|
||
2. 水合后接上赞/评/解锁等交互
|
||
3. 管理后台仍可为 CSR，但前台公开页优先 SSR
|
||
|
||
勿再维护「爬虫一套 HTML、用户一套空壳」双轨，除非过渡期兼容。
|