灵应
8935196fcd
Deploy / Staging E2E Tests (push) Has been skipped
Deploy / Build Production Runtime Images (push) Has been skipped
Deploy / Deploy Production (push) Has been skipped
Deploy / Production Browser E2E (push) Has been skipped
Deploy / Deploy Staging (push) Failing after 138h4m33s
CI/CD Pipeline / Frontend Lint (push) Failing after 138h4m39s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 138h4m39s
119 lines
2.3 KiB
Markdown
119 lines
2.3 KiB
Markdown
# 小虾 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
|