💬 Chat & Edit

A dual-mode AI application combining chat and rich-text AI editing
双模式 AI 应用 — 结合对话聊天与富文本 AI 编辑

---

预览

🗨️ 聊天场景	✍️ AI 编辑场景

---

✨ 功能特性

🗨️ 聊天场景

• 流式响应 — 实时流式 Markdown 渲染，支持 Mermaid 图表和代码高亮
• 多模态 — 文本 + 图片输入
• 会话管理 — 多会话历史、导入/导出、系统提示词配置
• 模型切换 — 支持多种 Moonshot AI 模型

✍️ AI 编辑场景

• 富文本编辑 — 基于 Quill 2.0，支持表格
• AI 智能处理 — 润色、改写、翻译、代码生成、摘要提取
• 对比视图 — Monaco Editor 差异对比
• 多格式导出 — PDF / DOCX / Markdown / HTML
• 数学公式 — KaTeX 渲染
• 代码高亮 — Shiki + highlight.js

⚙️ 技术亮点

• 离线优先 — IndexedDB (Dexie.js) 本地数据存储
• 暗色模式 — 系统主题自动同步
• 响应式设计 — 适配桌面和移动端
• 完整测试 — 单元测试 + E2E 测试覆盖

---

🛠️ 技术栈

分类	技术
框架	Vue 3.5 (Composition API) + TypeScript
构建	Vite 5
状态管理	Pinia
UI	Naive UI + Tailwind CSS
编辑器	Quill 2.0 + Monaco Editor
Markdown	markdown-it + markstream-vue + Mermaid
数据库	Dexie.js (IndexedDB)
AI 服务	Moonshot AI API (SSE streaming)
测试	Vitest + Playwright
代码规范	ESLint (@antfu) + Husky + lint-staged

---

🚀 快速开始

环境要求

• Node.js >= 18
• pnpm >= 10

安装与运行

# 克隆项目
git clone https://github.com/tt-a1i/chat_edit.git
cd chat_edit

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env.local

编辑 .env.local：

VITE_API_BASE_URL=https://api.moonshot.cn
VITE_API_KEY=your_api_key_here

# 启动开发服务器
pnpm dev

访问 http://localhost:5173/

---

📝 命令一览

命令	说明
pnpm dev	启动开发服务器
pnpm build	构建生产版本（含 TS 类型检查）
pnpm preview	预览生产构建
pnpm lint	代码检查
pnpm lint:fix	自动修复代码问题
pnpm typecheck	TypeScript 类型检查
pnpm test	单元测试（watch 模式）
pnpm test:run	单元测试（单次）
pnpm test:coverage	测试 + 覆盖率报告
pnpm test:e2e	E2E 测试
pnpm test:all	运行所有测试

---

📁 项目结构

src/
+-- api/                    # API 接口层
+-- assets/                 # 静态资源和全局样式
+-- components/             # Vue 组件
|   +-- AIEditing/          # AI 编辑器模块
|   |   +-- components/     # 子组件
|   |   +-- composables/    # 组合式函数
|   |   +-- utils/          # 工具函数
|   +-- chat/               # 聊天功能模块
|   |   +-- messages/       # 消息类型组件
|   +-- common/             # 通用组件
|   +-- history/            # 历史记录
|   +-- inputs/             # 输入组件
|   +-- settings/           # 设置模块
+-- config/                 # 配置文件
+-- services/               # 业务逻辑层
+-- stores/                 # Pinia 状态管理
+-- utils/                  # 工具函数
+-- App.vue                 # 根组件
+-- main.ts                 # 入口文件

---

🔧 测试

项目包含完整的测试框架：

类型	工具	数量
单元测试	Vitest + @vue/test-utils	53 个测试
E2E 测试	Playwright	应用基础 + 聊天功能
覆盖率	Vitest Coverage (v8)	✓

详细测试指南请参考 TESTING.md

---

🛠️ 开发指南

Git Hooks

项目配置了 Husky + lint-staged，提交前自动执行：

• ESLint 代码检查和修复
• TypeScript 类型检查

调试

支持使用 Chrome DevTools MCP 进行调试，详见 CLAUDE.md

---

🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

📄 License

MIT