add preview

README.md

@@ -9,7 +9,7 @@
 
 **🔐 自行搭建Claude API中转服务，支持多账户管理** 
 
-[English](#english) • [中文文档](#中文文档)
+[English](#english) • [中文文档](#中文文档) • [📸 界面预览](docs/preview.md)
 
 </div>
 
@@ -73,6 +73,8 @@
 
 ## 🚀 核心功能
 
+> 📸 **[点击查看界面预览](docs/preview.md)** - 查看Web管理界面的详细截图
+
 ### 基础功能
 - ✅ **多账户管理**: 可以添加多个Claude账户自动轮换
 - ✅ **自定义API Key**: 给每个人分配独立的Key

docs/preview.md

@@ -0,0 +1,47 @@
+# Claude Relay Service 界面预览
+
+<div align="center">
+
+**🎨 Web管理界面截图展示**
+
+</div>
+
+---
+
+## 📊 管理面板概览
+
+
+### 仪表板
+![仪表板](./images/dashboard-overview.png)
+
+*实时显示API调用次数、Token使用量、成本统计等关键指标*
+
+---
+
+## 🔑 API密钥管理
+
+### API密钥列表
+![API密钥管理](./images/api-keys-list.png)
+
+*查看和管理所有创建的API密钥，包括使用量统计和状态信息*
+
+---
+
+## 👤 Claude账户管理
+
+### 账户列表
+![Claude账户列表](./images/claude-accounts-list.png)
+
+*管理多个Claude账户，查看账户状态和使用情况*
+
+### 添加新账户
+![添加Claude账户](./images/add-claude-account.png)
+
+*通过OAuth授权添加新的Claude账户*
+
+### 使用教程
+![使用教程](./images/tutorial.png)
+
+*windows、macos、linux、wsl不同环境的claude code安装教程*
+
+---