# 小虾 SaaS - 前端应用

基于 Vite + React 18 + TypeScript + Ant Design 的现代化 SaaS 前端应用。

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 技术栈

- **框架:** React 18.3.1
- **语言:** TypeScript 5.5.3
- **构建工具:** Vite 5.3.1
- **UI 组件库:** Ant Design 5.18.0
- **路由:** React Router 6.24.0
- **状态管理:** Zustand 4.5.2
- **数据获取:** React Query 5.45.0
- **HTTP 客户端:** Axios 1.7.2
- **表单:** React Hook Form 7.52.0 + Zod 3.23.8

## 项目结构

```
src/
├── api/              # API 服务层
├── components/       # React 组件
│   ├── common/      # 通用组件
│   ├── layout/      # 布局组件
│   └── business/    # 业务组件
├── pages/           # 页面组件
│   ├── auth/        # 认证页面
│   ├── workspace/   # 工作空间
│   ├── subscription/# 订阅管理
│   ├── admin/       # Admin 后台
│   └── profile/     # 个人中心
├── hooks/           # 自定义 Hooks
├── store/           # 状态管理
├── router/          # 路由配置
├── types/           # TypeScript 类型
├── utils/           # 工具函数
└── styles/          # 全局样式
```

## 功能特性

- ✅ 用户认证（登录/注册/密码重置）
- ✅ 工作空间管理
- ✅ 成员管理和权限控制
- ✅ 订阅计划和升级
- ✅ 配额使用监控
- ✅ Admin 管理后台
- ✅ 个人设置和安全
- ✅ 响应式设计

## 环境变量

创建 `.env` 文件：

```env
VITE_API_URL=http://localhost:8000
```

## 开发指南

### 添加新页面

1. 在 `src/pages/` 下创建页面组件
2. 在 `src/router/index.tsx` 中添加路由
3. 确保导出 `Component` 用于懒加载

### 添加新 API

1. 在 `src/api/` 下创建服务模块
2. 定义 TypeScript 接口
3. 使用 `apiClient` 发起请求

### 状态管理

使用 Zustand 创建 Store：

```typescript
import { create } from "zustand";

interface MyStore {
  data: any;
  setData: (data: any) => void;
}

export const useMyStore = create<MyStore>((set) => ({
  data: null,
  setData: (data) => set({ data }),
}));
```

## 部署

```bash
# 构建
npm run build

# 产物在 dist/ 目录
```

## License

MIT