# @d8d/auth-management-ui

单租户认证管理界面独立包，提供完整的用户认证和登录功能。

## 功能特性

- 🔐 完整的用户认证系统
- 🎨 基于共享UI组件的现代化界面
- ⚡ 使用React 19 + TypeScript + TanStack Query
- 📦 独立的包结构，支持workspace依赖
- 🧪 完整的测试套件
- 🔧 支持独立构建和部署

## 安装

```bash
pnpm add @d8d/auth-management-ui
```

## 使用

### 基本使用

```tsx
import { AuthProvider, AuthManagement } from '@d8d/auth-management-ui';

function App() {
  return (
    <AuthProvider>
      <AuthManagement />
    </AuthProvider>
  );
}
```

### 使用认证Hook

```tsx
import { useAuth } from '@d8d/auth-management-ui';

function UserProfile() {
  const { user, isAuthenticated, login, logout } = useAuth();

  if (!isAuthenticated) {
    return <div>请先登录</div>;
  }

  return (
    <div>
      <h1>欢迎，{user?.username}</h1>
      <button onClick={logout}>退出登录</button>
    </div>
  );
}
```

### 使用登录页面

```tsx
import { LoginPage } from '@d8d/auth-management-ui';

function LoginRoute() {
  return <LoginPage />;
}
```

## 导出接口

### 组件
- `AuthProvider` - 认证状态管理组件
- `AuthManagement` - 主认证管理组件
- `LoginPage` - 登录页面组件

### Hooks
- `useAuth` - 认证状态和操作hook

### API客户端
- `authClient` - 认证API客户端
- `authEndpoints` - 认证API端点配置

### 类型定义
- `AuthContextType` - 认证上下文类型
- `AuthStatus` - 认证状态类型
- `AuthConfig` - 认证配置类型

## 开发

### 构建
```bash
pnpm build
```

### 测试
```bash
pnpm test
```

### 验证导出接口
```bash
node verify-exports-simple.mjs
```

## 依赖

- `@d8d/shared-ui-components` - 共享UI组件
- `@d8d/auth-module` - 认证模块API
- `react` - React框架
- `@tanstack/react-query` - 数据获取和状态管理
- `react-hook-form` - 表单处理
- `react-router` - 路由管理

## 许可证

MIT