CodeTrail - AI 编程工具 Trace 可视化

可视化和管理你的 AI 编程工具使用轨迹

功能特性 • 技术栈 • 快速开始 • 开发指南 • 项目结构

---

📖 项目简介

CodeTrail 是一款基于 Tauri 开发的桌面应用程序，专门用于可视化和管理 AI 编程工具（如 Claude Code、Cursor 等）的使用轨迹和数据。帮助你更好地了解 AI 辅助编程的过程，追踪项目变更历史，提升开发效率。

✨ 核心特性

• 📊 数据可视化 - 通过图表直观展示 AI 工具的使用统计和活动日志
• 🔍 Trace 追踪 - 追踪 AI 编程工具的操作记录和数据变化
• 🛠️ 多工具支持 - 支持多种主流 AI 编程工具的数据管理
• 📁 项目管理 - 按项目维度组织和管理 AI 工具生成的数据
• 🎨 现代化 UI - 基于 Tailwind CSS 的精美深色主题界面
• ⚡ 轻量高效 - 基于 Tauri 框架，体积小、性能高

🚀 技术栈

前端技术

• 框架: React 18 + TypeScript
• 构建工具: Vite 6
• 样式方案: Tailwind CSS 3 + PostCSS
• 状态管理: Zustand
• 路由管理: TanStack Router
• 图表库: Recharts
• 图标库: Lucide React

桌面端

• 框架: Tauri 2.0
• 语言: Rust (后端)

📦 快速开始

环境要求

• Node.js 18+
• Rust (用于 Tauri 开发)
• pnpm / npm / yarn

安装依赖

# 使用 npm
npm install

# 或使用 pnpm
pnpm install

开发模式

Web 开发模式

npm run dev

Tauri 桌面应用开发模式

npm run tauri dev

构建打包

前端构建

npm run build

Tauri 桌面应用打包

npm run tauri build

📂 项目结构

CodeTrail/
├── src/                    # 前端源代码
│   ├── components/         # React 组件
│   │   └── Sidebar.tsx    # 侧边栏组件
│   ├── pages/              # 页面组件
│   │   ├── Dashboard.tsx   # 仪表盘页面
│   │   └── Tools.tsx      # 工具管理页面
│   ├── utils/              # 工具函数
│   ├── App.tsx             # 主应用组件
│   ├── main.tsx            # 应用入口
│   ├── types.ts            # TypeScript 类型定义
│   └── index.css           # 全局样式
├── src-tauri/              # Tauri 后端代码 (Rust)
├── public/                 # 静态资源
├── index.html              # HTML 入口
├── package.json            # 项目配置
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
├── tailwind.config.js      # Tailwind CSS 配置
└── postcss.config.js       # PostCSS 配置

🎯 功能模块

1. 仪表盘 (Dashboard)

• 展示 AI 工具使用统计
• 活动日志时间线
• 项目数据概览
• 最近会话记录

2. 工具管理 (Tools)

• 检测已安装的 AI 编程工具
• 查看各工具的数据存储路径
• 统计各工具的使用情况
• 管理工具生成的数据文件

3. 设置 (Settings)

• 应用配置管理
• 数据路径设置
• 界面主题切换

📝 数据类型定义

项目核心数据类型包括：

• ToolInfo - AI 工具信息
• ToolStats - 工具使用统计
• ActivityLog - 活动日志
• ProjectToolData - 项目工具数据
• ConversationMessage - 对话消息记录

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

📄 许可证

[在此添加许可证信息]

🙏 致谢

• Tauri - 优秀的桌面应用开发框架
• React - 用户界面库
• Vite - 新一代前端构建工具
• Tailwind CSS - 实用优先的 CSS 框架

📧 联系方式

如有问题或建议，欢迎通过以下方式联系：

• 提交 Issue
• [在此添加你的联系方式]

---

Made with ❤️ by CodeTrail Team