zhaohai666 opened a new pull request, #473:
URL: https://github.com/apache/rocketmq-dashboard/pull/473
## PR Info
PR Number: PR-1
Branch: feature/studio-login-page
## Summary
Implement the login page for RocketMQ Studio, including full user
authentication workflow, Auth API module, AI API module, and Zustand state
management integration. Meanwhile, remove ThemeContext to simplify global theme
handling logic.
## File Changes List
| File | Type | Description |
|------|------|-------------|
| pages/login/index.tsx | New | Login page component |
| api/auth.ts | New | Auth API module (login / logout interfaces) |
| api/auth.test.ts | New | Unit tests for Auth API (4 test cases) |
| api/ai.test.ts | New | Unit tests for AI API (6 test cases) |
| stores/authStore.ts | New | Zustand store for authentication state
management |
| App.tsx | Modified | Add /login route entry |
| layouts/MainLayout.tsx | Modified | Integrate logout and authentication
logic |
| main.tsx | Modified | Remove ThemeProvider for simplified ConfigProvider
setup |
| api/ai.ts | Modified | Refactor and streamline AI API implementation |
| test/setup.ts | Modified | Clean up redundant comments |
| theme/ThemeContext.tsx | Deleted | Remove global theme context component |
| theme/__tests__/ThemeContext.test.tsx | Deleted | Remove test cases for
ThemeContext |
## Core Functionalities
### 1. Login Page (pages/login/index.tsx)
- Built with Ant Design Form: username & password input fields
- Form validation with i18n localized error prompts for required fields
- Complete login flow: invoke loginApi → persist state via authStore → save
user role → redirect to homepage
- Global error capture: display failure tips via message.error on exceptions
- Loading state on submit button to prevent duplicate submissions
### 2. Auth API Module (api/auth.ts)
- `login(username, password)`: POST /auth/login, returns `{ token, username,
role }`
- `logout()`: POST /auth/logout request
- Complete TypeScript type definitions: `LoginRequest`, `LoginResponse`
### 3. AI API Module (api/ai.ts)
- `chatStream(data, onChunk, signal?)`: SSE streaming chat based on fetch +
ReadableStream
- `executeAiCommand(data)`: POST /ai/execute, returns `{ result, toolCalls }`
- `listTools()`: GET /ai/tools, returns MCP tool list
- Type definitions: `McpTool`, `AiExecuteRequest`
### 4. Authentication State Store (stores/authStore.ts)
- Zustand store maintaining `user` and `token` state
- `login()` method: persist token to localStorage and update global state
- `logout()` method: clear token from localStorage and reset auth state
### 5. Routing Integration (App.tsx)
- Register `/login` route mapped to LoginPage component
### 6. Theme Simplification (main.tsx)
- Remove ThemeProvider and all dark mode related logic
- Retain only light theme configuration for ConfigProvider
## I18n Translation Keys (10 total)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
