AI导哈

API管理仪表盘

Cronos402 Web Dashboard是一个开发者控制面板，用于管理API密钥、监控使用情况和配置支付设置，适用于需要集成Cronos402生态系统的开发者。

  • by Cronos402
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Cronos402/app

使用说明

Cronos402网络仪表板

用于管理API密钥、监控使用情况和配置支付设置的开发人员仪表板。

生产URL：https://cronos402.dev

概述

Cronos402 Web Dashboard是使用Cronos402生态系统构建的开发人员的中央控制面板。它提供用户身份验证、API密钥管理、使用分析和支付配置。开发人员可以注册、为其应用程序生成API密钥、监控工具使用情况，并通过直观的web界面管理其帐户设置。

建筑

  • 框架：Next.js 15，带应用路由器
  • 用户界面：使用TailwindCSS和shadcn/ui组件进行反应
  • 认证：更好地使用电子邮件/密码和OAuth进行身份验证
  • 数据库：用PostgreSQL喷洒ORM
  • 状态管理：React服务器组件+客户端组件
  • API：用于后端操作的Next.js API路由
  • 部署：Vercel优化或自托管

特性

  • 用户注册和身份验证
  • API密钥生成和管理
  • 使用情况分析和监控
  • 付款历史跟踪
  • 工具使用统计
  • 帐户设置管理
  • 暗/亮模式支持
  • 移动和桌面的响应式设计
  • 集成指南和文档链接
  • 实时使用情况更新

快速开始

发展

pnpm install
pnpm dev

服务器在上运行 http://localhost:3002

构建

pnpm build
pnpm start

环境变量

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/cronos402

# Better Auth
BETTER_AUTH_SECRET=your-secret-key
BETTER_AUTH_URL=http://localhost:3002

# OAuth Providers (optional)
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-secret

# Cronos Network
NEXT_PUBLIC_CRONOS_NETWORK=cronos-testnet
NEXT_PUBLIC_MCP_URL=https://mcp.cronos402.dev

# Analytics (optional)
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id

技术栈

  • Next.js 15：带有App Router的React框架
  • 顺风CSS：实用程序优先的CSS框架
  • shadcn/ui：高质量的React组件
  • 淋ORM：类型安全数据库工具包
  • 更好的认证：现代身份验证解决方案
  • React查询：数据获取和缓存
  • 重新图表：图表和分析可视化
  • 萨德：架构验证

数据库模式

Drizzle ORM管理的核心表：

  • users -用户帐户
  • sessions -活动会话
  • api_keys -生成的API密钥
  • tool_usage -工具调用历史记录
  • payments -付款交易
  • notifications -用户通知

迁移

# Generate migration
pnpm drizzle-kit generate

# Apply migrations
pnpm drizzle-kit push

# Open Drizzle Studio
pnpm drizzle-kit studio

主要特点

API密钥管理

  • 为每个帐户生成多个API密钥
  • 设置自定义名称和权限
  • 立即撤销密钥
  • 查看密钥使用统计数据
  • 一键复制密钥

使用情况分析

  • 实时工具使用情况跟踪
  • 付款历史可视化
  • 按工具分类的成本明细
  • 随时间推移的使用趋势
  • 导出使用数据

账户设置

  • 配置文件管理
  • 密码重置
  • OAuth连接
  • 电子邮件首选项
  • 账单信息

开发命令

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linter
pnpm lint

# Run type checking
pnpm type-check

# Database operations
pnpm db:generate    # Generate migrations
pnpm db:push        # Apply migrations
pnpm db:studio      # Open Drizzle Studio

部署

Vercel（推荐）

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

在Vercel仪表板中配置环境变量。

自托管

FROM node:20-alpine
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
EXPOSE 3002
CMD ["pnpm", "start"]

生产要求

  • PostgreSQL数据库
  • HTTPS端点
  • 配置了更好的身份验证密钥
  • 设置OAuth提供程序（可选）
  • 已配置分析（可选）

项目结构

app/
├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── (auth)/       # Authentication pages
│   │   ├── (dashboard)/  # Dashboard pages
│   │   └── api/          # API routes
│   ├── components/       # React components
│   │   ├── ui/           # shadcn/ui components
│   │   └── custom-ui/    # Custom components
│   ├── lib/              # Utilities and configs
│   │   ├── auth/         # Better Auth config
│   │   └── db/           # Drizzle schemas
│   └── styles/           # Global styles
├── public/               # Static assets
└── drizzle/              # Database migrations

API路线

认证

  • POST /api/auth/register -注册新用户
  • POST /api/auth/login -用户登录
  • POST /api/auth/logout -用户注销
  • GET /api/auth/session -获取当前会话

API密钥

  • GET /api/keys -列出用户的API密钥
  • POST /api/keys -生成新的API密钥
  • DELETE /api/keys/:id -吊销API密钥

用法

  • GET /api/usage -获取使用统计数据
  • GET /api/usage/:keyId -获取密钥特定用法

支付

  • GET /api/payments -列出付款历史记录
  • GET /api/payments/:id -获取付款详细信息

资源

许可证

麻省理工学院

相关 MCP