dreamhunter2333andClaude Opus 4.6
07a597e41a
- Dashboard: 全新 hero 区域，gradient mesh 背景，stagger 动画特性卡片 - API 测试: 改为左右分栏布局（请求/响应），增加状态指示和复制按钮 - Database: 使用 PageContainer 统一风格，改善结果展示 - 新增 404 页面和 catch-all 路由 - Sidebar: 更紧凑精致，优化折叠/展开交互 - Dialog: backdrop blur 效果，圆角升级 - CSS: 新增 gradient-mesh、grid-pattern、stagger-children 等动画 - 配色系统升级为更鲜艳的靛蓝主色调 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
AWSL One API Frontend
Modern React + Vite + TypeScript frontend for AWSL One API management platform.
Features
- Modern React 19 with TypeScript
- Vite for fast development and building
- Tailwind CSS for styling
- shadcn/ui components
- TanStack Query for data fetching
- Zustand for state management
- React Router for routing
- Full CRUD operations for channels, tokens, and pricing
- Dark mode support
Development
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm preview
Project Structure
src/
├── api/ # API client
├── components/ # React components
│ ├── layout/ # Layout components
│ └── ui/ # UI components (shadcn/ui)
├── lib/ # Utility functions
├── pages/ # Page components
├── store/ # Zustand stores
├── types/ # TypeScript types
├── App.tsx # Main app component
├── main.tsx # Entry point
└── index.css # Global styles
Environment Variables
No environment variables required. The frontend communicates with the backend API at the same domain.
Features
- Dashboard: Overview and quick start guide
- API Test: Test API endpoints with custom requests
- Channels: Manage OpenAI, Azure OpenAI, and Claude channels
- Tokens: Create and manage API tokens with quota limits
- Pricing: Configure model pricing multipliers
- Database: Initialize database tables
Building
pnpm build
The built files will be in the dist directory.