Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f3f50d7e90 | |||
| 67bef6dc08 | |||
| 23e304ac53 | |||
| cad53942e8 | |||
| 76be8926f2 | |||
| 4d93e455f9 | |||
| c958dcfd80 | |||
| 84bfbd9a3e | |||
| 500e452c2f | |||
| 1c0f7ede55 |
5
.gitignore
vendored
5
.gitignore
vendored
@@ -20,9 +20,12 @@ tmp-cookie.txt
|
||||
# 编辑器 / OS
|
||||
.idea/
|
||||
.vscode/
|
||||
.trae/documents/
|
||||
.trae/chat/
|
||||
.trae/image/
|
||||
*.swp
|
||||
Thumbs.db
|
||||
.DS_Store
|
||||
|
||||
# Lucide path <20><>ȡ<EFBFBD><C8A1>ʱ<EFBFBD><CAB1><EFBFBD><EFBFBD>
|
||||
# Lucide path <20><>ȡ<EFBFBD><C8A1>ʱ<EFBFBD><CAB1><EFBFBD><EFBFBD>
|
||||
frontend/tmp-lucide-paths.json
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
# 表情效果调整计划
|
||||
|
||||
## 问题分析
|
||||
|
||||
当前实现存在 5 个问题，根因如下：
|
||||
|
||||
### 1. 插入表情后有选择状态（蓝色高亮）
|
||||
- **根因**: Tiptap `setImage` 插入图片节点后，节点处于 "node-selected" 状态，显示蓝色选中框
|
||||
- **位置**: [CommentEditor.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentEditor.tsx) L155-163
|
||||
|
||||
### 2. 输入框表情太大
|
||||
- **根因**: CSS 选择器 `img[src^="data:image/svg"]` 只匹配旧 SVG data URI，不匹配新的 AVIF URL（`/stickers/tieba/tb_01.avif`），导致表情图片无尺寸约束，以原始大尺寸渲染
|
||||
- **位置**: [global.css](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/styles/global.css) L5584-5603
|
||||
|
||||
### 3. 插入表情后光标换行
|
||||
- **根因**: `ArticleImage.configure({ inline: false })` 使图片为块级节点，插入后自动换行
|
||||
- **位置**: [CommentEditor.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentEditor.tsx) L92
|
||||
|
||||
### 4. 表情栏目太宽松
|
||||
- **根因**: Grid 仅 6 列，gap 4px，padding 10px
|
||||
- **位置**: [global.css](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/styles/global.css) L5502-5510
|
||||
|
||||
### 5. 颜文字太小
|
||||
- **根因**: `.sticker-picker-text` 的 `font-size: 8px`，极小
|
||||
- **位置**: [global.css](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/styles/global.css) L5606-5616
|
||||
|
||||
## 改动方案
|
||||
|
||||
### 文件 1: CommentEditor.tsx
|
||||
**改动 A — 图片改为内联** (L92):
|
||||
```typescript
|
||||
// 旧
|
||||
ArticleImage.configure({ inline: false, allowBase64: true }),
|
||||
// 新
|
||||
ArticleImage.configure({ inline: true, allowBase64: true }),
|
||||
```
|
||||
|
||||
**改动 B — insertSticker 插入后取消选中和换行** (L155-163):
|
||||
```typescript
|
||||
const insertSticker = useCallback((sticker: Sticker) => {
|
||||
if (!editor) return;
|
||||
if (sticker.type === 'text' && sticker.text) {
|
||||
editor.chain().focus().insertContent(sticker.text).run();
|
||||
} else if (sticker.url) {
|
||||
// 插入内联图片 + 尾随零宽空格，确保光标在图片后面而非选中图片
|
||||
editor.chain().focus().insertContent([
|
||||
{ type: 'image', attrs: { src: sticker.url, alt: sticker.name } },
|
||||
{ type: 'text', text: '\u200b' },
|
||||
]).run();
|
||||
}
|
||||
setShowSticker(false);
|
||||
}, [editor]);
|
||||
```
|
||||
> 用 `insertContent` + 零宽空格替代 `setImage`，避免 node-selected 状态，光标自然落在图片后。
|
||||
|
||||
### 文件 2: StickerPicker.tsx
|
||||
**改动 C — 键盘导航列数匹配新网格** (L44):
|
||||
```typescript
|
||||
// 旧
|
||||
const cols = 6;
|
||||
// 新
|
||||
const cols = 8;
|
||||
```
|
||||
|
||||
### 文件 3: global.css
|
||||
**改动 D — 表情选择器密度提升** (L5502-5510):
|
||||
```css
|
||||
.sticker-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr); /* 6 → 8 */
|
||||
gap: 2px; /* 4px → 2px */
|
||||
padding: 6px; /* 10px → 6px */
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
```
|
||||
|
||||
**改动 E — 选择器项缩小** (L5512-5522):
|
||||
```css
|
||||
.sticker-picker-item {
|
||||
padding: 2px; /* 4px → 2px */
|
||||
/* 其余不变 */
|
||||
}
|
||||
```
|
||||
|
||||
**改动 F — 颜文字字体放大** (L5606-5616):
|
||||
```css
|
||||
.sticker-picker-text {
|
||||
font-size: 14px; /* 8px → 14px */
|
||||
line-height: 1.4; /* 1.2 → 1.4 */
|
||||
/* 其余不变 */
|
||||
}
|
||||
```
|
||||
|
||||
**改动 G — 替换旧 SVG 选择器为通用贴纸选择器** (L5584-5603):
|
||||
|
||||
删除旧的 `img[src^="data:image/svg"]` 选择器，替换为基于 `/stickers/` 路径的选择器：
|
||||
|
||||
```css
|
||||
/* 编辑器内贴纸 img 尺寸约束 */
|
||||
.comment-editor .article-prosemirror img[src*="/stickers/"],
|
||||
.comment-editor .article-editor-content img[src*="/stickers/"] {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
vertical-align: middle;
|
||||
margin: 0 1px;
|
||||
border-radius: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 评论正文中的贴纸 img */
|
||||
.floor-body img[src*="/stickers/"],
|
||||
.comment-body img[src*="/stickers/"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 1px;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
object-fit: contain;
|
||||
}
|
||||
```
|
||||
|
||||
**改动 H — 移动端网格也改为 8 列** (L5619-5624):
|
||||
```css
|
||||
@media (max-width: 640px) {
|
||||
.sticker-picker { max-height: 240px; }
|
||||
.sticker-picker-grid { grid-template-columns: repeat(6, 1fr); } /* 移动端 6 列 */
|
||||
.sticker-picker-tab { padding: 6px 10px; font-size: 12px; }
|
||||
.comment-editor .article-tool-btn { width: 30px; height: 30px; }
|
||||
}
|
||||
```
|
||||
> 移动端保持 6 列（屏幕窄），桌面端 8 列。
|
||||
|
||||
## 不改动
|
||||
- `ArticleImageExtension.tsx` — 无需修改，`inline: true` 通过 `configure()` 传入即可
|
||||
- `kaomoji.ts` / `emojiData.ts` / `hot.ts` — 数据层不变
|
||||
- `CommentContent.tsx` — 渲染层不变（CSS 覆盖即可）
|
||||
- PostEditor（帖子编辑器）— 不受影响，仍使用 `inline: false`
|
||||
|
||||
## 验证
|
||||
1. `npm run build` 无报错
|
||||
2. 浏览器验证：
|
||||
- 选择表情后插入无蓝色选中框
|
||||
- 表情在输入框中显示 28px，内联在文字中
|
||||
- 插入表情后光标紧跟表情后方，不换行
|
||||
- 表情选择器 8 列密度更高
|
||||
- 颜文字标签内字体清晰可读
|
||||
@@ -1,597 +0,0 @@
|
||||
# 评论表情包改造 + 富文本评论编辑器计划
|
||||
|
||||
## 一、摘要
|
||||
|
||||
将评论系统从「纯文本 textarea + Unicode Emoji」升级为「Tiptap 富文本编辑器 + 姜十三专属 SVG 贴纸」，实现：
|
||||
1. 去除所有 Unicode Emoji，替换为自定义 SVG 贴纸（懒加载）
|
||||
2. 姜十三专属表情包：萌系吉祥物表情 + 中文网络流行语文字气泡（混合风格）
|
||||
3. 评论复用帖子编辑器核心能力（精简变体），支持代码块、链接、图片、格式化等
|
||||
|
||||
---
|
||||
|
||||
## 二、当前状态分析
|
||||
|
||||
### 2.1 评论输入：纯文本 textarea
|
||||
|
||||
[CommentBox.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentBox.tsx) 使用 `<textarea>` 输入评论，功能包括：
|
||||
- `@` 用户提及（textarea 选区扫描 + API 搜索用户）
|
||||
- Unicode Emoji 面板（[EmojiPicker.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/EmojiPicker.tsx) + [emojis.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/emojis.ts)）
|
||||
- 隐私评论开关
|
||||
- 无富文本格式化能力
|
||||
|
||||
### 2.2 评论渲染：纯文本转义
|
||||
|
||||
[CommentContent.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentContent.tsx) 通过 [content.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/content.ts) 的 `highlightMentions()` 渲染评论：
|
||||
- `escapeWithBreaks()` 转义 HTML 并将 `\n` 转为 `<br>`
|
||||
- 正则匹配 `@username` 包裹为可点击 `<span class="mention">`
|
||||
- 不支持 HTML/Markdown 渲染
|
||||
|
||||
### 2.3 评论编辑：纯 textarea
|
||||
|
||||
[CommentThreadList.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentThreadList.tsx#L276-L297) 编辑模式使用 `<textarea>` 直接修改文本。
|
||||
|
||||
### 2.4 帖子编辑器：Tiptap 富文本
|
||||
|
||||
[ArticleEditor.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/ArticleEditor.tsx) 是功能完整的 Tiptap 编辑器（900 行），包含：
|
||||
- 富文本模式 + Markdown 模式切换
|
||||
- 工具栏：标题/加粗/斜体/下划线/删除线/分割线/引用/列表/代码块/表格/链接/图片/图组
|
||||
- 门控区块：登录可见/回复可见/积分可见
|
||||
- 全屏模式
|
||||
- `forwardRef` 暴露 `getHTML()` / `isEmpty()` / `focus()`
|
||||
- 使用 `DOMPurify` + `POST_CONTENT_PURIFY_CONFIG` 净化 HTML
|
||||
|
||||
### 2.5 后端评论存储
|
||||
|
||||
- [models.go](file:///c:/Users/freefire/Documents/jiang13-forum/model/models.go#L143-L164): `Comment.Content` 字段类型为 `text`，存储纯文本
|
||||
- [comment.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/comment.go#L172-L176): `Create()` 仅做 `TrimSpace` + 敏感词过滤，**无 HTML 净化**
|
||||
- [handlers.go](file:///c:/Users/freefire/Documents/jiang13-forum/handler/handlers.go#L508-L530): `APICreateComment` 从 FormData 取 `content` 字段
|
||||
- [sanitize_html.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/sanitize_html.go): `SanitizePostHTML` 已有 HTML 白名单策略（bluemonday），但**仅用于帖子，未用于评论**
|
||||
|
||||
### 2.6 表情数据
|
||||
|
||||
[emojis.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/emojis.ts) 定义约 160 个 Unicode Emoji 字符，无分类、无搜索。
|
||||
|
||||
---
|
||||
|
||||
## 三、修改方案
|
||||
|
||||
### Part A：姜十三专属 SVG 贴纸系统
|
||||
|
||||
#### A1. 贴纸数据定义
|
||||
|
||||
**新建** `frontend/src/data/stickers.ts`
|
||||
|
||||
```typescript
|
||||
export interface Sticker {
|
||||
id: string; // 唯一ID，如 "j13-happy"
|
||||
name: string; // 名称，如 "开心"
|
||||
category: StickerCategory;
|
||||
aliases?: string[]; // 搜索别名
|
||||
svg: string; // 完整 SVG 字符串（含 viewBox 0 0 64 64）
|
||||
}
|
||||
|
||||
export type StickerCategory = '热门' | '姜十三' | '文字气泡';
|
||||
|
||||
export const STICKER_CATEGORIES: StickerCategory[] = ['热门', '姜十三', '文字气泡'];
|
||||
export const STICKERS: Sticker[] = [ /* ... */ ];
|
||||
```
|
||||
|
||||
**贴纸内容设计（约 40 个）：**
|
||||
|
||||
| 分类 | 数量 | 内容 |
|
||||
|------|------|------|
|
||||
| 姜十三 | 16 | 萌系姜色（ginger色 #D4A574）圆脸吉祥物，额头带"13"标记，各种表情：开心/大笑/哭泣/生气/惊讶/思考/点赞/心心眼/睡觉/疑惑/酷/捂脸/送花/鼓掌/加油/拜托 |
|
||||
| 文字气泡 | 16 | 圆角气泡 + 中文网络流行语：666/大佬/同问/给力/沙发/学习了/已赞/佩服/妙啊/牛批/感谢/收藏了/围观/催更/瑞思拜/芜湖 |
|
||||
| 热门 | 8 | 从上述两类中精选最常用的 8 个 |
|
||||
|
||||
**SVG 设计规范：**
|
||||
- `viewBox="0 0 64 64"` 统一尺寸
|
||||
- 所有 fill 使用内联颜色（不依赖 CSS 变量）
|
||||
- 姜十三吉祥物主色系：`#D4A574`（姜色）/ `#FFF3E0`（浅姜）/ `#E8B87C`（深姜）
|
||||
- 文字气泡：`#FF6B6B`（红）/ `#4ECDC4`（青）/ `#FFE66D`（黄）/ `#95E1D3`（绿）四色循环
|
||||
- 线条圆润，stroke-linecap: round
|
||||
|
||||
#### A2. SVG 贴纸渲染组件
|
||||
|
||||
**新建** `frontend/src/components/emoji/StickerSvg.tsx`
|
||||
|
||||
```typescript
|
||||
interface StickerSvgProps {
|
||||
id: string;
|
||||
size?: number; // 默认 28
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
|
||||
- 从 `STICKERS` 查找对应 id，渲染 `dangerouslySetInnerHTML={{ __html: sticker.svg }}`
|
||||
- SVG 已自包含 fill 颜色，无需额外样式
|
||||
|
||||
#### A3. 贴纸选择器（懒加载）
|
||||
|
||||
**新建** `frontend/src/components/emoji/StickerPicker.tsx`
|
||||
|
||||
```typescript
|
||||
interface StickerPickerProps {
|
||||
onSelect: (stickerId: string) => void;
|
||||
}
|
||||
```
|
||||
|
||||
**UI 结构：**
|
||||
```
|
||||
┌──────────────────────────────┐
|
||||
│ [热门] [姜十三] [文字气泡] │ ← 分类 Tab
|
||||
├──────────────────────────────┤
|
||||
│ [🙂] [😂] [❤️] [👍] [🎉] ... │ ← SVG 贴纸网格（6列桌面/4列移动端）
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
**懒加载策略：**
|
||||
- 贴纸数据按分类拆分为独立 chunk：`data/stickers/j13.ts`、`data/stickers/text.ts`、`data/stickers/hot.ts`
|
||||
- `StickerPicker` 使用 `React.lazy()` + `Suspense` 按需加载当前分类
|
||||
- 切换分类时才加载对应 chunk，首次打开只加载"热门"分类
|
||||
- 每个贴纸 SVG 在组件挂载时渲染（已在数据中内联，无需额外网络请求）
|
||||
|
||||
**交互：**
|
||||
- 分类 Tab 点击切换，带下划线动画
|
||||
- 贴纸 hover: `transform: scale(1.15)`, 0.1s 过渡
|
||||
- 点击贴纸触发 `onSelect(sticker.id)`
|
||||
- 键盘导航：方向键浏览 + Enter 选中
|
||||
|
||||
#### A4. 删除旧 Emoji 系统
|
||||
|
||||
- **删除** [emojis.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/emojis.ts)（`EMOJI_LIST` 导出）
|
||||
- **删除** [EmojiPicker.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/EmojiPicker.tsx)
|
||||
- **保留** `.emoji-picker*` CSS 类（避免影响其他可能的引用），新增 `.sticker-picker*` 类
|
||||
|
||||
---
|
||||
|
||||
### Part B：评论富文本编辑器（精简变体）
|
||||
|
||||
#### B1. 创建 CommentEditor 组件
|
||||
|
||||
**新建** `frontend/src/components/CommentEditor.tsx`
|
||||
|
||||
不直接复用 ArticleEditor（900 行，含全屏/Markdown/门控区块等评论不需要的功能），而是创建独立的精简 Tiptap 编辑器，**复用 ArticleEditor 的扩展组件**。
|
||||
|
||||
```typescript
|
||||
export interface CommentEditorHandle {
|
||||
getHTML: () => string;
|
||||
isEmpty: () => boolean;
|
||||
focus: () => void;
|
||||
}
|
||||
|
||||
interface CommentEditorProps {
|
||||
value: string;
|
||||
onChange: (html: string) => void;
|
||||
placeholder?: string;
|
||||
}
|
||||
```
|
||||
|
||||
**使用的 Tiptap 扩展（复用现有）：**
|
||||
- `StarterKit`（含 heading H2-H4、bold/italic/strike、blockquote、bulletList/orderedList、horizontalRule）
|
||||
- `Underline`（来自 @tiptap/extension-underline，已安装）
|
||||
- `Link`（来自 @tiptap/extension-link，已安装）
|
||||
- `ArticleCodeBlock`（来自 [ArticleCodeBlockExtension.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/editor/ArticleCodeBlockExtension.tsx)，复用）
|
||||
- `Placeholder`（来自 @tiptap/extension-placeholder，已安装）
|
||||
- `TabIndent`（来自 [TabIndentExtension.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/editor/TabIndentExtension.tsx)，复用）
|
||||
- `ArticleImage`（来自 [ArticleImageExtension.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/editor/ArticleImageExtension.tsx)，复用，用于插入图片）
|
||||
|
||||
**不使用的扩展（评论场景不需要）：**
|
||||
- ~~TableKit~~（表格）
|
||||
- ~~ImageGroup~~（图组）
|
||||
- ~~MembersOnly / ReplyOnly / PointsOnly~~（门控区块）
|
||||
- ~~ClearFloatParagraph~~（清除浮动段落）
|
||||
- ~~Markdown 模式~~
|
||||
- ~~全屏模式~~
|
||||
|
||||
**工具栏按钮（精简版）：**
|
||||
```
|
||||
[H] [B] [I] [U] [S] [引用] [列表] [有序列表] [代码块] [链接] [图片] [贴纸]
|
||||
```
|
||||
|
||||
**贴纸集成：**
|
||||
- 工具栏增加贴纸按钮（Lucide `Sticker` 图标）
|
||||
- 点击弹出 `StickerPicker`
|
||||
- 选中贴纸后，将 SVG 作为 inline `<img>` 插入编辑器：
|
||||
```typescript
|
||||
const sticker = STICKERS.find(s => s.id === id);
|
||||
const dataUri = `data:image/svg+xml,${encodeURIComponent(sticker.svg)}`;
|
||||
editor.chain().focus().setImage({ src: dataUri, alt: sticker.name }).run();
|
||||
```
|
||||
|
||||
**HTML 净化：**
|
||||
- 使用 `DOMPurify.sanitize(html, POST_CONTENT_PURIFY_CONFIG)` 与 ArticleEditor 一致
|
||||
- `POST_CONTENT_PURIFY_CONFIG` 来自 [postContent.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/postContent.ts)，复用现有配置
|
||||
|
||||
#### B2. 改造 CommentBox
|
||||
|
||||
**修改** [CommentBox.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentBox.tsx)
|
||||
|
||||
**主要变更：**
|
||||
1. 用 `CommentEditor` 替换 `<textarea>`
|
||||
2. 用 `CommentEditorHandle` ref 替代 `textareaRef`
|
||||
3. `content` 状态存储 HTML 而非纯文本
|
||||
4. 移除 `EmojiPicker` 导入和使用，贴纸功能已集成到 `CommentEditor`
|
||||
5. 移除 `owoRef` 和 `showEmoji` 状态
|
||||
6. `@` 提及功能：暂时保留为文本输入（在编辑器中输入 `@username`，渲染时由 `processCommentHtml` 处理高亮），编辑器内自动补全作为后续增强
|
||||
7. `insertEmoji` 改为 `insertSticker`，调用 `CommentEditor` ref 方法
|
||||
8. 隐私评论开关保留
|
||||
9. 发送时 `content` 为 HTML，直接传给 API
|
||||
|
||||
**改动前：**
|
||||
```tsx
|
||||
<textarea ref={textareaRef} value={content} onChange={handleChange} ... />
|
||||
<button ref={owoRef} onClick={() => setShowEmoji(v => !v)}>OwO</button>
|
||||
{showEmoji && <EmojiPicker onSelect={insertEmoji} />}
|
||||
```
|
||||
|
||||
**改动后：**
|
||||
```tsx
|
||||
<CommentEditor ref={editorRef} value={content} onChange={setContent} placeholder="说点什么吧…" />
|
||||
```
|
||||
|
||||
#### B3. 改造评论编辑模式
|
||||
|
||||
**修改** [CommentThreadList.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentThreadList.tsx#L276-L297)
|
||||
|
||||
编辑模式从 `<textarea>` 改为 `CommentEditor`：
|
||||
```tsx
|
||||
// 改动前
|
||||
<textarea value={editText} onChange={e => setEditText(e.target.value)} rows={3} />
|
||||
|
||||
// 改动后
|
||||
<CommentEditor value={editText} onChange={setEditText} placeholder="编辑评论…" />
|
||||
```
|
||||
|
||||
需要 import `CommentEditor`，并在 `handleSave` 中提交 HTML 内容。
|
||||
|
||||
---
|
||||
|
||||
### Part C：评论内容渲染
|
||||
|
||||
#### C1. 更新 content.ts 支持富文本
|
||||
|
||||
**修改** [content.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/content.ts)
|
||||
|
||||
当前 `highlightMentions()` 处理纯文本（转义 HTML + 换行 + @高亮）。需要新增 HTML 处理能力。
|
||||
|
||||
```typescript
|
||||
import DOMPurify from 'dompurify';
|
||||
import { POST_CONTENT_PURIFY_CONFIG } from '../utils/postContent';
|
||||
|
||||
/** 判断内容是否为 HTML（包含常见 HTML 标签） */
|
||||
function isHtmlContent(text: string): boolean {
|
||||
return /<(?:p|div|span|br|h[1-6]|ul|ol|li|pre|code|blockquote|a|img|table|strong|em|u|s)\b/i.test(text);
|
||||
}
|
||||
|
||||
/** 在 HTML 文本节点中高亮 @ 提及（DOM 遍历，避免破坏标签） */
|
||||
function processMentionsInHtml(html: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = html;
|
||||
const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
|
||||
const textNodes: Text[] = [];
|
||||
let node: Node | null;
|
||||
while ((node = walker.nextNode())) {
|
||||
textNodes.push(node as Text);
|
||||
}
|
||||
for (const textNode of textNodes) {
|
||||
const text = textNode.textContent ?? '';
|
||||
if (!/@[\w\u4e00-\u9fa5_-]/.test(text)) continue;
|
||||
const frag = document.createDocumentFragment();
|
||||
const parts = text.split(/(@[\w\u4e00-\u9fa5_-]+)/);
|
||||
for (const part of parts) {
|
||||
const m = part.match(/^@([\w\u4e00-\u9fa5_-]+)$/);
|
||||
if (m) {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'mention';
|
||||
span.setAttribute('data-name', m[1]);
|
||||
span.setAttribute('role', 'link');
|
||||
span.setAttribute('tabindex', '0');
|
||||
span.textContent = part;
|
||||
frag.appendChild(span);
|
||||
} else if (part) {
|
||||
frag.appendChild(document.createTextNode(part));
|
||||
}
|
||||
}
|
||||
textNode.parentNode?.replaceChild(frag, textNode);
|
||||
}
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/** 渲染评论内容：HTML 净化 + @提及高亮，兼容旧版纯文本 */
|
||||
export function renderCommentContent(content: string): string {
|
||||
if (isHtmlContent(content)) {
|
||||
// 新版 HTML 评论
|
||||
const sanitized = DOMPurify.sanitize(content, POST_CONTENT_PURIFY_CONFIG);
|
||||
return processMentionsInHtml(sanitized);
|
||||
}
|
||||
// 旧版纯文本评论（向后兼容）
|
||||
return escapeWithBreaks(content).replace(
|
||||
/@([\w\u4e00-\u9fa5_-]+)/g,
|
||||
'<span class="mention" data-name="$1" role="link" tabindex="0">@$1</span>',
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
保留原 `highlightMentions()` 函数不删除（可能有其他引用），新增 `renderCommentContent()`。
|
||||
|
||||
#### C2. 更新 CommentContent 组件
|
||||
|
||||
**修改** [CommentContent.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentContent.tsx)
|
||||
|
||||
```tsx
|
||||
import { renderCommentContent } from '../utils/content';
|
||||
|
||||
// 改动前
|
||||
dangerouslySetInnerHTML={{ __html: highlightMentions(content) }}
|
||||
|
||||
// 改动后
|
||||
dangerouslySetInnerHTML={{ __html: renderCommentContent(content) }}
|
||||
```
|
||||
|
||||
评论内容中的贴纸 `<img>` 标签会被 `POST_CONTENT_PURIFY_CONFIG` 保留（已允许 `<img>` + `src`），自然渲染为 SVG 图。
|
||||
|
||||
---
|
||||
|
||||
### Part D：后端评论 HTML 净化
|
||||
|
||||
#### D1. 评论创建时净化
|
||||
|
||||
**修改** [comment.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/comment.go#L172-L176)
|
||||
|
||||
```go
|
||||
func (s *CommentService) Create(in CommentCreateInput) (*model.Comment, error) {
|
||||
content := SanitizePostHTML(strings.TrimSpace(in.Content)) // 新增 HTML 净化
|
||||
content = s.filter.Filter(content) // 敏感词过滤
|
||||
// ... 其余不变
|
||||
}
|
||||
```
|
||||
|
||||
#### D2. 评论更新时净化
|
||||
|
||||
**修改** [comment.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/comment.go#L354-L376)
|
||||
|
||||
```go
|
||||
func (s *CommentService) Update(userID, commentID uint, isAdmin, skipModeration bool, content string) (string, bool, error) {
|
||||
// ...
|
||||
content = SanitizePostHTML(strings.TrimSpace(content)) // 新增
|
||||
content = s.filter.Filter(content) // 敏感词过滤
|
||||
// ... 其余不变
|
||||
}
|
||||
```
|
||||
|
||||
`SanitizePostHTML` 已在 [sanitize_html.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/sanitize_html.go) 中定义，使用 bluemonday 白名单策略，允许 Tiptap 产出的 HTML 标签和属性，禁止 `<script>`、`<style>` 等。
|
||||
|
||||
---
|
||||
|
||||
### Part E：CSS 样式
|
||||
|
||||
#### E1. 贴纸选择器样式
|
||||
|
||||
**修改** [global.css](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/styles/global.css#L5427-L5462) 区域
|
||||
|
||||
新增样式块（在现有 `.emoji-picker*` 样式之后）：
|
||||
|
||||
```css
|
||||
/* 贴纸选择器 */
|
||||
.sticker-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
border: 1px solid var(--j13-border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--j13-bg-surface);
|
||||
max-height: 280px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.sticker-picker-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--j13-border-light);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.sticker-picker-tab {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.sticker-picker-tab.active {
|
||||
color: var(--j13-green);
|
||||
border-bottom-color: var(--j13-green);
|
||||
}
|
||||
|
||||
.sticker-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 4px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sticker-picker-item {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background 0.1s, transform 0.1s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sticker-picker-item:hover {
|
||||
background: var(--color-fill-2);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
/* 贴纸加载占位 */
|
||||
.sticker-picker-loading {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: var(--color-text-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 640px) {
|
||||
.sticker-picker-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### E2. 评论编辑器样式
|
||||
|
||||
新增 `.comment-editor` 相关样式，复用 `.article-editor-bar`、`.article-tool-btn` 等现有类名，仅做覆盖调整：
|
||||
|
||||
```css
|
||||
/* 评论富文本编辑器 */
|
||||
.comment-editor .article-editor-bar {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.comment-editor .article-tool-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.comment-editor .article-editor-content {
|
||||
min-height: 80px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.comment-editor .article-editor-status {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
/* 评论内贴纸图片 */
|
||||
.comment-sticker {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 四、文件变更清单
|
||||
|
||||
### 新增文件
|
||||
|
||||
| 文件路径 | 用途 |
|
||||
|----------|------|
|
||||
| `frontend/src/data/stickers/hot.ts` | 热门贴纸数据（懒加载 chunk） |
|
||||
| `frontend/src/data/stickers/j13.ts` | 姜十三吉祥物贴纸数据（懒加载 chunk） |
|
||||
| `frontend/src/data/stickers/text.ts` | 文字气泡贴纸数据（懒加载 chunk） |
|
||||
| `frontend/src/data/stickers/index.ts` | 贴纸类型定义 + 统一导出 |
|
||||
| `frontend/src/components/emoji/StickerSvg.tsx` | SVG 贴纸渲染组件 |
|
||||
| `frontend/src/components/emoji/StickerPicker.tsx` | 贴纸选择器（懒加载） |
|
||||
| `frontend/src/components/CommentEditor.tsx` | 评论富文本编辑器（精简 Tiptap） |
|
||||
|
||||
### 修改文件
|
||||
|
||||
| 文件 | 变更 |
|
||||
|------|------|
|
||||
| [CommentBox.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentBox.tsx) | textarea → CommentEditor，移除 EmojiPicker，content 改为 HTML |
|
||||
| [CommentThreadList.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentThreadList.tsx#L276-L297) | 编辑模式 textarea → CommentEditor |
|
||||
| [CommentContent.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/CommentContent.tsx) | 使用 `renderCommentContent()` 替代 `highlightMentions()` |
|
||||
| [content.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/content.ts) | 新增 `renderCommentContent()` + `processMentionsInHtml()` |
|
||||
| [global.css](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/styles/global.css#L5427-L5462) | 新增 `.sticker-picker*` 和 `.comment-editor*` 样式 |
|
||||
| [comment.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/comment.go#L172-L176) | Create() 增加 `SanitizePostHTML` |
|
||||
| [comment.go](file:///c:/Users/freefire/Documents/jiang13-forum/service/comment.go#L354-L376) | Update() 增加 `SanitizePostHTML` |
|
||||
|
||||
### 删除文件
|
||||
|
||||
| 文件 | 原因 |
|
||||
|------|------|
|
||||
| [emojis.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/utils/emojis.ts) | Unicode Emoji 数据不再需要 |
|
||||
| [EmojiPicker.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/components/EmojiPicker.tsx) | 被 StickerPicker 替代 |
|
||||
|
||||
---
|
||||
|
||||
## 五、假设与决策
|
||||
|
||||
### 5.1 编辑器决策
|
||||
|
||||
- **不直接复用 ArticleEditor 组件**，而是创建独立的 CommentEditor，原因：
|
||||
- ArticleEditor 900 行，含全屏/Markdown/门控区块等评论不需要的功能
|
||||
- 复用 ArticleEditor 的 Tiptap 扩展组件（ArticleCodeBlock、ArticleImage、TabIndent 等），避免代码重复
|
||||
- CommentEditor 更轻量，每个评论实例加载更快
|
||||
- **@ 提及**：暂不在编辑器中实现自动补全（需要 Tiptap Mention 扩展或自定义扩展），用户手动输入 `@username`，渲染时由 `processMentionsInHtml` 高亮。后续可增强为 Tiptap Mention 扩展。
|
||||
|
||||
### 5.2 贴纸存储格式
|
||||
|
||||
- 贴纸以 `data:image/svg+xml` URI 内联在 `<img src="...">` 中
|
||||
- 每个 SVG 约 300-800 字节，单条评论即使 10 个贴纸也仅 ~8KB
|
||||
- 后端 `SanitizePostHTML` 白名单已允许 `<img src="...">`，无需额外修改
|
||||
- 旧评论（纯文本）不受影响，`renderCommentContent` 自动检测并兼容
|
||||
|
||||
### 5.3 懒加载策略
|
||||
|
||||
- 贴纸数据按分类拆分为 3 个 chunk（hot/j13/text），`React.lazy()` 动态导入
|
||||
- 首次打开选择器只加载"热门"chunk（8 个贴纸），切换分类时才加载其他 chunk
|
||||
- 每个 chunk 约 5-10KB，加载延迟 < 100ms
|
||||
|
||||
### 5.4 向后兼容
|
||||
|
||||
- 旧评论为纯文本，新 `renderCommentContent()` 通过 `isHtmlContent()` 检测自动走旧路径（escapeWithBreaks + 正则高亮）
|
||||
- 新评论为 HTML，走 DOMPurify 净化 + DOM 遍历高亮路径
|
||||
- 后端 `SanitizePostHTML` 对纯文本也安全（bluemonday 会保留纯文本，仅过滤危险标签）
|
||||
|
||||
---
|
||||
|
||||
## 六、实施顺序
|
||||
|
||||
1. **Part A**：贴纸数据 + 组件（stickers/*.ts → StickerSvg → StickerPicker）
|
||||
2. **Part D**：后端评论 HTML 净化（comment.go Create/Update 加 SanitizePostHTML）
|
||||
3. **Part B**：CommentEditor 组件 → CommentBox 集成 → CommentThreadList 编辑模式
|
||||
4. **Part C**：content.ts 渲染函数 → CommentContent 更新
|
||||
5. **Part E**：CSS 样式
|
||||
6. 删除旧 EmojiPicker / emojis.ts
|
||||
7. 验证测试
|
||||
|
||||
---
|
||||
|
||||
## 七、验证步骤
|
||||
|
||||
1. **贴纸系统验证**：
|
||||
- 点击贴纸按钮，选择器弹出，3 个分类 Tab 可切换
|
||||
- 切换分类时加载对应贴纸（Network 面板确认懒加载）
|
||||
- 点击贴纸后编辑器中出现对应 SVG 图
|
||||
|
||||
2. **评论编辑器验证**：
|
||||
- 评论框支持加粗/斜体/下划线/删除线/标题/引用/列表/代码块/链接/图片/贴纸
|
||||
- 代码块支持语法高亮和折叠
|
||||
- 图片可上传并插入
|
||||
- 无全屏/Markdown/表格/门控区块按钮
|
||||
|
||||
3. **评论渲染验证**：
|
||||
- 新评论 HTML 正确渲染（格式化、代码块、图片、贴纸）
|
||||
- `@username` 在 HTML 评论中正确高亮为可点击链接
|
||||
- 旧评论（纯文本）仍正常渲染
|
||||
- 贴纸图片在评论中正确显示
|
||||
|
||||
4. **后端验证**：
|
||||
- 发送含 `<script>alert(1)</script>` 的评论，后端净化后移除 script 标签
|
||||
- 发送正常 HTML 评论，后端存储完整 HTML
|
||||
- 旧纯文本评论正常存储和渲染
|
||||
|
||||
5. **编辑模式验证**：
|
||||
- 编辑已有评论时，CommentEditor 正确加载 HTML 内容
|
||||
- 保存后评论更新正确
|
||||
@@ -1,138 +0,0 @@
|
||||
# 修复主页右侧栏评论点击定位问题
|
||||
|
||||
## 问题描述
|
||||
|
||||
用户在主页右侧栏点击评论时，如果该评论不是帖子的第一个评论（`floor > 0`），页面跳转后没有定位到该评论上。
|
||||
|
||||
## 根因分析
|
||||
|
||||
### 问题 1：`jumpToFloor` 使用 `scrollIntoView` 而非 `pageRef.scrollTo`
|
||||
|
||||
**文件**: [PostDetailPage.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/pages/PostDetailPage.tsx#L235-L242)
|
||||
|
||||
当前 `jumpToFloor` 函数使用 `el.scrollIntoView()` 来滚动：
|
||||
|
||||
```typescript
|
||||
const jumpToFloor = useCallback((floor: number) => {
|
||||
const el = document.getElementById(`floor-${floor}`);
|
||||
if (!el) return;
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
// ...
|
||||
}, []);
|
||||
```
|
||||
|
||||
但是页面使用了自定义滚动容器 `pageRef`（类名为 `.post-detail-page`），且 `useGlobalWheelScroll` 钩子拦截了滚轮事件，将其转换为对 `pageRef.scrollTop` 的直接操作。这导致原生 `scrollIntoView` 可能无法正确触发滚动。
|
||||
|
||||
对比 `jumpToHeadingHash` 函数（第 244-262 行），它正确地使用了 `pageRef.scrollTo()`：
|
||||
|
||||
```typescript
|
||||
const jumpToHeadingHash = useCallback((hash: string, smooth = false) => {
|
||||
// ...
|
||||
const root = pageRef.current;
|
||||
if (root) {
|
||||
const rootRect = root.getBoundingClientRect();
|
||||
const elRect = el.getBoundingClientRect();
|
||||
const top = root.scrollTop + (elRect.top - rootRect.top) - 12;
|
||||
root.scrollTo({ top: Math.max(0, top), behavior });
|
||||
}
|
||||
// ...
|
||||
}, []);
|
||||
```
|
||||
|
||||
### 问题 2：`#floor-N` 定位缺少重试机制
|
||||
|
||||
**文件**: [PostDetailPage.tsx](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/pages/PostDetailPage.tsx#L264-L273)
|
||||
|
||||
当前 `#floor-N` 定位只有一次 80ms 延迟，没有重试机制：
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
if (loading || !post) return;
|
||||
const m = location.hash.match(/^#floor-(\d+)$/);
|
||||
if (!m) return;
|
||||
const floor = Number(m[1]);
|
||||
if (!floor) return;
|
||||
const t = window.setTimeout(() => jumpToFloor(floor), 80);
|
||||
return () => clearTimeout(t);
|
||||
}, [loading, post, comments, location.hash, jumpToFloor]);
|
||||
```
|
||||
|
||||
对比 `#heading-N` 定位（第 275-299 行），它有完善的重试机制（最多 30 次，每次 50ms）。
|
||||
|
||||
## 修改方案
|
||||
|
||||
### 修改 1：修改 `jumpToFloor` 函数使用 `pageRef.scrollTo`
|
||||
|
||||
将 `jumpToFloor` 函数改为使用与 `jumpToHeadingHash` 相同的滚动方式：
|
||||
|
||||
```typescript
|
||||
const jumpToFloor = useCallback((floor: number) => {
|
||||
const el = document.getElementById(`floor-${floor}`);
|
||||
if (!el) return false;
|
||||
|
||||
const root = pageRef.current;
|
||||
if (root) {
|
||||
const rootRect = root.getBoundingClientRect();
|
||||
const elRect = el.getBoundingClientRect();
|
||||
const top = root.scrollTop + (elRect.top - rootRect.top) - 12;
|
||||
root.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
|
||||
} else {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
setHighlightFloor(floor);
|
||||
clearTimeout(highlightTimer.current);
|
||||
highlightTimer.current = setTimeout(() => setHighlightFloor(null), 2000);
|
||||
return true;
|
||||
}, []);
|
||||
```
|
||||
|
||||
### 修改 2：为 `#floor-N` 定位添加重试机制
|
||||
|
||||
将 `#floor-N` 定位的 `useEffect` 改为类似 `#heading-N` 的重试机制：
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
if (loading || !post) return;
|
||||
const m = location.hash.match(/^#floor-(\d+)$/);
|
||||
if (!m) return;
|
||||
const floor = Number(m[1]);
|
||||
if (!floor) return;
|
||||
|
||||
let cancelled = false;
|
||||
let attempts = 0;
|
||||
let timer = 0;
|
||||
|
||||
const tryJump = () => {
|
||||
if (cancelled) return;
|
||||
if (jumpToFloor(floor)) return;
|
||||
attempts += 1;
|
||||
if (attempts < 30) {
|
||||
timer = window.setTimeout(tryJump, 50);
|
||||
}
|
||||
};
|
||||
|
||||
timer = window.setTimeout(tryJump, 0);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.clearTimeout(timer);
|
||||
};
|
||||
}, [loading, post, comments, location.hash, jumpToFloor]);
|
||||
```
|
||||
|
||||
## 涉及文件
|
||||
|
||||
- `frontend/src/pages/PostDetailPage.tsx`：修改 `jumpToFloor` 函数和 `#floor-N` 定位的 `useEffect`
|
||||
|
||||
## 风险评估
|
||||
|
||||
- **低风险**：修改仅限于评论定位逻辑，不影响其他功能
|
||||
- **需测试**：需要验证页面加载时评论定位是否正常工作，以及页面内部导航时是否正常
|
||||
|
||||
## 测试步骤
|
||||
|
||||
1. 进入主页，点击右侧栏的一个非第一条评论
|
||||
2. 验证页面跳转到帖子详情后，是否正确定位到目标评论
|
||||
3. 验证评论高亮效果是否正常显示
|
||||
4. 测试第一条评论（floor=0）的定位是否仍然正常工作
|
||||
5. 在帖子详情页直接加载带 hash 的 URL（如 `/post/123#floor-5`），验证定位效果
|
||||
@@ -1,117 +0,0 @@
|
||||
# 修复：再次进入帖子时滚动位置异常保留
|
||||
|
||||
## 问题
|
||||
|
||||
浏览帖子滑到下方 → 返回主页 → 再次进入同一帖子，滚动条停在之前阅读的位置，而非顶部。
|
||||
|
||||
## 根因
|
||||
|
||||
项目未设置 `history.scrollRestoration`（默认 `'auto'`）。浏览器在导航时会对**内部滚动容器**（`overflow: auto` 的 `.page-wrap`）执行滚动位置恢复。虽然 PostDetailPage 重新挂载后 `.page-wrap` 是新 DOM 元素，浏览器仍会在 paint 前将其 `scrollTop` 恢复到上次记录的值。
|
||||
|
||||
项目没有 ScrollToTop 机制来覆盖此行为。
|
||||
|
||||
## 与刷新恢复的冲突
|
||||
|
||||
之前实现的 `useScrollRestoration`（MainLayout mount-only）负责刷新场景的位置恢复。本修复必须与之共存：
|
||||
|
||||
| 场景 | 期望行为 | 处理者 |
|
||||
|---|---|---|
|
||||
| 刷新帖子页 | 恢复到上次位置 | `useScrollRestoration`（sessionStorage + rAF） |
|
||||
| SPA 导航进入帖子 | 从顶部开始 | 本修复（重置 scrollTop=0） |
|
||||
| `/post/123` → `/post/456` | 从顶部开始 | 本修复（重置 scrollTop=0） |
|
||||
|
||||
**区分依据**：`pagehide` 时 `saveScrollPositions` 将当前 URL 的滚动记录存入 sessionStorage。刷新后该记录存在；SPA 导航进入时该记录不存在（从未为此 URL 保存过，或已被 `restoreScrollPositions` 消费清除）。因此 PostDetailPage 渲染 `.page-wrap` 时检查 sessionStorage 是否有当前 URL 的记录即可区分两种场景。
|
||||
|
||||
**时序保证**：React 的 effect 执行顺序是子组件先于父组件。PostDetailPage 的 `useLayoutEffect` 在 MainLayout 的 `useEffect`（含 `useScrollRestoration`）之前执行。此时 sessionStorage 记录尚未被消费，`hasPendingScrollRestore()` 返回准确值。
|
||||
|
||||
## 改动计划
|
||||
|
||||
### 1. `frontend/src/utils/scrollRestore.ts` — 新增 `hasPendingScrollRestore`
|
||||
|
||||
在现有文件中新增导出函数：
|
||||
|
||||
```ts
|
||||
/** 检查 sessionStorage 中是否有指定 URL 的待恢复滚动记录（不消费/不删除） */
|
||||
export function hasPendingScrollRestore(url: string = getCurrentUrl()): boolean {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(storageKey(url));
|
||||
if (!raw) return false;
|
||||
const entry = JSON.parse(raw) as SavedPositions;
|
||||
return !!entry?.containers && Object.keys(entry.containers).length > 0;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
纯读取，不删除记录（`restoreScrollPositions` 的 rAF 循环仍需要它来恢复）。
|
||||
|
||||
### 2. 新建 `frontend/src/hooks/useScrollToTopOnMount.ts`
|
||||
|
||||
通用 hook，在滚动容器渲染就绪后重置到顶部（刷新场景跳过）：
|
||||
|
||||
```ts
|
||||
import { useLayoutEffect, useRef, type RefObject } from 'react';
|
||||
import { hasPendingScrollRestore } from '../utils/scrollRestore';
|
||||
|
||||
/**
|
||||
* 滚动容器渲染就绪后重置到顶部。
|
||||
* - 首次就绪：刷新场景（sessionStorage 有记录）跳过，让 useScrollRestoration 恢复；
|
||||
* SPA 导航（无记录）重置到顶部。
|
||||
* - deps 变化（如 postId 变化）：始终重置到顶部。
|
||||
* - 同 deps 的 ready 状态变化（如评论刷新导致 loading 短暂为 true）：不处理，避免误重置。
|
||||
*/
|
||||
export function useScrollToTopOnMount(
|
||||
scrollRef: RefObject<HTMLElement | null>,
|
||||
deps: React.DependencyList,
|
||||
ready: boolean,
|
||||
): void {
|
||||
const lastKeyRef = useRef<string | null>(null);
|
||||
const key = JSON.stringify(deps);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!ready || !scrollRef.current) return;
|
||||
|
||||
if (lastKeyRef.current === null) {
|
||||
lastKeyRef.current = key;
|
||||
if (!hasPendingScrollRestore()) {
|
||||
scrollRef.current.scrollTop = 0;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastKeyRef.current !== key) {
|
||||
lastKeyRef.current = key;
|
||||
scrollRef.current.scrollTop = 0;
|
||||
}
|
||||
}, [key, ready]); // ready 变化时重新检查
|
||||
}
|
||||
```
|
||||
|
||||
### 3. `frontend/src/pages/PostDetailPage.tsx` — 调用 hook
|
||||
|
||||
在 `pageRef` 定义之后（L108 之后）、`useGlobalWheelScroll` 调用处附近添加：
|
||||
|
||||
```ts
|
||||
import { useScrollToTopOnMount } from '../hooks/useScrollToTopOnMount';
|
||||
// ...
|
||||
useScrollToTopOnMount(pageRef, [postId], !loading && !!post);
|
||||
```
|
||||
|
||||
- `deps: [postId]` — `/post/123` → `/post/456` 时重置
|
||||
- `ready: !loading && !!post` — `.page-wrap` 仅在此时渲染（L446 loading return、L447 !post return），pageRef.current 才有效
|
||||
|
||||
### 不需要改动的部分
|
||||
|
||||
- **其他页面**（FavoritesPage、MessagesPage、ProfilePage 等）：用户仅报告了帖子页问题。这些页面内容较短，滚动保留不明显。如后续报告可复用此 hook。
|
||||
- **MainLayout / AdminLayout**：`useScrollRestoration` 不变。
|
||||
- **`history.scrollRestoration`**：不设为 `'manual'`，避免影响 back/forward 时其他页面的浏览器原生恢复。
|
||||
|
||||
## 验证步骤
|
||||
|
||||
1. **SPA 导航进入帖子**：从首页点击帖子 → 滑到下方 → 返回首页 → 再次点击同一帖子 → 应从顶部开始。
|
||||
2. **帖子间切换**：`/post/123` 滑到下方 → 直接导航到 `/post/456` → 应从顶部开始。
|
||||
3. **刷新保持位置**：在帖子页滑到下方 → F5 刷新 → 应恢复到原位置（`useScrollRestoration` 生效，hook 跳过）。
|
||||
4. **硬刷新保持位置**：同上但用 Ctrl+F5 → 应恢复到原位置。
|
||||
5. **首次访问**：从未访问过的帖子 → 应从顶部开始（sessionStorage 无记录）。
|
||||
6. **诊断无错误**：TypeScript 编译通过。
|
||||
@@ -1,55 +0,0 @@
|
||||
# 修复生产环境表情图片无法显示 Implementation Plan
|
||||
|
||||
## Repository Research
|
||||
|
||||
### 问题分析
|
||||
|
||||
表情图片在生产部署后无法加载，原因是 **Go 后端缺少 `/stickers/*` 路由的静态文件服务注册**。
|
||||
|
||||
当前架构：
|
||||
1. 前端 emoji 数据中的 URL 为 `/stickers/{platform}/{file}.avif`（在 [emojiData.ts](file:///c:/Users/freefire/Documents/jiang13-forum/frontend/src/data/stickers/emojiData.ts) 中通过 `toLocalUrl()` 生成）
|
||||
2. Vite 构建时将 `frontend/public/stickers/` 原样复制到 `embed_static/static/spa/stickers/`
|
||||
3. Go 的 `//go:embed static/*` 会将 `embed_static/static/` 下所有文件（包括 stickers）打包进二进制
|
||||
4. 但 [embed.go](file:///c:/Users/freefire/Documents/jiang13-forum/embed_static/embed.go) 的 `SetupEmbed()` **只注册了 `/assets/*filepath` 路由**（用于 JS/CSS chunk），没有注册 `/stickers/*filepath`
|
||||
5. 同时 `IsSPARoute()` 函数也没有排除 `/stickers` 前缀，导致请求被 SPA NoRoute fallback 处理，返回 index.html 而非图片
|
||||
|
||||
开发模式之所以正常，是因为 Vite dev server 自动托管了 `public/stickers/` 下的静态文件。
|
||||
|
||||
### 当前代码状态
|
||||
|
||||
- `embed.go` 第 13 行: `//go:embed static/*` — 正确嵌入了所有静态资源（含 stickers）
|
||||
- `embed.go` 第 33-43 行: `SetupEmbed()` — 只处理了 `static/spa/assets`，缺少 stickers 路由
|
||||
- `embed.go` 第 63-77 行: `IsSPARoute()` — 缺少 `/stickers` 前缀排除
|
||||
|
||||
## Files and Modules
|
||||
|
||||
- `embed_static/embed.go`: 新增 `/stickers/*filepath` 文件服务路由；在 `IsSPARoute` 中排除 `/stickers` 前缀
|
||||
|
||||
## Implementation Steps
|
||||
|
||||
1. **在 `SetupEmbed` 中注册 `/stickers` 路由**
|
||||
- 参照现有 `/assets` 路由的模式，添加对 `static/spa/stickers` 子目录的文件服务
|
||||
- 使用 `fs.Sub(staticFS, "static/spa/stickers")` 获取 stickers 子文件系统
|
||||
- 注册 `GET /stickers/*filepath` 路由，直接透传，不设置长期缓存（表情可能更新）
|
||||
|
||||
2. **在 `IsSPARoute` 中排除 `/stickers` 前缀**
|
||||
- 在现有 `strings.HasPrefix(path, "/assets")` 附近添加 `strings.HasPrefix(path, "/stickers")`
|
||||
- 确保表情请求不会被 SPA fallback 拦截
|
||||
|
||||
## Dependencies and Considerations
|
||||
|
||||
- stickers 目录下存储的是 `.avif` 图片文件，不需要设置特殊 MIME type（http.FileServer 会根据扩展名自动识别）
|
||||
- stickers 资源不含哈希指纹，不应设置 `immutable` 缓存头（与 `/assets` 不同），但可以设置短过期缓存
|
||||
- 需确保 `fs.Sub` 路径与实际构建输出路径一致：`embed_static/static/spa/stickers/`
|
||||
|
||||
## Validation
|
||||
|
||||
- 重新构建前端：`cd frontend && npm run build`
|
||||
- 重新构建 Go 二进制：`go build -o jiang13-linux-amd64`
|
||||
- 部署后访问 `/stickers/tieba/tb_01.avif` 应能直接返回图片内容（HTTP 200）
|
||||
- 在评论框中打开表情选择器，所有平台的表情应正常显示
|
||||
|
||||
## Risks
|
||||
|
||||
- **风险**: 如果未来在 `public/` 下新增其他静态资源目录（如 `avatars/`、`flags/` 等），需要同样在 `embed.go` 中注册对应路由
|
||||
- **应对**: 可考虑后续重构为自动扫描 `public/` 下所有子目录并自动注册路由，或改为统一的 SPA 静态文件服务方案
|
||||
36
.trae/rules/build-scripts.mdc
Normal file
36
.trae/rules/build-scripts.mdc
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
description: 编译与构建脚本约定（Windows build.bat/ps1、Makefile、跨平台同步）
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 编译与构建脚本
|
||||
|
||||
Go 单二进制 + `go:embed` 前端；产物在 `dist/`。
|
||||
|
||||
## 运行编译（优先用封装命令，不要猜命令）
|
||||
|
||||
| 平台 | 命令 |
|
||||
|------|------|
|
||||
| Windows | `build.bat` 或 `build.bat -Target <target>` |
|
||||
| Linux / macOS | `make` 或 `make <target>` |
|
||||
|
||||
**不要**在 Windows 上直接运行 `make`（系统自带多为 Embarcadero MAKE，不兼容本项目 Makefile）。
|
||||
|
||||
Windows 上**不要**让用户直接 `.\build.ps1`（默认 ExecutionPolicy 会拦截）；应通过 `build.bat`（内部 `-ExecutionPolicy Bypass`）调用。
|
||||
|
||||
常用 target：`build`（默认）、`dev`、`run`、`frontend`、`clean`、`build-all`、`build-windows`、`build-linux`、`tidy`、`help`。
|
||||
|
||||
## 修改构建脚本时的约定
|
||||
|
||||
1. **双轨同步**：`build.ps1` 与 `Makefile` 目标与行为保持一致；改其一须同步另一份。
|
||||
2. **`build.bat` 仅用 ASCII 注释**：`.bat` 会被 cmd 按 GBK 解析，UTF-8 中文注释会导致整行乱码、`powershell` 无法执行。
|
||||
3. **`build.ps1` 可用 UTF-8**：由 PowerShell 执行，中文注释无妨。
|
||||
4. **构建顺序**：先 `frontend` 内 `npm run build`，再 `go build -trimpath -ldflags "-s -w -X main.version=..." -o dist/jiang13 ./cmd/jiang13`。
|
||||
5. **入口包**：`./cmd/jiang13`；Windows 产物带 `.exe`。
|
||||
|
||||
## 新增 target 检查清单
|
||||
|
||||
- [ ] `build.ps1` 的 `ValidateSet` 与 `switch` 分支
|
||||
- [ ] `Makefile` 对应 `.PHONY` 与 recipe
|
||||
- [ ] `build.bat -Target help` 说明（help 输出在 ps1 内）
|
||||
- [ ] README「快速开始」如需对外暴露再更新
|
||||
2
Makefile
2
Makefile
@@ -5,7 +5,7 @@ APP_NAME := jiang13
|
||||
MAIN_PKG := ./cmd/jiang13
|
||||
BUILD_DIR := dist
|
||||
DEV_DATA_DIR := dist/data
|
||||
VERSION := 1.1.6
|
||||
VERSION := 1.1.8
|
||||
LDFLAGS := -s -w -X main.version=$(VERSION)
|
||||
REGISTRY_IMAGE := hangzhang714128/jiang13-forum
|
||||
|
||||
|
||||
14
README.md
14
README.md
@@ -212,15 +212,15 @@ docker run -d --name jiang13 \
|
||||
docker login
|
||||
.\build.bat -Target docker # Windows
|
||||
# make docker # Linux/macOS
|
||||
docker push hangzhang714128/jiang13-forum:1.1.6
|
||||
docker push hangzhang714128/jiang13-forum:1.1.7
|
||||
docker push hangzhang714128/jiang13-forum:latest
|
||||
```
|
||||
|
||||
或直接构建：
|
||||
|
||||
```bash
|
||||
docker build --build-arg VERSION=1.1.6 -t hangzhang714128/jiang13-forum:1.1.6 -t hangzhang714128/jiang13-forum:latest .
|
||||
docker push hangzhang714128/jiang13-forum:1.1.6
|
||||
docker build --build-arg VERSION=1.1.7 -t hangzhang714128/jiang13-forum:1.1.7 -t hangzhang714128/jiang13-forum:latest .
|
||||
docker push hangzhang714128/jiang13-forum:1.1.7
|
||||
docker push hangzhang714128/jiang13-forum:latest
|
||||
```
|
||||
|
||||
@@ -252,19 +252,19 @@ docker push hangzhang714128/jiang13-forum:latest
|
||||
| `jiang13-*-windows-amd64.exe` | Windows x64 |
|
||||
| `jiang13-*-linux-amd64` | Linux x64 |
|
||||
|
||||
当前 **1.1.6：** [Windows](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.6/jiang13-1.1.6-windows-amd64.exe) · [Linux](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.6/jiang13-1.1.6-linux-amd64)
|
||||
当前 **1.1.7：** [Windows](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.7/jiang13-1.1.7-windows-amd64.exe) · [Linux](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.7/jiang13-1.1.7-linux-amd64)
|
||||
|
||||
把文件放到目标目录后直接运行（首次会在同目录生成 `app.ini`）：
|
||||
|
||||
```bash
|
||||
# Windows
|
||||
.\jiang13-1.1.6-windows-amd64.exe
|
||||
.\jiang13-1.1.7-windows-amd64.exe
|
||||
# 或改名为 jiang13.exe 后：
|
||||
.\jiang13.exe
|
||||
|
||||
# Linux
|
||||
chmod +x jiang13-1.1.6-linux-amd64
|
||||
./jiang13-1.1.6-linux-amd64
|
||||
chmod +x jiang13-1.1.7-linux-amd64
|
||||
./jiang13-1.1.7-linux-amd64
|
||||
```
|
||||
|
||||
本地刚编译的产物在 `dist/`：
|
||||
|
||||
@@ -12,7 +12,7 @@ $AppName = 'jiang13'
|
||||
$MainPkg = './cmd/jiang13'
|
||||
$BuildDir = 'dist'
|
||||
$DevDataDir = 'dist/data'
|
||||
$Version = '1.1.6'
|
||||
$Version = '1.1.8'
|
||||
$RegistryImage = 'hangzhang714128/jiang13-forum'
|
||||
$Ldlags = "-s -w -X main.version=$Version"
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ import (
|
||||
"github.com/kardianos/service"
|
||||
|
||||
"git.iioio.com/freefire/jiang13-forum/config"
|
||||
forumsvc "git.iioio.com/freefire/jiang13-forum/service"
|
||||
"git.iioio.com/freefire/jiang13-forum/model"
|
||||
"git.iioio.com/freefire/jiang13-forum/router"
|
||||
)
|
||||
@@ -78,6 +79,9 @@ func (p *program) setup() error {
|
||||
if err := model.InitDB(cfg.DBPath()); err != nil {
|
||||
return fmt.Errorf("数据库初始化失败: %w", err)
|
||||
}
|
||||
if err := forumsvc.BackfillModerationNotifyRefs(); err != nil {
|
||||
log.Printf("待审通知关联字段回填警告: %v", err)
|
||||
}
|
||||
if err := model.InitMonitorDB(cfg.MonitorDBPath()); err != nil {
|
||||
return fmt.Errorf("监控库初始化失败: %w", err)
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
Docker 镜像、Windows exe、Linux 单文件 **共用同一版本号**。有新版本时，以本页为准。
|
||||
|
||||
**当前版本：1.1.6**（2026-09-01）
|
||||
**当前版本：1.1.7**（2026-09-02）
|
||||
|
||||
## 去哪看新版本
|
||||
|
||||
@@ -21,16 +21,16 @@ Docker 镜像、Windows exe、Linux 单文件 **共用同一版本号**。有新
|
||||
| Windows / Linux | 预编译单文件（与 Docker 同版本） | [Gitea Releases](https://git.iioio.com/freefire/jiang13-forum/releases) |
|
||||
| 源码 | 提交记录与自行编译 | [Gitea 仓库](https://git.iioio.com/freefire/jiang13-forum) |
|
||||
|
||||
**1.1.6 直接下载：**
|
||||
**1.1.7 直接下载：**
|
||||
|
||||
- Windows x64：[jiang13-1.1.6-windows-amd64.exe](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.6/jiang13-1.1.6-windows-amd64.exe)
|
||||
- Linux x64：[jiang13-1.1.6-linux-amd64](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.6/jiang13-1.1.6-linux-amd64)
|
||||
- 校验文件：[SHA256SUMS.txt](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.6/SHA256SUMS.txt)
|
||||
- Windows x64：[jiang13-1.1.7-windows-amd64.exe](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.7/jiang13-1.1.7-windows-amd64.exe)
|
||||
- Linux x64：[jiang13-1.1.7-linux-amd64](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.7/jiang13-1.1.7-linux-amd64)
|
||||
- 校验文件：[SHA256SUMS.txt](https://git.iioio.com/freefire/jiang13-forum/releases/download/v1.1.7/SHA256SUMS.txt)
|
||||
|
||||
拉取指定版本镜像：
|
||||
|
||||
```bash
|
||||
docker pull hangzhang714128/jiang13-forum:1.1.6
|
||||
docker pull hangzhang714128/jiang13-forum:1.1.7
|
||||
# 或始终跟随最新
|
||||
docker pull hangzhang714128/jiang13-forum:latest
|
||||
```
|
||||
@@ -47,6 +47,21 @@ Linux：赋予执行权限后放到原目录覆盖，同样保留 `data/` 与 `a
|
||||
|
||||
---
|
||||
|
||||
## 1.1.7 — 2026-09-02
|
||||
|
||||
私信与开源展柜体验升级，待审通知的审核态更及时。
|
||||
|
||||
**新增 / 调整**
|
||||
|
||||
- 私信改为飞书风布局：缩略图表情/图片、按会话草稿、用户搜索发起会话
|
||||
- 主页「发私信」直达消息页对应会话
|
||||
- 开源展柜改为目录式 UI，空列表不再粘滞
|
||||
- 消息页体验重构；待审通知打开后实时回填审核态
|
||||
|
||||
**修复**
|
||||
|
||||
- 帖子详情右栏默认头像改为深绿底白字，与列表默认头像配色一致
|
||||
|
||||
## 1.1.6 — 2026-09-01
|
||||
|
||||
编辑器插入体验与首页默认 Feed 排序更合理。
|
||||
|
||||
@@ -664,6 +664,8 @@ export const api = {
|
||||
},
|
||||
markNotificationsRead: () =>
|
||||
request<{ message: string }>('/api/messages/notifications/read', { method: 'POST' }),
|
||||
markMessageRead: (id: number) =>
|
||||
request<{ message: string }>(`/api/messages/${id}/read`, { method: 'POST' }),
|
||||
sendMessage: (body: { to_user_id: number; subject?: string; content: string }) =>
|
||||
request<{ message: PrivateMessage }>('/api/messages', {
|
||||
method: 'POST', body: JSON.stringify(body),
|
||||
|
||||
@@ -717,9 +717,13 @@ export interface PrivateMessage {
|
||||
to_user_id: number;
|
||||
subject: string;
|
||||
content: string;
|
||||
kind: 'user' | 'system' | 'reject' | 'report_result' | string;
|
||||
kind: 'user' | 'system' | 'reject' | 'report_result' | 'reply' | 'mention' | 'moderation' | string;
|
||||
related_post_id?: number;
|
||||
related_report_id?: number;
|
||||
related_comment_id?: number;
|
||||
related_floor?: number;
|
||||
/** 待审目标实时状态：pending|published|rejected|deleted */
|
||||
related_status?: string;
|
||||
is_read: boolean;
|
||||
created_at: string;
|
||||
from_user?: User;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
useRef, useEffect, useImperativeHandle, forwardRef, useCallback, useState, useMemo, type ReactNode,
|
||||
useRef, useEffect, useImperativeHandle, forwardRef, useCallback, useState, useMemo,
|
||||
type ReactNode, type Ref,
|
||||
} from 'react';
|
||||
import { useEditor, EditorContent, type Editor } from '@tiptap/react';
|
||||
import { TextSelection, NodeSelection } from '@tiptap/pm/state';
|
||||
@@ -37,7 +38,10 @@ import { ReplyOnly } from './editor/ReplyOnlyExtension';
|
||||
import { PointsOnly } from './editor/PointsOnlyExtension';
|
||||
import { TabIndent } from './editor/TabIndentExtension';
|
||||
import { ArticleImage, type ImageDisplay } from './editor/ArticleImageExtension';
|
||||
import { ArticleSticker } from './editor/ArticleStickerExtension';
|
||||
import { ImageGroup, suggestImageGroupLayout } from './editor/ImageGroupExtension';
|
||||
import StickerPicker from './emoji/StickerPicker';
|
||||
import type { Sticker } from '../data/stickers';
|
||||
import { ClearFloatParagraph, ClearFloatSync } from './editor/ClearFloatParagraph';
|
||||
import { ArticleLinkDialog, type ArticleLinkConfirm } from './editor/ArticleLinkDialog';
|
||||
import { ArticleImagePickerDialog } from './editor/ArticleImagePickerDialog';
|
||||
@@ -84,6 +88,7 @@ interface ToolBtn {
|
||||
align?: 'start' | 'center' | 'end';
|
||||
active?: boolean;
|
||||
className?: string;
|
||||
buttonRef?: Ref<HTMLButtonElement>;
|
||||
action: () => void;
|
||||
}
|
||||
|
||||
@@ -119,9 +124,17 @@ function sanitizeHtml(html: string): string {
|
||||
return DOMPurify.sanitize(html, POST_CONTENT_PURIFY_CONFIG);
|
||||
}
|
||||
|
||||
/** 判断编辑器内容是否为空 */
|
||||
/** 判断编辑器内容是否为空（纯贴纸/图片也算有内容） */
|
||||
function isEditorEmpty(editor: Editor): boolean {
|
||||
return editor.state.doc.textContent.trim().length === 0;
|
||||
if (editor.state.doc.textContent.trim().length > 0) return false;
|
||||
let hasMedia = false;
|
||||
editor.state.doc.descendants((node) => {
|
||||
if (node.type.name === 'image' || node.type.name === 'sticker' || node.type.name === 'imageGroup') {
|
||||
hasMedia = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return !hasMedia;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -177,10 +190,12 @@ function renderToolButtons(tools: ToolBtn[]) {
|
||||
) : null}
|
||||
<Tooltip content={t.title} hint={t.hint} align={t.align} side="bottom">
|
||||
<button
|
||||
ref={t.buttonRef}
|
||||
type="button"
|
||||
className={`article-tool-btn${t.active ? ' active' : ''}${t.className ? ` ${t.className}` : ''}`}
|
||||
onMouseDown={e => e.preventDefault()}
|
||||
onClick={t.action}
|
||||
aria-pressed={t.active || undefined}
|
||||
>
|
||||
{t.icon}
|
||||
</button>
|
||||
@@ -213,7 +228,10 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
const [tableDialogOpen, setTableDialogOpen] = useState(false);
|
||||
const [tableTarget, setTableTarget] = useState<TableTarget>('rich');
|
||||
const [tableEditing, setTableEditing] = useState(false);
|
||||
const [showSticker, setShowSticker] = useState(false);
|
||||
const markdownRef = useRef<HTMLTextAreaElement>(null);
|
||||
const editorBoxRef = useRef<HTMLDivElement>(null);
|
||||
const stickerBtnRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
@@ -246,6 +264,7 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
},
|
||||
}),
|
||||
ArticleImage.configure({ inline: false, allowBase64: false }),
|
||||
ArticleSticker,
|
||||
ImageGroup,
|
||||
Placeholder.configure({
|
||||
placeholder: ({ node }) => {
|
||||
@@ -322,23 +341,42 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
placeCaretInFirstTextblock(editor);
|
||||
}, [value, editor, mode]);
|
||||
|
||||
// 全屏时锁定页面滚动，Esc 退出
|
||||
// 全屏时锁定页面滚动；Esc 先关表情面板，再退出全屏
|
||||
useEffect(() => {
|
||||
if (!fullscreen) return undefined;
|
||||
if (!fullscreen && !showSticker) return undefined;
|
||||
|
||||
const prevOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
const prevOverflow = fullscreen ? document.body.style.overflow : null;
|
||||
if (fullscreen) document.body.style.overflow = 'hidden';
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setFullscreen(false);
|
||||
if (e.key !== 'Escape') return;
|
||||
if (showSticker) {
|
||||
setShowSticker(false);
|
||||
stickerBtnRef.current?.focus();
|
||||
return;
|
||||
}
|
||||
if (fullscreen) setFullscreen(false);
|
||||
};
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = prevOverflow;
|
||||
if (prevOverflow !== null) document.body.style.overflow = prevOverflow;
|
||||
window.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [fullscreen]);
|
||||
}, [fullscreen, showSticker]);
|
||||
|
||||
// 点击编辑器外关闭贴纸面板
|
||||
useEffect(() => {
|
||||
if (!showSticker) return;
|
||||
const onPointer = (e: MouseEvent) => {
|
||||
if (editorBoxRef.current && !editorBoxRef.current.contains(e.target as Node)) {
|
||||
setShowSticker(false);
|
||||
stickerBtnRef.current?.focus();
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', onPointer);
|
||||
return () => document.removeEventListener('mousedown', onPointer);
|
||||
}, [showSticker]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getHTML: () => {
|
||||
@@ -523,6 +561,30 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
editor.chain().focus().extendMarkRange('link').unsetLink().run();
|
||||
}, [editor]);
|
||||
|
||||
const insertSticker = useCallback((sticker: Sticker) => {
|
||||
if (mode === 'markdown') {
|
||||
const textarea = markdownRef.current;
|
||||
if (!textarea) return;
|
||||
const snippet = (sticker.type === 'text' && sticker.text)
|
||||
? sticker.text
|
||||
: (sticker.url ? `` : '');
|
||||
if (!snippet) return;
|
||||
insertAtCursor(textarea, markdownSource, snippet, handleMarkdownChange);
|
||||
setShowSticker(false);
|
||||
return;
|
||||
}
|
||||
if (!editor) return;
|
||||
if (sticker.type === 'text' && sticker.text) {
|
||||
editor.chain().focus().insertContent(sticker.text).run();
|
||||
} else if (sticker.url) {
|
||||
editor.chain().focus().insertContent([
|
||||
{ type: 'sticker', attrs: { src: sticker.url, alt: sticker.name } },
|
||||
{ type: 'text', text: ' ' },
|
||||
]).run();
|
||||
}
|
||||
setShowSticker(false);
|
||||
}, [editor, mode, markdownSource, handleMarkdownChange]);
|
||||
|
||||
const openImagePicker = useCallback((target: ImagePickerTarget) => {
|
||||
setImagePickerTarget(target);
|
||||
setImagePickerOpen(true);
|
||||
@@ -614,6 +676,7 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
const html = sanitizeHtml(editor.getHTML());
|
||||
lastValueRef.current = html;
|
||||
setMarkdownSource(htmlToMarkdown(html));
|
||||
setShowSticker(false);
|
||||
setMode('markdown');
|
||||
}, [editor]);
|
||||
|
||||
@@ -626,6 +689,7 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
editor.commands.setContent(html || '', { emitUpdate: false });
|
||||
placeCaretInFirstTextblock(editor);
|
||||
}
|
||||
setShowSticker(false);
|
||||
setMode('rich');
|
||||
}, [editor, markdownSource, onChange]);
|
||||
|
||||
@@ -676,6 +740,15 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
active: groupActive,
|
||||
action: wrapSelectedAsGroup,
|
||||
},
|
||||
{
|
||||
icon: <span className="article-tool-btn__owo">OwO</span>,
|
||||
title: '表情 OwO',
|
||||
hint: '插入贴纸或颜文字',
|
||||
active: showSticker,
|
||||
className: 'article-tool-btn--owo',
|
||||
buttonRef: stickerBtnRef,
|
||||
action: () => setShowSticker(v => !v),
|
||||
},
|
||||
];
|
||||
|
||||
if (editor.isActive('table')) {
|
||||
@@ -760,7 +833,7 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
}
|
||||
|
||||
return tools;
|
||||
}, [editor, enableContentGates, openLinkDialog, openCodeBlockDialog, openTableDialog, openImagePicker, wrapMembersOnly, wrapReplyOnly, wrapPointsOnly, wrapSelectedAsGroup, setImageDisplay]);
|
||||
}, [editor, enableContentGates, showSticker, openLinkDialog, openCodeBlockDialog, openTableDialog, openImagePicker, wrapMembersOnly, wrapReplyOnly, wrapPointsOnly, wrapSelectedAsGroup, setImageDisplay]);
|
||||
|
||||
const buildMarkdownTools = useCallback((): ToolBtn[] => {
|
||||
const tools: ToolBtn[] = [
|
||||
@@ -782,6 +855,15 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
hint: '上传、链接或从已上传中选择',
|
||||
action: () => openImagePicker('markdown'),
|
||||
},
|
||||
{
|
||||
icon: <span className="article-tool-btn__owo">OwO</span>,
|
||||
title: '表情 OwO',
|
||||
hint: '插入贴纸或颜文字',
|
||||
active: showSticker,
|
||||
className: 'article-tool-btn--owo',
|
||||
buttonRef: stickerBtnRef,
|
||||
action: () => setShowSticker(v => !v),
|
||||
},
|
||||
];
|
||||
if (enableContentGates) {
|
||||
tools.push(
|
||||
@@ -809,7 +891,7 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
);
|
||||
}
|
||||
return tools;
|
||||
}, [enableContentGates, withMarkdown, openLinkDialog, openCodeBlockDialog, openTableDialog, openImagePicker]);
|
||||
}, [enableContentGates, showSticker, withMarkdown, openLinkDialog, openCodeBlockDialog, openTableDialog, openImagePicker]);
|
||||
|
||||
const tools = mode === 'rich' ? buildRichTools() : buildMarkdownTools();
|
||||
const words = mode === 'markdown'
|
||||
@@ -817,12 +899,16 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
|
||||
: (editor ? countWords(editor.getText()) : 0);
|
||||
|
||||
return (
|
||||
<div className={`article-editor article-editor--${mode}${fullscreen ? ' article-editor--fullscreen' : ''}`}>
|
||||
<div
|
||||
ref={editorBoxRef}
|
||||
className={`article-editor article-editor--${mode}${fullscreen ? ' article-editor--fullscreen' : ''}`}
|
||||
>
|
||||
<div className="article-editor-bar">
|
||||
<div className="article-editor-tools">
|
||||
{renderToolButtons(tools)}
|
||||
</div>
|
||||
</div>
|
||||
{showSticker && <StickerPicker onSelect={insertSticker} />}
|
||||
|
||||
<div className="article-editor-body">
|
||||
{mode === 'rich' ? (
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
import { useMemo, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import { renderCommentContent } from '../utils/content';
|
||||
import { handleMdCodeBlockUiClick } from '../utils/enhanceCodeBlocks';
|
||||
import { userPath } from '../utils/userPath';
|
||||
import { notify } from '@/lib/notify';
|
||||
|
||||
interface Props {
|
||||
content: string;
|
||||
}
|
||||
|
||||
/** 渲染评论正文（支持正文内 @ 高亮与点击跳转） */
|
||||
/** 渲染评论正文（支持正文内 @ 高亮、代码块阅读态与点击跳转） */
|
||||
export default function CommentContent({ content }: Props) {
|
||||
const nav = useNavigate();
|
||||
const html = useMemo(() => renderCommentContent(content), [content]);
|
||||
|
||||
const openMention = async (name: string) => {
|
||||
try {
|
||||
@@ -26,17 +30,29 @@ export default function CommentContent({ content }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="floor-body"
|
||||
onClick={(e) => {
|
||||
const onClick = useCallback(async (e: React.MouseEvent) => {
|
||||
try {
|
||||
if (await handleMdCodeBlockUiClick(e.target)) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
notify.error('复制失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const el = (e.target as HTMLElement).closest('.mention') as HTMLElement | null;
|
||||
if (!el) return;
|
||||
const name = el.getAttribute('data-name');
|
||||
if (!name) return;
|
||||
e.preventDefault();
|
||||
void openMention(name);
|
||||
}}
|
||||
}, [nav]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="floor-body post-detail-content"
|
||||
onClick={(e) => { void onClick(e); }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
const el = e.target as HTMLElement;
|
||||
@@ -46,9 +62,7 @@ export default function CommentContent({ content }: Props) {
|
||||
e.preventDefault();
|
||||
void openMention(name);
|
||||
}}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: renderCommentContent(content),
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
227
frontend/src/components/PmComposerInput.tsx
Normal file
227
frontend/src/components/PmComposerInput.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
||||
import type { Sticker } from '../data/stickers';
|
||||
|
||||
export type PmComposerInputHandle = {
|
||||
insertSticker: (sticker: Sticker) => void;
|
||||
insertText: (text: string) => void;
|
||||
focus: () => void;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
onChange: (next: string) => void;
|
||||
placeholder?: string;
|
||||
maxLength?: number;
|
||||
disabled?: boolean;
|
||||
onSubmit?: () => void;
|
||||
};
|
||||
|
||||
/** 站点内置贴纸路径（评论/私信共用） */
|
||||
export function isPmStickerSrc(src: string) {
|
||||
return src.includes('/stickers/');
|
||||
}
|
||||
|
||||
function escapeHtml(s: string) {
|
||||
return s
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function draftToHtml(text: string): string {
|
||||
if (!text) return '';
|
||||
const parts = text.split(/(!\[[^\]]*]\([^)]+\))/g);
|
||||
return parts.map((part) => {
|
||||
const m = part.match(/^!\[([^\]]*)]\(([^)]+)\)$/);
|
||||
if (m) {
|
||||
const alt = escapeHtml(m[1] || '表情');
|
||||
const src = escapeHtml(m[2]);
|
||||
const cls = isPmStickerSrc(m[2]) ? 'pm-composer__sticker' : 'pm-composer__inline-img';
|
||||
return `<img class="${cls}" src="${src}" alt="${alt}" draggable="false">`;
|
||||
}
|
||||
return escapeHtml(part).replace(/\n/g, '<br>');
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function serializeComposer(root: HTMLElement): string {
|
||||
let out = '';
|
||||
|
||||
const walk = (node: Node) => {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
out += node.textContent || '';
|
||||
return;
|
||||
}
|
||||
if (node.nodeType !== Node.ELEMENT_NODE) return;
|
||||
const el = node as HTMLElement;
|
||||
const tag = el.tagName;
|
||||
if (tag === 'IMG') {
|
||||
const src = el.getAttribute('src') || '';
|
||||
const alt = el.getAttribute('alt') || '表情';
|
||||
out += ``;
|
||||
return;
|
||||
}
|
||||
if (tag === 'BR') {
|
||||
out += '\n';
|
||||
return;
|
||||
}
|
||||
if (tag === 'DIV' || tag === 'P') {
|
||||
if (out.length > 0 && !out.endsWith('\n')) out += '\n';
|
||||
el.childNodes.forEach(walk);
|
||||
return;
|
||||
}
|
||||
el.childNodes.forEach(walk);
|
||||
};
|
||||
|
||||
root.childNodes.forEach(walk);
|
||||
return out.replace(/\n$/, '');
|
||||
}
|
||||
|
||||
function placeCaretAfter(node: Node) {
|
||||
const sel = window.getSelection();
|
||||
if (!sel) return;
|
||||
const range = document.createRange();
|
||||
range.setStartAfter(node);
|
||||
range.collapse(true);
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
}
|
||||
|
||||
/** 私信输入框：可内联插入贴纸（与评论编辑器一致），序列化为 markdown 图片语法 */
|
||||
const PmComposerInput = forwardRef<PmComposerInputHandle, Props>(function PmComposerInput(
|
||||
{ value, onChange, placeholder, maxLength = 4000, disabled, onSubmit },
|
||||
ref,
|
||||
) {
|
||||
const elRef = useRef<HTMLDivElement>(null);
|
||||
const savedRangeRef = useRef<Range | null>(null);
|
||||
const valueRef = useRef(value);
|
||||
valueRef.current = value;
|
||||
|
||||
const emit = useCallback(() => {
|
||||
const el = elRef.current;
|
||||
if (!el) return;
|
||||
const next = serializeComposer(el);
|
||||
if (maxLength && next.length > maxLength) {
|
||||
el.innerHTML = draftToHtml(valueRef.current);
|
||||
return;
|
||||
}
|
||||
el.dataset.empty = next ? 'false' : 'true';
|
||||
if (next !== valueRef.current) onChange(next);
|
||||
}, [maxLength, onChange]);
|
||||
|
||||
const restoreRange = useCallback(() => {
|
||||
const el = elRef.current;
|
||||
if (!el) return;
|
||||
el.focus();
|
||||
const sel = window.getSelection();
|
||||
if (!sel) return;
|
||||
const saved = savedRangeRef.current;
|
||||
if (saved && el.contains(saved.startContainer)) {
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(saved);
|
||||
return;
|
||||
}
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(el);
|
||||
range.collapse(false);
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
}, []);
|
||||
|
||||
const saveRange = useCallback(() => {
|
||||
const el = elRef.current;
|
||||
const sel = window.getSelection();
|
||||
if (!el || !sel || sel.rangeCount === 0) return;
|
||||
if (!el.contains(sel.anchorNode)) return;
|
||||
savedRangeRef.current = sel.getRangeAt(0).cloneRange();
|
||||
}, []);
|
||||
|
||||
const insertNodes = useCallback((nodes: Node[]) => {
|
||||
const el = elRef.current;
|
||||
if (!el || !nodes.length) return;
|
||||
restoreRange();
|
||||
const sel = window.getSelection();
|
||||
if (!sel) return;
|
||||
const range = sel.rangeCount > 0 ? sel.getRangeAt(0) : document.createRange();
|
||||
range.deleteContents();
|
||||
const frag = document.createDocumentFragment();
|
||||
nodes.forEach((n) => frag.appendChild(n));
|
||||
const last = nodes[nodes.length - 1];
|
||||
range.insertNode(frag);
|
||||
placeCaretAfter(last);
|
||||
saveRange();
|
||||
emit();
|
||||
}, [emit, restoreRange, saveRange]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
insertSticker(sticker) {
|
||||
if (!sticker.url) return;
|
||||
const img = document.createElement('img');
|
||||
img.className = 'pm-composer__sticker';
|
||||
img.src = sticker.url;
|
||||
img.alt = sticker.name || '表情';
|
||||
img.draggable = false;
|
||||
// 尾随空格，光标可停在贴纸右侧（对齐评论编辑器）
|
||||
insertNodes([img, document.createTextNode(' ')]);
|
||||
},
|
||||
insertText(text) {
|
||||
if (!text) return;
|
||||
insertNodes([document.createTextNode(text)]);
|
||||
},
|
||||
focus() {
|
||||
restoreRange();
|
||||
},
|
||||
}), [insertNodes, restoreRange]);
|
||||
|
||||
// 外部改 value（切会话 / 发送清空）时回填；输入过程中 serialize 与 value 一致则不重绘
|
||||
useEffect(() => {
|
||||
const el = elRef.current;
|
||||
if (!el) return;
|
||||
if (serializeComposer(el) === value) {
|
||||
el.dataset.empty = value ? 'false' : 'true';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = draftToHtml(value);
|
||||
el.dataset.empty = value ? 'false' : 'true';
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
const onSel = () => saveRange();
|
||||
document.addEventListener('selectionchange', onSel);
|
||||
return () => document.removeEventListener('selectionchange', onSel);
|
||||
}, [saveRange]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={elRef}
|
||||
className="pm-composer__input"
|
||||
role="textbox"
|
||||
aria-multiline="true"
|
||||
aria-label="私信内容"
|
||||
contentEditable={!disabled}
|
||||
data-placeholder={placeholder || ''}
|
||||
data-empty={value ? 'false' : 'true'}
|
||||
suppressContentEditableWarning
|
||||
onInput={emit}
|
||||
onBlur={saveRange}
|
||||
onPaste={(e) => {
|
||||
e.preventDefault();
|
||||
const text = e.clipboardData.getData('text/plain');
|
||||
if (text) insertNodes([document.createTextNode(text)]);
|
||||
}}
|
||||
onDrop={(e) => {
|
||||
// 禁止把文件拖成「大图附件」；贴纸只走选择器
|
||||
if (e.dataTransfer?.files?.length) e.preventDefault();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.nativeEvent.isComposing) return;
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onSubmit?.();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export default PmComposerInput;
|
||||
@@ -9,7 +9,6 @@ import { useAuth } from '../hooks/useAuth';
|
||||
import { loginPath } from '../utils/authRedirect';
|
||||
import { formatTime } from '../utils/content';
|
||||
import { userPath } from '../utils/userPath';
|
||||
import ComposeMessageDialog from './ComposeMessageDialog';
|
||||
import UserLink from './UserLink';
|
||||
|
||||
interface Props {
|
||||
@@ -28,7 +27,6 @@ export default function PostAuthorCard({
|
||||
const { user: me } = useAuth();
|
||||
const [profile, setProfile] = useState<UserPublic | null>(null);
|
||||
const [stats, setStats] = useState<UserActivityStats | null>(null);
|
||||
const [msgOpen, setMsgOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!author?.id) {
|
||||
@@ -78,7 +76,7 @@ export default function PostAuthorCard({
|
||||
nav(loginPath(profileHref));
|
||||
return;
|
||||
}
|
||||
setMsgOpen(true);
|
||||
nav(`/messages?peer=${author.id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -159,16 +157,6 @@ export default function PostAuthorCard({
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isSelf && (
|
||||
<ComposeMessageDialog
|
||||
open={msgOpen}
|
||||
onOpenChange={setMsgOpen}
|
||||
toUserId={author.id}
|
||||
toNickname={nick}
|
||||
onSent={() => nav(`/messages?peer=${author.id}`)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useMemo, useCallback, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { renderPostContentHtml } from '../utils/postContent';
|
||||
import { handleMdCodeBlockUiClick } from '../utils/enhanceCodeBlocks';
|
||||
import { loginPath, registerPath } from '../utils/authRedirect';
|
||||
import { useForumLimits } from '../hooks/useForumLimits';
|
||||
import { notify } from '@/lib/notify';
|
||||
@@ -105,41 +106,13 @@ export default function PostContent({
|
||||
}
|
||||
return;
|
||||
}
|
||||
const foldBtn = target.closest<HTMLElement>('[data-code-fold]');
|
||||
if (foldBtn) {
|
||||
e.preventDefault();
|
||||
const block = foldBtn.closest('.md-codeblock');
|
||||
if (!block) return;
|
||||
const collapsed = block.classList.toggle('md-codeblock--collapsed');
|
||||
const lineCount = parseInt(block.getAttribute('data-line-count') || '0', 10)
|
||||
|| block.querySelectorAll('.md-code-line').length
|
||||
|| 1;
|
||||
if (collapsed && lineCount <= 5) block.classList.add('md-codeblock--short');
|
||||
else block.classList.remove('md-codeblock--short');
|
||||
foldBtn.textContent = collapsed ? '展开' : '收起';
|
||||
return;
|
||||
}
|
||||
const copyBtn = target.closest<HTMLElement>('[data-code-copy]');
|
||||
if (copyBtn) {
|
||||
e.preventDefault();
|
||||
const block = copyBtn.closest('.md-codeblock');
|
||||
const bodies = block?.querySelectorAll('.md-code-line__body');
|
||||
const text = bodies && bodies.length
|
||||
? [...bodies].map(el => el.textContent ?? '').join('\n')
|
||||
: (block?.querySelector('pre')?.textContent ?? '');
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
const prev = copyBtn.textContent;
|
||||
copyBtn.textContent = '已复制';
|
||||
copyBtn.classList.add('is-copied');
|
||||
window.setTimeout(() => {
|
||||
copyBtn.textContent = prev || '复制';
|
||||
copyBtn.classList.remove('is-copied');
|
||||
}, 1600);
|
||||
if (await handleMdCodeBlockUiClick(target)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
} catch {
|
||||
notify.error('复制失败');
|
||||
}
|
||||
}
|
||||
}, [nav, openLightbox, onRequestReply, onUnlocked, postId, unlocking]);
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
|
||||
@@ -31,7 +31,7 @@ function pickScrollEl(): HTMLElement | null {
|
||||
const page = document.querySelector<HTMLElement>('.page-wrap:not(.page-wrap--feed)');
|
||||
if (page) return page;
|
||||
|
||||
const showcase = document.querySelector<HTMLElement>('.showcase-page');
|
||||
const showcase = document.querySelector<HTMLElement>('.showcase-panel');
|
||||
if (showcase) return showcase.closest<HTMLElement>('.main-content') ?? showcase;
|
||||
|
||||
const admin = document.querySelector<HTMLElement>('.admin-main');
|
||||
|
||||
@@ -19,12 +19,14 @@ export default function ShowcaseAsideWidget() {
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const hit = getSessionSnapshot<CommunityShowcaseItem[]>(SHOWCASE_KEY);
|
||||
if (hit !== undefined) {
|
||||
// 非空快照直接用；空数组可能是启动竞态假空，仍再拉
|
||||
if (hit !== undefined && hit.length > 0) {
|
||||
setItems(hit);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
if (hit !== undefined) setItems(hit);
|
||||
setLoading(hit === undefined);
|
||||
api.communityShowcase()
|
||||
.then((r) => {
|
||||
if (cancelled) return;
|
||||
@@ -33,10 +35,8 @@ export default function ShowcaseAsideWidget() {
|
||||
setItems(next);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setSessionSnapshot(SHOWCASE_KEY, []);
|
||||
setItems([]);
|
||||
}
|
||||
// 失败不写空快照，避免假空粘死
|
||||
if (!cancelled && hit === undefined) setItems([]);
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
@@ -54,17 +54,13 @@ export default function ShowcaseAsideWidget() {
|
||||
setItems(next);
|
||||
})
|
||||
.catch(() => {
|
||||
if (opts.showLoading) {
|
||||
setSessionSnapshot(SHOWCASE_KEY, []);
|
||||
setItems([]);
|
||||
}
|
||||
// 软刷新失败：保持旧 UI
|
||||
// 软刷新 / 强刷失败：保持旧 UI，不写空快照
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
const applyHitOrReload = (showLoading: boolean) => {
|
||||
const hit = getSessionSnapshot<CommunityShowcaseItem[]>(SHOWCASE_KEY);
|
||||
if (hit !== undefined) {
|
||||
if (hit !== undefined && hit.length > 0) {
|
||||
setItems(hit);
|
||||
setLoading(false);
|
||||
return;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import Image from '@tiptap/extension-image';
|
||||
import { mergeAttributes } from '@tiptap/core';
|
||||
import { isStickerSrc } from './ArticleStickerExtension';
|
||||
|
||||
/** 单图展示形态（对齐 Notion / Medium 常见选项） */
|
||||
export type ImageDisplay = 'default' | 'wide' | 'float-left' | 'float-right';
|
||||
@@ -19,6 +20,19 @@ declare module '@tiptap/core' {
|
||||
export const ArticleImage = Image.extend({
|
||||
name: 'image',
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: this.options.allowBase64 ? 'img[src]' : 'img[src]:not([src^="data:"])',
|
||||
getAttrs: (node) => {
|
||||
if (typeof node === 'string') return false;
|
||||
if (isStickerSrc(node.getAttribute('src'))) return false;
|
||||
return null;
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
|
||||
54
frontend/src/components/editor/ArticleStickerExtension.ts
Normal file
54
frontend/src/components/editor/ArticleStickerExtension.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Node, mergeAttributes } from '@tiptap/core';
|
||||
|
||||
/** 贴纸资源路径：评论、私信、发帖共用 /stickers/ */
|
||||
export function isStickerSrc(src: string | null | undefined): boolean {
|
||||
return typeof src === 'string' && src.includes('/stickers/');
|
||||
}
|
||||
|
||||
/**
|
||||
* 行内表情贴纸。文章 Image 是 block，不能拿来插表情，否则会独自占一段。
|
||||
* 解析 HTML 时优先于普通 img，避免贴纸被收成通栏大图。
|
||||
*/
|
||||
export const ArticleSticker = Node.create({
|
||||
name: 'sticker',
|
||||
group: 'inline',
|
||||
inline: true,
|
||||
atom: true,
|
||||
selectable: true,
|
||||
draggable: true,
|
||||
priority: 60,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
src: { default: null },
|
||||
alt: { default: '' },
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'img[src]',
|
||||
getAttrs: (node) => {
|
||||
if (typeof node === 'string') return false;
|
||||
const src = node.getAttribute('src') || '';
|
||||
if (!isStickerSrc(src)) return false;
|
||||
return {
|
||||
src,
|
||||
alt: node.getAttribute('alt') || '',
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return [
|
||||
'img',
|
||||
mergeAttributes(HTMLAttributes, {
|
||||
class: 'article-sticker',
|
||||
draggable: 'false',
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
@@ -36,17 +36,58 @@ export default function StickerPicker({ onSelect }: Props) {
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = gridRef.current?.querySelectorAll<HTMLElement>('[role="option"]')[focusIndex];
|
||||
el?.focus();
|
||||
}, [focusIndex, stickers]);
|
||||
if (loading || stickers.length === 0) return;
|
||||
gridRef.current?.focus();
|
||||
}, [loading, stickers]);
|
||||
|
||||
const onKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
const cols = 8;
|
||||
if (e.key === 'ArrowRight') { e.preventDefault(); setFocusIndex((i) => Math.min(stickers.length - 1, i + 1)); }
|
||||
else if (e.key === 'ArrowLeft') { e.preventDefault(); setFocusIndex((i) => Math.max(0, i - 1)); }
|
||||
else if (e.key === 'ArrowDown') { e.preventDefault(); setFocusIndex((i) => Math.min(stickers.length - 1, i + cols)); }
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); setFocusIndex((i) => Math.max(0, i - cols)); }
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
const items = gridRef.current?.querySelectorAll<HTMLElement>('[role="option"]');
|
||||
if (!items?.length) return;
|
||||
|
||||
const moveTo = (next: number) => {
|
||||
e.preventDefault();
|
||||
const i = Math.max(0, Math.min(items.length - 1, next));
|
||||
setFocusIndex(i);
|
||||
items[i]?.focus();
|
||||
};
|
||||
|
||||
if (e.key === 'ArrowRight') {
|
||||
moveTo(focusIndex + 1);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'ArrowLeft') {
|
||||
moveTo(focusIndex - 1);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
// 颜文字宽度不固定，按视觉行列找下一格，避免按固定 8 列错位
|
||||
e.preventDefault();
|
||||
const cur = items[focusIndex];
|
||||
if (!cur) return;
|
||||
const cr = cur.getBoundingClientRect();
|
||||
const cx = cr.left + cr.width / 2;
|
||||
const cy = cr.top + cr.height / 2;
|
||||
const dir = e.key === 'ArrowDown' ? 1 : -1;
|
||||
let best = -1;
|
||||
let bestScore = Infinity;
|
||||
items.forEach((el, i) => {
|
||||
if (i === focusIndex) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const dy = (r.top + r.height / 2) - cy;
|
||||
if (dy * dir <= 6) return;
|
||||
const score = Math.abs(dy) * 24 + Math.abs((r.left + r.width / 2) - cx);
|
||||
if (score < bestScore) {
|
||||
bestScore = score;
|
||||
best = i;
|
||||
}
|
||||
});
|
||||
if (best >= 0) {
|
||||
setFocusIndex(best);
|
||||
items[best]?.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
const s = stickers[focusIndex];
|
||||
if (s) onSelect(s);
|
||||
@@ -73,6 +114,7 @@ export default function StickerPicker({ onSelect }: Props) {
|
||||
ref={gridRef}
|
||||
className="sticker-picker-grid"
|
||||
role="listbox"
|
||||
tabIndex={0}
|
||||
aria-label={`${active}贴纸`}
|
||||
aria-activedescendant={`${autoId}-opt-${focusIndex}`}
|
||||
onKeyDown={onKeyDown}
|
||||
@@ -82,7 +124,9 @@ export default function StickerPicker({ onSelect }: Props) {
|
||||
) : stickers.length === 0 ? (
|
||||
<div className="sticker-picker-loading">暂无贴纸</div>
|
||||
) : (
|
||||
stickers.map((s, i) => (
|
||||
stickers.map((s, i) => {
|
||||
const isText = s.type === 'text' && !!s.text;
|
||||
return (
|
||||
<button
|
||||
key={s.id}
|
||||
id={`${autoId}-opt-${i}`}
|
||||
@@ -91,11 +135,11 @@ export default function StickerPicker({ onSelect }: Props) {
|
||||
tabIndex={focusIndex === i ? 0 : -1}
|
||||
aria-selected={focusIndex === i}
|
||||
aria-label={s.name}
|
||||
className="sticker-picker-item"
|
||||
className={isText ? 'sticker-picker-item sticker-picker-item--text' : 'sticker-picker-item sticker-picker-item--image'}
|
||||
onClick={() => onSelect(s)}
|
||||
onFocus={() => setFocusIndex(i)}
|
||||
>
|
||||
{s.type === 'text' && s.text ? (
|
||||
{isText ? (
|
||||
<span className="sticker-picker-text">{s.text}</span>
|
||||
) : (
|
||||
<img
|
||||
@@ -103,12 +147,12 @@ export default function StickerPicker({ onSelect }: Props) {
|
||||
alt={s.name}
|
||||
width={32}
|
||||
height={32}
|
||||
style={{ width: 32, height: 32, objectFit: 'contain' }}
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,10 +15,7 @@ export async function loadHotStickers(): Promise<Sticker[]> {
|
||||
const allEmoji = getAllStickers();
|
||||
const all = [...allEmoji, ...KAOMOJI_STICKERS];
|
||||
return all
|
||||
.filter((s) => {
|
||||
if (s.category === '颜文字') return true;
|
||||
return s.aliases?.some((a) => HOT_KEYWORDS.includes(a)) || HOT_KEYWORDS.includes(s.name);
|
||||
})
|
||||
.filter((s) => s.aliases?.some((a) => HOT_KEYWORDS.includes(a)) || HOT_KEYWORDS.includes(s.name))
|
||||
.slice(0, 30)
|
||||
.map((s) => ({ ...s, category: '热门' as const }));
|
||||
}
|
||||
|
||||
@@ -3,30 +3,54 @@ import type { Sticker } from './index';
|
||||
/** 颜文字贴纸 — 纯文本类型，选择器和编辑器中均作为纯文本显示 */
|
||||
|
||||
export const KAOMOJI_STICKERS: Sticker[] = [
|
||||
{ id: 'km-happy', name: '开心', category: '颜文字', type: 'text', text: '(ノ´∀`)ノ', aliases: ['哈哈', '开心'] },
|
||||
{ id: 'km-laugh', name: '大笑', category: '颜文字', type: 'text', text: '(≧∇≦)ﾉ', aliases: ['哈哈哈', '笑死'] },
|
||||
{ id: 'km-cry', name: '哭', category: '颜文字', type: 'text', text: '(´；ω；`)', aliases: ['呜呜', '伤心'] },
|
||||
{ id: 'km-angry', name: '生气', category: '颜文字', type: 'text', text: 'ヽ(｀⌒´)ﾉ', aliases: ['怒', '气死'] },
|
||||
{ id: 'km-shrug', name: '无奈', category: '颜文字', type: 'text', text: '╮(°-°)╭', aliases: ['呵呵', '无语'] },
|
||||
{ id: 'km-determined', name: '加油', category: '颜文字', type: 'text', text: '(๑•̀ㅁ•́ฅ)', aliases: ['冲', '奥利给'] },
|
||||
{ id: 'km-sad', name: '难过', category: '颜文字', type: 'text', text: '( ´･ω･`)', aliases: ['失落', '低落'] },
|
||||
{ id: 'km-sparkle', name: '兴奋', category: '颜文字', type: 'text', text: '(ﾉ´ヮ`)ﾉ*: ･ﾟ', aliases: ['太棒了', '耶'] },
|
||||
{ id: 'km-tear', name: '泪奔', category: '颜文字', type: 'text', text: '(╥﹏╥)', aliases: ['泪流', '呜呜'] },
|
||||
{ id: 'km-love', name: '喜欢', category: '颜文字', type: 'text', text: '(◕ᴗ◕✿)', aliases: ['爱', '心动'] },
|
||||
{ id: 'km-cool', name: '酷', category: '颜文字', type: 'text', text: '(⌐■_■)', aliases: ['帅', '墨镜'] },
|
||||
{ id: 'km-stare', name: '盯', category: '颜文字', type: 'text', text: 'ಠ_ಠ', aliases: ['凝视', '盯着看'] },
|
||||
{ id: 'km-tableflip', name: '掀桌', category: '颜文字', type: 'text', text: '(╯°□°）╯︵ ┻━┻', aliases: ['掀桌', '愤怒'] },
|
||||
{ id: 'km-bow', name: '拜托', category: '颜文字', type: 'text', text: '(人･ω･)💦', aliases: ['求求', '拜托了'] },
|
||||
{ id: 'km-proud', name: '得意', category: '颜文字', type: 'text', text: '(￣▽￣)"', aliases: ['嘿嘿', '自满'] },
|
||||
{ id: 'km-sleep', name: '困', category: '颜文字', type: 'text', text: '(-ω-)Zzz', aliases: ['睡觉', '晚安'] },
|
||||
{ id: 'km-wave', name: '招手', category: '颜文字', type: 'text', text: '(´・ω・)ノ', aliases: ['你好', '拜拜'] },
|
||||
{ id: 'km-wink', name: '眨眼', category: '颜文字', type: 'text', text: '(◠‿◠)', aliases: ['抛媚眼', '嘿嘿'] },
|
||||
{ id: 'km-sorry', name: '抱歉', category: '颜文字', type: 'text', text: 'm(._.)m', aliases: ['对不起', '跪了'] },
|
||||
{ id: 'km-doubt', name: '疑惑', category: '颜文字', type: 'text', text: '(╬ Ò _ Ó)', aliases: ['什么', '???'] },
|
||||
{ id: 'km-hungry', name: '饿了', category: '颜文字', type: 'text', text: '(๑´ㅂ`๑)', aliases: ['想吃', '吃货'] },
|
||||
{ id: 'km-gameover', name: 'GG', category: '颜文字', type: 'text', text: '(╯︿╰﹀ )', aliases: ['GG', '完了'] },
|
||||
{ id: 'km-gift', name: '送花', category: '颜文字', type: 'text', text: '(✿◠‿◠)', aliases: ['送花', '谢谢'] },
|
||||
{ id: 'km-clap', name: '鼓掌', category: '颜文字', type: 'text', text: 'ヾ(´▽｀;)ゝ', aliases: ['呱唧', '鼓掌'] },
|
||||
{ id: 'km-cheer', name: '加油', category: '颜文字', type: 'text', text: '＼(^ω^＼)', aliases: ['冲鸭', 'go'] },
|
||||
{ id: 'km-please', name: '拜托了', category: '颜文字', type: 'text', text: '( ´･ω･`)', aliases: ['嘤嘤', '求求了'] },
|
||||
{ id: 'km-wave-half', name: '勉强挥手', category: '颜文字', type: 'text', text: '(￣▽￣)ノ', aliases: ['挥手', '嗨'] },
|
||||
{ id: 'km-shrug-ascii', name: '摊手', category: '颜文字', type: 'text', text: '¯\\_(ツ)_/¯', aliases: ['摊手', '无奈'] },
|
||||
{ id: 'km-eyeroll', name: '翻白眼', category: '颜文字', type: 'text', text: '(¬_¬)', aliases: ['白眼', '嫌弃'] },
|
||||
{ id: 'km-speechless', name: '无语凝噎', category: '颜文字', type: 'text', text: '(；一_一)', aliases: ['无语', '沉默'] },
|
||||
{ id: 'km-shock-idle', name: '震惊但不想管', category: '颜文字', type: 'text', text: '( ﾟдﾟ)', aliases: ['震惊', '惊讶'] },
|
||||
{ id: 'km-dead-inside', name: '心死', category: '颜文字', type: 'text', text: '（。_。）', aliases: ['心死', '无力'] },
|
||||
{ id: 'km-lazy', name: '懒得动', category: '颜文字', type: 'text', text: '( ˘ω˘ )', aliases: ['懒', '摆烂'] },
|
||||
{ id: 'km-awkward-smile', name: '尴尬微笑', category: '颜文字', type: 'text', text: '(￣ω￣;)', aliases: ['尴尬', '呵呵'] },
|
||||
{ id: 'km-sob', name: '哭到抽搐', category: '颜文字', type: 'text', text: '(´；ω；｀)', aliases: ['哭', '大哭'] },
|
||||
{ id: 'km-grievance', name: '委屈巴巴', category: '颜文字', type: 'text', text: '(๑•́ ₃ •̀๑)', aliases: ['委屈', '嘤嘤'] },
|
||||
{ id: 'km-blush-blur', name: '害羞到糊掉', category: '颜文字', type: 'text', text: '(⁄ ⁄•⁄ω⁄•⁄ ⁄)', aliases: ['害羞', '脸红'] },
|
||||
{ id: 'km-grit', name: '咬牙切齿', category: '颜文字', type: 'text', text: '(╬ ￣皿￣)', aliases: ['怒', '生气'] },
|
||||
{ id: 'km-short-rage', name: '暴怒短号', category: '颜文字', type: 'text', text: '(｀Д´)', aliases: ['怒', '气死'] },
|
||||
{ id: 'km-fist-rage', name: '气到挥拳', category: '颜文字', type: 'text', text: '٩(๑`^´๑)۶', aliases: ['怒', '挥拳'] },
|
||||
{ id: 'km-grit-spark', name: '憋屈但要干', category: '颜文字', type: 'text', text: '(๑•̀ㅂ•́)و✧', aliases: ['冲', '加油'] },
|
||||
{ id: 'km-weep', name: '哭唧唧', category: '颜文字', type: 'text', text: '( ˃̣̣̥ω˂̣̣̥ )', aliases: ['哭', '呜呜'] },
|
||||
{ id: 'km-scamper', name: '撒欢跑走', category: '颜文字', type: 'text', text: 'ᕕ( ᐛ )ᕗ', aliases: ['跑', '溜了'] },
|
||||
{ id: 'km-star-throw', name: '丢星星', category: '颜文字', type: 'text', text: '(ﾉ≧∀≦)ﾉ ‥…━━━★', aliases: ['耶', '星星'] },
|
||||
{ id: 'km-flee', name: '落荒而逃', category: '颜文字', type: 'text', text: 'ε=ε=ε=┌(;*´Д`)ﾉ', aliases: ['逃', '溜'] },
|
||||
{ id: 'km-unflip', name: '把桌摆回去', category: '颜文字', type: 'text', text: '┬─┬ノ( º _ ºノ)', aliases: ['摆桌', '冷静'] },
|
||||
{ id: 'km-flip-hard', name: '狠掀桌', category: '颜文字', type: 'text', text: '(┛ಠ_ಠ)┛彡┻━┻', aliases: ['掀桌', '怒'] },
|
||||
{ id: 'km-victory-l', name: '胜利举手', category: '颜文字', type: 'text', text: '┏(＾0＾)┛', aliases: ['胜利', '耶'] },
|
||||
{ id: 'km-victory-r', name: '对面胜利', category: '颜文字', type: 'text', text: '┗(＾0＾)┓', aliases: ['胜利', '嗨'] },
|
||||
{ id: 'km-point', name: '指你呢', category: '颜文字', type: 'text', text: '(☞ﾟヮﾟ)☞', aliases: ['指', '就是你'] },
|
||||
{ id: 'km-point-back', name: '指回去', category: '颜文字', type: 'text', text: '☜(ﾟヮﾟ☜)', aliases: ['指回去', '你才'] },
|
||||
{ id: 'km-cat', name: '猫', category: '颜文字', type: 'text', text: '(=^･ω･^=)', aliases: ['猫', '喵'] },
|
||||
{ id: 'km-cat-round', name: '圆眼猫', category: '颜文字', type: 'text', text: '(ΦωΦ)', aliases: ['猫', '圆眼'] },
|
||||
{ id: 'km-bear', name: '熊', category: '颜文字', type: 'text', text: 'ʕ•ᴥ•ʔ', aliases: ['熊', '抱抱'] },
|
||||
{ id: 'km-flower-ear', name: '花耳', category: '颜文字', type: 'text', text: '◕‿◕✿', aliases: ['花', '可爱'] },
|
||||
{ id: 'km-angry-bird', name: '怒鸟', category: '颜文字', type: 'text', text: '（ꐦ°᷄д°᷅）', aliases: ['怒', '生气'] },
|
||||
{ id: 'km-smug-wolf', name: '狼尾得意', category: '颜文字', type: 'text', text: '( •̀ ω •́ )✧', aliases: ['得意', '酷'] },
|
||||
{ id: 'km-cat-wave', name: '猫招手', category: '颜文字', type: 'text', text: '~(=^‥^)ノ', aliases: ['猫', '招手'] },
|
||||
{ id: 'km-hehe', name: '呵呵', category: '颜文字', type: 'text', text: '( ´_ゝ｀)', aliases: ['呵呵', '滑稽'] },
|
||||
{ id: 'km-server-down', name: '服务器炸了', category: '颜文字', type: 'text', text: '(；´Д｀)', aliases: ['炸了', '宕机'] },
|
||||
{ id: 'km-double-shock', name: '双重震惊', category: '颜文字', type: 'text', text: '(ﾟДﾟ≡ﾟдﾟ)!?', aliases: ['震惊', '惊讶'] },
|
||||
{ id: 'km-cold-sweat', name: '冷汗惊恐', category: '颜文字', type: 'text', text: 'Σ(°△°|||)︴', aliases: ['惊恐', '惊讶'] },
|
||||
{ id: 'km-hang', name: '宕机', category: '颜文字', type: 'text', text: '(；°○° )', aliases: ['宕机', '卡死'] },
|
||||
{ id: 'km-pass-box', name: '递箱子', category: '颜文字', type: 'text', text: '( ﾟ∀ﾟ)つ□', aliases: ['递', '补丁'] },
|
||||
{ id: 'km-shoulder', name: '拍对方肩', category: '颜文字', type: 'text', text: '( ´▽｀)σ)Д`)', aliases: ['拍肩', '兄弟'] },
|
||||
{ id: 'km-silent-crash', name: '无声崩溃', category: '颜文字', type: 'text', text: '(-_-;)・・・', aliases: ['崩溃', '尴尬'] },
|
||||
{ id: 'km-blank', name: '呆滞', category: '颜文字', type: 'text', text: '(｡ŏ_ŏ)', aliases: ['发呆', '呆'] },
|
||||
{ id: 'km-side-eye', name: '眯眼嫌弃', category: '颜文字', type: 'text', text: '(๑¯ω¯๑)', aliases: ['嫌弃', '眯眼'] },
|
||||
{ id: 'km-lick', name: '舔嘴', category: '颜文字', type: 'text', text: '(๑´ڡ`๑)', aliases: ['好吃', '馋'] },
|
||||
{ id: 'km-round-laugh', name: '圆滚滚笑', category: '颜文字', type: 'text', text: '( ˶˚ ᗨ ˚˶ )', aliases: ['哈哈', '大笑'] },
|
||||
{ id: 'km-hug-ask', name: '求抱抱', category: '颜文字', type: 'text', text: '(っ˘̩╭╮˘̩)っ', aliases: ['抱抱', '求抱'] },
|
||||
{ id: 'km-rage-yi', name: '暴怒益字', category: '颜文字', type: 'text', text: '(╬ಠ益ಠ)', aliases: ['怒', '生气'] },
|
||||
{ id: 'km-fight', name: '对线准备', category: '颜文字', type: 'text', text: "(ง'̀-'́)ง", aliases: ['对线', '来战'] },
|
||||
{ id: 'km-cat-minimal', name: '极简猫', category: '颜文字', type: 'text', text: 'ᓚᘏᗢ', aliases: ['猫', '喵'] },
|
||||
{ id: 'km-pounce', name: '飞扑拥抱', category: '颜文字', type: 'text', text: '(づ｡◕‿‿◕｡)づ', aliases: ['拥抱', '爱'] },
|
||||
{ id: 'km-suspect', name: '怀疑人生', category: '颜文字', type: 'text', text: '( ◔ ʖ̯ ◔ )', aliases: ['怀疑', '思考'] },
|
||||
];
|
||||
|
||||
@@ -13,15 +13,22 @@ type Fetcher<T> = () => Promise<T>;
|
||||
* 会话快照数据源：有缓存则跳过请求；无缓存时保留上一份画面直到新数据返回。
|
||||
* 手机下拉软刷新 commit / PAGE_FORCE_REFRESH_EVENT 会应用新快照。
|
||||
*/
|
||||
function isEmptyArray(value: unknown): boolean {
|
||||
return Array.isArray(value) && value.length === 0;
|
||||
}
|
||||
|
||||
export function useSessionResource<T>(
|
||||
key: string | null,
|
||||
fetcher: Fetcher<T>,
|
||||
opts?: {
|
||||
enabled?: boolean;
|
||||
onError?: (e: unknown) => void;
|
||||
/** 缓存为空数组时仍后台再拉，避免启动竞态假空粘死 */
|
||||
revalidateEmpty?: boolean;
|
||||
},
|
||||
) {
|
||||
const enabled = opts?.enabled !== false;
|
||||
const revalidateEmpty = opts?.revalidateEmpty === true;
|
||||
const fetcherRef = useRef(fetcher);
|
||||
fetcherRef.current = fetcher;
|
||||
const onErrorRef = useRef(opts?.onError);
|
||||
@@ -49,7 +56,7 @@ export function useSessionResource<T>(
|
||||
}
|
||||
|
||||
const hit = getSessionSnapshot<T>(key);
|
||||
if (hit !== undefined) {
|
||||
if (hit !== undefined && !(revalidateEmpty && isEmptyArray(hit))) {
|
||||
setData(hit);
|
||||
setLoading(false);
|
||||
setPending(false);
|
||||
@@ -57,9 +64,16 @@ export function useSessionResource<T>(
|
||||
}
|
||||
|
||||
const seq = ++seqRef.current;
|
||||
const keep = dataRef.current !== undefined;
|
||||
if (keep) setPending(true);
|
||||
else setLoading(true);
|
||||
const keep = dataRef.current !== undefined || (hit !== undefined && isEmptyArray(hit));
|
||||
if (hit !== undefined && isEmptyArray(hit)) {
|
||||
setData(hit);
|
||||
setPending(true);
|
||||
setLoading(false);
|
||||
} else if (keep && dataRef.current !== undefined) {
|
||||
setPending(true);
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
fetcherRef.current()
|
||||
.then((next) => {
|
||||
@@ -70,6 +84,7 @@ export function useSessionResource<T>(
|
||||
.catch((e: unknown) => {
|
||||
if (seq !== seqRef.current) return;
|
||||
onErrorRef.current?.(e);
|
||||
// 失败不写空快照；已有画面则保留
|
||||
if (!keep) setData(undefined);
|
||||
})
|
||||
.finally(() => {
|
||||
@@ -81,7 +96,7 @@ export function useSessionResource<T>(
|
||||
return () => {
|
||||
seqRef.current += 1;
|
||||
};
|
||||
}, [key, enabled]);
|
||||
}, [key, enabled, revalidateEmpty]);
|
||||
|
||||
const replace = useCallback((next: T | ((prev: T | undefined) => T)) => {
|
||||
setData((prev) => {
|
||||
@@ -99,18 +114,20 @@ export function useSessionResource<T>(
|
||||
const reload = (opts: { allowLoading: boolean }) => {
|
||||
if (!key || !enabled) return;
|
||||
const warm = getSessionSnapshot<T>(key);
|
||||
if (warm !== undefined) {
|
||||
if (warm !== undefined && !(revalidateEmpty && isEmptyArray(warm))) {
|
||||
setData(warm);
|
||||
setLoading(false);
|
||||
setPending(false);
|
||||
return;
|
||||
}
|
||||
const seq = ++seqRef.current;
|
||||
const keep = dataRef.current !== undefined;
|
||||
const keep = dataRef.current !== undefined || (warm !== undefined && isEmptyArray(warm));
|
||||
if (opts.allowLoading) {
|
||||
deleteSessionSnapshot(key);
|
||||
if (keep) setPending(true);
|
||||
else setLoading(true);
|
||||
} else if (warm !== undefined && isEmptyArray(warm)) {
|
||||
setPending(true);
|
||||
}
|
||||
fetcherRef.current()
|
||||
.then((next) => {
|
||||
@@ -138,7 +155,7 @@ export function useSessionResource<T>(
|
||||
window.removeEventListener(PAGE_FORCE_REFRESH_EVENT, onForce);
|
||||
window.removeEventListener(PAGE_SOFT_REFRESH_COMMIT_EVENT, onCommit);
|
||||
};
|
||||
}, [key, enabled]);
|
||||
}, [key, enabled, revalidateEmpty]);
|
||||
|
||||
return { data, loading, pending, replace, invalidate };
|
||||
}
|
||||
|
||||
@@ -72,6 +72,8 @@ export default function MainLayout() {
|
||||
const [recentComments, setRecentComments] = useState<RecentComment[]>(() => getCachedRecentComments());
|
||||
const [recentUsers, setRecentUsers] = useState<RecentUser[]>(() => getCachedRecentUsers());
|
||||
const [unreadMessages, setUnreadMessages] = useState(() => getBootUnread());
|
||||
const [dmUnread, setDmUnread] = useState(0);
|
||||
const [notifyUnread, setNotifyUnread] = useState(0);
|
||||
const [tags, setTags] = useState<TagCount[]>(() => getCachedTags());
|
||||
const [tagsLoading, setTagsLoading] = useState(() => getCachedTags().length === 0);
|
||||
const [postOutline, setPostOutline] = useState<{
|
||||
@@ -309,13 +311,29 @@ export default function MainLayout() {
|
||||
const refreshUnreadMessages = useCallback(() => {
|
||||
if (!user) {
|
||||
setUnreadMessages(0);
|
||||
setDmUnread(0);
|
||||
setNotifyUnread(0);
|
||||
return;
|
||||
}
|
||||
api.messageUnreadCount()
|
||||
.then((r) => setUnreadMessages(r.count || 0))
|
||||
.catch(() => setUnreadMessages(0));
|
||||
.then((r) => {
|
||||
setUnreadMessages(r.count || 0);
|
||||
setDmUnread(r.dm_count ?? 0);
|
||||
setNotifyUnread(r.notify_count ?? 0);
|
||||
})
|
||||
.catch(() => {
|
||||
setUnreadMessages(0);
|
||||
setDmUnread(0);
|
||||
setNotifyUnread(0);
|
||||
});
|
||||
}, [user]);
|
||||
|
||||
/** 仅有通知未读时直达通知 Tab，避免先看到空私信列表 */
|
||||
const openMessages = useCallback(() => {
|
||||
const path = notifyUnread > 0 && dmUnread === 0 ? '/messages?tab=notify' : '/messages';
|
||||
void transitionTo(nav, path);
|
||||
}, [nav, notifyUnread, dmUnread]);
|
||||
|
||||
useEffect(() => {
|
||||
refreshUnreadMessages();
|
||||
const onRefresh = () => refreshUnreadMessages();
|
||||
@@ -667,7 +685,7 @@ export default function MainLayout() {
|
||||
className="header-icon-btn header-msg-btn"
|
||||
title={unreadMessages > 0 ? `${unreadMessages} 条未读消息` : '站内消息'}
|
||||
aria-label={unreadMessages > 0 ? `站内消息，${unreadMessages} 条未读` : '站内消息'}
|
||||
onClick={() => void transitionTo(nav, '/messages')}
|
||||
onClick={openMessages}
|
||||
>
|
||||
<Mail size={18} aria-hidden />
|
||||
{unreadMessages > 0 && (
|
||||
@@ -691,7 +709,7 @@ export default function MainLayout() {
|
||||
<DropdownMenuItem onClick={() => void transitionTo(nav, '/profile')}>
|
||||
账号设置{typeof user.points === 'number' ? ` · ${user.points} 积分` : ''}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => void transitionTo(nav, '/messages')}>
|
||||
<DropdownMenuItem onClick={openMessages}>
|
||||
站内消息{unreadMessages > 0 ? ` (${unreadMessages})` : ''}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => void transitionTo(nav, '/favorites')}>我的收藏</DropdownMenuItem>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -109,7 +109,7 @@ export default function PostDetailPage() {
|
||||
const { limits } = useForumLimits();
|
||||
const { setPostOutline, isMobile } = useOutletContext<LayoutCtx>();
|
||||
|
||||
const initialSnap = (postId && !Number.isNaN(postId))
|
||||
const initialSnap = (postId && !Number.isNaN(postId) && navType === 'POP')
|
||||
? getSessionSnapshot<PostDetailSnapshot>(postDetailCacheKey(postId))
|
||||
: undefined;
|
||||
|
||||
@@ -259,7 +259,7 @@ export default function PostDetailPage() {
|
||||
if (mode === 'force') {
|
||||
deleteSessionSnapshot(postDetailCacheKey(postId));
|
||||
}
|
||||
const cached = mode === 'force'
|
||||
const cached = mode === 'force' || navType !== 'POP'
|
||||
? undefined
|
||||
: getSessionSnapshot<PostDetailSnapshot>(postDetailCacheKey(postId));
|
||||
if (cached) {
|
||||
@@ -329,19 +329,9 @@ export default function PostDetailPage() {
|
||||
}, [postId]);
|
||||
|
||||
useEffect(() => {
|
||||
// 下拉已预热则应用快照；否则强制重拉
|
||||
// 下拉/软刷新：始终强制重拉，确保拿到最新数据
|
||||
const onForce = () => {
|
||||
if (!postId || Number.isNaN(postId)) return;
|
||||
const warm = getSessionSnapshot<PostDetailSnapshot>(postDetailCacheKey(postId));
|
||||
if (warm) {
|
||||
loadSeq.current += 1;
|
||||
applySnapshot(warm, { restoreScroll: false });
|
||||
setLoading(false);
|
||||
const el = pageRef.current;
|
||||
if (el) el.scrollTop = 0;
|
||||
scrollTopRef.current = 0;
|
||||
return;
|
||||
}
|
||||
loadPostRef.current('force');
|
||||
};
|
||||
window.addEventListener(PAGE_FORCE_REFRESH_EVENT, onForce);
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { ExternalLink, Globe2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, ExternalLink, Globe2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { api } from '../api/client';
|
||||
import type { CommunityShowcaseItem } from '../api/types';
|
||||
@@ -7,12 +10,65 @@ import { getCachedSiteBranding, useSiteBranding } from '../hooks/useSiteBranding
|
||||
import { InFlowSiteFooter } from '../components/SiteFooter';
|
||||
import { useSessionResource } from '../hooks/useSessionResource';
|
||||
|
||||
function siteMark(name: string, url: string): string {
|
||||
const raw = (name || '').trim() || url.replace(/^https?:\/\//i, '');
|
||||
const ch = Array.from(raw)[0];
|
||||
return ch ? ch.toUpperCase() : '?';
|
||||
}
|
||||
|
||||
function hostLabel(url: string): string {
|
||||
try {
|
||||
return new URL(url).host;
|
||||
} catch {
|
||||
return url.replace(/^https?:\/\//i, '');
|
||||
}
|
||||
}
|
||||
|
||||
/** 目标站约定路径 /favicon.ico */
|
||||
function faviconURL(siteURL: string): string | null {
|
||||
try {
|
||||
return new URL('/favicon.ico', siteURL).href;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function ShowcaseFavicon({ name, url }: { name: string; url: string }) {
|
||||
const src = faviconURL(url);
|
||||
const [failed, setFailed] = useState(!src);
|
||||
const mark = siteMark(name, url);
|
||||
|
||||
if (failed || !src) {
|
||||
return (
|
||||
<span className="showcase-item-mark" aria-hidden>
|
||||
{mark}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="showcase-item-favicon">
|
||||
<img
|
||||
src={src}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
referrerPolicy="no-referrer"
|
||||
decoding="async"
|
||||
onError={() => setFailed(true)}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** 官方精选的公网部署展柜（只读；仅人工精选条目） */
|
||||
export default function ShowcasePage() {
|
||||
const nav = useNavigate();
|
||||
const { branding } = useSiteBranding();
|
||||
const { data: items = [], loading } = useSessionResource<CommunityShowcaseItem[]>(
|
||||
'showcase',
|
||||
() => api.communityShowcase().then((r) => (Array.isArray(r.items) ? r.items : [])),
|
||||
{ revalidateEmpty: true },
|
||||
);
|
||||
|
||||
usePageSEO({
|
||||
@@ -24,26 +80,36 @@ export default function ShowcasePage() {
|
||||
|
||||
return (
|
||||
<div className="page-wrap">
|
||||
<div className="showcase-page">
|
||||
<header className="showcase-head">
|
||||
<div className="showcase-head-mark" aria-hidden>
|
||||
<Globe2 size={22} />
|
||||
<div className="feed-panel list-page-panel showcase-panel">
|
||||
<header className="list-page-panel__head showcase-head">
|
||||
<Button variant="ghost" size="sm" className="list-page-panel__back" onClick={() => nav('/')}>
|
||||
<ArrowLeft />
|
||||
返回
|
||||
</Button>
|
||||
<div className="showcase-head__title-row">
|
||||
<h1 className="page-title">开源部署展柜</h1>
|
||||
{!loading && items.length > 0 && (
|
||||
<span className="showcase-head__count">精选 {items.length} 站</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="showcase-title">开源部署展柜</h1>
|
||||
<p className="showcase-desc">
|
||||
<p className="page-desc">
|
||||
以下站点自愿开启社区上报，并由官方演示站精选推荐（非全量目录）
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-16"><Spinner size="lg" /></div>
|
||||
) : items.length === 0 ? (
|
||||
<p className="showcase-empty">暂无精选实例</p>
|
||||
<div className="showcase-empty list-page-panel__empty">
|
||||
<Globe2 size={28} strokeWidth={1.5} aria-hidden />
|
||||
<p>暂无精选实例</p>
|
||||
<span>有站点被官方推荐后会出现在这里</span>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="showcase-list">
|
||||
{items.map((item) => (
|
||||
{items.map((item) => {
|
||||
const name = item.site_name || '未命名站点';
|
||||
return (
|
||||
<li key={item.site_url} className="showcase-item">
|
||||
<a
|
||||
href={item.site_url}
|
||||
@@ -51,21 +117,24 @@ export default function ShowcasePage() {
|
||||
rel="noopener noreferrer"
|
||||
className="showcase-item-link"
|
||||
>
|
||||
<span className="showcase-item-name">{item.site_name || '未命名站点'}</span>
|
||||
<ShowcaseFavicon name={name} url={item.site_url} />
|
||||
<span className="showcase-item-body">
|
||||
<span className="showcase-item-name">{name}</span>
|
||||
<span className="showcase-item-url">
|
||||
{item.site_url}
|
||||
{hostLabel(item.site_url)}
|
||||
<ExternalLink size={12} aria-hidden />
|
||||
</span>
|
||||
{(item.featured_note || item.version) && (
|
||||
<span className="showcase-item-meta">
|
||||
{item.featured_note || null}
|
||||
{item.featured_note && item.version ? ' · ' : null}
|
||||
{item.version ? `v${item.version}` : null}
|
||||
{item.featured_note ? (
|
||||
<span className="showcase-item-note">{item.featured_note}</span>
|
||||
) : null}
|
||||
</span>
|
||||
)}
|
||||
{item.version ? (
|
||||
<span className="showcase-item-version">v{item.version}</span>
|
||||
) : null}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
|
||||
@@ -23,7 +23,6 @@ import { useForumLimits } from '../hooks/useForumLimits';
|
||||
import { useSessionResource } from '../hooks/useSessionResource';
|
||||
import PostListItem from '../components/PostListItem';
|
||||
import FeedPagination from '../components/FeedPagination';
|
||||
import ComposeMessageDialog from '../components/ComposeMessageDialog';
|
||||
import { openForumPost } from '../utils/openPost';
|
||||
import { formatDateTime } from '../utils/content';
|
||||
import { usePageSEO } from '../hooks/usePageSEO';
|
||||
@@ -44,7 +43,6 @@ export default function UserProfilePage() {
|
||||
const { limits } = useForumLimits();
|
||||
const pageSize = limits.page_size_default > 0 ? limits.page_size_default : 20;
|
||||
|
||||
const [msgOpen, setMsgOpen] = useState(false);
|
||||
const [notFound, setNotFound] = useState(false);
|
||||
const [postPage, setPostPage] = useState(1);
|
||||
|
||||
@@ -183,7 +181,7 @@ export default function UserProfilePage() {
|
||||
nav(loginPath(userPath(profile.id)));
|
||||
return;
|
||||
}
|
||||
setMsgOpen(true);
|
||||
nav(`/messages?peer=${profile.id}`);
|
||||
}}
|
||||
>
|
||||
<Mail size={14} />
|
||||
@@ -265,16 +263,6 @@ export default function UserProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
<InFlowSiteFooter />
|
||||
|
||||
{!isSelf && profile && me && (
|
||||
<ComposeMessageDialog
|
||||
open={msgOpen}
|
||||
onOpenChange={setMsgOpen}
|
||||
toUserId={profile.id}
|
||||
toNickname={profile.nickname}
|
||||
onSent={() => nav(`/messages?peer=${profile.id}`)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Trash2, RotateCcw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -40,6 +40,8 @@ function formatAdminTime(iso: string) {
|
||||
|
||||
export default function AdminCommentsPage() {
|
||||
const nav = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const focusId = Number(searchParams.get('id') || 0) || 0;
|
||||
const { ready } = useAdminGuard();
|
||||
const [tab, setTab] = useState<Tab>('pending');
|
||||
const [comments, setComments] = useState<Comment[]>([]);
|
||||
@@ -49,6 +51,9 @@ export default function AdminCommentsPage() {
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [pendingCount, setPendingCount] = useState(0);
|
||||
const [revComment, setRevComment] = useState<Comment | null>(null);
|
||||
const [highlightId, setHighlightId] = useState<number | null>(focusId > 0 ? focusId : null);
|
||||
const focusTriedRef = useRef(false);
|
||||
const highlightTimer = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
const loadList = (p = page, st: Tab = tab) => {
|
||||
setLoading(true);
|
||||
@@ -90,6 +95,45 @@ export default function AdminCommentsPage() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ready, tab]);
|
||||
|
||||
// 从通知深链 ?id= 定位并高亮待审行
|
||||
useEffect(() => {
|
||||
if (!ready || loading || focusId <= 0 || focusTriedRef.current) return;
|
||||
if (tab === 'trash') return;
|
||||
|
||||
const found = comments.find((c) => c.id === focusId);
|
||||
if (found) {
|
||||
focusTriedRef.current = true;
|
||||
setHighlightId(focusId);
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(`admin-comment-row-${focusId}`)?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
});
|
||||
clearTimeout(highlightTimer.current);
|
||||
highlightTimer.current = setTimeout(() => setHighlightId(null), 2800);
|
||||
const next = new URLSearchParams(searchParams);
|
||||
next.delete('id');
|
||||
setSearchParams(next, { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
// pending 未找到则切到全部再试一次
|
||||
if (tab === 'pending') {
|
||||
setTab('all');
|
||||
setPage(1);
|
||||
return;
|
||||
}
|
||||
|
||||
focusTriedRef.current = true;
|
||||
notify.warning('该评论可能已审核或不在当前列表');
|
||||
const next = new URLSearchParams(searchParams);
|
||||
next.delete('id');
|
||||
setSearchParams(next, { replace: true });
|
||||
}, [ready, loading, comments, focusId, tab, searchParams, setSearchParams]);
|
||||
|
||||
useEffect(() => () => clearTimeout(highlightTimer.current), []);
|
||||
|
||||
const approve = async (id: number) => {
|
||||
try {
|
||||
const r = await api.adminApproveComment(id);
|
||||
@@ -268,7 +312,11 @@ export default function AdminCommentsPage() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{comments.map(c => (
|
||||
<tr key={c.id}>
|
||||
<tr
|
||||
key={c.id}
|
||||
id={`admin-comment-row-${c.id}`}
|
||||
className={cn(highlightId === c.id && 'admin-row-highlight')}
|
||||
>
|
||||
<td>{c.id}</td>
|
||||
<td>#{c.floor}</td>
|
||||
<td>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Search, Lock, LockOpen, MessageSquareOff, Trash2, RotateCcw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -32,6 +32,8 @@ function formatAdminTime(iso: string) {
|
||||
|
||||
export default function AdminPostsPage() {
|
||||
const nav = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const focusId = Number(searchParams.get('id') || 0) || 0;
|
||||
const { ready } = useAdminGuard();
|
||||
const [tab, setTab] = useState<Tab>('pending');
|
||||
const [posts, setPosts] = useState<PostItem[]>([]);
|
||||
@@ -42,6 +44,9 @@ export default function AdminPostsPage() {
|
||||
const [pendingCount, setPendingCount] = useState(0);
|
||||
const [keyword, setKeyword] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [highlightId, setHighlightId] = useState<number | null>(focusId > 0 ? focusId : null);
|
||||
const focusTriedRef = useRef(false);
|
||||
const highlightTimer = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
const loadActive = (p = page, kw = search, status = tab === 'pending' ? 'pending' : 'all') => {
|
||||
setLoading(true);
|
||||
@@ -92,6 +97,43 @@ export default function AdminPostsPage() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- 仅随 tab/search/ready 刷新
|
||||
}, [ready, search, tab]);
|
||||
|
||||
// 从通知深链 ?id= 定位并高亮
|
||||
useEffect(() => {
|
||||
if (!ready || loading || focusId <= 0 || focusTriedRef.current) return;
|
||||
if (tab === 'trash') return;
|
||||
|
||||
const found = posts.find((p) => p.id === focusId);
|
||||
if (found) {
|
||||
focusTriedRef.current = true;
|
||||
setHighlightId(focusId);
|
||||
requestAnimationFrame(() => {
|
||||
document.getElementById(`admin-post-row-${focusId}`)?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
});
|
||||
clearTimeout(highlightTimer.current);
|
||||
highlightTimer.current = setTimeout(() => setHighlightId(null), 2800);
|
||||
const next = new URLSearchParams(searchParams);
|
||||
next.delete('id');
|
||||
setSearchParams(next, { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (tab === 'pending') {
|
||||
setTab('active');
|
||||
return;
|
||||
}
|
||||
|
||||
focusTriedRef.current = true;
|
||||
notify.warning('该帖子可能已审核或不在当前列表');
|
||||
const next = new URLSearchParams(searchParams);
|
||||
next.delete('id');
|
||||
setSearchParams(next, { replace: true });
|
||||
}, [ready, loading, posts, focusId, tab, searchParams, setSearchParams]);
|
||||
|
||||
useEffect(() => () => clearTimeout(highlightTimer.current), []);
|
||||
|
||||
const switchTab = (next: Tab) => {
|
||||
if (next === tab) return;
|
||||
setTab(next);
|
||||
@@ -352,7 +394,11 @@ export default function AdminPostsPage() {
|
||||
{posts.map(p => {
|
||||
const edited = p.updated_at && isTimeDiffSignificant(p.created_at, p.updated_at);
|
||||
return (
|
||||
<tr key={p.id}>
|
||||
<tr
|
||||
key={p.id}
|
||||
id={`admin-post-row-${p.id}`}
|
||||
className={cn(highlightId === p.id && 'admin-row-highlight')}
|
||||
>
|
||||
<td>{p.id}</td>
|
||||
<td className="max-w-[200px] truncate">
|
||||
<button type="button" className="admin-text-link" onClick={() => nav(`/post/${p.id}`)}>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,6 @@
|
||||
import DOMPurify from 'dompurify';
|
||||
import { POST_CONTENT_PURIFY_CONFIG } from './postContent';
|
||||
import { enhanceCodeBlocks } from './enhanceCodeBlocks';
|
||||
|
||||
/** 转义 HTML 并保留换行 */
|
||||
function escapeWithBreaks(text: string): string {
|
||||
@@ -60,11 +61,15 @@ function processMentionsInHtml(html: string): string {
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/** 渲染评论内容：HTML 净化 + @提及高亮，兼容旧版纯文本 */
|
||||
/** 渲染评论内容：HTML 净化 + @提及高亮 + 代码块阅读态，兼容旧版纯文本 */
|
||||
export function renderCommentContent(content: string): string {
|
||||
if (isHtmlContent(content)) {
|
||||
const sanitized = DOMPurify.sanitize(content, POST_CONTENT_PURIFY_CONFIG) as string;
|
||||
return processMentionsInHtml(sanitized);
|
||||
const withMentions = processMentionsInHtml(sanitized);
|
||||
const doc = new DOMParser().parseFromString(`<div id="j13-comment-root">${withMentions}</div>`, 'text/html');
|
||||
const root = doc.getElementById('j13-comment-root') ?? doc.body;
|
||||
enhanceCodeBlocks(root);
|
||||
return root.innerHTML;
|
||||
}
|
||||
return highlightMentions(content);
|
||||
}
|
||||
@@ -89,6 +94,25 @@ export function formatTime(iso: string) {
|
||||
return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
|
||||
}
|
||||
|
||||
/** 会话列表时间：今天 HH:mm，同年 M月D日，更早含年 */
|
||||
export function formatConvListTime(iso: string) {
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return iso;
|
||||
const now = new Date();
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
if (
|
||||
d.getFullYear() === now.getFullYear()
|
||||
&& d.getMonth() === now.getMonth()
|
||||
&& d.getDate() === now.getDate()
|
||||
) {
|
||||
return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
if (d.getFullYear() === now.getFullYear()) {
|
||||
return `${d.getMonth() + 1}月${d.getDate()}日`;
|
||||
}
|
||||
return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
|
||||
}
|
||||
|
||||
/** 完整日期时间（用于帖子发布/修改时间展示） */
|
||||
export function formatDateTime(iso: string) {
|
||||
const d = new Date(iso);
|
||||
|
||||
@@ -177,3 +177,44 @@ export function enhanceCodeBlocks(root: ParentNode): void {
|
||||
if (display.lineNumbers) pre.classList.add('md-codeblock__pre--lines');
|
||||
});
|
||||
}
|
||||
|
||||
const CODE_FOLD_SHORT_LINES = 5;
|
||||
|
||||
/**
|
||||
* 阅读态代码块：折叠 / 复制。由帖子与评论共用，点击已处理时返回 true。
|
||||
*/
|
||||
export async function handleMdCodeBlockUiClick(target: EventTarget | null): Promise<boolean> {
|
||||
if (!(target instanceof Element)) return false;
|
||||
|
||||
const foldBtn = target.closest<HTMLElement>('[data-code-fold]');
|
||||
if (foldBtn) {
|
||||
const block = foldBtn.closest('.md-codeblock');
|
||||
if (!block) return true;
|
||||
const collapsed = block.classList.toggle('md-codeblock--collapsed');
|
||||
const lineCount = parseInt(block.getAttribute('data-line-count') || '0', 10)
|
||||
|| block.querySelectorAll('.md-code-line').length
|
||||
|| 1;
|
||||
if (collapsed && lineCount <= CODE_FOLD_SHORT_LINES) block.classList.add('md-codeblock--short');
|
||||
else block.classList.remove('md-codeblock--short');
|
||||
foldBtn.textContent = collapsed ? '展开' : '收起';
|
||||
return true;
|
||||
}
|
||||
|
||||
const copyBtn = target.closest<HTMLElement>('[data-code-copy]');
|
||||
if (!copyBtn) return false;
|
||||
|
||||
const block = copyBtn.closest('.md-codeblock');
|
||||
const bodies = block?.querySelectorAll('.md-code-line__body');
|
||||
const text = bodies && bodies.length
|
||||
? [...bodies].map(el => el.textContent ?? '').join('\n')
|
||||
: (block?.querySelector('pre')?.textContent ?? '');
|
||||
await navigator.clipboard.writeText(text);
|
||||
const prev = copyBtn.textContent;
|
||||
copyBtn.textContent = '已复制';
|
||||
copyBtn.classList.add('is-copied');
|
||||
window.setTimeout(() => {
|
||||
copyBtn.textContent = prev || '复制';
|
||||
copyBtn.classList.remove('is-copied');
|
||||
}, 1600);
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ export type HomeBootPayload = {
|
||||
recent_comments: RecentComment[];
|
||||
recent_users: RecentUser[];
|
||||
tags: TagCount[];
|
||||
showcase: CommunityShowcaseItem[];
|
||||
showcase?: CommunityShowcaseItem[];
|
||||
pages: SitePageSummary[];
|
||||
limits: ForumLimitsPublic;
|
||||
branding: SiteBranding;
|
||||
@@ -77,7 +77,10 @@ export function consumeHomeBoot(): HomeBootPayload | null {
|
||||
if (Array.isArray(boot.recent_comments)) setCachedRecentComments(boot.recent_comments);
|
||||
if (Array.isArray(boot.recent_users)) setCachedRecentUsers(boot.recent_users);
|
||||
if (Array.isArray(boot.tags)) setCachedTags(boot.tags);
|
||||
if (Array.isArray(boot.showcase)) setSessionSnapshot('showcase', boot.showcase);
|
||||
// 仅当 boot 显式带 showcase 时灌入（侧栏关闭时省略，避免 [] 粘死）
|
||||
if ('showcase' in boot && Array.isArray(boot.showcase)) {
|
||||
setSessionSnapshot('showcase', boot.showcase);
|
||||
}
|
||||
|
||||
// 鉴权 / 签到：有 user 字段即种子（含 null = 已确认访客）
|
||||
if ('user' in boot) {
|
||||
|
||||
@@ -421,13 +421,18 @@ func (h *Handlers) APIAdminRejectComment(c *gin.Context) {
|
||||
title = "未知帖子"
|
||||
}
|
||||
pid := comment.PostID
|
||||
_, _ = h.Message.SendSystem(
|
||||
cid := comment.ID
|
||||
floor := comment.Floor
|
||||
_, _ = h.Message.SendSystemWithRefs(
|
||||
comment.UserID,
|
||||
"评论未通过审核",
|
||||
service.FormatCommentRejectContent(title, comment.PostID, comment.Floor, reason),
|
||||
model.MessageKindReject,
|
||||
&pid,
|
||||
nil,
|
||||
service.SystemNotifyRefs{
|
||||
PostID: &pid,
|
||||
CommentID: &cid,
|
||||
Floor: &floor,
|
||||
},
|
||||
)
|
||||
}
|
||||
c.JSON(http.StatusOK, gin.H{"message": "已拒绝该评论并通知作者", "status": model.ContentStatusRejected})
|
||||
|
||||
@@ -136,6 +136,20 @@ func (h *Handlers) APIMarkNotificationsRead(c *gin.Context) {
|
||||
c.JSON(http.StatusOK, gin.H{"message": "通知已全部标为已读"})
|
||||
}
|
||||
|
||||
// APIMarkMessageRead 单条消息已读
|
||||
func (h *Handlers) APIMarkMessageRead(c *gin.Context) {
|
||||
id, err := strconv.ParseUint(c.Param("id"), 10, 64)
|
||||
if err != nil || id == 0 {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的消息"})
|
||||
return
|
||||
}
|
||||
if err := h.Message.MarkMessageRead(h.currentUserID(c), uint(id)); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||
return
|
||||
}
|
||||
c.JSON(http.StatusOK, gin.H{"message": "已标为已读"})
|
||||
}
|
||||
|
||||
// APISendMessage 发送私信
|
||||
func (h *Handlers) APISendMessage(c *gin.Context) {
|
||||
var req struct {
|
||||
|
||||
@@ -36,7 +36,8 @@ type homeBootPayload struct {
|
||||
RecentComments []service.RecentCommentItem `json:"recent_comments"`
|
||||
RecentUsers []service.RecentUserItem `json:"recent_users"`
|
||||
Tags []service.TagCount `json:"tags"`
|
||||
Showcase []service.CommunityShowcaseItem `json:"showcase"`
|
||||
// omitempty：侧栏关闭或未拉取时不写字段，避免 SPA 把 [] 当成有效会话快照
|
||||
Showcase []service.CommunityShowcaseItem `json:"showcase,omitempty"`
|
||||
Pages []service.SitePageSummary `json:"pages"`
|
||||
Limits service.ForumLimitsPublic `json:"limits"`
|
||||
Branding service.SiteBranding `json:"branding"`
|
||||
@@ -261,13 +262,15 @@ func (h *Handlers) gatherHomeSSR(c *gin.Context, boardID uint) (*homeSSRData, er
|
||||
go func() {
|
||||
defer wg.Done()
|
||||
items, err := h.Community.ListShowcase(c.Request.Host)
|
||||
if err != nil || items == nil {
|
||||
if err != nil {
|
||||
// 失败不写 showcase，让前端自行请求，避免假空粘死
|
||||
return
|
||||
}
|
||||
if items == nil {
|
||||
items = []service.CommunityShowcaseItem{}
|
||||
}
|
||||
out.boot.Showcase = items
|
||||
}()
|
||||
} else {
|
||||
out.boot.Showcase = []service.CommunityShowcaseItem{}
|
||||
}
|
||||
|
||||
uid := h.currentUserID(c)
|
||||
|
||||
@@ -234,8 +234,12 @@ type PrivateMessage struct {
|
||||
Kind string `gorm:"size:32;default:user;index" json:"kind"`
|
||||
RelatedPostID *uint `gorm:"index" json:"related_post_id,omitempty"`
|
||||
RelatedReportID *uint `gorm:"index" json:"related_report_id,omitempty"`
|
||||
RelatedCommentID *uint `gorm:"index" json:"related_comment_id,omitempty"`
|
||||
RelatedFloor *int `json:"related_floor,omitempty"` // 评论自身楼号，对应 #floor-N
|
||||
IsRead bool `gorm:"default:false;index" json:"is_read"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
// RelatedStatus 列表接口实时回填：pending|published|rejected|deleted（不落库）
|
||||
RelatedStatus string `json:"related_status,omitempty" gorm:"-"`
|
||||
|
||||
FromUser User `gorm:"foreignKey:FromUserID" json:"from_user,omitempty"`
|
||||
ToUser User `gorm:"foreignKey:ToUserID" json:"to_user,omitempty"`
|
||||
|
||||
@@ -195,6 +195,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
|
||||
api.GET("/messages/unread-count", h.APIMessageUnreadCount)
|
||||
api.GET("/messages/notifications", h.APIMessageNotifications)
|
||||
api.POST("/messages/notifications/read", h.APIMarkNotificationsRead)
|
||||
api.POST("/messages/:id/read", h.APIMarkMessageRead)
|
||||
api.GET("/messages/conversations", h.APIMessageConversations)
|
||||
api.GET("/messages/conversations/:peerId", h.APIConversationMessages)
|
||||
api.POST("/messages/conversations/:peerId/read", h.APIMarkConversationRead)
|
||||
|
||||
@@ -3,11 +3,13 @@ package service
|
||||
import (
|
||||
"errors"
|
||||
"fmt"
|
||||
"regexp"
|
||||
"strings"
|
||||
"time"
|
||||
"unicode/utf8"
|
||||
|
||||
"git.iioio.com/freefire/jiang13-forum/model"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
var (
|
||||
@@ -31,6 +33,8 @@ type MessageSendInput struct {
|
||||
Kind string
|
||||
RelatedPostID *uint
|
||||
RelatedReportID *uint
|
||||
RelatedCommentID *uint
|
||||
RelatedFloor *int
|
||||
}
|
||||
|
||||
// Send 发送私信（用户互发或系统通知）
|
||||
@@ -89,6 +93,8 @@ func (s *MessageService) Send(in MessageSendInput) (*model.PrivateMessage, error
|
||||
Kind: kind,
|
||||
RelatedPostID: in.RelatedPostID,
|
||||
RelatedReportID: in.RelatedReportID,
|
||||
RelatedCommentID: in.RelatedCommentID,
|
||||
RelatedFloor: in.RelatedFloor,
|
||||
IsRead: false,
|
||||
}
|
||||
if err := model.DB.Create(msg).Error; err != nil {
|
||||
@@ -98,8 +104,24 @@ func (s *MessageService) Send(in MessageSendInput) (*model.PrivateMessage, error
|
||||
return msg, nil
|
||||
}
|
||||
|
||||
// SystemNotifyRefs 系统通知关联目标（帖子 / 评论 / 举报）
|
||||
type SystemNotifyRefs struct {
|
||||
PostID *uint
|
||||
ReportID *uint
|
||||
CommentID *uint
|
||||
Floor *int
|
||||
}
|
||||
|
||||
// SendSystem 系统私信（管理员/系统 → 用户）
|
||||
func (s *MessageService) SendSystem(toUserID uint, subject, content, kind string, relatedPostID, relatedReportID *uint) (*model.PrivateMessage, error) {
|
||||
return s.SendSystemWithRefs(toUserID, subject, content, kind, SystemNotifyRefs{
|
||||
PostID: relatedPostID,
|
||||
ReportID: relatedReportID,
|
||||
})
|
||||
}
|
||||
|
||||
// SendSystemWithRefs 系统私信（可附带评论楼层深链）
|
||||
func (s *MessageService) SendSystemWithRefs(toUserID uint, subject, content, kind string, refs SystemNotifyRefs) (*model.PrivateMessage, error) {
|
||||
if kind == "" {
|
||||
kind = model.MessageKindSystem
|
||||
}
|
||||
@@ -109,11 +131,27 @@ func (s *MessageService) SendSystem(toUserID uint, subject, content, kind string
|
||||
Subject: subject,
|
||||
Content: content,
|
||||
Kind: kind,
|
||||
RelatedPostID: relatedPostID,
|
||||
RelatedReportID: relatedReportID,
|
||||
RelatedPostID: refs.PostID,
|
||||
RelatedReportID: refs.ReportID,
|
||||
RelatedCommentID: refs.CommentID,
|
||||
RelatedFloor: refs.Floor,
|
||||
})
|
||||
}
|
||||
|
||||
// MarkMessageRead 将单条消息标为已读（仅收件人本人）
|
||||
func (s *MessageService) MarkMessageRead(userID, messageID uint) error {
|
||||
if messageID == 0 {
|
||||
return errors.New("无效的消息")
|
||||
}
|
||||
res := model.DB.Model(&model.PrivateMessage{}).
|
||||
Where("id = ? AND to_user_id = ? AND is_read = ?", messageID, userID, false).
|
||||
Update("is_read", true)
|
||||
if res.Error != nil {
|
||||
return res.Error
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
// MarkAllRead 全部标为已读
|
||||
func (s *MessageService) MarkAllRead(userID uint) error {
|
||||
return model.DB.Model(&model.PrivateMessage{}).
|
||||
@@ -175,9 +213,212 @@ func (s *MessageService) ListNotifications(userID uint, page, size int, kind str
|
||||
if list == nil {
|
||||
list = []model.PrivateMessage{}
|
||||
}
|
||||
s.enrichModerationStatus(list)
|
||||
return list, total, nil
|
||||
}
|
||||
|
||||
// enrichModerationStatus 为待审通知回填目标当前审核状态
|
||||
func (s *MessageService) enrichModerationStatus(list []model.PrivateMessage) {
|
||||
if len(list) == 0 {
|
||||
return
|
||||
}
|
||||
|
||||
resolvedByIndex := enrichModerationCommentIDs(list)
|
||||
|
||||
commentIDs := make([]uint, 0, len(list))
|
||||
postIDs := make([]uint, 0, len(list))
|
||||
// 历史评论通知：按帖+楼层回查（兜底）
|
||||
type pfKey struct {
|
||||
PostID uint
|
||||
Floor int
|
||||
}
|
||||
pfNeeded := make([]pfKey, 0, len(list))
|
||||
seenC := map[uint]struct{}{}
|
||||
seenP := map[uint]struct{}{}
|
||||
seenPF := map[pfKey]struct{}{}
|
||||
|
||||
for i := range list {
|
||||
m := &list[i]
|
||||
if m.Kind != model.MessageKindModeration {
|
||||
continue
|
||||
}
|
||||
if m.RelatedCommentID != nil && *m.RelatedCommentID > 0 {
|
||||
id := *m.RelatedCommentID
|
||||
if _, ok := seenC[id]; !ok {
|
||||
seenC[id] = struct{}{}
|
||||
commentIDs = append(commentIDs, id)
|
||||
}
|
||||
continue
|
||||
}
|
||||
if cid, ok := resolvedByIndex[i]; ok && cid > 0 {
|
||||
if _, ok := seenC[cid]; !ok {
|
||||
seenC[cid] = struct{}{}
|
||||
commentIDs = append(commentIDs, cid)
|
||||
}
|
||||
continue
|
||||
}
|
||||
if m.RelatedPostID == nil || *m.RelatedPostID == 0 {
|
||||
continue
|
||||
}
|
||||
pid := *m.RelatedPostID
|
||||
if looksLikeModerationComment(m.Subject, m.Content) {
|
||||
floor := 0
|
||||
if m.RelatedFloor != nil && *m.RelatedFloor > 0 {
|
||||
floor = *m.RelatedFloor
|
||||
} else {
|
||||
floor = parseNotifyFloor(m.Content)
|
||||
}
|
||||
if floor > 0 {
|
||||
k := pfKey{PostID: pid, Floor: floor}
|
||||
if _, ok := seenPF[k]; !ok {
|
||||
seenPF[k] = struct{}{}
|
||||
pfNeeded = append(pfNeeded, k)
|
||||
}
|
||||
}
|
||||
continue
|
||||
}
|
||||
if _, ok := seenP[pid]; !ok {
|
||||
seenP[pid] = struct{}{}
|
||||
postIDs = append(postIDs, pid)
|
||||
}
|
||||
}
|
||||
|
||||
commentStatus := map[uint]string{}
|
||||
if len(commentIDs) > 0 {
|
||||
type row struct {
|
||||
ID uint
|
||||
Status string
|
||||
DeletedAt gorm.DeletedAt
|
||||
}
|
||||
var rows []row
|
||||
_ = model.DB.Unscoped().Model(&model.Comment{}).
|
||||
Select("id", "status", "deleted_at").
|
||||
Where("id IN ?", commentIDs).
|
||||
Find(&rows)
|
||||
for _, r := range rows {
|
||||
commentStatus[r.ID] = contentStatusOrDeleted(r.Status, r.DeletedAt)
|
||||
}
|
||||
for _, id := range commentIDs {
|
||||
if _, ok := commentStatus[id]; !ok {
|
||||
commentStatus[id] = "deleted"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
statusByPF := map[pfKey]string{}
|
||||
if len(pfNeeded) > 0 {
|
||||
postSet := map[uint]struct{}{}
|
||||
for _, k := range pfNeeded {
|
||||
postSet[k.PostID] = struct{}{}
|
||||
}
|
||||
pids := make([]uint, 0, len(postSet))
|
||||
for id := range postSet {
|
||||
pids = append(pids, id)
|
||||
}
|
||||
type row struct {
|
||||
PostID uint
|
||||
Floor int
|
||||
Status string
|
||||
DeletedAt gorm.DeletedAt
|
||||
}
|
||||
var rows []row
|
||||
_ = model.DB.Unscoped().Model(&model.Comment{}).
|
||||
Select("post_id", "floor", "status", "deleted_at").
|
||||
Where("post_id IN ?", pids).
|
||||
Find(&rows)
|
||||
for _, r := range rows {
|
||||
k := pfKey{PostID: r.PostID, Floor: r.Floor}
|
||||
// 同楼多条时后者覆盖；正常业务一帖一楼唯一
|
||||
statusByPF[k] = contentStatusOrDeleted(r.Status, r.DeletedAt)
|
||||
}
|
||||
for _, k := range pfNeeded {
|
||||
if _, ok := statusByPF[k]; !ok {
|
||||
statusByPF[k] = "deleted"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
postStatus := map[uint]string{}
|
||||
if len(postIDs) > 0 {
|
||||
type row struct {
|
||||
ID uint
|
||||
Status string
|
||||
DeletedAt gorm.DeletedAt
|
||||
}
|
||||
var rows []row
|
||||
_ = model.DB.Unscoped().Model(&model.Post{}).
|
||||
Select("id", "status", "deleted_at").
|
||||
Where("id IN ?", postIDs).
|
||||
Find(&rows)
|
||||
for _, r := range rows {
|
||||
postStatus[r.ID] = contentStatusOrDeleted(r.Status, r.DeletedAt)
|
||||
}
|
||||
for _, id := range postIDs {
|
||||
if _, ok := postStatus[id]; !ok {
|
||||
postStatus[id] = "deleted"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for i := range list {
|
||||
m := &list[i]
|
||||
if m.Kind != model.MessageKindModeration {
|
||||
continue
|
||||
}
|
||||
if m.RelatedCommentID != nil && *m.RelatedCommentID > 0 {
|
||||
m.RelatedStatus = commentStatus[*m.RelatedCommentID]
|
||||
continue
|
||||
}
|
||||
if cid, ok := resolvedByIndex[i]; ok && cid > 0 {
|
||||
m.RelatedStatus = commentStatus[cid]
|
||||
continue
|
||||
}
|
||||
if m.RelatedPostID == nil || *m.RelatedPostID == 0 {
|
||||
continue
|
||||
}
|
||||
pid := *m.RelatedPostID
|
||||
if looksLikeModerationComment(m.Subject, m.Content) {
|
||||
floor := 0
|
||||
if m.RelatedFloor != nil && *m.RelatedFloor > 0 {
|
||||
floor = *m.RelatedFloor
|
||||
} else {
|
||||
floor = parseNotifyFloor(m.Content)
|
||||
}
|
||||
if floor > 0 {
|
||||
m.RelatedStatus = statusByPF[pfKey{PostID: pid, Floor: floor}]
|
||||
}
|
||||
continue
|
||||
}
|
||||
m.RelatedStatus = postStatus[pid]
|
||||
}
|
||||
}
|
||||
|
||||
var notifyFloorRe = regexp.MustCompile(`#(\d+)\s*楼`)
|
||||
|
||||
// parseNotifyFloor 从待审评论文案解析楼号（如「#2 楼评论」「#1 楼下」）
|
||||
func parseNotifyFloor(content string) int {
|
||||
m := notifyFloorRe.FindStringSubmatch(content)
|
||||
if len(m) < 2 {
|
||||
return 0
|
||||
}
|
||||
var n int
|
||||
_, _ = fmt.Sscanf(m[1], "%d", &n)
|
||||
if n < 0 {
|
||||
return 0
|
||||
}
|
||||
return n
|
||||
}
|
||||
|
||||
func contentStatusOrDeleted(status string, deletedAt gorm.DeletedAt) string {
|
||||
if deletedAt.Valid {
|
||||
return "deleted"
|
||||
}
|
||||
if status != "" {
|
||||
return status
|
||||
}
|
||||
return model.ContentStatusPublished
|
||||
}
|
||||
|
||||
// MarkNotificationsRead 将系统通知全部标为已读
|
||||
func (s *MessageService) MarkNotificationsRead(userID uint) error {
|
||||
return s.MarkConversationRead(userID, 0)
|
||||
|
||||
166
service/message_moderation.go
Normal file
166
service/message_moderation.go
Normal file
@@ -0,0 +1,166 @@
|
||||
package service
|
||||
|
||||
import (
|
||||
"math"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"git.iioio.com/freefire/jiang13-forum/model"
|
||||
)
|
||||
|
||||
// looksLikeModerationComment 判断待审通知是否指向评论（含嵌套回复）
|
||||
func looksLikeModerationComment(subject, content string) bool {
|
||||
if strings.Contains(subject, "评论") || strings.Contains(content, "评论") {
|
||||
return true
|
||||
}
|
||||
return strings.Contains(content, "回复") || strings.Contains(content, "楼下")
|
||||
}
|
||||
|
||||
// isNestedModerationContent 嵌套回复待审（正文为「#N 楼下…」）
|
||||
func isNestedModerationContent(content string) bool {
|
||||
return strings.Contains(content, "楼下")
|
||||
}
|
||||
|
||||
// resolveModerationCommentRef 为历史待审评论通知推断目标评论 ID 与自身楼号
|
||||
func resolveModerationCommentRef(postID uint, content string, notifyAt time.Time) (commentID uint, floor int) {
|
||||
if postID == 0 || model.DB == nil {
|
||||
return 0, 0
|
||||
}
|
||||
displayFloor := parseNotifyFloor(content)
|
||||
if displayFloor <= 0 {
|
||||
return 0, 0
|
||||
}
|
||||
|
||||
if isNestedModerationContent(content) {
|
||||
var parent struct {
|
||||
ID uint
|
||||
}
|
||||
err := model.DB.Unscoped().Model(&model.Comment{}).
|
||||
Select("id").
|
||||
Where("post_id = ? AND floor = ?", postID, displayFloor).
|
||||
First(&parent).Error
|
||||
if err != nil || parent.ID == 0 {
|
||||
return 0, 0
|
||||
}
|
||||
|
||||
type childRow struct {
|
||||
ID uint
|
||||
Floor int
|
||||
CreatedAt time.Time
|
||||
}
|
||||
var children []childRow
|
||||
_ = model.DB.Unscoped().Model(&model.Comment{}).
|
||||
Select("id", "floor", "created_at").
|
||||
Where("post_id = ? AND reply_to = ?", postID, parent.ID).
|
||||
Find(&children).Error
|
||||
if len(children) == 0 {
|
||||
return 0, 0
|
||||
}
|
||||
if len(children) == 1 {
|
||||
return children[0].ID, children[0].Floor
|
||||
}
|
||||
best := children[0]
|
||||
bestDiff := math.MaxFloat64
|
||||
for _, c := range children {
|
||||
diff := math.Abs(float64(c.CreatedAt.Sub(notifyAt)))
|
||||
if diff < bestDiff {
|
||||
bestDiff = diff
|
||||
best = c
|
||||
}
|
||||
}
|
||||
// 通知与评论创建时间相差超过 7 天则放弃，避免误配旧回复
|
||||
if bestDiff > float64(7*24*time.Hour) {
|
||||
return 0, 0
|
||||
}
|
||||
return best.ID, best.Floor
|
||||
}
|
||||
|
||||
var row struct {
|
||||
ID uint
|
||||
Floor int
|
||||
}
|
||||
err := model.DB.Unscoped().Model(&model.Comment{}).
|
||||
Select("id", "floor").
|
||||
Where("post_id = ? AND floor = ?", postID, displayFloor).
|
||||
First(&row).Error
|
||||
if err != nil || row.ID == 0 {
|
||||
return 0, 0
|
||||
}
|
||||
return row.ID, row.Floor
|
||||
}
|
||||
|
||||
// BackfillModerationNotifyRefs 为历史 moderation 通知补写 related_comment_id / related_floor
|
||||
func BackfillModerationNotifyRefs() error {
|
||||
if model.DB == nil {
|
||||
return nil
|
||||
}
|
||||
var rows []model.PrivateMessage
|
||||
err := model.DB.Where("kind = ? AND (related_comment_id IS NULL OR related_comment_id = 0)", model.MessageKindModeration).
|
||||
Find(&rows).Error
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
for _, m := range rows {
|
||||
if m.RelatedPostID == nil || *m.RelatedPostID == 0 {
|
||||
continue
|
||||
}
|
||||
if !looksLikeModerationComment(m.Subject, m.Content) {
|
||||
continue
|
||||
}
|
||||
cid, fl := resolveModerationCommentRef(*m.RelatedPostID, m.Content, m.CreatedAt)
|
||||
if cid == 0 {
|
||||
continue
|
||||
}
|
||||
floor := fl
|
||||
updates := map[string]interface{}{
|
||||
"related_comment_id": cid,
|
||||
"related_floor": floor,
|
||||
}
|
||||
_ = model.DB.Model(&model.PrivateMessage{}).Where("id = ?", m.ID).Updates(updates).Error
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
// enrichModerationCommentIDs 为无 related_comment_id 的评论类待审通知解析评论 ID
|
||||
func enrichModerationCommentIDs(list []model.PrivateMessage) map[int]uint {
|
||||
out := make(map[int]uint)
|
||||
for i := range list {
|
||||
m := &list[i]
|
||||
if m.Kind != model.MessageKindModeration {
|
||||
continue
|
||||
}
|
||||
if m.RelatedCommentID != nil && *m.RelatedCommentID > 0 {
|
||||
continue
|
||||
}
|
||||
if m.RelatedPostID == nil || *m.RelatedPostID == 0 {
|
||||
continue
|
||||
}
|
||||
if !looksLikeModerationComment(m.Subject, m.Content) {
|
||||
continue
|
||||
}
|
||||
// 嵌套回复优先按子评论匹配，避免 displayFloor 查到父评论状态
|
||||
if isNestedModerationContent(m.Content) {
|
||||
cid, _ := resolveModerationCommentRef(*m.RelatedPostID, m.Content, m.CreatedAt)
|
||||
if cid > 0 {
|
||||
out[i] = cid
|
||||
}
|
||||
continue
|
||||
}
|
||||
// 顶层评论：有 related_floor 时按楼号查 ID
|
||||
if m.RelatedFloor != nil && *m.RelatedFloor > 0 {
|
||||
var row struct{ ID uint }
|
||||
if err := model.DB.Unscoped().Model(&model.Comment{}).
|
||||
Select("id").
|
||||
Where("post_id = ? AND floor = ?", *m.RelatedPostID, *m.RelatedFloor).
|
||||
First(&row).Error; err == nil && row.ID > 0 {
|
||||
out[i] = row.ID
|
||||
}
|
||||
continue
|
||||
}
|
||||
cid, _ := resolveModerationCommentRef(*m.RelatedPostID, m.Content, m.CreatedAt)
|
||||
if cid > 0 {
|
||||
out[i] = cid
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
61
service/message_moderation_integration_test.go
Normal file
61
service/message_moderation_integration_test.go
Normal file
@@ -0,0 +1,61 @@
|
||||
package service
|
||||
|
||||
import (
|
||||
"os"
|
||||
"path/filepath"
|
||||
"testing"
|
||||
|
||||
"git.iioio.com/freefire/jiang13-forum/model"
|
||||
"github.com/glebarez/sqlite"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
// TestProductionDBModerationEnrich 用本地生产库拷贝验证 related_status 回填（无库则跳过）
|
||||
func TestProductionDBModerationEnrich(t *testing.T) {
|
||||
dbPath := filepath.Join("..", "dist", "data", "jiang13.db")
|
||||
if _, err := os.Stat(dbPath); err != nil {
|
||||
t.Skip("dist/data/jiang13.db 不存在，跳过")
|
||||
}
|
||||
|
||||
db, err := gorm.Open(sqlite.Open(dbPath), &gorm.Config{})
|
||||
if err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
model.DB = db
|
||||
|
||||
if err := BackfillModerationNotifyRefs(); err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
|
||||
var adminID uint
|
||||
if err := db.Model(&model.User{}).Where("role = ?", model.RoleAdmin).Order("id asc").Limit(1).Pluck("id", &adminID).Error; err != nil || adminID == 0 {
|
||||
t.Skip("无管理员用户，跳过")
|
||||
}
|
||||
|
||||
svc := &MessageService{}
|
||||
list, _, err := svc.ListNotifications(adminID, 1, 100, "moderation")
|
||||
if err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
if len(list) == 0 {
|
||||
t.Skip("无 moderation 通知")
|
||||
}
|
||||
|
||||
pendingUI := 0
|
||||
published := 0
|
||||
for _, m := range list {
|
||||
if m.RelatedStatus == model.ContentStatusPublished {
|
||||
published++
|
||||
} else if m.RelatedStatus == "" || m.RelatedStatus == model.ContentStatusPending {
|
||||
pendingUI++
|
||||
t.Logf("仍无 published 状态: id=%d subject=%q status=%q content=%q", m.ID, m.Subject, m.RelatedStatus, m.Content)
|
||||
}
|
||||
}
|
||||
t.Logf("moderation=%d published=%d pending_or_empty=%d", len(list), published, pendingUI)
|
||||
if published == 0 {
|
||||
t.Fatal("没有任何 moderation 通知回填为 published")
|
||||
}
|
||||
if pendingUI > 0 {
|
||||
t.Fatalf("%d 条通知仍会被 UI 判为待审", pendingUI)
|
||||
}
|
||||
}
|
||||
102
service/message_moderation_test.go
Normal file
102
service/message_moderation_test.go
Normal file
@@ -0,0 +1,102 @@
|
||||
package service
|
||||
|
||||
import (
|
||||
"testing"
|
||||
"time"
|
||||
|
||||
"git.iioio.com/freefire/jiang13-forum/model"
|
||||
"github.com/glebarez/sqlite"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
func TestParseNotifyFloor(t *testing.T) {
|
||||
cases := map[string]int{
|
||||
"用户 X 在《Y》提交了待审核 #2 楼评论": 2,
|
||||
"用户 X 在《Y》#3 楼下提交了待审核回复": 3,
|
||||
"无楼号": 0,
|
||||
}
|
||||
for content, want := range cases {
|
||||
if got := parseNotifyFloor(content); got != want {
|
||||
t.Errorf("parseNotifyFloor(%q) = %d, want %d", content, got, want)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func TestEnrichModerationStatusPublished(t *testing.T) {
|
||||
db, err := gorm.Open(sqlite.Open(":memory:"), &gorm.Config{})
|
||||
if err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
if err := db.AutoMigrate(&model.User{}, &model.Post{}, &model.Comment{}, &model.PrivateMessage{}); err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
model.DB = db
|
||||
|
||||
post := model.Post{Title: "测试帖", Status: model.ContentStatusPublished, UserID: 1}
|
||||
if err := db.Create(&post).Error; err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
comment := model.Comment{
|
||||
PostID: post.ID, UserID: 2, Floor: 2,
|
||||
Status: model.ContentStatusPublished,
|
||||
}
|
||||
if err := db.Create(&comment).Error; err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
|
||||
pid := post.ID
|
||||
msg := model.PrivateMessage{
|
||||
FromUserID: 0,
|
||||
ToUserID: 1,
|
||||
Subject: "新的待审核评论",
|
||||
Content: "用户 A 在《测试帖》提交了待审核 #2 楼评论",
|
||||
Kind: model.MessageKindModeration,
|
||||
RelatedPostID: &pid,
|
||||
CreatedAt: time.Now(),
|
||||
}
|
||||
if err := db.Create(&msg).Error; err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
|
||||
svc := &MessageService{}
|
||||
list := []model.PrivateMessage{msg}
|
||||
svc.enrichModerationStatus(list)
|
||||
if list[0].RelatedStatus != model.ContentStatusPublished {
|
||||
t.Fatalf("RelatedStatus = %q, want published", list[0].RelatedStatus)
|
||||
}
|
||||
}
|
||||
|
||||
func TestResolveNestedModerationCommentRef(t *testing.T) {
|
||||
db, err := gorm.Open(sqlite.Open(":memory:"), &gorm.Config{})
|
||||
if err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
if err := db.AutoMigrate(&model.Post{}, &model.Comment{}); err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
model.DB = db
|
||||
|
||||
post := model.Post{Title: "嵌套", Status: model.ContentStatusPublished}
|
||||
if err := db.Create(&post).Error; err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
parent := model.Comment{PostID: post.ID, Floor: 1, Status: model.ContentStatusPublished}
|
||||
child := model.Comment{
|
||||
PostID: post.ID, Floor: 3, Status: model.ContentStatusPublished,
|
||||
}
|
||||
if err := db.Create(&parent).Error; err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
rt := parent.ID
|
||||
child.ReplyTo = &rt
|
||||
child.CreatedAt = time.Now()
|
||||
if err := db.Create(&child).Error; err != nil {
|
||||
t.Fatal(err)
|
||||
}
|
||||
|
||||
notifyAt := child.CreatedAt.Add(2 * time.Second)
|
||||
cid, floor := resolveModerationCommentRef(post.ID, "用户 A 在《嵌套》#1 楼下提交了待审核回复", notifyAt)
|
||||
if cid != child.ID || floor != 3 {
|
||||
t.Fatalf("resolve = (%d, %d), want (%d, 3)", cid, floor, child.ID)
|
||||
}
|
||||
}
|
||||
@@ -96,9 +96,15 @@ func (s *NotifyService) NotifyCommentPublished(comment *model.Comment) {
|
||||
subject := "收到新回复"
|
||||
content := FormatReplyContent(authorName, title, displayFloor, isNested)
|
||||
pid := comment.PostID
|
||||
_, _ = s.messages.SendSystem(toUserID, subject, content, model.MessageKindReply, &pid, nil)
|
||||
cid := comment.ID
|
||||
floor := comment.Floor
|
||||
_, _ = s.messages.SendSystemWithRefs(toUserID, subject, content, model.MessageKindReply, SystemNotifyRefs{
|
||||
PostID: &pid,
|
||||
CommentID: &cid,
|
||||
Floor: &floor,
|
||||
})
|
||||
|
||||
s.sendReplyMail(toUserID, authorName, title, comment.PostID, displayFloor, isNested, comment.Content)
|
||||
s.sendReplyMail(toUserID, authorName, title, comment.PostID, comment.Floor, displayFloor, isNested, comment.Content)
|
||||
}
|
||||
|
||||
// NotifyCommentMentions 评论公开后通知被 @提及的用户（跳过已收到回复通知的人）
|
||||
@@ -125,6 +131,8 @@ func (s *NotifyService) NotifyCommentMentions(comment *model.Comment) {
|
||||
}
|
||||
displayFloor := s.resolveDisplayFloor(comment)
|
||||
pid := comment.PostID
|
||||
cid := comment.ID
|
||||
floor := comment.Floor
|
||||
subject := "有人 @了你"
|
||||
content := FormatMentionContent(authorName, title, displayFloor)
|
||||
|
||||
@@ -132,7 +140,11 @@ func (s *NotifyService) NotifyCommentMentions(comment *model.Comment) {
|
||||
if uid == 0 || uid == comment.UserID || uid == replyTo {
|
||||
continue
|
||||
}
|
||||
_, _ = s.messages.SendSystem(uid, subject, content, model.MessageKindMention, &pid, nil)
|
||||
_, _ = s.messages.SendSystemWithRefs(uid, subject, content, model.MessageKindMention, SystemNotifyRefs{
|
||||
PostID: &pid,
|
||||
CommentID: &cid,
|
||||
Floor: &floor,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,8 +161,9 @@ func (s *NotifyService) NotifyPendingPost(post *model.Post) {
|
||||
subject := "新的待审核帖子"
|
||||
content := FormatPendingPostContent(authorName, title, post.ID)
|
||||
pid := post.ID
|
||||
s.notifyAdmins(subject, content, model.MessageKindModeration, &pid, func(siteName, baseURL string) (string, string, string) {
|
||||
return BuildModerationMail(siteName, "帖子", authorName, title, post.ID, 0, false, AbsoluteURL(baseURL, "/admin/posts"))
|
||||
s.notifyAdmins(subject, content, model.MessageKindModeration, SystemNotifyRefs{PostID: &pid}, func(siteName, baseURL string) (string, string, string) {
|
||||
adminPath := fmt.Sprintf("/admin/posts?id=%d", post.ID)
|
||||
return BuildModerationMail(siteName, "帖子", authorName, title, post.ID, 0, false, AbsoluteURL(baseURL, adminPath))
|
||||
})
|
||||
}
|
||||
|
||||
@@ -173,14 +186,21 @@ func (s *NotifyService) NotifyPendingComment(comment *model.Comment) {
|
||||
isNested := comment.ReplyTo != nil && *comment.ReplyTo > 0
|
||||
content := FormatPendingCommentContent(authorName, title, displayFloor, isNested)
|
||||
pid := comment.PostID
|
||||
s.notifyAdmins(subject, content, model.MessageKindModeration, &pid, func(siteName, baseURL string) (string, string, string) {
|
||||
return BuildModerationMail(siteName, "评论", authorName, title, comment.PostID, displayFloor, isNested, AbsoluteURL(baseURL, "/admin/comments"))
|
||||
cid := comment.ID
|
||||
floor := comment.Floor
|
||||
adminPath := fmt.Sprintf("/admin/comments?id=%d", comment.ID)
|
||||
s.notifyAdmins(subject, content, model.MessageKindModeration, SystemNotifyRefs{
|
||||
PostID: &pid,
|
||||
CommentID: &cid,
|
||||
Floor: &floor,
|
||||
}, func(siteName, baseURL string) (string, string, string) {
|
||||
return BuildModerationMail(siteName, "评论", authorName, title, comment.PostID, displayFloor, isNested, AbsoluteURL(baseURL, adminPath))
|
||||
})
|
||||
}
|
||||
|
||||
func (s *NotifyService) notifyAdmins(
|
||||
subject, content, kind string,
|
||||
relatedPostID *uint,
|
||||
refs SystemNotifyRefs,
|
||||
buildMail func(siteName, baseURL string) (subj, text, html string),
|
||||
) {
|
||||
admins, err := s.listAdmins()
|
||||
@@ -197,7 +217,7 @@ func (s *NotifyService) notifyAdmins(
|
||||
}
|
||||
|
||||
for _, admin := range admins {
|
||||
_, _ = s.messages.SendSystem(admin.ID, subject, content, kind, relatedPostID, nil)
|
||||
_, _ = s.messages.SendSystemWithRefs(admin.ID, subject, content, kind, refs)
|
||||
email := strings.TrimSpace(admin.Email)
|
||||
if email == "" || mailSubj == "" {
|
||||
continue
|
||||
@@ -211,7 +231,7 @@ func (s *NotifyService) notifyAdmins(
|
||||
}
|
||||
}
|
||||
|
||||
func (s *NotifyService) sendReplyMail(toUserID uint, authorName, postTitle string, postID uint, displayFloor int, isNested bool, rawContent string) {
|
||||
func (s *NotifyService) sendReplyMail(toUserID uint, authorName, postTitle string, postID uint, ownFloor, displayFloor int, isNested bool, rawContent string) {
|
||||
if s.mail == nil || !s.settings.MailReady() {
|
||||
return
|
||||
}
|
||||
@@ -227,6 +247,10 @@ func (s *NotifyService) sendReplyMail(toUserID uint, authorName, postTitle strin
|
||||
baseURL := s.settings.SitePublicBaseURL("")
|
||||
postPath := s.settings.Permalink().PostPath(postID)
|
||||
link := AbsoluteURL(baseURL, postPath)
|
||||
// 直达评论自身楼层（嵌套回复也有独立 floor）
|
||||
if ownFloor > 0 {
|
||||
link = fmt.Sprintf("%s#floor-%d", link, ownFloor)
|
||||
}
|
||||
excerpt := truncateNotifyExcerpt(rawContent, 120)
|
||||
subj, text, html := BuildReplyMail(siteName, authorName, postTitle, displayFloor, isNested, excerpt, link)
|
||||
_ = s.mail.SendHTML(email, subj, text, html)
|
||||
|
||||
@@ -305,14 +305,20 @@ func (s *ReportService) Handle(in HandleReportInput) (*model.PostReport, error)
|
||||
if commentAuthorID > 0 {
|
||||
pid := postID
|
||||
rid := rep.ID
|
||||
cid := *rep.CommentID
|
||||
floor := commentFloor
|
||||
body := fmt.Sprintf("你在帖子《%s》下的评论（#%d）未通过审核。\n\n原因：\n%s", postTitle, commentFloor, reason)
|
||||
_, _ = s.messages.SendSystem(
|
||||
_, _ = s.messages.SendSystemWithRefs(
|
||||
commentAuthorID,
|
||||
fmt.Sprintf("评论未通过审核 · 《%s》", postTitle),
|
||||
body,
|
||||
model.MessageKindReject,
|
||||
&pid,
|
||||
&rid,
|
||||
SystemNotifyRefs{
|
||||
PostID: &pid,
|
||||
ReportID: &rid,
|
||||
CommentID: &cid,
|
||||
Floor: &floor,
|
||||
},
|
||||
)
|
||||
}
|
||||
default:
|
||||
@@ -345,13 +351,19 @@ func (s *ReportService) Handle(in HandleReportInput) (*model.PostReport, error)
|
||||
}
|
||||
pid := postID
|
||||
rid := rep.ID
|
||||
_, _ = s.messages.SendSystem(
|
||||
resultRefs := SystemNotifyRefs{PostID: &pid, ReportID: &rid}
|
||||
if isCommentReport && rep.CommentID != nil {
|
||||
cid := *rep.CommentID
|
||||
floor := commentFloor
|
||||
resultRefs.CommentID = &cid
|
||||
resultRefs.Floor = &floor
|
||||
}
|
||||
_, _ = s.messages.SendSystemWithRefs(
|
||||
rep.ReporterID,
|
||||
"举报处理结果通知",
|
||||
content,
|
||||
model.MessageKindReportResult,
|
||||
&pid,
|
||||
&rid,
|
||||
resultRefs,
|
||||
)
|
||||
|
||||
_ = model.DB.Preload("Post", func(tx *gorm.DB) *gorm.DB {
|
||||
|
||||
Reference in New Issue
Block a user