# voidba-web-tanstack

**Repository Path**: jinggo-stdy/voidba-web-tanstack

## Basic Information

- **Project Name**: voidba-web-tanstack
- **Description**: 基于 TanStack Start 和 Material UI 重构的现代化管理后台系统。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-26
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 无垠管理后台 - TanStack Start 版本

基于 TanStack Start 和 Material UI 重构的现代化管理后台系统。

## 项目特性

- ✅ **TanStack Start**: 全栈 React 框架，支持 SSR
- ✅ **Material UI**: 现代化 UI 组件库
- ✅ **TypeScript**: 完整的类型安全
- ✅ **认证系统**: 登录/退出功能
- ✅ **响应式布局**: 侧边栏 + 顶部导航
- ✅ **路由管理**: 文件系统路由
- ✅ **数据表格**: 用户管理、角色管理等

## 项目结构

```
src/
├── components/          # 组件
│   ├── layout/         # 布局组件
│   ├── ui/             # UI 组件
│   ├── forms/          # 表单组件
│   └── tables/         # 表格组件
├── routes/             # 路由页面
│   ├── system/         # 系统管理
│   ├── tenant/         # 租户管理
│   ├── dict/           # 字典管理
│   ├── oss/            # 文件管理
│   └── logs/           # 日志管理
├── services/           # API 服务
├── types/              # 类型定义
├── utils/              # 工具函数
├── contexts/           # React Context
└── hooks/              # 自定义 Hooks
```

## 主要功能模块

### 1. 认证系统
- 登录页面 (`/login`)
- 验证码支持
- Token 管理
- 自动重定向

### 2. 系统管理
- 用户管理 (`/system/user`)
- 角色管理 (`/system/role`)
- 组织管理 (`/system/org`)
- 菜单管理 (`/system/menu`)
- 功能管理 (`/system/function`)

### 3. 租户管理
- 租户列表 (`/tenant/list`)
- 租户套餐 (`/tenant/package`)

### 4. 其他模块
- 字典管理
- 文件管理
- 日志管理

## 开发命令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

# 启动生产服务器
npm run start
```

## 环境配置

- **开发环境**: API 请求通过 Vite 代理到 `http://localhost:10001`
- **生产环境**: API 请求直接访问 `https://admin.voidba.com/api`

## API 接口

- 登录接口: `POST /api/auth/login`
- 验证码接口: `GET /api/auth/captcha`
- 用户管理: `/api/users/*`
- 角色管理: `/api/roles/*`

## 技术栈

- **框架**: TanStack Start
- **UI 库**: Material UI v6
- **状态管理**: React Hooks + Context
- **HTTP 客户端**: Axios
- **表格组件**: MUI X Data Grid
- **通知组件**: React Toastify
- **图标**: Material Icons + Remixicon
- **日期处理**: date-fns

## 部署说明

项目支持部署到任何支持 Node.js 的平台：
- Vercel
- Netlify
- 传统服务器
- Docker 容器

## 开发注意事项

1. **SSR 兼容性**: 注意 `localStorage` 等浏览器 API 的使用
2. **路由管理**: 使用文件系统路由，自动生成路由树
3. **类型安全**: 充分利用 TypeScript 的类型检查
4. **组件复用**: 抽象通用组件，提高开发效率

## 下一步计划

- [ ] 完善权限控制系统
- [ ] 添加更多业务模块
- [ ] 优化性能和用户体验
- [ ] 添加单元测试
- [ ] 完善文档和示例