dreamhunter2333andClaude Opus 4.5
6a648f3fa7
- 重构所有 UI 组件，采用现代化设计风格 - 新增 PageContainer 组件统一页面布局 - 优化 Sidebar 支持折叠功能 - 改进 Toast 通知样式和交互 - 统一所有页面的视觉风格和间距 - 提升整体界面的专业性和易用性 Co-Authored-By: Claude Opus 4.5 <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.