docs: 添加项目预览截图

[tt-a1i]

Summary

• 在 README 中添加聊天场景和 AI 编辑场景的预览截图
• 方便用户直观了解项目功能

Changes

• ✅ README.md: 添加截图引用
• ✅ screenshots/chat.png: 聊天场景截图
• ✅ screenshots/ai-editing.png: AI 编辑场景截图

[claude]

代码审查反馈 ✅

感谢提交此 PR！这是一个简洁且有价值的文档改进。以下是详细的审查意见：

---

✅ 优点

1. 功能价值

   • 添加项目预览截图大大提升了 README 的可读性
   • 让新用户能够直观了解项目的两个核心场景
   • 符合开源项目最佳实践

2. 实现质量

   • commit 信息规范：使用了 docs: 前缀，符合 conventional commits 规范
   • PR 描述清晰：明确列出了变更内容
   • 文件组织合理：将截图放在专门的 screenshots/ 目录

---

⚠️ 改进建议

1. 图片优化 - 重要

截图文件较大，建议优化：

# 当前文件大小
screenshots/ai-editing.png: 278KB (3840 x 1924)
screenshots/chat.png:       272KB (800 x 1278)

建议：

• ai-editing.png 分辨率过高 (3840x1924)，建议压缩到 1920 宽度以内
• 使用图片优化工具减小文件体积：

  # 使用 pngquant (推荐)
  pngquant --quality=65-80 --ext .png --force screenshots/*.png
  
  # 或使用 tinypng 在线服务
  # https://tinypng.com/

• 目标：将单个文件压缩到 100KB 以内，既能保证清晰度又能加快加载速度

2. README 改进建议

## 预览

### 聊天场景
![聊天场景](screenshots/chat.png)

### AI 编辑场景
![AI 编辑场景](screenshots/ai-editing.png)

理由：

• 添加小标题让结构更清晰
• 便于用户快速定位想查看的场景
• 与下方「功能特性」的「聊天场景」「AI 编辑场景」保持一致

3. 考虑添加替代文本优化

虽然当前已有基本的 alt 文本，但可以更详细：

![聊天场景 - 展示流式 Markdown 渲染和多模态对话界面](screenshots/chat.png)
![AI 编辑场景 - 展示 Quill 富文本编辑器和 AI 智能处理功能](screenshots/ai-editing.png)

收益：

• 提升无障碍访问性（Accessibility）
• 改善 SEO

4. Git 最佳实践提示

当前 .gitignore 中有：

CLAUDE.md

但根据项目文档，CLAUDE.md 应该被提交到代码库（如 CLAUDE.md 顶部所述）。建议移除此规则或确认意图。

---

📋 可选改进（非必需）

1. 添加在线演示链接

   • 如果项目已部署，可以在「预览」部分添加在线演示链接

2. 考虑添加 GIF 动图

   • 展示流式输入、AI 处理等动态效果会更生动
   • 可使用 LICEcap 或 Kap 录制

---

🔒 安全性检查 ✅

• ✅ 无敏感信息泄露（已检查截图不包含 API 密钥）
• ✅ 未修改代码逻辑，无安全风险

📊 性能考虑

• ⚠️ 如前所述，建议优化图片大小以减少仓库体积和加载时间

🧪 测试覆盖

• ✅ 纯文档变更，无需测试

---

总结

这是一个值得合并的 PR，只需进行图片优化即可完美。建议：

必须改进：

• 压缩图片文件大小（特别是 ai-editing.png）

推荐改进：

• 调整 README 截图区域的格式，添加小标题

可选改进：

• 优化 alt 文本
• 检查 .gitignore 中的 CLAUDE.md 规则

优化后即可合并！👍