chore: 更新素材和组件优化

- 更新展品图片(鲁迅/毛泽东/孙中山/黄炎培/聂耳/张乐平故居)
- 新增点击查看图标、报纸素材
- 优化视频组件、拼图组件、展品组件
- 更新陈云音频资源
- 新增输入验证文档和工具函数
- 组件布局和动画优化

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
zhongyidianandClaude Opus 4.8 committed 2026-06-21 21:50:40 +08:00
1 parent 73d02eb62d
commit 73f6df92ce
130 files changed
+2345 -759

No files matched your search

+128
View File
@@ -0,0 +1,128 @@
# 信件输入校验功能说明
## 功能概述
为信件模板(`LetterTemplate.tsx`)的输入框添加了严格的内容校验,包括:
1. **禁止英文字母** - 自动过滤并提示
2. **禁止数字** - 自动过滤并提示
3. **禁止所有标点符号和特殊符号**(包括中文标点和英文标点)- 自动过滤并提示
4. **敏感词过滤** - 检测并替换为星号,提交时校验
## 实现细节
### 1. 核心函数(`src/lib/utils/sensitiveWords.ts`)
#### `filterInput(input: string): string`
实时过滤输入内容,在用户输入时自动去除:
- 英文字母(a-z, A-Z)
- 数字(0-9)
- 所有标点符号(包括中文标点:,。!?;:等)
- 所有特殊符号(@#$%^&*等)
- 敏感词(替换为星号)
#### `validateInput(input: string): { valid: boolean, message: string }`
提交时完整校验,返回详细的错误信息:
- 空内容检测
- 英文字母检测
- 数字检测
- 特殊符号检测
- 敏感词检测
#### 辅助函数
- `containsEnglish()` - 检测是否包含英文
- `containsNumber()` - 检测是否包含数字
- `containsSpecialChars()` - 检测是否包含标点符号或特殊符号(包括中文标点)
- `containsSensitiveWord()` - 检测是否包含敏感词
### 2. 敏感词库
已扩展的敏感词库包括:
- 基础不文明用语
- 暴力相关词汇
- 违法违规内容
- 歧视性用语
可根据实际需求在 `SENSITIVE_WORDS` 数组中扩展。
### 3. 用户体验
#### 实时过滤
用户输入时:
- **中文输入法支持**:在输入拼音时不会被过滤,等用户选择中文后才进行过滤
- **英文字母、数字、所有标点符号和特殊符号** 会被立即删除(用户无法输入)
- **敏感词** 会被替换为星号(例如:"垃圾" → "**")
- **中文字符** 可以正常输入
示例:
- 输入 "你好abc123世界" → 实时显示 "你好世界"
- 输入 "测试垃圾内容" → 实时显示 "测试**内容"
- 输入 "你好,世界!" → 实时显示 "你好世界"(标点被过滤)
- 使用中文输入法输入 "nihao" → 看到拼音 → 选择"你好" → 显示"你好" ✅
#### 提交校验
当用户点击提交时:
- 如果内容包含被禁止的字符或敏感词,会显示相应提示
- 错误的输入框会清空并标红
- 用户需要重新填写
#### 允许的内容
- ✅ 纯中文字符(汉字)
- ✅ 空格
- ❌ 英文字母(自动删除)
- ❌ 数字(自动删除)
- ❌ 所有标点符号(包括中文标点如,。!?;:等,自动删除)
- ❌ 所有特殊符号(@#$%^&*等,自动删除)
- ⚠️ 敏感词(替换为星号 * )
## 测试
所有校验函数都已通过测试:
- ✓ 英文字母检测和过滤
- ✓ 数字检测和过滤
- ✓ 特殊符号检测和过滤
- ✓ 敏感词检测和过滤
- ✓ 中文标点符号保留
- ✓ 完整的提交校验流程
## 使用示例
```typescript
import { filterInput, validateInput } from '@/lib/utils/sensitiveWords'
// 实时过滤
const handleChange = (value: string) => {
const filtered = filterInput(value) // 自动过滤英文、数字、特殊符号、敏感词
setValue(filtered)
}
// 提交前校验
const handleSubmit = () => {
const result = validateInput(value)
if (!result.valid) {
showHint(result.message)
return
}
// 继续提交逻辑
}
```
## 配置选项
在 `LetterFieldConfig` 中可以通过 `sanitize` 字段控制是否启用校验:
```typescript
const field: LetterFieldConfig = {
type: 'input',
sanitize: true, // 默认启用校验
// sanitize: false, // 禁用校验(不建议)
}
```
## 注意事项
1. **落款姓名** 也会进行相同的校验
2. **中文输入法支持** - 使用 `onCompositionStart` 和 `onCompositionEnd` 事件处理中文输入法,确保拼音输入过程不会被过滤
3. **敏感词库** 需要定期维护和更新
4. 如果需要添加更多敏感词,请在 `sensitiveWords.ts` 的 `SENSITIVE_WORDS` 数组中添加
5. 所有标点符号(包括中文标点)都会被过滤