430 lines
15 KiB
Markdown
430 lines
15 KiB
Markdown
# 多语言AI资讯系统 (Multilingual AI Information System)
|
||
|
||
基于 uni-app-x (UTS Android) 平台开发的多语言AI资讯系统，严格遵循 UTS Android 开发规范。
|
||
|
||
## 系统特性
|
||
|
||
### 核心功能
|
||
- **多语言支持**: 支持中文、英文、日文、韩文等多种语言
|
||
- **AI助手**: 集成智能聊天助手，提供内容推荐和分析
|
||
- **智能搜索**: 支持关键词搜索、分类筛选、高级过滤
|
||
- **响应式设计**: 兼容大屏和小屏设备，自适应布局
|
||
- ⚡ **高性能**: 基于 UTSJSONObject 优化，确保流畅体验
|
||
- **数据分析**: 内容质量评分、用户行为分析
|
||
|
||
### 技术特点
|
||
- 严格遵循 UTS Android 开发规范
|
||
- 全部使用 UTSJSONObject 作为核心数据结构
|
||
- 与 Supabase 数据库深度集成
|
||
- 支持实时数据同步和离线缓存
|
||
- 模块化设计，易于扩展和维护
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
pages/info/
|
||
├── index.uvue # 主页面 - 资讯列表、分类导航、精选推荐
|
||
├── detail.uvue # 详情页面 - 内容展示、多语言切换、相关推荐、评论互动
|
||
├── search.uvue # 搜索页面 - 智能搜索、筛选、历史记录
|
||
├── chat.uvue # AI助手页面 - 智能对话、内容推荐
|
||
├── settings.uvue # 设置页面 - 个人偏好、语言设置、通知配置
|
||
├── topics.uvue # 专题列表页面 - 专题分类、精选专题、热门专题
|
||
├── topic-detail.uvue # 专题详情页面 - 专题内容、时间轴、相关推荐、评论互动
|
||
├── comments.uvue # 评论组件 - 多层级评论、回复、点赞、举报功能
|
||
├── types.uts # 类型定义 - 所有数据结构和工具函数
|
||
├── test-utils.uts # 测试工具 - 功能验证和性能测试
|
||
├── index-backup.uvue # 原始备份文件
|
||
└── README.md # 项目文档
|
||
```
|
||
|
||
## 页面功能详解
|
||
|
||
### 1. 主页面 (index.uvue)
|
||
- **分类导航**: 水平滚动的分类标签，支持全部/各分类切换
|
||
- **内容列表**: 瀑布流式布局，展示标题、摘要、作者等信息
|
||
- **精选推荐**: 高质量内容推荐区域
|
||
- **语言选择**: 弹窗式语言选择器
|
||
- **实时统计**: 显示总内容数、发布数、趋势等统计信息
|
||
- **响应式布局**: 大屏2列，小屏1列自适应
|
||
|
||
### 2. 详情页面 (detail.uvue)
|
||
- **内容展示**: 支持原文和多语言翻译切换
|
||
- **质量指标**: 显示内容质量评分和可视化指示器
|
||
- **交互功能**: 点赞、分享、收藏等社交功能
|
||
- **相关推荐**: 基于内容相似度的智能推荐
|
||
- **标签导航**: 点击标签跳转到相关搜索
|
||
- **AI助手入口**: 浮动按钮快速访问AI助手
|
||
|
||
### 3. 搜索页面 (search.uvue)
|
||
- **智能搜索**: 支持标题、内容、标签等多维度搜索
|
||
- **高级筛选**: 分类、语言、质量、时间等多条件筛选
|
||
- **搜索建议**: 实时搜索建议和自动补全
|
||
- **历史记录**: 搜索历史管理和快速重用
|
||
- **热门搜索**: 展示热门搜索词和趋势
|
||
- **结果排序**: 支持相关度、时间、质量等多种排序
|
||
|
||
### 4. AI助手页面 (chat.uvue)
|
||
- **智能对话**: 支持自然语言交互
|
||
- **内容推荐**: 基于用户偏好的个性化推荐
|
||
- **快速操作**: 预设常用问题和快捷操作
|
||
- **会话管理**: 支持多会话和历史记录
|
||
- **消息操作**: 复制、点赞、反馈等消息交互
|
||
- **上下文理解**: 结合当前浏览内容提供相关建议
|
||
|
||
### 5. 设置页面 (settings.uvue)
|
||
- **语言偏好**: 界面语言和内容语言偏好设置
|
||
- **内容偏好**: 感兴趣的分类、阅读模式、字体大小
|
||
- **通知设置**: 推送通知、提醒频率等配置
|
||
- **隐私安全**: 数据使用、隐私保护相关设置
|
||
- **账户管理**: 个人信息编辑和账户设置
|
||
- **应用信息**: 版本信息、用户协议、反馈渠道
|
||
|
||
### 6. 专题列表页面 (topics.uvue)
|
||
- **专题分类**: 按类型筛选专题（突发事件、热门话题、系列专题等）
|
||
- **精选专题**: 编辑推荐的高质量专题展示
|
||
- **专题预览**: 专题封面、标题、描述、内容数量等信息
|
||
- **排序筛选**: 支持按更新时间、热门度、内容数量等排序
|
||
- **快速导航**: 一键跳转到专题详情或搜索页面
|
||
|
||
### 7. 专题详情页面 (topic-detail.uvue)
|
||
- **专题概览**: 专题标题、描述、统计信息、封面展示
|
||
- **内容组织**: 提供时间轴、分类、精选三种内容展示模式
|
||
- **时间轴视图**: 按时间顺序展示专题相关内容发展脉络
|
||
- **分类视图**: 按内容类别组织专题文章
|
||
- **精选视图**: 展示专题中高质量内容
|
||
- **相关推荐**: 推荐相关专题和扩展阅读
|
||
- **互动功能**: 分享、订阅、意见反馈等操作
|
||
- **评论系统**: 专题评论、讨论互动
|
||
|
||
### 8. 评论组件 (comments.uvue)
|
||
- **多层级评论**: 支持评论和回复的树形结构显示
|
||
- **评论互动**: 点赞、回复、举报、删除等完整功能
|
||
- **排序筛选**: 支持按时间、热度、回复数等多种排序方式
|
||
- **实时更新**: 评论数据实时同步，支持分页加载
|
||
- **内容审核**: 评论状态管理和内容过滤机制
|
||
- **用户权限**: 根据用户身份显示不同操作权限
|
||
- **响应式设计**: 适配不同屏幕尺寸的评论界面
|
||
|
||
## 数据结构
|
||
|
||
### 核心数据类型 (基于 UTSJSONObject)
|
||
|
||
```typescript
|
||
// 内容数据
|
||
export type InfoContent = UTSJSONObject
|
||
// 字段: id, title, content, summary, author, published_at, quality_score,
|
||
// view_count, like_count, share_count, original_language, source_url, tags
|
||
|
||
// 翻译数据
|
||
export type TranslationData = UTSJSONObject
|
||
// 字段: id, content_id, language_id, title, content, summary,
|
||
// human_verified, quality_score, created_at
|
||
|
||
// 分类数据
|
||
export type CategoryData = UTSJSONObject
|
||
// 字段: id, name_key, display_order, is_active, icon, color
|
||
|
||
// 专题数据
|
||
export type TopicData = UTSJSONObject
|
||
// 字段: id, title, description, topic_type, status, cover_image_url,
|
||
// content_count, view_count, created_at, updated_at
|
||
|
||
// 专题内容关联
|
||
export type TopicContentData = UTSJSONObject
|
||
// 字段: id, topic_id, content_id, display_order, editor_note, created_at
|
||
|
||
// 评论数据
|
||
export type CommentData = UTSJSONObject
|
||
// 字段: id, target_type, target_id, parent_id, author_id, author_name,
|
||
// author_avatar, content, status, like_count, reply_count, level,
|
||
// thread_path, is_liked, is_author, created_at, updated_at
|
||
|
||
// 评论回复数据
|
||
export type CommentReplyData = UTSJSONObject
|
||
// 字段: id, comment_id, author_id, author_name, target_name, content,
|
||
// like_count, is_liked, is_author, created_at
|
||
|
||
// 聊天消息
|
||
export type ChatMessageData = UTSJSONObject
|
||
// 字段: id, session_id, type, content, created_at, metadata
|
||
|
||
// 用户设置
|
||
export type UserSettingsData = UTSJSONObject
|
||
// 字段: user_id, interface_language, preferred_languages, preferred_categories,
|
||
// auto_translate, notification_enabled, reading_mode, font_size, theme
|
||
```
|
||
|
||
### 工具函数
|
||
|
||
```typescript
|
||
// 内容数据获取
|
||
getContentId(), getContentTitle(), getContentSummary(), getContentContent()
|
||
getContentAuthor(), getContentPublishedAt(), getContentQualityScore()
|
||
getContentViewCount(), getContentLikeCount(), getContentShareCount()
|
||
getContentOriginalLanguage(), getContentSourceUrl(), getContentTags()
|
||
|
||
// 时间格式化
|
||
formatDateTime(), formatRelativeTime()
|
||
|
||
// 质量评分
|
||
getQualityScoreText(), getQualityScoreColor()
|
||
|
||
// 分类和语言
|
||
getCategoryDisplayName(), getLanguageName()
|
||
```
|
||
|
||
## 技术规范
|
||
|
||
### UTS Android 开发规范遵循
|
||
|
||
1. **变量声明**: 使用 `let` 和 `const`，避免 `var`
|
||
2. **类型系统**: 使用 `type` 而非 `interface`，避免复杂类型嵌套
|
||
3. **数据结构**: 全部基于 `UTSJSONObject`，避免 `safeGet` 等函数
|
||
4. **循环遍历**: 使用 `for` 循环，避免 `forEach` 和 `map`
|
||
5. **条件判断**: 使用 `!== null` 而非 `!` 操作符
|
||
6. **空值处理**: 使用 `??` 而非 `||` 进行默认值设置
|
||
7. **CSS限制**: 只支持 `display: flex`，不支持 `grid`、`gap`、`calc()` 等
|
||
|
||
### 数据交互规范
|
||
|
||
1. **Supabase集成**: 使用 `supadb` 组件进行数据交互
|
||
2. **响应式状态**: 使用 `ref()` 和 `computed()` 管理状态
|
||
3. **生命周期**: 合理使用 `onMounted()` 和 `onUnmounted()`
|
||
4. **错误处理**: 统一的错误处理和用户反馈机制
|
||
|
||
### UI/UX 设计规范
|
||
|
||
1. **响应式设计**: 大屏(>768px)和小屏(<768px)自适应
|
||
2. **色彩系统**: 统一的色彩规范和主题支持
|
||
3. **交互反馈**: 加载状态、错误提示、成功反馈
|
||
4. **无障碍支持**: 语义化标签和清晰的视觉层次
|
||
|
||
## 性能优化
|
||
|
||
### 数据处理优化
|
||
- 使用 UTSJSONObject 避免类型转换开销
|
||
- 实现数据分页和虚拟滚动
|
||
- 合理的缓存策略和数据预加载
|
||
|
||
### 渲染性能优化
|
||
- 使用 `v-if` 而非 `v-show` 控制渲染
|
||
- 避免深层嵌套和复杂计算属性
|
||
- 合理使用 `key` 优化列表渲染
|
||
|
||
### 内存管理
|
||
- 及时清理事件监听器和定时器
|
||
- 避免内存泄漏和循环引用
|
||
- 合理的组件生命周期管理
|
||
|
||
## 测试验证
|
||
|
||
### 功能测试
|
||
- 使用 `test-utils.uts` 进行单元测试
|
||
- 验证数据结构和工具函数正确性
|
||
- 模拟用户操作和边界条件测试
|
||
|
||
### 性能测试
|
||
- 大数据量处理性能测试
|
||
- 内存使用和渲染性能监控
|
||
- 网络请求和响应时间优化
|
||
|
||
### 兼容性测试
|
||
- 不同屏幕尺寸适配测试
|
||
- Android 版本兼容性验证
|
||
- 多语言显示和交互测试
|
||
|
||
## 部署和维护
|
||
|
||
### 开发环境
|
||
- HBuilderX 3.8+
|
||
- uni-app-x 框架
|
||
- Supabase 数据库
|
||
|
||
### 构建和部署
|
||
- Android APK 打包
|
||
- 性能监控和错误报告
|
||
- 版本更新和热修复机制
|
||
|
||
### 数据库维护
|
||
- Supabase 表结构管理
|
||
- 数据备份和恢复
|
||
- 性能监控和优化
|
||
|
||
## 扩展计划
|
||
|
||
### 功能扩展
|
||
- [ ] 离线阅读支持
|
||
- [ ] 音频朗读功能
|
||
- [ ] 内容评论系统
|
||
- [ ] 社交分享集成
|
||
- [ ] 个性化推荐算法优化
|
||
|
||
### 技术升级
|
||
- [ ] PWA 支持
|
||
- [ ] 深色模式完善
|
||
- [ ] 无障碍功能增强
|
||
- [ ] 性能监控仪表板
|
||
|
||
## 评论系统架构
|
||
|
||
### 评论数据模型
|
||
|
||
评论系统采用**树形结构**设计，支持多层级嵌套回复：
|
||
|
||
```sql
|
||
-- 评论表 (ak_comments)
|
||
CREATE TABLE ak_comments (
|
||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||
target_type VARCHAR(20) NOT NULL, -- 'content' | 'topic'
|
||
target_id UUID NOT NULL, -- 目标内容/专题ID
|
||
parent_id UUID, -- 父评论ID (NULL表示顶级评论)
|
||
author_id UUID NOT NULL, -- 评论作者ID
|
||
author_name VARCHAR(100) NOT NULL, -- 作者显示名称
|
||
author_avatar TEXT, -- 作者头像URL
|
||
content TEXT NOT NULL, -- 评论内容
|
||
status VARCHAR(20) DEFAULT 'active', -- 评论状态
|
||
like_count INTEGER DEFAULT 0, -- 点赞数
|
||
reply_count INTEGER DEFAULT 0, -- 回复数
|
||
level INTEGER DEFAULT 0, -- 评论层级 (0=顶级, 1=一级回复, ...)
|
||
thread_path TEXT, -- 线程路径 (如: "1/5/12")
|
||
created_at TIMESTAMP DEFAULT NOW(),
|
||
updated_at TIMESTAMP DEFAULT NOW()
|
||
);
|
||
```
|
||
|
||
### 评论功能特性
|
||
|
||
#### 1. **多层级结构**
|
||
- **顶级评论**: 直接针对内容/专题的评论
|
||
- **嵌套回复**: 支持对评论的回复，形成对话链
|
||
- **层级限制**: 最多支持3层嵌套，避免过深结构
|
||
- **线程追踪**: 通过thread_path字段追踪评论关系
|
||
|
||
#### 2. **交互功能**
|
||
- **点赞系统**: 支持评论点赞/取消点赞
|
||
- **回复机制**: @用户回复，保持对话连贯性
|
||
- **删除权限**: 作者可删除自己的评论
|
||
- **举报功能**: 支持6种举报类型的内容审核
|
||
|
||
#### 3. **内容管理**
|
||
- **状态控制**: active/hidden/deleted/pending_review/rejected
|
||
- **自动审核**: 关键词过滤和AI内容检测
|
||
- **人工审核**: 举报内容的人工复审机制
|
||
- **批量操作**: 管理员批量处理评论功能
|
||
|
||
#### 4. **排序和展示**
|
||
- **时间排序**: 最新/最早评论优先
|
||
- **热度排序**: 按点赞数排序
|
||
- **回复排序**: 按回复数排序
|
||
- **智能排序**: 综合质量和时间的算法排序
|
||
|
||
### 评论组件设计
|
||
|
||
#### **组件特点**
|
||
- **高度复用**: 同时支持内容评论和专题评论
|
||
- **响应式设计**: 适配不同屏幕尺寸
|
||
- **性能优化**: 虚拟滚动和分页加载
|
||
- **UTS规范**: 严格遵循UTS Android开发规范
|
||
|
||
#### **接口设计**
|
||
```typescript
|
||
interface CommentProps {
|
||
targetType: 'content' | 'topic' // 评论目标类型
|
||
targetId: string // 目标ID
|
||
userId?: string // 当前用户ID
|
||
userName?: string // 当前用户名
|
||
}
|
||
```
|
||
|
||
#### **状态管理**
|
||
```typescript
|
||
// 评论列表状态
|
||
const commentsList = ref<Array<CommentData>>([])
|
||
const loading = ref<boolean>(false)
|
||
const hasMore = ref<boolean>(true)
|
||
|
||
// 交互状态
|
||
const activeReplyId = ref<string>('') // 当前回复的评论ID
|
||
const showCommentInput = ref<boolean>(false) // 显示评论输入框
|
||
const commentContent = ref<string>('') // 评论内容
|
||
|
||
// 排序和筛选
|
||
const currentSort = ref<string>('created_at_desc')
|
||
const showSortModal = ref<boolean>(false)
|
||
```
|
||
|
||
### 评论业务流程
|
||
|
||
#### **发表评论流程**
|
||
1. 用户点击"写评论"按钮
|
||
2. 显示评论输入框，验证登录状态
|
||
3. 输入评论内容，实时字数统计
|
||
4. 提交评论，调用API进行内容检测
|
||
5. 评论状态为pending_review或active
|
||
6. 刷新评论列表，显示新评论
|
||
|
||
#### **回复评论流程**
|
||
1. 点击评论的"回复"按钮
|
||
2. 显示回复输入框，显示@目标用户
|
||
3. 输入回复内容，支持@提及功能
|
||
4. 提交回复，建立parent_id关系
|
||
5. 更新父评论的reply_count
|
||
6. 在评论树中正确显示回复
|
||
|
||
#### **评论审核流程**
|
||
1. **自动审核**: 关键词过滤、长度检查
|
||
2. **AI检测**: 违规内容、垃圾信息识别
|
||
3. **人工审核**: 举报内容的人工复审
|
||
4. **状态更新**: 根据审核结果更新评论状态
|
||
5. **通知机制**: 审核结果通知评论作者
|
||
|
||
### 评论数据库优化
|
||
|
||
#### **索引策略**
|
||
```sql
|
||
-- 复合索引优化查询性能
|
||
CREATE INDEX idx_comments_target ON ak_comments(target_type, target_id, status, created_at);
|
||
CREATE INDEX idx_comments_parent ON ak_comments(parent_id, created_at);
|
||
CREATE INDEX idx_comments_author ON ak_comments(author_id, created_at);
|
||
CREATE INDEX idx_comments_thread ON ak_comments(thread_path);
|
||
```
|
||
|
||
#### **查询优化**
|
||
- **分页查询**: 使用cursor-based pagination
|
||
- **预加载**: 评论作者信息和点赞状态预加载
|
||
- **缓存策略**: 热门评论Redis缓存
|
||
- **读写分离**: 评论读取和写入分离优化
|
||
|
||
### 评论系统集成
|
||
|
||
#### **与内容系统集成**
|
||
- 内容详情页自动加载评论组件
|
||
- 评论数统计实时更新到内容表
|
||
- 评论质量影响内容推荐算法
|
||
- 热门评论作为内容推荐依据
|
||
|
||
#### **与用户系统集成**
|
||
- 用户评论历史和统计
|
||
- 评论行为分析和画像构建
|
||
- 评论权限和等级管理
|
||
- 评论通知和消息推送
|
||
|
||
#### **与AI系统集成**
|
||
- AI自动生成评论摘要
|
||
- 智能评论推荐和排序
|
||
- 评论情感分析和标签
|
||
- AI辅助内容审核和过滤
|
||
|
||
## 联系和支持
|
||
|
||
如有问题或建议，请联系开发团队：
|
||
- 技术支持: [支持邮箱]
|
||
- 问题反馈: [反馈渠道]
|
||
- 文档更新: [文档地址]
|
||
|
||
---
|
||
|
||
*最后更新: 2025年6月*
|
||
*版本: v1.0.0*
|
||
*开发团队: AI资讯系统开发组*
|