dreamhunter2333andClaude Opus 4.5
4572e5fc9e
- 使用 React 19 + TypeScript + Vite 7 重构整个前端 - 集成 shadcn/ui 组件库和 Tailwind CSS v4 - 使用 TanStack Query 管理服务端状态 - 使用 Zustand 管理客户端状态（认证） - 使用 React Router v7 实现路由 - 实现浅粉色主题，支持深色模式 - 添加 API 拦截器和全局错误处理 - 优化 Toast 通知样式 - 管理页面按钮右对齐 - Token 显示脱敏处理 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
70 lines
1.7 KiB
Markdown
70 lines
1.7 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
The built files will be in the `dist` directory.
|