Update README.md

README.md

@@ -1,2 +1,151 @@
 # Cli-Proxy-API-Management-Center
-这是一个基于Cli-Proxy-API的webui界面 为其配置修改 运行情况检查提供便利
+这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+
+## 功能特点
+
+### 认证管理
+- 支持管理密钥认证
+- 可配置 API 基础地址
+- 实时连接状态检测
+
+### 基础设置
+- **调试模式**: 开启/关闭调试功能
+- **代理设置**: 配置代理服务器 URL
+- **请求重试**: 设置请求重试次数
+- **配额管理**: 配置超出配额时的行为
+- **本地访问**: 允许本地未认证访问
+
+### API 密钥管理
+- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
+- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
+- **Codex API**: 管理 OpenAI Codex API 配置
+- **Claude API**: 管理 Anthropic Claude API 配置
+- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
+
+### 认证文件管理
+- 上传认证 JSON 文件
+- 下载现有认证文件
+- 删除单个或所有认证文件
+- 显示文件详细信息
+
+### 系统监控
+- 实时 API 连接状态
+- 最后更新时间跟踪
+- 详细的错误信息提示
+
+## 使用方法
+
+### 1. 直接使用（推荐）
+直接用浏览器打开 `index.html` 文件即可使用。
+
+### 2. 使用本地服务器
+```bash
+# 安装依赖
+npm install
+
+# 使用默认端口(3000）
+npm start
+```
+
+### 3. 配置 API 连接
+1. 打开管理界面
+2. 在认证配置区域输入：
+   - **API 地址**: `http://localhost:8317`/v0/management将会自动为您补全
+   - **管理密钥**: 您的管理密钥
+3. 点击"测试连接"按钮
+4. 连接成功后即可使用所有功能
+
+## 界面说明
+
+### 导航菜单
+- **基础设置**: 调试、代理、重试等基本配置
+- **API 密钥**: 各种 API 服务的密钥管理
+- **AI 提供商**: AI 服务提供商配置
+- **认证文件**: 认证文件的上传下载管理
+- **系统信息**: 连接状态和系统信息
+
+### 操作按钮
+- **刷新全部**: 重新加载所有配置数据
+- **连接状态**: 检查 API 连接状态
+- **添加**: 添加新的配置项
+- **编辑**: 编辑现有配置
+- **删除**: 删除配置项
+
+## 特性亮点
+
+### 现代化 UI
+- 响应式设计，支持各种屏幕尺寸
+- 美观的渐变色彩和阴影效果
+- 流畅的动画和过渡效果
+- 直观的图标和状态指示
+
+### 实时更新
+- 配置更改立即生效
+- 实时状态反馈
+- 自动数据刷新
+
+### 安全特性
+- 密钥遮蔽显示
+
+### 响应式设计
+- 完美适配桌面和移动设备
+- 自适应布局
+- 触摸友好的交互
+
+## 技术栈
+
+- **前端**: 纯 HTML、CSS、JavaScript
+- **样式**: CSS3 + Flexbox/Grid
+- **图标**: Font Awesome 6.4.0
+- **字体**: Segoe UI 系统字体
+- **API**: RESTful API 调用
+
+## 故障排除
+
+### 连接问题
+1. 确认 CLI Proxy API 服务正在运行
+2. 检查 API 地址是否正确
+3. 验证管理密钥是否有效
+4. 确认防火墙设置允许连接
+
+### 跨域问题
+如果直接打开 HTML 文件遇到跨域问题，请使用本地服务器模式：
+```bash
+npm run dev
+```
+
+### 数据不更新
+1. 点击"刷新全部"按钮
+2. 检查网络连接
+3. 查看浏览器控制台错误信息
+
+## 开发说明
+
+### 文件结构
+```
+webui/
+├── index.html      # 主页面
+├── styles.css      # 样式文件
+├── app.js          # 应用逻辑
+├── package.json    # 项目配置
+└── README.md       # 说明文档
+```
+
+### API 调用
+所有 API 调用都通过 `CLIProxyManager` 类的 `makeRequest` 方法处理，包含：
+- 自动添加认证头
+- 错误处理
+- JSON 响应解析
+
+### 状态管理
+- 本地存储保存 API 地址和密钥
+- 内存中维护连接状态
+- 实时数据刷新机制
+
+## 许可证
+
+MIT License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request 来改进这个项目！