xiaoxia-saas/apps/web

小虾 SaaS - 前端应用

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

快速开始

# 安装依赖
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 文件：

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：

import { create } from "zustand";

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

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

部署

# 构建
npm run build

# 产物在 dist/ 目录

License

MIT