# 多语言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资讯系统开发组*